Inspector blocks
Single-token deep-dive. <TokenDetail> is the composition; each subcomponent below is also exported and takes the same path: string prop, so MDX authors can embed just the piece they need.
TokenDetail
Section titled “TokenDetail”<TokenDetail path="color.accent.bg" />Full deep-dive: header + composite preview + composite breakdown + alias chain + aliased-by tree + per-axis variance + consumer output + usage snippet. A token carrying DTCG $deprecated shows a deprecation notice below the header, with the message when $deprecated is a string.
Props: path: string, heading?: string (defaults to path), colorFormat?: ColorFormat (overrides the ambient useColorFormat() chain for this block and its composed CompositeBreakdown / AxisVariance sub-parts; see useColorFormat).
TokenHeader
Section titled “TokenHeader”<TokenHeader path="color.accent.bg" />Heading + $type pill + cssVar reference + description. Renders a missing-token empty state when path isn’t in the active theme.
CompositePreview
Section titled “CompositePreview”<CompositePreview path="typography.body" />Type-dispatched live preview of the token’s resolved value (typography sample, shadow swatch, gradient strip, animating ball for motion, etc.).
CompositeBreakdown
Section titled “CompositeBreakdown”<CompositeBreakdown path="typography.body" />Labelled sub-value grid for composite types (typography, border, transition, shadow, gradient). Renders nothing for primitives.
Also takes colorFormat?: ColorFormat, overriding the ambient useColorFormat() chain for this block’s color sub-values.
AliasChain
Section titled “AliasChain”<AliasChain path="color.accent.bg" />Forward alias chain (color.accent.bg → color.palette.blue.700). Renders nothing for non-aliases.
AliasedBy
Section titled “AliasedBy”<AliasedBy path="color.palette.blue.500" />Backward alias tree: every token that transitively aliases this one. Truncates at depth 6.
AxisVariance
Section titled “AxisVariance”<AxisVariance path="color.accent.bg" />Per-axis value table. Collapses to one row when the value is constant, a list for one varying axis, or a matrix for two axes (extras pinned to the active selection).
Also takes colorFormat?: ColorFormat, overriding the ambient useColorFormat() chain for color-valued tokens.
TokenUsageSnippet
Section titled “TokenUsageSnippet”<TokenUsageSnippet path="color.accent.bg" />Copy-ready color: var(--…); reference snippet.
ConsumerOutput
Section titled “ConsumerOutput”<ConsumerOutput path="color.accent.bg" />Summary rows for the token’s Path and CSS var with copy-to-clipboard on each. Shows the active axis tuple above the rows when more than one axis is in play.
When the project’s Terrazzo build loads additional plugins (@terrazzo/plugin-swift, -android, -sass, -js, …) alongside the default plugin-css (wired via config.terrazzoPlugins and named in config.listingOptions.platforms), one extra row appears per platform, carrying that plugin’s authoritative identifier for the token (Color.accentBg, @color/accent_bg, $accent-bg, …). The names shown are whatever your configured plugins emit, so pass the same options your production build uses to keep them in lockstep. See Aligning with your token build for the setup pattern.