@utrecht/design-tokens 5.0.1 → 5.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/_mixin-theme.scss +21 -15
  3. package/dist/_mixin.scss +21 -15
  4. package/dist/_variables.scss +21 -15
  5. package/dist/dark/_mixin-theme.scss +21 -15
  6. package/dist/dark/_mixin.scss +21 -15
  7. package/dist/dark/_variables.scss +21 -15
  8. package/dist/dark/index.cjs +19 -13
  9. package/dist/dark/index.css +21 -15
  10. package/dist/dark/index.d.ts +10 -4
  11. package/dist/dark/index.flat.json +18 -12
  12. package/dist/dark/index.json +148 -36
  13. package/dist/dark/index.mjs +19 -13
  14. package/dist/dark/index.tokens.json +24 -16
  15. package/dist/dark/list.json +148 -36
  16. package/dist/dark/list.mjs +148 -36
  17. package/dist/dark/property.css +1 -0
  18. package/dist/dark/root.css +20 -14
  19. package/dist/dark/theme-prince-xml.css +21 -15
  20. package/dist/dark/theme.css +20 -14
  21. package/dist/dark/tokens.cjs +158 -44
  22. package/dist/dark/tokens.d.ts +12 -4
  23. package/dist/dark/tokens.json +160 -46
  24. package/dist/dark/variables.cjs +19 -13
  25. package/dist/dark/variables.css +20 -14
  26. package/dist/dark/variables.d.ts +10 -4
  27. package/dist/dark/variables.json +18 -12
  28. package/dist/dark/variables.less +21 -15
  29. package/dist/dark/variables.mjs +19 -13
  30. package/dist/index.cjs +19 -13
  31. package/dist/index.css +42 -30
  32. package/dist/index.d.ts +10 -4
  33. package/dist/index.flat.json +18 -12
  34. package/dist/index.json +148 -36
  35. package/dist/index.mjs +19 -13
  36. package/dist/index.tokens.json +24 -16
  37. package/dist/list.json +148 -36
  38. package/dist/list.mjs +148 -36
  39. package/dist/property.css +1 -0
  40. package/dist/root.css +20 -14
  41. package/dist/theme-prince-xml.css +21 -15
  42. package/dist/theme.css +20 -14
  43. package/dist/tokens.cjs +158 -44
  44. package/dist/tokens.d.ts +12 -4
  45. package/dist/tokens.json +160 -46
  46. package/dist/variables.cjs +19 -13
  47. package/dist/variables.css +20 -14
  48. package/dist/variables.d.ts +10 -4
  49. package/dist/variables.json +18 -12
  50. package/dist/variables.less +21 -15
  51. package/dist/variables.mjs +19 -13
  52. package/package.json +6 -6
  53. package/src/brand/utrecht/typography.tokens.json +17 -12
  54. package/src/component/nl/heading.tokens.json +8 -8
  55. package/src/component/utrecht/root.tokens.json +2 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @utrecht/design-tokens
2
2
 
3
+ ## 5.0.3
4
+
5
+ ### Patch Changes
6
+
7
+ - e89c1d2: Use `font-size-adjust: 0.54` for Root.
8
+
9
+ ## 5.0.2
10
+
11
+ ### Patch Changes
12
+
13
+ - 157d561: Corrected the typography token values and the heading token values to make the headings visually distinctive.
14
+
3
15
  ## 5.0.1
4
16
 
5
17
  ### Patch Changes
package/dist/_mixin-theme.scss CHANGED
@@ -24,18 +24,23 @@
24
24
  --utrecht-border-radius-sm: 2px;
25
25
  --utrecht-border-width-md: 2px;
26
26
  --utrecht-border-width-sm: 1px;
27
- --utrecht-typography-line-height-lg: 2;
27
+ --utrecht-typography-line-height-4xl: 1.1;
28
+ --utrecht-typography-line-height-3xl: 1.25;
29
+ --utrecht-typography-line-height-2xl: 1.25;
30
+ --utrecht-typography-line-height-xl: 1.25;
31
+ --utrecht-typography-line-height-lg: 1.25;
28
32
  --utrecht-typography-line-height-md: 1.5;
29
- --utrecht-typography-line-height-sm: 1.25;
30
- --utrecht-typography-line-height-xs: 1;
33
+ --utrecht-typography-line-height-sm: 1.5;
34
+ --utrecht-typography-line-height-xs: 1.5;
31
35
  --utrecht-typography-font-style-inherit: inherit;
32
36
  --utrecht-typography-font-style-normal: normal;
37
+ --utrecht-typography-weight-scale-bold-font-weight: 700;
33
38
  --utrecht-typography-weight-scale-semibold-font-weight: 600;
39
+ --utrecht-typography-weight-scale-medium-font-weight: 500;
34
40
  --utrecht-typography-weight-scale-normal-font-weight: 400;
35
- --utrecht-typography-weight-scale-bold-font-weight: 700;
36
- --utrecht-typography-scale-4xl-font-size: 2rem; /* 32px */
37
- --utrecht-typography-scale-3xl-font-size: 1.5rem; /* 24px */
38
- --utrecht-typography-scale-2xl-font-size: 1.375rem; /* 22px */
41
+ --utrecht-typography-scale-4xl-font-size: 2.5rem; /* 40px */
42
+ --utrecht-typography-scale-3xl-font-size: 2rem; /* 32px */
43
+ --utrecht-typography-scale-2xl-font-size: 1.5rem; /* 24px */
39
44
  --utrecht-typography-scale-xl-font-size: 1.25rem; /* 20px */
40
45
  --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
41
46
  --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
@@ -130,6 +135,7 @@
130
135
  --utrecht-search-bar-input-background-position-x: .5em;
