All components
Mark
Inline text highlights with subtle, solid, and text-decoration treatments.
Styles are compiled
123456789101112import { Mark } from "#components/ui/base-ui/mark.tsx";
export function Example() { return ( <p> {/* the variant prop resolves through the StyleX recipe and is exposed as a data-variant attribute */} Styles are <Mark variant="subtle">compiled at build time</Mark> and shipped as <Mark variant="text">static CSS</Mark>. </p> );}Variants
Styles are compiledsubtle
Styles are compiledsolid
Styles are compiledtext
Styles are compiledplain
Install
1npx stylexblocks add markSource
components/ui/base-ui/mark.tsx
123456789101112131415161718192021222324252627282930313233343536373839404142434445import * as stylex from "@stylexjs/stylex";import { createComponent } from "#lib/base-ui/create-component.tsx";import { defineRecipe } from "#lib/recipe-props.ts";import { colorPalette } from '@stylexblocks/ui/color-palette.stylex.ts'import { fontWeights } from '@stylexblocks/ui/tokens/font-weights.stylex.ts'
const markStyles = stylex.create({ base: { backgroundColor: 'transparent', color: 'inherit', whiteSpace: 'nowrap', },})
const markVariants = stylex.create({ subtle: { backgroundColor: colorPalette.subtle, color: 'inherit', }, solid: { backgroundColor: colorPalette.solid, color: colorPalette.contrast, }, text: { fontWeight: fontWeights.medium, }, plain: {},})
export type MarkVariant = keyof typeof markVariants
/** * Mark — recipe and component colocated in one file. The variant prop * resolves mechanically from the axis map. Composition via `render`. */const markRecipe = defineRecipe({ styles: markStyles, axes: { variant: markVariants }, defaultVariants: { variant: "subtle" },});
export const Mark = createComponent("mark", markRecipe, "Mark");
export type MarkProps = React.ComponentProps<typeof Mark>;