@rijkshuisstijl-community/design-tokens 1.0.0 → 1.1.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 (54) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/_variables.scss +114 -4
  3. package/dist/index.css +114 -4
  4. package/dist/index.d.ts +111 -1
  5. package/dist/index.js +114 -4
  6. package/dist/index.json +113 -3
  7. package/dist/index.tokens.json +149 -3
  8. package/dist/root.css +114 -4
  9. package/dist/tokens.d.ts +147 -1
  10. package/dist/tokens.js +6284 -3880
  11. package/dist/uitvoerend-mintgroen-focus/_variables.scss +724 -610
  12. package/dist/uitvoerend-mintgroen-focus/index.css +724 -610
  13. package/dist/uitvoerend-mintgroen-focus/index.d.ts +612 -498
  14. package/dist/uitvoerend-mintgroen-focus/index.js +613 -499
  15. package/dist/uitvoerend-mintgroen-focus/index.json +612 -498
  16. package/dist/uitvoerend-mintgroen-focus/index.tokens.json +1654 -1506
  17. package/dist/uitvoerend-mintgroen-focus/root.css +724 -610
  18. package/dist/uitvoerend-mintgroen-focus/tokens.d.ts +1573 -1425
  19. package/dist/uitvoerend-mintgroen-focus/tokens.js +22376 -19892
  20. package/dist/uitvoerend-violet/_variables.scss +723 -608
  21. package/dist/uitvoerend-violet/index.css +723 -608
  22. package/dist/uitvoerend-violet/index.d.ts +613 -498
  23. package/dist/uitvoerend-violet/index.js +614 -499
  24. package/dist/uitvoerend-violet/index.json +613 -498
  25. package/dist/uitvoerend-violet/index.tokens.json +1652 -1499
  26. package/dist/uitvoerend-violet/root.css +723 -608
  27. package/dist/uitvoerend-violet/tokens.d.ts +1545 -1392
  28. package/dist/uitvoerend-violet/tokens.js +22572 -20061
  29. package/dist/uitvoerend-violet-oud/_variables.scss +723 -608
  30. package/dist/uitvoerend-violet-oud/index.css +723 -608
  31. package/dist/uitvoerend-violet-oud/index.d.ts +613 -498
  32. package/dist/uitvoerend-violet-oud/index.js +614 -499
  33. package/dist/uitvoerend-violet-oud/index.json +613 -498
  34. package/dist/uitvoerend-violet-oud/index.tokens.json +1645 -1492
  35. package/dist/uitvoerend-violet-oud/root.css +723 -608
  36. package/dist/uitvoerend-violet-oud/tokens.d.ts +1556 -1403
  37. package/dist/uitvoerend-violet-oud/tokens.js +23087 -20576
  38. package/dist/wetgevend/_variables.scss +723 -608
  39. package/dist/wetgevend/index.css +723 -608
  40. package/dist/wetgevend/index.d.ts +613 -498
  41. package/dist/wetgevend/index.js +614 -499
  42. package/dist/wetgevend/index.json +613 -498
  43. package/dist/wetgevend/index.tokens.json +1660 -1507
  44. package/dist/wetgevend/root.css +723 -608
  45. package/dist/wetgevend/tokens.d.ts +1572 -1419
  46. package/dist/wetgevend/tokens.js +23030 -20519
  47. package/figma/figma.tokens.json +571 -46
  48. package/package.json +1 -1
  49. package/src/generated/base.tokens.json +488 -12
  50. package/src/generated/themes.json +17956 -15972
  51. package/src/generated/uitvoerend-mintgroen-focus/tokens.json +4568 -4078
  52. package/src/generated/uitvoerend-violet/tokens.json +4468 -3970
  53. package/src/generated/uitvoerend-violet-oud/tokens.json +4510 -4012
  54. package/src/generated/wetgevend/tokens.json +4478 -3980
