@rijkshuisstijl-community/design-tokens 1.0.1 → 1.2.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 (54) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/_variables.scss +747 -624
  3. package/dist/index.css +747 -624
  4. package/dist/index.d.ts +624 -501
  5. package/dist/index.js +650 -527
  6. package/dist/index.json +649 -526
  7. package/dist/index.tokens.json +1684 -1515
  8. package/dist/root.css +747 -624
  9. package/dist/tokens.d.ts +1595 -1426
  10. package/dist/tokens.js +23437 -20600
  11. package/dist/uitvoerend-mintgroen-focus/_variables.scss +644 -522
  12. package/dist/uitvoerend-mintgroen-focus/index.css +644 -522
  13. package/dist/uitvoerend-mintgroen-focus/index.d.ts +736 -614
  14. package/dist/uitvoerend-mintgroen-focus/index.js +738 -616
  15. package/dist/uitvoerend-mintgroen-focus/index.json +737 -615
  16. package/dist/uitvoerend-mintgroen-focus/index.tokens.json +1680 -1516
  17. package/dist/uitvoerend-mintgroen-focus/root.css +644 -522
  18. package/dist/uitvoerend-mintgroen-focus/tokens.d.ts +1587 -1423
  19. package/dist/uitvoerend-mintgroen-focus/tokens.js +22945 -20135
  20. package/dist/uitvoerend-violet/_variables.scss +153 -30
  21. package/dist/uitvoerend-violet/index.css +153 -30
  22. package/dist/uitvoerend-violet/index.d.ts +125 -2
  23. package/dist/uitvoerend-violet/index.js +153 -30
  24. package/dist/uitvoerend-violet/index.json +152 -29
  25. package/dist/uitvoerend-violet/index.tokens.json +202 -33
  26. package/dist/uitvoerend-violet/root.css +153 -30
  27. package/dist/uitvoerend-violet/tokens.d.ts +175 -6
  28. package/dist/uitvoerend-violet/tokens.js +5872 -3035
  29. package/dist/uitvoerend-violet-oud/_variables.scss +153 -30
  30. package/dist/uitvoerend-violet-oud/index.css +153 -30
  31. package/dist/uitvoerend-violet-oud/index.d.ts +125 -2
  32. package/dist/uitvoerend-violet-oud/index.js +153 -30
  33. package/dist/uitvoerend-violet-oud/index.json +152 -29
  34. package/dist/uitvoerend-violet-oud/index.tokens.json +202 -33
  35. package/dist/uitvoerend-violet-oud/root.css +153 -30
  36. package/dist/uitvoerend-violet-oud/tokens.d.ts +175 -6
  37. package/dist/uitvoerend-violet-oud/tokens.js +5872 -3035
  38. package/dist/wetgevend/_variables.scss +153 -30
  39. package/dist/wetgevend/index.css +153 -30
  40. package/dist/wetgevend/index.d.ts +125 -2
  41. package/dist/wetgevend/index.js +153 -30
  42. package/dist/wetgevend/index.json +152 -29
  43. package/dist/wetgevend/index.tokens.json +202 -33
  44. package/dist/wetgevend/root.css +153 -30
  45. package/dist/wetgevend/tokens.d.ts +175 -6
  46. package/dist/wetgevend/tokens.js +5872 -3035
  47. package/figma/figma.tokens.json +2083 -236
  48. package/package.json +1 -1
  49. package/src/generated/base.tokens.json +4588 -4007
  50. package/src/generated/themes.json +6707 -4391
  51. package/src/generated/uitvoerend-mintgroen-focus/tokens.json +4663 -4090
  52. package/src/generated/uitvoerend-violet/tokens.json +625 -44
  53. package/src/generated/uitvoerend-violet-oud/tokens.json +625 -44
  54. package/src/generated/wetgevend/tokens.json +625 -44
package/dist/wetgevend/_variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Sun, 09 Mar 2025 17:51:30 GMT
3
+ // Generated on Tue, 29 Apr 2025 12:01:02 GMT
4
4
 
5
5
  $nl-number-badge-padding-block: 0.5rem;
6
6
  $nl-number-badge-padding-inline: 0.5rem;
@@ -50,6 +50,28 @@ $nl-heading-level-1-line-height: 125%;
50
50
  $nl-heading-level-1-font-weight: 700;
51
51
  $nl-heading-level-1-font-family: Fira Sans, Arial, Verdana, sans-serif;
52
52
  $nl-heading-level-1-color: #154273;
53
+ $nl-link-line-height: 150%;
54
+ $nl-link-font-size: 1.25rem;
55
+ $nl-link-font-weight: 400;
56
+ $nl-link-font-family: Fira Sans, Arial, Verdana, sans-serif;
57
+ $nl-link-text-underline-offset: 0.125rem;
58
+ $nl-link-text-decoration-thickness: auto;
59
+ $nl-link-column-gap: 0.25rem;
60
+ $nl-link-icon-size: 24px;
61
+ $nl-link-icon-inset-block-start: 0.25rem;
62
+ $nl-link-text-decoration: underline;
63
+ $nl-link-visited-color: #42145f;
64
+ $nl-link-hover-text-decoration-thickness: auto;
65
+ $nl-link-hover-text-decoration: None;
66
+ $nl-link-hover-color: #01496c;
67
+ $nl-link-focus-text-decoration-thickness: auto;
68
+ $nl-link-focus-text-decoration: None;
69
+ $nl-link-focus-color: #01689b;
70
+ $nl-link-focus-background-color: transparent;
71
+ $nl-link-active-text-decoration: None;
72
+ $nl-link-active-color: #42145f;
73
+ $nl-link-text-decoration-color: #01689b;
74
+ $nl-link-color: #01689b;
53
75
  $nl-paragraph-lead-line-height: 150%;
