From e43f9816c40a88fa10eac8d9c31efed10ef8f660 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mariana=20N=C3=BA=C3=B1ez?= <48533432+mariannuar@users.noreply.github.com> Date: Mon, 12 Aug 2024 17:26:51 -0600 Subject: [PATCH 1/3] create tokens for banner - wip --- src/tokens/figma.tokens.json | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/src/tokens/figma.tokens.json b/src/tokens/figma.tokens.json index e14447aa..316784c6 100644 --- a/src/tokens/figma.tokens.json +++ b/src/tokens/figma.tokens.json @@ -1645,6 +1645,7 @@ } } }, + "components/banner": {}, "components/blockQuote": { "blockQuote": { "padding": { @@ -2672,7 +2673,8 @@ "components/table": "enabled", "components/tabs": "enabled", "components/textField": "enabled", - "semantic": "enabled" + "semantic": "enabled", + "components/banner": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:16908", "$figmaModeId": "23237:10", @@ -2860,7 +2862,8 @@ "name": "Emulsify Global", "$figmaStyleReferences": {}, "selectedTokenSets": { - "global": "enabled" + "global": "enabled", + "components/banner": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17089", "$figmaModeId": "23237:11", @@ -2912,7 +2915,8 @@ "name": "Emulsify Semantic", "$figmaStyleReferences": {}, "selectedTokenSets": { - "semantic": "enabled" + "semantic": "enabled", + "components/banner": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17133", "$figmaModeId": "23237:12", @@ -2934,7 +2938,8 @@ "name": "Emulsify Storybook only", "$figmaStyleReferences": {}, "selectedTokenSets": { - "storybook": "source" + "storybook": "source", + "components/banner": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17144", "$figmaModeId": "23237:13", @@ -2962,7 +2967,8 @@ "components/status": "enabled", "components/table": "enabled", "components/tabs": "enabled", - "components/textField": "enabled" + "components/textField": "enabled", + "components/banner": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17145", "$figmaModeId": "23237:14", @@ -3115,7 +3121,8 @@ "components/table": "enabled", "components/tabs": "enabled", "components/textField": "enabled", - "semantic": "enabled" + "semantic": "enabled", + "components/banner": "disabled" }, "group": "WUP" }, @@ -3142,7 +3149,8 @@ "components/status": "enabled", "components/table": "enabled", "components/tabs": "enabled", - "components/textField": "enabled" + "components/textField": "enabled", + "components/banner": "disabled" }, "group": "WUP" } @@ -3153,6 +3161,7 @@ "semantic", "components/accordion", "components/announcement", + "components/banner", "components/blockQuote", "components/breadcrumbs", "components/button", From 5224046cd623724aeac9c601702fee3ad68aad4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mariana=20N=C3=BA=C3=B1ez?= <48533432+mariannuar@users.noreply.github.com> Date: Tue, 13 Aug 2024 11:32:04 -0600 Subject: [PATCH 2/3] final tokens for banner --- src/tokens/figma.tokens.json | 56 ++++++++++++++++++++++++++---------- 1 file changed, 41 insertions(+), 15 deletions(-) diff --git a/src/tokens/figma.tokens.json b/src/tokens/figma.tokens.json index 316784c6..97c8c8a6 100644 --- a/src/tokens/figma.tokens.json +++ b/src/tokens/figma.tokens.json @@ -1645,7 +1645,40 @@ } } }, - "components/banner": {}, + "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": { @@ -2673,8 +2706,7 @@ "components/table": "enabled", "components/tabs": "enabled", "components/textField": "enabled", - "semantic": "enabled", - "components/banner": "disabled" + "semantic": "enabled" }, "$figmaCollectionId": "VariableCollectionId:23237:16908", "$figmaModeId": "23237:10", @@ -2862,8 +2894,7 @@ "name": "Emulsify Global", "$figmaStyleReferences": {}, "selectedTokenSets": { - "global": "enabled", - "components/banner": "disabled" + "global": "enabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17089", "$figmaModeId": "23237:11", @@ -2915,8 +2946,7 @@ "name": "Emulsify Semantic", "$figmaStyleReferences": {}, "selectedTokenSets": { - "semantic": "enabled", - "components/banner": "disabled" + "semantic": "enabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17133", "$figmaModeId": "23237:12", @@ -2938,8 +2968,7 @@ "name": "Emulsify Storybook only", "$figmaStyleReferences": {}, "selectedTokenSets": { - "storybook": "source", - "components/banner": "disabled" + "storybook": "source" }, "$figmaCollectionId": "VariableCollectionId:23237:17144", "$figmaModeId": "23237:13", @@ -2967,8 +2996,7 @@ "components/status": "enabled", "components/table": "enabled", "components/tabs": "enabled", - "components/textField": "enabled", - "components/banner": "disabled" + "components/textField": "enabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17145", "$figmaModeId": "23237:14", @@ -3121,8 +3149,7 @@ "components/table": "enabled", "components/tabs": "enabled", "components/textField": "enabled", - "semantic": "enabled", - "components/banner": "disabled" + "semantic": "enabled" }, "group": "WUP" }, @@ -3149,8 +3176,7 @@ "components/status": "enabled", "components/table": "enabled", "components/tabs": "enabled", - "components/textField": "enabled", - "components/banner": "disabled" + "components/textField": "enabled" }, "group": "WUP" } From 6088c4477b183c10e72122e782585703f85e2fe8 Mon Sep 17 00:00:00 2001 From: mariannuar Date: Tue, 13 Aug 2024 17:36:23 +0000 Subject: [PATCH 3/3] feat: create tokens --- src/components/tokens/_tokens.scss | 45 +++++++++++-------- src/tokens/transformed.tokens.json | 70 ++++++++++++++++++++++-------- 2 files changed, 79 insertions(+), 36 deletions(-) diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss index f091c608..af027f46 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/transformed.tokens.json b/src/tokens/transformed.tokens.json index 56133545..16186804 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" }