@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/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @utrecht/design-tokens
2
2
 
3
+ ## 5.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - edac79f: - badge-status is no longer styled through common badge tokens but has its own set of tokens
8
+ - badge-status has been renamed to status-badge, use @utrecht/status-badge-css instead of @utrecht/badge-status-css
9
+
10
+ ### Patch Changes
11
+
12
+ - 0fcdfbf: Fix the mixins for link focus and focus-visible states in the navigation component to correctly reference the design tokens for background colors and text decorations.
13
+
3
14
  ## 4.2.0
4
15
 
5
16
  ### Minor Changes
package/dist/_mixin-theme.scss 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;
@@ -567,6 +569,7 @@
567
569
  --utrecht-table-margin-block-start: var(--utrecht-space-block-md);
568
570
  --utrecht-surface-color: var(--utrecht-color-grey-10);
569
571
  --utrecht-surface-background-color: var(--utrecht-color-grey-95);
572
+ --utrecht-status-badge-font-family: var(--utrecht-typography-sans-serif-font-family);
570
573
  --utrecht-spotlight-section-ok-background-color: var(--utrecht-color-green-90);
571
574
  --utrecht-spotlight-section-error-background-color: var(--utrecht-color-red-95);
572
575
  --utrecht-spotlight-section-warning-background-color: var(--utrecht-color-yellow-80);
@@ -661,10 +664,13 @@
661
664
  --utrecht-navigation-list-mobile-background-color: var(--utrecht-color-white);
662
665
  --utrecht-navigation-link-padding-block-start: var(--utrecht-space-block-md);
663
666
  --utrecht-navigation-link-padding-block-end: var(--utrecht-space-block-md);
667
+ --utrecht-navigation-link-mobile-focus-color: var(--utrecht-color-blue-35);
668
+ --utrecht-navigation-link-mobile-focus-background-color: var(--utrecht-color-white);
669
+ --utrecht-navigation-link-mobile-active-color: var(--utrecht-color-blue-35);
664
670
  --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
665
671
  --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
666
672
  --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
667
- --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
673
+ --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
668
674
  --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
669
675
  --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
670
676
  --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
@@ -673,12 +679,13 @@
673
679
  --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
674
680
  --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
675
681
  --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
676
- --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
677
- --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
682
+ --utrecht-navigation-link-focus-visible-background-color: var(--utrecht-color-yellow-80);
683
+ --utrecht-navigation-link-focus-visible-color: var(--utrecht-color-black);
684
+ --utrecht-navigation-link-focus-background-color: var(--utrecht-color-black);
685
+ --utrecht-navigation-link-focus-color: var(--utrecht-color-white);
678
686
  --utrecht-navigation-link-color: var(--utrecht-color-white);
679
687
  --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
680
688
  --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
681
- --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
682
689
  --utrecht-navigation-link-active-color: var(--utrecht-color-white);
683
690
  --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
684
691
  --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
@@ -1088,6 +1095,15 @@
1088
1095
  --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
1089
1096
  --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
1090
1097
  --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
1098
+ --utrecht-status-badge-warning-color: var(--utrecht-feedback-warning-fill-color);
1099
+ --utrecht-status-badge-valid-color: var(--utrecht-feedback-valid-fill-color);
1100
+ --utrecht-status-badge-safe-color: var(--utrecht-feedback-safe-fill-color);
1101
+ --utrecht-status-badge-invalid-color: var(--utrecht-feedback-invalid-fill-color);
1102
+ --utrecht-status-badge-inactive-color: var(--utrecht-feedback-inactive-fill-color);
1103
+ --utrecht-status-badge-error-color: var(--utrecht-feedback-error-fill-color);
1104
+ --utrecht-status-badge-danger-color: var(--utrecht-feedback-danger-fill-color);
1105
+ --utrecht-status-badge-active-color: var(--utrecht-feedback-active-fill-color);
1106
+ --utrecht-status-badge-border-radius: var(--utrecht-badge-border-radius);
1091
1107
  --utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
1092
1108
  --utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
1093
1109
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
@@ -1176,6 +1192,12 @@
1176
1192
  --utrecht-badge-background-color: var(--nl-data-badge-background-color); /* Default background color for badge components */
