From 05a36b9c1537f94c647912776d4325acb1ece14f Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Wed, 13 Nov 2024 18:18:42 -0800 Subject: [PATCH 01/25] chore(token-transformer): add pxToRem helper --- .../styleDictionary/transformer/utils.ts | 2 +- .../transformer/value/valueToREM.ts | 20 ++++++++++++------- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts index 80b04b2cd56..4f24e5914ee 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts @@ -31,6 +31,7 @@ export const globalTransformations = [ "ts/opacity", "ts/size/px", "ts/color/modifiers", + CalciteValueToREM, valueAlignFontWeightAndStyles, transitiveValueColorCSS, transitiveValueEvaluateMath, @@ -45,7 +46,6 @@ export const styles = [ "ts/shadow/css/shorthand", valueAssetToken, valueStringWrapper, - CalciteValueToREM, valueFontFamilyFallbacks, nameKebabCase, ]; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToREM.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToREM.ts index a6ae3dbcd15..56edde28aa9 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToREM.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToREM.ts @@ -3,18 +3,24 @@ import { CalledTransformerFunction, TransformerConfig } from "../utils.js"; import { Matcher } from "style-dictionary/types/Matcher.js"; export const matcher: Matcher = (token) => { - if (!["lineHeights"].includes(token.type)) { - return false; - } + const matchingRegex = /dimension/g; - return true; + return matchingRegex.test(token.type); }; export const transformToREM: CalledTransformerFunction = (token) => { + const basePxFontSize = 16; + const regex = /[px%]/g; + if (typeof token.value === "string") { - const val = Number(token.value.replace("%", "")); - if (!isNaN(val)) { - return `${val * 0.01}`; + let returnValue = Number(token.value.replace(regex, "")); + + if (!isNaN(returnValue)) { + if (token.value.includes("%")) { + returnValue = returnValue * 0.01; + } + + return `${returnValue / basePxFontSize}rem`; } } From ad370c4efc9b5811e71394645682b23303a8fcea Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Wed, 13 Nov 2024 18:19:20 -0800 Subject: [PATCH 02/25] =?UTF-8?q?fix(size):=20align=20core=20token=20size?= =?UTF-8?q?=20=E2=80=9Ccategory=E2=80=9D=20with=20=E2=80=9Ctype=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../calcite-design-tokens/src/core/size.json | 156 +++++++++--------- 1 file changed, 78 insertions(+), 78 deletions(-) diff --git a/packages/calcite-design-tokens/src/core/size.json b/packages/calcite-design-tokens/src/core/size.json index fac962e2263..9060bf55c12 100644 --- a/packages/calcite-design-tokens/src/core/size.json +++ b/packages/calcite-design-tokens/src/core/size.json @@ -4,7 +4,7 @@ "default": { "none": { "value": "0", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -13,7 +13,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -28,7 +28,7 @@ }, "1": { "value": "1px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -37,7 +37,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -52,7 +52,7 @@ }, "2": { "value": "2px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -61,7 +61,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -76,7 +76,7 @@ }, "4": { "value": "4px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -85,7 +85,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -100,7 +100,7 @@ }, "6": { "value": "6px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -109,7 +109,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -124,7 +124,7 @@ }, "8": { "value": "8px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -133,7 +133,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -148,7 +148,7 @@ }, "10": { "value": "10px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -157,7 +157,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -172,7 +172,7 @@ }, "12": { "value": "12px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -181,7 +181,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -196,7 +196,7 @@ }, "14": { "value": "14px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -205,7 +205,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -220,7 +220,7 @@ }, "16": { "value": "16px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -229,7 +229,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -244,7 +244,7 @@ }, "20": { "value": "20px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -253,7 +253,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -268,7 +268,7 @@ }, "24": { "value": "24px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -277,7 +277,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -292,7 +292,7 @@ }, "28": { "value": "28px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -301,7 +301,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -316,7 +316,7 @@ }, "32": { "value": "32px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -325,7 +325,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -340,7 +340,7 @@ }, "36": { "value": "36px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -349,7 +349,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -364,7 +364,7 @@ }, "40": { "value": "40px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -373,7 +373,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -388,7 +388,7 @@ }, "44": { "value": "44px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -397,7 +397,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -412,7 +412,7 @@ }, "48": { "value": "48px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -421,7 +421,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -436,7 +436,7 @@ }, "56": { "value": "56px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -445,7 +445,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -460,7 +460,7 @@ }, "64": { "value": "64px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -469,7 +469,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -484,7 +484,7 @@ }, "72": { "value": "72px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -493,7 +493,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -508,7 +508,7 @@ }, "80": { "value": "80px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -517,7 +517,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -532,7 +532,7 @@ }, "96": { "value": "96px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -541,7 +541,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -556,7 +556,7 @@ }, "112": { "value": "112px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -565,7 +565,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -580,7 +580,7 @@ }, "128": { "value": "128px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -589,7 +589,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -604,7 +604,7 @@ }, "144": { "value": "144px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -613,7 +613,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -628,7 +628,7 @@ }, "160": { "value": "160px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -637,7 +637,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -652,7 +652,7 @@ }, "192": { "value": "192px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -661,7 +661,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -676,7 +676,7 @@ }, "224": { "value": "224px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -685,7 +685,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -700,7 +700,7 @@ }, "256": { "value": "256px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -709,7 +709,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -724,7 +724,7 @@ }, "288": { "value": "288px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -733,7 +733,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -750,7 +750,7 @@ "relative": { "auto": { "value": "auto", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -759,7 +759,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "relative", "kind": "", "appearance": "", @@ -774,7 +774,7 @@ }, "50": { "value": "50%", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -783,7 +783,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "relative", "kind": "", "appearance": "", @@ -798,7 +798,7 @@ }, "100": { "value": "100%", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -807,7 +807,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "relative", "kind": "", "appearance": "", @@ -822,7 +822,7 @@ }, "125": { "value": "125%", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -831,7 +831,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "relative", "kind": "", "appearance": "", @@ -846,7 +846,7 @@ }, "137": { "value": "137.5%", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -855,7 +855,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "relative", "kind": "", "appearance": "", @@ -870,7 +870,7 @@ }, "150": { "value": "150%", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -879,7 +879,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "relative", "kind": "", "appearance": "", @@ -894,7 +894,7 @@ }, "162": { "value": "162.5%", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -903,7 +903,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "relative", "kind": "", "appearance": "", @@ -918,7 +918,7 @@ }, "200": { "value": "200%", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -927,7 +927,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "relative", "kind": "", "appearance": "", From 16da23c623922be4673139e106902ecf535c222a Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Wed, 13 Nov 2024 18:22:54 -0800 Subject: [PATCH 03/25] fix(size)!: correct size tokens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit BREAKING CHANGES moves all old pixel based size tokens to a “fixed” category and marks them for deprecation. new default size tokens are different sizes new default size tokens convert to REMs when built for web platforms --- .../src/semantic/size.json | 726 +++++++++++------- 1 file changed, 454 insertions(+), 272 deletions(-) diff --git a/packages/calcite-design-tokens/src/semantic/size.json b/packages/calcite-design-tokens/src/semantic/size.json index c93d2eb5a65..60af607d3c4 100644 --- a/packages/calcite-design-tokens/src/semantic/size.json +++ b/packages/calcite-design-tokens/src/semantic/size.json @@ -1,291 +1,473 @@ { "semantic": { "size": { - "px": { - "value": "{core.size.default.1}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "px", - "context": "", - "mode": "" + "fixed": { + "px": { + "value": "{core.size.default.1}", + "type": "spacing", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "px", + "context": "", + "mode": "" + } } - } - }, - "xxxs": { - "value": "{core.size.default.2}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "xxxs", - "context": "", - "mode": "" + }, + "xxxs": { + "value": "{core.size.default.2}", + "type": "spacing", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xxxs", + "context": "", + "mode": "" + } } - } - }, - "xxs": { - "value": "{core.size.default.4}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "xxs", - "context": "", - "mode": "" + }, + "xxs": { + "value": "{core.size.default.4}", + "type": "spacing", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xxs", + "context": "", + "mode": "" + } } - } - }, - "xs": { - "value": "{core.size.default.6}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "xs", - "context": "", - "mode": "" + }, + "xs": { + "value": "{core.size.default.6}", + "type": "spacing", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xs", + "context": "", + "mode": "" + } } - } - }, - "sm": { - "value": "{core.size.default.8}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "sm", - "context": "", - "mode": "" + }, + "sm": { + "value": "{core.size.default.8}", + "type": "spacing", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "sm", + "context": "", + "mode": "" + } } - } - }, - "sm+": { - "value": "{core.size.default.10}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "sm+", - "context": "", - "mode": "" + }, + "sm+": { + "value": "{core.size.default.10}", + "type": "spacing", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "sm+", + "context": "", + "mode": "" + } } - } - }, - "md": { - "value": "{core.size.default.12}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "md", - "context": "", - "mode": "" + }, + "md": { + "value": "{core.size.default.12}", + "type": "spacing", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "md", + "context": "", + "mode": "" + } } - } - }, - "md+": { - "value": "{core.size.default.14}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "md+", - "context": "", - "mode": "" + }, + "md+": { + "value": "{core.size.default.14}", + "type": "spacing", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "md+", + "context": "", + "mode": "" + } } - } - }, - "lg": { - "value": "{core.size.default.16}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "lg", - "context": "", - "mode": "" + }, + "lg": { + "value": "{core.size.default.16}", + "type": "spacing", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "lg", + "context": "", + "mode": "" + } } - } - }, - "xl": { - "value": "{core.size.default.20}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "xl", - "context": "", - "mode": "" + }, + "xl": { + "value": "{core.size.default.20}", + "type": "spacing", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xl", + "context": "", + "mode": "" + } } - } - }, - "xxl": { - "value": "{core.size.default.24}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "xxl", - "context": "", - "mode": "" + }, + "xxl": { + "value": "{core.size.default.24}", + "type": "spacing", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xxl", + "context": "", + "mode": "" + } + } + }, + "xxxl": { + "value": "{core.size.default.32}", + "type": "spacing", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xxxl", + "context": "", + "mode": "" + } } } }, - "xxxl": { - "value": "{core.size.default.32}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "xxxl", - "context": "", - "mode": "" + "default": { + "px": { + "value": "{core.size.default.1}", + "type": "size", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "px", + "context": "", + "mode": "" + } + } + }, + "sm": { + "value": "{core.size.default.8}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "sm", + "context": "", + "mode": "" + } + } + }, + "md": { + "value": "{core.size.default.16}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "md", + "context": "", + "mode": "" + } + } + }, + "md+": { + "value": "{core.size.default.20}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "md+", + "context": "", + "mode": "" + } + } + }, + "lg": { + "value": "{core.size.default.24}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "lg", + "context": "", + "mode": "" + } + } + }, + "xl": { + "value": "{core.size.default.32}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xl", + "context": "", + "mode": "" + } + } + }, + "xxl": { + "value": "{core.size.default.44}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "state": "", + "scale": "xxl", + "context": "", + "mode": "" + } } } } From 844c145f1bb306154fd3ba7418700b93a1a461f3 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Wed, 13 Nov 2024 18:24:28 -0800 Subject: [PATCH 04/25] fix(space)!: correct space tokens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit BREAKING CHANGES moves all old pixel based space tokens to a “fixed” category and marks them for deprecation. new default space tokens are different values new default space tokens convert to REMs when built for web platforms --- .../src/semantic/space.json | 780 +++++++++++++----- 1 file changed, 553 insertions(+), 227 deletions(-) diff --git a/packages/calcite-design-tokens/src/semantic/space.json b/packages/calcite-design-tokens/src/semantic/space.json index ddc4d72c1ad..747ff2a89c9 100644 --- a/packages/calcite-design-tokens/src/semantic/space.json +++ b/packages/calcite-design-tokens/src/semantic/space.json @@ -1,243 +1,569 @@ { "semantic": { - "spacing": { - "px": { - "value": "{core.size.default.1}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "spacing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "px", - "context": "", - "mode": "" + "space": { + "fixed": { + "px": { + "value": "{core.size.default.1}", + "type": "space", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "px", + "context": "", + "mode": "" + } } - } - }, - "base": { - "value": "{core.size.default.2}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "spacing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "base", - "context": "", - "mode": "" + }, + "base": { + "value": "{core.size.default.2}", + "type": "space", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "base", + "context": "", + "mode": "" + } } - } - }, - "xxs": { - "value": "{core.size.default.4}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "spacing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "xxs", - "context": "", - "mode": "" + }, + "xxs": { + "value": "{core.size.default.4}", + "type": "space", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xxs", + "context": "", + "mode": "" + } } - } - }, - "xs": { - "value": "{core.size.default.6}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "spacing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "xs", - "context": "", - "mode": "" + }, + "xs": { + "value": "{core.size.default.6}", + "type": "space", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xs", + "context": "", + "mode": "" + } } - } - }, - "sm": { - "value": "{core.size.default.8}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "spacing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "sm", - "context": "", - "mode": "" + }, + "sm": { + "value": "{core.size.default.8}", + "type": "space", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "sm", + "context": "", + "mode": "" + } } - } - }, - "md": { - "value": "{core.size.default.12}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "spacing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "md", - "context": "", - "mode": "" + }, + "md": { + "value": "{core.size.default.12}", + "type": "space", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "md", + "context": "", + "mode": "" + } } - } - }, - "lg": { - "value": "{core.size.default.14}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "spacing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "lg", - "context": "", - "mode": "" + }, + "lg": { + "value": "{core.size.default.14}", + "type": "space", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "lg", + "context": "", + "mode": "" + } } - } - }, - "xl": { - "value": "{core.size.default.16}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "spacing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "xl", - "context": "", - "mode": "" + }, + "xl": { + "value": "{core.size.default.16}", + "type": "space", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xl", + "context": "", + "mode": "" + } } - } - }, - "xxl": { - "value": "{core.size.default.20}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "spacing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "xxl", - "context": "", - "mode": "" + }, + "xxl": { + "value": "{core.size.default.20}", + "type": "space", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xxl", + "context": "", + "mode": "" + } + } + }, + "xxxl": { + "value": "{core.size.default.32}", + "type": "space", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xxxl", + "context": "", + "mode": "" + } } } }, - "xxxl": { - "value": "{core.size.default.32}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "spacing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "xxxl", - "context": "", - "mode": "" + "default": { + "none": { + "value": "{core.size.default.none}", + "type": "space", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "px", + "context": "", + "mode": "" + } + } + }, + "px": { + "value": "{core.size.default.1}", + "type": "space", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "px", + "context": "", + "mode": "" + } + } + }, + "base": { + "value": "{core.size.default.2}", + "type": "space", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "px", + "context": "", + "mode": "" + } + } + }, + "xxs": { + "value": "{core.size.default.4}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xxs", + "context": "", + "mode": "" + } + } + }, + "xs": { + "value": "{core.size.default.6}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xs", + "context": "", + "mode": "" + } + } + }, + "sm": { + "value": "{core.size.default.8}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "sm", + "context": "", + "mode": "" + } + } + }, + "sm+": { + "value": "{core.size.default.10}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "sm+", + "context": "", + "mode": "" + } + } + }, + "md": { + "value": "{core.size.default.12}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "md", + "context": "", + "mode": "" + } + } + }, + "md+": { + "value": "{core.size.default.14}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "md+", + "context": "", + "mode": "" + } + } + }, + "lg": { + "value": "{core.size.default.16}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "lg", + "context": "", + "mode": "" + } + } + }, + "xl": { + "value": "{core.size.default.20}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xl", + "context": "", + "mode": "" + } + } + }, + "xxl": { + "value": "{core.size.default.24}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xxl", + "context": "", + "mode": "" + } + } + }, + "xxxl": { + "value": "{core.size.default.32}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xxxl", + "context": "", + "mode": "" + } } } } From 11154f15476b6fa98a15a527681a651858e88c70 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Wed, 13 Nov 2024 18:24:56 -0800 Subject: [PATCH 05/25] test(tokens): update snapshot --- .../tests/__snapshots__/index.spec.ts.snap | 278 ++++++++++++------ 1 file changed, 190 insertions(+), 88 deletions(-) diff --git a/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap b/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap index bd4a65c2fc2..43aaf39c659 100644 --- a/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap +++ b/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap @@ -386,28 +386,48 @@ exports[`generated tokens CSS global should match 1`] = ` --calcite-z-index-sticky: 300; --calcite-z-index: 1; --calcite-z-index-deep: -999999; - --calcite-spacing-xxxl: 32px; - --calcite-spacing-xxl: 20px; - --calcite-spacing-xl: 16px; - --calcite-spacing-lg: 14px; - --calcite-spacing-md: 12px; - --calcite-spacing-sm: 8px; - --calcite-spacing-xs: 6px; - --calcite-spacing-xxs: 4px; - --calcite-spacing-base: 2px; - --calcite-spacing-px: 1px; - --calcite-size-xxxl: 32px; - --calcite-size-xxl: 24px; - --calcite-size-xl: 20px; - --calcite-size-lg: 16px; - --calcite-size-md-plus: 14px; - --calcite-size-md: 12px; - --calcite-size-sm-plus: 10px; - --calcite-size-sm: 8px; - --calcite-size-xs: 6px; - --calcite-size-xxs: 4px; - --calcite-size-xxxs: 2px; + --calcite-space-xxxl: 2rem; + --calcite-space-xxl: 1.5rem; + --calcite-space-xl: 1.25rem; + --calcite-space-lg: 1rem; + --calcite-space-md-plus: 0.875rem; + --calcite-space-md: 0.75rem; + --calcite-space-sm-plus: 0.625rem; + --calcite-space-sm: 0.5rem; + --calcite-space-xs: 0.375rem; + --calcite-space-xxs: 0.25rem; + --calcite-space-base: 2px; + --calcite-space-px: 1px; + --calcite-space-none: 0; + --calcite-space-fixed-xxxl: 32px; /* deprecated */ + --calcite-space-fixed-xxl: 20px; /* deprecated */ + --calcite-space-fixed-xl: 16px; /* deprecated */ + --calcite-space-fixed-lg: 14px; /* deprecated */ + --calcite-space-fixed-md: 12px; /* deprecated */ + --calcite-space-fixed-sm: 8px; /* deprecated */ + --calcite-space-fixed-xs: 6px; /* deprecated */ + --calcite-space-fixed-xxs: 4px; /* deprecated */ + --calcite-space-fixed-base: 2px; /* deprecated */ + --calcite-space-fixed-px: 1px; /* deprecated */ + --calcite-size-xxl: 2.75rem; + --calcite-size-xl: 2rem; + --calcite-size-lg: 1.5rem; + --calcite-size-md-plus: 1.25rem; + --calcite-size-md: 1rem; + --calcite-size-sm: 0.5rem; --calcite-size-px: 1px; + --calcite-size-fixed-xxxl: 32px; /* deprecated */ + --calcite-size-fixed-xxl: 24px; /* deprecated */ + --calcite-size-fixed-xl: 20px; /* deprecated */ + --calcite-size-fixed-lg: 16px; /* deprecated */ + --calcite-size-fixed-md-plus: 14px; /* deprecated */ + --calcite-size-fixed-md: 12px; /* deprecated */ + --calcite-size-fixed-sm-plus: 10px; /* deprecated */ + --calcite-size-fixed-sm: 8px; /* deprecated */ + --calcite-size-fixed-xs: 6px; /* deprecated */ + --calcite-size-fixed-xxs: 4px; /* deprecated */ + --calcite-size-fixed-xxxs: 2px; /* deprecated */ + --calcite-size-fixed-px: 1px; /* deprecated */ --calcite-opacity-disabled: 0.5; --calcite-opacity-full: 1; --calcite-opacity-dark: 0.85; @@ -423,11 +443,11 @@ exports[`generated tokens CSS global should match 1`] = ` --calcite-font-letter-spacing-wide: 0.4; --calcite-font-letter-spacing-normal: 0; --calcite-font-letter-spacing-tight: -0.4; - --calcite-font-line-height-relative-loose: 2; /* 2 */ - --calcite-font-line-height-relative-relaxed: 1.625; /* 1.625 */ - --calcite-font-line-height-relative-normal: 1.5; /* 1.5 */ - --calcite-font-line-height-relative-snug: 1.375; /* 1.375 */ - --calcite-font-line-height-relative-tight: 1.25; /* 1.25 */ + --calcite-font-line-height-relative-loose: 200%; /* 2 */ + --calcite-font-line-height-relative-relaxed: 162.5%; /* 1.625 */ + --calcite-font-line-height-relative-normal: 150%; /* 1.5 */ + --calcite-font-line-height-relative-snug: 137.5%; /* 1.375 */ + --calcite-font-line-height-relative-tight: 125%; /* 1.25 */ --calcite-font-line-height-relative: auto; /* 1 */ --calcite-font-line-height-fixed-xl: 24px; --calcite-font-line-height-fixed-lg: 20px; @@ -952,28 +972,48 @@ export const calciteOpacityDisabled = "0.5"; export const calciteShadowNone = {"x":"0","y":"0","blur":"0","spread":"0","color":"rgba(#000000, 0)"}; export const calciteShadowSm = [{"x":"0","y":"2","blur":"8","spread":"0","color":"rgba(#000000, 0.04)"},{"x":"0","y":"4","blur":"16","spread":"0","color":"rgba(#000000, 0.08)"}]; export const calciteShadowMd = [{"x":"0","y":"4","blur":"20","spread":"0","color":"rgba(#000000, 0.08)"},{"x":"0","y":"12","blur":"32","spread":"-2","color":"rgba(#000000, 0.1)"}]; +export const calciteSizeFixedPx = "1px"; // deprecated +export const calciteSizeFixedXxxs = "2px"; // deprecated +export const calciteSizeFixedXxs = "4px"; // deprecated +export const calciteSizeFixedXs = "6px"; // deprecated +export const calciteSizeFixedSm = "8px"; // deprecated +export const calciteSizeFixedSmPlus = "10px"; // deprecated +export const calciteSizeFixedMd = "12px"; // deprecated +export const calciteSizeFixedMdPlus = "14px"; // deprecated +export const calciteSizeFixedLg = "16px"; // deprecated +export const calciteSizeFixedXl = "20px"; // deprecated +export const calciteSizeFixedXxl = "24px"; // deprecated +export const calciteSizeFixedXxxl = "32px"; // deprecated export const calciteSizePx = "1px"; -export const calciteSizeXxxs = "2px"; -export const calciteSizeXxs = "4px"; -export const calciteSizeXs = "6px"; -export const calciteSizeSm = "8px"; -export const calciteSizeSmPlus = "10px"; -export const calciteSizeMd = "12px"; -export const calciteSizeMdPlus = "14px"; -export const calciteSizeLg = "16px"; -export const calciteSizeXl = "20px"; -export const calciteSizeXxl = "24px"; -export const calciteSizeXxxl = "32px"; -export const calciteSpacingPx = "1px"; -export const calciteSpacingBase = "2px"; -export const calciteSpacingXxs = "4px"; -export const calciteSpacingXs = "6px"; -export const calciteSpacingSm = "8px"; -export const calciteSpacingMd = "12px"; -export const calciteSpacingLg = "14px"; -export const calciteSpacingXl = "16px"; -export const calciteSpacingXxl = "20px"; -export const calciteSpacingXxxl = "32px"; +export const calciteSizeSm = "0.5rem"; +export const calciteSizeMd = "1rem"; +export const calciteSizeMdPlus = "1.25rem"; +export const calciteSizeLg = "1.5rem"; +export const calciteSizeXl = "2rem"; +export const calciteSizeXxl = "2.75rem"; +export const calciteSpaceFixedPx = "1px"; // deprecated +export const calciteSpaceFixedBase = "2px"; // deprecated +export const calciteSpaceFixedXxs = "4px"; // deprecated +export const calciteSpaceFixedXs = "6px"; // deprecated +export const calciteSpaceFixedSm = "8px"; // deprecated +export const calciteSpaceFixedMd = "12px"; // deprecated +export const calciteSpaceFixedLg = "14px"; // deprecated +export const calciteSpaceFixedXl = "16px"; // deprecated +export const calciteSpaceFixedXxl = "20px"; // deprecated +export const calciteSpaceFixedXxxl = "32px"; // deprecated +export const calciteSpaceNone = "0"; +export const calciteSpacePx = "1px"; +export const calciteSpaceBase = "2px"; +export const calciteSpaceXxs = "0.25rem"; +export const calciteSpaceXs = "0.375rem"; +export const calciteSpaceSm = "0.5rem"; +export const calciteSpaceSmPlus = "0.625rem"; +export const calciteSpaceMd = "0.75rem"; +export const calciteSpaceMdPlus = "0.875rem"; +export const calciteSpaceLg = "1rem"; +export const calciteSpaceXl = "1.25rem"; +export const calciteSpaceXxl = "1.5rem"; +export const calciteSpaceXxxl = "2rem"; export const calciteTypography = {"fontFamily":["Avenir Next","Avenir","Helvetica Neue","sans-serif"],"fontSize":"14px","fontWeight":"400","letterSpacing":"0","lineHeight":"16px","paragraphSpacing":"4px","textCase":"none","textDecoration":"none"}; export const calciteTypographyLightMinus3h = {"fontSize":"10px","fontWeight":"300","lineHeight":"12px"}; export const calciteTypographyLightMinus2h = {"fontSize":"12px","fontWeight":"300"}; @@ -1181,28 +1221,70 @@ export const calciteOpacityDisabled : string; export const calciteShadowNone : { x: string, y: string, blur: string, spread: string, color: string }; export const calciteShadowSm : { x: string, y: string, blur: string, spread: string, color: string }[]; export const calciteShadowMd : { x: string, y: string, blur: string, spread: string, color: string }[]; +/** deprecated */ +export const calciteSizeFixedPx : string; +/** deprecated */ +export const calciteSizeFixedXxxs : string; +/** deprecated */ +export const calciteSizeFixedXxs : string; +/** deprecated */ +export const calciteSizeFixedXs : string; +/** deprecated */ +export const calciteSizeFixedSm : string; +/** deprecated */ +export const calciteSizeFixedSmPlus : string; +/** deprecated */ +export const calciteSizeFixedMd : string; +/** deprecated */ +export const calciteSizeFixedMdPlus : string; +/** deprecated */ +export const calciteSizeFixedLg : string; +/** deprecated */ +export const calciteSizeFixedXl : string; +/** deprecated */ +export const calciteSizeFixedXxl : string; +/** deprecated */ +export const calciteSizeFixedXxxl : string; export const calciteSizePx : string; -export const calciteSizeXxxs : string; -export const calciteSizeXxs : string; -export const calciteSizeXs : string; export const calciteSizeSm : string; -export const calciteSizeSmPlus : string; export const calciteSizeMd : string; export const calciteSizeMdPlus : string; export const calciteSizeLg : string; export const calciteSizeXl : string; export const calciteSizeXxl : string; -export const calciteSizeXxxl : string; -export const calciteSpacingPx : string; -export const calciteSpacingBase : string; -export const calciteSpacingXxs : string; -export const calciteSpacingXs : string; -export const calciteSpacingSm : string; -export const calciteSpacingMd : string; -export const calciteSpacingLg : string; -export const calciteSpacingXl : string; -export const calciteSpacingXxl : string; -export const calciteSpacingXxxl : string; +/** deprecated */ +export const calciteSpaceFixedPx : string; +/** deprecated */ +export const calciteSpaceFixedBase : string; +/** deprecated */ +export const calciteSpaceFixedXxs : string; +/** deprecated */ +export const calciteSpaceFixedXs : string; +/** deprecated */ +export const calciteSpaceFixedSm : string; +/** deprecated */ +export const calciteSpaceFixedMd : string; +/** deprecated */ +export const calciteSpaceFixedLg : string; +/** deprecated */ +export const calciteSpaceFixedXl : string; +/** deprecated */ +export const calciteSpaceFixedXxl : string; +/** deprecated */ +export const calciteSpaceFixedXxxl : string; +export const calciteSpaceNone : string; +export const calciteSpacePx : string; +export const calciteSpaceBase : string; +export const calciteSpaceXxs : string; +export const calciteSpaceXs : string; +export const calciteSpaceSm : string; +export const calciteSpaceSmPlus : string; +export const calciteSpaceMd : string; +export const calciteSpaceMdPlus : string; +export const calciteSpaceLg : string; +export const calciteSpaceXl : string; +export const calciteSpaceXxl : string; +export const calciteSpaceXxxl : string; export const calciteTypography : { fontFamily: string[], fontSize: string, fontWeight: string, letterSpacing: string, lineHeight: string, paragraphSpacing: string, textCase: string, textDecoration: string }; export const calciteTypographyLightMinus3h : { fontSize: string, fontWeight: string, lineHeight: string }; export const calciteTypographyLightMinus2h : { fontSize: string, fontWeight: string }; @@ -1981,28 +2063,48 @@ $calcite-z-index-header: 400; $calcite-z-index-sticky: 300; $calcite-z-index: 1; $calcite-z-index-deep: -999999; -$calcite-spacing-xxxl: 32px; -$calcite-spacing-xxl: 20px; -$calcite-spacing-xl: 16px; -$calcite-spacing-lg: 14px; -$calcite-spacing-md: 12px; -$calcite-spacing-sm: 8px; -$calcite-spacing-xs: 6px; -$calcite-spacing-xxs: 4px; -$calcite-spacing-base: 2px; -$calcite-spacing-px: 1px; -$calcite-size-xxxl: 32px; -$calcite-size-xxl: 24px; -$calcite-size-xl: 20px; -$calcite-size-lg: 16px; -$calcite-size-md-plus: 14px; -$calcite-size-md: 12px; -$calcite-size-sm-plus: 10px; -$calcite-size-sm: 8px; -$calcite-size-xs: 6px; -$calcite-size-xxs: 4px; -$calcite-size-xxxs: 2px; +$calcite-space-xxxl: 2rem; +$calcite-space-xxl: 1.5rem; +$calcite-space-xl: 1.25rem; +$calcite-space-lg: 1rem; +$calcite-space-md-plus: 0.875rem; +$calcite-space-md: 0.75rem; +$calcite-space-sm-plus: 0.625rem; +$calcite-space-sm: 0.5rem; +$calcite-space-xs: 0.375rem; +$calcite-space-xxs: 0.25rem; +$calcite-space-base: 2px; +$calcite-space-px: 1px; +$calcite-space-none: 0; +$calcite-space-fixed-xxxl: 32px; // deprecated +$calcite-space-fixed-xxl: 20px; // deprecated +$calcite-space-fixed-xl: 16px; // deprecated +$calcite-space-fixed-lg: 14px; // deprecated +$calcite-space-fixed-md: 12px; // deprecated +$calcite-space-fixed-sm: 8px; // deprecated +$calcite-space-fixed-xs: 6px; // deprecated +$calcite-space-fixed-xxs: 4px; // deprecated +$calcite-space-fixed-base: 2px; // deprecated +$calcite-space-fixed-px: 1px; // deprecated +$calcite-size-xxl: 2.75rem; +$calcite-size-xl: 2rem; +$calcite-size-lg: 1.5rem; +$calcite-size-md-plus: 1.25rem; +$calcite-size-md: 1rem; +$calcite-size-sm: 0.5rem; $calcite-size-px: 1px; +$calcite-size-fixed-xxxl: 32px; // deprecated +$calcite-size-fixed-xxl: 24px; // deprecated +$calcite-size-fixed-xl: 20px; // deprecated +$calcite-size-fixed-lg: 16px; // deprecated +$calcite-size-fixed-md-plus: 14px; // deprecated +$calcite-size-fixed-md: 12px; // deprecated +$calcite-size-fixed-sm-plus: 10px; // deprecated +$calcite-size-fixed-sm: 8px; // deprecated +$calcite-size-fixed-xs: 6px; // deprecated +$calcite-size-fixed-xxs: 4px; // deprecated +$calcite-size-fixed-xxxs: 2px; // deprecated +$calcite-size-fixed-px: 1px; // deprecated $calcite-opacity-disabled: 0.5; $calcite-opacity-full: 1; $calcite-opacity-dark: 0.85; @@ -2018,11 +2120,11 @@ $calcite-font-paragraph-spacing-normal: 4px; $calcite-font-letter-spacing-wide: 0.4; $calcite-font-letter-spacing-normal: 0; $calcite-font-letter-spacing-tight: -0.4; -$calcite-font-line-height-relative-loose: 2; // 2 -$calcite-font-line-height-relative-relaxed: 1.625; // 1.625 -$calcite-font-line-height-relative-normal: 1.5; // 1.5 -$calcite-font-line-height-relative-snug: 1.375; // 1.375 -$calcite-font-line-height-relative-tight: 1.25; // 1.25 +$calcite-font-line-height-relative-loose: 200%; // 2 +$calcite-font-line-height-relative-relaxed: 162.5%; // 1.625 +$calcite-font-line-height-relative-normal: 150%; // 1.5 +$calcite-font-line-height-relative-snug: 137.5%; // 1.375 +$calcite-font-line-height-relative-tight: 125%; // 1.25 $calcite-font-line-height-relative: auto; // 1 $calcite-font-line-height-fixed-xl: 24px; $calcite-font-line-height-fixed-lg: 20px; From 9af6d1d531dff6feac9402de856ada26c4960183 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Wed, 13 Nov 2024 18:45:47 -0800 Subject: [PATCH 06/25] fix(tokens): remove extra fixed size tokens --- .../src/semantic/size.json | 25 ------------------- 1 file changed, 25 deletions(-) diff --git a/packages/calcite-design-tokens/src/semantic/size.json b/packages/calcite-design-tokens/src/semantic/size.json index 60af607d3c4..2ffac19b025 100644 --- a/packages/calcite-design-tokens/src/semantic/size.json +++ b/packages/calcite-design-tokens/src/semantic/size.json @@ -2,31 +2,6 @@ "semantic": { "size": { "fixed": { - "px": { - "value": "{core.size.default.1}", - "type": "spacing", - "description": "deprecated", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "fixed", - "element": "", - "category": "size", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "px", - "context": "", - "mode": "" - } - } - }, "xxxs": { "value": "{core.size.default.2}", "type": "spacing", From d6ea2c2a557e1a18fa0f1170b59e1e2d0cd5c2a0 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Wed, 13 Nov 2024 18:45:51 -0800 Subject: [PATCH 07/25] fix(tokens): remove extra fixed size tokens --- .../src/semantic/space.json | 50 ------------------- 1 file changed, 50 deletions(-) diff --git a/packages/calcite-design-tokens/src/semantic/space.json b/packages/calcite-design-tokens/src/semantic/space.json index 747ff2a89c9..5c9b4e866f5 100644 --- a/packages/calcite-design-tokens/src/semantic/space.json +++ b/packages/calcite-design-tokens/src/semantic/space.json @@ -2,56 +2,6 @@ "semantic": { "space": { "fixed": { - "px": { - "value": "{core.size.default.1}", - "type": "space", - "description": "deprecated", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "fixed", - "element": "", - "category": "space", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "px", - "context": "", - "mode": "" - } - } - }, - "base": { - "value": "{core.size.default.2}", - "type": "space", - "description": "deprecated", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "fixed", - "element": "", - "category": "space", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "base", - "context": "", - "mode": "" - } - } - }, "xxs": { "value": "{core.size.default.4}", "type": "space", From 2569cfb135f4e1cd60dbd1cfa393396114c13dcf Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Wed, 13 Nov 2024 18:46:01 -0800 Subject: [PATCH 08/25] test(tokens): update snapshot --- .../tests/__snapshots__/index.spec.ts.snap | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap b/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap index 43aaf39c659..0c7b8d17a72 100644 --- a/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap +++ b/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap @@ -407,8 +407,6 @@ exports[`generated tokens CSS global should match 1`] = ` --calcite-space-fixed-sm: 8px; /* deprecated */ --calcite-space-fixed-xs: 6px; /* deprecated */ --calcite-space-fixed-xxs: 4px; /* deprecated */ - --calcite-space-fixed-base: 2px; /* deprecated */ - --calcite-space-fixed-px: 1px; /* deprecated */ --calcite-size-xxl: 2.75rem; --calcite-size-xl: 2rem; --calcite-size-lg: 1.5rem; @@ -427,7 +425,6 @@ exports[`generated tokens CSS global should match 1`] = ` --calcite-size-fixed-xs: 6px; /* deprecated */ --calcite-size-fixed-xxs: 4px; /* deprecated */ --calcite-size-fixed-xxxs: 2px; /* deprecated */ - --calcite-size-fixed-px: 1px; /* deprecated */ --calcite-opacity-disabled: 0.5; --calcite-opacity-full: 1; --calcite-opacity-dark: 0.85; @@ -972,7 +969,6 @@ export const calciteOpacityDisabled = "0.5"; export const calciteShadowNone = {"x":"0","y":"0","blur":"0","spread":"0","color":"rgba(#000000, 0)"}; export const calciteShadowSm = [{"x":"0","y":"2","blur":"8","spread":"0","color":"rgba(#000000, 0.04)"},{"x":"0","y":"4","blur":"16","spread":"0","color":"rgba(#000000, 0.08)"}]; export const calciteShadowMd = [{"x":"0","y":"4","blur":"20","spread":"0","color":"rgba(#000000, 0.08)"},{"x":"0","y":"12","blur":"32","spread":"-2","color":"rgba(#000000, 0.1)"}]; -export const calciteSizeFixedPx = "1px"; // deprecated export const calciteSizeFixedXxxs = "2px"; // deprecated export const calciteSizeFixedXxs = "4px"; // deprecated export const calciteSizeFixedXs = "6px"; // deprecated @@ -991,8 +987,6 @@ export const calciteSizeMdPlus = "1.25rem"; export const calciteSizeLg = "1.5rem"; export const calciteSizeXl = "2rem"; export const calciteSizeXxl = "2.75rem"; -export const calciteSpaceFixedPx = "1px"; // deprecated -export const calciteSpaceFixedBase = "2px"; // deprecated export const calciteSpaceFixedXxs = "4px"; // deprecated export const calciteSpaceFixedXs = "6px"; // deprecated export const calciteSpaceFixedSm = "8px"; // deprecated @@ -1222,8 +1216,6 @@ export const calciteShadowNone : { x: string, y: string, blur: string, spread: s export const calciteShadowSm : { x: string, y: string, blur: string, spread: string, color: string }[]; export const calciteShadowMd : { x: string, y: string, blur: string, spread: string, color: string }[]; /** deprecated */ -export const calciteSizeFixedPx : string; -/** deprecated */ export const calciteSizeFixedXxxs : string; /** deprecated */ export const calciteSizeFixedXxs : string; @@ -1253,10 +1245,6 @@ export const calciteSizeLg : string; export const calciteSizeXl : string; export const calciteSizeXxl : string; /** deprecated */ -export const calciteSpaceFixedPx : string; -/** deprecated */ -export const calciteSpaceFixedBase : string; -/** deprecated */ export const calciteSpaceFixedXxs : string; /** deprecated */ export const calciteSpaceFixedXs : string; @@ -2084,8 +2072,6 @@ $calcite-space-fixed-md: 12px; // deprecated $calcite-space-fixed-sm: 8px; // deprecated $calcite-space-fixed-xs: 6px; // deprecated $calcite-space-fixed-xxs: 4px; // deprecated -$calcite-space-fixed-base: 2px; // deprecated -$calcite-space-fixed-px: 1px; // deprecated $calcite-size-xxl: 2.75rem; $calcite-size-xl: 2rem; $calcite-size-lg: 1.5rem; @@ -2104,7 +2090,6 @@ $calcite-size-fixed-sm: 8px; // deprecated $calcite-size-fixed-xs: 6px; // deprecated $calcite-size-fixed-xxs: 4px; // deprecated $calcite-size-fixed-xxxs: 2px; // deprecated -$calcite-size-fixed-px: 1px; // deprecated $calcite-opacity-disabled: 0.5; $calcite-opacity-full: 1; $calcite-opacity-dark: 0.85; From e53910a839cb837822cd6444414a624ceffc152c Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Fri, 15 Nov 2024 18:23:11 -0800 Subject: [PATCH 09/25] fix(tokens): update size tokens to match new uikit --- .../src/semantic/size.json | 92 ++++++++++++++++--- 1 file changed, 81 insertions(+), 11 deletions(-) diff --git a/packages/calcite-design-tokens/src/semantic/size.json b/packages/calcite-design-tokens/src/semantic/size.json index 2ffac19b025..08373c46dee 100644 --- a/packages/calcite-design-tokens/src/semantic/size.json +++ b/packages/calcite-design-tokens/src/semantic/size.json @@ -303,8 +303,8 @@ } } }, - "sm": { - "value": "{core.size.default.8}", + "xxxs": { + "value": "{core.size.default.12}", "type": "dimension", "attributes": { "calcite-schema": { @@ -321,13 +321,37 @@ "property": "", "variant": "", "state": "", - "scale": "sm", + "scale": "xxxs", "context": "", "mode": "" } } }, - "md": { + "xxs": { + "value": "{core.size.default.14}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xxs", + "context": "", + "mode": "" + } + } + }, + "xs": { "value": "{core.size.default.16}", "type": "dimension", "attributes": { @@ -345,14 +369,14 @@ "property": "", "variant": "", "state": "", - "scale": "md", + "scale": "xs", "context": "", "mode": "" } } }, - "md+": { - "value": "{core.size.default.20}", + "sm": { + "value": "{core.size.default.24}", "type": "dimension", "attributes": { "calcite-schema": { @@ -369,14 +393,38 @@ "property": "", "variant": "", "state": "", - "scale": "md+", + "scale": "sm", + "context": "", + "mode": "" + } + } + }, + "md": { + "value": "{core.size.default.32}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "md", "context": "", "mode": "" } } }, "lg": { - "value": "{core.size.default.24}", + "value": "{core.size.default.44}", "type": "dimension", "attributes": { "calcite-schema": { @@ -400,7 +448,7 @@ } }, "xl": { - "value": "{core.size.default.32}", + "value": "{core.size.default.48}", "type": "dimension", "attributes": { "calcite-schema": { @@ -424,7 +472,7 @@ } }, "xxl": { - "value": "{core.size.default.44}", + "value": "{core.size.default.64}", "type": "dimension", "attributes": { "calcite-schema": { @@ -444,6 +492,28 @@ "mode": "" } } + }, + "xxxl": { + "value": "{core.size.default.96}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "state": "", + "scale": "xxxl", + "context": "", + "mode": "" + } + } } } } From aad4a43b0dd36af2c449e55362b09d86d38d04d6 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Fri, 15 Nov 2024 19:07:02 -0800 Subject: [PATCH 10/25] test(tokens): update snapshot --- .../tests/__snapshots__/index.spec.ts.snap | 50 ++++++++++++------- 1 file changed, 31 insertions(+), 19 deletions(-) diff --git a/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap b/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap index 0c7b8d17a72..2b6c4d4b1e4 100644 --- a/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap +++ b/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap @@ -407,12 +407,15 @@ exports[`generated tokens CSS global should match 1`] = ` --calcite-space-fixed-sm: 8px; /* deprecated */ --calcite-space-fixed-xs: 6px; /* deprecated */ --calcite-space-fixed-xxs: 4px; /* deprecated */ - --calcite-size-xxl: 2.75rem; - --calcite-size-xl: 2rem; - --calcite-size-lg: 1.5rem; - --calcite-size-md-plus: 1.25rem; - --calcite-size-md: 1rem; - --calcite-size-sm: 0.5rem; + --calcite-size-xxxl: 6rem; + --calcite-size-xxl: 4rem; + --calcite-size-xl: 3rem; + --calcite-size-lg: 2.75rem; + --calcite-size-md: 2rem; + --calcite-size-sm: 1.5rem; + --calcite-size-xs: 1rem; + --calcite-size-xxs: 0.875rem; + --calcite-size-xxxs: 0.75rem; --calcite-size-px: 1px; --calcite-size-fixed-xxxl: 32px; /* deprecated */ --calcite-size-fixed-xxl: 24px; /* deprecated */ @@ -981,12 +984,15 @@ export const calciteSizeFixedXl = "20px"; // deprecated export const calciteSizeFixedXxl = "24px"; // deprecated export const calciteSizeFixedXxxl = "32px"; // deprecated export const calciteSizePx = "1px"; -export const calciteSizeSm = "0.5rem"; -export const calciteSizeMd = "1rem"; -export const calciteSizeMdPlus = "1.25rem"; -export const calciteSizeLg = "1.5rem"; -export const calciteSizeXl = "2rem"; -export const calciteSizeXxl = "2.75rem"; +export const calciteSizeXxxs = "0.75rem"; +export const calciteSizeXxs = "0.875rem"; +export const calciteSizeXs = "1rem"; +export const calciteSizeSm = "1.5rem"; +export const calciteSizeMd = "2rem"; +export const calciteSizeLg = "2.75rem"; +export const calciteSizeXl = "3rem"; +export const calciteSizeXxl = "4rem"; +export const calciteSizeXxxl = "6rem"; export const calciteSpaceFixedXxs = "4px"; // deprecated export const calciteSpaceFixedXs = "6px"; // deprecated export const calciteSpaceFixedSm = "8px"; // deprecated @@ -1238,12 +1244,15 @@ export const calciteSizeFixedXxl : string; /** deprecated */ export const calciteSizeFixedXxxl : string; export const calciteSizePx : string; +export const calciteSizeXxxs : string; +export const calciteSizeXxs : string; +export const calciteSizeXs : string; export const calciteSizeSm : string; export const calciteSizeMd : string; -export const calciteSizeMdPlus : string; export const calciteSizeLg : string; export const calciteSizeXl : string; export const calciteSizeXxl : string; +export const calciteSizeXxxl : string; /** deprecated */ export const calciteSpaceFixedXxs : string; /** deprecated */ @@ -2072,12 +2081,15 @@ $calcite-space-fixed-md: 12px; // deprecated $calcite-space-fixed-sm: 8px; // deprecated $calcite-space-fixed-xs: 6px; // deprecated $calcite-space-fixed-xxs: 4px; // deprecated -$calcite-size-xxl: 2.75rem; -$calcite-size-xl: 2rem; -$calcite-size-lg: 1.5rem; -$calcite-size-md-plus: 1.25rem; -$calcite-size-md: 1rem; -$calcite-size-sm: 0.5rem; +$calcite-size-xxxl: 6rem; +$calcite-size-xxl: 4rem; +$calcite-size-xl: 3rem; +$calcite-size-lg: 2.75rem; +$calcite-size-md: 2rem; +$calcite-size-sm: 1.5rem; +$calcite-size-xs: 1rem; +$calcite-size-xxs: 0.875rem; +$calcite-size-xxxs: 0.75rem; $calcite-size-px: 1px; $calcite-size-fixed-xxxl: 32px; // deprecated $calcite-size-fixed-xxl: 24px; // deprecated From f736f8f8a95e08aeee8473dc9383a62e57c58766 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Wed, 20 Nov 2024 09:44:53 -0800 Subject: [PATCH 11/25] =?UTF-8?q?chore(tokens):=20revert=20=E2=80=9Cspace?= =?UTF-8?q?=E2=80=9D=20token=20name=20for=20=E2=80=9Cspacing=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/calcite-design-tokens/src/semantic/space.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-design-tokens/src/semantic/space.json b/packages/calcite-design-tokens/src/semantic/space.json index 5c9b4e866f5..572fdd2eade 100644 --- a/packages/calcite-design-tokens/src/semantic/space.json +++ b/packages/calcite-design-tokens/src/semantic/space.json @@ -1,6 +1,6 @@ { "semantic": { - "space": { + "spacing": { "fixed": { "xxs": { "value": "{core.size.default.4}", From 7740cc950a3ad304d30c37003a72a6a431ebad72 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Wed, 20 Nov 2024 13:23:16 -0800 Subject: [PATCH 12/25] chore(tokens): add style-dictionary valuetToUnitless helper --- .../registerCalciteTransformers.ts | 2 + .../styleDictionary/transformer/utils.ts | 2 + .../transformer/value/valueToUnitless.ts | 41 +++++++++++++++++++ 3 files changed, 45 insertions(+) create mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToUnitless.ts diff --git a/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts b/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts index 0b14ec1186a..e4814aa8abf 100644 --- a/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts +++ b/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts @@ -19,6 +19,7 @@ import { registerFormatterDocs } from "./styleDictionary/formatter/docs.js"; import { registerValueToREM } from "./styleDictionary/transformer/value/valueToREM.js"; import { registerValueFontFamilyWithFallbacks } from "./styleDictionary/transformer/value/valueFontFamilyFallbacks.js"; import { registerValueColorCSS } from "./styleDictionary/transformer/value/valueColorCss.js"; +import { registerValueToUnitless } from "./styleDictionary/transformer/value/valueToUnitless.js"; export async function registerCalciteTransformers(sd: StyleDictionary): Promise { // Here we are registering the Transforms provided by Token Studio however, @@ -46,5 +47,6 @@ export async function registerCalciteTransformers(sd: StyleDictionary): Promise< registerValueFontFamilyWithFallbacks(sd); registerValueStringWrapper(sd); registerValueToREM(sd); + registerValueToUnitless(sd); registerValueColorCSS(sd); } diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts index 4f24e5914ee..c14e42ce596 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts @@ -16,6 +16,7 @@ import { transitiveValueColorCSS } from "./value/valueColorCss.js"; import { transitiveValueEvaluateMath } from "./value/valueCheckEvaluateMath.js"; import { valueFontFamilyFallbacks } from "./value/valueFontFamilyFallbacks.js"; import { CalciteValueToREM } from "./value/valueToREM.js"; +import { CalciteValueToUnitless } from "./value/valueToUnitless.js"; export type TransformerTypeUnion = `${TransformerTypeEnum}`; @@ -32,6 +33,7 @@ export const globalTransformations = [ "ts/size/px", "ts/color/modifiers", CalciteValueToREM, + CalciteValueToUnitless, valueAlignFontWeightAndStyles, transitiveValueColorCSS, transitiveValueEvaluateMath, diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToUnitless.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToUnitless.ts new file mode 100644 index 00000000000..3ff11c9d98a --- /dev/null +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToUnitless.ts @@ -0,0 +1,41 @@ +import { Core as StyleDictionary } from "style-dictionary"; +import { CalledTransformerFunction, TransformerConfig } from "../utils.js"; +import { Matcher } from "style-dictionary/types/Matcher.js"; + +export const matcher: Matcher = (token) => { + const matchingRegex = /lineHeight/g; + + return matchingRegex.test(token.type) && !token.path.includes("fixed"); +}; + +export const transformToUnitless: CalledTransformerFunction = (token) => { + const regex = /[px%]/g; + + if (typeof token.value === "string") { + let returnValue = Number(token.value.replace(regex, "")); + + if (!isNaN(returnValue)) { + if (token.value.includes("%")) { + returnValue = returnValue * 0.01; + } + + return `${returnValue}`; + } + } + + return token.value; +}; + +export const registerValueToUnitless = (sd: StyleDictionary): void => { + const transformerConfig: TransformerConfig = { + name: CalciteValueToUnitless, + transformer: transformToUnitless, + type: "value", + transitive: true, + matcher, + }; + + sd.registerTransform(transformerConfig); +}; + +export const CalciteValueToUnitless = "value/calcite/unitless"; From 953ed86cf9db1f7f74c9d195098fd438f6d42d0d Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 21 Nov 2024 11:40:48 -0800 Subject: [PATCH 13/25] test(tokens): update snapshot --- .../tests/__snapshots__/index.spec.ts.snap | 264 +++++++++--------- 1 file changed, 132 insertions(+), 132 deletions(-) diff --git a/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap b/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap index 2b6c4d4b1e4..3cfff18f69e 100644 --- a/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap +++ b/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap @@ -386,27 +386,27 @@ exports[`generated tokens CSS global should match 1`] = ` --calcite-z-index-sticky: 300; --calcite-z-index: 1; --calcite-z-index-deep: -999999; - --calcite-space-xxxl: 2rem; - --calcite-space-xxl: 1.5rem; - --calcite-space-xl: 1.25rem; - --calcite-space-lg: 1rem; - --calcite-space-md-plus: 0.875rem; - --calcite-space-md: 0.75rem; - --calcite-space-sm-plus: 0.625rem; - --calcite-space-sm: 0.5rem; - --calcite-space-xs: 0.375rem; - --calcite-space-xxs: 0.25rem; - --calcite-space-base: 2px; - --calcite-space-px: 1px; - --calcite-space-none: 0; - --calcite-space-fixed-xxxl: 32px; /* deprecated */ - --calcite-space-fixed-xxl: 20px; /* deprecated */ - --calcite-space-fixed-xl: 16px; /* deprecated */ - --calcite-space-fixed-lg: 14px; /* deprecated */ - --calcite-space-fixed-md: 12px; /* deprecated */ - --calcite-space-fixed-sm: 8px; /* deprecated */ - --calcite-space-fixed-xs: 6px; /* deprecated */ - --calcite-space-fixed-xxs: 4px; /* deprecated */ + --calcite-spacing-xxxl: 2rem; + --calcite-spacing-xxl: 1.5rem; + --calcite-spacing-xl: 1.25rem; + --calcite-spacing-lg: 1rem; + --calcite-spacing-md-plus: 0.875rem; + --calcite-spacing-md: 0.75rem; + --calcite-spacing-sm-plus: 0.625rem; + --calcite-spacing-sm: 0.5rem; + --calcite-spacing-xs: 0.375rem; + --calcite-spacing-xxs: 0.25rem; + --calcite-spacing-base: 2px; + --calcite-spacing-px: 1px; + --calcite-spacing-none: 0; + --calcite-spacing-fixed-xxxl: 32px; /* deprecated */ + --calcite-spacing-fixed-xxl: 20px; /* deprecated */ + --calcite-spacing-fixed-xl: 16px; /* deprecated */ + --calcite-spacing-fixed-lg: 14px; /* deprecated */ + --calcite-spacing-fixed-md: 12px; /* deprecated */ + --calcite-spacing-fixed-sm: 8px; /* deprecated */ + --calcite-spacing-fixed-xs: 6px; /* deprecated */ + --calcite-spacing-fixed-xxs: 4px; /* deprecated */ --calcite-size-xxxl: 6rem; --calcite-size-xxl: 4rem; --calcite-size-xl: 3rem; @@ -443,11 +443,11 @@ exports[`generated tokens CSS global should match 1`] = ` --calcite-font-letter-spacing-wide: 0.4; --calcite-font-letter-spacing-normal: 0; --calcite-font-letter-spacing-tight: -0.4; - --calcite-font-line-height-relative-loose: 200%; /* 2 */ - --calcite-font-line-height-relative-relaxed: 162.5%; /* 1.625 */ - --calcite-font-line-height-relative-normal: 150%; /* 1.5 */ - --calcite-font-line-height-relative-snug: 137.5%; /* 1.375 */ - --calcite-font-line-height-relative-tight: 125%; /* 1.25 */ + --calcite-font-line-height-relative-loose: 2; /* 2 */ + --calcite-font-line-height-relative-relaxed: 1.625; /* 1.625 */ + --calcite-font-line-height-relative-normal: 1.5; /* 1.5 */ + --calcite-font-line-height-relative-snug: 1.375; /* 1.375 */ + --calcite-font-line-height-relative-tight: 1.25; /* 1.25 */ --calcite-font-line-height-relative: auto; /* 1 */ --calcite-font-line-height-fixed-xl: 24px; --calcite-font-line-height-fixed-lg: 20px; @@ -949,11 +949,11 @@ export const calciteFontLineHeightFixedBase = "16px"; export const calciteFontLineHeightFixedLg = "20px"; export const calciteFontLineHeightFixedXl = "24px"; export const calciteFontLineHeightRelative = "auto"; // 1 -export const calciteFontLineHeightRelativeTight = "125%"; // 1.25 -export const calciteFontLineHeightRelativeSnug = "137.5%"; // 1.375 -export const calciteFontLineHeightRelativeNormal = "150%"; // 1.5 -export const calciteFontLineHeightRelativeRelaxed = "162.5%"; // 1.625 -export const calciteFontLineHeightRelativeLoose = "200%"; // 2 +export const calciteFontLineHeightRelativeTight = "1.25"; // 1.25 +export const calciteFontLineHeightRelativeSnug = "1.375"; // 1.375 +export const calciteFontLineHeightRelativeNormal = "1.5"; // 1.5 +export const calciteFontLineHeightRelativeRelaxed = "1.625"; // 1.625 +export const calciteFontLineHeightRelativeLoose = "2"; // 2 export const calciteFontLetterSpacingTight = "-0.4"; export const calciteFontLetterSpacingNormal = "0"; export const calciteFontLetterSpacingWide = "0.4"; @@ -993,27 +993,27 @@ export const calciteSizeLg = "2.75rem"; export const calciteSizeXl = "3rem"; export const calciteSizeXxl = "4rem"; export const calciteSizeXxxl = "6rem"; -export const calciteSpaceFixedXxs = "4px"; // deprecated -export const calciteSpaceFixedXs = "6px"; // deprecated -export const calciteSpaceFixedSm = "8px"; // deprecated -export const calciteSpaceFixedMd = "12px"; // deprecated -export const calciteSpaceFixedLg = "14px"; // deprecated -export const calciteSpaceFixedXl = "16px"; // deprecated -export const calciteSpaceFixedXxl = "20px"; // deprecated -export const calciteSpaceFixedXxxl = "32px"; // deprecated -export const calciteSpaceNone = "0"; -export const calciteSpacePx = "1px"; -export const calciteSpaceBase = "2px"; -export const calciteSpaceXxs = "0.25rem"; -export const calciteSpaceXs = "0.375rem"; -export const calciteSpaceSm = "0.5rem"; -export const calciteSpaceSmPlus = "0.625rem"; -export const calciteSpaceMd = "0.75rem"; -export const calciteSpaceMdPlus = "0.875rem"; -export const calciteSpaceLg = "1rem"; -export const calciteSpaceXl = "1.25rem"; -export const calciteSpaceXxl = "1.5rem"; -export const calciteSpaceXxxl = "2rem"; +export const calciteSpacingFixedXxs = "4px"; // deprecated +export const calciteSpacingFixedXs = "6px"; // deprecated +export const calciteSpacingFixedSm = "8px"; // deprecated +export const calciteSpacingFixedMd = "12px"; // deprecated +export const calciteSpacingFixedLg = "14px"; // deprecated +export const calciteSpacingFixedXl = "16px"; // deprecated +export const calciteSpacingFixedXxl = "20px"; // deprecated +export const calciteSpacingFixedXxxl = "32px"; // deprecated +export const calciteSpacingNone = "0"; +export const calciteSpacingPx = "1px"; +export const calciteSpacingBase = "2px"; +export const calciteSpacingXxs = "0.25rem"; +export const calciteSpacingXs = "0.375rem"; +export const calciteSpacingSm = "0.5rem"; +export const calciteSpacingSmPlus = "0.625rem"; +export const calciteSpacingMd = "0.75rem"; +export const calciteSpacingMdPlus = "0.875rem"; +export const calciteSpacingLg = "1rem"; +export const calciteSpacingXl = "1.25rem"; +export const calciteSpacingXxl = "1.5rem"; +export const calciteSpacingXxxl = "2rem"; export const calciteTypography = {"fontFamily":["Avenir Next","Avenir","Helvetica Neue","sans-serif"],"fontSize":"14px","fontWeight":"400","letterSpacing":"0","lineHeight":"16px","paragraphSpacing":"4px","textCase":"none","textDecoration":"none"}; export const calciteTypographyLightMinus3h = {"fontSize":"10px","fontWeight":"300","lineHeight":"12px"}; export const calciteTypographyLightMinus2h = {"fontSize":"12px","fontWeight":"300"}; @@ -1035,41 +1035,41 @@ export const calciteTypographyBoldMinus2h = {"fontWeight":"600","fontSize":"12px export const calciteTypographyBoldMinus1h = {"fontWeight":"600"}; export const calciteTypographyBold0h = {"fontWeight":"600","lineHeight":"20px","fontSize":"16px"}; export const calciteTypographyBold1h = {"fontWeight":"600","lineHeight":"24px","fontSize":"18px"}; -export const calciteTypographyWrapLight0 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"16px"}; -export const calciteTypographyWrapLight1 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"18px"}; -export const calciteTypographyWrapLight2 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"20px"}; -export const calciteTypographyWrapLight3 = {"fontWeight":"300","lineHeight":"125%","fontSize":"24px"}; -export const calciteTypographyWrapLightMinus2 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"12px"}; -export const calciteTypographyWrapLightMinus1 = {"fontWeight":"300","lineHeight":"137.5%"}; -export const calciteTypographyWrapRegular0 = {"lineHeight":"137.5%","fontSize":"16px"}; -export const calciteTypographyWrapRegular1 = {"lineHeight":"137.5%","fontSize":"18px"}; -export const calciteTypographyWrapRegular2 = {"lineHeight":"137.5%","fontSize":"20px"}; -export const calciteTypographyWrapRegular3 = {"lineHeight":"137.5%","fontSize":"24px"}; -export const calciteTypographyWrapRegularMinus2 = {"lineHeight":"137.5%","fontSize":"12px"}; -export const calciteTypographyWrapRegularMinus1 = {"lineHeight":"137.5%"}; -export const calciteTypographyWrapMedium0 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"16px"}; -export const calciteTypographyWrapMedium1 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"18px"}; -export const calciteTypographyWrapMedium2 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"20px"}; -export const calciteTypographyWrapMedium3 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"24px"}; -export const calciteTypographyWrapMediumMinus2 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"12px"}; -export const calciteTypographyWrapMediumMinus1 = {"fontWeight":"500","lineHeight":"137.5%"}; -export const calciteTypographyWrapBold0 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"16px"}; -export const calciteTypographyWrapBold1 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"18px"}; -export const calciteTypographyWrapBold2 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"20px"}; -export const calciteTypographyWrapBold3 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"24px"}; -export const calciteTypographyWrapBoldMinus2 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"12px"}; -export const calciteTypographyWrapBoldMinus1 = {"fontWeight":"600","lineHeight":"137.5%"}; -export const calciteTypographyHierarchyDisplay1 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"24px"}; -export const calciteTypographyHierarchyDisplay2 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"20px"}; -export const calciteTypographyHierarchyHeading1 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"24px"}; -export const calciteTypographyHierarchyHeading2 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"20px"}; -export const calciteTypographyHierarchyHeading3 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"18px"}; -export const calciteTypographyHierarchyHeading4 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"16px"}; -export const calciteTypographyHierarchyHeading5 = {"fontWeight":"500","lineHeight":"137.5%"}; -export const calciteTypographyHierarchyBodySnug = {"lineHeight":"137.5%"}; +export const calciteTypographyWrapLight0 = {"fontWeight":"300","lineHeight":"1.375","fontSize":"16px"}; +export const calciteTypographyWrapLight1 = {"fontWeight":"300","lineHeight":"1.375","fontSize":"18px"}; +export const calciteTypographyWrapLight2 = {"fontWeight":"300","lineHeight":"1.375","fontSize":"20px"}; +export const calciteTypographyWrapLight3 = {"fontWeight":"300","lineHeight":"1.25","fontSize":"24px"}; +export const calciteTypographyWrapLightMinus2 = {"fontWeight":"300","lineHeight":"1.375","fontSize":"12px"}; +export const calciteTypographyWrapLightMinus1 = {"fontWeight":"300","lineHeight":"1.375"}; +export const calciteTypographyWrapRegular0 = {"lineHeight":"1.375","fontSize":"16px"}; +export const calciteTypographyWrapRegular1 = {"lineHeight":"1.375","fontSize":"18px"}; +export const calciteTypographyWrapRegular2 = {"lineHeight":"1.375","fontSize":"20px"}; +export const calciteTypographyWrapRegular3 = {"lineHeight":"1.375","fontSize":"24px"}; +export const calciteTypographyWrapRegularMinus2 = {"lineHeight":"1.375","fontSize":"12px"}; +export const calciteTypographyWrapRegularMinus1 = {"lineHeight":"1.375"}; +export const calciteTypographyWrapMedium0 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"16px"}; +export const calciteTypographyWrapMedium1 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"18px"}; +export const calciteTypographyWrapMedium2 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"20px"}; +export const calciteTypographyWrapMedium3 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"24px"}; +export const calciteTypographyWrapMediumMinus2 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"12px"}; +export const calciteTypographyWrapMediumMinus1 = {"fontWeight":"500","lineHeight":"1.375"}; +export const calciteTypographyWrapBold0 = {"fontWeight":"600","lineHeight":"1.375","fontSize":"16px"}; +export const calciteTypographyWrapBold1 = {"fontWeight":"600","lineHeight":"1.375","fontSize":"18px"}; +export const calciteTypographyWrapBold2 = {"fontWeight":"600","lineHeight":"1.375","fontSize":"20px"}; +export const calciteTypographyWrapBold3 = {"fontWeight":"600","lineHeight":"1.375","fontSize":"24px"}; +export const calciteTypographyWrapBoldMinus2 = {"fontWeight":"600","lineHeight":"1.375","fontSize":"12px"}; +export const calciteTypographyWrapBoldMinus1 = {"fontWeight":"600","lineHeight":"1.375"}; +export const calciteTypographyHierarchyDisplay1 = {"fontWeight":"600","lineHeight":"1.375","fontSize":"24px"}; +export const calciteTypographyHierarchyDisplay2 = {"fontWeight":"600","lineHeight":"1.375","fontSize":"20px"}; +export const calciteTypographyHierarchyHeading1 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"24px"}; +export const calciteTypographyHierarchyHeading2 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"20px"}; +export const calciteTypographyHierarchyHeading3 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"18px"}; +export const calciteTypographyHierarchyHeading4 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"16px"}; +export const calciteTypographyHierarchyHeading5 = {"fontWeight":"500","lineHeight":"1.375"}; +export const calciteTypographyHierarchyBodySnug = {"lineHeight":"1.375"}; export const calciteTypographyHierarchyBody = {"fontFamily":["Avenir Next","Avenir","Helvetica Neue","sans-serif"],"fontSize":"14px","fontWeight":"400","letterSpacing":"0","lineHeight":"16px","paragraphSpacing":"4px","textCase":"none","textDecoration":"none"}; export const calciteTypographyHierarchyOverline = {"lineHeight":"12px","textCase":"uppercase","fontWeight":"700"}; -export const calciteTypographyHierarchyCaption = {"lineHeight":"137.5%","fontSize":"12px"}; +export const calciteTypographyHierarchyCaption = {"lineHeight":"1.375","fontSize":"12px"}; export const calciteZIndexDeep = "-999999"; export const calciteZIndex = "1"; export const calciteZIndexSticky = "300"; @@ -1254,34 +1254,34 @@ export const calciteSizeXl : string; export const calciteSizeXxl : string; export const calciteSizeXxxl : string; /** deprecated */ -export const calciteSpaceFixedXxs : string; +export const calciteSpacingFixedXxs : string; /** deprecated */ -export const calciteSpaceFixedXs : string; +export const calciteSpacingFixedXs : string; /** deprecated */ -export const calciteSpaceFixedSm : string; +export const calciteSpacingFixedSm : string; /** deprecated */ -export const calciteSpaceFixedMd : string; +export const calciteSpacingFixedMd : string; /** deprecated */ -export const calciteSpaceFixedLg : string; +export const calciteSpacingFixedLg : string; /** deprecated */ -export const calciteSpaceFixedXl : string; +export const calciteSpacingFixedXl : string; /** deprecated */ -export const calciteSpaceFixedXxl : string; +export const calciteSpacingFixedXxl : string; /** deprecated */ -export const calciteSpaceFixedXxxl : string; -export const calciteSpaceNone : string; -export const calciteSpacePx : string; -export const calciteSpaceBase : string; -export const calciteSpaceXxs : string; -export const calciteSpaceXs : string; -export const calciteSpaceSm : string; -export const calciteSpaceSmPlus : string; -export const calciteSpaceMd : string; -export const calciteSpaceMdPlus : string; -export const calciteSpaceLg : string; -export const calciteSpaceXl : string; -export const calciteSpaceXxl : string; -export const calciteSpaceXxxl : string; +export const calciteSpacingFixedXxxl : string; +export const calciteSpacingNone : string; +export const calciteSpacingPx : string; +export const calciteSpacingBase : string; +export const calciteSpacingXxs : string; +export const calciteSpacingXs : string; +export const calciteSpacingSm : string; +export const calciteSpacingSmPlus : string; +export const calciteSpacingMd : string; +export const calciteSpacingMdPlus : string; +export const calciteSpacingLg : string; +export const calciteSpacingXl : string; +export const calciteSpacingXxl : string; +export const calciteSpacingXxxl : string; export const calciteTypography : { fontFamily: string[], fontSize: string, fontWeight: string, letterSpacing: string, lineHeight: string, paragraphSpacing: string, textCase: string, textDecoration: string }; export const calciteTypographyLightMinus3h : { fontSize: string, fontWeight: string, lineHeight: string }; export const calciteTypographyLightMinus2h : { fontSize: string, fontWeight: string }; @@ -2060,27 +2060,27 @@ $calcite-z-index-header: 400; $calcite-z-index-sticky: 300; $calcite-z-index: 1; $calcite-z-index-deep: -999999; -$calcite-space-xxxl: 2rem; -$calcite-space-xxl: 1.5rem; -$calcite-space-xl: 1.25rem; -$calcite-space-lg: 1rem; -$calcite-space-md-plus: 0.875rem; -$calcite-space-md: 0.75rem; -$calcite-space-sm-plus: 0.625rem; -$calcite-space-sm: 0.5rem; -$calcite-space-xs: 0.375rem; -$calcite-space-xxs: 0.25rem; -$calcite-space-base: 2px; -$calcite-space-px: 1px; -$calcite-space-none: 0; -$calcite-space-fixed-xxxl: 32px; // deprecated -$calcite-space-fixed-xxl: 20px; // deprecated -$calcite-space-fixed-xl: 16px; // deprecated -$calcite-space-fixed-lg: 14px; // deprecated -$calcite-space-fixed-md: 12px; // deprecated -$calcite-space-fixed-sm: 8px; // deprecated -$calcite-space-fixed-xs: 6px; // deprecated -$calcite-space-fixed-xxs: 4px; // deprecated +$calcite-spacing-xxxl: 2rem; +$calcite-spacing-xxl: 1.5rem; +$calcite-spacing-xl: 1.25rem; +$calcite-spacing-lg: 1rem; +$calcite-spacing-md-plus: 0.875rem; +$calcite-spacing-md: 0.75rem; +$calcite-spacing-sm-plus: 0.625rem; +$calcite-spacing-sm: 0.5rem; +$calcite-spacing-xs: 0.375rem; +$calcite-spacing-xxs: 0.25rem; +$calcite-spacing-base: 2px; +$calcite-spacing-px: 1px; +$calcite-spacing-none: 0; +$calcite-spacing-fixed-xxxl: 32px; // deprecated +$calcite-spacing-fixed-xxl: 20px; // deprecated +$calcite-spacing-fixed-xl: 16px; // deprecated +$calcite-spacing-fixed-lg: 14px; // deprecated +$calcite-spacing-fixed-md: 12px; // deprecated +$calcite-spacing-fixed-sm: 8px; // deprecated +$calcite-spacing-fixed-xs: 6px; // deprecated +$calcite-spacing-fixed-xxs: 4px; // deprecated $calcite-size-xxxl: 6rem; $calcite-size-xxl: 4rem; $calcite-size-xl: 3rem; @@ -2117,11 +2117,11 @@ $calcite-font-paragraph-spacing-normal: 4px; $calcite-font-letter-spacing-wide: 0.4; $calcite-font-letter-spacing-normal: 0; $calcite-font-letter-spacing-tight: -0.4; -$calcite-font-line-height-relative-loose: 200%; // 2 -$calcite-font-line-height-relative-relaxed: 162.5%; // 1.625 -$calcite-font-line-height-relative-normal: 150%; // 1.5 -$calcite-font-line-height-relative-snug: 137.5%; // 1.375 -$calcite-font-line-height-relative-tight: 125%; // 1.25 +$calcite-font-line-height-relative-loose: 2; // 2 +$calcite-font-line-height-relative-relaxed: 1.625; // 1.625 +$calcite-font-line-height-relative-normal: 1.5; // 1.5 +$calcite-font-line-height-relative-snug: 1.375; // 1.375 +$calcite-font-line-height-relative-tight: 1.25; // 1.25 $calcite-font-line-height-relative: auto; // 1 $calcite-font-line-height-fixed-xl: 24px; $calcite-font-line-height-fixed-lg: 20px; From b3856066a6438fec392d4f3e9f4a896b5d705402 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Mon, 25 Nov 2024 17:53:41 -0800 Subject: [PATCH 14/25] chore(custom-theme): revert to dev --- packages/calcite-components/src/custom-theme.stories.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts index 8178d355f96..14ba2329030 100644 --- a/packages/calcite-components/src/custom-theme.stories.ts +++ b/packages/calcite-components/src/custom-theme.stories.ts @@ -128,8 +128,11 @@ const kitchenSink = (args: Record, useTestValues = false) => ${datePicker} ${tabs} ${label} ${link} ${list} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover} ${tile} ${tooltip} -
${navigation} ${navigationLogos} ${navigationUsers}
- ${alert} +
+ ${navigation} ${navigationLogos} ${navigationUsers} +
+ ${alert} + `; From e117a2b696702d5cb7e26d35f62370d1b8fcbfd5 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 26 Nov 2024 18:36:22 -0800 Subject: [PATCH 15/25] fix(legacy, action, card-group, date-picker-month-header, date-picker-month, dialog, dropdown-item, input-date-picker, panel, select, tab-nav, text-area, tile, tree-item, validation): update size space tokens --- .../src/assets/styles/_legacy.scss | 28 +++++++------- .../src/components/action/action.scss | 6 +-- .../src/components/card-group/card-group.scss | 2 +- .../date-picker-month-header.scss | 38 +++++++++---------- .../date-picker-month/date-picker-month.scss | 24 ++++++------ .../src/components/dialog/dialog.scss | 2 +- .../dropdown-item/dropdown-item.scss | 4 +- .../input-date-picker/input-date-picker.scss | 10 ++--- .../src/components/panel/panel.scss | 6 +-- .../src/components/select/select.scss | 6 +-- .../src/components/tab-nav/tab-nav.scss | 8 ++-- .../src/components/text-area/text-area.scss | 4 +- .../src/components/tile/tile.scss | 6 +-- .../src/components/tree-item/tree-item.scss | 4 +- .../src/demos/validation.html | 12 +++--- 15 files changed, 80 insertions(+), 80 deletions(-) diff --git a/packages/calcite-components/src/assets/styles/_legacy.scss b/packages/calcite-components/src/assets/styles/_legacy.scss index d6e38ce888f..a93aa9a5ba0 100644 --- a/packages/calcite-components/src/assets/styles/_legacy.scss +++ b/packages/calcite-components/src/assets/styles/_legacy.scss @@ -49,25 +49,25 @@ --calcite-app-breakpoint-width-xs: var(--calcite-container-size-width-xs-max); --calcite-app-breakpoint-width-xxs: var(--calcite-container-size-width-xxs-max); --calcite-app-spacing-11: var(--calcite-spacing-xxxl); - --calcite-app-spacing-8: var(--calcite-spacing-xxl); - --calcite-app-spacing-7: var(--calcite-spacing-xl); - --calcite-app-spacing-6: var(--calcite-spacing-lg); + --calcite-app-spacing-8: var(--calcite-spacing-xl); + --calcite-app-spacing-7: var(--calcite-spacing-lg); + --calcite-app-spacing-6: var(--calcite-spacing-md-plus); --calcite-app-spacing-5: var(--calcite-spacing-md); --calcite-app-spacing-3: var(--calcite-spacing-sm); --calcite-app-spacing-2: var(--calcite-spacing-xs); --calcite-app-spacing-1: var(--calcite-spacing-xxs); --calcite-app-spacing-0: var(--calcite-spacing-base); - --calcite-app-sizing-11: var(--calcite-size-xxxl); - --calcite-app-sizing-9: var(--calcite-size-xxl); - --calcite-app-sizing-8: var(--calcite-size-xl); - --calcite-app-sizing-7: var(--calcite-size-lg); - --calcite-app-sizing-6: var(--calcite-size-md-plus); - --calcite-app-sizing-5: var(--calcite-size-md); - --calcite-app-sizing-4: var(--calcite-size-sm-plus); - --calcite-app-sizing-3: var(--calcite-size-sm); - --calcite-app-sizing-2: var(--calcite-size-xs); - --calcite-app-sizing-1: var(--calcite-size-xxs); - --calcite-app-sizing-0: var(--calcite-size-xxxs); + --calcite-app-sizing-11: var(--calcite-size-md); + --calcite-app-sizing-9: var(--calcite-size-sm); + --calcite-app-sizing-8: var(--calcite-spacing-xl); + --calcite-app-sizing-7: var(--calcite-size-xs); + --calcite-app-sizing-6: var(--calcite-size-xxxs-plus); + --calcite-app-sizing-5: var(--calcite-size-xxxs); + --calcite-app-sizing-4: var(--calcite-spacing-sm-plus); + --calcite-app-sizing-3: var(--calcite-spacing-sm); + --calcite-app-sizing-2: var(--calcite-spacing-xs); + --calcite-app-sizing-1: var(--calcite-spacing-xxs); + --calcite-app-sizing-0: var(--calcite-spacing-base); --calcite-app-opacity-100: var(--calcite-app-opacity-full); --calcite-app-opacity-85: var(--calcite-app-opacity-dark); --calcite-app-opacity-50: var(--calcite-app-opacity-half); diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss index 578f2fe9864..e92cacaf95d 100755 --- a/packages/calcite-components/src/components/action/action.scss +++ b/packages/calcite-components/src/components/action/action.scss @@ -175,7 +175,7 @@ button { .button { @apply text-n2h font-normal; padding-inline: var(--calcite-internal-action-padding-inline, theme("spacing.2")); - padding-block: var(--calcite-internal-action-padding-block, var(--calcite-size-xxs)); + padding-block: var(--calcite-internal-action-padding-block, var(--calcite-spacing-xxs)); } .button--text-visible .icon-container { margin-inline-end: theme("spacing.2"); @@ -186,7 +186,7 @@ button { .button { @apply text-n1h font-normal; padding-inline: var(--calcite-internal-action-padding-inline, theme("spacing.4")); - padding-block: var(--calcite-internal-action-padding-block, var(--calcite-size-md)); + padding-block: var(--calcite-internal-action-padding-block, var(--calcite-spacing-md)); } .button--text-visible .icon-container { margin-inline-end: theme("spacing.3"); @@ -197,7 +197,7 @@ button { .button { @apply text-0h font-normal; padding-inline: var(--calcite-internal-action-padding-inline, theme("spacing.5")); - padding-block: var(--calcite-internal-action-padding-block, var(--calcite-size-xl)); + padding-block: var(--calcite-internal-action-padding-block, var(--calcite-spacing-xl)); } .button--text-visible .icon-container { margin-inline-end: theme("spacing.4"); diff --git a/packages/calcite-components/src/components/card-group/card-group.scss b/packages/calcite-components/src/components/card-group/card-group.scss index 86d69a3d1a6..b9df02577cf 100644 --- a/packages/calcite-components/src/components/card-group/card-group.scss +++ b/packages/calcite-components/src/components/card-group/card-group.scss @@ -14,7 +14,7 @@ .container { display: flex; flex-wrap: wrap; - gap: var(--calcite-card-group-space, var(--calcite-card-group-gap, var(--calcite-size-md))); + gap: var(--calcite-card-group-space, var(--calcite-card-group-gap, var(--calcite-spacing-md))); } @include base-component(); diff --git a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss index 64d1f891c0e..b4b69aef37a 100644 --- a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss +++ b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss @@ -16,8 +16,8 @@ :host([scale="s"]) { block-size: #{$calcite-size-24}; - margin: var(--calcite-size-xs); - margin-inline-start: var(--calcite-size-sm); + margin: var(--calcite-spacing-xs); + margin-inline-start: var(--calcite-spacing-sm); .chevron-container, .chevron { @@ -28,27 +28,27 @@ :host([scale="m"]) { block-size: #{$calcite-size-32}; - margin: var(--calcite-size-sm); - margin-inline-start: var(--calcite-size-sm-plus); + margin: var(--calcite-spacing-sm); + margin-inline-start: var(--calcite-spacing-sm-plus); .chevron-container, .chevron { min-inline-size: #{$calcite-size-32}; block-size: #{$calcite-size-32}; - --calcite-internal-action-padding-block: var(--calcite-size-xxs); + --calcite-internal-action-padding-block: var(--calcite-spacing-xxs); } } :host([scale="l"]) { block-size: #{$calcite-size-44}; - margin: var(--calcite-size-xs); - margin-inline-start: var(--calcite-size-sm); + margin: var(--calcite-spacing-xs); + margin-inline-start: var(--calcite-spacing-sm); .chevron-container, .chevron { min-inline-size: #{$calcite-size-44}; block-size: #{$calcite-size-44}; - --calcite-internal-action-padding-block: var(--calcite-size-sm-plus); + --calcite-internal-action-padding-block: var(--calcite-spacing-sm-plus); } } @@ -93,7 +93,7 @@ justify-start text-center leading-none; - gap: var(--calcite-size-xxs); + gap: var(--calcite-spacing-xxs); &.range-calendar { @apply justify-center; } @@ -110,7 +110,7 @@ .year, .suffix { @apply bg-foreground-1; - margin-inline: var(--calcite-size-xxs); + margin-inline: var(--calcite-spacing-xxs); font-weight: var(--calcite-font-weight-medium); color: var(--calcite-color-text-1); font-size: var(--calcite-font-size-md); @@ -138,18 +138,18 @@ } .month-select { - --calcite-select-spacing-inline: var(--calcite-size-xxs); - --calcite-internal-select-spacing-block: var(--calcite-size-xxs); - --calcite-internal-select-icon-container-padding-inline: var(--calcite-size-xxs); + --calcite-select-spacing-inline: var(--calcite-spacing-xxs); + --calcite-internal-select-spacing-block: var(--calcite-spacing-xxs); + --calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-xxs); --calcite-select-font-size: var(--calcite-font-size-md); --calcite-select-line-height: var(--calcite-font-line-height-fixed-lg); } :host([scale="s"]) .month-year-container { .month-select { - --calcite-select-spacing-inline: var(--calcite-size-xxxs); - --calcite-internal-select-spacing-block: var(--calcite-size-xxxs); - --calcite-internal-select-icon-container-padding-inline: var(--calcite-size-xxxs); + --calcite-select-spacing-inline: var(--calcite-spacing-base); + --calcite-internal-select-spacing-block: var(--calcite-spacing-base); + --calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-base); --calcite-internal-select-block-size: #{$calcite-size-24}; --calcite-select-font-size: var(--calcite-font-size); --calcite-select-line-height: var(--calcite-font-line-height-fixed-base); @@ -168,9 +168,9 @@ :host([scale="l"]) .month-year-container { .month-select { - --calcite-select-spacing-inline: var(--calcite-size-sm); - --calcite-internal-select-spacing-block: var(--calcite-size-sm); - --calcite-internal-select-icon-container-padding-inline: var(--calcite-size-sm); + --calcite-select-spacing-inline: var(--calcite-spacing-sm); + --calcite-internal-select-spacing-block: var(--calcite-spacing-sm); + --calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-sm); --calcite-internal-select-block-size: #{$calcite-size-44}; --calcite-select-font-size: var(--calcite-font-size-lg); --calcite-select-line-height: var(--calcite-font-line-height-fixed-xl); diff --git a/packages/calcite-components/src/components/date-picker-month/date-picker-month.scss b/packages/calcite-components/src/components/date-picker-month/date-picker-month.scss index 0421a7ebe7f..7b714f306da 100644 --- a/packages/calcite-components/src/components/date-picker-month/date-picker-month.scss +++ b/packages/calcite-components/src/components/date-picker-month/date-picker-month.scss @@ -15,8 +15,8 @@ .week-header-container { @apply flex; block-size: #{$calcite-size-16}; - padding-inline: var(--calcite-size-sm); - padding-block: var(--calcite-size-md); + padding-inline: var(--calcite-spacing-sm); + padding-block: var(--calcite-spacing-md); } .week-header { @@ -44,8 +44,8 @@ @apply grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; - padding-inline: var(--calcite-size-sm); - padding-block-end: var(--calcite-size-sm); + padding-inline: var(--calcite-spacing-sm); + padding-block-end: var(--calcite-spacing-sm); } .month-header { @@ -62,12 +62,12 @@ :host([scale="s"]) { .week-days { - padding-inline: var(--calcite-size-xs); - padding-block-end: var(--calcite-size-xs); + padding-inline: var(--calcite-spacing-xs); + padding-block-end: var(--calcite-spacing-xs); } .week-header-container { - padding-inline: var(--calcite-size-xs); - padding-block: var(--calcite-size-sm); + padding-inline: var(--calcite-spacing-xs); + padding-block: var(--calcite-spacing-sm); } .day { font-size: var(--calcite-font-size-sm); @@ -79,12 +79,12 @@ @apply text-n1h; } .week-days { - padding-inline: var(--calcite-size-md); - padding-block-end: var(--calcite-size-md); + padding-inline: var(--calcite-spacing-md); + padding-block-end: var(--calcite-spacing-md); } .week-header-container { - padding-inline: var(--calcite-size-md); - padding-block: var(--calcite-size-md-plus); + padding-inline: var(--calcite-spacing-md); + padding-block: var(--calcite-spacing-md-plus); } .day { font-size: var(--calcite-font-size-md); diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss index 41da93fef60..e2580eb08f0 100644 --- a/packages/calcite-components/src/components/dialog/dialog.scss +++ b/packages/calcite-components/src/components/dialog/dialog.scss @@ -96,7 +96,7 @@ } :host([scale="l"]) { - --calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-lg)); + --calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-md-plus)); --calcite-internal-dialog-min-size-x: 388px; --calcite-internal-dialog-min-size-y: 220px; } diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss b/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss index ad2074442c8..41490aa455c 100644 --- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss +++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss @@ -78,11 +78,11 @@ .dropdown-item-icon, .dropdown-item-icon--start { - padding-inline-end: var(--calcite-spacing-xl); + padding-inline-end: var(--calcite-spacing-lg); } .dropdown-item-icon--end { - padding-inline-start: var(--calcite-spacing-xl); + padding-inline-start: var(--calcite-spacing-lg); } } diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss index e50a5fb0545..04502437d60 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss @@ -90,13 +90,13 @@ .divider { @apply inline-block w-px; - margin-block: var(--calcite-size-xxs); + margin-block: var(--calcite-spacing-xxs); background-color: var(--calcite-color-border-2); } :host([layout="vertical"]) .divider-container { @apply w-full h-px border-t-0 border-b-0 border-l border-r-0; - padding-inline: var(--calcite-size-md); + padding-inline: var(--calcite-spacing-md); & .divider { @apply w-full h-px my-0; } @@ -125,7 +125,7 @@ .vertical-chevron-container { @apply flex items-center border border-solid border-color-input border-l-0; - padding-inline: var(--calcite-size-md); + padding-inline: var(--calcite-spacing-md); background-color: var(--calcite-color-foreground-1); calcite-icon { @@ -140,14 +140,14 @@ :host([range][layout="vertical"][scale="s"]) { .vertical-chevron-container, .divider-container { - padding-inline: var(--calcite-size-sm); + padding-inline: var(--calcite-spacing-sm); } } :host([range][layout="vertical"][scale="l"]) { .vertical-chevron-container, .divider-container { - padding-inline: var(--calcite-size-lg); + padding-inline: var(--calcite-spacing-lg); } } diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index c24ab3ba4aa..43fc8f6f9e3 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/packages/calcite-components/src/components/panel/panel.scss @@ -55,7 +55,7 @@ :host([scale="m"]) { --calcite-internal-panel-default-space: var(--calcite-spacing-md); - --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-lg); + --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-md-plus); .header-content { .heading { @@ -69,8 +69,8 @@ } :host([scale="l"]) { - --calcite-internal-panel-default-space: var(--calcite-spacing-xl); - --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xxl); + --calcite-internal-panel-default-space: var(--calcite-spacing-lg); + --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xl); .header-content { .heading { diff --git a/packages/calcite-components/src/components/select/select.scss b/packages/calcite-components/src/components/select/select.scss index e77d5cf925a..4821ce03b6f 100644 --- a/packages/calcite-components/src/components/select/select.scss +++ b/packages/calcite-components/src/components/select/select.scss @@ -33,20 +33,20 @@ :host([scale="s"]) { --calcite-select-font-size: theme("fontSize.n2h"); --calcite-select-spacing-inline: theme("spacing.2") theme("spacing.8"); - --calcite-internal-select-icon-container-padding-inline: var(--calcite-size-sm); + --calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-sm); --calcite-internal-select-block-size: #{$calcite-size-24}; } :host([scale="m"]) { --calcite-select-font-size: theme("fontSize.n1h"); --calcite-select-spacing-inline: theme("spacing.3") theme("spacing.10"); - --calcite-internal-select-icon-container-padding-inline: var(--calcite-size-md); + --calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-md); } :host([scale="l"]) { --calcite-select-font-size: theme("fontSize.0h"); --calcite-select-spacing-inline: theme("spacing.4") theme("spacing.12"); - --calcite-internal-select-icon-container-padding-inline: var(--calcite-size-lg); + --calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-lg); --calcite-internal-select-block-size: #{$calcite-size-44}; } diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.scss b/packages/calcite-components/src/components/tab-nav/tab-nav.scss index aedd6d89ffb..a4e0748fb2c 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.scss +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.scss @@ -94,13 +94,13 @@ $last-mask-color-stop-position: 51%; // we go beyond the half point to ensure th :host(:not([bordered])) { .scale-l { - --calcite-internal-tab-nav-gap: var(--calcite-size-xxl); + --calcite-internal-tab-nav-gap: var(--calcite-spacing-xxl); } .scale-m { - --calcite-internal-tab-nav-gap: var(--calcite-size-xl); + --calcite-internal-tab-nav-gap: var(--calcite-spacing-xl); } .scale-s { - --calcite-internal-tab-nav-gap: var(--calcite-size-lg); + --calcite-internal-tab-nav-gap: var(--calcite-spacing-lg); } .tab-titles-slot-wrapper { @@ -110,7 +110,7 @@ $last-mask-color-stop-position: 51%; // we go beyond the half point to ensure th :host([layout="center"]:not([bordered])) { .tab-titles-slot-wrapper { - padding-inline: var(--calcite-spacing-xxl); + padding-inline: var(--calcite-spacing-xl); } } diff --git a/packages/calcite-components/src/components/text-area/text-area.scss b/packages/calcite-components/src/components/text-area/text-area.scss index 5d2ef27d57c..d0beeb0fdb9 100644 --- a/packages/calcite-components/src/components/text-area/text-area.scss +++ b/packages/calcite-components/src/components/text-area/text-area.scss @@ -173,7 +173,7 @@ .footer { font-size: var(--calcite-text-area-font-size, var(--calcite-font-size-0)); padding-block: var(--calcite-spacing-md); - padding-inline: var(--calcite-spacing-xl); + padding-inline: var(--calcite-spacing-lg); } .footer { @@ -184,7 +184,7 @@ .footer, .character-limit { font-size: var(--calcite-text-area-font-size, var(--calcite-font-size-0)); - padding-inline-start: var(--calcite-spacing-xl); + padding-inline-start: var(--calcite-spacing-lg); } } diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss index debe6f74c7d..e56c32a880e 100644 --- a/packages/calcite-components/src/components/tile/tile.scss +++ b/packages/calcite-components/src/components/tile/tile.scss @@ -173,11 +173,11 @@ calcite-link { max-inline-size: 520px; min-inline-size: 160px; .container { - padding: var(--calcite-spacing-xl); + padding: var(--calcite-spacing-lg); } .content-container--has-content, .row { - gap: var(--calcite-spacing-xl); + gap: var(--calcite-spacing-lg); } .heading { font-size: var(--calcite-font-size-0); @@ -188,7 +188,7 @@ calcite-link { line-height: 1.20313rem; } .content-container--has-only-content-top-and-bottom slot[name="content-top"]::slotted(*) { - margin-block-end: var(--calcite-spacing-xl); + margin-block-end: var(--calcite-spacing-lg); } } diff --git a/packages/calcite-components/src/components/tree-item/tree-item.scss b/packages/calcite-components/src/components/tree-item/tree-item.scss index 73f320513a0..35cfb8714c1 100644 --- a/packages/calcite-components/src/components/tree-item/tree-item.scss +++ b/packages/calcite-components/src/components/tree-item/tree-item.scss @@ -69,8 +69,8 @@ margin-inline: theme("margin.3"); } .chevron { - padding-inline: var(--calcite-size-md); - padding-block: var(--calcite-size-sm-plus); + padding-inline: var(--calcite-spacing-md); + padding-block: var(--calcite-spacing-sm-plus); } } } diff --git a/packages/calcite-components/src/demos/validation.html b/packages/calcite-components/src/demos/validation.html index f4d1bb7d1a7..3e0bfbd04d1 100644 --- a/packages/calcite-components/src/demos/validation.html +++ b/packages/calcite-components/src/demos/validation.html @@ -23,7 +23,7 @@ max-width: 1024px; min-width: 280px; width: 70vw; - padding: 0 var(--calcite-spacing-xxl); + padding: 0 var(--calcite-spacing-xl); margin: 0 auto; background-color: var(--calcite-color-background); } @@ -31,8 +31,8 @@ /* Mode Switcher */ #mode-container { position: fixed; - top: var(--calcite-spacing-xxl); - right: var(--calcite-spacing-xxl); + top: var(--calcite-spacing-xl); + right: var(--calcite-spacing-xl); z-index: 2; border: var(--calcite-border-width-sm) solid; background-color: var(--calcite-color-background); @@ -58,16 +58,16 @@ /* Form */ ol { - margin: var(--calcite-spacing-xl) 0; + margin: var(--calcite-spacing-lg) 0; padding: 0 var(--calcite-spacing-xxxl); } ol li { - padding: 0 0 var(--calcite-spacing-xxl) 0; + padding: 0 0 var(--calcite-spacing-xl) 0; } fieldset { - padding: var(--calcite-spacing-xl); + padding: var(--calcite-spacing-lg); margin: var(--calcite-spacing-xxxl) 0; border-collapse: collapse; border: var(--calcite-border-width-sm) solid; From 0fcf24993d3e378c6284102a136889b0634b50fa Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Wed, 27 Nov 2024 10:54:21 -0800 Subject: [PATCH 16/25] fix(card-group, date-picker-month-header, panel): resolve misreferenced tokens --- .../src/components/card-group/card-group.scss | 2 +- .../date-picker-month-header.tsx | 28 +++++++++++++++---- .../src/components/panel/panel.scss | 10 ++++--- 3 files changed, 29 insertions(+), 11 deletions(-) diff --git a/packages/calcite-components/src/components/card-group/card-group.scss b/packages/calcite-components/src/components/card-group/card-group.scss index b9df02577cf..c1e96122496 100644 --- a/packages/calcite-components/src/components/card-group/card-group.scss +++ b/packages/calcite-components/src/components/card-group/card-group.scss @@ -14,7 +14,7 @@ .container { display: flex; flex-wrap: wrap; - gap: var(--calcite-card-group-space, var(--calcite-card-group-gap, var(--calcite-spacing-md))); + gap: var(--calcite-card-group-space, var(--calcite-card-group-gap, var(--calcite-spacing-base))); } @include base-component(); diff --git a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx index d8d3d29df24..cc2f35afd0d 100644 --- a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx +++ b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx @@ -1,7 +1,7 @@ import { - calciteSizeXxxs, - calciteSizeXxs, - calciteSizeSm, + calciteSpacingBase, + calciteSpacingXxs, + calciteSpacingSm, } from "@esri/calcite-design-tokens/dist/es6/global.js"; import { PropertyValues } from "lit"; import { createRef } from "lit-html/directives/ref.js"; @@ -352,15 +352,31 @@ export class DatePickerMonthHeader extends LitElement { } } + private getPx(value: string): string { + const num = Number(value.replace(/[rem|px]/g, "")); + const base = 16; + + if (value.includes("rem")) { + return `${num * base}px`; + } + + return `${num}px`; + } + private getYearSelectPadding(): string { + let padding; switch (this.scale) { case "l": - return calciteSizeSm; + padding = calciteSpacingSm; + break; case "s": - return calciteSizeXxxs; + padding = calciteSpacingBase; + break; default: - return calciteSizeXxs; + padding = calciteSpacingXxs; + break; } + return this.getPx(padding); } // #endregion diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index 43fc8f6f9e3..ef4b7e2b437 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/packages/calcite-components/src/components/panel/panel.scss @@ -40,7 +40,9 @@ :host([scale="s"]) { --calcite-internal-panel-default-space: var(--calcite-spacing-sm); - --calcite-internal-panel-header-vertical-padding: 10px; // this should use a spacing token once made available + --calcite-internal-panel-header-vertical-padding: var( + --calcite-spacing-sm-plus + ); // this should use a spacing token once made available .header-content { .heading { @@ -55,7 +57,7 @@ :host([scale="m"]) { --calcite-internal-panel-default-space: var(--calcite-spacing-md); - --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-md-plus); + --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-lg); .header-content { .heading { @@ -69,8 +71,8 @@ } :host([scale="l"]) { - --calcite-internal-panel-default-space: var(--calcite-spacing-lg); - --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xl); + --calcite-internal-panel-default-space: var(--calcite-spacing-xl); + --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xxl); .header-content { .heading { From 69d41fe32ea39e1250da4e270bfaa71320cc54f0 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Wed, 27 Nov 2024 11:19:10 -0800 Subject: [PATCH 17/25] fix(panel): update space tokens --- .../calcite-components/src/components/panel/panel.scss | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index ef4b7e2b437..374625d9302 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/packages/calcite-components/src/components/panel/panel.scss @@ -40,9 +40,7 @@ :host([scale="s"]) { --calcite-internal-panel-default-space: var(--calcite-spacing-sm); - --calcite-internal-panel-header-vertical-padding: var( - --calcite-spacing-sm-plus - ); // this should use a spacing token once made available + --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-sm-plus); .header-content { .heading { @@ -56,8 +54,8 @@ } :host([scale="m"]) { - --calcite-internal-panel-default-space: var(--calcite-spacing-md); - --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-lg); + --calcite-internal-panel-default-space: var(--calcite-spacing-md-plus); + --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-md); .header-content { .heading { From 4ad73263b17713b05ec25bf22b7dd74a5debbee9 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Wed, 27 Nov 2024 11:37:46 -0800 Subject: [PATCH 18/25] fix(panel): resolve token --- packages/calcite-components/src/components/panel/panel.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index 374625d9302..7fed03f7e2f 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/packages/calcite-components/src/components/panel/panel.scss @@ -54,8 +54,8 @@ } :host([scale="m"]) { - --calcite-internal-panel-default-space: var(--calcite-spacing-md-plus); - --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-md); + --calcite-internal-panel-default-space: var(--calcite-spacing-md); + --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-md-plus); .header-content { .heading { From 3302076f03f3f509624bc38d36941e2897d75a27 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Wed, 27 Nov 2024 11:56:22 -0800 Subject: [PATCH 19/25] fix(panel): token values --- packages/calcite-components/src/components/panel/panel.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index 7fed03f7e2f..008ea4fa5e2 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/packages/calcite-components/src/components/panel/panel.scss @@ -55,7 +55,7 @@ :host([scale="m"]) { --calcite-internal-panel-default-space: var(--calcite-spacing-md); - --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-md-plus); + --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-lg); .header-content { .heading { @@ -69,8 +69,8 @@ } :host([scale="l"]) { - --calcite-internal-panel-default-space: var(--calcite-spacing-xl); - --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xxl); + --calcite-internal-panel-default-space: var(--calcite-spacing-lg); + --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xl); .header-content { .heading { From 2085fd8f3aa46d920bd792d21e56aaf1e1991a81 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Wed, 27 Nov 2024 12:20:48 -0800 Subject: [PATCH 20/25] fix(action-group): set missing border --- .../src/components/action-group/action-group.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/calcite-components/src/components/action-group/action-group.scss b/packages/calcite-components/src/components/action-group/action-group.scss index b8fb7617d8a..779b8496397 100755 --- a/packages/calcite-components/src/components/action-group/action-group.scss +++ b/packages/calcite-components/src/components/action-group/action-group.scss @@ -72,4 +72,8 @@ } } +:host([layout="horizontal"]) ::slotted(calcite-action-group) { + border-inline-end: var(--calcite-size-px); +} + @include base-component(); From f18208b5462517d69002d103c473dc1eac40481c Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Wed, 27 Nov 2024 12:20:57 -0800 Subject: [PATCH 21/25] fix(panel): tokens --- packages/calcite-components/src/components/panel/panel.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index 008ea4fa5e2..85838551be4 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/packages/calcite-components/src/components/panel/panel.scss @@ -55,7 +55,7 @@ :host([scale="m"]) { --calcite-internal-panel-default-space: var(--calcite-spacing-md); - --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-lg); + --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-md-plus); .header-content { .heading { @@ -88,7 +88,7 @@ @apply flex items-start self-stretch; padding: var(--calcite-internal-panel-default-space); border-block-start: 1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3)); - background-color: var(--calcite-panel-background-color, var(--calcite-color-foreground-1)); + background-color: var(--calcite-color-foreground-1); } .container { From 2a1e59092514a6cd396e5c5ec1c5d4b2a03a33e2 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Wed, 27 Nov 2024 12:21:13 -0800 Subject: [PATCH 22/25] fix(scrim): remove unnecessary token assignment --- packages/calcite-components/src/components/scrim/scrim.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/calcite-components/src/components/scrim/scrim.scss b/packages/calcite-components/src/components/scrim/scrim.scss index 10620e5b889..66c002facb6 100644 --- a/packages/calcite-components/src/components/scrim/scrim.scss +++ b/packages/calcite-components/src/components/scrim/scrim.scss @@ -5,9 +5,6 @@ * * @prop --calcite-scrim-background: Specifies the background color of the scrim. */ -:host { - --calcite-scrim-background: var(--calcite-color-transparent-scrim); -} :host { @apply absolute From 3fd82a1915c55577797f8d6fb0ac5be2a0c3e297 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Wed, 27 Nov 2024 13:37:43 -0800 Subject: [PATCH 23/25] fix(panel): tokens --- packages/calcite-components/src/components/panel/panel.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index 85838551be4..9977019f3d9 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/packages/calcite-components/src/components/panel/panel.scss @@ -55,7 +55,7 @@ :host([scale="m"]) { --calcite-internal-panel-default-space: var(--calcite-spacing-md); - --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-md-plus); + --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-lg); .header-content { .heading { @@ -69,8 +69,8 @@ } :host([scale="l"]) { - --calcite-internal-panel-default-space: var(--calcite-spacing-lg); - --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xl); + --calcite-internal-panel-default-space: var(--calcite-spacing-xl); + --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xxl); .header-content { .heading { From 18eb8eae7e75b0c908f0a1ef9f45e085f56f0b0a Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Wed, 27 Nov 2024 14:20:57 -0800 Subject: [PATCH 24/25] Revert "fix(panel): tokens" This reverts commit f18208b5462517d69002d103c473dc1eac40481c. --- packages/calcite-components/src/components/panel/panel.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index 9977019f3d9..af173c14e4a 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/packages/calcite-components/src/components/panel/panel.scss @@ -88,7 +88,7 @@ @apply flex items-start self-stretch; padding: var(--calcite-internal-panel-default-space); border-block-start: 1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3)); - background-color: var(--calcite-color-foreground-1); + background-color: var(--calcite-panel-background-color, var(--calcite-color-foreground-1)); } .container { From 96e21472d124c621bd7f7df48f05020f9f3a4208 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Wed, 27 Nov 2024 14:41:06 -0800 Subject: [PATCH 25/25] fix(panel): switch tokens to align with original values --- packages/calcite-components/src/components/panel/panel.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index af173c14e4a..6e986fd34b2 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/packages/calcite-components/src/components/panel/panel.scss @@ -55,7 +55,7 @@ :host([scale="m"]) { --calcite-internal-panel-default-space: var(--calcite-spacing-md); - --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-lg); + --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-md-plus); .header-content { .heading { @@ -69,8 +69,8 @@ } :host([scale="l"]) { - --calcite-internal-panel-default-space: var(--calcite-spacing-xl); - --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xxl); + --calcite-internal-panel-default-space: var(--calcite-spacing-lg); + --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xl); .header-content { .heading {