# Settings Reference
Source: https://dtexplorer.io/docs/configuration/settings

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 type="array">
  Array of token source objects. See [Token Sources](/docs/configuration/sources) for the full schema and examples.
</ParamField>

<ParamField type="&#x22;insert&#x22; | &#x22;copy&#x22;">
  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 type="string">
  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 type="boolean">
  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 type="number">
  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 type="string">
  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 type="string">
  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 type="number">
  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 type="number">
  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 type="boolean">
  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 type="boolean">
  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>


# Token Sources
Source: https://dtexplorer.io/docs/configuration/sources

Configure where Design Tokens Explorer loads your tokens from — local files, remote URLs, and multiple sources.

## The `sources` setting

`designTokensExplorer.sources` is an array of source objects. Each source loads tokens from a local file path or remote URL and appears as a separate panel in the sidebar.

```json settings.json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
"designTokensExplorer.sources": [
  {
    "name": "Brand Tokens",
    "path": "./tokens/brand.css",
    "groups": [
      { "name": "color", "type": "color" },
      { "name": "radius", "type": "radius" },
      { "name": "space", "type": "size" }
    ]
  }
]
```

## Source properties

| Property | Type     | Required | Description                                                |
| -------- | -------- | -------- | ---------------------------------------------------------- |
| `name`   | `string` | Yes      | Display name shown in the sidebar panel header             |
| `path`   | `string` | Yes      | Local path (relative to workspace root) or HTTPS URL       |
| `groups` | `array`  | No       | List of token groups with optional preview type assignment |

## Groups

Groups control how tokens are organized in the sidebar and which visual preview renderer is applied. Each group matches tokens by name prefix.

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
"groups": [
  { "name": "color", "type": "color" },
  { "name": "space", "type": "size" },
  { "name": "radius", "type": "radius" }
]
```

A token is assigned to the group whose `name` matches the **beginning** of the token name. The `type` then controls the preview renderer shown next to the value.

<Warning>
  The group `name` must match the exact prefix used in your token names. If your tokens are named
  `brandColor-500`, `brandColor-400`, etc., the group name must be `brandColor` — not `color`.

  ```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
  // tokens: brandColor-500, brandColor-400, brandRadius-md
  "groups": [
    { "name": "brandColor", "type": "color" },
    { "name": "brandRadius", "type": "radius" }
  ]
  ```

  A mismatch means those tokens won't be grouped and will fall into the **Other** category.
</Warning>

### Group type reference

| Type          | Preview rendered                    | Example values                                       |
| ------------- | ----------------------------------- | ---------------------------------------------------- |
| `color`       | Color swatch                        | `#7C3AED`, `rgb(124, 58, 237)`, `hsl(263, 70%, 58%)` |
| `size`        | Visual width bar (rem→px converted) | `1rem`, `16px`, `0.5rem`                             |
| `radius`      | Rounded corner demo                 | `0.5rem`, `4px`, `50%`                               |
| `font-size`   | Scaled text sample                  | `0.875rem`, `1.25rem`                                |
| `font-weight` | Weight demo text                    | `400`, `700`, `bold`                                 |
| `line-height` | Multi-line spacing demo             | `1.5`, `1.75`, `2`                                   |
| `shadow`      | Shadowed element                    | `0 2px 4px rgba(0,0,0,0.1)`                          |
| `easing`      | SVG cubic-bezier curve              | `cubic-bezier(0.4, 0, 0.2, 1)`                       |
| `time`        | Duration text                       | `150ms`, `0.3s`                                      |
| `filter`      | No preview                          | `blur(4px)`                                          |

Tokens that don't match any group are placed in an **Other** group without a preview.

<Tip>
  The `type` field is optional. If omitted, DTE tries to infer the type from the group name (e.g. a group named `color`
  is treated as type `color`). Explicit `type` values are recommended for reliable previews.
</Tip>

## Supported file formats

### CSS custom properties

The file must declare tokens inside a `:root {}`, `:where(html) {}`, or `@theme {}` block:

```css tokens/brand.css theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
:root {
  --color-primary: #7c3aed;
  --color-primary-light: #a78bfa;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
}
```

Token names are extracted without the `--` prefix (`color-primary`, `space-1`, etc.).

### SCSS

`.scss` files are loaded with the same parser as CSS. The file must declare tokens as CSS custom properties inside a `:root {}`, `:where(html) {}`, or `@theme {}` block. SCSS line comments (`//`) are supported inside those blocks. SCSS-specific syntax outside of custom property declarations is ignored.

