@utrecht/design-tokens 2.0.0 → 2.1.1

package/.stylelintrc.json

@@ -1,6 +1,10 @@
 {
   "extends": "../../.stylelintrc.json",
   "rules": {
-    "no-duplicate-selectors": null
+    "comment-empty-line-before": null,
+    "order/properties-alphabetical-order": null,
+    "custom-property-pattern": null,
+    "no-duplicate-selectors": null,
+    "color-hex-length": "long"
   }
 }

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @utrecht/design-tokens
 
+## 2.1.1
+
+### Patch Changes
+
+- 7fc1efc: Fix `propery.css` output. (The file was empty.)
+- 7fc1efc: No longer include `::backdrop` selectors, those are no longer needed in evergreen browsers.'
+- 3185cc0: Convert all `px` `font-size` design tokens to `rem`.
+
+## 2.1.0
+
+### Minor Changes
+
+- 7b8ebea: Add design tokens with styling for the new `ok` and `error` variants of the Spotlight Section component.
+
 ## 2.0.0
 
 ### Major Changes

package/config.json

@@ -0,0 +1,8 @@
+{
+  "fullName": "Gemeente Utrecht",
+  "name": "Utrecht",
+  "prefix": "utrecht",
+  "npm": "@utrecht/design-tokens",
+  "cdn": "https://unpkg.com/@utrecht/design-tokens/dist/index.css",
+  "stories": []
+}

package/dist/_mixin-theme.scss

