chore(plugin): rework figma variables model

[mimarz]

rewriting how logic is handeled internally with model used for importing to Figma Variables.

Summary

Reworks how the Figma plugin turns a designsystemet.config.json into Figma variables. The grouping of $themes.json into Figma collections now lives in the CLI and is shared with the plugin through a new @digdir/designsystemet/internal entry, the plugin's export model is rebuilt around it, and the plugin UI previews straight from the validated config instead of from a separate preview data structure.

CLI (@digdir/designsystemet)

• New src/figma/collections.ts with toFigmaCollections(), which groups $themes entries into Figma collections and modes and deep-merges each mode's token sets. FIGMA_COLLECTION holds the collection names (Theme, Color scheme, Semantic, Color, Size, Typography) and is now used by the $themes generator too, so the CLI and the plugin can not disagree on them. Comes with unit tests.
• New ./internal export (src/internal.ts) for utilities other Designsystemet apps consume. It re-exports the Figma collection helpers and types, plus getThemeColorScales. These are not part of the public tokens/create or color entries.
• getThemeColorScales() in the color-scheme generator resolves a theme's color scales for one scheme with severity and per-scheme color overrides applied. generateColorScheme uses it, and the plugin preview uses the same function so it shows exactly the colors the tokens end up with. groupByScheme and addSeverityColors stay where they were.

Figma plugin (@plugin/designsystemet)

• Export model: token-export/preview-model.ts is replaced by token-model.ts, which builds a TokenModel from token sets and $themes using the CLI's toFigmaCollections. The plugin-local constants.ts collection names are gone in favour of FIGMA_COLLECTION. Types renamed to say what they are: ModePreview → CollectionMode, CollectionPreview → CollectionVariables.
• Scopes and code syntax: the post-import pass no longer carries the legacy Main color / Support color migration-state detection. It applies to the current collection set only.
• UI: the plugin previews from the validated ConfigSchema (colors, border radii, fonts) rather than a preview model posted from the plugin side. preview-data.tsx is replaced by preview-view.tsx plus a small border-radius.ts that evaluates the radius step formulas for display. The paste view is its own paste-view.tsx. CSS classes lost the tx- prefix, generic row classes were renamed, redundant backgrounds and a dead rule were removed, and hardcoded values use --ds-* tokens.
• Plugin window grows from 800×700 to 900×800. Watch scripts fixed so --watch reaches Vite.
• README example gains a color overrides block.

Changesets

• @plugin/designsystemet joins the fixed version group so it follows the same version as the published packages. privatePackages is set to version but not tag, and changeset publish still skips it because it is private.

Verification

• CLI unit tests pass, including the new figma/collections and getThemeColorScales tests.
• pnpm build:cli and pnpm update:theme produce no changes in design-tokens/ or the built theme CSS.
• Plugin UI and plugin code bundles build. The plugin's tsc still reports the pre-existing schemas/internal/schema.js import that does not exist on this branch.

---

_{Stack created with GitHub Stacks CLI • Give Feedback 💬}

[changeset-bot]

🦋 Changeset detected

Latest commit: 7627b95

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Preview deployments for this pull request:

storybook - 18. Sep 2026 - 12:57

themebuilder - 3. Sep 2026 - 11:42

[Copilot]

🟡 Changes recommended

Collection grouping can fail for inherited object keys, and the new generation script does not reliably await or target its output.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Centralizes Figma collection modeling and simplifies the plugin preview by rendering validated configuration directly.

Changes:

• Adds shared Figma collection and token-model utilities.
• Reworks plugin preview, import state, and color/radius rendering.
• Centralizes color-scale generation with expanded tests.

File summaries