1177
1193
  --utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /* Default corner radius for badge components */
1178
1194
  --of-layout-bg: var(--of-layout-background);
1195
+ --utrecht-status-badge-invalid-border-color: var(--utrecht-feedback-invalid-fill-background-color);
1196
+ --utrecht-status-badge-invalid-background-color: var(--utrecht-feedback-invalid-fill-background-color);
1197
+ --utrecht-status-badge-padding-inline: var(--utrecht-badge-padding-inline);
1198
+ --utrecht-status-badge-padding-block: var(--utrecht-badge-padding-block);
1199
+ --utrecht-status-badge-color: var(--utrecht-badge-color);
1200
+ --utrecht-status-badge-background-color: var(--utrecht-badge-background-color);
1179
1201
  --utrecht-skip-link-focus-color: var(--nl-skip-link-focus-visible-color);
1180
1202
  --utrecht-skip-link-focus-background-color: var(--nl-skip-link-focus-visible-background-color);
1181
1203
  --utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
@@ -1202,9 +1224,23 @@
1202
1224
  --utrecht-feedback-warning-fill-background-color: var(--utrecht-feedback-warning-background-color);
1203
1225
  --utrecht-feedback-danger-fill-background-color: var(--utrecht-feedback-danger-background-color);
1204
1226
  --utrecht-checkbox-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
1227
+ --utrecht-status-badge-warning-border-color: var(--utrecht-feedback-warning-fill-background-color);
1228
+ --utrecht-status-badge-warning-background-color: var(--utrecht-feedback-warning-fill-background-color);
1229
+ --utrecht-status-badge-safe-border-color: var(--utrecht-feedback-safe-fill-background-color);
1230
+ --utrecht-status-badge-safe-background-color: var(--utrecht-feedback-safe-fill-background-color);
1231
+ --utrecht-status-badge-danger-border-color: var(--utrecht-feedback-danger-fill-background-color);
1232
+ --utrecht-status-badge-danger-background-color: var(--utrecht-feedback-danger-fill-background-color);
1205
1233
  --utrecht-feedback-active-fill-background-color: var(--utrecht-feedback-active-background-color);
1206
1234
  --utrecht-feedback-inactive-fill-background-color: var(--utrecht-feedback-inactive-background-color);
1207
1235
  --utrecht-feedback-success-fill-background-color: var(--utrecht-feedback-success-background-color);
1208
1236
  --utrecht-feedback-error-fill-background-color: var(--utrecht-feedback-error-background-color);
1209
1237
  --utrecht-feedback-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
1238
+ --utrecht-status-badge-valid-border-color: var(--utrecht-feedback-valid-fill-background-color);
1239
+ --utrecht-status-badge-valid-background-color: var(--utrecht-feedback-valid-fill-background-color);
1240
+ --utrecht-status-badge-inactive-border-color: var(--utrecht-feedback-inactive-fill-background-color);
1241
+ --utrecht-status-badge-inactive-background-color: var(--utrecht-feedback-inactive-fill-background-color);
1242
+ --utrecht-status-badge-error-border-color: var(--utrecht-feedback-error-fill-background-color);
1243
+ --utrecht-status-badge-error-background-color: var(--utrecht-feedback-error-fill-background-color);
1244
+ --utrecht-status-badge-active-border-color: var(--utrecht-feedback-active-fill-background-color);
1245
+ --utrecht-status-badge-active-background-color: var(--utrecht-feedback-active-fill-background-color);
1210
1246
  }
package/dist/_mixin.scss 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;
@@ -567,6 +569,7 @@
567
569
  --utrecht-table-margin-block-start: var(--utrecht-space-block-md);
568
570
  --utrecht-surface-color: var(--utrecht-color-grey-10);
569
571
  --utrecht-surface-background-color: var(--utrecht-color-grey-95);
572
+ --utrecht-status-badge-font-family: var(--utrecht-typography-sans-serif-font-family);
570
573
  --utrecht-spotlight-section-ok-background-color: var(--utrecht-color-green-90);
571
574
  --utrecht-spotlight-section-error-background-color: var(--utrecht-color-red-95);
572
575
  --utrecht-spotlight-section-warning-background-color: var(--utrecht-color-yellow-80);
