@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/property.css CHANGED
@@ -562,13 +562,16 @@
562
562
  @property --utrecht-navigation-item-mobile-border-block-start-color { syntax: '<color>'; inherits: true; }
563
563
  @property --utrecht-navigation-item-mobile-border-block-start-width { syntax: '<length>'; inherits: true; }
564
564
  @property --utrecht-navigation-link-active-color { syntax: '<color>'; inherits: true; }
565
- @property --utrecht-navigation-link-active-focus-color { syntax: '<color>'; inherits: true; }
566
565
  @property --utrecht-navigation-link-background-color { syntax: '<color>'; inherits: true; }
567
566
  @property --utrecht-navigation-link-border-color { syntax: '<color>'; inherits: true; }
568
567
  @property --utrecht-navigation-link-border-inline-end-width { syntax: '<length>'; inherits: true; }
569
568
  @property --utrecht-navigation-link-color { syntax: '<color>'; inherits: true; }
569
+ @property --utrecht-navigation-link-focus-background-color { syntax: '<color>'; inherits: true; }
570
570
  @property --utrecht-navigation-link-focus-color { syntax: '<color>'; inherits: true; }
571
571
  @property --utrecht-navigation-link-focus-text-decoration-thickness { syntax: '<length>'; inherits: true; }
572
+ @property --utrecht-navigation-link-focus-visible-background-color { syntax: '<color>'; inherits: true; }
573
+ @property --utrecht-navigation-link-focus-visible-color { syntax: '<color>'; inherits: true; }
574
+ @property --utrecht-navigation-link-focus-visible-text-decoration-thickness { syntax: '<length>'; inherits: true; }
572
575
  @property --utrecht-navigation-link-font-weight { syntax: '<number>'; inherits: true; }
573
576
  @property --utrecht-navigation-link-gap { syntax: '<length>'; inherits: true; }
574
577
  @property --utrecht-navigation-link-hover-background-color { syntax: '<color>'; inherits: true; }
package/dist/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;
@@ -487,6 +489,7 @@
487
489
  --utrecht-table-caption-font-size: var(--utrecht-typography-scale-lg-font-size);
488
490
  --utrecht-surface-color: var(--utrecht-color-grey-10);
489
491
  --utrecht-surface-background-color: var(--utrecht-color-grey-95);
492
+ --utrecht-status-badge-font-family: var(--utrecht-typography-sans-serif-font-family);
490
493
  --utrecht-spotlight-section-warning-background-color: var(--utrecht-color-yellow-80);
491
494
  --utrecht-spotlight-section-padding-inline-start: var(--utrecht-space-inline-md);
492
495
  --utrecht-spotlight-section-padding-inline-end: var(--utrecht-space-inline-md);
@@ -593,21 +596,25 @@
593
596
  --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
594
597
  --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
595
598
  --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
596
- --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
599
+ --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
597
600
  --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
598
601
  --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
602
+ --utrecht-navigation-link-mobile-focus-color: var(--utrecht-color-blue-35);
603
+ --utrecht-navigation-link-mobile-focus-background-color: var(--utrecht-color-white);
599
604
  --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
600
605
  --utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
606
+ --utrecht-navigation-link-mobile-active-color: var(--utrecht-color-blue-35);
601
607
  --utrecht-navigation-link-is-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
602
608
  --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
603
609
  --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
604
610
  --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
605
- --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
606
- --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
611
+ --utrecht-navigation-link-focus-visible-color: var(--utrecht-color-black);
612
+ --utrecht-navigation-link-focus-visible-background-color: var(--utrecht-color-yellow-80);
613
+ --utrecht-navigation-link-focus-color: var(--utrecht-color-white);
614
+ --utrecht-navigation-link-focus-background-color: var(--utrecht-color-black);
607
615
  --utrecht-navigation-link-color: var(--utrecht-color-white);
608
616
  --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
609
617
  --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
610
- --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
611
618
  --utrecht-navigation-link-active-color: var(--utrecht-color-white);
612
619
  --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
613
620
  --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
@@ -1073,6 +1080,15 @@
1073
1080
  --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
