@utrecht/design-tokens 2.1.1 → 2.2.0

package/dist/dark/tokens.json

@@ -3306,7 +3306,7 @@
             }
           },
           "type": "fontSize",
-          "value": "0.75rem",
+          "value": "0.875rem",
           "filePath": "src/component/utrecht/blockquote.tokens.json",
           "isSource": true,
           "original": {
@@ -3321,7 +3321,7 @@
               }
             },
             "type": "fontSize",
-            "value": "{utrecht.typography.scale.xs.font-size}"
+            "value": "{utrecht.typography.scale.sm.font-size}"
           },
           "name": "utrechtBlockquoteCaptionFontSize",
           "attributes": {},
@@ -21703,7 +21703,25 @@
             ]
           }
         },
-        "selected": {
+        "disabled": {
+          "background-color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              }
+            }
+          },
+          "color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              }
+            }
+          }
+        },
+        "hover": {
           "background-color": {
             "$extensions": {
               "nl.nldesignsystem.css.property": {
@@ -21711,7 +21729,7 @@
                 "inherits": true
               }
             },
-            "value": "hsl(0 0% 95%)",
+            "value": "hsl(211 60% 90%)",
             "filePath": "src/component/utrecht/listbox.tokens.json",
             "isSource": true,
             "original": {
@@ -21721,15 +21739,15 @@
                   "inherits": true
                 }
               },
-              "value": "{utrecht.color.grey.95}"
+              "value": "{utrecht.color.blue.90}"
             },
-            "name": "utrechtListboxOptionSelectedBackgroundColor",
+            "name": "utrechtListboxOptionHoverBackgroundColor",
             "attributes": {},
             "path": [
               "utrecht",
               "listbox",
               "option",
-              "selected",
+              "hover",
               "background-color"
             ]
           },
@@ -21752,61 +21770,121 @@
               },
               "value": "{utrecht.color.black}"
             },
-            "name": "utrechtListboxOptionSelectedColor",
+            "name": "utrechtListboxOptionHoverColor",
             "attributes": {},
             "path": [
               "utrecht",
               "listbox",
               "option",
-              "selected",
+              "hover",
               "color"
             ]
           }
         },
-        "icon": {
-          "size": {
+        "selected": {
+          "background-color": {
             "$extensions": {
               "nl.nldesignsystem.css.property": {
-                "syntax": "<length>",
+                "syntax": "<color>",
                 "inherits": true
               }
-            }
-          }
-        },
-        "hover": {
-          "color": {
-            "value": "hsl(0 0% 0%)",
+            },
+            "value": "hsl(0 0% 95%)",
             "filePath": "src/component/utrecht/listbox.tokens.json",
             "isSource": true,
             "original": {
-              "value": "{utrecht.color.black}"
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {
+                  "syntax": "<color>",
+                  "inherits": true
+                }
+              },
+              "value": "{utrecht.color.grey.95}"
             },
-            "name": "utrechtListboxOptionHoverColor",
+            "name": "utrechtListboxOptionSelectedBackgroundColor",
             "attributes": {},
             "path": [
               "utrecht",
               "listbox",
               "option",
-              "hover",
-              "color"
+              "selected",
+              "background-color"
             ]
           },
-          "background-color": {
-            "value": "hsl(211 60% 90%)",
+          "color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              }
+            },
+            "value": "hsl(0 0% 0%)",
             "filePath": "src/component/utrecht/listbox.tokens.json",
             "isSource": true,
             "original": {
-              "value": "{utrecht.color.blue.90}"
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {
+                  "syntax": "<color>",
+                  "inherits": true
+                }
+              },
+              "value": "{utrecht.color.black}"
             },
-            "name": "utrechtListboxOptionHoverBackgroundColor",
+            "name": "utrechtListboxOptionSelectedColor",
             "attributes": {},
             "path": [
               "utrecht",
               "listbox",
               "option",
-              "hover",
-              "background-color"
+              "selected",
+              "color"
             ]