131
136
  --utrecht-search-bar-button-hover-scale: 1;
132
137
  --utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
138
+ --utrecht-root-font-size-adjust: 0.54;
133
139
  --utrecht-rich-text-confidant-margin-block-end: 0;
134
140
  --utrecht-radio-button-border-radius: 0;
135
141
  --utrecht-radio-button-invalid-border-width: 2px;
@@ -457,29 +463,29 @@
457
463
  --nl-number-badge-background-color: var(--utrecht-color-red-40);
458
464
  --nl-mark-color: var(--utrecht-color-black);
459
465
  --nl-mark-background-color: var(--utrecht-color-yellow-60);
460
- --nl-heading-level-6-line-height: var(--utrecht-typography-line-height-md);
466
+ --nl-heading-level-6-line-height: var(--utrecht-typography-line-height-sm);
461
467
  --nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
462
468
  --nl-heading-level-6-font-size: var(--utrecht-typography-scale-sm-font-size);
463
469
  --nl-heading-level-6-font-family: var(--utrecht-typography-sans-serif-font-family);
464
470
  --nl-heading-level-5-line-height: var(--utrecht-typography-line-height-md);
465
471
  --nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
466
- --nl-heading-level-5-font-size: var(--utrecht-typography-scale-sm-font-size);
472
+ --nl-heading-level-5-font-size: var(--utrecht-typography-scale-md-font-size);
467
473
  --nl-heading-level-5-font-family: var(--utrecht-typography-sans-serif-font-family);
468
- --nl-heading-level-4-line-height: var(--utrecht-typography-line-height-md);
474
+ --nl-heading-level-4-line-height: var(--utrecht-typography-line-height-lg);
469
475
  --nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
470
476
  --nl-heading-level-4-font-size: var(--utrecht-typography-scale-lg-font-size);
471
477
  --nl-heading-level-4-font-family: var(--utrecht-typography-sans-serif-font-family);
472
- --nl-heading-level-3-line-height: var(--utrecht-typography-line-height-sm);
478
+ --nl-heading-level-3-line-height: var(--utrecht-typography-line-height-xl);
473
479
  --nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
474
480
  --nl-heading-level-3-font-size: var(--utrecht-typography-scale-xl-font-size);
475
481
  --nl-heading-level-3-font-family: var(--utrecht-typography-sans-serif-font-family);
476
- --nl-heading-level-2-line-height: var(--utrecht-typography-line-height-sm);
482
+ --nl-heading-level-2-line-height: var(--utrecht-typography-line-height-2xl);
477
483
  --nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
478
- --nl-heading-level-2-font-size: var(--utrecht-typography-scale-xl-font-size);
484
+ --nl-heading-level-2-font-size: var(--utrecht-typography-scale-2xl-font-size);
479
485
  --nl-heading-level-2-font-family: var(--utrecht-typography-sans-serif-font-family);
480
- --nl-heading-level-1-line-height: var(--utrecht-typography-line-height-sm);
486
+ --nl-heading-level-1-line-height: var(--utrecht-typography-line-height-3xl);
481
487
  --nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
482
- --nl-heading-level-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
488
+ --nl-heading-level-1-font-size: var(--utrecht-typography-scale-3xl-font-size);
483
489
  --nl-heading-level-1-font-family: var(--utrecht-typography-sans-serif-font-family);
484
490
  --nl-data-badge-padding-inline: var(--utrecht-space-inline-sm);
485
491
  --nl-data-badge-padding-block: var(--utrecht-space-block-xs);
package/dist/_mixin.scss CHANGED
@@ -24,18 +24,23 @@
24
24
  --utrecht-border-radius-sm: 2px;
25
25
  --utrecht-border-width-md: 2px;
26
26
  --utrecht-border-width-sm: 1px;
27
- --utrecht-typography-line-height-lg: 2;
27
+ --utrecht-typography-line-height-4xl: 1.1;
28
+ --utrecht-typography-line-height-3xl: 1.25;
29
+ --utrecht-typography-line-height-2xl: 1.25;
30
+ --utrecht-typography-line-height-xl: 1.25;
31
+ --utrecht-typography-line-height-lg: 1.25;
28
32
  --utrecht-typography-line-height-md: 1.5;
29
- --utrecht-typography-line-height-sm: 1.25;
30
- --utrecht-typography-line-height-xs: 1;
33
+ --utrecht-typography-line-height-sm: 1.5;
34
+ --utrecht-typography-line-height-xs: 1.5;
31
35
  --utrecht-typography-font-style-inherit: inherit;
32
36
  --utrecht-typography-font-style-normal: normal;
37
+ --utrecht-typography-weight-scale-bold-font-weight: 700;
33
38
  --utrecht-typography-weight-scale-semibold-font-weight: 600;
39
+ --utrecht-typography-weight-scale-medium-font-weight: 500;
34
40
  --utrecht-typography-weight-scale-normal-font-weight: 400;
35
- --utrecht-typography-weight-scale-bold-font-weight: 700;
36
- --utrecht-typography-scale-4xl-font-size: 2rem; /* 32px */
37
- --utrecht-typography-scale-3xl-font-size: 1.5rem; /* 24px */
38
- --utrecht-typography-scale-2xl-font-size: 1.375rem; /* 22px */
41
+ --utrecht-typography-scale-4xl-font-size: 2.5rem; /* 40px */
42
+ --utrecht-typography-scale-3xl-font-size: 2rem; /* 32px */
43
+ --utrecht-typography-scale-2xl-font-size: 1.5rem; /* 24px */
39
44
  --utrecht-typography-scale-xl-font-size: 1.25rem; /* 20px */
