#229
Body and UI scale
Seven body text size tokens from Body 1 to Nano, each rendered as a sample line.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Body and UI scale" pattern (@codeatlasdev/ui demo #229, foundation/typography) in my app.
Call get_demo({ ids: ["#229"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Choosing a font size token for body copy, captions, labels and buttons.
Keep these library parts, with the props and tokens the demo uses:
Behaviour to keep:
- Renders `<TypeRows {rows} />` with 7 rows
- Row tokens: `--ca-font-size-body1`, `--ca-font-size-body2`, `--ca-font-size-caption`, `--ca-font-size-label`
- Then `--ca-font-size-button`, `--ca-font-size-micro`, `--ca-font-size-nano`
- Row labels: Body 1, Body 2, Caption, Label, Button, Micro, Nano
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
How it is built
- Renders `<TypeRows {rows} />` with 7 rows
- Row tokens: `--ca-font-size-body1`, `--ca-font-size-body2`, `--ca-font-size-caption`, `--ca-font-size-label`
- Then `--ca-font-size-button`, `--ca-font-size-micro`, `--ca-font-size-nano`
- Row labels: Body 1, Body 2, Caption, Label, Button, Micro, Nano
Related
Loading source.