feat: Add DTCG tokens synced from Figma by RayRedGoose · Pull Request #350 · Workday/canvas-tokens

RayRedGoose · 2026-08-27T00:13:22Z

Issue

#353

Summary

Add DTCG tokens synced from Figma to setup initial infra rework

Release Category

Tokens

Where Should the Reviewer Start?

Testing Manually

Thank You GIF

coderabbitai · 2026-08-27T00:13:30Z

Important

Review skipped

Auto reviews are limited based on label configuration.

🏷️ Required labels (at least one) (1)

ready for review

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 12f33b1a-a600-41d0-8eb9-40b5cf55a751

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

Copilot

Pull request overview

This PR introduces an automated pipeline to fetch Figma variables/styles and generate DTCG-compliant token JSON files, committing the generated token set into packages/canvas-tokens/dtcg/tokens as part of an initial token infrastructure rework.

Changes:

Add two Node scripts to fetch Figma variables/styles and generate DTCG token files.
Add generated DTCG token JSON output (base/system/component/brand token sets).
Add a GitHub Actions workflow and package scripts to automate syncing tokens from Figma.

Reviewed changes

Copilot reviewed 31 out of 34 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
scripts/utils/generate-dtcg-tokens.js	Converts raw Figma exports into structured DTCG token JSON, including modes/themes handling.
scripts/utils/fetch-figma-variables.js	Fetches Figma variables + styles + nodes into local JSON payload(s) for token generation.
packages/canvas-tokens/dtcg/tokens/system/type.json	Generated system typography tokens (aliases + typography objects).
packages/canvas-tokens/dtcg/tokens/system/size.json	Generated system size aliases for component sizing.
packages/canvas-tokens/dtcg/tokens/system/shape.json	Generated system corner-radius/shape sizing tokens.
packages/canvas-tokens/dtcg/tokens/system/padding.json	Generated system padding scale aliases.
packages/canvas-tokens/dtcg/tokens/system/opacity.json	Generated system opacity aliases and state-layer opacity tokens.
packages/canvas-tokens/dtcg/tokens/system/motion.json	Generated system motion easing aliases.
packages/canvas-tokens/dtcg/tokens/system/gap.json	Generated system spacing/gap aliases.
packages/canvas-tokens/dtcg/tokens/system/depth.json	Generated depth shadow tokens derived from Figma effect styles.
packages/canvas-tokens/dtcg/tokens/system/color/surface.json	Generated system surface color tokens with dark/brand extensions.
packages/canvas-tokens/dtcg/tokens/system/color/shadow.json	Generated shadow paint color tokens with dark/brand extensions.
packages/canvas-tokens/dtcg/tokens/system/color/focus.json	Generated focus ring colors + dimension values.
packages/canvas-tokens/dtcg/tokens/system/color/fg.json	Generated foreground/text/icon color tokens with dark/brand extensions.
packages/canvas-tokens/dtcg/tokens/system/color/chart.json	Generated chart palette tokens with dark mode mappings.
packages/canvas-tokens/dtcg/tokens/system/color/border.json	Generated border color tokens with dark/brand extensions.
packages/canvas-tokens/dtcg/tokens/system/color/bg.json	Generated background color tokens with dark mode mappings.
packages/canvas-tokens/dtcg/tokens/system/color/accent.json	Generated accent color tokens + overlay tokens with extensions.
packages/canvas-tokens/dtcg/tokens/system/breakpoint.json	Generated breakpoint dimension tokens.
packages/canvas-tokens/dtcg/tokens/component/system-icon.json	Generated component token file for system icon sizing.
packages/canvas-tokens/dtcg/tokens/brand.json	Generated brand palette tokens (light/dark) for themeable colors.
packages/canvas-tokens/dtcg/tokens/base/type.json	Generated base typography primitives (font-family/weights/letter-spacing).
packages/canvas-tokens/dtcg/tokens/base/size.json	Generated base dimension scale (px/rem descriptions, size ramp).
packages/canvas-tokens/dtcg/tokens/base/shadow.json	Generated base shadow geometry primitives (y/blur/spread).
packages/canvas-tokens/dtcg/tokens/base/opacity.json	Generated base opacity scale primitives.
packages/canvas-tokens/dtcg/tokens/base/motion.json	Generated base motion durations and easing primitives.
packages/canvas-tokens/dtcg/tokens/base/base.json	Generated base “base” numeric tokens (fontsize/baseline).
packages/canvas-tokens-docs/components/ColorGrid.tsx	Adds a clarifying comment for system color mapping used in docs UI.
package.json	Adds convenience scripts to fetch and parse tokens.
.github/workflows/figma-sync.yml	Adds workflow_dispatch automation to sync tokens from Figma and open a PR.
.eslintrc.js	Enables node env and declares `fetch` as a readonly global for linting.

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

