feat(design-token): start restructuring the design tokens

Ján Hamara · Ján Hamara · commit f477ef9d341c · 2023-06-23T14:17:34.000+02:00
diff --git a/docs/index.storybook.mdx b/docs/index.storybook.mdx
@@ -14,6 +14,9 @@ import FigmaLogo from './assets/figma-logo-with-text.svg';
 import GithubLogo from './assets/github-logo.svg';
 import WarningIcon from './assets/warning-icon.svg';
 
+import { Colors as ClassicGlobalColors } from '../src/essentials/Colors/Colors';
+import { generateGlobalTierCssVariables } from '../src/utils/generateCssVariables';
+
 import { ArrowRightIcon, AlertIcon, PenIcon } from '../src/icons/';
 import { Box } from '../src/components/Box/Box';
 import { Button } from '../src/components/Button/Button';
diff --git a/src/essentials/Colors/Colors.ts b/src/essentials/Colors/Colors.ts
@@ -1,43 +1,62 @@
 import { ColorSchema } from './types';
 
 export const Colors = {
-    WHITE: 'hsl(0, 0%, 100%)',
-    BLACK: 'hsl(0, 0%, 0%)',
-    AUTHENTIC_BLUE_1100: 'hsl(211, 100%, 6%)',
-    AUTHENTIC_BLUE_900: 'hsl(211, 100%, 12%)',
-    AUTHENTIC_BLUE_550: 'hsl(210, 16%, 46%)',
-    AUTHENTIC_BLUE_350: 'hsl(213, 14%, 66%)',
-    AUTHENTIC_BLUE_200: 'hsl(210, 14%, 80%)',
-    AUTHENTIC_BLUE_50: 'hsl(220, 12%, 95%)',
-    FREEDOM_RED_1000: 'hsl(352, 92%, 39%)',
-    FREEDOM_RED_900: 'hsl(352, 100%, 52%)',
-    ACTION_BLUE_1000: 'hsl(212, 92%, 34%)',
-    ACTION_BLUE_900: 'hsl(212, 92%, 45%)',
-    ACTION_BLUE_350: 'hsl(212, 75%, 78%)',
-    ACTION_BLUE_150: 'hsl(213, 74%, 91%)',
-    ACTION_BLUE_100: 'hsl(211, 74%, 94%)',
-    ACTION_BLUE_50: 'hsl(210, 75%, 97%)',
-    BUMPY_MAGENTA_1000: 'hsl(302, 100%, 37%)',
-    BUMPY_MAGENTA_900: 'hsl(302, 100%, 50%)',
-    BUMPY_MAGENTA_350: 'hsl(302, 100%, 81%)',
-    BUMPY_MAGENTA_50: 'hsl(300, 100%, 97%)',
-    POSITIVE_GREEN_1000: 'hsl(149, 92%, 24%)',
-    POSITIVE_GREEN_900: 'hsl(149, 93%, 32%)',
-    POSITIVE_GREEN_350: 'hsl(149, 44%, 74%)',
-    POSITIVE_GREEN_50: 'hsl(147, 47%, 96%)',
-    ATTENTION_YELLOW_900: 'hsl(48, 100%, 50%)',
-    ATTENTION_YELLOW_350: 'hsl(48, 100%, 81%)',
-    ATTENTION_YELLOW_50: 'hsl(47, 100%, 97%)',
-    NEGATIVE_ORANGE_1000: 'hsl(21, 96%, 38%)',
-    NEGATIVE_ORANGE_900: 'hsl(21, 100%, 51%)',
-    NEGATIVE_ORANGE_350: 'hsl(21, 100%, 81%)',
-    NEGATIVE_ORANGE_50: 'hsl(21, 100%, 97%)'
+    white: 'hsl(0, 0%, 100%)',
+    black: 'hsl(0, 0%, 0%)',
+    blue: {
+        primary: {
+            1100: 'hsl(211, 100%, 6%)',
+            900: 'hsl(211, 100%, 12%)',
+            550: 'hsl(210, 16%, 46%)',
+            350: 'hsl(213, 14%, 66%)',
+            200: 'hsl(210, 14%, 80%)',
+            50: 'hsl(220, 12%, 95%)',
+        },
+        secondary: {
+            1000: 'hsl(212, 92%, 34%)',
+            900: 'hsl(212, 92%, 45%)',
+            350: 'hsl(212, 75%, 78%)',
+            150: 'hsl(213, 74%, 91%)',
+            100: 'hsl(211, 74%, 94%)',
+            50: 'hsl(210, 75%, 97%)',
+        }
+    },
+    red: {
+        1000: 'hsl(352, 92%, 39%)',
+        900: 'hsl(352, 100%, 52%)',
+    },
+    magenta: {
+        1000: 'hsl(302, 100%, 37%)',
+        900: 'hsl(302, 100%, 50%)',
+        350: 'hsl(302, 100%, 81%)',
+        50: 'hsl(300, 100%, 97%)',
+    },
+    green: {
+        1000: 'hsl(149, 92%, 24%)',
+        900: 'hsl(149, 93%, 32%)',
+        350: 'hsl(149, 44%, 74%)',
+        50: 'hsl(147, 47%, 96%)',
+    },
+    yellow: {
+        900: 'hsl(48, 100%, 50%)',
+        350: 'hsl(48, 100%, 81%)',
+        50: 'hsl(47, 100%, 97%)',
+    },
+    orange: {
+        1000: 'hsl(21, 96%, 38%)',
+        900: 'hsl(21, 100%, 51%)',
+        350: 'hsl(21, 100%, 81%)',
+        50: 'hsl(21, 100%, 97%)'
+    }
 } as const;
 
