@rijkshuisstijl-community/design-tokens 5.0.0 → 7.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 (105) hide show
  1. package/CHANGELOG.md +45 -0
  2. package/dist/_variables.scss +626 -673
  3. package/dist/index.css +626 -673
  4. package/dist/index.d.ts +708 -755
  5. package/dist/index.js +710 -757
  6. package/dist/index.json +709 -756
  7. package/dist/index.tokens.json +1745 -1802
  8. package/dist/koop/_variables.scss +61 -123
  9. package/dist/koop/index.css +61 -123
  10. package/dist/koop/index.d.ts +59 -121
  11. package/dist/koop/index.js +61 -123
  12. package/dist/koop/index.json +60 -122
  13. package/dist/koop/index.tokens.json +83 -165
  14. package/dist/koop/root.css +61 -123
  15. package/dist/koop/tokens.d.ts +82 -164
  16. package/dist/koop/tokens.js +3879 -5309
  17. package/dist/root.css +626 -673
  18. package/dist/tokens.d.ts +1639 -1696
  19. package/dist/tokens.js +25088 -26173
  20. package/dist/uitvoerend-groen/_variables.scss +51 -113
  21. package/dist/uitvoerend-groen/index.css +51 -113
  22. package/dist/uitvoerend-groen/index.d.ts +49 -111
  23. package/dist/uitvoerend-groen/index.js +51 -113
  24. package/dist/uitvoerend-groen/index.json +50 -112
  25. package/dist/uitvoerend-groen/index.tokens.json +71 -153
  26. package/dist/uitvoerend-groen/root.css +51 -113
  27. package/dist/uitvoerend-groen/tokens.d.ts +70 -152
  28. package/dist/uitvoerend-groen/tokens.js +2417 -3847
  29. package/dist/uitvoerend-hemelblauw/_variables.scss +51 -113
  30. package/dist/uitvoerend-hemelblauw/index.css +51 -113
  31. package/dist/uitvoerend-hemelblauw/index.d.ts +49 -111
  32. package/dist/uitvoerend-hemelblauw/index.js +51 -113
  33. package/dist/uitvoerend-hemelblauw/index.json +50 -112
  34. package/dist/uitvoerend-hemelblauw/index.tokens.json +71 -153
  35. package/dist/uitvoerend-hemelblauw/root.css +51 -113
  36. package/dist/uitvoerend-hemelblauw/tokens.d.ts +70 -152
  37. package/dist/uitvoerend-hemelblauw/tokens.js +2417 -3847
  38. package/dist/uitvoerend-mintgroen/_variables.scss +51 -113
  39. package/dist/uitvoerend-mintgroen/index.css +51 -113
  40. package/dist/uitvoerend-mintgroen/index.d.ts +49 -111
  41. package/dist/uitvoerend-mintgroen/index.js +51 -113
  42. package/dist/uitvoerend-mintgroen/index.json +50 -112
  43. package/dist/uitvoerend-mintgroen/index.tokens.json +71 -153
  44. package/dist/uitvoerend-mintgroen/root.css +51 -113
  45. package/dist/uitvoerend-mintgroen/tokens.d.ts +70 -152
  46. package/dist/uitvoerend-mintgroen/tokens.js +2417 -3847
  47. package/dist/uitvoerend-oranje/_variables.scss +74 -136
  48. package/dist/uitvoerend-oranje/index.css +74 -136
  49. package/dist/uitvoerend-oranje/index.d.ts +72 -134
  50. package/dist/uitvoerend-oranje/index.js +74 -136
  51. package/dist/uitvoerend-oranje/index.json +73 -135
  52. package/dist/uitvoerend-oranje/index.tokens.json +105 -187
  53. package/dist/uitvoerend-oranje/root.css +74 -136
  54. package/dist/uitvoerend-oranje/tokens.d.ts +101 -183
  55. package/dist/uitvoerend-oranje/tokens.js +3100 -4530
  56. package/dist/uitvoerend-paars/_variables.scss +51 -113
  57. package/dist/uitvoerend-paars/index.css +51 -113
  58. package/dist/uitvoerend-paars/index.d.ts +49 -111
  59. package/dist/uitvoerend-paars/index.js +51 -113
  60. package/dist/uitvoerend-paars/index.json +50 -112
  61. package/dist/uitvoerend-paars/index.tokens.json +71 -153
  62. package/dist/uitvoerend-paars/root.css +51 -113
  63. package/dist/uitvoerend-paars/tokens.d.ts +70 -152
  64. package/dist/uitvoerend-paars/tokens.js +2417 -3847
  65. package/dist/uitvoerend-violet/_variables.scss +51 -113
  66. package/dist/uitvoerend-violet/index.css +51 -113
  67. package/dist/uitvoerend-violet/index.d.ts +49 -111
  68. package/dist/uitvoerend-violet/index.js +51 -113
  69. package/dist/uitvoerend-violet/index.json +50 -112
  70. package/dist/uitvoerend-violet/index.tokens.json +71 -153
  71. package/dist/uitvoerend-violet/root.css +51 -113
  72. package/dist/uitvoerend-violet/tokens.d.ts +70 -152
  73. package/dist/uitvoerend-violet/tokens.js +2417 -3847
  74. package/dist/uitvoerend-violet-oud/_variables.scss +106 -168
  75. package/dist/uitvoerend-violet-oud/index.css +106 -168
  76. package/dist/uitvoerend-violet-oud/index.d.ts +104 -166
  77. package/dist/uitvoerend-violet-oud/index.js +106 -168
  78. package/dist/uitvoerend-violet-oud/index.json +105 -167
  79. package/dist/uitvoerend-violet-oud/index.tokens.json +138 -220
  80. package/dist/uitvoerend-violet-oud/root.css +106 -168
  81. package/dist/uitvoerend-violet-oud/tokens.d.ts +136 -218
  82. package/dist/uitvoerend-violet-oud/tokens.js +3558 -4988
  83. package/dist/wetgevend/_variables.scss +51 -113
  84. package/dist/wetgevend/index.css +51 -113
  85. package/dist/wetgevend/index.d.ts +49 -111
  86. package/dist/wetgevend/index.js +51 -113
  87. package/dist/wetgevend/index.json +50 -112
  88. package/dist/wetgevend/index.tokens.json +71 -153
  89. package/dist/wetgevend/root.css +51 -113
  90. package/dist/wetgevend/tokens.d.ts +70 -152
  91. package/dist/wetgevend/tokens.js +2417 -3847
  92. package/figma/figma.tokens.json +953 -906
  93. package/package.json +2 -2
  94. package/src/generated/base.tokens.json +4984 -5182
  95. package/src/generated/koop/tokens.json +261 -529
  96. package/src/generated/themes.json +2258 -4670
  97. package/src/generated/uitvoerend-groen/tokens.json +217 -485
  98. package/src/generated/uitvoerend-hemelblauw/tokens.json +217 -485
  99. package/src/generated/uitvoerend-mintgroen/tokens.json +217 -485
  100. package/src/generated/uitvoerend-oranje/tokens.json +304 -572
  101. package/src/generated/uitvoerend-paars/tokens.json +217 -485
  102. package/src/generated/uitvoerend-violet/tokens.json +217 -485
  103. package/src/generated/uitvoerend-violet-oud/tokens.json +482 -750
  104. package/src/generated/wetgevend/tokens.json +217 -485
  105. package/token-transformer.mjs +1 -3
