@utrecht/design-tokens 2.3.0 → 2.5.0

package/dist/dark/_variables.scss

@@ -1,7 +1,14 @@
 
 // Do not edit directly, this file was auto-generated.
 
+$signalen-progress-bar-border-radius: 4px;
 $of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
+$nl-number-badge-padding-inline: 1ex;
+$nl-number-badge-padding-block: 1ex;
+$nl-data-badge-border-radius: 0;
+$nl-code-block-padding-inline: 20px;
+$nl-code-block-padding-block: 20px;
+$nl-code-block-font-family: "Monaco";
 $denhaag-process-steps-sub-step-marker-size: 12px;
 $denhaag-process-steps-step-marker-size: 28px;
 $utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -145,19 +152,35 @@ $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-inline-start: 0;
 $utrecht-page-padding-block-end: 1em;
-$utrecht-page-padding-inline-end: 2em;
+$utrecht-page-padding-inline-end: 0;
 $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-header-content-padding-inline: 2em;
+$utrecht-page-header-content-max-inline-size: 1184px;
+$utrecht-page-header-content-padding-inline-end: 2.4em;
+$utrecht-page-header-content-padding-inline-start: 2em;
+$utrecht-page-header-content-padding-block-end: 1em;
+$utrecht-page-header-content-padding-block-start: 1.8em;
+$utrecht-page-header-padding-inline-end: 0;
+$utrecht-page-header-padding-inline-start: 0;
+$utrecht-page-header-padding-block-end: 0;
+$utrecht-page-header-padding-block-start: 0;
+$utrecht-page-footer-content-max-inline-size: 1184px;
 $utrecht-page-content-padding-block-end: 2em;
 $utrecht-page-content-padding-block-start: 2em;
+$utrecht-page-body-padding-block-start: 0;
+$utrecht-page-body-padding-block-end: 0;
+$utrecht-page-body-padding-inline-start: 0;
+$utrecht-page-body-padding-inline-end: 0;
+$utrecht-page-body-content-padding-inline-end: 2.4em;
+$utrecht-page-body-content-max-inline-size: 1184px;
+$utrecht-page-body-content-padding-inline-start: 2em;
+$utrecht-page-body-content-padding-block-end: 1em;
+$utrecht-page-body-content-padding-block-start: 0;
 $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;
@@ -166,8 +189,6 @@ $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;
@@ -196,6 +217,7 @@ $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-inset-block-start: 0.15em;
 $utrecht-link-list-icon-size: 14px;
 $utrecht-link-list-link-text-decoration: none;
 $utrecht-icon-baseline-inset-block-start: 0.125em;
@@ -309,10 +331,6 @@ $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;
@@ -359,11 +377,11 @@ $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-body-line-height: 1.4;
 $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;
