From 297ae35c400bdf97b4d98673e4b8d2bf219ce311 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mariana=20N=C3=BA=C3=B1ez?= <48533432+mariannuar@users.noreply.github.com> Date: Fri, 30 Aug 2024 18:54:11 -0600 Subject: [PATCH 1/4] Design tokens for Tooltip component --- src/tokens/figma.tokens.json | 46 ++++++++++++++++++++++++++++++------ 1 file changed, 39 insertions(+), 7 deletions(-) diff --git a/src/tokens/figma.tokens.json b/src/tokens/figma.tokens.json index a358402..e6c6496 100644 --- a/src/tokens/figma.tokens.json +++ b/src/tokens/figma.tokens.json @@ -2492,6 +2492,30 @@ } } }, + "components/tooltip": { + "tooltip": { + "background": { + "dark": { + "value": "{color.grays.900}", + "type": "color" + }, + "light": { + "value": "{color.grays.200}", + "type": "color" + } + }, + "icon": { + "color": { + "value": "{color.text.white}", + "type": "color" + }, + "background": { + "value": "{color.primary.dark}", + "type": "color" + } + } + } + }, "storybook": { "colors": { "sb": { @@ -2758,7 +2782,8 @@ "components/announcement": "enabled", "components/banner": "enabled", "components/footer": "enabled", - "components/header": "enabled" + "components/header": "enabled", + "components/tooltip": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:16908", "$figmaModeId": "23237:10", @@ -2946,7 +2971,8 @@ "name": "Emulsify Global", "$figmaStyleReferences": {}, "selectedTokenSets": { - "global": "enabled" + "global": "enabled", + "components/tooltip": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17089", "$figmaModeId": "23237:11", @@ -2998,7 +3024,8 @@ "name": "Emulsify Semantic", "$figmaStyleReferences": {}, "selectedTokenSets": { - "semantic": "enabled" + "semantic": "enabled", + "components/tooltip": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17133", "$figmaModeId": "23237:12", @@ -3020,7 +3047,8 @@ "name": "Emulsify Storybook only", "$figmaStyleReferences": {}, "selectedTokenSets": { - "storybook": "source" + "storybook": "source", + "components/tooltip": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17144", "$figmaModeId": "23237:13", @@ -3048,7 +3076,8 @@ "components/status": "enabled", "components/table": "enabled", "components/tabs": "enabled", - "components/textField": "enabled" + "components/textField": "enabled", + "components/tooltip": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17145", "$figmaModeId": "23237:14", @@ -3201,7 +3230,8 @@ "components/table": "enabled", "components/tabs": "enabled", "components/textField": "enabled", - "semantic": "enabled" + "semantic": "enabled", + "components/tooltip": "disabled" }, "group": "WUP" }, @@ -3228,7 +3258,8 @@ "components/status": "enabled", "components/table": "enabled", "components/tabs": "enabled", - "components/textField": "enabled" + "components/textField": "enabled", + "components/tooltip": "disabled" }, "group": "WUP" } @@ -3259,6 +3290,7 @@ "components/table", "components/tabs", "components/textField", + "components/tooltip", "storybook" ] } From 3a8345d27a4b1d1d128fb7c3237ff11c6488f28e Mon Sep 17 00:00:00 2001 From: mariannuar Date: Sat, 31 Aug 2024 00:55:59 +0000 Subject: [PATCH 2/4] feat: create tokens --- src/components/tokens/_tokens.scss | 9 ++++-- src/tokens/transformed.tokens.json | 51 ++++++++++++++++++++++++++---- 2 files changed, 51 insertions(+), 9 deletions(-) diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss index 9aef387..886e305 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 Sat, 31 Aug 2024 00:55:57 GMT */ :root { @@ -8,6 +8,10 @@ --colors-sb-text-body: #00202e; --colors-sb-text-heading: #0080b7; --colors-sb-visualization: #009fe4; + --tooltip-background-dark: #101618; + --tooltip-background-light: #d4d7d8; + --tooltip-icon-color: #ffffff; + --tooltip-icon-background: #0080b7; --text-field-border-width: 1px; --text-field-radius: 0.625rem; --text-field-border: [object Object]; @@ -406,7 +410,8 @@ --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-24: components/tooltip; + --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..3127256 100644 --- a/src/tokens/transformed.tokens.json +++ b/src/tokens/transformed.tokens.json @@ -21,6 +21,28 @@ } } }, + "tooltip": { + "background": { + "dark": { + "value": "#101618", + "type": "color" + }, + "light": { + "value": "#d4d7d8", + "type": "color" + } + }, + "icon": { + "color": { + "value": "#ffffff", + "type": "color" + }, + "background": { + "value": "#0080b7", + "type": "color" + } + } + }, "textField": { "borderWidth": { "value": 1, @@ -2524,6 +2546,10 @@ "type": "other" }, "24": { + "value": "components/tooltip", + "type": "other" + }, + "25": { "value": "storybook", "type": "other" } @@ -2764,7 +2790,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/tooltip": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:16908", "$figmaModeId": "23237:10", @@ -2953,7 +2984,8 @@ "id": "0a5c4562bd35f00ce8a339239980a3842147c0bd", "$figmaStyleReferences": {}, "selectedTokenSets": { - "global": "enabled" + "global": "enabled", + "components/tooltip": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17089", "$figmaModeId": "23237:11", @@ -3006,7 +3038,8 @@ "id": "ca91148967a5dcc80f7e50f6ccfe35b30efd5f2f", "$figmaStyleReferences": {}, "selectedTokenSets": { - "semantic": "enabled" + "semantic": "enabled", + "components/tooltip": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17133", "$figmaModeId": "23237:12", @@ -3029,7 +3062,8 @@ "id": "16a10d373d39988a75c7d612cd449a633f373c44", "$figmaStyleReferences": {}, "selectedTokenSets": { - "storybook": "source" + "storybook": "source", + "components/tooltip": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17144", "$figmaModeId": "23237:13", @@ -3058,7 +3092,8 @@ "components/status": "enabled", "components/table": "enabled", "components/tabs": "enabled", - "components/textField": "enabled" + "components/textField": "enabled", + "components/tooltip": "disabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17145", "$figmaModeId": "23237:14", @@ -3212,7 +3247,8 @@ "components/table": "enabled", "components/tabs": "enabled", "components/textField": "enabled", - "semantic": "enabled" + "semantic": "enabled", + "components/tooltip": "disabled" }, "group": "WUP", "type": "other", @@ -3240,7 +3276,8 @@ "components/status": "enabled", "components/table": "enabled", "components/tabs": "enabled", - "components/textField": "enabled" + "components/textField": "enabled", + "components/tooltip": "disabled" }, "group": "WUP", "type": "other", From 1526a636ace4620e24045698ed33e95757b78da9 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, 17 Sep 2024 14:10:16 -0600 Subject: [PATCH 3/4] Design tokens for tooltip --- src/tokens/figma.tokens.json | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/tokens/figma.tokens.json b/src/tokens/figma.tokens.json index a358402..77b8cd1 100644 --- a/src/tokens/figma.tokens.json +++ b/src/tokens/figma.tokens.json @@ -2492,6 +2492,30 @@ } } }, + "components/tooltip": { + "tooltip": { + "background": { + "dark": { + "value": "{color.grays.900}", + "type": "color" + }, + "light": { + "value": "{color.grays.200}", + "type": "color" + } + }, + "icon": { + "color": { + "value": "{color.text.white}", + "type": "color" + }, + "background": { + "value": "{color.primary.dark}", + "type": "color" + } + } + } + }, "storybook": { "colors": { "sb": { @@ -3259,6 +3283,7 @@ "components/table", "components/tabs", "components/textField", + "components/tooltip", "storybook" ] } From 769d2cde86d35e703bdd49a2dd3b19c70d07155b Mon Sep 17 00:00:00 2001 From: mariannuar Date: Thu, 21 Nov 2024 20:34:26 +0000 Subject: [PATCH 4/4] feat: create tokens --- src/tokens/tokens.scss | 62 +++++++++++++++++++++--------------------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/src/tokens/tokens.scss b/src/tokens/tokens.scss index 658fe34..b3b6602 100644 --- a/src/tokens/tokens.scss +++ b/src/tokens/tokens.scss @@ -3,47 +3,47 @@ */ :root { - --colors-sb-background: #fff; + --colors-sb-background: #ffffff; --colors-sb-text-body: #00202e; --colors-sb-text-heading: #0080b7; --colors-sb-visualization: #009fe4; --tooltip-background-dark: #101618; --tooltip-background-light: #d4d7d8; - --tooltip-icon-color: #fff; + --tooltip-icon-color: #ffffff; --tooltip-icon-background: #0080b7; --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; @@ -59,7 +59,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]; @@ -69,11 +69,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; @@ -83,7 +83,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; @@ -95,16 +95,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; @@ -119,7 +119,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; @@ -136,10 +136,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; @@ -165,12 +165,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; @@ -193,13 +193,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;