51a9262202
--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.
50 lines
3 KiB
CSS
50 lines
3 KiB
CSS
/* Semantic theme layer — derived from the base16 contract in
|
|
`colors.css`. This is what the app references (`--bg`, `--fg`,
|
|
`--purple`, …); page CSS must use these names, never literal colours
|
|
and never the raw `--baseNN` slots.
|
|
|
|
Standalone stylesheet, linked by every page right AFTER `colors.css`
|
|
(which defines the `--baseNN` slots these rules resolve against). Kept
|
|
separate from the page bundles — esbuild would otherwise inline an
|
|
`@import` and bake the palette into every CSS bundle.
|
|
|
|
A theme swap touches only `colors.css` (the 16 base16 slots); this
|
|
derivation layer never changes. See docs/web-ui/css-vars.md. */
|
|
:root {
|
|
--bg: var(--base00);
|
|
--bg-elev: var(--base01); /* elevated surfaces: dropdowns, popovers */
|
|
--border: var(--base02); /* general borders, hover/active backgrounds */
|
|
--purple-dim: var(--base03); /* subtle borders, terminal chrome, badge bg */
|
|
--fg: var(--base05);
|
|
--red: var(--base08); /* errors, fail state */
|
|
--amber: var(--base09); /* warnings, pending / running state */
|
|
--yellow: var(--base0A); /* flash messages, mild warnings */
|
|
--green: var(--base0B); /* success, ok state */
|
|
--cyan: var(--base0C); /* tool-use events, info accents */
|
|
--blue: var(--base0D); /* links, interactive accent (distinct from cyan) */
|
|
--purple: var(--base0E); /* accent — active tabs, links, highlights */
|
|
--pink: var(--base0F); /* thinking events */
|
|
|
|
/* Off-base16 (no exact slot) — derived from base16 so they still track
|
|
a swap. Each is pixel-identical to its prior literal under the
|
|
default palette: --crust is a darkened bg; --muted / --subtext0 are
|
|
foreground↔background blends (two levels of dimmed text). */
|
|
--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));
|
|
}
|