09787dd1c3
Split the palette into two standalone stylesheets: - colors.css — the 16 base16 slots (--base00..--base0F). This is the entire theme swap contract; a generator (e.g. a stylix base16 scheme, which is natively base00-base0F) replaces only this file. - theme.css — the semantic layer (--bg, --purple, …) derived from the base16 slots via var()/color-mix. Never changes on a swap. Every page links colors.css then theme.css; theme.css does NOT @import colors.css (that would re-bake the slots into it) — they're separate dist outputs so a swap touches just colors.css. Pixel-identical refactor: base16 defaults are Catppuccin Mocha and the three off-slot vars (--crust, --muted, --subtext0) derive via color-mix reproducing their exact prior hexes. Wires colors.css through both build.mjs CSS entry lists, the @hive/shared exports map, and all 7 page templates. css-vars.md + the frontend.nix output-list comment updated.
35 lines
2 KiB
CSS
35 lines
2 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%, #000); /* 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 */
|
|
}
|