feat(redesign): five-theme system + visual Appearance dialog #320

Merged

Cordy merged 11 commits from feat/redesign3 into main

2026-08-27 14:31:28 +00:00

Cordy commented

2026-08-27 14:29:13 +00:00

Owner

Redesign phase 3, slice 1 (from the new files-mockup handoff).

Themes — now five

Night (stored value stays dark, so no user's saved preference orphans): the blue family. The #rd-style dark block previously carried green-cast values while legacy panels stayed blue — it's now coherently blue (#101b20 page / #15252c surface family, glacier #4db8c9).
Dusk (new value): the mockup's green-cast dark, added to both token systems (new --paper/--ink/--accent block + legacy --snow/--glacier block) plus moss/ember/graphite accent variants in both.
Ebony (black): untouched.
Slate (new value): mid-dark cool grey from the mockup, both token systems, all accent variants, plus the explicit header hairline (#464c56) because slate's planes sit close together.
Light: untouched.
applyPrefs() passes dusk/slate through; i18n themeDark relabelled Night/Nacht/Nuit/Notte.

Appearance dialog

The three <select>s replaced by the mockup's visual pickers: six theme miniature tiles (System tile added as a split light/night preview — the mockup had no System because it was review chrome, but the product supports it), accent swatches with names, density buttons that draw their own row rhythm. Language stays a select. Same prefs store + localStorage key, applyPrefs() on click, aria-pressed state synced.

Verification

node --check on all script blocks; anchored splices with count=1 guards; zero pref-theme references remain. Visual check on the dogfood is the operator's: avatar → Appearance → flip all six tiles and four accents.

Known gap (deliberate, next slices): components whose dark styling is keyed specifically to [data-theme="dark"]/[data-theme="black"] selectors (e.g. menu shadows) don't yet know about dusk/slate — they'll render with light-theme shadows there until the user-menu slice lands.

Redesign phase 3, slice 1 (from the new files-mockup handoff). ## Themes — now five - **Night** (stored value stays `dark`, so no user's saved preference orphans): the blue family. The `#rd-style` dark block previously carried green-cast values while legacy panels stayed blue — it's now coherently blue (`#101b20` page / `#15252c` surface family, glacier `#4db8c9`). - **Dusk** (new value): the mockup's green-cast dark, added to **both** token systems (new `--paper/--ink/--accent` block + legacy `--snow/--glacier` block) plus moss/ember/graphite accent variants in both. - **Ebony** (`black`): untouched. - **Slate** (new value): mid-dark cool grey from the mockup, both token systems, all accent variants, plus the explicit header hairline (`#464c56`) because slate's planes sit close together. - **Light**: untouched. - `applyPrefs()` passes `dusk`/`slate` through; i18n `themeDark` relabelled Night/Nacht/Nuit/Notte. ## Appearance dialog The three `<select>`s replaced by the mockup's visual pickers: six theme miniature tiles (System tile added as a split light/night preview — the mockup had no System because it was review chrome, but the product supports it), accent swatches with names, density buttons that draw their own row rhythm. Language stays a select. Same `prefs` store + `localStorage` key, `applyPrefs()` on click, `aria-pressed` state synced. ## Verification `node --check` on all script blocks; anchored splices with count=1 guards; zero `pref-theme` references remain. Visual check on the dogfood is the operator's: avatar → Appearance → flip all six tiles and four accents. Known gap (deliberate, next slices): components whose dark styling is keyed specifically to `[data-theme="dark"]`/`[data-theme="black"]` selectors (e.g. menu shadows) don't yet know about dusk/slate — they'll render with light-theme shadows there until the user-menu slice lands.

Cordy added 11 commits

2026-08-27 14:29:14 +00:00