@@ -247,19 +247,6 @@
247
247
  "utrechtFormLabelRadioFontWeight": 400,
248
248
  "utrechtFormLabelCheckedFontWeight": 400,
249
249
  "utrechtFormLabelDisabledColor": "#94A3B8",
250
- "utrechtNumberBadgeLineHeight": "125%",
251
- "utrechtNumberBadgeBackgroundColor": "#39870c",
252
- "utrechtNumberBadgeBorderColor": "transparent",
253
- "utrechtNumberBadgeBorderRadius": "999px",
254
- "utrechtNumberBadgeBorderWidth": "0px",
255
- "utrechtNumberBadgeColor": "#fff",
256
- "utrechtNumberBadgeFontFamily": "'Fira Sans', Arial, Verdana, sans-serif",
257
- "utrechtNumberBadgeFontSize": "1.25rem",
258
- "utrechtNumberBadgeFontWeight": 700,
259
- "utrechtNumberBadgeMinBlockSize": "24px",
260
- "utrechtNumberBadgeMinInlineSize": "24px",
261
- "utrechtNumberBadgePaddingBlock": "0.125rem",
262
- "utrechtNumberBadgePaddingInline": "0.5rem",
263
250
  "utrechtFigureCaptionBorderColor": "#CBD5E1",
264
251
  "utrechtFigureCaptionBorderWidth": "4px",
265
252
  "utrechtFigureCaptionPaddingBlockEnd": "0.5rem",
@@ -272,6 +259,18 @@
272
259
  "utrechtFigureImgBorderEndStartRadius": 0,
273
260
  "utrechtFigureImgBorderStartEndRadius": 0,
274
261
  "utrechtFigureImgBorderStartStartRadius": 0,
262
+ "utrechtNumberBadgeBackgroundColor": "#39870c",
263
+ "utrechtNumberBadgeBorderColor": "transparent",
264
+ "utrechtNumberBadgeBorderRadius": "999px",
265
+ "utrechtNumberBadgeBorderWidth": "0px",
266
+ "utrechtNumberBadgeColor": "#fff",
267
+ "utrechtNumberBadgeFontFamily": "'Fira Sans', Arial, Verdana, sans-serif",
268
+ "utrechtNumberBadgeFontSize": "1.25rem",
269
+ "utrechtNumberBadgeFontWeight": 700,
270
+ "utrechtNumberBadgeMinBlockSize": "24px",
271
+ "utrechtNumberBadgeMinInlineSize": "24px",
272
+ "utrechtNumberBadgePaddingBlock": "0.125rem",
273
+ "utrechtNumberBadgePaddingInline": "0.5rem",
275
274
  "utrechtBlockquoteBorderBlockEndWidth": 0,