54
76
  $nl-paragraph-lead-font-weight: 400;
55
77
  $nl-paragraph-lead-font-size: 1.5rem;
@@ -276,6 +298,7 @@ $rhc-color-primary-300: #738eab;
276
298
  $rhc-color-primary-200: #95a9c0;
277
299
  $rhc-color-primary-100: #b8c6d5;
278
300
  $rhc-color-primary-50: #dce3ea;
301
+ $rhc-color-accent-2-500: #f092cd;
279
302
  $rhc-color-accent-500: #8fcae7;
280
303
  $rhc-color-feedback-warning-subdued: #fff4db;
281
304
  $rhc-color-feedback-warning-default: #ffb612;
@@ -289,8 +312,8 @@ $rhc-color-canvas: #fff;
289
312
  $rhc-color-border-strong: #0F172A;
290
313
  $rhc-color-border-subdued: #94A3B8;
291
314
  $rhc-color-border-default: #64748B;
292
- $rhc-color-foreground-link: #01689b;
293
315
  $rhc-color-foreground-on-emphasis: #fff;
316
+ $rhc-color-foreground-link: #01689b;
294
317
  $rhc-color-foreground-subdued: #334155;
295
318
  $rhc-color-foreground-default: #0F172A;
296
319
  $rhc-color-focus-outline: #000;
@@ -344,6 +367,7 @@ $rhc-card-as-link-horizontal-background-color: #154273;
344
367
  $rhc-card-as-link-heading-font-weight: 700;
345
368
  $rhc-card-as-link-heading-font-size: 1.5rem;
346
369
  $rhc-card-as-link-heading-padding-block-start: 0.5rem;
370
+ $rhc-card-as-link-heading-color: #154273;
347
371
  $rhc-card-as-link-full-bleed-opacity: 0.5;
348
372
  $rhc-card-as-link-full-bleed-color: #fff;
349
373
  $rhc-card-as-link-full-bleed-border-color: transparent;
@@ -359,14 +383,14 @@ $rhc-card-as-link-padding-inline-start: 1rem;
359
383
  $rhc-card-as-link-padding-inline-end: 1rem;
360
384
  $rhc-card-as-link-padding-block-start: 1rem;
361
385
  $rhc-card-as-link-padding-block-end: 1rem;
362
- $rhc-card-as-link-metadata-color: #0F172A;
386
+ $rhc-card-as-link-metadata-color: #334155;
363
387
  $rhc-card-as-link-link-focus-text-decoration: none;
364
388
  $rhc-card-as-link-link-hover-text-decoration: none;
365
389
  $rhc-card-as-link-link-active-text-decoration: none;
366
390
  $rhc-card-as-link-link-text-decoration: underline;
367
391
  $rhc-card-as-link-link-color: #01689b;
368
392
  $rhc-card-as-link-icon-size: 24px;
369
- $rhc-card-as-link-icon-color: #0F172A;
393
+ $rhc-card-as-link-icon-color: #154273;
370
394
  $rhc-card-as-link-inline-size: 328px;
371
395
  $rhc-card-as-link-column-gap: 1rem;
372
396
  $rhc-card-as-link-color: #0F172A;
@@ -736,11 +760,17 @@ $utrecht-breadcrumb-nav-link-icon-margin-inline: 0.25rem;
736
760
  $utrecht-breadcrumb-nav-link-icon-size: 24px;
737
761
  $utrecht-breadcrumb-nav-font-size: 1.25rem;
738
762
  $utrecht-breadcrumb-nav-line-height: 1.4;
763
+ $utrecht-button-pressed-color: #fff;
764
+ $utrecht-button-pressed-border-color: transparent;
765
+ $utrecht-button-pressed-background-color: #1E293B;
766
+ $utrecht-button-subtle-pressed-color: #162945;
767
+ $utrecht-button-subtle-pressed-border-color: transparent;
768
+ $utrecht-button-subtle-pressed-background-color: #b8c6d5;
739
769
  $utrecht-button-subtle-line-height: 1.875rem;
740
770
  $utrecht-button-subtle-active-color: #0d2845;
741
771
  $utrecht-button-subtle-active-border-color: transparent;
742
- $utrecht-button-subtle-active-background-color: transparent;
743
- $utrecht-button-subtle-focus-color: #154273;
772
+ $utrecht-button-subtle-active-background-color: #95a9c0;
773
+ $utrecht-button-subtle-focus-color: #162f50;
744
774
  $utrecht-button-subtle-focus-border-color: transparent;
745
775
  $utrecht-button-subtle-focus-background-color: #dce3ea;
746
776
  $utrecht-button-subtle-disabled-color: #b8c6d5;
@@ -751,27 +781,33 @@ $utrecht-button-subtle-border-color: transparent;
751
781
  $utrecht-button-subtle-background-color: transparent;
752
782
  $utrecht-button-subtle-hover-color: #162f50;
753
783
  $utrecht-button-subtle-hover-border-color: transparent;
754
- $utrecht-button-subtle-hover-background-color: transparent;
784
+ $utrecht-button-subtle-hover-background-color: #dce3ea;
755
785
  $utrecht-button-subtle-font-weight: 700;
756
786
  $utrecht-button-subtle-font-size: 1.25rem;
787
+ $utrecht-button-secondary-action-pressed-color: #162945;
788
+ $utrecht-button-secondary-action-pressed-border-color: #162945;
789
+ $utrecht-button-secondary-action-pressed-background-color: #b8c6d5;
757
790
  $utrecht-button-secondary-action-line-height: 1.875rem;
758
791
  $utrecht-button-secondary-action-font-size: 1.25rem;
759
- $utrecht-button-secondary-action-active-color: #154273;
760
- $utrecht-button-secondary-action-active-border-color: #154273;
792
+ $utrecht-button-secondary-action-active-color: #162f50;
793
+ $utrecht-button-secondary-action-active-border-color: #162945;
761
794
  $utrecht-button-secondary-action-active-background-color: #95a9c0;
