@utrecht/design-tokens 4.2.0 → 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 (55) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/_mixin-theme.scss +40 -4
  3. package/dist/_mixin.scss +40 -4
  4. package/dist/_variables.scss +40 -4
  5. package/dist/dark/_mixin-theme.scss +40 -4
  6. package/dist/dark/_mixin.scss +40 -4
  7. package/dist/dark/_variables.scss +40 -4
  8. package/dist/dark/index.cjs +40 -4
  9. package/dist/dark/index.css +40 -4
  10. package/dist/dark/index.d.ts +38 -2
  11. package/dist/dark/index.flat.json +40 -4
  12. package/dist/dark/index.json +655 -31
  13. package/dist/dark/index.mjs +40 -4
  14. package/dist/dark/index.tokens.json +95 -33
  15. package/dist/dark/list.json +655 -31
  16. package/dist/dark/list.mjs +655 -31
  17. package/dist/dark/property.css +4 -1
  18. package/dist/dark/root.css +40 -4
  19. package/dist/dark/theme-prince-xml.css +40 -4
  20. package/dist/dark/theme.css +40 -4
  21. package/dist/dark/tokens.cjs +752 -102
  22. package/dist/dark/tokens.d.ts +83 -21
  23. package/dist/dark/tokens.json +753 -103
  24. package/dist/dark/variables.cjs +40 -4
  25. package/dist/dark/variables.css +40 -4
  26. package/dist/dark/variables.d.ts +38 -2
  27. package/dist/dark/variables.json +40 -4
  28. package/dist/dark/variables.less +40 -4
  29. package/dist/dark/variables.mjs +40 -4
  30. package/dist/index.cjs +40 -4
  31. package/dist/index.css +80 -8
  32. package/dist/index.d.ts +38 -2
  33. package/dist/index.flat.json +40 -4
  34. package/dist/index.json +655 -31
  35. package/dist/index.mjs +40 -4
  36. package/dist/index.tokens.json +95 -33
  37. package/dist/list.json +655 -31
  38. package/dist/list.mjs +655 -31
  39. package/dist/property.css +4 -1
  40. package/dist/root.css +40 -4
  41. package/dist/theme-prince-xml.css +40 -4
  42. package/dist/theme.css +40 -4
  43. package/dist/tokens.cjs +752 -102
  44. package/dist/tokens.d.ts +83 -21
  45. package/dist/tokens.json +753 -103
  46. package/dist/variables.cjs +40 -4
  47. package/dist/variables.css +40 -4
  48. package/dist/variables.d.ts +38 -2
  49. package/dist/variables.json +40 -4
  50. package/dist/variables.less +40 -4
  51. package/dist/variables.mjs +40 -4
  52. package/package.json +1 -1
  53. package/src/component/utrecht/navigation.tokens.json +25 -6
  54. package/src/component/utrecht/status-badge.tokens.json +75 -0
  55. package/src/component/utrecht/badge-status.tokens.json +0 -8
package/dist/dark/property.css CHANGED
@@ -503,13 +503,16 @@
503
503
  @property --utrecht-navigation-item-mobile-border-block-start-color { syntax: '<color>'; inherits: true; }
504
504
  @property --utrecht-navigation-item-mobile-border-block-start-width { syntax: '<length>'; inherits: true; }
505
505
  @property --utrecht-navigation-link-active-color { syntax: '<color>'; inherits: true; }
506
- @property --utrecht-navigation-link-active-focus-color { syntax: '<color>'; inherits: true; }
507
506
  @property --utrecht-navigation-link-background-color { syntax: '<color>'; inherits: true; }
508
507
  @property --utrecht-navigation-link-border-color { syntax: '<color>'; inherits: true; }
509
508
  @property --utrecht-navigation-link-border-inline-end-width { syntax: '<length>'; inherits: true; }
510
509
  @property --utrecht-navigation-link-color { syntax: '<color>'; inherits: true; }
510
+ @property --utrecht-navigation-link-focus-background-color { syntax: '<color>'; inherits: true; }
511
511
  @property --utrecht-navigation-link-focus-color { syntax: '<color>'; inherits: true; }