package/dist/root.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 25 Feb 2025 08:18:00 GMT
3
+ * Generated on Wed, 19 Mar 2025 14:52:03 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -52,6 +52,28 @@
52
52
  --nl-heading-level-1-font-weight: 700;
53
53
  --nl-heading-level-1-font-family: Fira Sans, Arial, Verdana, sans-serif;
54
54
  --nl-heading-level-1-color: #154273;
55
+ --nl-link-line-height: 150%;
56
+ --nl-link-font-size: 1.25rem;
57
+ --nl-link-font-weight: 400;
58
+ --nl-link-font-family: Fira Sans, Arial, Verdana, sans-serif;
59
+ --nl-link-text-underline-offset: 0.125rem;
60
+ --nl-link-text-decoration-thickness: auto;
61
+ --nl-link-column-gap: 0.25rem;
62
+ --nl-link-icon-size: 24px;
63
+ --nl-link-icon-inset-block-start: 0.25rem;
64
+ --nl-link-text-decoration: underline;
65
+ --nl-link-visited-color: #42145f;
66
+ --nl-link-hover-text-decoration-thickness: auto;
67
+ --nl-link-hover-text-decoration: None;
68
+ --nl-link-hover-color: #01496c;
69
+ --nl-link-focus-text-decoration-thickness: auto;
70
+ --nl-link-focus-text-decoration: None;
71
+ --nl-link-focus-color: #01689b;
72
+ --nl-link-focus-background-color: transparent;
73
+ --nl-link-active-text-decoration: None;
74
+ --nl-link-active-color: #42145f;
75
+ --nl-link-text-decoration-color: #01689b;
76
+ --nl-link-color: #01689b;
55
77
  --nl-paragraph-lead-line-height: 150%;
56
78
  --nl-paragraph-lead-font-weight: 400;
57
79
  --nl-paragraph-lead-font-size: 1.5rem;
@@ -91,7 +113,7 @@
91
113
  --nl-skip-link-font-size: 1.25rem;
92
114
  --nl-skip-link-font-family: Fira Sans, Arial, Verdana, sans-serif;
93
115
  --nl-skip-link-font-weight: 700;
94
- --utrecht-focus-inverse-outline-color: transparant;
116
+ --utrecht-focus-inverse-outline-color: #fff;
95
117
  --utrecht-focus-outline-width: 2px;
96
118
  --utrecht-focus-outline-style: solid;
97
119
  --utrecht-focus-outline-offset: 0.125rem;
@@ -390,6 +412,19 @@
390
412
  --utrecht-checkbox-icon-size: 24px;
391
413
  --utrecht-checkbox-size: 24px;
392
414
  --utrecht-checkbox-border-radius: 2.5px;
415
+ --utrecht-number-badge-padding-block: 0.5rem;
416
+ --utrecht-number-badge-padding-inline: 0.5rem;
417
+ --utrecht-number-badge-color: #fff;
418
+ --utrecht-number-badge-border-color: transparent;
419
+ --utrecht-number-badge-background-color: #154273;
420
+ --utrecht-number-badge-font-family: Fira Sans, Arial, Verdana, sans-serif;
421
+ --utrecht-number-badge-border-radius: 999px;
422
+ --utrecht-number-badge-border-width: 0px;
423
+ --utrecht-number-badge-font-weight: 700;
424
+ --utrecht-number-badge-min-inline-size: 24px;
425
+ --utrecht-number-badge-min-block-size: 24px;
426
+ --utrecht-number-badge-line-height: 150%;
427
+ --utrecht-number-badge-font-size: 1.25rem;
393
428
  --utrecht-form-fieldset-invalid-border-inline-start-width: 0px;
394
429
  --utrecht-form-fieldset-invalid-padding-inline-start: 0;
395
430
  --utrecht-form-fieldset-invalid-border-inline-start-color: #d52b1e;
@@ -449,6 +484,41 @@
449
484
  --utrecht-form-label-font-weight: 700;
450
485
  --utrecht-form-label-font-size: 1.25rem;
451
486
  --utrecht-form-label-color: #0F172A;
