Dev Tools
SurfaceDemo
Live preview of one surface elevation. Renders a card painted with the surface's fill, border, and shadow or blur tokens, then shows usage notes and the token bundle as code. Used on the Surface Elevations foundations page.
Import
import SurfaceDemo from '../../components/utility/SurfaceDemo.astro';Props
| Prop | Type | Required | Description |
|---|---|---|---|
name | string | Yes | Token base name shown above the title (e.g. surface-raised) |
title | string | Yes | Display title (e.g. Raised) |
description | string | Yes | One-line purpose |
usage | string | Yes | Longer usage paragraph |
usedBy | string[] | No | Component families using this surface |
fillToken | string | Yes | CSS variable name for the fill (e.g. --color-fill-surface-raised) |
borderToken | string | No | CSS variable name for the border |
shadowToken | string | No | CSS variable name for the shadow |
blurToken | string | No | CSS variable name for the backdrop blur (mutually exclusive with shadow) |
stageFillToken | string | No | Background of the preview stage (default --color-fill-surface-page) |
variants | { name, fillToken, borderToken? }[] | No | Renders multiple swatches instead of a single card |
underlay | { fillToken, blurToken? } | No | Renders an underlay layer behind the card (modal pattern) |
id | string | No | Anchor id for deep-linking (used by TOC navigation) |
Preview
surface-raised Raised
A standard card or panel lifted above the page.
Raised The default choice for cards, content panels, and any container that needs a gentle elevation above the page.
Used by: Cards, Content panels
Tokens in bundle
background: var(--color-fill-surface-raised);
outline: var(--primitive-border-width-1) solid var(--color-border-surface-raised);
box-shadow: var(--shadow-surface-elevated);