feat: Add DTCG tokens synced from Figma

.eslintrc.js

@@ -3,6 +3,12 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint'],
   extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+  env: {
+    node: true,
+  },
+  globals: {
+    fetch: 'readonly',
+  },
   rules: {
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/ban-ts-ignore': 'off',

.github/workflows/figma-sync.yml

@@ -0,0 +1,105 @@
+name: Tokens Sync automation
+
+on:
+  workflow_dispatch:
+    inputs:
+      toBranch:
+        description: 'Branch to sync tokens to'
+        required: true
+        default: main
+        type: choice
+        options:
+          - main
+          - prerelease/minor
+          - prerelease/major
+
+jobs:
+  sync-tokens:
+    runs-on: ubuntu-latest
+    permissions:
+      packages: write
+      pull-requests: write
+      contents: write
+    env:
+        NODE_VERSION: 24.x
+
+    steps:
+      - name: Set target branch name
+        id: target-branch
+        run: echo "name=sync-tokens-from-figma-${{ inputs.toBranch }}" >> $GITHUB_OUTPUT
+
+      - name: Checkout code
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          ref: ${{ inputs.toBranch }}
+
+      - name: Set global user
+        run: |
+            git config --global user.name "${{ github.actor }}"
+            git config --global user.email "${{ github.actor }}@users.noreply.github.com"
+
+      - name: Create branch
+        run: |
+            git checkout -b ${{ steps.target-branch.outputs.name }}
+
+      - uses: actions/setup-node@v7.0.0
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Cache node modules
+        id: yarn-cache
+        uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # 6.1.0
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-${{ env.NODE_VERSION }}-node-modules-hash-${{ hashFiles('yarn.lock') }}
+
+      - name: Install dev dependencies
+        if: steps.yarn-cache.outputs.cache-hit != 'true'
+        run: yarn install --production=false
+
+      - name: Fetch Figma variables
+        run: yarn fetch-tokens
+        env:
+          FIGMA_ACCESS_TOKEN: ${{ secrets.FIGMA_ACCESS_TOKEN }}
+          FIGMA_BASE_FILE_KEY: ${{ secrets.FIGMA_BASE_FILE_KEY }}
+          FIGMA_MAIN_FILE_KEY: ${{ secrets.FIGMA_MAIN_FILE_KEY }}
+
+      - name: Parse Figma variables
+        run: yarn parse-tokens
+
+      - name: Clear raw tokens
+        run: rm -rf figma-raw-tokens
+
+      - name: Check for token changes
+        id: changes
+        run: |
+            git add packages/canvas-tokens/dtcg/tokens
+            if git diff --cached --quiet; then
+              echo "No token changes found."
+              echo "has_changes=false" >> "$GITHUB_OUTPUT"
+            else
+              echo "Token changes found."
+              echo "has_changes=true" >> "$GITHUB_OUTPUT"
+            fi
+
+      - name: Commit changes
+        if: steps.changes.outputs.has_changes == 'true'
+        run: |
+            git commit -m "feat: Sync tokens from Figma"
+            git push origin ${{ steps.target-branch.outputs.name }}
+
+      - name: Create pull request
+        if: steps.changes.outputs.has_changes == 'true'
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+        with:
+          github-token: ${{ secrets.GH_RW_TOKEN }}
+          script: |
+            github.rest.pulls.create({
+              owner: 'Workday',
+              repo: 'canvas-tokens',
+              title: 'feat: Sync tokens from Figma',
+              head: '${{ steps.target-branch.outputs.name }}',
+              base: '${{ inputs.toBranch }}'
+            });
+
+

.gitignore

@@ -39,3 +39,5 @@ existing-tokens.json
 
 # Storybook
 build-storybook.log
+
+figma-raw-tokens/

jest.config.ts

@@ -1,6 +1,15 @@
 export default {
   testMatch: ['**/spec/**.spec.ts'],
-  transform: {'^.+\\.ts?$': 'ts-jest'},
+  transform: {
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+        tsconfig: {
+          allowJs: true,
+        },
+      },
+    ],
+  },
   testEnvironment: 'node',
   roots: ['packages/canvas-tokens', 'packages/canvas-tokens-web'],
   testTimeout: 200000,

package.json

@@ -15,13 +15,16 @@
     "build:tokens": "nx build @workday/canvas-tokens",
     "clean:tokens": "nx clean @workday/canvas-tokens-web",
     "lint": "eslint -c ./.eslintrc.js --ext=ts .",
+    "fetch-tokens": "node scripts/utils/fetch-figma-variables.js",
+    "parse-tokens": "node scripts/utils/generate-dtcg-tokens.js",
     "precommit": "lint-staged",
     "prepare": "husky install",
     "prestorybook": "yarn build:tokens",
     "storybook": "nx storybook @workday/canvas-tokens-docs",
     "build-storybook": "nx build-storybook @workday/canvas-tokens-docs",
     "serve-storybook": "npx http-server docs/storybook/@workday/canvas-tokens-docs",
