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.

<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.

<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.

<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>

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.