@utrecht/design-tokens 4.2.0 → 5.0.0

package/dist/variables.cjs

@@ -722,14 +722,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%)",
@@ -740,13 +742,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%)",
@@ -943,6 +948,37 @@ module.exports = {
   "utrechtSpotlightSectionWarningBackgroundColor": "hsl(48 100% 80%)",
   "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% 95%)",
   "utrechtSurfaceColor": "hsl(0 0% 10%)",
   "utrechtTableMarginBlockEnd": "0",

package/dist/variables.css

@@ -47,6 +47,7 @@
   --utrecht-table-cell-icon-size: 1em;
   --utrecht-table-caption-text-align: start;
   --utrecht-table-caption-margin-block-end: 1em;
+  --utrecht-status-badge-border-width: 0px;
   --utrecht-stack-focus-z-index: 1;
   --utrecht-space-text-xs: 0.5ch; /* Extra Small */
   --utrecht-space-text-xl: 1.75ch; /* Extra Large */
@@ -186,6 +187,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;
@@ -487,6 +489,7 @@
   --utrecht-table-caption-font-size: var(--utrecht-typography-scale-lg-font-size);
   --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-warning-background-color: var(--utrecht-color-yellow-80);
   --utrecht-spotlight-section-padding-inline-start: var(--utrecht-space-inline-md);
   --utrecht-spotlight-section-padding-inline-end: var(--utrecht-space-inline-md);
@@ -593,21 +596,25 @@
   --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-focus-color: var(--utrecht-color-blue-35);
+  --utrecht-navigation-link-mobile-focus-background-color: var(--utrecht-color-white);
   --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
   --utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
+  --utrecht-navigation-link-mobile-active-color: var(--utrecht-color-blue-35);
   --utrecht-navigation-link-is-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   --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-color: var(--utrecht-color-black);
-  --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
+  --utrecht-navigation-link-focus-visible-color: var(--utrecht-color-black);
+  --utrecht-navigation-link-focus-visible-background-color: var(--utrecht-color-yellow-80);
+  --utrecht-navigation-link-focus-color: var(--utrecht-color-white);
+  --utrecht-navigation-link-focus-background-color: var(--utrecht-color-black);
   --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);
@@ -1073,6 +1080,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-border-radius: var(--utrecht-badge-border-radius);
+  --utrecht-status-badge-active-color: var(--utrecht-feedback-active-fill-color);
   --utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
   --utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
   --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
@@ -1175,6 +1191,12 @@
   --nl-paragraph-lead-color: var(--utrecht-document-color);
   --nl-number-badge-border-radius: var(--nl-number-badge-font-size);
   --denhaag-process-steps-sub-step-line-color: var(--denhaag-process-steps-step-line-color);
+  --utrecht-status-badge-padding-inline: var(--utrecht-badge-padding-inline);
+  --utrecht-status-badge-padding-block: var(--utrecht-badge-padding-block);
+  --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-color: var(--utrecht-badge-color);
+  --utrecht-status-badge-background-color: var(--utrecht-badge-background-color);
   --utrecht-skip-link-padding-inline-start: var(--nl-skip-link-padding-inline);
   --utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
   --utrecht-skip-link-padding-block-start: var(--nl-skip-link-padding-block);
@@ -1202,9 +1224,23 @@
   --utrecht-feedback-active-background-color: var(--utrecht-feedback-safe-background-color);
   --utrecht-checkbox-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
   --of-layout-bg: var(--of-layout-background);