+// AUTHENTIC = primary now
+// ACTION = secondary now
+
 export const SemanticColors = {
     text: {
-        primary: Colors.AUTHENTIC_BLUE_900,
-        primaryInverted: Colors.WHITE,
+        primary: Colors.blue.primary[900],
+        primaryInverted: Colors.white,
         secondary: Colors.AUTHENTIC_BLUE_550,
         secondaryInverted: Colors.AUTHENTIC_BLUE_200,
         tertiary: Colors.AUTHENTIC_BLUE_350,
@@ -91,65 +110,116 @@ export const SemanticColors = {
         dangerEmphasized: Colors.NEGATIVE_ORANGE_900,
         successEmphasized: Colors.POSITIVE_GREEN_900,
         warningEmphasized: Colors.ATTENTION_YELLOW_900
+    },
+// } satisfies ColorSchema;
+}
+
+export const ComponentColors = {
+    text:  {
+        button: {
+            primary: {
+                // --wave-c-color-text-button-primary-default
+                default: '',
+                // --wave-c-color-text-button-primary-hover
+                hover: '',
+                // --wave-c-color-text-button-primary-disabled
+                disabled: '',
+                // --wave-c-color-text-button-primary-inverted
+                inverted: '',
+                // --wave-c-color-text-button-primary-hoverInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
+                hoverInverted: '',
+                // --wave-c-color-text-button-primary-disabledInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
+                disabledInverted: '',
+            },
+            secondary: {
+                // --wave-c-color-text-button-secondary-default
+                default: '',
+                // --wave-c-color-text-button-secondary-hover
+                hover: '',
+                // --wave-c-color-text-button-secondary-disabled
+                disabled: '',
+                // --wave-c-color-text-button-secondary-inverted
+                inverted: '',
+                // --wave-c-color-text-button-secondary-hoverInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
+                hoverInverted: '',
+                // --wave-c-color-text-button-secondary-disabledInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
+                disabledInverted: '',
+            },
+            danger: {
+                // --wave-c-color-text-button-danger-default
+                default: '',
+                // --wave-c-color-text-button-danger-hover
+                hover: '',
+                // --wave-c-color-text-button-danger-disabled
+                disabled: '',
+                // --wave-c-color-text-button-danger-inverted
+                inverted: '',
+                // --wave-c-color-text-button-danger-hoverInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
+                hoverInverted: '',
+                // --wave-c-color-text-button-danger-disabledInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
+                disabledInverted: '',
+            }
+        }
     }
-    // button: {
     //     primary: {
     //         text: Colors.WHITE,
     //         icon: Colors.WHITE,
     //         background: Colors.AUTHENTIC_BLUE_900,
     //         border: Colors.AUTHENTIC_BLUE_900,
-    //
+    
     //         textHover: Colors.WHITE,
     //         iconHover: Colors.WHITE,
     //         backgroundHover: Colors.AUTHENTIC_BLUE_1100,
     //         borderHover: Colors.AUTHENTIC_BLUE_1100,
-    //
+    
     //         textDisabled: Colors.WHITE,
     //         iconDisabled: Colors.WHITE,
     //         backgroundDisabled: Colors.AUTHENTIC_BLUE_200,
     //         borderDisabled: Colors.AUTHENTIC_BLUE_200,
-    //
+    
     //         textInverted: Colors.ACTION_BLUE_900,
     //         iconInverted: Colors.ACTION_BLUE_900,
     //         backgroundInverted: Colors.WHITE,
     //         borderInverted: Colors.WHITE,
-    //
+    
     //         textHoverInverted: Colors.WHITE,
     //         iconHoverInverted: Colors.WHITE,
     //         backgroundHoverInverted: Colors.ACTION_BLUE_900,
     //         borderHoverInverted: Colors.ACTION_BLUE_900,
-    //
+    
     //         textDisabledInverted: Colors.AUTHENTIC_BLUE_350,
     //         iconDisabledInverted: Colors.AUTHENTIC_BLUE_350,
     //         backgroundDisabledInverted: Colors.AUTHENTIC_BLUE_550,
     //         borderDisabledInverted: Colors.AUTHENTIC_BLUE_550
     //     },
+    //     // --wave-c-color-border-button-primary-hover
+    //     // --wave-c-color-border-button-primary-hover-inverted
     //     secondary: {
     //         text: Colors.AUTHENTIC_BLUE_900,
     //         icon: Colors.AUTHENTIC_BLUE_900,
     //         background: Colors.WHITE,
     //         border: Colors.AUTHENTIC_BLUE_200,
-    //
+    
     //         textHover: Colors.AUTHENTIC_BLUE_900,
     //         iconHover: Colors.AUTHENTIC_BLUE_900,
     //         backgroundHover: Colors.AUTHENTIC_BLUE_50,
     //         borderHover: Colors.AUTHENTIC_BLUE_200,
-    //
+    
     //         textDisabled: Colors.AUTHENTIC_BLUE_200,
     //         iconDisabled: Colors.AUTHENTIC_BLUE_200,
     //         backgroundDisabled: Colors.WHITE,
     //         borderDisabled: Colors.AUTHENTIC_BLUE_200,
-    //
+    
     //         textInverted: Colors.WHITE,
     //         iconInverted: Colors.WHITE,
     //         backgroundInverted: 'transparent',
     //         borderInverted: Colors.WHITE,
-    //
+    
     //         textHoverInverted: Colors.AUTHENTIC_BLUE_900,
     //         iconHoverInverted: Colors.AUTHENTIC_BLUE_900,
     //         backgroundHoverInverted: Colors.WHITE,
     //         borderHoverInverted: Colors.WHITE,
-    //
+    
     //         textDisabledInverted: Colors.AUTHENTIC_BLUE_550,
     //         iconDisabledInverted: Colors.AUTHENTIC_BLUE_550,
     //         backgroundDisabledInverted: 'transparent',
@@ -160,27 +230,27 @@ export const SemanticColors = {
     //         icon: Colors.WHITE,
     //         background: Colors.NEGATIVE_ORANGE_900,
     //         border: Colors.NEGATIVE_ORANGE_900,
-    //
+    
     //         textHover: Colors.WHITE,
     //         iconHover: Colors.WHITE,
     //         backgroundHover: Colors.NEGATIVE_ORANGE_1000,
     //         borderHover: Colors.NEGATIVE_ORANGE_1000,
-    //
+    
     //         textDisabled: Colors.WHITE,
     //         iconDisabled: Colors.WHITE,
     //         backgroundDisabled: Colors.AUTHENTIC_BLUE_200,
     //         borderDisabled: Colors.AUTHENTIC_BLUE_200,
-    //
+    
     //         textInverted: Colors.WHITE,
     //         iconInverted: Colors.WHITE,
     //         backgroundInverted: Colors.NEGATIVE_ORANGE_900,
     //         borderInverted: Colors.NEGATIVE_ORANGE_900,
-    //
+    
     //         textHoverInverted: Colors.WHITE,
     //         iconHoverInverted: Colors.WHITE,
     //         backgroundHoverInverted: Colors.NEGATIVE_ORANGE_1000,
     //         borderHoverInverted: Colors.NEGATIVE_ORANGE_1000,
-    //
+    
     //         textDisabledInverted: Colors.WHITE,
     //         iconDisabledInverted: Colors.WHITE,
     //         backgroundDisabledInverted: Colors.AUTHENTIC_BLUE_200,
@@ -195,7 +265,7 @@ export const SemanticColors = {
     //         iconHover: Colors.ACTION_BLUE_1000,
     //         textDisabled: Colors.AUTHENTIC_BLUE_200,
     //         iconDisabled: Colors.AUTHENTIC_BLUE_200,
-    //
+    
     //         textInverted: Colors.WHITE,
     //         iconInverted: Colors.WHITE,
     //         textHoverInverted: Colors.AUTHENTIC_BLUE_350,
@@ -210,7 +280,7 @@ export const SemanticColors = {
     //         iconHover: Colors.NEGATIVE_ORANGE_1000,
     //         textDisabled: Colors.AUTHENTIC_BLUE_200,
     //         iconDisabled: Colors.AUTHENTIC_BLUE_200,
-    //
+    
     //         textInverted: Colors.NEGATIVE_ORANGE_900,
     //         iconInverted: Colors.NEGATIVE_ORANGE_900,
     //         textHoverInverted: Colors.NEGATIVE_ORANGE_1000,
@@ -278,4 +348,4 @@ export const SemanticColors = {
     // dialog: {
     //     dimming: 'rgba(0, 15, 31, 0.6)'
     // }
-} satisfies ColorSchema;
+}
diff --git a/src/essentials/Colors/globalStyles.ts b/src/essentials/Colors/globalStyles.ts
@@ -1,16 +1,16 @@
-import { createGlobalStyle } from 'styled-components';
-import { SemanticColors as ClassicSemanticColors } from './Colors';
-import { SemanticColors as RedesignedSemanticColors } from './RedesignedColors';
-import { generateCssVariables } from '../../utils/generateCssVariables';
+// import { createGlobalStyle } from 'styled-components';
+// import { SemanticColors as ClassicSemanticColors } from './Colors';
+// import { SemanticColors as RedesignedSemanticColors } from './RedesignedColors';
+// import { generateCssVariables } from '../../utils/generateCssVariables';
 
-export const ClassicColors = createGlobalStyle`
-  :root {
-    ${generateCssVariables(ClassicSemanticColors)}
-  }
-`;
+// export const ClassicColors = createGlobalStyle`
+//   :root {
+//     /* ${generateCssVariables(ClassicSemanticColors)} */
+//   }
+// `;
 
-export const RedesignedColors = createGlobalStyle`
-  :root {
-    ${generateCssVariables(RedesignedSemanticColors)}
-  }
-`;
+// export const RedesignedColors = createGlobalStyle`
+//   :root {
+//     /* ${generateCssVariables(RedesignedSemanticColors)} */
+//   }
+// `;
diff --git a/src/utils/generateCssVariables.ts b/src/utils/generateCssVariables.ts
@@ -2,12 +2,17 @@ type TokenObject = {
     [key: string]: string | number | null | undefined | TokenObject;
 };
 
-const parseLevel = (tokenObject: TokenObject, path: string[] = []): ReadonlyArray<string> =>
+const parseLevel = (tokenObject: TokenObject, path: string[] = [], tier?: string): ReadonlyArray<string> =>
     Object.entries(tokenObject).flatMap(([key, value]) => {
         if (typeof value === 'object') {
-            return parseLevel(value, [...path, key]);
+            return parseLevel(value, [...path, key], tier);
         }
-        return `--${[...path, key].join('-')}: ${value};`;
+        // eslint-disable-next-line no-console
+        console.log(`--wave-${tier}-${[...path, key].join('-')}: ${value};`)
+        return `--wave-${tier}-${[...path, key].join('-')}: ${value};`;
     });
 
-export const generateCssVariables = (tokens: TokenObject) => parseLevel(tokens);
+// export const generateCssVariables = (tokens: TokenObject) => parseLevel(tokens, [], 'global');
+export const generateGlobalTierCssVariables = (tokens: TokenObject) => parseLevel(tokens, ['color'], 'g');
+export const generateSemanticTierCssVariables = (tokens: TokenObject) => parseLevel(tokens, ['color'], 's');
+export const generateComponentTierCssVariables = (tokens: TokenObject) => parseLevel(tokens, ['color'], 'c');
