feat: canonicalize variable output and plugin options

[Justineo]

Summary

• Canonicalize MCP token variable output around Figma variable names instead of inline fallbacks or WEB code syntax values.
• Preserve CSS variable fallbacks for plugin transformVariable codegen blocks while keeping default UI output separate.
• Expose options.scale and options.variableDisplay through plugin transform hook typings and runtime options.
• Update get_code token docs and tests for the canonical variable behavior.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tempad-dev-site	Ready	Preview, Comment	May 12, 2026 3:36am

[Justineo]

@codex review

[chatgpt-codex-connector]

Codex Review: Didn't find any major issues. 🎉

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[Copilot]

Pull request overview

This PR updates TemPad Dev’s variable handling so MCP get_code emits canonical variable references derived from Figma variable names (instead of inline fallbacks or WEB codeSyntax), while still allowing plugin codegen blocks that use transformVariable to receive CSS var(..., fallback) values. It also surfaces options.scale and options.variableDisplay to plugin transform hooks (types + runtime).

Changes:

• Canonicalized variable identity/output around Figma variable names across MCP token tooling and related tests.
• Added a separate cssVarStyle payload path so plugin blocks using transformVariable can preserve inline var(..., fallback) without changing default UI output.
• Exposed options.scale and options.variableDisplay in plugin transform hook typings and documentation.

Reviewed changes

Copilot reviewed 24 out of 25 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Updates workspace dependency resolution for the plugins package bump.
packages/plugins/src/index.ts	Extends plugin transform hook options typing to include scale and variableDisplay; exports VariableDisplayMode.
packages/plugins/README.zh-Hans.md	Documents shared options object for CSS-related plugin hooks, including the new fields.
packages/plugins/README.md	Same as above for English docs.
packages/plugins/package.json	Bumps @tempad-dev/plugins to 0.6.2.
packages/plugins/CHANGELOG.md	Notes the new exposed plugin hook options in 0.6.2.
packages/extension/utils/variable-output.ts	Adds formatNodeStyleForCssVars and option-driven inline fallback preservation behavior.
packages/extension/utils/figma-variables.ts	Changes raw variable naming to rely on Figma variable names (not WEB codeSyntax).
packages/extension/utils/css.ts	Passes variableDisplay through to plugin transform hooks via the options object.
packages/extension/utils/codegen.ts	Sends uiStyle plus optional cssVarStyle to the worker; uses CSS-var-preserving style when plugin code is present.
packages/extension/types/codegen.ts	Adds optional cssVarStyle to the worker request payload typing.
packages/extension/tests/utils/variable-output.test.ts	Adds coverage for preserving inline fallbacks for plugin variable transforms.
packages/extension/tests/utils/figma-style/gradient.test.ts	Updates expectations to reflect Figma-name-based canonical variable output.
packages/extension/tests/utils/css.test.ts	Extends assertions to ensure variableDisplay is included in transformVariable hook options.
packages/extension/tests/utils/codegen.test.ts	Verifies cssVarStyle is passed to the worker and that UI style is used for the primary style field.
packages/extension/tests/mcp/tools/token/mapping.test.ts	Updates expectations for canonical names derived from Figma variable names.
packages/extension/tests/mcp/tools/token/indexer.test.ts	Updates getVariableRawName behavior expectations.
packages/extension/tests/mcp/tools/token/candidates.test.ts	Updates canonical rewrite expectations to match the new naming source.
packages/extension/tests/codegen/worker.test.ts	Verifies cssVarStyle is only used for blocks that transform variables.
packages/extension/package.json	Bumps @tempad-dev/extension to 0.18.7 and updates plugins workspace dependency.
packages/extension/mcp/tools/token/mapping.ts	Uses codeSyntax as a lookup hint while emitting canonical names from Figma variable names; adjusts tracking of used ids.
packages/extension/codegen/worker.ts	Selects between style and cssVarStyle per block based on presence of transformVariable.
packages/extension/CHANGELOG.md	Documents the behavioral change and the new plugin-facing option exposure.
docs/extension/requirements.md	Clarifies that inline fallbacks are not the source of truth for MCP token values.
docs/extension/design.md	Aligns MCP IR design notes with canonical naming and token-value sourcing.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.