512
512
  @property --utrecht-navigation-link-focus-text-decoration-thickness { syntax: '<length>'; inherits: true; }
513
+ @property --utrecht-navigation-link-focus-visible-background-color { syntax: '<color>'; inherits: true; }
514
+ @property --utrecht-navigation-link-focus-visible-color { syntax: '<color>'; inherits: true; }
515
+ @property --utrecht-navigation-link-focus-visible-text-decoration-thickness { syntax: '<length>'; inherits: true; }
513
516
  @property --utrecht-navigation-link-font-weight { syntax: '<number>'; inherits: true; }
514
517
  @property --utrecht-navigation-link-gap { syntax: '<length>'; inherits: true; }
515
518
  @property --utrecht-navigation-link-hover-background-color { syntax: '<color>'; inherits: true; }
package/dist/dark/root.css CHANGED
@@ -47,6 +47,7 @@
47
47
  --utrecht-table-cell-icon-size: 1em;
48
48
  --utrecht-table-caption-text-align: start;
49
49
  --utrecht-table-caption-margin-block-end: 1em;
50
+ --utrecht-status-badge-border-width: 0px;
50
51
  --utrecht-stack-focus-z-index: 1;
51
52
  --utrecht-space-text-xs: 0.5ch; /* Extra Small */
52
53
  --utrecht-space-text-xl: 1.75ch; /* Extra Large */
@@ -186,6 +187,7 @@
186
187
  --utrecht-navigation-link-mobile-min-block-size: 44px;
187
188
  --utrecht-navigation-link-hover-decoration-thickness: 3px;
188
189
  --utrecht-navigation-link-gap: 8px;
190
+ --utrecht-navigation-link-focus-visible-text-decoration-thickness: 3px;
189
191
  --utrecht-navigation-link-focus-text-decoration-thickness: 3px;
190
192
  --utrecht-navigation-link-border-inline-end-width: 1px;
191
193
  --utrecht-navigation-item-mobile-border-block-start-width: 1px;
@@ -489,6 +491,7 @@
489
491
  --utrecht-table-caption-font-size: var(--utrecht-typography-scale-lg-font-size);
490
492
  --utrecht-surface-color: var(--utrecht-color-grey-95);
491
493
  --utrecht-surface-background-color: var(--utrecht-color-grey-15);
494
+ --utrecht-status-badge-font-family: var(--utrecht-typography-sans-serif-font-family);
492
495
  --utrecht-spotlight-section-warning-color: var(--utrecht-color-grey-15);
493
496
  --utrecht-spotlight-section-warning-background-color: var(--utrecht-color-yellow-20);
494
497
  --utrecht-spotlight-section-padding-inline-start: var(--utrecht-space-inline-md);
@@ -597,21 +600,25 @@
597
600
  --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
598
601
  --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
599
602
  --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
600
- --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
603
+ --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
601
604
  --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
602
605
  --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
606
+ --utrecht-navigation-link-mobile-focus-color: var(--utrecht-color-blue-35);
607
+ --utrecht-navigation-link-mobile-focus-background-color: var(--utrecht-color-white);
603
608
  --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
604
609
  --utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
610
+ --utrecht-navigation-link-mobile-active-color: var(--utrecht-color-blue-35);
605
611
  --utrecht-navigation-link-is-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
606
612
  --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
607
613
  --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
608
614
  --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
609
- --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
610
- --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
615
+ --utrecht-navigation-link-focus-visible-color: var(--utrecht-color-black);
616
+ --utrecht-navigation-link-focus-visible-background-color: var(--utrecht-color-yellow-80);
617
+ --utrecht-navigation-link-focus-color: var(--utrecht-color-white);
618
+ --utrecht-navigation-link-focus-background-color: var(--utrecht-color-black);
611
619
  --utrecht-navigation-link-color: var(--utrecht-color-white);
612
620
  --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
613
621
  --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
614
- --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
615
622
  --utrecht-navigation-link-active-color: var(--utrecht-color-white);
616
623
  --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
617
624
  --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
@@ -1074,6 +1081,15 @@
1074
1081
  --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
1075
1082
  --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
1076
1083
  --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