762
795
  $utrecht-button-secondary-action-font-weight: 700;
763
- $utrecht-button-secondary-action-focus-color: #154273;
796
+ $utrecht-button-secondary-action-focus-color: #162f50;
764
797
  $utrecht-button-secondary-action-focus-border-color: transparent;
765
- $utrecht-button-secondary-action-focus-background-color: #b8c6d5;
798
+ $utrecht-button-secondary-action-focus-background-color: #dce3ea;
766
799
  $utrecht-button-secondary-action-disabled-color: #738eab;
767
- $utrecht-button-secondary-action-disabled-border-color: #738eab;
800
+ $utrecht-button-secondary-action-disabled-border-color: #95a9c0;
768
801
  $utrecht-button-secondary-action-disabled-background-color: transparent;
769
802
  $utrecht-button-secondary-action-color: #154273;
770
803
  $utrecht-button-secondary-action-border-color: #154273;
771
804
  $utrecht-button-secondary-action-background-color: transparent;
772
- $utrecht-button-secondary-action-hover-color: #154273;
773
- $utrecht-button-secondary-action-hover-border-color: transparent;
774
- $utrecht-button-secondary-action-hover-background-color: #b8c6d5;
805
+ $utrecht-button-secondary-action-hover-color: #162f50;
806
+ $utrecht-button-secondary-action-hover-border-color: #162f50;
807
+ $utrecht-button-secondary-action-hover-background-color: #dce3ea;
808
+ $utrecht-button-primary-action-pressed-color: #fff;
809
+ $utrecht-button-primary-action-pressed-border-color: transparent;
810
+ $utrecht-button-primary-action-pressed-background-color: #162945;
775
811
  $utrecht-button-primary-action-line-height: 1.875rem;
776
812
  $utrecht-button-primary-action-font-size: 1.25rem;
777
813
  $utrecht-button-primary-action-active-color: #fff;
@@ -780,9 +816,9 @@ $utrecht-button-primary-action-active-background-color: #0d2845;
780
816
  $utrecht-button-primary-action-font-weight: 700;
781
817
  $utrecht-button-primary-action-focus-color: #fff;
782
818
  $utrecht-button-primary-action-focus-border-color: transparent;
783
- $utrecht-button-primary-action-focus-background-color: #154273;
819
+ $utrecht-button-primary-action-focus-background-color: #162f50;
784
820
  $utrecht-button-primary-action-disabled-color: #4f7196;
785
- $utrecht-button-primary-action-disabled-border-color: #95a9c0;
821
+ $utrecht-button-primary-action-disabled-border-color: transparent;
786
822
  $utrecht-button-primary-action-disabled-background-color: #b8c6d5;
787
823
  $utrecht-button-primary-action-color: #fff;
788
824
  $utrecht-button-primary-action-border-color: transparent;
@@ -793,18 +829,18 @@ $utrecht-button-primary-action-hover-background-color: #162f50;
793
829
  $utrecht-button-column-gap: 0.5rem;
794
830
  $utrecht-button-min-inline-size: 48px;
795
831
  $utrecht-button-min-block-size: 48px;
796
- $utrecht-button-active-color: #0F172A;
797
- $utrecht-button-active-border-color: #0F172A;
798
- $utrecht-button-active-background-color: #CBD5E1;
799
- $utrecht-button-hover-color: #1E293B;
800
- $utrecht-button-hover-border-color: #1E293B;
801
- $utrecht-button-hover-background-color: #F8FAFC;
802
- $utrecht-button-focus-color: #1E293B;
832
+ $utrecht-button-active-color: #fff;
833
+ $utrecht-button-active-border-color: transparent;
834
+ $utrecht-button-active-background-color: #1E293B;
835
+ $utrecht-button-hover-color: #fff;
836
+ $utrecht-button-hover-border-color: transparent;
837
+ $utrecht-button-hover-background-color: #475569;
838
+ $utrecht-button-focus-color: #fff;
803
839
  $utrecht-button-focus-border-color: transparent;
804
- $utrecht-button-focus-background-color: #FDDE94;
805
- $utrecht-button-disabled-color: #64748B;
840
+ $utrecht-button-focus-background-color: #475569;
841
+ $utrecht-button-disabled-color: #94A3B8;
806
842
  $utrecht-button-disabled-border-color: transparent;
807
- $utrecht-button-disabled-background-color: #F8FAFC;
843
+ $utrecht-button-disabled-background-color: #E2E8F0;
808
844
  $utrecht-button-padding-inline-start: 1rem;
809
845
  $utrecht-button-padding-inline-end: 1rem;
810
846
  $utrecht-button-padding-block-start: 0.5rem;
@@ -817,9 +853,9 @@ $utrecht-button-icon-size: 24px;
817
853
  $utrecht-button-icon-gap: 0.5rem;
818
854
  $utrecht-button-border-width: 1px;
819
855
  $utrecht-button-border-radius: 5px;
820
- $utrecht-button-color: #334155;
821
- $utrecht-button-border-color: #334155;
822
- $utrecht-button-background-color: transparent;
856
+ $utrecht-button-color: #fff;
857
+ $utrecht-button-border-color: transparent;
858
+ $utrecht-button-background-color: #0F172A;
823
859
  $utrecht-button-group-row-gap: 0.5rem;
824
860
  $utrecht-button-group-padding-block-start: 0px;
825
861
  $utrecht-button-group-padding-block-end: 0px;
@@ -885,6 +921,19 @@ $utrecht-checkbox-background-color: #fff;
885
921
  $utrecht-checkbox-icon-size: 24px;
886
922
  $utrecht-checkbox-size: 24px;
