Overview blocks

Survey many tokens at once. The first two work across every $type in the graph; the rest scope to one DTCG type and render a type-specific visual.

Most blocks in this group take:

• filter?: string: path glob (see matchPath in the /match-path subpath).
• sortBy?: 'path' | 'value' | 'none': default 'path' (exceptions noted per block).
• sortDir?: 'asc' | 'desc': default 'asc'.
• caption?: string: override the default summary caption.

Indicators

TokenNavigator, TokenTable, and ColorTable share a per-row indicator strip, shown between the type pill and the preview when a row has something to flag:

• a forward alias chain (→ target, capped past two hops with the full chain on the accessible label);
• a reverse ← N count of tokens that reference the row;
• an axis-variance badge when the resolved value differs across the project’s axes (naming the axis, or a count when several);
• an out-of-gamut marker on colors outside sRGB for the active format;
• a deprecation badge, with the row’s name struck through, for tokens carrying DTCG $deprecated;
• an opt-in ⓘ glyph carrying the token’s $description;
• an opt-in ⊞ N count of the parts a composite bundles (object fields for typography / border / transition, stops or layers for gradient / shadow).

Each indicator renders only when its data is present; composes shows only on composite-typed rows. Alias references are navigable: in TokenNavigator, clicking a chain node or a single reverse referrer moves the tree to that token (several referrers open a chooser); in TokenTable and ColorTable, which have no tree, it opens the target token’s detail or row. The chain reflects the active theme, so a token that aliases different palette entries per axis context shows the path true in the current context.

Configure the strip with the indicators? prop (boolean | Partial<Record<IndicatorName, boolean>>). Omit for the defaults (alias, variance, gamut, deprecation on; description, composes off); false hides the strip, true enables all, and an object overrides individual keys ({ composes: true }, { deprecation: false }). A project-wide baseline is set via config.indicators; the per-block prop overrides it.

ColorTable’s strip omits gamut and composes: out-of-gamut renders in its Value cell instead, so its defaults are alias, variance, deprecation on and description off, and toggling gamut there has no effect.

Across types

TokenNavigator

<TokenNavigator root="color" />

Expandable tree of the token graph. Each interior group shows its child count; each leaf shows its $type pill, an inline preview (color swatch, dimension bar, shadow / border / motion sample, or a formatted value), and the per-row indicator strip. A fuzzy-search input at the top filters leaves by path (case-insensitive, out-of-order terms, single-character typo tolerance): matching leaves survive and the groups on the way to them auto-expand. Clicking a leaf opens a slide-over with the full <TokenDetail>; pass onSelect to own the click follow-up instead.

Props:

• root?: string: mount at this subtree (e.g. "color", "typography"). Omit to show everything.
• type?: string | readonly string[]: restrict to one DTCG $type (type="color") or a small-multiples set (type={['duration', 'cubicBezier', 'transition']}). Composes with root; both constraints must hold.
• initiallyExpanded?: number: depth open on first render. 0 all collapsed, 1 top-level groups open (default), 2 one deeper, etc.
• searchable?: boolean: render a runtime search input above the tree. Defaults to true. Pass false to hide the input (the root / type props still apply at authoring time).
• onSelect?(path: string): void: receives a leaf’s full dot-path on click; suppresses the built-in overlay.
• indicators?: configure the per-row strip; see Indicators.
• colorFormat?: ColorFormat: overrides the ambient useColorFormat() chain for every color value in the tree, including the row-detail TokenDetail slide-over; see useColorFormat.

TokenTable

<TokenTable type="color" />

Compact table: Path, an indicators column carrying the indicator strip, and Value (with inline type pill + color swatch). A fuzzy-search input at the top narrows rows by path, type, or value (case-insensitive, out-of-order terms, single-character typo tolerance). Each value cell has a hover-revealed copy-to-clipboard button. Clicking a row opens the same slide-over <TokenDetail> the tree uses; pass onSelect to own the follow-up. Columns follow content with per-column min-width floors; the indicators column does not participate in sorting.

Props:

• filter?: string: path glob.
• type?: string: DTCG $type filter ("color", "dimension", …).
• caption?: string: override the caption.
• sortBy?: 'path' | 'value' | 'none': default 'path'.
• sortDir?: 'asc' | 'desc': default 'asc'.
• searchable?: boolean: render a runtime search input above the table. Defaults to true.
• onSelect?(path: string): void: suppress the built-in drawer.
• indicators?: configure the per-row strip; see Indicators.
• colorFormat?: ColorFormat: overrides the ambient useColorFormat() chain for every value in the table, including the row-detail TokenDetail slide-over; see useColorFormat.

Per-type

Every block in this group scopes to one DTCG $type, filters / sorts, and renders a type-specific visual. All accept filter?: string, sortBy?, sortDir?, and caption?: string. The color-displaying blocks in this group (ColorPalette, GradientPalette, BorderPreview, ShadowPreview) also accept colorFormat?: ColorFormat, overriding the ambient useColorFormat() chain for that block’s values; see useColorFormat.

