Theming & tokens

Every value resolves to a design token (a CSS variable). Toggle light/dark with the header controls, or browse the theme presets — these previews update live, with no rebuild.

Semantic colors

--background

--foreground

--primary

--secondary

--muted

--accent

--destructive

--border

Components re-theme automatically

Live preview

The same components, driven entirely by tokens.

How it works

DTCG tokens (JSON)
   │  Style Dictionary
   ▼
:root { --primary: #7c3aed; ... }
.dark { --primary: #8b5cf6; ... }
[data-theme="emerald"] { --primary: #059669; ... }
   │  @weaveworm/tailwind maps tokens → Tailwind theme
   ▼
<Button className="bg-primary" />   // follows the active theme