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

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

12
frontend/packages/shared/src/terminal.css
View file

@ -18,7 +18,7 @@
.terminal-wrap {
position: relative;
background: rgba(17, 17, 27, 0.78);
background: color-mix(in srgb, var(--crust) 78%, transparent);
-webkit-backdrop-filter: blur(8px) saturate(120%);
backdrop-filter: blur(8px) saturate(120%);
border: 1px solid var(--purple-dim);
@ -120,12 +120,12 @@
font-weight: normal;
margin-left: 0.6em;
font-size: 0.85em;
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.4s ease-in-out infinite;
}
@keyframes badge-pulse {
0%, 100% { opacity: 1; text-shadow: 0 0 6px rgba(250, 179, 135, 0.55); }
50% { opacity: 0.7; text-shadow: 0 0 14px rgba(250, 179, 135, 0.95); }
0%, 100% { opacity: 1; text-shadow: 0 0 6px color-mix(in srgb, var(--amber) 55%, transparent); }
50% { opacity: 0.7; text-shadow: 0 0 14px color-mix(in srgb, var(--amber) 95%, transparent); }
}
/* "↓ N new" pill: shown when new rows arrive while the operator is
scrolled up; click to jump to bottom. Positioned by the wrapper's
@ -136,7 +136,7 @@
right: 1em;
bottom: 4.2em;
background: var(--amber);
color: #11111b;
color: var(--crust);
font-family: inherit;
font-size: 0.8em;
font-weight: bold;
@ -145,7 +145,7 @@
border-radius: 999px;
padding: 0.35em 0.9em;
cursor: pointer;
box-shadow: 0 0 14px -2px rgba(250, 179, 135, 0.85);
box-shadow: 0 0 14px -2px color-mix(in srgb, var(--amber) 85%, transparent);
opacity: 0;
transform: translateY(6px);
pointer-events: none;