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

frontend: unify pill/chip/badge shape into shared CSS

Browse source 
Per mara's steer on #3053 ("chip/pill/badge is the same if you squint
... theme unification is part of the goal ... make it common css
instead of component, thats fine. but make them look unified"):
shared CSS, not a JS component.

New @hive/shared/pill.css defines the shape (border/border-radius/
padding/font-size/letter-spacing — color stays per-site, that's the
meaningful semantic part) in two tiers matching what was already
organically in use: `.hive-pill` (primary state chips) and
`.hive-pill-sm` (secondary meta chips). Every pre-existing classname
that drew its own copy of this shape (dashboard's `.badge` family,
agent's `.status-badge`/`.state-badge`/`.header-pill`/`.ctx-badge`/
`.model-chip`/`.effort-chip`) is folded straight into the same
selector groups, so no markup or JS changes were needed anywhere —
every render call site keeps constructing the exact same classnames
it always did.

Most visible consequence: dashboard's `.badge` family moves from its
own shape (2px square corners, uppercase, tighter padding) onto the
shared rounded-pill shape + agent's "sm" tier sizing, matching the
"look unified" ask directly. `npm run build` clean across all three
packages.
This commit is contained in:
iris 2026-08-12 17:25:38 +02:00 • committed by mara
commit 92b9e67327
4 changed files with 73 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

53
frontend/packages/shared/src/pill.css Normal file
View file

@ -0,0 +1,53 @@
/* Shared pill/chip/badge shape — the "extract pill component" issue,
resolved as shared CSS rather than a JS component. Every inline
status/count chip across the dashboard + per-agent UI shares its
structural shape (border, radius, padding, font-size, letter-
spacing) from here instead of re-declaring the same values per
site; only the per-semantic COLOR (ok/fail/warn/…) stays local to
each page's own CSS — this file is shape only.
Two size tiers, matching what was already organically in use rather
than inventing a third:
.hive-pill — primary state chips (agent status/state/header pills)
.hive-pill-sm — secondary meta chips (agent model/effort/ctx chips,
the dashboard's whole `.badge` family)
Every pre-existing classname that drew its own copy of this shape
(`.status-badge`/`.state-badge`/`.header-pill`/`.ctx-badge`/
`.model-chip`/`.effort-chip`/`.badge`) is folded into the same
selector groups below, so no markup changes were needed anywhere to
pick this up — `display` stays per-site (inline-block for plain
text, inline-flex for header-pill's icon+label+count layout), since
that's a layout concern, not part of the pill's shape identity. */
.hive-pill,
.hive-pill-sm,
.status-badge,
.state-badge,
.header-pill,
.ctx-badge,
.model-chip,
.effort-chip,
.badge {
border: 1px solid;
border-radius: 999px;
}
.hive-pill,
.status-badge,
.state-badge,
.header-pill {
padding: 0.25em 0.8em;
font-size: 0.85em;
letter-spacing: 0.05em;
}
.hive-pill-sm,
.ctx-badge,
.model-chip,
.effort-chip,
.badge {
padding: 0.1em 0.6em;
font-size: 0.78em;
letter-spacing: 0.04em;
}