feat(frontend): split theme CSS vars into a standalone theme.css

Phase 1 of stylix integration (#1457): extract the Catppuccin palette
into a dedicated, separately-linked stylesheet so a theme swap can
replace just that file without rebuilding the rest of the frontend.

- shared/src/theme.css (new): the `:root` palette, moved out of
  base.css (which now holds only the body typography it references).
- shared/package.json: export `./theme.css`.
- dashboard/src/theme.css + agent/src/theme.css (new): one-line
  re-exports of @hive/shared/theme.css so each package's esbuild emits
  its own standalone `dist/static/theme.css` (palette is NOT inlined
  into the page bundles).
- both build.mjs: add theme.css to the CSS build list.
- every page (dashboard index/flow/logs, agent index/stats/screen):
  link `theme.css` first, ahead of the page CSS, so the `:root` vars
  resolve for everything.
- docs/web-ui/css-vars.md: document the split + the no-rebuild rationale.

Behaviour-neutral — same colours, just relocated. Verified both
`npm run build` outputs: theme.css emits standalone (383b) with the
palette; no `--*` palette defs duplicated into common.css/agent.css.

Phase 2 (nix derivation that swaps theme.css from stylix colours) is a
follow-up; touches nix/frontend.nix, coordinating with damocles.

Part of #1457.
This commit is contained in:
iris 2026-06-06 08:39:30 +02:00 committed by mara
commit e70584b632
14 changed files with 88 additions and 38 deletions

View file

@ -1,25 +1,10 @@
/* Base palette + typography shared by the hive-c0re dashboard and the
hive-ag3nt web UI. Catppuccin Mocha. Per-page stylesheets append on
top of this and must NOT redeclare the colour variables the whole
point of pulling them out is one source of truth. */
:root {
--bg: #1e1e2e; /* base */
--bg-elev: #181825; /* mantle */
--crust: #11111b; /* crust — terminal background */
--fg: #cdd6f4; /* text */
--muted: #7f849c; /* overlay1 */
--purple: #cba6f7; /* mauve */
--purple-dim: #45475a;/* surface1 */
--cyan: #89dceb; /* sky */
--blue: #89b4fa; /* blue */
--pink: #f5c2e7; /* pink */
--amber: #fab387; /* peach */
--yellow: #f9e2af; /* yellow */
--green: #a6e3a1; /* green */
--red: #f38ba8; /* red */
--border: #313244; /* surface0 */
--subtext0: #a6adc8; /* subtext0 — secondary/toolbar text, dimmer than --fg but lighter than --muted */
}
/* Base typography shared by the hive-c0re dashboard and the hive-ag3nt
web UI. The colour variables it references (`--bg`, `--fg`, ) live in
the standalone `theme.css` (Catppuccin Mocha), linked separately by
every page BEFORE this file so the `:root` vars resolve see
`theme.css` + docs/web-ui/css-vars.md. Per-page stylesheets append on
top of this and must NOT redeclare the colour variables; `theme.css`
is the one source of truth. */
body {
background: var(--bg);
color: var(--fg);