ColorPalette

<ColorPalette filter="color.palette.**" />

Swatch grid grouped by dot-path prefix. groupBy is auto-derived from the filter’s fixed-prefix depth but can be overridden. Default sort is 'path'; 'value' orders colors perceptually via oklch L → C → H so ramps read light → dark and warm → cool.

ColorTable

<ColorTable filter="color.**" />

Tabular, color-only companion to TokenTable. One row per $type: color token with swatch, name, value (in the active color format: see useColorFormat), CSS var, and an indicators column carrying the indicator strip. Each value cell has a hover-revealed copy-to-clipboard button; fuzzy search runs across path + value. Clicking a row expands it inline: the detail panel surfaces $description, the alias chain, and (for grouped variants) a sub-table comparing every variant’s HEX / HSL / OKLCH at once. The collapsed row shows only the active format.

Variant grouping: pass a variants map to collapse sibling tokens that share a base path into a single row with a pill selector. Clicking a pill swaps the displayed values to that variant:

<ColorTable
  filter="color.bg.**"
  variants={{ hover: 'hover', disabled: 'disabled' }}
/>

Given tokens like color.bg.hi / color.bg.hi.hover / color.bg.hi.disabled, the table emits one row for color.bg.hi with three pills (base, hover, disabled). The same map also handles Backmarket-style hyphen tails: color.bg.hi-h with variants={{ hover: 'h' }} groups identically. Suffix matching is longest-wins and requires a real segment boundary, so variants={{ zero: '0' }} will not spuriously hit neutral-900.

Props:

• filter?: string: path glob. Defaults to every $type: color token.
• caption?: string: override the caption.
• sortBy?: 'path' | 'value' | 'none': default 'path'. 'value' orders perceptually (oklch L → C → H).
• sortDir?: 'asc' | 'desc': default 'asc'.
• searchable?: boolean: render a fuzzy-search input above the table. Defaults to true.
• onSelect?(path: string): void: replaces the expand-in-place default with a consumer-driven callback, invoked with the currently-selected variant’s path.
• variants?: Record<string, string>: label-to-suffix map for grouping. Accepts both DTCG dot-segment (hi.disabled) and Backmarket hyphen-tail (hi-d) conventions. Single-member groups render as plain rows; empty / omitted map disables grouping entirely.
• indicators?: configure the per-row strip; see Indicators. ColorTable’s strip omits gamut and composes.
• colorFormat?: ColorFormat: overrides the ambient useColorFormat() chain for this table’s values; see useColorFormat.

TypographyScale

<TypographyScale />

One sample line per typography composite, rendered with the token’s own fontFamily / fontSize / fontWeight / lineHeight / letterSpacing.

Props:

• sample?: string: override the sample text.

DimensionScale

<DimensionScale visual="length" />

Width-driven bar (default), radius-sample square, or size-sample square per dimension token. Defaults to sortBy: 'value', ordered numerically by the rendered pixel size.

Props:

• visual?: 'length' | 'radius' | 'size': visualization mode (default 'length').

FontFamilyPreview

<FontFamilyPreview />

Pangram rendered per fontFamily primitive.

Props:

• sample?: string: override the sample text.

FontWeightScale

<FontWeightScale />

Same sample text rendered at each fontWeight primitive. Defaults to sortBy: 'value', ordered 100 → 900.

OpacityScale

<OpacityScale filter="number.opacity.**" />

One card per opacity token: the sample colour rendered at that opacity over a checkerboard backdrop, so the transparency reads visually. Only $type: 'number' (or 'opacity') tokens whose $value is a finite number in [0, 1] are picked up; non-opacity number siblings (line-height, z-index) fall out naturally.

Props:

• filter?: string: optional path glob. With no filter, narrowing comes from the $type check plus the 0–1 range, so common layouts (number.opacity.*, opacity.*) are picked up without configuration.
• type?: 'number' | 'opacity': default 'number'.
• sampleColor?: string: the colour the sample layer uses. Default 'color.accent.bg'.

BorderPreview

<BorderPreview />

One framed <BorderSample> per border composite token.

ShadowPreview

<ShadowPreview />

One <ShadowSample> surface per shadow composite token.

MotionPreview

<MotionPreview />

One animated <MotionSample> per transition / duration / cubicBezier token. Respects prefers-reduced-motion.

StrokeStylePreview

<StrokeStylePreview />

Border rendered per strokeStyle primitive. Supports string forms (solid, dashed, dotted, double) natively; object forms (dashArray / lineCap) fall back to a textual summary.

GradientPalette

<GradientPalette />

Wide sample per gradient token (linear, left → right by default) with a stop list. DTCG gradients are stop arrays; the gradient function is a rendering choice the consumer makes.