@rijkshuisstijl-community/design-tokens 1.1.0 → 2.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 (95) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/README.md +153 -12
  3. package/dist/_variables.scss +772 -743
  4. package/dist/index.css +772 -743
  5. package/dist/index.d.ts +545 -516
  6. package/dist/index.js +609 -580
  7. package/dist/index.json +608 -579
  8. package/dist/index.tokens.json +1664 -1613
  9. package/dist/root.css +772 -743
  10. package/dist/tokens.d.ts +1569 -1518
  11. package/dist/tokens.js +22875 -22078
  12. package/dist/uitvoerend-groen/_variables.scss +1337 -0
  13. package/dist/uitvoerend-groen/index.css +1340 -0
  14. package/dist/{uitvoerend-mintgroen-focus → uitvoerend-groen}/index.d.ts +442 -418
  15. package/dist/uitvoerend-groen/index.js +1338 -0
  16. package/dist/uitvoerend-groen/index.json +1335 -0
  17. package/dist/uitvoerend-groen/index.tokens.json +2049 -0
  18. package/dist/uitvoerend-groen/root.css +1340 -0
  19. package/dist/{uitvoerend-mintgroen-focus → uitvoerend-groen}/tokens.d.ts +646 -628
  20. package/dist/{uitvoerend-mintgroen-focus → uitvoerend-groen}/tokens.js +14276 -13624
  21. package/dist/uitvoerend-hemelblauw/_variables.scss +1337 -0
  22. package/dist/uitvoerend-hemelblauw/index.css +1340 -0
  23. package/dist/uitvoerend-hemelblauw/index.d.ts +1338 -0
  24. package/dist/uitvoerend-hemelblauw/index.js +1338 -0
  25. package/dist/uitvoerend-hemelblauw/index.json +1335 -0
  26. package/dist/uitvoerend-hemelblauw/index.tokens.json +2049 -0
  27. package/dist/uitvoerend-hemelblauw/root.css +1340 -0
  28. package/dist/uitvoerend-hemelblauw/tokens.d.ts +2072 -0
  29. package/dist/uitvoerend-hemelblauw/tokens.js +31258 -0
  30. package/dist/{uitvoerend-mintgroen-focus → uitvoerend-mintgroen}/_variables.scss +533 -509
  31. package/dist/{uitvoerend-mintgroen-focus → uitvoerend-mintgroen}/index.css +534 -510
  32. package/dist/uitvoerend-mintgroen/index.d.ts +1338 -0
  33. package/dist/{uitvoerend-mintgroen-focus → uitvoerend-mintgroen}/index.js +507 -483
  34. package/dist/{uitvoerend-mintgroen-focus → uitvoerend-mintgroen}/index.json +506 -482
  35. package/dist/{uitvoerend-mintgroen-focus → uitvoerend-mintgroen}/index.tokens.json +734 -716
  36. package/dist/{uitvoerend-mintgroen-focus → uitvoerend-mintgroen}/root.css +533 -509
  37. package/dist/uitvoerend-mintgroen/tokens.d.ts +2072 -0
  38. package/dist/uitvoerend-mintgroen/tokens.js +31258 -0
  39. package/dist/uitvoerend-oranje/_variables.scss +1337 -0
  40. package/dist/uitvoerend-oranje/index.css +1340 -0
  41. package/dist/uitvoerend-oranje/index.d.ts +1338 -0
  42. package/dist/uitvoerend-oranje/index.js +1338 -0
  43. package/dist/uitvoerend-oranje/index.json +1335 -0
  44. package/dist/uitvoerend-oranje/index.tokens.json +2049 -0
  45. package/dist/uitvoerend-oranje/root.css +1340 -0
  46. package/dist/uitvoerend-oranje/tokens.d.ts +2072 -0
  47. package/dist/uitvoerend-oranje/tokens.js +31258 -0
  48. package/dist/uitvoerend-paars/_variables.scss +1337 -0
  49. package/dist/uitvoerend-paars/index.css +1340 -0
  50. package/dist/uitvoerend-paars/index.d.ts +1338 -0
  51. package/dist/uitvoerend-paars/index.js +1338 -0
  52. package/dist/uitvoerend-paars/index.json +1335 -0
  53. package/dist/uitvoerend-paars/index.tokens.json +2049 -0
  54. package/dist/uitvoerend-paars/root.css +1340 -0
  55. package/dist/uitvoerend-paars/tokens.d.ts +2072 -0
  56. package/dist/uitvoerend-paars/tokens.js +31258 -0
  57. package/dist/uitvoerend-violet/_variables.scss +231 -202
  58. package/dist/uitvoerend-violet/index.css +231 -202
  59. package/dist/uitvoerend-violet/index.d.ts +102 -73
  60. package/dist/uitvoerend-violet/index.js +231 -202
  61. package/dist/uitvoerend-violet/index.json +230 -201
  62. package/dist/uitvoerend-violet/index.tokens.json +281 -230
  63. package/dist/uitvoerend-violet/root.css +231 -202
  64. package/dist/uitvoerend-violet/tokens.d.ts +151 -100
  65. package/dist/uitvoerend-violet/tokens.js +16369 -15572
  66. package/dist/uitvoerend-violet-oud/_variables.scss +231 -201
  67. package/dist/uitvoerend-violet-oud/index.css +231 -201
  68. package/dist/uitvoerend-violet-oud/index.d.ts +102 -72
  69. package/dist/uitvoerend-violet-oud/index.js +231 -201
  70. package/dist/uitvoerend-violet-oud/index.json +230 -200
  71. package/dist/uitvoerend-violet-oud/index.tokens.json +281 -229
  72. package/dist/uitvoerend-violet-oud/root.css +231 -201
  73. package/dist/uitvoerend-violet-oud/tokens.d.ts +151 -99
  74. package/dist/uitvoerend-violet-oud/tokens.js +12621 -11803
  75. package/dist/wetgevend/_variables.scss +171 -142
  76. package/dist/wetgevend/index.css +171 -142
  77. package/dist/wetgevend/index.d.ts +102 -73
  78. package/dist/wetgevend/index.js +171 -142
  79. package/dist/wetgevend/index.json +170 -141
  80. package/dist/wetgevend/index.tokens.json +221 -170
  81. package/dist/wetgevend/root.css +171 -142
  82. package/dist/wetgevend/tokens.d.ts +151 -100
  83. package/dist/wetgevend/tokens.js +12217 -11420
  84. package/figma/figma.tokens.json +2428 -556
  85. package/package.json +1 -1
  86. package/src/generated/base.tokens.json +4520 -4338
  87. package/src/generated/themes.json +28993 -3285
  88. package/src/generated/uitvoerend-groen/tokens.json +6252 -0
  89. package/src/generated/uitvoerend-hemelblauw/tokens.json +6252 -0
  90. package/src/generated/{uitvoerend-mintgroen-focus → uitvoerend-mintgroen}/tokens.json +2374 -2240
  91. package/src/generated/uitvoerend-oranje/tokens.json +6252 -0
  92. package/src/generated/uitvoerend-paars/tokens.json +6252 -0
  93. package/src/generated/uitvoerend-violet/tokens.json +640 -458
  94. package/src/generated/uitvoerend-violet-oud/tokens.json +643 -457
  95. package/src/generated/wetgevend/tokens.json +602 -420
