diff --git a/src/tokens/figma.tokens.json b/src/tokens/figma.tokens.json index a89f5b9..c5f45f2 100644 --- a/src/tokens/figma.tokens.json +++ b/src/tokens/figma.tokens.json @@ -2520,6 +2520,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": { @@ -2787,7 +2811,8 @@ "components/banner": "enabled", "components/footer": "enabled", "components/header": "enabled", - "components/utilityMenu": "disabled" + "components/utilityMenu": "enabled", + "components/tooltip": "enabled" }, "$figmaCollectionId": "VariableCollectionId:23237:16908", "$figmaModeId": "23237:10", @@ -2975,8 +3000,7 @@ "name": "Emulsify Global", "$figmaStyleReferences": {}, "selectedTokenSets": { - "global": "enabled", - "components/utilityMenu": "disabled" + "global": "enabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17089", "$figmaModeId": "23237:11", @@ -3028,8 +3052,7 @@ "name": "Emulsify Semantic", "$figmaStyleReferences": {}, "selectedTokenSets": { - "semantic": "enabled", - "components/utilityMenu": "disabled" + "semantic": "enabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17133", "$figmaModeId": "23237:12", @@ -3051,8 +3074,7 @@ "name": "Emulsify Storybook only", "$figmaStyleReferences": {}, "selectedTokenSets": { - "storybook": "source", - "components/utilityMenu": "disabled" + "storybook": "source" }, "$figmaCollectionId": "VariableCollectionId:23237:17144", "$figmaModeId": "23237:13", @@ -3081,7 +3103,8 @@ "components/table": "enabled", "components/tabs": "enabled", "components/textField": "enabled", - "components/utilityMenu": "disabled" + "components/utilityMenu": "enabled", + "components/tooltip": "enabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17145", "$figmaModeId": "23237:14", @@ -3235,7 +3258,8 @@ "components/tabs": "enabled", "components/textField": "enabled", "semantic": "enabled", - "components/utilityMenu": "disabled" + "components/utilityMenu": "enabled", + "components/tooltip": "enabled" }, "group": "WUP" }, @@ -3263,7 +3287,8 @@ "components/table": "enabled", "components/tabs": "enabled", "components/textField": "enabled", - "components/utilityMenu": "disabled" + "components/utilityMenu": "enabled", + "components/tooltip": "enabled" }, "group": "WUP" } @@ -3295,6 +3320,7 @@ "components/table", "components/tabs", "components/textField", + "components/tooltip", "storybook" ] } diff --git a/src/tokens/tokens.scss b/src/tokens/tokens.scss index 55042de..b3b6602 100644 --- a/src/tokens/tokens.scss +++ b/src/tokens/tokens.scss @@ -7,6 +7,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]; @@ -411,7 +415,8 @@ --token-set-order-22: components/table; --token-set-order-23: components/tabs; --token-set-order-24: components/textField; - --token-set-order-25: storybook; + --token-set-order-25: components/tooltip; + --token-set-order-26: 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 1fc1b5a..f8f0eb7 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, @@ -2554,6 +2576,10 @@ "type": "other" }, "25": { + "value": "components/tooltip", + "type": "other" + }, + "26": { "value": "storybook", "type": "other" } @@ -2799,7 +2825,8 @@ "components/banner": "enabled", "components/footer": "enabled", "components/header": "enabled", - "components/utilityMenu": "disabled" + "components/utilityMenu": "enabled", + "components/tooltip": "enabled" }, "$figmaCollectionId": "VariableCollectionId:23237:16908", "$figmaModeId": "23237:10", @@ -2988,8 +3015,7 @@ "id": "0a5c4562bd35f00ce8a339239980a3842147c0bd", "$figmaStyleReferences": {}, "selectedTokenSets": { - "global": "enabled", - "components/utilityMenu": "disabled" + "global": "enabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17089", "$figmaModeId": "23237:11", @@ -3042,8 +3068,7 @@ "id": "ca91148967a5dcc80f7e50f6ccfe35b30efd5f2f", "$figmaStyleReferences": {}, "selectedTokenSets": { - "semantic": "enabled", - "components/utilityMenu": "disabled" + "semantic": "enabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17133", "$figmaModeId": "23237:12", @@ -3066,8 +3091,7 @@ "id": "16a10d373d39988a75c7d612cd449a633f373c44", "$figmaStyleReferences": {}, "selectedTokenSets": { - "storybook": "source", - "components/utilityMenu": "disabled" + "storybook": "source" }, "$figmaCollectionId": "VariableCollectionId:23237:17144", "$figmaModeId": "23237:13", @@ -3097,7 +3121,8 @@ "components/table": "enabled", "components/tabs": "enabled", "components/textField": "enabled", - "components/utilityMenu": "disabled" + "components/utilityMenu": "enabled", + "components/tooltip": "enabled" }, "$figmaCollectionId": "VariableCollectionId:23237:17145", "$figmaModeId": "23237:14", @@ -3252,7 +3277,8 @@ "components/tabs": "enabled", "components/textField": "enabled", "semantic": "enabled", - "components/utilityMenu": "disabled" + "components/utilityMenu": "enabled", + "components/tooltip": "enabled" }, "group": "WUP", "type": "other", @@ -3281,7 +3307,8 @@ "components/table": "enabled", "components/tabs": "enabled", "components/textField": "enabled", - "components/utilityMenu": "disabled" + "components/utilityMenu": "enabled", + "components/tooltip": "enabled" }, "group": "WUP", "type": "other",