@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": "#154273",
252
- "utrechtNumberBadgeBorderColor": "transparent",
253
- "utrechtNumberBadgeBorderRadius": "999px",
254
- "utrechtNumberBadgeBorderWidth": "0px",
255
- "utrechtNumberBadgeColor": "#fff",
256
- "utrechtNumberBadgeFontFamily": "RijksSans, 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": "#154273",
263
+ "utrechtNumberBadgeBorderColor": "transparent",
264
+ "utrechtNumberBadgeBorderRadius": "999px",
265
+ "utrechtNumberBadgeBorderWidth": "0px",
266
+ "utrechtNumberBadgeColor": "#fff",
267
+ "utrechtNumberBadgeFontFamily": "RijksSans, 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": "RijksSans, 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": "#dce3ea",
374
- "utrechtAccordionButtonFocusBorderColor": "#154273",
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": "#154273",
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": "RijksSans, 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": "#dce3ea",
438
398
  "utrechtDataBadgeBorderRadius": "10px",
439
399
  "utrechtDataBadgeColor": "#154273",
@@ -536,11 +496,6 @@
536
496
  "utrechtButtonSubtleActiveColor": "#0d2845",
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": "RijksSans, 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
  "utrechtPageFooterBackgroundColor": "#154273",
599
559
  "utrechtPageFooterColor": "#fff",
600
560
  "utrechtPageFooterPaddingBlockStart": "3rem",
@@ -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": "RijksSans, 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": "#154273",
767
741
  "nlNumberBadgeBorderColor": "transparent",
768
742
  "nlNumberBadgeBorderRadius": "999px",
@@ -775,37 +749,6 @@
775
749
  "nlNumberBadgeMinInlineSize": "24px",
776
750
  "nlNumberBadgePaddingBlock": "0.125rem",
777
751
  "nlNumberBadgePaddingInline": "0.5rem",
778
- "nlSkipLinkBorderColor": "transparent",
779
- "nlSkipLinkBorderWidth": "2px",
780
- "nlSkipLinkFontFamily": "RijksSans, 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": "#154273",
793
- "nlSkipLinkFocusBorderStyle": "solid",
794
- "nlSkipLinkFocusBorderWidth": "2px",
795
- "nlSkipLinkFocusColor": "#0F172A",
796
- "nlSkipLinkFocusTextDecoration": "None",
797
- "nlSkipLinkFocusVisibleOutlineColor": "#000",
798
- "nlSkipLinkTextDecoration": "underline",
799
- "nlSkipLinkBackgroundColor": "#fff",
800
- "nlSkipLinkColor": "#01689b",
801
- "nlSkipLinkPaddingBlock": "0.75rem",
802
- "nlSkipLinkPaddingInline": "1rem",
803
- "nlSkipLinkMinBlockSize": "48px",
804
- "nlSkipLinkMinInlineSize": "48px",
805
- "nlSkipLinkTextDecorationThickness": "0.0625em",
806
- "nlSkipLinkTextUnderlineOffset": "0.125rem",
807
- "nlSkipLinkLineHeight": "150%",
808
- "nlSkipLinkFontSize": "1.25rem",
809
752
  "nlLinkActiveColor": "#800080",
810
753
  "nlLinkFocusTextDecorationThickness": "1px",
811
754
  "nlLinkHoverTextDecorationLine": "underline",
@@ -820,6 +763,16 @@
820
763
  "nlLinkCurrentCursor": "default",
821
764
  "nlLinkDisabledColor": "#334155",
822
765
  "nlLinkDisabledCursor": "disabled",
766
+ "nlSkipLinkBackgroundColor": "#fff",
767
+ "nlSkipLinkColor": "#01689b",
768
+ "nlSkipLinkPaddingBlock": "0.75rem",
769
+ "nlSkipLinkPaddingInline": "1rem",
770
+ "nlSkipLinkMinBlockSize": "48px",
771
+ "nlSkipLinkMinInlineSize": "48px",
772
+ "nlSkipLinkTextDecorationThickness": "0.0625em",
773
+ "nlSkipLinkTextUnderlineOffset": "0.125rem",
774
+ "nlSkipLinkLineHeight": "150%",
775
+ "nlSkipLinkFontSize": "1.25rem",
823
776
  "nlParagraphColor": "#0F172A",
