@rijkshuisstijl-community/design-tokens 1.2.0 → 2.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 (95) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/README.md +153 -12
  3. package/dist/_variables.scss +94 -78
  4. package/dist/index.css +94 -78
  5. package/dist/index.d.ts +48 -32
  6. package/dist/index.js +94 -78
  7. package/dist/index.json +93 -77
  8. package/dist/index.tokens.json +113 -85
  9. package/dist/root.css +94 -78
  10. package/dist/tokens.d.ts +67 -39
  11. package/dist/tokens.js +1285 -921
  12. package/dist/uitvoerend-groen/_variables.scss +1337 -0
  13. package/dist/uitvoerend-groen/index.css +1340 -0
  14. package/dist/{uitvoerend-mintgroen-focus → uitvoerend-groen}/index.d.ts +922 -911
  15. package/dist/uitvoerend-groen/index.js +1338 -0
  16. package/dist/uitvoerend-groen/index.json +1335 -0
  17. package/dist/uitvoerend-groen/index.tokens.json +2049 -0
  18. package/dist/uitvoerend-groen/root.css +1340 -0
  19. package/dist/{uitvoerend-mintgroen-focus → uitvoerend-groen}/tokens.d.ts +1508 -1513
  20. package/dist/uitvoerend-groen/tokens.js +31258 -0
  21. package/dist/uitvoerend-hemelblauw/_variables.scss +1337 -0
  22. package/dist/uitvoerend-hemelblauw/index.css +1340 -0
  23. package/dist/uitvoerend-hemelblauw/index.d.ts +1338 -0
  24. package/dist/uitvoerend-hemelblauw/index.js +1338 -0
  25. package/dist/uitvoerend-hemelblauw/index.json +1335 -0
  26. package/dist/uitvoerend-hemelblauw/index.tokens.json +2049 -0
  27. package/dist/uitvoerend-hemelblauw/root.css +1340 -0
  28. package/dist/uitvoerend-hemelblauw/tokens.d.ts +2072 -0
  29. package/dist/uitvoerend-hemelblauw/tokens.js +31258 -0
  30. package/dist/{uitvoerend-mintgroen-focus → uitvoerend-mintgroen}/_variables.scss +778 -767
  31. package/dist/{uitvoerend-mintgroen-focus → uitvoerend-mintgroen}/index.css +779 -768
  32. package/dist/uitvoerend-mintgroen/index.d.ts +1338 -0
  33. package/dist/{uitvoerend-mintgroen-focus → uitvoerend-mintgroen}/index.js +981 -970
  34. package/dist/{uitvoerend-mintgroen-focus → uitvoerend-mintgroen}/index.json +980 -969
  35. package/dist/{uitvoerend-mintgroen-focus → uitvoerend-mintgroen}/index.tokens.json +1611 -1616
  36. package/dist/{uitvoerend-mintgroen-focus → uitvoerend-mintgroen}/root.css +778 -767
  37. package/dist/uitvoerend-mintgroen/tokens.d.ts +2072 -0
  38. package/dist/{uitvoerend-mintgroen-focus → uitvoerend-mintgroen}/tokens.js +22466 -22247
  39. package/dist/uitvoerend-oranje/_variables.scss +1337 -0
  40. package/dist/uitvoerend-oranje/index.css +1340 -0
  41. package/dist/uitvoerend-oranje/index.d.ts +1338 -0
  42. package/dist/uitvoerend-oranje/index.js +1338 -0
  43. package/dist/uitvoerend-oranje/index.json +1335 -0
  44. package/dist/uitvoerend-oranje/index.tokens.json +2049 -0
  45. package/dist/uitvoerend-oranje/root.css +1340 -0
  46. package/dist/uitvoerend-oranje/tokens.d.ts +2072 -0
  47. package/dist/uitvoerend-oranje/tokens.js +31258 -0
  48. package/dist/uitvoerend-paars/_variables.scss +1337 -0
  49. package/dist/uitvoerend-paars/index.css +1340 -0
  50. package/dist/uitvoerend-paars/index.d.ts +1338 -0
  51. package/dist/uitvoerend-paars/index.js +1338 -0
  52. package/dist/uitvoerend-paars/index.json +1335 -0
  53. package/dist/uitvoerend-paars/index.tokens.json +2049 -0
  54. package/dist/uitvoerend-paars/root.css +1340 -0
  55. package/dist/uitvoerend-paars/tokens.d.ts +2072 -0
  56. package/dist/uitvoerend-paars/tokens.js +31258 -0
  57. package/dist/uitvoerend-violet/_variables.scss +191 -175
  58. package/dist/uitvoerend-violet/index.css +191 -175
  59. package/dist/uitvoerend-violet/index.d.ts +88 -72
  60. package/dist/uitvoerend-violet/index.js +191 -175
  61. package/dist/uitvoerend-violet/index.json +190 -174
  62. package/dist/uitvoerend-violet/index.tokens.json +227 -199
  63. package/dist/uitvoerend-violet/root.css +191 -175
  64. package/dist/uitvoerend-violet/tokens.d.ts +123 -95
  65. package/dist/uitvoerend-violet/tokens.js +16557 -16193
  66. package/dist/uitvoerend-violet-oud/_variables.scss +191 -174
  67. package/dist/uitvoerend-violet-oud/index.css +191 -174
  68. package/dist/uitvoerend-violet-oud/index.d.ts +88 -71
  69. package/dist/uitvoerend-violet-oud/index.js +191 -174
  70. package/dist/uitvoerend-violet-oud/index.json +190 -173
  71. package/dist/uitvoerend-violet-oud/index.tokens.json +227 -198
  72. package/dist/uitvoerend-violet-oud/root.css +191 -174
  73. package/dist/uitvoerend-violet-oud/tokens.d.ts +123 -94
  74. package/dist/uitvoerend-violet-oud/tokens.js +12703 -12318
  75. package/dist/wetgevend/_variables.scss +131 -115
  76. package/dist/wetgevend/index.css +131 -115
  77. package/dist/wetgevend/index.d.ts +88 -72
  78. package/dist/wetgevend/index.js +131 -115
  79. package/dist/wetgevend/index.json +130 -114
  80. package/dist/wetgevend/index.tokens.json +167 -139
  81. package/dist/wetgevend/root.css +131 -115
  82. package/dist/wetgevend/tokens.d.ts +123 -95
  83. package/dist/wetgevend/tokens.js +12053 -11689
  84. package/figma/figma.tokens.json +840 -294
  85. package/package.json +1 -1
  86. package/src/generated/base.tokens.json +240 -163
  87. package/src/generated/themes.json +30580 -5292
  88. package/src/generated/uitvoerend-groen/tokens.json +6252 -0
  89. package/src/generated/uitvoerend-hemelblauw/tokens.json +6252 -0
  90. package/src/generated/{uitvoerend-mintgroen-focus → uitvoerend-mintgroen}/tokens.json +4384 -4355
  91. package/src/generated/uitvoerend-oranje/tokens.json +6252 -0
  92. package/src/generated/uitvoerend-paars/tokens.json +6252 -0
  93. package/src/generated/uitvoerend-violet/tokens.json +506 -429
  94. package/src/generated/uitvoerend-violet-oud/tokens.json +512 -431
  95. package/src/generated/wetgevend/tokens.json +467 -390