```scss tokens/brand.scss theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
:root {
  // Colors
  --color-primary: #7c3aed;
  --color-primary-light: #a78bfa;

  // Spacing
  --space-1: 0.25rem;
  --space-2: 0.5rem;
}
```

<Tip>
  Use SCSS files when your token file already lives in a `.scss` context or you prefer SCSS-style (`//`) comments. The
  parsed output is identical to a CSS file with the same custom properties.
</Tip>

### JSON

Flat or nested JSON objects are both supported. Nested keys are joined with `-`:

```json tokens/tokens.json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{
  "color": {
    "primary": "#7C3AED",
    "neutral": {
      "100": "#f5f5f5",
      "900": "#171717"
    }
  },
  "space": {
    "1": "0.25rem",
    "2": "0.5rem"
  }
}
```

This produces tokens: `color-primary`, `color-neutral-100`, `color-neutral-900`, `space-1`, `space-2`.

Nesting depth is limited to 20 levels.

### JavaScript / TypeScript (local only)

String and number exports are parsed via regex — no code is executed:

```ts tokens/tokens.ts theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
export const colorPrimary = '#7C3AED';
export const spaceSm = '0.5rem';
export const fontWeightBold = 700;
```

<Warning>
  Remote `.js` / `.ts` files are not supported for security reasons. JS/TS loading only works for local files.
</Warning>

## Remote sources

