@rijkshuisstijl-community/design-tokens 5.0.0 → 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (105) hide show
  1. package/CHANGELOG.md +45 -0
  2. package/dist/_variables.scss +626 -673
  3. package/dist/index.css +626 -673
  4. package/dist/index.d.ts +708 -755
  5. package/dist/index.js +710 -757
  6. package/dist/index.json +709 -756
  7. package/dist/index.tokens.json +1745 -1802
  8. package/dist/koop/_variables.scss +61 -123
  9. package/dist/koop/index.css +61 -123
  10. package/dist/koop/index.d.ts +59 -121
  11. package/dist/koop/index.js +61 -123
  12. package/dist/koop/index.json +60 -122
  13. package/dist/koop/index.tokens.json +83 -165
  14. package/dist/koop/root.css +61 -123
  15. package/dist/koop/tokens.d.ts +82 -164
  16. package/dist/koop/tokens.js +3879 -5309
  17. package/dist/root.css +626 -673
  18. package/dist/tokens.d.ts +1639 -1696
  19. package/dist/tokens.js +25088 -26173
  20. package/dist/uitvoerend-groen/_variables.scss +51 -113
  21. package/dist/uitvoerend-groen/index.css +51 -113
  22. package/dist/uitvoerend-groen/index.d.ts +49 -111
  23. package/dist/uitvoerend-groen/index.js +51 -113
  24. package/dist/uitvoerend-groen/index.json +50 -112
  25. package/dist/uitvoerend-groen/index.tokens.json +71 -153
  26. package/dist/uitvoerend-groen/root.css +51 -113
  27. package/dist/uitvoerend-groen/tokens.d.ts +70 -152
  28. package/dist/uitvoerend-groen/tokens.js +2417 -3847
  29. package/dist/uitvoerend-hemelblauw/_variables.scss +51 -113
  30. package/dist/uitvoerend-hemelblauw/index.css +51 -113
  31. package/dist/uitvoerend-hemelblauw/index.d.ts +49 -111
  32. package/dist/uitvoerend-hemelblauw/index.js +51 -113
  33. package/dist/uitvoerend-hemelblauw/index.json +50 -112
  34. package/dist/uitvoerend-hemelblauw/index.tokens.json +71 -153
  35. package/dist/uitvoerend-hemelblauw/root.css +51 -113
  36. package/dist/uitvoerend-hemelblauw/tokens.d.ts +70 -152
  37. package/dist/uitvoerend-hemelblauw/tokens.js +2417 -3847
  38. package/dist/uitvoerend-mintgroen/_variables.scss +51 -113
  39. package/dist/uitvoerend-mintgroen/index.css +51 -113
  40. package/dist/uitvoerend-mintgroen/index.d.ts +49 -111
  41. package/dist/uitvoerend-mintgroen/index.js +51 -113
  42. package/dist/uitvoerend-mintgroen/index.json +50 -112
  43. package/dist/uitvoerend-mintgroen/index.tokens.json +71 -153
  44. package/dist/uitvoerend-mintgroen/root.css +51 -113
  45. package/dist/uitvoerend-mintgroen/tokens.d.ts +70 -152
  46. package/dist/uitvoerend-mintgroen/tokens.js +2417 -3847
  47. package/dist/uitvoerend-oranje/_variables.scss +74 -136
  48. package/dist/uitvoerend-oranje/index.css +74 -136
  49. package/dist/uitvoerend-oranje/index.d.ts +72 -134
  50. package/dist/uitvoerend-oranje/index.js +74 -136
  51. package/dist/uitvoerend-oranje/index.json +73 -135
  52. package/dist/uitvoerend-oranje/index.tokens.json +105 -187
  53. package/dist/uitvoerend-oranje/root.css +74 -136
  54. package/dist/uitvoerend-oranje/tokens.d.ts +101 -183
  55. package/dist/uitvoerend-oranje/tokens.js +3100 -4530
  56. package/dist/uitvoerend-paars/_variables.scss +51 -113
  57. package/dist/uitvoerend-paars/index.css +51 -113
  58. package/dist/uitvoerend-paars/index.d.ts +49 -111
  59. package/dist/uitvoerend-paars/index.js +51 -113
  60. package/dist/uitvoerend-paars/index.json +50 -112
  61. package/dist/uitvoerend-paars/index.tokens.json +71 -153
  62. package/dist/uitvoerend-paars/root.css +51 -113
  63. package/dist/uitvoerend-paars/tokens.d.ts +70 -152
  64. package/dist/uitvoerend-paars/tokens.js +2417 -3847
  65. package/dist/uitvoerend-violet/_variables.scss +51 -113
  66. package/dist/uitvoerend-violet/index.css +51 -113
  67. package/dist/uitvoerend-violet/index.d.ts +49 -111
  68. package/dist/uitvoerend-violet/index.js +51 -113
  69. package/dist/uitvoerend-violet/index.json +50 -112
  70. package/dist/uitvoerend-violet/index.tokens.json +71 -153
  71. package/dist/uitvoerend-violet/root.css +51 -113
  72. package/dist/uitvoerend-violet/tokens.d.ts +70 -152
  73. package/dist/uitvoerend-violet/tokens.js +2417 -3847
  74. package/dist/uitvoerend-violet-oud/_variables.scss +106 -168
  75. package/dist/uitvoerend-violet-oud/index.css +106 -168
  76. package/dist/uitvoerend-violet-oud/index.d.ts +104 -166
  77. package/dist/uitvoerend-violet-oud/index.js +106 -168
  78. package/dist/uitvoerend-violet-oud/index.json +105 -167
  79. package/dist/uitvoerend-violet-oud/index.tokens.json +138 -220
  80. package/dist/uitvoerend-violet-oud/root.css +106 -168
  81. package/dist/uitvoerend-violet-oud/tokens.d.ts +136 -218
  82. package/dist/uitvoerend-violet-oud/tokens.js +3558 -4988
  83. package/dist/wetgevend/_variables.scss +51 -113
  84. package/dist/wetgevend/index.css +51 -113
  85. package/dist/wetgevend/index.d.ts +49 -111
  86. package/dist/wetgevend/index.js +51 -113
  87. package/dist/wetgevend/index.json +50 -112
  88. package/dist/wetgevend/index.tokens.json +71 -153
  89. package/dist/wetgevend/root.css +51 -113
  90. package/dist/wetgevend/tokens.d.ts +70 -152
  91. package/dist/wetgevend/tokens.js +2417 -3847
  92. package/figma/figma.tokens.json +953 -906
  93. package/package.json +2 -2
  94. package/src/generated/base.tokens.json +4984 -5182
  95. package/src/generated/koop/tokens.json +261 -529
  96. package/src/generated/themes.json +2258 -4670
  97. package/src/generated/uitvoerend-groen/tokens.json +217 -485
  98. package/src/generated/uitvoerend-hemelblauw/tokens.json +217 -485
  99. package/src/generated/uitvoerend-mintgroen/tokens.json +217 -485
  100. package/src/generated/uitvoerend-oranje/tokens.json +304 -572
  101. package/src/generated/uitvoerend-paars/tokens.json +217 -485
  102. package/src/generated/uitvoerend-violet/tokens.json +217 -485
  103. package/src/generated/uitvoerend-violet-oud/tokens.json +482 -750
  104. package/src/generated/wetgevend/tokens.json +217 -485
  105. package/token-transformer.mjs +1 -3
