Repository navigation
feat: theme studio: /theme/ as a full editor (presets, per-token colours, fonts, shape, live kit preview, share, apply to site, AI-free generation) #560
Description
/theme/ is poor: one long radio list, one settings card, a code panel that prints defineTheme({}). The bar is tweakcn.
Build a Theme Studio on the real engine (ThemeOptions, presetContrastIssues, colorScheme.setTokens), with lib components only:
- Presets gallery with swatches (built-ins + design styles), search, randomize, undo/redo, reset.
- Per-token colour roles per scheme (brand, surfaces, text, outlines, semantic) with an OKLCH/hex field, swatch and inline contrast readout (new lib
ColorField). - Fonts (curated pairs, live Google Fonts load), radius, density, type scale, border, shadow/elevation, motion, noise, paper.
- Live preview of real screens (dashboard, settings, auth, pricing, forms, overlays) at 390/768/1280 and light/dark side by side.
- Code export (theme.ts + CSS vars), share URL that round-trips, "Export for AI" prompt.
- "Apply to site": visitor-only localStorage key, never touches the published default or build output; "Reset to sketchbook".
- Text prompt to theme and image/logo to palette, client side (OKLCH quantization), no API key.
- Mobile: controls in a Sheet; rAF-batched token writes; keyboard + axe clean.
Activity
mvilacad commentedon Oct 25, 2026
Working on this in #562 (draft). Branch
feat/560-feat-theme-studio-theme-as-a. Regression test first, then the fix.feat: ColorField, SliderField and color utilities; studio state core (#…
feat: theme studio: presets, colour roles, live preview, apply (#560)
fix: theme studio tests: satisfy strict native type check (#560)
fix: theme studio panels: token lint fixes (#560)
chore: start #560
feat: ColorField, SliderField and color utilities; studio state core (#…
feat: theme studio: presets, colour roles, live preview, apply (#560)
fix: theme studio tests: satisfy strict native type check (#560)
fix: theme studio panels: token lint fixes (#560)
feat: charts follow a theme scope; real charts in the studio (#560)
test: demos catalog builds the manifest once per file (#560)
6 remaining items
fix: theme studio: screen picker scrolls instead of clipping labels (#…
fix: theme studio: screen select, static overlay notice, axe stable (#…
feat: theme studio: stateFromRecipe for style pages applying a recipe (…
chore: start #560
feat: ColorField, SliderField and color utilities; studio state core (#…
feat: theme studio: presets, colour roles, live preview, apply (#560)
fix: theme studio tests: satisfy strict native type check (#560)
fix: theme studio panels: token lint fixes (#560)
feat: charts follow a theme scope; real charts in the studio (#560)
fix: theme studio: screen picker scrolls instead of clipping labels (#…
fix: theme studio: screen select, static overlay notice, axe stable (#…
feat: theme studio: stateFromRecipe for style pages applying a recipe (…
fix: slider docs ids, theme mobile test, scrollFocusable harness (#560)
feat: theme studio: presets, colour roles, live preview, apply to site (