@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/index.tokens.json CHANGED
@@ -1,11 +1,17 @@
1
1
  {
2
2
  "utrecht": {
3
+ "column-layout": {
4
+ "column-rule-color": "transparent",
5
+ "column-rule-width": "0px",
6
+ "column-width": "400px",
7
+ "gap": "0.75rem"
8
+ },
3
9
  "unordered-list": {
4
10
  "padding-inline-start": "1.5rem",
5
11
  "margin-block-end": "0.25rem",
6
12
  "margin-block-start": "0.25rem",
7
13
  "color": "#0F172A",
8
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
14
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
9
15
  "font-weight": 400,
10
16
  "font-size": "1.25rem",
11
17
  "line-height": "150%",
@@ -21,7 +27,7 @@
21
27
  },
22
28
  "textbox": {
23
29
  "border-radius": "2.5px",
24
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
30
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
25
31
  "font-size": "1.25rem",
26
32
  "font-weight": 400,
27
33
  "line-height": "150%",
@@ -110,7 +116,7 @@
110
116
  "border-radius": "2.5px",
111
117
  "border-bottom-width": "1px",
112
118
  "border-width": "1px",
113
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
119
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
114
120
  "font-weight": 400,
115
121
  "line-height": "150%",
116
122
  "font-size": "1.25rem"
@@ -119,7 +125,7 @@
119
125
  "header-cell": {
120
126
  "line-height": "150%",
121
127
  "color": "#0F172A",
122
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
128
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
123
129
  "font-weight": 700,
124
130
  "font-size": "1.25rem"
125
131
  },
@@ -127,7 +133,7 @@
127
133
  "line-height": "125%",
128
134
  "margin-block-end": "1.5rem",
129
135
  "color": "#0F172A",
130
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
136
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
131
137
  "font-weight": 700,
132
138
  "font-size": "1.875rem"
133
139
  },
@@ -140,7 +146,7 @@
140
146
  },
141
147
  "data-cell": {
142
148
  "color": "#0F172A",
143
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
149
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
144
150
  "font-weight": 400,
145
151
  "line-height": "150%",
146
152
  "font-size": "1.25rem"
@@ -164,7 +170,7 @@
164
170
  "font-weight": 700,
165
171
  "font-size": "1.25rem",
166
172
  "color": "#0F172A",
167
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
173
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
168
174
  "line-height": "150%"
169
175
  },
170
176
  "container": {
@@ -187,7 +193,7 @@
187
193
  },
188
194
  "skip-link": {
189
195
  "font-weight": 700,
190
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
196
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
191
197
  "font-size": "1.25rem",
192
198
  "line-height": "150%",
193
199
  "min-block-size": "48px",
@@ -265,7 +271,7 @@
265
271
  "border-radius": "2.5px",
266
272
  "border-bottom-width": "auto",
267
273
  "border-width": "1px",
268
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
274
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
269
275
  "font-weight": 400,
270
276
  "line-height": "150%",
271
277
  "font-size": "1.25rem",
@@ -337,14 +343,14 @@
337
343
  },
338
344
  "pre-heading": {
339
345
  "color": "#0F172A",
340
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
346
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
341
347
  "font-weight": 700,
342
348
  "line-height": "125%",
343
349
  "font-size": "1rem"
344
350
  },
345
351
  "paragraph": {
346
352
  "color": "#0F172A",
347
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
353
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
348
354
  "font-size": "1.25rem",
349
355
  "font-weight": 400,
350
356
  "line-height": "150%",
@@ -368,7 +374,7 @@
368
374
  "margin-block-start": "0.25rem"
369
375
  },
370
376
  "color": "#0F172A",
371
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
377
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
372
378
  "font-weight": 400,
373
379
  "font-size": "1.25rem",
374
380
  "line-height": "150%"
@@ -415,7 +421,7 @@
415
421
  "column-gap": "0.25rem",
416
422
  "text-decoration-thickness": "auto",
417
423
  "text-underline-offset": "0.125rem",
418
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
424
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
419
425
  "font-weight": 400,
420
426
  "font-size": "1.25rem",
421
427
  "line-height": "150%"
@@ -427,7 +433,7 @@
427
433
  },