package/dist/uitvoerend-oranje/tokens.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 22 Aug 2025 10:20:30 GMT
3
+ * Generated on Tue, 09 Sep 2025 07:01:24 GMT
4
4
  */
5
5
 
6
6
  export default tokens;
@@ -393,21 +393,6 @@ declare const tokens: {
393
393
  "color": DesignToken
394
394
  }
395
395
  },
396
- "number-badge": {
397
- "line-height": DesignToken,
398
- "background-color": DesignToken,
399
- "border-color": DesignToken,
400
- "border-radius": DesignToken,
401
- "border-width": DesignToken,
402
- "color": DesignToken,
403
- "font-family": DesignToken,
404
- "font-size": DesignToken,
405
- "font-weight": DesignToken,
406
- "min-block-size": DesignToken,
407
- "min-inline-size": DesignToken,
408
- "padding-block": DesignToken,
409
- "padding-inline": DesignToken
410
- },
411
396
  "figure": {
412
397
  "caption": {
413
398
  "border-color": DesignToken,
@@ -426,6 +411,20 @@ declare const tokens: {
426
411
  "border-start-start-radius": DesignToken
427
412
  }
428
413
  },
414
+ "number-badge": {
415
+ "background-color": DesignToken,
416
+ "border-color": DesignToken,
417
+ "border-radius": DesignToken,
418
+ "border-width": DesignToken,
419
+ "color": DesignToken,
420
+ "font-family": DesignToken,
421
+ "font-size": DesignToken,
422
+ "font-weight": DesignToken,
423
+ "min-block-size": DesignToken,
424
+ "min-inline-size": DesignToken,
425
+ "padding-block": DesignToken,
426
+ "padding-inline": DesignToken
427
+ },
429
428
  "blockquote": {
430
429
  "border-block-end-width": DesignToken,
431
430
  "border-block-start-width": DesignToken,
@@ -497,77 +496,7 @@ declare const tokens: {
497
496
  "font-size": DesignToken
498
497
  }
499
498
  },
500
- "accordion": {
501
- "button": {
502
- "active": {
503
- "row-gap": DesignToken,
504
- "background-color": DesignToken,
505
- "border-color": DesignToken,
506
- "color": DesignToken
507
- },
508
- "focus": {
509
- "background-color": DesignToken,
510
- "border-color": DesignToken,
511
- "color": DesignToken
512
- },
513
- "background-color": DesignToken,
514
- "border-color": DesignToken,
515
- "border-radius": DesignToken,
516
- "border-width": DesignToken,
517
- "color": DesignToken,
518
- "gap": DesignToken,
519
- "padding-block-end": DesignToken,
520
- "padding-block-start": DesignToken,
521
- "padding-inline-end": DesignToken,
522
- "padding-inline-start": DesignToken,
523
- "icon": {
524
- "size": DesignToken
525
- },
526
- "hover": {
527
- "background-color": DesignToken,
528
- "border-color": DesignToken,
529
- "color": DesignToken
530
- },
531
- "focus-visible": {
532
- "background-color": DesignToken,
533
- "border-color": DesignToken,
534
- "border-width": DesignToken,
535
- "color": DesignToken
536
- }
537
- },
538
- "margin-block-end": DesignToken,
539
- "margin-block-start": DesignToken,
540
- "row-gap": DesignToken,
541
- "panel": {
542
- "border-color": DesignToken,
543
- "border-width": DesignToken,
544
- "padding-block-end": DesignToken,
545
- "padding-block-start": DesignToken,
546
- "padding-inline-end": DesignToken,
547
- "padding-inline-start": DesignToken
548
- },
549
- "section": {
550
- "border-color": DesignToken,
551
- "hover": {
552
- "border-color": DesignToken
553
- },
554
- "border-width": DesignToken,
555
- "margin-block-end": DesignToken,
556
- "margin-block-start": DesignToken
557
- }
558
- },
559
499
  "alert": {
560
- "heading": {
561
- "font-family": DesignToken,
562
- "font-size": DesignToken,
563
- "font-weight": DesignToken,
564
- "line-height": DesignToken
565
- },
566
- "message": {
567
- "column-gap": DesignToken,
568
- "line-height": DesignToken,
569
- "row-gap": DesignToken
570
- },
571
500
  "background-color": DesignToken,
572
501
  "border-color": DesignToken,
573
502
  "border-radius": DesignToken,
@@ -593,6 +522,9 @@ declare const tokens: {
593
522
  "border-color": DesignToken,
594
523
  "color": DesignToken
595
524
  },
525
+ "message": {
526
+ "row-gap": DesignToken
527
+ },
596
528
  "ok": {
597
529
  "background-color": DesignToken,
598
530
  "border-color": DesignToken,
@@ -621,42 +553,58 @@ declare const tokens: {
621
553
  }
622
554
  }
623
555
  },
624
- "skip-link": {
625
- "focus": {
626
- "text-decoration": DesignToken,
556
+ "accordion": {
557
+ "margin-block-end": DesignToken,
558
+ "margin-block-start": DesignToken,
559
+ "row-gap": DesignToken,
560
+ "panel": {
627
561
  "border-color": DesignToken,
628
562
  "border-width": DesignToken,
629
- "border-style": DesignToken,
630
- "background-color": DesignToken,
631
- "color": DesignToken
563
+ "padding-block-end": DesignToken,
564
+ "padding-block-start": DesignToken,
565
+ "padding-inline-end": DesignToken,
566
+ "padding-inline-start": DesignToken
632
567
  },
633
- "border-color": DesignToken,
634
- "box-block-end-shadow": {
568
+ "button": {
569
+ "background-color": DesignToken,
570
+ "border-color": DesignToken,
571
+ "border-radius": DesignToken,
572
+ "border-width": DesignToken,
635
573
  "color": DesignToken,
636
- "blur-radius": DesignToken,
637
- "offset-x": DesignToken,
638
- "offset-y": DesignToken,
639
- "spread-radius": DesignToken
640
- },
641
- "focus-visible": {
642
- "outline-color": DesignToken,
643
- "text-decoration": DesignToken
574
+ "gap": DesignToken,
575
+ "padding-block-end": DesignToken,
576
+ "padding-block-start": DesignToken,
577
+ "padding-inline-end": DesignToken,
578
+ "padding-inline-start": DesignToken,
579
+ "icon": {
580
+ "size": DesignToken
581
+ },
582
+ "active": {
583
+ "background-color": DesignToken,
584
+ "border-color": DesignToken,
585
+ "color": DesignToken
586
+ },
587
+ "hover": {
588
+ "background-color": DesignToken,
589
+ "border-color": DesignToken,
590
+ "color": DesignToken
591
+ },
592
+ "focus-visible": {
593
+ "background-color": DesignToken,
594
+ "border-color": DesignToken,
595
+ "border-width": DesignToken,
596
+ "color": DesignToken
597
+ }
644
598
  },
645
- "font-family": DesignToken,
646
- "font-weight": DesignToken,
647
- "line-height": DesignToken,
648
- "border-width": DesignToken,
649
- "text-underline-offset": DesignToken,
650
- "font-size": DesignToken,
651
- "background-color": DesignToken,
652
- "color": DesignToken,
653
- "min-block-size": DesignToken,
654
- "min-inline-size": DesignToken,
655
- "padding-block-end": DesignToken,
656
- "padding-block-start": DesignToken,
657
- "padding-inline-end": DesignToken,
658
- "padding-inline-start": DesignToken,
659
- "text-decoration": DesignToken
599
+ "section": {
600
+ "border-color": DesignToken,
601
+ "hover": {
602
+ "border-color": DesignToken
603
+ },
604
+ "border-width": DesignToken,
605
+ "margin-block-end": DesignToken,
606
+ "margin-block-start": DesignToken
607
+ }
660
608
  },
661
609
  "data-badge": {
662
610
  "background-color": DesignToken,
@@ -812,12 +760,7 @@ declare const tokens: {
812
760
  },
813
761
  "button-group": {
814
762
  "margin-block-end": DesignToken,
815
- "margin-block-start": DesignToken,
816
- "background-color": DesignToken,
817
- "column-gap": DesignToken,
818
- "padding-block-end": DesignToken,
819
- "padding-block-start": DesignToken,
820
- "row-gap": DesignToken
763
+ "margin-block-start": DesignToken
821
764
  },
822
765
  "breadcrumb-nav": {
823
766
  "font-family": DesignToken,
@@ -927,6 +870,13 @@ declare const tokens: {
927
870
  "padding-inline-start": DesignToken
928
871
  }
929
872
  },
873
+ "action-group": {
874
+ "background-color": DesignToken,
875
+ "column-gap": DesignToken,
876
+ "padding-block-end": DesignToken,
877
+ "padding-block-start": DesignToken,
878
+ "row-gap": DesignToken
879
+ },
930
880
  "column-layout": {
931
881
  "column-rule-color": DesignToken,
932
882
  "column-rule-width": DesignToken,
@@ -1082,6 +1032,30 @@ declare const tokens: {
1082
1032
  "border-inline-start-width": DesignToken
1083
1033
  }
1084
1034
  },
1035
+ "drawer": {
1036
+ "max-inline-size": DesignToken,
1037
+ "z-index": DesignToken,
1038
+ "background-color": DesignToken,
1039
+ "border-color": DesignToken,
1040
+ "border-width": DesignToken,
1041
+ "color": DesignToken,
1042
+ "max-block-size": DesignToken,
1043
+ "padding-block-start": DesignToken,
1044
+ "padding-block-end": DesignToken,
1045
+ "padding-inline-start": DesignToken,
1046
+ "padding-inline-end": DesignToken
1047
+ },
1048
+ "backdrop": {
1049
+ "background-color": DesignToken,
1050
+ "color": DesignToken,
1051
+ "opacity": DesignToken,
1052
+ "fade-in": {
1053
+ "animation-duration": DesignToken
1054
+ },
1055
+ "reduced-transparency": {
1056
+ "opacity": DesignToken
1057
+ }
1058
+ },
1085
1059
  "article": {
1086
1060
  "max-inline-size": DesignToken
1087
1061
  },
@@ -1230,14 +1204,10 @@ declare const tokens: {
1230
1204
  "text-decoration": DesignToken
1231
1205
  }
1232
1206
  }
1233
- },
1234
- "skip-link": {
1235
- "font-weight": DesignToken
1236
1207
  }
1237
1208
  },
1238
1209
  "nl": {
1239
1210
  "number-badge": {
1240
- "line-height": DesignToken,
1241
1211
  "background-color": DesignToken,
1242
1212
  "border-color": DesignToken,
1243
1213
  "border-radius": DesignToken,
@@ -1252,33 +1222,6 @@ declare const tokens: {
1252
1222
  "padding-inline": DesignToken
1253
1223
  },
1254
1224
  "skip-link": {
1255
- "border-color": DesignToken,
1256
- "border-width": DesignToken,
1257
- "font-family": DesignToken,
1258
- "font-weight": DesignToken,
1259
- "padding-block-end": DesignToken,
1260
- "padding-block-start": DesignToken,
1261
- "padding-inline-end": DesignToken,
1262
- "padding-inline-start": DesignToken,
1263
- "box-block-end-shadow": {
1264
- "blur-radius": DesignToken,
1265
- "color": DesignToken,
1266
- "offset-x": DesignToken,
1267
- "offset-y": DesignToken,
1268
- "spread-radius": DesignToken
1269
- },
1270
- "focus": {
1271
- "background-color": DesignToken,
1272
- "border-color": DesignToken,
1273
- "border-style": DesignToken,
1274
- "border-width": DesignToken,
1275
- "color": DesignToken,
1276
- "text-decoration": DesignToken
1277
- },
1278
- "focus-visible": {
1279
- "outline-color": DesignToken
1280
- },
1281
- "text-decoration": DesignToken,
1282
1225
  "background-color": DesignToken,
1283
1226
  "color": DesignToken,
1284
1227
  "padding-block": DesignToken,
@@ -1413,35 +1356,6 @@ declare const tokens: {
1413
1356
  "borderRadiusBottomLeft": DesignToken
1414
1357
  }
1415
1358
  },
1416
- "accordion": {
1417
- "border-radius": DesignToken,
1418
- "color": DesignToken,
1419
- "header": {
1420
- "margin": DesignToken
1421
- },
1422
- "section": {
1423
- "border-block-end-width": DesignToken,
1424
- "border-color": DesignToken,
1425
- "border-width": DesignToken
1426
- },
1427
- "button": {
1428
- "padding-block-end": DesignToken,
1429
- "padding-block-start": DesignToken,
1430
- "padding-inline-end": DesignToken,
1431
- "padding-inline-start": DesignToken,
1432
- "expanded": {
1433
- "background-color": DesignToken,
1434
- "color": DesignToken
1435
- },
1436
- "icon": {
1437
- "margin-block": DesignToken
1438
- },
1439
- "font-family": DesignToken,
1440
- "font-weight": DesignToken,
1441
- "font-size": DesignToken,
1442
- "line-height": DesignToken
1443
- }
1444
- },
1445
1359
  "data-badge-button": {
1446
1360
  "column-gap": DesignToken,
1447
1361
  "hover": {
@@ -1542,6 +1456,7 @@ declare const tokens: {
1542
1456
  "on-dark-color": DesignToken,
1543
1457
  "on-light-color": DesignToken
1544
1458
  },
1459
+ "backdrop": DesignToken,
1545
1460
  "border": {
1546
1461
  "default": DesignToken,
1547
1462
  "subdued": DesignToken,
@@ -1730,6 +1645,9 @@ declare const tokens: {
1730
1645
  },
1731
1646
  "wit": DesignToken,
1732
1647
  "zwart": DesignToken,
1648
+ "transparent": {
1649
+ "30": DesignToken
1650
+ },
1733
1651
  "none": DesignToken
1734
1652
  },
1735
1653
  "sub-nav-bar": {