package/dist/_variables.scss CHANGED
@@ -1,13 +1,13 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 29 Apr 2025 12:01:02 GMT
3
+ // Generated on Tue, 27 May 2025 13:07:13 GMT
4
4
 
5
5
  $nl-number-badge-padding-block: 0.5rem;
6
6
  $nl-number-badge-padding-inline: 0.5rem;
7
7
  $nl-number-badge-color: #fff;
8
8
  $nl-number-badge-border-color: transparent;
9
9
  $nl-number-badge-background-color: #154273;
10
- $nl-number-badge-font-family: Fira Sans, Arial, Verdana, sans-serif;
10
+ $nl-number-badge-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
11
11
  $nl-number-badge-border-radius: 999px;
12
12
  $nl-number-badge-border-width: 0px;
13
13
  $nl-number-badge-font-weight: 700;
@@ -20,40 +20,40 @@ $nl-heading-level-5-margin-block-end: 0;
20
20
  $nl-heading-level-5-font-size: 1.25rem;
21
21
  $nl-heading-level-5-line-height: 125%;
22
22
  $nl-heading-level-5-font-weight: 700;
23
- $nl-heading-level-5-font-family: Fira Sans, Arial, Verdana, sans-serif;
23
+ $nl-heading-level-5-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
24
24
  $nl-heading-level-5-color: #154273;
25
25
  $nl-heading-level-4-margin-block-start: 0;
26
26
  $nl-heading-level-4-margin-block-end: 0;
27
27
  $nl-heading-level-4-font-size: 1.5rem;
28
28
  $nl-heading-level-4-line-height: 125%;
29
29
  $nl-heading-level-4-font-weight: 700;
30
- $nl-heading-level-4-font-family: Fira Sans, Arial, Verdana, sans-serif;
30
+ $nl-heading-level-4-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
31
31
  $nl-heading-level-4-color: #154273;
32
32
  $nl-heading-level-3-margin-block-start: 0;
33
33
  $nl-heading-level-3-margin-block-end: 0;
34
34
  $nl-heading-level-3-font-size: 1.875rem;
35
35
  $nl-heading-level-3-line-height: 125%;
36
36
  $nl-heading-level-3-font-weight: 700;
37
- $nl-heading-level-3-font-family: Fira Sans, Arial, Verdana, sans-serif;
37
+ $nl-heading-level-3-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
38
38
  $nl-heading-level-3-color: #154273;
39
39
  $nl-heading-level-2-margin-block-start: 0;
40
40
  $nl-heading-level-2-margin-block-end: 0;
41
41
  $nl-heading-level-2-font-size: 2.5rem;
42
42
  $nl-heading-level-2-line-height: 125%;
43
43
  $nl-heading-level-2-font-weight: 700;
44
- $nl-heading-level-2-font-family: Fira Sans, Arial, Verdana, sans-serif;
44
+ $nl-heading-level-2-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
45
45
  $nl-heading-level-2-color: #154273;
46
46
  $nl-heading-level-1-margin-block-start: 0;
47
47
  $nl-heading-level-1-margin-block-end: 0;
48
48
  $nl-heading-level-1-font-size: 3.125rem;
49
49
  $nl-heading-level-1-line-height: 125%;
50
50
  $nl-heading-level-1-font-weight: 700;