428
434
  "heading-1": {
429
435
  "color": "#154273",
430
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
436
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
431
437
  "font-weight": 700,
432
438
  "line-height": "125%",
433
439
  "font-size": "3.125rem",
@@ -436,7 +442,7 @@
436
442
  },
437
443
  "heading-2": {
438
444
  "color": "#154273",
439
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
445
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
440
446
  "font-weight": 700,
441
447
  "line-height": "125%",
442
448
  "font-size": "2.5rem",
@@ -445,7 +451,7 @@
445
451
  },
446
452
  "heading-3": {
447
453
  "color": "#154273",
448
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
454
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
449
455
  "font-weight": 700,
450
456
  "line-height": "125%",
451
457
  "font-size": "1.875rem",
@@ -454,7 +460,7 @@
454
460
  },
455
461
  "heading-4": {
456
462
  "color": "#154273",
457
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
463
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
458
464
  "font-weight": 700,
459
465
  "line-height": "125%",
460
466
  "font-size": "1.5rem",
@@ -463,7 +469,7 @@
463
469
  },
464
470
  "heading-5": {
465
471
  "color": "#154273",
466
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
472
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
467
473
  "font-weight": 700,
468
474
  "line-height": "125%",
469
475
  "font-size": "1.25rem",
@@ -477,7 +483,7 @@
477
483
  },
478
484
  "form-field-label": {
479
485
  "color": "#0F172A",
480
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
486
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
481
487
  "font-size": "1.25rem",
482
488
  "font-weight": 700,
483
489
  "line-height": "150%"
@@ -488,7 +494,7 @@
488
494
  "margin-inline-end": "0.5rem"
489
495
  },
490
496
  "color": "#d52b1e",
491
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
497
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
492
498
  "font-size": "1.25rem",
493
499
  "font-weight": 400,
494
500
  "margin-block-end": "0.5rem",
@@ -496,7 +502,7 @@
496
502
  },
497
503
  "form-field-description": {
498
504
  "color": "#334155",
499
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
505
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
500
506
  "font-size": "1.25rem",
501
507
  "line-height": "150%",
502
508
  "margin-block-start": "-0.5rem",
@@ -547,7 +553,7 @@
547
553
  "form-fieldset": {
548
554
  "legend": {
549
555
  "color": "#0F172A",
550
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
556
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
551
557
  "font-size": "1.25rem",
552
558
  "font-weight": 700,
553
559
  "line-height": "150%",
@@ -575,7 +581,7 @@
575
581
  "font-weight": 700,
576
582
  "border-width": "0px",
577
583
  "border-radius": "999px",
578
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
584
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
579
585
  "background-color": "#154273",
580
586
  "border-color": "transparent",
581
587
  "color": "#fff",
@@ -693,7 +699,7 @@
693
699
  "gap": "0.5rem",
694
700
  "size": "24px"
695
701
  },
696
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
702
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
697
703
  "font-size": "1.25rem",
698
704
  "font-weight": 700,
699
705
  "line-height": "150%",
@@ -867,45 +873,53 @@
867
873
  "inset-block-start": 0
868
874
  },
869
875
  "margin-inline": "0.5rem",
870
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
876
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
871
877
  "font-weight": 400
872
878
  },