276
275
  "utrechtBlockquoteBorderBlockStartWidth": 0,
277
276
  "utrechtBlockquoteBorderEndEndRadius": 0,
@@ -327,13 +326,6 @@
327
326
  "utrechtBlockquoteRowGap": "0.75rem",
328
327
  "utrechtBlockquoteAttributionColor": "#154273",
329
328
  "utrechtBlockquoteAttributionFontSize": "1.25rem",
330
- "utrechtAlertHeadingFontFamily": "'Fira Sans', Arial, Verdana, sans-serif",
331
- "utrechtAlertHeadingFontSize": "1.25rem",
332
- "utrechtAlertHeadingFontWeight": 700,
333
- "utrechtAlertHeadingLineHeight": "150%",
334
- "utrechtAlertMessageColumnGap": "0.5rem",
335
- "utrechtAlertMessageLineHeight": "150%",
336
- "utrechtAlertMessageRowGap": "0rem",
337
329
  "utrechtAlertBackgroundColor": "#d9ebf7",
338
330
  "utrechtAlertBorderColor": "transparent",
339
331
  "utrechtAlertBorderRadius": "5px",
@@ -353,6 +345,7 @@
353
345
  "utrechtAlertInfoBackgroundColor": "#d9ebf7",
354
346
  "utrechtAlertInfoBorderColor": "transparent",
355
347
  "utrechtAlertInfoColor": "#000",
348
+ "utrechtAlertMessageRowGap": "0rem",
356
349
  "utrechtAlertOkBackgroundColor": "#e1eddb",
357
350
  "utrechtAlertOkBorderColor": "transparent",
358
351
  "utrechtAlertOkColor": "#000",
@@ -366,13 +359,15 @@
366
359
  "utrechtAlertIconInfoColor": "#007bc7",
367
360
  "utrechtAlertIconOkColor": "#39870c",
368
361
  "utrechtAlertIconWarningColor": "#ffb612",
369
- "utrechtAccordionButtonActiveRowGap": 0,
370
- "utrechtAccordionButtonActiveBackgroundColor": "#F1F5F9",
371
- "utrechtAccordionButtonActiveBorderColor": "transparent",
372
- "utrechtAccordionButtonActiveColor": "#0F172A",
373
- "utrechtAccordionButtonFocusBackgroundColor": "#e1eddb",
374
- "utrechtAccordionButtonFocusBorderColor": "#39870c",
375
- "utrechtAccordionButtonFocusColor": "#0F172A",
362
+ "utrechtAccordionMarginBlockEnd": "0rem",
363
+ "utrechtAccordionMarginBlockStart": "0rem",
364
+ "utrechtAccordionRowGap": "0rem",
365
+ "utrechtAccordionPanelBorderColor": "transparent",
366
+ "utrechtAccordionPanelBorderWidth": "1px",
367
+ "utrechtAccordionPanelPaddingBlockEnd": "1.5rem",
368
+ "utrechtAccordionPanelPaddingBlockStart": "1rem",
369
+ "utrechtAccordionPanelPaddingInlineEnd": "1rem",
370
+ "utrechtAccordionPanelPaddingInlineStart": "1rem",
376
371
  "utrechtAccordionButtonBackgroundColor": "#fff",
377
372
  "utrechtAccordionButtonBorderColor": "transparent",
378
373
  "utrechtAccordionButtonBorderRadius": "0px",
@@ -384,6 +379,9 @@
384
379
  "utrechtAccordionButtonPaddingInlineEnd": "1rem",
385
380
  "utrechtAccordionButtonPaddingInlineStart": "1rem",
386
381
  "utrechtAccordionButtonIconSize": "24px",
382
+ "utrechtAccordionButtonActiveBackgroundColor": "#F1F5F9",
383
+ "utrechtAccordionButtonActiveBorderColor": "transparent",
384
+ "utrechtAccordionButtonActiveColor": "#0F172A",
387
385
  "utrechtAccordionButtonHoverBackgroundColor": "#F8FAFC",
388
386
  "utrechtAccordionButtonHoverBorderColor": "transparent",
389
387
  "utrechtAccordionButtonHoverColor": "#0F172A",
@@ -391,49 +389,11 @@
391
389
  "utrechtAccordionButtonFocusVisibleBorderColor": "transparent",
392
390
  "utrechtAccordionButtonFocusVisibleBorderWidth": "1px",
393
391
  "utrechtAccordionButtonFocusVisibleColor": "#0F172A",
