<semantic-palette>
Preview a palette in use as VB semantic roles — button, link, badge, alert — each with its own WCAG contrast chip. Editing happens upstream in
Overview
The <semantic-palette> component is a live preview. Give it a palette — either as a child <color-palette>, a child <palette-generator>, or a colors attribute — and it renders one preview card per semantic role (primary, secondary, accent, and optional status roles). Each card shows the color in use (button, link, badge for brand roles; alert, solid badge, inline for status roles) with a per-pairing WCAG chip next to each sample.
There are no hex inputs, no OKLCh inputs, and no drag-to-reassign inside this component — editing happens upstream. To let users change a color, pair it with <color-palette editable>.
<semantic-palette show-export> <color-palette colors="#6366f1,#ec4899,#22c55e" editable></color-palette></semantic-palette>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
colors |
string | — | Comma-separated hex palette (fallback when no child <color-palette> or <palette-generator>). |
roles |
string | primary,secondary,accent |
Comma-separated roles in assignment order (positional — colors[0] is assigned to roles[0]). Valid: primary, secondary, accent, success, warning, error, info. |
show-export |
boolean | — | Show Copy Theme CSS / Copy JSON toolbar. |
label |
string | — | Optional heading label above the previews. |
Context over abstract numbers
A contrast ratio only means something when you know which pair it measures. Each card shows three real samples and labels the ratio for each:
- Brand roles (primary, secondary, accent)
- Button (role as background) · Link on surface (role as foreground) · Subtle badge (tinted pair).
- Status roles (success, warning, error, info)
- Alert (role text on role subtle) · Solid badge (auto-picked foreground on role) · Inline status (role as text on surface).
If a combination fails WCAG, you see the failure where the user would actually encounter it — not as an abstract number in a column.
All seven roles
Pass all seven roles to produce a complete theme preview.
<semantic-palette roles="primary,secondary,accent,success,warning,error,info" show-export> <color-palette colors="#6366f1,#8b5cf6,#ec4899,#22c55e,#eab308,#ef4444,#3b82f6" editable></color-palette></semantic-palette>Wire to palette-generator
Nest a <palette-generator> inside to source colors algorithmically. The preview updates whenever the generator emits palette-generator:generate.
<semantic-palette show-export> <palette-generator seed="#6366f1" harmony="triadic" show-values show-names> <color-picker><input type="color" value="#6366f1" /></color-picker> </palette-generator></semantic-palette>Export Format
The Copy Theme CSS button emits a :root block ready to paste into a VB theme file. Brand roles write hue/lightness/chroma seeds (so all derived tokens like -hover, -active, -subtle follow); status roles write explicit oklch() values.
:root { /* Brand seeds */ --hue-primary: 262.8; --lightness-primary: 58.2%; --chroma-primary: 0.209; --hue-secondary: 337.6; --lightness-secondary: 64.3%; --chroma-secondary: 0.226; --hue-accent: 150.2; --lightness-accent: 74.8%; --chroma-accent: 0.187; /* Status colors */ --color-success: oklch(72.3% 0.198 150.2); --color-error: oklch(64.1% 0.227 27.5);}The Copy JSON button emits a role → hex object, handy for design tokens pipelines.
Events
| Event | Detail | Description |
|---|---|---|
semantic-palette:change |
{ mapping, tokens, source } |
Fires on initial render and whenever the upstream palette emits a change. source is one of init, palette, attribute. |
Accessibility
- Each card is an
<article>with anaria-labelnaming the role. - Sample buttons use
tabindex="-1"— they're decorative previews, not interactive. - Contrast chips include text labels (AAA/AA/Fail) alongside color — never color-only communication.
- Editing the palette is a responsibility of the upstream
<color-palette editable>or<palette-generator>, which handle their own accessibility.