@utrecht/design-tokens 2.5.0 → 3.0.0

package/dist/variables.cjs

@@ -3,33 +3,38 @@
  */
 
 module.exports = {
-  "utrechtAccordionRowGap": "8px",
-  "utrechtAccordionButtonPaddingInlineEnd": "16px",
-  "utrechtAccordionButtonPaddingInlineStart": "16px",
-  "utrechtAccordionButtonPaddingBlockEnd": "8px",
-  "utrechtAccordionButtonPaddingBlockStart": "8px",
-  "utrechtAccordionButtonBackgroundColor": "hsl(0 0% 95%)",
-  "utrechtAccordionButtonColor": "hsl(0 0% 10%)",
-  "utrechtAccordionButtonBorderColor": "hsl(0 0% 95%)",
+  "utrechtAccordionButtonPaddingInlineEnd": "8px",
+  "utrechtAccordionButtonPaddingInlineStart": "8px",
+  "utrechtAccordionButtonPaddingBlockEnd": "16px",
+  "utrechtAccordionButtonPaddingBlockStart": "16px",
+  "utrechtAccordionButtonColor": "hsl(211 60% 40%)",
+  "utrechtAccordionButtonBorderColor": "transparent",
   "utrechtAccordionButtonBorderWidth": "0",
-  "utrechtAccordionButtonHoverBackgroundColor": "inherit",
-  "utrechtAccordionButtonHoverBorderColor": "hsl(0 0% 95%)",
-  "utrechtAccordionButtonHoverColor": "hsl(0 0% 10%)",
-  "utrechtAccordionButtonActiveBackgroundColor": "hsl(0 0% 80%)",
-  "utrechtAccordionButtonActiveBorderColor": "hsl(0 0% 95%)",
+  "utrechtAccordionButtonHoverBackgroundColor": "hsl(0 0% 95%)",
+  "utrechtAccordionButtonHoverBorderColor": "transparent",
+  "utrechtAccordionButtonHoverColor": "hsl(211 60% 40%)",
+  "utrechtAccordionButtonActiveBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtAccordionButtonActiveBorderColor": "transparent",
   "utrechtAccordionButtonActiveColor": "hsl(0 0% 10%)",
-  "utrechtAccordionButtonFocusBackgroundColor": "hsl(0 0% 80%)",
-  "utrechtAccordionButtonFocusBorderColor": "hsl(0 0% 95%)",
+  "utrechtAccordionButtonFocusBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtAccordionButtonFocusBorderColor": "transparent",
   "utrechtAccordionButtonFocusColor": "hsl(0 0% 10%)",
+  "utrechtAccordionButtonFocusVisibleBorderColor": "hsl(0 0% 90%)",
+  "utrechtAccordionButtonFocusVisibleBorderWidth": "2px",
+  "utrechtAccordionButtonFocusVisibleBackgroundColor": "hsl(48 100% 80%)",
+  "utrechtAccordionButtonFocusVisibleColor": "hsl(211 60% 40%)",
   "utrechtAccordionButtonIconSize": "24px",
   "utrechtAccordionButtonIconUtrechtBackgroundColor": "hsl(48 100% 50%)",
-  "utrechtAccordionPanelBorderColor": "hsl(0 0% 95%)",
-  "utrechtAccordionPanelBorderWidth": "2px",
+  "utrechtAccordionPanelBorderColor": "transparent",
+  "utrechtAccordionPanelBorderWidth": "0",
   "utrechtAccordionPanelPaddingBlockStart": "8px",
   "utrechtAccordionPanelPaddingBlockEnd": "8px",
-  "utrechtAccordionPanelPaddingInlineStart": "16px",
+  "utrechtAccordionPanelPaddingInlineStart": "32px",
   "utrechtAccordionPanelPaddingInlineEnd": "16px",
   "utrechtAccordionSectionMarginBlockStart": "4px",
+  "utrechtAccordionSectionBorderColor": "hsl(0 0% 90%)",
+  "utrechtAccordionSectionBorderWidth": "2px",
+  "utrechtAccordionSectionHoverBorderColor": "hsl(0 0% 95%)",
   "utrechtAlertDialogMaxBlockSize": "80vh",
   "utrechtAlertDialogMaxInlineSize": "780px",
   "utrechtAlertDialogMinBlockSize": "100px",
@@ -57,7 +62,7 @@ module.exports = {
   "utrechtAlertIconWarningColor": "hsl(48 100% 40%)",
   "utrechtAlertIconOkColor": "hsl(90 30% 38%)",
   "utrechtArticleMaxInlineSize": "780px",
-  "utrechtBackdropBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtBackdropBackgroundColor": "rgb(0 0 0 / 30%)",
   "utrechtBackdropColor": "hsl(0 0% 0%)",
   "utrechtBackdropOpacity": "0.8",
   "utrechtBackdropFadeInAnimationDuration": "400ms",

package/dist/variables.css

@@ -372,6 +372,7 @@
   --utrecht-backdrop-reduced-transparency-opacity: 0.98;
   --utrecht-backdrop-opacity: 0.8;
   --utrecht-backdrop-fade-in-animation-duration: 400ms;
+  --utrecht-backdrop-background-color: rgb(0 0 0 / 30%);
   --utrecht-article-max-inline-size: 780px;
   --utrecht-alert-icon-size: 24px;
   --utrecht-alert-icon-inset-block-start: 6px;
@@ -384,10 +385,16 @@
   --utrecht-action-disabled-cursor: not-allowed;
   --utrecht-action-busy-cursor: wait;
   --utrecht-action-activate-cursor: pointer;
-  --utrecht-accordion-panel-border-width: 2px;
+  --utrecht-accordion-section-border-width: 2px;
+  --utrecht-accordion-panel-border-width: 0;
+  --utrecht-accordion-panel-border-color: transparent;
   --utrecht-accordion-button-icon-size: 24px;
-  --utrecht-accordion-button-hover-background-color: inherit;
+  --utrecht-accordion-button-hover-border-color: transparent;
+  --utrecht-accordion-button-focus-visible-border-width: 2px;
+  --utrecht-accordion-button-focus-border-color: transparent;
   --utrecht-accordion-button-border-width: 0;
+  --utrecht-accordion-button-border-color: transparent;
+  --utrecht-accordion-button-active-border-color: transparent;
   --signalen-progress-bar-border-radius: 4px;
   --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
   --nl-number-badge-padding-inline: 1ex;
@@ -825,7 +832,6 @@
   --utrecht-badge-counter-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
   --utrecht-badge-border-radius: var(--nl-data-badge-border-radius); /* Default corner radius for badge components */
   --utrecht-backdrop-color: var(--utrecht-color-black);
-  --utrecht-backdrop-background-color: var(--utrecht-color-white);
   --utrecht-alert-warning-color: var(--utrecht-color-black);
   --utrecht-alert-warning-background-color: var(--utrecht-color-yellow-80);
   --utrecht-alert-padding-inline-start: var(--utrecht-space-block-lg);
@@ -848,28 +854,27 @@
   --utrecht-alert-color: var(--utrecht-color-black);
   --utrecht-alert-background-color: var(--utrecht-color-blue-90);
   --utrecht-accordion-section-margin-block-start: var(--utrecht-space-block-2xs);
-  --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
-  --utrecht-accordion-panel-padding-inline-start: var(--utrecht-space-block-md);
+  --utrecht-accordion-section-hover-border-color: var(--utrecht-color-grey-95);
+  --utrecht-accordion-section-border-color: var(--utrecht-color-grey-90);
+  --utrecht-accordion-panel-padding-inline-start: var(--utrecht-space-block-2xl);
   --utrecht-accordion-panel-padding-inline-end: var(--utrecht-space-block-md);
   --utrecht-accordion-panel-padding-block-start: var(--utrecht-space-block-xs);
   --utrecht-accordion-panel-padding-block-end: var(--utrecht-space-block-xs);
-  --utrecht-accordion-panel-border-color: var(--utrecht-color-grey-95);
-  --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
-  --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
-  --utrecht-accordion-button-padding-block-start: var(--utrecht-space-block-xs);
-  --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-xs);
+  --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-xs);
+  --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-xs);
+  --utrecht-accordion-button-padding-block-start: var(--utrecht-space-block-md);
+  --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-md);
   --utrecht-accordion-button-icon-utrecht-background-color: var(--utrecht-color-yellow-50);
