warpdotdev/warp · error · Error

createSemanticTokens: mode

Error message

createSemanticTokens: mode "${modeName}" not found in modeIds for token "${token.name}". Available modes: ${Object.keys(modeIds).join(', ')}

What it means

createSemanticTokens.js creates one Figma variable per token and sets a value for each mode, looking the modeId up in the modeIds map produced by createVariableCollection(name, modeNames). The error fires when a token's values object has a key (mode name) with no entry in modeIds — the token file and the collection's modes are out of sync. The message lists the available modes to make the mismatch obvious.

Solutions

  1. Align the keys of token.values with the exact modeNames array passed to createVariableCollection (matching is case-sensitive)
  2. Pass the modeIds map returned by createVariableCollection straight into createSemanticTokens instead of rebuilding it
  3. Pre-validate that every key of every token.values exists in modeIds before creating any variable, so a mismatch does not leave a half-built collection behind

Example fix

// before
const { modeIds } = await createVariableCollection('Color', ['Light', 'Dark'], runId)
await createSemanticTokens([
  { name: 'bg/primary', type: 'COLOR', values: { light: '#ffffff', dark: '#000000' } },
], modeIds) // throws: mode "light" not found in modeIds

// after
const { modeIds } = await createVariableCollection('Color', ['Light', 'Dark'], runId)
await createSemanticTokens([
  { name: 'bg/primary', type: 'COLOR', values: { Light: '#ffffff', Dark: '#000000' } },
], modeIds)
Defensive patterns

Strategy: validation

Validate before calling

const modes = Object.keys(modeIds)
for (const token of tokens) {
  for (const modeName of Object.keys(token.values)) {
    if (!(modeName in modeIds)) {
      throw new Error(`token ${token.name} references unknown mode "${modeName}"; collection has: ${modes.join(', ')}`)
    }
  }
}
await createSemanticTokens(tokens, modeIds, runId)

Type guard

function modesCovered(token, modeIds) {
  return Object.keys(token.values).every((m) => m in modeIds)
}

Try / catch

try {
  await createSemanticTokens(tokens, modeIds, runId)
} catch (err) {
  if (err instanceof Error && err.message.includes('not found in modeIds')) {
    // re-align token.values keys with the collection's modeNames, then re-run
  }
  throw err
}

Prevention

When it happens

Trigger: Collection created with modeNames ['Light','Dark'] but token.values keyed 'light'/'dark' (case mismatch); a token referencing a third mode like 'HighContrast' that was never passed to createVariableCollection; a modeIds map built from a different collection than the one the variable was created in.

Common situations: Design-token JSON authored separately from the pipeline config; renaming modes in the token file without updating the collection step; token sets copied from another theme system that uses 'default' instead of 'Value'.

Related errors

AI-assisted analysis of warpdotdev/warp@e72fd7aacb (2026-08-16). Data as JSON: /api/errors/bed817181f8b79fe. Report an issue: GitHub.

Appendix: source

Thrown at resources/bundled/mcp_skills/figma/figma-generate-library/scripts/createSemanticTokens.js:46

 */
async function createSemanticTokens(collection, modeIds, tokenMap, runId) {
  const variables = {}

  for (const token of tokenMap) {
    // Create the variable
    const variable = figma.variables.createVariable(token.name, collection, token.type)

    // Tag for cleanup
    variable.setPluginData('dsb_key', `variable/${token.name}`)
    if (runId) {
      variable.setPluginData('dsb_run_id', runId)
    }

    // Set values for each mode
    for (const [modeName, rawValue] of Object.entries(token.values)) {
      const modeId = modeIds[modeName]
      if (!modeId) {
        throw new Error(
          `createSemanticTokens: mode "${modeName}" not found in modeIds for token "${token.name}". ` +
            `Available modes: ${Object.keys(modeIds).join(', ')}`,
        )
      }

      let value = rawValue

      // Convert hex strings to Figma RGBA for COLOR type
      if (token.type === 'COLOR' && typeof rawValue === 'string' && rawValue.startsWith('#')) {
        value = hexToFigmaColor(rawValue)
      }

      variable.setValueForMode(modeId, value)
    }

    // Set scopes (default: empty array = hidden from property pickers / primitives)
    variable.scopes = token.scopes || []

View on GitHub (pinned to e72fd7aacb)