Token Flow — VSCode Edition

Find, insert, swap and audit design tokens (SCSS · CSS · TS/JS) from inside VSCode — without ever leaving your editor.

Why?

Make using your tokens intuitive. Token Flow helps you find the right variable and keep your styles flawless without ever leaving your VSCode editor.

Supported formats:

SCSS variables ($color-primary-500)
CSS Custom Properties (--color-primary-500)
SCSS Maps (("color-primary-500": #5d3fd3))
TS/JS preset objects — '{path.to.token}'

🔎 Library — every token at a glance

A dedicated Token Flow entry in the activity bar opens a rich panel listing every indexed token, grouped by category. Inline color swatches, two-line name + resolved-value previews, variant badges, multi-term search ("informative content" finds --token-informative-highlight-content-hover), category + kind filter chips. Drag any row into the editor to insert the canonical var(--x) / $x / '{path}' form at the drop position.

⚡️ Smart swapping — `Alt+T`

Pick a sibling token of the same category — swap a var(--…) for another, or "tokenize" a hardcoded 14px literal in one keystroke. A custom webview picker (not the native QuickPick) renders real CSS color swatches, groups candidates by category, floats exact-value matches to the top, and pre-selects the pivot on open. Keyboard or mouse, your choice.

🛟 Smart refactoring — hardcoded value detection

Hardcoded value detection and replacement

Literals that already exist as tokens (#fff, 14px, 200ms, …) get a Hint-severity diagnostic with a lightbulb quick-fix that replaces them with the canonical reference. A dedicated Hardcoded panel follows the active editor and lists every match in the current file, with inline swatches, alternative-candidate cycling, jump-to-source and one-click replacement (workspace edit — undoable like any edit). Aware of transparent wrappers like rem-calc(14px).

📊 Health audit — Analyse dashboard

A full-tab Design System health report. Global score (A→F) on a circular gauge, five sub-axes (semantic coherence, usage coverage, duplication, hardcoded pressure, reference integrity), and accordion drilldowns for hardcoded clusters, broken refs, unused / duplicate / incoherent tokens, per-file coverage. Every row links straight to the source.

🧠 More inside

Hover info — popup with resolved value & per-mode variants (light / dark / breakpoints) of the token under the caret. Multi-theme aware: nested SCSS maps render with theme-grouped column headers.
Go to Token Declaration — Ctrl+Click / F12 / Peek on any var(--x), --x or $x reference, via VSCode's native Definition flow. Works with stylesheets and TS/JS preset paths.
Copy Token Value — Alt+V (or the editor right-click menu, or a click on the hover popup) on a token reference (var(--x), $x, '{a.b.c}', colors.X) opens a dropdown to copy its resolved value (the primitive at the end of the alias chain), its token name, or — for colours — the resolved colour as HEX / RGB / HSL / OKLCH. Rebind from VSCode's Keyboard Shortcuts (search tokenFlow.copyTokenValue); toggle via tokenFlow.copyValue.enabled.
Code completion — triggered after var(-- or $, sorted alphabetically, filtered by VSCode's fuzzy matcher.
Named scopes — multi-UI projects (mobile / desktop / preset / common) supported via named scopes with their own root path, source paths, whitelists and excludes. A master-detail Settings webview ships with native folder/file pickers and saves directly to workspace settings — no JSON hand-editing needed.
External variable prefixes — declare the prefixes your project gets from elsewhere (--p- PrimeNG, --ion- Ionic, --mat- / --mdc- Material, --bs- Bootstrap) or exposes on purpose as a component customisation API (--ui-slider-). References matching a prefix stay out of the broken-reference list without being mistaken for design tokens. Set project-wide via tokenFlow.externalPrefixes, or per scope for a component's own API — see Configuration.

Configuration

Everything is editable from the Settings webview (Token Flow: Configure Scopes). The underlying settings, for reference:

Setting	What it does
`tokenFlow.scopes`	Named scopes — `rootPath`, `sourcePaths`, `whitelistPaths`, `excludedPaths`, `externalPrefixes`.
`tokenFlow.sourcePaths`	Back-compat fallback used when `scopes` is empty.
`tokenFlow.externalPrefixes`	Project-wide external variable prefixes (see below).
`tokenFlow.hover.enabled`	Hover popup on token references.
`tokenFlow.copyValue.enabled`	`Alt+V` Copy Token Value and its surfaces.
`tokenFlow.alternatives.pickerStyle`	`Alt+T` picker — side panel or native popup.

External variable prefixes

A reference whose name starts with one of these prefixes is treated as valid but external: it counts as tokenised (it is a variable, not a hardcoded value), it is never reported as a broken reference, and it never marks one of your tokens as used. Write the prefix with its leading dashes — the comparison runs on the extracted name, so --ui-, not ui-.

{
  // Project-wide — framework-injected variables.
  "tokenFlow.externalPrefixes": ["--p-", "--mat-"],

  "tokenFlow.scopes": [
    {
      "name": "ui",
      "rootPath": "libs/ui",
      "sourcePaths": ["libs/ui/src/styles/tokens"],
      // Scope-local — this library's own customisation API.
      "externalPrefixes": ["--ui-slider-", "--ui-toggle-"]
    }
  ]
}

The effective set for an analysis run is the project-wide list unioned with every active scope's own list.

Prefer the narrowest prefix you can. --ui- silences every --ui-* reference, including a genuine typo on an existing --ui-… token; --ui-slider- only covers that one component's API. Go component-by-component while the count stays reasonable, and fall back to the broad prefix knowingly.

The typical case: a component that deliberately exposes an undeclared variable as its extension point.

// ui-slider.scss — consumers override these via ::ng-deep
height: var(--ui-slider-handle-size, #{$handle-size});
width:  var(--ui-slider-thickness, #{$track-thickness});

Nothing declares --ui-slider-handle-size, and nothing should — it's an API, not a bug. Adding --ui-slider- to the scope's externalPrefixes tells Analyse exactly that.

Use cases

Migration — refactor a hardcoded codebase to design tokens, file by file.
Multi-brand audit — keep a multi-brand or light/dark Design System aligned and free of dead tokens.
Theme debugging — see how a token resolves in Dark vs Light mode via the hover popup.
Preset iteration — work on a PrimeUIX / Style-Dictionary preset with instant feedback.

About

Built by Robin Lopez — designer & front-end engineer.

robinlopez.fr · LinkedIn · Bluesky · Bento

If Token Flow saves you time, you can support its development:

Token Flow - Design System

Robin Lopez