Element: #228 Shadow scale (foundation/shadows)
What it shows: Five cards, each with one shadow token from xs to xl, labelled with its name and CSS variable.
When to use: Comparing the five shadow sizes before choosing one for a card, popover or floating panel.
Spec:
- `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)`
Tags: shadows, elevation, tokens, scale, box-shadow
Needs: @codeatlasdev/ui@4.4.0
Components: none
Live demo: https://ui.codeatlas.com.br/docs/foundation/shadows#shadow-scale