@utrecht/design-tokens 3.4.0 → 4.0.0

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 (57) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/_mixin-theme.scss +10 -9
  3. package/dist/_mixin.scss +10 -9
  4. package/dist/_variables.scss +10 -9
  5. package/dist/dark/_mixin-theme.scss +10 -9
  6. package/dist/dark/_mixin.scss +10 -9
  7. package/dist/dark/_variables.scss +10 -9
  8. package/dist/dark/index.cjs +37 -36
  9. package/dist/dark/index.css +10 -9
  10. package/dist/dark/index.d.ts +2 -1
  11. package/dist/dark/index.flat.json +36 -35
  12. package/dist/dark/index.json +82 -43
  13. package/dist/dark/index.mjs +37 -36
  14. package/dist/dark/index.tokens.json +126 -48
  15. package/dist/dark/list.json +82 -43
  16. package/dist/dark/list.mjs +82 -43
  17. package/dist/dark/property.css +1 -0
  18. package/dist/dark/root.css +9 -8
  19. package/dist/dark/theme-prince-xml.css +10 -9
  20. package/dist/dark/theme.css +9 -8
  21. package/dist/dark/tokens.cjs +173 -57
  22. package/dist/dark/tokens.d.ts +51 -8
  23. package/dist/dark/tokens.json +173 -57
  24. package/dist/dark/variables.cjs +37 -36
  25. package/dist/dark/variables.css +9 -8
  26. package/dist/dark/variables.d.ts +2 -1
  27. package/dist/dark/variables.json +36 -35
  28. package/dist/dark/variables.less +10 -9
  29. package/dist/dark/variables.mjs +37 -36
  30. package/dist/font-family.js +1 -0
  31. package/dist/index.cjs +37 -36
  32. package/dist/index.css +20 -18
  33. package/dist/index.d.ts +2 -1
  34. package/dist/index.flat.json +36 -35
  35. package/dist/index.json +82 -43
  36. package/dist/index.mjs +37 -36
  37. package/dist/index.tokens.json +126 -48
  38. package/dist/list.json +82 -43
  39. package/dist/list.mjs +82 -43
  40. package/dist/property.css +1 -0
  41. package/dist/root.css +9 -8
  42. package/dist/theme-prince-xml.css +10 -9
  43. package/dist/theme.css +9 -8
  44. package/dist/tokens.cjs +173 -57
  45. package/dist/tokens.d.ts +51 -8
  46. package/dist/tokens.json +173 -57
  47. package/dist/variables.cjs +37 -36
  48. package/dist/variables.css +9 -8
  49. package/dist/variables.d.ts +2 -1
  50. package/dist/variables.json +36 -35
  51. package/dist/variables.less +10 -9
  52. package/dist/variables.mjs +37 -36
  53. package/package.json +8 -3
  54. package/src/brand/utrecht/typography.tokens.json +3 -2
  55. package/src/component/nl/heading.tokens.json +6 -6
  56. package/src/component/utrecht/link-social.tokens.json +1 -1
  57. package/src/font-family.ts +1 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @utrecht/design-tokens
2
2
 
3
+ ## 4.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - cce8496: Major update to typography:
8
+
9
+ - Replace font family with Noto Sans Variable
10
+ - Add font-weight: 600 (semi-bold) variant
11
+ - Update design token documentation
12
+
13
+ ### Patch Changes
14
+
15
+ - 9b3cb1e: Release with npm provenance.
16
+
17
+ ## 3.4.1
18
+
19
+ ### Patch Changes
20
+
21
+ - 4783080: Changed the background-color of the `link-social` component from `utrecht.color.red.40` to `utrecht.color.blue.35`
22
+
3
23
  ## 3.4.0
4
24
 
5
25
  ### Minor Changes
package/dist/_mixin-theme.scss CHANGED
@@ -30,6 +30,7 @@
30
30
  --utrecht-typography-line-height-xs: 1;
31
31
  --utrecht-typography-font-style-inherit: inherit;
32
32
  --utrecht-typography-font-style-normal: normal;
33
+ --utrecht-typography-weight-scale-semibold-font-weight: 600;
33
34
  --utrecht-typography-weight-scale-normal-font-weight: 400;
34
35
  --utrecht-typography-weight-scale-bold-font-weight: 700;