@@ -381,6 +399,53 @@ $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;
+$nl-skip-link-focus-visible-text-decoration: $utrecht-link-focus-visible-text-decoration;
+$nl-skip-link-text-decoration: $utrecht-link-text-decoration;
+$nl-paragraph-small-font-size: $utrecht-typography-scale-sm-font-size;
+$nl-paragraph-lead-line-height: $utrecht-typography-line-height-md;
+$nl-paragraph-lead-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
+$nl-paragraph-lead-font-size: $utrecht-typography-scale-xl-font-size;
+$nl-paragraph-line-height: $utrecht-typography-line-height-md;
+$nl-paragraph-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
+$nl-paragraph-font-size: $utrecht-typography-scale-md-font-size;
+$nl-paragraph-font-family: $utrecht-typography-sans-serif-font-family;
+$nl-number-badge-font-size: $utrecht-typography-scale-md-font-size;
+$nl-number-badge-color: $utrecht-color-white;
+$nl-number-badge-background-color: $utrecht-color-red-40;
+$nl-mark-color: $utrecht-color-black;
+$nl-mark-background-color: $utrecht-color-yellow-60;
+$nl-heading-level-6-line-height: $utrecht-typography-line-height-md;
+$nl-heading-level-6-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
+$nl-heading-level-6-font-size: $utrecht-typography-scale-sm-font-size;
+$nl-heading-level-6-font-family: $utrecht-typography-sans-serif-font-family;
+$nl-heading-level-5-line-height: $utrecht-typography-line-height-md;
+$nl-heading-level-5-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
+$nl-heading-level-5-font-size: $utrecht-typography-scale-sm-font-size;
+$nl-heading-level-5-font-family: $utrecht-typography-sans-serif-font-family;
+$nl-heading-level-4-line-height: $utrecht-typography-line-height-md;
+$nl-heading-level-4-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
+$nl-heading-level-4-font-size: $utrecht-typography-scale-lg-font-size;
+$nl-heading-level-4-font-family: $utrecht-typography-sans-serif-font-family;
+$nl-heading-level-3-line-height: $utrecht-typography-line-height-sm;
+$nl-heading-level-3-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
+$nl-heading-level-3-font-size: $utrecht-typography-scale-xl-font-size;
+$nl-heading-level-3-font-family: $utrecht-typography-sans-serif-font-family;
+$nl-heading-level-2-line-height: $utrecht-typography-line-height-sm;
+$nl-heading-level-2-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
+$nl-heading-level-2-font-size: $utrecht-typography-scale-xl-font-size;
+$nl-heading-level-2-font-family: $utrecht-typography-sans-serif-font-family;
+$nl-heading-level-1-line-height: $utrecht-typography-line-height-sm;
+$nl-heading-level-1-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
+$nl-heading-level-1-font-size: $utrecht-typography-scale-4xl-font-size;
+$nl-heading-level-1-font-family: $utrecht-typography-sans-serif-font-family;
+$nl-data-badge-padding-inline: $utrecht-space-inline-sm;
+$nl-data-badge-padding-block: $utrecht-space-block-xs;
+$nl-data-badge-color: $utrecht-color-white;
+$nl-data-badge-background-color: $utrecht-color-grey-30;
+$nl-code-block-line-height: $utrecht-typography-line-height-md;
+$nl-code-block-font-size: $utrecht-typography-scale-md-font-size;
+$nl-code-block-color: $utrecht-color-black;
+$nl-code-block-background-color: $utrecht-color-grey-95;
 $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;
@@ -466,8 +531,6 @@ $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;
@@ -491,11 +554,12 @@ $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-root-color: $utrecht-color-grey-10;
+$utrecht-root-background-color: $utrecht-color-grey-95;
 $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;
@@ -509,17 +573,11 @@ $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-radio-button-color: $utrecht-color-white;
 $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;
@@ -538,16 +596,18 @@ $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-header-content-color: $utrecht-color-black;
+$utrecht-page-header-content-background-color: $utrecht-color-white;
+$utrecht-page-footer-content-padding-inline: $utrecht-space-inline-2xl;
+$utrecht-page-footer-content-padding-block-start: $utrecht-space-block-3xl;
+$utrecht-page-footer-content-padding-block-end: $utrecht-space-block-3xl;
 $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-page-body-content-color: $utrecht-color-black;
+$utrecht-page-body-content-background-color: $utrecht-color-white;
+$utrecht-number-badge-padding-inline: $nl-number-badge-padding-inline; // Default inline padding color for badge components
+$utrecht-number-badge-padding-block: $nl-number-badge-padding-block; // Default block padding for badge components
 $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;
@@ -571,10 +631,6 @@ $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;
@@ -631,30 +687,6 @@ $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;
@@ -730,12 +762,13 @@ $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-padding-inline-end: $nl-code-block-padding-inline;
+$utrecht-code-block-padding-inline-start: $nl-code-block-padding-inline;
+$utrecht-code-block-padding-block-end: $nl-code-block-padding-block;
+$utrecht-code-block-padding-block-start: $nl-code-block-padding-block;
 $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-code-block-font-family: $nl-code-block-font-family;
 $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;
