Skip to content

Commit

Permalink
Merge pull request #1435 from undp/issue-995-design-tokens
Browse files Browse the repository at this point in the history
Issue 995 design tokens
  • Loading branch information
vern-gora authored Nov 7, 2024
2 parents 64f1c86 + a210c57 commit 306407a
Show file tree
Hide file tree
Showing 14 changed files with 1,096 additions and 11 deletions.
58 changes: 58 additions & 0 deletions .github/workflows/build-figma-tokens.yml
Original file line number Diff line number Diff line change
@@ -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."
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,4 @@ build-storybook.log
chromatic.log
chromatic-build-*.xml
chromatic-diagnostics.json
figma-tokens/transformed-tokens/tokens-transformed.json
Empty file added .gitmodules
Empty file.
4 changes: 3 additions & 1 deletion .storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
2 changes: 1 addition & 1 deletion chromatic.config.json
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
52 changes: 52 additions & 0 deletions figma-tokens/build-figma-tokens.mjs
Original file line number Diff line number Diff line change
@@ -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();
15 changes: 15 additions & 0 deletions figma-tokens/config/config.json
Original file line number Diff line number Diff line change
@@ -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"
}
]
}
}
}
34 changes: 34 additions & 0 deletions figma-tokens/input/tokens.json
Original file line number Diff line number Diff line change
@@ -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"
]
}
}
32 changes: 32 additions & 0 deletions figma-tokens/transformed-tokens/tokens-transformed.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
}
Loading

0 comments on commit 306407a

Please sign in to comment.