1084
+ --utrecht-status-badge-warning-color: var(--utrecht-feedback-warning-fill-color);
1085
+ --utrecht-status-badge-valid-color: var(--utrecht-feedback-valid-fill-color);
1086
+ --utrecht-status-badge-safe-color: var(--utrecht-feedback-safe-fill-color);
1087
+ --utrecht-status-badge-invalid-color: var(--utrecht-feedback-invalid-fill-color);
1088
+ --utrecht-status-badge-inactive-color: var(--utrecht-feedback-inactive-fill-color);
1089
+ --utrecht-status-badge-error-color: var(--utrecht-feedback-error-fill-color);
1090
+ --utrecht-status-badge-danger-color: var(--utrecht-feedback-danger-fill-color);
1091
+ --utrecht-status-badge-border-radius: var(--utrecht-badge-border-radius);
1092
+ --utrecht-status-badge-active-color: var(--utrecht-feedback-active-fill-color);
1077
1093
  --utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
1078
1094
  --utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
1079
1095
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
@@ -1186,6 +1202,12 @@
1186
1202
  --nl-paragraph-lead-color: var(--utrecht-document-color);
1187
1203
  --nl-number-badge-border-radius: var(--nl-number-badge-font-size);
1188
1204
  --denhaag-process-steps-sub-step-line-color: var(--denhaag-process-steps-step-line-color);
1205
+ --utrecht-status-badge-padding-inline: var(--utrecht-badge-padding-inline);
1206
+ --utrecht-status-badge-padding-block: var(--utrecht-badge-padding-block);
1207
+ --utrecht-status-badge-invalid-border-color: var(--utrecht-feedback-invalid-fill-background-color);
1208
+ --utrecht-status-badge-invalid-background-color: var(--utrecht-feedback-invalid-fill-background-color);
1209
+ --utrecht-status-badge-color: var(--utrecht-badge-color);
1210
+ --utrecht-status-badge-background-color: var(--utrecht-badge-background-color);
1189
1211
  --utrecht-skip-link-padding-inline-start: var(--nl-skip-link-padding-inline);
1190
1212
  --utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
1191
1213
  --utrecht-skip-link-padding-block-start: var(--nl-skip-link-padding-block);
@@ -1213,9 +1235,23 @@
1213
1235
  --utrecht-feedback-active-background-color: var(--utrecht-feedback-safe-background-color);
1214
1236
  --utrecht-checkbox-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
1215
1237
  --of-layout-bg: var(--of-layout-background);
1238
+ --utrecht-status-badge-warning-border-color: var(--utrecht-feedback-warning-fill-background-color);
1239
+ --utrecht-status-badge-warning-background-color: var(--utrecht-feedback-warning-fill-background-color);
1240
+ --utrecht-status-badge-safe-border-color: var(--utrecht-feedback-safe-fill-background-color);
1241
+ --utrecht-status-badge-safe-background-color: var(--utrecht-feedback-safe-fill-background-color);
1242
+ --utrecht-status-badge-danger-border-color: var(--utrecht-feedback-danger-fill-background-color);
1243
+ --utrecht-status-badge-danger-background-color: var(--utrecht-feedback-danger-fill-background-color);
1216
1244
  --utrecht-feedback-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
1217
1245
  --utrecht-feedback-success-fill-background-color: var(--utrecht-feedback-success-background-color);
1218
1246
  --utrecht-feedback-inactive-fill-background-color: var(--utrecht-feedback-inactive-background-color);
1219
1247
  --utrecht-feedback-error-fill-background-color: var(--utrecht-feedback-error-background-color);
1220
1248
  --utrecht-feedback-active-fill-background-color: var(--utrecht-feedback-active-background-color);
1249
+ --utrecht-status-badge-valid-border-color: var(--utrecht-feedback-valid-fill-background-color);
1250
+ --utrecht-status-badge-valid-background-color: var(--utrecht-feedback-valid-fill-background-color);
1251
+ --utrecht-status-badge-inactive-border-color: var(--utrecht-feedback-inactive-fill-background-color);
1252
+ --utrecht-status-badge-inactive-background-color: var(--utrecht-feedback-inactive-fill-background-color);
1253
+ --utrecht-status-badge-error-border-color: var(--utrecht-feedback-error-fill-background-color);
1254
+ --utrecht-status-badge-error-background-color: var(--utrecht-feedback-error-fill-background-color);
1255
+ --utrecht-status-badge-active-border-color: var(--utrecht-feedback-active-fill-background-color);
1256
+ --utrecht-status-badge-active-background-color: var(--utrecht-feedback-active-fill-background-color);
1221
1257
  }
