@utrecht/design-tokens 4.2.0 → 5.0.0

package/dist/index.css

@@ -147,6 +147,7 @@
   --utrecht-table-caption-margin-block-end: 1em;
   --utrecht-table-caption-text-align: start;
   --utrecht-table-margin-block-end: 0;
+  --utrecht-status-badge-border-width: 0px;
   --utrecht-separator-block-size: 8px;
   --utrecht-select-border-block-end-width: 3px;
   --utrecht-search-bar-dropdown-max-block-size: 300px;
@@ -230,6 +231,7 @@
   --utrecht-navigation-link-mobile-min-block-size: 44px;
   --utrecht-navigation-link-hover-decoration-thickness: 3px;
   --utrecht-navigation-link-gap: 8px;
+  --utrecht-navigation-link-focus-visible-text-decoration-thickness: 3px;
   --utrecht-navigation-link-focus-text-decoration-thickness: 3px;
   --utrecht-navigation-link-border-inline-end-width: 1px;
   --utrecht-navigation-item-mobile-border-block-start-width: 1px;
@@ -594,6 +596,7 @@
   --utrecht-table-margin-block-start: var(--utrecht-space-block-md);
   --utrecht-surface-color: var(--utrecht-color-grey-10);
   --utrecht-surface-background-color: var(--utrecht-color-grey-95);
+  --utrecht-status-badge-font-family: var(--utrecht-typography-sans-serif-font-family);
   --utrecht-spotlight-section-ok-background-color: var(--utrecht-color-green-90);
   --utrecht-spotlight-section-error-background-color: var(--utrecht-color-red-95);
   --utrecht-spotlight-section-warning-background-color: var(--utrecht-color-yellow-80);
@@ -688,10 +691,13 @@
   --utrecht-navigation-list-mobile-background-color: var(--utrecht-color-white);
   --utrecht-navigation-link-padding-block-start: var(--utrecht-space-block-md);
   --utrecht-navigation-link-padding-block-end: var(--utrecht-space-block-md);
+  --utrecht-navigation-link-mobile-focus-color: var(--utrecht-color-blue-35);
+  --utrecht-navigation-link-mobile-focus-background-color: var(--utrecht-color-white);
+  --utrecht-navigation-link-mobile-active-color: var(--utrecht-color-blue-35);
   --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
   --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
   --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
-  --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+  --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
   --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
   --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
   --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
@@ -700,12 +706,13 @@
   --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
   --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
   --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
-  --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
-  --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
+  --utrecht-navigation-link-focus-visible-background-color: var(--utrecht-color-yellow-80);
+  --utrecht-navigation-link-focus-visible-color: var(--utrecht-color-black);
+  --utrecht-navigation-link-focus-background-color: var(--utrecht-color-black);
+  --utrecht-navigation-link-focus-color: var(--utrecht-color-white);
   --utrecht-navigation-link-color: var(--utrecht-color-white);
   --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
   --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
-  --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
   --utrecht-navigation-link-active-color: var(--utrecht-color-white);
   --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
   --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
@@ -1115,6 +1122,15 @@
   --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
   --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
   --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
+  --utrecht-status-badge-warning-color: var(--utrecht-feedback-warning-fill-color);
+  --utrecht-status-badge-valid-color: var(--utrecht-feedback-valid-fill-color);
+  --utrecht-status-badge-safe-color: var(--utrecht-feedback-safe-fill-color);
+  --utrecht-status-badge-invalid-color: var(--utrecht-feedback-invalid-fill-color);
+  --utrecht-status-badge-inactive-color: var(--utrecht-feedback-inactive-fill-color);
+  --utrecht-status-badge-error-color: var(--utrecht-feedback-error-fill-color);
+  --utrecht-status-badge-danger-color: var(--utrecht-feedback-danger-fill-color);
+  --utrecht-status-badge-active-color: var(--utrecht-feedback-active-fill-color);
+  --utrecht-status-badge-border-radius: var(--utrecht-badge-border-radius);
   --utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
   --utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
   --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
@@ -1203,6 +1219,12 @@
   --utrecht-badge-background-color: var(--nl-data-badge-background-color); /* Default background color for badge components */
   --utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /* Default corner radius for badge components */
   --of-layout-bg: var(--of-layout-background);
