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:
co-authored by
Claude Fable 5.1
parent
bed2212850
commit
361b8bdaa8
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user