#079
Tone and variant
An 18 tile grid of solid Surfaces crossing six tones with three variants.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Tone and variant" pattern (@codeatlasdev/ui demo #079, surfaces/surface) in my app.
Call get_demo({ ids: ["#079"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Picking the tone and variant of a surface for status, brand or neutral emphasis.
Keep these library parts, with the props and tokens the demo uses:
- Surface from "@codeatlasdev/ui"
Behaviour to keep:
- `const tones = ['neutral', 'brand', 'success', 'warning', 'error', 'info'] as const`
- `const variants = ['filled', 'outlined', 'ghost'] as const`
- `<Surface material="solid" elevation={1} {tone} {variant} p="3" class="tile">` in nested `{#each variants as variant (variant)}` and `{#each tones as tone (tone)}` loops
- Each tile prints its tone and variant name
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
- Surface
@codeatlasdev/ui
How it is built
- `const tones = ['neutral', 'brand', 'success', 'warning', 'error', 'info'] as const`
- `const variants = ['filled', 'outlined', 'ghost'] as const`
- `<Surface material="solid" elevation={1} {tone} {variant} p="3" class="tile">` in nested `{#each variants as variant (variant)}` and `{#each tones as tone (tone)}` loops
- Each tile prints its tone and variant name
Related
Loading source.