package/dist/dark/theme-prince-xml.css CHANGED
@@ -120,6 +120,7 @@
120
120
  --utrecht-table-caption-margin-block-end: 1em;
121
121
  --utrecht-table-caption-text-align: start;
122
122
  --utrecht-table-margin-block-end: 0;
123
+ --utrecht-status-badge-border-width: 0px;
123
124
  --utrecht-separator-block-size: 8px;
124
125
  --utrecht-select-border-block-end-width: 3px;
125
126
  --utrecht-search-bar-dropdown-max-block-size: 300px;
@@ -203,6 +204,7 @@
203
204
  --utrecht-navigation-link-mobile-min-block-size: 44px;
204
205
  --utrecht-navigation-link-hover-decoration-thickness: 3px;
205
206
  --utrecht-navigation-link-gap: 8px;
207
+ --utrecht-navigation-link-focus-visible-text-decoration-thickness: 3px;
206
208
  --utrecht-navigation-link-focus-text-decoration-thickness: 3px;
207
209
  --utrecht-navigation-link-border-inline-end-width: 1px;
208
210
  --utrecht-navigation-item-mobile-border-block-start-width: 1px;
@@ -569,6 +571,7 @@
569
571
  --utrecht-table-margin-block-start: var(--utrecht-space-block-md);
570
572
  --utrecht-surface-color: var(--utrecht-color-grey-95);
571
573
  --utrecht-surface-background-color: var(--utrecht-color-grey-15);
574
+ --utrecht-status-badge-font-family: var(--utrecht-typography-sans-serif-font-family);
572
575
  --utrecht-spotlight-section-ok-background-color: var(--utrecht-color-green-90);
573
576
  --utrecht-spotlight-section-error-background-color: var(--utrecht-color-red-95);
574
577
  --utrecht-spotlight-section-warning-color: var(--utrecht-color-grey-15);
@@ -665,10 +668,13 @@
665
668
  --utrecht-navigation-list-mobile-background-color: var(--utrecht-color-white);
666
669
  --utrecht-navigation-link-padding-block-start: var(--utrecht-space-block-md);
667
670
  --utrecht-navigation-link-padding-block-end: var(--utrecht-space-block-md);
671
+ --utrecht-navigation-link-mobile-focus-color: var(--utrecht-color-blue-35);
672
+ --utrecht-navigation-link-mobile-focus-background-color: var(--utrecht-color-white);
673
+ --utrecht-navigation-link-mobile-active-color: var(--utrecht-color-blue-35);
668
674
  --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
669
675
  --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
670
676
  --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
671
- --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
677
+ --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
672
678
  --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
673
679
  --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
674
680
  --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
@@ -677,12 +683,13 @@
677
683
  --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
678
684
  --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
679
685
  --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
680
- --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
681
- --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
686
+ --utrecht-navigation-link-focus-visible-background-color: var(--utrecht-color-yellow-80);
687
+ --utrecht-navigation-link-focus-visible-color: var(--utrecht-color-black);
688
+ --utrecht-navigation-link-focus-background-color: var(--utrecht-color-black);
689
+ --utrecht-navigation-link-focus-color: var(--utrecht-color-white);
682
690
  --utrecht-navigation-link-color: var(--utrecht-color-white);
683
691
  --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
684
692
  --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
685
- --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
686
693
  --utrecht-navigation-link-active-color: var(--utrecht-color-white);
687
694
  --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
688
695
  --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
@@ -1089,6 +1096,15 @@
1089
1096
  --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
1090
1097
  --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
1091
1098
  --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
