From 54a7f6086aad4c612beb2b73fa87c35893e65c67 Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Wed, 21 Jan 2026 19:29:26 +0100 Subject: [PATCH 01/14] 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/$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 +------------- 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 | 67 ++++++---- internal/digdir/themes/digdir.css | 67 ++++++---- internal/digdir/themes/portal.css | 67 ++++++---- internal/digdir/themes/uutilsynet.css | 67 ++++++---- 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 | 67 ++++++---- 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 +- 54 files changed, 960 insertions(+), 1032 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/$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/$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 56e99aeef1..b2bbbbb99e 100644 --- a/internal/digdir/package.json +++ b/internal/digdir/package.json @@ -12,7 +12,7 @@ "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 cae5698a40..8be6036a47 100644 --- a/internal/digdir/themes/altinn.css +++ b/internal/digdir/themes/altinn.css @@ -6,18 +6,24 @@ design-tokens: v1.11.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.11.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.11.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/digdir.css b/internal/digdir/themes/digdir.css index cc95e1484b..eb6f2efa29 100644 --- a/internal/digdir/themes/digdir.css +++ b/internal/digdir/themes/digdir.css @@ -6,18 +6,24 @@ design-tokens: v1.11.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.11.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.11.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 8d4d4e5108..9a1bfdb8fb 100644 --- a/internal/digdir/themes/portal.css +++ b/internal/digdir/themes/portal.css @@ -6,18 +6,24 @@ design-tokens: v1.11.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.11.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.11.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/uutilsynet.css b/internal/digdir/themes/uutilsynet.css index 988b2b3270..96c5376289 100644 --- a/internal/digdir/themes/uutilsynet.css +++ b/internal/digdir/themes/uutilsynet.css @@ -6,18 +6,24 @@ design-tokens: v1.11.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.11.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.11.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 71ee31fc4d..7940f84dcf 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 6603e73d2c..bd7e3dc487 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 273bec2014..e2d85b3afa 100644 --- a/packages/css/theme/designsystemet.css +++ b/packages/css/theme/designsystemet.css @@ -6,18 +6,24 @@ 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.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 e23dc500dd..949b21d4b4 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 1e9a1614645b38e3f5ed80103a68af7ee0bc1f93 Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Wed, 21 Jan 2026 19:29:26 +0100 Subject: [PATCH 02/14] 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 e2d85b3afa..43f6e39b44 100644 --- a/packages/css/theme/designsystemet.css +++ b/packages/css/theme/designsystemet.css @@ -6,25 +6,25 @@ design-tokens: v1.9.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 962c19aa5d4db19f475b5f07739d6c7786af1011 Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Wed, 21 Jan 2026 19:29:26 +0100 Subject: [PATCH 03/14] 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 105e864c0985f8af40c6696806cdc1fb18c6cea0 Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Wed, 21 Jan 2026 19:29:26 +0100 Subject: [PATCH 04/14] 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 8be6036a47..205a2f1cf2 100644 --- a/internal/digdir/themes/altinn.css +++ b/internal/digdir/themes/altinn.css @@ -6,25 +6,25 @@ design-tokens: v1.11.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.11.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.11.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 eb6f2efa29..e6423e9eec 100644 --- a/internal/digdir/themes/digdir.css +++ b/internal/digdir/themes/digdir.css @@ -6,25 +6,25 @@ design-tokens: v1.11.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.11.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.11.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 9a1bfdb8fb..03870376b3 100644 --- a/internal/digdir/themes/portal.css +++ b/internal/digdir/themes/portal.css @@ -6,25 +6,25 @@ design-tokens: v1.11.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.11.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.11.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 96c5376289..46c793b804 100644 --- a/internal/digdir/themes/uutilsynet.css +++ b/internal/digdir/themes/uutilsynet.css @@ -6,25 +6,25 @@ design-tokens: v1.11.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.11.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.11.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 43f6e39b44..90d202076d 100644 --- a/packages/css/theme/designsystemet.css +++ b/packages/css/theme/designsystemet.css @@ -8,7 +8,7 @@ design-tokens: v1.9.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.9.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.9.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.9.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.9.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); } } } From 4a3d73b8758b03587d87392a364516ea9d59cb44 Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Thu, 22 Jan 2026 17:32:31 +0100 Subject: [PATCH 05/14] wip: advanced theme-specific font configuration --- design-tokens/$metadata.json | 31 +- design-tokens/$themes.json | 106 +- .../fonts/primary/designsystemet.json | 78 + .../fonts/primary/different-fonts.json | 78 + .../fonts/secondary/designsystemet.json | 78 + .../fonts/secondary/different-fonts.json | 78 + .../color-scheme/dark/different-fonts.json | 548 +++++++ .../color-scheme/light/different-fonts.json | 548 +++++++ .../primary/size/global/designsystemet.json | 62 + .../primary/size/global/different-fonts.json | 62 + .../primary/size/large/designsystemet.json | 18 + .../primary/size/large/different-fonts.json | 18 + .../primary/size/medium/designsystemet.json | 18 + .../primary/size/medium/different-fonts.json | 18 + .../primary/size/small/designsystemet.json | 18 + .../primary/size/small/different-fonts.json | 18 + .../secondary/size/global/designsystemet.json | 62 + .../size/global/different-fonts.json | 62 + .../secondary/size/large/designsystemet.json | 18 + .../secondary/size/large/different-fonts.json | 18 + .../secondary/size/medium/designsystemet.json | 18 + .../size/medium/different-fonts.json | 18 + .../secondary/size/small/designsystemet.json | 18 + .../secondary/size/small/different-fonts.json | 18 + .../typography/primary/designsystemet.json | 22 - .../typography/secondary/designsystemet.json | 22 - .../modes/typography/size/global.json | 108 -- .../modes/typography/size/large.json | 12 - .../modes/typography/size/medium.json | 12 - .../modes/typography/size/small.json | 12 - design-tokens/semantic/style.json | 220 +-- design-tokens/themes/designsystemet.json | 734 ++++++++- design-tokens/themes/different-fonts.json | 1306 +++++++++++++++++ designsystemet.config.json | 78 +- packages/cli/bin/config.ts | 1 - packages/cli/bin/designsystemet.ts | 24 +- packages/cli/src/config.ts | 53 +- .../cli/src/scripts/update-preview-tokens.ts | 7 +- packages/cli/src/tokens/create.ts | 62 +- packages/cli/src/tokens/create/defaults.ts | 8 +- .../src/tokens/create/generators/$metadata.ts | 28 +- .../src/tokens/create/generators/$themes.ts | 119 +- .../cli/src/tokens/create/generators/font.ts | 84 ++ .../src/tokens/create/generators/fontSize.ts | 120 ++ .../tokens/create/generators/semanticStyle.ts | 192 +++ .../cli/src/tokens/create/generators/theme.ts | 640 +++++++- .../tokens/create/generators/typography.ts | 13 - .../create/generators/typographySize.ts | 44 - packages/cli/src/tokens/create/write.ts | 8 +- packages/cli/src/tokens/format.ts | 12 +- packages/cli/src/tokens/generate-config.ts | 1 - .../{globals.json => globals.json.ts} | 6 +- .../modes/typography/size/global.json | 108 -- .../modes/typography/typography.template.json | 22 - .../design-tokens/semantic/style.json | 378 ----- .../themes/theme.base.template.json | 18 - packages/cli/src/tokens/types.ts | 15 +- packages/css/theme/designsystemet.css | 472 +++--- .../css/theme/designsystemet.tailwind.css | 3 - packages/css/theme/different-fonts.css | 1106 ++++++++++++++ .../css/theme/different-fonts.tailwind.css | 189 +++ 61 files changed, 6939 insertions(+), 1329 deletions(-) create mode 100644 design-tokens/primitives/fonts/primary/designsystemet.json create mode 100644 design-tokens/primitives/fonts/primary/different-fonts.json create mode 100644 design-tokens/primitives/fonts/secondary/designsystemet.json create mode 100644 design-tokens/primitives/fonts/secondary/different-fonts.json create mode 100644 design-tokens/primitives/modes/color-scheme/dark/different-fonts.json create mode 100644 design-tokens/primitives/modes/color-scheme/light/different-fonts.json create mode 100644 design-tokens/primitives/modes/fonts/primary/size/global/designsystemet.json create mode 100644 design-tokens/primitives/modes/fonts/primary/size/global/different-fonts.json create mode 100644 design-tokens/primitives/modes/fonts/primary/size/large/designsystemet.json create mode 100644 design-tokens/primitives/modes/fonts/primary/size/large/different-fonts.json create mode 100644 design-tokens/primitives/modes/fonts/primary/size/medium/designsystemet.json create mode 100644 design-tokens/primitives/modes/fonts/primary/size/medium/different-fonts.json create mode 100644 design-tokens/primitives/modes/fonts/primary/size/small/designsystemet.json create mode 100644 design-tokens/primitives/modes/fonts/primary/size/small/different-fonts.json create mode 100644 design-tokens/primitives/modes/fonts/secondary/size/global/designsystemet.json create mode 100644 design-tokens/primitives/modes/fonts/secondary/size/global/different-fonts.json create mode 100644 design-tokens/primitives/modes/fonts/secondary/size/large/designsystemet.json create mode 100644 design-tokens/primitives/modes/fonts/secondary/size/large/different-fonts.json create mode 100644 design-tokens/primitives/modes/fonts/secondary/size/medium/designsystemet.json create mode 100644 design-tokens/primitives/modes/fonts/secondary/size/medium/different-fonts.json create mode 100644 design-tokens/primitives/modes/fonts/secondary/size/small/designsystemet.json create mode 100644 design-tokens/primitives/modes/fonts/secondary/size/small/different-fonts.json delete mode 100644 design-tokens/primitives/modes/typography/primary/designsystemet.json delete mode 100644 design-tokens/primitives/modes/typography/secondary/designsystemet.json delete mode 100644 design-tokens/primitives/modes/typography/size/global.json delete mode 100644 design-tokens/primitives/modes/typography/size/large.json delete mode 100644 design-tokens/primitives/modes/typography/size/medium.json delete mode 100644 design-tokens/primitives/modes/typography/size/small.json create mode 100644 design-tokens/themes/different-fonts.json create mode 100644 packages/cli/src/tokens/create/generators/font.ts create mode 100644 packages/cli/src/tokens/create/generators/fontSize.ts create mode 100644 packages/cli/src/tokens/create/generators/semanticStyle.ts delete mode 100644 packages/cli/src/tokens/create/generators/typography.ts delete mode 100644 packages/cli/src/tokens/create/generators/typographySize.ts rename packages/cli/src/tokens/template/design-tokens/primitives/{globals.json => globals.json.ts} (96%) delete mode 100644 packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/global.json delete mode 100644 packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/typography.template.json delete mode 100644 packages/cli/src/tokens/template/design-tokens/semantic/style.json create mode 100644 packages/css/theme/different-fonts.css create mode 100644 packages/css/theme/different-fonts.tailwind.css diff --git a/design-tokens/$metadata.json b/design-tokens/$metadata.json index c9fa92cb2c..357acaf2bb 100644 --- a/design-tokens/$metadata.json +++ b/design-tokens/$metadata.json @@ -5,15 +5,32 @@ "primitives/modes/size/small", "primitives/modes/size/medium", "primitives/modes/size/large", - "primitives/modes/typography/size/global", - "primitives/modes/typography/size/small", - "primitives/modes/typography/size/medium", - "primitives/modes/typography/size/large", - "primitives/modes/typography/primary/designsystemet", - "primitives/modes/typography/secondary/designsystemet", - "primitives/modes/color-scheme/dark/designsystemet", + "primitives/modes/fonts/primary/size/global/designsystemet", + "primitives/modes/fonts/primary/size/small/designsystemet", + "primitives/modes/fonts/primary/size/medium/designsystemet", + "primitives/modes/fonts/primary/size/large/designsystemet", + "primitives/modes/fonts/secondary/size/global/designsystemet", + "primitives/modes/fonts/secondary/size/small/designsystemet", + "primitives/modes/fonts/secondary/size/medium/designsystemet", + "primitives/modes/fonts/secondary/size/large/designsystemet", + "primitives/modes/fonts/primary/size/global/different-fonts", + "primitives/modes/fonts/primary/size/small/different-fonts", + "primitives/modes/fonts/primary/size/medium/different-fonts", + "primitives/modes/fonts/primary/size/large/different-fonts", + "primitives/modes/fonts/secondary/size/global/different-fonts", + "primitives/modes/fonts/secondary/size/small/different-fonts", + "primitives/modes/fonts/secondary/size/medium/different-fonts", + "primitives/modes/fonts/secondary/size/large/different-fonts", + "primitives/fonts/primary/designsystemet", + "primitives/fonts/secondary/designsystemet", + "primitives/fonts/primary/different-fonts", + "primitives/fonts/secondary/different-fonts", "primitives/modes/color-scheme/light/designsystemet", + "primitives/modes/color-scheme/light/different-fonts", + "primitives/modes/color-scheme/dark/designsystemet", + "primitives/modes/color-scheme/dark/different-fonts", "themes/designsystemet", + "themes/different-fonts", "semantic/color", "semantic/modes/main-color/accent", "semantic/modes/support-color/brand1", diff --git a/design-tokens/$themes.json b/design-tokens/$themes.json index e9b31efcc4..03b8038c85 100644 --- a/design-tokens/$themes.json +++ b/design-tokens/$themes.json @@ -1,45 +1,63 @@ [ { - "id": "8b2c8cc86611a34b135cb22948666779361fd729", "name": "medium", - "$figmaStyleReferences": {}, + "group": "Size", "selectedTokenSets": { "primitives/modes/size/medium": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/typography/size/global": "enabled", - "primitives/modes/typography/size/medium": "enabled" + "primitives/modes/fonts/primary/size/global/designsystemet": "enabled", + "primitives/modes/fonts/primary/size/medium/designsystemet": "enabled", + "primitives/modes/fonts/primary/size/global/different-fonts": "enabled", + "primitives/modes/fonts/primary/size/medium/different-fonts": "enabled", + "primitives/modes/fonts/secondary/size/global/designsystemet": "enabled", + "primitives/modes/fonts/secondary/size/medium/designsystemet": "enabled", + "primitives/modes/fonts/secondary/size/global/different-fonts": "enabled", + "primitives/modes/fonts/secondary/size/medium/different-fonts": "enabled" }, + "id": "fb11567729c298ca37c9da4e3a27716a23480824", "$figmaCollectionId": "VariableCollectionId:36248:20757", "$figmaModeId": "41630:1", - "group": "Size" + "$figmaStyleReferences": {} }, { - "id": "d49b9eebeb48a4f165a74b7261733d0a73370f0e", - "name": "large", - "$figmaStyleReferences": {}, + "name": "small", + "group": "Size", "selectedTokenSets": { - "primitives/modes/size/large": "source", + "primitives/modes/size/small": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/typography/size/global": "enabled", - "primitives/modes/typography/size/large": "enabled" + "primitives/modes/fonts/primary/size/global/designsystemet": "enabled", + "primitives/modes/fonts/primary/size/small/designsystemet": "enabled", + "primitives/modes/fonts/primary/size/global/different-fonts": "enabled", + "primitives/modes/fonts/primary/size/small/different-fonts": "enabled", + "primitives/modes/fonts/secondary/size/global/designsystemet": "enabled", + "primitives/modes/fonts/secondary/size/small/designsystemet": "enabled", + "primitives/modes/fonts/secondary/size/global/different-fonts": "enabled", + "primitives/modes/fonts/secondary/size/small/different-fonts": "enabled" }, + "id": "8b2c8cc86611a34b135cb22948666779361fd729", "$figmaCollectionId": "VariableCollectionId:36248:20757", - "$figmaModeId": "41630:2", - "group": "Size" + "$figmaModeId": "41630:3", + "$figmaStyleReferences": {} }, { - "id": "fb11567729c298ca37c9da4e3a27716a23480824", - "name": "small", - "$figmaStyleReferences": {}, + "name": "large", + "group": "Size", "selectedTokenSets": { - "primitives/modes/size/small": "source", + "primitives/modes/size/large": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/typography/size/global": "enabled", - "primitives/modes/typography/size/small": "enabled" + "primitives/modes/fonts/primary/size/global/designsystemet": "enabled", + "primitives/modes/fonts/primary/size/large/designsystemet": "enabled", + "primitives/modes/fonts/primary/size/global/different-fonts": "enabled", + "primitives/modes/fonts/primary/size/large/different-fonts": "enabled", + "primitives/modes/fonts/secondary/size/global/designsystemet": "enabled", + "primitives/modes/fonts/secondary/size/large/designsystemet": "enabled", + "primitives/modes/fonts/secondary/size/global/different-fonts": "enabled", + "primitives/modes/fonts/secondary/size/large/different-fonts": "enabled" }, + "id": "d49b9eebeb48a4f165a74b7261733d0a73370f0e", "$figmaCollectionId": "VariableCollectionId:36248:20757", - "$figmaModeId": "41630:3", - "group": "Size" + "$figmaModeId": "41630:2", + "$figmaStyleReferences": {} }, { "id": "6e7211ed13edfcf516a49254b01d234434716dee", @@ -47,50 +65,50 @@ "$figmaModeId": "40960:6", "name": "designsystemet", "selectedTokenSets": { + "primitives/fonts/primary/designsystemet": "enabled", + "primitives/fonts/secondary/designsystemet": "enabled", + "primitives/fonts/primary/different-fonts": "enabled", + "primitives/fonts/secondary/different-fonts": "enabled", "themes/designsystemet": "enabled" }, "group": "Theme" }, { - "id": "368d753fcac4455f289500eaa42e70dc0a03522f", - "$figmaCollectionId": "VariableCollectionId:36248:20769", - "$figmaModeId": "36248:2", - "name": "Primary", + "id": "09715dbe582ff86550de42b1783bfaa1d1a17813", + "$figmaCollectionId": "VariableCollectionId:36528:61712", + "$figmaModeId": "40960:7", + "name": "different-fonts", "selectedTokenSets": { - "primitives/modes/typography/primary/designsystemet": "enabled" + "primitives/fonts/primary/designsystemet": "enabled", + "primitives/fonts/secondary/designsystemet": "enabled", + "primitives/fonts/primary/different-fonts": "enabled", + "primitives/fonts/secondary/different-fonts": "enabled", + "themes/different-fonts": "enabled" }, - "group": "Typography" + "group": "Theme" }, { - "id": "264b8bd1d40b364e1ea3acf09e49795ddd4c513c", - "$figmaCollectionId": "VariableCollectionId:36248:20769", - "$figmaModeId": "36248:3", - "name": "Secondary", + "name": "Light", "selectedTokenSets": { - "primitives/modes/typography/secondary/designsystemet": "enabled" + "primitives/modes/color-scheme/light/designsystemet": "enabled", + "primitives/modes/color-scheme/light/different-fonts": "enabled" }, - "group": "Typography" + "id": "0daa3ca0b427b9349da7e7dc00101b5668972926", + "$figmaCollectionId": "VariableCollectionId:34811:5472", + "$figmaModeId": "34811:0", + "group": "Color scheme" }, { "name": "Dark", "selectedTokenSets": { - "primitives/modes/color-scheme/dark/designsystemet": "enabled" + "primitives/modes/color-scheme/dark/designsystemet": "enabled", + "primitives/modes/color-scheme/dark/different-fonts": "enabled" }, "id": "9ebd8aed52afbffc17e2666e8b4653a53498b257", "$figmaCollectionId": "VariableCollectionId:34811:5472", "$figmaModeId": "34811:1", "group": "Color scheme" }, - { - "name": "Light", - "selectedTokenSets": { - "primitives/modes/color-scheme/light/designsystemet": "enabled" - }, - "id": "0daa3ca0b427b9349da7e7dc00101b5668972926", - "$figmaCollectionId": "VariableCollectionId:34811:5472", - "$figmaModeId": "34811:0", - "group": "Color scheme" - }, { "id": "541629445ef90ad5363f9e88f52a1ccb617e6f84", "name": "Semantic", diff --git a/design-tokens/primitives/fonts/primary/designsystemet.json b/design-tokens/primitives/fonts/primary/designsystemet.json new file mode 100644 index 0000000000..f51319be2d --- /dev/null +++ b/design-tokens/primitives/fonts/primary/designsystemet.json @@ -0,0 +1,78 @@ +{ + "designsystemet": { + "fonts": { + "primary": { + "font-family": { + "$type": "fontFamilies", + "$value": "Inter" + }, + "font-weight": { + "medium": { + "$type": "fontWeights", + "$value": "Medium" + }, + "semibold": { + "$type": "fontWeights", + "$value": "Semi bold" + }, + "regular": { + "$type": "fontWeights", + "$value": "Regular" + } + }, + "line-height": { + "sm": { + "$type": "lineHeights", + "$value": "130%" + }, + "md": { + "$type": "lineHeights", + "$value": "150%" + }, + "lg": { + "$type": "lineHeights", + "$value": "170%" + } + }, + "letter-spacing": { + "1": { + "$type": "letterSpacing", + "$value": "-1%" + }, + "2": { + "$type": "letterSpacing", + "$value": "-0.5%" + }, + "3": { + "$type": "letterSpacing", + "$value": "-0.25%" + }, + "4": { + "$type": "letterSpacing", + "$value": "-0.15%" + }, + "5": { + "$type": "letterSpacing", + "$value": "0%" + }, + "6": { + "$type": "letterSpacing", + "$value": "0.15%" + }, + "7": { + "$type": "letterSpacing", + "$value": "0.25%" + }, + "8": { + "$type": "letterSpacing", + "$value": "0.5%" + }, + "9": { + "$type": "letterSpacing", + "$value": "1.5%" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/fonts/primary/different-fonts.json b/design-tokens/primitives/fonts/primary/different-fonts.json new file mode 100644 index 0000000000..15d41fec2b --- /dev/null +++ b/design-tokens/primitives/fonts/primary/different-fonts.json @@ -0,0 +1,78 @@ +{ + "different-fonts": { + "fonts": { + "primary": { + "font-family": { + "$type": "fontFamilies", + "$value": "Karantina" + }, + "font-weight": { + "medium": { + "$type": "fontWeights", + "$value": "Regular" + }, + "semibold": { + "$type": "fontWeights", + "$value": "Bold" + }, + "regular": { + "$type": "fontWeights", + "$value": "Light" + } + }, + "line-height": { + "sm": { + "$type": "lineHeights", + "$value": "130%" + }, + "md": { + "$type": "lineHeights", + "$value": "150%" + }, + "lg": { + "$type": "lineHeights", + "$value": "170%" + } + }, + "letter-spacing": { + "1": { + "$type": "letterSpacing", + "$value": "-1%" + }, + "2": { + "$type": "letterSpacing", + "$value": "-0.5%" + }, + "3": { + "$type": "letterSpacing", + "$value": "-0.25%" + }, + "4": { + "$type": "letterSpacing", + "$value": "-0.15%" + }, + "5": { + "$type": "letterSpacing", + "$value": "0%" + }, + "6": { + "$type": "letterSpacing", + "$value": "0.15%" + }, + "7": { + "$type": "letterSpacing", + "$value": "0.25%" + }, + "8": { + "$type": "letterSpacing", + "$value": "0.5%" + }, + "9": { + "$type": "letterSpacing", + "$value": "1.5%" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/fonts/secondary/designsystemet.json b/design-tokens/primitives/fonts/secondary/designsystemet.json new file mode 100644 index 0000000000..568ea872fa --- /dev/null +++ b/design-tokens/primitives/fonts/secondary/designsystemet.json @@ -0,0 +1,78 @@ +{ + "designsystemet": { + "fonts": { + "secondary": { + "font-family": { + "$type": "fontFamilies", + "$value": "Playfair Display" + }, + "font-weight": { + "medium": { + "$type": "fontWeights", + "$value": "Medium" + }, + "semibold": { + "$type": "fontWeights", + "$value": "SemiBold" + }, + "regular": { + "$type": "fontWeights", + "$value": "Regular" + } + }, + "line-height": { + "sm": { + "$type": "lineHeights", + "$value": "130%" + }, + "md": { + "$type": "lineHeights", + "$value": "150%" + }, + "lg": { + "$type": "lineHeights", + "$value": "170%" + } + }, + "letter-spacing": { + "1": { + "$type": "letterSpacing", + "$value": "-1%" + }, + "2": { + "$type": "letterSpacing", + "$value": "-0.5%" + }, + "3": { + "$type": "letterSpacing", + "$value": "-0.25%" + }, + "4": { + "$type": "letterSpacing", + "$value": "-0.15%" + }, + "5": { + "$type": "letterSpacing", + "$value": "0%" + }, + "6": { + "$type": "letterSpacing", + "$value": "0.15%" + }, + "7": { + "$type": "letterSpacing", + "$value": "0.25%" + }, + "8": { + "$type": "letterSpacing", + "$value": "0.5%" + }, + "9": { + "$type": "letterSpacing", + "$value": "1.5%" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/fonts/secondary/different-fonts.json b/design-tokens/primitives/fonts/secondary/different-fonts.json new file mode 100644 index 0000000000..b83842a3e2 --- /dev/null +++ b/design-tokens/primitives/fonts/secondary/different-fonts.json @@ -0,0 +1,78 @@ +{ + "different-fonts": { + "fonts": { + "secondary": { + "font-family": { + "$type": "fontFamilies", + "$value": "Playpen Sans" + }, + "font-weight": { + "medium": { + "$type": "fontWeights", + "$value": "Medium" + }, + "semibold": { + "$type": "fontWeights", + "$value": "SemiBold" + }, + "regular": { + "$type": "fontWeights", + "$value": "Regular" + } + }, + "line-height": { + "sm": { + "$type": "lineHeights", + "$value": "130%" + }, + "md": { + "$type": "lineHeights", + "$value": "150%" + }, + "lg": { + "$type": "lineHeights", + "$value": "170%" + } + }, + "letter-spacing": { + "1": { + "$type": "letterSpacing", + "$value": "-1%" + }, + "2": { + "$type": "letterSpacing", + "$value": "-0.5%" + }, + "3": { + "$type": "letterSpacing", + "$value": "-0.25%" + }, + "4": { + "$type": "letterSpacing", + "$value": "-0.15%" + }, + "5": { + "$type": "letterSpacing", + "$value": "0%" + }, + "6": { + "$type": "letterSpacing", + "$value": "0.15%" + }, + "7": { + "$type": "letterSpacing", + "$value": "0.25%" + }, + "8": { + "$type": "letterSpacing", + "$value": "0.5%" + }, + "9": { + "$type": "letterSpacing", + "$value": "1.5%" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/color-scheme/dark/different-fonts.json b/design-tokens/primitives/modes/color-scheme/dark/different-fonts.json new file mode 100644 index 0000000000..b1c95efdec --- /dev/null +++ b/design-tokens/primitives/modes/color-scheme/dark/different-fonts.json @@ -0,0 +1,548 @@ +{ + "different-fonts": { + "accent": { + "1": { + "$type": "color", + "$value": "#0c1927" + }, + "2": { + "$type": "color", + "$value": "#102033" + }, + "3": { + "$type": "color", + "$value": "#142941" + }, + "4": { + "$type": "color", + "$value": "#172f4b" + }, + "5": { + "$type": "color", + "$value": "#1a3757" + }, + "6": { + "$type": "color", + "$value": "#21446d" + }, + "7": { + "$type": "color", + "$value": "#285182" + }, + "8": { + "$type": "color", + "$value": "#5a84b4" + }, + "9": { + "$type": "color", + "$value": "#8eaacb" + }, + "10": { + "$type": "color", + "$value": "#8eaacb" + }, + "11": { + "$type": "color", + "$value": "#e7edf4" + }, + "12": { + "$type": "color", + "$value": "#4c91cf" + }, + "13": { + "$type": "color", + "$value": "#6fa6d8" + }, + "14": { + "$type": "color", + "$value": "#92bce1" + }, + "15": { + "$type": "color", + "$value": "#0d1924" + }, + "16": { + "$type": "color", + "$value": "#000000" + } + }, + "brand1": { + "1": { + "$type": "color", + "$value": "#0d1a16" + }, + "2": { + "$type": "color", + "$value": "#11231d" + }, + "3": { + "$type": "color", + "$value": "#162c25" + }, + "4": { + "$type": "color", + "$value": "#19322a" + }, + "5": { + "$type": "color", + "$value": "#1d3b31" + }, + "6": { + "$type": "color", + "$value": "#254a3e" + }, + "7": { + "$type": "color", + "$value": "#2c584a" + }, + "8": { + "$type": "color", + "$value": "#598b7b" + }, + "9": { + "$type": "color", + "$value": "#8dafa4" + }, + "10": { + "$type": "color", + "$value": "#8dafa4" + }, + "11": { + "$type": "color", + "$value": "#e7eeeb" + }, + "12": { + "$type": "color", + "$value": "#38927b" + }, + "13": { + "$type": "color", + "$value": "#5aa492" + }, + "14": { + "$type": "color", + "$value": "#7eb8aa" + }, + "15": { + "$type": "color", + "$value": "#071310" + }, + "16": { + "$type": "color", + "$value": "#000000" + } + }, + "brand2": { + "1": { + "$type": "color", + "$value": "#191528" + }, + "2": { + "$type": "color", + "$value": "#211c34" + }, + "3": { + "$type": "color", + "$value": "#2a2342" + }, + "4": { + "$type": "color", + "$value": "#31284c" + }, + "5": { + "$type": "color", + "$value": "#392f59" + }, + "6": { + "$type": "color", + "$value": "#473b6f" + }, + "7": { + "$type": "color", + "$value": "#554685" + }, + "8": { + "$type": "color", + "$value": "#867baa" + }, + "9": { + "$type": "color", + "$value": "#aba3c4" + }, + "10": { + "$type": "color", + "$value": "#aba3c4" + }, + "11": { + "$type": "color", + "$value": "#edebf2" + }, + "12": { + "$type": "color", + "$value": "#a697cc" + }, + "13": { + "$type": "color", + "$value": "#9380c0" + }, + "14": { + "$type": "color", + "$value": "#7e69b5" + }, + "15": { + "$type": "color", + "$value": "#131117" + }, + "16": { + "$type": "color", + "$value": "#000000" + } + }, + "neutral": { + "1": { + "$type": "color", + "$value": "#17181a" + }, + "2": { + "$type": "color", + "$value": "#1e2022" + }, + "3": { + "$type": "color", + "$value": "#26282b" + }, + "4": { + "$type": "color", + "$value": "#2c2e31" + }, + "5": { + "$type": "color", + "$value": "#343538" + }, + "6": { + "$type": "color", + "$value": "#414346" + }, + "7": { + "$type": "color", + "$value": "#4e5052" + }, + "8": { + "$type": "color", + "$value": "#808183" + }, + "9": { + "$type": "color", + "$value": "#a7a8a9" + }, + "10": { + "$type": "color", + "$value": "#a7a8a9" + }, + "11": { + "$type": "color", + "$value": "#ececec" + }, + "12": { + "$type": "color", + "$value": "#aaabad" + }, + "13": { + "$type": "color", + "$value": "#959698" + }, + "14": { + "$type": "color", + "$value": "#7f8184" + }, + "15": { + "$type": "color", + "$value": "#1b1b1b" + }, + "16": { + "$type": "color", + "$value": "#000000" + } + }, + "info": { + "1": { + "$type": "color", + "$value": "#0d1925" + }, + "2": { + "$type": "color", + "$value": "#112130" + }, + "3": { + "$type": "color", + "$value": "#15293d" + }, + "4": { + "$type": "color", + "$value": "#182f46" + }, + "5": { + "$type": "color", + "$value": "#1c3751" + }, + "6": { + "$type": "color", + "$value": "#234566" + }, + "7": { + "$type": "color", + "$value": "#2a537a" + }, + "8": { + "$type": "color", + "$value": "#5585b4" + }, + "9": { + "$type": "color", + "$value": "#8aabcb" + }, + "10": { + "$type": "color", + "$value": "#8aabcb" + }, + "11": { + "$type": "color", + "$value": "#e6edf4" + }, + "12": { + "$type": "color", + "$value": "#2d85c9" + }, + "13": { + "$type": "color", + "$value": "#519ad2" + }, + "14": { + "$type": "color", + "$value": "#77b0dc" + }, + "15": { + "$type": "color", + "$value": "#050e15" + }, + "16": { + "$type": "color", + "$value": "#000000" + } + }, + "success": { + "1": { + "$type": "color", + "$value": "#0d1b0d" + }, + "2": { + "$type": "color", + "$value": "#112411" + }, + "3": { + "$type": "color", + "$value": "#152d15" + }, + "4": { + "$type": "color", + "$value": "#183418" + }, + "5": { + "$type": "color", + "$value": "#1c3c1c" + }, + "6": { + "$type": "color", + "$value": "#244c24" + }, + "7": { + "$type": "color", + "$value": "#2b5a2b" + }, + "8": { + "$type": "color", + "$value": "#528f52" + }, + "9": { + "$type": "color", + "$value": "#89b289" + }, + "10": { + "$type": "color", + "$value": "#89b289" + }, + "11": { + "$type": "color", + "$value": "#e6efe6" + }, + "12": { + "$type": "color", + "$value": "#138d24" + }, + "13": { + "$type": "color", + "$value": "#3ca14b" + }, + "14": { + "$type": "color", + "$value": "#66b571" + }, + "15": { + "$type": "color", + "$value": "#010501" + }, + "16": { + "$type": "color", + "$value": "#000000" + } + }, + "warning": { + "1": { + "$type": "color", + "$value": "#1e160d" + }, + "2": { + "$type": "color", + "$value": "#281e11" + }, + "3": { + "$type": "color", + "$value": "#322616" + }, + "4": { + "$type": "color", + "$value": "#3a2b19" + }, + "5": { + "$type": "color", + "$value": "#43321d" + }, + "6": { + "$type": "color", + "$value": "#543f24" + }, + "7": { + "$type": "color", + "$value": "#654b2b" + }, + "8": { + "$type": "color", + "$value": "#a37a46" + }, + "9": { + "$type": "color", + "$value": "#d39e5b" + }, + "10": { + "$type": "color", + "$value": "#d39e5b" + }, + "11": { + "$type": "color", + "$value": "#f7ebdb" + }, + "12": { + "$type": "color", + "$value": "#60400b" + }, + "13": { + "$type": "color", + "$value": "#7a510e" + }, + "14": { + "$type": "color", + "$value": "#946211" + }, + "15": { + "$type": "color", + "$value": "#e6e2d9" + }, + "16": { + "$type": "color", + "$value": "#ffffff" + } + }, + "danger": { + "1": { + "$type": "color", + "$value": "#2a100e" + }, + "2": { + "$type": "color", + "$value": "#371512" + }, + "3": { + "$type": "color", + "$value": "#451b17" + }, + "4": { + "$type": "color", + "$value": "#4f1f1b" + }, + "5": { + "$type": "color", + "$value": "#5c241f" + }, + "6": { + "$type": "color", + "$value": "#722d27" + }, + "7": { + "$type": "color", + "$value": "#88352e" + }, + "8": { + "$type": "color", + "$value": "#bc6b64" + }, + "9": { + "$type": "color", + "$value": "#d19a96" + }, + "10": { + "$type": "color", + "$value": "#d19a96" + }, + "11": { + "$type": "color", + "$value": "#f5eae9" + }, + "12": { + "$type": "color", + "$value": "#d76e6e" + }, + "13": { + "$type": "color", + "$value": "#df8b8b" + }, + "14": { + "$type": "color", + "$value": "#e7a8a8" + }, + "15": { + "$type": "color", + "$value": "#271414" + }, + "16": { + "$type": "color", + "$value": "#000000" + } + }, + "link": { + "visited": { + "$type": "color", + "$value": "#b49acd" + } + }, + "focus": { + "inner": { + "$type": "color", + "$value": "#17181a" + }, + "outer": { + "$type": "color", + "$value": "#ececec" + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/color-scheme/light/different-fonts.json b/design-tokens/primitives/modes/color-scheme/light/different-fonts.json new file mode 100644 index 0000000000..5a6b8884bf --- /dev/null +++ b/design-tokens/primitives/modes/color-scheme/light/different-fonts.json @@ -0,0 +1,548 @@ +{ + "different-fonts": { + "accent": { + "1": { + "$type": "color", + "$value": "#ffffff" + }, + "2": { + "$type": "color", + "$value": "#eef4fa" + }, + "3": { + "$type": "color", + "$value": "#ffffff" + }, + "4": { + "$type": "color", + "$value": "#ddeaf6" + }, + "5": { + "$type": "color", + "$value": "#c7ddf0" + }, + "6": { + "$type": "color", + "$value": "#afcee9" + }, + "7": { + "$type": "color", + "$value": "#99c0e3" + }, + "8": { + "$type": "color", + "$value": "#2a7cc5" + }, + "9": { + "$type": "color", + "$value": "#005db1" + }, + "10": { + "$type": "color", + "$value": "#005db1" + }, + "11": { + "$type": "color", + "$value": "#002c54" + }, + "12": { + "$type": "color", + "$value": "#0062BA" + }, + "13": { + "$type": "color", + "$value": "#004f96" + }, + "14": { + "$type": "color", + "$value": "#003d75" + }, + "15": { + "$type": "color", + "$value": "#dbe9f5" + }, + "16": { + "$type": "color", + "$value": "#ffffff" + } + }, + "brand1": { + "1": { + "$type": "color", + "$value": "#ffffff" + }, + "2": { + "$type": "color", + "$value": "#edf5f3" + }, + "3": { + "$type": "color", + "$value": "#ffffff" + }, + "4": { + "$type": "color", + "$value": "#dcece8" + }, + "5": { + "$type": "color", + "$value": "#c6dfd9" + }, + "6": { + "$type": "color", + "$value": "#add2c9" + }, + "7": { + "$type": "color", + "$value": "#96c5b9" + }, + "8": { + "$type": "color", + "$value": "#25876f" + }, + "9": { + "$type": "color", + "$value": "#0b6a53" + }, + "10": { + "$type": "color", + "$value": "#0b6a53" + }, + "11": { + "$type": "color", + "$value": "#053227" + }, + "12": { + "$type": "color", + "$value": "#0D7A5F" + }, + "13": { + "$type": "color", + "$value": "#0b644e" + }, + "14": { + "$type": "color", + "$value": "#084f3d" + }, + "15": { + "$type": "color", + "$value": "#ebf4f2" + }, + "16": { + "$type": "color", + "$value": "#ffffff" + } + }, + "brand2": { + "1": { + "$type": "color", + "$value": "#ffffff" + }, + "2": { + "$type": "color", + "$value": "#f4f3f9" + }, + "3": { + "$type": "color", + "$value": "#ffffff" + }, + "4": { + "$type": "color", + "$value": "#eae7f3" + }, + "5": { + "$type": "color", + "$value": "#ddd7eb" + }, + "6": { + "$type": "color", + "$value": "#cec6e3" + }, + "7": { + "$type": "color", + "$value": "#c1b6db" + }, + "8": { + "$type": "color", + "$value": "#826db7" + }, + "9": { + "$type": "color", + "$value": "#674da7" + }, + "10": { + "$type": "color", + "$value": "#674da7" + }, + "11": { + "$type": "color", + "$value": "#312256" + }, + "12": { + "$type": "color", + "$value": "#5B3FA0" + }, + "13": { + "$type": "color", + "$value": "#47317c" + }, + "14": { + "$type": "color", + "$value": "#332359" + }, + "15": { + "$type": "color", + "$value": "#f1eff7" + }, + "16": { + "$type": "color", + "$value": "#ffffff" + } + }, + "neutral": { + "1": { + "$type": "color", + "$value": "#ffffff" + }, + "2": { + "$type": "color", + "$value": "#f3f3f4" + }, + "3": { + "$type": "color", + "$value": "#ffffff" + }, + "4": { + "$type": "color", + "$value": "#e8e8e9" + }, + "5": { + "$type": "color", + "$value": "#d9dadb" + }, + "6": { + "$type": "color", + "$value": "#c9cacb" + }, + "7": { + "$type": "color", + "$value": "#bbbcbd" + }, + "8": { + "$type": "color", + "$value": "#77797b" + }, + "9": { + "$type": "color", + "$value": "#5b5d60" + }, + "10": { + "$type": "color", + "$value": "#5b5d60" + }, + "11": { + "$type": "color", + "$value": "#292c30" + }, + "12": { + "$type": "color", + "$value": "#24272B" + }, + "13": { + "$type": "color", + "$value": "#36383c" + }, + "14": { + "$type": "color", + "$value": "#484a4e" + }, + "15": { + "$type": "color", + "$value": "#b9babb" + }, + "16": { + "$type": "color", + "$value": "#ffffff" + } + }, + "info": { + "1": { + "$type": "color", + "$value": "#ffffff" + }, + "2": { + "$type": "color", + "$value": "#edf5fa" + }, + "3": { + "$type": "color", + "$value": "#ffffff" + }, + "4": { + "$type": "color", + "$value": "#dcebf6" + }, + "5": { + "$type": "color", + "$value": "#c5ddf0" + }, + "6": { + "$type": "color", + "$value": "#abcfe9" + }, + "7": { + "$type": "color", + "$value": "#94c1e3" + }, + "8": { + "$type": "color", + "$value": "#1f7dc5" + }, + "9": { + "$type": "color", + "$value": "#0860a3" + }, + "10": { + "$type": "color", + "$value": "#0860a3" + }, + "11": { + "$type": "color", + "$value": "#042d4d" + }, + "12": { + "$type": "color", + "$value": "#0A71C0" + }, + "13": { + "$type": "color", + "$value": "#085d9f" + }, + "14": { + "$type": "color", + "$value": "#074a7e" + }, + "15": { + "$type": "color", + "$value": "#eff6fb" + }, + "16": { + "$type": "color", + "$value": "#ffffff" + } + }, + "success": { + "1": { + "$type": "color", + "$value": "#ffffff" + }, + "2": { + "$type": "color", + "$value": "#ecf6ee" + }, + "3": { + "$type": "color", + "$value": "#ffffff" + }, + "4": { + "$type": "color", + "$value": "#daeddd" + }, + "5": { + "$type": "color", + "$value": "#c3e2c7" + }, + "6": { + "$type": "color", + "$value": "#a8d5ae" + }, + "7": { + "$type": "color", + "$value": "#8fc997" + }, + "8": { + "$type": "color", + "$value": "#108c22" + }, + "9": { + "$type": "color", + "$value": "#056d13" + }, + "10": { + "$type": "color", + "$value": "#056d13" + }, + "11": { + "$type": "color", + "$value": "#023409" + }, + "12": { + "$type": "color", + "$value": "#068718" + }, + "13": { + "$type": "color", + "$value": "#057014" + }, + "14": { + "$type": "color", + "$value": "#045a10" + }, + "15": { + "$type": "color", + "$value": "#fafdfb" + }, + "16": { + "$type": "color", + "$value": "#ffffff" + } + }, + "warning": { + "1": { + "$type": "color", + "$value": "#ffffff" + }, + "2": { + "$type": "color", + "$value": "#fcf2e2" + }, + "3": { + "$type": "color", + "$value": "#ffffff" + }, + "4": { + "$type": "color", + "$value": "#fae6c6" + }, + "5": { + "$type": "color", + "$value": "#f6d5a0" + }, + "6": { + "$type": "color", + "$value": "#f2c275" + }, + "7": { + "$type": "color", + "$value": "#eeb04c" + }, + "8": { + "$type": "color", + "$value": "#a56d13" + }, + "9": { + "$type": "color", + "$value": "#80540f" + }, + "10": { + "$type": "color", + "$value": "#80540f" + }, + "11": { + "$type": "color", + "$value": "#3c2807" + }, + "12": { + "$type": "color", + "$value": "#EA9B1B" + }, + "13": { + "$type": "color", + "$value": "#cd8818" + }, + "14": { + "$type": "color", + "$value": "#b27614" + }, + "15": { + "$type": "color", + "$value": "#271a04" + }, + "16": { + "$type": "color", + "$value": "#000000" + } + }, + "danger": { + "1": { + "$type": "color", + "$value": "#ffffff" + }, + "2": { + "$type": "color", + "$value": "#fbf1f1" + }, + "3": { + "$type": "color", + "$value": "#ffffff" + }, + "4": { + "$type": "color", + "$value": "#f8e4e4" + }, + "5": { + "$type": "color", + "$value": "#f3d2d2" + }, + "6": { + "$type": "color", + "$value": "#edbfbf" + }, + "7": { + "$type": "color", + "$value": "#e8adad" + }, + "8": { + "$type": "color", + "$value": "#ce4d4d" + }, + "9": { + "$type": "color", + "$value": "#b81a1a" + }, + "10": { + "$type": "color", + "$value": "#b81a1a" + }, + "11": { + "$type": "color", + "$value": "#590d0d" + }, + "12": { + "$type": "color", + "$value": "#C01B1B" + }, + "13": { + "$type": "color", + "$value": "#9b1616" + }, + "14": { + "$type": "color", + "$value": "#791111" + }, + "15": { + "$type": "color", + "$value": "#f7e1e1" + }, + "16": { + "$type": "color", + "$value": "#ffffff" + } + }, + "link": { + "visited": { + "$type": "color", + "$value": "#663299" + } + }, + "focus": { + "inner": { + "$type": "color", + "$value": "#ffffff" + }, + "outer": { + "$type": "color", + "$value": "#292c30" + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/fonts/primary/size/global/designsystemet.json b/design-tokens/primitives/modes/fonts/primary/size/global/designsystemet.json new file mode 100644 index 0000000000..40cba9f62f --- /dev/null +++ b/design-tokens/primitives/modes/fonts/primary/size/global/designsystemet.json @@ -0,0 +1,62 @@ +{ + "designsystemet": { + "fonts": { + "primary": { + "font-size": { + "1": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} / pow({designsystemet.fonts.primary.font-scale._ratio}, 3), 0)" + }, + "2": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} / pow({designsystemet.fonts.primary.font-scale._ratio}, 2), 0)" + }, + "3": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} / pow({designsystemet.fonts.primary.font-scale._ratio}, 1), 0)" + }, + "4": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 0), 0)" + }, + "5": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 1), 0)" + }, + "6": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 2), 0)" + }, + "7": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 4), 0)" + }, + "8": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 5), 0)" + }, + "9": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 7), 0)" + }, + "10": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 9), 0)" + }, + "6-half": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 3), 0)" + }, + "8-half": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 6), 0)" + }, + "9-half": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 8), 0)" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/fonts/primary/size/global/different-fonts.json b/design-tokens/primitives/modes/fonts/primary/size/global/different-fonts.json new file mode 100644 index 0000000000..0bf36faaf3 --- /dev/null +++ b/design-tokens/primitives/modes/fonts/primary/size/global/different-fonts.json @@ -0,0 +1,62 @@ +{ + "different-fonts": { + "fonts": { + "primary": { + "font-size": { + "1": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} / pow({different-fonts.fonts.primary.font-scale._ratio}, 3), 0)" + }, + "2": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} / pow({different-fonts.fonts.primary.font-scale._ratio}, 2), 0)" + }, + "3": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} / pow({different-fonts.fonts.primary.font-scale._ratio}, 1), 0)" + }, + "4": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 0), 0)" + }, + "5": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 1), 0)" + }, + "6": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 2), 0)" + }, + "7": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 4), 0)" + }, + "8": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 5), 0)" + }, + "9": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 7), 0)" + }, + "10": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 9), 0)" + }, + "6-half": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 3), 0)" + }, + "8-half": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 6), 0)" + }, + "9-half": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 8), 0)" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/fonts/primary/size/large/designsystemet.json b/design-tokens/primitives/modes/fonts/primary/size/large/designsystemet.json new file mode 100644 index 0000000000..046adb2280 --- /dev/null +++ b/design-tokens/primitives/modes/fonts/primary/size/large/designsystemet.json @@ -0,0 +1,18 @@ +{ + "designsystemet": { + "fonts": { + "primary": { + "font-scale": { + "_base": { + "$type": "number", + "$value": "21" + }, + "_ratio": { + "$type": "number", + "$value": "1.143136" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/fonts/primary/size/large/different-fonts.json b/design-tokens/primitives/modes/fonts/primary/size/large/different-fonts.json new file mode 100644 index 0000000000..9af3020f21 --- /dev/null +++ b/design-tokens/primitives/modes/fonts/primary/size/large/different-fonts.json @@ -0,0 +1,18 @@ +{ + "different-fonts": { + "fonts": { + "primary": { + "font-scale": { + "_base": { + "$type": "number", + "$value": "21" + }, + "_ratio": { + "$type": "number", + "$value": "1.143136" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/fonts/primary/size/medium/designsystemet.json b/design-tokens/primitives/modes/fonts/primary/size/medium/designsystemet.json new file mode 100644 index 0000000000..6aa7ec803d --- /dev/null +++ b/design-tokens/primitives/modes/fonts/primary/size/medium/designsystemet.json @@ -0,0 +1,18 @@ +{ + "designsystemet": { + "fonts": { + "primary": { + "font-scale": { + "_base": { + "$type": "number", + "$value": "18" + }, + "_ratio": { + "$type": "number", + "$value": "1.143136" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/fonts/primary/size/medium/different-fonts.json b/design-tokens/primitives/modes/fonts/primary/size/medium/different-fonts.json new file mode 100644 index 0000000000..28ff186b56 --- /dev/null +++ b/design-tokens/primitives/modes/fonts/primary/size/medium/different-fonts.json @@ -0,0 +1,18 @@ +{ + "different-fonts": { + "fonts": { + "primary": { + "font-scale": { + "_base": { + "$type": "number", + "$value": "18" + }, + "_ratio": { + "$type": "number", + "$value": "1.143136" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/fonts/primary/size/small/designsystemet.json b/design-tokens/primitives/modes/fonts/primary/size/small/designsystemet.json new file mode 100644 index 0000000000..c75d7d0967 --- /dev/null +++ b/design-tokens/primitives/modes/fonts/primary/size/small/designsystemet.json @@ -0,0 +1,18 @@ +{ + "designsystemet": { + "fonts": { + "primary": { + "font-scale": { + "_base": { + "$type": "number", + "$value": "16" + }, + "_ratio": { + "$type": "number", + "$value": "1.14234" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/fonts/primary/size/small/different-fonts.json b/design-tokens/primitives/modes/fonts/primary/size/small/different-fonts.json new file mode 100644 index 0000000000..ae2e85bfef --- /dev/null +++ b/design-tokens/primitives/modes/fonts/primary/size/small/different-fonts.json @@ -0,0 +1,18 @@ +{ + "different-fonts": { + "fonts": { + "primary": { + "font-scale": { + "_base": { + "$type": "number", + "$value": "16" + }, + "_ratio": { + "$type": "number", + "$value": "1.14234" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/fonts/secondary/size/global/designsystemet.json b/design-tokens/primitives/modes/fonts/secondary/size/global/designsystemet.json new file mode 100644 index 0000000000..840567b7dc --- /dev/null +++ b/design-tokens/primitives/modes/fonts/secondary/size/global/designsystemet.json @@ -0,0 +1,62 @@ +{ + "designsystemet": { + "fonts": { + "secondary": { + "font-size": { + "1": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} / pow({designsystemet.fonts.secondary.font-scale._ratio}, 3), 0)" + }, + "2": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} / pow({designsystemet.fonts.secondary.font-scale._ratio}, 2), 0)" + }, + "3": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} / pow({designsystemet.fonts.secondary.font-scale._ratio}, 1), 0)" + }, + "4": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 0), 0)" + }, + "5": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 1), 0)" + }, + "6": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 2), 0)" + }, + "7": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 4), 0)" + }, + "8": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 5), 0)" + }, + "9": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 7), 0)" + }, + "10": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 9), 0)" + }, + "6-half": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 3), 0)" + }, + "8-half": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 6), 0)" + }, + "9-half": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 8), 0)" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/fonts/secondary/size/global/different-fonts.json b/design-tokens/primitives/modes/fonts/secondary/size/global/different-fonts.json new file mode 100644 index 0000000000..64d252ff41 --- /dev/null +++ b/design-tokens/primitives/modes/fonts/secondary/size/global/different-fonts.json @@ -0,0 +1,62 @@ +{ + "different-fonts": { + "fonts": { + "secondary": { + "font-size": { + "1": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} / pow({different-fonts.fonts.secondary.font-scale._ratio}, 3), 0)" + }, + "2": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} / pow({different-fonts.fonts.secondary.font-scale._ratio}, 2), 0)" + }, + "3": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} / pow({different-fonts.fonts.secondary.font-scale._ratio}, 1), 0)" + }, + "4": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 0), 0)" + }, + "5": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 1), 0)" + }, + "6": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 2), 0)" + }, + "7": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 4), 0)" + }, + "8": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 5), 0)" + }, + "9": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 7), 0)" + }, + "10": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 9), 0)" + }, + "6-half": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 3), 0)" + }, + "8-half": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 6), 0)" + }, + "9-half": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 8), 0)" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/fonts/secondary/size/large/designsystemet.json b/design-tokens/primitives/modes/fonts/secondary/size/large/designsystemet.json new file mode 100644 index 0000000000..55ea5eab2a --- /dev/null +++ b/design-tokens/primitives/modes/fonts/secondary/size/large/designsystemet.json @@ -0,0 +1,18 @@ +{ + "designsystemet": { + "fonts": { + "secondary": { + "font-scale": { + "_base": { + "$type": "number", + "$value": "18" + }, + "_ratio": { + "$type": "number", + "$value": "1.143136" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/fonts/secondary/size/large/different-fonts.json b/design-tokens/primitives/modes/fonts/secondary/size/large/different-fonts.json new file mode 100644 index 0000000000..c472895792 --- /dev/null +++ b/design-tokens/primitives/modes/fonts/secondary/size/large/different-fonts.json @@ -0,0 +1,18 @@ +{ + "different-fonts": { + "fonts": { + "secondary": { + "font-scale": { + "_base": { + "$type": "number", + "$value": "18" + }, + "_ratio": { + "$type": "number", + "$value": "1.143136" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/fonts/secondary/size/medium/designsystemet.json b/design-tokens/primitives/modes/fonts/secondary/size/medium/designsystemet.json new file mode 100644 index 0000000000..2e22d5e5e0 --- /dev/null +++ b/design-tokens/primitives/modes/fonts/secondary/size/medium/designsystemet.json @@ -0,0 +1,18 @@ +{ + "designsystemet": { + "fonts": { + "secondary": { + "font-scale": { + "_base": { + "$type": "number", + "$value": "15" + }, + "_ratio": { + "$type": "number", + "$value": "1.143136" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/fonts/secondary/size/medium/different-fonts.json b/design-tokens/primitives/modes/fonts/secondary/size/medium/different-fonts.json new file mode 100644 index 0000000000..480973d4a1 --- /dev/null +++ b/design-tokens/primitives/modes/fonts/secondary/size/medium/different-fonts.json @@ -0,0 +1,18 @@ +{ + "different-fonts": { + "fonts": { + "secondary": { + "font-scale": { + "_base": { + "$type": "number", + "$value": "16" + }, + "_ratio": { + "$type": "number", + "$value": "1.143136" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/fonts/secondary/size/small/designsystemet.json b/design-tokens/primitives/modes/fonts/secondary/size/small/designsystemet.json new file mode 100644 index 0000000000..c16ef22b3a --- /dev/null +++ b/design-tokens/primitives/modes/fonts/secondary/size/small/designsystemet.json @@ -0,0 +1,18 @@ +{ + "designsystemet": { + "fonts": { + "secondary": { + "font-scale": { + "_base": { + "$type": "number", + "$value": "13" + }, + "_ratio": { + "$type": "number", + "$value": "1.14234" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/fonts/secondary/size/small/different-fonts.json b/design-tokens/primitives/modes/fonts/secondary/size/small/different-fonts.json new file mode 100644 index 0000000000..1b332f3908 --- /dev/null +++ b/design-tokens/primitives/modes/fonts/secondary/size/small/different-fonts.json @@ -0,0 +1,18 @@ +{ + "different-fonts": { + "fonts": { + "secondary": { + "font-scale": { + "_base": { + "$type": "number", + "$value": "14" + }, + "_ratio": { + "$type": "number", + "$value": "1.14234" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/typography/primary/designsystemet.json b/design-tokens/primitives/modes/typography/primary/designsystemet.json deleted file mode 100644 index eaf824170a..0000000000 --- a/design-tokens/primitives/modes/typography/primary/designsystemet.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "designsystemet": { - "font-family": { - "$type": "fontFamilies", - "$value": "Inter" - }, - "font-weight": { - "medium": { - "$type": "fontWeights", - "$value": "Medium" - }, - "semibold": { - "$type": "fontWeights", - "$value": "Semi bold" - }, - "regular": { - "$type": "fontWeights", - "$value": "Regular" - } - } - } -} \ No newline at end of file diff --git a/design-tokens/primitives/modes/typography/secondary/designsystemet.json b/design-tokens/primitives/modes/typography/secondary/designsystemet.json deleted file mode 100644 index eaf824170a..0000000000 --- a/design-tokens/primitives/modes/typography/secondary/designsystemet.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "designsystemet": { - "font-family": { - "$type": "fontFamilies", - "$value": "Inter" - }, - "font-weight": { - "medium": { - "$type": "fontWeights", - "$value": "Medium" - }, - "semibold": { - "$type": "fontWeights", - "$value": "Semi bold" - }, - "regular": { - "$type": "fontWeights", - "$value": "Regular" - } - } - } -} \ No newline at end of file diff --git a/design-tokens/primitives/modes/typography/size/global.json b/design-tokens/primitives/modes/typography/size/global.json deleted file mode 100644 index 1342a17a15..0000000000 --- a/design-tokens/primitives/modes/typography/size/global.json +++ /dev/null @@ -1,108 +0,0 @@ -{ - "line-height": { - "sm": { - "$type": "lineHeights", - "$value": "130%" - }, - "md": { - "$type": "lineHeights", - "$value": "150%" - }, - "lg": { - "$type": "lineHeights", - "$value": "170%" - } - }, - "font-size": { - "1": { - "$type": "fontSizes", - "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 3), 0)" - }, - "2": { - "$type": "fontSizes", - "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 2), 0)" - }, - "3": { - "$type": "fontSizes", - "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 1), 0)" - }, - "4": { - "$type": "fontSizes", - "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 0), 0)" - }, - "5": { - "$type": "fontSizes", - "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 1), 0)" - }, - "6": { - "$type": "fontSizes", - "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 2), 0)" - }, - "7": { - "$type": "fontSizes", - "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 4), 0)" - }, - "8": { - "$type": "fontSizes", - "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 5), 0)" - }, - "9": { - "$type": "fontSizes", - "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 7), 0)" - }, - "10": { - "$type": "fontSizes", - "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 9), 0)" - }, - "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": { - "1": { - "$type": "letterSpacing", - "$value": "-1%" - }, - "2": { - "$type": "letterSpacing", - "$value": "-0.5%" - }, - "3": { - "$type": "letterSpacing", - "$value": "-0.25%" - }, - "4": { - "$type": "letterSpacing", - "$value": "-0.15%" - }, - "5": { - "$type": "letterSpacing", - "$value": "0%" - }, - "6": { - "$type": "letterSpacing", - "$value": "0.15%" - }, - "7": { - "$type": "letterSpacing", - "$value": "0.25%" - }, - "8": { - "$type": "letterSpacing", - "$value": "0.5%" - }, - "9": { - "$type": "letterSpacing", - "$value": "1.5%" - } - } -} \ No newline at end of file diff --git a/design-tokens/primitives/modes/typography/size/large.json b/design-tokens/primitives/modes/typography/size/large.json deleted file mode 100644 index 15376376d5..0000000000 --- a/design-tokens/primitives/modes/typography/size/large.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "font-scale": { - "_base": { - "$type": "number", - "$value": "21" - }, - "_ratio": { - "$type": "number", - "$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 deleted file mode 100644 index 9e5c5e6029..0000000000 --- a/design-tokens/primitives/modes/typography/size/medium.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "font-scale": { - "_base": { - "$type": "number", - "$value": "18" - }, - "_ratio": { - "$type": "number", - "$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 deleted file mode 100644 index d290e53a39..0000000000 --- a/design-tokens/primitives/modes/typography/size/small.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "font-scale": { - "_base": { - "$type": "number", - "$value": "16" - }, - "_ratio": { - "$type": "number", - "$value": "1.14234" - } - } -} \ No newline at end of file diff --git a/design-tokens/semantic/style.json b/design-tokens/semantic/style.json index 8f999a8363..bdf7b7ff18 100644 --- a/design-tokens/semantic/style.json +++ b/design-tokens/semantic/style.json @@ -4,71 +4,71 @@ "2xl": { "$type": "typography", "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.10}", - "letterSpacing": "{letter-spacing.1}" + "fontFamily": "{typography-mapping.heading.2xl.font-family}", + "fontWeight": "{typography-mapping.heading.2xl.font-weight}", + "lineHeight": "{typography-mapping.heading.2xl.line-height}", + "fontSize": "{typography-mapping.heading.2xl.font-size}", + "letterSpacing": "{typography-mapping.heading.2xl.letter-spacing}" } }, "xl": { "$type": "typography", "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.9}", - "letterSpacing": "{letter-spacing.1}" + "fontFamily": "{typography-mapping.heading.xl.font-family}", + "fontWeight": "{typography-mapping.heading.xl.font-weight}", + "lineHeight": "{typography-mapping.heading.xl.line-height}", + "fontSize": "{typography-mapping.heading.xl.font-size}", + "letterSpacing": "{typography-mapping.heading.xl.letter-spacing}" } }, "lg": { "$type": "typography", "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.8}", - "letterSpacing": "{letter-spacing.2}" + "fontFamily": "{typography-mapping.heading.lg.font-family}", + "fontWeight": "{typography-mapping.heading.lg.font-weight}", + "lineHeight": "{typography-mapping.heading.lg.line-height}", + "fontSize": "{typography-mapping.heading.lg.font-size}", + "letterSpacing": "{typography-mapping.heading.lg.letter-spacing}" } }, "md": { "$type": "typography", "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.7}", - "letterSpacing": "{letter-spacing.3}" + "fontFamily": "{typography-mapping.heading.md.font-family}", + "fontWeight": "{typography-mapping.heading.md.font-weight}", + "lineHeight": "{typography-mapping.heading.md.line-height}", + "fontSize": "{typography-mapping.heading.md.font-size}", + "letterSpacing": "{typography-mapping.heading.md.letter-spacing}" } }, "sm": { "$type": "typography", "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.6}", - "letterSpacing": "{letter-spacing.5}" + "fontFamily": "{typography-mapping.heading.sm.font-family}", + "fontWeight": "{typography-mapping.heading.sm.font-weight}", + "lineHeight": "{typography-mapping.heading.sm.line-height}", + "fontSize": "{typography-mapping.heading.sm.font-size}", + "letterSpacing": "{typography-mapping.heading.sm.letter-spacing}" } }, "xs": { "$type": "typography", "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.5}", - "letterSpacing": "{letter-spacing.6}" + "fontFamily": "{typography-mapping.heading.xs.font-family}", + "fontWeight": "{typography-mapping.heading.xs.font-weight}", + "lineHeight": "{typography-mapping.heading.xs.line-height}", + "fontSize": "{typography-mapping.heading.xs.font-size}", + "letterSpacing": "{typography-mapping.heading.xs.letter-spacing}" } }, "2xs": { "$type": "typography", "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.4}", - "letterSpacing": "{letter-spacing.6}" + "fontFamily": "{typography-mapping.heading.2xs.font-family}", + "fontWeight": "{typography-mapping.heading.2xs.font-weight}", + "lineHeight": "{typography-mapping.heading.2xs.line-height}", + "fontSize": "{typography-mapping.heading.2xs.font-size}", + "letterSpacing": "{typography-mapping.heading.2xs.letter-spacing}" } } }, @@ -76,102 +76,102 @@ "xl": { "$type": "typography", "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.md}", - "fontSize": "{font-size.6}", - "letterSpacing": "{letter-spacing.8}" + "fontFamily": "{typography-mapping.body.xl.font-family}", + "fontWeight": "{typography-mapping.body.xl.font-weight}", + "lineHeight": "{typography-mapping.body.xl.line-height}", + "fontSize": "{typography-mapping.body.xl.font-size}", + "letterSpacing": "{typography-mapping.body.xl.letter-spacing}" } }, "lg": { "$type": "typography", "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.md}", - "fontSize": "{font-size.5}", - "letterSpacing": "{letter-spacing.8}" + "fontFamily": "{typography-mapping.body.lg.font-family}", + "fontWeight": "{typography-mapping.body.lg.font-weight}", + "lineHeight": "{typography-mapping.body.lg.line-height}", + "fontSize": "{typography-mapping.body.lg.font-size}", + "letterSpacing": "{typography-mapping.body.lg.letter-spacing}" } }, "md": { "$type": "typography", "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.md}", - "fontSize": "{font-size.4}", - "letterSpacing": "{letter-spacing.8}" + "fontFamily": "{typography-mapping.body.md.font-family}", + "fontWeight": "{typography-mapping.body.md.font-weight}", + "lineHeight": "{typography-mapping.body.md.line-height}", + "fontSize": "{typography-mapping.body.md.font-size}", + "letterSpacing": "{typography-mapping.body.md.letter-spacing}" } }, "sm": { "$type": "typography", "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.md}", - "fontSize": "{font-size.3}", - "letterSpacing": "{letter-spacing.7}" + "fontFamily": "{typography-mapping.body.sm.font-family}", + "fontWeight": "{typography-mapping.body.sm.font-weight}", + "lineHeight": "{typography-mapping.body.sm.line-height}", + "fontSize": "{typography-mapping.body.sm.font-size}", + "letterSpacing": "{typography-mapping.body.sm.letter-spacing}" } }, "xs": { "$type": "typography", "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.md}", - "fontSize": "{font-size.2}", - "letterSpacing": "{letter-spacing.6}" + "fontFamily": "{typography-mapping.body.xs.font-family}", + "fontWeight": "{typography-mapping.body.xs.font-weight}", + "lineHeight": "{typography-mapping.body.xs.line-height}", + "fontSize": "{typography-mapping.body.xs.font-size}", + "letterSpacing": "{typography-mapping.body.xs.letter-spacing}" } }, "short": { "xl": { "$type": "typography", "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.6}", - "letterSpacing": "{letter-spacing.8}" + "fontFamily": "{typography-mapping.body.short.xl.font-family}", + "fontWeight": "{typography-mapping.body.short.xl.font-weight}", + "lineHeight": "{typography-mapping.body.short.xl.line-height}", + "fontSize": "{typography-mapping.body.short.xl.font-size}", + "letterSpacing": "{typography-mapping.body.short.xl.letter-spacing}" } }, "lg": { "$type": "typography", "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.5}", - "letterSpacing": "{letter-spacing.8}" + "fontFamily": "{typography-mapping.body.short.lg.font-family}", + "fontWeight": "{typography-mapping.body.short.lg.font-weight}", + "lineHeight": "{typography-mapping.body.short.lg.line-height}", + "fontSize": "{typography-mapping.body.short.lg.font-size}", + "letterSpacing": "{typography-mapping.body.short.lg.letter-spacing}" } }, "md": { "$type": "typography", "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.4}", - "letterSpacing": "{letter-spacing.8}" + "fontFamily": "{typography-mapping.body.short.md.font-family}", + "fontWeight": "{typography-mapping.body.short.md.font-weight}", + "lineHeight": "{typography-mapping.body.short.md.line-height}", + "fontSize": "{typography-mapping.body.short.md.font-size}", + "letterSpacing": "{typography-mapping.body.short.md.letter-spacing}" } }, "sm": { "$type": "typography", "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.3}", - "letterSpacing": "{letter-spacing.7}" + "fontFamily": "{typography-mapping.body.short.sm.font-family}", + "fontWeight": "{typography-mapping.body.short.sm.font-weight}", + "lineHeight": "{typography-mapping.body.short.sm.line-height}", + "fontSize": "{typography-mapping.body.short.sm.font-size}", + "letterSpacing": "{typography-mapping.body.short.sm.letter-spacing}" } }, "xs": { "$type": "typography", "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.2}", - "letterSpacing": "{letter-spacing.6}" + "fontFamily": "{typography-mapping.body.short.xs.font-family}", + "fontWeight": "{typography-mapping.body.short.xs.font-weight}", + "lineHeight": "{typography-mapping.body.short.xs.line-height}", + "fontSize": "{typography-mapping.body.short.xs.font-size}", + "letterSpacing": "{typography-mapping.body.short.xs.letter-spacing}" } } }, @@ -179,51 +179,51 @@ "xl": { "$type": "typography", "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.lg}", - "fontSize": "{font-size.6}", - "letterSpacing": "{letter-spacing.8}" + "fontFamily": "{typography-mapping.body.long.xl.font-family}", + "fontWeight": "{typography-mapping.body.long.xl.font-weight}", + "lineHeight": "{typography-mapping.body.long.xl.line-height}", + "fontSize": "{typography-mapping.body.long.xl.font-size}", + "letterSpacing": "{typography-mapping.body.long.xl.letter-spacing}" } }, "lg": { "$type": "typography", "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.lg}", - "fontSize": "{font-size.5}", - "letterSpacing": "{letter-spacing.8}" + "fontFamily": "{typography-mapping.body.long.lg.font-family}", + "fontWeight": "{typography-mapping.body.long.lg.font-weight}", + "lineHeight": "{typography-mapping.body.long.lg.line-height}", + "fontSize": "{typography-mapping.body.long.lg.font-size}", + "letterSpacing": "{typography-mapping.body.long.lg.letter-spacing}" } }, "md": { "$type": "typography", "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.lg}", - "fontSize": "{font-size.4}", - "letterSpacing": "{letter-spacing.8}" + "fontFamily": "{typography-mapping.body.long.md.font-family}", + "fontWeight": "{typography-mapping.body.long.md.font-weight}", + "lineHeight": "{typography-mapping.body.long.md.line-height}", + "fontSize": "{typography-mapping.body.long.md.font-size}", + "letterSpacing": "{typography-mapping.body.long.md.letter-spacing}" } }, "sm": { "$type": "typography", "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.lg}", - "fontSize": "{font-size.3}", - "letterSpacing": "{letter-spacing.7}" + "fontFamily": "{typography-mapping.body.long.sm.font-family}", + "fontWeight": "{typography-mapping.body.long.sm.font-weight}", + "lineHeight": "{typography-mapping.body.long.sm.line-height}", + "fontSize": "{typography-mapping.body.long.sm.font-size}", + "letterSpacing": "{typography-mapping.body.long.sm.letter-spacing}" } }, "xs": { "$type": "typography", "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.lg}", - "fontSize": "{font-size.2}", - "letterSpacing": "{letter-spacing.6}" + "fontFamily": "{typography-mapping.body.long.xs.font-family}", + "fontWeight": "{typography-mapping.body.long.xs.font-weight}", + "lineHeight": "{typography-mapping.body.long.xs.line-height}", + "fontSize": "{typography-mapping.body.long.xs.font-size}", + "letterSpacing": "{typography-mapping.body.long.xs.letter-spacing}" } } } diff --git a/design-tokens/themes/designsystemet.json b/design-tokens/themes/designsystemet.json index de72f98f7a..9d788e914b 100644 --- a/design-tokens/themes/designsystemet.json +++ b/design-tokens/themes/designsystemet.json @@ -545,22 +545,728 @@ } } }, - "font-family": { - "$type": "fontFamilies", - "$value": "{designsystemet.font-family}" - }, - "font-weight": { - "medium": { - "$type": "fontWeights", - "$value": "{designsystemet.font-weight.medium}" + "fonts": { + "primary": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.primary.font-family}" + }, + "font-weight": { + "medium": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.primary.font-weight.medium}" + }, + "semibold": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.primary.font-weight.semibold}" + }, + "regular": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.primary.font-weight.regular}" + } + }, + "font-size": { + "1": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.1}" + }, + "2": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.2}" + }, + "3": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.3}" + }, + "4": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.4}" + }, + "5": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.5}" + }, + "6": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.6}" + }, + "7": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.7}" + }, + "8": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.8}" + }, + "9": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.9}" + }, + "10": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.10}" + } + }, + "line-height": { + "sm": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.primary.line-height.sm}" + }, + "md": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.primary.line-height.md}" + }, + "lg": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.primary.line-height.lg}" + } + }, + "letter-spacing": { + "1": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.primary.letter-spacing.1}" + }, + "2": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.primary.letter-spacing.2}" + }, + "3": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.primary.letter-spacing.3}" + }, + "4": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.primary.letter-spacing.4}" + }, + "5": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.primary.letter-spacing.5}" + }, + "6": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.primary.letter-spacing.6}" + }, + "7": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.primary.letter-spacing.7}" + }, + "8": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.primary.letter-spacing.8}" + }, + "9": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.primary.letter-spacing.9}" + } + } }, - "semibold": { - "$type": "fontWeights", - "$value": "{designsystemet.font-weight.semibold}" + "secondary": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.secondary.font-family}" + }, + "font-weight": { + "medium": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.secondary.font-weight.medium}" + }, + "semibold": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.secondary.font-weight.semibold}" + }, + "regular": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.secondary.font-weight.regular}" + } + }, + "font-size": { + "1": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.secondary.font-size.1}" + }, + "2": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.secondary.font-size.2}" + }, + "3": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.secondary.font-size.3}" + }, + "4": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.secondary.font-size.4}" + }, + "5": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.secondary.font-size.5}" + }, + "6": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.secondary.font-size.6}" + }, + "7": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.secondary.font-size.7}" + }, + "8": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.secondary.font-size.8}" + }, + "9": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.secondary.font-size.9}" + }, + "10": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.secondary.font-size.10}" + } + }, + "line-height": { + "sm": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.secondary.line-height.sm}" + }, + "md": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.secondary.line-height.md}" + }, + "lg": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.secondary.line-height.lg}" + } + }, + "letter-spacing": { + "1": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.secondary.letter-spacing.1}" + }, + "2": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.secondary.letter-spacing.2}" + }, + "3": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.secondary.letter-spacing.3}" + }, + "4": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.secondary.letter-spacing.4}" + }, + "5": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.secondary.letter-spacing.5}" + }, + "6": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.secondary.letter-spacing.6}" + }, + "7": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.secondary.letter-spacing.7}" + }, + "8": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.secondary.letter-spacing.8}" + }, + "9": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.secondary.letter-spacing.9}" + } + } + } + }, + "typography-mapping": { + "heading": { + "2xl": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.10}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.1}" + } + }, + "xl": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.9}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.1}" + } + }, + "lg": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.8}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.2}" + } + }, + "md": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.7}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.3}" + } + }, + "sm": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.6}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.5}" + } + }, + "xs": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.5}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.6}" + } + }, + "2xs": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.4}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.6}" + } + } }, - "regular": { - "$type": "fontWeights", - "$value": "{designsystemet.font-weight.regular}" + "body": { + "xl": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.md}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.6}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.8}" + } + }, + "lg": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.md}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.5}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.8}" + } + }, + "md": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.md}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.4}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.8}" + } + }, + "sm": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.md}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.3}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.7}" + } + }, + "xs": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.md}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.2}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.6}" + } + }, + "short": { + "xl": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.6}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.8}" + } + }, + "lg": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.5}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.8}" + } + }, + "md": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.4}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.8}" + } + }, + "sm": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.3}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.7}" + } + }, + "xs": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.2}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.6}" + } + } + }, + "long": { + "xl": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.lg}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.6}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.8}" + } + }, + "lg": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.lg}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.5}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.8}" + } + }, + "md": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.lg}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.4}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.8}" + } + }, + "sm": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.lg}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.3}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.7}" + } + }, + "xs": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.lg}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.2}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.6}" + } + } + } } }, "border-radius": { diff --git a/design-tokens/themes/different-fonts.json b/design-tokens/themes/different-fonts.json new file mode 100644 index 0000000000..ddf6aa4340 --- /dev/null +++ b/design-tokens/themes/different-fonts.json @@ -0,0 +1,1306 @@ +{ + "color": { + "accent": { + "1": { + "$type": "color", + "$value": "{different-fonts.accent.1}" + }, + "2": { + "$type": "color", + "$value": "{different-fonts.accent.2}" + }, + "3": { + "$type": "color", + "$value": "{different-fonts.accent.3}" + }, + "4": { + "$type": "color", + "$value": "{different-fonts.accent.4}" + }, + "5": { + "$type": "color", + "$value": "{different-fonts.accent.5}" + }, + "6": { + "$type": "color", + "$value": "{different-fonts.accent.6}" + }, + "7": { + "$type": "color", + "$value": "{different-fonts.accent.7}" + }, + "8": { + "$type": "color", + "$value": "{different-fonts.accent.8}" + }, + "9": { + "$type": "color", + "$value": "{different-fonts.accent.9}" + }, + "10": { + "$type": "color", + "$value": "{different-fonts.accent.10}" + }, + "11": { + "$type": "color", + "$value": "{different-fonts.accent.11}" + }, + "12": { + "$type": "color", + "$value": "{different-fonts.accent.12}" + }, + "13": { + "$type": "color", + "$value": "{different-fonts.accent.13}" + }, + "14": { + "$type": "color", + "$value": "{different-fonts.accent.14}" + }, + "15": { + "$type": "color", + "$value": "{different-fonts.accent.15}" + }, + "16": { + "$type": "color", + "$value": "{different-fonts.accent.16}" + } + }, + "neutral": { + "1": { + "$type": "color", + "$value": "{different-fonts.neutral.1}" + }, + "2": { + "$type": "color", + "$value": "{different-fonts.neutral.2}" + }, + "3": { + "$type": "color", + "$value": "{different-fonts.neutral.3}" + }, + "4": { + "$type": "color", + "$value": "{different-fonts.neutral.4}" + }, + "5": { + "$type": "color", + "$value": "{different-fonts.neutral.5}" + }, + "6": { + "$type": "color", + "$value": "{different-fonts.neutral.6}" + }, + "7": { + "$type": "color", + "$value": "{different-fonts.neutral.7}" + }, + "8": { + "$type": "color", + "$value": "{different-fonts.neutral.8}" + }, + "9": { + "$type": "color", + "$value": "{different-fonts.neutral.9}" + }, + "10": { + "$type": "color", + "$value": "{different-fonts.neutral.10}" + }, + "11": { + "$type": "color", + "$value": "{different-fonts.neutral.11}" + }, + "12": { + "$type": "color", + "$value": "{different-fonts.neutral.12}" + }, + "13": { + "$type": "color", + "$value": "{different-fonts.neutral.13}" + }, + "14": { + "$type": "color", + "$value": "{different-fonts.neutral.14}" + }, + "15": { + "$type": "color", + "$value": "{different-fonts.neutral.15}" + }, + "16": { + "$type": "color", + "$value": "{different-fonts.neutral.16}" + } + }, + "brand1": { + "1": { + "$type": "color", + "$value": "{different-fonts.brand1.1}" + }, + "2": { + "$type": "color", + "$value": "{different-fonts.brand1.2}" + }, + "3": { + "$type": "color", + "$value": "{different-fonts.brand1.3}" + }, + "4": { + "$type": "color", + "$value": "{different-fonts.brand1.4}" + }, + "5": { + "$type": "color", + "$value": "{different-fonts.brand1.5}" + }, + "6": { + "$type": "color", + "$value": "{different-fonts.brand1.6}" + }, + "7": { + "$type": "color", + "$value": "{different-fonts.brand1.7}" + }, + "8": { + "$type": "color", + "$value": "{different-fonts.brand1.8}" + }, + "9": { + "$type": "color", + "$value": "{different-fonts.brand1.9}" + }, + "10": { + "$type": "color", + "$value": "{different-fonts.brand1.10}" + }, + "11": { + "$type": "color", + "$value": "{different-fonts.brand1.11}" + }, + "12": { + "$type": "color", + "$value": "{different-fonts.brand1.12}" + }, + "13": { + "$type": "color", + "$value": "{different-fonts.brand1.13}" + }, + "14": { + "$type": "color", + "$value": "{different-fonts.brand1.14}" + }, + "15": { + "$type": "color", + "$value": "{different-fonts.brand1.15}" + }, + "16": { + "$type": "color", + "$value": "{different-fonts.brand1.16}" + } + }, + "brand2": { + "1": { + "$type": "color", + "$value": "{different-fonts.brand2.1}" + }, + "2": { + "$type": "color", + "$value": "{different-fonts.brand2.2}" + }, + "3": { + "$type": "color", + "$value": "{different-fonts.brand2.3}" + }, + "4": { + "$type": "color", + "$value": "{different-fonts.brand2.4}" + }, + "5": { + "$type": "color", + "$value": "{different-fonts.brand2.5}" + }, + "6": { + "$type": "color", + "$value": "{different-fonts.brand2.6}" + }, + "7": { + "$type": "color", + "$value": "{different-fonts.brand2.7}" + }, + "8": { + "$type": "color", + "$value": "{different-fonts.brand2.8}" + }, + "9": { + "$type": "color", + "$value": "{different-fonts.brand2.9}" + }, + "10": { + "$type": "color", + "$value": "{different-fonts.brand2.10}" + }, + "11": { + "$type": "color", + "$value": "{different-fonts.brand2.11}" + }, + "12": { + "$type": "color", + "$value": "{different-fonts.brand2.12}" + }, + "13": { + "$type": "color", + "$value": "{different-fonts.brand2.13}" + }, + "14": { + "$type": "color", + "$value": "{different-fonts.brand2.14}" + }, + "15": { + "$type": "color", + "$value": "{different-fonts.brand2.15}" + }, + "16": { + "$type": "color", + "$value": "{different-fonts.brand2.16}" + } + }, + "info": { + "1": { + "$type": "color", + "$value": "{different-fonts.info.1}" + }, + "2": { + "$type": "color", + "$value": "{different-fonts.info.2}" + }, + "3": { + "$type": "color", + "$value": "{different-fonts.info.3}" + }, + "4": { + "$type": "color", + "$value": "{different-fonts.info.4}" + }, + "5": { + "$type": "color", + "$value": "{different-fonts.info.5}" + }, + "6": { + "$type": "color", + "$value": "{different-fonts.info.6}" + }, + "7": { + "$type": "color", + "$value": "{different-fonts.info.7}" + }, + "8": { + "$type": "color", + "$value": "{different-fonts.info.8}" + }, + "9": { + "$type": "color", + "$value": "{different-fonts.info.9}" + }, + "10": { + "$type": "color", + "$value": "{different-fonts.info.10}" + }, + "11": { + "$type": "color", + "$value": "{different-fonts.info.11}" + }, + "12": { + "$type": "color", + "$value": "{different-fonts.info.12}" + }, + "13": { + "$type": "color", + "$value": "{different-fonts.info.13}" + }, + "14": { + "$type": "color", + "$value": "{different-fonts.info.14}" + }, + "15": { + "$type": "color", + "$value": "{different-fonts.info.15}" + }, + "16": { + "$type": "color", + "$value": "{different-fonts.info.16}" + } + }, + "success": { + "1": { + "$type": "color", + "$value": "{different-fonts.success.1}" + }, + "2": { + "$type": "color", + "$value": "{different-fonts.success.2}" + }, + "3": { + "$type": "color", + "$value": "{different-fonts.success.3}" + }, + "4": { + "$type": "color", + "$value": "{different-fonts.success.4}" + }, + "5": { + "$type": "color", + "$value": "{different-fonts.success.5}" + }, + "6": { + "$type": "color", + "$value": "{different-fonts.success.6}" + }, + "7": { + "$type": "color", + "$value": "{different-fonts.success.7}" + }, + "8": { + "$type": "color", + "$value": "{different-fonts.success.8}" + }, + "9": { + "$type": "color", + "$value": "{different-fonts.success.9}" + }, + "10": { + "$type": "color", + "$value": "{different-fonts.success.10}" + }, + "11": { + "$type": "color", + "$value": "{different-fonts.success.11}" + }, + "12": { + "$type": "color", + "$value": "{different-fonts.success.12}" + }, + "13": { + "$type": "color", + "$value": "{different-fonts.success.13}" + }, + "14": { + "$type": "color", + "$value": "{different-fonts.success.14}" + }, + "15": { + "$type": "color", + "$value": "{different-fonts.success.15}" + }, + "16": { + "$type": "color", + "$value": "{different-fonts.success.16}" + } + }, + "warning": { + "1": { + "$type": "color", + "$value": "{different-fonts.warning.1}" + }, + "2": { + "$type": "color", + "$value": "{different-fonts.warning.2}" + }, + "3": { + "$type": "color", + "$value": "{different-fonts.warning.3}" + }, + "4": { + "$type": "color", + "$value": "{different-fonts.warning.4}" + }, + "5": { + "$type": "color", + "$value": "{different-fonts.warning.5}" + }, + "6": { + "$type": "color", + "$value": "{different-fonts.warning.6}" + }, + "7": { + "$type": "color", + "$value": "{different-fonts.warning.7}" + }, + "8": { + "$type": "color", + "$value": "{different-fonts.warning.8}" + }, + "9": { + "$type": "color", + "$value": "{different-fonts.warning.9}" + }, + "10": { + "$type": "color", + "$value": "{different-fonts.warning.10}" + }, + "11": { + "$type": "color", + "$value": "{different-fonts.warning.11}" + }, + "12": { + "$type": "color", + "$value": "{different-fonts.warning.12}" + }, + "13": { + "$type": "color", + "$value": "{different-fonts.warning.13}" + }, + "14": { + "$type": "color", + "$value": "{different-fonts.warning.14}" + }, + "15": { + "$type": "color", + "$value": "{different-fonts.warning.15}" + }, + "16": { + "$type": "color", + "$value": "{different-fonts.warning.16}" + } + }, + "danger": { + "1": { + "$type": "color", + "$value": "{different-fonts.danger.1}" + }, + "2": { + "$type": "color", + "$value": "{different-fonts.danger.2}" + }, + "3": { + "$type": "color", + "$value": "{different-fonts.danger.3}" + }, + "4": { + "$type": "color", + "$value": "{different-fonts.danger.4}" + }, + "5": { + "$type": "color", + "$value": "{different-fonts.danger.5}" + }, + "6": { + "$type": "color", + "$value": "{different-fonts.danger.6}" + }, + "7": { + "$type": "color", + "$value": "{different-fonts.danger.7}" + }, + "8": { + "$type": "color", + "$value": "{different-fonts.danger.8}" + }, + "9": { + "$type": "color", + "$value": "{different-fonts.danger.9}" + }, + "10": { + "$type": "color", + "$value": "{different-fonts.danger.10}" + }, + "11": { + "$type": "color", + "$value": "{different-fonts.danger.11}" + }, + "12": { + "$type": "color", + "$value": "{different-fonts.danger.12}" + }, + "13": { + "$type": "color", + "$value": "{different-fonts.danger.13}" + }, + "14": { + "$type": "color", + "$value": "{different-fonts.danger.14}" + }, + "15": { + "$type": "color", + "$value": "{different-fonts.danger.15}" + }, + "16": { + "$type": "color", + "$value": "{different-fonts.danger.16}" + } + }, + "link": { + "visited": { + "$type": "color", + "$value": "{different-fonts.link.visited}" + } + }, + "focus": { + "inner-color": { + "$type": "color", + "$value": "{different-fonts.focus.inner}" + }, + "outer-color": { + "$type": "color", + "$value": "{different-fonts.focus.outer}" + } + } + }, + "fonts": { + "primary": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.primary.font-family}" + }, + "font-weight": { + "medium": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.primary.font-weight.medium}" + }, + "semibold": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.primary.font-weight.semibold}" + }, + "regular": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.primary.font-weight.regular}" + } + }, + "font-size": { + "1": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.primary.font-size.1}" + }, + "2": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.primary.font-size.2}" + }, + "3": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.primary.font-size.3}" + }, + "4": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.primary.font-size.4}" + }, + "5": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.primary.font-size.5}" + }, + "6": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.primary.font-size.6}" + }, + "7": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.primary.font-size.7}" + }, + "8": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.primary.font-size.8}" + }, + "9": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.primary.font-size.9}" + }, + "10": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.primary.font-size.10}" + } + }, + "line-height": { + "sm": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.primary.line-height.sm}" + }, + "md": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.primary.line-height.md}" + }, + "lg": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.primary.line-height.lg}" + } + }, + "letter-spacing": { + "1": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.primary.letter-spacing.1}" + }, + "2": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.primary.letter-spacing.2}" + }, + "3": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.primary.letter-spacing.3}" + }, + "4": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.primary.letter-spacing.4}" + }, + "5": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.primary.letter-spacing.5}" + }, + "6": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.primary.letter-spacing.6}" + }, + "7": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.primary.letter-spacing.7}" + }, + "8": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.primary.letter-spacing.8}" + }, + "9": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.primary.letter-spacing.9}" + } + } + }, + "secondary": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.secondary.font-family}" + }, + "font-weight": { + "medium": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.secondary.font-weight.medium}" + }, + "semibold": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.secondary.font-weight.semibold}" + }, + "regular": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.secondary.font-weight.regular}" + } + }, + "font-size": { + "1": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.secondary.font-size.1}" + }, + "2": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.secondary.font-size.2}" + }, + "3": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.secondary.font-size.3}" + }, + "4": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.secondary.font-size.4}" + }, + "5": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.secondary.font-size.5}" + }, + "6": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.secondary.font-size.6}" + }, + "7": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.secondary.font-size.7}" + }, + "8": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.secondary.font-size.8}" + }, + "9": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.secondary.font-size.9}" + }, + "10": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.secondary.font-size.10}" + } + }, + "line-height": { + "sm": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.secondary.line-height.sm}" + }, + "md": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.secondary.line-height.md}" + }, + "lg": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.secondary.line-height.lg}" + } + }, + "letter-spacing": { + "1": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.secondary.letter-spacing.1}" + }, + "2": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.secondary.letter-spacing.2}" + }, + "3": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.secondary.letter-spacing.3}" + }, + "4": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.secondary.letter-spacing.4}" + }, + "5": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.secondary.letter-spacing.5}" + }, + "6": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.secondary.letter-spacing.6}" + }, + "7": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.secondary.letter-spacing.7}" + }, + "8": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.secondary.letter-spacing.8}" + }, + "9": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.secondary.letter-spacing.9}" + } + } + } + }, + "typography-mapping": { + "heading": { + "2xl": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.10}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.1}" + } + }, + "xl": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.9}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.1}" + } + }, + "lg": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.8}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.2}" + } + }, + "md": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.7}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.3}" + } + }, + "sm": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.6}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.5}" + } + }, + "xs": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.5}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.6}" + } + }, + "2xs": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.4}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.6}" + } + } + }, + "body": { + "xl": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.md}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.6}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.8}" + } + }, + "lg": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.md}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.5}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.8}" + } + }, + "md": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.md}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.4}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.8}" + } + }, + "sm": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.md}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.3}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.7}" + } + }, + "xs": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.md}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.2}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.6}" + } + }, + "short": { + "xl": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.6}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.8}" + } + }, + "lg": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.5}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.8}" + } + }, + "md": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.4}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.8}" + } + }, + "sm": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.3}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.7}" + } + }, + "xs": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.2}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.6}" + } + } + }, + "long": { + "xl": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.lg}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.6}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.8}" + } + }, + "lg": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.lg}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.5}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.8}" + } + }, + "md": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.lg}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.4}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.8}" + } + }, + "sm": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.lg}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.3}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.7}" + } + }, + "xs": { + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.lg}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.2}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.6}" + } + } + } + } + }, + "border-radius": { + "1": { + "$type": "dimension", + "$value": "min({border-radius.base}*0.5,{border-radius.scale})" + }, + "2": { + "$type": "dimension", + "$value": "min({border-radius.base},{border-radius.scale}*2)" + }, + "3": { + "$type": "dimension", + "$value": "min({border-radius.base}*2,{border-radius.scale}*5)" + }, + "4": { + "$type": "dimension", + "$value": "min({border-radius.base}*3,{border-radius.scale}*7)" + }, + "5": { + "$type": "dimension", + "$value": "{border-radius.base}" + }, + "6": { + "$type": "dimension", + "$value": "9999" + }, + "base": { + "$type": "dimension", + "$value": "4" + }, + "scale": { + "$type": "dimension", + "$value": "4" + } + } +} \ No newline at end of file diff --git a/designsystemet.config.json b/designsystemet.config.json index 0f399be298..066ab889ab 100644 --- a/designsystemet.config.json +++ b/designsystemet.config.json @@ -16,7 +16,83 @@ }, "borderRadius": 4, "typography": { - "fontFamily": "Inter" + "components": { + "heading": { + "font": "secondary" + }, + "body": { + "font": "primary" + } + }, + "fonts": { + "primary": { + "fontFamily": "Inter", + "fontWeight": { + "regular": "Regular", + "medium": "Medium", + "semibold": "Semi bold" + } + }, + "secondary": { + "fontFamily": "Playfair Display", + "fontWeight": { + "regular": "Regular", + "medium": "Medium", + "semibold": "SemiBold" + }, + "size": { + "small": { "base": 13 }, + "medium": { "base": 15 }, + "large": { "base": 18 } + } + } + } + } + }, + "different-fonts": { + "colors": { + "main": { + "accent": "#0062BA" + }, + "support": { + "brand1": "#0D7A5F", + "brand2": "#5B3FA0" + }, + "neutral": "#24272B" + }, + "borderRadius": 4, + "typography": { + "components": { + "heading": { + "font": "primary" + }, + "body": { + "font": "secondary" + } + }, + "fonts": { + "primary": { + "fontFamily": "Karantina", + "fontWeight": { + "regular": "Light", + "medium": "Regular", + "semibold": "Bold" + } + }, + "secondary": { + "fontFamily": "Playpen Sans", + "fontWeight": { + "regular": "Regular", + "medium": "Medium", + "semibold": "SemiBold" + }, + "size": { + "small": { "base": 14 }, + "medium": { "base": 16 }, + "large": { "base": 18 } + } + } + } } } } diff --git a/packages/cli/bin/config.ts b/packages/cli/bin/config.ts index 812e11daaf..81a7aff7de 100644 --- a/packages/cli/bin/config.ts +++ b/packages/cli/bin/config.ts @@ -101,7 +101,6 @@ export async function parseCreateConfig( { [theme]: getThemeOptions(getCliOption), }) as CreateConfigSchema['themes'], - globalTypography: configParsed.globalTypography, } satisfies CreateConfigSchema); return validateConfig(configFileCreateSchema, unvalidatedConfig, configPath); diff --git a/packages/cli/bin/designsystemet.ts b/packages/cli/bin/designsystemet.ts index 16c003790e..e0b7c30fb5 100644 --- a/packages/cli/bin/designsystemet.ts +++ b/packages/cli/bin/designsystemet.ts @@ -58,9 +58,13 @@ function makeTokenCommands() { const { configFile, configPath } = await getConfigFile(opts.config); - // Hacky: get the globalTypography from the create config. + // Hacky: Find any font size overrides from the create config. // This only works because these settings can't be passed as CLI options - const globalTypographyConfig = parseConfig(configFile, configPath).globalTypography; + const typographySizeOverrides = Object.values(parseConfig(configFile, configPath).themes) + .flatMap((x) => x.typography) + .flatMap((x) => Object.values(x?.fonts ?? [])) + .flatMap((x) => Object.values(x.size ?? [])) + .flatMap((x) => Object.values(x.overrides ?? [])); const config = await parseBuildConfig(configFile, { configPath }); @@ -72,11 +76,7 @@ function makeTokenCommands() { await cleanDir(outDir, dry); } - if ( - Object.values(globalTypographyConfig?.size?.modes ?? []).some( - (x) => Object.values(x.overrides ?? {}).length > 0, - ) - ) { + if (typographySizeOverrides.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'; @@ -133,8 +133,14 @@ 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, config.globalTypography?.size); - await writeTokens({ outDir: config.outDir, theme, dry: opts.dry, tokenSets }); + const { tokenSets, themeDimensions } = await createTokens(theme); + await writeTokens({ + outDir: config.outDir, + theme, + dry: opts.dry, + tokenSets, + tokenSetDimensions: themeDimensions, + }); } } }); diff --git a/packages/cli/src/config.ts b/packages/cli/src/config.ts index 36199c9fea..7325a4b07a 100644 --- a/packages/cli/src/config.ts +++ b/packages/cli/src/config.ts @@ -184,10 +184,30 @@ const fontSizeMode = z.object({ '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); -const typographySizeSchema = z.object({ - modes: typographySizeModes.optional(), +const typographySizeSchema = z + .partialRecord(z.enum(['small', 'medium', 'large']), fontSizeMode) + .describe('Sizing configuration for the individual size modes'); + +const typographyComponentsSchema = z.object({ + heading: z + .object({ + font: z + .string() + .describe( + 'Define which font to use for heading styles. Must be one of the under theme..typography.fonts', + ), + }) + .optional(), + body: z + .object({ + font: z + .string() + .describe( + 'Define which font to use for body text styles. Must be one of the under theme..typography.fonts', + ), + }) + .optional(), }); const overridesSchema = z @@ -200,6 +220,17 @@ const overridesSchema = z .describe('Overrides for generated design tokens. Currently only supports colors defined in your theme') .optional(); +const typographyFontSchema = z.object({ + fontFamily: z.string().describe('Sets the font-family for this font'), + fontWeight: z + .record( + z.enum(['regular', 'medium', 'semibold']), + z.string().describe('The name of the weight as displayed in Figma'), + ) + .describe('Sets the font-weights for this font'), + size: typographySizeSchema.optional().describe('Configure sizing for this font'), +}); + const themeSchema = z .object({ colors: z @@ -211,7 +242,14 @@ const themeSchema = z .meta({ description: 'Defines the colors for this theme' }), typography: z .object({ - fontFamily: z.string().meta({ description: 'Sets the font-family for this theme' }), + fontFamily: z.string().describe('DEPRECATED! Use fonts..fontFamily instead.').optional(), + fonts: z + .record(z.string(), typographyFontSchema) + .describe('Define fonts that can be used in the theme') + .optional(), + components: typographyComponentsSchema + .describe('Define which fonts to use for each typography style') + .optional(), }) .describe('Defines the typography for a given theme') .optional(), @@ -230,12 +268,6 @@ const _configFileCreateSchema = z.object({ 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({ @@ -264,3 +296,4 @@ export type CreateConfigSchema = z.infer; export type ConfigSchemaTheme = z.infer; export type ColorOverrideSchema = z.infer; export type TypographySizeSchema = z.infer; +export type TypographyFontSchema = z.infer; diff --git a/packages/cli/src/scripts/update-preview-tokens.ts b/packages/cli/src/scripts/update-preview-tokens.ts index da3a299ccb..4adddb1a5e 100644 --- a/packages/cli/src/scripts/update-preview-tokens.ts +++ b/packages/cli/src/scripts/update-preview-tokens.ts @@ -2,7 +2,6 @@ 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'; @@ -37,11 +36,11 @@ const toPreviewToken = (tokens: { token: TransformedToken; formatted: string }[] type PreviewToken = { variable: string; value: string }; -export const formatTheme = async (themeConfig: Theme, typographySize?: TypographySizeSchema) => { - const { tokenSets } = await createTokens(themeConfig, typographySize); +export const formatTheme = async (themeConfig: Theme) => { + const { tokenSets, themeDimensions } = await createTokens(themeConfig); const outDir = '../../apps/www/app/_components/tokens/design-tokens'; - const $themes = await generate$Themes(['dark', 'light'], [themeConfig.name], themeConfig.colors); + const $themes = await generate$Themes(themeDimensions, [themeConfig.name], themeConfig.colors); const processed$themes = $themes.map(processThemeObject); // We run this to populate the `buildOptions.buildTokenFormats` with transformed tokens diff --git a/packages/cli/src/tokens/create.ts b/packages/cli/src/tokens/create.ts index ff43eb0454..83634dac85 100644 --- a/packages/cli/src/tokens/create.ts +++ b/packages/cli/src/tokens/create.ts @@ -1,11 +1,11 @@ import type { ColorScheme } from '../colors/types.js'; -import type { TypographySizeSchema } from '../config.js'; -import { getDefaultToken, getDefaultTokens } from './create/defaults.js'; +import { getDefaultTokens } from './create/defaults.js'; import { generateColorScheme } from './create/generators/color.js'; +import { generateFont } from './create/generators/font.js'; +import { generateFontSizeGlobal, generateFontSizeMode } from './create/generators/fontSize.js'; import { generateSemantic } from './create/generators/semantic.js'; +import { generateSemanticStyle } from './create/generators/semanticStyle.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'; @@ -26,9 +26,25 @@ export const cliOptions = { }, } as const; -export const createTokens = async (theme: Theme, typographySize: TypographySizeSchema | undefined) => { +export const createTokens = async (theme: Theme) => { const { colors, typography, name, borderRadius, overrides } = theme; const colorSchemes: ColorScheme[] = ['light', 'dark']; + const sizeModes: ('small' | 'medium' | 'large')[] = ['small', 'medium', 'large']; + + // TODO handle default font definition somewhere else + const fontDefinitions = typography.fonts ?? { + primary: { + // Use deprecated typography.fontFamily as fallback if no typography.fonts is defined + fontFamily: typography.fontFamily ?? 'Inter', + fontWeight: { + regular: 'Regular', + medium: 'Medium', + semibold: 'Semi bold', + }, + }, + }; + + const fontNames = Object.keys(fontDefinitions); const semantic = generateSemantic(colors, name); @@ -36,27 +52,35 @@ export const createTokens = async (theme: Theme, typographySize: TypographySizeS ...getDefaultTokens([ 'primitives/globals', 'primitives/modes/size/global', - 'primitives/modes/size/small', - 'primitives/modes/size/medium', - 'primitives/modes/size/large', - 'primitives/modes/typography/size/global', + ...sizeModes.map((size) => `primitives/modes/size/${size}`), + ]), + ...fontNames.map((font): [string, TokenSet] => [ + `primitives/modes/fonts/${font}/size/global/${name}`, + generateFontSizeGlobal(name, font), + ]), + ...fontNames.flatMap((font): [string, TokenSet][] => + sizeModes.map((size) => [ + `primitives/modes/fonts/${font}/size/${size}/${name}`, + generateFontSizeMode(size, name, font, typography.fonts?.[font]?.size), + ]), + ), + ...colorSchemes.map((scheme): [string, TokenSet] => [ + `primitives/modes/color-scheme/${scheme}/${name}`, + generateColorScheme(name, scheme, colors, overrides), ]), - ['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][] => [ - [`primitives/modes/color-scheme/${scheme}/${name}`, generateColorScheme(name, scheme, colors, overrides)], + ...fontNames.map((font): [string, TokenSet] => [ + `primitives/fonts/${font}/${name}`, + generateFont(name, font, fontDefinitions[font]), ]), - [`themes/${name}`, generateTheme(colors, name, borderRadius)], + // TODO: Take font-mapping config (heading -> typography.secondary) etc + [`themes/${name}`, generateTheme(colors, name, fontNames, borderRadius, typography)], ['semantic/color', semantic.color], // maps out semantic modes, ieg 'semantic/modes/main-color/accent', and 'semantic/modes/support-color/brand1' ...Object.entries(semantic.modes).flatMap(([mode, colors]): [string, TokenSet][] => Object.entries(colors).map(([key, colorSet]): [string, TokenSet] => [`semantic/modes/${mode}/${key}`, colorSet]), ), - getDefaultToken('semantic/style'), + [`semantic/style`, generateSemanticStyle()], ]); - return { tokenSets }; + return { tokenSets, themeDimensions: { colorSchemes, fontNames, sizeModes } }; }; diff --git a/packages/cli/src/tokens/create/defaults.ts b/packages/cli/src/tokens/create/defaults.ts index 098124d46e..b2dd80f994 100644 --- a/packages/cli/src/tokens/create/defaults.ts +++ b/packages/cli/src/tokens/create/defaults.ts @@ -1,13 +1,9 @@ import * as R from 'ramda'; -import globals from '../template/design-tokens/primitives/globals.json' with { type: 'json' }; +import globals from '../template/design-tokens/primitives/globals.json.js'; import sizeGlobal from '../template/design-tokens/primitives/modes/size/global.json' with { type: 'json' }; import sizeLarge from '../template/design-tokens/primitives/modes/size/large.json' with { type: 'json' }; import sizeMedium from '../template/design-tokens/primitives/modes/size/medium.json' with { type: 'json' }; import sizeSmall from '../template/design-tokens/primitives/modes/size/small.json' with { type: 'json' }; -import typgraphyGlobal from '../template/design-tokens/primitives/modes/typography/size/global.json' with { - type: 'json', -}; -import semanticStyle from '../template/design-tokens/semantic/style.json' with { type: 'json' }; import type { TokenSet } from '../types.js'; const defaultTokens: Record = { @@ -16,8 +12,6 @@ const defaultTokens: Record = { 'primitives/modes/size/small': sizeSmall, 'primitives/modes/size/medium': sizeMedium, 'primitives/modes/size/large': sizeLarge, - 'primitives/modes/typography/size/global': typgraphyGlobal, - 'semantic/style': semanticStyle as unknown as TokenSet, }; type DefaultToken = keyof typeof defaultTokens; diff --git a/packages/cli/src/tokens/create/generators/$metadata.ts b/packages/cli/src/tokens/create/generators/$metadata.ts index fcac339256..b4d139d798 100644 --- a/packages/cli/src/tokens/create/generators/$metadata.ts +++ b/packages/cli/src/tokens/create/generators/$metadata.ts @@ -1,25 +1,25 @@ -import type { ColorScheme } from '../../../colors/types.js'; -import type { Colors } from '../../types.js'; +import type { Colors, TokenSetDimensions } from '../../types.js'; type Metadata = { tokenSetOrder: string[]; }; -export function generate$Metadata(schemes: ColorScheme[], themes: string[], colors: Colors): Metadata { +export function generate$Metadata(dimensions: TokenSetDimensions, themes: string[], colors: Colors): Metadata { + const { colorSchemes, sizeModes, fontNames } = dimensions; + const sizesAndGlobal = ['global', ...sizeModes]; return { tokenSetOrder: [ 'primitives/globals', - 'primitives/modes/size/global', - 'primitives/modes/size/small', - 'primitives/modes/size/medium', - 'primitives/modes/size/large', - 'primitives/modes/typography/size/global', - 'primitives/modes/typography/size/small', - 'primitives/modes/typography/size/medium', - 'primitives/modes/typography/size/large', - ...themes.map((theme) => `primitives/modes/typography/primary/${theme}`), - ...themes.map((theme) => `primitives/modes/typography/secondary/${theme}`), - ...schemes.flatMap((scheme) => [...themes.map((theme) => `primitives/modes/color-scheme/${scheme}/${theme}`)]), + ...sizesAndGlobal.map((size) => `primitives/modes/size/${size}`), + ...themes.flatMap((theme) => + fontNames.flatMap((font) => + sizesAndGlobal.map((size) => `primitives/modes/fonts/${font}/size/${size}/${theme}`), + ), + ), + ...themes.flatMap((theme) => fontNames.map((font) => `primitives/fonts/${font}/${theme}`)), + ...colorSchemes.flatMap((scheme) => [ + ...themes.map((theme) => `primitives/modes/color-scheme/${scheme}/${theme}`), + ]), ...themes.map((theme) => `themes/${theme}`), 'semantic/color', ...Object.entries(colors.main).map(([color]) => `semantic/modes/main-color/${color}`), diff --git a/packages/cli/src/tokens/create/generators/$themes.ts b/packages/cli/src/tokens/create/generators/$themes.ts index e5525b004a..531321a818 100644 --- a/packages/cli/src/tokens/create/generators/$themes.ts +++ b/packages/cli/src/tokens/create/generators/$themes.ts @@ -1,7 +1,7 @@ import { type ThemeObject, TokenSetStatus } from '@tokens-studio/types'; import type { ColorScheme } from '../../../colors/types.js'; -import type { Colors } from '../../types.js'; +import type { Colors, TokenSetDimensions } from '../../types.js'; const capitalize = (word: string) => word.charAt(0).toUpperCase() + word.slice(1); @@ -21,14 +21,14 @@ type ThemeObject_ = ThemeObject & { }; export async function generate$Themes( - colorSchemes: ColorSchemes, + tokenSetDimensions: TokenSetDimensions, themes: string[], colors: Colors, ): Promise { + const { colorSchemes, fontNames, sizeModes } = tokenSetDimensions; return [ - ...generateSizeGroup(), - ...(await generateThemesGroup(themes)), - ...generateTypographyGroup(themes), + ...generateSizeGroup(themes, fontNames, sizeModes), + ...(await generateThemesGroup(themes, fontNames)), ...generateColorSchemesGroup(colorSchemes, themes), generateSemanticGroup(), ...(await generateColorGroup('main', colors)), @@ -36,51 +36,54 @@ export async function generate$Themes( ]; } -function generateSizeGroup(): ThemeObject_[] { - return [ - { +type SizeModes = TokenSetDimensions['sizeModes']; + +function generateSizeGroup(themes: string[], fontNames: string[], sizeModes: SizeModes): ThemeObject_[] { + const defaultSize = 'medium'; + const sizesWithDefaultFirst = [ + ...sizeModes.filter((x) => x === defaultSize), + ...sizeModes.filter((x) => x !== defaultSize), + ]; + const existingFigmaIds = { + small: { id: '8b2c8cc86611a34b135cb22948666779361fd729', - name: 'medium', - $figmaStyleReferences: {}, - selectedTokenSets: { - 'primitives/modes/size/medium': TokenSetStatus.SOURCE, - 'primitives/modes/size/global': TokenSetStatus.ENABLED, - 'primitives/modes/typography/size/global': TokenSetStatus.ENABLED, - 'primitives/modes/typography/size/medium': TokenSetStatus.ENABLED, - }, + $figmaCollectionId: 'VariableCollectionId:36248:20757', + $figmaModeId: '41630:3', + }, + medium: { + id: 'fb11567729c298ca37c9da4e3a27716a23480824', $figmaCollectionId: 'VariableCollectionId:36248:20757', $figmaModeId: '41630:1', - group: 'Size', }, - { + large: { id: 'd49b9eebeb48a4f165a74b7261733d0a73370f0e', - name: 'large', - $figmaStyleReferences: {}, - selectedTokenSets: { - 'primitives/modes/size/large': TokenSetStatus.SOURCE, - 'primitives/modes/size/global': TokenSetStatus.ENABLED, - 'primitives/modes/typography/size/global': TokenSetStatus.ENABLED, - 'primitives/modes/typography/size/large': TokenSetStatus.ENABLED, - }, $figmaCollectionId: 'VariableCollectionId:36248:20757', $figmaModeId: '41630:2', - group: 'Size', }, - { - id: 'fb11567729c298ca37c9da4e3a27716a23480824', - name: 'small', - $figmaStyleReferences: {}, - selectedTokenSets: { - 'primitives/modes/size/small': TokenSetStatus.SOURCE, - 'primitives/modes/size/global': TokenSetStatus.ENABLED, - 'primitives/modes/typography/size/global': TokenSetStatus.ENABLED, - 'primitives/modes/typography/size/small': TokenSetStatus.ENABLED, - }, - $figmaCollectionId: 'VariableCollectionId:36248:20757', - $figmaModeId: '41630:3', - group: 'Size', + }; + return sizesWithDefaultFirst.map((size) => ({ + name: size, + group: 'Size', + selectedTokenSets: { + [`primitives/modes/size/${size}`]: TokenSetStatus.SOURCE, + 'primitives/modes/size/global': TokenSetStatus.ENABLED, + ...fontNames + .flatMap((font) => + themes.map((theme) => ({ + [`primitives/modes/fonts/${font}/size/global/${theme}`]: TokenSetStatus.ENABLED, + [`primitives/modes/fonts/${font}/size/${size}/${theme}`]: TokenSetStatus.ENABLED, + })), + ) + .reduce((prev, curr) => { + Object.entries(curr).forEach(([key, val]) => { + prev[key] = val; + }); + return prev; + }), }, - ]; + ...existingFigmaIds[size], + $figmaStyleReferences: {}, + })); } const colorSchemeDefaults: Record = { @@ -119,7 +122,13 @@ function generateColorSchemesGroup(colorSchemes: ColorSchemes, themes: string[]) ); } -async function generateThemesGroup(themes: string[]): Promise { +async function generateThemesGroup(themes: string[], fonts: string[]): Promise { + const fontSets = Object.fromEntries( + themes.flatMap((theme) => + fonts.map((font) => [`primitives/fonts/${font}/${theme}`, TokenSetStatus.ENABLED] as const), + ), + ); + return Promise.all( themes.map( async (theme, index): Promise => ({ @@ -128,6 +137,7 @@ async function generateThemesGroup(themes: string[]): Promise { $figmaModeId: `40960:${index + 6}`, // Start on 6 in Token Studio and Community file for some reason name: theme, selectedTokenSets: { + ...fontSets, [`themes/${theme}`]: TokenSetStatus.ENABLED, }, group: 'Theme', @@ -165,28 +175,3 @@ async function generateColorGroup(group: 'main' | 'support', colors: Colors): Pr ), ); } - -function generateTypographyGroup(themes: string[]): ThemeObject_[] { - return [ - { - id: '368d753fcac4455f289500eaa42e70dc0a03522f', - $figmaCollectionId: 'VariableCollectionId:36248:20769', - $figmaModeId: '36248:2', - name: 'Primary', - selectedTokenSets: Object.fromEntries( - themes.map((theme) => [`primitives/modes/typography/primary/${theme}`, TokenSetStatus.ENABLED]), - ), - group: 'Typography', - }, - { - id: '264b8bd1d40b364e1ea3acf09e49795ddd4c513c', - $figmaCollectionId: 'VariableCollectionId:36248:20769', - $figmaModeId: '36248:3', - name: 'Secondary', - selectedTokenSets: Object.fromEntries( - themes.map((theme) => [`primitives/modes/typography/secondary/${theme}`, TokenSetStatus.ENABLED]), - ), - group: 'Typography', - }, - ]; -} diff --git a/packages/cli/src/tokens/create/generators/font.ts b/packages/cli/src/tokens/create/generators/font.ts new file mode 100644 index 0000000000..dd782cd45b --- /dev/null +++ b/packages/cli/src/tokens/create/generators/font.ts @@ -0,0 +1,84 @@ +import type { TypographyFontSchema } from '../../../config.js'; + +import type { TokenSet } from '../../types.js'; + +export const generateFont = (themeName: string, fontName: string, fontDefinition: TypographyFontSchema): TokenSet => { + return { + [themeName]: { + fonts: { + [fontName]: { + 'font-family': { + $type: 'fontFamilies', + $value: fontDefinition.fontFamily, + }, + 'font-weight': { + medium: { + $type: 'fontWeights', + $value: fontDefinition.fontWeight.medium, + }, + semibold: { + $type: 'fontWeights', + $value: fontDefinition.fontWeight.semibold, + }, + regular: { + $type: 'fontWeights', + $value: fontDefinition.fontWeight.regular, + }, + }, + 'line-height': { + sm: { + $type: 'lineHeights', + $value: '130%', + }, + md: { + $type: 'lineHeights', + $value: '150%', + }, + lg: { + $type: 'lineHeights', + $value: '170%', + }, + }, + '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%', + }, + }, + }, + }, + }, + } satisfies TokenSet; +}; diff --git a/packages/cli/src/tokens/create/generators/fontSize.ts b/packages/cli/src/tokens/create/generators/fontSize.ts new file mode 100644 index 0000000000..e88e8ba4d5 --- /dev/null +++ b/packages/cli/src/tokens/create/generators/fontSize.ts @@ -0,0 +1,120 @@ +import * as R from 'ramda'; +import type { TypographySizeSchema } from '../../../config.js'; +import type { Token } from '../../types.js'; + +const defaults = { + small: { + base: 16, + ratio: 1.14234, + }, + medium: { + base: 18, + ratio: 1.143136, + }, + large: { + base: 21, + ratio: 1.143136, + }, +}; + +export function generateFontSizeGlobal(themeName: string, fontName: string) { + return { + [themeName]: { + fonts: { + [fontName]: { + 'font-size': { + '1': { + $type: 'fontSizes', + $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} / pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 3), 0)`, + }, + '2': { + $type: 'fontSizes', + $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} / pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 2), 0)`, + }, + '3': { + $type: 'fontSizes', + $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} / pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 1), 0)`, + }, + '4': { + $type: 'fontSizes', + $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 0), 0)`, + }, + '5': { + $type: 'fontSizes', + $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 1), 0)`, + }, + '6': { + $type: 'fontSizes', + $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 2), 0)`, + }, + '6-half': { + $type: 'fontSizes', + $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 3), 0)`, + }, + '7': { + $type: 'fontSizes', + $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 4), 0)`, + }, + '8': { + $type: 'fontSizes', + $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 5), 0)`, + }, + '8-half': { + $type: 'fontSizes', + $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 6), 0)`, + }, + '9': { + $type: 'fontSizes', + $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 7), 0)`, + }, + '9-half': { + $type: 'fontSizes', + $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 8), 0)`, + }, + '10': { + $type: 'fontSizes', + $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 9), 0)`, + }, + }, + }, + }, + }, + }; +} + +export function generateFontSizeMode( + size: 'small' | 'medium' | 'large', + themeName: string, + fontName: string, + config?: TypographySizeSchema, +) { + const sizeConfig = config?.[size]; + return { + [themeName]: { + fonts: { + [fontName]: { + 'font-scale': { + _base: { + $type: 'number', + $value: `${sizeConfig?.base ?? defaults[size].base}`, + } satisfies Token, + _ratio: { + $type: 'number', + $value: `${sizeConfig?.ratio ?? defaults[size].ratio}`, + } satisfies Token, + }, + ...(sizeConfig?.overrides && { + 'font-size': R.map( + (fontSizeInPx) => + ({ + $type: 'fontSizes', + $value: `${fontSizeInPx}px`, + }) satisfies Token, + sizeConfig.overrides, + ), + }), + }, + }, + }, + }; +} diff --git a/packages/cli/src/tokens/create/generators/semanticStyle.ts b/packages/cli/src/tokens/create/generators/semanticStyle.ts new file mode 100644 index 0000000000..3f987d7e46 --- /dev/null +++ b/packages/cli/src/tokens/create/generators/semanticStyle.ts @@ -0,0 +1,192 @@ +import type { Token, TokenSet } from '../../types.js'; + +export function generateSemanticStyle() { + return { + typography: generateTypography(), + opacity: { + disabled: { + $type: 'opacity', + $value: '{opacity.30}', + }, + }, + 'border-width': { + default: { + $type: 'borderWidth', + $value: '{border-width.1}', + }, + focus: { + $type: 'borderWidth', + $value: '{border-width.3}', + }, + }, + shadow: { + xs: { + $type: 'boxShadow', + $value: '{shadow.100}', + }, + sm: { + $type: 'boxShadow', + $value: '{shadow.200}', + }, + md: { + $type: 'boxShadow', + $value: '{shadow.300}', + }, + lg: { + $type: 'boxShadow', + $value: '{shadow.400}', + }, + xl: { + $type: 'boxShadow', + $value: '{shadow.500}', + }, + }, + 'border-radius': { + sm: { + $type: 'dimension', + $value: '{border-radius.1}', + }, + md: { + $type: 'dimension', + $value: '{border-radius.2}', + }, + lg: { + $type: 'dimension', + $value: '{border-radius.3}', + }, + xl: { + $type: 'dimension', + $value: '{border-radius.4}', + }, + default: { + $type: 'dimension', + $value: '{border-radius.5}', + }, + full: { + $type: 'dimension', + $value: '{border-radius.6}', + }, + }, + size: { + '0': { + $type: 'dimension', + $value: '{_size.0}', + }, + '1': { + $type: 'dimension', + $value: '{_size.1}', + }, + '2': { + $type: 'dimension', + $value: '{_size.2}', + }, + '3': { + $type: 'dimension', + $value: '{_size.3}', + }, + '4': { + $type: 'dimension', + $value: '{_size.4}', + }, + '5': { + $type: 'dimension', + $value: '{_size.5}', + }, + '6': { + $type: 'dimension', + $value: '{_size.6}', + }, + '7': { + $type: 'dimension', + $value: '{_size.7}', + }, + '8': { + $type: 'dimension', + $value: '{_size.8}', + }, + '9': { + $type: 'dimension', + $value: '{_size.9}', + }, + '10': { + $type: 'dimension', + $value: '{_size.10}', + }, + '11': { + $type: 'dimension', + $value: '{_size.11}', + }, + '12': { + $type: 'dimension', + $value: '{_size.12}', + }, + '13': { + $type: 'dimension', + $value: '{_size.13}', + }, + '14': { + $type: 'dimension', + $value: '{_size.14}', + }, + '15': { + $type: 'dimension', + $value: '{_size.15}', + }, + '18': { + $type: 'dimension', + $value: '{_size.18}', + }, + '22': { + $type: 'dimension', + $value: '{_size.22}', + }, + '26': { + $type: 'dimension', + $value: '{_size.26}', + }, + '30': { + $type: 'dimension', + $value: '{_size.30}', + }, + }, + } satisfies TokenSet; +} + +function generateSingleTypographyToken(component: 'heading' | 'body', size: string, variant?: 'short' | 'long'): Token { + const prefix = `typography-mapping.${component}${variant ? `.${variant}` : ''}.${size}`; + return { + $type: 'typography', + $value: { + fontFamily: `{${prefix}.font-family}`, + fontWeight: `{${prefix}.font-weight}`, + lineHeight: `{${prefix}.line-height}`, + fontSize: `{${prefix}.font-size}`, + letterSpacing: `{${prefix}.letter-spacing}`, + }, + }; +} + +function generateTypography() { + const headingSizes = ['2xl', 'xl', 'lg', 'md', 'sm', 'xs', '2xs']; + const heading = Object.fromEntries( + headingSizes.map((size) => [size, generateSingleTypographyToken('heading', size)] as const), + ); + const bodySizes = ['xl', 'lg', 'md', 'sm', 'xs']; + const body = Object.fromEntries( + bodySizes.map((size) => [size, generateSingleTypographyToken('body', size)] as const), + ); + const bodyShort = Object.fromEntries( + bodySizes.map((size) => [size, generateSingleTypographyToken('body', size, 'short')] as const), + ); + const bodyLong = Object.fromEntries( + bodySizes.map((size) => [size, generateSingleTypographyToken('body', size, 'long')] as const), + ); + return { + heading, + body: { + ...body, + short: bodyShort, + long: bodyLong, + }, + }; +} diff --git a/packages/cli/src/tokens/create/generators/theme.ts b/packages/cli/src/tokens/create/generators/theme.ts index fa2531215e..9be6a40248 100644 --- a/packages/cli/src/tokens/create/generators/theme.ts +++ b/packages/cli/src/tokens/create/generators/theme.ts @@ -2,10 +2,137 @@ import * as R from 'ramda'; import { baseColorNames } from '../../../colors/colorMetadata.js'; import themeBase from '../../template/design-tokens/themes/theme.base.template.json' with { type: 'json' }; import themeColorTemplate from '../../template/design-tokens/themes/theme.template.json' with { type: 'json' }; +import type { Colors, TokenSet, Typography } from '../../types.js'; -import type { Colors, TokenSet } from '../../types.js'; +function generateFonts(theme: string, fonts: string[]): TokenSet { + return Object.fromEntries( + fonts.map((font) => [ + font, + { + 'font-family': { + $type: 'fontFamilies', + $value: `{${theme}.fonts.${font}.font-family}`, + }, + 'font-weight': { + medium: { + $type: 'fontWeights', + $value: `{${theme}.fonts.${font}.font-weight.medium}`, + }, + semibold: { + $type: 'fontWeights', + $value: `{${theme}.fonts.${font}.font-weight.semibold}`, + }, + regular: { + $type: 'fontWeights', + $value: `{${theme}.fonts.${font}.font-weight.regular}`, + }, + }, + 'font-size': { + '1': { + $type: 'fontSizes', + $value: `{${theme}.fonts.${font}.font-size.1}`, + }, + '2': { + $type: 'fontSizes', + $value: `{${theme}.fonts.${font}.font-size.2}`, + }, + '3': { + $type: 'fontSizes', + $value: `{${theme}.fonts.${font}.font-size.3}`, + }, + '4': { + $type: 'fontSizes', + $value: `{${theme}.fonts.${font}.font-size.4}`, + }, + '5': { + $type: 'fontSizes', + $value: `{${theme}.fonts.${font}.font-size.5}`, + }, + '6': { + $type: 'fontSizes', + $value: `{${theme}.fonts.${font}.font-size.6}`, + }, + '7': { + $type: 'fontSizes', + $value: `{${theme}.fonts.${font}.font-size.7}`, + }, + '8': { + $type: 'fontSizes', + $value: `{${theme}.fonts.${font}.font-size.8}`, + }, + '9': { + $type: 'fontSizes', + $value: `{${theme}.fonts.${font}.font-size.9}`, + }, + '10': { + $type: 'fontSizes', + $value: `{${theme}.fonts.${font}.font-size.10}`, + }, + }, + 'line-height': { + sm: { + $type: 'lineHeights', + $value: `{${theme}.fonts.${font}.line-height.sm}`, + }, + md: { + $type: 'lineHeights', + $value: `{${theme}.fonts.${font}.line-height.md}`, + }, + lg: { + $type: 'lineHeights', + $value: `{${theme}.fonts.${font}.line-height.lg}`, + }, + }, + 'letter-spacing': { + '1': { + $type: 'letterSpacing', + $value: `{${theme}.fonts.${font}.letter-spacing.1}`, + }, + '2': { + $type: 'letterSpacing', + $value: `{${theme}.fonts.${font}.letter-spacing.2}`, + }, + '3': { + $type: 'letterSpacing', + $value: `{${theme}.fonts.${font}.letter-spacing.3}`, + }, + '4': { + $type: 'letterSpacing', + $value: `{${theme}.fonts.${font}.letter-spacing.4}`, + }, + '5': { + $type: 'letterSpacing', + $value: `{${theme}.fonts.${font}.letter-spacing.5}`, + }, + '6': { + $type: 'letterSpacing', + $value: `{${theme}.fonts.${font}.letter-spacing.6}`, + }, + '7': { + $type: 'letterSpacing', + $value: `{${theme}.fonts.${font}.letter-spacing.7}`, + }, + '8': { + $type: 'letterSpacing', + $value: `{${theme}.fonts.${font}.letter-spacing.8}`, + }, + '9': { + $type: 'letterSpacing', + $value: `{${theme}.fonts.${font}.letter-spacing.9}`, + }, + }, + }, + ]), + ); +} -export const generateTheme = (colors: Colors, themeName: string, borderRadius: number) => { +export const generateTheme = ( + colors: Colors, + themeName: string, + fontNames: string[], + borderRadius: number, + typography: Typography, +) => { const mainColorNames = Object.keys(colors.main); const supportColorNames = Object.keys(colors.support); const customColors = [...mainColorNames, 'neutral', ...supportColorNames, ...baseColorNames]; @@ -42,6 +169,10 @@ export const generateTheme = (colors: Colors, themeName: string, borderRadius: n }, }, }, + fonts: generateFonts(themeName, fontNames), + // The mapping from typography to fonts can't be in the typography tokens themself due + // to how Figma generates typography styles. Therefore we have this extra layer. + 'typography-mapping': generateThemeTypography(typography), ...remainingThemeFile, }; @@ -51,8 +182,8 @@ export const generateTheme = (colors: Colors, themeName: string, borderRadius: n JSON.stringify( updatedThemeFile, (key, value) => { - if (key === '$value') { - return (value as string).replace('', themeName); + if (key === '$value' && typeof value === 'string') { + return value.replace('', themeName); } return value; @@ -63,3 +194,504 @@ export const generateTheme = (colors: Colors, themeName: string, borderRadius: n return token; }; + +function generateThemeTypography(typography: Typography) { + // TODO handle fallback font somewhere else? + const defaultFont = Object.keys(typography.fonts ?? []).at(0) ?? 'primary'; + const headingFont = typography.components?.heading?.font ?? defaultFont; + const bodyFont = typography.components?.body?.font ?? defaultFont; + return { + heading: { + '2xl': { + 'font-family': { + $type: 'fontFamilies', + $value: `{fonts.${headingFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{fonts.${headingFont}.font-weight.medium}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{fonts.${headingFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{fonts.${headingFont}.font-size.10}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{fonts.${headingFont}.letter-spacing.1}`, + }, + }, + xl: { + 'font-family': { + $type: 'fontFamilies', + $value: `{fonts.${headingFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{fonts.${headingFont}.font-weight.medium}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{fonts.${headingFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{fonts.${headingFont}.font-size.9}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{fonts.${headingFont}.letter-spacing.1}`, + }, + }, + lg: { + 'font-family': { + $type: 'fontFamilies', + $value: `{fonts.${headingFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{fonts.${headingFont}.font-weight.medium}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{fonts.${headingFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{fonts.${headingFont}.font-size.8}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{fonts.${headingFont}.letter-spacing.2}`, + }, + }, + md: { + 'font-family': { + $type: 'fontFamilies', + $value: `{fonts.${headingFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{fonts.${headingFont}.font-weight.medium}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{fonts.${headingFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{fonts.${headingFont}.font-size.7}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{fonts.${headingFont}.letter-spacing.3}`, + }, + }, + sm: { + 'font-family': { + $type: 'fontFamilies', + $value: `{fonts.${headingFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{fonts.${headingFont}.font-weight.medium}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{fonts.${headingFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{fonts.${headingFont}.font-size.6}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{fonts.${headingFont}.letter-spacing.5}`, + }, + }, + xs: { + 'font-family': { + $type: 'fontFamilies', + $value: `{fonts.${headingFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{fonts.${headingFont}.font-weight.medium}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{fonts.${headingFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{fonts.${headingFont}.font-size.5}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{fonts.${headingFont}.letter-spacing.6}`, + }, + }, + '2xs': { + 'font-family': { + $type: 'fontFamilies', + $value: `{fonts.${headingFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{fonts.${headingFont}.font-weight.medium}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{fonts.${headingFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{fonts.${headingFont}.font-size.4}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{fonts.${headingFont}.letter-spacing.6}`, + }, + }, + }, + body: { + xl: { + 'font-family': { + $type: 'fontFamilies', + $value: `{fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{fonts.${bodyFont}.line-height.md}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{fonts.${bodyFont}.font-size.6}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{fonts.${bodyFont}.letter-spacing.8}`, + }, + }, + lg: { + 'font-family': { + $type: 'fontFamilies', + $value: `{fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{fonts.${bodyFont}.line-height.md}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{fonts.${bodyFont}.font-size.5}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{fonts.${bodyFont}.letter-spacing.8}`, + }, + }, + md: { + 'font-family': { + $type: 'fontFamilies', + $value: `{fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{fonts.${bodyFont}.line-height.md}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{fonts.${bodyFont}.font-size.4}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{fonts.${bodyFont}.letter-spacing.8}`, + }, + }, + sm: { + 'font-family': { + $type: 'fontFamilies', + $value: `{fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{fonts.${bodyFont}.line-height.md}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{fonts.${bodyFont}.font-size.3}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{fonts.${bodyFont}.letter-spacing.7}`, + }, + }, + xs: { + 'font-family': { + $type: 'fontFamilies', + $value: `{fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{fonts.${bodyFont}.line-height.md}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{fonts.${bodyFont}.font-size.2}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{fonts.${bodyFont}.letter-spacing.6}`, + }, + }, + short: { + xl: { + 'font-family': { + $type: 'fontFamilies', + $value: `{fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{fonts.${bodyFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{fonts.${bodyFont}.font-size.6}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{fonts.${bodyFont}.letter-spacing.8}`, + }, + }, + lg: { + 'font-family': { + $type: 'fontFamilies', + $value: `{fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{fonts.${bodyFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{fonts.${bodyFont}.font-size.5}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{fonts.${bodyFont}.letter-spacing.8}`, + }, + }, + md: { + 'font-family': { + $type: 'fontFamilies', + $value: `{fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{fonts.${bodyFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{fonts.${bodyFont}.font-size.4}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{fonts.${bodyFont}.letter-spacing.8}`, + }, + }, + sm: { + 'font-family': { + $type: 'fontFamilies', + $value: `{fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{fonts.${bodyFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{fonts.${bodyFont}.font-size.3}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{fonts.${bodyFont}.letter-spacing.7}`, + }, + }, + xs: { + 'font-family': { + $type: 'fontFamilies', + $value: `{fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{fonts.${bodyFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{fonts.${bodyFont}.font-size.2}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{fonts.${bodyFont}.letter-spacing.6}`, + }, + }, + }, + long: { + xl: { + 'font-family': { + $type: 'fontFamilies', + $value: `{fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{fonts.${bodyFont}.line-height.lg}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{fonts.${bodyFont}.font-size.6}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{fonts.${bodyFont}.letter-spacing.8}`, + }, + }, + lg: { + 'font-family': { + $type: 'fontFamilies', + $value: `{fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{fonts.${bodyFont}.line-height.lg}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{fonts.${bodyFont}.font-size.5}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{fonts.${bodyFont}.letter-spacing.8}`, + }, + }, + md: { + 'font-family': { + $type: 'fontFamilies', + $value: `{fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{fonts.${bodyFont}.line-height.lg}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{fonts.${bodyFont}.font-size.4}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{fonts.${bodyFont}.letter-spacing.8}`, + }, + }, + sm: { + 'font-family': { + $type: 'fontFamilies', + $value: `{fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{fonts.${bodyFont}.line-height.lg}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{fonts.${bodyFont}.font-size.3}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{fonts.${bodyFont}.letter-spacing.7}`, + }, + }, + xs: { + 'font-family': { + $type: 'fontFamilies', + $value: `{fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{fonts.${bodyFont}.line-height.lg}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{fonts.${bodyFont}.font-size.2}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{fonts.${bodyFont}.letter-spacing.6}`, + }, + }, + }, + }, + }; +} diff --git a/packages/cli/src/tokens/create/generators/typography.ts b/packages/cli/src/tokens/create/generators/typography.ts deleted file mode 100644 index 5d8eb81968..0000000000 --- a/packages/cli/src/tokens/create/generators/typography.ts +++ /dev/null @@ -1,13 +0,0 @@ -import typographyTemplate from '../../template/design-tokens/primitives/modes/typography/typography.template.json' with { - type: 'json', -}; - -import type { TokenSet, Typography } from '../../types.js'; - -export const generateTypography = (themeName: string, { fontFamily }: Typography): TokenSet => { - return JSON.parse( - JSON.stringify(typographyTemplate) - .replaceAll(//g, fontFamily) - .replaceAll(//g, themeName), - ) as TokenSet; -}; diff --git a/packages/cli/src/tokens/create/generators/typographySize.ts b/packages/cli/src/tokens/create/generators/typographySize.ts deleted file mode 100644 index 71a8adf09c..0000000000 --- a/packages/cli/src/tokens/create/generators/typographySize.ts +++ /dev/null @@ -1,44 +0,0 @@ -import * as R from 'ramda'; -import type { TypographySizeSchema } from '../../../config.js'; -import type { Token } from '../../types.js'; - -const defaults = { - small: { - base: 16, - ratio: 1.14234, - }, - medium: { - base: 18, - ratio: 1.143136, - }, - large: { - base: 21, - ratio: 1.143136, - }, -}; - -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/create/write.ts b/packages/cli/src/tokens/create/write.ts index b536b42cee..9a339a0932 100644 --- a/packages/cli/src/tokens/create/write.ts +++ b/packages/cli/src/tokens/create/write.ts @@ -3,7 +3,7 @@ import type { ThemeObject } from '@tokens-studio/types'; import pc from 'picocolors'; import * as R from 'ramda'; import { mkdir, readFile, writeFile } from '../../utils.js'; -import type { Theme, TokenSets } from '../types.js'; +import type { Theme, TokenSetDimensions, TokenSets } from '../types.js'; import { generate$Designsystemet } from './generators/$designsystemet.js'; import { generate$Metadata } from './generators/$metadata.js'; import { generate$Themes } from './generators/$themes.js'; @@ -13,6 +13,7 @@ export const stringify = (data: unknown) => JSON.stringify(data, null, 2); type WriteTokensOptions = { outDir: string; theme: Theme; + tokenSetDimensions: TokenSetDimensions; /** Dry run, no files will be written */ dry?: boolean; tokenSets: TokenSets; @@ -23,6 +24,7 @@ export const writeTokens = async (options: WriteTokensOptions) => { outDir, tokenSets, theme: { name: themeName, colors }, + tokenSetDimensions, dry, } = options; const targetDir = path.resolve(process.cwd(), String(outDir)); @@ -54,8 +56,8 @@ export const writeTokens = async (options: WriteTokensOptions) => { console.log(`\nThemes: ${pc.blue(themes.join(', '))}`); // Create metadata and themes json for Token Studio and build script - const $themes = await generate$Themes(['dark', 'light'], themes, colors); - const $metadata = generate$Metadata(['dark', 'light'], themes, colors); + const $themes = await generate$Themes(tokenSetDimensions, themes, colors); + const $metadata = generate$Metadata(tokenSetDimensions, themes, colors); const $designsystemet = generate$Designsystemet(); await writeFile($themesPath, stringify($themes), dry); diff --git a/packages/cli/src/tokens/format.ts b/packages/cli/src/tokens/format.ts index d1b75add0e..744e0e2206 100644 --- a/packages/cli/src/tokens/format.ts +++ b/packages/cli/src/tokens/format.ts @@ -1,6 +1,4 @@ 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'; @@ -18,10 +16,10 @@ export const formatTokens = async (options: Omit { - const { tokenSets } = await createTokens(themeConfig, typographySize); +export const formatTheme = async (themeConfig: Theme) => { + const { tokenSets, themeDimensions } = await createTokens(themeConfig); - const $themes = await generate$Themes(['dark', 'light'], [themeConfig.name], themeConfig.colors); + const $themes = await generate$Themes(themeDimensions, [themeConfig.name], themeConfig.colors); const processed$themes = $themes.map(processThemeObject); const processedBuilds = await formatTokens({ @@ -42,8 +40,8 @@ export const formatTheme = async (themeConfig: Theme, typographySize: Typography * @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, globalTypography?: ConfigSchema['globalTypography']) => { - const processedBuilds = await formatTheme(themeConfig, globalTypography?.size); +export const formatThemeCSS = async (themeConfig: Theme) => { + const processedBuilds = await formatTheme(themeConfig); 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 ccb3700812..f8d244d46a 100644 --- a/packages/cli/src/tokens/generate-config.ts +++ b/packages/cli/src/tokens/generate-config.ts @@ -233,7 +233,6 @@ 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/template/design-tokens/primitives/globals.json b/packages/cli/src/tokens/template/design-tokens/primitives/globals.json.ts similarity index 96% rename from packages/cli/src/tokens/template/design-tokens/primitives/globals.json rename to packages/cli/src/tokens/template/design-tokens/primitives/globals.json.ts index 5a32873fef..48363c772e 100644 --- a/packages/cli/src/tokens/template/design-tokens/primitives/globals.json +++ b/packages/cli/src/tokens/template/design-tokens/primitives/globals.json.ts @@ -1,4 +1,6 @@ -{ +import { TokenSet } from "../../../types.js"; + +export default { "border-width": { "1": { "$type": "borderWidth", @@ -140,4 +142,4 @@ "$value": "30%" } } -} \ No newline at end of file +} satisfies TokenSet \ No newline at end of file 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 deleted file mode 100644 index d42d4a9768..0000000000 --- a/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/global.json +++ /dev/null @@ -1,108 +0,0 @@ -{ - "line-height": { - "sm": { - "$type": "lineHeights", - "$value": "130%" - }, - "md": { - "$type": "lineHeights", - "$value": "150%" - }, - "lg": { - "$type": "lineHeights", - "$value": "170%" - } - }, - "font-size": { - "1": { - "$type": "fontSizes", - "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 3), 0)" - }, - "2": { - "$type": "fontSizes", - "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 2), 0)" - }, - "3": { - "$type": "fontSizes", - "$value": "roundTo({font-scale._base} / pow({font-scale._ratio}, 1), 0)" - }, - "4": { - "$type": "fontSizes", - "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 0), 0)" - }, - "5": { - "$type": "fontSizes", - "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 1), 0)" - }, - "6": { - "$type": "fontSizes", - "$value": "roundTo({font-scale._base} * pow({font-scale._ratio}, 2), 0)" - }, - "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)" - } - }, - "letter-spacing": { - "1": { - "$type": "letterSpacing", - "$value": "-1%" - }, - "2": { - "$type": "letterSpacing", - "$value": "-0.5%" - }, - "3": { - "$type": "letterSpacing", - "$value": "-0.25%" - }, - "4": { - "$type": "letterSpacing", - "$value": "-0.15%" - }, - "5": { - "$type": "letterSpacing", - "$value": "0%" - }, - "6": { - "$type": "letterSpacing", - "$value": "0.15%" - }, - "7": { - "$type": "letterSpacing", - "$value": "0.25%" - }, - "8": { - "$type": "letterSpacing", - "$value": "0.5%" - }, - "9": { - "$type": "letterSpacing", - "$value": "1.5%" - } - } -} \ No newline at end of file diff --git a/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/typography.template.json b/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/typography.template.json deleted file mode 100644 index 9b97a4dba8..0000000000 --- a/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/typography.template.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "": { - "font-family": { - "$type": "fontFamilies", - "$value": "" - }, - "font-weight": { - "medium": { - "$type": "fontWeights", - "$value": "Medium" - }, - "semibold": { - "$type": "fontWeights", - "$value": "Semi bold" - }, - "regular": { - "$type": "fontWeights", - "$value": "Regular" - } - } - } -} \ No newline at end of file diff --git a/packages/cli/src/tokens/template/design-tokens/semantic/style.json b/packages/cli/src/tokens/template/design-tokens/semantic/style.json deleted file mode 100644 index 8f999a8363..0000000000 --- a/packages/cli/src/tokens/template/design-tokens/semantic/style.json +++ /dev/null @@ -1,378 +0,0 @@ -{ - "typography": { - "heading": { - "2xl": { - "$type": "typography", - "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.10}", - "letterSpacing": "{letter-spacing.1}" - } - }, - "xl": { - "$type": "typography", - "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.9}", - "letterSpacing": "{letter-spacing.1}" - } - }, - "lg": { - "$type": "typography", - "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.8}", - "letterSpacing": "{letter-spacing.2}" - } - }, - "md": { - "$type": "typography", - "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.7}", - "letterSpacing": "{letter-spacing.3}" - } - }, - "sm": { - "$type": "typography", - "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.6}", - "letterSpacing": "{letter-spacing.5}" - } - }, - "xs": { - "$type": "typography", - "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.5}", - "letterSpacing": "{letter-spacing.6}" - } - }, - "2xs": { - "$type": "typography", - "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.4}", - "letterSpacing": "{letter-spacing.6}" - } - } - }, - "body": { - "xl": { - "$type": "typography", - "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.md}", - "fontSize": "{font-size.6}", - "letterSpacing": "{letter-spacing.8}" - } - }, - "lg": { - "$type": "typography", - "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.md}", - "fontSize": "{font-size.5}", - "letterSpacing": "{letter-spacing.8}" - } - }, - "md": { - "$type": "typography", - "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.md}", - "fontSize": "{font-size.4}", - "letterSpacing": "{letter-spacing.8}" - } - }, - "sm": { - "$type": "typography", - "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.md}", - "fontSize": "{font-size.3}", - "letterSpacing": "{letter-spacing.7}" - } - }, - "xs": { - "$type": "typography", - "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.md}", - "fontSize": "{font-size.2}", - "letterSpacing": "{letter-spacing.6}" - } - }, - "short": { - "xl": { - "$type": "typography", - "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.6}", - "letterSpacing": "{letter-spacing.8}" - } - }, - "lg": { - "$type": "typography", - "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.5}", - "letterSpacing": "{letter-spacing.8}" - } - }, - "md": { - "$type": "typography", - "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.4}", - "letterSpacing": "{letter-spacing.8}" - } - }, - "sm": { - "$type": "typography", - "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.3}", - "letterSpacing": "{letter-spacing.7}" - } - }, - "xs": { - "$type": "typography", - "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.sm}", - "fontSize": "{font-size.2}", - "letterSpacing": "{letter-spacing.6}" - } - } - }, - "long": { - "xl": { - "$type": "typography", - "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.lg}", - "fontSize": "{font-size.6}", - "letterSpacing": "{letter-spacing.8}" - } - }, - "lg": { - "$type": "typography", - "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.lg}", - "fontSize": "{font-size.5}", - "letterSpacing": "{letter-spacing.8}" - } - }, - "md": { - "$type": "typography", - "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.lg}", - "fontSize": "{font-size.4}", - "letterSpacing": "{letter-spacing.8}" - } - }, - "sm": { - "$type": "typography", - "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.lg}", - "fontSize": "{font-size.3}", - "letterSpacing": "{letter-spacing.7}" - } - }, - "xs": { - "$type": "typography", - "$value": { - "fontFamily": "{font-family}", - "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.lg}", - "fontSize": "{font-size.2}", - "letterSpacing": "{letter-spacing.6}" - } - } - } - } - }, - "opacity": { - "disabled": { - "$type": "opacity", - "$value": "{opacity.30}" - } - }, - "border-width": { - "default": { - "$type": "borderWidth", - "$value": "{border-width.1}" - }, - "focus": { - "$type": "borderWidth", - "$value": "{border-width.3}" - } - }, - "shadow": { - "xs": { - "$type": "boxShadow", - "$value": "{shadow.100}" - }, - "sm": { - "$type": "boxShadow", - "$value": "{shadow.200}" - }, - "md": { - "$type": "boxShadow", - "$value": "{shadow.300}" - }, - "lg": { - "$type": "boxShadow", - "$value": "{shadow.400}" - }, - "xl": { - "$type": "boxShadow", - "$value": "{shadow.500}" - } - }, - "border-radius": { - "sm": { - "$type": "dimension", - "$value": "{border-radius.1}" - }, - "md": { - "$type": "dimension", - "$value": "{border-radius.2}" - }, - "lg": { - "$type": "dimension", - "$value": "{border-radius.3}" - }, - "xl": { - "$type": "dimension", - "$value": "{border-radius.4}" - }, - "default": { - "$type": "dimension", - "$value": "{border-radius.5}" - }, - "full": { - "$type": "dimension", - "$value": "{border-radius.6}" - } - }, - "size": { - "0": { - "$type": "dimension", - "$value": "{_size.0}" - }, - "1": { - "$type": "dimension", - "$value": "{_size.1}" - }, - "2": { - "$type": "dimension", - "$value": "{_size.2}" - }, - "3": { - "$type": "dimension", - "$value": "{_size.3}" - }, - "4": { - "$type": "dimension", - "$value": "{_size.4}" - }, - "5": { - "$type": "dimension", - "$value": "{_size.5}" - }, - "6": { - "$type": "dimension", - "$value": "{_size.6}" - }, - "7": { - "$type": "dimension", - "$value": "{_size.7}" - }, - "8": { - "$type": "dimension", - "$value": "{_size.8}" - }, - "9": { - "$type": "dimension", - "$value": "{_size.9}" - }, - "10": { - "$type": "dimension", - "$value": "{_size.10}" - }, - "11": { - "$type": "dimension", - "$value": "{_size.11}" - }, - "12": { - "$type": "dimension", - "$value": "{_size.12}" - }, - "13": { - "$type": "dimension", - "$value": "{_size.13}" - }, - "14": { - "$type": "dimension", - "$value": "{_size.14}" - }, - "15": { - "$type": "dimension", - "$value": "{_size.15}" - }, - "18": { - "$type": "dimension", - "$value": "{_size.18}" - }, - "22": { - "$type": "dimension", - "$value": "{_size.22}" - }, - "26": { - "$type": "dimension", - "$value": "{_size.26}" - }, - "30": { - "$type": "dimension", - "$value": "{_size.30}" - } - } -} \ No newline at end of file diff --git a/packages/cli/src/tokens/template/design-tokens/themes/theme.base.template.json b/packages/cli/src/tokens/template/design-tokens/themes/theme.base.template.json index e090cf37c9..215148b82c 100644 --- a/packages/cli/src/tokens/template/design-tokens/themes/theme.base.template.json +++ b/packages/cli/src/tokens/template/design-tokens/themes/theme.base.template.json @@ -1,23 +1,5 @@ { "color": {}, - "font-family": { - "$type": "fontFamilies", - "$value": "{.font-family}" - }, - "font-weight": { - "medium": { - "$type": "fontWeights", - "$value": "{.font-weight.medium}" - }, - "semibold": { - "$type": "fontWeights", - "$value": "{.font-weight.semibold}" - }, - "regular": { - "$type": "fontWeights", - "$value": "{.font-weight.regular}" - } - }, "border-radius": { "1": { "$type": "dimension", diff --git a/packages/cli/src/tokens/types.ts b/packages/cli/src/tokens/types.ts index 540a77f17e..d58eb397b8 100644 --- a/packages/cli/src/tokens/types.ts +++ b/packages/cli/src/tokens/types.ts @@ -1,8 +1,15 @@ import type { Config as SDConfig } from 'style-dictionary/types'; +import type { ColorScheme } from '../colors/types.js'; import type { ConfigSchemaTheme } from '../config.js'; import type { GetStyleDictionaryConfig } from './process/configs/shared.js'; -export type Token = { $value: string | Record[]; $type: string }; +export type Token = + | { $type: string; $value: string } + | { $type: 'boxShadow'; $value: Record<'x' | 'y' | 'blur' | 'spread' | 'color', string>[] } + | { + $type: 'typography'; + $value: Record<'fontFamily' | 'fontWeight' | 'lineHeight' | 'fontSize' | 'letterSpacing', string>; + }; export type TokenSet = { [key: string]: Token | TokenSet; }; @@ -40,6 +47,12 @@ export type ThemePermutation = { export type ThemeDimension = keyof ThemePermutation; +export type TokenSetDimensions = { + colorSchemes: ColorScheme[]; + sizeModes: ('small' | 'medium' | 'large')[]; + fontNames: string[]; +}; + export type GetSDConfigOptions = { tokensDir?: string; dry?: boolean; diff --git a/packages/css/theme/designsystemet.css b/packages/css/theme/designsystemet.css index 90d202076d..14d2900a4a 100644 --- a/packages/css/theme/designsystemet.css +++ b/packages/css/theme/designsystemet.css @@ -1,30 +1,24 @@ @charset "UTF-8"; /* build: v1.11.0 -design-tokens: v1.9.0 +design-tokens: v1.11.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.14234; } } @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.143136; } } @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.143136; } } @@ -47,35 +41,7 @@ design-tokens: v1.9.0 @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), 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); - --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), 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); - } + } } @@ -89,28 +55,28 @@ design-tokens: v1.9.0 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); - --ds-heading-md-font-size: var(--ds-font-size-7); - --ds-heading-sm-font-size: var(--ds-font-size-6); - --ds-heading-xs-font-size: var(--ds-font-size-5); - --ds-heading-2xs-font-size: var(--ds-font-size-4); - --ds-body-xl-font-size: var(--ds-font-size-6); - --ds-body-lg-font-size: var(--ds-font-size-5); - --ds-body-md-font-size: var(--ds-font-size-4); - --ds-body-sm-font-size: var(--ds-font-size-3); - --ds-body-xs-font-size: var(--ds-font-size-2); - --ds-body-short-xl-font-size: var(--ds-font-size-6); - --ds-body-short-lg-font-size: var(--ds-font-size-5); - --ds-body-short-md-font-size: var(--ds-font-size-4); - --ds-body-short-sm-font-size: var(--ds-font-size-3); - --ds-body-short-xs-font-size: var(--ds-font-size-2); - --ds-body-long-xl-font-size: var(--ds-font-size-6); - --ds-body-long-lg-font-size: var(--ds-font-size-5); - --ds-body-long-md-font-size: var(--ds-font-size-4); - --ds-body-long-sm-font-size: var(--ds-font-size-3); - --ds-body-long-xs-font-size: var(--ds-font-size-2); + --ds-heading-2xl-font-size: var(--ds-typography-mapping-heading-2xl-font-size); + --ds-heading-xl-font-size: var(--ds-typography-mapping-heading-xl-font-size); + --ds-heading-lg-font-size: var(--ds-typography-mapping-heading-lg-font-size); + --ds-heading-md-font-size: var(--ds-typography-mapping-heading-md-font-size); + --ds-heading-sm-font-size: var(--ds-typography-mapping-heading-sm-font-size); + --ds-heading-xs-font-size: var(--ds-typography-mapping-heading-xs-font-size); + --ds-heading-2xs-font-size: var(--ds-typography-mapping-heading-2xs-font-size); + --ds-body-xl-font-size: var(--ds-typography-mapping-body-xl-font-size); + --ds-body-lg-font-size: var(--ds-typography-mapping-body-lg-font-size); + --ds-body-md-font-size: var(--ds-typography-mapping-body-md-font-size); + --ds-body-sm-font-size: var(--ds-typography-mapping-body-sm-font-size); + --ds-body-xs-font-size: var(--ds-typography-mapping-body-xs-font-size); + --ds-body-short-xl-font-size: var(--ds-typography-mapping-body-short-xl-font-size); + --ds-body-short-lg-font-size: var(--ds-typography-mapping-body-short-lg-font-size); + --ds-body-short-md-font-size: var(--ds-typography-mapping-body-short-md-font-size); + --ds-body-short-sm-font-size: var(--ds-typography-mapping-body-short-sm-font-size); + --ds-body-short-xs-font-size: var(--ds-typography-mapping-body-short-xs-font-size); + --ds-body-long-xl-font-size: var(--ds-typography-mapping-body-long-xl-font-size); + --ds-body-long-lg-font-size: var(--ds-typography-mapping-body-long-lg-font-size); + --ds-body-long-md-font-size: var(--ds-typography-mapping-body-long-md-font-size); + --ds-body-long-sm-font-size: var(--ds-typography-mapping-body-long-sm-font-size); + --ds-body-long-xs-font-size: var(--ds-typography-mapping-body-long-xs-font-size); } } @@ -392,92 +358,6 @@ design-tokens: v1.9.0 } -@layer ds.theme.typography.secondary { -[data-typography="secondary"] { - --ds-line-height-sm: 1.3; - --ds-line-height-md: 1.5; - --ds-line-height-lg: 1.7; - --ds-letter-spacing-1: -0.01em; - --ds-letter-spacing-2: -0.005em; - --ds-letter-spacing-3: -0.0025em; - --ds-letter-spacing-4: -0.0015em; - --ds-letter-spacing-5: 0em; - --ds-letter-spacing-6: 0.0015em; - --ds-letter-spacing-7: 0.0025em; - --ds-letter-spacing-8: 0.005em; - --ds-letter-spacing-9: 0.015em; - --ds-font-family: Inter; - --ds-font-weight-medium: 500; - --ds-font-weight-semibold: 600; - --ds-font-weight-regular: 400; - --ds-heading-2xl-font-weight: 500; - --ds-heading-2xl-line-height: 1.3; - --ds-heading-2xl-letter-spacing: -0.01em; - --ds-heading-xl-font-weight: 500; - --ds-heading-xl-line-height: 1.3; - --ds-heading-xl-letter-spacing: -0.01em; - --ds-heading-lg-font-weight: 500; - --ds-heading-lg-line-height: 1.3; - --ds-heading-lg-letter-spacing: -0.005em; - --ds-heading-md-font-weight: 500; - --ds-heading-md-line-height: 1.3; - --ds-heading-md-letter-spacing: -0.0025em; - --ds-heading-sm-font-weight: 500; - --ds-heading-sm-line-height: 1.3; - --ds-heading-sm-letter-spacing: 0em; - --ds-heading-xs-font-weight: 500; - --ds-heading-xs-line-height: 1.3; - --ds-heading-xs-letter-spacing: 0.0015em; - --ds-heading-2xs-font-weight: 500; - --ds-heading-2xs-line-height: 1.3; - --ds-heading-2xs-letter-spacing: 0.0015em; - --ds-body-xl-font-weight: 400; - --ds-body-xl-line-height: 1.5; - --ds-body-xl-letter-spacing: 0.005em; - --ds-body-lg-font-weight: 400; - --ds-body-lg-line-height: 1.5; - --ds-body-lg-letter-spacing: 0.005em; - --ds-body-md-font-weight: 400; - --ds-body-md-line-height: 1.5; - --ds-body-md-letter-spacing: 0.005em; - --ds-body-sm-font-weight: 400; - --ds-body-sm-line-height: 1.5; - --ds-body-sm-letter-spacing: 0.0025em; - --ds-body-xs-font-weight: 400; - --ds-body-xs-line-height: 1.5; - --ds-body-xs-letter-spacing: 0.0015em; - --ds-body-short-xl-font-weight: 400; - --ds-body-short-xl-line-height: 1.3; - --ds-body-short-xl-letter-spacing: 0.005em; - --ds-body-short-lg-font-weight: 400; - --ds-body-short-lg-line-height: 1.3; - --ds-body-short-lg-letter-spacing: 0.005em; - --ds-body-short-md-font-weight: 400; - --ds-body-short-md-line-height: 1.3; - --ds-body-short-md-letter-spacing: 0.005em; - --ds-body-short-sm-font-weight: 400; - --ds-body-short-sm-line-height: 1.3; - --ds-body-short-sm-letter-spacing: 0.0025em; - --ds-body-short-xs-font-weight: 400; - --ds-body-short-xs-line-height: 1.3; - --ds-body-short-xs-letter-spacing: 0.0015em; - --ds-body-long-xl-font-weight: 400; - --ds-body-long-xl-line-height: 1.7; - --ds-body-long-xl-letter-spacing: 0.005em; - --ds-body-long-lg-font-weight: 400; - --ds-body-long-lg-line-height: 1.7; - --ds-body-long-lg-letter-spacing: 0.005em; - --ds-body-long-md-font-weight: 400; - --ds-body-long-md-line-height: 1.7; - --ds-body-long-md-letter-spacing: 0.005em; - --ds-body-long-sm-font-weight: 400; - --ds-body-long-sm-line-height: 1.7; - --ds-body-long-sm-letter-spacing: 0.0025em; - --ds-body-long-xs-font-weight: 400; - --ds-body-long-xs-line-height: 1.7; - --ds-body-long-xs-letter-spacing: 0.0015em; -} -} @layer ds.theme.size { :root, [data-size] { --ds-size-base: 18; @@ -533,6 +413,224 @@ design-tokens: v1.9.0 @layer ds.theme.semantic { :root { + --ds-designsystemet-fonts-primary-font-size-1: 12px; + --ds-designsystemet-fonts-primary-font-size-2: 14px; + --ds-designsystemet-fonts-primary-font-size-3: 16px; + --ds-designsystemet-fonts-primary-font-size-4: 18px; + --ds-designsystemet-fonts-primary-font-size-5: 21px; + --ds-designsystemet-fonts-primary-font-size-6: 24px; + --ds-designsystemet-fonts-primary-font-size-7: 31px; + --ds-designsystemet-fonts-primary-font-size-8: 35px; + --ds-designsystemet-fonts-primary-font-size-9: 46px; + --ds-designsystemet-fonts-primary-font-size-10: 60px; + --ds-designsystemet-fonts-primary-font-size-6-half: 27px; + --ds-designsystemet-fonts-primary-font-size-8-half: 40px; + --ds-designsystemet-fonts-primary-font-size-9-half: 52px; + --ds-designsystemet-fonts-primary-font-scale-base: 18; + --ds-designsystemet-fonts-primary-font-scale-ratio: 1.143136; + --ds-designsystemet-fonts-primary-line-height-sm: 1.3; + --ds-designsystemet-fonts-primary-line-height-md: 1.5; + --ds-designsystemet-fonts-primary-line-height-lg: 1.7; + --ds-designsystemet-fonts-primary-letter-spacing-1: -1%; + --ds-designsystemet-fonts-primary-letter-spacing-2: -0.5%; + --ds-designsystemet-fonts-primary-letter-spacing-3: -0.25%; + --ds-designsystemet-fonts-primary-letter-spacing-4: -0.15%; + --ds-designsystemet-fonts-primary-letter-spacing-5: 0%; + --ds-designsystemet-fonts-primary-letter-spacing-6: 0.15%; + --ds-designsystemet-fonts-primary-letter-spacing-7: 0.25%; + --ds-designsystemet-fonts-primary-letter-spacing-8: 0.5%; + --ds-designsystemet-fonts-primary-letter-spacing-9: 1.5%; + --ds-designsystemet-fonts-secondary-font-size-1: 10px; + --ds-designsystemet-fonts-secondary-font-size-2: 11px; + --ds-designsystemet-fonts-secondary-font-size-3: 13px; + --ds-designsystemet-fonts-secondary-font-size-4: 15px; + --ds-designsystemet-fonts-secondary-font-size-5: 17px; + --ds-designsystemet-fonts-secondary-font-size-6: 20px; + --ds-designsystemet-fonts-secondary-font-size-7: 26px; + --ds-designsystemet-fonts-secondary-font-size-8: 29px; + --ds-designsystemet-fonts-secondary-font-size-9: 38px; + --ds-designsystemet-fonts-secondary-font-size-10: 50px; + --ds-designsystemet-fonts-secondary-font-size-6-half: 22px; + --ds-designsystemet-fonts-secondary-font-size-8-half: 33px; + --ds-designsystemet-fonts-secondary-font-size-9-half: 44px; + --ds-designsystemet-fonts-secondary-font-scale-base: 15; + --ds-designsystemet-fonts-secondary-font-scale-ratio: 1.143136; + --ds-designsystemet-fonts-secondary-line-height-sm: 1.3; + --ds-designsystemet-fonts-secondary-line-height-md: 1.5; + --ds-designsystemet-fonts-secondary-line-height-lg: 1.7; + --ds-designsystemet-fonts-secondary-letter-spacing-1: -1%; + --ds-designsystemet-fonts-secondary-letter-spacing-2: -0.5%; + --ds-designsystemet-fonts-secondary-letter-spacing-3: -0.25%; + --ds-designsystemet-fonts-secondary-letter-spacing-4: -0.15%; + --ds-designsystemet-fonts-secondary-letter-spacing-5: 0%; + --ds-designsystemet-fonts-secondary-letter-spacing-6: 0.15%; + --ds-designsystemet-fonts-secondary-letter-spacing-7: 0.25%; + --ds-designsystemet-fonts-secondary-letter-spacing-8: 0.5%; + --ds-designsystemet-fonts-secondary-letter-spacing-9: 1.5%; + --ds-different-fonts-fonts-primary-font-size-1: 12px; + --ds-different-fonts-fonts-primary-font-size-2: 14px; + --ds-different-fonts-fonts-primary-font-size-3: 16px; + --ds-different-fonts-fonts-primary-font-size-4: 18px; + --ds-different-fonts-fonts-primary-font-size-5: 21px; + --ds-different-fonts-fonts-primary-font-size-6: 24px; + --ds-different-fonts-fonts-primary-font-size-7: 31px; + --ds-different-fonts-fonts-primary-font-size-8: 35px; + --ds-different-fonts-fonts-primary-font-size-9: 46px; + --ds-different-fonts-fonts-primary-font-size-10: 60px; + --ds-different-fonts-fonts-primary-font-size-6-half: 27px; + --ds-different-fonts-fonts-primary-font-size-8-half: 40px; + --ds-different-fonts-fonts-primary-font-size-9-half: 52px; + --ds-different-fonts-fonts-primary-font-scale-base: 18; + --ds-different-fonts-fonts-primary-font-scale-ratio: 1.143136; + --ds-different-fonts-fonts-primary-line-height-sm: 1.3; + --ds-different-fonts-fonts-primary-line-height-md: 1.5; + --ds-different-fonts-fonts-primary-line-height-lg: 1.7; + --ds-different-fonts-fonts-primary-letter-spacing-1: -1%; + --ds-different-fonts-fonts-primary-letter-spacing-2: -0.5%; + --ds-different-fonts-fonts-primary-letter-spacing-3: -0.25%; + --ds-different-fonts-fonts-primary-letter-spacing-4: -0.15%; + --ds-different-fonts-fonts-primary-letter-spacing-5: 0%; + --ds-different-fonts-fonts-primary-letter-spacing-6: 0.15%; + --ds-different-fonts-fonts-primary-letter-spacing-7: 0.25%; + --ds-different-fonts-fonts-primary-letter-spacing-8: 0.5%; + --ds-different-fonts-fonts-primary-letter-spacing-9: 1.5%; + --ds-different-fonts-fonts-secondary-font-size-1: 11px; + --ds-different-fonts-fonts-secondary-font-size-2: 12px; + --ds-different-fonts-fonts-secondary-font-size-3: 14px; + --ds-different-fonts-fonts-secondary-font-size-4: 16px; + --ds-different-fonts-fonts-secondary-font-size-5: 18px; + --ds-different-fonts-fonts-secondary-font-size-6: 21px; + --ds-different-fonts-fonts-secondary-font-size-7: 27px; + --ds-different-fonts-fonts-secondary-font-size-8: 31px; + --ds-different-fonts-fonts-secondary-font-size-9: 41px; + --ds-different-fonts-fonts-secondary-font-size-10: 53px; + --ds-different-fonts-fonts-secondary-font-size-6-half: 24px; + --ds-different-fonts-fonts-secondary-font-size-8-half: 36px; + --ds-different-fonts-fonts-secondary-font-size-9-half: 47px; + --ds-different-fonts-fonts-secondary-font-scale-base: 16; + --ds-different-fonts-fonts-secondary-font-scale-ratio: 1.143136; + --ds-different-fonts-fonts-secondary-line-height-sm: 1.3; + --ds-different-fonts-fonts-secondary-line-height-md: 1.5; + --ds-different-fonts-fonts-secondary-line-height-lg: 1.7; + --ds-different-fonts-fonts-secondary-letter-spacing-1: -1%; + --ds-different-fonts-fonts-secondary-letter-spacing-2: -0.5%; + --ds-different-fonts-fonts-secondary-letter-spacing-3: -0.25%; + --ds-different-fonts-fonts-secondary-letter-spacing-4: -0.15%; + --ds-different-fonts-fonts-secondary-letter-spacing-5: 0%; + --ds-different-fonts-fonts-secondary-letter-spacing-6: 0.15%; + --ds-different-fonts-fonts-secondary-letter-spacing-7: 0.25%; + --ds-different-fonts-fonts-secondary-letter-spacing-8: 0.5%; + --ds-different-fonts-fonts-secondary-letter-spacing-9: 1.5%; + --ds-fonts-primary-font-size-1: 12px; + --ds-fonts-primary-font-size-2: 14px; + --ds-fonts-primary-font-size-3: 16px; + --ds-fonts-primary-font-size-4: 18px; + --ds-fonts-primary-font-size-5: 21px; + --ds-fonts-primary-font-size-6: 24px; + --ds-fonts-primary-font-size-7: 31px; + --ds-fonts-primary-font-size-8: 35px; + --ds-fonts-primary-font-size-9: 46px; + --ds-fonts-primary-font-size-10: 60px; + --ds-fonts-primary-line-height-sm: 1.3; + --ds-fonts-primary-line-height-md: 1.5; + --ds-fonts-primary-line-height-lg: 1.7; + --ds-fonts-primary-letter-spacing-1: -1%; + --ds-fonts-primary-letter-spacing-2: -0.5%; + --ds-fonts-primary-letter-spacing-3: -0.25%; + --ds-fonts-primary-letter-spacing-4: -0.15%; + --ds-fonts-primary-letter-spacing-5: 0%; + --ds-fonts-primary-letter-spacing-6: 0.15%; + --ds-fonts-primary-letter-spacing-7: 0.25%; + --ds-fonts-primary-letter-spacing-8: 0.5%; + --ds-fonts-primary-letter-spacing-9: 1.5%; + --ds-fonts-secondary-font-size-1: 10px; + --ds-fonts-secondary-font-size-2: 11px; + --ds-fonts-secondary-font-size-3: 13px; + --ds-fonts-secondary-font-size-4: 15px; + --ds-fonts-secondary-font-size-5: 17px; + --ds-fonts-secondary-font-size-6: 20px; + --ds-fonts-secondary-font-size-7: 26px; + --ds-fonts-secondary-font-size-8: 29px; + --ds-fonts-secondary-font-size-9: 38px; + --ds-fonts-secondary-font-size-10: 50px; + --ds-fonts-secondary-line-height-sm: 1.3; + --ds-fonts-secondary-line-height-md: 1.5; + --ds-fonts-secondary-line-height-lg: 1.7; + --ds-fonts-secondary-letter-spacing-1: -1%; + --ds-fonts-secondary-letter-spacing-2: -0.5%; + --ds-fonts-secondary-letter-spacing-3: -0.25%; + --ds-fonts-secondary-letter-spacing-4: -0.15%; + --ds-fonts-secondary-letter-spacing-5: 0%; + --ds-fonts-secondary-letter-spacing-6: 0.15%; + --ds-fonts-secondary-letter-spacing-7: 0.25%; + --ds-fonts-secondary-letter-spacing-8: 0.5%; + --ds-fonts-secondary-letter-spacing-9: 1.5%; + --ds-typography-mapping-heading-2xl-line-height: 1.3; + --ds-typography-mapping-heading-2xl-font-size: 50px; + --ds-typography-mapping-heading-2xl-letter-spacing: -1%; + --ds-typography-mapping-heading-xl-line-height: 1.3; + --ds-typography-mapping-heading-xl-font-size: 38px; + --ds-typography-mapping-heading-xl-letter-spacing: -1%; + --ds-typography-mapping-heading-lg-line-height: 1.3; + --ds-typography-mapping-heading-lg-font-size: 29px; + --ds-typography-mapping-heading-lg-letter-spacing: -0.5%; + --ds-typography-mapping-heading-md-line-height: 1.3; + --ds-typography-mapping-heading-md-font-size: 26px; + --ds-typography-mapping-heading-md-letter-spacing: -0.25%; + --ds-typography-mapping-heading-sm-line-height: 1.3; + --ds-typography-mapping-heading-sm-font-size: 20px; + --ds-typography-mapping-heading-sm-letter-spacing: 0%; + --ds-typography-mapping-heading-xs-line-height: 1.3; + --ds-typography-mapping-heading-xs-font-size: 17px; + --ds-typography-mapping-heading-xs-letter-spacing: 0.15%; + --ds-typography-mapping-heading-2xs-line-height: 1.3; + --ds-typography-mapping-heading-2xs-font-size: 15px; + --ds-typography-mapping-heading-2xs-letter-spacing: 0.15%; + --ds-typography-mapping-body-xl-line-height: 1.5; + --ds-typography-mapping-body-xl-font-size: 24px; + --ds-typography-mapping-body-xl-letter-spacing: 0.5%; + --ds-typography-mapping-body-lg-line-height: 1.5; + --ds-typography-mapping-body-lg-font-size: 21px; + --ds-typography-mapping-body-lg-letter-spacing: 0.5%; + --ds-typography-mapping-body-md-line-height: 1.5; + --ds-typography-mapping-body-md-font-size: 18px; + --ds-typography-mapping-body-md-letter-spacing: 0.5%; + --ds-typography-mapping-body-sm-line-height: 1.5; + --ds-typography-mapping-body-sm-font-size: 16px; + --ds-typography-mapping-body-sm-letter-spacing: 0.25%; + --ds-typography-mapping-body-xs-line-height: 1.5; + --ds-typography-mapping-body-xs-font-size: 14px; + --ds-typography-mapping-body-xs-letter-spacing: 0.15%; + --ds-typography-mapping-body-short-xl-line-height: 1.3; + --ds-typography-mapping-body-short-xl-font-size: 24px; + --ds-typography-mapping-body-short-xl-letter-spacing: 0.5%; + --ds-typography-mapping-body-short-lg-line-height: 1.3; + --ds-typography-mapping-body-short-lg-font-size: 21px; + --ds-typography-mapping-body-short-lg-letter-spacing: 0.5%; + --ds-typography-mapping-body-short-md-line-height: 1.3; + --ds-typography-mapping-body-short-md-font-size: 18px; + --ds-typography-mapping-body-short-md-letter-spacing: 0.5%; + --ds-typography-mapping-body-short-sm-line-height: 1.3; + --ds-typography-mapping-body-short-sm-font-size: 16px; + --ds-typography-mapping-body-short-sm-letter-spacing: 0.25%; + --ds-typography-mapping-body-short-xs-line-height: 1.3; + --ds-typography-mapping-body-short-xs-font-size: 14px; + --ds-typography-mapping-body-short-xs-letter-spacing: 0.15%; + --ds-typography-mapping-body-long-xl-line-height: 1.7; + --ds-typography-mapping-body-long-xl-font-size: 24px; + --ds-typography-mapping-body-long-xl-letter-spacing: 0.5%; + --ds-typography-mapping-body-long-lg-line-height: 1.7; + --ds-typography-mapping-body-long-lg-font-size: 21px; + --ds-typography-mapping-body-long-lg-letter-spacing: 0.5%; + --ds-typography-mapping-body-long-md-line-height: 1.7; + --ds-typography-mapping-body-long-md-font-size: 18px; + --ds-typography-mapping-body-long-md-letter-spacing: 0.5%; + --ds-typography-mapping-body-long-sm-line-height: 1.7; + --ds-typography-mapping-body-long-sm-font-size: 16px; + --ds-typography-mapping-body-long-sm-letter-spacing: 0.25%; + --ds-typography-mapping-body-long-xs-line-height: 1.7; + --ds-typography-mapping-body-long-xs-font-size: 14px; + --ds-typography-mapping-body-long-xs-letter-spacing: 0.15%; --ds-border-radius-base: 0.25rem; --ds-border-radius-scale: 0.25rem; --ds-border-radius-sm: min(var(--ds-border-radius-base)*0.5,var(--ds-border-radius-scale)); @@ -831,92 +929,6 @@ design-tokens: v1.9.0 } -@layer ds.theme.typography.primary { -:root, [data-typography="primary"] { - --ds-line-height-sm: 1.3; - --ds-line-height-md: 1.5; - --ds-line-height-lg: 1.7; - --ds-letter-spacing-1: -0.01em; - --ds-letter-spacing-2: -0.005em; - --ds-letter-spacing-3: -0.0025em; - --ds-letter-spacing-4: -0.0015em; - --ds-letter-spacing-5: 0em; - --ds-letter-spacing-6: 0.0015em; - --ds-letter-spacing-7: 0.0025em; - --ds-letter-spacing-8: 0.005em; - --ds-letter-spacing-9: 0.015em; - --ds-font-family: Inter; - --ds-font-weight-medium: 500; - --ds-font-weight-semibold: 600; - --ds-font-weight-regular: 400; - --ds-heading-2xl-font-weight: 500; - --ds-heading-2xl-line-height: 1.3; - --ds-heading-2xl-letter-spacing: -0.01em; - --ds-heading-xl-font-weight: 500; - --ds-heading-xl-line-height: 1.3; - --ds-heading-xl-letter-spacing: -0.01em; - --ds-heading-lg-font-weight: 500; - --ds-heading-lg-line-height: 1.3; - --ds-heading-lg-letter-spacing: -0.005em; - --ds-heading-md-font-weight: 500; - --ds-heading-md-line-height: 1.3; - --ds-heading-md-letter-spacing: -0.0025em; - --ds-heading-sm-font-weight: 500; - --ds-heading-sm-line-height: 1.3; - --ds-heading-sm-letter-spacing: 0em; - --ds-heading-xs-font-weight: 500; - --ds-heading-xs-line-height: 1.3; - --ds-heading-xs-letter-spacing: 0.0015em; - --ds-heading-2xs-font-weight: 500; - --ds-heading-2xs-line-height: 1.3; - --ds-heading-2xs-letter-spacing: 0.0015em; - --ds-body-xl-font-weight: 400; - --ds-body-xl-line-height: 1.5; - --ds-body-xl-letter-spacing: 0.005em; - --ds-body-lg-font-weight: 400; - --ds-body-lg-line-height: 1.5; - --ds-body-lg-letter-spacing: 0.005em; - --ds-body-md-font-weight: 400; - --ds-body-md-line-height: 1.5; - --ds-body-md-letter-spacing: 0.005em; - --ds-body-sm-font-weight: 400; - --ds-body-sm-line-height: 1.5; - --ds-body-sm-letter-spacing: 0.0025em; - --ds-body-xs-font-weight: 400; - --ds-body-xs-line-height: 1.5; - --ds-body-xs-letter-spacing: 0.0015em; - --ds-body-short-xl-font-weight: 400; - --ds-body-short-xl-line-height: 1.3; - --ds-body-short-xl-letter-spacing: 0.005em; - --ds-body-short-lg-font-weight: 400; - --ds-body-short-lg-line-height: 1.3; - --ds-body-short-lg-letter-spacing: 0.005em; - --ds-body-short-md-font-weight: 400; - --ds-body-short-md-line-height: 1.3; - --ds-body-short-md-letter-spacing: 0.005em; - --ds-body-short-sm-font-weight: 400; - --ds-body-short-sm-line-height: 1.3; - --ds-body-short-sm-letter-spacing: 0.0025em; - --ds-body-short-xs-font-weight: 400; - --ds-body-short-xs-line-height: 1.3; - --ds-body-short-xs-letter-spacing: 0.0015em; - --ds-body-long-xl-font-weight: 400; - --ds-body-long-xl-line-height: 1.7; - --ds-body-long-xl-letter-spacing: 0.005em; - --ds-body-long-lg-font-weight: 400; - --ds-body-long-lg-line-height: 1.7; - --ds-body-long-lg-letter-spacing: 0.005em; - --ds-body-long-md-font-weight: 400; - --ds-body-long-md-line-height: 1.7; - --ds-body-long-md-letter-spacing: 0.005em; - --ds-body-long-sm-font-weight: 400; - --ds-body-long-sm-line-height: 1.7; - --ds-body-long-sm-letter-spacing: 0.0025em; - --ds-body-long-xs-font-weight: 400; - --ds-body-long-xs-line-height: 1.7; - --ds-body-long-xs-letter-spacing: 0.0015em; -} -} @layer ds.theme.color { :root, [data-color-scheme], [data-color="accent"] { --ds-color-background-default: var(--ds-color-accent-background-default); diff --git a/packages/css/theme/designsystemet.tailwind.css b/packages/css/theme/designsystemet.tailwind.css index 86757bcecf..cf154cf387 100644 --- a/packages/css/theme/designsystemet.tailwind.css +++ b/packages/css/theme/designsystemet.tailwind.css @@ -148,9 +148,6 @@ --color-warning-surface-tinted: var(--ds-color-warning-surface-tinted); --color-warning-text-default: var(--ds-color-warning-text-default); --color-warning-text-subtle: var(--ds-color-warning-text-subtle); - --font-weight-medium: var(--ds-font-weight-medium); - --font-weight-regular: var(--ds-font-weight-regular); - --font-weight-semibold: var(--ds-font-weight-semibold); --spacing-0: var(--ds-size-0); --spacing-1: var(--ds-size-1); --spacing-2: var(--ds-size-2); diff --git a/packages/css/theme/different-fonts.css b/packages/css/theme/different-fonts.css new file mode 100644 index 0000000000..bae93f571d --- /dev/null +++ b/packages/css/theme/different-fonts.css @@ -0,0 +1,1106 @@ +@charset "UTF-8"; +/* +build: v1.11.0 +design-tokens: v1.11.0 +*/ + +@layer ds.theme.size-mode { +:root /* small */ { + --ds-size-mode-font-size--sm: 1; +} +} + +@layer ds.theme.size-mode { +:root /* medium */ { + --ds-size-mode-font-size--md: 1.125; +} +} + +@layer ds.theme.size-mode { +:root /* large */ { + --ds-size-mode-font-size--lg: 1.3125; +} +} + +@layer ds.theme.size-mode { +:root, [data-size] { + --ds-size: var(--ds-size--md); + --ds-size--sm: var(--ds-size,); + --ds-size--md: var(--ds-size,); + --ds-size--lg: var(--ds-size,); + --ds-size-mode-font-size: + 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)); +} + +[data-size='sm'] { --ds-size: var(--ds-size--sm); } +[data-size='md'] { --ds-size: var(--ds-size--md); } +[data-size='lg'] { --ds-size: var(--ds-size--lg); } +} + +@layer ds.theme.type-scale { +:root { + +} +} + +@layer ds.theme.type-scale { +:root, [data-size] { + --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-typography-mapping-heading-2xl-font-size); + --ds-heading-xl-font-size: var(--ds-typography-mapping-heading-xl-font-size); + --ds-heading-lg-font-size: var(--ds-typography-mapping-heading-lg-font-size); + --ds-heading-md-font-size: var(--ds-typography-mapping-heading-md-font-size); + --ds-heading-sm-font-size: var(--ds-typography-mapping-heading-sm-font-size); + --ds-heading-xs-font-size: var(--ds-typography-mapping-heading-xs-font-size); + --ds-heading-2xs-font-size: var(--ds-typography-mapping-heading-2xs-font-size); + --ds-body-xl-font-size: var(--ds-typography-mapping-body-xl-font-size); + --ds-body-lg-font-size: var(--ds-typography-mapping-body-lg-font-size); + --ds-body-md-font-size: var(--ds-typography-mapping-body-md-font-size); + --ds-body-sm-font-size: var(--ds-typography-mapping-body-sm-font-size); + --ds-body-xs-font-size: var(--ds-typography-mapping-body-xs-font-size); + --ds-body-short-xl-font-size: var(--ds-typography-mapping-body-short-xl-font-size); + --ds-body-short-lg-font-size: var(--ds-typography-mapping-body-short-lg-font-size); + --ds-body-short-md-font-size: var(--ds-typography-mapping-body-short-md-font-size); + --ds-body-short-sm-font-size: var(--ds-typography-mapping-body-short-sm-font-size); + --ds-body-short-xs-font-size: var(--ds-typography-mapping-body-short-xs-font-size); + --ds-body-long-xl-font-size: var(--ds-typography-mapping-body-long-xl-font-size); + --ds-body-long-lg-font-size: var(--ds-typography-mapping-body-long-lg-font-size); + --ds-body-long-md-font-size: var(--ds-typography-mapping-body-long-md-font-size); + --ds-body-long-sm-font-size: var(--ds-typography-mapping-body-long-sm-font-size); + --ds-body-long-xs-font-size: var(--ds-typography-mapping-body-long-xs-font-size); +} +} + +@layer ds.theme.color-scheme.light { +:root, [data-color-scheme="light"] { + --ds-color-accent-background-default: #ffffff; + --ds-color-accent-background-tinted: #eef4fa; + --ds-color-accent-surface-default: #ffffff; + --ds-color-accent-surface-tinted: #ddeaf6; + --ds-color-accent-surface-hover: #c7ddf0; + --ds-color-accent-surface-active: #afcee9; + --ds-color-accent-border-subtle: #99c0e3; + --ds-color-accent-border-default: #2a7cc5; + --ds-color-accent-border-strong: #005db1; + --ds-color-accent-text-subtle: #005db1; + --ds-color-accent-text-default: #002c54; + --ds-color-accent-base-default: #0062BA; + --ds-color-accent-base-hover: #004f96; + --ds-color-accent-base-active: #003d75; + --ds-color-accent-base-contrast-subtle: #dbe9f5; + --ds-color-accent-base-contrast-default: #ffffff; + --ds-color-neutral-background-default: #ffffff; + --ds-color-neutral-background-tinted: #f3f3f4; + --ds-color-neutral-surface-default: #ffffff; + --ds-color-neutral-surface-tinted: #e8e8e9; + --ds-color-neutral-surface-hover: #d9dadb; + --ds-color-neutral-surface-active: #c9cacb; + --ds-color-neutral-border-subtle: #bbbcbd; + --ds-color-neutral-border-default: #77797b; + --ds-color-neutral-border-strong: #5b5d60; + --ds-color-neutral-text-subtle: #5b5d60; + --ds-color-neutral-text-default: #292c30; + --ds-color-neutral-base-default: #24272B; + --ds-color-neutral-base-hover: #36383c; + --ds-color-neutral-base-active: #484a4e; + --ds-color-neutral-base-contrast-subtle: #b9babb; + --ds-color-neutral-base-contrast-default: #ffffff; + --ds-color-brand1-background-default: #ffffff; + --ds-color-brand1-background-tinted: #edf5f3; + --ds-color-brand1-surface-default: #ffffff; + --ds-color-brand1-surface-tinted: #dcece8; + --ds-color-brand1-surface-hover: #c6dfd9; + --ds-color-brand1-surface-active: #add2c9; + --ds-color-brand1-border-subtle: #96c5b9; + --ds-color-brand1-border-default: #25876f; + --ds-color-brand1-border-strong: #0b6a53; + --ds-color-brand1-text-subtle: #0b6a53; + --ds-color-brand1-text-default: #053227; + --ds-color-brand1-base-default: #0D7A5F; + --ds-color-brand1-base-hover: #0b644e; + --ds-color-brand1-base-active: #084f3d; + --ds-color-brand1-base-contrast-subtle: #ebf4f2; + --ds-color-brand1-base-contrast-default: #ffffff; + --ds-color-brand2-background-default: #ffffff; + --ds-color-brand2-background-tinted: #f4f3f9; + --ds-color-brand2-surface-default: #ffffff; + --ds-color-brand2-surface-tinted: #eae7f3; + --ds-color-brand2-surface-hover: #ddd7eb; + --ds-color-brand2-surface-active: #cec6e3; + --ds-color-brand2-border-subtle: #c1b6db; + --ds-color-brand2-border-default: #826db7; + --ds-color-brand2-border-strong: #674da7; + --ds-color-brand2-text-subtle: #674da7; + --ds-color-brand2-text-default: #312256; + --ds-color-brand2-base-default: #5B3FA0; + --ds-color-brand2-base-hover: #47317c; + --ds-color-brand2-base-active: #332359; + --ds-color-brand2-base-contrast-subtle: #f1eff7; + --ds-color-brand2-base-contrast-default: #ffffff; + --ds-color-info-background-default: #ffffff; + --ds-color-info-background-tinted: #edf5fa; + --ds-color-info-surface-default: #ffffff; + --ds-color-info-surface-tinted: #dcebf6; + --ds-color-info-surface-hover: #c5ddf0; + --ds-color-info-surface-active: #abcfe9; + --ds-color-info-border-subtle: #94c1e3; + --ds-color-info-border-default: #1f7dc5; + --ds-color-info-border-strong: #0860a3; + --ds-color-info-text-subtle: #0860a3; + --ds-color-info-text-default: #042d4d; + --ds-color-info-base-default: #0A71C0; + --ds-color-info-base-hover: #085d9f; + --ds-color-info-base-active: #074a7e; + --ds-color-info-base-contrast-subtle: #eff6fb; + --ds-color-info-base-contrast-default: #ffffff; + --ds-color-success-background-default: #ffffff; + --ds-color-success-background-tinted: #ecf6ee; + --ds-color-success-surface-default: #ffffff; + --ds-color-success-surface-tinted: #daeddd; + --ds-color-success-surface-hover: #c3e2c7; + --ds-color-success-surface-active: #a8d5ae; + --ds-color-success-border-subtle: #8fc997; + --ds-color-success-border-default: #108c22; + --ds-color-success-border-strong: #056d13; + --ds-color-success-text-subtle: #056d13; + --ds-color-success-text-default: #023409; + --ds-color-success-base-default: #068718; + --ds-color-success-base-hover: #057014; + --ds-color-success-base-active: #045a10; + --ds-color-success-base-contrast-subtle: #fafdfb; + --ds-color-success-base-contrast-default: #ffffff; + --ds-color-warning-background-default: #ffffff; + --ds-color-warning-background-tinted: #fcf2e2; + --ds-color-warning-surface-default: #ffffff; + --ds-color-warning-surface-tinted: #fae6c6; + --ds-color-warning-surface-hover: #f6d5a0; + --ds-color-warning-surface-active: #f2c275; + --ds-color-warning-border-subtle: #eeb04c; + --ds-color-warning-border-default: #a56d13; + --ds-color-warning-border-strong: #80540f; + --ds-color-warning-text-subtle: #80540f; + --ds-color-warning-text-default: #3c2807; + --ds-color-warning-base-default: #EA9B1B; + --ds-color-warning-base-hover: #cd8818; + --ds-color-warning-base-active: #b27614; + --ds-color-warning-base-contrast-subtle: #271a04; + --ds-color-warning-base-contrast-default: #000000; + --ds-color-danger-background-default: #ffffff; + --ds-color-danger-background-tinted: #fbf1f1; + --ds-color-danger-surface-default: #ffffff; + --ds-color-danger-surface-tinted: #f8e4e4; + --ds-color-danger-surface-hover: #f3d2d2; + --ds-color-danger-surface-active: #edbfbf; + --ds-color-danger-border-subtle: #e8adad; + --ds-color-danger-border-default: #ce4d4d; + --ds-color-danger-border-strong: #b81a1a; + --ds-color-danger-text-subtle: #b81a1a; + --ds-color-danger-text-default: #590d0d; + --ds-color-danger-base-default: #C01B1B; + --ds-color-danger-base-hover: #9b1616; + --ds-color-danger-base-active: #791111; + --ds-color-danger-base-contrast-subtle: #f7e1e1; + --ds-color-danger-base-contrast-default: #ffffff; + --ds-color-focus-inner: #ffffff; + --ds-color-focus-outer: #292c30; + --ds-link-color-visited: #663299; + + color-scheme: light; +} + +@media (prefers-color-scheme: light) { + [data-color-scheme="auto"] { + --ds-color-accent-background-default: #ffffff; + --ds-color-accent-background-tinted: #eef4fa; + --ds-color-accent-surface-default: #ffffff; + --ds-color-accent-surface-tinted: #ddeaf6; + --ds-color-accent-surface-hover: #c7ddf0; + --ds-color-accent-surface-active: #afcee9; + --ds-color-accent-border-subtle: #99c0e3; + --ds-color-accent-border-default: #2a7cc5; + --ds-color-accent-border-strong: #005db1; + --ds-color-accent-text-subtle: #005db1; + --ds-color-accent-text-default: #002c54; + --ds-color-accent-base-default: #0062BA; + --ds-color-accent-base-hover: #004f96; + --ds-color-accent-base-active: #003d75; + --ds-color-accent-base-contrast-subtle: #dbe9f5; + --ds-color-accent-base-contrast-default: #ffffff; + --ds-color-neutral-background-default: #ffffff; + --ds-color-neutral-background-tinted: #f3f3f4; + --ds-color-neutral-surface-default: #ffffff; + --ds-color-neutral-surface-tinted: #e8e8e9; + --ds-color-neutral-surface-hover: #d9dadb; + --ds-color-neutral-surface-active: #c9cacb; + --ds-color-neutral-border-subtle: #bbbcbd; + --ds-color-neutral-border-default: #77797b; + --ds-color-neutral-border-strong: #5b5d60; + --ds-color-neutral-text-subtle: #5b5d60; + --ds-color-neutral-text-default: #292c30; + --ds-color-neutral-base-default: #24272B; + --ds-color-neutral-base-hover: #36383c; + --ds-color-neutral-base-active: #484a4e; + --ds-color-neutral-base-contrast-subtle: #b9babb; + --ds-color-neutral-base-contrast-default: #ffffff; + --ds-color-brand1-background-default: #ffffff; + --ds-color-brand1-background-tinted: #edf5f3; + --ds-color-brand1-surface-default: #ffffff; + --ds-color-brand1-surface-tinted: #dcece8; + --ds-color-brand1-surface-hover: #c6dfd9; + --ds-color-brand1-surface-active: #add2c9; + --ds-color-brand1-border-subtle: #96c5b9; + --ds-color-brand1-border-default: #25876f; + --ds-color-brand1-border-strong: #0b6a53; + --ds-color-brand1-text-subtle: #0b6a53; + --ds-color-brand1-text-default: #053227; + --ds-color-brand1-base-default: #0D7A5F; + --ds-color-brand1-base-hover: #0b644e; + --ds-color-brand1-base-active: #084f3d; + --ds-color-brand1-base-contrast-subtle: #ebf4f2; + --ds-color-brand1-base-contrast-default: #ffffff; + --ds-color-brand2-background-default: #ffffff; + --ds-color-brand2-background-tinted: #f4f3f9; + --ds-color-brand2-surface-default: #ffffff; + --ds-color-brand2-surface-tinted: #eae7f3; + --ds-color-brand2-surface-hover: #ddd7eb; + --ds-color-brand2-surface-active: #cec6e3; + --ds-color-brand2-border-subtle: #c1b6db; + --ds-color-brand2-border-default: #826db7; + --ds-color-brand2-border-strong: #674da7; + --ds-color-brand2-text-subtle: #674da7; + --ds-color-brand2-text-default: #312256; + --ds-color-brand2-base-default: #5B3FA0; + --ds-color-brand2-base-hover: #47317c; + --ds-color-brand2-base-active: #332359; + --ds-color-brand2-base-contrast-subtle: #f1eff7; + --ds-color-brand2-base-contrast-default: #ffffff; + --ds-color-info-background-default: #ffffff; + --ds-color-info-background-tinted: #edf5fa; + --ds-color-info-surface-default: #ffffff; + --ds-color-info-surface-tinted: #dcebf6; + --ds-color-info-surface-hover: #c5ddf0; + --ds-color-info-surface-active: #abcfe9; + --ds-color-info-border-subtle: #94c1e3; + --ds-color-info-border-default: #1f7dc5; + --ds-color-info-border-strong: #0860a3; + --ds-color-info-text-subtle: #0860a3; + --ds-color-info-text-default: #042d4d; + --ds-color-info-base-default: #0A71C0; + --ds-color-info-base-hover: #085d9f; + --ds-color-info-base-active: #074a7e; + --ds-color-info-base-contrast-subtle: #eff6fb; + --ds-color-info-base-contrast-default: #ffffff; + --ds-color-success-background-default: #ffffff; + --ds-color-success-background-tinted: #ecf6ee; + --ds-color-success-surface-default: #ffffff; + --ds-color-success-surface-tinted: #daeddd; + --ds-color-success-surface-hover: #c3e2c7; + --ds-color-success-surface-active: #a8d5ae; + --ds-color-success-border-subtle: #8fc997; + --ds-color-success-border-default: #108c22; + --ds-color-success-border-strong: #056d13; + --ds-color-success-text-subtle: #056d13; + --ds-color-success-text-default: #023409; + --ds-color-success-base-default: #068718; + --ds-color-success-base-hover: #057014; + --ds-color-success-base-active: #045a10; + --ds-color-success-base-contrast-subtle: #fafdfb; + --ds-color-success-base-contrast-default: #ffffff; + --ds-color-warning-background-default: #ffffff; + --ds-color-warning-background-tinted: #fcf2e2; + --ds-color-warning-surface-default: #ffffff; + --ds-color-warning-surface-tinted: #fae6c6; + --ds-color-warning-surface-hover: #f6d5a0; + --ds-color-warning-surface-active: #f2c275; + --ds-color-warning-border-subtle: #eeb04c; + --ds-color-warning-border-default: #a56d13; + --ds-color-warning-border-strong: #80540f; + --ds-color-warning-text-subtle: #80540f; + --ds-color-warning-text-default: #3c2807; + --ds-color-warning-base-default: #EA9B1B; + --ds-color-warning-base-hover: #cd8818; + --ds-color-warning-base-active: #b27614; + --ds-color-warning-base-contrast-subtle: #271a04; + --ds-color-warning-base-contrast-default: #000000; + --ds-color-danger-background-default: #ffffff; + --ds-color-danger-background-tinted: #fbf1f1; + --ds-color-danger-surface-default: #ffffff; + --ds-color-danger-surface-tinted: #f8e4e4; + --ds-color-danger-surface-hover: #f3d2d2; + --ds-color-danger-surface-active: #edbfbf; + --ds-color-danger-border-subtle: #e8adad; + --ds-color-danger-border-default: #ce4d4d; + --ds-color-danger-border-strong: #b81a1a; + --ds-color-danger-text-subtle: #b81a1a; + --ds-color-danger-text-default: #590d0d; + --ds-color-danger-base-default: #C01B1B; + --ds-color-danger-base-hover: #9b1616; + --ds-color-danger-base-active: #791111; + --ds-color-danger-base-contrast-subtle: #f7e1e1; + --ds-color-danger-base-contrast-default: #ffffff; + --ds-color-focus-inner: #ffffff; + --ds-color-focus-outer: #292c30; + --ds-link-color-visited: #663299; + + color-scheme: light; +} + +} + +} + +@layer ds.theme.size { +:root, [data-size] { + --ds-size-base: 18; + --ds-size-step: 4; + + --ds-size-0: calc(var(--ds-size-unit) * 0); + --ds-size-1: calc(var(--ds-size-unit) * 1); + --ds-size-2: calc(var(--ds-size-unit) * 2); + --ds-size-3: calc(var(--ds-size-unit) * 3); + --ds-size-4: calc(var(--ds-size-unit) * 4); + --ds-size-5: calc(var(--ds-size-unit) * 5); + --ds-size-6: calc(var(--ds-size-unit) * 6); + --ds-size-7: calc(var(--ds-size-unit) * 7); + --ds-size-8: calc(var(--ds-size-unit) * 8); + --ds-size-9: calc(var(--ds-size-unit) * 9); + --ds-size-10: calc(var(--ds-size-unit) * 10); + --ds-size-11: calc(var(--ds-size-unit) * 11); + --ds-size-12: calc(var(--ds-size-unit) * 12); + --ds-size-13: calc(var(--ds-size-unit) * 13); + --ds-size-14: calc(var(--ds-size-unit) * 14); + --ds-size-15: calc(var(--ds-size-unit) * 15); + --ds-size-18: calc(var(--ds-size-unit) * 18); + --ds-size-22: calc(var(--ds-size-unit) * 22); + --ds-size-26: calc(var(--ds-size-unit) * 26); + --ds-size-30: calc(var(--ds-size-unit) * 30); + --ds-size-unit: calc(1rem * var(--ds-size-step) / var(--ds-size-base) * var(--ds-size-mode-font-size)); + + @supports (width: round(down, .1em, 1px)) { + --ds-size-0: round(down, calc(var(--ds-size-unit) * 0), 1px); + --ds-size-1: round(down, calc(var(--ds-size-unit) * 1), 1px); + --ds-size-2: round(down, calc(var(--ds-size-unit) * 2), 1px); + --ds-size-3: round(down, calc(var(--ds-size-unit) * 3), 1px); + --ds-size-4: round(down, calc(var(--ds-size-unit) * 4), 1px); + --ds-size-5: round(down, calc(var(--ds-size-unit) * 5), 1px); + --ds-size-6: round(down, calc(var(--ds-size-unit) * 6), 1px); + --ds-size-7: round(down, calc(var(--ds-size-unit) * 7), 1px); + --ds-size-8: round(down, calc(var(--ds-size-unit) * 8), 1px); + --ds-size-9: round(down, calc(var(--ds-size-unit) * 9), 1px); + --ds-size-10: round(down, calc(var(--ds-size-unit) * 10), 1px); + --ds-size-11: round(down, calc(var(--ds-size-unit) * 11), 1px); + --ds-size-12: round(down, calc(var(--ds-size-unit) * 12), 1px); + --ds-size-13: round(down, calc(var(--ds-size-unit) * 13), 1px); + --ds-size-14: round(down, calc(var(--ds-size-unit) * 14), 1px); + --ds-size-15: round(down, calc(var(--ds-size-unit) * 15), 1px); + --ds-size-18: round(down, calc(var(--ds-size-unit) * 18), 1px); + --ds-size-22: round(down, calc(var(--ds-size-unit) * 22), 1px); + --ds-size-26: round(down, calc(var(--ds-size-unit) * 26), 1px); + --ds-size-30: round(down, calc(var(--ds-size-unit) * 30), 1px); + } +} + +} + +@layer ds.theme.semantic { +:root { + --ds-designsystemet-fonts-primary-font-size-1: 12px; + --ds-designsystemet-fonts-primary-font-size-2: 14px; + --ds-designsystemet-fonts-primary-font-size-3: 16px; + --ds-designsystemet-fonts-primary-font-size-4: 18px; + --ds-designsystemet-fonts-primary-font-size-5: 21px; + --ds-designsystemet-fonts-primary-font-size-6: 24px; + --ds-designsystemet-fonts-primary-font-size-7: 31px; + --ds-designsystemet-fonts-primary-font-size-8: 35px; + --ds-designsystemet-fonts-primary-font-size-9: 46px; + --ds-designsystemet-fonts-primary-font-size-10: 60px; + --ds-designsystemet-fonts-primary-font-size-6-half: 27px; + --ds-designsystemet-fonts-primary-font-size-8-half: 40px; + --ds-designsystemet-fonts-primary-font-size-9-half: 52px; + --ds-designsystemet-fonts-primary-font-scale-base: 18; + --ds-designsystemet-fonts-primary-font-scale-ratio: 1.143136; + --ds-designsystemet-fonts-primary-line-height-sm: 1.3; + --ds-designsystemet-fonts-primary-line-height-md: 1.5; + --ds-designsystemet-fonts-primary-line-height-lg: 1.7; + --ds-designsystemet-fonts-primary-letter-spacing-1: -1%; + --ds-designsystemet-fonts-primary-letter-spacing-2: -0.5%; + --ds-designsystemet-fonts-primary-letter-spacing-3: -0.25%; + --ds-designsystemet-fonts-primary-letter-spacing-4: -0.15%; + --ds-designsystemet-fonts-primary-letter-spacing-5: 0%; + --ds-designsystemet-fonts-primary-letter-spacing-6: 0.15%; + --ds-designsystemet-fonts-primary-letter-spacing-7: 0.25%; + --ds-designsystemet-fonts-primary-letter-spacing-8: 0.5%; + --ds-designsystemet-fonts-primary-letter-spacing-9: 1.5%; + --ds-designsystemet-fonts-secondary-font-size-1: 10px; + --ds-designsystemet-fonts-secondary-font-size-2: 11px; + --ds-designsystemet-fonts-secondary-font-size-3: 13px; + --ds-designsystemet-fonts-secondary-font-size-4: 15px; + --ds-designsystemet-fonts-secondary-font-size-5: 17px; + --ds-designsystemet-fonts-secondary-font-size-6: 20px; + --ds-designsystemet-fonts-secondary-font-size-7: 26px; + --ds-designsystemet-fonts-secondary-font-size-8: 29px; + --ds-designsystemet-fonts-secondary-font-size-9: 38px; + --ds-designsystemet-fonts-secondary-font-size-10: 50px; + --ds-designsystemet-fonts-secondary-font-size-6-half: 22px; + --ds-designsystemet-fonts-secondary-font-size-8-half: 33px; + --ds-designsystemet-fonts-secondary-font-size-9-half: 44px; + --ds-designsystemet-fonts-secondary-font-scale-base: 15; + --ds-designsystemet-fonts-secondary-font-scale-ratio: 1.143136; + --ds-designsystemet-fonts-secondary-line-height-sm: 1.3; + --ds-designsystemet-fonts-secondary-line-height-md: 1.5; + --ds-designsystemet-fonts-secondary-line-height-lg: 1.7; + --ds-designsystemet-fonts-secondary-letter-spacing-1: -1%; + --ds-designsystemet-fonts-secondary-letter-spacing-2: -0.5%; + --ds-designsystemet-fonts-secondary-letter-spacing-3: -0.25%; + --ds-designsystemet-fonts-secondary-letter-spacing-4: -0.15%; + --ds-designsystemet-fonts-secondary-letter-spacing-5: 0%; + --ds-designsystemet-fonts-secondary-letter-spacing-6: 0.15%; + --ds-designsystemet-fonts-secondary-letter-spacing-7: 0.25%; + --ds-designsystemet-fonts-secondary-letter-spacing-8: 0.5%; + --ds-designsystemet-fonts-secondary-letter-spacing-9: 1.5%; + --ds-different-fonts-fonts-primary-font-size-1: 12px; + --ds-different-fonts-fonts-primary-font-size-2: 14px; + --ds-different-fonts-fonts-primary-font-size-3: 16px; + --ds-different-fonts-fonts-primary-font-size-4: 18px; + --ds-different-fonts-fonts-primary-font-size-5: 21px; + --ds-different-fonts-fonts-primary-font-size-6: 24px; + --ds-different-fonts-fonts-primary-font-size-7: 31px; + --ds-different-fonts-fonts-primary-font-size-8: 35px; + --ds-different-fonts-fonts-primary-font-size-9: 46px; + --ds-different-fonts-fonts-primary-font-size-10: 60px; + --ds-different-fonts-fonts-primary-font-size-6-half: 27px; + --ds-different-fonts-fonts-primary-font-size-8-half: 40px; + --ds-different-fonts-fonts-primary-font-size-9-half: 52px; + --ds-different-fonts-fonts-primary-font-scale-base: 18; + --ds-different-fonts-fonts-primary-font-scale-ratio: 1.143136; + --ds-different-fonts-fonts-primary-line-height-sm: 1.3; + --ds-different-fonts-fonts-primary-line-height-md: 1.5; + --ds-different-fonts-fonts-primary-line-height-lg: 1.7; + --ds-different-fonts-fonts-primary-letter-spacing-1: -1%; + --ds-different-fonts-fonts-primary-letter-spacing-2: -0.5%; + --ds-different-fonts-fonts-primary-letter-spacing-3: -0.25%; + --ds-different-fonts-fonts-primary-letter-spacing-4: -0.15%; + --ds-different-fonts-fonts-primary-letter-spacing-5: 0%; + --ds-different-fonts-fonts-primary-letter-spacing-6: 0.15%; + --ds-different-fonts-fonts-primary-letter-spacing-7: 0.25%; + --ds-different-fonts-fonts-primary-letter-spacing-8: 0.5%; + --ds-different-fonts-fonts-primary-letter-spacing-9: 1.5%; + --ds-different-fonts-fonts-secondary-font-size-1: 11px; + --ds-different-fonts-fonts-secondary-font-size-2: 12px; + --ds-different-fonts-fonts-secondary-font-size-3: 14px; + --ds-different-fonts-fonts-secondary-font-size-4: 16px; + --ds-different-fonts-fonts-secondary-font-size-5: 18px; + --ds-different-fonts-fonts-secondary-font-size-6: 21px; + --ds-different-fonts-fonts-secondary-font-size-7: 27px; + --ds-different-fonts-fonts-secondary-font-size-8: 31px; + --ds-different-fonts-fonts-secondary-font-size-9: 41px; + --ds-different-fonts-fonts-secondary-font-size-10: 53px; + --ds-different-fonts-fonts-secondary-font-size-6-half: 24px; + --ds-different-fonts-fonts-secondary-font-size-8-half: 36px; + --ds-different-fonts-fonts-secondary-font-size-9-half: 47px; + --ds-different-fonts-fonts-secondary-font-scale-base: 16; + --ds-different-fonts-fonts-secondary-font-scale-ratio: 1.143136; + --ds-different-fonts-fonts-secondary-line-height-sm: 1.3; + --ds-different-fonts-fonts-secondary-line-height-md: 1.5; + --ds-different-fonts-fonts-secondary-line-height-lg: 1.7; + --ds-different-fonts-fonts-secondary-letter-spacing-1: -1%; + --ds-different-fonts-fonts-secondary-letter-spacing-2: -0.5%; + --ds-different-fonts-fonts-secondary-letter-spacing-3: -0.25%; + --ds-different-fonts-fonts-secondary-letter-spacing-4: -0.15%; + --ds-different-fonts-fonts-secondary-letter-spacing-5: 0%; + --ds-different-fonts-fonts-secondary-letter-spacing-6: 0.15%; + --ds-different-fonts-fonts-secondary-letter-spacing-7: 0.25%; + --ds-different-fonts-fonts-secondary-letter-spacing-8: 0.5%; + --ds-different-fonts-fonts-secondary-letter-spacing-9: 1.5%; + --ds-fonts-primary-font-size-1: 12px; + --ds-fonts-primary-font-size-2: 14px; + --ds-fonts-primary-font-size-3: 16px; + --ds-fonts-primary-font-size-4: 18px; + --ds-fonts-primary-font-size-5: 21px; + --ds-fonts-primary-font-size-6: 24px; + --ds-fonts-primary-font-size-7: 31px; + --ds-fonts-primary-font-size-8: 35px; + --ds-fonts-primary-font-size-9: 46px; + --ds-fonts-primary-font-size-10: 60px; + --ds-fonts-primary-line-height-sm: 1.3; + --ds-fonts-primary-line-height-md: 1.5; + --ds-fonts-primary-line-height-lg: 1.7; + --ds-fonts-primary-letter-spacing-1: -1%; + --ds-fonts-primary-letter-spacing-2: -0.5%; + --ds-fonts-primary-letter-spacing-3: -0.25%; + --ds-fonts-primary-letter-spacing-4: -0.15%; + --ds-fonts-primary-letter-spacing-5: 0%; + --ds-fonts-primary-letter-spacing-6: 0.15%; + --ds-fonts-primary-letter-spacing-7: 0.25%; + --ds-fonts-primary-letter-spacing-8: 0.5%; + --ds-fonts-primary-letter-spacing-9: 1.5%; + --ds-fonts-secondary-font-size-1: 11px; + --ds-fonts-secondary-font-size-2: 12px; + --ds-fonts-secondary-font-size-3: 14px; + --ds-fonts-secondary-font-size-4: 16px; + --ds-fonts-secondary-font-size-5: 18px; + --ds-fonts-secondary-font-size-6: 21px; + --ds-fonts-secondary-font-size-7: 27px; + --ds-fonts-secondary-font-size-8: 31px; + --ds-fonts-secondary-font-size-9: 41px; + --ds-fonts-secondary-font-size-10: 53px; + --ds-fonts-secondary-line-height-sm: 1.3; + --ds-fonts-secondary-line-height-md: 1.5; + --ds-fonts-secondary-line-height-lg: 1.7; + --ds-fonts-secondary-letter-spacing-1: -1%; + --ds-fonts-secondary-letter-spacing-2: -0.5%; + --ds-fonts-secondary-letter-spacing-3: -0.25%; + --ds-fonts-secondary-letter-spacing-4: -0.15%; + --ds-fonts-secondary-letter-spacing-5: 0%; + --ds-fonts-secondary-letter-spacing-6: 0.15%; + --ds-fonts-secondary-letter-spacing-7: 0.25%; + --ds-fonts-secondary-letter-spacing-8: 0.5%; + --ds-fonts-secondary-letter-spacing-9: 1.5%; + --ds-typography-mapping-heading-2xl-line-height: 1.3; + --ds-typography-mapping-heading-2xl-font-size: 60px; + --ds-typography-mapping-heading-2xl-letter-spacing: -1%; + --ds-typography-mapping-heading-xl-line-height: 1.3; + --ds-typography-mapping-heading-xl-font-size: 46px; + --ds-typography-mapping-heading-xl-letter-spacing: -1%; + --ds-typography-mapping-heading-lg-line-height: 1.3; + --ds-typography-mapping-heading-lg-font-size: 35px; + --ds-typography-mapping-heading-lg-letter-spacing: -0.5%; + --ds-typography-mapping-heading-md-line-height: 1.3; + --ds-typography-mapping-heading-md-font-size: 31px; + --ds-typography-mapping-heading-md-letter-spacing: -0.25%; + --ds-typography-mapping-heading-sm-line-height: 1.3; + --ds-typography-mapping-heading-sm-font-size: 24px; + --ds-typography-mapping-heading-sm-letter-spacing: 0%; + --ds-typography-mapping-heading-xs-line-height: 1.3; + --ds-typography-mapping-heading-xs-font-size: 21px; + --ds-typography-mapping-heading-xs-letter-spacing: 0.15%; + --ds-typography-mapping-heading-2xs-line-height: 1.3; + --ds-typography-mapping-heading-2xs-font-size: 18px; + --ds-typography-mapping-heading-2xs-letter-spacing: 0.15%; + --ds-typography-mapping-body-xl-line-height: 1.5; + --ds-typography-mapping-body-xl-font-size: 21px; + --ds-typography-mapping-body-xl-letter-spacing: 0.5%; + --ds-typography-mapping-body-lg-line-height: 1.5; + --ds-typography-mapping-body-lg-font-size: 18px; + --ds-typography-mapping-body-lg-letter-spacing: 0.5%; + --ds-typography-mapping-body-md-line-height: 1.5; + --ds-typography-mapping-body-md-font-size: 16px; + --ds-typography-mapping-body-md-letter-spacing: 0.5%; + --ds-typography-mapping-body-sm-line-height: 1.5; + --ds-typography-mapping-body-sm-font-size: 14px; + --ds-typography-mapping-body-sm-letter-spacing: 0.25%; + --ds-typography-mapping-body-xs-line-height: 1.5; + --ds-typography-mapping-body-xs-font-size: 12px; + --ds-typography-mapping-body-xs-letter-spacing: 0.15%; + --ds-typography-mapping-body-short-xl-line-height: 1.3; + --ds-typography-mapping-body-short-xl-font-size: 21px; + --ds-typography-mapping-body-short-xl-letter-spacing: 0.5%; + --ds-typography-mapping-body-short-lg-line-height: 1.3; + --ds-typography-mapping-body-short-lg-font-size: 18px; + --ds-typography-mapping-body-short-lg-letter-spacing: 0.5%; + --ds-typography-mapping-body-short-md-line-height: 1.3; + --ds-typography-mapping-body-short-md-font-size: 16px; + --ds-typography-mapping-body-short-md-letter-spacing: 0.5%; + --ds-typography-mapping-body-short-sm-line-height: 1.3; + --ds-typography-mapping-body-short-sm-font-size: 14px; + --ds-typography-mapping-body-short-sm-letter-spacing: 0.25%; + --ds-typography-mapping-body-short-xs-line-height: 1.3; + --ds-typography-mapping-body-short-xs-font-size: 12px; + --ds-typography-mapping-body-short-xs-letter-spacing: 0.15%; + --ds-typography-mapping-body-long-xl-line-height: 1.7; + --ds-typography-mapping-body-long-xl-font-size: 21px; + --ds-typography-mapping-body-long-xl-letter-spacing: 0.5%; + --ds-typography-mapping-body-long-lg-line-height: 1.7; + --ds-typography-mapping-body-long-lg-font-size: 18px; + --ds-typography-mapping-body-long-lg-letter-spacing: 0.5%; + --ds-typography-mapping-body-long-md-line-height: 1.7; + --ds-typography-mapping-body-long-md-font-size: 16px; + --ds-typography-mapping-body-long-md-letter-spacing: 0.5%; + --ds-typography-mapping-body-long-sm-line-height: 1.7; + --ds-typography-mapping-body-long-sm-font-size: 14px; + --ds-typography-mapping-body-long-sm-letter-spacing: 0.25%; + --ds-typography-mapping-body-long-xs-line-height: 1.7; + --ds-typography-mapping-body-long-xs-font-size: 12px; + --ds-typography-mapping-body-long-xs-letter-spacing: 0.15%; + --ds-border-radius-base: 0.25rem; + --ds-border-radius-scale: 0.25rem; + --ds-border-radius-sm: min(var(--ds-border-radius-base)*0.5,var(--ds-border-radius-scale)); + --ds-border-radius-md: min(var(--ds-border-radius-base),var(--ds-border-radius-scale)*2); + --ds-border-radius-lg: min(var(--ds-border-radius-base)*2,var(--ds-border-radius-scale)*5); + --ds-border-radius-xl: min(var(--ds-border-radius-base)*3,var(--ds-border-radius-scale)*7); + --ds-border-radius-default: var(--ds-border-radius-base); + --ds-border-radius-full: 624.9375rem; + --ds-border-width-default: 1px; + --ds-border-width-focus: 3px; + --ds-shadow-xs: 0 0 1px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.12); + --ds-shadow-sm: 0 0 1px 0 rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.1); + --ds-shadow-md: 0 0 1px 0 rgba(0,0,0,0.14), 0 2px 4px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.12); + --ds-shadow-lg: 0 0 1px 0 rgba(0,0,0,0.13), 0 3px 5px 0 rgba(0,0,0,0.13), 0 6px 12px 0 rgba(0,0,0,0.14); + --ds-shadow-xl: 0 0 1px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.16), 0 12px 24px 0 rgba(0,0,0,0.16); + --ds-opacity-disabled: 30%; +} + +} + +@layer ds.theme.color-scheme.dark { +[data-color-scheme="dark"] { + --ds-color-accent-background-default: #0c1927; + --ds-color-accent-background-tinted: #102033; + --ds-color-accent-surface-default: #142941; + --ds-color-accent-surface-tinted: #172f4b; + --ds-color-accent-surface-hover: #1a3757; + --ds-color-accent-surface-active: #21446d; + --ds-color-accent-border-subtle: #285182; + --ds-color-accent-border-default: #5a84b4; + --ds-color-accent-border-strong: #8eaacb; + --ds-color-accent-text-subtle: #8eaacb; + --ds-color-accent-text-default: #e7edf4; + --ds-color-accent-base-default: #4c91cf; + --ds-color-accent-base-hover: #6fa6d8; + --ds-color-accent-base-active: #92bce1; + --ds-color-accent-base-contrast-subtle: #0d1924; + --ds-color-accent-base-contrast-default: #000000; + --ds-color-neutral-background-default: #17181a; + --ds-color-neutral-background-tinted: #1e2022; + --ds-color-neutral-surface-default: #26282b; + --ds-color-neutral-surface-tinted: #2c2e31; + --ds-color-neutral-surface-hover: #343538; + --ds-color-neutral-surface-active: #414346; + --ds-color-neutral-border-subtle: #4e5052; + --ds-color-neutral-border-default: #808183; + --ds-color-neutral-border-strong: #a7a8a9; + --ds-color-neutral-text-subtle: #a7a8a9; + --ds-color-neutral-text-default: #ececec; + --ds-color-neutral-base-default: #aaabad; + --ds-color-neutral-base-hover: #959698; + --ds-color-neutral-base-active: #7f8184; + --ds-color-neutral-base-contrast-subtle: #1b1b1b; + --ds-color-neutral-base-contrast-default: #000000; + --ds-color-brand1-background-default: #0d1a16; + --ds-color-brand1-background-tinted: #11231d; + --ds-color-brand1-surface-default: #162c25; + --ds-color-brand1-surface-tinted: #19322a; + --ds-color-brand1-surface-hover: #1d3b31; + --ds-color-brand1-surface-active: #254a3e; + --ds-color-brand1-border-subtle: #2c584a; + --ds-color-brand1-border-default: #598b7b; + --ds-color-brand1-border-strong: #8dafa4; + --ds-color-brand1-text-subtle: #8dafa4; + --ds-color-brand1-text-default: #e7eeeb; + --ds-color-brand1-base-default: #38927b; + --ds-color-brand1-base-hover: #5aa492; + --ds-color-brand1-base-active: #7eb8aa; + --ds-color-brand1-base-contrast-subtle: #071310; + --ds-color-brand1-base-contrast-default: #000000; + --ds-color-brand2-background-default: #191528; + --ds-color-brand2-background-tinted: #211c34; + --ds-color-brand2-surface-default: #2a2342; + --ds-color-brand2-surface-tinted: #31284c; + --ds-color-brand2-surface-hover: #392f59; + --ds-color-brand2-surface-active: #473b6f; + --ds-color-brand2-border-subtle: #554685; + --ds-color-brand2-border-default: #867baa; + --ds-color-brand2-border-strong: #aba3c4; + --ds-color-brand2-text-subtle: #aba3c4; + --ds-color-brand2-text-default: #edebf2; + --ds-color-brand2-base-default: #a697cc; + --ds-color-brand2-base-hover: #9380c0; + --ds-color-brand2-base-active: #7e69b5; + --ds-color-brand2-base-contrast-subtle: #131117; + --ds-color-brand2-base-contrast-default: #000000; + --ds-color-info-background-default: #0d1925; + --ds-color-info-background-tinted: #112130; + --ds-color-info-surface-default: #15293d; + --ds-color-info-surface-tinted: #182f46; + --ds-color-info-surface-hover: #1c3751; + --ds-color-info-surface-active: #234566; + --ds-color-info-border-subtle: #2a537a; + --ds-color-info-border-default: #5585b4; + --ds-color-info-border-strong: #8aabcb; + --ds-color-info-text-subtle: #8aabcb; + --ds-color-info-text-default: #e6edf4; + --ds-color-info-base-default: #2d85c9; + --ds-color-info-base-hover: #519ad2; + --ds-color-info-base-active: #77b0dc; + --ds-color-info-base-contrast-subtle: #050e15; + --ds-color-info-base-contrast-default: #000000; + --ds-color-success-background-default: #0d1b0d; + --ds-color-success-background-tinted: #112411; + --ds-color-success-surface-default: #152d15; + --ds-color-success-surface-tinted: #183418; + --ds-color-success-surface-hover: #1c3c1c; + --ds-color-success-surface-active: #244c24; + --ds-color-success-border-subtle: #2b5a2b; + --ds-color-success-border-default: #528f52; + --ds-color-success-border-strong: #89b289; + --ds-color-success-text-subtle: #89b289; + --ds-color-success-text-default: #e6efe6; + --ds-color-success-base-default: #138d24; + --ds-color-success-base-hover: #3ca14b; + --ds-color-success-base-active: #66b571; + --ds-color-success-base-contrast-subtle: #010501; + --ds-color-success-base-contrast-default: #000000; + --ds-color-warning-background-default: #1e160d; + --ds-color-warning-background-tinted: #281e11; + --ds-color-warning-surface-default: #322616; + --ds-color-warning-surface-tinted: #3a2b19; + --ds-color-warning-surface-hover: #43321d; + --ds-color-warning-surface-active: #543f24; + --ds-color-warning-border-subtle: #654b2b; + --ds-color-warning-border-default: #a37a46; + --ds-color-warning-border-strong: #d39e5b; + --ds-color-warning-text-subtle: #d39e5b; + --ds-color-warning-text-default: #f7ebdb; + --ds-color-warning-base-default: #60400b; + --ds-color-warning-base-hover: #7a510e; + --ds-color-warning-base-active: #946211; + --ds-color-warning-base-contrast-subtle: #e6e2d9; + --ds-color-warning-base-contrast-default: #ffffff; + --ds-color-danger-background-default: #2a100e; + --ds-color-danger-background-tinted: #371512; + --ds-color-danger-surface-default: #451b17; + --ds-color-danger-surface-tinted: #4f1f1b; + --ds-color-danger-surface-hover: #5c241f; + --ds-color-danger-surface-active: #722d27; + --ds-color-danger-border-subtle: #88352e; + --ds-color-danger-border-default: #bc6b64; + --ds-color-danger-border-strong: #d19a96; + --ds-color-danger-text-subtle: #d19a96; + --ds-color-danger-text-default: #f5eae9; + --ds-color-danger-base-default: #d76e6e; + --ds-color-danger-base-hover: #df8b8b; + --ds-color-danger-base-active: #e7a8a8; + --ds-color-danger-base-contrast-subtle: #271414; + --ds-color-danger-base-contrast-default: #000000; + --ds-color-focus-inner: #17181a; + --ds-color-focus-outer: #ececec; + --ds-link-color-visited: #b49acd; + + color-scheme: dark; +} + +@media (prefers-color-scheme: dark) { + [data-color-scheme="auto"] { + --ds-color-accent-background-default: #0c1927; + --ds-color-accent-background-tinted: #102033; + --ds-color-accent-surface-default: #142941; + --ds-color-accent-surface-tinted: #172f4b; + --ds-color-accent-surface-hover: #1a3757; + --ds-color-accent-surface-active: #21446d; + --ds-color-accent-border-subtle: #285182; + --ds-color-accent-border-default: #5a84b4; + --ds-color-accent-border-strong: #8eaacb; + --ds-color-accent-text-subtle: #8eaacb; + --ds-color-accent-text-default: #e7edf4; + --ds-color-accent-base-default: #4c91cf; + --ds-color-accent-base-hover: #6fa6d8; + --ds-color-accent-base-active: #92bce1; + --ds-color-accent-base-contrast-subtle: #0d1924; + --ds-color-accent-base-contrast-default: #000000; + --ds-color-neutral-background-default: #17181a; + --ds-color-neutral-background-tinted: #1e2022; + --ds-color-neutral-surface-default: #26282b; + --ds-color-neutral-surface-tinted: #2c2e31; + --ds-color-neutral-surface-hover: #343538; + --ds-color-neutral-surface-active: #414346; + --ds-color-neutral-border-subtle: #4e5052; + --ds-color-neutral-border-default: #808183; + --ds-color-neutral-border-strong: #a7a8a9; + --ds-color-neutral-text-subtle: #a7a8a9; + --ds-color-neutral-text-default: #ececec; + --ds-color-neutral-base-default: #aaabad; + --ds-color-neutral-base-hover: #959698; + --ds-color-neutral-base-active: #7f8184; + --ds-color-neutral-base-contrast-subtle: #1b1b1b; + --ds-color-neutral-base-contrast-default: #000000; + --ds-color-brand1-background-default: #0d1a16; + --ds-color-brand1-background-tinted: #11231d; + --ds-color-brand1-surface-default: #162c25; + --ds-color-brand1-surface-tinted: #19322a; + --ds-color-brand1-surface-hover: #1d3b31; + --ds-color-brand1-surface-active: #254a3e; + --ds-color-brand1-border-subtle: #2c584a; + --ds-color-brand1-border-default: #598b7b; + --ds-color-brand1-border-strong: #8dafa4; + --ds-color-brand1-text-subtle: #8dafa4; + --ds-color-brand1-text-default: #e7eeeb; + --ds-color-brand1-base-default: #38927b; + --ds-color-brand1-base-hover: #5aa492; + --ds-color-brand1-base-active: #7eb8aa; + --ds-color-brand1-base-contrast-subtle: #071310; + --ds-color-brand1-base-contrast-default: #000000; + --ds-color-brand2-background-default: #191528; + --ds-color-brand2-background-tinted: #211c34; + --ds-color-brand2-surface-default: #2a2342; + --ds-color-brand2-surface-tinted: #31284c; + --ds-color-brand2-surface-hover: #392f59; + --ds-color-brand2-surface-active: #473b6f; + --ds-color-brand2-border-subtle: #554685; + --ds-color-brand2-border-default: #867baa; + --ds-color-brand2-border-strong: #aba3c4; + --ds-color-brand2-text-subtle: #aba3c4; + --ds-color-brand2-text-default: #edebf2; + --ds-color-brand2-base-default: #a697cc; + --ds-color-brand2-base-hover: #9380c0; + --ds-color-brand2-base-active: #7e69b5; + --ds-color-brand2-base-contrast-subtle: #131117; + --ds-color-brand2-base-contrast-default: #000000; + --ds-color-info-background-default: #0d1925; + --ds-color-info-background-tinted: #112130; + --ds-color-info-surface-default: #15293d; + --ds-color-info-surface-tinted: #182f46; + --ds-color-info-surface-hover: #1c3751; + --ds-color-info-surface-active: #234566; + --ds-color-info-border-subtle: #2a537a; + --ds-color-info-border-default: #5585b4; + --ds-color-info-border-strong: #8aabcb; + --ds-color-info-text-subtle: #8aabcb; + --ds-color-info-text-default: #e6edf4; + --ds-color-info-base-default: #2d85c9; + --ds-color-info-base-hover: #519ad2; + --ds-color-info-base-active: #77b0dc; + --ds-color-info-base-contrast-subtle: #050e15; + --ds-color-info-base-contrast-default: #000000; + --ds-color-success-background-default: #0d1b0d; + --ds-color-success-background-tinted: #112411; + --ds-color-success-surface-default: #152d15; + --ds-color-success-surface-tinted: #183418; + --ds-color-success-surface-hover: #1c3c1c; + --ds-color-success-surface-active: #244c24; + --ds-color-success-border-subtle: #2b5a2b; + --ds-color-success-border-default: #528f52; + --ds-color-success-border-strong: #89b289; + --ds-color-success-text-subtle: #89b289; + --ds-color-success-text-default: #e6efe6; + --ds-color-success-base-default: #138d24; + --ds-color-success-base-hover: #3ca14b; + --ds-color-success-base-active: #66b571; + --ds-color-success-base-contrast-subtle: #010501; + --ds-color-success-base-contrast-default: #000000; + --ds-color-warning-background-default: #1e160d; + --ds-color-warning-background-tinted: #281e11; + --ds-color-warning-surface-default: #322616; + --ds-color-warning-surface-tinted: #3a2b19; + --ds-color-warning-surface-hover: #43321d; + --ds-color-warning-surface-active: #543f24; + --ds-color-warning-border-subtle: #654b2b; + --ds-color-warning-border-default: #a37a46; + --ds-color-warning-border-strong: #d39e5b; + --ds-color-warning-text-subtle: #d39e5b; + --ds-color-warning-text-default: #f7ebdb; + --ds-color-warning-base-default: #60400b; + --ds-color-warning-base-hover: #7a510e; + --ds-color-warning-base-active: #946211; + --ds-color-warning-base-contrast-subtle: #e6e2d9; + --ds-color-warning-base-contrast-default: #ffffff; + --ds-color-danger-background-default: #2a100e; + --ds-color-danger-background-tinted: #371512; + --ds-color-danger-surface-default: #451b17; + --ds-color-danger-surface-tinted: #4f1f1b; + --ds-color-danger-surface-hover: #5c241f; + --ds-color-danger-surface-active: #722d27; + --ds-color-danger-border-subtle: #88352e; + --ds-color-danger-border-default: #bc6b64; + --ds-color-danger-border-strong: #d19a96; + --ds-color-danger-text-subtle: #d19a96; + --ds-color-danger-text-default: #f5eae9; + --ds-color-danger-base-default: #d76e6e; + --ds-color-danger-base-hover: #df8b8b; + --ds-color-danger-base-active: #e7a8a8; + --ds-color-danger-base-contrast-subtle: #271414; + --ds-color-danger-base-contrast-default: #000000; + --ds-color-focus-inner: #17181a; + --ds-color-focus-outer: #ececec; + --ds-link-color-visited: #b49acd; + + color-scheme: dark; +} + +} + +} + +@layer ds.theme.color { +:root, [data-color-scheme], [data-color="accent"] { + --ds-color-background-default: var(--ds-color-accent-background-default); + --ds-color-background-tinted: var(--ds-color-accent-background-tinted); + --ds-color-surface-default: var(--ds-color-accent-surface-default); + --ds-color-surface-tinted: var(--ds-color-accent-surface-tinted); + --ds-color-surface-hover: var(--ds-color-accent-surface-hover); + --ds-color-surface-active: var(--ds-color-accent-surface-active); + --ds-color-border-subtle: var(--ds-color-accent-border-subtle); + --ds-color-border-default: var(--ds-color-accent-border-default); + --ds-color-border-strong: var(--ds-color-accent-border-strong); + --ds-color-text-subtle: var(--ds-color-accent-text-subtle); + --ds-color-text-default: var(--ds-color-accent-text-default); + --ds-color-base-default: var(--ds-color-accent-base-default); + --ds-color-base-hover: var(--ds-color-accent-base-hover); + --ds-color-base-active: var(--ds-color-accent-base-active); + --ds-color-base-contrast-subtle: var(--ds-color-accent-base-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-accent-base-contrast-default); +} + +} + +@layer ds.theme.color { +[data-color="brand1"], [data-color-scheme][data-color="brand1"] { + --ds-color-background-default: var(--ds-color-brand1-background-default); + --ds-color-background-tinted: var(--ds-color-brand1-background-tinted); + --ds-color-surface-default: var(--ds-color-brand1-surface-default); + --ds-color-surface-tinted: var(--ds-color-brand1-surface-tinted); + --ds-color-surface-hover: var(--ds-color-brand1-surface-hover); + --ds-color-surface-active: var(--ds-color-brand1-surface-active); + --ds-color-border-subtle: var(--ds-color-brand1-border-subtle); + --ds-color-border-default: var(--ds-color-brand1-border-default); + --ds-color-border-strong: var(--ds-color-brand1-border-strong); + --ds-color-text-subtle: var(--ds-color-brand1-text-subtle); + --ds-color-text-default: var(--ds-color-brand1-text-default); + --ds-color-base-default: var(--ds-color-brand1-base-default); + --ds-color-base-hover: var(--ds-color-brand1-base-hover); + --ds-color-base-active: var(--ds-color-brand1-base-active); + --ds-color-base-contrast-subtle: var(--ds-color-brand1-base-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand1-base-contrast-default); +} + +} + +@layer ds.theme.color { +[data-color="brand2"], [data-color-scheme][data-color="brand2"] { + --ds-color-background-default: var(--ds-color-brand2-background-default); + --ds-color-background-tinted: var(--ds-color-brand2-background-tinted); + --ds-color-surface-default: var(--ds-color-brand2-surface-default); + --ds-color-surface-tinted: var(--ds-color-brand2-surface-tinted); + --ds-color-surface-hover: var(--ds-color-brand2-surface-hover); + --ds-color-surface-active: var(--ds-color-brand2-surface-active); + --ds-color-border-subtle: var(--ds-color-brand2-border-subtle); + --ds-color-border-default: var(--ds-color-brand2-border-default); + --ds-color-border-strong: var(--ds-color-brand2-border-strong); + --ds-color-text-subtle: var(--ds-color-brand2-text-subtle); + --ds-color-text-default: var(--ds-color-brand2-text-default); + --ds-color-base-default: var(--ds-color-brand2-base-default); + --ds-color-base-hover: var(--ds-color-brand2-base-hover); + --ds-color-base-active: var(--ds-color-brand2-base-active); + --ds-color-base-contrast-subtle: var(--ds-color-brand2-base-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-brand2-base-contrast-default); +} + +} + +@layer ds.theme.color { +[data-color="danger"], [data-color-scheme][data-color="danger"] { + --ds-color-background-default: var(--ds-color-danger-background-default); + --ds-color-background-tinted: var(--ds-color-danger-background-tinted); + --ds-color-surface-default: var(--ds-color-danger-surface-default); + --ds-color-surface-tinted: var(--ds-color-danger-surface-tinted); + --ds-color-surface-hover: var(--ds-color-danger-surface-hover); + --ds-color-surface-active: var(--ds-color-danger-surface-active); + --ds-color-border-subtle: var(--ds-color-danger-border-subtle); + --ds-color-border-default: var(--ds-color-danger-border-default); + --ds-color-border-strong: var(--ds-color-danger-border-strong); + --ds-color-text-subtle: var(--ds-color-danger-text-subtle); + --ds-color-text-default: var(--ds-color-danger-text-default); + --ds-color-base-default: var(--ds-color-danger-base-default); + --ds-color-base-hover: var(--ds-color-danger-base-hover); + --ds-color-base-active: var(--ds-color-danger-base-active); + --ds-color-base-contrast-subtle: var(--ds-color-danger-base-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-danger-base-contrast-default); +} + +} + +@layer ds.theme.color { +[data-color="info"], [data-color-scheme][data-color="info"] { + --ds-color-background-default: var(--ds-color-info-background-default); + --ds-color-background-tinted: var(--ds-color-info-background-tinted); + --ds-color-surface-default: var(--ds-color-info-surface-default); + --ds-color-surface-tinted: var(--ds-color-info-surface-tinted); + --ds-color-surface-hover: var(--ds-color-info-surface-hover); + --ds-color-surface-active: var(--ds-color-info-surface-active); + --ds-color-border-subtle: var(--ds-color-info-border-subtle); + --ds-color-border-default: var(--ds-color-info-border-default); + --ds-color-border-strong: var(--ds-color-info-border-strong); + --ds-color-text-subtle: var(--ds-color-info-text-subtle); + --ds-color-text-default: var(--ds-color-info-text-default); + --ds-color-base-default: var(--ds-color-info-base-default); + --ds-color-base-hover: var(--ds-color-info-base-hover); + --ds-color-base-active: var(--ds-color-info-base-active); + --ds-color-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-info-base-contrast-default); +} + +} + +@layer ds.theme.color { +[data-color="neutral"], [data-color-scheme][data-color="neutral"] { + --ds-color-background-default: var(--ds-color-neutral-background-default); + --ds-color-background-tinted: var(--ds-color-neutral-background-tinted); + --ds-color-surface-default: var(--ds-color-neutral-surface-default); + --ds-color-surface-tinted: var(--ds-color-neutral-surface-tinted); + --ds-color-surface-hover: var(--ds-color-neutral-surface-hover); + --ds-color-surface-active: var(--ds-color-neutral-surface-active); + --ds-color-border-subtle: var(--ds-color-neutral-border-subtle); + --ds-color-border-default: var(--ds-color-neutral-border-default); + --ds-color-border-strong: var(--ds-color-neutral-border-strong); + --ds-color-text-subtle: var(--ds-color-neutral-text-subtle); + --ds-color-text-default: var(--ds-color-neutral-text-default); + --ds-color-base-default: var(--ds-color-neutral-base-default); + --ds-color-base-hover: var(--ds-color-neutral-base-hover); + --ds-color-base-active: var(--ds-color-neutral-base-active); + --ds-color-base-contrast-subtle: var(--ds-color-neutral-base-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-neutral-base-contrast-default); +} + +} + +@layer ds.theme.color { +[data-color="success"], [data-color-scheme][data-color="success"] { + --ds-color-background-default: var(--ds-color-success-background-default); + --ds-color-background-tinted: var(--ds-color-success-background-tinted); + --ds-color-surface-default: var(--ds-color-success-surface-default); + --ds-color-surface-tinted: var(--ds-color-success-surface-tinted); + --ds-color-surface-hover: var(--ds-color-success-surface-hover); + --ds-color-surface-active: var(--ds-color-success-surface-active); + --ds-color-border-subtle: var(--ds-color-success-border-subtle); + --ds-color-border-default: var(--ds-color-success-border-default); + --ds-color-border-strong: var(--ds-color-success-border-strong); + --ds-color-text-subtle: var(--ds-color-success-text-subtle); + --ds-color-text-default: var(--ds-color-success-text-default); + --ds-color-base-default: var(--ds-color-success-base-default); + --ds-color-base-hover: var(--ds-color-success-base-hover); + --ds-color-base-active: var(--ds-color-success-base-active); + --ds-color-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-success-base-contrast-default); +} + +} + +@layer ds.theme.color { +[data-color="warning"], [data-color-scheme][data-color="warning"] { + --ds-color-background-default: var(--ds-color-warning-background-default); + --ds-color-background-tinted: var(--ds-color-warning-background-tinted); + --ds-color-surface-default: var(--ds-color-warning-surface-default); + --ds-color-surface-tinted: var(--ds-color-warning-surface-tinted); + --ds-color-surface-hover: var(--ds-color-warning-surface-hover); + --ds-color-surface-active: var(--ds-color-warning-surface-active); + --ds-color-border-subtle: var(--ds-color-warning-border-subtle); + --ds-color-border-default: var(--ds-color-warning-border-default); + --ds-color-border-strong: var(--ds-color-warning-border-strong); + --ds-color-text-subtle: var(--ds-color-warning-text-subtle); + --ds-color-text-default: var(--ds-color-warning-text-default); + --ds-color-base-default: var(--ds-color-warning-base-default); + --ds-color-base-hover: var(--ds-color-warning-base-hover); + --ds-color-base-active: var(--ds-color-warning-base-active); + --ds-color-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-warning-base-contrast-default); +} + +} diff --git a/packages/css/theme/different-fonts.tailwind.css b/packages/css/theme/different-fonts.tailwind.css new file mode 100644 index 0000000000..cf154cf387 --- /dev/null +++ b/packages/css/theme/different-fonts.tailwind.css @@ -0,0 +1,189 @@ +@theme { + --font-sans: var(--ds-font-family); + --radius-lg: var(--ds-border-radius-lg); + --radius-md: var(--ds-border-radius-md); + --radius-sm: var(--ds-border-radius-sm); + --radius-xl: var(--ds-border-radius-xl); + --color-accent-background-default: var(--ds-color-accent-background-default); + --color-accent-background-tinted: var(--ds-color-accent-background-tinted); + --color-accent-base-active: var(--ds-color-accent-base-active); + --color-accent-base-contrast-default: var(--ds-color-accent-base-contrast-default); + --color-accent-base-contrast-subtle: var(--ds-color-accent-base-contrast-subtle); + --color-accent-base-default: var(--ds-color-accent-base-default); + --color-accent-base-hover: var(--ds-color-accent-base-hover); + --color-accent-border-default: var(--ds-color-accent-border-default); + --color-accent-border-strong: var(--ds-color-accent-border-strong); + --color-accent-border-subtle: var(--ds-color-accent-border-subtle); + --color-accent-surface-active: var(--ds-color-accent-surface-active); + --color-accent-surface-default: var(--ds-color-accent-surface-default); + --color-accent-surface-hover: var(--ds-color-accent-surface-hover); + --color-accent-surface-tinted: var(--ds-color-accent-surface-tinted); + --color-accent-text-default: var(--ds-color-accent-text-default); + --color-accent-text-subtle: var(--ds-color-accent-text-subtle); + --color-background-default: var(--ds-color-background-default); + --color-background-tinted: var(--ds-color-background-tinted); + --color-base-active: var(--ds-color-base-active); + --color-base-contrast-default: var(--ds-color-base-contrast-default); + --color-base-contrast-subtle: var(--ds-color-base-contrast-subtle); + --color-base-default: var(--ds-color-base-default); + --color-base-hover: var(--ds-color-base-hover); + --color-border-default: var(--ds-color-border-default); + --color-border-strong: var(--ds-color-border-strong); + --color-border-subtle: var(--ds-color-border-subtle); + --color-brand1-background-default: var(--ds-color-brand1-background-default); + --color-brand1-background-tinted: var(--ds-color-brand1-background-tinted); + --color-brand1-base-active: var(--ds-color-brand1-base-active); + --color-brand1-base-contrast-default: var(--ds-color-brand1-base-contrast-default); + --color-brand1-base-contrast-subtle: var(--ds-color-brand1-base-contrast-subtle); + --color-brand1-base-default: var(--ds-color-brand1-base-default); + --color-brand1-base-hover: var(--ds-color-brand1-base-hover); + --color-brand1-border-default: var(--ds-color-brand1-border-default); + --color-brand1-border-strong: var(--ds-color-brand1-border-strong); + --color-brand1-border-subtle: var(--ds-color-brand1-border-subtle); + --color-brand1-surface-active: var(--ds-color-brand1-surface-active); + --color-brand1-surface-default: var(--ds-color-brand1-surface-default); + --color-brand1-surface-hover: var(--ds-color-brand1-surface-hover); + --color-brand1-surface-tinted: var(--ds-color-brand1-surface-tinted); + --color-brand1-text-default: var(--ds-color-brand1-text-default); + --color-brand1-text-subtle: var(--ds-color-brand1-text-subtle); + --color-brand2-background-default: var(--ds-color-brand2-background-default); + --color-brand2-background-tinted: var(--ds-color-brand2-background-tinted); + --color-brand2-base-active: var(--ds-color-brand2-base-active); + --color-brand2-base-contrast-default: var(--ds-color-brand2-base-contrast-default); + --color-brand2-base-contrast-subtle: var(--ds-color-brand2-base-contrast-subtle); + --color-brand2-base-default: var(--ds-color-brand2-base-default); + --color-brand2-base-hover: var(--ds-color-brand2-base-hover); + --color-brand2-border-default: var(--ds-color-brand2-border-default); + --color-brand2-border-strong: var(--ds-color-brand2-border-strong); + --color-brand2-border-subtle: var(--ds-color-brand2-border-subtle); + --color-brand2-surface-active: var(--ds-color-brand2-surface-active); + --color-brand2-surface-default: var(--ds-color-brand2-surface-default); + --color-brand2-surface-hover: var(--ds-color-brand2-surface-hover); + --color-brand2-surface-tinted: var(--ds-color-brand2-surface-tinted); + --color-brand2-text-default: var(--ds-color-brand2-text-default); + --color-brand2-text-subtle: var(--ds-color-brand2-text-subtle); + --color-danger-background-default: var(--ds-color-danger-background-default); + --color-danger-background-tinted: var(--ds-color-danger-background-tinted); + --color-danger-base-active: var(--ds-color-danger-base-active); + --color-danger-base-contrast-default: var(--ds-color-danger-base-contrast-default); + --color-danger-base-contrast-subtle: var(--ds-color-danger-base-contrast-subtle); + --color-danger-base-default: var(--ds-color-danger-base-default); + --color-danger-base-hover: var(--ds-color-danger-base-hover); + --color-danger-border-default: var(--ds-color-danger-border-default); + --color-danger-border-strong: var(--ds-color-danger-border-strong); + --color-danger-border-subtle: var(--ds-color-danger-border-subtle); + --color-danger-surface-active: var(--ds-color-danger-surface-active); + --color-danger-surface-default: var(--ds-color-danger-surface-default); + --color-danger-surface-hover: var(--ds-color-danger-surface-hover); + --color-danger-surface-tinted: var(--ds-color-danger-surface-tinted); + --color-danger-text-default: var(--ds-color-danger-text-default); + --color-danger-text-subtle: var(--ds-color-danger-text-subtle); + --color-info-background-default: var(--ds-color-info-background-default); + --color-info-background-tinted: var(--ds-color-info-background-tinted); + --color-info-base-active: var(--ds-color-info-base-active); + --color-info-base-contrast-default: var(--ds-color-info-base-contrast-default); + --color-info-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle); + --color-info-base-default: var(--ds-color-info-base-default); + --color-info-base-hover: var(--ds-color-info-base-hover); + --color-info-border-default: var(--ds-color-info-border-default); + --color-info-border-strong: var(--ds-color-info-border-strong); + --color-info-border-subtle: var(--ds-color-info-border-subtle); + --color-info-surface-active: var(--ds-color-info-surface-active); + --color-info-surface-default: var(--ds-color-info-surface-default); + --color-info-surface-hover: var(--ds-color-info-surface-hover); + --color-info-surface-tinted: var(--ds-color-info-surface-tinted); + --color-info-text-default: var(--ds-color-info-text-default); + --color-info-text-subtle: var(--ds-color-info-text-subtle); + --color-neutral-background-default: var(--ds-color-neutral-background-default); + --color-neutral-background-tinted: var(--ds-color-neutral-background-tinted); + --color-neutral-base-active: var(--ds-color-neutral-base-active); + --color-neutral-base-contrast-default: var(--ds-color-neutral-base-contrast-default); + --color-neutral-base-contrast-subtle: var(--ds-color-neutral-base-contrast-subtle); + --color-neutral-base-default: var(--ds-color-neutral-base-default); + --color-neutral-base-hover: var(--ds-color-neutral-base-hover); + --color-neutral-border-default: var(--ds-color-neutral-border-default); + --color-neutral-border-strong: var(--ds-color-neutral-border-strong); + --color-neutral-border-subtle: var(--ds-color-neutral-border-subtle); + --color-neutral-surface-active: var(--ds-color-neutral-surface-active); + --color-neutral-surface-default: var(--ds-color-neutral-surface-default); + --color-neutral-surface-hover: var(--ds-color-neutral-surface-hover); + --color-neutral-surface-tinted: var(--ds-color-neutral-surface-tinted); + --color-neutral-text-default: var(--ds-color-neutral-text-default); + --color-neutral-text-subtle: var(--ds-color-neutral-text-subtle); + --color-success-background-default: var(--ds-color-success-background-default); + --color-success-background-tinted: var(--ds-color-success-background-tinted); + --color-success-base-active: var(--ds-color-success-base-active); + --color-success-base-contrast-default: var(--ds-color-success-base-contrast-default); + --color-success-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle); + --color-success-base-default: var(--ds-color-success-base-default); + --color-success-base-hover: var(--ds-color-success-base-hover); + --color-success-border-default: var(--ds-color-success-border-default); + --color-success-border-strong: var(--ds-color-success-border-strong); + --color-success-border-subtle: var(--ds-color-success-border-subtle); + --color-success-surface-active: var(--ds-color-success-surface-active); + --color-success-surface-default: var(--ds-color-success-surface-default); + --color-success-surface-hover: var(--ds-color-success-surface-hover); + --color-success-surface-tinted: var(--ds-color-success-surface-tinted); + --color-success-text-default: var(--ds-color-success-text-default); + --color-success-text-subtle: var(--ds-color-success-text-subtle); + --color-surface-active: var(--ds-color-surface-active); + --color-surface-default: var(--ds-color-surface-default); + --color-surface-hover: var(--ds-color-surface-hover); + --color-surface-tinted: var(--ds-color-surface-tinted); + --color-text-default: var(--ds-color-text-default); + --color-text-subtle: var(--ds-color-text-subtle); + --color-warning-background-default: var(--ds-color-warning-background-default); + --color-warning-background-tinted: var(--ds-color-warning-background-tinted); + --color-warning-base-active: var(--ds-color-warning-base-active); + --color-warning-base-contrast-default: var(--ds-color-warning-base-contrast-default); + --color-warning-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle); + --color-warning-base-default: var(--ds-color-warning-base-default); + --color-warning-base-hover: var(--ds-color-warning-base-hover); + --color-warning-border-default: var(--ds-color-warning-border-default); + --color-warning-border-strong: var(--ds-color-warning-border-strong); + --color-warning-border-subtle: var(--ds-color-warning-border-subtle); + --color-warning-surface-active: var(--ds-color-warning-surface-active); + --color-warning-surface-default: var(--ds-color-warning-surface-default); + --color-warning-surface-hover: var(--ds-color-warning-surface-hover); + --color-warning-surface-tinted: var(--ds-color-warning-surface-tinted); + --color-warning-text-default: var(--ds-color-warning-text-default); + --color-warning-text-subtle: var(--ds-color-warning-text-subtle); + --spacing-0: var(--ds-size-0); + --spacing-1: var(--ds-size-1); + --spacing-2: var(--ds-size-2); + --spacing-3: var(--ds-size-3); + --spacing-4: var(--ds-size-4); + --spacing-5: var(--ds-size-5); + --spacing-6: var(--ds-size-6); + --spacing-7: var(--ds-size-7); + --spacing-8: var(--ds-size-8); + --spacing-9: var(--ds-size-9); + --spacing-10: var(--ds-size-10); + --spacing-11: var(--ds-size-11); + --spacing-12: var(--ds-size-12); + --spacing-13: var(--ds-size-13); + --spacing-14: var(--ds-size-14); + --spacing-15: var(--ds-size-15); + --spacing-18: var(--ds-size-18); + --spacing-22: var(--ds-size-22); + --spacing-26: var(--ds-size-26); + --spacing-30: var(--ds-size-30); +} +[data-color] { + --color-background-default: var(--ds-color-background-default); + --color-background-tinted: var(--ds-color-background-tinted); + --color-surface-default: var(--ds-color-surface-default); + --color-surface-tinted: var(--ds-color-surface-tinted); + --color-surface-hover: var(--ds-color-surface-hover); + --color-surface-active: var(--ds-color-surface-active); + --color-border-subtle: var(--ds-color-border-subtle); + --color-border-default: var(--ds-color-border-default); + --color-border-strong: var(--ds-color-border-strong); + --color-text-subtle: var(--ds-color-text-subtle); + --color-text-default: var(--ds-color-text-default); + --color-base-default: var(--ds-color-base-default); + --color-base-hover: var(--ds-color-base-hover); + --color-base-active: var(--ds-color-base-active); + --color-base-contrast-subtle: var(--ds-color-base-contrast-subtle); + --color-base-contrast-default: var(--ds-color-base-contrast-default); + } \ No newline at end of file From b74153d9b239bd79a1c3180148683b20f8d197e8 Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Fri, 23 Jan 2026 17:07:50 +0100 Subject: [PATCH 06/14] wip: try generating a backward compatibility layer. TODO the tokens get generated, but aren't connected in Figma (you have to manually re-apply them). Maybe due to not being in the same mode? --- design-tokens/$metadata.json | 20 +- design-tokens/$themes.json | 38 +-- design-tokens/themes/designsystemet.json | 112 +++++++++ design-tokens/themes/different-fonts.json | 220 +++++++++++++----- designsystemet.config.json | 16 +- .../cli/src/tokens/create/generators/theme.ts | 65 ++++++ 6 files changed, 380 insertions(+), 91 deletions(-) diff --git a/design-tokens/$metadata.json b/design-tokens/$metadata.json index 357acaf2bb..efa354e00b 100644 --- a/design-tokens/$metadata.json +++ b/design-tokens/$metadata.json @@ -5,26 +5,26 @@ "primitives/modes/size/small", "primitives/modes/size/medium", "primitives/modes/size/large", - "primitives/modes/fonts/primary/size/global/designsystemet", - "primitives/modes/fonts/primary/size/small/designsystemet", - "primitives/modes/fonts/primary/size/medium/designsystemet", - "primitives/modes/fonts/primary/size/large/designsystemet", "primitives/modes/fonts/secondary/size/global/designsystemet", "primitives/modes/fonts/secondary/size/small/designsystemet", "primitives/modes/fonts/secondary/size/medium/designsystemet", "primitives/modes/fonts/secondary/size/large/designsystemet", - "primitives/modes/fonts/primary/size/global/different-fonts", - "primitives/modes/fonts/primary/size/small/different-fonts", - "primitives/modes/fonts/primary/size/medium/different-fonts", - "primitives/modes/fonts/primary/size/large/different-fonts", + "primitives/modes/fonts/primary/size/global/designsystemet", + "primitives/modes/fonts/primary/size/small/designsystemet", + "primitives/modes/fonts/primary/size/medium/designsystemet", + "primitives/modes/fonts/primary/size/large/designsystemet", "primitives/modes/fonts/secondary/size/global/different-fonts", "primitives/modes/fonts/secondary/size/small/different-fonts", "primitives/modes/fonts/secondary/size/medium/different-fonts", "primitives/modes/fonts/secondary/size/large/different-fonts", - "primitives/fonts/primary/designsystemet", + "primitives/modes/fonts/primary/size/global/different-fonts", + "primitives/modes/fonts/primary/size/small/different-fonts", + "primitives/modes/fonts/primary/size/medium/different-fonts", + "primitives/modes/fonts/primary/size/large/different-fonts", "primitives/fonts/secondary/designsystemet", - "primitives/fonts/primary/different-fonts", + "primitives/fonts/primary/designsystemet", "primitives/fonts/secondary/different-fonts", + "primitives/fonts/primary/different-fonts", "primitives/modes/color-scheme/light/designsystemet", "primitives/modes/color-scheme/light/different-fonts", "primitives/modes/color-scheme/dark/designsystemet", diff --git a/design-tokens/$themes.json b/design-tokens/$themes.json index 03b8038c85..7281aba582 100644 --- a/design-tokens/$themes.json +++ b/design-tokens/$themes.json @@ -5,14 +5,14 @@ "selectedTokenSets": { "primitives/modes/size/medium": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/fonts/primary/size/global/designsystemet": "enabled", - "primitives/modes/fonts/primary/size/medium/designsystemet": "enabled", - "primitives/modes/fonts/primary/size/global/different-fonts": "enabled", - "primitives/modes/fonts/primary/size/medium/different-fonts": "enabled", "primitives/modes/fonts/secondary/size/global/designsystemet": "enabled", "primitives/modes/fonts/secondary/size/medium/designsystemet": "enabled", "primitives/modes/fonts/secondary/size/global/different-fonts": "enabled", - "primitives/modes/fonts/secondary/size/medium/different-fonts": "enabled" + "primitives/modes/fonts/secondary/size/medium/different-fonts": "enabled", + "primitives/modes/fonts/primary/size/global/designsystemet": "enabled", + "primitives/modes/fonts/primary/size/medium/designsystemet": "enabled", + "primitives/modes/fonts/primary/size/global/different-fonts": "enabled", + "primitives/modes/fonts/primary/size/medium/different-fonts": "enabled" }, "id": "fb11567729c298ca37c9da4e3a27716a23480824", "$figmaCollectionId": "VariableCollectionId:36248:20757", @@ -25,14 +25,14 @@ "selectedTokenSets": { "primitives/modes/size/small": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/fonts/primary/size/global/designsystemet": "enabled", - "primitives/modes/fonts/primary/size/small/designsystemet": "enabled", - "primitives/modes/fonts/primary/size/global/different-fonts": "enabled", - "primitives/modes/fonts/primary/size/small/different-fonts": "enabled", "primitives/modes/fonts/secondary/size/global/designsystemet": "enabled", "primitives/modes/fonts/secondary/size/small/designsystemet": "enabled", "primitives/modes/fonts/secondary/size/global/different-fonts": "enabled", - "primitives/modes/fonts/secondary/size/small/different-fonts": "enabled" + "primitives/modes/fonts/secondary/size/small/different-fonts": "enabled", + "primitives/modes/fonts/primary/size/global/designsystemet": "enabled", + "primitives/modes/fonts/primary/size/small/designsystemet": "enabled", + "primitives/modes/fonts/primary/size/global/different-fonts": "enabled", + "primitives/modes/fonts/primary/size/small/different-fonts": "enabled" }, "id": "8b2c8cc86611a34b135cb22948666779361fd729", "$figmaCollectionId": "VariableCollectionId:36248:20757", @@ -45,14 +45,14 @@ "selectedTokenSets": { "primitives/modes/size/large": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/fonts/primary/size/global/designsystemet": "enabled", - "primitives/modes/fonts/primary/size/large/designsystemet": "enabled", - "primitives/modes/fonts/primary/size/global/different-fonts": "enabled", - "primitives/modes/fonts/primary/size/large/different-fonts": "enabled", "primitives/modes/fonts/secondary/size/global/designsystemet": "enabled", "primitives/modes/fonts/secondary/size/large/designsystemet": "enabled", "primitives/modes/fonts/secondary/size/global/different-fonts": "enabled", - "primitives/modes/fonts/secondary/size/large/different-fonts": "enabled" + "primitives/modes/fonts/secondary/size/large/different-fonts": "enabled", + "primitives/modes/fonts/primary/size/global/designsystemet": "enabled", + "primitives/modes/fonts/primary/size/large/designsystemet": "enabled", + "primitives/modes/fonts/primary/size/global/different-fonts": "enabled", + "primitives/modes/fonts/primary/size/large/different-fonts": "enabled" }, "id": "d49b9eebeb48a4f165a74b7261733d0a73370f0e", "$figmaCollectionId": "VariableCollectionId:36248:20757", @@ -65,10 +65,10 @@ "$figmaModeId": "40960:6", "name": "designsystemet", "selectedTokenSets": { - "primitives/fonts/primary/designsystemet": "enabled", "primitives/fonts/secondary/designsystemet": "enabled", - "primitives/fonts/primary/different-fonts": "enabled", + "primitives/fonts/primary/designsystemet": "enabled", "primitives/fonts/secondary/different-fonts": "enabled", + "primitives/fonts/primary/different-fonts": "enabled", "themes/designsystemet": "enabled" }, "group": "Theme" @@ -79,10 +79,10 @@ "$figmaModeId": "40960:7", "name": "different-fonts", "selectedTokenSets": { - "primitives/fonts/primary/designsystemet": "enabled", "primitives/fonts/secondary/designsystemet": "enabled", - "primitives/fonts/primary/different-fonts": "enabled", + "primitives/fonts/primary/designsystemet": "enabled", "primitives/fonts/secondary/different-fonts": "enabled", + "primitives/fonts/primary/different-fonts": "enabled", "themes/different-fonts": "enabled" }, "group": "Theme" diff --git a/design-tokens/themes/designsystemet.json b/design-tokens/themes/designsystemet.json index 9d788e914b..c64f331ad0 100644 --- a/design-tokens/themes/designsystemet.json +++ b/design-tokens/themes/designsystemet.json @@ -775,6 +775,118 @@ } } }, + "line-height": { + "sm": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.sm}" + }, + "md": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.md}" + }, + "lg": { + "$type": "lineHeights", + "$value": "{fonts.primary.line-height.lg}" + } + }, + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.primary.font-family}" + }, + "font-weight": { + "medium": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.medium}" + }, + "semibold": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.semibold}" + }, + "regular": { + "$type": "fontWeights", + "$value": "{fonts.primary.font-weight.regular}" + } + }, + "font-size": { + "1": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.1}" + }, + "2": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.2}" + }, + "3": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.3}" + }, + "4": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.4}" + }, + "5": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.5}" + }, + "6": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.6}" + }, + "7": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.7}" + }, + "8": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.8}" + }, + "9": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.9}" + }, + "10": { + "$type": "fontSizes", + "$value": "{fonts.primary.font-size.10}" + } + }, + "letter-spacing": { + "1": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.1}" + }, + "2": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.2}" + }, + "3": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.3}" + }, + "4": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.4}" + }, + "5": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.5}" + }, + "6": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.6}" + }, + "7": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.7}" + }, + "8": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.8}" + }, + "9": { + "$type": "letterSpacing", + "$value": "{fonts.primary.letter-spacing.9}" + } + }, "typography-mapping": { "heading": { "2xl": { diff --git a/design-tokens/themes/different-fonts.json b/design-tokens/themes/different-fonts.json index ddf6aa4340..2f3b73238f 100644 --- a/design-tokens/themes/different-fonts.json +++ b/design-tokens/themes/different-fonts.json @@ -546,235 +546,347 @@ } }, "fonts": { - "primary": { + "secondary": { "font-family": { "$type": "fontFamilies", - "$value": "{different-fonts.fonts.primary.font-family}" + "$value": "{different-fonts.fonts.secondary.font-family}" }, "font-weight": { "medium": { "$type": "fontWeights", - "$value": "{different-fonts.fonts.primary.font-weight.medium}" + "$value": "{different-fonts.fonts.secondary.font-weight.medium}" }, "semibold": { "$type": "fontWeights", - "$value": "{different-fonts.fonts.primary.font-weight.semibold}" + "$value": "{different-fonts.fonts.secondary.font-weight.semibold}" }, "regular": { "$type": "fontWeights", - "$value": "{different-fonts.fonts.primary.font-weight.regular}" + "$value": "{different-fonts.fonts.secondary.font-weight.regular}" } }, "font-size": { "1": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.primary.font-size.1}" + "$value": "{different-fonts.fonts.secondary.font-size.1}" }, "2": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.primary.font-size.2}" + "$value": "{different-fonts.fonts.secondary.font-size.2}" }, "3": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.primary.font-size.3}" + "$value": "{different-fonts.fonts.secondary.font-size.3}" }, "4": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.primary.font-size.4}" + "$value": "{different-fonts.fonts.secondary.font-size.4}" }, "5": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.primary.font-size.5}" + "$value": "{different-fonts.fonts.secondary.font-size.5}" }, "6": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.primary.font-size.6}" + "$value": "{different-fonts.fonts.secondary.font-size.6}" }, "7": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.primary.font-size.7}" + "$value": "{different-fonts.fonts.secondary.font-size.7}" }, "8": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.primary.font-size.8}" + "$value": "{different-fonts.fonts.secondary.font-size.8}" }, "9": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.primary.font-size.9}" + "$value": "{different-fonts.fonts.secondary.font-size.9}" }, "10": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.primary.font-size.10}" + "$value": "{different-fonts.fonts.secondary.font-size.10}" } }, "line-height": { "sm": { "$type": "lineHeights", - "$value": "{different-fonts.fonts.primary.line-height.sm}" + "$value": "{different-fonts.fonts.secondary.line-height.sm}" }, "md": { "$type": "lineHeights", - "$value": "{different-fonts.fonts.primary.line-height.md}" + "$value": "{different-fonts.fonts.secondary.line-height.md}" }, "lg": { "$type": "lineHeights", - "$value": "{different-fonts.fonts.primary.line-height.lg}" + "$value": "{different-fonts.fonts.secondary.line-height.lg}" } }, "letter-spacing": { "1": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.primary.letter-spacing.1}" + "$value": "{different-fonts.fonts.secondary.letter-spacing.1}" }, "2": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.primary.letter-spacing.2}" + "$value": "{different-fonts.fonts.secondary.letter-spacing.2}" }, "3": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.primary.letter-spacing.3}" + "$value": "{different-fonts.fonts.secondary.letter-spacing.3}" }, "4": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.primary.letter-spacing.4}" + "$value": "{different-fonts.fonts.secondary.letter-spacing.4}" }, "5": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.primary.letter-spacing.5}" + "$value": "{different-fonts.fonts.secondary.letter-spacing.5}" }, "6": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.primary.letter-spacing.6}" + "$value": "{different-fonts.fonts.secondary.letter-spacing.6}" }, "7": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.primary.letter-spacing.7}" + "$value": "{different-fonts.fonts.secondary.letter-spacing.7}" }, "8": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.primary.letter-spacing.8}" + "$value": "{different-fonts.fonts.secondary.letter-spacing.8}" }, "9": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.primary.letter-spacing.9}" + "$value": "{different-fonts.fonts.secondary.letter-spacing.9}" } } }, - "secondary": { + "primary": { "font-family": { "$type": "fontFamilies", - "$value": "{different-fonts.fonts.secondary.font-family}" + "$value": "{different-fonts.fonts.primary.font-family}" }, "font-weight": { "medium": { "$type": "fontWeights", - "$value": "{different-fonts.fonts.secondary.font-weight.medium}" + "$value": "{different-fonts.fonts.primary.font-weight.medium}" }, "semibold": { "$type": "fontWeights", - "$value": "{different-fonts.fonts.secondary.font-weight.semibold}" + "$value": "{different-fonts.fonts.primary.font-weight.semibold}" }, "regular": { "$type": "fontWeights", - "$value": "{different-fonts.fonts.secondary.font-weight.regular}" + "$value": "{different-fonts.fonts.primary.font-weight.regular}" } }, "font-size": { "1": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.secondary.font-size.1}" + "$value": "{different-fonts.fonts.primary.font-size.1}" }, "2": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.secondary.font-size.2}" + "$value": "{different-fonts.fonts.primary.font-size.2}" }, "3": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.secondary.font-size.3}" + "$value": "{different-fonts.fonts.primary.font-size.3}" }, "4": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.secondary.font-size.4}" + "$value": "{different-fonts.fonts.primary.font-size.4}" }, "5": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.secondary.font-size.5}" + "$value": "{different-fonts.fonts.primary.font-size.5}" }, "6": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.secondary.font-size.6}" + "$value": "{different-fonts.fonts.primary.font-size.6}" }, "7": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.secondary.font-size.7}" + "$value": "{different-fonts.fonts.primary.font-size.7}" }, "8": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.secondary.font-size.8}" + "$value": "{different-fonts.fonts.primary.font-size.8}" }, "9": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.secondary.font-size.9}" + "$value": "{different-fonts.fonts.primary.font-size.9}" }, "10": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.secondary.font-size.10}" + "$value": "{different-fonts.fonts.primary.font-size.10}" } }, "line-height": { "sm": { "$type": "lineHeights", - "$value": "{different-fonts.fonts.secondary.line-height.sm}" + "$value": "{different-fonts.fonts.primary.line-height.sm}" }, "md": { "$type": "lineHeights", - "$value": "{different-fonts.fonts.secondary.line-height.md}" + "$value": "{different-fonts.fonts.primary.line-height.md}" }, "lg": { "$type": "lineHeights", - "$value": "{different-fonts.fonts.secondary.line-height.lg}" + "$value": "{different-fonts.fonts.primary.line-height.lg}" } }, "letter-spacing": { "1": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.secondary.letter-spacing.1}" + "$value": "{different-fonts.fonts.primary.letter-spacing.1}" }, "2": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.secondary.letter-spacing.2}" + "$value": "{different-fonts.fonts.primary.letter-spacing.2}" }, "3": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.secondary.letter-spacing.3}" + "$value": "{different-fonts.fonts.primary.letter-spacing.3}" }, "4": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.secondary.letter-spacing.4}" + "$value": "{different-fonts.fonts.primary.letter-spacing.4}" }, "5": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.secondary.letter-spacing.5}" + "$value": "{different-fonts.fonts.primary.letter-spacing.5}" }, "6": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.secondary.letter-spacing.6}" + "$value": "{different-fonts.fonts.primary.letter-spacing.6}" }, "7": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.secondary.letter-spacing.7}" + "$value": "{different-fonts.fonts.primary.letter-spacing.7}" }, "8": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.secondary.letter-spacing.8}" + "$value": "{different-fonts.fonts.primary.letter-spacing.8}" }, "9": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.secondary.letter-spacing.9}" + "$value": "{different-fonts.fonts.primary.letter-spacing.9}" } } } }, + "line-height": { + "sm": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.sm}" + }, + "md": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.md}" + }, + "lg": { + "$type": "lineHeights", + "$value": "{fonts.secondary.line-height.lg}" + } + }, + "font-family": { + "$type": "fontFamilies", + "$value": "{fonts.secondary.font-family}" + }, + "font-weight": { + "medium": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.medium}" + }, + "semibold": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.semibold}" + }, + "regular": { + "$type": "fontWeights", + "$value": "{fonts.secondary.font-weight.regular}" + } + }, + "font-size": { + "1": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.1}" + }, + "2": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.2}" + }, + "3": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.3}" + }, + "4": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.4}" + }, + "5": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.5}" + }, + "6": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.6}" + }, + "7": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.7}" + }, + "8": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.8}" + }, + "9": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.9}" + }, + "10": { + "$type": "fontSizes", + "$value": "{fonts.secondary.font-size.10}" + } + }, + "letter-spacing": { + "1": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.1}" + }, + "2": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.2}" + }, + "3": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.3}" + }, + "4": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.4}" + }, + "5": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.5}" + }, + "6": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.6}" + }, + "7": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.7}" + }, + "8": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.8}" + }, + "9": { + "$type": "letterSpacing", + "$value": "{fonts.secondary.letter-spacing.9}" + } + }, "typography-mapping": { "heading": { "2xl": { diff --git a/designsystemet.config.json b/designsystemet.config.json index 066ab889ab..3a6deb6e74 100644 --- a/designsystemet.config.json +++ b/designsystemet.config.json @@ -71,14 +71,6 @@ } }, "fonts": { - "primary": { - "fontFamily": "Karantina", - "fontWeight": { - "regular": "Light", - "medium": "Regular", - "semibold": "Bold" - } - }, "secondary": { "fontFamily": "Playpen Sans", "fontWeight": { @@ -91,6 +83,14 @@ "medium": { "base": 16 }, "large": { "base": 18 } } + }, + "primary": { + "fontFamily": "Karantina", + "fontWeight": { + "regular": "Light", + "medium": "Regular", + "semibold": "Bold" + } } } } diff --git a/packages/cli/src/tokens/create/generators/theme.ts b/packages/cli/src/tokens/create/generators/theme.ts index 9be6a40248..f711c6636f 100644 --- a/packages/cli/src/tokens/create/generators/theme.ts +++ b/packages/cli/src/tokens/create/generators/theme.ts @@ -126,6 +126,67 @@ function generateFonts(theme: string, fonts: string[]): TokenSet { ); } +function generateBackwardCompatibilityFontTokens(defaultFont: string) { + const lineHeights = ['sm', 'md', 'lg']; + const fontWeights = ['medium', 'semibold', 'regular']; + const fontSizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; + const letterSpacings = ['1', '2', '3', '4', '5', '6', '7', '8', '9']; + return { + 'line-height': Object.fromEntries( + lineHeights.map( + (lineHeight) => + [ + lineHeight, + { + $type: 'lineHeights', + $value: `{fonts.${defaultFont}.line-height.${lineHeight}}`, + }, + ] as const, + ), + ), + 'font-family': { + $type: 'fontFamilies', + $value: `{fonts.${defaultFont}.font-family}`, + }, + 'font-weight': Object.fromEntries( + fontWeights.map( + (weight) => + [ + weight, + { + $type: 'fontWeights', + $value: `{fonts.${defaultFont}.font-weight.${weight}}`, + }, + ] as const, + ), + ), + 'font-size': Object.fromEntries( + fontSizes.map( + (size) => + [ + size, + { + $type: 'fontSizes', + $value: `{fonts.${defaultFont}.font-size.${size}}`, + }, + ] as const, + ), + ), + 'letter-spacing': Object.fromEntries( + letterSpacings.map( + (letterSpacing) => + [ + letterSpacing, + { + $type: 'letterSpacing', + $value: `{fonts.${defaultFont}.letter-spacing.${letterSpacing}}`, + }, + ] as const, + ), + ), + }; +} + export const generateTheme = ( colors: Colors, themeName: string, @@ -136,6 +197,8 @@ export const generateTheme = ( const mainColorNames = Object.keys(colors.main); const supportColorNames = Object.keys(colors.support); const customColors = [...mainColorNames, 'neutral', ...supportColorNames, ...baseColorNames]; + // TODO handle default font name somewhere else + const defaultFont = Object.keys(typography.fonts ?? {}).at(0) ?? 'primary'; const themeColorTokens = Object.fromEntries( customColors.map( @@ -170,6 +233,8 @@ export const generateTheme = ( }, }, fonts: generateFonts(themeName, fontNames), + // Generate a backward-compatibility layer for the old "font-size", "line-height" etc tokens + ...generateBackwardCompatibilityFontTokens(defaultFont), // The mapping from typography to fonts can't be in the typography tokens themself due // to how Figma generates typography styles. Therefore we have this extra layer. 'typography-mapping': generateThemeTypography(typography), From 8ec24452b3f872d23103277262081e4280a0b65a Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Fri, 23 Jan 2026 19:40:01 +0100 Subject: [PATCH 07/14] remove unnecessary reduce / as const --- .../src/tokens/create/generators/$themes.ts | 25 +++++++------------ 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/packages/cli/src/tokens/create/generators/$themes.ts b/packages/cli/src/tokens/create/generators/$themes.ts index 531321a818..9b599f7b4f 100644 --- a/packages/cli/src/tokens/create/generators/$themes.ts +++ b/packages/cli/src/tokens/create/generators/$themes.ts @@ -67,19 +67,14 @@ function generateSizeGroup(themes: string[], fontNames: string[], sizeModes: Siz selectedTokenSets: { [`primitives/modes/size/${size}`]: TokenSetStatus.SOURCE, 'primitives/modes/size/global': TokenSetStatus.ENABLED, - ...fontNames - .flatMap((font) => - themes.map((theme) => ({ - [`primitives/modes/fonts/${font}/size/global/${theme}`]: TokenSetStatus.ENABLED, - [`primitives/modes/fonts/${font}/size/${size}/${theme}`]: TokenSetStatus.ENABLED, - })), - ) - .reduce((prev, curr) => { - Object.entries(curr).forEach(([key, val]) => { - prev[key] = val; - }); - return prev; - }), + ...Object.fromEntries( + fontNames.flatMap((font) => + themes.flatMap((theme) => [ + [`primitives/modes/fonts/${font}/size/global/${theme}`, TokenSetStatus.ENABLED], + [`primitives/modes/fonts/${font}/size/${size}/${theme}`, TokenSetStatus.ENABLED], + ]), + ), + ), }, ...existingFigmaIds[size], $figmaStyleReferences: {}, @@ -124,9 +119,7 @@ function generateColorSchemesGroup(colorSchemes: ColorSchemes, themes: string[]) async function generateThemesGroup(themes: string[], fonts: string[]): Promise { const fontSets = Object.fromEntries( - themes.flatMap((theme) => - fonts.map((font) => [`primitives/fonts/${font}/${theme}`, TokenSetStatus.ENABLED] as const), - ), + themes.flatMap((theme) => fonts.map((font) => [`primitives/fonts/${font}/${theme}`, TokenSetStatus.ENABLED])), ); return Promise.all( From 970acd9c0b7c0f2c25c0e21ff0d9336b225d1eb1 Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Fri, 23 Jan 2026 21:15:14 +0100 Subject: [PATCH 08/14] no need to keep only 10 fontsize steps now that the tokens are restructured and we have backward-compatibility layer --- .../primary/size/global/designsystemet.json | 20 +-- .../primary/size/global/different-fonts.json | 20 +-- .../secondary/size/global/designsystemet.json | 20 +-- .../size/global/different-fonts.json | 20 +-- design-tokens/themes/designsystemet.json | 40 ++++-- design-tokens/themes/different-fonts.json | 40 ++++-- .../src/tokens/create/generators/fontSize.ts | 14 +- .../cli/src/tokens/create/generators/theme.ts | 133 ++++++------------ 8 files changed, 155 insertions(+), 152 deletions(-) diff --git a/design-tokens/primitives/modes/fonts/primary/size/global/designsystemet.json b/design-tokens/primitives/modes/fonts/primary/size/global/designsystemet.json index 40cba9f62f..48d2c957c0 100644 --- a/design-tokens/primitives/modes/fonts/primary/size/global/designsystemet.json +++ b/design-tokens/primitives/modes/fonts/primary/size/global/designsystemet.json @@ -29,31 +29,31 @@ }, "7": { "$type": "fontSizes", - "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 4), 0)" + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 3), 0)" }, "8": { "$type": "fontSizes", - "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 5), 0)" + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 4), 0)" }, "9": { "$type": "fontSizes", - "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 7), 0)" + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 5), 0)" }, "10": { "$type": "fontSizes", - "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 9), 0)" + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 6), 0)" }, - "6-half": { + "11": { "$type": "fontSizes", - "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 3), 0)" + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 7), 0)" }, - "8-half": { + "12": { "$type": "fontSizes", - "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 6), 0)" + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 8), 0)" }, - "9-half": { + "13": { "$type": "fontSizes", - "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 8), 0)" + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 9), 0)" } } } diff --git a/design-tokens/primitives/modes/fonts/primary/size/global/different-fonts.json b/design-tokens/primitives/modes/fonts/primary/size/global/different-fonts.json index 0bf36faaf3..3dff57e395 100644 --- a/design-tokens/primitives/modes/fonts/primary/size/global/different-fonts.json +++ b/design-tokens/primitives/modes/fonts/primary/size/global/different-fonts.json @@ -29,31 +29,31 @@ }, "7": { "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 4), 0)" + "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 3), 0)" }, "8": { "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 5), 0)" + "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 4), 0)" }, "9": { "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 7), 0)" + "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 5), 0)" }, "10": { "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 9), 0)" + "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 6), 0)" }, - "6-half": { + "11": { "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 3), 0)" + "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 7), 0)" }, - "8-half": { + "12": { "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 6), 0)" + "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 8), 0)" }, - "9-half": { + "13": { "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 8), 0)" + "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 9), 0)" } } } diff --git a/design-tokens/primitives/modes/fonts/secondary/size/global/designsystemet.json b/design-tokens/primitives/modes/fonts/secondary/size/global/designsystemet.json index 840567b7dc..bfccadcb80 100644 --- a/design-tokens/primitives/modes/fonts/secondary/size/global/designsystemet.json +++ b/design-tokens/primitives/modes/fonts/secondary/size/global/designsystemet.json @@ -29,31 +29,31 @@ }, "7": { "$type": "fontSizes", - "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 4), 0)" + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 3), 0)" }, "8": { "$type": "fontSizes", - "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 5), 0)" + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 4), 0)" }, "9": { "$type": "fontSizes", - "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 7), 0)" + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 5), 0)" }, "10": { "$type": "fontSizes", - "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 9), 0)" + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 6), 0)" }, - "6-half": { + "11": { "$type": "fontSizes", - "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 3), 0)" + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 7), 0)" }, - "8-half": { + "12": { "$type": "fontSizes", - "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 6), 0)" + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 8), 0)" }, - "9-half": { + "13": { "$type": "fontSizes", - "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 8), 0)" + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 9), 0)" } } } diff --git a/design-tokens/primitives/modes/fonts/secondary/size/global/different-fonts.json b/design-tokens/primitives/modes/fonts/secondary/size/global/different-fonts.json index 64d252ff41..57d1bf6268 100644 --- a/design-tokens/primitives/modes/fonts/secondary/size/global/different-fonts.json +++ b/design-tokens/primitives/modes/fonts/secondary/size/global/different-fonts.json @@ -29,31 +29,31 @@ }, "7": { "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 4), 0)" + "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 3), 0)" }, "8": { "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 5), 0)" + "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 4), 0)" }, "9": { "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 7), 0)" + "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 5), 0)" }, "10": { "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 9), 0)" + "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 6), 0)" }, - "6-half": { + "11": { "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 3), 0)" + "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 7), 0)" }, - "8-half": { + "12": { "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 6), 0)" + "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 8), 0)" }, - "9-half": { + "13": { "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 8), 0)" + "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 9), 0)" } } } diff --git a/design-tokens/themes/designsystemet.json b/design-tokens/themes/designsystemet.json index c64f331ad0..dd85980472 100644 --- a/design-tokens/themes/designsystemet.json +++ b/design-tokens/themes/designsystemet.json @@ -605,6 +605,18 @@ "10": { "$type": "fontSizes", "$value": "{designsystemet.fonts.primary.font-size.10}" + }, + "11": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.11}" + }, + "12": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.12}" + }, + "13": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.13}" } }, "line-height": { @@ -719,6 +731,18 @@ "10": { "$type": "fontSizes", "$value": "{designsystemet.fonts.secondary.font-size.10}" + }, + "11": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.secondary.font-size.11}" + }, + "12": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.secondary.font-size.12}" + }, + "13": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.secondary.font-size.13}" } }, "line-height": { @@ -834,19 +858,19 @@ }, "7": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.7}" + "$value": "{fonts.primary.font-size.8}" }, "8": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.8}" + "$value": "{fonts.primary.font-size.9}" }, "9": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.9}" + "$value": "{fonts.primary.font-size.11}" }, "10": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.10}" + "$value": "{fonts.primary.font-size.13}" } }, "letter-spacing": { @@ -904,7 +928,7 @@ }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.10}" + "$value": "{fonts.secondary.font-size.13}" }, "letter-spacing": { "$type": "letterSpacing", @@ -926,7 +950,7 @@ }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.9}" + "$value": "{fonts.secondary.font-size.11}" }, "letter-spacing": { "$type": "letterSpacing", @@ -948,7 +972,7 @@ }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.8}" + "$value": "{fonts.secondary.font-size.9}" }, "letter-spacing": { "$type": "letterSpacing", @@ -970,7 +994,7 @@ }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.7}" + "$value": "{fonts.secondary.font-size.8}" }, "letter-spacing": { "$type": "letterSpacing", diff --git a/design-tokens/themes/different-fonts.json b/design-tokens/themes/different-fonts.json index 2f3b73238f..7acd510cf7 100644 --- a/design-tokens/themes/different-fonts.json +++ b/design-tokens/themes/different-fonts.json @@ -605,6 +605,18 @@ "10": { "$type": "fontSizes", "$value": "{different-fonts.fonts.secondary.font-size.10}" + }, + "11": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.secondary.font-size.11}" + }, + "12": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.secondary.font-size.12}" + }, + "13": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.secondary.font-size.13}" } }, "line-height": { @@ -719,6 +731,18 @@ "10": { "$type": "fontSizes", "$value": "{different-fonts.fonts.primary.font-size.10}" + }, + "11": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.primary.font-size.11}" + }, + "12": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.primary.font-size.12}" + }, + "13": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.primary.font-size.13}" } }, "line-height": { @@ -834,19 +858,19 @@ }, "7": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.7}" + "$value": "{fonts.secondary.font-size.8}" }, "8": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.8}" + "$value": "{fonts.secondary.font-size.9}" }, "9": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.9}" + "$value": "{fonts.secondary.font-size.11}" }, "10": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.10}" + "$value": "{fonts.secondary.font-size.13}" } }, "letter-spacing": { @@ -904,7 +928,7 @@ }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.10}" + "$value": "{fonts.primary.font-size.13}" }, "letter-spacing": { "$type": "letterSpacing", @@ -926,7 +950,7 @@ }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.9}" + "$value": "{fonts.primary.font-size.11}" }, "letter-spacing": { "$type": "letterSpacing", @@ -948,7 +972,7 @@ }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.8}" + "$value": "{fonts.primary.font-size.9}" }, "letter-spacing": { "$type": "letterSpacing", @@ -970,7 +994,7 @@ }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.7}" + "$value": "{fonts.primary.font-size.8}" }, "letter-spacing": { "$type": "letterSpacing", diff --git a/packages/cli/src/tokens/create/generators/fontSize.ts b/packages/cli/src/tokens/create/generators/fontSize.ts index e88e8ba4d5..b68a110b30 100644 --- a/packages/cli/src/tokens/create/generators/fontSize.ts +++ b/packages/cli/src/tokens/create/generators/fontSize.ts @@ -47,31 +47,31 @@ export function generateFontSizeGlobal(themeName: string, fontName: string) { $type: 'fontSizes', $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 2), 0)`, }, - '6-half': { + '7': { $type: 'fontSizes', $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 3), 0)`, }, - '7': { + '8': { $type: 'fontSizes', $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 4), 0)`, }, - '8': { + '9': { $type: 'fontSizes', $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 5), 0)`, }, - '8-half': { + '10': { $type: 'fontSizes', $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 6), 0)`, }, - '9': { + '11': { $type: 'fontSizes', $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 7), 0)`, }, - '9-half': { + '12': { $type: 'fontSizes', $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 8), 0)`, }, - '10': { + '13': { $type: 'fontSizes', $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 9), 0)`, }, diff --git a/packages/cli/src/tokens/create/generators/theme.ts b/packages/cli/src/tokens/create/generators/theme.ts index f711c6636f..9981432a98 100644 --- a/packages/cli/src/tokens/create/generators/theme.ts +++ b/packages/cli/src/tokens/create/generators/theme.ts @@ -4,7 +4,11 @@ import themeBase from '../../template/design-tokens/themes/theme.base.template.j import themeColorTemplate from '../../template/design-tokens/themes/theme.template.json' with { type: 'json' }; import type { Colors, TokenSet, Typography } from '../../types.js'; +const countFromToInclusive = (fromInclusive: number, toInclusive: number) => R.range(fromInclusive, toInclusive + 1); + function generateFonts(theme: string, fonts: string[]): TokenSet { + const fontSizes = countFromToInclusive(1, 13); + const letterSpacings = countFromToInclusive(1, 9); return Object.fromEntries( fonts.map((font) => [ font, @@ -27,48 +31,16 @@ function generateFonts(theme: string, fonts: string[]): TokenSet { $value: `{${theme}.fonts.${font}.font-weight.regular}`, }, }, - 'font-size': { - '1': { - $type: 'fontSizes', - $value: `{${theme}.fonts.${font}.font-size.1}`, - }, - '2': { - $type: 'fontSizes', - $value: `{${theme}.fonts.${font}.font-size.2}`, - }, - '3': { - $type: 'fontSizes', - $value: `{${theme}.fonts.${font}.font-size.3}`, - }, - '4': { - $type: 'fontSizes', - $value: `{${theme}.fonts.${font}.font-size.4}`, - }, - '5': { - $type: 'fontSizes', - $value: `{${theme}.fonts.${font}.font-size.5}`, - }, - '6': { - $type: 'fontSizes', - $value: `{${theme}.fonts.${font}.font-size.6}`, - }, - '7': { - $type: 'fontSizes', - $value: `{${theme}.fonts.${font}.font-size.7}`, - }, - '8': { - $type: 'fontSizes', - $value: `{${theme}.fonts.${font}.font-size.8}`, - }, - '9': { - $type: 'fontSizes', - $value: `{${theme}.fonts.${font}.font-size.9}`, - }, - '10': { - $type: 'fontSizes', - $value: `{${theme}.fonts.${font}.font-size.10}`, - }, - }, + 'font-size': Object.fromEntries( + fontSizes.map((number) => [ + number, + { + $type: 'fontSizes', + $value: `{${theme}.fonts.${font}.font-size.${number}}`, + }, + ]), + ), + 'line-height': { sm: { $type: 'lineHeights', @@ -83,44 +55,15 @@ function generateFonts(theme: string, fonts: string[]): TokenSet { $value: `{${theme}.fonts.${font}.line-height.lg}`, }, }, - 'letter-spacing': { - '1': { - $type: 'letterSpacing', - $value: `{${theme}.fonts.${font}.letter-spacing.1}`, - }, - '2': { - $type: 'letterSpacing', - $value: `{${theme}.fonts.${font}.letter-spacing.2}`, - }, - '3': { - $type: 'letterSpacing', - $value: `{${theme}.fonts.${font}.letter-spacing.3}`, - }, - '4': { - $type: 'letterSpacing', - $value: `{${theme}.fonts.${font}.letter-spacing.4}`, - }, - '5': { - $type: 'letterSpacing', - $value: `{${theme}.fonts.${font}.letter-spacing.5}`, - }, - '6': { - $type: 'letterSpacing', - $value: `{${theme}.fonts.${font}.letter-spacing.6}`, - }, - '7': { - $type: 'letterSpacing', - $value: `{${theme}.fonts.${font}.letter-spacing.7}`, - }, - '8': { - $type: 'letterSpacing', - $value: `{${theme}.fonts.${font}.letter-spacing.8}`, - }, - '9': { - $type: 'letterSpacing', - $value: `{${theme}.fonts.${font}.letter-spacing.9}`, - }, - }, + 'letter-spacing': Object.fromEntries( + letterSpacings.map((number) => [ + number, + { + $type: 'letterSpacing', + $value: `{${theme}.fonts.${font}.letter-spacing.${number}}`, + }, + ]), + ), }, ]), ); @@ -129,7 +72,19 @@ function generateFonts(theme: string, fonts: string[]): TokenSet { function generateBackwardCompatibilityFontTokens(defaultFont: string) { const lineHeights = ['sm', 'md', 'lg']; const fontWeights = ['medium', 'semibold', 'regular']; - const fontSizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; + const fontSizes = { + // mapping from old to new font scale + '1': '1', + '2': '2', + '3': '3', + '4': '4', + '5': '5', + '6': '6', + '7': '8', + '8': '9', + '9': '11', + '10': '13', + }; const letterSpacings = ['1', '2', '3', '4', '5', '6', '7', '8', '9']; return { 'line-height': Object.fromEntries( @@ -161,13 +116,13 @@ function generateBackwardCompatibilityFontTokens(defaultFont: string) { ), ), 'font-size': Object.fromEntries( - fontSizes.map( - (size) => + Object.entries(fontSizes).map( + ([oldSize, newSize]) => [ - size, + oldSize, { $type: 'fontSizes', - $value: `{fonts.${defaultFont}.font-size.${size}}`, + $value: `{fonts.${defaultFont}.font-size.${newSize}}`, }, ] as const, ), @@ -282,7 +237,7 @@ function generateThemeTypography(typography: Typography) { }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${headingFont}.font-size.10}`, + $value: `{fonts.${headingFont}.font-size.13}`, }, 'letter-spacing': { $type: 'letterSpacing', @@ -304,7 +259,7 @@ function generateThemeTypography(typography: Typography) { }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${headingFont}.font-size.9}`, + $value: `{fonts.${headingFont}.font-size.11}`, }, 'letter-spacing': { $type: 'letterSpacing', @@ -326,7 +281,7 @@ function generateThemeTypography(typography: Typography) { }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${headingFont}.font-size.8}`, + $value: `{fonts.${headingFont}.font-size.9}`, }, 'letter-spacing': { $type: 'letterSpacing', @@ -348,7 +303,7 @@ function generateThemeTypography(typography: Typography) { }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${headingFont}.font-size.7}`, + $value: `{fonts.${headingFont}.font-size.8}`, }, 'letter-spacing': { $type: 'letterSpacing', From 2827defdfe54afdcd35e687f0ac3eaf1c3fc6721 Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Fri, 23 Jan 2026 22:35:58 +0100 Subject: [PATCH 09/14] fix so themes can have different font names --- design-tokens/$metadata.json | 30 +- design-tokens/$themes.json | 48 +-- .../different-fonts.json | 2 +- .../{secondary => main}/different-fonts.json | 2 +- .../headings/size/global/different-fonts.json | 62 +++ .../size/large/different-fonts.json | 2 +- .../size/medium}/different-fonts.json | 2 +- .../size/small/different-fonts.json | 2 +- .../main/size/global/different-fonts.json | 62 +++ .../size/large}/different-fonts.json | 2 +- .../size/medium/different-fonts.json | 2 +- .../size/small/different-fonts.json | 2 +- .../primary/size/global/different-fonts.json | 62 --- .../size/global/different-fonts.json | 62 --- design-tokens/themes/different-fonts.json | 392 +++++++++--------- designsystemet.config.json | 36 +- .../cli/src/scripts/update-preview-tokens.ts | 6 +- .../src/tokens/create/generators/$metadata.ts | 14 +- .../src/tokens/create/generators/$themes.ts | 27 +- packages/cli/src/tokens/create/write.ts | 33 +- packages/cli/src/tokens/format.ts | 6 +- packages/cli/src/tokens/types.ts | 8 + 22 files changed, 456 insertions(+), 408 deletions(-) rename design-tokens/primitives/fonts/{primary => headings}/different-fonts.json (98%) rename design-tokens/primitives/fonts/{secondary => main}/different-fonts.json (98%) create mode 100644 design-tokens/primitives/modes/fonts/headings/size/global/different-fonts.json rename design-tokens/primitives/modes/fonts/{primary => headings}/size/large/different-fonts.json (93%) rename design-tokens/primitives/modes/fonts/{secondary/size/large => headings/size/medium}/different-fonts.json (93%) rename design-tokens/primitives/modes/fonts/{primary => headings}/size/small/different-fonts.json (93%) create mode 100644 design-tokens/primitives/modes/fonts/main/size/global/different-fonts.json rename design-tokens/primitives/modes/fonts/{primary/size/medium => main/size/large}/different-fonts.json (93%) rename design-tokens/primitives/modes/fonts/{secondary => main}/size/medium/different-fonts.json (93%) rename design-tokens/primitives/modes/fonts/{secondary => main}/size/small/different-fonts.json (93%) delete mode 100644 design-tokens/primitives/modes/fonts/primary/size/global/different-fonts.json delete mode 100644 design-tokens/primitives/modes/fonts/secondary/size/global/different-fonts.json diff --git a/design-tokens/$metadata.json b/design-tokens/$metadata.json index efa354e00b..d226d76314 100644 --- a/design-tokens/$metadata.json +++ b/design-tokens/$metadata.json @@ -5,26 +5,26 @@ "primitives/modes/size/small", "primitives/modes/size/medium", "primitives/modes/size/large", - "primitives/modes/fonts/secondary/size/global/designsystemet", - "primitives/modes/fonts/secondary/size/small/designsystemet", - "primitives/modes/fonts/secondary/size/medium/designsystemet", - "primitives/modes/fonts/secondary/size/large/designsystemet", "primitives/modes/fonts/primary/size/global/designsystemet", "primitives/modes/fonts/primary/size/small/designsystemet", "primitives/modes/fonts/primary/size/medium/designsystemet", "primitives/modes/fonts/primary/size/large/designsystemet", - "primitives/modes/fonts/secondary/size/global/different-fonts", - "primitives/modes/fonts/secondary/size/small/different-fonts", - "primitives/modes/fonts/secondary/size/medium/different-fonts", - "primitives/modes/fonts/secondary/size/large/different-fonts", - "primitives/modes/fonts/primary/size/global/different-fonts", - "primitives/modes/fonts/primary/size/small/different-fonts", - "primitives/modes/fonts/primary/size/medium/different-fonts", - "primitives/modes/fonts/primary/size/large/different-fonts", - "primitives/fonts/secondary/designsystemet", + "primitives/modes/fonts/secondary/size/global/designsystemet", + "primitives/modes/fonts/secondary/size/small/designsystemet", + "primitives/modes/fonts/secondary/size/medium/designsystemet", + "primitives/modes/fonts/secondary/size/large/designsystemet", + "primitives/modes/fonts/main/size/global/different-fonts", + "primitives/modes/fonts/main/size/small/different-fonts", + "primitives/modes/fonts/main/size/medium/different-fonts", + "primitives/modes/fonts/main/size/large/different-fonts", + "primitives/modes/fonts/headings/size/global/different-fonts", + "primitives/modes/fonts/headings/size/small/different-fonts", + "primitives/modes/fonts/headings/size/medium/different-fonts", + "primitives/modes/fonts/headings/size/large/different-fonts", "primitives/fonts/primary/designsystemet", - "primitives/fonts/secondary/different-fonts", - "primitives/fonts/primary/different-fonts", + "primitives/fonts/secondary/designsystemet", + "primitives/fonts/main/different-fonts", + "primitives/fonts/headings/different-fonts", "primitives/modes/color-scheme/light/designsystemet", "primitives/modes/color-scheme/light/different-fonts", "primitives/modes/color-scheme/dark/designsystemet", diff --git a/design-tokens/$themes.json b/design-tokens/$themes.json index 7281aba582..86760df382 100644 --- a/design-tokens/$themes.json +++ b/design-tokens/$themes.json @@ -5,14 +5,14 @@ "selectedTokenSets": { "primitives/modes/size/medium": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/fonts/secondary/size/global/designsystemet": "enabled", - "primitives/modes/fonts/secondary/size/medium/designsystemet": "enabled", - "primitives/modes/fonts/secondary/size/global/different-fonts": "enabled", - "primitives/modes/fonts/secondary/size/medium/different-fonts": "enabled", "primitives/modes/fonts/primary/size/global/designsystemet": "enabled", "primitives/modes/fonts/primary/size/medium/designsystemet": "enabled", - "primitives/modes/fonts/primary/size/global/different-fonts": "enabled", - "primitives/modes/fonts/primary/size/medium/different-fonts": "enabled" + "primitives/modes/fonts/secondary/size/global/designsystemet": "enabled", + "primitives/modes/fonts/secondary/size/medium/designsystemet": "enabled", + "primitives/modes/fonts/main/size/global/different-fonts": "enabled", + "primitives/modes/fonts/main/size/medium/different-fonts": "enabled", + "primitives/modes/fonts/headings/size/global/different-fonts": "enabled", + "primitives/modes/fonts/headings/size/medium/different-fonts": "enabled" }, "id": "fb11567729c298ca37c9da4e3a27716a23480824", "$figmaCollectionId": "VariableCollectionId:36248:20757", @@ -25,14 +25,14 @@ "selectedTokenSets": { "primitives/modes/size/small": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/fonts/secondary/size/global/designsystemet": "enabled", - "primitives/modes/fonts/secondary/size/small/designsystemet": "enabled", - "primitives/modes/fonts/secondary/size/global/different-fonts": "enabled", - "primitives/modes/fonts/secondary/size/small/different-fonts": "enabled", "primitives/modes/fonts/primary/size/global/designsystemet": "enabled", "primitives/modes/fonts/primary/size/small/designsystemet": "enabled", - "primitives/modes/fonts/primary/size/global/different-fonts": "enabled", - "primitives/modes/fonts/primary/size/small/different-fonts": "enabled" + "primitives/modes/fonts/secondary/size/global/designsystemet": "enabled", + "primitives/modes/fonts/secondary/size/small/designsystemet": "enabled", + "primitives/modes/fonts/main/size/global/different-fonts": "enabled", + "primitives/modes/fonts/main/size/small/different-fonts": "enabled", + "primitives/modes/fonts/headings/size/global/different-fonts": "enabled", + "primitives/modes/fonts/headings/size/small/different-fonts": "enabled" }, "id": "8b2c8cc86611a34b135cb22948666779361fd729", "$figmaCollectionId": "VariableCollectionId:36248:20757", @@ -45,14 +45,14 @@ "selectedTokenSets": { "primitives/modes/size/large": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/fonts/secondary/size/global/designsystemet": "enabled", - "primitives/modes/fonts/secondary/size/large/designsystemet": "enabled", - "primitives/modes/fonts/secondary/size/global/different-fonts": "enabled", - "primitives/modes/fonts/secondary/size/large/different-fonts": "enabled", "primitives/modes/fonts/primary/size/global/designsystemet": "enabled", "primitives/modes/fonts/primary/size/large/designsystemet": "enabled", - "primitives/modes/fonts/primary/size/global/different-fonts": "enabled", - "primitives/modes/fonts/primary/size/large/different-fonts": "enabled" + "primitives/modes/fonts/secondary/size/global/designsystemet": "enabled", + "primitives/modes/fonts/secondary/size/large/designsystemet": "enabled", + "primitives/modes/fonts/main/size/global/different-fonts": "enabled", + "primitives/modes/fonts/main/size/large/different-fonts": "enabled", + "primitives/modes/fonts/headings/size/global/different-fonts": "enabled", + "primitives/modes/fonts/headings/size/large/different-fonts": "enabled" }, "id": "d49b9eebeb48a4f165a74b7261733d0a73370f0e", "$figmaCollectionId": "VariableCollectionId:36248:20757", @@ -65,10 +65,10 @@ "$figmaModeId": "40960:6", "name": "designsystemet", "selectedTokenSets": { - "primitives/fonts/secondary/designsystemet": "enabled", "primitives/fonts/primary/designsystemet": "enabled", - "primitives/fonts/secondary/different-fonts": "enabled", - "primitives/fonts/primary/different-fonts": "enabled", + "primitives/fonts/secondary/designsystemet": "enabled", + "primitives/fonts/main/different-fonts": "enabled", + "primitives/fonts/headings/different-fonts": "enabled", "themes/designsystemet": "enabled" }, "group": "Theme" @@ -79,10 +79,10 @@ "$figmaModeId": "40960:7", "name": "different-fonts", "selectedTokenSets": { - "primitives/fonts/secondary/designsystemet": "enabled", "primitives/fonts/primary/designsystemet": "enabled", - "primitives/fonts/secondary/different-fonts": "enabled", - "primitives/fonts/primary/different-fonts": "enabled", + "primitives/fonts/secondary/designsystemet": "enabled", + "primitives/fonts/main/different-fonts": "enabled", + "primitives/fonts/headings/different-fonts": "enabled", "themes/different-fonts": "enabled" }, "group": "Theme" diff --git a/design-tokens/primitives/fonts/primary/different-fonts.json b/design-tokens/primitives/fonts/headings/different-fonts.json similarity index 98% rename from design-tokens/primitives/fonts/primary/different-fonts.json rename to design-tokens/primitives/fonts/headings/different-fonts.json index 15d41fec2b..24730b50e9 100644 --- a/design-tokens/primitives/fonts/primary/different-fonts.json +++ b/design-tokens/primitives/fonts/headings/different-fonts.json @@ -1,7 +1,7 @@ { "different-fonts": { "fonts": { - "primary": { + "headings": { "font-family": { "$type": "fontFamilies", "$value": "Karantina" diff --git a/design-tokens/primitives/fonts/secondary/different-fonts.json b/design-tokens/primitives/fonts/main/different-fonts.json similarity index 98% rename from design-tokens/primitives/fonts/secondary/different-fonts.json rename to design-tokens/primitives/fonts/main/different-fonts.json index b83842a3e2..93e12e99bb 100644 --- a/design-tokens/primitives/fonts/secondary/different-fonts.json +++ b/design-tokens/primitives/fonts/main/different-fonts.json @@ -1,7 +1,7 @@ { "different-fonts": { "fonts": { - "secondary": { + "main": { "font-family": { "$type": "fontFamilies", "$value": "Playpen Sans" diff --git a/design-tokens/primitives/modes/fonts/headings/size/global/different-fonts.json b/design-tokens/primitives/modes/fonts/headings/size/global/different-fonts.json new file mode 100644 index 0000000000..b79ed5cf07 --- /dev/null +++ b/design-tokens/primitives/modes/fonts/headings/size/global/different-fonts.json @@ -0,0 +1,62 @@ +{ + "different-fonts": { + "fonts": { + "headings": { + "font-size": { + "1": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.headings.font-scale._base} / pow({different-fonts.fonts.headings.font-scale._ratio}, 3), 0)" + }, + "2": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.headings.font-scale._base} / pow({different-fonts.fonts.headings.font-scale._ratio}, 2), 0)" + }, + "3": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.headings.font-scale._base} / pow({different-fonts.fonts.headings.font-scale._ratio}, 1), 0)" + }, + "4": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.headings.font-scale._base} * pow({different-fonts.fonts.headings.font-scale._ratio}, 0), 0)" + }, + "5": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.headings.font-scale._base} * pow({different-fonts.fonts.headings.font-scale._ratio}, 1), 0)" + }, + "6": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.headings.font-scale._base} * pow({different-fonts.fonts.headings.font-scale._ratio}, 2), 0)" + }, + "7": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.headings.font-scale._base} * pow({different-fonts.fonts.headings.font-scale._ratio}, 3), 0)" + }, + "8": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.headings.font-scale._base} * pow({different-fonts.fonts.headings.font-scale._ratio}, 4), 0)" + }, + "9": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.headings.font-scale._base} * pow({different-fonts.fonts.headings.font-scale._ratio}, 5), 0)" + }, + "10": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.headings.font-scale._base} * pow({different-fonts.fonts.headings.font-scale._ratio}, 6), 0)" + }, + "11": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.headings.font-scale._base} * pow({different-fonts.fonts.headings.font-scale._ratio}, 7), 0)" + }, + "12": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.headings.font-scale._base} * pow({different-fonts.fonts.headings.font-scale._ratio}, 8), 0)" + }, + "13": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.headings.font-scale._base} * pow({different-fonts.fonts.headings.font-scale._ratio}, 9), 0)" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/fonts/primary/size/large/different-fonts.json b/design-tokens/primitives/modes/fonts/headings/size/large/different-fonts.json similarity index 93% rename from design-tokens/primitives/modes/fonts/primary/size/large/different-fonts.json rename to design-tokens/primitives/modes/fonts/headings/size/large/different-fonts.json index 9af3020f21..c3c41ca19e 100644 --- a/design-tokens/primitives/modes/fonts/primary/size/large/different-fonts.json +++ b/design-tokens/primitives/modes/fonts/headings/size/large/different-fonts.json @@ -1,7 +1,7 @@ { "different-fonts": { "fonts": { - "primary": { + "headings": { "font-scale": { "_base": { "$type": "number", diff --git a/design-tokens/primitives/modes/fonts/secondary/size/large/different-fonts.json b/design-tokens/primitives/modes/fonts/headings/size/medium/different-fonts.json similarity index 93% rename from design-tokens/primitives/modes/fonts/secondary/size/large/different-fonts.json rename to design-tokens/primitives/modes/fonts/headings/size/medium/different-fonts.json index c472895792..e54e878916 100644 --- a/design-tokens/primitives/modes/fonts/secondary/size/large/different-fonts.json +++ b/design-tokens/primitives/modes/fonts/headings/size/medium/different-fonts.json @@ -1,7 +1,7 @@ { "different-fonts": { "fonts": { - "secondary": { + "headings": { "font-scale": { "_base": { "$type": "number", diff --git a/design-tokens/primitives/modes/fonts/primary/size/small/different-fonts.json b/design-tokens/primitives/modes/fonts/headings/size/small/different-fonts.json similarity index 93% rename from design-tokens/primitives/modes/fonts/primary/size/small/different-fonts.json rename to design-tokens/primitives/modes/fonts/headings/size/small/different-fonts.json index ae2e85bfef..b36745d143 100644 --- a/design-tokens/primitives/modes/fonts/primary/size/small/different-fonts.json +++ b/design-tokens/primitives/modes/fonts/headings/size/small/different-fonts.json @@ -1,7 +1,7 @@ { "different-fonts": { "fonts": { - "primary": { + "headings": { "font-scale": { "_base": { "$type": "number", diff --git a/design-tokens/primitives/modes/fonts/main/size/global/different-fonts.json b/design-tokens/primitives/modes/fonts/main/size/global/different-fonts.json new file mode 100644 index 0000000000..573a5a27b1 --- /dev/null +++ b/design-tokens/primitives/modes/fonts/main/size/global/different-fonts.json @@ -0,0 +1,62 @@ +{ + "different-fonts": { + "fonts": { + "main": { + "font-size": { + "1": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.main.font-scale._base} / pow({different-fonts.fonts.main.font-scale._ratio}, 3), 0)" + }, + "2": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.main.font-scale._base} / pow({different-fonts.fonts.main.font-scale._ratio}, 2), 0)" + }, + "3": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.main.font-scale._base} / pow({different-fonts.fonts.main.font-scale._ratio}, 1), 0)" + }, + "4": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.main.font-scale._base} * pow({different-fonts.fonts.main.font-scale._ratio}, 0), 0)" + }, + "5": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.main.font-scale._base} * pow({different-fonts.fonts.main.font-scale._ratio}, 1), 0)" + }, + "6": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.main.font-scale._base} * pow({different-fonts.fonts.main.font-scale._ratio}, 2), 0)" + }, + "7": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.main.font-scale._base} * pow({different-fonts.fonts.main.font-scale._ratio}, 3), 0)" + }, + "8": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.main.font-scale._base} * pow({different-fonts.fonts.main.font-scale._ratio}, 4), 0)" + }, + "9": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.main.font-scale._base} * pow({different-fonts.fonts.main.font-scale._ratio}, 5), 0)" + }, + "10": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.main.font-scale._base} * pow({different-fonts.fonts.main.font-scale._ratio}, 6), 0)" + }, + "11": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.main.font-scale._base} * pow({different-fonts.fonts.main.font-scale._ratio}, 7), 0)" + }, + "12": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.main.font-scale._base} * pow({different-fonts.fonts.main.font-scale._ratio}, 8), 0)" + }, + "13": { + "$type": "fontSizes", + "$value": "roundTo({different-fonts.fonts.main.font-scale._base} * pow({different-fonts.fonts.main.font-scale._ratio}, 9), 0)" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/fonts/primary/size/medium/different-fonts.json b/design-tokens/primitives/modes/fonts/main/size/large/different-fonts.json similarity index 93% rename from design-tokens/primitives/modes/fonts/primary/size/medium/different-fonts.json rename to design-tokens/primitives/modes/fonts/main/size/large/different-fonts.json index 28ff186b56..76ddb8ed60 100644 --- a/design-tokens/primitives/modes/fonts/primary/size/medium/different-fonts.json +++ b/design-tokens/primitives/modes/fonts/main/size/large/different-fonts.json @@ -1,7 +1,7 @@ { "different-fonts": { "fonts": { - "primary": { + "main": { "font-scale": { "_base": { "$type": "number", diff --git a/design-tokens/primitives/modes/fonts/secondary/size/medium/different-fonts.json b/design-tokens/primitives/modes/fonts/main/size/medium/different-fonts.json similarity index 93% rename from design-tokens/primitives/modes/fonts/secondary/size/medium/different-fonts.json rename to design-tokens/primitives/modes/fonts/main/size/medium/different-fonts.json index 480973d4a1..1d3c328b88 100644 --- a/design-tokens/primitives/modes/fonts/secondary/size/medium/different-fonts.json +++ b/design-tokens/primitives/modes/fonts/main/size/medium/different-fonts.json @@ -1,7 +1,7 @@ { "different-fonts": { "fonts": { - "secondary": { + "main": { "font-scale": { "_base": { "$type": "number", diff --git a/design-tokens/primitives/modes/fonts/secondary/size/small/different-fonts.json b/design-tokens/primitives/modes/fonts/main/size/small/different-fonts.json similarity index 93% rename from design-tokens/primitives/modes/fonts/secondary/size/small/different-fonts.json rename to design-tokens/primitives/modes/fonts/main/size/small/different-fonts.json index 1b332f3908..32ac93619b 100644 --- a/design-tokens/primitives/modes/fonts/secondary/size/small/different-fonts.json +++ b/design-tokens/primitives/modes/fonts/main/size/small/different-fonts.json @@ -1,7 +1,7 @@ { "different-fonts": { "fonts": { - "secondary": { + "main": { "font-scale": { "_base": { "$type": "number", diff --git a/design-tokens/primitives/modes/fonts/primary/size/global/different-fonts.json b/design-tokens/primitives/modes/fonts/primary/size/global/different-fonts.json deleted file mode 100644 index 3dff57e395..0000000000 --- a/design-tokens/primitives/modes/fonts/primary/size/global/different-fonts.json +++ /dev/null @@ -1,62 +0,0 @@ -{ - "different-fonts": { - "fonts": { - "primary": { - "font-size": { - "1": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} / pow({different-fonts.fonts.primary.font-scale._ratio}, 3), 0)" - }, - "2": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} / pow({different-fonts.fonts.primary.font-scale._ratio}, 2), 0)" - }, - "3": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} / pow({different-fonts.fonts.primary.font-scale._ratio}, 1), 0)" - }, - "4": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 0), 0)" - }, - "5": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 1), 0)" - }, - "6": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 2), 0)" - }, - "7": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 3), 0)" - }, - "8": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 4), 0)" - }, - "9": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 5), 0)" - }, - "10": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 6), 0)" - }, - "11": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 7), 0)" - }, - "12": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 8), 0)" - }, - "13": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.primary.font-scale._base} * pow({different-fonts.fonts.primary.font-scale._ratio}, 9), 0)" - } - } - } - } - } -} \ No newline at end of file diff --git a/design-tokens/primitives/modes/fonts/secondary/size/global/different-fonts.json b/design-tokens/primitives/modes/fonts/secondary/size/global/different-fonts.json deleted file mode 100644 index 57d1bf6268..0000000000 --- a/design-tokens/primitives/modes/fonts/secondary/size/global/different-fonts.json +++ /dev/null @@ -1,62 +0,0 @@ -{ - "different-fonts": { - "fonts": { - "secondary": { - "font-size": { - "1": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} / pow({different-fonts.fonts.secondary.font-scale._ratio}, 3), 0)" - }, - "2": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} / pow({different-fonts.fonts.secondary.font-scale._ratio}, 2), 0)" - }, - "3": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} / pow({different-fonts.fonts.secondary.font-scale._ratio}, 1), 0)" - }, - "4": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 0), 0)" - }, - "5": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 1), 0)" - }, - "6": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 2), 0)" - }, - "7": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 3), 0)" - }, - "8": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 4), 0)" - }, - "9": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 5), 0)" - }, - "10": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 6), 0)" - }, - "11": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 7), 0)" - }, - "12": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 8), 0)" - }, - "13": { - "$type": "fontSizes", - "$value": "roundTo({different-fonts.fonts.secondary.font-scale._base} * pow({different-fonts.fonts.secondary.font-scale._ratio}, 9), 0)" - } - } - } - } - } -} \ No newline at end of file diff --git a/design-tokens/themes/different-fonts.json b/design-tokens/themes/different-fonts.json index 7acd510cf7..580dfe31f7 100644 --- a/design-tokens/themes/different-fonts.json +++ b/design-tokens/themes/different-fonts.json @@ -546,255 +546,255 @@ } }, "fonts": { - "secondary": { + "main": { "font-family": { "$type": "fontFamilies", - "$value": "{different-fonts.fonts.secondary.font-family}" + "$value": "{different-fonts.fonts.main.font-family}" }, "font-weight": { "medium": { "$type": "fontWeights", - "$value": "{different-fonts.fonts.secondary.font-weight.medium}" + "$value": "{different-fonts.fonts.main.font-weight.medium}" }, "semibold": { "$type": "fontWeights", - "$value": "{different-fonts.fonts.secondary.font-weight.semibold}" + "$value": "{different-fonts.fonts.main.font-weight.semibold}" }, "regular": { "$type": "fontWeights", - "$value": "{different-fonts.fonts.secondary.font-weight.regular}" + "$value": "{different-fonts.fonts.main.font-weight.regular}" } }, "font-size": { "1": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.secondary.font-size.1}" + "$value": "{different-fonts.fonts.main.font-size.1}" }, "2": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.secondary.font-size.2}" + "$value": "{different-fonts.fonts.main.font-size.2}" }, "3": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.secondary.font-size.3}" + "$value": "{different-fonts.fonts.main.font-size.3}" }, "4": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.secondary.font-size.4}" + "$value": "{different-fonts.fonts.main.font-size.4}" }, "5": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.secondary.font-size.5}" + "$value": "{different-fonts.fonts.main.font-size.5}" }, "6": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.secondary.font-size.6}" + "$value": "{different-fonts.fonts.main.font-size.6}" }, "7": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.secondary.font-size.7}" + "$value": "{different-fonts.fonts.main.font-size.7}" }, "8": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.secondary.font-size.8}" + "$value": "{different-fonts.fonts.main.font-size.8}" }, "9": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.secondary.font-size.9}" + "$value": "{different-fonts.fonts.main.font-size.9}" }, "10": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.secondary.font-size.10}" + "$value": "{different-fonts.fonts.main.font-size.10}" }, "11": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.secondary.font-size.11}" + "$value": "{different-fonts.fonts.main.font-size.11}" }, "12": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.secondary.font-size.12}" + "$value": "{different-fonts.fonts.main.font-size.12}" }, "13": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.secondary.font-size.13}" + "$value": "{different-fonts.fonts.main.font-size.13}" } }, "line-height": { "sm": { "$type": "lineHeights", - "$value": "{different-fonts.fonts.secondary.line-height.sm}" + "$value": "{different-fonts.fonts.main.line-height.sm}" }, "md": { "$type": "lineHeights", - "$value": "{different-fonts.fonts.secondary.line-height.md}" + "$value": "{different-fonts.fonts.main.line-height.md}" }, "lg": { "$type": "lineHeights", - "$value": "{different-fonts.fonts.secondary.line-height.lg}" + "$value": "{different-fonts.fonts.main.line-height.lg}" } }, "letter-spacing": { "1": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.secondary.letter-spacing.1}" + "$value": "{different-fonts.fonts.main.letter-spacing.1}" }, "2": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.secondary.letter-spacing.2}" + "$value": "{different-fonts.fonts.main.letter-spacing.2}" }, "3": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.secondary.letter-spacing.3}" + "$value": "{different-fonts.fonts.main.letter-spacing.3}" }, "4": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.secondary.letter-spacing.4}" + "$value": "{different-fonts.fonts.main.letter-spacing.4}" }, "5": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.secondary.letter-spacing.5}" + "$value": "{different-fonts.fonts.main.letter-spacing.5}" }, "6": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.secondary.letter-spacing.6}" + "$value": "{different-fonts.fonts.main.letter-spacing.6}" }, "7": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.secondary.letter-spacing.7}" + "$value": "{different-fonts.fonts.main.letter-spacing.7}" }, "8": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.secondary.letter-spacing.8}" + "$value": "{different-fonts.fonts.main.letter-spacing.8}" }, "9": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.secondary.letter-spacing.9}" + "$value": "{different-fonts.fonts.main.letter-spacing.9}" } } }, - "primary": { + "headings": { "font-family": { "$type": "fontFamilies", - "$value": "{different-fonts.fonts.primary.font-family}" + "$value": "{different-fonts.fonts.headings.font-family}" }, "font-weight": { "medium": { "$type": "fontWeights", - "$value": "{different-fonts.fonts.primary.font-weight.medium}" + "$value": "{different-fonts.fonts.headings.font-weight.medium}" }, "semibold": { "$type": "fontWeights", - "$value": "{different-fonts.fonts.primary.font-weight.semibold}" + "$value": "{different-fonts.fonts.headings.font-weight.semibold}" }, "regular": { "$type": "fontWeights", - "$value": "{different-fonts.fonts.primary.font-weight.regular}" + "$value": "{different-fonts.fonts.headings.font-weight.regular}" } }, "font-size": { "1": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.primary.font-size.1}" + "$value": "{different-fonts.fonts.headings.font-size.1}" }, "2": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.primary.font-size.2}" + "$value": "{different-fonts.fonts.headings.font-size.2}" }, "3": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.primary.font-size.3}" + "$value": "{different-fonts.fonts.headings.font-size.3}" }, "4": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.primary.font-size.4}" + "$value": "{different-fonts.fonts.headings.font-size.4}" }, "5": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.primary.font-size.5}" + "$value": "{different-fonts.fonts.headings.font-size.5}" }, "6": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.primary.font-size.6}" + "$value": "{different-fonts.fonts.headings.font-size.6}" }, "7": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.primary.font-size.7}" + "$value": "{different-fonts.fonts.headings.font-size.7}" }, "8": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.primary.font-size.8}" + "$value": "{different-fonts.fonts.headings.font-size.8}" }, "9": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.primary.font-size.9}" + "$value": "{different-fonts.fonts.headings.font-size.9}" }, "10": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.primary.font-size.10}" + "$value": "{different-fonts.fonts.headings.font-size.10}" }, "11": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.primary.font-size.11}" + "$value": "{different-fonts.fonts.headings.font-size.11}" }, "12": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.primary.font-size.12}" + "$value": "{different-fonts.fonts.headings.font-size.12}" }, "13": { "$type": "fontSizes", - "$value": "{different-fonts.fonts.primary.font-size.13}" + "$value": "{different-fonts.fonts.headings.font-size.13}" } }, "line-height": { "sm": { "$type": "lineHeights", - "$value": "{different-fonts.fonts.primary.line-height.sm}" + "$value": "{different-fonts.fonts.headings.line-height.sm}" }, "md": { "$type": "lineHeights", - "$value": "{different-fonts.fonts.primary.line-height.md}" + "$value": "{different-fonts.fonts.headings.line-height.md}" }, "lg": { "$type": "lineHeights", - "$value": "{different-fonts.fonts.primary.line-height.lg}" + "$value": "{different-fonts.fonts.headings.line-height.lg}" } }, "letter-spacing": { "1": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.primary.letter-spacing.1}" + "$value": "{different-fonts.fonts.headings.letter-spacing.1}" }, "2": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.primary.letter-spacing.2}" + "$value": "{different-fonts.fonts.headings.letter-spacing.2}" }, "3": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.primary.letter-spacing.3}" + "$value": "{different-fonts.fonts.headings.letter-spacing.3}" }, "4": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.primary.letter-spacing.4}" + "$value": "{different-fonts.fonts.headings.letter-spacing.4}" }, "5": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.primary.letter-spacing.5}" + "$value": "{different-fonts.fonts.headings.letter-spacing.5}" }, "6": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.primary.letter-spacing.6}" + "$value": "{different-fonts.fonts.headings.letter-spacing.6}" }, "7": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.primary.letter-spacing.7}" + "$value": "{different-fonts.fonts.headings.letter-spacing.7}" }, "8": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.primary.letter-spacing.8}" + "$value": "{different-fonts.fonts.headings.letter-spacing.8}" }, "9": { "$type": "letterSpacing", - "$value": "{different-fonts.fonts.primary.letter-spacing.9}" + "$value": "{different-fonts.fonts.headings.letter-spacing.9}" } } } @@ -802,113 +802,113 @@ "line-height": { "sm": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.sm}" + "$value": "{fonts.main.line-height.sm}" }, "md": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.md}" + "$value": "{fonts.main.line-height.md}" }, "lg": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.lg}" + "$value": "{fonts.main.line-height.lg}" } }, "font-family": { "$type": "fontFamilies", - "$value": "{fonts.secondary.font-family}" + "$value": "{fonts.main.font-family}" }, "font-weight": { "medium": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.medium}" + "$value": "{fonts.main.font-weight.medium}" }, "semibold": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.semibold}" + "$value": "{fonts.main.font-weight.semibold}" }, "regular": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.regular}" + "$value": "{fonts.main.font-weight.regular}" } }, "font-size": { "1": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.1}" + "$value": "{fonts.main.font-size.1}" }, "2": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.2}" + "$value": "{fonts.main.font-size.2}" }, "3": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.3}" + "$value": "{fonts.main.font-size.3}" }, "4": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.4}" + "$value": "{fonts.main.font-size.4}" }, "5": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.5}" + "$value": "{fonts.main.font-size.5}" }, "6": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.6}" + "$value": "{fonts.main.font-size.6}" }, "7": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.8}" + "$value": "{fonts.main.font-size.8}" }, "8": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.9}" + "$value": "{fonts.main.font-size.9}" }, "9": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.11}" + "$value": "{fonts.main.font-size.11}" }, "10": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.13}" + "$value": "{fonts.main.font-size.13}" } }, "letter-spacing": { "1": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.1}" + "$value": "{fonts.main.letter-spacing.1}" }, "2": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.2}" + "$value": "{fonts.main.letter-spacing.2}" }, "3": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.3}" + "$value": "{fonts.main.letter-spacing.3}" }, "4": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.4}" + "$value": "{fonts.main.letter-spacing.4}" }, "5": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.5}" + "$value": "{fonts.main.letter-spacing.5}" }, "6": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.6}" + "$value": "{fonts.main.letter-spacing.6}" }, "7": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.7}" + "$value": "{fonts.main.letter-spacing.7}" }, "8": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.8}" + "$value": "{fonts.main.letter-spacing.8}" }, "9": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.9}" + "$value": "{fonts.main.letter-spacing.9}" } }, "typography-mapping": { @@ -916,155 +916,155 @@ "2xl": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.primary.font-family}" + "$value": "{fonts.headings.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.medium}" + "$value": "{fonts.headings.font-weight.medium}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.sm}" + "$value": "{fonts.headings.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.13}" + "$value": "{fonts.headings.font-size.13}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.1}" + "$value": "{fonts.headings.letter-spacing.1}" } }, "xl": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.primary.font-family}" + "$value": "{fonts.headings.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.medium}" + "$value": "{fonts.headings.font-weight.medium}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.sm}" + "$value": "{fonts.headings.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.11}" + "$value": "{fonts.headings.font-size.11}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.1}" + "$value": "{fonts.headings.letter-spacing.1}" } }, "lg": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.primary.font-family}" + "$value": "{fonts.headings.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.medium}" + "$value": "{fonts.headings.font-weight.medium}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.sm}" + "$value": "{fonts.headings.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.9}" + "$value": "{fonts.headings.font-size.9}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.2}" + "$value": "{fonts.headings.letter-spacing.2}" } }, "md": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.primary.font-family}" + "$value": "{fonts.headings.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.medium}" + "$value": "{fonts.headings.font-weight.medium}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.sm}" + "$value": "{fonts.headings.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.8}" + "$value": "{fonts.headings.font-size.8}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.3}" + "$value": "{fonts.headings.letter-spacing.3}" } }, "sm": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.primary.font-family}" + "$value": "{fonts.headings.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.medium}" + "$value": "{fonts.headings.font-weight.medium}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.sm}" + "$value": "{fonts.headings.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.6}" + "$value": "{fonts.headings.font-size.6}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.5}" + "$value": "{fonts.headings.letter-spacing.5}" } }, "xs": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.primary.font-family}" + "$value": "{fonts.headings.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.medium}" + "$value": "{fonts.headings.font-weight.medium}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.sm}" + "$value": "{fonts.headings.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.5}" + "$value": "{fonts.headings.font-size.5}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.6}" + "$value": "{fonts.headings.letter-spacing.6}" } }, "2xs": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.primary.font-family}" + "$value": "{fonts.headings.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.medium}" + "$value": "{fonts.headings.font-weight.medium}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.sm}" + "$value": "{fonts.headings.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.4}" + "$value": "{fonts.headings.font-size.4}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.6}" + "$value": "{fonts.headings.letter-spacing.6}" } } }, @@ -1072,222 +1072,222 @@ "xl": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.secondary.font-family}" + "$value": "{fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.regular}" + "$value": "{fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.md}" + "$value": "{fonts.main.line-height.md}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.6}" + "$value": "{fonts.main.font-size.6}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.8}" + "$value": "{fonts.main.letter-spacing.8}" } }, "lg": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.secondary.font-family}" + "$value": "{fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.regular}" + "$value": "{fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.md}" + "$value": "{fonts.main.line-height.md}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.5}" + "$value": "{fonts.main.font-size.5}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.8}" + "$value": "{fonts.main.letter-spacing.8}" } }, "md": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.secondary.font-family}" + "$value": "{fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.regular}" + "$value": "{fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.md}" + "$value": "{fonts.main.line-height.md}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.4}" + "$value": "{fonts.main.font-size.4}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.8}" + "$value": "{fonts.main.letter-spacing.8}" } }, "sm": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.secondary.font-family}" + "$value": "{fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.regular}" + "$value": "{fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.md}" + "$value": "{fonts.main.line-height.md}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.3}" + "$value": "{fonts.main.font-size.3}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.7}" + "$value": "{fonts.main.letter-spacing.7}" } }, "xs": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.secondary.font-family}" + "$value": "{fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.regular}" + "$value": "{fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.md}" + "$value": "{fonts.main.line-height.md}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.2}" + "$value": "{fonts.main.font-size.2}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.6}" + "$value": "{fonts.main.letter-spacing.6}" } }, "short": { "xl": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.secondary.font-family}" + "$value": "{fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.regular}" + "$value": "{fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.sm}" + "$value": "{fonts.main.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.6}" + "$value": "{fonts.main.font-size.6}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.8}" + "$value": "{fonts.main.letter-spacing.8}" } }, "lg": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.secondary.font-family}" + "$value": "{fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.regular}" + "$value": "{fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.sm}" + "$value": "{fonts.main.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.5}" + "$value": "{fonts.main.font-size.5}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.8}" + "$value": "{fonts.main.letter-spacing.8}" } }, "md": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.secondary.font-family}" + "$value": "{fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.regular}" + "$value": "{fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.sm}" + "$value": "{fonts.main.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.4}" + "$value": "{fonts.main.font-size.4}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.8}" + "$value": "{fonts.main.letter-spacing.8}" } }, "sm": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.secondary.font-family}" + "$value": "{fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.regular}" + "$value": "{fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.sm}" + "$value": "{fonts.main.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.3}" + "$value": "{fonts.main.font-size.3}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.7}" + "$value": "{fonts.main.letter-spacing.7}" } }, "xs": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.secondary.font-family}" + "$value": "{fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.regular}" + "$value": "{fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.sm}" + "$value": "{fonts.main.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.2}" + "$value": "{fonts.main.font-size.2}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.6}" + "$value": "{fonts.main.letter-spacing.6}" } } }, @@ -1295,111 +1295,111 @@ "xl": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.secondary.font-family}" + "$value": "{fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.regular}" + "$value": "{fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.lg}" + "$value": "{fonts.main.line-height.lg}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.6}" + "$value": "{fonts.main.font-size.6}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.8}" + "$value": "{fonts.main.letter-spacing.8}" } }, "lg": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.secondary.font-family}" + "$value": "{fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.regular}" + "$value": "{fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.lg}" + "$value": "{fonts.main.line-height.lg}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.5}" + "$value": "{fonts.main.font-size.5}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.8}" + "$value": "{fonts.main.letter-spacing.8}" } }, "md": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.secondary.font-family}" + "$value": "{fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.regular}" + "$value": "{fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.lg}" + "$value": "{fonts.main.line-height.lg}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.4}" + "$value": "{fonts.main.font-size.4}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.8}" + "$value": "{fonts.main.letter-spacing.8}" } }, "sm": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.secondary.font-family}" + "$value": "{fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.regular}" + "$value": "{fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.lg}" + "$value": "{fonts.main.line-height.lg}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.3}" + "$value": "{fonts.main.font-size.3}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.7}" + "$value": "{fonts.main.letter-spacing.7}" } }, "xs": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.secondary.font-family}" + "$value": "{fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.regular}" + "$value": "{fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.lg}" + "$value": "{fonts.main.line-height.lg}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.2}" + "$value": "{fonts.main.font-size.2}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.6}" + "$value": "{fonts.main.letter-spacing.6}" } } } diff --git a/designsystemet.config.json b/designsystemet.config.json index 3a6deb6e74..76106a633b 100644 --- a/designsystemet.config.json +++ b/designsystemet.config.json @@ -16,14 +16,6 @@ }, "borderRadius": 4, "typography": { - "components": { - "heading": { - "font": "secondary" - }, - "body": { - "font": "primary" - } - }, "fonts": { "primary": { "fontFamily": "Inter", @@ -46,6 +38,14 @@ "large": { "base": 18 } } } + }, + "components": { + "heading": { + "font": "secondary" + }, + "body": { + "font": "primary" + } } } }, @@ -62,16 +62,8 @@ }, "borderRadius": 4, "typography": { - "components": { - "heading": { - "font": "primary" - }, - "body": { - "font": "secondary" - } - }, "fonts": { - "secondary": { + "main": { "fontFamily": "Playpen Sans", "fontWeight": { "regular": "Regular", @@ -84,7 +76,7 @@ "large": { "base": 18 } } }, - "primary": { + "headings": { "fontFamily": "Karantina", "fontWeight": { "regular": "Light", @@ -92,6 +84,14 @@ "semibold": "Bold" } } + }, + "components": { + "heading": { + "font": "headings" + }, + "body": { + "font": "main" + } } } } diff --git a/packages/cli/src/scripts/update-preview-tokens.ts b/packages/cli/src/scripts/update-preview-tokens.ts index 4adddb1a5e..ecd4c99093 100644 --- a/packages/cli/src/scripts/update-preview-tokens.ts +++ b/packages/cli/src/scripts/update-preview-tokens.ts @@ -40,7 +40,11 @@ export const formatTheme = async (themeConfig: Theme) => { const { tokenSets, themeDimensions } = await createTokens(themeConfig); const outDir = '../../apps/www/app/_components/tokens/design-tokens'; - const $themes = await generate$Themes(themeDimensions, [themeConfig.name], themeConfig.colors); + const $themes = await generate$Themes( + { ...themeDimensions, fontNamesPerTheme: { [themeConfig.name]: themeDimensions.fontNames } }, + [themeConfig.name], + themeConfig.colors, + ); const processed$themes = $themes.map(processThemeObject); // We run this to populate the `buildOptions.buildTokenFormats` with transformed tokens diff --git a/packages/cli/src/tokens/create/generators/$metadata.ts b/packages/cli/src/tokens/create/generators/$metadata.ts index b4d139d798..56ff148478 100644 --- a/packages/cli/src/tokens/create/generators/$metadata.ts +++ b/packages/cli/src/tokens/create/generators/$metadata.ts @@ -1,22 +1,26 @@ -import type { Colors, TokenSetDimensions } from '../../types.js'; +import type { Colors, TokenSetDimensionsForAllThemes } from '../../types.js'; type Metadata = { tokenSetOrder: string[]; }; -export function generate$Metadata(dimensions: TokenSetDimensions, themes: string[], colors: Colors): Metadata { - const { colorSchemes, sizeModes, fontNames } = dimensions; +export function generate$Metadata( + dimensions: TokenSetDimensionsForAllThemes, + themes: string[], + colors: Colors, +): Metadata { + const { colorSchemes, sizeModes, fontNamesPerTheme } = dimensions; const sizesAndGlobal = ['global', ...sizeModes]; return { tokenSetOrder: [ 'primitives/globals', ...sizesAndGlobal.map((size) => `primitives/modes/size/${size}`), ...themes.flatMap((theme) => - fontNames.flatMap((font) => + fontNamesPerTheme[theme].flatMap((font) => sizesAndGlobal.map((size) => `primitives/modes/fonts/${font}/size/${size}/${theme}`), ), ), - ...themes.flatMap((theme) => fontNames.map((font) => `primitives/fonts/${font}/${theme}`)), + ...themes.flatMap((theme) => fontNamesPerTheme[theme].map((font) => `primitives/fonts/${font}/${theme}`)), ...colorSchemes.flatMap((scheme) => [ ...themes.map((theme) => `primitives/modes/color-scheme/${scheme}/${theme}`), ]), diff --git a/packages/cli/src/tokens/create/generators/$themes.ts b/packages/cli/src/tokens/create/generators/$themes.ts index 9b599f7b4f..451e2b718a 100644 --- a/packages/cli/src/tokens/create/generators/$themes.ts +++ b/packages/cli/src/tokens/create/generators/$themes.ts @@ -1,7 +1,10 @@ import { type ThemeObject, TokenSetStatus } from '@tokens-studio/types'; import type { ColorScheme } from '../../../colors/types.js'; -import type { Colors, TokenSetDimensions } from '../../types.js'; +import type { Colors, TokenSetDimensionsForAllThemes } from '../../types.js'; + +type FontsPerTheme = TokenSetDimensionsForAllThemes['fontNamesPerTheme']; +type SizeModes = TokenSetDimensionsForAllThemes['sizeModes']; const capitalize = (word: string) => word.charAt(0).toUpperCase() + word.slice(1); @@ -21,14 +24,14 @@ type ThemeObject_ = ThemeObject & { }; export async function generate$Themes( - tokenSetDimensions: TokenSetDimensions, + tokenSetDimensions: TokenSetDimensionsForAllThemes, themes: string[], colors: Colors, ): Promise { - const { colorSchemes, fontNames, sizeModes } = tokenSetDimensions; + const { colorSchemes, fontNamesPerTheme, sizeModes } = tokenSetDimensions; return [ - ...generateSizeGroup(themes, fontNames, sizeModes), - ...(await generateThemesGroup(themes, fontNames)), + ...generateSizeGroup(themes, fontNamesPerTheme, sizeModes), + ...(await generateThemesGroup(themes, fontNamesPerTheme)), ...generateColorSchemesGroup(colorSchemes, themes), generateSemanticGroup(), ...(await generateColorGroup('main', colors)), @@ -36,9 +39,7 @@ export async function generate$Themes( ]; } -type SizeModes = TokenSetDimensions['sizeModes']; - -function generateSizeGroup(themes: string[], fontNames: string[], sizeModes: SizeModes): ThemeObject_[] { +function generateSizeGroup(themes: string[], fonts: FontsPerTheme, sizeModes: SizeModes): ThemeObject_[] { const defaultSize = 'medium'; const sizesWithDefaultFirst = [ ...sizeModes.filter((x) => x === defaultSize), @@ -68,8 +69,8 @@ function generateSizeGroup(themes: string[], fontNames: string[], sizeModes: Siz [`primitives/modes/size/${size}`]: TokenSetStatus.SOURCE, 'primitives/modes/size/global': TokenSetStatus.ENABLED, ...Object.fromEntries( - fontNames.flatMap((font) => - themes.flatMap((theme) => [ + themes.flatMap((theme) => + fonts[theme].flatMap((font) => [ [`primitives/modes/fonts/${font}/size/global/${theme}`, TokenSetStatus.ENABLED], [`primitives/modes/fonts/${font}/size/${size}/${theme}`, TokenSetStatus.ENABLED], ]), @@ -117,9 +118,11 @@ function generateColorSchemesGroup(colorSchemes: ColorSchemes, themes: string[]) ); } -async function generateThemesGroup(themes: string[], fonts: string[]): Promise { +async function generateThemesGroup(themes: string[], fonts: FontsPerTheme): Promise { const fontSets = Object.fromEntries( - themes.flatMap((theme) => fonts.map((font) => [`primitives/fonts/${font}/${theme}`, TokenSetStatus.ENABLED])), + themes.flatMap((theme) => + fonts[theme].map((font) => [`primitives/fonts/${font}/${theme}`, TokenSetStatus.ENABLED]), + ), ); return Promise.all( diff --git a/packages/cli/src/tokens/create/write.ts b/packages/cli/src/tokens/create/write.ts index 9a339a0932..07af896e61 100644 --- a/packages/cli/src/tokens/create/write.ts +++ b/packages/cli/src/tokens/create/write.ts @@ -3,7 +3,7 @@ import type { ThemeObject } from '@tokens-studio/types'; import pc from 'picocolors'; import * as R from 'ramda'; import { mkdir, readFile, writeFile } from '../../utils.js'; -import type { Theme, TokenSetDimensions, TokenSets } from '../types.js'; +import type { Theme, TokenSetDimensions, TokenSetDimensionsForAllThemes, TokenSets } from '../types.js'; import { generate$Designsystemet } from './generators/$designsystemet.js'; import { generate$Metadata } from './generators/$metadata.js'; import { generate$Themes } from './generators/$themes.js'; @@ -19,14 +19,39 @@ type WriteTokensOptions = { tokenSets: TokenSets; }; +/* +=== HACKY WORKAROUND === + +When tokens create is run with multiple themes, it will be run like this: + 1. Theme: first-theme + a. Create token sets for first-theme + b. Create $metadata and $themes for first-theme + 2. Theme: second-theme + a. Create token sets for second-theme + b. Create $metadata and $themes for first-theme and second-theme, + overwriting what was done in step 1b. + ... + +Since font names can vary across themes, we have to store them and ensure the generators +for $metadata and $themes have all the necessary information. Else they will overwrite the +correctly generated token set references for fonts with the font names for the last theme. +*/ +let tokenSetDimensionsPerTheme: TokenSetDimensionsForAllThemes; + export const writeTokens = async (options: WriteTokensOptions) => { const { outDir, tokenSets, theme: { name: themeName, colors }, - tokenSetDimensions, + tokenSetDimensions: tokenSetDimensionsForCurrentTheme, dry, } = options; + tokenSetDimensionsPerTheme = tokenSetDimensionsPerTheme ?? { + colorSchemes: tokenSetDimensionsForCurrentTheme.colorSchemes, + sizeModes: tokenSetDimensionsForCurrentTheme.sizeModes, + fontNamesPerTheme: {}, // initialise with empty object, will be populated next + }; + tokenSetDimensionsPerTheme.fontNamesPerTheme[themeName] = tokenSetDimensionsForCurrentTheme.fontNames; const targetDir = path.resolve(process.cwd(), String(outDir)); const $themesPath = path.join(targetDir, '$themes.json'); const $metadataPath = path.join(targetDir, '$metadata.json'); @@ -56,8 +81,8 @@ export const writeTokens = async (options: WriteTokensOptions) => { console.log(`\nThemes: ${pc.blue(themes.join(', '))}`); // Create metadata and themes json for Token Studio and build script - const $themes = await generate$Themes(tokenSetDimensions, themes, colors); - const $metadata = generate$Metadata(tokenSetDimensions, themes, colors); + const $themes = await generate$Themes(tokenSetDimensionsPerTheme, themes, colors); + const $metadata = generate$Metadata(tokenSetDimensionsPerTheme, themes, colors); const $designsystemet = generate$Designsystemet(); await writeFile($themesPath, stringify($themes), dry); diff --git a/packages/cli/src/tokens/format.ts b/packages/cli/src/tokens/format.ts index 744e0e2206..0209163717 100644 --- a/packages/cli/src/tokens/format.ts +++ b/packages/cli/src/tokens/format.ts @@ -19,7 +19,11 @@ export const formatTokens = async (options: Omit { const { tokenSets, themeDimensions } = await createTokens(themeConfig); - const $themes = await generate$Themes(themeDimensions, [themeConfig.name], themeConfig.colors); + const $themes = await generate$Themes( + { ...themeDimensions, fontNamesPerTheme: { [themeConfig.name]: themeDimensions.fontNames } }, + [themeConfig.name], + themeConfig.colors, + ); const processed$themes = $themes.map(processThemeObject); const processedBuilds = await formatTokens({ diff --git a/packages/cli/src/tokens/types.ts b/packages/cli/src/tokens/types.ts index d58eb397b8..39e3376b2f 100644 --- a/packages/cli/src/tokens/types.ts +++ b/packages/cli/src/tokens/types.ts @@ -53,6 +53,14 @@ export type TokenSetDimensions = { fontNames: string[]; }; +/** + * `colorSchemes` and `sizeModes` have to be the same across all themes, + * but `fontNames` can be completely unique per theme + */ +export type TokenSetDimensionsForAllThemes = Omit & { + fontNamesPerTheme: Record; +}; + export type GetSDConfigOptions = { tokensDir?: string; dry?: boolean; From 7282d8527fea78cbdade7bc689b67ddd0760b396 Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Fri, 23 Jan 2026 22:48:37 +0100 Subject: [PATCH 10/14] simplify folder structure for new fonts// and modes/// tokens --- design-tokens/$metadata.json | 40 ++++++------ design-tokens/$themes.json | 64 +++++++++---------- .../primary.json} | 0 .../secondary.json} | 0 .../headings.json} | 0 .../main.json} | 0 .../global/designsystemet/primary.json} | 0 .../global/designsystemet/secondary.json} | 0 .../global/different-fonts/headings.json} | 0 .../global/different-fonts/main.json} | 0 .../large/designsystemet/primary.json} | 0 .../large/designsystemet/secondary.json} | 0 .../large/different-fonts/headings.json} | 0 .../large/different-fonts/main.json} | 0 .../medium/designsystemet/primary.json} | 0 .../medium/designsystemet/secondary.json} | 0 .../medium/different-fonts/headings.json} | 0 .../medium/different-fonts/main.json} | 0 .../small/designsystemet/primary.json} | 0 .../small/designsystemet/secondary.json} | 0 .../small/different-fonts/headings.json} | 0 .../small/different-fonts/main.json} | 0 packages/cli/src/tokens/create.ts | 6 +- .../src/tokens/create/generators/$metadata.ts | 8 +-- .../src/tokens/create/generators/$themes.ts | 6 +- 25 files changed, 62 insertions(+), 62 deletions(-) rename design-tokens/primitives/fonts/{primary/designsystemet.json => designsystemet/primary.json} (100%) rename design-tokens/primitives/fonts/{secondary/designsystemet.json => designsystemet/secondary.json} (100%) rename design-tokens/primitives/fonts/{headings/different-fonts.json => different-fonts/headings.json} (100%) rename design-tokens/primitives/fonts/{main/different-fonts.json => different-fonts/main.json} (100%) rename design-tokens/primitives/modes/{fonts/primary/size/global/designsystemet.json => size/global/designsystemet/primary.json} (100%) rename design-tokens/primitives/modes/{fonts/secondary/size/global/designsystemet.json => size/global/designsystemet/secondary.json} (100%) rename design-tokens/primitives/modes/{fonts/headings/size/global/different-fonts.json => size/global/different-fonts/headings.json} (100%) rename design-tokens/primitives/modes/{fonts/main/size/global/different-fonts.json => size/global/different-fonts/main.json} (100%) rename design-tokens/primitives/modes/{fonts/primary/size/large/designsystemet.json => size/large/designsystemet/primary.json} (100%) rename design-tokens/primitives/modes/{fonts/secondary/size/large/designsystemet.json => size/large/designsystemet/secondary.json} (100%) rename design-tokens/primitives/modes/{fonts/headings/size/large/different-fonts.json => size/large/different-fonts/headings.json} (100%) rename design-tokens/primitives/modes/{fonts/main/size/large/different-fonts.json => size/large/different-fonts/main.json} (100%) rename design-tokens/primitives/modes/{fonts/primary/size/medium/designsystemet.json => size/medium/designsystemet/primary.json} (100%) rename design-tokens/primitives/modes/{fonts/secondary/size/medium/designsystemet.json => size/medium/designsystemet/secondary.json} (100%) rename design-tokens/primitives/modes/{fonts/headings/size/medium/different-fonts.json => size/medium/different-fonts/headings.json} (100%) rename design-tokens/primitives/modes/{fonts/main/size/medium/different-fonts.json => size/medium/different-fonts/main.json} (100%) rename design-tokens/primitives/modes/{fonts/primary/size/small/designsystemet.json => size/small/designsystemet/primary.json} (100%) rename design-tokens/primitives/modes/{fonts/secondary/size/small/designsystemet.json => size/small/designsystemet/secondary.json} (100%) rename design-tokens/primitives/modes/{fonts/headings/size/small/different-fonts.json => size/small/different-fonts/headings.json} (100%) rename design-tokens/primitives/modes/{fonts/main/size/small/different-fonts.json => size/small/different-fonts/main.json} (100%) diff --git a/design-tokens/$metadata.json b/design-tokens/$metadata.json index d226d76314..001f05e0c1 100644 --- a/design-tokens/$metadata.json +++ b/design-tokens/$metadata.json @@ -5,26 +5,26 @@ "primitives/modes/size/small", "primitives/modes/size/medium", "primitives/modes/size/large", - "primitives/modes/fonts/primary/size/global/designsystemet", - "primitives/modes/fonts/primary/size/small/designsystemet", - "primitives/modes/fonts/primary/size/medium/designsystemet", - "primitives/modes/fonts/primary/size/large/designsystemet", - "primitives/modes/fonts/secondary/size/global/designsystemet", - "primitives/modes/fonts/secondary/size/small/designsystemet", - "primitives/modes/fonts/secondary/size/medium/designsystemet", - "primitives/modes/fonts/secondary/size/large/designsystemet", - "primitives/modes/fonts/main/size/global/different-fonts", - "primitives/modes/fonts/main/size/small/different-fonts", - "primitives/modes/fonts/main/size/medium/different-fonts", - "primitives/modes/fonts/main/size/large/different-fonts", - "primitives/modes/fonts/headings/size/global/different-fonts", - "primitives/modes/fonts/headings/size/small/different-fonts", - "primitives/modes/fonts/headings/size/medium/different-fonts", - "primitives/modes/fonts/headings/size/large/different-fonts", - "primitives/fonts/primary/designsystemet", - "primitives/fonts/secondary/designsystemet", - "primitives/fonts/main/different-fonts", - "primitives/fonts/headings/different-fonts", + "primitives/modes/size/global/designsystemet/primary", + "primitives/modes/size/global/designsystemet/secondary", + "primitives/modes/size/global/different-fonts/main", + "primitives/modes/size/global/different-fonts/headings", + "primitives/modes/size/small/designsystemet/primary", + "primitives/modes/size/small/designsystemet/secondary", + "primitives/modes/size/small/different-fonts/main", + "primitives/modes/size/small/different-fonts/headings", + "primitives/modes/size/medium/designsystemet/primary", + "primitives/modes/size/medium/designsystemet/secondary", + "primitives/modes/size/medium/different-fonts/main", + "primitives/modes/size/medium/different-fonts/headings", + "primitives/modes/size/large/designsystemet/primary", + "primitives/modes/size/large/designsystemet/secondary", + "primitives/modes/size/large/different-fonts/main", + "primitives/modes/size/large/different-fonts/headings", + "primitives/fonts/designsystemet/primary", + "primitives/fonts/designsystemet/secondary", + "primitives/fonts/different-fonts/main", + "primitives/fonts/different-fonts/headings", "primitives/modes/color-scheme/light/designsystemet", "primitives/modes/color-scheme/light/different-fonts", "primitives/modes/color-scheme/dark/designsystemet", diff --git a/design-tokens/$themes.json b/design-tokens/$themes.json index 86760df382..1c10916b99 100644 --- a/design-tokens/$themes.json +++ b/design-tokens/$themes.json @@ -5,14 +5,14 @@ "selectedTokenSets": { "primitives/modes/size/medium": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/fonts/primary/size/global/designsystemet": "enabled", - "primitives/modes/fonts/primary/size/medium/designsystemet": "enabled", - "primitives/modes/fonts/secondary/size/global/designsystemet": "enabled", - "primitives/modes/fonts/secondary/size/medium/designsystemet": "enabled", - "primitives/modes/fonts/main/size/global/different-fonts": "enabled", - "primitives/modes/fonts/main/size/medium/different-fonts": "enabled", - "primitives/modes/fonts/headings/size/global/different-fonts": "enabled", - "primitives/modes/fonts/headings/size/medium/different-fonts": "enabled" + "primitives/modes/size/global/designsystemet/primary": "enabled", + "primitives/modes/size/medium/designsystemet/primary": "enabled", + "primitives/modes/size/global/designsystemet/secondary": "enabled", + "primitives/modes/size/medium/designsystemet/secondary": "enabled", + "primitives/modes/size/global/different-fonts/main": "enabled", + "primitives/modes/size/medium/different-fonts/main": "enabled", + "primitives/modes/size/global/different-fonts/headings": "enabled", + "primitives/modes/size/medium/different-fonts/headings": "enabled" }, "id": "fb11567729c298ca37c9da4e3a27716a23480824", "$figmaCollectionId": "VariableCollectionId:36248:20757", @@ -25,14 +25,14 @@ "selectedTokenSets": { "primitives/modes/size/small": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/fonts/primary/size/global/designsystemet": "enabled", - "primitives/modes/fonts/primary/size/small/designsystemet": "enabled", - "primitives/modes/fonts/secondary/size/global/designsystemet": "enabled", - "primitives/modes/fonts/secondary/size/small/designsystemet": "enabled", - "primitives/modes/fonts/main/size/global/different-fonts": "enabled", - "primitives/modes/fonts/main/size/small/different-fonts": "enabled", - "primitives/modes/fonts/headings/size/global/different-fonts": "enabled", - "primitives/modes/fonts/headings/size/small/different-fonts": "enabled" + "primitives/modes/size/global/designsystemet/primary": "enabled", + "primitives/modes/size/small/designsystemet/primary": "enabled", + "primitives/modes/size/global/designsystemet/secondary": "enabled", + "primitives/modes/size/small/designsystemet/secondary": "enabled", + "primitives/modes/size/global/different-fonts/main": "enabled", + "primitives/modes/size/small/different-fonts/main": "enabled", + "primitives/modes/size/global/different-fonts/headings": "enabled", + "primitives/modes/size/small/different-fonts/headings": "enabled" }, "id": "8b2c8cc86611a34b135cb22948666779361fd729", "$figmaCollectionId": "VariableCollectionId:36248:20757", @@ -45,14 +45,14 @@ "selectedTokenSets": { "primitives/modes/size/large": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/fonts/primary/size/global/designsystemet": "enabled", - "primitives/modes/fonts/primary/size/large/designsystemet": "enabled", - "primitives/modes/fonts/secondary/size/global/designsystemet": "enabled", - "primitives/modes/fonts/secondary/size/large/designsystemet": "enabled", - "primitives/modes/fonts/main/size/global/different-fonts": "enabled", - "primitives/modes/fonts/main/size/large/different-fonts": "enabled", - "primitives/modes/fonts/headings/size/global/different-fonts": "enabled", - "primitives/modes/fonts/headings/size/large/different-fonts": "enabled" + "primitives/modes/size/global/designsystemet/primary": "enabled", + "primitives/modes/size/large/designsystemet/primary": "enabled", + "primitives/modes/size/global/designsystemet/secondary": "enabled", + "primitives/modes/size/large/designsystemet/secondary": "enabled", + "primitives/modes/size/global/different-fonts/main": "enabled", + "primitives/modes/size/large/different-fonts/main": "enabled", + "primitives/modes/size/global/different-fonts/headings": "enabled", + "primitives/modes/size/large/different-fonts/headings": "enabled" }, "id": "d49b9eebeb48a4f165a74b7261733d0a73370f0e", "$figmaCollectionId": "VariableCollectionId:36248:20757", @@ -65,10 +65,10 @@ "$figmaModeId": "40960:6", "name": "designsystemet", "selectedTokenSets": { - "primitives/fonts/primary/designsystemet": "enabled", - "primitives/fonts/secondary/designsystemet": "enabled", - "primitives/fonts/main/different-fonts": "enabled", - "primitives/fonts/headings/different-fonts": "enabled", + "primitives/fonts/designsystemet/primary": "enabled", + "primitives/fonts/designsystemet/secondary": "enabled", + "primitives/fonts/different-fonts/main": "enabled", + "primitives/fonts/different-fonts/headings": "enabled", "themes/designsystemet": "enabled" }, "group": "Theme" @@ -79,10 +79,10 @@ "$figmaModeId": "40960:7", "name": "different-fonts", "selectedTokenSets": { - "primitives/fonts/primary/designsystemet": "enabled", - "primitives/fonts/secondary/designsystemet": "enabled", - "primitives/fonts/main/different-fonts": "enabled", - "primitives/fonts/headings/different-fonts": "enabled", + "primitives/fonts/designsystemet/primary": "enabled", + "primitives/fonts/designsystemet/secondary": "enabled", + "primitives/fonts/different-fonts/main": "enabled", + "primitives/fonts/different-fonts/headings": "enabled", "themes/different-fonts": "enabled" }, "group": "Theme" diff --git a/design-tokens/primitives/fonts/primary/designsystemet.json b/design-tokens/primitives/fonts/designsystemet/primary.json similarity index 100% rename from design-tokens/primitives/fonts/primary/designsystemet.json rename to design-tokens/primitives/fonts/designsystemet/primary.json diff --git a/design-tokens/primitives/fonts/secondary/designsystemet.json b/design-tokens/primitives/fonts/designsystemet/secondary.json similarity index 100% rename from design-tokens/primitives/fonts/secondary/designsystemet.json rename to design-tokens/primitives/fonts/designsystemet/secondary.json diff --git a/design-tokens/primitives/fonts/headings/different-fonts.json b/design-tokens/primitives/fonts/different-fonts/headings.json similarity index 100% rename from design-tokens/primitives/fonts/headings/different-fonts.json rename to design-tokens/primitives/fonts/different-fonts/headings.json diff --git a/design-tokens/primitives/fonts/main/different-fonts.json b/design-tokens/primitives/fonts/different-fonts/main.json similarity index 100% rename from design-tokens/primitives/fonts/main/different-fonts.json rename to design-tokens/primitives/fonts/different-fonts/main.json diff --git a/design-tokens/primitives/modes/fonts/primary/size/global/designsystemet.json b/design-tokens/primitives/modes/size/global/designsystemet/primary.json similarity index 100% rename from design-tokens/primitives/modes/fonts/primary/size/global/designsystemet.json rename to design-tokens/primitives/modes/size/global/designsystemet/primary.json diff --git a/design-tokens/primitives/modes/fonts/secondary/size/global/designsystemet.json b/design-tokens/primitives/modes/size/global/designsystemet/secondary.json similarity index 100% rename from design-tokens/primitives/modes/fonts/secondary/size/global/designsystemet.json rename to design-tokens/primitives/modes/size/global/designsystemet/secondary.json diff --git a/design-tokens/primitives/modes/fonts/headings/size/global/different-fonts.json b/design-tokens/primitives/modes/size/global/different-fonts/headings.json similarity index 100% rename from design-tokens/primitives/modes/fonts/headings/size/global/different-fonts.json rename to design-tokens/primitives/modes/size/global/different-fonts/headings.json diff --git a/design-tokens/primitives/modes/fonts/main/size/global/different-fonts.json b/design-tokens/primitives/modes/size/global/different-fonts/main.json similarity index 100% rename from design-tokens/primitives/modes/fonts/main/size/global/different-fonts.json rename to design-tokens/primitives/modes/size/global/different-fonts/main.json diff --git a/design-tokens/primitives/modes/fonts/primary/size/large/designsystemet.json b/design-tokens/primitives/modes/size/large/designsystemet/primary.json similarity index 100% rename from design-tokens/primitives/modes/fonts/primary/size/large/designsystemet.json rename to design-tokens/primitives/modes/size/large/designsystemet/primary.json diff --git a/design-tokens/primitives/modes/fonts/secondary/size/large/designsystemet.json b/design-tokens/primitives/modes/size/large/designsystemet/secondary.json similarity index 100% rename from design-tokens/primitives/modes/fonts/secondary/size/large/designsystemet.json rename to design-tokens/primitives/modes/size/large/designsystemet/secondary.json diff --git a/design-tokens/primitives/modes/fonts/headings/size/large/different-fonts.json b/design-tokens/primitives/modes/size/large/different-fonts/headings.json similarity index 100% rename from design-tokens/primitives/modes/fonts/headings/size/large/different-fonts.json rename to design-tokens/primitives/modes/size/large/different-fonts/headings.json diff --git a/design-tokens/primitives/modes/fonts/main/size/large/different-fonts.json b/design-tokens/primitives/modes/size/large/different-fonts/main.json similarity index 100% rename from design-tokens/primitives/modes/fonts/main/size/large/different-fonts.json rename to design-tokens/primitives/modes/size/large/different-fonts/main.json diff --git a/design-tokens/primitives/modes/fonts/primary/size/medium/designsystemet.json b/design-tokens/primitives/modes/size/medium/designsystemet/primary.json similarity index 100% rename from design-tokens/primitives/modes/fonts/primary/size/medium/designsystemet.json rename to design-tokens/primitives/modes/size/medium/designsystemet/primary.json diff --git a/design-tokens/primitives/modes/fonts/secondary/size/medium/designsystemet.json b/design-tokens/primitives/modes/size/medium/designsystemet/secondary.json similarity index 100% rename from design-tokens/primitives/modes/fonts/secondary/size/medium/designsystemet.json rename to design-tokens/primitives/modes/size/medium/designsystemet/secondary.json diff --git a/design-tokens/primitives/modes/fonts/headings/size/medium/different-fonts.json b/design-tokens/primitives/modes/size/medium/different-fonts/headings.json similarity index 100% rename from design-tokens/primitives/modes/fonts/headings/size/medium/different-fonts.json rename to design-tokens/primitives/modes/size/medium/different-fonts/headings.json diff --git a/design-tokens/primitives/modes/fonts/main/size/medium/different-fonts.json b/design-tokens/primitives/modes/size/medium/different-fonts/main.json similarity index 100% rename from design-tokens/primitives/modes/fonts/main/size/medium/different-fonts.json rename to design-tokens/primitives/modes/size/medium/different-fonts/main.json diff --git a/design-tokens/primitives/modes/fonts/primary/size/small/designsystemet.json b/design-tokens/primitives/modes/size/small/designsystemet/primary.json similarity index 100% rename from design-tokens/primitives/modes/fonts/primary/size/small/designsystemet.json rename to design-tokens/primitives/modes/size/small/designsystemet/primary.json diff --git a/design-tokens/primitives/modes/fonts/secondary/size/small/designsystemet.json b/design-tokens/primitives/modes/size/small/designsystemet/secondary.json similarity index 100% rename from design-tokens/primitives/modes/fonts/secondary/size/small/designsystemet.json rename to design-tokens/primitives/modes/size/small/designsystemet/secondary.json diff --git a/design-tokens/primitives/modes/fonts/headings/size/small/different-fonts.json b/design-tokens/primitives/modes/size/small/different-fonts/headings.json similarity index 100% rename from design-tokens/primitives/modes/fonts/headings/size/small/different-fonts.json rename to design-tokens/primitives/modes/size/small/different-fonts/headings.json diff --git a/design-tokens/primitives/modes/fonts/main/size/small/different-fonts.json b/design-tokens/primitives/modes/size/small/different-fonts/main.json similarity index 100% rename from design-tokens/primitives/modes/fonts/main/size/small/different-fonts.json rename to design-tokens/primitives/modes/size/small/different-fonts/main.json diff --git a/packages/cli/src/tokens/create.ts b/packages/cli/src/tokens/create.ts index 83634dac85..7afc099dd3 100644 --- a/packages/cli/src/tokens/create.ts +++ b/packages/cli/src/tokens/create.ts @@ -55,12 +55,12 @@ export const createTokens = async (theme: Theme) => { ...sizeModes.map((size) => `primitives/modes/size/${size}`), ]), ...fontNames.map((font): [string, TokenSet] => [ - `primitives/modes/fonts/${font}/size/global/${name}`, + `primitives/modes/size/global/${name}/${font}`, generateFontSizeGlobal(name, font), ]), ...fontNames.flatMap((font): [string, TokenSet][] => sizeModes.map((size) => [ - `primitives/modes/fonts/${font}/size/${size}/${name}`, + `primitives/modes/size/${size}/${name}/${font}`, generateFontSizeMode(size, name, font, typography.fonts?.[font]?.size), ]), ), @@ -69,7 +69,7 @@ export const createTokens = async (theme: Theme) => { generateColorScheme(name, scheme, colors, overrides), ]), ...fontNames.map((font): [string, TokenSet] => [ - `primitives/fonts/${font}/${name}`, + `primitives/fonts/${name}/${font}`, generateFont(name, font, fontDefinitions[font]), ]), // TODO: Take font-mapping config (heading -> typography.secondary) etc diff --git a/packages/cli/src/tokens/create/generators/$metadata.ts b/packages/cli/src/tokens/create/generators/$metadata.ts index 56ff148478..da604614a5 100644 --- a/packages/cli/src/tokens/create/generators/$metadata.ts +++ b/packages/cli/src/tokens/create/generators/$metadata.ts @@ -15,12 +15,12 @@ export function generate$Metadata( tokenSetOrder: [ 'primitives/globals', ...sizesAndGlobal.map((size) => `primitives/modes/size/${size}`), - ...themes.flatMap((theme) => - fontNamesPerTheme[theme].flatMap((font) => - sizesAndGlobal.map((size) => `primitives/modes/fonts/${font}/size/${size}/${theme}`), + ...sizesAndGlobal.flatMap((size) => + themes.flatMap((theme) => + fontNamesPerTheme[theme].map((font) => `primitives/modes/size/${size}/${theme}/${font}`), ), ), - ...themes.flatMap((theme) => fontNamesPerTheme[theme].map((font) => `primitives/fonts/${font}/${theme}`)), + ...themes.flatMap((theme) => fontNamesPerTheme[theme].map((font) => `primitives/fonts/${theme}/${font}`)), ...colorSchemes.flatMap((scheme) => [ ...themes.map((theme) => `primitives/modes/color-scheme/${scheme}/${theme}`), ]), diff --git a/packages/cli/src/tokens/create/generators/$themes.ts b/packages/cli/src/tokens/create/generators/$themes.ts index 451e2b718a..f370e49ea8 100644 --- a/packages/cli/src/tokens/create/generators/$themes.ts +++ b/packages/cli/src/tokens/create/generators/$themes.ts @@ -71,8 +71,8 @@ function generateSizeGroup(themes: string[], fonts: FontsPerTheme, sizeModes: Si ...Object.fromEntries( themes.flatMap((theme) => fonts[theme].flatMap((font) => [ - [`primitives/modes/fonts/${font}/size/global/${theme}`, TokenSetStatus.ENABLED], - [`primitives/modes/fonts/${font}/size/${size}/${theme}`, TokenSetStatus.ENABLED], + [`primitives/modes/size/global/${theme}/${font}`, TokenSetStatus.ENABLED], + [`primitives/modes/size/${size}/${theme}/${font}`, TokenSetStatus.ENABLED], ]), ), ), @@ -121,7 +121,7 @@ function generateColorSchemesGroup(colorSchemes: ColorSchemes, themes: string[]) async function generateThemesGroup(themes: string[], fonts: FontsPerTheme): Promise { const fontSets = Object.fromEntries( themes.flatMap((theme) => - fonts[theme].map((font) => [`primitives/fonts/${font}/${theme}`, TokenSetStatus.ENABLED]), + fonts[theme].map((font) => [`primitives/fonts/${theme}/${font}`, TokenSetStatus.ENABLED]), ), ); From 68b55bbce62b1a02c69b7949876ea332ac4d2a71 Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Fri, 23 Jan 2026 23:32:16 +0100 Subject: [PATCH 11/14] remove outdated TODO --- packages/cli/src/tokens/create.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/cli/src/tokens/create.ts b/packages/cli/src/tokens/create.ts index 7afc099dd3..4f549e8652 100644 --- a/packages/cli/src/tokens/create.ts +++ b/packages/cli/src/tokens/create.ts @@ -72,7 +72,6 @@ export const createTokens = async (theme: Theme) => { `primitives/fonts/${name}/${font}`, generateFont(name, font, fontDefinitions[font]), ]), - // TODO: Take font-mapping config (heading -> typography.secondary) etc [`themes/${name}`, generateTheme(colors, name, fontNames, borderRadius, typography)], ['semantic/color', semantic.color], // maps out semantic modes, ieg 'semantic/modes/main-color/accent', and 'semantic/modes/support-color/brand1' From a8500c2d327efd042ce36a275b919c5f5c7a9e41 Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Fri, 23 Jan 2026 23:46:37 +0100 Subject: [PATCH 12/14] add font- prefix to font size mode json file --- design-tokens/$metadata.json | 32 ++++++------- design-tokens/$themes.json | 48 +++++++++---------- .../{primary.json => font-primary.json} | 0 .../{secondary.json => font-secondary.json} | 0 .../{headings.json => font-headings.json} | 0 .../{main.json => font-main.json} | 0 .../{primary.json => font-primary.json} | 0 .../{secondary.json => font-secondary.json} | 0 .../{headings.json => font-headings.json} | 0 .../{main.json => font-main.json} | 0 .../{primary.json => font-primary.json} | 0 .../{secondary.json => font-secondary.json} | 0 .../{headings.json => font-headings.json} | 0 .../{main.json => font-main.json} | 0 .../{primary.json => font-primary.json} | 0 .../{secondary.json => font-secondary.json} | 0 .../{headings.json => font-headings.json} | 0 .../{main.json => font-main.json} | 0 packages/cli/src/tokens/create.ts | 4 +- .../src/tokens/create/generators/$metadata.ts | 2 +- .../src/tokens/create/generators/$themes.ts | 4 +- 21 files changed, 45 insertions(+), 45 deletions(-) rename design-tokens/primitives/modes/size/global/designsystemet/{primary.json => font-primary.json} (100%) rename design-tokens/primitives/modes/size/global/designsystemet/{secondary.json => font-secondary.json} (100%) rename design-tokens/primitives/modes/size/global/different-fonts/{headings.json => font-headings.json} (100%) rename design-tokens/primitives/modes/size/global/different-fonts/{main.json => font-main.json} (100%) rename design-tokens/primitives/modes/size/large/designsystemet/{primary.json => font-primary.json} (100%) rename design-tokens/primitives/modes/size/large/designsystemet/{secondary.json => font-secondary.json} (100%) rename design-tokens/primitives/modes/size/large/different-fonts/{headings.json => font-headings.json} (100%) rename design-tokens/primitives/modes/size/large/different-fonts/{main.json => font-main.json} (100%) rename design-tokens/primitives/modes/size/medium/designsystemet/{primary.json => font-primary.json} (100%) rename design-tokens/primitives/modes/size/medium/designsystemet/{secondary.json => font-secondary.json} (100%) rename design-tokens/primitives/modes/size/medium/different-fonts/{headings.json => font-headings.json} (100%) rename design-tokens/primitives/modes/size/medium/different-fonts/{main.json => font-main.json} (100%) rename design-tokens/primitives/modes/size/small/designsystemet/{primary.json => font-primary.json} (100%) rename design-tokens/primitives/modes/size/small/designsystemet/{secondary.json => font-secondary.json} (100%) rename design-tokens/primitives/modes/size/small/different-fonts/{headings.json => font-headings.json} (100%) rename design-tokens/primitives/modes/size/small/different-fonts/{main.json => font-main.json} (100%) diff --git a/design-tokens/$metadata.json b/design-tokens/$metadata.json index 001f05e0c1..7f18cce661 100644 --- a/design-tokens/$metadata.json +++ b/design-tokens/$metadata.json @@ -5,22 +5,22 @@ "primitives/modes/size/small", "primitives/modes/size/medium", "primitives/modes/size/large", - "primitives/modes/size/global/designsystemet/primary", - "primitives/modes/size/global/designsystemet/secondary", - "primitives/modes/size/global/different-fonts/main", - "primitives/modes/size/global/different-fonts/headings", - "primitives/modes/size/small/designsystemet/primary", - "primitives/modes/size/small/designsystemet/secondary", - "primitives/modes/size/small/different-fonts/main", - "primitives/modes/size/small/different-fonts/headings", - "primitives/modes/size/medium/designsystemet/primary", - "primitives/modes/size/medium/designsystemet/secondary", - "primitives/modes/size/medium/different-fonts/main", - "primitives/modes/size/medium/different-fonts/headings", - "primitives/modes/size/large/designsystemet/primary", - "primitives/modes/size/large/designsystemet/secondary", - "primitives/modes/size/large/different-fonts/main", - "primitives/modes/size/large/different-fonts/headings", + "primitives/modes/size/global/designsystemet/font-primary", + "primitives/modes/size/global/designsystemet/font-secondary", + "primitives/modes/size/global/different-fonts/font-main", + "primitives/modes/size/global/different-fonts/font-headings", + "primitives/modes/size/small/designsystemet/font-primary", + "primitives/modes/size/small/designsystemet/font-secondary", + "primitives/modes/size/small/different-fonts/font-main", + "primitives/modes/size/small/different-fonts/font-headings", + "primitives/modes/size/medium/designsystemet/font-primary", + "primitives/modes/size/medium/designsystemet/font-secondary", + "primitives/modes/size/medium/different-fonts/font-main", + "primitives/modes/size/medium/different-fonts/font-headings", + "primitives/modes/size/large/designsystemet/font-primary", + "primitives/modes/size/large/designsystemet/font-secondary", + "primitives/modes/size/large/different-fonts/font-main", + "primitives/modes/size/large/different-fonts/font-headings", "primitives/fonts/designsystemet/primary", "primitives/fonts/designsystemet/secondary", "primitives/fonts/different-fonts/main", diff --git a/design-tokens/$themes.json b/design-tokens/$themes.json index 1c10916b99..65e2b1bb26 100644 --- a/design-tokens/$themes.json +++ b/design-tokens/$themes.json @@ -5,14 +5,14 @@ "selectedTokenSets": { "primitives/modes/size/medium": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/size/global/designsystemet/primary": "enabled", - "primitives/modes/size/medium/designsystemet/primary": "enabled", - "primitives/modes/size/global/designsystemet/secondary": "enabled", - "primitives/modes/size/medium/designsystemet/secondary": "enabled", - "primitives/modes/size/global/different-fonts/main": "enabled", - "primitives/modes/size/medium/different-fonts/main": "enabled", - "primitives/modes/size/global/different-fonts/headings": "enabled", - "primitives/modes/size/medium/different-fonts/headings": "enabled" + "primitives/modes/size/global/designsystemet/font-primary": "enabled", + "primitives/modes/size/medium/designsystemet/font-primary": "enabled", + "primitives/modes/size/global/designsystemet/font-secondary": "enabled", + "primitives/modes/size/medium/designsystemet/font-secondary": "enabled", + "primitives/modes/size/global/different-fonts/font-main": "enabled", + "primitives/modes/size/medium/different-fonts/font-main": "enabled", + "primitives/modes/size/global/different-fonts/font-headings": "enabled", + "primitives/modes/size/medium/different-fonts/font-headings": "enabled" }, "id": "fb11567729c298ca37c9da4e3a27716a23480824", "$figmaCollectionId": "VariableCollectionId:36248:20757", @@ -25,14 +25,14 @@ "selectedTokenSets": { "primitives/modes/size/small": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/size/global/designsystemet/primary": "enabled", - "primitives/modes/size/small/designsystemet/primary": "enabled", - "primitives/modes/size/global/designsystemet/secondary": "enabled", - "primitives/modes/size/small/designsystemet/secondary": "enabled", - "primitives/modes/size/global/different-fonts/main": "enabled", - "primitives/modes/size/small/different-fonts/main": "enabled", - "primitives/modes/size/global/different-fonts/headings": "enabled", - "primitives/modes/size/small/different-fonts/headings": "enabled" + "primitives/modes/size/global/designsystemet/font-primary": "enabled", + "primitives/modes/size/small/designsystemet/font-primary": "enabled", + "primitives/modes/size/global/designsystemet/font-secondary": "enabled", + "primitives/modes/size/small/designsystemet/font-secondary": "enabled", + "primitives/modes/size/global/different-fonts/font-main": "enabled", + "primitives/modes/size/small/different-fonts/font-main": "enabled", + "primitives/modes/size/global/different-fonts/font-headings": "enabled", + "primitives/modes/size/small/different-fonts/font-headings": "enabled" }, "id": "8b2c8cc86611a34b135cb22948666779361fd729", "$figmaCollectionId": "VariableCollectionId:36248:20757", @@ -45,14 +45,14 @@ "selectedTokenSets": { "primitives/modes/size/large": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/size/global/designsystemet/primary": "enabled", - "primitives/modes/size/large/designsystemet/primary": "enabled", - "primitives/modes/size/global/designsystemet/secondary": "enabled", - "primitives/modes/size/large/designsystemet/secondary": "enabled", - "primitives/modes/size/global/different-fonts/main": "enabled", - "primitives/modes/size/large/different-fonts/main": "enabled", - "primitives/modes/size/global/different-fonts/headings": "enabled", - "primitives/modes/size/large/different-fonts/headings": "enabled" + "primitives/modes/size/global/designsystemet/font-primary": "enabled", + "primitives/modes/size/large/designsystemet/font-primary": "enabled", + "primitives/modes/size/global/designsystemet/font-secondary": "enabled", + "primitives/modes/size/large/designsystemet/font-secondary": "enabled", + "primitives/modes/size/global/different-fonts/font-main": "enabled", + "primitives/modes/size/large/different-fonts/font-main": "enabled", + "primitives/modes/size/global/different-fonts/font-headings": "enabled", + "primitives/modes/size/large/different-fonts/font-headings": "enabled" }, "id": "d49b9eebeb48a4f165a74b7261733d0a73370f0e", "$figmaCollectionId": "VariableCollectionId:36248:20757", diff --git a/design-tokens/primitives/modes/size/global/designsystemet/primary.json b/design-tokens/primitives/modes/size/global/designsystemet/font-primary.json similarity index 100% rename from design-tokens/primitives/modes/size/global/designsystemet/primary.json rename to design-tokens/primitives/modes/size/global/designsystemet/font-primary.json diff --git a/design-tokens/primitives/modes/size/global/designsystemet/secondary.json b/design-tokens/primitives/modes/size/global/designsystemet/font-secondary.json similarity index 100% rename from design-tokens/primitives/modes/size/global/designsystemet/secondary.json rename to design-tokens/primitives/modes/size/global/designsystemet/font-secondary.json diff --git a/design-tokens/primitives/modes/size/global/different-fonts/headings.json b/design-tokens/primitives/modes/size/global/different-fonts/font-headings.json similarity index 100% rename from design-tokens/primitives/modes/size/global/different-fonts/headings.json rename to design-tokens/primitives/modes/size/global/different-fonts/font-headings.json diff --git a/design-tokens/primitives/modes/size/global/different-fonts/main.json b/design-tokens/primitives/modes/size/global/different-fonts/font-main.json similarity index 100% rename from design-tokens/primitives/modes/size/global/different-fonts/main.json rename to design-tokens/primitives/modes/size/global/different-fonts/font-main.json diff --git a/design-tokens/primitives/modes/size/large/designsystemet/primary.json b/design-tokens/primitives/modes/size/large/designsystemet/font-primary.json similarity index 100% rename from design-tokens/primitives/modes/size/large/designsystemet/primary.json rename to design-tokens/primitives/modes/size/large/designsystemet/font-primary.json diff --git a/design-tokens/primitives/modes/size/large/designsystemet/secondary.json b/design-tokens/primitives/modes/size/large/designsystemet/font-secondary.json similarity index 100% rename from design-tokens/primitives/modes/size/large/designsystemet/secondary.json rename to design-tokens/primitives/modes/size/large/designsystemet/font-secondary.json diff --git a/design-tokens/primitives/modes/size/large/different-fonts/headings.json b/design-tokens/primitives/modes/size/large/different-fonts/font-headings.json similarity index 100% rename from design-tokens/primitives/modes/size/large/different-fonts/headings.json rename to design-tokens/primitives/modes/size/large/different-fonts/font-headings.json diff --git a/design-tokens/primitives/modes/size/large/different-fonts/main.json b/design-tokens/primitives/modes/size/large/different-fonts/font-main.json similarity index 100% rename from design-tokens/primitives/modes/size/large/different-fonts/main.json rename to design-tokens/primitives/modes/size/large/different-fonts/font-main.json diff --git a/design-tokens/primitives/modes/size/medium/designsystemet/primary.json b/design-tokens/primitives/modes/size/medium/designsystemet/font-primary.json similarity index 100% rename from design-tokens/primitives/modes/size/medium/designsystemet/primary.json rename to design-tokens/primitives/modes/size/medium/designsystemet/font-primary.json diff --git a/design-tokens/primitives/modes/size/medium/designsystemet/secondary.json b/design-tokens/primitives/modes/size/medium/designsystemet/font-secondary.json similarity index 100% rename from design-tokens/primitives/modes/size/medium/designsystemet/secondary.json rename to design-tokens/primitives/modes/size/medium/designsystemet/font-secondary.json diff --git a/design-tokens/primitives/modes/size/medium/different-fonts/headings.json b/design-tokens/primitives/modes/size/medium/different-fonts/font-headings.json similarity index 100% rename from design-tokens/primitives/modes/size/medium/different-fonts/headings.json rename to design-tokens/primitives/modes/size/medium/different-fonts/font-headings.json diff --git a/design-tokens/primitives/modes/size/medium/different-fonts/main.json b/design-tokens/primitives/modes/size/medium/different-fonts/font-main.json similarity index 100% rename from design-tokens/primitives/modes/size/medium/different-fonts/main.json rename to design-tokens/primitives/modes/size/medium/different-fonts/font-main.json diff --git a/design-tokens/primitives/modes/size/small/designsystemet/primary.json b/design-tokens/primitives/modes/size/small/designsystemet/font-primary.json similarity index 100% rename from design-tokens/primitives/modes/size/small/designsystemet/primary.json rename to design-tokens/primitives/modes/size/small/designsystemet/font-primary.json diff --git a/design-tokens/primitives/modes/size/small/designsystemet/secondary.json b/design-tokens/primitives/modes/size/small/designsystemet/font-secondary.json similarity index 100% rename from design-tokens/primitives/modes/size/small/designsystemet/secondary.json rename to design-tokens/primitives/modes/size/small/designsystemet/font-secondary.json diff --git a/design-tokens/primitives/modes/size/small/different-fonts/headings.json b/design-tokens/primitives/modes/size/small/different-fonts/font-headings.json similarity index 100% rename from design-tokens/primitives/modes/size/small/different-fonts/headings.json rename to design-tokens/primitives/modes/size/small/different-fonts/font-headings.json diff --git a/design-tokens/primitives/modes/size/small/different-fonts/main.json b/design-tokens/primitives/modes/size/small/different-fonts/font-main.json similarity index 100% rename from design-tokens/primitives/modes/size/small/different-fonts/main.json rename to design-tokens/primitives/modes/size/small/different-fonts/font-main.json diff --git a/packages/cli/src/tokens/create.ts b/packages/cli/src/tokens/create.ts index 4f549e8652..f30ff06138 100644 --- a/packages/cli/src/tokens/create.ts +++ b/packages/cli/src/tokens/create.ts @@ -55,12 +55,12 @@ export const createTokens = async (theme: Theme) => { ...sizeModes.map((size) => `primitives/modes/size/${size}`), ]), ...fontNames.map((font): [string, TokenSet] => [ - `primitives/modes/size/global/${name}/${font}`, + `primitives/modes/size/global/${name}/font-${font}`, generateFontSizeGlobal(name, font), ]), ...fontNames.flatMap((font): [string, TokenSet][] => sizeModes.map((size) => [ - `primitives/modes/size/${size}/${name}/${font}`, + `primitives/modes/size/${size}/${name}/font-${font}`, generateFontSizeMode(size, name, font, typography.fonts?.[font]?.size), ]), ), diff --git a/packages/cli/src/tokens/create/generators/$metadata.ts b/packages/cli/src/tokens/create/generators/$metadata.ts index da604614a5..8f64d56e51 100644 --- a/packages/cli/src/tokens/create/generators/$metadata.ts +++ b/packages/cli/src/tokens/create/generators/$metadata.ts @@ -17,7 +17,7 @@ export function generate$Metadata( ...sizesAndGlobal.map((size) => `primitives/modes/size/${size}`), ...sizesAndGlobal.flatMap((size) => themes.flatMap((theme) => - fontNamesPerTheme[theme].map((font) => `primitives/modes/size/${size}/${theme}/${font}`), + fontNamesPerTheme[theme].map((font) => `primitives/modes/size/${size}/${theme}/font-${font}`), ), ), ...themes.flatMap((theme) => fontNamesPerTheme[theme].map((font) => `primitives/fonts/${theme}/${font}`)), diff --git a/packages/cli/src/tokens/create/generators/$themes.ts b/packages/cli/src/tokens/create/generators/$themes.ts index f370e49ea8..3560f30598 100644 --- a/packages/cli/src/tokens/create/generators/$themes.ts +++ b/packages/cli/src/tokens/create/generators/$themes.ts @@ -71,8 +71,8 @@ function generateSizeGroup(themes: string[], fonts: FontsPerTheme, sizeModes: Si ...Object.fromEntries( themes.flatMap((theme) => fonts[theme].flatMap((font) => [ - [`primitives/modes/size/global/${theme}/${font}`, TokenSetStatus.ENABLED], - [`primitives/modes/size/${size}/${theme}/${font}`, TokenSetStatus.ENABLED], + [`primitives/modes/size/global/${theme}/font-${font}`, TokenSetStatus.ENABLED], + [`primitives/modes/size/${size}/${theme}/font-${font}`, TokenSetStatus.ENABLED], ]), ), ), From f9c4ddd5cf430583a2a4968d41502ef5dd7ebc0a Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Sat, 24 Jan 2026 00:28:13 +0100 Subject: [PATCH 13/14] remove unnecessary tokens layer that also tripped up Figma backward-compat layer --- design-tokens/themes/designsystemet.json | 526 +++++------------- design-tokens/themes/different-fonts.json | 526 +++++------------- .../cli/src/tokens/create/generators/theme.ts | 306 ++++------ 3 files changed, 392 insertions(+), 966 deletions(-) diff --git a/design-tokens/themes/designsystemet.json b/design-tokens/themes/designsystemet.json index dd85980472..5a31b3bef7 100644 --- a/design-tokens/themes/designsystemet.json +++ b/design-tokens/themes/designsystemet.json @@ -545,370 +545,116 @@ } } }, - "fonts": { - "primary": { - "font-family": { - "$type": "fontFamilies", - "$value": "{designsystemet.fonts.primary.font-family}" - }, - "font-weight": { - "medium": { - "$type": "fontWeights", - "$value": "{designsystemet.fonts.primary.font-weight.medium}" - }, - "semibold": { - "$type": "fontWeights", - "$value": "{designsystemet.fonts.primary.font-weight.semibold}" - }, - "regular": { - "$type": "fontWeights", - "$value": "{designsystemet.fonts.primary.font-weight.regular}" - } - }, - "font-size": { - "1": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.primary.font-size.1}" - }, - "2": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.primary.font-size.2}" - }, - "3": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.primary.font-size.3}" - }, - "4": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.primary.font-size.4}" - }, - "5": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.primary.font-size.5}" - }, - "6": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.primary.font-size.6}" - }, - "7": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.primary.font-size.7}" - }, - "8": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.primary.font-size.8}" - }, - "9": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.primary.font-size.9}" - }, - "10": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.primary.font-size.10}" - }, - "11": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.primary.font-size.11}" - }, - "12": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.primary.font-size.12}" - }, - "13": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.primary.font-size.13}" - } - }, - "line-height": { - "sm": { - "$type": "lineHeights", - "$value": "{designsystemet.fonts.primary.line-height.sm}" - }, - "md": { - "$type": "lineHeights", - "$value": "{designsystemet.fonts.primary.line-height.md}" - }, - "lg": { - "$type": "lineHeights", - "$value": "{designsystemet.fonts.primary.line-height.lg}" - } - }, - "letter-spacing": { - "1": { - "$type": "letterSpacing", - "$value": "{designsystemet.fonts.primary.letter-spacing.1}" - }, - "2": { - "$type": "letterSpacing", - "$value": "{designsystemet.fonts.primary.letter-spacing.2}" - }, - "3": { - "$type": "letterSpacing", - "$value": "{designsystemet.fonts.primary.letter-spacing.3}" - }, - "4": { - "$type": "letterSpacing", - "$value": "{designsystemet.fonts.primary.letter-spacing.4}" - }, - "5": { - "$type": "letterSpacing", - "$value": "{designsystemet.fonts.primary.letter-spacing.5}" - }, - "6": { - "$type": "letterSpacing", - "$value": "{designsystemet.fonts.primary.letter-spacing.6}" - }, - "7": { - "$type": "letterSpacing", - "$value": "{designsystemet.fonts.primary.letter-spacing.7}" - }, - "8": { - "$type": "letterSpacing", - "$value": "{designsystemet.fonts.primary.letter-spacing.8}" - }, - "9": { - "$type": "letterSpacing", - "$value": "{designsystemet.fonts.primary.letter-spacing.9}" - } - } - }, - "secondary": { - "font-family": { - "$type": "fontFamilies", - "$value": "{designsystemet.fonts.secondary.font-family}" - }, - "font-weight": { - "medium": { - "$type": "fontWeights", - "$value": "{designsystemet.fonts.secondary.font-weight.medium}" - }, - "semibold": { - "$type": "fontWeights", - "$value": "{designsystemet.fonts.secondary.font-weight.semibold}" - }, - "regular": { - "$type": "fontWeights", - "$value": "{designsystemet.fonts.secondary.font-weight.regular}" - } - }, - "font-size": { - "1": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.secondary.font-size.1}" - }, - "2": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.secondary.font-size.2}" - }, - "3": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.secondary.font-size.3}" - }, - "4": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.secondary.font-size.4}" - }, - "5": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.secondary.font-size.5}" - }, - "6": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.secondary.font-size.6}" - }, - "7": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.secondary.font-size.7}" - }, - "8": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.secondary.font-size.8}" - }, - "9": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.secondary.font-size.9}" - }, - "10": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.secondary.font-size.10}" - }, - "11": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.secondary.font-size.11}" - }, - "12": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.secondary.font-size.12}" - }, - "13": { - "$type": "fontSizes", - "$value": "{designsystemet.fonts.secondary.font-size.13}" - } - }, - "line-height": { - "sm": { - "$type": "lineHeights", - "$value": "{designsystemet.fonts.secondary.line-height.sm}" - }, - "md": { - "$type": "lineHeights", - "$value": "{designsystemet.fonts.secondary.line-height.md}" - }, - "lg": { - "$type": "lineHeights", - "$value": "{designsystemet.fonts.secondary.line-height.lg}" - } - }, - "letter-spacing": { - "1": { - "$type": "letterSpacing", - "$value": "{designsystemet.fonts.secondary.letter-spacing.1}" - }, - "2": { - "$type": "letterSpacing", - "$value": "{designsystemet.fonts.secondary.letter-spacing.2}" - }, - "3": { - "$type": "letterSpacing", - "$value": "{designsystemet.fonts.secondary.letter-spacing.3}" - }, - "4": { - "$type": "letterSpacing", - "$value": "{designsystemet.fonts.secondary.letter-spacing.4}" - }, - "5": { - "$type": "letterSpacing", - "$value": "{designsystemet.fonts.secondary.letter-spacing.5}" - }, - "6": { - "$type": "letterSpacing", - "$value": "{designsystemet.fonts.secondary.letter-spacing.6}" - }, - "7": { - "$type": "letterSpacing", - "$value": "{designsystemet.fonts.secondary.letter-spacing.7}" - }, - "8": { - "$type": "letterSpacing", - "$value": "{designsystemet.fonts.secondary.letter-spacing.8}" - }, - "9": { - "$type": "letterSpacing", - "$value": "{designsystemet.fonts.secondary.letter-spacing.9}" - } - } - } - }, "line-height": { "sm": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.sm}" + "$value": "{designsystemet.fonts.primary.line-height.sm}" }, "md": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.md}" + "$value": "{designsystemet.fonts.primary.line-height.md}" }, "lg": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.lg}" + "$value": "{designsystemet.fonts.primary.line-height.lg}" } }, "font-family": { "$type": "fontFamilies", - "$value": "{fonts.primary.font-family}" + "$value": "{designsystemet.fonts.primary.font-family}" }, "font-weight": { "medium": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.medium}" + "$value": "{designsystemet.fonts.primary.font-weight.medium}" }, "semibold": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.semibold}" + "$value": "{designsystemet.fonts.primary.font-weight.semibold}" }, "regular": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.regular}" + "$value": "{designsystemet.fonts.primary.font-weight.regular}" } }, "font-size": { "1": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.1}" + "$value": "{designsystemet.fonts.primary.font-size.1}" }, "2": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.2}" + "$value": "{designsystemet.fonts.primary.font-size.2}" }, "3": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.3}" + "$value": "{designsystemet.fonts.primary.font-size.3}" }, "4": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.4}" + "$value": "{designsystemet.fonts.primary.font-size.4}" }, "5": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.5}" + "$value": "{designsystemet.fonts.primary.font-size.5}" }, "6": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.6}" + "$value": "{designsystemet.fonts.primary.font-size.6}" }, "7": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.8}" + "$value": "{designsystemet.fonts.primary.font-size.8}" }, "8": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.9}" + "$value": "{designsystemet.fonts.primary.font-size.9}" }, "9": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.11}" + "$value": "{designsystemet.fonts.primary.font-size.11}" }, "10": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.13}" + "$value": "{designsystemet.fonts.primary.font-size.13}" } }, "letter-spacing": { "1": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.1}" + "$value": "{designsystemet.fonts.primary.letter-spacing.1}" }, "2": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.2}" + "$value": "{designsystemet.fonts.primary.letter-spacing.2}" }, "3": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.3}" + "$value": "{designsystemet.fonts.primary.letter-spacing.3}" }, "4": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.4}" + "$value": "{designsystemet.fonts.primary.letter-spacing.4}" }, "5": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.5}" + "$value": "{designsystemet.fonts.primary.letter-spacing.5}" }, "6": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.6}" + "$value": "{designsystemet.fonts.primary.letter-spacing.6}" }, "7": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.7}" + "$value": "{designsystemet.fonts.primary.letter-spacing.7}" }, "8": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.8}" + "$value": "{designsystemet.fonts.primary.letter-spacing.8}" }, "9": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.9}" + "$value": "{designsystemet.fonts.primary.letter-spacing.9}" } }, "typography-mapping": { @@ -916,155 +662,155 @@ "2xl": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.secondary.font-family}" + "$value": "{designsystemet.fonts.secondary.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.medium}" + "$value": "{designsystemet.fonts.secondary.font-weight.medium}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.sm}" + "$value": "{designsystemet.fonts.secondary.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.13}" + "$value": "{designsystemet.fonts.secondary.font-size.13}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.1}" + "$value": "{designsystemet.fonts.secondary.letter-spacing.1}" } }, "xl": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.secondary.font-family}" + "$value": "{designsystemet.fonts.secondary.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.medium}" + "$value": "{designsystemet.fonts.secondary.font-weight.medium}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.sm}" + "$value": "{designsystemet.fonts.secondary.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.11}" + "$value": "{designsystemet.fonts.secondary.font-size.11}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.1}" + "$value": "{designsystemet.fonts.secondary.letter-spacing.1}" } }, "lg": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.secondary.font-family}" + "$value": "{designsystemet.fonts.secondary.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.medium}" + "$value": "{designsystemet.fonts.secondary.font-weight.medium}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.sm}" + "$value": "{designsystemet.fonts.secondary.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.9}" + "$value": "{designsystemet.fonts.secondary.font-size.9}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.2}" + "$value": "{designsystemet.fonts.secondary.letter-spacing.2}" } }, "md": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.secondary.font-family}" + "$value": "{designsystemet.fonts.secondary.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.medium}" + "$value": "{designsystemet.fonts.secondary.font-weight.medium}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.sm}" + "$value": "{designsystemet.fonts.secondary.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.8}" + "$value": "{designsystemet.fonts.secondary.font-size.8}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.3}" + "$value": "{designsystemet.fonts.secondary.letter-spacing.3}" } }, "sm": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.secondary.font-family}" + "$value": "{designsystemet.fonts.secondary.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.medium}" + "$value": "{designsystemet.fonts.secondary.font-weight.medium}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.sm}" + "$value": "{designsystemet.fonts.secondary.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.6}" + "$value": "{designsystemet.fonts.secondary.font-size.6}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.5}" + "$value": "{designsystemet.fonts.secondary.letter-spacing.5}" } }, "xs": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.secondary.font-family}" + "$value": "{designsystemet.fonts.secondary.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.medium}" + "$value": "{designsystemet.fonts.secondary.font-weight.medium}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.sm}" + "$value": "{designsystemet.fonts.secondary.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.5}" + "$value": "{designsystemet.fonts.secondary.font-size.5}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.6}" + "$value": "{designsystemet.fonts.secondary.letter-spacing.6}" } }, "2xs": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.secondary.font-family}" + "$value": "{designsystemet.fonts.secondary.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.secondary.font-weight.medium}" + "$value": "{designsystemet.fonts.secondary.font-weight.medium}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.secondary.line-height.sm}" + "$value": "{designsystemet.fonts.secondary.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.secondary.font-size.4}" + "$value": "{designsystemet.fonts.secondary.font-size.4}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.secondary.letter-spacing.6}" + "$value": "{designsystemet.fonts.secondary.letter-spacing.6}" } } }, @@ -1072,222 +818,222 @@ "xl": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.primary.font-family}" + "$value": "{designsystemet.fonts.primary.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.regular}" + "$value": "{designsystemet.fonts.primary.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.md}" + "$value": "{designsystemet.fonts.primary.line-height.md}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.6}" + "$value": "{designsystemet.fonts.primary.font-size.6}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.8}" + "$value": "{designsystemet.fonts.primary.letter-spacing.8}" } }, "lg": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.primary.font-family}" + "$value": "{designsystemet.fonts.primary.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.regular}" + "$value": "{designsystemet.fonts.primary.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.md}" + "$value": "{designsystemet.fonts.primary.line-height.md}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.5}" + "$value": "{designsystemet.fonts.primary.font-size.5}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.8}" + "$value": "{designsystemet.fonts.primary.letter-spacing.8}" } }, "md": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.primary.font-family}" + "$value": "{designsystemet.fonts.primary.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.regular}" + "$value": "{designsystemet.fonts.primary.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.md}" + "$value": "{designsystemet.fonts.primary.line-height.md}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.4}" + "$value": "{designsystemet.fonts.primary.font-size.4}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.8}" + "$value": "{designsystemet.fonts.primary.letter-spacing.8}" } }, "sm": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.primary.font-family}" + "$value": "{designsystemet.fonts.primary.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.regular}" + "$value": "{designsystemet.fonts.primary.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.md}" + "$value": "{designsystemet.fonts.primary.line-height.md}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.3}" + "$value": "{designsystemet.fonts.primary.font-size.3}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.7}" + "$value": "{designsystemet.fonts.primary.letter-spacing.7}" } }, "xs": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.primary.font-family}" + "$value": "{designsystemet.fonts.primary.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.regular}" + "$value": "{designsystemet.fonts.primary.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.md}" + "$value": "{designsystemet.fonts.primary.line-height.md}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.2}" + "$value": "{designsystemet.fonts.primary.font-size.2}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.6}" + "$value": "{designsystemet.fonts.primary.letter-spacing.6}" } }, "short": { "xl": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.primary.font-family}" + "$value": "{designsystemet.fonts.primary.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.regular}" + "$value": "{designsystemet.fonts.primary.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.sm}" + "$value": "{designsystemet.fonts.primary.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.6}" + "$value": "{designsystemet.fonts.primary.font-size.6}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.8}" + "$value": "{designsystemet.fonts.primary.letter-spacing.8}" } }, "lg": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.primary.font-family}" + "$value": "{designsystemet.fonts.primary.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.regular}" + "$value": "{designsystemet.fonts.primary.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.sm}" + "$value": "{designsystemet.fonts.primary.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.5}" + "$value": "{designsystemet.fonts.primary.font-size.5}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.8}" + "$value": "{designsystemet.fonts.primary.letter-spacing.8}" } }, "md": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.primary.font-family}" + "$value": "{designsystemet.fonts.primary.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.regular}" + "$value": "{designsystemet.fonts.primary.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.sm}" + "$value": "{designsystemet.fonts.primary.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.4}" + "$value": "{designsystemet.fonts.primary.font-size.4}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.8}" + "$value": "{designsystemet.fonts.primary.letter-spacing.8}" } }, "sm": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.primary.font-family}" + "$value": "{designsystemet.fonts.primary.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.regular}" + "$value": "{designsystemet.fonts.primary.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.sm}" + "$value": "{designsystemet.fonts.primary.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.3}" + "$value": "{designsystemet.fonts.primary.font-size.3}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.7}" + "$value": "{designsystemet.fonts.primary.letter-spacing.7}" } }, "xs": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.primary.font-family}" + "$value": "{designsystemet.fonts.primary.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.regular}" + "$value": "{designsystemet.fonts.primary.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.sm}" + "$value": "{designsystemet.fonts.primary.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.2}" + "$value": "{designsystemet.fonts.primary.font-size.2}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.6}" + "$value": "{designsystemet.fonts.primary.letter-spacing.6}" } } }, @@ -1295,111 +1041,111 @@ "xl": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.primary.font-family}" + "$value": "{designsystemet.fonts.primary.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.regular}" + "$value": "{designsystemet.fonts.primary.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.lg}" + "$value": "{designsystemet.fonts.primary.line-height.lg}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.6}" + "$value": "{designsystemet.fonts.primary.font-size.6}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.8}" + "$value": "{designsystemet.fonts.primary.letter-spacing.8}" } }, "lg": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.primary.font-family}" + "$value": "{designsystemet.fonts.primary.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.regular}" + "$value": "{designsystemet.fonts.primary.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.lg}" + "$value": "{designsystemet.fonts.primary.line-height.lg}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.5}" + "$value": "{designsystemet.fonts.primary.font-size.5}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.8}" + "$value": "{designsystemet.fonts.primary.letter-spacing.8}" } }, "md": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.primary.font-family}" + "$value": "{designsystemet.fonts.primary.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.regular}" + "$value": "{designsystemet.fonts.primary.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.lg}" + "$value": "{designsystemet.fonts.primary.line-height.lg}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.4}" + "$value": "{designsystemet.fonts.primary.font-size.4}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.8}" + "$value": "{designsystemet.fonts.primary.letter-spacing.8}" } }, "sm": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.primary.font-family}" + "$value": "{designsystemet.fonts.primary.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.regular}" + "$value": "{designsystemet.fonts.primary.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.lg}" + "$value": "{designsystemet.fonts.primary.line-height.lg}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.3}" + "$value": "{designsystemet.fonts.primary.font-size.3}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.7}" + "$value": "{designsystemet.fonts.primary.letter-spacing.7}" } }, "xs": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.primary.font-family}" + "$value": "{designsystemet.fonts.primary.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.primary.font-weight.regular}" + "$value": "{designsystemet.fonts.primary.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.primary.line-height.lg}" + "$value": "{designsystemet.fonts.primary.line-height.lg}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.primary.font-size.2}" + "$value": "{designsystemet.fonts.primary.font-size.2}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.primary.letter-spacing.6}" + "$value": "{designsystemet.fonts.primary.letter-spacing.6}" } } } diff --git a/design-tokens/themes/different-fonts.json b/design-tokens/themes/different-fonts.json index 580dfe31f7..18d0b633aa 100644 --- a/design-tokens/themes/different-fonts.json +++ b/design-tokens/themes/different-fonts.json @@ -545,370 +545,116 @@ } } }, - "fonts": { - "main": { - "font-family": { - "$type": "fontFamilies", - "$value": "{different-fonts.fonts.main.font-family}" - }, - "font-weight": { - "medium": { - "$type": "fontWeights", - "$value": "{different-fonts.fonts.main.font-weight.medium}" - }, - "semibold": { - "$type": "fontWeights", - "$value": "{different-fonts.fonts.main.font-weight.semibold}" - }, - "regular": { - "$type": "fontWeights", - "$value": "{different-fonts.fonts.main.font-weight.regular}" - } - }, - "font-size": { - "1": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.main.font-size.1}" - }, - "2": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.main.font-size.2}" - }, - "3": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.main.font-size.3}" - }, - "4": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.main.font-size.4}" - }, - "5": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.main.font-size.5}" - }, - "6": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.main.font-size.6}" - }, - "7": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.main.font-size.7}" - }, - "8": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.main.font-size.8}" - }, - "9": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.main.font-size.9}" - }, - "10": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.main.font-size.10}" - }, - "11": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.main.font-size.11}" - }, - "12": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.main.font-size.12}" - }, - "13": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.main.font-size.13}" - } - }, - "line-height": { - "sm": { - "$type": "lineHeights", - "$value": "{different-fonts.fonts.main.line-height.sm}" - }, - "md": { - "$type": "lineHeights", - "$value": "{different-fonts.fonts.main.line-height.md}" - }, - "lg": { - "$type": "lineHeights", - "$value": "{different-fonts.fonts.main.line-height.lg}" - } - }, - "letter-spacing": { - "1": { - "$type": "letterSpacing", - "$value": "{different-fonts.fonts.main.letter-spacing.1}" - }, - "2": { - "$type": "letterSpacing", - "$value": "{different-fonts.fonts.main.letter-spacing.2}" - }, - "3": { - "$type": "letterSpacing", - "$value": "{different-fonts.fonts.main.letter-spacing.3}" - }, - "4": { - "$type": "letterSpacing", - "$value": "{different-fonts.fonts.main.letter-spacing.4}" - }, - "5": { - "$type": "letterSpacing", - "$value": "{different-fonts.fonts.main.letter-spacing.5}" - }, - "6": { - "$type": "letterSpacing", - "$value": "{different-fonts.fonts.main.letter-spacing.6}" - }, - "7": { - "$type": "letterSpacing", - "$value": "{different-fonts.fonts.main.letter-spacing.7}" - }, - "8": { - "$type": "letterSpacing", - "$value": "{different-fonts.fonts.main.letter-spacing.8}" - }, - "9": { - "$type": "letterSpacing", - "$value": "{different-fonts.fonts.main.letter-spacing.9}" - } - } - }, - "headings": { - "font-family": { - "$type": "fontFamilies", - "$value": "{different-fonts.fonts.headings.font-family}" - }, - "font-weight": { - "medium": { - "$type": "fontWeights", - "$value": "{different-fonts.fonts.headings.font-weight.medium}" - }, - "semibold": { - "$type": "fontWeights", - "$value": "{different-fonts.fonts.headings.font-weight.semibold}" - }, - "regular": { - "$type": "fontWeights", - "$value": "{different-fonts.fonts.headings.font-weight.regular}" - } - }, - "font-size": { - "1": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.headings.font-size.1}" - }, - "2": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.headings.font-size.2}" - }, - "3": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.headings.font-size.3}" - }, - "4": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.headings.font-size.4}" - }, - "5": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.headings.font-size.5}" - }, - "6": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.headings.font-size.6}" - }, - "7": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.headings.font-size.7}" - }, - "8": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.headings.font-size.8}" - }, - "9": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.headings.font-size.9}" - }, - "10": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.headings.font-size.10}" - }, - "11": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.headings.font-size.11}" - }, - "12": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.headings.font-size.12}" - }, - "13": { - "$type": "fontSizes", - "$value": "{different-fonts.fonts.headings.font-size.13}" - } - }, - "line-height": { - "sm": { - "$type": "lineHeights", - "$value": "{different-fonts.fonts.headings.line-height.sm}" - }, - "md": { - "$type": "lineHeights", - "$value": "{different-fonts.fonts.headings.line-height.md}" - }, - "lg": { - "$type": "lineHeights", - "$value": "{different-fonts.fonts.headings.line-height.lg}" - } - }, - "letter-spacing": { - "1": { - "$type": "letterSpacing", - "$value": "{different-fonts.fonts.headings.letter-spacing.1}" - }, - "2": { - "$type": "letterSpacing", - "$value": "{different-fonts.fonts.headings.letter-spacing.2}" - }, - "3": { - "$type": "letterSpacing", - "$value": "{different-fonts.fonts.headings.letter-spacing.3}" - }, - "4": { - "$type": "letterSpacing", - "$value": "{different-fonts.fonts.headings.letter-spacing.4}" - }, - "5": { - "$type": "letterSpacing", - "$value": "{different-fonts.fonts.headings.letter-spacing.5}" - }, - "6": { - "$type": "letterSpacing", - "$value": "{different-fonts.fonts.headings.letter-spacing.6}" - }, - "7": { - "$type": "letterSpacing", - "$value": "{different-fonts.fonts.headings.letter-spacing.7}" - }, - "8": { - "$type": "letterSpacing", - "$value": "{different-fonts.fonts.headings.letter-spacing.8}" - }, - "9": { - "$type": "letterSpacing", - "$value": "{different-fonts.fonts.headings.letter-spacing.9}" - } - } - } - }, "line-height": { "sm": { "$type": "lineHeights", - "$value": "{fonts.main.line-height.sm}" + "$value": "{different-fonts.fonts.main.line-height.sm}" }, "md": { "$type": "lineHeights", - "$value": "{fonts.main.line-height.md}" + "$value": "{different-fonts.fonts.main.line-height.md}" }, "lg": { "$type": "lineHeights", - "$value": "{fonts.main.line-height.lg}" + "$value": "{different-fonts.fonts.main.line-height.lg}" } }, "font-family": { "$type": "fontFamilies", - "$value": "{fonts.main.font-family}" + "$value": "{different-fonts.fonts.main.font-family}" }, "font-weight": { "medium": { "$type": "fontWeights", - "$value": "{fonts.main.font-weight.medium}" + "$value": "{different-fonts.fonts.main.font-weight.medium}" }, "semibold": { "$type": "fontWeights", - "$value": "{fonts.main.font-weight.semibold}" + "$value": "{different-fonts.fonts.main.font-weight.semibold}" }, "regular": { "$type": "fontWeights", - "$value": "{fonts.main.font-weight.regular}" + "$value": "{different-fonts.fonts.main.font-weight.regular}" } }, "font-size": { "1": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.1}" + "$value": "{different-fonts.fonts.main.font-size.1}" }, "2": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.2}" + "$value": "{different-fonts.fonts.main.font-size.2}" }, "3": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.3}" + "$value": "{different-fonts.fonts.main.font-size.3}" }, "4": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.4}" + "$value": "{different-fonts.fonts.main.font-size.4}" }, "5": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.5}" + "$value": "{different-fonts.fonts.main.font-size.5}" }, "6": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.6}" + "$value": "{different-fonts.fonts.main.font-size.6}" }, "7": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.8}" + "$value": "{different-fonts.fonts.main.font-size.8}" }, "8": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.9}" + "$value": "{different-fonts.fonts.main.font-size.9}" }, "9": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.11}" + "$value": "{different-fonts.fonts.main.font-size.11}" }, "10": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.13}" + "$value": "{different-fonts.fonts.main.font-size.13}" } }, "letter-spacing": { "1": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.1}" + "$value": "{different-fonts.fonts.main.letter-spacing.1}" }, "2": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.2}" + "$value": "{different-fonts.fonts.main.letter-spacing.2}" }, "3": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.3}" + "$value": "{different-fonts.fonts.main.letter-spacing.3}" }, "4": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.4}" + "$value": "{different-fonts.fonts.main.letter-spacing.4}" }, "5": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.5}" + "$value": "{different-fonts.fonts.main.letter-spacing.5}" }, "6": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.6}" + "$value": "{different-fonts.fonts.main.letter-spacing.6}" }, "7": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.7}" + "$value": "{different-fonts.fonts.main.letter-spacing.7}" }, "8": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.8}" + "$value": "{different-fonts.fonts.main.letter-spacing.8}" }, "9": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.9}" + "$value": "{different-fonts.fonts.main.letter-spacing.9}" } }, "typography-mapping": { @@ -916,155 +662,155 @@ "2xl": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.headings.font-family}" + "$value": "{different-fonts.fonts.headings.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.headings.font-weight.medium}" + "$value": "{different-fonts.fonts.headings.font-weight.medium}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.headings.line-height.sm}" + "$value": "{different-fonts.fonts.headings.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.headings.font-size.13}" + "$value": "{different-fonts.fonts.headings.font-size.13}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.headings.letter-spacing.1}" + "$value": "{different-fonts.fonts.headings.letter-spacing.1}" } }, "xl": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.headings.font-family}" + "$value": "{different-fonts.fonts.headings.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.headings.font-weight.medium}" + "$value": "{different-fonts.fonts.headings.font-weight.medium}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.headings.line-height.sm}" + "$value": "{different-fonts.fonts.headings.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.headings.font-size.11}" + "$value": "{different-fonts.fonts.headings.font-size.11}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.headings.letter-spacing.1}" + "$value": "{different-fonts.fonts.headings.letter-spacing.1}" } }, "lg": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.headings.font-family}" + "$value": "{different-fonts.fonts.headings.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.headings.font-weight.medium}" + "$value": "{different-fonts.fonts.headings.font-weight.medium}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.headings.line-height.sm}" + "$value": "{different-fonts.fonts.headings.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.headings.font-size.9}" + "$value": "{different-fonts.fonts.headings.font-size.9}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.headings.letter-spacing.2}" + "$value": "{different-fonts.fonts.headings.letter-spacing.2}" } }, "md": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.headings.font-family}" + "$value": "{different-fonts.fonts.headings.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.headings.font-weight.medium}" + "$value": "{different-fonts.fonts.headings.font-weight.medium}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.headings.line-height.sm}" + "$value": "{different-fonts.fonts.headings.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.headings.font-size.8}" + "$value": "{different-fonts.fonts.headings.font-size.8}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.headings.letter-spacing.3}" + "$value": "{different-fonts.fonts.headings.letter-spacing.3}" } }, "sm": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.headings.font-family}" + "$value": "{different-fonts.fonts.headings.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.headings.font-weight.medium}" + "$value": "{different-fonts.fonts.headings.font-weight.medium}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.headings.line-height.sm}" + "$value": "{different-fonts.fonts.headings.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.headings.font-size.6}" + "$value": "{different-fonts.fonts.headings.font-size.6}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.headings.letter-spacing.5}" + "$value": "{different-fonts.fonts.headings.letter-spacing.5}" } }, "xs": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.headings.font-family}" + "$value": "{different-fonts.fonts.headings.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.headings.font-weight.medium}" + "$value": "{different-fonts.fonts.headings.font-weight.medium}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.headings.line-height.sm}" + "$value": "{different-fonts.fonts.headings.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.headings.font-size.5}" + "$value": "{different-fonts.fonts.headings.font-size.5}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.headings.letter-spacing.6}" + "$value": "{different-fonts.fonts.headings.letter-spacing.6}" } }, "2xs": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.headings.font-family}" + "$value": "{different-fonts.fonts.headings.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.headings.font-weight.medium}" + "$value": "{different-fonts.fonts.headings.font-weight.medium}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.headings.line-height.sm}" + "$value": "{different-fonts.fonts.headings.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.headings.font-size.4}" + "$value": "{different-fonts.fonts.headings.font-size.4}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.headings.letter-spacing.6}" + "$value": "{different-fonts.fonts.headings.letter-spacing.6}" } } }, @@ -1072,222 +818,222 @@ "xl": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.main.font-family}" + "$value": "{different-fonts.fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.main.font-weight.regular}" + "$value": "{different-fonts.fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.main.line-height.md}" + "$value": "{different-fonts.fonts.main.line-height.md}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.6}" + "$value": "{different-fonts.fonts.main.font-size.6}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.8}" + "$value": "{different-fonts.fonts.main.letter-spacing.8}" } }, "lg": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.main.font-family}" + "$value": "{different-fonts.fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.main.font-weight.regular}" + "$value": "{different-fonts.fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.main.line-height.md}" + "$value": "{different-fonts.fonts.main.line-height.md}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.5}" + "$value": "{different-fonts.fonts.main.font-size.5}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.8}" + "$value": "{different-fonts.fonts.main.letter-spacing.8}" } }, "md": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.main.font-family}" + "$value": "{different-fonts.fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.main.font-weight.regular}" + "$value": "{different-fonts.fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.main.line-height.md}" + "$value": "{different-fonts.fonts.main.line-height.md}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.4}" + "$value": "{different-fonts.fonts.main.font-size.4}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.8}" + "$value": "{different-fonts.fonts.main.letter-spacing.8}" } }, "sm": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.main.font-family}" + "$value": "{different-fonts.fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.main.font-weight.regular}" + "$value": "{different-fonts.fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.main.line-height.md}" + "$value": "{different-fonts.fonts.main.line-height.md}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.3}" + "$value": "{different-fonts.fonts.main.font-size.3}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.7}" + "$value": "{different-fonts.fonts.main.letter-spacing.7}" } }, "xs": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.main.font-family}" + "$value": "{different-fonts.fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.main.font-weight.regular}" + "$value": "{different-fonts.fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.main.line-height.md}" + "$value": "{different-fonts.fonts.main.line-height.md}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.2}" + "$value": "{different-fonts.fonts.main.font-size.2}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.6}" + "$value": "{different-fonts.fonts.main.letter-spacing.6}" } }, "short": { "xl": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.main.font-family}" + "$value": "{different-fonts.fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.main.font-weight.regular}" + "$value": "{different-fonts.fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.main.line-height.sm}" + "$value": "{different-fonts.fonts.main.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.6}" + "$value": "{different-fonts.fonts.main.font-size.6}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.8}" + "$value": "{different-fonts.fonts.main.letter-spacing.8}" } }, "lg": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.main.font-family}" + "$value": "{different-fonts.fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.main.font-weight.regular}" + "$value": "{different-fonts.fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.main.line-height.sm}" + "$value": "{different-fonts.fonts.main.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.5}" + "$value": "{different-fonts.fonts.main.font-size.5}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.8}" + "$value": "{different-fonts.fonts.main.letter-spacing.8}" } }, "md": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.main.font-family}" + "$value": "{different-fonts.fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.main.font-weight.regular}" + "$value": "{different-fonts.fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.main.line-height.sm}" + "$value": "{different-fonts.fonts.main.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.4}" + "$value": "{different-fonts.fonts.main.font-size.4}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.8}" + "$value": "{different-fonts.fonts.main.letter-spacing.8}" } }, "sm": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.main.font-family}" + "$value": "{different-fonts.fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.main.font-weight.regular}" + "$value": "{different-fonts.fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.main.line-height.sm}" + "$value": "{different-fonts.fonts.main.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.3}" + "$value": "{different-fonts.fonts.main.font-size.3}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.7}" + "$value": "{different-fonts.fonts.main.letter-spacing.7}" } }, "xs": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.main.font-family}" + "$value": "{different-fonts.fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.main.font-weight.regular}" + "$value": "{different-fonts.fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.main.line-height.sm}" + "$value": "{different-fonts.fonts.main.line-height.sm}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.2}" + "$value": "{different-fonts.fonts.main.font-size.2}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.6}" + "$value": "{different-fonts.fonts.main.letter-spacing.6}" } } }, @@ -1295,111 +1041,111 @@ "xl": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.main.font-family}" + "$value": "{different-fonts.fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.main.font-weight.regular}" + "$value": "{different-fonts.fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.main.line-height.lg}" + "$value": "{different-fonts.fonts.main.line-height.lg}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.6}" + "$value": "{different-fonts.fonts.main.font-size.6}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.8}" + "$value": "{different-fonts.fonts.main.letter-spacing.8}" } }, "lg": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.main.font-family}" + "$value": "{different-fonts.fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.main.font-weight.regular}" + "$value": "{different-fonts.fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.main.line-height.lg}" + "$value": "{different-fonts.fonts.main.line-height.lg}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.5}" + "$value": "{different-fonts.fonts.main.font-size.5}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.8}" + "$value": "{different-fonts.fonts.main.letter-spacing.8}" } }, "md": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.main.font-family}" + "$value": "{different-fonts.fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.main.font-weight.regular}" + "$value": "{different-fonts.fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.main.line-height.lg}" + "$value": "{different-fonts.fonts.main.line-height.lg}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.4}" + "$value": "{different-fonts.fonts.main.font-size.4}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.8}" + "$value": "{different-fonts.fonts.main.letter-spacing.8}" } }, "sm": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.main.font-family}" + "$value": "{different-fonts.fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.main.font-weight.regular}" + "$value": "{different-fonts.fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.main.line-height.lg}" + "$value": "{different-fonts.fonts.main.line-height.lg}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.3}" + "$value": "{different-fonts.fonts.main.font-size.3}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.7}" + "$value": "{different-fonts.fonts.main.letter-spacing.7}" } }, "xs": { "font-family": { "$type": "fontFamilies", - "$value": "{fonts.main.font-family}" + "$value": "{different-fonts.fonts.main.font-family}" }, "font-weight": { "$type": "fontWeights", - "$value": "{fonts.main.font-weight.regular}" + "$value": "{different-fonts.fonts.main.font-weight.regular}" }, "line-height": { "$type": "lineHeights", - "$value": "{fonts.main.line-height.lg}" + "$value": "{different-fonts.fonts.main.line-height.lg}" }, "font-size": { "$type": "fontSizes", - "$value": "{fonts.main.font-size.2}" + "$value": "{different-fonts.fonts.main.font-size.2}" }, "letter-spacing": { "$type": "letterSpacing", - "$value": "{fonts.main.letter-spacing.6}" + "$value": "{different-fonts.fonts.main.letter-spacing.6}" } } } diff --git a/packages/cli/src/tokens/create/generators/theme.ts b/packages/cli/src/tokens/create/generators/theme.ts index 9981432a98..2104dfc87f 100644 --- a/packages/cli/src/tokens/create/generators/theme.ts +++ b/packages/cli/src/tokens/create/generators/theme.ts @@ -4,72 +4,7 @@ import themeBase from '../../template/design-tokens/themes/theme.base.template.j import themeColorTemplate from '../../template/design-tokens/themes/theme.template.json' with { type: 'json' }; import type { Colors, TokenSet, Typography } from '../../types.js'; -const countFromToInclusive = (fromInclusive: number, toInclusive: number) => R.range(fromInclusive, toInclusive + 1); - -function generateFonts(theme: string, fonts: string[]): TokenSet { - const fontSizes = countFromToInclusive(1, 13); - const letterSpacings = countFromToInclusive(1, 9); - return Object.fromEntries( - fonts.map((font) => [ - font, - { - 'font-family': { - $type: 'fontFamilies', - $value: `{${theme}.fonts.${font}.font-family}`, - }, - 'font-weight': { - medium: { - $type: 'fontWeights', - $value: `{${theme}.fonts.${font}.font-weight.medium}`, - }, - semibold: { - $type: 'fontWeights', - $value: `{${theme}.fonts.${font}.font-weight.semibold}`, - }, - regular: { - $type: 'fontWeights', - $value: `{${theme}.fonts.${font}.font-weight.regular}`, - }, - }, - 'font-size': Object.fromEntries( - fontSizes.map((number) => [ - number, - { - $type: 'fontSizes', - $value: `{${theme}.fonts.${font}.font-size.${number}}`, - }, - ]), - ), - - 'line-height': { - sm: { - $type: 'lineHeights', - $value: `{${theme}.fonts.${font}.line-height.sm}`, - }, - md: { - $type: 'lineHeights', - $value: `{${theme}.fonts.${font}.line-height.md}`, - }, - lg: { - $type: 'lineHeights', - $value: `{${theme}.fonts.${font}.line-height.lg}`, - }, - }, - 'letter-spacing': Object.fromEntries( - letterSpacings.map((number) => [ - number, - { - $type: 'letterSpacing', - $value: `{${theme}.fonts.${font}.letter-spacing.${number}}`, - }, - ]), - ), - }, - ]), - ); -} - -function generateBackwardCompatibilityFontTokens(defaultFont: string) { +function generateBackwardCompatibilityFontTokens(themeName: string, defaultFont: string) { const lineHeights = ['sm', 'md', 'lg']; const fontWeights = ['medium', 'semibold', 'regular']; const fontSizes = { @@ -94,14 +29,14 @@ function generateBackwardCompatibilityFontTokens(defaultFont: string) { lineHeight, { $type: 'lineHeights', - $value: `{fonts.${defaultFont}.line-height.${lineHeight}}`, + $value: `{${themeName}.fonts.${defaultFont}.line-height.${lineHeight}}`, }, ] as const, ), ), 'font-family': { $type: 'fontFamilies', - $value: `{fonts.${defaultFont}.font-family}`, + $value: `{${themeName}.fonts.${defaultFont}.font-family}`, }, 'font-weight': Object.fromEntries( fontWeights.map( @@ -110,7 +45,7 @@ function generateBackwardCompatibilityFontTokens(defaultFont: string) { weight, { $type: 'fontWeights', - $value: `{fonts.${defaultFont}.font-weight.${weight}}`, + $value: `{${themeName}.fonts.${defaultFont}.font-weight.${weight}}`, }, ] as const, ), @@ -122,7 +57,7 @@ function generateBackwardCompatibilityFontTokens(defaultFont: string) { oldSize, { $type: 'fontSizes', - $value: `{fonts.${defaultFont}.font-size.${newSize}}`, + $value: `{${themeName}.fonts.${defaultFont}.font-size.${newSize}}`, }, ] as const, ), @@ -134,7 +69,7 @@ function generateBackwardCompatibilityFontTokens(defaultFont: string) { letterSpacing, { $type: 'letterSpacing', - $value: `{fonts.${defaultFont}.letter-spacing.${letterSpacing}}`, + $value: `{${themeName}.fonts.${defaultFont}.letter-spacing.${letterSpacing}}`, }, ] as const, ), @@ -145,7 +80,7 @@ function generateBackwardCompatibilityFontTokens(defaultFont: string) { export const generateTheme = ( colors: Colors, themeName: string, - fontNames: string[], + _fontNames: string[], borderRadius: number, typography: Typography, ) => { @@ -187,12 +122,11 @@ export const generateTheme = ( }, }, }, - fonts: generateFonts(themeName, fontNames), // Generate a backward-compatibility layer for the old "font-size", "line-height" etc tokens - ...generateBackwardCompatibilityFontTokens(defaultFont), + ...generateBackwardCompatibilityFontTokens(themeName, defaultFont), // The mapping from typography to fonts can't be in the typography tokens themself due // to how Figma generates typography styles. Therefore we have this extra layer. - 'typography-mapping': generateThemeTypography(typography), + 'typography-mapping': generateThemeTypography(themeName, typography), ...remainingThemeFile, }; @@ -215,7 +149,7 @@ export const generateTheme = ( return token; }; -function generateThemeTypography(typography: Typography) { +function generateThemeTypography(themeName: string, typography: Typography) { // TODO handle fallback font somewhere else? const defaultFont = Object.keys(typography.fonts ?? []).at(0) ?? 'primary'; const headingFont = typography.components?.heading?.font ?? defaultFont; @@ -225,155 +159,155 @@ function generateThemeTypography(typography: Typography) { '2xl': { 'font-family': { $type: 'fontFamilies', - $value: `{fonts.${headingFont}.font-family}`, + $value: `{${themeName}.fonts.${headingFont}.font-family}`, }, 'font-weight': { $type: 'fontWeights', - $value: `{fonts.${headingFont}.font-weight.medium}`, + $value: `{${themeName}.fonts.${headingFont}.font-weight.medium}`, }, 'line-height': { $type: 'lineHeights', - $value: `{fonts.${headingFont}.line-height.sm}`, + $value: `{${themeName}.fonts.${headingFont}.line-height.sm}`, }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${headingFont}.font-size.13}`, + $value: `{${themeName}.fonts.${headingFont}.font-size.13}`, }, 'letter-spacing': { $type: 'letterSpacing', - $value: `{fonts.${headingFont}.letter-spacing.1}`, + $value: `{${themeName}.fonts.${headingFont}.letter-spacing.1}`, }, }, xl: { 'font-family': { $type: 'fontFamilies', - $value: `{fonts.${headingFont}.font-family}`, + $value: `{${themeName}.fonts.${headingFont}.font-family}`, }, 'font-weight': { $type: 'fontWeights', - $value: `{fonts.${headingFont}.font-weight.medium}`, + $value: `{${themeName}.fonts.${headingFont}.font-weight.medium}`, }, 'line-height': { $type: 'lineHeights', - $value: `{fonts.${headingFont}.line-height.sm}`, + $value: `{${themeName}.fonts.${headingFont}.line-height.sm}`, }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${headingFont}.font-size.11}`, + $value: `{${themeName}.fonts.${headingFont}.font-size.11}`, }, 'letter-spacing': { $type: 'letterSpacing', - $value: `{fonts.${headingFont}.letter-spacing.1}`, + $value: `{${themeName}.fonts.${headingFont}.letter-spacing.1}`, }, }, lg: { 'font-family': { $type: 'fontFamilies', - $value: `{fonts.${headingFont}.font-family}`, + $value: `{${themeName}.fonts.${headingFont}.font-family}`, }, 'font-weight': { $type: 'fontWeights', - $value: `{fonts.${headingFont}.font-weight.medium}`, + $value: `{${themeName}.fonts.${headingFont}.font-weight.medium}`, }, 'line-height': { $type: 'lineHeights', - $value: `{fonts.${headingFont}.line-height.sm}`, + $value: `{${themeName}.fonts.${headingFont}.line-height.sm}`, }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${headingFont}.font-size.9}`, + $value: `{${themeName}.fonts.${headingFont}.font-size.9}`, }, 'letter-spacing': { $type: 'letterSpacing', - $value: `{fonts.${headingFont}.letter-spacing.2}`, + $value: `{${themeName}.fonts.${headingFont}.letter-spacing.2}`, }, }, md: { 'font-family': { $type: 'fontFamilies', - $value: `{fonts.${headingFont}.font-family}`, + $value: `{${themeName}.fonts.${headingFont}.font-family}`, }, 'font-weight': { $type: 'fontWeights', - $value: `{fonts.${headingFont}.font-weight.medium}`, + $value: `{${themeName}.fonts.${headingFont}.font-weight.medium}`, }, 'line-height': { $type: 'lineHeights', - $value: `{fonts.${headingFont}.line-height.sm}`, + $value: `{${themeName}.fonts.${headingFont}.line-height.sm}`, }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${headingFont}.font-size.8}`, + $value: `{${themeName}.fonts.${headingFont}.font-size.8}`, }, 'letter-spacing': { $type: 'letterSpacing', - $value: `{fonts.${headingFont}.letter-spacing.3}`, + $value: `{${themeName}.fonts.${headingFont}.letter-spacing.3}`, }, }, sm: { 'font-family': { $type: 'fontFamilies', - $value: `{fonts.${headingFont}.font-family}`, + $value: `{${themeName}.fonts.${headingFont}.font-family}`, }, 'font-weight': { $type: 'fontWeights', - $value: `{fonts.${headingFont}.font-weight.medium}`, + $value: `{${themeName}.fonts.${headingFont}.font-weight.medium}`, }, 'line-height': { $type: 'lineHeights', - $value: `{fonts.${headingFont}.line-height.sm}`, + $value: `{${themeName}.fonts.${headingFont}.line-height.sm}`, }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${headingFont}.font-size.6}`, + $value: `{${themeName}.fonts.${headingFont}.font-size.6}`, }, 'letter-spacing': { $type: 'letterSpacing', - $value: `{fonts.${headingFont}.letter-spacing.5}`, + $value: `{${themeName}.fonts.${headingFont}.letter-spacing.5}`, }, }, xs: { 'font-family': { $type: 'fontFamilies', - $value: `{fonts.${headingFont}.font-family}`, + $value: `{${themeName}.fonts.${headingFont}.font-family}`, }, 'font-weight': { $type: 'fontWeights', - $value: `{fonts.${headingFont}.font-weight.medium}`, + $value: `{${themeName}.fonts.${headingFont}.font-weight.medium}`, }, 'line-height': { $type: 'lineHeights', - $value: `{fonts.${headingFont}.line-height.sm}`, + $value: `{${themeName}.fonts.${headingFont}.line-height.sm}`, }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${headingFont}.font-size.5}`, + $value: `{${themeName}.fonts.${headingFont}.font-size.5}`, }, 'letter-spacing': { $type: 'letterSpacing', - $value: `{fonts.${headingFont}.letter-spacing.6}`, + $value: `{${themeName}.fonts.${headingFont}.letter-spacing.6}`, }, }, '2xs': { 'font-family': { $type: 'fontFamilies', - $value: `{fonts.${headingFont}.font-family}`, + $value: `{${themeName}.fonts.${headingFont}.font-family}`, }, 'font-weight': { $type: 'fontWeights', - $value: `{fonts.${headingFont}.font-weight.medium}`, + $value: `{${themeName}.fonts.${headingFont}.font-weight.medium}`, }, 'line-height': { $type: 'lineHeights', - $value: `{fonts.${headingFont}.line-height.sm}`, + $value: `{${themeName}.fonts.${headingFont}.line-height.sm}`, }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${headingFont}.font-size.4}`, + $value: `{${themeName}.fonts.${headingFont}.font-size.4}`, }, 'letter-spacing': { $type: 'letterSpacing', - $value: `{fonts.${headingFont}.letter-spacing.6}`, + $value: `{${themeName}.fonts.${headingFont}.letter-spacing.6}`, }, }, }, @@ -381,222 +315,222 @@ function generateThemeTypography(typography: Typography) { xl: { 'font-family': { $type: 'fontFamilies', - $value: `{fonts.${bodyFont}.font-family}`, + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, }, 'font-weight': { $type: 'fontWeights', - $value: `{fonts.${bodyFont}.font-weight.regular}`, + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, }, 'line-height': { $type: 'lineHeights', - $value: `{fonts.${bodyFont}.line-height.md}`, + $value: `{${themeName}.fonts.${bodyFont}.line-height.md}`, }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${bodyFont}.font-size.6}`, + $value: `{${themeName}.fonts.${bodyFont}.font-size.6}`, }, 'letter-spacing': { $type: 'letterSpacing', - $value: `{fonts.${bodyFont}.letter-spacing.8}`, + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.8}`, }, }, lg: { 'font-family': { $type: 'fontFamilies', - $value: `{fonts.${bodyFont}.font-family}`, + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, }, 'font-weight': { $type: 'fontWeights', - $value: `{fonts.${bodyFont}.font-weight.regular}`, + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, }, 'line-height': { $type: 'lineHeights', - $value: `{fonts.${bodyFont}.line-height.md}`, + $value: `{${themeName}.fonts.${bodyFont}.line-height.md}`, }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${bodyFont}.font-size.5}`, + $value: `{${themeName}.fonts.${bodyFont}.font-size.5}`, }, 'letter-spacing': { $type: 'letterSpacing', - $value: `{fonts.${bodyFont}.letter-spacing.8}`, + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.8}`, }, }, md: { 'font-family': { $type: 'fontFamilies', - $value: `{fonts.${bodyFont}.font-family}`, + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, }, 'font-weight': { $type: 'fontWeights', - $value: `{fonts.${bodyFont}.font-weight.regular}`, + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, }, 'line-height': { $type: 'lineHeights', - $value: `{fonts.${bodyFont}.line-height.md}`, + $value: `{${themeName}.fonts.${bodyFont}.line-height.md}`, }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${bodyFont}.font-size.4}`, + $value: `{${themeName}.fonts.${bodyFont}.font-size.4}`, }, 'letter-spacing': { $type: 'letterSpacing', - $value: `{fonts.${bodyFont}.letter-spacing.8}`, + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.8}`, }, }, sm: { 'font-family': { $type: 'fontFamilies', - $value: `{fonts.${bodyFont}.font-family}`, + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, }, 'font-weight': { $type: 'fontWeights', - $value: `{fonts.${bodyFont}.font-weight.regular}`, + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, }, 'line-height': { $type: 'lineHeights', - $value: `{fonts.${bodyFont}.line-height.md}`, + $value: `{${themeName}.fonts.${bodyFont}.line-height.md}`, }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${bodyFont}.font-size.3}`, + $value: `{${themeName}.fonts.${bodyFont}.font-size.3}`, }, 'letter-spacing': { $type: 'letterSpacing', - $value: `{fonts.${bodyFont}.letter-spacing.7}`, + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.7}`, }, }, xs: { 'font-family': { $type: 'fontFamilies', - $value: `{fonts.${bodyFont}.font-family}`, + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, }, 'font-weight': { $type: 'fontWeights', - $value: `{fonts.${bodyFont}.font-weight.regular}`, + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, }, 'line-height': { $type: 'lineHeights', - $value: `{fonts.${bodyFont}.line-height.md}`, + $value: `{${themeName}.fonts.${bodyFont}.line-height.md}`, }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${bodyFont}.font-size.2}`, + $value: `{${themeName}.fonts.${bodyFont}.font-size.2}`, }, 'letter-spacing': { $type: 'letterSpacing', - $value: `{fonts.${bodyFont}.letter-spacing.6}`, + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.6}`, }, }, short: { xl: { 'font-family': { $type: 'fontFamilies', - $value: `{fonts.${bodyFont}.font-family}`, + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, }, 'font-weight': { $type: 'fontWeights', - $value: `{fonts.${bodyFont}.font-weight.regular}`, + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, }, 'line-height': { $type: 'lineHeights', - $value: `{fonts.${bodyFont}.line-height.sm}`, + $value: `{${themeName}.fonts.${bodyFont}.line-height.sm}`, }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${bodyFont}.font-size.6}`, + $value: `{${themeName}.fonts.${bodyFont}.font-size.6}`, }, 'letter-spacing': { $type: 'letterSpacing', - $value: `{fonts.${bodyFont}.letter-spacing.8}`, + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.8}`, }, }, lg: { 'font-family': { $type: 'fontFamilies', - $value: `{fonts.${bodyFont}.font-family}`, + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, }, 'font-weight': { $type: 'fontWeights', - $value: `{fonts.${bodyFont}.font-weight.regular}`, + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, }, 'line-height': { $type: 'lineHeights', - $value: `{fonts.${bodyFont}.line-height.sm}`, + $value: `{${themeName}.fonts.${bodyFont}.line-height.sm}`, }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${bodyFont}.font-size.5}`, + $value: `{${themeName}.fonts.${bodyFont}.font-size.5}`, }, 'letter-spacing': { $type: 'letterSpacing', - $value: `{fonts.${bodyFont}.letter-spacing.8}`, + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.8}`, }, }, md: { 'font-family': { $type: 'fontFamilies', - $value: `{fonts.${bodyFont}.font-family}`, + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, }, 'font-weight': { $type: 'fontWeights', - $value: `{fonts.${bodyFont}.font-weight.regular}`, + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, }, 'line-height': { $type: 'lineHeights', - $value: `{fonts.${bodyFont}.line-height.sm}`, + $value: `{${themeName}.fonts.${bodyFont}.line-height.sm}`, }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${bodyFont}.font-size.4}`, + $value: `{${themeName}.fonts.${bodyFont}.font-size.4}`, }, 'letter-spacing': { $type: 'letterSpacing', - $value: `{fonts.${bodyFont}.letter-spacing.8}`, + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.8}`, }, }, sm: { 'font-family': { $type: 'fontFamilies', - $value: `{fonts.${bodyFont}.font-family}`, + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, }, 'font-weight': { $type: 'fontWeights', - $value: `{fonts.${bodyFont}.font-weight.regular}`, + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, }, 'line-height': { $type: 'lineHeights', - $value: `{fonts.${bodyFont}.line-height.sm}`, + $value: `{${themeName}.fonts.${bodyFont}.line-height.sm}`, }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${bodyFont}.font-size.3}`, + $value: `{${themeName}.fonts.${bodyFont}.font-size.3}`, }, 'letter-spacing': { $type: 'letterSpacing', - $value: `{fonts.${bodyFont}.letter-spacing.7}`, + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.7}`, }, }, xs: { 'font-family': { $type: 'fontFamilies', - $value: `{fonts.${bodyFont}.font-family}`, + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, }, 'font-weight': { $type: 'fontWeights', - $value: `{fonts.${bodyFont}.font-weight.regular}`, + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, }, 'line-height': { $type: 'lineHeights', - $value: `{fonts.${bodyFont}.line-height.sm}`, + $value: `{${themeName}.fonts.${bodyFont}.line-height.sm}`, }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${bodyFont}.font-size.2}`, + $value: `{${themeName}.fonts.${bodyFont}.font-size.2}`, }, 'letter-spacing': { $type: 'letterSpacing', - $value: `{fonts.${bodyFont}.letter-spacing.6}`, + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.6}`, }, }, }, @@ -604,111 +538,111 @@ function generateThemeTypography(typography: Typography) { xl: { 'font-family': { $type: 'fontFamilies', - $value: `{fonts.${bodyFont}.font-family}`, + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, }, 'font-weight': { $type: 'fontWeights', - $value: `{fonts.${bodyFont}.font-weight.regular}`, + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, }, 'line-height': { $type: 'lineHeights', - $value: `{fonts.${bodyFont}.line-height.lg}`, + $value: `{${themeName}.fonts.${bodyFont}.line-height.lg}`, }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${bodyFont}.font-size.6}`, + $value: `{${themeName}.fonts.${bodyFont}.font-size.6}`, }, 'letter-spacing': { $type: 'letterSpacing', - $value: `{fonts.${bodyFont}.letter-spacing.8}`, + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.8}`, }, }, lg: { 'font-family': { $type: 'fontFamilies', - $value: `{fonts.${bodyFont}.font-family}`, + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, }, 'font-weight': { $type: 'fontWeights', - $value: `{fonts.${bodyFont}.font-weight.regular}`, + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, }, 'line-height': { $type: 'lineHeights', - $value: `{fonts.${bodyFont}.line-height.lg}`, + $value: `{${themeName}.fonts.${bodyFont}.line-height.lg}`, }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${bodyFont}.font-size.5}`, + $value: `{${themeName}.fonts.${bodyFont}.font-size.5}`, }, 'letter-spacing': { $type: 'letterSpacing', - $value: `{fonts.${bodyFont}.letter-spacing.8}`, + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.8}`, }, }, md: { 'font-family': { $type: 'fontFamilies', - $value: `{fonts.${bodyFont}.font-family}`, + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, }, 'font-weight': { $type: 'fontWeights', - $value: `{fonts.${bodyFont}.font-weight.regular}`, + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, }, 'line-height': { $type: 'lineHeights', - $value: `{fonts.${bodyFont}.line-height.lg}`, + $value: `{${themeName}.fonts.${bodyFont}.line-height.lg}`, }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${bodyFont}.font-size.4}`, + $value: `{${themeName}.fonts.${bodyFont}.font-size.4}`, }, 'letter-spacing': { $type: 'letterSpacing', - $value: `{fonts.${bodyFont}.letter-spacing.8}`, + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.8}`, }, }, sm: { 'font-family': { $type: 'fontFamilies', - $value: `{fonts.${bodyFont}.font-family}`, + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, }, 'font-weight': { $type: 'fontWeights', - $value: `{fonts.${bodyFont}.font-weight.regular}`, + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, }, 'line-height': { $type: 'lineHeights', - $value: `{fonts.${bodyFont}.line-height.lg}`, + $value: `{${themeName}.fonts.${bodyFont}.line-height.lg}`, }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${bodyFont}.font-size.3}`, + $value: `{${themeName}.fonts.${bodyFont}.font-size.3}`, }, 'letter-spacing': { $type: 'letterSpacing', - $value: `{fonts.${bodyFont}.letter-spacing.7}`, + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.7}`, }, }, xs: { 'font-family': { $type: 'fontFamilies', - $value: `{fonts.${bodyFont}.font-family}`, + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, }, 'font-weight': { $type: 'fontWeights', - $value: `{fonts.${bodyFont}.font-weight.regular}`, + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, }, 'line-height': { $type: 'lineHeights', - $value: `{fonts.${bodyFont}.line-height.lg}`, + $value: `{${themeName}.fonts.${bodyFont}.line-height.lg}`, }, 'font-size': { $type: 'fontSizes', - $value: `{fonts.${bodyFont}.font-size.2}`, + $value: `{${themeName}.fonts.${bodyFont}.font-size.2}`, }, 'letter-spacing': { $type: 'letterSpacing', - $value: `{fonts.${bodyFont}.letter-spacing.6}`, + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.6}`, }, }, }, From 15f4b1d1cfb53f45cc3fe0408c9a97bba89bd18b Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Mon, 26 Jan 2026 10:40:16 +0100 Subject: [PATCH 14/14] update config schema to 13 font-size steps --- 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 7325a4b07a..499e10a912 100644 --- a/packages/cli/src/config.ts +++ b/packages/cli/src/config.ts @@ -161,7 +161,7 @@ const focusOverrideSchema = z }) .describe('Overrides for the focus colors'); -const fontSizeSteps = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'] as const; +const fontSizeSteps = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13'] as const; const fontSizeStepOverrideSchema = z .number() .describe('Number in pixels to use as a font size for this step in the scale');