Merge pull request #1435 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/setup-node@v2.4.0
+
+#       # 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."

.gitignore

@@ -15,3 +15,4 @@ build-storybook.log
 chromatic.log
 chromatic-build-*.xml
 chromatic-diagnostics.json
+figma-tokens/transformed-tokens/tokens-transformed.json

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