Copilot

Pull request overview

Copilot reviewed 25 out of 27 changed files in this pull request and generated 4 comments.

Suppressed comments (1)

scripts/utils/token-parser/file.js:93

writeOutputFiles shallow-merges existing on-disk JSON with newly generated content via Object.assign(existing, content). If both contain the same top-level key, nested token objects will be replaced wholesale and previously-written siblings can be lost. Prefer a deep merge for plain objects (treat $value token leaves as atomic), or overwrite the file entirely if the generator always produces the complete token set.

    fs.writeFileSync(
      outputPath,
      `${JSON.stringify(Object.assign(existing, content), null, 2)}\n`,
      'utf8'
    );

Copilot

Pull request overview

Copilot reviewed 23 out of 26 changed files in this pull request and generated 2 comments.

+        with:
+          github-token: ${{ secrets.GH_RW_TOKEN }}
+          script: |
+            github.rest.pulls.create({


+  return shadows.length ? shadows : undefined;
+}
+
+export function generateStyleTokens(payload) {


RayRedGoose and others added 3 commits July 31, 2026 13:41

feat: Fix version for alpha

4797214

chore: Release @workday/canvas-tokens-web v5.0.0-alpha.3 [ci skip]

16d2d8a

feat: Add DTCG tokens synced from figma

3a67050

RayRedGoose requested a review from a team as a code owner August 27, 2026 00:13

Copilot AI lite review requested due to automatic review settings August 27, 2026 00:13

Merge branch 'prerelease/major' into figma-webhook

c5b3a0b

Copilot started reviewing on behalf of RayRedGoose August 27, 2026 00:13 View session

Copilot AI reviewed Aug 27, 2026

View reviewed changes

RayRedGoose added 3 commits August 27, 2026 12:18

fix: Remove raw tokens

38a74d8

fix: Update figma parser

7398253

fix: Remove tokens

d5f187a

RayRedGoose changed the base branch from prerelease/major to main August 28, 2026 16:42

RayRedGoose requested a lite review from Copilot August 28, 2026 16:42

Copilot started reviewing on behalf of RayRedGoose August 28, 2026 16:43 View session

Copilot AI reviewed Aug 28, 2026

View reviewed changes

Comment thread scripts/utils/fetch-figma-variables.js

Comment thread .github/workflows/figma-sync.yml

Comment thread scripts/utils/token-parser/file.js

Comment thread scripts/utils/generate-dtcg-tokens.js

RayRedGoose added 5 commits August 28, 2026 11:10

chore: Fix yarn

9d3bd0e

fix: Fix versions

8bdc3af

fix: Use root for default tokens

1e7e3a2

chore: Update script

64f8f8c

chore: Fix package

e079bd9

RayRedGoose linked an issue Aug 28, 2026 that may be closed by this pull request

Implement a new tool for Figma–web sync based on the spike findings. #353

Open

RayRedGoose requested a balanced review from Copilot August 28, 2026 20:37

Copilot started reviewing on behalf of RayRedGoose August 28, 2026 20:37 View session

Copilot AI reviewed Aug 28, 2026

View reviewed changes

Comment thread .github/workflows/figma-sync.yml

with:

github-token: ${{ secrets.GH_RW_TOKEN }}

script: |

github.rest.pulls.create({

Comment thread scripts/utils/token-parser/styles.js

return shadows.length ? shadows : undefined;

}

export function generateStyleTokens(payload) {

Navigation Menu

Uh oh!

feat: Add DTCG tokens synced from Figma - #350

feat: Add DTCG tokens synced from Figma#350
RayRedGoose wants to merge 12 commits into
mainfrom
figma-webhook

RayRedGoose commented Aug 27, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Aug 27, 2026 •

edited

Loading

Review skipped

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

RayRedGoose commented Aug 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue

Summary

Release Category

Where Should the Reviewer Start?

Testing Manually

Thank You GIF

Uh oh!

coderabbitai Bot commented Aug 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

RayRedGoose commented Aug 27, 2026 •

edited

Loading

coderabbitai Bot commented Aug 27, 2026 •

edited

Loading