51
- $nl-heading-level-1-font-family: Fira Sans, Arial, Verdana, sans-serif;
51
+ $nl-heading-level-1-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
52
52
  $nl-heading-level-1-color: #154273;
53
53
  $nl-link-line-height: 150%;
54
54
  $nl-link-font-size: 1.25rem;
55
55
  $nl-link-font-weight: 400;
56
- $nl-link-font-family: Fira Sans, Arial, Verdana, sans-serif;
56
+ $nl-link-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
57
57
  $nl-link-text-underline-offset: 0.125rem;
58
58
  $nl-link-text-decoration-thickness: auto;
59
59
  $nl-link-column-gap: 0.25rem;
@@ -81,7 +81,7 @@ $nl-paragraph-margin-block-end: 0;
81
81
  $nl-paragraph-line-height: 150%;
82
82
  $nl-paragraph-font-weight: 400;
83
83
  $nl-paragraph-font-size: 1.25rem;
84
- $nl-paragraph-font-family: Fira Sans, Arial, Verdana, sans-serif;
84
+ $nl-paragraph-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
85
85
  $nl-paragraph-color: #0F172A;
86
86
  $nl-skip-link-text-underline-offset: 0.125rem;
87
87
  $nl-skip-link-text-decoration: underline;
@@ -109,7 +109,7 @@ $nl-skip-link-min-inline-size: 48px;
109
109
  $nl-skip-link-min-block-size: 48px;
110
110
  $nl-skip-link-line-height: 150%;
111
111
  $nl-skip-link-font-size: 1.25rem;
112
- $nl-skip-link-font-family: Fira Sans, Arial, Verdana, sans-serif;
112
+ $nl-skip-link-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
113
113
  $nl-skip-link-font-weight: 700;
114
114
  $rhc-space-700: 3.5rem;
115
115
  $rhc-space-600: 3rem;
@@ -126,7 +126,7 @@ $rhc-border-width-none: 0px;
126
126
  $rhc-border-width-m: 2px;
127
127
  $rhc-border-width-default: 1px;
128
128
  $rhc-font-family-secondary: RijksoverheidSerifWeb, 'Times New Roman', serif;
129
- $rhc-font-family-primary: Fira Sans, Arial, Verdana, sans-serif;
129
+ $rhc-font-family-primary: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
130
130
  $rhc-font-weight-thin: 200;
131
131
  $rhc-font-weight-light: 300;
132
132
  $rhc-font-weight-chosen-regular: 400;
@@ -313,31 +313,20 @@ $rhc-color-border-strong: #0F172A;
313
313
  $rhc-color-border-subdued: #94A3B8;
314
314
  $rhc-color-border-default: #64748B;
315
315
  $rhc-color-foreground-on-emphasis: #fff;
316
+ $rhc-color-foreground-on-light-color: #000;
317
+ $rhc-color-foreground-on-dark-color: #fff;
316
318
  $rhc-color-foreground-link: #01689b;
317
319
  $rhc-color-foreground-subdued: #334155;
318
320
  $rhc-color-foreground-default: #0F172A;
319
321
  $rhc-color-focus-outline: #000;
320
322
  $rhc-border-radius-none: 0px;
321
323
  $rhc-border-radius-circle: 999px;
322
- $rhc-border-radius-keep: 48px;
323
324
  $rhc-border-radius-md: 5px;
324
325
  $rhc-border-radius-sm: 2.5px;
325
- $rhc-keep-bottom-left-border-radius-bottom-left: 48px;
326
- $rhc-keep-bottom-left-border-radius-bottom-right: 0;
327
- $rhc-keep-bottom-left-border-radius-top-right: 0;
328
- $rhc-keep-bottom-left-border-radius-top-left: 0;
329
- $rhc-keep-bottom-right-border-radius-bottom-left: 0;
330
- $rhc-keep-bottom-right-border-radius-bottom-right: 48px;
331
- $rhc-keep-bottom-right-border-radius-top-right: 0;
332
- $rhc-keep-bottom-right-border-radius-top-left: 0;
333
- $rhc-keep-top-right-border-radius-bottom-left: 0;
334
- $rhc-keep-top-right-border-radius-bottom-right: 0;
335
- $rhc-keep-top-right-border-radius-top-left: 0;
336
- $rhc-keep-top-right-border-radius-top-right: 48px;
337
- $rhc-keep-top-left-border-radius-bottom-left: 0;
338
- $rhc-keep-top-left-border-radius-bottom-right: 0;
339
- $rhc-keep-top-left-border-radius-top-right: 0;
340
- $rhc-keep-top-left-border-radius-top-left: 48px;
326
+ $rhc-rounded-corner-border-width: 2px;
327
+ $rhc-rounded-corner-xl-border-radius: 96px;
328
+ $rhc-rounded-corner-md-border-radius: 48px;
329
+ $rhc-rounded-corner-xs-border-radius: 24px;
341
330
  $rhc-accordion-color: #0F172A;
342
331
  $rhc-accordion-border-radius: 0px;
343
332
  $rhc-accordion-header-margin: 0;
@@ -354,7 +343,24 @@ $rhc-accordion-button-icon-margin-block: 0.25rem;
354
343
  $rhc-accordion-button-line-height: 150%;
355
344
  $rhc-accordion-button-font-weight: 400;
356
345
  $rhc-accordion-button-font-size: 1.25rem;
