From bf72236b36af1e9b4a37afb80b304bbffa93997b Mon Sep 17 00:00:00 2001 From: taysea Date: Thu, 12 Dec 2024 15:49:09 -0800 Subject: [PATCH 1/9] Remove text/icon xweak, brand --- design-tokens/tokens/semantic/color.dark.json | 152 ++++++----------- .../tokens/semantic/color.light.json | 154 ++++++------------ 2 files changed, 105 insertions(+), 201 deletions(-) diff --git a/design-tokens/tokens/semantic/color.dark.json b/design-tokens/tokens/semantic/color.dark.json index 61aacbd8a..36aa5b037 100644 --- a/design-tokens/tokens/semantic/color.dark.json +++ b/design-tokens/tokens/semantic/color.dark.json @@ -109,9 +109,9 @@ } } }, - "critical": { + "warning": { "$type": "color", - "$value": "{base.color.red.800-Opacity30}", + "$value": "{base.color.yellow.400-Opacity12}", "$description": "", "$extensions": { "com.figma": { @@ -121,9 +121,21 @@ } } }, - "ok": { + "info": { "$type": "color", - "$value": "{base.color.green.500-Opacity30}", + "$value": "{base.color.blue.400-Opacity12}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "critical": { + "$type": "color", + "$value": "{base.color.red.800-Opacity30}", "$description": "", "$extensions": { "com.figma": { @@ -159,6 +171,30 @@ } } }, + "unknown": { + "$type": "color", + "$value": "{base.color.white.opacity6}", + "$description": "", + "$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": {} + } + } + }, "selected": { "strong": { "enabled": { @@ -213,42 +249,6 @@ } } }, - "unknown": { - "$type": "color", - "$value": "{base.color.white.opacity6}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - }, - "warning": { - "$type": "color", - "$value": "{base.color.yellow.400-Opacity12}", - "$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", @@ -406,7 +406,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], + "scopes": ["SHAPE_FILL", "TEXT_FILL"], "codeSyntax": {} } } @@ -423,18 +423,6 @@ } } }, - "xweak": { - "$type": "color", - "$value": "{base.color.white.opacity20}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} - } - } - }, "placeholder": { "$type": "color", "$value": "{color.text.weak}", @@ -471,15 +459,17 @@ } } }, - "brand": { - "$type": "color", - "$value": "{base.color.green.600}", - "$description": "Brand text color. Use with caution. Currently not accessible for text that is below a bold weight and below 19px.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} + "onStrong": { + "default": { + "$type": "color", + "$value": "{base.color.grey.1200}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } } } }, @@ -509,20 +499,6 @@ } } }, - "onStrong": { - "default": { - "$type": "color", - "$value": "{base.color.grey.1200}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} - } - } - } - }, "critical": { "$type": "color", "$value": "{color.text.default}", @@ -775,18 +751,6 @@ } } }, - "xweak": { - "$type": "color", - "$value": "{base.color.white.opacity20}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], - "codeSyntax": {} - } - } - }, "disabled": { "$type": "color", "$value": "{base.color.white.opacity24}", @@ -883,18 +847,6 @@ } } }, - "brand": { - "$type": "color", - "$value": "{base.color.green.600}", - "$description": "Brand color for icons.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], - "codeSyntax": {} - } - } - }, "onSelectedStrong": { "$type": "color", "$value": "{base.color.white.100}", diff --git a/design-tokens/tokens/semantic/color.light.json b/design-tokens/tokens/semantic/color.light.json index 8a103a137..a24bba710 100644 --- a/design-tokens/tokens/semantic/color.light.json +++ b/design-tokens/tokens/semantic/color.light.json @@ -109,9 +109,9 @@ } } }, - "critical": { + "warning": { "$type": "color", - "$value": "{base.color.red.500-Opacity24}", + "$value": "{base.color.orange.400-Opacity24}", "$description": "", "$extensions": { "com.figma": { @@ -121,9 +121,21 @@ } } }, - "ok": { + "info": { "$type": "color", - "$value": "{base.color.green.400-Opacity24}", + "$value": "{base.color.blue.400-Opacity24}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "critical": { + "$type": "color", + "$value": "{base.color.red.500-Opacity24}", "$description": "", "$extensions": { "com.figma": { @@ -159,6 +171,30 @@ } } }, + "unknown": { + "$type": "color", + "$value": "{base.color.black.opacity4}", + "$description": "", + "$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": {} + } + } + }, "selected": { "strong": { "enabled": { @@ -213,42 +249,6 @@ } } }, - "unknown": { - "$type": "color", - "$value": "{base.color.black.opacity4}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - }, - "warning": { - "$type": "color", - "$value": "{base.color.orange.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", @@ -406,7 +406,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], + "scopes": ["SHAPE_FILL", "TEXT_FILL"], "codeSyntax": {} } } @@ -423,18 +423,6 @@ } } }, - "xweak": { - "$type": "color", - "$value": "{base.color.grey.500}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} - } - } - }, "placeholder": { "$type": "color", "$value": "{color.text.weak}", @@ -471,15 +459,17 @@ } } }, - "brand": { - "$type": "color", - "$value": "{base.color.green.600}", - "$description": "Brand text color. Use with caution. Currently not accessible for text that is below a bold weight and below 19px.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} + "onStrong": { + "default": { + "$type": "color", + "$value": "{base.color.white.100}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } } } }, @@ -499,7 +489,7 @@ }, "primary": { "$type": "color", - "$value": "{base.color.green.600}", + "$value": "{base.color.green.800}", "$description": "", "$extensions": { "com.figma": { @@ -509,20 +499,6 @@ } } }, - "onStrong": { - "default": { - "$type": "color", - "$value": "{base.color.white.100}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} - } - } - } - }, "critical": { "$type": "color", "$value": "{color.text.default}", @@ -775,18 +751,6 @@ } } }, - "xweak": { - "$type": "color", - "$value": "{base.color.grey.500}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], - "codeSyntax": {} - } - } - }, "disabled": { "$type": "color", "$value": "{base.color.black.opacity24}", @@ -883,18 +847,6 @@ } } }, - "brand": { - "$type": "color", - "$value": "{base.color.green.600}", - "$description": "Brand color for icons.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], - "codeSyntax": {} - } - } - }, "onSelectedStrong": { "$type": "color", "$value": "{base.color.white.100}", From 2f34a208edec53952c3b0a0235de581ff64ba9ab Mon Sep 17 00:00:00 2001 From: taysea Date: Thu, 12 Dec 2024 15:54:32 -0800 Subject: [PATCH 2/9] Rename enable to rest, adjusted token states --- design-tokens/src/token_export.ts | 4 +- .../tokens/component/component.default.json | 1842 +++++++++-------- 2 files changed, 1003 insertions(+), 843 deletions(-) diff --git a/design-tokens/src/token_export.ts b/design-tokens/src/token_export.ts index dab49cb2f..197d10397 100644 --- a/design-tokens/src/token_export.ts +++ b/design-tokens/src/token_export.ts @@ -205,12 +205,12 @@ export function tokenFilesFromLocalVariables( let token: Token; // TO DO this is temp way of handling the gradient on the primary button background // which is only stored in code but handled as a solid color in Figma - if (variable.name === 'button/primary/enabled/background') { + if (variable.name === 'button/primary/rest/background') { const componentTokens = fs.readFileSync( 'tokens/component/component.default.json', ); const parsed = JSON.parse(componentTokens.toString()); - token = parsed.button.primary.enabled.background; + token = parsed.button.primary.rest.background; } else { token = { $type: tokenTypeFromVariable(variable), diff --git a/design-tokens/tokens/component/component.default.json b/design-tokens/tokens/component/component.default.json index fe2707319..97e8787db 100644 --- a/design-tokens/tokens/component/component.default.json +++ b/design-tokens/tokens/component/component.default.json @@ -1,7 +1,7 @@ { "button": { "primary": { - "enabled": { + "rest": { "background": { "$type": "gradient", "$value": { @@ -36,7 +36,7 @@ }, "borderColor": { "$type": "color", - "$value": "{button.default.enabled.borderColor}", + "$value": "{button.default.rest.borderColor}", "$description": "", "$extensions": { "com.figma": { @@ -96,63 +96,65 @@ } }, "disabled": { - "background": { - "$type": "color", - "$value": "{color.background.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} + "rest": { + "background": { + "$type": "color", + "$value": "{color.background.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } } - } - }, - "borderColor": { - "$type": "color", - "$value": "{button.default.enabled.borderColor}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], - "codeSyntax": {} + }, + "borderColor": { + "$type": "color", + "$value": "{button.default.rest.borderColor}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } } - } - }, - "textColor": { - "$type": "color", - "$value": "{color.text.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} + }, + "textColor": { + "$type": "color", + "$value": "{color.text.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } } - } - }, - "iconColor": { - "$type": "color", - "$value": "{color.icon.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], - "codeSyntax": {} + }, + "iconColor": { + "$type": "color", + "$value": "{color.icon.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "codeSyntax": {} + } } - } - }, - "fontWeight": { - "$type": "number", - "$value": "{button.primary.enabled.fontWeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_STYLE"], - "codeSyntax": {} + }, + "fontWeight": { + "$type": "number", + "$value": "{button.primary.rest.fontWeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_STYLE"], + "codeSyntax": {} + } } } } @@ -172,7 +174,7 @@ }, "borderColor": { "$type": "color", - "$value": "{button.primary.enabled.borderColor}", + "$value": "{button.primary.rest.borderColor}", "$description": "", "$extensions": { "com.figma": { @@ -208,7 +210,7 @@ }, "fontWeight": { "$type": "number", - "$value": "{button.primary.enabled.fontWeight}", + "$value": "{button.primary.rest.fontWeight}", "$description": "", "$extensions": { "com.figma": { @@ -220,10 +222,10 @@ } }, "selected": { - "enabled": { + "rest": { "background": { "$type": "color", - "$value": "{button.default.selected.enabled.background}", + "$value": "{button.default.selected.rest.background}", "$description": "", "$extensions": { "com.figma": { @@ -235,7 +237,7 @@ }, "borderColor": { "$type": "color", - "$value": "{button.default.selected.enabled.borderColor}", + "$value": "{button.default.selected.rest.borderColor}", "$description": "", "$extensions": { "com.figma": { @@ -247,7 +249,7 @@ }, "textColor": { "$type": "color", - "$value": "{button.default.selected.enabled.textColor}", + "$value": "{button.default.selected.rest.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -259,7 +261,7 @@ }, "iconColor": { "$type": "color", - "$value": "{button.default.selected.enabled.iconColor}", + "$value": "{button.default.selected.rest.iconColor}", "$description": "", "$extensions": { "com.figma": { @@ -271,7 +273,7 @@ }, "fontWeight": { "$type": "number", - "$value": "{button.primary.enabled.fontWeight}", + "$value": "{button.primary.rest.fontWeight}", "$description": "", "$extensions": { "com.figma": { @@ -285,7 +287,7 @@ "hover": { "background": { "$type": "color", - "$value": "{button.default.selected.enabled.background}", + "$value": "{button.default.selected.rest.background}", "$description": "", "$extensions": { "com.figma": { @@ -297,7 +299,7 @@ }, "borderColor": { "$type": "color", - "$value": "{button.default.selected.enabled.borderColor}", + "$value": "{button.default.selected.rest.borderColor}", "$description": "", "$extensions": { "com.figma": { @@ -309,7 +311,7 @@ }, "textColor": { "$type": "color", - "$value": "{button.default.selected.enabled.textColor}", + "$value": "{button.default.selected.rest.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -321,7 +323,7 @@ }, "iconColor": { "$type": "color", - "$value": "{button.default.selected.enabled.iconColor}", + "$value": "{button.default.selected.rest.iconColor}", "$description": "", "$extensions": { "com.figma": { @@ -333,7 +335,7 @@ }, "fontWeight": { "$type": "number", - "$value": "{button.primary.enabled.fontWeight}", + "$value": "{button.primary.rest.fontWeight}", "$description": "", "$extensions": { "com.figma": { @@ -1387,10 +1389,10 @@ } }, "secondary": { - "enabled": { + "rest": { "background": { "$type": "color", - "$value": "{button.default.enabled.background}", + "$value": "{button.default.rest.background}", "$description": "", "$extensions": { "com.figma": { @@ -1414,7 +1416,7 @@ }, "textColor": { "$type": "color", - "$value": "{button.default.enabled.textColor}", + "$value": "{button.default.rest.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -1426,7 +1428,7 @@ }, "iconColor": { "$type": "color", - "$value": "{button.default.enabled.iconColor}", + "$value": "{button.default.rest.iconColor}", "$description": "", "$extensions": { "com.figma": { @@ -1438,7 +1440,7 @@ }, "fontWeight": { "$type": "number", - "$value": "{button.default.enabled.fontWeight}", + "$value": "{button.default.rest.fontWeight}", "$description": "", "$extensions": { "com.figma": { @@ -1452,7 +1454,7 @@ "hover": { "background": { "$type": "color", - "$value": "{button.default.enabled.background}", + "$value": "{button.default.rest.background}", "$description": "", "$extensions": { "com.figma": { @@ -1476,7 +1478,7 @@ }, "textColor": { "$type": "color", - "$value": "{button.default.enabled.textColor}", + "$value": "{button.default.rest.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -1488,7 +1490,7 @@ }, "iconColor": { "$type": "color", - "$value": "{button.default.enabled.iconColor}", + "$value": "{button.default.rest.iconColor}", "$description": "", "$extensions": { "com.figma": { @@ -1500,7 +1502,7 @@ }, "fontWeight": { "$type": "number", - "$value": "{button.default.enabled.fontWeight}", + "$value": "{button.default.rest.fontWeight}", "$description": "", "$extensions": { "com.figma": { @@ -1512,72 +1514,74 @@ } }, "disabled": { - "background": { - "$type": "color", - "$value": "{color.background.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} + "rest": { + "background": { + "$type": "color", + "$value": "{color.background.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } } - } - }, - "borderColor": { - "$type": "color", - "$value": "{color.border.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], - "codeSyntax": {} + }, + "borderColor": { + "$type": "color", + "$value": "{color.border.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } } - } - }, - "textColor": { - "$type": "color", - "$value": "{color.text.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} + }, + "textColor": { + "$type": "color", + "$value": "{color.text.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } } - } - }, - "iconColor": { - "$type": "color", - "$value": "{color.icon.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], - "codeSyntax": {} + }, + "iconColor": { + "$type": "color", + "$value": "{color.icon.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "codeSyntax": {} + } } - } - }, - "fontWeight": { - "$type": "number", - "$value": "{button.default.enabled.fontWeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_STYLE"], - "codeSyntax": {} + }, + "fontWeight": { + "$type": "number", + "$value": "{button.default.rest.fontWeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_STYLE"], + "codeSyntax": {} + } } } } }, "selected": { - "enabled": { + "rest": { "background": { "$type": "color", - "$value": "{button.default.selected.enabled.background}", + "$value": "{button.default.selected.rest.background}", "$description": "", "$extensions": { "com.figma": { @@ -1589,7 +1593,7 @@ }, "borderColor": { "$type": "color", - "$value": "{button.default.selected.enabled.borderColor}", + "$value": "{button.default.selected.rest.borderColor}", "$description": "", "$extensions": { "com.figma": { @@ -1601,7 +1605,7 @@ }, "textColor": { "$type": "color", - "$value": "{button.default.selected.enabled.textColor}", + "$value": "{button.default.selected.rest.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -1613,7 +1617,7 @@ }, "iconColor": { "$type": "color", - "$value": "{button.default.selected.enabled.iconColor}", + "$value": "{button.default.selected.rest.iconColor}", "$description": "", "$extensions": { "com.figma": { @@ -1625,7 +1629,7 @@ }, "fontWeight": { "$type": "number", - "$value": "{button.default.enabled.fontWeight}", + "$value": "{button.default.rest.fontWeight}", "$description": "", "$extensions": { "com.figma": { @@ -1639,7 +1643,7 @@ "hover": { "background": { "$type": "color", - "$value": "{button.default.selected.enabled.background}", + "$value": "{button.default.selected.rest.background}", "$description": "", "$extensions": { "com.figma": { @@ -1651,7 +1655,7 @@ }, "borderColor": { "$type": "color", - "$value": "{button.default.selected.enabled.borderColor}", + "$value": "{button.default.selected.rest.borderColor}", "$description": "", "$extensions": { "com.figma": { @@ -1663,7 +1667,7 @@ }, "textColor": { "$type": "color", - "$value": "{button.default.selected.enabled.textColor}", + "$value": "{button.default.selected.rest.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -1675,7 +1679,7 @@ }, "iconColor": { "$type": "color", - "$value": "{button.default.selected.enabled.iconColor}", + "$value": "{button.default.selected.rest.iconColor}", "$description": "", "$extensions": { "com.figma": { @@ -1687,7 +1691,7 @@ }, "fontWeight": { "$type": "number", - "$value": "{button.default.enabled.fontWeight}", + "$value": "{button.default.rest.fontWeight}", "$description": "", "$extensions": { "com.figma": { @@ -2856,7 +2860,7 @@ } }, "default": { - "enabled": { + "rest": { "background": { "$type": "color", "$value": "{color.transparent}", @@ -2919,63 +2923,65 @@ } }, "disabled": { - "background": { - "$type": "color", - "$value": "{button.default.enabled.background}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - }, - "borderColor": { - "$type": "color", - "$value": "{button.default.enabled.borderColor}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR"], - "codeSyntax": {} + "rest": { + "background": { + "$type": "color", + "$value": "{button.default.rest.background}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } } - } - }, - "textColor": { - "$type": "color", - "$value": "{color.text.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} + }, + "borderColor": { + "$type": "color", + "$value": "{button.default.rest.borderColor}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR"], + "codeSyntax": {} + } } - } - }, - "iconColor": { - "$type": "color", - "$value": "{color.icon.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], - "codeSyntax": {} + }, + "textColor": { + "$type": "color", + "$value": "{color.text.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } } - } - }, - "fontWeight": { - "$type": "number", - "$value": "{button.default.enabled.fontWeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_STYLE"], - "codeSyntax": {} + }, + "iconColor": { + "$type": "color", + "$value": "{color.icon.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "codeSyntax": {} + } + } + }, + "fontWeight": { + "$type": "number", + "$value": "{button.default.rest.fontWeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_STYLE"], + "codeSyntax": {} + } } } } @@ -2995,7 +3001,7 @@ }, "borderColor": { "$type": "color", - "$value": "{button.default.enabled.borderColor}", + "$value": "{button.default.rest.borderColor}", "$description": "", "$extensions": { "com.figma": { @@ -3007,7 +3013,7 @@ }, "textColor": { "$type": "color", - "$value": "{button.default.enabled.textColor}", + "$value": "{button.default.rest.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -3019,7 +3025,7 @@ }, "iconColor": { "$type": "color", - "$value": "{button.default.enabled.iconColor}", + "$value": "{button.default.rest.iconColor}", "$description": "", "$extensions": { "com.figma": { @@ -3031,7 +3037,7 @@ }, "fontWeight": { "$type": "number", - "$value": "{button.default.enabled.fontWeight}", + "$value": "{button.default.rest.fontWeight}", "$description": "", "$extensions": { "com.figma": { @@ -3043,7 +3049,7 @@ } }, "selected": { - "enabled": { + "rest": { "background": { "$type": "color", "$value": "{color.background.active}", @@ -3070,7 +3076,7 @@ }, "textColor": { "$type": "color", - "$value": "{button.default.enabled.textColor}", + "$value": "{button.default.rest.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -3082,7 +3088,7 @@ }, "iconColor": { "$type": "color", - "$value": "{button.default.enabled.iconColor}", + "$value": "{button.default.rest.iconColor}", "$description": "", "$extensions": { "com.figma": { @@ -3094,7 +3100,7 @@ }, "fontWeight": { "$type": "number", - "$value": "{button.default.enabled.fontWeight}", + "$value": "{button.default.rest.fontWeight}", "$description": "", "$extensions": { "com.figma": { @@ -3132,7 +3138,7 @@ }, "textColor": { "$type": "color", - "$value": "{button.default.enabled.textColor}", + "$value": "{button.default.rest.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -3144,7 +3150,7 @@ }, "iconColor": { "$type": "color", - "$value": "{button.default.enabled.iconColor}", + "$value": "{button.default.rest.iconColor}", "$description": "", "$extensions": { "com.figma": { @@ -3156,7 +3162,7 @@ }, "fontWeight": { "$type": "number", - "$value": "{button.default.enabled.fontWeight}", + "$value": "{button.default.rest.fontWeight}", "$description": "", "$extensions": { "com.figma": { @@ -4210,7 +4216,7 @@ } }, "toolbar": { - "enabled": { + "rest": { "background": { "$type": "color", "$value": "{color.transparent}", @@ -4237,7 +4243,7 @@ }, "textColor": { "$type": "color", - "$value": "{button.default.enabled.textColor}", + "$value": "{button.default.rest.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -4249,7 +4255,7 @@ }, "iconColor": { "$type": "color", - "$value": "{button.default.enabled.iconColor}", + "$value": "{button.default.rest.iconColor}", "$description": "", "$extensions": { "com.figma": { @@ -4261,7 +4267,7 @@ }, "fontWeight": { "$type": "number", - "$value": "{button.default.enabled.fontWeight}", + "$value": "{button.default.rest.fontWeight}", "$description": "", "$extensions": { "com.figma": { @@ -4272,10 +4278,10 @@ } } }, - "disabled": { + "hover": { "background": { "$type": "color", - "$value": "{color.background.disabled}", + "$value": "{color.background.hover}", "$description": "", "$extensions": { "com.figma": { @@ -4287,7 +4293,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.disabled}", + "$value": "{button.toolbar.rest.borderColor}", "$description": "", "$extensions": { "com.figma": { @@ -4299,7 +4305,7 @@ }, "textColor": { "$type": "color", - "$value": "{color.text.disabled}", + "$value": "{button.toolbar.rest.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -4311,7 +4317,7 @@ }, "iconColor": { "$type": "color", - "$value": "{color.icon.disabled}", + "$value": "{button.toolbar.rest.iconColor}", "$description": "", "$extensions": { "com.figma": { @@ -4323,7 +4329,7 @@ }, "fontWeight": { "$type": "number", - "$value": "{button.default.enabled.fontWeight}", + "$value": "{button.default.rest.fontWeight}", "$description": "", "$extensions": { "com.figma": { @@ -4334,73 +4340,75 @@ } } }, - "hover": { - "background": { - "$type": "color", - "$value": "{color.background.hover}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} + "disabled": { + "rest": { + "background": { + "$type": "color", + "$value": "{color.background.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } } - } - }, - "borderColor": { - "$type": "color", - "$value": "{button.toolbar.enabled.borderColor}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], - "codeSyntax": {} + }, + "borderColor": { + "$type": "color", + "$value": "{color.border.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } } - } - }, - "textColor": { - "$type": "color", - "$value": "{button.toolbar.enabled.textColor}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} + }, + "textColor": { + "$type": "color", + "$value": "{color.text.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } } - } - }, - "iconColor": { - "$type": "color", - "$value": "{button.toolbar.enabled.iconColor}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], - "codeSyntax": {} + }, + "iconColor": { + "$type": "color", + "$value": "{color.icon.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "codeSyntax": {} + } } - } - }, - "fontWeight": { - "$type": "number", - "$value": "{button.default.enabled.fontWeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_STYLE"], - "codeSyntax": {} + }, + "fontWeight": { + "$type": "number", + "$value": "{button.default.rest.fontWeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_STYLE"], + "codeSyntax": {} + } } } } }, "selected": { - "enabled": { + "rest": { "background": { "$type": "color", - "$value": "{button.default.selected.enabled.background}", + "$value": "{button.default.selected.rest.background}", "$description": "", "$extensions": { "com.figma": { @@ -4412,7 +4420,7 @@ }, "borderColor": { "$type": "color", - "$value": "{button.default.selected.enabled.borderColor}", + "$value": "{button.default.selected.rest.borderColor}", "$description": "", "$extensions": { "com.figma": { @@ -4424,7 +4432,7 @@ }, "textColor": { "$type": "color", - "$value": "{button.default.selected.enabled.textColor}", + "$value": "{button.default.selected.rest.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -4436,7 +4444,7 @@ }, "iconColor": { "$type": "color", - "$value": "{button.default.selected.enabled.iconColor}", + "$value": "{button.default.selected.rest.iconColor}", "$description": "", "$extensions": { "com.figma": { @@ -4448,7 +4456,7 @@ }, "fontWeight": { "$type": "number", - "$value": "{button.default.enabled.fontWeight}", + "$value": "{button.default.rest.fontWeight}", "$description": "", "$extensions": { "com.figma": { @@ -4462,7 +4470,7 @@ "hover": { "background": { "$type": "color", - "$value": "{button.default.selected.enabled.background}", + "$value": "{button.default.selected.rest.background}", "$description": "", "$extensions": { "com.figma": { @@ -4474,7 +4482,7 @@ }, "borderColor": { "$type": "color", - "$value": "{button.default.selected.enabled.borderColor}", + "$value": "{button.default.selected.rest.borderColor}", "$description": "", "$extensions": { "com.figma": { @@ -4486,7 +4494,7 @@ }, "textColor": { "$type": "color", - "$value": "{button.default.selected.enabled.textColor}", + "$value": "{button.default.selected.rest.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -4498,7 +4506,7 @@ }, "iconColor": { "$type": "color", - "$value": "{button.default.selected.enabled.iconColor}", + "$value": "{button.default.selected.rest.iconColor}", "$description": "", "$extensions": { "com.figma": { @@ -4510,7 +4518,7 @@ }, "fontWeight": { "$type": "number", - "$value": "{button.default.enabled.fontWeight}", + "$value": "{button.default.rest.fontWeight}", "$description": "", "$extensions": { "com.figma": { @@ -5616,7 +5624,7 @@ }, "menu": { "item": { - "enabled": { + "rest": { "background": { "$type": "color", "$value": "{color.transparent}", @@ -5643,7 +5651,7 @@ }, "textColor": { "$type": "color", - "$value": "{button.default.enabled.textColor}", + "$value": "{button.default.rest.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -5655,7 +5663,7 @@ }, "iconColor": { "$type": "color", - "$value": "{button.default.enabled.iconColor}", + "$value": "{button.default.rest.iconColor}", "$description": "", "$extensions": { "com.figma": { @@ -5667,7 +5675,7 @@ }, "fontWeight": { "$type": "number", - "$value": "{button.default.enabled.fontWeight}", + "$value": "{button.default.rest.fontWeight}", "$description": "", "$extensions": { "com.figma": { @@ -5741,106 +5749,108 @@ } }, "disabled": { + "rest": { + "background": { + "$type": "color", + "$value": "{color.transparent}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "borderColor": { + "$type": "color", + "$value": "{color.transparent}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } + } + }, + "textColor": { + "$type": "color", + "$value": "{button.default.disabled.rest.textColor}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } + } + }, + "iconColor": { + "$type": "color", + "$value": "{button.default.disabled.rest.iconColor}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["SHAPE_FILL", "STROKE_COLOR"], + "codeSyntax": {} + } + } + }, + "fontWeight": { + "$type": "number", + "$value": "{button.default.disabled.rest.fontWeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_STYLE"], + "codeSyntax": {} + } + } + } + } + } + }, + "group": { + "separator": { "background": { "$type": "color", - "$value": "{color.transparent}", + "$value": "{color.border.default}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], "codeSyntax": {} } } - }, - "borderColor": { - "$type": "color", - "$value": "{color.transparent}", + } + } + }, + "medium": { + "item": { + "paddingX": { + "$type": "number", + "$value": "{button.default.medium.paddingX}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "scopes": ["GAP"], "codeSyntax": {} } } }, - "textColor": { - "$type": "color", - "$value": "{button.default.disabled.textColor}", + "paddingY": { + "$type": "number", + "$value": "{button.default.medium.paddingY}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} - } - } - }, - "iconColor": { - "$type": "color", - "$value": "{button.default.disabled.iconColor}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["SHAPE_FILL", "STROKE_COLOR"], - "codeSyntax": {} - } - } - }, - "fontWeight": { - "$type": "number", - "$value": "{button.default.disabled.fontWeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_STYLE"], - "codeSyntax": {} - } - } - } - } - }, - "group": { - "separator": { - "background": { - "$type": "color", - "$value": "{color.border.default}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], - "codeSyntax": {} - } - } - } - } - }, - "medium": { - "item": { - "paddingX": { - "$type": "number", - "$value": "{button.default.medium.paddingX}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "paddingY": { - "$type": "number", - "$value": "{button.default.medium.paddingY}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], + "scopes": ["GAP"], "codeSyntax": {} } } @@ -6040,7 +6050,7 @@ } }, "option": { - "enabled": { + "rest": { "background": { "$type": "color", "$value": "{color.transparent}", @@ -6129,7 +6139,7 @@ }, "fontWeight": { "$type": "number", - "$value": "{select.option.enabled.fontWeight}", + "$value": "{select.option.rest.fontWeight}", "$description": "", "$extensions": { "com.figma": { @@ -6141,57 +6151,59 @@ } }, "disabled": { - "background": { - "$type": "color", - "$value": "{color.background.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} + "rest": { + "background": { + "$type": "color", + "$value": "{color.background.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } } - } - }, - "borderColor": { - "$type": "color", - "$value": "{color.transparent}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], - "codeSyntax": {} + }, + "borderColor": { + "$type": "color", + "$value": "{color.transparent}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } } - } - }, - "textColor": { - "$type": "color", - "$value": "{color.text.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} + }, + "textColor": { + "$type": "color", + "$value": "{color.text.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } } - } - }, - "fontWeight": { - "$type": "number", - "$value": "{select.option.enabled.fontWeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_STYLE"], - "codeSyntax": {} + }, + "fontWeight": { + "$type": "number", + "$value": "{select.option.rest.fontWeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_STYLE"], + "codeSyntax": {} + } } } } }, "selected": { - "enabled": { + "rest": { "background": { "$type": "color", "$value": "{color.background.selected.weak.enabled}", @@ -6240,13 +6252,63 @@ } } } + }, + "hover": { + "background": { + "$type": "color", + "$value": "{color.background.selected.weak.hover}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "borderColor": { + "$type": "color", + "$value": "{color.transparent}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } + } + }, + "textColor": { + "$type": "color", + "$value": "{color.text.onSelected}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } + } + }, + "fontWeight": { + "$type": "number", + "$value": "{fontWeight.medium}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_STYLE"], + "codeSyntax": {} + } + } + } } } } }, "checkbox": { "control": { - "enabled": { + "rest": { "background": { "$type": "color", "$value": "{color.background.default}", @@ -6299,36 +6361,10 @@ } }, "disabled": { - "background": { - "$type": "color", - "$value": "{color.background.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - }, - "borderColor": { - "$type": "color", - "$value": "{color.border.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], - "codeSyntax": {} - } - } - } - }, - "selected": { - "enabled": { + "rest": { "background": { "$type": "color", - "$value": "{color.background.selected.strong.enabled}", + "$value": "{color.background.disabled}", "$description": "", "$extensions": { "com.figma": { @@ -6340,7 +6376,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.selected}", + "$value": "{color.border.disabled}", "$description": "", "$extensions": { "com.figma": { @@ -6352,18 +6388,20 @@ }, "iconColor": { "$type": "color", - "$value": "{color.icon.onSelectedStrong}", + "$value": "{color.icon.disabled}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["SHAPE_FILL", "STROKE_COLOR"], + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], "codeSyntax": {} } } } - }, - "hover": { + } + }, + "selected": { + "rest": { "background": { "$type": "color", "$value": "{color.background.selected.strong.enabled}", @@ -6378,7 +6416,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.strong}", + "$value": "{color.border.selected}", "$description": "", "$extensions": { "com.figma": { @@ -6401,10 +6439,10 @@ } } }, - "disabled": { + "hover": { "background": { "$type": "color", - "$value": "{color.background.disabled}", + "$value": "{color.background.selected.strong.enabled}", "$description": "", "$extensions": { "com.figma": { @@ -6416,7 +6454,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.disabled}", + "$value": "{color.border.strong}", "$description": "", "$extensions": { "com.figma": { @@ -6428,7 +6466,7 @@ }, "iconColor": { "$type": "color", - "$value": "{color.icon.disabled}", + "$value": "{color.icon.onSelectedStrong}", "$description": "", "$extensions": { "com.figma": { @@ -6441,7 +6479,7 @@ } }, "indeterminate": { - "enabled": { + "rest": { "background": { "$type": "color", "$value": "{color.background.selected.strong.enabled}", @@ -6516,49 +6554,11 @@ } } } - }, - "disabled": { - "background": { - "$type": "color", - "$value": "{color.background.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - }, - "borderColor": { - "$type": "color", - "$value": "{color.border.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], - "codeSyntax": {} - } - } - }, - "iconColor": { - "$type": "color", - "$value": "{color.icon.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["SHAPE_FILL", "STROKE_COLOR"], - "codeSyntax": {} - } - } - } } } }, "label": { - "enabled": { + "rest": { "textColor": { "$type": "color", "$value": "{color.text.default}", @@ -6587,15 +6587,17 @@ } }, "disabled": { - "textColor": { - "$type": "color", - "$value": "{color.text.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} + "rest": { + "textColor": { + "$type": "color", + "$value": "{color.text.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } } } } @@ -6707,7 +6709,7 @@ "switch": { "control": { "track": { - "enabled": { + "rest": { "background": { "$type": "color", "$value": "{color.background.default}", @@ -6760,36 +6762,10 @@ } }, "disabled": { - "background": { - "$type": "color", - "$value": "{color.background.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - }, - "borderColor": { - "$type": "color", - "$value": "{color.border.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], - "codeSyntax": {} - } - } - } - }, - "selected": { - "enabled": { + "rest": { "background": { "$type": "color", - "$value": "{color.background.selected.strong.enabled}", + "$value": "{color.background.disabled}", "$description": "", "$extensions": { "com.figma": { @@ -6801,7 +6777,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.default}", + "$value": "{color.border.disabled}", "$description": "", "$extensions": { "com.figma": { @@ -6811,8 +6787,10 @@ } } } - }, - "hover": { + } + }, + "selected": { + "rest": { "background": { "$type": "color", "$value": "{color.background.selected.strong.enabled}", @@ -6827,7 +6805,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.strong}", + "$value": "{color.border.default}", "$description": "", "$extensions": { "com.figma": { @@ -6838,10 +6816,10 @@ } } }, - "disabled": { + "hover": { "background": { "$type": "color", - "$value": "{color.background.disabled}", + "$value": "{color.background.selected.strong.enabled}", "$description": "", "$extensions": { "com.figma": { @@ -6853,7 +6831,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.disabled}", + "$value": "{color.border.strong}", "$description": "", "$extensions": { "com.figma": { @@ -6867,7 +6845,7 @@ } }, "handle": { - "enabled": { + "rest": { "background": { "$type": "color", "$value": "{color.background.front}", @@ -6920,36 +6898,10 @@ } }, "disabled": { - "background": { - "$type": "color", - "$value": "{color.background.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - }, - "borderColor": { - "$type": "color", - "$value": "{color.border.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], - "codeSyntax": {} - } - } - } - }, - "selected": { - "enabled": { + "rest": { "background": { "$type": "color", - "$value": "{color.background.default}", + "$value": "{color.background.disabled}", "$description": "", "$extensions": { "com.figma": { @@ -6961,7 +6913,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.default}", + "$value": "{color.border.disabled}", "$description": "", "$extensions": { "com.figma": { @@ -6971,8 +6923,10 @@ } } } - }, - "hover": { + } + }, + "selected": { + "rest": { "background": { "$type": "color", "$value": "{color.background.default}", @@ -6998,10 +6952,10 @@ } } }, - "disabled": { + "hover": { "background": { "$type": "color", - "$value": "{color.background.disabled}", + "$value": "{color.background.default}", "$description": "", "$extensions": { "com.figma": { @@ -7013,7 +6967,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.disabled}", + "$value": "{color.border.default}", "$description": "", "$extensions": { "com.figma": { @@ -7028,7 +6982,7 @@ } }, "label": { - "enabled": { + "rest": { "textColor": { "$type": "color", "$value": "{color.text.default}", @@ -7057,15 +7011,17 @@ } }, "disabled": { - "textColor": { - "$type": "color", - "$value": "{color.text.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} + "rest": { + "textColor": { + "$type": "color", + "$value": "{color.text.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } } } } @@ -7323,7 +7279,7 @@ } } }, - "enabled": { + "rest": { "textColor": { "$type": "color", "$value": "{color.text.default}", @@ -7376,7 +7332,7 @@ "hover": { "textColor": { "$type": "color", - "$value": "{dataCell.enabled.textColor}", + "$value": "{dataCell.rest.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -7388,7 +7344,7 @@ }, "iconColor": { "$type": "color", - "$value": "{dataCell.enabled.iconColor}", + "$value": "{dataCell.rest.iconColor}", "$description": "", "$extensions": { "com.figma": { @@ -7400,7 +7356,7 @@ }, "borderColor": { "$type": "color", - "$value": "{dataCell.enabled.borderColor}", + "$value": "{dataCell.rest.borderColor}", "$description": "", "$extensions": { "com.figma": { @@ -7424,113 +7380,155 @@ } }, "disabled": { - "textColor": { - "$type": "color", - "$value": "{color.text.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} + "rest": { + "textColor": { + "$type": "color", + "$value": "{color.text.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } } - } - }, - "iconColor": { - "$type": "color", - "$value": "{color.icon.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], - "codeSyntax": {} + }, + "iconColor": { + "$type": "color", + "$value": "{color.icon.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "codeSyntax": {} + } } - } - }, - "borderColor": { - "$type": "color", - "$value": "{dataCell.enabled.borderColor}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], - "codeSyntax": {} + }, + "borderColor": { + "$type": "color", + "$value": "{dataCell.rest.borderColor}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } } - } - }, - "background": { - "$type": "color", - "$value": "{dataCell.enabled.background}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} + }, + "background": { + "$type": "color", + "$value": "{dataCell.rest.background}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } } } } }, - "pinned": { - "textColor": { - "$type": "color", - "$value": "{dataCell.enabled.textColor}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} + "selected": { + "rest": { + "textColor": { + "$type": "color", + "$value": "{color.text.onSelected}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } } - } - }, - "iconColor": { - "$type": "color", - "$value": "{dataCell.enabled.iconColor}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], - "codeSyntax": {} + }, + "iconColor": { + "$type": "color", + "$value": "{color.icon.onSelected}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "codeSyntax": {} + } } - } - }, - "borderColor": { - "$type": "color", - "$value": "{dataCell.enabled.borderColor}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], - "codeSyntax": {} + }, + "borderColor": { + "$type": "color", + "$value": "{dataCell.rest.borderColor}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } } - } - }, - "backgroundColor": { - "$type": "color", - "$value": "{dataCell.enabled.background}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} + }, + "background": { + "$type": "color", + "$value": "{color.background.selected.weak.enabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } } } }, - "background": { - "$type": "color", - "$value": "{dataCell.enabled.background}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} + "hover": { + "textColor": { + "$type": "color", + "$value": "{color.text.onSelected}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } + } + }, + "iconColor": { + "$type": "color", + "$value": "{color.icon.onSelected}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "codeSyntax": {} + } + } + }, + "borderColor": { + "$type": "color", + "$value": "{dataCell.rest.borderColor}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } + } + }, + "background": { + "$type": "color", + "$value": "{color.background.selected.weak.hover}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } } } } @@ -7620,7 +7618,7 @@ } } }, - "enabled": { + "rest": { "textColor": { "$type": "color", "$value": "{color.text.strong}", @@ -7647,7 +7645,7 @@ }, "borderColor": { "$type": "color", - "$value": "{dataCell.enabled.borderColor}", + "$value": "{dataCell.rest.borderColor}", "$description": "", "$extensions": { "com.figma": { @@ -7659,7 +7657,7 @@ }, "background": { "$type": "color", - "$value": "{dataCell.enabled.background}", + "$value": "{dataCell.rest.background}", "$description": "", "$extensions": { "com.figma": { @@ -7673,7 +7671,7 @@ "hover": { "textColor": { "$type": "color", - "$value": "{dataCell.primary.enabled.textColor}", + "$value": "{dataCell.primary.rest.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -7685,7 +7683,7 @@ }, "iconColor": { "$type": "color", - "$value": "{dataCell.primary.enabled.iconColor}", + "$value": "{dataCell.primary.rest.iconColor}", "$description": "", "$extensions": { "com.figma": { @@ -7723,7 +7721,59 @@ "disabled": { "textColor": { "$type": "color", - "$value": "{dataCell.disabled.textColor}", + "$value": "{dataCell.disabled.rest.textColor}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } + } + }, + "iconColor": { + "$type": "color", + "$value": "{dataCell.disabled.rest.iconColor}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "codeSyntax": {} + } + } + }, + "borderColor": { + "$type": "color", + "$value": "{dataCell.disabled.rest.borderColor}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } + } + }, + "background": { + "$type": "color", + "$value": "{dataCell.disabled.rest.background}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + } + } + }, + "pinned": { + "rest": { + "textColor": { + "$type": "color", + "$value": "{dataCell.rest.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -7735,7 +7785,7 @@ }, "iconColor": { "$type": "color", - "$value": "{dataCell.disabled.iconColor}", + "$value": "{dataCell.rest.iconColor}", "$description": "", "$extensions": { "com.figma": { @@ -7747,7 +7797,7 @@ }, "borderColor": { "$type": "color", - "$value": "{dataCell.disabled.borderColor}", + "$value": "{dataCell.rest.borderColor}", "$description": "", "$extensions": { "com.figma": { @@ -7757,9 +7807,21 @@ } } }, + "backgroundColor": { + "$type": "color", + "$value": "{dataCell.rest.background}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, "background": { "$type": "color", - "$value": "{dataCell.disabled.background}", + "$value": "{dataCell.rest.background}", "$description": "", "$extensions": { "com.figma": { @@ -7770,10 +7832,10 @@ } } }, - "pinned": { + "hover": { "textColor": { "$type": "color", - "$value": "{dataCell.primary.enabled.textColor}", + "$value": "{dataCell.rest.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -7785,7 +7847,7 @@ }, "iconColor": { "$type": "color", - "$value": "{dataCell.primary.enabled.iconColor}", + "$value": "{dataCell.rest.iconColor}", "$description": "", "$extensions": { "com.figma": { @@ -7797,7 +7859,7 @@ }, "borderColor": { "$type": "color", - "$value": "{dataCell.pinned.borderColor}", + "$value": "{dataCell.rest.borderColor}", "$description": "", "$extensions": { "com.figma": { @@ -7807,9 +7869,21 @@ } } }, + "backgroundColor": { + "$type": "color", + "$value": "{dataCell.rest.background}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, "background": { "$type": "color", - "$value": "{dataCell.pinned.background}", + "$value": "{dataCell.rest.background}", "$description": "", "$extensions": { "com.figma": { @@ -7907,7 +7981,7 @@ } } }, - "enabled": { + "rest": { "textColor": { "$type": "color", "$value": "{color.text.strong}", @@ -7960,7 +8034,7 @@ "hover": { "textColor": { "$type": "color", - "$value": "{headerCell.enabled.textColor}", + "$value": "{headerCell.rest.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -7972,7 +8046,7 @@ }, "iconColor": { "$type": "color", - "$value": "{headerCell.enabled.iconColor}", + "$value": "{headerCell.rest.iconColor}", "$description": "", "$extensions": { "com.figma": { @@ -7984,7 +8058,7 @@ }, "borderColor": { "$type": "color", - "$value": "{headerCell.enabled.borderColor}", + "$value": "{headerCell.rest.borderColor}", "$description": "", "$extensions": { "com.figma": { @@ -8010,7 +8084,7 @@ "pinned": { "textColor": { "$type": "color", - "$value": "{dataCell.enabled.textColor}", + "$value": "{dataCell.rest.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -8022,7 +8096,7 @@ }, "iconColor": { "$type": "color", - "$value": "{dataCell.enabled.iconColor}", + "$value": "{dataCell.rest.iconColor}", "$description": "", "$extensions": { "com.figma": { @@ -8082,7 +8156,7 @@ } }, "units": { - "enabled": { + "rest": { "textColor": { "$type": "color", "$value": "{color.text.weak}", @@ -8109,6 +8183,36 @@ } } } + }, + "pinned": { + "rest": { + "textColor": { + "$type": "color", + "$value": "{headerCell.units.rest.textColor}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + } + }, + "hover": { + "textColor": { + "$type": "color", + "$value": "{headerCell.units.rest.textColor}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + } + } } } }, @@ -8693,7 +8797,7 @@ }, "borderColor": { "$type": "color", - "$value": "#ffffff", + "$value": "{color.transparent}", "$description": "", "$extensions": { "com.figma": { @@ -8758,6 +8862,32 @@ } } }, + "focus": { + "background": { + "$type": "color", + "$value": "{color.background.hover}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "borderColor": { + "$type": "color", + "$value": "{color.transparent}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } + } + } + }, "readOnly": { "background": { "$type": "color", @@ -8842,7 +8972,7 @@ "hover": { "background": { "$type": "color", - "$value": "{color.transparent}", + "$value": "{color.background.hover}", "$description": "", "$extensions": { "com.figma": { @@ -9693,10 +9823,10 @@ } } }, - "enabled": { + "rest": { "textColor": { "$type": "color", - "$value": "{dataCell.enabled.textColor}", + "$value": "{dataCell.rest.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -9708,7 +9838,7 @@ }, "iconColor": { "$type": "color", - "$value": "{dataCell.enabled.iconColor}", + "$value": "{dataCell.rest.iconColor}", "$description": "", "$extensions": { "com.figma": { @@ -9746,7 +9876,7 @@ "hover": { "textColor": { "$type": "color", - "$value": "{footerCell.enabled.textColor}", + "$value": "{footerCell.rest.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -9758,7 +9888,7 @@ }, "iconColor": { "$type": "color", - "$value": "{footerCell.enabled.iconColor}", + "$value": "{footerCell.rest.iconColor}", "$description": "", "$extensions": { "com.figma": { @@ -9770,7 +9900,7 @@ }, "borderColor": { "$type": "color", - "$value": "{footerCell.enabled.borderColor}", + "$value": "{footerCell.rest.borderColor}", "$description": "", "$extensions": { "com.figma": { @@ -9794,59 +9924,43 @@ } }, "pinned": { - "textColor": { - "$type": "color", - "$value": "{dataCell.enabled.textColor}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} - } - } - }, - "iconColor": { - "$type": "color", - "$value": "{dataCell.enabled.iconColor}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], - "codeSyntax": {} + "rest": { + "textColor": { + "$type": "color", + "$value": "{dataCell.rest.textColor}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } } - } - }, - "borderColor": { - "$type": "color", - "$value": "{dataCell.hover.borderColor}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], - "codeSyntax": {} + }, + "iconColor": { + "$type": "color", + "$value": "{dataCell.rest.iconColor}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "codeSyntax": {} + } } - } - }, - "background": { - "$type": "color", - "$value": "{color.transparent}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} + }, + "borderColor": { + "$type": "color", + "$value": "{dataCell.hover.borderColor}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } } - } - } - } - }, - "radioButton": { - "control": { - "enabled": { + }, "background": { "$type": "color", "$value": "{color.transparent}", @@ -9858,10 +9972,36 @@ "codeSyntax": {} } } + } + }, + "hover": { + "textColor": { + "$type": "color", + "$value": "{dataCell.rest.textColor}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } + } + }, + "iconColor": { + "$type": "color", + "$value": "{dataCell.rest.iconColor}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "codeSyntax": {} + } + } }, "borderColor": { "$type": "color", - "$value": "{color.border.default}", + "$value": "{dataCell.hover.borderColor}", "$description": "", "$extensions": { "com.figma": { @@ -9870,9 +10010,25 @@ "codeSyntax": {} } } + }, + "background": { + "$type": "color", + "$value": "{color.transparent}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } } - }, - "hover": { + } + } + }, + "radioButton": { + "control": { + "rest": { "background": { "$type": "color", "$value": "{color.transparent}", @@ -9887,7 +10043,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.strong}", + "$value": "{color.border.default}", "$description": "", "$extensions": { "com.figma": { @@ -9898,7 +10054,7 @@ } } }, - "focus": { + "hover": { "background": { "$type": "color", "$value": "{color.transparent}", @@ -9913,7 +10069,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.default}", + "$value": "{color.border.strong}", "$description": "", "$extensions": { "com.figma": { @@ -9924,10 +10080,10 @@ } } }, - "disabled": { + "focus": { "background": { "$type": "color", - "$value": "{color.background.disabled}", + "$value": "{color.transparent}", "$description": "", "$extensions": { "com.figma": { @@ -9939,7 +10095,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.disabled}", + "$value": "{color.border.default}", "$description": "", "$extensions": { "com.figma": { @@ -9950,11 +10106,11 @@ } } }, - "selected": { - "enabled": { + "disabled": { + "rest": { "background": { "$type": "color", - "$value": "{color.background.default}", + "$value": "{color.background.disabled}", "$description": "", "$extensions": { "com.figma": { @@ -9966,7 +10122,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.selected}", + "$value": "{color.border.disabled}", "$description": "", "$extensions": { "com.figma": { @@ -9975,21 +10131,11 @@ "codeSyntax": {} } } - }, - "iconColor": { - "$type": "color", - "$value": "{color.icon.brand}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["SHAPE_FILL", "STROKE_COLOR"], - "codeSyntax": {} - } - } } - }, - "hover": { + } + }, + "selected": { + "rest": { "background": { "$type": "color", "$value": "{color.background.default}", @@ -10004,7 +10150,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.strong}", + "$value": "{color.border.selected}", "$description": "", "$extensions": { "com.figma": { @@ -10016,7 +10162,7 @@ }, "iconColor": { "$type": "color", - "$value": "{color.icon.brand}", + "$value": "{color.decorative.brand}", "$description": "", "$extensions": { "com.figma": { @@ -10027,7 +10173,7 @@ } } }, - "focus": { + "hover": { "background": { "$type": "color", "$value": "{color.background.default}", @@ -10042,7 +10188,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.selected}", + "$value": "{color.border.strong}", "$description": "", "$extensions": { "com.figma": { @@ -10054,21 +10200,21 @@ }, "iconColor": { "$type": "color", - "$value": "{color.icon.brand}", + "$value": "{color.decorative.brand}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "scopes": ["SHAPE_FILL", "STROKE_COLOR"], "codeSyntax": {} } } } }, - "disabled": { + "focus": { "background": { "$type": "color", - "$value": "{color.background.disabled}", + "$value": "{color.background.default}", "$description": "", "$extensions": { "com.figma": { @@ -10080,7 +10226,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.disabled}", + "$value": "{color.border.selected}", "$description": "", "$extensions": { "com.figma": { @@ -10092,12 +10238,12 @@ }, "iconColor": { "$type": "color", - "$value": "{color.icon.disabled}", + "$value": "{color.decorative.brand}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["SHAPE_FILL", "STROKE_COLOR"], + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], "codeSyntax": {} } } @@ -10106,7 +10252,7 @@ } }, "label": { - "enabled": { + "rest": { "textColor": { "$type": "color", "$value": "{color.text.default}", @@ -10135,15 +10281,47 @@ } }, "disabled": { - "textColor": { - "$type": "color", - "$value": "{color.text.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} + "rest": { + "textColor": { + "$type": "color", + "$value": "{color.text.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } + } + } + } + }, + "selected": { + "rest": { + "textColor": { + "$type": "color", + "$value": "{color.text.default}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } + } + } + }, + "hover": { + "textColor": { + "$type": "color", + "$value": "{color.text.default}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } } } } @@ -10254,7 +10432,7 @@ }, "anchor": { "default": { - "enabled": { + "rest": { "textColor": { "$type": "color", "$value": "{color.text.strong}", @@ -10367,10 +10545,8 @@ } } } - } - }, - "small": { - "default": { + }, + "small": { "fontSize": { "$type": "number", "$value": "{element.small.fontSize}", @@ -10407,10 +10583,8 @@ } } } - } - }, - "medium": { - "default": { + }, + "medium": { "fontSize": { "$type": "number", "$value": "{element.medium.fontSize}", @@ -10447,10 +10621,8 @@ } } } - } - }, - "large": { - "default": { + }, + "large": { "fontSize": { "$type": "number", "$value": "{element.large.fontSize}", @@ -10487,10 +10659,8 @@ } } } - } - }, - "xlarge": { - "default": { + }, + "xlarge": { "fontSize": { "$type": "number", "$value": "{element.xlarge.fontSize}", @@ -10527,10 +10697,8 @@ } } } - } - }, - "xxlarge": { - "default": { + }, + "xxlarge": { "fontSize": { "$type": "number", "$value": "{text.xxlarge.fontSize}", @@ -10567,10 +10735,8 @@ } } } - } - }, - "3xlarge": { - "default": { + }, + "3xlarge": { "fontSize": { "$type": "number", "$value": "{text.3xl.fontSize}", @@ -10607,10 +10773,8 @@ } } } - } - }, - "4xlarge": { - "default": { + }, + "4xlarge": { "fontSize": { "$type": "number", "$value": "{text.4xl.fontSize}", @@ -10647,10 +10811,8 @@ } } } - } - }, - "5xlarge": { - "default": { + }, + "5xlarge": { "fontSize": { "$type": "number", "$value": "{text.5xl.fontSize}", @@ -10687,10 +10849,8 @@ } } } - } - }, - "6xlarge": { - "default": { + }, + "6xlarge": { "fontSize": { "$type": "number", "$value": "{text.6xl.fontSize}", From b3ddf987a61c75805e2c79c2f817b44cfce10b77 Mon Sep 17 00:00:00 2001 From: taysea Date: Thu, 12 Dec 2024 16:02:31 -0800 Subject: [PATCH 3/9] Incorporate changes into grommet-app --- sandbox/grommet-app/src/theme.jsx | 217 ++++++++++++++++-------------- 1 file changed, 115 insertions(+), 102 deletions(-) diff --git a/sandbox/grommet-app/src/theme.jsx b/sandbox/grommet-app/src/theme.jsx index 61ab82838..5c1d02c97 100644 --- a/sandbox/grommet-app/src/theme.jsx +++ b/sandbox/grommet-app/src/theme.jsx @@ -8,26 +8,26 @@ import { global as localGlobal, components as localComponents, } from 'hpe-design-tokens'; -import { - dark as oldDark, - light as oldLight, - large as oldLarge, - small as oldSmall, - global as oldGlobal, - components as oldComponents, - elevationdark as oldElevationDark, - elevationlight as oldElevationLight, -} from 'hpe-design-tokens-old-theme'; -import { - dark as refreshDark, - light as refreshLight, - large as refreshLarge, - small as refreshSmall, - global as refreshGlobal, - components as refreshComponents, - elevationdark as refreshElevationDark, - elevationlight as refreshElevationLight, -} from 'hpe-design-tokens-brand-refresh'; +// import { +// dark as oldDark, +// light as oldLight, +// large as oldLarge, +// small as oldSmall, +// global as oldGlobal, +// components as oldComponents, +// elevationdark as oldElevationDark, +// elevationlight as oldElevationLight, +// } from 'hpe-design-tokens-old-theme'; +// import { +// dark as refreshDark, +// light as refreshLight, +// large as refreshLarge, +// small as refreshSmall, +// global as refreshGlobal, +// components as refreshComponents, +// elevationdark as refreshElevationDark, +// elevationlight as refreshElevationLight, +// } from 'hpe-design-tokens-brand-refresh'; import { Down, Blank, @@ -230,7 +230,7 @@ const buildTheme = tokens => { 'active-text': MISSING.color, 'disabled-text': MISSING.color, // deprecated, use text-weak instead - 'text-primary-button': components.hpe.button.primary.enabled.textColor, + 'text-primary-button': components.hpe.button.primary.rest.textColor, 'background-cta-alternate': MISSING.color, // ----------- These ones we need to map manually for backwards compatibility ----------- @@ -487,7 +487,7 @@ const buildTheme = tokens => { // option button kind styles. abstracted so select.emptySearchMessage // can reference pad value const option = { - color: components.hpe.select.option.enabled.textColor, + color: components.hpe.select.option.rest.textColor, border: { radius: dimensions.edgeSize[components.hpe.select.medium.option.borderRadius] || @@ -496,14 +496,14 @@ const buildTheme = tokens => { dimensions.borderSize[ components.hpe.select.medium.option.borderWidth ] || components.hpe.select.medium.option.borderWidth, - color: components.hpe.select.option.enabled.borderColor, + color: components.hpe.select.option.rest.borderColor, }, pad: { horizontal: components.hpe.select.medium.option.paddingX, vertical: components.hpe.select.medium.option.paddingY, }, font: { - weight: components.hpe.select.option.enabled.fontWeight, + weight: components.hpe.select.option.rest.fontWeight, }, }; @@ -526,9 +526,9 @@ const buildTheme = tokens => { const anchorSizeTheme = {}; textSizes.forEach(size => { anchorSizeTheme[size] = { - color: components.hpe.anchor.default.enabled.textColor, - textDecoration: components.hpe.anchor.default.enabled.textDecoration, - fontWeight: components.hpe.anchor.default.enabled.fontWeight, + color: components.hpe.anchor.default.rest.textColor, + textDecoration: components.hpe.anchor.default.rest.textDecoration, + fontWeight: components.hpe.anchor.default.rest.fontWeight, }; }); @@ -555,15 +555,15 @@ const buildTheme = tokens => { ? components.hpe.button.medium?.[kind].borderRadius : components.hpe.button[kind]?.medium.borderRadius; buttonKindTheme[kind] = { - background: components.hpe.button?.[kind].enabled.background, + background: components.hpe.button?.[kind].rest.background, border: { width: dimensions.borderSize[borderWidth] || borderWidth, - color: components.hpe.button?.[kind].enabled.borderColor, + color: components.hpe.button?.[kind].rest.borderColor, radius: dimensions.borderSize[borderRadius] || borderRadius, }, - color: components.hpe.button?.[kind].enabled.textColor, + color: components.hpe.button?.[kind].rest.textColor, font: { - weight: components.hpe.button?.[kind].enabled.fontWeight, + weight: components.hpe.button?.[kind].rest.fontWeight, }, }; }); @@ -578,19 +578,17 @@ const buildTheme = tokens => { buttonStatesTheme[state][kind] = { background: { color: - components.hpe.button?.[kind]?.[adjustedState].enabled.background, + components.hpe.button?.[kind]?.[adjustedState].rest.background, }, border: { // Q: this token isn't correct color: - components.hpe.button?.[kind]?.[adjustedState].enabled - .borderColor, + components.hpe.button?.[kind]?.[adjustedState].rest.borderColor, }, - color: - components.hpe.button?.[kind]?.[adjustedState].enabled.textColor, + color: components.hpe.button?.[kind]?.[adjustedState].rest.textColor, font: { weight: - components.hpe.button?.[kind]?.[adjustedState].enabled.fontWeight, + components.hpe.button?.[kind]?.[adjustedState].rest.fontWeight, }, }; } else if (kind === 'option') { @@ -598,13 +596,30 @@ const buildTheme = tokens => { buttonStatesTheme[state][kind] = { background: { color: - components.hpe.select.option?.[adjustedState].enabled.background, + components.hpe.select.option?.[adjustedState].rest.background, }, border: { color: components.hpe.select.option?.[adjustedState].borderColor, }, color: components.hpe.select.option?.[adjustedState].textColor, }; + } else if (state === 'disabled') { + buttonStatesTheme[state][kind] = { + background: { + color: + components.hpe.button?.[kind]?.[adjustedState].rest.background, + }, + border: { + width: '', + color: + components.hpe.button?.[kind]?.[adjustedState].rest.borderColor, + }, + color: components.hpe.button?.[kind]?.[adjustedState].rest.textColor, + font: { + weight: + components.hpe.button?.[kind]?.[adjustedState].rest.fontWeight, + }, + }; } else { buttonStatesTheme[state][kind] = { background: { @@ -853,10 +868,10 @@ const buildTheme = tokens => { }, }, anchor: { - color: components.hpe.anchor.default.enabled.textColor, - textDecoration: components.hpe.anchor.default.enabled.textDecoration, - fontWeight: components.hpe.anchor.default.enabled.fontWeight, - gap: components.hpe.anchor.medium.default.gapX, // TO DO not size specific + color: components.hpe.anchor.default.rest.textColor, + textDecoration: components.hpe.anchor.default.rest.textDecoration, + fontWeight: components.hpe.anchor.default.rest.fontWeight, + gap: components.hpe.anchor.default.medium.gapX, // TO DO not size specific hover: { textDecoration: components.hpe.anchor.default.hover.textDecoration, }, @@ -890,7 +905,7 @@ const buildTheme = tokens => { }, button: { intelligentPad: false, - color: components.hpe.button.default.enabled.textColor, + color: components.hpe.button.default.rest.textColor, gap: oldTheme ? components.hpe.button.medium.default.gapX : components.hpe.button.default.medium.gapX, @@ -931,10 +946,10 @@ const buildTheme = tokens => { }, selected: { option: { - background: components.hpe.select.option.selected.enabled.background, + background: components.hpe.select.option.selected.rest.background, color: components.hpe.select.option.selected.textColor, font: { - weight: components.hpe.select.option.selected.enabled.fontWeight, + weight: components.hpe.select.option.selected.rest.fontWeight, }, }, }, @@ -1105,9 +1120,9 @@ const buildTheme = tokens => { };`} `, // Q: missing token for hover borderWidth? this falls into similar boat as secondary button }, - color: components.hpe.switch.control.handle.enabled.background, + color: components.hpe.switch.control.handle.rest.background, border: { - color: components.hpe.checkbox.control.enabled.borderColor, + color: components.hpe.checkbox.control.rest.borderColor, width: dimensions.borderSize[ components.hpe.checkbox.medium.control.borderWidth @@ -1124,13 +1139,13 @@ const buildTheme = tokens => { }px; background: ${ theme.global.colors[ - components.hpe.checkbox.control.enabled.background + components.hpe.checkbox.control.rest.background ]?.[theme.dark ? 'dark' : 'light'] }; background-color: ${ checked || indeterminate ? theme.global.colors[ - components.hpe.checkbox.control.selected.enabled.background + components.hpe.checkbox.control.selected.rest.background ]?.[theme.dark ? 'dark' : 'light'] : '' }; @@ -1152,7 +1167,7 @@ const buildTheme = tokens => { extend: ({ theme }) => `stroke-width: 2px; stroke: ${ theme.global.colors[ - components.hpe.checkbox.control.selected.enabled.iconColor + components.hpe.checkbox.control.selected.rest.iconColor ]?.[theme.dark ? 'dark' : 'light'] }`, }, @@ -1171,8 +1186,8 @@ const buildTheme = tokens => { // Q is toggle and switch the same thing? // A: Yes, we can discuss if this name feels right or not. toggle: { - background: components.hpe.switch.control.track.enabled.background, - color: components.hpe.switch.control.handle.enabled.background, + background: components.hpe.switch.control.track.rest.background, + color: components.hpe.switch.control.handle.rest.background, size: components.hpe.switch.medium.control.track.width, // TO DO need token for handle elevation knob: { @@ -1186,7 +1201,7 @@ const buildTheme = tokens => { ] } solid ${ theme.global.colors[ - components.hpe.switch.control.handle.enabled.borderColor + components.hpe.switch.control.handle.rest.borderColor ][theme.dark ? 'dark' : 'light'] }; width: ${components.hpe.switch.medium.control.handle.width}; @@ -1198,7 +1213,7 @@ const buildTheme = tokens => { checked && `background-color: ${ theme.global.colors[ - components.hpe.switch.control.track.selected.enabled.background + components.hpe.switch.control.track.selected.rest.background ]?.[theme.dark ? 'dark' : 'light'] };` } @@ -1209,7 +1224,7 @@ const buildTheme = tokens => { }px; border-color: ${ theme.global.colors[ - components.hpe.switch.control.track.enabled.borderColor + components.hpe.switch.control.track.rest.borderColor ]?.[theme.dark ? 'dark' : 'light'] }; `, @@ -1261,7 +1276,7 @@ const buildTheme = tokens => { padding: 0px ${theme.global.edgeSize.xxsmall}; `, selected: { - background: components.hpe.dataCell.selected?.enabled?.background, + background: components.hpe.dataCell.selected?.rest?.background, }, }, groupHeader: { @@ -1274,7 +1289,7 @@ const buildTheme = tokens => { }, header: { border: { side: 'bottom' }, - color: components.hpe.headerCell.enabled.textColor, + color: components.hpe.headerCell.rest.textColor, extend: ({ column, sort, sortable, theme }) => ` ${ @@ -1314,7 +1329,7 @@ const buildTheme = tokens => { }, }, units: { - color: components.hpe.headerCell.units.enabled.textColor, // Q: missing token + color: components.hpe.headerCell.units.rest.textColor, // Q: missing token }, }, icons: { @@ -1340,7 +1355,7 @@ const buildTheme = tokens => { }, primary: { weight: components.hpe.dataCell.primary.fontWeight, - color: components.hpe.dataCell.primary.enabled.textColor, + color: components.hpe.dataCell.primary.rest.textColor, }, resize: { // Q: missing tokens @@ -1365,7 +1380,7 @@ const buildTheme = tokens => { size: components.hpe.formField.medium.input.container.borderWidth, }, button: { - background: components.hpe.button.default.enabled.background, + background: components.hpe.button.default.rest.background, border: { // Q: is this the correct value? // A: yes @@ -1381,9 +1396,9 @@ const buildTheme = tokens => { ? components.hpe.button.medium.default.paddingX : components.hpe.button.default.medium.paddingX, }, - color: components.hpe.button.default.enabled.textColor, + color: components.hpe.button.default.rest.textColor, font: { - weight: components.hpe.button.default.enabled.fontWeight, + weight: components.hpe.button.default.rest.fontWeight, }, hover: { background: components.hpe.button.default.hover.background, @@ -1452,7 +1467,7 @@ const buildTheme = tokens => { }, icon: , // TO DO need to handle modes size: 'xsmall', // Q: missing token - // Q: confused why we have both hpe.formField.errorText.enabled.textColor + // Q: confused why we have both hpe.formField.errorText.rest.textColor // and hpe.formField.errorText.disabled.color // A: This is to be able to style text differently in different states color: @@ -1765,7 +1780,7 @@ const buildTheme = tokens => { }, }, icons: { - color: components.hpe.menu.item.enabled.iconColor, + color: components.hpe.menu.item.rest.iconColor, down: Down, }, item: { @@ -2039,25 +2054,25 @@ const buildTheme = tokens => { }, pagination: { button: { - color: components.hpe.button.default.enabled.textColor, + color: components.hpe.button.default.rest.textColor, border: { radius: oldTheme ? components.hpe.button.medium.default.borderRadius : components.hpe.button.default.medium.borderRadius, }, font: { - weight: components.hpe.button.default.enabled.fontWeight, + weight: components.hpe.button.default.rest.fontWeight, }, active: { - background: components.hpe.button.default.selected.enabled.background, + background: components.hpe.button.default.selected.rest.background, border: { radius: oldTheme ? components.hpe.button.medium.default.borderRadius : components.hpe.button.default.medium.borderRadius, }, - color: components.hpe.button.default.selected.enabled.textColor, + color: components.hpe.button.default.selected.rest.textColor, font: { - weight: components.hpe.button.default.selected.enabled.fontWeight, + weight: components.hpe.button.default.selected.rest.fontWeight, }, }, hover: { @@ -2073,15 +2088,15 @@ const buildTheme = tokens => { }, }, disabled: { - background: components.hpe.button.default.disabled.background, + background: components.hpe.button.default.disabled.rest.background, border: { radius: oldTheme ? components.hpe.button.medium.default.borderRadius : components.hpe.button.default.medium.borderRadius, }, - color: components.hpe.button.default.disabled.textColor, + color: components.hpe.button.default.disabled.rest.textColor, font: { - weight: components.hpe.button.default.disabled.fontWeight, + weight: components.hpe.button.default.disabled.rest.fontWeight, }, }, size: { @@ -2180,10 +2195,10 @@ const buildTheme = tokens => { }, radioButton: { border: { - color: components.hpe.radioButton.control.enabled.borderColor, + color: components.hpe.radioButton.control.rest.borderColor, width: components.hpe.radioButton.medium.control.borderWidth, // TO DO want this narrower when not checked }, - color: components.hpe.radioButton.control.selected.enabled.borderColor, + color: components.hpe.radioButton.control.selected.rest.borderColor, container: { extend: () => ` width: auto; @@ -2209,9 +2224,7 @@ const buildTheme = tokens => { icons: { circle: () => ( @@ -2374,7 +2387,7 @@ const buildTheme = tokens => { }, border: { side: 'bottom', // TO DO this causes issues on the last row with the footer border - color: components.hpe.dataCell.enabled.borderColor, + color: components.hpe.dataCell.rest.borderColor, }, extend: ({ theme }) => ` @@ -2549,7 +2562,7 @@ const buildTheme = tokens => { }, container: { border: { - color: components.hpe.button.toolbar.enabled.borderColor, + color: components.hpe.button.toolbar.rest.borderColor, size: oldTheme ? components.hpe.button.medium.toolbar.borderWidth : components.hpe.button.toolbar.medium.borderWidth, @@ -2585,31 +2598,31 @@ export const warm = buildTheme({ components: localComponents, }); -export const old = buildTheme({ - light: oldLight, - dark: oldDark, - small: oldSmall, - large: oldLarge, - elevationlight: oldElevationLight, - elevationdark: oldElevationDark, - global: oldGlobal, - components: oldComponents, -}); +// export const old = buildTheme({ +// light: oldLight, +// dark: oldDark, +// small: oldSmall, +// large: oldLarge, +// elevationlight: oldElevationLight, +// elevationdark: oldElevationDark, +// global: oldGlobal, +// components: oldComponents, +// }); -export const refresh = buildTheme({ - light: refreshLight, - dark: refreshDark, - small: refreshSmall, - large: refreshLarge, - elevationlight: refreshElevationLight, - elevationdark: refreshElevationDark, - global: refreshGlobal, - components: refreshComponents, - refresh: true, -}); +// export const refresh = buildTheme({ +// light: refreshLight, +// dark: refreshDark, +// small: refreshSmall, +// large: refreshLarge, +// elevationlight: refreshElevationLight, +// elevationdark: refreshElevationDark, +// global: refreshGlobal, +// components: refreshComponents, +// refresh: true, +// }); export const themes = { local: current, - v3: old, - refresh, + // v3: old, + // refresh, }; From 6a8d25d4253823be2d6162197c5d739b99538a4e Mon Sep 17 00:00:00 2001 From: taysea Date: Sat, 14 Dec 2024 16:02:47 +0000 Subject: [PATCH 4/9] Update tokens from Figma --- yarn.lock | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/yarn.lock b/yarn.lock index 44b279b90..78d7b6e60 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7800,12 +7800,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#71bd354fe44dfd6544cb8b67af22f06067d93f78" From 9d7110fa619a40148968649f28594615b406342b Mon Sep 17 00:00:00 2001 From: taysea Date: Mon, 16 Dec 2024 10:21:24 -0800 Subject: [PATCH 5/9] Pull latest --- .../tokens/component/component.default.json | 632 ++++++++---------- 1 file changed, 292 insertions(+), 340 deletions(-) diff --git a/design-tokens/tokens/component/component.default.json b/design-tokens/tokens/component/component.default.json index 97e8787db..dceb681fd 100644 --- a/design-tokens/tokens/component/component.default.json +++ b/design-tokens/tokens/component/component.default.json @@ -8676,10 +8676,10 @@ "input": { "group": { "container": { - "enabled": { + "rest": { "background": { "$type": "color", - "$value": "{formField.input.container.enabled.background}", + "$value": "{formField.input.container.rest.background}", "$description": "", "$extensions": { "com.figma": { @@ -8691,7 +8691,7 @@ }, "borderColor": { "$type": "color", - "$value": "{formField.input.container.enabled.borderColor}", + "$value": "{formField.input.container.rest.borderColor}", "$description": "", "$extensions": { "com.figma": { @@ -8705,7 +8705,7 @@ "hover": { "background": { "$type": "color", - "$value": "{formField.input.group.container.enabled.background}", + "$value": "{formField.input.group.container.rest.background}", "$description": "", "$extensions": { "com.figma": { @@ -8717,7 +8717,7 @@ }, "borderColor": { "$type": "color", - "$value": "{formField.input.group.container.enabled.borderColor}", + "$value": "{formField.input.group.container.rest.borderColor}", "$description": "", "$extensions": { "com.figma": { @@ -8728,91 +8728,67 @@ } } }, - "readOnly": { - "background": { - "$type": "color", - "$value": "{formField.input.container.readOnly.background}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} + "error": { + "rest": { + "background": { + "$type": "color", + "$value": "{color.background.critical}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } } - } - }, - "borderColor": { - "$type": "color", - "$value": "{formField.input.container.readOnly.borderColor}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], - "codeSyntax": {} + }, + "borderColor": { + "$type": "color", + "$value": "{color.transparent}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } } } } }, "disabled": { - "background": { - "$type": "color", - "$value": "{color.background.default}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - }, - "borderColor": { - "$type": "color", - "$value": "{color.border.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], - "codeSyntax": {} - } - } - } - } - }, - "item": { - "enabled": { - "background": { - "$type": "color", - "$value": "{color.transparent}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} + "rest": { + "background": { + "$type": "color", + "$value": "{color.background.default}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } } - } - }, - "borderColor": { - "$type": "color", - "$value": "{color.transparent}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], - "codeSyntax": {} + }, + "borderColor": { + "$type": "color", + "$value": "{color.border.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } } } } }, - "status": { - "critical": { + "readOnly": { + "rest": { "background": { "$type": "color", - "$value": "{color.background.critical}", + "$value": "{formField.input.container.readOnly.rest.background}", "$description": "", "$extensions": { "com.figma": { @@ -8824,7 +8800,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.transparent}", + "$value": "{formField.input.container.readOnly.rest.borderColor}", "$description": "", "$extensions": { "com.figma": { @@ -8835,11 +8811,13 @@ } } } - }, - "hover": { + } + }, + "item": { + "rest": { "background": { "$type": "color", - "$value": "{color.background.hover}", + "$value": "{color.transparent}", "$description": "", "$extensions": { "com.figma": { @@ -8862,7 +8840,7 @@ } } }, - "focus": { + "hover": { "background": { "$type": "color", "$value": "{color.background.hover}", @@ -8888,10 +8866,10 @@ } } }, - "readOnly": { + "focus": { "background": { "$type": "color", - "$value": "{color.transparent}", + "$value": "{color.background.hover}", "$description": "", "$extensions": { "com.figma": { @@ -8915,27 +8893,57 @@ } }, "disabled": { - "background": { - "$type": "color", - "$value": "{color.transparent}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} + "rest": { + "background": { + "$type": "color", + "$value": "{color.transparent}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "borderColor": { + "$type": "color", + "$value": "{color.transparent}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } } } - }, - "borderColor": { - "$type": "color", - "$value": "{color.transparent}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], - "codeSyntax": {} + } + }, + "readOnly": { + "rest": { + "background": { + "$type": "color", + "$value": "{color.transparent}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "borderColor": { + "$type": "color", + "$value": "{color.transparent}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } } } } @@ -8943,7 +8951,7 @@ } }, "container": { - "enabled": { + "rest": { "background": { "$type": "color", "$value": "{color.transparent}", @@ -9021,63 +9029,67 @@ } } }, - "readOnly": { - "background": { - "$type": "color", - "$value": "{color.background.back}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} + "error": { + "rest": { + "background": { + "$type": "color", + "$value": "{color.background.critical}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } } - } - }, - "borderColor": { - "$type": "color", - "$value": "{color.border.weak}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], - "codeSyntax": {} + }, + "borderColor": { + "$type": "color", + "$value": "{color.border.strong}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } } } } }, "disabled": { - "background": { - "$type": "color", - "$value": "{color.background.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} + "rest": { + "background": { + "$type": "color", + "$value": "{color.background.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } } - } - }, - "borderColor": { - "$type": "color", - "$value": "{color.border.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], - "codeSyntax": {} + }, + "borderColor": { + "$type": "color", + "$value": "{color.border.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } } } } }, - "status": { - "critical": { + "readOnly": { + "rest": { "background": { "$type": "color", - "$value": "{color.background.critical}", + "$value": "{color.background.back}", "$description": "", "$extensions": { "com.figma": { @@ -9089,7 +9101,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.strong}", + "$value": "{color.border.weak}", "$description": "", "$extensions": { "com.figma": { @@ -9104,7 +9116,7 @@ } }, "label": { - "enabled": { + "rest": { "textColor": { "$type": "color", "$value": "{color.text.strong}", @@ -9146,36 +9158,40 @@ } } }, - "disabled": { - "textColor": { - "$type": "color", - "$value": "{color.text.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} + "error": { + "rest": { + "textColor": { + "$type": "color", + "$value": "{color.text.strong}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } } } } }, - "readOnly": { - "textColor": { - "$type": "color", - "$value": "{color.text.strong}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} + "disabled": { + "rest": { + "textColor": { + "$type": "color", + "$value": "{color.text.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } } } } }, - "status": { - "critical": { + "readOnly": { + "rest": { "textColor": { "$type": "color", "$value": "{color.text.strong}", @@ -9203,20 +9219,22 @@ "codeSyntax": {} } }, - "textColor": { - "$type": "color", - "$value": "{color.text.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} + "rest": { + "textColor": { + "$type": "color", + "$value": "{color.text.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } } } } }, - "enabled": { + "rest": { "textColor": { "$type": "color", "$value": "{color.text.weak}", @@ -9258,22 +9276,24 @@ } } }, - "readOnly": { - "textColor": { - "$type": "color", - "$value": "{color.text.weak}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} + "error": { + "rest": { + "textColor": { + "$type": "color", + "$value": "{color.text.weak}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } } } } }, - "status": { - "critical": { + "readOnly": { + "rest": { "textColor": { "$type": "color", "$value": "{color.text.weak}", @@ -9290,7 +9310,7 @@ } }, "help": { - "enabled": { + "rest": { "textColor": { "$type": "color", "$value": "{color.text.default}", @@ -9332,36 +9352,40 @@ } } }, - "disabled": { - "color": { - "$type": "color", - "$value": "{color.text.default}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} + "error": { + "rest": { + "textColor": { + "$type": "color", + "$value": "{color.text.default}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } } } } }, - "readOnly": { - "textColor": { - "$type": "color", - "$value": "{color.text.default}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} + "disabled": { + "rest": { + "color": { + "$type": "color", + "$value": "{color.text.default}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } } } } }, - "status": { - "critical": { + "readOnly": { + "rest": { "textColor": { "$type": "color", "$value": "{color.text.default}", @@ -9378,7 +9402,7 @@ } }, "info": { - "enabled": { + "rest": { "textColor": { "$type": "color", "$value": "{color.text.default}", @@ -9420,36 +9444,40 @@ } } }, - "disabled": { - "textColor": { - "$type": "color", - "$value": "{color.text.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} + "error": { + "rest": { + "textColor": { + "$type": "color", + "$value": "{color.text.default}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } } } } }, - "readOnly": { - "textColor": { - "$type": "color", - "$value": "{color.text.default}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} + "disabled": { + "rest": { + "textColor": { + "$type": "color", + "$value": "{color.text.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } } } } }, - "status": { - "critical": { + "readOnly": { + "rest": { "textColor": { "$type": "color", "$value": "{color.text.default}", @@ -9466,7 +9494,7 @@ } }, "error": { - "enabled": { + "rest": { "textColor": { "$type": "color", "$value": "{color.text.critical}", @@ -9543,20 +9571,10 @@ } } } - }, - "disabled": { - "iconColor": { - "$type": "color", - "$value": "{color.icon.default}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["ALL_FILLS", "STROKE_COLOR"], - "codeSyntax": {} - } - } - }, + } + }, + "value": { + "rest": { "textColor": { "$type": "color", "$value": "{color.text.default}", @@ -9570,19 +9588,21 @@ } } }, - "readOnly": { - "iconColor": { + "hover": { + "textColor": { "$type": "color", - "$value": "{color.icon.default}", + "$value": "{color.text.default}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["ALL_FILLS", "STROKE_COLOR"], + "scopes": ["TEXT_FILL"], "codeSyntax": {} } } - }, + } + }, + "focus": { "textColor": { "$type": "color", "$value": "{color.text.default}", @@ -9596,23 +9616,27 @@ } } }, - "status": { - "critical": { - "iconColor": { + "error": { + "rest": { + "textColor": { "$type": "color", - "$value": "{color.icon.default}", + "$value": "{color.text.default}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["ALL_FILLS", "STROKE_COLOR"], + "scopes": ["TEXT_FILL"], "codeSyntax": {} } } - }, + } + } + }, + "disabled": { + "rest": { "textColor": { "$type": "color", - "$value": "{color.text.default}", + "$value": "{color.text.disabled}", "$description": "", "$extensions": { "com.figma": { @@ -9623,81 +9647,9 @@ } } } - } - }, - "value": { - "enabled": { - "textColor": { - "$type": "color", - "$value": "{color.text.default}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} - } - } - } - }, - "hover": { - "textColor": { - "$type": "color", - "$value": "{color.text.default}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} - } - } - } - }, - "focus": { - "textColor": { - "$type": "color", - "$value": "{color.text.default}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} - } - } - } - }, - "disabled": { - "textColor": { - "$type": "color", - "$value": "{color.text.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} - } - } - } }, "readOnly": { - "textColor": { - "$type": "color", - "$value": "{color.text.default}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} - } - } - } - }, - "status": { - "critical": { + "rest": { "textColor": { "$type": "color", "$value": "{color.text.default}", From c84d4351fd93ec68ffacda397db6313dc87df846 Mon Sep 17 00:00:00 2001 From: taysea Date: Mon, 16 Dec 2024 10:26:04 -0800 Subject: [PATCH 6/9] Update theme based on changes --- sandbox/grommet-app/src/theme.jsx | 36 ++-- yarn.lock | 283 +++++++++++++++--------------- 2 files changed, 159 insertions(+), 160 deletions(-) diff --git a/sandbox/grommet-app/src/theme.jsx b/sandbox/grommet-app/src/theme.jsx index 5c1d02c97..5cf7852c5 100644 --- a/sandbox/grommet-app/src/theme.jsx +++ b/sandbox/grommet-app/src/theme.jsx @@ -695,7 +695,7 @@ const buildTheme = tokens => { control: { border: { radius: components.hpe.formField.medium.input.container.borderRadius, - color: components.hpe.formField.input.container.enabled.borderColor, + color: components.hpe.formField.input.container.rest.borderColor, }, }, input: { @@ -711,10 +711,11 @@ const buildTheme = tokens => { }, readOnly: { background: - components.hpe.formField.input.container.readOnly.background, + components.hpe.formField.input.container.readOnly.rest.background, border: { color: - components.hpe.formField.input.container.readOnly.borderColor, + components.hpe.formField.input.container.readOnly.rest + .borderColor, }, }, extend: ` @@ -1374,7 +1375,7 @@ const buildTheme = tokens => { fileInput: { border: { // Q: confused on which token to use here formfield.medium.input.group.item.borderWidth? - color: components.hpe.formField.input.container.enabled.borderColor, + color: components.hpe.formField.input.container.rest.borderColor, side: 'all', style: 'dashed', size: components.hpe.formField.medium.input.container.borderWidth, @@ -1436,10 +1437,9 @@ const buildTheme = tokens => { border: { error: { color: - components.hpe.formField.input.container.status.critical - .borderColor, + components.hpe.formField.input.container.error.rest.borderColor, }, - color: components.hpe.formField.input.container.enabled.borderColor, + color: components.hpe.formField.input.container.rest.borderColor, side: 'all', }, // checkBox: { @@ -1447,20 +1447,21 @@ const buildTheme = tokens => { // }, disabled: { background: - components.hpe.formField.input.group.container.disabled.background, + components.hpe.formField.input.group.container.disabled.rest + .background, border: { - color: components.hpe.formField.input.container.disabled.borderColor, + color: + components.hpe.formField.input.container.disabled.rest.borderColor, }, label: { color: - components.hpe.formField[!sd4 ? 'labelText' : 'label'].disabled + components.hpe.formField[!sd4 ? 'labelText' : 'label'].disabled.rest .textColor, }, }, error: { background: { - color: - components.hpe.formField.input.container.status.critical.background, + color: components.hpe.formField.input.container.error.rest.background, }, container: { gap: 'xsmall', // Q: missing token @@ -1471,8 +1472,7 @@ const buildTheme = tokens => { // and hpe.formField.errorText.disabled.color // A: This is to be able to style text differently in different states color: - components.hpe.formField[!sd4 ? 'errorText' : 'error'].enabled - .textColor, + components.hpe.formField[!sd4 ? 'errorText' : 'error'].rest.textColor, margin: { // Q: missing token bottom: 'xsmall', @@ -1488,14 +1488,12 @@ const buildTheme = tokens => { }, help: { size: 'xsmall', - color: - components.hpe.formField[!sd4 ? 'helpText' : 'help'].enabled.color, + color: components.hpe.formField[!sd4 ? 'helpText' : 'help'].rest.color, margin: 'none', // TO DO missing token }, info: { size: 'xsmall', - color: - components.hpe.formField[!sd4 ? 'infoText' : 'info'].enabled.color, + color: components.hpe.formField[!sd4 ? 'infoText' : 'info'].rest.color, margin: { // Q: missing token bottom: 'xsmall', @@ -1506,7 +1504,7 @@ const buildTheme = tokens => { label: { size: 'xsmall', // TO DO how to capture this as token, currently we have "fontSize", "lineHeight", "..." color: - components.hpe.formField[!sd4 ? 'labelText' : 'label'].enabled.color, + components.hpe.formField[!sd4 ? 'labelText' : 'label'].rest.color, margin: { // Q: missing token bottom: 'none', diff --git a/yarn.lock b/yarn.lock index 78d7b6e60..2291fe66c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3902,9 +3902,9 @@ integrity sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q== "@types/react@^18.2.56", "@types/react@^18.2.66": - version "18.3.16" - resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.16.tgz#5326789125fac98b718d586ad157442ceb44ff28" - integrity sha512-oh8AMIC4Y2ciKufU8hnKgs+ufgbA/dhPTACaZPM86AbwX9QwnFtSoPWEeRUj8fge+v6kFt78BXcDhAU1SrrAsw== + version "18.3.17" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.17.tgz#d86ca0e081c7a5e979b7db175f9515a41038cea7" + integrity sha512-opAQ5no6LqJNo9TqnxBKsgnkIYHozW9KSTlFVoSUJYh1Fl/sswkEoqIugRSm7tbh6pABtYjGAjW+GOS23j8qbw== dependencies: "@types/prop-types" "*" csstype "^3.0.2" @@ -4616,24 +4616,24 @@ array.prototype.findlastindex@^1.2.5: es-shim-unscopables "^1.0.2" array.prototype.flat@^1.3.1, array.prototype.flat@^1.3.2: - version "1.3.2" - resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz#1476217df8cff17d72ee8f3ba06738db5b387d18" - integrity sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA== + version "1.3.3" + resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz#534aaf9e6e8dd79fb6b9a9917f839ef1ec63afe5" + integrity sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg== dependencies: - call-bind "^1.0.2" - define-properties "^1.2.0" - es-abstract "^1.22.1" - es-shim-unscopables "^1.0.0" + call-bind "^1.0.8" + define-properties "^1.2.1" + es-abstract "^1.23.5" + es-shim-unscopables "^1.0.2" array.prototype.flatmap@^1.3.2: - version "1.3.2" - resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz#c9a7c6831db8e719d6ce639190146c24bbd3e527" - integrity sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ== + version "1.3.3" + resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz#712cc792ae70370ae40586264629e33aab5dd38b" + integrity sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg== dependencies: - call-bind "^1.0.2" - define-properties "^1.2.0" - es-abstract "^1.22.1" - es-shim-unscopables "^1.0.0" + call-bind "^1.0.8" + define-properties "^1.2.1" + es-abstract "^1.23.5" + es-shim-unscopables "^1.0.2" array.prototype.reduce@^1.0.6: version "1.0.7" @@ -4659,19 +4659,18 @@ array.prototype.tosorted@^1.1.4: es-errors "^1.3.0" es-shim-unscopables "^1.0.2" -arraybuffer.prototype.slice@^1.0.3: - version "1.0.3" - resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz#097972f4255e41bc3425e37dc3f6421cf9aefde6" - integrity sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A== +arraybuffer.prototype.slice@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz#9d760d84dbdd06d0cbf92c8849615a1a7ab3183c" + integrity sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ== dependencies: array-buffer-byte-length "^1.0.1" - call-bind "^1.0.5" + call-bind "^1.0.8" define-properties "^1.2.1" - es-abstract "^1.22.3" - es-errors "^1.2.1" - get-intrinsic "^1.2.3" + es-abstract "^1.23.5" + es-errors "^1.3.0" + get-intrinsic "^1.2.6" is-array-buffer "^3.0.4" - is-shared-array-buffer "^1.0.2" assert@^2.0.0: version "2.1.0" @@ -5155,13 +5154,13 @@ call-bind@^1.0.0, call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bin get-intrinsic "^1.2.4" set-function-length "^1.2.2" -call-bound@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/call-bound/-/call-bound-1.0.2.tgz#9dbd4daf9f5f753bec3e4c8fbb8a2ecc4de6c39b" - integrity sha512-0lk0PHFe/uz0vl527fG9CgdE9WdafjDbCXvBbs+LUv000TVt2Jjhqbs4Jwm8gz070w8xXyEAxrPOMullsxXeGg== +call-bound@^1.0.2, call-bound@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/call-bound/-/call-bound-1.0.3.tgz#41cfd032b593e39176a71533ab4f384aa04fd681" + integrity sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA== dependencies: - call-bind "^1.0.8" - get-intrinsic "^1.2.5" + call-bind-apply-helpers "^1.0.1" + get-intrinsic "^1.2.6" callsite@^1.0.0: version "1.0.0" @@ -5210,9 +5209,9 @@ camelize@^1.0.0: integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ== caniuse-lite@^1.0.30001579, caniuse-lite@^1.0.30001646, caniuse-lite@^1.0.30001688: - version "1.0.30001688" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001688.tgz#f9d3ede749f083ce0db4c13db9d828adaf2e8d0a" - integrity sha512-Nmqpru91cuABu/DTCXbM2NSRHzM2uVHfPnhJ/1zEAJx/ILBRVmz3pzH4N7DZqbdG0gWClsCC05Oj0mJ/1AWMbA== + version "1.0.30001689" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001689.tgz#67ca960dd5f443903e19949aeacc9d28f6e10910" + integrity sha512-CmeR2VBycfa+5/jOfnp/NpWPGd06nf1XYiefUvhXFfZE4GkRc9jv+eGPS4nT558WS/8lYCzV8SlANCIPvbWP1g== case-sensitive-paths-webpack-plugin@^2.4.0: version "2.4.0" @@ -5987,7 +5986,7 @@ define-lazy-prop@^2.0.0: resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f" integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og== -define-properties@^1.1.3, define-properties@^1.2.0, define-properties@^1.2.1: +define-properties@^1.1.3, define-properties@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c" integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg== @@ -6411,57 +6410,59 @@ error-stack-parser@^2.1.4: dependencies: stackframe "^1.3.4" -es-abstract@^1.17.5, es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23.2, es-abstract@^1.23.3, es-abstract@^1.23.5: - version "1.23.5" - resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.5.tgz#f4599a4946d57ed467515ed10e4f157289cd52fb" - integrity sha512-vlmniQ0WNPwXqA0BnmwV3Ng7HxiGlh6r5U6JcTMNx8OilcAGqVJBHJcPjqOMaczU9fRuRK5Px2BdVyPRnKMMVQ== +es-abstract@^1.17.5, es-abstract@^1.23.2, es-abstract@^1.23.3, es-abstract@^1.23.5: + version "1.23.6" + resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.6.tgz#55f0e1ce7128995cc04ace0a57d7dca348345108" + integrity sha512-Ifco6n3yj2tMZDWNLyloZrytt9lqqlwvS83P3HtaETR0NUOYnIULGGHpktqYGObGy+8wc1okO25p8TjemhImvA== dependencies: array-buffer-byte-length "^1.0.1" - arraybuffer.prototype.slice "^1.0.3" + arraybuffer.prototype.slice "^1.0.4" available-typed-arrays "^1.0.7" - call-bind "^1.0.7" + call-bind "^1.0.8" + call-bound "^1.0.3" data-view-buffer "^1.0.1" data-view-byte-length "^1.0.1" data-view-byte-offset "^1.0.0" - es-define-property "^1.0.0" + es-define-property "^1.0.1" es-errors "^1.3.0" es-object-atoms "^1.0.0" es-set-tostringtag "^2.0.3" - es-to-primitive "^1.2.1" - function.prototype.name "^1.1.6" - get-intrinsic "^1.2.4" + es-to-primitive "^1.3.0" + function.prototype.name "^1.1.7" + get-intrinsic "^1.2.6" get-symbol-description "^1.0.2" globalthis "^1.0.4" - gopd "^1.0.1" + gopd "^1.2.0" has-property-descriptors "^1.0.2" - has-proto "^1.0.3" - has-symbols "^1.0.3" + has-proto "^1.2.0" + has-symbols "^1.1.0" hasown "^2.0.2" - internal-slot "^1.0.7" + internal-slot "^1.1.0" is-array-buffer "^3.0.4" is-callable "^1.2.7" - is-data-view "^1.0.1" + is-data-view "^1.0.2" is-negative-zero "^2.0.3" - is-regex "^1.1.4" + is-regex "^1.2.1" is-shared-array-buffer "^1.0.3" - is-string "^1.0.7" + is-string "^1.1.1" is-typed-array "^1.1.13" - is-weakref "^1.0.2" + is-weakref "^1.1.0" + math-intrinsics "^1.0.0" object-inspect "^1.13.3" object-keys "^1.1.1" object.assign "^4.1.5" regexp.prototype.flags "^1.5.3" - safe-array-concat "^1.1.2" - safe-regex-test "^1.0.3" - string.prototype.trim "^1.2.9" - string.prototype.trimend "^1.0.8" + safe-array-concat "^1.1.3" + safe-regex-test "^1.1.0" + string.prototype.trim "^1.2.10" + string.prototype.trimend "^1.0.9" string.prototype.trimstart "^1.0.8" typed-array-buffer "^1.0.2" typed-array-byte-length "^1.0.1" - typed-array-byte-offset "^1.0.2" - typed-array-length "^1.0.6" + typed-array-byte-offset "^1.0.3" + typed-array-length "^1.0.7" unbox-primitive "^1.0.2" - which-typed-array "^1.1.15" + which-typed-array "^1.1.16" es-array-method-boxes-properly@^1.0.0: version "1.0.0" @@ -6473,7 +6474,7 @@ es-define-property@^1.0.0, es-define-property@^1.0.1: resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.1.tgz#983eb2f9a6724e9303f61addf011c72e09e0b0fa" integrity sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g== -es-errors@^1.2.1, es-errors@^1.3.0: +es-errors@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f" integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw== @@ -6535,14 +6536,14 @@ es-set-tostringtag@^2.0.3: has-tostringtag "^1.0.2" hasown "^2.0.1" -es-shim-unscopables@^1.0.0, es-shim-unscopables@^1.0.2: +es-shim-unscopables@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz#1f6942e71ecc7835ed1c8a83006d8771a63a3763" integrity sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw== dependencies: hasown "^2.0.0" -es-to-primitive@^1.2.1: +es-to-primitive@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.3.0.tgz#96c89c82cc49fd8794a24835ba3e1ff87f214e18" integrity sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g== @@ -7549,15 +7550,16 @@ function-bind@^1.1.2: resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c" integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA== -function.prototype.name@^1.1.6: - version "1.1.6" - resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.6.tgz#cdf315b7d90ee77a4c6ee216c3c3362da07533fd" - integrity sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg== +function.prototype.name@^1.1.6, function.prototype.name@^1.1.7: + version "1.1.7" + resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.7.tgz#9df48ea5f746bf577d7e15b5da89df8952a98e7b" + integrity sha512-2g4x+HqTJKM9zcJqBSpjoRmdcPFtJM60J3xJisTQSXBWka5XqyBN/2tNUgma1mztTXyDuUsEtYe5qcs7xYzYQA== dependencies: - call-bind "^1.0.2" - define-properties "^1.2.0" - es-abstract "^1.22.1" + call-bind "^1.0.8" + define-properties "^1.2.1" functions-have-names "^1.2.3" + hasown "^2.0.2" + is-callable "^1.2.7" functions-have-names@^1.2.3: version "1.2.3" @@ -7579,7 +7581,7 @@ get-func-name@^2.0.0, get-func-name@^2.0.2: resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.2.tgz#0d7cf20cd13fda808669ffa88f4ffc7a3943fc41" integrity sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ== -get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4, get-intrinsic@^1.2.5, get-intrinsic@^1.2.6: +get-intrinsic@^1.1.3, get-intrinsic@^1.2.2, get-intrinsic@^1.2.4, get-intrinsic@^1.2.5, get-intrinsic@^1.2.6: version "1.2.6" resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.6.tgz#43dd3dd0e7b49b82b2dfcad10dc824bf7fc265d5" integrity sha512-qxsEs+9A+u85HhllWJJFicJfPDhRmjzoYdl64aMWW9yRIJmSyxdn8IEkuIM530/7T+lv0TIHd8L6Q/ra0tEoeA== @@ -7800,7 +7802,12 @@ graphlib@^2.1.5: dependencies: lodash "^4.17.15" -grommet-icons@^4.12.1, "grommet-icons@https://github.com/grommet/grommet-icons/tarball/stable": +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": version "4.12.1" resolved "https://github.com/grommet/grommet-icons/tarball/stable#71bd354fe44dfd6544cb8b67af22f06067d93f78" @@ -7851,7 +7858,7 @@ has-property-descriptors@^1.0.0, has-property-descriptors@^1.0.2: dependencies: es-define-property "^1.0.0" -has-proto@^1.0.3: +has-proto@^1.0.3, has-proto@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.2.0.tgz#5de5a6eabd95fdffd9818b43055e8065e39fe9d5" integrity sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ== @@ -8325,7 +8332,7 @@ inline-style-parser@0.2.4: resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.2.4.tgz#f4af5fe72e612839fcd453d989a586566d695f22" integrity sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q== -internal-slot@^1.0.4, internal-slot@^1.0.7: +internal-slot@^1.0.7, internal-slot@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.1.0.tgz#1eac91762947d2f7056bc838d93e13b2e9604961" integrity sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw== @@ -8339,13 +8346,6 @@ interpret@^3.1.1: resolved "https://registry.yarnpkg.com/interpret/-/interpret-3.1.1.tgz#5be0ceed67ca79c6c4bc5cf0d7ee843dcea110c4" integrity sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ== -invariant@^2.2.4: - version "2.2.4" - resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" - integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== - dependencies: - loose-envify "^1.0.0" - ip-address@^9.0.5: version "9.0.5" resolved "https://registry.yarnpkg.com/ip-address/-/ip-address-9.0.5.tgz#117a960819b08780c3bd1f14ef3c1cc1d3f3ea5a" @@ -8404,12 +8404,13 @@ is-arguments@^1.0.4, is-arguments@^1.1.1: has-tostringtag "^1.0.2" is-array-buffer@^3.0.2, is-array-buffer@^3.0.4: - version "3.0.4" - resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.4.tgz#7a1f92b3d61edd2bc65d24f130530ea93d7fae98" - integrity sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw== + version "3.0.5" + resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.5.tgz#65742e1e687bd2cc666253068fd8707fe4d44280" + integrity sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A== dependencies: - call-bind "^1.0.2" - get-intrinsic "^1.2.1" + call-bind "^1.0.8" + call-bound "^1.0.3" + get-intrinsic "^1.2.6" is-arrayish@^0.2.1: version "0.2.1" @@ -8437,7 +8438,7 @@ is-binary-path@~2.1.0: dependencies: binary-extensions "^2.0.0" -is-boolean-object@^1.2.0: +is-boolean-object@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.2.1.tgz#c20d0c654be05da4fbc23c562635c019e93daf89" integrity sha512-l9qO6eFlUETHtuihLcYOaLKByJ1f+N4kthcU9YjHy3N+B3hWv0y/2Nd0mu/7lTFnRQHTrSdXF50HQ3bl5fEnng== @@ -8464,7 +8465,7 @@ is-core-module@^2.13.0, is-core-module@^2.15.1, is-core-module@^2.16.0: dependencies: hasown "^2.0.2" -is-data-view@^1.0.1: +is-data-view@^1.0.1, is-data-view@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/is-data-view/-/is-data-view-1.0.2.tgz#bae0a41b9688986c2188dda6657e56b8f9e63b8e" integrity sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw== @@ -8589,12 +8590,12 @@ is-negative-zero@^2.0.3: resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.3.tgz#ced903a027aca6381b777a5743069d7376a49747" integrity sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw== -is-number-object@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.1.0.tgz#5a867e9ecc3d294dda740d9f127835857af7eb05" - integrity sha512-KVSZV0Dunv9DTPkhXwcZ3Q+tUc9TsaE1ZwX5J2WMvsSGS6Md8TFPun5uwh0yRdrNerI6vf/tbJxqSx4c1ZI1Lw== +is-number-object@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.1.1.tgz#144b21e95a1bc148205dcc2814a9134ec41b2541" + integrity sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw== dependencies: - call-bind "^1.0.7" + call-bound "^1.0.3" has-tostringtag "^1.0.2" is-number@^7.0.0: @@ -8685,12 +8686,12 @@ is-stream@^2.0.0: resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077" integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg== -is-string@^1.0.7, is-string@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.1.0.tgz#8cb83c5d57311bf8058bc6c8db294711641da45d" - integrity sha512-PlfzajuF9vSo5wErv3MJAKD/nqf9ngAs1NFQYm16nUYFO2IzxJ2hcm+IOCg+EEopdykNNUhVq5cz35cAUxU8+g== +is-string@^1.0.7, is-string@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.1.1.tgz#92ea3f3d5c5b6e039ca8677e5ac8d07ea773cbb9" + integrity sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA== dependencies: - call-bind "^1.0.7" + call-bound "^1.0.3" has-tostringtag "^1.0.2" is-subdir@^1.1.1: @@ -8700,7 +8701,7 @@ is-subdir@^1.1.1: dependencies: better-path-resolve "1.0.0" -is-symbol@^1.0.4, is-symbol@^1.1.0: +is-symbol@^1.0.4, is-symbol@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.1.1.tgz#f47761279f532e2b05a7024a7506dbbedacd0634" integrity sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w== @@ -8738,7 +8739,7 @@ is-weakmap@^2.0.2: resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.2.tgz#bf72615d649dfe5f699079c54b83e47d1ae19cfd" integrity sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w== -is-weakref@^1.0.2: +is-weakref@^1.0.2, is-weakref@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.1.0.tgz#47e3472ae95a63fa9cf25660bcf0c181c39770ef" integrity sha512-SXM8Nwyys6nT5WP6pltOwKytLV7FqQ4UiibxVmW+EIosHcmCqkkjViTb5SNssDlkCiEYRP1/pdWUKVvZBmsR2Q== @@ -9977,7 +9978,7 @@ longest-streak@^3.0.0: resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-3.1.0.tgz#62fa67cd958742a1574af9f39866364102d90cd4" integrity sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g== -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: +loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -10051,9 +10052,9 @@ macos-release@^3.0.1: integrity sha512-tPJQ1HeyiU2vRruNGhZ+VleWuMQRro8iFtJxYgnS4NQe+EukKF6aGiIT+7flZhISAt2iaXBCfFGvAyif7/f8nQ== magic-string@^0.30.5: - version "0.30.15" - resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.15.tgz#d5474a2c4c5f35f041349edaba8a5cb02733ed3c" - integrity sha512-zXeaYRgZ6ldS1RJJUrMrYgNJ4fdwnyI6tVqoiIhyCyv5IVTK9BU8Ic2l253GGETQHxI4HNUwhJ3fjDhKqEoaAw== + version "0.30.17" + resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.17.tgz#450a449673d2460e5bbcfba9a61916a1714c7453" + integrity sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA== dependencies: "@jridgewell/sourcemap-codec" "^1.5.0" @@ -12079,11 +12080,11 @@ react-refresh@^0.14.2: integrity sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA== react-remove-scroll-bar@^2.3.6: - version "2.3.6" - resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz#3e585e9d163be84a010180b18721e851ac81a29c" - integrity sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g== + version "2.3.8" + resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz#99c20f908ee467b385b68a3469b4a3e750012223" + integrity sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q== dependencies: - react-style-singleton "^2.2.1" + react-style-singleton "^2.2.2" tslib "^2.0.0" react-remove-scroll@2.6.0: @@ -12112,13 +12113,12 @@ react-router@6.28.0: dependencies: "@remix-run/router" "1.21.0" -react-style-singleton@^2.2.1: - version "2.2.1" - resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4" - integrity sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g== +react-style-singleton@^2.2.1, react-style-singleton@^2.2.2: + version "2.2.3" + resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.3.tgz#4265608be69a4d70cfe3047f2c6c88b2c3ace388" + integrity sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ== dependencies: get-nonce "^1.0.0" - invariant "^2.2.4" tslib "^2.0.0" react-syntax-highlighter@^15.5.0, react-syntax-highlighter@^15.6.1: @@ -12590,7 +12590,7 @@ rxjs@^7.8.1: dependencies: tslib "^2.1.0" -safe-array-concat@^1.1.2: +safe-array-concat@^1.1.2, safe-array-concat@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.3.tgz#c9e54ec4f603b0bbb8e7e5007a5ee7aecd1538c3" integrity sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q== @@ -13080,11 +13080,12 @@ statuses@2.0.1: integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA== stop-iteration-iterator@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz#6a60be0b4ee757d1ed5254858ec66b10c49285e4" - integrity sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ== + version "1.1.0" + resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz#f481ff70a548f6124d0312c3aa14cbfa7aa542ad" + integrity sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ== dependencies: - internal-slot "^1.0.4" + es-errors "^1.3.0" + internal-slot "^1.1.0" storybook@^8.3.6: version "8.4.7" @@ -13182,7 +13183,7 @@ string.prototype.repeat@^1.0.0: define-properties "^1.1.3" es-abstract "^1.17.5" -string.prototype.trim@^1.2.9: +string.prototype.trim@^1.2.10: version "1.2.10" resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz#40b2dd5ee94c959b4dcfb1d65ce72e90da480c81" integrity sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA== @@ -13195,7 +13196,7 @@ string.prototype.trim@^1.2.9: es-object-atoms "^1.0.0" has-property-descriptors "^1.0.2" -string.prototype.trimend@^1.0.8: +string.prototype.trimend@^1.0.8, string.prototype.trimend@^1.0.9: version "1.0.9" resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz#62e2731272cd285041b36596054e9f66569b6942" integrity sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ== @@ -14103,7 +14104,7 @@ typed-array-byte-length@^1.0.1: has-proto "^1.0.3" is-typed-array "^1.1.13" -typed-array-byte-offset@^1.0.2: +typed-array-byte-offset@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.3.tgz#3fa9f22567700cc86aaf86a1e7176f74b59600f2" integrity sha512-GsvTyUHTriq6o/bHcTd0vM7OQ9JEdlvluu9YISaA7+KzDzPaIzEeDFNkTfhdE3MYcNhNi0vq/LlegYgIs5yPAw== @@ -14116,7 +14117,7 @@ typed-array-byte-offset@^1.0.2: is-typed-array "^1.1.13" reflect.getprototypeof "^1.0.6" -typed-array-length@^1.0.6: +typed-array-length@^1.0.7: version "1.0.7" resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.7.tgz#ee4deff984b64be1e118b0de8c9c877d5ce73d3d" integrity sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg== @@ -14146,14 +14147,14 @@ typescript@^5.1.6, typescript@^5.2.2: integrity sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg== unbox-primitive@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e" - integrity sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw== + version "1.1.0" + resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.1.0.tgz#8d9d2c9edeea8460c7f35033a88867944934d1e2" + integrity sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw== dependencies: - call-bind "^1.0.2" + call-bound "^1.0.3" has-bigints "^1.0.2" - has-symbols "^1.0.3" - which-boxed-primitive "^1.0.2" + has-symbols "^1.1.0" + which-boxed-primitive "^1.1.1" underscore@~1.12.1: version "1.12.1" @@ -14345,9 +14346,9 @@ use-callback-ref@^1.3.0: tslib "^2.0.0" use-sidecar@^1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2" - integrity sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw== + version "1.1.3" + resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.3.tgz#10e7fd897d130b896e2c546c63a5e8233d00efdb" + integrity sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ== dependencies: detect-node-es "^1.1.0" tslib "^2.0.0" @@ -14754,16 +14755,16 @@ whatwg-url@^8.0.0, whatwg-url@^8.5.0: tr46 "^2.1.0" webidl-conversions "^6.1.0" -which-boxed-primitive@^1.0.2, which-boxed-primitive@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.1.0.tgz#2d850d6c4ac37b95441a67890e19f3fda8b6c6d9" - integrity sha512-Ei7Miu/AXe2JJ4iNF5j/UphAgRoma4trE6PtisM09bPygb3egMH3YLW/befsWb1A1AxvNSFidOFTB18XtnIIng== +which-boxed-primitive@^1.0.2, which-boxed-primitive@^1.1.0, which-boxed-primitive@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz#d76ec27df7fa165f18d5808374a5fe23c29b176e" + integrity sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA== dependencies: is-bigint "^1.1.0" - is-boolean-object "^1.2.0" - is-number-object "^1.1.0" - is-string "^1.1.0" - is-symbol "^1.1.0" + is-boolean-object "^1.2.1" + is-number-object "^1.1.1" + is-string "^1.1.1" + is-symbol "^1.1.1" which-builtin-type@^1.2.0: version "1.2.1" @@ -14803,7 +14804,7 @@ which-promise@^1.0.0: pinkie-promise "^1.0.0" which "^1.1.2" -which-typed-array@^1.1.13, which-typed-array@^1.1.14, which-typed-array@^1.1.15, which-typed-array@^1.1.16, which-typed-array@^1.1.2: +which-typed-array@^1.1.13, which-typed-array@^1.1.14, which-typed-array@^1.1.16, which-typed-array@^1.1.2: version "1.1.16" resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.16.tgz#db4db429c4706feca2f01677a144278e4a8c216b" integrity sha512-g+N+GAWiRj66DngFwHvISJd+ITsyphZvD1vChfVg6cEdnzy53GzB3oy0fUNlvhz7H7+MiqhYr26qxQShCpKTTQ== From d1d017cad7858b8c0a024514c6ecbdf111b12fe7 Mon Sep 17 00:00:00 2001 From: Taylor Seamans Date: Mon, 16 Dec 2024 10:30:07 -0800 Subject: [PATCH 7/9] Create tame-elephants-notice.md --- .changeset/tame-elephants-notice.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 .changeset/tame-elephants-notice.md diff --git a/.changeset/tame-elephants-notice.md b/.changeset/tame-elephants-notice.md new file mode 100644 index 000000000..95dd533e7 --- /dev/null +++ b/.changeset/tame-elephants-notice.md @@ -0,0 +1,11 @@ +--- +"hpe-design-tokens": minor +--- + +- Added `formField.input.group.container.error.rest` tokens +- Removed `formField.input.group.item.status.critical` tokens +- Removed formField text "error" tokens for complex states, now only support `error.rest`, `error.hover`, `error.focus`. +- Renamed formField "enabled" tokens to "rest" +- Renamed formField "status.critical" tokens to "error.rest" +- Renamed formField "disabled" tokens to "disabled.rest" +- Renamed formField "readOnly" tokens to "readOnly.rest" From ae53c75e33bfc38ea5dab57ee47bc0cb27810bd6 Mon Sep 17 00:00:00 2001 From: taysea Date: Mon, 16 Dec 2024 10:45:04 -0800 Subject: [PATCH 8/9] base.static --> static --- .../tokens/component/component.default.json | 112 +-- .../tokens/component/element.default.json | 32 +- .../tokens/primitive/primitives.base.json | 732 +++++++++--------- design-tokens/tokens/semantic/color.dark.json | 16 +- .../tokens/semantic/color.light.json | 16 +- .../tokens/semantic/dimension.medium.json | 64 +- .../tokens/semantic/dimension.small.json | 64 +- 7 files changed, 518 insertions(+), 518 deletions(-) diff --git a/design-tokens/tokens/component/component.default.json b/design-tokens/tokens/component/component.default.json index dceb681fd..9a94d1130 100644 --- a/design-tokens/tokens/component/component.default.json +++ b/design-tokens/tokens/component/component.default.json @@ -1915,9 +1915,9 @@ "$type": "shadow", "$value": [ { - "offsetX": "{base.static.spacing.none}", - "offsetY": "{base.static.spacing.none}", - "blur": "{base.static.spacing.none}", + "offsetX": "{static.spacing.none}", + "offsetY": "{static.spacing.none}", + "blur": "{static.spacing.none}", "spread": "{base.dimension.25}", "color": "{button.secondary.hover.borderColor}", "inset": true @@ -2146,9 +2146,9 @@ "$type": "shadow", "$value": [ { - "offsetX": "{base.static.spacing.none}", - "offsetY": "{base.static.spacing.none}", - "blur": "{base.static.spacing.none}", + "offsetX": "{static.spacing.none}", + "offsetY": "{static.spacing.none}", + "blur": "{static.spacing.none}", "spread": "{base.dimension.25}", "color": "{button.secondary.hover.borderColor}", "inset": true @@ -2204,7 +2204,7 @@ }, "borderWidth": { "$type": "number", - "$value": "{base.static.borderWidth.small}", + "$value": "{static.borderWidth.small}", "$description": "", "$extensions": { "com.figma": { @@ -2377,9 +2377,9 @@ "$type": "shadow", "$value": [ { - "offsetX": "{base.static.spacing.none}", - "offsetY": "{base.static.spacing.none}", - "blur": "{base.static.spacing.none}", + "offsetX": "{static.spacing.none}", + "offsetY": "{static.spacing.none}", + "blur": "{static.spacing.none}", "spread": "{base.dimension.25}", "color": "{button.secondary.hover.borderColor}", "inset": true @@ -2435,7 +2435,7 @@ }, "borderWidth": { "$type": "number", - "$value": "{base.static.borderWidth.small}", + "$value": "{static.borderWidth.small}", "$description": "", "$extensions": { "com.figma": { @@ -2608,9 +2608,9 @@ "$type": "shadow", "$value": [ { - "offsetX": "{base.static.spacing.none}", - "offsetY": "{base.static.spacing.none}", - "blur": "{base.static.spacing.none}", + "offsetX": "{static.spacing.none}", + "offsetY": "{static.spacing.none}", + "blur": "{static.spacing.none}", "spread": "{base.dimension.25}", "color": "{button.secondary.hover.borderColor}", "inset": true @@ -2776,7 +2776,7 @@ }, "borderWidth": { "$type": "number", - "$value": "{base.static.borderWidth.small}", + "$value": "{static.borderWidth.small}", "$description": "", "$extensions": { "com.figma": { @@ -2839,9 +2839,9 @@ "$type": "shadow", "$value": [ { - "offsetX": "{base.static.spacing.none}", - "offsetY": "{base.static.spacing.none}", - "blur": "{base.static.spacing.none}", + "offsetX": "{static.spacing.none}", + "offsetY": "{static.spacing.none}", + "blur": "{static.spacing.none}", "spread": "{base.dimension.25}", "color": "{button.secondary.hover.borderColor}", "inset": true @@ -3201,7 +3201,7 @@ }, "borderRadius": { "$type": "number", - "$value": "{base.static.radius.full}", + "$value": "{static.radius.full}", "$description": "", "$extensions": { "com.figma": { @@ -3409,7 +3409,7 @@ }, "borderRadius": { "$type": "number", - "$value": "{base.static.radius.full}", + "$value": "{static.radius.full}", "$description": "", "$extensions": { "com.figma": { @@ -3421,7 +3421,7 @@ }, "borderWidth": { "$type": "number", - "$value": "{base.static.borderWidth.default}", + "$value": "{static.borderWidth.default}", "$description": "", "$extensions": { "com.figma": { @@ -3617,7 +3617,7 @@ }, "borderRadius": { "$type": "number", - "$value": "{base.static.radius.full}", + "$value": "{static.radius.full}", "$description": "", "$extensions": { "com.figma": { @@ -3629,7 +3629,7 @@ }, "borderWidth": { "$type": "number", - "$value": "{base.static.borderWidth.default}", + "$value": "{static.borderWidth.default}", "$description": "", "$extensions": { "com.figma": { @@ -3825,7 +3825,7 @@ }, "borderRadius": { "$type": "number", - "$value": "{base.static.radius.full}", + "$value": "{static.radius.full}", "$description": "", "$extensions": { "com.figma": { @@ -3837,7 +3837,7 @@ }, "borderWidth": { "$type": "number", - "$value": "{base.static.borderWidth.default}", + "$value": "{static.borderWidth.default}", "$description": "", "$extensions": { "com.figma": { @@ -4143,7 +4143,7 @@ }, "borderRadius": { "$type": "number", - "$value": "{base.static.radius.full}", + "$value": "{static.radius.full}", "$description": "", "$extensions": { "com.figma": { @@ -4155,7 +4155,7 @@ }, "borderWidth": { "$type": "number", - "$value": "{base.static.borderWidth.default}", + "$value": "{static.borderWidth.default}", "$description": "", "$extensions": { "com.figma": { @@ -4557,7 +4557,7 @@ }, "borderRadius": { "$type": "number", - "$value": "{base.static.radius.xsmall}", + "$value": "{static.radius.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -4569,7 +4569,7 @@ }, "borderWidth": { "$type": "number", - "$value": "{base.static.borderWidth.default}", + "$value": "{static.borderWidth.default}", "$description": "", "$extensions": { "com.figma": { @@ -4765,7 +4765,7 @@ }, "borderRadius": { "$type": "number", - "$value": "{base.static.radius.xsmall}", + "$value": "{static.radius.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -4777,7 +4777,7 @@ }, "borderWidth": { "$type": "number", - "$value": "{base.static.borderWidth.default}", + "$value": "{static.borderWidth.default}", "$description": "", "$extensions": { "com.figma": { @@ -4973,7 +4973,7 @@ }, "borderRadius": { "$type": "number", - "$value": "{base.static.spacing.xsmall}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -5181,7 +5181,7 @@ }, "borderRadius": { "$type": "number", - "$value": "{base.static.radius.xsmall}", + "$value": "{static.radius.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -5499,7 +5499,7 @@ }, "borderRadius": { "$type": "number", - "$value": "{base.static.radius.small}", + "$value": "{static.radius.small}", "$description": "", "$extensions": { "com.figma": { @@ -5599,7 +5599,7 @@ }, "margin": { "$type": "number", - "$value": "{base.static.spacing.xsmall}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -5869,7 +5869,7 @@ }, "borderWidth": { "$type": "number", - "$value": "{base.static.borderWidth.default}", + "$value": "{static.borderWidth.default}", "$description": "", "$extensions": { "com.figma": { @@ -5932,7 +5932,7 @@ "container": { "paddingY": { "$type": "number", - "$value": "{base.static.spacing.xsmall}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -5946,7 +5946,7 @@ "separator": { "height": { "$type": "number", - "$value": "{base.static.borderWidth.xsmall}", + "$value": "{static.borderWidth.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -6001,7 +6001,7 @@ }, "borderRadius": { "$type": "number", - "$value": "{base.static.radius.none}", + "$value": "{static.radius.none}", "$description": "", "$extensions": { "com.figma": { @@ -6013,7 +6013,7 @@ }, "borderWidth": { "$type": "number", - "$value": "{base.static.borderWidth.xsmall}", + "$value": "{static.borderWidth.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -6606,7 +6606,7 @@ "medium": { "gapX": { "$type": "number", - "$value": "{base.static.spacing.small}", + "$value": "{static.spacing.small}", "$description": "Space between checkbox control and value (label)", "$extensions": { "com.figma": { @@ -6693,7 +6693,7 @@ }, "borderRadius": { "$type": "number", - "$value": "{base.static.radius.xxsmall}", + "$value": "{static.radius.xxsmall}", "$description": "", "$extensions": { "com.figma": { @@ -7030,7 +7030,7 @@ "medium": { "gapX": { "$type": "number", - "$value": "{base.static.spacing.small}", + "$value": "{static.spacing.small}", "$description": "", "$extensions": { "com.figma": { @@ -7106,7 +7106,7 @@ }, "borderWidth": { "$type": "number", - "$value": "{base.static.borderWidth.default}", + "$value": "{static.borderWidth.default}", "$description": "", "$extensions": { "com.figma": { @@ -7118,7 +7118,7 @@ }, "borderRadius": { "$type": "number", - "$value": "{base.static.radius.medium}", + "$value": "{static.radius.medium}", "$description": "", "$extensions": { "com.figma": { @@ -7168,7 +7168,7 @@ }, "borderRadius": { "$type": "number", - "$value": "{base.static.radius.medium}", + "$value": "{static.radius.medium}", "$description": "", "$extensions": { "com.figma": { @@ -7185,7 +7185,7 @@ "dataCell": { "paddingX": { "$type": "number", - "$value": "{base.static.spacing.small}", + "$value": "{static.spacing.small}", "$description": "", "$extensions": { "com.figma": { @@ -7233,7 +7233,7 @@ }, "borderBottomWidth": { "$type": "number", - "$value": "{base.static.borderWidth.xsmall}", + "$value": "{static.borderWidth.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -7245,7 +7245,7 @@ }, "paddingTop": { "$type": "number", - "$value": "{base.static.spacing.xsmall}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -8223,7 +8223,7 @@ "item": { "paddingX": { "$type": "number", - "$value": "{base.static.spacing.small}", + "$value": "{static.spacing.small}", "$description": "", "$extensions": { "com.figma": { @@ -8321,7 +8321,7 @@ }, "paddingY": { "$type": "number", - "$value": "{base.static.spacing.xsmall}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -8360,7 +8360,7 @@ "container": { "paddingX": { "$type": "number", - "$value": "{base.static.spacing.small}", + "$value": "{static.spacing.small}", "$description": "", "$extensions": { "com.figma": { @@ -8384,7 +8384,7 @@ }, "borderWidth": { "$type": "number", - "$value": "{base.static.borderWidth.default}", + "$value": "{static.borderWidth.default}", "$description": "", "$extensions": { "com.figma": { @@ -8396,7 +8396,7 @@ }, "borderRadius": { "$type": "number", - "$value": "{base.static.radius.xsmall}", + "$value": "{static.radius.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -10282,7 +10282,7 @@ "medium": { "gapX": { "$type": "number", - "$value": "{base.static.spacing.small}", + "$value": "{static.spacing.small}", "$description": "Space between checkbox control and value (label)", "$extensions": { "com.figma": { @@ -10369,7 +10369,7 @@ }, "borderRadius": { "$type": "number", - "$value": "{base.static.radius.full}", + "$value": "{static.radius.full}", "$description": "", "$extensions": { "com.figma": { diff --git a/design-tokens/tokens/component/element.default.json b/design-tokens/tokens/component/element.default.json index 27c2686d1..b5a46a84c 100644 --- a/design-tokens/tokens/component/element.default.json +++ b/design-tokens/tokens/component/element.default.json @@ -15,7 +15,7 @@ }, "textToElementX": { "$type": "number", - "$value": "{base.static.spacing.xxsmall}", + "$value": "{static.spacing.xxsmall}", "$description": "", "$extensions": { "com.figma": { @@ -27,7 +27,7 @@ }, "textToIconX": { "$type": "number", - "$value": "{base.static.spacing.xxsmall}", + "$value": "{static.spacing.xxsmall}", "$description": "", "$extensions": { "com.figma": { @@ -88,7 +88,7 @@ "paddingX": { "narrow": { "$type": "number", - "$value": "{base.static.spacing.xxsmall}", + "$value": "{static.spacing.xxsmall}", "$description": "", "$extensions": { "com.figma": { @@ -100,7 +100,7 @@ }, "default": { "$type": "number", - "$value": "{base.static.spacing.xsmall}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -165,7 +165,7 @@ "small": { "borderWidth": { "$type": "number", - "$value": "{base.static.borderWidth.default}", + "$value": "{static.borderWidth.default}", "$description": "", "$extensions": { "com.figma": { @@ -249,7 +249,7 @@ }, "textToElementX": { "$type": "number", - "$value": "{base.static.spacing.small}", + "$value": "{static.spacing.small}", "$description": "", "$extensions": { "com.figma": { @@ -261,7 +261,7 @@ }, "textToIconX": { "$type": "number", - "$value": "{base.static.spacing.xsmall}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -274,7 +274,7 @@ "paddingX": { "narrow": { "$type": "number", - "$value": "{base.static.spacing.xxsmall}", + "$value": "{static.spacing.xxsmall}", "$description": "", "$extensions": { "com.figma": { @@ -286,7 +286,7 @@ }, "default": { "$type": "number", - "$value": "{base.static.spacing.xsmall}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -298,7 +298,7 @@ }, "wide": { "$type": "number", - "$value": "{base.static.spacing.small}", + "$value": "{static.spacing.small}", "$description": "", "$extensions": { "com.figma": { @@ -387,7 +387,7 @@ }, "textToElementX": { "$type": "number", - "$value": "{base.static.spacing.small}", + "$value": "{static.spacing.small}", "$description": "", "$extensions": { "com.figma": { @@ -399,7 +399,7 @@ }, "textToIconX": { "$type": "number", - "$value": "{base.static.spacing.xsmall}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -549,7 +549,7 @@ }, "textToElementX": { "$type": "number", - "$value": "{base.static.spacing.small}", + "$value": "{static.spacing.small}", "$description": "", "$extensions": { "com.figma": { @@ -561,7 +561,7 @@ }, "textToIconX": { "$type": "number", - "$value": "{base.static.spacing.xsmall}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -711,7 +711,7 @@ }, "textToElementX": { "$type": "number", - "$value": "{base.static.spacing.small}", + "$value": "{static.spacing.small}", "$description": "", "$extensions": { "com.figma": { @@ -723,7 +723,7 @@ }, "textToIconX": { "$type": "number", - "$value": "{base.static.spacing.xsmall}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { diff --git a/design-tokens/tokens/primitive/primitives.base.json b/design-tokens/tokens/primitive/primitives.base.json index 3492108b0..d5499f4ec 100644 --- a/design-tokens/tokens/primitive/primitives.base.json +++ b/design-tokens/tokens/primitive/primitives.base.json @@ -1915,409 +1915,409 @@ } } } - }, - "static": { - "spacing": { - "none": { - "$type": "number", - "$value": "{base.dimension.0}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "hair": { - "$type": "number", - "$value": "{base.dimension.25}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } + } + }, + "static": { + "spacing": { + "none": { + "$type": "number", + "$value": "{base.dimension.0}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} } - }, - "xxsmall": { - "$type": "number", - "$value": "{base.dimension.75}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } + } + }, + "hair": { + "$type": "number", + "$value": "{base.dimension.25}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} } - }, - "xsmall": { - "$type": "number", - "$value": "{base.dimension.150}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } + } + }, + "xxsmall": { + "$type": "number", + "$value": "{base.dimension.75}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} } - }, - "small": { - "$type": "number", - "$value": "{base.dimension.300}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } + } + }, + "xsmall": { + "$type": "number", + "$value": "{base.dimension.150}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} } - }, - "medium": { - "$type": "number", - "$value": "{base.dimension.600}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } + } + }, + "small": { + "$type": "number", + "$value": "{base.dimension.300}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} } - }, - "large": { - "$type": "number", - "$value": "{base.dimension.1200}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } + } + }, + "medium": { + "$type": "number", + "$value": "{base.dimension.600}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} } - }, - "xlarge": { - "$type": "number", - "$value": "{base.dimension.2400}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } + } + }, + "large": { + "$type": "number", + "$value": "{base.dimension.1200}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} } } }, - "radius": { - "none": { - "$type": "number", - "$value": "{base.dimension.0}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["CORNER_RADIUS"], - "codeSyntax": {} - } + "xlarge": { + "$type": "number", + "$value": "{base.dimension.2400}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} } - }, - "hair": { - "$type": "number", - "$value": "{base.dimension.25}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["CORNER_RADIUS"], - "codeSyntax": {} - } + } + } + }, + "radius": { + "none": { + "$type": "number", + "$value": "{base.dimension.0}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["CORNER_RADIUS"], + "codeSyntax": {} } - }, - "xxsmall": { - "$type": "number", - "$value": "{base.dimension.75}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["CORNER_RADIUS"], - "codeSyntax": {} - } + } + }, + "hair": { + "$type": "number", + "$value": "{base.dimension.25}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["CORNER_RADIUS"], + "codeSyntax": {} } - }, - "xsmall": { - "$type": "number", - "$value": "{base.dimension.150}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["CORNER_RADIUS"], - "codeSyntax": {} - } + } + }, + "xxsmall": { + "$type": "number", + "$value": "{base.dimension.75}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["CORNER_RADIUS"], + "codeSyntax": {} } - }, - "small": { - "$type": "number", - "$value": "{base.dimension.300}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["CORNER_RADIUS"], - "codeSyntax": {} - } + } + }, + "xsmall": { + "$type": "number", + "$value": "{base.dimension.150}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["CORNER_RADIUS"], + "codeSyntax": {} } - }, - "medium": { - "$type": "number", - "$value": "{base.dimension.600}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["CORNER_RADIUS"], - "codeSyntax": {} - } + } + }, + "small": { + "$type": "number", + "$value": "{base.dimension.300}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["CORNER_RADIUS"], + "codeSyntax": {} } - }, - "large": { - "$type": "number", - "$value": "{base.dimension.1200}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["CORNER_RADIUS"], - "codeSyntax": {} - } + } + }, + "medium": { + "$type": "number", + "$value": "{base.dimension.600}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["CORNER_RADIUS"], + "codeSyntax": {} } - }, - "xlarge": { - "$type": "number", - "$value": "{base.dimension.2400}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["CORNER_RADIUS"], - "codeSyntax": {} - } + } + }, + "large": { + "$type": "number", + "$value": "{base.dimension.1200}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["CORNER_RADIUS"], + "codeSyntax": {} } - }, - "full": { - "$type": "number", - "$value": "{base.dimension.9600}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["ALL_SCOPES"], - "codeSyntax": {} - } + } + }, + "xlarge": { + "$type": "number", + "$value": "{base.dimension.2400}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["CORNER_RADIUS"], + "codeSyntax": {} } } }, - "borderWidth": { - "none": { - "$type": "number", - "$value": "{base.dimension.0}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["EFFECT_FLOAT"], - "codeSyntax": {} - } + "full": { + "$type": "number", + "$value": "{base.dimension.9600}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} } - }, - "xsmall": { - "$type": "number", - "$value": "{base.dimension.25}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["EFFECT_FLOAT"], - "codeSyntax": {} - } + } + } + }, + "borderWidth": { + "none": { + "$type": "number", + "$value": "{base.dimension.0}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["EFFECT_FLOAT"], + "codeSyntax": {} } - }, - "small": { - "$type": "number", - "$value": "{base.dimension.50}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["EFFECT_FLOAT"], - "codeSyntax": {} - } + } + }, + "xsmall": { + "$type": "number", + "$value": "{base.dimension.25}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["EFFECT_FLOAT"], + "codeSyntax": {} } - }, - "medium": { - "$type": "number", - "$value": "{base.dimension.100}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["EFFECT_FLOAT"], - "codeSyntax": {} - } + } + }, + "small": { + "$type": "number", + "$value": "{base.dimension.50}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["EFFECT_FLOAT"], + "codeSyntax": {} } - }, - "large": { - "$type": "number", - "$value": "{base.dimension.300}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["EFFECT_FLOAT"], - "codeSyntax": {} - } + } + }, + "medium": { + "$type": "number", + "$value": "{base.dimension.100}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["EFFECT_FLOAT"], + "codeSyntax": {} } - }, - "xlarge": { - "$type": "number", - "$value": "{base.dimension.600}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["EFFECT_FLOAT"], - "codeSyntax": {} - } + } + }, + "large": { + "$type": "number", + "$value": "{base.dimension.300}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["EFFECT_FLOAT"], + "codeSyntax": {} } - }, - "default": { - "$type": "number", - "$value": "{base.dimension.25}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["EFFECT_FLOAT"], - "codeSyntax": {} - } + } + }, + "xlarge": { + "$type": "number", + "$value": "{base.dimension.600}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["EFFECT_FLOAT"], + "codeSyntax": {} } } }, - "container": { - "xxsmall": { - "$type": "number", - "$value": "{base.dimension.1200}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT", "GAP"], - "codeSyntax": {} - } + "default": { + "$type": "number", + "$value": "{base.dimension.25}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["EFFECT_FLOAT"], + "codeSyntax": {} } - }, - "xsmall": { - "$type": "number", - "$value": "{base.dimension.2400}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT", "GAP"], - "codeSyntax": {} - } + } + } + }, + "container": { + "xxsmall": { + "$type": "number", + "$value": "{base.dimension.1200}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "codeSyntax": {} } - }, - "small": { - "$type": "number", - "$value": "{base.dimension.4800}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT", "GAP"], - "codeSyntax": {} - } + } + }, + "xsmall": { + "$type": "number", + "$value": "{base.dimension.2400}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "codeSyntax": {} } - }, - "smallPlus": { - "$type": "number", - "$value": "{base.dimension.7200}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["ALL_SCOPES"], - "codeSyntax": {} - } + } + }, + "small": { + "$type": "number", + "$value": "{base.dimension.4800}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "codeSyntax": {} } - }, - "medium": { - "$type": "number", - "$value": "{base.dimension.9600}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT", "GAP"], - "codeSyntax": {} - } + } + }, + "smallPlus": { + "$type": "number", + "$value": "{base.dimension.7200}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} } - }, - "mediumPlus": { - "$type": "number", - "$value": "{base.dimension.14400}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["ALL_SCOPES"], - "codeSyntax": {} - } + } + }, + "medium": { + "$type": "number", + "$value": "{base.dimension.9600}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "codeSyntax": {} } - }, - "large": { - "$type": "number", - "$value": "{base.dimension.19200}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT", "GAP"], - "codeSyntax": {} - } + } + }, + "mediumPlus": { + "$type": "number", + "$value": "{base.dimension.14400}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} } - }, - "xlarge": { - "$type": "number", - "$value": "{base.dimension.38400}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT", "GAP"], - "codeSyntax": {} - } + } + }, + "large": { + "$type": "number", + "$value": "{base.dimension.19200}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "codeSyntax": {} } - }, - "xxlarge": { - "$type": "number", - "$value": "{base.dimension.76800}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT", "GAP"], - "codeSyntax": {} - } + } + }, + "xlarge": { + "$type": "number", + "$value": "{base.dimension.38400}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "codeSyntax": {} + } + } + }, + "xxlarge": { + "$type": "number", + "$value": "{base.dimension.76800}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT", "GAP"], + "codeSyntax": {} } } } diff --git a/design-tokens/tokens/semantic/color.dark.json b/design-tokens/tokens/semantic/color.dark.json index 36aa5b037..ed5c4d210 100644 --- a/design-tokens/tokens/semantic/color.dark.json +++ b/design-tokens/tokens/semantic/color.dark.json @@ -1254,10 +1254,10 @@ "$type": "shadow", "$value": [ { - "offsetX": "{base.static.spacing.none}", - "offsetY": "{base.static.spacing.xsmall}", - "blur": "{base.static.spacing.small}", - "spread": "{base.static.spacing.none}", + "offsetX": "{static.spacing.none}", + "offsetY": "{static.spacing.xsmall}", + "blur": "{static.spacing.small}", + "spread": "{static.spacing.none}", "color": "{base.color.black.opacity36}" } ], @@ -1274,10 +1274,10 @@ "$type": "shadow", "$value": [ { - "offsetX": "{base.static.spacing.none}", - "offsetY": "{base.static.spacing.small}", - "blur": "{base.static.spacing.medium}", - "spread": "{base.static.spacing.none}", + "offsetX": "{static.spacing.none}", + "offsetY": "{static.spacing.small}", + "blur": "{static.spacing.medium}", + "spread": "{static.spacing.none}", "color": "{base.color.black.opacity36}" } ], diff --git a/design-tokens/tokens/semantic/color.light.json b/design-tokens/tokens/semantic/color.light.json index a24bba710..d5bd72264 100644 --- a/design-tokens/tokens/semantic/color.light.json +++ b/design-tokens/tokens/semantic/color.light.json @@ -1254,10 +1254,10 @@ "$type": "shadow", "$value": [ { - "offsetX": "{base.static.spacing.none}", - "offsetY": "{base.static.spacing.xsmall}", - "blur": "{base.static.spacing.small}", - "spread": "{base.static.spacing.none}", + "offsetX": "{static.spacing.none}", + "offsetY": "{static.spacing.xsmall}", + "blur": "{static.spacing.small}", + "spread": "{static.spacing.none}", "color": "{base.color.black.opacity12}" } ], @@ -1274,10 +1274,10 @@ "$type": "shadow", "$value": [ { - "offsetX": "{base.static.spacing.none}", - "offsetY": "{base.static.spacing.small}", - "blur": "{base.static.spacing.medium}", - "spread": "{base.static.spacing.none}", + "offsetX": "{static.spacing.none}", + "offsetY": "{static.spacing.small}", + "blur": "{static.spacing.medium}", + "spread": "{static.spacing.none}", "color": "{base.color.black.opacity24}" } ], diff --git a/design-tokens/tokens/semantic/dimension.medium.json b/design-tokens/tokens/semantic/dimension.medium.json index 296e70fa0..bcf44fc36 100644 --- a/design-tokens/tokens/semantic/dimension.medium.json +++ b/design-tokens/tokens/semantic/dimension.medium.json @@ -2,7 +2,7 @@ "spacing": { "none": { "$type": "number", - "$value": "{base.static.spacing.none}", + "$value": "{static.spacing.none}", "$description": "", "$extensions": { "com.figma": { @@ -14,7 +14,7 @@ }, "hair": { "$type": "number", - "$value": "{base.static.spacing.hair}", + "$value": "{static.spacing.hair}", "$description": "", "$extensions": { "com.figma": { @@ -26,7 +26,7 @@ }, "xxsmall": { "$type": "number", - "$value": "{base.static.spacing.xxsmall}", + "$value": "{static.spacing.xxsmall}", "$description": "", "$extensions": { "com.figma": { @@ -38,7 +38,7 @@ }, "xsmall": { "$type": "number", - "$value": "{base.static.spacing.xsmall}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -50,7 +50,7 @@ }, "small": { "$type": "number", - "$value": "{base.static.spacing.small}", + "$value": "{static.spacing.small}", "$description": "", "$extensions": { "com.figma": { @@ -62,7 +62,7 @@ }, "medium": { "$type": "number", - "$value": "{base.static.spacing.medium}", + "$value": "{static.spacing.medium}", "$description": "", "$extensions": { "com.figma": { @@ -74,7 +74,7 @@ }, "large": { "$type": "number", - "$value": "{base.static.spacing.large}", + "$value": "{static.spacing.large}", "$description": "", "$extensions": { "com.figma": { @@ -86,7 +86,7 @@ }, "xlarge": { "$type": "number", - "$value": "{base.static.spacing.xlarge}", + "$value": "{static.spacing.xlarge}", "$description": "", "$extensions": { "com.figma": { @@ -100,7 +100,7 @@ "radius": { "none": { "$type": "number", - "$value": "{base.static.radius.none}", + "$value": "{static.radius.none}", "$description": "", "$extensions": { "com.figma": { @@ -112,7 +112,7 @@ }, "hair": { "$type": "number", - "$value": "{base.static.radius.hair}", + "$value": "{static.radius.hair}", "$description": "", "$extensions": { "com.figma": { @@ -124,7 +124,7 @@ }, "xxsmall": { "$type": "number", - "$value": "{base.static.radius.xxsmall}", + "$value": "{static.radius.xxsmall}", "$description": "", "$extensions": { "com.figma": { @@ -136,7 +136,7 @@ }, "xsmall": { "$type": "number", - "$value": "{base.static.radius.xsmall}", + "$value": "{static.radius.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -148,7 +148,7 @@ }, "small": { "$type": "number", - "$value": "{base.static.radius.small}", + "$value": "{static.radius.small}", "$description": "", "$extensions": { "com.figma": { @@ -160,7 +160,7 @@ }, "medium": { "$type": "number", - "$value": "{base.static.radius.medium}", + "$value": "{static.radius.medium}", "$description": "", "$extensions": { "com.figma": { @@ -172,7 +172,7 @@ }, "large": { "$type": "number", - "$value": "{base.static.radius.large}", + "$value": "{static.radius.large}", "$description": "", "$extensions": { "com.figma": { @@ -184,7 +184,7 @@ }, "xlarge": { "$type": "number", - "$value": "{base.static.radius.xlarge}", + "$value": "{static.radius.xlarge}", "$description": "", "$extensions": { "com.figma": { @@ -210,7 +210,7 @@ "borderWidth": { "none": { "$type": "number", - "$value": "{base.static.borderWidth.none}", + "$value": "{static.borderWidth.none}", "$description": "", "$extensions": { "com.figma": { @@ -222,7 +222,7 @@ }, "xsmall": { "$type": "number", - "$value": "{base.static.borderWidth.xsmall}", + "$value": "{static.borderWidth.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -234,7 +234,7 @@ }, "small": { "$type": "number", - "$value": "{base.static.borderWidth.small}", + "$value": "{static.borderWidth.small}", "$description": "", "$extensions": { "com.figma": { @@ -246,7 +246,7 @@ }, "medium": { "$type": "number", - "$value": "{base.static.borderWidth.medium}", + "$value": "{static.borderWidth.medium}", "$description": "", "$extensions": { "com.figma": { @@ -258,7 +258,7 @@ }, "large": { "$type": "number", - "$value": "{base.static.borderWidth.large}", + "$value": "{static.borderWidth.large}", "$description": "", "$extensions": { "com.figma": { @@ -270,7 +270,7 @@ }, "xlarge": { "$type": "number", - "$value": "{base.static.borderWidth.xlarge}", + "$value": "{static.borderWidth.xlarge}", "$description": "", "$extensions": { "com.figma": { @@ -282,7 +282,7 @@ }, "default": { "$type": "number", - "$value": "{base.static.borderWidth.xsmall}", + "$value": "{static.borderWidth.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -297,7 +297,7 @@ "container": { "xxsmall": { "$type": "number", - "$value": "{base.static.container.xxsmall}", + "$value": "{static.container.xxsmall}", "$description": "Content tokens are generally scoped for the width and height of containers or layout elements. For example, box, card and layout-grids.", "$extensions": { "com.figma": { @@ -309,7 +309,7 @@ }, "xsmall": { "$type": "number", - "$value": "{base.static.container.xsmall}", + "$value": "{static.container.xsmall}", "$description": "Content tokens are generally scoped for the width and height of containers or layout elements. For example, box, card and layout-grids.", "$extensions": { "com.figma": { @@ -321,7 +321,7 @@ }, "small": { "$type": "number", - "$value": "{base.static.container.small}", + "$value": "{static.container.small}", "$description": "Content tokens are generally scoped for the width and height of containers or layout elements. For example, box, card and layout-grids.", "$extensions": { "com.figma": { @@ -333,7 +333,7 @@ }, "smallPlus": { "$type": "number", - "$value": "{base.static.container.smallPlus}", + "$value": "{static.container.smallPlus}", "$description": "", "$extensions": { "com.figma": { @@ -345,7 +345,7 @@ }, "medium": { "$type": "number", - "$value": "{base.static.container.medium}", + "$value": "{static.container.medium}", "$description": "Content tokens are generally scoped for the width and height of containers or layout elements. For example, box, card and layout-grids.", "$extensions": { "com.figma": { @@ -357,7 +357,7 @@ }, "mediumPlus": { "$type": "number", - "$value": "{base.static.container.mediumPlus}", + "$value": "{static.container.mediumPlus}", "$description": "", "$extensions": { "com.figma": { @@ -369,7 +369,7 @@ }, "large": { "$type": "number", - "$value": "{base.static.container.large}", + "$value": "{static.container.large}", "$description": "Content tokens are generally scoped for the width and height of containers or layout elements. For example, box, card and layout-grids.", "$extensions": { "com.figma": { @@ -381,7 +381,7 @@ }, "xlarge": { "$type": "number", - "$value": "{base.static.container.xlarge}", + "$value": "{static.container.xlarge}", "$description": "Content tokens are generally scoped for the width and height of containers or layout elements. For example, box, card and layout-grids.", "$extensions": { "com.figma": { @@ -393,7 +393,7 @@ }, "xxlarge": { "$type": "number", - "$value": "{base.static.container.xxlarge}", + "$value": "{static.container.xxlarge}", "$description": "Content tokens are generally scoped for the width and height of containers or layout elements. For example, box, card and layout-grids.", "$extensions": { "com.figma": { diff --git a/design-tokens/tokens/semantic/dimension.small.json b/design-tokens/tokens/semantic/dimension.small.json index 364b431d9..d62f28c0d 100644 --- a/design-tokens/tokens/semantic/dimension.small.json +++ b/design-tokens/tokens/semantic/dimension.small.json @@ -2,7 +2,7 @@ "spacing": { "none": { "$type": "number", - "$value": "{base.static.spacing.none}", + "$value": "{static.spacing.none}", "$description": "", "$extensions": { "com.figma": { @@ -14,7 +14,7 @@ }, "hair": { "$type": "number", - "$value": "{base.static.spacing.hair}", + "$value": "{static.spacing.hair}", "$description": "", "$extensions": { "com.figma": { @@ -26,7 +26,7 @@ }, "xxsmall": { "$type": "number", - "$value": "{base.static.spacing.xxsmall}", + "$value": "{static.spacing.xxsmall}", "$description": "", "$extensions": { "com.figma": { @@ -38,7 +38,7 @@ }, "xsmall": { "$type": "number", - "$value": "{base.static.spacing.xxsmall}", + "$value": "{static.spacing.xxsmall}", "$description": "", "$extensions": { "com.figma": { @@ -50,7 +50,7 @@ }, "small": { "$type": "number", - "$value": "{base.static.spacing.xsmall}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -62,7 +62,7 @@ }, "medium": { "$type": "number", - "$value": "{base.static.spacing.small}", + "$value": "{static.spacing.small}", "$description": "", "$extensions": { "com.figma": { @@ -74,7 +74,7 @@ }, "large": { "$type": "number", - "$value": "{base.static.spacing.medium}", + "$value": "{static.spacing.medium}", "$description": "", "$extensions": { "com.figma": { @@ -86,7 +86,7 @@ }, "xlarge": { "$type": "number", - "$value": "{base.static.spacing.large}", + "$value": "{static.spacing.large}", "$description": "", "$extensions": { "com.figma": { @@ -100,7 +100,7 @@ "radius": { "none": { "$type": "number", - "$value": "{base.static.radius.none}", + "$value": "{static.radius.none}", "$description": "", "$extensions": { "com.figma": { @@ -112,7 +112,7 @@ }, "hair": { "$type": "number", - "$value": "{base.static.radius.hair}", + "$value": "{static.radius.hair}", "$description": "", "$extensions": { "com.figma": { @@ -124,7 +124,7 @@ }, "xxsmall": { "$type": "number", - "$value": "{base.static.radius.hair}", + "$value": "{static.radius.hair}", "$description": "", "$extensions": { "com.figma": { @@ -136,7 +136,7 @@ }, "xsmall": { "$type": "number", - "$value": "{base.static.radius.xxsmall}", + "$value": "{static.radius.xxsmall}", "$description": "", "$extensions": { "com.figma": { @@ -148,7 +148,7 @@ }, "small": { "$type": "number", - "$value": "{base.static.radius.xsmall}", + "$value": "{static.radius.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -160,7 +160,7 @@ }, "medium": { "$type": "number", - "$value": "{base.static.radius.small}", + "$value": "{static.radius.small}", "$description": "", "$extensions": { "com.figma": { @@ -172,7 +172,7 @@ }, "large": { "$type": "number", - "$value": "{base.static.radius.medium}", + "$value": "{static.radius.medium}", "$description": "", "$extensions": { "com.figma": { @@ -184,7 +184,7 @@ }, "xlarge": { "$type": "number", - "$value": "{base.static.radius.large}", + "$value": "{static.radius.large}", "$description": "", "$extensions": { "com.figma": { @@ -210,7 +210,7 @@ "borderWidth": { "none": { "$type": "number", - "$value": "{base.static.borderWidth.none}", + "$value": "{static.borderWidth.none}", "$description": "", "$extensions": { "com.figma": { @@ -222,7 +222,7 @@ }, "xsmall": { "$type": "number", - "$value": "{base.static.borderWidth.xsmall}", + "$value": "{static.borderWidth.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -234,7 +234,7 @@ }, "small": { "$type": "number", - "$value": "{base.static.borderWidth.xsmall}", + "$value": "{static.borderWidth.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -246,7 +246,7 @@ }, "medium": { "$type": "number", - "$value": "{base.static.borderWidth.small}", + "$value": "{static.borderWidth.small}", "$description": "", "$extensions": { "com.figma": { @@ -258,7 +258,7 @@ }, "large": { "$type": "number", - "$value": "{base.static.borderWidth.medium}", + "$value": "{static.borderWidth.medium}", "$description": "", "$extensions": { "com.figma": { @@ -270,7 +270,7 @@ }, "xlarge": { "$type": "number", - "$value": "{base.static.borderWidth.large}", + "$value": "{static.borderWidth.large}", "$description": "", "$extensions": { "com.figma": { @@ -282,7 +282,7 @@ }, "default": { "$type": "number", - "$value": "{base.static.borderWidth.xsmall}", + "$value": "{static.borderWidth.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -297,7 +297,7 @@ "container": { "xxsmall": { "$type": "number", - "$value": "{base.static.container.xxsmall}", + "$value": "{static.container.xxsmall}", "$description": "Content tokens are generally scoped for the width and height of containers or layout elements. For example, box, card and layout-grids.", "$extensions": { "com.figma": { @@ -309,7 +309,7 @@ }, "xsmall": { "$type": "number", - "$value": "{base.static.container.xxsmall}", + "$value": "{static.container.xxsmall}", "$description": "Content tokens are generally scoped for the width and height of containers or layout elements. For example, box, card and layout-grids.", "$extensions": { "com.figma": { @@ -321,7 +321,7 @@ }, "small": { "$type": "number", - "$value": "{base.static.container.xsmall}", + "$value": "{static.container.xsmall}", "$description": "Content tokens are generally scoped for the width and height of containers or layout elements. For example, box, card and layout-grids.", "$extensions": { "com.figma": { @@ -333,7 +333,7 @@ }, "smallPlus": { "$type": "number", - "$value": "{base.static.container.small}", + "$value": "{static.container.small}", "$description": "", "$extensions": { "com.figma": { @@ -345,7 +345,7 @@ }, "medium": { "$type": "number", - "$value": "{base.static.container.small}", + "$value": "{static.container.small}", "$description": "Content tokens are generally scoped for the width and height of containers or layout elements. For example, box, card and layout-grids.", "$extensions": { "com.figma": { @@ -357,7 +357,7 @@ }, "mediumPlus": { "$type": "number", - "$value": "{base.static.container.medium}", + "$value": "{static.container.medium}", "$description": "", "$extensions": { "com.figma": { @@ -369,7 +369,7 @@ }, "large": { "$type": "number", - "$value": "{base.static.container.medium}", + "$value": "{static.container.medium}", "$description": "Content tokens are generally scoped for the width and height of containers or layout elements. For example, box, card and layout-grids.", "$extensions": { "com.figma": { @@ -381,7 +381,7 @@ }, "xlarge": { "$type": "number", - "$value": "{base.static.container.large}", + "$value": "{static.container.large}", "$description": "Content tokens are generally scoped for the width and height of containers or layout elements. For example, box, card and layout-grids.", "$extensions": { "com.figma": { @@ -393,7 +393,7 @@ }, "xxlarge": { "$type": "number", - "$value": "{base.static.container.xlarge}", + "$value": "{static.container.xlarge}", "$description": "Content tokens are generally scoped for the width and height of containers or layout elements. For example, box, card and layout-grids.", "$extensions": { "com.figma": { From a1b0965c94d3de7cade1e9c8de9ae4bbb4f84e73 Mon Sep 17 00:00:00 2001 From: taysea Date: Mon, 16 Dec 2024 10:45:51 -0800 Subject: [PATCH 9/9] update changeset --- .changeset/tame-elephants-notice.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.changeset/tame-elephants-notice.md b/.changeset/tame-elephants-notice.md index 95dd533e7..d4c6811da 100644 --- a/.changeset/tame-elephants-notice.md +++ b/.changeset/tame-elephants-notice.md @@ -1,5 +1,5 @@ --- -"hpe-design-tokens": minor +'hpe-design-tokens': minor --- - Added `formField.input.group.container.error.rest` tokens @@ -9,3 +9,4 @@ - Renamed formField "status.critical" tokens to "error.rest" - Renamed formField "disabled" tokens to "disabled.rest" - Renamed formField "readOnly" tokens to "readOnly.rest" +- Renamed `base.static` tokens to `static`.