40
45
  --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
41
46
  --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
@@ -130,6 +135,7 @@
130
135
  --utrecht-search-bar-input-background-position-x: .5em;
131
136
  --utrecht-search-bar-button-hover-scale: 1;
132
137
  --utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
138
+ --utrecht-root-font-size-adjust: 0.54;
133
139
  --utrecht-rich-text-confidant-margin-block-end: 0;
134
140
  --utrecht-radio-button-border-radius: 0;
135
141
  --utrecht-radio-button-invalid-border-width: 2px;
@@ -457,29 +463,29 @@
457
463
  --nl-number-badge-background-color: var(--utrecht-color-red-40);
458
464
  --nl-mark-color: var(--utrecht-color-black);
459
465
  --nl-mark-background-color: var(--utrecht-color-yellow-60);
460
- --nl-heading-level-6-line-height: var(--utrecht-typography-line-height-md);
466
+ --nl-heading-level-6-line-height: var(--utrecht-typography-line-height-sm);
461
467
  --nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
462
468
  --nl-heading-level-6-font-size: var(--utrecht-typography-scale-sm-font-size);
463
469
  --nl-heading-level-6-font-family: var(--utrecht-typography-sans-serif-font-family);
464
470
  --nl-heading-level-5-line-height: var(--utrecht-typography-line-height-md);
465
471
  --nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
466
- --nl-heading-level-5-font-size: var(--utrecht-typography-scale-sm-font-size);
472
+ --nl-heading-level-5-font-size: var(--utrecht-typography-scale-md-font-size);
467
473
  --nl-heading-level-5-font-family: var(--utrecht-typography-sans-serif-font-family);
468
- --nl-heading-level-4-line-height: var(--utrecht-typography-line-height-md);
474
+ --nl-heading-level-4-line-height: var(--utrecht-typography-line-height-lg);
469
475
  --nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
470
476
  --nl-heading-level-4-font-size: var(--utrecht-typography-scale-lg-font-size);
471
477
  --nl-heading-level-4-font-family: var(--utrecht-typography-sans-serif-font-family);
472
- --nl-heading-level-3-line-height: var(--utrecht-typography-line-height-sm);
478
+ --nl-heading-level-3-line-height: var(--utrecht-typography-line-height-xl);
473
479
  --nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
474
480
  --nl-heading-level-3-font-size: var(--utrecht-typography-scale-xl-font-size);
475
481
  --nl-heading-level-3-font-family: var(--utrecht-typography-sans-serif-font-family);
476
- --nl-heading-level-2-line-height: var(--utrecht-typography-line-height-sm);
482
+ --nl-heading-level-2-line-height: var(--utrecht-typography-line-height-2xl);
477
483
  --nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
478
- --nl-heading-level-2-font-size: var(--utrecht-typography-scale-xl-font-size);
484
+ --nl-heading-level-2-font-size: var(--utrecht-typography-scale-2xl-font-size);
479
485
  --nl-heading-level-2-font-family: var(--utrecht-typography-sans-serif-font-family);
480
- --nl-heading-level-1-line-height: var(--utrecht-typography-line-height-sm);
486
+ --nl-heading-level-1-line-height: var(--utrecht-typography-line-height-3xl);
481
487
  --nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
482
- --nl-heading-level-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
488
+ --nl-heading-level-1-font-size: var(--utrecht-typography-scale-3xl-font-size);
483
489
  --nl-heading-level-1-font-family: var(--utrecht-typography-sans-serif-font-family);
484
490
  --nl-data-badge-padding-inline: var(--utrecht-space-inline-sm);
485
491
  --nl-data-badge-padding-block: var(--utrecht-space-block-xs);
package/dist/_variables.scss CHANGED
@@ -22,18 +22,23 @@ $utrecht-border-radius-md: 4px;
22
22
  $utrecht-border-radius-sm: 2px;
23
23
  $utrecht-border-width-md: 2px;
24
24
  $utrecht-border-width-sm: 1px;
25
- $utrecht-typography-line-height-lg: 2;
25
+ $utrecht-typography-line-height-4xl: 1.1;
26
+ $utrecht-typography-line-height-3xl: 1.25;
27
+ $utrecht-typography-line-height-2xl: 1.25;
28
+ $utrecht-typography-line-height-xl: 1.25;
29
+ $utrecht-typography-line-height-lg: 1.25;
26
30
  $utrecht-typography-line-height-md: 1.5;
27
- $utrecht-typography-line-height-sm: 1.25;
28
- $utrecht-typography-line-height-xs: 1;
31
+ $utrecht-typography-line-height-sm: 1.5;
32
+ $utrecht-typography-line-height-xs: 1.5;
29
33
  $utrecht-typography-font-style-inherit: inherit;
30
34
  $utrecht-typography-font-style-normal: normal;
35
+ $utrecht-typography-weight-scale-bold-font-weight: 700;
31
36
  $utrecht-typography-weight-scale-semibold-font-weight: 600;
37
+ $utrecht-typography-weight-scale-medium-font-weight: 500;
32
38
  $utrecht-typography-weight-scale-normal-font-weight: 400;
33
- $utrecht-typography-weight-scale-bold-font-weight: 700;
34
- $utrecht-typography-scale-4xl-font-size: 2rem; // 32px
35
- $utrecht-typography-scale-3xl-font-size: 1.5rem; // 24px
36
- $utrecht-typography-scale-2xl-font-size: 1.375rem; // 22px
39
+ $utrecht-typography-scale-4xl-font-size: 2.5rem; // 40px
40
+ $utrecht-typography-scale-3xl-font-size: 2rem; // 32px
41
+ $utrecht-typography-scale-2xl-font-size: 1.5rem; // 24px
37
42
  $utrecht-typography-scale-xl-font-size: 1.25rem; // 20px