487
+ --utrecht-heading-5-margin-block-start: 0;
488
+ --utrecht-heading-5-margin-block-end: 0;
489
+ --utrecht-heading-5-font-size: 1.25rem;
490
+ --utrecht-heading-5-line-height: 125%;
491
+ --utrecht-heading-5-font-weight: 700;
492
+ --utrecht-heading-5-font-family: Fira Sans, Arial, Verdana, sans-serif;
493
+ --utrecht-heading-5-color: #154273;
494
+ --utrecht-heading-4-margin-block-start: 0;
495
+ --utrecht-heading-4-margin-block-end: 0;
496
+ --utrecht-heading-4-font-size: 1.5rem;
497
+ --utrecht-heading-4-line-height: 125%;
498
+ --utrecht-heading-4-font-weight: 700;
499
+ --utrecht-heading-4-font-family: Fira Sans, Arial, Verdana, sans-serif;
500
+ --utrecht-heading-4-color: #154273;
501
+ --utrecht-heading-3-margin-block-start: 0;
502
+ --utrecht-heading-3-margin-block-end: 0;
503
+ --utrecht-heading-3-font-size: 1.875rem;
504
+ --utrecht-heading-3-line-height: 125%;
505
+ --utrecht-heading-3-font-weight: 700;
506
+ --utrecht-heading-3-font-family: Fira Sans, Arial, Verdana, sans-serif;
507
+ --utrecht-heading-3-color: #154273;
508
+ --utrecht-heading-2-margin-block-start: 0;
509
+ --utrecht-heading-2-margin-block-end: 0;
510
+ --utrecht-heading-2-font-size: 2.5rem;
511
+ --utrecht-heading-2-line-height: 125%;
512
+ --utrecht-heading-2-font-weight: 700;
513
+ --utrecht-heading-2-font-family: Fira Sans, Arial, Verdana, sans-serif;
514
+ --utrecht-heading-2-color: #154273;
515
+ --utrecht-heading-1-margin-block-start: 0;
516
+ --utrecht-heading-1-margin-block-end: 0;
517
+ --utrecht-heading-1-font-size: 3.125rem;
518
+ --utrecht-heading-1-line-height: 125%;
519
+ --utrecht-heading-1-font-weight: 700;
520
+ --utrecht-heading-1-font-family: Fira Sans, Arial, Verdana, sans-serif;
521
+ --utrecht-heading-1-color: #154273;
452
522
  --utrecht-link-line-height: 150%;
453
523
  --utrecht-link-font-size: 1.25rem;
454
524
  --utrecht-link-font-weight: 400;
@@ -490,6 +560,17 @@
490
560
  --utrecht-ordered-list-margin-block-start: 0.25rem;
491
561
  --utrecht-ordered-list-margin-block-end: 0.25rem;
492
562
  --utrecht-ordered-list-padding-inline-start: 1.5rem;
563
+ --utrecht-paragraph-lead-line-height: 150%;
564
+ --utrecht-paragraph-lead-font-weight: 400;
565
+ --utrecht-paragraph-lead-font-size: 1.5rem;
566
+ --utrecht-paragraph-lead-color: #0F172A;
567
+ --utrecht-paragraph-margin-block-start: 0;
568
+ --utrecht-paragraph-margin-block-end: 0;
569
+ --utrecht-paragraph-line-height: 150%;
570
+ --utrecht-paragraph-font-weight: 400;
571
+ --utrecht-paragraph-font-size: 1.25rem;
572
+ --utrecht-paragraph-font-family: Fira Sans, Arial, Verdana, sans-serif;
573
+ --utrecht-paragraph-color: #0F172A;
493
574
  --utrecht-pre-heading-font-size: 1rem;
494
575
  --utrecht-pre-heading-line-height: 125%;
495
576
  --utrecht-pre-heading-font-weight: 700;
@@ -571,6 +652,34 @@
571
652
  --utrecht-separator-margin-block-end: 0.75rem;
572
653
  --utrecht-separator-block-size: 2px;