1074
1081
  --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
1075
1082
  --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
1083
+ --utrecht-status-badge-warning-color: var(--utrecht-feedback-warning-fill-color);
1084
+ --utrecht-status-badge-valid-color: var(--utrecht-feedback-valid-fill-color);
1085
+ --utrecht-status-badge-safe-color: var(--utrecht-feedback-safe-fill-color);
1086
+ --utrecht-status-badge-invalid-color: var(--utrecht-feedback-invalid-fill-color);
1087
+ --utrecht-status-badge-inactive-color: var(--utrecht-feedback-inactive-fill-color);
1088
+ --utrecht-status-badge-error-color: var(--utrecht-feedback-error-fill-color);
1089
+ --utrecht-status-badge-danger-color: var(--utrecht-feedback-danger-fill-color);
1090
+ --utrecht-status-badge-border-radius: var(--utrecht-badge-border-radius);
1091
+ --utrecht-status-badge-active-color: var(--utrecht-feedback-active-fill-color);
1076
1092
  --utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
1077
1093
  --utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
1078
1094
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
@@ -1175,6 +1191,12 @@
1175
1191
  --nl-paragraph-lead-color: var(--utrecht-document-color);
1176
1192
  --nl-number-badge-border-radius: var(--nl-number-badge-font-size);
1177
1193
  --denhaag-process-steps-sub-step-line-color: var(--denhaag-process-steps-step-line-color);
1194
+ --utrecht-status-badge-padding-inline: var(--utrecht-badge-padding-inline);
1195
+ --utrecht-status-badge-padding-block: var(--utrecht-badge-padding-block);
1196
+ --utrecht-status-badge-invalid-border-color: var(--utrecht-feedback-invalid-fill-background-color);
1197
+ --utrecht-status-badge-invalid-background-color: var(--utrecht-feedback-invalid-fill-background-color);
1198
+ --utrecht-status-badge-color: var(--utrecht-badge-color);
1199
+ --utrecht-status-badge-background-color: var(--utrecht-badge-background-color);
1178
1200
  --utrecht-skip-link-padding-inline-start: var(--nl-skip-link-padding-inline);
1179
1201
  --utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
1180
1202
  --utrecht-skip-link-padding-block-start: var(--nl-skip-link-padding-block);
@@ -1202,9 +1224,23 @@
1202
1224
  --utrecht-feedback-active-background-color: var(--utrecht-feedback-safe-background-color);
1203
1225
  --utrecht-checkbox-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
1204
1226
  --of-layout-bg: var(--of-layout-background);
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-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
1206
1234
  --utrecht-feedback-success-fill-background-color: var(--utrecht-feedback-success-background-color);
1207
1235
  --utrecht-feedback-inactive-fill-background-color: var(--utrecht-feedback-inactive-background-color);
1208
1236
  --utrecht-feedback-error-fill-background-color: var(--utrecht-feedback-error-background-color);
