feat(css): add --sidebar-* chrome tokens (LC-554 phase 1b) #523

Merged

longjacksonle merged 1 commit from feat/LC-554-sidebar-tokens into main

2026-07-08 21:01:51 +02:00

longjacksonle commented

2026-07-08 20:57:54 +02:00

Owner

LC-UI-01 phase 1b: introduce `--sidebar-*` chrome tokens (CSS only, no visual change)

Second slice of LC-554 (epic LC-553). Adds a dedicated --sidebar-* token family so the room sidebar can get its own dark-navy Blue Harbor identity, following the exact pattern the enclave rail already uses (--rail-*, consumed via raw CSS rules, not Tailwind utilities).

What changed

Six tokens defined in all four theme blocks (:root, [data-theme=dark], hc-light, hc-dark): --sidebar-surface, -elevated, -sunken, -content, -muted, -border.

Light :root: dark-navy chrome #071a2f over the light page - the signature Blue Harbor look. The light sidebar deliberately mirrors the dark theme's navy surfaces.
Dark: sidebar sits one step darker than the navy page (#041326) so it still reads as distinct chrome (same posture as the rail).
hc-light / hc-dark: pure-black chrome, white text + white dividers - contrast-first, not blue-tinted, matching the hc rail.

Why it is safe

The tokens are defined but not yet consumed. The w-64 sidebar templates still use bg-surface-sunken; unused CSS custom properties render nothing, so this is +39 lines of pure additions with zero visual change and no Tailwind rebuild.
Consumption (raw .lc-sidebar { background: var(--sidebar-surface) } rules + template wiring) is LC-560 / LC-UI-07, where the dark sidebar actually lands.
Contrast verified WCAG AA: sidebar content 15.8:1, muted 8.4:1 on the light-mode navy (higher in dark; 21:1 in hc).

🤖 Generated with Claude Code

https://claude.ai/code/session_011jXpZXXwpB36MvTr6JrGXN

## LC-UI-01 phase 1b: introduce `--sidebar-*` chrome tokens (CSS only, no visual change) Second slice of LC-554 (epic LC-553). Adds a dedicated `--sidebar-*` token family so the room sidebar can get its own dark-navy Blue Harbor identity, following the exact pattern the enclave rail already uses (`--rail-*`, consumed via raw CSS rules, not Tailwind utilities). ### What changed Six tokens defined in all four theme blocks (`:root`, `[data-theme=dark]`, `hc-light`, `hc-dark`): `--sidebar-surface`, `-elevated`, `-sunken`, `-content`, `-muted`, `-border`. - **Light `:root`**: dark-navy chrome `#071a2f` over the light page - the signature Blue Harbor look. The light sidebar deliberately mirrors the dark theme's navy surfaces. - **Dark**: sidebar sits one step darker than the navy page (`#041326`) so it still reads as distinct chrome (same posture as the rail). - **hc-light / hc-dark**: pure-black chrome, white text + white dividers - contrast-first, not blue-tinted, matching the hc rail. ### Why it is safe - The tokens are **defined but not yet consumed**. The `w-64` sidebar templates still use `bg-surface-sunken`; unused CSS custom properties render nothing, so this is `+39` lines of pure additions with **zero visual change** and no Tailwind rebuild. - Consumption (raw `.lc-sidebar { background: var(--sidebar-surface) }` rules + template wiring) is **LC-560 / LC-UI-07**, where the dark sidebar actually lands. - Contrast verified WCAG AA: sidebar content 15.8:1, muted 8.4:1 on the light-mode navy (higher in dark; 21:1 in hc). 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_011jXpZXXwpB36MvTr6JrGXN

longjacksonle added 1 commit

2026-07-08 20:57:55 +02:00

feat(css): add --sidebar-* chrome tokens for all four themes (LC-554 phase 1b)

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

Check / clippy + fmt + tests (pull_request) Successful in 3m54s

Details

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

Details

73a15b8ea2

- Introduces --sidebar-surface/-elevated/-sunken/-content/-muted/-border in :root, [data-theme=dark], hc-light, and hc-dark, following the existing --rail-* chrome-token pattern (consumed via raw CSS rules like .lc-rail-tile, not Tailwind utilities).
- Light :root gives the room sidebar dark-navy chrome (#071a2f) over the light page - the signature Blue Harbor look; the light sidebar deliberately mirrors the dark theme's navy surfaces. Dark theme sits the sidebar one step darker than the navy page (#041326) so it still reads as distinct chrome. hc-light/hc-dark are pure-black chrome with white text + white dividers, contrast-first and not blue-tinted, matching the hc rail.
- Tokens are DEFINED but not yet CONSUMED: the w-64 sidebar templates still use bg-surface-sunken until LC-560 (LC-UI-07) wires raw `.lc-sidebar { background: var(--sidebar-surface) }` rules onto them. Adding unused custom properties renders nothing new, so this is +39 lines of pure additions with zero visual change and no Tailwind rebuild.
- Contrast verified WCAG AA: sidebar content 15.8:1 and muted 8.4:1 on the light-mode navy (higher in dark; 21:1 in the hc themes).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011jXpZXXwpB36MvTr6JrGXN

longjacksonle scheduled this pull request to auto merge when all checks succeed

2026-07-08 20:59:44 +02:00