35
36
  --utrecht-typography-scale-4xl-font-size: 2rem; /* 32px */
@@ -39,7 +40,7 @@
39
40
  --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
40
41
  --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
41
42
  --utrecht-typography-scale-sm-font-size: 0.875rem; /* 14px */
42
- --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
43
+ --utrecht-typography-sans-serif-font-family: "Noto Sans Variable", "Arial", sans-serif;
43
44
  --utrecht-icon-scale-4xl: 48px;
44
45
  --utrecht-icon-scale-3xl: 36px; /* Formaat voor toptaks iconen */
45
46
  --utrecht-icon-scale-2xl: 30px; /* Formaat voor marker iconen */
@@ -180,8 +181,8 @@
180
181
  --utrecht-page-body-padding-block-end: 0;
181
182
  --utrecht-page-body-padding-inline-start: 0;
182
183
  --utrecht-page-body-padding-inline-end: 0;
183
- --utrecht-page-body-content-padding-inline-end: 2.4em;
184
184
  --utrecht-page-body-content-max-inline-size: 1184px;
185
+ --utrecht-page-body-content-padding-inline-end: 2.4em;
185
186
  --utrecht-page-body-content-padding-inline-start: 2em;
186
187
  --utrecht-page-body-content-padding-block-end: 1em;
187
188
  --utrecht-page-body-content-padding-block-start: 0;
@@ -449,27 +450,27 @@
449
450
  --nl-mark-color: var(--utrecht-color-black);
450
451
  --nl-mark-background-color: var(--utrecht-color-yellow-60);
451
452
  --nl-heading-level-6-line-height: var(--utrecht-typography-line-height-md);
452
- --nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
453
+ --nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
453
454
  --nl-heading-level-6-font-size: var(--utrecht-typography-scale-sm-font-size);
454
455
  --nl-heading-level-6-font-family: var(--utrecht-typography-sans-serif-font-family);
455
456
  --nl-heading-level-5-line-height: var(--utrecht-typography-line-height-md);
456
- --nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
457
+ --nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
457
458
  --nl-heading-level-5-font-size: var(--utrecht-typography-scale-sm-font-size);
458
459
  --nl-heading-level-5-font-family: var(--utrecht-typography-sans-serif-font-family);
459
460
  --nl-heading-level-4-line-height: var(--utrecht-typography-line-height-md);
460
- --nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
461
+ --nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
461
462
  --nl-heading-level-4-font-size: var(--utrecht-typography-scale-lg-font-size);
462
463
  --nl-heading-level-4-font-family: var(--utrecht-typography-sans-serif-font-family);
463
464
  --nl-heading-level-3-line-height: var(--utrecht-typography-line-height-sm);
464
- --nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
465
+ --nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
465
466
  --nl-heading-level-3-font-size: var(--utrecht-typography-scale-xl-font-size);
466
467
  --nl-heading-level-3-font-family: var(--utrecht-typography-sans-serif-font-family);
467
468
  --nl-heading-level-2-line-height: var(--utrecht-typography-line-height-sm);
468
- --nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
469
+ --nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
469
470
  --nl-heading-level-2-font-size: var(--utrecht-typography-scale-xl-font-size);
470
471
  --nl-heading-level-2-font-family: var(--utrecht-typography-sans-serif-font-family);
471
472
  --nl-heading-level-1-line-height: var(--utrecht-typography-line-height-sm);
472
- --nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
473
+ --nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
473
474
  --nl-heading-level-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
474
475
  --nl-heading-level-1-font-family: var(--utrecht-typography-sans-serif-font-family);
475
476
  --nl-data-badge-padding-inline: var(--utrecht-space-inline-sm);
@@ -745,7 +746,7 @@
745
746
  --utrecht-link-social-margin-inline-start: var(--utrecht-space-inline-sm);
746
747
  --utrecht-link-social-color: var(--utrecht-color-white);
747
748
  --utrecht-link-social-border-color: var(--utrecht-color-white);
748
- --utrecht-link-social-background-color: var(--utrecht-color-red-40);
749
+ --utrecht-link-social-background-color: var(--utrecht-color-blue-35);
749
750
  --utrecht-link-list-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
750
751
  --utrecht-link-list-link-column-gap: var(--utrecht-space-block-xs);
751
752
  --utrecht-link-list-row-gap: var(--utrecht-space-block-xs);
