@utrecht/design-tokens 2.1.1 → 2.3.0

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);
+}

package/dist/index.d.ts

@@ -640,10 +640,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;
@@ -1041,10 +1041,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/index.flat.json

@@ -127,7 +127,7 @@
   "utrechtBadgeListItemMarginInline": "12px",
   "utrechtBadgePaddingBlock": "8px",
   "utrechtBadgePaddingInline": "12px",
-  "utrechtBlockquoteCaptionFontSize": "0.75rem",
+  "utrechtBlockquoteCaptionFontSize": "0.875rem",
   "utrechtBlockquoteContentColor": "hsl(0 100% 40%)",
   "utrechtBlockquoteContentFontSize": "1.125rem",
   "utrechtBlockquoteMarginBlockEnd": "1.6em",
@@ -989,14 +989,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/index.json

@@ -4255,7 +4255,7 @@
       }
     },
     "type": "fontSize",
-    "value": "0.75rem",
+    "value": "0.875rem",
     "filePath": "src/component/utrecht/blockquote.tokens.json",
     "isSource": true,
     "original": {
@@ -4270,7 +4270,7 @@
         }
       },
       "type": "fontSize",
-      "value": "{utrecht.typography.scale.xs.font-size}"
+      "value": "{utrecht.typography.scale.sm.font-size}"
     },
     "name": "utrechtBlockquoteCaptionFontSize",
     "attributes": {},
@@ -19898,10 +19898,22 @@
     ]
   },
   {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<color>",
+        "inherits": true
+      }
+    },
     "value": "hsl(211 60% 90%)",
     "filePath": "src/component/utrecht/listbox.tokens.json",
     "isSource": true,
     "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<color>",
+          "inherits": true
+        }
+      },
       "value": "{utrecht.color.blue.90}"
     },
     "name": "utrechtListboxOptionHoverBackgroundColor",
@@ -19915,10 +19927,22 @@
     ]
   },
   {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<color>",
+        "inherits": true
+      }
+    },
     "value": "hsl(0 0% 0%)",
     "filePath": "src/component/utrecht/listbox.tokens.json",
     "isSource": true,
     "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<color>",
+          "inherits": true
+        }
+      },
       "value": "{utrecht.color.black}"
     },
     "name": "utrechtListboxOptionHoverColor",
@@ -31454,25 +31478,6 @@
       "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"
-    ]
-  },
   {
     "value": "1.5rem",
     "comment": "24px",
@@ -31587,25 +31592,6 @@
       "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"
-    ]
-  },
   {
     "value": "700",
     "filePath": "src/brand/utrecht/typography.tokens.json",

package/dist/index.mjs

@@ -79,7 +79,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";
@@ -576,10 +576,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";
@@ -927,8 +927,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