@utrecht/design-tokens 2.2.0 → 2.4.0

package/dist/dark/variables.less

@@ -2,6 +2,12 @@
 // Do not edit directly, this file was auto-generated.
 
 @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;
@@ -166,8 +172,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;
@@ -309,10 +313,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;
@@ -363,7 +363,6 @@
 @utrecht-blockquote-margin-block-start: 1.6em;
 @utrecht-blockquote-margin-inline-end: 1.6em;
 @utrecht-blockquote-margin-inline-start: 1.6em;
-@utrecht-badge-border-radius: 0; // Default corner radius for badge components
 @utrecht-badge-counter-padding-inline: 1ex; // Default inline padding color for badge components
 @utrecht-badge-counter-padding-block: 1ex; // Default block padding for badge components
 @utrecht-backdrop-reduced-transparency-opacity: 0.98;
@@ -381,6 +380,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;
@@ -466,8 +512,6 @@
 @utrecht-spotlight-section-padding-block-start: @utrecht-space-block-md;
 @utrecht-spotlight-section-color: @utrecht-color-grey-15;
 @utrecht-spotlight-section-background-color: @utrecht-color-grey-20;
-@utrecht-skip-link-focus-visible-text-decoration: @utrecht-link-focus-visible-text-decoration;
-@utrecht-skip-link-text-decoration: @utrecht-link-text-decoration;
 @utrecht-separator-margin-block-start: @utrecht-space-block-md;
 @utrecht-separator-margin-block-end: @utrecht-space-block-md;
 @utrecht-separator-color: @utrecht-color-grey-90;
@@ -512,14 +556,7 @@
 @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;
@@ -545,9 +582,8 @@
 @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-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;
@@ -573,8 +609,6 @@
 @utrecht-nav-bar-content-max-inline-size: @utrecht-page-max-inline-size;
 @utrecht-nav-bar-color: @utrecht-color-black;
 @utrecht-nav-bar-background-color: @utrecht-color-white;
-@utrecht-mark-color: @utrecht-color-black;
-@utrecht-mark-background-color: @utrecht-color-yellow-60;
 @utrecht-mapcontrolbutton-padding-inline-start: @utrecht-space-inline-2xs;
 @utrecht-mapcontrolbutton-padding-inline-end: @utrecht-space-inline-2xs;
 @utrecht-mapcontrolbutton-padding-block-start: @utrecht-space-block-2xs;
@@ -631,30 +665,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;
@@ -730,12 +740,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;
@@ -867,10 +878,7 @@
 @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;
@@ -926,28 +934,64 @@
 @of-page-footer-fg: @utrecht-page-footer-color;
 @of-page-footer-bg: @utrecht-page-footer-background-color;
 @of-layout-background: @utrecht-document-background-color;
+@nl-skip-link-focus-visible-background-color: @utrecht-topnav-link-focus-background-color;
+@nl-skip-link-focus-visible-color: @utrecht-topnav-link-focus-color;
+@nl-skip-link-padding-inline: @utrecht-button-padding-inline-start;
+@nl-skip-link-padding-block: @utrecht-button-padding-block-start;
+@nl-skip-link-color: @utrecht-topnav-link-color;
+@nl-skip-link-background-color: @utrecht-topnav-list-background-color;
+@nl-paragraph-lead-color: @utrecht-document-color;
+@nl-number-badge-border-radius: @nl-number-badge-font-size;
 @denhaag-process-steps-sub-step-line-color: @denhaag-process-steps-step-line-color;
 @utrecht-toptask-link-hover-color: @utrecht-button-primary-action-hover-color;
 @utrecht-toptask-link-hover-background-color: @utrecht-button-primary-action-hover-background-color;
 @utrecht-toptask-link-color: @utrecht-button-primary-action-color;
 @utrecht-toptask-link-background-color: @utrecht-button-primary-action-background-color;
-@utrecht-skip-link-focus-color: @utrecht-topnav-link-focus-color;
-@utrecht-skip-link-focus-background-color: @utrecht-topnav-link-focus-background-color;
-@utrecht-skip-link-padding-inline-end: @utrecht-button-padding-inline-end;
-@utrecht-skip-link-padding-inline-start: @utrecht-button-padding-inline-start;
-@utrecht-skip-link-padding-block-end: @utrecht-button-padding-block-end;
-@utrecht-skip-link-padding-block-start: @utrecht-button-padding-block-start;
-@utrecht-skip-link-color: @utrecht-topnav-link-color;
-@utrecht-skip-link-background-color: @utrecht-topnav-list-background-color;
+@utrecht-skip-link-focus-visible-text-decoration: @nl-skip-link-focus-visible-text-decoration;
+@utrecht-skip-link-text-decoration: @nl-skip-link-text-decoration;
 @utrecht-radio-button-border-color: @utrecht-form-control-border-color;
 @utrecht-radio-button-background-color: @utrecht-form-control-background-color;