-  --utrecht-accordion-button-hover-color: var(--utrecht-color-grey-10);
-  --utrecht-accordion-button-hover-border-color: var(--utrecht-color-grey-95);
+  --utrecht-accordion-button-hover-color: var(--utrecht-color-blue-40);
+  --utrecht-accordion-button-hover-background-color: var(--utrecht-color-grey-95);
+  --utrecht-accordion-button-focus-visible-color: var(--utrecht-color-blue-40);
+  --utrecht-accordion-button-focus-visible-border-color: var(--utrecht-color-grey-90);
+  --utrecht-accordion-button-focus-visible-background-color: var(--utrecht-color-yellow-80);
   --utrecht-accordion-button-focus-color: var(--utrecht-color-grey-10);
-  --utrecht-accordion-button-focus-border-color: var(--utrecht-color-grey-95);
-  --utrecht-accordion-button-focus-background-color: var(--utrecht-color-grey-80);
-  --utrecht-accordion-button-color: var(--utrecht-color-grey-10);
-  --utrecht-accordion-button-border-color: var(--utrecht-color-grey-95);
-  --utrecht-accordion-button-background-color: var(--utrecht-color-grey-95);
+  --utrecht-accordion-button-focus-background-color: var(--utrecht-color-white);
+  --utrecht-accordion-button-color: var(--utrecht-color-blue-40);
   --utrecht-accordion-button-active-color: var(--utrecht-color-grey-10);
