Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
spacing-specimen
Spacing scale specimen web component that reads VB design tokens and renders a visual bar chart with computed values.
Overview
The <spacing-specimen> component reads VB spacing tokens from computed styles and renders a visual bar chart with token names and computed pixel values. It auto-adapts to the current theme.
Basic specimen
<spacing-specimen></spacing-specimen>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
tokens |
string | 3xs,2xs,xs,s,m,l,xl,2xl,3xl |
Comma-separated token names to display |
prefix |
string | --size- |
CSS custom property prefix for token lookup |
show-values |
boolean | true |
Show computed pixel values (set to "false" to hide) |
label |
string | - | Optional heading label above the scale |
max |
string | 40 |
Maximum bar width in ch units |
Custom Subset
Show only the tokens you need.
Custom subset
<spacing-specimen tokens="xs,s,m,l,xl" label="Core Scale"></spacing-specimen>Progressive Enhancement
Without JavaScript, the fallback content (e.g., a <dl> listing token names) is shown. When JS loads, the component reads computed CSS values and renders the visual scale.
With fallback content
<spacing-specimen> <dl> <dt>xs</dt><dd>var(--size-xs)</dd> <dt>m</dt><dd>var(--size-m)</dd> <dt>xl</dt><dd>var(--size-xl)</dd> </dl></spacing-specimen>Editable Mode
Add the editable attribute to replace the value cell with a text input per row. Editing a value writes that token as a CSS custom property on target (default :root), so the rest of the page updates live.
Live spacing editing
<spacing-specimen editable tokens="xs,s,m,l,xl" label="Try It"></spacing-specimen>Listen for edits via the spacing-specimen:change event — useful for collecting token overrides into a theme export.
Listening to edits
document.querySelector('spacing-specimen') .addEventListener('spacing-specimen:change', (e) => { console.log(e.detail); // { name: 'm', value: '1.25rem', token: '--size-m', target: ':root' } });Theme-Aware
The component reads live computed values, so when themes change spacing tokens (e.g., 8bit uses larger spacing), the bars update automatically. Pair with <type-specimen> and <color-palette> for complete design system documentation pages.