@@ -1,10 +1,9 @@
 /**
- * Do not edit directly
- * Generated on Wed, 21 Aug 2024 08:24:57 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 @mixin utrecht-theme {
-  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
+  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
   --denhaag-process-steps-sub-step-marker-size: 12px;
   --denhaag-process-steps-step-marker-size: 28px;
   --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -99,20 +98,19 @@
   --utrecht-toptask-link-min-inline-size: 15rem;
   --utrecht-toptask-link-min-block-size: 8.25rem;
   --utrecht-toptask-link-line-height: 1.2;
-  --utrecht-toptask-link-font-size: 1rem;
   --utrecht-textbox-border-bottom-width: 3px;
   --utrecht-textarea-border-bottom-width: 3px;
-  --utrecht-table-footer-sticky-border-block-start-width: 2px;
+  --utrecht-textarea-border-block-end-width: 3px;
   --utrecht-table-cell-icon-size: 1em;
   --utrecht-table-cell-padding-inline-start: 0.4em;
   --utrecht-table-cell-padding-inline-end: 0.4em;
   --utrecht-table-cell-padding-block-start: 0.5em;
   --utrecht-table-cell-padding-block-end: 0.5em;
-  --utrecht-table-cell-line-height: 24px;
+  --utrecht-table-cell-line-height: 1.5rem;
+  --utrecht-table-footer-sticky-border-block-start-width: 2px;
   --utrecht-table-header-sticky-border-block-end-width: 2px;
   --utrecht-table-caption-margin-block-end: 1em;
   --utrecht-table-caption-text-align: start;
-  --utrecht-table-caption-font-size: 1.125em;
   --utrecht-table-margin-block-end: 0;
   --utrecht-separator-block-size: 8px;
   --utrecht-select-border-block-end-width: 3px;
@@ -124,10 +122,10 @@
   --utrecht-search-bar-button-hover-scale: 1;
   --utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
   --utrecht-rich-text-confidant-margin-block-end: 0;
-  --utrecht-radio-button-margin-inline-end: 12px;
   --utrecht-radio-button-border-radius: 0;
   --utrecht-radio-button-invalid-border-width: 2px;
   --utrecht-radio-button-icon-size: 42%;
+  --utrecht-radio-button-margin-inline-end: 12px;
   --utrecht-radio-button-size: 24px;
   --utrecht-radio-button-border-width: 2px;
   --utrecht-paragraph-margin-block-end: 0;
@@ -140,7 +138,6 @@
   --utrecht-pagination-relative-link-padding-inline-start: 0.5em;
   --utrecht-pagination-relative-link-padding-inline-end: 0.5em;
   --utrecht-pagination-relative-link-border-width: 2px;
-  --utrecht-pagination-page-link-border-color: transparent;
   --utrecht-pagination-page-link-distanced-margin-inline-start: 0.5em;
   --utrecht-pagination-page-link-text-decoration: none;
   --utrecht-pagination-page-link-padding-block-start: 0.5em;
@@ -148,10 +145,10 @@
   --utrecht-pagination-page-link-padding-inline-start: 0.5em;
   --utrecht-pagination-page-link-padding-inline-end: 0.5em;
   --utrecht-pagination-page-link-border-width: 2px;
+  --utrecht-pagination-page-link-border-color: transparent;
   --utrecht-pagination-page-link-background-color: transparent;
   --utrecht-pagination-margin-block-end: 1em;
   --utrecht-pagination-margin-block-start: 0;
-  --utrecht-pagination-font-size: 14px;
   --utrecht-page-padding-inline-start: 2em;
   --utrecht-page-padding-block-end: 1em;
   --utrecht-page-padding-inline-end: 2em;
@@ -159,10 +156,10 @@
   --utrecht-page-max-inline-size: 1184px;
   --utrecht-page-margin-inline-end: 2em;
   --utrecht-page-margin-inline-start: 2em;
-  --utrecht-page-header-padding-block-start: 1.8em;
-  --utrecht-page-header-padding-inline-start: 2em;
   --utrecht-page-header-padding-inline-end: 2.4em;
+  --utrecht-page-header-padding-inline-start: 2em;
   --utrecht-page-header-padding-block-end: 1em;
+  --utrecht-page-header-padding-block-start: 1.8em;
   --utrecht-page-content-padding-block-end: 2em;
   --utrecht-page-content-padding-block-start: 2em;
   --utrecht-ordered-list-item-padding-inline-start: 0;
@@ -173,12 +170,14 @@
   --utrecht-ordered-list-margin-block-start: 0;
   --utrecht-number-data-negative-color: red;
   --utrecht-number-data-positive-color: green;
+  --utrecht-number-badge-padding-inline: 1ex; /* Default inline padding color for badge components */
+  --utrecht-number-badge-padding-block: 1ex; /* Default block padding for badge components */
   --utrecht-topnav-link-focus-text-decoration: none;
   --utrecht-topnav-link-focus-border-type: dotted;
+  --utrecht-mapcontrolbutton-margin-inline-start: 0;
+  --utrecht-mapcontrolbutton-margin-inline-end: 0;
   --utrecht-mapcontrolbutton-focus-text-decoration: none;
   --utrecht-mapcontrolbutton-border-radius: 2px;
-  --utrecht-mapcontrolbutton-margin-inline-end: 0;
-  --utrecht-mapcontrolbutton-margin-inline-start: 0;
   --utrecht-map-marker-icon-size: 30px;
   --utrecht-map-marker-box-shadow-color: rgb(0 0 0 / 20%);
   --utrecht-map-marker-border-width: 3px;
@@ -194,11 +193,11 @@
   --utrecht-link-icon-size: 1.2em;
   --utrecht-link-hover-text-decoration-thickness: 3px;
   --utrecht-link-hover-text-decoration: underline;
-  --utrecht-link-focus-text-decoration: none;
+  --utrecht-link-focus-visible-text-decoration: none;
   --utrecht-link-text-underline-offset: 3px;
   --utrecht-link-text-decoration: underline;
-  --utrecht-link-social-icon-size: 26px;
   --utrecht-link-social-hover-transform-scale: 1.1;
+  --utrecht-link-social-icon-size: 26px;
   --utrecht-link-social-size: 40px;
   --utrecht-link-social-border-width: 2px;
   --utrecht-link-list-icon-size: 14px;