-  --utrecht-accordion-button-active-border-color: var(--utrecht-color-grey-95);
-  --utrecht-accordion-button-active-background-color: var(--utrecht-color-grey-80);
+  --utrecht-accordion-button-active-background-color: var(--utrecht-color-white);
   --nl-skip-link-text-decoration: var(--utrecht-link-text-decoration);
   --nl-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
   --nl-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);

package/dist/variables.d.ts

@@ -2,12 +2,10 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const utrechtAccordionRowGap : string;
 export const utrechtAccordionButtonPaddingInlineEnd : string;
 export const utrechtAccordionButtonPaddingInlineStart : string;
 export const utrechtAccordionButtonPaddingBlockEnd : string;
 export const utrechtAccordionButtonPaddingBlockStart : string;
-export const utrechtAccordionButtonBackgroundColor : string;
 export const utrechtAccordionButtonColor : string;
 export const utrechtAccordionButtonBorderColor : string;
 export const utrechtAccordionButtonBorderWidth : string;
@@ -20,6 +18,10 @@ export const utrechtAccordionButtonActiveColor : string;
 export const utrechtAccordionButtonFocusBackgroundColor : string;
 export const utrechtAccordionButtonFocusBorderColor : string;
 export const utrechtAccordionButtonFocusColor : string;
+export const utrechtAccordionButtonFocusVisibleBorderColor : string;
+export const utrechtAccordionButtonFocusVisibleBorderWidth : string;
+export const utrechtAccordionButtonFocusVisibleBackgroundColor : string;
+export const utrechtAccordionButtonFocusVisibleColor : string;
 export const utrechtAccordionButtonIconSize : string;
 export const utrechtAccordionButtonIconUtrechtBackgroundColor : string;
 export const utrechtAccordionPanelBorderColor : string;
@@ -29,6 +31,9 @@ export const utrechtAccordionPanelPaddingBlockEnd : string;
 export const utrechtAccordionPanelPaddingInlineStart : string;
 export const utrechtAccordionPanelPaddingInlineEnd : string;
 export const utrechtAccordionSectionMarginBlockStart : string;
