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
+3 -1
View File
@@ -10,6 +10,7 @@
--text: #e6edf3;
--muted: #8b98a5;
--accent: #2ee59a;
--accent-text: #06281a; /* text that sits on --accent (buttons, badges) */
--danger: #f4433c;
--warn: #f0b429;
/* grid geometry (shell.js reads these) */
@@ -762,7 +763,7 @@ body.fullscreen #grid { padding-bottom: 0; }
.btn.primary {
background: var(--accent);
border-color: var(--accent);
color: #06281a;
color: var(--accent-text);
font-weight: 600;
}
@@ -866,6 +867,7 @@ html[data-theme="daylight"] {
--text: #14181f;
--muted: #5b6675;
--accent: #0b8a5f;
--accent-text: #ffffff; /* dark text drowns on this accent */
--danger: #d1242f;
--warn: #b26a00;
}