@@ -661,10 +664,13 @@
661
664
  --utrecht-navigation-list-mobile-background-color: var(--utrecht-color-white);
662
665
  --utrecht-navigation-link-padding-block-start: var(--utrecht-space-block-md);
663
666
  --utrecht-navigation-link-padding-block-end: var(--utrecht-space-block-md);
667
+ --utrecht-navigation-link-mobile-focus-color: var(--utrecht-color-blue-35);
668
+ --utrecht-navigation-link-mobile-focus-background-color: var(--utrecht-color-white);
669
+ --utrecht-navigation-link-mobile-active-color: var(--utrecht-color-blue-35);
664
670
  --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
665
671
  --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
666
672
  --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
667
- --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
673
+ --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
668
674
  --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
669
675
  --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
670
676
  --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
@@ -673,12 +679,13 @@
673
679
  --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
674
680
  --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
675
681
  --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
676
- --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
677
- --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
682
+ --utrecht-navigation-link-focus-visible-background-color: var(--utrecht-color-yellow-80);
683
+ --utrecht-navigation-link-focus-visible-color: var(--utrecht-color-black);
684
+ --utrecht-navigation-link-focus-background-color: var(--utrecht-color-black);
685
+ --utrecht-navigation-link-focus-color: var(--utrecht-color-white);
678
686
  --utrecht-navigation-link-color: var(--utrecht-color-white);
679
687
  --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
680
688
  --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
681
- --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
682
689
  --utrecht-navigation-link-active-color: var(--utrecht-color-white);
683
690
  --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
684
691
  --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
@@ -1088,6 +1095,15 @@
1088
1095
  --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
1089
1096
  --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
1090
1097
  --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
1098
+ --utrecht-status-badge-warning-color: var(--utrecht-feedback-warning-fill-color);
1099
+ --utrecht-status-badge-valid-color: var(--utrecht-feedback-valid-fill-color);
1100
+ --utrecht-status-badge-safe-color: var(--utrecht-feedback-safe-fill-color);
1101
+ --utrecht-status-badge-invalid-color: var(--utrecht-feedback-invalid-fill-color);
1102
+ --utrecht-status-badge-inactive-color: var(--utrecht-feedback-inactive-fill-color);
1103
+ --utrecht-status-badge-error-color: var(--utrecht-feedback-error-fill-color);
1104
+ --utrecht-status-badge-danger-color: var(--utrecht-feedback-danger-fill-color);
1105
+ --utrecht-status-badge-active-color: var(--utrecht-feedback-active-fill-color);
1106
+ --utrecht-status-badge-border-radius: var(--utrecht-badge-border-radius);
1091
1107
  --utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
1092
1108
  --utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
1093
1109
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
@@ -1176,6 +1192,12 @@
1176
1192
  --utrecht-badge-background-color: var(--nl-data-badge-background-color); /* Default background color for badge components */
1177
1193
  --utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /* Default corner radius for badge components */
1178
1194
  --of-layout-bg: var(--of-layout-background);
1195
+ --utrecht-status-badge-invalid-border-color: var(--utrecht-feedback-invalid-fill-background-color);
1196
+ --utrecht-status-badge-invalid-background-color: var(--utrecht-feedback-invalid-fill-background-color);
1197
+ --utrecht-status-badge-padding-inline: var(--utrecht-badge-padding-inline);
1198
+ --utrecht-status-badge-padding-block: var(--utrecht-badge-padding-block);
1199
+ --utrecht-status-badge-color: var(--utrecht-badge-color);
1200
+ --utrecht-status-badge-background-color: var(--utrecht-badge-background-color);
1179
1201
  --utrecht-skip-link-focus-color: var(--nl-skip-link-focus-visible-color);
1180
1202
  --utrecht-skip-link-focus-background-color: var(--nl-skip-link-focus-visible-background-color);
1181
1203
  --utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
@@ -1202,9 +1224,23 @@
1202
1224
  --utrecht-feedback-warning-fill-background-color: var(--utrecht-feedback-warning-background-color);
1203
1225
  --utrecht-feedback-danger-fill-background-color: var(--utrecht-feedback-danger-background-color);
1204
1226
  --utrecht-checkbox-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
