Skip to main content

​
Overview

The DTE Hardcoded Values panel scans your workspace for literal values that match any loaded token value. It helps you migrate an existing codebase toward full design token adoption by surfacing every place a hardcoded value is used when a token already exists. Open the panel from the bottom panel bar or via the Command Palette: 
Design Tokens: Open Hardcoded Values Audit

​
Usage status

The top of the panel shows a status badge based on the total number of hardcoded matches found:
StatusThresholdMeaning
Optimal0No hardcoded values — full token adoption
Good1–20A few remaining occurrences
Discrete21–50Moderate usage — worth addressing
Bad51+High hardcoded value count — action needed
The status badge also appears as a notification icon in the sidebar activity bar and updates automatically after each scan.

​
How scanning works

When a scan runs, DTE:
  1. Uses the glob pattern in usageScanPath to find files (default: **/*.css)
  2. Applies the exclusion pattern in scanExcludePattern (default: {**/dist/**,**/build/**,**/.next/**,**/.nuxt/**,**/.git/**}). node_modules is always excluded.
  3. Filters the matched files to supported extensions: .css, .scss, .less, .js, .ts, .jsx, .tsx, .vue, .astro, .svelte, .json
  4. Reads up to 6 files in parallel
  5. For each file, searches for every token value as a literal substring (case-insensitive)
  6. Records: file path, line number, column, surrounding line text, matched tokens
Scans run automatically on activation, on token source changes, and when configuration changes. You can also trigger a manual scan: 
Design Tokens: Re-scan Token Usage

​
Hardcoded value entries

Each entry in the list shows:
  • File path and line number
  • The hardcoded value that was found
  • Matching tokens — the token(s) whose value matches the hardcoded literal
  • Line preview — the surrounding code for context
  • Actions: Replace, Open, Ignore

​
Replace

Clicking Replace substitutes the hardcoded value with the formatted token at that location. The replacement uses the same language-aware formatting as Token Insertion — so in a CSS file it inserts var(--token-name), in a JS file it inserts 'token-name', etc. The file is saved automatically after replacement.

​
Open

Clicking Open (or hovering when openFileOnHover is enabled) opens the file in the editor and scrolls to the relevant line.

​
Ignore

Clicking Ignore marks that specific occurrence as intentionally hardcoded. It is removed from the list and will not reappear in future scans. Ignored entries are persisted in .vscode/dte-ignored.json in your workspace. To un-ignore an entry, click Unignore — the entry reappears in subsequent scans.
The .vscode/dte-ignored.json file is workspace-local. You can commit it to share ignore decisions across your team, or add it to .gitignore to keep it local.

​
Semantic suggestions

In addition to exact value matches, DTE also shows semantic suggestions — cases where a hardcoded value is likely a token based on the CSS property name, even if the exact value isn’t in your token set. For example, if you have a token --color-primary: #7c3aed and a line: 
color: #7c3aed;
This is an exact match. But semantic matching also helps when a property name like background-color is paired with any value resembling a color, prompting a suggestion to check if a token applies. Semantic suggestions appear with a different visual indicator and are scored by relevance — only the most likely candidates are shown (up to 5 per occurrence).

​
Restricting the scan scope

By default, the audit scans **/*.css (all CSS files in the workspace). Use usageScanPath to broaden or narrow the scope:
settings.json
// Scan CSS and SCSS files
"designTokensExplorer.usageScanPath": "./**/*.{css,scss}"

// Scan only the src directory (all supported file types within it)
"designTokensExplorer.usageScanPath": "src"

// Scan a specific styles folder
"designTokensExplorer.usageScanPath": "app/styles"
To exclude additional directories (e.g. generated files, storybook output), use scanExcludePattern:
settings.json
"designTokensExplorer.scanExcludePattern": "{**/storybook-static/**,**/vendor/**}"

​
Hover behaviors

Two settings control what happens when you hover over an entry in the audit list: