knacky/mimic
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(frontend): add Tabs primitive + useHashTab hook

Browse Source 
- useHashTab: pure-TS hook reading window.location.hash, falls back to
  defaultId, hashchange listener cleaned up on unmount
- Tabs: <Tabs items activeId onChange> with tab-underline / tab-underline-active
  recipes and count-pill (rounded-pill exception per DESIGN.md)
- index.css: tab-underline*, tab-count-pill*, alert-*, table-compact recipes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Knacky
2026-06-21 22:10:59 +02:00
parent 89fb38b107
commit bca39dcca7
3 changed files with 112 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/styles/index.css
View File

@@ -147,4 +147,48 @@
.tag-mitre {
@apply inline-flex items-center bg-cloud text-ink border border-hairline rounded-none px-2 py-[2px] font-mono text-[12px] leading-[1.33];
}
/* ─── Sub-page tabs (L1) ─────────────────────────────────────────────── */
.tab-underline {
@apply text-graphite caption-bold cursor-pointer border-b-2 border-transparent hover:text-ink px-xs;
}
.tab-underline-active {
@apply text-primary border-primary;
}
/* Count pill — rounded-pill is the allowed exception per DESIGN.md */
.tab-count-pill {
@apply inline-flex items-center rounded-pill bg-cloud text-graphite text-[11px] px-xs py-0 font-mono;
}
.tab-count-pill-active {
@apply bg-primary-soft text-primary;
}
/* ─── Inline alert banners (L2) ─────────────────────────────────────── */
.alert-error {
@apply bg-paper border border-hairline border-l-4 border-l-bloom-deep rounded-none px-md py-sm flex items-start gap-sm;
}
.alert-warn {
@apply bg-paper border border-hairline border-l-4 border-l-warn rounded-none px-md py-sm flex items-start gap-sm;
}
.alert-success {
@apply bg-paper border border-hairline border-l-4 border-l-success rounded-none px-md py-sm flex items-start gap-sm;
}
.alert-info {
@apply bg-paper border border-hairline border-l-4 border-l-primary rounded-none px-md py-sm flex items-start gap-sm;
}
/* ─── Compact table density (L4) — 32px row height, global ──────────── */
.table-compact thead tr {
@apply text-[11px] uppercase tracking-[0.5px] text-graphite;
}
.table-compact th {
@apply px-md py-xxs;
}
.table-compact td {
@apply px-md py-xxs caption-md;
}
.table-compact tbody tr {
@apply border-b border-hairline last:border-0;
min-height: 32px;
}
}