357
- $rhc-accordion-button-font-family: Fira Sans, Arial, Verdana, sans-serif;
346
+ $rhc-accordion-button-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
347
+ $rhc-keep-bottom-left-border-radius-bottom-left: 48px;
348
+ $rhc-keep-bottom-left-border-radius-bottom-right: 0;
349
+ $rhc-keep-bottom-left-border-radius-top-right: 0;
350
+ $rhc-keep-bottom-left-border-radius-top-left: 0;
351
+ $rhc-keep-bottom-right-border-radius-bottom-left: 0;
352
+ $rhc-keep-bottom-right-border-radius-bottom-right: 48px;
353
+ $rhc-keep-bottom-right-border-radius-top-right: 0;
354
+ $rhc-keep-bottom-right-border-radius-top-left: 0;
355
+ $rhc-keep-top-right-border-radius-bottom-left: 0;
356
+ $rhc-keep-top-right-border-radius-bottom-right: 0;
357
+ $rhc-keep-top-right-border-radius-top-left: 0;
358
+ $rhc-keep-top-right-border-radius-top-right: 48px;
359
+ $rhc-keep-top-left-border-radius-bottom-left: 0;
360
+ $rhc-keep-top-left-border-radius-bottom-right: 0;
361
+ $rhc-keep-top-left-border-radius-top-right: 0;
362
+ $rhc-keep-top-left-border-radius-top-left: 48px;
363
+ $rhc-keep-comment: ⚠️ Deze tokens zijn legacy en worden vervangen door de tokenset components/blockquote.;
358
364
  $rhc-card-as-link-horizontal-heading-inline-size: 200px;
359
365
  $rhc-card-as-link-horizontal-padding-inline-start: 1rem;
360
366
  $rhc-card-as-link-horizontal-padding-inline-end: 1rem;
@@ -457,11 +463,11 @@ $rhc-hero-message-padding-block-end: 1rem;
457
463
  $rhc-hero-message-row-gap: 0.125rem;
458
464
  $rhc-hero-message-color: #fff;
459
465
  $rhc-hero-message-background-color: #154273;
460
- $rhc-hero-sub-heading-font-family: Fira Sans, Arial, Verdana, sans-serif;
466
+ $rhc-hero-sub-heading-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
461
467
  $rhc-hero-sub-heading-font-size: 1.25rem;
462
468
  $rhc-hero-sub-heading-line-height: 150%;
463
469
  $rhc-hero-sub-heading-font-weight: 400;
464
- $rhc-hero-heading-font-family: Fira Sans, Arial, Verdana, sans-serif;
470
+ $rhc-hero-heading-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
465
471
  $rhc-hero-heading-font-size: 1.875rem;
466
472
  $rhc-hero-heading-line-height: 125%;
467
473
  $rhc-hero-heading-font-weight: 700;
@@ -477,7 +483,7 @@ $rhc-link-list-card-padding-block-end: 1.5rem;
477
483
  $rhc-link-list-card-padding-block-start: 1.5rem;
478
484
  $rhc-link-list-card-background-color: #fff;
479
485
  $rhc-logo-color: #154273;
480
- $rhc-logo-font-family: Fira Sans, Arial, Verdana, sans-serif;
486
+ $rhc-logo-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
481
487
  $rhc-logo-column-gap: 12px;
482
488
  $rhc-logo-subtitle-font-size: 0.775rem;
483
489
  $rhc-logo-subtitle-line-height: 1rem;
@@ -494,7 +500,7 @@ $rhc-message-list-item-heading-color: #0F172A;
494
500
  $rhc-message-list-item-label-line-height: 150%;
495
501
  $rhc-message-list-item-label-font-weight: 700;
496
502
  $rhc-message-list-item-label-font-size: 1.25rem;
497
- $rhc-message-list-item-label-font-family: Fira Sans, Arial, Verdana, sans-serif;
503
+ $rhc-message-list-item-label-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
498
504
  $rhc-message-list-item-content-row-gap: 0.5rem;
499
505
  $rhc-message-list-item-content-column-gap: 0.5rem;
500
506
  $rhc-message-list-item-content-font-size: 1.125rem;
@@ -548,7 +554,7 @@ $rhc-navigation-list-item-active-background-color: #F1F5F9;
548
554
  $rhc-navigation-list-item-label-line-height: 150%;
549
555
  $rhc-navigation-list-item-label-font-weight: 700;
550
556
  $rhc-navigation-list-item-label-font-size: 1.875rem;
551
- $rhc-navigation-list-item-label-font-family: Fira Sans, Arial, Verdana, sans-serif;
557
+ $rhc-navigation-list-item-label-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
552
558
  $rhc-navigation-list-item-content-row-gap: 0.25rem;
553
559
  $rhc-navigation-list-item-content-column-gap: 0.5rem;
554
560
  $rhc-navigation-list-item-content-font-size: 1.125rem;
@@ -580,7 +586,7 @@ $rhc-sidenav-link-color: #01689b;
580
586
  $rhc-sidenav-link-current-color: #0F172A;
581
587
  $rhc-sidenav-link-current-font-weight: 700;
582
588
  $rhc-sidenav-link-font-weight: 400;
583
- $rhc-sidenav-link-font-family: Fira Sans, Arial, Verdana, sans-serif;
589
+ $rhc-sidenav-link-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
584
590
  $rhc-sidenav-link-font-size: 1.25rem;
