@rijkshuisstijl-community/design-tokens 7.0.0 → 8.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 +72 -0
  2. package/dist/_variables.scss +10 -48
  3. package/dist/index.css +10 -48
  4. package/dist/index.d.ts +8 -46
  5. package/dist/index.js +10 -48
  6. package/dist/index.json +9 -47
  7. package/dist/index.tokens.json +14 -64
  8. package/dist/koop/_variables.scss +23 -61
  9. package/dist/koop/index.css +23 -61
  10. package/dist/koop/index.d.ts +21 -59
  11. package/dist/koop/index.js +23 -61
  12. package/dist/koop/index.json +22 -60
  13. package/dist/koop/index.tokens.json +47 -97
  14. package/dist/koop/root.css +23 -61
  15. package/dist/koop/tokens.d.ts +46 -96
  16. package/dist/koop/tokens.js +528 -1396
  17. package/dist/root.css +10 -48
  18. package/dist/tokens.d.ts +13 -63
  19. package/dist/tokens.js +200 -1068
  20. package/dist/uitvoerend-groen/_variables.scss +23 -61
  21. package/dist/uitvoerend-groen/index.css +23 -61
  22. package/dist/uitvoerend-groen/index.d.ts +21 -59
  23. package/dist/uitvoerend-groen/index.js +23 -61
  24. package/dist/uitvoerend-groen/index.json +22 -60
  25. package/dist/uitvoerend-groen/index.tokens.json +47 -97
  26. package/dist/uitvoerend-groen/root.css +23 -61
  27. package/dist/uitvoerend-groen/tokens.d.ts +46 -96
  28. package/dist/uitvoerend-groen/tokens.js +528 -1396
  29. package/dist/uitvoerend-hemelblauw/_variables.scss +23 -61
  30. package/dist/uitvoerend-hemelblauw/index.css +23 -61
  31. package/dist/uitvoerend-hemelblauw/index.d.ts +21 -59
  32. package/dist/uitvoerend-hemelblauw/index.js +23 -61
  33. package/dist/uitvoerend-hemelblauw/index.json +22 -60
  34. package/dist/uitvoerend-hemelblauw/index.tokens.json +47 -97
  35. package/dist/uitvoerend-hemelblauw/root.css +23 -61
  36. package/dist/uitvoerend-hemelblauw/tokens.d.ts +46 -96
  37. package/dist/uitvoerend-hemelblauw/tokens.js +528 -1396
  38. package/dist/uitvoerend-mintgroen/_variables.scss +23 -61
  39. package/dist/uitvoerend-mintgroen/index.css +23 -61
  40. package/dist/uitvoerend-mintgroen/index.d.ts +21 -59
  41. package/dist/uitvoerend-mintgroen/index.js +23 -61
  42. package/dist/uitvoerend-mintgroen/index.json +22 -60
  43. package/dist/uitvoerend-mintgroen/index.tokens.json +47 -97
  44. package/dist/uitvoerend-mintgroen/root.css +23 -61
  45. package/dist/uitvoerend-mintgroen/tokens.d.ts +46 -96
  46. package/dist/uitvoerend-mintgroen/tokens.js +528 -1396
  47. package/dist/uitvoerend-oranje/_variables.scss +23 -61
  48. package/dist/uitvoerend-oranje/index.css +23 -61
  49. package/dist/uitvoerend-oranje/index.d.ts +21 -59
  50. package/dist/uitvoerend-oranje/index.js +23 -61
  51. package/dist/uitvoerend-oranje/index.json +22 -60
  52. package/dist/uitvoerend-oranje/index.tokens.json +47 -97
  53. package/dist/uitvoerend-oranje/root.css +23 -61
  54. package/dist/uitvoerend-oranje/tokens.d.ts +46 -96
  55. package/dist/uitvoerend-oranje/tokens.js +528 -1396
  56. package/dist/uitvoerend-paars/_variables.scss +23 -61
  57. package/dist/uitvoerend-paars/index.css +23 -61
  58. package/dist/uitvoerend-paars/index.d.ts +21 -59
  59. package/dist/uitvoerend-paars/index.js +23 -61
  60. package/dist/uitvoerend-paars/index.json +22 -60
  61. package/dist/uitvoerend-paars/index.tokens.json +47 -97
  62. package/dist/uitvoerend-paars/root.css +23 -61
  63. package/dist/uitvoerend-paars/tokens.d.ts +46 -96
  64. package/dist/uitvoerend-paars/tokens.js +528 -1396
  65. package/dist/uitvoerend-violet/_variables.scss +23 -61
  66. package/dist/uitvoerend-violet/index.css +23 -61
  67. package/dist/uitvoerend-violet/index.d.ts +21 -59
  68. package/dist/uitvoerend-violet/index.js +23 -61
  69. package/dist/uitvoerend-violet/index.json +22 -60
  70. package/dist/uitvoerend-violet/index.tokens.json +47 -97
  71. package/dist/uitvoerend-violet/root.css +23 -61
  72. package/dist/uitvoerend-violet/tokens.d.ts +46 -96
  73. package/dist/uitvoerend-violet/tokens.js +528 -1396
  74. package/dist/uitvoerend-violet-oud/_variables.scss +23 -61
  75. package/dist/uitvoerend-violet-oud/index.css +23 -61
  76. package/dist/uitvoerend-violet-oud/index.d.ts +21 -59
  77. package/dist/uitvoerend-violet-oud/index.js +23 -61
  78. package/dist/uitvoerend-violet-oud/index.json +22 -60
  79. package/dist/uitvoerend-violet-oud/index.tokens.json +47 -97
  80. package/dist/uitvoerend-violet-oud/root.css +23 -61
  81. package/dist/uitvoerend-violet-oud/tokens.d.ts +46 -96
  82. package/dist/uitvoerend-violet-oud/tokens.js +528 -1396
  83. package/dist/wetgevend/_variables.scss +23 -61
  84. package/dist/wetgevend/index.css +23 -61
  85. package/dist/wetgevend/index.d.ts +21 -59
  86. package/dist/wetgevend/index.js +23 -61
  87. package/dist/wetgevend/index.json +22 -60
  88. package/dist/wetgevend/index.tokens.json +47 -97
  89. package/dist/wetgevend/root.css +23 -61
  90. package/dist/wetgevend/tokens.d.ts +46 -96
  91. package/dist/wetgevend/tokens.js +528 -1396
  92. package/figma/figma.tokens.json +51 -270
  93. package/package.json +1 -1
  94. package/src/generated/base.tokens.json +35 -199
  95. package/src/generated/koop/tokens.json +105 -269
  96. package/src/generated/themes.json +945 -2421
  97. package/src/generated/uitvoerend-groen/tokens.json +105 -269
  98. package/src/generated/uitvoerend-hemelblauw/tokens.json +105 -269
  99. package/src/generated/uitvoerend-mintgroen/tokens.json +105 -269
  100. package/src/generated/uitvoerend-oranje/tokens.json +105 -269
  101. package/src/generated/uitvoerend-paars/tokens.json +105 -269
  102. package/src/generated/uitvoerend-violet/tokens.json +105 -269
  103. package/src/generated/uitvoerend-violet-oud/tokens.json +105 -269
  104. package/src/generated/wetgevend/tokens.json +105 -269
@@ -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": "#154273"
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": {
@@ -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": "#154273",
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": "#154273",
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": {
@@ -4702,6 +4544,10 @@
4702
4544
  "column-gap": {
4703
4545
  "value": "0.5rem",
4704
4546
  "type": "spacing"
4547
+ },
4548
+ "font-size": {
4549
+ "value": "1.25rem",
4550
+ "type": "fontSizes"
4705
4551
  }
4706
4552
  },
4707
4553
  "heading": {
@@ -5484,10 +5330,6 @@
5484
5330
  "type": "color"
5485
5331
  }
5486
5332
  },
5487
- "backdrop": {
5488
- "value": "#0000004d",
5489
- "type": "color"
5490
- },
5491
5333
  "border": {
5492
5334
  "default": {
5493
5335
  "parent": "mode/light",
@@ -6202,12 +6044,6 @@
6202
6044
  "value": "#000",
6203
6045
  "type": "color"
6204
6046
  },
6205
- "transparent": {
6206
- "30": {
6207
- "value": "#0000004d",
6208
- "type": "color"
6209
- }
6210
- },
6211
6047
  "none": {
6212
6048
  "value": "transparent",
6213
6049
  "type": "color"
@@ -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
  },