Commit Graph

4 Commits

Author SHA1 Message Date
Florian Schroedl
bfc6cf4c53 feat(dev): add spacing base step control to theme adapter panel
Adds a "Spacing" section with a Base slider (0.10–0.50 rem) that
live-updates all --size-1 through --size-16 CSS variables. The value
persists in localStorage, resets with the Reset button, and is
included in the Copy EDN output.
2026-03-11 17:02:05 +01:00
Florian Schroedl
9f3ebe453f refactor(dev): dogfood framework CSS in theme adapter panel
Replace all inline styles in theme-adapter.js with framework classes.
The panel now uses its own tokens (var(--bg-1), var(--fg-0), etc.) so
it visually adapts when you change theme colors — true dogfooding.

New framework components added to fill gaps:
- popover.css — fixed-position floating panel (.popover, .popover-br)
- chip.css + chip.cljc — selectable preset buttons (.chip, .chip-active)
- swatch.css — color preview strips (.swatch-row, .swatch)
- button.css — icon-only buttons (.btn-icon, .btn-icon-round)
- card.css — sectioned card variant (.card-flush, .card-section)
- utilities.css — text/flex helpers (.text-xs, .font-semibold, .flex-1, etc.)

Theme adapter JS shrunk from 340 to 250 lines by removing the 60-line
inline style object and applyStyle() helper.
2026-03-11 16:53:08 +01:00
Florian Schroedl
59d46700bc refactor(theme): switch color generation from HSL to OKLCH
OKLCH is a perceptually uniform color space — equal lightness values
produce equal perceived brightness across all hues, unlike HSL where
blue at 50% looks much darker than yellow at 50%.

Color scales now output oklch() CSS values directly:
  --gray-500: oklch(0.530 0.035 285);
  --accent-500: oklch(0.595 0.230 286);

The browser handles gamut mapping natively. Scale definitions in
tokens.edn use [label lightness chroma] tuples where L is 0-1
perceptual lightness, C is chroma (colorfulness), H is hue degrees.

Theme adapter updated: sliders now control OKLCH hue/chroma,
swatches render with oklch() CSS, Copy EDN outputs OKLCH config.

gen.clj includes oklch->srgb and oklch->hex for validation/tools.
2026-03-11 12:04:33 +01:00
Florian Schroedl
41811dba88 feat(dev): add live theme adapter panel for color customization
Floating panel in bottom-right of all dev targets lets you:
- Switch presets (Purple, Blue, Neutral, Warm, Rose, Emerald)
- Adjust gray hue/saturation and accent hue/saturation with sliders
- Preview color swatches in real-time
- Copy EDN config to paste into tokens.edn

State persists in localStorage. Panel collapses to a small toggle button.
Hiccup handler changed to use #'handler var for hot-reload.
2026-03-11 11:51:59 +01:00