From b2a1c8b3603197e7c5b2ffe60193b3b027a23adf Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Thu, 20 Jun 2024 21:37:14 +0200 Subject: [PATCH] built new tokens --- apps/storefront/tokens/altinn/dark.ts | 62 ++-- apps/storefront/tokens/altinn/light.ts | 62 ++-- apps/storefront/tokens/portal/dark.ts | 62 ++-- apps/storefront/tokens/portal/light.ts | 62 ++-- packages/theme/brand/altinn.css | 5 +- packages/theme/brand/altinn/semantic.css | 62 ++-- .../theme/brand/altinn/typography/primary.css | 277 ++++++++++++++++++ .../brand/altinn/typography/secondary.css | 277 ++++++++++++++++++ packages/theme/brand/digdir.css | 5 +- .../primary.css} | 2 +- .../typography/secondary.css} | 4 +- packages/theme/brand/portal.css | 5 +- packages/theme/brand/portal/semantic.css | 62 ++-- .../typography/primary.css} | 2 +- .../brand/portal/typography/secondary.css | 277 ++++++++++++++++++ packages/theme/brand/uutilsynet.css | 5 +- .../typography/primary.css} | 4 +- .../brand/uutilsynet/typography/secondary.css | 277 ++++++++++++++++++ 18 files changed, 1312 insertions(+), 200 deletions(-) create mode 100644 packages/theme/brand/altinn/typography/primary.css create mode 100644 packages/theme/brand/altinn/typography/secondary.css rename packages/theme/brand/digdir/{typography.css => typography/primary.css} (99%) rename packages/theme/brand/{portal/typography.css => digdir/typography/secondary.css} (99%) rename packages/theme/brand/{uutilsynet/typography.css => portal/typography/primary.css} (99%) create mode 100644 packages/theme/brand/portal/typography/secondary.css rename packages/theme/brand/{altinn/typography.css => uutilsynet/typography/primary.css} (99%) create mode 100644 packages/theme/brand/uutilsynet/typography/secondary.css diff --git a/apps/storefront/tokens/altinn/dark.ts b/apps/storefront/tokens/altinn/dark.ts index 9acacc7158..e82a6d3696 100644 --- a/apps/storefront/tokens/altinn/dark.ts +++ b/apps/storefront/tokens/altinn/dark.ts @@ -2337,7 +2337,7 @@ export const color = [ export const typography = [ { type: "typography", - value: "500 3.75rem/1.3 'Roboto'", + value: "500 3.75rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2360,7 +2360,7 @@ export const typography = [ }, { type: "typography", - value: "500 3rem/1.3 'Roboto'", + value: "500 3rem/1.3 'Helvetica Neue'", description: "H1", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2385,7 +2385,7 @@ export const typography = [ }, { type: "typography", - value: "500 2.25rem/1.3 'Roboto'", + value: "500 2.25rem/1.3 'Helvetica Neue'", description: "H2", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2410,7 +2410,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.875rem/1.3 'Roboto'", + value: "500 1.875rem/1.3 'Helvetica Neue'", description: "H3", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2435,7 +2435,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.5rem/1.3 'Roboto'", + value: "500 1.5rem/1.3 'Helvetica Neue'", description: "H4", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2460,7 +2460,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.3125rem/1.3 'Roboto'", + value: "500 1.3125rem/1.3 'Helvetica Neue'", description: "H5", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2485,7 +2485,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.125rem/1.3 'Roboto'", + value: "500 1.125rem/1.3 'Helvetica Neue'", description: "H6", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2510,7 +2510,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.875rem/1.7 'Roboto'", + value: "400 1.875rem/1.7 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2533,7 +2533,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.5rem/1.7 'Roboto'", + value: "400 1.5rem/1.7 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2556,7 +2556,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.3125rem/1.7 'Roboto'", + value: "400 1.3125rem/1.7 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2579,7 +2579,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.125rem/1.7 'Roboto'", + value: "400 1.125rem/1.7 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2602,7 +2602,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.3125rem/1.5 'Roboto'", + value: "400 1.3125rem/1.5 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2625,7 +2625,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.125rem/1.5 'Roboto'", + value: "400 1.125rem/1.5 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2648,7 +2648,7 @@ export const typography = [ }, { type: "typography", - value: "400 1rem/1.5 'Roboto'", + value: "400 1rem/1.5 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2671,7 +2671,7 @@ export const typography = [ }, { type: "typography", - value: "400 0.875rem/1.5 'Roboto'", + value: "400 0.875rem/1.5 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2694,7 +2694,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.3125rem/1.3 'Roboto'", + value: "400 1.3125rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2718,7 +2718,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.125rem/1.3 'Roboto'", + value: "400 1.125rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2742,7 +2742,7 @@ export const typography = [ }, { type: "typography", - value: "400 1rem/1.3 'Roboto'", + value: "400 1rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2766,7 +2766,7 @@ export const typography = [ }, { type: "typography", - value: "400 0.875rem/1.3 'Roboto'", + value: "400 0.875rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2790,7 +2790,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.125rem/1.7 'Roboto'", + value: "400 1.125rem/1.7 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2814,7 +2814,7 @@ export const typography = [ }, { type: "typography", - value: "400 1rem/1.7 'Roboto'", + value: "400 1rem/1.7 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2838,7 +2838,7 @@ export const typography = [ }, { type: "typography", - value: "400 0.875rem/1.7 'Roboto'", + value: "400 0.875rem/1.7 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2862,7 +2862,7 @@ export const typography = [ }, { type: "typography", - value: "400 0.8125rem/1.7 'Roboto'", + value: "400 0.8125rem/1.7 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2886,7 +2886,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.3125rem/1.3 'Roboto'", + value: "500 1.3125rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2909,7 +2909,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.125rem/1.3 'Roboto'", + value: "500 1.125rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2932,7 +2932,7 @@ export const typography = [ }, { type: "typography", - value: "500 1rem/1.3 'Roboto'", + value: "500 1rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2955,7 +2955,7 @@ export const typography = [ }, { type: "typography", - value: "500 0.875rem/1.3 'Roboto'", + value: "500 0.875rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2978,7 +2978,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.3125rem/1.3 'Roboto'", + value: "400 1.3125rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3001,7 +3001,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.125rem/1.3 'Roboto'", + value: "400 1.125rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3024,7 +3024,7 @@ export const typography = [ }, { type: "typography", - value: "400 1rem/1.3 'Roboto'", + value: "400 1rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3047,7 +3047,7 @@ export const typography = [ }, { type: "typography", - value: "400 0.875rem/1.3 'Roboto'", + value: "400 0.875rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { diff --git a/apps/storefront/tokens/altinn/light.ts b/apps/storefront/tokens/altinn/light.ts index 0efa8e7c92..241c4d6d2a 100644 --- a/apps/storefront/tokens/altinn/light.ts +++ b/apps/storefront/tokens/altinn/light.ts @@ -2337,7 +2337,7 @@ export const color = [ export const typography = [ { type: "typography", - value: "500 3.75rem/1.3 'Roboto'", + value: "500 3.75rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2360,7 +2360,7 @@ export const typography = [ }, { type: "typography", - value: "500 3rem/1.3 'Roboto'", + value: "500 3rem/1.3 'Helvetica Neue'", description: "H1", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2385,7 +2385,7 @@ export const typography = [ }, { type: "typography", - value: "500 2.25rem/1.3 'Roboto'", + value: "500 2.25rem/1.3 'Helvetica Neue'", description: "H2", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2410,7 +2410,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.875rem/1.3 'Roboto'", + value: "500 1.875rem/1.3 'Helvetica Neue'", description: "H3", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2435,7 +2435,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.5rem/1.3 'Roboto'", + value: "500 1.5rem/1.3 'Helvetica Neue'", description: "H4", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2460,7 +2460,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.3125rem/1.3 'Roboto'", + value: "500 1.3125rem/1.3 'Helvetica Neue'", description: "H5", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2485,7 +2485,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.125rem/1.3 'Roboto'", + value: "500 1.125rem/1.3 'Helvetica Neue'", description: "H6", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2510,7 +2510,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.875rem/1.7 'Roboto'", + value: "400 1.875rem/1.7 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2533,7 +2533,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.5rem/1.7 'Roboto'", + value: "400 1.5rem/1.7 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2556,7 +2556,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.3125rem/1.7 'Roboto'", + value: "400 1.3125rem/1.7 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2579,7 +2579,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.125rem/1.7 'Roboto'", + value: "400 1.125rem/1.7 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2602,7 +2602,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.3125rem/1.5 'Roboto'", + value: "400 1.3125rem/1.5 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2625,7 +2625,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.125rem/1.5 'Roboto'", + value: "400 1.125rem/1.5 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2648,7 +2648,7 @@ export const typography = [ }, { type: "typography", - value: "400 1rem/1.5 'Roboto'", + value: "400 1rem/1.5 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2671,7 +2671,7 @@ export const typography = [ }, { type: "typography", - value: "400 0.875rem/1.5 'Roboto'", + value: "400 0.875rem/1.5 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2694,7 +2694,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.3125rem/1.3 'Roboto'", + value: "400 1.3125rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2718,7 +2718,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.125rem/1.3 'Roboto'", + value: "400 1.125rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2742,7 +2742,7 @@ export const typography = [ }, { type: "typography", - value: "400 1rem/1.3 'Roboto'", + value: "400 1rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2766,7 +2766,7 @@ export const typography = [ }, { type: "typography", - value: "400 0.875rem/1.3 'Roboto'", + value: "400 0.875rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2790,7 +2790,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.125rem/1.7 'Roboto'", + value: "400 1.125rem/1.7 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2814,7 +2814,7 @@ export const typography = [ }, { type: "typography", - value: "400 1rem/1.7 'Roboto'", + value: "400 1rem/1.7 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2838,7 +2838,7 @@ export const typography = [ }, { type: "typography", - value: "400 0.875rem/1.7 'Roboto'", + value: "400 0.875rem/1.7 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2862,7 +2862,7 @@ export const typography = [ }, { type: "typography", - value: "400 0.8125rem/1.7 'Roboto'", + value: "400 0.8125rem/1.7 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2886,7 +2886,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.3125rem/1.3 'Roboto'", + value: "500 1.3125rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2909,7 +2909,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.125rem/1.3 'Roboto'", + value: "500 1.125rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2932,7 +2932,7 @@ export const typography = [ }, { type: "typography", - value: "500 1rem/1.3 'Roboto'", + value: "500 1rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2955,7 +2955,7 @@ export const typography = [ }, { type: "typography", - value: "500 0.875rem/1.3 'Roboto'", + value: "500 0.875rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2978,7 +2978,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.3125rem/1.3 'Roboto'", + value: "400 1.3125rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3001,7 +3001,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.125rem/1.3 'Roboto'", + value: "400 1.125rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3024,7 +3024,7 @@ export const typography = [ }, { type: "typography", - value: "400 1rem/1.3 'Roboto'", + value: "400 1rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3047,7 +3047,7 @@ export const typography = [ }, { type: "typography", - value: "400 0.875rem/1.3 'Roboto'", + value: "400 0.875rem/1.3 'Helvetica Neue'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { diff --git a/apps/storefront/tokens/portal/dark.ts b/apps/storefront/tokens/portal/dark.ts index 0423d3ac32..fdf85d8242 100644 --- a/apps/storefront/tokens/portal/dark.ts +++ b/apps/storefront/tokens/portal/dark.ts @@ -2337,7 +2337,7 @@ export const color = [ export const typography = [ { type: "typography", - value: "500 3.75rem/1.3 'Roboto'", + value: "500 3.75rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2360,7 +2360,7 @@ export const typography = [ }, { type: "typography", - value: "500 3rem/1.3 'Roboto'", + value: "500 3rem/1.3 'Inter'", description: "H1", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2385,7 +2385,7 @@ export const typography = [ }, { type: "typography", - value: "500 2.25rem/1.3 'Roboto'", + value: "500 2.25rem/1.3 'Inter'", description: "H2", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2410,7 +2410,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.875rem/1.3 'Roboto'", + value: "500 1.875rem/1.3 'Inter'", description: "H3", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2435,7 +2435,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.5rem/1.3 'Roboto'", + value: "500 1.5rem/1.3 'Inter'", description: "H4", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2460,7 +2460,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.3125rem/1.3 'Roboto'", + value: "500 1.3125rem/1.3 'Inter'", description: "H5", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2485,7 +2485,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.125rem/1.3 'Roboto'", + value: "500 1.125rem/1.3 'Inter'", description: "H6", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2510,7 +2510,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.875rem/1.7 'Roboto'", + value: "400 1.875rem/1.7 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2533,7 +2533,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.5rem/1.7 'Roboto'", + value: "400 1.5rem/1.7 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2556,7 +2556,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.3125rem/1.7 'Roboto'", + value: "400 1.3125rem/1.7 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2579,7 +2579,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.125rem/1.7 'Roboto'", + value: "400 1.125rem/1.7 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2602,7 +2602,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.3125rem/1.5 'Roboto'", + value: "400 1.3125rem/1.5 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2625,7 +2625,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.125rem/1.5 'Roboto'", + value: "400 1.125rem/1.5 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2648,7 +2648,7 @@ export const typography = [ }, { type: "typography", - value: "400 1rem/1.5 'Roboto'", + value: "400 1rem/1.5 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2671,7 +2671,7 @@ export const typography = [ }, { type: "typography", - value: "400 0.875rem/1.5 'Roboto'", + value: "400 0.875rem/1.5 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2694,7 +2694,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.3125rem/1.3 'Roboto'", + value: "400 1.3125rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2718,7 +2718,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.125rem/1.3 'Roboto'", + value: "400 1.125rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2742,7 +2742,7 @@ export const typography = [ }, { type: "typography", - value: "400 1rem/1.3 'Roboto'", + value: "400 1rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2766,7 +2766,7 @@ export const typography = [ }, { type: "typography", - value: "400 0.875rem/1.3 'Roboto'", + value: "400 0.875rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2790,7 +2790,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.125rem/1.7 'Roboto'", + value: "400 1.125rem/1.7 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2814,7 +2814,7 @@ export const typography = [ }, { type: "typography", - value: "400 1rem/1.7 'Roboto'", + value: "400 1rem/1.7 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2838,7 +2838,7 @@ export const typography = [ }, { type: "typography", - value: "400 0.875rem/1.7 'Roboto'", + value: "400 0.875rem/1.7 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2862,7 +2862,7 @@ export const typography = [ }, { type: "typography", - value: "400 0.8125rem/1.7 'Roboto'", + value: "400 0.8125rem/1.7 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2886,7 +2886,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.3125rem/1.3 'Roboto'", + value: "500 1.3125rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2909,7 +2909,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.125rem/1.3 'Roboto'", + value: "500 1.125rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2932,7 +2932,7 @@ export const typography = [ }, { type: "typography", - value: "500 1rem/1.3 'Roboto'", + value: "500 1rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2955,7 +2955,7 @@ export const typography = [ }, { type: "typography", - value: "500 0.875rem/1.3 'Roboto'", + value: "500 0.875rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2978,7 +2978,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.3125rem/1.3 'Roboto'", + value: "400 1.3125rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3001,7 +3001,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.125rem/1.3 'Roboto'", + value: "400 1.125rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3024,7 +3024,7 @@ export const typography = [ }, { type: "typography", - value: "400 1rem/1.3 'Roboto'", + value: "400 1rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3047,7 +3047,7 @@ export const typography = [ }, { type: "typography", - value: "400 0.875rem/1.3 'Roboto'", + value: "400 0.875rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { diff --git a/apps/storefront/tokens/portal/light.ts b/apps/storefront/tokens/portal/light.ts index c7e00787bf..40dbc69bb2 100644 --- a/apps/storefront/tokens/portal/light.ts +++ b/apps/storefront/tokens/portal/light.ts @@ -2337,7 +2337,7 @@ export const color = [ export const typography = [ { type: "typography", - value: "500 3.75rem/1.3 'Roboto'", + value: "500 3.75rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2360,7 +2360,7 @@ export const typography = [ }, { type: "typography", - value: "500 3rem/1.3 'Roboto'", + value: "500 3rem/1.3 'Inter'", description: "H1", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2385,7 +2385,7 @@ export const typography = [ }, { type: "typography", - value: "500 2.25rem/1.3 'Roboto'", + value: "500 2.25rem/1.3 'Inter'", description: "H2", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2410,7 +2410,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.875rem/1.3 'Roboto'", + value: "500 1.875rem/1.3 'Inter'", description: "H3", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2435,7 +2435,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.5rem/1.3 'Roboto'", + value: "500 1.5rem/1.3 'Inter'", description: "H4", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2460,7 +2460,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.3125rem/1.3 'Roboto'", + value: "500 1.3125rem/1.3 'Inter'", description: "H5", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2485,7 +2485,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.125rem/1.3 'Roboto'", + value: "500 1.125rem/1.3 'Inter'", description: "H6", filePath: "../../design-tokens/semantic/style.json", isSource: false, @@ -2510,7 +2510,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.875rem/1.7 'Roboto'", + value: "400 1.875rem/1.7 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2533,7 +2533,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.5rem/1.7 'Roboto'", + value: "400 1.5rem/1.7 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2556,7 +2556,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.3125rem/1.7 'Roboto'", + value: "400 1.3125rem/1.7 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2579,7 +2579,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.125rem/1.7 'Roboto'", + value: "400 1.125rem/1.7 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2602,7 +2602,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.3125rem/1.5 'Roboto'", + value: "400 1.3125rem/1.5 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2625,7 +2625,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.125rem/1.5 'Roboto'", + value: "400 1.125rem/1.5 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2648,7 +2648,7 @@ export const typography = [ }, { type: "typography", - value: "400 1rem/1.5 'Roboto'", + value: "400 1rem/1.5 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2671,7 +2671,7 @@ export const typography = [ }, { type: "typography", - value: "400 0.875rem/1.5 'Roboto'", + value: "400 0.875rem/1.5 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2694,7 +2694,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.3125rem/1.3 'Roboto'", + value: "400 1.3125rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2718,7 +2718,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.125rem/1.3 'Roboto'", + value: "400 1.125rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2742,7 +2742,7 @@ export const typography = [ }, { type: "typography", - value: "400 1rem/1.3 'Roboto'", + value: "400 1rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2766,7 +2766,7 @@ export const typography = [ }, { type: "typography", - value: "400 0.875rem/1.3 'Roboto'", + value: "400 0.875rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2790,7 +2790,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.125rem/1.7 'Roboto'", + value: "400 1.125rem/1.7 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2814,7 +2814,7 @@ export const typography = [ }, { type: "typography", - value: "400 1rem/1.7 'Roboto'", + value: "400 1rem/1.7 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2838,7 +2838,7 @@ export const typography = [ }, { type: "typography", - value: "400 0.875rem/1.7 'Roboto'", + value: "400 0.875rem/1.7 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2862,7 +2862,7 @@ export const typography = [ }, { type: "typography", - value: "400 0.8125rem/1.7 'Roboto'", + value: "400 0.8125rem/1.7 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2886,7 +2886,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.3125rem/1.3 'Roboto'", + value: "500 1.3125rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2909,7 +2909,7 @@ export const typography = [ }, { type: "typography", - value: "500 1.125rem/1.3 'Roboto'", + value: "500 1.125rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2932,7 +2932,7 @@ export const typography = [ }, { type: "typography", - value: "500 1rem/1.3 'Roboto'", + value: "500 1rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2955,7 +2955,7 @@ export const typography = [ }, { type: "typography", - value: "500 0.875rem/1.3 'Roboto'", + value: "500 0.875rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -2978,7 +2978,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.3125rem/1.3 'Roboto'", + value: "400 1.3125rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3001,7 +3001,7 @@ export const typography = [ }, { type: "typography", - value: "400 1.125rem/1.3 'Roboto'", + value: "400 1.125rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3024,7 +3024,7 @@ export const typography = [ }, { type: "typography", - value: "400 1rem/1.3 'Roboto'", + value: "400 1rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { @@ -3047,7 +3047,7 @@ export const typography = [ }, { type: "typography", - value: "400 0.875rem/1.3 'Roboto'", + value: "400 0.875rem/1.3 'Inter'", filePath: "../../design-tokens/semantic/style.json", isSource: false, original: { diff --git a/packages/theme/brand/altinn.css b/packages/theme/brand/altinn.css index 15803015f2..a5fb47cd75 100644 --- a/packages/theme/brand/altinn.css +++ b/packages/theme/brand/altinn.css @@ -1,4 +1,5 @@ @import url('./altinn/color-mode/light.css'); +@import url('./altinn/typography/secondary.css'); +@import url('./altinn/semantic.css'); @import url('./altinn/color-mode/dark.css'); -@import url('./altinn/typography.css'); -@import url('./altinn/semantic.css'); \ No newline at end of file +@import url('./altinn/typography/primary.css'); \ No newline at end of file diff --git a/packages/theme/brand/altinn/semantic.css b/packages/theme/brand/altinn/semantic.css index bde886df5b..fe51395b28 100644 --- a/packages/theme/brand/altinn/semantic.css +++ b/packages/theme/brand/altinn/semantic.css @@ -3,37 +3,37 @@ */ :root { - --ds-typography-heading-2xl: 500 3.75rem/1.3 'Roboto'; - --ds-typography-heading-xl: 500 3rem/1.3 'Roboto'; - --ds-typography-heading-lg: 500 2.25rem/1.3 'Roboto'; - --ds-typography-heading-md: 500 1.875rem/1.3 'Roboto'; - --ds-typography-heading-sm: 500 1.5rem/1.3 'Roboto'; - --ds-typography-heading-xs: 500 1.3125rem/1.3 'Roboto'; - --ds-typography-heading-2xs: 500 1.125rem/1.3 'Roboto'; - --ds-typography-ingress-lg: 400 1.875rem/1.7 'Roboto'; - --ds-typography-ingress-md: 400 1.5rem/1.7 'Roboto'; - --ds-typography-ingress-sm: 400 1.3125rem/1.7 'Roboto'; - --ds-typography-ingress-xs: 400 1.125rem/1.7 'Roboto'; - --ds-typography-paragraph-lg: 400 1.3125rem/1.5 'Roboto'; - --ds-typography-paragraph-md: 400 1.125rem/1.5 'Roboto'; - --ds-typography-paragraph-sm: 400 1rem/1.5 'Roboto'; - --ds-typography-paragraph-xs: 400 0.875rem/1.5 'Roboto'; - --ds-typography-paragraph-short-lg: 400 1.3125rem/1.3 'Roboto'; - --ds-typography-paragraph-short-md: 400 1.125rem/1.3 'Roboto'; - --ds-typography-paragraph-short-sm: 400 1rem/1.3 'Roboto'; - --ds-typography-paragraph-short-xs: 400 0.875rem/1.3 'Roboto'; - --ds-typography-paragraph-long-lg: 400 1.125rem/1.7 'Roboto'; - --ds-typography-paragraph-long-md: 400 1rem/1.7 'Roboto'; - --ds-typography-paragraph-long-sm: 400 0.875rem/1.7 'Roboto'; - --ds-typography-paragraph-long-xs: 400 0.8125rem/1.7 'Roboto'; - --ds-typography-label-lg: 500 1.3125rem/1.3 'Roboto'; - --ds-typography-label-md: 500 1.125rem/1.3 'Roboto'; - --ds-typography-label-sm: 500 1rem/1.3 'Roboto'; - --ds-typography-label-xs: 500 0.875rem/1.3 'Roboto'; - --ds-typography-error_message-lg: 400 1.3125rem/1.3 'Roboto'; - --ds-typography-error_message-md: 400 1.125rem/1.3 'Roboto'; - --ds-typography-error_message-sm: 400 1rem/1.3 'Roboto'; - --ds-typography-error_message-xs: 400 0.875rem/1.3 'Roboto'; + --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.125rem/1.7 'Helvetica Neue'; + --ds-typography-paragraph-long-md: 400 1rem/1.7 'Helvetica Neue'; + --ds-typography-paragraph-long-sm: 400 0.875rem/1.7 'Helvetica Neue'; + --ds-typography-paragraph-long-xs: 400 0.8125rem/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 new file mode 100644 index 0000000000..396d77f35d --- /dev/null +++ b/packages/theme/brand/altinn/typography/primary.css @@ -0,0 +1,277 @@ +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.base.typography.primary { +:root { + --ds-font-family: Helvetica Neue; + --ds-font-weight-medium: 500; + --ds-font-weight-semibold: 700; + --ds-font-weight-regular: 400; + --ds-line-height-sm: 1.3; + --ds-line-height-md: 1.5; + --ds-line-height-lg: 1.7; + --ds-font-size-1: 0.75rem; + --ds-font-size-2: 0.8125rem; + --ds-font-size-3: 0.875rem; + --ds-font-size-4: 1rem; + --ds-font-size-5: 1.125rem; + --ds-font-size-6: 1.3125rem; + --ds-font-size-7: 1.5rem; + --ds-font-size-8: 1.875rem; + --ds-font-size-9: 2.25rem; + --ds-font-size-10: 3rem; + --ds-font-size-11: 3.75rem; + --ds-letter-spacing-1: -1%; + --ds-letter-spacing-2: -0.5%; + --ds-letter-spacing-3: -0.25%; + --ds-letter-spacing-4: -0.15%; + --ds-letter-spacing-5: 0%; + --ds-letter-spacing-6: 0.15%; + --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-2); + 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-3); + 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-4); + 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-5); + 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; + } +} diff --git a/packages/theme/brand/altinn/typography/secondary.css b/packages/theme/brand/altinn/typography/secondary.css new file mode 100644 index 0000000000..2add37538d --- /dev/null +++ b/packages/theme/brand/altinn/typography/secondary.css @@ -0,0 +1,277 @@ +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.base.typography.secondary { +:root { + --ds-font-family: IBM Plex Mono; + --ds-font-weight-medium: 400; + --ds-font-weight-semibold: 700; + --ds-font-weight-regular: 400; + --ds-line-height-sm: 1.3; + --ds-line-height-md: 1.5; + --ds-line-height-lg: 1.7; + --ds-font-size-1: 0.75rem; + --ds-font-size-2: 0.8125rem; + --ds-font-size-3: 0.875rem; + --ds-font-size-4: 1rem; + --ds-font-size-5: 1.125rem; + --ds-font-size-6: 1.3125rem; + --ds-font-size-7: 1.5rem; + --ds-font-size-8: 1.875rem; + --ds-font-size-9: 2.25rem; + --ds-font-size-10: 3rem; + --ds-font-size-11: 3.75rem; + --ds-letter-spacing-1: -1%; + --ds-letter-spacing-2: -0.5%; + --ds-letter-spacing-3: -0.25%; + --ds-letter-spacing-4: -0.15%; + --ds-letter-spacing-5: 0%; + --ds-letter-spacing-6: 0.15%; + --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-2); + 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-3); + 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-4); + 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-5); + 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; + } +} diff --git a/packages/theme/brand/digdir.css b/packages/theme/brand/digdir.css index a232461565..4d9f01b881 100644 --- a/packages/theme/brand/digdir.css +++ b/packages/theme/brand/digdir.css @@ -1,4 +1,5 @@ @import url('./digdir/color-mode/light.css'); +@import url('./digdir/typography/secondary.css'); +@import url('./digdir/semantic.css'); @import url('./digdir/color-mode/dark.css'); -@import url('./digdir/typography.css'); -@import url('./digdir/semantic.css'); \ No newline at end of file +@import url('./digdir/typography/primary.css'); \ No newline at end of file diff --git a/packages/theme/brand/digdir/typography.css b/packages/theme/brand/digdir/typography/primary.css similarity index 99% rename from packages/theme/brand/digdir/typography.css rename to packages/theme/brand/digdir/typography/primary.css index 7a77fe288b..9cfcb0f809 100644 --- a/packages/theme/brand/digdir/typography.css +++ b/packages/theme/brand/digdir/typography/primary.css @@ -2,7 +2,7 @@ * These files are generated from design tokens defind using Token Studio */ -@layer ds.typography { +@layer ds.base.typography.primary { :root { --ds-font-family: Inter; --ds-font-weight-medium: 500; diff --git a/packages/theme/brand/portal/typography.css b/packages/theme/brand/digdir/typography/secondary.css similarity index 99% rename from packages/theme/brand/portal/typography.css rename to packages/theme/brand/digdir/typography/secondary.css index d15a838652..a2df6a8353 100644 --- a/packages/theme/brand/portal/typography.css +++ b/packages/theme/brand/digdir/typography/secondary.css @@ -2,9 +2,9 @@ * These files are generated from design tokens defind using Token Studio */ -@layer ds.typography { +@layer ds.base.typography.secondary { :root { - --ds-font-family: Roboto; + --ds-font-family: IBM Plex Mono; --ds-font-weight-medium: 500; --ds-font-weight-semibold: 600; --ds-font-weight-regular: 400; diff --git a/packages/theme/brand/portal.css b/packages/theme/brand/portal.css index b15edefd9a..f655323598 100644 --- a/packages/theme/brand/portal.css +++ b/packages/theme/brand/portal.css @@ -1,4 +1,5 @@ @import url('./portal/color-mode/light.css'); +@import url('./portal/typography/secondary.css'); +@import url('./portal/semantic.css'); @import url('./portal/color-mode/dark.css'); -@import url('./portal/typography.css'); -@import url('./portal/semantic.css'); \ No newline at end of file +@import url('./portal/typography/primary.css'); \ No newline at end of file diff --git a/packages/theme/brand/portal/semantic.css b/packages/theme/brand/portal/semantic.css index bde886df5b..c39b920f3f 100644 --- a/packages/theme/brand/portal/semantic.css +++ b/packages/theme/brand/portal/semantic.css @@ -3,37 +3,37 @@ */ :root { - --ds-typography-heading-2xl: 500 3.75rem/1.3 'Roboto'; - --ds-typography-heading-xl: 500 3rem/1.3 'Roboto'; - --ds-typography-heading-lg: 500 2.25rem/1.3 'Roboto'; - --ds-typography-heading-md: 500 1.875rem/1.3 'Roboto'; - --ds-typography-heading-sm: 500 1.5rem/1.3 'Roboto'; - --ds-typography-heading-xs: 500 1.3125rem/1.3 'Roboto'; - --ds-typography-heading-2xs: 500 1.125rem/1.3 'Roboto'; - --ds-typography-ingress-lg: 400 1.875rem/1.7 'Roboto'; - --ds-typography-ingress-md: 400 1.5rem/1.7 'Roboto'; - --ds-typography-ingress-sm: 400 1.3125rem/1.7 'Roboto'; - --ds-typography-ingress-xs: 400 1.125rem/1.7 'Roboto'; - --ds-typography-paragraph-lg: 400 1.3125rem/1.5 'Roboto'; - --ds-typography-paragraph-md: 400 1.125rem/1.5 'Roboto'; - --ds-typography-paragraph-sm: 400 1rem/1.5 'Roboto'; - --ds-typography-paragraph-xs: 400 0.875rem/1.5 'Roboto'; - --ds-typography-paragraph-short-lg: 400 1.3125rem/1.3 'Roboto'; - --ds-typography-paragraph-short-md: 400 1.125rem/1.3 'Roboto'; - --ds-typography-paragraph-short-sm: 400 1rem/1.3 'Roboto'; - --ds-typography-paragraph-short-xs: 400 0.875rem/1.3 'Roboto'; - --ds-typography-paragraph-long-lg: 400 1.125rem/1.7 'Roboto'; - --ds-typography-paragraph-long-md: 400 1rem/1.7 'Roboto'; - --ds-typography-paragraph-long-sm: 400 0.875rem/1.7 'Roboto'; - --ds-typography-paragraph-long-xs: 400 0.8125rem/1.7 'Roboto'; - --ds-typography-label-lg: 500 1.3125rem/1.3 'Roboto'; - --ds-typography-label-md: 500 1.125rem/1.3 'Roboto'; - --ds-typography-label-sm: 500 1rem/1.3 'Roboto'; - --ds-typography-label-xs: 500 0.875rem/1.3 'Roboto'; - --ds-typography-error_message-lg: 400 1.3125rem/1.3 'Roboto'; - --ds-typography-error_message-md: 400 1.125rem/1.3 'Roboto'; - --ds-typography-error_message-sm: 400 1rem/1.3 'Roboto'; - --ds-typography-error_message-xs: 400 0.875rem/1.3 'Roboto'; + --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.125rem/1.7 'Inter'; + --ds-typography-paragraph-long-md: 400 1rem/1.7 'Inter'; + --ds-typography-paragraph-long-sm: 400 0.875rem/1.7 'Inter'; + --ds-typography-paragraph-long-xs: 400 0.8125rem/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.css b/packages/theme/brand/portal/typography/primary.css similarity index 99% rename from packages/theme/brand/uutilsynet/typography.css rename to packages/theme/brand/portal/typography/primary.css index 7a77fe288b..9cfcb0f809 100644 --- a/packages/theme/brand/uutilsynet/typography.css +++ b/packages/theme/brand/portal/typography/primary.css @@ -2,7 +2,7 @@ * These files are generated from design tokens defind using Token Studio */ -@layer ds.typography { +@layer ds.base.typography.primary { :root { --ds-font-family: Inter; --ds-font-weight-medium: 500; diff --git a/packages/theme/brand/portal/typography/secondary.css b/packages/theme/brand/portal/typography/secondary.css new file mode 100644 index 0000000000..2add37538d --- /dev/null +++ b/packages/theme/brand/portal/typography/secondary.css @@ -0,0 +1,277 @@ +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.base.typography.secondary { +:root { + --ds-font-family: IBM Plex Mono; + --ds-font-weight-medium: 400; + --ds-font-weight-semibold: 700; + --ds-font-weight-regular: 400; + --ds-line-height-sm: 1.3; + --ds-line-height-md: 1.5; + --ds-line-height-lg: 1.7; + --ds-font-size-1: 0.75rem; + --ds-font-size-2: 0.8125rem; + --ds-font-size-3: 0.875rem; + --ds-font-size-4: 1rem; + --ds-font-size-5: 1.125rem; + --ds-font-size-6: 1.3125rem; + --ds-font-size-7: 1.5rem; + --ds-font-size-8: 1.875rem; + --ds-font-size-9: 2.25rem; + --ds-font-size-10: 3rem; + --ds-font-size-11: 3.75rem; + --ds-letter-spacing-1: -1%; + --ds-letter-spacing-2: -0.5%; + --ds-letter-spacing-3: -0.25%; + --ds-letter-spacing-4: -0.15%; + --ds-letter-spacing-5: 0%; + --ds-letter-spacing-6: 0.15%; + --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-2); + 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-3); + 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-4); + 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-5); + 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; + } +} diff --git a/packages/theme/brand/uutilsynet.css b/packages/theme/brand/uutilsynet.css index 7d15b8611b..ed3eb354c2 100644 --- a/packages/theme/brand/uutilsynet.css +++ b/packages/theme/brand/uutilsynet.css @@ -1,4 +1,5 @@ @import url('./uutilsynet/color-mode/light.css'); +@import url('./uutilsynet/typography/secondary.css'); +@import url('./uutilsynet/semantic.css'); @import url('./uutilsynet/color-mode/dark.css'); -@import url('./uutilsynet/typography.css'); -@import url('./uutilsynet/semantic.css'); \ No newline at end of file +@import url('./uutilsynet/typography/primary.css'); \ No newline at end of file diff --git a/packages/theme/brand/altinn/typography.css b/packages/theme/brand/uutilsynet/typography/primary.css similarity index 99% rename from packages/theme/brand/altinn/typography.css rename to packages/theme/brand/uutilsynet/typography/primary.css index d15a838652..9cfcb0f809 100644 --- a/packages/theme/brand/altinn/typography.css +++ b/packages/theme/brand/uutilsynet/typography/primary.css @@ -2,9 +2,9 @@ * These files are generated from design tokens defind using Token Studio */ -@layer ds.typography { +@layer ds.base.typography.primary { :root { - --ds-font-family: Roboto; + --ds-font-family: Inter; --ds-font-weight-medium: 500; --ds-font-weight-semibold: 600; --ds-font-weight-regular: 400; diff --git a/packages/theme/brand/uutilsynet/typography/secondary.css b/packages/theme/brand/uutilsynet/typography/secondary.css new file mode 100644 index 0000000000..2add37538d --- /dev/null +++ b/packages/theme/brand/uutilsynet/typography/secondary.css @@ -0,0 +1,277 @@ +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.base.typography.secondary { +:root { + --ds-font-family: IBM Plex Mono; + --ds-font-weight-medium: 400; + --ds-font-weight-semibold: 700; + --ds-font-weight-regular: 400; + --ds-line-height-sm: 1.3; + --ds-line-height-md: 1.5; + --ds-line-height-lg: 1.7; + --ds-font-size-1: 0.75rem; + --ds-font-size-2: 0.8125rem; + --ds-font-size-3: 0.875rem; + --ds-font-size-4: 1rem; + --ds-font-size-5: 1.125rem; + --ds-font-size-6: 1.3125rem; + --ds-font-size-7: 1.5rem; + --ds-font-size-8: 1.875rem; + --ds-font-size-9: 2.25rem; + --ds-font-size-10: 3rem; + --ds-font-size-11: 3.75rem; + --ds-letter-spacing-1: -1%; + --ds-letter-spacing-2: -0.5%; + --ds-letter-spacing-3: -0.25%; + --ds-letter-spacing-4: -0.15%; + --ds-letter-spacing-5: 0%; + --ds-letter-spacing-6: 0.15%; + --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-2); + 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-3); + 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-4); + 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-5); + 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; + } +}