package/dist/_mixin.scss CHANGED
@@ -30,6 +30,7 @@
30
30
  --utrecht-typography-line-height-xs: 1;
31
31
  --utrecht-typography-font-style-inherit: inherit;
32
32
  --utrecht-typography-font-style-normal: normal;
33
+ --utrecht-typography-weight-scale-semibold-font-weight: 600;
33
34
  --utrecht-typography-weight-scale-normal-font-weight: 400;
34
35
  --utrecht-typography-weight-scale-bold-font-weight: 700;
35
36
  --utrecht-typography-scale-4xl-font-size: 2rem; /* 32px */
@@ -39,7 +40,7 @@
39
40
  --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
40
41
  --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
41
42
  --utrecht-typography-scale-sm-font-size: 0.875rem; /* 14px */
42
- --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
43
+ --utrecht-typography-sans-serif-font-family: "Noto Sans Variable", "Arial", sans-serif;
43
44
  --utrecht-icon-scale-4xl: 48px;
44
45
  --utrecht-icon-scale-3xl: 36px; /* Formaat voor toptaks iconen */
45
46
  --utrecht-icon-scale-2xl: 30px; /* Formaat voor marker iconen */
@@ -180,8 +181,8 @@
180
181
  --utrecht-page-body-padding-block-end: 0;
181
182
  --utrecht-page-body-padding-inline-start: 0;
182
183
  --utrecht-page-body-padding-inline-end: 0;
183
- --utrecht-page-body-content-padding-inline-end: 2.4em;
184
184
  --utrecht-page-body-content-max-inline-size: 1184px;
185
+ --utrecht-page-body-content-padding-inline-end: 2.4em;
185
186
  --utrecht-page-body-content-padding-inline-start: 2em;
186
187
  --utrecht-page-body-content-padding-block-end: 1em;
187
188
  --utrecht-page-body-content-padding-block-start: 0;
@@ -449,27 +450,27 @@
449
450
  --nl-mark-color: var(--utrecht-color-black);
450
451
  --nl-mark-background-color: var(--utrecht-color-yellow-60);
451
452
  --nl-heading-level-6-line-height: var(--utrecht-typography-line-height-md);
452
- --nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
453
+ --nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
453
454
  --nl-heading-level-6-font-size: var(--utrecht-typography-scale-sm-font-size);
454
455
  --nl-heading-level-6-font-family: var(--utrecht-typography-sans-serif-font-family);
455
456
  --nl-heading-level-5-line-height: var(--utrecht-typography-line-height-md);
456
- --nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
457
+ --nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
457
458
  --nl-heading-level-5-font-size: var(--utrecht-typography-scale-sm-font-size);
458
459
  --nl-heading-level-5-font-family: var(--utrecht-typography-sans-serif-font-family);
459
460
  --nl-heading-level-4-line-height: var(--utrecht-typography-line-height-md);
460
- --nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
461
+ --nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
461
462
  --nl-heading-level-4-font-size: var(--utrecht-typography-scale-lg-font-size);
462
463
  --nl-heading-level-4-font-family: var(--utrecht-typography-sans-serif-font-family);
463
464
  --nl-heading-level-3-line-height: var(--utrecht-typography-line-height-sm);
464
- --nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
465
+ --nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
465
466
  --nl-heading-level-3-font-size: var(--utrecht-typography-scale-xl-font-size);
466
467
  --nl-heading-level-3-font-family: var(--utrecht-typography-sans-serif-font-family);
467
468
  --nl-heading-level-2-line-height: var(--utrecht-typography-line-height-sm);
468
- --nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
469
+ --nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
469
470
  --nl-heading-level-2-font-size: var(--utrecht-typography-scale-xl-font-size);
470
471
  --nl-heading-level-2-font-family: var(--utrecht-typography-sans-serif-font-family);
471
472
  --nl-heading-level-1-line-height: var(--utrecht-typography-line-height-sm);
472
- --nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
473
+ --nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
473
474
  --nl-heading-level-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
474
475
  --nl-heading-level-1-font-family: var(--utrecht-typography-sans-serif-font-family);
475
476
  --nl-data-badge-padding-inline: var(--utrecht-space-inline-sm);
@@ -745,7 +746,7 @@
745
746
  --utrecht-link-social-margin-inline-start: var(--utrecht-space-inline-sm);
