e70584b632
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.
30 lines
1.4 KiB
CSS
30 lines
1.4 KiB
CSS
/* Theme colour variables (Catppuccin Mocha) — the single source of
|
|
truth for the hive UI palette. Kept in a standalone file, linked as
|
|
its own `<link rel="stylesheet" href=".../theme.css">` by every page
|
|
BEFORE the page CSS, so the `:root` vars are defined for everything
|
|
that references them (base typography, terminal, dashboard, agent).
|
|
|
|
Why standalone rather than `@import`ed into the page bundles: esbuild
|
|
inlines `@import` at build time, which would bake the palette into
|
|
every CSS bundle. Emitting `theme.css` as its own output file lets a
|
|
theme swap (e.g. a stylix-generated variant carrying the same var
|
|
names) replace just this one file without rebuilding the rest of the
|
|
frontend. See docs/web-ui/css-vars.md. */
|
|
: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 */
|
|
}
|