@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-violet-oud/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:23 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,18 +411,92 @@ declare const tokens: {
426
411
  "border-start-start-radius": DesignToken
427
412
  }
428
413
  },
429
- "alert": {
430
- "heading": {
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
+ },
428
+ "blockquote": {
429
+ "border-block-end-width": DesignToken,
430
+ "border-block-start-width": DesignToken,
431
+ "border-end-end-radius": DesignToken,
432
+ "border-end-start-radius": DesignToken,
433
+ "border-inline-end-width": DesignToken,
434
+ "border-start-end-radius": DesignToken,
435
+ "border-start-start-radius": DesignToken,
436
+ "margin-block-end": DesignToken,
437
+ "margin-block-start": DesignToken,
438
+ "margin-inline-end": DesignToken,
439
+ "margin-inline-start": DesignToken,
440
+ "blue-corner-border-variation": {
441
+ "border-block-end-width": DesignToken,
442
+ "border-color": DesignToken,
443
+ "border-end-end-radius": DesignToken,
444
+ "border-inline-end-width": DesignToken
445
+ },
446
+ "caption": {
447
+ "color": DesignToken,
431
448
  "font-family": DesignToken,
432
449
  "font-size": DesignToken,
433
450
  "font-weight": DesignToken,
434
- "line-height": DesignToken
451
+ "line-height": DesignToken,
452
+ "padding-block-start": DesignToken
435
453
  },
436
- "message": {
437
- "column-gap": DesignToken,
454
+ "content": {
455
+ "font-family": DesignToken,
456
+ "font-weight": DesignToken,
438
457
  "line-height": DesignToken,
439
- "row-gap": DesignToken
458
+ "color": DesignToken,
459
+ "font-size": DesignToken
460
+ },
461
+ "pink-background-variation": {
462
+ "background-color": DesignToken,
463
+ "border-end-start-radius": DesignToken,
464
+ "padding": DesignToken
465
+ },
466
+ "pink-corner-border-variation": {
467
+ "border-block-start-width": DesignToken,
468
+ "border-color": DesignToken,
469
+ "border-inline-start-width": DesignToken,
470
+ "border-start-start-radius": DesignToken,
471
+ "padding": DesignToken
440
472
  },
473
+ "pink-left-border-variation": {
474
+ "border-color": DesignToken,
475
+ "border-inline-start-width": DesignToken,
476
+ "padding-block-end": DesignToken,
477
+ "padding-block-start": DesignToken,
478
+ "padding-inline-end": DesignToken,
479
+ "padding-inline-start": DesignToken
480
+ },
481
+ "background-color": DesignToken,
482
+ "border-inline-start-width": DesignToken,
483
+ "border-color": DesignToken,
484
+ "border-radius": DesignToken,
485
+ "border-width": DesignToken,
486
+ "color": DesignToken,
487
+ "font-size": DesignToken,
488
+ "font-family": DesignToken,
489
+ "padding-block-end": DesignToken,
490
+ "padding-block-start": DesignToken,
491
+ "padding-inline-end": DesignToken,
492
+ "padding-inline-start": DesignToken,
493
+ "row-gap": DesignToken,
494
+ "attribution": {
495
+ "color": DesignToken,
496
+ "font-size": DesignToken
497
+ }
498
+ },
499
+ "alert": {
441
500
  "background-color": DesignToken,
442
501
  "border-color": DesignToken,
443
502
  "border-radius": DesignToken,
@@ -463,6 +522,9 @@ declare const tokens: {
463
522
  "border-color": DesignToken,
464
523
  "color": DesignToken
465
524
  },
525
+ "message": {
526
+ "row-gap": DesignToken
527
+ },
466
528
  "ok": {
467
529
  "background-color": DesignToken,
468
530
  "border-color": DesignToken,
@@ -492,18 +554,18 @@ declare const tokens: {
492
554
  }
493
555
  },
494
556
  "accordion": {
557
+ "margin-block-end": DesignToken,
558
+ "margin-block-start": DesignToken,
559
+ "row-gap": DesignToken,
560
+ "panel": {
561
+ "border-color": DesignToken,
562
+ "border-width": DesignToken,
563
+ "padding-block-end": DesignToken,
564
+ "padding-block-start": DesignToken,
565
+ "padding-inline-end": DesignToken,
566
+ "padding-inline-start": DesignToken
567
+ },
495
568
  "button": {
496
- "active": {
497
- "row-gap": DesignToken,
498
- "background-color": DesignToken,
499
- "border-color": DesignToken,
500
- "color": DesignToken
501
- },
502
- "focus": {
503
- "background-color": DesignToken,
504
- "border-color": DesignToken,
505
- "color": DesignToken
506
- },
507
569
  "background-color": DesignToken,
508
570
  "border-color": DesignToken,
509
571
  "border-radius": DesignToken,
@@ -517,6 +579,11 @@ declare const tokens: {
517
579
  "icon": {
518
580
  "size": DesignToken
519
581
  },
582
+ "active": {
583
+ "background-color": DesignToken,
584
+ "border-color": DesignToken,
585
+ "color": DesignToken
586
+ },
520
587
  "hover": {
521
588
  "background-color": DesignToken,
522
589
  "border-color": DesignToken,
@@ -529,17 +596,6 @@ declare const tokens: {
529
596
  "color": DesignToken
530
597
  }
531
598
  },
532
- "margin-block-end": DesignToken,
533
- "margin-block-start": DesignToken,
534
- "row-gap": DesignToken,
535
- "panel": {
536
- "border-color": DesignToken,
537
- "border-width": DesignToken,
538
- "padding-block-end": DesignToken,
539
- "padding-block-start": DesignToken,
540
- "padding-inline-end": DesignToken,
541
- "padding-inline-start": DesignToken
542
- },
543
599
  "section": {
544
600
  "border-color": DesignToken,
545
601
  "hover": {
@@ -550,114 +606,6 @@ declare const tokens: {
550
606
  "margin-block-start": DesignToken
551
607
  }
552
608
  },
553
- "blockquote": {
554
- "border-block-end-width": DesignToken,
555
- "border-block-start-width": DesignToken,
556
- "border-end-end-radius": DesignToken,
557
- "border-end-start-radius": DesignToken,
558
- "border-inline-end-width": DesignToken,
559
- "border-start-end-radius": DesignToken,
560
- "border-start-start-radius": DesignToken,
561
- "margin-block-end": DesignToken,
562
- "margin-block-start": DesignToken,
563
- "margin-inline-end": DesignToken,
564
- "margin-inline-start": DesignToken,
565
- "blue-corner-border-variation": {
566
- "border-block-end-width": DesignToken,
567
- "border-color": DesignToken,
568
- "border-end-end-radius": DesignToken,
569
- "border-inline-end-width": DesignToken
570
- },
571
- "caption": {
572
- "color": DesignToken,
573
- "font-family": DesignToken,
574
- "font-size": DesignToken,
575
- "font-weight": DesignToken,
576
- "line-height": DesignToken,
577
- "padding-block-start": DesignToken
578
- },
579
- "content": {
580
- "font-family": DesignToken,
581
- "font-weight": DesignToken,
582
- "line-height": DesignToken,
583
- "color": DesignToken,
584
- "font-size": DesignToken
585
- },
586
- "pink-background-variation": {
587
- "background-color": DesignToken,
588
- "border-end-start-radius": DesignToken,
589
- "padding": DesignToken
590
- },
591
- "pink-corner-border-variation": {
592
- "border-block-start-width": DesignToken,
593
- "border-color": DesignToken,
594
- "border-inline-start-width": DesignToken,
595
- "border-start-start-radius": DesignToken,
596
- "padding": DesignToken
597
- },
598
- "pink-left-border-variation": {
599
- "border-color": DesignToken,
600
- "border-inline-start-width": DesignToken,
601
- "padding-block-end": DesignToken,
602
- "padding-block-start": DesignToken,
603
- "padding-inline-end": DesignToken,
604
- "padding-inline-start": DesignToken
605
- },
606
- "background-color": DesignToken,
607
- "border-inline-start-width": DesignToken,
608
- "border-color": DesignToken,
609
- "border-radius": DesignToken,
610
- "border-width": DesignToken,
611
- "color": DesignToken,
612
- "font-size": DesignToken,
613
- "font-family": DesignToken,
614
- "padding-block-end": DesignToken,
615
- "padding-block-start": DesignToken,
616
- "padding-inline-end": DesignToken,
617
- "padding-inline-start": DesignToken,
618
- "row-gap": DesignToken,
619
- "attribution": {
620
- "color": DesignToken,
621
- "font-size": DesignToken
622
- }
623
- },
624
- "skip-link": {
625
- "focus": {
626
- "text-decoration": DesignToken,
627
- "border-color": DesignToken,
628
- "border-width": DesignToken,
629
- "border-style": DesignToken,
630
- "background-color": DesignToken,
631
- "color": DesignToken
632
- },
633
- "border-color": DesignToken,
634
- "box-block-end-shadow": {
635
- "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
644
- },
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
660
- },
661
609
  "data-badge": {
662
610
  "background-color": DesignToken,
663
611
  "border-radius": 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,
@@ -1386,35 +1329,6 @@ declare const tokens: {
1386
1329
  }
1387
1330
  },
1388
1331
  "rhc": {
1389
- "accordion": {
1390
- "border-radius": DesignToken,
1391
- "color": DesignToken,
1392
- "header": {
1393
- "margin": DesignToken
1394
- },
1395
- "section": {
1396
- "border-block-end-width": DesignToken,
1397
- "border-color": DesignToken,
1398
- "border-width": DesignToken
1399
- },
1400
- "button": {
1401
- "padding-block-end": DesignToken,
1402
- "padding-block-start": DesignToken,
1403
- "padding-inline-end": DesignToken,
1404
- "padding-inline-start": DesignToken,
1405
- "expanded": {
1406
- "background-color": DesignToken,
1407
- "color": DesignToken
1408
- },
1409
- "icon": {
1410
- "margin-block": DesignToken
1411
- },
1412
- "font-family": DesignToken,
1413
- "font-weight": DesignToken,
1414
- "font-size": DesignToken,
1415
- "line-height": DesignToken
1416
- }
1417
- },
1418
1332
  "keep": {
1419
1333
  "_comment": DesignToken,
1420
1334
  "top-left": {
@@ -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
  "border-radius": {