DTCG Autocomplete

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.json files to automatically exclude non-default theme variants (e.g. dark mode overrides) from the index

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

DTCG: Reload Token Index — manually rebuild the token index from the command palette

CSS, SCSS, Less, HTML, JavaScript, TypeScript, Svelte, Vue

MIT