Skip to main content

​
Overview

Design Tokens Explorer provides IntelliSense autocomplete for all loaded tokens in CSS-family files. As you type a var(-- expression, a list of matching tokens appears with their values shown inline — no need to switch to the sidebar.

​
Supported languages

Autocomplete is active in the following languages:
  • CSS
  • SCSS
  • Less
  • JavaScript / TypeScript with CSS-in-JS patterns
  • JSX / TSX
  • Vue (inside <style> blocks)
  • Svelte (inside <style> blocks)
  • Astro (inside <style> blocks)

​
Trigger characters

Autocomplete triggers on - and ( characters. The completion provider activates on three patterns:

​
1. var(-- with a partial name

color: var(--color-|
Suggests all tokens whose name matches the typed prefix. Each suggestion inserts the full var(--token-name) expression.

​
2. var( with nothing after

color: var(|
Suggests all loaded tokens. Each suggestion inserts --token-name) to complete the expression.

​
3. Standalone -- prefix

--color-|
Suggests all tokens matching the prefix. Each suggestion inserts the full var(--token-name) expression.

​
What shows in the completion list

Each completion item shows:
  • Token name as the primary label
  • Raw value as the detail (shown to the right in most editor themes)
  • Completion kind: Variable

​
Keeping suggestions fast

Suggestions are drawn from the in-memory token registry — no file I/O happens during completion. All loaded tokens are available immediately.

​
Loading tokens for autocomplete

Autocomplete only surfaces tokens that are already loaded. Make sure your sources are configured and the panel has loaded successfully. If tokens are missing from suggestions, run: 
Design Tokens: Refresh Sources
See Token Sources for configuration details.