@dictu/design-tokens 1.6.0 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @dictu/design-tokens
 
+## 2.0.0
+
+### Major Changes
+
+- 38e03b8: Removed import of design tokens inside component css
+- 38e03b8: Breaking: All tokens in one import file, for better usage.
+
 ## 1.6.0
 
 ### Minor Changes

package/dist/index.css

@@ -178,96 +178,517 @@
   --govnl-border-border-width-sm: 1px;
   --govnl-border-border-width-md: 2px;
   --govnl-border-border-width-lg: 4px;
-  --govnl-root-background-color: rgb(248, 250, 252);
-  --govnl-brand-primary-1-50: rgb(220, 227, 234);
-  --govnl-brand-primary-1-100: rgb(184, 198, 213);
-  --govnl-brand-primary-1-200: rgb(149, 169, 192);
-  --govnl-brand-primary-1-300: rgb(115, 142, 171);
-  --govnl-brand-primary-1-400: rgb(79, 113, 150);
-  --govnl-brand-primary-1-500: rgb(21, 66, 115);
-  --govnl-brand-primary-2-50: rgb(225, 237, 218);
-  --govnl-brand-primary-2-100: rgb(195, 219, 181);
-  --govnl-brand-primary-2-200: rgb(165, 201, 145);
-  --govnl-brand-primary-2-300: rgb(136, 183, 109);
-  --govnl-brand-primary-2-400: rgb(106, 165, 73);
-  --govnl-brand-primary-2-500: rgb(57, 135, 12);
-  --govnl-brand-accent-1-color: rgb(143, 202, 231);
-  --govnl-brand-accent-2-color: rgb(225, 112, 0);
-  --govnl-brand-accent-3-color: rgb(202, 0, 93);
-  --govnl-document-background-color: rgb(255, 255, 255);
-  --govnl-document-color: rgb(15, 23, 42);
-  --govnl-document-font-family: RijksSans, Arial, Verdana, sans-serif;
-  --govnl-document-font-size: 1.125rem;
-  --govnl-document-font-weight: 400;
-  --govnl-document-strong-font-weight: 550;
-  --govnl-document-line-height: 1.5;
-  --govnl-document-subtle-color: rgb(71, 85, 105);
-  --govnl-document-inverse-background-color: rgb(15, 23, 42);
-  --govnl-document-inverse-color: rgb(255, 255, 255);
-  --govnl-line-border-color: rgb(100, 116, 139);
-  --govnl-line-subtle-border-color: rgb(203, 213, 225);
-  --govnl-line-strong-border-color: rgb(51, 65, 85);
-  --govnl-heading-color: rgb(21, 66, 115);
-  --govnl-heading-font-family: RijksSans, Arial, Verdana, sans-serif;
-  --govnl-heading-font-weight: 700;
-  --govnl-heading-line-height: 1.25;
-  --govnl-feedback-warning-background-color: rgb(253, 246, 187);
-  --govnl-feedback-warning-border-color: rgb(148, 113, 10);
-  --govnl-feedback-warning-color: rgb(148, 113, 10);
-  --govnl-feedback-informative-background-color: rgb(217, 235, 247);
-  --govnl-feedback-informative-border-color: rgb(0, 123, 199);
-  --govnl-feedback-informative-color: rgb(0, 123, 199);
-  --govnl-feedback-negative-background-color: rgb(249, 223, 221);
-  --govnl-feedback-negative-border-color: rgb(213, 43, 30);
-  --govnl-feedback-negative-color: rgb(213, 43, 30);
-  --govnl-feedback-positive-background-color: rgb(225, 237, 218);
-  --govnl-feedback-positive-border-color: rgb(57, 135, 12);
-  --govnl-feedback-positive-color: rgb(57, 135, 12);
-  --govnl-form-control-background-color: rgb(255, 255, 255);
-  --govnl-form-control-border-color: rgb(100, 116, 139);
-  --govnl-form-control-color: rgb(15, 23, 42);
-  --govnl-form-control-font-family: RijksSans, Arial, Verdana, sans-serif;
-  --govnl-form-control-font-size: 1.125rem;
-  --govnl-form-control-font-weight: 400;
-  --govnl-form-control-line-height: 1.5;
-  --govnl-form-control-disabled-background-color: rgb(248, 250, 252);
-  --govnl-form-control-disabled-border-color: rgb(100, 116, 139);
-  --govnl-form-control-disabled-color: rgb(100, 116, 139);
-  --govnl-form-control-hover-background-color: rgb(248, 250, 252);
-  --govnl-form-control-hover-border-color: rgb(51, 65, 85);
-  --govnl-form-control-hover-color: rgb(15, 23, 42);
-  --govnl-form-control-focus-background-color: rgb(255, 255, 255);
-  --govnl-form-control-focus-border-color: rgb(0, 0, 0);
-  --govnl-form-control-focus-color: rgb(0, 0, 0);
-  --govnl-form-control-invalid-background-color: rgb(255, 255, 255);
-  --govnl-form-control-invalid-border-color: rgb(213, 43, 30);
-  --govnl-form-control-invalid-color: rgb(213, 43, 30);
-  --govnl-form-control-read-only-background-color: rgb(248, 250, 252);
+  --govnl-timeline-border-color: none;
+  --govnl-timeline-toggle-icon-lg-padding-inline-start: 0px;
+  --govnl-timeline-toggle-icon-lg-padding-inline-end: 0px;
+  --govnl-timeline-toggle-link-padding-block-start: 0px;
+  --govnl-timeline-connector-padding-inline-end: 0px;
+  --govnl-timeline-connector-margin-inline-start: 15px;
+  --govnl-timeline-title-padding-block-start: 0px;
+  --govnl-timeline-heading-text-decoration: none;
+  --govnl-timeline-heading-hover-text-decoration: underline;
+  --govnl-timeline-subheading-padding-block-start: 0px;
+  --govnl-table-margin-block-end: 0;
+  --govnl-table-caption-text-align: start;
+  --govnl-table-header-sticky-border-block-end-width: 2px;
+  --govnl-table-footer-sticky-border-block-start-width: 2px;
+  --govnl-table-cell-padding-block-end: 0.5em;
+  --govnl-table-cell-padding-block-start: 0.5em;
+  --govnl-table-cell-padding-inline-end: 0.4em;
+  --govnl-table-cell-padding-inline-start: 0.4em;
+  --govnl-table-cell-icon-size: 1em;
+  --govnl-nav-bar-max-inline-size: 1280px;
+  --govnl-nav-bar-padding-inline: 0px;
+  --govnl-nav-bar-container-inline-size: 100%;
+  --govnl-nav-bar-content-column-gap: 0px;
+  --govnl-nav-bar-icon-size: 1.5em;
+  --govnl-nav-bar-link-text-decoration: none;
+  --govnl-nav-bar-menu-label-background-color: none;
+  --govnl-nav-bar-mobile-max-inline-size: 100%;
+  --govnl-logo-title-line-height: 1.063rem;
+  --govnl-logo-title-font-size: 0.913rem;
+  --govnl-logo-title-padding-block-start: 3.125rem;
+  --govnl-logo-subtitle-line-height: 1rem;
+  --govnl-logo-subtitle-font-size: 0.775rem;
+  --govnl-link-list-icon-inset-block-start: 0px;
+  --govnl-link-list-icon-size: 1.125em;
+  --govnl-link-list-link-text-decoration: None;
+  --govnl-link-list-link-hover-text-decoration: underline;
+  --govnl-icon-size: 1.5em;
+  --govnl-hero-message-max-inline-size: 50%;
+  --govnl-hero-message-border-radius: 20px;
+  --govnl-hero-border-radius: 40px;
+  --govnl-grid-template-columns-col-1: repeat(1, 1fr);
+  --govnl-grid-template-columns-col-2: repeat(2, 1fr);
+  --govnl-grid-template-columns-col-3: repeat(3, 1fr);
+  --govnl-grid-template-columns-col-4: repeat(4, 1fr);
+  --govnl-grid-template-rows-auto: auto;
+  --govnl-card-default-focus-border-color: transparant;
+  --govnl-card-heading-text-decoration-line: underline;
+  --govnl-card-heading-hover-text-decoration-line: underline;
+  --govnl-card-heading-hover-text-decoration-thickness: max(3px, .1875rem, .12em);
+  --govnl-card-heading-text-decoration-thickness: max(1px, .0625rem);
+  --govnl-card-heading-text-underline-offset: 0.1578em;
+  --govnl-card-heading-active-text-decoration-thickness: max(3px, .1875rem, .12em);
+  --govnl-card-heading-active-text-decoration-line: underline;
+  --govnl-card-heading-focus-visible-text-decoration-line: underline;
+  --govnl-card-heading-focus-visible-text-decoration-thickness: max(3px, .1875rem, .12em);
+  --govnl-card-accent-border-color: transparant;
+  --govnl-card-accent-hover-border-color: transparant;
+  --govnl-card-accent-active-border-color: transparant;
+  --govnl-card-accent-focus-border-color: transparant;
+  --govnl-button-primary-action-border-color: rgba(0, 0, 0, 0);
+  --govnl-button-primary-action-hover-border-color: rgba(0, 0, 0, 0);
+  --govnl-button-primary-action-active-border-color: rgba(0, 0, 0, 0);
+  --govnl-button-primary-action-disabled-border-color: rgba(0, 0, 0, 0);
+  --govnl-button-primary-action-focus-border-color: rgba(0, 0, 0, 0);
+  --govnl-button-secondary-action-disabled-border-color: rgba(0, 0, 0, 0);
+  --govnl-button-secondary-action-focus-border-color: rgba(0, 0, 0, 0);
+  --govnl-button-subtle-hover-border-color: rgba(0, 0, 0, 0);
+  --govnl-button-subtle-background-color: rgba(0, 0, 0, 0);
+  --govnl-button-subtle-border-color: rgba(0, 0, 0, 0);
+  --govnl-button-subtle-disabled-border-color: rgba(0, 0, 0, 0);
+  --govnl-button-subtle-focus-border-color: rgba(0, 0, 0, 0);
+  --govnl-button-subtle-active-border-color: rgba(0, 0, 0, 0);
+  --govnl-button-icon-only-background-color: rgba(0, 0, 0, 0);
+  --govnl-button-icon-only-border-color: rgba(0, 0, 0, 0);
+  --govnl-button-icon-only-hover-border-color: rgba(0, 0, 0, 0);
+  --govnl-button-icon-only-active-border-color: rgba(0, 0, 0, 0);
+  --govnl-button-icon-only-disabled-border-color: rgba(0, 0, 0, 0);
+  --govnl-button-icon-only-focus-border-color: rgba(0, 0, 0, 0);
+  --govnl-button-icon-size: 1.125em;
+  --govnl-breadcrumb-nav-link-active-text-decoration: underline;
+  --govnl-breadcrumb-nav-link-focus-visible-text-decoration: underline;
+  --govnl-breadcrumb-nav-link-hover-text-decoration: underline;
+  --govnl-breadcrumb-nav-link-text-decoration: underline;
+  --govnl-breadcrumb-nav-current-text-decoration: none;
+  --govnl-link-active-text-decoration-thickness: max(3px, .1875rem, .12em);
+  --govnl-link-hover-text-decoration-thickness: max(3px, .1875rem, .12em);
+  --govnl-link-focus-visible-text-decoration-thickness: max(3px, .1875rem, .12em);
+  --govnl-accordion-body-border-color: rgba(0, 0, 0, 0);
+  --govnl-accordion-button-border-color: rgba(0, 0, 0, 0);
+  --govnl-accordion-button-icon-size: 1.5em;
+  --govnl-accordion-button-hover-border-color: rgba(0, 0, 0, 0);
+  --govnl-accordion-button-focus-border-color: rgba(0, 0, 0, 0);
+  --govnl-accordion-button-active-border-color: rgba(0, 0, 0, 0);
+  --govnl-accordion-button-expanded-border-color: rgba(0, 0, 0, 0);
+  --govnl-accordion-button-section-border-width: 0px;
   --govnl-form-control-read-only-border-color: rgba(0, 0, 0, 0);
