@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
@@ -635,62 +635,6 @@
635
635
  "padding-inline-start": "1rem",
636
636
  "text-decoration": "underline"
637
637
  },
638
- "link-list": {
639
- "item": {
640
- "text-decoration": "None",
641
- "column-gap": "0.5rem"
642
- },
643
- "margin-block-end": "0rem",
644
- "margin-block-start": "0rem",
645
- "row-gap": "0.5rem",
646
- "icon": {
647
- "inset-block-start": "0.188rem",
648
- "size": "24px"
649
- },
650
- "link": {
651
- "column-gap": "0.5rem",
652
- "text-decoration": "None"
653
- },
654
- "font-weight": 400
655
- },
656
- "link": {
657
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
658
- "font-weight": 400,
659
- "line-height": "150%",
660
- "font-size": "1.25rem",
661
- "active": {
662
- "text-decoration": "None",
663
- "color": "#163f5b"
664
- },
665
- "focus": {
666
- "text-decoration": "None",
667
- "text-decoration-thickness": "auto",
668
- "background-color": "transparent",
669
- "color": "#01689b"
670
- },
671
- "icon": {
672
- "inset-block-start": "0.25rem",
673
- "size": "24px"
674
- },
675
- "color": "#01689b",
676
- "text-decoration-color": "inherit",
677
- "column-gap": "0.25rem",
678
- "text-decoration": "underline",
679
- "text-decoration-thickness": "0.0625em",
680
- "text-underline-offset": "0.125rem",
681
- "hover": {
682
- "color": "#15496a",
683
- "text-decoration": "underline",
684
- "text-decoration-thickness": "0.1875em"
685
- },
686
- "focus-visible": {
687
- "text-decoration": "None",
688
- "text-decoration-thickness": "0.0625em"
689
- },
690
- "visited": {
691
- "color": "#01689b"
692
- }
693
- },
694
638
  "data-badge": {
695
639
  "background-color": "#e1eddb",
696
640
  "border-radius": "10px",
@@ -853,27 +797,31 @@
853
797
  "row-gap": "0.5rem"
854
798
  },
855
799
  "breadcrumb-nav": {
856
- "divider": {
800
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
801
+ "font-size": "1.25rem",
802
+ "line-height": "150%",
803
+ "min-block-size": "48px",
804
+ "item": {
805
+ "padding-block-end": "0.5rem",
806
+ "padding-block-start": "0.5rem",
807
+ "padding-inline-end": "0.5rem",
808
+ "padding-inline-start": "0.5rem",
809
+ "first": {
810
+ "padding-inline-start": "0rem"
811
+ }
812
+ },
813
+ "separator": {
857
814
  "color": "#334155",
858
- "inset-block-start": 0,
859
- "size": "24px"
815
+ "icon": {
816
+ "size": "24px"
817
+ }
860
818
  },
861
819
  "link": {
862
- "padding-block-end": "0.75rem",
863
- "padding-block-start": "0.75rem",
864
- "padding-inline-end": "0rem",
865
- "padding-inline-start": "0rem",
820
+ "color": "#01689b",
821
+ "text-decoration": "underline",
866
822
  "current": {
867
- "color": "#334155",
868
823
  "font-weight": 400
869
824
  },
870
- "icon": {
871
- "inset-block-start": 0,
872
- "margin-inline": "0.25rem",
873
- "size": "24px"
874
- },
875
- "color": "#01689b",
876
- "text-decoration": "underline",
877
825
  "active": {
878
826
  "color": "#163f5b",
879
827
  "text-decoration": "underline"
@@ -889,28 +837,26 @@
889
837
  "hover": {
890
838
  "text-decoration": "underline",
891
839
  "color": "#01496c"
892
- }
893
- },
894
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
895
- "font-size": "1.25rem",
896
- "line-height": "150%",
897
- "min-block-size": "48px",
898
- "item": {
899
- "padding-block-end": "0.5rem",
900
- "padding-block-start": "0.5rem",
901
- "padding-inline-end": "0.5rem",
902
- "padding-inline-start": "0.5rem",
903
- "first": {
904
- "padding-inline-start": "0rem"
905
- }
906
- },
907
- "separator": {
908
- "color": "#334155",
840
+ },
909
841
  "icon": {
910
842
  "size": "24px"
911
843
  }
912
844
  }
913
845
  },
846
+ "link-list": {
847
+ "margin-block-end": "0rem",
848
+ "margin-block-start": "0rem",
849
+ "row-gap": "0.5rem",
850
+ "icon": {
851
+ "inset-block-start": "0.188rem",
852
+ "size": "24px"
853
+ },
854
+ "link": {
855
+ "column-gap": "0.5rem",
856
+ "text-decoration": "None"
857
+ },
858
+ "font-weight": 400
859
+ },
914
860
  "action": {
915
861
  "activate": {
916
862
  "cursor": "pointer"
@@ -932,13 +878,6 @@
932
878
  }
933
879
  },
934
880
  "unordered-list": {
935
- "color": "#0F172A",
936
- "marker": {
937
- "border-color": "#0F172A",
938
- "color": "#0F172A"
939
- },
940
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
941
- "font-weight": 400,
942
881
  "font-size": "1.25rem",
943
882
  "line-height": "150%",
944
883
  "margin-block-end": "0.25rem",
@@ -948,18 +887,17 @@
948
887
  "margin-block-end": "0.25rem",
949
888
  "margin-block-start": "0.25rem",
950
889
  "padding-inline-start": "0.5rem"
890
+ },
891
+ "marker": {
892
+ "color": "#0F172A"
951
893
  }
952
894
  },