573
654
  --utrecht-separator-color: #CBD5E1;
655
+ --utrecht-skip-link-text-underline-offset: 0.125rem;
656
+ --utrecht-skip-link-text-decoration: underline;
657
+ --utrecht-skip-link-box-block-end-shadow-color: #0000001a;
658
+ --utrecht-skip-link-box-block-end-shadow-spread-radius: 0;
659
+ --utrecht-skip-link-box-block-end-shadow-blur-radius: 48px;
660
+ --utrecht-skip-link-box-block-end-shadow-offset-y: 16px;
661
+ --utrecht-skip-link-box-block-end-shadow-offset-x: 0;
662
+ --utrecht-skip-link-border-width: 2px;
663
+ --utrecht-skip-link-color: #fff;
664
+ --utrecht-skip-link-border-color: transparent;
665
+ --utrecht-skip-link-background-color: #154273;
666
+ --utrecht-skip-link-focus-visible-outline-color: #000;
667
+ --utrecht-skip-link-focus-text-decoration: None;
668
+ --utrecht-skip-link-focus-color: #0F172A;
669
+ --utrecht-skip-link-focus-border-width: 2px;
670
+ --utrecht-skip-link-focus-border-style: solid;
671
+ --utrecht-skip-link-focus-border-color: #154273;
672
+ --utrecht-skip-link-focus-background-color: #fff;
673
+ --utrecht-skip-link-padding-inline-start: 1rem;
674
+ --utrecht-skip-link-padding-inline-end: 1rem;
675
+ --utrecht-skip-link-padding-block-start: 0.75rem;
676
+ --utrecht-skip-link-padding-block-end: 0.75rem;
677
+ --utrecht-skip-link-min-inline-size: 48px;
678
+ --utrecht-skip-link-min-block-size: 48px;
679
+ --utrecht-skip-link-line-height: 150%;
680
+ --utrecht-skip-link-font-size: 1.25rem;
681
+ --utrecht-skip-link-font-family: Fira Sans, Arial, Verdana, sans-serif;
682
+ --utrecht-skip-link-font-weight: 700;
574
683
  --utrecht-table-font-size: 1.25rem;
575
684
  --utrecht-table-container-box-inline-start-shadow-color: #0000001a;
576
685
  --utrecht-table-container-box-inline-start-shadow-spread: 0;
@@ -956,6 +1065,7 @@
956
1065
  --rhc-card-as-link-heading-font-weight: 700;
957
1066
  --rhc-card-as-link-heading-font-size: 1.5rem;
958
1067
  --rhc-card-as-link-heading-padding-block-start: 0.5rem;
1068
+ --rhc-card-as-link-heading-color: #154273;
959
1069
  --rhc-card-as-link-full-bleed-opacity: 0.5;
960
1070
  --rhc-card-as-link-full-bleed-color: #fff;
961
1071
  --rhc-card-as-link-full-bleed-border-color: transparent;
@@ -971,14 +1081,14 @@
971
1081
  --rhc-card-as-link-padding-inline-end: 1rem;
972
1082
  --rhc-card-as-link-padding-block-start: 1rem;
973
1083
  --rhc-card-as-link-padding-block-end: 1rem;
974
- --rhc-card-as-link-metadata-color: #0F172A;
1084
+ --rhc-card-as-link-metadata-color: #334155;
975
1085
  --rhc-card-as-link-link-focus-text-decoration: none;
976
1086
  --rhc-card-as-link-link-hover-text-decoration: none;
977
1087
  --rhc-card-as-link-link-active-text-decoration: none;
978
1088
  --rhc-card-as-link-link-text-decoration: underline;
979
1089
  --rhc-card-as-link-link-color: #01689b;
980
1090
  --rhc-card-as-link-icon-size: 24px;
981
- --rhc-card-as-link-icon-color: #0F172A;
1091
+ --rhc-card-as-link-icon-color: #154273;
982
1092
  --rhc-card-as-link-inline-size: 328px;