-  --govnl-form-control-read-only-color: rgb(15, 23, 42);
-  --govnl-form-control-placeholder-color: rgb(71, 85, 105);
-  --govnl-interaction-color: rgb(21, 66, 115);
-  --govnl-interaction-active-color: rgb(4.94% 15.5% 27.1%);
-  --govnl-interaction-hover-color: rgb(6.59% 20.7% 36.1%);
-  --govnl-focus-background-color: rgb(249, 225, 30);
-  --govnl-focus-color: rgb(0, 0, 0);
-  --govnl-focus-outline-color: rgb(169, 0, 97);
-  --govnl-focus-inverse-outline-color: rgb(255, 255, 255);
-  --govnl-focus-outline-offset: 0.125rem;
   --govnl-focus-outline-style: dashed;
-  --govnl-focus-outline-width: 2px;
-  --govnl-gap-content-min: 1rem;
-  --govnl-gap-content-max: 1.5rem;
-  --govnl-space-4xs: 0.125rem;
-  --govnl-space-3xs: 0.25rem;
-  --govnl-space-2xs: 0.5rem;
-  --govnl-space-xs: 0.75rem;
-  --govnl-space-sm: 1rem;
-  --govnl-space-md: 1.5rem;
-  --govnl-space-lg: 2rem;
-  --govnl-space-xl: 2.5rem;
-  --govnl-space-2xl: 3rem;
-  --govnl-space-3xl: 4rem;
-  --govnl-space-4xl: 5rem;
-  --govnl-content-inline-size: 50rem;
+  --nl-skip-link-text-decoration-thickness: 1px;
+  --nl-skip-link-text-underline-offset: 1px;
+  --nl-link-text-decoration-line: underline;
+  --nl-link-text-decoration-thickness: max(1px, .0625rem);
+  --nl-link-text-underline-offset: 0.1578em;
+  --nl-link-active-text-decoration-line: underline;
+  --nl-link-active-text-decoration-thickness: max(3px, .1875rem, .12em);
+  --nl-link-current-cursor: default;
+  --nl-link-disabled-cursor: disabled;
+  --nl-link-focus-visible-text-decoration-line: underline;
+  --nl-link-focus-visible-text-decoration-thickness: max(3px, .1875rem, .12em);
+  --nl-link-hover-text-decoration-line: underline;
+  --nl-link-hover-text-decoration-thickness: max(3px, .1875rem, .12em);
+  --govnl-timeline-connector-border-width: var(--govnl-border-border-width-md);
+  --govnl-timeline-border-radius: var(--govnl-border-border-radius-sm);
+  --govnl-table-caption-font-size: var(--govnl-typography-font-size-xl);
+  --govnl-table-header-border-block-end-width: var(--govnl-border-border-width-md);
+  --govnl-table-header-sticky-background-color: var(--govnl-color-white);
+  --govnl-table-header-sticky-color: var(--govnl-color-black);
+  --govnl-table-footer-sticky-background-color: var(--govnl-color-white);
+  --govnl-table-footer-sticky-color: var(--govnl-color-black);
+  --govnl-table-cell-selected-color: var(--govnl-color-black);
+  --govnl-table-row-border-block-end-width: var(--govnl-border-border-width-sm);
+  --govnl-table-row-alternate-odd-background-color: var(--govnl-color-white);
+  --govnl-table-row-alternate-odd-color: var(--govnl-color-black);
+  --govnl-table-row-alternate-even-color: var(--govnl-color-black);
+  --govnl-table-row-alternate-even-background-color: var(--govnl-color-grijs-100);
+  --govnl-section-margin-block-end: var(--govnl-dimension-size-1000);
+  --govnl-header-padding-block-end: var(--govnl-lint-size-half-lint);
+  --govnl-page-footer-border-width: var(--govnl-border-border-width-sm);
+  --govnl-nav-bar-border-block-end-width: var(--govnl-border-border-width-sm);
+  --govnl-logo-image-background-color: var(--govnl-color-white);
+  --govnl-logo-image-inline-size: var(--govnl-lint-size-lint);
+  --govnl-logo-image-block-size: var(--govnl-lint-size-2-lint);
+  --govnl-logo-image-color: var(--govnl-color-lintblauw-500);
+  --govnl-logo-title-font-weight: var(--govnl-typography-font-weight-semi-bold);
+  --govnl-logo-subtitle-font-weight: var(--govnl-typography-font-weight-regular);
+  --govnl-logo-column-gap: var(--govnl-lint-size-quarter-lint);
+  --govnl-logo-font-family: var(--govnl-typography-font-family-sans);
+  --govnl-logo-color: var(--govnl-color-lintblauw-500);
+  --govnl-list-list-item-gap: var(--govnl-dimension-size-50);
+  --govnl-list-list-item-level2-indent: var(--govnl-dimension-size-300);
+  --govnl-list-list-item-level3-indent: var(--govnl-dimension-size-600);
+  --govnl-list-gap: var(--govnl-dimension-size-100);
+  --govnl-list-prefix: var(--govnl-dimension-size-300);
+  --govnl-grid-template-columns-width: var(--govnl-dimension-size-2000);
+  --govnl-figure-caption-font-size: var(--govnl-typography-font-size-sm);
+  --govnl-figure-caption-line-height: var(--govnl-typography-line-height-sm);
+  --govnl-container-max-inline-size: calc(8 * var(--govnl-dimension-size-2000));
+  --govnl-container-padding-inline: var(--govnl-dimension-size-200);
+  --govnl-card-default-hover-background-color: var(--govnl-color-grijs-100);
+  --govnl-card-default-active-background-color: var(--govnl-color-grijs-200);
+  --govnl-card-default-border-radius: var(--govnl-border-border-radius-sm);
+  --govnl-card-default-border-width: var(--govnl-border-border-width-sm);
+  --govnl-card-accent-heading-color: var(--govnl-color-white);
+  --govnl-button-primary-action-color: var(--govnl-color-white);
+  --govnl-button-primary-action-hover-color: var(--govnl-color-white);
+  --govnl-button-primary-action-active-color: var(--govnl-color-white);
+  --govnl-button-primary-action-disabled-background-color: var(--govnl-color-grijs-50);
+  --govnl-button-primary-action-disabled-color: var(--govnl-color-grijs-500);
+  --govnl-button-secondary-action-hover-background-color: var(--govnl-color-grijs-50);
+  --govnl-button-secondary-action-background-color: var(--govnl-color-white);
+  --govnl-button-secondary-action-disabled-background-color: var(--govnl-color-grijs-50);
+  --govnl-button-secondary-action-disabled-color: var(--govnl-color-grijs-500);
+  --govnl-button-secondary-action-active-background-color: var(--govnl-color-grijs-100);
+  --govnl-button-subtle-hover-background-color: var(--govnl-color-grijs-50);
+  --govnl-button-subtle-disabled-background-color: var(--govnl-color-grijs-50);
+  --govnl-button-subtle-disabled-color: var(--govnl-color-grijs-500);
+  --govnl-button-subtle-active-background-color: var(--govnl-color-grijs-50);
+  --govnl-button-icon-only-hover-background-color: var(--govnl-color-grijs-50);
+  --govnl-button-icon-only-active-background-color: var(--govnl-color-grijs-50);
+  --govnl-button-icon-only-disabled-background-color: var(--govnl-color-grijs-50);
+  --govnl-button-icon-only-disabled-color: var(--govnl-color-grijs-500);
+  --govnl-button-border-radius: var(--govnl-border-border-radius-sm);
+  --govnl-button-border-width: var(--govnl-border-border-width-sm);
+  --govnl-button-min-block-size: var(--govnl-dimension-pointer-target-min-size);
+  --govnl-button-min-inline-size: var(--govnl-dimension-pointer-target-min-size);
+  --govnl-breadcrumb-nav-separator-size: var(--govnl-dimension-size-300);
+  --govnl-accordion-body-border-width: var(--govnl-border-border-width-sm);
+  --govnl-accordion-button-hover-background-color: var(--govnl-color-grijs-100);
+  --govnl-accordion-button-active-background-color: var(--govnl-color-grijs-200);
+  --govnl-accordion-button-section-border-block-end-width: var(--govnl-border-border-width-sm);
+  --govnl-root-background-color: var(--govnl-color-grijs-50);
+  --govnl-brand-primary-1-50: var(--govnl-color-lintblauw-50);
+  --govnl-brand-primary-1-100: var(--govnl-color-lintblauw-100);
+  --govnl-brand-primary-1-200: var(--govnl-color-lintblauw-200);
+  --govnl-brand-primary-1-300: var(--govnl-color-lintblauw-300);
+  --govnl-brand-primary-1-400: var(--govnl-color-lintblauw-400);
+  --govnl-brand-primary-1-500: var(--govnl-color-lintblauw-500);
+  --govnl-brand-primary-2-50: var(--govnl-color-groen-50);
+  --govnl-brand-primary-2-100: var(--govnl-color-groen-100);
+  --govnl-brand-primary-2-200: var(--govnl-color-groen-200);
+  --govnl-brand-primary-2-300: var(--govnl-color-groen-300);
+  --govnl-brand-primary-2-400: var(--govnl-color-groen-400);
+  --govnl-brand-primary-2-500: var(--govnl-color-groen-500);
+  --govnl-brand-accent-1-color: var(--govnl-color-lichtblauw-500);
+  --govnl-brand-accent-2-color: var(--govnl-color-oranje-500);
+  --govnl-brand-accent-3-color: var(--govnl-color-robijnrood-500);
+  --govnl-document-background-color: var(--govnl-color-white);
+  --govnl-document-color: var(--govnl-color-grijs-900);
+  --govnl-document-font-family: var(--govnl-typography-font-family-sans);
+  --govnl-document-font-size: var(--govnl-typography-font-size-md);
+  --govnl-document-font-weight: var(--govnl-typography-font-weight-regular);
+  --govnl-document-strong-font-weight: var(--govnl-typography-font-weight-semi-bold);
+  --govnl-document-line-height: var(--govnl-typography-line-height-md);
+  --govnl-document-subtle-color: var(--govnl-color-grijs-600);
+  --govnl-document-inverse-background-color: var(--govnl-color-grijs-900);
+  --govnl-document-inverse-color: var(--govnl-color-white);
+  --govnl-line-border-color: var(--govnl-color-grijs-500);
+  --govnl-line-subtle-border-color: var(--govnl-color-grijs-300);
+  --govnl-line-strong-border-color: var(--govnl-color-grijs-700);
+  --govnl-heading-font-family: var(--govnl-typography-font-family-sans);
+  --govnl-heading-font-weight: var(--govnl-typography-font-weight-bold);
+  --govnl-heading-line-height: var(--govnl-typography-line-height-sm);
+  --govnl-feedback-warning-background-color: var(--govnl-color-geel-100);
+  --govnl-feedback-warning-border-color: var(--govnl-color-bruin-500);
+  --govnl-feedback-warning-color: var(--govnl-color-bruin-500);
+  --govnl-feedback-informative-background-color: var(--govnl-color-hemelblauw-50);
+  --govnl-feedback-informative-border-color: var(--govnl-color-hemelblauw-500);
+  --govnl-feedback-informative-color: var(--govnl-color-hemelblauw-500);
+  --govnl-feedback-negative-background-color: var(--govnl-color-rood-50);
+  --govnl-feedback-negative-border-color: var(--govnl-color-rood-500);
+  --govnl-feedback-negative-color: var(--govnl-color-rood-500);
+  --govnl-feedback-positive-background-color: var(--govnl-color-groen-50);
+  --govnl-feedback-positive-border-color: var(--govnl-color-groen-500);
+  --govnl-feedback-positive-color: var(--govnl-color-groen-500);
+  --govnl-form-control-background-color: var(--govnl-color-white);
+  --govnl-form-control-border-color: var(--govnl-color-grijs-500);
+  --govnl-form-control-color: var(--govnl-color-grijs-900);
+  --govnl-form-control-font-family: var(--govnl-typography-font-family-sans);
+  --govnl-form-control-font-size: var(--govnl-typography-font-size-md);
+  --govnl-form-control-font-weight: var(--govnl-typography-font-weight-regular);
+  --govnl-form-control-line-height: var(--govnl-typography-line-height-md);
+  --govnl-form-control-disabled-background-color: var(--govnl-color-grijs-50);
+  --govnl-form-control-disabled-border-color: var(--govnl-color-grijs-500);
+  --govnl-form-control-disabled-color: var(--govnl-color-grijs-500);
+  --govnl-form-control-hover-background-color: var(--govnl-color-grijs-50);
+  --govnl-form-control-hover-border-color: var(--govnl-color-grijs-700);
+  --govnl-form-control-hover-color: var(--govnl-color-grijs-900);
+  --govnl-form-control-focus-background-color: var(--govnl-color-white);
+  --govnl-form-control-focus-border-color: var(--govnl-color-black);
+  --govnl-form-control-focus-color: var(--govnl-color-black);
+  --govnl-form-control-invalid-background-color: var(--govnl-color-white);
+  --govnl-form-control-read-only-background-color: var(--govnl-color-grijs-50);
+  --govnl-form-control-read-only-color: var(--govnl-color-grijs-900);
+  --govnl-form-control-placeholder-color: var(--govnl-color-grijs-600);
+  --govnl-interaction-color: var(--govnl-color-lintblauw-500);
+  --govnl-focus-background-color: var(--govnl-color-geel-500);
+  --govnl-focus-color: var(--govnl-color-black);
+  --govnl-focus-outline-color: var(--govnl-color-violet-500);
+  --govnl-focus-inverse-outline-color: var(--govnl-color-white);
+  --govnl-focus-outline-offset: var(--govnl-dimension-size-25);
+  --govnl-focus-outline-width: var(--govnl-border-border-width-md);
+  --govnl-gap-content-min: var(--govnl-dimension-size-200);
+  --govnl-gap-content-max: var(--govnl-dimension-size-300);
+  --govnl-space-4xs: var(--govnl-dimension-size-25);
+  --govnl-space-3xs: var(--govnl-dimension-size-50);
+  --govnl-space-2xs: var(--govnl-dimension-size-100);
+  --govnl-space-xs: var(--govnl-dimension-size-150);
+  --govnl-space-sm: var(--govnl-dimension-size-200);
+  --govnl-space-md: var(--govnl-dimension-size-300);
+  --govnl-space-lg: var(--govnl-dimension-size-400);
+  --govnl-space-xl: var(--govnl-dimension-size-500);
+  --govnl-space-2xl: var(--govnl-dimension-size-600);
+  --govnl-space-3xl: var(--govnl-dimension-size-800);
+  --govnl-space-4xl: var(--govnl-dimension-size-1000);
+  --govnl-content-inline-size: calc(5 * var(--govnl-dimension-size-2000));
+  --nl-skip-link-min-block-size: var(--govnl-dimension-pointer-target-min-size);
+  --nl-skip-link-min-inline-size: var(--govnl-dimension-pointer-target-min-size);
+  --nl-paragraph-lead-font-size: var(--govnl-typography-font-size-xl);
+  --nl-link-disabled-color: var(--govnl-color-grijs-500);
+  --nl-heading-level-1-font-size: var(--govnl-typography-font-size-3xl);
+  --nl-heading-level-1-line-height: var(--govnl-typography-line-height-sm);
+  --nl-heading-level-2-font-size: var(--govnl-typography-font-size-2xl);
+  --nl-heading-level-2-line-height: var(--govnl-typography-line-height-sm);
+  --nl-heading-level-3-font-size: var(--govnl-typography-font-size-xl);
+  --nl-heading-level-3-line-height: var(--govnl-typography-line-height-sm);
+  --nl-heading-level-4-font-size: var(--govnl-typography-font-size-lg);
+  --nl-heading-level-4-line-height: var(--govnl-typography-line-height-md);
+  --nl-heading-level-5-font-size: var(--govnl-typography-font-size-md);
+  --nl-heading-level-5-line-height: var(--govnl-typography-line-height-md);
+  --nl-heading-level-6-font-size: var(--govnl-typography-font-size-sm);
+  --nl-heading-level-6-line-height: var(--govnl-typography-line-height-md);
+  --govnl-timeline-background-color: var(--govnl-root-background-color);
+  --govnl-timeline-padding-block-start: var(--govnl-space-lg);
+  --govnl-timeline-padding-block-end: var(--govnl-space-lg);
+  --govnl-timeline-padding-inline-start: var(--govnl-space-lg);
+  --govnl-timeline-padding-inline-end: var(--govnl-space-lg);
+  --govnl-timeline-toggle-icon-sm-padding-inline-start: var(--govnl-space-3xs);
+  --govnl-timeline-toggle-icon-sm-padding-inline-end: var(--govnl-space-3xs);
+  --govnl-timeline-toggle-link-padding-block-end: var(--govnl-space-sm);
+  --govnl-timeline-connector-color: var(--govnl-brand-primary-1-500);
+  --govnl-timeline-connector-padding-inline-start: var(--govnl-space-sm);
+  --govnl-timeline-title-padding-block-end: var(--govnl-space-sm);
+  --govnl-timeline-heading-padding-block-start: var(--govnl-space-4xs);
+  --govnl-timeline-heading-padding-block-end: var(--govnl-space-md);
+  --govnl-timeline-subheading-padding-block-end: var(--govnl-space-2xs);
+  --govnl-timeline-header-column-gap: var(--govnl-gap-content-min);
+  --govnl-timeline-content-column-gap: var(--govnl-gap-content-min);
+  --govnl-table-margin-block-start: var(--govnl-space-sm);
+  --govnl-table-caption-font-weight: var(--govnl-document-font-weight);
+  --govnl-table-caption-margin-block-end: var(--govnl-space-sm);
+  --govnl-table-caption-color: var(--govnl-document-color);
+  --govnl-table-header-font-weight: var(--govnl-heading-font-weight);
+  --govnl-table-header-border-block-end-color: var(--govnl-line-strong-border-color);
+  --govnl-table-header-sticky-border-block-end-color: var(--govnl-line-strong-border-color);
+  --govnl-table-header-icon-color: var(--govnl-interaction-color);
+  --govnl-table-footer-sticky-border-block-start-color: var(--govnl-line-strong-border-color);
+  --govnl-table-cell-selected-background-color: var(--govnl-brand-primary-1-50);
+  --govnl-table-row-border-block-end-color: var(--govnl-line-border-color);
+  --govnl-header-background-color: var(--govnl-document-background-color);
+  --govnl-page-footer-background-color: var(--govnl-root-background-color);
+  --govnl-page-footer-color: var(--govnl-brand-primary-1-500);
+  --govnl-page-footer-padding-block-start: var(--govnl-space-2xl);
+  --govnl-page-footer-padding-block-end: var(--govnl-space-2xl);
+  --govnl-page-footer-content-column-gap: calc(2 * var(--govnl-gap-content-min));
+  --govnl-page-footer-content-row-gap: calc(1.5 * var(--govnl-gap-content-min));
+  --govnl-page-footer-border-color: var(--govnl-brand-primary-1-200);
+  --govnl-nav-bar-icon-color: var(--govnl-brand-primary-1-500);
+  --govnl-nav-bar-icon-active-color: var(--govnl-brand-primary-1-500);
+  --govnl-nav-bar-link-active-background-color: var(--govnl-brand-primary-1-500);
+  --govnl-nav-bar-link-active-color: var(--govnl-document-inverse-color);
+  --govnl-nav-bar-link-background-color: var(--govnl-document-background-color);
+  --govnl-nav-bar-link-color: var(--govnl-brand-primary-1-500);
+  --govnl-nav-bar-link-focus-background-color: var(--govnl-brand-primary-1-50);
+  --govnl-nav-bar-link-focus-color: var(--govnl-brand-primary-1-500);
+  --govnl-nav-bar-link-hover-background-color: var(--govnl-brand-primary-1-50);
+  --govnl-nav-bar-link-hover-color: var(--govnl-brand-primary-1-500);
+  --govnl-nav-bar-link-padding-block: var(--govnl-space-sm);
+  --govnl-nav-bar-link-padding-inline: var(--govnl-space-xs);
+  --govnl-nav-bar-link-column-gap: var(--govnl-gap-content-min) / 2;
+  --govnl-nav-bar-background-color: var(--govnl-document-background-color);
+  --govnl-nav-bar-color: var(--govnl-brand-primary-1-500);
+  --govnl-nav-bar-border-color: var(--govnl-brand-primary-1-400);
+  --govnl-nav-bar-search-padding-block: var(--govnl-space-xs);
+  --govnl-nav-bar-search-padding-inline: var(--govnl-space-xs);
+  --govnl-nav-bar-menu-label-gap: var(--govnl-gap-content-min) / 2;
+  --govnl-nav-bar-menu-label-padding-inline: var(--govnl-space-sm);
+  --govnl-nav-bar-menu-label-padding-block: var(--govnl-space-2xs);
+  --govnl-nav-bar-menu-label-color: var(--govnl-brand-primary-1-500);
+  --govnl-nav-bar-menu-label-font-size: var(--govnl-document-font-size);
+  --govnl-nav-bar-font-size: var(--govnl-document-font-size);
+  --govnl-link-list-row-gap: var(--govnl-gap-content-min) / 2;
+  --govnl-link-list-link-column-gap: var(--govnl-gap-content-min) / 2;
+  --govnl-link-list-font-weight: var(--govnl-document-font-weight);
+  --govnl-icon-color: var(--govnl-document-color);
+  --govnl-hero-message-row-gap: var(--govnl-space-4xs);
+  --govnl-hero-message-padding-block-end: var(--govnl-space-sm);
+  --govnl-hero-message-padding-block-start: var(--govnl-space-sm);
+  --govnl-hero-message-padding-inline-start: var(--govnl-space-sm);
+  --govnl-hero-message-padding-inline-end: var(--govnl-space-sm);
+  --govnl-hero-message-background-color: var(--govnl-brand-primary-1-500);
+  --govnl-hero-message-color: var(--govnl-document-inverse-color);
+  --govnl-hero-heading-font-family: var(--govnl-heading-font-family);
+  --govnl-hero-heading-font-weight: var(--govnl-heading-font-weight);
+  --govnl-hero-heading-line-height: var(--govnl-heading-line-height);
+  --govnl-hero-heading-font-size: var(--nl-heading-level-3-font-size);
+  --govnl-hero-subheading-font-family: var(--govnl-document-font-family);
+  --govnl-hero-subheading-font-weight: var(--govnl-document-font-weight);
+  --govnl-hero-subheading-line-height: var(--govnl-document-line-height);
+  --govnl-hero-subheading-font-size: var(--govnl-document-font-size);
+  --govnl-grid-gap-row-min: var(--govnl-gap-content-min);
+  --govnl-grid-gap-row-max: var(--govnl-gap-content-max);
+  --govnl-grid-gap-column-min: var(--govnl-gap-content-min);
+  --govnl-grid-gap-column-max: var(--govnl-gap-content-max);
+  --govnl-figure-caption-color: var(--govnl-document-color);
+  --govnl-figure-row-gap: var(--govnl-gap-content-min) / 2;
+  --govnl-card-default-background-color: var(--govnl-document-background-color);
+  --govnl-card-default-border-color: var(--govnl-line-subtle-border-color);
+  --govnl-card-default-hover-border-color: var(--govnl-line-border-color);
+  --govnl-card-default-active-border-color: var(--govnl-line-strong-border-color);
+  --govnl-card-default-focus-background-color: var(--govnl-focus-background-color);
+  --govnl-card-default-focus-color: var(--govnl-focus-color);
+  --govnl-card-default-main-padding-block-start: var(--govnl-space-sm);
+  --govnl-card-default-main-padding-inline-end: var(--govnl-space-sm);
+  --govnl-card-default-main-padding-inline-start: var(--govnl-space-sm);
+  --govnl-card-default-main-padding-block-end: var(--govnl-space-sm);
+  --govnl-card-default-main-row-gap: var(--govnl-space-xs);
+  --govnl-card-accent-background-color: var(--govnl-brand-primary-1-500);
+  --govnl-card-accent-color: var(--govnl-document-inverse-color);
+  --govnl-card-accent-hover-background-color: var(--govnl-brand-primary-1-500);
+  --govnl-card-accent-hover-color: var(--govnl-document-inverse-color);
+  --govnl-card-accent-active-background-color: var(--govnl-brand-primary-1-500);
+  --govnl-card-accent-active-color: var(--govnl-document-inverse-color);
+  --govnl-card-accent-focus-background-color: var(--govnl-focus-background-color);
+  --govnl-card-accent-focus-color: var(--govnl-focus-color);
+  --govnl-card-accent-heading-hover-color: var(--govnl-document-inverse-color);
+  --govnl-card-accent-heading-active-color: var(--govnl-document-inverse-color);
+  --govnl-card-accent-paragraph-color: var(--govnl-document-inverse-color);
+  --govnl-card-accent-paragraph-hover-color: var(--govnl-document-inverse-color);
+  --govnl-card-accent-paragraph-active-color: var(--govnl-document-inverse-color);
+  --govnl-button-primary-action-background-color: var(--govnl-interaction-color);
+  --govnl-button-primary-action-focus-background-color: var(--govnl-focus-background-color);
+  --govnl-button-primary-action-focus-color: var(--govnl-focus-color);
+  --govnl-button-secondary-action-border-color: var(--govnl-interaction-color);
+  --govnl-button-secondary-action-color: var(--govnl-interaction-color);
+  --govnl-button-secondary-action-focus-background-color: var(--govnl-focus-background-color);
+  --govnl-button-secondary-action-focus-color: var(--govnl-focus-color);
+  --govnl-button-subtle-color: var(--govnl-interaction-color);
+  --govnl-button-subtle-focus-background-color: var(--govnl-focus-background-color);
+  --govnl-button-subtle-focus-color: var(--govnl-focus-color);
+  --govnl-button-icon-only-color: var(--govnl-interaction-color);
+  --govnl-button-icon-only-focus-background-color: var(--govnl-focus-background-color);
+  --govnl-button-icon-only-focus-color: var(--govnl-focus-color);
+  --govnl-button-icon-only-padding-block-end: var(--govnl-space-xs);
+  --govnl-button-icon-only-padding-block-start: var(--govnl-space-xs);
+  --govnl-button-icon-only-padding-inline-start: var(--govnl-space-xs);
+  --govnl-button-icon-only-padding-inline-end: var(--govnl-space-xs);
+  --govnl-button-font-family: var(--govnl-document-font-family);
+  --govnl-button-font-size: var(--govnl-document-font-size);
+  --govnl-button-font-weight: var(--govnl-document-font-weight);
+  --govnl-button-line-height: var(--govnl-document-line-height);
+  --govnl-button-padding-block-end: var(--govnl-space-xs);
+  --govnl-button-padding-block-start: var(--govnl-space-xs);
+  --govnl-button-padding-inline-end: var(--govnl-space-sm);
+  --govnl-button-padding-inline-start: var(--govnl-space-sm);
+  --govnl-button-column-gap: var(--govnl-gap-content-min) / 2;
+  --govnl-breadcrumb-nav-font-family: var(--govnl-document-font-family);
+  --govnl-breadcrumb-nav-font-size: var(--govnl-document-font-size);
+  --govnl-breadcrumb-nav-font-weight: var(--govnl-document-font-weight);
+  --govnl-breadcrumb-nav-line-height: var(--govnl-document-line-height);
+  --govnl-breadcrumb-nav-link-padding-block-end: var(--govnl-space-xs);
+  --govnl-breadcrumb-nav-link-padding-block-start: var(--govnl-space-xs);
+  --govnl-breadcrumb-nav-link-padding-inline-end: var(--govnl-space-xs);
+  --govnl-breadcrumb-nav-link-padding-inline-start: var(--govnl-space-xs);
+  --govnl-breadcrumb-nav-link-color: var(--govnl-interaction-color);
+  --govnl-breadcrumb-nav-link-focus-visible-background-color: var(--govnl-focus-background-color);
+  --govnl-breadcrumb-nav-link-focus-visible-color: var(--govnl-focus-color);
+  --govnl-breadcrumb-nav-link-current-color: var(--govnl-document-subtle-color);
+  --govnl-breadcrumb-nav-current-padding-block-end: var(--govnl-space-xs);
+  --govnl-breadcrumb-nav-current-padding-block-start: var(--govnl-space-xs);
+  --govnl-breadcrumb-nav-current-padding-inline-end: var(--govnl-space-xs);
+  --govnl-breadcrumb-nav-current-padding-inline-start: var(--govnl-space-xs);
+  --govnl-breadcrumb-nav-separator-color: var(--govnl-document-subtle-color);
+  --govnl-accordion-body-font-family: var(--govnl-document-font-family);
+  --govnl-accordion-body-font-size: var(--govnl-document-font-size);
+  --govnl-accordion-body-font-weight: var(--govnl-document-font-weight);
+  --govnl-accordion-body-padding-block-end: var(--govnl-space-md);
+  --govnl-accordion-body-padding-block-start: var(--govnl-space-sm);
+  --govnl-accordion-body-padding-inline-end: var(--govnl-space-sm);
+  --govnl-accordion-body-padding-inline-start: var(--govnl-space-sm);
+  --govnl-accordion-button-background-color: var(--govnl-document-background-color);
+  --govnl-accordion-button-color: var(--govnl-interaction-color);
+  --govnl-accordion-button-font-family: var(--govnl-document-font-family);
+  --govnl-accordion-button-font-size: var(--govnl-document-font-size);
+  --govnl-accordion-button-font-weight: var(--govnl-document-strong-font-weight);
+  --govnl-accordion-button-line-height: var(--govnl-document-line-height);
+  --govnl-accordion-button-gap: var(--govnl-gap-content-min) / 2;
+  --govnl-accordion-button-icon-margin-inline: var(--govnl-space-xs);
+  --govnl-accordion-button-icon-color: var(--govnl-interaction-color);
+  --govnl-accordion-button-padding-block-end: var(--govnl-space-xs);
+  --govnl-accordion-button-padding-block-start: var(--govnl-space-xs);
+  --govnl-accordion-button-padding-inline-end: var(--govnl-space-sm);
+  --govnl-accordion-button-padding-inline-start: var(--govnl-space-sm);
+  --govnl-accordion-button-focus-background-color: var(--govnl-focus-background-color);
+  --govnl-accordion-button-focus-color: var(--govnl-focus-color);
+  --govnl-accordion-button-expanded-background-color: var(--govnl-document-background-color);
+  --govnl-accordion-button-expanded-color: var(--govnl-document-color);
+  --govnl-accordion-button-section-border-color: var(--govnl-line-subtle-border-color);
+  --govnl-heading-color: var(--govnl-brand-primary-1-500);
+  --govnl-form-control-invalid-border-color: var(--govnl-feedback-negative-border-color);
+  --govnl-form-control-invalid-color: var(--govnl-feedback-negative-color);
+  --govnl-interaction-active-color: var(--govnl-brand-primary-1-500);
+  --govnl-interaction-hover-color: var(--govnl-brand-primary-1-500);
+  --nl-skip-link-background-color: var(--govnl-interaction-color);
+  --nl-skip-link-color: var(--govnl-document-inverse-color);
+  --nl-skip-link-font-family: var(--govnl-document-font-family);
+  --nl-skip-link-font-size: var(--govnl-document-font-size);
+  --nl-skip-link-padding-block: var(--govnl-space-xs);
+  --nl-skip-link-padding-inline: var(--govnl-space-sm);
+  --nl-paragraph-color: var(--govnl-document-color);
+  --nl-paragraph-font-family: var(--govnl-document-font-family);
+  --nl-paragraph-font-size: var(--govnl-document-font-size);
+  --nl-paragraph-font-weight: var(--govnl-document-font-weight);
+  --nl-paragraph-line-height: var(--govnl-document-line-height);
+  --nl-paragraph-lead-font-weight: var(--govnl-document-font-weight);
+  --nl-paragraph-lead-line-height: var(--govnl-document-line-height);
+  --nl-link-color: var(--govnl-interaction-color);
+  --nl-link-text-decoration-color: var(--govnl-interaction-color);
+  --nl-link-focus-visible-background-color: var(--govnl-focus-background-color);
+  --nl-link-focus-visible-color: var(--govnl-focus-color);
+  --nl-heading-level-1-font-family: var(--govnl-heading-font-family);
+  --nl-heading-level-1-font-weight: var(--govnl-heading-font-weight);
+  --nl-heading-level-2-font-family: var(--govnl-heading-font-family);
+  --nl-heading-level-2-font-weight: var(--govnl-heading-font-weight);
+  --nl-heading-level-3-font-family: var(--govnl-heading-font-family);
+  --nl-heading-level-3-font-weight: var(--govnl-heading-font-weight);
+  --nl-heading-level-4-font-family: var(--govnl-heading-font-family);
+  --nl-heading-level-4-font-weight: var(--govnl-heading-font-weight);
+  --nl-heading-level-5-font-family: var(--govnl-heading-font-family);
+  --nl-heading-level-5-font-weight: var(--govnl-heading-font-weight);
+  --nl-heading-level-6-font-family: var(--govnl-heading-font-family);
+  --nl-heading-level-6-font-weight: var(--govnl-heading-font-weight);
+  --govnl-table-header-color: var(--govnl-heading-color);
+  --govnl-button-primary-action-hover-background-color: var(--govnl-interaction-hover-color);
+  --govnl-button-primary-action-active-background-color: var(--govnl-interaction-active-color);
+  --govnl-button-secondary-action-hover-border-color: var(--govnl-interaction-hover-color);
+  --govnl-button-secondary-action-hover-color: var(--govnl-interaction-hover-color);
+  --govnl-button-secondary-action-active-border-color: var(--govnl-interaction-active-color);
+  --govnl-button-secondary-action-active-color: var(--govnl-interaction-active-color);
+  --govnl-button-subtle-hover-color: var(--govnl-interaction-hover-color);
+  --govnl-button-subtle-active-color: var(--govnl-interaction-active-color);
+  --govnl-button-icon-only-hover-color: var(--govnl-interaction-hover-color);
+  --govnl-button-icon-only-active-color: var(--govnl-interaction-active-color);
+  --govnl-breadcrumb-nav-link-active-color: var(--govnl-interaction-active-color);
+  --govnl-breadcrumb-nav-link-hover-color: var(--govnl-interaction-hover-color);
+  --govnl-accordion-button-hover-color: var(--govnl-interaction-hover-color);
+  --govnl-accordion-button-active-color: var(--govnl-interaction-active-color);
+  --nl-link-active-color: var(--govnl-interaction-active-color);
+  --nl-link-hover-color: var(--govnl-interaction-hover-color);
+  --nl-heading-level-1-color: var(--govnl-heading-color);
+  --nl-heading-level-2-color: var(--govnl-heading-color);
+  --nl-heading-level-3-color: var(--govnl-heading-color);
+  --nl-heading-level-4-color: var(--govnl-heading-color);
+  --nl-heading-level-5-color: var(--govnl-heading-color);
+  --nl-heading-level-6-color: var(--govnl-heading-color);
 }