746
747
  --utrecht-link-social-color: var(--utrecht-color-white);
747
748
  --utrecht-link-social-border-color: var(--utrecht-color-white);
748
- --utrecht-link-social-background-color: var(--utrecht-color-red-40);
749
+ --utrecht-link-social-background-color: var(--utrecht-color-blue-35);
749
750
  --utrecht-link-list-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
750
751
  --utrecht-link-list-link-column-gap: var(--utrecht-space-block-xs);
751
752
  --utrecht-link-list-row-gap: var(--utrecht-space-block-xs);
package/dist/_variables.scss CHANGED
@@ -28,6 +28,7 @@ $utrecht-typography-line-height-sm: 1.25;
28
28
  $utrecht-typography-line-height-xs: 1;
29
29
  $utrecht-typography-font-style-inherit: inherit;
30
30
  $utrecht-typography-font-style-normal: normal;
31
+ $utrecht-typography-weight-scale-semibold-font-weight: 600;
31
32
  $utrecht-typography-weight-scale-normal-font-weight: 400;
32
33
  $utrecht-typography-weight-scale-bold-font-weight: 700;
33
34
  $utrecht-typography-scale-4xl-font-size: 2rem; // 32px
@@ -37,7 +38,7 @@ $utrecht-typography-scale-xl-font-size: 1.25rem; // 20px
37
38
  $utrecht-typography-scale-lg-font-size: 1.125rem; // 18px
38
39
  $utrecht-typography-scale-md-font-size: 1rem; // 16px
39
40
  $utrecht-typography-scale-sm-font-size: 0.875rem; // 14px
40
- $utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
41
+ $utrecht-typography-sans-serif-font-family: "Noto Sans Variable", "Arial", sans-serif;
41
42
  $utrecht-icon-scale-4xl: 48px;
42
43
  $utrecht-icon-scale-3xl: 36px; // Formaat voor toptaks iconen
43
44
  $utrecht-icon-scale-2xl: 30px; // Formaat voor marker iconen
@@ -178,8 +179,8 @@ $utrecht-page-body-padding-block-start: 0;
178
179
  $utrecht-page-body-padding-block-end: 0;
179
180
  $utrecht-page-body-padding-inline-start: 0;
180
181
  $utrecht-page-body-padding-inline-end: 0;
181
- $utrecht-page-body-content-padding-inline-end: 2.4em;
182
182
  $utrecht-page-body-content-max-inline-size: 1184px;
183
+ $utrecht-page-body-content-padding-inline-end: 2.4em;
183
184
  $utrecht-page-body-content-padding-inline-start: 2em;
184
185
  $utrecht-page-body-content-padding-block-end: 1em;
185
186
  $utrecht-page-body-content-padding-block-start: 0;
@@ -447,27 +448,27 @@ $nl-number-badge-background-color: $utrecht-color-red-40;
447
448
  $nl-mark-color: $utrecht-color-black;
448
449
  $nl-mark-background-color: $utrecht-color-yellow-60;
449
450
  $nl-heading-level-6-line-height: $utrecht-typography-line-height-md;
450
- $nl-heading-level-6-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
451
+ $nl-heading-level-6-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
451
452
  $nl-heading-level-6-font-size: $utrecht-typography-scale-sm-font-size;
452
453
  $nl-heading-level-6-font-family: $utrecht-typography-sans-serif-font-family;
453
454
  $nl-heading-level-5-line-height: $utrecht-typography-line-height-md;
454
- $nl-heading-level-5-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
455
+ $nl-heading-level-5-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
455
456
  $nl-heading-level-5-font-size: $utrecht-typography-scale-sm-font-size;
456
457
  $nl-heading-level-5-font-family: $utrecht-typography-sans-serif-font-family;
457
458
  $nl-heading-level-4-line-height: $utrecht-typography-line-height-md;
458
- $nl-heading-level-4-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
459
+ $nl-heading-level-4-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
459
460
  $nl-heading-level-4-font-size: $utrecht-typography-scale-lg-font-size;
460
461
  $nl-heading-level-4-font-family: $utrecht-typography-sans-serif-font-family;
461
462
  $nl-heading-level-3-line-height: $utrecht-typography-line-height-sm;