1099
+ --utrecht-status-badge-warning-color: var(--utrecht-feedback-warning-fill-color);
1100
+ --utrecht-status-badge-valid-color: var(--utrecht-feedback-valid-fill-color);
1101
+ --utrecht-status-badge-safe-color: var(--utrecht-feedback-safe-fill-color);
1102
+ --utrecht-status-badge-invalid-color: var(--utrecht-feedback-invalid-fill-color);
1103
+ --utrecht-status-badge-inactive-color: var(--utrecht-feedback-inactive-fill-color);
1104
+ --utrecht-status-badge-error-color: var(--utrecht-feedback-error-fill-color);
1105
+ --utrecht-status-badge-danger-color: var(--utrecht-feedback-danger-fill-color);
1106
+ --utrecht-status-badge-active-color: var(--utrecht-feedback-active-fill-color);
1107
+ --utrecht-status-badge-border-radius: var(--utrecht-badge-border-radius);
1092
1108
  --utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
1093
1109
  --utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
1094
1110
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
@@ -1187,6 +1203,12 @@
1187
1203
  --utrecht-badge-background-color: var(--nl-data-badge-background-color); /* Default background color for badge components */
1188
1204
  --utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /* Default corner radius for badge components */
1189
1205
  --of-layout-bg: var(--of-layout-background);
1206
+ --utrecht-status-badge-invalid-border-color: var(--utrecht-feedback-invalid-fill-background-color);
1207
+ --utrecht-status-badge-invalid-background-color: var(--utrecht-feedback-invalid-fill-background-color);
1208
+ --utrecht-status-badge-padding-inline: var(--utrecht-badge-padding-inline);
1209
+ --utrecht-status-badge-padding-block: var(--utrecht-badge-padding-block);
1210
+ --utrecht-status-badge-color: var(--utrecht-badge-color);
1211
+ --utrecht-status-badge-background-color: var(--utrecht-badge-background-color);
1190
1212
  --utrecht-skip-link-focus-color: var(--nl-skip-link-focus-visible-color);
1191
1213
  --utrecht-skip-link-focus-background-color: var(--nl-skip-link-focus-visible-background-color);
1192
1214
  --utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
@@ -1213,9 +1235,23 @@
1213
1235
  --utrecht-feedback-warning-fill-background-color: var(--utrecht-feedback-warning-background-color);
1214
1236
  --utrecht-feedback-danger-fill-background-color: var(--utrecht-feedback-danger-background-color);
1215
1237
  --utrecht-checkbox-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
1238
+ --utrecht-status-badge-warning-border-color: var(--utrecht-feedback-warning-fill-background-color);
1239
+ --utrecht-status-badge-warning-background-color: var(--utrecht-feedback-warning-fill-background-color);
1240
+ --utrecht-status-badge-safe-border-color: var(--utrecht-feedback-safe-fill-background-color);
1241
+ --utrecht-status-badge-safe-background-color: var(--utrecht-feedback-safe-fill-background-color);
1242
+ --utrecht-status-badge-danger-border-color: var(--utrecht-feedback-danger-fill-background-color);
1243
+ --utrecht-status-badge-danger-background-color: var(--utrecht-feedback-danger-fill-background-color);
1216
1244
  --utrecht-feedback-active-fill-background-color: var(--utrecht-feedback-active-background-color);
1217
1245
  --utrecht-feedback-inactive-fill-background-color: var(--utrecht-feedback-inactive-background-color);
1218
1246
  --utrecht-feedback-success-fill-background-color: var(--utrecht-feedback-success-background-color);
1219
1247
  --utrecht-feedback-error-fill-background-color: var(--utrecht-feedback-error-background-color);
1220
1248
  --utrecht-feedback-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
1249
+ --utrecht-status-badge-valid-border-color: var(--utrecht-feedback-valid-fill-background-color);
1250
+ --utrecht-status-badge-valid-background-color: var(--utrecht-feedback-valid-fill-background-color);
1251
+ --utrecht-status-badge-inactive-border-color: var(--utrecht-feedback-inactive-fill-background-color);
1252
+ --utrecht-status-badge-inactive-background-color: var(--utrecht-feedback-inactive-fill-background-color);
1253
+ --utrecht-status-badge-error-border-color: var(--utrecht-feedback-error-fill-background-color);
1254
+ --utrecht-status-badge-error-background-color: var(--utrecht-feedback-error-fill-background-color);
1255
+ --utrecht-status-badge-active-border-color: var(--utrecht-feedback-active-fill-background-color);
1256
+ --utrecht-status-badge-active-background-color: var(--utrecht-feedback-active-fill-background-color);
1221
1257
  }
