PixelColorSwatch

Design-token preview tile that renders a CSS custom property as a color sample alongside its human name and variable identifier.

Pairs a 32px color chip with token name + CSS variable label for at-a-glance audits
Reads the color directly from a CSS custom property so it stays in sync with the active theme
Pixel + linear surface variants share identical API and tokenized geometry
Pure presentational primitive — SSR-safe and side-effect free

Status: stable
Category: data
Since: v1.0.0

API

import { PixelColorSwatch } from '@pxlkit/ui-kit';

Prop	Type	Default	Description
`name` (required)	`string`	—	Display name for the token (e.g. "Cyan 500").
`cssVar` (required)	`string`	—	CSS variable to preview (e.g. "--retro-cyan").
`surface`	`'pixel' \| 'linear'`	—	Visual surface override.

WCAG target: 2.1 AA

img

Non-interactive presentational block. The visible token name + cssVar string provide the textual description of the color sample for screen readers; no separate alt text is required because the chip itself carries no semantic meaning beyond the adjacent label.

Usage

import { PixelColorSwatch } from '@pxlkit/ui-kit';

export function Default() {
  return <PixelColorSwatch name="cyan" cssVar="--color-retro-cyan" />;
}

Examples

Default

import { PixelColorSwatch } from '@pxlkit/ui-kit';

export function Default() {
  return <PixelColorSwatch name="cyan" cssVar="--color-retro-cyan" />;
}

Palette

import { PixelColorSwatch } from '@pxlkit/ui-kit';

export function Palette() {
  return (
    <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 max-w-xl">
      <PixelColorSwatch name="green" cssVar="--color-retro-green" />
      <PixelColorSwatch name="cyan" cssVar="--color-retro-cyan" />
      <PixelColorSwatch name="gold" cssVar="--color-retro-gold" />
      <PixelColorSwatch name="purple" cssVar="--color-retro-purple" />
      <PixelColorSwatch name="red" cssVar="--color-retro-red" />
      <PixelColorSwatch name="pink" cssVar="--color-retro-pink" />
    </div>
  );
}

Surfaces

import { PixelColorSwatch } from '@pxlkit/ui-kit';

export function Surfaces() {
  return (
    <div className="flex flex-col gap-4">
      <PixelColorSwatch name="cyan" cssVar="--color-retro-cyan" surface="pixel" />
      <PixelColorSwatch name="cyan" cssVar="--color-retro-cyan" surface="linear" />
    </div>
  );
}

Surface Tokens

import { PixelColorSwatch } from '@pxlkit/ui-kit';

export function SurfaceTokens() {
  return (
    <div className="grid grid-cols-2 gap-3 max-w-md">
      <PixelColorSwatch name="surface" cssVar="--color-retro-surface" />
      <PixelColorSwatch name="border" cssVar="--color-retro-border" />
      <PixelColorSwatch name="text" cssVar="--color-retro-text" />
      <PixelColorSwatch name="muted" cssVar="--color-retro-muted" />
    </div>
  );
}

Related