394
- "utrechtAccordionMarginBlockEnd": "0rem",
395
- "utrechtAccordionMarginBlockStart": "0rem",
396
- "utrechtAccordionRowGap": "0rem",
397
- "utrechtAccordionPanelBorderColor": "transparent",
398
- "utrechtAccordionPanelBorderWidth": "1px",
399
- "utrechtAccordionPanelPaddingBlockEnd": "1.5rem",
400
- "utrechtAccordionPanelPaddingBlockStart": "1rem",
401
- "utrechtAccordionPanelPaddingInlineEnd": "1rem",
402
- "utrechtAccordionPanelPaddingInlineStart": "1rem",
403
392
  "utrechtAccordionSectionBorderColor": "#94A3B8",
404
393
  "utrechtAccordionSectionHoverBorderColor": "#94A3B8",
405
394
  "utrechtAccordionSectionBorderWidth": "1px",
406
395
  "utrechtAccordionSectionMarginBlockEnd": "0rem",
407
396
  "utrechtAccordionSectionMarginBlockStart": "0rem",
408
- "utrechtSkipLinkFocusTextDecoration": "None",
409
- "utrechtSkipLinkFocusBorderColor": "#39870c",
410
- "utrechtSkipLinkFocusBorderWidth": "2px",
411
- "utrechtSkipLinkFocusBorderStyle": "solid",
412
- "utrechtSkipLinkFocusBackgroundColor": "#fff",
413
- "utrechtSkipLinkFocusColor": "#01689b",
414
- "utrechtSkipLinkBorderColor": "transparent",
415
- "utrechtSkipLinkBoxBlockEndShadowColor": "#0000001a",
416
- "utrechtSkipLinkBoxBlockEndShadowBlurRadius": "48px",
417
- "utrechtSkipLinkBoxBlockEndShadowOffsetX": 0,
418
- "utrechtSkipLinkBoxBlockEndShadowOffsetY": "16px",
419
- "utrechtSkipLinkBoxBlockEndShadowSpreadRadius": 0,
420
- "utrechtSkipLinkFocusVisibleOutlineColor": "#000",
421
- "utrechtSkipLinkFocusVisibleTextDecoration": "underline",
422
- "utrechtSkipLinkFontFamily": "'Fira Sans', Arial, Verdana, sans-serif",
423
- "utrechtSkipLinkFontWeight": 700,
424
- "utrechtSkipLinkLineHeight": "150%",
425
- "utrechtSkipLinkBorderWidth": "2px",
426
- "utrechtSkipLinkTextUnderlineOffset": "0.125rem",
427
- "utrechtSkipLinkFontSize": "1.25rem",
428
- "utrechtSkipLinkBackgroundColor": "#fff",
429
- "utrechtSkipLinkColor": "#01689b",
430
- "utrechtSkipLinkMinBlockSize": "48px",
431
- "utrechtSkipLinkMinInlineSize": "48px",
432
- "utrechtSkipLinkPaddingBlockEnd": "0.75rem",
433
- "utrechtSkipLinkPaddingBlockStart": "0.75rem",
434
- "utrechtSkipLinkPaddingInlineEnd": "1rem",
435
- "utrechtSkipLinkPaddingInlineStart": "1rem",
436
- "utrechtSkipLinkTextDecoration": "underline",
437
397
  "utrechtDataBadgeBackgroundColor": "#e1eddb",
438
398
  "utrechtDataBadgeBorderRadius": "10px",
439
399
  "utrechtDataBadgeColor": "#39870c",
@@ -536,11 +496,6 @@
536
496
  "utrechtButtonSubtleActiveColor": "#225107",
537
497
  "utrechtButtonGroupMarginBlockEnd": "0rem",
538
498
  "utrechtButtonGroupMarginBlockStart": "0rem",
539
- "utrechtButtonGroupBackgroundColor": "transparent",
540
- "utrechtButtonGroupColumnGap": "0.5rem",
541
- "utrechtButtonGroupPaddingBlockEnd": "0px",
542
- "utrechtButtonGroupPaddingBlockStart": "0px",
543
- "utrechtButtonGroupRowGap": "0.5rem",
544
499
  "utrechtBreadcrumbNavFontFamily": "'Fira Sans', Arial, Verdana, sans-serif",
545
500
  "utrechtBreadcrumbNavFontSize": "1.25rem",
546
501
  "utrechtBreadcrumbNavLineHeight": "150%",
@@ -595,6 +550,11 @@
595
550
  "utrechtOrderedListItemMarginBlockEnd": "0.25rem",
596
551
  "utrechtOrderedListItemMarginBlockStart": "0.25rem",
597
552
  "utrechtOrderedListItemPaddingInlineStart": "0.5rem",
553
+ "utrechtActionGroupBackgroundColor": "transparent",
554
+ "utrechtActionGroupColumnGap": "0.5rem",
555
+ "utrechtActionGroupPaddingBlockEnd": "0rem",
556
+ "utrechtActionGroupPaddingBlockStart": "0rem",
557
+ "utrechtActionGroupRowGap": "0.5rem",
598
558
  "utrechtColumnLayoutColumnRuleColor": "transparent",