@@ -231,13 +230,11 @@
   --utrecht-form-toggle-border-radius: 10em;
   --utrecht-form-toggle-border-style: solid;
   --utrecht-form-toggle-border-color: transparent;
-  --utrecht-form-toggle-accent-color: hsla(0, 0%, 48%, 1);
+  --utrecht-form-toggle-accent-color: hsla(0 0% 48% / 100%);
   --utrecht-form-label-font-size: 1em;
-  --utrecht-form-fieldset-legend-line-height: 1.4;
-  --utrecht-form-fieldset-legend-font-size: 1rem;
   --utrecht-form-field-invalid-border-inline-start-width: 3px;
-  --utrecht-form-control-read-only-border-color: transparent;
   --utrecht-form-control-block-size: 42px;
+  --utrecht-form-control-read-only-border-color: transparent;
   --utrecht-form-control-padding-inline-start: 12px;
   --utrecht-form-control-padding-inline-end: 12px;
   --utrecht-form-control-padding-block-start: 8px;
@@ -245,15 +242,13 @@
   --utrecht-form-control-max-inline-size: 28em;
   --utrecht-form-control-border-radius: 0;
   --utrecht-focus-outline-style: dotted;
-  --utrecht-figure-caption-line-height: 20px;
-  --utrecht-figure-caption-font-size: 14px;
   --utrecht-figure-caption-color: #727272;
   --utrecht-drawer-max-inline-size: 320px;
   --utrecht-drawer-max-block-size: 240px;
   --utrecht-drawer-border-width: 1px;
   --utrecht-document-line-height: 1.4;
-  --utrecht-data-list-rows-column-min-inline-size: 25ch;
   --utrecht-data-list-rows-column-inline-size: 80%;
+  --utrecht-data-list-rows-column-min-inline-size: 25ch;
   --utrecht-space-column-5xl: 64px; /* Extra Large 5 */
   --utrecht-space-column-4xl: 48px; /* Extra Large 4 */
   --utrecht-space-column-3xl: 32px; /* Extra Large 3 */
@@ -309,20 +304,18 @@
   --utrecht-space-block-2xs: 4px; /* Extra Small 2 */
   --utrecht-space-block-3xs: 2px; /* Extra Small 3 */
   --utrecht-pointer-target-min-size: 44px;
-  --utrecht-action-inert-cursor: default;
-  --utrecht-action-activate-cursor: pointer;
   --utrecht-action-submit-cursor: pointer;
   --utrecht-action-navigate-cursor: pointer;
+  --utrecht-action-inert-cursor: default;
   --utrecht-action-disabled-cursor: not-allowed;
   --utrecht-action-busy-cursor: wait;
+  --utrecht-action-activate-cursor: pointer;
   --utrecht-column-layout-column-width: 350px;
   --utrecht-column-layout-column-rule-width: 2px;
   --utrecht-code-block-padding-inline-end: 20px;
   --utrecht-code-block-padding-inline-start: 20px;
   --utrecht-code-block-padding-block-end: 20px;
   --utrecht-code-block-padding-block-start: 20px;
-  --utrecht-code-block-line-height: 24px;
-  --utrecht-code-block-font-size: 16px;
   --utrecht-checkbox-margin-block-start: 0;
   --utrecht-checkbox-focus-border-width: 2px;
   --utrecht-checkbox-size: 24px;
@@ -342,7 +335,7 @@
   --utrecht-calendar-table-days-item-day-border-color: transparent;
   --utrecht-calendar-table-days-item-day-border-width: 2px;
   --utrecht-calendar-table-days-item-day-size: 44px;
-  --utrecht-calendar-table-weeks-item-line-height: 24px;
+  --utrecht-calendar-table-weeks-item-line-height: 1.5rem;
   --utrecht-calendar-table-weeks-item-padding-block-end: 10px;
   --utrecht-calendar-table-weeks-item-padding-block-start: 4px;
   --utrecht-calendar-table-weeks-item-width: 44px;