+export const utrechtAccordionSectionBorderColor : string;
+export const utrechtAccordionSectionBorderWidth : string;
+export const utrechtAccordionSectionHoverBorderColor : string;
 export const utrechtAlertDialogMaxBlockSize : string;
 export const utrechtAlertDialogMaxInlineSize : string;
 export const utrechtAlertDialogMinBlockSize : string;

package/dist/variables.json

@@ -112,32 +112,37 @@
   "signalenModalDialogBackgroundColor": "hsl(0 0% 100%)",
   "signalenModalDialogColor": "hsl(0 0% 0%)",
   "signalenProgressBarBorderRadius": "4px",
-  "utrechtAccordionButtonActiveBackgroundColor": "hsl(0 0% 80%)",
-  "utrechtAccordionButtonActiveBorderColor": "hsl(0 0% 95%)",
+  "utrechtAccordionButtonActiveBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtAccordionButtonActiveBorderColor": "transparent",
   "utrechtAccordionButtonActiveColor": "hsl(0 0% 10%)",
-  "utrechtAccordionButtonBackgroundColor": "hsl(0 0% 95%)",
-  "utrechtAccordionButtonBorderColor": "hsl(0 0% 95%)",
+  "utrechtAccordionButtonBorderColor": "transparent",
   "utrechtAccordionButtonBorderWidth": "0",
-  "utrechtAccordionButtonColor": "hsl(0 0% 10%)",
-  "utrechtAccordionButtonFocusBackgroundColor": "hsl(0 0% 80%)",
-  "utrechtAccordionButtonFocusBorderColor": "hsl(0 0% 95%)",
+  "utrechtAccordionButtonColor": "hsl(211 60% 40%)",
+  "utrechtAccordionButtonFocusBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtAccordionButtonFocusBorderColor": "transparent",
   "utrechtAccordionButtonFocusColor": "hsl(0 0% 10%)",
-  "utrechtAccordionButtonHoverBackgroundColor": "inherit",
-  "utrechtAccordionButtonHoverBorderColor": "hsl(0 0% 95%)",
-  "utrechtAccordionButtonHoverColor": "hsl(0 0% 10%)",
+  "utrechtAccordionButtonFocusVisibleBackgroundColor": "hsl(48 100% 80%)",
+  "utrechtAccordionButtonFocusVisibleBorderColor": "hsl(0 0% 90%)",
+  "utrechtAccordionButtonFocusVisibleBorderWidth": "2px",
+  "utrechtAccordionButtonFocusVisibleColor": "hsl(211 60% 40%)",
+  "utrechtAccordionButtonHoverBackgroundColor": "hsl(0 0% 95%)",
+  "utrechtAccordionButtonHoverBorderColor": "transparent",
+  "utrechtAccordionButtonHoverColor": "hsl(211 60% 40%)",
   "utrechtAccordionButtonIconSize": "24px",
   "utrechtAccordionButtonIconUtrechtBackgroundColor": "hsl(48 100% 50%)",
-  "utrechtAccordionButtonPaddingBlockEnd": "8px",
-  "utrechtAccordionButtonPaddingBlockStart": "8px",
-  "utrechtAccordionButtonPaddingInlineEnd": "16px",
-  "utrechtAccordionButtonPaddingInlineStart": "16px",
-  "utrechtAccordionPanelBorderColor": "hsl(0 0% 95%)",
-  "utrechtAccordionPanelBorderWidth": "2px",
+  "utrechtAccordionButtonPaddingBlockEnd": "16px",
+  "utrechtAccordionButtonPaddingBlockStart": "16px",
+  "utrechtAccordionButtonPaddingInlineEnd": "8px",
+  "utrechtAccordionButtonPaddingInlineStart": "8px",
+  "utrechtAccordionPanelBorderColor": "transparent",
+  "utrechtAccordionPanelBorderWidth": "0",
   "utrechtAccordionPanelPaddingBlockEnd": "8px",
   "utrechtAccordionPanelPaddingBlockStart": "8px",
   "utrechtAccordionPanelPaddingInlineEnd": "16px",
