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
+3
-1
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user