From 583ae153f796f24a4ab780b2df4f6ace80dd42d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mariana=20N=C3=BA=C3=B1ez?= <48533432+mariannuar@users.noreply.github.com> Date: Sat, 17 Aug 2024 12:12:18 -0600 Subject: [PATCH 1/4] create design tokens for header --- 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..15fd2228 100644 --- a/src/tokens/figma.tokens.json +++ b/src/tokens/figma.tokens.json @@ -1971,6 +1971,7 @@ } } }, + "components/header": {}, "components/input": { "input": { "gap": { @@ -2672,7 +2673,8 @@ "components/table": "enabled", "components/tabs": "enabled", "components/textField": "enabled", - "semantic": "enabled" + "semantic": "enabled", + "components/header": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:16908", "$figmaModeId": "23237:10", @@ -2860,7 +2862,8 @@ "name": "Emulsify Global", "$figmaStyleReferences": {}, "selectedTokenSets": { - "global": "enabled" + "global": "enabled", + "components/header": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17089", "$figmaModeId": "23237:11", @@ -2912,7 +2915,8 @@ "name": "Emulsify Semantic", "$figmaStyleReferences": {}, "selectedTokenSets": { - "semantic": "enabled" + "semantic": "enabled", + "components/header": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17133", "$figmaModeId": "23237:12", @@ -2934,7 +2938,8 @@ "name": "Emulsify Storybook only", "$figmaStyleReferences": {}, "selectedTokenSets": { - "storybook": "source" + "storybook": "source", + "components/header": "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/header": "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/header": "disabled" }, "group": "WUP" }, @@ -3142,7 +3149,8 @@ "components/status": "enabled", "components/table": "enabled", "components/tabs": "enabled", - "components/textField": "enabled" + "components/textField": "enabled", + "components/header": "disabled" }, "group": "WUP" } @@ -3160,6 +3168,7 @@ "components/checkbox", "components/cta", "components/fieldset", + "components/header", "components/input", "components/link", "components/mainMenu", From 03b7d57c809188b1a5a3aefdf035830438880fca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mariana=20N=C3=BA=C3=B1ez?= <48533432+mariannuar@users.noreply.github.com> Date: Sat, 17 Aug 2024 12:19:02 -0600 Subject: [PATCH 2/4] design tokens for header component --- src/tokens/figma.tokens.json | 36 +++++++++++++++++++++--------------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/src/tokens/figma.tokens.json b/src/tokens/figma.tokens.json index 15fd2228..892ed352 100644 --- a/src/tokens/figma.tokens.json +++ b/src/tokens/figma.tokens.json @@ -1971,7 +1971,20 @@ } } }, - "components/header": {}, + "components/header": { + "header": { + "search": { + "background": { + "value": "{color.primary.darker}", + "type": "color" + }, + "text-icon": { + "value": "{color.text.white}", + "type": "color" + } + } + } + }, "components/input": { "input": { "gap": { @@ -2673,8 +2686,7 @@ "components/table": "enabled", "components/tabs": "enabled", "components/textField": "enabled", - "semantic": "enabled", - "components/header": "disabled" + "semantic": "enabled" }, "$figmaCollectionId": "VariableCollectionId:23237:16908", "$figmaModeId": "23237:10", @@ -2862,8 +2874,7 @@ "name": "Emulsify Global", "$figmaStyleReferences": {}, "selectedTokenSets": { - "global": "enabled", - "components/header": "disabled" + "global": "enabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17089", "$figmaModeId": "23237:11", @@ -2915,8 +2926,7 @@ "name": "Emulsify Semantic", "$figmaStyleReferences": {}, "selectedTokenSets": { - "semantic": "enabled", - "components/header": "disabled" + "semantic": "enabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17133", "$figmaModeId": "23237:12", @@ -2938,8 +2948,7 @@ "name": "Emulsify Storybook only", "$figmaStyleReferences": {}, "selectedTokenSets": { - "storybook": "source", - "components/header": "disabled" + "storybook": "source" }, "$figmaCollectionId": "VariableCollectionId:23237:17144", "$figmaModeId": "23237:13", @@ -2967,8 +2976,7 @@ "components/status": "enabled", "components/table": "enabled", "components/tabs": "enabled", - "components/textField": "enabled", - "components/header": "disabled" + "components/textField": "enabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17145", "$figmaModeId": "23237:14", @@ -3121,8 +3129,7 @@ "components/table": "enabled", "components/tabs": "enabled", "components/textField": "enabled", - "semantic": "enabled", - "components/header": "disabled" + "semantic": "enabled" }, "group": "WUP" }, @@ -3149,8 +3156,7 @@ "components/status": "enabled", "components/table": "enabled", "components/tabs": "enabled", - "components/textField": "enabled", - "components/header": "disabled" + "components/textField": "enabled" }, "group": "WUP" } From 4d3d70251948fe14b20fcce92edea951e52a919d Mon Sep 17 00:00:00 2001 From: mariannuar Date: Sat, 17 Aug 2024 18:21:08 +0000 Subject: [PATCH 3/4] feat: create tokens --- src/components/tokens/_tokens.scss | 27 ++++++++++++---------- src/tokens/transformed.tokens.json | 36 +++++++++++++++++++++--------- 2 files changed, 41 insertions(+), 22 deletions(-) diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss index f091c608..3ef8ac2e 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 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]; diff --git a/src/tokens/transformed.tokens.json b/src/tokens/transformed.tokens.json index 56133545..b26419df 100644 --- 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": { @@ -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" } From 3efcc04f6ee1dc21ab3cd1d57eb02d6fb20d800c Mon Sep 17 00:00:00 2001 From: mariannuar Date: Thu, 22 Aug 2024 17:08:56 +0000 Subject: [PATCH 4/4] feat: create tokens --- src/components/tokens/_tokens.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss index 7448f7ba..9fe7358e 100644 --- a/src/components/tokens/_tokens.scss +++ b/src/components/tokens/_tokens.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 22 Aug 2024 17:05:06 GMT + * Generated on Thu, 22 Aug 2024 17:08:55 GMT */ :root {