8dd6d05d6c
Per mara's steer on #3053 ("chip/pill/badge is the same if you squint ... theme unification is part of the goal" then "make it common css instead of component, thats fine. but make them look unified (not as much per usage css)"): shared CSS, not a JS component. New @hive/shared/pill.css defines two classes, `.hive-pill` (primary state chips) and `.hive-pill-sm` (secondary meta chips) — border/ border-radius/padding/font-size/letter-spacing (colour stays per-site, the meaningful semantic part). Every render call site across dashboard (swarm.js/core.js/builds.js) and agent (index.html/app.js) now carries one of the two shared classes directly, alongside its own existing semantic-colour modifier class. Second cut of this PR, per argus's approve + mara's follow-up review comment on the first cut: the first version instead enumerated every legacy classname (`.badge`, `.status-badge`, `.header-pill`, etc.) straight into pill.css's own selector groups so no call sites needed touching. Mara's correction: that just relocates the duplication rather than removing it, and the shared CSS shouldn't have to keep naming every consumer. This version does the real rename instead. Most visible consequence, unchanged from the first cut: dashboard's `.badge` family moves off its own shape (2px square corners, uppercase, tighter padding) onto the shared rounded-pill shape + agent's "sm" tier sizing. `npm run build` clean across all three packages; verified the compiled bundles carry the new classnames at every call site (dashboard JS, agent index.html + app.js), not just the source tree. Fixes #3053
40 lines
1.6 KiB
CSS
40 lines
1.6 KiB
CSS
/* Shared pill/chip/badge shape — the "extract pill component" issue,
|
|
resolved as shared CSS rather than a JS component. `.hive-pill` and
|
|
`.hive-pill-sm` are the ONLY two classnames this file names — every
|
|
inline status/count chip across the dashboard + per-agent UI carries
|
|
one of them (added alongside its own semantic colour modifier class,
|
|
e.g. `class="hive-pill-sm badge-ok"`) instead of this file having to
|
|
enumerate every call site's own base classname. Per mara's review on
|
|
the first cut of this: naming every use here just relocates the
|
|
duplication rather than removing it — the fix is unifying the
|
|
classnames themselves, not fanning shared CSS out across old names.
|
|
|
|
Two size tiers, matching what was already organically in use:
|
|
.hive-pill — primary state chips (agent status/state chips)
|
|
.hive-pill-sm — secondary meta chips (agent model/effort/ctx chips,
|
|
the dashboard's whole badge family)
|
|
|
|
`display: inline-block` is the default here since that covers every
|
|
plain-text chip; the one exception (the agent header's icon+label+
|
|
count flyout pills) overrides `display` locally to `inline-flex` —
|
|
layout mode isn't part of the shape these two classes exist to
|
|
share, so a single site overriding it is expected, not a gap. */
|
|
|
|
.hive-pill,
|
|
.hive-pill-sm {
|
|
display: inline-block;
|
|
border: 1px solid;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.hive-pill {
|
|
padding: 0.25em 0.8em;
|
|
font-size: 0.85em;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.hive-pill-sm {
|
|
padding: 0.1em 0.6em;
|
|
font-size: 0.78em;
|
|
letter-spacing: 0.04em;
|
|
}
|