+  --utrecht-status-badge-invalid-border-color: var(--utrecht-feedback-invalid-fill-background-color);
+  --utrecht-status-badge-invalid-background-color: var(--utrecht-feedback-invalid-fill-background-color);
+  --utrecht-status-badge-padding-inline: var(--utrecht-badge-padding-inline);
+  --utrecht-status-badge-padding-block: var(--utrecht-badge-padding-block);
+  --utrecht-status-badge-color: var(--utrecht-badge-color);
+  --utrecht-status-badge-background-color: var(--utrecht-badge-background-color);
   --utrecht-skip-link-focus-color: var(--nl-skip-link-focus-visible-color);
   --utrecht-skip-link-focus-background-color: var(--nl-skip-link-focus-visible-background-color);
   --utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
@@ -1229,11 +1251,25 @@
   --utrecht-feedback-warning-fill-background-color: var(--utrecht-feedback-warning-background-color);
   --utrecht-feedback-danger-fill-background-color: var(--utrecht-feedback-danger-background-color);
   --utrecht-checkbox-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
+  --utrecht-status-badge-warning-border-color: var(--utrecht-feedback-warning-fill-background-color);
+  --utrecht-status-badge-warning-background-color: var(--utrecht-feedback-warning-fill-background-color);
+  --utrecht-status-badge-safe-border-color: var(--utrecht-feedback-safe-fill-background-color);
+  --utrecht-status-badge-safe-background-color: var(--utrecht-feedback-safe-fill-background-color);
+  --utrecht-status-badge-danger-border-color: var(--utrecht-feedback-danger-fill-background-color);
+  --utrecht-status-badge-danger-background-color: var(--utrecht-feedback-danger-fill-background-color);
   --utrecht-feedback-active-fill-background-color: var(--utrecht-feedback-active-background-color);
   --utrecht-feedback-inactive-fill-background-color: var(--utrecht-feedback-inactive-background-color);
   --utrecht-feedback-success-fill-background-color: var(--utrecht-feedback-success-background-color);
   --utrecht-feedback-error-fill-background-color: var(--utrecht-feedback-error-background-color);
   --utrecht-feedback-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