1227
+ --utrecht-status-badge-warning-border-color: var(--utrecht-feedback-warning-fill-background-color);
1228
+ --utrecht-status-badge-warning-background-color: var(--utrecht-feedback-warning-fill-background-color);
1229
+ --utrecht-status-badge-safe-border-color: var(--utrecht-feedback-safe-fill-background-color);
1230
+ --utrecht-status-badge-safe-background-color: var(--utrecht-feedback-safe-fill-background-color);
1231
+ --utrecht-status-badge-danger-border-color: var(--utrecht-feedback-danger-fill-background-color);
1232
+ --utrecht-status-badge-danger-background-color: var(--utrecht-feedback-danger-fill-background-color);
1205
1233
  --utrecht-feedback-active-fill-background-color: var(--utrecht-feedback-active-background-color);
1206
1234
  --utrecht-feedback-inactive-fill-background-color: var(--utrecht-feedback-inactive-background-color);
1207
1235
  --utrecht-feedback-success-fill-background-color: var(--utrecht-feedback-success-background-color);
1208
1236
  --utrecht-feedback-error-fill-background-color: var(--utrecht-feedback-error-background-color);
1209
1237
  --utrecht-feedback-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
1238
+ --utrecht-status-badge-valid-border-color: var(--utrecht-feedback-valid-fill-background-color);
1239
+ --utrecht-status-badge-valid-background-color: var(--utrecht-feedback-valid-fill-background-color);
1240
+ --utrecht-status-badge-inactive-border-color: var(--utrecht-feedback-inactive-fill-background-color);
1241
+ --utrecht-status-badge-inactive-background-color: var(--utrecht-feedback-inactive-fill-background-color);
1242
+ --utrecht-status-badge-error-border-color: var(--utrecht-feedback-error-fill-background-color);
1243
+ --utrecht-status-badge-error-background-color: var(--utrecht-feedback-error-fill-background-color);
1244
+ --utrecht-status-badge-active-border-color: var(--utrecht-feedback-active-fill-background-color);
1245
+ --utrecht-status-badge-active-background-color: var(--utrecht-feedback-active-fill-background-color);
1210
1246
  }
package/dist/_variables.scss CHANGED
@@ -118,6 +118,7 @@ $utrecht-table-header-sticky-border-block-end-width: 2px;
118
118
  $utrecht-table-caption-margin-block-end: 1em;
119
119
  $utrecht-table-caption-text-align: start;
120
120
  $utrecht-table-margin-block-end: 0;
121
+ $utrecht-status-badge-border-width: 0px;
121
122
  $utrecht-separator-block-size: 8px;
122
123
  $utrecht-select-border-block-end-width: 3px;
123
124
  $utrecht-search-bar-dropdown-max-block-size: 300px;
@@ -201,6 +202,7 @@ $utrecht-navigation-link-mobile-transition-duration: 300ms;
201
202
  $utrecht-navigation-link-mobile-min-block-size: 44px;
202
203
  $utrecht-navigation-link-hover-decoration-thickness: 3px;
203
204
  $utrecht-navigation-link-gap: 8px;
205
+ $utrecht-navigation-link-focus-visible-text-decoration-thickness: 3px;
204
206
  $utrecht-navigation-link-focus-text-decoration-thickness: 3px;
205
207
  $utrecht-navigation-link-border-inline-end-width: 1px;
206
208
  $utrecht-navigation-item-mobile-border-block-start-width: 1px;
@@ -565,6 +567,7 @@ $utrecht-table-caption-font-weight: $utrecht-typography-weight-scale-bold-font-w
565
567
  $utrecht-table-margin-block-start: $utrecht-space-block-md;
566
568
  $utrecht-surface-color: $utrecht-color-grey-10;
567
569
  $utrecht-surface-background-color: $utrecht-color-grey-95;
570
+ $utrecht-status-badge-font-family: $utrecht-typography-sans-serif-font-family;
568
571
  $utrecht-spotlight-section-ok-background-color: $utrecht-color-green-90;
569
572
  $utrecht-spotlight-section-error-background-color: $utrecht-color-red-95;
570
573
  $utrecht-spotlight-section-warning-background-color: $utrecht-color-yellow-80;
@@ -659,10 +662,13 @@ $utrecht-navigation-list-mobile-padding-block-end: $utrecht-space-block-xs;
659
662
  $utrecht-navigation-list-mobile-background-color: $utrecht-color-white;
