diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss index f091c60..af027f4 100644 --- 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 index e14447a..97c8c8a 100644 --- 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 index 5613354..1618680 100644 --- 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" }