From 186499ab88095177bb315e804a9b7bc88eeafd18 Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Mon, 19 Jan 2026 13:47:38 +0100 Subject: [PATCH 1/4] feat(tokens): use a modular font size scale which is easier to implement and override in css --- .../tokens/design-tokens/size-mode.json | 48 +++++++ .../tokens/design-tokens/type-scale.json | 20 +-- design-tokens/$designsystemet.jsonc | 2 +- design-tokens/$metadata.json | 3 +- design-tokens/$themes.json | 9 +- .../modes/typography/size/global.json | 20 +-- .../modes/typography/size/large.json | 96 +------------- .../modes/typography/size/medium.json | 96 +------------- .../modes/typography/size/small.json | 96 +------------- .../design-tokens/$designsystemet.jsonc | 2 +- internal/digdir/design-tokens/$metadata.json | 3 +- internal/digdir/design-tokens/$themes.json | 9 +- .../modes/typography/size/global.json | 20 +-- .../modes/typography/size/large.json | 96 +------------- .../modes/typography/size/medium.json | 96 +------------- .../modes/typography/size/small.json | 96 +------------- internal/digdir/package.json | 2 +- internal/digdir/themes/altinn.css | 71 +++++++---- internal/digdir/themes/colors.d.ts | 2 +- internal/digdir/themes/digdir.css | 71 +++++++---- internal/digdir/themes/portal.css | 71 +++++++---- internal/digdir/themes/types.d.ts | 2 +- internal/digdir/themes/uutilsynet.css | 71 +++++++---- packages/cli/bin/config.ts | 15 ++- packages/cli/bin/designsystemet.ts | 20 ++- packages/cli/package.json | 6 +- packages/cli/src/config.ts | 74 +++++++++-- packages/cli/src/index.ts | 2 +- packages/cli/src/scripts/createJsonSchema.ts | 4 +- .../cli/src/scripts/update-preview-tokens.ts | 5 +- packages/cli/src/tokens/build.ts | 1 + packages/cli/src/tokens/create.ts | 15 ++- packages/cli/src/tokens/create/defaults.ts | 14 +- .../src/tokens/create/generators/$metadata.ts | 3 +- .../src/tokens/create/generators/$themes.ts | 9 +- .../create/generators/typographySize.ts | 44 +++++++ packages/cli/src/tokens/format.ts | 10 +- packages/cli/src/tokens/generate-config.ts | 1 + .../src/tokens/process/configs/semantic.ts | 2 +- .../src/tokens/process/configs/size-mode.ts | 59 +++++---- .../src/tokens/process/configs/type-scale.ts | 88 +++++++------ .../tokens/process/formats/css/size-mode.ts | 9 +- .../src/tokens/process/formats/css/size.ts | 14 +- .../tokens/process/formats/css/type-scale.ts | 108 ++++++++++++---- .../cli/src/tokens/process/output/theme.ts | 1 + packages/cli/src/tokens/process/platform.ts | 120 ++++++++++-------- .../size/{small.json => global.json} | 20 +-- packages/css/package.json | 2 +- packages/css/src/data-size-workaround.css | 4 + packages/css/theme/designsystemet.css | 69 ++++++---- packages/theme/brand/altinn.css | 55 +++++--- packages/theme/brand/digdir.css | 55 +++++--- packages/theme/brand/portal.css | 55 +++++--- packages/theme/brand/uutilsynet.css | 55 +++++--- packages/theme/package.json | 2 +- packages/theme/src/themes/colors.d.ts | 2 +- packages/theme/src/themes/designsystemet.css | 71 +++++++---- packages/theme/src/themes/types.d.ts | 2 +- 58 files changed, 973 insertions(+), 1045 deletions(-) rename packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/large.json => design-tokens/primitives/modes/typography/size/global.json (64%) rename packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/medium.json => internal/digdir/design-tokens/primitives/modes/typography/size/global.json (64%) create mode 100644 packages/cli/src/tokens/create/generators/typographySize.ts rename packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/{small.json => global.json} (64%) 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/design-tokens/$designsystemet.jsonc b/design-tokens/$designsystemet.jsonc index 42926c1db9..ba4330b619 100644 --- a/design-tokens/$designsystemet.jsonc +++ b/design-tokens/$designsystemet.jsonc @@ -1,4 +1,4 @@ { "name": "@digdir/designsystemet", - "version": "1.9.0" + "version": "1.10.0" } \ No newline at end of file diff --git a/design-tokens/$metadata.json b/design-tokens/$metadata.json index bf44b82167..c9fa92cb2c 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 23aeb20ba4..c9a4dc7e1a 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/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/large.json b/design-tokens/primitives/modes/typography/size/global.json similarity index 64% rename from packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/large.json rename to design-tokens/primitives/modes/typography/size/global.json index 9d7ed9b3e6..a3dd5469ea 100644 --- a/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/large.json +++ b/design-tokens/primitives/modes/typography/size/global.json @@ -16,43 +16,43 @@ "font-size": { "1": { "$type": "fontSizes", - "$value": "13" + "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 3), 0)" }, "2": { "$type": "fontSizes", - "$value": "16" + "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 2), 0)" }, "3": { "$type": "fontSizes", - "$value": "18" + "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 1), 0)" }, "4": { "$type": "fontSizes", - "$value": "21" + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 0), 0)" }, "5": { "$type": "fontSizes", - "$value": "24" + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 1), 0)" }, "6": { "$type": "fontSizes", - "$value": "30" + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 2), 0)" }, "7": { "$type": "fontSizes", - "$value": "36" + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 3), 0)" }, "8": { "$type": "fontSizes", - "$value": "48" + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 5), 0)" }, "9": { "$type": "fontSizes", - "$value": "60" + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 7), 0)" }, "10": { "$type": "fontSizes", - "$value": "72" + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 9), 0)" } }, "letter-spacing": { diff --git a/design-tokens/primitives/modes/typography/size/large.json b/design-tokens/primitives/modes/typography/size/large.json index 9d7ed9b3e6..c42d046f48 100644 --- a/design-tokens/primitives/modes/typography/size/large.json +++ b/design-tokens/primitives/modes/typography/size/large.json @@ -1,96 +1,12 @@ { - "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", + "font-scale": { + "_base": { + "$type": "number", "$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%" + "_ratio": { + "$type": "number", + "$value": "1.146" } } } \ 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..7bd4dbfaf9 100644 --- a/design-tokens/primitives/modes/typography/size/medium.json +++ b/design-tokens/primitives/modes/typography/size/medium.json @@ -1,96 +1,12 @@ { - "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", + "font-scale": { + "_base": { + "$type": "number", "$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%" + "_ratio": { + "$type": "number", + "$value": "1.143" } } } \ 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..670188c6a4 100644 --- a/design-tokens/primitives/modes/typography/size/small.json +++ b/design-tokens/primitives/modes/typography/size/small.json @@ -1,96 +1,12 @@ { - "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", + "font-scale": { + "_base": { + "$type": "number", "$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%" + "_ratio": { + "$type": "number", + "$value": "1.131" } } } \ No newline at end of file diff --git a/internal/digdir/design-tokens/$designsystemet.jsonc b/internal/digdir/design-tokens/$designsystemet.jsonc index 42926c1db9..ba4330b619 100644 --- a/internal/digdir/design-tokens/$designsystemet.jsonc +++ b/internal/digdir/design-tokens/$designsystemet.jsonc @@ -1,4 +1,4 @@ { "name": "@digdir/designsystemet", - "version": "1.9.0" + "version": "1.10.0" } \ No newline at end of file diff --git a/internal/digdir/design-tokens/$metadata.json b/internal/digdir/design-tokens/$metadata.json index e43b6f1f16..81c05fb57c 100644 --- a/internal/digdir/design-tokens/$metadata.json +++ b/internal/digdir/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/digdir/design-tokens/$themes.json b/internal/digdir/design-tokens/$themes.json index 5a244b59b2..d11882856e 100644 --- a/internal/digdir/design-tokens/$themes.json +++ b/internal/digdir/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/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/medium.json b/internal/digdir/design-tokens/primitives/modes/typography/size/global.json similarity index 64% rename from packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/medium.json rename to internal/digdir/design-tokens/primitives/modes/typography/size/global.json index f861fb854c..a3dd5469ea 100644 --- a/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/medium.json +++ b/internal/digdir/design-tokens/primitives/modes/typography/size/global.json @@ -16,43 +16,43 @@ "font-size": { "1": { "$type": "fontSizes", - "$value": "12" + "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 3), 0)" }, "2": { "$type": "fontSizes", - "$value": "14" + "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 2), 0)" }, "3": { "$type": "fontSizes", - "$value": "16" + "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 1), 0)" }, "4": { "$type": "fontSizes", - "$value": "18" + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 0), 0)" }, "5": { "$type": "fontSizes", - "$value": "21" + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 1), 0)" }, "6": { "$type": "fontSizes", - "$value": "24" + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 2), 0)" }, "7": { "$type": "fontSizes", - "$value": "30" + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 3), 0)" }, "8": { "$type": "fontSizes", - "$value": "36" + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 5), 0)" }, "9": { "$type": "fontSizes", - "$value": "48" + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 7), 0)" }, "10": { "$type": "fontSizes", - "$value": "60" + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 9), 0)" } }, "letter-spacing": { diff --git a/internal/digdir/design-tokens/primitives/modes/typography/size/large.json b/internal/digdir/design-tokens/primitives/modes/typography/size/large.json index 9d7ed9b3e6..c42d046f48 100644 --- a/internal/digdir/design-tokens/primitives/modes/typography/size/large.json +++ b/internal/digdir/design-tokens/primitives/modes/typography/size/large.json @@ -1,96 +1,12 @@ { - "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", + "font-scale": { + "_base": { + "$type": "number", "$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%" + "_ratio": { + "$type": "number", + "$value": "1.146" } } } \ No newline at end of file diff --git a/internal/digdir/design-tokens/primitives/modes/typography/size/medium.json b/internal/digdir/design-tokens/primitives/modes/typography/size/medium.json index f861fb854c..7bd4dbfaf9 100644 --- a/internal/digdir/design-tokens/primitives/modes/typography/size/medium.json +++ b/internal/digdir/design-tokens/primitives/modes/typography/size/medium.json @@ -1,96 +1,12 @@ { - "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", + "font-scale": { + "_base": { + "$type": "number", "$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%" + "_ratio": { + "$type": "number", + "$value": "1.143" } } } \ No newline at end of file diff --git a/internal/digdir/design-tokens/primitives/modes/typography/size/small.json b/internal/digdir/design-tokens/primitives/modes/typography/size/small.json index 99e67f561f..670188c6a4 100644 --- a/internal/digdir/design-tokens/primitives/modes/typography/size/small.json +++ b/internal/digdir/design-tokens/primitives/modes/typography/size/small.json @@ -1,96 +1,12 @@ { - "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", + "font-scale": { + "_base": { + "$type": "number", "$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%" + "_ratio": { + "$type": "number", + "$value": "1.131" } } } \ No newline at end of file diff --git a/internal/digdir/package.json b/internal/digdir/package.json index 81bc26e418..6132504ecc 100644 --- a/internal/digdir/package.json +++ b/internal/digdir/package.json @@ -10,7 +10,7 @@ }, "files": ["themes"], "scripts": { - "build:tokens": "pnpm designsystemet tokens build -t design-tokens -o themes --clean --experimental-tailwind", + "build:tokens": "pnpm designsystemet tokens build --config digdir.config.json -t design-tokens -o themes --experimental-tailwind", "create:tokens": "pnpm designsystemet tokens create --config digdir.config.json", "update:theme-digdir": "pnpm run create:tokens && pnpm run build:tokens" }, diff --git a/internal/digdir/themes/altinn.css b/internal/digdir/themes/altinn.css index 7bae1baba4..334445c17e 100644 --- a/internal/digdir/themes/altinn.css +++ b/internal/digdir/themes/altinn.css @@ -1,23 +1,29 @@ @charset "UTF-8"; /* -build: v1.9.0 -design-tokens: v1.9.0 +build: v1.10.0 +design-tokens: v1.10.0 */ @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; } } @@ -39,19 +45,44 @@ design-tokens: v1.9.0 [data-size='lg'] { --ds-size: var(--ds-size--lg); } } +@layer ds.theme.type-scale { +:root { + --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)); + + @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); + } +} +} + @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-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)); --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); @@ -74,21 +105,9 @@ design-tokens: v1.9.0 --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(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); - } } } + @layer ds.theme.color-scheme.light { :root, [data-color-scheme="light"] { --ds-color-accent-background-default: #ffffff; diff --git a/internal/digdir/themes/colors.d.ts b/internal/digdir/themes/colors.d.ts index 71bdd1852e..0f6f2d0d3e 100644 --- a/internal/digdir/themes/colors.d.ts +++ b/internal/digdir/themes/colors.d.ts @@ -1,5 +1,5 @@ /* This file is deprecated and will be removed in a future release. Use types.d.ts instead */ -/* build: v1.9.0 */ +/* build: v1.10.0 */ import type {} from '@digdir/designsystemet-types'; // Augment types based on theme diff --git a/internal/digdir/themes/digdir.css b/internal/digdir/themes/digdir.css index eb18165295..5188d84e98 100644 --- a/internal/digdir/themes/digdir.css +++ b/internal/digdir/themes/digdir.css @@ -1,23 +1,29 @@ @charset "UTF-8"; /* -build: v1.9.0 -design-tokens: v1.9.0 +build: v1.10.0 +design-tokens: v1.10.0 */ @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; } } @@ -39,19 +45,44 @@ design-tokens: v1.9.0 [data-size='lg'] { --ds-size: var(--ds-size--lg); } } +@layer ds.theme.type-scale { +:root { + --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)); + + @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); + } +} +} + @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-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)); --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); @@ -74,21 +105,9 @@ design-tokens: v1.9.0 --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(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); - } } } + @layer ds.theme.color-scheme.light { :root, [data-color-scheme="light"] { --ds-color-accent-background-default: #ffffff; diff --git a/internal/digdir/themes/portal.css b/internal/digdir/themes/portal.css index a9bb97efeb..e56a20f914 100644 --- a/internal/digdir/themes/portal.css +++ b/internal/digdir/themes/portal.css @@ -1,23 +1,29 @@ @charset "UTF-8"; /* -build: v1.9.0 -design-tokens: v1.9.0 +build: v1.10.0 +design-tokens: v1.10.0 */ @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; } } @@ -39,19 +45,44 @@ design-tokens: v1.9.0 [data-size='lg'] { --ds-size: var(--ds-size--lg); } } +@layer ds.theme.type-scale { +:root { + --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)); + + @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); + } +} +} + @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-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)); --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); @@ -74,21 +105,9 @@ design-tokens: v1.9.0 --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(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); - } } } + @layer ds.theme.color-scheme.light { :root, [data-color-scheme="light"] { --ds-color-accent-background-default: #ffffff; diff --git a/internal/digdir/themes/types.d.ts b/internal/digdir/themes/types.d.ts index eedbdc22eb..47a7ba093b 100644 --- a/internal/digdir/themes/types.d.ts +++ b/internal/digdir/themes/types.d.ts @@ -1,4 +1,4 @@ -/* build: v1.9.0 */ +/* build: v1.10.0 */ import type {} from '@digdir/designsystemet-types'; // Augment types based on theme diff --git a/internal/digdir/themes/uutilsynet.css b/internal/digdir/themes/uutilsynet.css index e3112fe750..56c3931d81 100644 --- a/internal/digdir/themes/uutilsynet.css +++ b/internal/digdir/themes/uutilsynet.css @@ -1,23 +1,29 @@ @charset "UTF-8"; /* -build: v1.9.0 -design-tokens: v1.9.0 +build: v1.10.0 +design-tokens: v1.10.0 */ @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; } } @@ -39,19 +45,44 @@ design-tokens: v1.9.0 [data-size='lg'] { --ds-size: var(--ds-size--lg); } } +@layer ds.theme.type-scale { +:root { + --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)); + + @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); + } +} +} + @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-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)); --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); @@ -74,21 +105,9 @@ design-tokens: v1.9.0 --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(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); - } } } + @layer ds.theme.color-scheme.light { :root, [data-color-scheme="light"] { --ds-color-accent-background-default: #ffffff; diff --git a/packages/cli/bin/config.ts b/packages/cli/bin/config.ts index 1f43c54caa..812e11daaf 100644 --- a/packages/cli/bin/config.ts +++ b/packages/cli/bin/config.ts @@ -5,7 +5,7 @@ import * as R from 'ramda'; import { type BuildConfigSchema, type CreateConfigSchema, - commonConfig, + configFileBuildSchema, configFileCreateSchema, parseConfig, validateConfig, @@ -29,6 +29,8 @@ export async function readConfigFile(configPath: string, allowFileNotFound = tru if (configFile) { console.log(`Found config file: ${pc.green(resolvedPath)}`); + } else { + console.log(pc.yellow('No config file found, using default settings')); } return configFile; @@ -81,8 +83,8 @@ export async function parseCreateConfig( const unvalidatedConfig = noUndefined({ outDir: configParsed?.outDir ?? getCliOption(cmd, 'outDir'), - clean: configParsed?.clean ?? getCliOption(cmd, 'clean'), - themes: configParsed?.themes + clean: configParsed?.clean ?? (getCliOption(cmd, 'clean') as boolean), + themes: (configParsed?.themes ? R.map((jsonThemeValues) => { // For each theme specified in the JSON config, we resolve the option values in the following order: // - default value @@ -98,8 +100,9 @@ export async function parseCreateConfig( // and default theme options from the CLI. { [theme]: getThemeOptions(getCliOption), - }, - }); + }) as CreateConfigSchema['themes'], + globalTypography: configParsed.globalTypography, + } satisfies CreateConfigSchema); return validateConfig(configFileCreateSchema, unvalidatedConfig, configPath); } @@ -110,5 +113,5 @@ export async function parseBuildConfig( ): Promise { const configParsed: BuildConfigSchema = parseConfig(configFile, configPath); - return validateConfig(commonConfig, configParsed, configPath); + return validateConfig(configFileBuildSchema, configParsed, configPath); } diff --git a/packages/cli/bin/designsystemet.ts b/packages/cli/bin/designsystemet.ts index d5e236799c..16c003790e 100644 --- a/packages/cli/bin/designsystemet.ts +++ b/packages/cli/bin/designsystemet.ts @@ -4,6 +4,7 @@ import pc from 'picocolors'; import * as R from 'ramda'; import { convertToHex } from '../src/colors/index.js'; import type { CssColor } from '../src/colors/types.js'; +import { type CreateConfigSchema, parseConfig } from '../src/config.js'; import migrations from '../src/migrations/index.js'; import { buildTokens } from '../src/tokens/build.js'; import { writeTokens } from '../src/tokens/create/write.js'; @@ -56,6 +57,11 @@ function makeTokenCommands() { const outDir = typeof opts.outDir === 'string' ? opts.outDir : './dist/tokens'; const { configFile, configPath } = await getConfigFile(opts.config); + + // Hacky: get the globalTypography from the create config. + // This only works because these settings can't be passed as CLI options + const globalTypographyConfig = parseConfig(configFile, configPath).globalTypography; + const config = await parseBuildConfig(configFile, { configPath }); if (dry) { @@ -66,7 +72,17 @@ function makeTokenCommands() { await cleanDir(outDir, dry); } - await buildTokens({ tokensDir, outDir, verbose, dry, tailwind: experimentalTailwind, ...config }); + if ( + Object.values(globalTypographyConfig?.size?.modes ?? []).some( + (x) => Object.values(x.overrides ?? {}).length > 0, + ) + ) { + // If typography sizes have been overridden with explicit values, we can't use modular formulae + config.build = config.build ?? {}; + config.build.typographySizeValues = 'static'; + } + + await buildTokens({ tokensDir, outDir, verbose, dry, tailwind: experimentalTailwind, ...config.build }); return Promise.resolve(); }); @@ -117,7 +133,7 @@ function makeTokenCommands() { // Casting as missing properties should be validated by `getDefaultOrExplicitOption` to default values const theme = { name, ...themeWithoutName } as Theme; - const { tokenSets } = await createTokens(theme); + const { tokenSets } = await createTokens(theme, config.globalTypography?.size); await writeTokens({ outDir: config.outDir, theme, dry: opts.dry, tokenSets }); } } diff --git a/packages/cli/package.json b/packages/cli/package.json index 0fec2db84a..31eeaadeb7 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -47,9 +47,9 @@ "test:tokens-create-config": "pnpm run designsystemet tokens create --config ./configs/test-tokens.config.json", "test:tokens-build": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean", "test:tokens-build-tailwind": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean --experimental-tailwind", - "test:tokens-build-config": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean", - "test:tokens-build-config:inspect": "pnpm run designsystemet:inspect tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean", - "test:tokens-build-config-tailwind": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean --experimental-tailwind", + "test:tokens-build-config": "pnpm run designsystemet tokens build --config ./configs/test-tokens.config.json -t ./temp/config/design-tokens -o ./temp/config/build", + "test:tokens-build-config:inspect": "pnpm run designsystemet:inspect tokens build --config ./configs/test-tokens.config.json -t ./temp/config/design-tokens -o ./temp/config/build", + "test:tokens-build-config-tailwind": "pnpm run designsystemet tokens build --config ./configs/test-tokens.config.json -t ./temp/config/design-tokens -o ./temp/config/build --experimental-tailwind", "test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build", "test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config", "test:generate-config-from-tokens": "pnpm run designsystemet generate-config-from-tokens -d ../../internal/digdir/design-tokens --dry", diff --git a/packages/cli/src/config.ts b/packages/cli/src/config.ts index 632dec546b..3052a2307b 100644 --- a/packages/cli/src/config.ts +++ b/packages/cli/src/config.ts @@ -161,6 +161,35 @@ const focusOverrideSchema = z }) .describe('Overrides for the focus colors'); +const fontSizeSteps = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'] as const; +const fontSizeStepOverrideSchema = z + .number() + .describe('Number in pixels to use as a font size for this step in the scale'); +const fontSizeOverrides = z.partialRecord(z.enum(fontSizeSteps), fontSizeStepOverrideSchema); + +const fontSizeMode = z.object({ + base: z + .number() + .optional() + .describe('The font size (in px) to use as the basis for the scale. Is used as font-size.4.'), + ratio: z + .number() + .optional() + .describe( + '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.', + ), + overrides: fontSizeOverrides + .optional() + .describe( + 'Override one or more steps in this scale to specific pixel values. Will force globalTypography.size.cssGeneration to be "static".', + ), +}); +const typographySizeModes = z.partialRecord(z.enum(['small', 'medium', 'large']), fontSizeMode); + +const typographySizeSchema = z.object({ + modes: typographySizeModes.optional(), +}); + const overridesSchema = z .object({ colors: semanticColorOverrideSchema.optional(), @@ -191,26 +220,47 @@ const themeSchema = z }) .meta({ description: 'An object defining a theme. The property name holding the object becomes the theme name.' }); -export const commonConfig = z.object({ +const commonConfig = z.object({ clean: z.boolean().meta({ description: 'Delete the output directory before building or creating tokens' }).optional(), }); -const _configFileCreateSchema = z - .object({ - outDir: z.string().meta({ description: 'Path to the output directory for the created design tokens' }), - themes: z.record(z.string(), themeSchema).meta({ - description: - 'An object with one or more themes. Each property defines a theme, and the property name is used as the theme name.', - }), - }) - .required(); +const _configFileCreateSchema = z.object({ + outDir: z.string().meta({ description: 'Path to the output directory for the created design tokens' }), + themes: z.record(z.string(), themeSchema).meta({ + description: + 'An object with one or more themes. Each property defines a theme, and the property name is used as the theme name.', + }), + globalTypography: z + .object({ + size: typographySizeSchema.optional(), + }) + .optional() + .describe('Global typography settings that apply to all themes'), +}); + +const _configFileBuildSchema = z.object({ + build: z + .object({ + typographySizeValues: z + .enum(['modular', 'static']) + .optional() + .describe( + 'Changes how CSS values are generated. "modular" is the default, and will output css formulae which can be changed using --ds-font-scale-base and --ds-font-scale-ratio in code. "static" will output static values for each size mode. If you have overridden any steps in the font size scales with specific values, "static" will always be used.', + ), + }) + .optional() + .describe('Options that only affect build'), +}); +export const configFileCreateSchema = _configFileCreateSchema.extend(commonConfig.shape); +export const configFileBuildSchema = _configFileBuildSchema.extend(commonConfig.shape); /** * This defines the structure of the final configuration file */ -export const configFileCreateSchema = _configFileCreateSchema.extend(commonConfig.shape); +export const configFileSchema = configFileCreateSchema.extend(configFileBuildSchema.shape); export type CommonConfigSchema = z.infer; -export type BuildConfigSchema = z.infer; +export type BuildConfigSchema = z.infer; export type CreateConfigSchema = z.infer; export type ConfigSchemaTheme = z.infer; export type ColorOverrideSchema = z.infer; +export type TypographySizeSchema = z.infer; diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts index 18ca4efe5c..5faebdb7f5 100644 --- a/packages/cli/src/index.ts +++ b/packages/cli/src/index.ts @@ -1,6 +1,6 @@ export * from './colors/index.js'; export { type CreateConfigSchema as ConfigSchema, - configFileCreateSchema as configSchema, + configFileSchema as configSchema, } from './config.js'; export * from './tokens/index.js'; diff --git a/packages/cli/src/scripts/createJsonSchema.ts b/packages/cli/src/scripts/createJsonSchema.ts index 82aac35595..5c5b2aa218 100644 --- a/packages/cli/src/scripts/createJsonSchema.ts +++ b/packages/cli/src/scripts/createJsonSchema.ts @@ -1,13 +1,13 @@ import { writeFile } from 'node:fs/promises'; import { resolve } from 'node:path'; import { z } from 'zod'; -import { configFileCreateSchema } from '../config.js'; +import { configFileSchema } from '../config.js'; const schema = z .object({ $schema: z.string().optional(), }) - .extend(configFileCreateSchema.shape); + .extend(configFileSchema.shape); writeFile( resolve(import.meta.dirname, '../../dist/config.schema.json'), diff --git a/packages/cli/src/scripts/update-preview-tokens.ts b/packages/cli/src/scripts/update-preview-tokens.ts index 708f214a79..da3a299ccb 100644 --- a/packages/cli/src/scripts/update-preview-tokens.ts +++ b/packages/cli/src/scripts/update-preview-tokens.ts @@ -2,6 +2,7 @@ import path from 'node:path'; import pc from 'picocolors'; import type { TransformedToken } from 'style-dictionary/types'; import config from './../../../../designsystemet.config.json' with { type: 'json' }; +import type { TypographySizeSchema } from '../config.js'; import { generate$Themes } from '../tokens/create/generators/$themes.js'; import { createTokens } from '../tokens/create.js'; import { buildOptions, processPlatform } from '../tokens/process/platform.js'; @@ -36,8 +37,8 @@ const toPreviewToken = (tokens: { token: TransformedToken; formatted: string }[] type PreviewToken = { variable: string; value: string }; -export const formatTheme = async (themeConfig: Theme) => { - const { tokenSets } = await createTokens(themeConfig); +export const formatTheme = async (themeConfig: Theme, typographySize?: TypographySizeSchema) => { + const { tokenSets } = await createTokens(themeConfig, typographySize); const outDir = '../../apps/www/app/_components/tokens/design-tokens'; const $themes = await generate$Themes(['dark', 'light'], [themeConfig.name], themeConfig.colors); diff --git a/packages/cli/src/tokens/build.ts b/packages/cli/src/tokens/build.ts index 29c258e5e7..aeb2374471 100644 --- a/packages/cli/src/tokens/build.ts +++ b/packages/cli/src/tokens/build.ts @@ -2,6 +2,7 @@ import path from 'node:path'; import type { ThemeObject } from '@tokens-studio/types'; import pc from 'picocolors'; import * as R from 'ramda'; +import type { BuildConfigSchema } from '../config.js'; import { mkdir, readFile, writeFile } from '../utils.js'; import { createTypeDeclarationFiles } from './process/output/declarations.js'; import { createTailwindCSSFiles } from './process/output/tailwind.js'; diff --git a/packages/cli/src/tokens/create.ts b/packages/cli/src/tokens/create.ts index 48e120f34d..ff43eb0454 100644 --- a/packages/cli/src/tokens/create.ts +++ b/packages/cli/src/tokens/create.ts @@ -1,9 +1,11 @@ import type { ColorScheme } from '../colors/types.js'; +import type { TypographySizeSchema } from '../config.js'; import { getDefaultToken, getDefaultTokens } from './create/defaults.js'; import { generateColorScheme } from './create/generators/color.js'; import { generateSemantic } from './create/generators/semantic.js'; import { generateTheme } from './create/generators/theme.js'; import { generateTypography } from './create/generators/typography.js'; +import { generateTypographySizeMode } from './create/generators/typographySize.js'; import type { Theme, TokenSet, TokenSets } from './types.js'; @@ -24,8 +26,8 @@ export const cliOptions = { }, } as const; -export const createTokens = async (opts: Theme) => { - const { colors, typography, name, borderRadius, overrides } = opts; +export const createTokens = async (theme: Theme, typographySize: TypographySizeSchema | undefined) => { + const { colors, typography, name, borderRadius, overrides } = theme; const colorSchemes: ColorScheme[] = ['light', 'dark']; const semantic = generateSemantic(colors, name); @@ -33,14 +35,15 @@ 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/small', - 'primitives/modes/typography/size/medium', - 'primitives/modes/typography/size/large', + 'primitives/modes/typography/size/global', ]), + ['primitives/modes/typography/size/small', generateTypographySizeMode('small', typographySize)], + ['primitives/modes/typography/size/medium', generateTypographySizeMode('medium', typographySize)], + ['primitives/modes/typography/size/large', generateTypographySizeMode('large', typographySize)], [`primitives/modes/typography/primary/${name}`, generateTypography(name, typography)], [`primitives/modes/typography/secondary/${name}`, generateTypography(name, typography)], ...colorSchemes.flatMap((scheme): [string, TokenSet][] => [ diff --git a/packages/cli/src/tokens/create/defaults.ts b/packages/cli/src/tokens/create/defaults.ts index bd29cfb533..098124d46e 100644 --- a/packages/cli/src/tokens/create/defaults.ts +++ b/packages/cli/src/tokens/create/defaults.ts @@ -4,13 +4,7 @@ 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 typgraphyLarge from '../template/design-tokens/primitives/modes/typography/size/large.json' with { - type: 'json', -}; -import typgraphyMedium from '../template/design-tokens/primitives/modes/typography/size/medium.json' with { - type: 'json', -}; -import typgraphySmall from '../template/design-tokens/primitives/modes/typography/size/small.json' with { +import typgraphyGlobal from '../template/design-tokens/primitives/modes/typography/size/global.json' with { type: 'json', }; import semanticStyle from '../template/design-tokens/semantic/style.json' with { type: 'json' }; @@ -18,13 +12,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/small': typgraphySmall, - 'primitives/modes/typography/size/medium': typgraphyMedium, - 'primitives/modes/typography/size/large': typgraphyLarge, + 'primitives/modes/typography/size/global': typgraphyGlobal, 'semantic/style': semanticStyle as unknown as TokenSet, }; diff --git a/packages/cli/src/tokens/create/generators/$metadata.ts b/packages/cli/src/tokens/create/generators/$metadata.ts index 23aa8998a6..fcac339256 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 9815a5e550..95f880a629 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/create/generators/typographySize.ts b/packages/cli/src/tokens/create/generators/typographySize.ts new file mode 100644 index 0000000000..ec74801751 --- /dev/null +++ b/packages/cli/src/tokens/create/generators/typographySize.ts @@ -0,0 +1,44 @@ +import * as R from 'ramda'; +import type { TypographySizeSchema } from '../../../config.js'; +import type { Token } from '../../types.js'; + +const defaults = { + small: { + base: 16, + ratio: 1.131, + }, + medium: { + base: 18, + ratio: 1.143, + }, + large: { + base: 21, + ratio: 1.146, + }, +}; + +export function generateTypographySizeMode(size: 'small' | 'medium' | 'large', config?: TypographySizeSchema) { + const modeConfig = config?.modes?.[size]; + return { + 'font-scale': { + _base: { + $type: 'number', + $value: `${modeConfig?.base ?? defaults[size].base}`, + } satisfies Token, + _ratio: { + $type: 'number', + $value: `${modeConfig?.ratio ?? defaults[size].ratio}`, + } satisfies Token, + }, + ...(modeConfig?.overrides && { + 'font-size': R.map( + (fontSizeInPx) => + ({ + $type: 'fontSizes', + $value: `${fontSizeInPx}px`, + }) satisfies Token, + modeConfig.overrides, + ), + }), + }; +} diff --git a/packages/cli/src/tokens/format.ts b/packages/cli/src/tokens/format.ts index da9225cd39..d1b75add0e 100644 --- a/packages/cli/src/tokens/format.ts +++ b/packages/cli/src/tokens/format.ts @@ -1,4 +1,6 @@ import * as R from 'ramda'; +import type { TypographySizeSchema } from '../config.js'; +import type { ConfigSchema } from '../index.js'; import { generate$Themes } from './create/generators/$themes.js'; import { createTokens } from './create.js'; import { createThemeCSSFiles } from './process/output/theme.js'; @@ -16,8 +18,8 @@ export const formatTokens = async (options: Omit { - const { tokenSets } = await createTokens(themeConfig); +export const formatTheme = async (themeConfig: Theme, typographySize: TypographySizeSchema | undefined) => { + const { tokenSets } = await createTokens(themeConfig, typographySize); const $themes = await generate$Themes(['dark', 'light'], [themeConfig.name], themeConfig.colors); const processed$themes = $themes.map(processThemeObject); @@ -40,8 +42,8 @@ export const formatTheme = async (themeConfig: Theme) => { * @param themeConfig - The theme configuration object to be formatted. * @returns A promise that resolves to the generated CSS string. */ -export const formatThemeCSS = async (themeConfig: Theme) => { - const processedBuilds = await formatTheme(themeConfig); +export const formatThemeCSS = async (themeConfig: Theme, globalTypography?: ConfigSchema['globalTypography']) => { + const processedBuilds = await formatTheme(themeConfig, globalTypography?.size); const themeCSSFiles = createThemeCSSFiles({ processedBuilds }); return R.head(themeCSSFiles)?.output ?? ''; }; diff --git a/packages/cli/src/tokens/generate-config.ts b/packages/cli/src/tokens/generate-config.ts index f8d244d46a..ccb3700812 100644 --- a/packages/cli/src/tokens/generate-config.ts +++ b/packages/cli/src/tokens/generate-config.ts @@ -233,6 +233,7 @@ export async function generateConfigFromTokens(options: GenerateConfigOptions): const config: CreateConfigSchema = { outDir: tokensDir, themes: {}, + globalTypography: {}, }; for (const themeName of themes) { 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..2f85732839 100644 --- a/packages/cli/src/tokens/process/configs/size-mode.ts +++ b/packages/cli/src/tokens/process/configs/size-mode.ts @@ -1,36 +1,39 @@ 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 }) => { - 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); + 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/configs/type-scale.ts b/packages/cli/src/tokens/process/configs/type-scale.ts index 1aae5805e5..09ae10797f 100644 --- a/packages/cli/src/tokens/process/configs/type-scale.ts +++ b/packages/cli/src/tokens/process/configs/type-scale.ts @@ -3,53 +3,57 @@ 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 }) => { + const selector = ':root'; + 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'], 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: scaleValues === 'static' ? `type-scale/${size}.css` : `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'], 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-mode.ts b/packages/cli/src/tokens/process/formats/css/size-mode.ts index 14f827762f..040f8abd78 100644 --- a/packages/cli/src/tokens/process/formats/css/size-mode.ts +++ b/packages/cli/src/tokens/process/formats/css/size-mode.ts @@ -12,14 +12,19 @@ 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 = { 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({ diff --git a/packages/cli/src/tokens/process/formats/css/size.ts b/packages/cli/src/tokens/process/formats/css/size.ts index 490a167555..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; @@ -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 ')} - }`; + ${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 91f042741b..81fef2d2af 100644 --- a/packages/cli/src/tokens/process/formats/css/type-scale.ts +++ b/packages/cli/src/tokens/process/formats/css/type-scale.ts @@ -1,44 +1,73 @@ 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 { 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([ 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[] }; +type TokensWithCalcAndRoundFormatting = { + tokens: TransformedToken[]; + calc: string[]; + round: string[]; + name: string[]; + originalName: string[]; +}; const formatTypographySizeToken = ( + dictionary: Dictionary, format: (t: TransformedToken) => string, token: TransformedToken, -): { name: string; calc: string; round: string } => { - const [name, value] = format(token).replace(/;$/, '').split(': '); + size?: string, +): { name: string; originalName: string; calc: string; round: string } => { + const [originalName, value] = format(token).trim().replace(/;$/, '').split(': '); + // 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 (R.startsWith(['font-size'], token.path)) { - calc = `calc(${value} * var(--_ds-font-size-factor))`; + // 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); + return `var(--${t?.name as string})`; + }); + const cssCalcValue = originalWithCssReference.replace(/^roundTo\((.*), 0\)$/, '$1'); + calc = `calc(1rem * ${cssCalcValue})`; round = `round(${calc}, 1px)`; } else { calc = value; } - return { name, calc, round: round ?? calc }; + return { name, originalName, calc, round: round ?? calc }; }; -const formatTypographySizeTokens = (format: (t: TransformedToken) => string, tokens: TransformedToken[]) => +const formatTypographySizeTokens = ( + dictionary: Dictionary, + format: (t: TransformedToken) => string, + tokens: TransformedToken[], + size?: string, +) => R.reduce( (acc, token) => { - const { name, calc, round } = formatTypographySizeToken(format, token); + 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, ); @@ -46,7 +75,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({ @@ -56,20 +85,55 @@ 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 [typeScaleTokens, restTokens] = R.partition((t) => R.startsWith(['font-size'], t.path), filteredTokens); + const formatted = formatTypographySizeTokens(dictionary, format, typeScaleTokens, size); + const formattedReferences = formatTypographySizeTokens(dictionary, format, restTokens, size); - const formattedMap = formattedTokens.round.map((t, i) => ({ - token: formattedTokens.tokens[i], - formatted: t, + 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: s.replace(formatted.name[i], formatted.originalName[i]), })); - buildOptions.buildTokenFormats[destination] = formattedMap; + const formattedReferencesMap = formattedReferences.round.map((s, i) => { + return { token: formattedReferences.tokens[i], formatted: s }; + }); + + buildOptions.buildTokenFormats[destination] = [...formattedMap, ...formattedReferencesMap]; + + const optionalSizeComment = size ? ` /* ${size} */` : ''; + const content = `${selector}${optionalSizeComment} {${sizingTemplate(formatted)}\n}`; + 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 + ? 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: +${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 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 body = R.isNotNil(layer) ? `@layer ${layer} {\n${content}\n}` : content; + 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/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/cli/src/tokens/process/platform.ts b/packages/cli/src/tokens/process/platform.ts index 22ea78ace4..1fd8455567 100644 --- a/packages/cli/src/tokens/process/platform.ts +++ b/packages/cli/src/tokens/process/platform.ts @@ -2,6 +2,7 @@ import pc from 'picocolors'; import * as R from 'ramda'; import StyleDictionary from 'style-dictionary'; import type { TransformedToken } from 'style-dictionary/types'; +import type { BuildConfigSchema } from '../../config.js'; import type { OutputFile, TokenSet } from '../types.js'; import { type BuildConfig, colorCategories, type ThemePermutation } from '../types.js'; import { configs, getConfigsForThemeDimensions } from './configs.js'; @@ -24,7 +25,7 @@ type SharedOptions = { colorGroups?: string[]; /** Build token format map */ buildTokenFormats: Record; -}; +} & BuildConfigSchema['build']; export type BuildOptions = { type: 'build'; @@ -44,7 +45,7 @@ export type FormatOptions = { export type ProcessOptions = BuildOptions | FormatOptions; -type ProcessedBuildConfigs = Record; +type ProcessedBuildConfigs = Record, T>; export type ProcessReturn = ProcessedBuildConfigs; @@ -79,44 +80,48 @@ const sd = new StyleDictionary(); /* * Declarative configuration of the build output */ -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'] }, - 'color-scheme': { getConfig: configs.colorSchemeVariables, dimensions: ['color-scheme'] }, - 'main-color': { getConfig: configs.mainColorVariables, dimensions: ['main-color'] }, - 'support-color': { getConfig: configs.supportColorVariables, dimensions: ['support-color'] }, - 'neutral-color': { - getConfig: configs.neutralColorVariables, - dimensions: ['semantic'], - log: ({ permutation: { theme } }) => `${theme} - neutral`, - }, - 'success-color': { - getConfig: configs.successColorVariables, - dimensions: ['semantic'], - log: ({ permutation: { theme } }) => `${theme} - success`, - }, - 'danger-color': { - getConfig: configs.dangerColorVariables, - dimensions: ['semantic'], - log: ({ permutation: { theme } }) => `${theme} - danger`, - }, - 'warning-color': { - getConfig: configs.warningColorVariables, - dimensions: ['semantic'], - log: ({ permutation: { theme } }) => `${theme} - warning`, - }, - 'info-color': { - getConfig: configs.infoColorVariables, - dimensions: ['semantic'], - log: ({ permutation: { theme } }) => `${theme} - info`, - }, - semantic: { getConfig: configs.semanticVariables, dimensions: ['semantic'] }, -} satisfies Record; +const buildConfigs = (typographySizeValues: 'modular' | 'static') => + ({ + typography: { getConfig: configs.typographyVariables, dimensions: ['typography'] }, + sizeMode: { getConfig: configs.sizeModeVariables(typographySizeValues), dimensions: ['size'] }, + size: { getConfig: configs.sizeVariables, dimensions: ['semantic'] }, + typeScale: { + getConfig: configs.typeScaleVariables(typographySizeValues), + dimensions: typographySizeValues === 'modular' ? ['semantic'] : ['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'] }, + 'neutral-color': { + getConfig: configs.neutralColorVariables, + dimensions: ['semantic'], + log: ({ permutation: { theme } }) => `${theme} - neutral`, + }, + 'success-color': { + getConfig: configs.successColorVariables, + dimensions: ['semantic'], + log: ({ permutation: { theme } }) => `${theme} - success`, + }, + 'danger-color': { + getConfig: configs.dangerColorVariables, + dimensions: ['semantic'], + log: ({ permutation: { theme } }) => `${theme} - danger`, + }, + 'warning-color': { + getConfig: configs.warningColorVariables, + dimensions: ['semantic'], + log: ({ permutation: { theme } }) => `${theme} - warning`, + }, + 'info-color': { + getConfig: configs.infoColorVariables, + dimensions: ['semantic'], + log: ({ permutation: { theme } }) => `${theme} - info`, + }, + semantic: { getConfig: configs.semanticVariables, dimensions: ['semantic'] }, + }) satisfies Record; export async function processPlatform(options: ProcessOptions): Promise { - const { type, processed$themes } = options; + const { type, processed$themes, typographySizeValues } = options; const platform = 'css'; const tokenSets = type === 'format' ? options.tokenSets : undefined; const tokensDir = type === 'build' ? options.tokensDir : undefined; @@ -168,27 +173,30 @@ export async function processPlatform(options: ProcessOptions): Promise { - const sdConfigs = getConfigsForThemeDimensions(buildConfig.getConfig, processed$themes, buildConfig.dimensions, { - tokensDir, - tokenSets, - }); + const buildAndSdConfigs = R.map( + (buildConfig: BuildConfig) => { + const sdConfigs = getConfigsForThemeDimensions(buildConfig.getConfig, processed$themes, buildConfig.dimensions, { + tokensDir, + tokenSets, + }); - // Disable build if all sdConfigs dimensions permutation are unknown - const unknownConfigs = buildConfig.dimensions.map((dimension) => - sdConfigs.filter((x) => x.permutation[dimension] === 'unknown'), - ); - for (const unknowns of unknownConfigs) { - if (unknowns.length === sdConfigs.length) { - buildConfig.enabled = () => false; + // Disable build if all sdConfigs dimensions permutation are unknown + const unknownConfigs = buildConfig.dimensions.map((dimension) => + sdConfigs.filter((x) => x.permutation[dimension] === 'unknown'), + ); + for (const unknowns of unknownConfigs) { + if (unknowns.length === sdConfigs.length) { + buildConfig.enabled = () => false; + } } - } - return { - buildConfig, - sdConfigs, - }; - }, buildConfigs); + return { + buildConfig, + sdConfigs, + }; + }, + buildConfigs(typographySizeValues ?? 'modular'), + ); const processedBuilds: ProcessedBuildConfigs> = { 'color-scheme': [initResult], 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/global.json similarity index 64% rename from packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/small.json rename to packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/global.json index 99e67f561f..a3dd5469ea 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/global.json @@ -16,43 +16,43 @@ "font-size": { "1": { "$type": "fontSizes", - "$value": "11" + "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 3), 0)" }, "2": { "$type": "fontSizes", - "$value": "13" + "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 2), 0)" }, "3": { "$type": "fontSizes", - "$value": "14" + "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 1), 0)" }, "4": { "$type": "fontSizes", - "$value": "16" + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 0), 0)" }, "5": { "$type": "fontSizes", - "$value": "18" + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 1), 0)" }, "6": { "$type": "fontSizes", - "$value": "21" + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 2), 0)" }, "7": { "$type": "fontSizes", - "$value": "24" + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 3), 0)" }, "8": { "$type": "fontSizes", - "$value": "30" + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 5), 0)" }, "9": { "$type": "fontSizes", - "$value": "36" + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 7), 0)" }, "10": { "$type": "fontSizes", - "$value": "48" + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 9), 0)" } }, "letter-spacing": { diff --git a/packages/css/package.json b/packages/css/package.json index f024e04c21..bc5b2be50c 100644 --- a/packages/css/package.json +++ b/packages/css/package.json @@ -46,7 +46,7 @@ ], "scripts": { "build": "rimraf dist && pnpm build:theme && postcss ./src/*.css --base . --dir ./dist && postcss ./theme/*.css --dir ./dist/theme", - "build:theme": "tsx ../cli/bin/designsystemet.ts tokens build -t ../../design-tokens -o ./theme --experimental-tailwind" + "build:theme": "tsx ../cli/bin/designsystemet.ts tokens build --config ../../designsystemet.config.json -t ../../design-tokens -o ./theme --experimental-tailwind" }, "dependencies": { "@digdir/designsystemet-types": "workspace:^" 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/css/theme/designsystemet.css b/packages/css/theme/designsystemet.css index c487ae231a..9f8511f433 100644 --- a/packages/css/theme/designsystemet.css +++ b/packages/css/theme/designsystemet.css @@ -1,23 +1,29 @@ @charset "UTF-8"; /* build: v1.10.0 -design-tokens: v1.9.0 +design-tokens: v1.10.0 */ @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; } } @@ -39,19 +45,44 @@ design-tokens: v1.9.0 [data-size='lg'] { --ds-size: var(--ds-size--lg); } } +@layer ds.theme.type-scale { +:root { + --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)); + + @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); + } +} +} + @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-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)); --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); @@ -74,21 +105,9 @@ design-tokens: v1.9.0 --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(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); - } } } + @layer ds.theme.color-scheme.light { :root, [data-color-scheme="light"] { --ds-color-accent-background-default: #ffffff; diff --git a/packages/theme/brand/altinn.css b/packages/theme/brand/altinn.css index dc59965c41..2372e3ecaa 100644 --- a/packages/theme/brand/altinn.css +++ b/packages/theme/brand/altinn.css @@ -7,18 +7,24 @@ design-tokens: v1.8.0 @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.8.0 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.8.0 @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.8.0 --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 a984c4e0cd..00b5391756 100644 --- a/packages/theme/brand/digdir.css +++ b/packages/theme/brand/digdir.css @@ -7,18 +7,24 @@ design-tokens: v1.8.0 @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.8.0 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.8.0 @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.8.0 --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 b8034ba974..8fb7013358 100644 --- a/packages/theme/brand/portal.css +++ b/packages/theme/brand/portal.css @@ -7,18 +7,24 @@ design-tokens: v1.8.0 @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.8.0 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.8.0 @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.8.0 --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 f4ab201044..e5ae7aacc9 100644 --- a/packages/theme/brand/uutilsynet.css +++ b/packages/theme/brand/uutilsynet.css @@ -7,18 +7,24 @@ design-tokens: v1.8.0 @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.8.0 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.8.0 @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.8.0 --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/package.json b/packages/theme/package.json index f0e5b4ea2f..add851f35d 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -33,7 +33,7 @@ }, "scripts": { "designsystemet:tokens-create": "pnpm designsystemet tokens create --config ./configs/designsystemet.config.json", - "designsystemet:tokens-build": "pnpm designsystemet tokens build --config ./configs/designsystemet.config.json -t ../../design-tokens -o ./src/themes --clean --experimental-tailwind", + "designsystemet:tokens-build": "pnpm designsystemet tokens build --config ./configs/designsystemet.config.json -t ../../design-tokens -o ./src/themes --experimental-tailwind", "designsystemet:tokens-preview": "pnpm --filter @digdir/designsystemet run update:preview-tokens", "update:theme": "pnpm designsystemet:tokens-create && pnpm designsystemet:tokens-build && pnpm designsystemet:tokens-preview" }, diff --git a/packages/theme/src/themes/colors.d.ts b/packages/theme/src/themes/colors.d.ts index 1226b0b227..e1e7bf5c88 100644 --- a/packages/theme/src/themes/colors.d.ts +++ b/packages/theme/src/themes/colors.d.ts @@ -1,5 +1,5 @@ /* This file is deprecated and will be removed in a future release. Use types.d.ts instead */ -/* build: v1.8.0 */ +/* build: v1.9.0 */ import type {} from '@digdir/designsystemet-types'; // Augment types based on theme diff --git a/packages/theme/src/themes/designsystemet.css b/packages/theme/src/themes/designsystemet.css index 4fac82ef59..f088c78f2d 100644 --- a/packages/theme/src/themes/designsystemet.css +++ b/packages/theme/src/themes/designsystemet.css @@ -1,23 +1,29 @@ @charset "UTF-8"; /* -build: v1.8.0 -design-tokens: v1.8.0 +build: v1.9.0 +design-tokens: v1.9.0 */ @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; } } @@ -39,19 +45,44 @@ design-tokens: v1.8.0 [data-size='lg'] { --ds-size: var(--ds-size--lg); } } +@layer ds.theme.type-scale { +:root { + --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)); + + @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); + } +} +} + @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-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)); --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); @@ -74,21 +105,9 @@ design-tokens: v1.8.0 --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(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); - } } } + @layer ds.theme.color-scheme.light { :root, [data-color-scheme="light"] { --ds-color-accent-background-default: #ffffff; diff --git a/packages/theme/src/themes/types.d.ts b/packages/theme/src/themes/types.d.ts index db7617fa75..5db7385908 100644 --- a/packages/theme/src/themes/types.d.ts +++ b/packages/theme/src/themes/types.d.ts @@ -1,4 +1,4 @@ -/* build: v1.8.0 */ +/* build: v1.9.0 */ import type {} from '@digdir/designsystemet-types'; // Augment types based on theme From fd149142169ab7d62fee6e755482dad0b6a090f2 Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Mon, 19 Jan 2026 13:47:38 +0100 Subject: [PATCH 2/4] fix: overriding font-size tokens didn't actually change css values --- design-tokens/$themes.json | 12 ++++++------ packages/cli/src/tokens/create/generators/$themes.ts | 6 +++--- packages/css/theme/designsystemet.css | 6 +++--- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/design-tokens/$themes.json b/design-tokens/$themes.json index c9a4dc7e1a..e9b31efcc4 100644 --- a/design-tokens/$themes.json +++ b/design-tokens/$themes.json @@ -6,8 +6,8 @@ "selectedTokenSets": { "primitives/modes/size/medium": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/typography/size/medium": "source", - "primitives/modes/typography/size/global": "enabled" + "primitives/modes/typography/size/global": "enabled", + "primitives/modes/typography/size/medium": "enabled" }, "$figmaCollectionId": "VariableCollectionId:36248:20757", "$figmaModeId": "41630:1", @@ -20,8 +20,8 @@ "selectedTokenSets": { "primitives/modes/size/large": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/typography/size/large": "source", - "primitives/modes/typography/size/global": "enabled" + "primitives/modes/typography/size/global": "enabled", + "primitives/modes/typography/size/large": "enabled" }, "$figmaCollectionId": "VariableCollectionId:36248:20757", "$figmaModeId": "41630:2", @@ -34,8 +34,8 @@ "selectedTokenSets": { "primitives/modes/size/small": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/typography/size/small": "source", - "primitives/modes/typography/size/global": "enabled" + "primitives/modes/typography/size/global": "enabled", + "primitives/modes/typography/size/small": "enabled" }, "$figmaCollectionId": "VariableCollectionId:36248:20757", "$figmaModeId": "41630:3", diff --git a/packages/cli/src/tokens/create/generators/$themes.ts b/packages/cli/src/tokens/create/generators/$themes.ts index 95f880a629..e5525b004a 100644 --- a/packages/cli/src/tokens/create/generators/$themes.ts +++ b/packages/cli/src/tokens/create/generators/$themes.ts @@ -45,8 +45,8 @@ function generateSizeGroup(): ThemeObject_[] { selectedTokenSets: { 'primitives/modes/size/medium': TokenSetStatus.SOURCE, 'primitives/modes/size/global': TokenSetStatus.ENABLED, - 'primitives/modes/typography/size/medium': TokenSetStatus.SOURCE, 'primitives/modes/typography/size/global': TokenSetStatus.ENABLED, + 'primitives/modes/typography/size/medium': TokenSetStatus.ENABLED, }, $figmaCollectionId: 'VariableCollectionId:36248:20757', $figmaModeId: '41630:1', @@ -59,8 +59,8 @@ function generateSizeGroup(): ThemeObject_[] { selectedTokenSets: { 'primitives/modes/size/large': TokenSetStatus.SOURCE, 'primitives/modes/size/global': TokenSetStatus.ENABLED, - 'primitives/modes/typography/size/large': TokenSetStatus.SOURCE, 'primitives/modes/typography/size/global': TokenSetStatus.ENABLED, + 'primitives/modes/typography/size/large': TokenSetStatus.ENABLED, }, $figmaCollectionId: 'VariableCollectionId:36248:20757', $figmaModeId: '41630:2', @@ -73,8 +73,8 @@ function generateSizeGroup(): ThemeObject_[] { selectedTokenSets: { 'primitives/modes/size/small': TokenSetStatus.SOURCE, 'primitives/modes/size/global': TokenSetStatus.ENABLED, - 'primitives/modes/typography/size/small': TokenSetStatus.SOURCE, 'primitives/modes/typography/size/global': TokenSetStatus.ENABLED, + 'primitives/modes/typography/size/small': TokenSetStatus.ENABLED, }, $figmaCollectionId: 'VariableCollectionId:36248:20757', $figmaModeId: '41630:3', diff --git a/packages/css/theme/designsystemet.css b/packages/css/theme/designsystemet.css index 9f8511f433..1dfcabe74c 100644 --- a/packages/css/theme/designsystemet.css +++ b/packages/css/theme/designsystemet.css @@ -6,25 +6,25 @@ design-tokens: v1.10.0 @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; - --ds-size-mode-font-size--sm: 1; } } @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; - --ds-size-mode-font-size--md: 1.125; } } @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; - --ds-size-mode-font-size--lg: 1.3125; } } From 9e2a45824ffa81ed84b895e2d7757065ae4f455f Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Mon, 19 Jan 2026 14:47:23 +0100 Subject: [PATCH 3/4] fix reference to build config in overrides description --- packages/cli/src/config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cli/src/config.ts b/packages/cli/src/config.ts index 3052a2307b..36199c9fea 100644 --- a/packages/cli/src/config.ts +++ b/packages/cli/src/config.ts @@ -181,7 +181,7 @@ const fontSizeMode = z.object({ overrides: fontSizeOverrides .optional() .describe( - 'Override one or more steps in this scale to specific pixel values. Will force globalTypography.size.cssGeneration to be "static".', + 'Override one or more steps in this scale to specific pixel values. Will force build.typographySizeValues to be "static".', ), }); const typographySizeModes = z.partialRecord(z.enum(['small', 'medium', 'large']), fontSizeMode); From 2de70cfdc6fc12df9406493d358d1939206fb2a4 Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Mon, 19 Jan 2026 16:37:21 +0100 Subject: [PATCH 4/4] adjust ratios and one step in the scale formula to better match existing + add half-steps --- .../tokens/design-tokens/size-mode.json | 42 +++++++++---------- .../tokens/design-tokens/type-scale.json | 26 +++++++++++- .../modes/typography/size/global.json | 14 ++++++- .../modes/typography/size/large.json | 2 +- .../modes/typography/size/medium.json | 2 +- .../modes/typography/size/small.json | 2 +- internal/digdir/design-tokens/$themes.json | 12 +++--- .../modes/typography/size/global.json | 14 ++++++- .../modes/typography/size/large.json | 2 +- .../modes/typography/size/medium.json | 2 +- .../modes/typography/size/small.json | 2 +- internal/digdir/themes/altinn.css | 22 ++++++---- internal/digdir/themes/digdir.css | 22 ++++++---- internal/digdir/themes/portal.css | 22 ++++++---- internal/digdir/themes/uutilsynet.css | 22 ++++++---- .../create/generators/typographySize.ts | 6 +-- .../modes/typography/size/global.json | 14 ++++++- packages/css/theme/designsystemet.css | 16 ++++--- 18 files changed, 167 insertions(+), 77 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 56a15afae4..052e222259 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,13 @@ { "medium": [ + { + "path": [ + "_size", + "mode-font-size" + ], + "variable": "--ds-size-mode-font-size", + "value": "1.125" + }, { "path": [ "font-scale", @@ -14,18 +22,18 @@ "_ratio" ], "variable": "--ds-font-scale-ratio", - "value": "1.143" - }, + "value": "1.143136" + } + ], + "large": [ { "path": [ "_size", "mode-font-size" ], "variable": "--ds-size-mode-font-size", - "value": "1.125" - } - ], - "large": [ + "value": "1.3125" + }, { "path": [ "font-scale", @@ -40,18 +48,18 @@ "_ratio" ], "variable": "--ds-font-scale-ratio", - "value": "1.146" - }, + "value": "1.143136" + } + ], + "small": [ { "path": [ "_size", "mode-font-size" ], "variable": "--ds-size-mode-font-size", - "value": "1.3125" - } - ], - "small": [ + "value": "1" + }, { "path": [ "font-scale", @@ -66,15 +74,7 @@ "_ratio" ], "variable": "--ds-font-scale-ratio", - "value": "1.131" - }, - { - "path": [ - "_size", - "mode-font-size" - ], - "variable": "--ds-size-mode-font-size", - "value": "1" + "value": "1.14234" } ] } \ No newline at end of file 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..9b1f58fed9 100644 --- a/apps/www/app/_components/tokens/design-tokens/type-scale.json +++ b/apps/www/app/_components/tokens/design-tokens/type-scale.json @@ -53,7 +53,7 @@ "7" ], "variable": "--ds-font-size-7", - "value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)), 1px)" + "value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 4)), 1px)" }, { "path": [ @@ -79,6 +79,30 @@ "variable": "--ds-font-size-10", "value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 9)), 1px)" }, + { + "path": [ + "font-size", + "6-half" + ], + "variable": "--ds-font-size-6-half", + "value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)), 1px)" + }, + { + "path": [ + "font-size", + "8-half" + ], + "variable": "--ds-font-size-8-half", + "value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 6)), 1px)" + }, + { + "path": [ + "font-size", + "9-half" + ], + "variable": "--ds-font-size-9-half", + "value": "round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 8)), 1px)" + }, { "path": [ "typography", diff --git a/design-tokens/primitives/modes/typography/size/global.json b/design-tokens/primitives/modes/typography/size/global.json index a3dd5469ea..1342a17a15 100644 --- a/design-tokens/primitives/modes/typography/size/global.json +++ b/design-tokens/primitives/modes/typography/size/global.json @@ -40,7 +40,7 @@ }, "7": { "$type": "fontSizes", - "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 3), 0)" + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 4), 0)" }, "8": { "$type": "fontSizes", @@ -53,6 +53,18 @@ "10": { "$type": "fontSizes", "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 9), 0)" + }, + "6-half": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 3), 0)" + }, + "8-half": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 6), 0)" + }, + "9-half": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 8), 0)" } }, "letter-spacing": { diff --git a/design-tokens/primitives/modes/typography/size/large.json b/design-tokens/primitives/modes/typography/size/large.json index c42d046f48..15376376d5 100644 --- a/design-tokens/primitives/modes/typography/size/large.json +++ b/design-tokens/primitives/modes/typography/size/large.json @@ -6,7 +6,7 @@ }, "_ratio": { "$type": "number", - "$value": "1.146" + "$value": "1.143136" } } } \ 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 7bd4dbfaf9..9e5c5e6029 100644 --- a/design-tokens/primitives/modes/typography/size/medium.json +++ b/design-tokens/primitives/modes/typography/size/medium.json @@ -6,7 +6,7 @@ }, "_ratio": { "$type": "number", - "$value": "1.143" + "$value": "1.143136" } } } \ 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 670188c6a4..d290e53a39 100644 --- a/design-tokens/primitives/modes/typography/size/small.json +++ b/design-tokens/primitives/modes/typography/size/small.json @@ -6,7 +6,7 @@ }, "_ratio": { "$type": "number", - "$value": "1.131" + "$value": "1.14234" } } } \ No newline at end of file diff --git a/internal/digdir/design-tokens/$themes.json b/internal/digdir/design-tokens/$themes.json index d11882856e..1cc4e592d6 100644 --- a/internal/digdir/design-tokens/$themes.json +++ b/internal/digdir/design-tokens/$themes.json @@ -6,8 +6,8 @@ "selectedTokenSets": { "primitives/modes/size/medium": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/typography/size/medium": "source", - "primitives/modes/typography/size/global": "enabled" + "primitives/modes/typography/size/global": "enabled", + "primitives/modes/typography/size/medium": "enabled" }, "$figmaCollectionId": "VariableCollectionId:36248:20757", "$figmaModeId": "41630:1", @@ -20,8 +20,8 @@ "selectedTokenSets": { "primitives/modes/size/large": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/typography/size/large": "source", - "primitives/modes/typography/size/global": "enabled" + "primitives/modes/typography/size/global": "enabled", + "primitives/modes/typography/size/large": "enabled" }, "$figmaCollectionId": "VariableCollectionId:36248:20757", "$figmaModeId": "41630:2", @@ -34,8 +34,8 @@ "selectedTokenSets": { "primitives/modes/size/small": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/typography/size/small": "source", - "primitives/modes/typography/size/global": "enabled" + "primitives/modes/typography/size/global": "enabled", + "primitives/modes/typography/size/small": "enabled" }, "$figmaCollectionId": "VariableCollectionId:36248:20757", "$figmaModeId": "41630:3", diff --git a/internal/digdir/design-tokens/primitives/modes/typography/size/global.json b/internal/digdir/design-tokens/primitives/modes/typography/size/global.json index a3dd5469ea..1342a17a15 100644 --- a/internal/digdir/design-tokens/primitives/modes/typography/size/global.json +++ b/internal/digdir/design-tokens/primitives/modes/typography/size/global.json @@ -40,7 +40,7 @@ }, "7": { "$type": "fontSizes", - "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 3), 0)" + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 4), 0)" }, "8": { "$type": "fontSizes", @@ -53,6 +53,18 @@ "10": { "$type": "fontSizes", "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 9), 0)" + }, + "6-half": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 3), 0)" + }, + "8-half": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 6), 0)" + }, + "9-half": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 8), 0)" } }, "letter-spacing": { diff --git a/internal/digdir/design-tokens/primitives/modes/typography/size/large.json b/internal/digdir/design-tokens/primitives/modes/typography/size/large.json index c42d046f48..15376376d5 100644 --- a/internal/digdir/design-tokens/primitives/modes/typography/size/large.json +++ b/internal/digdir/design-tokens/primitives/modes/typography/size/large.json @@ -6,7 +6,7 @@ }, "_ratio": { "$type": "number", - "$value": "1.146" + "$value": "1.143136" } } } \ No newline at end of file diff --git a/internal/digdir/design-tokens/primitives/modes/typography/size/medium.json b/internal/digdir/design-tokens/primitives/modes/typography/size/medium.json index 7bd4dbfaf9..9e5c5e6029 100644 --- a/internal/digdir/design-tokens/primitives/modes/typography/size/medium.json +++ b/internal/digdir/design-tokens/primitives/modes/typography/size/medium.json @@ -6,7 +6,7 @@ }, "_ratio": { "$type": "number", - "$value": "1.143" + "$value": "1.143136" } } } \ No newline at end of file diff --git a/internal/digdir/design-tokens/primitives/modes/typography/size/small.json b/internal/digdir/design-tokens/primitives/modes/typography/size/small.json index 670188c6a4..d290e53a39 100644 --- a/internal/digdir/design-tokens/primitives/modes/typography/size/small.json +++ b/internal/digdir/design-tokens/primitives/modes/typography/size/small.json @@ -6,7 +6,7 @@ }, "_ratio": { "$type": "number", - "$value": "1.131" + "$value": "1.14234" } } } \ No newline at end of file diff --git a/internal/digdir/themes/altinn.css b/internal/digdir/themes/altinn.css index 334445c17e..cddca202d4 100644 --- a/internal/digdir/themes/altinn.css +++ b/internal/digdir/themes/altinn.css @@ -6,25 +6,25 @@ design-tokens: v1.10.0 @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; + --ds-font-scale-base--sm: 1; + --ds-font-scale-ratio--sm: 1.14234; } } @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; + --ds-font-scale-base--md: 1.125; + --ds-font-scale-ratio--md: 1.143136; } } @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; + --ds-font-scale-base--lg: 1.3125; + --ds-font-scale-ratio--lg: 1.143136; } } @@ -53,10 +53,13 @@ design-tokens: v1.10.0 --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-7: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 4)); --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-font-size-6-half: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)); + --ds-font-size-8-half: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 6)); + --ds-font-size-9-half: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 8)); @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); @@ -65,10 +68,13 @@ design-tokens: v1.10.0 --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-7: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 4)), 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-6-half: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)), 1px); + --ds-font-size-8-half: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 6)), 1px); + --ds-font-size-9-half: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 8)), 1px); } } } diff --git a/internal/digdir/themes/digdir.css b/internal/digdir/themes/digdir.css index 5188d84e98..2525c99037 100644 --- a/internal/digdir/themes/digdir.css +++ b/internal/digdir/themes/digdir.css @@ -6,25 +6,25 @@ design-tokens: v1.10.0 @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; + --ds-font-scale-base--sm: 1; + --ds-font-scale-ratio--sm: 1.14234; } } @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; + --ds-font-scale-base--md: 1.125; + --ds-font-scale-ratio--md: 1.143136; } } @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; + --ds-font-scale-base--lg: 1.3125; + --ds-font-scale-ratio--lg: 1.143136; } } @@ -53,10 +53,13 @@ design-tokens: v1.10.0 --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-7: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 4)); --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-font-size-6-half: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)); + --ds-font-size-8-half: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 6)); + --ds-font-size-9-half: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 8)); @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); @@ -65,10 +68,13 @@ design-tokens: v1.10.0 --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-7: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 4)), 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-6-half: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)), 1px); + --ds-font-size-8-half: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 6)), 1px); + --ds-font-size-9-half: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 8)), 1px); } } } diff --git a/internal/digdir/themes/portal.css b/internal/digdir/themes/portal.css index e56a20f914..94e5aa5e1f 100644 --- a/internal/digdir/themes/portal.css +++ b/internal/digdir/themes/portal.css @@ -6,25 +6,25 @@ design-tokens: v1.10.0 @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; + --ds-font-scale-base--sm: 1; + --ds-font-scale-ratio--sm: 1.14234; } } @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; + --ds-font-scale-base--md: 1.125; + --ds-font-scale-ratio--md: 1.143136; } } @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; + --ds-font-scale-base--lg: 1.3125; + --ds-font-scale-ratio--lg: 1.143136; } } @@ -53,10 +53,13 @@ design-tokens: v1.10.0 --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-7: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 4)); --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-font-size-6-half: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)); + --ds-font-size-8-half: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 6)); + --ds-font-size-9-half: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 8)); @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); @@ -65,10 +68,13 @@ design-tokens: v1.10.0 --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-7: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 4)), 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-6-half: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)), 1px); + --ds-font-size-8-half: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 6)), 1px); + --ds-font-size-9-half: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 8)), 1px); } } } diff --git a/internal/digdir/themes/uutilsynet.css b/internal/digdir/themes/uutilsynet.css index 56c3931d81..f0ecc7d573 100644 --- a/internal/digdir/themes/uutilsynet.css +++ b/internal/digdir/themes/uutilsynet.css @@ -6,25 +6,25 @@ design-tokens: v1.10.0 @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; + --ds-font-scale-base--sm: 1; + --ds-font-scale-ratio--sm: 1.14234; } } @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; + --ds-font-scale-base--md: 1.125; + --ds-font-scale-ratio--md: 1.143136; } } @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; + --ds-font-scale-base--lg: 1.3125; + --ds-font-scale-ratio--lg: 1.143136; } } @@ -53,10 +53,13 @@ design-tokens: v1.10.0 --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-7: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 4)); --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-font-size-6-half: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)); + --ds-font-size-8-half: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 6)); + --ds-font-size-9-half: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 8)); @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); @@ -65,10 +68,13 @@ design-tokens: v1.10.0 --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-7: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 4)), 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-6-half: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)), 1px); + --ds-font-size-8-half: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 6)), 1px); + --ds-font-size-9-half: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 8)), 1px); } } } diff --git a/packages/cli/src/tokens/create/generators/typographySize.ts b/packages/cli/src/tokens/create/generators/typographySize.ts index ec74801751..71a8adf09c 100644 --- a/packages/cli/src/tokens/create/generators/typographySize.ts +++ b/packages/cli/src/tokens/create/generators/typographySize.ts @@ -5,15 +5,15 @@ import type { Token } from '../../types.js'; const defaults = { small: { base: 16, - ratio: 1.131, + ratio: 1.14234, }, medium: { base: 18, - ratio: 1.143, + ratio: 1.143136, }, large: { base: 21, - ratio: 1.146, + ratio: 1.143136, }, }; 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 index a3dd5469ea..d42d4a9768 100644 --- 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 @@ -38,18 +38,30 @@ "$type": "fontSizes", "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 2), 0)" }, - "7": { + "6-half": { "$type": "fontSizes", "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 3), 0)" }, + "7": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 4), 0)" + }, "8": { "$type": "fontSizes", "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 5), 0)" }, + "8-half": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 6), 0)" + }, "9": { "$type": "fontSizes", "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 7), 0)" }, + "9-half": { + "$type": "fontSizes", + "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 8), 0)" + }, "10": { "$type": "fontSizes", "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 9), 0)" diff --git a/packages/css/theme/designsystemet.css b/packages/css/theme/designsystemet.css index 1dfcabe74c..5a40dc5ba5 100644 --- a/packages/css/theme/designsystemet.css +++ b/packages/css/theme/designsystemet.css @@ -8,7 +8,7 @@ design-tokens: v1.10.0 :root /* small */ { --ds-size-mode-font-size--sm: 1; --ds-font-scale-base--sm: 1; - --ds-font-scale-ratio--sm: 1.131; + --ds-font-scale-ratio--sm: 1.14234; } } @@ -16,7 +16,7 @@ design-tokens: v1.10.0 :root /* medium */ { --ds-size-mode-font-size--md: 1.125; --ds-font-scale-base--md: 1.125; - --ds-font-scale-ratio--md: 1.143; + --ds-font-scale-ratio--md: 1.143136; } } @@ -24,7 +24,7 @@ design-tokens: v1.10.0 :root /* large */ { --ds-size-mode-font-size--lg: 1.3125; --ds-font-scale-base--lg: 1.3125; - --ds-font-scale-ratio--lg: 1.146; + --ds-font-scale-ratio--lg: 1.143136; } } @@ -53,10 +53,13 @@ design-tokens: v1.10.0 --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-7: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 4)); --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-font-size-6-half: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)); + --ds-font-size-8-half: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 6)); + --ds-font-size-9-half: calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 8)); @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); @@ -65,10 +68,13 @@ design-tokens: v1.10.0 --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-7: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 4)), 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-6-half: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 3)), 1px); + --ds-font-size-8-half: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 6)), 1px); + --ds-font-size-9-half: round(calc(1rem * var(--ds-font-scale-base) * pow(var(--ds-font-scale-ratio), 8)), 1px); } } }