660
663
  $utrecht-navigation-link-padding-block-start: $utrecht-space-block-md;
661
664
  $utrecht-navigation-link-padding-block-end: $utrecht-space-block-md;
665
+ $utrecht-navigation-link-mobile-focus-color: $utrecht-color-blue-35;
666
+ $utrecht-navigation-link-mobile-focus-background-color: $utrecht-color-white;
667
+ $utrecht-navigation-link-mobile-active-color: $utrecht-color-blue-35;
662
668
  $utrecht-navigation-link-mobile-padding-inline-start: $utrecht-space-inline-md;
663
669
  $utrecht-navigation-link-mobile-padding-block-start: $utrecht-space-block-xs;
664
670
  $utrecht-navigation-link-mobile-padding-block-end: $utrecht-space-block-xs;
665
- $utrecht-navigation-link-mobile-hover-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
671
+ $utrecht-navigation-link-mobile-hover-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
666
672
  $utrecht-navigation-link-mobile-hover-color: $utrecht-color-blue-35;
667
673
  $utrecht-navigation-link-mobile-hover-background-color: $utrecht-color-white;
668
674
  $utrecht-navigation-link-mobile-color: $utrecht-color-blue-35;
@@ -671,12 +677,13 @@ $utrecht-navigation-link-is-current-font-weight: $utrecht-typography-weight-scal
671
677
  $utrecht-navigation-link-hover-color: $utrecht-color-white;
672
678
  $utrecht-navigation-link-hover-background-color: $utrecht-color-black;
673
679
  $utrecht-navigation-link-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
674
- $utrecht-navigation-link-focus-background-color: $utrecht-color-yellow-80;
675
- $utrecht-navigation-link-focus-color: $utrecht-color-black;
680
+ $utrecht-navigation-link-focus-visible-background-color: $utrecht-color-yellow-80;
681
+ $utrecht-navigation-link-focus-visible-color: $utrecht-color-black;
682
+ $utrecht-navigation-link-focus-background-color: $utrecht-color-black;
683
+ $utrecht-navigation-link-focus-color: $utrecht-color-white;
676
684
  $utrecht-navigation-link-color: $utrecht-color-white;
677
685
  $utrecht-navigation-link-border-color: $utrecht-color-grey-40;
678
686
  $utrecht-navigation-link-background-color: $utrecht-color-grey-15;
679
- $utrecht-navigation-link-active-focus-color: $utrecht-color-black;
680
687
  $utrecht-navigation-link-active-color: $utrecht-color-white;
681
688
  $utrecht-navigation-item-mobile-border-block-start-color: $utrecht-color-grey-80;
682
689
  $utrecht-navigation-item-mobile-border-block-end-color: $utrecht-color-grey-80;
@@ -1086,6 +1093,15 @@ $utrecht-toptask-link-hover-color: $utrecht-button-primary-action-hover-color;
1086
1093
  $utrecht-toptask-link-hover-background-color: $utrecht-button-primary-action-hover-background-color;
1087
1094
  $utrecht-toptask-link-color: $utrecht-button-primary-action-color;
1088
1095
  $utrecht-toptask-link-background-color: $utrecht-button-primary-action-background-color;
1096
+ $utrecht-status-badge-warning-color: $utrecht-feedback-warning-fill-color;
1097
+ $utrecht-status-badge-valid-color: $utrecht-feedback-valid-fill-color;
1098
+ $utrecht-status-badge-safe-color: $utrecht-feedback-safe-fill-color;
1099
+ $utrecht-status-badge-invalid-color: $utrecht-feedback-invalid-fill-color;
1100
+ $utrecht-status-badge-inactive-color: $utrecht-feedback-inactive-fill-color;
1101
+ $utrecht-status-badge-error-color: $utrecht-feedback-error-fill-color;
1102
+ $utrecht-status-badge-danger-color: $utrecht-feedback-danger-fill-color;
1103
+ $utrecht-status-badge-active-color: $utrecht-feedback-active-fill-color;
1104
+ $utrecht-status-badge-border-radius: $utrecht-badge-border-radius;
1089
1105
  $utrecht-skip-link-focus-visible-text-decoration: $nl-skip-link-focus-visible-text-decoration;