585
591
  $rhc-sidenav-link-icon-margin-inline: 0.5rem;
586
592
  $rhc-sidenav-link-icon-size: 24px;
@@ -624,7 +630,7 @@ $utrecht-rich-text-stranger-margin-block-end: 2rem;
624
630
  $utrecht-document-font-weight: 400;
625
631
  $utrecht-document-line-height: 150%;
626
632
  $utrecht-document-font-size: 1.25rem;
627
- $utrecht-document-font-family: Fira Sans, Arial, Verdana, sans-serif;
633
+ $utrecht-document-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
628
634
  $utrecht-document-color: #0F172A;
629
635
  $utrecht-document-background-color: #fff;
630
636
  $utrecht-accordion-button-active-row-gap: 0;
@@ -684,7 +690,7 @@ $utrecht-alert-column-gap: 0.5rem;
684
690
  $utrecht-alert-heading-font-size: 1.25rem;
685
691
  $utrecht-alert-heading-line-height: 150%;
686
692
  $utrecht-alert-heading-font-weight: 700;
687
- $utrecht-alert-heading-font-family: Fira Sans, Arial, Verdana, sans-serif;
693
+ $utrecht-alert-heading-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
688
694
  $utrecht-article-max-inline-size: 75ch;
689
695
  $utrecht-blockquote-pink-corner-border-variation-padding: 2.5rem;
690
696
  $utrecht-blockquote-pink-corner-border-variation-border-start-start-radius: 3rem;
@@ -704,39 +710,45 @@ $utrecht-blockquote-blue-corner-border-variation-border-end-end-radius: 3rem;
704
710
  $utrecht-blockquote-blue-corner-border-variation-border-inline-end-width: 2px;
705
711
  $utrecht-blockquote-blue-corner-border-variation-border-block-end-width: 2px;
706
712
  $utrecht-blockquote-blue-corner-border-variation-border-color: #154273;
707
- $utrecht-blockquote-border-width: 2px;
708
713
  $utrecht-blockquote-border-end-end-radius: 0;
709
714
  $utrecht-blockquote-border-end-start-radius: 0;
710
715
  $utrecht-blockquote-border-start-end-radius: 0;
711
716
  $utrecht-blockquote-border-start-start-radius: 0;
712
717
  $utrecht-blockquote-border-inline-end-width: 0;
713
- $utrecht-blockquote-border-inline-start-width: 0;
714
718
  $utrecht-blockquote-border-block-end-width: 0;
715
719
  $utrecht-blockquote-border-block-start-width: 0;
716
- $utrecht-blockquote-border-color: #154273;
717
- $utrecht-blockquote-background-color: transparent;
718
- $utrecht-blockquote-row-gap: 0.75rem;
719
- $utrecht-blockquote-padding-inline-start: 2rem;
720
- $utrecht-blockquote-padding-inline-end: 2rem;
721
- $utrecht-blockquote-padding-block-start: 2rem;
722
- $utrecht-blockquote-padding-block-end: 2rem;
723
720
  $utrecht-blockquote-margin-inline-start: 0;
724
721
  $utrecht-blockquote-margin-inline-end: 0;
725
722
  $utrecht-blockquote-margin-block-start: 0;
726
723
  $utrecht-blockquote-margin-block-end: 0;
727
- $utrecht-blockquote-content-color: #0F172A;
728
- $utrecht-blockquote-content-font-size: 1.5rem;
729
- $utrecht-blockquote-content-font-weight: 400;
730
- $utrecht-blockquote-content-line-height: 150%;
731
- $utrecht-blockquote-content-font-family: RijksoverheidSerifWeb, 'Times New Roman', serif;
732
- $utrecht-blockquote-caption-color: #334155;
724
+ $utrecht-blockquote-caption-color: #154273;
733
725
  $utrecht-blockquote-caption-padding-block-start: 0.75rem;
734
726
  $utrecht-blockquote-caption-font-weight: 400;
735
727
  $utrecht-blockquote-caption-line-height: 150%;
736
- $utrecht-blockquote-caption-font-family: Fira Sans, Arial, Verdana, sans-serif;
728
+ $utrecht-blockquote-caption-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
737
729
  $utrecht-blockquote-caption-font-size: 1.25rem;
730
+ $utrecht-blockquote-content-font-weight: 400;
731
+ $utrecht-blockquote-content-line-height: 150%;
732
+ $utrecht-blockquote-content-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
733
+ $utrecht-blockquote-content-font-size: 1.25rem;
734
+ $utrecht-blockquote-content-color: #154273;
735
+ $utrecht-blockquote-attribution-font-size: 1.25rem;
736
+ $utrecht-blockquote-attribution-color: #154273;
737
+ $utrecht-blockquote-row-gap: 0.75rem;
738
+ $utrecht-blockquote-padding-inline-start: 2rem;
739
+ $utrecht-blockquote-padding-inline-end: 2rem;
740
+ $utrecht-blockquote-padding-block-start: 2rem;
741
+ $utrecht-blockquote-padding-block-end: 2rem;
742
+ $utrecht-blockquote-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
743
+ $utrecht-blockquote-font-size: 1.25rem;
744
+ $utrecht-blockquote-color: #154273;
745
+ $utrecht-blockquote-border-width: 0;
746
+ $utrecht-blockquote-border-radius: 0;
747
+ $utrecht-blockquote-border-color: transparent;
748
+ $utrecht-blockquote-border-inline-start-width: 0;
749
+ $utrecht-blockquote-background-color: transparent;
738
750
  $utrecht-breadcrumb-nav-font-weight: 400;
