Themes: text on the accent is its own variable; white on Daylight

Primary buttons hardcoded the dark text that reads on a mint accent. On
Daylight the accent is a deep green, and dark text on it manages 3.6:1 —
squinting territory. The colour that sits on the accent is now
`--accent-text`: dark on the four themes where that reads best (7–10:1),
white on Daylight (4.4:1, the better of the two). Modules can use it too;
the guide lists it with the palette.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Waters Church
2026-09-13 14:14:11 -04:00
co-authored by Claude Fable 5.1
parent bed2212850
commit 361b8bdaa8
2 changed files with 6 additions and 2 deletions
+3 -1
View File
@@ -377,7 +377,9 @@ own in `stop()` anyway.
2. **Style with the shell's CSS variables — no hardcoded colors.** The
palette: `--bg` (page), `--panel` (tile), `--border`, `--text`,
`--muted`, `--accent`, `--danger`, `--warn`. Derive tints with
`--muted`, `--accent`, `--accent-text` (text that sits on the accent —
dark on most themes, white where the accent is deep), `--danger`,
`--warn`. Derive tints with
`color-mix(in srgb, var(--accent) 20%, transparent)`. This is what makes
every module look native — and what makes the dashboard's **themes**
(Admin → Theme) reach into every tile: a theme swaps those variables and