@rijkshuisstijl-community/design-tokens 7.0.0 → 9.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 (104) hide show
  1. package/CHANGELOG.md +84 -0
  2. package/dist/_variables.scss +14 -56
  3. package/dist/index.css +14 -56
  4. package/dist/index.d.ts +8 -50
  5. package/dist/index.js +14 -56
  6. package/dist/index.json +13 -55
  7. package/dist/index.tokens.json +18 -72
  8. package/dist/koop/_variables.scss +39 -79
  9. package/dist/koop/index.css +39 -79
  10. package/dist/koop/index.d.ts +33 -73
  11. package/dist/koop/index.js +39 -79
  12. package/dist/koop/index.json +38 -78
  13. package/dist/koop/index.tokens.json +73 -129
  14. package/dist/koop/root.css +39 -79
  15. package/dist/koop/tokens.d.ts +68 -124
  16. package/dist/koop/tokens.js +1187 -2057
  17. package/dist/root.css +14 -56
  18. package/dist/tokens.d.ts +13 -67
  19. package/dist/tokens.js +280 -1232
  20. package/dist/uitvoerend-groen/_variables.scss +27 -65
  21. package/dist/uitvoerend-groen/index.css +27 -65
  22. package/dist/uitvoerend-groen/index.d.ts +21 -59
  23. package/dist/uitvoerend-groen/index.js +27 -65
  24. package/dist/uitvoerend-groen/index.json +26 -64
  25. package/dist/uitvoerend-groen/index.tokens.json +51 -101
  26. package/dist/uitvoerend-groen/root.css +27 -65
  27. package/dist/uitvoerend-groen/tokens.d.ts +46 -96
  28. package/dist/uitvoerend-groen/tokens.js +526 -1394
  29. package/dist/uitvoerend-hemelblauw/_variables.scss +27 -65
  30. package/dist/uitvoerend-hemelblauw/index.css +27 -65
  31. package/dist/uitvoerend-hemelblauw/index.d.ts +21 -59
  32. package/dist/uitvoerend-hemelblauw/index.js +27 -65
  33. package/dist/uitvoerend-hemelblauw/index.json +26 -64
  34. package/dist/uitvoerend-hemelblauw/index.tokens.json +51 -101
  35. package/dist/uitvoerend-hemelblauw/root.css +27 -65
  36. package/dist/uitvoerend-hemelblauw/tokens.d.ts +46 -96
  37. package/dist/uitvoerend-hemelblauw/tokens.js +526 -1394
  38. package/dist/uitvoerend-mintgroen/_variables.scss +27 -65
  39. package/dist/uitvoerend-mintgroen/index.css +27 -65
  40. package/dist/uitvoerend-mintgroen/index.d.ts +21 -59
  41. package/dist/uitvoerend-mintgroen/index.js +27 -65
  42. package/dist/uitvoerend-mintgroen/index.json +26 -64
  43. package/dist/uitvoerend-mintgroen/index.tokens.json +51 -101
  44. package/dist/uitvoerend-mintgroen/root.css +27 -65
  45. package/dist/uitvoerend-mintgroen/tokens.d.ts +46 -96
  46. package/dist/uitvoerend-mintgroen/tokens.js +526 -1394
  47. package/dist/uitvoerend-oranje/_variables.scss +27 -65
  48. package/dist/uitvoerend-oranje/index.css +27 -65
  49. package/dist/uitvoerend-oranje/index.d.ts +21 -59
  50. package/dist/uitvoerend-oranje/index.js +27 -65
  51. package/dist/uitvoerend-oranje/index.json +26 -64
  52. package/dist/uitvoerend-oranje/index.tokens.json +51 -101
  53. package/dist/uitvoerend-oranje/root.css +27 -65
  54. package/dist/uitvoerend-oranje/tokens.d.ts +46 -96
  55. package/dist/uitvoerend-oranje/tokens.js +526 -1394
  56. package/dist/uitvoerend-paars/_variables.scss +27 -65
  57. package/dist/uitvoerend-paars/index.css +27 -65
  58. package/dist/uitvoerend-paars/index.d.ts +21 -59
  59. package/dist/uitvoerend-paars/index.js +27 -65
  60. package/dist/uitvoerend-paars/index.json +26 -64
  61. package/dist/uitvoerend-paars/index.tokens.json +51 -101
  62. package/dist/uitvoerend-paars/root.css +27 -65
  63. package/dist/uitvoerend-paars/tokens.d.ts +46 -96
  64. package/dist/uitvoerend-paars/tokens.js +526 -1394
  65. package/dist/uitvoerend-violet/_variables.scss +27 -65
  66. package/dist/uitvoerend-violet/index.css +27 -65
  67. package/dist/uitvoerend-violet/index.d.ts +21 -59
  68. package/dist/uitvoerend-violet/index.js +27 -65
  69. package/dist/uitvoerend-violet/index.json +26 -64
  70. package/dist/uitvoerend-violet/index.tokens.json +51 -101
  71. package/dist/uitvoerend-violet/root.css +27 -65
  72. package/dist/uitvoerend-violet/tokens.d.ts +46 -96
  73. package/dist/uitvoerend-violet/tokens.js +526 -1394
  74. package/dist/uitvoerend-violet-oud/_variables.scss +27 -65
  75. package/dist/uitvoerend-violet-oud/index.css +27 -65
  76. package/dist/uitvoerend-violet-oud/index.d.ts +21 -59
  77. package/dist/uitvoerend-violet-oud/index.js +27 -65
  78. package/dist/uitvoerend-violet-oud/index.json +26 -64
  79. package/dist/uitvoerend-violet-oud/index.tokens.json +51 -101
  80. package/dist/uitvoerend-violet-oud/root.css +27 -65
  81. package/dist/uitvoerend-violet-oud/tokens.d.ts +46 -96
  82. package/dist/uitvoerend-violet-oud/tokens.js +526 -1394
  83. package/dist/wetgevend/_variables.scss +27 -65
  84. package/dist/wetgevend/index.css +27 -65
  85. package/dist/wetgevend/index.d.ts +21 -59
  86. package/dist/wetgevend/index.js +27 -65
  87. package/dist/wetgevend/index.json +26 -64
  88. package/dist/wetgevend/index.tokens.json +51 -101
  89. package/dist/wetgevend/root.css +27 -65
  90. package/dist/wetgevend/tokens.d.ts +46 -96
  91. package/dist/wetgevend/tokens.js +526 -1394
  92. package/figma/figma.tokens.json +100 -390
  93. package/package.json +1 -1
  94. package/src/generated/base.tokens.json +39 -219
  95. package/src/generated/koop/tokens.json +190 -346
  96. package/src/generated/themes.json +1062 -2530
  97. package/src/generated/uitvoerend-groen/tokens.json +109 -273
  98. package/src/generated/uitvoerend-hemelblauw/tokens.json +109 -273
  99. package/src/generated/uitvoerend-mintgroen/tokens.json +109 -273
  100. package/src/generated/uitvoerend-oranje/tokens.json +109 -273
  101. package/src/generated/uitvoerend-paars/tokens.json +109 -273
  102. package/src/generated/uitvoerend-violet/tokens.json +109 -273
  103. package/src/generated/uitvoerend-violet-oud/tokens.json +109 -273
  104. package/src/generated/wetgevend/tokens.json +109 -273
