Graph canvas

The token dependency graph of the playground’s Graph view (TICKET-078): one column per layer of the 3-layer model, Primitives · Brand · ScreenType, each in the mode the Graph switcher shows; every token a row under its group label; an arrow from each alias to the token it uses, so a chain reads right to left. The data is analyzeGraph from @dta/core (nodes, alias edges, cycles, dangling aliases, unused raw values) with each row resolved in the modes shown (resolve); the playground maps it, the component only draws. Positions come from layoutGraph (graph-layout.ts), pure geometry the stories and the playground share.

When to use

• To see how tokens depend on each other across layers, and where a chain breaks.
• On desktop. On phones the same data is the Graph list; the playground switches at the site’s 760 px break. No pinch-zoom.

Layers as columns, a token and its chain selected, a circular pair, a file finding

Light

Primitives

Mode 1 26 tokens

error · default mode name

Brand(Alias)

BrandA 11 tokens

ScreenType

Desktop 5 tokens

Colors.Foundation

Typography.FontFamily

Effects.opacity

Effects.blur

Dimensions.spacing

Typography.FontSize

Dimensions.radius

Colors.Brand

Colors.Surface

Colors.Text

Typography.Body

Effects.overlay

Effects.shadow

Spacing

Typography.Body

Typography.Heading

Radius

circularBlue.500#0057b8Blue.700#003f8aNavy.500#3d5a80Navy.700#2c4466Sky.500#3b8fd9Gray.100#f3f4f6Gray.500#6b7280Gray.900#111827White#ffffffSansInterSerifSource Serif 450508080 · unusedsm4 · unusedmd1214 · unused28416832sm14md16lg20xl28sm4md8pill999 · unusedPrimary#0057b8Primary Dark#003f8aAccent#3b8fd9Default#ffffffMutederrorDefault#111827MutederrorOn Primary#ffffffFamilyInterOpacity50Blur12Gap16Padding32Size16Size28Card8

