@utrecht/design-tokens 4.2.0 → 5.0.0

package/dist/dark/_variables.scss

@@ -118,6 +118,7 @@ $utrecht-table-header-sticky-border-block-end-width: 2px;
 $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;
@@ -201,6 +202,7 @@ $utrecht-navigation-link-mobile-transition-duration: 300ms;
 $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;
@@ -567,6 +569,7 @@ $utrecht-table-caption-font-weight: $utrecht-typography-weight-scale-bold-font-w
 $utrecht-table-margin-block-start: $utrecht-space-block-md;
 $utrecht-surface-color: $utrecht-color-grey-95;
 $utrecht-surface-background-color: $utrecht-color-grey-15;
+$utrecht-status-badge-font-family: $utrecht-typography-sans-serif-font-family;
 $utrecht-spotlight-section-ok-background-color: $utrecht-color-green-90;
 $utrecht-spotlight-section-error-background-color: $utrecht-color-red-95;
 $utrecht-spotlight-section-warning-color: $utrecht-color-grey-15;
@@ -663,10 +666,13 @@ $utrecht-navigation-list-mobile-padding-block-end: $utrecht-space-block-xs;
 $utrecht-navigation-list-mobile-background-color: $utrecht-color-white;
 $utrecht-navigation-link-padding-block-start: $utrecht-space-block-md;
 $utrecht-navigation-link-padding-block-end: $utrecht-space-block-md;
+$utrecht-navigation-link-mobile-focus-color: $utrecht-color-blue-35;
+$utrecht-navigation-link-mobile-focus-background-color: $utrecht-color-white;
+$utrecht-navigation-link-mobile-active-color: $utrecht-color-blue-35;
 $utrecht-navigation-link-mobile-padding-inline-start: $utrecht-space-inline-md;
 $utrecht-navigation-link-mobile-padding-block-start: $utrecht-space-block-xs;
 $utrecht-navigation-link-mobile-padding-block-end: $utrecht-space-block-xs;
-$utrecht-navigation-link-mobile-hover-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
+$utrecht-navigation-link-mobile-hover-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
 $utrecht-navigation-link-mobile-hover-color: $utrecht-color-blue-35;
 $utrecht-navigation-link-mobile-hover-background-color: $utrecht-color-white;
 $utrecht-navigation-link-mobile-color: $utrecht-color-blue-35;
@@ -675,12 +681,13 @@ $utrecht-navigation-link-is-current-font-weight: $utrecht-typography-weight-scal
 $utrecht-navigation-link-hover-color: $utrecht-color-white;
 $utrecht-navigation-link-hover-background-color: $utrecht-color-black;
 $utrecht-navigation-link-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
-$utrecht-navigation-link-focus-background-color: $utrecht-color-yellow-80;
-$utrecht-navigation-link-focus-color: $utrecht-color-black;
+$utrecht-navigation-link-focus-visible-background-color: $utrecht-color-yellow-80;
+$utrecht-navigation-link-focus-visible-color: $utrecht-color-black;
+$utrecht-navigation-link-focus-background-color: $utrecht-color-black;
+$utrecht-navigation-link-focus-color: $utrecht-color-white;
 $utrecht-navigation-link-color: $utrecht-color-white;
 $utrecht-navigation-link-border-color: $utrecht-color-grey-40;
 $utrecht-navigation-link-background-color: $utrecht-color-grey-15;
-$utrecht-navigation-link-active-focus-color: $utrecht-color-black;
 $utrecht-navigation-link-active-color: $utrecht-color-white;
 $utrecht-navigation-item-mobile-border-block-start-color: $utrecht-color-grey-80;
 $utrecht-navigation-item-mobile-border-block-end-color: $utrecht-color-grey-80;
@@ -1087,6 +1094,15 @@ $utrecht-toptask-link-hover-color: $utrecht-button-primary-action-hover-color;
 $utrecht-toptask-link-hover-background-color: $utrecht-button-primary-action-hover-background-color;
 $utrecht-toptask-link-color: $utrecht-button-primary-action-color;
 $utrecht-toptask-link-background-color: $utrecht-button-primary-action-background-color;
+$utrecht-status-badge-warning-color: $utrecht-feedback-warning-fill-color;
+$utrecht-status-badge-valid-color: $utrecht-feedback-valid-fill-color;
+$utrecht-status-badge-safe-color: $utrecht-feedback-safe-fill-color;
+$utrecht-status-badge-invalid-color: $utrecht-feedback-invalid-fill-color;
+$utrecht-status-badge-inactive-color: $utrecht-feedback-inactive-fill-color;
+$utrecht-status-badge-error-color: $utrecht-feedback-error-fill-color;
+$utrecht-status-badge-danger-color: $utrecht-feedback-danger-fill-color;
+$utrecht-status-badge-active-color: $utrecht-feedback-active-fill-color;
+$utrecht-status-badge-border-radius: $utrecht-badge-border-radius;
 $utrecht-skip-link-focus-visible-text-decoration: $nl-skip-link-focus-visible-text-decoration;
 $utrecht-skip-link-text-decoration: $nl-skip-link-text-decoration;
 $utrecht-radio-button-border-color: $utrecht-form-control-border-color;
