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

badge: frosted-glass fill for the default filled variant

Browse source 
Translucent color-mix background + backdrop-filter blur/saturate,
same recipe as the header chrome/terminal glass (chrome.css,
terminal.css). Dark (mocha) palette only: applies the glass look to
the default filled badges, keeps light (latte) mode's plain solid
fill unchanged since a bright/busy background behind a badge would
lose legibility from the same transparency that helps on a dark
background. variant="quiet" badges are untouched (they already have
no permanent fill to frost).

Verified with a synthetic striped-background test page (raw CSS
against colors.css/theme.css/Badge.css, not the bundled app) to make
the blur/transparency visually obvious, plus real headless-chromium
screenshots of the built agent + swarm-ui dist to confirm no
regression against real content — the effect is real but subtle
there since the chrome background is flat, which is expected.
This commit is contained in:
iris 2026-08-29 20:36:54 +02:00 • committed by mara
commit 79a689364b
1 changed files with 35 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

36
frontend/packages/shared/src/badge/Badge.css
View file

@ -13,11 +13,45 @@
font: inherit; font: inherit;
font-size: 0.85em; font-size: 0.85em;
line-height: 1.4; line-height: 1.4;
background: var(--purple-dim); background: color-mix(in srgb, var(--purple-dim) 65%, transparent);
-webkit-backdrop-filter: blur(6px) saturate(140%);
backdrop-filter: blur(6px) saturate(140%);
color: var(--fg); color: var(--fg);
border: none; border: none;
white-space: nowrap; white-space: nowrap;
} }
/* Frosted-glass fill (mara: "make badges look glassy... in dark mode
the added transparency improves readability, bg behind is dark") —
same recipe as the header chrome/terminal glass (`chrome.css`,
`terminal.css`): translucent `color-mix` + `backdrop-filter`. Only
for the default filled badges — `variant="quiet"` (below) already
has no fill at all, nothing to frost.
Dark (mocha) only, deliberately: her own reasoning was conditioned
on a dark surface behind the badge. A light (latte) page has bright,
often busy content behind a badge — the same transparency would
wash out the value text instead of improving it, the opposite of
what this is for — so light mode keeps the plain solid fill. Same
three-way structure `colors.css` uses for every light/dark switch:
this default rule *is* the dark look (mocha is the default palette),
the `@media`/`:root[data-theme]` blocks below revert it for light,
restore it for an explicit dark override. */
@media (prefers-color-scheme: light) {
.ui-badge {
background: var(--purple-dim);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
:root[data-theme='light'] .ui-badge {
background: var(--purple-dim);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
:root[data-theme='dark'] .ui-badge {
background: color-mix(in srgb, var(--purple-dim) 65%, transparent);
-webkit-backdrop-filter: blur(6px) saturate(140%);
backdrop-filter: blur(6px) saturate(140%);
}
.ui-badge-interactive { .ui-badge-interactive {
cursor: pointer; cursor: pointer;
min-height: 2.75em; min-height: 2.75em;