-  "utrechtAccordionPanelPaddingInlineStart": "16px",
-  "utrechtAccordionRowGap": "8px",
+  "utrechtAccordionPanelPaddingInlineStart": "32px",
+  "utrechtAccordionSectionBorderColor": "hsl(0 0% 90%)",
+  "utrechtAccordionSectionBorderWidth": "2px",
+  "utrechtAccordionSectionHoverBorderColor": "hsl(0 0% 95%)",
   "utrechtAccordionSectionMarginBlockStart": "4px",
   "utrechtActionActivateCursor": "pointer",
   "utrechtActionBusyCursor": "wait",
@@ -172,7 +177,7 @@
   "utrechtAlertWarningBackgroundColor": "hsl(48 100% 80%)",
   "utrechtAlertWarningColor": "hsl(0 0% 0%)",
   "utrechtArticleMaxInlineSize": "780px",
-  "utrechtBackdropBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtBackdropBackgroundColor": "rgb(0 0 0 / 30%)",
   "utrechtBackdropColor": "hsl(0 0% 0%)",
   "utrechtBackdropFadeInAnimationDuration": "400ms",
   "utrechtBackdropOpacity": "0.8",

package/dist/variables.less

@@ -386,16 +386,23 @@
 @utrecht-backdrop-reduced-transparency-opacity: 0.98;
 @utrecht-backdrop-fade-in-animation-duration: 400ms;
 @utrecht-backdrop-opacity: 0.8;
+@utrecht-backdrop-background-color: rgb(0 0 0 / 30%);
 @utrecht-article-max-inline-size: 780px;
 @utrecht-alert-icon-inset-block-start: 6px;
 @utrecht-alert-icon-size: 24px;
 @utrecht-alert-dialog-min-inline-size: 320px;
 @utrecht-alert-dialog-min-block-size: 100px;
 @utrecht-alert-dialog-max-block-size: 80vh;
-@utrecht-accordion-panel-border-width: 2px;
+@utrecht-accordion-section-border-width: 2px;
+@utrecht-accordion-panel-border-width: 0;
+@utrecht-accordion-panel-border-color: transparent;
 @utrecht-accordion-button-icon-size: 24px;
-@utrecht-accordion-button-hover-background-color: inherit;
+@utrecht-accordion-button-focus-visible-border-width: 2px;
+@utrecht-accordion-button-focus-border-color: transparent;
+@utrecht-accordion-button-active-border-color: transparent;
+@utrecht-accordion-button-hover-border-color: transparent;
 @utrecht-accordion-button-border-width: 0;
+@utrecht-accordion-button-border-color: transparent;
 @nl-skip-link-focus-visible-text-decoration: @utrecht-link-focus-visible-text-decoration;
 @nl-skip-link-text-decoration: @utrecht-link-text-decoration;
 @nl-paragraph-small-font-size: @utrecht-typography-scale-sm-font-size;
@@ -910,7 +917,6 @@
 @utrecht-badge-counter-color: @utrecht-color-white; // Default text color for badge components
 @utrecht-badge-counter-background-color: @utrecht-color-red-40; // Default background color for badge components
 @utrecht-backdrop-color: @utrecht-color-black;
-@utrecht-backdrop-background-color: @utrecht-color-white;
 @utrecht-alert-icon-ok-color: @utrecht-color-green-40;
 @utrecht-alert-icon-warning-color: @utrecht-color-yellow-40;
 @utrecht-alert-icon-error-color: @utrecht-color-red-40;
@@ -932,29 +938,28 @@
 @utrecht-alert-color: @utrecht-color-black;
 @utrecht-alert-background-color: @utrecht-color-blue-90;
 @utrecht-alert-dialog-max-inline-size: @utrecht-article-max-inline-size;
+@utrecht-accordion-section-hover-border-color: @utrecht-color-grey-95;
+@utrecht-accordion-section-border-color: @utrecht-color-grey-90;
 @utrecht-accordion-section-margin-block-start: @utrecht-space-block-2xs;
 @utrecht-accordion-panel-padding-inline-end: @utrecht-space-block-md;
