feat(ui): migrate templates to semantic color tokens (LC-193) #239

Merged

nrupard merged 1 commit from feat/lc-193-token-migration into main

2026-05-27 21:46:42 +02:00

nrupard commented

2026-05-27 21:43:51 +02:00

Owner

The recolor keystone for the theming story: migrate the templates off hardcoded slate/white/blue utility classes onto the LC-190 semantic tokens, so the dark (LC-191) and high-contrast (LC-192) palettes now recolor the whole app - not just the <body>.

Mapping (applied across ~90 templates, ~750 swaps)

Text: slate-900/800 -> text-content; slate-700/600/500 -> text-content-muted; slate-400/300 -> text-content-subtle
Surfaces: bg-slate-50 -> bg-surface; bg-white -> bg-surface-elevated; bg-slate-100/200/300 -> bg-surface-sunken
Borders: slate-100/200 -> border-border; slate-300 -> border-border-strong; divide-slate-200 -> divide-border
Brand blue: primary buttons -> bg-accent text-accent-content hover:bg-accent-hover; links -> text-accent
Status colors (green/red/amber) -> success/danger/warning tokens where they convey state

Deliberately left as-is

Intentionally-dark elements (bg-slate-600..900 + text-white: the call/voice video dialogs, tooltips, dark switcher chrome), bg-black scrims, light status tints (bg-red-50/green-50/amber-50, emerald/sky/indigo badge tints that have no token), presence-dot colors, ring-* focus colors, and the brand-* classes. All 28 token utility classes used are validated against tailwind.config.js (Tailwind silently drops typo'd utilities, so this was checked explicitly).

Tests

routes_room_mute / routes_dm_mute: muted-anchor assertions -> text-content-subtle.
Mention-badge exact-string assertion -> the danger token; and the matching JS-built badge in layout.html's inline script migrated to bg-danger/text-danger-content too, so a live mention-count update doesn't restyle the badge differently from the server render.
The 4 lc77_* render fixtures regenerated (FIXTURE_WRITE=1) to the new token classes.

just test + just test-saas green; cargo fmt --all clean; built CSS emits the token utilities.

Result

Switching to Dark / High-contrast in Settings -> Appearance now recolors the entire UI. This completes the core of the LC-189 theming story (LC-190 tokens -> LC-191 switching -> LC-192 HC -> LC-193 migration).

The recolor keystone for the theming story: migrate the templates off hardcoded `slate`/`white`/`blue` utility classes onto the LC-190 semantic tokens, so the **dark (LC-191)** and **high-contrast (LC-192)** palettes now recolor the whole app - not just the `<body>`. ## Mapping (applied across ~90 templates, ~750 swaps) - Text: `slate-900/800` -> `text-content`; `slate-700/600/500` -> `text-content-muted`; `slate-400/300` -> `text-content-subtle` - Surfaces: `bg-slate-50` -> `bg-surface`; `bg-white` -> `bg-surface-elevated`; `bg-slate-100/200/300` -> `bg-surface-sunken` - Borders: `slate-100/200` -> `border-border`; `slate-300` -> `border-border-strong`; `divide-slate-200` -> `divide-border` - Brand blue: primary buttons -> `bg-accent text-accent-content hover:bg-accent-hover`; links -> `text-accent` - Status colors (green/red/amber) -> `success`/`danger`/`warning` tokens where they convey state ## Deliberately left as-is Intentionally-dark elements (`bg-slate-600..900` + `text-white`: the call/voice video dialogs, tooltips, dark switcher chrome), `bg-black` scrims, light status tints (`bg-red-50`/`green-50`/`amber-50`, emerald/sky/indigo badge tints that have no token), presence-dot colors, `ring-*` focus colors, and the `brand-*` classes. All **28** token utility classes used are validated against `tailwind.config.js` (Tailwind silently drops typo'd utilities, so this was checked explicitly). ## Tests - `routes_room_mute` / `routes_dm_mute`: muted-anchor assertions -> `text-content-subtle`. - Mention-badge exact-string assertion -> the danger token; **and** the matching JS-built badge in `layout.html`'s inline script migrated to `bg-danger`/`text-danger-content` too, so a live mention-count update doesn't restyle the badge differently from the server render. - The 4 `lc77_*` render fixtures regenerated (`FIXTURE_WRITE=1`) to the new token classes. `just test` + `just test-saas` green; `cargo fmt --all` clean; built CSS emits the token utilities. ## Result Switching to Dark / High-contrast in Settings -> Appearance now recolors the entire UI. This completes the core of the LC-189 theming story (LC-190 tokens -> LC-191 switching -> LC-192 HC -> LC-193 migration).

nrupard added 1 commit

2026-05-27 21:43:51 +02:00

feat(ui): migrate templates to semantic color tokens (LC-193)

check-secrets / Nosey parker (push) Successful in 3s

Details

check-secrets / TruffleHog (push) Successful in 4s

Details

check-secrets / Kingfisher (push) Successful in 5s

Details

check-secrets / TruffleHog (pull_request) Successful in 8s

Details

check-secrets / Nosey parker (pull_request) Successful in 8s

Details

check-secrets / Kingfisher (pull_request) Successful in 9s

Details

Create release / Create release from merged PR (pull_request) Has been skipped

Details

Check / clippy + fmt + tests (pull_request) Successful in 4m27s

Details

bbcff9a6a8

The recolor keystone: swap hardcoded slate/white/blue utility classes across the templates for the LC-190 design tokens, so the dark (LC-191) and high-contrast (LC-192) palettes now recolor the whole app, not just the body.

Mapping applied across room/ ws/ partials/ admin/ enclave/ auth/ two_factor/ settings/ root + small dirs (~750 swaps, ~90 templates):
- neutral text slate-900/800 -> text-content, slate-700/600/500 -> text-content-muted, slate-400/300 -> text-content-subtle
- surfaces bg-slate-50 -> bg-surface, bg-white -> bg-surface-elevated, bg-slate-100/200/300 -> bg-surface-sunken
- borders slate-100/200 -> border-border, slate-300 -> border-border-strong, divide-slate-200 -> divide-border
- brand-blue primary buttons -> bg-accent text-accent-content hover:bg-accent-hover; blue links -> text-accent
- status colors green/red/amber -> success/danger/warning tokens where they convey state

Deliberately left as-is: intentionally-dark elements (bg-slate-600..900 + text-white: the call/voice video dialogs, tooltips, dark switcher chrome), bg-black scrims, light status tints (bg-red-50/green-50/amber-50, emerald/sky/indigo badge tints with no token), presence-dot colors, ring focus colors, brand-* classes. All 28 token utility classes used are validated against tailwind.config.js.

Tests: routes_room_mute / routes_dm_mute muted-anchor assertions updated to text-content-subtle; the mention-badge exact-string assertion updated to the danger token, and the matching JS-built badge in layout.html's inline script migrated to bg-danger/text-danger-content too (so a live count update doesn't restyle the badge vs the server render); the 4 lc77 render fixtures regenerated. just test + just test-saas green; cargo fmt --all clean.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>