38
43
  $utrecht-typography-scale-lg-font-size: 1.125rem; // 18px
39
44
  $utrecht-typography-scale-md-font-size: 1rem; // 16px
@@ -128,6 +133,7 @@ $utrecht-search-bar-input-background-position-y: 50%;
128
133
  $utrecht-search-bar-input-background-position-x: .5em;
129
134
  $utrecht-search-bar-button-hover-scale: 1;
130
135
  $utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
136
+ $utrecht-root-font-size-adjust: 0.54;
131
137
  $utrecht-rich-text-confidant-margin-block-end: 0;
132
138
  $utrecht-radio-button-border-radius: 0;
133
139
  $utrecht-radio-button-invalid-border-width: 2px;
@@ -455,29 +461,29 @@ $nl-number-badge-color: $utrecht-color-white;
455
461
  $nl-number-badge-background-color: $utrecht-color-red-40;
456
462
  $nl-mark-color: $utrecht-color-black;
457
463
  $nl-mark-background-color: $utrecht-color-yellow-60;
458
- $nl-heading-level-6-line-height: $utrecht-typography-line-height-md;
464
+ $nl-heading-level-6-line-height: $utrecht-typography-line-height-sm;
459
465
  $nl-heading-level-6-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
460
466
  $nl-heading-level-6-font-size: $utrecht-typography-scale-sm-font-size;
461
467
  $nl-heading-level-6-font-family: $utrecht-typography-sans-serif-font-family;
462
468
  $nl-heading-level-5-line-height: $utrecht-typography-line-height-md;
463
469
  $nl-heading-level-5-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
464
- $nl-heading-level-5-font-size: $utrecht-typography-scale-sm-font-size;
470
+ $nl-heading-level-5-font-size: $utrecht-typography-scale-md-font-size;
465
471
  $nl-heading-level-5-font-family: $utrecht-typography-sans-serif-font-family;
466
- $nl-heading-level-4-line-height: $utrecht-typography-line-height-md;
472
+ $nl-heading-level-4-line-height: $utrecht-typography-line-height-lg;
467
473
  $nl-heading-level-4-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
468
474
  $nl-heading-level-4-font-size: $utrecht-typography-scale-lg-font-size;
469
475
  $nl-heading-level-4-font-family: $utrecht-typography-sans-serif-font-family;
470
- $nl-heading-level-3-line-height: $utrecht-typography-line-height-sm;
476
+ $nl-heading-level-3-line-height: $utrecht-typography-line-height-xl;
471
477
  $nl-heading-level-3-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
472
478
  $nl-heading-level-3-font-size: $utrecht-typography-scale-xl-font-size;
473
479
  $nl-heading-level-3-font-family: $utrecht-typography-sans-serif-font-family;
474
- $nl-heading-level-2-line-height: $utrecht-typography-line-height-sm;
480
+ $nl-heading-level-2-line-height: $utrecht-typography-line-height-2xl;
475
481
  $nl-heading-level-2-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
476
- $nl-heading-level-2-font-size: $utrecht-typography-scale-xl-font-size;
482
+ $nl-heading-level-2-font-size: $utrecht-typography-scale-2xl-font-size;
477
483
  $nl-heading-level-2-font-family: $utrecht-typography-sans-serif-font-family;
478
- $nl-heading-level-1-line-height: $utrecht-typography-line-height-sm;
484
+ $nl-heading-level-1-line-height: $utrecht-typography-line-height-3xl;
479
485
  $nl-heading-level-1-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
480
- $nl-heading-level-1-font-size: $utrecht-typography-scale-4xl-font-size;
486
+ $nl-heading-level-1-font-size: $utrecht-typography-scale-3xl-font-size;
481
487
  $nl-heading-level-1-font-family: $utrecht-typography-sans-serif-font-family;
482
488
  $nl-data-badge-padding-inline: $utrecht-space-inline-sm;
483
489
  $nl-data-badge-padding-block: $utrecht-space-block-xs;
package/dist/dark/_mixin-theme.scss CHANGED
@@ -24,18 +24,23 @@
24
24
  --utrecht-border-radius-sm: 2px;
25
25
  --utrecht-border-width-md: 2px;
26
26
  --utrecht-border-width-sm: 1px;
27
- --utrecht-typography-line-height-lg: 2;
27
+ --utrecht-typography-line-height-4xl: 1.1;
28
+ --utrecht-typography-line-height-3xl: 1.25;
29
+ --utrecht-typography-line-height-2xl: 1.25;
30
+ --utrecht-typography-line-height-xl: 1.25;
31
+ --utrecht-typography-line-height-lg: 1.25;
28
32
  --utrecht-typography-line-height-md: 1.5;
29
- --utrecht-typography-line-height-sm: 1.25;
30
- --utrecht-typography-line-height-xs: 1;
33
+ --utrecht-typography-line-height-sm: 1.5;
34
+ --utrecht-typography-line-height-xs: 1.5;
31
35
  --utrecht-typography-font-style-inherit: inherit;
32
36
  --utrecht-typography-font-style-normal: normal;
37
+ --utrecht-typography-weight-scale-bold-font-weight: 700;
33
38
  --utrecht-typography-weight-scale-semibold-font-weight: 600;
39
+ --utrecht-typography-weight-scale-medium-font-weight: 500;
34
40
  --utrecht-typography-weight-scale-normal-font-weight: 400;
