Merge pull request #143 from emulsify-ds/banner

Design tokens for Banner component
emulsify-ds · Aug 22, 2024 · 4a10cb6 · 4a10cb6
2 parents 33bb1eb + 6088c44
commit 4a10cb6
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 36 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 Mon, 12 Aug 2024 17:38:58 GMT
+ * Generated on Tue, 13 Aug 2024 17:36:21 GMT
  */
 
 :root {
@@ -148,6 +148,12 @@
   --breadcrumb-text-hover: #192125;
   --block-quote-padding-x: 2rem;
   --block-quote-padding-y: 0.5rem;
+  --banner-button-text: #00202e;
+  --banner-button-border: #ffffff;
+  --banner-button-background: #9ce1ff;
+  --banner-text: #ffffff;
+  --banner-background: #006089;
+  --banner-background-opacity: 0.75;
   --announcement-background-default: #ffffff;
   --announcement-background-light: #9ce1ff;
   --announcement-background-dark: #006089;
@@ -372,24 +378,25 @@
   --token-set-order-1: semantic;
   --token-set-order-2: components/accordion;
   --token-set-order-3: components/announcement;
-  --token-set-order-4: components/blockQuote;
-  --token-set-order-5: components/breadcrumbs;
-  --token-set-order-6: components/button;
-  --token-set-order-7: components/card;
-  --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-4: components/banner;
+  --token-set-order-5: components/blockQuote;
+  --token-set-order-6: components/breadcrumbs;
+  --token-set-order-7: components/button;
+  --token-set-order-8: components/card;
+  --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;
   --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
@@ -1645,6 +1645,40 @@
       }
     }
   },
+  "components/banner": {
+    "banner": {
+      "button": {
+        "text": {
+          "value": "{color.text.body}",
+          "type": "color"
+        },
+        "border": {
+          "value": "{color.text.white}",
+          "type": "color"
+        },
+        "background": {
+          "value": "{color.primary.lighter}",
+          "type": "color"
+        }
+      },
+      "text": {
+        "value": "{color.text.white}",
+        "type": "color",
+        "subheading": {
+          "value": "{color.text.white}",
+          "type": "color"
+        }
+      },
+      "background": {
+        "value": "{color.primary.darker}",
+        "type": "color"
+      },
+      "background-opacity": {
+        "value": "0.75",
+        "type": "opacity"
+      }
+    }
+  },
   "components/blockQuote": {
     "blockQuote": {
       "padding": {
@@ -3153,6 +3187,7 @@
       "semantic",
       "components/accordion",
       "components/announcement",
+      "components/banner",
       "components/blockQuote",
       "components/breadcrumbs",
       "components/button",

diff --git a/src/tokens/transformed.tokens.json b/src/tokens/transformed.tokens.json
@@ -764,6 +764,38 @@
       }
     }
   },
+  "banner": {
+    "button": {
+      "text": {
+        "value": "#00202e",
+        "type": "color"
+      },
+      "border": {
+        "value": "#ffffff",
+        "type": "color"
+      },
+      "background": {
+        "value": "#9ce1ff",
+        "type": "color"
+      }
+    },
+    "text": {
+      "value": "#ffffff",
+      "type": "color",
+      "subheading": {
+        "value": "{color.text.white}",
+        "type": "color"
+      }
+    },
+    "background": {
+      "value": "#006089",
+      "type": "color"
+    },
+    "background-opacity": {
+      "value": 0.75,
+      "type": "opacity"
+    }
+  },
   "announcement": {
     "background": {
       "default": {
@@ -2368,74 +2400,78 @@
       "type": "other"
     },
     "4": {
-      "value": "components/blockQuote",
+      "value": "components/banner",
       "type": "other"
     },
     "5": {
-      "value": "components/breadcrumbs",
+      "value": "components/blockQuote",
       "type": "other"
     },
     "6": {
-      "value": "components/button",
+      "value": "components/breadcrumbs",
       "type": "other"
     },
     "7": {
-      "value": "components/card",
+      "value": "components/button",
       "type": "other"
     },
     "8": {
-      "value": "components/checkbox",
+      "value": "components/card",
       "type": "other"
     },
     "9": {
-      "value": "components/cta",
+      "value": "components/checkbox",
       "type": "other"
     },
     "10": {
-      "value": "components/fieldset",
+      "value": "components/cta",
       "type": "other"
     },
     "11": {
-      "value": "components/input",
+      "value": "components/fieldset",
       "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"
     }