@utrecht/design-tokens 2.1.1 → 2.2.0

package/dist/tokens.json

@@ -3512,7 +3512,7 @@
             }
           },
           "type": "fontSize",
-          "value": "0.75rem",
+          "value": "0.875rem",
           "filePath": "src/component/utrecht/blockquote.tokens.json",
           "isSource": true,
           "original": {
@@ -3527,7 +3527,7 @@
               }
             },
             "type": "fontSize",
-            "value": "{utrecht.typography.scale.xs.font-size}"
+            "value": "{utrecht.typography.scale.sm.font-size}"
           },
           "name": "utrechtBlockquoteCaptionFontSize",
           "attributes": {},
@@ -22761,7 +22761,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": {
@@ -22769,7 +22787,7 @@
                 "inherits": true
               }
             },
-            "value": "hsl(0 0% 95%)",
+            "value": "hsl(211 60% 90%)",
             "filePath": "src/component/utrecht/listbox.tokens.json",
             "isSource": true,
             "original": {
@@ -22779,15 +22797,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"
             ]
           },
@@ -22810,61 +22828,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
+              }
+            }
           }
         }
       },
@@ -30976,6 +31054,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": {
@@ -36431,48 +36556,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/variables.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/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;
@@ -828,7 +826,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/variables.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/variables.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/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
@@ -601,10 +599,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;
@@ -864,7 +862,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/variables.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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.1.1",
+  "version": "2.2.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/brand/utrecht/typography.tokens.json

@@ -5,8 +5,6 @@
         "font-family": { "value": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif" }
       },
       "scale": {
-        "2xs": { "font-size": { "value": "8px", "comment": "8px" } },
-        "xs": { "font-size": { "value": "12px", "comment": "12px" } },
         "sm": { "font-size": { "value": "14px", "comment": "14px" } },
         "md": { "font-size": { "value": "16px", "comment": "16px" } },
         "lg": { "font-size": { "value": "18px", "comment": "18px" } },

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

@@ -14,7 +14,7 @@
       "font-size": {},
       "caption": {
         "color": {},
-        "font-size": { "value": "{utrecht.typography.scale.xs.font-size}" }
+        "font-size": { "value": "{utrecht.typography.scale.sm.font-size}" }
       },
       "content": {
         "color": { "value": "{utrecht.color.red.40}" },

package/src/index.scss

@@ -30,3 +30,82 @@
     @include utrecht-theme--dark;
   }
 }
+
+.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);
+}