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

settings.json

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

settings.json

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

settings.json

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

settings.json

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

settings.json

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

.vscode/settings.json

{
  "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 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.