package/dist/dark/theme.css CHANGED
@@ -47,6 +47,7 @@
47
47
  --utrecht-table-cell-icon-size: 1em;
48
48
  --utrecht-table-caption-text-align: start;
49
49
  --utrecht-table-caption-margin-block-end: 1em;
50
+ --utrecht-status-badge-border-width: 0px;
50
51
  --utrecht-stack-focus-z-index: 1;
51
52
  --utrecht-space-text-xs: 0.5ch; /* Extra Small */
52
53
  --utrecht-space-text-xl: 1.75ch; /* Extra Large */
@@ -186,6 +187,7 @@
186
187
  --utrecht-navigation-link-mobile-min-block-size: 44px;
187
188
  --utrecht-navigation-link-hover-decoration-thickness: 3px;
188
189
  --utrecht-navigation-link-gap: 8px;
190
+ --utrecht-navigation-link-focus-visible-text-decoration-thickness: 3px;
189
191
  --utrecht-navigation-link-focus-text-decoration-thickness: 3px;
190
192
  --utrecht-navigation-link-border-inline-end-width: 1px;
191
193
  --utrecht-navigation-item-mobile-border-block-start-width: 1px;
@@ -489,6 +491,7 @@
489
491
  --utrecht-table-caption-font-size: var(--utrecht-typography-scale-lg-font-size);
490
492
  --utrecht-surface-color: var(--utrecht-color-grey-95);
491
493
  --utrecht-surface-background-color: var(--utrecht-color-grey-15);
494
+ --utrecht-status-badge-font-family: var(--utrecht-typography-sans-serif-font-family);
492
495
  --utrecht-spotlight-section-warning-color: var(--utrecht-color-grey-15);
493
496
  --utrecht-spotlight-section-warning-background-color: var(--utrecht-color-yellow-20);
494
497
  --utrecht-spotlight-section-padding-inline-start: var(--utrecht-space-inline-md);
@@ -597,21 +600,25 @@
597
600
  --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
598
601
  --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
599
602
  --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
600
- --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
603
+ --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
601
604
  --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
602
605
  --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
606
+ --utrecht-navigation-link-mobile-focus-color: var(--utrecht-color-blue-35);
607
+ --utrecht-navigation-link-mobile-focus-background-color: var(--utrecht-color-white);
603
608
  --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
604
609
  --utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
610
+ --utrecht-navigation-link-mobile-active-color: var(--utrecht-color-blue-35);
605
611
  --utrecht-navigation-link-is-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
606
612
  --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
607
613
  --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
608
614
  --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
609
- --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
610
- --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
615
+ --utrecht-navigation-link-focus-visible-color: var(--utrecht-color-black);
616
+ --utrecht-navigation-link-focus-visible-background-color: var(--utrecht-color-yellow-80);
617
+ --utrecht-navigation-link-focus-color: var(--utrecht-color-white);
618
+ --utrecht-navigation-link-focus-background-color: var(--utrecht-color-black);
611
619
  --utrecht-navigation-link-color: var(--utrecht-color-white);
612
620
  --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
613
621
  --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
614
- --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
615
622
  --utrecht-navigation-link-active-color: var(--utrecht-color-white);
616
623
  --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
617
624
  --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
@@ -1074,6 +1081,15 @@
1074
1081
  --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
1075
1082
  --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
1076
1083
  --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