462
- $nl-heading-level-3-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
463
+ $nl-heading-level-3-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
463
464
  $nl-heading-level-3-font-size: $utrecht-typography-scale-xl-font-size;
464
465
  $nl-heading-level-3-font-family: $utrecht-typography-sans-serif-font-family;
465
466
  $nl-heading-level-2-line-height: $utrecht-typography-line-height-sm;
466
- $nl-heading-level-2-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
467
+ $nl-heading-level-2-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
467
468
  $nl-heading-level-2-font-size: $utrecht-typography-scale-xl-font-size;
468
469
  $nl-heading-level-2-font-family: $utrecht-typography-sans-serif-font-family;
469
470
  $nl-heading-level-1-line-height: $utrecht-typography-line-height-sm;
470
- $nl-heading-level-1-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
471
+ $nl-heading-level-1-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
471
472
  $nl-heading-level-1-font-size: $utrecht-typography-scale-4xl-font-size;
472
473
  $nl-heading-level-1-font-family: $utrecht-typography-sans-serif-font-family;
473
474
  $nl-data-badge-padding-inline: $utrecht-space-inline-sm;
@@ -743,7 +744,7 @@ $utrecht-link-color: $utrecht-color-blue-35;
743
744
  $utrecht-link-social-margin-inline-start: $utrecht-space-inline-sm;
744
745
  $utrecht-link-social-color: $utrecht-color-white;
745
746
  $utrecht-link-social-border-color: $utrecht-color-white;
746
- $utrecht-link-social-background-color: $utrecht-color-red-40;
747
+ $utrecht-link-social-background-color: $utrecht-color-blue-35;
747
748
  $utrecht-link-list-link-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
748
749
  $utrecht-link-list-link-column-gap: $utrecht-space-block-xs;
749
750
  $utrecht-link-list-row-gap: $utrecht-space-block-xs;
package/dist/dark/_mixin-theme.scss CHANGED
@@ -30,6 +30,7 @@
30
30
  --utrecht-typography-line-height-xs: 1;
31
31
  --utrecht-typography-font-style-inherit: inherit;
32
32
  --utrecht-typography-font-style-normal: normal;
33
+ --utrecht-typography-weight-scale-semibold-font-weight: 600;
33
34
  --utrecht-typography-weight-scale-normal-font-weight: 400;
34
35
  --utrecht-typography-weight-scale-bold-font-weight: 700;
35
36
  --utrecht-typography-scale-4xl-font-size: 2rem; /* 32px */
@@ -39,7 +40,7 @@
39
40
  --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
40
41
  --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
41
42
  --utrecht-typography-scale-sm-font-size: 0.875rem; /* 14px */
42
- --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
43
+ --utrecht-typography-sans-serif-font-family: "Noto Sans Variable", "Arial", sans-serif;
43
44
  --utrecht-icon-scale-4xl: 48px;
44
45
  --utrecht-icon-scale-3xl: 36px; /* Formaat voor toptaks iconen */
45
46
  --utrecht-icon-scale-2xl: 30px; /* Formaat voor marker iconen */
@@ -180,8 +181,8 @@
180
181
  --utrecht-page-body-padding-block-end: 0;
181
182
  --utrecht-page-body-padding-inline-start: 0;
182
183
  --utrecht-page-body-padding-inline-end: 0;
183
- --utrecht-page-body-content-padding-inline-end: 2.4em;
184
184
  --utrecht-page-body-content-max-inline-size: 1184px;
185
+ --utrecht-page-body-content-padding-inline-end: 2.4em;
185
186
  --utrecht-page-body-content-padding-inline-start: 2em;
186
187
  --utrecht-page-body-content-padding-block-end: 1em;
187
188
  --utrecht-page-body-content-padding-block-start: 0;
@@ -451,27 +452,27 @@
451
452
  --nl-mark-color: var(--utrecht-color-black);
452
453
  --nl-mark-background-color: var(--utrecht-color-yellow-60);
453
454
  --nl-heading-level-6-line-height: var(--utrecht-typography-line-height-md);
454
- --nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
455
+ --nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
455
456
  --nl-heading-level-6-font-size: var(--utrecht-typography-scale-sm-font-size);
456
457
  --nl-heading-level-6-font-family: var(--utrecht-typography-sans-serif-font-family);