@@ -371,15 +364,13 @@
   --utrecht-breadcrumb-nav-min-block-size: 34px;
   --utrecht-blockquote-margin-block-end: 1.6em;
   --utrecht-blockquote-margin-block-start: 1.6em;
-  --utrecht-blockquote-content-font-size: 1.125rem;
-  --utrecht-blockquote-attribution-font-size: 0.75rem;
   --utrecht-blockquote-margin-inline-end: 1.6em;
   --utrecht-blockquote-margin-inline-start: 1.6em;
   --utrecht-badge-border-radius: 0; /* Default corner radius for badge components */
   --utrecht-badge-counter-padding-inline: 1ex; /* Default inline padding color for badge components */
   --utrecht-badge-counter-padding-block: 1ex; /* Default block padding for badge components */
   --utrecht-backdrop-reduced-transparency-opacity: 0.98;
-  --utrecht-backdrop-fade-in-animation-duration: 0.4s;
+  --utrecht-backdrop-fade-in-animation-duration: 400ms;
   --utrecht-backdrop-opacity: 0.8;
   --utrecht-article-max-inline-size: 780px;
   --utrecht-alert-icon-inset-block-start: 6px;
@@ -440,10 +431,8 @@
   --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
   --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
   --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
+  --utrecht-toptask-link-font-size: var(--utrecht-typography-scale-md-font-size);
   --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
-  --utrecht-table-footer-sticky-border-block-start-color: var(--utrecht-color-red-40);
-  --utrecht-table-footer-sticky-color: var(--utrecht-color-black);
-  --utrecht-table-footer-sticky-background-color: var(--utrecht-color-white);
   --utrecht-table-row-alternate-even-color: var(--utrecht-color-black);
   --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
   --utrecht-table-row-alternate-odd-color: var(--utrecht-color-black);
@@ -452,16 +441,22 @@
   --utrecht-table-row-border-block-end-color: var(--utrecht-color-grey-90);
   --utrecht-table-cell-selected-color: var(--utrecht-color-black);
   --utrecht-table-cell-selected-background-color: var(--utrecht-color-blue-90);
+  --utrecht-table-footer-sticky-border-block-start-color: var(--utrecht-color-red-40);
+  --utrecht-table-footer-sticky-color: var(--utrecht-color-black);
+  --utrecht-table-footer-sticky-background-color: var(--utrecht-color-white);
   --utrecht-table-header-sticky-border-block-end-color: var(--utrecht-color-red-40);
   --utrecht-table-header-sticky-color: var(--utrecht-color-black);
   --utrecht-table-header-sticky-background-color: var(--utrecht-color-white);
   --utrecht-table-header-border-block-end-width: var(--utrecht-border-width-md);
   --utrecht-table-header-border-block-end-color: var(--utrecht-color-red-40);
   --utrecht-table-header-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+  --utrecht-table-caption-font-size: var(--utrecht-typography-scale-lg-font-size);
   --utrecht-table-caption-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   --utrecht-table-margin-block-start: var(--utrecht-space-block-md);
   --utrecht-surface-color: var(--utrecht-color-grey-10);
   --utrecht-surface-background-color: var(--utrecht-color-grey-95);
+  --utrecht-spotlight-section-ok-background-color: var(--utrecht-color-green-90);
+  --utrecht-spotlight-section-error-background-color: var(--utrecht-color-red-95);
   --utrecht-spotlight-section-warning-background-color: var(--utrecht-color-yellow-80);
   --utrecht-spotlight-section-info-background-color: var(--utrecht-color-blue-90);
   --utrecht-spotlight-section-padding-inline-end: var(--utrecht-space-inline-md);
@@ -470,7 +465,7 @@
   --utrecht-spotlight-section-padding-block-start: var(--utrecht-space-block-md);
   --utrecht-spotlight-section-color: var(--utrecht-color-black);
   --utrecht-spotlight-section-background-color: var(--utrecht-color-grey-90);