+  --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-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
   --utrecht-feedback-success-fill-background-color: var(--utrecht-feedback-success-background-color);
   --utrecht-feedback-inactive-fill-background-color: var(--utrecht-feedback-inactive-background-color);
   --utrecht-feedback-error-fill-background-color: var(--utrecht-feedback-error-background-color);
   --utrecht-feedback-active-fill-background-color: var(--utrecht-feedback-active-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/variables.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/variables.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",

package/dist/variables.less

@@ -118,6 +118,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;
@@ -201,6 +202,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;
@@ -565,6 +567,7 @@
 @utrecht-table-margin-block-start: @utrecht-space-block-md;
 @utrecht-surface-color: @utrecht-color-grey-10;
 @utrecht-surface-background-color: @utrecht-color-grey-95;
+@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-background-color: @utrecht-color-yellow-80;
@@ -659,10 +662,13 @@
 @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;
@@ -671,12 +677,13 @@
 @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;
@@ -1086,6 +1093,15 @@
 @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;
@@ -1174,6 +1190,12 @@
 @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;
@@ -1200,8 +1222,22 @@
 @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/variables.mjs

@@ -721,14 +721,16 @@ export const utrechtNavigationItemMobileBorderBlockEndWidth = "1px";
 export const utrechtNavigationItemMobileBorderBlockStartColor = "hsl(0 0% 80%)";
 export const utrechtNavigationItemMobileBorderBlockStartWidth = "1px";
 export const utrechtNavigationLinkActiveColor = "hsl(0 0% 100%)";
-export const utrechtNavigationLinkActiveFocusColor = "hsl(0 0% 0%)";
 export const utrechtNavigationLinkBackgroundColor = "hsl(0 0% 15%)";
 export const utrechtNavigationLinkBorderColor = "hsl(0 0% 40%)";
 export const utrechtNavigationLinkBorderInlineEndWidth = "1px";
 export const utrechtNavigationLinkColor = "hsl(0 0% 100%)";
-export const utrechtNavigationLinkFocusColor = "hsl(0 0% 0%)";
+export const utrechtNavigationLinkFocusColor = "hsl(0 0% 100%)";
+export const utrechtNavigationLinkFocusBackgroundColor = "hsl(0 0% 0%)";
 export const utrechtNavigationLinkFocusTextDecorationThickness = "3px";
-export const utrechtNavigationLinkFocusBackgroundColor = "hsl(48 100% 80%)";
+export const utrechtNavigationLinkFocusVisibleColor = "hsl(0 0% 0%)";
+export const utrechtNavigationLinkFocusVisibleBackgroundColor = "hsl(48 100% 80%)";
+export const utrechtNavigationLinkFocusVisibleTextDecorationThickness = "3px";
 export const utrechtNavigationLinkFontWeight = "400";
 export const utrechtNavigationLinkGap = "8px";
 export const utrechtNavigationLinkHoverBackgroundColor = "hsl(0 0% 0%)";
@@ -739,13 +741,16 @@ export const utrechtNavigationLinkMobileBackgroundColor = "hsl(0 0% 100%)";
 export const utrechtNavigationLinkMobileColor = "hsl(211 60% 35%)";
 export const utrechtNavigationLinkMobileHoverBackgroundColor = "hsl(0 0% 100%)";
 export const utrechtNavigationLinkMobileHoverColor = "hsl(211 60% 35%)";
-export const utrechtNavigationLinkMobileHoverFontWeight = "700";
+export const utrechtNavigationLinkMobileHoverFontWeight = "400";
 export const utrechtNavigationLinkMobileMinBlockSize = "44px";
 export const utrechtNavigationLinkMobilePaddingBlockEnd = "8px";
 export const utrechtNavigationLinkMobilePaddingBlockStart = "8px";
 export const utrechtNavigationLinkMobilePaddingInlineStart = "16px";
 export const utrechtNavigationLinkMobileTransitionDuration = "300ms";
 export const utrechtNavigationLinkMobileTransitionTimingFunction = "ease-in-out";
+export const utrechtNavigationLinkMobileActiveColor = "hsl(211 60% 35%)";
+export const utrechtNavigationLinkMobileFocusBackgroundColor = "hsl(0 0% 100%)";
+export const utrechtNavigationLinkMobileFocusColor = "hsl(211 60% 35%)";
 export const utrechtNavigationLinkPaddingBlockEnd = "16px";
 export const utrechtNavigationLinkPaddingBlockStart = "16px";
 export const utrechtNavigationListMobileBackgroundColor = "hsl(0 0% 100%)";
@@ -942,6 +947,37 @@ export const utrechtSpotlightSectionInfoBackgroundColor = "hsl(211 60% 90%)";
 export const utrechtSpotlightSectionWarningBackgroundColor = "hsl(48 100% 80%)";
 export const utrechtSpotlightSectionErrorBackgroundColor = "hsl(0 100% 95%)";
 export const utrechtSpotlightSectionOkBackgroundColor = "hsl(90 30% 90%)";
+export const utrechtStatusBadgeBackgroundColor = "hsl(0 0% 30%)";
+export const utrechtStatusBadgeBorderRadius = "0";
+export const utrechtStatusBadgeBorderWidth = "0px";
+export const utrechtStatusBadgeColor = "hsl(0 0% 100%)";
+export const utrechtStatusBadgeFontFamily = "\"Noto Sans Variable\", \"Arial\", sans-serif";
+export const utrechtStatusBadgePaddingBlock = "8px";
+export const utrechtStatusBadgePaddingInline = "12px";
+export const utrechtStatusBadgeActiveBackgroundColor = "hsl(90 30% 50%)";
+export const utrechtStatusBadgeActiveBorderColor = "hsl(90 30% 50%)";
+export const utrechtStatusBadgeActiveColor = "hsl(0 0% 100%)";
+export const utrechtStatusBadgeDangerBackgroundColor = "hsl(0 100% 40%)";
+export const utrechtStatusBadgeDangerBorderColor = "hsl(0 100% 40%)";
+export const utrechtStatusBadgeDangerColor = "hsl(0 0% 100%)";
+export const utrechtStatusBadgeErrorBackgroundColor = "hsl(0 100% 40%)";
+export const utrechtStatusBadgeErrorBorderColor = "hsl(0 100% 40%)";
+export const utrechtStatusBadgeErrorColor = "hsl(0 0% 100%)";
+export const utrechtStatusBadgeInactiveBackgroundColor = "hsl(0 100% 40%)";
+export const utrechtStatusBadgeInactiveBorderColor = "hsl(0 100% 40%)";
+export const utrechtStatusBadgeInactiveColor = "hsl(0 0% 100%)";
+export const utrechtStatusBadgeInvalidBackgroundColor = "#990000";
+export const utrechtStatusBadgeInvalidBorderColor = "#990000";
+export const utrechtStatusBadgeInvalidColor = "hsl(0 0% 100%)";
+export const utrechtStatusBadgeSafeBackgroundColor = "hsl(90 30% 50%)";
+export const utrechtStatusBadgeSafeBorderColor = "hsl(90 30% 50%)";
+export const utrechtStatusBadgeSafeColor = "hsl(0 0% 100%)";
+export const utrechtStatusBadgeValidBackgroundColor = "hsl(90 30% 50%)";
+export const utrechtStatusBadgeValidBorderColor = "hsl(90 30% 50%)";
+export const utrechtStatusBadgeValidColor = "hsl(0 0% 100%)";
+export const utrechtStatusBadgeWarningBackgroundColor = "hsl(48 100% 50%)";
+export const utrechtStatusBadgeWarningBorderColor = "hsl(48 100% 50%)";
+export const utrechtStatusBadgeWarningColor = "hsl(0 0% 0%)";
 export const utrechtSurfaceBackgroundColor = "hsl(0 0% 95%)";
 export const utrechtSurfaceColor = "hsl(0 0% 10%)";
 export const utrechtTableMarginBlockEnd = "0";

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.2.0",
+  "version": "5.0.0",
   "author": "Community for NL Design System",
   "description": "Design Tokens for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "SEE LICENSE IN ./LICENSE.md",

package/src/component/utrecht/navigation.tokens.json

@@ -70,11 +70,6 @@
         "active": {
           "color": {
             "value": "{utrecht.color.white}"
-          },
-          "focus": {
-            "color": {
-              "value": "{utrecht.color.black}"
-            }
           }
         },
         "background-color": {
@@ -90,6 +85,17 @@
           "value": "{utrecht.color.white}"
         },
         "focus": {
+          "color": {
+            "value": "{utrecht.color.white}"
+          },
+          "background-color": {
+            "value": "{utrecht.color.black}"
+          },
+          "text-decoration-thickness": {
+            "value": "3px"
+          }
+        },
+        "focus-visible": {
           "color": {
             "value": "{utrecht.color.black}"
           },
@@ -137,7 +143,20 @@
               "value": "{utrecht.color.blue.35}"
             },
             "font-weight": {
-              "value": "{utrecht.typography.weight-scale.bold.font-weight}"
+              "value": "{utrecht.typography.weight-scale.normal.font-weight}"
+            }
+          },
+          "active": {
+            "color": {
+              "value": "{utrecht.color.blue.35}"
+            }
+          },
+          "focus": {
+            "background-color": {
+              "value": "{utrecht.color.white}"
+            },
+            "color": {
+              "value": "{utrecht.color.blue.35}"
             }
           },
           "justify-content": {},

