@utrecht/design-tokens 2.0.0 → 2.1.1

package/dist/dark/_variables.scss

@@ -0,0 +1,1019 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$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;
+$utrecht-stack-focus-z-index: 1;
+$utrecht-border-style-dotted: dotted;
+$utrecht-border-style-solid: solid;
+$utrecht-border-radius-none: 0;
+$utrecht-border-radius-round: 999px;
+$utrecht-border-radius-lg: 8px;
+$utrecht-border-radius-md: 4px;
+$utrecht-border-radius-sm: 2px;
+$utrecht-border-width-md: 2px;
+$utrecht-border-width-sm: 1px;
+$utrecht-typography-line-height-lg: 2;
+$utrecht-typography-line-height-md: 1.5;
+$utrecht-typography-line-height-sm: 1.25;
+$utrecht-typography-line-height-xs: 1;
+$utrecht-typography-font-style-inherit: inherit;
+$utrecht-typography-font-style-normal: normal;
+$utrecht-typography-weight-scale-normal-font-weight: 400;
+$utrecht-typography-weight-scale-bold-font-weight: 700;
+$utrecht-typography-scale-4xl-font-size: 2rem; // 32px
+$utrecht-typography-scale-3xl-font-size: 1.5rem; // 24px
+$utrecht-typography-scale-2xl-font-size: 1.375rem; // 22px
+$utrecht-typography-scale-xl-font-size: 1.25rem; // 20px
+$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
+$utrecht-icon-scale-2xl: 30px; // Formaat voor marker iconen
+$utrecht-icon-scale-xl: 26px; // Formaat social media iconen
+$utrecht-icon-scale-lg: 24px; // Voor kalender iconen
+$utrecht-icon-scale-md: 16px; // Formaat voor radio button
+$utrecht-icon-scale-sm: 12px;
+$utrecht-icon-scale-xs: 8px;
+$utrecht-icon-scale-2xs: 4px;
+$utrecht-icon-scale-3xs: 1px;
+$utrecht-color-black: hsl(0 0% 0%);
+$utrecht-color-white: hsl(0 0% 100%);
+$utrecht-color-invalid: #990000;
+$utrecht-color-secondary-grey: #757575; // Grijs
+$utrecht-color-secondary-brown: #ad643b; // Bruin
+$utrecht-color-secondary-navy: #1c4181; // Marineblauw
+$utrecht-color-secondary-blue: #006dff; // Blauw
+$utrecht-color-secondary-cyan: #009ed4; // Cyaan
+$utrecht-color-secondary-green: #32ab27; // Groen
+$utrecht-color-secondary-lime: #99d000; // Lime
+$utrecht-color-secondary-yellow: #ffcc00; // Geel
+$utrecht-color-secondary-orange: #ff6e00; // Oranje
+$utrecht-color-secondary-red: #cc0000; // Red
+$utrecht-color-secondary-magenta: #f02198; // Magenta
+$utrecht-color-secondary-purple: #762cd1; // Paars
+$utrecht-color-green-90: hsl(90 30% 90%); // Achtergrond licht groen
+$utrecht-color-green-80: hsl(90 30% 80%); // Licht groen
+$utrecht-color-green-50: hsl(90 30% 50%); // Standaard groen #80a659 
+$utrecht-color-green-40: hsl(90 30% 38%); // donker groen
+$utrecht-color-green-30: hsl(90 30% 30%); // donker groen voor darkmode achtergrond
+$utrecht-color-yellow-80: hsl(48 100% 80%); // spotlight en uitgelicht
+$utrecht-color-yellow-60: hsl(48 100% 60%); // selecteer geel
+$utrecht-color-yellow-50: hsl(48 100% 50%); // basis geel #ffcc00
+$utrecht-color-yellow-40: hsl(48 100% 40%); // donker geel
+$utrecht-color-yellow-20: hsl(48 100% 20%); // donker geel voor darkmode achtergrond
+$utrecht-color-grey-95: hsl(0 0% 95%); // grijs variant voor achtergrond accordion #f2f2f2
+$utrecht-color-grey-90: hsl(0 0% 90%); // grijs variant voor achtergrond templates #e6e6e6
+$utrecht-color-grey-80: hsl(0 0% 80%); // grijs variant voor achtergrond content #e5e5e5
+$utrecht-color-grey-40: hsl(0 0% 40%); // basis grijs #727272
+$utrecht-color-grey-30: hsl(0 0% 30%); // border grijs #888
+$utrecht-color-grey-20: hsl(0 0% 20%); // experimenteel / beperkt gebruiken
+$utrecht-color-grey-15: hsl(0 0% 15%); // experimenteel / achtergrond kleur voor darkmode
+$utrecht-color-grey-10: hsl(0 0% 10%); // experimenteel / beperkt gebruiken
+$utrecht-color-blue-90: hsl(211 60% 90%); // ijsblauw variant achtergrond, spotlight en uitgelicht
+$utrecht-color-blue-80: hsl(211 60% 80%); // licht blauw voor achtergrond
+$utrecht-color-blue-60: hsl(211 60% 60%); // experimenteel / Drak mode link en button kleur
+$utrecht-color-blue-50: hsl(211 60% 50%); // experimenteel / beperkt gebruiken
+$utrecht-color-blue-40: hsl(211 60% 40%); // blauw variant bij hover/focus #3669a5
+$utrecht-color-blue-35: hsl(211 60% 35%); // basis link en knoppen CTA donkerblauw
+$utrecht-color-blue-30: hsl(211 60% 30%); // Deze kleur gebruiken we niet (interaction active)
+$utrecht-color-blue-20: hsl(211 60% 20%); // basis donkerblauw (OS focus)
+$utrecht-color-red-95: hsl(0 100% 95%); // Achtergrond rode kleur
+$utrecht-color-red-40: hsl(0 100% 40%); // basis rood #cc0000
+$utrecht-color-red-30: hsl(0 100% 30%); // hover rood
+$utrecht-color-red-20: hsl(0 100% 20%); // donker rood
+$utrecht-unordered-list-item-margin-block-end: 0.25rem;
+$utrecht-unordered-list-item-margin-block-start: 0.25rem;
+$utrecht-unordered-list-margin-block-end: 0;
+$utrecht-toptask-link-icon-size: 2.25rem;
+$utrecht-toptask-link-hover-transform-scale: 1.02;
+$utrecht-toptask-link-min-inline-size: 15rem;
+$utrecht-toptask-link-min-block-size: 8.25rem;
+$utrecht-toptask-link-line-height: 1.2;
+$utrecht-textbox-border-bottom-width: 3px;
+$utrecht-textarea-border-bottom-width: 3px;
+$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: 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-margin-block-end: 0;
+$utrecht-separator-block-size: 8px;
+$utrecht-select-border-block-end-width: 3px;
+$utrecht-search-bar-dropdown-max-block-size: 300px;
+$utrecht-search-bar-dropdown-border-width: 1px;
+$utrecht-search-bar-input-background-size: 1em;
+$utrecht-search-bar-input-background-position-y: 50%;
+$utrecht-search-bar-input-background-position-x: .5em;
+$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-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;
+$utrecht-pagination-relative-link-distanced-margin-inline-start: 0.5em;
+$utrecht-pagination-relative-link-distanced-margin-inline-end: 0.5em;
+$utrecht-pagination-relative-link-text-transform: uppercase;
+$utrecht-pagination-relative-link-text-decoration: none;
+$utrecht-pagination-relative-link-padding-block-start: 0.5em;
+$utrecht-pagination-relative-link-padding-block-end: 0.5em;
+$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-distanced-margin-inline-start: 0.5em;
+$utrecht-pagination-page-link-text-decoration: none;
+$utrecht-pagination-page-link-padding-block-start: 0.5em;
+$utrecht-pagination-page-link-padding-block-end: 0.5em;
+$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-page-padding-inline-start: 2em;
+$utrecht-page-padding-block-end: 1em;
+$utrecht-page-padding-inline-end: 2em;
+$utrecht-page-padding-block-start: 1.8em;
+$utrecht-page-max-inline-size: 1184px;
+$utrecht-page-margin-inline-end: 2em;
+$utrecht-page-margin-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;
+$utrecht-ordered-list-item-margin-block-end: 0.25em;
+$utrecht-ordered-list-item-margin-block-start: 0.25em;
+$utrecht-ordered-list-padding-inline-start: 28.8px;
+$utrecht-ordered-list-margin-block-end: 1em;
+$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-map-marker-icon-size: 30px;
+$utrecht-map-marker-box-shadow-color: rgb(0 0 0 / 20%);
+$utrecht-map-marker-border-width: 3px;
+$utrecht-map-marker-size: 48px;
+$utrecht-logo-min-inline-size: 110.57px;
+$utrecht-logo-min-block-size: 58.97px;
+$utrecht-logo-max-inline-size: 192px;
+$utrecht-logo-max-block-size: 103px;
+$utrecht-listbox-option-min-block-size: 44px;
+$utrecht-listbox-max-block-size: 300px;
+$utrecht-listbox-inline-size: 448px;
+$utrecht-list-social-item-margin-inline-end: 10px;
+$utrecht-link-icon-size: 1.2em;
+$utrecht-link-hover-text-decoration-thickness: 3px;
+$utrecht-link-hover-text-decoration: underline;
+$utrecht-link-focus-visible-text-decoration: none;
+$utrecht-link-text-underline-offset: 3px;
+$utrecht-link-text-decoration: underline;
+$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;
+$utrecht-link-list-link-text-decoration: none;
+$utrecht-icon-baseline-inset-block-start: 0.125em;
+$utrecht-icon-size: 48px;
+$utrecht-heading-5-margin-block-start: 1rem;
+$utrecht-heading-5-margin-block-end: 0.2rem;
+$utrecht-heading-4-margin-block-start: 1.2rem;
+$utrecht-heading-4-margin-block-end: 0.3rem;
+$utrecht-heading-3-margin-block-start: 1rem;
+$utrecht-heading-3-margin-block-end: 0.2rem;
+$utrecht-heading-2-margin-block-start: 1.5rem;
+$utrecht-heading-2-margin-block-end: 0.3rem;
+$utrecht-heading-1-margin-block-start: 0.67rem;
+$utrecht-heading-1-margin-block-end: 0.67rem;
+$utrecht-form-toggle-focus-border-width: 2px;
+$utrecht-form-toggle-focus-border-style: dotted;
+$utrecht-form-toggle-thumb-disabled-box-shadow: 0;
+$utrecht-form-toggle-thumb-min-inline-size: 18px;
+$utrecht-form-toggle-thumb-margin-inline-end: .25em;
+$utrecht-form-toggle-thumb-margin-inline-start: .25em;
+$utrecht-form-toggle-track-border-radius: 10em;
+$utrecht-form-toggle-width: 48px;
+$utrecht-form-toggle-padding-block-start: 0;
+$utrecht-form-toggle-padding-block-end: 0;
+$utrecht-form-toggle-padding-inline-start: 0;
+$utrecht-form-toggle-padding-inline-end: 0;
+$utrecht-form-toggle-height: 24px;
+$utrecht-form-toggle-border-width: 2px;
+$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% / 100%);
+$utrecht-form-label-font-size: 1em;
+$utrecht-form-field-invalid-border-inline-start-width: 3px;
+$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;
+$utrecht-form-control-padding-block-end: 8px;
+$utrecht-form-control-max-inline-size: 28em;
+$utrecht-form-control-border-radius: 0;
+$utrecht-focus-outline-style: dotted;
+$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-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
+$utrecht-space-column-2xl: 28px; // Extra Large 2
+$utrecht-space-column-xl: 24px; // Extra Large
+$utrecht-space-column-lg: 20px; // Large
+$utrecht-space-column-md: 16px; // Medium
+$utrecht-space-column-sm: 12px; // Small
+$utrecht-space-column-xs: 8px; // Extra Small
+$utrecht-space-column-2xs: 4px; // Extra Small 2
+$utrecht-space-column-3xs: 2px; // Extra Small 3
+$utrecht-space-column-4xs: 1px; // Extra Small 4
+$utrecht-space-row-5xl: 64px; // Extra Large 5
+$utrecht-space-row-4xl: 48px; // Extra Large 4
+$utrecht-space-row-3xl: 32px; // Extra Large 3
+$utrecht-space-row-2xl: 28px; // Extra Large 2
+$utrecht-space-row-xl: 24px; // Extra Large
+$utrecht-space-row-lg: 20px; // Large
+$utrecht-space-row-md: 16px; // Medium
+$utrecht-space-row-sm: 12px; // Small
+$utrecht-space-row-xs: 8px; // Extra Small
+$utrecht-space-row-2xs: 4px; // Extra Small 2
+$utrecht-space-row-3xs: 2px; // Extra Small 3
+$utrecht-space-row-4xs: 1px; // Extra Small 4
+$utrecht-space-text-3xl: 3ch; // Extra Large 3
+$utrecht-space-text-2xl: 2ch; // Extra Large 2
+$utrecht-space-text-xl: 1.75ch; // Extra Large
+$utrecht-space-text-lg: 1.5ch; // Large
+$utrecht-space-text-md: 1ch; // Medium
+$utrecht-space-text-sm: 0.75ch; // Small
+$utrecht-space-text-xs: 0.5ch; // Extra Small
+$utrecht-space-text-2xs: 0.25ch; // Extra Small 2
+$utrecht-space-text-3xs: 0.125ch; // Extra Small 3
+$utrecht-space-inline-4xl: 48px; // Extra Large 4
+$utrecht-space-inline-3xl: 32px; // Extra Large 3
+$utrecht-space-inline-2xl: 28px; // Extra Large 2
+$utrecht-space-inline-xl: 24px; // Extra Large
+$utrecht-space-inline-lg: 20px; // Large
+$utrecht-space-inline-md: 16px; // Medium
+$utrecht-space-inline-sm: 12px; // Small
+$utrecht-space-inline-xs: 8px; // Extra Small
+$utrecht-space-inline-2xs: 4px; // Extra Small 2
+$utrecht-space-inline-3xs: 2px; // Extra Small 3
+$utrecht-space-block-4xs: 1px;
+$utrecht-space-block-4xl: 64px; // Extra Large 4
+$utrecht-space-block-3xl: 48px; // Extra Large 3
+$utrecht-space-block-2xl: 32px; // Extra Large 2
+$utrecht-space-block-xl: 24px; // Extra Large
+$utrecht-space-block-lg: 20px; // Large
+$utrecht-space-block-md: 16px; // Medium
+$utrecht-space-block-sm: 12px; // Small
+$utrecht-space-block-xs: 8px; // Extra Small
+$utrecht-space-block-2xs: 4px; // Extra Small 2
+$utrecht-space-block-3xs: 2px; // Extra Small 3
+$utrecht-pointer-target-min-size: 44px;
+$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-checkbox-margin-block-start: 0;
+$utrecht-checkbox-focus-border-width: 2px;
+$utrecht-checkbox-size: 24px;
+$utrecht-checkbox-border-width: 2px;
+$utrecht-checkbox-border-radius: 0;
+$utrecht-calendar-icon-size: 24px;
+$utrecht-calendar-navigation-label-min-inline-size: 200px;
+$utrecht-calendar-navigation-padding-block-end: 2px;
+$utrecht-calendar-navigation-padding-block-start: 2px;
+$utrecht-calendar-table-days-item-day-disabled-border-color: transparent;
+$utrecht-calendar-table-days-item-day-selected-border-color: transparent;
+$utrecht-calendar-table-days-item-day-emphasis-border-color: transparent;
+$utrecht-calendar-table-days-item-day-is-today-font-weight: 700;
+$utrecht-calendar-table-days-item-day-out-of-the-month-border-color: transparent;
+$utrecht-calendar-table-days-item-day-active-border-color: transparent;
+$utrecht-calendar-table-days-item-day-focus-border-color: transparent;
+$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: 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;
+$utrecht-button-subtle-disabled-background-color: transparent;
+$utrecht-button-subtle-font-weight: 700;
+$utrecht-button-subtle-border-color: transparent;
+$utrecht-button-subtle-background-color: transparent;
+$utrecht-button-primary-action-danger-hover-border-color: transparent;
+$utrecht-button-primary-action-danger-border-color: transparent;
+$utrecht-button-primary-action-warning-hover-border-color: transparent;
+$utrecht-button-primary-action-warning-border-color: transparent;
+$utrecht-button-primary-action-ready-hover-border-color: transparent;
+$utrecht-button-primary-action-ready-border-color: transparent;
+$utrecht-button-primary-action-hover-border-color: transparent;
+$utrecht-button-primary-action-border-color: transparent;
+$utrecht-button-hover-scale: 1.02;
+$utrecht-button-focus-scale: 1.02;
+$utrecht-button-margin-inline-end: 0;
+$utrecht-button-margin-inline-start: 0;
+$utrecht-button-border-width: 1px;
+$utrecht-button-border-radius: 0;
+$utrecht-breadcrumb-nav-divider-inline-size: 1px;
+$utrecht-breadcrumb-nav-link-text-decoration: none;
+$utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
+$utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+$utrecht-breadcrumb-nav-min-block-size: 34px;
+$utrecht-blockquote-margin-block-end: 1.6em;
+$utrecht-blockquote-margin-block-start: 1.6em;
+$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: 400ms;
+$utrecht-backdrop-opacity: 0.8;
+$utrecht-article-max-inline-size: 780px;
+$utrecht-alert-icon-inset-block-start: 6px;
+$utrecht-alert-icon-size: 24px;
+$utrecht-alert-ok-background-color: #4D6336;
+$utrecht-alert-warning-background-color: #665200;
+$utrecht-alert-dialog-min-inline-size: 320px;
+$utrecht-alert-dialog-min-block-size: 100px;
+$utrecht-alert-dialog-max-block-size: 80vh;
+$utrecht-accordion-panel-border-width: 2px;
+$utrecht-accordion-button-icon-size: 24px;
+$utrecht-accordion-button-hover-background-color: inherit;
+$utrecht-accordion-button-border-width: 0;
+$denhaag-process-steps-sub-step-heading-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
+$denhaag-process-steps-sub-step-heading-font-size: $utrecht-typography-scale-sm-font-size;
+$denhaag-process-steps-sub-step-heading-color: $utrecht-color-grey-15;
+$denhaag-process-steps-step-description-font-size: $utrecht-typography-scale-md-font-size;
+$denhaag-process-steps-step-description-color: $utrecht-color-black;
+$denhaag-process-steps-step-metadata-font-size: $utrecht-typography-scale-sm-font-size;
+$denhaag-process-steps-step-metadata-color: $utrecht-color-grey-15;
+$denhaag-process-steps-step-line-warning-color: $utrecht-color-invalid;
+$denhaag-process-steps-step-line-checked-color: $utrecht-color-green-30;
+$denhaag-process-steps-step-line-color: $utrecht-color-green-30;
+$denhaag-process-steps-step-line-stroke-width: $utrecht-border-width-md;
+$denhaag-process-steps-sub-step-marker-background-color: $utrecht-color-white;
+$denhaag-process-steps-sub-step-marker-border-color: $utrecht-color-green-30;
+$denhaag-process-steps-step-marker-warning-color: $utrecht-color-invalid;
+$denhaag-process-steps-step-marker-warning-background-color: $utrecht-color-white;
+$denhaag-process-steps-step-marker-warning-border-color: $utrecht-color-invalid;
+$denhaag-process-steps-step-marker-checked-color: $utrecht-color-green-30;
+$denhaag-process-steps-step-marker-checked-border-width: $utrecht-border-width-md;
+$denhaag-process-steps-step-marker-checked-background-color: $utrecht-color-white;
+$denhaag-process-steps-step-marker-checked-border-color: $utrecht-color-green-30;
+$denhaag-process-steps-step-marker-current-color: $utrecht-color-white;
+$denhaag-process-steps-step-marker-current-border-width: $utrecht-border-width-md;
+$denhaag-process-steps-step-marker-current-background-color: $utrecht-color-green-30;
+$denhaag-process-steps-step-marker-current-border-color: $utrecht-color-green-30;
+$denhaag-process-steps-step-marker-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
+$denhaag-process-steps-step-marker-font-size: $utrecht-typography-scale-sm-font-size;
+$denhaag-process-steps-step-marker-color: $utrecht-color-green-30;
+$denhaag-process-steps-step-marker-border-width: $utrecht-border-width-md;
+$denhaag-process-steps-step-marker-background-color: $utrecht-color-white;
+$denhaag-process-steps-step-marker-border-color: $utrecht-color-green-30;
+$denhaag-process-steps-step-heading-warning-color: $utrecht-color-black;
+$denhaag-process-steps-step-heading-not-checked-color: $utrecht-color-black;
+$denhaag-process-steps-step-heading-checked-background-color: $utrecht-color-white;
+$denhaag-process-steps-step-heading-checked-color: $utrecht-color-black;
+$denhaag-process-steps-step-heading-current-color: $utrecht-color-black;
+$denhaag-process-steps-step-heading-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
+$denhaag-process-steps-step-heading-font-size: $utrecht-typography-scale-lg-font-size;
+$denhaag-process-steps-step-heading-font-family: $utrecht-typography-sans-serif-font-family;
+$denhaag-process-steps-step-heading-color: $utrecht-color-black;
+$denhaag-process-steps-font-family: $utrecht-typography-sans-serif-font-family;
+$utrecht-toptask-nav-gap: $utrecht-space-column-md;
+$utrecht-menulijst-item-hover-color: $utrecht-color-blue-40;
+$utrecht-menulijst-item-color: $utrecht-color-blue-35;
+$utrecht-unordered-list-marker-color: $utrecht-color-red-40;
+$utrecht-unordered-list-margin-block-start: $utrecht-space-block-md;
+$utrecht-toptask-link-padding-inline-start: $utrecht-space-inline-xl;
+$utrecht-toptask-link-padding-inline-end: $utrecht-space-inline-xl;
+$utrecht-toptask-link-padding-block-start: $utrecht-space-block-xl;
+$utrecht-toptask-link-padding-block-end: $utrecht-space-block-xl;
+$utrecht-toptask-link-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-textarea-line-height: $utrecht-typography-line-height-md;
+$utrecht-table-row-alternate-even-color: $utrecht-color-black;
+$utrecht-table-row-alternate-even-background-color: $utrecht-color-grey-95;
+$utrecht-table-row-alternate-odd-color: $utrecht-color-black;
+$utrecht-table-row-alternate-odd-background-color: $utrecht-color-white;
+$utrecht-table-row-border-block-end-width: $utrecht-border-width-sm;
+$utrecht-table-row-border-block-end-color: $utrecht-color-grey-90;
+$utrecht-table-cell-selected-color: $utrecht-color-black;
+$utrecht-table-cell-selected-background-color: $utrecht-color-blue-90;
+$utrecht-table-footer-sticky-border-block-start-color: $utrecht-color-red-40;
+$utrecht-table-footer-sticky-color: $utrecht-color-black;
+$utrecht-table-footer-sticky-background-color: $utrecht-color-white;
+$utrecht-table-header-sticky-border-block-end-color: $utrecht-color-red-40;
+$utrecht-table-header-sticky-color: $utrecht-color-black;
+$utrecht-table-header-sticky-background-color: $utrecht-color-white;
+$utrecht-table-header-border-block-end-width: $utrecht-border-width-md;
+$utrecht-table-header-border-block-end-color: $utrecht-color-red-40;
+$utrecht-table-header-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
+$utrecht-table-caption-font-size: $utrecht-typography-scale-lg-font-size;
+$utrecht-table-caption-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
+$utrecht-table-margin-block-start: $utrecht-space-block-md;
+$utrecht-surface-color: $utrecht-color-grey-95;
+$utrecht-surface-background-color: $utrecht-color-grey-15;
+$utrecht-spotlight-section-ok-background-color: $utrecht-color-green-90;
+$utrecht-spotlight-section-error-background-color: $utrecht-color-red-95;
+$utrecht-spotlight-section-warning-color: $utrecht-color-grey-15;
+$utrecht-spotlight-section-warning-background-color: $utrecht-color-yellow-20;
+$utrecht-spotlight-section-info-color: $utrecht-color-grey-15;
+$utrecht-spotlight-section-info-background-color: $utrecht-color-blue-35;
+$utrecht-spotlight-section-padding-inline-end: $utrecht-space-inline-md;
+$utrecht-spotlight-section-padding-inline-start: $utrecht-space-inline-md;
+$utrecht-spotlight-section-padding-block-end: $utrecht-space-block-sm;
+$utrecht-spotlight-section-padding-block-start: $utrecht-space-block-md;
+$utrecht-spotlight-section-color: $utrecht-color-grey-15;
+$utrecht-spotlight-section-background-color: $utrecht-color-grey-20;
+$utrecht-skip-link-focus-visible-text-decoration: $utrecht-link-focus-visible-text-decoration;
+$utrecht-skip-link-text-decoration: $utrecht-link-text-decoration;
+$utrecht-separator-margin-block-start: $utrecht-space-block-md;
+$utrecht-separator-margin-block-end: $utrecht-space-block-md;
+$utrecht-separator-color: $utrecht-color-grey-90;
+$utrecht-search-bar-list-item-is-selected-background-color: $utrecht-color-grey-95;
+$utrecht-search-bar-list-item-is-selected-color: $utrecht-color-black;
+$utrecht-search-bar-list-item-is-active-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
+$utrecht-search-bar-list-item-is-active-background-color: $utrecht-color-grey-95;
+$utrecht-search-bar-list-item-is-active-color: $utrecht-color-black;
+$utrecht-search-bar-section-title-margin-inline-start: $utrecht-space-inline-xs;
+$utrecht-search-bar-section-title-color: $utrecht-color-black;
+$utrecht-search-bar-section-title-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
+$utrecht-search-bar-section-title-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-search-bar-section-margin-block-end: $utrecht-space-inline-xs;
+$utrecht-search-bar-dropdown-padding-block-end: $utrecht-space-block-xs;
+$utrecht-search-bar-dropdown-padding-block-start: $utrecht-space-block-xs;
+$utrecht-search-bar-dropdown-border-color: $utrecht-color-red-40;
+$utrecht-search-bar-input-padding-inline-start: $utrecht-space-inline-3xl;
+$utrecht-search-bar-input-border-color: $utrecht-color-red-40;
+$utrecht-search-bar-button-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
+$utrecht-search-bar-button-font-size: $utrecht-typography-scale-sm-font-size;
+$utrecht-search-bar-button-color: $utrecht-color-white;
+$utrecht-search-bar-button-border-color: $utrecht-color-red-40;
+$utrecht-search-bar-button-background-color: $utrecht-color-red-40;
+$utrecht-rich-text-best-friend-margin-block-end: $utrecht-space-block-2xs;
+$utrecht-rich-text-friend-margin-block-end: $utrecht-space-block-xs;
+$utrecht-rich-text-acquaintance-margin-block-end: $utrecht-space-block-md;
+$utrecht-rich-text-stranger-margin-block-end: $utrecht-space-block-2xl;
+$utrecht-radio-button-color: $utrecht-color-white;
+$utrecht-radio-button-disabled-color: $utrecht-color-white;
+$utrecht-radio-button-disabled-border-color: $utrecht-color-grey-80;
+$utrecht-radio-button-disabled-background-color: $utrecht-color-grey-80;
+$utrecht-radio-button-focus-border-color: $utrecht-color-blue-40;
+$utrecht-radio-button-hover-background-color: $utrecht-color-blue-90;
+$utrecht-radio-button-checked-focus-border-color: $utrecht-color-blue-20;
+$utrecht-radio-button-checked-hover-color: $utrecht-color-blue-90;
+$utrecht-radio-button-checked-hover-background-color: $utrecht-color-blue-40;
+$utrecht-radio-button-checked-active-color: $utrecht-color-blue-80;
+$utrecht-radio-button-checked-active-background-color: $utrecht-color-blue-40;
+$utrecht-radio-button-checked-border-color: $utrecht-color-blue-40;
+$utrecht-radio-button-checked-background-color: $utrecht-color-blue-40;
+$utrecht-radio-button-active-background-color: $utrecht-color-blue-80;
+$utrecht-pre-heading-margin-block-start: $utrecht-space-row-2xl;
+$utrecht-pre-heading-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-paragraph-small-font-size: $utrecht-typography-scale-sm-font-size;
+$utrecht-paragraph-lead-line-height: $utrecht-typography-line-height-md;
+$utrecht-paragraph-lead-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
+$utrecht-paragraph-lead-font-size: $utrecht-typography-scale-xl-font-size;
+$utrecht-paragraph-margin-block-start: $utrecht-space-block-md;
+$utrecht-paragraph-line-height: $utrecht-typography-line-height-md;
+$utrecht-paragraph-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
+$utrecht-paragraph-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-paragraph-font-family: $utrecht-typography-sans-serif-font-family;
+$utrecht-pagination-relative-link-hover-color: $utrecht-color-white;
+$utrecht-pagination-relative-link-hover-border-color: $utrecht-color-blue-35;
+$utrecht-pagination-relative-link-hover-background-color: $utrecht-color-blue-35;
+$utrecht-pagination-relative-link-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
+$utrecht-pagination-relative-link-color: $utrecht-color-blue-35;
+$utrecht-pagination-relative-link-border-color: $utrecht-color-blue-35;
+$utrecht-pagination-relative-link-background-color: $utrecht-color-white;
+$utrecht-pagination-page-link-hover-color: $utrecht-color-white;
+$utrecht-pagination-page-link-hover-border-color: $utrecht-color-blue-35;
+$utrecht-pagination-page-link-hover-background-color: $utrecht-color-blue-35;
+$utrecht-pagination-page-link-current-color: $utrecht-color-white;
+$utrecht-pagination-page-link-current-border-color: $utrecht-color-blue-35;
+$utrecht-pagination-page-link-current-background-color: $utrecht-color-blue-35;
+$utrecht-pagination-page-link-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
+$utrecht-pagination-page-link-color: $utrecht-color-blue-35;
+$utrecht-pagination-font-size: $utrecht-typography-scale-sm-font-size;
+$utrecht-page-color: $utrecht-color-grey-95;
+$utrecht-page-background-color: $utrecht-color-grey-15;
+$utrecht-page-footer-padding-block-start: $utrecht-space-block-3xl;
+$utrecht-page-footer-padding-block-end: $utrecht-space-block-3xl;
+$utrecht-page-footer-padding-inline-start: $utrecht-space-inline-2xl;
+$utrecht-page-footer-padding-inline-end: $utrecht-space-inline-2xl;
+$utrecht-page-footer-background-image: linear-gradient(45deg, $utrecht-color-red-40, $utrecht-color-red-40 50%, #d63433 50%);;
+$utrecht-page-footer-background-color: $utrecht-color-red-40;
+$utrecht-page-footer-color: $utrecht-color-white;
+$utrecht-number-badge-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-number-badge-color: $utrecht-color-white; // Default text color for badge components
+$utrecht-number-badge-background-color: $utrecht-color-red-40;
+$utrecht-topnav-link-hover-background-color: $utrecht-color-black;
+$utrecht-topnav-link-focus-outline-color: $utrecht-color-black;
+$utrecht-topnav-link-focus-background-color: $utrecht-color-yellow-80;
+$utrecht-topnav-link-focus-box-shadow-color: $utrecht-color-yellow-80;
+$utrecht-topnav-link-focus-color: $utrecht-color-black;
+$utrecht-topnav-link-background-color: $utrecht-color-blue-40;
+$utrecht-topnav-link-color: $utrecht-color-white;
+$utrecht-topnav-list-border-color: $utrecht-color-grey-40;
+$utrecht-topnav-list-background-color: $utrecht-color-grey-15;
+$utrecht-sidenav-link-hover-color: $utrecht-color-blue-40;
+$utrecht-sidenav-link-color: $utrecht-color-blue-40;
+$utrecht-sidenav-item-marker-hover-color: $utrecht-color-blue-50;
+$utrecht-sidenav-item-marker-color: $utrecht-color-grey-80;
+$utrecht-sidenav-item-hover-color: $utrecht-color-blue-40;
+$utrecht-sidenav-item-margin-inline-end: $utrecht-space-inline-3xs;
+$utrecht-sidenav-item-margin-inline-start: $utrecht-space-inline-3xs;
+$utrecht-sidenav-item-margin-block-end: $utrecht-space-block-xs;
+$utrecht-sidenav-item-margin-block-start: $utrecht-space-block-xs;
+$utrecht-nav-bar-link-padding-inline-start: $utrecht-space-inline-md;
+$utrecht-nav-bar-link-padding-inline-end: $utrecht-space-inline-md;
+$utrecht-nav-bar-link-padding-block-start: $utrecht-space-block-xs;
+$utrecht-nav-bar-link-padding-block-end: $utrecht-space-block-xs;
+$utrecht-nav-bar-content-max-inline-size: $utrecht-page-max-inline-size;
+$utrecht-nav-bar-color: $utrecht-color-black;
+$utrecht-nav-bar-background-color: $utrecht-color-white;
+$utrecht-mark-color: $utrecht-color-black;
+$utrecht-mark-background-color: $utrecht-color-yellow-60;
+$utrecht-mapcontrolbutton-padding-inline-start: $utrecht-space-inline-2xs;
+$utrecht-mapcontrolbutton-padding-inline-end: $utrecht-space-inline-2xs;
+$utrecht-mapcontrolbutton-padding-block-start: $utrecht-space-block-2xs;
+$utrecht-mapcontrolbutton-padding-block-end: $utrecht-space-block-2xs;
+$utrecht-mapcontrolbutton-margin-block-start: $utrecht-space-row-xs;
+$utrecht-mapcontrolbutton-margin-block-end: $utrecht-space-row-xs;
+$utrecht-mapcontrolbutton-label-margin-inline-end: $utrecht-space-inline-xs;
+$utrecht-mapcontrolbutton-label-margin-inline-start: $utrecht-space-inline-xs;
+$utrecht-mapcontrolbutton-hover-color: $utrecht-color-white;
+$utrecht-mapcontrolbutton-hover-background-color: $utrecht-color-grey-90;
+$utrecht-mapcontrolbutton-focus-color: $utrecht-color-black;
+$utrecht-mapcontrolbutton-disabled-color: $utrecht-color-grey-80;
+$utrecht-mapcontrolbutton-disabled-border-color: $utrecht-color-grey-80;
+$utrecht-mapcontrolbutton-disabled-background-color: $utrecht-color-grey-90;
+$utrecht-mapcontrolbutton-min-inline-size: $utrecht-space-block-2xl;
+$utrecht-mapcontrolbutton-min-block-size: $utrecht-space-block-2xl;
+$utrecht-mapcontrolbutton-color: $utrecht-color-grey-40;
+$utrecht-mapcontrolbutton-border-width: $utrecht-border-width-sm;
+$utrecht-mapcontrolbutton-border-style: $utrecht-border-style-solid;
+$utrecht-mapcontrolbutton-border-color: $utrecht-color-grey-40;
+$utrecht-mapcontrolbutton-background-color: $utrecht-color-white;
+$utrecht-map-marker-border-color: $utrecht-color-white;
+$utrecht-map-marker-color: $utrecht-color-white;
+$utrecht-map-marker-background-color: $utrecht-color-blue-30;
+$utrecht-listbox-option-group-title-margin-inline-start: $utrecht-space-inline-xs;
+$utrecht-listbox-option-group-title-color: $utrecht-color-black;
+$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-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;
+$utrecht-listbox-option-padding-inline-start: $utrecht-space-inline-xs;
+$utrecht-listbox-option-padding-inline-end: $utrecht-space-inline-xs;
+$utrecht-listbox-option-padding-block-start: $utrecht-space-block-xs;
+$utrecht-listbox-option-padding-block-end: $utrecht-space-block-xs;
+$utrecht-listbox-background-color: $utrecht-color-white;
+$utrecht-link-placeholder-color: $utrecht-color-grey-80;
+$utrecht-link-focus-color: $utrecht-color-blue-80;
+$utrecht-link-color: $utrecht-color-blue-60;
+$utrecht-link-social-margin-inline-start: $utrecht-space-inline-sm;
+$utrecht-link-social-color: $utrecht-color-white;
+$utrecht-link-social-border-color: $utrecht-color-white;
+$utrecht-link-social-background-color: $utrecht-color-red-40;
+$utrecht-link-list-link-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
+$utrecht-link-list-link-column-gap: $utrecht-space-block-xs;
+$utrecht-link-list-row-gap: $utrecht-space-block-xs;
+$utrecht-index-char-nav-link-current-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
+$utrecht-index-char-nav-gap: $utrecht-space-column-sm;
+$utrecht-index-char-nav-margin-block-end: $utrecht-space-block-md;
+$utrecht-index-char-nav-margin-block-start: $utrecht-space-block-lg;
+$utrecht-heading-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
+$utrecht-heading-6-line-height: $utrecht-typography-line-height-md;
+$utrecht-heading-6-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
+$utrecht-heading-6-font-size: $utrecht-typography-scale-sm-font-size;
+$utrecht-heading-6-font-family: $utrecht-typography-sans-serif-font-family;
+$utrecht-heading-5-line-height: $utrecht-typography-line-height-md;
+$utrecht-heading-5-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
+$utrecht-heading-5-font-size: $utrecht-typography-scale-sm-font-size;
+$utrecht-heading-5-font-family: $utrecht-typography-sans-serif-font-family;
+$utrecht-heading-4-line-height: $utrecht-typography-line-height-md;
+$utrecht-heading-4-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
+$utrecht-heading-4-font-size: $utrecht-typography-scale-lg-font-size;
+$utrecht-heading-4-font-family: $utrecht-typography-sans-serif-font-family;
+$utrecht-heading-3-line-height: $utrecht-typography-line-height-sm;
+$utrecht-heading-3-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
+$utrecht-heading-3-font-size: $utrecht-typography-scale-xl-font-size;
+$utrecht-heading-3-font-family: $utrecht-typography-sans-serif-font-family;
+$utrecht-heading-2-line-height: $utrecht-typography-line-height-sm;
+$utrecht-heading-2-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
+$utrecht-heading-2-font-size: $utrecht-typography-scale-xl-font-size;
+$utrecht-heading-2-font-family: $utrecht-typography-sans-serif-font-family;
+$utrecht-heading-1-line-height: $utrecht-typography-line-height-sm;
+$utrecht-heading-1-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
+$utrecht-heading-1-font-size: $utrecht-typography-scale-4xl-font-size;
+$utrecht-heading-1-font-family: $utrecht-typography-sans-serif-font-family;
+$utrecht-form-toggle-focus-border-color: $utrecht-color-black;
+$utrecht-form-toggle-checked-accent-color: $utrecht-color-blue-35;
+$utrecht-form-toggle-thumb-disabled-background-color: $utrecht-color-white;
+$utrecht-form-toggle-thumb-background-color: $utrecht-color-white;
+$utrecht-form-toggle-track-disabled-background-color: $utrecht-color-grey-90;
+$utrecht-form-toggle-color: $utrecht-color-black;
+$utrecht-form-toggle-background-color: $utrecht-color-white;
+$utrecht-form-label-radio-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
+$utrecht-form-label-checkbox-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
+$utrecht-form-label-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
+$utrecht-form-fieldset-legend-disabled-color: $utrecht-color-grey-40;
+$utrecht-form-fieldset-legend-margin-block-start: $utrecht-space-block-xl;
+$utrecht-form-fieldset-legend-margin-block-end: $utrecht-space-block-sm;
+$utrecht-form-fieldset-legend-line-height: $utrecht-typography-line-height-md;
+$utrecht-form-fieldset-legend-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
+$utrecht-form-fieldset-legend-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-form-fieldset-section-color: $utrecht-color-black;
+$utrecht-form-fieldset-section-background-color: $utrecht-color-grey-80;
+$utrecht-form-fieldset-margin-block-start: $utrecht-space-block-2xs;
+$utrecht-form-fieldset-margin-block-end: $utrecht-space-block-2xs;
+$utrecht-form-field-description-margin-block-end: $utrecht-space-block-sm;
+$utrecht-form-field-description-margin-block-start: $utrecht-space-block-sm;
+$utrecht-form-field-label-margin-block-end: $utrecht-space-block-sm;
+$utrecht-form-field-invalid-padding-inline-start: $utrecht-space-block-sm;
+$utrecht-form-field-margin-block-end: $utrecht-space-block-2xs;
+$utrecht-form-field-margin-block-start: $utrecht-space-block-2xs;
+$utrecht-form-control-read-only-color: $utrecht-color-grey-20;
+$utrecht-form-control-read-only-background-color: $utrecht-color-grey-30;
+$utrecht-form-control-focus-border-color: $utrecht-color-grey-80;
+$utrecht-form-control-placeholder-font-style: $utrecht-typography-font-style-normal;
+$utrecht-form-control-placeholder-color: $utrecht-color-grey-80;
+$utrecht-form-control-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-form-control-color: $utrecht-color-grey-95;
+$utrecht-form-control-border-width: $utrecht-border-width-sm;
+$utrecht-form-control-border-color: $utrecht-color-grey-95;
+$utrecht-form-control-background-color: $utrecht-color-grey-20;
+$utrecht-focus-inverse-outline-color: $utrecht-color-white;
+$utrecht-focus-outline-width: $utrecht-border-width-md;
+$utrecht-focus-outline-color: $utrecht-color-black;
+$utrecht-focus-background-color: $utrecht-color-yellow-60;
+$utrecht-figure-caption-line-height: $utrecht-typography-line-height-md;
+$utrecht-figure-caption-font-size: $utrecht-typography-scale-sm-font-size;
+$utrecht-emphasis-strong-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
+$utrecht-drawer-padding-inline-end: $utrecht-space-inline-md;
+$utrecht-drawer-padding-inline-start: $utrecht-space-inline-md;
+$utrecht-drawer-padding-block-start: $utrecht-space-block-md;
+$utrecht-drawer-padding-block-end: $utrecht-space-block-md;
+$utrecht-drawer-border-color: $utrecht-color-grey-90;
+$utrecht-document-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-document-font-family: $utrecht-typography-sans-serif-font-family;
+$utrecht-document-color: $utrecht-color-grey-95;
+$utrecht-document-background-color: $utrecht-color-grey-15;
+$utrecht-data-placeholder-background-color: $utrecht-color-grey-40;
+$utrecht-data-list-rows-item-value-margin-block-start: $utrecht-space-block-xs;
+$utrecht-data-list-rows-item-margin-block-start: $utrecht-space-block-md;
+$utrecht-data-list-item-key-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
+$utrecht-data-list-margin-block-start: $utrecht-space-block-md;
+$utrecht-data-list-margin-block-end: $utrecht-space-block-md;
+$utrecht-feedback-active-fill-color: $utrecht-color-white;
+$utrecht-feedback-inactive-fill-color: $utrecht-color-white;
+$utrecht-feedback-success-fill-color: $utrecht-color-white;
+$utrecht-feedback-error-fill-color: $utrecht-color-white;
+$utrecht-feedback-valid-fill-color: $utrecht-color-white;
+$utrecht-feedback-invalid-fill-color: $utrecht-color-white;
+$utrecht-feedback-invalid-color: $utrecht-color-invalid;
+$utrecht-feedback-invalid-border-color: $utrecht-color-invalid;
+$utrecht-feedback-invalid-background-color: $utrecht-color-invalid;
+$utrecht-feedback-safe-fill-color: $utrecht-color-white;
+$utrecht-feedback-safe-color: $utrecht-color-green-50;
+$utrecht-feedback-warning-fill-color: $utrecht-color-black;
+$utrecht-feedback-warning-color: $utrecht-color-yellow-50;
+$utrecht-feedback-danger-fill-color: $utrecht-color-white;
+$utrecht-feedback-danger-color: $utrecht-color-red-40;
+$utrecht-column-layout-gap: $utrecht-space-column-md;
+$utrecht-column-layout-column-rule-color: $utrecht-color-grey-80;
+$utrecht-code-block-margin-block-end: $utrecht-space-block-lg;
+$utrecht-code-block-margin-block-start: $utrecht-space-block-lg;
+$utrecht-code-block-line-height: $utrecht-typography-line-height-md;
+$utrecht-code-block-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-code-block-color: $utrecht-color-black;
+$utrecht-code-block-background-color: $utrecht-color-grey-95;
+$utrecht-checkbox-indeterminate-background-color: $utrecht-color-blue-40;
+$utrecht-checkbox-checked-background-color: $utrecht-color-blue-40;
+$utrecht-checkbox-checked-border-color: $utrecht-color-blue-40;
+$utrecht-checkbox-disabled-background-color: $utrecht-color-grey-80;
+$utrecht-checkbox-disabled-border-color: $utrecht-color-grey-80;
+$utrecht-calendar-navigation-label-font-size: $utrecht-typography-scale-lg-font-size;
+$utrecht-calendar-navigation-label-color: $utrecht-color-black;
+$utrecht-calendar-navigation-color: $utrecht-color-blue-30;
+$utrecht-calendar-table-days-item-day-disabled-color: $utrecht-color-grey-40;
+$utrecht-calendar-table-days-item-day-selected-color: $utrecht-color-white;
+$utrecht-calendar-table-days-item-day-selected-background-color: $utrecht-color-blue-30;
+$utrecht-calendar-table-days-item-day-is-today-border-color: $utrecht-color-blue-35;
+$utrecht-calendar-table-days-item-day-is-today-color: $utrecht-color-blue-30;
+$utrecht-calendar-table-days-item-day-is-today-background-color: $utrecht-color-blue-90;
+$utrecht-calendar-table-days-item-day-out-of-the-month-color: $utrecht-color-grey-80;
+$utrecht-calendar-table-days-item-day-hover-border-color: $utrecht-color-black;
+$utrecht-calendar-table-days-item-day-hover-color: $utrecht-color-blue-40;
+$utrecht-calendar-table-days-item-day-color: $utrecht-color-black;
+$utrecht-button-subtle-ready-focus-color: $utrecht-color-green-40;
+$utrecht-button-subtle-ready-hover-color: $utrecht-color-green-40;
+$utrecht-button-subtle-ready-color: $utrecht-color-green-50;
+$utrecht-button-subtle-danger-focus-color: $utrecht-color-red-40;
+$utrecht-button-subtle-danger-hover-color: $utrecht-color-red-30;
+$utrecht-button-subtle-danger-color: $utrecht-color-red-30;
+$utrecht-button-subtle-focus-color: $utrecht-color-blue-35;
+$utrecht-button-subtle-focus-border-color: $utrecht-color-blue-35;
+$utrecht-button-subtle-focus-background-color: $utrecht-color-white;
+$utrecht-button-subtle-hover-color: $utrecht-color-blue-35;
+$utrecht-button-subtle-hover-border-color: $utrecht-color-blue-40;
+$utrecht-button-subtle-hover-background-color: $utrecht-color-white;
+$utrecht-button-subtle-disabled-color: $utrecht-color-grey-40;
+$utrecht-button-subtle-active-color: $utrecht-color-white;
+$utrecht-button-subtle-active-background-color: $utrecht-color-blue-35;
+$utrecht-button-subtle-color: $utrecht-color-blue-60;
+$utrecht-button-subtle-border-width: $utrecht-border-width-md;
+$utrecht-button-secondary-action-ready-focus-border-color: $utrecht-color-green-40;
+$utrecht-button-secondary-action-ready-hover-color: $utrecht-color-green-40;
+$utrecht-button-secondary-action-ready-hover-border-color: $utrecht-color-green-40;
+$utrecht-button-secondary-action-ready-color: $utrecht-color-grey-30;
+$utrecht-button-secondary-action-ready-border-color: $utrecht-color-green-30;
+$utrecht-button-secondary-action-warning-focus-border-color: $utrecht-color-yellow-40;
+$utrecht-button-secondary-action-warning-hover-color: $utrecht-color-yellow-40;
+$utrecht-button-secondary-action-warning-hover-border-color: $utrecht-color-yellow-40;
+$utrecht-button-secondary-action-warning-color: $utrecht-color-grey-20;
+$utrecht-button-secondary-action-warning-border-color: $utrecht-color-yellow-20;
+$utrecht-button-secondary-action-danger-focus-border-color: $utrecht-color-red-30;
+$utrecht-button-secondary-action-danger-hover-color: $utrecht-color-red-20;
+$utrecht-button-secondary-action-danger-hover-border-color: $utrecht-color-red-20;
+$utrecht-button-secondary-action-danger-color: $utrecht-color-red-30;
+$utrecht-button-secondary-action-danger-border-color: $utrecht-color-red-30;
+$utrecht-button-secondary-action-hover-color: $utrecht-color-blue-60;
+$utrecht-button-secondary-action-hover-border-color: $utrecht-color-blue-60;
+$utrecht-button-secondary-action-disabled-color: $utrecht-color-grey-40;
+$utrecht-button-secondary-action-disabled-border-color: $utrecht-color-grey-40;
+$utrecht-button-secondary-action-active-color: $utrecht-color-blue-30;
+$utrecht-button-secondary-action-active-border-color: $utrecht-color-blue-30;
+$utrecht-button-secondary-action-active-background-color: $utrecht-color-white;
+$utrecht-button-secondary-action-color: $utrecht-color-blue-80;
+$utrecht-button-secondary-action-border-width: $utrecht-border-width-md;
+$utrecht-button-secondary-action-border-color: $utrecht-color-blue-80;
+$utrecht-button-primary-action-danger-focus-border-color: $utrecht-color-red-30;
+$utrecht-button-primary-action-danger-focus-background-color: $utrecht-color-red-30;
+$utrecht-button-primary-action-danger-hover-color: $utrecht-color-grey-15;
+$utrecht-button-primary-action-danger-hover-background-color: $utrecht-color-red-20;
+$utrecht-button-primary-action-danger-disabled-border-color: $utrecht-color-grey-90;
+$utrecht-button-primary-action-danger-color: $utrecht-color-grey-15;
+$utrecht-button-primary-action-danger-background-color: $utrecht-color-red-30;
+$utrecht-button-primary-action-warning-focus-border-color: $utrecht-color-grey-15;
+$utrecht-button-primary-action-warning-focus-background-color: $utrecht-color-yellow-40;
+$utrecht-button-primary-action-warning-hover-color: $utrecht-color-black;
+$utrecht-button-primary-action-warning-hover-background-color: $utrecht-color-yellow-40;
+$utrecht-button-primary-action-warning-disabled-border-color: $utrecht-color-grey-95;
+$utrecht-button-primary-action-warning-color: $utrecht-color-black;
+$utrecht-button-primary-action-warning-background-color: $utrecht-color-yellow-20;
+$utrecht-button-primary-action-ready-focus-border-color: $utrecht-color-grey-95;
+$utrecht-button-primary-action-ready-focus-background-color: $utrecht-color-green-50;
+$utrecht-button-primary-action-ready-hover-color: $utrecht-color-grey-80;
+$utrecht-button-primary-action-ready-hover-background-color: $utrecht-color-green-30;
+$utrecht-button-primary-action-ready-disabled-border-color: $utrecht-color-grey-40;
+$utrecht-button-primary-action-ready-color: $utrecht-color-grey-95;
+$utrecht-button-primary-action-ready-background-color: $utrecht-color-green-40;
+$utrecht-button-primary-action-focus-border-width: $utrecht-border-width-md;
+$utrecht-button-primary-action-focus-border-color: $utrecht-color-grey-15;
+$utrecht-button-primary-action-focus-background-color: $utrecht-color-blue-90;
+$utrecht-button-primary-action-hover-color: $utrecht-color-grey-15;
+$utrecht-button-primary-action-hover-background-color: $utrecht-color-blue-60;
+$utrecht-button-primary-action-disabled-color: $utrecht-color-grey-80;
+$utrecht-button-primary-action-disabled-border-color: $utrecht-color-grey-80;
+$utrecht-button-primary-action-disabled-background-color: $utrecht-color-grey-90;
+$utrecht-button-primary-action-active-color: $utrecht-color-white;
+$utrecht-button-primary-action-active-border-color: $utrecht-color-blue-30;
+$utrecht-button-primary-action-active-background-color: $utrecht-color-blue-30;
+$utrecht-button-primary-action-color: $utrecht-color-grey-15;
+$utrecht-button-primary-action-border-width: $utrecht-border-width-md; // Although the border is not visible, it is needed to match the size of the secondary-action-button appearance
+$utrecht-button-primary-action-background-color: $utrecht-color-blue-80;
+$utrecht-button-disabled-color: $utrecht-color-grey-80;
+$utrecht-button-disabled-border-color: $utrecht-color-grey-40;
+$utrecht-button-disabled-background-color: $utrecht-color-grey-40;
+$utrecht-button-active-color: $utrecht-color-white;
+$utrecht-button-active-background-color: $utrecht-color-grey-40;
+$utrecht-button-padding-inline-end: $utrecht-space-inline-md;
+$utrecht-button-padding-inline-start: $utrecht-space-inline-md;
+$utrecht-button-padding-block-end: $utrecht-space-block-xs;
+$utrecht-button-padding-block-start: $utrecht-space-block-xs;
+$utrecht-button-margin-block-end: $utrecht-space-row-xs;
+$utrecht-button-margin-block-start: $utrecht-space-row-xs;
+$utrecht-button-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-button-font-family: $utrecht-typography-sans-serif-font-family;
+$utrecht-button-column-gap: $utrecht-space-text-xs;
+$utrecht-button-color: $utrecht-color-grey-80;
+$utrecht-button-border-color: $utrecht-color-grey-40;
+$utrecht-button-background-color: $utrecht-color-grey-30;
+$utrecht-breadcrumb-nav-arrows-link-color: $utrecht-color-black;
+$utrecht-breadcrumb-nav-arrows-link-focus-color: $utrecht-color-black;
+$utrecht-breadcrumb-nav-arrows-link-background-color: $utrecht-color-grey-90;
+$utrecht-breadcrumb-nav-separator-icon-size: $utrecht-typography-scale-sm-font-size;
+$utrecht-breadcrumb-nav-separator-color: $utrecht-color-blue-35;
+$utrecht-breadcrumb-nav-link-icon-size: $utrecht-icon-scale-md;
+$utrecht-breadcrumb-nav-link-disabled-color: $utrecht-color-grey-40;
+$utrecht-breadcrumb-nav-link-hover-color: $utrecht-color-blue-40;
+$utrecht-breadcrumb-nav-link-focus-color: $utrecht-color-blue-40;
+$utrecht-breadcrumb-nav-link-color: $utrecht-color-blue-35;
+$utrecht-breadcrumb-nav-item-padding-inline-start: $utrecht-space-inline-xs;
+$utrecht-breadcrumb-nav-item-padding-inline-end: $utrecht-space-inline-xs;
+$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-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;
+$utrecht-badge-padding-inline: $utrecht-space-inline-sm; // Default inline padding color for badge components
+$utrecht-badge-padding-block: $utrecht-space-block-xs; // Default block padding for badge components
+$utrecht-badge-color: $utrecht-color-white; // Default text color for badge components
+$utrecht-badge-background-color: $utrecht-color-grey-30; // Default background color for badge components
+$utrecht-badge-list-item-margin-inline: $utrecht-space-block-sm;
+$utrecht-badge-list-item-margin-block: $utrecht-space-block-xs;
+$utrecht-badge-counter-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-badge-counter-color: $utrecht-color-white; // Default text color for badge components
+$utrecht-badge-counter-background-color: $utrecht-color-red-40; // Default background color for badge components
+$utrecht-backdrop-color: $utrecht-color-white;
+$utrecht-backdrop-background-color: $utrecht-color-black;
+$utrecht-alert-invalid-color: $utrecht-color-white;
+$utrecht-alert-invalid-background-color: $utrecht-color-red-95;
+$utrecht-alert-icon-ok-color: $utrecht-color-green-40;
+$utrecht-alert-icon-warning-color: $utrecht-color-yellow-40;
+$utrecht-alert-icon-error-color: $utrecht-color-red-40;
+$utrecht-alert-icon-info-color: $utrecht-color-blue-35;
+$utrecht-alert-icon-color: $utrecht-color-blue-35;
+$utrecht-alert-ok-color: $utrecht-color-white;
+$utrecht-alert-error-color: $utrecht-color-white;
+$utrecht-alert-error-background-color: $utrecht-color-red-30;
+$utrecht-alert-warning-color: $utrecht-color-white;
+$utrecht-alert-info-color: $utrecht-color-white;
+$utrecht-alert-info-background-color: $utrecht-color-blue-35;
+$utrecht-alert-padding-inline-end: $utrecht-space-block-lg;
+$utrecht-alert-padding-inline-start: $utrecht-space-block-lg;
+$utrecht-alert-padding-block-end: $utrecht-space-block-lg;
+$utrecht-alert-padding-block-start: $utrecht-space-block-lg;
+$utrecht-alert-column-gap: $utrecht-space-column-md;
+$utrecht-alert-color: $utrecht-color-white;
+$utrecht-alert-background-color: $utrecht-color-blue-35;
+$utrecht-alert-dialog-max-inline-size: $utrecht-article-max-inline-size;
+$utrecht-accordion-section-margin-block-start: $utrecht-space-block-2xs;
+$utrecht-accordion-panel-padding-inline-end: $utrecht-space-block-md;
+$utrecht-accordion-panel-padding-inline-start: $utrecht-space-block-md;
+$utrecht-accordion-panel-padding-block-end: $utrecht-space-block-xs;
+$utrecht-accordion-panel-padding-block-start: $utrecht-space-block-xs;
+$utrecht-accordion-panel-border-color: $utrecht-color-grey-95;
+$utrecht-accordion-button-icon-utrecht-background-color: $utrecht-color-yellow-50;
+$utrecht-accordion-button-focus-color: $utrecht-color-grey-10;
+$utrecht-accordion-button-focus-border-color: $utrecht-color-grey-95;
+$utrecht-accordion-button-focus-background-color: $utrecht-color-grey-80;
+$utrecht-accordion-button-active-color: $utrecht-color-grey-10;
+$utrecht-accordion-button-active-border-color: $utrecht-color-grey-95;
+$utrecht-accordion-button-active-background-color: $utrecht-color-grey-80;
+$utrecht-accordion-button-hover-color: $utrecht-color-grey-10;
+$utrecht-accordion-button-hover-border-color: $utrecht-color-grey-95;
+$utrecht-accordion-button-border-color: $utrecht-color-grey-95;
+$utrecht-accordion-button-color: $utrecht-color-grey-10;
+$utrecht-accordion-button-background-color: $utrecht-color-grey-95;
+$utrecht-accordion-button-padding-block-start: $utrecht-space-block-xs;
+$utrecht-accordion-button-padding-block-end: $utrecht-space-block-xs;
+$utrecht-accordion-button-padding-inline-start: $utrecht-space-block-md;
+$utrecht-accordion-button-padding-inline-end: $utrecht-space-block-md;
+$utrecht-accordion-row-gap: $utrecht-space-block-xs;
+$of-progress-indicator-background-color: $utrecht-document-background-color;
+$of-page-footer-fg: $utrecht-page-footer-color;
+$of-page-footer-bg: $utrecht-page-footer-background-color;
+$of-layout-background: $utrecht-document-background-color;
+$denhaag-process-steps-sub-step-line-color: $denhaag-process-steps-step-line-color;
+$utrecht-toptask-link-hover-color: $utrecht-button-primary-action-hover-color;
+$utrecht-toptask-link-hover-background-color: $utrecht-button-primary-action-hover-background-color;
+$utrecht-toptask-link-color: $utrecht-button-primary-action-color;
+$utrecht-toptask-link-background-color: $utrecht-button-primary-action-background-color;
+$utrecht-skip-link-focus-color: $utrecht-topnav-link-focus-color;
+$utrecht-skip-link-focus-background-color: $utrecht-topnav-link-focus-background-color;
+$utrecht-skip-link-padding-inline-end: $utrecht-button-padding-inline-end;
+$utrecht-skip-link-padding-inline-start: $utrecht-button-padding-inline-start;
+$utrecht-skip-link-padding-block-end: $utrecht-button-padding-block-end;
+$utrecht-skip-link-padding-block-start: $utrecht-button-padding-block-start;
+$utrecht-skip-link-color: $utrecht-topnav-link-color;
+$utrecht-skip-link-background-color: $utrecht-topnav-list-background-color;
+$utrecht-radio-button-border-color: $utrecht-form-control-border-color;
+$utrecht-radio-button-background-color: $utrecht-form-control-background-color;
+$utrecht-paragraph-lead-color: $utrecht-document-color;
+$utrecht-number-badge-border-radius: $utrecht-number-badge-font-size;
+$utrecht-listbox-border-width: $utrecht-form-control-border-width;
+$utrecht-listbox-border-color: $utrecht-form-control-border-color;
+$utrecht-link-visited-color: $utrecht-link-color;
+$utrecht-link-hover-color: $utrecht-link-focus-color;
+$utrecht-link-active-color: $utrecht-link-color;
+$utrecht-form-field-error-message-color: $utrecht-feedback-invalid-color;
+$utrecht-form-field-description-warning-color: $utrecht-feedback-warning-color;
+$utrecht-form-field-description-invalid-color: $utrecht-feedback-invalid-color;
+$utrecht-form-control-invalid-border-color: $utrecht-feedback-invalid-border-color;
+$utrecht-form-control-font-family: $utrecht-document-font-family;
+$utrecht-drawer-color: $utrecht-document-color;
+$utrecht-drawer-background-color: $utrecht-document-background-color;
+$utrecht-feedback-active-color: $utrecht-feedback-safe-color;
+$utrecht-feedback-inactive-color: $utrecht-feedback-danger-color;
+$utrecht-feedback-success-color: $utrecht-feedback-safe-color;
+$utrecht-feedback-error-color: $utrecht-feedback-danger-color;
+$utrecht-feedback-valid-color: $utrecht-feedback-safe-color;
+$utrecht-feedback-invalid-fill-background-color: $utrecht-feedback-invalid-background-color;
+$utrecht-feedback-safe-border-color: $utrecht-feedback-safe-color;
+$utrecht-feedback-safe-background-color: $utrecht-feedback-safe-color;
+$utrecht-feedback-warning-border-color: $utrecht-feedback-warning-color;
+$utrecht-feedback-warning-background-color: $utrecht-feedback-warning-color;
+$utrecht-feedback-danger-border-color: $utrecht-feedback-danger-color;
+$utrecht-feedback-danger-background-color: $utrecht-feedback-danger-color;
+$utrecht-checkbox-color: $utrecht-form-control-color;
+$utrecht-checkbox-border-color: $utrecht-form-control-border-color;
+$utrecht-checkbox-background-color: $utrecht-form-control-background-color;
+$utrecht-button-subtle-pressed-color: $utrecht-button-subtle-active-color;
+$utrecht-button-subtle-pressed-background-color: $utrecht-button-subtle-active-background-color;
+$utrecht-button-secondary-action-ready-background-color: $utrecht-page-background-color;
+$utrecht-button-secondary-action-warning-focus-background-color: $utrecht-page-background-color;
+$utrecht-button-secondary-action-warning-hover-background-color: $utrecht-page-background-color;
+$utrecht-button-secondary-action-warning-background-color: $utrecht-page-background-color;
+$utrecht-button-secondary-action-danger-focus-background-color: $utrecht-page-background-color;
+$utrecht-button-secondary-action-danger-hover-background-color: $utrecht-page-background-color;
+$utrecht-button-secondary-action-danger-background-color: $utrecht-page-background-color;
+$utrecht-button-secondary-action-pressed-color: $utrecht-button-secondary-action-active-color;
+$utrecht-button-secondary-action-pressed-background-color: $utrecht-button-secondary-action-active-background-color;
+$utrecht-button-secondary-action-hover-background-color: $utrecht-page-background-color;
+$utrecht-button-secondary-action-disabled-background-color: $utrecht-page-background-color;
+$utrecht-button-secondary-action-background-color: $utrecht-page-background-color;
+$utrecht-button-primary-action-pressed-color: $utrecht-button-primary-action-active-color;
+$utrecht-button-primary-action-pressed-border-color: $utrecht-button-primary-action-active-border-color;
+$utrecht-button-primary-action-pressed-background-color: $utrecht-button-primary-action-active-background-color;
+$utrecht-button-pressed-color: $utrecht-button-active-color;
+$utrecht-button-pressed-background-color: $utrecht-button-active-background-color;
+$utrecht-breadcrumb-nav-arrows-link-focus-background-color: $utrecht-focus-background-color;
+$utrecht-breadcrumb-nav-link-focus-background-color: $utrecht-focus-background-color;
+$utrecht-badge-counter-border-radius: $utrecht-badge-counter-font-size; // Default corner radius for badge components
+$of-layout-bg: $of-layout-background;
+$utrecht-radio-button-invalid-border-color: $utrecht-form-control-invalid-border-color;
+$utrecht-form-field-invalid-border-inline-start-color: $utrecht-form-control-invalid-border-color;
+$utrecht-form-field-description-valid-color: $utrecht-feedback-valid-color;
+$utrecht-feedback-active-border-color: $utrecht-feedback-safe-border-color;
+$utrecht-feedback-active-background-color: $utrecht-feedback-safe-background-color;
+$utrecht-feedback-inactive-border-color: $utrecht-feedback-danger-border-color;
+$utrecht-feedback-inactive-background-color: $utrecht-feedback-danger-background-color;
+$utrecht-feedback-success-border-color: $utrecht-feedback-safe-border-color;
+$utrecht-feedback-success-background-color: $utrecht-feedback-safe-background-color;
+$utrecht-feedback-error-border-color: $utrecht-feedback-danger-border-color;
+$utrecht-feedback-error-background-color: $utrecht-feedback-danger-background-color;
+$utrecht-feedback-valid-border-color: $utrecht-feedback-safe-border-color;
+$utrecht-feedback-valid-background-color: $utrecht-feedback-safe-background-color;
+$utrecht-feedback-safe-fill-background-color: $utrecht-feedback-safe-background-color;
+$utrecht-feedback-warning-fill-background-color: $utrecht-feedback-warning-background-color;
+$utrecht-feedback-danger-fill-background-color: $utrecht-feedback-danger-background-color;
+$utrecht-checkbox-invalid-border-color: $utrecht-form-control-invalid-border-color;
+$utrecht-feedback-active-fill-background-color: $utrecht-feedback-active-background-color;
+$utrecht-feedback-inactive-fill-background-color: $utrecht-feedback-inactive-background-color;
+$utrecht-feedback-success-fill-background-color: $utrecht-feedback-success-background-color;
+$utrecht-feedback-error-fill-background-color: $utrecht-feedback-error-background-color;
+$utrecht-feedback-valid-fill-background-color: $utrecht-feedback-valid-background-color;