739
- $utrecht-breadcrumb-nav-font-family: Fira Sans, Arial, Verdana, sans-serif;
751
+ $utrecht-breadcrumb-nav-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
740
752
  $utrecht-breadcrumb-nav-margin-inline: 0.5rem;
741
753
  $utrecht-breadcrumb-nav-divider-inset-block-start: 0;
742
754
  $utrecht-breadcrumb-nav-divider-color: #334155;
@@ -848,7 +860,7 @@ $utrecht-button-padding-block-end: 0.5rem;
848
860
  $utrecht-button-line-height: 150%;
849
861
  $utrecht-button-font-weight: 700;
850
862
  $utrecht-button-font-size: 1.25rem;
851
- $utrecht-button-font-family: Fira Sans, Arial, Verdana, sans-serif;
863
+ $utrecht-button-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
852
864
  $utrecht-button-icon-size: 24px;
853
865
  $utrecht-button-icon-gap: 0.5rem;
854
866
  $utrecht-button-border-width: 1px;
@@ -926,7 +938,7 @@ $utrecht-number-badge-padding-inline: 0.5rem;
926
938
  $utrecht-number-badge-color: #fff;
927
939
  $utrecht-number-badge-border-color: transparent;
928
940
  $utrecht-number-badge-background-color: #154273;
929
- $utrecht-number-badge-font-family: Fira Sans, Arial, Verdana, sans-serif;
941
+ $utrecht-number-badge-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
930
942
  $utrecht-number-badge-border-radius: 999px;
931
943
  $utrecht-number-badge-border-width: 0px;
932
944
  $utrecht-number-badge-font-weight: 700;
@@ -943,7 +955,7 @@ $utrecht-form-fieldset-legend-disabled-color: #334155;
943
955
  $utrecht-form-fieldset-legend-line-height: 150%;
944
956
  $utrecht-form-fieldset-legend-font-weight: 700;
945
957
  $utrecht-form-fieldset-legend-font-size: 1.25rem;
946
- $utrecht-form-fieldset-legend-font-family: Fira Sans, Arial, Verdana, sans-serif;
958
+ $utrecht-form-fieldset-legend-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
947
959
  $utrecht-form-fieldset-legend-color: #0F172A;
948
960
  $utrecht-figure-img-border-start-start-radius: 0;
949
961
  $utrecht-figure-img-border-start-end-radius: 0;
@@ -975,20 +987,20 @@ $utrecht-form-field-description-margin-block-end: 0.5rem;
975
987
  $utrecht-form-field-description-margin-block-start: -0.5rem;
976
988
  $utrecht-form-field-description-line-height: 150%;
977
989
  $utrecht-form-field-description-font-size: 1.25rem;
978
- $utrecht-form-field-description-font-family: Fira Sans, Arial, Verdana, sans-serif;
990
+ $utrecht-form-field-description-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
979
991
  $utrecht-form-field-description-color: #334155;
980
992
  $utrecht-form-field-error-message-padding-block-end: 0.5rem;
981
993
  $utrecht-form-field-error-message-margin-block-end: 0.5rem;
982
994
  $utrecht-form-field-error-message-font-weight: 400;
983
995
  $utrecht-form-field-error-message-font-size: 1.25rem;
984
- $utrecht-form-field-error-message-font-family: Fira Sans, Arial, Verdana, sans-serif;
996
+ $utrecht-form-field-error-message-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
985
997
  $utrecht-form-field-error-message-color: #d52b1e;
986
998
  $utrecht-form-field-error-message-icon-margin-inline-end: 0.5rem;
987
999
  $utrecht-form-field-error-message-icon-size: 24px;
988
1000
  $utrecht-form-field-label-line-height: 150%;
989
1001
  $utrecht-form-field-label-font-weight: 700;
990
1002
  $utrecht-form-field-label-font-size: 1.25rem;
991
- $utrecht-form-field-label-font-family: Fira Sans, Arial, Verdana, sans-serif;
1003
+ $utrecht-form-field-label-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
992
1004
  $utrecht-form-field-label-color: #0F172A;
993
1005
  $utrecht-form-label-font-weight: 700;
994
1006
  $utrecht-form-label-font-size: 1.25rem;
@@ -998,35 +1010,35 @@ $utrecht-heading-5-margin-block-end: 0;
998
1010
  $utrecht-heading-5-font-size: 1.25rem;
999
1011
  $utrecht-heading-5-line-height: 125%;
1000
1012
  $utrecht-heading-5-font-weight: 700;
1001
- $utrecht-heading-5-font-family: Fira Sans, Arial, Verdana, sans-serif;
1013
+ $utrecht-heading-5-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
1002
1014
  $utrecht-heading-5-color: #154273;
1003
1015
  $utrecht-heading-4-margin-block-start: 0;
1004
1016
  $utrecht-heading-4-margin-block-end: 0;
1005
1017
  $utrecht-heading-4-font-size: 1.5rem;
1006
1018
  $utrecht-heading-4-line-height: 125%;
1007
1019
  $utrecht-heading-4-font-weight: 700;
