@rijkshuisstijl-community/design-tokens 4.0.1 → 5.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 +51 -5
  2. package/README.md +2 -2
  3. package/dist/_variables.scss +77 -126
  4. package/dist/index.css +77 -126
  5. package/dist/index.d.ts +76 -125
  6. package/dist/index.js +77 -126
  7. package/dist/index.json +76 -125
  8. package/dist/index.tokens.json +148 -175
  9. package/dist/koop/_variables.scss +50 -145
  10. package/dist/koop/index.css +50 -145
  11. package/dist/koop/index.d.ts +48 -143
  12. package/dist/koop/index.js +50 -145
  13. package/dist/koop/index.json +50 -145
  14. package/dist/koop/index.tokens.json +99 -202
  15. package/dist/koop/root.css +50 -145
  16. package/dist/koop/tokens.d.ts +94 -197
  17. package/dist/koop/tokens.js +1543 -3636
  18. package/dist/root.css +77 -126
  19. package/dist/tokens.d.ts +146 -173
  20. package/dist/tokens.js +6238 -7259
  21. package/dist/uitvoerend-groen/_variables.scss +56 -153
  22. package/dist/uitvoerend-groen/index.css +56 -153
  23. package/dist/uitvoerend-groen/index.d.ts +55 -152
  24. package/dist/uitvoerend-groen/index.js +56 -153
  25. package/dist/uitvoerend-groen/index.json +56 -153
  26. package/dist/uitvoerend-groen/index.tokens.json +103 -212
  27. package/dist/uitvoerend-groen/root.css +56 -153
  28. package/dist/uitvoerend-groen/tokens.d.ts +99 -208
  29. package/dist/uitvoerend-groen/tokens.js +1507 -3650
  30. package/dist/uitvoerend-hemelblauw/_variables.scss +56 -153
  31. package/dist/uitvoerend-hemelblauw/index.css +56 -153
  32. package/dist/uitvoerend-hemelblauw/index.d.ts +55 -152
  33. package/dist/uitvoerend-hemelblauw/index.js +56 -153
  34. package/dist/uitvoerend-hemelblauw/index.json +56 -153
  35. package/dist/uitvoerend-hemelblauw/index.tokens.json +103 -212
  36. package/dist/uitvoerend-hemelblauw/root.css +56 -153
  37. package/dist/uitvoerend-hemelblauw/tokens.d.ts +99 -208
  38. package/dist/uitvoerend-hemelblauw/tokens.js +1507 -3650
  39. package/dist/uitvoerend-mintgroen/_variables.scss +56 -153
  40. package/dist/uitvoerend-mintgroen/index.css +56 -153
  41. package/dist/uitvoerend-mintgroen/index.d.ts +55 -152
  42. package/dist/uitvoerend-mintgroen/index.js +56 -153
  43. package/dist/uitvoerend-mintgroen/index.json +56 -153
  44. package/dist/uitvoerend-mintgroen/index.tokens.json +103 -212
  45. package/dist/uitvoerend-mintgroen/root.css +56 -153
  46. package/dist/uitvoerend-mintgroen/tokens.d.ts +99 -208
  47. package/dist/uitvoerend-mintgroen/tokens.js +1507 -3650
  48. package/dist/uitvoerend-oranje/_variables.scss +56 -153
  49. package/dist/uitvoerend-oranje/index.css +56 -153
  50. package/dist/uitvoerend-oranje/index.d.ts +55 -152
  51. package/dist/uitvoerend-oranje/index.js +56 -153
  52. package/dist/uitvoerend-oranje/index.json +56 -153
  53. package/dist/uitvoerend-oranje/index.tokens.json +103 -212
  54. package/dist/uitvoerend-oranje/root.css +56 -153
  55. package/dist/uitvoerend-oranje/tokens.d.ts +99 -208
  56. package/dist/uitvoerend-oranje/tokens.js +1507 -3650
  57. package/dist/uitvoerend-paars/_variables.scss +56 -153
  58. package/dist/uitvoerend-paars/index.css +56 -153
  59. package/dist/uitvoerend-paars/index.d.ts +55 -152
  60. package/dist/uitvoerend-paars/index.js +56 -153
  61. package/dist/uitvoerend-paars/index.json +56 -153
  62. package/dist/uitvoerend-paars/index.tokens.json +103 -212
  63. package/dist/uitvoerend-paars/root.css +56 -153
  64. package/dist/uitvoerend-paars/tokens.d.ts +99 -208
  65. package/dist/uitvoerend-paars/tokens.js +1507 -3650
  66. package/dist/uitvoerend-violet/_variables.scss +56 -153
  67. package/dist/uitvoerend-violet/index.css +56 -153
  68. package/dist/uitvoerend-violet/index.d.ts +55 -152
  69. package/dist/uitvoerend-violet/index.js +56 -153
  70. package/dist/uitvoerend-violet/index.json +56 -153
  71. package/dist/uitvoerend-violet/index.tokens.json +103 -212
  72. package/dist/uitvoerend-violet/root.css +56 -153
  73. package/dist/uitvoerend-violet/tokens.d.ts +99 -208
  74. package/dist/uitvoerend-violet/tokens.js +1507 -3650
  75. package/dist/uitvoerend-violet-oud/_variables.scss +56 -153
  76. package/dist/uitvoerend-violet-oud/index.css +56 -153
  77. package/dist/uitvoerend-violet-oud/index.d.ts +55 -152
  78. package/dist/uitvoerend-violet-oud/index.js +56 -153
  79. package/dist/uitvoerend-violet-oud/index.json +56 -153
  80. package/dist/uitvoerend-violet-oud/index.tokens.json +103 -212
  81. package/dist/uitvoerend-violet-oud/root.css +56 -153
  82. package/dist/uitvoerend-violet-oud/tokens.d.ts +99 -208
  83. package/dist/uitvoerend-violet-oud/tokens.js +1507 -3650
  84. package/dist/wetgevend/_variables.scss +56 -153
  85. package/dist/wetgevend/index.css +56 -153
  86. package/dist/wetgevend/index.d.ts +55 -152
  87. package/dist/wetgevend/index.js +56 -153
  88. package/dist/wetgevend/index.json +56 -153
  89. package/dist/wetgevend/index.tokens.json +103 -212
  90. package/dist/wetgevend/root.css +56 -153
  91. package/dist/wetgevend/tokens.d.ts +99 -208
  92. package/dist/wetgevend/tokens.js +1507 -3650
  93. package/figma/figma.tokens.json +319 -638
  94. package/package.json +2 -2
  95. package/src/generated/base.tokens.json +473 -661
  96. package/src/generated/koop/tokens.json +235 -637
  97. package/src/generated/themes.json +2161 -5875
  98. package/src/generated/uitvoerend-groen/tokens.json +246 -660
  99. package/src/generated/uitvoerend-hemelblauw/tokens.json +246 -660
  100. package/src/generated/uitvoerend-mintgroen/tokens.json +246 -660
  101. package/src/generated/uitvoerend-oranje/tokens.json +246 -660
  102. package/src/generated/uitvoerend-paars/tokens.json +246 -660
  103. package/src/generated/uitvoerend-violet/tokens.json +246 -660
  104. package/src/generated/uitvoerend-violet-oud/tokens.json +246 -660
  105. package/src/generated/wetgevend/tokens.json +246 -660