package/dist/wetgevend/tokens.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 19 Mar 2025 14:52:03 GMT
3
+ * Generated on Tue, 27 May 2025 13:07:13 GMT
4
4
  */
5
5
 
6
6
  export default tokens;
@@ -23,12 +23,82 @@ declare interface DesignToken {
23
23
 
24
24
  declare const tokens: {
25
25
  "utrecht": {
26
- "pre-heading": {
26
+ "column-layout": {
27
+ "column-rule-color": DesignToken,
28
+ "column-rule-width": DesignToken,
29
+ "column-width": DesignToken,
30
+ "gap": DesignToken
31
+ },
32
+ "blockquote": {
33
+ "background-color": DesignToken,
34
+ "border-inline-start-width": DesignToken,
35
+ "border-color": DesignToken,
36
+ "border-radius": DesignToken,
37
+ "border-width": DesignToken,
27
38
  "color": DesignToken,
39
+ "font-size": DesignToken,
28
40
  "font-family": DesignToken,
29
- "font-weight": DesignToken,
30
- "line-height": DesignToken,
31
- "font-size": DesignToken
41
+ "padding-block-end": DesignToken,
42
+ "padding-block-start": DesignToken,
43
+ "padding-inline-end": DesignToken,
44
+ "padding-inline-start": DesignToken,
45
+ "row-gap": DesignToken,
46
+ "attribution": {
47
+ "color": DesignToken,
48
+ "font-size": DesignToken
49
+ },
50
+ "content": {
51
+ "color": DesignToken,
52
+ "font-size": DesignToken,
53
+ "font-family": DesignToken,
54
+ "line-height": DesignToken,
55
+ "font-weight": DesignToken
56
+ },
57
+ "caption": {
58
+ "font-size": DesignToken,
59
+ "font-family": DesignToken,
60
+ "line-height": DesignToken,
61
+ "font-weight": DesignToken,
62
+ "padding-block-start": DesignToken,
63
+ "color": DesignToken
64
+ },
65
+ "margin-block-end": DesignToken,
66
+ "margin-block-start": DesignToken,
67
+ "margin-inline-end": DesignToken,
68
+ "margin-inline-start": DesignToken,
69
+ "border-block-start-width": DesignToken,
70
+ "border-block-end-width": DesignToken,
71
+ "border-inline-end-width": DesignToken,
72
+ "border-start-start-radius": DesignToken,
73
+ "border-start-end-radius": DesignToken,
74
+ "border-end-start-radius": DesignToken,
75
+ "border-end-end-radius": DesignToken,
76
+ "blue-corner-border-variation": {
77
+ "border-color": DesignToken,
78
+ "border-block-end-width": DesignToken,
79
+ "border-inline-end-width": DesignToken,
80
+ "border-end-end-radius": DesignToken
81
+ },
82
+ "pink-background-variation": {
83
+ "background-color": DesignToken,
84
+ "border-end-start-radius": DesignToken,
85
+ "padding": DesignToken
86
+ },
87
+ "pink-left-border-variation": {
88
+ "border-color": DesignToken,
89
+ "border-inline-start-width": DesignToken,
90
+ "padding-inline-start": DesignToken,
91
+ "padding-inline-end": DesignToken,
92
+ "padding-block-start": DesignToken,
93
+ "padding-block-end": DesignToken
94
+ },
95
+ "pink-corner-border-variation": {
96
+ "border-color": DesignToken,
97
+ "border-block-start-width": DesignToken,
98
+ "border-inline-start-width": DesignToken,
99
+ "border-start-start-radius": DesignToken,
100
+ "padding": DesignToken
101
+ }
32
102
  },
33
103
  "icon": {
34
104
  "color": DesignToken,
@@ -370,6 +440,13 @@ declare const tokens: {
370
440
  "border-radius": DesignToken,
371
441
  "border-width": DesignToken
372
442
  },
443
+ "pre-heading": {
444
+ "color": DesignToken,
445
+ "font-family": DesignToken,
446
+ "font-weight": DesignToken,
447
+ "line-height": DesignToken,
448
+ "font-size": DesignToken
449
+ },
373
450
  "paragraph": {
374
451
  "color": DesignToken,
375
452
  "font-family": DesignToken,
@@ -773,7 +850,12 @@ declare const tokens: {
773
850
  "color": DesignToken
774
851
  },
775
852
  "font-size": DesignToken,
776
- "line-height": DesignToken
853
+ "line-height": DesignToken,
854
+ "pressed": {
855
+ "background-color": DesignToken,
856
+ "border-color": DesignToken,
857
+ "color": DesignToken
858
+ }
777
859
  },
778
860
  "secondary-action": {
779
861
  "hover": {
@@ -801,7 +883,12 @@ declare const tokens: {
801
883
  "color": DesignToken
802
884
  },
803
885
  "font-size": DesignToken,
804
- "line-height": DesignToken
886
+ "line-height": DesignToken,
887
+ "pressed": {
888
+ "background-color": DesignToken,
889
+ "border-color": DesignToken,
890
+ "color": DesignToken
891
+ }
805
892
  },
806
893
  "subtle": {
807
894
  "font-size": DesignToken,
@@ -829,7 +916,17 @@ declare const tokens: {
829
916
  "border-color": DesignToken,
830
917
  "color": DesignToken
831
918
  },
832
- "line-height": DesignToken
919
+ "line-height": DesignToken,
920
+ "pressed": {
921
+ "background-color": DesignToken,
922
+ "border-color": DesignToken,
923
+ "color": DesignToken
924
+ }
925
+ },
926
+ "pressed": {
927
+ "background-color": DesignToken,
928
+ "border-color": DesignToken,
929
+ "color": DesignToken
833
930
  }
834
931
  },
835
932
  "breadcrumb-nav": {
@@ -873,69 +970,6 @@ declare const tokens: {
873
970
  "font-family": DesignToken,
874
971
  "font-weight": DesignToken
875
972
  },
876
- "blockquote": {
877
- "caption": {
878
- "font-size": DesignToken,
879
- "font-family": DesignToken,
880
- "line-height": DesignToken,
881
- "font-weight": DesignToken,
882
- "padding-block-start": DesignToken,
883
- "color": DesignToken
884
- },
885
- "content": {
886
- "font-family": DesignToken,
887
- "line-height": DesignToken,
888
- "font-weight": DesignToken,
889
- "font-size": DesignToken,
890
- "color": DesignToken
891
- },
892
- "margin-block-end": DesignToken,
893
- "margin-block-start": DesignToken,
894
- "margin-inline-end": DesignToken,
895
- "margin-inline-start": DesignToken,
896
- "padding-block-end": DesignToken,
897
- "padding-block-start": DesignToken,
898
- "padding-inline-end": DesignToken,
899
- "padding-inline-start": DesignToken,
900
- "row-gap": DesignToken,
901
- "background-color": DesignToken,
902
- "border-color": DesignToken,
903
- "border-block-start-width": DesignToken,
904
- "border-block-end-width": DesignToken,
905
- "border-inline-start-width": DesignToken,
906
- "border-inline-end-width": DesignToken,
907
- "border-start-start-radius": DesignToken,
908
- "border-start-end-radius": DesignToken,
909
- "border-end-start-radius": DesignToken,
910
- "border-end-end-radius": DesignToken,
911
- "border-width": DesignToken,
912
- "blue-corner-border-variation": {
913
- "border-color": DesignToken,
914
- "border-block-end-width": DesignToken,
915
- "border-inline-end-width": DesignToken,
916
- "border-end-end-radius": DesignToken
917
- },
918
- "pink-background-variation": {
919
- "background-color": DesignToken,
920
- "border-end-start-radius": DesignToken,
921
- "padding": DesignToken
922
- },
923
- "pink-left-border-variation": {
924
- "border-color": DesignToken,
925
- "border-inline-start-width": DesignToken,
926
- "padding-inline-start": DesignToken,
927
- "padding-inline-end": DesignToken,
928
- "padding-block-start": DesignToken,
929
- "padding-block-end": DesignToken
930
- },
931
- "pink-corner-border-variation": {
932
- "border-color": DesignToken,
933
- "border-block-start-width": DesignToken,
934
- "border-inline-start-width": DesignToken,
935
- "border-start-start-radius": DesignToken,
936
- "padding": DesignToken
937
- }
938
- },
939
973
  "article": {
940
974
  "max-inline-size": DesignToken
941
975
  },
@@ -1074,6 +1108,45 @@ declare const tokens: {
1074
1108
  }
1075
1109
  },
1076
1110
  "rhc": {
1111
+ "keep": {
1112
+ "_comment": DesignToken,
1113
+ "top-left": {
1114
+ "borderRadiusTopLeft": DesignToken,
1115
+ "borderRadiusTopRight": DesignToken,
1116
+ "borderRadiusBottomRight": DesignToken,
1117
+ "borderRadiusBottomLeft": DesignToken
1118
+ },
1119
+ "top-right": {
1120
+ "borderRadiusTopRight": DesignToken,
1121
+ "borderRadiusTopLeft": DesignToken,
1122
+ "borderRadiusBottomRight": DesignToken,
1123
+ "borderRadiusBottomLeft": DesignToken
1124
+ },
1125
+ "bottom-right": {
1126
+ "borderRadiusTopLeft": DesignToken,
1127
+ "borderRadiusTopRight": DesignToken,
1128
+ "borderRadiusBottomRight": DesignToken,
1129
+ "borderRadiusBottomLeft": DesignToken
1130
+ },
1131
+ "bottom-left": {
1132
+ "borderRadiusTopLeft": DesignToken,
1133
+ "borderRadiusTopRight": DesignToken,
1134
+ "borderRadiusBottomRight": DesignToken,
1135
+ "borderRadiusBottomLeft": DesignToken
1136
+ }
1137
+ },
1138
+ "rounded-corner": {
1139
+ "xs": {
1140
+ "border-radius": DesignToken
1141
+ },
1142
+ "md": {
1143
+ "border-radius": DesignToken
1144
+ },
1145
+ "xl": {
1146
+ "border-radius": DesignToken
1147
+ },
1148
+ "border-width": DesignToken
1149
+ },
1077
1150
  "sub-nav-bar": {
1078
1151
  "background-color": DesignToken,
1079
1152
  "column-gap": DesignToken,
@@ -1540,36 +1613,9 @@ declare const tokens: {
1540
1613
  "border-radius": DesignToken,
1541
1614
  "color": DesignToken
1542
1615
  },
1543
- "keep": {
1544
- "top-left": {
1545
- "borderRadiusTopLeft": DesignToken,
1546
- "borderRadiusTopRight": DesignToken,
1547
- "borderRadiusBottomRight": DesignToken,
1548
- "borderRadiusBottomLeft": DesignToken
1549
- },
1550
- "top-right": {
1551
- "borderRadiusTopRight": DesignToken,
1552
- "borderRadiusTopLeft": DesignToken,
1553
- "borderRadiusBottomRight": DesignToken,
1554
- "borderRadiusBottomLeft": DesignToken
1555
- },
1556
- "bottom-right": {
1557
- "borderRadiusTopLeft": DesignToken,
1558
- "borderRadiusTopRight": DesignToken,
1559
- "borderRadiusBottomRight": DesignToken,
1560
- "borderRadiusBottomLeft": DesignToken
1561
- },
1562
- "bottom-left": {
1563
- "borderRadiusTopLeft": DesignToken,
1564
- "borderRadiusTopRight": DesignToken,
1565
- "borderRadiusBottomRight": DesignToken,
1566
- "borderRadiusBottomLeft": DesignToken
1567
- }
1568
- },
1569
1616
  "border-radius": {
1570
1617
  "sm": DesignToken,
1571
1618
  "md": DesignToken,
1572
- "keep": DesignToken,
1573
1619
  "circle": DesignToken,
1574
1620
  "none": DesignToken
1575
1621
  },
@@ -1580,8 +1626,10 @@ declare const tokens: {
1580
1626
  "foreground": {
1581
1627
  "default": DesignToken,
1582
1628
  "subdued": DesignToken,
1583
- "onEmphasis": DesignToken,
1584
- "link": DesignToken
1629
+ "link": DesignToken,
1630
+ "on-dark-color": DesignToken,
1631
+ "on-light-color": DesignToken,
1632
+ "onEmphasis": DesignToken
1585
1633
  },
1586
1634
  "border": {
1587
1635
  "default": DesignToken,
@@ -1610,6 +1658,9 @@ declare const tokens: {
1610
1658
  "accent": {
1611
1659
  "500": DesignToken
1612
1660
  },
1661
+ "accent-2": {
1662
+ "500": DesignToken
1663
+ },
1613
1664
  "primary": {
1614
1665
  "50": DesignToken,
1615
1666
  "100": DesignToken,