887
923
  $utrecht-checkbox-border-radius: 2.5px;
924
+ $utrecht-number-badge-padding-block: 0.5rem;
925
+ $utrecht-number-badge-padding-inline: 0.5rem;
926
+ $utrecht-number-badge-color: #fff;
927
+ $utrecht-number-badge-border-color: transparent;
928
+ $utrecht-number-badge-background-color: #154273;
929
+ $utrecht-number-badge-font-family: Fira Sans, Arial, Verdana, sans-serif;
930
+ $utrecht-number-badge-border-radius: 999px;
931
+ $utrecht-number-badge-border-width: 0px;
932
+ $utrecht-number-badge-font-weight: 700;
933
+ $utrecht-number-badge-min-inline-size: 24px;
934
+ $utrecht-number-badge-min-block-size: 24px;
935
+ $utrecht-number-badge-line-height: 150%;
936
+ $utrecht-number-badge-font-size: 1.25rem;
888
937
  $utrecht-form-fieldset-invalid-border-inline-start-width: 0px;
889
938
  $utrecht-form-fieldset-invalid-padding-inline-start: 0;
890
939
  $utrecht-form-fieldset-invalid-border-inline-start-color: #d52b1e;
@@ -944,6 +993,41 @@ $utrecht-form-field-label-color: #0F172A;
944
993
  $utrecht-form-label-font-weight: 700;
945
994
  $utrecht-form-label-font-size: 1.25rem;
946
995
  $utrecht-form-label-color: #0F172A;
996
+ $utrecht-heading-5-margin-block-start: 0;
997
+ $utrecht-heading-5-margin-block-end: 0;
998
+ $utrecht-heading-5-font-size: 1.25rem;
999
+ $utrecht-heading-5-line-height: 125%;
1000
+ $utrecht-heading-5-font-weight: 700;
1001
+ $utrecht-heading-5-font-family: Fira Sans, Arial, Verdana, sans-serif;
1002
+ $utrecht-heading-5-color: #154273;
1003
+ $utrecht-heading-4-margin-block-start: 0;
1004
+ $utrecht-heading-4-margin-block-end: 0;
1005
+ $utrecht-heading-4-font-size: 1.5rem;
1006
+ $utrecht-heading-4-line-height: 125%;
1007
+ $utrecht-heading-4-font-weight: 700;
1008
+ $utrecht-heading-4-font-family: Fira Sans, Arial, Verdana, sans-serif;
1009
+ $utrecht-heading-4-color: #154273;
1010
+ $utrecht-heading-3-margin-block-start: 0;
1011
+ $utrecht-heading-3-margin-block-end: 0;
1012
+ $utrecht-heading-3-font-size: 1.875rem;
1013
+ $utrecht-heading-3-line-height: 125%;
1014
+ $utrecht-heading-3-font-weight: 700;
1015
+ $utrecht-heading-3-font-family: Fira Sans, Arial, Verdana, sans-serif;
1016
+ $utrecht-heading-3-color: #154273;
1017
+ $utrecht-heading-2-margin-block-start: 0;
1018
+ $utrecht-heading-2-margin-block-end: 0;
1019
+ $utrecht-heading-2-font-size: 2.5rem;
1020
+ $utrecht-heading-2-line-height: 125%;
1021
+ $utrecht-heading-2-font-weight: 700;
1022
+ $utrecht-heading-2-font-family: Fira Sans, Arial, Verdana, sans-serif;
1023
+ $utrecht-heading-2-color: #154273;
1024
+ $utrecht-heading-1-margin-block-start: 0;
1025
+ $utrecht-heading-1-margin-block-end: 0;
1026
+ $utrecht-heading-1-font-size: 3.125rem;
1027
+ $utrecht-heading-1-line-height: 125%;
1028
+ $utrecht-heading-1-font-weight: 700;
1029
+ $utrecht-heading-1-font-family: Fira Sans, Arial, Verdana, sans-serif;
1030
+ $utrecht-heading-1-color: #154273;
947
1031
  $utrecht-link-line-height: 150%;
948
1032
  $utrecht-link-font-size: 1.25rem;
949
1033
  $utrecht-link-font-weight: 400;
@@ -985,6 +1069,17 @@ $utrecht-ordered-list-margin-inline-start: 0.625rem;
985
1069
  $utrecht-ordered-list-margin-block-start: 0.25rem;
986
1070
  $utrecht-ordered-list-margin-block-end: 0.25rem;
987
1071
  $utrecht-ordered-list-padding-inline-start: 1.5rem;
1072
+ $utrecht-paragraph-lead-line-height: 150%;
1073
+ $utrecht-paragraph-lead-font-weight: 400;
1074
+ $utrecht-paragraph-lead-font-size: 1.5rem;
1075
+ $utrecht-paragraph-lead-color: #0F172A;
1076
+ $utrecht-paragraph-margin-block-start: 0;
1077
+ $utrecht-paragraph-margin-block-end: 0;
1078
+ $utrecht-paragraph-line-height: 150%;
1079
+ $utrecht-paragraph-font-weight: 400;
1080
+ $utrecht-paragraph-font-size: 1.25rem;
1081
+ $utrecht-paragraph-font-family: Fira Sans, Arial, Verdana, sans-serif;
1082
+ $utrecht-paragraph-color: #0F172A;
988
1083
  $utrecht-radio-button-border-width: 1px;
989
1084
  $utrecht-radio-button-border-radius: 999px;
990
1085
  $utrecht-radio-button-hover-border-width: 1px;
@@ -1061,6 +1156,34 @@ $utrecht-separator-margin-block-start: 0.75rem;
1061
1156
  $utrecht-separator-margin-block-end: 0.75rem;
1062
1157
  $utrecht-separator-block-size: 2px;
1063
1158
  $utrecht-separator-color: #CBD5E1;
