@utrecht/design-tokens 2.3.0 → 2.5.0

package/dist/variables.less

@@ -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-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-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-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;
@@ -308,10 +330,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;
@@ -358,11 +376,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;
@@ -378,6 +396,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: @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;
@@ -461,8 +526,6 @@
 @utrecht-spotlight-section-padding-block-start: @utrecht-space-block-md;
 @utrecht-spotlight-section-color: @utrecht-color-black;
 @utrecht-spotlight-section-background-color: @utrecht-color-grey-90;
-@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;
@@ -486,11 +549,12 @@
 @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;
@@ -504,17 +568,11 @@
 @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;
@@ -533,16 +591,18 @@
 @utrecht-pagination-font-size: @utrecht-typography-scale-sm-font-size;
 @utrecht-page-color: @utrecht-color-black;
 @utrecht-page-background-color: @utrecht-color-white;
-@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;
@@ -566,10 +626,6 @@
 @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;
@@ -626,30 +682,6 @@
 @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;
@@ -726,12 +758,13 @@
 @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;
@@ -862,14 +895,15 @@
 @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;
@@ -921,32 +955,70 @@
 @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;
@@ -966,6 +1038,10 @@
 @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;
@@ -980,9 +1056,22 @@
 @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/variables.mjs

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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.3.0",
+  "version": "2.5.0",
   "author": "Community for NL Design System",
   "description": "Design Tokens for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "SEE LICENSE IN ./LICENSE.md",

package/src/component/nl/code-block.tokens.json

@@ -0,0 +1,13 @@
+{
+  "nl": {
+    "code-block": {
+      "background-color": { "value": "{utrecht.color.grey.95}" },
+      "color": { "value": "{utrecht.color.black}" },
+      "font-family": { "value": "\"Monaco\"" },
+      "font-size": { "value": "{utrecht.typography.scale.md.font-size}" },
+      "line-height": { "value": "{utrecht.typography.line-height.md}" },
+      "padding-block": { "value": "20px" },
+      "padding-inline": { "value": "20px" }
+    }
+  }
+}

package/src/component/nl/code.tokens.json

@@ -0,0 +1,11 @@
+{
+  "nl": {
+    "code": {
+      "background-color": {},
+      "color": {},
+      "font-family": {},
+      "font-size": {},
+      "line-height": {}
+    }
+  }
+}