File	Description
plugins/designsystemet/src/ui/preview-view.tsx	Adds config-based preview UI.
plugins/designsystemet/src/ui/preview-data.tsx	Removes token-based preview.
plugins/designsystemet/src/ui/border-radius.ts	Adds radius formula evaluation.
plugins/designsystemet/src/ui/app.tsx	Updates preview and export state.
plugins/designsystemet/src/ui/app.css	Uses spacing tokens.
plugins/designsystemet/src/types.ts	Updates UI message types.
plugins/designsystemet/src/plugin/token-export/utils.ts	Removes obsolete preview utilities.
plugins/designsystemet/src/plugin/token-export/types.ts	Introduces export-side token model.
plugins/designsystemet/src/plugin/token-export/text-styles.ts	Consumes the token model.
plugins/designsystemet/src/plugin/token-export/resolver.ts	Adds lazy token lookup.
plugins/designsystemet/src/plugin/token-export/preview-model.ts	Builds grouped export model.
plugins/designsystemet/src/plugin/token-export/importer.ts	Imports from the token model.
plugins/designsystemet/src/plugin/token-export/effect-styles.ts	Updates effect-style model usage.
plugins/designsystemet/src/plugin/token-export/color.ts	Removes preview-only color conversion.
plugins/designsystemet/src/plugin/token-export/collection-specs.ts	Uses shared Figma modes.
plugins/designsystemet/src/plugin/code.ts	Reworks token generation messaging.
plugins/designsystemet/README.md	Adds override example.
plugins/designsystemet/package.json	Adjusts watch commands.
packages/cli/src/tokens/utils.ts	Reuses centralized severity logic.
packages/cli/src/tokens/utils.test.ts	Removes relocated tests.
packages/cli/src/tokens/create/generators/primitives/color-scheme.ts	Reuses shared scale generation.
packages/cli/src/tokens/create/generators/primitives/color-scheme.test.ts	Removes relocated tests.
packages/cli/src/tokens/create/figma-collections.ts	Adds collection transformation API.
packages/cli/src/tokens/create/figma-collections.test.ts	Tests grouping and merging.
packages/cli/src/tokens/create.ts	Exports collection utilities.
packages/cli/src/scripts/make-figma-collection.ts	Adds collection-generation script.
packages/cli/src/colors/scale.ts	Centralizes resolved color scales.
packages/cli/src/colors/scale.test.ts	Tests color override behavior.
packages/cli/package.json	Exposes the new script.
.changeset/light-cloths-film.md	Adds an empty changeset marker.

Review details

Suppressed comments (2)

packages/cli/src/scripts/make-figma-collection.ts:66

• The filesystem is initialized with temp as its output directory, but this explicit ../temp bypasses that configuration and writes under packages/temp when the package script runs. Pass the initialized output directory instead.

    '../temp',

packages/cli/src/scripts/make-figma-collection.ts:121

• The top-level async operation is started without being awaited, so generation failures are detached from the script entry point. Top-level await ensures the command completes only after generation and propagates failures reliably.

_toFigmaCollection({ ...validatedConfig, outDir: '' });

• Files reviewed: 30/30 changed files
• Comments generated: 2
• Review effort level: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

🟡 Changes recommended

Token-set precedence and disabled-set handling are incorrect, while preview controls and the new collection script contain functional regressions.

Get a fresh assessment by requesting another Copilot review.

Review details

Suppressed comments (2)

packages/cli/src/scripts/make-figma-collection.ts:59

• writeFiles is asynchronous, but its promise is discarded. The script therefore prints its completion message before the output is written, and write failures are detached from this operation. Await the write before reporting success.

  dsfs.writeFiles(

plugins/designsystemet/src/plugin/token-export/collection-specs.ts:153

• resolveTokenValue returns the first matching set, but this inserts mode sets in forward order. That reverses toFigmaCollections' documented merge semantics where later selected sets override earlier ones, and disabled sets can also win resolution. Prioritize non-disabled sets from last to first.

  for (const selected of mode.tokenSets) {
    if (selected.exists) {
      prioritized.add(selected.tokenSet);
    }

• Files reviewed: 37/37 changed files
• Comments generated: 3
• Review effort level: Balanced