1084
+ --utrecht-status-badge-warning-color: var(--utrecht-feedback-warning-fill-color);
1085
+ --utrecht-status-badge-valid-color: var(--utrecht-feedback-valid-fill-color);
1086
+ --utrecht-status-badge-safe-color: var(--utrecht-feedback-safe-fill-color);
1087
+ --utrecht-status-badge-invalid-color: var(--utrecht-feedback-invalid-fill-color);
1088
+ --utrecht-status-badge-inactive-color: var(--utrecht-feedback-inactive-fill-color);
1089
+ --utrecht-status-badge-error-color: var(--utrecht-feedback-error-fill-color);
1090
+ --utrecht-status-badge-danger-color: var(--utrecht-feedback-danger-fill-color);
1091
+ --utrecht-status-badge-border-radius: var(--utrecht-badge-border-radius);
1092
+ --utrecht-status-badge-active-color: var(--utrecht-feedback-active-fill-color);
1077
1093
  --utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
1078
1094
  --utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
1079
1095
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
@@ -1186,6 +1202,12 @@
1186
1202
  --nl-paragraph-lead-color: var(--utrecht-document-color);
1187
1203
  --nl-number-badge-border-radius: var(--nl-number-badge-font-size);
1188
1204
  --denhaag-process-steps-sub-step-line-color: var(--denhaag-process-steps-step-line-color);
1205
+ --utrecht-status-badge-padding-inline: var(--utrecht-badge-padding-inline);
1206
+ --utrecht-status-badge-padding-block: var(--utrecht-badge-padding-block);
1207
+ --utrecht-status-badge-invalid-border-color: var(--utrecht-feedback-invalid-fill-background-color);
1208
+ --utrecht-status-badge-invalid-background-color: var(--utrecht-feedback-invalid-fill-background-color);
1209
+ --utrecht-status-badge-color: var(--utrecht-badge-color);
1210
+ --utrecht-status-badge-background-color: var(--utrecht-badge-background-color);
1189
1211
  --utrecht-skip-link-padding-inline-start: var(--nl-skip-link-padding-inline);
1190
1212
  --utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
1191
1213
  --utrecht-skip-link-padding-block-start: var(--nl-skip-link-padding-block);
@@ -1213,9 +1235,23 @@
1213
1235
  --utrecht-feedback-active-background-color: var(--utrecht-feedback-safe-background-color);
1214
1236
  --utrecht-checkbox-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
1215
1237
  --of-layout-bg: var(--of-layout-background);
1238
+ --utrecht-status-badge-warning-border-color: var(--utrecht-feedback-warning-fill-background-color);
1239
+ --utrecht-status-badge-warning-background-color: var(--utrecht-feedback-warning-fill-background-color);
1240
+ --utrecht-status-badge-safe-border-color: var(--utrecht-feedback-safe-fill-background-color);
1241
+ --utrecht-status-badge-safe-background-color: var(--utrecht-feedback-safe-fill-background-color);
1242
+ --utrecht-status-badge-danger-border-color: var(--utrecht-feedback-danger-fill-background-color);
1243
+ --utrecht-status-badge-danger-background-color: var(--utrecht-feedback-danger-fill-background-color);
1216
1244
  --utrecht-feedback-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
1217
1245
  --utrecht-feedback-success-fill-background-color: var(--utrecht-feedback-success-background-color);
1218
1246
  --utrecht-feedback-inactive-fill-background-color: var(--utrecht-feedback-inactive-background-color);
1219
1247
  --utrecht-feedback-error-fill-background-color: var(--utrecht-feedback-error-background-color);
1220
1248
  --utrecht-feedback-active-fill-background-color: var(--utrecht-feedback-active-background-color);
1249
+ --utrecht-status-badge-valid-border-color: var(--utrecht-feedback-valid-fill-background-color);
1250
+ --utrecht-status-badge-valid-background-color: var(--utrecht-feedback-valid-fill-background-color);
1251
+ --utrecht-status-badge-inactive-border-color: var(--utrecht-feedback-inactive-fill-background-color);
1252
+ --utrecht-status-badge-inactive-background-color: var(--utrecht-feedback-inactive-fill-background-color);
1253
+ --utrecht-status-badge-error-border-color: var(--utrecht-feedback-error-fill-background-color);
1254
+ --utrecht-status-badge-error-background-color: var(--utrecht-feedback-error-fill-background-color);
1255
+ --utrecht-status-badge-active-border-color: var(--utrecht-feedback-active-fill-background-color);
1256
+ --utrecht-status-badge-active-background-color: var(--utrecht-feedback-active-fill-background-color);
1221
1257
  }