@rijkshuisstijl-community/design-tokens 7.0.0 → 8.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 +72 -0
  2. package/dist/_variables.scss +10 -48
  3. package/dist/index.css +10 -48
  4. package/dist/index.d.ts +8 -46
  5. package/dist/index.js +10 -48
  6. package/dist/index.json +9 -47
  7. package/dist/index.tokens.json +14 -64
  8. package/dist/koop/_variables.scss +23 -61
  9. package/dist/koop/index.css +23 -61
  10. package/dist/koop/index.d.ts +21 -59
  11. package/dist/koop/index.js +23 -61
  12. package/dist/koop/index.json +22 -60
  13. package/dist/koop/index.tokens.json +47 -97
  14. package/dist/koop/root.css +23 -61
  15. package/dist/koop/tokens.d.ts +46 -96
  16. package/dist/koop/tokens.js +528 -1396
  17. package/dist/root.css +10 -48
  18. package/dist/tokens.d.ts +13 -63
  19. package/dist/tokens.js +200 -1068
  20. package/dist/uitvoerend-groen/_variables.scss +23 -61
  21. package/dist/uitvoerend-groen/index.css +23 -61
  22. package/dist/uitvoerend-groen/index.d.ts +21 -59
  23. package/dist/uitvoerend-groen/index.js +23 -61
  24. package/dist/uitvoerend-groen/index.json +22 -60
  25. package/dist/uitvoerend-groen/index.tokens.json +47 -97
  26. package/dist/uitvoerend-groen/root.css +23 -61
  27. package/dist/uitvoerend-groen/tokens.d.ts +46 -96
  28. package/dist/uitvoerend-groen/tokens.js +528 -1396
  29. package/dist/uitvoerend-hemelblauw/_variables.scss +23 -61
  30. package/dist/uitvoerend-hemelblauw/index.css +23 -61
  31. package/dist/uitvoerend-hemelblauw/index.d.ts +21 -59
  32. package/dist/uitvoerend-hemelblauw/index.js +23 -61
  33. package/dist/uitvoerend-hemelblauw/index.json +22 -60
  34. package/dist/uitvoerend-hemelblauw/index.tokens.json +47 -97
  35. package/dist/uitvoerend-hemelblauw/root.css +23 -61
  36. package/dist/uitvoerend-hemelblauw/tokens.d.ts +46 -96
  37. package/dist/uitvoerend-hemelblauw/tokens.js +528 -1396
  38. package/dist/uitvoerend-mintgroen/_variables.scss +23 -61
  39. package/dist/uitvoerend-mintgroen/index.css +23 -61
  40. package/dist/uitvoerend-mintgroen/index.d.ts +21 -59
  41. package/dist/uitvoerend-mintgroen/index.js +23 -61
  42. package/dist/uitvoerend-mintgroen/index.json +22 -60
  43. package/dist/uitvoerend-mintgroen/index.tokens.json +47 -97
  44. package/dist/uitvoerend-mintgroen/root.css +23 -61
  45. package/dist/uitvoerend-mintgroen/tokens.d.ts +46 -96
  46. package/dist/uitvoerend-mintgroen/tokens.js +528 -1396
  47. package/dist/uitvoerend-oranje/_variables.scss +23 -61
  48. package/dist/uitvoerend-oranje/index.css +23 -61
  49. package/dist/uitvoerend-oranje/index.d.ts +21 -59
  50. package/dist/uitvoerend-oranje/index.js +23 -61
  51. package/dist/uitvoerend-oranje/index.json +22 -60
  52. package/dist/uitvoerend-oranje/index.tokens.json +47 -97
  53. package/dist/uitvoerend-oranje/root.css +23 -61
  54. package/dist/uitvoerend-oranje/tokens.d.ts +46 -96
  55. package/dist/uitvoerend-oranje/tokens.js +528 -1396
  56. package/dist/uitvoerend-paars/_variables.scss +23 -61
  57. package/dist/uitvoerend-paars/index.css +23 -61
  58. package/dist/uitvoerend-paars/index.d.ts +21 -59
  59. package/dist/uitvoerend-paars/index.js +23 -61
  60. package/dist/uitvoerend-paars/index.json +22 -60
  61. package/dist/uitvoerend-paars/index.tokens.json +47 -97
  62. package/dist/uitvoerend-paars/root.css +23 -61
  63. package/dist/uitvoerend-paars/tokens.d.ts +46 -96
  64. package/dist/uitvoerend-paars/tokens.js +528 -1396
  65. package/dist/uitvoerend-violet/_variables.scss +23 -61
  66. package/dist/uitvoerend-violet/index.css +23 -61
  67. package/dist/uitvoerend-violet/index.d.ts +21 -59
  68. package/dist/uitvoerend-violet/index.js +23 -61
  69. package/dist/uitvoerend-violet/index.json +22 -60
  70. package/dist/uitvoerend-violet/index.tokens.json +47 -97
  71. package/dist/uitvoerend-violet/root.css +23 -61
  72. package/dist/uitvoerend-violet/tokens.d.ts +46 -96
  73. package/dist/uitvoerend-violet/tokens.js +528 -1396
  74. package/dist/uitvoerend-violet-oud/_variables.scss +23 -61
  75. package/dist/uitvoerend-violet-oud/index.css +23 -61
  76. package/dist/uitvoerend-violet-oud/index.d.ts +21 -59
  77. package/dist/uitvoerend-violet-oud/index.js +23 -61
  78. package/dist/uitvoerend-violet-oud/index.json +22 -60
  79. package/dist/uitvoerend-violet-oud/index.tokens.json +47 -97
  80. package/dist/uitvoerend-violet-oud/root.css +23 -61
  81. package/dist/uitvoerend-violet-oud/tokens.d.ts +46 -96
  82. package/dist/uitvoerend-violet-oud/tokens.js +528 -1396
  83. package/dist/wetgevend/_variables.scss +23 -61
  84. package/dist/wetgevend/index.css +23 -61
  85. package/dist/wetgevend/index.d.ts +21 -59
  86. package/dist/wetgevend/index.js +23 -61
  87. package/dist/wetgevend/index.json +22 -60
  88. package/dist/wetgevend/index.tokens.json +47 -97
  89. package/dist/wetgevend/root.css +23 -61
  90. package/dist/wetgevend/tokens.d.ts +46 -96
  91. package/dist/wetgevend/tokens.js +528 -1396
  92. package/figma/figma.tokens.json +51 -270
  93. package/package.json +1 -1
  94. package/src/generated/base.tokens.json +35 -199
  95. package/src/generated/koop/tokens.json +105 -269
  96. package/src/generated/themes.json +945 -2421
  97. package/src/generated/uitvoerend-groen/tokens.json +105 -269
  98. package/src/generated/uitvoerend-hemelblauw/tokens.json +105 -269
  99. package/src/generated/uitvoerend-mintgroen/tokens.json +105 -269
  100. package/src/generated/uitvoerend-oranje/tokens.json +105 -269
  101. package/src/generated/uitvoerend-paars/tokens.json +105 -269
  102. package/src/generated/uitvoerend-violet/tokens.json +105 -269
  103. package/src/generated/uitvoerend-violet-oud/tokens.json +105 -269
  104. package/src/generated/wetgevend/tokens.json +105 -269
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 Fri, 26 Sep 2025 23:36:51 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;
@@ -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;
@@ -871,7 +830,7 @@
871
830
  --rhc-border-width-default: 1px;