-@utrecht-paragraph-lead-color: @utrecht-document-color;
-@utrecht-number-badge-border-radius: @utrecht-number-badge-font-size;
+@utrecht-paragraph-lead-line-height: @nl-paragraph-lead-line-height;
+@utrecht-paragraph-lead-font-weight: @nl-paragraph-lead-font-weight;
+@utrecht-paragraph-lead-font-size: @nl-paragraph-lead-font-size;
+@utrecht-paragraph-line-height: @nl-paragraph-line-height;
+@utrecht-paragraph-font-weight: @nl-paragraph-font-weight;
+@utrecht-paragraph-font-size: @nl-paragraph-font-size;
+@utrecht-paragraph-font-family: @nl-paragraph-font-family;
+@utrecht-number-badge-font-size: @nl-number-badge-font-size;
+@utrecht-number-badge-color: @nl-number-badge-color; // Default text color for badge components
+@utrecht-number-badge-background-color: @nl-number-badge-background-color;
+@utrecht-mark-color: @nl-mark-color;
+@utrecht-mark-background-color: @nl-mark-background-color;
 @utrecht-listbox-border-width: @utrecht-form-control-border-width;
 @utrecht-listbox-border-color: @utrecht-form-control-border-color;
 @utrecht-link-visited-color: @utrecht-link-color;
 @utrecht-link-hover-color: @utrecht-link-focus-color;
 @utrecht-link-active-color: @utrecht-link-color;
+@utrecht-heading-6-line-height: @nl-heading-level-6-line-height;
+@utrecht-heading-6-font-weight: @nl-heading-level-6-font-weight;
+@utrecht-heading-6-font-size: @nl-heading-level-6-font-size;
+@utrecht-heading-6-font-family: @nl-heading-level-6-font-family;
+@utrecht-heading-5-line-height: @nl-heading-level-5-line-height;
+@utrecht-heading-5-font-weight: @nl-heading-level-5-font-weight;
+@utrecht-heading-5-font-size: @nl-heading-level-5-font-size;
+@utrecht-heading-5-font-family: @nl-heading-level-5-font-family;
+@utrecht-heading-4-line-height: @nl-heading-level-4-line-height;
+@utrecht-heading-4-font-weight: @nl-heading-level-4-font-weight;
+@utrecht-heading-4-font-size: @nl-heading-level-4-font-size;
+@utrecht-heading-4-font-family: @nl-heading-level-4-font-family;
+@utrecht-heading-3-line-height: @nl-heading-level-3-line-height;
+@utrecht-heading-3-font-weight: @nl-heading-level-3-font-weight;
+@utrecht-heading-3-font-size: @nl-heading-level-3-font-size;
+@utrecht-heading-3-font-family: @nl-heading-level-3-font-family;
+@utrecht-heading-2-line-height: @nl-heading-level-2-line-height;
+@utrecht-heading-2-font-weight: @nl-heading-level-2-font-weight;
+@utrecht-heading-2-font-size: @nl-heading-level-2-font-size;
+@utrecht-heading-2-font-family: @nl-heading-level-2-font-family;
+@utrecht-heading-1-line-height: @nl-heading-level-1-line-height;
+@utrecht-heading-1-font-weight: @nl-heading-level-1-font-weight;
+@utrecht-heading-1-font-size: @nl-heading-level-1-font-size;
+@utrecht-heading-1-font-family: @nl-heading-level-1-font-family;
 @utrecht-form-field-error-message-color: @utrecht-feedback-invalid-color;
 @utrecht-form-field-description-warning-color: @utrecht-feedback-warning-color;
 @utrecht-form-field-description-invalid-color: @utrecht-feedback-invalid-color;
@@ -967,6 +1011,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;
@@ -991,9 +1039,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/dark/variables.mjs

@@ -284,6 +284,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";
@@ -737,7 +738,6 @@ export const utrechtParagraphFontWeight = "400";
 export const utrechtParagraphLineHeight = "1.5";
 export const utrechtParagraphMarginBlockStart = "16px";
 export const utrechtParagraphMarginBlockEnd = "0";
-export const utrechtParagraphLeadColor = "hsl(0 0% 95%)";
 export const utrechtParagraphLeadFontSize = "1.25rem";
 export const utrechtParagraphLeadFontWeight = "400";
 export const utrechtParagraphLeadLineHeight = "1.5";
@@ -1010,6 +1010,67 @@ 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% 95%)";
+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% 15%)";
 export const ofLayoutBg = "hsl(0 0% 15%)";
 export const ofPageFooterBg = "hsl(0 100% 40%)";

package/dist/index.cjs

