All components
Color Swatch
Color chips with an alpha checkerboard, sized from 2xs to 2xl.
1234567891011121314151617import * as stylex from "@stylexjs/stylex";import { ColorSwatch } from "#components/ui/ark-ui/color-swatch.tsx";
const styles = stylex.create({ indigo: { "--color": "oklch(0.55 0.22 277)" },});
export function Example() { return ( <> {/* size + shape props resolve through the StyleX recipe; the swatch color feeds the --color custom property via the style prop */} <ColorSwatch size="md" style={styles.indigo} /> <ColorSwatch size="md" shape="circle" style={styles.indigo} /> </> );}Sizes
2xs
xs
sm
md
lg
xl
2xl
Install
1npx stylexblocks add color-swatchSource
components/ui/ark-ui/color-swatch.tsx
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687import * as stylex from "@stylexjs/stylex";import { createComponent } from "#lib/ark-ui/create-component.tsx";import { defineRecipe } from "#lib/recipe-props.ts";import { radii } from '@stylexblocks/ui/tokens/radii.stylex.ts'import { semanticColors } from '@stylexblocks/ui/semantic-tokens/colors.stylex.ts'import { semanticRadii } from '@stylexblocks/ui/semantic-tokens/radii.stylex.ts'import { sizes } from '@stylexblocks/ui/tokens/sizes.stylex.ts'
const colorSwatchStyles = stylex.create({ base: { width: 'var(--swatch-size)', height: 'var(--swatch-size)', boxShadow: 'inset 0 0 0 1px rgba(0, 0, 0, 0.1)', '--checker-size': '8px', '--checker-bg': semanticColors.bg, '--checker-fg': semanticColors.bgEmphasized, backgroundImage: 'linear-gradient(var(--color), var(--color)), repeating-conic-gradient(var(--checker-fg) 0%, var(--checker-fg) 25%, var(--checker-bg) 0%, var(--checker-bg) 50%) 0% 50% / var(--checker-size) var(--checker-size) !important', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, },})
const colorSwatchSizes = stylex.create({ '2xs': { '--swatch-size': sizes._3_5, }, xs: { '--swatch-size': sizes._4, }, sm: { '--swatch-size': sizes._4_5, }, md: { '--swatch-size': sizes._5, }, lg: { '--swatch-size': sizes._6, }, xl: { '--swatch-size': sizes._7, }, '2xl': { '--swatch-size': sizes._8, }, inherit: { '--swatch-size': 'inherit', }, full: { '--swatch-size': '100%', },})
const colorSwatchShapes = stylex.create({ square: { borderRadius: 'none', }, circle: { borderRadius: radii.full, }, rounded: { borderRadius: semanticRadii.l1, },})
export type ColorSwatchSize = keyof typeof colorSwatchSizes
export type ColorSwatchShape = keyof typeof colorSwatchShapes
/** * ColorSwatch — recipe and component colocated in one file. Size/shape props * resolve mechanically from the axis maps; pass the swatch color through the * `style` prop (it feeds the `--color` custom property). Composition via * `asChild`. */const colorSwatchRecipe = defineRecipe({ styles: colorSwatchStyles, axes: { size: colorSwatchSizes, shape: colorSwatchShapes }, defaultVariants: { size: "md", shape: "rounded" },});
export const ColorSwatch = createComponent("span", colorSwatchRecipe, "ColorSwatch");
export type ColorSwatchProps = React.ComponentProps<typeof ColorSwatch>;