457
458
  --nl-heading-level-5-line-height: var(--utrecht-typography-line-height-md);
458
- --nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
459
+ --nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
459
460
  --nl-heading-level-5-font-size: var(--utrecht-typography-scale-sm-font-size);
460
461
  --nl-heading-level-5-font-family: var(--utrecht-typography-sans-serif-font-family);
461
462
  --nl-heading-level-4-line-height: var(--utrecht-typography-line-height-md);
462
- --nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
463
+ --nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
463
464
  --nl-heading-level-4-font-size: var(--utrecht-typography-scale-lg-font-size);
464
465
  --nl-heading-level-4-font-family: var(--utrecht-typography-sans-serif-font-family);
465
466
  --nl-heading-level-3-line-height: var(--utrecht-typography-line-height-sm);
466
- --nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
467
+ --nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
467
468
  --nl-heading-level-3-font-size: var(--utrecht-typography-scale-xl-font-size);
468
469
  --nl-heading-level-3-font-family: var(--utrecht-typography-sans-serif-font-family);
469
470
  --nl-heading-level-2-line-height: var(--utrecht-typography-line-height-sm);
470
- --nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
471
+ --nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
471
472
  --nl-heading-level-2-font-size: var(--utrecht-typography-scale-xl-font-size);
472
473
  --nl-heading-level-2-font-family: var(--utrecht-typography-sans-serif-font-family);
473
474
  --nl-heading-level-1-line-height: var(--utrecht-typography-line-height-sm);
474
- --nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
475
+ --nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
475
476
  --nl-heading-level-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
476
477
  --nl-heading-level-1-font-family: var(--utrecht-typography-sans-serif-font-family);
477
478
  --nl-data-badge-padding-inline: var(--utrecht-space-inline-sm);
@@ -749,7 +750,7 @@
749
750
  --utrecht-link-social-margin-inline-start: var(--utrecht-space-inline-sm);
750
751
  --utrecht-link-social-color: var(--utrecht-color-white);
751
752
  --utrecht-link-social-border-color: var(--utrecht-color-white);
752
- --utrecht-link-social-background-color: var(--utrecht-color-red-40);
753
+ --utrecht-link-social-background-color: var(--utrecht-color-blue-35);
753
754
  --utrecht-link-list-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
754
755
  --utrecht-link-list-link-column-gap: var(--utrecht-space-block-xs);
755
756
  --utrecht-link-list-row-gap: var(--utrecht-space-block-xs);
package/dist/dark/_mixin.scss CHANGED
@@ -30,6 +30,7 @@
30
30
  --utrecht-typography-line-height-xs: 1;
31
31
  --utrecht-typography-font-style-inherit: inherit;
32
32
  --utrecht-typography-font-style-normal: normal;
33
+ --utrecht-typography-weight-scale-semibold-font-weight: 600;
33
34
  --utrecht-typography-weight-scale-normal-font-weight: 400;
34
35
  --utrecht-typography-weight-scale-bold-font-weight: 700;
35
36
  --utrecht-typography-scale-4xl-font-size: 2rem; /* 32px */
@@ -39,7 +40,7 @@
39
40
  --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
40
41
  --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
41
42
  --utrecht-typography-scale-sm-font-size: 0.875rem; /* 14px */
42
- --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
43
+ --utrecht-typography-sans-serif-font-family: "Noto Sans Variable", "Arial", sans-serif;
43
44
  --utrecht-icon-scale-4xl: 48px;
44
45
  --utrecht-icon-scale-3xl: 36px; /* Formaat voor toptaks iconen */
45
46
  --utrecht-icon-scale-2xl: 30px; /* Formaat voor marker iconen */
@@ -180,8 +181,8 @@
180
181
  --utrecht-page-body-padding-block-end: 0;
181
182
  --utrecht-page-body-padding-inline-start: 0;
182
183
  --utrecht-page-body-padding-inline-end: 0;
183
- --utrecht-page-body-content-padding-inline-end: 2.4em;
184
184
  --utrecht-page-body-content-max-inline-size: 1184px;
185
+ --utrecht-page-body-content-padding-inline-end: 2.4em;
185
186
  --utrecht-page-body-content-padding-inline-start: 2em;
186
187
  --utrecht-page-body-content-padding-block-end: 1em;
187
188
  --utrecht-page-body-content-padding-block-start: 0;
