Design tokens for Header component

src/components/tokens/_tokens.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 12 Aug 2024 17:38:58 GMT
+ * Generated on Sat, 17 Aug 2024 18:21:06 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;
@@ -379,17 +381,18 @@
   --token-set-order-8: components/checkbox;
   --token-set-order-9: components/cta;
   --token-set-order-10: components/fieldset;
-  --token-set-order-11: components/input;
-  --token-set-order-12: components/link;
-  --token-set-order-13: components/mainMenu;
-  --token-set-order-14: components/pager;
-  --token-set-order-15: components/radioButton;
-  --token-set-order-16: components/selectdropdown;
-  --token-set-order-17: components/status;
-  --token-set-order-18: components/table;
-  --token-set-order-19: components/tabs;
-  --token-set-order-20: components/textField;
-  --token-set-order-21: storybook;
+  --token-set-order-11: components/header;
+  --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;
   --emulsify-ui-kit-full: [object Object];
   --emulsify-global: [object Object];
   --emulsify-semantic: [object Object];

src/tokens/figma.tokens.json

@@ -1971,6 +1971,20 @@
       }
     }
   },
+  "components/header": {
+    "header": {
+      "search": {
+        "background": {
+          "value": "{color.primary.darker}",
+          "type": "color"
+        },
+        "text-icon": {
+          "value": "{color.text.white}",
+          "type": "color"
+        }
+      }
+    }
+  },
   "components/input": {
     "input": {
       "gap": {
@@ -3160,6 +3174,7 @@
       "components/checkbox",
       "components/cta",
       "components/fieldset",
+      "components/header",
       "components/input",
       "components/link",
       "components/mainMenu",

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": {
@@ -2396,46 +2408,50 @@
       "type": "other"
     },
     "11": {
-      "value": "components/input",
+      "value": "components/header",
       "type": "other"
     },
     "12": {
-      "value": "components/link",
+      "value": "components/input",
       "type": "other"
     },
     "13": {
-      "value": "components/mainMenu",
+      "value": "components/link",
       "type": "other"
     },
     "14": {
-      "value": "components/pager",
+      "value": "components/mainMenu",
       "type": "other"
     },
     "15": {
-      "value": "components/radioButton",
+      "value": "components/pager",
       "type": "other"
     },
     "16": {
-      "value": "components/selectdropdown",
+      "value": "components/radioButton",
       "type": "other"
     },
     "17": {
-      "value": "components/status",
+      "value": "components/selectdropdown",
       "type": "other"
     },
     "18": {
-      "value": "components/table",
+      "value": "components/status",
       "type": "other"
     },
     "19": {
-      "value": "components/tabs",
+      "value": "components/table",
       "type": "other"
     },
     "20": {
-      "value": "components/textField",
+      "value": "components/tabs",
       "type": "other"
     },
     "21": {
+      "value": "components/textField",
+      "type": "other"
+    },
+    "22": {
       "value": "storybook",
       "type": "other"
     }