@utrecht/design-tokens 2.3.0 → 2.5.0

package/dist/dark/index.css

@@ -8,7 +8,14 @@
  */
 .utrecht-theme--color-scheme-dark,
 .utrecht-theme--color-scheme-dark ::backdrop {
+  --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;
@@ -152,19 +159,35 @@
   --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;
@@ -173,8 +196,6 @@
   --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;
@@ -203,6 +224,7 @@
   --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;
@@ -316,10 +338,6 @@
   --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;
@@ -366,11 +384,11 @@
   --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;
@@ -388,6 +406,53 @@
   --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: var(--utrecht-link-focus-visible-text-decoration);
+  --nl-skip-link-text-decoration: var(--utrecht-link-text-decoration);
+  --nl-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
+  --nl-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
+  --nl-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
+  --nl-paragraph-lead-font-size: var(--utrecht-typography-scale-xl-font-size);
+  --nl-paragraph-line-height: var(--utrecht-typography-line-height-md);
+  --nl-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
+  --nl-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
+  --nl-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
+  --nl-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
+  --nl-number-badge-color: var(--utrecht-color-white);
+  --nl-number-badge-background-color: var(--utrecht-color-red-40);
+  --nl-mark-color: var(--utrecht-color-black);
+  --nl-mark-background-color: var(--utrecht-color-yellow-60);
+  --nl-heading-level-6-line-height: var(--utrecht-typography-line-height-md);
+  --nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
+  --nl-heading-level-6-font-size: var(--utrecht-typography-scale-sm-font-size);
+  --nl-heading-level-6-font-family: var(--utrecht-typography-sans-serif-font-family);
+  --nl-heading-level-5-line-height: var(--utrecht-typography-line-height-md);
+  --nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
+  --nl-heading-level-5-font-size: var(--utrecht-typography-scale-sm-font-size);
+  --nl-heading-level-5-font-family: var(--utrecht-typography-sans-serif-font-family);
+  --nl-heading-level-4-line-height: var(--utrecht-typography-line-height-md);
+  --nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
+  --nl-heading-level-4-font-size: var(--utrecht-typography-scale-lg-font-size);
+  --nl-heading-level-4-font-family: var(--utrecht-typography-sans-serif-font-family);
+  --nl-heading-level-3-line-height: var(--utrecht-typography-line-height-sm);
+  --nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
+  --nl-heading-level-3-font-size: var(--utrecht-typography-scale-xl-font-size);
+  --nl-heading-level-3-font-family: var(--utrecht-typography-sans-serif-font-family);
+  --nl-heading-level-2-line-height: var(--utrecht-typography-line-height-sm);
+  --nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+  --nl-heading-level-2-font-size: var(--utrecht-typography-scale-xl-font-size);
+  --nl-heading-level-2-font-family: var(--utrecht-typography-sans-serif-font-family);
+  --nl-heading-level-1-line-height: var(--utrecht-typography-line-height-sm);
+  --nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+  --nl-heading-level-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
+  --nl-heading-level-1-font-family: var(--utrecht-typography-sans-serif-font-family);
+  --nl-data-badge-padding-inline: var(--utrecht-space-inline-sm);
+  --nl-data-badge-padding-block: var(--utrecht-space-block-xs);
+  --nl-data-badge-color: var(--utrecht-color-white);
+  --nl-data-badge-background-color: var(--utrecht-color-grey-30);
+  --nl-code-block-line-height: var(--utrecht-typography-line-height-md);
+  --nl-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
+  --nl-code-block-color: var(--utrecht-color-black);
+  --nl-code-block-background-color: var(--utrecht-color-grey-95);
   --denhaag-process-steps-sub-step-heading-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
   --denhaag-process-steps-sub-step-heading-font-size: var(--utrecht-typography-scale-sm-font-size);
   --denhaag-process-steps-sub-step-heading-color: var(--utrecht-color-grey-15);
@@ -473,8 +538,6 @@
   --utrecht-spotlight-section-padding-block-start: var(--utrecht-space-block-md);
   --utrecht-spotlight-section-color: var(--utrecht-color-grey-15);
   --utrecht-spotlight-section-background-color: var(--utrecht-color-grey-20);
-  --utrecht-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
-  --utrecht-skip-link-text-decoration: var(--utrecht-link-text-decoration);
   --utrecht-separator-margin-block-start: var(--utrecht-space-block-md);
   --utrecht-separator-margin-block-end: var(--utrecht-space-block-md);
   --utrecht-separator-color: var(--utrecht-color-grey-90);
@@ -498,11 +561,12 @@
   --utrecht-search-bar-button-color: var(--utrecht-color-white);
   --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
   --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
+  --utrecht-root-color: var(--utrecht-color-grey-10);
+  --utrecht-root-background-color: var(--utrecht-color-grey-95);
   --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-2xs);
   --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-xs);
   --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-md);
   --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