1008
- $utrecht-heading-4-font-family: Fira Sans, Arial, Verdana, sans-serif;
1020
+ $utrecht-heading-4-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
1009
1021
  $utrecht-heading-4-color: #154273;
1010
1022
  $utrecht-heading-3-margin-block-start: 0;
1011
1023
  $utrecht-heading-3-margin-block-end: 0;
1012
1024
  $utrecht-heading-3-font-size: 1.875rem;
1013
1025
  $utrecht-heading-3-line-height: 125%;
1014
1026
  $utrecht-heading-3-font-weight: 700;
1015
- $utrecht-heading-3-font-family: Fira Sans, Arial, Verdana, sans-serif;
1027
+ $utrecht-heading-3-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
1016
1028
  $utrecht-heading-3-color: #154273;
1017
1029
  $utrecht-heading-2-margin-block-start: 0;
1018
1030
  $utrecht-heading-2-margin-block-end: 0;
1019
1031
  $utrecht-heading-2-font-size: 2.5rem;
1020
1032
  $utrecht-heading-2-line-height: 125%;
1021
1033
  $utrecht-heading-2-font-weight: 700;
1022
- $utrecht-heading-2-font-family: Fira Sans, Arial, Verdana, sans-serif;
1034
+ $utrecht-heading-2-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
1023
1035
  $utrecht-heading-2-color: #154273;
1024
1036
  $utrecht-heading-1-margin-block-start: 0;
1025
1037
  $utrecht-heading-1-margin-block-end: 0;
1026
1038
  $utrecht-heading-1-font-size: 3.125rem;
1027
1039
  $utrecht-heading-1-line-height: 125%;
1028
1040
  $utrecht-heading-1-font-weight: 700;
1029
- $utrecht-heading-1-font-family: Fira Sans, Arial, Verdana, sans-serif;
1041
+ $utrecht-heading-1-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
1030
1042
  $utrecht-heading-1-color: #154273;
1031
1043
  $utrecht-icon-inset-block-start: 0;
1032
1044
  $utrecht-icon-size: 24px;
@@ -1034,7 +1046,7 @@ $utrecht-icon-color: inherit;
1034
1046
  $utrecht-link-line-height: 150%;
1035
1047
  $utrecht-link-font-size: 1.25rem;
1036
1048
  $utrecht-link-font-weight: 400;
1037
- $utrecht-link-font-family: Fira Sans, Arial, Verdana, sans-serif;
1049
+ $utrecht-link-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
1038
1050
  $utrecht-link-text-underline-offset: 0.125rem;
1039
1051
  $utrecht-link-text-decoration-thickness: auto;
1040
1052
  $utrecht-link-column-gap: 0.25rem;
@@ -1063,7 +1075,7 @@ $utrecht-link-list-margin-block-start: 0;
1063
1075
  $utrecht-ordered-list-line-height: 150%;
1064
1076
  $utrecht-ordered-list-font-size: 1.25rem;
1065
1077
  $utrecht-ordered-list-font-weight: 400;
1066
- $utrecht-ordered-list-font-family: Fira Sans, Arial, Verdana, sans-serif;
1078
+ $utrecht-ordered-list-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
1067
1079
  $utrecht-ordered-list-color: #0F172A;
1068
1080
  $utrecht-ordered-list-item-margin-block-start: 0.25rem;
1069
1081
  $utrecht-ordered-list-item-margin-block-end: 0.25rem;
@@ -1081,12 +1093,12 @@ $utrecht-paragraph-margin-block-end: 0;
1081
1093
  $utrecht-paragraph-line-height: 150%;
1082
1094
  $utrecht-paragraph-font-weight: 400;
1083
1095
  $utrecht-paragraph-font-size: 1.25rem;
1084
- $utrecht-paragraph-font-family: Fira Sans, Arial, Verdana, sans-serif;
1096
+ $utrecht-paragraph-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
1085
1097
  $utrecht-paragraph-color: #0F172A;
1086
1098
  $utrecht-pre-heading-font-size: 1rem;
1087
1099
  $utrecht-pre-heading-line-height: 125%;
1088
1100
  $utrecht-pre-heading-font-weight: 700;
1089
- $utrecht-pre-heading-font-family: Fira Sans, Arial, Verdana, sans-serif;
1101
+ $utrecht-pre-heading-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
1090
1102
  $utrecht-pre-heading-color: #0F172A;
1091
1103
  $utrecht-radio-button-border-width: 1px;
1092
1104
  $utrecht-radio-button-border-radius: 999px;
@@ -1132,7 +1144,7 @@ $utrecht-select-max-inline-size: 400px;
1132
1144
  $utrecht-select-font-size: 1.25rem;
1133
1145
  $utrecht-select-line-height: 150%;
1134
1146
  $utrecht-select-font-weight: 400;
1135
- $utrecht-select-font-family: Fira Sans, Arial, Verdana, sans-serif;
1147
+ $utrecht-select-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
1136
1148
  $utrecht-select-border-width: 1px;
1137
1149
  $utrecht-select-border-bottom-width: auto;
1138
1150
  $utrecht-select-border-radius: 2.5px;
@@ -1190,7 +1202,7 @@ $utrecht-skip-link-min-inline-size: 48px;
1190
1202
  $utrecht-skip-link-min-block-size: 48px;
1191
1203
  $utrecht-skip-link-line-height: 150%;
1192
1204
  $utrecht-skip-link-font-size: 1.25rem;