@@ -1185,6 +1201,12 @@ $utrecht-badge-color: $nl-data-badge-color; // Default text color for badge comp
 $utrecht-badge-background-color: $nl-data-badge-background-color; // Default background color for badge components
 $utrecht-badge-counter-border-radius: $utrecht-badge-counter-font-size; // Default corner radius for badge components
 $of-layout-bg: $of-layout-background;
+$utrecht-status-badge-invalid-border-color: $utrecht-feedback-invalid-fill-background-color;
+$utrecht-status-badge-invalid-background-color: $utrecht-feedback-invalid-fill-background-color;
+$utrecht-status-badge-padding-inline: $utrecht-badge-padding-inline;
+$utrecht-status-badge-padding-block: $utrecht-badge-padding-block;
+$utrecht-status-badge-color: $utrecht-badge-color;
+$utrecht-status-badge-background-color: $utrecht-badge-background-color;
 $utrecht-skip-link-focus-color: $nl-skip-link-focus-visible-color;
 $utrecht-skip-link-focus-background-color: $nl-skip-link-focus-visible-background-color;
 $utrecht-skip-link-padding-inline-end: $nl-skip-link-padding-inline;
@@ -1211,8 +1233,22 @@ $utrecht-feedback-safe-fill-background-color: $utrecht-feedback-safe-background-
 $utrecht-feedback-warning-fill-background-color: $utrecht-feedback-warning-background-color;
 $utrecht-feedback-danger-fill-background-color: $utrecht-feedback-danger-background-color;
 $utrecht-checkbox-invalid-border-color: $utrecht-form-control-invalid-border-color;
+$utrecht-status-badge-warning-border-color: $utrecht-feedback-warning-fill-background-color;
+$utrecht-status-badge-warning-background-color: $utrecht-feedback-warning-fill-background-color;
+$utrecht-status-badge-safe-border-color: $utrecht-feedback-safe-fill-background-color;
+$utrecht-status-badge-safe-background-color: $utrecht-feedback-safe-fill-background-color;
+$utrecht-status-badge-danger-border-color: $utrecht-feedback-danger-fill-background-color;
+$utrecht-status-badge-danger-background-color: $utrecht-feedback-danger-fill-background-color;
 $utrecht-feedback-active-fill-background-color: $utrecht-feedback-active-background-color;
 $utrecht-feedback-inactive-fill-background-color: $utrecht-feedback-inactive-background-color;
 $utrecht-feedback-success-fill-background-color: $utrecht-feedback-success-background-color;
 $utrecht-feedback-error-fill-background-color: $utrecht-feedback-error-background-color;
 $utrecht-feedback-valid-fill-background-color: $utrecht-feedback-valid-background-color;
+$utrecht-status-badge-valid-border-color: $utrecht-feedback-valid-fill-background-color;
+$utrecht-status-badge-valid-background-color: $utrecht-feedback-valid-fill-background-color;
+$utrecht-status-badge-inactive-border-color: $utrecht-feedback-inactive-fill-background-color;
+$utrecht-status-badge-inactive-background-color: $utrecht-feedback-inactive-fill-background-color;
+$utrecht-status-badge-error-border-color: $utrecht-feedback-error-fill-background-color;
+$utrecht-status-badge-error-background-color: $utrecht-feedback-error-fill-background-color;
+$utrecht-status-badge-active-border-color: $utrecht-feedback-active-fill-background-color;
+$utrecht-status-badge-active-background-color: $utrecht-feedback-active-fill-background-color;

package/dist/dark/index.cjs