@@ -863,14 +896,15 @@ $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-body-color: $utrecht-color-black;
+$utrecht-body-background-color: $utrecht-color-white;
+$utrecht-body-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-body-font-family: $utrecht-typography-sans-serif-font-family;
 $utrecht-blockquote-caption-font-size: $utrecht-typography-scale-sm-font-size;
 $utrecht-blockquote-content-font-size: $utrecht-typography-scale-lg-font-size;
 $utrecht-blockquote-content-color: $utrecht-color-red-40;
 $utrecht-badge-font-style: $utrecht-typography-font-style-normal;
-$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-border-radius: $nl-data-badge-border-radius; // Default corner radius 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;
@@ -922,32 +956,70 @@ $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;
+$signalen-modal-dialog-color: $utrecht-body-color;
+$signalen-modal-dialog-background-color: $utrecht-body-background-color;
 $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;
+$nl-skip-link-focus-visible-background-color: $utrecht-topnav-link-focus-background-color;
+$nl-skip-link-focus-visible-color: $utrecht-topnav-link-focus-color;
+$nl-skip-link-padding-inline: $utrecht-button-padding-inline-start;
+$nl-skip-link-padding-block: $utrecht-button-padding-block-start;
+$nl-skip-link-color: $utrecht-topnav-link-color;
+$nl-skip-link-background-color: $utrecht-topnav-list-background-color;
+$nl-paragraph-lead-color: $utrecht-document-color;
+$nl-number-badge-border-radius: $nl-number-badge-font-size;
 $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-skip-link-focus-visible-text-decoration: $nl-skip-link-focus-visible-text-decoration;
+$utrecht-skip-link-text-decoration: $nl-skip-link-text-decoration;
 $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-paragraph-lead-line-height: $nl-paragraph-lead-line-height;
+$utrecht-paragraph-lead-font-weight: $nl-paragraph-lead-font-weight;
+$utrecht-paragraph-lead-font-size: $nl-paragraph-lead-font-size;
+$utrecht-paragraph-line-height: $nl-paragraph-line-height;
+$utrecht-paragraph-font-weight: $nl-paragraph-font-weight;
+$utrecht-paragraph-font-size: $nl-paragraph-font-size;
+$utrecht-paragraph-font-family: $nl-paragraph-font-family;
+$utrecht-number-badge-font-size: $nl-number-badge-font-size;
+$utrecht-number-badge-color: $nl-number-badge-color; // Default text color for badge components
+$utrecht-number-badge-background-color: $nl-number-badge-background-color;
+$utrecht-mark-color: $nl-mark-color;
+$utrecht-mark-background-color: $nl-mark-background-color;
 $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-heading-6-line-height: $nl-heading-level-6-line-height;
+$utrecht-heading-6-font-weight: $nl-heading-level-6-font-weight;
+$utrecht-heading-6-font-size: $nl-heading-level-6-font-size;
+$utrecht-heading-6-font-family: $nl-heading-level-6-font-family;
+$utrecht-heading-5-line-height: $nl-heading-level-5-line-height;
+$utrecht-heading-5-font-weight: $nl-heading-level-5-font-weight;
+$utrecht-heading-5-font-size: $nl-heading-level-5-font-size;
+$utrecht-heading-5-font-family: $nl-heading-level-5-font-family;
+$utrecht-heading-4-line-height: $nl-heading-level-4-line-height;
+$utrecht-heading-4-font-weight: $nl-heading-level-4-font-weight;
+$utrecht-heading-4-font-size: $nl-heading-level-4-font-size;
+$utrecht-heading-4-font-family: $nl-heading-level-4-font-family;
+$utrecht-heading-3-line-height: $nl-heading-level-3-line-height;
+$utrecht-heading-3-font-weight: $nl-heading-level-3-font-weight;
+$utrecht-heading-3-font-size: $nl-heading-level-3-font-size;
+$utrecht-heading-3-font-family: $nl-heading-level-3-font-family;
+$utrecht-heading-2-line-height: $nl-heading-level-2-line-height;
+$utrecht-heading-2-font-weight: $nl-heading-level-2-font-weight;
+$utrecht-heading-2-font-size: $nl-heading-level-2-font-size;
+$utrecht-heading-2-font-family: $nl-heading-level-2-font-family;
+$utrecht-heading-1-line-height: $nl-heading-level-1-line-height;
+$utrecht-heading-1-font-weight: $nl-heading-level-1-font-weight;
+$utrecht-heading-1-font-size: $nl-heading-level-1-font-size;
+$utrecht-heading-1-font-family: $nl-heading-level-1-font-family;
 $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;
