CSS variable autocomplete and hover documentation for design token files following the DTCG format.
Reads raw DTCG JSON token files and provides completions for the CSS custom properties generated by Sugarcube.
Features
- Autocomplete — type
var(--in CSS, SCSS, Less, HTML, JS, TS, Svelte, or Vue to get completions for all tokens in your design system - Color swatches — color tokens show an inline color preview
- Hover docs — hover over any CSS variable to see the resolved value, full alias chain, and description
- Alias resolution — follows alias chains to their final value (up to 10 hops)
- Live index — token files are watched and the index rebuilds automatically on save
- Theme variant exclusion — reads
*.resolver.jsonfiles to automatically exclude non-default theme variants (e.g. dark mode overrides) from the index
Settings
| Setting | Default | Description |
|---|---|---|
dtcg-autocomplete.tokenGlob |
**/tokens/**/*.json |
Glob pattern to find DTCG token files |
dtcg-autocomplete.excludeGlob |
(empty) | Glob pattern to manually exclude files from the index |
dtcg-autocomplete.resolverGlob |
**/*.resolver.json |
Glob pattern to find DTCG resolver files for theme variant detection |
Commands
- DTCG: Reload Token Index — manually rebuild the token index from the command palette
Supported file types
CSS, SCSS, Less, HTML, JavaScript, TypeScript, Svelte, Vue
License
MIT