Any `path` starting with `https://` is fetched as a remote source. The format is inferred from the file extension in the URL.

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{
  "name": "Figma Tokens",
  "path": "https://tokens.example.com/tokens.json"
}
```

**Remote source constraints:**

* Timeout: 10 seconds
* Maximum response size: 2 MB
* Private IPs, localhost, and loopback addresses are blocked (SSRF protection)
* `.js` / `.ts` remote sources are not supported

Remote sources are fetched once on activation and re-fetched when you run **Refresh Sources**. They are not watched for changes automatically.

## File watching

Local sources are watched for changes. When the file is saved, tokens are automatically reloaded after a 400 ms debounce and the sidebar refreshes. The usage audit also re-runs in the background.

## Multiple sources

You can configure any number of sources. Each appears as a separate, switchable panel in the sidebar. See [Multiple Sources](/docs/guides/multiple-sources) for practical examples.


# Adoption Audit
Source: https://dtexplorer.io/docs/features/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


# Autocomplete
Source: https://dtexplorer.io/docs/features/autocomplete

Get design token autocomplete suggestions as you type in CSS, SCSS, Less, and CSS-in-JS files.

## Overview

Design Tokens Explorer provides IntelliSense autocomplete for all loaded tokens in CSS-family files. As you type a `var(--` expression, a list of matching tokens appears with their values shown inline — no need to switch to the sidebar.

## Supported languages

Autocomplete is active in the following languages:

* CSS
* SCSS
* Less
* JavaScript / TypeScript with CSS-in-JS patterns
* JSX / TSX
* Vue (inside `<style>` blocks)
* Svelte (inside `<style>` blocks)
* Astro (inside `<style>` blocks)

## Trigger characters

Autocomplete triggers on `-` and `(` characters. The completion provider activates on three patterns:

### 1. `var(--` with a partial name

```css theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
color: var(--color-|
```

Suggests all tokens whose name matches the typed prefix. Each suggestion inserts the full `var(--token-name)` expression.

### 2. `var(` with nothing after

```css theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
color: var(|
```

Suggests all loaded tokens. Each suggestion inserts `--token-name)` to complete the expression.

### 3. Standalone `--` prefix

```css theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
--color-|
```

Suggests all tokens matching the prefix. Each suggestion inserts the full `var(--token-name)` expression.

## What shows in the completion list

Each completion item shows:

* **Token name** as the primary label
* **Raw value** as the detail (shown to the right in most editor themes)
* Completion kind: `Variable`

## Keeping suggestions fast

Suggestions are drawn from the in-memory token registry — no file I/O happens during completion. All loaded tokens are available immediately.

## Loading tokens for autocomplete

Autocomplete only surfaces tokens that are already loaded. Make sure your sources are configured and the panel has loaded successfully. If tokens are missing from suggestions, run:

```
Design Tokens: Refresh Sources
```

See [Token Sources](/docs/configuration/sources) for configuration details.


# Token Insertion
Source: https://dtexplorer.io/docs/features/token-insertion

Insert design tokens at the cursor with language-aware formatting across CSS, JS, TS, JSON, Vue, Svelte, Astro, and more.

## How insertion works

When you click a token in the sidebar, Design Tokens Explorer inserts it at the cursor position in the active editor. The inserted text is automatically formatted based on the **language of the file** and the **context around the cursor**.

If no editor is active, the formatted value is copied to the clipboard instead.

## Language-aware formatting

The extension detects the active file's language ID and formats the token accordingly:

| Context                                  | Inserted value      | Example                |
| ---------------------------------------- | ------------------- | ---------------------- |
| CSS, SCSS, Less                          | `var(--token-name)` | `var(--color-primary)` |
| CSS-in-JS (JSX, TSX, Vue, Svelte, Astro) | `var(--token-name)` | `var(--color-primary)` |
| JavaScript, TypeScript                   | `'token-name'`      | `'color-primary'`      |
| JSON / JSONC                             | `"token-name"`      | `"color-primary"`      |
| Other                                    | raw token name      | `color-primary`        |

### Cursor context detection

The formatter also inspects the characters around the cursor to avoid double-quoting:

* If the cursor is already **inside a string** in JS/TS, the token name is inserted as a raw value (no quotes added).
* If the cursor is already **inside a `var(` expression** in CSS, only the token name with `--` is inserted.

## Custom CSS insert format

The default CSS insertion format is `var(--{name})`. You can override this with the [`cssInsertFormat`](/docs/configuration/settings#designtokensexplorer-cssinsertformat) setting:

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

Use `{name}` as the placeholder. The format applies to all CSS-family languages and CSS-in-JS contexts.

**Examples for custom setups:**

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

// Sass with variable forwarding
"designTokensExplorer.cssInsertFormat": "$token-{name}"
```

## Click behavior

By default, clicking a token **inserts** it at the cursor. You can change this to always copy instead:

```json settings.json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
"designTokensExplorer.tokenClickAction": "copy"
```

**Shift+click** always copies to clipboard, regardless of the `tokenClickAction` setting. This lets you grab a token value without disturbing the cursor position.

## Command palette

You can also invoke insertion via the Command Palette:

* **Design Tokens: Search** (`Ctrl+Shift+P` → `Design Tokens: Search`) — opens a QuickPick search over all loaded tokens. Selecting an entry inserts or copies it using the same formatting logic.

## Inserting in different file types

### CSS / SCSS / Less

In stylesheet files, tokens are inserted as `var(--token-name)` (or your custom format):

```css theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
.button {
  background-color: var(--color-primary); /* ← inserted */
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
}
```

### JavaScript / TypeScript

In script files, tokens are inserted as quoted strings:

```ts theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
const styles = {
  color: 'color-primary', // ← inserted
  padding: 'space-3',
};
```

If the cursor is inside an existing string, the token name is inserted without quotes:

```ts theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
const color = `var(--color-primary)`; // cursor inside template literal → no extra quotes
```

### JSX / TSX inline styles

CSS-in-JS contexts (JSX/TSX with inline `style` props, Vue `<style>`, Svelte `<style>`, Astro `<style>`) are treated as CSS and receive `var(--token-name)`:

```tsx theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
<div style={{ color: 'var(--color-primary)' }} />
```

### JSON

In JSON files, tokens are inserted as JSON strings:

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{
  "color": "color-primary"
}
```


# Token Previews
Source: https://dtexplorer.io/docs/features/token-preview

Visual preview renderers for every token type — colors, spacing, typography, shadows, easing curves, and more.

Design Tokens Explorer renders a visual preview next to every token value in the sidebar. Previews are controlled by the `type` field of each group in your source configuration.

## How previews work

When a token is loaded, it is assigned to a group based on name prefix. The group's `type` determines which renderer is used. All rendering happens inline in the sidebar — no external services are called and no images are fetched.

All CSS values are sanitized before rendering to prevent injection.

## Preview types

### Color

**Group type:** `color`

Renders a filled square swatch using the token value as a CSS `background-color`. Accepts any valid CSS color: hex, rgb, hsl, named colors, `oklch`, `color()`, and CSS variables.

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{ "name": "color", "type": "color" }
```

Token examples: `--color-primary: #7C3AED`, `--color-surface: hsl(0 0% 98%)`

***

### Size / Spacing

**Group type:** `size`

Renders a horizontal bar whose width is proportional to the token value. Values in `rem` are converted to `px` using `rootFontSize` before rendering, so the bar accurately reflects physical screen size.

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{ "name": "space", "type": "size" }
```

Token examples: `--space-4: 1rem`, `--space-8: 2rem`, `--gap-sm: 8px`

***

### Border Radius

**Group type:** `radius`

Renders a small square with the token value applied as `border-radius`. Shows the visual rounding effect for `px`, `rem`, `%`, and other valid radius values.

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{ "name": "radius", "type": "radius" }
```

Token examples: `--radius-sm: 0.25rem`, `--radius-full: 9999px`, `--radius-pill: 50%`

***

### Font Size

**Group type:** `font-size`

Renders a short text sample scaled to the token value. Values larger than a threshold are capped to prevent layout overflow in the sidebar.

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{ "name": "font-size", "type": "font-size" }
```

Token examples: `--font-size-sm: 0.875rem`, `--font-size-xl: 1.25rem`, `--font-size-4xl: 2.25rem`

***

### Font Weight

**Group type:** `font-weight`

Renders a text sample at the token weight, helping you distinguish numerical weights like `400`, `500`, `600`, `700`, or `900` and named values like `bold`, `light`.

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{ "name": "font-weight", "type": "font-weight" }
```

Token examples: `--font-weight-normal: 400`, `--font-weight-semibold: 600`, `--font-weight-bold: 700`

***

### Line Height

**Group type:** `line-height`

Renders two lines of sample text with the token value as `line-height`. Unitless multipliers (`1.5`), `px`, `rem`, and `%` values are all rendered correctly.

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{ "name": "leading", "type": "line-height" }
```

Token examples: `--leading-tight: 1.25`, `--leading-normal: 1.5`, `--leading-relaxed: 1.75`

***

### Shadow

**Group type:** `shadow`

Renders a small element with `box-shadow` applied, showing the blur, spread, color, and offset visually.

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{ "name": "shadow", "type": "shadow" }
```

Token examples: `--shadow-sm: 0 1px 2px rgba(0,0,0,0.05)`, `--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1)`

***

### Easing

**Group type:** `easing`

Renders an SVG cubic-bezier curve that visualizes the easing function. The curve is drawn from the control points extracted from the `cubic-bezier(x1, y1, x2, y2)` value.

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{ "name": "easing", "type": "easing" }
```

Token examples: `--easing-ease-in: cubic-bezier(0.4, 0, 1, 1)`, `--easing-ease-out: cubic-bezier(0, 0, 0.2, 1)`, `--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)`

<Note>
  Only `cubic-bezier(...)` values produce a curve. Other values like `ease`, `linear`, or `steps()` display as plain
  text.
</Note>

***

### Time / Duration

**Group type:** `time`

Displays the duration value as plain text. No graphical preview — this keeps the value visible for tokens like `--duration-fast: 150ms`.

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{ "name": "duration", "type": "time" }
```

Token examples: `--duration-fast: 100ms`, `--duration-base: 200ms`, `--duration-slow: 0.5s`

***

### Filter

**Group type:** `filter`

Reserved for CSS filter values. Currently displays no preview — the raw value is shown as text.

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{ "name": "filter", "type": "filter" }
```

Token examples: `--filter-blur-sm: blur(4px)`, `--filter-brightness-muted: brightness(0.9)`

***

## Configuring rem conversion

The `size`, `radius`, and `font-size` renderers convert `rem` values to pixels using `designTokensExplorer.rootFontSize`. The default is `16`, matching the browser default.

If your project uses a different base (e.g. `10px` with `html { font-size: 62.5% }`), update the setting:

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


# Multiple Sources
Source: https://dtexplorer.io/docs/guides/multiple-sources

Load tokens from multiple files or remote URLs simultaneously — useful for multi-package design systems, theming, and component library setups.

## Overview

Design Tokens Explorer supports loading any number of token sources in parallel. Each source appears as a separate panel in the sidebar, switchable via a dropdown. This is useful when your design system is split across multiple packages, themes, or token categories.

## Basic multi-source setup

```json settings.json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
"designTokensExplorer.sources": [
  {
    "name": "Brand Tokens",
    "path": "./tokens/brand.css",
    "groups": [
      { "name": "color", "type": "color" },
      { "name": "radius", "type": "radius" }
    ]
  },
  {
    "name": "Semantic Tokens",
    "path": "./tokens/semantic.css",
    "groups": [
      { "name": "color", "type": "color" },
      { "name": "space", "type": "size" },
      { "name": "shadow", "type": "shadow" }
    ]
  }
]
```

In the sidebar, a dropdown at the top of the panel lets you switch between sources. Only one source is shown at a time. Searching filters tokens within the active source.

## Common use cases

### Design system packages

When consuming a published design system alongside local overrides:

```json settings.json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
"designTokensExplorer.sources": [
  {
    "name": "Acme Design System",
    "path": "node_modules/@acme/tokens/dist/tokens.css",
    "groups": [
      { "name": "color", "type": "color" },
      { "name": "space", "type": "size" },
      { "name": "text", "type": "font-size" }
    ]
  },
  {
    "name": "Local Overrides",
    "path": "./src/tokens/overrides.css",
    "groups": [
      { "name": "color", "type": "color" }
    ]
  }
]
```

### Theming (light / dark)

When you maintain separate token files for themes:

```json settings.json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
"designTokensExplorer.sources": [
  {
    "name": "Theme: Light",
    "path": "./tokens/theme-light.css",
    "groups": [
      { "name": "color", "type": "color" },
      { "name": "surface", "type": "color" }
    ]
  },
  {
    "name": "Theme: Dark",
    "path": "./tokens/theme-dark.css",
    "groups": [
      { "name": "color", "type": "color" },
      { "name": "surface", "type": "color" }
    ]
  }
]
```

### Remote + local

Combining tokens from a remote design tool export with local additions:

```json settings.json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
"designTokensExplorer.sources": [
  {
    "name": "Figma Export",
    "path": "https://tokens.example.com/figma-tokens.json",
    "groups": [
      { "name": "color", "type": "color" },
      { "name": "spacing", "type": "size" }
    ]
  },
  {
    "name": "Component Tokens",
    "path": "./src/tokens/components.css",
    "groups": [
      { "name": "button", "type": "color" },
      { "name": "input", "type": "color" }
    ]
  }
]
```

### Monorepo

In a monorepo with tokens in multiple packages:

```json settings.json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
"designTokensExplorer.sources": [
  {
    "name": "Core",
    "path": "./packages/tokens-core/dist/tokens.css",
    "groups": [
      { "name": "color", "type": "color" },
      { "name": "space", "type": "size" },
      { "name": "radius", "type": "radius" }
    ]
  },
  {
    "name": "Brand A",
    "path": "./packages/tokens-brand-a/dist/tokens.css",
    "groups": [
      { "name": "color", "type": "color" }
    ]
  },
  {
    "name": "Brand B",
    "path": "./packages/tokens-brand-b/dist/tokens.css",
    "groups": [
      { "name": "color", "type": "color" }
    ]
  }
]
```

## Sharing settings across a team

Token source configuration is typically kept in **workspace** settings (`.vscode/settings.json`) so it is shared with the team:

```json .vscode/settings.json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{
  "designTokensExplorer.sources": [
    {
      "name": "Design System",
      "path": "./tokens/tokens.css",
      "groups": [
        { "name": "color", "type": "color" },
        { "name": "space", "type": "size" }
      ]
    }
  ]
}
```

Commit this file to version control so that every team member gets the same token sources without manual setup.

## Reload behavior

* **Local sources** are watched for file changes. When any source file is saved, only that source is reloaded — other sources remain cached.
* **Remote sources** are fetched once on activation. To re-fetch, run **Design Tokens: Refresh Sources**.
* When any source changes (file or config), the [adoption audit](/docs/features/adoption-audit) re-runs in the background automatically.

## Search across sources

The search box in the sidebar filters tokens within the currently selected source. To search across all sources, use the Command Palette:

```
Design Tokens: Search
```

This opens a QuickPick that searches all loaded tokens from all sources simultaneously.


# Token File Formats
Source: https://dtexplorer.io/docs/guides/token-formats

Detailed guide to CSS, SCSS, JSON, and JavaScript/TypeScript token file formats — syntax, examples, and parsing rules.

Design Tokens Explorer supports four token file formats. This guide covers the exact syntax expected by each parser, edge cases, and how token names are derived.

## CSS custom properties

The CSS parser extracts tokens from CSS custom properties declared inside `:root {}`, `:where(html) {}`, and `@theme {}` blocks.

### Syntax

```css tokens.css theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
:root {
  --color-primary: #7c3aed;
  --color-primary-light: #a78bfa;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --radius-sm: 0.25rem;
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
```

Tailwind-style theme blocks are also supported:

```css tokens.css theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
@theme {
  --color-primary: #7c3aed;
  --space-2: 0.5rem;
}
```

### Name derivation

The `--` prefix is stripped. The token name in the panel is the CSS custom property name without dashes: `color-primary`, `space-1`, etc.

### Rules and limitations

* All `:root {}`, `:where(html) {}`, and `@theme {}` blocks in the file are scanned.
* Tokens declared in other selectors (`:host`, `[data-theme]`, media queries) are **not** loaded.
* Values can be any valid CSS value string — colors, lengths, shadows, easing functions, etc.
* Multi-value properties are supported: `--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)`.
* Comments inside supported blocks are ignored.
* Variables that reference other variables (e.g. `--color-bg: var(--color-neutral-50)`) are loaded with the raw reference value.

### Multiple blocks

All supported blocks are parsed. You can split tokens across multiple `:root {}`, `:where(html) {}`, and/or `@theme {}` blocks in the same file.

***

## SCSS

SCSS files (`.scss`) are parsed with the same engine as CSS. The file must declare tokens as CSS custom properties inside a `:root {}`, `:where(html) {}`, or `@theme {}` block. SCSS-specific syntax like variables (`$var`), nesting, and mixins is ignored — only CSS custom properties inside supported blocks are extracted.

### Syntax

```scss tokens.scss theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
:root {
  // Primary palette
  --color-primary: #7c3aed;
  --color-primary-light: #a78bfa;

  // Spacing
  --space-1: 0.25rem;
  --space-2: 0.5rem;

  // Radius
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
}
```

SCSS line comments (`//`) inside supported blocks are handled correctly — they do not interfere with token extraction.

### Rules and limitations

* The same constraints as CSS apply: all supported blocks (`:root`, `:where(html)`, `@theme`) are parsed.
* SCSS-only features (variables, `@mixin`, `@include`, nesting) are not interpreted. Only CSS custom property lines (`--name: value;`) are extracted.
* Remote `.scss` sources are supported with the same constraints as remote CSS sources.

***

## JSON

The JSON parser supports both flat and deeply nested objects. All values are flattened into a single token list.

### Flat JSON

```json tokens.json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{
  "color-primary": "#7C3AED",
  "color-surface": "#FAFAFA",
  "space-4": "1rem",
  "radius-md": "0.5rem"
}
```

Token names match the JSON keys directly.

### Nested JSON

```json tokens.json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{
  "color": {
    "primary": "#7C3AED",
    "neutral": {
      "100": "#F5F5F5",
      "500": "#737373",
      "900": "#171717"
    }
  },
  "space": {
    "1": "0.25rem",
    "2": "0.5rem",
    "4": "1rem",
    "8": "2rem"
  }
}
```

Nested keys are joined with `-`. The above produces:

* `color-primary`
* `color-neutral-100`
* `color-neutral-500`
* `color-neutral-900`
* `space-1`, `space-2`, `space-4`, `space-8`

### Design Tokens format (W3C / Style Dictionary)

Many design tools export tokens in a nested format with a `$value` key. This is flattened like any other nested structure. The path segments (excluding `$value`) become the token name:

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{
  "color": {
    "primary": {
      "$value": "#7C3AED",
      "$type": "color"
    }
  }
}
```

This produces: `color-primary-$value` (with value `#7C3AED`) and `color-primary-$type` (with value `color`). If you use this format, consider naming conventions that avoid `$value` in the token name — or configure a group to filter by prefix.

### Rules and limitations

* Values must be strings or numbers. Arrays and booleans are skipped.
* Maximum nesting depth: 20 levels.
* Numbers are converted to strings (e.g. `400` becomes `"400"`).
* Parsing errors result in an empty token set with an error notification.

***

## JavaScript / TypeScript (local files only)

The JS/TS parser uses regex to extract string and number variable assignments without executing any code.

### Syntax

```ts tokens.ts theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
export const colorPrimary = '#7C3AED';
export const colorPrimaryLight = '#A78BFA';
export const spaceSm = '0.5rem';
export const fontWeightBold = 700;

// Works with const/let/var and optional type annotations
export const radiusMd: string = '0.5rem';
export let shadowBase = '0 2px 4px rgba(0,0,0,0.1)';
```

### Name derivation

Variable names are used as-is (they are not converted to kebab-case). The token name in the panel matches the variable name: `colorPrimary`, `spaceSm`, `fontWeightBold`.

### Rules and limitations

* Only single-line assignments are matched. Multi-line values are not supported.
* Values must be string literals (single quotes, double quotes, or backticks) or number literals.
* Complex expressions, function calls, template literals with interpolations, and object/array assignments are all ignored.
* TypeScript type annotations between `:` and `=` are tolerated and stripped.
* **Remote JS/TS files are not supported.** Only local workspace files can be loaded. This is a deliberate security constraint.
* Destructuring assignments and shorthand exports are not matched.

### When to use JS/TS format

JS/TS loading is best for simple constant files that export primitive token values. If your token file is complex (uses imports, computed values, or factories), consider exporting a plain JSON file instead.

***

## Choosing a format

| Consideration                             | CSS | SCSS | JSON         | JS/TS |
| ----------------------------------------- | --- | ---- | ------------ | ----- |
| Nesting support                           | —   | —    | Deep nesting | —     |
| Remote loading                            | ✓   | ✓    | ✓            | —     |
| Native CSS usage                          | ✓   | ✓    | —            | —     |
| Tool compatibility (Figma, Tokens Studio) | —   | —    | ✓            | —     |
| Code-defined tokens                       | ✓   | —    | ✓            | ✓     |
| No build step required                    | ✓   | ✓    | ✓            | ✓     |
| SCSS comments inside supported blocks     | —   | ✓    | —            | —     |

For most design systems, **CSS custom properties** are the recommended format — they can be used directly in the browser, work with all CSS preprocessors, and are natively understood by browsers. **SCSS** is the right choice when your token file already lives in a `.scss` context or uses SCSS-style comments. **JSON** is ideal when tokens come from a design tool export. **JS/TS** is useful for component library packages that expose token constants.


# Introduction
Source: https://dtexplorer.io/docs/introduction

Load, explore, preview, check adoption, and insert design tokens directly in VS Code.

<img alt="Design Tokens Explorer" title="Dte" />

## What is Design Tokens Explorer?

**Design Tokens Explorer** is a VS Code extension by [Vira Software](https://vira.build) that bridges the gap between your design system and your codebase. It lets you load tokens from any source, browse and preview them visually, insert them at the cursor with language-aware formatting, and audit your code for hardcoded values that should be replaced with tokens.

<CardGroup>
  <Card title="Quickstart" icon="rocket" href="/docs/quickstart">
    Get up and running in minutes
  </Card>

  <Card title="Token Sources" icon="folder-open" href="/docs/configuration/sources">
    Configure local files and remote URLs
  </Card>

  <Card title="Adoption Audit" icon="magnifying-glass" href="/docs/features/adoption-audit">
    Find and replace hardcoded values
  </Card>

  <Card title="Token Insertion" icon="arrow-pointer" href="/docs/features/token-insertion">
    Insert tokens with language-aware formatting
  </Card>
</CardGroup>

## Features

### Browse your design system

The **Design Tokens Explorer** sidebar lets you navigate all your token sources at once. Tokens are organized into collapsible groups by category (colors, spacing, typography, etc.) with an integrated search that filters across all sources.

### Visual previews

Each token type renders a visual preview directly in the panel — color swatches, spacing bars, radius demos, cubic-bezier easing curves, and more — so you never have to guess what a value looks like.

### Context-aware insertion

Click a token to insert it at the cursor. The extension automatically formats the insertion based on the language of the active file: `var(--token-name)` in CSS/SCSS/Less, a quoted string in JS/TS, and so on. You can also configure a custom insert format.

### Hardcoded values audit

The **DTE Hardcoded Values** panel scans your workspace for literal values that match token values. It shows where they appear, suggests the correct token to use, and lets you replace or ignore them with a single click.

### Autocomplete

As you type `var(--` in a CSS file, Design Tokens Explorer provides autocomplete suggestions for all loaded tokens with their values shown inline.

### Multiple sources

Load tokens from multiple files or URLs in parallel. Each source appears as a separate panel in the sidebar, letting you navigate a multi-package design system without losing context.

## Token formats supported

| Format                                                                | Local | Remote |
| --------------------------------------------------------------------- | ----- | ------ |
| CSS custom properties (`:root {}` / `:where(html) {}` / `@theme {}`)  | ✓     | ✓      |
| SCSS custom properties (`:root {}` / `:where(html) {}` / `@theme {}`) | ✓     | ✓      |
| JSON (flat or nested)                                                 | ✓     | ✓      |
| JavaScript / TypeScript exports                                       | ✓     | —      |

## Trial and licensing

Design Tokens Explorer includes a **7-day free trial** that activates automatically on first install. After the trial period, a license key is required to continue using the extension. You can activate or deactivate a license directly from the VS Code command palette.


# Quickstart
Source: https://dtexplorer.io/docs/quickstart

Install and configure Design Tokens Explorer in under 5 minutes.

<Steps>
  <Step title="Install the extension">
    1. Open VS Code.
    2. Open the Extensions panel (`Ctrl+Shift+X` / `Cmd+Shift+X`)
    3. Search for **Design Tokens Explorer.**
    4. Click **Install.**

    The 7-day free trial starts automatically on first activation. You can buy a license [here](https://www.dtexplorer.io/#pricing).
  </Step>

  <Step title="Add your first token source">
    Open your VS Code settings (`Ctrl+,` / `Cmd+,`) and search for `designTokensExplorer.sources`, or add it manually to your `settings.json`:

    <Tabs>
      <Tab title="CSS/SCSS file">
        ```jsonc theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
        "designTokensExplorer.sources": [
          {
            "name": "Brand Tokens",
            "path": "./tokens/brand.css",
            "groups": [
        	  // the name must match tokens prefix (color, space, radius...)
              { "name": "color", "type": "color" },
              { "name": "space", "type": "size" },
              { "name": "radius", "type": "radius" }
            ]
          }
        ]
        ```

        Your CSS file should expose tokens as CSS custom properties inside `:root`, `:where(html)`, or `@theme`:

        ```css theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
        :root {
          --color-primary: #7C3AED;
          --color-neutral-100: #f5f5f5;
          --space-4: 1rem;
          --radius-md: 0.5rem;
        }
        ```

        `:where(html)` is also supported:

        ```css theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
        :where(html) {
          --color-primary: #7C3AED;
          --space-4: 1rem;
        }
        ```

        You can also use a Tailwind-style `@theme` block:

        ```css theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
        @theme {
          --color-primary: #7C3AED;
          --space-4: 1rem;
          --radius-md: 0.5rem;
        }
        ```
      </Tab>

      <Tab title="JSON file">
        ```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
        "designTokensExplorer.sources": [
          {
            "name": "Design System",
            "path": "./tokens/tokens.json",
            "groups": [
              { "name": "color", "type": "color" },
              { "name": "fontSize", "type": "font-size" }
            ]
          }
        ]
        ```

        Your JSON file can be flat or nested:

        ```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
        {
          "color": {
            "primary": "#7C3AED",
            "neutral": {
              "100": "#f5f5f5"
            }
          },
          "fontSize": {
            "sm": "0.875rem",
            "base": "1rem"
          }
        }
        ```
      </Tab>

      <Tab title="Remote URL">
        ```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
        "designTokensExplorer.sources": [
          {
            "name": "Remote Tokens",
            "path": "https://tokens.example.com/brand.css",
            "groups": [
              { "name": "color", "type": "color" }
            ]
          }
        ]
        ```

        Remote sources are fetched on activation and reloaded when you run **Refresh Sources**.
      </Tab>
    </Tabs>
  </Step>

  <Step title="Open the panel">
    Click the **Design Tokens Explorer** icon in the Activity Bar (left sidebar). Your tokens will load automatically.

    <Note>
      If you don't see the icon, open the Command Palette (`Ctrl+Shift+P` / `Cmd+Shift+P`) and run **Design Tokens: Refresh Sources**.
    </Note>
  </Step>

  <Step title="Insert a token">
    1. Open any file in the editor
    2. Place the cursor where you want to insert a token
    3. Click a token in the sidebar — it inserts automatically in the correct format

    For CSS files this produces `var(--token-name)`. In JavaScript/TypeScript it inserts the token name as a string. See [Token Insertion](/docs/features/token-insertion) for full formatting rules.
  </Step>

  <Step title="Audit hardcoded values">
    Open the **DTE Hardcoded Values** panel from the bottom panel area (or via the Command Palette: **Design Tokens: Open Hardcoded Values Audit**). The panel scans your workspace and lists every hardcoded value that has a matching token, so you can replace them one by one.
  </Step>
</Steps>

## Next steps

<CardGroup>
  <Card title="Token Sources" icon="folder-open" href="/docs/configuration/sources">
    Detailed source configuration including groups and remote URLs
  </Card>

  <Card title="All Settings" icon="gear" href="/docs/configuration/settings">
    Customize insertion format, click behavior, scan paths, and more
  </Card>

  <Card title="Token Previews" icon="eye" href="/docs/features/token-preview">
    Visual preview renderers for every token type
  </Card>

  <Card title="Adoption Audit" icon="magnifying-glass" href="/docs/features/adoption-audit">
    Find and replace hardcoded values across your codebase
  </Card>
</CardGroup>