Merge branch 'main' of github.com:emulsify-ds/emulsify-ui-kit into sd…

…c-cleanup * 'main' of github.com:emulsify-ds/emulsify-ui-kit: feat: create tokens fix(utility-menu): change extension of file fix(utility-menu): revert fix because it wasn't a typo feat: create tokens fix(utility-menu): fixes typo Design tokens for tooltip feat: create tokens Design tokens for Utility Menu feat: create tokens Design tokens for Tooltip component
emulsify-ds · Nov 22, 2024 · 1072602 · 1072602
2 parents 6912f65 + 299bd72
commit 1072602
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 9 deletions.
diff --git a/src/tokens/figma.tokens.json b/src/tokens/figma.tokens.json
@@ -2520,6 +2520,30 @@
       }
     }
   },
+  "components/tooltip": {
+    "tooltip": {
+      "background": {
+        "dark": {
+          "value": "{color.grays.900}",
+          "type": "color"
+        },
+        "light": {
+          "value": "{color.grays.200}",
+          "type": "color"
+        }
+      },
+      "icon": {
+        "color": {
+          "value": "{color.text.white}",
+          "type": "color"
+        },
+        "background": {
+          "value": "{color.primary.dark}",
+          "type": "color"
+        }
+      }
+    }
+  },
   "storybook": {
     "colors": {
       "sb": {
@@ -2786,7 +2810,9 @@
         "components/announcement": "enabled",
         "components/banner": "enabled",
         "components/footer": "enabled",
-        "components/header": "enabled"
+        "components/header": "enabled",
+        "components/utilityMenu": "enabled",
+        "components/tooltip": "enabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:16908",
       "$figmaModeId": "23237:10",
@@ -3076,7 +3102,9 @@
         "components/status": "enabled",
         "components/table": "enabled",
         "components/tabs": "enabled",
-        "components/textField": "enabled"
+        "components/textField": "enabled",
+        "components/utilityMenu": "enabled",
+        "components/tooltip": "enabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:17145",
       "$figmaModeId": "23237:14",
@@ -3229,7 +3257,9 @@
         "components/table": "enabled",
         "components/tabs": "enabled",
         "components/textField": "enabled",
-        "semantic": "enabled"
+        "semantic": "enabled",
+        "components/utilityMenu": "enabled",
+        "components/tooltip": "enabled"
       },
       "group": "WUP"
     },
@@ -3256,7 +3286,9 @@
         "components/status": "enabled",
         "components/table": "enabled",
         "components/tabs": "enabled",
-        "components/textField": "enabled"
+        "components/textField": "enabled",
+        "components/utilityMenu": "enabled",
+        "components/tooltip": "enabled"
       },
       "group": "WUP"
     }
@@ -3288,6 +3320,7 @@
       "components/table",
       "components/tabs",
       "components/textField",
+      "components/tooltip",
       "storybook"
     ]
   }

diff --git a/src/tokens/tokens.scss b/src/tokens/tokens.scss
@@ -7,6 +7,10 @@
   --colors-sb-text-body: #00202e;
   --colors-sb-text-heading: #0080b7;
   --colors-sb-visualization: #009fe4;
+  --tooltip-background-dark: #101618;
+  --tooltip-background-light: #d4d7d8;
+  --tooltip-icon-color: #ffffff;
+  --tooltip-icon-background: #0080b7;
   --text-field-border-width: 1px;
   --text-field-radius: 0.625rem;
   --text-field-border: [object Object];
@@ -411,7 +415,8 @@
   --token-set-order-22: components/table;
   --token-set-order-23: components/tabs;
   --token-set-order-24: components/textField;
-  --token-set-order-25: storybook;
+  --token-set-order-25: components/tooltip;
+  --token-set-order-26: storybook;
   --emulsify-ui-kit-full: [object Object];
   --emulsify-global: [object Object];
   --emulsify-semantic: [object Object];

diff --git a/src/tokens/tokensTransform.js → src/tokens/tokensTransform.mjs b/src/tokens/tokensTransform.js → src/tokens/tokensTransform.mjs
diff --git a/src/tokens/transformed.tokens.json b/src/tokens/transformed.tokens.json
@@ -21,6 +21,28 @@
       }
     }
   },
+  "tooltip": {
+    "background": {
+      "dark": {
+        "value": "#101618",
+        "type": "color"
+      },
+      "light": {
+        "value": "#d4d7d8",
+        "type": "color"
+      }
+    },
+    "icon": {
+      "color": {
+        "value": "#ffffff",
+        "type": "color"
+      },
+      "background": {
+        "value": "#0080b7",
+        "type": "color"
+      }
+    }
+  },
   "textField": {
     "borderWidth": {
       "value": 1,
@@ -2554,6 +2576,10 @@
       "type": "other"
     },
     "25": {
+      "value": "components/tooltip",
+      "type": "other"
+    },
+    "26": {
       "value": "storybook",
       "type": "other"
     }
@@ -2798,7 +2824,9 @@
       "components/announcement": "enabled",
       "components/banner": "enabled",
       "components/footer": "enabled",
-      "components/header": "enabled"
+      "components/header": "enabled",
+      "components/utilityMenu": "enabled",
+      "components/tooltip": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:16908",
     "$figmaModeId": "23237:10",
@@ -3092,7 +3120,9 @@
       "components/status": "enabled",
       "components/table": "enabled",
       "components/tabs": "enabled",
-      "components/textField": "enabled"
+      "components/textField": "enabled",
+      "components/utilityMenu": "enabled",
+      "components/tooltip": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:17145",
     "$figmaModeId": "23237:14",
@@ -3246,7 +3276,9 @@
       "components/table": "enabled",
       "components/tabs": "enabled",
       "components/textField": "enabled",
-      "semantic": "enabled"
+      "semantic": "enabled",
+      "components/utilityMenu": "enabled",
+      "components/tooltip": "enabled"
     },
     "group": "WUP",
     "type": "other",
@@ -3274,7 +3306,9 @@
       "components/status": "enabled",
       "components/table": "enabled",
       "components/tabs": "enabled",
-      "components/textField": "enabled"
+      "components/textField": "enabled",
+      "components/utilityMenu": "enabled",
+      "components/tooltip": "enabled"
     },
     "group": "WUP",
     "type": "other",