-@utrecht-accordion-panel-padding-inline-start: @utrecht-space-block-md;
+@utrecht-accordion-panel-padding-inline-start: @utrecht-space-block-2xl;
 @utrecht-accordion-panel-padding-block-end: @utrecht-space-block-xs;
 @utrecht-accordion-panel-padding-block-start: @utrecht-space-block-xs;
-@utrecht-accordion-panel-border-color: @utrecht-color-grey-95;
 @utrecht-accordion-button-icon-utrecht-background-color: @utrecht-color-yellow-50;
+@utrecht-accordion-button-focus-visible-color: @utrecht-color-blue-40;
+@utrecht-accordion-button-focus-visible-background-color: @utrecht-color-yellow-80;
+@utrecht-accordion-button-focus-visible-border-color: @utrecht-color-grey-90;
 @utrecht-accordion-button-focus-color: @utrecht-color-grey-10;
-@utrecht-accordion-button-focus-border-color: @utrecht-color-grey-95;
-@utrecht-accordion-button-focus-background-color: @utrecht-color-grey-80;
+@utrecht-accordion-button-focus-background-color: @utrecht-color-white;
 @utrecht-accordion-button-active-color: @utrecht-color-grey-10;
-@utrecht-accordion-button-active-border-color: @utrecht-color-grey-95;
-@utrecht-accordion-button-active-background-color: @utrecht-color-grey-80;
-@utrecht-accordion-button-hover-color: @utrecht-color-grey-10;
-@utrecht-accordion-button-hover-border-color: @utrecht-color-grey-95;
-@utrecht-accordion-button-border-color: @utrecht-color-grey-95;
-@utrecht-accordion-button-color: @utrecht-color-grey-10;
-@utrecht-accordion-button-background-color: @utrecht-color-grey-95;
-@utrecht-accordion-button-padding-block-start: @utrecht-space-block-xs;
-@utrecht-accordion-button-padding-block-end: @utrecht-space-block-xs;
-@utrecht-accordion-button-padding-inline-start: @utrecht-space-block-md;
-@utrecht-accordion-button-padding-inline-end: @utrecht-space-block-md;
-@utrecht-accordion-row-gap: @utrecht-space-block-xs;
+@utrecht-accordion-button-active-background-color: @utrecht-color-white;
+@utrecht-accordion-button-hover-color: @utrecht-color-blue-40;
+@utrecht-accordion-button-hover-background-color: @utrecht-color-grey-95;
+@utrecht-accordion-button-color: @utrecht-color-blue-40;
+@utrecht-accordion-button-padding-block-start: @utrecht-space-block-md;
+@utrecht-accordion-button-padding-block-end: @utrecht-space-block-md;
+@utrecht-accordion-button-padding-inline-start: @utrecht-space-block-xs;
+@utrecht-accordion-button-padding-inline-end: @utrecht-space-block-xs;
 @signalen-modal-dialog-color: @utrecht-body-color;
 @signalen-modal-dialog-background-color: @utrecht-body-background-color;
 @of-progress-indicator-background-color: @utrecht-document-background-color;

package/dist/variables.mjs

@@ -2,33 +2,38 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const utrechtAccordionRowGap = "8px";
-export const utrechtAccordionButtonPaddingInlineEnd = "16px";
-export const utrechtAccordionButtonPaddingInlineStart = "16px";
-export const utrechtAccordionButtonPaddingBlockEnd = "8px";
-export const utrechtAccordionButtonPaddingBlockStart = "8px";
-export const utrechtAccordionButtonBackgroundColor = "hsl(0 0% 95%)";
-export const utrechtAccordionButtonColor = "hsl(0 0% 10%)";
-export const utrechtAccordionButtonBorderColor = "hsl(0 0% 95%)";
+export const utrechtAccordionButtonPaddingInlineEnd = "8px";
+export const utrechtAccordionButtonPaddingInlineStart = "8px";
+export const utrechtAccordionButtonPaddingBlockEnd = "16px";
+export const utrechtAccordionButtonPaddingBlockStart = "16px";
+export const utrechtAccordionButtonColor = "hsl(211 60% 40%)";
+export const utrechtAccordionButtonBorderColor = "transparent";
 export const utrechtAccordionButtonBorderWidth = "0";
