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

37
frontend/packages/agent/src/agent.css
View file

@ -6,6 +6,10 @@
agent SUB-pages (stats, screen) the same back-link nav the dashboard's
standalone pages use. The live terminal page keeps its own header. */
@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";
/* Themed dialog/toast component CSS (modal.js) now lives in each
component's own shadow root (adoptedStyleSheets), not a global
stylesheet — nothing to @import here any more. */
@ -302,14 +306,11 @@ h2, h3 {
/* Header pill — inbox / loose-ends triggers. Compact, count-prominent. */
.header-pill {
/* border/radius/padding/font-size/letter-spacing: shared pill.css */
background: transparent;
border: 1px solid var(--purple-dim);
border-color: var(--purple-dim);
color: var(--fg);
font-family: inherit;
font-size: 0.85em;
letter-spacing: 0.04em;
border-radius: 999px;
padding: 0.25em 0.7em;
display: inline-flex;
align-items: center;
gap: 0.4em;
@ -604,12 +605,9 @@ pre.diff {
}
.model-chip,
.effort-chip {
/* border/radius/padding/font-size/letter-spacing: shared pill.css */
display: inline-block;
padding: 0.1em 0.6em;
border: 1px solid var(--purple-dim);
border-radius: 999px;
font-size: 0.78em;
letter-spacing: 0.04em;
border-color: var(--purple-dim);
}
.model-chip { color: var(--cyan); }
.effort-chip { color: var(--amber); }
@ -618,13 +616,10 @@ pre.diff {
breakdown on hover. Sized/coloured like a peer of model-chip so
the state row reads as one row of chrome. */
.ctx-badge {
/* border/radius/padding/font-size/letter-spacing: shared pill.css */
display: inline-block;
padding: 0.1em 0.6em;
border: 1px solid var(--purple-dim);
border-radius: 999px;
border-color: var(--purple-dim);
color: var(--green);
font-size: 0.78em;
letter-spacing: 0.04em;
cursor: default;
white-space: pre-line;
}
@ -633,12 +628,8 @@ pre.diff {
`.state-badge` / `.model-chip` so the state row stays visually
uniform; colour communicates the actual reachability state. */
.status-badge {
/* border/radius/padding/font-size/letter-spacing: shared pill.css */
display: inline-block;
padding: 0.25em 0.8em;
border: 1px solid;
border-radius: 999px;
font-size: 0.85em;
letter-spacing: 0.05em;
}
.status-badge.status-loading { color: var(--muted); border-color: var(--purple-dim); }
.status-badge.status-online { color: var(--green); border-color: var(--green);
@ -672,12 +663,8 @@ pre.diff {
`:disabled` opacity treatment lives on the shared
`.overflow-item:disabled` rule). */
.state-badge {
/* border/radius/padding/font-size/letter-spacing: shared pill.css */
display: inline-block;
padding: 0.25em 0.8em;
border: 1px solid;
border-radius: 999px;
font-size: 0.85em;
letter-spacing: 0.05em;
transition: color 280ms ease, border-color 280ms ease,
box-shadow 280ms ease, background 280ms ease;
}