873
879
  "blockquote": {
874
- "caption": {
880
+ "background-color": "transparent",
881
+ "border-inline-start-width": 0,
882
+ "border-color": "transparent",
883
+ "border-radius": 0,
884
+ "border-width": 0,
885
+ "color": "#154273",
886
+ "font-size": "1.25rem",
887
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
888
+ "padding-block-end": "2rem",
889
+ "padding-block-start": "2rem",
890
+ "padding-inline-end": "2rem",
891
+ "padding-inline-start": "2rem",
892
+ "row-gap": "0.75rem",
893
+ "attribution": {
894
+ "color": "#154273",
895
+ "font-size": "1.25rem"
896
+ },
897
+ "content": {
898
+ "color": "#154273",
875
899
  "font-size": "1.25rem",
876
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
900
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
877
901
  "line-height": "150%",
878
- "font-weight": 400,
879
- "padding-block-start": "0.75rem",
880
- "color": "#334155"
902
+ "font-weight": 400
881
903
  },
882
- "content": {
883
- "font-family": "RijksoverheidSerifWeb, 'Times New Roman', serif",
904
+ "caption": {
905
+ "font-size": "1.25rem",
906
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
884
907
  "line-height": "150%",
885
908
  "font-weight": 400,
886
- "font-size": "1.5rem",
887
- "color": "#0F172A"
909
+ "padding-block-start": "0.75rem",
910
+ "color": "#154273"
888
911
  },
889
912
  "margin-block-end": 0,
890
913
  "margin-block-start": 0,
891
914
  "margin-inline-end": 0,
892
915
  "margin-inline-start": 0,
893
- "padding-block-end": "2rem",
894
- "padding-block-start": "2rem",
895
- "padding-inline-end": "2rem",
896
- "padding-inline-start": "2rem",
897
- "row-gap": "0.75rem",
898
- "background-color": "transparent",
899
- "border-color": "#154273",
900
916
  "border-block-start-width": 0,
901
917
  "border-block-end-width": 0,
902
- "border-inline-start-width": 0,
903
918
  "border-inline-end-width": 0,
904
919
  "border-start-start-radius": 0,
905
920
  "border-start-end-radius": 0,
906
921
  "border-end-start-radius": 0,
907
922
  "border-end-end-radius": 0,
908
- "border-width": "2px",
909
923
  "blue-corner-border-variation": {
910
924
  "border-color": "#154273",
911
925
  "border-block-end-width": "2px",
@@ -938,7 +952,7 @@
938
952
  },
939
953
  "alert": {
940
954
  "heading": {
941
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
955
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
942
956
  "font-weight": 700,
943
957
  "line-height": "150%",
944
958
  "font-size": "1.25rem"
@@ -1035,7 +1049,7 @@
1035
1049
  "document": {
1036
1050
  "background-color": "#fff",
1037
1051
  "color": "#0F172A",
1038
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1052
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
1039
1053
  "font-size": "1.25rem",
1040
1054
  "line-height": "150%",
1041
1055
  "font-weight": 400
@@ -1120,7 +1134,7 @@
1120
1134
  "margin-inline": "0.5rem"
1121
1135
  },
1122
1136
  "font-size": "1.25rem",
1123
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1137
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
1124
1138
  "font-weight": 400,
1125
1139
  "current": {
1126
1140
  "font-weight": 700,
@@ -1173,7 +1187,7 @@
1173
1187
  "row-gap": "0.25rem"
1174
1188
  },
1175
1189
  "label": {
1176
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1190
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
1177
1191
  "font-size": "1.875rem",
1178
1192
  "font-weight": 700,
1179
1193
  "line-height": "150%"
@@ -1265,7 +1279,7 @@
1265
1279
  "row-gap": "0.5rem"
1266
1280
  },
1267
1281
  "label": {
1268
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1282
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
1269
1283
  "font-size": "1.25rem",
1270
1284
  "font-weight": 700,
1271
1285
  "line-height": "150%"
@@ -1294,7 +1308,7 @@
1294
1308
  "font-size": "0.775rem"
1295
1309
  },
1296
1310
  "column-gap": "12px",
1297
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1311
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
1298
1312
  "color": "#154273"
1299
1313
  },
1300
1314
  "link-list-card": {
@@ -1319,13 +1333,13 @@
1319
1333
  "font-weight": 700,
1320
1334
  "line-height": "125%",
1321
1335
  "font-size": "1.875rem",
1322
- "font-family": "Fira Sans, Arial, Verdana, sans-serif"
1336
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif"
1323
1337
  },
1324
1338
  "sub-heading": {
1325
1339
  "font-weight": 400,
1326
1340
  "line-height": "150%",
1327
1341
  "font-size": "1.25rem",
1328
- "font-family": "Fira Sans, Arial, Verdana, sans-serif"
1342
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif"
1329
1343
  },
1330
1344
  "message": {
1331
1345
  "background-color": "#154273",
@@ -1508,9 +1522,36 @@
1508
1522
  }
1509
1523
  }
1510
1524
  },
1525
+ "keep": {
1526
+ "_comment": "⚠️ Deze tokens zijn legacy en worden vervangen door de tokenset components/blockquote.",
1527
+ "top-left": {
1528
+ "borderRadiusTopLeft": "48px",
1529
+ "borderRadiusTopRight": 0,
1530
+ "borderRadiusBottomRight": 0,
1531
+ "borderRadiusBottomLeft": 0
1532
+ },
1533
+ "top-right": {
1534
+ "borderRadiusTopRight": "48px",
1535
+ "borderRadiusTopLeft": 0,
1536
+ "borderRadiusBottomRight": 0,
1537
+ "borderRadiusBottomLeft": 0
1538
+ },
1539
+ "bottom-right": {
1540
+ "borderRadiusTopLeft": 0,
1541
+ "borderRadiusTopRight": 0,
1542
+ "borderRadiusBottomRight": "48px",
1543
+ "borderRadiusBottomLeft": 0
1544
+ },
1545
+ "bottom-left": {
1546
+ "borderRadiusTopLeft": 0,
1547
+ "borderRadiusTopRight": 0,
1548
+ "borderRadiusBottomRight": 0,
1549
+ "borderRadiusBottomLeft": "48px"
1550
+ }
1551
+ },
1511
1552
  "accordion": {
1512
1553
  "button": {
1513
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1554
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
1514
1555
  "font-size": "1.25rem",
1515
1556
  "font-weight": 400,
1516
1557
  "line-height": "150%",
@@ -1537,36 +1578,21 @@
1537
1578
  "border-radius": "0px",
1538
1579
  "color": "#0F172A"
1539
1580
  },
1540
- "keep": {
1541
- "top-left": {
1542
- "borderRadiusTopLeft": "48px",
1543
- "borderRadiusTopRight": 0,
1544
- "borderRadiusBottomRight": 0,
1545
- "borderRadiusBottomLeft": 0
1581
+ "rounded-corner": {
1582
+ "xs": {
1583
+ "border-radius": "24px"
1546
1584
  },
1547
- "top-right": {
1548
- "borderRadiusTopRight": "48px",
1549
- "borderRadiusTopLeft": 0,
1550
- "borderRadiusBottomRight": 0,
1551
- "borderRadiusBottomLeft": 0
1585
+ "md": {
1586
+ "border-radius": "48px"
1552
1587
  },
1553
- "bottom-right": {
1554
- "borderRadiusTopLeft": 0,
1555
- "borderRadiusTopRight": 0,
1556
- "borderRadiusBottomRight": "48px",
1557
- "borderRadiusBottomLeft": 0
1588
+ "xl": {
1589
+ "border-radius": "96px"
1558
1590
  },
1559
- "bottom-left": {
1560
- "borderRadiusTopLeft": 0,
1561
- "borderRadiusTopRight": 0,
1562
- "borderRadiusBottomRight": 0,
1563
- "borderRadiusBottomLeft": "48px"
1564
- }
1591
+ "border-width": "2px"
1565
1592
  },
1566
1593
  "border-radius": {
1567
1594
  "sm": "2.5px",
1568
1595
  "md": "5px",
1569
- "keep": "48px",
1570
1596
  "circle": "999px",
1571
1597
  "none": "0px"
1572
1598
  },
@@ -1578,6 +1604,8 @@
1578
1604
  "default": "#0F172A",
1579
1605
  "subdued": "#334155",
1580
1606
  "link": "#01689b",
1607
+ "on-dark-color": "#fff",
1608
+ "on-light-color": "#000",
1581
1609
  "onEmphasis": "#fff"
1582
1610
  },
1583
1611
  "border": {
@@ -1849,7 +1877,7 @@
1849
1877
  "thin": 200
1850
1878
  },
1851
1879
  "font-family": {
1852
- "primary": "Fira Sans, Arial, Verdana, sans-serif",
1880
+ "primary": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
1853
1881
  "secondary": "RijksoverheidSerifWeb, 'Times New Roman', serif"
1854
1882
  },
1855
1883
  "border-width": {
@@ -1874,7 +1902,7 @@
1874
1902
  "nl": {
1875
1903
  "skip-link": {
1876
1904
  "font-weight": 700,
1877
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1905
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
1878
1906
  "font-size": "1.25rem",
1879
1907
  "line-height": "150%",
1880
1908
  "min-block-size": "48px",
@@ -1910,7 +1938,7 @@
1910
1938
  },
1911
1939
  "paragraph": {
1912
1940
  "color": "#0F172A",
1913
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1941
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
1914
1942
  "font-size": "1.25rem",
1915
1943
  "font-weight": 400,
1916
1944
  "line-height": "150%",
@@ -1952,14 +1980,14 @@
1952
1980
  "column-gap": "0.25rem",
1953
1981
  "text-decoration-thickness": "auto",
1954
1982
  "text-underline-offset": "0.125rem",
1955
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1983
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
1956
1984
  "font-weight": 400,
1957
1985
  "font-size": "1.25rem",
1958
1986
  "line-height": "150%"
1959
1987
  },
1960
1988
  "heading-level-1": {
1961
1989
  "color": "#154273",
1962
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1990
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
1963
1991
  "font-weight": 700,
1964
1992
  "line-height": "125%",
1965
1993
  "font-size": "3.125rem",
@@ -1968,7 +1996,7 @@
1968
1996
  },
1969
1997
  "heading-level-2": {
1970
1998
  "color": "#154273",
1971
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1999
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
1972
2000
  "font-weight": 700,
1973
2001
  "line-height": "125%",
1974
2002
  "font-size": "2.5rem",
@@ -1977,7 +2005,7 @@
1977
2005
  },
1978
2006
  "heading-level-3": {
1979
2007
  "color": "#154273",
1980
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
2008
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
1981
2009
  "font-weight": 700,
1982
2010
  "line-height": "125%",
1983
2011
  "font-size": "1.875rem",
@@ -1986,7 +2014,7 @@
1986
2014
  },
1987
2015
  "heading-level-4": {
1988
2016
  "color": "#154273",
1989
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
2017
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
1990
2018
  "font-weight": 700,
1991
2019
  "line-height": "125%",
1992
2020
  "font-size": "1.5rem",
@@ -1995,7 +2023,7 @@
1995
2023
  },
1996
2024
  "heading-level-5": {
1997
2025
  "color": "#154273",
1998
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
2026
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
1999
2027
  "font-weight": 700,
2000
2028
  "line-height": "125%",
2001
2029
  "font-size": "1.25rem",
@@ -2010,7 +2038,7 @@
2010
2038
  "font-weight": 700,
2011
2039
  "border-width": "0px",
2012
2040
  "border-radius": "999px",
2013
- "font-family": "Fira Sans, Arial, Verdana, sans-serif",
2041
+ "font-family": "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif",
2014
2042
  "background-color": "#154273",
2015
2043
  "border-color": "transparent",
2016
2044
  "color": "#fff",