From 7b965ec219bcd95515045578549279dad2e251d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mariana=20N=C3=BA=C3=B1ez?= <48533432+mariannuar@users.noreply.github.com> Date: Thu, 5 Sep 2024 16:32:29 -0600 Subject: [PATCH 1/6] Design tokens for Utility Menu --- src/tokens/figma.tokens.json | 102 ++++++++++++++++++++++------------- 1 file changed, 65 insertions(+), 37 deletions(-) diff --git a/src/tokens/figma.tokens.json b/src/tokens/figma.tokens.json index a358402..0af6df5 100644 --- a/src/tokens/figma.tokens.json +++ b/src/tokens/figma.tokens.json @@ -2176,6 +2176,26 @@ } } }, + "components/utilityMenu": { + "utilityMenu": { + "color": { + "bg": { + "value": "{color.white}", + "type": "color" + }, + "link": { + "default": { + "value": "{color.primary.darker}", + "type": "color" + }, + "hover": { + "value": "{color.primary.dark}", + "type": "color" + } + } + } + } + }, "components/pager": { "pager": { "color": { @@ -2620,15 +2640,6 @@ "pager.text.hover": "S:d5268cc95f0ca68a28f35d87395f9ce37893fe23,", "pager.text.focus": "S:d03b986e8d65e0c71a1837ec7325ffbce6d6aaa7,", "pager.fill.hover": "S:5bdc99f7ec11756cdef48ec3e13c9b4dd6f4ea81,", - "mainMenu.color.bg": "S:bf2522b49aa417ce534b5208e0f6beef55486cf3,", - "mainMenu.color.link.bg": "S:b11ab65866a7661d8fc26a7a62b099ef30061f50,", - "mainMenu.color.link.bg-hover": "S:af6ac50c749eaa990fbd9ffed40c1b9674a723a4,", - "mainMenu.color.link.label": "S:743bcf21f9c07a7963a7edb4225d95bca9b41703,", - "mainMenu.color.link.label-hover": "S:93bfd2e3b7bbd01dc37c4f80afe8e75e9924fdaf,", - "mainMenu.color.dropdown.bg": "S:79daec1641db62001cff89e93435729c39710614,", - "mainMenu.color.dropdown.bg-hover": "S:badcf257ef0a5a278b895483c36799c19afa98a4,", - "mainMenu.color.dropdown.label": "S:77771443996903bcb2c28595214f9e3a0c71d7e9,", - "mainMenu.color.dropdown.label-hover": "S:c3a0a9d457ae44f6f0e45c6a5c57e3bd57467383,", "link.default": "S:9fd4db376033a945bbc2bf5bfe8a698e68bd6f1a,", "link.hover": "S:e6b1afc9022d41b4217e773a9ab4abf90329cf46,", "color.fieldset.bg": "S:bfe975e6026fa7f0aa7fd11985d9ebaeb6565d17,", @@ -2731,7 +2742,16 @@ "color.grays.900": "S:d14dafeba041e023bd5c5d2c458c10f88801e824,", "color.grays.1000": "S:588f6731fa9753788b0b48bb7c575f3b94991a69,", "checkbox.color.label": "S:dd27f922df752738d999c185f11b67e77134feac,", - "checkbox.color.label-disabled": "S:72b6ef5a238e1bf6f232f7f0dc8f27095a075e3f," + "checkbox.color.label-disabled": "S:72b6ef5a238e1bf6f232f7f0dc8f27095a075e3f,", + "utilityMenu.color.bg": "S:bf2522b49aa417ce534b5208e0f6beef55486cf3,", + "utilityMenu.color.link.bg": "S:b11ab65866a7661d8fc26a7a62b099ef30061f50,", + "utilityMenu.color.link.label-hover": "S:93bfd2e3b7bbd01dc37c4f80afe8e75e9924fdaf,", + "utilityMenu.color.dropdown.bg": "S:79daec1641db62001cff89e93435729c39710614,", + "utilityMenu.color.dropdown.bg-hover": "S:badcf257ef0a5a278b895483c36799c19afa98a4,", + "utilityMenu.color.dropdown.label": "S:77771443996903bcb2c28595214f9e3a0c71d7e9,", + "utilityMenu.color.dropdown.label-hover": "S:c3a0a9d457ae44f6f0e45c6a5c57e3bd57467383,", + "utilityMenu.color.link.default": "S:af6ac50c749eaa990fbd9ffed40c1b9674a723a4,", + "utilityMenu.color.link.hover": "S:743bcf21f9c07a7963a7edb4225d95bca9b41703," }, "selectedTokenSets": { "global": "enabled", @@ -2758,7 +2778,8 @@ "components/announcement": "enabled", "components/banner": "enabled", "components/footer": "enabled", - "components/header": "enabled" + "components/header": "enabled", + "components/utilityMenu": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:16908", "$figmaModeId": "23237:10", @@ -2808,15 +2829,6 @@ "pager.text.hover": "2e1149296e028f68d0590547182eb3fa046b0799", "pager.text.focus": "f597287eb8465595918f5af8c56a3f803417cf81", "pager.fill.hover": "e7c4c208bc4d7ed93b94794070642830984f1687", - "mainMenu.color.bg": "9b1706999c4ef658c6b885428bf9f6a3058eba23", - "mainMenu.color.link.bg": "9fe948d4cb455eec777d28db8baa8046d75174c2", - "mainMenu.color.link.bg-hover": "29ea5911b9675ae3920cf9f26602f612fe9e33d5", - "mainMenu.color.link.label": "a28d88530a052b75025ad58244a622f52538ffdb", - "mainMenu.color.link.label-hover": "cd95962e180170545de51bf2995158682ea61805", - "mainMenu.color.dropdown.bg": "4fcd08018cb0ac6de9ae851dfdb35da945fc9128", - "mainMenu.color.dropdown.bg-hover": "25fdd7d0cc2e181e8290710f0f489248ad541477", - "mainMenu.color.dropdown.label": "1ab6130383e91011e698dd88b0fc4fce93f24d83", - "mainMenu.color.dropdown.label-hover": "2b680d5fc3c7c9c9b5e245400274c58f66cc6268", "link.default": "52f2a6ae3ef87bb2b4c96e2b8316e609a1f3e4e0", "link.hover": "602f312f7c40299996ccaf31cd8340e88ddcd6a8", "input.color.label": "40806b82869b549ff22858fd677df5c1c6d22cad", @@ -2938,7 +2950,16 @@ "checkbox.spacing.gap": "59fbad63c0994ee956f8790e994534f9f5f5e922", "checkbox.color.label": "4db65c0b61319b6c85cdb9c1b683d84e2f65ff52", "checkbox.color.label-disabled": "3a5dec39f06f92904d80c2096f9c439ae0b5d09a", - "color.link-hover": "74d0f74b830a9dd07279967cea7c9f662178e310" + "color.link-hover": "74d0f74b830a9dd07279967cea7c9f662178e310", + "utilityMenu.color.bg": "9b1706999c4ef658c6b885428bf9f6a3058eba23", + "utilityMenu.color.link.bg": "9fe948d4cb455eec777d28db8baa8046d75174c2", + "utilityMenu.color.link.label-hover": "cd95962e180170545de51bf2995158682ea61805", + "utilityMenu.color.dropdown.bg": "4fcd08018cb0ac6de9ae851dfdb35da945fc9128", + "utilityMenu.color.dropdown.bg-hover": "25fdd7d0cc2e181e8290710f0f489248ad541477", + "utilityMenu.color.dropdown.label": "1ab6130383e91011e698dd88b0fc4fce93f24d83", + "utilityMenu.color.dropdown.label-hover": "2b680d5fc3c7c9c9b5e245400274c58f66cc6268", + "utilityMenu.color.link.default": "29ea5911b9675ae3920cf9f26602f612fe9e33d5", + "utilityMenu.color.link.hover": "a28d88530a052b75025ad58244a622f52538ffdb" } }, { @@ -2946,7 +2967,8 @@ "name": "Emulsify Global", "$figmaStyleReferences": {}, "selectedTokenSets": { - "global": "enabled" + "global": "enabled", + "components/utilityMenu": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17089", "$figmaModeId": "23237:11", @@ -2998,7 +3020,8 @@ "name": "Emulsify Semantic", "$figmaStyleReferences": {}, "selectedTokenSets": { - "semantic": "enabled" + "semantic": "enabled", + "components/utilityMenu": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17133", "$figmaModeId": "23237:12", @@ -3020,7 +3043,8 @@ "name": "Emulsify Storybook only", "$figmaStyleReferences": {}, "selectedTokenSets": { - "storybook": "source" + "storybook": "source", + "components/utilityMenu": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17144", "$figmaModeId": "23237:13", @@ -3048,7 +3072,8 @@ "components/status": "enabled", "components/table": "enabled", "components/tabs": "enabled", - "components/textField": "enabled" + "components/textField": "enabled", + "components/utilityMenu": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17145", "$figmaModeId": "23237:14", @@ -3094,15 +3119,6 @@ "pager.text.hover": "067e5560a9bcaee73e961d449ec580cabede8a17", "pager.text.focus": "039853336af697ea5a3d09db6b64f78e7c45c35d", "pager.fill.hover": "64071b977256beb9e45651dbbe696ac3dfb389d3", - "mainMenu.color.bg": "a51943758f0fa8a2af6ca92227fd91c67560e4b8", - "mainMenu.color.link.bg": "87170e49f0fdf73cfd66128db96c4441e700f071", - "mainMenu.color.link.bg-hover": "d2185c2db3e4a1b77be017df0fb5f3376c756f50", - "mainMenu.color.link.label": "4c190c6dffed1c15773123f079e53c195ae53054", - "mainMenu.color.link.label-hover": "7083b097eec3b0e13eb3c41105a6042afe4c575d", - "mainMenu.color.dropdown.bg": "f2bdc10d3b611073f278ef6b93be2d1d62720592", - "mainMenu.color.dropdown.bg-hover": "e7d24ba7865567a9e30d745dbcd34d8c4a196ddb", - "mainMenu.color.dropdown.label": "112a53e4cb87a782a992a38da3249f82d639e0d1", - "mainMenu.color.dropdown.label-hover": "3f9cb0ba9099ae87f86474c5c827f4e03f60da91", "link.default": "3faaab82a9c834600aaa7ad75621d14583bd9974", "link.hover": "e44dbb7433cdb45720e896b1126e28c9bff490e4", "input.color.label": "1b07b68bbc2c3339a39e57980e5b0dd66e848174", @@ -3174,7 +3190,16 @@ "blockQuote.padding.y": "398508657cd7d1bbd686f838a27db3f0c3ee3f74", "checkbox.spacing.gap": "e4d2049d0ee84eceee61f25e3264c2526cfe746a", "checkbox.color.label": "d2a0283754f673d1b92c74eef12f3bbe06845d3b", - "checkbox.color.label-disabled": "5cd5bb5326d33a62412e7579c0abd8c0bea97838" + "checkbox.color.label-disabled": "5cd5bb5326d33a62412e7579c0abd8c0bea97838", + "utilityMenu.color.bg": "a51943758f0fa8a2af6ca92227fd91c67560e4b8", + "utilityMenu.color.link.bg": "87170e49f0fdf73cfd66128db96c4441e700f071", + "utilityMenu.color.link.label-hover": "7083b097eec3b0e13eb3c41105a6042afe4c575d", + "utilityMenu.color.dropdown.bg": "f2bdc10d3b611073f278ef6b93be2d1d62720592", + "utilityMenu.color.dropdown.bg-hover": "e7d24ba7865567a9e30d745dbcd34d8c4a196ddb", + "utilityMenu.color.dropdown.label": "112a53e4cb87a782a992a38da3249f82d639e0d1", + "utilityMenu.color.dropdown.label-hover": "3f9cb0ba9099ae87f86474c5c827f4e03f60da91", + "utilityMenu.color.link.default": "d2185c2db3e4a1b77be017df0fb5f3376c756f50", + "utilityMenu.color.link.hover": "4c190c6dffed1c15773123f079e53c195ae53054" } }, { @@ -3201,7 +3226,8 @@ "components/table": "enabled", "components/tabs": "enabled", "components/textField": "enabled", - "semantic": "enabled" + "semantic": "enabled", + "components/utilityMenu": "disabled" }, "group": "WUP" }, @@ -3228,7 +3254,8 @@ "components/status": "enabled", "components/table": "enabled", "components/tabs": "enabled", - "components/textField": "enabled" + "components/textField": "enabled", + "components/utilityMenu": "disabled" }, "group": "WUP" } @@ -3252,6 +3279,7 @@ "components/input", "components/link", "components/mainMenu", + "components/utilityMenu", "components/pager", "components/radioButton", "components/selectdropdown", From f772281545a3a1af193d0bd72507f93c5e470060 Mon Sep 17 00:00:00 2001 From: mariannuar Date: Thu, 5 Sep 2024 22:34:32 +0000 Subject: [PATCH 2/6] feat: create tokens --- src/components/tokens/_tokens.scss | 22 +++--- src/tokens/transformed.tokens.json | 121 ++++++++++++++++++----------- 2 files changed, 90 insertions(+), 53 deletions(-) diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss index 9aef387..6d43991 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 18:22:46 GMT + * Generated on Thu, 05 Sep 2024 22:34:29 GMT */ :root { @@ -66,6 +66,9 @@ --pager-padding-y: 0.5rem; --pager-padding-y-hover: 0.5rem; --pager-padding-y-focus: 0.5rem; + --utility-menu-color-bg: #ffffff; + --utility-menu-color-link-default: #006089; + --utility-menu-color-link-hover: #0080b7; --main-menu-color-bg: #ffffff; --main-menu-color-link-bg: #ffffff; --main-menu-color-link-bg-hover: #9ce1ff; @@ -399,14 +402,15 @@ --token-set-order-14: components/input; --token-set-order-15: components/link; --token-set-order-16: components/mainMenu; - --token-set-order-17: components/pager; - --token-set-order-18: components/radioButton; - --token-set-order-19: components/selectdropdown; - --token-set-order-20: components/status; - --token-set-order-21: components/table; - --token-set-order-22: components/tabs; - --token-set-order-23: components/textField; - --token-set-order-24: storybook; + --token-set-order-17: components/utilityMenu; + --token-set-order-18: components/pager; + --token-set-order-19: components/radioButton; + --token-set-order-20: components/selectdropdown; + --token-set-order-21: components/status; + --token-set-order-22: components/table; + --token-set-order-23: components/tabs; + --token-set-order-24: components/textField; + --token-set-order-25: 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 228b773..b46e49d 100644 --- a/src/tokens/transformed.tokens.json +++ b/src/tokens/transformed.tokens.json @@ -323,6 +323,24 @@ } } }, + "utilityMenu": { + "color": { + "bg": { + "value": "#ffffff", + "type": "color" + }, + "link": { + "default": { + "value": "#006089", + "type": "color" + }, + "hover": { + "value": "#0080b7", + "type": "color" + } + } + } + }, "mainMenu": { "color": { "bg": { @@ -2496,34 +2514,38 @@ "type": "other" }, "17": { - "value": "components/pager", + "value": "components/utilityMenu", "type": "other" }, "18": { - "value": "components/radioButton", + "value": "components/pager", "type": "other" }, "19": { - "value": "components/selectdropdown", + "value": "components/radioButton", "type": "other" }, "20": { - "value": "components/status", + "value": "components/selectdropdown", "type": "other" }, "21": { - "value": "components/table", + "value": "components/status", "type": "other" }, "22": { - "value": "components/tabs", + "value": "components/table", "type": "other" }, "23": { - "value": "components/textField", + "value": "components/tabs", "type": "other" }, "24": { + "value": "components/textField", + "type": "other" + }, + "25": { "value": "storybook", "type": "other" } @@ -2630,15 +2652,6 @@ "pager.text.hover": "S:d5268cc95f0ca68a28f35d87395f9ce37893fe23,", "pager.text.focus": "S:d03b986e8d65e0c71a1837ec7325ffbce6d6aaa7,", "pager.fill.hover": "S:5bdc99f7ec11756cdef48ec3e13c9b4dd6f4ea81,", - "mainMenu.color.bg": "S:bf2522b49aa417ce534b5208e0f6beef55486cf3,", - "mainMenu.color.link.bg": "S:b11ab65866a7661d8fc26a7a62b099ef30061f50,", - "mainMenu.color.link.bg-hover": "S:af6ac50c749eaa990fbd9ffed40c1b9674a723a4,", - "mainMenu.color.link.label": "S:743bcf21f9c07a7963a7edb4225d95bca9b41703,", - "mainMenu.color.link.label-hover": "S:93bfd2e3b7bbd01dc37c4f80afe8e75e9924fdaf,", - "mainMenu.color.dropdown.bg": "S:79daec1641db62001cff89e93435729c39710614,", - "mainMenu.color.dropdown.bg-hover": "S:badcf257ef0a5a278b895483c36799c19afa98a4,", - "mainMenu.color.dropdown.label": "S:77771443996903bcb2c28595214f9e3a0c71d7e9,", - "mainMenu.color.dropdown.label-hover": "S:c3a0a9d457ae44f6f0e45c6a5c57e3bd57467383,", "link.default": "S:9fd4db376033a945bbc2bf5bfe8a698e68bd6f1a,", "link.hover": "S:e6b1afc9022d41b4217e773a9ab4abf90329cf46,", "color.fieldset.bg": "S:bfe975e6026fa7f0aa7fd11985d9ebaeb6565d17,", @@ -2741,7 +2754,16 @@ "color.grays.900": "S:d14dafeba041e023bd5c5d2c458c10f88801e824,", "color.grays.1000": "S:588f6731fa9753788b0b48bb7c575f3b94991a69,", "checkbox.color.label": "S:dd27f922df752738d999c185f11b67e77134feac,", - "checkbox.color.label-disabled": "S:72b6ef5a238e1bf6f232f7f0dc8f27095a075e3f," + "checkbox.color.label-disabled": "S:72b6ef5a238e1bf6f232f7f0dc8f27095a075e3f,", + "utilityMenu.color.bg": "S:bf2522b49aa417ce534b5208e0f6beef55486cf3,", + "utilityMenu.color.link.bg": "S:b11ab65866a7661d8fc26a7a62b099ef30061f50,", + "utilityMenu.color.link.label-hover": "S:93bfd2e3b7bbd01dc37c4f80afe8e75e9924fdaf,", + "utilityMenu.color.dropdown.bg": "S:79daec1641db62001cff89e93435729c39710614,", + "utilityMenu.color.dropdown.bg-hover": "S:badcf257ef0a5a278b895483c36799c19afa98a4,", + "utilityMenu.color.dropdown.label": "S:77771443996903bcb2c28595214f9e3a0c71d7e9,", + "utilityMenu.color.dropdown.label-hover": "S:c3a0a9d457ae44f6f0e45c6a5c57e3bd57467383,", + "utilityMenu.color.link.default": "S:af6ac50c749eaa990fbd9ffed40c1b9674a723a4,", + "utilityMenu.color.link.hover": "S:743bcf21f9c07a7963a7edb4225d95bca9b41703," }, "selectedTokenSets": { "global": "enabled", @@ -2764,7 +2786,12 @@ "components/table": "enabled", "components/tabs": "enabled", "components/textField": "enabled", - "semantic": "enabled" + "semantic": "enabled", + "components/announcement": "enabled", + "components/banner": "enabled", + "components/footer": "enabled", + "components/header": "enabled", + "components/utilityMenu": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:16908", "$figmaModeId": "23237:10", @@ -2814,15 +2841,6 @@ "pager.text.hover": "2e1149296e028f68d0590547182eb3fa046b0799", "pager.text.focus": "f597287eb8465595918f5af8c56a3f803417cf81", "pager.fill.hover": "e7c4c208bc4d7ed93b94794070642830984f1687", - "mainMenu.color.bg": "9b1706999c4ef658c6b885428bf9f6a3058eba23", - "mainMenu.color.link.bg": "9fe948d4cb455eec777d28db8baa8046d75174c2", - "mainMenu.color.link.bg-hover": "29ea5911b9675ae3920cf9f26602f612fe9e33d5", - "mainMenu.color.link.label": "a28d88530a052b75025ad58244a622f52538ffdb", - "mainMenu.color.link.label-hover": "cd95962e180170545de51bf2995158682ea61805", - "mainMenu.color.dropdown.bg": "4fcd08018cb0ac6de9ae851dfdb35da945fc9128", - "mainMenu.color.dropdown.bg-hover": "25fdd7d0cc2e181e8290710f0f489248ad541477", - "mainMenu.color.dropdown.label": "1ab6130383e91011e698dd88b0fc4fce93f24d83", - "mainMenu.color.dropdown.label-hover": "2b680d5fc3c7c9c9b5e245400274c58f66cc6268", "link.default": "52f2a6ae3ef87bb2b4c96e2b8316e609a1f3e4e0", "link.hover": "602f312f7c40299996ccaf31cd8340e88ddcd6a8", "input.color.label": "40806b82869b549ff22858fd677df5c1c6d22cad", @@ -2944,7 +2962,16 @@ "checkbox.spacing.gap": "59fbad63c0994ee956f8790e994534f9f5f5e922", "checkbox.color.label": "4db65c0b61319b6c85cdb9c1b683d84e2f65ff52", "checkbox.color.label-disabled": "3a5dec39f06f92904d80c2096f9c439ae0b5d09a", - "color.link-hover": "74d0f74b830a9dd07279967cea7c9f662178e310" + "color.link-hover": "74d0f74b830a9dd07279967cea7c9f662178e310", + "utilityMenu.color.bg": "9b1706999c4ef658c6b885428bf9f6a3058eba23", + "utilityMenu.color.link.bg": "9fe948d4cb455eec777d28db8baa8046d75174c2", + "utilityMenu.color.link.label-hover": "cd95962e180170545de51bf2995158682ea61805", + "utilityMenu.color.dropdown.bg": "4fcd08018cb0ac6de9ae851dfdb35da945fc9128", + "utilityMenu.color.dropdown.bg-hover": "25fdd7d0cc2e181e8290710f0f489248ad541477", + "utilityMenu.color.dropdown.label": "1ab6130383e91011e698dd88b0fc4fce93f24d83", + "utilityMenu.color.dropdown.label-hover": "2b680d5fc3c7c9c9b5e245400274c58f66cc6268", + "utilityMenu.color.link.default": "29ea5911b9675ae3920cf9f26602f612fe9e33d5", + "utilityMenu.color.link.hover": "a28d88530a052b75025ad58244a622f52538ffdb" }, "type": "other", "value": "[object Object]" @@ -2953,7 +2980,8 @@ "id": "0a5c4562bd35f00ce8a339239980a3842147c0bd", "$figmaStyleReferences": {}, "selectedTokenSets": { - "global": "enabled" + "global": "enabled", + "components/utilityMenu": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17089", "$figmaModeId": "23237:11", @@ -3006,7 +3034,8 @@ "id": "ca91148967a5dcc80f7e50f6ccfe35b30efd5f2f", "$figmaStyleReferences": {}, "selectedTokenSets": { - "semantic": "enabled" + "semantic": "enabled", + "components/utilityMenu": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17133", "$figmaModeId": "23237:12", @@ -3029,7 +3058,8 @@ "id": "16a10d373d39988a75c7d612cd449a633f373c44", "$figmaStyleReferences": {}, "selectedTokenSets": { - "storybook": "source" + "storybook": "source", + "components/utilityMenu": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17144", "$figmaModeId": "23237:13", @@ -3058,7 +3088,8 @@ "components/status": "enabled", "components/table": "enabled", "components/tabs": "enabled", - "components/textField": "enabled" + "components/textField": "enabled", + "components/utilityMenu": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17145", "$figmaModeId": "23237:14", @@ -3104,15 +3135,6 @@ "pager.text.hover": "067e5560a9bcaee73e961d449ec580cabede8a17", "pager.text.focus": "039853336af697ea5a3d09db6b64f78e7c45c35d", "pager.fill.hover": "64071b977256beb9e45651dbbe696ac3dfb389d3", - "mainMenu.color.bg": "a51943758f0fa8a2af6ca92227fd91c67560e4b8", - "mainMenu.color.link.bg": "87170e49f0fdf73cfd66128db96c4441e700f071", - "mainMenu.color.link.bg-hover": "d2185c2db3e4a1b77be017df0fb5f3376c756f50", - "mainMenu.color.link.label": "4c190c6dffed1c15773123f079e53c195ae53054", - "mainMenu.color.link.label-hover": "7083b097eec3b0e13eb3c41105a6042afe4c575d", - "mainMenu.color.dropdown.bg": "f2bdc10d3b611073f278ef6b93be2d1d62720592", - "mainMenu.color.dropdown.bg-hover": "e7d24ba7865567a9e30d745dbcd34d8c4a196ddb", - "mainMenu.color.dropdown.label": "112a53e4cb87a782a992a38da3249f82d639e0d1", - "mainMenu.color.dropdown.label-hover": "3f9cb0ba9099ae87f86474c5c827f4e03f60da91", "link.default": "3faaab82a9c834600aaa7ad75621d14583bd9974", "link.hover": "e44dbb7433cdb45720e896b1126e28c9bff490e4", "input.color.label": "1b07b68bbc2c3339a39e57980e5b0dd66e848174", @@ -3184,7 +3206,16 @@ "blockQuote.padding.y": "398508657cd7d1bbd686f838a27db3f0c3ee3f74", "checkbox.spacing.gap": "e4d2049d0ee84eceee61f25e3264c2526cfe746a", "checkbox.color.label": "d2a0283754f673d1b92c74eef12f3bbe06845d3b", - "checkbox.color.label-disabled": "5cd5bb5326d33a62412e7579c0abd8c0bea97838" + "checkbox.color.label-disabled": "5cd5bb5326d33a62412e7579c0abd8c0bea97838", + "utilityMenu.color.bg": "a51943758f0fa8a2af6ca92227fd91c67560e4b8", + "utilityMenu.color.link.bg": "87170e49f0fdf73cfd66128db96c4441e700f071", + "utilityMenu.color.link.label-hover": "7083b097eec3b0e13eb3c41105a6042afe4c575d", + "utilityMenu.color.dropdown.bg": "f2bdc10d3b611073f278ef6b93be2d1d62720592", + "utilityMenu.color.dropdown.bg-hover": "e7d24ba7865567a9e30d745dbcd34d8c4a196ddb", + "utilityMenu.color.dropdown.label": "112a53e4cb87a782a992a38da3249f82d639e0d1", + "utilityMenu.color.dropdown.label-hover": "3f9cb0ba9099ae87f86474c5c827f4e03f60da91", + "utilityMenu.color.link.default": "d2185c2db3e4a1b77be017df0fb5f3376c756f50", + "utilityMenu.color.link.hover": "4c190c6dffed1c15773123f079e53c195ae53054" }, "type": "other", "value": "[object Object]" @@ -3212,7 +3243,8 @@ "components/table": "enabled", "components/tabs": "enabled", "components/textField": "enabled", - "semantic": "enabled" + "semantic": "enabled", + "components/utilityMenu": "disabled" }, "group": "WUP", "type": "other", @@ -3240,7 +3272,8 @@ "components/status": "enabled", "components/table": "enabled", "components/tabs": "enabled", - "components/textField": "enabled" + "components/textField": "enabled", + "components/utilityMenu": "disabled" }, "group": "WUP", "type": "other", From ed9c0de56072b6e562701dbbc1625aa3bdc0d8c8 Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Wed, 20 Nov 2024 16:03:53 -0600 Subject: [PATCH 3/6] fix(utility-menu): fixes typo --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index acb576e..8330896 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "storybook": "storybook dev -c node_modules/@emulsify/core/.storybook --ci -p 6006", "storybook-build": "npm run build && storybook build -c node_modules/@emulsify/core/.storybook -o .out", "storybook-deploy": "storybook-to-ghpages -o .out", - "style-dictionary:build": "node ./src/tokens/tokensTransform.mjs", + "style-dictionary:build": "node ./src/tokens/tokensTransform.js", "test": "jest --coverage --config ./config/jest.config.js", "tokens:build": "npm run tokens:transform && npm run style-dictionary:build", "tokens:transform": "token-transformer ./src/tokens/figma.tokens.json ./src/tokens/transformed.tokens.json", From 59c5b2c11fc4e18914bf78bcfda1fb23ac3ce268 Mon Sep 17 00:00:00 2001 From: mariannuar Date: Wed, 20 Nov 2024 22:04:39 +0000 Subject: [PATCH 4/6] feat: create tokens --- src/tokens/tokens.scss | 60 +++++++++++++++++++++--------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/src/tokens/tokens.scss b/src/tokens/tokens.scss index 7c6bbf3..55042de 100644 --- a/src/tokens/tokens.scss +++ b/src/tokens/tokens.scss @@ -3,43 +3,43 @@ */ :root { - --colors-sb-background: #fff; + --colors-sb-background: #ffffff; --colors-sb-text-body: #00202e; --colors-sb-text-heading: #0080b7; --colors-sb-visualization: #009fe4; --text-field-border-width: 1px; --text-field-radius: 0.625rem; --text-field-border: [object Object]; - --tabs-color-bg-default: #fff; - --tabs-color-bg-active: #fff; - --tabs-color-bg-hover: #fff; + --tabs-color-bg-default: #ffffff; + --tabs-color-bg-active: #ffffff; + --tabs-color-bg-hover: #ffffff; --tabs-color-text-default: #00202e; --tabs-color-text-active: #0080b7; --tabs-color-text-hover: #005f89; --tabs-color-border-bottom: #a9afb1; --tab-label: [object Object]; - --table-color-cell-bg: #fff; + --table-color-cell-bg: #ffffff; --table-color-cell-bg-stripe: #9ce1ff; --table-color-cell-text: #00202e; --table-color-cell-icon: #005f89; --table-color-header-bg: #005f89; - --table-color-header-text: #fff; + --table-color-header-text: #ffffff; --table-color-header-icon: #9ce1ff; --table-color-border: #d4d7d8; --status-color-info-bg: #16bdde; --status-color-info-label: #272727; --status-color-danger-bg: #bd1919; - --status-color-danger-label: #fff; + --status-color-danger-label: #ffffff; --status-color-success-bg: #337b32; - --status-color-success-label: #fff; + --status-color-success-label: #ffffff; --status-color-warning-bg: #f6c40f; - --status-color-warning-label: #333; + --status-color-warning-label: #333333; --status-font-size-header: 1.3125rem; --selectdropdown-color-label: #00202e; --selectdropdown-color-label-disabled: #a9afb1; - --selectdropdown-color-button-fill: #fff; + --selectdropdown-color-button-fill: #ffffff; --selectdropdown-color-button-fill-hover: #e6f5fc; - --selectdropdown-color-button-fill-disabled: #fff; + --selectdropdown-color-button-fill-disabled: #ffffff; --selectdropdown-color-button-stroke: #7f878b; --selectdropdown-color-button-stroke-hover: #545f64; --selectdropdown-color-button-stroke-disabled: #a9afb1; @@ -55,7 +55,7 @@ --radio-color-button-stroke-disabled: #a9afb1; --radio-gap: 0.25rem; --pager-color-text-default: #29373d; - --pager-color-text-hover: #fff; + --pager-color-text-hover: #ffffff; --pager-color-text-focus: #0080b7; --pager-color-fill-hover: #0080b7; --pager-default: [object Object]; @@ -65,11 +65,11 @@ --pager-padding-y: 0.5rem; --pager-padding-y-hover: 0.5rem; --pager-padding-y-focus: 0.5rem; - --utility-menu-color-bg: #fff; + --utility-menu-color-bg: #ffffff; --utility-menu-color-link-default: #006089; --utility-menu-color-link-hover: #0080b7; - --main-menu-color-bg: #fff; - --main-menu-color-link-bg: #fff; + --main-menu-color-bg: #ffffff; + --main-menu-color-link-bg: #ffffff; --main-menu-color-link-bg-hover: #9ce1ff; --main-menu-color-link-label: #0080b7; --main-menu-color-link-label-hover: #006089; @@ -79,7 +79,7 @@ --main-menu-color-dropdown-label-hover: #006089; --link-color-default: #005f89; --link-color-hover: #00202e; - --link-color-inverse: #fff; + --link-color-inverse: #ffffff; --link-color-inverse-hover: #9ce1ff; --link-body: [object Object]; --input-gap: 0.5rem; @@ -91,16 +91,16 @@ --input-border-color: #7f878b; --input-radius: 0.25rem; --input-label-lineheight: 125%; - --input-bkg: #fff; + --input-bkg: #ffffff; --header-search-background: #006089; - --header-search-text-icon: #fff; + --header-search-text-icon: #ffffff; --footer-background-default: #006089; - --footer-background-light: #fff; + --footer-background-light: #ffffff; --footer-heading-default: #9ce1ff; --footer-heading-dark: #0080b7; --footer-icon-default: #9ce1ff; --footer-icon-dark: #0080b7; - --fieldset-color-bg: #fff; + --fieldset-color-bg: #ffffff; --fieldset-color-border: #a9afb1; --fieldset-color-label: #00202e; --radius-fieldset: 0.25rem; @@ -115,7 +115,7 @@ --cta-color-heading-darker: #006089; --cta-color-eyebrow: #006089; --cta-color-body: #00202e; - --cta-color-button: #fff; + --cta-color-button: #ffffff; --cta-background: #9ce1ff; --cta-button-background: #009fe4; --cta-button-background-darker: #006089; @@ -132,10 +132,10 @@ --card-color-heading: #0080b7; --card-color-subheading: #006089; --button-color-bkg: #005f89; - --button-color-label: #fff; + --button-color-label: #ffffff; --button-color-bkg-hover: #00405b; - --button-color-label-hover: #fff; - --button-color-label-focus: #fff; + --button-color-label-hover: #ffffff; + --button-color-label-focus: #ffffff; --button-color-bkg-focus: #00405b; --button-padding-x: 1rem; --button-padding-x-hover: 1rem; @@ -161,12 +161,12 @@ --block-quote-padding-x: 2rem; --block-quote-padding-y: 0.5rem; --banner-button-text: #00202e; - --banner-button-border: #fff; + --banner-button-border: #ffffff; --banner-button-background: #9ce1ff; - --banner-text: #fff; + --banner-text: #ffffff; --banner-background: #006089; --banner-background-opacity: 0.75; - --announcement-background-default: #fff; + --announcement-background-default: #ffffff; --announcement-background-light: #9ce1ff; --announcement-background-dark: #006089; --announcement-heading-default: #0080b7; @@ -189,13 +189,13 @@ --color-text-body: #00202e; --color-text-body-lighter: #006089; --color-text-heading: #006089; - --color-text-white: #fff; + --color-text-white: #ffffff; --color-warning-default: #d80f0f; --color-link: #005f89; --color-link-hover: #00202e; --color-link-hover-lighter: #00405b; - --color-black: #000; - --color-white: #fff; + --color-black: #000000; + --color-white: #ffffff; --color-emulsify-blue-100: #e6f5fc; --color-emulsify-blue-200: #ccecfa; --color-emulsify-blue-300: #99d9f4; From 65ef775cb039b8e40311d516543a5ca883d0dd32 Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Thu, 21 Nov 2024 14:16:57 -0600 Subject: [PATCH 5/6] fix(utility-menu): revert fix because it wasn't a typo --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8330896..acb576e 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "storybook": "storybook dev -c node_modules/@emulsify/core/.storybook --ci -p 6006", "storybook-build": "npm run build && storybook build -c node_modules/@emulsify/core/.storybook -o .out", "storybook-deploy": "storybook-to-ghpages -o .out", - "style-dictionary:build": "node ./src/tokens/tokensTransform.js", + "style-dictionary:build": "node ./src/tokens/tokensTransform.mjs", "test": "jest --coverage --config ./config/jest.config.js", "tokens:build": "npm run tokens:transform && npm run style-dictionary:build", "tokens:transform": "token-transformer ./src/tokens/figma.tokens.json ./src/tokens/transformed.tokens.json", From a4b20525050b9ad85b0708dc49f73c718a8aad21 Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Thu, 21 Nov 2024 14:22:42 -0600 Subject: [PATCH 6/6] fix(utility-menu): change extension of file --- src/tokens/{tokensTransform.js => tokensTransform.mjs} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/tokens/{tokensTransform.js => tokensTransform.mjs} (100%) diff --git a/src/tokens/tokensTransform.js b/src/tokens/tokensTransform.mjs similarity index 100% rename from src/tokens/tokensTransform.js rename to src/tokens/tokensTransform.mjs