@@ -967,6 +1039,10 @@ $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-code-block-line-height: $nl-code-block-line-height;
+$utrecht-code-block-font-size: $nl-code-block-font-size;
+$utrecht-code-block-color: $nl-code-block-color;
+$utrecht-code-block-background-color: $nl-code-block-background-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;
@@ -991,9 +1067,22 @@ $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-padding-inline: $nl-data-badge-padding-inline; // Default inline padding color for badge components
+$utrecht-badge-padding-block: $nl-data-badge-padding-block; // Default block padding for badge components
+$utrecht-badge-color: $nl-data-badge-color; // Default text color for badge components
+$utrecht-badge-background-color: $nl-data-badge-background-color; // Default background color for badge components
 $utrecht-badge-counter-border-radius: $utrecht-badge-counter-font-size; // Default corner radius for badge components
 $of-layout-bg: $of-layout-background;
+$utrecht-skip-link-focus-color: $nl-skip-link-focus-visible-color;
+$utrecht-skip-link-focus-background-color: $nl-skip-link-focus-visible-background-color;
+$utrecht-skip-link-padding-inline-end: $nl-skip-link-padding-inline;
+$utrecht-skip-link-padding-inline-start: $nl-skip-link-padding-inline;
+$utrecht-skip-link-padding-block-end: $nl-skip-link-padding-block;
+$utrecht-skip-link-padding-block-start: $nl-skip-link-padding-block;
+$utrecht-skip-link-color: $nl-skip-link-color;
+$utrecht-skip-link-background-color: $nl-skip-link-background-color;
 $utrecht-radio-button-invalid-border-color: $utrecht-form-control-invalid-border-color;
+$utrecht-number-badge-border-radius: $nl-number-badge-border-radius;
 $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;

package/dist/dark/index.cjs

