Theme Builder

mandatory

Interactive in-browser tool at `kds.koder.dev/themer/` that turns a seed color into a full Material-3-style palette and exports tokens in every supported format. Replaces the legacy paste-JSON playground. Material parity (`/theme-builder`).

Spec — Theme Builder

Facet *ool*of Koder Design. Material parity: https://m3.material.io/theme-builder.

URL: https://kds.koder.dev/{locale}/themer/ (canonical; backwards-compatible alias /playground/ 301 → /themer/).

What it replaces

Legacy	New
`/playground/` paste-JSON token editor	`/themer/` guided seedtotokens flow

Legacy playground stays reachable for power users who want raw JSON edit — but the Themer is the default entry point.

Three flows on one page

Flow	Input	Output
eed → palette	One seed color	18~~role palette (light + dark) per `color~~dynamic.kmd`
anual override	Per-role color picker	Tweaked palette + visible "out of WCAG" warnings
mport	Paste JSON, upload SVG / image	Detects color, runs Seed → palette

User can move freely between flows; state is shared.

R1 — Layout (three panes)

┌──────────────┬────────────────────────────┬──────────────────┐
│   Inputs     │        Live preview        │     Export       │
│              │                            │                  │
│  seed: ●     │  ┌─ Buttons ─────────────┐ │  Format dropdown │
│  brand: ●    │  │ Filled / Tonal / Out  │ │  ├ CSS vars      │
│  density: ●  │  └───────────────────────┘ │  ├ JSON tokens   │
│              │                            │  ├ SCSS map      │
│  Surface     │  ┌─ Cards ──────────────┐ │  ├ Dart const    │
│  scheme: ●   │  │ Sample card content   │ │  ├ TS .d.ts      │
│              │  └───────────────────────┘ │  └ Figma JSON    │
│  Preset:     │                            │                  │
│  material3 ▾ │  ┌─ Form ───────────────┐ │  [Download .zip] │
│              │  │ Field    [Submit]     │ │  [Copy URL]      │
└──────────────┴────────────────────────────┴──────────────────┘
   320 dp          flex-grow                    320 dp

Pane	Width (Expanded ≥ 840 dp)	Behavior on Compact
Inputs	320 dp left	Bottom sheet (modal)
Preview	flex	Full width below inputs
Export	320 dp right	Bottom sheet (modal)

Mobile (Compact): preview is the main view; inputs and export reach via bottom sheets.

R2 — Inputs pane

Controls (top to bottom):

*eed color*picker (HCT-aware; shows hue / chroma / tone
sliders + hex input)
*heme mode*segmented button: Light / Dark / System (default
System — preview switches per OS)
*reset*dropdown (material3, ios_cupertino, gnome, etc. —
matches customization.kmd L4 styling)
*ensity*segmented button: Compact / Default / Comfortable
*hape scale*preview row (modifying global radius scale)
*rand override*color picker (optional — overrides primary
while keeping other roles algorithmic)
*dvanced*disclosure → per-role manual overrides

Each control change triggers preview recompute (debounced 100 ms).

R3 — Preview pane

Shows representative components rendered with the current tokens:

Section	Components
Surfaces	Container, Card (3 variants), Elevation levels
Controls	All 7 button variants, Switch, Checkbox, Radio, Slider
Input	Text fields (Filled + Outlined), Chips, Date picker preview
Feedback	Snackbar, Banner, Progress indicator, Badge on icon
Containers	Top app bar, Bottom nav bar, Dialog mock
Typography	Display / Headline / Title / Body / Label scales

Each component matches its `specs/components