599
559
  "utrechtColumnLayoutColumnRuleWidth": "0px",
600
560
  "utrechtColumnLayoutColumnWidth": "400px",
@@ -690,6 +650,22 @@
690
650
  "utrechtFormFieldsetInvalidBorderInlineStartColor": "#d52b1e",
691
651
  "utrechtFormFieldsetInvalidPaddingInlineStart": "0rem",
692
652
  "utrechtFormFieldsetInvalidBorderInlineStartWidth": "0px",
653
+ "utrechtDrawerMaxInlineSize": "256px",
654
+ "utrechtDrawerZIndex": 1,
655
+ "utrechtDrawerBackgroundColor": "#fff",
656
+ "utrechtDrawerBorderColor": "#64748B",
657
+ "utrechtDrawerBorderWidth": "0px",
658
+ "utrechtDrawerColor": "#0F172A",
659
+ "utrechtDrawerMaxBlockSize": "240px",
660
+ "utrechtDrawerPaddingBlockStart": "1rem",
661
+ "utrechtDrawerPaddingBlockEnd": "1rem",
662
+ "utrechtDrawerPaddingInlineStart": "1rem",
663
+ "utrechtDrawerPaddingInlineEnd": "1rem",
664
+ "utrechtBackdropBackgroundColor": "#0000004d",
665
+ "utrechtBackdropColor": "#0F172A",
666
+ "utrechtBackdropOpacity": 0.8,
667
+ "utrechtBackdropFadeInAnimationDuration": "400ms",
668
+ "utrechtBackdropReducedTransparencyOpacity": 0.98,
693
669
  "utrechtArticleMaxInlineSize": "75ch",
694
670
  "utrechtDocumentBackgroundColor": "#fff",
695
671
  "utrechtDocumentColor": "#0F172A",
@@ -758,11 +734,9 @@
758
734
  "todoFigureRowGap": "0.5rem",
759
735
  "todoAccordionButtonFontFamily": "'Fira Sans', Arial, Verdana, sans-serif",
760
736
  "todoAccordionButtonFontSize": "1.25rem",
761
- "todoAccordionButtonFontWeight": 400,
762
- "todoAccordionButtonLineHeight": "150%",
737
+ "todoAccordionButtonFontWeight": 700,
738
+ "todoAccordionButtonLineHeight": "1.875rem",
763
739
  "todoLinkListLinkHoverTextDecoration": "underline",
764
- "todoSkipLinkFontWeight": 700,
765
- "nlNumberBadgeLineHeight": "125%",
766
740
  "nlNumberBadgeBackgroundColor": "#39870c",
767
741
  "nlNumberBadgeBorderColor": "transparent",
768
742
  "nlNumberBadgeBorderRadius": "999px",
@@ -775,27 +749,6 @@
775
749
  "nlNumberBadgeMinInlineSize": "24px",
776
750
  "nlNumberBadgePaddingBlock": "0.125rem",
777
751
  "nlNumberBadgePaddingInline": "0.5rem",
778
- "nlSkipLinkBorderColor": "transparent",
779
- "nlSkipLinkBorderWidth": "2px",
780
- "nlSkipLinkFontFamily": "'Fira Sans', Arial, Verdana, sans-serif",
781
- "nlSkipLinkFontWeight": 700,
782
- "nlSkipLinkPaddingBlockEnd": "0.75rem",
783
- "nlSkipLinkPaddingBlockStart": "0.75rem",
784
- "nlSkipLinkPaddingInlineEnd": "1rem",
785
- "nlSkipLinkPaddingInlineStart": "1rem",
786
- "nlSkipLinkBoxBlockEndShadowBlurRadius": "48px",
787
- "nlSkipLinkBoxBlockEndShadowColor": "#0000001a",
788
- "nlSkipLinkBoxBlockEndShadowOffsetX": 0,
789
- "nlSkipLinkBoxBlockEndShadowOffsetY": "16px",
790
- "nlSkipLinkBoxBlockEndShadowSpreadRadius": 0,
791
- "nlSkipLinkFocusBackgroundColor": "#fff",
792
- "nlSkipLinkFocusBorderColor": "#39870c",
793
- "nlSkipLinkFocusBorderStyle": "solid",
794
- "nlSkipLinkFocusBorderWidth": "2px",
795
- "nlSkipLinkFocusColor": "#0F172A",
796
- "nlSkipLinkFocusTextDecoration": "None",
797
- "nlSkipLinkFocusVisibleOutlineColor": "#000",
798
- "nlSkipLinkTextDecoration": "underline",
799
752
  "nlSkipLinkBackgroundColor": "#fff",
800
753
  "nlSkipLinkColor": "#01689b",
801
754
  "nlSkipLinkPaddingBlock": "0.75rem",
