feat(css): Blue Harbor semantic-token retune (LC-554 phase 1a) #522

Merged
longjacksonle merged 1 commit from feat/LC-554-blue-harbor-tokens into main 2026-07-08 20:53:38 +02:00

LC-UI-01 phase 1a: Blue Harbor semantic-token retune (CSS only)

First slice of the Blue Harbor redesign (epic LC-553 / ticket LC-554). Pure assets/main.css token-value changes - no template edits, no Rust, no Tailwind rebuild.

What changed

  • Light :root: neutral ramp goes blue-tinted instead of cool slate - --surface #f8fafc -> #f7fbff, --surface-sunken #f1f5f9 -> #edf6ff, --content #0f172a -> #071426, --content-muted #64748b -> #52657a, --content-subtle #94a3b8 -> #8193a8, --border #e2e8f0 -> #d8e6f5, --border-strong #cbd5e1 -> #b9cde3. Accent is unchanged (--accent still tracks --brand-primary = #2563eb), so operator brand override is preserved.
  • Dark [data-theme=dark]: rebased from slate-900 to Blue Harbor navy - surfaces #071a2f / #0b2542 / #041326, text ramp #eaf4ff / #9fb6d0 / #6f89a5, borders #17395c / #24517c, and --accent-surface #1e3a8a -> #123e73 (keeping the LC-222 var(--content) foreground).
  • High-contrast hc-light / hc-dark: intentionally NOT retinted, with a documented rationale. High contrast is contrast-first and brand-hue-neutral (pure black/white surfaces + borders) and is already blue-accented AAA; tinting it would only reduce contrast.

Why it is safe

  • main.css is served via its own <link> after tailwind-built.css, and Tailwind utilities map to var(--token), so changing token values needs no CSS rebuild.
  • Zero Rust and zero template changes, so just check / just test outcomes are identical to main (which is green).
  • WCAG AA verified on the new pairs: light muted 5.8:1, dark muted 8.4:1, dark accent-surface 9.6:1; the subtle/placeholder tier improves over the prior slate.

Scope / follow-ups (tracked separately)

  • The signature dark-navy sidebar is NOT in this PR: it needs new --sidebar-* tokens (phase 1b) plus template wiring (LC-560 / LC-UI-07), because the sidebar currently consumes the shared surface tokens.
  • .alert* classes = LC-555; .lc-page-* width utilities = LC-562.

🤖 Generated with Claude Code

https://claude.ai/code/session_011jXpZXXwpB36MvTr6JrGXN

## LC-UI-01 phase 1a: Blue Harbor semantic-token retune (CSS only) First slice of the Blue Harbor redesign (epic LC-553 / ticket LC-554). Pure `assets/main.css` token-value changes - no template edits, no Rust, no Tailwind rebuild. ### What changed - **Light `:root`**: neutral ramp goes blue-tinted instead of cool slate - `--surface` #f8fafc -> #f7fbff, `--surface-sunken` #f1f5f9 -> #edf6ff, `--content` #0f172a -> #071426, `--content-muted` #64748b -> #52657a, `--content-subtle` #94a3b8 -> #8193a8, `--border` #e2e8f0 -> #d8e6f5, `--border-strong` #cbd5e1 -> #b9cde3. Accent is unchanged (`--accent` still tracks `--brand-primary` = #2563eb), so operator brand override is preserved. - **Dark `[data-theme=dark]`**: rebased from slate-900 to Blue Harbor navy - surfaces #071a2f / #0b2542 / #041326, text ramp #eaf4ff / #9fb6d0 / #6f89a5, borders #17395c / #24517c, and `--accent-surface` #1e3a8a -> #123e73 (keeping the LC-222 `var(--content)` foreground). - **High-contrast `hc-light` / `hc-dark`**: intentionally NOT retinted, with a documented rationale. High contrast is contrast-first and brand-hue-neutral (pure black/white surfaces + borders) and is already blue-accented AAA; tinting it would only reduce contrast. ### Why it is safe - `main.css` is served via its own `<link>` after `tailwind-built.css`, and Tailwind utilities map to `var(--token)`, so changing token values needs no CSS rebuild. - Zero Rust and zero template changes, so `just check` / `just test` outcomes are identical to `main` (which is green). - WCAG AA verified on the new pairs: light muted 5.8:1, dark muted 8.4:1, dark accent-surface 9.6:1; the subtle/placeholder tier improves over the prior slate. ### Scope / follow-ups (tracked separately) - The signature dark-navy **sidebar** is NOT in this PR: it needs new `--sidebar-*` tokens (phase 1b) plus template wiring (LC-560 / LC-UI-07), because the sidebar currently consumes the shared surface tokens. - `.alert*` classes = LC-555; `.lc-page-*` width utilities = LC-562. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_011jXpZXXwpB36MvTr6JrGXN
feat(css): retune semantic tokens to Blue Harbor (LC-554 phase 1a)
All checks were successful
check-secrets / Nosey parker (push) Successful in 9s
check-secrets / TruffleHog (push) Successful in 11s
check-secrets / Kingfisher (push) Successful in 13s
check-secrets / Nosey parker (pull_request) Successful in 5s
check-secrets / Kingfisher (pull_request) Successful in 5s
check-secrets / TruffleHog (pull_request) Successful in 5s
Check / clippy + fmt + tests (pull_request) Successful in 3m10s
Create release / Create release from merged PR (pull_request) Has been skipped
ea4326f066
- Light :root neutral ramp goes blue-tinted (surface #f7fbff, sunken #edf6ff, content #071426, muted #52657a, subtle #8193a8, borders #d8e6f5/#b9cde3), replacing the old cool slate; the accent stays #2563eb via --brand-primary so this is a surface/text/border retune, not an accent change.
- Dark theme rebased from slate-900 to Blue Harbor navy (surface #071a2f, elevated #0b2542, sunken #041326, blue-tinted text ramp #eaf4ff/#9fb6d0/#6f89a5, borders #17395c/#24517c); dark --accent-surface retinted #1e3a8a -> #123e73, keeping the LC-222 var(--content) foreground posture.
- High-contrast themes (hc-light/hc-dark) deliberately left untinted with a documented rationale: high contrast is contrast-first and brand-hue-neutral, already blue-accented AAA, so blue-tinting them would only lower contrast.
- Verified WCAG AA on the new pairs (light muted 5.8:1, dark muted 8.4:1, dark accent-surface 9.6:1; subtle/placeholder improves over the prior slate). main.css is served via its own <link> after tailwind-built.css, so token-value changes need no Tailwind rebuild; no Rust or template changes, so check/test outcomes are unchanged from main.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011jXpZXXwpB36MvTr6JrGXN
longjacksonle deleted branch feat/LC-554-blue-harbor-tokens 2026-07-08 20:53:38 +02:00
Sign in to join this conversation.
No reviewers
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
psa-systems/lets-chat!522
No description provided.