953
895
  "ordered-list": {
954
- "color": "#0F172A",
955
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
956
- "font-weight": 400,
957
- "margin-inline-start": "0.625rem",
958
896
  "font-size": "1.25rem",
959
897
  "line-height": "150%",
960
898
  "margin-block-end": "0.25rem",
961
899
  "margin-block-start": "0.25rem",
962
- "padding-inline-start": "1.5rem",
900
+ "padding-inline-start": "2rem",
963
901
  "item": {
964
902
  "margin-block-end": "0.25rem",
965
903
  "margin-block-start": "0.25rem",
@@ -1060,80 +998,35 @@
1060
998
  "line-height": "125%",
1061
999
  "font-size": "1rem"
1062
1000
  },
1063
- "paragraph": {
1064
- "color": "#0F172A",
1065
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1066
- "font-size": "1.25rem",
1067
- "font-weight": 400,
1068
- "line-height": "150%",
1069
- "lead": {
1070
- "color": "#0F172A",
1071
- "font-size": "1.5rem",
1072
- "font-weight": 400,
1073
- "line-height": "150%"
1001
+ "link": {
1002
+ "color": "#01689b",
1003
+ "text-decoration-color": "inherit",
1004
+ "column-gap": "0.25rem",
1005
+ "text-decoration": "underline",
1006
+ "text-decoration-thickness": "0.0625em",
1007
+ "text-underline-offset": "0.125rem",
1008
+ "icon": {
1009
+ "size": "24px"
1074
1010
  },
1075
- "small": {
1076
- "font-size": "1.5rem",
1077
- "color": "#0F172A",
1078
- "font-weight": 400,
1079
- "line-height": "150%"
1011
+ "active": {
1012
+ "color": "#163f5b"
1080
1013
  },
1081
- "margin-block-end": "0rem",
1082
- "margin-block-start": "0rem"
1083
- },
1084
- "heading-1": {
1085
- "color": "#154273",
1086
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1087
- "font-size": "3.125rem",
1088
- "font-weight": 700,
1089
- "line-height": "125%",
1090
- "margin-block-end": "0rem",
1091
- "margin-block-start": "0rem"
1092
- },
1093
- "heading-2": {
1094
- "color": "#154273",
1095
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1096
- "font-size": "2.5rem",
1097
- "font-weight": 700,
1098
- "line-height": "125%",
1099
- "margin-block-end": "0rem",
1100
- "margin-block-start": "0rem"
1101
- },
1102
- "heading-3": {
1103
- "color": "#154273",
1104
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1105
- "font-size": "1.875rem",
1106
- "font-weight": 700,
1107
- "line-height": "125%",
1108
- "margin-block-end": "0rem",
1109
- "margin-block-start": "0rem"
1110
- },
1111
- "heading-4": {
1112
- "color": "#154273",
1113
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1114
- "font-size": "1.5rem",
1115
- "font-weight": 700,
1116
- "line-height": "150%",
1117
- "margin-block-end": "0rem",
1118
- "margin-block-start": "0rem"
1119
- },
1120
- "heading-5": {
1121
- "color": "#154273",
1122
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1123
- "font-size": "1.25rem",
1124
- "font-weight": 700,
1125
- "line-height": "150%",
1126
- "margin-block-end": "0rem",
1127
- "margin-block-start": "0rem"
1128
- },
1129
- "heading-6": {
1130
- "color": "#154273",
1131
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1132
- "font-size": "1.25rem",
1133
- "font-weight": 700,
1134
- "line-height": "150%",
1135
- "margin-block-end": "0rem",
1136
- "margin-block-start": "0rem"
1014
+ "hover": {
1015
+ "color": "#15496a",
1016
+ "text-decoration": "underline",
1017
+ "text-decoration-thickness": "0.1875em"
1018
+ },
1019
+ "focus": {
1020
+ "background-color": "transparent",
1021
+ "color": "#01689b"
1022
+ },
1023
+ "focus-visible": {
1024
+ "text-decoration": "None",
1025
+ "text-decoration-thickness": "0.0625em"
1026
+ },
1027
+ "visited": {
1028
+ "color": "#01689b"
1029
+ }
1137
1030
  },
1138
1031
  "page-footer": {
1139
1032
  "background-color": "#39870c",
@@ -1374,29 +1267,23 @@
1374
1267
  "line-height": "150%",
1375
1268
  "font-size": "1.25rem"
1376
1269
  },
1377
- "link": {
1378
- "column-gap": "0.25rem",
1270
+ "paragraph": {
1271
+ "color": "#0F172A",
1379
1272
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1380
1273
  "font-size": "1.25rem",
1381
1274
  "font-weight": 400,
1382
1275
  "line-height": "150%",
1383
- "icon": {
1384
- "inset-block-start": "0.25rem",
1385
- "size": "24px"
1386
- },
1387
- "active": {
1388
- "text-decoration": "None",
1389
- "color": "#1a4972"
1390
- },
1391
- "focus": {
1392
- "background-color": "transparent",
1393
- "color": "#01689b",
1394
- "text-decoration": "None",
1395
- "text-decoration-thickness": "auto"
1396
- },
1397
- "visited": {
1398
- "color": "#01689b"
1399
- },
1276
+ "margin-block-end": "0rem",
1277
+ "margin-block-start": "0rem",
1278
+ "lead": {
1279
+ "font-size": "1.5rem",
1280
+ "font-weight": 400,
1281
+ "line-height": "150%",
1282
+ "margin-block-end": "0rem",
1283
+ "margin-block-start": "0rem"
1284
+ }
1285
+ },
1286
+ "link": {
1400
1287
  "color": "#01689b",
1401
1288
  "text-decoration-color": "inherit",
1402
1289
  "text-decoration-line": "underline",
@@ -1405,6 +1292,9 @@
1405
1292
  "current": {
1406
1293
  "cursor": "default"
1407
1294
  },
1295
+ "active": {
1296
+ "color": "#1a4972"
1297
+ },
1408
1298
  "disabled": {
1409
1299
  "color": "#334155",
1410
1300
  "cursor": "disabled"
@@ -1415,23 +1305,6 @@
1415
1305
  "color": "#01496c"
1416
1306
  }
1417
1307
  },
1418
- "paragraph": {
1419
- "lead": {
1420
- "color": "#0F172A",
1421
- "font-size": "1.5rem",
1422
- "font-weight": 400,
1423
- "line-height": "150%",
1424
- "margin-block-end": "0rem",
1425
- "margin-block-start": "0rem"
1426
- },
1427
- "color": "#0F172A",
1428
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1429
- "font-size": "1.25rem",
1430
- "font-weight": 400,
1431
- "line-height": "150%",
1432
- "margin-block-end": "0rem",
1433
- "margin-block-start": "0rem"
1434
- },
1435
1308
  "heading": {
1436
1309
  "level-1": {
1437
1310
  "color": "#154273",
@@ -1546,9 +1419,6 @@
1546
1419
  "line-height": "150%"
1547
1420
  }
1548
1421
  },
1549
- "link-list": {
1550
- "text-decoration": "None"
1551
- },
1552
1422
  "data-badge-button": {
1553
1423
  "column-gap": "0.125rem",
1554
1424
  "hover": {
@@ -1556,6 +1426,13 @@
1556
1426
  "color": "#fff"
1557
1427
  }
1558
1428
  },
1429
+ "breadcrumb-nav": {
1430
+ "link": {
1431
+ "current": {
1432
+ "color": "#334155"
1433
+ }
1434
+ }
1435
+ },
1559
1436
  "rounded-corner": {
1560
1437
  "xs": {
1561
1438
  "border-radius": "24px"
@@ -1568,6 +1445,11 @@
1568
1445
  },
1569
1446
  "border-width": "2px"
1570
1447
  },
1448
+ "unordered-list": {
1449
+ "nested": {
1450
+ "margin-inline-start": "0rem"
1451
+ }
1452
+ },
1571
1453
  "data-summary": {
1572
1454
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1573
1455
  "item-value": {
@@ -2061,6 +1943,9 @@
2061
1943
  "padding-inline-start": "1.5rem",
2062
1944
  "padding-inline-end": "1.5rem"
2063
1945
  },
1946
+ "link": {
1947
+ "column-gap": "0.25rem"
1948
+ },
2064
1949
  "icon-only-button": {
2065
1950
  "padding-block-end": "0.75rem",
2066
1951
  "padding-block-start": "0.75rem",
@@ -2189,7 +2074,6 @@
2189
2074
  "border-width": "1px",
2190
2075
  "color": "#0F172A",
2191
2076
  "column-gap": "1rem",
2192
- "inline-size": "328px",
2193
2077
  "icon": {
2194
2078
  "color": "#39870c",
2195
2079
  "size": "24px"
@@ -2350,5 +2234,12 @@
2350
2234
  "600": "3rem",
2351
2235
  "700": "3.5rem"
2352
2236
  }
2237
+ },
2238
+ "figma": {
2239
+ "link": {
2240
+ "icon": {
2241
+ "size": "1.25rem"
2242
+ }
2243
+ }
2353
2244
  }
2354
2245
  }