From 51a92622028ad1fa279f38d66a3d0a250132f3d0 Mon Sep 17 00:00:00 2001 From: iris Date: Sat, 29 Aug 2026 09:58:03 +0200 Subject: [PATCH] theme: add --muted-on-dim, a --muted anchored to --purple-dim instead of --bg MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --muted is color-mix()'d toward --base00/--bg — correct for dimmed text on the page background, wrong for dimmed text sitting on the elevated --purple-dim fill (badge/dropdown-item backgrounds). Badge's label/caret used bare --muted there and mara measured it at ~1.3:1 contrast against her theme's badge fill, essentially invisible. --muted-on-dim mixes toward --purple-dim instead, same contrast-floor technique as --muted itself, just anchored to the surface it's actually used on. Applied to .ui-badge-label/.ui-badge-caret and to Dropdown's active-item description (same bug: its row bg is --purple-dim too). Ceiling note: even plain --fg only reaches ~3.4:1 against --purple-dim in mara's theme, short of formal 4.5:1 AA — that's the theme's own limit, not something the anchor choice can fix on its own. 90% gets close to that ceiling (~3:1, more than double the old ~1.3:1) while keeping a hint of the label/value visual distinction. --- frontend/packages/shared/src/badge/Badge.css | 4 ++-- .../packages/shared/src/dropdown/Dropdown.css | 7 ++++++- frontend/packages/shared/src/theme.css | 15 +++++++++++++++ 3 files changed, 23 insertions(+), 3 deletions(-) diff --git a/frontend/packages/shared/src/badge/Badge.css b/frontend/packages/shared/src/badge/Badge.css index 232c9f40..547bc75a 100644 --- a/frontend/packages/shared/src/badge/Badge.css +++ b/frontend/packages/shared/src/badge/Badge.css @@ -35,14 +35,14 @@ outline: 1px solid var(--purple); } .ui-badge-label { - color: var(--muted); + color: var(--muted-on-dim); /* --muted alone is too low-contrast on this fill, see theme.css */ } .ui-badge-value { color: var(--fg); } .ui-badge-caret { font-size: 0.75em; - color: var(--muted); + color: var(--muted-on-dim); } /* Blended with `--fg`, not the raw accent — a stylix-fed scheme can pick any hue/lightness for `--green`/`--amber`/etc., and nothing guarantees diff --git a/frontend/packages/shared/src/dropdown/Dropdown.css b/frontend/packages/shared/src/dropdown/Dropdown.css index 50dfd860..a24e2856 100644 --- a/frontend/packages/shared/src/dropdown/Dropdown.css +++ b/frontend/packages/shared/src/dropdown/Dropdown.css @@ -44,5 +44,10 @@ } .ui-dropdown-item-desc { font-size: 0.8em; - color: var(--muted); + /* `--muted-on-dim`, not bare `--muted`: an *active* item's row bg is + `--purple-dim` (above), the same low-contrast-on-elevated-fill case + Badge.css hit — see theme.css's `--muted-on-dim` comment. Inactive + rows are transparent (falls through to `--bg-elev`), where the two + vars read close enough that this doesn't cost anything there. */ + color: var(--muted-on-dim); } diff --git a/frontend/packages/shared/src/theme.css b/frontend/packages/shared/src/theme.css index 3f73a751..d6e1ec63 100644 --- a/frontend/packages/shared/src/theme.css +++ b/frontend/packages/shared/src/theme.css @@ -32,4 +32,19 @@ --crust: color-mix(in srgb, var(--base00) 58%, #000000); /* terminal / code bg, below --bg */ --muted: color-mix(in srgb, var(--base05) 55.5%, var(--base00)); /* secondary / dimmed text */ --subtext0: color-mix(in srgb, var(--base05) 77.7%, var(--base00)); /* toolbar/status text; dimmer than --fg, lighter than --muted */ + + /* `--muted`, above, is mixed toward `--base00`/`--bg` — correct for + dimmed text on the page background, wrong for dimmed text sitting on + an elevated fill like `--purple-dim` (badge/dropdown-item + backgrounds). Case in point: `.ui-badge-label` used bare `--muted` + and mara measured it at ~1.3:1 against her theme's badge fill — + `--muted` had never been checked against anything but `--bg`. This + variant mixes toward the *actual* surface it sits on instead, same + technique, correct anchor. Ceiling note: even plain `--fg` (100% — + the max this can approach) only reaches ~3.4:1 against `--purple-dim` + in mara's theme, short of formal 4.5:1 AA for normal text — that's + the theme's own limit, not something the anchor choice can fix. 90% + gets close to that ceiling (~3:1, more than double the old ~1.3:1) + while keeping a hint of the label/value visual distinction. */ + --muted-on-dim: color-mix(in srgb, var(--fg) 90%, var(--purple-dim)); }