@@ -889,23 +842,6 @@
889
842
  "rhcKeepBottomLeftBorderRadiusTopRight": 0,
890
843
  "rhcKeepBottomLeftBorderRadiusBottomRight": 0,
891
844
  "rhcKeepBottomLeftBorderRadiusBottomLeft": "48px",
892
- "rhcAccordionBorderRadius": "0px",
893
- "rhcAccordionColor": "#0F172A",
894
- "rhcAccordionHeaderMargin": 0,
895
- "rhcAccordionSectionBorderBlockEndWidth": "1px",
896
- "rhcAccordionSectionBorderColor": "#94A3B8",
897
- "rhcAccordionSectionBorderWidth": "1px",
898
- "rhcAccordionButtonPaddingBlockEnd": "0.75rem",
899
- "rhcAccordionButtonPaddingBlockStart": "0.75rem",
900
- "rhcAccordionButtonPaddingInlineEnd": "1rem",
901
- "rhcAccordionButtonPaddingInlineStart": "1rem",
902
- "rhcAccordionButtonExpandedBackgroundColor": "#fff",
903
- "rhcAccordionButtonExpandedColor": "#0F172A",
904
- "rhcAccordionButtonIconMarginBlock": "0.25rem",
905
- "rhcAccordionButtonFontFamily": "'Fira Sans', Arial, Verdana, sans-serif",
906
- "rhcAccordionButtonFontWeight": 400,
907
- "rhcAccordionButtonFontSize": "1.25rem",
908
- "rhcAccordionButtonLineHeight": "150%",
909
845
  "rhcDataBadgeButtonColumnGap": "0.125rem",
910
846
  "rhcDataBadgeButtonHoverBackgroundColor": "#39870c",
911
847
  "rhcDataBadgeButtonHoverColor": "#fff",
@@ -961,6 +897,7 @@
961
897
  "rhcColorForegroundLink": "#01689b",
962
898
  "rhcColorForegroundOnDarkColor": "#fff",
963
899
  "rhcColorForegroundOnLightColor": "#000",
900
+ "rhcColorBackdrop": "#0000004d",
964
901
  "rhcColorBorderDefault": "#64748B",
965
902
  "rhcColorBorderSubdued": "#94A3B8",
966
903
  "rhcColorBorderStrong": "#0F172A",
@@ -1095,6 +1032,7 @@
1095
1032
  "rhcColorLintblauw500": "#154273",
1096
1033
  "rhcColorWit": "#fff",
1097
1034
  "rhcColorZwart": "#000",
1035
+ "rhcColorTransparent30": "#0000004d",
1098
1036
  "rhcColorNone": "transparent",
1099
1037
  "rhcSubNavBarBackgroundColor": "#f2f4f6",
1100
1038
  "rhcSubNavBarColumnGap": "0.5rem",
@@ -370,21 +370,6 @@
370
370
  "color": "#94A3B8"
371
371
  }
372
372
  },
373
- "number-badge": {
374
- "line-height": "125%",
375
- "background-color": "#39870c",
376
- "border-color": "transparent",
377
- "border-radius": "999px",
378
- "border-width": "0px",
379
- "color": "#fff",
380
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
381
- "font-size": "1.25rem",
382
- "font-weight": 700,
383
- "min-block-size": "24px",
384
- "min-inline-size": "24px",
385
- "padding-block": "0.125rem",
386
- "padding-inline": "0.5rem"
387
- },
388
373
  "figure": {
389
374
  "caption": {
390
375
  "border-color": "#CBD5E1",
@@ -403,6 +388,20 @@
403
388
  "border-start-start-radius": 0
404
389
  }
405
390
  },
391
+ "number-badge": {
392
+ "background-color": "#39870c",
393
+ "border-color": "transparent",
394
+ "border-radius": "999px",
395
+ "border-width": "0px",
396
+ "color": "#fff",
397
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
398
+ "font-size": "1.25rem",
399
+ "font-weight": 700,
400
+ "min-block-size": "24px",
401
+ "min-inline-size": "24px",
402
+ "padding-block": "0.125rem",
403
+ "padding-inline": "0.5rem"
404
+ },
406
405
  "blockquote": {
407
406
  "border-block-end-width": 0,
408
407
  "border-block-start-width": 0,
@@ -475,17 +474,6 @@
475
474
  }
476
475
  },
477
476
  "alert": {
478
- "heading": {
479
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
480
- "font-size": "1.25rem",
481
- "font-weight": 700,
482
- "line-height": "150%"
483
- },
484
- "message": {
485
- "column-gap": "0.5rem",
486
- "line-height": "150%",
487
- "row-gap": "0rem"
488
- },
489
477
  "background-color": "#d9ebf7",
490
478
  "border-color": "transparent",
491
479
  "border-radius": "5px",
@@ -511,6 +499,9 @@
511
499
  "border-color": "transparent",
512
500
  "color": "#000"
513
501
  },
