@utrecht/design-tokens 2.2.0 → 2.4.0

package/dist/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;
@@ -308,10 +312,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;
@@ -362,7 +362,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;
@@ -378,6 +377,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 +507,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;
@@ -507,14 +551,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;
@@ -540,9 +577,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;
@@ -568,8 +604,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;
@@ -626,30 +660,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 +736,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;
@@ -866,10 +877,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;
@@ -925,28 +933,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;
@@ -966,6 +1010,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 +1028,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

@@ -275,6 +275,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";
@@ -728,7 +729,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";
@@ -999,6 +999,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% 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%)";

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.2.0",
+  "version": "2.4.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": {}
+    }
+  }
+}

package/src/component/nl/data-badge.tokens.json

@@ -0,0 +1,22 @@
+{
+  "nl": {
+    "data-badge": {
+      "background-color": {
+        "value": "{utrecht.color.grey.30}"
+      },
+      "border-radius": {
+        "value": "0"
+      },
+      "color": {
+        "value": "{utrecht.color.white}"
+      },
+      "font-weight": {},
+      "padding-block": {
+        "value": "{utrecht.space.block.xs}"
+      },
+      "padding-inline": {
+        "value": "{utrecht.space.inline.sm}"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,48 @@
+{
+  "nl": {
+    "heading": {
+      "level-1": {
+        "color": {},
+        "font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
+        "font-size": { "value": "{utrecht.typography.scale.4xl.font-size}" },
+        "font-weight": { "value": "{utrecht.typography.weight-scale.bold.font-weight}" },
+        "line-height": { "value": "{utrecht.typography.line-height.sm}" }
+      },
+      "level-2": {
+        "color": {},
+        "font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
+        "font-size": { "value": "{utrecht.typography.scale.xl.font-size}" },
+        "font-weight": { "value": "{utrecht.typography.weight-scale.bold.font-weight}" },
+        "line-height": { "value": "{utrecht.typography.line-height.sm}" }
+      },
+      "level-3": {
+        "color": {},
+        "font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
+        "font-size": { "value": "{utrecht.typography.scale.xl.font-size}" },
+        "font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
+        "line-height": { "value": "{utrecht.typography.line-height.sm}" }
+      },
+      "level-4": {
+        "color": {},
+        "font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
+        "font-size": { "value": "{utrecht.typography.scale.lg.font-size}" },
+        "font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
+        "line-height": { "value": "{utrecht.typography.line-height.md}" }
+      },
+      "level-5": {
+        "color": {},
+        "font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
+        "font-size": { "value": "{utrecht.typography.scale.sm.font-size}" },
+        "font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
+        "line-height": { "value": "{utrecht.typography.line-height.md}" }
+      },
+      "level-6": {
+        "color": {},
+        "font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
+        "font-size": { "value": "{utrecht.typography.scale.sm.font-size}" },
+        "font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
+        "line-height": { "value": "{utrecht.typography.line-height.md}" }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+{
+  "nl": {
+    "mark": {
+      "background-color": { "value": "{utrecht.color.yellow.60}" },
+      "color": { "value": "{utrecht.color.black}" }
+    }
+  }
+}

package/src/component/nl/number-badge.tokens.json

@@ -0,0 +1,23 @@
+{
+  "nl": {
+    "number-badge": {
+      "background-color": {
+        "value": "{utrecht.color.red.40}"
+      },
+      "border-radius": {
+        "value": "{nl.number-badge.font-size}"
+      },
+      "color": {
+        "value": "{utrecht.color.white}"
+      },
+      "font-size": { "value": "{utrecht.typography.scale.md.font-size}" },
+      "font-weight": {},
+      "padding-block": {
+        "value": "1ex"
+      },
+      "padding-inline": {
+        "value": "1ex"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+{
+  "nl": {
+    "paragraph": {
+      "color": {},
+      "font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
+      "font-size": { "value": "{utrecht.typography.scale.md.font-size}" },
+      "font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
+      "line-height": { "value": "{utrecht.typography.line-height.md}" },
+      "lead": {
+        "color": { "value": "{utrecht.document.color}" },
+        "font-size": { "value": "{utrecht.typography.scale.xl.font-size}" },
+        "font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
+        "line-height": { "value": "{utrecht.typography.line-height.md}" }
+      },
+      "small": {
+        "font-size": { "value": "{utrecht.typography.scale.sm.font-size}" }
+      }
+    }
+  }
+}

package/src/component/nl/skip-link.tokens.json

@@ -0,0 +1,16 @@
+{
+  "nl": {
+    "skip-link": {
+      "background-color": { "value": "{utrecht.topnav.list.background-color}" },
+      "color": { "value": "{utrecht.topnav.link.color}" },
+      "padding-block": { "value": "{utrecht.button.padding-block-start}" },
+      "padding-inline": { "value": "{utrecht.button.padding-inline-start}" },
+      "text-decoration": { "value": "{utrecht.link.text-decoration}" },
+      "focus-visible": {
+        "color": { "value": "{utrecht.topnav.link.focus.color}" },
+        "background-color": { "value": "{utrecht.topnav.link.focus.background-color}" },
+        "text-decoration": { "value": "{utrecht.link.focus-visible.text-decoration}" }
+      }
+    }
+  }
+}

package/src/component/utrecht/badge.tokens.json

@@ -2,23 +2,23 @@
   "utrecht": {
     "badge": {
       "background-color": {
-        "value": "{utrecht.color.grey.30}"
+        "value": "{nl.data-badge.background-color}"
       },
       "border-radius": {
-        "value": "0"
+        "value": "{nl.data-badge.border-radius}"
       },
       "color": {
-        "value": "{utrecht.color.white}"
+        "value": "{nl.data-badge.color}"
       },
       "font-weight": {},
       "padding-block": {
-        "value": "{utrecht.space.block.xs}"
+        "value": "{nl.data-badge.padding-block}"
       },
       "font-style": {
         "value": "{utrecht.typography.font-style.normal}"
       },
       "padding-inline": {
-        "value": "{utrecht.space.inline.sm}"
+        "value": "{nl.data-badge.padding-inline}"
       }
     }
   }

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

@@ -1,19 +1,19 @@
 {
   "utrecht": {
     "code-block": {
-      "background-color": { "value": "{utrecht.color.grey.95}" },
-      "color": { "value": "{utrecht.color.black}" },
-      "font-family": {},
-      "font-size": { "value": "{utrecht.typography.scale.md.font-size}" },
-      "line-height": { "value": "{utrecht.typography.line-height.md}" },
+      "background-color": { "value": "{nl.code-block.background-color}" },
+      "color": { "value": "{nl.code-block.color}" },
+      "font-family": { "value": "{nl.code-block.font-family}" },
+      "font-size": { "value": "{nl.code-block.font-size}" },
+      "line-height": { "value": "{nl.code-block.line-height}" },
       "margin-block-end": { "value": "{utrecht.space.block.lg}" },
       "margin-block-start": { "value": "{utrecht.space.block.lg}" },
       "margin-inline-end": {},
       "margin-inline-start": {},
-      "padding-block-end": { "value": "20px" },
-      "padding-block-start": { "value": "20px" },
-      "padding-inline-end": { "value": "20px" },
-      "padding-inline-start": { "value": "20px" }
+      "padding-block-end": { "value": "{nl.code-block.padding-block}" },
+      "padding-block-start": { "value": "{nl.code-block.padding-block}" },
+      "padding-inline-end": { "value": "{nl.code-block.padding-inline}" },
+      "padding-inline-start": { "value": "{nl.code-block.padding-inline}" }
     }
   }
 }