alias → the token it usesselected chainerror dangling or circular aliaswarning (a config's rules)· unused raw value no alias uses

Graphite

Primitives

Mode 1 26 tokens

error · default mode name

Brand(Alias)

BrandA 11 tokens

ScreenType

Desktop 5 tokens

Colors.Foundation

Typography.FontFamily

Effects.opacity

Effects.blur

Dimensions.spacing

Typography.FontSize

Dimensions.radius

Colors.Brand

Colors.Surface

Colors.Text

Typography.Body

Effects.overlay

Effects.shadow

Spacing

Typography.Body

Typography.Heading

Radius

circularBlue.500#0057b8Blue.700#003f8aNavy.500#3d5a80Navy.700#2c4466Sky.500#3b8fd9Gray.100#f3f4f6Gray.500#6b7280Gray.900#111827White#ffffffSansInterSerifSource Serif 450508080 · unusedsm4 · unusedmd1214 · unused28416832sm14md16lg20xl28sm4md8pill999 · unusedPrimary#0057b8Primary Dark#003f8aAccent#3b8fd9Default#ffffffMutederrorDefault#111827MutederrorOn Primary#ffffffFamilyInterOpacity50Blur12Gap16Padding32Size16Size28Card8

alias → the token it usesselected chainerror dangling or circular aliaswarning (a config's rules)· unused raw value no alias uses

Story: /stories/graph-canvas/problems/

A dangling alias pointing at its missing target

Light

Primitives

Mode 1 26 tokens

error · default mode name

Brand(Alias)

BrandB 11 tokens

ScreenType

Desktop 5 tokens

Colors.Foundation

Typography.FontFamily

Effects.opacity

Effects.blur

Dimensions.spacing

Typography.FontSize

Dimensions.radius

Colors.Brand

Colors.Surface

Colors.Text

Typography.Body

Effects.overlay

Effects.shadow

Spacing

Typography.Body

Typography.Heading

Radius

Blue.500#0057b8Blue.700#003f8aNavy.500#3d5a80Navy.700#2c4466Sky.500#3b8fd9

Sky.550missing

Gray.100#f3f4f6Gray.500#6b7280Gray.900#111827White#ffffffSansInterSerifSource Serif 450508080 · unusedsm4 · unusedmd1214 · unused28416832sm14md16lg20xl28sm4md8pill999 · unusedPrimary#3d5a80Primary Dark#2c4466AccenterrorDefault#ffffffMuted#f3f4f6Default#111827Muted#6b7280On Primary#ffffffFamilySource Serif 4Opacity50Blur12Gap16Padding32Size16Size28Card8

Graphite

Primitives

Mode 1 26 tokens

error · default mode name

Brand(Alias)

BrandB 11 tokens

ScreenType

Desktop 5 tokens

Colors.Foundation

Typography.FontFamily

Effects.opacity

Effects.blur

Dimensions.spacing

Typography.FontSize

Dimensions.radius

Colors.Brand

Colors.Surface

Colors.Text

Typography.Body

Effects.overlay

Effects.shadow

Spacing

Typography.Body

Typography.Heading

Radius

Blue.500#0057b8Blue.700#003f8aNavy.500#3d5a80Navy.700#2c4466Sky.500#3b8fd9

Sky.550missing

Gray.100#f3f4f6Gray.500#6b7280Gray.900#111827White#ffffffSansInterSerifSource Serif 450508080 · unusedsm4 · unusedmd1214 · unused28416832sm14md16lg20xl28sm4md8pill999 · unusedPrimary#3d5a80Primary Dark#2c4466AccenterrorDefault#ffffffMuted#f3f4f6Default#111827Muted#6b7280On Primary#ffffffFamilySource Serif 4Opacity50Blur12Gap16Padding32Size16Size28Card8

Story: /stories/graph-canvas/dangling/

Guidelines

• Layers as columns, few crossings without a layout engine. A layer’s groups are ordered by the layers to its right that use them (colours, font families and effects for Brand first, then spacing, sizes and radius for ScreenType; groups nothing uses last), and every layer after the first starts level with the topmost group it points into, so the ScreenType column starts beside the spacing it uses and its arrows pass under the Brand column. Rows keep the order of the token files.
• Rows, not cards. A row is a 1 px ink outline (border-strong) on bg-surface, radius-sm: the leaf name, then the value with a swatch for colours, or · unused in fg-subtle for a raw value no alias uses (the engine’s orphans). Mono, the meta size. No shadows.
• Headers: the collection (mono kicker), the mode shown and its token count, over a 2 px ink rule. A finding about the layer’s file (Figma’s default mode name) sits on its header as a tinted button with marker and words, which opens the finding in the Lint view.
• Arrows: hairline curves in fg-subtle with a filled arrowhead on the target’s edge. An alias into its own column (a circle) arcs on the column’s right.
• Findings keep shape + word + colour (Status colours): an error row is tinted status-error-subtle inside a complete 2 px outline in status-error-marker, with the filled square and “error” (status-error-text) where the value was; a warning has the open ring and “warn”. A circular pair gets two error arcs and a “circular” chip; a dangling alias’s arrow is dashed and ends in a dashed “missing” row, built from the alias’s target name in the group whose names it shares (the engine reports it in danglingAliases, not as a node). Dangling and circular aliases are errors. Never signal: nothing in the graph is a change.
• Selection is blueprint: the selected row and every row on its alias chain on action-subtle inside a 2 px action-bg outline, their text in action-text; the chain’s arrows in action-bg at stroke-ink. A selected row with a finding keeps its marker and word (TICKET-121).
• Keyboard: one row is in the tab order (roving tabindex, the selected or last focused one). ↑ and ↓ move within a column; ← follows the alias to the token it uses (else the nearest row to the left); → goes back to a token that uses it (else the nearest row to the right); Home and End go to the column’s ends; Enter or Space selects (the playground opens the Detail panel). A row’s accessible name is the full token name and what it shows (Colors.Brand.Accent #3b8fd9), then what it uses and why it does not resolve.
• Size: the drawing has a fixed width (three 208 px columns with 46 px between them, 716 px), which fits beside the detail panel at 1280 px; a narrower box scrolls it inside itself, never the page. reveal scrolls the selected row into view after a selection made elsewhere (“Show in graph”, a brand switch).
• Legend under the drawing, as wide as the drawing: alias arrow, selected chain, error, warning (a config’s rules can produce warnings), unused.
• Motion: rows and arrows change their tint over motion.duration.fast when the selection moves; a hover tints at once (only a plain row, never a selection or a finding), so a passing pointer never leaves a transition cut short. A revealed row scrolls smoothly. Under reduced motion the highlight is there at once and the scroll jumps. See Motion.
• dta graph --format html keeps its own page for now; reusing this component there is a later, separate ticket (playground spec decision 8).

Tokens used

Read from the component’s source:

--action-bg--action-subtle--action-text--bg-subtle--bg-surface--border-default--border-strong--fg-default--fg-muted--fg-subtle--font-mono--font-sans--motion-duration-fast--motion-ease-standard--radius-full--radius-lg--radius-sm--space-1--space-2--space-3--space-4--space-6--status-error-marker--status-error-subtle--status-error-text--status-warning-marker--status-warning-subtle--status-warning-text--stroke-focus--stroke-hairline--stroke-ink--stroke-redline--type-body-size--type-body-sm-line-height--type-meta-letter-spacing--type-meta-line-height--type-meta-size--type-title-weight