-  --utrecht-radio-button-color: var(--utrecht-color-white);
   --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
   --utrecht-radio-button-disabled-border-color: var(--utrecht-color-grey-80);
   --utrecht-radio-button-disabled-background-color: var(--utrecht-color-grey-80);
@@ -516,17 +580,11 @@
   --utrecht-radio-button-checked-border-color: var(--utrecht-color-blue-40);
   --utrecht-radio-button-checked-background-color: var(--utrecht-color-blue-40);
   --utrecht-radio-button-active-background-color: var(--utrecht-color-blue-80);
+  --utrecht-radio-button-color: var(--utrecht-color-white);
   --utrecht-pre-heading-margin-block-start: var(--utrecht-space-row-2xl);
   --utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
   --utrecht-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
-  --utrecht-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
-  --utrecht-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
-  --utrecht-paragraph-lead-font-size: var(--utrecht-typography-scale-xl-font-size);
   --utrecht-paragraph-margin-block-start: var(--utrecht-space-block-md);
-  --utrecht-paragraph-line-height: var(--utrecht-typography-line-height-md);
-  --utrecht-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
-  --utrecht-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
-  --utrecht-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
   --utrecht-pagination-relative-link-hover-color: var(--utrecht-color-white);
   --utrecht-pagination-relative-link-hover-border-color: var(--utrecht-color-blue-35);
   --utrecht-pagination-relative-link-hover-background-color: var(--utrecht-color-blue-35);
@@ -545,16 +603,18 @@
   --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
   --utrecht-page-color: var(--utrecht-color-grey-95);
   --utrecht-page-background-color: var(--utrecht-color-grey-15);
-  --utrecht-page-footer-padding-block-start: var(--utrecht-space-block-3xl);
-  --utrecht-page-footer-padding-block-end: var(--utrecht-space-block-3xl);
-  --utrecht-page-footer-padding-inline-start: var(--utrecht-space-inline-2xl);
-  --utrecht-page-footer-padding-inline-end: var(--utrecht-space-inline-2xl);
+  --utrecht-page-header-content-color: var(--utrecht-color-black);
+  --utrecht-page-header-content-background-color: var(--utrecht-color-white);
+  --utrecht-page-footer-content-padding-inline: var(--utrecht-space-inline-2xl);
+  --utrecht-page-footer-content-padding-block-start: var(--utrecht-space-block-3xl);
+  --utrecht-page-footer-content-padding-block-end: var(--utrecht-space-block-3xl);
   --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);
   --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
   --utrecht-page-footer-color: var(--utrecht-color-white);
-  --utrecht-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
-  --utrecht-number-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
-  --utrecht-number-badge-background-color: var(--utrecht-color-red-40);
+  --utrecht-page-body-content-color: var(--utrecht-color-black);
+  --utrecht-page-body-content-background-color: var(--utrecht-color-white);
+  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
+  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
   --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
   --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
   --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -578,10 +638,6 @@
   --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
   --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
   --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
-  --utrecht-nav-bar-color: var(--utrecht-color-black);
-  --utrecht-nav-bar-background-color: var(--utrecht-color-white);
-  --utrecht-mark-color: var(--utrecht-color-black);
-  --utrecht-mark-background-color: var(--utrecht-color-yellow-60);
   --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
   --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
   --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
