Resolver & Modes

The converter maps each multi-mode collection to a Resolver modifier. It writes the default mode into the collection's base token file and another file for each non-default mode.

Generated file

tokens/tokens.resolver.json lists sets, modifiers, and their resolution order:

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/resolver.json",
  "name": "Figma Variables",
  "version": "2025.10",
  "sets": {
    "semantic": {
      "sources": [{ "$ref": "./semantic.tokens.json" }]
    }
  },
  "modifiers": {
    "semantic": {
      "default": "light",
      "contexts": {
        "light": [],
        "dark": [{ "$ref": "./semantic.dark.tokens.json" }]
      }
    }
  },
  "resolutionOrder": [
    { "$ref": "#/sets/semantic" },
    { "$ref": "#/modifiers/semantic" }
  ]
}

The resolver starts with the base set and applies the selected context's override sources at its resolutionOrder position. It uses a modifier's default context for any axis absent from the input. It selects the first declared context when the modifier has no default.

Runtime switching

CSS: tokens.css uses selectors such as [data-semantic='dark'].

React: useTheme().setContext('semantic', 'dark') changes the active context and recalculates useToken values.

MCP: pass contexts to resolve_context:

{ "contexts": { "semantic": "dark" } }

Naming

The converter changes collection names into lowercase slugs for set and modifier names. It writes the Light mode as the light context slug.

Inspect tokens.resolver.json to see the exact context names and merge order that the build writes.