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
|
2. **Style with the shell's CSS variables — no hardcoded colors.** The
|
||||||
palette: `--bg` (page), `--panel` (tile), `--border`, `--text`,
|
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
|
`color-mix(in srgb, var(--accent) 20%, transparent)`. This is what makes
|
||||||
every module look native — and what makes the dashboard's **themes**
|
every module look native — and what makes the dashboard's **themes**
|
||||||
(Admin → Theme) reach into every tile: a theme swaps those variables and
|
(Admin → Theme) reach into every tile: a theme swaps those variables and
|
||||||
|
|||||||
+3
-1
@@ -10,6 +10,7 @@
|
|||||||
--text: #e6edf3;
|
--text: #e6edf3;
|
||||||
--muted: #8b98a5;
|
--muted: #8b98a5;
|
||||||
--accent: #2ee59a;
|
--accent: #2ee59a;
|
||||||
|
--accent-text: #06281a; /* text that sits on --accent (buttons, badges) */
|
||||||
--danger: #f4433c;
|
--danger: #f4433c;
|
||||||
--warn: #f0b429;
|
--warn: #f0b429;
|
||||||
/* grid geometry (shell.js reads these) */
|
/* grid geometry (shell.js reads these) */
|
||||||
@@ -762,7 +763,7 @@ body.fullscreen #grid { padding-bottom: 0; }
|
|||||||
.btn.primary {
|
.btn.primary {
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
border-color: var(--accent);
|
border-color: var(--accent);
|
||||||
color: #06281a;
|
color: var(--accent-text);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -866,6 +867,7 @@ html[data-theme="daylight"] {
|
|||||||
--text: #14181f;
|
--text: #14181f;
|
||||||
--muted: #5b6675;
|
--muted: #5b6675;
|
||||||
--accent: #0b8a5f;
|
--accent: #0b8a5f;
|
||||||
|
--accent-text: #ffffff; /* dark text drowns on this accent */
|
||||||
--danger: #d1242f;
|
--danger: #d1242f;
|
||||||
--warn: #b26a00;
|
--warn: #b26a00;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user