@@ -638,30 +694,6 @@
   --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
   --utrecht-index-char-nav-margin-block-start: var(--utrecht-space-block-lg);
   --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
-  --utrecht-heading-6-line-height: var(--utrecht-typography-line-height-md);
-  --utrecht-heading-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
-  --utrecht-heading-6-font-size: var(--utrecht-typography-scale-sm-font-size);
-  --utrecht-heading-6-font-family: var(--utrecht-typography-sans-serif-font-family);
-  --utrecht-heading-5-line-height: var(--utrecht-typography-line-height-md);
-  --utrecht-heading-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
-  --utrecht-heading-5-font-size: var(--utrecht-typography-scale-sm-font-size);
-  --utrecht-heading-5-font-family: var(--utrecht-typography-sans-serif-font-family);
-  --utrecht-heading-4-line-height: var(--utrecht-typography-line-height-md);
-  --utrecht-heading-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
-  --utrecht-heading-4-font-size: var(--utrecht-typography-scale-lg-font-size);
-  --utrecht-heading-4-font-family: var(--utrecht-typography-sans-serif-font-family);
-  --utrecht-heading-3-line-height: var(--utrecht-typography-line-height-sm);
-  --utrecht-heading-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
-  --utrecht-heading-3-font-size: var(--utrecht-typography-scale-xl-font-size);
-  --utrecht-heading-3-font-family: var(--utrecht-typography-sans-serif-font-family);
-  --utrecht-heading-2-line-height: var(--utrecht-typography-line-height-sm);
-  --utrecht-heading-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
-  --utrecht-heading-2-font-size: var(--utrecht-typography-scale-xl-font-size);
-  --utrecht-heading-2-font-family: var(--utrecht-typography-sans-serif-font-family);
-  --utrecht-heading-1-line-height: var(--utrecht-typography-line-height-sm);
-  --utrecht-heading-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
-  --utrecht-heading-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
-  --utrecht-heading-1-font-family: var(--utrecht-typography-sans-serif-font-family);
   --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
   --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
   --utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);
@@ -737,12 +769,13 @@
   --utrecht-feedback-danger-color: var(--utrecht-color-red-40);
   --utrecht-column-layout-gap: var(--utrecht-space-column-md);
   --utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
+  --utrecht-code-block-padding-inline-end: var(--nl-code-block-padding-inline);
+  --utrecht-code-block-padding-inline-start: var(--nl-code-block-padding-inline);
+  --utrecht-code-block-padding-block-end: var(--nl-code-block-padding-block);
+  --utrecht-code-block-padding-block-start: var(--nl-code-block-padding-block);
   --utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
   --utrecht-code-block-margin-block-start: var(--utrecht-space-block-lg);
-  --utrecht-code-block-line-height: var(--utrecht-typography-line-height-md);
-  --utrecht-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
-  --utrecht-code-block-color: var(--utrecht-color-black);
-  --utrecht-code-block-background-color: var(--utrecht-color-grey-95);
+  --utrecht-code-block-font-family: var(--nl-code-block-font-family);
   --utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
   --utrecht-checkbox-checked-background-color: var(--utrecht-color-blue-40);
   --utrecht-checkbox-checked-border-color: var(--utrecht-color-blue-40);
@@ -870,14 +903,15 @@
   --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
   --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
   --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-body-color: var(--utrecht-color-black);
+  --utrecht-body-background-color: var(--utrecht-color-white);
+  --utrecht-body-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-body-font-family: var(--utrecht-typography-sans-serif-font-family);
   --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
   --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
   --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
   --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
-  --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm); /* Default inline padding color for badge components */
-  --utrecht-badge-padding-block: var(--utrecht-space-block-xs); /* Default block padding for badge components */
-  --utrecht-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
-  --utrecht-badge-background-color: var(--utrecht-color-grey-30); /* Default background color for badge components */
+  --utrecht-badge-border-radius: var(--nl-data-badge-border-radius); /* Default corner radius for badge components */
   --utrecht-badge-list-item-margin-inline: var(--utrecht-space-block-sm);
   --utrecht-badge-list-item-margin-block: var(--utrecht-space-block-xs);
   --utrecht-badge-counter-font-size: var(--utrecht-typography-scale-md-font-size);
