#880
Component tokens
A dense focus-mode toolbar that restyles Button, IconButton and Kbd with component tokens on one wrapper: tighter gap and line-height, a regular-weight large button, wider small padding, a borderless ghost button, a 36px icon button and a square keycap.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Component tokens" pattern (@codeatlasdev/ui demo #880, inputs/button) in my app.
Call get_demo({ ids: ["#880"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: A product whose design system fixes button weight, tracking, gap, padding and keycap size per context (public area, dashboard, focus mode), without writing selectors against ca-* classes.
Keep these library parts, with the props and tokens the demo uses:
- Button, IconButton, Kbd from "@codeatlasdev/ui"
Behaviour to keep:
- Wrapper `.dense` declares only custom properties: `--ca-btn-gap`, `--ca-btn-line-height`, `--ca-btn-letter-spacing`, `--ca-btn-lg-font-weight`, `--ca-btn-lg-font-size`, `--ca-btn-sm-padding-x`, `--ca-btn-sm-font-size`, `--ca-btn-ghost-border-width`, `--ca-icon-btn-size-sm`, `--ca-kbd-size`, `--ca-kbd-font-size`, `--ca-kbd-line-height`
- `<Button variant="filled" size="lg">` labelled Call next lead
- `<Button variant="outlined" tone="neutral" size="sm">` labelled Snooze, a ghost neutral sm Skip and a disabled outlined neutral sm Reassign
- `<IconButton variant="text" size="sm" aria-label="Close focus mode">` with an X icon
- `<Kbd>N</Kbd>` after the text Next lead in a `.hint` span
- Flex `.dense` wrapper with `gap: var(--ca-space-3)`; the CSS has no selector against a component class
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
How it is built
- Wrapper `.dense` declares only custom properties: `--ca-btn-gap`, `--ca-btn-line-height`, `--ca-btn-letter-spacing`, `--ca-btn-lg-font-weight`, `--ca-btn-lg-font-size`, `--ca-btn-sm-padding-x`, `--ca-btn-sm-font-size`, `--ca-btn-ghost-border-width`, `--ca-icon-btn-size-sm`, `--ca-kbd-size`, `--ca-kbd-font-size`, `--ca-kbd-line-height`
- `<Button variant="filled" size="lg">` labelled Call next lead
- `<Button variant="outlined" tone="neutral" size="sm">` labelled Snooze, a ghost neutral sm Skip and a disabled outlined neutral sm Reassign
- `<IconButton variant="text" size="sm" aria-label="Close focus mode">` with an X icon
- `<Kbd>N</Kbd>` after the text Next lead in a `.hint` span
- Flex `.dense` wrapper with `gap: var(--ca-space-3)`; the CSS has no selector against a component class
Related
Loading source.