vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

theme: add --muted-on-dim, a --muted anchored to --purple-dim instead of --bg

Browse source 
--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.
This commit is contained in:
iris 2026-08-29 09:58:03 +02:00 • committed by mara
commit 51a9262202
3 changed files with 23 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/packages/shared/src/badge/Badge.css
View file

@ -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

7
frontend/packages/shared/src/dropdown/Dropdown.css
View file

@ -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);
}

15
frontend/packages/shared/src/theme.css
View file

@ -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));
}