@@ -929,32 +963,70 @@
   --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
   --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
   --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
+  --signalen-modal-dialog-color: var(--utrecht-body-color);
+  --signalen-modal-dialog-background-color: var(--utrecht-body-background-color);
   --of-progress-indicator-background-color: var(--utrecht-document-background-color);
   --of-page-footer-fg: var(--utrecht-page-footer-color);
   --of-page-footer-bg: var(--utrecht-page-footer-background-color);
   --of-layout-background: var(--utrecht-document-background-color);
+  --nl-skip-link-focus-visible-background-color: var(--utrecht-topnav-link-focus-background-color);
+  --nl-skip-link-focus-visible-color: var(--utrecht-topnav-link-focus-color);
+  --nl-skip-link-padding-inline: var(--utrecht-button-padding-inline-start);
+  --nl-skip-link-padding-block: var(--utrecht-button-padding-block-start);
+  --nl-skip-link-color: var(--utrecht-topnav-link-color);
+  --nl-skip-link-background-color: var(--utrecht-topnav-list-background-color);
+  --nl-paragraph-lead-color: var(--utrecht-document-color);
+  --nl-number-badge-border-radius: var(--nl-number-badge-font-size);
   --denhaag-process-steps-sub-step-line-color: var(--denhaag-process-steps-step-line-color);
   --utrecht-toptask-link-hover-color: var(--utrecht-button-primary-action-hover-color);
   --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
   --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
   --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
-  --utrecht-skip-link-focus-color: var(--utrecht-topnav-link-focus-color);
-  --utrecht-skip-link-focus-background-color: var(--utrecht-topnav-link-focus-background-color);
-  --utrecht-skip-link-padding-inline-end: var(--utrecht-button-padding-inline-end);
-  --utrecht-skip-link-padding-inline-start: var(--utrecht-button-padding-inline-start);
-  --utrecht-skip-link-padding-block-end: var(--utrecht-button-padding-block-end);
-  --utrecht-skip-link-padding-block-start: var(--utrecht-button-padding-block-start);
-  --utrecht-skip-link-color: var(--utrecht-topnav-link-color);
-  --utrecht-skip-link-background-color: var(--utrecht-topnav-list-background-color);
+  --utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
+  --utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
   --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
   --utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
-  --utrecht-paragraph-lead-color: var(--utrecht-document-color);
-  --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size);
+  --utrecht-paragraph-lead-line-height: var(--nl-paragraph-lead-line-height);
+  --utrecht-paragraph-lead-font-weight: var(--nl-paragraph-lead-font-weight);
+  --utrecht-paragraph-lead-font-size: var(--nl-paragraph-lead-font-size);
+  --utrecht-paragraph-line-height: var(--nl-paragraph-line-height);
+  --utrecht-paragraph-font-weight: var(--nl-paragraph-font-weight);
+  --utrecht-paragraph-font-size: var(--nl-paragraph-font-size);
+  --utrecht-paragraph-font-family: var(--nl-paragraph-font-family);
+  --utrecht-number-badge-font-size: var(--nl-number-badge-font-size);
+  --utrecht-number-badge-color: var(--nl-number-badge-color); /* Default text color for badge components */
+  --utrecht-number-badge-background-color: var(--nl-number-badge-background-color);
+  --utrecht-mark-color: var(--nl-mark-color);
+  --utrecht-mark-background-color: var(--nl-mark-background-color);
   --utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
   --utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
   --utrecht-link-visited-color: var(--utrecht-link-color);
   --utrecht-link-hover-color: var(--utrecht-link-focus-color);
   --utrecht-link-active-color: var(--utrecht-link-color);