1090
1106
  $utrecht-skip-link-text-decoration: $nl-skip-link-text-decoration;
1091
1107
  $utrecht-radio-button-border-color: $utrecht-form-control-border-color;
@@ -1174,6 +1190,12 @@ $utrecht-badge-color: $nl-data-badge-color; // Default text color for badge comp
1174
1190
  $utrecht-badge-background-color: $nl-data-badge-background-color; // Default background color for badge components
1175
1191
  $utrecht-badge-counter-border-radius: $utrecht-badge-counter-font-size; // Default corner radius for badge components
1176
1192
  $of-layout-bg: $of-layout-background;
1193
+ $utrecht-status-badge-invalid-border-color: $utrecht-feedback-invalid-fill-background-color;
1194
+ $utrecht-status-badge-invalid-background-color: $utrecht-feedback-invalid-fill-background-color;
1195
+ $utrecht-status-badge-padding-inline: $utrecht-badge-padding-inline;
1196
+ $utrecht-status-badge-padding-block: $utrecht-badge-padding-block;
1197
+ $utrecht-status-badge-color: $utrecht-badge-color;
1198
+ $utrecht-status-badge-background-color: $utrecht-badge-background-color;
1177
1199
  $utrecht-skip-link-focus-color: $nl-skip-link-focus-visible-color;
1178
1200
  $utrecht-skip-link-focus-background-color: $nl-skip-link-focus-visible-background-color;
1179
1201
  $utrecht-skip-link-padding-inline-end: $nl-skip-link-padding-inline;
@@ -1200,8 +1222,22 @@ $utrecht-feedback-safe-fill-background-color: $utrecht-feedback-safe-background-
1200
1222
  $utrecht-feedback-warning-fill-background-color: $utrecht-feedback-warning-background-color;
1201
1223
  $utrecht-feedback-danger-fill-background-color: $utrecht-feedback-danger-background-color;
1202
1224
  $utrecht-checkbox-invalid-border-color: $utrecht-form-control-invalid-border-color;
1225
+ $utrecht-status-badge-warning-border-color: $utrecht-feedback-warning-fill-background-color;
1226
+ $utrecht-status-badge-warning-background-color: $utrecht-feedback-warning-fill-background-color;
1227
+ $utrecht-status-badge-safe-border-color: $utrecht-feedback-safe-fill-background-color;
1228
+ $utrecht-status-badge-safe-background-color: $utrecht-feedback-safe-fill-background-color;
1229
+ $utrecht-status-badge-danger-border-color: $utrecht-feedback-danger-fill-background-color;
1230
+ $utrecht-status-badge-danger-background-color: $utrecht-feedback-danger-fill-background-color;
1203
1231
  $utrecht-feedback-active-fill-background-color: $utrecht-feedback-active-background-color;
1204
1232
  $utrecht-feedback-inactive-fill-background-color: $utrecht-feedback-inactive-background-color;
1205
1233
  $utrecht-feedback-success-fill-background-color: $utrecht-feedback-success-background-color;
1206
1234
  $utrecht-feedback-error-fill-background-color: $utrecht-feedback-error-background-color;
1207
1235
  $utrecht-feedback-valid-fill-background-color: $utrecht-feedback-valid-background-color;
1236
+ $utrecht-status-badge-valid-border-color: $utrecht-feedback-valid-fill-background-color;
1237
+ $utrecht-status-badge-valid-background-color: $utrecht-feedback-valid-fill-background-color;
1238
+ $utrecht-status-badge-inactive-border-color: $utrecht-feedback-inactive-fill-background-color;
1239
+ $utrecht-status-badge-inactive-background-color: $utrecht-feedback-inactive-fill-background-color;
1240
+ $utrecht-status-badge-error-border-color: $utrecht-feedback-error-fill-background-color;
1241
+ $utrecht-status-badge-error-background-color: $utrecht-feedback-error-fill-background-color;
1242
+ $utrecht-status-badge-active-border-color: $utrecht-feedback-active-fill-background-color;
1243
+ $utrecht-status-badge-active-background-color: $utrecht-feedback-active-fill-background-color;
package/dist/dark/_mixin-theme.scss 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/_mixin.scss 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
  }