872
831
  --rhc-font-family-secondary: RijksoverheidSerifWeb, 'Times New Roman', serif;
873
832
  --rhc-font-family-primary: 'Fira Sans', Arial, Verdana, sans-serif;
874
- --rhc-size-3-lint: 1440px;
833
+ --rhc-size-3-lint: 144px;
875
834
  --rhc-size-2-lint: 96px;
876
835
  --rhc-size-lint: 48px;
877
836
  --rhc-size-half-lint: 24px;
@@ -915,7 +874,6 @@
915
874
  --rhc-focus-outline-style: solid;
916
875
  --rhc-focus-outline-offset: 0.125rem;
917
876
  --rhc-color-none: transparent;
918
- --rhc-color-transparent-30: #0000004d;
919
877
  --rhc-color-zwart: #000;
920
878
  --rhc-color-wit: #fff;
921
879
  --rhc-color-lintblauw-500: #154273;
@@ -1057,7 +1015,6 @@
1057
1015
  --rhc-color-border-strong: #0F172A;
1058
1016
  --rhc-color-border-subdued: #94A3B8;
1059
1017
  --rhc-color-border-default: #64748B;
1060
- --rhc-color-backdrop: #0000004d;
1061
1018
  --rhc-color-foreground-on-light-color: #000;