+  --utrecht-heading-6-line-height: var(--nl-heading-level-6-line-height);
+  --utrecht-heading-6-font-weight: var(--nl-heading-level-6-font-weight);
+  --utrecht-heading-6-font-size: var(--nl-heading-level-6-font-size);
+  --utrecht-heading-6-font-family: var(--nl-heading-level-6-font-family);
+  --utrecht-heading-5-line-height: var(--nl-heading-level-5-line-height);
+  --utrecht-heading-5-font-weight: var(--nl-heading-level-5-font-weight);
+  --utrecht-heading-5-font-size: var(--nl-heading-level-5-font-size);
+  --utrecht-heading-5-font-family: var(--nl-heading-level-5-font-family);
+  --utrecht-heading-4-line-height: var(--nl-heading-level-4-line-height);
+  --utrecht-heading-4-font-weight: var(--nl-heading-level-4-font-weight);
+  --utrecht-heading-4-font-size: var(--nl-heading-level-4-font-size);
+  --utrecht-heading-4-font-family: var(--nl-heading-level-4-font-family);
+  --utrecht-heading-3-line-height: var(--nl-heading-level-3-line-height);
+  --utrecht-heading-3-font-weight: var(--nl-heading-level-3-font-weight);
+  --utrecht-heading-3-font-size: var(--nl-heading-level-3-font-size);
+  --utrecht-heading-3-font-family: var(--nl-heading-level-3-font-family);
+  --utrecht-heading-2-line-height: var(--nl-heading-level-2-line-height);
+  --utrecht-heading-2-font-weight: var(--nl-heading-level-2-font-weight);
+  --utrecht-heading-2-font-size: var(--nl-heading-level-2-font-size);
+  --utrecht-heading-2-font-family: var(--nl-heading-level-2-font-family);
+  --utrecht-heading-1-line-height: var(--nl-heading-level-1-line-height);
+  --utrecht-heading-1-font-weight: var(--nl-heading-level-1-font-weight);
+  --utrecht-heading-1-font-size: var(--nl-heading-level-1-font-size);
+  --utrecht-heading-1-font-family: var(--nl-heading-level-1-font-family);
   --utrecht-form-field-error-message-color: var(--utrecht-feedback-invalid-color);
   --utrecht-form-field-description-warning-color: var(--utrecht-feedback-warning-color);
   --utrecht-form-field-description-invalid-color: var(--utrecht-feedback-invalid-color);
@@ -974,6 +1046,10 @@
   --utrecht-feedback-warning-background-color: var(--utrecht-feedback-warning-color);
   --utrecht-feedback-danger-border-color: var(--utrecht-feedback-danger-color);
   --utrecht-feedback-danger-background-color: var(--utrecht-feedback-danger-color);
+  --utrecht-code-block-line-height: var(--nl-code-block-line-height);
+  --utrecht-code-block-font-size: var(--nl-code-block-font-size);
+  --utrecht-code-block-color: var(--nl-code-block-color);
+  --utrecht-code-block-background-color: var(--nl-code-block-background-color);
   --utrecht-checkbox-color: var(--utrecht-form-control-color);
   --utrecht-checkbox-border-color: var(--utrecht-form-control-border-color);
   --utrecht-checkbox-background-color: var(--utrecht-form-control-background-color);
@@ -998,9 +1074,22 @@
   --utrecht-button-pressed-background-color: var(--utrecht-button-active-background-color);
   --utrecht-breadcrumb-nav-arrows-link-focus-background-color: var(--utrecht-focus-background-color);
   --utrecht-breadcrumb-nav-link-focus-background-color: var(--utrecht-focus-background-color);
+  --utrecht-badge-padding-inline: var(--nl-data-badge-padding-inline); /* Default inline padding color for badge components */
+  --utrecht-badge-padding-block: var(--nl-data-badge-padding-block); /* Default block padding for badge components */
+  --utrecht-badge-color: var(--nl-data-badge-color); /* Default text color for badge components */
+  --utrecht-badge-background-color: var(--nl-data-badge-background-color); /* Default background color for badge components */
   --utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /* Default corner radius for badge components */
   --of-layout-bg: var(--of-layout-background);
