vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix(frontend): var-derive hardcoded palette colours for theme-swap safety

Browse source 
Replace ~92 hardcoded Catppuccin rgba literals across the dashboard,
agent, and shared terminal stylesheets with color-mix() over the theme
:root vars, so a stylix-generated theme.css recolours the whole UI, not
just the elements that already referenced the vars. Pixel-identical
under the default palette (same RGB + alpha; color-mix(in srgb, C N%,
transparent) == rgba(C, N/100)).

Also fixes four var(--mauve, #cba6f7) usages: --mauve is undefined (the
var is --purple), so they were silently falling back to the hardcoded
hex and would not have recoloured on a theme swap. The bare crust hex in
terminal.css and the checkerboard-gradient hexes in common.css are
var-derived too.

Pure black/white drop-shadow/frost scrims are left as literals (not
theme colours). Two off-palette surface tints (dim-purple schedule rows,
warm-amber inline-button hover) are also left, with a comment, pending a
dedicated named var. Correct-var fallbacks like var(--red, #f38ba8) are
left as-is since they already recolour via the var.
This commit is contained in:
iris 2026-06-08 20:48:11 +02:00
commit 742d4a5c6d
6 changed files with 112 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

48
frontend/packages/dashboard/src/common.css
View file

@ -12,7 +12,7 @@ h1, h2 {
text-transform: uppercase;
letter-spacing: 0.15em;
margin-top: 2em;
text-shadow: 0 0 8px rgba(203, 166, 247, 0.4);
text-shadow: 0 0 8px color-mix(in srgb, var(--purple) 40%, transparent);
}
.divider {
color: var(--purple-dim);
@ -27,11 +27,11 @@ a {
color: var(--cyan);
text-decoration: none;
font-weight: bold;
text-shadow: 0 0 4px rgba(137, 220, 235, 0.5);
text-shadow: 0 0 4px color-mix(in srgb, var(--cyan) 50%, transparent);
}
a:hover {
color: var(--fg);
text-shadow: 0 0 12px rgba(137, 220, 235, 0.9);
text-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 90%, transparent);
}
code {
color: var(--amber);
@ -64,23 +64,23 @@ code {
}
.badge-warn {
color: var(--amber); border-color: var(--amber);
text-shadow: 0 0 6px rgba(250, 179, 135, 0.5);
text-shadow: 0 0 6px color-mix(in srgb, var(--amber) 50%, transparent);
}
.badge-rate-limited {
color: var(--red); border-color: var(--red);
text-shadow: 0 0 6px rgba(243, 139, 168, 0.5);
text-shadow: 0 0 6px color-mix(in srgb, var(--red) 50%, transparent);
}
.badge-muted {
color: var(--muted); border-color: var(--purple-dim);
background: rgba(127, 132, 156, 0.08);
background: color-mix(in srgb, var(--muted) 8%, transparent);
}
.badge-reminder {
color: var(--cyan); border-color: var(--cyan);
text-shadow: 0 0 6px rgba(137, 220, 235, 0.4);
text-shadow: 0 0 6px color-mix(in srgb, var(--cyan) 40%, transparent);
}
.badge-loose-ends {
color: var(--purple); border-color: var(--purple);
text-shadow: 0 0 6px rgba(203, 166, 247, 0.4);
text-shadow: 0 0 6px color-mix(in srgb, var(--purple) 40%, transparent);
}
/* Context-window usage badges on dashboard container rows. */
.badge-ctx-ok {
@ -89,15 +89,15 @@ code {
}
.badge-ctx-caution {
color: var(--amber); border-color: var(--amber);
text-shadow: 0 0 6px rgba(250, 179, 135, 0.5);
text-shadow: 0 0 6px color-mix(in srgb, var(--amber) 50%, transparent);
}
.badge-ctx-warn {
color: var(--red); border-color: var(--red);
text-shadow: 0 0 6px rgba(243, 139, 168, 0.5);
text-shadow: 0 0 6px color-mix(in srgb, var(--red) 50%, transparent);
}
.badge-ok { background: rgba(166,227,161,0.12); color: var(--green); border-color: var(--green); }
.badge-fail { background: rgba(243,139,168,0.12); color: var(--red); border-color: var(--red); }
.badge-running { background: rgba(250,179,135,0.12); color: var(--amber); border-color: var(--amber); }
.badge-ok { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); border-color: var(--green); }
.badge-fail { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); border-color: var(--red); }
.badge-running { background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--amber); border-color: var(--amber); }
/* ─── buttons ───────────────────────────────────────────────────────
.btn base + semantic colour/size modifiers. Logs page uses
@ -121,7 +121,7 @@ code {
transition: box-shadow 0.15s ease;
}
.btn:hover {
background: rgba(205, 214, 244, 0.06);
background: color-mix(in srgb, var(--fg) 6%, transparent);
text-shadow: 0 0 10px currentColor;
box-shadow: 0 0 10px -2px currentColor;
}
@ -151,7 +151,7 @@ code {
.btn-move { color: var(--purple); border-color: var(--purple); font-size: 0.75em; padding: 0.15em 0.5em; margin-left: 0.6em; }
.btn-talk { color: var(--cyan); border-color: var(--cyan); }
.btn-spawn { color: var(--amber); border-color: var(--amber); }
.btn-fire-now { color: var(--mauve, #cba6f7); border-color: var(--mauve, #cba6f7); }
.btn-fire-now { color: var(--purple); border-color: var(--purple); }
/* Post-fire flash: report renders directly on the button for ~1.5s
so the operator sees ok/failed/missing/consumed counts inline
without a modal. Green when at least one ok; muted otherwise. */
@ -164,7 +164,7 @@ code {
/* Inline edit button on each schedule row. Yellow reads as a
parallel destructive-adjacent action (edit changes state, but
isn't deletion). */
.btn-edit-schedule { color: var(--yellow, #f9e2af); border-color: var(--yellow, #f9e2af); }
.btn-edit-schedule { color: var(--yellow); border-color: var(--yellow); }
/* ─── file-preview / diff panel (common.js Panel) ───────────────────
Side-panel content rendered by openFilePanel / buildTabbedPreview
@ -184,7 +184,7 @@ code {
.diff-base-tab.active {
color: var(--purple);
border-color: var(--purple);
background: rgba(203, 166, 247, 0.08);
background: color-mix(in srgb, var(--purple) 8%, transparent);
}
/* Image / tabbed file preview */
.preview-host { margin-top: 0.5em; }
@ -196,13 +196,13 @@ code {
border: 1px solid var(--border);
border-radius: 4px;
/* checkerboard so transparent regions of the image read clearly */
background: repeating-conic-gradient(#313244 0% 25%, #1e1e2e 0% 50%) 50% / 18px 18px;
background: repeating-conic-gradient(var(--border) 0% 25%, var(--bg) 0% 50%) 50% / 18px 18px;
}
/* Path linkification — agents drop pointer strings into messages;
clicking the anchor opens the file in the side panel. */
.path-link {
color: var(--blue, #89b4fa);
color: var(--blue);
text-decoration: underline dotted;
cursor: pointer;
}
@ -226,7 +226,7 @@ code {
position: sticky;
top: 0;
z-index: 25;
background: rgba(30, 30, 46, 0.92);
background: color-mix(in srgb, var(--bg) 92%, transparent);
-webkit-backdrop-filter: blur(8px) saturate(120%);
backdrop-filter: blur(8px) saturate(120%);
border-bottom: 1px solid var(--purple-dim);
@ -312,7 +312,7 @@ code {
}
.msg-reply-tag a:hover { color: var(--fg); }
@keyframes msg-highlight-fade {
from { background: rgba(203, 166, 247, 0.18); }
from { background: color-mix(in srgb, var(--purple) 18%, transparent); }
to { background: transparent; }
}
.msg-highlight { animation: msg-highlight-fade 1.5s ease-out forwards; }
@ -398,7 +398,7 @@ code {
.side-panel-backdrop {
position: absolute;
inset: 0;
background: rgba(17, 17, 27, 0.55);
background: color-mix(in srgb, var(--crust) 55%, transparent);
opacity: 0;
transition: opacity 200ms ease;
}
@ -539,11 +539,11 @@ body.side-panel-resizing * { cursor: ew-resize !important; }
}
.server-warn-warn {
color: var(--amber);
background: rgba(250, 179, 135, 0.16);
background: color-mix(in srgb, var(--amber) 16%, transparent);
border-bottom: 1px solid var(--amber);
}
.server-warn-crit {
color: var(--red);
background: rgba(243, 139, 168, 0.18);
background: color-mix(in srgb, var(--red) 18%, transparent);
border-bottom: 1px solid var(--red);
}