Merge branch 'tokens-percy'

.github/workflows/percy-prepare.yml

@@ -34,17 +34,19 @@ jobs:
         run: |
           # Create needed directories so `cp` doesn't fail
           mkdir -p artifact
+          mkdir -p tokens
           mkdir -p templates/docs/examples/
           mkdir -p templates/_macros/
           mkdir -p templates/macros/
+          touch sd.config.json
           
           echo "Contents before copying to artifact"
           tree .
           
           # underscore-prefixed directories are ignored by GH artifacts, so we need to copy to a non-prefixed directory
           cp -R templates/_macros/. templates/macros/
           
-          cp -R templates/docs/examples/ templates/macros/ scss/ artifact/
+          cp -R templates/docs/examples/ templates/macros/ scss/ tokens/ sd.config.json artifact/
 
         
       # Archive the PR number associated with this workflow since it won't be available in the base workflow context

.github/workflows/pr-percy-prepare-push.yml

@@ -9,6 +9,8 @@ on:
       - "templates/docs/examples/**"
       - "templates/_macros/**"
       - "scss/**"
+      - "tokens/**"
+      - "sd.config.json"
     types:
       - opened
       - synchronize

Dockerfile

@@ -16,6 +16,7 @@ FROM node:20 AS yarn-dependencies
 WORKDIR /srv
 ADD package.json package.json
 ADD yarn.lock yarn.lock
+ADD sd.config.json sd.config.json
 RUN --mount=type=cache,target=/usr/local/share/.cache/yarn PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 yarn install
 
 
@@ -24,6 +25,7 @@ RUN --mount=type=cache,target=/usr/local/share/.cache/yarn PUPPETEER_SKIP_CHROMI
 FROM yarn-dependencies AS build-vanilla
 ADD scripts scripts
 ADD scss scss
+ADD tokens tokens
 RUN yarn run build
 
 

package.json

@@ -29,7 +29,8 @@
   "scripts": {
     "start": "yarn build && yarn serve",
     "build": "yarn build-scss && yarn build-js && yarn build-class-references",
-    "build-scss": "sass --load-path=node_modules --embed-sources --style=compressed scss:build/css && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
+    "build-tokens": "style-dictionary build --verbose --config ./sd.config.json",
+    "build-scss": "yarn build-tokens && sass --load-path=node_modules --embed-sources --style=compressed scss:build/css && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
     "build:essential": "yarn run build-js && sass --load-path=node_modules --embed-sources --style=compressed scss/build.scss:build/css/build.css scss/docs:build/css/docs && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
     "build-js": "mkdir -p build/js/modules && cp node_modules/@canonical/cookie-policy/build/js/cookie-policy.js build/js/modules && cp node_modules/@canonical/latest-news/dist/latest-news.js build/js/modules && cp node_modules/js-beautify/js/lib/beautify.js node_modules/js-beautify/js/lib/beautify-html.js node_modules/js-beautify/js/lib/beautify-css.js build/js/modules",
     "build-class-references": "node scripts/create-class-references.js",
@@ -70,6 +71,7 @@
     "postcss-scss": "4.0.9",
     "prettier": "3.3.3",
     "sass": "1.77.8",
+    "style-dictionary": "4.0.1",
     "stylelint": "16.8.1",
     "stylelint-config-recommended-scss": "14.1.0",
     "stylelint-order": "6.0.4",