+  --utrecht-skip-link-focus-color: var(--nl-skip-link-focus-visible-color);
+  --utrecht-skip-link-focus-background-color: var(--nl-skip-link-focus-visible-background-color);
+  --utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
+  --utrecht-skip-link-padding-inline-start: var(--nl-skip-link-padding-inline);
+  --utrecht-skip-link-padding-block-end: var(--nl-skip-link-padding-block);
+  --utrecht-skip-link-padding-block-start: var(--nl-skip-link-padding-block);
+  --utrecht-skip-link-color: var(--nl-skip-link-color);
+  --utrecht-skip-link-background-color: var(--nl-skip-link-background-color);
   --utrecht-radio-button-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
+  --utrecht-number-badge-border-radius: var(--nl-number-badge-border-radius);
   --utrecht-form-field-invalid-border-inline-start-color: var(--utrecht-form-control-invalid-border-color);
   --utrecht-form-field-description-valid-color: var(--utrecht-feedback-valid-color);
   --utrecht-feedback-active-border-color: var(--utrecht-feedback-safe-border-color);

package/dist/dark/index.d.ts

@@ -94,6 +94,11 @@ export const utrechtBlockquoteContentFontSize : string;
 export const utrechtBlockquoteCaptionFontSize : string;
 export const utrechtBlockquoteMarginBlockStart : string;
 export const utrechtBlockquoteMarginBlockEnd : string;
+export const utrechtBodyFontFamily : string;
+export const utrechtBodyFontSize : string;
+export const utrechtBodyLineHeight : string;
+export const utrechtBodyBackgroundColor : string;
+export const utrechtBodyColor : string;
 export const utrechtBreadcrumbNavMinBlockSize : string;
 export const utrechtBreadcrumbNavFontSize : string;
 export const utrechtBreadcrumbNavItemPaddingBlockStart : string;
@@ -295,6 +300,7 @@ export const utrechtCheckboxInvalidBorderColor : string;
 export const utrechtCheckboxMarginBlockStart : number;
 export const utrechtCodeBlockBackgroundColor : string;
 export const utrechtCodeBlockColor : string;
+export const utrechtCodeBlockFontFamily : string;
 export const utrechtCodeBlockFontSize : string;
 export const utrechtCodeBlockLineHeight : string;
 export const utrechtCodeBlockMarginBlockStart : string;
@@ -615,6 +621,7 @@ export const utrechtLinkListLinkColumnGap : string;
 export const utrechtLinkListLinkFontWeight : string;
 export const utrechtLinkListLinkTextDecoration : string;
 export const utrechtLinkListIconSize : string;
+export const utrechtLinkListIconInsetBlockStart : string;
 export const utrechtLinkSocialBackgroundColor : string;
 export const utrechtLinkSocialBorderColor : string;
 export const utrechtLinkSocialBorderWidth : string;
@@ -696,8 +703,6 @@ export const utrechtMapcontrolbuttonPaddingInlineEnd : string;
 export const utrechtMapcontrolbuttonPaddingInlineStart : string;
 export const utrechtMarkBackgroundColor : string;
 export const utrechtMarkColor : string;
-export const utrechtNavBarBackgroundColor : string;
-export const utrechtNavBarColor : string;
 export const utrechtNavBarContentMaxInlineSize : string;
 export const utrechtNavBarLinkPaddingBlockEnd : string;
 export const utrechtNavBarLinkPaddingBlockStart : string;
@@ -740,19 +745,38 @@ export const utrechtOrderedListPaddingInlineStart : string;
 export const utrechtOrderedListItemMarginBlockStart : string;
 export const utrechtOrderedListItemMarginBlockEnd : string;
 export const utrechtOrderedListItemPaddingInlineStart : string;