35
- --utrecht-typography-weight-scale-bold-font-weight: 700;
36
- --utrecht-typography-scale-4xl-font-size: 2rem; /* 32px */
37
- --utrecht-typography-scale-3xl-font-size: 1.5rem; /* 24px */
38
- --utrecht-typography-scale-2xl-font-size: 1.375rem; /* 22px */
41
+ --utrecht-typography-scale-4xl-font-size: 2.5rem; /* 40px */
42
+ --utrecht-typography-scale-3xl-font-size: 2rem; /* 32px */
43
+ --utrecht-typography-scale-2xl-font-size: 1.5rem; /* 24px */
39
44
  --utrecht-typography-scale-xl-font-size: 1.25rem; /* 20px */
40
45
  --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
41
46
  --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
@@ -130,6 +135,7 @@
130
135
  --utrecht-search-bar-input-background-position-x: .5em;
131
136
  --utrecht-search-bar-button-hover-scale: 1;
132
137
  --utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
138
+ --utrecht-root-font-size-adjust: 0.54;
133
139
  --utrecht-rich-text-confidant-margin-block-end: 0;
134
140
  --utrecht-radio-button-border-radius: 0;
135
141
  --utrecht-radio-button-invalid-border-width: 2px;
@@ -459,29 +465,29 @@
459
465
  --nl-number-badge-background-color: var(--utrecht-color-red-40);
460
466
  --nl-mark-color: var(--utrecht-color-black);
461
467
  --nl-mark-background-color: var(--utrecht-color-yellow-60);
462
- --nl-heading-level-6-line-height: var(--utrecht-typography-line-height-md);
468
+ --nl-heading-level-6-line-height: var(--utrecht-typography-line-height-sm);
463
469
  --nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
464
470
  --nl-heading-level-6-font-size: var(--utrecht-typography-scale-sm-font-size);
465
471
  --nl-heading-level-6-font-family: var(--utrecht-typography-sans-serif-font-family);
466
472
  --nl-heading-level-5-line-height: var(--utrecht-typography-line-height-md);
467
473
  --nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
468
- --nl-heading-level-5-font-size: var(--utrecht-typography-scale-sm-font-size);
474
+ --nl-heading-level-5-font-size: var(--utrecht-typography-scale-md-font-size);
469
475
  --nl-heading-level-5-font-family: var(--utrecht-typography-sans-serif-font-family);
470
- --nl-heading-level-4-line-height: var(--utrecht-typography-line-height-md);
476
+ --nl-heading-level-4-line-height: var(--utrecht-typography-line-height-lg);
471
477
  --nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
472
478
  --nl-heading-level-4-font-size: var(--utrecht-typography-scale-lg-font-size);
473
479
  --nl-heading-level-4-font-family: var(--utrecht-typography-sans-serif-font-family);
474
- --nl-heading-level-3-line-height: var(--utrecht-typography-line-height-sm);
480
+ --nl-heading-level-3-line-height: var(--utrecht-typography-line-height-xl);
475
481
  --nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
476
482
  --nl-heading-level-3-font-size: var(--utrecht-typography-scale-xl-font-size);
477
483
  --nl-heading-level-3-font-family: var(--utrecht-typography-sans-serif-font-family);
478
- --nl-heading-level-2-line-height: var(--utrecht-typography-line-height-sm);
484
+ --nl-heading-level-2-line-height: var(--utrecht-typography-line-height-2xl);
479
485
  --nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
480
- --nl-heading-level-2-font-size: var(--utrecht-typography-scale-xl-font-size);
486
+ --nl-heading-level-2-font-size: var(--utrecht-typography-scale-2xl-font-size);
481
487
  --nl-heading-level-2-font-family: var(--utrecht-typography-sans-serif-font-family);
482
- --nl-heading-level-1-line-height: var(--utrecht-typography-line-height-sm);
488
+ --nl-heading-level-1-line-height: var(--utrecht-typography-line-height-3xl);
483
489
  --nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
484
- --nl-heading-level-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
490
+ --nl-heading-level-1-font-size: var(--utrecht-typography-scale-3xl-font-size);
485
491
  --nl-heading-level-1-font-family: var(--utrecht-typography-sans-serif-font-family);
486
492
  --nl-data-badge-padding-inline: var(--utrecht-space-inline-sm);
487
493
  --nl-data-badge-padding-block: var(--utrecht-space-block-xs);
package/dist/dark/_mixin.scss CHANGED
@@ -24,18 +24,23 @@
24
24
  --utrecht-border-radius-sm: 2px;
25
25
  --utrecht-border-width-md: 2px;
26
26
  --utrecht-border-width-sm: 1px;
27
- --utrecht-typography-line-height-lg: 2;
27
+ --utrecht-typography-line-height-4xl: 1.1;
28
+ --utrecht-typography-line-height-3xl: 1.25;
29
+ --utrecht-typography-line-height-2xl: 1.25;
30
+ --utrecht-typography-line-height-xl: 1.25;
31
+ --utrecht-typography-line-height-lg: 1.25;
28
32
  --utrecht-typography-line-height-md: 1.5;
29
- --utrecht-typography-line-height-sm: 1.25;
30
- --utrecht-typography-line-height-xs: 1;
33
+ --utrecht-typography-line-height-sm: 1.5;
34
+ --utrecht-typography-line-height-xs: 1.5;
31
35
  --utrecht-typography-font-style-inherit: inherit;
32
36
  --utrecht-typography-font-style-normal: normal;
37
+ --utrecht-typography-weight-scale-bold-font-weight: 700;
33
38
  --utrecht-typography-weight-scale-semibold-font-weight: 600;
39
+ --utrecht-typography-weight-scale-medium-font-weight: 500;
34
40
  --utrecht-typography-weight-scale-normal-font-weight: 400;