package/dist/root.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 09 Sep 2025 07:01:23 GMT
3
+ * Generated on Mon, 27 Oct 2025 09:20:39 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -268,6 +268,8 @@
268
268
  --utrecht-backdrop-opacity: 0.8;
269
269
  --utrecht-backdrop-color: #0F172A;
270
270
  --utrecht-backdrop-background-color: #0000004d;
271
+ --utrecht-blockquote-content-font-size: 1.25rem;
272
+ --utrecht-blockquote-content-color: #154273;
271
273
  --utrecht-blockquote-attribution-font-size: 1.25rem;
272
274
  --utrecht-blockquote-attribution-color: #154273;
273
275
  --utrecht-blockquote-row-gap: 0.75rem;
@@ -283,46 +285,6 @@
283
285
  --utrecht-blockquote-border-color: transparent;
284
286
  --utrecht-blockquote-border-inline-start-width: 0px;
285
287
  --utrecht-blockquote-background-color: transparent;
286
- --utrecht-blockquote-pink-left-border-variation-padding-inline-start: 2.5rem;
287
- --utrecht-blockquote-pink-left-border-variation-padding-inline-end: 2.5rem;
288
- --utrecht-blockquote-pink-left-border-variation-padding-block-start: 1.5rem;
289
- --utrecht-blockquote-pink-left-border-variation-padding-block-end: 1.5rem;
290
- --utrecht-blockquote-pink-left-border-variation-border-inline-start-width: 0.75rem;
291
- --utrecht-blockquote-pink-left-border-variation-border-color: #F6BDE1;
292
- --utrecht-blockquote-pink-corner-border-variation-padding: 2.5rem;
293
- --utrecht-blockquote-pink-corner-border-variation-border-start-start-radius: 3rem;
294
- --utrecht-blockquote-pink-corner-border-variation-border-inline-start-width: 0.25rem;
295
- --utrecht-blockquote-pink-corner-border-variation-border-color: #F6BDE1;
296
- --utrecht-blockquote-pink-corner-border-variation-border-block-start-width: 0.25rem;
297
- --utrecht-blockquote-pink-background-variation-padding: 2.5rem;
298
- --utrecht-blockquote-pink-background-variation-border-end-start-radius: 3rem;
299
- --utrecht-blockquote-pink-background-variation-background-color: #F6BDE1;
300
- --utrecht-blockquote-content-font-size: 1.25rem;
301
- --utrecht-blockquote-content-color: #154273;
302
- --utrecht-blockquote-content-line-height: 150%;
303
- --utrecht-blockquote-content-font-weight: 400;
304
- --utrecht-blockquote-content-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
305
- --utrecht-blockquote-caption-padding-block-start: 0.75rem;
306
- --utrecht-blockquote-caption-line-height: 150%;
307
- --utrecht-blockquote-caption-font-weight: 400;
308
- --utrecht-blockquote-caption-font-size: 1.25rem;
309
- --utrecht-blockquote-caption-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
310
- --utrecht-blockquote-caption-color: #154273;
311
- --utrecht-blockquote-blue-corner-border-variation-border-inline-end-width: 2px;
312
- --utrecht-blockquote-blue-corner-border-variation-border-end-end-radius: 3rem;
313
- --utrecht-blockquote-blue-corner-border-variation-border-color: #154273;
314
- --utrecht-blockquote-blue-corner-border-variation-border-block-end-width: 2px;
315
- --utrecht-blockquote-margin-inline-start: 0;
316
- --utrecht-blockquote-margin-inline-end: 0;
317
- --utrecht-blockquote-margin-block-start: 0;
318
- --utrecht-blockquote-margin-block-end: 0;
319
- --utrecht-blockquote-border-start-start-radius: 0;
320
- --utrecht-blockquote-border-start-end-radius: 0;
321
- --utrecht-blockquote-border-inline-end-width: 0;
322
- --utrecht-blockquote-border-end-start-radius: 0;
323
- --utrecht-blockquote-border-end-end-radius: 0;
324
- --utrecht-blockquote-border-block-start-width: 0;
325
- --utrecht-blockquote-border-block-end-width: 0;
326
288
  --utrecht-breadcrumb-nav-link-icon-size: 24px;