+export const utrechtPageBodyContentBackgroundColor : string;
+export const utrechtPageBodyContentColor : string;
+export const utrechtPageBodyContentPaddingBlockStart : string;
+export const utrechtPageBodyContentPaddingBlockEnd : string;
+export const utrechtPageBodyContentPaddingInlineStart : string;
+export const utrechtPageBodyContentMaxInlineSize : string;
+export const utrechtPageBodyContentPaddingInlineEnd : string;
+export const utrechtPageBodyPaddingInlineEnd : string;
+export const utrechtPageBodyPaddingInlineStart : string;
+export const utrechtPageBodyPaddingBlockEnd : string;
+export const utrechtPageBodyPaddingBlockStart : string;
 export const utrechtPageContentPaddingBlockStart : string;
 export const utrechtPageContentPaddingBlockEnd : string;
 export const utrechtPageFooterColor : string;
 export const utrechtPageFooterBackgroundColor : string;
 export const utrechtPageFooterBackgroundImage : string;
-export const utrechtPageFooterPaddingInlineEnd : string;
-export const utrechtPageFooterPaddingInlineStart : string;
-export const utrechtPageFooterPaddingBlockEnd : string;
-export const utrechtPageFooterPaddingBlockStart : string;
+export const utrechtPageFooterContentPaddingBlockEnd : string;
+export const utrechtPageFooterContentPaddingBlockStart : string;
+export const utrechtPageFooterContentMaxInlineSize : string;
+export const utrechtPageFooterContentPaddingInline : string;
 export const utrechtPageHeaderPaddingBlockStart : string;
 export const utrechtPageHeaderPaddingBlockEnd : string;
 export const utrechtPageHeaderPaddingInlineStart : string;
 export const utrechtPageHeaderPaddingInlineEnd : string;
+export const utrechtPageHeaderContentBackgroundColor : string;
+export const utrechtPageHeaderContentColor : string;
+export const utrechtPageHeaderContentPaddingBlockStart : string;
+export const utrechtPageHeaderContentPaddingBlockEnd : string;
+export const utrechtPageHeaderContentPaddingInlineStart : string;
+export const utrechtPageHeaderContentPaddingInlineEnd : string;
+export const utrechtPageHeaderContentMaxInlineSize : string;
+export const utrechtPageHeaderContentPaddingInline : string;
 export const utrechtPageBackgroundColor : string;
 export const utrechtPageColor : string;
 export const utrechtPageMarginInlineStart : string;
@@ -804,7 +828,6 @@ export const utrechtParagraphFontWeight : string;
 export const utrechtParagraphLineHeight : string;
 export const utrechtParagraphMarginBlockStart : string;
 export const utrechtParagraphMarginBlockEnd : string;
-export const utrechtParagraphLeadColor : string;
 export const utrechtParagraphLeadFontSize : string;
 export const utrechtParagraphLeadFontWeight : string;
 export const utrechtParagraphLeadLineHeight : string;
@@ -814,6 +837,7 @@ export const utrechtPreHeadingMarginBlockStart : string;
 export const utrechtRadioButtonBackgroundColor : string;
 export const utrechtRadioButtonBorderColor : string;
 export const utrechtRadioButtonBorderWidth : string;
+export const utrechtRadioButtonColor : string;
 export const utrechtRadioButtonSize : string;
 export const utrechtRadioButtonMarginInlineEnd : string;
 export const utrechtRadioButtonIconSize : string;
@@ -832,13 +856,14 @@ export const utrechtRadioButtonDisabledBorderColor : string;
 export const utrechtRadioButtonDisabledColor : string;
 export const utrechtRadioButtonInvalidBorderColor : string;
 export const utrechtRadioButtonInvalidBorderWidth : string;
-export const utrechtRadioButtonColor : string;
 export const utrechtRadioButtonBorderRadius : string;
 export const utrechtRichTextStrangerMarginBlockEnd : string;
 export const utrechtRichTextAcquaintanceMarginBlockEnd : string;
 export const utrechtRichTextFriendMarginBlockEnd : string;
 export const utrechtRichTextBestFriendMarginBlockEnd : string;
 export const utrechtRichTextConfidantMarginBlockEnd : string;
+export const utrechtRootBackgroundColor : string;
+export const utrechtRootColor : string;
 export const utrechtSearchBarButtonBackgroundColor : string;
 export const utrechtSearchBarButtonBorderColor : string;
 export const utrechtSearchBarButtonColor : string;
