Merge pull request #100 from Ayaz1997/testing-design-tokens

added design system tokens

.github/workflows/tokens.yml

@@ -0,0 +1,28 @@
+name: Figma Token/Theme Sync
+on:
+  push
+jobs:
+  change-and-push:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Setup Node v18
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18
+
+      - name: Transform Tokens
+        run: |
+            npx token-transformer ./src/tokens/tokens.json ./src/tokens/tokens-output.json
+            rm ./src/tokens/tokens.json
+            mv ./src/tokens/tokens-output.json ./src/tokens/tokens.json
+
+
+      - name: Commit and push changes
+        uses: devops-infra/action-commit-push@master
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          commit_message: "Token Transformation from Token Studio format to JSON"
+

.vscode/settings.json

@@ -7,5 +7,8 @@
     "eslint.validate": [
         "javascript",
         "typescript"
-    ]
+    ],
+    "[yaml]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
 }

package.json

@@ -95,6 +95,7 @@
     "@rollup/plugin-replace": "^3.0.0",
     "@storybook/react": "^7.0.21",
     "@storybook/theming": "^7.0.21",
+    "@tokens-studio/sd-transforms": "^0.11.3",
     "@types/react-datepicker": "^4.8.0",
     "chakra-react-select": "^4.6.0",
     "framer-motion": "^10.12.16",
@@ -107,6 +108,7 @@
     "react-icons": "^4.3.1",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-css-porter": "^1.0.2",
+    "token-transformer": "^0.0.33",
     "tsconfig-paths-webpack-plugin": "^4.0.0"
   }
 }

src/components/RGThemeProvider/index.tsx

@@ -33,5 +33,4 @@ const RGThemeProvider: React.FC<RGThemeProps> = ({
 };
 
 export default RGThemeProvider;
-
 export { Fonts };

src/theme/colors.ts

@@ -1,31 +1,18 @@
+import _ from 'lodash';
+import RGTokens from './tokens';
+
+interface colorTokenInterface {
+  value: string;
+  type: string;
+}
+
+const chakraColors = _.mapValues(RGTokens.colors, (colors) =>
+  _.mapValues(colors, (color: colorTokenInterface) => color.value)
+);
+
 const Colors = {
-  white: '#fffffe',
-  purple: {
-    500: '#822EA6',
-  },
-  red: {
-    500: '#ff3864',
-  },
-  yellow: {
-    500: '#F2E857',
-  },
-  headerGradient: {
-    500: 'linear-gradient(96.18deg, rgb(255, 56, 100) -44.29%, rgb(139, 29, 186) 53.18%, rgb(67, 83, 223) 150.65%)',
-  },
-  rgGradient: {
-    500: 'linear-gradient(95.58deg, #FF3864 0%, #8B1DBA 53.65%, #4353DF 100%)',
-  },
-  primary: {
-    // Base colour is at 500
-    50: '#ff95ad',
-    200: '#ff95ad',
-    300: '#ff6788',
-    400: '#ff577c',
-    500: '#ff3864',
-    600: '#ff194c',
-    700: '#ff0940',
-    800: '#da0030',
-  },
+  ...chakraColors,
+  ...chakraColors.base,
 };
 
 export default Colors;

src/theme/gradientStyles.ts

@@ -1,4 +1,12 @@
+import _ from 'lodash';
+import RGTokens from './tokens';
+
+const chakraGradients = _.mapValues(RGTokens.gradient, (gradient) => ({
+  bgGradient: gradient.value,
+}));
+
 const GradientStyles = {
+  ...chakraGradients,
   primaryGradient: {
     bgGradient: `
       radial-gradient(97.27% 170.54% at 98.7% 2.73%, #24003A 0%, rgba(0, 0, 0, 0) 100%),

src/theme/tokens/index.ts

@@ -0,0 +1,3 @@
+import * as RGTokens from './token-output.json';
+
+export default RGTokens;