+          },
+          "disabled": {
+            "background-color": {
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {
+                  "syntax": "<color>",
+                  "inherits": true
+                }
+              }
+            },
+            "color": {
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {
+                  "syntax": "<color>",
+                  "inherits": true
+                }
+              }
+            }
+          },
+          "hover": {
+            "background-color": {
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {
+                  "syntax": "<color>",
+                  "inherits": true
+                }
+              }
+            },
+            "color": {
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {
+                  "syntax": "<color>",
+                  "inherits": true
+                }
+              }
+            }
+          }
+        },
+        "icon": {
+          "size": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<length>",
+                "inherits": true
+              }
+            }
           }
         }
       },
@@ -29886,6 +29964,53 @@
           "type": "color"
         }
       },
+      "hover": {
+        "background-color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.fallback": [
+              "utrecht.form-control.hover.background-color",
+              "utrecht.select.background-color",
+              "utrecht.form-control.background-color"
+            ],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
+        },
+        "border-color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.fallback": [
+              "utrecht.form-control.hover.border-color",
+              "utrecht.select.border-color",
+              "utrecht.form-control.border-color"
+            ],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
+        },
+        "color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.fallback": [
+              "utrecht.form-control.hover.color",
+              "utrecht.select.color",
+              "utrecht.form-control.color"
+            ],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
+        }
+      },
       "focus": {
         "background-color": {
           "$extensions": {
@@ -35289,48 +35414,6 @@
         }
       },
       "scale": {
-        "2xs": {
-          "font-size": {
-            "value": "0.5rem",
-            "comment": "8px",
-            "filePath": "src/brand/utrecht/typography.tokens.json",
-            "isSource": true,
-            "original": {
-              "value": "8px",
-              "comment": "8px"
-            },
-            "name": "utrechtTypographyScale2xsFontSize",
-            "attributes": {},
-            "path": [
-              "utrecht",
-              "typography",
-              "scale",
-              "2xs",
-              "font-size"
-            ]
-          }
-        },
-        "xs": {
-          "font-size": {
-            "value": "0.75rem",
-            "comment": "12px",
-            "filePath": "src/brand/utrecht/typography.tokens.json",
-            "isSource": true,
-            "original": {
-              "value": "12px",
-              "comment": "12px"
-            },
-            "name": "utrechtTypographyScaleXsFontSize",
-            "attributes": {},
-            "path": [
-              "utrecht",
-              "typography",
-              "scale",
-              "xs",
-              "font-size"
-            ]
-          }
-        },
         "sm": {
           "font-size": {
             "value": "0.875rem",

package/dist/dark/variables.cjs

@@ -82,7 +82,7 @@ module.exports = {
   "utrechtBlockquoteMarginInlineEnd": "1.6em",
   "utrechtBlockquoteContentColor": "hsl(0 100% 40%)",
   "utrechtBlockquoteContentFontSize": "1.125rem",
-  "utrechtBlockquoteCaptionFontSize": "0.75rem",
+  "utrechtBlockquoteCaptionFontSize": "0.875rem",
   "utrechtBlockquoteMarginBlockStart": "1.6em",
   "utrechtBlockquoteMarginBlockEnd": "1.6em",
   "utrechtBreadcrumbNavMinBlockSize": "34px",
@@ -586,10 +586,10 @@ module.exports = {
   "utrechtListboxOptionActiveBackgroundColor": "hsl(0 0% 95%)",
   "utrechtListboxOptionActiveColor": "hsl(0 0% 0%)",
   "utrechtListboxOptionActiveFontWeight": "700",
+  "utrechtListboxOptionHoverBackgroundColor": "hsl(211 60% 90%)",
+  "utrechtListboxOptionHoverColor": "hsl(0 0% 0%)",
   "utrechtListboxOptionSelectedBackgroundColor": "hsl(0 0% 95%)",
   "utrechtListboxOptionSelectedColor": "hsl(0 0% 0%)",
-  "utrechtListboxOptionHoverColor": "hsl(0 0% 0%)",
-  "utrechtListboxOptionHoverBackgroundColor": "hsl(211 60% 90%)",
   "utrechtListboxOptionGroupMarginBlockEnd": "8px",
   "utrechtListboxOptionGroupTitleFontSize": "1rem",
   "utrechtListboxOptionGroupTitleFontWeight": "700",
@@ -939,8 +939,6 @@ module.exports = {
   "utrechtIconScale3xl": "36px",
   "utrechtIconScale4xl": "48px",
   "utrechtTypographySansSerifFontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
-  "utrechtTypographyScale2xsFontSize": "0.5rem",
-  "utrechtTypographyScaleXsFontSize": "0.75rem",
   "utrechtTypographyScaleSmFontSize": "0.875rem",
   "utrechtTypographyScaleMdFontSize": "1rem",
   "utrechtTypographyScaleLgFontSize": "1.125rem",

package/dist/dark/variables.css

@@ -8,14 +8,12 @@
   --utrecht-unordered-list-item-margin-block-end: 0.25rem;
   --utrecht-typography-weight-scale-normal-font-weight: 400;
   --utrecht-typography-weight-scale-bold-font-weight: 700;
-  --utrecht-typography-scale-xs-font-size: 0.75rem; /* 12px */
   --utrecht-typography-scale-xl-font-size: 1.25rem; /* 20px */
   --utrecht-typography-scale-sm-font-size: 0.875rem; /* 14px */
   --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
   --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
   --utrecht-typography-scale-4xl-font-size: 2rem; /* 32px */
   --utrecht-typography-scale-3xl-font-size: 1.5rem; /* 24px */
-  --utrecht-typography-scale-2xs-font-size: 0.5rem; /* 8px */
   --utrecht-typography-scale-2xl-font-size: 1.375rem; /* 22px */
   --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
   --utrecht-typography-line-height-xs: 1;
@@ -829,7 +827,7 @@
   --utrecht-breadcrumb-nav-arrows-link-background-color: var(--utrecht-color-grey-90);
   --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
   --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
-  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-xs-font-size);
+  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
   --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm); /* Default inline padding color for badge components */
   --utrecht-badge-padding-block: var(--utrecht-space-block-xs); /* Default block padding for badge components */
   --utrecht-badge-list-item-margin-inline: var(--utrecht-space-block-sm);

package/dist/dark/variables.d.ts

@@ -649,10 +649,10 @@ export const utrechtListboxOptionPaddingInlineStart : string;
 export const utrechtListboxOptionActiveBackgroundColor : string;
 export const utrechtListboxOptionActiveColor : string;
 export const utrechtListboxOptionActiveFontWeight : string;
+export const utrechtListboxOptionHoverBackgroundColor : string;
+export const utrechtListboxOptionHoverColor : string;
 export const utrechtListboxOptionSelectedBackgroundColor : string;
 export const utrechtListboxOptionSelectedColor : string;
-export const utrechtListboxOptionHoverColor : string;
-export const utrechtListboxOptionHoverBackgroundColor : string;
 export const utrechtListboxOptionGroupMarginBlockEnd : string;
 export const utrechtListboxOptionGroupTitleFontSize : string;
 export const utrechtListboxOptionGroupTitleFontWeight : string;
@@ -1052,10 +1052,6 @@ export const utrechtIconScale2xl : string;
 export const utrechtIconScale3xl : string;
 export const utrechtIconScale4xl : string;
 export const utrechtTypographySansSerifFontFamily : string;
-/** 8px */
-export const utrechtTypographyScale2xsFontSize : string;
-/** 12px */
-export const utrechtTypographyScaleXsFontSize : string;
 /** 14px */
 export const utrechtTypographyScaleSmFontSize : string;
 /** 16px */

package/dist/dark/variables.json

@@ -129,7 +129,7 @@
   "utrechtBadgeListItemMarginInline": "12px",
   "utrechtBadgePaddingBlock": "8px",
   "utrechtBadgePaddingInline": "12px",
-  "utrechtBlockquoteCaptionFontSize": "0.75rem",
+  "utrechtBlockquoteCaptionFontSize": "0.875rem",
   "utrechtBlockquoteContentColor": "hsl(0 100% 40%)",
   "utrechtBlockquoteContentFontSize": "1.125rem",
   "utrechtBlockquoteMarginBlockEnd": "1.6em",
@@ -1000,14 +1000,12 @@
   "utrechtTypographyLineHeightXs": "1",
   "utrechtTypographySansSerifFontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
   "utrechtTypographyScale2xlFontSize": "1.375rem",
-  "utrechtTypographyScale2xsFontSize": "0.5rem",
   "utrechtTypographyScale3xlFontSize": "1.5rem",
   "utrechtTypographyScale4xlFontSize": "2rem",
   "utrechtTypographyScaleLgFontSize": "1.125rem",
   "utrechtTypographyScaleMdFontSize": "1rem",
   "utrechtTypographyScaleSmFontSize": "0.875rem",
   "utrechtTypographyScaleXlFontSize": "1.25rem",
-  "utrechtTypographyScaleXsFontSize": "0.75rem",
   "utrechtTypographyWeightScaleBoldFontWeight": "700",
   "utrechtTypographyWeightScaleNormalFontWeight": "400",
   "utrechtUnorderedListItemMarginBlockEnd": "0.25rem",

package/dist/dark/variables.less

@@ -30,8 +30,6 @@
 @utrecht-typography-scale-lg-font-size: 1.125rem; // 18px
 @utrecht-typography-scale-md-font-size: 1rem; // 16px
 @utrecht-typography-scale-sm-font-size: 0.875rem; // 14px
-@utrecht-typography-scale-xs-font-size: 0.75rem; // 12px
-@utrecht-typography-scale-2xs-font-size: 0.5rem; // 8px
 @utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
 @utrecht-icon-scale-4xl: 48px;
 @utrecht-icon-scale-3xl: 36px; // Formaat voor toptaks iconen
@@ -606,10 +604,10 @@
 @utrecht-listbox-option-group-title-font-weight: @utrecht-typography-weight-scale-bold-font-weight;
 @utrecht-listbox-option-group-title-font-size: @utrecht-typography-scale-md-font-size;
 @utrecht-listbox-option-group-margin-block-end: @utrecht-space-inline-xs;
-@utrecht-listbox-option-hover-background-color: @utrecht-color-blue-90;
-@utrecht-listbox-option-hover-color: @utrecht-color-black;
 @utrecht-listbox-option-selected-color: @utrecht-color-black;
 @utrecht-listbox-option-selected-background-color: @utrecht-color-grey-95;
+@utrecht-listbox-option-hover-color: @utrecht-color-black;
+@utrecht-listbox-option-hover-background-color: @utrecht-color-blue-90;
 @utrecht-listbox-option-active-font-weight: @utrecht-typography-weight-scale-bold-font-weight;
 @utrecht-listbox-option-active-color: @utrecht-color-black;
 @utrecht-listbox-option-active-background-color: @utrecht-color-grey-95;
@@ -865,7 +863,7 @@
 @utrecht-breadcrumb-nav-item-padding-block-end: @utrecht-space-block-xs;
 @utrecht-breadcrumb-nav-item-padding-block-start: @utrecht-space-block-xs;
 @utrecht-breadcrumb-nav-font-size: @utrecht-typography-scale-md-font-size;
-@utrecht-blockquote-caption-font-size: @utrecht-typography-scale-xs-font-size;
+@utrecht-blockquote-caption-font-size: @utrecht-typography-scale-sm-font-size;
 @utrecht-blockquote-content-font-size: @utrecht-typography-scale-lg-font-size;
 @utrecht-blockquote-content-color: @utrecht-color-red-40;
 @utrecht-badge-font-style: @utrecht-typography-font-style-normal;

package/dist/dark/variables.mjs

@@ -81,7 +81,7 @@ export const utrechtBlockquoteMarginInlineStart = "1.6em";
 export const utrechtBlockquoteMarginInlineEnd = "1.6em";
 export const utrechtBlockquoteContentColor = "hsl(0 100% 40%)";
 export const utrechtBlockquoteContentFontSize = "1.125rem";
-export const utrechtBlockquoteCaptionFontSize = "0.75rem";
+export const utrechtBlockquoteCaptionFontSize = "0.875rem";
 export const utrechtBlockquoteMarginBlockStart = "1.6em";
 export const utrechtBlockquoteMarginBlockEnd = "1.6em";
 export const utrechtBreadcrumbNavMinBlockSize = "34px";
@@ -585,10 +585,10 @@ export const utrechtListboxOptionPaddingInlineStart = "8px";
 export const utrechtListboxOptionActiveBackgroundColor = "hsl(0 0% 95%)";
 export const utrechtListboxOptionActiveColor = "hsl(0 0% 0%)";
 export const utrechtListboxOptionActiveFontWeight = "700";
+export const utrechtListboxOptionHoverBackgroundColor = "hsl(211 60% 90%)";
+export const utrechtListboxOptionHoverColor = "hsl(0 0% 0%)";
 export const utrechtListboxOptionSelectedBackgroundColor = "hsl(0 0% 95%)";
 export const utrechtListboxOptionSelectedColor = "hsl(0 0% 0%)";
-export const utrechtListboxOptionHoverColor = "hsl(0 0% 0%)";
-export const utrechtListboxOptionHoverBackgroundColor = "hsl(211 60% 90%)";
 export const utrechtListboxOptionGroupMarginBlockEnd = "8px";
 export const utrechtListboxOptionGroupTitleFontSize = "1rem";
 export const utrechtListboxOptionGroupTitleFontWeight = "700";
@@ -938,8 +938,6 @@ export const utrechtIconScale2xl = "30px"; // Formaat voor marker iconen
 export const utrechtIconScale3xl = "36px"; // Formaat voor toptaks iconen
 export const utrechtIconScale4xl = "48px";
 export const utrechtTypographySansSerifFontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
-export const utrechtTypographyScale2xsFontSize = "0.5rem"; // 8px
-export const utrechtTypographyScaleXsFontSize = "0.75rem"; // 12px
 export const utrechtTypographyScaleSmFontSize = "0.875rem"; // 14px
 export const utrechtTypographyScaleMdFontSize = "1rem"; // 16px
 export const utrechtTypographyScaleLgFontSize = "1.125rem"; // 18px

package/dist/index.cjs

@@ -80,7 +80,7 @@ module.exports = {
   "utrechtBlockquoteMarginInlineEnd": "1.6em",
   "utrechtBlockquoteContentColor": "hsl(0 100% 40%)",
   "utrechtBlockquoteContentFontSize": "1.125rem",
-  "utrechtBlockquoteCaptionFontSize": "0.75rem",
+  "utrechtBlockquoteCaptionFontSize": "0.875rem",
   "utrechtBlockquoteMarginBlockStart": "1.6em",
   "utrechtBlockquoteMarginBlockEnd": "1.6em",
   "utrechtBreadcrumbNavMinBlockSize": "34px",
@@ -577,10 +577,10 @@ module.exports = {
   "utrechtListboxOptionActiveBackgroundColor": "hsl(0 0% 95%)",
   "utrechtListboxOptionActiveColor": "hsl(0 0% 0%)",
   "utrechtListboxOptionActiveFontWeight": "700",
+  "utrechtListboxOptionHoverBackgroundColor": "hsl(211 60% 90%)",
+  "utrechtListboxOptionHoverColor": "hsl(0 0% 0%)",
   "utrechtListboxOptionSelectedBackgroundColor": "hsl(0 0% 95%)",
   "utrechtListboxOptionSelectedColor": "hsl(0 0% 0%)",
-  "utrechtListboxOptionHoverColor": "hsl(0 0% 0%)",
-  "utrechtListboxOptionHoverBackgroundColor": "hsl(211 60% 90%)",
   "utrechtListboxOptionGroupMarginBlockEnd": "8px",
   "utrechtListboxOptionGroupTitleFontSize": "1rem",
   "utrechtListboxOptionGroupTitleFontWeight": "700",
@@ -928,8 +928,6 @@ module.exports = {
   "utrechtIconScale3xl": "36px",
   "utrechtIconScale4xl": "48px",
   "utrechtTypographySansSerifFontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
-  "utrechtTypographyScale2xsFontSize": "0.5rem",
-  "utrechtTypographyScaleXsFontSize": "0.75rem",
   "utrechtTypographyScaleSmFontSize": "0.875rem",
   "utrechtTypographyScaleMdFontSize": "1rem",
   "utrechtTypographyScaleLgFontSize": "1.125rem",

package/dist/index.css

@@ -59,8 +59,6 @@
   --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
   --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
   --utrecht-typography-scale-sm-font-size: 0.875rem; /* 14px */
-  --utrecht-typography-scale-xs-font-size: 0.75rem; /* 12px */
-  --utrecht-typography-scale-2xs-font-size: 0.5rem; /* 8px */
   --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
   --utrecht-icon-scale-4xl: 48px;
   --utrecht-icon-scale-3xl: 36px; /* Formaat voor toptaks iconen */
@@ -630,10 +628,10 @@
   --utrecht-listbox-option-group-title-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   --utrecht-listbox-option-group-title-font-size: var(--utrecht-typography-scale-md-font-size);
   --utrecht-listbox-option-group-margin-block-end: var(--utrecht-space-inline-xs);
-  --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
-  --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
   --utrecht-listbox-option-selected-color: var(--utrecht-color-black);
   --utrecht-listbox-option-selected-background-color: var(--utrecht-color-grey-95);
+  --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
+  --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
   --utrecht-listbox-option-active-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   --utrecht-listbox-option-active-color: var(--utrecht-color-black);
   --utrecht-listbox-option-active-background-color: var(--utrecht-color-grey-95);
@@ -893,7 +891,7 @@
   --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
   --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
   --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
-  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-xs-font-size);
+  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
   --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
   --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
   --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
@@ -1077,8 +1075,6 @@
     --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
     --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
     --utrecht-typography-scale-sm-font-size: 0.875rem; /* 14px */
-    --utrecht-typography-scale-xs-font-size: 0.75rem; /* 12px */
-    --utrecht-typography-scale-2xs-font-size: 0.5rem; /* 8px */
     --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
     --utrecht-icon-scale-4xl: 48px;
     --utrecht-icon-scale-3xl: 36px; /* Formaat voor toptaks iconen */
@@ -1653,10 +1649,10 @@
     --utrecht-listbox-option-group-title-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
     --utrecht-listbox-option-group-title-font-size: var(--utrecht-typography-scale-md-font-size);
     --utrecht-listbox-option-group-margin-block-end: var(--utrecht-space-inline-xs);
-    --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
-    --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
     --utrecht-listbox-option-selected-color: var(--utrecht-color-black);
     --utrecht-listbox-option-selected-background-color: var(--utrecht-color-grey-95);
+    --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
+    --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
     --utrecht-listbox-option-active-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
     --utrecht-listbox-option-active-color: var(--utrecht-color-black);
     --utrecht-listbox-option-active-background-color: var(--utrecht-color-grey-95);
@@ -1912,7 +1908,7 @@
     --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
     --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
     --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
-    --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-xs-font-size);
+    --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
     --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
     --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
     --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
@@ -2066,3 +2062,81 @@
     --utrecht-feedback-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
   }
 }
+.utrecht-theme--viewport-scale {
+  /* stylelint-disable number-max-precision */
+  --ams-text-level-6-line-height: 1.6;
+  --ams-text-level-6-font-size: clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem);
+  --ams-text-level-5-line-height: 1.6;
+  --ams-text-level-5-font-size: clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem);
+  --ams-text-level-4-line-height: 1.5;
+  --ams-text-level-4-font-size: clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem);
+  --ams-text-level-3-line-height: 1.3;
+  --ams-text-level-3-font-size: clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem);
+  --ams-text-level-2-line-height: 1.25;
+  --ams-text-level-2-font-size: clamp(1.7865rem, calc(1.5007rem + 1.429vw), 2.9297rem);
+  --ams-text-level-1-line-height: 1.2;
+  --ams-text-level-1-font-size: clamp(2.0842rem, calc(1.6897rem + 1.9724vw), 3.6621rem);
+  --ams-text-level-0-line-height: 1.15;
+  --ams-text-level-0-font-size: clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem);
+  --ams-space-grid-xl: clamp(2rem, calc(0.75rem + 6.25vw), 7rem);
+  --ams-space-grid-lg: clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem);
+  --ams-space-grid-md: clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem);
+  --ams-space-grid-sm: clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem);
+  --ams-space-grid-xs: clamp(0.25rem, calc(0.09375rem + 0.78125vw), 0.875rem);
+  --ams-space-xl: clamp(2.25rem, 2.0625rem + 0.9375vw, 3rem);
+  --ams-space-lg: clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem);
+  --ams-space-md: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem);
+  --ams-space-sm: clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem);
+  --ams-space-xs: clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem);
+  --utrecht-typography-scale-4xl-font-size: var(--ams-text-level-0-font-size);
+  --utrecht-typography-scale-3xl-font-size: var(--ams-text-level-1-font-size);
+  --utrecht-typography-scale-2xl-font-size: var(--ams-text-level-2-font-size);
+  --utrecht-typography-scale-xl-font-size: var(--ams-text-level-3-font-size);
+  --utrecht-typography-scale-lg-font-size: var(--ams-text-level-4-font-size);
+  --utrecht-typography-scale-md-font-size: var(--ams-text-level-5-font-size);
+  --utrecht-typography-scale-sm-font-size: var(--ams-text-level-6-font-size);
+  --utrecht-space-column-5xl: calc(var(--ams-space-grid-xl) * var(--utrecht-space-column-scale, 1));
+  --utrecht-space-column-4xl: calc(var(--ams-space-grid-lg) * var(--utrecht-space-column-scale, 1));
+  --utrecht-space-column-3xl: calc(var(--ams-space-grid-md) * var(--utrecht-space-column-scale, 1));
+  --utrecht-space-column-2xl: calc(var(--ams-space-grid-sm) * var(--utrecht-space-column-scale, 1) * 1.75);
+  --utrecht-space-column-xl: calc(var(--ams-space-grid-sm) * var(--utrecht-space-column-scale, 1) * 1.5);
+  --utrecht-space-column-lg: calc(var(--ams-space-grid-sm) * var(--utrecht-space-column-scale, 1) * 1.25);
+  --utrecht-space-column-md: calc(var(--ams-space-grid-sm) * var(--utrecht-space-column-scale, 1));
+  --utrecht-space-column-sm: calc(var(--ams-space-grid-sm) * var(--utrecht-space-column-scale, 1) * 0.75);
+  --utrecht-space-column-xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-column-scale, 1));
+  --utrecht-space-column-2xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-column-scale, 1) / 2);
+  --utrecht-space-column-3xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-column-scale, 1) / 4);
+  --utrecht-space-column-4xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-column-scale, 1) / 8);
+  --utrecht-space-row-5xl: calc(var(--ams-space-grid-xl) * var(--utrecht-space-row-scale, 1));
+  --utrecht-space-row-4xl: calc(var(--ams-space-grid-lg) * var(--utrecht-space-row-scale, 1));
+  --utrecht-space-row-3xl: calc(var(--ams-space-grid-md) * var(--utrecht-space-row-scale, 1));
+  --utrecht-space-row-2xl: calc(var(--ams-space-grid-sm) * var(--utrecht-space-row-scale, 1) * 1.75);
+  --utrecht-space-row-xl: calc(var(--ams-space-grid-sm) * var(--utrecht-space-row-scale, 1) * 1.5);
+  --utrecht-space-row-lg: calc(var(--ams-space-grid-sm) * var(--utrecht-space-row-scale, 1) * 1.25);
+  --utrecht-space-row-md: calc(var(--ams-space-grid-sm) * var(--utrecht-space-row-scale, 1));
+  --utrecht-space-row-sm: calc(var(--ams-space-grid-sm) * var(--utrecht-space-row-scale, 1) * 0.75);
+  --utrecht-space-row-xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-row-scale, 1));
+  --utrecht-space-row-2xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-row-scale, 1) / 2);
+  --utrecht-space-row-3xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-row-scale, 1) / 4);
+  --utrecht-space-row-4xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-row-scale, 1) / 8);
+  --utrecht-space-inline-4xl: calc(var(--ams-space-xl) * var(--utrecht-space-inline-scale, 1) * 1.5);
+  --utrecht-space-inline-3xl: calc(var(--ams-space-xl) * var(--utrecht-space-inline-scale, 1));
+  --utrecht-space-inline-2xl: calc(var(--ams-space-lg) * var(--utrecht-space-inline-scale, 1));
+  --utrecht-space-inline-xl: calc(var(--ams-space-md) * var(--utrecht-space-inline-scale, 1) * 1.33);
+  --utrecht-space-inline-lg: calc(var(--ams-space-md) * var(--utrecht-space-inline-scale, 1) * 1.125);
+  --utrecht-space-inline-md: calc(var(--ams-space-md) * var(--utrecht-space-inline-scale, 1) * 0.9);
+  --utrecht-space-inline-sm: calc(var(--ams-space-md) * var(--utrecht-space-inline-scale, 1) * 0.75);
+  --utrecht-space-inline-xs: calc(var(--ams-space-sm) * var(--utrecht-space-inline-scale, 1));
+  --utrecht-space-inline-2xs: calc(var(--ams-space-xs) * var(--utrecht-space-inline-scale, 1));
+  --utrecht-space-inline-3xs: calc(var(--ams-space-xs) * var(--utrecht-space-inline-scale, 1) / 2);
+  --utrecht-space-block-4xl: calc(var(--ams-space-xl) * var(--utrecht-space-block-scale, 1) * 1.5);
+  --utrecht-space-block-3xl: calc(var(--ams-space-xl) * var(--utrecht-space-block-scale, 1));
+  --utrecht-space-block-2xl: calc(var(--ams-space-lg) * var(--utrecht-space-block-scale, 1));
+  --utrecht-space-block-xl: calc(var(--ams-space-md) * var(--utrecht-space-block-scale, 1) * 1.33);
+  --utrecht-space-block-lg: calc(var(--ams-space-md) * var(--utrecht-space-block-scale, 1) * 1.125);
+  --utrecht-space-block-md: calc(var(--ams-space-md) * var(--utrecht-space-block-scale, 1) * 0.9);
+  --utrecht-space-block-sm: calc(var(--ams-space-md) * var(--utrecht-space-block-scale, 1) * 0.75);
+  --utrecht-space-block-xs: calc(var(--ams-space-sm) * var(--utrecht-space-block-scale, 1));
+  --utrecht-space-block-2xs: calc(var(--ams-space-xs) * var(--utrecht-space-block-scale, 1));
+  --utrecht-space-block-3xs: calc(var(--ams-space-xs) * var(--utrecht-space-block-scale, 1) / 2);
+}