327
289
  --utrecht-breadcrumb-nav-link-hover-color: #01496c;
328
290
  --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
@@ -517,8 +479,8 @@
517
479
  --utrecht-drawer-background-color: #fff;
518
480
  --utrecht-drawer-z-index: 1;
519
481
  --utrecht-drawer-max-inline-size: 256px;
520
- --utrecht-form-fieldset-invalid-border-inline-start-width: 0px;
521
- --utrecht-form-fieldset-invalid-padding-inline-start: 0rem;
482
+ --utrecht-form-fieldset-invalid-border-inline-start-width: 2px;
483
+ --utrecht-form-fieldset-invalid-padding-inline-start: 1rem;
522
484
  --utrecht-form-fieldset-invalid-border-inline-start-color: #d52b1e;
523
485
  --utrecht-form-fieldset-section-color: #0F172A;
524
486
  --utrecht-form-fieldset-section-background-color: transparent;
@@ -546,8 +508,8 @@
546
508
  --utrecht-page-footer-padding-block-start: 3rem;
547
509
  --utrecht-page-footer-color: #fff;
548
510
  --utrecht-page-footer-background-color: #154273;
549
- --utrecht-form-field-invalid-padding-inline-start: 0rem;
550
- --utrecht-form-field-invalid-border-inline-start-width: 0px;
511
+ --utrecht-form-field-invalid-padding-inline-start: 1rem;
512
+ --utrecht-form-field-invalid-border-inline-start-width: 2px;
551
513
  --utrecht-form-field-invalid-border-inline-start-color: #d52b1e;
