From 2e98e162e04e228d8e323349366ba10360876972 Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Tue, 23 Sep 2025 15:28:55 +0200 Subject: [PATCH 1/8] feat(tokens): use a modular font size scale which is easier to implement and override in css --- design-tokens/$metadata.json | 3 +- design-tokens/$themes.json | 9 +- .../modes/typography/size/global.json | 96 +++++++++++++++++ .../modes/typography/size/large.json | 102 ++---------------- .../modes/typography/size/medium.json | 102 ++---------------- .../modes/typography/size/small.json | 102 ++---------------- 6 files changed, 134 insertions(+), 280 deletions(-) create mode 100644 design-tokens/primitives/modes/typography/size/global.json diff --git a/design-tokens/$metadata.json b/design-tokens/$metadata.json index 4bab0d99e1..fd6c430fb9 100644 --- a/design-tokens/$metadata.json +++ b/design-tokens/$metadata.json @@ -1,10 +1,11 @@ { "tokenSetOrder": [ "primitives/globals", + "primitives/modes/size/global", "primitives/modes/size/small", "primitives/modes/size/medium", "primitives/modes/size/large", - "primitives/modes/size/global", + "primitives/modes/typography/size/global", "primitives/modes/typography/size/small", "primitives/modes/typography/size/medium", "primitives/modes/typography/size/large", diff --git a/design-tokens/$themes.json b/design-tokens/$themes.json index 299e32e964..a6528bac1f 100644 --- a/design-tokens/$themes.json +++ b/design-tokens/$themes.json @@ -6,7 +6,8 @@ "selectedTokenSets": { "primitives/modes/size/medium": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/typography/size/medium": "enabled" + "primitives/modes/typography/size/medium": "source", + "primitives/modes/typography/size/global": "enabled" }, "$figmaCollectionId": "VariableCollectionId:36248:20757", "$figmaModeId": "41630:1", @@ -19,7 +20,8 @@ "selectedTokenSets": { "primitives/modes/size/large": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/typography/size/large": "enabled" + "primitives/modes/typography/size/large": "source", + "primitives/modes/typography/size/global": "enabled" }, "$figmaCollectionId": "VariableCollectionId:36248:20757", "$figmaModeId": "41630:2", @@ -32,7 +34,8 @@ "selectedTokenSets": { "primitives/modes/size/small": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/typography/size/small": "enabled" + "primitives/modes/typography/size/small": "source", + "primitives/modes/typography/size/global": "enabled" }, "$figmaCollectionId": "VariableCollectionId:36248:20757", "$figmaModeId": "41630:3", diff --git a/design-tokens/primitives/modes/typography/size/global.json b/design-tokens/primitives/modes/typography/size/global.json new file mode 100644 index 0000000000..a3dd5469ea --- /dev/null +++ b/design-tokens/primitives/modes/typography/size/global.json @@ -0,0 +1,96 @@ +{ + "line-height": { + "sm": { + "$type": "lineHeights", + "$value": "130%" + }, + "md": { + "$type": "lineHeights", + "$value": "150%" + }, + "lg": { + "$type": "lineHeights", + "$value": "170%" + } + }, + "font-size": { + "1": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 3), 0)" + }, + "2": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 2), 0)" + }, + "3": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 1), 0)" + }, + "4": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 0), 0)" + }, + "5": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 1), 0)" + }, + "6": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 2), 0)" + }, + "7": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 3), 0)" + }, + "8": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 5), 0)" + }, + "9": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 7), 0)" + }, + "10": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 9), 0)" + } + }, + "letter-spacing": { + "1": { + "$type": "letterSpacing", + "$value": "-1%" + }, + "2": { + "$type": "letterSpacing", + "$value": "-0.5%" + }, + "3": { + "$type": "letterSpacing", + "$value": "-0.25%" + }, + "4": { + "$type": "letterSpacing", + "$value": "-0.15%" + }, + "5": { + "$type": "letterSpacing", + "$value": "0%" + }, + "6": { + "$type": "letterSpacing", + "$value": "0.15%" + }, + "7": { + "$type": "letterSpacing", + "$value": "0.25%" + }, + "8": { + "$type": "letterSpacing", + "$value": "0.5%" + }, + "9": { + "$type": "letterSpacing", + "$value": "1.5%" + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/typography/size/large.json b/design-tokens/primitives/modes/typography/size/large.json index 9d7ed9b3e6..d423e72542 100644 --- a/design-tokens/primitives/modes/typography/size/large.json +++ b/design-tokens/primitives/modes/typography/size/large.json @@ -1,96 +1,14 @@ { - "line-height": { - "sm": { - "$type": "lineHeights", - "$value": "130%" - }, - "md": { - "$type": "lineHeights", - "$value": "150%" - }, - "lg": { - "$type": "lineHeights", - "$value": "170%" - } - }, - "font-size": { - "1": { - "$type": "fontSizes", - "$value": "13" - }, - "2": { - "$type": "fontSizes", - "$value": "16" - }, - "3": { - "$type": "fontSizes", - "$value": "18" - }, - "4": { - "$type": "fontSizes", - "$value": "21" - }, - "5": { - "$type": "fontSizes", - "$value": "24" - }, - "6": { - "$type": "fontSizes", - "$value": "30" - }, - "7": { - "$type": "fontSizes", - "$value": "36" - }, - "8": { - "$type": "fontSizes", - "$value": "48" - }, - "9": { - "$type": "fontSizes", - "$value": "60" - }, - "10": { - "$type": "fontSizes", - "$value": "72" - } - }, - "letter-spacing": { - "1": { - "$type": "letterSpacing", - "$value": "-1%" - }, - "2": { - "$type": "letterSpacing", - "$value": "-0.5%" - }, - "3": { - "$type": "letterSpacing", - "$value": "-0.25%" - }, - "4": { - "$type": "letterSpacing", - "$value": "-0.15%" - }, - "5": { - "$type": "letterSpacing", - "$value": "0%" - }, - "6": { - "$type": "letterSpacing", - "$value": "0.15%" - }, - "7": { - "$type": "letterSpacing", - "$value": "0.25%" - }, - "8": { - "$type": "letterSpacing", - "$value": "0.5%" - }, - "9": { - "$type": "letterSpacing", - "$value": "1.5%" + "font-scale": { + "_base": { + "$type": "number", + "$value": "21", + "$description": "The font size (in px) to use as the basis for the scale. Is used as font-size.4." + }, + "_ratio": { + "$type": "number", + "$value": "1.146", + "$description": "The ratio used to calculate each step in the scale. Must be larger than 1 (a ratio of 1 would make all font sizes the same, while a number between 0 and 1 effectively inverts the scale). Larger numbers result in a larger font-size.10 and a smaller font-size.1." } } } \ No newline at end of file diff --git a/design-tokens/primitives/modes/typography/size/medium.json b/design-tokens/primitives/modes/typography/size/medium.json index f861fb854c..0131aa6148 100644 --- a/design-tokens/primitives/modes/typography/size/medium.json +++ b/design-tokens/primitives/modes/typography/size/medium.json @@ -1,96 +1,14 @@ { - "line-height": { - "sm": { - "$type": "lineHeights", - "$value": "130%" - }, - "md": { - "$type": "lineHeights", - "$value": "150%" - }, - "lg": { - "$type": "lineHeights", - "$value": "170%" - } - }, - "font-size": { - "1": { - "$type": "fontSizes", - "$value": "12" - }, - "2": { - "$type": "fontSizes", - "$value": "14" - }, - "3": { - "$type": "fontSizes", - "$value": "16" - }, - "4": { - "$type": "fontSizes", - "$value": "18" - }, - "5": { - "$type": "fontSizes", - "$value": "21" - }, - "6": { - "$type": "fontSizes", - "$value": "24" - }, - "7": { - "$type": "fontSizes", - "$value": "30" - }, - "8": { - "$type": "fontSizes", - "$value": "36" - }, - "9": { - "$type": "fontSizes", - "$value": "48" - }, - "10": { - "$type": "fontSizes", - "$value": "60" - } - }, - "letter-spacing": { - "1": { - "$type": "letterSpacing", - "$value": "-1%" - }, - "2": { - "$type": "letterSpacing", - "$value": "-0.5%" - }, - "3": { - "$type": "letterSpacing", - "$value": "-0.25%" - }, - "4": { - "$type": "letterSpacing", - "$value": "-0.15%" - }, - "5": { - "$type": "letterSpacing", - "$value": "0%" - }, - "6": { - "$type": "letterSpacing", - "$value": "0.15%" - }, - "7": { - "$type": "letterSpacing", - "$value": "0.25%" - }, - "8": { - "$type": "letterSpacing", - "$value": "0.5%" - }, - "9": { - "$type": "letterSpacing", - "$value": "1.5%" + "font-scale": { + "_base": { + "$type": "number", + "$value": "18", + "$description": "The font size (in px) to use as the basis for the scale. Is used as font-size.4." + }, + "_ratio": { + "$type": "number", + "$value": "1.143", + "$description": "The ratio used to calculate each step in the scale. Must be larger than 1 (a ratio of 1 would make all font sizes the same, while a number between 0 and 1 effectively inverts the scale). Larger numbers result in a larger font-size.10 and a smaller font-size.1." } } } \ No newline at end of file diff --git a/design-tokens/primitives/modes/typography/size/small.json b/design-tokens/primitives/modes/typography/size/small.json index 99e67f561f..4ed462d883 100644 --- a/design-tokens/primitives/modes/typography/size/small.json +++ b/design-tokens/primitives/modes/typography/size/small.json @@ -1,96 +1,14 @@ { - "line-height": { - "sm": { - "$type": "lineHeights", - "$value": "130%" - }, - "md": { - "$type": "lineHeights", - "$value": "150%" - }, - "lg": { - "$type": "lineHeights", - "$value": "170%" - } - }, - "font-size": { - "1": { - "$type": "fontSizes", - "$value": "11" - }, - "2": { - "$type": "fontSizes", - "$value": "13" - }, - "3": { - "$type": "fontSizes", - "$value": "14" - }, - "4": { - "$type": "fontSizes", - "$value": "16" - }, - "5": { - "$type": "fontSizes", - "$value": "18" - }, - "6": { - "$type": "fontSizes", - "$value": "21" - }, - "7": { - "$type": "fontSizes", - "$value": "24" - }, - "8": { - "$type": "fontSizes", - "$value": "30" - }, - "9": { - "$type": "fontSizes", - "$value": "36" - }, - "10": { - "$type": "fontSizes", - "$value": "48" - } - }, - "letter-spacing": { - "1": { - "$type": "letterSpacing", - "$value": "-1%" - }, - "2": { - "$type": "letterSpacing", - "$value": "-0.5%" - }, - "3": { - "$type": "letterSpacing", - "$value": "-0.25%" - }, - "4": { - "$type": "letterSpacing", - "$value": "-0.15%" - }, - "5": { - "$type": "letterSpacing", - "$value": "0%" - }, - "6": { - "$type": "letterSpacing", - "$value": "0.15%" - }, - "7": { - "$type": "letterSpacing", - "$value": "0.25%" - }, - "8": { - "$type": "letterSpacing", - "$value": "0.5%" - }, - "9": { - "$type": "letterSpacing", - "$value": "1.5%" + "font-scale": { + "_base": { + "$type": "number", + "$value": "16", + "$description": "The font size (in px) to use as the basis for the scale. Is used as font-size.4." + }, + "_ratio": { + "$type": "number", + "$value": "1.131", + "$description": "The ratio used to calculate each step in the scale. Must be larger than 1 (a ratio of 1 would make all font sizes the same, while a number between 0 and 1 effectively inverts the scale). Larger numbers result in a larger font-size.10 and a smaller font-size.1." } } } \ No newline at end of file From ab032183025e5f75d88e756754b4a74b00af3714 Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Tue, 23 Sep 2025 15:28:55 +0200 Subject: [PATCH 2/8] update token template --- packages/cli/src/tokens/create.ts | 3 +- packages/cli/src/tokens/create/defaults.ts | 6 +- .../src/tokens/create/generators/$metadata.ts | 3 +- .../src/tokens/create/generators/$themes.ts | 9 +- .../modes/typography/size/global.json | 96 +++++++++++++++++ .../modes/typography/size/large.json | 102 ++---------------- .../modes/typography/size/medium.json | 102 ++---------------- .../modes/typography/size/small.json | 102 ++---------------- 8 files changed, 141 insertions(+), 282 deletions(-) create mode 100644 packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/global.json diff --git a/packages/cli/src/tokens/create.ts b/packages/cli/src/tokens/create.ts index f0bca5d9ad..a981c70d1a 100644 --- a/packages/cli/src/tokens/create.ts +++ b/packages/cli/src/tokens/create.ts @@ -33,10 +33,11 @@ export const createTokens = async (opts: Theme) => { const tokenSets: TokenSets = new Map([ ...getDefaultTokens([ 'primitives/globals', + 'primitives/modes/size/global', 'primitives/modes/size/small', 'primitives/modes/size/medium', 'primitives/modes/size/large', - 'primitives/modes/size/global', + 'primitives/modes/typography/size/global', 'primitives/modes/typography/size/small', 'primitives/modes/typography/size/medium', 'primitives/modes/typography/size/large', diff --git a/packages/cli/src/tokens/create/defaults.ts b/packages/cli/src/tokens/create/defaults.ts index bd29cfb533..ddc9eb8117 100644 --- a/packages/cli/src/tokens/create/defaults.ts +++ b/packages/cli/src/tokens/create/defaults.ts @@ -4,6 +4,9 @@ import sizeGlobal from '../template/design-tokens/primitives/modes/size/global.j import sizeLarge from '../template/design-tokens/primitives/modes/size/large.json' with { type: 'json' }; import sizeMedium from '../template/design-tokens/primitives/modes/size/medium.json' with { type: 'json' }; import sizeSmall from '../template/design-tokens/primitives/modes/size/small.json' with { type: 'json' }; +import typgraphyGlobal from '../template/design-tokens/primitives/modes/typography/size/global.json' with { + type: 'json', +}; import typgraphyLarge from '../template/design-tokens/primitives/modes/typography/size/large.json' with { type: 'json', }; @@ -18,10 +21,11 @@ import type { TokenSet } from '../types.js'; const defaultTokens: Record = { 'primitives/globals': globals, + 'primitives/modes/size/global': sizeGlobal, 'primitives/modes/size/small': sizeSmall, 'primitives/modes/size/medium': sizeMedium, 'primitives/modes/size/large': sizeLarge, - 'primitives/modes/size/global': sizeGlobal, + 'primitives/modes/typography/size/global': typgraphyGlobal, 'primitives/modes/typography/size/small': typgraphySmall, 'primitives/modes/typography/size/medium': typgraphyMedium, 'primitives/modes/typography/size/large': typgraphyLarge, diff --git a/packages/cli/src/tokens/create/generators/$metadata.ts b/packages/cli/src/tokens/create/generators/$metadata.ts index 3b9dca2286..8d808c5e2a 100644 --- a/packages/cli/src/tokens/create/generators/$metadata.ts +++ b/packages/cli/src/tokens/create/generators/$metadata.ts @@ -9,10 +9,11 @@ export function generate$Metadata(schemes: ColorScheme[], themes: string[], colo return { tokenSetOrder: [ 'primitives/globals', + 'primitives/modes/size/global', 'primitives/modes/size/small', 'primitives/modes/size/medium', 'primitives/modes/size/large', - 'primitives/modes/size/global', + 'primitives/modes/typography/size/global', 'primitives/modes/typography/size/small', 'primitives/modes/typography/size/medium', 'primitives/modes/typography/size/large', diff --git a/packages/cli/src/tokens/create/generators/$themes.ts b/packages/cli/src/tokens/create/generators/$themes.ts index 36b852ea83..e0de12f8e1 100644 --- a/packages/cli/src/tokens/create/generators/$themes.ts +++ b/packages/cli/src/tokens/create/generators/$themes.ts @@ -45,7 +45,8 @@ function generateSizeGroup(): ThemeObject_[] { selectedTokenSets: { 'primitives/modes/size/medium': TokenSetStatus.SOURCE, 'primitives/modes/size/global': TokenSetStatus.ENABLED, - 'primitives/modes/typography/size/medium': TokenSetStatus.ENABLED, + 'primitives/modes/typography/size/medium': TokenSetStatus.SOURCE, + 'primitives/modes/typography/size/global': TokenSetStatus.ENABLED, }, $figmaCollectionId: 'VariableCollectionId:36248:20757', $figmaModeId: '41630:1', @@ -58,7 +59,8 @@ function generateSizeGroup(): ThemeObject_[] { selectedTokenSets: { 'primitives/modes/size/large': TokenSetStatus.SOURCE, 'primitives/modes/size/global': TokenSetStatus.ENABLED, - 'primitives/modes/typography/size/large': TokenSetStatus.ENABLED, + 'primitives/modes/typography/size/large': TokenSetStatus.SOURCE, + 'primitives/modes/typography/size/global': TokenSetStatus.ENABLED, }, $figmaCollectionId: 'VariableCollectionId:36248:20757', $figmaModeId: '41630:2', @@ -71,7 +73,8 @@ function generateSizeGroup(): ThemeObject_[] { selectedTokenSets: { 'primitives/modes/size/small': TokenSetStatus.SOURCE, 'primitives/modes/size/global': TokenSetStatus.ENABLED, - 'primitives/modes/typography/size/small': TokenSetStatus.ENABLED, + 'primitives/modes/typography/size/small': TokenSetStatus.SOURCE, + 'primitives/modes/typography/size/global': TokenSetStatus.ENABLED, }, $figmaCollectionId: 'VariableCollectionId:36248:20757', $figmaModeId: '41630:3', diff --git a/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/global.json b/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/global.json new file mode 100644 index 0000000000..a3dd5469ea --- /dev/null +++ b/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/global.json @@ -0,0 +1,96 @@ +{ + "line-height": { + "sm": { + "$type": "lineHeights", + "$value": "130%" + }, + "md": { + "$type": "lineHeights", + "$value": "150%" + }, + "lg": { + "$type": "lineHeights", + "$value": "170%" + } + }, + "font-size": { + "1": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 3), 0)" + }, + "2": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 2), 0)" + }, + "3": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 1), 0)" + }, + "4": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 0), 0)" + }, + "5": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 1), 0)" + }, + "6": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 2), 0)" + }, + "7": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 3), 0)" + }, + "8": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 5), 0)" + }, + "9": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 7), 0)" + }, + "10": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 9), 0)" + } + }, + "letter-spacing": { + "1": { + "$type": "letterSpacing", + "$value": "-1%" + }, + "2": { + "$type": "letterSpacing", + "$value": "-0.5%" + }, + "3": { + "$type": "letterSpacing", + "$value": "-0.25%" + }, + "4": { + "$type": "letterSpacing", + "$value": "-0.15%" + }, + "5": { + "$type": "letterSpacing", + "$value": "0%" + }, + "6": { + "$type": "letterSpacing", + "$value": "0.15%" + }, + "7": { + "$type": "letterSpacing", + "$value": "0.25%" + }, + "8": { + "$type": "letterSpacing", + "$value": "0.5%" + }, + "9": { + "$type": "letterSpacing", + "$value": "1.5%" + } + } +} \ No newline at end of file diff --git a/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/large.json b/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/large.json index 9d7ed9b3e6..d423e72542 100644 --- a/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/large.json +++ b/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/large.json @@ -1,96 +1,14 @@ { - "line-height": { - "sm": { - "$type": "lineHeights", - "$value": "130%" - }, - "md": { - "$type": "lineHeights", - "$value": "150%" - }, - "lg": { - "$type": "lineHeights", - "$value": "170%" - } - }, - "font-size": { - "1": { - "$type": "fontSizes", - "$value": "13" - }, - "2": { - "$type": "fontSizes", - "$value": "16" - }, - "3": { - "$type": "fontSizes", - "$value": "18" - }, - "4": { - "$type": "fontSizes", - "$value": "21" - }, - "5": { - "$type": "fontSizes", - "$value": "24" - }, - "6": { - "$type": "fontSizes", - "$value": "30" - }, - "7": { - "$type": "fontSizes", - "$value": "36" - }, - "8": { - "$type": "fontSizes", - "$value": "48" - }, - "9": { - "$type": "fontSizes", - "$value": "60" - }, - "10": { - "$type": "fontSizes", - "$value": "72" - } - }, - "letter-spacing": { - "1": { - "$type": "letterSpacing", - "$value": "-1%" - }, - "2": { - "$type": "letterSpacing", - "$value": "-0.5%" - }, - "3": { - "$type": "letterSpacing", - "$value": "-0.25%" - }, - "4": { - "$type": "letterSpacing", - "$value": "-0.15%" - }, - "5": { - "$type": "letterSpacing", - "$value": "0%" - }, - "6": { - "$type": "letterSpacing", - "$value": "0.15%" - }, - "7": { - "$type": "letterSpacing", - "$value": "0.25%" - }, - "8": { - "$type": "letterSpacing", - "$value": "0.5%" - }, - "9": { - "$type": "letterSpacing", - "$value": "1.5%" + "font-scale": { + "_base": { + "$type": "number", + "$value": "21", + "$description": "The font size (in px) to use as the basis for the scale. Is used as font-size.4." + }, + "_ratio": { + "$type": "number", + "$value": "1.146", + "$description": "The ratio used to calculate each step in the scale. Must be larger than 1 (a ratio of 1 would make all font sizes the same, while a number between 0 and 1 effectively inverts the scale). Larger numbers result in a larger font-size.10 and a smaller font-size.1." } } } \ No newline at end of file diff --git a/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/medium.json b/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/medium.json index f861fb854c..0131aa6148 100644 --- a/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/medium.json +++ b/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/medium.json @@ -1,96 +1,14 @@ { - "line-height": { - "sm": { - "$type": "lineHeights", - "$value": "130%" - }, - "md": { - "$type": "lineHeights", - "$value": "150%" - }, - "lg": { - "$type": "lineHeights", - "$value": "170%" - } - }, - "font-size": { - "1": { - "$type": "fontSizes", - "$value": "12" - }, - "2": { - "$type": "fontSizes", - "$value": "14" - }, - "3": { - "$type": "fontSizes", - "$value": "16" - }, - "4": { - "$type": "fontSizes", - "$value": "18" - }, - "5": { - "$type": "fontSizes", - "$value": "21" - }, - "6": { - "$type": "fontSizes", - "$value": "24" - }, - "7": { - "$type": "fontSizes", - "$value": "30" - }, - "8": { - "$type": "fontSizes", - "$value": "36" - }, - "9": { - "$type": "fontSizes", - "$value": "48" - }, - "10": { - "$type": "fontSizes", - "$value": "60" - } - }, - "letter-spacing": { - "1": { - "$type": "letterSpacing", - "$value": "-1%" - }, - "2": { - "$type": "letterSpacing", - "$value": "-0.5%" - }, - "3": { - "$type": "letterSpacing", - "$value": "-0.25%" - }, - "4": { - "$type": "letterSpacing", - "$value": "-0.15%" - }, - "5": { - "$type": "letterSpacing", - "$value": "0%" - }, - "6": { - "$type": "letterSpacing", - "$value": "0.15%" - }, - "7": { - "$type": "letterSpacing", - "$value": "0.25%" - }, - "8": { - "$type": "letterSpacing", - "$value": "0.5%" - }, - "9": { - "$type": "letterSpacing", - "$value": "1.5%" + "font-scale": { + "_base": { + "$type": "number", + "$value": "18", + "$description": "The font size (in px) to use as the basis for the scale. Is used as font-size.4." + }, + "_ratio": { + "$type": "number", + "$value": "1.143", + "$description": "The ratio used to calculate each step in the scale. Must be larger than 1 (a ratio of 1 would make all font sizes the same, while a number between 0 and 1 effectively inverts the scale). Larger numbers result in a larger font-size.10 and a smaller font-size.1." } } } \ No newline at end of file diff --git a/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/small.json b/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/small.json index 99e67f561f..4ed462d883 100644 --- a/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/small.json +++ b/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/small.json @@ -1,96 +1,14 @@ { - "line-height": { - "sm": { - "$type": "lineHeights", - "$value": "130%" - }, - "md": { - "$type": "lineHeights", - "$value": "150%" - }, - "lg": { - "$type": "lineHeights", - "$value": "170%" - } - }, - "font-size": { - "1": { - "$type": "fontSizes", - "$value": "11" - }, - "2": { - "$type": "fontSizes", - "$value": "13" - }, - "3": { - "$type": "fontSizes", - "$value": "14" - }, - "4": { - "$type": "fontSizes", - "$value": "16" - }, - "5": { - "$type": "fontSizes", - "$value": "18" - }, - "6": { - "$type": "fontSizes", - "$value": "21" - }, - "7": { - "$type": "fontSizes", - "$value": "24" - }, - "8": { - "$type": "fontSizes", - "$value": "30" - }, - "9": { - "$type": "fontSizes", - "$value": "36" - }, - "10": { - "$type": "fontSizes", - "$value": "48" - } - }, - "letter-spacing": { - "1": { - "$type": "letterSpacing", - "$value": "-1%" - }, - "2": { - "$type": "letterSpacing", - "$value": "-0.5%" - }, - "3": { - "$type": "letterSpacing", - "$value": "-0.25%" - }, - "4": { - "$type": "letterSpacing", - "$value": "-0.15%" - }, - "5": { - "$type": "letterSpacing", - "$value": "0%" - }, - "6": { - "$type": "letterSpacing", - "$value": "0.15%" - }, - "7": { - "$type": "letterSpacing", - "$value": "0.25%" - }, - "8": { - "$type": "letterSpacing", - "$value": "0.5%" - }, - "9": { - "$type": "letterSpacing", - "$value": "1.5%" + "font-scale": { + "_base": { + "$type": "number", + "$value": "16", + "$description": "The font size (in px) to use as the basis for the scale. Is used as font-size.4." + }, + "_ratio": { + "$type": "number", + "$value": "1.131", + "$description": "The ratio used to calculate each step in the scale. Must be larger than 1 (a ratio of 1 would make all font sizes the same, while a number between 0 and 1 effectively inverts the scale). Larger numbers result in a larger font-size.10 and a smaller font-size.1." } } } \ No newline at end of file From 163fd13d301b0137cc99552c237e31d49824096f Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Tue, 23 Sep 2025 15:28:55 +0200 Subject: [PATCH 3/8] generate css for modular size scale --- .../tokens/design-tokens/size-mode.json | 48 ++++++++++++++++ .../tokens/design-tokens/type-scale.json | 20 +++---- .../src/tokens/process/configs/semantic.ts | 2 +- .../src/tokens/process/configs/size-mode.ts | 4 +- .../src/tokens/process/configs/type-scale.ts | 4 +- .../tokens/process/formats/css/size-mode.ts | 7 ++- .../tokens/process/formats/css/type-scale.ts | 29 +++++++--- packages/css/src/data-size-workaround.css | 4 ++ packages/theme/src/themes/designsystemet.css | 55 ++++++++++++------- 9 files changed, 127 insertions(+), 46 deletions(-) diff --git a/apps/www/app/_components/tokens/design-tokens/size-mode.json b/apps/www/app/_components/tokens/design-tokens/size-mode.json index f3cc7093bc..56a15afae4 100644 --- a/apps/www/app/_components/tokens/design-tokens/size-mode.json +++ b/apps/www/app/_components/tokens/design-tokens/size-mode.json @@ -1,5 +1,21 @@ { "medium": [ + { + "path": [ + "font-scale", + "_base" + ], + "variable": "--ds-font-scale-base", + "value": "1.125" + }, + { + "path": [ + "font-scale", + "_ratio" + ], + "variable": "--ds-font-scale-ratio", + "value": "1.143" + }, { "path": [ "_size", @@ -10,6 +26,22 @@ } ], "large": [ + { + "path": [ + "font-scale", + "_base" + ], + "variable": "--ds-font-scale-base", + "value": "1.3125" + }, + { + "path": [ + "font-scale", + "_ratio" + ], + "variable": "--ds-font-scale-ratio", + "value": "1.146" + }, { "path": [ "_size", @@ -20,6 +52,22 @@ } ], "small": [ + { + "path": [ + "font-scale", + "_base" + ], + "variable": "--ds-font-scale-base", + "value": "1" + }, + { + "path": [ + "font-scale", + "_ratio" + ], + "variable": "--ds-font-scale-ratio", + "value": "1.131" + }, { "path": [ "_size", diff --git a/apps/www/app/_components/tokens/design-tokens/type-scale.json b/apps/www/app/_components/tokens/design-tokens/type-scale.json index 59908f6503..f650e9c9f5 100644 --- a/apps/www/app/_components/tokens/design-tokens/type-scale.json +++ b/apps/www/app/_components/tokens/design-tokens/type-scale.json @@ -5,7 +5,7 @@ "1" ], "variable": "--ds-font-size-1", - "value": "round(calc(0.75rem * var(--_ds-font-size-factor)), 1px)" + "value": "round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 3)), 1px)" }, { "path": [ @@ -13,7 +13,7 @@ "2" ], "variable": "--ds-font-size-2", - "value": "round(calc(0.875rem * var(--_ds-font-size-factor)), 1px)" + "value": "round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 2)), 1px)" }, { "path": [ @@ -21,7 +21,7 @@ "3" ], "variable": "--ds-font-size-3", - "value": "round(calc(1rem * var(--_ds-font-size-factor)), 1px)" + "value": "round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 1)), 1px)" }, { "path": [ @@ -29,7 +29,7 @@ "4" ], "variable": "--ds-font-size-4", - "value": "round(calc(1.125rem * var(--_ds-font-size-factor)), 1px)" + "value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 0)), 1px)" }, { "path": [ @@ -37,7 +37,7 @@ "5" ], "variable": "--ds-font-size-5", - "value": "round(calc(1.3125rem * var(--_ds-font-size-factor)), 1px)" + "value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 1)), 1px)" }, { "path": [ @@ -45,7 +45,7 @@ "6" ], "variable": "--ds-font-size-6", - "value": "round(calc(1.5rem * var(--_ds-font-size-factor)), 1px)" + "value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 2)), 1px)" }, { "path": [ @@ -53,7 +53,7 @@ "7" ], "variable": "--ds-font-size-7", - "value": "round(calc(1.875rem * var(--_ds-font-size-factor)), 1px)" + "value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)), 1px)" }, { "path": [ @@ -61,7 +61,7 @@ "8" ], "variable": "--ds-font-size-8", - "value": "round(calc(2.25rem * var(--_ds-font-size-factor)), 1px)" + "value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 5)), 1px)" }, { "path": [ @@ -69,7 +69,7 @@ "9" ], "variable": "--ds-font-size-9", - "value": "round(calc(3rem * var(--_ds-font-size-factor)), 1px)" + "value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 7)), 1px)" }, { "path": [ @@ -77,7 +77,7 @@ "10" ], "variable": "--ds-font-size-10", - "value": "round(calc(3.75rem * var(--_ds-font-size-factor)), 1px)" + "value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 9)), 1px)" }, { "path": [ diff --git a/packages/cli/src/tokens/process/configs/semantic.ts b/packages/cli/src/tokens/process/configs/semantic.ts index 4b5aaad0a9..e2f0cc2eda 100644 --- a/packages/cli/src/tokens/process/configs/semantic.ts +++ b/packages/cli/src/tokens/process/configs/semantic.ts @@ -30,7 +30,7 @@ export const semanticVariables: GetStyleDictionaryConfig = ({ theme }) => { const isUwantedToken = R.anyPass([R.includes('primitives/global')])(token.filePath); const isPrivateToken = R.includes('_', token.path); const unwantedPaths = pathStartsWithOneOf( - ['size', '_size', 'font-size', 'line-height', 'letter-spacing'], + ['size', '_size', 'font-scale', 'font-size', 'line-height', 'letter-spacing'], token, ); const unwantedTypes = typeEquals(['color', 'fontWeight', 'fontFamily', 'typography'], token); diff --git a/packages/cli/src/tokens/process/configs/size-mode.ts b/packages/cli/src/tokens/process/configs/size-mode.ts index 66408a75a8..bd9e5cacc8 100644 --- a/packages/cli/src/tokens/process/configs/size-mode.ts +++ b/packages/cli/src/tokens/process/configs/size-mode.ts @@ -1,6 +1,6 @@ import * as R from 'ramda'; +import { pathStartsWithOneOf } from '../../utils.js'; import { formats } from '../formats/css.js'; - import { basePxFontSize, dsTransformers, type GetStyleDictionaryConfig, prefix } from './shared.js'; export const sizeModeVariables: GetStyleDictionaryConfig = ({ theme, size }) => { @@ -26,7 +26,7 @@ export const sizeModeVariables: GetStyleDictionaryConfig = ({ theme, size }) => destination: `size-mode/${size}.css`, format: formats.sizeMode.name, filter: (token) => { - return R.equals(['_size', 'mode-font-size'], token.path); + return R.equals(['_size', 'mode-font-size'], token.path) || pathStartsWithOneOf(['font-scale'], token); }, }, ], diff --git a/packages/cli/src/tokens/process/configs/type-scale.ts b/packages/cli/src/tokens/process/configs/type-scale.ts index 1aae5805e5..8e0bbf78bf 100644 --- a/packages/cli/src/tokens/process/configs/type-scale.ts +++ b/packages/cli/src/tokens/process/configs/type-scale.ts @@ -33,7 +33,7 @@ export const typeScaleVariables: GetStyleDictionaryConfig = ({ theme }) => { destination: `type-scale.css`, format: formats.typeScale.name, filter: (token) => { - const included = typeEquals(['typography', 'dimension', 'fontsize'], token); + const included = typeEquals(['typography', 'dimension', 'fontsize', 'number'], token); // Remove primitive typgography tokens if (/primitives\/modes\/typography\/(primary|secondary)/.test(token.filePath)) return false; @@ -41,7 +41,7 @@ export const typeScaleVariables: GetStyleDictionaryConfig = ({ theme }) => { return ( included && !pathStartsWithOneOf(['spacing', 'sizing', 'size', 'border-width', 'border-radius'], token) && - (pathStartsWithOneOf(['font-size'], token) || token.path.includes('fontSize')) + (pathStartsWithOneOf(['font-size', 'font-scale'], token) || token.path.includes('fontSize')) ); }, }, diff --git a/packages/cli/src/tokens/process/formats/css/size-mode.ts b/packages/cli/src/tokens/process/formats/css/size-mode.ts index 14f827762f..5b3b16977c 100644 --- a/packages/cli/src/tokens/process/formats/css/size-mode.ts +++ b/packages/cli/src/tokens/process/formats/css/size-mode.ts @@ -12,7 +12,8 @@ const formatBaseSizeToken = ...token, originalName: token.name, name: `${token.name}--${shortSizeName(size)}`, - $value: token.$value / basePxFontSize, + $value: token.path.includes('_ratio') ? token.$value : token.$value / basePxFontSize, + $description: undefined, // removes comment from output }); export const sizeMode: Format = { @@ -57,6 +58,10 @@ export const sizeMode: Format = { ${sizes.map((size) => ` --ds-size--${size}: var(--ds-size,);`).join('\n')} --ds-size-mode-font-size: ${sizes.map((size) => ` var(--ds-size--${size}, var(--ds-size-mode-font-size--${size}))`).join('\n')}; + --ds-font-scale-base: +${sizes.map((size) => ` var(--ds-size--${size}, var(--ds-font-scale-base--${size}))`).join('\n')}; + --ds-font-scale-ratio: +${sizes.map((size) => ` var(--ds-size--${size}, var(--ds-font-scale-ratio--${size}))`).join('\n')}; }`; const sizingHelpers = sizes .map((size) => `[data-size='${size}'] { --ds-size: var(--ds-size--${size}); }`) diff --git a/packages/cli/src/tokens/process/formats/css/type-scale.ts b/packages/cli/src/tokens/process/formats/css/type-scale.ts index 91f042741b..3c2b28dfe4 100644 --- a/packages/cli/src/tokens/process/formats/css/type-scale.ts +++ b/packages/cli/src/tokens/process/formats/css/type-scale.ts @@ -1,7 +1,6 @@ import * as R from 'ramda'; -import type { Format, TransformedToken } from 'style-dictionary/types'; +import type { Dictionary, Format, TransformedToken } from 'style-dictionary/types'; import { createPropertyFormatter } from 'style-dictionary/utils'; -import { basePxFontSize } from '../../configs/shared.js'; import { buildOptions } from '../../platform.js'; import { sizingTemplate } from './size.js'; @@ -10,18 +9,27 @@ const isTypographyFontFamilyToken = R.allPass([ R.pathSatisfies(R.includes('typography'), ['path']), R.pathSatisfies(R.includes('fontFamily'), ['path']), ]); +// Predicate to filter font-scale tokens +const isFontScaleToken = R.pathSatisfies(R.includes('font-scale'), ['path']); type TokensWithCalcAndRoundFormatting = { tokens: TransformedToken[]; calc: string[]; round: string[] }; const formatTypographySizeToken = ( + dictionary: Dictionary, format: (t: TransformedToken) => string, token: TransformedToken, ): { name: string; calc: string; round: string } => { const [name, value] = format(token).replace(/;$/, '').split(': '); + let calc: string; let round: string | undefined; if (R.startsWith(['font-size'], token.path)) { - calc = `calc(${value} * var(--_ds-font-size-factor))`; + const originalWithCssReference = (token.original.$value as string).replaceAll(/\{font-scale\.[^}]+\}/g, (match) => { + const t = dictionary.unfilteredTokenMap?.get(match); + return `var(--${t?.name as string})`; + }); + const cssCalcValue = originalWithCssReference.replace(/^roundTo\((.*), 0\)$/, '$1'); + calc = `calc(1rem * ${cssCalcValue})`; round = `round(${calc}, 1px)`; } else { calc = value; @@ -29,10 +37,14 @@ const formatTypographySizeToken = ( return { name, calc, round: round ?? calc }; }; -const formatTypographySizeTokens = (format: (t: TransformedToken) => string, tokens: TransformedToken[]) => +const formatTypographySizeTokens = ( + dictionary: Dictionary, + format: (t: TransformedToken) => string, + tokens: TransformedToken[], +) => R.reduce( (acc, token) => { - const { name, calc, round } = formatTypographySizeToken(format, token); + const { name, calc, round } = formatTypographySizeToken(dictionary, format, token); acc.tokens.push(token); acc.calc.push(`${name}: ${calc};`); acc.round.push(`${name}: ${round};`); @@ -56,8 +68,8 @@ export const typeScale: Format = { usesDtcg, }); - const filteredTokens = R.reject(R.anyPass([isTypographyFontFamilyToken]), dictionary.allTokens); - const formattedTokens = formatTypographySizeTokens(format, filteredTokens); + const filteredTokens = R.reject(R.anyPass([isTypographyFontFamilyToken, isFontScaleToken]), dictionary.allTokens); + const formattedTokens = formatTypographySizeTokens(dictionary, format, filteredTokens); const formattedMap = formattedTokens.round.map((t, i) => ({ token: formattedTokens.tokens[i], @@ -66,8 +78,7 @@ export const typeScale: Format = { buildOptions.buildTokenFormats[destination] = formattedMap; - const sizeFactor = ` --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / ${basePxFontSize}));`; - const content = `${selector} {\n${sizeFactor}${sizingTemplate(formattedTokens)}\n}`; + const content = `${selector} {${sizingTemplate(formattedTokens)}\n}`; const body = R.isNotNil(layer) ? `@layer ${layer} {\n${content}\n}` : content; return body; diff --git a/packages/css/src/data-size-workaround.css b/packages/css/src/data-size-workaround.css index 418dbb114f..204d4daa1c 100644 --- a/packages/css/src/data-size-workaround.css +++ b/packages/css/src/data-size-workaround.css @@ -10,8 +10,12 @@ the component to scale based on the surrounding data-size. /* Hack: Preserve --ds-size-mode-font-size on ancestor so we can look it up at the descendant */ [data-size]:not(.ds-avatar, .ds-heading, .ds-paragraph, .ds-spinner) { --_ds-size-mode__hack: var(--ds-size-mode-font-size); + --_ds-font-scale-base__hack: var(--ds-font-scale-base); + --_ds-font-scale-ratio__hack: var(--ds-font-scale-ratio); } /* Hack: use the nearest ancestor size mode */ [data-size] :is(.ds-avatar, .ds-heading, .ds-paragraph, .ds-spinner) { --ds-size-mode-font-size: var(--_ds-size-mode__hack); + --ds-font-scale-base: var(--_ds-font-scale-base__hack); + --ds-font-scale-ratio: var(--_ds-font-scale-ratio__hack); } diff --git a/packages/theme/src/themes/designsystemet.css b/packages/theme/src/themes/designsystemet.css index 81dfcf4075..8413cb43ce 100644 --- a/packages/theme/src/themes/designsystemet.css +++ b/packages/theme/src/themes/designsystemet.css @@ -6,18 +6,24 @@ design-tokens: v1.5.1 @layer ds.theme.size-mode { :root /* small */ { + --ds-font-scale-base--sm: 1; + --ds-font-scale-ratio--sm: 1.131; --ds-size-mode-font-size--sm: 1; } } @layer ds.theme.size-mode { :root /* medium */ { + --ds-font-scale-base--md: 1.125; + --ds-font-scale-ratio--md: 1.143; --ds-size-mode-font-size--md: 1.125; } } @layer ds.theme.size-mode { :root /* large */ { + --ds-font-scale-base--lg: 1.3125; + --ds-font-scale-ratio--lg: 1.146; --ds-size-mode-font-size--lg: 1.3125; } } @@ -32,6 +38,14 @@ design-tokens: v1.5.1 var(--ds-size--sm, var(--ds-size-mode-font-size--sm)) var(--ds-size--md, var(--ds-size-mode-font-size--md)) var(--ds-size--lg, var(--ds-size-mode-font-size--lg)); + --ds-font-scale-base: + var(--ds-size--sm, var(--ds-font-scale-base--sm)) + var(--ds-size--md, var(--ds-font-scale-base--md)) + var(--ds-size--lg, var(--ds-font-scale-base--lg)); + --ds-font-scale-ratio: + var(--ds-size--sm, var(--ds-font-scale-ratio--sm)) + var(--ds-size--md, var(--ds-font-scale-ratio--md)) + var(--ds-size--lg, var(--ds-font-scale-ratio--lg)); } [data-size='sm'] { --ds-size: var(--ds-size--sm); } @@ -41,17 +55,16 @@ design-tokens: v1.5.1 @layer ds.theme.type-scale { :root, [data-size] { - --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / 16)); - --ds-font-size-1: calc(0.75rem * var(--_ds-font-size-factor)); - --ds-font-size-2: calc(0.875rem * var(--_ds-font-size-factor)); - --ds-font-size-3: calc(1rem * var(--_ds-font-size-factor)); - --ds-font-size-4: calc(1.125rem * var(--_ds-font-size-factor)); - --ds-font-size-5: calc(1.3125rem * var(--_ds-font-size-factor)); - --ds-font-size-6: calc(1.5rem * var(--_ds-font-size-factor)); - --ds-font-size-7: calc(1.875rem * var(--_ds-font-size-factor)); - --ds-font-size-8: calc(2.25rem * var(--_ds-font-size-factor)); - --ds-font-size-9: calc(3rem * var(--_ds-font-size-factor)); - --ds-font-size-10: calc(3.75rem * var(--_ds-font-size-factor)); + --ds-font-size-1: calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 3)); + --ds-font-size-2: calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 2)); + --ds-font-size-3: calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 1)); + --ds-font-size-4: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 0)); + --ds-font-size-5: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 1)); + --ds-font-size-6: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 2)); + --ds-font-size-7: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)); + --ds-font-size-8: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 5)); + --ds-font-size-9: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 7)); + --ds-font-size-10: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 9)); --ds-heading-2xl-font-size: var(--ds-font-size-10); --ds-heading-xl-font-size: var(--ds-font-size-9); --ds-heading-lg-font-size: var(--ds-font-size-8); @@ -76,16 +89,16 @@ design-tokens: v1.5.1 --ds-body-long-xs-font-size: var(--ds-font-size-2); @supports (width: round(down, .1em, 1px)) { - --ds-font-size-1: round(calc(0.75rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-2: round(calc(0.875rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-3: round(calc(1rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-4: round(calc(1.125rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-5: round(calc(1.3125rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-6: round(calc(1.5rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-7: round(calc(1.875rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-8: round(calc(2.25rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-9: round(calc(3rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-10: round(calc(3.75rem * var(--_ds-font-size-factor)), 1px); + --ds-font-size-1: round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 3)), 1px); + --ds-font-size-2: round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 2)), 1px); + --ds-font-size-3: round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 1)), 1px); + --ds-font-size-4: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 0)), 1px); + --ds-font-size-5: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 1)), 1px); + --ds-font-size-6: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 2)), 1px); + --ds-font-size-7: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)), 1px); + --ds-font-size-8: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 5)), 1px); + --ds-font-size-9: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 7)), 1px); + --ds-font-size-10: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 9)), 1px); } } } From 081904c593fe78f7aca7480d77c8e5db86d151fa Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Tue, 23 Sep 2025 15:28:55 +0200 Subject: [PATCH 4/8] update digdir themes --- internal/design-tokens/$metadata.json | 3 +- internal/design-tokens/$themes.json | 9 +- .../modes/typography/size/global.json | 96 +++++++++++++++++ .../modes/typography/size/large.json | 102 ++---------------- .../modes/typography/size/medium.json | 102 ++---------------- .../modes/typography/size/small.json | 102 ++---------------- packages/theme/brand/altinn.css | 55 ++++++---- packages/theme/brand/digdir.css | 55 ++++++---- packages/theme/brand/portal.css | 55 ++++++---- packages/theme/brand/uutilsynet.css | 55 ++++++---- 10 files changed, 270 insertions(+), 364 deletions(-) create mode 100644 internal/design-tokens/primitives/modes/typography/size/global.json diff --git a/internal/design-tokens/$metadata.json b/internal/design-tokens/$metadata.json index b20ca9b8e5..82ce9e910c 100644 --- a/internal/design-tokens/$metadata.json +++ b/internal/design-tokens/$metadata.json @@ -1,10 +1,11 @@ { "tokenSetOrder": [ "primitives/globals", + "primitives/modes/size/global", "primitives/modes/size/small", "primitives/modes/size/medium", "primitives/modes/size/large", - "primitives/modes/size/global", + "primitives/modes/typography/size/global", "primitives/modes/typography/size/small", "primitives/modes/typography/size/medium", "primitives/modes/typography/size/large", diff --git a/internal/design-tokens/$themes.json b/internal/design-tokens/$themes.json index d8f1f1d4c4..3625e1b181 100644 --- a/internal/design-tokens/$themes.json +++ b/internal/design-tokens/$themes.json @@ -6,7 +6,8 @@ "selectedTokenSets": { "primitives/modes/size/medium": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/typography/size/medium": "enabled" + "primitives/modes/typography/size/medium": "enabled", + "primitives/modes/typography/size/global": "enabled" }, "$figmaCollectionId": "VariableCollectionId:36248:20757", "$figmaModeId": "41630:1", @@ -55,7 +56,8 @@ "selectedTokenSets": { "primitives/modes/size/large": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/typography/size/large": "enabled" + "primitives/modes/typography/size/large": "enabled", + "primitives/modes/typography/size/global": "enabled" }, "$figmaCollectionId": "VariableCollectionId:36248:20757", "$figmaModeId": "41630:2", @@ -104,7 +106,8 @@ "selectedTokenSets": { "primitives/modes/size/small": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/typography/size/small": "enabled" + "primitives/modes/typography/size/small": "enabled", + "primitives/modes/typography/size/global": "enabled" }, "$figmaCollectionId": "VariableCollectionId:36248:20757", "$figmaModeId": "41630:3", diff --git a/internal/design-tokens/primitives/modes/typography/size/global.json b/internal/design-tokens/primitives/modes/typography/size/global.json new file mode 100644 index 0000000000..a3dd5469ea --- /dev/null +++ b/internal/design-tokens/primitives/modes/typography/size/global.json @@ -0,0 +1,96 @@ +{ + "line-height": { + "sm": { + "$type": "lineHeights", + "$value": "130%" + }, + "md": { + "$type": "lineHeights", + "$value": "150%" + }, + "lg": { + "$type": "lineHeights", + "$value": "170%" + } + }, + "font-size": { + "1": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 3), 0)" + }, + "2": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 2), 0)" + }, + "3": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 1), 0)" + }, + "4": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 0), 0)" + }, + "5": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 1), 0)" + }, + "6": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 2), 0)" + }, + "7": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 3), 0)" + }, + "8": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 5), 0)" + }, + "9": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 7), 0)" + }, + "10": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 9), 0)" + } + }, + "letter-spacing": { + "1": { + "$type": "letterSpacing", + "$value": "-1%" + }, + "2": { + "$type": "letterSpacing", + "$value": "-0.5%" + }, + "3": { + "$type": "letterSpacing", + "$value": "-0.25%" + }, + "4": { + "$type": "letterSpacing", + "$value": "-0.15%" + }, + "5": { + "$type": "letterSpacing", + "$value": "0%" + }, + "6": { + "$type": "letterSpacing", + "$value": "0.15%" + }, + "7": { + "$type": "letterSpacing", + "$value": "0.25%" + }, + "8": { + "$type": "letterSpacing", + "$value": "0.5%" + }, + "9": { + "$type": "letterSpacing", + "$value": "1.5%" + } + } +} \ No newline at end of file diff --git a/internal/design-tokens/primitives/modes/typography/size/large.json b/internal/design-tokens/primitives/modes/typography/size/large.json index 9d7ed9b3e6..d423e72542 100644 --- a/internal/design-tokens/primitives/modes/typography/size/large.json +++ b/internal/design-tokens/primitives/modes/typography/size/large.json @@ -1,96 +1,14 @@ { - "line-height": { - "sm": { - "$type": "lineHeights", - "$value": "130%" - }, - "md": { - "$type": "lineHeights", - "$value": "150%" - }, - "lg": { - "$type": "lineHeights", - "$value": "170%" - } - }, - "font-size": { - "1": { - "$type": "fontSizes", - "$value": "13" - }, - "2": { - "$type": "fontSizes", - "$value": "16" - }, - "3": { - "$type": "fontSizes", - "$value": "18" - }, - "4": { - "$type": "fontSizes", - "$value": "21" - }, - "5": { - "$type": "fontSizes", - "$value": "24" - }, - "6": { - "$type": "fontSizes", - "$value": "30" - }, - "7": { - "$type": "fontSizes", - "$value": "36" - }, - "8": { - "$type": "fontSizes", - "$value": "48" - }, - "9": { - "$type": "fontSizes", - "$value": "60" - }, - "10": { - "$type": "fontSizes", - "$value": "72" - } - }, - "letter-spacing": { - "1": { - "$type": "letterSpacing", - "$value": "-1%" - }, - "2": { - "$type": "letterSpacing", - "$value": "-0.5%" - }, - "3": { - "$type": "letterSpacing", - "$value": "-0.25%" - }, - "4": { - "$type": "letterSpacing", - "$value": "-0.15%" - }, - "5": { - "$type": "letterSpacing", - "$value": "0%" - }, - "6": { - "$type": "letterSpacing", - "$value": "0.15%" - }, - "7": { - "$type": "letterSpacing", - "$value": "0.25%" - }, - "8": { - "$type": "letterSpacing", - "$value": "0.5%" - }, - "9": { - "$type": "letterSpacing", - "$value": "1.5%" + "font-scale": { + "_base": { + "$type": "number", + "$value": "21", + "$description": "The font size (in px) to use as the basis for the scale. Is used as font-size.4." + }, + "_ratio": { + "$type": "number", + "$value": "1.146", + "$description": "The ratio used to calculate each step in the scale. Must be larger than 1 (a ratio of 1 would make all font sizes the same, while a number between 0 and 1 effectively inverts the scale). Larger numbers result in a larger font-size.10 and a smaller font-size.1." } } } \ No newline at end of file diff --git a/internal/design-tokens/primitives/modes/typography/size/medium.json b/internal/design-tokens/primitives/modes/typography/size/medium.json index f861fb854c..0131aa6148 100644 --- a/internal/design-tokens/primitives/modes/typography/size/medium.json +++ b/internal/design-tokens/primitives/modes/typography/size/medium.json @@ -1,96 +1,14 @@ { - "line-height": { - "sm": { - "$type": "lineHeights", - "$value": "130%" - }, - "md": { - "$type": "lineHeights", - "$value": "150%" - }, - "lg": { - "$type": "lineHeights", - "$value": "170%" - } - }, - "font-size": { - "1": { - "$type": "fontSizes", - "$value": "12" - }, - "2": { - "$type": "fontSizes", - "$value": "14" - }, - "3": { - "$type": "fontSizes", - "$value": "16" - }, - "4": { - "$type": "fontSizes", - "$value": "18" - }, - "5": { - "$type": "fontSizes", - "$value": "21" - }, - "6": { - "$type": "fontSizes", - "$value": "24" - }, - "7": { - "$type": "fontSizes", - "$value": "30" - }, - "8": { - "$type": "fontSizes", - "$value": "36" - }, - "9": { - "$type": "fontSizes", - "$value": "48" - }, - "10": { - "$type": "fontSizes", - "$value": "60" - } - }, - "letter-spacing": { - "1": { - "$type": "letterSpacing", - "$value": "-1%" - }, - "2": { - "$type": "letterSpacing", - "$value": "-0.5%" - }, - "3": { - "$type": "letterSpacing", - "$value": "-0.25%" - }, - "4": { - "$type": "letterSpacing", - "$value": "-0.15%" - }, - "5": { - "$type": "letterSpacing", - "$value": "0%" - }, - "6": { - "$type": "letterSpacing", - "$value": "0.15%" - }, - "7": { - "$type": "letterSpacing", - "$value": "0.25%" - }, - "8": { - "$type": "letterSpacing", - "$value": "0.5%" - }, - "9": { - "$type": "letterSpacing", - "$value": "1.5%" + "font-scale": { + "_base": { + "$type": "number", + "$value": "18", + "$description": "The font size (in px) to use as the basis for the scale. Is used as font-size.4." + }, + "_ratio": { + "$type": "number", + "$value": "1.143", + "$description": "The ratio used to calculate each step in the scale. Must be larger than 1 (a ratio of 1 would make all font sizes the same, while a number between 0 and 1 effectively inverts the scale). Larger numbers result in a larger font-size.10 and a smaller font-size.1." } } } \ No newline at end of file diff --git a/internal/design-tokens/primitives/modes/typography/size/small.json b/internal/design-tokens/primitives/modes/typography/size/small.json index 99e67f561f..4ed462d883 100644 --- a/internal/design-tokens/primitives/modes/typography/size/small.json +++ b/internal/design-tokens/primitives/modes/typography/size/small.json @@ -1,96 +1,14 @@ { - "line-height": { - "sm": { - "$type": "lineHeights", - "$value": "130%" - }, - "md": { - "$type": "lineHeights", - "$value": "150%" - }, - "lg": { - "$type": "lineHeights", - "$value": "170%" - } - }, - "font-size": { - "1": { - "$type": "fontSizes", - "$value": "11" - }, - "2": { - "$type": "fontSizes", - "$value": "13" - }, - "3": { - "$type": "fontSizes", - "$value": "14" - }, - "4": { - "$type": "fontSizes", - "$value": "16" - }, - "5": { - "$type": "fontSizes", - "$value": "18" - }, - "6": { - "$type": "fontSizes", - "$value": "21" - }, - "7": { - "$type": "fontSizes", - "$value": "24" - }, - "8": { - "$type": "fontSizes", - "$value": "30" - }, - "9": { - "$type": "fontSizes", - "$value": "36" - }, - "10": { - "$type": "fontSizes", - "$value": "48" - } - }, - "letter-spacing": { - "1": { - "$type": "letterSpacing", - "$value": "-1%" - }, - "2": { - "$type": "letterSpacing", - "$value": "-0.5%" - }, - "3": { - "$type": "letterSpacing", - "$value": "-0.25%" - }, - "4": { - "$type": "letterSpacing", - "$value": "-0.15%" - }, - "5": { - "$type": "letterSpacing", - "$value": "0%" - }, - "6": { - "$type": "letterSpacing", - "$value": "0.15%" - }, - "7": { - "$type": "letterSpacing", - "$value": "0.25%" - }, - "8": { - "$type": "letterSpacing", - "$value": "0.5%" - }, - "9": { - "$type": "letterSpacing", - "$value": "1.5%" + "font-scale": { + "_base": { + "$type": "number", + "$value": "16", + "$description": "The font size (in px) to use as the basis for the scale. Is used as font-size.4." + }, + "_ratio": { + "$type": "number", + "$value": "1.131", + "$description": "The ratio used to calculate each step in the scale. Must be larger than 1 (a ratio of 1 would make all font sizes the same, while a number between 0 and 1 effectively inverts the scale). Larger numbers result in a larger font-size.10 and a smaller font-size.1." } } } \ No newline at end of file diff --git a/packages/theme/brand/altinn.css b/packages/theme/brand/altinn.css index c1835c0a2f..a4beb2b654 100644 --- a/packages/theme/brand/altinn.css +++ b/packages/theme/brand/altinn.css @@ -7,18 +7,24 @@ design-tokens: v1.5.1 @layer ds.theme.size-mode { :root /* small */ { --ds-size-mode-font-size--sm: 1; + --ds-font-scale-base--sm: 1; + --ds-font-scale-ratio--sm: 1.131; } } @layer ds.theme.size-mode { :root /* medium */ { --ds-size-mode-font-size--md: 1.125; + --ds-font-scale-base--md: 1.125; + --ds-font-scale-ratio--md: 1.143; } } @layer ds.theme.size-mode { :root /* large */ { --ds-size-mode-font-size--lg: 1.3125; + --ds-font-scale-base--lg: 1.3125; + --ds-font-scale-ratio--lg: 1.146; } } @@ -32,6 +38,14 @@ design-tokens: v1.5.1 var(--ds-size--sm, var(--ds-size-mode-font-size--sm)) var(--ds-size--md, var(--ds-size-mode-font-size--md)) var(--ds-size--lg, var(--ds-size-mode-font-size--lg)); + --ds-font-scale-base: + var(--ds-size--sm, var(--ds-font-scale-base--sm)) + var(--ds-size--md, var(--ds-font-scale-base--md)) + var(--ds-size--lg, var(--ds-font-scale-base--lg)); + --ds-font-scale-ratio: + var(--ds-size--sm, var(--ds-font-scale-ratio--sm)) + var(--ds-size--md, var(--ds-font-scale-ratio--md)) + var(--ds-size--lg, var(--ds-font-scale-ratio--lg)); } [data-size='sm'] { --ds-size: var(--ds-size--sm); } @@ -41,17 +55,16 @@ design-tokens: v1.5.1 @layer ds.theme.type-scale { :root, [data-size] { - --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / 16)); - --ds-font-size-1: calc(0.75rem * var(--_ds-font-size-factor)); - --ds-font-size-2: calc(0.875rem * var(--_ds-font-size-factor)); - --ds-font-size-3: calc(1rem * var(--_ds-font-size-factor)); - --ds-font-size-4: calc(1.125rem * var(--_ds-font-size-factor)); - --ds-font-size-5: calc(1.3125rem * var(--_ds-font-size-factor)); - --ds-font-size-6: calc(1.5rem * var(--_ds-font-size-factor)); - --ds-font-size-7: calc(1.875rem * var(--_ds-font-size-factor)); - --ds-font-size-8: calc(2.25rem * var(--_ds-font-size-factor)); - --ds-font-size-9: calc(3rem * var(--_ds-font-size-factor)); - --ds-font-size-10: calc(3.75rem * var(--_ds-font-size-factor)); + --ds-font-size-1: calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 3)); + --ds-font-size-2: calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 2)); + --ds-font-size-3: calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 1)); + --ds-font-size-4: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 0)); + --ds-font-size-5: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 1)); + --ds-font-size-6: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 2)); + --ds-font-size-7: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)); + --ds-font-size-8: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 5)); + --ds-font-size-9: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 7)); + --ds-font-size-10: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 9)); --ds-heading-2xl-font-size: var(--ds-font-size-10); --ds-heading-xl-font-size: var(--ds-font-size-9); --ds-heading-lg-font-size: var(--ds-font-size-8); @@ -76,16 +89,16 @@ design-tokens: v1.5.1 --ds-body-long-xs-font-size: var(--ds-font-size-2); @supports (width: round(down, .1em, 1px)) { - --ds-font-size-1: round(calc(0.75rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-2: round(calc(0.875rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-3: round(calc(1rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-4: round(calc(1.125rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-5: round(calc(1.3125rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-6: round(calc(1.5rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-7: round(calc(1.875rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-8: round(calc(2.25rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-9: round(calc(3rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-10: round(calc(3.75rem * var(--_ds-font-size-factor)), 1px); + --ds-font-size-1: round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 3)), 1px); + --ds-font-size-2: round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 2)), 1px); + --ds-font-size-3: round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 1)), 1px); + --ds-font-size-4: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 0)), 1px); + --ds-font-size-5: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 1)), 1px); + --ds-font-size-6: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 2)), 1px); + --ds-font-size-7: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)), 1px); + --ds-font-size-8: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 5)), 1px); + --ds-font-size-9: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 7)), 1px); + --ds-font-size-10: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 9)), 1px); } } } diff --git a/packages/theme/brand/digdir.css b/packages/theme/brand/digdir.css index 648eb41ef8..54662059c7 100644 --- a/packages/theme/brand/digdir.css +++ b/packages/theme/brand/digdir.css @@ -7,18 +7,24 @@ design-tokens: v1.5.1 @layer ds.theme.size-mode { :root /* small */ { --ds-size-mode-font-size--sm: 1; + --ds-font-scale-base--sm: 1; + --ds-font-scale-ratio--sm: 1.131; } } @layer ds.theme.size-mode { :root /* medium */ { --ds-size-mode-font-size--md: 1.125; + --ds-font-scale-base--md: 1.125; + --ds-font-scale-ratio--md: 1.143; } } @layer ds.theme.size-mode { :root /* large */ { --ds-size-mode-font-size--lg: 1.3125; + --ds-font-scale-base--lg: 1.3125; + --ds-font-scale-ratio--lg: 1.146; } } @@ -32,6 +38,14 @@ design-tokens: v1.5.1 var(--ds-size--sm, var(--ds-size-mode-font-size--sm)) var(--ds-size--md, var(--ds-size-mode-font-size--md)) var(--ds-size--lg, var(--ds-size-mode-font-size--lg)); + --ds-font-scale-base: + var(--ds-size--sm, var(--ds-font-scale-base--sm)) + var(--ds-size--md, var(--ds-font-scale-base--md)) + var(--ds-size--lg, var(--ds-font-scale-base--lg)); + --ds-font-scale-ratio: + var(--ds-size--sm, var(--ds-font-scale-ratio--sm)) + var(--ds-size--md, var(--ds-font-scale-ratio--md)) + var(--ds-size--lg, var(--ds-font-scale-ratio--lg)); } [data-size='sm'] { --ds-size: var(--ds-size--sm); } @@ -41,17 +55,16 @@ design-tokens: v1.5.1 @layer ds.theme.type-scale { :root, [data-size] { - --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / 16)); - --ds-font-size-1: calc(0.75rem * var(--_ds-font-size-factor)); - --ds-font-size-2: calc(0.875rem * var(--_ds-font-size-factor)); - --ds-font-size-3: calc(1rem * var(--_ds-font-size-factor)); - --ds-font-size-4: calc(1.125rem * var(--_ds-font-size-factor)); - --ds-font-size-5: calc(1.3125rem * var(--_ds-font-size-factor)); - --ds-font-size-6: calc(1.5rem * var(--_ds-font-size-factor)); - --ds-font-size-7: calc(1.875rem * var(--_ds-font-size-factor)); - --ds-font-size-8: calc(2.25rem * var(--_ds-font-size-factor)); - --ds-font-size-9: calc(3rem * var(--_ds-font-size-factor)); - --ds-font-size-10: calc(3.75rem * var(--_ds-font-size-factor)); + --ds-font-size-1: calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 3)); + --ds-font-size-2: calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 2)); + --ds-font-size-3: calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 1)); + --ds-font-size-4: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 0)); + --ds-font-size-5: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 1)); + --ds-font-size-6: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 2)); + --ds-font-size-7: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)); + --ds-font-size-8: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 5)); + --ds-font-size-9: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 7)); + --ds-font-size-10: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 9)); --ds-heading-2xl-font-size: var(--ds-font-size-10); --ds-heading-xl-font-size: var(--ds-font-size-9); --ds-heading-lg-font-size: var(--ds-font-size-8); @@ -76,16 +89,16 @@ design-tokens: v1.5.1 --ds-body-long-xs-font-size: var(--ds-font-size-2); @supports (width: round(down, .1em, 1px)) { - --ds-font-size-1: round(calc(0.75rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-2: round(calc(0.875rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-3: round(calc(1rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-4: round(calc(1.125rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-5: round(calc(1.3125rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-6: round(calc(1.5rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-7: round(calc(1.875rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-8: round(calc(2.25rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-9: round(calc(3rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-10: round(calc(3.75rem * var(--_ds-font-size-factor)), 1px); + --ds-font-size-1: round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 3)), 1px); + --ds-font-size-2: round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 2)), 1px); + --ds-font-size-3: round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 1)), 1px); + --ds-font-size-4: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 0)), 1px); + --ds-font-size-5: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 1)), 1px); + --ds-font-size-6: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 2)), 1px); + --ds-font-size-7: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)), 1px); + --ds-font-size-8: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 5)), 1px); + --ds-font-size-9: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 7)), 1px); + --ds-font-size-10: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 9)), 1px); } } } diff --git a/packages/theme/brand/portal.css b/packages/theme/brand/portal.css index 099c0d9633..719e1125b1 100644 --- a/packages/theme/brand/portal.css +++ b/packages/theme/brand/portal.css @@ -7,18 +7,24 @@ design-tokens: v1.5.1 @layer ds.theme.size-mode { :root /* small */ { --ds-size-mode-font-size--sm: 1; + --ds-font-scale-base--sm: 1; + --ds-font-scale-ratio--sm: 1.131; } } @layer ds.theme.size-mode { :root /* medium */ { --ds-size-mode-font-size--md: 1.125; + --ds-font-scale-base--md: 1.125; + --ds-font-scale-ratio--md: 1.143; } } @layer ds.theme.size-mode { :root /* large */ { --ds-size-mode-font-size--lg: 1.3125; + --ds-font-scale-base--lg: 1.3125; + --ds-font-scale-ratio--lg: 1.146; } } @@ -32,6 +38,14 @@ design-tokens: v1.5.1 var(--ds-size--sm, var(--ds-size-mode-font-size--sm)) var(--ds-size--md, var(--ds-size-mode-font-size--md)) var(--ds-size--lg, var(--ds-size-mode-font-size--lg)); + --ds-font-scale-base: + var(--ds-size--sm, var(--ds-font-scale-base--sm)) + var(--ds-size--md, var(--ds-font-scale-base--md)) + var(--ds-size--lg, var(--ds-font-scale-base--lg)); + --ds-font-scale-ratio: + var(--ds-size--sm, var(--ds-font-scale-ratio--sm)) + var(--ds-size--md, var(--ds-font-scale-ratio--md)) + var(--ds-size--lg, var(--ds-font-scale-ratio--lg)); } [data-size='sm'] { --ds-size: var(--ds-size--sm); } @@ -41,17 +55,16 @@ design-tokens: v1.5.1 @layer ds.theme.type-scale { :root, [data-size] { - --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / 16)); - --ds-font-size-1: calc(0.75rem * var(--_ds-font-size-factor)); - --ds-font-size-2: calc(0.875rem * var(--_ds-font-size-factor)); - --ds-font-size-3: calc(1rem * var(--_ds-font-size-factor)); - --ds-font-size-4: calc(1.125rem * var(--_ds-font-size-factor)); - --ds-font-size-5: calc(1.3125rem * var(--_ds-font-size-factor)); - --ds-font-size-6: calc(1.5rem * var(--_ds-font-size-factor)); - --ds-font-size-7: calc(1.875rem * var(--_ds-font-size-factor)); - --ds-font-size-8: calc(2.25rem * var(--_ds-font-size-factor)); - --ds-font-size-9: calc(3rem * var(--_ds-font-size-factor)); - --ds-font-size-10: calc(3.75rem * var(--_ds-font-size-factor)); + --ds-font-size-1: calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 3)); + --ds-font-size-2: calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 2)); + --ds-font-size-3: calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 1)); + --ds-font-size-4: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 0)); + --ds-font-size-5: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 1)); + --ds-font-size-6: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 2)); + --ds-font-size-7: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)); + --ds-font-size-8: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 5)); + --ds-font-size-9: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 7)); + --ds-font-size-10: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 9)); --ds-heading-2xl-font-size: var(--ds-font-size-10); --ds-heading-xl-font-size: var(--ds-font-size-9); --ds-heading-lg-font-size: var(--ds-font-size-8); @@ -76,16 +89,16 @@ design-tokens: v1.5.1 --ds-body-long-xs-font-size: var(--ds-font-size-2); @supports (width: round(down, .1em, 1px)) { - --ds-font-size-1: round(calc(0.75rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-2: round(calc(0.875rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-3: round(calc(1rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-4: round(calc(1.125rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-5: round(calc(1.3125rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-6: round(calc(1.5rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-7: round(calc(1.875rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-8: round(calc(2.25rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-9: round(calc(3rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-10: round(calc(3.75rem * var(--_ds-font-size-factor)), 1px); + --ds-font-size-1: round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 3)), 1px); + --ds-font-size-2: round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 2)), 1px); + --ds-font-size-3: round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 1)), 1px); + --ds-font-size-4: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 0)), 1px); + --ds-font-size-5: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 1)), 1px); + --ds-font-size-6: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 2)), 1px); + --ds-font-size-7: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)), 1px); + --ds-font-size-8: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 5)), 1px); + --ds-font-size-9: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 7)), 1px); + --ds-font-size-10: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 9)), 1px); } } } diff --git a/packages/theme/brand/uutilsynet.css b/packages/theme/brand/uutilsynet.css index 07fd133e37..00df0a5ade 100644 --- a/packages/theme/brand/uutilsynet.css +++ b/packages/theme/brand/uutilsynet.css @@ -7,18 +7,24 @@ design-tokens: v1.5.1 @layer ds.theme.size-mode { :root /* small */ { --ds-size-mode-font-size--sm: 1; + --ds-font-scale-base--sm: 1; + --ds-font-scale-ratio--sm: 1.131; } } @layer ds.theme.size-mode { :root /* medium */ { --ds-size-mode-font-size--md: 1.125; + --ds-font-scale-base--md: 1.125; + --ds-font-scale-ratio--md: 1.143; } } @layer ds.theme.size-mode { :root /* large */ { --ds-size-mode-font-size--lg: 1.3125; + --ds-font-scale-base--lg: 1.3125; + --ds-font-scale-ratio--lg: 1.146; } } @@ -32,6 +38,14 @@ design-tokens: v1.5.1 var(--ds-size--sm, var(--ds-size-mode-font-size--sm)) var(--ds-size--md, var(--ds-size-mode-font-size--md)) var(--ds-size--lg, var(--ds-size-mode-font-size--lg)); + --ds-font-scale-base: + var(--ds-size--sm, var(--ds-font-scale-base--sm)) + var(--ds-size--md, var(--ds-font-scale-base--md)) + var(--ds-size--lg, var(--ds-font-scale-base--lg)); + --ds-font-scale-ratio: + var(--ds-size--sm, var(--ds-font-scale-ratio--sm)) + var(--ds-size--md, var(--ds-font-scale-ratio--md)) + var(--ds-size--lg, var(--ds-font-scale-ratio--lg)); } [data-size='sm'] { --ds-size: var(--ds-size--sm); } @@ -41,17 +55,16 @@ design-tokens: v1.5.1 @layer ds.theme.type-scale { :root, [data-size] { - --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / 16)); - --ds-font-size-1: calc(0.75rem * var(--_ds-font-size-factor)); - --ds-font-size-2: calc(0.875rem * var(--_ds-font-size-factor)); - --ds-font-size-3: calc(1rem * var(--_ds-font-size-factor)); - --ds-font-size-4: calc(1.125rem * var(--_ds-font-size-factor)); - --ds-font-size-5: calc(1.3125rem * var(--_ds-font-size-factor)); - --ds-font-size-6: calc(1.5rem * var(--_ds-font-size-factor)); - --ds-font-size-7: calc(1.875rem * var(--_ds-font-size-factor)); - --ds-font-size-8: calc(2.25rem * var(--_ds-font-size-factor)); - --ds-font-size-9: calc(3rem * var(--_ds-font-size-factor)); - --ds-font-size-10: calc(3.75rem * var(--_ds-font-size-factor)); + --ds-font-size-1: calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 3)); + --ds-font-size-2: calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 2)); + --ds-font-size-3: calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 1)); + --ds-font-size-4: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 0)); + --ds-font-size-5: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 1)); + --ds-font-size-6: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 2)); + --ds-font-size-7: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)); + --ds-font-size-8: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 5)); + --ds-font-size-9: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 7)); + --ds-font-size-10: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 9)); --ds-heading-2xl-font-size: var(--ds-font-size-10); --ds-heading-xl-font-size: var(--ds-font-size-9); --ds-heading-lg-font-size: var(--ds-font-size-8); @@ -76,16 +89,16 @@ design-tokens: v1.5.1 --ds-body-long-xs-font-size: var(--ds-font-size-2); @supports (width: round(down, .1em, 1px)) { - --ds-font-size-1: round(calc(0.75rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-2: round(calc(0.875rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-3: round(calc(1rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-4: round(calc(1.125rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-5: round(calc(1.3125rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-6: round(calc(1.5rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-7: round(calc(1.875rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-8: round(calc(2.25rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-9: round(calc(3rem * var(--_ds-font-size-factor)), 1px); - --ds-font-size-10: round(calc(3.75rem * var(--_ds-font-size-factor)), 1px); + --ds-font-size-1: round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 3)), 1px); + --ds-font-size-2: round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 2)), 1px); + --ds-font-size-3: round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 1)), 1px); + --ds-font-size-4: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 0)), 1px); + --ds-font-size-5: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 1)), 1px); + --ds-font-size-6: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 2)), 1px); + --ds-font-size-7: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)), 1px); + --ds-font-size-8: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 5)), 1px); + --ds-font-size-9: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 7)), 1px); + --ds-font-size-10: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 9)), 1px); } } } From 1926151fec1c9887e350eab61a8194dd698a2356 Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Tue, 23 Sep 2025 15:28:55 +0200 Subject: [PATCH 5/8] one step closer -- generate static values --- .../tokens/design-tokens/type-scale.json | 84 +++++----- .../src/tokens/process/configs/type-scale.ts | 91 ++++++----- .../src/tokens/process/formats/css/size.ts | 10 +- .../tokens/process/formats/css/type-scale.ts | 14 +- packages/cli/src/tokens/process/platform.ts | 3 +- packages/theme/src/themes/designsystemet.css | 149 ++++++++++++------ 6 files changed, 213 insertions(+), 138 deletions(-) diff --git a/apps/www/app/_components/tokens/design-tokens/type-scale.json b/apps/www/app/_components/tokens/design-tokens/type-scale.json index f650e9c9f5..4e582137e8 100644 --- a/apps/www/app/_components/tokens/design-tokens/type-scale.json +++ b/apps/www/app/_components/tokens/design-tokens/type-scale.json @@ -4,80 +4,80 @@ "font-size", "1" ], - "variable": "--ds-font-size-1", - "value": "round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 3)), 1px)" + "variable": "--ds-font-size-1--sm", + "value": "0.6875rem" }, { "path": [ "font-size", "2" ], - "variable": "--ds-font-size-2", - "value": "round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 2)), 1px)" + "variable": "--ds-font-size-2--sm", + "value": "0.8125rem" }, { "path": [ "font-size", "3" ], - "variable": "--ds-font-size-3", - "value": "round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 1)), 1px)" + "variable": "--ds-font-size-3--sm", + "value": "0.875rem" }, { "path": [ "font-size", "4" ], - "variable": "--ds-font-size-4", - "value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 0)), 1px)" + "variable": "--ds-font-size-4--sm", + "value": "1rem" }, { "path": [ "font-size", "5" ], - "variable": "--ds-font-size-5", - "value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 1)), 1px)" + "variable": "--ds-font-size-5--sm", + "value": "1.125rem" }, { "path": [ "font-size", "6" ], - "variable": "--ds-font-size-6", - "value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 2)), 1px)" + "variable": "--ds-font-size-6--sm", + "value": "1.25rem" }, { "path": [ "font-size", "7" ], - "variable": "--ds-font-size-7", - "value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)), 1px)" + "variable": "--ds-font-size-7--sm", + "value": "1.4375rem" }, { "path": [ "font-size", "8" ], - "variable": "--ds-font-size-8", - "value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 5)), 1px)" + "variable": "--ds-font-size-8--sm", + "value": "1.875rem" }, { "path": [ "font-size", "9" ], - "variable": "--ds-font-size-9", - "value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 7)), 1px)" + "variable": "--ds-font-size-9--sm", + "value": "2.375rem" }, { "path": [ "font-size", "10" ], - "variable": "--ds-font-size-10", - "value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 9)), 1px)" + "variable": "--ds-font-size-10--sm", + "value": "3rem" }, { "path": [ @@ -86,7 +86,7 @@ "2xl", "fontSize" ], - "variable": "--ds-heading-2xl-font-size", + "variable": "--ds-heading-2xl-font-size--sm", "value": "var(--ds-font-size-10)" }, { @@ -96,7 +96,7 @@ "xl", "fontSize" ], - "variable": "--ds-heading-xl-font-size", + "variable": "--ds-heading-xl-font-size--sm", "value": "var(--ds-font-size-9)" }, { @@ -106,7 +106,7 @@ "lg", "fontSize" ], - "variable": "--ds-heading-lg-font-size", + "variable": "--ds-heading-lg-font-size--sm", "value": "var(--ds-font-size-8)" }, { @@ -116,7 +116,7 @@ "md", "fontSize" ], - "variable": "--ds-heading-md-font-size", + "variable": "--ds-heading-md-font-size--sm", "value": "var(--ds-font-size-7)" }, { @@ -126,7 +126,7 @@ "sm", "fontSize" ], - "variable": "--ds-heading-sm-font-size", + "variable": "--ds-heading-sm-font-size--sm", "value": "var(--ds-font-size-6)" }, { @@ -136,7 +136,7 @@ "xs", "fontSize" ], - "variable": "--ds-heading-xs-font-size", + "variable": "--ds-heading-xs-font-size--sm", "value": "var(--ds-font-size-5)" }, { @@ -146,7 +146,7 @@ "2xs", "fontSize" ], - "variable": "--ds-heading-2xs-font-size", + "variable": "--ds-heading-2xs-font-size--sm", "value": "var(--ds-font-size-4)" }, { @@ -156,7 +156,7 @@ "xl", "fontSize" ], - "variable": "--ds-body-xl-font-size", + "variable": "--ds-body-xl-font-size--sm", "value": "var(--ds-font-size-6)" }, { @@ -166,7 +166,7 @@ "lg", "fontSize" ], - "variable": "--ds-body-lg-font-size", + "variable": "--ds-body-lg-font-size--sm", "value": "var(--ds-font-size-5)" }, { @@ -176,7 +176,7 @@ "md", "fontSize" ], - "variable": "--ds-body-md-font-size", + "variable": "--ds-body-md-font-size--sm", "value": "var(--ds-font-size-4)" }, { @@ -186,7 +186,7 @@ "sm", "fontSize" ], - "variable": "--ds-body-sm-font-size", + "variable": "--ds-body-sm-font-size--sm", "value": "var(--ds-font-size-3)" }, { @@ -196,7 +196,7 @@ "xs", "fontSize" ], - "variable": "--ds-body-xs-font-size", + "variable": "--ds-body-xs-font-size--sm", "value": "var(--ds-font-size-2)" }, { @@ -207,7 +207,7 @@ "xl", "fontSize" ], - "variable": "--ds-body-short-xl-font-size", + "variable": "--ds-body-short-xl-font-size--sm", "value": "var(--ds-font-size-6)" }, { @@ -218,7 +218,7 @@ "lg", "fontSize" ], - "variable": "--ds-body-short-lg-font-size", + "variable": "--ds-body-short-lg-font-size--sm", "value": "var(--ds-font-size-5)" }, { @@ -229,7 +229,7 @@ "md", "fontSize" ], - "variable": "--ds-body-short-md-font-size", + "variable": "--ds-body-short-md-font-size--sm", "value": "var(--ds-font-size-4)" }, { @@ -240,7 +240,7 @@ "sm", "fontSize" ], - "variable": "--ds-body-short-sm-font-size", + "variable": "--ds-body-short-sm-font-size--sm", "value": "var(--ds-font-size-3)" }, { @@ -251,7 +251,7 @@ "xs", "fontSize" ], - "variable": "--ds-body-short-xs-font-size", + "variable": "--ds-body-short-xs-font-size--sm", "value": "var(--ds-font-size-2)" }, { @@ -262,7 +262,7 @@ "xl", "fontSize" ], - "variable": "--ds-body-long-xl-font-size", + "variable": "--ds-body-long-xl-font-size--sm", "value": "var(--ds-font-size-6)" }, { @@ -273,7 +273,7 @@ "lg", "fontSize" ], - "variable": "--ds-body-long-lg-font-size", + "variable": "--ds-body-long-lg-font-size--sm", "value": "var(--ds-font-size-5)" }, { @@ -284,7 +284,7 @@ "md", "fontSize" ], - "variable": "--ds-body-long-md-font-size", + "variable": "--ds-body-long-md-font-size--sm", "value": "var(--ds-font-size-4)" }, { @@ -295,7 +295,7 @@ "sm", "fontSize" ], - "variable": "--ds-body-long-sm-font-size", + "variable": "--ds-body-long-sm-font-size--sm", "value": "var(--ds-font-size-3)" }, { @@ -306,7 +306,7 @@ "xs", "fontSize" ], - "variable": "--ds-body-long-xs-font-size", + "variable": "--ds-body-long-xs-font-size--sm", "value": "var(--ds-font-size-2)" } ] \ No newline at end of file diff --git a/packages/cli/src/tokens/process/configs/type-scale.ts b/packages/cli/src/tokens/process/configs/type-scale.ts index 8e0bbf78bf..598cebc8b7 100644 --- a/packages/cli/src/tokens/process/configs/type-scale.ts +++ b/packages/cli/src/tokens/process/configs/type-scale.ts @@ -3,53 +3,60 @@ import { formats } from '../formats/css.js'; import { sizeRem, typographyName } from '../transformers.js'; import { basePxFontSize, type GetStyleDictionaryConfig, prefix } from './shared.js'; -export const typeScaleVariables: GetStyleDictionaryConfig = ({ theme }) => { - const selector = ':root, [data-size]'; - const layer = `ds.theme.type-scale`; +export const typeScaleVariables = + (scaleValues: 'static' | 'modular'): GetStyleDictionaryConfig => + ({ theme, size }) => { + if (scaleValues === 'static') { + console.log('typescalevariables: size =', size); + } + const selector = ':root, [data-size]'; + const layer = `ds.theme.type-scale`; - return { - usesDtcg: true, - preprocessors: ['tokens-studio'], - expand: { - include: ['typography'], - }, - platforms: { - css: { - prefix, - selector, - layer, - buildPath: `${theme}/`, - basePxFontSize, - transforms: [ - 'name/kebab', - 'ts/size/px', - sizeRem.name, - 'ts/size/lineheight', - 'ts/typography/fontWeight', - typographyName.name, - ], - files: [ - { - destination: `type-scale.css`, - format: formats.typeScale.name, - filter: (token) => { - const included = typeEquals(['typography', 'dimension', 'fontsize', 'number'], token); + return { + usesDtcg: true, + preprocessors: ['tokens-studio'], + expand: { + include: ['typography'], + }, + platforms: { + css: { + size: scaleValues === 'static' ? size : undefined, + prefix, + selector, + layer, + buildPath: `${theme}/`, + basePxFontSize, + transforms: [ + 'name/kebab', + ...(scaleValues === 'static' ? ['ts/resolveMath'] : []), + 'ts/size/px', + sizeRem.name, + 'ts/size/lineheight', + 'ts/typography/fontWeight', + typographyName.name, + ], + files: [ + { + destination: `type-scale.css`, + format: formats.typeScale.name, + filter: (token) => { + const included = typeEquals(['typography', 'dimension', 'fontsize', 'number'], token); - // Remove primitive typgography tokens - if (/primitives\/modes\/typography\/(primary|secondary)/.test(token.filePath)) return false; + // Remove primitive typgography tokens + if (/primitives\/modes\/typography\/(primary|secondary)/.test(token.filePath)) return false; - return ( - included && - !pathStartsWithOneOf(['spacing', 'sizing', 'size', 'border-width', 'border-radius'], token) && - (pathStartsWithOneOf(['font-size', 'font-scale'], token) || token.path.includes('fontSize')) - ); + return ( + included && + !pathStartsWithOneOf(['spacing', 'sizing', 'size', 'border-width', 'border-radius'], token) && + (pathStartsWithOneOf(['font-size', 'font-scale'], token) || token.path.includes('fontSize')) + ); + }, }, + ], + options: { + outputReferences: (token) => pathStartsWithOneOf(['typography'], token) && token.path.includes('fontSize'), }, - ], - options: { - outputReferences: (token) => pathStartsWithOneOf(['typography'], token) && token.path.includes('fontSize'), }, }, - }, + }; }; -}; diff --git a/packages/cli/src/tokens/process/formats/css/size.ts b/packages/cli/src/tokens/process/formats/css/size.ts index 490a167555..08c250ed7d 100644 --- a/packages/cli/src/tokens/process/formats/css/size.ts +++ b/packages/cli/src/tokens/process/formats/css/size.ts @@ -63,11 +63,15 @@ const formatSizingTokens = (format: (t: TransformedToken) => string, tokens: Tra export const sizingTemplate = ({ round, calc }: { round: string[]; calc: string[] }) => { const usesRounding = round.filter((val, i) => val !== calc[i]); - return ` -${calc.join('\n')}\n + const supportsRoundCss = usesRounding.length + ? `\n @supports (width: round(down, .1em, 1px)) { ${usesRounding.join('\n ')} - }`; + }` + : ''; + + return ` +${calc.join('\n')}${supportsRoundCss}`; }; export const size: Format = { diff --git a/packages/cli/src/tokens/process/formats/css/type-scale.ts b/packages/cli/src/tokens/process/formats/css/type-scale.ts index 3c2b28dfe4..94843189c7 100644 --- a/packages/cli/src/tokens/process/formats/css/type-scale.ts +++ b/packages/cli/src/tokens/process/formats/css/type-scale.ts @@ -1,6 +1,7 @@ import * as R from 'ramda'; import type { Dictionary, Format, TransformedToken } from 'style-dictionary/types'; import { createPropertyFormatter } from 'style-dictionary/utils'; +import { shortSizeName } from '../../../utils.js'; import { buildOptions } from '../../platform.js'; import { sizingTemplate } from './size.js'; @@ -18,12 +19,14 @@ const formatTypographySizeToken = ( dictionary: Dictionary, format: (t: TransformedToken) => string, token: TransformedToken, + size?: string, ): { name: string; calc: string; round: string } => { - const [name, value] = format(token).replace(/;$/, '').split(': '); + const [originalName, value] = format(token).replace(/;$/, '').split(': '); + const name = size ? `${originalName}--${shortSizeName(size)}` : originalName; let calc: string; let round: string | undefined; - if (R.startsWith(['font-size'], token.path)) { + if (!size && R.startsWith(['font-size'], token.path)) { const originalWithCssReference = (token.original.$value as string).replaceAll(/\{font-scale\.[^}]+\}/g, (match) => { const t = dictionary.unfilteredTokenMap?.get(match); return `var(--${t?.name as string})`; @@ -41,10 +44,11 @@ const formatTypographySizeTokens = ( dictionary: Dictionary, format: (t: TransformedToken) => string, tokens: TransformedToken[], + size?: string, ) => R.reduce( (acc, token) => { - const { name, calc, round } = formatTypographySizeToken(dictionary, format, token); + const { name, calc, round } = formatTypographySizeToken(dictionary, format, token, size); acc.tokens.push(token); acc.calc.push(`${name}: ${calc};`); acc.round.push(`${name}: ${round};`); @@ -58,7 +62,7 @@ export const typeScale: Format = { name: 'ds/css-type-scale', format: async ({ dictionary, file, options, platform }) => { const { outputReferences, usesDtcg } = options; - const { selector, layer } = platform as { selector: string; layer: string }; + const { selector, layer, size } = platform as { selector: string; layer: string; size?: string }; const destination = file.destination as string; const format = createPropertyFormatter({ @@ -69,7 +73,7 @@ export const typeScale: Format = { }); const filteredTokens = R.reject(R.anyPass([isTypographyFontFamilyToken, isFontScaleToken]), dictionary.allTokens); - const formattedTokens = formatTypographySizeTokens(dictionary, format, filteredTokens); + const formattedTokens = formatTypographySizeTokens(dictionary, format, filteredTokens, size); const formattedMap = formattedTokens.round.map((t, i) => ({ token: formattedTokens.tokens[i], diff --git a/packages/cli/src/tokens/process/platform.ts b/packages/cli/src/tokens/process/platform.ts index 22ea78ace4..5cb4b1bf82 100644 --- a/packages/cli/src/tokens/process/platform.ts +++ b/packages/cli/src/tokens/process/platform.ts @@ -83,7 +83,8 @@ const buildConfigs = { typography: { getConfig: configs.typographyVariables, dimensions: ['typography'] }, sizeMode: { getConfig: configs.sizeModeVariables, dimensions: ['size'] }, size: { getConfig: configs.sizeVariables, dimensions: ['semantic'] }, - typeScale: { getConfig: configs.typeScaleVariables, dimensions: ['semantic'] }, + // typeScale: { getConfig: configs.typeScaleVariables("modular"), dimensions: ['semantic'] }, + typeScale: { getConfig: configs.typeScaleVariables('static'), dimensions: ['semantic', 'size'] }, 'color-scheme': { getConfig: configs.colorSchemeVariables, dimensions: ['color-scheme'] }, 'main-color': { getConfig: configs.mainColorVariables, dimensions: ['main-color'] }, 'support-color': { getConfig: configs.supportColorVariables, dimensions: ['support-color'] }, diff --git a/packages/theme/src/themes/designsystemet.css b/packages/theme/src/themes/designsystemet.css index 8413cb43ce..e0d61ead4b 100644 --- a/packages/theme/src/themes/designsystemet.css +++ b/packages/theme/src/themes/designsystemet.css @@ -55,51 +55,110 @@ design-tokens: v1.5.1 @layer ds.theme.type-scale { :root, [data-size] { - --ds-font-size-1: calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 3)); - --ds-font-size-2: calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 2)); - --ds-font-size-3: calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 1)); - --ds-font-size-4: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 0)); - --ds-font-size-5: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 1)); - --ds-font-size-6: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 2)); - --ds-font-size-7: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)); - --ds-font-size-8: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 5)); - --ds-font-size-9: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 7)); - --ds-font-size-10: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 9)); - --ds-heading-2xl-font-size: var(--ds-font-size-10); - --ds-heading-xl-font-size: var(--ds-font-size-9); - --ds-heading-lg-font-size: var(--ds-font-size-8); - --ds-heading-md-font-size: var(--ds-font-size-7); - --ds-heading-sm-font-size: var(--ds-font-size-6); - --ds-heading-xs-font-size: var(--ds-font-size-5); - --ds-heading-2xs-font-size: var(--ds-font-size-4); - --ds-body-xl-font-size: var(--ds-font-size-6); - --ds-body-lg-font-size: var(--ds-font-size-5); - --ds-body-md-font-size: var(--ds-font-size-4); - --ds-body-sm-font-size: var(--ds-font-size-3); - --ds-body-xs-font-size: var(--ds-font-size-2); - --ds-body-short-xl-font-size: var(--ds-font-size-6); - --ds-body-short-lg-font-size: var(--ds-font-size-5); - --ds-body-short-md-font-size: var(--ds-font-size-4); - --ds-body-short-sm-font-size: var(--ds-font-size-3); - --ds-body-short-xs-font-size: var(--ds-font-size-2); - --ds-body-long-xl-font-size: var(--ds-font-size-6); - --ds-body-long-lg-font-size: var(--ds-font-size-5); - --ds-body-long-md-font-size: var(--ds-font-size-4); - --ds-body-long-sm-font-size: var(--ds-font-size-3); - --ds-body-long-xs-font-size: var(--ds-font-size-2); - - @supports (width: round(down, .1em, 1px)) { - --ds-font-size-1: round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 3)), 1px); - --ds-font-size-2: round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 2)), 1px); - --ds-font-size-3: round(calc(1rem * var(--ds-font-scale-base) / pow(var(--ds-font-scale-ratio), 1)), 1px); - --ds-font-size-4: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 0)), 1px); - --ds-font-size-5: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 1)), 1px); - --ds-font-size-6: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 2)), 1px); - --ds-font-size-7: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)), 1px); - --ds-font-size-8: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 5)), 1px); - --ds-font-size-9: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 7)), 1px); - --ds-font-size-10: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 9)), 1px); - } + --ds-font-size-1--md: 0.75rem; + --ds-font-size-2--md: 0.875rem; + --ds-font-size-3--md: 1rem; + --ds-font-size-4--md: 1.125rem; + --ds-font-size-5--md: 1.3125rem; + --ds-font-size-6--md: 1.5rem; + --ds-font-size-7--md: 1.6875rem; + --ds-font-size-8--md: 2.1875rem; + --ds-font-size-9--md: 2.875rem; + --ds-font-size-10--md: 3.75rem; + --ds-heading-2xl-font-size--md: var(--ds-font-size-10); + --ds-heading-xl-font-size--md: var(--ds-font-size-9); + --ds-heading-lg-font-size--md: var(--ds-font-size-8); + --ds-heading-md-font-size--md: var(--ds-font-size-7); + --ds-heading-sm-font-size--md: var(--ds-font-size-6); + --ds-heading-xs-font-size--md: var(--ds-font-size-5); + --ds-heading-2xs-font-size--md: var(--ds-font-size-4); + --ds-body-xl-font-size--md: var(--ds-font-size-6); + --ds-body-lg-font-size--md: var(--ds-font-size-5); + --ds-body-md-font-size--md: var(--ds-font-size-4); + --ds-body-sm-font-size--md: var(--ds-font-size-3); + --ds-body-xs-font-size--md: var(--ds-font-size-2); + --ds-body-short-xl-font-size--md: var(--ds-font-size-6); + --ds-body-short-lg-font-size--md: var(--ds-font-size-5); + --ds-body-short-md-font-size--md: var(--ds-font-size-4); + --ds-body-short-sm-font-size--md: var(--ds-font-size-3); + --ds-body-short-xs-font-size--md: var(--ds-font-size-2); + --ds-body-long-xl-font-size--md: var(--ds-font-size-6); + --ds-body-long-lg-font-size--md: var(--ds-font-size-5); + --ds-body-long-md-font-size--md: var(--ds-font-size-4); + --ds-body-long-sm-font-size--md: var(--ds-font-size-3); + --ds-body-long-xs-font-size--md: var(--ds-font-size-2); +} +} +@layer ds.theme.type-scale { +:root, [data-size] { + --ds-font-size-1--lg: 0.875rem; + --ds-font-size-2--lg: 1rem; + --ds-font-size-3--lg: 1.125rem; + --ds-font-size-4--lg: 1.3125rem; + --ds-font-size-5--lg: 1.5rem; + --ds-font-size-6--lg: 1.75rem; + --ds-font-size-7--lg: 2rem; + --ds-font-size-8--lg: 2.625rem; + --ds-font-size-9--lg: 3.4375rem; + --ds-font-size-10--lg: 4.5rem; + --ds-heading-2xl-font-size--lg: var(--ds-font-size-10); + --ds-heading-xl-font-size--lg: var(--ds-font-size-9); + --ds-heading-lg-font-size--lg: var(--ds-font-size-8); + --ds-heading-md-font-size--lg: var(--ds-font-size-7); + --ds-heading-sm-font-size--lg: var(--ds-font-size-6); + --ds-heading-xs-font-size--lg: var(--ds-font-size-5); + --ds-heading-2xs-font-size--lg: var(--ds-font-size-4); + --ds-body-xl-font-size--lg: var(--ds-font-size-6); + --ds-body-lg-font-size--lg: var(--ds-font-size-5); + --ds-body-md-font-size--lg: var(--ds-font-size-4); + --ds-body-sm-font-size--lg: var(--ds-font-size-3); + --ds-body-xs-font-size--lg: var(--ds-font-size-2); + --ds-body-short-xl-font-size--lg: var(--ds-font-size-6); + --ds-body-short-lg-font-size--lg: var(--ds-font-size-5); + --ds-body-short-md-font-size--lg: var(--ds-font-size-4); + --ds-body-short-sm-font-size--lg: var(--ds-font-size-3); + --ds-body-short-xs-font-size--lg: var(--ds-font-size-2); + --ds-body-long-xl-font-size--lg: var(--ds-font-size-6); + --ds-body-long-lg-font-size--lg: var(--ds-font-size-5); + --ds-body-long-md-font-size--lg: var(--ds-font-size-4); + --ds-body-long-sm-font-size--lg: var(--ds-font-size-3); + --ds-body-long-xs-font-size--lg: var(--ds-font-size-2); +} +} +@layer ds.theme.type-scale { +:root, [data-size] { + --ds-font-size-1--sm: 0.6875rem; + --ds-font-size-2--sm: 0.8125rem; + --ds-font-size-3--sm: 0.875rem; + --ds-font-size-4--sm: 1rem; + --ds-font-size-5--sm: 1.125rem; + --ds-font-size-6--sm: 1.25rem; + --ds-font-size-7--sm: 1.4375rem; + --ds-font-size-8--sm: 1.875rem; + --ds-font-size-9--sm: 2.375rem; + --ds-font-size-10--sm: 3rem; + --ds-heading-2xl-font-size--sm: var(--ds-font-size-10); + --ds-heading-xl-font-size--sm: var(--ds-font-size-9); + --ds-heading-lg-font-size--sm: var(--ds-font-size-8); + --ds-heading-md-font-size--sm: var(--ds-font-size-7); + --ds-heading-sm-font-size--sm: var(--ds-font-size-6); + --ds-heading-xs-font-size--sm: var(--ds-font-size-5); + --ds-heading-2xs-font-size--sm: var(--ds-font-size-4); + --ds-body-xl-font-size--sm: var(--ds-font-size-6); + --ds-body-lg-font-size--sm: var(--ds-font-size-5); + --ds-body-md-font-size--sm: var(--ds-font-size-4); + --ds-body-sm-font-size--sm: var(--ds-font-size-3); + --ds-body-xs-font-size--sm: var(--ds-font-size-2); + --ds-body-short-xl-font-size--sm: var(--ds-font-size-6); + --ds-body-short-lg-font-size--sm: var(--ds-font-size-5); + --ds-body-short-md-font-size--sm: var(--ds-font-size-4); + --ds-body-short-sm-font-size--sm: var(--ds-font-size-3); + --ds-body-short-xs-font-size--sm: var(--ds-font-size-2); + --ds-body-long-xl-font-size--sm: var(--ds-font-size-6); + --ds-body-long-lg-font-size--sm: var(--ds-font-size-5); + --ds-body-long-md-font-size--sm: var(--ds-font-size-4); + --ds-body-long-sm-font-size--sm: var(--ds-font-size-3); + --ds-body-long-xs-font-size--sm: var(--ds-font-size-2); } } @layer ds.theme.color-scheme.light { From c42beb70c60b8c205c94dad067b69c1064cd4d61 Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Thu, 25 Sep 2025 14:36:15 +0200 Subject: [PATCH 6/8] wip --- .../tokens/design-tokens/type-scale.json | 64 +++++++++---------- .../src/tokens/process/configs/size-mode.ts | 57 +++++++++-------- .../tokens/process/formats/css/size-mode.ts | 10 +-- .../tokens/process/formats/css/type-scale.ts | 50 ++++++++++++--- packages/cli/src/tokens/process/platform.ts | 5 +- packages/theme/src/themes/designsystemet.css | 17 ++--- 6 files changed, 119 insertions(+), 84 deletions(-) diff --git a/apps/www/app/_components/tokens/design-tokens/type-scale.json b/apps/www/app/_components/tokens/design-tokens/type-scale.json index 4e582137e8..603386a776 100644 --- a/apps/www/app/_components/tokens/design-tokens/type-scale.json +++ b/apps/www/app/_components/tokens/design-tokens/type-scale.json @@ -4,7 +4,7 @@ "font-size", "1" ], - "variable": "--ds-font-size-1--sm", + "variable": "--ds-font-size-1", "value": "0.6875rem" }, { @@ -12,7 +12,7 @@ "font-size", "2" ], - "variable": "--ds-font-size-2--sm", + "variable": "--ds-font-size-2", "value": "0.8125rem" }, { @@ -20,7 +20,7 @@ "font-size", "3" ], - "variable": "--ds-font-size-3--sm", + "variable": "--ds-font-size-3", "value": "0.875rem" }, { @@ -28,7 +28,7 @@ "font-size", "4" ], - "variable": "--ds-font-size-4--sm", + "variable": "--ds-font-size-4", "value": "1rem" }, { @@ -36,7 +36,7 @@ "font-size", "5" ], - "variable": "--ds-font-size-5--sm", + "variable": "--ds-font-size-5", "value": "1.125rem" }, { @@ -44,7 +44,7 @@ "font-size", "6" ], - "variable": "--ds-font-size-6--sm", + "variable": "--ds-font-size-6", "value": "1.25rem" }, { @@ -52,7 +52,7 @@ "font-size", "7" ], - "variable": "--ds-font-size-7--sm", + "variable": "--ds-font-size-7", "value": "1.4375rem" }, { @@ -60,7 +60,7 @@ "font-size", "8" ], - "variable": "--ds-font-size-8--sm", + "variable": "--ds-font-size-8", "value": "1.875rem" }, { @@ -68,7 +68,7 @@ "font-size", "9" ], - "variable": "--ds-font-size-9--sm", + "variable": "--ds-font-size-9", "value": "2.375rem" }, { @@ -76,7 +76,7 @@ "font-size", "10" ], - "variable": "--ds-font-size-10--sm", + "variable": "--ds-font-size-10", "value": "3rem" }, { @@ -86,7 +86,7 @@ "2xl", "fontSize" ], - "variable": "--ds-heading-2xl-font-size--sm", + "variable": "--ds-heading-2xl-font-size", "value": "var(--ds-font-size-10)" }, { @@ -96,7 +96,7 @@ "xl", "fontSize" ], - "variable": "--ds-heading-xl-font-size--sm", + "variable": "--ds-heading-xl-font-size", "value": "var(--ds-font-size-9)" }, { @@ -106,7 +106,7 @@ "lg", "fontSize" ], - "variable": "--ds-heading-lg-font-size--sm", + "variable": "--ds-heading-lg-font-size", "value": "var(--ds-font-size-8)" }, { @@ -116,7 +116,7 @@ "md", "fontSize" ], - "variable": "--ds-heading-md-font-size--sm", + "variable": "--ds-heading-md-font-size", "value": "var(--ds-font-size-7)" }, { @@ -126,7 +126,7 @@ "sm", "fontSize" ], - "variable": "--ds-heading-sm-font-size--sm", + "variable": "--ds-heading-sm-font-size", "value": "var(--ds-font-size-6)" }, { @@ -136,7 +136,7 @@ "xs", "fontSize" ], - "variable": "--ds-heading-xs-font-size--sm", + "variable": "--ds-heading-xs-font-size", "value": "var(--ds-font-size-5)" }, { @@ -146,7 +146,7 @@ "2xs", "fontSize" ], - "variable": "--ds-heading-2xs-font-size--sm", + "variable": "--ds-heading-2xs-font-size", "value": "var(--ds-font-size-4)" }, { @@ -156,7 +156,7 @@ "xl", "fontSize" ], - "variable": "--ds-body-xl-font-size--sm", + "variable": "--ds-body-xl-font-size", "value": "var(--ds-font-size-6)" }, { @@ -166,7 +166,7 @@ "lg", "fontSize" ], - "variable": "--ds-body-lg-font-size--sm", + "variable": "--ds-body-lg-font-size", "value": "var(--ds-font-size-5)" }, { @@ -176,7 +176,7 @@ "md", "fontSize" ], - "variable": "--ds-body-md-font-size--sm", + "variable": "--ds-body-md-font-size", "value": "var(--ds-font-size-4)" }, { @@ -186,7 +186,7 @@ "sm", "fontSize" ], - "variable": "--ds-body-sm-font-size--sm", + "variable": "--ds-body-sm-font-size", "value": "var(--ds-font-size-3)" }, { @@ -196,7 +196,7 @@ "xs", "fontSize" ], - "variable": "--ds-body-xs-font-size--sm", + "variable": "--ds-body-xs-font-size", "value": "var(--ds-font-size-2)" }, { @@ -207,7 +207,7 @@ "xl", "fontSize" ], - "variable": "--ds-body-short-xl-font-size--sm", + "variable": "--ds-body-short-xl-font-size", "value": "var(--ds-font-size-6)" }, { @@ -218,7 +218,7 @@ "lg", "fontSize" ], - "variable": "--ds-body-short-lg-font-size--sm", + "variable": "--ds-body-short-lg-font-size", "value": "var(--ds-font-size-5)" }, { @@ -229,7 +229,7 @@ "md", "fontSize" ], - "variable": "--ds-body-short-md-font-size--sm", + "variable": "--ds-body-short-md-font-size", "value": "var(--ds-font-size-4)" }, { @@ -240,7 +240,7 @@ "sm", "fontSize" ], - "variable": "--ds-body-short-sm-font-size--sm", + "variable": "--ds-body-short-sm-font-size", "value": "var(--ds-font-size-3)" }, { @@ -251,7 +251,7 @@ "xs", "fontSize" ], - "variable": "--ds-body-short-xs-font-size--sm", + "variable": "--ds-body-short-xs-font-size", "value": "var(--ds-font-size-2)" }, { @@ -262,7 +262,7 @@ "xl", "fontSize" ], - "variable": "--ds-body-long-xl-font-size--sm", + "variable": "--ds-body-long-xl-font-size", "value": "var(--ds-font-size-6)" }, { @@ -273,7 +273,7 @@ "lg", "fontSize" ], - "variable": "--ds-body-long-lg-font-size--sm", + "variable": "--ds-body-long-lg-font-size", "value": "var(--ds-font-size-5)" }, { @@ -284,7 +284,7 @@ "md", "fontSize" ], - "variable": "--ds-body-long-md-font-size--sm", + "variable": "--ds-body-long-md-font-size", "value": "var(--ds-font-size-4)" }, { @@ -295,7 +295,7 @@ "sm", "fontSize" ], - "variable": "--ds-body-long-sm-font-size--sm", + "variable": "--ds-body-long-sm-font-size", "value": "var(--ds-font-size-3)" }, { @@ -306,7 +306,7 @@ "xs", "fontSize" ], - "variable": "--ds-body-long-xs-font-size--sm", + "variable": "--ds-body-long-xs-font-size", "value": "var(--ds-font-size-2)" } ] \ No newline at end of file diff --git a/packages/cli/src/tokens/process/configs/size-mode.ts b/packages/cli/src/tokens/process/configs/size-mode.ts index bd9e5cacc8..2f85732839 100644 --- a/packages/cli/src/tokens/process/configs/size-mode.ts +++ b/packages/cli/src/tokens/process/configs/size-mode.ts @@ -3,34 +3,37 @@ import { pathStartsWithOneOf } from '../../utils.js'; import { formats } from '../formats/css.js'; import { basePxFontSize, dsTransformers, type GetStyleDictionaryConfig, prefix } from './shared.js'; -export const sizeModeVariables: GetStyleDictionaryConfig = ({ theme, size }) => { - const selector = `:root`; - const layer = `ds.theme.size-mode`; +export const sizeModeVariables = + (typeScaleValues: 'modular' | 'static'): GetStyleDictionaryConfig => + ({ theme, size }) => { + const selector = `:root`; + const layer = `ds.theme.size-mode`; - return { - preprocessors: ['tokens-studio'], - platforms: { - css: { - // custom - size, - theme, - basePxFontSize, - selector, - layer, - // - prefix, - buildPath: `${theme}/`, - transforms: dsTransformers, - files: [ - { - destination: `size-mode/${size}.css`, - format: formats.sizeMode.name, - filter: (token) => { - return R.equals(['_size', 'mode-font-size'], token.path) || pathStartsWithOneOf(['font-scale'], token); + return { + preprocessors: ['tokens-studio'], + platforms: { + css: { + // custom + size, + theme, + basePxFontSize, + selector, + layer, + typeScaleValues, + // + prefix, + buildPath: `${theme}/`, + transforms: dsTransformers, + files: [ + { + destination: `size-mode/${size}.css`, + format: formats.sizeMode.name, + filter: (token) => { + return R.equals(['_size', 'mode-font-size'], token.path) || pathStartsWithOneOf(['font-scale'], token); + }, }, - }, - ], + ], + }, }, - }, + }; }; -}; diff --git a/packages/cli/src/tokens/process/formats/css/size-mode.ts b/packages/cli/src/tokens/process/formats/css/size-mode.ts index 5b3b16977c..040f8abd78 100644 --- a/packages/cli/src/tokens/process/formats/css/size-mode.ts +++ b/packages/cli/src/tokens/process/formats/css/size-mode.ts @@ -20,7 +20,11 @@ export const sizeMode: Format = { name: 'ds/css-size-mode', format: async ({ dictionary, file, options, platform }) => { const { outputReferences, usesDtcg } = options; - const { selector, layer, size } = platform; + const { selector, layer, size } = platform as { + selector: string; + layer?: string; + size: string; + }; const destination = file.destination as string; const format = createPropertyFormatter({ @@ -58,10 +62,6 @@ export const sizeMode: Format = { ${sizes.map((size) => ` --ds-size--${size}: var(--ds-size,);`).join('\n')} --ds-size-mode-font-size: ${sizes.map((size) => ` var(--ds-size--${size}, var(--ds-size-mode-font-size--${size}))`).join('\n')}; - --ds-font-scale-base: -${sizes.map((size) => ` var(--ds-size--${size}, var(--ds-font-scale-base--${size}))`).join('\n')}; - --ds-font-scale-ratio: -${sizes.map((size) => ` var(--ds-size--${size}, var(--ds-font-scale-ratio--${size}))`).join('\n')}; }`; const sizingHelpers = sizes .map((size) => `[data-size='${size}'] { --ds-size: var(--ds-size--${size}); }`) diff --git a/packages/cli/src/tokens/process/formats/css/type-scale.ts b/packages/cli/src/tokens/process/formats/css/type-scale.ts index 94843189c7..7cca5c3b3d 100644 --- a/packages/cli/src/tokens/process/formats/css/type-scale.ts +++ b/packages/cli/src/tokens/process/formats/css/type-scale.ts @@ -1,9 +1,10 @@ import * as R from 'ramda'; import type { Dictionary, Format, TransformedToken } from 'style-dictionary/types'; import { createPropertyFormatter } from 'style-dictionary/utils'; -import { shortSizeName } from '../../../utils.js'; +import { orderBySize, shortSizeName } from '../../../utils.js'; import { buildOptions } from '../../platform.js'; import { sizingTemplate } from './size.js'; +import { wrapInLayer } from './size-mode.js'; // Predicate to filter tokens with .path array that includes both typography and fontFamily const isTypographyFontFamilyToken = R.allPass([ @@ -13,14 +14,20 @@ const isTypographyFontFamilyToken = R.allPass([ // Predicate to filter font-scale tokens const isFontScaleToken = R.pathSatisfies(R.includes('font-scale'), ['path']); -type TokensWithCalcAndRoundFormatting = { tokens: TransformedToken[]; calc: string[]; round: string[] }; +type TokensWithCalcAndRoundFormatting = { + tokens: TransformedToken[]; + calc: string[]; + round: string[]; + name: string[]; + originalName: string[]; +}; const formatTypographySizeToken = ( dictionary: Dictionary, format: (t: TransformedToken) => string, token: TransformedToken, size?: string, -): { name: string; calc: string; round: string } => { +): { name: string; originalName: string; calc: string; round: string } => { const [originalName, value] = format(token).replace(/;$/, '').split(': '); const name = size ? `${originalName}--${shortSizeName(size)}` : originalName; @@ -37,7 +44,7 @@ const formatTypographySizeToken = ( } else { calc = value; } - return { name, calc, round: round ?? calc }; + return { name, originalName, calc, round: round ?? calc }; }; const formatTypographySizeTokens = ( @@ -48,13 +55,15 @@ const formatTypographySizeTokens = ( ) => R.reduce( (acc, token) => { - const { name, calc, round } = formatTypographySizeToken(dictionary, format, token, size); + const { name, calc, round, originalName } = formatTypographySizeToken(dictionary, format, token, size); acc.tokens.push(token); + acc.name.push(name); + acc.originalName.push(originalName); acc.calc.push(`${name}: ${calc};`); acc.round.push(`${name}: ${round};`); return acc; }, - { tokens: [], calc: [], round: [] }, + { tokens: [], calc: [], round: [], name: [], originalName: [] }, tokens, ); @@ -62,7 +71,7 @@ export const typeScale: Format = { name: 'ds/css-type-scale', format: async ({ dictionary, file, options, platform }) => { const { outputReferences, usesDtcg } = options; - const { selector, layer, size } = platform as { selector: string; layer: string; size?: string }; + const { selector, layer, size } = platform as { selector: string; layer?: string; size?: string }; const destination = file.destination as string; const format = createPropertyFormatter({ @@ -77,14 +86,35 @@ export const typeScale: Format = { const formattedMap = formattedTokens.round.map((t, i) => ({ token: formattedTokens.tokens[i], - formatted: t, + // Remove the `--` suffix for the token listing, since that is the only token we actually use + formatted: t.replace(formattedTokens.name[i], formattedTokens.originalName[i]), })); buildOptions.buildTokenFormats[destination] = formattedMap; const content = `${selector} {${sizingTemplate(formattedTokens)}\n}`; - const body = R.isNotNil(layer) ? `@layer ${layer} {\n${content}\n}` : content; + const body = wrapInLayer(content, layer); + + /* + * The following CSS is only generated once, not per mode + */ + const sizes = orderBySize(buildOptions?.sizeModes ?? []).map(shortSizeName); + + const fontScaleToggles = size + ? '' + : ` --ds-font-scale-base: +${sizes.map((size) => ` var(--ds-size--${size}, var(--ds-font-scale-base--${size}))`).join('\n')}; + --ds-font-scale-ratio: +${sizes.map((size) => ` var(--ds-size--${size}, var(--ds-font-scale-ratio--${size}))`).join('\n')};`; + + const sharedContent = `:root, [data-size] { +${fontScaleToggles} +}`; + const sharedBody = !size || shortSizeName(size) === R.last(sizes) ? `\n${wrapInLayer(sharedContent, layer)}` : ''; + /* + * End of generated-once CSS + */ - return body; + return body + sharedBody; }, }; diff --git a/packages/cli/src/tokens/process/platform.ts b/packages/cli/src/tokens/process/platform.ts index 5cb4b1bf82..eda1774a72 100644 --- a/packages/cli/src/tokens/process/platform.ts +++ b/packages/cli/src/tokens/process/platform.ts @@ -81,9 +81,10 @@ const sd = new StyleDictionary(); */ const buildConfigs = { typography: { getConfig: configs.typographyVariables, dimensions: ['typography'] }, - sizeMode: { getConfig: configs.sizeModeVariables, dimensions: ['size'] }, + // sizeMode: { getConfig: configs.sizeModeVariables('modular'), dimensions: ['size'] }, + sizeMode: { getConfig: configs.sizeModeVariables('static'), dimensions: ['size'] }, size: { getConfig: configs.sizeVariables, dimensions: ['semantic'] }, - // typeScale: { getConfig: configs.typeScaleVariables("modular"), dimensions: ['semantic'] }, + // typeScale: { getConfig: configs.typeScaleVariables('modular'), dimensions: ['semantic'] }, typeScale: { getConfig: configs.typeScaleVariables('static'), dimensions: ['semantic', 'size'] }, 'color-scheme': { getConfig: configs.colorSchemeVariables, dimensions: ['color-scheme'] }, 'main-color': { getConfig: configs.mainColorVariables, dimensions: ['main-color'] }, diff --git a/packages/theme/src/themes/designsystemet.css b/packages/theme/src/themes/designsystemet.css index e0d61ead4b..f297991699 100644 --- a/packages/theme/src/themes/designsystemet.css +++ b/packages/theme/src/themes/designsystemet.css @@ -38,14 +38,6 @@ design-tokens: v1.5.1 var(--ds-size--sm, var(--ds-size-mode-font-size--sm)) var(--ds-size--md, var(--ds-size-mode-font-size--md)) var(--ds-size--lg, var(--ds-size-mode-font-size--lg)); - --ds-font-scale-base: - var(--ds-size--sm, var(--ds-font-scale-base--sm)) - var(--ds-size--md, var(--ds-font-scale-base--md)) - var(--ds-size--lg, var(--ds-font-scale-base--lg)); - --ds-font-scale-ratio: - var(--ds-size--sm, var(--ds-font-scale-ratio--sm)) - var(--ds-size--md, var(--ds-font-scale-ratio--md)) - var(--ds-size--lg, var(--ds-font-scale-ratio--lg)); } [data-size='sm'] { --ds-size: var(--ds-size--sm); } @@ -89,6 +81,7 @@ design-tokens: v1.5.1 --ds-body-long-xs-font-size--md: var(--ds-font-size-2); } } + @layer ds.theme.type-scale { :root, [data-size] { --ds-font-size-1--lg: 0.875rem; @@ -125,6 +118,13 @@ design-tokens: v1.5.1 --ds-body-long-xs-font-size--lg: var(--ds-font-size-2); } } + +@layer ds.theme.type-scale { +:root, [data-size] { + +} +} + @layer ds.theme.type-scale { :root, [data-size] { --ds-font-size-1--sm: 0.6875rem; @@ -161,6 +161,7 @@ design-tokens: v1.5.1 --ds-body-long-xs-font-size--sm: var(--ds-font-size-2); } } + @layer ds.theme.color-scheme.light { :root, [data-color-scheme="light"] { --ds-color-accent-background-default: #ffffff; From a4a9f2e64c0c125191c0748b26928cfef7a7cf85 Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Thu, 25 Sep 2025 15:27:46 +0200 Subject: [PATCH 7/8] even closer --- .../src/tokens/process/formats/css/size.ts | 6 +- .../tokens/process/formats/css/type-scale.ts | 19 ++- packages/theme/src/themes/designsystemet.css | 129 +++++++++++++++++- 3 files changed, 143 insertions(+), 11 deletions(-) diff --git a/packages/cli/src/tokens/process/formats/css/size.ts b/packages/cli/src/tokens/process/formats/css/size.ts index 08c250ed7d..8298a54e38 100644 --- a/packages/cli/src/tokens/process/formats/css/size.ts +++ b/packages/cli/src/tokens/process/formats/css/size.ts @@ -19,7 +19,7 @@ export const isInlineTokens = R.anyPass([isNumericBorderRadiusToken, isNumericSi * @returns Object with formatted CSS strings for calc and round. */ export const overrideSizingFormula = (format: (t: TransformedToken) => string, token: TransformedToken) => { - const [name, value] = format(token).replace(/;$/, '').split(': '); + const [name, value] = format(token).trim().replace(/;$/, '').split(': '); let calc: string; let round: string | undefined; @@ -66,12 +66,12 @@ export const sizingTemplate = ({ round, calc }: { round: string[]; calc: string[ const supportsRoundCss = usesRounding.length ? `\n @supports (width: round(down, .1em, 1px)) { - ${usesRounding.join('\n ')} + ${usesRounding.join('\n ')} }` : ''; return ` -${calc.join('\n')}${supportsRoundCss}`; + ${calc.join('\n ')}${supportsRoundCss}`; }; export const size: Format = { diff --git a/packages/cli/src/tokens/process/formats/css/type-scale.ts b/packages/cli/src/tokens/process/formats/css/type-scale.ts index 7cca5c3b3d..2bc0e7ee59 100644 --- a/packages/cli/src/tokens/process/formats/css/type-scale.ts +++ b/packages/cli/src/tokens/process/formats/css/type-scale.ts @@ -28,7 +28,7 @@ const formatTypographySizeToken = ( token: TransformedToken, size?: string, ): { name: string; originalName: string; calc: string; round: string } => { - const [originalName, value] = format(token).replace(/;$/, '').split(': '); + const [originalName, value] = format(token).trim().replace(/;$/, '').split(': '); const name = size ? `${originalName}--${shortSizeName(size)}` : originalName; let calc: string; @@ -82,17 +82,17 @@ export const typeScale: Format = { }); const filteredTokens = R.reject(R.anyPass([isTypographyFontFamilyToken, isFontScaleToken]), dictionary.allTokens); - const formattedTokens = formatTypographySizeTokens(dictionary, format, filteredTokens, size); + const formatted = formatTypographySizeTokens(dictionary, format, filteredTokens, size); - const formattedMap = formattedTokens.round.map((t, i) => ({ - token: formattedTokens.tokens[i], + const formattedMap = formatted.round.map((s, i) => ({ + token: formatted.tokens[i], // Remove the `--` suffix for the token listing, since that is the only token we actually use - formatted: t.replace(formattedTokens.name[i], formattedTokens.originalName[i]), + formatted: s.replace(formatted.name[i], formatted.originalName[i]), })); buildOptions.buildTokenFormats[destination] = formattedMap; - const content = `${selector} {${sizingTemplate(formattedTokens)}\n}`; + const content = `${selector} {${sizingTemplate(formatted)}\n}`; const body = wrapInLayer(content, layer); /* @@ -101,7 +101,12 @@ export const typeScale: Format = { const sizes = orderBySize(buildOptions?.sizeModes ?? []).map(shortSizeName); const fontScaleToggles = size - ? '' + ? formatted.originalName + .map( + (variable) => ` ${variable}: +${sizes.map((size) => ` var(--ds-size--${size}, var(${variable}--${size}))`).join('\n')};`, + ) + .join('\n') : ` --ds-font-scale-base: ${sizes.map((size) => ` var(--ds-size--${size}, var(--ds-font-scale-base--${size}))`).join('\n')}; --ds-font-scale-ratio: diff --git a/packages/theme/src/themes/designsystemet.css b/packages/theme/src/themes/designsystemet.css index f297991699..c9f29a4c14 100644 --- a/packages/theme/src/themes/designsystemet.css +++ b/packages/theme/src/themes/designsystemet.css @@ -121,7 +121,134 @@ design-tokens: v1.5.1 @layer ds.theme.type-scale { :root, [data-size] { - + --ds-font-size-1: + var(--ds-size--sm, var(--ds-font-size-1--sm)) + var(--ds-size--md, var(--ds-font-size-1--md)) + var(--ds-size--lg, var(--ds-font-size-1--lg)); + --ds-font-size-2: + var(--ds-size--sm, var(--ds-font-size-2--sm)) + var(--ds-size--md, var(--ds-font-size-2--md)) + var(--ds-size--lg, var(--ds-font-size-2--lg)); + --ds-font-size-3: + var(--ds-size--sm, var(--ds-font-size-3--sm)) + var(--ds-size--md, var(--ds-font-size-3--md)) + var(--ds-size--lg, var(--ds-font-size-3--lg)); + --ds-font-size-4: + var(--ds-size--sm, var(--ds-font-size-4--sm)) + var(--ds-size--md, var(--ds-font-size-4--md)) + var(--ds-size--lg, var(--ds-font-size-4--lg)); + --ds-font-size-5: + var(--ds-size--sm, var(--ds-font-size-5--sm)) + var(--ds-size--md, var(--ds-font-size-5--md)) + var(--ds-size--lg, var(--ds-font-size-5--lg)); + --ds-font-size-6: + var(--ds-size--sm, var(--ds-font-size-6--sm)) + var(--ds-size--md, var(--ds-font-size-6--md)) + var(--ds-size--lg, var(--ds-font-size-6--lg)); + --ds-font-size-7: + var(--ds-size--sm, var(--ds-font-size-7--sm)) + var(--ds-size--md, var(--ds-font-size-7--md)) + var(--ds-size--lg, var(--ds-font-size-7--lg)); + --ds-font-size-8: + var(--ds-size--sm, var(--ds-font-size-8--sm)) + var(--ds-size--md, var(--ds-font-size-8--md)) + var(--ds-size--lg, var(--ds-font-size-8--lg)); + --ds-font-size-9: + var(--ds-size--sm, var(--ds-font-size-9--sm)) + var(--ds-size--md, var(--ds-font-size-9--md)) + var(--ds-size--lg, var(--ds-font-size-9--lg)); + --ds-font-size-10: + var(--ds-size--sm, var(--ds-font-size-10--sm)) + var(--ds-size--md, var(--ds-font-size-10--md)) + var(--ds-size--lg, var(--ds-font-size-10--lg)); + --ds-heading-2xl-font-size: + var(--ds-size--sm, var(--ds-heading-2xl-font-size--sm)) + var(--ds-size--md, var(--ds-heading-2xl-font-size--md)) + var(--ds-size--lg, var(--ds-heading-2xl-font-size--lg)); + --ds-heading-xl-font-size: + var(--ds-size--sm, var(--ds-heading-xl-font-size--sm)) + var(--ds-size--md, var(--ds-heading-xl-font-size--md)) + var(--ds-size--lg, var(--ds-heading-xl-font-size--lg)); + --ds-heading-lg-font-size: + var(--ds-size--sm, var(--ds-heading-lg-font-size--sm)) + var(--ds-size--md, var(--ds-heading-lg-font-size--md)) + var(--ds-size--lg, var(--ds-heading-lg-font-size--lg)); + --ds-heading-md-font-size: + var(--ds-size--sm, var(--ds-heading-md-font-size--sm)) + var(--ds-size--md, var(--ds-heading-md-font-size--md)) + var(--ds-size--lg, var(--ds-heading-md-font-size--lg)); + --ds-heading-sm-font-size: + var(--ds-size--sm, var(--ds-heading-sm-font-size--sm)) + var(--ds-size--md, var(--ds-heading-sm-font-size--md)) + var(--ds-size--lg, var(--ds-heading-sm-font-size--lg)); + --ds-heading-xs-font-size: + var(--ds-size--sm, var(--ds-heading-xs-font-size--sm)) + var(--ds-size--md, var(--ds-heading-xs-font-size--md)) + var(--ds-size--lg, var(--ds-heading-xs-font-size--lg)); + --ds-heading-2xs-font-size: + var(--ds-size--sm, var(--ds-heading-2xs-font-size--sm)) + var(--ds-size--md, var(--ds-heading-2xs-font-size--md)) + var(--ds-size--lg, var(--ds-heading-2xs-font-size--lg)); + --ds-body-xl-font-size: + var(--ds-size--sm, var(--ds-body-xl-font-size--sm)) + var(--ds-size--md, var(--ds-body-xl-font-size--md)) + var(--ds-size--lg, var(--ds-body-xl-font-size--lg)); + --ds-body-lg-font-size: + var(--ds-size--sm, var(--ds-body-lg-font-size--sm)) + var(--ds-size--md, var(--ds-body-lg-font-size--md)) + var(--ds-size--lg, var(--ds-body-lg-font-size--lg)); + --ds-body-md-font-size: + var(--ds-size--sm, var(--ds-body-md-font-size--sm)) + var(--ds-size--md, var(--ds-body-md-font-size--md)) + var(--ds-size--lg, var(--ds-body-md-font-size--lg)); + --ds-body-sm-font-size: + var(--ds-size--sm, var(--ds-body-sm-font-size--sm)) + var(--ds-size--md, var(--ds-body-sm-font-size--md)) + var(--ds-size--lg, var(--ds-body-sm-font-size--lg)); + --ds-body-xs-font-size: + var(--ds-size--sm, var(--ds-body-xs-font-size--sm)) + var(--ds-size--md, var(--ds-body-xs-font-size--md)) + var(--ds-size--lg, var(--ds-body-xs-font-size--lg)); + --ds-body-short-xl-font-size: + var(--ds-size--sm, var(--ds-body-short-xl-font-size--sm)) + var(--ds-size--md, var(--ds-body-short-xl-font-size--md)) + var(--ds-size--lg, var(--ds-body-short-xl-font-size--lg)); + --ds-body-short-lg-font-size: + var(--ds-size--sm, var(--ds-body-short-lg-font-size--sm)) + var(--ds-size--md, var(--ds-body-short-lg-font-size--md)) + var(--ds-size--lg, var(--ds-body-short-lg-font-size--lg)); + --ds-body-short-md-font-size: + var(--ds-size--sm, var(--ds-body-short-md-font-size--sm)) + var(--ds-size--md, var(--ds-body-short-md-font-size--md)) + var(--ds-size--lg, var(--ds-body-short-md-font-size--lg)); + --ds-body-short-sm-font-size: + var(--ds-size--sm, var(--ds-body-short-sm-font-size--sm)) + var(--ds-size--md, var(--ds-body-short-sm-font-size--md)) + var(--ds-size--lg, var(--ds-body-short-sm-font-size--lg)); + --ds-body-short-xs-font-size: + var(--ds-size--sm, var(--ds-body-short-xs-font-size--sm)) + var(--ds-size--md, var(--ds-body-short-xs-font-size--md)) + var(--ds-size--lg, var(--ds-body-short-xs-font-size--lg)); + --ds-body-long-xl-font-size: + var(--ds-size--sm, var(--ds-body-long-xl-font-size--sm)) + var(--ds-size--md, var(--ds-body-long-xl-font-size--md)) + var(--ds-size--lg, var(--ds-body-long-xl-font-size--lg)); + --ds-body-long-lg-font-size: + var(--ds-size--sm, var(--ds-body-long-lg-font-size--sm)) + var(--ds-size--md, var(--ds-body-long-lg-font-size--md)) + var(--ds-size--lg, var(--ds-body-long-lg-font-size--lg)); + --ds-body-long-md-font-size: + var(--ds-size--sm, var(--ds-body-long-md-font-size--sm)) + var(--ds-size--md, var(--ds-body-long-md-font-size--md)) + var(--ds-size--lg, var(--ds-body-long-md-font-size--lg)); + --ds-body-long-sm-font-size: + var(--ds-size--sm, var(--ds-body-long-sm-font-size--sm)) + var(--ds-size--md, var(--ds-body-long-sm-font-size--md)) + var(--ds-size--lg, var(--ds-body-long-sm-font-size--lg)); + --ds-body-long-xs-font-size: + var(--ds-size--sm, var(--ds-body-long-xs-font-size--sm)) + var(--ds-size--md, var(--ds-body-long-xs-font-size--md)) + var(--ds-size--lg, var(--ds-body-long-xs-font-size--lg)); } } From cd46c3832f98fe4cac379bd2a1d24193a2a538e0 Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Thu, 25 Sep 2025 15:58:25 +0200 Subject: [PATCH 8/8] working! todo: move typography.heading etc to its own config because type-scale.json (for preview) now doesn't include them --- .../tokens/design-tokens/type-scale.json | 560 ++++++++---------- .../src/tokens/process/configs/type-scale.ts | 4 +- .../tokens/process/formats/css/type-scale.ts | 15 +- .../cli/src/tokens/process/output/theme.ts | 1 + packages/theme/src/themes/designsystemet.css | 210 ++----- 5 files changed, 302 insertions(+), 488 deletions(-) diff --git a/apps/www/app/_components/tokens/design-tokens/type-scale.json b/apps/www/app/_components/tokens/design-tokens/type-scale.json index 603386a776..14f70353e0 100644 --- a/apps/www/app/_components/tokens/design-tokens/type-scale.json +++ b/apps/www/app/_components/tokens/design-tokens/type-scale.json @@ -1,312 +1,248 @@ -[ - { - "path": [ - "font-size", - "1" - ], - "variable": "--ds-font-size-1", - "value": "0.6875rem" - }, - { - "path": [ - "font-size", - "2" - ], - "variable": "--ds-font-size-2", - "value": "0.8125rem" - }, - { - "path": [ - "font-size", - "3" - ], - "variable": "--ds-font-size-3", - "value": "0.875rem" - }, - { - "path": [ - "font-size", - "4" - ], - "variable": "--ds-font-size-4", - "value": "1rem" - }, - { - "path": [ - "font-size", - "5" - ], - "variable": "--ds-font-size-5", - "value": "1.125rem" - }, - { - "path": [ - "font-size", - "6" - ], - "variable": "--ds-font-size-6", - "value": "1.25rem" - }, - { - "path": [ - "font-size", - "7" - ], - "variable": "--ds-font-size-7", - "value": "1.4375rem" - }, - { - "path": [ - "font-size", - "8" - ], - "variable": "--ds-font-size-8", - "value": "1.875rem" - }, - { - "path": [ - "font-size", - "9" - ], - "variable": "--ds-font-size-9", - "value": "2.375rem" - }, - { - "path": [ - "font-size", - "10" - ], - "variable": "--ds-font-size-10", - "value": "3rem" - }, - { - "path": [ - "typography", - "heading", - "2xl", - "fontSize" - ], - "variable": "--ds-heading-2xl-font-size", - "value": "var(--ds-font-size-10)" - }, - { - "path": [ - "typography", - "heading", - "xl", - "fontSize" - ], - "variable": "--ds-heading-xl-font-size", - "value": "var(--ds-font-size-9)" - }, - { - "path": [ - "typography", - "heading", - "lg", - "fontSize" - ], - "variable": "--ds-heading-lg-font-size", - "value": "var(--ds-font-size-8)" - }, - { - "path": [ - "typography", - "heading", - "md", - "fontSize" - ], - "variable": "--ds-heading-md-font-size", - "value": "var(--ds-font-size-7)" - }, - { - "path": [ - "typography", - "heading", - "sm", - "fontSize" - ], - "variable": "--ds-heading-sm-font-size", - "value": "var(--ds-font-size-6)" - }, - { - "path": [ - "typography", - "heading", - "xs", - "fontSize" - ], - "variable": "--ds-heading-xs-font-size", - "value": "var(--ds-font-size-5)" - }, - { - "path": [ - "typography", - "heading", - "2xs", - "fontSize" - ], - "variable": "--ds-heading-2xs-font-size", - "value": "var(--ds-font-size-4)" - }, - { - "path": [ - "typography", - "body", - "xl", - "fontSize" - ], - "variable": "--ds-body-xl-font-size", - "value": "var(--ds-font-size-6)" - }, - { - "path": [ - "typography", - "body", - "lg", - "fontSize" - ], - "variable": "--ds-body-lg-font-size", - "value": "var(--ds-font-size-5)" - }, - { - "path": [ - "typography", - "body", - "md", - "fontSize" - ], - "variable": "--ds-body-md-font-size", - "value": "var(--ds-font-size-4)" - }, - { - "path": [ - "typography", - "body", - "sm", - "fontSize" - ], - "variable": "--ds-body-sm-font-size", - "value": "var(--ds-font-size-3)" - }, - { - "path": [ - "typography", - "body", - "xs", - "fontSize" - ], - "variable": "--ds-body-xs-font-size", - "value": "var(--ds-font-size-2)" - }, - { - "path": [ - "typography", - "body", - "short", - "xl", - "fontSize" - ], - "variable": "--ds-body-short-xl-font-size", - "value": "var(--ds-font-size-6)" - }, - { - "path": [ - "typography", - "body", - "short", - "lg", - "fontSize" - ], - "variable": "--ds-body-short-lg-font-size", - "value": "var(--ds-font-size-5)" - }, - { - "path": [ - "typography", - "body", - "short", - "md", - "fontSize" - ], - "variable": "--ds-body-short-md-font-size", - "value": "var(--ds-font-size-4)" - }, - { - "path": [ - "typography", - "body", - "short", - "sm", - "fontSize" - ], - "variable": "--ds-body-short-sm-font-size", - "value": "var(--ds-font-size-3)" - }, - { - "path": [ - "typography", - "body", - "short", - "xs", - "fontSize" - ], - "variable": "--ds-body-short-xs-font-size", - "value": "var(--ds-font-size-2)" - }, - { - "path": [ - "typography", - "body", - "long", - "xl", - "fontSize" - ], - "variable": "--ds-body-long-xl-font-size", - "value": "var(--ds-font-size-6)" - }, - { - "path": [ - "typography", - "body", - "long", - "lg", - "fontSize" - ], - "variable": "--ds-body-long-lg-font-size", - "value": "var(--ds-font-size-5)" - }, - { - "path": [ - "typography", - "body", - "long", - "md", - "fontSize" - ], - "variable": "--ds-body-long-md-font-size", - "value": "var(--ds-font-size-4)" - }, - { - "path": [ - "typography", - "body", - "long", - "sm", - "fontSize" - ], - "variable": "--ds-body-long-sm-font-size", - "value": "var(--ds-font-size-3)" - }, - { - "path": [ - "typography", - "body", - "long", - "xs", - "fontSize" - ], - "variable": "--ds-body-long-xs-font-size", - "value": "var(--ds-font-size-2)" - } -] \ No newline at end of file +{ + "medium": [ + { + "path": [ + "font-size", + "1" + ], + "variable": "--ds-font-size-1", + "value": "0.75rem" + }, + { + "path": [ + "font-size", + "2" + ], + "variable": "--ds-font-size-2", + "value": "0.875rem" + }, + { + "path": [ + "font-size", + "3" + ], + "variable": "--ds-font-size-3", + "value": "1rem" + }, + { + "path": [ + "font-size", + "4" + ], + "variable": "--ds-font-size-4", + "value": "1.125rem" + }, + { + "path": [ + "font-size", + "5" + ], + "variable": "--ds-font-size-5", + "value": "1.3125rem" + }, + { + "path": [ + "font-size", + "6" + ], + "variable": "--ds-font-size-6", + "value": "1.5rem" + }, + { + "path": [ + "font-size", + "7" + ], + "variable": "--ds-font-size-7", + "value": "1.6875rem" + }, + { + "path": [ + "font-size", + "8" + ], + "variable": "--ds-font-size-8", + "value": "2.1875rem" + }, + { + "path": [ + "font-size", + "9" + ], + "variable": "--ds-font-size-9", + "value": "2.875rem" + }, + { + "path": [ + "font-size", + "10" + ], + "variable": "--ds-font-size-10", + "value": "3.75rem" + } + ], + "large": [ + { + "path": [ + "font-size", + "1" + ], + "variable": "--ds-font-size-1", + "value": "0.875rem" + }, + { + "path": [ + "font-size", + "2" + ], + "variable": "--ds-font-size-2", + "value": "1rem" + }, + { + "path": [ + "font-size", + "3" + ], + "variable": "--ds-font-size-3", + "value": "1.125rem" + }, + { + "path": [ + "font-size", + "4" + ], + "variable": "--ds-font-size-4", + "value": "1.3125rem" + }, + { + "path": [ + "font-size", + "5" + ], + "variable": "--ds-font-size-5", + "value": "1.5rem" + }, + { + "path": [ + "font-size", + "6" + ], + "variable": "--ds-font-size-6", + "value": "1.75rem" + }, + { + "path": [ + "font-size", + "7" + ], + "variable": "--ds-font-size-7", + "value": "2rem" + }, + { + "path": [ + "font-size", + "8" + ], + "variable": "--ds-font-size-8", + "value": "2.625rem" + }, + { + "path": [ + "font-size", + "9" + ], + "variable": "--ds-font-size-9", + "value": "3.4375rem" + }, + { + "path": [ + "font-size", + "10" + ], + "variable": "--ds-font-size-10", + "value": "4.5rem" + } + ], + "small": [ + { + "path": [ + "font-size", + "1" + ], + "variable": "--ds-font-size-1", + "value": "0.6875rem" + }, + { + "path": [ + "font-size", + "2" + ], + "variable": "--ds-font-size-2", + "value": "0.8125rem" + }, + { + "path": [ + "font-size", + "3" + ], + "variable": "--ds-font-size-3", + "value": "0.875rem" + }, + { + "path": [ + "font-size", + "4" + ], + "variable": "--ds-font-size-4", + "value": "1rem" + }, + { + "path": [ + "font-size", + "5" + ], + "variable": "--ds-font-size-5", + "value": "1.125rem" + }, + { + "path": [ + "font-size", + "6" + ], + "variable": "--ds-font-size-6", + "value": "1.25rem" + }, + { + "path": [ + "font-size", + "7" + ], + "variable": "--ds-font-size-7", + "value": "1.4375rem" + }, + { + "path": [ + "font-size", + "8" + ], + "variable": "--ds-font-size-8", + "value": "1.875rem" + }, + { + "path": [ + "font-size", + "9" + ], + "variable": "--ds-font-size-9", + "value": "2.375rem" + }, + { + "path": [ + "font-size", + "10" + ], + "variable": "--ds-font-size-10", + "value": "3rem" + } + ] +} \ No newline at end of file diff --git a/packages/cli/src/tokens/process/configs/type-scale.ts b/packages/cli/src/tokens/process/configs/type-scale.ts index 598cebc8b7..8bdcff8259 100644 --- a/packages/cli/src/tokens/process/configs/type-scale.ts +++ b/packages/cli/src/tokens/process/configs/type-scale.ts @@ -9,7 +9,7 @@ export const typeScaleVariables = if (scaleValues === 'static') { console.log('typescalevariables: size =', size); } - const selector = ':root, [data-size]'; + const selector = ':root'; const layer = `ds.theme.type-scale`; return { @@ -37,7 +37,7 @@ export const typeScaleVariables = ], files: [ { - destination: `type-scale.css`, + destination: scaleValues === 'static' ? `type-scale/${size}.css` : `type-scale.css`, format: formats.typeScale.name, filter: (token) => { const included = typeEquals(['typography', 'dimension', 'fontsize', 'number'], token); diff --git a/packages/cli/src/tokens/process/formats/css/type-scale.ts b/packages/cli/src/tokens/process/formats/css/type-scale.ts index 2bc0e7ee59..1d0c090d8c 100644 --- a/packages/cli/src/tokens/process/formats/css/type-scale.ts +++ b/packages/cli/src/tokens/process/formats/css/type-scale.ts @@ -29,10 +29,14 @@ const formatTypographySizeToken = ( size?: string, ): { name: string; originalName: string; calc: string; round: string } => { const [originalName, value] = format(token).trim().replace(/;$/, '').split(': '); - const name = size ? `${originalName}--${shortSizeName(size)}` : originalName; + // If we have a size, we're using static type scale values, and need to output the static values per mode. + const name = + size && R.startsWith(['font-size'], token.path) ? `${originalName}--${shortSizeName(size)}` : originalName; let calc: string; let round: string | undefined; + // If we don't have a size, it means we're using modular type scale values. + // That means we need to translate the Tokens Studio formulas to css. if (!size && R.startsWith(['font-size'], token.path)) { const originalWithCssReference = (token.original.$value as string).replaceAll(/\{font-scale\.[^}]+\}/g, (match) => { const t = dictionary.unfilteredTokenMap?.get(match); @@ -82,7 +86,8 @@ export const typeScale: Format = { }); const filteredTokens = R.reject(R.anyPass([isTypographyFontFamilyToken, isFontScaleToken]), dictionary.allTokens); - const formatted = formatTypographySizeTokens(dictionary, format, filteredTokens, size); + const [typeScaleTokens, restTokens] = R.partition((t) => R.startsWith(['font-size'], t.path), filteredTokens); + const formatted = formatTypographySizeTokens(dictionary, format, typeScaleTokens, size); const formattedMap = formatted.round.map((s, i) => ({ token: formatted.tokens[i], @@ -92,7 +97,8 @@ export const typeScale: Format = { buildOptions.buildTokenFormats[destination] = formattedMap; - const content = `${selector} {${sizingTemplate(formatted)}\n}`; + const optionalSizeComment = size ? ` /* ${size} */` : ''; + const content = `${selector}${optionalSizeComment} {${sizingTemplate(formatted)}\n}`; const body = wrapInLayer(content, layer); /* @@ -112,9 +118,12 @@ ${sizes.map((size) => ` var(--ds-size--${size}, var(--ds-font-scale-base--${s --ds-font-scale-ratio: ${sizes.map((size) => ` var(--ds-size--${size}, var(--ds-font-scale-ratio--${size}))`).join('\n')};`; + const referenceVariables = restTokens.map(format).join('\n'); const sharedContent = `:root, [data-size] { ${fontScaleToggles} +${referenceVariables} }`; + const sharedBody = !size || shortSizeName(size) === R.last(sizes) ? `\n${wrapInLayer(sharedContent, layer)}` : ''; /* * End of generated-once CSS diff --git a/packages/cli/src/tokens/process/output/theme.ts b/packages/cli/src/tokens/process/output/theme.ts index a8406ebda3..d57cc4d32e 100644 --- a/packages/cli/src/tokens/process/output/theme.ts +++ b/packages/cli/src/tokens/process/output/theme.ts @@ -58,6 +58,7 @@ export const createThemeCSSFiles = ({ const sortOrder = [ 'size-mode/', 'type-scale', + 'type-scale/', 'color-scheme/light', 'typography/secondary', 'size', diff --git a/packages/theme/src/themes/designsystemet.css b/packages/theme/src/themes/designsystemet.css index c9f29a4c14..56fe98040c 100644 --- a/packages/theme/src/themes/designsystemet.css +++ b/packages/theme/src/themes/designsystemet.css @@ -46,7 +46,22 @@ design-tokens: v1.5.1 } @layer ds.theme.type-scale { -:root, [data-size] { +:root /* small */ { + --ds-font-size-1--sm: 0.6875rem; + --ds-font-size-2--sm: 0.8125rem; + --ds-font-size-3--sm: 0.875rem; + --ds-font-size-4--sm: 1rem; + --ds-font-size-5--sm: 1.125rem; + --ds-font-size-6--sm: 1.25rem; + --ds-font-size-7--sm: 1.4375rem; + --ds-font-size-8--sm: 1.875rem; + --ds-font-size-9--sm: 2.375rem; + --ds-font-size-10--sm: 3rem; +} +} + +@layer ds.theme.type-scale { +:root /* medium */ { --ds-font-size-1--md: 0.75rem; --ds-font-size-2--md: 0.875rem; --ds-font-size-3--md: 1rem; @@ -57,33 +72,11 @@ design-tokens: v1.5.1 --ds-font-size-8--md: 2.1875rem; --ds-font-size-9--md: 2.875rem; --ds-font-size-10--md: 3.75rem; - --ds-heading-2xl-font-size--md: var(--ds-font-size-10); - --ds-heading-xl-font-size--md: var(--ds-font-size-9); - --ds-heading-lg-font-size--md: var(--ds-font-size-8); - --ds-heading-md-font-size--md: var(--ds-font-size-7); - --ds-heading-sm-font-size--md: var(--ds-font-size-6); - --ds-heading-xs-font-size--md: var(--ds-font-size-5); - --ds-heading-2xs-font-size--md: var(--ds-font-size-4); - --ds-body-xl-font-size--md: var(--ds-font-size-6); - --ds-body-lg-font-size--md: var(--ds-font-size-5); - --ds-body-md-font-size--md: var(--ds-font-size-4); - --ds-body-sm-font-size--md: var(--ds-font-size-3); - --ds-body-xs-font-size--md: var(--ds-font-size-2); - --ds-body-short-xl-font-size--md: var(--ds-font-size-6); - --ds-body-short-lg-font-size--md: var(--ds-font-size-5); - --ds-body-short-md-font-size--md: var(--ds-font-size-4); - --ds-body-short-sm-font-size--md: var(--ds-font-size-3); - --ds-body-short-xs-font-size--md: var(--ds-font-size-2); - --ds-body-long-xl-font-size--md: var(--ds-font-size-6); - --ds-body-long-lg-font-size--md: var(--ds-font-size-5); - --ds-body-long-md-font-size--md: var(--ds-font-size-4); - --ds-body-long-sm-font-size--md: var(--ds-font-size-3); - --ds-body-long-xs-font-size--md: var(--ds-font-size-2); } } @layer ds.theme.type-scale { -:root, [data-size] { +:root /* large */ { --ds-font-size-1--lg: 0.875rem; --ds-font-size-2--lg: 1rem; --ds-font-size-3--lg: 1.125rem; @@ -94,28 +87,6 @@ design-tokens: v1.5.1 --ds-font-size-8--lg: 2.625rem; --ds-font-size-9--lg: 3.4375rem; --ds-font-size-10--lg: 4.5rem; - --ds-heading-2xl-font-size--lg: var(--ds-font-size-10); - --ds-heading-xl-font-size--lg: var(--ds-font-size-9); - --ds-heading-lg-font-size--lg: var(--ds-font-size-8); - --ds-heading-md-font-size--lg: var(--ds-font-size-7); - --ds-heading-sm-font-size--lg: var(--ds-font-size-6); - --ds-heading-xs-font-size--lg: var(--ds-font-size-5); - --ds-heading-2xs-font-size--lg: var(--ds-font-size-4); - --ds-body-xl-font-size--lg: var(--ds-font-size-6); - --ds-body-lg-font-size--lg: var(--ds-font-size-5); - --ds-body-md-font-size--lg: var(--ds-font-size-4); - --ds-body-sm-font-size--lg: var(--ds-font-size-3); - --ds-body-xs-font-size--lg: var(--ds-font-size-2); - --ds-body-short-xl-font-size--lg: var(--ds-font-size-6); - --ds-body-short-lg-font-size--lg: var(--ds-font-size-5); - --ds-body-short-md-font-size--lg: var(--ds-font-size-4); - --ds-body-short-sm-font-size--lg: var(--ds-font-size-3); - --ds-body-short-xs-font-size--lg: var(--ds-font-size-2); - --ds-body-long-xl-font-size--lg: var(--ds-font-size-6); - --ds-body-long-lg-font-size--lg: var(--ds-font-size-5); - --ds-body-long-md-font-size--lg: var(--ds-font-size-4); - --ds-body-long-sm-font-size--lg: var(--ds-font-size-3); - --ds-body-long-xs-font-size--lg: var(--ds-font-size-2); } } @@ -161,131 +132,28 @@ design-tokens: v1.5.1 var(--ds-size--sm, var(--ds-font-size-10--sm)) var(--ds-size--md, var(--ds-font-size-10--md)) var(--ds-size--lg, var(--ds-font-size-10--lg)); - --ds-heading-2xl-font-size: - var(--ds-size--sm, var(--ds-heading-2xl-font-size--sm)) - var(--ds-size--md, var(--ds-heading-2xl-font-size--md)) - var(--ds-size--lg, var(--ds-heading-2xl-font-size--lg)); - --ds-heading-xl-font-size: - var(--ds-size--sm, var(--ds-heading-xl-font-size--sm)) - var(--ds-size--md, var(--ds-heading-xl-font-size--md)) - var(--ds-size--lg, var(--ds-heading-xl-font-size--lg)); - --ds-heading-lg-font-size: - var(--ds-size--sm, var(--ds-heading-lg-font-size--sm)) - var(--ds-size--md, var(--ds-heading-lg-font-size--md)) - var(--ds-size--lg, var(--ds-heading-lg-font-size--lg)); - --ds-heading-md-font-size: - var(--ds-size--sm, var(--ds-heading-md-font-size--sm)) - var(--ds-size--md, var(--ds-heading-md-font-size--md)) - var(--ds-size--lg, var(--ds-heading-md-font-size--lg)); - --ds-heading-sm-font-size: - var(--ds-size--sm, var(--ds-heading-sm-font-size--sm)) - var(--ds-size--md, var(--ds-heading-sm-font-size--md)) - var(--ds-size--lg, var(--ds-heading-sm-font-size--lg)); - --ds-heading-xs-font-size: - var(--ds-size--sm, var(--ds-heading-xs-font-size--sm)) - var(--ds-size--md, var(--ds-heading-xs-font-size--md)) - var(--ds-size--lg, var(--ds-heading-xs-font-size--lg)); - --ds-heading-2xs-font-size: - var(--ds-size--sm, var(--ds-heading-2xs-font-size--sm)) - var(--ds-size--md, var(--ds-heading-2xs-font-size--md)) - var(--ds-size--lg, var(--ds-heading-2xs-font-size--lg)); - --ds-body-xl-font-size: - var(--ds-size--sm, var(--ds-body-xl-font-size--sm)) - var(--ds-size--md, var(--ds-body-xl-font-size--md)) - var(--ds-size--lg, var(--ds-body-xl-font-size--lg)); - --ds-body-lg-font-size: - var(--ds-size--sm, var(--ds-body-lg-font-size--sm)) - var(--ds-size--md, var(--ds-body-lg-font-size--md)) - var(--ds-size--lg, var(--ds-body-lg-font-size--lg)); - --ds-body-md-font-size: - var(--ds-size--sm, var(--ds-body-md-font-size--sm)) - var(--ds-size--md, var(--ds-body-md-font-size--md)) - var(--ds-size--lg, var(--ds-body-md-font-size--lg)); - --ds-body-sm-font-size: - var(--ds-size--sm, var(--ds-body-sm-font-size--sm)) - var(--ds-size--md, var(--ds-body-sm-font-size--md)) - var(--ds-size--lg, var(--ds-body-sm-font-size--lg)); - --ds-body-xs-font-size: - var(--ds-size--sm, var(--ds-body-xs-font-size--sm)) - var(--ds-size--md, var(--ds-body-xs-font-size--md)) - var(--ds-size--lg, var(--ds-body-xs-font-size--lg)); - --ds-body-short-xl-font-size: - var(--ds-size--sm, var(--ds-body-short-xl-font-size--sm)) - var(--ds-size--md, var(--ds-body-short-xl-font-size--md)) - var(--ds-size--lg, var(--ds-body-short-xl-font-size--lg)); - --ds-body-short-lg-font-size: - var(--ds-size--sm, var(--ds-body-short-lg-font-size--sm)) - var(--ds-size--md, var(--ds-body-short-lg-font-size--md)) - var(--ds-size--lg, var(--ds-body-short-lg-font-size--lg)); - --ds-body-short-md-font-size: - var(--ds-size--sm, var(--ds-body-short-md-font-size--sm)) - var(--ds-size--md, var(--ds-body-short-md-font-size--md)) - var(--ds-size--lg, var(--ds-body-short-md-font-size--lg)); - --ds-body-short-sm-font-size: - var(--ds-size--sm, var(--ds-body-short-sm-font-size--sm)) - var(--ds-size--md, var(--ds-body-short-sm-font-size--md)) - var(--ds-size--lg, var(--ds-body-short-sm-font-size--lg)); - --ds-body-short-xs-font-size: - var(--ds-size--sm, var(--ds-body-short-xs-font-size--sm)) - var(--ds-size--md, var(--ds-body-short-xs-font-size--md)) - var(--ds-size--lg, var(--ds-body-short-xs-font-size--lg)); - --ds-body-long-xl-font-size: - var(--ds-size--sm, var(--ds-body-long-xl-font-size--sm)) - var(--ds-size--md, var(--ds-body-long-xl-font-size--md)) - var(--ds-size--lg, var(--ds-body-long-xl-font-size--lg)); - --ds-body-long-lg-font-size: - var(--ds-size--sm, var(--ds-body-long-lg-font-size--sm)) - var(--ds-size--md, var(--ds-body-long-lg-font-size--md)) - var(--ds-size--lg, var(--ds-body-long-lg-font-size--lg)); - --ds-body-long-md-font-size: - var(--ds-size--sm, var(--ds-body-long-md-font-size--sm)) - var(--ds-size--md, var(--ds-body-long-md-font-size--md)) - var(--ds-size--lg, var(--ds-body-long-md-font-size--lg)); - --ds-body-long-sm-font-size: - var(--ds-size--sm, var(--ds-body-long-sm-font-size--sm)) - var(--ds-size--md, var(--ds-body-long-sm-font-size--md)) - var(--ds-size--lg, var(--ds-body-long-sm-font-size--lg)); - --ds-body-long-xs-font-size: - var(--ds-size--sm, var(--ds-body-long-xs-font-size--sm)) - var(--ds-size--md, var(--ds-body-long-xs-font-size--md)) - var(--ds-size--lg, var(--ds-body-long-xs-font-size--lg)); -} -} - -@layer ds.theme.type-scale { -:root, [data-size] { - --ds-font-size-1--sm: 0.6875rem; - --ds-font-size-2--sm: 0.8125rem; - --ds-font-size-3--sm: 0.875rem; - --ds-font-size-4--sm: 1rem; - --ds-font-size-5--sm: 1.125rem; - --ds-font-size-6--sm: 1.25rem; - --ds-font-size-7--sm: 1.4375rem; - --ds-font-size-8--sm: 1.875rem; - --ds-font-size-9--sm: 2.375rem; - --ds-font-size-10--sm: 3rem; - --ds-heading-2xl-font-size--sm: var(--ds-font-size-10); - --ds-heading-xl-font-size--sm: var(--ds-font-size-9); - --ds-heading-lg-font-size--sm: var(--ds-font-size-8); - --ds-heading-md-font-size--sm: var(--ds-font-size-7); - --ds-heading-sm-font-size--sm: var(--ds-font-size-6); - --ds-heading-xs-font-size--sm: var(--ds-font-size-5); - --ds-heading-2xs-font-size--sm: var(--ds-font-size-4); - --ds-body-xl-font-size--sm: var(--ds-font-size-6); - --ds-body-lg-font-size--sm: var(--ds-font-size-5); - --ds-body-md-font-size--sm: var(--ds-font-size-4); - --ds-body-sm-font-size--sm: var(--ds-font-size-3); - --ds-body-xs-font-size--sm: var(--ds-font-size-2); - --ds-body-short-xl-font-size--sm: var(--ds-font-size-6); - --ds-body-short-lg-font-size--sm: var(--ds-font-size-5); - --ds-body-short-md-font-size--sm: var(--ds-font-size-4); - --ds-body-short-sm-font-size--sm: var(--ds-font-size-3); - --ds-body-short-xs-font-size--sm: var(--ds-font-size-2); - --ds-body-long-xl-font-size--sm: var(--ds-font-size-6); - --ds-body-long-lg-font-size--sm: var(--ds-font-size-5); - --ds-body-long-md-font-size--sm: var(--ds-font-size-4); - --ds-body-long-sm-font-size--sm: var(--ds-font-size-3); - --ds-body-long-xs-font-size--sm: var(--ds-font-size-2); + --ds-heading-2xl-font-size: var(--ds-font-size-10); + --ds-heading-xl-font-size: var(--ds-font-size-9); + --ds-heading-lg-font-size: var(--ds-font-size-8); + --ds-heading-md-font-size: var(--ds-font-size-7); + --ds-heading-sm-font-size: var(--ds-font-size-6); + --ds-heading-xs-font-size: var(--ds-font-size-5); + --ds-heading-2xs-font-size: var(--ds-font-size-4); + --ds-body-xl-font-size: var(--ds-font-size-6); + --ds-body-lg-font-size: var(--ds-font-size-5); + --ds-body-md-font-size: var(--ds-font-size-4); + --ds-body-sm-font-size: var(--ds-font-size-3); + --ds-body-xs-font-size: var(--ds-font-size-2); + --ds-body-short-xl-font-size: var(--ds-font-size-6); + --ds-body-short-lg-font-size: var(--ds-font-size-5); + --ds-body-short-md-font-size: var(--ds-font-size-4); + --ds-body-short-sm-font-size: var(--ds-font-size-3); + --ds-body-short-xs-font-size: var(--ds-font-size-2); + --ds-body-long-xl-font-size: var(--ds-font-size-6); + --ds-body-long-lg-font-size: var(--ds-font-size-5); + --ds-body-long-md-font-size: var(--ds-font-size-4); + --ds-body-long-sm-font-size: var(--ds-font-size-3); + --ds-body-long-xs-font-size: var(--ds-font-size-2); } }