UI Lab

Themes

Light and dark semantic tokens — use the header toggle for global preview; blocks below show side-by-side parity.

Foundations · fixture-only

Global theme switch

data-theme on the shell root drives canvas, surface, edge, and accent tokens app-wide.

Workshop: Workshop AppShell — one toggle, no per-page theme hacks.

Fixture data only — behaviour matches production chrome

Component parity review

ThemeMatrix previews the same widget in light and dark before shipping a new primitive.

Workshop: Silver theme gate — actions, badges, and form controls must pass both columns.

Fixture data only — behaviour matches production chrome

Form focus discipline

Inputs use neutral ghost focus rings — brand teal is for CTAs, not field chrome.

Workshop: All FormField routes; see Form tokens for the underlying utilities.
Avoid: Applying brand ring or outline classes directly on inputs.

Fixture data only — behaviour matches production chrome

Actions

Primary accent and neutral variants — parity check across light and dark.

Button variants

Light

Dark

Badges

Semantic status chips — tone maps to CSS variables per theme.

Status chips

Light

ActiveReviewFailed

Dark

ActiveReviewFailed

Form controls

Input focus uses neutral ghost ring — never brand teal on form fields.

Input focus ramp

Light

Dark