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..052e222259 100644 --- a/apps/www/app/_components/tokens/design-tokens/size-mode.json +++ b/apps/www/app/_components/tokens/design-tokens/size-mode.json @@ -7,6 +7,22 @@ ], "variable": "--ds-size-mode-font-size", "value": "1.125" + }, + { + "path": [ + "font-scale", + "_base" + ], + "variable": "--ds-font-scale-base", + "value": "1.125" + }, + { + "path": [ + "font-scale", + "_ratio" + ], + "variable": "--ds-font-scale-ratio", + "value": "1.143136" } ], "large": [ @@ -17,6 +33,22 @@ ], "variable": "--ds-size-mode-font-size", "value": "1.3125" + }, + { + "path": [ + "font-scale", + "_base" + ], + "variable": "--ds-font-scale-base", + "value": "1.3125" + }, + { + "path": [ + "font-scale", + "_ratio" + ], + "variable": "--ds-font-scale-ratio", + "value": "1.143136" } ], "small": [ @@ -27,6 +59,22 @@ ], "variable": "--ds-size-mode-font-size", "value": "1" + }, + { + "path": [ + "font-scale", + "_base" + ], + "variable": "--ds-font-scale-base", + "value": "1" + }, + { + "path": [ + "font-scale", + "_ratio" + ], + "variable": "--ds-font-scale-ratio", + "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 59908f6503..9b1f58fed9 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), 4)), 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,31 @@ "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": [ + "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": [ diff --git a/design-tokens/$metadata.json b/design-tokens/$metadata.json index bf44b82167..7f18cce661 100644 --- a/design-tokens/$metadata.json +++ b/design-tokens/$metadata.json @@ -1,18 +1,36 @@ { "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/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/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", + "primitives/fonts/different-fonts/headings", "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 23aeb20ba4..65e2b1bb26 100644 --- a/design-tokens/$themes.json +++ b/design-tokens/$themes.json @@ -1,42 +1,63 @@ [ { - "id": "8b2c8cc86611a34b135cb22948666779361fd729", "name": "medium", - "$figmaStyleReferences": {}, + "group": "Size", "selectedTokenSets": { "primitives/modes/size/medium": "source", "primitives/modes/size/global": "enabled", - "primitives/modes/typography/size/medium": "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", "$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/large": "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", - "$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/small": "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", - "$figmaModeId": "41630:3", - "group": "Size" + "$figmaModeId": "41630:2", + "$figmaStyleReferences": {} }, { "id": "6e7211ed13edfcf516a49254b01d234434716dee", @@ -44,50 +65,50 @@ "$figmaModeId": "40960:6", "name": "designsystemet", "selectedTokenSets": { + "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" }, { - "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/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": "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/designsystemet/primary.json b/design-tokens/primitives/fonts/designsystemet/primary.json new file mode 100644 index 0000000000..f51319be2d --- /dev/null +++ b/design-tokens/primitives/fonts/designsystemet/primary.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/designsystemet/secondary.json b/design-tokens/primitives/fonts/designsystemet/secondary.json new file mode 100644 index 0000000000..568ea872fa --- /dev/null +++ b/design-tokens/primitives/fonts/designsystemet/secondary.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/different-fonts/headings.json b/design-tokens/primitives/fonts/different-fonts/headings.json new file mode 100644 index 0000000000..24730b50e9 --- /dev/null +++ b/design-tokens/primitives/fonts/different-fonts/headings.json @@ -0,0 +1,78 @@ +{ + "different-fonts": { + "fonts": { + "headings": { + "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/different-fonts/main.json b/design-tokens/primitives/fonts/different-fonts/main.json new file mode 100644 index 0000000000..93e12e99bb --- /dev/null +++ b/design-tokens/primitives/fonts/different-fonts/main.json @@ -0,0 +1,78 @@ +{ + "different-fonts": { + "fonts": { + "main": { + "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/size/global/designsystemet/font-primary.json b/design-tokens/primitives/modes/size/global/designsystemet/font-primary.json new file mode 100644 index 0000000000..48d2c957c0 --- /dev/null +++ b/design-tokens/primitives/modes/size/global/designsystemet/font-primary.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}, 3), 0)" + }, + "8": { + "$type": "fontSizes", + "$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}, 5), 0)" + }, + "10": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 6), 0)" + }, + "11": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 7), 0)" + }, + "12": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 8), 0)" + }, + "13": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.primary.font-scale._base} * pow({designsystemet.fonts.primary.font-scale._ratio}, 9), 0)" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/size/global/designsystemet/font-secondary.json b/design-tokens/primitives/modes/size/global/designsystemet/font-secondary.json new file mode 100644 index 0000000000..bfccadcb80 --- /dev/null +++ b/design-tokens/primitives/modes/size/global/designsystemet/font-secondary.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}, 3), 0)" + }, + "8": { + "$type": "fontSizes", + "$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}, 5), 0)" + }, + "10": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 6), 0)" + }, + "11": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 7), 0)" + }, + "12": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 8), 0)" + }, + "13": { + "$type": "fontSizes", + "$value": "roundTo({designsystemet.fonts.secondary.font-scale._base} * pow({designsystemet.fonts.secondary.font-scale._ratio}, 9), 0)" + } + } + } + } + } +} \ No newline at end of file diff --git a/design-tokens/primitives/modes/size/global/different-fonts/font-headings.json b/design-tokens/primitives/modes/size/global/different-fonts/font-headings.json new file mode 100644 index 0000000000..b79ed5cf07 --- /dev/null +++ b/design-tokens/primitives/modes/size/global/different-fonts/font-headings.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/size/global/different-fonts/font-main.json b/design-tokens/primitives/modes/size/global/different-fonts/font-main.json new file mode 100644 index 0000000000..573a5a27b1 --- /dev/null +++ b/design-tokens/primitives/modes/size/global/different-fonts/font-main.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/size/large/designsystemet/font-primary.json b/design-tokens/primitives/modes/size/large/designsystemet/font-primary.json new file mode 100644 index 0000000000..046adb2280 --- /dev/null +++ b/design-tokens/primitives/modes/size/large/designsystemet/font-primary.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/size/large/designsystemet/font-secondary.json b/design-tokens/primitives/modes/size/large/designsystemet/font-secondary.json new file mode 100644 index 0000000000..55ea5eab2a --- /dev/null +++ b/design-tokens/primitives/modes/size/large/designsystemet/font-secondary.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/size/large/different-fonts/font-headings.json b/design-tokens/primitives/modes/size/large/different-fonts/font-headings.json new file mode 100644 index 0000000000..c3c41ca19e --- /dev/null +++ b/design-tokens/primitives/modes/size/large/different-fonts/font-headings.json @@ -0,0 +1,18 @@ +{ + "different-fonts": { + "fonts": { + "headings": { + "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/size/large/different-fonts/font-main.json b/design-tokens/primitives/modes/size/large/different-fonts/font-main.json new file mode 100644 index 0000000000..76ddb8ed60 --- /dev/null +++ b/design-tokens/primitives/modes/size/large/different-fonts/font-main.json @@ -0,0 +1,18 @@ +{ + "different-fonts": { + "fonts": { + "main": { + "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/size/medium/designsystemet/font-primary.json b/design-tokens/primitives/modes/size/medium/designsystemet/font-primary.json new file mode 100644 index 0000000000..6aa7ec803d --- /dev/null +++ b/design-tokens/primitives/modes/size/medium/designsystemet/font-primary.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/size/medium/designsystemet/font-secondary.json b/design-tokens/primitives/modes/size/medium/designsystemet/font-secondary.json new file mode 100644 index 0000000000..2e22d5e5e0 --- /dev/null +++ b/design-tokens/primitives/modes/size/medium/designsystemet/font-secondary.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/size/medium/different-fonts/font-headings.json b/design-tokens/primitives/modes/size/medium/different-fonts/font-headings.json new file mode 100644 index 0000000000..e54e878916 --- /dev/null +++ b/design-tokens/primitives/modes/size/medium/different-fonts/font-headings.json @@ -0,0 +1,18 @@ +{ + "different-fonts": { + "fonts": { + "headings": { + "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/size/medium/different-fonts/font-main.json b/design-tokens/primitives/modes/size/medium/different-fonts/font-main.json new file mode 100644 index 0000000000..1d3c328b88 --- /dev/null +++ b/design-tokens/primitives/modes/size/medium/different-fonts/font-main.json @@ -0,0 +1,18 @@ +{ + "different-fonts": { + "fonts": { + "main": { + "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/size/small/designsystemet/font-primary.json b/design-tokens/primitives/modes/size/small/designsystemet/font-primary.json new file mode 100644 index 0000000000..c75d7d0967 --- /dev/null +++ b/design-tokens/primitives/modes/size/small/designsystemet/font-primary.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/size/small/designsystemet/font-secondary.json b/design-tokens/primitives/modes/size/small/designsystemet/font-secondary.json new file mode 100644 index 0000000000..c16ef22b3a --- /dev/null +++ b/design-tokens/primitives/modes/size/small/designsystemet/font-secondary.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/size/small/different-fonts/font-headings.json b/design-tokens/primitives/modes/size/small/different-fonts/font-headings.json new file mode 100644 index 0000000000..b36745d143 --- /dev/null +++ b/design-tokens/primitives/modes/size/small/different-fonts/font-headings.json @@ -0,0 +1,18 @@ +{ + "different-fonts": { + "fonts": { + "headings": { + "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/size/small/different-fonts/font-main.json b/design-tokens/primitives/modes/size/small/different-fonts/font-main.json new file mode 100644 index 0000000000..32ac93619b --- /dev/null +++ b/design-tokens/primitives/modes/size/small/different-fonts/font-main.json @@ -0,0 +1,18 @@ +{ + "different-fonts": { + "fonts": { + "main": { + "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/large.json b/design-tokens/primitives/modes/typography/size/large.json deleted file mode 100644 index 9d7ed9b3e6..0000000000 --- a/design-tokens/primitives/modes/typography/size/large.json +++ /dev/null @@ -1,96 +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": "13" - }, - "2": { - "$type": "fontSizes", - "$value": "16" - }, - "3": { - "$type": "fontSizes", - "$value": "18" - }, - "4": { - "$type": "fontSizes", - "$value": "21" - }, - "5": { - "$type": "fontSizes", - "$value": "24" - }, - "6": { - "$type": "fontSizes", - "$value": "30" - }, - "7": { - "$type": "fontSizes", - "$value": "36" - }, - "8": { - "$type": "fontSizes", - "$value": "48" - }, - "9": { - "$type": "fontSizes", - "$value": "60" - }, - "10": { - "$type": "fontSizes", - "$value": "72" - } - }, - "letter-spacing": { - "1": { - "$type": "letterSpacing", - "$value": "-1%" - }, - "2": { - "$type": "letterSpacing", - "$value": "-0.5%" - }, - "3": { - "$type": "letterSpacing", - "$value": "-0.25%" - }, - "4": { - "$type": "letterSpacing", - "$value": "-0.15%" - }, - "5": { - "$type": "letterSpacing", - "$value": "0%" - }, - "6": { - "$type": "letterSpacing", - "$value": "0.15%" - }, - "7": { - "$type": "letterSpacing", - "$value": "0.25%" - }, - "8": { - "$type": "letterSpacing", - "$value": "0.5%" - }, - "9": { - "$type": "letterSpacing", - "$value": "1.5%" - } - } -} \ 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 f861fb854c..0000000000 --- a/design-tokens/primitives/modes/typography/size/medium.json +++ /dev/null @@ -1,96 +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": "12" - }, - "2": { - "$type": "fontSizes", - "$value": "14" - }, - "3": { - "$type": "fontSizes", - "$value": "16" - }, - "4": { - "$type": "fontSizes", - "$value": "18" - }, - "5": { - "$type": "fontSizes", - "$value": "21" - }, - "6": { - "$type": "fontSizes", - "$value": "24" - }, - "7": { - "$type": "fontSizes", - "$value": "30" - }, - "8": { - "$type": "fontSizes", - "$value": "36" - }, - "9": { - "$type": "fontSizes", - "$value": "48" - }, - "10": { - "$type": "fontSizes", - "$value": "60" - } - }, - "letter-spacing": { - "1": { - "$type": "letterSpacing", - "$value": "-1%" - }, - "2": { - "$type": "letterSpacing", - "$value": "-0.5%" - }, - "3": { - "$type": "letterSpacing", - "$value": "-0.25%" - }, - "4": { - "$type": "letterSpacing", - "$value": "-0.15%" - }, - "5": { - "$type": "letterSpacing", - "$value": "0%" - }, - "6": { - "$type": "letterSpacing", - "$value": "0.15%" - }, - "7": { - "$type": "letterSpacing", - "$value": "0.25%" - }, - "8": { - "$type": "letterSpacing", - "$value": "0.5%" - }, - "9": { - "$type": "letterSpacing", - "$value": "1.5%" - } - } -} \ 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..5a31b3bef7 100644 --- a/design-tokens/themes/designsystemet.json +++ b/design-tokens/themes/designsystemet.json @@ -545,22 +545,610 @@ } } }, + "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}" + } + }, "font-family": { "$type": "fontFamilies", - "$value": "{designsystemet.font-family}" + "$value": "{designsystemet.fonts.primary.font-family}" }, "font-weight": { "medium": { "$type": "fontWeights", - "$value": "{designsystemet.font-weight.medium}" + "$value": "{designsystemet.fonts.primary.font-weight.medium}" }, "semibold": { "$type": "fontWeights", - "$value": "{designsystemet.font-weight.semibold}" + "$value": "{designsystemet.fonts.primary.font-weight.semibold}" }, "regular": { "$type": "fontWeights", - "$value": "{designsystemet.font-weight.regular}" + "$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.8}" + }, + "8": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.9}" + }, + "9": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.11}" + }, + "10": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.13}" + } + }, + "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}" + } + }, + "typography-mapping": { + "heading": { + "2xl": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.secondary.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.secondary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.secondary.font-size.13}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.secondary.letter-spacing.1}" + } + }, + "xl": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.secondary.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.secondary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.secondary.font-size.11}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.secondary.letter-spacing.1}" + } + }, + "lg": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.secondary.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.secondary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.secondary.font-size.9}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.secondary.letter-spacing.2}" + } + }, + "md": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.secondary.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.secondary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.secondary.font-size.8}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.secondary.letter-spacing.3}" + } + }, + "sm": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.secondary.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.secondary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.secondary.font-size.6}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.secondary.letter-spacing.5}" + } + }, + "xs": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.secondary.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.secondary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.secondary.font-size.5}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.secondary.letter-spacing.6}" + } + }, + "2xs": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.secondary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.secondary.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.secondary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.secondary.font-size.4}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.secondary.letter-spacing.6}" + } + } + }, + "body": { + "xl": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.primary.line-height.md}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.6}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.primary.letter-spacing.8}" + } + }, + "lg": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.primary.line-height.md}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.5}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.primary.letter-spacing.8}" + } + }, + "md": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.primary.line-height.md}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.4}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.primary.letter-spacing.8}" + } + }, + "sm": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.primary.line-height.md}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.3}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.primary.letter-spacing.7}" + } + }, + "xs": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.primary.line-height.md}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.2}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.primary.letter-spacing.6}" + } + }, + "short": { + "xl": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.primary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.6}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.primary.letter-spacing.8}" + } + }, + "lg": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.primary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.5}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.primary.letter-spacing.8}" + } + }, + "md": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.primary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.4}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.primary.letter-spacing.8}" + } + }, + "sm": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.primary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.3}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.primary.letter-spacing.7}" + } + }, + "xs": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.primary.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.2}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.primary.letter-spacing.6}" + } + } + }, + "long": { + "xl": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.primary.line-height.lg}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.6}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.primary.letter-spacing.8}" + } + }, + "lg": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.primary.line-height.lg}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.5}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.primary.letter-spacing.8}" + } + }, + "md": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.primary.line-height.lg}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.4}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.primary.letter-spacing.8}" + } + }, + "sm": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.primary.line-height.lg}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.3}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{designsystemet.fonts.primary.letter-spacing.7}" + } + }, + "xs": { + "font-family": { + "$type": "fontFamilies", + "$value": "{designsystemet.fonts.primary.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{designsystemet.fonts.primary.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{designsystemet.fonts.primary.line-height.lg}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{designsystemet.fonts.primary.font-size.2}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{designsystemet.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..18d0b633aa --- /dev/null +++ b/design-tokens/themes/different-fonts.json @@ -0,0 +1,1188 @@ +{ + "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}" + } + } + }, + "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}" + } + }, + "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.8}" + }, + "8": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.main.font-size.9}" + }, + "9": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.main.font-size.11}" + }, + "10": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.main.font-size.13}" + } + }, + "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}" + } + }, + "typography-mapping": { + "heading": { + "2xl": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.headings.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.headings.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.headings.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.headings.font-size.13}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.headings.letter-spacing.1}" + } + }, + "xl": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.headings.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.headings.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.headings.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.headings.font-size.11}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.headings.letter-spacing.1}" + } + }, + "lg": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.headings.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.headings.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.headings.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.headings.font-size.9}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.headings.letter-spacing.2}" + } + }, + "md": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.headings.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.headings.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.headings.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.headings.font-size.8}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.headings.letter-spacing.3}" + } + }, + "sm": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.headings.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.headings.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.headings.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.headings.font-size.6}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.headings.letter-spacing.5}" + } + }, + "xs": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.headings.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.headings.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.headings.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.headings.font-size.5}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.headings.letter-spacing.6}" + } + }, + "2xs": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.headings.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.headings.font-weight.medium}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.headings.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.headings.font-size.4}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.headings.letter-spacing.6}" + } + } + }, + "body": { + "xl": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.main.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.main.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.main.line-height.md}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.main.font-size.6}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.main.letter-spacing.8}" + } + }, + "lg": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.main.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.main.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.main.line-height.md}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.main.font-size.5}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.main.letter-spacing.8}" + } + }, + "md": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.main.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.main.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.main.line-height.md}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.main.font-size.4}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.main.letter-spacing.8}" + } + }, + "sm": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.main.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.main.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.main.line-height.md}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.main.font-size.3}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.main.letter-spacing.7}" + } + }, + "xs": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.main.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.main.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.main.line-height.md}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.main.font-size.2}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.main.letter-spacing.6}" + } + }, + "short": { + "xl": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.main.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.main.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.main.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.main.font-size.6}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.main.letter-spacing.8}" + } + }, + "lg": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.main.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.main.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.main.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.main.font-size.5}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.main.letter-spacing.8}" + } + }, + "md": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.main.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.main.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.main.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.main.font-size.4}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.main.letter-spacing.8}" + } + }, + "sm": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.main.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.main.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.main.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.main.font-size.3}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.main.letter-spacing.7}" + } + }, + "xs": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.main.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.main.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.main.line-height.sm}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.main.font-size.2}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.main.letter-spacing.6}" + } + } + }, + "long": { + "xl": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.main.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.main.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.main.line-height.lg}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.main.font-size.6}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.main.letter-spacing.8}" + } + }, + "lg": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.main.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.main.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.main.line-height.lg}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.main.font-size.5}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.main.letter-spacing.8}" + } + }, + "md": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.main.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.main.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.main.line-height.lg}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.main.font-size.4}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.main.letter-spacing.8}" + } + }, + "sm": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.main.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.main.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.main.line-height.lg}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.main.font-size.3}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.main.letter-spacing.7}" + } + }, + "xs": { + "font-family": { + "$type": "fontFamilies", + "$value": "{different-fonts.fonts.main.font-family}" + }, + "font-weight": { + "$type": "fontWeights", + "$value": "{different-fonts.fonts.main.font-weight.regular}" + }, + "line-height": { + "$type": "lineHeights", + "$value": "{different-fonts.fonts.main.line-height.lg}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{different-fonts.fonts.main.font-size.2}" + }, + "letter-spacing": { + "$type": "letterSpacing", + "$value": "{different-fonts.fonts.main.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..76106a633b 100644 --- a/designsystemet.config.json +++ b/designsystemet.config.json @@ -16,7 +16,83 @@ }, "borderRadius": 4, "typography": { - "fontFamily": "Inter" + "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 } + } + } + }, + "components": { + "heading": { + "font": "secondary" + }, + "body": { + "font": "primary" + } + } + } + }, + "different-fonts": { + "colors": { + "main": { + "accent": "#0062BA" + }, + "support": { + "brand1": "#0D7A5F", + "brand2": "#5B3FA0" + }, + "neutral": "#24272B" + }, + "borderRadius": 4, + "typography": { + "fonts": { + "main": { + "fontFamily": "Playpen Sans", + "fontWeight": { + "regular": "Regular", + "medium": "Medium", + "semibold": "SemiBold" + }, + "size": { + "small": { "base": 14 }, + "medium": { "base": 16 }, + "large": { "base": 18 } + } + }, + "headings": { + "fontFamily": "Karantina", + "fontWeight": { + "regular": "Light", + "medium": "Regular", + "semibold": "Bold" + } + } + }, + "components": { + "heading": { + "font": "headings" + }, + "body": { + "font": "main" + } + } } } } 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..1cc4e592d6 100644 --- a/internal/digdir/design-tokens/$themes.json +++ b/internal/digdir/design-tokens/$themes.json @@ -6,6 +6,7 @@ "selectedTokenSets": { "primitives/modes/size/medium": "source", "primitives/modes/size/global": "enabled", + "primitives/modes/typography/size/global": "enabled", "primitives/modes/typography/size/medium": "enabled" }, "$figmaCollectionId": "VariableCollectionId:36248:20757", @@ -19,6 +20,7 @@ "selectedTokenSets": { "primitives/modes/size/large": "source", "primitives/modes/size/global": "enabled", + "primitives/modes/typography/size/global": "enabled", "primitives/modes/typography/size/large": "enabled" }, "$figmaCollectionId": "VariableCollectionId:36248:20757", @@ -32,6 +34,7 @@ "selectedTokenSets": { "primitives/modes/size/small": "source", "primitives/modes/size/global": "enabled", + "primitives/modes/typography/size/global": "enabled", "primitives/modes/typography/size/small": "enabled" }, "$figmaCollectionId": "VariableCollectionId:36248:20757", diff --git a/design-tokens/primitives/modes/typography/size/small.json b/internal/digdir/design-tokens/primitives/modes/typography/size/global.json similarity index 54% rename from design-tokens/primitives/modes/typography/size/small.json rename to internal/digdir/design-tokens/primitives/modes/typography/size/global.json index 99e67f561f..1342a17a15 100644 --- a/design-tokens/primitives/modes/typography/size/small.json +++ b/internal/digdir/design-tokens/primitives/modes/typography/size/global.json @@ -16,43 +16,55 @@ "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}, 4), 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)" + }, + "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 9d7ed9b3e6..15376376d5 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.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 f861fb854c..9e5c5e6029 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.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 99e67f561f..d290e53a39 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.14234" } } } \ 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..205a2f1cf2 100644 --- a/internal/digdir/themes/altinn.css +++ b/internal/digdir/themes/altinn.css @@ -7,18 +7,24 @@ 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; } } @@ -39,19 +45,50 @@ 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), 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); + } +} +} + @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 +111,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..e6423e9eec 100644 --- a/internal/digdir/themes/digdir.css +++ b/internal/digdir/themes/digdir.css @@ -7,18 +7,24 @@ 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; } } @@ -39,19 +45,50 @@ 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), 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); + } +} +} + @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 +111,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..03870376b3 100644 --- a/internal/digdir/themes/portal.css +++ b/internal/digdir/themes/portal.css @@ -7,18 +7,24 @@ 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; } } @@ -39,19 +45,50 @@ 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), 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); + } +} +} + @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 +111,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..46c793b804 100644 --- a/internal/digdir/themes/uutilsynet.css +++ b/internal/digdir/themes/uutilsynet.css @@ -7,18 +7,24 @@ 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; } } @@ -39,19 +45,50 @@ 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), 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); + } +} +} + @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 +111,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..81a7aff7de 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,8 @@ export async function parseCreateConfig( // and default theme options from the CLI. { [theme]: getThemeOptions(getCliOption), - }, - }); + }) as CreateConfigSchema['themes'], + } satisfies CreateConfigSchema); return validateConfig(configFileCreateSchema, unvalidatedConfig, configPath); } @@ -110,5 +112,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..e0b7c30fb5 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,15 @@ function makeTokenCommands() { const outDir = typeof opts.outDir === 'string' ? opts.outDir : './dist/tokens'; const { configFile, configPath } = await getConfigFile(opts.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 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 }); if (dry) { @@ -66,7 +76,13 @@ function makeTokenCommands() { await cleanDir(outDir, dry); } - await buildTokens({ tokensDir, outDir, verbose, dry, tailwind: experimentalTailwind, ...config }); + 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'; + } + + await buildTokens({ tokensDir, outDir, verbose, dry, tailwind: experimentalTailwind, ...config.build }); return Promise.resolve(); }); @@ -117,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); - 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/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..499e10a912 100644 --- a/packages/cli/src/config.ts +++ b/packages/cli/src/config.ts @@ -161,6 +161,55 @@ const focusOverrideSchema = z }) .describe('Overrides for the focus colors'); +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'); +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 build.typographySizeValues to be "static".', + ), +}); + +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 .object({ colors: semanticColorOverrideSchema.optional(), @@ -171,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 @@ -182,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(), @@ -191,26 +258,42 @@ 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.', + }), +}); +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; +export type TypographyFontSchema = 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..ecd4c99093 100644 --- a/packages/cli/src/scripts/update-preview-tokens.ts +++ b/packages/cli/src/scripts/update-preview-tokens.ts @@ -37,10 +37,14 @@ const toPreviewToken = (tokens: { token: TransformedToken; formatted: string }[] type PreviewToken = { variable: string; value: string }; export const formatTheme = async (themeConfig: Theme) => { - const { tokenSets } = await createTokens(themeConfig); + 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, 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/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..f30ff06138 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 { 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 type { Theme, TokenSet, TokenSets } from './types.js'; @@ -24,36 +26,60 @@ export const cliOptions = { }, } as const; -export const createTokens = async (opts: Theme) => { - const { colors, typography, name, borderRadius, overrides } = opts; +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); const tokenSets: TokenSets = new Map([ ...getDefaultTokens([ 'primitives/globals', - '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', + ...sizeModes.map((size) => `primitives/modes/size/${size}`), + ]), + ...fontNames.map((font): [string, TokenSet] => [ + `primitives/modes/size/global/${name}/font-${font}`, + generateFontSizeGlobal(name, font), + ]), + ...fontNames.flatMap((font): [string, TokenSet][] => + sizeModes.map((size) => [ + `primitives/modes/size/${size}/${name}/font-${font}`, + 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/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/${name}/${font}`, + generateFont(name, font, fontDefinitions[font]), ]), - [`themes/${name}`, generateTheme(colors, name, borderRadius)], + [`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 bd29cfb533..b2dd80f994 100644 --- a/packages/cli/src/tokens/create/defaults.ts +++ b/packages/cli/src/tokens/create/defaults.ts @@ -1,31 +1,17 @@ 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 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 { - type: 'json', -}; -import semanticStyle from '../template/design-tokens/semantic/style.json' with { type: 'json' }; 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, - '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 23aa8998a6..8f64d56e51 100644 --- a/packages/cli/src/tokens/create/generators/$metadata.ts +++ b/packages/cli/src/tokens/create/generators/$metadata.ts @@ -1,24 +1,29 @@ -import type { ColorScheme } from '../../../colors/types.js'; -import type { Colors } from '../../types.js'; +import type { Colors, TokenSetDimensionsForAllThemes } from '../../types.js'; type Metadata = { tokenSetOrder: string[]; }; -export function generate$Metadata(schemes: ColorScheme[], themes: string[], colors: Colors): Metadata { +export function generate$Metadata( + dimensions: TokenSetDimensionsForAllThemes, + themes: string[], + colors: Colors, +): Metadata { + const { colorSchemes, sizeModes, fontNamesPerTheme } = dimensions; + const sizesAndGlobal = ['global', ...sizeModes]; return { tokenSetOrder: [ 'primitives/globals', - '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', - ...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}`), + ...sizesAndGlobal.flatMap((size) => + themes.flatMap((theme) => + fontNamesPerTheme[theme].map((font) => `primitives/modes/size/${size}/${theme}/font-${font}`), + ), + ), + ...themes.flatMap((theme) => fontNamesPerTheme[theme].map((font) => `primitives/fonts/${theme}/${font}`)), + ...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 9815a5e550..3560f30598 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 } 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( - colorSchemes: ColorSchemes, + tokenSetDimensions: TokenSetDimensionsForAllThemes, themes: string[], colors: Colors, ): Promise { + const { colorSchemes, fontNamesPerTheme, sizeModes } = tokenSetDimensions; return [ - ...generateSizeGroup(), - ...(await generateThemesGroup(themes)), - ...generateTypographyGroup(themes), + ...generateSizeGroup(themes, fontNamesPerTheme, sizeModes), + ...(await generateThemesGroup(themes, fontNamesPerTheme)), ...generateColorSchemesGroup(colorSchemes, themes), generateSemanticGroup(), ...(await generateColorGroup('main', colors)), @@ -36,48 +39,47 @@ export async function generate$Themes( ]; } -function generateSizeGroup(): ThemeObject_[] { - return [ - { +function generateSizeGroup(themes: string[], fonts: FontsPerTheme, 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/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/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/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, + ...Object.fromEntries( + themes.flatMap((theme) => + fonts[theme].flatMap((font) => [ + [`primitives/modes/size/global/${theme}/font-${font}`, TokenSetStatus.ENABLED], + [`primitives/modes/size/${size}/${theme}/font-${font}`, TokenSetStatus.ENABLED], + ]), + ), + ), }, - ]; + ...existingFigmaIds[size], + $figmaStyleReferences: {}, + })); } const colorSchemeDefaults: Record = { @@ -116,7 +118,13 @@ function generateColorSchemesGroup(colorSchemes: ColorSchemes, themes: string[]) ); } -async function generateThemesGroup(themes: string[]): Promise { +async function generateThemesGroup(themes: string[], fonts: FontsPerTheme): Promise { + const fontSets = Object.fromEntries( + themes.flatMap((theme) => + fonts[theme].map((font) => [`primitives/fonts/${theme}/${font}`, TokenSetStatus.ENABLED]), + ), + ); + return Promise.all( themes.map( async (theme, index): Promise => ({ @@ -125,6 +133,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', @@ -162,28 +171,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..b68a110b30 --- /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)`, + }, + '7': { + $type: 'fontSizes', + $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 3), 0)`, + }, + '8': { + $type: 'fontSizes', + $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 4), 0)`, + }, + '9': { + $type: 'fontSizes', + $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 5), 0)`, + }, + '10': { + $type: 'fontSizes', + $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 6), 0)`, + }, + '11': { + $type: 'fontSizes', + $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 7), 0)`, + }, + '12': { + $type: 'fontSizes', + $value: `roundTo({${themeName}.fonts.${fontName}.font-scale._base} * pow({${themeName}.fonts.${fontName}.font-scale._ratio}, 8), 0)`, + }, + '13': { + $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..2104dfc87f 100644 --- a/packages/cli/src/tokens/create/generators/theme.ts +++ b/packages/cli/src/tokens/create/generators/theme.ts @@ -2,13 +2,93 @@ 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 generateBackwardCompatibilityFontTokens(themeName: string, defaultFont: string) { + const lineHeights = ['sm', 'md', 'lg']; + const fontWeights = ['medium', 'semibold', 'regular']; + 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( + lineHeights.map( + (lineHeight) => + [ + lineHeight, + { + $type: 'lineHeights', + $value: `{${themeName}.fonts.${defaultFont}.line-height.${lineHeight}}`, + }, + ] as const, + ), + ), + 'font-family': { + $type: 'fontFamilies', + $value: `{${themeName}.fonts.${defaultFont}.font-family}`, + }, + 'font-weight': Object.fromEntries( + fontWeights.map( + (weight) => + [ + weight, + { + $type: 'fontWeights', + $value: `{${themeName}.fonts.${defaultFont}.font-weight.${weight}}`, + }, + ] as const, + ), + ), + 'font-size': Object.fromEntries( + Object.entries(fontSizes).map( + ([oldSize, newSize]) => + [ + oldSize, + { + $type: 'fontSizes', + $value: `{${themeName}.fonts.${defaultFont}.font-size.${newSize}}`, + }, + ] as const, + ), + ), + 'letter-spacing': Object.fromEntries( + letterSpacings.map( + (letterSpacing) => + [ + letterSpacing, + { + $type: 'letterSpacing', + $value: `{${themeName}.fonts.${defaultFont}.letter-spacing.${letterSpacing}}`, + }, + ] as const, + ), + ), + }; +} -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]; + // TODO handle default font name somewhere else + const defaultFont = Object.keys(typography.fonts ?? {}).at(0) ?? 'primary'; const themeColorTokens = Object.fromEntries( customColors.map( @@ -42,6 +122,11 @@ export const generateTheme = (colors: Colors, themeName: string, borderRadius: n }, }, }, + // Generate a backward-compatibility layer for the old "font-size", "line-height" etc tokens + ...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(themeName, typography), ...remainingThemeFile, }; @@ -51,8 +136,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 +148,504 @@ export const generateTheme = (colors: Colors, themeName: string, borderRadius: n return token; }; + +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; + const bodyFont = typography.components?.body?.font ?? defaultFont; + return { + heading: { + '2xl': { + 'font-family': { + $type: 'fontFamilies', + $value: `{${themeName}.fonts.${headingFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{${themeName}.fonts.${headingFont}.font-weight.medium}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{${themeName}.fonts.${headingFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{${themeName}.fonts.${headingFont}.font-size.13}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{${themeName}.fonts.${headingFont}.letter-spacing.1}`, + }, + }, + xl: { + 'font-family': { + $type: 'fontFamilies', + $value: `{${themeName}.fonts.${headingFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{${themeName}.fonts.${headingFont}.font-weight.medium}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{${themeName}.fonts.${headingFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{${themeName}.fonts.${headingFont}.font-size.11}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{${themeName}.fonts.${headingFont}.letter-spacing.1}`, + }, + }, + lg: { + 'font-family': { + $type: 'fontFamilies', + $value: `{${themeName}.fonts.${headingFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{${themeName}.fonts.${headingFont}.font-weight.medium}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{${themeName}.fonts.${headingFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{${themeName}.fonts.${headingFont}.font-size.9}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{${themeName}.fonts.${headingFont}.letter-spacing.2}`, + }, + }, + md: { + 'font-family': { + $type: 'fontFamilies', + $value: `{${themeName}.fonts.${headingFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{${themeName}.fonts.${headingFont}.font-weight.medium}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{${themeName}.fonts.${headingFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{${themeName}.fonts.${headingFont}.font-size.8}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{${themeName}.fonts.${headingFont}.letter-spacing.3}`, + }, + }, + sm: { + 'font-family': { + $type: 'fontFamilies', + $value: `{${themeName}.fonts.${headingFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{${themeName}.fonts.${headingFont}.font-weight.medium}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{${themeName}.fonts.${headingFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{${themeName}.fonts.${headingFont}.font-size.6}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{${themeName}.fonts.${headingFont}.letter-spacing.5}`, + }, + }, + xs: { + 'font-family': { + $type: 'fontFamilies', + $value: `{${themeName}.fonts.${headingFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{${themeName}.fonts.${headingFont}.font-weight.medium}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{${themeName}.fonts.${headingFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{${themeName}.fonts.${headingFont}.font-size.5}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{${themeName}.fonts.${headingFont}.letter-spacing.6}`, + }, + }, + '2xs': { + 'font-family': { + $type: 'fontFamilies', + $value: `{${themeName}.fonts.${headingFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{${themeName}.fonts.${headingFont}.font-weight.medium}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{${themeName}.fonts.${headingFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{${themeName}.fonts.${headingFont}.font-size.4}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{${themeName}.fonts.${headingFont}.letter-spacing.6}`, + }, + }, + }, + body: { + xl: { + 'font-family': { + $type: 'fontFamilies', + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{${themeName}.fonts.${bodyFont}.line-height.md}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{${themeName}.fonts.${bodyFont}.font-size.6}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.8}`, + }, + }, + lg: { + 'font-family': { + $type: 'fontFamilies', + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{${themeName}.fonts.${bodyFont}.line-height.md}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{${themeName}.fonts.${bodyFont}.font-size.5}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.8}`, + }, + }, + md: { + 'font-family': { + $type: 'fontFamilies', + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{${themeName}.fonts.${bodyFont}.line-height.md}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{${themeName}.fonts.${bodyFont}.font-size.4}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.8}`, + }, + }, + sm: { + 'font-family': { + $type: 'fontFamilies', + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{${themeName}.fonts.${bodyFont}.line-height.md}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{${themeName}.fonts.${bodyFont}.font-size.3}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.7}`, + }, + }, + xs: { + 'font-family': { + $type: 'fontFamilies', + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{${themeName}.fonts.${bodyFont}.line-height.md}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{${themeName}.fonts.${bodyFont}.font-size.2}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.6}`, + }, + }, + short: { + xl: { + 'font-family': { + $type: 'fontFamilies', + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{${themeName}.fonts.${bodyFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{${themeName}.fonts.${bodyFont}.font-size.6}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.8}`, + }, + }, + lg: { + 'font-family': { + $type: 'fontFamilies', + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{${themeName}.fonts.${bodyFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{${themeName}.fonts.${bodyFont}.font-size.5}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.8}`, + }, + }, + md: { + 'font-family': { + $type: 'fontFamilies', + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{${themeName}.fonts.${bodyFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{${themeName}.fonts.${bodyFont}.font-size.4}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.8}`, + }, + }, + sm: { + 'font-family': { + $type: 'fontFamilies', + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{${themeName}.fonts.${bodyFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{${themeName}.fonts.${bodyFont}.font-size.3}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.7}`, + }, + }, + xs: { + 'font-family': { + $type: 'fontFamilies', + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{${themeName}.fonts.${bodyFont}.line-height.sm}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{${themeName}.fonts.${bodyFont}.font-size.2}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.6}`, + }, + }, + }, + long: { + xl: { + 'font-family': { + $type: 'fontFamilies', + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{${themeName}.fonts.${bodyFont}.line-height.lg}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{${themeName}.fonts.${bodyFont}.font-size.6}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.8}`, + }, + }, + lg: { + 'font-family': { + $type: 'fontFamilies', + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{${themeName}.fonts.${bodyFont}.line-height.lg}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{${themeName}.fonts.${bodyFont}.font-size.5}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.8}`, + }, + }, + md: { + 'font-family': { + $type: 'fontFamilies', + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{${themeName}.fonts.${bodyFont}.line-height.lg}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{${themeName}.fonts.${bodyFont}.font-size.4}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.8}`, + }, + }, + sm: { + 'font-family': { + $type: 'fontFamilies', + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{${themeName}.fonts.${bodyFont}.line-height.lg}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{${themeName}.fonts.${bodyFont}.font-size.3}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{${themeName}.fonts.${bodyFont}.letter-spacing.7}`, + }, + }, + xs: { + 'font-family': { + $type: 'fontFamilies', + $value: `{${themeName}.fonts.${bodyFont}.font-family}`, + }, + 'font-weight': { + $type: 'fontWeights', + $value: `{${themeName}.fonts.${bodyFont}.font-weight.regular}`, + }, + 'line-height': { + $type: 'lineHeights', + $value: `{${themeName}.fonts.${bodyFont}.line-height.lg}`, + }, + 'font-size': { + $type: 'fontSizes', + $value: `{${themeName}.fonts.${bodyFont}.font-size.2}`, + }, + 'letter-spacing': { + $type: 'letterSpacing', + $value: `{${themeName}.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/write.ts b/packages/cli/src/tokens/create/write.ts index b536b42cee..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, 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'; @@ -13,18 +13,45 @@ 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; }; +/* +=== 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: 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'); @@ -54,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(['dark', 'light'], themes, colors); - const $metadata = generate$Metadata(['dark', 'light'], 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 da9225cd39..0209163717 100644 --- a/packages/cli/src/tokens/format.ts +++ b/packages/cli/src/tokens/format.ts @@ -17,9 +17,13 @@ export const formatTokens = async (options: Omit { - const { tokenSets } = await createTokens(themeConfig); + const { tokenSets, themeDimensions } = await createTokens(themeConfig); - const $themes = await generate$Themes(['dark', 'light'], [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/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/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/large.json b/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/large.json deleted file mode 100644 index 9d7ed9b3e6..0000000000 --- a/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/large.json +++ /dev/null @@ -1,96 +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": "13" - }, - "2": { - "$type": "fontSizes", - "$value": "16" - }, - "3": { - "$type": "fontSizes", - "$value": "18" - }, - "4": { - "$type": "fontSizes", - "$value": "21" - }, - "5": { - "$type": "fontSizes", - "$value": "24" - }, - "6": { - "$type": "fontSizes", - "$value": "30" - }, - "7": { - "$type": "fontSizes", - "$value": "36" - }, - "8": { - "$type": "fontSizes", - "$value": "48" - }, - "9": { - "$type": "fontSizes", - "$value": "60" - }, - "10": { - "$type": "fontSizes", - "$value": "72" - } - }, - "letter-spacing": { - "1": { - "$type": "letterSpacing", - "$value": "-1%" - }, - "2": { - "$type": "letterSpacing", - "$value": "-0.5%" - }, - "3": { - "$type": "letterSpacing", - "$value": "-0.25%" - }, - "4": { - "$type": "letterSpacing", - "$value": "-0.15%" - }, - "5": { - "$type": "letterSpacing", - "$value": "0%" - }, - "6": { - "$type": "letterSpacing", - "$value": "0.15%" - }, - "7": { - "$type": "letterSpacing", - "$value": "0.25%" - }, - "8": { - "$type": "letterSpacing", - "$value": "0.5%" - }, - "9": { - "$type": "letterSpacing", - "$value": "1.5%" - } - } -} \ No newline at end of file diff --git a/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/medium.json b/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/medium.json deleted file mode 100644 index f861fb854c..0000000000 --- a/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/medium.json +++ /dev/null @@ -1,96 +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": "12" - }, - "2": { - "$type": "fontSizes", - "$value": "14" - }, - "3": { - "$type": "fontSizes", - "$value": "16" - }, - "4": { - "$type": "fontSizes", - "$value": "18" - }, - "5": { - "$type": "fontSizes", - "$value": "21" - }, - "6": { - "$type": "fontSizes", - "$value": "24" - }, - "7": { - "$type": "fontSizes", - "$value": "30" - }, - "8": { - "$type": "fontSizes", - "$value": "36" - }, - "9": { - "$type": "fontSizes", - "$value": "48" - }, - "10": { - "$type": "fontSizes", - "$value": "60" - } - }, - "letter-spacing": { - "1": { - "$type": "letterSpacing", - "$value": "-1%" - }, - "2": { - "$type": "letterSpacing", - "$value": "-0.5%" - }, - "3": { - "$type": "letterSpacing", - "$value": "-0.25%" - }, - "4": { - "$type": "letterSpacing", - "$value": "-0.15%" - }, - "5": { - "$type": "letterSpacing", - "$value": "0%" - }, - "6": { - "$type": "letterSpacing", - "$value": "0.15%" - }, - "7": { - "$type": "letterSpacing", - "$value": "0.25%" - }, - "8": { - "$type": "letterSpacing", - "$value": "0.5%" - }, - "9": { - "$type": "letterSpacing", - "$value": "1.5%" - } - } -} \ No newline at end of file diff --git a/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/small.json b/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/small.json deleted file mode 100644 index 99e67f561f..0000000000 --- a/packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/small.json +++ /dev/null @@ -1,96 +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": "11" - }, - "2": { - "$type": "fontSizes", - "$value": "13" - }, - "3": { - "$type": "fontSizes", - "$value": "14" - }, - "4": { - "$type": "fontSizes", - "$value": "16" - }, - "5": { - "$type": "fontSizes", - "$value": "18" - }, - "6": { - "$type": "fontSizes", - "$value": "21" - }, - "7": { - "$type": "fontSizes", - "$value": "24" - }, - "8": { - "$type": "fontSizes", - "$value": "30" - }, - "9": { - "$type": "fontSizes", - "$value": "36" - }, - "10": { - "$type": "fontSizes", - "$value": "48" - } - }, - "letter-spacing": { - "1": { - "$type": "letterSpacing", - "$value": "-1%" - }, - "2": { - "$type": "letterSpacing", - "$value": "-0.5%" - }, - "3": { - "$type": "letterSpacing", - "$value": "-0.25%" - }, - "4": { - "$type": "letterSpacing", - "$value": "-0.15%" - }, - "5": { - "$type": "letterSpacing", - "$value": "0%" - }, - "6": { - "$type": "letterSpacing", - "$value": "0.15%" - }, - "7": { - "$type": "letterSpacing", - "$value": "0.25%" - }, - "8": { - "$type": "letterSpacing", - "$value": "0.5%" - }, - "9": { - "$type": "letterSpacing", - "$value": "1.5%" - } - } -} \ 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..39e3376b2f 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,20 @@ export type ThemePermutation = { export type ThemeDimension = keyof ThemePermutation; +export type TokenSetDimensions = { + colorSchemes: ColorScheme[]; + sizeModes: ('small' | 'medium' | 'large')[]; + 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; 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..14d2900a4a 100644 --- a/packages/css/theme/designsystemet.css +++ b/packages/css/theme/designsystemet.css @@ -1,7 +1,7 @@ @charset "UTF-8"; /* build: v1.11.0 -design-tokens: v1.9.0 +design-tokens: v1.11.0 */ @layer ds.theme.size-mode { @@ -40,55 +40,46 @@ design-tokens: v1.9.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-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); +:root { + +} +} - @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.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; @@ -367,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; @@ -508,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)); @@ -806,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 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