Problem
The light theme has several rough edges that the dark theme doesn't: borders are too
faint in places (modals blur into the background), the amber dirty-state dot reads as
orange-brown instead of warm amber, and several text-muted uses fall below AA contrast
against the cream page.
Observed
- Modal backdrop in light theme has low contrast against the page; the modal card
border is barely visible.
--text-muted in light mode is tuned for legibility but some UI captions use it at
very small sizes (10–11px), which fails AA at that scale.- Dirty-state amber dot uses the same hex on both themes; it reads differently against
the cream page vs the dark page.
Proposed
- Do a full sweep of
[data-theme="light"] CSS variables in +layout.svelte.
- Validate every foreground/background pair with a contrast checker.
- Introduce a caption-specific color var if muted text needs to pass AA at small sizes.
- Pick a distinct amber shade for light theme or adjust the existing one.
Acceptance
- All text in light theme passes WCAG AA.
- Modal borders are clearly visible.
- Dirty-state dot reads as intended on both themes.
Problem
The light theme has several rough edges that the dark theme doesn't: borders are too
faint in places (modals blur into the background), the amber dirty-state dot reads as
orange-brown instead of warm amber, and several text-muted uses fall below AA contrast
against the cream page.
Observed
border is barely visible.
--text-mutedin light mode is tuned for legibility but some UI captions use it atvery small sizes (10–11px), which fails AA at that scale.
the cream page vs the dark page.
Proposed
[data-theme="light"]CSS variables in+layout.svelte.Acceptance