6739bb903d
Every docs directory moves under 1-getting-started, 2-handbook, 4-implementation or 5-project; the options reference (section 3) comes from the website and has no directory here. trust-boundary stays whole under the handbook for now. web-ui, swarm and tools split between handbook and implementation, and the command-line references move to 2-handbook/reference. Links, path references in code and nix, and the docs index follow the moves; no page content changes.
67 lines
3.4 KiB
CSS
67 lines
3.4 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/4-implementation/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) var(--muted-share, 55.5%),
|
|
var(--base00)
|
|
); /* secondary / dimmed text */
|
|
--subtext0: color-mix(
|
|
in srgb,
|
|
var(--base05) var(--subtext0-share, 77.7%),
|
|
var(--base00)
|
|
); /* toolbar/status text; dimmer than --fg, lighter than --muted */
|
|
/* `--muted-share` and `--subtext0-share` are how much of the text colour each
|
|
mix keeps. A palette whose background is light sets them higher in
|
|
`colors.css`: at the dark palette's 55.5% the light one's muted text was
|
|
2.4:1 against its card background, short of the 4.5:1 AA asks for. A palette
|
|
that sets neither keeps the shares above. */
|
|
|
|
/* `--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));
|
|
}
|