@@ -451,27 +452,27 @@
451
452
  --nl-mark-color: var(--utrecht-color-black);
452
453
  --nl-mark-background-color: var(--utrecht-color-yellow-60);
453
454
  --nl-heading-level-6-line-height: var(--utrecht-typography-line-height-md);
454
- --nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
455
+ --nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
455
456
  --nl-heading-level-6-font-size: var(--utrecht-typography-scale-sm-font-size);
456
457
  --nl-heading-level-6-font-family: var(--utrecht-typography-sans-serif-font-family);
457
458
  --nl-heading-level-5-line-height: var(--utrecht-typography-line-height-md);
458
- --nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
459
+ --nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
459
460
  --nl-heading-level-5-font-size: var(--utrecht-typography-scale-sm-font-size);
460
461
  --nl-heading-level-5-font-family: var(--utrecht-typography-sans-serif-font-family);
461
462
  --nl-heading-level-4-line-height: var(--utrecht-typography-line-height-md);
462
- --nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
463
+ --nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
463
464
  --nl-heading-level-4-font-size: var(--utrecht-typography-scale-lg-font-size);
464
465
  --nl-heading-level-4-font-family: var(--utrecht-typography-sans-serif-font-family);
465
466
  --nl-heading-level-3-line-height: var(--utrecht-typography-line-height-sm);
466
- --nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
467
+ --nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
467
468
  --nl-heading-level-3-font-size: var(--utrecht-typography-scale-xl-font-size);
468
469
  --nl-heading-level-3-font-family: var(--utrecht-typography-sans-serif-font-family);
469
470
  --nl-heading-level-2-line-height: var(--utrecht-typography-line-height-sm);
470
- --nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
471
+ --nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
471
472
  --nl-heading-level-2-font-size: var(--utrecht-typography-scale-xl-font-size);
472
473
  --nl-heading-level-2-font-family: var(--utrecht-typography-sans-serif-font-family);
473
474
  --nl-heading-level-1-line-height: var(--utrecht-typography-line-height-sm);
474
- --nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
475
+ --nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-semibold-font-weight);
475
476
  --nl-heading-level-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
476
477
  --nl-heading-level-1-font-family: var(--utrecht-typography-sans-serif-font-family);
477
478
  --nl-data-badge-padding-inline: var(--utrecht-space-inline-sm);
@@ -749,7 +750,7 @@
749
750
  --utrecht-link-social-margin-inline-start: var(--utrecht-space-inline-sm);
750
751
  --utrecht-link-social-color: var(--utrecht-color-white);
751
752
  --utrecht-link-social-border-color: var(--utrecht-color-white);
752
- --utrecht-link-social-background-color: var(--utrecht-color-red-40);
753
+ --utrecht-link-social-background-color: var(--utrecht-color-blue-35);
753
754
  --utrecht-link-list-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
754
755
  --utrecht-link-list-link-column-gap: var(--utrecht-space-block-xs);
755
756
  --utrecht-link-list-row-gap: var(--utrecht-space-block-xs);
package/dist/dark/_variables.scss CHANGED
@@ -28,6 +28,7 @@ $utrecht-typography-line-height-sm: 1.25;
28
28
  $utrecht-typography-line-height-xs: 1;
29
29
  $utrecht-typography-font-style-inherit: inherit;
30
30
  $utrecht-typography-font-style-normal: normal;
31
+ $utrecht-typography-weight-scale-semibold-font-weight: 600;
31
32
  $utrecht-typography-weight-scale-normal-font-weight: 400;
32
33
  $utrecht-typography-weight-scale-bold-font-weight: 700;
33
34
  $utrecht-typography-scale-4xl-font-size: 2rem; // 32px
@@ -37,7 +38,7 @@ $utrecht-typography-scale-xl-font-size: 1.25rem; // 20px
37
38
  $utrecht-typography-scale-lg-font-size: 1.125rem; // 18px
38
39
  $utrecht-typography-scale-md-font-size: 1rem; // 16px
39
40
  $utrecht-typography-scale-sm-font-size: 0.875rem; // 14px
40
- $utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
41
+ $utrecht-typography-sans-serif-font-family: "Noto Sans Variable", "Arial", sans-serif;
41
42
  $utrecht-icon-scale-4xl: 48px;
