refactor(frontend): base16 theme contract in a swappable colors.css
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.
This commit is contained in:
parent
742d4a5c6d
commit
09787dd1c3
18 changed files with 204 additions and 84 deletions
|
|
@ -43,11 +43,12 @@ await build({
|
|||
logLevel: 'info',
|
||||
});
|
||||
|
||||
// Bundle the CSS. `theme.css` re-exports the standalone Catppuccin
|
||||
// palette (kept its own output file so a theme swap replaces only it,
|
||||
// no bundle rebuild); `agent.css`'s @import lines pull in shared
|
||||
// base.css + terminal.css from the @hive/shared workspace dep.
|
||||
for (const entry of ['theme.css', 'agent.css']) {
|
||||
// Bundle the CSS. `colors.css` re-exports the standalone base16 palette
|
||||
// (the theme swap contract — its own output file so a swap replaces only
|
||||
// it, no bundle rebuild); `theme.css` is the semantic derivation layer;
|
||||
// `agent.css`'s @import lines pull in shared base.css + terminal.css from
|
||||
// the @hive/shared workspace dep.
|
||||
for (const entry of ['colors.css', 'theme.css', 'agent.css']) {
|
||||
await build({
|
||||
entryPoints: [src(entry)],
|
||||
outfile: staticDir(entry),
|
||||
|
|
|
|||
6
frontend/packages/agent/src/colors.css
Normal file
6
frontend/packages/agent/src/colors.css
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
/* Standalone base16 palette — re-exports the shared base16 slots so
|
||||
esbuild emits its own `dist/static/colors.css`, linked first by every
|
||||
agent page (before theme.css). This is the theme swap contract: a
|
||||
stylix-generated variant replaces only this file. See
|
||||
@hive/shared/colors.css + docs/web-ui/css-vars.md. */
|
||||
@import "@hive/shared/colors.css";
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>hyperhive agent</title>
|
||||
<link rel="icon" type="image/svg+xml" href="icon">
|
||||
<link rel="stylesheet" href="static/colors.css">
|
||||
<link rel="stylesheet" href="static/theme.css">
|
||||
<link rel="stylesheet" href="static/agent.css">
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>screen</title>
|
||||
<link rel="icon" type="image/svg+xml" href="icon">
|
||||
<link rel="stylesheet" href="static/colors.css">
|
||||
<link rel="stylesheet" href="static/theme.css">
|
||||
<link rel="stylesheet" href="static/agent.css">
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>hyperhive agent — stats</title>
|
||||
<link rel="icon" type="image/svg+xml" href="icon">
|
||||
<link rel="stylesheet" href="static/colors.css">
|
||||
<link rel="stylesheet" href="static/theme.css">
|
||||
<link rel="stylesheet" href="static/agent.css">
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* Standalone theme bundle — re-exports the shared Catppuccin palette so
|
||||
esbuild emits it as its own `dist/static/theme.css`, linked first by
|
||||
every agent page. Kept separate from the page bundles so a theme swap
|
||||
(e.g. stylix) replaces only this file. See @hive/shared/theme.css +
|
||||
docs/web-ui/css-vars.md. */
|
||||
/* Standalone semantic theme layer — re-exports the shared derivation so
|
||||
esbuild emits it as its own `dist/static/theme.css`, linked by every
|
||||
agent page right after colors.css. The base16 slots it derives from
|
||||
live in colors.css (the swap contract); a theme swap replaces only
|
||||
that file. See @hive/shared/theme.css + docs/web-ui/css-vars.md. */
|
||||
@import "@hive/shared/theme.css";
|
||||
|
|
|
|||
Loading…
Reference in a new issue