-    "test": "jest -c jest.config.ts",
+    "test": "jest -c jest.config.ts && vitest run -c vitest.config.ts",
+    "test:parser": "vitest run -c vitest.config.ts",
     "typecheck": "tsc -p . --noEmit",
     "prerelease": "yarn clean:tokens && yarn build:tokens",
     "release": "changeset publish"
@@ -58,7 +61,8 @@
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.0.4",
-    "vite": "~6.4.2"
+    "vite": "~6.4.2",
+    "vitest": "^3.0.5"
   },
   "workspaces": [
     "packages/*"

packages/canvas-tokens-web/CHANGELOG.md

@@ -1,5 +1,65 @@
 # @workday/canvas-tokens-web
 
+## 5.0.0-alpha.3
+
+### Major Changes
+
+- ### Components
+
+  - chore: merge main into prerelease/minor
+    ([#321](https://github.com/Workday/canvas-tokens/pull/321))
+    ([@alanbsmith](https://github.com/alanbsmith),
+    [@dependabot[bot]](https://github.com/dependabot[bot]))
+  - feat: Commit to initiate beta release ([@RayRedGoose](https://github.com/RayRedGoose))
+  - fix: Update sana tokens ([@RayRedGoose](https://github.com/RayRedGoose))
+  - fix: Remove fallbacks from letter-spacing tokens
+    ([@RayRedGoose](https://github.com/RayRedGoose))
+  - feat: remove selected colors from sana.json and update focus and border brand colors
+    ([#331](https://github.com/Workday/canvas-tokens/pull/331))
+    ([@RayRedGoose](https://github.com/RayRedGoose),
+    [@mannycarrera4](https://github.com/mannycarrera4))
+  - feat: add shadow depth system to sana theme
+    ([#333](https://github.com/Workday/canvas-tokens/pull/333))
+    ([@RayRedGoose](https://github.com/RayRedGoose))
+  - fix: Wrap shadow tokens in oklch and not rgba
+    ([#334](https://github.com/Workday/canvas-tokens/pull/334))
+    ([@RayRedGoose](https://github.com/RayRedGoose), manuel.carrera)
+  - feat: Add fg link tokens ([#335](https://github.com/Workday/canvas-tokens/pull/335))
+    ([@RayRedGoose](https://github.com/RayRedGoose), sheelah)
+  - fix: Add alt gradient for containers ([#336](https://github.com/Workday/canvas-tokens/pull/336))
+    ([@RayRedGoose](https://github.com/RayRedGoose))
+  - fix: Change token from gradient to elevated
+    ([#337](https://github.com/Workday/canvas-tokens/pull/337))
+    ([@RayRedGoose](https://github.com/RayRedGoose))
+  - fix: Refactor elevated color definition in sana.json
+    ([#339](https://github.com/Workday/canvas-tokens/pull/339))
+    ([@RayRedGoose](https://github.com/RayRedGoose))
+  - feat: Add border elevated token ([#340](https://github.com/Workday/canvas-tokens/pull/340))
+    ([@RayRedGoose](https://github.com/RayRedGoose))
+  - fix: Update non sana canvas overlay values
+    ([#341](https://github.com/Workday/canvas-tokens/pull/341))
+    ([@RayRedGoose](https://github.com/RayRedGoose))
+  - fix: Revert token changes ([#342](https://github.com/Workday/canvas-tokens/pull/342))
+    ([@RayRedGoose](https://github.com/RayRedGoose), [@sheelah](https://github.com/sheelah))
+  - feat: Fix version for alpha ([@RayRedGoose](https://github.com/RayRedGoose))
+
+  ### Infrastructure
+
+  - chore: Update external GH actions to use SHA1 and Node 24
+    ([#330](https://github.com/Workday/canvas-tokens/pull/330))
+    ([@alanbsmith](https://github.com/alanbsmith),
+    [@mannycarrera4](https://github.com/mannycarrera4))
+
+  ### Tokens
+
+  - feat: Add Sana theme token set and comparison report
+    ([#311](https://github.com/Workday/canvas-tokens/pull/311))
+    ([@RayRedGoose](https://github.com/RayRedGoose)) New Sana theme tokens have added as a css file
+    and they can be applied to any html element by adding attribute. The new or updated tokens for
+    sana can be used as in JS.
+  - fix: Fix legacy types ([#317](https://github.com/Workday/canvas-tokens/pull/317))
+    ([@RayRedGoose](https://github.com/RayRedGoose))
+
 ## 4.4.0
 
 ### Minor Changes

packages/canvas-tokens-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-tokens-web",
-  "version": "4.4.0",
+  "version": "5.0.0-alpha.3",
   "description": "Canvas design tokens for web",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "CC-BY-ND-4.0",