ColorSwatch

Implemented

Color preview block — 24×24 rounded square with hex/RGB tooltip. Used in design system docs and theme editor.

Categoryatoms

Sourcepatterns/atoms/colorswatch.html

AI HintColor preview block with hex/RGB tooltip for docs pages and theme editors. With onClick it becomes a button floored at 44px (WCAG 2.5.5); without it a compact role=img preview whose accessible name carries the value.

Token-aware color preview tile. FR-CA: Échantillon de couleur avec jeton.

ColorSwatch

Display atom (Family 2 — Tier 1, placeholder)

Tier-1 placeholder. Production component ships in DS-313.

ep-teal

#009FCA

ep-semantic-success

#16A34A

ep-semantic-warning

#D97706

ep-semantic-error

#DC2626

ep-text-heading

#1A2332

This component supports light and dark mode.

Status

Tier-1 placeholder. Production component ships in DS-313.

Intended API

import { ColorSwatch } from '@epasslive/design-system'

<ColorSwatch token="ep-teal" label="Sarcelle" />
<ColorSwatch token="ep-semantic-error" label="Erreur" size="sm" />

Accessibility

The wrapper renders role="img" with an explicit French label.

Props

Prop

Type

Default

Description

token

string

ep-teal

Tailwind token key.

hex

string

#009FCA

Resolved hex value.

label

string

Teal

French label announced to assistive tech.

size

'sm' | 'md' | 'lg'

md

Visual size of the swatch tile.

Props

Preview

ColorSwatch

Prop

Type

Required

Default

Description

color

string

Required

—

CSS color value (hex, rgb, hsl)

name

string

Optional

—

Form/field name.

size

"sm" | "md" | "lg"

Optional

'md'

Visual size preset.

onClick

() => void

Optional

—

Called when the element is activated.

Quick use:<ColorSwatch />

Accessibility

ARIA roleimg

Usage

Import

tsxSnippet

import { ColorSwatch } from "@epasslive/design-system"

Example 1

tsxSnippet

<ColorSwatch />

Example 2

tsxSnippet

<ColorSwatch variant="default" />

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms