Dev Tools
SemanticColorDemo
Grid of color swatches showing tokens applied in context. Three modes: content (text preview), fill (colored rectangles), border (bordered squares). Supports configurable background, dark stage, and column count.
Import
import SemanticColorDemo from '../../components/utility/SemanticColorDemo.astro';Props
| Prop | Type | Required | Description |
|---|---|---|---|
tokens | SwatchItem[] | Yes | Array of { token, label, usage? } objects |
mode | 'content' | 'fill' | 'border' | No | Swatch rendering mode, defaults to 'content' |
background | string | No | CSS value for stage background |
darkStage | boolean | No | Force dark stage (sets data-theme="dark") |
columns | number | No | Grid column count, defaults to 4 |
Content mode
Aa content-primary Main text Aa content-secondary Supporting text Aa content-tertiary Captions Fill mode
fill-element-brand-soft fill-element-critical-soft fill-element-info-soft Border mode
border-element-brand-softer border-element-critical-softer