552
514
  --utrecht-form-field-margin-block-start: 0.5rem;
553
515
  --utrecht-form-field-margin-block-end: 0.5rem;
@@ -558,7 +520,6 @@
558
520
  --utrecht-form-field-description-font-size: 1.25rem;
559
521
  --utrecht-form-field-description-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
560
522
  --utrecht-form-field-description-color: #334155;
561
- --utrecht-form-field-description-padding-block-end: 0.5rem;
562
523
  --utrecht-form-field-error-message-padding-inline-start: 0rem;
563
524
  --utrecht-form-field-error-message-padding-inline-end: 0rem;
564
525
  --utrecht-form-field-error-message-padding-block-start: 0rem;
@@ -571,8 +532,6 @@
571
532
  --utrecht-form-field-error-message-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
572
533
  --utrecht-form-field-error-message-color: #d52b1e;
573
534
  --utrecht-form-field-error-message-background-color: transparent;
574
- --utrecht-form-field-error-message-icon-size: 24px;
575
- --utrecht-form-field-error-message-icon-margin-inline-end: 0.5rem;
576
535
  --utrecht-form-label-disabled-color: #94A3B8;
577
536
  --utrecht-form-label-checked-font-weight: 400;
578
537
  --utrecht-form-label-radio-font-weight: 400;
@@ -629,10 +588,6 @@
629
588
  --utrecht-ordered-list-margin-block-end: 0.25rem;
630
589
  --utrecht-ordered-list-line-height: 150%;
631
590
  --utrecht-ordered-list-font-size: 1.25rem;
632
- --utrecht-ordered-list-margin-inline-start: 0.625rem;
633
- --utrecht-ordered-list-font-weight: 400;
634
- --utrecht-ordered-list-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
635
- --utrecht-ordered-list-color: #0F172A;
636
591
  --utrecht-pre-heading-font-size: 1rem;
637
592
  --utrecht-pre-heading-line-height: 125%;
638
593
  --utrecht-pre-heading-font-weight: 700;
@@ -871,7 +826,7 @@
871
826
  --rhc-border-width-default: 1px;
872
827
  --rhc-font-family-secondary: RijksoverheidSerifWeb, 'Times New Roman', serif;
873
828
  --rhc-font-family-primary: 'Fira Sans', Arial, Verdana, sans-serif;
874
- --rhc-size-3-lint: 1440px;
829
+ --rhc-size-3-lint: 144px;
875
830
  --rhc-size-2-lint: 96px;
876
831
  --rhc-size-lint: 48px;
877
832
  --rhc-size-half-lint: 24px;
@@ -915,7 +870,6 @@
915
870
  --rhc-focus-outline-style: solid;
916
871
  --rhc-focus-outline-offset: 0.125rem;
917
872
  --rhc-color-none: transparent;
918
- --rhc-color-transparent-30: #0000004d;
919
873
  --rhc-color-zwart: #000;
920
874
  --rhc-color-wit: #fff;
921
875
  --rhc-color-lintblauw-500: #154273;
