#228
Shadow scale
Five cards, each with one shadow token from xs to xl, labelled with its name and CSS variable.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Shadow scale" pattern (@codeatlasdev/ui demo #228, foundation/shadows) in my app.
Call get_demo({ ids: ["#228"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Comparing the five shadow sizes before choosing one for a card, popover or floating panel.
Keep these library parts, with the props and tokens the demo uses:
Behaviour to keep:
- `const sizes = ["xs", "sm", "md", "lg", "xl"]` rendered by `{#each sizes as size (size)}`
- Each card sets `style="--card-shadow: var(--ca-shadow-{size})"`
- Labels `shadow-{size}` and `--ca-shadow-{size}` shown in each card
- Cards use `background: var(--ca-surface-base)` and `box-shadow: var(--card-shadow)`
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
- `const sizes = ["xs", "sm", "md", "lg", "xl"]` rendered by `{#each sizes as size (size)}`
- Each card sets `style="--card-shadow: var(--ca-shadow-{size})"`
- Labels `shadow-{size}` and `--ca-shadow-{size}` shown in each card
- Cards use `background: var(--ca-surface-base)` and `box-shadow: var(--card-shadow)`
Related
Loading source.