diff --git a/.changeset/selfish-carrots-leave.md b/.changeset/selfish-carrots-leave.md new file mode 100644 index 000000000..c41fc28e4 --- /dev/null +++ b/.changeset/selfish-carrots-leave.md @@ -0,0 +1,5 @@ +--- +"hpe-design-tokens": minor +--- + +- Updated t-shirt scales and values for `spacing` and `container` tokens. diff --git a/design-tokens/tokens/component/component.default.json b/design-tokens/tokens/component/component.default.json index 0ffe1fc2c..ce42ee90b 100644 --- a/design-tokens/tokens/component/component.default.json +++ b/design-tokens/tokens/component/component.default.json @@ -4973,7 +4973,7 @@ }, "borderRadius": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -5599,7 +5599,7 @@ }, "margin": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -5932,7 +5932,7 @@ "container": { "paddingY": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -6606,7 +6606,7 @@ "medium": { "gapX": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "Space between checkbox control and value (label)", "$extensions": { "com.figma": { @@ -7030,7 +7030,7 @@ "medium": { "gapX": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -7185,7 +7185,7 @@ "dataCell": { "paddingX": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -7245,7 +7245,7 @@ }, "paddingTop": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -8223,7 +8223,7 @@ "item": { "paddingX": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -8321,7 +8321,7 @@ }, "paddingY": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -8360,7 +8360,7 @@ "container": { "paddingX": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -10344,7 +10344,7 @@ "medium": { "gapX": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "Space between checkbox control and value (label)", "$extensions": { "com.figma": { diff --git a/design-tokens/tokens/component/element.default.json b/design-tokens/tokens/component/element.default.json index b5a46a84c..fe417ce1a 100644 --- a/design-tokens/tokens/component/element.default.json +++ b/design-tokens/tokens/component/element.default.json @@ -15,7 +15,7 @@ }, "textToElementX": { "$type": "number", - "$value": "{static.spacing.xxsmall}", + "$value": "{static.spacing.5xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -27,7 +27,7 @@ }, "textToIconX": { "$type": "number", - "$value": "{static.spacing.xxsmall}", + "$value": "{static.spacing.5xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -88,7 +88,7 @@ "paddingX": { "narrow": { "$type": "number", - "$value": "{static.spacing.xxsmall}", + "$value": "{static.spacing.5xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -100,7 +100,7 @@ }, "default": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -249,7 +249,7 @@ }, "textToElementX": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -261,7 +261,7 @@ }, "textToIconX": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -274,7 +274,7 @@ "paddingX": { "narrow": { "$type": "number", - "$value": "{static.spacing.xxsmall}", + "$value": "{static.spacing.5xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -286,7 +286,7 @@ }, "default": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -298,7 +298,7 @@ }, "wide": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -387,7 +387,7 @@ }, "textToElementX": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -399,7 +399,7 @@ }, "textToIconX": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -549,7 +549,7 @@ }, "textToElementX": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -561,7 +561,7 @@ }, "textToIconX": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -711,7 +711,7 @@ }, "textToElementX": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -723,7 +723,7 @@ }, "textToIconX": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { diff --git a/design-tokens/tokens/primitive/primitives.default.json b/design-tokens/tokens/primitive/primitives.default.json index 5d5e781d1..9d99c1f2a 100644 --- a/design-tokens/tokens/primitive/primitives.default.json +++ b/design-tokens/tokens/primitive/primitives.default.json @@ -241,6 +241,18 @@ } } }, + "800": { + "$type": "number", + "$value": 32, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": [], + "codeSyntax": {} + } + } + }, "900": { "$type": "number", "$value": 36, @@ -265,6 +277,18 @@ } } }, + "1600": { + "$type": "number", + "$value": 64, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": [], + "codeSyntax": {} + } + } + }, "1800": { "$type": "number", "$value": 72, @@ -289,6 +313,18 @@ } } }, + "3200": { + "$type": "number", + "$value": 128, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": [], + "codeSyntax": {} + } + } + }, "4800": { "$type": "number", "$value": 192, @@ -301,6 +337,18 @@ } } }, + "6400": { + "$type": "number", + "$value": 256, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": [], + "codeSyntax": {} + } + } + }, "7200": { "$type": "number", "$value": 288, @@ -325,6 +373,18 @@ } } }, + "12800": { + "$type": "number", + "$value": 512, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": [], + "codeSyntax": {} + } + } + }, "14400": { "$type": "number", "$value": 576, @@ -349,9 +409,9 @@ } } }, - "38400": { + "25600": { "$type": "number", - "$value": 1152, + "$value": 1024, "$description": "", "$extensions": { "com.figma": { @@ -361,7 +421,7 @@ } } }, - "76800": { + "38400": { "$type": "number", "$value": 1536, "$description": "", @@ -1943,7 +2003,7 @@ } } }, - "xxsmall": { + "5xsmall": { "$type": "number", "$value": "{base.dimension.75}", "$description": "", @@ -1955,7 +2015,19 @@ } } }, - "xsmall": { + "4xsmall": { + "$type": "number", + "$value": "{base.dimension.100}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "3xsmall": { "$type": "number", "$value": "{base.dimension.150}", "$description": "", @@ -1967,7 +2039,19 @@ } } }, - "small": { + "xxsmall": { + "$type": "number", + "$value": "{base.dimension.200}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "xsmall": { "$type": "number", "$value": "{base.dimension.300}", "$description": "", @@ -1979,6 +2063,18 @@ } } }, + "small": { + "$type": "number", + "$value": "{base.dimension.400}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, "medium": { "$type": "number", "$value": "{base.dimension.600}", @@ -1992,6 +2088,18 @@ } }, "large": { + "$type": "number", + "$value": "{base.dimension.800}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "xlarge": { "$type": "number", "$value": "{base.dimension.1200}", "$description": "", @@ -2003,7 +2111,19 @@ } } }, - "xlarge": { + "xxlarge": { + "$type": "number", + "$value": "{base.dimension.1600}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "3xlarge": { "$type": "number", "$value": "{base.dimension.2400}", "$description": "", @@ -2014,6 +2134,18 @@ "codeSyntax": {} } } + }, + "4xlarge": { + "$type": "number", + "$value": "{base.dimension.3200}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } } }, "radius": { @@ -2213,7 +2345,7 @@ } }, "container": { - "xxsmall": { + "5xsmall": { "$type": "number", "$value": "{base.dimension.1200}", "$description": "", @@ -2225,7 +2357,19 @@ } } }, - "xsmall": { + "4xsmall": { + "$type": "number", + "$value": "{base.dimension.1600}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "3xsmall": { "$type": "number", "$value": "{base.dimension.2400}", "$description": "", @@ -2237,7 +2381,19 @@ } } }, - "small": { + "xxsmall": { + "$type": "number", + "$value": "{base.dimension.3200}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "xsmall": { "$type": "number", "$value": "{base.dimension.4800}", "$description": "", @@ -2249,9 +2405,9 @@ } } }, - "smallPlus": { + "small": { "$type": "number", - "$value": "{base.dimension.7200}", + "$value": "{base.dimension.6400}", "$description": "", "$extensions": { "com.figma": { @@ -2273,9 +2429,9 @@ } } }, - "mediumPlus": { + "large": { "$type": "number", - "$value": "{base.dimension.14400}", + "$value": "{base.dimension.12800}", "$description": "", "$extensions": { "com.figma": { @@ -2285,7 +2441,7 @@ } } }, - "large": { + "xlarge": { "$type": "number", "$value": "{base.dimension.19200}", "$description": "", @@ -2297,9 +2453,9 @@ } } }, - "xlarge": { + "xxlarge": { "$type": "number", - "$value": "{base.dimension.38400}", + "$value": "{base.dimension.25600}", "$description": "", "$extensions": { "com.figma": { @@ -2309,9 +2465,9 @@ } } }, - "xxlarge": { + "3xlarge": { "$type": "number", - "$value": "{base.dimension.76800}", + "$value": "{base.dimension.38400}", "$description": "", "$extensions": { "com.figma": { diff --git a/design-tokens/tokens/semantic/color.dark.json b/design-tokens/tokens/semantic/color.dark.json index 382633872..70b6872ee 100644 --- a/design-tokens/tokens/semantic/color.dark.json +++ b/design-tokens/tokens/semantic/color.dark.json @@ -243,6 +243,20 @@ } } } + }, + "xstrong": { + "REST": { + "$type": "color", + "$value": "{base.color.green.1000}", + "$description": "Hover variant of background-primary.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + } } }, "selected": { @@ -1571,8 +1585,8 @@ "$value": [ { "offsetX": "{static.spacing.none}", - "offsetY": "{static.spacing.xsmall}", - "blur": "{static.spacing.small}", + "offsetY": "{static.spacing.3xsmall}", + "blur": "{static.spacing.xsmall}", "spread": "{static.spacing.none}", "color": "{base.color.black.opacity36}" } @@ -1591,7 +1605,7 @@ "$value": [ { "offsetX": "{static.spacing.none}", - "offsetY": "{static.spacing.small}", + "offsetY": "{static.spacing.xsmall}", "blur": "{static.spacing.medium}", "spread": "{static.spacing.none}", "color": "{base.color.black.opacity36}" diff --git a/design-tokens/tokens/semantic/color.light.json b/design-tokens/tokens/semantic/color.light.json index a17e25f17..26691f0d3 100644 --- a/design-tokens/tokens/semantic/color.light.json +++ b/design-tokens/tokens/semantic/color.light.json @@ -243,6 +243,20 @@ } } } + }, + "xstrong": { + "REST": { + "$type": "color", + "$value": "{base.color.green.1000}", + "$description": "Hover variant of background-primary.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + } } }, "selected": { @@ -1571,8 +1585,8 @@ "$value": [ { "offsetX": "{static.spacing.none}", - "offsetY": "{static.spacing.xsmall}", - "blur": "{static.spacing.small}", + "offsetY": "{static.spacing.3xsmall}", + "blur": "{static.spacing.xsmall}", "spread": "{static.spacing.none}", "color": "{base.color.black.opacity12}" } @@ -1591,7 +1605,7 @@ "$value": [ { "offsetX": "{static.spacing.none}", - "offsetY": "{static.spacing.small}", + "offsetY": "{static.spacing.xsmall}", "blur": "{static.spacing.medium}", "spread": "{static.spacing.none}", "color": "{base.color.black.opacity24}" diff --git a/design-tokens/tokens/semantic/dimension.medium.json b/design-tokens/tokens/semantic/dimension.medium.json index 58225b3ad..5d690a5c8 100644 --- a/design-tokens/tokens/semantic/dimension.medium.json +++ b/design-tokens/tokens/semantic/dimension.medium.json @@ -24,6 +24,42 @@ } } }, + "5xsmall": { + "$type": "number", + "$value": "{static.spacing.5xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "4xsmall": { + "$type": "number", + "$value": "{static.spacing.4xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "3xsmall": { + "$type": "number", + "$value": "{static.spacing.3xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, "xxsmall": { "$type": "number", "$value": "{static.spacing.xxsmall}", @@ -95,6 +131,30 @@ "codeSyntax": {} } } + }, + "xxlarge": { + "$type": "number", + "$value": "{static.spacing.xxlarge}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "3xlarge": { + "$type": "number", + "$value": "{static.spacing.3xlarge}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } } }, "radius": { @@ -295,9 +355,9 @@ }, "size": { "container": { - "xxsmall": { + "5xsmall": { "$type": "number", - "$value": "{static.container.xxsmall}", + "$value": "{static.container.5xsmall}", "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", "$extensions": { "com.figma": { @@ -307,10 +367,10 @@ } } }, - "xsmall": { + "4xsmall": { "$type": "number", - "$value": "{static.container.xsmall}", - "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", + "$value": "{static.container.4xsmall}", + "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, @@ -319,9 +379,9 @@ } } }, - "small": { + "3xsmall": { "$type": "number", - "$value": "{static.container.small}", + "$value": "{static.container.3xsmall}", "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", "$extensions": { "com.figma": { @@ -331,9 +391,9 @@ } } }, - "smallPlus": { + "xxsmall": { "$type": "number", - "$value": "{static.container.smallPlus}", + "$value": "{static.container.xxsmall}", "$description": "", "$extensions": { "com.figma": { @@ -343,9 +403,9 @@ } } }, - "medium": { + "xsmall": { "$type": "number", - "$value": "{static.container.medium}", + "$value": "{static.container.xsmall}", "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", "$extensions": { "com.figma": { @@ -355,9 +415,9 @@ } } }, - "mediumPlus": { + "small": { "$type": "number", - "$value": "{static.container.mediumPlus}", + "$value": "{static.container.small}", "$description": "", "$extensions": { "com.figma": { @@ -367,10 +427,22 @@ } } }, + "medium": { + "$type": "number", + "$value": "{static.container.medium}", + "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, "large": { "$type": "number", "$value": "{static.container.large}", - "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", + "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, @@ -402,6 +474,18 @@ "codeSyntax": {} } } + }, + "3xlarge": { + "$type": "number", + "$value": "{static.container.3xlarge}", + "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } } }, "icon": { diff --git a/design-tokens/tokens/semantic/dimension.small.json b/design-tokens/tokens/semantic/dimension.small.json index c39ed591b..68dafd3b7 100644 --- a/design-tokens/tokens/semantic/dimension.small.json +++ b/design-tokens/tokens/semantic/dimension.small.json @@ -24,9 +24,45 @@ } } }, + "5xsmall": { + "$type": "number", + "$value": "{static.spacing.5xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "4xsmall": { + "$type": "number", + "$value": "{static.spacing.5xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "3xsmall": { + "$type": "number", + "$value": "{static.spacing.5xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, "xxsmall": { "$type": "number", - "$value": "{static.spacing.xxsmall}", + "$value": "{static.spacing.4xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -38,7 +74,7 @@ }, "xsmall": { "$type": "number", - "$value": "{static.spacing.xxsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -50,7 +86,7 @@ }, "small": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.xxsmall}", "$description": "", "$extensions": { "com.figma": { @@ -62,7 +98,7 @@ }, "medium": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -74,7 +110,7 @@ }, "large": { "$type": "number", - "$value": "{static.spacing.medium}", + "$value": "{static.spacing.small}", "$description": "", "$extensions": { "com.figma": { @@ -85,6 +121,18 @@ } }, "xlarge": { + "$type": "number", + "$value": "{static.spacing.medium}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "xxlarge": { "$type": "number", "$value": "{static.spacing.large}", "$description": "", @@ -95,6 +143,18 @@ "codeSyntax": {} } } + }, + "3xlarge": { + "$type": "number", + "$value": "{static.spacing.xlarge}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } } }, "radius": { @@ -295,9 +355,9 @@ }, "size": { "container": { - "xxsmall": { + "5xsmall": { "$type": "number", - "$value": "{static.container.xxsmall}", + "$value": "{static.container.5xsmall}", "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", "$extensions": { "com.figma": { @@ -307,9 +367,21 @@ } } }, - "xsmall": { + "4xsmall": { "$type": "number", - "$value": "{static.container.xxsmall}", + "$value": "{static.container.5xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, + "3xsmall": { + "$type": "number", + "$value": "{static.container.5xsmall}", "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", "$extensions": { "com.figma": { @@ -319,9 +391,21 @@ } } }, - "small": { + "xxsmall": { "$type": "number", - "$value": "{static.container.xsmall}", + "$value": "{static.container.4xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, + "xsmall": { + "$type": "number", + "$value": "{static.container.3xsmall}", "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", "$extensions": { "com.figma": { @@ -331,9 +415,9 @@ } } }, - "smallPlus": { + "small": { "$type": "number", - "$value": "{static.container.small}", + "$value": "{static.container.xxsmall}", "$description": "", "$extensions": { "com.figma": { @@ -345,7 +429,7 @@ }, "medium": { "$type": "number", - "$value": "{static.container.small}", + "$value": "{static.container.xsmall}", "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", "$extensions": { "com.figma": { @@ -355,9 +439,9 @@ } } }, - "mediumPlus": { + "large": { "$type": "number", - "$value": "{static.container.medium}", + "$value": "{static.container.small}", "$description": "", "$extensions": { "com.figma": { @@ -367,7 +451,7 @@ } } }, - "large": { + "xlarge": { "$type": "number", "$value": "{static.container.medium}", "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", @@ -379,7 +463,7 @@ } } }, - "xlarge": { + "xxlarge": { "$type": "number", "$value": "{static.container.large}", "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", @@ -391,7 +475,7 @@ } } }, - "xxlarge": { + "3xlarge": { "$type": "number", "$value": "{static.container.xlarge}", "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", diff --git a/sandbox/grommet-app/src/themes/theme.jsx b/sandbox/grommet-app/src/themes/theme.jsx index 78070e105..96b1d8eb8 100644 --- a/sandbox/grommet-app/src/themes/theme.jsx +++ b/sandbox/grommet-app/src/themes/theme.jsx @@ -163,7 +163,7 @@ const textSizes = [ '6xl', ]; -const buildTheme = tokens => { +const buildTheme = (tokens, flags) => { const { light, dark, @@ -369,29 +369,28 @@ const buildTheme = tokens => { 'disabled-text': 'text-disabled', // deprecate }; - const containerTokens = 'container' in large.hpe.size; const size = breakpoint => ({ - xxsmall: containerTokens - ? breakpoint.hpe.size.container.xxsmall - : breakpoint.hpe.size.content.xxsmall, - xsmall: containerTokens + xxsmall: flags['v6-backwards-compatibility'] + ? breakpoint.hpe.size.container['5xsmall'] + : breakpoint.hpe.size.container.xxsmall, + xsmall: flags['v6-backwards-compatibility'] + ? breakpoint.hpe.size.container['3xsmall'] + : breakpoint.hpe.size.container.xsmall, + small: flags['v6-backwards-compatibility'] ? breakpoint.hpe.size.container.xsmall - : breakpoint.hpe.size.content.xsmall, - small: containerTokens - ? breakpoint.hpe.size.container.small - : breakpoint.hpe.size.content.small, - medium: containerTokens + : breakpoint.hpe.size.container.small, + medium: flags['v6-backwards-compatibility'] ? breakpoint.hpe.size.container.medium - : breakpoint.hpe.size.content.medium, - large: containerTokens - ? breakpoint.hpe.size.container.large - : breakpoint.hpe.size.content.large, - xlarge: containerTokens + : breakpoint.hpe.size.container.medium, + large: flags['v6-backwards-compatibility'] ? breakpoint.hpe.size.container.xlarge - : breakpoint.hpe.size.content.xlarge, - xxlarge: containerTokens - ? breakpoint.hpe.size.container.xxlarge - : breakpoint.hpe.size.content.xxlarge, + : breakpoint.hpe.size.container.large, + xlarge: flags['v6-backwards-compatibility'] + ? '1152px' + : breakpoint.hpe.size.container.xlarge, + xxlarge: flags['v6-backwards-compatibility'] + ? breakpoint.hpe.size.container['3xlarge'] + : breakpoint.hpe.size.container.xxlarge, full: '100%', }); @@ -407,12 +406,37 @@ const buildTheme = tokens => { edgeSize: { none: large.hpe.spacing.none, hair: large.hpe.spacing.hair, - xxsmall: large.hpe.spacing.xxsmall, - xsmall: large.hpe.spacing.xsmall, - small: large.hpe.spacing.small, + '5xsmall': flags['v6-backwards-compatibility'] + ? undefined + : large.hpe.spacing['5xsmall'], + '4xsmall': flags['v6-backwards-compatibility'] + ? undefined + : large.hpe.spacing['4xsmall'], + '3xsmall': flags['v6-backwards-compatibility'] + ? undefined + : large.hpe.spacing['3xsmall'], + xxsmall: flags['v6-backwards-compatibility'] + ? large.hpe.spacing['5xsmall'] + : large.hpe.spacing.xxsmall, + xsmall: flags['v6-backwards-compatibility'] + ? large.hpe.spacing['3xsmall'] + : large.hpe.spacing.xsmall, + small: flags['v6-backwards-compatibility'] + ? large.hpe.spacing['xsmall'] + : large.hpe.spacing.small, medium: large.hpe.spacing.medium, - large: large.hpe.spacing.large, - xlarge: large.hpe.spacing.xlarge, + large: flags['v6-backwards-compatibility'] + ? large.hpe.spacing.xlarge + : large.hpe.spacing.large, + xlarge: flags['v6-backwards-compatibility'] + ? large.hpe.spacing['3xlarge'] + : large.hpe.spacing.xlarge, + xxlarge: flags['v6-backwards-compatibility'] + ? undefined + : large.hpe.spacing.xxlarge, + '3xlarge': flags['v6-backwards-compatibility'] + ? undefined + : large.hpe.spacing['3xlarge'], responsiveBreakpoint: 'small', }, size: size(large), @@ -2652,14 +2676,21 @@ const buildTheme = tokens => { }); }; -export const current = buildTheme({ - light: localLight, - dark: localDark, - small: localSmall, - large: localMedium, - global: localGlobal, - components: localComponents, -}); +export const current = buildTheme( + { + light: localLight, + dark: localDark, + small: localSmall, + large: localMedium, + global: localGlobal, + components: localComponents, + }, + { + // For grommet-theme-hpe v6.0.0, maintain backwards compatibility + // with old t-shirt sizes + 'v6-backwards-compatibility': true, + }, +); // need to extend hpe with new token namespace to "fill gaps" for sake of demo // when toggling between themes