Merge pull request #147 from emulsify-ds/header

Design tokens for Header component
emulsify-ds · Aug 22, 2024 · a5a1aa5 · a5a1aa5
2 parents 4a10cb6 + 3efcc04
commit a5a1aa5
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 22 deletions.
diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Aug 2024 17:36:21 GMT
+ * Generated on Thu, 22 Aug 2024 17:08:55 GMT
  */
 
 :root {
@@ -88,6 +88,8 @@
   --input-radius: 0.25rem;
   --input-label-lineheight: 125%;
   --input-bkg: #ffffff;
+  --header-search-background: #006089;
+  --header-search-text-icon: #ffffff;
   --fieldset-color-bg: white;
   --fieldset-color-border: #a9afb1;
   --fieldset-color-label: #00202e;
@@ -386,17 +388,18 @@
   --token-set-order-9: components/checkbox;
   --token-set-order-10: components/cta;
   --token-set-order-11: components/fieldset;
-  --token-set-order-12: components/input;
-  --token-set-order-13: components/link;
-  --token-set-order-14: components/mainMenu;
-  --token-set-order-15: components/pager;
-  --token-set-order-16: components/radioButton;
-  --token-set-order-17: components/selectdropdown;
-  --token-set-order-18: components/status;
-  --token-set-order-19: components/table;
-  --token-set-order-20: components/tabs;
-  --token-set-order-21: components/textField;
-  --token-set-order-22: storybook;
+  --token-set-order-12: components/header;
+  --token-set-order-13: components/input;
+  --token-set-order-14: components/link;
+  --token-set-order-15: components/mainMenu;
+  --token-set-order-16: components/pager;
+  --token-set-order-17: components/radioButton;
+  --token-set-order-18: components/selectdropdown;
+  --token-set-order-19: components/status;
+  --token-set-order-20: components/table;
+  --token-set-order-21: components/tabs;
+  --token-set-order-22: components/textField;
+  --token-set-order-23: storybook;
   --emulsify-ui-kit-full: [object Object];
   --emulsify-global: [object Object];
   --emulsify-semantic: [object Object];

diff --git a/src/tokens/figma.tokens.json b/src/tokens/figma.tokens.json
@@ -2005,6 +2005,20 @@
       }
     }
   },
+  "components/header": {
+    "header": {
+      "search": {
+        "background": {
+          "value": "{color.primary.darker}",
+          "type": "color"
+        },
+        "text-icon": {
+          "value": "{color.text.white}",
+          "type": "color"
+        }
+      }
+    }
+  },
   "components/input": {
     "input": {
       "gap": {
@@ -3195,6 +3209,7 @@
       "components/checkbox",
       "components/cta",
       "components/fieldset",
+      "components/header",
       "components/input",
       "components/link",
       "components/mainMenu",

diff --git a/src/tokens/transformed.tokens.json b/src/tokens/transformed.tokens.json
@@ -440,6 +440,18 @@
       "type": "color"
     }
   },
+  "header": {
+    "search": {
+      "background": {
+        "value": "#006089",
+        "type": "color"
+      },
+      "text-icon": {
+        "value": "#ffffff",
+        "type": "color"
+      }
+    }
+  },
   "fieldset": {
     "color": {
       "bg": {
@@ -2432,46 +2444,50 @@
       "type": "other"
     },
     "12": {
-      "value": "components/input",
+      "value": "components/header",
       "type": "other"
     },
     "13": {
-      "value": "components/link",
+      "value": "components/input",
       "type": "other"
     },
     "14": {
-      "value": "components/mainMenu",
+      "value": "components/link",
       "type": "other"
     },
     "15": {
-      "value": "components/pager",
+      "value": "components/mainMenu",
       "type": "other"
     },
     "16": {
-      "value": "components/radioButton",
+      "value": "components/pager",
       "type": "other"
     },
     "17": {
-      "value": "components/selectdropdown",
+      "value": "components/radioButton",
       "type": "other"
     },
     "18": {
-      "value": "components/status",
+      "value": "components/selectdropdown",
       "type": "other"
     },
     "19": {
-      "value": "components/table",
+      "value": "components/status",
       "type": "other"
     },
     "20": {
-      "value": "components/tabs",
+      "value": "components/table",
       "type": "other"
     },
     "21": {
-      "value": "components/textField",
+      "value": "components/tabs",
       "type": "other"
     },
     "22": {
+      "value": "components/textField",
+      "type": "other"
+    },
+    "23": {
       "value": "storybook",
       "type": "other"
     }