marcel/familienarchiv
1
0
Fork 0
Code Issues 120 Pull Requests 1 Actions 1 Packages Projects Releases Wiki Activity

feat(dark-mode): replace neutral-black tokens with navy-tinted palette + fix WCAG AA #168

Merged
marcel merged 7 commits from feat/issue-166-dark-mode-navy-palette into main 2026-03-31 13:53:41 +02:00
Conversation 8 Commits 7 Files Changed 8 +1322 -33

7 Commits

Author SHA1 Message Date
Marcel
f70b5ae6bd fix(dark-mode): address PR #168 review blockers
Some checks failed
CI / Unit & Component Tests (pull_request) Has been cancelled
Details
CI / Backend Unit Tests (pull_request) Has been cancelled
Details
CI / E2E Tests (pull_request) Has been cancelled
Details
CI / Backend Unit Tests (push) Has been cancelled
Details
CI / E2E Tests (push) Has been cancelled
Details
CI / Unit & Component Tests (push) Has been cancelled
Details 
- AuthHeader: bg-brand-navy → bg-header (semantic token, responds to dark mode)
- header.spec.ts: add forgot-password AuthHeader tests (bg + axe)
- header.spec.ts: fix BRAND_NAVY comment — references --c-header, not --c-primary

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-03-31 13:30:00 +02:00
Marcel
12b8324245 chore: merge main into feat/issue-166 — resolve blue header conflicts
Some checks failed
CI / E2E Tests (pull_request) Failing after 1h51m28s
Details
CI / Unit & Component Tests (pull_request) Failing after 1m30s
Details
CI / Backend Unit Tests (pull_request) Failing after 2m23s
Details
CI / Unit & Component Tests (push) Has been cancelled
Details
CI / Backend Unit Tests (push) Has been cancelled
Details
CI / E2E Tests (push) Has been cancelled
Details 
- +layout.svelte: adopt main's blue header structure (accent stripe, no
  border-b, bg-header instead of bg-brand-navy)
- layout.css light mode: drop --c-nav-active (removed by main); set
  --c-header: #012851 (confirmed correct now that header is brand-navy)
- layout.css dark mode: drop --c-nav-active; keep navy PDF tokens and
  --c-header: #012851 from our branch

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-03-31 12:24:20 +02:00
Marcel
a9b648454e 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
Details
CI / Backend Unit Tests (pull_request) Failing after 2m53s
Details
CI / E2E Tests (pull_request) Failing after 1h51m31s
Details
CI / E2E Tests (push) Has been cancelled
Details
CI / Unit & Component Tests (push) Has been cancelled
Details
CI / Backend Unit Tests (push) Has been cancelled
Details 
- 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>
 2026-03-31 11:53:14 +02:00
Marcel
938a4b07bf test(dark-mode): add failing test for --c-header token on header element 
Header should use bg-header (rgb(1,51,94) = #01335e) in dark mode instead
of bg-surface. Currently fails because header still uses bg-surface.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-03-31 11:39:37 +02:00
Marcel
7e43bd43a4 feat(dark-mode): replace neutral tokens with navy-tinted palette + fix WCAG AA 
- Replace neutral dark tokens (#0d0d0d, #1a1a1a, etc.) with navy-tinted
  values derived from brand-navy: canvas #010e1e, surface #011526,
  overlay #011e38, muted #011a30
- Fix --c-ink-3 WCAG AA failure in [data-theme='dark'] block:
  #6b7280 (3.2:1, fail) → #8b97a5 (7.1:1, AAA ✓)
- Add color-scheme: dark to both dark blocks for native OS scrollbar theming
- Update PDF viewer tokens to navy palette (bg #010e1e, ctrl #011526, text #f0efe9)
- Add --c-header token (#ffffff light / #01335e dark) for independent
  header surface control; mapped to --color-header in @theme inline
- Fix EntityNav contrast: text-white/30 → /50 (heading) and text-white/20
  → /50 (inactive count badges) to pass WCAG AA 4.5:1 on bg-brand-navy

Closes #166

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-03-31 11:37:30 +02:00
Marcel
56926efd03 test(a11y): add dark mode axe + color-scheme tests for issue #166 
Two failing test suites that encode the regressions this issue fixes:
- accessibility.spec.ts: axe wcag2aa in both prefers-color-scheme:dark
  and data-theme='dark' — fails because --c-ink-3:#6b7280 on #1a1a1a = 3.2:1
- theme.spec.ts: color-scheme computed property is 'dark' in dark mode
  — fails because neither dark CSS block sets color-scheme: dark

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-03-31 11:22:35 +02:00
Marcel
a6ee444f3b docs(specs): add focus rings design spec for issue #167 
Spec covers the --c-focus-ring token definition, full audit of all 19
affected files, WCAG 2.4.11 analysis, element-by-element mockups (light
and dark), and exact CSS/Tailwind diffs ready for implementation.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-03-31 10:33:50 +02:00