1159
+ $utrecht-skip-link-text-underline-offset: 0.125rem;
1160
+ $utrecht-skip-link-text-decoration: underline;
1161
+ $utrecht-skip-link-box-block-end-shadow-color: #0000001a;
1162
+ $utrecht-skip-link-box-block-end-shadow-spread-radius: 0;
1163
+ $utrecht-skip-link-box-block-end-shadow-blur-radius: 48px;
1164
+ $utrecht-skip-link-box-block-end-shadow-offset-y: 16px;
1165
+ $utrecht-skip-link-box-block-end-shadow-offset-x: 0;
1166
+ $utrecht-skip-link-border-width: 2px;
1167
+ $utrecht-skip-link-color: #fff;
1168
+ $utrecht-skip-link-border-color: transparent;
1169
+ $utrecht-skip-link-background-color: #154273;
1170
+ $utrecht-skip-link-focus-visible-outline-color: #000;
1171
+ $utrecht-skip-link-focus-text-decoration: None;
1172
+ $utrecht-skip-link-focus-color: #0F172A;
1173
+ $utrecht-skip-link-focus-border-width: 2px;
1174
+ $utrecht-skip-link-focus-border-style: solid;
1175
+ $utrecht-skip-link-focus-border-color: #154273;
1176
+ $utrecht-skip-link-focus-background-color: #fff;
1177
+ $utrecht-skip-link-padding-inline-start: 1rem;
1178
+ $utrecht-skip-link-padding-inline-end: 1rem;
1179
+ $utrecht-skip-link-padding-block-start: 0.75rem;
1180
+ $utrecht-skip-link-padding-block-end: 0.75rem;
1181
+ $utrecht-skip-link-min-inline-size: 48px;
1182
+ $utrecht-skip-link-min-block-size: 48px;
1183
+ $utrecht-skip-link-line-height: 150%;
1184
+ $utrecht-skip-link-font-size: 1.25rem;
1185
+ $utrecht-skip-link-font-family: Fira Sans, Arial, Verdana, sans-serif;
1186
+ $utrecht-skip-link-font-weight: 700;
1064
1187
  $utrecht-table-font-size: 1.25rem;
1065
1188
  $utrecht-table-container-box-inline-start-shadow-color: #0000001a;
1066
1189
  $utrecht-table-container-box-inline-start-shadow-spread: 0;
package/dist/wetgevend/index.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Sun, 09 Mar 2025 17:51:30 GMT
3
+ * Generated on Tue, 29 Apr 2025 12:01:02 GMT
4
4
  */
5
5
 