1193
- $utrecht-skip-link-font-family: Fira Sans, Arial, Verdana, sans-serif;
1205
+ $utrecht-skip-link-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
1194
1206
  $utrecht-skip-link-font-weight: 700;
1195
1207
  $utrecht-table-font-size: 1.25rem;
1196
1208
  $utrecht-table-container-box-inline-start-shadow-color: #0000001a;
@@ -1204,7 +1216,7 @@ $utrecht-table-container-box-inline-end-shadow-blur: 48px;
1204
1216
  $utrecht-table-container-box-inline-end-shadow-y: 16px;
1205
1217
  $utrecht-table-container-box-inline-end-shadow-x: 0;
1206
1218
  $utrecht-table-footer-cell-line-height: 150%;
1207
- $utrecht-table-footer-cell-font-family: Fira Sans, Arial, Verdana, sans-serif;
1219
+ $utrecht-table-footer-cell-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
1208
1220
  $utrecht-table-footer-cell-color: #0F172A;
1209
1221
  $utrecht-table-footer-cell-font-size: 1.25rem;
1210
1222
  $utrecht-table-footer-cell-font-weight: 700;
@@ -1220,7 +1232,7 @@ $utrecht-table-header-border-block-end-width: 2px;
1220
1232
  $utrecht-table-data-cell-font-size: 1.25rem;
1221
1233
  $utrecht-table-data-cell-line-height: 150%;
1222
1234
  $utrecht-table-data-cell-font-weight: 400;
1223
- $utrecht-table-data-cell-font-family: Fira Sans, Arial, Verdana, sans-serif;
1235
+ $utrecht-table-data-cell-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
1224
1236
  $utrecht-table-data-cell-color: #0F172A;
1225
1237
  $utrecht-table-cell-line-height: 150%;
1226
1238
  $utrecht-table-cell-padding-inline-start: 1rem;
@@ -1229,19 +1241,19 @@ $utrecht-table-cell-padding-block-start: 0.75rem;
1229
1241
  $utrecht-table-cell-padding-block-end: 0.75rem;
1230
1242
  $utrecht-table-caption-font-size: 1.875rem;
1231
1243
  $utrecht-table-caption-font-weight: 700;
1232
- $utrecht-table-caption-font-family: Fira Sans, Arial, Verdana, sans-serif;
1244
+ $utrecht-table-caption-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
1233
1245
  $utrecht-table-caption-color: #0F172A;
1234
1246
  $utrecht-table-caption-margin-block-end: 1.5rem;
1235
1247
  $utrecht-table-caption-line-height: 125%;
1236
1248
  $utrecht-table-header-cell-font-size: 1.25rem;
1237
1249
  $utrecht-table-header-cell-font-weight: 700;
1238
- $utrecht-table-header-cell-font-family: Fira Sans, Arial, Verdana, sans-serif;
1250
+ $utrecht-table-header-cell-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
1239
1251
  $utrecht-table-header-cell-color: #0F172A;
1240
1252
  $utrecht-table-header-cell-line-height: 150%;
1241
1253
  $utrecht-textarea-font-size: 1.25rem;
1242
1254
  $utrecht-textarea-line-height: 150%;
1243
1255
  $utrecht-textarea-font-weight: 400;
1244
- $utrecht-textarea-font-family: Fira Sans, Arial, Verdana, sans-serif;
1256
+ $utrecht-textarea-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
1245
1257
  $utrecht-textarea-border-width: 1px;
1246
1258
  $utrecht-textarea-border-bottom-width: 1px;
1247
1259
  $utrecht-textarea-border-radius: 2.5px;
@@ -1304,7 +1316,7 @@ $utrecht-textbox-max-inline-size: 400px;
1304
1316
  $utrecht-textbox-line-height: 150%;
1305
1317
  $utrecht-textbox-font-weight: 400;
1306
1318
  $utrecht-textbox-font-size: 1.25rem;
1307
- $utrecht-textbox-font-family: Fira Sans, Arial, Verdana, sans-serif;
1319
+ $utrecht-textbox-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
1308
1320
  $utrecht-textbox-border-radius: 2.5px;
1309
1321
  $utrecht-unordered-list-marker-border-color: #0F172A;
1310
1322
  $utrecht-unordered-list-marker-color: #0F172A;
@@ -1314,8 +1326,12 @@ $utrecht-unordered-list-item-padding-inline-start: 0.5rem;
1314
1326
  $utrecht-unordered-list-line-height: 150%;
1315
1327
  $utrecht-unordered-list-font-size: 1.25rem;
1316
1328
  $utrecht-unordered-list-font-weight: 400;
1317
- $utrecht-unordered-list-font-family: Fira Sans, Arial, Verdana, sans-serif;
1329
+ $utrecht-unordered-list-font-family: RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif;
1318
1330
  $utrecht-unordered-list-color: #0F172A;
1319
1331
  $utrecht-unordered-list-margin-block-start: 0.25rem;
1320
1332
  $utrecht-unordered-list-margin-block-end: 0.25rem;
1321
1333
  $utrecht-unordered-list-padding-inline-start: 1.5rem;
1334
+ $utrecht-column-layout-gap: 0.75rem;
1335
+ $utrecht-column-layout-column-width: 400px;
1336
+ $utrecht-column-layout-column-rule-width: 0px;
1337
+ $utrecht-column-layout-column-rule-color: transparent;