502
+ "message": {
503
+ "row-gap": "0rem"
504
+ },
514
505
  "ok": {
515
506
  "background-color": "#e1eddb",
516
507
  "border-color": "transparent",
@@ -540,18 +531,18 @@
540
531
  }
541
532
  },
542
533
  "accordion": {
534
+ "margin-block-end": "0rem",
535
+ "margin-block-start": "0rem",
536
+ "row-gap": "0rem",
537
+ "panel": {
538
+ "border-color": "transparent",
539
+ "border-width": "1px",
540
+ "padding-block-end": "1.5rem",
541
+ "padding-block-start": "1rem",
542
+ "padding-inline-end": "1rem",
543
+ "padding-inline-start": "1rem"
544
+ },
543
545
  "button": {
544
- "active": {
545
- "row-gap": 0,
546
- "background-color": "#F1F5F9",
547
- "border-color": "transparent",
548
- "color": "#0F172A"
549
- },
550
- "focus": {
551
- "background-color": "#e1eddb",
552
- "border-color": "#39870c",
553
- "color": "#0F172A"
554
- },
555
546
  "background-color": "#fff",
556
547
  "border-color": "transparent",
557
548
  "border-radius": "0px",
@@ -565,6 +556,11 @@
565
556
  "icon": {
566
557
  "size": "24px"
567
558
  },
559
+ "active": {
560
+ "background-color": "#F1F5F9",
561
+ "border-color": "transparent",
562
+ "color": "#0F172A"
563
+ },
568
564
  "hover": {
569
565
  "background-color": "#F8FAFC",
570
566
  "border-color": "transparent",
@@ -577,17 +573,6 @@
577
573
  "color": "#0F172A"
578
574
  }
579
575
  },
580
- "margin-block-end": "0rem",
581
- "margin-block-start": "0rem",
582
- "row-gap": "0rem",
583
- "panel": {
584
- "border-color": "transparent",
585
- "border-width": "1px",
586
- "padding-block-end": "1.5rem",
587
- "padding-block-start": "1rem",
588
- "padding-inline-end": "1rem",
589
- "padding-inline-start": "1rem"
590
- },
591
576
  "section": {
592
577
  "border-color": "#94A3B8",
593
578
  "hover": {
@@ -598,43 +583,6 @@
598
583
  "margin-block-start": "0rem"
599
584
  }
600
585
  },
601
- "skip-link": {
602
- "focus": {
603
- "text-decoration": "None",
604
- "border-color": "#39870c",
605
- "border-width": "2px",
606
- "border-style": "solid",
607
- "background-color": "#fff",
608
- "color": "#01689b"
609
- },
610
- "border-color": "transparent",
611
- "box-block-end-shadow": {
612
- "color": "#0000001a",
613
- "blur-radius": "48px",
614
- "offset-x": 0,
615
- "offset-y": "16px",
616
- "spread-radius": 0
617
- },
618
- "focus-visible": {
619
- "outline-color": "#000",
620
- "text-decoration": "underline"
621
- },
622
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
623
- "font-weight": 700,
624
- "line-height": "150%",
625
- "border-width": "2px",
626
- "text-underline-offset": "0.125rem",
627
- "font-size": "1.25rem",
628
- "background-color": "#fff",
629
- "color": "#01689b",
630
- "min-block-size": "48px",
631
- "min-inline-size": "48px",
632
- "padding-block-end": "0.75rem",
633
- "padding-block-start": "0.75rem",
634
- "padding-inline-end": "1rem",
635
- "padding-inline-start": "1rem",
636
- "text-decoration": "underline"
637
- },
638
586
  "data-badge": {
639
587
  "background-color": "#e1eddb",
640
588
  "border-radius": "10px",
@@ -789,12 +737,7 @@
789
737
  },
790
738
  "button-group": {
791
739
  "margin-block-end": "0rem",
792
- "margin-block-start": "0rem",
793
- "background-color": "transparent",
794
- "column-gap": "0.5rem",
795
- "padding-block-end": "0px",
796
- "padding-block-start": "0px",
797
- "row-gap": "0.5rem"
740
+ "margin-block-start": "0rem"
798
741
  },
799
742
  "breadcrumb-nav": {
800
743
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
@@ -904,6 +847,13 @@
904
847
  "padding-inline-start": "0.5rem"
905
848
  }
906
849
  },
850
+ "action-group": {
851
+ "background-color": "transparent",
852
+ "column-gap": "0.5rem",
853
+ "padding-block-end": "0rem",
854
+ "padding-block-start": "0rem",
855
+ "row-gap": "0.5rem"
856
+ },
907
857
  "column-layout": {
908
858
  "column-rule-color": "transparent",
909
859
  "column-rule-width": "0px",
@@ -1059,6 +1009,30 @@
1059
1009
  "border-inline-start-width": "0px"
1060
1010
  }
1061
1011
  },
