From 85d8034ec42e4dfd5aad649ea8ccd6a450d69b1f Mon Sep 17 00:00:00 2001 From: taysea Date: Fri, 8 Nov 2024 16:02:59 +0000 Subject: [PATCH] Update tokens from Figma --- design-tokens/tokens/semantic/color.dark.json | 126 ++++++++++-------- .../tokens/semantic/color.light.json | 126 ++++++++++-------- yarn.lock | 9 +- 3 files changed, 142 insertions(+), 119 deletions(-) diff --git a/design-tokens/tokens/semantic/color.dark.json b/design-tokens/tokens/semantic/color.dark.json index aed57b29b..ae0cecdf1 100644 --- a/design-tokens/tokens/semantic/color.dark.json +++ b/design-tokens/tokens/semantic/color.dark.json @@ -145,56 +145,6 @@ } } }, - "ok": { - "$type": "color", - "$value": "{base.color.green.500-Opacity30}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - }, - "primary": { - "default": { - "$type": "color", - "$value": "{base.color.green.600}", - "$description": "The default primary color of components at a rest/ enabled state. The term ‘primary’ denoting hierarchy - the most important thing. Use to style components prominently and give greater visual hierarchy.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - }, - "hover": { - "$type": "color", - "$value": "{TBD}", - "$description": "Hover color variant of the primary color.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - } - }, - "info": { - "$type": "color", - "$value": "{base.color.blue.400-Opacity12}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - }, "selected": { "strong": { "enabled": { @@ -248,6 +198,70 @@ } } } + }, + "primary": { + "default": { + "$type": "color", + "$value": "{base.color.green.600}", + "$description": "The default primary color of components at a rest/ enabled state. The term ‘primary’ denoting hierarchy - the most important thing. Use to style components prominently and give greater visual hierarchy.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "hover": { + "$type": "color", + "$value": "{TBD}", + "$description": "Hover color variant of the primary color.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + } + }, + "ok": { + "$type": "color", + "$value": "{base.color.green.500-Opacity30}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "info": { + "$type": "color", + "$value": "{base.color.blue.400-Opacity12}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "neutral": { + "xstrong": { + "$type": "color", + "$value": "{base.color.grey.50}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + } } }, "border": { @@ -469,29 +483,29 @@ } } }, - "heading": { + "onStrong": { "default": { "$type": "color", - "$value": "{color.text.strong}", + "$value": "{base.color.grey.1200}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["ALL_SCOPES"], + "scopes": ["TEXT_FILL"], "codeSyntax": {} } } } }, - "inverse": { + "heading": { "default": { "$type": "color", - "$value": "{base.color.grey.1200}", + "$value": "{color.text.strong}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } diff --git a/design-tokens/tokens/semantic/color.light.json b/design-tokens/tokens/semantic/color.light.json index 02378aed7..f25f0cfea 100644 --- a/design-tokens/tokens/semantic/color.light.json +++ b/design-tokens/tokens/semantic/color.light.json @@ -145,56 +145,6 @@ } } }, - "ok": { - "$type": "color", - "$value": "{base.color.green.400-Opacity24}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - }, - "primary": { - "default": { - "$type": "color", - "$value": "{base.color.green.600}", - "$description": "The default primary color of components at a rest/ enabled state. The term ‘primary’ denoting hierarchy - the most important thing. Use to style components prominently and give greater visual hierarchy.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - }, - "hover": { - "$type": "color", - "$value": "{TBD}", - "$description": "Hover color variant of the primary color.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - } - }, - "info": { - "$type": "color", - "$value": "{base.color.blue.400-Opacity24}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - }, "selected": { "strong": { "enabled": { @@ -248,6 +198,70 @@ } } } + }, + "primary": { + "default": { + "$type": "color", + "$value": "{base.color.green.600}", + "$description": "The default primary color of components at a rest/ enabled state. The term ‘primary’ denoting hierarchy - the most important thing. Use to style components prominently and give greater visual hierarchy.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "hover": { + "$type": "color", + "$value": "{TBD}", + "$description": "Hover color variant of the primary color.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + } + }, + "ok": { + "$type": "color", + "$value": "{base.color.green.400-Opacity24}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "info": { + "$type": "color", + "$value": "{base.color.blue.400-Opacity24}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "neutral": { + "xstrong": { + "$type": "color", + "$value": "{base.color.grey.1000}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + } } }, "border": { @@ -469,29 +483,29 @@ } } }, - "heading": { + "onStrong": { "default": { "$type": "color", - "$value": "{color.text.strong}", + "$value": "{base.color.white.100}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["ALL_SCOPES"], + "scopes": ["TEXT_FILL"], "codeSyntax": {} } } } }, - "inverse": { + "heading": { "default": { "$type": "color", - "$value": "{base.color.white.100}", + "$value": "{color.text.strong}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } diff --git a/yarn.lock b/yarn.lock index 258f413f8..52efa05ae 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7430,12 +7430,7 @@ graphlib@^2.1.5: dependencies: lodash "^4.17.15" -grommet-icons@^4.12.1: - version "4.12.1" - resolved "https://registry.yarnpkg.com/grommet-icons/-/grommet-icons-4.12.1.tgz#780aa7cd59c5586f642f221bdb5c6becd04ad000" - integrity sha512-LhOP6BkDAGiSNcUOfsGGRo+AKD6zWOXeNeusY1WYvKplAR6mKCAQfH7Nig2Buc/v5zadKSko2NDtCQqwJaME0Q== - -"grommet-icons@https://github.com/grommet/grommet-icons/tarball/stable": +grommet-icons@^4.12.1, "grommet-icons@https://github.com/grommet/grommet-icons/tarball/stable": version "4.12.1" resolved "https://github.com/grommet/grommet-icons/tarball/stable#92f4e88ab19fa618a4952ac74802f606bf44c207" @@ -7446,7 +7441,7 @@ grommet-theme-hpe@5.7.0: "grommet@https://github.com/grommet/grommet/tarball/stable": version "2.41.0" - resolved "https://github.com/grommet/grommet/tarball/stable#58095fa01c6a61d5a4c739ee475507239c577f0f" + resolved "https://github.com/grommet/grommet/tarball/stable#9e980854e5312dfe67ffb285b40fc4bfc784f309" dependencies: "@emotion/is-prop-valid" "^1.3.1" grommet-icons "^4.12.1"