35
- --utrecht-typography-weight-scale-bold-font-weight: 700;
36
- --utrecht-typography-scale-4xl-font-size: 2rem; /* 32px */
37
- --utrecht-typography-scale-3xl-font-size: 1.5rem; /* 24px */
38
- --utrecht-typography-scale-2xl-font-size: 1.375rem; /* 22px */
41
+ --utrecht-typography-scale-4xl-font-size: 2.5rem; /* 40px */
42
+ --utrecht-typography-scale-3xl-font-size: 2rem; /* 32px */
43
+ --utrecht-typography-scale-2xl-font-size: 1.5rem; /* 24px */
39
44
  --utrecht-typography-scale-xl-font-size: 1.25rem; /* 20px */
40
45
  --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
41
46
  --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
@@ -130,6 +135,7 @@
130
135
  --utrecht-search-bar-input-background-position-x: .5em;
131
136
  --utrecht-search-bar-button-hover-scale: 1;
132
137
  --utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
138
+ --utrecht-root-font-size-adjust: 0.54;
133
139
  --utrecht-rich-text-confidant-margin-block-end: 0;
134
140
  --utrecht-radio-button-border-radius: 0;
135
141
  --utrecht-radio-button-invalid-border-width: 2px;
@@ -459,29 +465,29 @@
459
465
  --nl-number-badge-background-color: var(--utrecht-color-red-40);
460
466
  --nl-mark-color: var(--utrecht-color-black);
461
467
  --nl-mark-background-color: var(--utrecht-color-yellow-60);
462
- --nl-heading-level-6-line-height: var(--utrecht-typography-line-height-md);
468
+ --nl-heading-level-6-line-height: var(--utrecht-typography-line-height-sm);
463
469
  --nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
464
470
  --nl-heading-level-6-font-size: var(--utrecht-typography-scale-sm-font-size);
465
471
  --nl-heading-level-6-font-family: var(--utrecht-typography-sans-serif-font-family);
466
472
  --nl-heading-level-5-line-height: var(--utrecht-typography-line-height-md);
467
473
  --nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
468
- --nl-heading-level-5-font-size: var(--utrecht-typography-scale-sm-font-size);
474
+ --nl-heading-level-5-font-size: var(--utrecht-typography-scale-md-font-size);
469
475
  --nl-heading-level-5-font-family: var(--utrecht-typography-sans-serif-font-family);
470
- --nl-heading-level-4-line-height: var(--utrecht-typography-line-height-md);
476
+ --nl-heading-level-4-line-height: var(--utrecht-typography-line-height-lg);
471
477
  --nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
472
478
  --nl-heading-level-4-font-size: var(--utrecht-typography-scale-lg-font-size);
473
479
  --nl-heading-level-4-font-family: var(--utrecht-typography-sans-serif-font-family);
474
- --nl-heading-level-3-line-height: var(--utrecht-typography-line-height-sm);
480
+ --nl-heading-level-3-line-height: var(--utrecht-typography-line-height-xl);
475
481
  --nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
476
482
  --nl-heading-level-3-font-size: var(--utrecht-typography-scale-xl-font-size);
477
483
  --nl-heading-level-3-font-family: var(--utrecht-typography-sans-serif-font-family);
478
- --nl-heading-level-2-line-height: var(--utrecht-typography-line-height-sm);
484
+ --nl-heading-level-2-line-height: var(--utrecht-typography-line-height-2xl);
479
485
  --nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
480
- --nl-heading-level-2-font-size: var(--utrecht-typography-scale-xl-font-size);
486
+ --nl-heading-level-2-font-size: var(--utrecht-typography-scale-2xl-font-size);
481
487
  --nl-heading-level-2-font-family: var(--utrecht-typography-sans-serif-font-family);
482
- --nl-heading-level-1-line-height: var(--utrecht-typography-line-height-sm);
488
+ --nl-heading-level-1-line-height: var(--utrecht-typography-line-height-3xl);
483
489
  --nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
484
- --nl-heading-level-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
490
+ --nl-heading-level-1-font-size: var(--utrecht-typography-scale-3xl-font-size);
485
491
  --nl-heading-level-1-font-family: var(--utrecht-typography-sans-serif-font-family);
486
492
  --nl-data-badge-padding-inline: var(--utrecht-space-inline-sm);
487
493
  --nl-data-badge-padding-block: var(--utrecht-space-block-xs);
package/dist/dark/_variables.scss CHANGED
@@ -22,18 +22,23 @@ $utrecht-border-radius-md: 4px;
22
22
  $utrecht-border-radius-sm: 2px;
23
23
  $utrecht-border-width-md: 2px;
24
24
  $utrecht-border-width-sm: 1px;
25
- $utrecht-typography-line-height-lg: 2;
25
+ $utrecht-typography-line-height-4xl: 1.1;
26
+ $utrecht-typography-line-height-3xl: 1.25;
27
+ $utrecht-typography-line-height-2xl: 1.25;
28
+ $utrecht-typography-line-height-xl: 1.25;
29
+ $utrecht-typography-line-height-lg: 1.25;
26
30
  $utrecht-typography-line-height-md: 1.5;
27
- $utrecht-typography-line-height-sm: 1.25;
28
- $utrecht-typography-line-height-xs: 1;
31
+ $utrecht-typography-line-height-sm: 1.5;
32
+ $utrecht-typography-line-height-xs: 1.5;
29
33
  $utrecht-typography-font-style-inherit: inherit;
30
34
  $utrecht-typography-font-style-normal: normal;
35
+ $utrecht-typography-weight-scale-bold-font-weight: 700;
31
36
  $utrecht-typography-weight-scale-semibold-font-weight: 600;
