How this repo couples to the Tiny Wire design system, at the UI element. Design-system-side counterpart: LinzLos/tiny-wire#6.
Vendoring: Tiny Wire tokens woven into src/index.css (Vite/React build), not a verbatim file copy. Note: Tiny Wire component classes (.btn-*, .card, .input…) are not used — components are rebuilt inline.
Downstream (consumes Tiny Wire) — by UI element
- Body + dark mode —
--surface-page, --surface-*/--text-* under data-theme="dark" (src/index.css:72-233)
- Sidenav / theme toggle —
--logo, --border, --surface-muted (Sidenav.tsx)
- Header bar / search border —
--surface-page, --brand (Overview.tsx:273-297)
- Queue card / status badge —
--surface, --border, --danger/--info (Overview.tsx:443-526)
- QueueMonitor tabs —
--brand/--surface (QueueMonitor.tsx:134)
- Animation utils —
page-enter, filter-enter, modal-enter, fade-up, toast-enter via --ease-spring/--duration-*
Note: font families match Tiny Wire ('Bricolage Grotesque' / 'DM Sans') but are set inline, not via var(--font-*).
Upstream direction (patterns that may belong in the design system): #2.
How this repo couples to the Tiny Wire design system, at the UI element. Design-system-side counterpart: LinzLos/tiny-wire#6.
Vendoring: Tiny Wire tokens woven into
src/index.css(Vite/React build), not a verbatim file copy. Note: Tiny Wire component classes (.btn-*,.card,.input…) are not used — components are rebuilt inline.Downstream (consumes Tiny Wire) — by UI element
--surface-page,--surface-*/--text-*underdata-theme="dark"(src/index.css:72-233)--logo,--border,--surface-muted(Sidenav.tsx)--surface-page,--brand(Overview.tsx:273-297)--surface,--border,--danger/--info(Overview.tsx:443-526)--brand/--surface(QueueMonitor.tsx:134)page-enter,filter-enter,modal-enter,fade-up,toast-entervia--ease-spring/--duration-*Note: font families match Tiny Wire ('Bricolage Grotesque' / 'DM Sans') but are set inline, not via
var(--font-*).Upstream direction (patterns that may belong in the design system): #2.