Merge pull request #1438 from undp/issue-995-design-tokens

Issue 995 design tokens

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

@@ -0,0 +1,58 @@
+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 fetch
+
+          git add figma-tokens/transformed-tokens/tokens-transformed.json
+          git add stories/assets/scss/figma-scss/_figma-variables.scss
+          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
+        uses: peter-evans/create-pull-request@v5
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          branch: ${{ github.ref_name }}
+          base: develop  # Target branch for the PR
+          commit-message: "build: update SCSS variables from Figma tokens"
+          title: "Update SCSS variables from Figma tokens"
+          body: "This PR updates SCSS variables based on the latest Figma tokens."

.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,52 @@
+import StyleDictionary from 'style-dictionary';
+
+const sd = new StyleDictionary('./figma-tokens/config/config.json');
+await sd.buildAllPlatforms();
+
+//
+
+// import StyleDictionary from 'style-dictionary';
+
+// const config = {
+//   source: ['../transformed-tokens/**/*.json'],
+//   platforms: {
+//     scss: {
+//       transformGroup: 'scss',
+//       buildPath: '../../stories/assets/scss/figma-scss/',
+//       files: [
+//         {
+//           destination: '_figma-variables.scss',
+//           format: 'scss/variables',
+//         },
+//       ],
+//     },
+//   },
+// };
+
+// const sd = StyleDictionary.extend(config);
+// 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();

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"
+        }
+      ]
+    }
+  }
+}

figma-tokens/input/tokens.json

@@ -0,0 +1,34 @@
+{
+  "global": {
+    "white": {
+      "value": "#ffffff",
+      "type": "color"
+    },
+    "red": {
+      "value": "#ee402d",
+      "type": "color"
+    },
+    "black": {
+      "value": "#000000",
+      "type": "color"
+    },
+    "yellow": {
+      "value": "#ffeb00",
+      "type": "color"
+    },
+    "green": {
+      "value": "#6de354;",
+      "type": "color"
+    },
+    "azure": {
+      "value": "#60d4f2",
+      "type": "color"
+    }
+  },
+  "$themes": [],
+  "$metadata": {
+    "tokenSetOrder": [
+      "global"
+    ]
+  }
+}

figma-tokens/transformed-tokens/tokens-transformed.json

@@ -0,0 +1,32 @@
+{
+  "black": {
+    "value": "#000000",
+    "type": "color"
+  },
+  "white": {
+    "value": "#ffffff",
+    "type": "color"
+  },
+  "yellow": {
+    "value": "#ffeb00",
+    "type": "color"
+  },
+  "red": {
+    "value": "#ee402d",
+    "type": "color"
+  },
+  "green": {
+    "value": "#6de354;",
+    "type": "color"
+  },
+  "azure": {
+    "value": "#60d4f2",
+    "type": "color"
+  },
+  "tokenSetOrder": {
+    "0": {
+      "value": "global",
+      "type": "other"
+    }
+  }
+}