chore(plugin): shared css variable names for code syntax

[mimarz]

refactored how css variables are transformed so that the logic can be shared between figma plugin and style-dictionary when they create figma variables or transform to css.

---

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

[changeset-bot]

🦋 Changeset detected

Latest commit: 22eaf89

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

[Copilot]

🟢 Approval recommended

The shared naming implementation is consistently integrated and covered by parity-focused tests.

Pull request overview

Centralizes CSS variable naming so CLI-generated CSS and Figma WEB code syntax remain aligned.

Changes:

• Adds shared CSS variable naming and kebab-case logic.
• Applies shared names in Style Dictionary and Figma synchronization.
• Separates Figma scope handling from code-syntax handling and adds parity tests.

File summaries

File	Description
.changeset/quiet-names-agree.md	Records an empty changeset.
plugins/designsystemet/src/plugin/token-export/collection-specs.ts	Derives WEB syntax from shared naming rules.
plugins/designsystemet/src/plugin/token-export/importer.ts	Runs the scope-only post-import pass.
plugins/designsystemet/src/plugin/token-export/scope-syntax.ts	Removes the combined scope/syntax implementation.
plugins/designsystemet/src/plugin/token-export/scopes.ts	Introduces scope-only synchronization.
plugins/designsystemet/src/plugin/token-export/variable-sync.ts	Synchronizes WEB syntax with variables.
packages/cli/src/internal.ts	Exposes shared naming internally.
packages/cli/src/tokens/css-variables.ts	Defines canonical CSS variable naming.
packages/cli/src/tokens/css-variables.test.ts	Tests naming and generated-CSS parity.
packages/cli/src/tokens/process/configs.ts	Registers the shared name transform.
packages/cli/src/tokens/process/configs/shared.ts	Applies the transform to shared configurations.
packages/cli/src/tokens/process/configs/type-scale.ts	Uses shared naming for type scales.
packages/cli/src/tokens/process/configs/typography.ts	Uses shared naming for typography.
packages/cli/src/tokens/process/formats/css/color.ts	Uses shared color-scoped names.
packages/cli/src/tokens/process/transformers.ts	Replaces typography-specific naming with dsName.
packages/cli/src/tokens/process/utils/kebab-case.ts	Aligns kebab conversion with Style Dictionary.
packages/cli/src/tokens/process/utils/kebab-case.test.ts	Covers kebab-case compatibility.

Review details

• Files reviewed: 17/17 changed files
• Comments generated: 0
• Review effort level: Balanced

---

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