6
6
  .wetgevend {
@@ -52,6 +52,28 @@
52
52
  --nl-heading-level-1-font-weight: 700;
53
53
  --nl-heading-level-1-font-family: Fira Sans, Arial, Verdana, sans-serif;
54
54
  --nl-heading-level-1-color: #154273;
55
+ --nl-link-line-height: 150%;
56
+ --nl-link-font-size: 1.25rem;
57
+ --nl-link-font-weight: 400;
58
+ --nl-link-font-family: Fira Sans, Arial, Verdana, sans-serif;
59
+ --nl-link-text-underline-offset: 0.125rem;
60
+ --nl-link-text-decoration-thickness: auto;
61
+ --nl-link-column-gap: 0.25rem;
62
+ --nl-link-icon-size: 24px;
63
+ --nl-link-icon-inset-block-start: 0.25rem;
64
+ --nl-link-text-decoration: underline;
65
+ --nl-link-visited-color: #42145f;
66
+ --nl-link-hover-text-decoration-thickness: auto;
67
+ --nl-link-hover-text-decoration: None;
68
+ --nl-link-hover-color: #01496c;
69
+ --nl-link-focus-text-decoration-thickness: auto;
70
+ --nl-link-focus-text-decoration: None;
71
+ --nl-link-focus-color: #01689b;
72
+ --nl-link-focus-background-color: transparent;
73
+ --nl-link-active-text-decoration: None;
74
+ --nl-link-active-color: #42145f;
75
+ --nl-link-text-decoration-color: #01689b;
76
+ --nl-link-color: #01689b;
55
77
  --nl-paragraph-lead-line-height: 150%;
56
78
  --nl-paragraph-lead-font-weight: 400;
57
79
  --nl-paragraph-lead-font-size: 1.5rem;
@@ -278,6 +300,7 @@
278
300
  --rhc-color-primary-200: #95a9c0;
279
301
  --rhc-color-primary-100: #b8c6d5;
280
302
  --rhc-color-primary-50: #dce3ea;
303
+ --rhc-color-accent-2-500: #f092cd;
281
304
  --rhc-color-accent-500: #8fcae7;
282
305
  --rhc-color-feedback-warning-subdued: #fff4db;
283
306
  --rhc-color-feedback-warning-default: #ffb612;
@@ -291,8 +314,8 @@
291
314
  --rhc-color-border-strong: #0F172A;
292
315
  --rhc-color-border-subdued: #94A3B8;
293
316
  --rhc-color-border-default: #64748B;
294
- --rhc-color-foreground-link: #01689b;
295
317
  --rhc-color-foreground-on-emphasis: #fff;
318
+ --rhc-color-foreground-link: #01689b;
296
319
  --rhc-color-foreground-subdued: #334155;
297
320
  --rhc-color-foreground-default: #0F172A;
298
321
  --rhc-color-focus-outline: #000;
@@ -346,6 +369,7 @@
346
369
  --rhc-card-as-link-heading-font-weight: 700;
347
370
  --rhc-card-as-link-heading-font-size: 1.5rem;
348
371
  --rhc-card-as-link-heading-padding-block-start: 0.5rem;
372
+ --rhc-card-as-link-heading-color: #154273;
349
373
  --rhc-card-as-link-full-bleed-opacity: 0.5;
350
374
  --rhc-card-as-link-full-bleed-color: #fff;
351
375
  --rhc-card-as-link-full-bleed-border-color: transparent;
@@ -361,14 +385,14 @@
361
385
  --rhc-card-as-link-padding-inline-end: 1rem;
362
386
  --rhc-card-as-link-padding-block-start: 1rem;
363
387
  --rhc-card-as-link-padding-block-end: 1rem;
364
- --rhc-card-as-link-metadata-color: #0F172A;
388
+ --rhc-card-as-link-metadata-color: #334155;
365
389
  --rhc-card-as-link-link-focus-text-decoration: none;
366
390
  --rhc-card-as-link-link-hover-text-decoration: none;
367
391
  --rhc-card-as-link-link-active-text-decoration: none;
368
392
  --rhc-card-as-link-link-text-decoration: underline;
369
393
  --rhc-card-as-link-link-color: #01689b;
370
394
  --rhc-card-as-link-icon-size: 24px;
371
- --rhc-card-as-link-icon-color: #0F172A;
395
+ --rhc-card-as-link-icon-color: #154273;
372
396
  --rhc-card-as-link-inline-size: 328px;
373
397
  --rhc-card-as-link-column-gap: 1rem;
374
398
  --rhc-card-as-link-color: #0F172A;
@@ -738,11 +762,17 @@
738
762
  --utrecht-breadcrumb-nav-link-icon-size: 24px;
739
763
  --utrecht-breadcrumb-nav-font-size: 1.25rem;
740
764
  --utrecht-breadcrumb-nav-line-height: 1.4;
765
+ --utrecht-button-pressed-color: #fff;
766
+ --utrecht-button-pressed-border-color: transparent;
767
+ --utrecht-button-pressed-background-color: #1E293B;
768
+ --utrecht-button-subtle-pressed-color: #162945;
769
+ --utrecht-button-subtle-pressed-border-color: transparent;
770
+ --utrecht-button-subtle-pressed-background-color: #b8c6d5;
741
771
  --utrecht-button-subtle-line-height: 1.875rem;
742
772
  --utrecht-button-subtle-active-color: #0d2845;
743
773
  --utrecht-button-subtle-active-border-color: transparent;
744
- --utrecht-button-subtle-active-background-color: transparent;
745
- --utrecht-button-subtle-focus-color: #154273;
774
+ --utrecht-button-subtle-active-background-color: #95a9c0;
775
+ --utrecht-button-subtle-focus-color: #162f50;
746
776
  --utrecht-button-subtle-focus-border-color: transparent;
747
777
  --utrecht-button-subtle-focus-background-color: #dce3ea;
748
778
  --utrecht-button-subtle-disabled-color: #b8c6d5;
@@ -753,27 +783,33 @@
753
783
  --utrecht-button-subtle-background-color: transparent;
754
784
  --utrecht-button-subtle-hover-color: #162f50;
755
785
  --utrecht-button-subtle-hover-border-color: transparent;
756
- --utrecht-button-subtle-hover-background-color: transparent;
786
+ --utrecht-button-subtle-hover-background-color: #dce3ea;
757
787
  --utrecht-button-subtle-font-weight: 700;
758
788
  --utrecht-button-subtle-font-size: 1.25rem;
789
+ --utrecht-button-secondary-action-pressed-color: #162945;
790
+ --utrecht-button-secondary-action-pressed-border-color: #162945;
791
+ --utrecht-button-secondary-action-pressed-background-color: #b8c6d5;
759
792
  --utrecht-button-secondary-action-line-height: 1.875rem;
760
793
  --utrecht-button-secondary-action-font-size: 1.25rem;
761
- --utrecht-button-secondary-action-active-color: #154273;
762
- --utrecht-button-secondary-action-active-border-color: #154273;
794
+ --utrecht-button-secondary-action-active-color: #162f50;
795
+ --utrecht-button-secondary-action-active-border-color: #162945;
763
796
  --utrecht-button-secondary-action-active-background-color: #95a9c0;
764
797
  --utrecht-button-secondary-action-font-weight: 700;
765
- --utrecht-button-secondary-action-focus-color: #154273;
798
+ --utrecht-button-secondary-action-focus-color: #162f50;
766
799
  --utrecht-button-secondary-action-focus-border-color: transparent;
767
- --utrecht-button-secondary-action-focus-background-color: #b8c6d5;
800
+ --utrecht-button-secondary-action-focus-background-color: #dce3ea;
768
801
  --utrecht-button-secondary-action-disabled-color: #738eab;
769
- --utrecht-button-secondary-action-disabled-border-color: #738eab;
802
+ --utrecht-button-secondary-action-disabled-border-color: #95a9c0;
770
803
  --utrecht-button-secondary-action-disabled-background-color: transparent;
771
804
  --utrecht-button-secondary-action-color: #154273;
772
805
  --utrecht-button-secondary-action-border-color: #154273;
773
806
  --utrecht-button-secondary-action-background-color: transparent;
774
- --utrecht-button-secondary-action-hover-color: #154273;
775
- --utrecht-button-secondary-action-hover-border-color: transparent;
776
- --utrecht-button-secondary-action-hover-background-color: #b8c6d5;
807
+ --utrecht-button-secondary-action-hover-color: #162f50;
808
+ --utrecht-button-secondary-action-hover-border-color: #162f50;
809
+ --utrecht-button-secondary-action-hover-background-color: #dce3ea;
810
+ --utrecht-button-primary-action-pressed-color: #fff;
811
+ --utrecht-button-primary-action-pressed-border-color: transparent;
812
+ --utrecht-button-primary-action-pressed-background-color: #162945;
777
813
  --utrecht-button-primary-action-line-height: 1.875rem;
778
814
  --utrecht-button-primary-action-font-size: 1.25rem;
779
815
  --utrecht-button-primary-action-active-color: #fff;
@@ -782,9 +818,9 @@
782
818
  --utrecht-button-primary-action-font-weight: 700;
783
819
  --utrecht-button-primary-action-focus-color: #fff;
784
820
  --utrecht-button-primary-action-focus-border-color: transparent;
785
- --utrecht-button-primary-action-focus-background-color: #154273;
821
+ --utrecht-button-primary-action-focus-background-color: #162f50;
786
822
  --utrecht-button-primary-action-disabled-color: #4f7196;
787
- --utrecht-button-primary-action-disabled-border-color: #95a9c0;
823
+ --utrecht-button-primary-action-disabled-border-color: transparent;
788
824
  --utrecht-button-primary-action-disabled-background-color: #b8c6d5;
789
825
  --utrecht-button-primary-action-color: #fff;
790
826
  --utrecht-button-primary-action-border-color: transparent;
@@ -795,18 +831,18 @@
795
831
  --utrecht-button-column-gap: 0.5rem;
796
832
  --utrecht-button-min-inline-size: 48px;
797
833
  --utrecht-button-min-block-size: 48px;
798
- --utrecht-button-active-color: #0F172A;
799
- --utrecht-button-active-border-color: #0F172A;
800
- --utrecht-button-active-background-color: #CBD5E1;
801
- --utrecht-button-hover-color: #1E293B;
802
- --utrecht-button-hover-border-color: #1E293B;
803
- --utrecht-button-hover-background-color: #F8FAFC;
804
- --utrecht-button-focus-color: #1E293B;
834
+ --utrecht-button-active-color: #fff;
835
+ --utrecht-button-active-border-color: transparent;
836
+ --utrecht-button-active-background-color: #1E293B;
837
+ --utrecht-button-hover-color: #fff;
838
+ --utrecht-button-hover-border-color: transparent;
839
+ --utrecht-button-hover-background-color: #475569;
840
+ --utrecht-button-focus-color: #fff;
805
841
  --utrecht-button-focus-border-color: transparent;
806
- --utrecht-button-focus-background-color: #FDDE94;
807
- --utrecht-button-disabled-color: #64748B;
842
+ --utrecht-button-focus-background-color: #475569;
843
+ --utrecht-button-disabled-color: #94A3B8;
808
844
  --utrecht-button-disabled-border-color: transparent;
809
- --utrecht-button-disabled-background-color: #F8FAFC;
845
+ --utrecht-button-disabled-background-color: #E2E8F0;
810
846
  --utrecht-button-padding-inline-start: 1rem;
811
847
  --utrecht-button-padding-inline-end: 1rem;
812
848
  --utrecht-button-padding-block-start: 0.5rem;
@@ -819,9 +855,9 @@
819
855
  --utrecht-button-icon-gap: 0.5rem;
820
856
  --utrecht-button-border-width: 1px;
821
857
  --utrecht-button-border-radius: 5px;
822
- --utrecht-button-color: #334155;
823
- --utrecht-button-border-color: #334155;
824
- --utrecht-button-background-color: transparent;
858
+ --utrecht-button-color: #fff;
859
+ --utrecht-button-border-color: transparent;
860
+ --utrecht-button-background-color: #0F172A;
825
861
  --utrecht-button-group-row-gap: 0.5rem;
826
862
  --utrecht-button-group-padding-block-start: 0px;
827
863
  --utrecht-button-group-padding-block-end: 0px;
@@ -887,6 +923,19 @@
887
923
  --utrecht-checkbox-icon-size: 24px;
888
924
  --utrecht-checkbox-size: 24px;
889
925
  --utrecht-checkbox-border-radius: 2.5px;
926
+ --utrecht-number-badge-padding-block: 0.5rem;
927
+ --utrecht-number-badge-padding-inline: 0.5rem;
928
+ --utrecht-number-badge-color: #fff;
929
+ --utrecht-number-badge-border-color: transparent;
930
+ --utrecht-number-badge-background-color: #154273;
931
+ --utrecht-number-badge-font-family: Fira Sans, Arial, Verdana, sans-serif;
932
+ --utrecht-number-badge-border-radius: 999px;
933
+ --utrecht-number-badge-border-width: 0px;
934
+ --utrecht-number-badge-font-weight: 700;
935
+ --utrecht-number-badge-min-inline-size: 24px;
936
+ --utrecht-number-badge-min-block-size: 24px;
937
+ --utrecht-number-badge-line-height: 150%;
938
+ --utrecht-number-badge-font-size: 1.25rem;
890
939
  --utrecht-form-fieldset-invalid-border-inline-start-width: 0px;
891
940
  --utrecht-form-fieldset-invalid-padding-inline-start: 0;
892
941
  --utrecht-form-fieldset-invalid-border-inline-start-color: #d52b1e;
@@ -946,6 +995,41 @@
946
995
  --utrecht-form-label-font-weight: 700;
947
996
  --utrecht-form-label-font-size: 1.25rem;
948
997
  --utrecht-form-label-color: #0F172A;
998
+ --utrecht-heading-5-margin-block-start: 0;
999
+ --utrecht-heading-5-margin-block-end: 0;
1000
+ --utrecht-heading-5-font-size: 1.25rem;
1001
+ --utrecht-heading-5-line-height: 125%;
1002
+ --utrecht-heading-5-font-weight: 700;
1003
+ --utrecht-heading-5-font-family: Fira Sans, Arial, Verdana, sans-serif;
1004
+ --utrecht-heading-5-color: #154273;
1005
+ --utrecht-heading-4-margin-block-start: 0;
1006
+ --utrecht-heading-4-margin-block-end: 0;
1007
+ --utrecht-heading-4-font-size: 1.5rem;
1008
+ --utrecht-heading-4-line-height: 125%;
1009
+ --utrecht-heading-4-font-weight: 700;
1010
+ --utrecht-heading-4-font-family: Fira Sans, Arial, Verdana, sans-serif;
1011
+ --utrecht-heading-4-color: #154273;
1012
+ --utrecht-heading-3-margin-block-start: 0;
1013
+ --utrecht-heading-3-margin-block-end: 0;
1014
+ --utrecht-heading-3-font-size: 1.875rem;
1015
+ --utrecht-heading-3-line-height: 125%;
1016
+ --utrecht-heading-3-font-weight: 700;
1017
+ --utrecht-heading-3-font-family: Fira Sans, Arial, Verdana, sans-serif;
1018
+ --utrecht-heading-3-color: #154273;
1019
+ --utrecht-heading-2-margin-block-start: 0;
1020
+ --utrecht-heading-2-margin-block-end: 0;
1021
+ --utrecht-heading-2-font-size: 2.5rem;
1022
+ --utrecht-heading-2-line-height: 125%;
1023
+ --utrecht-heading-2-font-weight: 700;
1024
+ --utrecht-heading-2-font-family: Fira Sans, Arial, Verdana, sans-serif;
1025
+ --utrecht-heading-2-color: #154273;
1026
+ --utrecht-heading-1-margin-block-start: 0;
1027
+ --utrecht-heading-1-margin-block-end: 0;
1028
+ --utrecht-heading-1-font-size: 3.125rem;
1029
+ --utrecht-heading-1-line-height: 125%;
1030
+ --utrecht-heading-1-font-weight: 700;
1031
+ --utrecht-heading-1-font-family: Fira Sans, Arial, Verdana, sans-serif;
1032
+ --utrecht-heading-1-color: #154273;
949
1033
  --utrecht-link-line-height: 150%;
950
1034
  --utrecht-link-font-size: 1.25rem;
951
1035
  --utrecht-link-font-weight: 400;
@@ -987,6 +1071,17 @@
987
1071
  --utrecht-ordered-list-margin-block-start: 0.25rem;
988
1072
  --utrecht-ordered-list-margin-block-end: 0.25rem;
989
1073
  --utrecht-ordered-list-padding-inline-start: 1.5rem;
1074
+ --utrecht-paragraph-lead-line-height: 150%;
1075
+ --utrecht-paragraph-lead-font-weight: 400;
1076
+ --utrecht-paragraph-lead-font-size: 1.5rem;
1077
+ --utrecht-paragraph-lead-color: #0F172A;
1078
+ --utrecht-paragraph-margin-block-start: 0;
1079
+ --utrecht-paragraph-margin-block-end: 0;
1080
+ --utrecht-paragraph-line-height: 150%;
1081
+ --utrecht-paragraph-font-weight: 400;
1082
+ --utrecht-paragraph-font-size: 1.25rem;
1083
+ --utrecht-paragraph-font-family: Fira Sans, Arial, Verdana, sans-serif;
1084
+ --utrecht-paragraph-color: #0F172A;
990
1085
  --utrecht-radio-button-border-width: 1px;
991
1086
  --utrecht-radio-button-border-radius: 999px;
992
1087
  --utrecht-radio-button-hover-border-width: 1px;
@@ -1063,6 +1158,34 @@
1063
1158
  --utrecht-separator-margin-block-end: 0.75rem;
1064
1159
  --utrecht-separator-block-size: 2px;
1065
1160
  --utrecht-separator-color: #CBD5E1;
1161
+ --utrecht-skip-link-text-underline-offset: 0.125rem;
1162
+ --utrecht-skip-link-text-decoration: underline;
1163
+ --utrecht-skip-link-box-block-end-shadow-color: #0000001a;
1164
+ --utrecht-skip-link-box-block-end-shadow-spread-radius: 0;
1165
+ --utrecht-skip-link-box-block-end-shadow-blur-radius: 48px;
1166
+ --utrecht-skip-link-box-block-end-shadow-offset-y: 16px;
1167
+ --utrecht-skip-link-box-block-end-shadow-offset-x: 0;
1168
+ --utrecht-skip-link-border-width: 2px;
1169
+ --utrecht-skip-link-color: #fff;
1170
+ --utrecht-skip-link-border-color: transparent;
1171
+ --utrecht-skip-link-background-color: #154273;
1172
+ --utrecht-skip-link-focus-visible-outline-color: #000;
1173
+ --utrecht-skip-link-focus-text-decoration: None;
1174
+ --utrecht-skip-link-focus-color: #0F172A;
1175
+ --utrecht-skip-link-focus-border-width: 2px;
1176
+ --utrecht-skip-link-focus-border-style: solid;
1177
+ --utrecht-skip-link-focus-border-color: #154273;
1178
+ --utrecht-skip-link-focus-background-color: #fff;
1179
+ --utrecht-skip-link-padding-inline-start: 1rem;
1180
+ --utrecht-skip-link-padding-inline-end: 1rem;
1181
+ --utrecht-skip-link-padding-block-start: 0.75rem;
1182
+ --utrecht-skip-link-padding-block-end: 0.75rem;
1183
+ --utrecht-skip-link-min-inline-size: 48px;
1184
+ --utrecht-skip-link-min-block-size: 48px;
1185
+ --utrecht-skip-link-line-height: 150%;
1186
+ --utrecht-skip-link-font-size: 1.25rem;
1187
+ --utrecht-skip-link-font-family: Fira Sans, Arial, Verdana, sans-serif;
1188
+ --utrecht-skip-link-font-weight: 700;
1066
1189
  --utrecht-table-font-size: 1.25rem;
1067
1190
  --utrecht-table-container-box-inline-start-shadow-color: #0000001a;
1068
1191
  --utrecht-table-container-box-inline-start-shadow-spread: 0;