@rijkshuisstijl-community/design-tokens 7.0.0 → 9.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 (104) hide show
  1. package/CHANGELOG.md +84 -0
  2. package/dist/_variables.scss +14 -56
  3. package/dist/index.css +14 -56
  4. package/dist/index.d.ts +8 -50
  5. package/dist/index.js +14 -56
  6. package/dist/index.json +13 -55
  7. package/dist/index.tokens.json +18 -72
  8. package/dist/koop/_variables.scss +39 -79
  9. package/dist/koop/index.css +39 -79
  10. package/dist/koop/index.d.ts +33 -73
  11. package/dist/koop/index.js +39 -79
  12. package/dist/koop/index.json +38 -78
  13. package/dist/koop/index.tokens.json +73 -129
  14. package/dist/koop/root.css +39 -79
  15. package/dist/koop/tokens.d.ts +68 -124
  16. package/dist/koop/tokens.js +1187 -2057
  17. package/dist/root.css +14 -56
  18. package/dist/tokens.d.ts +13 -67
  19. package/dist/tokens.js +280 -1232
  20. package/dist/uitvoerend-groen/_variables.scss +27 -65
  21. package/dist/uitvoerend-groen/index.css +27 -65
  22. package/dist/uitvoerend-groen/index.d.ts +21 -59
  23. package/dist/uitvoerend-groen/index.js +27 -65
  24. package/dist/uitvoerend-groen/index.json +26 -64
  25. package/dist/uitvoerend-groen/index.tokens.json +51 -101
  26. package/dist/uitvoerend-groen/root.css +27 -65
  27. package/dist/uitvoerend-groen/tokens.d.ts +46 -96
  28. package/dist/uitvoerend-groen/tokens.js +526 -1394
  29. package/dist/uitvoerend-hemelblauw/_variables.scss +27 -65
  30. package/dist/uitvoerend-hemelblauw/index.css +27 -65
  31. package/dist/uitvoerend-hemelblauw/index.d.ts +21 -59
  32. package/dist/uitvoerend-hemelblauw/index.js +27 -65
  33. package/dist/uitvoerend-hemelblauw/index.json +26 -64
  34. package/dist/uitvoerend-hemelblauw/index.tokens.json +51 -101
  35. package/dist/uitvoerend-hemelblauw/root.css +27 -65
  36. package/dist/uitvoerend-hemelblauw/tokens.d.ts +46 -96
  37. package/dist/uitvoerend-hemelblauw/tokens.js +526 -1394
  38. package/dist/uitvoerend-mintgroen/_variables.scss +27 -65
  39. package/dist/uitvoerend-mintgroen/index.css +27 -65
  40. package/dist/uitvoerend-mintgroen/index.d.ts +21 -59
  41. package/dist/uitvoerend-mintgroen/index.js +27 -65
  42. package/dist/uitvoerend-mintgroen/index.json +26 -64
  43. package/dist/uitvoerend-mintgroen/index.tokens.json +51 -101
  44. package/dist/uitvoerend-mintgroen/root.css +27 -65
  45. package/dist/uitvoerend-mintgroen/tokens.d.ts +46 -96
  46. package/dist/uitvoerend-mintgroen/tokens.js +526 -1394
  47. package/dist/uitvoerend-oranje/_variables.scss +27 -65
  48. package/dist/uitvoerend-oranje/index.css +27 -65
  49. package/dist/uitvoerend-oranje/index.d.ts +21 -59
  50. package/dist/uitvoerend-oranje/index.js +27 -65
  51. package/dist/uitvoerend-oranje/index.json +26 -64
  52. package/dist/uitvoerend-oranje/index.tokens.json +51 -101
  53. package/dist/uitvoerend-oranje/root.css +27 -65
  54. package/dist/uitvoerend-oranje/tokens.d.ts +46 -96
  55. package/dist/uitvoerend-oranje/tokens.js +526 -1394
  56. package/dist/uitvoerend-paars/_variables.scss +27 -65
  57. package/dist/uitvoerend-paars/index.css +27 -65
  58. package/dist/uitvoerend-paars/index.d.ts +21 -59
  59. package/dist/uitvoerend-paars/index.js +27 -65
  60. package/dist/uitvoerend-paars/index.json +26 -64
  61. package/dist/uitvoerend-paars/index.tokens.json +51 -101
  62. package/dist/uitvoerend-paars/root.css +27 -65
  63. package/dist/uitvoerend-paars/tokens.d.ts +46 -96
  64. package/dist/uitvoerend-paars/tokens.js +526 -1394
  65. package/dist/uitvoerend-violet/_variables.scss +27 -65
  66. package/dist/uitvoerend-violet/index.css +27 -65
  67. package/dist/uitvoerend-violet/index.d.ts +21 -59
  68. package/dist/uitvoerend-violet/index.js +27 -65
  69. package/dist/uitvoerend-violet/index.json +26 -64
  70. package/dist/uitvoerend-violet/index.tokens.json +51 -101
  71. package/dist/uitvoerend-violet/root.css +27 -65
  72. package/dist/uitvoerend-violet/tokens.d.ts +46 -96
  73. package/dist/uitvoerend-violet/tokens.js +526 -1394
  74. package/dist/uitvoerend-violet-oud/_variables.scss +27 -65
  75. package/dist/uitvoerend-violet-oud/index.css +27 -65
  76. package/dist/uitvoerend-violet-oud/index.d.ts +21 -59
  77. package/dist/uitvoerend-violet-oud/index.js +27 -65
  78. package/dist/uitvoerend-violet-oud/index.json +26 -64
  79. package/dist/uitvoerend-violet-oud/index.tokens.json +51 -101
  80. package/dist/uitvoerend-violet-oud/root.css +27 -65
  81. package/dist/uitvoerend-violet-oud/tokens.d.ts +46 -96
  82. package/dist/uitvoerend-violet-oud/tokens.js +526 -1394
  83. package/dist/wetgevend/_variables.scss +27 -65
  84. package/dist/wetgevend/index.css +27 -65
  85. package/dist/wetgevend/index.d.ts +21 -59
  86. package/dist/wetgevend/index.js +27 -65
  87. package/dist/wetgevend/index.json +26 -64
  88. package/dist/wetgevend/index.tokens.json +51 -101
  89. package/dist/wetgevend/root.css +27 -65
  90. package/dist/wetgevend/tokens.d.ts +46 -96
  91. package/dist/wetgevend/tokens.js +526 -1394
  92. package/figma/figma.tokens.json +100 -390
  93. package/package.json +1 -1
  94. package/src/generated/base.tokens.json +39 -219
  95. package/src/generated/koop/tokens.json +190 -346
  96. package/src/generated/themes.json +1062 -2530
  97. package/src/generated/uitvoerend-groen/tokens.json +109 -273
  98. package/src/generated/uitvoerend-hemelblauw/tokens.json +109 -273
  99. package/src/generated/uitvoerend-mintgroen/tokens.json +109 -273
  100. package/src/generated/uitvoerend-oranje/tokens.json +109 -273
  101. package/src/generated/uitvoerend-paars/tokens.json +109 -273
  102. package/src/generated/uitvoerend-violet/tokens.json +109 -273
  103. package/src/generated/uitvoerend-violet-oud/tokens.json +109 -273
  104. package/src/generated/wetgevend/tokens.json +109 -273
