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

refactor(frontend): add shared tab-strip base styles (#1464 step 1 foundation)

Browse source 
First piece of the generic tabs component: @hive/shared/tabs.css carries
the base .hive-tabbar / .hive-tab / .hive-tab--active styles (lifted from
the logs sub-tab pattern, the most generic of the three tab UIs). Colours
use the semantic theme vars so it inherits theme-swap safety.

Not yet consumed — the createTabStrip JS helper + the per-call-site
migrations (logs, agent window-tabs, dashboard tabbar) follow. Count
pills + the dashboard's responsive overflow menu will layer on top in
the per-page CSS rather than the shared base.
This commit is contained in:
iris 2026-06-08 21:48:08 +02:00
commit 55ee52b213
1 changed files with 37 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

37
frontend/packages/shared/src/tabs.css Normal file
View file

@ -0,0 +1,37 @@
/* Shared tab-strip chrome — the generic tab/sub-tab styling used across
the dashboard tabbar, the logs sub-tabs, and the agent stat-window
selector. Behaviour lives in `@hive/shared/tabs.js` (createTabStrip).
Colours come from the semantic theme layer (theme.css → colors.css),
so this inherits theme-swap safety for free. Call sites keep a thin
variant class for size/spacing deltas; richer affordances (count
pills, the dashboard's responsive overflow ⋮ menu) layer on top in the
per-page CSS. See docs/web-ui/css-vars.md + #1464. */
.hive-tabbar {
display: flex;
gap: 0.2em;
}
.hive-tab {
display: inline-flex;
align-items: center;
padding: 0.35em 0.9em;
border-radius: 4px;
color: var(--subtext0);
text-decoration: none;
font-size: 0.85em;
letter-spacing: 0.05em;
cursor: pointer;
transition: background 100ms, color 100ms;
}
.hive-tab:hover {
background: var(--border);
color: var(--fg);
}
.hive-tab--active {
background: var(--border);
color: var(--purple);
}