package/src/component/utrecht/status-badge.tokens.json

@@ -0,0 +1,75 @@
+{
+  "utrecht": {
+    "status-badge": {
+      "background-color": {
+        "value": "{utrecht.badge.background-color}"
+      },
+      "border-color": {},
+      "border-radius": {
+        "value": "{utrecht.badge.border-radius}"
+      },
+      "border-width": {
+        "value": "0px"
+      },
+      "color": {
+        "value": "{utrecht.badge.color}"
+      },
+      "font-family": {
+        "value": "{utrecht.typography.sans-serif.font-family}"
+      },
+      "font-size": {},
+      "font-weight": {},
+      "line-height": {},
+      "letter-spacing": {},
+      "min-block-size": {},
+      "min-inline-size": {},
+      "padding-block": {
+        "value": "{utrecht.badge.padding-block}"
+      },
+      "padding-inline": {
+        "value": "{utrecht.badge.padding-inline}"
+      },
+      "text-transform": {},
+      "active": {
+        "background-color": { "value": "{utrecht.feedback.active.fill.background-color}" },
+        "border-color": { "value": "{utrecht.feedback.active.fill.background-color}" },
+        "color": { "value": "{utrecht.feedback.active.fill.color}" }
+      },
+      "danger": {
+        "background-color": { "value": "{utrecht.feedback.danger.fill.background-color}" },
+        "border-color": { "value": "{utrecht.feedback.danger.fill.background-color}" },
+        "color": { "value": "{utrecht.feedback.danger.fill.color}" }
+      },
+      "error": {
+        "background-color": { "value": "{utrecht.feedback.error.fill.background-color}" },
+        "border-color": { "value": "{utrecht.feedback.error.fill.background-color}" },
+        "color": { "value": "{utrecht.feedback.error.fill.color}" }
+      },
+      "inactive": {
+        "background-color": { "value": "{utrecht.feedback.inactive.fill.background-color}" },
+        "border-color": { "value": "{utrecht.feedback.inactive.fill.background-color}" },
+        "color": { "value": "{utrecht.feedback.inactive.fill.color}" }
+      },
+      "invalid": {
+        "background-color": { "value": "{utrecht.feedback.invalid.fill.background-color}" },
+        "border-color": { "value": "{utrecht.feedback.invalid.fill.background-color}" },
+        "color": { "value": "{utrecht.feedback.invalid.fill.color}" }
+      },
+      "safe": {
+        "background-color": { "value": "{utrecht.feedback.safe.fill.background-color}" },
+        "border-color": { "value": "{utrecht.feedback.safe.fill.background-color}" },
+        "color": { "value": "{utrecht.feedback.safe.fill.color}" }
+      },
+      "valid": {
+        "background-color": { "value": "{utrecht.feedback.valid.fill.background-color}" },
+        "border-color": { "value": "{utrecht.feedback.valid.fill.background-color}" },
+        "color": { "value": "{utrecht.feedback.valid.fill.color}" }
+      },
+      "warning": {
+        "background-color": { "value": "{utrecht.feedback.warning.fill.background-color}" },
+        "border-color": { "value": "{utrecht.feedback.warning.fill.background-color}" },
+        "color": { "value": "{utrecht.feedback.warning.fill.color}" }
+      }
+    }
+  }
+}