37
+ $utrecht-typography-weight-scale-medium-font-weight: 500;
32
38
  $utrecht-typography-weight-scale-normal-font-weight: 400;
33
- $utrecht-typography-weight-scale-bold-font-weight: 700;
34
- $utrecht-typography-scale-4xl-font-size: 2rem; // 32px
35
- $utrecht-typography-scale-3xl-font-size: 1.5rem; // 24px
36
- $utrecht-typography-scale-2xl-font-size: 1.375rem; // 22px
39
+ $utrecht-typography-scale-4xl-font-size: 2.5rem; // 40px
40
+ $utrecht-typography-scale-3xl-font-size: 2rem; // 32px
41
+ $utrecht-typography-scale-2xl-font-size: 1.5rem; // 24px
37
42
  $utrecht-typography-scale-xl-font-size: 1.25rem; // 20px
38
43
  $utrecht-typography-scale-lg-font-size: 1.125rem; // 18px
39
44
  $utrecht-typography-scale-md-font-size: 1rem; // 16px
@@ -128,6 +133,7 @@ $utrecht-search-bar-input-background-position-y: 50%;
128
133
  $utrecht-search-bar-input-background-position-x: .5em;
129
134
  $utrecht-search-bar-button-hover-scale: 1;
130
135
  $utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
136
+ $utrecht-root-font-size-adjust: 0.54;
131
137
  $utrecht-rich-text-confidant-margin-block-end: 0;
132
138
  $utrecht-radio-button-border-radius: 0;
133
139
  $utrecht-radio-button-invalid-border-width: 2px;
@@ -457,29 +463,29 @@ $nl-number-badge-color: $utrecht-color-white;
457
463
  $nl-number-badge-background-color: $utrecht-color-red-40;
458
464
  $nl-mark-color: $utrecht-color-black;
459
465
  $nl-mark-background-color: $utrecht-color-yellow-60;
460
- $nl-heading-level-6-line-height: $utrecht-typography-line-height-md;
466
+ $nl-heading-level-6-line-height: $utrecht-typography-line-height-sm;
461
467
  $nl-heading-level-6-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
462
468
  $nl-heading-level-6-font-size: $utrecht-typography-scale-sm-font-size;
463
469
  $nl-heading-level-6-font-family: $utrecht-typography-sans-serif-font-family;
464
470
  $nl-heading-level-5-line-height: $utrecht-typography-line-height-md;
465
471
  $nl-heading-level-5-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
466
- $nl-heading-level-5-font-size: $utrecht-typography-scale-sm-font-size;
472
+ $nl-heading-level-5-font-size: $utrecht-typography-scale-md-font-size;
467
473
  $nl-heading-level-5-font-family: $utrecht-typography-sans-serif-font-family;
468
- $nl-heading-level-4-line-height: $utrecht-typography-line-height-md;
474
+ $nl-heading-level-4-line-height: $utrecht-typography-line-height-lg;
469
475
  $nl-heading-level-4-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
470
476
  $nl-heading-level-4-font-size: $utrecht-typography-scale-lg-font-size;
471
477
  $nl-heading-level-4-font-family: $utrecht-typography-sans-serif-font-family;
472
- $nl-heading-level-3-line-height: $utrecht-typography-line-height-sm;
478
+ $nl-heading-level-3-line-height: $utrecht-typography-line-height-xl;
473
479
  $nl-heading-level-3-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
474
480
  $nl-heading-level-3-font-size: $utrecht-typography-scale-xl-font-size;
475
481
  $nl-heading-level-3-font-family: $utrecht-typography-sans-serif-font-family;
476
- $nl-heading-level-2-line-height: $utrecht-typography-line-height-sm;
482
+ $nl-heading-level-2-line-height: $utrecht-typography-line-height-2xl;
477
483
  $nl-heading-level-2-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
478
- $nl-heading-level-2-font-size: $utrecht-typography-scale-xl-font-size;
484
+ $nl-heading-level-2-font-size: $utrecht-typography-scale-2xl-font-size;
479
485
  $nl-heading-level-2-font-family: $utrecht-typography-sans-serif-font-family;
480
- $nl-heading-level-1-line-height: $utrecht-typography-line-height-sm;
486
+ $nl-heading-level-1-line-height: $utrecht-typography-line-height-3xl;
481
487
  $nl-heading-level-1-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
482
- $nl-heading-level-1-font-size: $utrecht-typography-scale-4xl-font-size;
488
+ $nl-heading-level-1-font-size: $utrecht-typography-scale-3xl-font-size;
483
489
  $nl-heading-level-1-font-family: $utrecht-typography-sans-serif-font-family;
484
490
  $nl-data-badge-padding-inline: $utrecht-space-inline-sm;
485
491
  $nl-data-badge-padding-block: $utrecht-space-block-xs;
