From 79a689364b1847f97af9ea5cf4d1cdc7e364a473 Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Sat, 29 Aug 2026 20:36:54 +0200
Subject: [PATCH] badge: frosted-glass fill for the default filled variant
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 frontend/packages/shared/src/badge/Badge.css | 36 +++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/frontend/packages/shared/src/badge/Badge.css b/frontend/packages/shared/src/badge/Badge.css
index e8c1b908..e4962545 100644
--- a/frontend/packages/shared/src/badge/Badge.css
+++ b/frontend/packages/shared/src/badge/Badge.css
@@ -13,11 +13,45 @@
   font: inherit;
   font-size: 0.85em;
   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);
   border: none;
   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 {
   cursor: pointer;
   min-height: 2.75em;