1209
1237
  --utrecht-feedback-active-fill-background-color: var(--utrecht-feedback-active-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/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;
@@ -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/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;
@@ -487,6 +489,7 @@
487
489
  --utrecht-table-caption-font-size: var(--utrecht-typography-scale-lg-font-size);
488
490
  --utrecht-surface-color: var(--utrecht-color-grey-10);
489
491
  --utrecht-surface-background-color: var(--utrecht-color-grey-95);
492
+ --utrecht-status-badge-font-family: var(--utrecht-typography-sans-serif-font-family);
490
493
  --utrecht-spotlight-section-warning-background-color: var(--utrecht-color-yellow-80);
491
494
  --utrecht-spotlight-section-padding-inline-start: var(--utrecht-space-inline-md);
492
495
  --utrecht-spotlight-section-padding-inline-end: var(--utrecht-space-inline-md);
@@ -593,21 +596,25 @@
593
596
  --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
594
597
  --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
595
598
  --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
596
- --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
599
+ --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
597
600
  --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
598
601
  --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
602
+ --utrecht-navigation-link-mobile-focus-color: var(--utrecht-color-blue-35);
603
+ --utrecht-navigation-link-mobile-focus-background-color: var(--utrecht-color-white);
599
604
  --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
600
605
  --utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
606
+ --utrecht-navigation-link-mobile-active-color: var(--utrecht-color-blue-35);
601
607
  --utrecht-navigation-link-is-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
602
608
  --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
603
609
  --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
604
610
  --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
605
- --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
606
- --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
611
+ --utrecht-navigation-link-focus-visible-color: var(--utrecht-color-black);
612
+ --utrecht-navigation-link-focus-visible-background-color: var(--utrecht-color-yellow-80);
613
+ --utrecht-navigation-link-focus-color: var(--utrecht-color-white);
614
+ --utrecht-navigation-link-focus-background-color: var(--utrecht-color-black);
607
615
  --utrecht-navigation-link-color: var(--utrecht-color-white);
608
616
  --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
609
617
  --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
610
- --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
611
618
  --utrecht-navigation-link-active-color: var(--utrecht-color-white);
612
619
  --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
613
620
  --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
@@ -1073,6 +1080,15 @@
1073
1080
  --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
1074
1081
  --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
1075
1082
  --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
1083
+ --utrecht-status-badge-warning-color: var(--utrecht-feedback-warning-fill-color);
1084
+ --utrecht-status-badge-valid-color: var(--utrecht-feedback-valid-fill-color);
1085
+ --utrecht-status-badge-safe-color: var(--utrecht-feedback-safe-fill-color);
1086
+ --utrecht-status-badge-invalid-color: var(--utrecht-feedback-invalid-fill-color);
1087
+ --utrecht-status-badge-inactive-color: var(--utrecht-feedback-inactive-fill-color);
1088
+ --utrecht-status-badge-error-color: var(--utrecht-feedback-error-fill-color);
1089
+ --utrecht-status-badge-danger-color: var(--utrecht-feedback-danger-fill-color);
1090
+ --utrecht-status-badge-border-radius: var(--utrecht-badge-border-radius);
1091
+ --utrecht-status-badge-active-color: var(--utrecht-feedback-active-fill-color);
1076
1092
  --utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
1077
1093
  --utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
1078
1094
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
@@ -1175,6 +1191,12 @@
1175
1191
  --nl-paragraph-lead-color: var(--utrecht-document-color);
1176
1192
  --nl-number-badge-border-radius: var(--nl-number-badge-font-size);
1177
1193
  --denhaag-process-steps-sub-step-line-color: var(--denhaag-process-steps-step-line-color);
1194
+ --utrecht-status-badge-padding-inline: var(--utrecht-badge-padding-inline);
1195
+ --utrecht-status-badge-padding-block: var(--utrecht-badge-padding-block);
1196
+ --utrecht-status-badge-invalid-border-color: var(--utrecht-feedback-invalid-fill-background-color);
1197
+ --utrecht-status-badge-invalid-background-color: var(--utrecht-feedback-invalid-fill-background-color);
1198
+ --utrecht-status-badge-color: var(--utrecht-badge-color);
1199
+ --utrecht-status-badge-background-color: var(--utrecht-badge-background-color);
1178
1200
  --utrecht-skip-link-padding-inline-start: var(--nl-skip-link-padding-inline);
1179
1201
  --utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
1180
1202
  --utrecht-skip-link-padding-block-start: var(--nl-skip-link-padding-block);
@@ -1202,9 +1224,23 @@
1202
1224
  --utrecht-feedback-active-background-color: var(--utrecht-feedback-safe-background-color);
1203
1225
  --utrecht-checkbox-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
1204
1226
  --of-layout-bg: var(--of-layout-background);
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-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
1206
1234
  --utrecht-feedback-success-fill-background-color: var(--utrecht-feedback-success-background-color);
1207
1235
  --utrecht-feedback-inactive-fill-background-color: var(--utrecht-feedback-inactive-background-color);
1208
1236
  --utrecht-feedback-error-fill-background-color: var(--utrecht-feedback-error-background-color);
1209
1237
  --utrecht-feedback-active-fill-background-color: var(--utrecht-feedback-active-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
  }