@@ -544,11 +544,11 @@
544
544
  },
545
545
  "border-inline-start-width": {
546
546
  "type": "dimension",
547
- "value": "0px"
547
+ "value": "2px"
548
548
  },
549
549
  "padding-inline-start": {
550
550
  "type": "dimension",
551
- "value": "0rem"
551
+ "value": "1rem"
552
552
  }
553
553
  }
554
554
  },
@@ -980,17 +980,53 @@
980
980
  }
981
981
  }
982
982
  },
983
- "form-field-error-message": {
984
- "icon": {
985
- "margin-inline-end": {
986
- "type": "dimension",
987
- "value": "0.5rem"
983
+ "form-label": {
984
+ "color": {
985
+ "type": "color",
986
+ "value": "#0F172A"
987
+ },
988
+ "font-size": {
989
+ "type": "fontSizes",
990
+ "value": "1.25rem"
991
+ },
992
+ "font-weight": {
993
+ "type": "fontWeights",
994
+ "value": 700
995
+ },
996
+ "checkbox": {
997
+ "color": {
998
+ "type": "color",
999
+ "value": "#0F172A"
988
1000
  },
989
- "size": {
990
- "type": "dimension",
991
- "value": "24px"
1001
+ "font-weight": {
1002
+ "type": "fontWeights",
1003
+ "value": 400
1004
+ }
1005
+ },
1006
+ "radio": {
1007
+ "color": {
1008
+ "type": "color",
1009
+ "value": "#0F172A"
1010
+ },
1011
+ "font-weight": {
1012
+ "type": "fontWeights",
1013
+ "value": 400
1014
+ }
1015
+ },
1016
+ "checked": {
1017
+ "font-weight": {
1018
+ "type": "fontWeights",
1019
+ "value": 400
992
1020
  }
993
1021
  },
1022
+ "disabled": {
1023
+ "color": {
1024
+ "type": "color",
1025
+ "value": "#94A3B8"
1026
+ }
1027
+ }
1028
+ },
1029
+ "form-field-error-message": {
994
1030
  "background-color": {
995
1031
  "type": "color",
996
1032
  "value": "transparent"
@@ -1043,10 +1079,6 @@
1043
1079
  }
1044
1080
  },
1045
1081
  "form-field-description": {
1046
- "padding-block-end": {
1047
- "value": "0.5rem",
1048
- "type": "dimension"
1049
- },
1050
1082
  "color": {
1051
1083
  "type": "color",
1052
1084
  "value": "#334155"
@@ -1074,52 +1106,6 @@
1074
1106
  "description": "[code-only]"
1075
1107
  }
1076
1108
  },
1077
- "form-label": {
1078
- "color": {
1079
- "type": "color",
1080
- "value": "#0F172A"
1081
- },
1082
- "font-size": {
1083
- "type": "fontSizes",
1084
- "value": "1.25rem"
1085
- },
1086
- "font-weight": {
1087
- "type": "fontWeights",
1088
- "value": 700
1089
- },
1090
- "checkbox": {
1091
- "color": {
1092
- "type": "color",
1093
- "value": "#0F172A"
1094
- },
1095
- "font-weight": {
1096
- "type": "fontWeights",
1097
- "value": 400
1098
- }
1099
- },
1100
- "radio": {
1101
- "color": {
1102
- "type": "color",
1103
- "value": "#0F172A"
1104
- },
1105
- "font-weight": {
1106
- "type": "fontWeights",
1107
- "value": 400
1108
- }
1109
- },
1110
- "checked": {
1111
- "font-weight": {
1112
- "type": "fontWeights",
1113
- "value": 400
1114
- }
1115
- },
1116
- "disabled": {
1117
- "color": {
1118
- "type": "color",
1119
- "value": "#94A3B8"
1120
- }
1121
- }
1122
- },
1123
1109
  "figure": {
1124
1110
  "caption": {
1125
1111
  "border-color": {
@@ -1225,178 +1211,6 @@
1225
1211
  }
1226
1212
  },
1227
1213
  "blockquote": {
1228
- "border-block-end-width": {
1229
- "type": "dimension",
1230
- "value": 0
1231
- },
1232
- "border-block-start-width": {
1233
- "type": "dimension",
1234
- "value": 0
1235
- },
1236
- "border-end-end-radius": {
1237
- "type": "dimension",
1238
- "value": 0
1239
- },
1240
- "border-end-start-radius": {
1241
- "type": "dimension",
1242
- "value": 0
1243
- },
1244
- "border-inline-end-width": {
1245
- "type": "dimension",
1246
- "value": 0
1247
- },
1248
- "border-start-end-radius": {
1249
- "type": "dimension",
1250
- "value": 0
1251
- },
1252
- "border-start-start-radius": {
1253
- "type": "dimension",
1254
- "value": 0
1255
- },
1256
- "margin-block-end": {
1257
- "type": "dimension",
1258
- "value": 0
1259
- },
1260
- "margin-block-start": {
1261
- "type": "dimension",
1262
- "value": 0
1263
- },
1264
- "margin-inline-end": {
1265
- "type": "dimension",
1266
- "value": 0
1267
- },
1268
- "margin-inline-start": {
1269
- "type": "dimension",
1270
- "value": 0
1271
- },
1272
- "blue-corner-border-variation": {
1273
- "border-block-end-width": {
1274
- "type": "dimension",
1275
- "value": "2px"
1276
- },
1277
- "border-color": {
1278
- "type": "color",
1279
- "value": "#007bc7"
1280
- },
1281
- "border-end-end-radius": {
1282
- "type": "dimension",
1283
- "value": "3rem"
1284
- },
1285
- "border-inline-end-width": {
1286
- "type": "dimension",
1287
- "value": "2px"
1288
- }
1289
- },
1290
- "caption": {
1291
- "color": {
1292
- "type": "color",
1293
- "value": "#154273"
1294
- },
1295
- "font-family": {
1296
- "type": "fontFamilies",
1297
- "value": "'Fira Sans', Arial, Verdana, sans-serif"
1298
- },
1299
- "font-size": {
1300
- "type": "fontSizes",
1301
- "value": "1.25rem"
1302
- },
1303
- "font-weight": {
1304
- "type": "fontWeights",
1305
- "value": 400
1306
- },
1307
- "line-height": {
1308
- "type": "lineHeights",
1309
- "value": "150%"
1310
- },
1311
- "padding-block-start": {
1312
- "type": "dimension",
1313
- "value": "0.75rem"
1314
- }
1315
- },
1316
- "content": {
1317
- "font-family": {
1318
- "type": "fontFamilies",
1319
- "value": "'Fira Sans', Arial, Verdana, sans-serif"
1320
- },
1321
- "font-weight": {
1322
- "type": "fontWeights",
1323
- "value": 400
1324
- },
1325
- "line-height": {
1326
- "type": "lineHeights",
1327
- "value": "150%"
1328
- },
1329
- "color": {
1330
- "value": "#154273",
1331
- "type": "color"
1332
- },
1333
- "font-size": {
1334
- "value": "1.25rem",
1335
- "type": "fontSizes"
1336
- }
1337
- },
1338
- "pink-background-variation": {
1339
- "background-color": {
1340
- "type": "color",
1341
- "value": "#F6BDE1"
1342
- },
1343
- "border-end-start-radius": {
1344
- "type": "dimension",
1345
- "value": "3rem"
1346
- },
1347
- "padding": {
1348
- "type": "dimension",
1349
- "value": "2.5rem"
1350
- }
1351
- },
1352
- "pink-corner-border-variation": {
1353
- "border-block-start-width": {
1354
- "type": "dimension",
1355
- "value": "0.25rem"
1356
- },
1357
- "border-color": {
1358
- "type": "color",
1359
- "value": "#F6BDE1"
1360
- },
1361
- "border-inline-start-width": {
1362
- "type": "dimension",
1363
- "value": "0.25rem"
1364
- },
1365
- "border-start-start-radius": {
1366
- "type": "dimension",
1367
- "value": "3rem"
1368
- },
1369
- "padding": {
1370
- "type": "dimension",
1371
- "value": "2.5rem"
1372
- }
1373
- },
1374
- "pink-left-border-variation": {
1375
- "border-color": {
1376
- "type": "color",
1377
- "value": "#F6BDE1"
1378
- },
1379
- "border-inline-start-width": {
1380
- "type": "dimension",
1381
- "value": "0.75rem"
1382
- },
1383
- "padding-block-end": {
1384
- "type": "dimension",
1385
- "value": "1.5rem"
1386
- },
1387
- "padding-block-start": {
1388
- "type": "dimension",
1389
- "value": "1.5rem"
1390
- },
1391
- "padding-inline-end": {
1392
- "type": "dimension",
1393
- "value": "2.5rem"
1394
- },
1395
- "padding-inline-start": {
1396
- "type": "dimension",
1397
- "value": "2.5rem"
1398
- }
1399
- },
1400
1214
  "background-color": {
1401
1215
  "value": "transparent",
1402
1216
  "type": "color"
@@ -1458,6 +1272,16 @@
1458
1272
  "value": "1.25rem",
1459
1273
  "type": "fontSizes"
1460
1274
  }
1275
+ },
1276
+ "content": {
1277
+ "color": {
1278
+ "value": "#154273",
1279
+ "type": "color"
1280
+ },
1281
+ "font-size": {
1282
+ "value": "1.25rem",
1283
+ "type": "fontSizes"
1284
+ }
1461
1285
  }
1462
1286
  },
1463
1287
  "alert": {
@@ -3078,11 +2902,11 @@
3078
2902
  }
3079
2903
  },
3080
2904
  "padding-inline-start": {
3081
- "value": "0rem",
2905
+ "value": "1rem",
3082
2906
  "type": "spacing"
3083
2907
  },
3084
2908
  "border-inline-start-width": {
3085
- "value": "0px",
2909
+ "value": "2px",
3086
2910
  "type": "borderWidth"
3087
2911
  }
3088
2912
  }
@@ -3950,10 +3774,54 @@
3950
3774
  }
3951
3775
  },
