@utrecht/design-tokens 2.4.0 → 2.5.0

package/dist/dark/_mixin.scss

@@ -3,6 +3,7 @@
  */
 
 @mixin utrecht-theme--dark {
+  --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;
@@ -153,19 +154,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;
@@ -202,6 +219,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;
@@ -361,6 +379,7 @@
   --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;
@@ -537,11 +556,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);
@@ -555,6 +575,7 @@
   --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);
@@ -577,13 +598,16 @@
   --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-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);
@@ -609,8 +633,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-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);
@@ -876,6 +898,10 @@
   --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);
@@ -932,6 +958,8 @@
   --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);

package/dist/dark/_variables.scss

@@ -1,6 +1,7 @@
 
 // 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;
@@ -151,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;
@@ -200,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;
@@ -359,6 +377,7 @@ $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;
@@ -535,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;
@@ -553,6 +573,7 @@ $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;
@@ -575,13 +596,16 @@ $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-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;
@@ -607,8 +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-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;
@@ -874,6 +896,10 @@ $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;
@@ -930,6 +956,8 @@ $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;

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",
@@ -553,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",
@@ -634,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",
@@ -675,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",
@@ -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%)",
@@ -1077,5 +1102,8 @@ module.exports = {
   "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"
 };

package/dist/dark/index.css

@@ -8,6 +8,7 @@
  */
 .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;
@@ -158,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;
@@ -207,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;
@@ -366,6 +384,7 @@
   --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;
@@ -542,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);
@@ -560,6 +580,7 @@
   --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);
@@ -582,13 +603,16 @@
   --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-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);
@@ -614,8 +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-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);
@@ -881,6 +903,10 @@
   --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);
@@ -937,6 +963,8 @@
   --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);

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;
@@ -616,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;
@@ -697,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;
@@ -741,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;
@@ -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;
@@ -1198,3 +1223,6 @@ 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;