983
1093
  --rhc-card-as-link-column-gap: 1rem;
984
1094
  --rhc-card-as-link-color: #0F172A;
package/dist/tokens.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 25 Feb 2025 08:18:00 GMT
3
+ * Generated on Wed, 19 Mar 2025 14:52:03 GMT
4
4
  */
5
5
 
6
6
  export default tokens;
@@ -441,6 +441,7 @@ declare const tokens: {
441
441
  "opacity": DesignToken
442
442
  },
443
443
  "heading": {
444
+ "color": DesignToken,
444
445
  "padding-block-start": DesignToken,
445
446
  "font-size": DesignToken,
446
447
  "font-weight": DesignToken
@@ -1010,6 +1011,42 @@ declare const tokens: {
1010
1011
  },
1011
1012
  "font-size": DesignToken
1012
1013
  },
1014
+ "skip-link": {
1015
+ "font-weight": DesignToken,
1016
+ "font-family": DesignToken,
1017
+ "font-size": DesignToken,
1018
+ "line-height": DesignToken,
1019
+ "min-block-size": DesignToken,
1020
+ "min-inline-size": DesignToken,
1021
+ "padding-block-end": DesignToken,
1022
+ "padding-block-start": DesignToken,
1023
+ "padding-inline-end": DesignToken,
1024
+ "padding-inline-start": DesignToken,
1025
+ "focus": {
1026
+ "background-color": DesignToken,
1027
+ "border-color": DesignToken,
1028
+ "border-style": DesignToken,
1029
+ "border-width": DesignToken,
1030
+ "color": DesignToken,
1031
+ "text-decoration": DesignToken
1032
+ },
1033
+ "focus-visible": {
1034
+ "outline-color": DesignToken
1035
+ },
1036
+ "background-color": DesignToken,
1037
+ "border-color": DesignToken,
1038
+ "color": DesignToken,
1039
+ "border-width": DesignToken,
1040
+ "box-block-end-shadow": {
1041
+ "offset-x": DesignToken,
1042
+ "offset-y": DesignToken,
1043
+ "blur-radius": DesignToken,
1044
+ "spread-radius": DesignToken,
1045
+ "color": DesignToken
1046
+ },
1047
+ "text-decoration": DesignToken,
1048
+ "text-underline-offset": DesignToken
1049
+ },
1013
1050
  "separator": {
1014
1051
  "color": DesignToken,
1015
1052
  "block-size": DesignToken,
@@ -1131,6 +1168,21 @@ declare const tokens: {
1131
1168
  "line-height": DesignToken,
1132
1169
  "font-size": DesignToken
1133
1170
  },
1171
+ "paragraph": {
1172
+ "color": DesignToken,
1173
+ "font-family": DesignToken,
1174
+ "font-size": DesignToken,
1175
+ "font-weight": DesignToken,
1176
+ "line-height": DesignToken,
1177
+ "margin-block-end": DesignToken,
1178
+ "margin-block-start": DesignToken,
1179
+ "lead": {
1180
+ "color": DesignToken,
1181
+ "font-size": DesignToken,
1182
+ "font-weight": DesignToken,
1183
+ "line-height": DesignToken
1184
+ }
1185
+ },
1134
1186
  "ordered-list": {
1135
1187
  "padding-inline-start": DesignToken,
1136
1188
  "margin-block-end": DesignToken,
@@ -1194,6 +1246,51 @@ declare const tokens: {
1194
1246
  "font-size": DesignToken,
1195
1247
  "line-height": DesignToken
1196
1248
  },
1249
+ "heading-1": {
1250
+ "color": DesignToken,
1251
+ "font-family": DesignToken,
1252
+ "font-weight": DesignToken,
1253
+ "line-height": DesignToken,
1254
+ "font-size": DesignToken,
1255
+ "margin-block-end": DesignToken,
1256
+ "margin-block-start": DesignToken
1257
+ },
1258
+ "heading-2": {
1259
+ "color": DesignToken,
1260
+ "font-family": DesignToken,
1261
+ "font-weight": DesignToken,
1262
+ "line-height": DesignToken,
1263
+ "font-size": DesignToken,
1264
+ "margin-block-end": DesignToken,
1265
+ "margin-block-start": DesignToken
1266
+ },
1267
+ "heading-3": {
1268
+ "color": DesignToken,
1269
+ "font-family": DesignToken,
1270
+ "font-weight": DesignToken,
1271
+ "line-height": DesignToken,
1272
+ "font-size": DesignToken,
1273
+ "margin-block-end": DesignToken,
1274
+ "margin-block-start": DesignToken
1275
+ },
1276
+ "heading-4": {
1277
+ "color": DesignToken,
1278
+ "font-family": DesignToken,
1279
+ "font-weight": DesignToken,
1280
+ "line-height": DesignToken,
1281
+ "font-size": DesignToken,
1282
+ "margin-block-end": DesignToken,
1283
+ "margin-block-start": DesignToken
1284
+ },
1285
+ "heading-5": {
1286
+ "color": DesignToken,
1287
+ "font-family": DesignToken,
1288
+ "font-weight": DesignToken,
1289
+ "line-height": DesignToken,
1290
+ "font-size": DesignToken,
1291
+ "margin-block-end": DesignToken,
1292
+ "margin-block-start": DesignToken
1293
+ },
1197
1294
  "form-label": {
1198
1295
  "color": DesignToken,
1199
1296
  "font-size": DesignToken,
@@ -1291,6 +1388,21 @@ declare const tokens: {
1291
1388
  "border-inline-start-width": DesignToken
1292
1389
  }
1293
1390
  },
1391
+ "number-badge": {
1392
+ "font-size": DesignToken,
1393
+ "line-height": DesignToken,
1394
+ "min-block-size": DesignToken,
1395
+ "min-inline-size": DesignToken,
1396
+ "font-weight": DesignToken,
1397
+ "border-width": DesignToken,
1398
+ "border-radius": DesignToken,
1399
+ "font-family": DesignToken,
1400
+ "background-color": DesignToken,
1401
+ "border-color": DesignToken,
1402
+ "color": DesignToken,
1403
+ "padding-inline": DesignToken,
1404
+ "padding-block": DesignToken
1405
+ },
1294
1406
  "checkbox": {
1295
1407
  "border-radius": DesignToken,
1296
1408
  "size": DesignToken,
@@ -1811,6 +1923,40 @@ declare const tokens: {
1811
1923
  "line-height": DesignToken
1812
1924
  }
1813
1925
  },
1926
+ "link": {
1927
+ "color": DesignToken,
1928
+ "text-decoration-color": DesignToken,
1929
+ "active": {
1930
+ "color": DesignToken,
1931
+ "text-decoration": DesignToken
1932
+ },
1933
+ "focus": {
1934
+ "background-color": DesignToken,
1935
+ "color": DesignToken,
1936
+ "text-decoration": DesignToken,
1937
+ "text-decoration-thickness": DesignToken
1938
+ },
1939
+ "hover": {
1940
+ "color": DesignToken,
1941
+ "text-decoration": DesignToken,
1942
+ "text-decoration-thickness": DesignToken
1943
+ },
1944
+ "visited": {
1945
+ "color": DesignToken
1946
+ },
1947
+ "text-decoration": DesignToken,
1948
+ "icon": {
1949
+ "inset-block-start": DesignToken,
1950
+ "size": DesignToken
1951
+ },
1952
+ "column-gap": DesignToken,
1953
+ "text-decoration-thickness": DesignToken,
1954
+ "text-underline-offset": DesignToken,
1955
+ "font-family": DesignToken,
1956
+ "font-weight": DesignToken,
1957
+ "font-size": DesignToken,
1958
+ "line-height": DesignToken
1959
+ },
1814
1960
  "heading-level-1": {
1815
1961
  "color": DesignToken,
1816
1962
  "font-family": DesignToken,