@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": "RijksSans, 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": "#dce3ea",
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": "RijksSans, 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": "RijksSans, 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": "RijksSans, 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": "RijksSans, 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",
@@ -1063,86 +1001,41 @@
1063
1001
  "line-height": "125%",
1064
1002
  "font-size": "1rem"
1065
1003
  },
1066
- "paragraph": {
1067
- "color": "#0F172A",
1068
- "font-family": "RijksSans, Arial, Verdana, sans-serif",
1069
- "font-size": "1.25rem",
1070
- "font-weight": 400,
1071
- "line-height": "150%",
1072
- "lead": {
1073
- "color": "#0F172A",
1074
- "font-size": "1.5rem",
1075
- "font-weight": 400,
1076
- "line-height": "150%"
1004
+ "link": {
1005
+ "color": "#01689b",
1006
+ "text-decoration-color": "inherit",
1007
+ "column-gap": "0.25rem",
1008
+ "text-decoration": "underline",
1009
+ "text-decoration-thickness": "0.0625em",
1010
+ "text-underline-offset": "0.125rem",
1011
+ "icon": {
1012
+ "size": "24px"
1077
1013
  },
1078
- "small": {
1079
- "font-size": "1.5rem",
1080
- "color": "#0F172A",
1081
- "font-weight": 400,
1082
- "line-height": "150%"
1014
+ "active": {
1015
+ "color": "#163f5b"
1083
1016
  },
1084
- "margin-block-end": "0rem",
1085
- "margin-block-start": "0rem"
1017
+ "hover": {
1018
+ "color": "#15496a",
1019
+ "text-decoration": "underline",
1020
+ "text-decoration-thickness": "0.1875em"
1021
+ },
1022
+ "focus": {
1023
+ "background-color": "transparent",
1024
+ "color": "#01689b"
1025
+ },
1026
+ "focus-visible": {
1027
+ "text-decoration": "None",
1028
+ "text-decoration-thickness": "0.0625em"
1029
+ },
1030
+ "visited": {
1031
+ "color": "#01689b"
1032
+ }
1086
1033
  },
1087
1034
  "icon": {
1088
1035
  "color": "inherit",
1089
1036
  "size": "24px",
1090
1037
  "inset-block-start": "0rem"
1091
1038
  },
1092
- "heading-1": {
1093
- "color": "#154273",
1094
- "font-family": "RijksSans, Arial, Verdana, sans-serif",
1095
- "font-size": "3.125rem",
1096
- "font-weight": 700,
1097
- "line-height": "125%",
1098
- "margin-block-end": "0rem",
1099
- "margin-block-start": "0rem"
1100
- },
1101
- "heading-2": {
1102
- "color": "#154273",
1103
- "font-family": "RijksSans, Arial, Verdana, sans-serif",
1104
- "font-size": "2.5rem",
1105
- "font-weight": 700,
1106
- "line-height": "125%",
1107
- "margin-block-end": "0rem",
1108
- "margin-block-start": "0rem"
1109
- },
1110
- "heading-3": {
1111
- "color": "#154273",
1112
- "font-family": "RijksSans, Arial, Verdana, sans-serif",
1113
- "font-size": "1.875rem",
1114
- "font-weight": 700,
1115
- "line-height": "125%",
1116
- "margin-block-end": "0rem",
1117
- "margin-block-start": "0rem"
1118
- },
1119
- "heading-4": {
1120
- "color": "#154273",
1121
- "font-family": "RijksSans, Arial, Verdana, sans-serif",
1122
- "font-size": "1.5rem",
1123
- "font-weight": 700,
1124
- "line-height": "150%",
1125
- "margin-block-end": "0rem",
1126
- "margin-block-start": "0rem"
1127
- },
1128
- "heading-5": {
1129
- "color": "#154273",
1130
- "font-family": "RijksSans, Arial, Verdana, sans-serif",
1131
- "font-size": "1.25rem",
1132
- "font-weight": 700,
1133
- "line-height": "150%",
1134
- "margin-block-end": "0rem",
1135
- "margin-block-start": "0rem"
1136
- },
1137
- "heading-6": {
1138
- "color": "#154273",
1139
- "font-family": "RijksSans, Arial, Verdana, sans-serif",
1140
- "font-size": "1.25rem",
1141
- "font-weight": 700,
1142
- "line-height": "150%",
1143
- "margin-block-end": "0rem",
1144
- "margin-block-start": "0rem"
1145
- },
1146
1039
  "form-fieldset": {
1147
1040
  "legend": {
1148
1041
  "color": "#0F172A",
@@ -1375,27 +1268,11 @@
1375
1268
  "font-size": "1.25rem"
1376
1269
  },
1377
1270
  "link": {
1378
- "column-gap": "0.25rem",
1379
- "font-family": "RijksSans, Arial, Verdana, sans-serif",
1380
- "font-size": "1.25rem",
1381
- "font-weight": 400,
1382
- "line-height": "150%",
1383
- "icon": {
1384
- "inset-block-start": "0.25rem",
1385
- "size": "24px"
1386
- },
1387
1271
  "active": {
1388
- "text-decoration": "None",
1389
1272
  "color": "#800080"
1390
1273
  },
1391
1274
  "focus": {
1392
- "background-color": "transparent",
1393
- "color": "#01689b",
1394
- "text-decoration": "None",
1395
- "text-decoration-thickness": "auto"
1396
- },
1397
- "visited": {
1398
- "color": "#01689b"
1275
+ "text-decoration-thickness": "1px"
1399
1276
  },
1400
1277
  "hover": {
1401
1278
  "text-decoration-line": "underline",
@@ -1404,6 +1281,9 @@
1404
1281
  },
1405
1282
  "text-decoration-line": "underline",
1406
1283
  "text-decoration-thickness": "1px",
1284
+ "visited": {
1285
+ "color": "#800080"
1286
+ },
1407
1287
  "color": "#01689b",
1408
1288
  "text-decoration-color": "inherit",
1409
1289
  "text-underline-offset": "0.125rem",
@@ -1416,21 +1296,20 @@
1416
1296
  }
1417
1297
  },
1418
1298
  "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
1299
  "color": "#0F172A",
1428
1300
  "font-family": "RijksSans, Arial, Verdana, sans-serif",
1429
1301
  "font-size": "1.25rem",
1430
1302
  "font-weight": 400,
1431
1303
  "line-height": "150%",
1432
1304
  "margin-block-end": "0rem",
1433
- "margin-block-start": "0rem"
1305
+ "margin-block-start": "0rem",
1306
+ "lead": {
1307
+ "font-size": "1.5rem",
1308
+ "font-weight": 400,
1309
+ "line-height": "150%",
1310
+ "margin-block-end": "0rem",
1311
+ "margin-block-start": "0rem"
1312
+ }
1434
1313
  },
1435
1314
  "heading": {
1436
1315
  "level-1": {
@@ -1546,9 +1425,6 @@
1546
1425
  "line-height": "150%"
1547
1426
  }
1548
1427
  },
1549
- "link-list": {
1550
- "text-decoration": "None"
1551
- },
1552
1428
  "data-badge-button": {
1553
1429
  "column-gap": "0.125rem",
1554
1430
  "hover": {
@@ -1556,6 +1432,13 @@
1556
1432
  "color": "#fff"
1557
1433
  }
1558
1434
  },
1435
+ "breadcrumb-nav": {
1436
+ "link": {
1437
+ "current": {
1438
+ "color": "#334155"
1439
+ }
1440
+ }
1441
+ },
1559
1442
  "rounded-corner": {
1560
1443
  "xs": {
1561
1444
  "border-radius": "24px"
@@ -1568,6 +1451,11 @@
1568
1451
  },
1569
1452
  "border-width": "2px"
1570
1453
  },
1454
+ "unordered-list": {
1455
+ "nested": {
1456
+ "margin-inline-start": "0rem"
1457
+ }
1458
+ },
1571
1459
  "font-family": {
1572
1460
  "primary": "RijksSans, Arial, Verdana, sans-serif",
1573
1461
  "secondary": "RijksoverheidSerifWeb, 'Times New Roman', serif"
@@ -1836,6 +1724,9 @@
1836
1724
  "padding-inline-start": "1.5rem",
1837
1725
  "padding-inline-end": "1.5rem"
1838
1726
  },
1727
+ "link": {
1728
+ "column-gap": "0.25rem"
1729
+ },
1839
1730
  "icon-only-button": {
1840
1731
  "padding-block-end": "0.75rem",
1841
1732
  "padding-block-start": "0.75rem",
@@ -1983,7 +1874,6 @@
1983
1874
  "border-width": "1px",
1984
1875
  "color": "#0F172A",
1985
1876
  "column-gap": "1rem",
1986
- "inline-size": "328px",
1987
1877
  "icon": {
1988
1878
  "color": "#154273",
1989
1879
  "size": "24px"
@@ -2350,5 +2240,12 @@
2350
2240
  "600": "3rem",
2351
2241
  "700": "3.5rem"
2352
2242
  }
2243
+ },
2244
+ "figma": {
2245
+ "link": {
2246
+ "icon": {
2247
+ "size": "1.25rem"
2248
+ }
2249
+ }
2353
2250
  }
2354
2251
  }