package/dist/dark/index.cjs CHANGED
@@ -568,7 +568,7 @@ module.exports = {
568
568
  "utrechtHeading1MarginBlockEnd": "0.67rem",
569
569
  "utrechtHeading1MarginBlockStart": "0.67rem",
570
570
  "utrechtHeading2FontFamily": "\"Noto Sans Variable\", \"Arial\", sans-serif",
571
- "utrechtHeading2FontSize": "1.25rem",
571
+ "utrechtHeading2FontSize": "1.5rem",
572
572
  "utrechtHeading2FontWeight": "600",
573
573
  "utrechtHeading2LineHeight": "1.25",
574
574
  "utrechtHeading2MarginBlockEnd": "0.3rem",
@@ -582,11 +582,11 @@ module.exports = {
582
582
  "utrechtHeading4FontFamily": "\"Noto Sans Variable\", \"Arial\", sans-serif",
583
583
  "utrechtHeading4FontSize": "1.125rem",
584
584
  "utrechtHeading4FontWeight": "600",
585
- "utrechtHeading4LineHeight": "1.5",
585
+ "utrechtHeading4LineHeight": "1.25",
586
586
  "utrechtHeading4MarginBlockEnd": "0.3rem",
587
587
  "utrechtHeading4MarginBlockStart": "1.2rem",
588
588
  "utrechtHeading5FontFamily": "\"Noto Sans Variable\", \"Arial\", sans-serif",
589
- "utrechtHeading5FontSize": "0.875rem",
589
+ "utrechtHeading5FontSize": "1rem",
590
590
  "utrechtHeading5FontWeight": "600",
591
591
  "utrechtHeading5LineHeight": "1.5",
592
592
  "utrechtHeading5MarginBlockEnd": "0.2rem",
@@ -905,6 +905,7 @@ module.exports = {
905
905
  "utrechtRichTextConfidantMarginBlockEnd": 0,
906
906
  "utrechtRootBackgroundColor": "hsl(0 0% 95%)",
907
907
  "utrechtRootColor": "hsl(0 0% 10%)",
908
+ "utrechtRootFontSizeAdjust": "0.54",
908
909
  "utrechtSearchBarButtonBackgroundColor": "hsl(0 100% 40%)",
909
910
  "utrechtSearchBarButtonBorderColor": "hsl(0 100% 40%)",
910
911
  "utrechtSearchBarButtonColor": "hsl(0 0% 100%)",
@@ -1115,18 +1116,23 @@ module.exports = {
1115
1116
  "utrechtTypographyScaleMdFontSize": "1rem",
1116
1117
  "utrechtTypographyScaleLgFontSize": "1.125rem",
1117
1118
  "utrechtTypographyScaleXlFontSize": "1.25rem",
1118
- "utrechtTypographyScale2xlFontSize": "1.375rem",
1119
- "utrechtTypographyScale3xlFontSize": "1.5rem",
1120
- "utrechtTypographyScale4xlFontSize": "2rem",
1121
- "utrechtTypographyWeightScaleBoldFontWeight": "700",
1119
+ "utrechtTypographyScale2xlFontSize": "1.5rem",
1120
+ "utrechtTypographyScale3xlFontSize": "2rem",
1121
+ "utrechtTypographyScale4xlFontSize": "2.5rem",
1122
1122
  "utrechtTypographyWeightScaleNormalFontWeight": "400",
1123
+ "utrechtTypographyWeightScaleMediumFontWeight": "500",
1123
1124
  "utrechtTypographyWeightScaleSemiboldFontWeight": "600",
1125
+ "utrechtTypographyWeightScaleBoldFontWeight": "700",
1124
1126
  "utrechtTypographyFontStyleNormal": "normal",
1125
1127
  "utrechtTypographyFontStyleInherit": "inherit",
1126
- "utrechtTypographyLineHeightXs": "1",
1127
- "utrechtTypographyLineHeightSm": "1.25",
1128
+ "utrechtTypographyLineHeightXs": "1.5",
1129
+ "utrechtTypographyLineHeightSm": "1.5",
1128
1130
  "utrechtTypographyLineHeightMd": "1.5",
1129
- "utrechtTypographyLineHeightLg": "2",
1131
+ "utrechtTypographyLineHeightLg": "1.25",
1132
+ "utrechtTypographyLineHeightXl": "1.25",
1133
+ "utrechtTypographyLineHeight2xl": "1.25",
1134
+ "utrechtTypographyLineHeight3xl": "1.25",
1135
+ "utrechtTypographyLineHeight4xl": "1.1",
1130
1136
  "utrechtBorderWidthSm": "1px",
1131
1137
  "utrechtBorderWidthMd": "2px",
1132
1138
  "utrechtBorderRadiusSm": "2px",
@@ -1201,7 +1207,7 @@ module.exports = {
1201
1207
  "nlHeadingLevel1FontWeight": "600",
1202
1208
  "nlHeadingLevel1LineHeight": "1.25",
1203
1209
  "nlHeadingLevel2FontFamily": "\"Noto Sans Variable\", \"Arial\", sans-serif",
1204
- "nlHeadingLevel2FontSize": "1.25rem",
1210
+ "nlHeadingLevel2FontSize": "1.5rem",
1205
1211
  "nlHeadingLevel2FontWeight": "600",
1206
1212
  "nlHeadingLevel2LineHeight": "1.25",
1207
1213
  "nlHeadingLevel3FontFamily": "\"Noto Sans Variable\", \"Arial\", sans-serif",
@@ -1211,9 +1217,9 @@ module.exports = {
1211
1217
  "nlHeadingLevel4FontFamily": "\"Noto Sans Variable\", \"Arial\", sans-serif",
1212
1218
  "nlHeadingLevel4FontSize": "1.125rem",
1213
1219
  "nlHeadingLevel4FontWeight": "600",
1214
- "nlHeadingLevel4LineHeight": "1.5",
1220
+ "nlHeadingLevel4LineHeight": "1.25",
1215
1221
  "nlHeadingLevel5FontFamily": "\"Noto Sans Variable\", \"Arial\", sans-serif",
1216
- "nlHeadingLevel5FontSize": "0.875rem",
1222
+ "nlHeadingLevel5FontSize": "1rem",
1217
1223
  "nlHeadingLevel5FontWeight": "600",
1218
1224
  "nlHeadingLevel5LineHeight": "1.5",
1219
1225
  "nlHeadingLevel6FontFamily": "\"Noto Sans Variable\", \"Arial\", sans-serif",