theme: add --muted-on-dim, a --muted anchored to --purple-dim instead of --bg
--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:
parent
cd339af91b
commit
51a9262202
3 changed files with 23 additions and 3 deletions
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue