fix(dark-mode): use bg-header on layout header; set --c-header to brand-navy
Some checks failed
CI / Unit & Component Tests (pull_request) Failing after 1m36s
CI / Backend Unit Tests (pull_request) Failing after 2m53s
CI / E2E Tests (pull_request) Failing after 1h51m31s
CI / E2E Tests (push) Has been cancelled
CI / Unit & Component Tests (push) Has been cancelled
CI / Backend Unit Tests (push) Has been cancelled
Some checks failed
CI / Unit & Component Tests (pull_request) Failing after 1m36s
CI / Backend Unit Tests (pull_request) Failing after 2m53s
CI / E2E Tests (pull_request) Failing after 1h51m31s
CI / E2E Tests (push) Has been cancelled
CI / Unit & Component Tests (push) Has been cancelled
CI / Backend Unit Tests (push) Has been cancelled
- Change header --c-header dark value from #01335e to #012851 (brand navy): #01335e gave 4.3:1 with ink-3 (WCAG AA fail); #012851 gives 4.99:1 (pass) - Switch header element from bg-surface to bg-header so dark mode uses the independent --c-header token instead of inheriting the surface background - Fix both dark blocks (media query and manual override) to stay in sync Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -70,8 +70,8 @@ test.describe('Theme toggle', () => {
|
||||
const header = document.querySelector('header');
|
||||
return header ? getComputedStyle(header).backgroundColor : null;
|
||||
});
|
||||
// --c-header in dark mode = #01335e → rgb(1, 51, 94)
|
||||
expect(headerBg).toBe('rgb(1, 51, 94)');
|
||||
// --c-header in dark mode = #012851 (brand navy) → rgb(1, 40, 81)
|
||||
expect(headerBg).toBe('rgb(1, 40, 81)');
|
||||
});
|
||||
|
||||
test('color-scheme is dark when data-theme=dark is set', async ({ page }) => {
|
||||
|
||||
@@ -35,7 +35,7 @@ const userInitials = $derived.by(() => {
|
||||
|
||||
<div class="min-h-screen bg-canvas" data-hydrated={hydrated || undefined}>
|
||||
{#if !isAuthPage}
|
||||
<header class="sticky top-0 z-50 border-b border-line-2 bg-surface">
|
||||
<header class="sticky top-0 z-50 border-b border-line-2 bg-header">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex h-16 justify-between">
|
||||
<!-- Logo & Nav -->
|
||||
|
||||
@@ -127,8 +127,8 @@
|
||||
|
||||
--c-nav-active: rgba(180, 185, 255, 0.12);
|
||||
|
||||
/* Header elevated above canvas for visual prominence */
|
||||
--c-header: #01335e;
|
||||
/* Header at brand-navy: 4.99:1 with ink-3 (WCAG AA ✓), visually above canvas */
|
||||
--c-header: #012851;
|
||||
|
||||
--c-pdf-bg: #010e1e;
|
||||
--c-pdf-ctrl: #011526;
|
||||
@@ -161,8 +161,8 @@
|
||||
|
||||
--c-nav-active: rgba(180, 185, 255, 0.12);
|
||||
|
||||
/* Header elevated above canvas for visual prominence */
|
||||
--c-header: #01335e;
|
||||
/* Header at brand-navy: 4.99:1 with ink-3 (WCAG AA ✓), visually above canvas */
|
||||
--c-header: #012851;
|
||||
|
||||
--c-pdf-bg: #010e1e;
|
||||
--c-pdf-ctrl: #011526;
|
||||
|
||||
Reference in New Issue
Block a user