42
43
  $utrecht-icon-scale-3xl: 36px; // Formaat voor toptaks iconen
43
44
  $utrecht-icon-scale-2xl: 30px; // Formaat voor marker iconen
@@ -178,8 +179,8 @@ $utrecht-page-body-padding-block-start: 0;
178
179
  $utrecht-page-body-padding-block-end: 0;
179
180
  $utrecht-page-body-padding-inline-start: 0;
180
181
  $utrecht-page-body-padding-inline-end: 0;
181
- $utrecht-page-body-content-padding-inline-end: 2.4em;
182
182
  $utrecht-page-body-content-max-inline-size: 1184px;
183
+ $utrecht-page-body-content-padding-inline-end: 2.4em;
183
184
  $utrecht-page-body-content-padding-inline-start: 2em;
184
185
  $utrecht-page-body-content-padding-block-end: 1em;
185
186
  $utrecht-page-body-content-padding-block-start: 0;
@@ -449,27 +450,27 @@ $nl-number-badge-background-color: $utrecht-color-red-40;
449
450
  $nl-mark-color: $utrecht-color-black;
450
451
  $nl-mark-background-color: $utrecht-color-yellow-60;
451
452
  $nl-heading-level-6-line-height: $utrecht-typography-line-height-md;
452
- $nl-heading-level-6-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
453
+ $nl-heading-level-6-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
453
454
  $nl-heading-level-6-font-size: $utrecht-typography-scale-sm-font-size;
454
455
  $nl-heading-level-6-font-family: $utrecht-typography-sans-serif-font-family;
455
456
  $nl-heading-level-5-line-height: $utrecht-typography-line-height-md;
456
- $nl-heading-level-5-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
457
+ $nl-heading-level-5-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
457
458
  $nl-heading-level-5-font-size: $utrecht-typography-scale-sm-font-size;
458
459
  $nl-heading-level-5-font-family: $utrecht-typography-sans-serif-font-family;
459
460
  $nl-heading-level-4-line-height: $utrecht-typography-line-height-md;
460
- $nl-heading-level-4-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
461
+ $nl-heading-level-4-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
461
462
  $nl-heading-level-4-font-size: $utrecht-typography-scale-lg-font-size;
462
463
  $nl-heading-level-4-font-family: $utrecht-typography-sans-serif-font-family;
463
464
  $nl-heading-level-3-line-height: $utrecht-typography-line-height-sm;
464
- $nl-heading-level-3-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
465
+ $nl-heading-level-3-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
465
466
  $nl-heading-level-3-font-size: $utrecht-typography-scale-xl-font-size;
466
467
  $nl-heading-level-3-font-family: $utrecht-typography-sans-serif-font-family;
467
468
  $nl-heading-level-2-line-height: $utrecht-typography-line-height-sm;
468
- $nl-heading-level-2-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
469
+ $nl-heading-level-2-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
469
470
  $nl-heading-level-2-font-size: $utrecht-typography-scale-xl-font-size;
470
471
  $nl-heading-level-2-font-family: $utrecht-typography-sans-serif-font-family;
471
472
  $nl-heading-level-1-line-height: $utrecht-typography-line-height-sm;
472
- $nl-heading-level-1-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
473
+ $nl-heading-level-1-font-weight: $utrecht-typography-weight-scale-semibold-font-weight;
473
474
  $nl-heading-level-1-font-size: $utrecht-typography-scale-4xl-font-size;
474
475
  $nl-heading-level-1-font-family: $utrecht-typography-sans-serif-font-family;
475
476
  $nl-data-badge-padding-inline: $utrecht-space-inline-sm;
@@ -747,7 +748,7 @@ $utrecht-link-color: $utrecht-color-blue-60;
747
748
  $utrecht-link-social-margin-inline-start: $utrecht-space-inline-sm;
748
749
  $utrecht-link-social-color: $utrecht-color-white;
749
750
  $utrecht-link-social-border-color: $utrecht-color-white;
750
- $utrecht-link-social-background-color: $utrecht-color-red-40;
751
+ $utrecht-link-social-background-color: $utrecht-color-blue-35;
751
752
  $utrecht-link-list-link-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
752
753
  $utrecht-link-list-link-column-gap: $utrecht-space-block-xs;
753
754
  $utrecht-link-list-row-gap: $utrecht-space-block-xs;