-export const utrechtAccordionButtonHoverBackgroundColor = "inherit";
-export const utrechtAccordionButtonHoverBorderColor = "hsl(0 0% 95%)";
-export const utrechtAccordionButtonHoverColor = "hsl(0 0% 10%)";
-export const utrechtAccordionButtonActiveBackgroundColor = "hsl(0 0% 80%)";
-export const utrechtAccordionButtonActiveBorderColor = "hsl(0 0% 95%)";
+export const utrechtAccordionButtonHoverBackgroundColor = "hsl(0 0% 95%)";
+export const utrechtAccordionButtonHoverBorderColor = "transparent";
+export const utrechtAccordionButtonHoverColor = "hsl(211 60% 40%)";
+export const utrechtAccordionButtonActiveBackgroundColor = "hsl(0 0% 100%)";
+export const utrechtAccordionButtonActiveBorderColor = "transparent";
 export const utrechtAccordionButtonActiveColor = "hsl(0 0% 10%)";
-export const utrechtAccordionButtonFocusBackgroundColor = "hsl(0 0% 80%)";
-export const utrechtAccordionButtonFocusBorderColor = "hsl(0 0% 95%)";
+export const utrechtAccordionButtonFocusBackgroundColor = "hsl(0 0% 100%)";
+export const utrechtAccordionButtonFocusBorderColor = "transparent";
 export const utrechtAccordionButtonFocusColor = "hsl(0 0% 10%)";
+export const utrechtAccordionButtonFocusVisibleBorderColor = "hsl(0 0% 90%)";
+export const utrechtAccordionButtonFocusVisibleBorderWidth = "2px";
+export const utrechtAccordionButtonFocusVisibleBackgroundColor = "hsl(48 100% 80%)";
+export const utrechtAccordionButtonFocusVisibleColor = "hsl(211 60% 40%)";
 export const utrechtAccordionButtonIconSize = "24px";
 export const utrechtAccordionButtonIconUtrechtBackgroundColor = "hsl(48 100% 50%)";
-export const utrechtAccordionPanelBorderColor = "hsl(0 0% 95%)";
-export const utrechtAccordionPanelBorderWidth = "2px";
+export const utrechtAccordionPanelBorderColor = "transparent";
+export const utrechtAccordionPanelBorderWidth = "0";
 export const utrechtAccordionPanelPaddingBlockStart = "8px";
 export const utrechtAccordionPanelPaddingBlockEnd = "8px";
-export const utrechtAccordionPanelPaddingInlineStart = "16px";
+export const utrechtAccordionPanelPaddingInlineStart = "32px";
 export const utrechtAccordionPanelPaddingInlineEnd = "16px";
 export const utrechtAccordionSectionMarginBlockStart = "4px";
+export const utrechtAccordionSectionBorderColor = "hsl(0 0% 90%)";
+export const utrechtAccordionSectionBorderWidth = "2px";
+export const utrechtAccordionSectionHoverBorderColor = "hsl(0 0% 95%)";
 export const utrechtAlertDialogMaxBlockSize = "80vh";
 export const utrechtAlertDialogMaxInlineSize = "780px";
 export const utrechtAlertDialogMinBlockSize = "100px";
@@ -56,7 +61,7 @@ export const utrechtAlertIconErrorColor = "hsl(0 100% 40%)";
 export const utrechtAlertIconWarningColor = "hsl(48 100% 40%)";
 export const utrechtAlertIconOkColor = "hsl(90 30% 38%)";
 export const utrechtArticleMaxInlineSize = "780px";
-export const utrechtBackdropBackgroundColor = "hsl(0 0% 100%)";
+export const utrechtBackdropBackgroundColor = "rgb(0 0 0 / 30%)";
 export const utrechtBackdropColor = "hsl(0 0% 0%)";
 export const utrechtBackdropOpacity = "0.8";
 export const utrechtBackdropFadeInAnimationDuration = "400ms";

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.5.0",
+  "version": "3.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/accordion.tokens.json