824
777
  "nlParagraphFontFamily": "RijksSans, Arial, Verdana, sans-serif",
825
778
  "nlParagraphFontSize": "1.25rem",
@@ -891,23 +844,6 @@
891
844
  "rhcKeepBottomLeftBorderRadiusTopRight": 0,
892
845
  "rhcKeepBottomLeftBorderRadiusBottomRight": 0,
893
846
  "rhcKeepBottomLeftBorderRadiusBottomLeft": "48px",
894
- "rhcAccordionBorderRadius": "0px",
895
- "rhcAccordionColor": "#0F172A",
896
- "rhcAccordionHeaderMargin": 0,
897
- "rhcAccordionSectionBorderBlockEndWidth": "1px",
898
- "rhcAccordionSectionBorderColor": "#94A3B8",
899
- "rhcAccordionSectionBorderWidth": "1px",
900
- "rhcAccordionButtonPaddingBlockEnd": "0.75rem",
901
- "rhcAccordionButtonPaddingBlockStart": "0.75rem",
902
- "rhcAccordionButtonPaddingInlineEnd": "1rem",
903
- "rhcAccordionButtonPaddingInlineStart": "1rem",
904
- "rhcAccordionButtonExpandedBackgroundColor": "#fff",
905
- "rhcAccordionButtonExpandedColor": "#0F172A",
906
- "rhcAccordionButtonIconMarginBlock": "0.25rem",
907
- "rhcAccordionButtonFontFamily": "RijksSans, Arial, Verdana, sans-serif",
908
- "rhcAccordionButtonFontWeight": 400,
909
- "rhcAccordionButtonFontSize": "1.25rem",
910
- "rhcAccordionButtonLineHeight": "150%",
911
847
  "rhcDataBadgeButtonColumnGap": "0.125rem",
912
848
  "rhcDataBadgeButtonHoverBackgroundColor": "#154273",
913
849
  "rhcDataBadgeButtonHoverColor": "#fff",
@@ -1216,6 +1152,7 @@
1216
1152
  "rhcColorForegroundLink": "#01689b",
1217
1153
  "rhcColorForegroundOnDarkColor": "#fff",
1218
1154
  "rhcColorForegroundOnLightColor": "#000",
1155
+ "rhcColorBackdrop": "#0000004d",
1219
1156
  "rhcColorBorderDefault": "#64748B",
1220
1157
  "rhcColorBorderSubdued": "#94A3B8",
1221
1158
  "rhcColorBorderStrong": "#0F172A",
@@ -1357,6 +1294,7 @@
1357
1294
  "rhcColorLintblauw500": "#154273",
1358
1295
  "rhcColorWit": "#fff",
1359
1296
  "rhcColorZwart": "#000",
1297
+ "rhcColorTransparent30": "#0000004d",
1360
1298
  "rhcColorNone": "transparent",
1361
1299
  "rhcFocusOutlineOffset": "0.125rem",
1362
1300
  "rhcFocusOutlineStyle": "solid",
@@ -370,21 +370,6 @@
370
370
  "color": "#94A3B8"
371
371
  }
372
372
  },