1012
+ "drawer": {
1013
+ "max-inline-size": "256px",
1014
+ "z-index": 1,
1015
+ "background-color": "#fff",
1016
+ "border-color": "#64748B",
1017
+ "border-width": "0px",
1018
+ "color": "#0F172A",
1019
+ "max-block-size": "240px",
1020
+ "padding-block-start": "1rem",
1021
+ "padding-block-end": "1rem",
1022
+ "padding-inline-start": "1rem",
1023
+ "padding-inline-end": "1rem"
1024
+ },
1025
+ "backdrop": {
1026
+ "background-color": "#0000004d",
1027
+ "color": "#0F172A",
1028
+ "opacity": 0.8,
1029
+ "fade-in": {
1030
+ "animation-duration": "400ms"
1031
+ },
1032
+ "reduced-transparency": {
1033
+ "opacity": 0.98
1034
+ }
1035
+ },
1062
1036
  "article": {
1063
1037
  "max-inline-size": "75ch"
1064
1038
  },
@@ -1197,8 +1171,8 @@
1197
1171
  "button": {
1198
1172
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1199
1173
  "font-size": "1.25rem",
1200
- "font-weight": 400,
1201
- "line-height": "150%"
1174
+ "font-weight": 700,
1175
+ "line-height": "1.875rem"
1202
1176
  }
1203
1177
  },
1204
1178
  "link-list": {
@@ -1207,14 +1181,10 @@
1207
1181
  "text-decoration": "underline"
1208
1182
  }
1209
1183
  }
1210
- },
1211
- "skip-link": {
1212
- "font-weight": 700
1213
1184
  }
1214
1185
  },
1215
1186
  "nl": {
1216
1187
  "number-badge": {
1217
- "line-height": "125%",
1218
1188
  "background-color": "#39870c",
1219
1189
  "border-color": "transparent",
1220
1190
  "border-radius": "999px",
@@ -1229,33 +1199,6 @@
1229
1199
  "padding-inline": "0.5rem"
1230
1200
  },
1231
1201
  "skip-link": {
1232
- "border-color": "transparent",
1233
- "border-width": "2px",
1234
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1235
- "font-weight": 700,
1236
- "padding-block-end": "0.75rem",
1237
- "padding-block-start": "0.75rem",
1238
- "padding-inline-end": "1rem",
1239
- "padding-inline-start": "1rem",
1240
- "box-block-end-shadow": {
1241
- "blur-radius": "48px",
1242
- "color": "#0000001a",
1243
- "offset-x": 0,
1244
- "offset-y": "16px",
1245
- "spread-radius": 0
1246
- },
1247
- "focus": {
1248
- "background-color": "#fff",
1249
- "border-color": "#39870c",
1250
- "border-style": "solid",
1251
- "border-width": "2px",
1252
- "color": "#0F172A",
1253
- "text-decoration": "None"
1254
- },
1255
- "focus-visible": {
1256
- "outline-color": "#000"
1257
- },
1258
- "text-decoration": "underline",
1259
1202
  "background-color": "#fff",
1260
1203
  "color": "#01689b",
1261
1204
  "padding-block": "0.75rem",
@@ -1390,35 +1333,6 @@
1390
1333
  "borderRadiusBottomLeft": "48px"
1391
1334
  }
1392
1335
  },
1393
- "accordion": {
1394
- "border-radius": "0px",
1395
- "color": "#0F172A",
1396
- "header": {
1397
- "margin": 0
1398
- },
1399
- "section": {
1400
- "border-block-end-width": "1px",
1401
- "border-color": "#94A3B8",
1402
- "border-width": "1px"
1403
- },
1404
- "button": {
1405
- "padding-block-end": "0.75rem",
1406
- "padding-block-start": "0.75rem",
1407
- "padding-inline-end": "1rem",
1408
- "padding-inline-start": "1rem",
1409
- "expanded": {
1410
- "background-color": "#fff",
1411
- "color": "#0F172A"
1412
- },
1413
- "icon": {
1414
- "margin-block": "0.25rem"
1415
- },
1416
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1417
- "font-weight": 400,
1418
- "font-size": "1.25rem",
1419
- "line-height": "150%"
1420
- }
1421
- },
1422
1336
  "data-badge-button": {
1423
1337
  "column-gap": "0.125rem",
1424
1338
  "hover": {
@@ -1519,6 +1433,7 @@
1519
1433
  "on-dark-color": "#fff",
1520
1434
  "on-light-color": "#000"
1521
1435
  },
1436
+ "backdrop": "#0000004d",
1522
1437
  "border": {
1523
1438
  "default": "#64748B",
1524
1439
  "subdued": "#94A3B8",
@@ -1707,6 +1622,9 @@
1707
1622
  },
1708
1623
  "wit": "#fff",
1709
1624
  "zwart": "#000",
1625
+ "transparent": {
1626
+ "30": "#0000004d"
1627
+ },
1710
1628
  "none": "transparent"
1711
1629
  },
1712
1630
  "sub-nav-bar": {