Merge pull request #159 from emulsify-ds/tooltip

Design tokens for Tooltip component
emulsify-ds · Nov 21, 2024 · 299bd72 · 299bd72
2 parents 594c18b + 769d2cd
commit 299bd72
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 21 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": {
@@ -2787,7 +2811,8 @@
         "components/banner": "enabled",
         "components/footer": "enabled",
         "components/header": "enabled",
-        "components/utilityMenu": "disabled"
+        "components/utilityMenu": "enabled",
+        "components/tooltip": "enabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:16908",
       "$figmaModeId": "23237:10",
@@ -2975,8 +3000,7 @@
       "name": "Emulsify Global",
       "$figmaStyleReferences": {},
       "selectedTokenSets": {
-        "global": "enabled",
-        "components/utilityMenu": "disabled"
+        "global": "enabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:17089",
       "$figmaModeId": "23237:11",
@@ -3028,8 +3052,7 @@
       "name": "Emulsify Semantic",
       "$figmaStyleReferences": {},
       "selectedTokenSets": {
-        "semantic": "enabled",
-        "components/utilityMenu": "disabled"
+        "semantic": "enabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:17133",
       "$figmaModeId": "23237:12",
@@ -3051,8 +3074,7 @@
       "name": "Emulsify Storybook only",
       "$figmaStyleReferences": {},
       "selectedTokenSets": {
-        "storybook": "source",
-        "components/utilityMenu": "disabled"
+        "storybook": "source"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:17144",
       "$figmaModeId": "23237:13",
@@ -3081,7 +3103,8 @@
         "components/table": "enabled",
         "components/tabs": "enabled",
         "components/textField": "enabled",
-        "components/utilityMenu": "disabled"
+        "components/utilityMenu": "enabled",
+        "components/tooltip": "enabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:17145",
       "$figmaModeId": "23237:14",
@@ -3235,7 +3258,8 @@
         "components/tabs": "enabled",
         "components/textField": "enabled",
         "semantic": "enabled",
-        "components/utilityMenu": "disabled"
+        "components/utilityMenu": "enabled",
+        "components/tooltip": "enabled"
       },
       "group": "WUP"
     },
@@ -3263,7 +3287,8 @@
         "components/table": "enabled",
         "components/tabs": "enabled",
         "components/textField": "enabled",
-        "components/utilityMenu": "disabled"
+        "components/utilityMenu": "enabled",
+        "components/tooltip": "enabled"
       },
       "group": "WUP"
     }
@@ -3295,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/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"
     }
@@ -2799,7 +2825,8 @@
       "components/banner": "enabled",
       "components/footer": "enabled",
       "components/header": "enabled",
-      "components/utilityMenu": "disabled"
+      "components/utilityMenu": "enabled",
+      "components/tooltip": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:16908",
     "$figmaModeId": "23237:10",
@@ -2988,8 +3015,7 @@
     "id": "0a5c4562bd35f00ce8a339239980a3842147c0bd",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "global": "enabled",
-      "components/utilityMenu": "disabled"
+      "global": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:17089",
     "$figmaModeId": "23237:11",
@@ -3042,8 +3068,7 @@
     "id": "ca91148967a5dcc80f7e50f6ccfe35b30efd5f2f",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "semantic": "enabled",
-      "components/utilityMenu": "disabled"
+      "semantic": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:17133",
     "$figmaModeId": "23237:12",
@@ -3066,8 +3091,7 @@
     "id": "16a10d373d39988a75c7d612cd449a633f373c44",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "storybook": "source",
-      "components/utilityMenu": "disabled"
+      "storybook": "source"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:17144",
     "$figmaModeId": "23237:13",
@@ -3097,7 +3121,8 @@
       "components/table": "enabled",
       "components/tabs": "enabled",
       "components/textField": "enabled",
-      "components/utilityMenu": "disabled"
+      "components/utilityMenu": "enabled",
+      "components/tooltip": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:17145",
     "$figmaModeId": "23237:14",
@@ -3252,7 +3277,8 @@
       "components/tabs": "enabled",
       "components/textField": "enabled",
       "semantic": "enabled",
-      "components/utilityMenu": "disabled"
+      "components/utilityMenu": "enabled",
+      "components/tooltip": "enabled"
     },
     "group": "WUP",
     "type": "other",
@@ -3281,7 +3307,8 @@
       "components/table": "enabled",
       "components/tabs": "enabled",
       "components/textField": "enabled",
-      "components/utilityMenu": "disabled"
+      "components/utilityMenu": "enabled",
+      "components/tooltip": "enabled"
     },
     "group": "WUP",
     "type": "other",