@@ -1057,7 +1011,6 @@
1057
1011
  --rhc-color-border-strong: #0F172A;
1058
1012
  --rhc-color-border-subdued: #94A3B8;
1059
1013
  --rhc-color-border-default: #64748B;
1060
- --rhc-color-backdrop: #0000004d;
1061
1014
  --rhc-color-foreground-on-light-color: #000;
1062
1015
  --rhc-color-foreground-on-dark-color: #fff;
1063
1016
  --rhc-color-foreground-link: #01689b;
@@ -1088,7 +1041,11 @@
1088
1041
  --rhc-keep-top-left-border-radius-bottom-right: 0;
1089
1042
  --rhc-keep-top-left-border-radius-top-right: 0;
1090
1043
  --rhc-keep-top-left-border-radius-top-left: 48px;
1091
- --rhc-keep-comment: ⚠️ Deze tokens zijn legacy en worden vervangen door de tokenset components/blockquote.;
1044
+ --rhc-keep-comment: ⚠️ Deze tokens zijn legacy en worden vervangen door de tokenset common/rounded-corner.;
1045
+ --rhc-blockquote-margin-inline-start: 0rem;
1046
+ --rhc-blockquote-margin-inline-end: 0rem;
1047
+ --rhc-blockquote-margin-block-start: 0rem;
1048
+ --rhc-blockquote-margin-block-end: 0rem;
1092
1049
  --rhc-breadcrumb-nav-link-current-color: #334155;
1093
1050
  --rhc-card-as-link-horizontal-heading-inline-size: 200px;
1094
1051
  --rhc-card-as-link-horizontal-padding-inline-start: 1rem;
@@ -1325,6 +1282,7 @@
1325
1282
  --rhc-nav-bar-color: #154273;
1326
1283
  --rhc-nav-bar-background-color: #fff;
1327
1284
  --rhc-nav-bar-heading-font-weight: 700;
1285
+ --rhc-nav-bar-link-font-size: 1.25rem;
1328
1286
  --rhc-nav-bar-link-column-gap: 0.5rem;
1329
1287
  --rhc-nav-bar-link-padding-inline-start: 0.75rem;
1330
1288
  --rhc-nav-bar-link-padding-inline-end: 0.75rem;
package/dist/tokens.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 09 Sep 2025 07:01:22 GMT
3
+ * Generated on Mon, 27 Oct 2025 09:20:39 GMT
4
4
  */
5
5
 
6
6
  export default tokens;
@@ -225,7 +225,8 @@ declare const tokens: {
225
225
  "padding-block-start": DesignToken,
226
226
  "padding-inline-end": DesignToken,
227
227
  "padding-inline-start": DesignToken,
228
- "column-gap": DesignToken
228
+ "column-gap": DesignToken,
229
+ "font-size": DesignToken
229
230
  },
230
231
  "heading": {
231
232
  "font-weight": DesignToken
@@ -622,6 +623,12 @@ declare const tokens: {
622
623
  }
623
624
  }
624
625
  },
