Improve theme color contrast with semantic tokens - #22
Conversation
orange2ai
left a comment
There was a problem hiding this comment.
Custom themes currently support direct selectors as documented in themes/README.md, and may intentionally override only a subset of CSS variables. Changing the Light defaults from body, body.theme-light to body:not(.theme-custom), body.theme-light removes every fallback token when an imported theme adds theme-custom. A direct-selector-only or partial custom theme will then lose tokens such as --bg-color, --text-color, and --border-color.\n\nPlease preserve the default token baseline for custom themes while allowing imported CSS to override it, and add regression coverage for both a partial-token theme and a direct-selector-only theme. The standalone theme color check should also be exposed through a package script so it is part of the normal verification path.
Summary
--text-secondarytokens for all 12 built-in andstandalone themes while keeping
--text-mutedfor subdued iconsusing fixed yellow overlays
and Solarized Dark to meet WCAG AA
Why
The previous search overlays became difficult to read on dark themes, while
--text-mutedwas shared by both decorative icons and small readable labels.Solarized Dark body text also had insufficient APCA contrast, and three link
colors fell below WCAG AA.
Validation
node scripts/check-theme-colors.mjsnpm run buildgit diff --check origin/main...HEADand file-panel secondary text