+  --utrecht-status-badge-valid-border-color: var(--utrecht-feedback-valid-fill-background-color);
+  --utrecht-status-badge-valid-background-color: var(--utrecht-feedback-valid-fill-background-color);
+  --utrecht-status-badge-inactive-border-color: var(--utrecht-feedback-inactive-fill-background-color);
+  --utrecht-status-badge-inactive-background-color: var(--utrecht-feedback-inactive-fill-background-color);
+  --utrecht-status-badge-error-border-color: var(--utrecht-feedback-error-fill-background-color);
+  --utrecht-status-badge-error-background-color: var(--utrecht-feedback-error-fill-background-color);
+  --utrecht-status-badge-active-border-color: var(--utrecht-feedback-active-fill-background-color);
+  --utrecht-status-badge-active-background-color: var(--utrecht-feedback-active-fill-background-color);
 }
 .utrecht-theme utrecht-page-footer,
 .utrecht-theme .utrecht-page-footer {
@@ -1364,6 +1400,7 @@
     --utrecht-table-caption-margin-block-end: 1em;
     --utrecht-table-caption-text-align: start;
     --utrecht-table-margin-block-end: 0;
+    --utrecht-status-badge-border-width: 0px;
     --utrecht-separator-block-size: 8px;
     --utrecht-select-border-block-end-width: 3px;
     --utrecht-search-bar-dropdown-max-block-size: 300px;
@@ -1447,6 +1484,7 @@
     --utrecht-navigation-link-mobile-min-block-size: 44px;
     --utrecht-navigation-link-hover-decoration-thickness: 3px;
     --utrecht-navigation-link-gap: 8px;
+    --utrecht-navigation-link-focus-visible-text-decoration-thickness: 3px;
     --utrecht-navigation-link-focus-text-decoration-thickness: 3px;
     --utrecht-navigation-link-border-inline-end-width: 1px;
     --utrecht-navigation-item-mobile-border-block-start-width: 1px;
@@ -1813,6 +1851,7 @@
     --utrecht-table-margin-block-start: var(--utrecht-space-block-md);
     --utrecht-surface-color: var(--utrecht-color-grey-95);
     --utrecht-surface-background-color: var(--utrecht-color-grey-15);
+    --utrecht-status-badge-font-family: var(--utrecht-typography-sans-serif-font-family);
     --utrecht-spotlight-section-ok-background-color: var(--utrecht-color-green-90);
     --utrecht-spotlight-section-error-background-color: var(--utrecht-color-red-95);
     --utrecht-spotlight-section-warning-color: var(--utrecht-color-grey-15);
@@ -1909,10 +1948,13 @@
     --utrecht-navigation-list-mobile-background-color: var(--utrecht-color-white);
     --utrecht-navigation-link-padding-block-start: var(--utrecht-space-block-md);
     --utrecht-navigation-link-padding-block-end: var(--utrecht-space-block-md);
+    --utrecht-navigation-link-mobile-focus-color: var(--utrecht-color-blue-35);
+    --utrecht-navigation-link-mobile-focus-background-color: var(--utrecht-color-white);
+    --utrecht-navigation-link-mobile-active-color: var(--utrecht-color-blue-35);
     --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
     --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
     --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
-    --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+    --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
     --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
     --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
     --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
@@ -1921,12 +1963,13 @@
     --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
     --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
     --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
-    --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
-    --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
+    --utrecht-navigation-link-focus-visible-background-color: var(--utrecht-color-yellow-80);
+    --utrecht-navigation-link-focus-visible-color: var(--utrecht-color-black);
+    --utrecht-navigation-link-focus-background-color: var(--utrecht-color-black);
+    --utrecht-navigation-link-focus-color: var(--utrecht-color-white);
     --utrecht-navigation-link-color: var(--utrecht-color-white);
     --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
     --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
-    --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
     --utrecht-navigation-link-active-color: var(--utrecht-color-white);
     --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
     --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
@@ -2333,6 +2376,15 @@
     --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
     --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
     --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
+    --utrecht-status-badge-warning-color: var(--utrecht-feedback-warning-fill-color);
+    --utrecht-status-badge-valid-color: var(--utrecht-feedback-valid-fill-color);
+    --utrecht-status-badge-safe-color: var(--utrecht-feedback-safe-fill-color);
+    --utrecht-status-badge-invalid-color: var(--utrecht-feedback-invalid-fill-color);
+    --utrecht-status-badge-inactive-color: var(--utrecht-feedback-inactive-fill-color);
+    --utrecht-status-badge-error-color: var(--utrecht-feedback-error-fill-color);
+    --utrecht-status-badge-danger-color: var(--utrecht-feedback-danger-fill-color);
+    --utrecht-status-badge-active-color: var(--utrecht-feedback-active-fill-color);
+    --utrecht-status-badge-border-radius: var(--utrecht-badge-border-radius);
     --utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
     --utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
     --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
@@ -2431,6 +2483,12 @@
     --utrecht-badge-background-color: var(--nl-data-badge-background-color); /* Default background color for badge components */
     --utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /* Default corner radius for badge components */
     --of-layout-bg: var(--of-layout-background);
+    --utrecht-status-badge-invalid-border-color: var(--utrecht-feedback-invalid-fill-background-color);
+    --utrecht-status-badge-invalid-background-color: var(--utrecht-feedback-invalid-fill-background-color);
+    --utrecht-status-badge-padding-inline: var(--utrecht-badge-padding-inline);
+    --utrecht-status-badge-padding-block: var(--utrecht-badge-padding-block);
+    --utrecht-status-badge-color: var(--utrecht-badge-color);
+    --utrecht-status-badge-background-color: var(--utrecht-badge-background-color);
     --utrecht-skip-link-focus-color: var(--nl-skip-link-focus-visible-color);
     --utrecht-skip-link-focus-background-color: var(--nl-skip-link-focus-visible-background-color);
     --utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
@@ -2457,11 +2515,25 @@
     --utrecht-feedback-warning-fill-background-color: var(--utrecht-feedback-warning-background-color);
     --utrecht-feedback-danger-fill-background-color: var(--utrecht-feedback-danger-background-color);
     --utrecht-checkbox-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
+    --utrecht-status-badge-warning-border-color: var(--utrecht-feedback-warning-fill-background-color);
+    --utrecht-status-badge-warning-background-color: var(--utrecht-feedback-warning-fill-background-color);
+    --utrecht-status-badge-safe-border-color: var(--utrecht-feedback-safe-fill-background-color);
+    --utrecht-status-badge-safe-background-color: var(--utrecht-feedback-safe-fill-background-color);
+    --utrecht-status-badge-danger-border-color: var(--utrecht-feedback-danger-fill-background-color);
+    --utrecht-status-badge-danger-background-color: var(--utrecht-feedback-danger-fill-background-color);
     --utrecht-feedback-active-fill-background-color: var(--utrecht-feedback-active-background-color);
     --utrecht-feedback-inactive-fill-background-color: var(--utrecht-feedback-inactive-background-color);
     --utrecht-feedback-success-fill-background-color: var(--utrecht-feedback-success-background-color);
     --utrecht-feedback-error-fill-background-color: var(--utrecht-feedback-error-background-color);
     --utrecht-feedback-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
+    --utrecht-status-badge-valid-border-color: var(--utrecht-feedback-valid-fill-background-color);
+    --utrecht-status-badge-valid-background-color: var(--utrecht-feedback-valid-fill-background-color);
+    --utrecht-status-badge-inactive-border-color: var(--utrecht-feedback-inactive-fill-background-color);
+    --utrecht-status-badge-inactive-background-color: var(--utrecht-feedback-inactive-fill-background-color);
+    --utrecht-status-badge-error-border-color: var(--utrecht-feedback-error-fill-background-color);
+    --utrecht-status-badge-error-background-color: var(--utrecht-feedback-error-fill-background-color);
+    --utrecht-status-badge-active-border-color: var(--utrecht-feedback-active-fill-background-color);
+    --utrecht-status-badge-active-background-color: var(--utrecht-feedback-active-fill-background-color);
   }
 }
 .utrecht-theme--viewport-scale {

package/dist/index.d.ts

@@ -785,14 +785,16 @@ export const utrechtNavigationItemMobileBorderBlockEndWidth : string;
 export const utrechtNavigationItemMobileBorderBlockStartColor : string;
 export const utrechtNavigationItemMobileBorderBlockStartWidth : string;
 export const utrechtNavigationLinkActiveColor : string;
-export const utrechtNavigationLinkActiveFocusColor : string;
 export const utrechtNavigationLinkBackgroundColor : string;
 export const utrechtNavigationLinkBorderColor : string;
 export const utrechtNavigationLinkBorderInlineEndWidth : string;
 export const utrechtNavigationLinkColor : string;
 export const utrechtNavigationLinkFocusColor : string;
-export const utrechtNavigationLinkFocusTextDecorationThickness : string;
 export const utrechtNavigationLinkFocusBackgroundColor : string;
+export const utrechtNavigationLinkFocusTextDecorationThickness : string;
+export const utrechtNavigationLinkFocusVisibleColor : string;
+export const utrechtNavigationLinkFocusVisibleBackgroundColor : string;
+export const utrechtNavigationLinkFocusVisibleTextDecorationThickness : string;
 export const utrechtNavigationLinkFontWeight : string;
 export const utrechtNavigationLinkGap : string;
 export const utrechtNavigationLinkHoverBackgroundColor : string;
@@ -810,6 +812,9 @@ export const utrechtNavigationLinkMobilePaddingBlockStart : string;
 export const utrechtNavigationLinkMobilePaddingInlineStart : string;
 export const utrechtNavigationLinkMobileTransitionDuration : string;
 export const utrechtNavigationLinkMobileTransitionTimingFunction : string;
+export const utrechtNavigationLinkMobileActiveColor : string;
+export const utrechtNavigationLinkMobileFocusBackgroundColor : string;
+export const utrechtNavigationLinkMobileFocusColor : string;
 export const utrechtNavigationLinkPaddingBlockEnd : string;
 export const utrechtNavigationLinkPaddingBlockStart : string;
 export const utrechtNavigationListMobileBackgroundColor : string;
@@ -1009,6 +1014,37 @@ export const utrechtSpotlightSectionInfoBackgroundColor : string;
 export const utrechtSpotlightSectionWarningBackgroundColor : string;
 export const utrechtSpotlightSectionErrorBackgroundColor : string;
 export const utrechtSpotlightSectionOkBackgroundColor : string;
+export const utrechtStatusBadgeBackgroundColor : string;
+export const utrechtStatusBadgeBorderRadius : string;
+export const utrechtStatusBadgeBorderWidth : string;
+export const utrechtStatusBadgeColor : string;
+export const utrechtStatusBadgeFontFamily : string;
+export const utrechtStatusBadgePaddingBlock : string;
+export const utrechtStatusBadgePaddingInline : string;
+export const utrechtStatusBadgeActiveBackgroundColor : string;
+export const utrechtStatusBadgeActiveBorderColor : string;
+export const utrechtStatusBadgeActiveColor : string;
+export const utrechtStatusBadgeDangerBackgroundColor : string;
+export const utrechtStatusBadgeDangerBorderColor : string;
+export const utrechtStatusBadgeDangerColor : string;
+export const utrechtStatusBadgeErrorBackgroundColor : string;
+export const utrechtStatusBadgeErrorBorderColor : string;
+export const utrechtStatusBadgeErrorColor : string;
+export const utrechtStatusBadgeInactiveBackgroundColor : string;
+export const utrechtStatusBadgeInactiveBorderColor : string;
+export const utrechtStatusBadgeInactiveColor : string;
+export const utrechtStatusBadgeInvalidBackgroundColor : string;
+export const utrechtStatusBadgeInvalidBorderColor : string;
+export const utrechtStatusBadgeInvalidColor : string;
+export const utrechtStatusBadgeSafeBackgroundColor : string;
+export const utrechtStatusBadgeSafeBorderColor : string;
+export const utrechtStatusBadgeSafeColor : string;
+export const utrechtStatusBadgeValidBackgroundColor : string;
+export const utrechtStatusBadgeValidBorderColor : string;
+export const utrechtStatusBadgeValidColor : string;
+export const utrechtStatusBadgeWarningBackgroundColor : string;
+export const utrechtStatusBadgeWarningBorderColor : string;
+export const utrechtStatusBadgeWarningColor : string;
 export const utrechtSurfaceBackgroundColor : string;
 export const utrechtSurfaceColor : string;
 export const utrechtTableMarginBlockEnd : string;

package/dist/index.flat.json

@@ -822,25 +822,30 @@
   "utrechtNavigationItemMobileBorderBlockStartColor": "hsl(0 0% 80%)",
   "utrechtNavigationItemMobileBorderBlockStartWidth": "1px",
   "utrechtNavigationLinkActiveColor": "hsl(0 0% 100%)",
-  "utrechtNavigationLinkActiveFocusColor": "hsl(0 0% 0%)",
   "utrechtNavigationLinkBackgroundColor": "hsl(0 0% 15%)",
   "utrechtNavigationLinkBorderColor": "hsl(0 0% 40%)",
   "utrechtNavigationLinkBorderInlineEndWidth": "1px",
   "utrechtNavigationLinkColor": "hsl(0 0% 100%)",
-  "utrechtNavigationLinkFocusBackgroundColor": "hsl(48 100% 80%)",
-  "utrechtNavigationLinkFocusColor": "hsl(0 0% 0%)",
+  "utrechtNavigationLinkFocusBackgroundColor": "hsl(0 0% 0%)",
+  "utrechtNavigationLinkFocusColor": "hsl(0 0% 100%)",
   "utrechtNavigationLinkFocusTextDecorationThickness": "3px",
+  "utrechtNavigationLinkFocusVisibleBackgroundColor": "hsl(48 100% 80%)",
+  "utrechtNavigationLinkFocusVisibleColor": "hsl(0 0% 0%)",
+  "utrechtNavigationLinkFocusVisibleTextDecorationThickness": "3px",
   "utrechtNavigationLinkFontWeight": "400",
   "utrechtNavigationLinkGap": "8px",
   "utrechtNavigationLinkHoverBackgroundColor": "hsl(0 0% 0%)",
   "utrechtNavigationLinkHoverColor": "hsl(0 0% 100%)",
   "utrechtNavigationLinkHoverDecorationThickness": "3px",
   "utrechtNavigationLinkIsCurrentFontWeight": "700",
+  "utrechtNavigationLinkMobileActiveColor": "hsl(211 60% 35%)",
   "utrechtNavigationLinkMobileBackgroundColor": "hsl(0 0% 100%)",
   "utrechtNavigationLinkMobileColor": "hsl(211 60% 35%)",
+  "utrechtNavigationLinkMobileFocusBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtNavigationLinkMobileFocusColor": "hsl(211 60% 35%)",
   "utrechtNavigationLinkMobileHoverBackgroundColor": "hsl(0 0% 100%)",
   "utrechtNavigationLinkMobileHoverColor": "hsl(211 60% 35%)",
-  "utrechtNavigationLinkMobileHoverFontWeight": "700",
+  "utrechtNavigationLinkMobileHoverFontWeight": "400",
   "utrechtNavigationLinkMobileMinBlockSize": "44px",
   "utrechtNavigationLinkMobilePaddingBlockEnd": "8px",
   "utrechtNavigationLinkMobilePaddingBlockStart": "8px",
@@ -1108,6 +1113,37 @@
   "utrechtSpotlightSectionPaddingInlineStart": "16px",
   "utrechtSpotlightSectionWarningBackgroundColor": "hsl(48 100% 80%)",
   "utrechtStackFocusZIndex": 1,
+  "utrechtStatusBadgeActiveBackgroundColor": "hsl(90 30% 50%)",
+  "utrechtStatusBadgeActiveBorderColor": "hsl(90 30% 50%)",
+  "utrechtStatusBadgeActiveColor": "hsl(0 0% 100%)",
+  "utrechtStatusBadgeBackgroundColor": "hsl(0 0% 30%)",
+  "utrechtStatusBadgeBorderRadius": "0",
+  "utrechtStatusBadgeBorderWidth": "0px",
+  "utrechtStatusBadgeColor": "hsl(0 0% 100%)",
+  "utrechtStatusBadgeDangerBackgroundColor": "hsl(0 100% 40%)",
+  "utrechtStatusBadgeDangerBorderColor": "hsl(0 100% 40%)",
+  "utrechtStatusBadgeDangerColor": "hsl(0 0% 100%)",
+  "utrechtStatusBadgeErrorBackgroundColor": "hsl(0 100% 40%)",
+  "utrechtStatusBadgeErrorBorderColor": "hsl(0 100% 40%)",
+  "utrechtStatusBadgeErrorColor": "hsl(0 0% 100%)",
+  "utrechtStatusBadgeFontFamily": "\"Noto Sans Variable\", \"Arial\", sans-serif",
+  "utrechtStatusBadgeInactiveBackgroundColor": "hsl(0 100% 40%)",
+  "utrechtStatusBadgeInactiveBorderColor": "hsl(0 100% 40%)",
+  "utrechtStatusBadgeInactiveColor": "hsl(0 0% 100%)",
+  "utrechtStatusBadgeInvalidBackgroundColor": "#990000",
+  "utrechtStatusBadgeInvalidBorderColor": "#990000",
+  "utrechtStatusBadgeInvalidColor": "hsl(0 0% 100%)",
+  "utrechtStatusBadgePaddingBlock": "8px",
+  "utrechtStatusBadgePaddingInline": "12px",
+  "utrechtStatusBadgeSafeBackgroundColor": "hsl(90 30% 50%)",
+  "utrechtStatusBadgeSafeBorderColor": "hsl(90 30% 50%)",
+  "utrechtStatusBadgeSafeColor": "hsl(0 0% 100%)",
+  "utrechtStatusBadgeValidBackgroundColor": "hsl(90 30% 50%)",
+  "utrechtStatusBadgeValidBorderColor": "hsl(90 30% 50%)",
+  "utrechtStatusBadgeValidColor": "hsl(0 0% 100%)",
+  "utrechtStatusBadgeWarningBackgroundColor": "hsl(48 100% 50%)",
+  "utrechtStatusBadgeWarningBorderColor": "hsl(48 100% 50%)",
+  "utrechtStatusBadgeWarningColor": "hsl(0 0% 0%)",
   "utrechtSurfaceBackgroundColor": "hsl(0 0% 95%)",
   "utrechtSurfaceColor": "hsl(0 0% 10%)",
   "utrechtTableCaptionFontSize": "1.125rem",