diff --git a/apps/storefront/tokens/altinn/dark.ts b/apps/storefront/tokens/altinn/dark.ts index 0c8dfa0439..60d24e374a 100644 --- a/apps/storefront/tokens/altinn/dark.ts +++ b/apps/storefront/tokens/altinn/dark.ts @@ -2337,7 +2337,13 @@ export const color = [ export const typography = [ { $type: "typography", - $value: "500 3.75rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "3.75rem", + letterSpacing: "-1%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2350,7 +2356,7 @@ export const typography = [ letterSpacing: "{letter-spacing.1}" } }, - name: "--ds-typography-heading-2xl", + name: "--ds-heading-2xl", attributes: {}, path: [ "typography", @@ -2360,7 +2366,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 3rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "3rem", + letterSpacing: "-1%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2373,7 +2385,7 @@ export const typography = [ letterSpacing: "{letter-spacing.1}" } }, - name: "--ds-typography-heading-xl", + name: "--ds-heading-xl", attributes: {}, path: [ "typography", @@ -2383,7 +2395,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 2.25rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "2.25rem", + letterSpacing: "-0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2396,7 +2414,7 @@ export const typography = [ letterSpacing: "{letter-spacing.2}" } }, - name: "--ds-typography-heading-lg", + name: "--ds-heading-lg", attributes: {}, path: [ "typography", @@ -2406,7 +2424,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.875rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.875rem", + letterSpacing: "-0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2419,7 +2443,7 @@ export const typography = [ letterSpacing: "{letter-spacing.3}" } }, - name: "--ds-typography-heading-md", + name: "--ds-heading-md", attributes: {}, path: [ "typography", @@ -2429,7 +2453,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.5rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.5rem", + letterSpacing: "0%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2442,7 +2472,7 @@ export const typography = [ letterSpacing: "{letter-spacing.5}" } }, - name: "--ds-typography-heading-sm", + name: "--ds-heading-sm", attributes: {}, path: [ "typography", @@ -2452,7 +2482,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.3125rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2465,7 +2501,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-heading-xs", + name: "--ds-heading-xs", attributes: {}, path: [ "typography", @@ -2475,7 +2511,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.125rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2488,7 +2530,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-heading-2xs", + name: "--ds-heading-2xs", attributes: {}, path: [ "typography", @@ -2498,7 +2540,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.875rem/1.7 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.875rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2511,7 +2559,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-ingress-lg", + name: "--ds-ingress-lg", attributes: {}, path: [ "typography", @@ -2521,7 +2569,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.5rem/1.7 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.5rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2534,7 +2588,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-ingress-md", + name: "--ds-ingress-md", attributes: {}, path: [ "typography", @@ -2544,7 +2598,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.7 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.3125rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2557,7 +2617,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-ingress-sm", + name: "--ds-ingress-sm", attributes: {}, path: [ "typography", @@ -2567,7 +2627,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.7 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2580,7 +2646,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-ingress-xs", + name: "--ds-ingress-xs", attributes: {}, path: [ "typography", @@ -2590,7 +2656,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.5 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2603,7 +2675,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-lg", + name: "--ds-paragraph-lg", attributes: {}, path: [ "typography", @@ -2613,7 +2685,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.5 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2626,7 +2704,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-md", + name: "--ds-paragraph-md", attributes: {}, path: [ "typography", @@ -2636,7 +2714,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.5 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2649,7 +2733,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-sm", + name: "--ds-paragraph-sm", attributes: {}, path: [ "typography", @@ -2659,7 +2743,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.5 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2672,7 +2762,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-xs", + name: "--ds-paragraph-xs", attributes: {}, path: [ "typography", @@ -2682,7 +2772,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2695,7 +2791,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-short-lg", + name: "--ds-paragraph-short-lg", attributes: {}, path: [ "typography", @@ -2706,7 +2802,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2719,7 +2821,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-short-md", + name: "--ds-paragraph-short-md", attributes: {}, path: [ "typography", @@ -2730,7 +2832,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2743,7 +2851,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-short-sm", + name: "--ds-paragraph-short-sm", attributes: {}, path: [ "typography", @@ -2754,7 +2862,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2767,7 +2881,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-short-xs", + name: "--ds-paragraph-short-xs", attributes: {}, path: [ "typography", @@ -2778,7 +2892,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.7 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2791,7 +2911,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-long-lg", + name: "--ds-paragraph-long-lg", attributes: {}, path: [ "typography", @@ -2802,7 +2922,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.7 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2815,7 +2941,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-long-md", + name: "--ds-paragraph-long-md", attributes: {}, path: [ "typography", @@ -2826,7 +2952,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.7 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2839,7 +2971,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-long-sm", + name: "--ds-paragraph-long-sm", attributes: {}, path: [ "typography", @@ -2850,7 +2982,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.7 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2863,7 +3001,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-long-xs", + name: "--ds-paragraph-long-xs", attributes: {}, path: [ "typography", @@ -2874,7 +3012,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.3125rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2887,7 +3031,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-label-lg", + name: "--ds-label-lg", attributes: {}, path: [ "typography", @@ -2897,7 +3041,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.125rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2910,7 +3060,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-label-md", + name: "--ds-label-md", attributes: {}, path: [ "typography", @@ -2920,7 +3070,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2933,7 +3089,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-label-sm", + name: "--ds-label-sm", attributes: {}, path: [ "typography", @@ -2943,7 +3099,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 0.875rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2956,7 +3118,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-label-xs", + name: "--ds-label-xs", attributes: {}, path: [ "typography", @@ -2966,7 +3128,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2979,7 +3147,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-error_message-lg", + name: "--ds-error_message-lg", attributes: {}, path: [ "typography", @@ -2989,7 +3157,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3002,7 +3176,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-error_message-md", + name: "--ds-error_message-md", attributes: {}, path: [ "typography", @@ -3012,7 +3186,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3025,7 +3205,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-error_message-sm", + name: "--ds-error_message-sm", attributes: {}, path: [ "typography", @@ -3035,7 +3215,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3048,7 +3234,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-error_message-xs", + name: "--ds-error_message-xs", attributes: {}, path: [ "typography", diff --git a/apps/storefront/tokens/altinn/light.ts b/apps/storefront/tokens/altinn/light.ts index c65c8d6ebd..09fc0b46f4 100644 --- a/apps/storefront/tokens/altinn/light.ts +++ b/apps/storefront/tokens/altinn/light.ts @@ -2337,7 +2337,13 @@ export const color = [ export const typography = [ { $type: "typography", - $value: "500 3.75rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "3.75rem", + letterSpacing: "-1%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2350,7 +2356,7 @@ export const typography = [ letterSpacing: "{letter-spacing.1}" } }, - name: "--ds-typography-heading-2xl", + name: "--ds-heading-2xl", attributes: {}, path: [ "typography", @@ -2360,7 +2366,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 3rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "3rem", + letterSpacing: "-1%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2373,7 +2385,7 @@ export const typography = [ letterSpacing: "{letter-spacing.1}" } }, - name: "--ds-typography-heading-xl", + name: "--ds-heading-xl", attributes: {}, path: [ "typography", @@ -2383,7 +2395,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 2.25rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "2.25rem", + letterSpacing: "-0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2396,7 +2414,7 @@ export const typography = [ letterSpacing: "{letter-spacing.2}" } }, - name: "--ds-typography-heading-lg", + name: "--ds-heading-lg", attributes: {}, path: [ "typography", @@ -2406,7 +2424,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.875rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.875rem", + letterSpacing: "-0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2419,7 +2443,7 @@ export const typography = [ letterSpacing: "{letter-spacing.3}" } }, - name: "--ds-typography-heading-md", + name: "--ds-heading-md", attributes: {}, path: [ "typography", @@ -2429,7 +2453,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.5rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.5rem", + letterSpacing: "0%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2442,7 +2472,7 @@ export const typography = [ letterSpacing: "{letter-spacing.5}" } }, - name: "--ds-typography-heading-sm", + name: "--ds-heading-sm", attributes: {}, path: [ "typography", @@ -2452,7 +2482,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.3125rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2465,7 +2501,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-heading-xs", + name: "--ds-heading-xs", attributes: {}, path: [ "typography", @@ -2475,7 +2511,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.125rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2488,7 +2530,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-heading-2xs", + name: "--ds-heading-2xs", attributes: {}, path: [ "typography", @@ -2498,7 +2540,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.875rem/1.7 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.875rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2511,7 +2559,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-ingress-lg", + name: "--ds-ingress-lg", attributes: {}, path: [ "typography", @@ -2521,7 +2569,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.5rem/1.7 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.5rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2534,7 +2588,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-ingress-md", + name: "--ds-ingress-md", attributes: {}, path: [ "typography", @@ -2544,7 +2598,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.7 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.3125rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2557,7 +2617,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-ingress-sm", + name: "--ds-ingress-sm", attributes: {}, path: [ "typography", @@ -2567,7 +2627,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.7 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2580,7 +2646,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-ingress-xs", + name: "--ds-ingress-xs", attributes: {}, path: [ "typography", @@ -2590,7 +2656,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.5 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2603,7 +2675,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-lg", + name: "--ds-paragraph-lg", attributes: {}, path: [ "typography", @@ -2613,7 +2685,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.5 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2626,7 +2704,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-md", + name: "--ds-paragraph-md", attributes: {}, path: [ "typography", @@ -2636,7 +2714,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.5 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2649,7 +2733,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-sm", + name: "--ds-paragraph-sm", attributes: {}, path: [ "typography", @@ -2659,7 +2743,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.5 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2672,7 +2762,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-xs", + name: "--ds-paragraph-xs", attributes: {}, path: [ "typography", @@ -2682,7 +2772,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2695,7 +2791,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-short-lg", + name: "--ds-paragraph-short-lg", attributes: {}, path: [ "typography", @@ -2706,7 +2802,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2719,7 +2821,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-short-md", + name: "--ds-paragraph-short-md", attributes: {}, path: [ "typography", @@ -2730,7 +2832,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2743,7 +2851,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-short-sm", + name: "--ds-paragraph-short-sm", attributes: {}, path: [ "typography", @@ -2754,7 +2862,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2767,7 +2881,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-short-xs", + name: "--ds-paragraph-short-xs", attributes: {}, path: [ "typography", @@ -2778,7 +2892,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.7 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2791,7 +2911,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-long-lg", + name: "--ds-paragraph-long-lg", attributes: {}, path: [ "typography", @@ -2802,7 +2922,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.7 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2815,7 +2941,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-long-md", + name: "--ds-paragraph-long-md", attributes: {}, path: [ "typography", @@ -2826,7 +2952,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.7 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2839,7 +2971,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-long-sm", + name: "--ds-paragraph-long-sm", attributes: {}, path: [ "typography", @@ -2850,7 +2982,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.7 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2863,7 +3001,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-long-xs", + name: "--ds-paragraph-long-xs", attributes: {}, path: [ "typography", @@ -2874,7 +3012,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.3125rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2887,7 +3031,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-label-lg", + name: "--ds-label-lg", attributes: {}, path: [ "typography", @@ -2897,7 +3041,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.125rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2910,7 +3060,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-label-md", + name: "--ds-label-md", attributes: {}, path: [ "typography", @@ -2920,7 +3070,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2933,7 +3089,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-label-sm", + name: "--ds-label-sm", attributes: {}, path: [ "typography", @@ -2943,7 +3099,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 0.875rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2956,7 +3118,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-label-xs", + name: "--ds-label-xs", attributes: {}, path: [ "typography", @@ -2966,7 +3128,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2979,7 +3147,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-error_message-lg", + name: "--ds-error_message-lg", attributes: {}, path: [ "typography", @@ -2989,7 +3157,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3002,7 +3176,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-error_message-md", + name: "--ds-error_message-md", attributes: {}, path: [ "typography", @@ -3012,7 +3186,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3025,7 +3205,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-error_message-sm", + name: "--ds-error_message-sm", attributes: {}, path: [ "typography", @@ -3035,7 +3215,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.3 'Helvetica Neue'", + $value: { + fontFamily: "Helvetica Neue", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3048,7 +3234,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-error_message-xs", + name: "--ds-error_message-xs", attributes: {}, path: [ "typography", diff --git a/apps/storefront/tokens/digdir/dark.ts b/apps/storefront/tokens/digdir/dark.ts index e586d58beb..912ce5341e 100644 --- a/apps/storefront/tokens/digdir/dark.ts +++ b/apps/storefront/tokens/digdir/dark.ts @@ -2337,7 +2337,13 @@ export const color = [ export const typography = [ { $type: "typography", - $value: "500 3.75rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "3.75rem", + letterSpacing: "-1%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2350,7 +2356,7 @@ export const typography = [ letterSpacing: "{letter-spacing.1}" } }, - name: "--ds-typography-heading-2xl", + name: "--ds-heading-2xl", attributes: {}, path: [ "typography", @@ -2360,7 +2366,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 3rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "3rem", + letterSpacing: "-1%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2373,7 +2385,7 @@ export const typography = [ letterSpacing: "{letter-spacing.1}" } }, - name: "--ds-typography-heading-xl", + name: "--ds-heading-xl", attributes: {}, path: [ "typography", @@ -2383,7 +2395,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 2.25rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "2.25rem", + letterSpacing: "-0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2396,7 +2414,7 @@ export const typography = [ letterSpacing: "{letter-spacing.2}" } }, - name: "--ds-typography-heading-lg", + name: "--ds-heading-lg", attributes: {}, path: [ "typography", @@ -2406,7 +2424,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.875rem", + letterSpacing: "-0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2419,7 +2443,7 @@ export const typography = [ letterSpacing: "{letter-spacing.3}" } }, - name: "--ds-typography-heading-md", + name: "--ds-heading-md", attributes: {}, path: [ "typography", @@ -2429,7 +2453,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.5rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.5rem", + letterSpacing: "0%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2442,7 +2472,7 @@ export const typography = [ letterSpacing: "{letter-spacing.5}" } }, - name: "--ds-typography-heading-sm", + name: "--ds-heading-sm", attributes: {}, path: [ "typography", @@ -2452,7 +2482,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2465,7 +2501,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-heading-xs", + name: "--ds-heading-xs", attributes: {}, path: [ "typography", @@ -2475,7 +2511,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2488,7 +2530,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-heading-2xs", + name: "--ds-heading-2xs", attributes: {}, path: [ "typography", @@ -2498,7 +2540,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.875rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.875rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2511,7 +2559,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-ingress-lg", + name: "--ds-ingress-lg", attributes: {}, path: [ "typography", @@ -2521,7 +2569,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.5rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.5rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2534,7 +2588,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-ingress-md", + name: "--ds-ingress-md", attributes: {}, path: [ "typography", @@ -2544,7 +2598,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.3125rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2557,7 +2617,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-ingress-sm", + name: "--ds-ingress-sm", attributes: {}, path: [ "typography", @@ -2567,7 +2627,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2580,7 +2646,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-ingress-xs", + name: "--ds-ingress-xs", attributes: {}, path: [ "typography", @@ -2590,7 +2656,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2603,7 +2675,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-lg", + name: "--ds-paragraph-lg", attributes: {}, path: [ "typography", @@ -2613,7 +2685,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2626,7 +2704,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-md", + name: "--ds-paragraph-md", attributes: {}, path: [ "typography", @@ -2636,7 +2714,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2649,7 +2733,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-sm", + name: "--ds-paragraph-sm", attributes: {}, path: [ "typography", @@ -2659,7 +2743,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2672,7 +2762,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-xs", + name: "--ds-paragraph-xs", attributes: {}, path: [ "typography", @@ -2682,7 +2772,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2695,7 +2791,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-short-lg", + name: "--ds-paragraph-short-lg", attributes: {}, path: [ "typography", @@ -2706,7 +2802,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2719,7 +2821,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-short-md", + name: "--ds-paragraph-short-md", attributes: {}, path: [ "typography", @@ -2730,7 +2832,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2743,7 +2851,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-short-sm", + name: "--ds-paragraph-short-sm", attributes: {}, path: [ "typography", @@ -2754,7 +2862,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2767,7 +2881,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-short-xs", + name: "--ds-paragraph-short-xs", attributes: {}, path: [ "typography", @@ -2778,7 +2892,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2791,7 +2911,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-long-lg", + name: "--ds-paragraph-long-lg", attributes: {}, path: [ "typography", @@ -2802,7 +2922,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2815,7 +2941,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-long-md", + name: "--ds-paragraph-long-md", attributes: {}, path: [ "typography", @@ -2826,7 +2952,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2839,7 +2971,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-long-sm", + name: "--ds-paragraph-long-sm", attributes: {}, path: [ "typography", @@ -2850,7 +2982,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2863,7 +3001,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-long-xs", + name: "--ds-paragraph-long-xs", attributes: {}, path: [ "typography", @@ -2874,7 +3012,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2887,7 +3031,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-label-lg", + name: "--ds-label-lg", attributes: {}, path: [ "typography", @@ -2897,7 +3041,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2910,7 +3060,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-label-md", + name: "--ds-label-md", attributes: {}, path: [ "typography", @@ -2920,7 +3070,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2933,7 +3089,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-label-sm", + name: "--ds-label-sm", attributes: {}, path: [ "typography", @@ -2943,7 +3099,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 0.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2956,7 +3118,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-label-xs", + name: "--ds-label-xs", attributes: {}, path: [ "typography", @@ -2966,7 +3128,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2979,7 +3147,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-error_message-lg", + name: "--ds-error_message-lg", attributes: {}, path: [ "typography", @@ -2989,7 +3157,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3002,7 +3176,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-error_message-md", + name: "--ds-error_message-md", attributes: {}, path: [ "typography", @@ -3012,7 +3186,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3025,7 +3205,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-error_message-sm", + name: "--ds-error_message-sm", attributes: {}, path: [ "typography", @@ -3035,7 +3215,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3048,7 +3234,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-error_message-xs", + name: "--ds-error_message-xs", attributes: {}, path: [ "typography", diff --git a/apps/storefront/tokens/digdir/light.ts b/apps/storefront/tokens/digdir/light.ts index bc406ca55b..6dd47a9a29 100644 --- a/apps/storefront/tokens/digdir/light.ts +++ b/apps/storefront/tokens/digdir/light.ts @@ -2337,7 +2337,13 @@ export const color = [ export const typography = [ { $type: "typography", - $value: "500 3.75rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "3.75rem", + letterSpacing: "-1%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2350,7 +2356,7 @@ export const typography = [ letterSpacing: "{letter-spacing.1}" } }, - name: "--ds-typography-heading-2xl", + name: "--ds-heading-2xl", attributes: {}, path: [ "typography", @@ -2360,7 +2366,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 3rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "3rem", + letterSpacing: "-1%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2373,7 +2385,7 @@ export const typography = [ letterSpacing: "{letter-spacing.1}" } }, - name: "--ds-typography-heading-xl", + name: "--ds-heading-xl", attributes: {}, path: [ "typography", @@ -2383,7 +2395,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 2.25rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "2.25rem", + letterSpacing: "-0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2396,7 +2414,7 @@ export const typography = [ letterSpacing: "{letter-spacing.2}" } }, - name: "--ds-typography-heading-lg", + name: "--ds-heading-lg", attributes: {}, path: [ "typography", @@ -2406,7 +2424,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.875rem", + letterSpacing: "-0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2419,7 +2443,7 @@ export const typography = [ letterSpacing: "{letter-spacing.3}" } }, - name: "--ds-typography-heading-md", + name: "--ds-heading-md", attributes: {}, path: [ "typography", @@ -2429,7 +2453,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.5rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.5rem", + letterSpacing: "0%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2442,7 +2472,7 @@ export const typography = [ letterSpacing: "{letter-spacing.5}" } }, - name: "--ds-typography-heading-sm", + name: "--ds-heading-sm", attributes: {}, path: [ "typography", @@ -2452,7 +2482,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2465,7 +2501,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-heading-xs", + name: "--ds-heading-xs", attributes: {}, path: [ "typography", @@ -2475,7 +2511,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2488,7 +2530,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-heading-2xs", + name: "--ds-heading-2xs", attributes: {}, path: [ "typography", @@ -2498,7 +2540,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.875rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.875rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2511,7 +2559,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-ingress-lg", + name: "--ds-ingress-lg", attributes: {}, path: [ "typography", @@ -2521,7 +2569,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.5rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.5rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2534,7 +2588,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-ingress-md", + name: "--ds-ingress-md", attributes: {}, path: [ "typography", @@ -2544,7 +2598,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.3125rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2557,7 +2617,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-ingress-sm", + name: "--ds-ingress-sm", attributes: {}, path: [ "typography", @@ -2567,7 +2627,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2580,7 +2646,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-ingress-xs", + name: "--ds-ingress-xs", attributes: {}, path: [ "typography", @@ -2590,7 +2656,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2603,7 +2675,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-lg", + name: "--ds-paragraph-lg", attributes: {}, path: [ "typography", @@ -2613,7 +2685,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2626,7 +2704,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-md", + name: "--ds-paragraph-md", attributes: {}, path: [ "typography", @@ -2636,7 +2714,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2649,7 +2733,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-sm", + name: "--ds-paragraph-sm", attributes: {}, path: [ "typography", @@ -2659,7 +2743,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2672,7 +2762,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-xs", + name: "--ds-paragraph-xs", attributes: {}, path: [ "typography", @@ -2682,7 +2772,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2695,7 +2791,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-short-lg", + name: "--ds-paragraph-short-lg", attributes: {}, path: [ "typography", @@ -2706,7 +2802,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2719,7 +2821,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-short-md", + name: "--ds-paragraph-short-md", attributes: {}, path: [ "typography", @@ -2730,7 +2832,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2743,7 +2851,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-short-sm", + name: "--ds-paragraph-short-sm", attributes: {}, path: [ "typography", @@ -2754,7 +2862,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2767,7 +2881,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-short-xs", + name: "--ds-paragraph-short-xs", attributes: {}, path: [ "typography", @@ -2778,7 +2892,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2791,7 +2911,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-long-lg", + name: "--ds-paragraph-long-lg", attributes: {}, path: [ "typography", @@ -2802,7 +2922,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2815,7 +2941,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-long-md", + name: "--ds-paragraph-long-md", attributes: {}, path: [ "typography", @@ -2826,7 +2952,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2839,7 +2971,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-long-sm", + name: "--ds-paragraph-long-sm", attributes: {}, path: [ "typography", @@ -2850,7 +2982,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2863,7 +3001,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-long-xs", + name: "--ds-paragraph-long-xs", attributes: {}, path: [ "typography", @@ -2874,7 +3012,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2887,7 +3031,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-label-lg", + name: "--ds-label-lg", attributes: {}, path: [ "typography", @@ -2897,7 +3041,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2910,7 +3060,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-label-md", + name: "--ds-label-md", attributes: {}, path: [ "typography", @@ -2920,7 +3070,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2933,7 +3089,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-label-sm", + name: "--ds-label-sm", attributes: {}, path: [ "typography", @@ -2943,7 +3099,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 0.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2956,7 +3118,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-label-xs", + name: "--ds-label-xs", attributes: {}, path: [ "typography", @@ -2966,7 +3128,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2979,7 +3147,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-error_message-lg", + name: "--ds-error_message-lg", attributes: {}, path: [ "typography", @@ -2989,7 +3157,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3002,7 +3176,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-error_message-md", + name: "--ds-error_message-md", attributes: {}, path: [ "typography", @@ -3012,7 +3186,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3025,7 +3205,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-error_message-sm", + name: "--ds-error_message-sm", attributes: {}, path: [ "typography", @@ -3035,7 +3215,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3048,7 +3234,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-error_message-xs", + name: "--ds-error_message-xs", attributes: {}, path: [ "typography", diff --git a/apps/storefront/tokens/portal/dark.ts b/apps/storefront/tokens/portal/dark.ts index ce649fd212..25b89a3727 100644 --- a/apps/storefront/tokens/portal/dark.ts +++ b/apps/storefront/tokens/portal/dark.ts @@ -2337,7 +2337,13 @@ export const color = [ export const typography = [ { $type: "typography", - $value: "500 3.75rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "3.75rem", + letterSpacing: "-1%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2350,7 +2356,7 @@ export const typography = [ letterSpacing: "{letter-spacing.1}" } }, - name: "--ds-typography-heading-2xl", + name: "--ds-heading-2xl", attributes: {}, path: [ "typography", @@ -2360,7 +2366,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 3rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "3rem", + letterSpacing: "-1%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2373,7 +2385,7 @@ export const typography = [ letterSpacing: "{letter-spacing.1}" } }, - name: "--ds-typography-heading-xl", + name: "--ds-heading-xl", attributes: {}, path: [ "typography", @@ -2383,7 +2395,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 2.25rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "2.25rem", + letterSpacing: "-0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2396,7 +2414,7 @@ export const typography = [ letterSpacing: "{letter-spacing.2}" } }, - name: "--ds-typography-heading-lg", + name: "--ds-heading-lg", attributes: {}, path: [ "typography", @@ -2406,7 +2424,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.875rem", + letterSpacing: "-0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2419,7 +2443,7 @@ export const typography = [ letterSpacing: "{letter-spacing.3}" } }, - name: "--ds-typography-heading-md", + name: "--ds-heading-md", attributes: {}, path: [ "typography", @@ -2429,7 +2453,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.5rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.5rem", + letterSpacing: "0%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2442,7 +2472,7 @@ export const typography = [ letterSpacing: "{letter-spacing.5}" } }, - name: "--ds-typography-heading-sm", + name: "--ds-heading-sm", attributes: {}, path: [ "typography", @@ -2452,7 +2482,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2465,7 +2501,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-heading-xs", + name: "--ds-heading-xs", attributes: {}, path: [ "typography", @@ -2475,7 +2511,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2488,7 +2530,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-heading-2xs", + name: "--ds-heading-2xs", attributes: {}, path: [ "typography", @@ -2498,7 +2540,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.875rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.875rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2511,7 +2559,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-ingress-lg", + name: "--ds-ingress-lg", attributes: {}, path: [ "typography", @@ -2521,7 +2569,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.5rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.5rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2534,7 +2588,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-ingress-md", + name: "--ds-ingress-md", attributes: {}, path: [ "typography", @@ -2544,7 +2598,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.3125rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2557,7 +2617,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-ingress-sm", + name: "--ds-ingress-sm", attributes: {}, path: [ "typography", @@ -2567,7 +2627,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2580,7 +2646,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-ingress-xs", + name: "--ds-ingress-xs", attributes: {}, path: [ "typography", @@ -2590,7 +2656,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2603,7 +2675,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-lg", + name: "--ds-paragraph-lg", attributes: {}, path: [ "typography", @@ -2613,7 +2685,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2626,7 +2704,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-md", + name: "--ds-paragraph-md", attributes: {}, path: [ "typography", @@ -2636,7 +2714,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2649,7 +2733,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-sm", + name: "--ds-paragraph-sm", attributes: {}, path: [ "typography", @@ -2659,7 +2743,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2672,7 +2762,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-xs", + name: "--ds-paragraph-xs", attributes: {}, path: [ "typography", @@ -2682,7 +2772,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2695,7 +2791,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-short-lg", + name: "--ds-paragraph-short-lg", attributes: {}, path: [ "typography", @@ -2706,7 +2802,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2719,7 +2821,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-short-md", + name: "--ds-paragraph-short-md", attributes: {}, path: [ "typography", @@ -2730,7 +2832,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2743,7 +2851,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-short-sm", + name: "--ds-paragraph-short-sm", attributes: {}, path: [ "typography", @@ -2754,7 +2862,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2767,7 +2881,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-short-xs", + name: "--ds-paragraph-short-xs", attributes: {}, path: [ "typography", @@ -2778,7 +2892,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2791,7 +2911,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-long-lg", + name: "--ds-paragraph-long-lg", attributes: {}, path: [ "typography", @@ -2802,7 +2922,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2815,7 +2941,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-long-md", + name: "--ds-paragraph-long-md", attributes: {}, path: [ "typography", @@ -2826,7 +2952,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2839,7 +2971,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-long-sm", + name: "--ds-paragraph-long-sm", attributes: {}, path: [ "typography", @@ -2850,7 +2982,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2863,7 +3001,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-long-xs", + name: "--ds-paragraph-long-xs", attributes: {}, path: [ "typography", @@ -2874,7 +3012,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2887,7 +3031,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-label-lg", + name: "--ds-label-lg", attributes: {}, path: [ "typography", @@ -2897,7 +3041,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2910,7 +3060,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-label-md", + name: "--ds-label-md", attributes: {}, path: [ "typography", @@ -2920,7 +3070,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2933,7 +3089,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-label-sm", + name: "--ds-label-sm", attributes: {}, path: [ "typography", @@ -2943,7 +3099,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 0.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2956,7 +3118,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-label-xs", + name: "--ds-label-xs", attributes: {}, path: [ "typography", @@ -2966,7 +3128,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2979,7 +3147,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-error_message-lg", + name: "--ds-error_message-lg", attributes: {}, path: [ "typography", @@ -2989,7 +3157,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3002,7 +3176,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-error_message-md", + name: "--ds-error_message-md", attributes: {}, path: [ "typography", @@ -3012,7 +3186,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3025,7 +3205,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-error_message-sm", + name: "--ds-error_message-sm", attributes: {}, path: [ "typography", @@ -3035,7 +3215,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3048,7 +3234,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-error_message-xs", + name: "--ds-error_message-xs", attributes: {}, path: [ "typography", diff --git a/apps/storefront/tokens/portal/light.ts b/apps/storefront/tokens/portal/light.ts index 83577ce19f..57fa36f25a 100644 --- a/apps/storefront/tokens/portal/light.ts +++ b/apps/storefront/tokens/portal/light.ts @@ -2337,7 +2337,13 @@ export const color = [ export const typography = [ { $type: "typography", - $value: "500 3.75rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "3.75rem", + letterSpacing: "-1%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2350,7 +2356,7 @@ export const typography = [ letterSpacing: "{letter-spacing.1}" } }, - name: "--ds-typography-heading-2xl", + name: "--ds-heading-2xl", attributes: {}, path: [ "typography", @@ -2360,7 +2366,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 3rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "3rem", + letterSpacing: "-1%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2373,7 +2385,7 @@ export const typography = [ letterSpacing: "{letter-spacing.1}" } }, - name: "--ds-typography-heading-xl", + name: "--ds-heading-xl", attributes: {}, path: [ "typography", @@ -2383,7 +2395,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 2.25rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "2.25rem", + letterSpacing: "-0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2396,7 +2414,7 @@ export const typography = [ letterSpacing: "{letter-spacing.2}" } }, - name: "--ds-typography-heading-lg", + name: "--ds-heading-lg", attributes: {}, path: [ "typography", @@ -2406,7 +2424,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.875rem", + letterSpacing: "-0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2419,7 +2443,7 @@ export const typography = [ letterSpacing: "{letter-spacing.3}" } }, - name: "--ds-typography-heading-md", + name: "--ds-heading-md", attributes: {}, path: [ "typography", @@ -2429,7 +2453,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.5rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.5rem", + letterSpacing: "0%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2442,7 +2472,7 @@ export const typography = [ letterSpacing: "{letter-spacing.5}" } }, - name: "--ds-typography-heading-sm", + name: "--ds-heading-sm", attributes: {}, path: [ "typography", @@ -2452,7 +2482,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2465,7 +2501,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-heading-xs", + name: "--ds-heading-xs", attributes: {}, path: [ "typography", @@ -2475,7 +2511,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2488,7 +2530,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-heading-2xs", + name: "--ds-heading-2xs", attributes: {}, path: [ "typography", @@ -2498,7 +2540,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.875rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.875rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2511,7 +2559,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-ingress-lg", + name: "--ds-ingress-lg", attributes: {}, path: [ "typography", @@ -2521,7 +2569,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.5rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.5rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2534,7 +2588,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-ingress-md", + name: "--ds-ingress-md", attributes: {}, path: [ "typography", @@ -2544,7 +2598,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.3125rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2557,7 +2617,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-ingress-sm", + name: "--ds-ingress-sm", attributes: {}, path: [ "typography", @@ -2567,7 +2627,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2580,7 +2646,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-ingress-xs", + name: "--ds-ingress-xs", attributes: {}, path: [ "typography", @@ -2590,7 +2656,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2603,7 +2675,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-lg", + name: "--ds-paragraph-lg", attributes: {}, path: [ "typography", @@ -2613,7 +2685,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2626,7 +2704,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-md", + name: "--ds-paragraph-md", attributes: {}, path: [ "typography", @@ -2636,7 +2714,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2649,7 +2733,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-sm", + name: "--ds-paragraph-sm", attributes: {}, path: [ "typography", @@ -2659,7 +2743,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2672,7 +2762,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-xs", + name: "--ds-paragraph-xs", attributes: {}, path: [ "typography", @@ -2682,7 +2772,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2695,7 +2791,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-short-lg", + name: "--ds-paragraph-short-lg", attributes: {}, path: [ "typography", @@ -2706,7 +2802,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2719,7 +2821,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-short-md", + name: "--ds-paragraph-short-md", attributes: {}, path: [ "typography", @@ -2730,7 +2832,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2743,7 +2851,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-short-sm", + name: "--ds-paragraph-short-sm", attributes: {}, path: [ "typography", @@ -2754,7 +2862,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2767,7 +2881,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-short-xs", + name: "--ds-paragraph-short-xs", attributes: {}, path: [ "typography", @@ -2778,7 +2892,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2791,7 +2911,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-long-lg", + name: "--ds-paragraph-long-lg", attributes: {}, path: [ "typography", @@ -2802,7 +2922,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2815,7 +2941,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-long-md", + name: "--ds-paragraph-long-md", attributes: {}, path: [ "typography", @@ -2826,7 +2952,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2839,7 +2971,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-long-sm", + name: "--ds-paragraph-long-sm", attributes: {}, path: [ "typography", @@ -2850,7 +2982,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2863,7 +3001,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-long-xs", + name: "--ds-paragraph-long-xs", attributes: {}, path: [ "typography", @@ -2874,7 +3012,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2887,7 +3031,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-label-lg", + name: "--ds-label-lg", attributes: {}, path: [ "typography", @@ -2897,7 +3041,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2910,7 +3060,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-label-md", + name: "--ds-label-md", attributes: {}, path: [ "typography", @@ -2920,7 +3070,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2933,7 +3089,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-label-sm", + name: "--ds-label-sm", attributes: {}, path: [ "typography", @@ -2943,7 +3099,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 0.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2956,7 +3118,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-label-xs", + name: "--ds-label-xs", attributes: {}, path: [ "typography", @@ -2966,7 +3128,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2979,7 +3147,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-error_message-lg", + name: "--ds-error_message-lg", attributes: {}, path: [ "typography", @@ -2989,7 +3157,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3002,7 +3176,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-error_message-md", + name: "--ds-error_message-md", attributes: {}, path: [ "typography", @@ -3012,7 +3186,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3025,7 +3205,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-error_message-sm", + name: "--ds-error_message-sm", attributes: {}, path: [ "typography", @@ -3035,7 +3215,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3048,7 +3234,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-error_message-xs", + name: "--ds-error_message-xs", attributes: {}, path: [ "typography", diff --git a/apps/storefront/tokens/uutilsynet/dark.ts b/apps/storefront/tokens/uutilsynet/dark.ts index e76e4faf4c..f81a95e386 100644 --- a/apps/storefront/tokens/uutilsynet/dark.ts +++ b/apps/storefront/tokens/uutilsynet/dark.ts @@ -2337,7 +2337,13 @@ export const color = [ export const typography = [ { $type: "typography", - $value: "500 3.75rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "3.75rem", + letterSpacing: "-1%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2350,7 +2356,7 @@ export const typography = [ letterSpacing: "{letter-spacing.1}" } }, - name: "--ds-typography-heading-2xl", + name: "--ds-heading-2xl", attributes: {}, path: [ "typography", @@ -2360,7 +2366,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 3rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "3rem", + letterSpacing: "-1%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2373,7 +2385,7 @@ export const typography = [ letterSpacing: "{letter-spacing.1}" } }, - name: "--ds-typography-heading-xl", + name: "--ds-heading-xl", attributes: {}, path: [ "typography", @@ -2383,7 +2395,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 2.25rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "2.25rem", + letterSpacing: "-0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2396,7 +2414,7 @@ export const typography = [ letterSpacing: "{letter-spacing.2}" } }, - name: "--ds-typography-heading-lg", + name: "--ds-heading-lg", attributes: {}, path: [ "typography", @@ -2406,7 +2424,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.875rem", + letterSpacing: "-0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2419,7 +2443,7 @@ export const typography = [ letterSpacing: "{letter-spacing.3}" } }, - name: "--ds-typography-heading-md", + name: "--ds-heading-md", attributes: {}, path: [ "typography", @@ -2429,7 +2453,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.5rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.5rem", + letterSpacing: "0%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2442,7 +2472,7 @@ export const typography = [ letterSpacing: "{letter-spacing.5}" } }, - name: "--ds-typography-heading-sm", + name: "--ds-heading-sm", attributes: {}, path: [ "typography", @@ -2452,7 +2482,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2465,7 +2501,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-heading-xs", + name: "--ds-heading-xs", attributes: {}, path: [ "typography", @@ -2475,7 +2511,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2488,7 +2530,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-heading-2xs", + name: "--ds-heading-2xs", attributes: {}, path: [ "typography", @@ -2498,7 +2540,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.875rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.875rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2511,7 +2559,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-ingress-lg", + name: "--ds-ingress-lg", attributes: {}, path: [ "typography", @@ -2521,7 +2569,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.5rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.5rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2534,7 +2588,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-ingress-md", + name: "--ds-ingress-md", attributes: {}, path: [ "typography", @@ -2544,7 +2598,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.3125rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2557,7 +2617,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-ingress-sm", + name: "--ds-ingress-sm", attributes: {}, path: [ "typography", @@ -2567,7 +2627,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2580,7 +2646,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-ingress-xs", + name: "--ds-ingress-xs", attributes: {}, path: [ "typography", @@ -2590,7 +2656,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2603,7 +2675,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-lg", + name: "--ds-paragraph-lg", attributes: {}, path: [ "typography", @@ -2613,7 +2685,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2626,7 +2704,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-md", + name: "--ds-paragraph-md", attributes: {}, path: [ "typography", @@ -2636,7 +2714,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2649,7 +2733,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-sm", + name: "--ds-paragraph-sm", attributes: {}, path: [ "typography", @@ -2659,7 +2743,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2672,7 +2762,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-xs", + name: "--ds-paragraph-xs", attributes: {}, path: [ "typography", @@ -2682,7 +2772,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2695,7 +2791,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-short-lg", + name: "--ds-paragraph-short-lg", attributes: {}, path: [ "typography", @@ -2706,7 +2802,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2719,7 +2821,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-short-md", + name: "--ds-paragraph-short-md", attributes: {}, path: [ "typography", @@ -2730,7 +2832,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2743,7 +2851,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-short-sm", + name: "--ds-paragraph-short-sm", attributes: {}, path: [ "typography", @@ -2754,7 +2862,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2767,7 +2881,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-short-xs", + name: "--ds-paragraph-short-xs", attributes: {}, path: [ "typography", @@ -2778,7 +2892,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2791,7 +2911,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-long-lg", + name: "--ds-paragraph-long-lg", attributes: {}, path: [ "typography", @@ -2802,7 +2922,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2815,7 +2941,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-long-md", + name: "--ds-paragraph-long-md", attributes: {}, path: [ "typography", @@ -2826,7 +2952,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2839,7 +2971,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-long-sm", + name: "--ds-paragraph-long-sm", attributes: {}, path: [ "typography", @@ -2850,7 +2982,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2863,7 +3001,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-long-xs", + name: "--ds-paragraph-long-xs", attributes: {}, path: [ "typography", @@ -2874,7 +3012,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2887,7 +3031,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-label-lg", + name: "--ds-label-lg", attributes: {}, path: [ "typography", @@ -2897,7 +3041,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2910,7 +3060,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-label-md", + name: "--ds-label-md", attributes: {}, path: [ "typography", @@ -2920,7 +3070,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2933,7 +3089,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-label-sm", + name: "--ds-label-sm", attributes: {}, path: [ "typography", @@ -2943,7 +3099,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 0.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2956,7 +3118,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-label-xs", + name: "--ds-label-xs", attributes: {}, path: [ "typography", @@ -2966,7 +3128,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2979,7 +3147,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-error_message-lg", + name: "--ds-error_message-lg", attributes: {}, path: [ "typography", @@ -2989,7 +3157,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3002,7 +3176,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-error_message-md", + name: "--ds-error_message-md", attributes: {}, path: [ "typography", @@ -3012,7 +3186,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3025,7 +3205,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-error_message-sm", + name: "--ds-error_message-sm", attributes: {}, path: [ "typography", @@ -3035,7 +3215,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3048,7 +3234,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-error_message-xs", + name: "--ds-error_message-xs", attributes: {}, path: [ "typography", diff --git a/apps/storefront/tokens/uutilsynet/light.ts b/apps/storefront/tokens/uutilsynet/light.ts index 4b399b9220..aef8423974 100644 --- a/apps/storefront/tokens/uutilsynet/light.ts +++ b/apps/storefront/tokens/uutilsynet/light.ts @@ -2337,7 +2337,13 @@ export const color = [ export const typography = [ { $type: "typography", - $value: "500 3.75rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "3.75rem", + letterSpacing: "-1%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2350,7 +2356,7 @@ export const typography = [ letterSpacing: "{letter-spacing.1}" } }, - name: "--ds-typography-heading-2xl", + name: "--ds-heading-2xl", attributes: {}, path: [ "typography", @@ -2360,7 +2366,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 3rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "3rem", + letterSpacing: "-1%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2373,7 +2385,7 @@ export const typography = [ letterSpacing: "{letter-spacing.1}" } }, - name: "--ds-typography-heading-xl", + name: "--ds-heading-xl", attributes: {}, path: [ "typography", @@ -2383,7 +2395,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 2.25rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "2.25rem", + letterSpacing: "-0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2396,7 +2414,7 @@ export const typography = [ letterSpacing: "{letter-spacing.2}" } }, - name: "--ds-typography-heading-lg", + name: "--ds-heading-lg", attributes: {}, path: [ "typography", @@ -2406,7 +2424,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.875rem", + letterSpacing: "-0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2419,7 +2443,7 @@ export const typography = [ letterSpacing: "{letter-spacing.3}" } }, - name: "--ds-typography-heading-md", + name: "--ds-heading-md", attributes: {}, path: [ "typography", @@ -2429,7 +2453,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.5rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.5rem", + letterSpacing: "0%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2442,7 +2472,7 @@ export const typography = [ letterSpacing: "{letter-spacing.5}" } }, - name: "--ds-typography-heading-sm", + name: "--ds-heading-sm", attributes: {}, path: [ "typography", @@ -2452,7 +2482,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2465,7 +2501,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-heading-xs", + name: "--ds-heading-xs", attributes: {}, path: [ "typography", @@ -2475,7 +2511,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2488,7 +2530,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-heading-2xs", + name: "--ds-heading-2xs", attributes: {}, path: [ "typography", @@ -2498,7 +2540,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.875rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.875rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2511,7 +2559,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-ingress-lg", + name: "--ds-ingress-lg", attributes: {}, path: [ "typography", @@ -2521,7 +2569,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.5rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.5rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2534,7 +2588,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-ingress-md", + name: "--ds-ingress-md", attributes: {}, path: [ "typography", @@ -2544,7 +2598,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.3125rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2557,7 +2617,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-ingress-sm", + name: "--ds-ingress-sm", attributes: {}, path: [ "typography", @@ -2567,7 +2627,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.125rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2580,7 +2646,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-ingress-xs", + name: "--ds-ingress-xs", attributes: {}, path: [ "typography", @@ -2590,7 +2656,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2603,7 +2675,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-lg", + name: "--ds-paragraph-lg", attributes: {}, path: [ "typography", @@ -2613,7 +2685,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2626,7 +2704,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-md", + name: "--ds-paragraph-md", attributes: {}, path: [ "typography", @@ -2636,7 +2714,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2649,7 +2733,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-sm", + name: "--ds-paragraph-sm", attributes: {}, path: [ "typography", @@ -2659,7 +2743,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.5 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.5", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2672,7 +2762,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-xs", + name: "--ds-paragraph-xs", attributes: {}, path: [ "typography", @@ -2682,7 +2772,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2695,7 +2791,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-short-lg", + name: "--ds-paragraph-short-lg", attributes: {}, path: [ "typography", @@ -2706,7 +2802,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2719,7 +2821,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-short-md", + name: "--ds-paragraph-short-md", attributes: {}, path: [ "typography", @@ -2730,7 +2832,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2743,7 +2851,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-short-sm", + name: "--ds-paragraph-short-sm", attributes: {}, path: [ "typography", @@ -2754,7 +2862,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2767,7 +2881,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-short-xs", + name: "--ds-paragraph-short-xs", attributes: {}, path: [ "typography", @@ -2778,7 +2892,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2791,7 +2911,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-long-lg", + name: "--ds-paragraph-long-lg", attributes: {}, path: [ "typography", @@ -2802,7 +2922,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2815,7 +2941,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-paragraph-long-md", + name: "--ds-paragraph-long-md", attributes: {}, path: [ "typography", @@ -2826,7 +2952,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2839,7 +2971,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-paragraph-long-sm", + name: "--ds-paragraph-long-sm", attributes: {}, path: [ "typography", @@ -2850,7 +2982,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.7 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.7", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2863,7 +3001,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-paragraph-long-xs", + name: "--ds-paragraph-long-xs", attributes: {}, path: [ "typography", @@ -2874,7 +3012,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2887,7 +3031,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-label-lg", + name: "--ds-label-lg", attributes: {}, path: [ "typography", @@ -2897,7 +3041,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2910,7 +3060,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-label-md", + name: "--ds-label-md", attributes: {}, path: [ "typography", @@ -2920,7 +3070,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 1rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2933,7 +3089,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-label-sm", + name: "--ds-label-sm", attributes: {}, path: [ "typography", @@ -2943,7 +3099,13 @@ export const typography = [ }, { $type: "typography", - $value: "500 0.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 500, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2956,7 +3118,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-label-xs", + name: "--ds-label-xs", attributes: {}, path: [ "typography", @@ -2966,7 +3128,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.3125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.3125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2979,7 +3147,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-error_message-lg", + name: "--ds-error_message-lg", attributes: {}, path: [ "typography", @@ -2989,7 +3157,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1.125rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1.125rem", + letterSpacing: "0.5%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3002,7 +3176,7 @@ export const typography = [ letterSpacing: "{letter-spacing.8}" } }, - name: "--ds-typography-error_message-md", + name: "--ds-error_message-md", attributes: {}, path: [ "typography", @@ -3012,7 +3186,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 1rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "1rem", + letterSpacing: "0.25%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3025,7 +3205,7 @@ export const typography = [ letterSpacing: "{letter-spacing.7}" } }, - name: "--ds-typography-error_message-sm", + name: "--ds-error_message-sm", attributes: {}, path: [ "typography", @@ -3035,7 +3215,13 @@ export const typography = [ }, { $type: "typography", - $value: "400 0.875rem/1.3 'Inter'", + $value: { + fontFamily: "Inter", + fontWeight: 400, + lineHeight: "1.3", + fontSize: "0.875rem", + letterSpacing: "0.15%" + }, filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3048,7 +3234,7 @@ export const typography = [ letterSpacing: "{letter-spacing.6}" } }, - name: "--ds-typography-error_message-xs", + name: "--ds-error_message-xs", attributes: {}, path: [ "typography", diff --git a/packages/cli/src/tokens/build.ts b/packages/cli/src/tokens/build.ts index 57be714aea..c4130e532f 100644 --- a/packages/cli/src/tokens/build.ts +++ b/packages/cli/src/tokens/build.ts @@ -46,7 +46,7 @@ export async function buildTokens(options: Options): Promise { const colorModeConfigs = getConfigs(configs.colorModeVariables, outPath, tokensDir, colormodeThemes); const semanticConfigs = getConfigs(configs.semanticVariables, outPath, tokensDir, semanticThemes); - const typographyConfigs = getConfigs(configs.typographyCSS, outPath, tokensDir, typographyThemes); + const typographyConfigs = getConfigs(configs.typographyVariables, outPath, tokensDir, typographyThemes); const storefrontConfigs = getConfigs(configs.typescriptTokens, storefrontOutDir, tokensDir, colormodeThemes); if (typographyConfigs.length > 0) { diff --git a/packages/cli/src/tokens/build/configs.ts b/packages/cli/src/tokens/build/configs.ts index ff87dfffb3..5d9a75db94 100644 --- a/packages/cli/src/tokens/build/configs.ts +++ b/packages/cli/src/tokens/build/configs.ts @@ -1,4 +1,4 @@ -import { register } from '@tokens-studio/sd-transforms'; +import { expandTypesMap, register } from '@tokens-studio/sd-transforms'; import type { ThemeObject } from '@tokens-studio/types'; import * as R from 'ramda'; import StyleDictionary from 'style-dictionary'; @@ -7,7 +7,7 @@ import { outputReferencesFilter } from 'style-dictionary/utils'; import * as formats from './formats/css.js'; import { jsTokens } from './formats/js-tokens.js'; -import { nameKebab, sizeRem, typographyShorthand } from './transformers.js'; +import { nameKebab, sizeRem, typographyName } from './transformers.js'; import { permutateThemes as permutateThemes_ } from './utils/permutateThemes.js'; import type { PermutatedThemes } from './utils/permutateThemes.js'; import { pathStartsWithOneOf, typeEquals } from './utils/utils.js'; @@ -25,7 +25,7 @@ const fileHeader = () => [`These files are generated from design tokens defind u StyleDictionary.registerTransform(sizeRem); StyleDictionary.registerTransform(nameKebab); -StyleDictionary.registerTransform(typographyShorthand); +StyleDictionary.registerTransform(typographyName); StyleDictionary.registerFormat(jsTokens); StyleDictionary.registerFormat(formats.colormode); @@ -38,7 +38,7 @@ const dsTransformers = [ 'ts/size/px', sizeRem.name, 'ts/typography/fontWeight', - typographyShorthand.name, + typographyName.name, 'ts/color/modifiers', 'ts/color/css/hexrgba', 'ts/size/lineheight', @@ -149,7 +149,7 @@ export const semanticVariables: GetConfig = ({ outPath, theme }) => { format: formats.semantic.name, filter: (token) => (!token.isSource || isCalculatedToken(token)) && - !typeEquals(['color', 'fontWeight', 'fontFamily'], token), + !typeEquals(['color', 'fontWeight', 'fontFamily', 'typography'], token), }, ], options: { @@ -200,7 +200,7 @@ export const typescriptTokens: GetConfig = ({ mode = 'unknown', outPath, theme } }; }; -export const typographyCSS: GetConfig = ({ outPath, theme, typography }) => { +export const typographyVariables: GetConfig = ({ outPath, theme, typography }) => { const selector = `${typography === 'primary' ? ':root, ' : ''}[data-ds-typography="${typography}"]`; const layer = `ds.theme.typography.${typography}`; @@ -208,6 +208,10 @@ export const typographyCSS: GetConfig = ({ outPath, theme, typography }) => { usesDtcg: true, log: { verbosity: 'silent' }, preprocessors: ['tokens-studio'], + expand: { + include: ['typography'], + typesMap: { ...expandTypesMap, typography: { ...expandTypesMap.typography, letterSpacing: 'dimension' } }, + }, platforms: { css: { prefix, @@ -216,7 +220,14 @@ export const typographyCSS: GetConfig = ({ outPath, theme, typography }) => { layer, buildPath: `${outPath}/${theme}/`, basePxFontSize, - transforms: [nameKebab.name, 'ts/size/px', sizeRem.name, 'ts/size/lineheight', 'ts/typography/fontWeight'], + transforms: [ + nameKebab.name, + 'ts/size/px', + sizeRem.name, + 'ts/size/lineheight', + 'ts/typography/fontWeight', + typographyName.name, + ], files: [ { destination: `typography/${typography}.css`, diff --git a/packages/cli/src/tokens/build/formats/css.ts b/packages/cli/src/tokens/build/formats/css.ts index 9cb48b618d..024013e982 100644 --- a/packages/cli/src/tokens/build/formats/css.ts +++ b/packages/cli/src/tokens/build/formats/css.ts @@ -31,9 +31,10 @@ export const colormode: Format = { usesDtcg, }); - const colorSchemeProperty = mode_ === 'dark' || mode_ === 'light' ? `color-scheme: ${mode_};\n` : ''; + const colorSchemeProperty = mode_ === 'dark' || mode_ === 'light' ? `\n color-scheme: ${mode_};\n` : ''; - const content = `{\n${allTokens.map(format).join('\n')}\n${colorSchemeProperty}}\n`; + const formattedTokens = dictionary.allTokens.map(format).join('\n'); + const content = `{\n${formattedTokens}\n${colorSchemeProperty}}\n`; const autoSelectorContent = ['light', 'dark'].includes(mode_) ? prefersColorScheme(mode_, content) : ''; const body = R.isNotNil(layer) ? `@layer ${layer} {\n${selector} ${content} ${autoSelectorContent}\n}\n` @@ -48,7 +49,6 @@ const calculatedVariable = R.pipe(R.split(/:(.*?);/g), (split) => `${split[0]}: export const semantic: Format = { name: 'ds/css-semantic', format: async ({ dictionary, file, options, platform }) => { - const { allTokens } = dictionary; const { outputReferences, usesDtcg } = options; const { selector, isCalculatedToken, layer } = platform; @@ -61,7 +61,7 @@ export const semantic: Format = { usesDtcg, }); - const formatTokens = R.map((token: TransformedToken) => { + const formattedTokens = R.map((token: TransformedToken) => { const originalValue = getValue(token.original); if ( @@ -75,50 +75,19 @@ export const semantic: Format = { } return format(token); - }); + }, dictionary.allTokens); - const formattedVariables = formatTokens(allTokens); - const content = `{\n${formattedVariables.join('\n')}\n}\n`; + const content = `{\n${formattedTokens.join('\n')}\n}\n`; const body = R.isNotNil(layer) ? `@layer ${layer} {\n${selector} ${content}\n}\n` : `${selector} ${content}\n`; return header + body; }, }; -type Typgraphy = { - fontWeight: string; - fontSize: string; - lineHeight: number; - fontFamily: string; -}; - -type ProcessedTokens = { variables: string[]; classes: string[] }; - -const sortByType = R.sortBy((token) => token?.$type === 'typography'); -const getVariableName = R.pipe( - R.split(':'), - R.head, - R.defaultTo(''), - R.trim, - (name) => `var(${name})`, -); - -const bemify = R.pipe( - (path: string[]) => { - const filteredPath = path.filter((p) => p !== 'typography'); - const withPrefix = R.concat([prefix], R.remove(0, 0, filteredPath)); - const [rest, last] = R.splitAt(-1, withPrefix); - - const className = `${rest.join('-')}--${R.head(last)}`; - return className; - }, - R.trim, - R.toLower, -); - -const classSelector = R.pipe(R.prop('path'), bemify); -const sortTypographyLast = R.sortWith([ - R.ascend((token) => (typeEquals('typography')(token) ? 1 : 0)), +// Predicate to filter tokens with .path array that includes both typography and fontFamily +const typographyFontFamilyPredicate = R.allPass([ + R.pathSatisfies(R.includes('typography'), ['path']), + R.pathSatisfies(R.includes('fontFamily'), ['path']), ]); export const typography: Format = { @@ -136,74 +105,13 @@ export const typography: Format = { usesDtcg, }); - const sortedTokens = sortTypographyLast(dictionary.allTokens); - - const formattedTokens = R.pipe( - sortByType, - R.reduce( - (acc, token) => { - if (typeEquals('fontweight', token)) { - const className = ` - .${classSelector(token)} { - font-weight: ${getValue(token)}; - }`; - - return Object.assign(acc, { - variables: [...acc.variables, format(token)], - classes: [...acc.classes, className], - }); - } - - if (typeEquals('lineheight', token)) { - const className = ` - .${classSelector(token)} { - line-height: ${getValue(token)}; - }`; - - return Object.assign(acc, { - variables: [...acc.variables, format(token)], - classes: [...acc.classes, className], - }); - } - - if (typeEquals('typography', token)) { - let references: TransformedToken[] = []; - try { - references = getReferences(getValue(token.original), dictionary.tokens); - } catch (error) { - console.error('Error getting references', error); - throw new Error(JSON.stringify(token, null, 2)); - } - const fontweight = R.find(typeEquals(['fontweight']))(references); - const lineheight = R.find(typeEquals(['lineheight']))(references); - const fontsize = R.find(typeEquals(['fontsize']))(references); - const letterSpacing = R.find(typeEquals(['dimension']))(references); - - const fontSizeVar = fontsize ? getVariableName(format(fontsize)) : null; - const fontWeightVar = fontweight ? getVariableName(format(fontweight)) : null; - const lineheightVar = lineheight ? getVariableName(format(lineheight)) : null; - const letterSpacingVar = letterSpacing ? getVariableName(format(letterSpacing)) : null; - - const className = ` - .${classSelector(token)} { - ${fontSizeVar ? `font-size: ${fontSizeVar};` : ''} - ${lineheightVar ? `line-height: ${lineheightVar};` : ''} - ${fontWeightVar ? `font-weight: ${fontWeightVar};` : ''} - ${letterSpacingVar ? `letter-spacing: ${letterSpacingVar};` : ''} - }`; - - return Object.assign(acc, { classes: [className, ...acc.classes] }); - } - - return Object.assign(acc, { variables: [...acc.variables, format(token)] }); - }, - { variables: [], classes: [] }, - ), - )(sortedTokens); - - const classes = formattedTokens.classes.join('\n'); - const variables = formattedTokens.variables.join('\n'); - const content = selector ? `${selector} {\n${variables}\n${classes}\n}` : classes; + console.log('dictionary.allTokens', dictionary.allTokens); + + const filteredTokens = R.reject(typographyFontFamilyPredicate, dictionary.allTokens); + + const formattedTokens = R.pipe(R.map(format), R.join('\n'))(filteredTokens); + + const content = selector ? `${selector} {\n${formattedTokens}\n}` : formattedTokens; const body = R.isNotNil(layer) ? `@layer ${layer} {\n${content}\n}` : content; return header + body; diff --git a/packages/cli/src/tokens/build/transformers.ts b/packages/cli/src/tokens/build/transformers.ts index f98b05a2c3..ab5f8844c7 100644 --- a/packages/cli/src/tokens/build/transformers.ts +++ b/packages/cli/src/tokens/build/transformers.ts @@ -44,20 +44,13 @@ export const nameKebab: Transform = { }, }; -type Typgraphy = { - fontWeight: string; - fontSize: string; - lineHeight: number; - fontFamily: string; -}; - -export const typographyShorthand: Transform = { - name: 'typography/shorthand', - type: 'value', +export const typographyName: Transform = { + name: 'name/typography', + type: 'name', transitive: true, - filter: (token) => typeEquals('typography', token), + // expanded tokens have different type so we match on path instead + filter: (token) => pathStartsWithOneOf(['typography'], token), transform: (token) => { - const typography = getValue(token); - return `${typography.fontWeight} ${typography.fontSize}/${typography.lineHeight} '${typography.fontFamily}'`; + return token.name.replace('-typography', ''); }, }; diff --git a/packages/css/baseline/typography.css b/packages/css/baseline/typography.css new file mode 100644 index 0000000000..a9e96c4557 --- /dev/null +++ b/packages/css/baseline/typography.css @@ -0,0 +1,433 @@ +/** Heading */ +.ds-heading { + --dsc-bottom-spacing: var(--ds-spacing-6); + + margin: 0; + color: var(--ds-color-neutral-text-default); +} + +.ds-heading--spacing { + margin-bottom: var(--dsc-bottom-spacing); +} + +.ds-heading--2xs { + --dsc-bottom-spacing: var(--ds-spacing-1); + + font-weight: var(--ds-heading-2xs-font-weight); + line-height: var(--ds-heading-2xs-line-height); + font-size: var(--ds-heading-2xs-font-size); + letter-spacing: var(--ds-heading-2xs-letter-spacing); +} + +.ds-heading--xs { + --dsc-bottom-spacing: var(--ds-spacing-2); + + font-weight: var(--ds-heading-xs-font-weight); + line-height: var(--ds-heading-xs-line-height); + font-size: var(--ds-heading-xs-font-size); + letter-spacing: var(--ds-heading-xs-letter-spacing); +} + +.ds-heading--sm { + --dsc-bottom-spacing: var(--ds-spacing-3); + + font-weight: var(--ds-heading-sm-font-weight); + line-height: var(--ds-heading-sm-line-height); + font-size: var(--ds-heading-sm-font-size); + letter-spacing: var(--ds-heading-sm-letter-spacing); +} + +.ds-heading--md { + --dsc-bottom-spacing: var(--ds-spacing-4); + + font-weight: var(--ds-heading-md-font-weight); + line-height: var(--ds-heading-md-line-height); + font-size: var (--ds-heading-md-font-size); + letter-spacing: var(--ds-heading-md-letter-spacing); +} + +.ds-heading--lg { + --dsc-bottom-spacing: var(--ds-spacing-5); + + font-weight: var(--ds-heading-lg-font-weight); + line-height: var(--ds-heading-lg-line-height); + font-size: var(--ds-heading-lg-font-size); + letter-spacing: var(--ds-heading-lg-letter-spacing); +} + +.ds-heading--xl { + --dsc-bottom-spacing: var(--ds-spacing-6); + + font-weight: var(--ds-heading-xl-font-weight); + line-height: var(--ds-heading-xl-line-height); + font-size: var(--ds-heading-xl-font-size); + letter-spacing: var(--ds-heading-xl-letter-spacing); +} + +.ds-heading--2xl { + --dsc-bottom-spacing: var(--ds-spacing-7); + + font-weight: var(--ds-heading-2xl-font-weight); + line-height: var(--ds-heading-2xl-line-height); + font-size: var(--ds-heading-2xl-font-size); + letter-spacing: var(--ds-heading-2xl-letter-spacing); +} + +/** Ingress */ + +.ds-ingress { + --dsc-bottom-spacing: var(--ds-spacing-5); + + margin: 0; + color: var(--ds-color-neutral-text-default); +} + +.ds-ingress--spacing { + margin-bottom: var(--dsc-bottom-spacing); +} + +.ds-ingress--xs { + --dsc-bottom-spacing: var(--ds-spacing-8); + + font-weight: var(--ds-ingress-xs-font-weight); + line-height: var(--ds-ingress-xs-line-height); + font-size: var(--ds-ingress-xs-font-size); + letter-spacing: var(--ds-ingress-xs-letter-spacing); +} + +.ds-ingress--sm { + --dsc-bottom-spacing: var(--ds-spacing-7); + + font-weight: var(--ds-ingress-sm-font-weight); + line-height: var(--ds-ingress-sm-line-height); + font-size: var(--ds-ingress-sm-font-size); + letter-spacing: var(--ds-ingress-sm-letter-spacing); +} + +.ds-ingress--md { + --dsc-bottom-spacing: var(--ds-spacing-5); + + font-weight: var(--ds-ingress-md-font-weight); + line-height: var(--ds-ingress-md-line-height); + font-size: var(--ds-ingress-md-font-size); + letter-spacing: var(--ds-ingress-md-letter-spacing); +} + +.ds-ingress--lg { + --dsc-bottom-spacing: var(--ds-spacing-6); + + font-weight: var(--ds-ingress-lg-font-weight); + line-height: var(--ds-ingress-lg-line-height); + font-size: var(--ds-ingress-lg-font-size); + letter-spacing: var(--ds-ingress-lg-letter-spacing); +} + +/** Paragraph */ +.ds-paragraph { + --dsc-bottom-spacing: var(--ds-spacing-5); + + font-weight: var(--ds-paragraph-md-font-weight); + line-height: var(--ds-paragraph-md-line-height); + font-size: var(--ds-paragraph-md-font-size); + letter-spacing: var(--ds-paragraph-md-letter-spacing); + color: var(--ds-color-neutral-text-default); + margin: 0; + + &[data-size='xs'] { + --dsc-bottom-spacing: var(--ds-spacing-3); + + font-weight: var(--ds-paragraph-xs-font-weight); + line-height: var(--ds-paragraph-xs-line-height); + font-size: var(--ds-paragraph-xs-font-size); + letter-spacing: var(--ds-paragraph-xs-letter-spacing); + } + + &[data-size='sm'] { + --dsc-bottom-spacing: var(--ds-spacing-4); + + font-weight: var(--ds-paragraph-sm-font-weight); + line-height: var(--ds-paragraph-sm-line-height); + font-size: var(--ds-paragraph-sm-font-size); + letter-spacing: var(--ds-paragraph-sm-letter-spacing); + } + + &[data-size='md'] { + --dsc-bottom-spacing: var(--ds-spacing-5); + + font-weight: var(--ds-paragraph-md-font-weight); + line-height: var(--ds-paragraph-md-line-height); + font-size: var(--ds-paragraph-md-font-size); + letter-spacing: var(--ds-paragraph-md-letter-spacing); + } + + &[data-size='lg'] { + --dsc-bottom-spacing: var(--ds-spacing-6); + + font-weight: var(--ds-paragraph-lg-font-weight); + line-height: var(--ds-paragraph-lg-line-height); + font-size: var(--ds-paragraph-lg-font-size); + letter-spacing: var(--ds-paragraph-lg-letter-spacing); + } +} + +/** REMOVE after migrate to @composes */ +.ds-paragraph--xs { + --dsc-bottom-spacing: var(--ds-spacing-3); + + font-weight: var(--ds-paragraph-xs-font-weight); + line-height: var(--ds-paragraph-xs-line-height); + font-size: var(--ds-paragraph-xs-font-size); + letter-spacing: var(--ds-paragraph-xs-letter-spacing); +} + +.ds-paragraph--sm { + --dsc-bottom-spacing: var(--ds-spacing-4); + + font-weight: var(--ds-paragraph-sm-font-weight); + line-height: var(--ds-paragraph-sm-line-height); + font-size: var(--ds-paragraph-sm-font-size); + letter-spacing: var(--ds-paragraph-sm-letter-spacing); +} + +.ds-paragraph--md { + --dsc-bottom-spacing: var(--ds-spacing-5); + + font-weight: var(--ds-paragraph-md-font-weight); + line-height: var(--ds-paragraph-md-line-height); + font-size: var(--ds-paragraph-md-font-size); + letter-spacing: var(--ds-paragraph-md-letter-spacing); +} + +.ds-paragraph--lg { + --dsc-bottom-spacing: var(--ds-spacing-6); + + font-weight: var(--ds-paragraph-lg-font-weight); + line-height: var(--ds-paragraph-lg-line-height); + font-size: var(--ds-paragraph-lg-font-size); + letter-spacing: var(--ds-paragraph-lg-letter-spacing); +} + +/** END */ + +.ds-paragraph-long { + --dsc-bottom-spacing: var(--ds-spacing-5); + + font-weight: var(--ds-paragraph-long-md-font-weight); + line-height: var(--ds-paragraph-long-md-line-height); + font-size: var(--ds-paragraph-long-md-font-size); + letter-spacing: var(--ds-paragraph-long-md-letter-spacing); + color: var(--ds-color-neutral-text-default); + margin: 0; + + &[data-size='xs'] { + --dsc-bottom-spacing: var(--ds-spacing-3); + + font-weight: var(--ds-paragraph-long-xs-font-weight); + line-height: var(--ds-paragraph-long-xs-line-height); + font-size: var(--ds-paragraph-long-xs-font-size); + letter-spacing: var(--ds-paragraph-long-xs-letter-spacing); + } + + &[data-size='sm'] { + --dsc-bottom-spacing: var(--ds-spacing-4); + + font-weight: var(--ds-paragraph-long-sm-font-weight); + line-height: var(--ds-paragraph-long-sm-line-height); + font-size: var(--ds-paragraph-long-sm-font-size); + letter-spacing: var(--ds-paragraph-long-sm-letter-spacing); + } + + &[data-size='md'] { + --dsc-bottom-spacing: var(--ds-spacing-5); + + font-weight: var(--ds-paragraph-long-md-font-weight); + line-height: var(--ds-paragraph-long-md-line-height); + font-size: var(--ds-paragraph-long-md-font-size); + letter-spacing: var(--ds-paragraph-long-md-letter-spacing); + } + + &[data-size='lg'] { + --dsc-bottom-spacing: var(--ds-spacing-6); + + font-weight: var(--ds-paragraph-long-lg-font-weight); + line-height: var(--ds-paragraph-long-lg-line-height); + font-size: var(--ds-paragraph-long-lg-font-size); + letter-spacing: var(--ds-paragraph-long-lg-letter-spacing); + } +} + +.ds-paragraph-short { + --dsc-bottom-spacing: var(--ds-spacing-5); + + font-weight: var(--ds-paragraph-short-md-font-weight); + line-height: var(--ds-paragraph-short-md-line-height); + font-size: var(--ds-paragraph-short-md-font-size); + letter-spacing: var(--ds-paragraph-short-md-letter-spacing); + color: var(--ds-color-neutral-text-default); + margin: 0; + + &[data-size='xs'] { + --dsc-bottom-spacing: var(--ds-spacing-3); + + font-weight: var(--ds-paragraph-short-xs-font-weight); + line-height: var(--ds-paragraph-short-xs-line-height); + font-size: var(--ds-paragraph-short-xs-font-size); + letter-spacing: var(--ds-paragraph-short-xs-letter-spacing); + } + + &[data-size='sm'] { + --dsc-bottom-spacing: var(--ds-spacing-4); + + font-weight: var(--ds-paragraph-short-sm-font-weight); + line-height: var(--ds-paragraph-short-sm-line-height); + font-size: var(--ds-paragraph-short-sm-font-size); + letter-spacing: var(--ds-paragraph-short-sm-letter-spacing); + } + + &[data-size='md'] { + --dsc-bottom-spacing: var(--ds-spacing-5); + + font-weight: var(--ds-paragraph-short-md-font-weight); + line-height: var(--ds-paragraph-short-md-line-height); + font-size: var(--ds-paragraph-short-md-font-size); + letter-spacing: var(--ds-paragraph-short-md-letter-spacing); + } + + &[data-size='lg'] { + --dsc-bottom-spacing: var(--ds-spacing-6); + + font-weight: var(--ds-paragraph-short-lg-font-weight); + line-height: var(--ds-paragraph-short-lg-line-height); + font-size: var(--ds-paragraph-short-lg-font-size); + letter-spacing: var(--ds-paragraph-short-lg-letter-spacing); + } +} + +.ds-paragraph--spacing { + margin-bottom: var(--dsc-bottom-spacing); +} + +/** Label */ + +.ds-label { + --dsc-bottom-spacing: var(--ds-spacing-1); + + display: inline-block; + margin: 0; + padding: 0; + color: var(--ds-color-neutral-text-default); +} + +.ds-label--spacing { + margin-bottom: var(--dsc-bottom-spacing); +} + +.ds-label--xs { + font-weight: var(--ds-label-xs-font-weight); + line-height: var(--ds-label-xs-line-height); + font-size: var(--ds-label-xs-font-size); + letter-spacing: var(--ds-label-xs-letter-spacing); +} + +.ds-label--sm { + font-weight: var(--ds-label-sm-font-weight); + line-height: var(--ds-label-sm-line-height); + font-size: var(--ds-label-sm-font-size); + letter-spacing: var(--ds-label-sm-letter-spacing); +} + +.ds-label--md { + font-weight: var(--ds-label-md-font-weight); + line-height: var(--ds-label-md-line-height); + font-size: var(--ds-label-md-font-size); + letter-spacing: var(--ds-label-md-letter-spacing); +} + +.ds-label--lg { + font-weight: var(--ds-label-lg-font-weight); + line-height: var(--ds-label-lg-line-height); + font-size: var(--ds-label-lg-font-size); + letter-spacing: var(--ds-label-lg-letter-spacing); +} + +/** Error message */ + +.ds-error-message { + --dsc-bottom-spacing: var(--ds-spacing-5); + + margin: 0; +} + +.ds-error-message--error { + color: var(--ds-color-danger-text-subtle); +} + +.ds-error-message--spacing { + margin-bottom: var(--dsc-bottom-spacing); +} + +.ds-error-message--xs { + --dsc-bottom-spacing: var(--ds-spacing-3); + + font-weight: var(--ds-error_message-xs-font-weight); + line-height: var(--ds-error_message-xs-line-height); + font-size: var(--ds-error_message-xs-font-size); + letter-spacing: var(--ds-error_message-xs-letter-spacing); +} + +.ds-error-message--sm { + --dsc-bottom-spacing: var(--ds-spacing-4); + + font-weight: var(--ds-error_message-sm-font-weight); + line-height: var(--ds-error_message-sm-line-height); + font-size: var(--ds-error_message-sm-font-size); + letter-spacing: var(--ds-error_message-sm-letter-spacing); +} + +.ds-error-message--md { + --dsc-bottom-spacing: var(--ds-spacing-5); + + font-weight: var(--ds-error_message-md-font-weight); + line-height: var(--ds-error_message-md-line-height); + font-size: var(--ds-error_message-md-font-size); + letter-spacing: var(--ds-error_message-md-letter-spacing); +} + +.ds-error-message--lg { + --dsc-bottom-spacing: var(--ds-spacing-5); + + font-weight: var(--ds-error_message-lg-font-weight); + line-height: var(--ds-error_message-lg-line-height); + font-size: var(--ds-error_message-lg-font-size); + letter-spacing: var(--ds-error_message-lg-letter-spacing); +} + +/** Font weight + ** used for weight on Label */ + +.ds-font-weight--medium { + font-weight: var(--ds-font-weight-medium); +} + +.ds-font-weight--semibold { + font-weight: var(--ds-font-weight-semibold); +} + +.ds-font-weight--regular { + font-weight: var(--ds-font-weight-regular); +} + +/** Line height + ** used for long, short Paragraph */ + +.ds-line-height--sm { + line-height: var(--ds-line-height-sm); +} + +.ds-line-height--md { + line-height: var(--ds-line-height-md); +} + +.ds-line-height--lg { + line-height: var(--ds-line-height-lg); +} diff --git a/packages/css/baseline/typography/error-message.css b/packages/css/baseline/typography/error-message.css deleted file mode 100644 index a1d85be1a3..0000000000 --- a/packages/css/baseline/typography/error-message.css +++ /dev/null @@ -1,29 +0,0 @@ -.ds-error-message { - --dsc-bottom-spacing: var(--ds-spacing-5); - - margin: 0; -} - -.ds-error-message--error { - color: var(--ds-color-danger-text-subtle); -} - -.ds-error-message--spacing { - margin-bottom: var(--dsc-bottom-spacing); -} - -.ds-error_message--lg { - --dsc-bottom-spacing: var(--ds-spacing-5); -} - -.ds-error_message--md { - --dsc-bottom-spacing: var(--ds-spacing-5); -} - -.ds-error_message--sm { - --dsc-bottom-spacing: var(--ds-spacing-4); -} - -.ds-error_message--xs { - --dsc-bottom-spacing: var(--ds-spacing-3); -} diff --git a/packages/css/baseline/typography/heading.css b/packages/css/baseline/typography/heading.css deleted file mode 100644 index 00d4da0f07..0000000000 --- a/packages/css/baseline/typography/heading.css +++ /dev/null @@ -1,38 +0,0 @@ -.ds-heading { - --dsc-bottom-spacing: var(--ds-spacing-6); - - margin: 0; - color: var(--ds-color-neutral-text-default); -} - -.ds-heading--spacing { - margin-bottom: var(--dsc-bottom-spacing); -} - -.ds-heading--2xl { - --dsc-bottom-spacing: var(--ds-spacing-7); -} - -.ds-heading--xl { - --dsc-bottom-spacing: var(--ds-spacing-6); -} - -.ds-heading--lg { - --dsc-bottom-spacing: var(--ds-spacing-5); -} - -.ds-heading--md { - --dsc-bottom-spacing: var(--ds-spacing-4); -} - -.ds-heading--sm { - --dsc-bottom-spacing: var(--ds-spacing-3); -} - -.ds-heading--xs { - --dsc-bottom-spacing: var(--ds-spacing-2); -} - -.ds-heading--2xs { - --dsc-bottom-spacing: var(--ds-spacing-1); -} diff --git a/packages/css/baseline/typography/ingress.css b/packages/css/baseline/typography/ingress.css deleted file mode 100644 index a76cde76e4..0000000000 --- a/packages/css/baseline/typography/ingress.css +++ /dev/null @@ -1,26 +0,0 @@ -.ds-ingress { - --dsc-bottom-spacing: var(--ds-spacing-5); - - margin: 0; - color: var(--ds-color-neutral-text-default); -} - -.ds-ingress--spacing { - margin-bottom: var(--dsc-bottom-spacing); -} - -.ds-ingress--lg { - --dsc-bottom-spacing: var(--ds-spacing-6); -} - -.ds-ingress--md { - --dsc-bottom-spacing: var(--ds-spacing-5); -} - -.ds-ingress--sm { - --dsc-bottom-spacing: var(--ds-spacing-7); -} - -.ds-ingress--xs { - --dsc-bottom-spacing: var(--ds-spacing-8); -} diff --git a/packages/css/baseline/typography/label.css b/packages/css/baseline/typography/label.css deleted file mode 100644 index 5dd5118316..0000000000 --- a/packages/css/baseline/typography/label.css +++ /dev/null @@ -1,12 +0,0 @@ -.ds-label { - --dsc-bottom-spacing: var(--ds-spacing-1); - - display: inline-block; - margin: 0; - padding: 0; - color: var(--ds-color-neutral-text-default); -} - -.ds-label--spacing { - margin-bottom: var(--dsc-bottom-spacing); -} diff --git a/packages/css/baseline/typography/paragraph.css b/packages/css/baseline/typography/paragraph.css deleted file mode 100644 index 3620a57fd8..0000000000 --- a/packages/css/baseline/typography/paragraph.css +++ /dev/null @@ -1,26 +0,0 @@ -.ds-paragraph { - --dsc-bottom-spacing: var(--ds-spacing-5); - - color: var(--ds-color-neutral-text-default); - margin: 0; -} - -.ds-paragraph--spacing { - margin-bottom: var(--dsc-bottom-spacing); -} - -.ds-paragraph--lg { - --dsc-bottom-spacing: var(--ds-spacing-6); -} - -.ds-paragraph--md { - --dsc-bottom-spacing: var(--ds-spacing-5); -} - -.ds-paragraph--sm { - --dsc-bottom-spacing: var(--ds-spacing-4); -} - -.ds-paragraph--xs { - --dsc-bottom-spacing: var(--ds-spacing-3); -} diff --git a/packages/css/button.css b/packages/css/button.css index b94deaec28..bbd72ae8c6 100644 --- a/packages/css/button.css +++ b/packages/css/button.css @@ -10,6 +10,7 @@ --dsc-button-size: var(--ds-sizing-12); @composes ds-focus from './utilities.css'; + @composes ds-paragraph-short from './baseline/typography.css'; align-items: center; background: var(--dsc-button-background); diff --git a/packages/css/index.css b/packages/css/index.css index fef99b2e5f..db4f67e92e 100644 --- a/packages/css/index.css +++ b/packages/css/index.css @@ -1,15 +1,11 @@ @charset "UTF-8"; -@layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components; +@layer ds.reset, ds.theme, ds.base, ds.components; /** Import order defines ordinal specificity for layers */ @import url('./baseline/ds-reset.css') layer(ds.reset); -@import url('./baseline/typography/label.css') layer(ds.base.typography); -@import url('./baseline/typography/heading.css') layer(ds.base.typography); -@import url('./baseline/typography/paragraph.css') layer(ds.base.typography); -@import url('./baseline/typography/ingress.css') layer(ds.base.typography); -@import url('./baseline/typography/error-message.css') layer(ds.base.typography); -@import url('./utilities.css') layer(ds.utilities); +@import url('./baseline/typography.css') layer(ds.base.typography); +@import url('./utilities.css') layer(ds.base.utilities); @import url('./button.css') layer(ds.components); @import url('./alert.css') layer(ds.components); @import url('./popover.css') layer(ds.components); diff --git a/packages/theme/brand/altinn.css b/packages/theme/brand/altinn.css index 40cb52a4f9..91d407bdf9 100644 --- a/packages/theme/brand/altinn.css +++ b/packages/theme/brand/altinn.css @@ -310,7 +310,8 @@ --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #fefefe; --ds-color-focus-outer: #002d54; -color-scheme: light; + + color-scheme: light; } @media (prefers-color-scheme: light) { @@ -617,7 +618,8 @@ color-scheme: light; --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #fefefe; --ds-color-focus-outer: #002d54; -color-scheme: light; + + color-scheme: light; } } @@ -634,6 +636,130 @@ color-scheme: light; --ds-font-weight-medium: 400; --ds-font-weight-semibold: 700; --ds-font-weight-regular: 400; + --ds-heading-2xl-font-weight: 400; + --ds-heading-2xl-line-height: 1.3; + --ds-heading-2xl-font-size: 3.75rem; + --ds-heading-2xl-letter-spacing: -1%; + --ds-heading-xl-font-weight: 400; + --ds-heading-xl-line-height: 1.3; + --ds-heading-xl-font-size: 3rem; + --ds-heading-xl-letter-spacing: -1%; + --ds-heading-lg-font-weight: 400; + --ds-heading-lg-line-height: 1.3; + --ds-heading-lg-font-size: 2.25rem; + --ds-heading-lg-letter-spacing: -0.5%; + --ds-heading-md-font-weight: 400; + --ds-heading-md-line-height: 1.3; + --ds-heading-md-font-size: 1.875rem; + --ds-heading-md-letter-spacing: -0.25%; + --ds-heading-sm-font-weight: 400; + --ds-heading-sm-line-height: 1.3; + --ds-heading-sm-font-size: 1.5rem; + --ds-heading-sm-letter-spacing: 0%; + --ds-heading-xs-font-weight: 400; + --ds-heading-xs-line-height: 1.3; + --ds-heading-xs-font-size: 1.3125rem; + --ds-heading-xs-letter-spacing: 0.15%; + --ds-heading-2xs-font-weight: 400; + --ds-heading-2xs-line-height: 1.3; + --ds-heading-2xs-font-size: 1.125rem; + --ds-heading-2xs-letter-spacing: 0.15%; + --ds-ingress-lg-font-weight: 400; + --ds-ingress-lg-line-height: 1.7; + --ds-ingress-lg-font-size: 1.875rem; + --ds-ingress-lg-letter-spacing: 0.5%; + --ds-ingress-md-font-weight: 400; + --ds-ingress-md-line-height: 1.7; + --ds-ingress-md-font-size: 1.5rem; + --ds-ingress-md-letter-spacing: 0.5%; + --ds-ingress-sm-font-weight: 400; + --ds-ingress-sm-line-height: 1.7; + --ds-ingress-sm-font-size: 1.3125rem; + --ds-ingress-sm-letter-spacing: 0.25%; + --ds-ingress-xs-font-weight: 400; + --ds-ingress-xs-line-height: 1.7; + --ds-ingress-xs-font-size: 1.125rem; + --ds-ingress-xs-letter-spacing: 0.15%; + --ds-paragraph-lg-font-weight: 400; + --ds-paragraph-lg-line-height: 1.5; + --ds-paragraph-lg-font-size: 1.3125rem; + --ds-paragraph-lg-letter-spacing: 0.5%; + --ds-paragraph-md-font-weight: 400; + --ds-paragraph-md-line-height: 1.5; + --ds-paragraph-md-font-size: 1.125rem; + --ds-paragraph-md-letter-spacing: 0.5%; + --ds-paragraph-sm-font-weight: 400; + --ds-paragraph-sm-line-height: 1.5; + --ds-paragraph-sm-font-size: 1rem; + --ds-paragraph-sm-letter-spacing: 0.25%; + --ds-paragraph-xs-font-weight: 400; + --ds-paragraph-xs-line-height: 1.5; + --ds-paragraph-xs-font-size: 0.875rem; + --ds-paragraph-xs-letter-spacing: 0.15%; + --ds-paragraph-short-lg-font-weight: 400; + --ds-paragraph-short-lg-line-height: 1.3; + --ds-paragraph-short-lg-font-size: 1.3125rem; + --ds-paragraph-short-lg-letter-spacing: 0.5%; + --ds-paragraph-short-md-font-weight: 400; + --ds-paragraph-short-md-line-height: 1.3; + --ds-paragraph-short-md-font-size: 1.125rem; + --ds-paragraph-short-md-letter-spacing: 0.5%; + --ds-paragraph-short-sm-font-weight: 400; + --ds-paragraph-short-sm-line-height: 1.3; + --ds-paragraph-short-sm-font-size: 1rem; + --ds-paragraph-short-sm-letter-spacing: 0.25%; + --ds-paragraph-short-xs-font-weight: 400; + --ds-paragraph-short-xs-line-height: 1.3; + --ds-paragraph-short-xs-font-size: 0.875rem; + --ds-paragraph-short-xs-letter-spacing: 0.15%; + --ds-paragraph-long-lg-font-weight: 400; + --ds-paragraph-long-lg-line-height: 1.7; + --ds-paragraph-long-lg-font-size: 1.3125rem; + --ds-paragraph-long-lg-letter-spacing: 0.5%; + --ds-paragraph-long-md-font-weight: 400; + --ds-paragraph-long-md-line-height: 1.7; + --ds-paragraph-long-md-font-size: 1.125rem; + --ds-paragraph-long-md-letter-spacing: 0.5%; + --ds-paragraph-long-sm-font-weight: 400; + --ds-paragraph-long-sm-line-height: 1.7; + --ds-paragraph-long-sm-font-size: 1rem; + --ds-paragraph-long-sm-letter-spacing: 0.25%; + --ds-paragraph-long-xs-font-weight: 400; + --ds-paragraph-long-xs-line-height: 1.7; + --ds-paragraph-long-xs-font-size: 0.875rem; + --ds-paragraph-long-xs-letter-spacing: 0.15%; + --ds-label-lg-font-weight: 400; + --ds-label-lg-line-height: 1.3; + --ds-label-lg-font-size: 1.3125rem; + --ds-label-lg-letter-spacing: 0.5%; + --ds-label-md-font-weight: 400; + --ds-label-md-line-height: 1.3; + --ds-label-md-font-size: 1.125rem; + --ds-label-md-letter-spacing: 0.5%; + --ds-label-sm-font-weight: 400; + --ds-label-sm-line-height: 1.3; + --ds-label-sm-font-size: 1rem; + --ds-label-sm-letter-spacing: 0.25%; + --ds-label-xs-font-weight: 400; + --ds-label-xs-line-height: 1.3; + --ds-label-xs-font-size: 0.875rem; + --ds-label-xs-letter-spacing: 0.15%; + --ds-error_message-lg-font-weight: 400; + --ds-error_message-lg-line-height: 1.3; + --ds-error_message-lg-font-size: 1.3125rem; + --ds-error_message-lg-letter-spacing: 0.5%; + --ds-error_message-md-font-weight: 400; + --ds-error_message-md-line-height: 1.3; + --ds-error_message-md-font-size: 1.125rem; + --ds-error_message-md-letter-spacing: 0.5%; + --ds-error_message-sm-font-weight: 400; + --ds-error_message-sm-line-height: 1.3; + --ds-error_message-sm-font-size: 1rem; + --ds-error_message-sm-letter-spacing: 0.25%; + --ds-error_message-xs-font-weight: 400; + --ds-error_message-xs-line-height: 1.3; + --ds-error_message-xs-font-size: 0.875rem; + --ds-error_message-xs-letter-spacing: 0.15%; --ds-line-height-sm: 1.3; --ds-line-height-md: 1.5; --ds-line-height-lg: 1.7; @@ -657,247 +783,6 @@ color-scheme: light; --ds-letter-spacing-7: 0.25%; --ds-letter-spacing-8: 0.5%; --ds-letter-spacing-9: 1.5%; - - .ds-error_message--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-error_message--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-error_message--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-error_message--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-label--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-label--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-long--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-long--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-short--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-short--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-ingress--sm { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-ingress--md { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--lg { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-heading--2xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--xs { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--sm { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-5); - } - - .ds-heading--md { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-3); - } - - .ds-heading--lg { - font-size: var(--ds-font-size-9); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-2); - } - - .ds-heading--xl { - font-size: var(--ds-font-size-10); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-heading--2xl { - font-size: var(--ds-font-size-11); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-font-weight--medium { - font-weight: 400; - } - - .ds-font-weight--semibold { - font-weight: 700; - } - - .ds-font-weight--regular { - font-weight: 400; - } - - .ds-line-height--sm { - line-height: 1.3; - } - - .ds-line-height--md { - line-height: 1.5; - } - - .ds-line-height--lg { - line-height: 1.7; - } } } /** @@ -906,37 +791,6 @@ color-scheme: light; @layer ds.theme.semantic { :root { - --ds-typography-heading-2xl: 500 3.75rem/1.3 'Helvetica Neue'; - --ds-typography-heading-xl: 500 3rem/1.3 'Helvetica Neue'; - --ds-typography-heading-lg: 500 2.25rem/1.3 'Helvetica Neue'; - --ds-typography-heading-md: 500 1.875rem/1.3 'Helvetica Neue'; - --ds-typography-heading-sm: 500 1.5rem/1.3 'Helvetica Neue'; - --ds-typography-heading-xs: 500 1.3125rem/1.3 'Helvetica Neue'; - --ds-typography-heading-2xs: 500 1.125rem/1.3 'Helvetica Neue'; - --ds-typography-ingress-lg: 400 1.875rem/1.7 'Helvetica Neue'; - --ds-typography-ingress-md: 400 1.5rem/1.7 'Helvetica Neue'; - --ds-typography-ingress-sm: 400 1.3125rem/1.7 'Helvetica Neue'; - --ds-typography-ingress-xs: 400 1.125rem/1.7 'Helvetica Neue'; - --ds-typography-paragraph-lg: 400 1.3125rem/1.5 'Helvetica Neue'; - --ds-typography-paragraph-md: 400 1.125rem/1.5 'Helvetica Neue'; - --ds-typography-paragraph-sm: 400 1rem/1.5 'Helvetica Neue'; - --ds-typography-paragraph-xs: 400 0.875rem/1.5 'Helvetica Neue'; - --ds-typography-paragraph-short-lg: 400 1.3125rem/1.3 'Helvetica Neue'; - --ds-typography-paragraph-short-md: 400 1.125rem/1.3 'Helvetica Neue'; - --ds-typography-paragraph-short-sm: 400 1rem/1.3 'Helvetica Neue'; - --ds-typography-paragraph-short-xs: 400 0.875rem/1.3 'Helvetica Neue'; - --ds-typography-paragraph-long-lg: 400 1.3125rem/1.7 'Helvetica Neue'; - --ds-typography-paragraph-long-md: 400 1.125rem/1.7 'Helvetica Neue'; - --ds-typography-paragraph-long-sm: 400 1rem/1.7 'Helvetica Neue'; - --ds-typography-paragraph-long-xs: 400 0.875rem/1.7 'Helvetica Neue'; - --ds-typography-label-lg: 500 1.3125rem/1.3 'Helvetica Neue'; - --ds-typography-label-md: 500 1.125rem/1.3 'Helvetica Neue'; - --ds-typography-label-sm: 500 1rem/1.3 'Helvetica Neue'; - --ds-typography-label-xs: 500 0.875rem/1.3 'Helvetica Neue'; - --ds-typography-error_message-lg: 400 1.3125rem/1.3 'Helvetica Neue'; - --ds-typography-error_message-md: 400 1.125rem/1.3 'Helvetica Neue'; - --ds-typography-error_message-sm: 400 1rem/1.3 'Helvetica Neue'; - --ds-typography-error_message-xs: 400 0.875rem/1.3 'Helvetica Neue'; --ds-disabled-opacity: 30%; --ds-border-radius-sm: calc(var(--ds-border-radius-base)*0.5); --ds-border-radius-md: calc(var(--ds-border-radius-base)*1); @@ -1308,7 +1162,8 @@ color-scheme: light; --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #131c27; --ds-color-focus-outer: #d1e3f3; -color-scheme: dark; + + color-scheme: dark; } @media (prefers-color-scheme: dark) { @@ -1615,7 +1470,8 @@ color-scheme: dark; --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #131c27; --ds-color-focus-outer: #d1e3f3; -color-scheme: dark; + + color-scheme: dark; } } @@ -1632,6 +1488,130 @@ color-scheme: dark; --ds-font-weight-medium: 500; --ds-font-weight-semibold: 700; --ds-font-weight-regular: 400; + --ds-heading-2xl-font-weight: 500; + --ds-heading-2xl-line-height: 1.3; + --ds-heading-2xl-font-size: 3.75rem; + --ds-heading-2xl-letter-spacing: -1%; + --ds-heading-xl-font-weight: 500; + --ds-heading-xl-line-height: 1.3; + --ds-heading-xl-font-size: 3rem; + --ds-heading-xl-letter-spacing: -1%; + --ds-heading-lg-font-weight: 500; + --ds-heading-lg-line-height: 1.3; + --ds-heading-lg-font-size: 2.25rem; + --ds-heading-lg-letter-spacing: -0.5%; + --ds-heading-md-font-weight: 500; + --ds-heading-md-line-height: 1.3; + --ds-heading-md-font-size: 1.875rem; + --ds-heading-md-letter-spacing: -0.25%; + --ds-heading-sm-font-weight: 500; + --ds-heading-sm-line-height: 1.3; + --ds-heading-sm-font-size: 1.5rem; + --ds-heading-sm-letter-spacing: 0%; + --ds-heading-xs-font-weight: 500; + --ds-heading-xs-line-height: 1.3; + --ds-heading-xs-font-size: 1.3125rem; + --ds-heading-xs-letter-spacing: 0.15%; + --ds-heading-2xs-font-weight: 500; + --ds-heading-2xs-line-height: 1.3; + --ds-heading-2xs-font-size: 1.125rem; + --ds-heading-2xs-letter-spacing: 0.15%; + --ds-ingress-lg-font-weight: 400; + --ds-ingress-lg-line-height: 1.7; + --ds-ingress-lg-font-size: 1.875rem; + --ds-ingress-lg-letter-spacing: 0.5%; + --ds-ingress-md-font-weight: 400; + --ds-ingress-md-line-height: 1.7; + --ds-ingress-md-font-size: 1.5rem; + --ds-ingress-md-letter-spacing: 0.5%; + --ds-ingress-sm-font-weight: 400; + --ds-ingress-sm-line-height: 1.7; + --ds-ingress-sm-font-size: 1.3125rem; + --ds-ingress-sm-letter-spacing: 0.25%; + --ds-ingress-xs-font-weight: 400; + --ds-ingress-xs-line-height: 1.7; + --ds-ingress-xs-font-size: 1.125rem; + --ds-ingress-xs-letter-spacing: 0.15%; + --ds-paragraph-lg-font-weight: 400; + --ds-paragraph-lg-line-height: 1.5; + --ds-paragraph-lg-font-size: 1.3125rem; + --ds-paragraph-lg-letter-spacing: 0.5%; + --ds-paragraph-md-font-weight: 400; + --ds-paragraph-md-line-height: 1.5; + --ds-paragraph-md-font-size: 1.125rem; + --ds-paragraph-md-letter-spacing: 0.5%; + --ds-paragraph-sm-font-weight: 400; + --ds-paragraph-sm-line-height: 1.5; + --ds-paragraph-sm-font-size: 1rem; + --ds-paragraph-sm-letter-spacing: 0.25%; + --ds-paragraph-xs-font-weight: 400; + --ds-paragraph-xs-line-height: 1.5; + --ds-paragraph-xs-font-size: 0.875rem; + --ds-paragraph-xs-letter-spacing: 0.15%; + --ds-paragraph-short-lg-font-weight: 400; + --ds-paragraph-short-lg-line-height: 1.3; + --ds-paragraph-short-lg-font-size: 1.3125rem; + --ds-paragraph-short-lg-letter-spacing: 0.5%; + --ds-paragraph-short-md-font-weight: 400; + --ds-paragraph-short-md-line-height: 1.3; + --ds-paragraph-short-md-font-size: 1.125rem; + --ds-paragraph-short-md-letter-spacing: 0.5%; + --ds-paragraph-short-sm-font-weight: 400; + --ds-paragraph-short-sm-line-height: 1.3; + --ds-paragraph-short-sm-font-size: 1rem; + --ds-paragraph-short-sm-letter-spacing: 0.25%; + --ds-paragraph-short-xs-font-weight: 400; + --ds-paragraph-short-xs-line-height: 1.3; + --ds-paragraph-short-xs-font-size: 0.875rem; + --ds-paragraph-short-xs-letter-spacing: 0.15%; + --ds-paragraph-long-lg-font-weight: 400; + --ds-paragraph-long-lg-line-height: 1.7; + --ds-paragraph-long-lg-font-size: 1.3125rem; + --ds-paragraph-long-lg-letter-spacing: 0.5%; + --ds-paragraph-long-md-font-weight: 400; + --ds-paragraph-long-md-line-height: 1.7; + --ds-paragraph-long-md-font-size: 1.125rem; + --ds-paragraph-long-md-letter-spacing: 0.5%; + --ds-paragraph-long-sm-font-weight: 400; + --ds-paragraph-long-sm-line-height: 1.7; + --ds-paragraph-long-sm-font-size: 1rem; + --ds-paragraph-long-sm-letter-spacing: 0.25%; + --ds-paragraph-long-xs-font-weight: 400; + --ds-paragraph-long-xs-line-height: 1.7; + --ds-paragraph-long-xs-font-size: 0.875rem; + --ds-paragraph-long-xs-letter-spacing: 0.15%; + --ds-label-lg-font-weight: 500; + --ds-label-lg-line-height: 1.3; + --ds-label-lg-font-size: 1.3125rem; + --ds-label-lg-letter-spacing: 0.5%; + --ds-label-md-font-weight: 500; + --ds-label-md-line-height: 1.3; + --ds-label-md-font-size: 1.125rem; + --ds-label-md-letter-spacing: 0.5%; + --ds-label-sm-font-weight: 500; + --ds-label-sm-line-height: 1.3; + --ds-label-sm-font-size: 1rem; + --ds-label-sm-letter-spacing: 0.25%; + --ds-label-xs-font-weight: 500; + --ds-label-xs-line-height: 1.3; + --ds-label-xs-font-size: 0.875rem; + --ds-label-xs-letter-spacing: 0.15%; + --ds-error_message-lg-font-weight: 400; + --ds-error_message-lg-line-height: 1.3; + --ds-error_message-lg-font-size: 1.3125rem; + --ds-error_message-lg-letter-spacing: 0.5%; + --ds-error_message-md-font-weight: 400; + --ds-error_message-md-line-height: 1.3; + --ds-error_message-md-font-size: 1.125rem; + --ds-error_message-md-letter-spacing: 0.5%; + --ds-error_message-sm-font-weight: 400; + --ds-error_message-sm-line-height: 1.3; + --ds-error_message-sm-font-size: 1rem; + --ds-error_message-sm-letter-spacing: 0.25%; + --ds-error_message-xs-font-weight: 400; + --ds-error_message-xs-line-height: 1.3; + --ds-error_message-xs-font-size: 0.875rem; + --ds-error_message-xs-letter-spacing: 0.15%; --ds-line-height-sm: 1.3; --ds-line-height-md: 1.5; --ds-line-height-lg: 1.7; @@ -1655,246 +1635,5 @@ color-scheme: dark; --ds-letter-spacing-7: 0.25%; --ds-letter-spacing-8: 0.5%; --ds-letter-spacing-9: 1.5%; - - .ds-error_message--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-error_message--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-error_message--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-error_message--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-label--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-label--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-long--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-long--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-short--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-short--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-ingress--sm { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-ingress--md { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--lg { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-heading--2xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--xs { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--sm { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-5); - } - - .ds-heading--md { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-3); - } - - .ds-heading--lg { - font-size: var(--ds-font-size-9); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-2); - } - - .ds-heading--xl { - font-size: var(--ds-font-size-10); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-heading--2xl { - font-size: var(--ds-font-size-11); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-font-weight--medium { - font-weight: 500; - } - - .ds-font-weight--semibold { - font-weight: 700; - } - - .ds-font-weight--regular { - font-weight: 400; - } - - .ds-line-height--sm { - line-height: 1.3; - } - - .ds-line-height--md { - line-height: 1.5; - } - - .ds-line-height--lg { - line-height: 1.7; - } } } \ No newline at end of file diff --git a/packages/theme/brand/altinn/color-mode/dark.css b/packages/theme/brand/altinn/color-mode/dark.css index 1bbbe6273a..bf219fb8e5 100644 --- a/packages/theme/brand/altinn/color-mode/dark.css +++ b/packages/theme/brand/altinn/color-mode/dark.css @@ -306,7 +306,8 @@ --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #131c27; --ds-color-focus-outer: #d1e3f3; -color-scheme: dark; + + color-scheme: dark; } @media (prefers-color-scheme: dark) { @@ -613,7 +614,8 @@ color-scheme: dark; --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #131c27; --ds-color-focus-outer: #d1e3f3; -color-scheme: dark; + + color-scheme: dark; } } diff --git a/packages/theme/brand/altinn/color-mode/light.css b/packages/theme/brand/altinn/color-mode/light.css index 24d9e58ed3..da42bac7e2 100644 --- a/packages/theme/brand/altinn/color-mode/light.css +++ b/packages/theme/brand/altinn/color-mode/light.css @@ -306,7 +306,8 @@ --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #fefefe; --ds-color-focus-outer: #002d54; -color-scheme: light; + + color-scheme: light; } @media (prefers-color-scheme: light) { @@ -613,7 +614,8 @@ color-scheme: light; --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #fefefe; --ds-color-focus-outer: #002d54; -color-scheme: light; + + color-scheme: light; } } diff --git a/packages/theme/brand/altinn/semantic.css b/packages/theme/brand/altinn/semantic.css index f0493a7b8d..5a7b277320 100644 --- a/packages/theme/brand/altinn/semantic.css +++ b/packages/theme/brand/altinn/semantic.css @@ -4,37 +4,6 @@ @layer ds.theme.semantic { :root { - --ds-typography-heading-2xl: 500 3.75rem/1.3 'Helvetica Neue'; - --ds-typography-heading-xl: 500 3rem/1.3 'Helvetica Neue'; - --ds-typography-heading-lg: 500 2.25rem/1.3 'Helvetica Neue'; - --ds-typography-heading-md: 500 1.875rem/1.3 'Helvetica Neue'; - --ds-typography-heading-sm: 500 1.5rem/1.3 'Helvetica Neue'; - --ds-typography-heading-xs: 500 1.3125rem/1.3 'Helvetica Neue'; - --ds-typography-heading-2xs: 500 1.125rem/1.3 'Helvetica Neue'; - --ds-typography-ingress-lg: 400 1.875rem/1.7 'Helvetica Neue'; - --ds-typography-ingress-md: 400 1.5rem/1.7 'Helvetica Neue'; - --ds-typography-ingress-sm: 400 1.3125rem/1.7 'Helvetica Neue'; - --ds-typography-ingress-xs: 400 1.125rem/1.7 'Helvetica Neue'; - --ds-typography-paragraph-lg: 400 1.3125rem/1.5 'Helvetica Neue'; - --ds-typography-paragraph-md: 400 1.125rem/1.5 'Helvetica Neue'; - --ds-typography-paragraph-sm: 400 1rem/1.5 'Helvetica Neue'; - --ds-typography-paragraph-xs: 400 0.875rem/1.5 'Helvetica Neue'; - --ds-typography-paragraph-short-lg: 400 1.3125rem/1.3 'Helvetica Neue'; - --ds-typography-paragraph-short-md: 400 1.125rem/1.3 'Helvetica Neue'; - --ds-typography-paragraph-short-sm: 400 1rem/1.3 'Helvetica Neue'; - --ds-typography-paragraph-short-xs: 400 0.875rem/1.3 'Helvetica Neue'; - --ds-typography-paragraph-long-lg: 400 1.3125rem/1.7 'Helvetica Neue'; - --ds-typography-paragraph-long-md: 400 1.125rem/1.7 'Helvetica Neue'; - --ds-typography-paragraph-long-sm: 400 1rem/1.7 'Helvetica Neue'; - --ds-typography-paragraph-long-xs: 400 0.875rem/1.7 'Helvetica Neue'; - --ds-typography-label-lg: 500 1.3125rem/1.3 'Helvetica Neue'; - --ds-typography-label-md: 500 1.125rem/1.3 'Helvetica Neue'; - --ds-typography-label-sm: 500 1rem/1.3 'Helvetica Neue'; - --ds-typography-label-xs: 500 0.875rem/1.3 'Helvetica Neue'; - --ds-typography-error_message-lg: 400 1.3125rem/1.3 'Helvetica Neue'; - --ds-typography-error_message-md: 400 1.125rem/1.3 'Helvetica Neue'; - --ds-typography-error_message-sm: 400 1rem/1.3 'Helvetica Neue'; - --ds-typography-error_message-xs: 400 0.875rem/1.3 'Helvetica Neue'; --ds-disabled-opacity: 30%; --ds-border-radius-sm: calc(var(--ds-border-radius-base)*0.5); --ds-border-radius-md: calc(var(--ds-border-radius-base)*1); diff --git a/packages/theme/brand/altinn/typography/primary.css b/packages/theme/brand/altinn/typography/primary.css index 7ae41bf981..677ff6c267 100644 --- a/packages/theme/brand/altinn/typography/primary.css +++ b/packages/theme/brand/altinn/typography/primary.css @@ -8,6 +8,130 @@ --ds-font-weight-medium: 500; --ds-font-weight-semibold: 700; --ds-font-weight-regular: 400; + --ds-heading-2xl-font-weight: 500; + --ds-heading-2xl-line-height: 1.3; + --ds-heading-2xl-font-size: 3.75rem; + --ds-heading-2xl-letter-spacing: -1%; + --ds-heading-xl-font-weight: 500; + --ds-heading-xl-line-height: 1.3; + --ds-heading-xl-font-size: 3rem; + --ds-heading-xl-letter-spacing: -1%; + --ds-heading-lg-font-weight: 500; + --ds-heading-lg-line-height: 1.3; + --ds-heading-lg-font-size: 2.25rem; + --ds-heading-lg-letter-spacing: -0.5%; + --ds-heading-md-font-weight: 500; + --ds-heading-md-line-height: 1.3; + --ds-heading-md-font-size: 1.875rem; + --ds-heading-md-letter-spacing: -0.25%; + --ds-heading-sm-font-weight: 500; + --ds-heading-sm-line-height: 1.3; + --ds-heading-sm-font-size: 1.5rem; + --ds-heading-sm-letter-spacing: 0%; + --ds-heading-xs-font-weight: 500; + --ds-heading-xs-line-height: 1.3; + --ds-heading-xs-font-size: 1.3125rem; + --ds-heading-xs-letter-spacing: 0.15%; + --ds-heading-2xs-font-weight: 500; + --ds-heading-2xs-line-height: 1.3; + --ds-heading-2xs-font-size: 1.125rem; + --ds-heading-2xs-letter-spacing: 0.15%; + --ds-ingress-lg-font-weight: 400; + --ds-ingress-lg-line-height: 1.7; + --ds-ingress-lg-font-size: 1.875rem; + --ds-ingress-lg-letter-spacing: 0.5%; + --ds-ingress-md-font-weight: 400; + --ds-ingress-md-line-height: 1.7; + --ds-ingress-md-font-size: 1.5rem; + --ds-ingress-md-letter-spacing: 0.5%; + --ds-ingress-sm-font-weight: 400; + --ds-ingress-sm-line-height: 1.7; + --ds-ingress-sm-font-size: 1.3125rem; + --ds-ingress-sm-letter-spacing: 0.25%; + --ds-ingress-xs-font-weight: 400; + --ds-ingress-xs-line-height: 1.7; + --ds-ingress-xs-font-size: 1.125rem; + --ds-ingress-xs-letter-spacing: 0.15%; + --ds-paragraph-lg-font-weight: 400; + --ds-paragraph-lg-line-height: 1.5; + --ds-paragraph-lg-font-size: 1.3125rem; + --ds-paragraph-lg-letter-spacing: 0.5%; + --ds-paragraph-md-font-weight: 400; + --ds-paragraph-md-line-height: 1.5; + --ds-paragraph-md-font-size: 1.125rem; + --ds-paragraph-md-letter-spacing: 0.5%; + --ds-paragraph-sm-font-weight: 400; + --ds-paragraph-sm-line-height: 1.5; + --ds-paragraph-sm-font-size: 1rem; + --ds-paragraph-sm-letter-spacing: 0.25%; + --ds-paragraph-xs-font-weight: 400; + --ds-paragraph-xs-line-height: 1.5; + --ds-paragraph-xs-font-size: 0.875rem; + --ds-paragraph-xs-letter-spacing: 0.15%; + --ds-paragraph-short-lg-font-weight: 400; + --ds-paragraph-short-lg-line-height: 1.3; + --ds-paragraph-short-lg-font-size: 1.3125rem; + --ds-paragraph-short-lg-letter-spacing: 0.5%; + --ds-paragraph-short-md-font-weight: 400; + --ds-paragraph-short-md-line-height: 1.3; + --ds-paragraph-short-md-font-size: 1.125rem; + --ds-paragraph-short-md-letter-spacing: 0.5%; + --ds-paragraph-short-sm-font-weight: 400; + --ds-paragraph-short-sm-line-height: 1.3; + --ds-paragraph-short-sm-font-size: 1rem; + --ds-paragraph-short-sm-letter-spacing: 0.25%; + --ds-paragraph-short-xs-font-weight: 400; + --ds-paragraph-short-xs-line-height: 1.3; + --ds-paragraph-short-xs-font-size: 0.875rem; + --ds-paragraph-short-xs-letter-spacing: 0.15%; + --ds-paragraph-long-lg-font-weight: 400; + --ds-paragraph-long-lg-line-height: 1.7; + --ds-paragraph-long-lg-font-size: 1.3125rem; + --ds-paragraph-long-lg-letter-spacing: 0.5%; + --ds-paragraph-long-md-font-weight: 400; + --ds-paragraph-long-md-line-height: 1.7; + --ds-paragraph-long-md-font-size: 1.125rem; + --ds-paragraph-long-md-letter-spacing: 0.5%; + --ds-paragraph-long-sm-font-weight: 400; + --ds-paragraph-long-sm-line-height: 1.7; + --ds-paragraph-long-sm-font-size: 1rem; + --ds-paragraph-long-sm-letter-spacing: 0.25%; + --ds-paragraph-long-xs-font-weight: 400; + --ds-paragraph-long-xs-line-height: 1.7; + --ds-paragraph-long-xs-font-size: 0.875rem; + --ds-paragraph-long-xs-letter-spacing: 0.15%; + --ds-label-lg-font-weight: 500; + --ds-label-lg-line-height: 1.3; + --ds-label-lg-font-size: 1.3125rem; + --ds-label-lg-letter-spacing: 0.5%; + --ds-label-md-font-weight: 500; + --ds-label-md-line-height: 1.3; + --ds-label-md-font-size: 1.125rem; + --ds-label-md-letter-spacing: 0.5%; + --ds-label-sm-font-weight: 500; + --ds-label-sm-line-height: 1.3; + --ds-label-sm-font-size: 1rem; + --ds-label-sm-letter-spacing: 0.25%; + --ds-label-xs-font-weight: 500; + --ds-label-xs-line-height: 1.3; + --ds-label-xs-font-size: 0.875rem; + --ds-label-xs-letter-spacing: 0.15%; + --ds-error_message-lg-font-weight: 400; + --ds-error_message-lg-line-height: 1.3; + --ds-error_message-lg-font-size: 1.3125rem; + --ds-error_message-lg-letter-spacing: 0.5%; + --ds-error_message-md-font-weight: 400; + --ds-error_message-md-line-height: 1.3; + --ds-error_message-md-font-size: 1.125rem; + --ds-error_message-md-letter-spacing: 0.5%; + --ds-error_message-sm-font-weight: 400; + --ds-error_message-sm-line-height: 1.3; + --ds-error_message-sm-font-size: 1rem; + --ds-error_message-sm-letter-spacing: 0.25%; + --ds-error_message-xs-font-weight: 400; + --ds-error_message-xs-line-height: 1.3; + --ds-error_message-xs-font-size: 0.875rem; + --ds-error_message-xs-letter-spacing: 0.15%; --ds-line-height-sm: 1.3; --ds-line-height-md: 1.5; --ds-line-height-lg: 1.7; @@ -31,246 +155,5 @@ --ds-letter-spacing-7: 0.25%; --ds-letter-spacing-8: 0.5%; --ds-letter-spacing-9: 1.5%; - - .ds-error_message--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-error_message--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-error_message--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-error_message--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-label--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-label--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-long--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-long--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-short--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-short--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-ingress--sm { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-ingress--md { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--lg { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-heading--2xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--xs { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--sm { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-5); - } - - .ds-heading--md { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-3); - } - - .ds-heading--lg { - font-size: var(--ds-font-size-9); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-2); - } - - .ds-heading--xl { - font-size: var(--ds-font-size-10); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-heading--2xl { - font-size: var(--ds-font-size-11); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-font-weight--medium { - font-weight: 500; - } - - .ds-font-weight--semibold { - font-weight: 700; - } - - .ds-font-weight--regular { - font-weight: 400; - } - - .ds-line-height--sm { - line-height: 1.3; - } - - .ds-line-height--md { - line-height: 1.5; - } - - .ds-line-height--lg { - line-height: 1.7; - } } } \ No newline at end of file diff --git a/packages/theme/brand/altinn/typography/secondary.css b/packages/theme/brand/altinn/typography/secondary.css index fe81fe4ef7..c738d6c785 100644 --- a/packages/theme/brand/altinn/typography/secondary.css +++ b/packages/theme/brand/altinn/typography/secondary.css @@ -8,6 +8,130 @@ --ds-font-weight-medium: 400; --ds-font-weight-semibold: 700; --ds-font-weight-regular: 400; + --ds-heading-2xl-font-weight: 400; + --ds-heading-2xl-line-height: 1.3; + --ds-heading-2xl-font-size: 3.75rem; + --ds-heading-2xl-letter-spacing: -1%; + --ds-heading-xl-font-weight: 400; + --ds-heading-xl-line-height: 1.3; + --ds-heading-xl-font-size: 3rem; + --ds-heading-xl-letter-spacing: -1%; + --ds-heading-lg-font-weight: 400; + --ds-heading-lg-line-height: 1.3; + --ds-heading-lg-font-size: 2.25rem; + --ds-heading-lg-letter-spacing: -0.5%; + --ds-heading-md-font-weight: 400; + --ds-heading-md-line-height: 1.3; + --ds-heading-md-font-size: 1.875rem; + --ds-heading-md-letter-spacing: -0.25%; + --ds-heading-sm-font-weight: 400; + --ds-heading-sm-line-height: 1.3; + --ds-heading-sm-font-size: 1.5rem; + --ds-heading-sm-letter-spacing: 0%; + --ds-heading-xs-font-weight: 400; + --ds-heading-xs-line-height: 1.3; + --ds-heading-xs-font-size: 1.3125rem; + --ds-heading-xs-letter-spacing: 0.15%; + --ds-heading-2xs-font-weight: 400; + --ds-heading-2xs-line-height: 1.3; + --ds-heading-2xs-font-size: 1.125rem; + --ds-heading-2xs-letter-spacing: 0.15%; + --ds-ingress-lg-font-weight: 400; + --ds-ingress-lg-line-height: 1.7; + --ds-ingress-lg-font-size: 1.875rem; + --ds-ingress-lg-letter-spacing: 0.5%; + --ds-ingress-md-font-weight: 400; + --ds-ingress-md-line-height: 1.7; + --ds-ingress-md-font-size: 1.5rem; + --ds-ingress-md-letter-spacing: 0.5%; + --ds-ingress-sm-font-weight: 400; + --ds-ingress-sm-line-height: 1.7; + --ds-ingress-sm-font-size: 1.3125rem; + --ds-ingress-sm-letter-spacing: 0.25%; + --ds-ingress-xs-font-weight: 400; + --ds-ingress-xs-line-height: 1.7; + --ds-ingress-xs-font-size: 1.125rem; + --ds-ingress-xs-letter-spacing: 0.15%; + --ds-paragraph-lg-font-weight: 400; + --ds-paragraph-lg-line-height: 1.5; + --ds-paragraph-lg-font-size: 1.3125rem; + --ds-paragraph-lg-letter-spacing: 0.5%; + --ds-paragraph-md-font-weight: 400; + --ds-paragraph-md-line-height: 1.5; + --ds-paragraph-md-font-size: 1.125rem; + --ds-paragraph-md-letter-spacing: 0.5%; + --ds-paragraph-sm-font-weight: 400; + --ds-paragraph-sm-line-height: 1.5; + --ds-paragraph-sm-font-size: 1rem; + --ds-paragraph-sm-letter-spacing: 0.25%; + --ds-paragraph-xs-font-weight: 400; + --ds-paragraph-xs-line-height: 1.5; + --ds-paragraph-xs-font-size: 0.875rem; + --ds-paragraph-xs-letter-spacing: 0.15%; + --ds-paragraph-short-lg-font-weight: 400; + --ds-paragraph-short-lg-line-height: 1.3; + --ds-paragraph-short-lg-font-size: 1.3125rem; + --ds-paragraph-short-lg-letter-spacing: 0.5%; + --ds-paragraph-short-md-font-weight: 400; + --ds-paragraph-short-md-line-height: 1.3; + --ds-paragraph-short-md-font-size: 1.125rem; + --ds-paragraph-short-md-letter-spacing: 0.5%; + --ds-paragraph-short-sm-font-weight: 400; + --ds-paragraph-short-sm-line-height: 1.3; + --ds-paragraph-short-sm-font-size: 1rem; + --ds-paragraph-short-sm-letter-spacing: 0.25%; + --ds-paragraph-short-xs-font-weight: 400; + --ds-paragraph-short-xs-line-height: 1.3; + --ds-paragraph-short-xs-font-size: 0.875rem; + --ds-paragraph-short-xs-letter-spacing: 0.15%; + --ds-paragraph-long-lg-font-weight: 400; + --ds-paragraph-long-lg-line-height: 1.7; + --ds-paragraph-long-lg-font-size: 1.3125rem; + --ds-paragraph-long-lg-letter-spacing: 0.5%; + --ds-paragraph-long-md-font-weight: 400; + --ds-paragraph-long-md-line-height: 1.7; + --ds-paragraph-long-md-font-size: 1.125rem; + --ds-paragraph-long-md-letter-spacing: 0.5%; + --ds-paragraph-long-sm-font-weight: 400; + --ds-paragraph-long-sm-line-height: 1.7; + --ds-paragraph-long-sm-font-size: 1rem; + --ds-paragraph-long-sm-letter-spacing: 0.25%; + --ds-paragraph-long-xs-font-weight: 400; + --ds-paragraph-long-xs-line-height: 1.7; + --ds-paragraph-long-xs-font-size: 0.875rem; + --ds-paragraph-long-xs-letter-spacing: 0.15%; + --ds-label-lg-font-weight: 400; + --ds-label-lg-line-height: 1.3; + --ds-label-lg-font-size: 1.3125rem; + --ds-label-lg-letter-spacing: 0.5%; + --ds-label-md-font-weight: 400; + --ds-label-md-line-height: 1.3; + --ds-label-md-font-size: 1.125rem; + --ds-label-md-letter-spacing: 0.5%; + --ds-label-sm-font-weight: 400; + --ds-label-sm-line-height: 1.3; + --ds-label-sm-font-size: 1rem; + --ds-label-sm-letter-spacing: 0.25%; + --ds-label-xs-font-weight: 400; + --ds-label-xs-line-height: 1.3; + --ds-label-xs-font-size: 0.875rem; + --ds-label-xs-letter-spacing: 0.15%; + --ds-error_message-lg-font-weight: 400; + --ds-error_message-lg-line-height: 1.3; + --ds-error_message-lg-font-size: 1.3125rem; + --ds-error_message-lg-letter-spacing: 0.5%; + --ds-error_message-md-font-weight: 400; + --ds-error_message-md-line-height: 1.3; + --ds-error_message-md-font-size: 1.125rem; + --ds-error_message-md-letter-spacing: 0.5%; + --ds-error_message-sm-font-weight: 400; + --ds-error_message-sm-line-height: 1.3; + --ds-error_message-sm-font-size: 1rem; + --ds-error_message-sm-letter-spacing: 0.25%; + --ds-error_message-xs-font-weight: 400; + --ds-error_message-xs-line-height: 1.3; + --ds-error_message-xs-font-size: 0.875rem; + --ds-error_message-xs-letter-spacing: 0.15%; --ds-line-height-sm: 1.3; --ds-line-height-md: 1.5; --ds-line-height-lg: 1.7; @@ -31,246 +155,5 @@ --ds-letter-spacing-7: 0.25%; --ds-letter-spacing-8: 0.5%; --ds-letter-spacing-9: 1.5%; - - .ds-error_message--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-error_message--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-error_message--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-error_message--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-label--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-label--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-long--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-long--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-short--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-short--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-ingress--sm { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-ingress--md { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--lg { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-heading--2xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--xs { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--sm { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-5); - } - - .ds-heading--md { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-3); - } - - .ds-heading--lg { - font-size: var(--ds-font-size-9); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-2); - } - - .ds-heading--xl { - font-size: var(--ds-font-size-10); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-heading--2xl { - font-size: var(--ds-font-size-11); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-font-weight--medium { - font-weight: 400; - } - - .ds-font-weight--semibold { - font-weight: 700; - } - - .ds-font-weight--regular { - font-weight: 400; - } - - .ds-line-height--sm { - line-height: 1.3; - } - - .ds-line-height--md { - line-height: 1.5; - } - - .ds-line-height--lg { - line-height: 1.7; - } } } \ No newline at end of file diff --git a/packages/theme/brand/digdir.css b/packages/theme/brand/digdir.css index cc9611f501..85bea6bd4b 100644 --- a/packages/theme/brand/digdir.css +++ b/packages/theme/brand/digdir.css @@ -310,7 +310,8 @@ --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #fefefe; --ds-color-focus-outer: #002d54; -color-scheme: light; + + color-scheme: light; } @media (prefers-color-scheme: light) { @@ -617,7 +618,8 @@ color-scheme: light; --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #fefefe; --ds-color-focus-outer: #002d54; -color-scheme: light; + + color-scheme: light; } } @@ -634,6 +636,130 @@ color-scheme: light; --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-font-size: 3.75rem; + --ds-heading-2xl-letter-spacing: -1%; + --ds-heading-xl-font-weight: 500; + --ds-heading-xl-line-height: 1.3; + --ds-heading-xl-font-size: 3rem; + --ds-heading-xl-letter-spacing: -1%; + --ds-heading-lg-font-weight: 500; + --ds-heading-lg-line-height: 1.3; + --ds-heading-lg-font-size: 2.25rem; + --ds-heading-lg-letter-spacing: -0.5%; + --ds-heading-md-font-weight: 500; + --ds-heading-md-line-height: 1.3; + --ds-heading-md-font-size: 1.875rem; + --ds-heading-md-letter-spacing: -0.25%; + --ds-heading-sm-font-weight: 500; + --ds-heading-sm-line-height: 1.3; + --ds-heading-sm-font-size: 1.5rem; + --ds-heading-sm-letter-spacing: 0%; + --ds-heading-xs-font-weight: 500; + --ds-heading-xs-line-height: 1.3; + --ds-heading-xs-font-size: 1.3125rem; + --ds-heading-xs-letter-spacing: 0.15%; + --ds-heading-2xs-font-weight: 500; + --ds-heading-2xs-line-height: 1.3; + --ds-heading-2xs-font-size: 1.125rem; + --ds-heading-2xs-letter-spacing: 0.15%; + --ds-ingress-lg-font-weight: 400; + --ds-ingress-lg-line-height: 1.7; + --ds-ingress-lg-font-size: 1.875rem; + --ds-ingress-lg-letter-spacing: 0.5%; + --ds-ingress-md-font-weight: 400; + --ds-ingress-md-line-height: 1.7; + --ds-ingress-md-font-size: 1.5rem; + --ds-ingress-md-letter-spacing: 0.5%; + --ds-ingress-sm-font-weight: 400; + --ds-ingress-sm-line-height: 1.7; + --ds-ingress-sm-font-size: 1.3125rem; + --ds-ingress-sm-letter-spacing: 0.25%; + --ds-ingress-xs-font-weight: 400; + --ds-ingress-xs-line-height: 1.7; + --ds-ingress-xs-font-size: 1.125rem; + --ds-ingress-xs-letter-spacing: 0.15%; + --ds-paragraph-lg-font-weight: 400; + --ds-paragraph-lg-line-height: 1.5; + --ds-paragraph-lg-font-size: 1.3125rem; + --ds-paragraph-lg-letter-spacing: 0.5%; + --ds-paragraph-md-font-weight: 400; + --ds-paragraph-md-line-height: 1.5; + --ds-paragraph-md-font-size: 1.125rem; + --ds-paragraph-md-letter-spacing: 0.5%; + --ds-paragraph-sm-font-weight: 400; + --ds-paragraph-sm-line-height: 1.5; + --ds-paragraph-sm-font-size: 1rem; + --ds-paragraph-sm-letter-spacing: 0.25%; + --ds-paragraph-xs-font-weight: 400; + --ds-paragraph-xs-line-height: 1.5; + --ds-paragraph-xs-font-size: 0.875rem; + --ds-paragraph-xs-letter-spacing: 0.15%; + --ds-paragraph-short-lg-font-weight: 400; + --ds-paragraph-short-lg-line-height: 1.3; + --ds-paragraph-short-lg-font-size: 1.3125rem; + --ds-paragraph-short-lg-letter-spacing: 0.5%; + --ds-paragraph-short-md-font-weight: 400; + --ds-paragraph-short-md-line-height: 1.3; + --ds-paragraph-short-md-font-size: 1.125rem; + --ds-paragraph-short-md-letter-spacing: 0.5%; + --ds-paragraph-short-sm-font-weight: 400; + --ds-paragraph-short-sm-line-height: 1.3; + --ds-paragraph-short-sm-font-size: 1rem; + --ds-paragraph-short-sm-letter-spacing: 0.25%; + --ds-paragraph-short-xs-font-weight: 400; + --ds-paragraph-short-xs-line-height: 1.3; + --ds-paragraph-short-xs-font-size: 0.875rem; + --ds-paragraph-short-xs-letter-spacing: 0.15%; + --ds-paragraph-long-lg-font-weight: 400; + --ds-paragraph-long-lg-line-height: 1.7; + --ds-paragraph-long-lg-font-size: 1.3125rem; + --ds-paragraph-long-lg-letter-spacing: 0.5%; + --ds-paragraph-long-md-font-weight: 400; + --ds-paragraph-long-md-line-height: 1.7; + --ds-paragraph-long-md-font-size: 1.125rem; + --ds-paragraph-long-md-letter-spacing: 0.5%; + --ds-paragraph-long-sm-font-weight: 400; + --ds-paragraph-long-sm-line-height: 1.7; + --ds-paragraph-long-sm-font-size: 1rem; + --ds-paragraph-long-sm-letter-spacing: 0.25%; + --ds-paragraph-long-xs-font-weight: 400; + --ds-paragraph-long-xs-line-height: 1.7; + --ds-paragraph-long-xs-font-size: 0.875rem; + --ds-paragraph-long-xs-letter-spacing: 0.15%; + --ds-label-lg-font-weight: 500; + --ds-label-lg-line-height: 1.3; + --ds-label-lg-font-size: 1.3125rem; + --ds-label-lg-letter-spacing: 0.5%; + --ds-label-md-font-weight: 500; + --ds-label-md-line-height: 1.3; + --ds-label-md-font-size: 1.125rem; + --ds-label-md-letter-spacing: 0.5%; + --ds-label-sm-font-weight: 500; + --ds-label-sm-line-height: 1.3; + --ds-label-sm-font-size: 1rem; + --ds-label-sm-letter-spacing: 0.25%; + --ds-label-xs-font-weight: 500; + --ds-label-xs-line-height: 1.3; + --ds-label-xs-font-size: 0.875rem; + --ds-label-xs-letter-spacing: 0.15%; + --ds-error_message-lg-font-weight: 400; + --ds-error_message-lg-line-height: 1.3; + --ds-error_message-lg-font-size: 1.3125rem; + --ds-error_message-lg-letter-spacing: 0.5%; + --ds-error_message-md-font-weight: 400; + --ds-error_message-md-line-height: 1.3; + --ds-error_message-md-font-size: 1.125rem; + --ds-error_message-md-letter-spacing: 0.5%; + --ds-error_message-sm-font-weight: 400; + --ds-error_message-sm-line-height: 1.3; + --ds-error_message-sm-font-size: 1rem; + --ds-error_message-sm-letter-spacing: 0.25%; + --ds-error_message-xs-font-weight: 400; + --ds-error_message-xs-line-height: 1.3; + --ds-error_message-xs-font-size: 0.875rem; + --ds-error_message-xs-letter-spacing: 0.15%; --ds-line-height-sm: 1.3; --ds-line-height-md: 1.5; --ds-line-height-lg: 1.7; @@ -657,247 +783,6 @@ color-scheme: light; --ds-letter-spacing-7: 0.25%; --ds-letter-spacing-8: 0.5%; --ds-letter-spacing-9: 1.5%; - - .ds-error_message--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-error_message--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-error_message--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-error_message--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-label--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-label--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-long--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-long--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-short--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-short--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-ingress--sm { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-ingress--md { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--lg { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-heading--2xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--xs { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--sm { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-5); - } - - .ds-heading--md { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-3); - } - - .ds-heading--lg { - font-size: var(--ds-font-size-9); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-2); - } - - .ds-heading--xl { - font-size: var(--ds-font-size-10); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-heading--2xl { - font-size: var(--ds-font-size-11); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-font-weight--medium { - font-weight: 500; - } - - .ds-font-weight--semibold { - font-weight: 600; - } - - .ds-font-weight--regular { - font-weight: 400; - } - - .ds-line-height--sm { - line-height: 1.3; - } - - .ds-line-height--md { - line-height: 1.5; - } - - .ds-line-height--lg { - line-height: 1.7; - } } } /** @@ -906,37 +791,6 @@ color-scheme: light; @layer ds.theme.semantic { :root { - --ds-typography-heading-2xl: 500 3.75rem/1.3 'Inter'; - --ds-typography-heading-xl: 500 3rem/1.3 'Inter'; - --ds-typography-heading-lg: 500 2.25rem/1.3 'Inter'; - --ds-typography-heading-md: 500 1.875rem/1.3 'Inter'; - --ds-typography-heading-sm: 500 1.5rem/1.3 'Inter'; - --ds-typography-heading-xs: 500 1.3125rem/1.3 'Inter'; - --ds-typography-heading-2xs: 500 1.125rem/1.3 'Inter'; - --ds-typography-ingress-lg: 400 1.875rem/1.7 'Inter'; - --ds-typography-ingress-md: 400 1.5rem/1.7 'Inter'; - --ds-typography-ingress-sm: 400 1.3125rem/1.7 'Inter'; - --ds-typography-ingress-xs: 400 1.125rem/1.7 'Inter'; - --ds-typography-paragraph-lg: 400 1.3125rem/1.5 'Inter'; - --ds-typography-paragraph-md: 400 1.125rem/1.5 'Inter'; - --ds-typography-paragraph-sm: 400 1rem/1.5 'Inter'; - --ds-typography-paragraph-xs: 400 0.875rem/1.5 'Inter'; - --ds-typography-paragraph-short-lg: 400 1.3125rem/1.3 'Inter'; - --ds-typography-paragraph-short-md: 400 1.125rem/1.3 'Inter'; - --ds-typography-paragraph-short-sm: 400 1rem/1.3 'Inter'; - --ds-typography-paragraph-short-xs: 400 0.875rem/1.3 'Inter'; - --ds-typography-paragraph-long-lg: 400 1.3125rem/1.7 'Inter'; - --ds-typography-paragraph-long-md: 400 1.125rem/1.7 'Inter'; - --ds-typography-paragraph-long-sm: 400 1rem/1.7 'Inter'; - --ds-typography-paragraph-long-xs: 400 0.875rem/1.7 'Inter'; - --ds-typography-label-lg: 500 1.3125rem/1.3 'Inter'; - --ds-typography-label-md: 500 1.125rem/1.3 'Inter'; - --ds-typography-label-sm: 500 1rem/1.3 'Inter'; - --ds-typography-label-xs: 500 0.875rem/1.3 'Inter'; - --ds-typography-error_message-lg: 400 1.3125rem/1.3 'Inter'; - --ds-typography-error_message-md: 400 1.125rem/1.3 'Inter'; - --ds-typography-error_message-sm: 400 1rem/1.3 'Inter'; - --ds-typography-error_message-xs: 400 0.875rem/1.3 'Inter'; --ds-disabled-opacity: 30%; --ds-border-radius-sm: calc(var(--ds-border-radius-base)*0.5); --ds-border-radius-md: calc(var(--ds-border-radius-base)*1); @@ -1308,7 +1162,8 @@ color-scheme: light; --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #131c27; --ds-color-focus-outer: #d1e3f3; -color-scheme: dark; + + color-scheme: dark; } @media (prefers-color-scheme: dark) { @@ -1615,7 +1470,8 @@ color-scheme: dark; --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #131c27; --ds-color-focus-outer: #d1e3f3; -color-scheme: dark; + + color-scheme: dark; } } @@ -1632,6 +1488,130 @@ color-scheme: dark; --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-font-size: 3.75rem; + --ds-heading-2xl-letter-spacing: -1%; + --ds-heading-xl-font-weight: 500; + --ds-heading-xl-line-height: 1.3; + --ds-heading-xl-font-size: 3rem; + --ds-heading-xl-letter-spacing: -1%; + --ds-heading-lg-font-weight: 500; + --ds-heading-lg-line-height: 1.3; + --ds-heading-lg-font-size: 2.25rem; + --ds-heading-lg-letter-spacing: -0.5%; + --ds-heading-md-font-weight: 500; + --ds-heading-md-line-height: 1.3; + --ds-heading-md-font-size: 1.875rem; + --ds-heading-md-letter-spacing: -0.25%; + --ds-heading-sm-font-weight: 500; + --ds-heading-sm-line-height: 1.3; + --ds-heading-sm-font-size: 1.5rem; + --ds-heading-sm-letter-spacing: 0%; + --ds-heading-xs-font-weight: 500; + --ds-heading-xs-line-height: 1.3; + --ds-heading-xs-font-size: 1.3125rem; + --ds-heading-xs-letter-spacing: 0.15%; + --ds-heading-2xs-font-weight: 500; + --ds-heading-2xs-line-height: 1.3; + --ds-heading-2xs-font-size: 1.125rem; + --ds-heading-2xs-letter-spacing: 0.15%; + --ds-ingress-lg-font-weight: 400; + --ds-ingress-lg-line-height: 1.7; + --ds-ingress-lg-font-size: 1.875rem; + --ds-ingress-lg-letter-spacing: 0.5%; + --ds-ingress-md-font-weight: 400; + --ds-ingress-md-line-height: 1.7; + --ds-ingress-md-font-size: 1.5rem; + --ds-ingress-md-letter-spacing: 0.5%; + --ds-ingress-sm-font-weight: 400; + --ds-ingress-sm-line-height: 1.7; + --ds-ingress-sm-font-size: 1.3125rem; + --ds-ingress-sm-letter-spacing: 0.25%; + --ds-ingress-xs-font-weight: 400; + --ds-ingress-xs-line-height: 1.7; + --ds-ingress-xs-font-size: 1.125rem; + --ds-ingress-xs-letter-spacing: 0.15%; + --ds-paragraph-lg-font-weight: 400; + --ds-paragraph-lg-line-height: 1.5; + --ds-paragraph-lg-font-size: 1.3125rem; + --ds-paragraph-lg-letter-spacing: 0.5%; + --ds-paragraph-md-font-weight: 400; + --ds-paragraph-md-line-height: 1.5; + --ds-paragraph-md-font-size: 1.125rem; + --ds-paragraph-md-letter-spacing: 0.5%; + --ds-paragraph-sm-font-weight: 400; + --ds-paragraph-sm-line-height: 1.5; + --ds-paragraph-sm-font-size: 1rem; + --ds-paragraph-sm-letter-spacing: 0.25%; + --ds-paragraph-xs-font-weight: 400; + --ds-paragraph-xs-line-height: 1.5; + --ds-paragraph-xs-font-size: 0.875rem; + --ds-paragraph-xs-letter-spacing: 0.15%; + --ds-paragraph-short-lg-font-weight: 400; + --ds-paragraph-short-lg-line-height: 1.3; + --ds-paragraph-short-lg-font-size: 1.3125rem; + --ds-paragraph-short-lg-letter-spacing: 0.5%; + --ds-paragraph-short-md-font-weight: 400; + --ds-paragraph-short-md-line-height: 1.3; + --ds-paragraph-short-md-font-size: 1.125rem; + --ds-paragraph-short-md-letter-spacing: 0.5%; + --ds-paragraph-short-sm-font-weight: 400; + --ds-paragraph-short-sm-line-height: 1.3; + --ds-paragraph-short-sm-font-size: 1rem; + --ds-paragraph-short-sm-letter-spacing: 0.25%; + --ds-paragraph-short-xs-font-weight: 400; + --ds-paragraph-short-xs-line-height: 1.3; + --ds-paragraph-short-xs-font-size: 0.875rem; + --ds-paragraph-short-xs-letter-spacing: 0.15%; + --ds-paragraph-long-lg-font-weight: 400; + --ds-paragraph-long-lg-line-height: 1.7; + --ds-paragraph-long-lg-font-size: 1.3125rem; + --ds-paragraph-long-lg-letter-spacing: 0.5%; + --ds-paragraph-long-md-font-weight: 400; + --ds-paragraph-long-md-line-height: 1.7; + --ds-paragraph-long-md-font-size: 1.125rem; + --ds-paragraph-long-md-letter-spacing: 0.5%; + --ds-paragraph-long-sm-font-weight: 400; + --ds-paragraph-long-sm-line-height: 1.7; + --ds-paragraph-long-sm-font-size: 1rem; + --ds-paragraph-long-sm-letter-spacing: 0.25%; + --ds-paragraph-long-xs-font-weight: 400; + --ds-paragraph-long-xs-line-height: 1.7; + --ds-paragraph-long-xs-font-size: 0.875rem; + --ds-paragraph-long-xs-letter-spacing: 0.15%; + --ds-label-lg-font-weight: 500; + --ds-label-lg-line-height: 1.3; + --ds-label-lg-font-size: 1.3125rem; + --ds-label-lg-letter-spacing: 0.5%; + --ds-label-md-font-weight: 500; + --ds-label-md-line-height: 1.3; + --ds-label-md-font-size: 1.125rem; + --ds-label-md-letter-spacing: 0.5%; + --ds-label-sm-font-weight: 500; + --ds-label-sm-line-height: 1.3; + --ds-label-sm-font-size: 1rem; + --ds-label-sm-letter-spacing: 0.25%; + --ds-label-xs-font-weight: 500; + --ds-label-xs-line-height: 1.3; + --ds-label-xs-font-size: 0.875rem; + --ds-label-xs-letter-spacing: 0.15%; + --ds-error_message-lg-font-weight: 400; + --ds-error_message-lg-line-height: 1.3; + --ds-error_message-lg-font-size: 1.3125rem; + --ds-error_message-lg-letter-spacing: 0.5%; + --ds-error_message-md-font-weight: 400; + --ds-error_message-md-line-height: 1.3; + --ds-error_message-md-font-size: 1.125rem; + --ds-error_message-md-letter-spacing: 0.5%; + --ds-error_message-sm-font-weight: 400; + --ds-error_message-sm-line-height: 1.3; + --ds-error_message-sm-font-size: 1rem; + --ds-error_message-sm-letter-spacing: 0.25%; + --ds-error_message-xs-font-weight: 400; + --ds-error_message-xs-line-height: 1.3; + --ds-error_message-xs-font-size: 0.875rem; + --ds-error_message-xs-letter-spacing: 0.15%; --ds-line-height-sm: 1.3; --ds-line-height-md: 1.5; --ds-line-height-lg: 1.7; @@ -1655,246 +1635,5 @@ color-scheme: dark; --ds-letter-spacing-7: 0.25%; --ds-letter-spacing-8: 0.5%; --ds-letter-spacing-9: 1.5%; - - .ds-error_message--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-error_message--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-error_message--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-error_message--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-label--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-label--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-long--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-long--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-short--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-short--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-ingress--sm { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-ingress--md { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--lg { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-heading--2xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--xs { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--sm { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-5); - } - - .ds-heading--md { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-3); - } - - .ds-heading--lg { - font-size: var(--ds-font-size-9); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-2); - } - - .ds-heading--xl { - font-size: var(--ds-font-size-10); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-heading--2xl { - font-size: var(--ds-font-size-11); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-font-weight--medium { - font-weight: 500; - } - - .ds-font-weight--semibold { - font-weight: 600; - } - - .ds-font-weight--regular { - font-weight: 400; - } - - .ds-line-height--sm { - line-height: 1.3; - } - - .ds-line-height--md { - line-height: 1.5; - } - - .ds-line-height--lg { - line-height: 1.7; - } } } \ No newline at end of file diff --git a/packages/theme/brand/digdir/color-mode/dark.css b/packages/theme/brand/digdir/color-mode/dark.css index b82b21054c..5d23fe7797 100644 --- a/packages/theme/brand/digdir/color-mode/dark.css +++ b/packages/theme/brand/digdir/color-mode/dark.css @@ -306,7 +306,8 @@ --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #131c27; --ds-color-focus-outer: #d1e3f3; -color-scheme: dark; + + color-scheme: dark; } @media (prefers-color-scheme: dark) { @@ -613,7 +614,8 @@ color-scheme: dark; --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #131c27; --ds-color-focus-outer: #d1e3f3; -color-scheme: dark; + + color-scheme: dark; } } diff --git a/packages/theme/brand/digdir/color-mode/light.css b/packages/theme/brand/digdir/color-mode/light.css index 019fc43f54..b6e02646a8 100644 --- a/packages/theme/brand/digdir/color-mode/light.css +++ b/packages/theme/brand/digdir/color-mode/light.css @@ -306,7 +306,8 @@ --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #fefefe; --ds-color-focus-outer: #002d54; -color-scheme: light; + + color-scheme: light; } @media (prefers-color-scheme: light) { @@ -613,7 +614,8 @@ color-scheme: light; --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #fefefe; --ds-color-focus-outer: #002d54; -color-scheme: light; + + color-scheme: light; } } diff --git a/packages/theme/brand/digdir/semantic.css b/packages/theme/brand/digdir/semantic.css index 67246fa1ce..5a7b277320 100644 --- a/packages/theme/brand/digdir/semantic.css +++ b/packages/theme/brand/digdir/semantic.css @@ -4,37 +4,6 @@ @layer ds.theme.semantic { :root { - --ds-typography-heading-2xl: 500 3.75rem/1.3 'Inter'; - --ds-typography-heading-xl: 500 3rem/1.3 'Inter'; - --ds-typography-heading-lg: 500 2.25rem/1.3 'Inter'; - --ds-typography-heading-md: 500 1.875rem/1.3 'Inter'; - --ds-typography-heading-sm: 500 1.5rem/1.3 'Inter'; - --ds-typography-heading-xs: 500 1.3125rem/1.3 'Inter'; - --ds-typography-heading-2xs: 500 1.125rem/1.3 'Inter'; - --ds-typography-ingress-lg: 400 1.875rem/1.7 'Inter'; - --ds-typography-ingress-md: 400 1.5rem/1.7 'Inter'; - --ds-typography-ingress-sm: 400 1.3125rem/1.7 'Inter'; - --ds-typography-ingress-xs: 400 1.125rem/1.7 'Inter'; - --ds-typography-paragraph-lg: 400 1.3125rem/1.5 'Inter'; - --ds-typography-paragraph-md: 400 1.125rem/1.5 'Inter'; - --ds-typography-paragraph-sm: 400 1rem/1.5 'Inter'; - --ds-typography-paragraph-xs: 400 0.875rem/1.5 'Inter'; - --ds-typography-paragraph-short-lg: 400 1.3125rem/1.3 'Inter'; - --ds-typography-paragraph-short-md: 400 1.125rem/1.3 'Inter'; - --ds-typography-paragraph-short-sm: 400 1rem/1.3 'Inter'; - --ds-typography-paragraph-short-xs: 400 0.875rem/1.3 'Inter'; - --ds-typography-paragraph-long-lg: 400 1.3125rem/1.7 'Inter'; - --ds-typography-paragraph-long-md: 400 1.125rem/1.7 'Inter'; - --ds-typography-paragraph-long-sm: 400 1rem/1.7 'Inter'; - --ds-typography-paragraph-long-xs: 400 0.875rem/1.7 'Inter'; - --ds-typography-label-lg: 500 1.3125rem/1.3 'Inter'; - --ds-typography-label-md: 500 1.125rem/1.3 'Inter'; - --ds-typography-label-sm: 500 1rem/1.3 'Inter'; - --ds-typography-label-xs: 500 0.875rem/1.3 'Inter'; - --ds-typography-error_message-lg: 400 1.3125rem/1.3 'Inter'; - --ds-typography-error_message-md: 400 1.125rem/1.3 'Inter'; - --ds-typography-error_message-sm: 400 1rem/1.3 'Inter'; - --ds-typography-error_message-xs: 400 0.875rem/1.3 'Inter'; --ds-disabled-opacity: 30%; --ds-border-radius-sm: calc(var(--ds-border-radius-base)*0.5); --ds-border-radius-md: calc(var(--ds-border-radius-base)*1); diff --git a/packages/theme/brand/digdir/typography/primary.css b/packages/theme/brand/digdir/typography/primary.css index c180df3fae..43925c501f 100644 --- a/packages/theme/brand/digdir/typography/primary.css +++ b/packages/theme/brand/digdir/typography/primary.css @@ -8,6 +8,130 @@ --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-font-size: 3.75rem; + --ds-heading-2xl-letter-spacing: -1%; + --ds-heading-xl-font-weight: 500; + --ds-heading-xl-line-height: 1.3; + --ds-heading-xl-font-size: 3rem; + --ds-heading-xl-letter-spacing: -1%; + --ds-heading-lg-font-weight: 500; + --ds-heading-lg-line-height: 1.3; + --ds-heading-lg-font-size: 2.25rem; + --ds-heading-lg-letter-spacing: -0.5%; + --ds-heading-md-font-weight: 500; + --ds-heading-md-line-height: 1.3; + --ds-heading-md-font-size: 1.875rem; + --ds-heading-md-letter-spacing: -0.25%; + --ds-heading-sm-font-weight: 500; + --ds-heading-sm-line-height: 1.3; + --ds-heading-sm-font-size: 1.5rem; + --ds-heading-sm-letter-spacing: 0%; + --ds-heading-xs-font-weight: 500; + --ds-heading-xs-line-height: 1.3; + --ds-heading-xs-font-size: 1.3125rem; + --ds-heading-xs-letter-spacing: 0.15%; + --ds-heading-2xs-font-weight: 500; + --ds-heading-2xs-line-height: 1.3; + --ds-heading-2xs-font-size: 1.125rem; + --ds-heading-2xs-letter-spacing: 0.15%; + --ds-ingress-lg-font-weight: 400; + --ds-ingress-lg-line-height: 1.7; + --ds-ingress-lg-font-size: 1.875rem; + --ds-ingress-lg-letter-spacing: 0.5%; + --ds-ingress-md-font-weight: 400; + --ds-ingress-md-line-height: 1.7; + --ds-ingress-md-font-size: 1.5rem; + --ds-ingress-md-letter-spacing: 0.5%; + --ds-ingress-sm-font-weight: 400; + --ds-ingress-sm-line-height: 1.7; + --ds-ingress-sm-font-size: 1.3125rem; + --ds-ingress-sm-letter-spacing: 0.25%; + --ds-ingress-xs-font-weight: 400; + --ds-ingress-xs-line-height: 1.7; + --ds-ingress-xs-font-size: 1.125rem; + --ds-ingress-xs-letter-spacing: 0.15%; + --ds-paragraph-lg-font-weight: 400; + --ds-paragraph-lg-line-height: 1.5; + --ds-paragraph-lg-font-size: 1.3125rem; + --ds-paragraph-lg-letter-spacing: 0.5%; + --ds-paragraph-md-font-weight: 400; + --ds-paragraph-md-line-height: 1.5; + --ds-paragraph-md-font-size: 1.125rem; + --ds-paragraph-md-letter-spacing: 0.5%; + --ds-paragraph-sm-font-weight: 400; + --ds-paragraph-sm-line-height: 1.5; + --ds-paragraph-sm-font-size: 1rem; + --ds-paragraph-sm-letter-spacing: 0.25%; + --ds-paragraph-xs-font-weight: 400; + --ds-paragraph-xs-line-height: 1.5; + --ds-paragraph-xs-font-size: 0.875rem; + --ds-paragraph-xs-letter-spacing: 0.15%; + --ds-paragraph-short-lg-font-weight: 400; + --ds-paragraph-short-lg-line-height: 1.3; + --ds-paragraph-short-lg-font-size: 1.3125rem; + --ds-paragraph-short-lg-letter-spacing: 0.5%; + --ds-paragraph-short-md-font-weight: 400; + --ds-paragraph-short-md-line-height: 1.3; + --ds-paragraph-short-md-font-size: 1.125rem; + --ds-paragraph-short-md-letter-spacing: 0.5%; + --ds-paragraph-short-sm-font-weight: 400; + --ds-paragraph-short-sm-line-height: 1.3; + --ds-paragraph-short-sm-font-size: 1rem; + --ds-paragraph-short-sm-letter-spacing: 0.25%; + --ds-paragraph-short-xs-font-weight: 400; + --ds-paragraph-short-xs-line-height: 1.3; + --ds-paragraph-short-xs-font-size: 0.875rem; + --ds-paragraph-short-xs-letter-spacing: 0.15%; + --ds-paragraph-long-lg-font-weight: 400; + --ds-paragraph-long-lg-line-height: 1.7; + --ds-paragraph-long-lg-font-size: 1.3125rem; + --ds-paragraph-long-lg-letter-spacing: 0.5%; + --ds-paragraph-long-md-font-weight: 400; + --ds-paragraph-long-md-line-height: 1.7; + --ds-paragraph-long-md-font-size: 1.125rem; + --ds-paragraph-long-md-letter-spacing: 0.5%; + --ds-paragraph-long-sm-font-weight: 400; + --ds-paragraph-long-sm-line-height: 1.7; + --ds-paragraph-long-sm-font-size: 1rem; + --ds-paragraph-long-sm-letter-spacing: 0.25%; + --ds-paragraph-long-xs-font-weight: 400; + --ds-paragraph-long-xs-line-height: 1.7; + --ds-paragraph-long-xs-font-size: 0.875rem; + --ds-paragraph-long-xs-letter-spacing: 0.15%; + --ds-label-lg-font-weight: 500; + --ds-label-lg-line-height: 1.3; + --ds-label-lg-font-size: 1.3125rem; + --ds-label-lg-letter-spacing: 0.5%; + --ds-label-md-font-weight: 500; + --ds-label-md-line-height: 1.3; + --ds-label-md-font-size: 1.125rem; + --ds-label-md-letter-spacing: 0.5%; + --ds-label-sm-font-weight: 500; + --ds-label-sm-line-height: 1.3; + --ds-label-sm-font-size: 1rem; + --ds-label-sm-letter-spacing: 0.25%; + --ds-label-xs-font-weight: 500; + --ds-label-xs-line-height: 1.3; + --ds-label-xs-font-size: 0.875rem; + --ds-label-xs-letter-spacing: 0.15%; + --ds-error_message-lg-font-weight: 400; + --ds-error_message-lg-line-height: 1.3; + --ds-error_message-lg-font-size: 1.3125rem; + --ds-error_message-lg-letter-spacing: 0.5%; + --ds-error_message-md-font-weight: 400; + --ds-error_message-md-line-height: 1.3; + --ds-error_message-md-font-size: 1.125rem; + --ds-error_message-md-letter-spacing: 0.5%; + --ds-error_message-sm-font-weight: 400; + --ds-error_message-sm-line-height: 1.3; + --ds-error_message-sm-font-size: 1rem; + --ds-error_message-sm-letter-spacing: 0.25%; + --ds-error_message-xs-font-weight: 400; + --ds-error_message-xs-line-height: 1.3; + --ds-error_message-xs-font-size: 0.875rem; + --ds-error_message-xs-letter-spacing: 0.15%; --ds-line-height-sm: 1.3; --ds-line-height-md: 1.5; --ds-line-height-lg: 1.7; @@ -31,246 +155,5 @@ --ds-letter-spacing-7: 0.25%; --ds-letter-spacing-8: 0.5%; --ds-letter-spacing-9: 1.5%; - - .ds-error_message--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-error_message--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-error_message--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-error_message--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-label--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-label--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-long--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-long--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-short--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-short--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-ingress--sm { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-ingress--md { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--lg { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-heading--2xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--xs { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--sm { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-5); - } - - .ds-heading--md { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-3); - } - - .ds-heading--lg { - font-size: var(--ds-font-size-9); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-2); - } - - .ds-heading--xl { - font-size: var(--ds-font-size-10); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-heading--2xl { - font-size: var(--ds-font-size-11); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-font-weight--medium { - font-weight: 500; - } - - .ds-font-weight--semibold { - font-weight: 600; - } - - .ds-font-weight--regular { - font-weight: 400; - } - - .ds-line-height--sm { - line-height: 1.3; - } - - .ds-line-height--md { - line-height: 1.5; - } - - .ds-line-height--lg { - line-height: 1.7; - } } } \ No newline at end of file diff --git a/packages/theme/brand/digdir/typography/secondary.css b/packages/theme/brand/digdir/typography/secondary.css index 1bb2f8b2f6..a2f03cf0f2 100644 --- a/packages/theme/brand/digdir/typography/secondary.css +++ b/packages/theme/brand/digdir/typography/secondary.css @@ -8,6 +8,130 @@ --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-font-size: 3.75rem; + --ds-heading-2xl-letter-spacing: -1%; + --ds-heading-xl-font-weight: 500; + --ds-heading-xl-line-height: 1.3; + --ds-heading-xl-font-size: 3rem; + --ds-heading-xl-letter-spacing: -1%; + --ds-heading-lg-font-weight: 500; + --ds-heading-lg-line-height: 1.3; + --ds-heading-lg-font-size: 2.25rem; + --ds-heading-lg-letter-spacing: -0.5%; + --ds-heading-md-font-weight: 500; + --ds-heading-md-line-height: 1.3; + --ds-heading-md-font-size: 1.875rem; + --ds-heading-md-letter-spacing: -0.25%; + --ds-heading-sm-font-weight: 500; + --ds-heading-sm-line-height: 1.3; + --ds-heading-sm-font-size: 1.5rem; + --ds-heading-sm-letter-spacing: 0%; + --ds-heading-xs-font-weight: 500; + --ds-heading-xs-line-height: 1.3; + --ds-heading-xs-font-size: 1.3125rem; + --ds-heading-xs-letter-spacing: 0.15%; + --ds-heading-2xs-font-weight: 500; + --ds-heading-2xs-line-height: 1.3; + --ds-heading-2xs-font-size: 1.125rem; + --ds-heading-2xs-letter-spacing: 0.15%; + --ds-ingress-lg-font-weight: 400; + --ds-ingress-lg-line-height: 1.7; + --ds-ingress-lg-font-size: 1.875rem; + --ds-ingress-lg-letter-spacing: 0.5%; + --ds-ingress-md-font-weight: 400; + --ds-ingress-md-line-height: 1.7; + --ds-ingress-md-font-size: 1.5rem; + --ds-ingress-md-letter-spacing: 0.5%; + --ds-ingress-sm-font-weight: 400; + --ds-ingress-sm-line-height: 1.7; + --ds-ingress-sm-font-size: 1.3125rem; + --ds-ingress-sm-letter-spacing: 0.25%; + --ds-ingress-xs-font-weight: 400; + --ds-ingress-xs-line-height: 1.7; + --ds-ingress-xs-font-size: 1.125rem; + --ds-ingress-xs-letter-spacing: 0.15%; + --ds-paragraph-lg-font-weight: 400; + --ds-paragraph-lg-line-height: 1.5; + --ds-paragraph-lg-font-size: 1.3125rem; + --ds-paragraph-lg-letter-spacing: 0.5%; + --ds-paragraph-md-font-weight: 400; + --ds-paragraph-md-line-height: 1.5; + --ds-paragraph-md-font-size: 1.125rem; + --ds-paragraph-md-letter-spacing: 0.5%; + --ds-paragraph-sm-font-weight: 400; + --ds-paragraph-sm-line-height: 1.5; + --ds-paragraph-sm-font-size: 1rem; + --ds-paragraph-sm-letter-spacing: 0.25%; + --ds-paragraph-xs-font-weight: 400; + --ds-paragraph-xs-line-height: 1.5; + --ds-paragraph-xs-font-size: 0.875rem; + --ds-paragraph-xs-letter-spacing: 0.15%; + --ds-paragraph-short-lg-font-weight: 400; + --ds-paragraph-short-lg-line-height: 1.3; + --ds-paragraph-short-lg-font-size: 1.3125rem; + --ds-paragraph-short-lg-letter-spacing: 0.5%; + --ds-paragraph-short-md-font-weight: 400; + --ds-paragraph-short-md-line-height: 1.3; + --ds-paragraph-short-md-font-size: 1.125rem; + --ds-paragraph-short-md-letter-spacing: 0.5%; + --ds-paragraph-short-sm-font-weight: 400; + --ds-paragraph-short-sm-line-height: 1.3; + --ds-paragraph-short-sm-font-size: 1rem; + --ds-paragraph-short-sm-letter-spacing: 0.25%; + --ds-paragraph-short-xs-font-weight: 400; + --ds-paragraph-short-xs-line-height: 1.3; + --ds-paragraph-short-xs-font-size: 0.875rem; + --ds-paragraph-short-xs-letter-spacing: 0.15%; + --ds-paragraph-long-lg-font-weight: 400; + --ds-paragraph-long-lg-line-height: 1.7; + --ds-paragraph-long-lg-font-size: 1.3125rem; + --ds-paragraph-long-lg-letter-spacing: 0.5%; + --ds-paragraph-long-md-font-weight: 400; + --ds-paragraph-long-md-line-height: 1.7; + --ds-paragraph-long-md-font-size: 1.125rem; + --ds-paragraph-long-md-letter-spacing: 0.5%; + --ds-paragraph-long-sm-font-weight: 400; + --ds-paragraph-long-sm-line-height: 1.7; + --ds-paragraph-long-sm-font-size: 1rem; + --ds-paragraph-long-sm-letter-spacing: 0.25%; + --ds-paragraph-long-xs-font-weight: 400; + --ds-paragraph-long-xs-line-height: 1.7; + --ds-paragraph-long-xs-font-size: 0.875rem; + --ds-paragraph-long-xs-letter-spacing: 0.15%; + --ds-label-lg-font-weight: 500; + --ds-label-lg-line-height: 1.3; + --ds-label-lg-font-size: 1.3125rem; + --ds-label-lg-letter-spacing: 0.5%; + --ds-label-md-font-weight: 500; + --ds-label-md-line-height: 1.3; + --ds-label-md-font-size: 1.125rem; + --ds-label-md-letter-spacing: 0.5%; + --ds-label-sm-font-weight: 500; + --ds-label-sm-line-height: 1.3; + --ds-label-sm-font-size: 1rem; + --ds-label-sm-letter-spacing: 0.25%; + --ds-label-xs-font-weight: 500; + --ds-label-xs-line-height: 1.3; + --ds-label-xs-font-size: 0.875rem; + --ds-label-xs-letter-spacing: 0.15%; + --ds-error_message-lg-font-weight: 400; + --ds-error_message-lg-line-height: 1.3; + --ds-error_message-lg-font-size: 1.3125rem; + --ds-error_message-lg-letter-spacing: 0.5%; + --ds-error_message-md-font-weight: 400; + --ds-error_message-md-line-height: 1.3; + --ds-error_message-md-font-size: 1.125rem; + --ds-error_message-md-letter-spacing: 0.5%; + --ds-error_message-sm-font-weight: 400; + --ds-error_message-sm-line-height: 1.3; + --ds-error_message-sm-font-size: 1rem; + --ds-error_message-sm-letter-spacing: 0.25%; + --ds-error_message-xs-font-weight: 400; + --ds-error_message-xs-line-height: 1.3; + --ds-error_message-xs-font-size: 0.875rem; + --ds-error_message-xs-letter-spacing: 0.15%; --ds-line-height-sm: 1.3; --ds-line-height-md: 1.5; --ds-line-height-lg: 1.7; @@ -31,246 +155,5 @@ --ds-letter-spacing-7: 0.25%; --ds-letter-spacing-8: 0.5%; --ds-letter-spacing-9: 1.5%; - - .ds-error_message--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-error_message--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-error_message--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-error_message--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-label--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-label--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-long--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-long--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-short--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-short--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-ingress--sm { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-ingress--md { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--lg { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-heading--2xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--xs { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--sm { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-5); - } - - .ds-heading--md { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-3); - } - - .ds-heading--lg { - font-size: var(--ds-font-size-9); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-2); - } - - .ds-heading--xl { - font-size: var(--ds-font-size-10); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-heading--2xl { - font-size: var(--ds-font-size-11); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-font-weight--medium { - font-weight: 500; - } - - .ds-font-weight--semibold { - font-weight: 600; - } - - .ds-font-weight--regular { - font-weight: 400; - } - - .ds-line-height--sm { - line-height: 1.3; - } - - .ds-line-height--md { - line-height: 1.5; - } - - .ds-line-height--lg { - line-height: 1.7; - } } } \ No newline at end of file diff --git a/packages/theme/brand/portal.css b/packages/theme/brand/portal.css index ca22e90524..c75fc9397e 100644 --- a/packages/theme/brand/portal.css +++ b/packages/theme/brand/portal.css @@ -310,7 +310,8 @@ --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #fefefe; --ds-color-focus-outer: #420e6a; -color-scheme: light; + + color-scheme: light; } @media (prefers-color-scheme: light) { @@ -617,7 +618,8 @@ color-scheme: light; --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #fefefe; --ds-color-focus-outer: #420e6a; -color-scheme: light; + + color-scheme: light; } } @@ -634,6 +636,130 @@ color-scheme: light; --ds-font-weight-medium: 400; --ds-font-weight-semibold: 700; --ds-font-weight-regular: 400; + --ds-heading-2xl-font-weight: 400; + --ds-heading-2xl-line-height: 1.3; + --ds-heading-2xl-font-size: 3.75rem; + --ds-heading-2xl-letter-spacing: -1%; + --ds-heading-xl-font-weight: 400; + --ds-heading-xl-line-height: 1.3; + --ds-heading-xl-font-size: 3rem; + --ds-heading-xl-letter-spacing: -1%; + --ds-heading-lg-font-weight: 400; + --ds-heading-lg-line-height: 1.3; + --ds-heading-lg-font-size: 2.25rem; + --ds-heading-lg-letter-spacing: -0.5%; + --ds-heading-md-font-weight: 400; + --ds-heading-md-line-height: 1.3; + --ds-heading-md-font-size: 1.875rem; + --ds-heading-md-letter-spacing: -0.25%; + --ds-heading-sm-font-weight: 400; + --ds-heading-sm-line-height: 1.3; + --ds-heading-sm-font-size: 1.5rem; + --ds-heading-sm-letter-spacing: 0%; + --ds-heading-xs-font-weight: 400; + --ds-heading-xs-line-height: 1.3; + --ds-heading-xs-font-size: 1.3125rem; + --ds-heading-xs-letter-spacing: 0.15%; + --ds-heading-2xs-font-weight: 400; + --ds-heading-2xs-line-height: 1.3; + --ds-heading-2xs-font-size: 1.125rem; + --ds-heading-2xs-letter-spacing: 0.15%; + --ds-ingress-lg-font-weight: 400; + --ds-ingress-lg-line-height: 1.7; + --ds-ingress-lg-font-size: 1.875rem; + --ds-ingress-lg-letter-spacing: 0.5%; + --ds-ingress-md-font-weight: 400; + --ds-ingress-md-line-height: 1.7; + --ds-ingress-md-font-size: 1.5rem; + --ds-ingress-md-letter-spacing: 0.5%; + --ds-ingress-sm-font-weight: 400; + --ds-ingress-sm-line-height: 1.7; + --ds-ingress-sm-font-size: 1.3125rem; + --ds-ingress-sm-letter-spacing: 0.25%; + --ds-ingress-xs-font-weight: 400; + --ds-ingress-xs-line-height: 1.7; + --ds-ingress-xs-font-size: 1.125rem; + --ds-ingress-xs-letter-spacing: 0.15%; + --ds-paragraph-lg-font-weight: 400; + --ds-paragraph-lg-line-height: 1.5; + --ds-paragraph-lg-font-size: 1.3125rem; + --ds-paragraph-lg-letter-spacing: 0.5%; + --ds-paragraph-md-font-weight: 400; + --ds-paragraph-md-line-height: 1.5; + --ds-paragraph-md-font-size: 1.125rem; + --ds-paragraph-md-letter-spacing: 0.5%; + --ds-paragraph-sm-font-weight: 400; + --ds-paragraph-sm-line-height: 1.5; + --ds-paragraph-sm-font-size: 1rem; + --ds-paragraph-sm-letter-spacing: 0.25%; + --ds-paragraph-xs-font-weight: 400; + --ds-paragraph-xs-line-height: 1.5; + --ds-paragraph-xs-font-size: 0.875rem; + --ds-paragraph-xs-letter-spacing: 0.15%; + --ds-paragraph-short-lg-font-weight: 400; + --ds-paragraph-short-lg-line-height: 1.3; + --ds-paragraph-short-lg-font-size: 1.3125rem; + --ds-paragraph-short-lg-letter-spacing: 0.5%; + --ds-paragraph-short-md-font-weight: 400; + --ds-paragraph-short-md-line-height: 1.3; + --ds-paragraph-short-md-font-size: 1.125rem; + --ds-paragraph-short-md-letter-spacing: 0.5%; + --ds-paragraph-short-sm-font-weight: 400; + --ds-paragraph-short-sm-line-height: 1.3; + --ds-paragraph-short-sm-font-size: 1rem; + --ds-paragraph-short-sm-letter-spacing: 0.25%; + --ds-paragraph-short-xs-font-weight: 400; + --ds-paragraph-short-xs-line-height: 1.3; + --ds-paragraph-short-xs-font-size: 0.875rem; + --ds-paragraph-short-xs-letter-spacing: 0.15%; + --ds-paragraph-long-lg-font-weight: 400; + --ds-paragraph-long-lg-line-height: 1.7; + --ds-paragraph-long-lg-font-size: 1.3125rem; + --ds-paragraph-long-lg-letter-spacing: 0.5%; + --ds-paragraph-long-md-font-weight: 400; + --ds-paragraph-long-md-line-height: 1.7; + --ds-paragraph-long-md-font-size: 1.125rem; + --ds-paragraph-long-md-letter-spacing: 0.5%; + --ds-paragraph-long-sm-font-weight: 400; + --ds-paragraph-long-sm-line-height: 1.7; + --ds-paragraph-long-sm-font-size: 1rem; + --ds-paragraph-long-sm-letter-spacing: 0.25%; + --ds-paragraph-long-xs-font-weight: 400; + --ds-paragraph-long-xs-line-height: 1.7; + --ds-paragraph-long-xs-font-size: 0.875rem; + --ds-paragraph-long-xs-letter-spacing: 0.15%; + --ds-label-lg-font-weight: 400; + --ds-label-lg-line-height: 1.3; + --ds-label-lg-font-size: 1.3125rem; + --ds-label-lg-letter-spacing: 0.5%; + --ds-label-md-font-weight: 400; + --ds-label-md-line-height: 1.3; + --ds-label-md-font-size: 1.125rem; + --ds-label-md-letter-spacing: 0.5%; + --ds-label-sm-font-weight: 400; + --ds-label-sm-line-height: 1.3; + --ds-label-sm-font-size: 1rem; + --ds-label-sm-letter-spacing: 0.25%; + --ds-label-xs-font-weight: 400; + --ds-label-xs-line-height: 1.3; + --ds-label-xs-font-size: 0.875rem; + --ds-label-xs-letter-spacing: 0.15%; + --ds-error_message-lg-font-weight: 400; + --ds-error_message-lg-line-height: 1.3; + --ds-error_message-lg-font-size: 1.3125rem; + --ds-error_message-lg-letter-spacing: 0.5%; + --ds-error_message-md-font-weight: 400; + --ds-error_message-md-line-height: 1.3; + --ds-error_message-md-font-size: 1.125rem; + --ds-error_message-md-letter-spacing: 0.5%; + --ds-error_message-sm-font-weight: 400; + --ds-error_message-sm-line-height: 1.3; + --ds-error_message-sm-font-size: 1rem; + --ds-error_message-sm-letter-spacing: 0.25%; + --ds-error_message-xs-font-weight: 400; + --ds-error_message-xs-line-height: 1.3; + --ds-error_message-xs-font-size: 0.875rem; + --ds-error_message-xs-letter-spacing: 0.15%; --ds-line-height-sm: 1.3; --ds-line-height-md: 1.5; --ds-line-height-lg: 1.7; @@ -657,247 +783,6 @@ color-scheme: light; --ds-letter-spacing-7: 0.25%; --ds-letter-spacing-8: 0.5%; --ds-letter-spacing-9: 1.5%; - - .ds-error_message--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-error_message--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-error_message--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-error_message--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-label--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-label--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-long--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-long--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-short--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-short--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-ingress--sm { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-ingress--md { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--lg { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-heading--2xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--xs { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--sm { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-5); - } - - .ds-heading--md { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-3); - } - - .ds-heading--lg { - font-size: var(--ds-font-size-9); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-2); - } - - .ds-heading--xl { - font-size: var(--ds-font-size-10); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-heading--2xl { - font-size: var(--ds-font-size-11); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-font-weight--medium { - font-weight: 400; - } - - .ds-font-weight--semibold { - font-weight: 700; - } - - .ds-font-weight--regular { - font-weight: 400; - } - - .ds-line-height--sm { - line-height: 1.3; - } - - .ds-line-height--md { - line-height: 1.5; - } - - .ds-line-height--lg { - line-height: 1.7; - } } } /** @@ -906,37 +791,6 @@ color-scheme: light; @layer ds.theme.semantic { :root { - --ds-typography-heading-2xl: 500 3.75rem/1.3 'Inter'; - --ds-typography-heading-xl: 500 3rem/1.3 'Inter'; - --ds-typography-heading-lg: 500 2.25rem/1.3 'Inter'; - --ds-typography-heading-md: 500 1.875rem/1.3 'Inter'; - --ds-typography-heading-sm: 500 1.5rem/1.3 'Inter'; - --ds-typography-heading-xs: 500 1.3125rem/1.3 'Inter'; - --ds-typography-heading-2xs: 500 1.125rem/1.3 'Inter'; - --ds-typography-ingress-lg: 400 1.875rem/1.7 'Inter'; - --ds-typography-ingress-md: 400 1.5rem/1.7 'Inter'; - --ds-typography-ingress-sm: 400 1.3125rem/1.7 'Inter'; - --ds-typography-ingress-xs: 400 1.125rem/1.7 'Inter'; - --ds-typography-paragraph-lg: 400 1.3125rem/1.5 'Inter'; - --ds-typography-paragraph-md: 400 1.125rem/1.5 'Inter'; - --ds-typography-paragraph-sm: 400 1rem/1.5 'Inter'; - --ds-typography-paragraph-xs: 400 0.875rem/1.5 'Inter'; - --ds-typography-paragraph-short-lg: 400 1.3125rem/1.3 'Inter'; - --ds-typography-paragraph-short-md: 400 1.125rem/1.3 'Inter'; - --ds-typography-paragraph-short-sm: 400 1rem/1.3 'Inter'; - --ds-typography-paragraph-short-xs: 400 0.875rem/1.3 'Inter'; - --ds-typography-paragraph-long-lg: 400 1.3125rem/1.7 'Inter'; - --ds-typography-paragraph-long-md: 400 1.125rem/1.7 'Inter'; - --ds-typography-paragraph-long-sm: 400 1rem/1.7 'Inter'; - --ds-typography-paragraph-long-xs: 400 0.875rem/1.7 'Inter'; - --ds-typography-label-lg: 500 1.3125rem/1.3 'Inter'; - --ds-typography-label-md: 500 1.125rem/1.3 'Inter'; - --ds-typography-label-sm: 500 1rem/1.3 'Inter'; - --ds-typography-label-xs: 500 0.875rem/1.3 'Inter'; - --ds-typography-error_message-lg: 400 1.3125rem/1.3 'Inter'; - --ds-typography-error_message-md: 400 1.125rem/1.3 'Inter'; - --ds-typography-error_message-sm: 400 1rem/1.3 'Inter'; - --ds-typography-error_message-xs: 400 0.875rem/1.3 'Inter'; --ds-disabled-opacity: 30%; --ds-border-radius-sm: calc(var(--ds-border-radius-base)*0.5); --ds-border-radius-md: calc(var(--ds-border-radius-base)*1); @@ -1308,7 +1162,8 @@ color-scheme: light; --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #131c27; --ds-color-focus-outer: #e8e0ee; -color-scheme: dark; + + color-scheme: dark; } @media (prefers-color-scheme: dark) { @@ -1615,7 +1470,8 @@ color-scheme: dark; --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #131c27; --ds-color-focus-outer: #e8e0ee; -color-scheme: dark; + + color-scheme: dark; } } @@ -1632,6 +1488,130 @@ color-scheme: dark; --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-font-size: 3.75rem; + --ds-heading-2xl-letter-spacing: -1%; + --ds-heading-xl-font-weight: 500; + --ds-heading-xl-line-height: 1.3; + --ds-heading-xl-font-size: 3rem; + --ds-heading-xl-letter-spacing: -1%; + --ds-heading-lg-font-weight: 500; + --ds-heading-lg-line-height: 1.3; + --ds-heading-lg-font-size: 2.25rem; + --ds-heading-lg-letter-spacing: -0.5%; + --ds-heading-md-font-weight: 500; + --ds-heading-md-line-height: 1.3; + --ds-heading-md-font-size: 1.875rem; + --ds-heading-md-letter-spacing: -0.25%; + --ds-heading-sm-font-weight: 500; + --ds-heading-sm-line-height: 1.3; + --ds-heading-sm-font-size: 1.5rem; + --ds-heading-sm-letter-spacing: 0%; + --ds-heading-xs-font-weight: 500; + --ds-heading-xs-line-height: 1.3; + --ds-heading-xs-font-size: 1.3125rem; + --ds-heading-xs-letter-spacing: 0.15%; + --ds-heading-2xs-font-weight: 500; + --ds-heading-2xs-line-height: 1.3; + --ds-heading-2xs-font-size: 1.125rem; + --ds-heading-2xs-letter-spacing: 0.15%; + --ds-ingress-lg-font-weight: 400; + --ds-ingress-lg-line-height: 1.7; + --ds-ingress-lg-font-size: 1.875rem; + --ds-ingress-lg-letter-spacing: 0.5%; + --ds-ingress-md-font-weight: 400; + --ds-ingress-md-line-height: 1.7; + --ds-ingress-md-font-size: 1.5rem; + --ds-ingress-md-letter-spacing: 0.5%; + --ds-ingress-sm-font-weight: 400; + --ds-ingress-sm-line-height: 1.7; + --ds-ingress-sm-font-size: 1.3125rem; + --ds-ingress-sm-letter-spacing: 0.25%; + --ds-ingress-xs-font-weight: 400; + --ds-ingress-xs-line-height: 1.7; + --ds-ingress-xs-font-size: 1.125rem; + --ds-ingress-xs-letter-spacing: 0.15%; + --ds-paragraph-lg-font-weight: 400; + --ds-paragraph-lg-line-height: 1.5; + --ds-paragraph-lg-font-size: 1.3125rem; + --ds-paragraph-lg-letter-spacing: 0.5%; + --ds-paragraph-md-font-weight: 400; + --ds-paragraph-md-line-height: 1.5; + --ds-paragraph-md-font-size: 1.125rem; + --ds-paragraph-md-letter-spacing: 0.5%; + --ds-paragraph-sm-font-weight: 400; + --ds-paragraph-sm-line-height: 1.5; + --ds-paragraph-sm-font-size: 1rem; + --ds-paragraph-sm-letter-spacing: 0.25%; + --ds-paragraph-xs-font-weight: 400; + --ds-paragraph-xs-line-height: 1.5; + --ds-paragraph-xs-font-size: 0.875rem; + --ds-paragraph-xs-letter-spacing: 0.15%; + --ds-paragraph-short-lg-font-weight: 400; + --ds-paragraph-short-lg-line-height: 1.3; + --ds-paragraph-short-lg-font-size: 1.3125rem; + --ds-paragraph-short-lg-letter-spacing: 0.5%; + --ds-paragraph-short-md-font-weight: 400; + --ds-paragraph-short-md-line-height: 1.3; + --ds-paragraph-short-md-font-size: 1.125rem; + --ds-paragraph-short-md-letter-spacing: 0.5%; + --ds-paragraph-short-sm-font-weight: 400; + --ds-paragraph-short-sm-line-height: 1.3; + --ds-paragraph-short-sm-font-size: 1rem; + --ds-paragraph-short-sm-letter-spacing: 0.25%; + --ds-paragraph-short-xs-font-weight: 400; + --ds-paragraph-short-xs-line-height: 1.3; + --ds-paragraph-short-xs-font-size: 0.875rem; + --ds-paragraph-short-xs-letter-spacing: 0.15%; + --ds-paragraph-long-lg-font-weight: 400; + --ds-paragraph-long-lg-line-height: 1.7; + --ds-paragraph-long-lg-font-size: 1.3125rem; + --ds-paragraph-long-lg-letter-spacing: 0.5%; + --ds-paragraph-long-md-font-weight: 400; + --ds-paragraph-long-md-line-height: 1.7; + --ds-paragraph-long-md-font-size: 1.125rem; + --ds-paragraph-long-md-letter-spacing: 0.5%; + --ds-paragraph-long-sm-font-weight: 400; + --ds-paragraph-long-sm-line-height: 1.7; + --ds-paragraph-long-sm-font-size: 1rem; + --ds-paragraph-long-sm-letter-spacing: 0.25%; + --ds-paragraph-long-xs-font-weight: 400; + --ds-paragraph-long-xs-line-height: 1.7; + --ds-paragraph-long-xs-font-size: 0.875rem; + --ds-paragraph-long-xs-letter-spacing: 0.15%; + --ds-label-lg-font-weight: 500; + --ds-label-lg-line-height: 1.3; + --ds-label-lg-font-size: 1.3125rem; + --ds-label-lg-letter-spacing: 0.5%; + --ds-label-md-font-weight: 500; + --ds-label-md-line-height: 1.3; + --ds-label-md-font-size: 1.125rem; + --ds-label-md-letter-spacing: 0.5%; + --ds-label-sm-font-weight: 500; + --ds-label-sm-line-height: 1.3; + --ds-label-sm-font-size: 1rem; + --ds-label-sm-letter-spacing: 0.25%; + --ds-label-xs-font-weight: 500; + --ds-label-xs-line-height: 1.3; + --ds-label-xs-font-size: 0.875rem; + --ds-label-xs-letter-spacing: 0.15%; + --ds-error_message-lg-font-weight: 400; + --ds-error_message-lg-line-height: 1.3; + --ds-error_message-lg-font-size: 1.3125rem; + --ds-error_message-lg-letter-spacing: 0.5%; + --ds-error_message-md-font-weight: 400; + --ds-error_message-md-line-height: 1.3; + --ds-error_message-md-font-size: 1.125rem; + --ds-error_message-md-letter-spacing: 0.5%; + --ds-error_message-sm-font-weight: 400; + --ds-error_message-sm-line-height: 1.3; + --ds-error_message-sm-font-size: 1rem; + --ds-error_message-sm-letter-spacing: 0.25%; + --ds-error_message-xs-font-weight: 400; + --ds-error_message-xs-line-height: 1.3; + --ds-error_message-xs-font-size: 0.875rem; + --ds-error_message-xs-letter-spacing: 0.15%; --ds-line-height-sm: 1.3; --ds-line-height-md: 1.5; --ds-line-height-lg: 1.7; @@ -1655,246 +1635,5 @@ color-scheme: dark; --ds-letter-spacing-7: 0.25%; --ds-letter-spacing-8: 0.5%; --ds-letter-spacing-9: 1.5%; - - .ds-error_message--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-error_message--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-error_message--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-error_message--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-label--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-label--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-long--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-long--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-short--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-short--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-ingress--sm { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-ingress--md { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--lg { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-heading--2xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--xs { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--sm { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-5); - } - - .ds-heading--md { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-3); - } - - .ds-heading--lg { - font-size: var(--ds-font-size-9); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-2); - } - - .ds-heading--xl { - font-size: var(--ds-font-size-10); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-heading--2xl { - font-size: var(--ds-font-size-11); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-font-weight--medium { - font-weight: 500; - } - - .ds-font-weight--semibold { - font-weight: 600; - } - - .ds-font-weight--regular { - font-weight: 400; - } - - .ds-line-height--sm { - line-height: 1.3; - } - - .ds-line-height--md { - line-height: 1.5; - } - - .ds-line-height--lg { - line-height: 1.7; - } } } \ No newline at end of file diff --git a/packages/theme/brand/portal/color-mode/dark.css b/packages/theme/brand/portal/color-mode/dark.css index 41e13114a9..d809fa82da 100644 --- a/packages/theme/brand/portal/color-mode/dark.css +++ b/packages/theme/brand/portal/color-mode/dark.css @@ -306,7 +306,8 @@ --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #131c27; --ds-color-focus-outer: #e8e0ee; -color-scheme: dark; + + color-scheme: dark; } @media (prefers-color-scheme: dark) { @@ -613,7 +614,8 @@ color-scheme: dark; --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #131c27; --ds-color-focus-outer: #e8e0ee; -color-scheme: dark; + + color-scheme: dark; } } diff --git a/packages/theme/brand/portal/color-mode/light.css b/packages/theme/brand/portal/color-mode/light.css index 0cd3df4ae9..6d84c2b76c 100644 --- a/packages/theme/brand/portal/color-mode/light.css +++ b/packages/theme/brand/portal/color-mode/light.css @@ -306,7 +306,8 @@ --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #fefefe; --ds-color-focus-outer: #420e6a; -color-scheme: light; + + color-scheme: light; } @media (prefers-color-scheme: light) { @@ -613,7 +614,8 @@ color-scheme: light; --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #fefefe; --ds-color-focus-outer: #420e6a; -color-scheme: light; + + color-scheme: light; } } diff --git a/packages/theme/brand/portal/semantic.css b/packages/theme/brand/portal/semantic.css index 67246fa1ce..5a7b277320 100644 --- a/packages/theme/brand/portal/semantic.css +++ b/packages/theme/brand/portal/semantic.css @@ -4,37 +4,6 @@ @layer ds.theme.semantic { :root { - --ds-typography-heading-2xl: 500 3.75rem/1.3 'Inter'; - --ds-typography-heading-xl: 500 3rem/1.3 'Inter'; - --ds-typography-heading-lg: 500 2.25rem/1.3 'Inter'; - --ds-typography-heading-md: 500 1.875rem/1.3 'Inter'; - --ds-typography-heading-sm: 500 1.5rem/1.3 'Inter'; - --ds-typography-heading-xs: 500 1.3125rem/1.3 'Inter'; - --ds-typography-heading-2xs: 500 1.125rem/1.3 'Inter'; - --ds-typography-ingress-lg: 400 1.875rem/1.7 'Inter'; - --ds-typography-ingress-md: 400 1.5rem/1.7 'Inter'; - --ds-typography-ingress-sm: 400 1.3125rem/1.7 'Inter'; - --ds-typography-ingress-xs: 400 1.125rem/1.7 'Inter'; - --ds-typography-paragraph-lg: 400 1.3125rem/1.5 'Inter'; - --ds-typography-paragraph-md: 400 1.125rem/1.5 'Inter'; - --ds-typography-paragraph-sm: 400 1rem/1.5 'Inter'; - --ds-typography-paragraph-xs: 400 0.875rem/1.5 'Inter'; - --ds-typography-paragraph-short-lg: 400 1.3125rem/1.3 'Inter'; - --ds-typography-paragraph-short-md: 400 1.125rem/1.3 'Inter'; - --ds-typography-paragraph-short-sm: 400 1rem/1.3 'Inter'; - --ds-typography-paragraph-short-xs: 400 0.875rem/1.3 'Inter'; - --ds-typography-paragraph-long-lg: 400 1.3125rem/1.7 'Inter'; - --ds-typography-paragraph-long-md: 400 1.125rem/1.7 'Inter'; - --ds-typography-paragraph-long-sm: 400 1rem/1.7 'Inter'; - --ds-typography-paragraph-long-xs: 400 0.875rem/1.7 'Inter'; - --ds-typography-label-lg: 500 1.3125rem/1.3 'Inter'; - --ds-typography-label-md: 500 1.125rem/1.3 'Inter'; - --ds-typography-label-sm: 500 1rem/1.3 'Inter'; - --ds-typography-label-xs: 500 0.875rem/1.3 'Inter'; - --ds-typography-error_message-lg: 400 1.3125rem/1.3 'Inter'; - --ds-typography-error_message-md: 400 1.125rem/1.3 'Inter'; - --ds-typography-error_message-sm: 400 1rem/1.3 'Inter'; - --ds-typography-error_message-xs: 400 0.875rem/1.3 'Inter'; --ds-disabled-opacity: 30%; --ds-border-radius-sm: calc(var(--ds-border-radius-base)*0.5); --ds-border-radius-md: calc(var(--ds-border-radius-base)*1); diff --git a/packages/theme/brand/portal/typography/primary.css b/packages/theme/brand/portal/typography/primary.css index c180df3fae..43925c501f 100644 --- a/packages/theme/brand/portal/typography/primary.css +++ b/packages/theme/brand/portal/typography/primary.css @@ -8,6 +8,130 @@ --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-font-size: 3.75rem; + --ds-heading-2xl-letter-spacing: -1%; + --ds-heading-xl-font-weight: 500; + --ds-heading-xl-line-height: 1.3; + --ds-heading-xl-font-size: 3rem; + --ds-heading-xl-letter-spacing: -1%; + --ds-heading-lg-font-weight: 500; + --ds-heading-lg-line-height: 1.3; + --ds-heading-lg-font-size: 2.25rem; + --ds-heading-lg-letter-spacing: -0.5%; + --ds-heading-md-font-weight: 500; + --ds-heading-md-line-height: 1.3; + --ds-heading-md-font-size: 1.875rem; + --ds-heading-md-letter-spacing: -0.25%; + --ds-heading-sm-font-weight: 500; + --ds-heading-sm-line-height: 1.3; + --ds-heading-sm-font-size: 1.5rem; + --ds-heading-sm-letter-spacing: 0%; + --ds-heading-xs-font-weight: 500; + --ds-heading-xs-line-height: 1.3; + --ds-heading-xs-font-size: 1.3125rem; + --ds-heading-xs-letter-spacing: 0.15%; + --ds-heading-2xs-font-weight: 500; + --ds-heading-2xs-line-height: 1.3; + --ds-heading-2xs-font-size: 1.125rem; + --ds-heading-2xs-letter-spacing: 0.15%; + --ds-ingress-lg-font-weight: 400; + --ds-ingress-lg-line-height: 1.7; + --ds-ingress-lg-font-size: 1.875rem; + --ds-ingress-lg-letter-spacing: 0.5%; + --ds-ingress-md-font-weight: 400; + --ds-ingress-md-line-height: 1.7; + --ds-ingress-md-font-size: 1.5rem; + --ds-ingress-md-letter-spacing: 0.5%; + --ds-ingress-sm-font-weight: 400; + --ds-ingress-sm-line-height: 1.7; + --ds-ingress-sm-font-size: 1.3125rem; + --ds-ingress-sm-letter-spacing: 0.25%; + --ds-ingress-xs-font-weight: 400; + --ds-ingress-xs-line-height: 1.7; + --ds-ingress-xs-font-size: 1.125rem; + --ds-ingress-xs-letter-spacing: 0.15%; + --ds-paragraph-lg-font-weight: 400; + --ds-paragraph-lg-line-height: 1.5; + --ds-paragraph-lg-font-size: 1.3125rem; + --ds-paragraph-lg-letter-spacing: 0.5%; + --ds-paragraph-md-font-weight: 400; + --ds-paragraph-md-line-height: 1.5; + --ds-paragraph-md-font-size: 1.125rem; + --ds-paragraph-md-letter-spacing: 0.5%; + --ds-paragraph-sm-font-weight: 400; + --ds-paragraph-sm-line-height: 1.5; + --ds-paragraph-sm-font-size: 1rem; + --ds-paragraph-sm-letter-spacing: 0.25%; + --ds-paragraph-xs-font-weight: 400; + --ds-paragraph-xs-line-height: 1.5; + --ds-paragraph-xs-font-size: 0.875rem; + --ds-paragraph-xs-letter-spacing: 0.15%; + --ds-paragraph-short-lg-font-weight: 400; + --ds-paragraph-short-lg-line-height: 1.3; + --ds-paragraph-short-lg-font-size: 1.3125rem; + --ds-paragraph-short-lg-letter-spacing: 0.5%; + --ds-paragraph-short-md-font-weight: 400; + --ds-paragraph-short-md-line-height: 1.3; + --ds-paragraph-short-md-font-size: 1.125rem; + --ds-paragraph-short-md-letter-spacing: 0.5%; + --ds-paragraph-short-sm-font-weight: 400; + --ds-paragraph-short-sm-line-height: 1.3; + --ds-paragraph-short-sm-font-size: 1rem; + --ds-paragraph-short-sm-letter-spacing: 0.25%; + --ds-paragraph-short-xs-font-weight: 400; + --ds-paragraph-short-xs-line-height: 1.3; + --ds-paragraph-short-xs-font-size: 0.875rem; + --ds-paragraph-short-xs-letter-spacing: 0.15%; + --ds-paragraph-long-lg-font-weight: 400; + --ds-paragraph-long-lg-line-height: 1.7; + --ds-paragraph-long-lg-font-size: 1.3125rem; + --ds-paragraph-long-lg-letter-spacing: 0.5%; + --ds-paragraph-long-md-font-weight: 400; + --ds-paragraph-long-md-line-height: 1.7; + --ds-paragraph-long-md-font-size: 1.125rem; + --ds-paragraph-long-md-letter-spacing: 0.5%; + --ds-paragraph-long-sm-font-weight: 400; + --ds-paragraph-long-sm-line-height: 1.7; + --ds-paragraph-long-sm-font-size: 1rem; + --ds-paragraph-long-sm-letter-spacing: 0.25%; + --ds-paragraph-long-xs-font-weight: 400; + --ds-paragraph-long-xs-line-height: 1.7; + --ds-paragraph-long-xs-font-size: 0.875rem; + --ds-paragraph-long-xs-letter-spacing: 0.15%; + --ds-label-lg-font-weight: 500; + --ds-label-lg-line-height: 1.3; + --ds-label-lg-font-size: 1.3125rem; + --ds-label-lg-letter-spacing: 0.5%; + --ds-label-md-font-weight: 500; + --ds-label-md-line-height: 1.3; + --ds-label-md-font-size: 1.125rem; + --ds-label-md-letter-spacing: 0.5%; + --ds-label-sm-font-weight: 500; + --ds-label-sm-line-height: 1.3; + --ds-label-sm-font-size: 1rem; + --ds-label-sm-letter-spacing: 0.25%; + --ds-label-xs-font-weight: 500; + --ds-label-xs-line-height: 1.3; + --ds-label-xs-font-size: 0.875rem; + --ds-label-xs-letter-spacing: 0.15%; + --ds-error_message-lg-font-weight: 400; + --ds-error_message-lg-line-height: 1.3; + --ds-error_message-lg-font-size: 1.3125rem; + --ds-error_message-lg-letter-spacing: 0.5%; + --ds-error_message-md-font-weight: 400; + --ds-error_message-md-line-height: 1.3; + --ds-error_message-md-font-size: 1.125rem; + --ds-error_message-md-letter-spacing: 0.5%; + --ds-error_message-sm-font-weight: 400; + --ds-error_message-sm-line-height: 1.3; + --ds-error_message-sm-font-size: 1rem; + --ds-error_message-sm-letter-spacing: 0.25%; + --ds-error_message-xs-font-weight: 400; + --ds-error_message-xs-line-height: 1.3; + --ds-error_message-xs-font-size: 0.875rem; + --ds-error_message-xs-letter-spacing: 0.15%; --ds-line-height-sm: 1.3; --ds-line-height-md: 1.5; --ds-line-height-lg: 1.7; @@ -31,246 +155,5 @@ --ds-letter-spacing-7: 0.25%; --ds-letter-spacing-8: 0.5%; --ds-letter-spacing-9: 1.5%; - - .ds-error_message--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-error_message--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-error_message--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-error_message--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-label--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-label--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-long--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-long--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-short--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-short--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-ingress--sm { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-ingress--md { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--lg { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-heading--2xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--xs { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--sm { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-5); - } - - .ds-heading--md { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-3); - } - - .ds-heading--lg { - font-size: var(--ds-font-size-9); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-2); - } - - .ds-heading--xl { - font-size: var(--ds-font-size-10); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-heading--2xl { - font-size: var(--ds-font-size-11); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-font-weight--medium { - font-weight: 500; - } - - .ds-font-weight--semibold { - font-weight: 600; - } - - .ds-font-weight--regular { - font-weight: 400; - } - - .ds-line-height--sm { - line-height: 1.3; - } - - .ds-line-height--md { - line-height: 1.5; - } - - .ds-line-height--lg { - line-height: 1.7; - } } } \ No newline at end of file diff --git a/packages/theme/brand/portal/typography/secondary.css b/packages/theme/brand/portal/typography/secondary.css index fe81fe4ef7..c738d6c785 100644 --- a/packages/theme/brand/portal/typography/secondary.css +++ b/packages/theme/brand/portal/typography/secondary.css @@ -8,6 +8,130 @@ --ds-font-weight-medium: 400; --ds-font-weight-semibold: 700; --ds-font-weight-regular: 400; + --ds-heading-2xl-font-weight: 400; + --ds-heading-2xl-line-height: 1.3; + --ds-heading-2xl-font-size: 3.75rem; + --ds-heading-2xl-letter-spacing: -1%; + --ds-heading-xl-font-weight: 400; + --ds-heading-xl-line-height: 1.3; + --ds-heading-xl-font-size: 3rem; + --ds-heading-xl-letter-spacing: -1%; + --ds-heading-lg-font-weight: 400; + --ds-heading-lg-line-height: 1.3; + --ds-heading-lg-font-size: 2.25rem; + --ds-heading-lg-letter-spacing: -0.5%; + --ds-heading-md-font-weight: 400; + --ds-heading-md-line-height: 1.3; + --ds-heading-md-font-size: 1.875rem; + --ds-heading-md-letter-spacing: -0.25%; + --ds-heading-sm-font-weight: 400; + --ds-heading-sm-line-height: 1.3; + --ds-heading-sm-font-size: 1.5rem; + --ds-heading-sm-letter-spacing: 0%; + --ds-heading-xs-font-weight: 400; + --ds-heading-xs-line-height: 1.3; + --ds-heading-xs-font-size: 1.3125rem; + --ds-heading-xs-letter-spacing: 0.15%; + --ds-heading-2xs-font-weight: 400; + --ds-heading-2xs-line-height: 1.3; + --ds-heading-2xs-font-size: 1.125rem; + --ds-heading-2xs-letter-spacing: 0.15%; + --ds-ingress-lg-font-weight: 400; + --ds-ingress-lg-line-height: 1.7; + --ds-ingress-lg-font-size: 1.875rem; + --ds-ingress-lg-letter-spacing: 0.5%; + --ds-ingress-md-font-weight: 400; + --ds-ingress-md-line-height: 1.7; + --ds-ingress-md-font-size: 1.5rem; + --ds-ingress-md-letter-spacing: 0.5%; + --ds-ingress-sm-font-weight: 400; + --ds-ingress-sm-line-height: 1.7; + --ds-ingress-sm-font-size: 1.3125rem; + --ds-ingress-sm-letter-spacing: 0.25%; + --ds-ingress-xs-font-weight: 400; + --ds-ingress-xs-line-height: 1.7; + --ds-ingress-xs-font-size: 1.125rem; + --ds-ingress-xs-letter-spacing: 0.15%; + --ds-paragraph-lg-font-weight: 400; + --ds-paragraph-lg-line-height: 1.5; + --ds-paragraph-lg-font-size: 1.3125rem; + --ds-paragraph-lg-letter-spacing: 0.5%; + --ds-paragraph-md-font-weight: 400; + --ds-paragraph-md-line-height: 1.5; + --ds-paragraph-md-font-size: 1.125rem; + --ds-paragraph-md-letter-spacing: 0.5%; + --ds-paragraph-sm-font-weight: 400; + --ds-paragraph-sm-line-height: 1.5; + --ds-paragraph-sm-font-size: 1rem; + --ds-paragraph-sm-letter-spacing: 0.25%; + --ds-paragraph-xs-font-weight: 400; + --ds-paragraph-xs-line-height: 1.5; + --ds-paragraph-xs-font-size: 0.875rem; + --ds-paragraph-xs-letter-spacing: 0.15%; + --ds-paragraph-short-lg-font-weight: 400; + --ds-paragraph-short-lg-line-height: 1.3; + --ds-paragraph-short-lg-font-size: 1.3125rem; + --ds-paragraph-short-lg-letter-spacing: 0.5%; + --ds-paragraph-short-md-font-weight: 400; + --ds-paragraph-short-md-line-height: 1.3; + --ds-paragraph-short-md-font-size: 1.125rem; + --ds-paragraph-short-md-letter-spacing: 0.5%; + --ds-paragraph-short-sm-font-weight: 400; + --ds-paragraph-short-sm-line-height: 1.3; + --ds-paragraph-short-sm-font-size: 1rem; + --ds-paragraph-short-sm-letter-spacing: 0.25%; + --ds-paragraph-short-xs-font-weight: 400; + --ds-paragraph-short-xs-line-height: 1.3; + --ds-paragraph-short-xs-font-size: 0.875rem; + --ds-paragraph-short-xs-letter-spacing: 0.15%; + --ds-paragraph-long-lg-font-weight: 400; + --ds-paragraph-long-lg-line-height: 1.7; + --ds-paragraph-long-lg-font-size: 1.3125rem; + --ds-paragraph-long-lg-letter-spacing: 0.5%; + --ds-paragraph-long-md-font-weight: 400; + --ds-paragraph-long-md-line-height: 1.7; + --ds-paragraph-long-md-font-size: 1.125rem; + --ds-paragraph-long-md-letter-spacing: 0.5%; + --ds-paragraph-long-sm-font-weight: 400; + --ds-paragraph-long-sm-line-height: 1.7; + --ds-paragraph-long-sm-font-size: 1rem; + --ds-paragraph-long-sm-letter-spacing: 0.25%; + --ds-paragraph-long-xs-font-weight: 400; + --ds-paragraph-long-xs-line-height: 1.7; + --ds-paragraph-long-xs-font-size: 0.875rem; + --ds-paragraph-long-xs-letter-spacing: 0.15%; + --ds-label-lg-font-weight: 400; + --ds-label-lg-line-height: 1.3; + --ds-label-lg-font-size: 1.3125rem; + --ds-label-lg-letter-spacing: 0.5%; + --ds-label-md-font-weight: 400; + --ds-label-md-line-height: 1.3; + --ds-label-md-font-size: 1.125rem; + --ds-label-md-letter-spacing: 0.5%; + --ds-label-sm-font-weight: 400; + --ds-label-sm-line-height: 1.3; + --ds-label-sm-font-size: 1rem; + --ds-label-sm-letter-spacing: 0.25%; + --ds-label-xs-font-weight: 400; + --ds-label-xs-line-height: 1.3; + --ds-label-xs-font-size: 0.875rem; + --ds-label-xs-letter-spacing: 0.15%; + --ds-error_message-lg-font-weight: 400; + --ds-error_message-lg-line-height: 1.3; + --ds-error_message-lg-font-size: 1.3125rem; + --ds-error_message-lg-letter-spacing: 0.5%; + --ds-error_message-md-font-weight: 400; + --ds-error_message-md-line-height: 1.3; + --ds-error_message-md-font-size: 1.125rem; + --ds-error_message-md-letter-spacing: 0.5%; + --ds-error_message-sm-font-weight: 400; + --ds-error_message-sm-line-height: 1.3; + --ds-error_message-sm-font-size: 1rem; + --ds-error_message-sm-letter-spacing: 0.25%; + --ds-error_message-xs-font-weight: 400; + --ds-error_message-xs-line-height: 1.3; + --ds-error_message-xs-font-size: 0.875rem; + --ds-error_message-xs-letter-spacing: 0.15%; --ds-line-height-sm: 1.3; --ds-line-height-md: 1.5; --ds-line-height-lg: 1.7; @@ -31,246 +155,5 @@ --ds-letter-spacing-7: 0.25%; --ds-letter-spacing-8: 0.5%; --ds-letter-spacing-9: 1.5%; - - .ds-error_message--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-error_message--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-error_message--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-error_message--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-label--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-label--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-long--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-long--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-short--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-short--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-ingress--sm { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-ingress--md { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--lg { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-heading--2xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--xs { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--sm { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-5); - } - - .ds-heading--md { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-3); - } - - .ds-heading--lg { - font-size: var(--ds-font-size-9); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-2); - } - - .ds-heading--xl { - font-size: var(--ds-font-size-10); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-heading--2xl { - font-size: var(--ds-font-size-11); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-font-weight--medium { - font-weight: 400; - } - - .ds-font-weight--semibold { - font-weight: 700; - } - - .ds-font-weight--regular { - font-weight: 400; - } - - .ds-line-height--sm { - line-height: 1.3; - } - - .ds-line-height--md { - line-height: 1.5; - } - - .ds-line-height--lg { - line-height: 1.7; - } } } \ No newline at end of file diff --git a/packages/theme/brand/uutilsynet.css b/packages/theme/brand/uutilsynet.css index df8249664a..ea9a1427c8 100644 --- a/packages/theme/brand/uutilsynet.css +++ b/packages/theme/brand/uutilsynet.css @@ -310,7 +310,8 @@ --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #fefefe; --ds-color-focus-outer: #002d54; -color-scheme: light; + + color-scheme: light; } @media (prefers-color-scheme: light) { @@ -617,7 +618,8 @@ color-scheme: light; --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #fefefe; --ds-color-focus-outer: #002d54; -color-scheme: light; + + color-scheme: light; } } @@ -634,6 +636,130 @@ color-scheme: light; --ds-font-weight-medium: 400; --ds-font-weight-semibold: 700; --ds-font-weight-regular: 400; + --ds-heading-2xl-font-weight: 400; + --ds-heading-2xl-line-height: 1.3; + --ds-heading-2xl-font-size: 3.75rem; + --ds-heading-2xl-letter-spacing: -1%; + --ds-heading-xl-font-weight: 400; + --ds-heading-xl-line-height: 1.3; + --ds-heading-xl-font-size: 3rem; + --ds-heading-xl-letter-spacing: -1%; + --ds-heading-lg-font-weight: 400; + --ds-heading-lg-line-height: 1.3; + --ds-heading-lg-font-size: 2.25rem; + --ds-heading-lg-letter-spacing: -0.5%; + --ds-heading-md-font-weight: 400; + --ds-heading-md-line-height: 1.3; + --ds-heading-md-font-size: 1.875rem; + --ds-heading-md-letter-spacing: -0.25%; + --ds-heading-sm-font-weight: 400; + --ds-heading-sm-line-height: 1.3; + --ds-heading-sm-font-size: 1.5rem; + --ds-heading-sm-letter-spacing: 0%; + --ds-heading-xs-font-weight: 400; + --ds-heading-xs-line-height: 1.3; + --ds-heading-xs-font-size: 1.3125rem; + --ds-heading-xs-letter-spacing: 0.15%; + --ds-heading-2xs-font-weight: 400; + --ds-heading-2xs-line-height: 1.3; + --ds-heading-2xs-font-size: 1.125rem; + --ds-heading-2xs-letter-spacing: 0.15%; + --ds-ingress-lg-font-weight: 400; + --ds-ingress-lg-line-height: 1.7; + --ds-ingress-lg-font-size: 1.875rem; + --ds-ingress-lg-letter-spacing: 0.5%; + --ds-ingress-md-font-weight: 400; + --ds-ingress-md-line-height: 1.7; + --ds-ingress-md-font-size: 1.5rem; + --ds-ingress-md-letter-spacing: 0.5%; + --ds-ingress-sm-font-weight: 400; + --ds-ingress-sm-line-height: 1.7; + --ds-ingress-sm-font-size: 1.3125rem; + --ds-ingress-sm-letter-spacing: 0.25%; + --ds-ingress-xs-font-weight: 400; + --ds-ingress-xs-line-height: 1.7; + --ds-ingress-xs-font-size: 1.125rem; + --ds-ingress-xs-letter-spacing: 0.15%; + --ds-paragraph-lg-font-weight: 400; + --ds-paragraph-lg-line-height: 1.5; + --ds-paragraph-lg-font-size: 1.3125rem; + --ds-paragraph-lg-letter-spacing: 0.5%; + --ds-paragraph-md-font-weight: 400; + --ds-paragraph-md-line-height: 1.5; + --ds-paragraph-md-font-size: 1.125rem; + --ds-paragraph-md-letter-spacing: 0.5%; + --ds-paragraph-sm-font-weight: 400; + --ds-paragraph-sm-line-height: 1.5; + --ds-paragraph-sm-font-size: 1rem; + --ds-paragraph-sm-letter-spacing: 0.25%; + --ds-paragraph-xs-font-weight: 400; + --ds-paragraph-xs-line-height: 1.5; + --ds-paragraph-xs-font-size: 0.875rem; + --ds-paragraph-xs-letter-spacing: 0.15%; + --ds-paragraph-short-lg-font-weight: 400; + --ds-paragraph-short-lg-line-height: 1.3; + --ds-paragraph-short-lg-font-size: 1.3125rem; + --ds-paragraph-short-lg-letter-spacing: 0.5%; + --ds-paragraph-short-md-font-weight: 400; + --ds-paragraph-short-md-line-height: 1.3; + --ds-paragraph-short-md-font-size: 1.125rem; + --ds-paragraph-short-md-letter-spacing: 0.5%; + --ds-paragraph-short-sm-font-weight: 400; + --ds-paragraph-short-sm-line-height: 1.3; + --ds-paragraph-short-sm-font-size: 1rem; + --ds-paragraph-short-sm-letter-spacing: 0.25%; + --ds-paragraph-short-xs-font-weight: 400; + --ds-paragraph-short-xs-line-height: 1.3; + --ds-paragraph-short-xs-font-size: 0.875rem; + --ds-paragraph-short-xs-letter-spacing: 0.15%; + --ds-paragraph-long-lg-font-weight: 400; + --ds-paragraph-long-lg-line-height: 1.7; + --ds-paragraph-long-lg-font-size: 1.3125rem; + --ds-paragraph-long-lg-letter-spacing: 0.5%; + --ds-paragraph-long-md-font-weight: 400; + --ds-paragraph-long-md-line-height: 1.7; + --ds-paragraph-long-md-font-size: 1.125rem; + --ds-paragraph-long-md-letter-spacing: 0.5%; + --ds-paragraph-long-sm-font-weight: 400; + --ds-paragraph-long-sm-line-height: 1.7; + --ds-paragraph-long-sm-font-size: 1rem; + --ds-paragraph-long-sm-letter-spacing: 0.25%; + --ds-paragraph-long-xs-font-weight: 400; + --ds-paragraph-long-xs-line-height: 1.7; + --ds-paragraph-long-xs-font-size: 0.875rem; + --ds-paragraph-long-xs-letter-spacing: 0.15%; + --ds-label-lg-font-weight: 400; + --ds-label-lg-line-height: 1.3; + --ds-label-lg-font-size: 1.3125rem; + --ds-label-lg-letter-spacing: 0.5%; + --ds-label-md-font-weight: 400; + --ds-label-md-line-height: 1.3; + --ds-label-md-font-size: 1.125rem; + --ds-label-md-letter-spacing: 0.5%; + --ds-label-sm-font-weight: 400; + --ds-label-sm-line-height: 1.3; + --ds-label-sm-font-size: 1rem; + --ds-label-sm-letter-spacing: 0.25%; + --ds-label-xs-font-weight: 400; + --ds-label-xs-line-height: 1.3; + --ds-label-xs-font-size: 0.875rem; + --ds-label-xs-letter-spacing: 0.15%; + --ds-error_message-lg-font-weight: 400; + --ds-error_message-lg-line-height: 1.3; + --ds-error_message-lg-font-size: 1.3125rem; + --ds-error_message-lg-letter-spacing: 0.5%; + --ds-error_message-md-font-weight: 400; + --ds-error_message-md-line-height: 1.3; + --ds-error_message-md-font-size: 1.125rem; + --ds-error_message-md-letter-spacing: 0.5%; + --ds-error_message-sm-font-weight: 400; + --ds-error_message-sm-line-height: 1.3; + --ds-error_message-sm-font-size: 1rem; + --ds-error_message-sm-letter-spacing: 0.25%; + --ds-error_message-xs-font-weight: 400; + --ds-error_message-xs-line-height: 1.3; + --ds-error_message-xs-font-size: 0.875rem; + --ds-error_message-xs-letter-spacing: 0.15%; --ds-line-height-sm: 1.3; --ds-line-height-md: 1.5; --ds-line-height-lg: 1.7; @@ -657,247 +783,6 @@ color-scheme: light; --ds-letter-spacing-7: 0.25%; --ds-letter-spacing-8: 0.5%; --ds-letter-spacing-9: 1.5%; - - .ds-error_message--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-error_message--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-error_message--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-error_message--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-label--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-label--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-long--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-long--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-short--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-short--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-ingress--sm { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-ingress--md { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--lg { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-heading--2xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--xs { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--sm { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-5); - } - - .ds-heading--md { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-3); - } - - .ds-heading--lg { - font-size: var(--ds-font-size-9); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-2); - } - - .ds-heading--xl { - font-size: var(--ds-font-size-10); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-heading--2xl { - font-size: var(--ds-font-size-11); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-font-weight--medium { - font-weight: 400; - } - - .ds-font-weight--semibold { - font-weight: 700; - } - - .ds-font-weight--regular { - font-weight: 400; - } - - .ds-line-height--sm { - line-height: 1.3; - } - - .ds-line-height--md { - line-height: 1.5; - } - - .ds-line-height--lg { - line-height: 1.7; - } } } /** @@ -906,37 +791,6 @@ color-scheme: light; @layer ds.theme.semantic { :root { - --ds-typography-heading-2xl: 500 3.75rem/1.3 'Inter'; - --ds-typography-heading-xl: 500 3rem/1.3 'Inter'; - --ds-typography-heading-lg: 500 2.25rem/1.3 'Inter'; - --ds-typography-heading-md: 500 1.875rem/1.3 'Inter'; - --ds-typography-heading-sm: 500 1.5rem/1.3 'Inter'; - --ds-typography-heading-xs: 500 1.3125rem/1.3 'Inter'; - --ds-typography-heading-2xs: 500 1.125rem/1.3 'Inter'; - --ds-typography-ingress-lg: 400 1.875rem/1.7 'Inter'; - --ds-typography-ingress-md: 400 1.5rem/1.7 'Inter'; - --ds-typography-ingress-sm: 400 1.3125rem/1.7 'Inter'; - --ds-typography-ingress-xs: 400 1.125rem/1.7 'Inter'; - --ds-typography-paragraph-lg: 400 1.3125rem/1.5 'Inter'; - --ds-typography-paragraph-md: 400 1.125rem/1.5 'Inter'; - --ds-typography-paragraph-sm: 400 1rem/1.5 'Inter'; - --ds-typography-paragraph-xs: 400 0.875rem/1.5 'Inter'; - --ds-typography-paragraph-short-lg: 400 1.3125rem/1.3 'Inter'; - --ds-typography-paragraph-short-md: 400 1.125rem/1.3 'Inter'; - --ds-typography-paragraph-short-sm: 400 1rem/1.3 'Inter'; - --ds-typography-paragraph-short-xs: 400 0.875rem/1.3 'Inter'; - --ds-typography-paragraph-long-lg: 400 1.3125rem/1.7 'Inter'; - --ds-typography-paragraph-long-md: 400 1.125rem/1.7 'Inter'; - --ds-typography-paragraph-long-sm: 400 1rem/1.7 'Inter'; - --ds-typography-paragraph-long-xs: 400 0.875rem/1.7 'Inter'; - --ds-typography-label-lg: 500 1.3125rem/1.3 'Inter'; - --ds-typography-label-md: 500 1.125rem/1.3 'Inter'; - --ds-typography-label-sm: 500 1rem/1.3 'Inter'; - --ds-typography-label-xs: 500 0.875rem/1.3 'Inter'; - --ds-typography-error_message-lg: 400 1.3125rem/1.3 'Inter'; - --ds-typography-error_message-md: 400 1.125rem/1.3 'Inter'; - --ds-typography-error_message-sm: 400 1rem/1.3 'Inter'; - --ds-typography-error_message-xs: 400 0.875rem/1.3 'Inter'; --ds-disabled-opacity: 30%; --ds-border-radius-sm: calc(var(--ds-border-radius-base)*0.5); --ds-border-radius-md: calc(var(--ds-border-radius-base)*1); @@ -1308,7 +1162,8 @@ color-scheme: light; --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #131c27; --ds-color-focus-outer: #d1e3f3; -color-scheme: dark; + + color-scheme: dark; } @media (prefers-color-scheme: dark) { @@ -1615,7 +1470,8 @@ color-scheme: dark; --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #131c27; --ds-color-focus-outer: #d1e3f3; -color-scheme: dark; + + color-scheme: dark; } } @@ -1632,6 +1488,130 @@ color-scheme: dark; --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-font-size: 3.75rem; + --ds-heading-2xl-letter-spacing: -1%; + --ds-heading-xl-font-weight: 500; + --ds-heading-xl-line-height: 1.3; + --ds-heading-xl-font-size: 3rem; + --ds-heading-xl-letter-spacing: -1%; + --ds-heading-lg-font-weight: 500; + --ds-heading-lg-line-height: 1.3; + --ds-heading-lg-font-size: 2.25rem; + --ds-heading-lg-letter-spacing: -0.5%; + --ds-heading-md-font-weight: 500; + --ds-heading-md-line-height: 1.3; + --ds-heading-md-font-size: 1.875rem; + --ds-heading-md-letter-spacing: -0.25%; + --ds-heading-sm-font-weight: 500; + --ds-heading-sm-line-height: 1.3; + --ds-heading-sm-font-size: 1.5rem; + --ds-heading-sm-letter-spacing: 0%; + --ds-heading-xs-font-weight: 500; + --ds-heading-xs-line-height: 1.3; + --ds-heading-xs-font-size: 1.3125rem; + --ds-heading-xs-letter-spacing: 0.15%; + --ds-heading-2xs-font-weight: 500; + --ds-heading-2xs-line-height: 1.3; + --ds-heading-2xs-font-size: 1.125rem; + --ds-heading-2xs-letter-spacing: 0.15%; + --ds-ingress-lg-font-weight: 400; + --ds-ingress-lg-line-height: 1.7; + --ds-ingress-lg-font-size: 1.875rem; + --ds-ingress-lg-letter-spacing: 0.5%; + --ds-ingress-md-font-weight: 400; + --ds-ingress-md-line-height: 1.7; + --ds-ingress-md-font-size: 1.5rem; + --ds-ingress-md-letter-spacing: 0.5%; + --ds-ingress-sm-font-weight: 400; + --ds-ingress-sm-line-height: 1.7; + --ds-ingress-sm-font-size: 1.3125rem; + --ds-ingress-sm-letter-spacing: 0.25%; + --ds-ingress-xs-font-weight: 400; + --ds-ingress-xs-line-height: 1.7; + --ds-ingress-xs-font-size: 1.125rem; + --ds-ingress-xs-letter-spacing: 0.15%; + --ds-paragraph-lg-font-weight: 400; + --ds-paragraph-lg-line-height: 1.5; + --ds-paragraph-lg-font-size: 1.3125rem; + --ds-paragraph-lg-letter-spacing: 0.5%; + --ds-paragraph-md-font-weight: 400; + --ds-paragraph-md-line-height: 1.5; + --ds-paragraph-md-font-size: 1.125rem; + --ds-paragraph-md-letter-spacing: 0.5%; + --ds-paragraph-sm-font-weight: 400; + --ds-paragraph-sm-line-height: 1.5; + --ds-paragraph-sm-font-size: 1rem; + --ds-paragraph-sm-letter-spacing: 0.25%; + --ds-paragraph-xs-font-weight: 400; + --ds-paragraph-xs-line-height: 1.5; + --ds-paragraph-xs-font-size: 0.875rem; + --ds-paragraph-xs-letter-spacing: 0.15%; + --ds-paragraph-short-lg-font-weight: 400; + --ds-paragraph-short-lg-line-height: 1.3; + --ds-paragraph-short-lg-font-size: 1.3125rem; + --ds-paragraph-short-lg-letter-spacing: 0.5%; + --ds-paragraph-short-md-font-weight: 400; + --ds-paragraph-short-md-line-height: 1.3; + --ds-paragraph-short-md-font-size: 1.125rem; + --ds-paragraph-short-md-letter-spacing: 0.5%; + --ds-paragraph-short-sm-font-weight: 400; + --ds-paragraph-short-sm-line-height: 1.3; + --ds-paragraph-short-sm-font-size: 1rem; + --ds-paragraph-short-sm-letter-spacing: 0.25%; + --ds-paragraph-short-xs-font-weight: 400; + --ds-paragraph-short-xs-line-height: 1.3; + --ds-paragraph-short-xs-font-size: 0.875rem; + --ds-paragraph-short-xs-letter-spacing: 0.15%; + --ds-paragraph-long-lg-font-weight: 400; + --ds-paragraph-long-lg-line-height: 1.7; + --ds-paragraph-long-lg-font-size: 1.3125rem; + --ds-paragraph-long-lg-letter-spacing: 0.5%; + --ds-paragraph-long-md-font-weight: 400; + --ds-paragraph-long-md-line-height: 1.7; + --ds-paragraph-long-md-font-size: 1.125rem; + --ds-paragraph-long-md-letter-spacing: 0.5%; + --ds-paragraph-long-sm-font-weight: 400; + --ds-paragraph-long-sm-line-height: 1.7; + --ds-paragraph-long-sm-font-size: 1rem; + --ds-paragraph-long-sm-letter-spacing: 0.25%; + --ds-paragraph-long-xs-font-weight: 400; + --ds-paragraph-long-xs-line-height: 1.7; + --ds-paragraph-long-xs-font-size: 0.875rem; + --ds-paragraph-long-xs-letter-spacing: 0.15%; + --ds-label-lg-font-weight: 500; + --ds-label-lg-line-height: 1.3; + --ds-label-lg-font-size: 1.3125rem; + --ds-label-lg-letter-spacing: 0.5%; + --ds-label-md-font-weight: 500; + --ds-label-md-line-height: 1.3; + --ds-label-md-font-size: 1.125rem; + --ds-label-md-letter-spacing: 0.5%; + --ds-label-sm-font-weight: 500; + --ds-label-sm-line-height: 1.3; + --ds-label-sm-font-size: 1rem; + --ds-label-sm-letter-spacing: 0.25%; + --ds-label-xs-font-weight: 500; + --ds-label-xs-line-height: 1.3; + --ds-label-xs-font-size: 0.875rem; + --ds-label-xs-letter-spacing: 0.15%; + --ds-error_message-lg-font-weight: 400; + --ds-error_message-lg-line-height: 1.3; + --ds-error_message-lg-font-size: 1.3125rem; + --ds-error_message-lg-letter-spacing: 0.5%; + --ds-error_message-md-font-weight: 400; + --ds-error_message-md-line-height: 1.3; + --ds-error_message-md-font-size: 1.125rem; + --ds-error_message-md-letter-spacing: 0.5%; + --ds-error_message-sm-font-weight: 400; + --ds-error_message-sm-line-height: 1.3; + --ds-error_message-sm-font-size: 1rem; + --ds-error_message-sm-letter-spacing: 0.25%; + --ds-error_message-xs-font-weight: 400; + --ds-error_message-xs-line-height: 1.3; + --ds-error_message-xs-font-size: 0.875rem; + --ds-error_message-xs-letter-spacing: 0.15%; --ds-line-height-sm: 1.3; --ds-line-height-md: 1.5; --ds-line-height-lg: 1.7; @@ -1655,246 +1635,5 @@ color-scheme: dark; --ds-letter-spacing-7: 0.25%; --ds-letter-spacing-8: 0.5%; --ds-letter-spacing-9: 1.5%; - - .ds-error_message--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-error_message--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-error_message--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-error_message--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-label--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-label--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-long--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-long--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-short--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-short--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-ingress--sm { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-ingress--md { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--lg { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-heading--2xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--xs { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--sm { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-5); - } - - .ds-heading--md { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-3); - } - - .ds-heading--lg { - font-size: var(--ds-font-size-9); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-2); - } - - .ds-heading--xl { - font-size: var(--ds-font-size-10); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-heading--2xl { - font-size: var(--ds-font-size-11); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-font-weight--medium { - font-weight: 500; - } - - .ds-font-weight--semibold { - font-weight: 600; - } - - .ds-font-weight--regular { - font-weight: 400; - } - - .ds-line-height--sm { - line-height: 1.3; - } - - .ds-line-height--md { - line-height: 1.5; - } - - .ds-line-height--lg { - line-height: 1.7; - } } } \ No newline at end of file diff --git a/packages/theme/brand/uutilsynet/color-mode/dark.css b/packages/theme/brand/uutilsynet/color-mode/dark.css index 13bd09cd1d..e0a24adc1a 100644 --- a/packages/theme/brand/uutilsynet/color-mode/dark.css +++ b/packages/theme/brand/uutilsynet/color-mode/dark.css @@ -306,7 +306,8 @@ --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #131c27; --ds-color-focus-outer: #d1e3f3; -color-scheme: dark; + + color-scheme: dark; } @media (prefers-color-scheme: dark) { @@ -613,7 +614,8 @@ color-scheme: dark; --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #131c27; --ds-color-focus-outer: #d1e3f3; -color-scheme: dark; + + color-scheme: dark; } } diff --git a/packages/theme/brand/uutilsynet/color-mode/light.css b/packages/theme/brand/uutilsynet/color-mode/light.css index 7f2d5e1567..eb35ef79b7 100644 --- a/packages/theme/brand/uutilsynet/color-mode/light.css +++ b/packages/theme/brand/uutilsynet/color-mode/light.css @@ -306,7 +306,8 @@ --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #fefefe; --ds-color-focus-outer: #002d54; -color-scheme: light; + + color-scheme: light; } @media (prefers-color-scheme: light) { @@ -613,7 +614,8 @@ color-scheme: light; --ds-color-warning-contrast-subtle: var(--ds-global-orange-contrast-2); --ds-color-focus-inner: #fefefe; --ds-color-focus-outer: #002d54; -color-scheme: light; + + color-scheme: light; } } diff --git a/packages/theme/brand/uutilsynet/semantic.css b/packages/theme/brand/uutilsynet/semantic.css index 67246fa1ce..5a7b277320 100644 --- a/packages/theme/brand/uutilsynet/semantic.css +++ b/packages/theme/brand/uutilsynet/semantic.css @@ -4,37 +4,6 @@ @layer ds.theme.semantic { :root { - --ds-typography-heading-2xl: 500 3.75rem/1.3 'Inter'; - --ds-typography-heading-xl: 500 3rem/1.3 'Inter'; - --ds-typography-heading-lg: 500 2.25rem/1.3 'Inter'; - --ds-typography-heading-md: 500 1.875rem/1.3 'Inter'; - --ds-typography-heading-sm: 500 1.5rem/1.3 'Inter'; - --ds-typography-heading-xs: 500 1.3125rem/1.3 'Inter'; - --ds-typography-heading-2xs: 500 1.125rem/1.3 'Inter'; - --ds-typography-ingress-lg: 400 1.875rem/1.7 'Inter'; - --ds-typography-ingress-md: 400 1.5rem/1.7 'Inter'; - --ds-typography-ingress-sm: 400 1.3125rem/1.7 'Inter'; - --ds-typography-ingress-xs: 400 1.125rem/1.7 'Inter'; - --ds-typography-paragraph-lg: 400 1.3125rem/1.5 'Inter'; - --ds-typography-paragraph-md: 400 1.125rem/1.5 'Inter'; - --ds-typography-paragraph-sm: 400 1rem/1.5 'Inter'; - --ds-typography-paragraph-xs: 400 0.875rem/1.5 'Inter'; - --ds-typography-paragraph-short-lg: 400 1.3125rem/1.3 'Inter'; - --ds-typography-paragraph-short-md: 400 1.125rem/1.3 'Inter'; - --ds-typography-paragraph-short-sm: 400 1rem/1.3 'Inter'; - --ds-typography-paragraph-short-xs: 400 0.875rem/1.3 'Inter'; - --ds-typography-paragraph-long-lg: 400 1.3125rem/1.7 'Inter'; - --ds-typography-paragraph-long-md: 400 1.125rem/1.7 'Inter'; - --ds-typography-paragraph-long-sm: 400 1rem/1.7 'Inter'; - --ds-typography-paragraph-long-xs: 400 0.875rem/1.7 'Inter'; - --ds-typography-label-lg: 500 1.3125rem/1.3 'Inter'; - --ds-typography-label-md: 500 1.125rem/1.3 'Inter'; - --ds-typography-label-sm: 500 1rem/1.3 'Inter'; - --ds-typography-label-xs: 500 0.875rem/1.3 'Inter'; - --ds-typography-error_message-lg: 400 1.3125rem/1.3 'Inter'; - --ds-typography-error_message-md: 400 1.125rem/1.3 'Inter'; - --ds-typography-error_message-sm: 400 1rem/1.3 'Inter'; - --ds-typography-error_message-xs: 400 0.875rem/1.3 'Inter'; --ds-disabled-opacity: 30%; --ds-border-radius-sm: calc(var(--ds-border-radius-base)*0.5); --ds-border-radius-md: calc(var(--ds-border-radius-base)*1); diff --git a/packages/theme/brand/uutilsynet/typography/primary.css b/packages/theme/brand/uutilsynet/typography/primary.css index c180df3fae..43925c501f 100644 --- a/packages/theme/brand/uutilsynet/typography/primary.css +++ b/packages/theme/brand/uutilsynet/typography/primary.css @@ -8,6 +8,130 @@ --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-font-size: 3.75rem; + --ds-heading-2xl-letter-spacing: -1%; + --ds-heading-xl-font-weight: 500; + --ds-heading-xl-line-height: 1.3; + --ds-heading-xl-font-size: 3rem; + --ds-heading-xl-letter-spacing: -1%; + --ds-heading-lg-font-weight: 500; + --ds-heading-lg-line-height: 1.3; + --ds-heading-lg-font-size: 2.25rem; + --ds-heading-lg-letter-spacing: -0.5%; + --ds-heading-md-font-weight: 500; + --ds-heading-md-line-height: 1.3; + --ds-heading-md-font-size: 1.875rem; + --ds-heading-md-letter-spacing: -0.25%; + --ds-heading-sm-font-weight: 500; + --ds-heading-sm-line-height: 1.3; + --ds-heading-sm-font-size: 1.5rem; + --ds-heading-sm-letter-spacing: 0%; + --ds-heading-xs-font-weight: 500; + --ds-heading-xs-line-height: 1.3; + --ds-heading-xs-font-size: 1.3125rem; + --ds-heading-xs-letter-spacing: 0.15%; + --ds-heading-2xs-font-weight: 500; + --ds-heading-2xs-line-height: 1.3; + --ds-heading-2xs-font-size: 1.125rem; + --ds-heading-2xs-letter-spacing: 0.15%; + --ds-ingress-lg-font-weight: 400; + --ds-ingress-lg-line-height: 1.7; + --ds-ingress-lg-font-size: 1.875rem; + --ds-ingress-lg-letter-spacing: 0.5%; + --ds-ingress-md-font-weight: 400; + --ds-ingress-md-line-height: 1.7; + --ds-ingress-md-font-size: 1.5rem; + --ds-ingress-md-letter-spacing: 0.5%; + --ds-ingress-sm-font-weight: 400; + --ds-ingress-sm-line-height: 1.7; + --ds-ingress-sm-font-size: 1.3125rem; + --ds-ingress-sm-letter-spacing: 0.25%; + --ds-ingress-xs-font-weight: 400; + --ds-ingress-xs-line-height: 1.7; + --ds-ingress-xs-font-size: 1.125rem; + --ds-ingress-xs-letter-spacing: 0.15%; + --ds-paragraph-lg-font-weight: 400; + --ds-paragraph-lg-line-height: 1.5; + --ds-paragraph-lg-font-size: 1.3125rem; + --ds-paragraph-lg-letter-spacing: 0.5%; + --ds-paragraph-md-font-weight: 400; + --ds-paragraph-md-line-height: 1.5; + --ds-paragraph-md-font-size: 1.125rem; + --ds-paragraph-md-letter-spacing: 0.5%; + --ds-paragraph-sm-font-weight: 400; + --ds-paragraph-sm-line-height: 1.5; + --ds-paragraph-sm-font-size: 1rem; + --ds-paragraph-sm-letter-spacing: 0.25%; + --ds-paragraph-xs-font-weight: 400; + --ds-paragraph-xs-line-height: 1.5; + --ds-paragraph-xs-font-size: 0.875rem; + --ds-paragraph-xs-letter-spacing: 0.15%; + --ds-paragraph-short-lg-font-weight: 400; + --ds-paragraph-short-lg-line-height: 1.3; + --ds-paragraph-short-lg-font-size: 1.3125rem; + --ds-paragraph-short-lg-letter-spacing: 0.5%; + --ds-paragraph-short-md-font-weight: 400; + --ds-paragraph-short-md-line-height: 1.3; + --ds-paragraph-short-md-font-size: 1.125rem; + --ds-paragraph-short-md-letter-spacing: 0.5%; + --ds-paragraph-short-sm-font-weight: 400; + --ds-paragraph-short-sm-line-height: 1.3; + --ds-paragraph-short-sm-font-size: 1rem; + --ds-paragraph-short-sm-letter-spacing: 0.25%; + --ds-paragraph-short-xs-font-weight: 400; + --ds-paragraph-short-xs-line-height: 1.3; + --ds-paragraph-short-xs-font-size: 0.875rem; + --ds-paragraph-short-xs-letter-spacing: 0.15%; + --ds-paragraph-long-lg-font-weight: 400; + --ds-paragraph-long-lg-line-height: 1.7; + --ds-paragraph-long-lg-font-size: 1.3125rem; + --ds-paragraph-long-lg-letter-spacing: 0.5%; + --ds-paragraph-long-md-font-weight: 400; + --ds-paragraph-long-md-line-height: 1.7; + --ds-paragraph-long-md-font-size: 1.125rem; + --ds-paragraph-long-md-letter-spacing: 0.5%; + --ds-paragraph-long-sm-font-weight: 400; + --ds-paragraph-long-sm-line-height: 1.7; + --ds-paragraph-long-sm-font-size: 1rem; + --ds-paragraph-long-sm-letter-spacing: 0.25%; + --ds-paragraph-long-xs-font-weight: 400; + --ds-paragraph-long-xs-line-height: 1.7; + --ds-paragraph-long-xs-font-size: 0.875rem; + --ds-paragraph-long-xs-letter-spacing: 0.15%; + --ds-label-lg-font-weight: 500; + --ds-label-lg-line-height: 1.3; + --ds-label-lg-font-size: 1.3125rem; + --ds-label-lg-letter-spacing: 0.5%; + --ds-label-md-font-weight: 500; + --ds-label-md-line-height: 1.3; + --ds-label-md-font-size: 1.125rem; + --ds-label-md-letter-spacing: 0.5%; + --ds-label-sm-font-weight: 500; + --ds-label-sm-line-height: 1.3; + --ds-label-sm-font-size: 1rem; + --ds-label-sm-letter-spacing: 0.25%; + --ds-label-xs-font-weight: 500; + --ds-label-xs-line-height: 1.3; + --ds-label-xs-font-size: 0.875rem; + --ds-label-xs-letter-spacing: 0.15%; + --ds-error_message-lg-font-weight: 400; + --ds-error_message-lg-line-height: 1.3; + --ds-error_message-lg-font-size: 1.3125rem; + --ds-error_message-lg-letter-spacing: 0.5%; + --ds-error_message-md-font-weight: 400; + --ds-error_message-md-line-height: 1.3; + --ds-error_message-md-font-size: 1.125rem; + --ds-error_message-md-letter-spacing: 0.5%; + --ds-error_message-sm-font-weight: 400; + --ds-error_message-sm-line-height: 1.3; + --ds-error_message-sm-font-size: 1rem; + --ds-error_message-sm-letter-spacing: 0.25%; + --ds-error_message-xs-font-weight: 400; + --ds-error_message-xs-line-height: 1.3; + --ds-error_message-xs-font-size: 0.875rem; + --ds-error_message-xs-letter-spacing: 0.15%; --ds-line-height-sm: 1.3; --ds-line-height-md: 1.5; --ds-line-height-lg: 1.7; @@ -31,246 +155,5 @@ --ds-letter-spacing-7: 0.25%; --ds-letter-spacing-8: 0.5%; --ds-letter-spacing-9: 1.5%; - - .ds-error_message--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-error_message--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-error_message--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-error_message--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-label--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-label--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-long--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-long--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-short--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-short--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-ingress--sm { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-ingress--md { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--lg { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-heading--2xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--xs { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--sm { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-5); - } - - .ds-heading--md { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-3); - } - - .ds-heading--lg { - font-size: var(--ds-font-size-9); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-2); - } - - .ds-heading--xl { - font-size: var(--ds-font-size-10); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-heading--2xl { - font-size: var(--ds-font-size-11); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-font-weight--medium { - font-weight: 500; - } - - .ds-font-weight--semibold { - font-weight: 600; - } - - .ds-font-weight--regular { - font-weight: 400; - } - - .ds-line-height--sm { - line-height: 1.3; - } - - .ds-line-height--md { - line-height: 1.5; - } - - .ds-line-height--lg { - line-height: 1.7; - } } } \ No newline at end of file diff --git a/packages/theme/brand/uutilsynet/typography/secondary.css b/packages/theme/brand/uutilsynet/typography/secondary.css index fe81fe4ef7..c738d6c785 100644 --- a/packages/theme/brand/uutilsynet/typography/secondary.css +++ b/packages/theme/brand/uutilsynet/typography/secondary.css @@ -8,6 +8,130 @@ --ds-font-weight-medium: 400; --ds-font-weight-semibold: 700; --ds-font-weight-regular: 400; + --ds-heading-2xl-font-weight: 400; + --ds-heading-2xl-line-height: 1.3; + --ds-heading-2xl-font-size: 3.75rem; + --ds-heading-2xl-letter-spacing: -1%; + --ds-heading-xl-font-weight: 400; + --ds-heading-xl-line-height: 1.3; + --ds-heading-xl-font-size: 3rem; + --ds-heading-xl-letter-spacing: -1%; + --ds-heading-lg-font-weight: 400; + --ds-heading-lg-line-height: 1.3; + --ds-heading-lg-font-size: 2.25rem; + --ds-heading-lg-letter-spacing: -0.5%; + --ds-heading-md-font-weight: 400; + --ds-heading-md-line-height: 1.3; + --ds-heading-md-font-size: 1.875rem; + --ds-heading-md-letter-spacing: -0.25%; + --ds-heading-sm-font-weight: 400; + --ds-heading-sm-line-height: 1.3; + --ds-heading-sm-font-size: 1.5rem; + --ds-heading-sm-letter-spacing: 0%; + --ds-heading-xs-font-weight: 400; + --ds-heading-xs-line-height: 1.3; + --ds-heading-xs-font-size: 1.3125rem; + --ds-heading-xs-letter-spacing: 0.15%; + --ds-heading-2xs-font-weight: 400; + --ds-heading-2xs-line-height: 1.3; + --ds-heading-2xs-font-size: 1.125rem; + --ds-heading-2xs-letter-spacing: 0.15%; + --ds-ingress-lg-font-weight: 400; + --ds-ingress-lg-line-height: 1.7; + --ds-ingress-lg-font-size: 1.875rem; + --ds-ingress-lg-letter-spacing: 0.5%; + --ds-ingress-md-font-weight: 400; + --ds-ingress-md-line-height: 1.7; + --ds-ingress-md-font-size: 1.5rem; + --ds-ingress-md-letter-spacing: 0.5%; + --ds-ingress-sm-font-weight: 400; + --ds-ingress-sm-line-height: 1.7; + --ds-ingress-sm-font-size: 1.3125rem; + --ds-ingress-sm-letter-spacing: 0.25%; + --ds-ingress-xs-font-weight: 400; + --ds-ingress-xs-line-height: 1.7; + --ds-ingress-xs-font-size: 1.125rem; + --ds-ingress-xs-letter-spacing: 0.15%; + --ds-paragraph-lg-font-weight: 400; + --ds-paragraph-lg-line-height: 1.5; + --ds-paragraph-lg-font-size: 1.3125rem; + --ds-paragraph-lg-letter-spacing: 0.5%; + --ds-paragraph-md-font-weight: 400; + --ds-paragraph-md-line-height: 1.5; + --ds-paragraph-md-font-size: 1.125rem; + --ds-paragraph-md-letter-spacing: 0.5%; + --ds-paragraph-sm-font-weight: 400; + --ds-paragraph-sm-line-height: 1.5; + --ds-paragraph-sm-font-size: 1rem; + --ds-paragraph-sm-letter-spacing: 0.25%; + --ds-paragraph-xs-font-weight: 400; + --ds-paragraph-xs-line-height: 1.5; + --ds-paragraph-xs-font-size: 0.875rem; + --ds-paragraph-xs-letter-spacing: 0.15%; + --ds-paragraph-short-lg-font-weight: 400; + --ds-paragraph-short-lg-line-height: 1.3; + --ds-paragraph-short-lg-font-size: 1.3125rem; + --ds-paragraph-short-lg-letter-spacing: 0.5%; + --ds-paragraph-short-md-font-weight: 400; + --ds-paragraph-short-md-line-height: 1.3; + --ds-paragraph-short-md-font-size: 1.125rem; + --ds-paragraph-short-md-letter-spacing: 0.5%; + --ds-paragraph-short-sm-font-weight: 400; + --ds-paragraph-short-sm-line-height: 1.3; + --ds-paragraph-short-sm-font-size: 1rem; + --ds-paragraph-short-sm-letter-spacing: 0.25%; + --ds-paragraph-short-xs-font-weight: 400; + --ds-paragraph-short-xs-line-height: 1.3; + --ds-paragraph-short-xs-font-size: 0.875rem; + --ds-paragraph-short-xs-letter-spacing: 0.15%; + --ds-paragraph-long-lg-font-weight: 400; + --ds-paragraph-long-lg-line-height: 1.7; + --ds-paragraph-long-lg-font-size: 1.3125rem; + --ds-paragraph-long-lg-letter-spacing: 0.5%; + --ds-paragraph-long-md-font-weight: 400; + --ds-paragraph-long-md-line-height: 1.7; + --ds-paragraph-long-md-font-size: 1.125rem; + --ds-paragraph-long-md-letter-spacing: 0.5%; + --ds-paragraph-long-sm-font-weight: 400; + --ds-paragraph-long-sm-line-height: 1.7; + --ds-paragraph-long-sm-font-size: 1rem; + --ds-paragraph-long-sm-letter-spacing: 0.25%; + --ds-paragraph-long-xs-font-weight: 400; + --ds-paragraph-long-xs-line-height: 1.7; + --ds-paragraph-long-xs-font-size: 0.875rem; + --ds-paragraph-long-xs-letter-spacing: 0.15%; + --ds-label-lg-font-weight: 400; + --ds-label-lg-line-height: 1.3; + --ds-label-lg-font-size: 1.3125rem; + --ds-label-lg-letter-spacing: 0.5%; + --ds-label-md-font-weight: 400; + --ds-label-md-line-height: 1.3; + --ds-label-md-font-size: 1.125rem; + --ds-label-md-letter-spacing: 0.5%; + --ds-label-sm-font-weight: 400; + --ds-label-sm-line-height: 1.3; + --ds-label-sm-font-size: 1rem; + --ds-label-sm-letter-spacing: 0.25%; + --ds-label-xs-font-weight: 400; + --ds-label-xs-line-height: 1.3; + --ds-label-xs-font-size: 0.875rem; + --ds-label-xs-letter-spacing: 0.15%; + --ds-error_message-lg-font-weight: 400; + --ds-error_message-lg-line-height: 1.3; + --ds-error_message-lg-font-size: 1.3125rem; + --ds-error_message-lg-letter-spacing: 0.5%; + --ds-error_message-md-font-weight: 400; + --ds-error_message-md-line-height: 1.3; + --ds-error_message-md-font-size: 1.125rem; + --ds-error_message-md-letter-spacing: 0.5%; + --ds-error_message-sm-font-weight: 400; + --ds-error_message-sm-line-height: 1.3; + --ds-error_message-sm-font-size: 1rem; + --ds-error_message-sm-letter-spacing: 0.25%; + --ds-error_message-xs-font-weight: 400; + --ds-error_message-xs-line-height: 1.3; + --ds-error_message-xs-font-size: 0.875rem; + --ds-error_message-xs-letter-spacing: 0.15%; --ds-line-height-sm: 1.3; --ds-line-height-md: 1.5; --ds-line-height-lg: 1.7; @@ -31,246 +155,5 @@ --ds-letter-spacing-7: 0.25%; --ds-letter-spacing-8: 0.5%; --ds-letter-spacing-9: 1.5%; - - .ds-error_message--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-error_message--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-error_message--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-error_message--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-label--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-label--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-label--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-long--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-long--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-long--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph-short--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph-short--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph-short--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--xs { - font-size: var(--ds-font-size-3); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-paragraph--sm { - font-size: var(--ds-font-size-4); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-paragraph--md { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-paragraph--lg { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-md); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-ingress--sm { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-7); - } - - .ds-ingress--md { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-ingress--lg { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-lg); - font-weight: var(--ds-font-weight-regular); - letter-spacing: var(--ds-letter-spacing-8); - } - - .ds-heading--2xs { - font-size: var(--ds-font-size-5); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--xs { - font-size: var(--ds-font-size-6); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-6); - } - - .ds-heading--sm { - font-size: var(--ds-font-size-7); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-5); - } - - .ds-heading--md { - font-size: var(--ds-font-size-8); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-3); - } - - .ds-heading--lg { - font-size: var(--ds-font-size-9); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-2); - } - - .ds-heading--xl { - font-size: var(--ds-font-size-10); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-heading--2xl { - font-size: var(--ds-font-size-11); - line-height: var(--ds-line-height-sm); - font-weight: var(--ds-font-weight-medium); - letter-spacing: var(--ds-letter-spacing-1); - } - - .ds-font-weight--medium { - font-weight: 400; - } - - .ds-font-weight--semibold { - font-weight: 700; - } - - .ds-font-weight--regular { - font-weight: 400; - } - - .ds-line-height--sm { - line-height: 1.3; - } - - .ds-line-height--md { - line-height: 1.5; - } - - .ds-line-height--lg { - line-height: 1.7; - } } } \ No newline at end of file