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

# Settings Reference

> Complete reference for all Design Tokens Explorer settings.

All settings live under the `designTokensExplorer` namespace and can be set in workspace or user `settings.json`.

<ParamField path="designTokensExplorer.sources" type="array" default="[]">
  Array of token source objects. See [Token Sources](/docs/configuration/sources) for the full schema and examples.
</ParamField>

<ParamField path="designTokensExplorer.tokenClickAction" type="&#x22;insert&#x22; | &#x22;copy&#x22;" default="insert">
  Controls what happens when you click a token in the sidebar.

  | Value      | Behavior                                                     |
  | ---------- | ------------------------------------------------------------ |
  | `"insert"` | Insert the token at the cursor position in the active editor |
  | `"copy"`   | Copy the formatted token to the clipboard                    |

  <Note>
    When no editor is active or no file is open, the token is always copied to the clipboard regardless of this setting.
  </Note>

  You can also override the default action on a per-click basis by **Shift+clicking** a token to copy it even when the action is set to `insert`.
</ParamField>

<ParamField path="designTokensExplorer.cssInsertFormat" type="string" default="var(--{name})">
  Format string used when inserting a token into a CSS, SCSS, Less, or CSS-in-JS file. Use `{name}` as the placeholder for the token name.

  ```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
  "designTokensExplorer.cssInsertFormat": "var(--{name})"
  ```

  **Custom format examples:**

  ```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
  // PostCSS custom function
  "designTokensExplorer.cssInsertFormat": "token(--{name})"

  // Tailwind arbitrary value
  "designTokensExplorer.cssInsertFormat": "[var(--{name})]"

  // Sass map access
  "designTokensExplorer.cssInsertFormat": "map.get($tokens, '{name}')"
  ```

  The format must be under 200 characters. Formats that cannot be sanitized fall back to `var(--{name})`.
</ParamField>

<ParamField path="designTokensExplorer.showTokenValues" type="boolean" default="true">
  When `true`, the raw token value is displayed below the token name in the sidebar. Set to `false` to show only token
  names for a more compact view.
</ParamField>

<ParamField path="designTokensExplorer.rootFontSize" type="number" default="16">
  Root font size in pixels used to convert `rem` values to `px` in token previews (spacing bars, font size previews, etc.).

  ```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
  "designTokensExplorer.rootFontSize": 16
  ```

  If your project uses a non-standard root font size (e.g. `10px` with a `62.5%` base), update this value to get accurate visual previews.
</ParamField>

<ParamField path="designTokensExplorer.usageScanPath" type="string" default="**/*.css">
  Restricts the hardcoded values scan to a specific path, folder, or glob pattern relative to the workspace root. `node_modules` is always excluded regardless of this setting.

  **Examples:**

  ```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
  // Default — scan all CSS files in the workspace
  "designTokensExplorer.usageScanPath": "**/*.css"

  // Scan only the src folder
  "designTokensExplorer.usageScanPath": "src"

  // Scan a specific styles folder
  "designTokensExplorer.usageScanPath": "app/styles"

  // Scan a specific file
  "designTokensExplorer.usageScanPath": "src/styles/main.css"

  // Scan CSS and SCSS files
  "designTokensExplorer.usageScanPath": "./**/*.{css,scss}"
  ```

  The scan path is passed directly to `vscode.workspace.findFiles` as the include pattern. Within the matched files, only extensions supported by the scanner are processed: `.css`, `.scss`, `.less`, `.js`, `.ts`, `.jsx`, `.tsx`, `.vue`, `.astro`, `.svelte`, `.json`.
</ParamField>

<ParamField path="designTokensExplorer.scanExcludePattern" type="string" default="&#x22;{**/dist/**,**/build/**,**/.next/**,**/.nuxt/**,**/.git/**}&#x22;">
  Additional glob pattern(s) excluded from token usage scanning. Passed as the `exclude` argument to `vscode.workspace.findFiles`. `node_modules` is always excluded regardless of this setting.

  ```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
  "designTokensExplorer.scanExcludePattern": "{**/dist/**,**/build/**,**/.next/**,**/.nuxt/**,**/.git/**}"
  ```

  Use this to exclude additional output directories, generated files, or vendor folders that are not under `node_modules`:

  ```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
  // Exclude Storybook static output and a legacy vendor folder
  "designTokensExplorer.scanExcludePattern": "{**/storybook-static/**,**/vendor/**}"
  ```

  <Note>
    To exclude multiple patterns, wrap them in curly braces separated by commas — this is standard
    VS Code glob syntax. For example: `"{**/dist/**,**/out/**}"`.
  </Note>
</ParamField>

<ParamField path="designTokensExplorer.statusThresholdGood" type="number" default="20">
  Maximum number of active hardcoded matches still considered **Good adoption** in the Adoption Audit status.

  ```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
  "designTokensExplorer.statusThresholdGood": 20
  ```

  Set this lower for stricter quality gates, or higher for gradual migration in large legacy codebases.
</ParamField>

<ParamField path="designTokensExplorer.statusThresholdDiscrete" type="number" default="50">
  Maximum number of active hardcoded matches considered **Discrete adoption**. Above this value, the status becomes **Poor adoption**.

  ```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
  "designTokensExplorer.statusThresholdDiscrete": 50
  ```

  <Note>
    If you set `statusThresholdDiscrete` lower than `statusThresholdGood`, DTE normalizes values internally to avoid invalid status ranges.
  </Note>
</ParamField>

<ParamField path="designTokensExplorer.scrollToHardcodedOnHover" type="boolean" default="true">
  When `true`, hovering over a hardcoded value entry in the audit panel scrolls the editor to that line. This lets you
  quickly inspect the surrounding code context without clicking.
</ParamField>

<ParamField path="designTokensExplorer.openFileOnHover" type="boolean" default="false">
  When `true`, hovering over a hardcoded value in the audit panel opens and focuses the file in the editor automatically. The **Open** button is hidden when this is enabled.

  <Note>
    This setting takes precedence over `scrollToHardcodedOnHover`. When enabled, the file opens and
    the editor scrolls to the relevant line.
  </Note>
</ParamField>