@@ -85,6 +85,11 @@ module.exports = {
   "utrechtBlockquoteCaptionFontSize": "0.875rem",
   "utrechtBlockquoteMarginBlockStart": "1.6em",
   "utrechtBlockquoteMarginBlockEnd": "1.6em",
+  "utrechtBodyFontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+  "utrechtBodyFontSize": "1rem",
+  "utrechtBodyLineHeight": "1.4",
+  "utrechtBodyBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtBodyColor": "hsl(0 0% 0%)",
   "utrechtBreadcrumbNavMinBlockSize": "34px",
   "utrechtBreadcrumbNavFontSize": "1rem",
   "utrechtBreadcrumbNavItemPaddingBlockStart": "8px",
@@ -285,6 +290,7 @@ module.exports = {
   "utrechtCheckboxMarginBlockStart": 0,
   "utrechtCodeBlockBackgroundColor": "hsl(0 0% 95%)",
   "utrechtCodeBlockColor": "hsl(0 0% 0%)",
+  "utrechtCodeBlockFontFamily": "\"Monaco\"",
   "utrechtCodeBlockFontSize": "1rem",
   "utrechtCodeBlockLineHeight": "1.5",
   "utrechtCodeBlockMarginBlockStart": "20px",
@@ -552,6 +558,7 @@ module.exports = {
   "utrechtLinkListLinkFontWeight": "700",
   "utrechtLinkListLinkTextDecoration": "none",
   "utrechtLinkListIconSize": "14px",
+  "utrechtLinkListIconInsetBlockStart": "0.15em",
   "utrechtLinkSocialBackgroundColor": "hsl(0 100% 40%)",
   "utrechtLinkSocialBorderColor": "hsl(0 0% 100%)",
   "utrechtLinkSocialBorderWidth": "2px",
@@ -633,8 +640,6 @@ module.exports = {
   "utrechtMapcontrolbuttonPaddingInlineStart": "4px",
   "utrechtMarkBackgroundColor": "hsl(48 100% 60%)",
   "utrechtMarkColor": "hsl(0 0% 0%)",
-  "utrechtNavBarBackgroundColor": "hsl(0 0% 100%)",
-  "utrechtNavBarColor": "hsl(0 0% 0%)",
   "utrechtNavBarContentMaxInlineSize": "1184px",
   "utrechtNavBarLinkPaddingBlockEnd": "8px",
   "utrechtNavBarLinkPaddingBlockStart": "8px",
@@ -674,28 +679,47 @@ module.exports = {
   "utrechtOrderedListItemMarginBlockStart": "0.25em",
   "utrechtOrderedListItemMarginBlockEnd": "0.25em",
   "utrechtOrderedListItemPaddingInlineStart": "0",
+  "utrechtPageBodyContentBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtPageBodyContentColor": "hsl(0 0% 0%)",
+  "utrechtPageBodyContentPaddingBlockStart": "0",
+  "utrechtPageBodyContentPaddingBlockEnd": "1em",
+  "utrechtPageBodyContentPaddingInlineStart": "2em",
+  "utrechtPageBodyContentMaxInlineSize": "1184px",
+  "utrechtPageBodyContentPaddingInlineEnd": "2.4em",
+  "utrechtPageBodyPaddingInlineEnd": "0",
+  "utrechtPageBodyPaddingInlineStart": "0",
+  "utrechtPageBodyPaddingBlockEnd": "0",
+  "utrechtPageBodyPaddingBlockStart": "0",
   "utrechtPageContentPaddingBlockStart": "2em",
   "utrechtPageContentPaddingBlockEnd": "2em",
   "utrechtPageFooterColor": "hsl(0 0% 100%)",
   "utrechtPageFooterBackgroundColor": "hsl(0 100% 40%)",
   "utrechtPageFooterBackgroundImage": "linear-gradient(45deg, hsl(0 100% 40%), hsl(0 100% 40%) 50%, #d63433 50%);",
-  "utrechtPageFooterPaddingInlineEnd": "28px",
-  "utrechtPageFooterPaddingInlineStart": "28px",
-  "utrechtPageFooterPaddingBlockEnd": "48px",
-  "utrechtPageFooterPaddingBlockStart": "48px",
-  "utrechtPageHeaderPaddingBlockStart": "1.8em",
-  "utrechtPageHeaderPaddingBlockEnd": "1em",
-  "utrechtPageHeaderPaddingInlineStart": "2em",
-  "utrechtPageHeaderPaddingInlineEnd": "2.4em",
+  "utrechtPageFooterContentPaddingBlockEnd": "48px",
+  "utrechtPageFooterContentPaddingBlockStart": "48px",
+  "utrechtPageFooterContentMaxInlineSize": "1184px",
+  "utrechtPageFooterContentPaddingInline": "28px",
+  "utrechtPageHeaderPaddingBlockStart": "0",
+  "utrechtPageHeaderPaddingBlockEnd": "0",
+  "utrechtPageHeaderPaddingInlineStart": "0",
+  "utrechtPageHeaderPaddingInlineEnd": "0",
+  "utrechtPageHeaderContentBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtPageHeaderContentColor": "hsl(0 0% 0%)",
+  "utrechtPageHeaderContentPaddingBlockStart": "1.8em",
+  "utrechtPageHeaderContentPaddingBlockEnd": "1em",
+  "utrechtPageHeaderContentPaddingInlineStart": "2em",
+  "utrechtPageHeaderContentPaddingInlineEnd": "2.4em",
+  "utrechtPageHeaderContentMaxInlineSize": "1184px",
+  "utrechtPageHeaderContentPaddingInline": "2em",
   "utrechtPageBackgroundColor": "hsl(0 0% 15%)",
   "utrechtPageColor": "hsl(0 0% 95%)",
   "utrechtPageMarginInlineStart": "2em",
   "utrechtPageMarginInlineEnd": "2em",
   "utrechtPageMaxInlineSize": "1184px",
   "utrechtPagePaddingBlockStart": "1.8em",
-  "utrechtPagePaddingInlineEnd": "2em",
+  "utrechtPagePaddingInlineEnd": "0",
   "utrechtPagePaddingBlockEnd": "1em",
-  "utrechtPagePaddingInlineStart": "2em",
+  "utrechtPagePaddingInlineStart": "0",
   "utrechtPaginationFontSize": "0.875rem",
   "utrechtPaginationMarginBlockStart": "0",
   "utrechtPaginationMarginBlockEnd": "1em",
@@ -738,7 +762,6 @@ module.exports = {
   "utrechtParagraphLineHeight": "1.5",
   "utrechtParagraphMarginBlockStart": "16px",
   "utrechtParagraphMarginBlockEnd": "0",
-  "utrechtParagraphLeadColor": "hsl(0 0% 95%)",
   "utrechtParagraphLeadFontSize": "1.25rem",
   "utrechtParagraphLeadFontWeight": "400",
   "utrechtParagraphLeadLineHeight": "1.5",
@@ -748,6 +771,7 @@ module.exports = {
   "utrechtRadioButtonBackgroundColor": "hsl(0 0% 20%)",
   "utrechtRadioButtonBorderColor": "hsl(0 0% 95%)",
   "utrechtRadioButtonBorderWidth": "2px",
+  "utrechtRadioButtonColor": "hsl(0 0% 100%)",
   "utrechtRadioButtonSize": "24px",
   "utrechtRadioButtonMarginInlineEnd": "12px",
   "utrechtRadioButtonIconSize": "42%",
@@ -766,13 +790,14 @@ module.exports = {
   "utrechtRadioButtonDisabledColor": "hsl(0 0% 100%)",
   "utrechtRadioButtonInvalidBorderColor": "#990000",
   "utrechtRadioButtonInvalidBorderWidth": "2px",
-  "utrechtRadioButtonColor": "hsl(0 0% 100%)",
   "utrechtRadioButtonBorderRadius": "0",
   "utrechtRichTextStrangerMarginBlockEnd": "32px",
   "utrechtRichTextAcquaintanceMarginBlockEnd": "16px",
   "utrechtRichTextFriendMarginBlockEnd": "8px",
   "utrechtRichTextBestFriendMarginBlockEnd": "4px",
   "utrechtRichTextConfidantMarginBlockEnd": 0,
+  "utrechtRootBackgroundColor": "hsl(0 0% 95%)",
+  "utrechtRootColor": "hsl(0 0% 10%)",
   "utrechtSearchBarButtonBackgroundColor": "hsl(0 100% 40%)",
   "utrechtSearchBarButtonBorderColor": "hsl(0 100% 40%)",
   "utrechtSearchBarButtonColor": "hsl(0 0% 100%)",
@@ -1011,10 +1036,74 @@ module.exports = {
   "denhaagProcessStepsSubStepHeadingFontSize": "0.875rem",
   "denhaagProcessStepsSubStepHeadingFontWeight": "400",
   "denhaagProcessStepsSubStepLineColor": "hsl(90 30% 30%)",
+  "nlCodeBlockBackgroundColor": "hsl(0 0% 95%)",
+  "nlCodeBlockColor": "hsl(0 0% 0%)",
+  "nlCodeBlockFontFamily": "\"Monaco\"",
+  "nlCodeBlockFontSize": "1rem",
+  "nlCodeBlockLineHeight": "1.5",
+  "nlCodeBlockPaddingBlock": "20px",
+  "nlCodeBlockPaddingInline": "20px",
+  "nlDataBadgeBackgroundColor": "hsl(0 0% 30%)",
+  "nlDataBadgeBorderRadius": "0",
+  "nlDataBadgeColor": "hsl(0 0% 100%)",
+  "nlDataBadgePaddingBlock": "8px",
+  "nlDataBadgePaddingInline": "12px",
+  "nlHeadingLevel1FontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+  "nlHeadingLevel1FontSize": "2rem",
+  "nlHeadingLevel1FontWeight": "700",
+  "nlHeadingLevel1LineHeight": "1.25",
+  "nlHeadingLevel2FontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+  "nlHeadingLevel2FontSize": "1.25rem",
+  "nlHeadingLevel2FontWeight": "700",
+  "nlHeadingLevel2LineHeight": "1.25",
+  "nlHeadingLevel3FontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+  "nlHeadingLevel3FontSize": "1.25rem",
+  "nlHeadingLevel3FontWeight": "400",
+  "nlHeadingLevel3LineHeight": "1.25",
+  "nlHeadingLevel4FontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+  "nlHeadingLevel4FontSize": "1.125rem",
+  "nlHeadingLevel4FontWeight": "400",
+  "nlHeadingLevel4LineHeight": "1.5",
+  "nlHeadingLevel5FontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+  "nlHeadingLevel5FontSize": "0.875rem",
+  "nlHeadingLevel5FontWeight": "400",
+  "nlHeadingLevel5LineHeight": "1.5",
+  "nlHeadingLevel6FontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+  "nlHeadingLevel6FontSize": "0.875rem",
+  "nlHeadingLevel6FontWeight": "400",
+  "nlHeadingLevel6LineHeight": "1.5",
+  "nlMarkBackgroundColor": "hsl(48 100% 60%)",
+  "nlMarkColor": "hsl(0 0% 0%)",
+  "nlNumberBadgeBackgroundColor": "hsl(0 100% 40%)",
+  "nlNumberBadgeBorderRadius": "1rem",
+  "nlNumberBadgeColor": "hsl(0 0% 100%)",
+  "nlNumberBadgeFontSize": "1rem",
+  "nlNumberBadgePaddingBlock": "1ex",
+  "nlNumberBadgePaddingInline": "1ex",
+  "nlParagraphFontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+  "nlParagraphFontSize": "1rem",
+  "nlParagraphFontWeight": "400",
+  "nlParagraphLineHeight": "1.5",
+  "nlParagraphLeadColor": "hsl(0 0% 95%)",
+  "nlParagraphLeadFontSize": "1.25rem",
+  "nlParagraphLeadFontWeight": "400",
+  "nlParagraphLeadLineHeight": "1.5",
+  "nlParagraphSmallFontSize": "0.875rem",
+  "nlSkipLinkBackgroundColor": "hsl(0 0% 15%)",
+  "nlSkipLinkColor": "hsl(0 0% 100%)",
+  "nlSkipLinkPaddingBlock": "8px",
+  "nlSkipLinkPaddingInline": "16px",
+  "nlSkipLinkTextDecoration": "underline",
+  "nlSkipLinkFocusVisibleColor": "hsl(0 0% 0%)",
+  "nlSkipLinkFocusVisibleBackgroundColor": "hsl(48 100% 80%)",
+  "nlSkipLinkFocusVisibleTextDecoration": "none",
   "ofLayoutBackground": "hsl(0 0% 15%)",
   "ofLayoutBg": "hsl(0 0% 15%)",
   "ofPageFooterBg": "hsl(0 100% 40%)",
   "ofPageFooterFg": "hsl(0 0% 100%)",
   "ofProgressIndicatorBackgroundColor": "hsl(0 0% 15%)",
-  "ofProgressIndicatorMobileBoxShadow": "0px 0px 2px 0px rgba(0 0 0 / 20%)"
+  "ofProgressIndicatorMobileBoxShadow": "0px 0px 2px 0px rgba(0 0 0 / 20%)",
+  "signalenModalDialogBackgroundColor": "hsl(0 0% 100%)",
+  "signalenModalDialogColor": "hsl(0 0% 0%)",
+  "signalenProgressBarBorderRadius": "4px"
 };