@@ -1,36 +1,47 @@
 {
   "utrecht": {
     "accordion": {
-      "row-gap": { "value": "{utrecht.space.block.xs}" },
+      "row-gap": {},
       "section": {
         "margin-block-start": { "value": "{utrecht.space.block.2xs}" },
-        "margin-block-end": {}
+        "margin-block-end": {},
+        "border-color": { "value": "{utrecht.color.grey.90}" },
+        "border-width": { "value": "2px" },
+        "hover": {
+          "border-color": { "value": "{utrecht.color.grey.95}" }
+        }
       },
       "button": {
-        "padding-inline-start": { "value": "{utrecht.space.block.md}" },
-        "padding-inline-end": { "value": "{utrecht.space.block.md}" },
-        "padding-block-start": { "value": "{utrecht.space.block.xs}" },
-        "padding-block-end": { "value": "{utrecht.space.block.xs}" },
-        "background-color": { "value": "{utrecht.color.grey.95}" },
-        "color": { "value": "{utrecht.color.grey.10}" },
-        "border-color": { "value": "{utrecht.color.grey.95}" },
+        "padding-inline-start": { "value": "{utrecht.space.block.xs}" },
+        "padding-inline-end": { "value": "{utrecht.space.block.xs}" },
+        "padding-block-start": { "value": "{utrecht.space.block.md}" },
+        "padding-block-end": { "value": "{utrecht.space.block.md}" },
+        "background-color": {},
+        "color": { "value": "{utrecht.color.blue.40}" },
+        "border-color": { "value": "transparent" },
         "border-width": { "value": "0" },
         "gap": {},
         "hover": {
-          "background-color": { "value": "inherit" },
-          "border-color": { "value": "{utrecht.color.grey.95}" },
-          "color": { "value": "{utrecht.color.grey.10}" }
+          "background-color": { "value": "{utrecht.color.grey.95}" },
+          "border-color": { "value": "transparent" },
+          "color": { "value": "{utrecht.color.blue.40}" }
         },
         "active": {
-          "background-color": { "value": "{utrecht.color.grey.80}" },
-          "border-color": { "value": "{utrecht.color.grey.95}" },
+          "background-color": { "value": "{utrecht.color.white}" },
+          "border-color": { "value": "transparent" },
           "color": { "value": "{utrecht.color.grey.10}" }
         },
         "focus": {
-          "background-color": { "value": "{utrecht.color.grey.80}" },
-          "border-color": { "value": "{utrecht.color.grey.95}" },
+          "background-color": { "value": "{utrecht.color.white}" },
+          "border-color": { "value": "transparent" },
           "color": { "value": "{utrecht.color.grey.10}" }
         },
+        "focus-visible": {
+          "background-color": { "value": "{utrecht.color.yellow.80}" },
+          "border-color": { "value": "{utrecht.color.grey.90}" },
+          "border-width": { "value": "2px" },
+          "color": { "value": "{utrecht.color.blue.40}" }
+        },
         "icon": {
           "size": { "value": "24px" },
           "utrecht": {
@@ -39,9 +50,9 @@
         }
       },
       "panel": {
-        "border-color": { "value": "{utrecht.color.grey.95}" },
-        "border-width": { "value": "2px" },
-        "padding-inline-start": { "value": "{utrecht.space.block.md}" },
+        "border-color": { "value": "transparent" },
+        "border-width": { "value": "0" },
+        "padding-inline-start": { "value": "{utrecht.space.block.2xl}" },
         "padding-inline-end": { "value": "{utrecht.space.block.md}" },
         "padding-block-start": { "value": "{utrecht.space.block.xs}" },
         "padding-block-end": { "value": "{utrecht.space.block.xs}" }

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

@@ -2,7 +2,7 @@
   "utrecht": {
     "backdrop": {
       "background-color": {
-        "value": "{utrecht.color.white}"
+        "value": "rgb(0 0 0 / 30%)"
       },
       "color": {
         "value": "{utrecht.color.black}"