3952
3776
  "rhc": {
3777
+ "blockquote": {
3778
+ "margin-block-end": {
3779
+ "value": "0rem",
3780
+ "type": "dimension"
3781
+ },
3782
+ "margin-block-start": {
3783
+ "value": "0rem",
3784
+ "type": "dimension"
3785
+ },
3786
+ "margin-inline-end": {
3787
+ "value": "0rem",
3788
+ "type": "dimension"
3789
+ },
3790
+ "margin-inline-start": {
3791
+ "value": "0rem",
3792
+ "type": "dimension"
3793
+ }
3794
+ },
3795
+ "data-badge-button": {
3796
+ "column-gap": {
3797
+ "value": "0.125rem",
3798
+ "type": "dimension"
3799
+ },
3800
+ "hover": {
3801
+ "background-color": {
3802
+ "value": "#007bc7",
3803
+ "type": "color"
3804
+ },
3805
+ "color": {
3806
+ "value": "#fff",
3807
+ "type": "color"
3808
+ }
3809
+ }
3810
+ },
3811
+ "breadcrumb-nav": {
3812
+ "link": {
3813
+ "current": {
3814
+ "color": {
3815
+ "type": "color",
3816
+ "value": "#334155"
3817
+ }
3818
+ }
3819
+ }
3820
+ },
3953
3821
  "keep": {
3954
3822
  "_comment": {
3955
- "type": "other",
3956
- "value": "⚠️ Deze tokens zijn legacy en worden vervangen door de tokenset components/blockquote."
3823
+ "value": "⚠️ Deze tokens zijn legacy en worden vervangen door de tokenset common/rounded-corner.",
3824
+ "type": "other"
3957
3825
  },
3958
3826
  "top-left": {
3959
3827
  "borderRadiusTopLeft": {
@@ -4028,32 +3896,6 @@
4028
3896
  }
4029
3897
  }
4030
3898
  },
4031
- "data-badge-button": {
4032
- "column-gap": {
4033
- "value": "0.125rem",
4034
- "type": "dimension"
4035
- },
4036
- "hover": {
4037
- "background-color": {
4038
- "value": "#007bc7",
4039
- "type": "color"
4040
- },
4041
- "color": {
4042
- "value": "#fff",
4043
- "type": "color"
4044
- }
4045
- }
4046
- },
4047
- "breadcrumb-nav": {
4048
- "link": {
4049
- "current": {
4050
- "color": {
4051
- "type": "color",
4052
- "value": "#334155"
4053
- }
4054
- }
4055
- }
4056
- },
4057
3899
  "rounded-corner": {
4058
3900
  "xs": {
4059
3901
  "border-radius": {
@@ -4304,10 +4146,6 @@
4304
4146
  "type": "color"
4305
4147
  }
4306
4148
  },
4307
- "backdrop": {
4308
- "value": "#0000004d",
4309
- "type": "color"
4310
- },
4311
4149
  "border": {
4312
4150
  "default": {
4313
4151
  "parent": "mode/light",
@@ -4983,12 +4821,6 @@
4983
4821
  "value": "#000",
4984
4822
  "type": "color"
4985
4823
  },
4986
- "transparent": {
4987
- "30": {
4988
- "value": "#0000004d",
4989
- "type": "color"
4990
- }
4991
- },
4992
4824
  "none": {
4993
4825
  "value": "transparent",
4994
4826
  "type": "color"
@@ -5462,6 +5294,10 @@
5462
5294
  "column-gap": {
5463
5295
  "value": "0.5rem",
5464
5296
  "type": "spacing"
5297
+ },
5298
+ "font-size": {
5299
+ "value": "1.25rem",
5300
+ "type": "fontSizes"
5465
5301
  }
5466
5302
  },
5467
5303
  "heading": {
@@ -6407,7 +6243,7 @@
6407
6243
  "type": "dimension"
6408
6244
  },
6409
6245
  "3-lint": {
6410
- "value": "1440px",
6246
+ "value": "144px",
6411
6247
  "type": "dimension"
6412
6248
  }
6413
6249
  },