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

14
frontend/packages/dashboard/src/common.css
View file

@ -4,6 +4,10 @@
@import "@hive/shared/terminal.css";
@import "@hive/shared/tabs.css";
@import "@hive/shared/chrome.css";
/* Shared pill/chip/badge shape (the "extract pill component" issue,
resolved as shared CSS rather than a JS component) — see pill.css
itself for the classnames it covers. */
@import "@hive/shared/pill.css";
/* ─── global typography ─────────────────────────────────────────────
Element-level rules shared across all three pages (index, flow,
@ -54,15 +58,11 @@ code {
/* ─── status badges ─────────────────────────────────────────────────
.badge base + semantic colour variants. Used on container rows
(tabs.js) and build-log rows (logs.js). */
(tabs.js) and build-log rows (logs.js). Shape (border/radius/padding/
font-size/letter-spacing) is shared with the agent UI's pill/chip
family — see @hive/shared/pill.css. */
.badge {
display: inline-block;
padding: 0.05em 0.5em;
border: 1px solid;
border-radius: 2px;
font-size: 0.75em;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.badge-warn {
color: var(--amber); border-color: var(--amber);