Element: #079 Tone and variant (surfaces/surface) What it shows: An 18 tile grid of solid Surfaces crossing six tones with three variants. When to use: Picking the tone and variant of a surface for status, brand or neutral emphasis. Spec: - `const tones = ['neutral', 'brand', 'success', 'warning', 'error', 'info'] as const` - `const variants = ['filled', 'outlined', 'ghost'] as const` - `` in nested `{#each variants as variant (variant)}` and `{#each tones as tone (tone)}` loops - Each tile prints its tone and variant name Tags: surface, tone, variant, filled, outlined, ghost Needs: @codeatlasdev/ui@4.6.0 Components: Surface Live demo: https://ui.codeatlas.com.br/docs/surfaces/surface#tone-and-variant

{#each variants as variant (variant)} {#each tones as tone (tone)}

{tone}
{variant}

{/each} {/each}