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

91
frontend/packages/dashboard/src/dashboard.css
View file

@ -23,7 +23,7 @@ body.dashboard-shell {
position: sticky;
top: 0;
z-index: 25;
background: rgba(30, 30, 46, 0.86);
background: color-mix(in srgb, var(--bg) 86%, transparent);
-webkit-backdrop-filter: blur(8px) saturate(120%);
backdrop-filter: blur(8px) saturate(120%);
border-bottom: 1px solid var(--purple-dim);
@ -83,7 +83,7 @@ body.dashboard-shell {
}
.tabbar .tab:hover {
color: var(--purple);
background: rgba(203, 166, 247, 0.06);
background: color-mix(in srgb, var(--purple) 6%, transparent);
}
.tabbar .tab.active {
color: var(--purple);
@ -91,7 +91,7 @@ body.dashboard-shell {
background: var(--bg);
/* Lift the active tab visually — the bottom border of the tabbar
yields under it via the -1px margin above. */
box-shadow: 0 -2px 12px -4px rgba(203, 166, 247, 0.4);
box-shadow: 0 -2px 12px -4px color-mix(in srgb, var(--purple) 40%, transparent);
}
.tab-label { font-weight: bold; white-space: nowrap; }
.tab-count {
@ -108,7 +108,7 @@ body.dashboard-shell {
}
.tab-count-attn {
/* Y3R C4LL — operator-action-required pill colour, harder to miss. */
background: rgba(243, 139, 168, 0.22);
background: color-mix(in srgb, var(--red) 22%, transparent);
color: var(--red);
}
@ -145,7 +145,7 @@ body.dashboard-shell {
}
.tabbar-overflow-btn:hover {
color: var(--purple);
background: rgba(203, 166, 247, 0.06);
background: color-mix(in srgb, var(--purple) 6%, transparent);
}
.tabbar-overflow-btn.tabbar-overflow-active {
color: var(--purple);
@ -206,7 +206,7 @@ body.dashboard-shell {
font-weight: bold;
}
.tabbar-overflow-badge.tab-count-attn {
background: rgba(243, 139, 168, 0.22);
background: color-mix(in srgb, var(--red) 22%, transparent);
color: var(--red);
}
@ -234,7 +234,7 @@ body.dashboard-shell {
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 6px rgba(203, 166, 247, 0.45));
filter: drop-shadow(0 0 6px color-mix(in srgb, var(--purple) 45%, transparent));
}
.banner.active {
animation: banner-shimmer 1.8s linear infinite;
@ -263,7 +263,7 @@ body.dashboard-shell {
padding: 0.6em 0.8em;
border: 1px solid var(--border);
border-radius: 4px;
background: rgba(24, 24, 37, 0.55);
background: color-mix(in srgb, var(--bg-elev) 55%, transparent);
transition: opacity 200ms ease, border-color 200ms ease;
}
/* Topology indent ladder. See docs/web-ui.md::Topology tree (Indent
@ -330,7 +330,7 @@ body.dashboard-shell {
width: 5em;
aspect-ratio: 1;
border-radius: 6px;
background-color: rgba(17, 17, 27, 0.6);
background-color: color-mix(in srgb, var(--crust) 60%, transparent);
cursor: pointer;
transition: box-shadow 120ms ease, transform 120ms ease;
}
@ -344,7 +344,7 @@ body.dashboard-shell {
.container-row.selected {
border-color: var(--purple);
box-shadow: inset 0 0 0 1px var(--purple);
background: rgba(203, 166, 247, 0.06);
background: color-mix(in srgb, var(--purple) 6%, transparent);
}
.container-row.selected > .container-icon {
box-shadow: 0 0 0 2px var(--purple), 0 0 12px -4px var(--purple);
@ -392,7 +392,7 @@ body.dashboard-shell {
}
.agent-menu-btn:hover,
.agent-menu-btn:focus-visible {
background: rgba(203, 166, 247, 0.1);
background: color-mix(in srgb, var(--purple) 10%, transparent);
color: var(--purple);
outline: none;
}
@ -443,7 +443,7 @@ body.dashboard-shell {
.container-row.pending .actions { opacity: 0.4; pointer-events: none; }
.container-row.pending-running {
border-color: var(--amber);
background: rgba(250, 179, 135, 0.05);
background: color-mix(in srgb, var(--amber) 5%, transparent);
}
@keyframes container-icon-spin {
from { transform: rotate(0deg); }
@ -490,9 +490,9 @@ body.dashboard-shell {
transition: background 0.12s ease, color 0.12s ease;
}
.nav-link:hover {
background: rgba(203, 166, 247, 0.12);
background: color-mix(in srgb, var(--purple) 12%, transparent);
color: var(--cyan);
text-shadow: 0 0 6px rgba(137, 220, 235, 0.5);
text-shadow: 0 0 6px color-mix(in srgb, var(--cyan) 50%, transparent);
}
.container-row .actions {
display: flex;
@ -503,7 +503,7 @@ body.dashboard-shell {
.agent-status {
font-size: 0.82em;
color: var(--subtext0, #a6adc8);
color: var(--subtext0);
padding: 0.1em 0.3em 0.25em;
white-space: nowrap;
overflow: hidden;
@ -514,20 +514,20 @@ body.dashboard-shell {
.container-row.tombstone {
border-style: dashed;
background: rgba(24, 24, 37, 0.35);
background: color-mix(in srgb, var(--bg-elev) 35%, transparent);
opacity: 0.85;
}
.container-row.tombstone .name { color: var(--muted); }
/* Notification controls — sit between the banner and the containers. */
.port-conflict {
background: rgba(243, 139, 168, 0.08);
background: color-mix(in srgb, var(--red) 8%, transparent);
border: 1px solid var(--red);
color: var(--red);
padding: 0.5em 0.8em;
margin-bottom: 0.6em;
border-radius: 4px;
text-shadow: 0 0 6px rgba(243, 139, 168, 0.4);
text-shadow: 0 0 6px color-mix(in srgb, var(--red) 40%, transparent);
animation: questions-pulse 2.4s ease-in-out infinite;
}
.port-conflict strong { color: var(--red); }
@ -551,7 +551,7 @@ body.dashboard-shell {
text-shadow: 0 0 4px currentColor;
}
.btn-notif:hover {
background: rgba(137, 220, 235, 0.1);
background: color-mix(in srgb, var(--cyan) 10%, transparent);
box-shadow: 0 0 10px -2px currentColor;
}
@ -560,7 +560,7 @@ body.dashboard-shell {
font-size: 0.85em;
letter-spacing: 0.08em;
text-transform: uppercase;
text-shadow: 0 0 6px rgba(250, 179, 135, 0.55);
text-shadow: 0 0 6px color-mix(in srgb, var(--amber) 55%, transparent);
animation: badge-pulse 1.6s ease-in-out infinite;
}
@keyframes badge-pulse {
@ -568,8 +568,8 @@ body.dashboard-shell {
50% { opacity: 0.7; }
}
@keyframes questions-pulse {
0%, 100% { box-shadow: 0 0 12px -4px rgba(250, 179, 135, 0.55); }
50% { box-shadow: 0 0 22px -2px rgba(250, 179, 135, 0.95); }
0%, 100% { box-shadow: 0 0 12px -4px color-mix(in srgb, var(--amber) 55%, transparent); }
50% { box-shadow: 0 0 22px -2px color-mix(in srgb, var(--amber) 95%, transparent); }
}
/* Pending approval: a card with three stacked sections — identity
@ -596,7 +596,7 @@ body.dashboard-shell {
}
.approval-ts.stale {
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);
}
.approval-body {
margin: 0.45em 0;
@ -644,7 +644,7 @@ body.dashboard-shell {
.approval-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);
text-shadow: 0 0 4px currentColor;
}
.approvals-history .status { font-size: 0.85em; padding: 0 0.5em; }
@ -667,7 +667,7 @@ body.dashboard-shell {
.meta-inputs li {
padding: 0.25em 0.6em;
border: 1px solid var(--border);
background: rgba(24, 24, 37, 0.6);
background: color-mix(in srgb, var(--bg-elev) 60%, transparent);
}
.meta-inputs label {
display: flex;
@ -711,7 +711,7 @@ body.dashboard-shell {
margin-right: 0.1em;
}
.btn-meta-update {
background: rgba(203, 166, 247, 0.12);
background: color-mix(in srgb, var(--purple) 12%, transparent);
border: 1px solid var(--purple);
color: var(--purple);
text-shadow: 0 0 4px currentColor;
@ -723,7 +723,7 @@ body.dashboard-shell {
transition: box-shadow 0.15s ease, background 0.15s ease;
}
.btn-meta-update:hover:not([disabled]) {
background: rgba(203, 166, 247, 0.22);
background: color-mix(in srgb, var(--purple) 22%, transparent);
box-shadow: 0 0 10px -2px currentColor;
}
.btn-meta-update[disabled] {
@ -734,7 +734,7 @@ body.dashboard-shell {
margin: 0 0 0.7em;
padding: 0.4em 0.7em;
border: 1px solid var(--purple);
background: rgba(203, 166, 247, 0.12);
background: color-mix(in srgb, var(--purple) 12%, transparent);
color: var(--purple);
font-size: 0.85em;
animation: badge-pulse 1.6s ease-in-out infinite;
@ -751,7 +751,7 @@ body.dashboard-shell {
.rebuild-queue-entry {
padding: 0.3em 0.6em;
border: 1px solid var(--border);
background: rgba(24, 24, 37, 0.6);
background: color-mix(in srgb, var(--bg-elev) 60%, transparent);
font-size: 0.9em;
display: flex;
flex-wrap: wrap;
@ -761,7 +761,7 @@ body.dashboard-shell {
.rebuild-queue-entry.rqe-child { margin-left: 1.6em; border-color: var(--purple-dim); }
.rebuild-queue-entry.rqe-running {
border-color: var(--purple);
background: rgba(203, 166, 247, 0.12);
background: color-mix(in srgb, var(--purple) 12%, transparent);
animation: badge-pulse 1.6s ease-in-out infinite;
}
.rebuild-queue-entry.rqe-failed { border-color: var(--red); color: var(--red); }
@ -797,7 +797,7 @@ body.dashboard-shell {
flex-basis: 100%;
margin: 0.3em 0 0;
padding: 0.3em 0.5em;
background: rgba(243, 139, 168, 0.1);
background: color-mix(in srgb, var(--red) 10%, transparent);
border-left: 2px solid var(--red);
color: var(--red);
font-size: 0.8em;
@ -863,6 +863,8 @@ ul form.inline { display: inline-block; }
cursor: pointer;
margin-left: 0.4em;
}
/* Off-palette warm-amber hover tint: not an exact theme var (brighter than
--amber), left as a literal pending a dedicated named var. */
.btn-inline:hover { background: rgba(255, 184, 77, 0.1); }
.kind {
display: inline-block;
@ -933,13 +935,13 @@ summary:hover { color: var(--purple); }
margin: 0.3em 0;
}
.reminder-row.reminder-failed {
border-left: 2px solid var(--red, #f38ba8);
border-left: 2px solid var(--red);
padding-left: 0.5em;
}
.reminder-error {
color: var(--red, #f38ba8);
background: rgba(243, 139, 168, 0.06);
border: 1px solid rgba(243, 139, 168, 0.25);
color: var(--red);
background: color-mix(in srgb, var(--red) 6%, transparent);
border: 1px solid color-mix(in srgb, var(--red) 25%, transparent);
padding: 0.3em 0.5em;
font-size: 0.85em;
white-space: pre-wrap;
@ -974,11 +976,11 @@ summary:hover { color: var(--purple); }
border-color: var(--amber);
}
.questions li.question-peer {
border-left: 2px solid var(--mauve, #cba6f7);
border-left: 2px solid var(--purple);
padding-left: 0.6em;
}
.questions .msg-to-peer { color: var(--mauve, #cba6f7); }
.btn-override { background: var(--mauve, #cba6f7) !important; color: var(--bg) !important; }
.questions .msg-to-peer { color: var(--purple); }
.btn-override { background: var(--purple) !important; color: var(--bg) !important; }
.questions li.question {
padding: 0.4em 0;
border-bottom: 1px solid var(--border);
@ -1046,7 +1048,7 @@ summary:hover { color: var(--purple); }
}
.question-answered { opacity: 0.7; }
.question-answered .q-body { color: var(--muted); margin-bottom: 0.15em; }
.q-answer { font-size: 0.9em; color: var(--green, #a6e3a1); padding: 0.1em 0 0.4em 0; }
.q-answer { font-size: 0.9em; color: var(--green); padding: 0.1em 0 0.4em 0; }
.q-answer-text { font-style: italic; }
footer {
@ -1141,7 +1143,7 @@ footer .banner-thin {
.schedule-edit-form-wrapper {
margin-top: 0.5em;
padding-left: 0.5em;
border-left: 2px solid var(--yellow, #f9e2af);
border-left: 2px solid var(--yellow);
}
.schedule-edit-targets-note {
color: var(--muted);
@ -1185,13 +1187,13 @@ footer .banner-thin {
border-radius: 999px;
font-size: 0.85em;
cursor: pointer;
background: rgba(24, 24, 37, 0.4);
background: color-mix(in srgb, var(--bg-elev) 40%, transparent);
}
.schedule-target-chip:hover { border-color: var(--purple-dim); }
.schedule-target-chip:has(input:checked) {
border-color: var(--purple);
color: var(--purple);
background: rgba(203, 166, 247, 0.08);
background: color-mix(in srgb, var(--purple) 8%, transparent);
}
.schedule-target-chip input { margin: 0; }
.schedule-actions {
@ -1333,10 +1335,13 @@ footer .banner-thin {
margin-left: 0.3em;
}
.schedules-table-edit-row > td {
/* Off-palette dim-purple surface tint: not an exact theme var, left as a
literal pending a dedicated named var so a theme swap can recolour it. */
background: rgba(38, 32, 60, 0.35);
padding: 0.5em 0.6em;
}
.schedules-table-create-row td {
/* Off-palette dim-purple surface tint — see the edit-row note above. */
background: rgba(38, 32, 60, 0.25);
border-top: 2px solid var(--border);
vertical-align: top;
@ -1443,7 +1448,7 @@ footer .banner-thin {
flex-wrap: wrap;
gap: 0.6em;
padding: 0.55em 1em;
background: var(--flow-frost-bg, rgba(30, 30, 46, 0.74));
background: var(--flow-frost-bg, color-mix(in srgb, var(--bg) 74%, transparent));
-webkit-backdrop-filter: blur(12px) saturate(140%);
backdrop-filter: blur(12px) saturate(140%);
border-top: 1px solid var(--purple);