@rijkshuisstijl-community/design-tokens 1.0.1 → 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 +10 -0
  2. package/dist/_variables.scss +113 -3
  3. package/dist/index.css +113 -3
  4. package/dist/index.d.ts +111 -1
  5. package/dist/index.js +113 -3
  6. package/dist/index.json +112 -2
  7. package/dist/index.tokens.json +148 -2
  8. package/dist/root.css +113 -3
  9. package/dist/tokens.d.ts +147 -1
  10. package/dist/tokens.js +6283 -3879
  11. package/dist/uitvoerend-mintgroen-focus/_variables.scss +112 -3
  12. package/dist/uitvoerend-mintgroen-focus/index.css +112 -3
  13. package/dist/uitvoerend-mintgroen-focus/index.d.ts +110 -1
  14. package/dist/uitvoerend-mintgroen-focus/index.js +112 -3
  15. package/dist/uitvoerend-mintgroen-focus/index.json +111 -2
  16. package/dist/uitvoerend-mintgroen-focus/index.tokens.json +145 -4
  17. package/dist/uitvoerend-mintgroen-focus/root.css +112 -3
  18. package/dist/uitvoerend-mintgroen-focus/tokens.d.ts +144 -3
  19. package/dist/uitvoerend-mintgroen-focus/tokens.js +6405 -4028
  20. package/dist/uitvoerend-violet/_variables.scss +113 -3
  21. package/dist/uitvoerend-violet/index.css +113 -3
  22. package/dist/uitvoerend-violet/index.d.ts +111 -1
  23. package/dist/uitvoerend-violet/index.js +113 -3
  24. package/dist/uitvoerend-violet/index.json +112 -2
  25. package/dist/uitvoerend-violet/index.tokens.json +148 -2
  26. package/dist/uitvoerend-violet/root.css +113 -3
  27. package/dist/uitvoerend-violet/tokens.d.ts +147 -1
  28. package/dist/uitvoerend-violet/tokens.js +5182 -2778
  29. package/dist/uitvoerend-violet-oud/_variables.scss +113 -3
  30. package/dist/uitvoerend-violet-oud/index.css +113 -3
  31. package/dist/uitvoerend-violet-oud/index.d.ts +111 -1
  32. package/dist/uitvoerend-violet-oud/index.js +113 -3
  33. package/dist/uitvoerend-violet-oud/index.json +112 -2
  34. package/dist/uitvoerend-violet-oud/index.tokens.json +148 -2
  35. package/dist/uitvoerend-violet-oud/root.css +113 -3
  36. package/dist/uitvoerend-violet-oud/tokens.d.ts +147 -1
  37. package/dist/uitvoerend-violet-oud/tokens.js +5182 -2778
  38. package/dist/wetgevend/_variables.scss +113 -3
  39. package/dist/wetgevend/index.css +113 -3
  40. package/dist/wetgevend/index.d.ts +111 -1
  41. package/dist/wetgevend/index.js +113 -3
  42. package/dist/wetgevend/index.json +112 -2
  43. package/dist/wetgevend/index.tokens.json +148 -2
  44. package/dist/wetgevend/root.css +113 -3
  45. package/dist/wetgevend/tokens.d.ts +147 -1
  46. package/dist/wetgevend/tokens.js +5182 -2778
  47. package/figma/figma.tokens.json +554 -33
  48. package/package.json +1 -1
  49. package/src/generated/base.tokens.json +487 -11
  50. package/src/generated/themes.json +2216 -320
  51. package/src/generated/uitvoerend-mintgroen-focus/tokens.json +479 -11
  52. package/src/generated/uitvoerend-violet/tokens.json +487 -11
  53. package/src/generated/uitvoerend-violet-oud/tokens.json +487 -11
  54. package/src/generated/wetgevend/tokens.json +487 -11
package/dist/root.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Sun, 09 Mar 2025 17:51:30 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;
@@ -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 Sun, 09 Mar 2025 17:51:30 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,