39b95c2ede
Pure `nix fmt` output from the commit before this one — no hand edits. 203 files: 52 md, 42 tsx, 32 js, 32 css, 21 ts, 13 html, 8 json, 3 mjs. Reproduce with `nix develop -c nix fmt` on the parent commit; the result should be byte-identical to this tree. None of the 13 `.prettierignore` entries appears here — verified by intersecting the changed-file list against the ignore file, with a control proving the intersection finds a match when one exists.
62 lines
3 KiB
CSS
62 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));
|
|
}
|