feat(sidebar): dark-navy Blue Harbor sidebar + rail (LC-560) #526

Merged

longjacksonle merged 1 commit from feat/LC-560-navy-sidebar into main

2026-07-08 21:25:48 +02:00

longjacksonle commented

2026-07-08 21:17:28 +02:00

Owner

LC-UI-07: dark-navy Blue Harbor sidebar + rail (all themes)

Phase 2 - the signature visible change. Per the confirmed decision, the w-64 room sidebar is dark-navy chrome in every theme (not just dark), consuming the --sidebar-* tokens shipped in LC-554 phase 1b.

How it is wired (OOB-safe)

The sidebar recolors by redefining the semantic tokens on the #sidebar container (a new .lc-sidebar rule) rather than rewriting the markup:

--surface / -elevated / -sunken -> the navy ramp (base column / hover+menus / insets)
--content / -muted / -subtle -> light
--border(-strong) -> navy border
--accent-surface -> a raised navy (so the active room is a quiet lift, not a bright light-blue chip)

Every descendant utility (bg-surface-sunken, text-content, border-border, hover:bg-surface-elevated) and the .lc-* component classes recolor automatically. The only markup change is the container class (bg-surface-sunken -> lc-sidebar), so every hx-swap-oob target id and structure is preserved: sidebar-self, sidebar-nav-{eid}, unread-{kind}-{id}, mention-room-{id}, lc-draft-{room}.

Details

--accent is deliberately not overridden, so accent fills (unread badges, pressed toggles, the active-row left bar) keep the brand blue and still honor an operator brand override.
Two scoped fixups: .lc-sidebar .lc-room-row-active flips the active label to light (the global rule colors it with --accent, too dark on navy); the search input::placeholder is pinned to the muted token.
The light-theme enclave rail tokens are aligned to the same navy family (#041326, darkest, left of the #071a2f sidebar) so rail + sidebar read as one cohesive dark chrome. Dark/hc rails are already near-black and unchanged.

Safety

Contrast verified WCAG AA: content 15.8:1, muted 8.4:1, active label 13.9:1 on the navy; rail content 18.7:1.
No Rust change; no new Tailwind utility (so no rebuild); no test asserts the swapped class.

Manual check

Toggle all four themes + both densities and confirm: sidebar is navy in light theme, active room is clearly marked, unread/mention badges pop, search placeholder is legible, mobile drawer still opens, and live unread-badge OOB swaps still land.

🤖 Generated with Claude Code

https://claude.ai/code/session_011jXpZXXwpB36MvTr6JrGXN

## LC-UI-07: dark-navy Blue Harbor sidebar + rail (all themes) Phase 2 - the signature visible change. Per the confirmed decision, the w-64 room sidebar is dark-navy chrome in **every** theme (not just dark), consuming the `--sidebar-*` tokens shipped in LC-554 phase 1b. ### How it is wired (OOB-safe) The sidebar recolors by **redefining the semantic tokens on the `#sidebar` container** (a new `.lc-sidebar` rule) rather than rewriting the markup: - `--surface` / `-elevated` / `-sunken` -> the navy ramp (base column / hover+menus / insets) - `--content` / `-muted` / `-subtle` -> light - `--border(-strong)` -> navy border - `--accent-surface` -> a raised navy (so the active room is a quiet lift, not a bright light-blue chip) Every descendant utility (`bg-surface-sunken`, `text-content`, `border-border`, `hover:bg-surface-elevated`) and the `.lc-*` component classes recolor automatically. **The only markup change is the container class** (`bg-surface-sunken` -> `lc-sidebar`), so every `hx-swap-oob` target id and structure is preserved: `sidebar-self`, `sidebar-nav-{eid}`, `unread-{kind}-{id}`, `mention-room-{id}`, `lc-draft-{room}`. ### Details - `--accent` is deliberately **not** overridden, so accent fills (unread badges, pressed toggles, the active-row left bar) keep the brand blue and still honor an operator brand override. - Two scoped fixups: `.lc-sidebar .lc-room-row-active` flips the active label to light (the global rule colors it with `--accent`, too dark on navy); the search `input::placeholder` is pinned to the muted token. - The light-theme enclave **rail** tokens are aligned to the same navy family (`#041326`, darkest, left of the `#071a2f` sidebar) so rail + sidebar read as one cohesive dark chrome. Dark/hc rails are already near-black and unchanged. ### Safety - Contrast verified WCAG AA: content 15.8:1, muted 8.4:1, active label 13.9:1 on the navy; rail content 18.7:1. - No Rust change; no new Tailwind utility (so no rebuild); no test asserts the swapped class. ### Manual check Toggle all four themes + both densities and confirm: sidebar is navy in light theme, active room is clearly marked, unread/mention badges pop, search placeholder is legible, mobile drawer still opens, and live unread-badge OOB swaps still land. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_011jXpZXXwpB36MvTr6JrGXN

longjacksonle added 1 commit

2026-07-08 21:17:28 +02:00

feat(sidebar): dark-navy Blue Harbor sidebar + rail in all themes (LC-560 / LC-UI-07)

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

Check / clippy + fmt + tests (pull_request) Successful in 7m9s

Details

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

Details

f604320e81

- Wires the w-64 room sidebar to the --sidebar-* tokens (LC-554 phase 1b) by redefining the semantic tokens on the #sidebar container (a new `.lc-sidebar` rule): --surface/-elevated/-sunken -> the navy ramp, --content/-muted/-subtle -> light, --border(-strong) -> navy border, --accent-surface -> a raised navy. Every descendant utility (bg-surface-sunken, text-content, border-border, hover:bg-surface-elevated) and the .lc-* component classes recolor automatically, so the OOB-swapped fragment markup is untouched - every hx-swap-oob target id and structure (sidebar-self, sidebar-nav-{eid}, unread-{kind}-{id}, mention-room-{id}, lc-draft-{room}) is preserved. The only template change is the container class: `bg-surface-sunken` -> `lc-sidebar`.
- --accent is deliberately NOT overridden, so accent fills (unread badges, pressed toggles, the active-row left bar) keep the brand blue and still track an operator brand override; only --accent-surface flips so the active room reads as a quiet navy lift rather than a bright light-blue chip. Two scoped fixups: `.lc-sidebar .lc-room-row-active` flips the active label to the light sidebar content (the global rule colors it with --accent, too dark on navy), and the search `input::placeholder` is pinned to the muted token (default placeholder is too faint on navy).
- Aligns the light-theme enclave rail tokens to the same navy family (#041326 darkest, left of the #071a2f sidebar) so the rail + sidebar read as one cohesive dark chrome. Dark/hc rails are already near-black and unchanged.
- Contrast verified WCAG AA: content 15.8:1, muted 8.4:1, active label 13.9:1 on the navy; rail content 18.7:1. No Rust change, no new Tailwind utility (so no rebuild), and no test asserts the swapped class.

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