package/dist/tokens.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 28 Jul 2025 08:31:48 GMT
3
+ * Generated on Fri, 22 Aug 2025 10:20:29 GMT
4
4
  */
5
5
 
6
6
  export default tokens;
@@ -30,13 +30,6 @@ declare const tokens: {
30
30
  "gap": DesignToken
31
31
  },
32
32
  "unordered-list": {
33
- "color": DesignToken,
34
- "marker": {
35
- "border-color": DesignToken,
36
- "color": DesignToken
37
- },
38
- "font-family": DesignToken,
39
- "font-weight": DesignToken,
40
33
  "font-size": DesignToken,
41
34
  "line-height": DesignToken,
42
35
  "margin-block-end": DesignToken,
@@ -46,6 +39,9 @@ declare const tokens: {
46
39
  "margin-block-end": DesignToken,
47
40
  "margin-block-start": DesignToken,
48
41
  "padding-inline-start": DesignToken
42
+ },
43
+ "marker": {
44
+ "color": DesignToken
49
45
  }
50
46
  },
51
47
  "textbox": {
@@ -388,32 +384,7 @@ declare const tokens: {
388
384
  "line-height": DesignToken,
389
385
  "font-size": DesignToken
390
386
  },
391
- "paragraph": {
392
- "color": DesignToken,
393
- "font-family": DesignToken,
394
- "font-size": DesignToken,
395
- "font-weight": DesignToken,
396
- "line-height": DesignToken,
397
- "lead": {
398
- "color": DesignToken,
399
- "font-size": DesignToken,
400
- "font-weight": DesignToken,
401
- "line-height": DesignToken
402
- },
403
- "small": {
404
- "font-size": DesignToken,
405
- "color": DesignToken,
406
- "font-weight": DesignToken,
407
- "line-height": DesignToken
408
- },
409
- "margin-block-end": DesignToken,
410
- "margin-block-start": DesignToken
411
- },
412
387
  "ordered-list": {
413
- "color": DesignToken,
414
- "font-family": DesignToken,
415
- "font-weight": DesignToken,
416
- "margin-inline-start": DesignToken,
417
388
  "font-size": DesignToken,
418
389
  "line-height": DesignToken,
419
390
  "margin-block-end": DesignToken,
@@ -441,10 +412,6 @@ declare const tokens: {
441
412
  "padding-inline": DesignToken
442
413
  },
443
414
  "link-list": {
444
- "item": {
445
- "text-decoration": DesignToken,
446
- "column-gap": DesignToken
447
- },
448
415
  "margin-block-end": DesignToken,
449
416
  "margin-block-start": DesignToken,
450
417
  "row-gap": DesignToken,
@@ -459,35 +426,27 @@ declare const tokens: {
459
426
  "font-weight": DesignToken
460
427
  },
461
428
  "link": {
462
- "font-family": DesignToken,
463
- "font-weight": DesignToken,
464
- "line-height": DesignToken,
465
- "font-size": DesignToken,
466
- "active": {
467
- "text-decoration": DesignToken,
468
- "color": DesignToken
469
- },
470
- "focus": {
471
- "text-decoration": DesignToken,
472
- "text-decoration-thickness": DesignToken,
473
- "background-color": DesignToken,
474
- "color": DesignToken
475
- },
476
- "icon": {
477
- "inset-block-start": DesignToken,
478
- "size": DesignToken
479
- },
480
429
  "color": DesignToken,
481
430
  "text-decoration-color": DesignToken,
482
431
  "column-gap": DesignToken,
483
432
  "text-decoration": DesignToken,
484
433
  "text-decoration-thickness": DesignToken,
485
434
  "text-underline-offset": DesignToken,
435
+ "icon": {
436
+ "size": DesignToken
437
+ },
438
+ "active": {
439
+ "color": DesignToken
440
+ },
486
441
  "hover": {
487
442
  "color": DesignToken,
488
443
  "text-decoration": DesignToken,
489
444
  "text-decoration-thickness": DesignToken
490
445
  },
446
+ "focus": {
447
+ "background-color": DesignToken,
448
+ "color": DesignToken
449
+ },
491
450
  "focus-visible": {
492
451
  "text-decoration": DesignToken,
493
452
  "text-decoration-thickness": DesignToken
@@ -501,60 +460,6 @@ declare const tokens: {
501
460
  "size": DesignToken,
502
461
  "inset-block-start": DesignToken
503
462
  },
504
- "heading-1": {
505
- "color": DesignToken,
506
- "font-family": DesignToken,
507
- "font-size": DesignToken,
508
- "font-weight": DesignToken,
509
- "line-height": DesignToken,
510
- "margin-block-end": DesignToken,
511
- "margin-block-start": DesignToken
512
- },
513
- "heading-2": {
514
- "color": DesignToken,
515
- "font-family": DesignToken,
516
- "font-size": DesignToken,
517
- "font-weight": DesignToken,
518
- "line-height": DesignToken,
519
- "margin-block-end": DesignToken,
520
- "margin-block-start": DesignToken
521
- },
522
- "heading-3": {
523
- "color": DesignToken,
524
- "font-family": DesignToken,
525
- "font-size": DesignToken,
526
- "font-weight": DesignToken,
527
- "line-height": DesignToken,
528
- "margin-block-end": DesignToken,
529
- "margin-block-start": DesignToken
530
- },
531
- "heading-4": {
532
- "color": DesignToken,
533
- "font-family": DesignToken,
534
- "font-size": DesignToken,
535
- "font-weight": DesignToken,
536
- "line-height": DesignToken,
537
- "margin-block-end": DesignToken,
538
- "margin-block-start": DesignToken
539
- },
540
- "heading-5": {
541
- "color": DesignToken,
542
- "font-family": DesignToken,
543
- "font-size": DesignToken,
544
- "font-weight": DesignToken,
545
- "line-height": DesignToken,
546
- "margin-block-end": DesignToken,
547
- "margin-block-start": DesignToken
548
- },
549
- "heading-6": {
550
- "color": DesignToken,
551
- "font-family": DesignToken,
552
- "font-size": DesignToken,
553
- "font-weight": DesignToken,
554
- "line-height": DesignToken,
555
- "margin-block-end": DesignToken,
556
- "margin-block-start": DesignToken
557
- },
558
463
  "form-label": {
559
464
  "color": DesignToken,
560
465
  "font-size": DesignToken,
@@ -916,27 +821,31 @@ declare const tokens: {
916
821
  "row-gap": DesignToken
917
822
  },
918
823
  "breadcrumb-nav": {
919
- "divider": {
920
- "color": DesignToken,
921
- "inset-block-start": DesignToken,
922
- "size": DesignToken
923
- },
924
- "link": {
824
+ "font-family": DesignToken,
825
+ "font-size": DesignToken,
826
+ "line-height": DesignToken,
827
+ "min-block-size": DesignToken,
828
+ "item": {
925
829
  "padding-block-end": DesignToken,
926
830
  "padding-block-start": DesignToken,
927
831
  "padding-inline-end": DesignToken,
928
832
  "padding-inline-start": DesignToken,
929
- "current": {
930
- "color": DesignToken,
931
- "font-weight": DesignToken
932
- },
833
+ "first": {
834
+ "padding-inline-start": DesignToken
835
+ }
836
+ },
837
+ "separator": {
838
+ "color": DesignToken,
933
839
  "icon": {
934
- "inset-block-start": DesignToken,
935
- "margin-inline": DesignToken,
936
840
  "size": DesignToken
937
- },
841
+ }
842
+ },
843
+ "link": {
938
844
  "color": DesignToken,
939
845
  "text-decoration": DesignToken,
846
+ "current": {
847
+ "font-weight": DesignToken
848
+ },
940
849
  "active": {
941
850
  "color": DesignToken,
942
851
  "text-decoration": DesignToken
@@ -952,23 +861,7 @@ declare const tokens: {
952
861
  "hover": {
953
862
  "text-decoration": DesignToken,
954
863
  "color": DesignToken
955
- }
956
- },
957
- "font-family": DesignToken,
958
- "font-size": DesignToken,
959
- "line-height": DesignToken,
960
- "min-block-size": DesignToken,
961
- "item": {
962
- "padding-block-end": DesignToken,
963
- "padding-block-start": DesignToken,
964
- "padding-inline-end": DesignToken,
965
- "padding-inline-start": DesignToken,
966
- "first": {
967
- "padding-inline-start": DesignToken
968
- }
969
- },
970
- "separator": {
971
- "color": DesignToken,
864
+ },
972
865
  "icon": {
973
866
  "size": DesignToken
974
867
  }
@@ -1231,6 +1124,11 @@ declare const tokens: {
1231
1124
  }
1232
1125
  },
1233
1126
  "rhc": {
1127
+ "unordered-list": {
1128
+ "nested": {
1129
+ "margin-inline-start": DesignToken
1130
+ }
1131
+ },
1234
1132
  "toggletip": {
1235
1133
  "color": DesignToken,
1236
1134
  "background-color": DesignToken,
@@ -1465,8 +1363,8 @@ declare const tokens: {
1465
1363
  "padding-inline-start": DesignToken,
1466
1364
  "padding-inline-end": DesignToken
1467
1365
  },
1468
- "link-list": {
1469
- "text-decoration": DesignToken
1366
+ "link": {
1367
+ "column-gap": DesignToken
1470
1368
  },
1471
1369
  "icon-only-button": {
1472
1370
  "padding-block-end": DesignToken,
@@ -1573,6 +1471,17 @@ declare const tokens: {
1573
1471
  "color": DesignToken
1574
1472
  }
1575
1473
  },
1474
+ "expandable-checkbox-group": {
1475
+ "details": {
1476
+ "margin-block-start": DesignToken
1477
+ },
1478
+ "summary": {
1479
+ "color": DesignToken,
1480
+ "margin-block-end": DesignToken,
1481
+ "margin-block-start": DesignToken,
1482
+ "text-decoration": DesignToken
1483
+ }
1484
+ },
1576
1485
  "dot-badge": {
1577
1486
  "border-radius": DesignToken,
1578
1487
  "color": DesignToken,
@@ -1645,7 +1554,7 @@ declare const tokens: {
1645
1554
  "padding-block-start": DesignToken,
1646
1555
  "row-gap": DesignToken
1647
1556
  },
1648
- "card-as-link": {
1557
+ "card": {
1649
1558
  "background-color": DesignToken,
1650
1559
  "border-color": DesignToken,
1651
1560
  "border-radius": DesignToken,
@@ -1716,6 +1625,83 @@ declare const tokens: {
1716
1625
  }
1717
1626
  }
1718
1627
  },
1628
+ "card-as-link": {
1629
+ "background-color": DesignToken,
1630
+ "border-color": DesignToken,
1631
+ "border-radius": DesignToken,
1632
+ "border-width": DesignToken,
1633
+ "color": DesignToken,
1634
+ "column-gap": DesignToken,
1635
+ "icon": {
1636
+ "color": DesignToken,
1637
+ "size": DesignToken
1638
+ },
1639
+ "link": {
1640
+ "color": DesignToken,
1641
+ "text-decoration": DesignToken,
1642
+ "active": {
1643
+ "text-decoration": DesignToken
1644
+ },
1645
+ "hover": {
1646
+ "text-decoration": DesignToken
1647
+ },
1648
+ "focus": {
1649
+ "text-decoration": DesignToken
1650
+ }
1651
+ },
1652
+ "metadata": {
1653
+ "color": DesignToken
1654
+ },
1655
+ "padding-block-end": DesignToken,
1656
+ "padding-block-start": DesignToken,
1657
+ "padding-inline-end": DesignToken,
1658
+ "padding-inline-start": DesignToken,
1659
+ "row-gap": DesignToken,
1660
+ "active": {
1661
+ "background-color": DesignToken,
1662
+ "text-decoration": DesignToken
1663
+ },
1664
+ "hover": {
1665
+ "background-color": DesignToken,
1666
+ "text-decoration": DesignToken
1667
+ },
1668
+ "focus": {
1669
+ "background-color": DesignToken,
1670
+ "text-decoration": DesignToken
1671
+ },
1672
+ "full-bleed": {
1673
+ "background-color": DesignToken,
1674
+ "border-color": DesignToken,
1675
+ "color": DesignToken,
1676
+ "opacity": DesignToken
1677
+ },
1678
+ "heading": {
1679
+ "color": DesignToken,
1680
+ "padding-block-start": DesignToken,
1681
+ "font-size": DesignToken,
1682
+ "font-weight": DesignToken
1683
+ },
1684
+ "horizontal": {
1685
+ "background-color": DesignToken,
1686
+ "border-color": DesignToken,
1687
+ "color": DesignToken,
1688
+ "max-block-size": DesignToken,
1689
+ "padding-block-end": DesignToken,
1690
+ "padding-block-start": DesignToken,
1691
+ "padding-inline-end": DesignToken,
1692
+ "padding-inline-start": DesignToken,
1693
+ "heading": {
1694
+ "inline-size": DesignToken
1695
+ }
1696
+ }
1697
+ },
1698
+ "breadcrumb-nav": {
1699
+ "link": {
1700
+ "current": {
1701
+ "color": DesignToken
1702
+ }
1703
+ }
1704
+ },
1719
1705
  "keep": {
1720
1706
  "_comment": DesignToken,
1721
1707
  "top-left": {
@@ -2245,21 +2231,20 @@ declare const tokens: {
2245
2231
  "font-size": DesignToken
2246
2232
  },
2247
2233
  "paragraph": {
2248
- "lead": {
2249
- "color": DesignToken,
2250
- "font-size": DesignToken,
2251
- "font-weight": DesignToken,
2252
- "line-height": DesignToken,
2253
- "margin-block-end": DesignToken,
2254
- "margin-block-start": DesignToken
2255
- },
2256
2234
  "color": DesignToken,
2257
2235
  "font-family": DesignToken,
2258
2236
  "font-size": DesignToken,
2259
2237
  "font-weight": DesignToken,
2260
2238
  "line-height": DesignToken,
2261
2239
  "margin-block-end": DesignToken,
2262
- "margin-block-start": DesignToken
2240
+ "margin-block-start": DesignToken,
2241
+ "lead": {
2242
+ "font-size": DesignToken,
2243
+ "font-weight": DesignToken,
2244
+ "line-height": DesignToken,
2245
+ "margin-block-end": DesignToken,
2246
+ "margin-block-start": DesignToken
2247
+ }
2263
2248
  },
2264
2249
  "number-badge": {
2265
2250
  "line-height": DesignToken,
@@ -2277,28 +2262,6 @@ declare const tokens: {
2277
2262
  "padding-inline": DesignToken
2278
2263
  },
2279
2264
  "link": {
2280
- "column-gap": DesignToken,
2281
- "font-family": DesignToken,
2282
- "font-size": DesignToken,
2283
- "font-weight": DesignToken,
2284
- "line-height": DesignToken,
2285
- "icon": {
2286
- "inset-block-start": DesignToken,
2287
- "size": DesignToken
2288
- },
2289
- "active": {
2290
- "text-decoration": DesignToken,
2291
- "color": DesignToken
2292
- },
2293
- "focus": {
2294
- "background-color": DesignToken,
2295
- "color": DesignToken,
2296
- "text-decoration": DesignToken,
2297
- "text-decoration-thickness": DesignToken
2298
- },
2299
- "visited": {
2300
- "color": DesignToken
2301
- },
2302
2265
  "color": DesignToken,
2303
2266
  "text-decoration-color": DesignToken,
2304
2267
  "text-decoration-line": DesignToken,
@@ -2307,6 +2270,9 @@ declare const tokens: {
2307
2270
  "current": {
2308
2271
  "cursor": DesignToken
2309
2272
  },
2273
+ "active": {
2274
+ "color": DesignToken
2275
+ },
2310
2276
  "disabled": {
2311
2277
  "color": DesignToken,
2312
2278
  "cursor": DesignToken
@@ -2374,6 +2340,13 @@ declare const tokens: {
2374
2340
  }
2375
2341
  }
2376
2342
  },
2343
+ "figma": {
2344
+ "link": {
2345
+ "icon": {
2346
+ "size": DesignToken
2347
+ }
2348
+ }
2349
+ },
2377
2350
  "basis": {
2378
2351
  "color": {
2379
2352
  "default": {