From ea7701dd151ce7b42c106202be9a10c3d3f9a282 Mon Sep 17 00:00:00 2001 From: taysea Date: Fri, 11 Oct 2024 15:38:05 -0700 Subject: [PATCH 01/29] Update token values for theme update --- .../tokens/component/component.default.json | 3649 +++++++---------- .../tokens/primitive/primitives.base.json | 24 + design-tokens/tokens/semantic/color.dark.json | 246 +- .../tokens/semantic/color.light.json | 274 +- .../tokens/semantic/dimension.large.json | 22 +- .../src/pages/sticker-sheet/index.jsx | 204 +- .../src/pages/sustainability/Devices.jsx | 3 + .../sustainability/SustainabilityInsights.jsx | 18 +- yarn.lock | 375 +- 9 files changed, 2248 insertions(+), 2567 deletions(-) diff --git a/design-tokens/tokens/component/component.default.json b/design-tokens/tokens/component/component.default.json index d1229ffa0..c4295d31e 100644 --- a/design-tokens/tokens/component/component.default.json +++ b/design-tokens/tokens/component/component.default.json @@ -3,29 +3,9 @@ "primary": { "enabled": { "background": { - "$type": "gradient", - "$value": { - "angle": 70, - "stops": [ - { - "color": "{color.transparent}", - "position": 0 - }, - { - "color": "{color.background.primary.default}", - "position": 0.35 - }, - { - "color": "{color.transparent}", - "position": 0.7 - }, - { - "color": "{color.background.primary.default}", - "position": 1 - } - ] - }, - "$description": "For dev use.", + "$type": "color", + "$value": "{color.background.primary.default}", + "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, @@ -72,7 +52,7 @@ }, "fontWeight": { "$type": "number", - "$value": "{fontWeight.bold}", + "$value": "{fontWeight.semibold}", "$description": "", "$extensions": { "com.figma": { @@ -81,18 +61,6 @@ "codeSyntax": {} } } - }, - "backgroundColor": { - "$type": "color", - "$value": "{color.background.primary.default}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], - "codeSyntax": {} - } - } } }, "disabled": { @@ -160,7 +128,7 @@ "hover": { "background": { "$type": "color", - "$value": "{base.color.green.700}", + "$value": "{color.background.primary.hover}", "$description": "", "$extensions": { "com.figma": { @@ -281,6 +249,68 @@ } } } + }, + "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": "#00000000", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } + } + }, + "textColor": { + "$type": "color", + "$value": "{color.text.onSelectedWeak}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } + } + }, + "iconColor": { + "$type": "color", + "$value": "{color.icon.onSelectedWeak}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["SHAPE_FILL", "STROKE_COLOR"], + "codeSyntax": {} + } + } + }, + "fontWeight": { + "$type": "number", + "$value": "{button.primary.enabled.fontWeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_STYLE"], + "codeSyntax": {} + } + } + } } } }, @@ -288,7 +318,7 @@ "enabled": { "background": { "$type": "color", - "$value": "{button.default.enabled.background}", + "$value": "{color.background.contrast}", "$description": "", "$extensions": { "com.figma": { @@ -300,7 +330,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.background.primary.default}", + "$value": "#00000000", "$description": "", "$extensions": { "com.figma": { @@ -312,7 +342,7 @@ }, "textColor": { "$type": "color", - "$value": "{button.default.enabled.textColor}", + "$value": "{color.text.primary}", "$description": "", "$extensions": { "com.figma": { @@ -324,7 +354,7 @@ }, "iconColor": { "$type": "color", - "$value": "{button.default.enabled.iconColor}", + "$value": "{color.icon.primary}", "$description": "", "$extensions": { "com.figma": { @@ -336,7 +366,7 @@ }, "fontWeight": { "$type": "number", - "$value": "{button.default.enabled.fontWeight}", + "$value": "{fontWeight.medium}", "$description": "", "$extensions": { "com.figma": { @@ -350,7 +380,7 @@ "hover": { "background": { "$type": "color", - "$value": "{button.default.enabled.background}", + "$value": "{base.color.grey.600}", "$description": "", "$extensions": { "com.figma": { @@ -362,7 +392,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.selected}", + "$value": "{button.secondary.enabled.borderColor}", "$description": "", "$extensions": { "com.figma": { @@ -374,7 +404,7 @@ }, "textColor": { "$type": "color", - "$value": "{button.default.enabled.textColor}", + "$value": "{button.secondary.enabled.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -386,19 +416,19 @@ }, "iconColor": { "$type": "color", - "$value": "{button.default.enabled.iconColor}", + "$value": "{button.secondary.enabled.iconColor}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "scopes": ["SHAPE_FILL", "STROKE_COLOR"], "codeSyntax": {} } } }, "fontWeight": { "$type": "number", - "$value": "{button.default.enabled.fontWeight}", + "$value": "{button.secondary.enabled.fontWeight}", "$description": "", "$extensions": { "com.figma": { @@ -424,7 +454,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.disabled}", + "$value": "{color.transparent}", "$description": "", "$extensions": { "com.figma": { @@ -516,14 +546,76 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "scopes": ["SHAPE_FILL", "STROKE_COLOR"], "codeSyntax": {} } } }, "fontWeight": { "$type": "number", - "$value": "{button.default.enabled.fontWeight}", + "$value": "{fontWeight.semibold}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_STYLE"], + "codeSyntax": {} + } + } + } + }, + "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": "#00000000", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } + } + }, + "textColor": { + "$type": "color", + "$value": "{color.text.onSelectedWeak}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } + } + }, + "iconColor": { + "$type": "color", + "$value": "{color.icon.onSelectedWeak}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["SHAPE_FILL", "STROKE_COLOR"], + "codeSyntax": {} + } + } + }, + "fontWeight": { + "$type": "number", + "$value": "{fontWeight.semibold}", "$description": "", "$extensions": { "com.figma": { @@ -564,7 +656,7 @@ }, "textColor": { "$type": "color", - "$value": "{color.text.strong}", + "$value": "{color.text.primary}", "$description": "", "$extensions": { "com.figma": { @@ -576,7 +668,7 @@ }, "iconColor": { "$type": "color", - "$value": "{color.icon.strong}", + "$value": "{color.icon.primary}", "$description": "", "$extensions": { "com.figma": { @@ -727,7 +819,7 @@ "enabled": { "background": { "$type": "color", - "$value": "{color.background.active}", + "$value": "{color.background.selected.weak.enabled}", "$description": "", "$extensions": { "com.figma": { @@ -751,7 +843,7 @@ }, "textColor": { "$type": "color", - "$value": "{button.default.enabled.textColor}", + "$value": "{color.text.onSelectedWeak}", "$description": "", "$extensions": { "com.figma": { @@ -763,12 +855,74 @@ }, "iconColor": { "$type": "color", - "$value": "{button.default.enabled.iconColor}", + "$value": "{color.icon.onSelectedWeak}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "scopes": ["SHAPE_FILL", "STROKE_COLOR"], + "codeSyntax": {} + } + } + }, + "fontWeight": { + "$type": "number", + "$value": "{button.default.enabled.fontWeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_STYLE"], + "codeSyntax": {} + } + } + } + }, + "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": "#00000000", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } + } + }, + "textColor": { + "$type": "color", + "$value": "{color.text.onSelectedWeak}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } + } + }, + "iconColor": { + "$type": "color", + "$value": "{color.icon.onSelectedWeak}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["SHAPE_FILL", "STROKE_COLOR"], "codeSyntax": {} } } @@ -792,7 +946,7 @@ "enabled": { "background": { "$type": "color", - "$value": "{color.background.default}", + "$value": "{color.transparent}", "$description": "", "$extensions": { "com.figma": { @@ -804,7 +958,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.default}", + "$value": "{color.border.weak}", "$description": "", "$extensions": { "com.figma": { @@ -816,7 +970,7 @@ }, "textColor": { "$type": "color", - "$value": "{button.default.enabled.textColor}", + "$value": "{color.text.default}", "$description": "", "$extensions": { "com.figma": { @@ -828,7 +982,7 @@ }, "iconColor": { "$type": "color", - "$value": "{button.default.enabled.iconColor}", + "$value": "{color.icon.default}", "$description": "", "$extensions": { "com.figma": { @@ -866,7 +1020,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.disabled}", + "$value": "{color.transparent}", "$description": "", "$extensions": { "com.figma": { @@ -940,7 +1094,7 @@ }, "textColor": { "$type": "color", - "$value": "{button.toolbar.enabled.textColor}", + "$value": "{color.text.default}", "$description": "", "$extensions": { "com.figma": { @@ -952,7 +1106,7 @@ }, "iconColor": { "$type": "color", - "$value": "{button.toolbar.enabled.iconColor}", + "$value": "{color.icon.default}", "$description": "", "$extensions": { "com.figma": { @@ -979,7 +1133,7 @@ "enabled": { "background": { "$type": "color", - "$value": "{button.default.selected.enabled.background}", + "$value": "{color.background.selected.weak.enabled}", "$description": "", "$extensions": { "com.figma": { @@ -991,7 +1145,7 @@ }, "borderColor": { "$type": "color", - "$value": "{button.default.selected.enabled.borderColor}", + "$value": "{color.border.selected}", "$description": "", "$extensions": { "com.figma": { @@ -1003,7 +1157,7 @@ }, "textColor": { "$type": "color", - "$value": "{button.default.selected.enabled.textColor}", + "$value": "{color.text.onSelectedWeak}", "$description": "", "$extensions": { "com.figma": { @@ -1015,7 +1169,7 @@ }, "iconColor": { "$type": "color", - "$value": "{button.default.selected.enabled.iconColor}", + "$value": "{color.text.onSelectedWeak}", "$description": "", "$extensions": { "com.figma": { @@ -1056,7 +1210,7 @@ }, "paddingY": { "$type": "number", - "$value": 4, + "$value": "{button.small.default.paddingY}", "$description": "", "$extensions": { "com.figma": { @@ -1080,7 +1234,7 @@ }, "borderWidth": { "$type": "number", - "$value": 0, + "$value": "{button.small.default.borderWidth}", "$description": "", "$extensions": { "com.figma": { @@ -1655,7 +1809,7 @@ "toolbar": { "paddingX": { "$type": "number", - "$value": "{base.static.spacing.xsmall}", + "$value": "{component.small.paddingX.default}", "$description": "", "$extensions": { "com.figma": { @@ -1913,7 +2067,7 @@ }, "fontSize": { "$type": "number", - "$value": 19, + "$value": "{text.medium.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -2085,7 +2239,7 @@ }, "borderWidth": { "$type": "number", - "$value": 0, + "$value": "{button.medium.default.borderWidth}", "$description": "", "$extensions": { "com.figma": { @@ -2436,35 +2590,12 @@ } } } - }, - "hover": { - "boxShadow": { - "$type": "shadow", - "$value": [ - { - "offsetX": "{base.static.spacing.none}", - "offsetY": "{base.static.spacing.none}", - "blur": "{base.static.spacing.none}", - "spread": "{base.dimension.25}", - "color": "{button.secondary.hover.borderColor}", - "inset": true - } - ], - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["ALL_SCOPES"], - "codeSyntax": {} - } - } - } } }, "toolbar": { "paddingX": { "$type": "number", - "$value": "{button.medium.default.paddingX}", + "$value": "{component.medium.paddingX.default}", "$description": "", "$extensions": { "com.figma": { @@ -2476,7 +2607,7 @@ }, "paddingY": { "$type": "number", - "$value": "{button.medium.default.paddingY}", + "$value": "{component.medium.paddingY}", "$description": "", "$extensions": { "com.figma": { @@ -2488,7 +2619,7 @@ }, "borderRadius": { "$type": "number", - "$value": "{base.static.spacing.xsmall}", + "$value": "{base.static.radius.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -2870,7 +3001,7 @@ }, "paddingY": { "$type": "number", - "$value": 9, + "$value": "{button.large.default.paddingY}", "$description": "", "$extensions": { "com.figma": { @@ -2894,7 +3025,7 @@ }, "borderWidth": { "$type": "number", - "$value": 0, + "$value": "{button.large.default.borderWidth}", "$description": "", "$extensions": { "com.figma": { @@ -3273,7 +3404,7 @@ "toolbar": { "paddingX": { "$type": "number", - "$value": "{base.dimension.250}", + "$value": "{component.large.paddingX.default}", "$description": "", "$extensions": { "com.figma": { @@ -3442,7 +3573,7 @@ }, "paddingX": { "$type": "number", - "$value": 14, + "$value": "{button.large.default.iconOnly.paddingX}", "$description": "", "$extensions": { "com.figma": { @@ -3777,7 +3908,7 @@ }, "paddingY": { "$type": "number", - "$value": 21, + "$value": "{button.xlarge.default.paddingY}", "$description": "", "$extensions": { "com.figma": { @@ -3801,7 +3932,7 @@ }, "borderWidth": { "$type": "number", - "$value": 0, + "$value": "{button.xlarge.default.borderWidth}", "$description": "", "$extensions": { "com.figma": { @@ -4167,12 +4298,12 @@ }, "paddingY": { "$type": "number", - "$value": "{button.xlarge.default.iconOnly.paddingY}", + "$value": 22, "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["GAP"], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -4180,7 +4311,7 @@ }, "paddingX": { "$type": "number", - "$value": "{button.xlarge.default.paddingX}", + "$value": "{component.xlarge.paddingX.default}", "$description": "", "$extensions": { "com.figma": { @@ -4663,12 +4794,96 @@ } } }, - "select": { - "medium": { - "option": { - "paddingX": { + "component": { + "xsmall": { + "minHeight": { + "$type": "number", + "$value": "{base.dimension.600}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, + "textToElementX": { + "$type": "number", + "$value": "{base.static.spacing.xxsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "textToIconX": { + "$type": "number", + "$value": "{base.static.spacing.xxsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "fontSize": { + "$type": "number", + "$value": "{text.xsmall.fontSize}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_SIZE"], + "codeSyntax": {} + } + } + }, + "lineHeight": { + "$type": "number", + "$value": "{text.xsmall.lineHeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["LINE_HEIGHT"], + "codeSyntax": {} + } + } + }, + "borderWidth": { + "$type": "number", + "$value": "{borderWidth.default}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], + "codeSyntax": {} + } + } + }, + "paddingY": { + "$type": "number", + "$value": 3, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "paddingX": { + "narrow": { "$type": "number", - "$value": "{formField.medium.input.container.paddingX}", + "$value": "{base.static.spacing.xxsmall}", "$description": "", "$extensions": { "com.figma": { @@ -4678,9 +4893,9 @@ } } }, - "paddingY": { + "default": { "$type": "number", - "$value": 5, + "$value": "{base.static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -4690,275 +4905,607 @@ } } }, - "minHeight": { + "wide": { "$type": "number", - "$value": "{component.medium.minHeight}", + "$value": 9, "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT"], + "scopes": ["GAP"], "codeSyntax": {} } } - }, - "borderRadius": { - "$type": "number", - "$value": "{radius.none}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["CORNER_RADIUS"], - "codeSyntax": {} - } + } + } + }, + "small": { + "borderWidth": { + "$type": "number", + "$value": "{base.static.borderWidth.default}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], + "codeSyntax": {} } - }, - "borderWidth": { + } + }, + "paddingY": { + "$type": "number", + "$value": 3, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "fontSize": { + "$type": "number", + "$value": "{text.small.fontSize}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_SIZE"], + "codeSyntax": {} + } + } + }, + "lineHeight": { + "$type": "number", + "$value": "{text.small.lineHeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["LINE_HEIGHT"], + "codeSyntax": {} + } + } + }, + "minHeight": { + "$type": "number", + "$value": "{base.dimension.700}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, + "textToElementX": { + "$type": "number", + "$value": "{base.static.spacing.small}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "textToIconX": { + "$type": "number", + "$value": "{base.static.spacing.xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "paddingX": { + "narrow": { "$type": "number", - "$value": "{base.static.borderWidth.xsmall}", + "$value": 5, "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], + "scopes": ["GAP"], "codeSyntax": {} } } }, - "fontSize": { + "default": { "$type": "number", - "$value": "{button.medium.default.fontSize}", + "$value": "{base.static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], + "scopes": ["GAP"], "codeSyntax": {} } } }, - "lineHeight": { + "wide": { "$type": "number", - "$value": "{button.medium.default.lineHeight}", + "$value": 9, "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], + "scopes": ["GAP"], "codeSyntax": {} } } } } }, - "option": { - "enabled": { - "background": { - "$type": "color", - "$value": "#00000000", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } + "medium": { + "fontSize": { + "$type": "number", + "$value": "{text.medium.fontSize}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_SIZE"], + "codeSyntax": {} } - }, - "borderColor": { - "$type": "color", - "$value": "#00000000", + } + }, + "lineHeight": { + "$type": "number", + "$value": "{text.medium.lineHeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["LINE_HEIGHT"], + "codeSyntax": {} + } + } + }, + "minHeight": { + "$type": "number", + "$value": "{base.dimension.900}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, + "textToElementX": { + "$type": "number", + "$value": "{base.static.spacing.small}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "textToIconX": { + "$type": "number", + "$value": "{base.static.spacing.xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "borderWidth": { + "$type": "number", + "$value": "{borderWidth.default}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], + "codeSyntax": {} + } + } + }, + "paddingY": { + "$type": "number", + "$value": 5, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "paddingX": { + "narrow": { + "$type": "number", + "$value": 5, "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "scopes": ["GAP"], "codeSyntax": {} } } }, - "textColor": { - "$type": "color", - "$value": "{color.text.strong}", + "default": { + "$type": "number", + "$value": 10, "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], + "scopes": ["GAP"], "codeSyntax": {} } } }, - "fontWeight": { + "wide": { "$type": "number", - "$value": "{fontWeight.medium}", + "$value": 15, "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["FONT_STYLE"], + "scopes": ["GAP"], "codeSyntax": {} } } } + } + }, + "large": { + "fontSize": { + "$type": "number", + "$value": "{text.large.fontSize}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_SIZE"], + "codeSyntax": {} + } + } }, - "hover": { - "background": { - "$type": "color", - "$value": "{color.background.hover}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } + "lineHeight": { + "$type": "number", + "$value": "{text.xlarge.lineHeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["LINE_HEIGHT"], + "codeSyntax": {} } - }, - "borderColor": { - "$type": "color", - "$value": "#00000000", + } + }, + "minHeight": { + "$type": "number", + "$value": "{base.dimension.1200}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, + "textToElementX": { + "$type": "number", + "$value": "{base.static.spacing.small}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "textToIconX": { + "$type": "number", + "$value": "{base.static.spacing.xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "borderWidth": { + "$type": "number", + "$value": "{borderWidth.default}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], + "codeSyntax": {} + } + } + }, + "paddingY": { + "$type": "number", + "$value": 8, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "paddingX": { + "narrow": { + "$type": "number", + "$value": 9, "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "scopes": ["GAP"], "codeSyntax": {} } } }, - "textColor": { - "$type": "color", - "$value": "{color.text.strong}", + "default": { + "$type": "number", + "$value": 18, "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], + "scopes": ["GAP"], "codeSyntax": {} } } }, - "fontWeight": { + "wide": { "$type": "number", - "$value": "{select.option.enabled.fontWeight}", + "$value": 24, "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["FONT_STYLE"], + "scopes": ["GAP"], "codeSyntax": {} } } } + } + }, + "xlarge": { + "fontSize": { + "$type": "number", + "$value": "{text.xlarge.lineHeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_SIZE"], + "codeSyntax": {} + } + } }, - "disabled": { - "background": { - "$type": "color", - "$value": "{color.background.disabled}", - "$description": "", + "lineHeight": { + "$type": "number", + "$value": "{text.xlarge.lineHeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["LINE_HEIGHT"], + "codeSyntax": {} + } + } + }, + "minHeight": { + "$type": "number", + "$value": "{base.dimension.1800}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, + "textToElementX": { + "$type": "number", + "$value": "{base.static.spacing.small}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "textToIconX": { + "$type": "number", + "$value": "{base.static.spacing.xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "borderWidth": { + "$type": "number", + "$value": "{borderWidth.default}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], + "codeSyntax": {} + } + } + }, + "paddingY": { + "$type": "number", + "$value": 20, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "paddingX": { + "narrow": { + "$type": "number", + "$value": 16, + "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "scopes": ["GAP"], "codeSyntax": {} } } }, - "borderColor": { - "$type": "color", - "$value": "#00000000", + "default": { + "$type": "number", + "$value": 24, "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "scopes": ["GAP"], "codeSyntax": {} } } }, - "textColor": { - "$type": "color", - "$value": "{color.text.disabled}", + "wide": { + "$type": "number", + "$value": 32, "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], + "scopes": ["GAP"], + "codeSyntax": {} + } + } + } + } + } + }, + "select": { + "medium": { + "option": { + "paddingX": { + "$type": "number", + "$value": 11, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], "codeSyntax": {} } } }, - "fontWeight": { + "paddingY": { "$type": "number", - "$value": "{select.option.enabled.fontWeight}", + "$value": 5, "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["FONT_STYLE"], + "scopes": ["GAP"], "codeSyntax": {} } } - } - }, - "selected": { - "enabled": { - "background": { - "$type": "color", - "$value": "{color.background.selected.weak.enabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } + }, + "minHeight": { + "$type": "number", + "$value": "{component.medium.minHeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} } - }, - "borderColor": { - "$type": "color", - "$value": "#00000000", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], - "codeSyntax": {} - } + } + }, + "borderRadius": { + "$type": "number", + "$value": "{radius.none}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["CORNER_RADIUS"], + "codeSyntax": {} } - }, - "textColor": { - "$type": "color", - "$value": "{color.text.onSelectedWeak}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} - } + } + }, + "borderWidth": { + "$type": "number", + "$value": "{base.static.borderWidth.xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], + "codeSyntax": {} } - }, - "fontWeight": { - "$type": "number", - "$value": "{fontWeight.medium}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_STYLE"], - "codeSyntax": {} - } + } + }, + "fontSize": { + "$type": "number", + "$value": "{button.medium.default.fontSize}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_SIZE"], + "codeSyntax": {} + } + } + }, + "lineHeight": { + "$type": "number", + "$value": "{button.medium.default.lineHeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["LINE_HEIGHT"], + "codeSyntax": {} } } } } - } - }, - "checkbox": { - "control": { + }, + "option": { "enabled": { "background": { "$type": "color", @@ -4974,7 +5521,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.default}", + "$value": "#00000000", "$description": "", "$extensions": { "com.figma": { @@ -4983,12 +5530,36 @@ "codeSyntax": {} } } + }, + "textColor": { + "$type": "color", + "$value": "{color.text.strong}", + "$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": {} + } + } } }, "hover": { "background": { "$type": "color", - "$value": "#00000000", + "$value": "{color.background.hover}", "$description": "", "$extensions": { "com.figma": { @@ -5000,7 +5571,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.strong}", + "$value": "#00000000", "$description": "", "$extensions": { "com.figma": { @@ -5009,7 +5580,215 @@ "codeSyntax": {} } } - } + }, + "textColor": { + "$type": "color", + "$value": "{color.text.strong}", + "$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": {} + } + } + } + }, + "disabled": { + "background": { + "$type": "color", + "$value": "{color.background.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "borderColor": { + "$type": "color", + "$value": "#00000000", + "$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": {} + } + } + }, + "fontWeight": { + "$type": "number", + "$value": "{select.option.enabled.fontWeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_STYLE"], + "codeSyntax": {} + } + } + } + }, + "selected": { + "enabled": { + "background": { + "$type": "color", + "$value": "{color.background.selected.weak.enabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "borderColor": { + "$type": "color", + "$value": "#00000000", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } + } + }, + "textColor": { + "$type": "color", + "$value": "{color.text.strong}", + "$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": { + "background": { + "$type": "color", + "$value": "#00000000", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "borderColor": { + "$type": "color", + "$value": "{color.border.default}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } + } + } + }, + "hover": { + "background": { + "$type": "color", + "$value": "{color.background.hover}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "borderColor": { + "$type": "color", + "$value": "{color.border.default}", + "$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": {} + } + } + }, + "borderColor": { + "$type": "color", + "$value": "{color.border.disabled}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} + } + } + } }, "selected": { "enabled": { @@ -5027,7 +5806,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.selected}", + "$value": "{color.background.selected.strong.enabled}", "$description": "", "$extensions": { "com.figma": { @@ -5039,7 +5818,7 @@ }, "iconColor": { "$type": "color", - "$value": "{color.icon.onSelectedStrong}", + "$value": "{color.icon.onPrimary}", "$description": "", "$extensions": { "com.figma": { @@ -5053,7 +5832,7 @@ "hover": { "background": { "$type": "color", - "$value": "{color.background.selected.strong.enabled}", + "$value": "{color.background.selected.strong.hover}", "$description": "", "$extensions": { "com.figma": { @@ -5065,7 +5844,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.strong}", + "$value": "{color.transparent}", "$description": "", "$extensions": { "com.figma": { @@ -5077,7 +5856,7 @@ }, "iconColor": { "$type": "color", - "$value": "{color.icon.onPrimary}", + "$value": "{color.icon.onSelectedStrong}", "$description": "", "$extensions": { "com.figma": { @@ -5127,32 +5906,6 @@ } } }, - "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": {} - } - } - } - }, "indeterminate": { "enabled": { "background": { @@ -5169,7 +5922,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.selected}", + "$value": "{color.transparent}", "$description": "", "$extensions": { "com.figma": { @@ -5354,7 +6107,7 @@ }, "fontWeight": { "$type": "number", - "$value": "{fontWeight.medium}", + "$value": "{fontWeight.regular}", "$description": "", "$extensions": { "com.figma": { @@ -5368,7 +6121,7 @@ "control": { "height": { "$type": "number", - "$value": "{component.medium.lineHeight}", + "$value": "{base.dimension.600}", "$description": "", "$extensions": { "com.figma": { @@ -5380,7 +6133,7 @@ }, "width": { "$type": "number", - "$value": "{component.medium.lineHeight}", + "$value": "{base.dimension.600}", "$description": "", "$extensions": { "com.figma": { @@ -5392,7 +6145,7 @@ }, "borderWidth": { "$type": "number", - "$value": "{borderWidth.default}", + "$value": "{component.medium.borderWidth}", "$description": "", "$extensions": { "com.figma": { @@ -5404,7 +6157,7 @@ }, "borderRadius": { "$type": "number", - "$value": "{base.static.radius.xxsmall}", + "$value": "{base.static.radius.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -5413,17 +6166,29 @@ "codeSyntax": {} } } - } - } - } - }, + }, + "marginY": { + "$type": "number", + "$value": 0, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["CORNER_RADIUS"], + "codeSyntax": {} + } + } + } + } + } + }, "switch": { "control": { "track": { "enabled": { "background": { "$type": "color", - "$value": "{color.background.default}", + "$value": "{base.color.grey.500}", "$description": "", "$extensions": { "com.figma": { @@ -5435,7 +6200,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.default}", + "$value": "{color.transparent}", "$description": "", "$extensions": { "com.figma": { @@ -5449,7 +6214,7 @@ "hover": { "background": { "$type": "color", - "$value": "{color.background.default}", + "$value": "#AAAAAA", "$description": "", "$extensions": { "com.figma": { @@ -5461,7 +6226,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.strong}", + "$value": "{color.transparent}", "$description": "", "$extensions": { "com.figma": { @@ -5487,7 +6252,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.disabled}", + "$value": "{color.transparent}", "$description": "", "$extensions": { "com.figma": { @@ -5514,7 +6279,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.default}", + "$value": "{color.transparent}", "$description": "", "$extensions": { "com.figma": { @@ -5583,7 +6348,7 @@ "enabled": { "background": { "$type": "color", - "$value": "{color.background.front}", + "$value": "{color.background.default}", "$description": "", "$extensions": { "com.figma": { @@ -5595,7 +6360,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.default}", + "$value": "{color.transparent}", "$description": "", "$extensions": { "com.figma": { @@ -5674,7 +6439,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.default}", + "$value": "{color.transparent}", "$description": "", "$extensions": { "com.figma": { @@ -5799,7 +6564,7 @@ }, "width": { "$type": "number", - "$value": 48, + "$value": "{base.dimension.900}", "$description": "", "$extensions": { "com.figma": { @@ -5811,7 +6576,7 @@ }, "height": { "$type": "number", - "$value": 24, + "$value": 20, "$description": "", "$extensions": { "com.figma": { @@ -5887,7 +6652,7 @@ "track": { "height": { "$type": "number", - "$value": "{component.medium.lineHeight}", + "$value": "{base.dimension.600}", "$description": "", "$extensions": { "com.figma": { @@ -5911,7 +6676,7 @@ }, "borderWidth": { "$type": "number", - "$value": "{base.static.borderWidth.default}", + "$value": "{borderWidth.default}", "$description": "", "$extensions": { "com.figma": { @@ -5932,12 +6697,24 @@ "codeSyntax": {} } } + }, + "marginY": { + "$type": "number", + "$value": 0, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["CORNER_RADIUS"], + "codeSyntax": {} + } + } } }, "handle": { "height": { "$type": "number", - "$value": "{component.medium.lineHeight}", + "$value": "{base.dimension.500}", "$description": "", "$extensions": { "com.figma": { @@ -5949,7 +6726,7 @@ }, "width": { "$type": "number", - "$value": "{component.medium.lineHeight}", + "$value": "{base.dimension.500}", "$description": "", "$extensions": { "com.figma": { @@ -6050,7 +6827,7 @@ }, "paddingTop": { "$type": "number", - "$value": "{base.static.spacing.xsmall}", + "$value": "{base.static.spacing.small}", "$description": "", "$extensions": { "com.figma": { @@ -6062,7 +6839,7 @@ }, "paddingBottom": { "$type": "number", - "$value": 5, + "$value": 11, "$description": "", "$extensions": { "com.figma": { @@ -6099,7 +6876,7 @@ }, "borderColor": { "$type": "color", - "$value": "#00000000", + "$value": "{color.border.weak}", "$description": "", "$extensions": { "com.figma": { @@ -6223,18 +7000,6 @@ } } }, - "backgroundColor": { - "$type": "color", - "$value": "{dataCell.enabled.background}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - }, "background": { "$type": "color", "$value": "{dataCell.enabled.background}", @@ -6575,7 +7340,7 @@ "enabled": { "textColor": { "$type": "color", - "$value": "{color.text.strong}", + "$value": "{dataCell.enabled.textColor}", "$description": "", "$extensions": { "com.figma": { @@ -6637,7 +7402,7 @@ }, "background": { "$type": "color", - "$value": "{color.background.hover}", + "$value": "#00000000", "$description": "", "$extensions": { "com.figma": { @@ -6897,7 +7662,7 @@ }, "borderRadius": { "$type": "number", - "$value": "{base.static.radius.xsmall}", + "$value": "{base.dimension.200}", "$description": "", "$extensions": { "com.figma": { @@ -6948,7 +7713,7 @@ }, "fontWeight": { "$type": "number", - "$value": "{fontWeight.medium}", + "$value": "{fontWeight.regular}", "$description": "", "$extensions": { "com.figma": { @@ -7012,7 +7777,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{heading.xsmall.lineHeight}", + "$value": "{text.xsmall.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -7274,7 +8039,7 @@ }, "borderColor": { "$type": "color", - "$value": "#ffffff", + "$value": "#00000000", "$description": "", "$extensions": { "com.figma": { @@ -7461,7 +8226,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.default}", + "$value": "#ffffff", "$description": "", "$extensions": { "com.figma": { @@ -7498,37 +8263,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": {} - } - } - } - }, "status": { "critical": { "background": { "$type": "color", - "$value": "{color.background.critical}", + "$value": "{color.transparent}", "$description": "", "$extensions": { "com.figma": { @@ -7540,7 +8279,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.strong}", + "$value": "{color.border.critical}", "$description": "", "$extensions": { "com.figma": { @@ -7551,6 +8290,32 @@ } } } + }, + "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": {} + } + } + } } } }, @@ -7600,7 +8365,7 @@ "disabled": { "textColor": { "$type": "color", - "$value": "{color.text.strong}", + "$value": "{color.text.disabled}", "$description": "", "$extensions": { "com.figma": { @@ -7644,16 +8409,6 @@ }, "placeholderText": { "disabled": { - "$type": "color", - "$value": "{color.text.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} - } - }, "textColor": { "$type": "color", "$value": "{color.text.disabled}", @@ -7670,7 +8425,7 @@ "enabled": { "textColor": { "$type": "color", - "$value": "{color.text.weak}", + "$value": "{color.text.placeholder}", "$description": "", "$extensions": { "com.figma": { @@ -7684,7 +8439,7 @@ "hover": { "textColor": { "$type": "color", - "$value": "{color.text.weak}", + "$value": "{color.text.placeholder}", "$description": "", "$extensions": { "com.figma": { @@ -7698,7 +8453,7 @@ "focus": { "textColor": { "$type": "color", - "$value": "{color.text.weak}", + "$value": "{color.text.placeholder}", "$description": "", "$extensions": { "com.figma": { @@ -7712,7 +8467,7 @@ "readOnly": { "textColor": { "$type": "color", - "$value": "{color.text.weak}", + "$value": "{color.text.placeholder}", "$description": "", "$extensions": { "com.figma": { @@ -7727,7 +8482,7 @@ "critical": { "textColor": { "$type": "color", - "$value": "{color.text.weak}", + "$value": "{color.text.placeholder}", "$description": "", "$extensions": { "com.figma": { @@ -7920,7 +8675,7 @@ "enabled": { "textColor": { "$type": "color", - "$value": "{color.text.default}", + "$value": "{color.text.critical}", "$description": "", "$extensions": { "com.figma": { @@ -7934,7 +8689,7 @@ "hover": { "textColor": { "$type": "color", - "$value": "{color.text.default}", + "$value": "{color.text.critical}", "$description": "", "$extensions": { "com.figma": { @@ -7948,7 +8703,7 @@ "focus": { "textColor": { "$type": "color", - "$value": "{color.text.default}", + "$value": "{color.text.critical}", "$description": "", "$extensions": { "com.figma": { @@ -7962,7 +8717,7 @@ "disabled": { "textColor": { "$type": "color", - "$value": "{color.text.default}", + "$value": "{color.text.critical}", "$description": "", "$extensions": { "com.figma": { @@ -7976,7 +8731,7 @@ "readOnly": { "textColor": { "$type": "color", - "$value": "{color.text.default}", + "$value": "{color.text.critical}", "$description": "", "$extensions": { "com.figma": { @@ -7991,7 +8746,7 @@ "critical": { "textColor": { "$type": "color", - "$value": "{color.text.default}", + "$value": "{color.text.critical}", "$description": "", "$extensions": { "com.figma": { @@ -8348,7 +9103,7 @@ "hover": { "background": { "$type": "color", - "$value": "#00000000", + "$value": "{color.background.hover}", "$description": "", "$extensions": { "com.figma": { @@ -8360,7 +9115,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.border.strong}", + "$value": "{color.border.default}", "$description": "", "$extensions": { "com.figma": { @@ -8416,1231 +9171,161 @@ "$description": "", "$extensions": { "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], - "codeSyntax": {} - } - } - } - }, - "selected": { - "enabled": { - "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.selected}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], - "codeSyntax": {} - } - } - }, - "iconColor": { - "$type": "color", - "$value": "{color.icon.brand}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["SHAPE_FILL", "STROKE_COLOR"], - "codeSyntax": {} - } - } - } - }, - "hover": { - "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.strong}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], - "codeSyntax": {} - } - } - }, - "iconColor": { - "$type": "color", - "$value": "{color.icon.brand}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["SHAPE_FILL", "STROKE_COLOR"], - "codeSyntax": {} - } - } - } - }, - "focus": { - "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.selected}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - }, - "iconColor": { - "$type": "color", - "$value": "{color.icon.brand}", - "$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": {} - } - } - }, - "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": { - "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": {} - } - } - } - }, - "disabled": { - "textColor": { - "$type": "color", - "$value": "{color.text.disabled}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} - } - } - } - } - }, - "medium": { - "gapX": { - "$type": "number", - "$value": "{base.static.spacing.small}", - "$description": "Space between checkbox control and value (label)", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "label": { - "fontSize": { - "$type": "number", - "$value": "{component.medium.fontSize}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{component.medium.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "fontWeight": { - "$type": "number", - "$value": "{fontWeight.medium}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_STYLE"], - "codeSyntax": {} - } - } - } - }, - "control": { - "height": { - "$type": "number", - "$value": "{component.medium.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT"], - "codeSyntax": {} - } - } - }, - "width": { - "$type": "number", - "$value": "{component.medium.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT"], - "codeSyntax": {} - } - } - }, - "borderWidth": { - "$type": "number", - "$value": "{borderWidth.default}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], - "codeSyntax": {} - } - } - }, - "borderRadius": { - "$type": "number", - "$value": "{radius.full}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["CORNER_RADIUS"], - "codeSyntax": {} - } - } - } - } - } - }, - "anchor": { - "default": { - "enabled": { - "textColor": { - "$type": "color", - "$value": "{color.text.strong}", - "$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": {} - } - } - }, - "textDecoration": { - "$type": "string", - "$value": "underline", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": true, - "scopes": [], - "codeSyntax": {} - } - } - } - }, - "hover": { - "textColor": { - "$type": "color", - "$value": "{color.text.strong}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} - } - } - }, - "fontWeight": { - "$type": "number", - "$value": "{fontWeight.medium}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": [], - "codeSyntax": {} - } - } - }, - "textDecoration": { - "$type": "string", - "$value": "underline", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": true, - "scopes": [], - "codeSyntax": {} - } - } - } - }, - "disabled": { - "textColor": { - "$type": "color", - "$value": "{color.text.strong}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} - } - } - }, - "fontWeight": { - "$type": "number", - "$value": "{fontWeight.medium}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": [], - "codeSyntax": {} - } - } - }, - "textDecoration": { - "$type": "string", - "$value": "underline", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": true, - "scopes": [], - "codeSyntax": {} - } - } - } - } - }, - "emphasized": { - "enabled": { - "textColor": { - "$type": "color", - "$value": "{color.text.brand}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} - } - } - }, - "fontWeight": { - "$type": "number", - "$value": "{fontWeight.bold}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": [], - "codeSyntax": {} - } - } - }, - "textDecoration": { - "$type": "string", - "$value": "none", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": true, - "scopes": [], - "codeSyntax": {} - } - } - } - }, - "hover": { - "textColor": { - "$type": "color", - "$value": "{color.text.brand}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} - } - } - }, - "fontWeight": { - "$type": "number", - "$value": "{fontWeight.bold}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": [], - "codeSyntax": {} - } - } - }, - "textDecoration": { - "$type": "string", - "$value": "underline", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": true, - "scopes": [], - "codeSyntax": {} - } - } - } - }, - "disabled": { - "textColor": { - "$type": "color", - "$value": "{color.text.brand}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], - "codeSyntax": {} - } - } - }, - "fontWeight": { - "$type": "number", - "$value": "{fontWeight.bold}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": [], - "codeSyntax": {} - } - } - } - }, - "small": { - "default": { - "fontSize": { - "$type": "number", - "$value": "{component.small.fontSize}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{component.small.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "gapX": { - "$type": "number", - "$value": "{component.small.textToIconX}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - } - }, - "emphasized": { - "fontSize": { - "$type": "number", - "$value": "{component.small.fontSize}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{component.small.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "gapX": { - "$type": "number", - "$value": "{component.small.textToIconX}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - } - } - }, - "medium": { - "default": { - "fontSize": { - "$type": "number", - "$value": "{component.medium.fontSize}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{component.medium.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "gapX": { - "$type": "number", - "$value": "{component.medium.textToIconX}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - } - }, - "emphasized": { - "fontSize": { - "$type": "number", - "$value": "{component.medium.fontSize}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{component.medium.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "gapX": { - "$type": "number", - "$value": "{component.medium.textToIconX}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - } - } - }, - "large": { - "default": { - "fontSize": { - "$type": "number", - "$value": "{component.large.fontSize}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{component.large.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "gapX": { - "$type": "number", - "$value": "{component.large.textToIconX}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - } - }, - "emphasized": { - "fontSize": { - "$type": "number", - "$value": "{component.large.fontSize}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{component.large.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "gapX": { - "$type": "number", - "$value": "{component.large.textToIconX}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - } - } - }, - "xlarge": { - "default": { - "fontSize": { - "$type": "number", - "$value": "{component.xlarge.fontSize}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{component.xlarge.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "gapX": { - "$type": "number", - "$value": "{component.xlarge.textToIconX}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - } - }, - "emphasized": { - "fontSize": { - "$type": "number", - "$value": "{component.xlarge.fontSize}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{component.xlarge.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "gapX": { - "$type": "number", - "$value": "{component.xlarge.textToIconX}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - } - } - }, - "xxlarge": { - "default": { - "fontSize": { - "$type": "number", - "$value": "{text.xxlarge.fontSize}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{text.xxlarge.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "gapX": { - "$type": "number", - "$value": "{component.xlarge.textToIconX}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - } - }, - "emphasized": { - "fontSize": { - "$type": "number", - "$value": "{text.xxlarge.fontSize}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{text.xxlarge.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "gapX": { - "$type": "number", - "$value": "{component.xlarge.textToIconX}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - } - } - }, - "3xlarge": { - "default": { - "fontSize": { - "$type": "number", - "$value": "{text.3xl.fontSize}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{text.3xl.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "gapX": { - "$type": "number", - "$value": "{component.xlarge.textToIconX}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - } - }, - "emphasized": { - "fontSize": { - "$type": "number", - "$value": "{text.3xl.fontSize}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{text.3xl.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "gapX": { - "$type": "number", - "$value": "{component.xlarge.textToIconX}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - } - } - }, - "4xlarge": { - "default": { - "fontSize": { - "$type": "number", - "$value": "{text.4xl.fontSize}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{text.4xl.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "gapX": { - "$type": "number", - "$value": "{component.xlarge.textToIconX}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - } - }, - "emphasized": { - "fontSize": { - "$type": "number", - "$value": "{text.4xl.fontSize}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{text.4xl.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "gapX": { - "$type": "number", - "$value": "{component.xlarge.textToIconX}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } + "hiddenFromPublishing": false, + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], + "codeSyntax": {} } } } }, - "5xlarge": { - "default": { - "fontSize": { - "$type": "number", - "$value": "{text.5xl.fontSize}", + "selected": { + "enabled": { + "background": { + "$type": "color", + "$value": "{color.background.default}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], + "scopes": ["FRAME_FILL", "SHAPE_FILL"], "codeSyntax": {} } } }, - "lineHeight": { - "$type": "number", - "$value": "{text.5xl.lineHeight}", + "borderColor": { + "$type": "color", + "$value": "{color.border.selected}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], "codeSyntax": {} } } }, - "gapX": { - "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "iconColor": { + "$type": "color", + "$value": "{color.icon.onSelectedStrong}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["GAP"], + "scopes": ["SHAPE_FILL", "STROKE_COLOR"], "codeSyntax": {} } } } }, - "emphasized": { - "fontSize": { - "$type": "number", - "$value": "{text.5xl.fontSize}", + "hover": { + "background": { + "$type": "color", + "$value": "{color.background.default}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], + "scopes": ["FRAME_FILL", "SHAPE_FILL"], "codeSyntax": {} } } }, - "lineHeight": { - "$type": "number", - "$value": "{text.5xl.lineHeight}", + "borderColor": { + "$type": "color", + "$value": "{color.border.selected}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], "codeSyntax": {} } } }, - "gapX": { - "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "iconColor": { + "$type": "color", + "$value": "{color.icon.onSelectedStrong}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["GAP"], + "scopes": ["SHAPE_FILL", "STROKE_COLOR"], "codeSyntax": {} } } } - } - }, - "6xlarge": { - "default": { - "fontSize": { - "$type": "number", - "$value": "{text.6xl.fontSize}", + }, + "focus": { + "background": { + "$type": "color", + "$value": "{color.background.default}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], + "scopes": ["FRAME_FILL", "SHAPE_FILL"], "codeSyntax": {} } } }, - "lineHeight": { - "$type": "number", - "$value": "{text.6xl.lineHeight}", + "borderColor": { + "$type": "color", + "$value": "{color.border.selected}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], + "scopes": ["FRAME_FILL", "SHAPE_FILL"], "codeSyntax": {} } } }, - "gapX": { - "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "iconColor": { + "$type": "color", + "$value": "{color.icon.onSelectedStrong}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["GAP"], + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], "codeSyntax": {} } } } }, - "emphasized": { - "fontSize": { - "$type": "number", - "$value": "{text.6xl.fontSize}", + "disabled": { + "background": { + "$type": "color", + "$value": "{color.background.disabled}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], + "scopes": ["FRAME_FILL", "SHAPE_FILL"], "codeSyntax": {} } } }, - "lineHeight": { - "$type": "number", - "$value": "{text.6xl.lineHeight}", + "borderColor": { + "$type": "color", + "$value": "{color.border.disabled}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], + "scopes": ["STROKE_COLOR", "EFFECT_COLOR"], "codeSyntax": {} } } }, - "gapX": { - "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "iconColor": { + "$type": "color", + "$value": "{color.icon.disabled}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["GAP"], + "scopes": ["SHAPE_FILL", "STROKE_COLOR"], "codeSyntax": {} } } @@ -9648,49 +9333,67 @@ } } }, - "small": { - "default": { - "fontSize": { - "$type": "number", - "$value": "{component.small.fontSize}", + "label": { + "enabled": { + "textColor": { + "$type": "color", + "$value": "{color.text.default}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], + "scopes": ["TEXT_FILL"], "codeSyntax": {} } } - }, - "lineHeight": { - "$type": "number", - "$value": "{component.small.lineHeight}", + } + }, + "hover": { + "textColor": { + "$type": "color", + "$value": "{color.text.default}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], + "scopes": ["TEXT_FILL"], "codeSyntax": {} } } - }, - "gapX": { - "$type": "number", - "$value": "{component.small.textToIconX}", + } + }, + "disabled": { + "textColor": { + "$type": "color", + "$value": "{color.text.disabled}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["GAP"], + "scopes": ["TEXT_FILL"], "codeSyntax": {} } } } + } + }, + "medium": { + "gapX": { + "$type": "number", + "$value": "{base.static.spacing.small}", + "$description": "Space between checkbox control and value (label)", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } }, - "emphasized": { + "label": { "fontSize": { "$type": "number", - "$value": "{component.small.fontSize}", + "$value": "{component.medium.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -9702,7 +9405,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.small.lineHeight}", + "$value": "{component.medium.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -9712,259 +9415,285 @@ } } }, - "gapX": { + "fontWeight": { "$type": "number", - "$value": "{component.small.textToIconX}", + "$value": "{fontWeight.regular}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["GAP"], + "scopes": ["FONT_STYLE"], "codeSyntax": {} } } } - } - }, - "medium": { - "default": { - "fontSize": { + }, + "control": { + "height": { "$type": "number", - "$value": "{component.medium.fontSize}", + "$value": "{base.dimension.600}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], + "scopes": ["WIDTH_HEIGHT"], "codeSyntax": {} } } }, - "lineHeight": { + "width": { "$type": "number", - "$value": "{component.medium.lineHeight}", + "$value": "{base.dimension.600}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], + "scopes": ["WIDTH_HEIGHT"], "codeSyntax": {} } } }, - "gapX": { + "borderWidth": { "$type": "number", - "$value": "{component.medium.textToIconX}", + "$value": "{base.static.borderWidth.large}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["GAP"], + "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], "codeSyntax": {} } } - } - }, - "emphasized": { - "fontSize": { + }, + "borderRadius": { "$type": "number", - "$value": "{component.medium.fontSize}", + "$value": "{radius.full}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], + "scopes": ["CORNER_RADIUS"], "codeSyntax": {} } } - }, - "lineHeight": { - "$type": "number", - "$value": "{component.medium.lineHeight}", + } + } + } + }, + "anchor": { + "default": { + "enabled": { + "textColor": { + "$type": "color", + "$value": "{color.text.primary}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], + "scopes": ["TEXT_FILL"], "codeSyntax": {} } } }, - "gapX": { + "fontWeight": { "$type": "number", - "$value": "{component.medium.textToIconX}", + "$value": "{fontWeight.medium}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["GAP"], + "scopes": ["FONT_STYLE"], + "codeSyntax": {} + } + } + }, + "textDecoration": { + "$type": "string", + "$value": "none", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": true, + "scopes": [], "codeSyntax": {} } } } - } - }, - "large": { - "default": { - "fontSize": { - "$type": "number", - "$value": "{component.large.fontSize}", + }, + "hover": { + "textColor": { + "$type": "color", + "$value": "{anchor.default.enabled.textColor}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], + "scopes": ["TEXT_FILL"], "codeSyntax": {} } } }, - "lineHeight": { + "fontWeight": { "$type": "number", - "$value": "{component.large.lineHeight}", + "$value": "{anchor.default.enabled.fontWeight}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], + "scopes": [], "codeSyntax": {} } } }, - "gapX": { - "$type": "number", - "$value": "{component.large.textToIconX}", + "textDecoration": { + "$type": "string", + "$value": "underline", "$description": "", "$extensions": { "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], + "hiddenFromPublishing": true, + "scopes": [], "codeSyntax": {} } } } - }, - "emphasized": { - "fontSize": { - "$type": "number", - "$value": "{component.large.fontSize}", + }, + "disabled": { + "textColor": { + "$type": "color", + "$value": "{color.text.disabled}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], + "scopes": ["TEXT_FILL"], "codeSyntax": {} } } }, - "lineHeight": { + "fontWeight": { "$type": "number", - "$value": "{component.large.lineHeight}", + "$value": "{anchor.default.enabled.fontWeight}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], + "scopes": [], "codeSyntax": {} } } }, - "gapX": { - "$type": "number", - "$value": "{component.large.textToIconX}", + "textDecoration": { + "$type": "string", + "$value": "none", "$description": "", "$extensions": { "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], + "hiddenFromPublishing": true, + "scopes": [], "codeSyntax": {} } } } } }, - "xlarge": { - "default": { - "fontSize": { - "$type": "number", - "$value": "{component.xlarge.fontSize}", + "emphasized": { + "enabled": { + "textColor": { + "$type": "color", + "$value": "{color.text.brand}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], + "scopes": ["TEXT_FILL"], "codeSyntax": {} } } }, - "lineHeight": { + "fontWeight": { "$type": "number", - "$value": "{component.xlarge.lineHeight}", + "$value": "{fontWeight.bold}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], + "scopes": [], "codeSyntax": {} } } - }, - "gapX": { - "$type": "number", - "$value": "{component.xlarge.textToIconX}", + } + }, + "hover": { + "textColor": { + "$type": "color", + "$value": "{color.text.brand}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["GAP"], + "scopes": ["TEXT_FILL"], "codeSyntax": {} } } - } - }, - "emphasized": { - "fontSize": { + }, + "fontWeight": { "$type": "number", - "$value": "{component.xlarge.fontSize}", + "$value": "{fontWeight.bold}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], + "scopes": [], "codeSyntax": {} } } }, - "lineHeight": { - "$type": "number", - "$value": "{component.xlarge.lineHeight}", + "textDecoration": { + "$type": "string", + "$value": "none", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": true, + "scopes": [], + "codeSyntax": {} + } + } + } + }, + "disabled": { + "textColor": { + "$type": "color", + "$value": "{color.text.brand}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], + "scopes": ["TEXT_FILL"], "codeSyntax": {} } } }, - "gapX": { + "fontWeight": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{fontWeight.bold}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["GAP"], + "scopes": [], "codeSyntax": {} } } } } }, - "xxlarge": { + "small": { "default": { "fontSize": { "$type": "number", - "$value": "{text.xxlarge.fontSize}", + "$value": "{component.small.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -9976,7 +9705,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{text.xxlarge.lineHeight}", + "$value": "{component.small.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -9988,7 +9717,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{component.small.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10002,7 +9731,7 @@ "emphasized": { "fontSize": { "$type": "number", - "$value": "{text.xxlarge.fontSize}", + "$value": "{component.small.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -10014,7 +9743,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{text.xxlarge.lineHeight}", + "$value": "{component.small.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10026,7 +9755,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{component.small.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10038,11 +9767,11 @@ } } }, - "3xlarge": { + "medium": { "default": { "fontSize": { "$type": "number", - "$value": "{text.3xl.fontSize}", + "$value": "{component.medium.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -10054,7 +9783,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{text.3xl.lineHeight}", + "$value": "{component.medium.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10066,7 +9795,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{component.medium.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10080,7 +9809,7 @@ "emphasized": { "fontSize": { "$type": "number", - "$value": "{text.3xl.fontSize}", + "$value": "{component.medium.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -10092,7 +9821,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{text.3xl.lineHeight}", + "$value": "{component.medium.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10104,7 +9833,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{component.medium.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10116,11 +9845,11 @@ } } }, - "4xlarge": { + "large": { "default": { "fontSize": { "$type": "number", - "$value": "{text.4xl.fontSize}", + "$value": "{component.large.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -10132,7 +9861,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{text.4xl.lineHeight}", + "$value": "{component.large.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10144,7 +9873,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{component.large.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10158,7 +9887,7 @@ "emphasized": { "fontSize": { "$type": "number", - "$value": "{text.4xl.fontSize}", + "$value": "{component.large.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -10170,7 +9899,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{text.4xl.lineHeight}", + "$value": "{component.large.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10182,7 +9911,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{component.large.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10194,11 +9923,11 @@ } } }, - "5xlarge": { + "xlarge": { "default": { "fontSize": { "$type": "number", - "$value": "{text.5xl.fontSize}", + "$value": "{component.xlarge.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -10210,7 +9939,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{text.5xl.lineHeight}", + "$value": "{component.xlarge.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10236,7 +9965,7 @@ "emphasized": { "fontSize": { "$type": "number", - "$value": "{text.5xl.fontSize}", + "$value": "{component.xlarge.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -10248,7 +9977,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{text.5xl.lineHeight}", + "$value": "{component.xlarge.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10272,11 +10001,11 @@ } } }, - "6xlarge": { + "xxlarge": { "default": { "fontSize": { "$type": "number", - "$value": "{text.6xl.fontSize}", + "$value": "{text.xxlarge.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -10288,7 +10017,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{text.6xl.lineHeight}", + "$value": "{text.xxlarge.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10314,7 +10043,7 @@ "emphasized": { "fontSize": { "$type": "number", - "$value": "{text.6xl.fontSize}", + "$value": "{text.xxlarge.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -10326,7 +10055,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{text.6xl.lineHeight}", + "$value": "{text.xxlarge.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10349,122 +10078,74 @@ } } } - } - }, - "component": { - "xsmall": { - "minHeight": { - "$type": "number", - "$value": "{base.dimension.600}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT"], - "codeSyntax": {} - } - } - }, - "textToElementX": { - "$type": "number", - "$value": "{base.static.spacing.xxsmall}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "textToIconX": { - "$type": "number", - "$value": "{base.static.spacing.xxsmall}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "fontSize": { - "$type": "number", - "$value": "{text.xsmall.fontSize}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{text.xsmall.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "borderWidth": { - "$type": "number", - "$value": "{borderWidth.default}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], - "codeSyntax": {} + }, + "3xlarge": { + "default": { + "fontSize": { + "$type": "number", + "$value": "{text.3xl.fontSize}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_SIZE"], + "codeSyntax": {} + } } - } - }, - "paddingY": { - "$type": "number", - "$value": 3, - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} + }, + "lineHeight": { + "$type": "number", + "$value": "{text.3xl.lineHeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["LINE_HEIGHT"], + "codeSyntax": {} + } + } + }, + "gapX": { + "$type": "number", + "$value": "{component.xlarge.textToIconX}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } } } }, - "paddingX": { - "narrow": { + "emphasized": { + "fontSize": { "$type": "number", - "$value": "{base.static.spacing.xxsmall}", + "$value": "{text.3xl.fontSize}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["GAP"], + "scopes": ["FONT_SIZE"], "codeSyntax": {} } } }, - "default": { + "lineHeight": { "$type": "number", - "$value": "{base.static.spacing.xsmall}", + "$value": "{text.3xl.lineHeight}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["GAP"], + "scopes": ["LINE_HEIGHT"], "codeSyntax": {} } } }, - "wide": { + "gapX": { "$type": "number", - "$value": 9, + "$value": "{component.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10476,119 +10157,35 @@ } } }, - "small": { - "borderWidth": { - "$type": "number", - "$value": "{base.static.borderWidth.default}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], - "codeSyntax": {} - } - } - }, - "paddingY": { - "$type": "number", - "$value": 3, - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "fontSize": { - "$type": "number", - "$value": "{text.small.fontSize}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{text.small.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "minHeight": { - "$type": "number", - "$value": "{base.dimension.700}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT"], - "codeSyntax": {} - } - } - }, - "textToElementX": { - "$type": "number", - "$value": "{base.static.spacing.small}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "textToIconX": { - "$type": "number", - "$value": "{base.static.spacing.xsmall}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "paddingX": { - "narrow": { + "4xlarge": { + "default": { + "fontSize": { "$type": "number", - "$value": 5, + "$value": "{text.4xl.fontSize}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["GAP"], + "scopes": ["FONT_SIZE"], "codeSyntax": {} } } }, - "default": { + "lineHeight": { "$type": "number", - "$value": "{base.static.spacing.xsmall}", + "$value": "{text.4xl.lineHeight}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["GAP"], + "scopes": ["LINE_HEIGHT"], "codeSyntax": {} } } }, - "wide": { + "gapX": { "$type": "number", - "$value": 9, + "$value": "{component.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10598,121 +10195,75 @@ } } } - } - }, - "medium": { - "fontSize": { - "$type": "number", - "$value": "{text.medium.fontSize}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{text.medium.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "minHeight": { - "$type": "number", - "$value": "{base.dimension.900}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT"], - "codeSyntax": {} - } - } }, - "textToElementX": { - "$type": "number", - "$value": "{base.static.spacing.small}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "textToIconX": { - "$type": "number", - "$value": "{base.static.spacing.xsmall}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} + "emphasized": { + "fontSize": { + "$type": "number", + "$value": "{text.4xl.fontSize}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_SIZE"], + "codeSyntax": {} + } } - } - }, - "borderWidth": { - "$type": "number", - "$value": "{borderWidth.default}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], - "codeSyntax": {} + }, + "lineHeight": { + "$type": "number", + "$value": "{text.4xl.lineHeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["LINE_HEIGHT"], + "codeSyntax": {} + } } - } - }, - "paddingY": { - "$type": "number", - "$value": 5, - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} + }, + "gapX": { + "$type": "number", + "$value": "{component.xlarge.textToIconX}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } } - } - }, - "paddingX": { - "narrow": { + } + } + }, + "5xlarge": { + "default": { + "fontSize": { "$type": "number", - "$value": 5, + "$value": "{text.5xl.fontSize}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["GAP"], + "scopes": ["FONT_SIZE"], "codeSyntax": {} } } }, - "default": { + "lineHeight": { "$type": "number", - "$value": 10, + "$value": "{text.5xl.lineHeight}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["GAP"], + "scopes": ["LINE_HEIGHT"], "codeSyntax": {} } } }, - "wide": { + "gapX": { "$type": "number", - "$value": 15, + "$value": "{component.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10722,121 +10273,35 @@ } } } - } - }, - "large": { - "fontSize": { - "$type": "number", - "$value": "{text.large.fontSize}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{text.xlarge.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "minHeight": { - "$type": "number", - "$value": "{base.dimension.1200}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT"], - "codeSyntax": {} - } - } - }, - "textToElementX": { - "$type": "number", - "$value": "{base.static.spacing.small}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "textToIconX": { - "$type": "number", - "$value": "{base.static.spacing.xsmall}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "borderWidth": { - "$type": "number", - "$value": "{borderWidth.default}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], - "codeSyntax": {} - } - } - }, - "paddingY": { - "$type": "number", - "$value": 8, - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } }, - "paddingX": { - "narrow": { + "emphasized": { + "fontSize": { "$type": "number", - "$value": 9, + "$value": "{text.5xl.fontSize}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["GAP"], + "scopes": ["FONT_SIZE"], "codeSyntax": {} } } }, - "default": { + "lineHeight": { "$type": "number", - "$value": 18, + "$value": "{text.5xl.lineHeight}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["GAP"], + "scopes": ["LINE_HEIGHT"], "codeSyntax": {} } } }, - "wide": { + "gapX": { "$type": "number", - "$value": 24, + "$value": "{component.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10848,119 +10313,73 @@ } } }, - "xlarge": { - "fontSize": { - "$type": "number", - "$value": "{text.xlarge.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{text.xlarge.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "minHeight": { - "$type": "number", - "$value": "{base.dimension.1800}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT"], - "codeSyntax": {} - } - } - }, - "textToElementX": { - "$type": "number", - "$value": "{base.static.spacing.small}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "textToIconX": { - "$type": "number", - "$value": "{base.static.spacing.xsmall}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} + "6xlarge": { + "default": { + "fontSize": { + "$type": "number", + "$value": "{text.6xl.fontSize}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_SIZE"], + "codeSyntax": {} + } } - } - }, - "borderWidth": { - "$type": "number", - "$value": "{borderWidth.default}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], - "codeSyntax": {} + }, + "lineHeight": { + "$type": "number", + "$value": "{text.6xl.lineHeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["LINE_HEIGHT"], + "codeSyntax": {} + } } - } - }, - "paddingY": { - "$type": "number", - "$value": 20, - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} + }, + "gapX": { + "$type": "number", + "$value": "{component.xlarge.textToIconX}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } } } }, - "paddingX": { - "narrow": { + "emphasized": { + "fontSize": { "$type": "number", - "$value": 16, + "$value": "{text.6xl.fontSize}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["GAP"], + "scopes": ["FONT_SIZE"], "codeSyntax": {} } } }, - "default": { + "lineHeight": { "$type": "number", - "$value": 24, + "$value": "{text.6xl.lineHeight}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["GAP"], + "scopes": ["LINE_HEIGHT"], "codeSyntax": {} } } }, - "wide": { + "gapX": { "$type": "number", - "$value": 32, + "$value": "{component.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { diff --git a/design-tokens/tokens/primitive/primitives.base.json b/design-tokens/tokens/primitive/primitives.base.json index 9faab8f20..6b9aaf1a7 100644 --- a/design-tokens/tokens/primitive/primitives.base.json +++ b/design-tokens/tokens/primitive/primitives.base.json @@ -742,6 +742,18 @@ } } }, + "800": { + "$type": "color", + "$value": "#006750", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, "900": { "$type": "color", "$value": "#074b3b", @@ -1136,6 +1148,18 @@ } } }, + "600": { + "$type": "color", + "$value": "#EBEBEB", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, "700": { "$type": "color", "$value": "#757575", diff --git a/design-tokens/tokens/semantic/color.dark.json b/design-tokens/tokens/semantic/color.dark.json index 9b29637f5..80f01e4c6 100644 --- a/design-tokens/tokens/semantic/color.dark.json +++ b/design-tokens/tokens/semantic/color.dark.json @@ -88,7 +88,7 @@ "overlay": { "$type": "color", "$value": "{base.color.black.opacity12}", - "$description": "Elevation level 3. The highest level of elevation for elements that sit above everything else. Example: dropdowns, layer, side drawers and floating buttons.", + "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, @@ -109,51 +109,9 @@ } } }, - "selected": { - "strong": { - "enabled": { - "$type": "color", - "$value": "{base.color.brand}", - "$description": "Selected (or checked) colour. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggle, active tabs.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - } - }, - "weak": { - "enabled": { - "$type": "color", - "$value": "{base.color.green.1000}", - "$description": "Lower emphasis variant of selected colour. Use if selection colour needs to be less prominent.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - }, - "hover": { - "$type": "color", - "$value": "{base.color.green.900}", - "$description": "Lower emphasis variant of selected colour. Use if selection colour needs to be less prominent.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - } - } - }, - "ok": { + "info": { "$type": "color", - "$value": "{base.color.green.500-Opacity30}", + "$value": "{base.color.blue.400-Opacity12}", "$description": "", "$extensions": { "com.figma": { @@ -163,35 +121,9 @@ } } }, - "primary": { - "default": { - "$type": "color", - "$value": "{base.color.green.600}", - "$description": "The default primary color of components at a rest/ enabled state. The term ‘primary’ denoting hierarchy - the most important thing. Use to style components prominently and give greater visual hierarchy.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - }, - "hover": { - "$type": "color", - "$value": "{TBD}", - "$description": "Hover color variant of the primary color.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - } - }, - "info": { + "unknown": { "$type": "color", - "$value": "{base.color.blue.400-Opacity12}", + "$value": "{base.color.grey.1200}", "$description": "", "$extensions": { "com.figma": { @@ -201,9 +133,9 @@ } } }, - "warning": { + "ok": { "$type": "color", - "$value": "{base.color.yellow.400-Opacity12}", + "$value": "{base.color.green.500-Opacity30}", "$description": "", "$extensions": { "com.figma": { @@ -225,9 +157,9 @@ } } }, - "unknown": { + "warning": { "$type": "color", - "$value": "{base.color.grey.1200}", + "$value": "{base.color.yellow.400-Opacity12}", "$description": "", "$extensions": { "com.figma": { @@ -236,6 +168,74 @@ "codeSyntax": {} } } + }, + "primary": { + "default": { + "$type": "color", + "$value": "{base.color.green.700}", + "$description": "The default primary color of components at a rest/ enabled state. The term ‘primary’ denoting hierarchy - the most important thing. Use to style components prominently and give greater visual hierarchy.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "hover": { + "$type": "color", + "$value": "{base.color.green.900}", + "$description": "Hover color variant of the primary color.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + } + }, + "selected": { + "strong": { + "enabled": { + "$type": "color", + "$value": "{base.color.brand}", + "$description": "Selected (or checked) colour. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggle, active tabs.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + } + }, + "weak": { + "enabled": { + "$type": "color", + "$value": "{base.color.green.1000}", + "$description": "Lower emphasis variant of selected colour. Use if selection colour needs to be less prominent.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "hover": { + "$type": "color", + "$value": "{base.color.green.900}", + "$description": "Lower emphasis variant of selected colour. Use if selection colour needs to be less prominent.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + } + } } }, "border": { @@ -433,6 +433,18 @@ } } }, + "primary": { + "$type": "color", + "$value": "{base.color.green.800}", + "$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": {} + } + } + }, "onPrimary": { "$type": "color", "$value": "{base.color.white.100}", @@ -580,6 +592,66 @@ "codeSyntax": {} } } + }, + "onCritical": { + "$type": "color", + "$value": "{color.text.default}", + "$description": "Text color to be used on status backgrounds.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } + } + }, + "onWarning": { + "$type": "color", + "$value": "{color.text.default}", + "$description": "Text color to be used on status backgrounds.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } + } + }, + "onOk": { + "$type": "color", + "$value": "{color.text.default}", + "$description": "Text color to be used on status backgrounds.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } + } + }, + "onInfo": { + "$type": "color", + "$value": "{color.text.default}", + "$description": "Text color to be used on status backgrounds.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } + } + }, + "onUnknown": { + "$type": "color", + "$value": "{color.text.default}", + "$description": "Text color to be used on status backgrounds.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } + } } }, "icon": { @@ -645,7 +717,7 @@ }, "critical": { "$type": "color", - "$value": "{base.color.red.750}", + "$value": "{base.color.red.700}", "$description": "", "$extensions": { "com.figma": { @@ -693,7 +765,7 @@ }, "unknown": { "$type": "color", - "$value": "{base.color.grey.700}", + "$value": "{base.color.grey.800}", "$description": "", "$extensions": { "com.figma": { @@ -703,6 +775,18 @@ } } }, + "primary": { + "$type": "color", + "$value": "{base.color.green.800}", + "$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": {} + } + } + }, "onPrimary": { "$type": "color", "$value": "{base.color.white.100}", @@ -1114,7 +1198,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["EFFECT_COLOR"], + "scopes": ["EFFEC_COLOR"], "codeSyntax": {} } } @@ -1126,7 +1210,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["EFFECT_COLOR"], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } diff --git a/design-tokens/tokens/semantic/color.light.json b/design-tokens/tokens/semantic/color.light.json index 270a5085c..e240d61ec 100644 --- a/design-tokens/tokens/semantic/color.light.json +++ b/design-tokens/tokens/semantic/color.light.json @@ -88,7 +88,7 @@ "overlay": { "$type": "color", "$value": "{base.color.black.opacity12}", - "$description": "Elevation level 3. The highest level of elevation for elements that sit above everything else. Example: dropdowns, layer, side drawers and floating buttons.", + "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, @@ -109,51 +109,9 @@ } } }, - "selected": { - "strong": { - "enabled": { - "$type": "color", - "$value": "{base.color.brand}", - "$description": "Selected (or checked) colour. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggle, active tabs.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - } - }, - "weak": { - "enabled": { - "$type": "color", - "$value": "{base.color.green.100}", - "$description": "Lower emphasis variant of selected colour. Use if selection colour needs to be less prominent.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - }, - "hover": { - "$type": "color", - "$value": "{base.color.green.125}", - "$description": "Lower emphasis variant of selected colour. Use if selection colour needs to be less prominent.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - } - } - }, - "ok": { + "info": { "$type": "color", - "$value": "{base.color.green.400-Opacity24}", + "$value": "{base.color.blue.400-Opacity24}", "$description": "", "$extensions": { "com.figma": { @@ -163,35 +121,9 @@ } } }, - "primary": { - "default": { - "$type": "color", - "$value": "{base.color.green.600}", - "$description": "The default primary color of components at a rest/ enabled state. The term ‘primary’ denoting hierarchy - the most important thing. Use to style components prominently and give greater visual hierarchy.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - }, - "hover": { - "$type": "color", - "$value": "{TBD}", - "$description": "Hover color variant of the primary color.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - } - }, - "info": { + "unknown": { "$type": "color", - "$value": "{base.color.blue.400-Opacity24}", + "$value": "{base.color.grey.50}", "$description": "", "$extensions": { "com.figma": { @@ -201,9 +133,9 @@ } } }, - "warning": { + "ok": { "$type": "color", - "$value": "{base.color.orange.400-Opacity24}", + "$value": "{base.color.green.400-Opacity24}", "$description": "", "$extensions": { "com.figma": { @@ -225,9 +157,9 @@ } } }, - "unknown": { + "warning": { "$type": "color", - "$value": "{base.color.grey.50}", + "$value": "{base.color.orange.400-Opacity24}", "$description": "", "$extensions": { "com.figma": { @@ -236,6 +168,86 @@ "codeSyntax": {} } } + }, + "primary": { + "default": { + "$type": "color", + "$value": "{base.color.green.700}", + "$description": "The default primary color of components at a rest/ enabled state. The term ‘primary’ denoting hierarchy - the most important thing. Use to style components prominently and give greater visual hierarchy.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "hover": { + "$type": "color", + "$value": "{base.color.green.800}", + "$description": "Hover color variant of the primary color.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + } + }, + "selected": { + "strong": { + "enabled": { + "$type": "color", + "$value": "{color.background.primary.default}", + "$description": "Selected (or checked) colour. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggle, active tabs.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "hover": { + "$type": "color", + "$value": "{color.background.primary.hover}", + "$description": "Selected (or checked) colour. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggle, active tabs.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + } + }, + "weak": { + "enabled": { + "$type": "color", + "$value": "#CBFAEB", + "$description": "Lower emphasis variant of selected colour. Use if selection colour needs to be less prominent.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "hover": { + "$type": "color", + "$value": "{base.color.green.125}", + "$description": "Lower emphasis variant of selected colour. Use if selection colour needs to be less prominent.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + } + } } }, "border": { @@ -289,7 +301,7 @@ }, "selected": { "$type": "color", - "$value": "{base.color.green.600}", + "$value": "{base.color.green.700}", "$description": "Selected (or checked) colour. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggles, active tabs.", "$extensions": { "com.figma": { @@ -301,7 +313,7 @@ }, "critical": { "$type": "color", - "$value": "{color.border.default}", + "$value": "{base.color.red.800}", "$description": "", "$extensions": { "com.figma": { @@ -457,29 +469,41 @@ } } }, - "inverse": { + "primary": { + "$type": "color", + "$value": "{base.color.green.800}", + "$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": {} + } + } + }, + "heading": { "default": { "$type": "color", - "$value": "{base.color.white.100}", + "$value": "{color.text.strong}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["TEXT_FILL"], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } } }, - "heading": { + "inverse": { "default": { "$type": "color", - "$value": "{color.text.strong}", + "$value": "{base.color.white.100}", "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["ALL_SCOPES"], + "scopes": ["TEXT_FILL"], "codeSyntax": {} } } @@ -487,7 +511,7 @@ }, "critical": { "$type": "color", - "$value": "{color.text.default}", + "$value": "{base.color.red.800}", "$description": "", "$extensions": { "com.figma": { @@ -559,7 +583,7 @@ }, "onSelectedWeak": { "$type": "color", - "$value": "{color.text.strong}", + "$value": "{base.color.green.900}", "$description": "Text color to be used for text sitting on background-selected-strong.", "$extensions": { "com.figma": { @@ -580,6 +604,66 @@ "codeSyntax": {} } } + }, + "onCritical": { + "$type": "color", + "$value": "{color.text.default}", + "$description": "Text color to be used on status backgrounds.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } + } + }, + "onWarning": { + "$type": "color", + "$value": "{color.text.default}", + "$description": "Text color to be used on status backgrounds.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } + } + }, + "onOk": { + "$type": "color", + "$value": "{color.text.default}", + "$description": "Text color to be used on status backgrounds.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } + } + }, + "onInfo": { + "$type": "color", + "$value": "{color.text.default}", + "$description": "Text color to be used on status backgrounds.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } + } + }, + "onUnknown": { + "$type": "color", + "$value": "{color.text.default}", + "$description": "Text color to be used on status backgrounds.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["TEXT_FILL"], + "codeSyntax": {} + } + } } }, "icon": { @@ -645,7 +729,7 @@ }, "critical": { "$type": "color", - "$value": "{base.color.red.550}", + "$value": "{base.color.red.800}", "$description": "", "$extensions": { "com.figma": { @@ -703,6 +787,18 @@ } } }, + "primary": { + "$type": "color", + "$value": "{base.color.green.800}", + "$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": {} + } + } + }, "onPrimary": { "$type": "color", "$value": "{base.color.white.100}", @@ -1126,7 +1222,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": ["EFFECT_COLOR"], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } diff --git a/design-tokens/tokens/semantic/dimension.large.json b/design-tokens/tokens/semantic/dimension.large.json index 85950189c..eaf77ffbf 100644 --- a/design-tokens/tokens/semantic/dimension.large.json +++ b/design-tokens/tokens/semantic/dimension.large.json @@ -905,7 +905,7 @@ "xlarge": { "fontWeight": { "$type": "number", - "$value": "{fontWeight.medium}", + "$value": "{fontWeight.regular}", "$description": "", "$extensions": { "com.figma": { @@ -929,7 +929,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{base.lineHeight.500}", + "$value": 42, "$description": "", "$extensions": { "com.figma": { @@ -943,7 +943,7 @@ "large": { "fontWeight": { "$type": "number", - "$value": "{fontWeight.medium}", + "$value": "{fontWeight.regular}", "$description": "", "$extensions": { "com.figma": { @@ -955,7 +955,7 @@ }, "fontSize": { "$type": "number", - "$value": "{base.fontSize.500}", + "$value": 28, "$description": "", "$extensions": { "com.figma": { @@ -967,7 +967,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{base.lineHeight.200}", + "$value": 34, "$description": "", "$extensions": { "com.figma": { @@ -993,7 +993,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{base.lineHeight.100}", + "$value": "{base.lineHeight.200}", "$description": "", "$extensions": { "com.figma": { @@ -1005,7 +1005,7 @@ }, "fontWeight": { "$type": "number", - "$value": "{fontWeight.medium}", + "$value": "{fontWeight.regular}", "$description": "", "$extensions": { "com.figma": { @@ -1019,7 +1019,7 @@ "small": { "fontSize": { "$type": "number", - "$value": "{base.fontSize.100}", + "$value": "{base.fontSize.200}", "$description": "", "$extensions": { "com.figma": { @@ -1031,7 +1031,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{base.lineHeight.90}", + "$value": "{base.lineHeight.200}", "$description": "", "$extensions": { "com.figma": { @@ -1043,7 +1043,7 @@ }, "fontWeight": { "$type": "number", - "$value": "{fontWeight.medium}", + "$value": "{fontWeight.regular}", "$description": "", "$extensions": { "com.figma": { @@ -1081,7 +1081,7 @@ }, "fontWeight": { "$type": "number", - "$value": "{fontWeight.semibold}", + "$value": "{fontWeight.medium}", "$description": "", "$extensions": { "com.figma": { diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/index.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/index.jsx index 9093fd18f..3bcef10f2 100644 --- a/sandbox/grommet-app/src/pages/sticker-sheet/index.jsx +++ b/sandbox/grommet-app/src/pages/sticker-sheet/index.jsx @@ -40,10 +40,11 @@ import { ThumbsRating, DataTable, Meter, + ToggleGroup, } from 'grommet'; -import { User } from 'grommet-icons'; +import { User, List, MapLocation, Table } from 'grommet-icons'; import { hpe } from 'grommet-theme-hpe'; -import { refresh as hpeCurrent } from '../../theme'; +import { current as hpeCurrent } from '../../theme'; const textSizes = [ 'xsmall', @@ -226,6 +227,31 @@ const StickerSheet = () => { ), )} + + + , + value: 'list', + tip: 'List', + }, + { + icon: , + value: 'table', + tip: 'Table', + }, + { + icon: , + value: 'map', + tip: 'Map', + }, + ]} + defaultValue="list" + /> + +