@@ -731,14 +731,16 @@ module.exports = {
   "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%)",
-  "utrechtNavigationLinkFocusColor": "hsl(0 0% 0%)",
+  "utrechtNavigationLinkFocusColor": "hsl(0 0% 100%)",
+  "utrechtNavigationLinkFocusBackgroundColor": "hsl(0 0% 0%)",
   "utrechtNavigationLinkFocusTextDecorationThickness": "3px",
-  "utrechtNavigationLinkFocusBackgroundColor": "hsl(48 100% 80%)",
+  "utrechtNavigationLinkFocusVisibleColor": "hsl(0 0% 0%)",
+  "utrechtNavigationLinkFocusVisibleBackgroundColor": "hsl(48 100% 80%)",
+  "utrechtNavigationLinkFocusVisibleTextDecorationThickness": "3px",
   "utrechtNavigationLinkFontWeight": "400",
   "utrechtNavigationLinkGap": "8px",
   "utrechtNavigationLinkHoverBackgroundColor": "hsl(0 0% 0%)",
@@ -749,13 +751,16 @@ module.exports = {
   "utrechtNavigationLinkMobileColor": "hsl(211 60% 35%)",
   "utrechtNavigationLinkMobileHoverBackgroundColor": "hsl(0 0% 100%)",
   "utrechtNavigationLinkMobileHoverColor": "hsl(211 60% 35%)",
-  "utrechtNavigationLinkMobileHoverFontWeight": "700",
+  "utrechtNavigationLinkMobileHoverFontWeight": "400",
   "utrechtNavigationLinkMobileMinBlockSize": "44px",
   "utrechtNavigationLinkMobilePaddingBlockEnd": "8px",
   "utrechtNavigationLinkMobilePaddingBlockStart": "8px",
   "utrechtNavigationLinkMobilePaddingInlineStart": "16px",
   "utrechtNavigationLinkMobileTransitionDuration": "300ms",
   "utrechtNavigationLinkMobileTransitionTimingFunction": "ease-in-out",
+  "utrechtNavigationLinkMobileActiveColor": "hsl(211 60% 35%)",
+  "utrechtNavigationLinkMobileFocusBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtNavigationLinkMobileFocusColor": "hsl(211 60% 35%)",
   "utrechtNavigationLinkPaddingBlockEnd": "16px",
   "utrechtNavigationLinkPaddingBlockStart": "16px",
   "utrechtNavigationListMobileBackgroundColor": "hsl(0 0% 100%)",
@@ -954,6 +959,37 @@ module.exports = {
   "utrechtSpotlightSectionWarningColor": "hsl(0 0% 15%)",
   "utrechtSpotlightSectionErrorBackgroundColor": "hsl(0 100% 95%)",
   "utrechtSpotlightSectionOkBackgroundColor": "hsl(90 30% 90%)",
+  "utrechtStatusBadgeBackgroundColor": "hsl(0 0% 30%)",
+  "utrechtStatusBadgeBorderRadius": "0",
+  "utrechtStatusBadgeBorderWidth": "0px",
+  "utrechtStatusBadgeColor": "hsl(0 0% 100%)",
+  "utrechtStatusBadgeFontFamily": "\"Noto Sans Variable\", \"Arial\", sans-serif",
+  "utrechtStatusBadgePaddingBlock": "8px",
+  "utrechtStatusBadgePaddingInline": "12px",
+  "utrechtStatusBadgeActiveBackgroundColor": "hsl(90 30% 50%)",
+  "utrechtStatusBadgeActiveBorderColor": "hsl(90 30% 50%)",
+  "utrechtStatusBadgeActiveColor": "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%)",
+  "utrechtStatusBadgeInactiveBackgroundColor": "hsl(0 100% 40%)",
+  "utrechtStatusBadgeInactiveBorderColor": "hsl(0 100% 40%)",
+  "utrechtStatusBadgeInactiveColor": "hsl(0 0% 100%)",
+  "utrechtStatusBadgeInvalidBackgroundColor": "#990000",
+  "utrechtStatusBadgeInvalidBorderColor": "#990000",
+  "utrechtStatusBadgeInvalidColor": "hsl(0 0% 100%)",
+  "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% 15%)",
   "utrechtSurfaceColor": "hsl(0 0% 95%)",
   "utrechtTableMarginBlockEnd": "0",

package/dist/dark/index.css

@@ -125,6 +125,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;
@@ -208,6 +209,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;
@@ -574,6 +576,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);
@@ -670,10 +673,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);
@@ -682,12 +688,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);
@@ -1094,6 +1101,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);
@@ -1192,6 +1208,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);
@@ -1218,9 +1240,23 @@
   --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);
 }

package/dist/dark/index.d.ts

@@ -794,14 +794,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;
@@ -819,6 +821,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;
@@ -1020,6 +1025,37 @@ export const utrechtSpotlightSectionWarningBackgroundColor : string;
 export const utrechtSpotlightSectionWarningColor : 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/dark/index.flat.json

@@ -831,25 +831,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",
@@ -1119,6 +1124,37 @@
   "utrechtSpotlightSectionWarningBackgroundColor": "hsl(48 100% 20%)",
   "utrechtSpotlightSectionWarningColor": "hsl(0 0% 15%)",
   "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% 15%)",
   "utrechtSurfaceColor": "hsl(0 0% 95%)",
   "utrechtTableCaptionFontSize": "1.125rem",