@@ -1131,9 +1156,73 @@ export const denhaagProcessStepsSubStepHeadingColor : string;
 export const denhaagProcessStepsSubStepHeadingFontSize : string;
 export const denhaagProcessStepsSubStepHeadingFontWeight : string;
 export const denhaagProcessStepsSubStepLineColor : string;
+export const nlCodeBlockBackgroundColor : string;
+export const nlCodeBlockColor : string;
+export const nlCodeBlockFontFamily : string;
+export const nlCodeBlockFontSize : string;
+export const nlCodeBlockLineHeight : string;
+export const nlCodeBlockPaddingBlock : string;
+export const nlCodeBlockPaddingInline : string;
+export const nlDataBadgeBackgroundColor : string;
+export const nlDataBadgeBorderRadius : string;
+export const nlDataBadgeColor : string;
+export const nlDataBadgePaddingBlock : string;
+export const nlDataBadgePaddingInline : string;
+export const nlHeadingLevel1FontFamily : string;
+export const nlHeadingLevel1FontSize : string;
+export const nlHeadingLevel1FontWeight : string;
+export const nlHeadingLevel1LineHeight : string;
+export const nlHeadingLevel2FontFamily : string;
+export const nlHeadingLevel2FontSize : string;
+export const nlHeadingLevel2FontWeight : string;
+export const nlHeadingLevel2LineHeight : string;
+export const nlHeadingLevel3FontFamily : string;
+export const nlHeadingLevel3FontSize : string;
+export const nlHeadingLevel3FontWeight : string;
+export const nlHeadingLevel3LineHeight : string;
+export const nlHeadingLevel4FontFamily : string;
+export const nlHeadingLevel4FontSize : string;
+export const nlHeadingLevel4FontWeight : string;
+export const nlHeadingLevel4LineHeight : string;
+export const nlHeadingLevel5FontFamily : string;
+export const nlHeadingLevel5FontSize : string;
+export const nlHeadingLevel5FontWeight : string;
+export const nlHeadingLevel5LineHeight : string;
+export const nlHeadingLevel6FontFamily : string;
+export const nlHeadingLevel6FontSize : string;
+export const nlHeadingLevel6FontWeight : string;
+export const nlHeadingLevel6LineHeight : string;
+export const nlMarkBackgroundColor : string;
+export const nlMarkColor : string;
+export const nlNumberBadgeBackgroundColor : string;
+export const nlNumberBadgeBorderRadius : string;
+export const nlNumberBadgeColor : string;
+export const nlNumberBadgeFontSize : string;
+export const nlNumberBadgePaddingBlock : string;
+export const nlNumberBadgePaddingInline : string;
+export const nlParagraphFontFamily : string;
+export const nlParagraphFontSize : string;
+export const nlParagraphFontWeight : string;
+export const nlParagraphLineHeight : string;
+export const nlParagraphLeadColor : string;
+export const nlParagraphLeadFontSize : string;
+export const nlParagraphLeadFontWeight : string;
+export const nlParagraphLeadLineHeight : string;
+export const nlParagraphSmallFontSize : string;
+export const nlSkipLinkBackgroundColor : string;
+export const nlSkipLinkColor : string;
+export const nlSkipLinkPaddingBlock : string;
+export const nlSkipLinkPaddingInline : string;
+export const nlSkipLinkTextDecoration : string;
+export const nlSkipLinkFocusVisibleColor : string;
+export const nlSkipLinkFocusVisibleBackgroundColor : string;
+export const nlSkipLinkFocusVisibleTextDecoration : string;
 export const ofLayoutBackground : string;
 export const ofLayoutBg : string;
 export const ofPageFooterBg : string;
 export const ofPageFooterFg : string;
 export const ofProgressIndicatorBackgroundColor : string;
 export const ofProgressIndicatorMobileBoxShadow : string;
+export const signalenModalDialogBackgroundColor : string;
+export const signalenModalDialogColor : string;
+export const signalenProgressBarBorderRadius : string;