373
- "number-badge": {
374
- "line-height": "125%",
375
- "background-color": "#154273",
376
- "border-color": "transparent",
377
- "border-radius": "999px",
378
- "border-width": "0px",
379
- "color": "#fff",
380
- "font-family": "RijksSans, 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": "#154273",
393
+ "border-color": "transparent",
394
+ "border-radius": "999px",
395
+ "border-width": "0px",
396
+ "color": "#fff",
397
+ "font-family": "RijksSans, 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": "RijksSans, 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": "#dce3ea",
552
- "border-color": "#154273",
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": "#154273",
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": "RijksSans, 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": "#dce3ea",
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": "RijksSans, 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
  "page-footer": {
908
858
  "background-color": "#154273",
909
859
  "color": "#fff",
@@ -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": "RijksSans, 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": "#154273",
1219
1189
  "border-color": "transparent",
1220
1190
  "border-radius": "999px",
@@ -1228,45 +1198,6 @@
1228
1198
  "padding-block": "0.125rem",
1229
1199
  "padding-inline": "0.5rem"
1230
1200
  },
1231
- "skip-link": {
1232
- "border-color": "transparent",
1233
- "border-width": "2px",
1234
- "font-family": "RijksSans, 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": "#154273",
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
- "background-color": "#fff",
1260
- "color": "#01689b",
1261
- "padding-block": "0.75rem",
1262
- "padding-inline": "1rem",
1263
- "min-block-size": "48px",
1264
- "min-inline-size": "48px",
1265
- "text-decoration-thickness": "0.0625em",
1266
- "text-underline-offset": "0.125rem",
1267
- "line-height": "150%",
1268
- "font-size": "1.25rem"
1269
- },
1270
1201
  "link": {
1271
1202
  "active": {
1272
1203
  "color": "#800080"
@@ -1295,6 +1226,18 @@
1295
1226
  "cursor": "disabled"
1296
1227
  }
1297
1228
  },
1229
+ "skip-link": {
1230
+ "background-color": "#fff",
1231
+ "color": "#01689b",
1232
+ "padding-block": "0.75rem",
1233
+ "padding-inline": "1rem",
1234
+ "min-block-size": "48px",
1235
+ "min-inline-size": "48px",
1236
+ "text-decoration-thickness": "0.0625em",
1237
+ "text-underline-offset": "0.125rem",
1238
+ "line-height": "150%",
1239
+ "font-size": "1.25rem"
1240
+ },
1298
1241
  "paragraph": {
1299
1242
  "color": "#0F172A",
1300
1243
  "font-family": "RijksSans, Arial, Verdana, sans-serif",
@@ -1396,35 +1339,6 @@
1396
1339
  "borderRadiusBottomLeft": "48px"
1397
1340
  }
1398
1341
  },
1399
- "accordion": {
1400
- "border-radius": "0px",
1401
- "color": "#0F172A",
1402
- "header": {
1403
- "margin": 0
1404
- },
1405
- "section": {
1406
- "border-block-end-width": "1px",
1407
- "border-color": "#94A3B8",
1408
- "border-width": "1px"
1409
- },
1410
- "button": {
1411
- "padding-block-end": "0.75rem",
1412
- "padding-block-start": "0.75rem",
1413
- "padding-inline-end": "1rem",
1414
- "padding-inline-start": "1rem",
1415
- "expanded": {
1416
- "background-color": "#fff",
1417
- "color": "#0F172A"
1418
- },
1419
- "icon": {
1420
- "margin-block": "0.25rem"
1421
- },
1422
- "font-family": "RijksSans, Arial, Verdana, sans-serif",
1423
- "font-weight": 400,
1424
- "font-size": "1.25rem",
1425
- "line-height": "150%"
1426
- }
1427
- },
1428
1342
  "data-badge-button": {
1429
1343
  "column-gap": "0.125rem",
1430
1344
  "hover": {
@@ -1954,6 +1868,7 @@
1954
1868
  "on-dark-color": "#fff",
1955
1869
  "on-light-color": "#000"
1956
1870
  },
1871
+ "backdrop": "#0000004d",
1957
1872
  "border": {
1958
1873
  "default": "#64748B",
1959
1874
  "subdued": "#94A3B8",
@@ -2151,6 +2066,9 @@
2151
2066
  },
2152
2067
  "wit": "#fff",
2153
2068
  "zwart": "#000",
2069
+ "transparent": {
2070
+ "30": "#0000004d"
2071
+ },
2154
2072
  "none": "transparent"
2155
2073
  },
2156
2074
  "focus": {