@@ -276,6 +276,7 @@ module.exports = {
   "utrechtCheckboxMarginBlockStart": 0,
   "utrechtCodeBlockBackgroundColor": "hsl(0 0% 95%)",
   "utrechtCodeBlockColor": "hsl(0 0% 0%)",
+  "utrechtCodeBlockFontFamily": "\"Monaco\"",
   "utrechtCodeBlockFontSize": "1rem",
   "utrechtCodeBlockLineHeight": "1.5",
   "utrechtCodeBlockMarginBlockStart": "20px",
@@ -729,7 +730,6 @@ module.exports = {
   "utrechtParagraphLineHeight": "1.5",
   "utrechtParagraphMarginBlockStart": "16px",
   "utrechtParagraphMarginBlockEnd": "0",
-  "utrechtParagraphLeadColor": "hsl(0 0% 0%)",
   "utrechtParagraphLeadFontSize": "1.25rem",
   "utrechtParagraphLeadFontWeight": "400",
   "utrechtParagraphLeadLineHeight": "1.5",
@@ -1000,6 +1000,67 @@ module.exports = {
   "denhaagProcessStepsSubStepHeadingFontSize": "0.875rem",
   "denhaagProcessStepsSubStepHeadingFontWeight": "400",
   "denhaagProcessStepsSubStepLineColor": "hsl(90 30% 30%)",
+  "nlCodeBlockBackgroundColor": "hsl(0 0% 95%)",
+  "nlCodeBlockColor": "hsl(0 0% 0%)",
+  "nlCodeBlockFontFamily": "\"Monaco\"",
+  "nlCodeBlockFontSize": "1rem",
+  "nlCodeBlockLineHeight": "1.5",
+  "nlCodeBlockPaddingBlock": "20px",
+  "nlCodeBlockPaddingInline": "20px",
+  "nlDataBadgeBackgroundColor": "hsl(0 0% 30%)",
+  "nlDataBadgeBorderRadius": "0",
+  "nlDataBadgeColor": "hsl(0 0% 100%)",
+  "nlDataBadgePaddingBlock": "8px",
+  "nlDataBadgePaddingInline": "12px",
+  "nlHeadingLevel1FontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+  "nlHeadingLevel1FontSize": "2rem",
+  "nlHeadingLevel1FontWeight": "700",
+  "nlHeadingLevel1LineHeight": "1.25",
+  "nlHeadingLevel2FontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+  "nlHeadingLevel2FontSize": "1.25rem",
+  "nlHeadingLevel2FontWeight": "700",
+  "nlHeadingLevel2LineHeight": "1.25",
+  "nlHeadingLevel3FontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+  "nlHeadingLevel3FontSize": "1.25rem",
+  "nlHeadingLevel3FontWeight": "400",
+  "nlHeadingLevel3LineHeight": "1.25",
+  "nlHeadingLevel4FontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+  "nlHeadingLevel4FontSize": "1.125rem",
+  "nlHeadingLevel4FontWeight": "400",
+  "nlHeadingLevel4LineHeight": "1.5",
+  "nlHeadingLevel5FontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+  "nlHeadingLevel5FontSize": "0.875rem",
+  "nlHeadingLevel5FontWeight": "400",
+  "nlHeadingLevel5LineHeight": "1.5",
+  "nlHeadingLevel6FontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+  "nlHeadingLevel6FontSize": "0.875rem",
+  "nlHeadingLevel6FontWeight": "400",
+  "nlHeadingLevel6LineHeight": "1.5",
+  "nlMarkBackgroundColor": "hsl(48 100% 60%)",
+  "nlMarkColor": "hsl(0 0% 0%)",
+  "nlNumberBadgeBackgroundColor": "hsl(0 100% 40%)",
+  "nlNumberBadgeBorderRadius": "1rem",
+  "nlNumberBadgeColor": "hsl(0 0% 100%)",
+  "nlNumberBadgeFontSize": "1rem",
+  "nlNumberBadgePaddingBlock": "1ex",
+  "nlNumberBadgePaddingInline": "1ex",
+  "nlParagraphFontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+  "nlParagraphFontSize": "1rem",
+  "nlParagraphFontWeight": "400",
+  "nlParagraphLineHeight": "1.5",
+  "nlParagraphLeadColor": "hsl(0 0% 0%)",
+  "nlParagraphLeadFontSize": "1.25rem",
+  "nlParagraphLeadFontWeight": "400",
+  "nlParagraphLeadLineHeight": "1.5",
+  "nlParagraphSmallFontSize": "0.875rem",
+  "nlSkipLinkBackgroundColor": "hsl(0 0% 15%)",
+  "nlSkipLinkColor": "hsl(0 0% 100%)",
+  "nlSkipLinkPaddingBlock": "8px",
+  "nlSkipLinkPaddingInline": "16px",
+  "nlSkipLinkTextDecoration": "underline",
+  "nlSkipLinkFocusVisibleColor": "hsl(0 0% 0%)",
+  "nlSkipLinkFocusVisibleBackgroundColor": "hsl(48 100% 80%)",
+  "nlSkipLinkFocusVisibleTextDecoration": "none",
   "ofLayoutBackground": "hsl(0 0% 100%)",
   "ofLayoutBg": "hsl(0 0% 100%)",
   "ofPageFooterBg": "hsl(0 100% 40%)",