> ## Documentation Index
> Fetch the complete documentation index at: https://dtexplorer.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Adoption Audit

> Find hardcoded values in your codebase that should be replaced with design tokens — and fix them in one click.

## 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 active (non-ignored) hardcoded matches found:

| Status       | Threshold | Meaning                                    |
| ------------ | --------- | ------------------------------------------ |
| **Optimal**  | 0         | No hardcoded values — full token adoption  |
| **Good**     | 1–20      | A few remaining occurrences                |
| **Discrete** | 21–50     | Moderate usage — worth addressing          |
| **Bad**      | 51+       | High hardcoded value count — action needed |

The default thresholds are configurable via [`statusThresholdGood`](/docs/configuration/settings#designtokensexplorer-statusthresholdgood) and [`statusThresholdDiscrete`](/docs/configuration/settings#designtokensexplorer-statusthresholddiscrete).

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`](/docs/configuration/settings#designtokensexplorer-usagescanpath) to find files (default: `**/*.css`)
2. Applies the exclusion pattern in [`scanExcludePattern`](/docs/configuration/settings#designtokensexplorer-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](/docs/features/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`](/docs/configuration/settings#designtokensexplorer-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.

When all entries in a file are ignored, that file section auto-collapses in the panel. If you use **Unignore all**, the section auto-expands again.

<Note>
  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.
</Note>

## 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:

```css theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
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`](/docs/configuration/settings#designtokensexplorer-usagescanpath) to broaden or narrow the scope:

```json settings.json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
// 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`](/docs/configuration/settings#designtokensexplorer-scanexcludepattern):

```json settings.json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
"designTokensExplorer.scanExcludePattern": "{**/storybook-static/**,**/vendor/**}"
```

## Hover behaviors

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

* [`scrollToHardcodedOnHover`](/docs/configuration/settings#designtokensexplorer-scrolltohardcodedonhover) (default `true`) — scrolls the editor to the line in the background
* [`openFileOnHover`](/docs/configuration/settings#designtokensexplorer-openfileonhover) (default `false`) — opens and focuses the file when hovering