626
+ "blockquote": {
627
+ "margin-block-end": DesignToken,
628
+ "margin-block-start": DesignToken,
629
+ "margin-inline-end": DesignToken,
630
+ "margin-inline-start": DesignToken
631
+ },
625
632
  "keep": {
626
633
  "_comment": DesignToken,
627
634
  "top-left": {
@@ -678,7 +685,6 @@ declare const tokens: {
678
685
  "on-dark-color": DesignToken,
679
686
  "on-light-color": DesignToken
680
687
  },
681
- "backdrop": DesignToken,
682
688
  "border": {
683
689
  "default": DesignToken,
684
690
  "subdued": DesignToken,
@@ -876,9 +882,6 @@ declare const tokens: {
876
882
  },
877
883
  "wit": DesignToken,
878
884
  "zwart": DesignToken,
879
- "transparent": {
880
- "30": DesignToken
881
- },
882
885
  "none": DesignToken
883
886
  },
884
887
  "focus": {
@@ -1299,10 +1302,6 @@ declare const tokens: {
1299
1302
  "font-size": DesignToken
1300
1303
  },
1301
1304
  "ordered-list": {
1302
- "color": DesignToken,
1303
- "font-family": DesignToken,
1304
- "font-weight": DesignToken,
1305
- "margin-inline-start": DesignToken,
1306
1305
  "font-size": DesignToken,
1307
1306
  "line-height": DesignToken,
1308
1307
  "margin-block-end": DesignToken,
@@ -1397,10 +1396,6 @@ declare const tokens: {
1397
1396
  }
1398
1397
  },
1399
1398
  "form-field-error-message": {
1400
- "icon": {
1401
- "margin-inline-end": DesignToken,
1402
- "size": DesignToken
1403
- },
1404
1399
  "background-color": DesignToken,
1405
1400
  "color": DesignToken,
1406
1401
  "font-family": DesignToken,
@@ -1415,7 +1410,6 @@ declare const tokens: {
1415
1410
  "padding-inline-start": DesignToken
1416
1411
  },
1417
1412
  "form-field-description": {
1418
- "padding-block-end": DesignToken,
1419
1413
  "color": DesignToken,
1420
1414
  "font-family": DesignToken,
1421
1415
  "font-size": DesignToken,
@@ -1793,58 +1787,6 @@ declare const tokens: {
1793
1787
  }
1794
1788
  },
1795
1789
  "blockquote": {
1796
- "border-block-end-width": DesignToken,
1797
- "border-block-start-width": DesignToken,
1798
- "border-end-end-radius": DesignToken,
1799
- "border-end-start-radius": DesignToken,
1800
- "border-inline-end-width": DesignToken,
1801
- "border-start-end-radius": DesignToken,
1802
- "border-start-start-radius": DesignToken,
1803
- "margin-block-end": DesignToken,
1804
- "margin-block-start": DesignToken,
1805
- "margin-inline-end": DesignToken,
1806
- "margin-inline-start": DesignToken,
1807
- "blue-corner-border-variation": {
1808
- "border-block-end-width": DesignToken,
1809
- "border-color": DesignToken,
1810
- "border-end-end-radius": DesignToken,
1811
- "border-inline-end-width": DesignToken
1812
- },
1813
- "caption": {
1814
- "color": DesignToken,
1815
- "font-family": DesignToken,
1816
- "font-size": DesignToken,
1817
- "font-weight": DesignToken,
1818
- "line-height": DesignToken,
1819
- "padding-block-start": DesignToken
1820
- },
1821
- "content": {
1822
- "font-family": DesignToken,
1823
- "font-weight": DesignToken,
1824
- "line-height": DesignToken,
1825
- "color": DesignToken,
1826
- "font-size": DesignToken
1827
- },
1828
- "pink-background-variation": {
1829
- "background-color": DesignToken,
1830
- "border-end-start-radius": DesignToken,
1831
- "padding": DesignToken
1832
- },
1833
- "pink-corner-border-variation": {
1834
- "border-block-start-width": DesignToken,
1835
- "border-color": DesignToken,
1836
- "border-inline-start-width": DesignToken,
1837
- "border-start-start-radius": DesignToken,
1838
- "padding": DesignToken
1839
- },
1840
- "pink-left-border-variation": {
1841
- "border-color": DesignToken,
1842
- "border-inline-start-width": DesignToken,
1843
- "padding-block-end": DesignToken,
1844
- "padding-block-start": DesignToken,
1845
- "padding-inline-end": DesignToken,
1846
- "padding-inline-start": DesignToken
1847
- },
1848
1790
  "background-color": DesignToken,
1849
1791
  "border-inline-start-width": DesignToken,
1850
1792
  "border-color": DesignToken,
@@ -1861,6 +1803,10 @@ declare const tokens: {
1861
1803
  "attribution": {
1862
1804
  "color": DesignToken,
1863
1805
  "font-size": DesignToken
1806
+ },
1807
+ "content": {
1808
+ "color": DesignToken,
1809
+ "font-size": DesignToken
1864
1810
  }
1865
1811
  },
1866
1812
  "backdrop": {