1062
1019
  --rhc-color-foreground-on-dark-color: #fff;
1063
1020
  --rhc-color-foreground-link: #01689b;
@@ -1088,7 +1045,11 @@
1088
1045
  --rhc-keep-top-left-border-radius-bottom-right: 0;
1089
1046
  --rhc-keep-top-left-border-radius-top-right: 0;
1090
1047
  --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.;
1048
+ --rhc-keep-comment: ⚠️ Deze tokens zijn legacy en worden vervangen door de tokenset common/rounded-corner.;
1049
+ --rhc-blockquote-margin-inline-start: 0rem;
1050
+ --rhc-blockquote-margin-inline-end: 0rem;
1051
+ --rhc-blockquote-margin-block-start: 0rem;
1052
+ --rhc-blockquote-margin-block-end: 0rem;
1092
1053
  --rhc-breadcrumb-nav-link-current-color: #334155;
1093
1054
  --rhc-card-as-link-horizontal-heading-inline-size: 200px;
1094
1055
  --rhc-card-as-link-horizontal-padding-inline-start: 1rem;
@@ -1325,6 +1286,7 @@
1325
1286
  --rhc-nav-bar-color: #154273;
1326
1287
  --rhc-nav-bar-background-color: #fff;
1327
1288
  --rhc-nav-bar-heading-font-weight: 700;
1289
+ --rhc-nav-bar-link-font-size: 1.25rem;
1328
1290
  --rhc-nav-bar-link-column-gap: 0.5rem;
1329
1291
  --rhc-nav-bar-link-padding-inline-start: 0.75rem;
1330
1292
  --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 Fri, 26 Sep 2025 23:36:51 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": {
@@ -1397,10 +1400,6 @@ declare const tokens: {
1397
1400
  }
1398
1401
  },
1399
1402
  "form-field-error-message": {
1400
- "icon": {
1401
- "margin-inline-end": DesignToken,
1402
- "size": DesignToken
1403
- },
1404
1403
  "background-color": DesignToken,
1405
1404
  "color": DesignToken,
1406
1405
  "font-family": DesignToken,
@@ -1415,7 +1414,6 @@ declare const tokens: {
1415
1414
  "padding-inline-start": DesignToken
1416
1415
  },
1417
1416
  "form-field-description": {
1418
- "padding-block-end": DesignToken,
1419
1417
  "color": DesignToken,
1420
1418
  "font-family": DesignToken,
1421
1419
  "font-size": DesignToken,
@@ -1793,58 +1791,6 @@ declare const tokens: {
1793
1791
  }
1794
1792
  },
1795
1793
  "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
1794
  "background-color": DesignToken,
1849
1795
  "border-inline-start-width": DesignToken,
1850
1796
  "border-color": DesignToken,
@@ -1861,6 +1807,10 @@ declare const tokens: {
1861
1807
  "attribution": {
1862
1808
  "color": DesignToken,
1863
1809
  "font-size": DesignToken
1810
+ },
1811
+ "content": {
1812
+ "color": DesignToken,
1813
+ "font-size": DesignToken
1864
1814
  }
1865
1815
  },
1866
1816
  "backdrop": {