Draft: Design tokens - using .json for tokens using style dictionary as conversion

.github/workflows/build-tokens.yml

@@ -0,0 +1,24 @@
+name: Build Design Tokens
+
+on: 
+  push:
+    paths:
+      - 'packages/cfpb-design-system/src/tokens/**'
+  pull_request:
+    branches:
+      - main
+    paths: 
+      - 'packages/cfpb-design-system/src/tokens/**'
+
+jobs:
+  build_tokens:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: npm install style-dictionary --force # Add other dependencies if needed
+
+      - name: Build tokens
+        run: npx style-dictionary build --config ./style-dictionary.config.js

package.json

@@ -33,10 +33,12 @@
     "serve-html": "http-server docs/_site",
     "serve-jekyll": "bundle exec jekyll serve --watch --profile --host=localhost --port=4000",
     "serve-decap": "npx decap-server",
-    "start": "yarn build && concurrently --kill-others \"yarn serve-decap\" \"yarn serve-jekyll\" \"yarn build watch\"",
+    "prebuild": "yarn tokens",
+    "start": "yarn tokens && yarn build && concurrently --kill-others \"yarn serve-decap\" \"yarn serve-jekyll\" \"yarn build watch\"",
     "jest": "yarn node --experimental-vm-modules $(yarn bin jest)",
     "cy": "./scripts/cypress.sh",
-    "changelog": "./scripts/changelog.sh"
+    "changelog": "./scripts/changelog.sh",
+    "tokens": "style-dictionary build --config ./style-dictionary.config.js"
   },
   "browserslist": "> 0.2% in @cfpb/browserslist-config stats",
   "dependencies": {
@@ -86,6 +88,7 @@
     "prop-types": "15.8.1",
     "release-it": "19.0.5",
     "sass": "1.93.2",
+    "style-dictionary": "5.1.1",
     "stylelint": "16.25.0",
     "stylelint-config-standard-scss": "16.0.0",
     "svgo": "4.0.0"