-  --utrecht-skip-link-focus-text-decoration: var(--utrecht-link-focus-text-decoration);
+  --utrecht-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
   --utrecht-skip-link-text-decoration: var(--utrecht-link-text-decoration);
   --utrecht-separator-margin-block-start: var(--utrecht-space-block-md);
   --utrecht-separator-margin-block-end: var(--utrecht-space-block-md);
@@ -490,8 +485,8 @@
   --utrecht-search-bar-dropdown-border-color: var(--utrecht-color-red-40);
   --utrecht-search-bar-input-padding-inline-start: var(--utrecht-space-inline-3xl);
   --utrecht-search-bar-input-border-color: var(--utrecht-color-red-40);
-  --utrecht-search-bar-button-font-size: var(--utrecht-typography-scale-sm-font-size);
   --utrecht-search-bar-button-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+  --utrecht-search-bar-button-font-size: var(--utrecht-typography-scale-sm-font-size);
   --utrecht-search-bar-button-color: var(--utrecht-color-white);
   --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
   --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
@@ -501,8 +496,8 @@
   --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
   --utrecht-radio-button-color: var(--utrecht-color-white);
   --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
-  --utrecht-radio-button-disabled-background-color: var(--utrecht-color-grey-80);
   --utrecht-radio-button-disabled-border-color: var(--utrecht-color-grey-80);
+  --utrecht-radio-button-disabled-background-color: var(--utrecht-color-grey-80);
   --utrecht-radio-button-focus-border-color: var(--utrecht-color-blue-40);
   --utrecht-radio-button-hover-background-color: var(--utrecht-color-blue-90);
   --utrecht-radio-button-checked-focus-border-color: var(--utrecht-color-blue-20);
@@ -510,8 +505,8 @@
   --utrecht-radio-button-checked-hover-background-color: var(--utrecht-color-blue-40);
   --utrecht-radio-button-checked-active-color: var(--utrecht-color-blue-80);
   --utrecht-radio-button-checked-active-background-color: var(--utrecht-color-blue-40);
-  --utrecht-radio-button-checked-background-color: var(--utrecht-color-blue-40);
   --utrecht-radio-button-checked-border-color: var(--utrecht-color-blue-40);
+  --utrecht-radio-button-checked-background-color: var(--utrecht-color-blue-40);
   --utrecht-radio-button-active-background-color: var(--utrecht-color-blue-80);
   --utrecht-pre-heading-margin-block-start: var(--utrecht-space-row-2xl);
   --utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
@@ -524,12 +519,12 @@
   --utrecht-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
   --utrecht-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
   --utrecht-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
-  --utrecht-pagination-relative-link-border-color: var(--utrecht-color-blue-35);
   --utrecht-pagination-relative-link-hover-color: var(--utrecht-color-white);
   --utrecht-pagination-relative-link-hover-border-color: var(--utrecht-color-blue-35);
   --utrecht-pagination-relative-link-hover-background-color: var(--utrecht-color-blue-35);
   --utrecht-pagination-relative-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   --utrecht-pagination-relative-link-color: var(--utrecht-color-blue-35);
+  --utrecht-pagination-relative-link-border-color: var(--utrecht-color-blue-35);
   --utrecht-pagination-relative-link-background-color: var(--utrecht-color-white);
   --utrecht-pagination-page-link-hover-color: var(--utrecht-color-white);
   --utrecht-pagination-page-link-hover-border-color: var(--utrecht-color-blue-35);
@@ -539,6 +534,7 @@
   --utrecht-pagination-page-link-current-background-color: var(--utrecht-color-blue-35);
   --utrecht-pagination-page-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   --utrecht-pagination-page-link-color: var(--utrecht-color-blue-35);
+  --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
   --utrecht-page-color: var(--utrecht-color-black);
   --utrecht-page-background-color: var(--utrecht-color-white);
   --utrecht-page-footer-padding-block-start: var(--utrecht-space-block-3xl);
