Update SCSS variables from Figma tokens

.github/workflows/build-figma-tokens.yml

@@ -0,0 +1,62 @@
+name: Generate scss vars from figma tokens
+
+on:
+  push:
+    branches:
+      - update-figma-tokens
+    paths:
+      - 'figma-tokens/input/**'
+
+jobs:
+  build_tokens:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      # Configuring Node.js Environment
+      - name: Setup Node.js environment
+        uses: actions/[email protected]
+
+      # Setting dependencies
+      - name: Install dependencies
+        run: npm ci
+
+      # Token conversion using token-transformer
+      - name: Transform Figma tokens
+        run: npx token-transformer figma-tokens/input/tokens.json figma-tokens/transformed-tokens/tokens-transformed.json
+
+      # Run script for Style Dictionary, convert JSON to SCSS
+      - name: Build Figma tokens to SCSS
+        run: npm run build-tokens
+
+      # Create or update the `update-figma-tokens` branch
+      - name: Create or update branch
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+
+          git add stories/assets/scss/figma-scss/_figma-variables.scss figma-tokens/transformed-tokens/tokens-transformed.json
+          git commit -m "Save changes in the branch" || echo "No changes to commit"
+
+      # Push changes to `update-figma-tokens` branch
+      - name: Push changes
+        run: |
+          git push origin ${{ github.ref_name }} || echo "No changes to push"
+
+      # Automatic pull request
+      - name: Create Pull Request
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          PR_DATA=$(jq -n \
+            --arg title "Update SCSS variables from Figma tokens" \
+            --arg body "This PR updates SCSS variables based on the latest Figma tokens." \
+            --arg head "${GITHUB_REF#refs/heads/}" \
+            --arg base "develop" \
+            '{title: $title, body: $body, head: $head, base: $base}')
+
+          curl -s -X POST -H "Authorization: token $GITHUB_TOKEN" \
+            -H "Accept: application/vnd.github.v3+json" \
+            https://api.github.com/repos/${{ github.repository }}/pulls \
+            -d "$PR_DATA"

.storybook/main.js

@@ -17,7 +17,9 @@ export default {
     '@storybook/react-webpack5',
     // '@chromatic-com/storybook',
     '@storybook/addon-webpack5-compiler-babel',
-    '@whitespace/storybook-addon-html'
+    '@whitespace/storybook-addon-html',
+    '@storybook/addon-designs',
+    'storybook-addon-sass-postcss',
   ],
   webpackFinal: async config => {
     config.resolve.alias = {

chromatic.config.json

@@ -2,6 +2,6 @@
   "$schema": "https://www.chromatic.com/config-file.schema.json",
   "projectId": "UNDP Design System",
   "exitOnceUploaded": true,
-  "skip": "dependabot/**",
+  "skip": true,
   "onlyChanged": true
 }

figma-tokens/build-figma-tokens.mjs

@@ -0,0 +1,79 @@
+import StyleDictionary from 'style-dictionary';
+
+// function kebabIt(str) {
+//   return str
+//       .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
+//       .join('-')
+//       .toLowerCase();
+// }
+
+// StyleDictionaryPackage.registerFormat({
+//   name: 'scss/variables',
+//   formatter: function (dictionary, config) {
+//     return `${this.selector} {
+//       ${dictionary.allProperties.map(prop => `${prop.name}: ${prop.value};`).join('\n')}
+//     }`
+//   }
+// });
+
+const sd = new StyleDictionary('./figma-tokens/config/config.json');
+await sd.buildAllPlatforms();
+
+//
+
+// import {StyleDictionary} from 'style-dictionary-utils'
+
+// const myStyleDictionary = new StyleDictionary()
+
+// // when using style dictionary 4 you whave to await the extend method
+// const extendedSd = await myStyleDictionary.extend({
+//   "source": ["../transformed-tokens/**/*.json"],
+//   "platforms": {
+//     "scss": {
+//       "transformGroup": "scss",
+//       "buildPath": "../../stories/assets/scss/figma-scss/",
+//       "files": [
+//         {
+//           "destination": "_figma-variables.scss",
+//           "format": "scss/variables"
+//         }
+//       ]
+//     }
+//   }
+// });
+
+// extendedSd.buildAllPlatforms();
+
+//Px To Rem
+
+// function fontPxToRem(token, options) {
+//   const baseFont = getBasePxFontSize(options);
+//   const floatVal = parseFloat(token.value);
+//   if (isNaN(floatVal)) {
+//     console.log('NaN error', token.name, token.value, 'rem');
+//   }
+//   if (floatVal === 0) {
+//     return '0';
+//   }
+//   return `${floatVal / baseFont}rem`;
+// }
+
+// StyleDictionaryPackage.registerTransform({
+//   name: 'size/pxToRem',
+//   type: 'value',
+//   matcher: (token) => ['fontSizes'].includes(token.type),
+//   transformer: (token, options) => fontPxToRem(token, options)
+// })
+// //
+// StyleDictionaryPackage.registerTransform({
+//   name: 'sizes/px',
+//   type: 'value',
+//   matcher: function(prop) {
+//       // You can be more specific here if you only want 'em' units for font sizes
+//       return ["fontSize", "spacing", "borderRadius", "borderWidth", "sizing"].includes(prop.attributes.category);
+//   },
+//   transformer: function(prop) {
+//       // You can also modify the value here if you want to convert pixels to ems
+//       return parseFloat(prop.original.value) + 'px';
+//   }
+// });

figma-tokens/config/config.json

@@ -0,0 +1,15 @@
+{
+  "source": ["./figma-tokens/transformed-tokens/**/*.json"],
+  "platforms": {
+    "scss": {
+      "transformGroup": "scss",
+      "buildPath": "./stories/assets/scss/figma-scss/",
+      "files": [
+        {
+          "destination": "_figma-variables.scss",
+          "format": "scss/variables"
+        }
+      ]
+    }
+  }
+}