From 5c8cd01a35838d2efad00e6e5015c780fb12ed68 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Fri, 15 Mar 2024 12:40:05 +0100 Subject: [PATCH] updated spacing/sizing tokens to rem --- apps/storefront/tokens/altinn.ts | 78 ++++++++++++------------ apps/storefront/tokens/brreg.ts | 78 ++++++++++++------------ apps/storefront/tokens/digdir.ts | 78 ++++++++++++------------ apps/storefront/tokens/tilsynet.ts | 78 ++++++++++++------------ packages/theme/brand/altinn/tokens.css | 76 +++++++++++------------ packages/theme/brand/brreg/tokens.css | 76 +++++++++++------------ packages/theme/brand/digdir/tokens.css | 76 +++++++++++------------ packages/theme/brand/tilsynet/tokens.css | 76 +++++++++++------------ packages/theme/scripts/build.ts | 12 ++-- packages/theme/scripts/transformers.ts | 19 ++++++ 10 files changed, 330 insertions(+), 317 deletions(-) diff --git a/apps/storefront/tokens/altinn.ts b/apps/storefront/tokens/altinn.ts index fa230d5786..9d6bc0669b 100644 --- a/apps/storefront/tokens/altinn.ts +++ b/apps/storefront/tokens/altinn.ts @@ -3079,7 +3079,7 @@ export const borderRadius = [ export const spacing = [ { - value: 'calc(0)', + value: '0rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3092,7 +3092,7 @@ export const spacing = [ path: ['spacing', '0'], }, { - value: 'calc(4)', + value: '0.25rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3105,7 +3105,7 @@ export const spacing = [ path: ['spacing', '1'], }, { - value: 'calc(8)', + value: '0.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3118,7 +3118,7 @@ export const spacing = [ path: ['spacing', '2'], }, { - value: 'calc(12)', + value: '0.75rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3131,7 +3131,7 @@ export const spacing = [ path: ['spacing', '3'], }, { - value: 'calc(16)', + value: '1rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3144,7 +3144,7 @@ export const spacing = [ path: ['spacing', '4'], }, { - value: 'calc(20)', + value: '1.25rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3157,7 +3157,7 @@ export const spacing = [ path: ['spacing', '5'], }, { - value: 'calc(24)', + value: '1.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3170,7 +3170,7 @@ export const spacing = [ path: ['spacing', '6'], }, { - value: 'calc(28)', + value: '1.75rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3183,7 +3183,7 @@ export const spacing = [ path: ['spacing', '7'], }, { - value: 'calc(32)', + value: '2rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3196,7 +3196,7 @@ export const spacing = [ path: ['spacing', '8'], }, { - value: 'calc(36)', + value: '2.25rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3209,7 +3209,7 @@ export const spacing = [ path: ['spacing', '9'], }, { - value: 'calc(40)', + value: '2.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3222,7 +3222,7 @@ export const spacing = [ path: ['spacing', '10'], }, { - value: 'calc(44)', + value: '2.75rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3235,22 +3235,20 @@ export const spacing = [ path: ['spacing', '11'], }, { - value: 'calc(48)', + value: '3rem', type: 'spacing', - description: '48px - 54px', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, original: { value: '{base_sizing}*12', type: 'spacing', - description: '48px - 54px', }, name: '--fds-spacing-12', attributes: {}, path: ['spacing', '12'], }, { - value: 'calc(52)', + value: '3.25rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3263,7 +3261,7 @@ export const spacing = [ path: ['spacing', '13'], }, { - value: 'calc(56)', + value: '3.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3276,7 +3274,7 @@ export const spacing = [ path: ['spacing', '14'], }, { - value: 'calc(72)', + value: '4.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3289,7 +3287,7 @@ export const spacing = [ path: ['spacing', '18'], }, { - value: 'calc(88)', + value: '5.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3302,7 +3300,7 @@ export const spacing = [ path: ['spacing', '22'], }, { - value: 'calc(104)', + value: '6.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3315,7 +3313,7 @@ export const spacing = [ path: ['spacing', '26'], }, { - value: 'calc(120)', + value: '7.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3331,7 +3329,7 @@ export const spacing = [ export const sizing = [ { - value: 'calc(0)', + value: '0rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3344,7 +3342,7 @@ export const sizing = [ path: ['sizing', '0'], }, { - value: 'calc(4)', + value: '0.25rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3357,7 +3355,7 @@ export const sizing = [ path: ['sizing', '1'], }, { - value: 'calc(8)', + value: '0.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3370,7 +3368,7 @@ export const sizing = [ path: ['sizing', '2'], }, { - value: 'calc(12)', + value: '0.75rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3383,7 +3381,7 @@ export const sizing = [ path: ['sizing', '3'], }, { - value: 'calc(16)', + value: '1rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3396,7 +3394,7 @@ export const sizing = [ path: ['sizing', '4'], }, { - value: 'calc(20)', + value: '1.25rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3409,7 +3407,7 @@ export const sizing = [ path: ['sizing', '5'], }, { - value: 'calc(24)', + value: '1.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3422,7 +3420,7 @@ export const sizing = [ path: ['sizing', '6'], }, { - value: 'calc(28)', + value: '1.75rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3435,7 +3433,7 @@ export const sizing = [ path: ['sizing', '7'], }, { - value: 'calc(32)', + value: '2rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3448,7 +3446,7 @@ export const sizing = [ path: ['sizing', '8'], }, { - value: 'calc(36)', + value: '2.25rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3461,7 +3459,7 @@ export const sizing = [ path: ['sizing', '9'], }, { - value: 'calc(40)', + value: '2.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3474,7 +3472,7 @@ export const sizing = [ path: ['sizing', '10'], }, { - value: 'calc(44)', + value: '2.75rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3487,7 +3485,7 @@ export const sizing = [ path: ['sizing', '11'], }, { - value: 'calc(48)', + value: '3rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3500,7 +3498,7 @@ export const sizing = [ path: ['sizing', '12'], }, { - value: 'calc(52)', + value: '3.25rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3513,7 +3511,7 @@ export const sizing = [ path: ['sizing', '13'], }, { - value: 'calc(56)', + value: '3.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3526,7 +3524,7 @@ export const sizing = [ path: ['sizing', '14'], }, { - value: 'calc(72)', + value: '4.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3539,7 +3537,7 @@ export const sizing = [ path: ['sizing', '18'], }, { - value: 'calc(88)', + value: '5.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3552,7 +3550,7 @@ export const sizing = [ path: ['sizing', '22'], }, { - value: 'calc(104)', + value: '6.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3565,7 +3563,7 @@ export const sizing = [ path: ['sizing', '26'], }, { - value: 'calc(120)', + value: '7.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, diff --git a/apps/storefront/tokens/brreg.ts b/apps/storefront/tokens/brreg.ts index 865ceb16a1..a8989bcd39 100644 --- a/apps/storefront/tokens/brreg.ts +++ b/apps/storefront/tokens/brreg.ts @@ -3097,7 +3097,7 @@ export const borderRadius = [ export const spacing = [ { - value: 'calc(0)', + value: '0rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3110,7 +3110,7 @@ export const spacing = [ path: ['spacing', '0'], }, { - value: 'calc(4)', + value: '0.25rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3123,7 +3123,7 @@ export const spacing = [ path: ['spacing', '1'], }, { - value: 'calc(8)', + value: '0.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3136,7 +3136,7 @@ export const spacing = [ path: ['spacing', '2'], }, { - value: 'calc(12)', + value: '0.75rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3149,7 +3149,7 @@ export const spacing = [ path: ['spacing', '3'], }, { - value: 'calc(16)', + value: '1rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3162,7 +3162,7 @@ export const spacing = [ path: ['spacing', '4'], }, { - value: 'calc(20)', + value: '1.25rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3175,7 +3175,7 @@ export const spacing = [ path: ['spacing', '5'], }, { - value: 'calc(24)', + value: '1.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3188,7 +3188,7 @@ export const spacing = [ path: ['spacing', '6'], }, { - value: 'calc(28)', + value: '1.75rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3201,7 +3201,7 @@ export const spacing = [ path: ['spacing', '7'], }, { - value: 'calc(32)', + value: '2rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3214,7 +3214,7 @@ export const spacing = [ path: ['spacing', '8'], }, { - value: 'calc(36)', + value: '2.25rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3227,7 +3227,7 @@ export const spacing = [ path: ['spacing', '9'], }, { - value: 'calc(40)', + value: '2.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3240,7 +3240,7 @@ export const spacing = [ path: ['spacing', '10'], }, { - value: 'calc(44)', + value: '2.75rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3253,22 +3253,20 @@ export const spacing = [ path: ['spacing', '11'], }, { - value: 'calc(48)', + value: '3rem', type: 'spacing', - description: '48px - 54px', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, original: { value: '{base_sizing}*12', type: 'spacing', - description: '48px - 54px', }, name: '--fds-spacing-12', attributes: {}, path: ['spacing', '12'], }, { - value: 'calc(52)', + value: '3.25rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3281,7 +3279,7 @@ export const spacing = [ path: ['spacing', '13'], }, { - value: 'calc(56)', + value: '3.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3294,7 +3292,7 @@ export const spacing = [ path: ['spacing', '14'], }, { - value: 'calc(72)', + value: '4.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3307,7 +3305,7 @@ export const spacing = [ path: ['spacing', '18'], }, { - value: 'calc(88)', + value: '5.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3320,7 +3318,7 @@ export const spacing = [ path: ['spacing', '22'], }, { - value: 'calc(104)', + value: '6.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3333,7 +3331,7 @@ export const spacing = [ path: ['spacing', '26'], }, { - value: 'calc(120)', + value: '7.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3349,7 +3347,7 @@ export const spacing = [ export const sizing = [ { - value: 'calc(0)', + value: '0rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3362,7 +3360,7 @@ export const sizing = [ path: ['sizing', '0'], }, { - value: 'calc(4)', + value: '0.25rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3375,7 +3373,7 @@ export const sizing = [ path: ['sizing', '1'], }, { - value: 'calc(8)', + value: '0.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3388,7 +3386,7 @@ export const sizing = [ path: ['sizing', '2'], }, { - value: 'calc(12)', + value: '0.75rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3401,7 +3399,7 @@ export const sizing = [ path: ['sizing', '3'], }, { - value: 'calc(16)', + value: '1rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3414,7 +3412,7 @@ export const sizing = [ path: ['sizing', '4'], }, { - value: 'calc(20)', + value: '1.25rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3427,7 +3425,7 @@ export const sizing = [ path: ['sizing', '5'], }, { - value: 'calc(24)', + value: '1.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3440,7 +3438,7 @@ export const sizing = [ path: ['sizing', '6'], }, { - value: 'calc(28)', + value: '1.75rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3453,7 +3451,7 @@ export const sizing = [ path: ['sizing', '7'], }, { - value: 'calc(32)', + value: '2rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3466,7 +3464,7 @@ export const sizing = [ path: ['sizing', '8'], }, { - value: 'calc(36)', + value: '2.25rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3479,7 +3477,7 @@ export const sizing = [ path: ['sizing', '9'], }, { - value: 'calc(40)', + value: '2.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3492,7 +3490,7 @@ export const sizing = [ path: ['sizing', '10'], }, { - value: 'calc(44)', + value: '2.75rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3505,7 +3503,7 @@ export const sizing = [ path: ['sizing', '11'], }, { - value: 'calc(48)', + value: '3rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3518,7 +3516,7 @@ export const sizing = [ path: ['sizing', '12'], }, { - value: 'calc(52)', + value: '3.25rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3531,7 +3529,7 @@ export const sizing = [ path: ['sizing', '13'], }, { - value: 'calc(56)', + value: '3.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3544,7 +3542,7 @@ export const sizing = [ path: ['sizing', '14'], }, { - value: 'calc(72)', + value: '4.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3557,7 +3555,7 @@ export const sizing = [ path: ['sizing', '18'], }, { - value: 'calc(88)', + value: '5.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3570,7 +3568,7 @@ export const sizing = [ path: ['sizing', '22'], }, { - value: 'calc(104)', + value: '6.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3583,7 +3581,7 @@ export const sizing = [ path: ['sizing', '26'], }, { - value: 'calc(120)', + value: '7.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, diff --git a/apps/storefront/tokens/digdir.ts b/apps/storefront/tokens/digdir.ts index 32f4027a73..3be74f9311 100644 --- a/apps/storefront/tokens/digdir.ts +++ b/apps/storefront/tokens/digdir.ts @@ -3073,7 +3073,7 @@ export const borderRadius = [ export const spacing = [ { - value: 'calc(0)', + value: '0rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3086,7 +3086,7 @@ export const spacing = [ path: ['spacing', '0'], }, { - value: 'calc(4)', + value: '0.25rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3099,7 +3099,7 @@ export const spacing = [ path: ['spacing', '1'], }, { - value: 'calc(8)', + value: '0.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3112,7 +3112,7 @@ export const spacing = [ path: ['spacing', '2'], }, { - value: 'calc(12)', + value: '0.75rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3125,7 +3125,7 @@ export const spacing = [ path: ['spacing', '3'], }, { - value: 'calc(16)', + value: '1rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3138,7 +3138,7 @@ export const spacing = [ path: ['spacing', '4'], }, { - value: 'calc(20)', + value: '1.25rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3151,7 +3151,7 @@ export const spacing = [ path: ['spacing', '5'], }, { - value: 'calc(24)', + value: '1.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3164,7 +3164,7 @@ export const spacing = [ path: ['spacing', '6'], }, { - value: 'calc(28)', + value: '1.75rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3177,7 +3177,7 @@ export const spacing = [ path: ['spacing', '7'], }, { - value: 'calc(32)', + value: '2rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3190,7 +3190,7 @@ export const spacing = [ path: ['spacing', '8'], }, { - value: 'calc(36)', + value: '2.25rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3203,7 +3203,7 @@ export const spacing = [ path: ['spacing', '9'], }, { - value: 'calc(40)', + value: '2.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3216,7 +3216,7 @@ export const spacing = [ path: ['spacing', '10'], }, { - value: 'calc(44)', + value: '2.75rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3229,22 +3229,20 @@ export const spacing = [ path: ['spacing', '11'], }, { - value: 'calc(48)', + value: '3rem', type: 'spacing', - description: '48px - 54px', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, original: { value: '{base_sizing}*12', type: 'spacing', - description: '48px - 54px', }, name: '--fds-spacing-12', attributes: {}, path: ['spacing', '12'], }, { - value: 'calc(52)', + value: '3.25rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3257,7 +3255,7 @@ export const spacing = [ path: ['spacing', '13'], }, { - value: 'calc(56)', + value: '3.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3270,7 +3268,7 @@ export const spacing = [ path: ['spacing', '14'], }, { - value: 'calc(72)', + value: '4.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3283,7 +3281,7 @@ export const spacing = [ path: ['spacing', '18'], }, { - value: 'calc(88)', + value: '5.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3296,7 +3294,7 @@ export const spacing = [ path: ['spacing', '22'], }, { - value: 'calc(104)', + value: '6.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3309,7 +3307,7 @@ export const spacing = [ path: ['spacing', '26'], }, { - value: 'calc(120)', + value: '7.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3325,7 +3323,7 @@ export const spacing = [ export const sizing = [ { - value: 'calc(0)', + value: '0rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3338,7 +3336,7 @@ export const sizing = [ path: ['sizing', '0'], }, { - value: 'calc(4)', + value: '0.25rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3351,7 +3349,7 @@ export const sizing = [ path: ['sizing', '1'], }, { - value: 'calc(8)', + value: '0.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3364,7 +3362,7 @@ export const sizing = [ path: ['sizing', '2'], }, { - value: 'calc(12)', + value: '0.75rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3377,7 +3375,7 @@ export const sizing = [ path: ['sizing', '3'], }, { - value: 'calc(16)', + value: '1rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3390,7 +3388,7 @@ export const sizing = [ path: ['sizing', '4'], }, { - value: 'calc(20)', + value: '1.25rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3403,7 +3401,7 @@ export const sizing = [ path: ['sizing', '5'], }, { - value: 'calc(24)', + value: '1.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3416,7 +3414,7 @@ export const sizing = [ path: ['sizing', '6'], }, { - value: 'calc(28)', + value: '1.75rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3429,7 +3427,7 @@ export const sizing = [ path: ['sizing', '7'], }, { - value: 'calc(32)', + value: '2rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3442,7 +3440,7 @@ export const sizing = [ path: ['sizing', '8'], }, { - value: 'calc(36)', + value: '2.25rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3455,7 +3453,7 @@ export const sizing = [ path: ['sizing', '9'], }, { - value: 'calc(40)', + value: '2.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3468,7 +3466,7 @@ export const sizing = [ path: ['sizing', '10'], }, { - value: 'calc(44)', + value: '2.75rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3481,7 +3479,7 @@ export const sizing = [ path: ['sizing', '11'], }, { - value: 'calc(48)', + value: '3rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3494,7 +3492,7 @@ export const sizing = [ path: ['sizing', '12'], }, { - value: 'calc(52)', + value: '3.25rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3507,7 +3505,7 @@ export const sizing = [ path: ['sizing', '13'], }, { - value: 'calc(56)', + value: '3.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3520,7 +3518,7 @@ export const sizing = [ path: ['sizing', '14'], }, { - value: 'calc(72)', + value: '4.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3533,7 +3531,7 @@ export const sizing = [ path: ['sizing', '18'], }, { - value: 'calc(88)', + value: '5.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3546,7 +3544,7 @@ export const sizing = [ path: ['sizing', '22'], }, { - value: 'calc(104)', + value: '6.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3559,7 +3557,7 @@ export const sizing = [ path: ['sizing', '26'], }, { - value: 'calc(120)', + value: '7.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, diff --git a/apps/storefront/tokens/tilsynet.ts b/apps/storefront/tokens/tilsynet.ts index 07d8bafa2e..9ca8d318db 100644 --- a/apps/storefront/tokens/tilsynet.ts +++ b/apps/storefront/tokens/tilsynet.ts @@ -3019,7 +3019,7 @@ export const borderRadius = [ export const spacing = [ { - value: 'calc(0)', + value: '0rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3032,7 +3032,7 @@ export const spacing = [ path: ['spacing', '0'], }, { - value: 'calc(4)', + value: '0.25rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3045,7 +3045,7 @@ export const spacing = [ path: ['spacing', '1'], }, { - value: 'calc(8)', + value: '0.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3058,7 +3058,7 @@ export const spacing = [ path: ['spacing', '2'], }, { - value: 'calc(12)', + value: '0.75rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3071,7 +3071,7 @@ export const spacing = [ path: ['spacing', '3'], }, { - value: 'calc(16)', + value: '1rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3084,7 +3084,7 @@ export const spacing = [ path: ['spacing', '4'], }, { - value: 'calc(20)', + value: '1.25rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3097,7 +3097,7 @@ export const spacing = [ path: ['spacing', '5'], }, { - value: 'calc(24)', + value: '1.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3110,7 +3110,7 @@ export const spacing = [ path: ['spacing', '6'], }, { - value: 'calc(28)', + value: '1.75rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3123,7 +3123,7 @@ export const spacing = [ path: ['spacing', '7'], }, { - value: 'calc(32)', + value: '2rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3136,7 +3136,7 @@ export const spacing = [ path: ['spacing', '8'], }, { - value: 'calc(36)', + value: '2.25rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3149,7 +3149,7 @@ export const spacing = [ path: ['spacing', '9'], }, { - value: 'calc(40)', + value: '2.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3162,7 +3162,7 @@ export const spacing = [ path: ['spacing', '10'], }, { - value: 'calc(44)', + value: '2.75rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3175,22 +3175,20 @@ export const spacing = [ path: ['spacing', '11'], }, { - value: 'calc(48)', + value: '3rem', type: 'spacing', - description: '48px - 54px', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, original: { value: '{base_sizing}*12', type: 'spacing', - description: '48px - 54px', }, name: '--fds-spacing-12', attributes: {}, path: ['spacing', '12'], }, { - value: 'calc(52)', + value: '3.25rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3203,7 +3201,7 @@ export const spacing = [ path: ['spacing', '13'], }, { - value: 'calc(56)', + value: '3.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3216,7 +3214,7 @@ export const spacing = [ path: ['spacing', '14'], }, { - value: 'calc(72)', + value: '4.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3229,7 +3227,7 @@ export const spacing = [ path: ['spacing', '18'], }, { - value: 'calc(88)', + value: '5.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3242,7 +3240,7 @@ export const spacing = [ path: ['spacing', '22'], }, { - value: 'calc(104)', + value: '6.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3255,7 +3253,7 @@ export const spacing = [ path: ['spacing', '26'], }, { - value: 'calc(120)', + value: '7.5rem', type: 'spacing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3271,7 +3269,7 @@ export const spacing = [ export const sizing = [ { - value: 'calc(0)', + value: '0rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3284,7 +3282,7 @@ export const sizing = [ path: ['sizing', '0'], }, { - value: 'calc(4)', + value: '0.25rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3297,7 +3295,7 @@ export const sizing = [ path: ['sizing', '1'], }, { - value: 'calc(8)', + value: '0.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3310,7 +3308,7 @@ export const sizing = [ path: ['sizing', '2'], }, { - value: 'calc(12)', + value: '0.75rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3323,7 +3321,7 @@ export const sizing = [ path: ['sizing', '3'], }, { - value: 'calc(16)', + value: '1rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3336,7 +3334,7 @@ export const sizing = [ path: ['sizing', '4'], }, { - value: 'calc(20)', + value: '1.25rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3349,7 +3347,7 @@ export const sizing = [ path: ['sizing', '5'], }, { - value: 'calc(24)', + value: '1.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3362,7 +3360,7 @@ export const sizing = [ path: ['sizing', '6'], }, { - value: 'calc(28)', + value: '1.75rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3375,7 +3373,7 @@ export const sizing = [ path: ['sizing', '7'], }, { - value: 'calc(32)', + value: '2rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3388,7 +3386,7 @@ export const sizing = [ path: ['sizing', '8'], }, { - value: 'calc(36)', + value: '2.25rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3401,7 +3399,7 @@ export const sizing = [ path: ['sizing', '9'], }, { - value: 'calc(40)', + value: '2.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3414,7 +3412,7 @@ export const sizing = [ path: ['sizing', '10'], }, { - value: 'calc(44)', + value: '2.75rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3427,7 +3425,7 @@ export const sizing = [ path: ['sizing', '11'], }, { - value: 'calc(48)', + value: '3rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3440,7 +3438,7 @@ export const sizing = [ path: ['sizing', '12'], }, { - value: 'calc(52)', + value: '3.25rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3453,7 +3451,7 @@ export const sizing = [ path: ['sizing', '13'], }, { - value: 'calc(56)', + value: '3.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3466,7 +3464,7 @@ export const sizing = [ path: ['sizing', '14'], }, { - value: 'calc(72)', + value: '4.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3479,7 +3477,7 @@ export const sizing = [ path: ['sizing', '18'], }, { - value: 'calc(88)', + value: '5.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3492,7 +3490,7 @@ export const sizing = [ path: ['sizing', '22'], }, { - value: 'calc(104)', + value: '6.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, @@ -3505,7 +3503,7 @@ export const sizing = [ path: ['sizing', '26'], }, { - value: 'calc(120)', + value: '7.5rem', type: 'sizing', filePath: '../../design-tokens/Base/Semantic.json', isSource: false, diff --git a/packages/theme/brand/altinn/tokens.css b/packages/theme/brand/altinn/tokens.css index 52677b75ce..81196993d8 100644 --- a/packages/theme/brand/altinn/tokens.css +++ b/packages/theme/brand/altinn/tokens.css @@ -259,45 +259,45 @@ --fds-border_radius-xxxlarge: 24px; --fds-border_radius-xxxxlarge: 32px; --fds-border_radius-full: 9999px; - --fds-spacing-0: calc(0); - --fds-spacing-1: calc(var(--fds-base_sizing)); - --fds-spacing-2: calc(8); - --fds-spacing-3: calc(12); - --fds-spacing-4: calc(16); - --fds-spacing-5: calc(20); - --fds-spacing-6: calc(2var(--fds-base_sizing)); - --fds-spacing-7: calc(28); - --fds-spacing-8: calc(32); - --fds-spacing-9: calc(36); - --fds-spacing-10: calc(var(--fds-base_sizing)0); - --fds-spacing-11: calc(var(--fds-base_sizing)4); - --fds-spacing-12: calc(var(--fds-base_sizing)8); - --fds-spacing-13: calc(52); - --fds-spacing-14: calc(56); - --fds-spacing-18: calc(72); - --fds-spacing-22: calc(88); - --fds-spacing-26: calc(10var(--fds-base_sizing)); - --fds-spacing-30: calc(120); + --fds-spacing-0: 0rem; + --fds-spacing-1: 0.25rem; + --fds-spacing-2: 0.5rem; + --fds-spacing-3: 0.75rem; + --fds-spacing-4: 1rem; + --fds-spacing-5: 1.25rem; + --fds-spacing-6: 1.5rem; + --fds-spacing-7: 1.75rem; + --fds-spacing-8: 2rem; + --fds-spacing-9: 2.25rem; + --fds-spacing-10: 2.5rem; + --fds-spacing-11: 2.75rem; + --fds-spacing-12: 3rem; + --fds-spacing-13: 3.25rem; + --fds-spacing-14: 3.5rem; + --fds-spacing-18: 4.5rem; + --fds-spacing-22: 5.5rem; + --fds-spacing-26: 6.5rem; + --fds-spacing-30: 7.5rem; --fds-base_spacing: 4; - --fds-sizing-0: calc(0); - --fds-sizing-1: calc(var(--fds-base_sizing)); - --fds-sizing-2: calc(8); - --fds-sizing-3: calc(12); - --fds-sizing-4: calc(16); - --fds-sizing-5: calc(20); - --fds-sizing-6: calc(2var(--fds-base_sizing)); - --fds-sizing-7: calc(28); - --fds-sizing-8: calc(32); - --fds-sizing-9: calc(36); - --fds-sizing-10: calc(var(--fds-base_sizing)0); - --fds-sizing-11: calc(var(--fds-base_sizing)4); - --fds-sizing-12: calc(var(--fds-base_sizing)8); - --fds-sizing-13: calc(52); - --fds-sizing-14: calc(56); - --fds-sizing-18: calc(72); - --fds-sizing-22: calc(88); - --fds-sizing-26: calc(10var(--fds-base_sizing)); - --fds-sizing-30: calc(120); + --fds-sizing-0: 0rem; + --fds-sizing-1: 0.25rem; + --fds-sizing-2: 0.5rem; + --fds-sizing-3: 0.75rem; + --fds-sizing-4: 1rem; + --fds-sizing-5: 1.25rem; + --fds-sizing-6: 1.5rem; + --fds-sizing-7: 1.75rem; + --fds-sizing-8: 2rem; + --fds-sizing-9: 2.25rem; + --fds-sizing-10: 2.5rem; + --fds-sizing-11: 2.75rem; + --fds-sizing-12: 3rem; + --fds-sizing-13: 3.25rem; + --fds-sizing-14: 3.5rem; + --fds-sizing-18: 4.5rem; + --fds-sizing-22: 5.5rem; + --fds-sizing-26: 6.5rem; + --fds-sizing-30: 7.5rem; --fds-base_sizing: 4; --fds-border_width-default: 1px; --fds-border_width-active: 2px; diff --git a/packages/theme/brand/brreg/tokens.css b/packages/theme/brand/brreg/tokens.css index 5a91065b1f..93e623d889 100644 --- a/packages/theme/brand/brreg/tokens.css +++ b/packages/theme/brand/brreg/tokens.css @@ -265,45 +265,45 @@ --fds-border_radius-xxxlarge: 24px; --fds-border_radius-xxxxlarge: 32px; --fds-border_radius-full: 9999px; - --fds-spacing-0: calc(0); - --fds-spacing-1: calc(var(--fds-base_sizing)); - --fds-spacing-2: calc(8); - --fds-spacing-3: calc(12); - --fds-spacing-4: calc(16); - --fds-spacing-5: calc(20); - --fds-spacing-6: calc(2var(--fds-base_sizing)); - --fds-spacing-7: calc(28); - --fds-spacing-8: calc(32); - --fds-spacing-9: calc(36); - --fds-spacing-10: calc(var(--fds-base_sizing)0); - --fds-spacing-11: calc(var(--fds-base_sizing)4); - --fds-spacing-12: calc(var(--fds-base_sizing)8); - --fds-spacing-13: calc(52); - --fds-spacing-14: calc(56); - --fds-spacing-18: calc(72); - --fds-spacing-22: calc(88); - --fds-spacing-26: calc(10var(--fds-base_sizing)); - --fds-spacing-30: calc(120); + --fds-spacing-0: 0rem; + --fds-spacing-1: 0.25rem; + --fds-spacing-2: 0.5rem; + --fds-spacing-3: 0.75rem; + --fds-spacing-4: 1rem; + --fds-spacing-5: 1.25rem; + --fds-spacing-6: 1.5rem; + --fds-spacing-7: 1.75rem; + --fds-spacing-8: 2rem; + --fds-spacing-9: 2.25rem; + --fds-spacing-10: 2.5rem; + --fds-spacing-11: 2.75rem; + --fds-spacing-12: 3rem; + --fds-spacing-13: 3.25rem; + --fds-spacing-14: 3.5rem; + --fds-spacing-18: 4.5rem; + --fds-spacing-22: 5.5rem; + --fds-spacing-26: 6.5rem; + --fds-spacing-30: 7.5rem; --fds-base_spacing: 4; - --fds-sizing-0: calc(0); - --fds-sizing-1: calc(var(--fds-base_sizing)); - --fds-sizing-2: calc(8); - --fds-sizing-3: calc(12); - --fds-sizing-4: calc(16); - --fds-sizing-5: calc(20); - --fds-sizing-6: calc(2var(--fds-base_sizing)); - --fds-sizing-7: calc(28); - --fds-sizing-8: calc(32); - --fds-sizing-9: calc(36); - --fds-sizing-10: calc(var(--fds-base_sizing)0); - --fds-sizing-11: calc(var(--fds-base_sizing)4); - --fds-sizing-12: calc(var(--fds-base_sizing)8); - --fds-sizing-13: calc(52); - --fds-sizing-14: calc(56); - --fds-sizing-18: calc(72); - --fds-sizing-22: calc(88); - --fds-sizing-26: calc(10var(--fds-base_sizing)); - --fds-sizing-30: calc(120); + --fds-sizing-0: 0rem; + --fds-sizing-1: 0.25rem; + --fds-sizing-2: 0.5rem; + --fds-sizing-3: 0.75rem; + --fds-sizing-4: 1rem; + --fds-sizing-5: 1.25rem; + --fds-sizing-6: 1.5rem; + --fds-sizing-7: 1.75rem; + --fds-sizing-8: 2rem; + --fds-sizing-9: 2.25rem; + --fds-sizing-10: 2.5rem; + --fds-sizing-11: 2.75rem; + --fds-sizing-12: 3rem; + --fds-sizing-13: 3.25rem; + --fds-sizing-14: 3.5rem; + --fds-sizing-18: 4.5rem; + --fds-sizing-22: 5.5rem; + --fds-sizing-26: 6.5rem; + --fds-sizing-30: 7.5rem; --fds-base_sizing: 4; --fds-border_width-default: 1px; --fds-border_width-active: 2px; diff --git a/packages/theme/brand/digdir/tokens.css b/packages/theme/brand/digdir/tokens.css index 14c757fd83..1c35b8e726 100644 --- a/packages/theme/brand/digdir/tokens.css +++ b/packages/theme/brand/digdir/tokens.css @@ -259,45 +259,45 @@ --fds-border_radius-xxxlarge: 24px; --fds-border_radius-xxxxlarge: 32px; --fds-border_radius-full: 9999px; - --fds-spacing-0: calc(0); - --fds-spacing-1: calc(var(--fds-base_sizing)); - --fds-spacing-2: calc(8); - --fds-spacing-3: calc(12); - --fds-spacing-4: calc(16); - --fds-spacing-5: calc(20); - --fds-spacing-6: calc(2var(--fds-base_sizing)); - --fds-spacing-7: calc(28); - --fds-spacing-8: calc(32); - --fds-spacing-9: calc(36); - --fds-spacing-10: calc(var(--fds-base_sizing)0); - --fds-spacing-11: calc(var(--fds-base_sizing)4); - --fds-spacing-12: calc(var(--fds-base_sizing)8); - --fds-spacing-13: calc(52); - --fds-spacing-14: calc(56); - --fds-spacing-18: calc(72); - --fds-spacing-22: calc(88); - --fds-spacing-26: calc(10var(--fds-base_sizing)); - --fds-spacing-30: calc(120); + --fds-spacing-0: 0rem; + --fds-spacing-1: 0.25rem; + --fds-spacing-2: 0.5rem; + --fds-spacing-3: 0.75rem; + --fds-spacing-4: 1rem; + --fds-spacing-5: 1.25rem; + --fds-spacing-6: 1.5rem; + --fds-spacing-7: 1.75rem; + --fds-spacing-8: 2rem; + --fds-spacing-9: 2.25rem; + --fds-spacing-10: 2.5rem; + --fds-spacing-11: 2.75rem; + --fds-spacing-12: 3rem; + --fds-spacing-13: 3.25rem; + --fds-spacing-14: 3.5rem; + --fds-spacing-18: 4.5rem; + --fds-spacing-22: 5.5rem; + --fds-spacing-26: 6.5rem; + --fds-spacing-30: 7.5rem; --fds-base_spacing: 4; - --fds-sizing-0: calc(0); - --fds-sizing-1: calc(var(--fds-base_sizing)); - --fds-sizing-2: calc(8); - --fds-sizing-3: calc(12); - --fds-sizing-4: calc(16); - --fds-sizing-5: calc(20); - --fds-sizing-6: calc(2var(--fds-base_sizing)); - --fds-sizing-7: calc(28); - --fds-sizing-8: calc(32); - --fds-sizing-9: calc(36); - --fds-sizing-10: calc(var(--fds-base_sizing)0); - --fds-sizing-11: calc(var(--fds-base_sizing)4); - --fds-sizing-12: calc(var(--fds-base_sizing)8); - --fds-sizing-13: calc(52); - --fds-sizing-14: calc(56); - --fds-sizing-18: calc(72); - --fds-sizing-22: calc(88); - --fds-sizing-26: calc(10var(--fds-base_sizing)); - --fds-sizing-30: calc(120); + --fds-sizing-0: 0rem; + --fds-sizing-1: 0.25rem; + --fds-sizing-2: 0.5rem; + --fds-sizing-3: 0.75rem; + --fds-sizing-4: 1rem; + --fds-sizing-5: 1.25rem; + --fds-sizing-6: 1.5rem; + --fds-sizing-7: 1.75rem; + --fds-sizing-8: 2rem; + --fds-sizing-9: 2.25rem; + --fds-sizing-10: 2.5rem; + --fds-sizing-11: 2.75rem; + --fds-sizing-12: 3rem; + --fds-sizing-13: 3.25rem; + --fds-sizing-14: 3.5rem; + --fds-sizing-18: 4.5rem; + --fds-sizing-22: 5.5rem; + --fds-sizing-26: 6.5rem; + --fds-sizing-30: 7.5rem; --fds-base_sizing: 4; --fds-border_width-default: 1px; --fds-border_width-active: 2px; diff --git a/packages/theme/brand/tilsynet/tokens.css b/packages/theme/brand/tilsynet/tokens.css index 24d3fa7202..5654b70210 100644 --- a/packages/theme/brand/tilsynet/tokens.css +++ b/packages/theme/brand/tilsynet/tokens.css @@ -259,45 +259,45 @@ --fds-border_radius-xxxlarge: 24px; --fds-border_radius-xxxxlarge: 32px; --fds-border_radius-full: 9999px; - --fds-spacing-0: calc(0); - --fds-spacing-1: calc(var(--fds-base_sizing)); - --fds-spacing-2: calc(8); - --fds-spacing-3: calc(12); - --fds-spacing-4: calc(16); - --fds-spacing-5: calc(20); - --fds-spacing-6: calc(2var(--fds-base_sizing)); - --fds-spacing-7: calc(28); - --fds-spacing-8: calc(32); - --fds-spacing-9: calc(36); - --fds-spacing-10: calc(var(--fds-base_sizing)0); - --fds-spacing-11: calc(var(--fds-base_sizing)4); - --fds-spacing-12: calc(var(--fds-base_sizing)8); - --fds-spacing-13: calc(52); - --fds-spacing-14: calc(56); - --fds-spacing-18: calc(72); - --fds-spacing-22: calc(88); - --fds-spacing-26: calc(10var(--fds-base_sizing)); - --fds-spacing-30: calc(120); + --fds-spacing-0: 0rem; + --fds-spacing-1: 0.25rem; + --fds-spacing-2: 0.5rem; + --fds-spacing-3: 0.75rem; + --fds-spacing-4: 1rem; + --fds-spacing-5: 1.25rem; + --fds-spacing-6: 1.5rem; + --fds-spacing-7: 1.75rem; + --fds-spacing-8: 2rem; + --fds-spacing-9: 2.25rem; + --fds-spacing-10: 2.5rem; + --fds-spacing-11: 2.75rem; + --fds-spacing-12: 3rem; + --fds-spacing-13: 3.25rem; + --fds-spacing-14: 3.5rem; + --fds-spacing-18: 4.5rem; + --fds-spacing-22: 5.5rem; + --fds-spacing-26: 6.5rem; + --fds-spacing-30: 7.5rem; --fds-base_spacing: 4; - --fds-sizing-0: calc(0); - --fds-sizing-1: calc(var(--fds-base_sizing)); - --fds-sizing-2: calc(8); - --fds-sizing-3: calc(12); - --fds-sizing-4: calc(16); - --fds-sizing-5: calc(20); - --fds-sizing-6: calc(2var(--fds-base_sizing)); - --fds-sizing-7: calc(28); - --fds-sizing-8: calc(32); - --fds-sizing-9: calc(36); - --fds-sizing-10: calc(var(--fds-base_sizing)0); - --fds-sizing-11: calc(var(--fds-base_sizing)4); - --fds-sizing-12: calc(var(--fds-base_sizing)8); - --fds-sizing-13: calc(52); - --fds-sizing-14: calc(56); - --fds-sizing-18: calc(72); - --fds-sizing-22: calc(88); - --fds-sizing-26: calc(10var(--fds-base_sizing)); - --fds-sizing-30: calc(120); + --fds-sizing-0: 0rem; + --fds-sizing-1: 0.25rem; + --fds-sizing-2: 0.5rem; + --fds-sizing-3: 0.75rem; + --fds-sizing-4: 1rem; + --fds-sizing-5: 1.25rem; + --fds-sizing-6: 1.5rem; + --fds-sizing-7: 1.75rem; + --fds-sizing-8: 2rem; + --fds-sizing-9: 2.25rem; + --fds-sizing-10: 2.5rem; + --fds-sizing-11: 2.75rem; + --fds-sizing-12: 3rem; + --fds-sizing-13: 3.25rem; + --fds-sizing-14: 3.5rem; + --fds-sizing-18: 4.5rem; + --fds-sizing-22: 5.5rem; + --fds-sizing-26: 6.5rem; + --fds-sizing-30: 7.5rem; --fds-base_sizing: 4; --fds-border_width-default: 1px; --fds-border_width-active: 2px; diff --git a/packages/theme/scripts/build.ts b/packages/theme/scripts/build.ts index 9adee23009..d07531614a 100644 --- a/packages/theme/scripts/build.ts +++ b/packages/theme/scripts/build.ts @@ -17,6 +17,7 @@ import { fluidFontSize, calc, fontScaleHackFormat, + sizeRem, } from './transformers'; import { scopedReferenceVariables, @@ -46,6 +47,7 @@ const packageTokensPath = 'brand'; setupFormatters('./../../prettier.config.js'); StyleDictionary.registerTransform(sizePx); +StyleDictionary.registerTransform(sizeRem); StyleDictionary.registerTransform(nameKebab); StyleDictionary.registerTransform(nameKebabUnderscore); StyleDictionary.registerTransform(typographyShorthand); @@ -61,14 +63,14 @@ StyleDictionary.registerFileHeader(fileheader); StyleDictionary.registerTransformGroup({ name: 'fds/css', transforms: [ - nameKebab.name, 'ts/resolveMath', - fluidFontSize.name, - calc.name, + nameKebab.name, + // fluidFontSize.name, + // calc.name, typographyShorthand.name, 'ts/size/lineheight', + sizeRem.name, 'ts/shadow/css/shorthand', - sizePx.name, 'ts/color/modifiers', 'ts/color/css/hexrgba', ], @@ -121,7 +123,7 @@ const getTokensPackageConfig = (brand: Brands, targetFolder = ''): Config => { fileHeader: fileheader.name, referencesFilter: (token: TransformedToken) => !(token.path[0] === 'viewport') && - ['spacing', 'sizing', 'color'].includes(token.type as string), + ['color'].includes(token.type as string), // outputReferences: true, }, }, diff --git a/packages/theme/scripts/transformers.ts b/packages/theme/scripts/transformers.ts index e7392a39d9..8bda35e4bb 100644 --- a/packages/theme/scripts/transformers.ts +++ b/packages/theme/scripts/transformers.ts @@ -19,6 +19,25 @@ export const sizePx: Named = { transformer: (token) => transformDimension(token.value as number), }; +export const sizeRem: Named = { + name: 'fds/size/toRem', + type: 'value', + transitive: true, + matcher: (token) => + ['sizing', 'spacing'].includes(token.type as string) && + !token.name.includes('base'), + transformer: (token, options) => { + const baseFont = options.basePxFontSize || 16; + const value = token.value as number; + + if (value === 0) { + return '0'; + } + + return `${value / baseFont}rem`; + }, +}; + export const nameKebab: Named = { name: 'name/cti/hierarchical-kebab', type: 'name',