@@ -548,6 +544,9 @@
   --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);;
   --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
   --utrecht-page-footer-color: var(--utrecht-color-white);
+  --utrecht-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-number-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
+  --utrecht-number-badge-background-color: var(--utrecht-color-red-40);
   --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
   --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
   --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -575,27 +574,27 @@
   --utrecht-nav-bar-background-color: var(--utrecht-color-white);
   --utrecht-mark-color: var(--utrecht-color-black);
   --utrecht-mark-background-color: var(--utrecht-color-yellow-60);
+  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
+  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
+  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
+  --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
+  --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
+  --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
+  --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
+  --utrecht-mapcontrolbutton-label-margin-inline-start: var(--utrecht-space-inline-xs);
   --utrecht-mapcontrolbutton-hover-color: var(--utrecht-color-white);
   --utrecht-mapcontrolbutton-hover-background-color: var(--utrecht-color-grey-90);
   --utrecht-mapcontrolbutton-focus-color: var(--utrecht-color-black);
-  --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
-  --utrecht-mapcontrolbutton-label-margin-inline-start: var(--utrecht-space-inline-xs);
-  --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
-  --utrecht-mapcontrolbutton-border-style: var(--utrecht-border-style-solid);
-  --utrecht-mapcontrolbutton-border-color: var(--utrecht-color-grey-40);
-  --utrecht-mapcontrolbutton-background-color: var(--utrecht-color-white);
+  --utrecht-mapcontrolbutton-disabled-color: var(--utrecht-color-grey-80);
   --utrecht-mapcontrolbutton-disabled-border-color: var(--utrecht-color-grey-80);
   --utrecht-mapcontrolbutton-disabled-background-color: var(--utrecht-color-grey-90);
-  --utrecht-mapcontrolbutton-disabled-color: var(--utrecht-color-grey-80);
-  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
-  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
-  --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
-  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
-  --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
-  --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
   --utrecht-mapcontrolbutton-min-inline-size: var(--utrecht-space-block-2xl);
   --utrecht-mapcontrolbutton-min-block-size: var(--utrecht-space-block-2xl);
+  --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
   --utrecht-mapcontrolbutton-border-width: var(--utrecht-border-width-sm);
+  --utrecht-mapcontrolbutton-border-style: var(--utrecht-border-style-solid);
+  --utrecht-mapcontrolbutton-border-color: var(--utrecht-color-grey-40);
+  --utrecht-mapcontrolbutton-background-color: var(--utrecht-color-white);
   --utrecht-map-marker-border-color: var(--utrecht-color-white);
   --utrecht-map-marker-color: var(--utrecht-color-white);
   --utrecht-map-marker-background-color: var(--utrecht-color-blue-30);
@@ -619,8 +618,8 @@
   --utrecht-link-placeholder-color: var(--utrecht-color-grey-40);
   --utrecht-link-focus-color: var(--utrecht-color-blue-40);
   --utrecht-link-color: var(--utrecht-color-blue-35);
-  --utrecht-link-social-color: var(--utrecht-color-white);
   --utrecht-link-social-margin-inline-start: var(--utrecht-space-inline-sm);
+  --utrecht-link-social-color: var(--utrecht-color-white);
   --utrecht-link-social-border-color: var(--utrecht-color-white);
   --utrecht-link-social-background-color: var(--utrecht-color-red-40);
   --utrecht-link-list-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
@@ -669,7 +668,9 @@
   --utrecht-form-fieldset-legend-disabled-color: var(--utrecht-color-grey-40);
   --utrecht-form-fieldset-legend-margin-block-start: var(--utrecht-space-block-xl);
   --utrecht-form-fieldset-legend-margin-block-end: var(--utrecht-space-block-sm);
+  --utrecht-form-fieldset-legend-line-height: var(--utrecht-typography-line-height-md);
   --utrecht-form-fieldset-legend-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+  --utrecht-form-fieldset-legend-font-size: var(--utrecht-typography-scale-md-font-size);
   --utrecht-form-fieldset-section-color: var(--utrecht-color-black);
   --utrecht-form-fieldset-section-background-color: var(--utrecht-color-grey-80);
   --utrecht-form-fieldset-margin-block-start: var(--utrecht-space-block-2xs);
@@ -694,6 +695,8 @@
   --utrecht-focus-outline-width: var(--utrecht-border-width-md);
   --utrecht-focus-outline-color: var(--utrecht-color-black);
   --utrecht-focus-background-color: var(--utrecht-color-yellow-60);
+  --utrecht-figure-caption-line-height: var(--utrecht-typography-line-height-md);
+  --utrecht-figure-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
   --utrecht-emphasis-strong-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   --utrecht-drawer-padding-inline-end: var(--utrecht-space-inline-md);
   --utrecht-drawer-padding-inline-start: var(--utrecht-space-inline-md);
@@ -729,6 +732,8 @@
   --utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
   --utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
   --utrecht-code-block-margin-block-start: var(--utrecht-space-block-lg);
+  --utrecht-code-block-line-height: var(--utrecht-typography-line-height-md);
+  --utrecht-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
   --utrecht-code-block-color: var(--utrecht-color-black);
   --utrecht-code-block-background-color: var(--utrecht-color-grey-95);
   --utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
@@ -832,7 +837,6 @@
   --utrecht-button-disabled-color: var(--utrecht-color-grey-80);
   --utrecht-button-disabled-border-color: var(--utrecht-color-grey-80);
   --utrecht-button-disabled-background-color: var(--utrecht-color-grey-90);
-  --utrecht-button-icon-gap: var(--utrecht-space-text-xs);
   --utrecht-button-active-color: var(--utrecht-color-white);
   --utrecht-button-active-background-color: var(--utrecht-color-grey-40);
   --utrecht-button-padding-inline-end: var(--utrecht-space-inline-md);
@@ -843,6 +847,7 @@
   --utrecht-button-margin-block-start: var(--utrecht-space-row-xs);
   --utrecht-button-font-size: var(--utrecht-typography-scale-md-font-size);
   --utrecht-button-font-family: var(--utrecht-typography-sans-serif-font-family);
+  --utrecht-button-column-gap: var(--utrecht-space-text-xs);
   --utrecht-button-color: var(--utrecht-color-grey-40);
   --utrecht-button-border-color: var(--utrecht-color-grey-40);
   --utrecht-button-background-color: var(--utrecht-color-white);
@@ -861,6 +866,8 @@
   --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-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);
   --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm); /* Default inline padding color for badge components */
@@ -917,6 +924,7 @@
   --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-xs);
   --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
   --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
+  --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
   --of-progress-indicator-background-color: var(--utrecht-document-background-color);
   --of-page-footer-fg: var(--utrecht-page-footer-color);
   --of-page-footer-bg: var(--utrecht-page-footer-background-color);
@@ -926,8 +934,8 @@
   --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
   --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
   --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
-  --utrecht-skip-link-focus-background-color: var(--utrecht-topnav-link-focus-background-color);
   --utrecht-skip-link-focus-color: var(--utrecht-topnav-link-focus-color);
+  --utrecht-skip-link-focus-background-color: var(--utrecht-topnav-link-focus-background-color);
   --utrecht-skip-link-padding-inline-end: var(--utrecht-button-padding-inline-end);
   --utrecht-skip-link-padding-inline-start: var(--utrecht-button-padding-inline-start);
   --utrecht-skip-link-padding-block-end: var(--utrecht-button-padding-block-end);
@@ -937,6 +945,7 @@
   --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
   --utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
   --utrecht-paragraph-lead-color: var(--utrecht-document-color);
+  --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size);
   --utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
   --utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
   --utrecht-link-visited-color: var(--utrecht-link-color);