@dictu/design-tokens 1.0.0-alpha.0

package/LICENSE.md

@@ -0,0 +1,7 @@
+# License
+
+Copyright (c) {year} {author}. All rights reserved.
+
+The open source license does NOT apply to files in this directory.
+
+These are properietary assets to {author}.

package/dist/accordion.css

@@ -0,0 +1,45 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.dictu-accordion {
+  --govnl-accordion-body-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-accordion-button-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-accordion-button-hover-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-accordion-button-focus-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-accordion-button-active-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-accordion-button-expanded-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-accordion-button-section-border-width: 0px;
+  --govnl-accordion-body-border-width: var(--govnl-border-border-width-sm);
+  --govnl-accordion-button-icon-size: {govnl.icon.size.functional};
+  --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-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-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-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-accordion-button-color: var(--govnl-interaction-color);
+  --govnl-accordion-button-icon-color: var(--govnl-interaction-color);
+  --govnl-accordion-button-hover-color: var(--govnl-interaction-hover-color);
+  --govnl-accordion-button-active-color: var(--govnl-interaction-active-color);
+}

package/dist/breadcrumb.css

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.dictu-breadcrumb {
+  --govnl-breadcrumb-nav-link-active-text-decoration: None;
+  --govnl-breadcrumb-nav-link-focus-visible-text-decoration: None;
+  --govnl-breadcrumb-nav-link-hover-text-decoration: None;
+  --govnl-breadcrumb-nav-link-text-decoration: underline;
+  --govnl-breadcrumb-nav-separator-size: var(--govnl-dimension-size-300);
+  --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: 0px var(--govnl-space-xs);
+  --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-separator-color: var(--govnl-document-subtle-color);
+  --govnl-breadcrumb-nav-link-color: var(--govnl-interaction-color);
+  --govnl-breadcrumb-nav-link-active-color: var(--govnl-interaction-active-color);
+  --govnl-breadcrumb-nav-link-hover-color: var(--govnl-interaction-hover-color);
+}

package/dist/button.css

@@ -0,0 +1,84 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.dictu-button {
+  --govnl-button-primary-action-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-button-primary-action-hover-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-button-primary-action-active-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-button-primary-action-disabled-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-button-primary-action-focus-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-button-secondary-action-disabled-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-button-secondary-action-focus-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-button-subtle-hover-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-button-subtle-background-color: hsla(0, 0%, 0%, 0);
+  --govnl-button-subtle-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-button-subtle-disabled-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-button-subtle-focus-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-button-subtle-active-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-button-icon-only-background-color: hsla(0, 0%, 0%, 0);
+  --govnl-button-icon-only-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-button-icon-only-hover-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-button-icon-only-active-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-button-icon-only-disabled-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-button-icon-only-focus-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-button-icon-size: 1.125em;
+  --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-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-focus-background-color: var(--govnl-focus-background-color);
+  --govnl-button-secondary-action-focus-color: var(--govnl-focus-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-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-button-primary-action-background-color: var(--govnl-interaction-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-border-color: var(--govnl-interaction-color);
+  --govnl-button-secondary-action-color: var(--govnl-interaction-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-color: var(--govnl-interaction-color);
+  --govnl-button-subtle-active-color: var(--govnl-interaction-active-color);
+  --govnl-button-icon-only-color: var(--govnl-interaction-color);
+  --govnl-button-icon-only-hover-color: var(--govnl-interaction-hover-color);
+  --govnl-button-icon-only-active-color: var(--govnl-interaction-active-color);
+}

package/dist/heading.css

@@ -0,0 +1,36 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.dictu-heading {
+  --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);
+  --nl-heading-level-1-color: var(--govnl-heading-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-color: var(--govnl-heading-color);
+  --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-color: var(--govnl-heading-color);
+  --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-color: var(--govnl-heading-color);
+  --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-color: var(--govnl-heading-color);
+  --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-color: var(--govnl-heading-color);
+  --nl-heading-level-6-font-family: var(--govnl-heading-font-family);
+  --nl-heading-level-6-font-weight: var(--govnl-heading-font-weight);
+}

package/dist/icon.css

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.dictu-icon {
+  --govnl-icon-size: {govnl.icon.size.functional};
+  --govnl-icon-color: var(--govnl-document-color);
+}

package/dist/index.css

@@ -0,0 +1,275 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.dictu-theme {
+  --govnl-form-control-read-only-border-color: hsla(0, 0%, 0%, 0);
+  --govnl-focus-outline-style: dashed;
+  --govnl-color-white: hsl(0, 0%, 100%);
+  --govnl-color-black: hsl(0, 0%, 0%);
+  --govnl-color-grijs-50: hsl(210, 40%, 98%);
+  --govnl-color-grijs-100: hsl(210, 40%, 96%);
+  --govnl-color-grijs-200: hsl(214, 32%, 91%);
+  --govnl-color-grijs-300: hsl(213, 27%, 84%);
+  --govnl-color-grijs-400: hsl(215, 20%, 65%);
+  --govnl-color-grijs-500: hsl(215, 16%, 47%);
+  --govnl-color-grijs-600: hsl(215, 19%, 35%);
+  --govnl-color-grijs-700: hsl(215, 25%, 27%);
+  --govnl-color-grijs-800: hsl(217, 33%, 17%);
+  --govnl-color-grijs-900: hsl(222, 47%, 11%);
+  --govnl-color-lintblauw-50: hsl(210, 25%, 89%);
+  --govnl-color-lintblauw-100: hsl(211, 26%, 78%);
+  --govnl-color-lintblauw-200: hsl(212, 25%, 67%);
+  --govnl-color-lintblauw-300: hsl(211, 25%, 56%);
+  --govnl-color-lintblauw-400: hsl(211, 31%, 45%);
+  --govnl-color-lintblauw-500: hsl(211, 69%, 27%);
+  --govnl-color-donkerblauw-50: hsl(201, 43%, 90%);
+  --govnl-color-donkerblauw-100: hsl(200, 44%, 79%);
+  --govnl-color-donkerblauw-200: hsl(200, 44%, 69%);
+  --govnl-color-donkerblauw-300: hsl(200, 44%, 58%);
+  --govnl-color-donkerblauw-400: hsl(200, 48%, 48%);
+  --govnl-color-donkerblauw-500: hsl(200, 99%, 31%);
+  --govnl-color-hemelblauw-50: hsl(204, 65%, 91%);
+  --govnl-color-hemelblauw-100: hsl(203, 64%, 82%);
+  --govnl-color-hemelblauw-200: hsl(203, 64%, 73%);
+  --govnl-color-hemelblauw-300: hsl(203, 64%, 63%);
+  --govnl-color-hemelblauw-400: hsl(203, 64%, 54%);
+  --govnl-color-hemelblauw-500: hsl(203, 100%, 39%);
+  --govnl-color-lichtblauw-50: hsl(201, 70%, 96%);
+  --govnl-color-lichtblauw-100: hsl(200, 66%, 92%);
+  --govnl-color-lichtblauw-200: hsl(200, 65%, 88%);
+  --govnl-color-lichtblauw-300: hsl(200, 63%, 84%);
+  --govnl-color-lichtblauw-400: hsl(200, 65%, 80%);
+  --govnl-color-lichtblauw-500: hsl(200, 65%, 73%);
+  --govnl-color-mintgroen-50: hsl(163, 50%, 95%);
+  --govnl-color-mintgroen-100: hsl(163, 50%, 89%);
+  --govnl-color-mintgroen-200: hsl(161, 51%, 84%);
+  --govnl-color-mintgroen-300: hsl(162, 51%, 78%);
+  --govnl-color-mintgroen-400: hsl(162, 50%, 73%);
+  --govnl-color-mintgroen-500: hsl(162, 51%, 64%);
+  --govnl-color-groen-50: hsl(98, 35%, 89%);
+  --govnl-color-groen-100: hsl(98, 35%, 78%);
+  --govnl-color-groen-200: hsl(99, 34%, 68%);
+  --govnl-color-groen-300: hsl(98, 34%, 57%);
+  --govnl-color-groen-400: hsl(98, 39%, 47%);
+  --govnl-color-groen-500: hsl(98, 84%, 29%);
+  --govnl-color-donkergroen-50: hsl(142, 14%, 89%);
+  --govnl-color-donkergroen-100: hsl(139, 14%, 77%);
+  --govnl-color-donkergroen-200: hsl(138, 13%, 66%);
+  --govnl-color-donkergroen-300: hsl(140, 13%, 55%);
+  --govnl-color-donkergroen-400: hsl(139, 17%, 44%);
+  --govnl-color-donkergroen-500: hsl(139, 39%, 25%);
+  --govnl-color-mosgroen-50: hsl(60, 31%, 89%);
+  --govnl-color-mosgroen-100: hsl(62, 32%, 77%);
+  --govnl-color-mosgroen-200: hsl(62, 31%, 66%);
+  --govnl-color-mosgroen-300: hsl(62, 31%, 54%);
+  --govnl-color-mosgroen-400: hsl(62, 42%, 43%);
+  --govnl-color-mosgroen-500: hsl(62, 100%, 24%);
+  --govnl-color-bruin-50: hsl(46, 40%, 90%);
+  --govnl-color-bruin-100: hsl(44, 40%, 79%);
+  --govnl-color-bruin-200: hsl(45, 40%, 69%);
+  --govnl-color-bruin-300: hsl(44, 39%, 59%);
+  --govnl-color-bruin-400: hsl(44, 42%, 48%);
+  --govnl-color-bruin-500: hsl(45, 87%, 31%);
+  --govnl-color-donkerbruin-50: hsl(7, 16%, 89%);
+  --govnl-color-donkerbruin-100: hsl(12, 18%, 78%);
+  --govnl-color-donkerbruin-200: hsl(12, 17%, 67%);
+  --govnl-color-donkerbruin-300: hsl(11, 17%, 56%);
+  --govnl-color-donkerbruin-400: hsl(11, 21%, 46%);
+  --govnl-color-donkerbruin-500: hsl(11, 45%, 28%);
+  --govnl-color-geel-50: hsl(55, 94%, 93%);
+  --govnl-color-geel-100: hsl(54, 94%, 86%);
+  --govnl-color-geel-200: hsl(53, 94%, 79%);
+  --govnl-color-geel-300: hsl(54, 94%, 73%);
+  --govnl-color-geel-400: hsl(53, 94%, 66%);
+  --govnl-color-geel-500: hsl(53, 95%, 55%);
+  --govnl-color-donkergeel-50: hsl(43, 95%, 93%);
+  --govnl-color-donkergeel-100: hsl(42, 97%, 86%);
+  --govnl-color-donkergeel-200: hsl(42, 96%, 79%);
+  --govnl-color-donkergeel-300: hsl(42, 97%, 72%);
+  --govnl-color-donkergeel-400: hsl(42, 98%, 65%);
+  --govnl-color-donkergeel-500: hsl(42, 100%, 54%);
+  --govnl-color-oranje-50: hsl(30, 81%, 92%);
+  --govnl-color-oranje-100: hsl(30, 79%, 83%);
+  --govnl-color-oranje-200: hsl(30, 78%, 75%);
+  --govnl-color-oranje-300: hsl(30, 79%, 66%);
+  --govnl-color-oranje-400: hsl(30, 79%, 58%);
+  --govnl-color-oranje-500: hsl(30, 100%, 44%);
+  --govnl-color-rood-50: hsl(4, 70%, 92%);
+  --govnl-color-rood-100: hsl(4, 68%, 84%);
+  --govnl-color-rood-200: hsl(4, 69%, 76%);
+  --govnl-color-rood-300: hsl(4, 69%, 69%);
+  --govnl-color-rood-400: hsl(4, 68%, 61%);
+  --govnl-color-rood-500: hsl(4, 75%, 48%);
+  --govnl-color-roze-50: hsl(321, 78%, 96%);
+  --govnl-color-roze-100: hsl(323, 78%, 93%);
+  --govnl-color-roze-200: hsl(323, 75%, 89%);
+  --govnl-color-roze-300: hsl(322, 76%, 85%);
+  --govnl-color-roze-400: hsl(323, 76%, 82%);
+  --govnl-color-roze-500: hsl(322, 76%, 76%);
+  --govnl-color-robijnrood-50: hsl(332, 65%, 91%);
+  --govnl-color-robijnrood-100: hsl(332, 66%, 82%);
+  --govnl-color-robijnrood-200: hsl(332, 65%, 73%);
+  --govnl-color-robijnrood-300: hsl(333, 65%, 64%);
+  --govnl-color-robijnrood-400: hsl(333, 65%, 55%);
+  --govnl-color-robijnrood-500: hsl(332, 100%, 40%);
+  --govnl-color-violet-50: hsl(326, 49%, 90%);
+  --govnl-color-violet-100: hsl(326, 50%, 80%);
+  --govnl-color-violet-200: hsl(326, 49%, 70%);
+  --govnl-color-violet-300: hsl(326, 49%, 60%);
+  --govnl-color-violet-400: hsl(326, 50%, 50%);
+  --govnl-color-violet-500: hsl(326, 100%, 33%);
+  --govnl-color-paars-50: hsl(278, 19%, 88%);
+  --govnl-color-paars-100: hsl(278, 18%, 76%);
+  --govnl-color-paars-200: hsl(275, 19%, 65%);
+  --govnl-color-paars-300: hsl(276, 19%, 54%);
+  --govnl-color-paars-400: hsl(276, 26%, 42%);
+  --govnl-color-paars-500: hsl(277, 65%, 23%);
+  --govnl-box-shadow-sm: 0 2px 6px 0 rgba(0,0,0,0.1);
+  --govnl-box-shadow-md: 0 8px 16px 0 rgba(0,0,0,0.1);
+  --govnl-box-shadow-lg: 0 16px 48px 0 rgba(0,0,0,0.1);
+  --govnl-typography-font-family-sans: RijksSans, Arial, Verdana, sans-serif;
+  --govnl-typography-font-size-xs: 0.75rem;
+  --govnl-typography-font-size-sm: 1rem;
+  --govnl-typography-font-size-md: 1.125rem;
+  --govnl-typography-font-size-lg: 1.25rem;
+  --govnl-typography-font-size-xl: 1.5rem;
+  --govnl-typography-font-size-2xl: 2rem;
+  --govnl-typography-font-size-3xl: 2.5rem;
+  --govnl-typography-font-size-4xl: 3rem;
+  --govnl-typography-font-weight-thin: 200;
+  --govnl-typography-font-weight-light: 300;
+  --govnl-typography-font-weight-regular: 400;
+  --govnl-typography-font-weight-semi-bold: 550;
+  --govnl-typography-font-weight-bold: 700;
+  --govnl-typography-font-weight-extra-bold: 800;
+  --govnl-typography-line-height-xs: 1;
+  --govnl-typography-line-height-sm: 1.25;
+  --govnl-typography-line-height-md: 1.5;
+  --govnl-typography-line-height-lg: 2;
+  --govnl-dimension-screen-2xs: 320px;
+  --govnl-dimension-screen-xs: 576px;
+  --govnl-dimension-screen-sm: 768px;
+  --govnl-dimension-screen-md: 992px;
+  --govnl-dimension-screen-lg: 1200px;
+  --govnl-dimension-screen-xl: 1440px;
+  --govnl-dimension-pointer-target-min-size: 48px;
+  --govnl-dimension-size-25: 0.125rem;
+  --govnl-dimension-size-50: 0.25rem;
+  --govnl-dimension-size-100: 0.5rem;
+  --govnl-dimension-size-150: 0.75rem;
+  --govnl-dimension-size-200: 1rem;
+  --govnl-dimension-size-225: 1.125rem;
+  --govnl-dimension-size-250: 1.25rem;
+  --govnl-dimension-size-300: 1.5rem;
+  --govnl-dimension-size-400: 2rem;
+  --govnl-dimension-size-500: 2.5rem;
+  --govnl-dimension-size-600: 3rem;
+  --govnl-dimension-size-800: 4rem;
+  --govnl-dimension-size-1000: 5rem;
+  --govnl-dimension-size-2000: 10rem;
+  --govnl-lint-size-quarter-lint: 12px;
+  --govnl-lint-size-half-lint: 24px;
+  --govnl-lint-size-lint: 48px;
+  --govnl-lint-size-2-lint: 96px;
+  --govnl-lint-size-3-lint: 1440px;
+  --govnl-border-border-radius-sm: 4px;
+  --govnl-border-border-radius-md: 8px;
+  --govnl-border-border-radius-lg: 16px;
+  --govnl-border-border-radius-round: 999px;
+  --govnl-border-border-width-sm: 1px;
+  --govnl-border-border-width-md: 2px;
+  --govnl-border-border-width-lg: 4px;
+  --govnl-root-background-color: var(--govnl-color-grijs-50);
+  --govnl-brand-primary-50: var(--govnl-color-lintblauw-50);
+  --govnl-brand-primary-100: var(--govnl-color-lintblauw-100);
+  --govnl-brand-primary-200: var(--govnl-color-lintblauw-200);
+  --govnl-brand-primary-300: var(--govnl-color-lintblauw-300);
+  --govnl-brand-primary-400: var(--govnl-color-lintblauw-400);
+  --govnl-brand-primary-500: var(--govnl-color-lintblauw-500);
+  --govnl-brand-primary-active: var(--govnl-color-lintblauw-500);
+  --govnl-brand-primary-hover: var(--govnl-color-lintblauw-500);
+  --govnl-brand-accent-1-color: var(--govnl-color-lichtblauw-500);
+  --govnl-brand-accent-2-color: var(--govnl-color-oranje-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-color: var(--govnl-color-lintblauw-500);
+  --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-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-section-max-inline-width: calc (8 * var(--govnl-dimension-size-2000));
+  --govnl-section-padding-inline: var(--govnl-dimension-size-100);
+  --govnl-container-max-inline-width: calc (8 * var(--govnl-dimension-size-2000));
+  --govnl-container-padding-inline: var(--govnl-dimension-size-100);
+  --govnl-content-max-inline-width: calc (5 * var(--govnl-dimension-size-2000));
+  --govnl-content-padding-inline: var(--govnl-dimension-size-100);
+  --govnl-icon-size-functional: var(--govnl-dimension-size-300);
+  --govnl-icon-size-toptask: var(--govnl-dimension-size-500);
+  --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-form-control-invalid-border-color: var(--govnl-feedback-negative-border-color);
+  --govnl-form-control-invalid-color: var(--govnl-feedback-negative-color);
+  --govnl-interaction-color: var(--govnl-brand-primary-500);
+  --govnl-interaction-active-color: var(--govnl-brand-primary-500);
+  --govnl-interaction-hover-color: var(--govnl-brand-primary-500);
+}

package/dist/link-list.css

@@ -0,0 +1,13 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.dictu-link-list {
+  --govnl-link-list-icon-inset-block-start: 0px;
+  --govnl-link-list-link-text-decoration: None;
+  --govnl-link-list-link-hover-text-decoration: underline;
+  --govnl-link-list-icon-size: {govnl.icon.size.functional};
+  --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);
+}

package/dist/link.css

@@ -0,0 +1,24 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.dictu-link {
+  --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);
+  --nl-link-disabled-color: var(--govnl-color-grijs-500);
+  --nl-link-focus-visible-background-color: var(--govnl-focus-background-color);
+  --nl-link-focus-visible-color: var(--govnl-focus-color);
+  --nl-link-color: var(--govnl-interaction-color);
+  --nl-link-text-decoration-color: var(--govnl-interaction-color);
+  --nl-link-active-color: var(--govnl-interaction-active-color);
+  --nl-link-hover-color: var(--govnl-interaction-hover-color);
+}

package/dist/logo.css

@@ -0,0 +1,20 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.dictu-logo {
+  --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-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);
+}

package/dist/navigation-bar.css

@@ -0,0 +1,39 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.dictu-navigation-bar {
+  --govnl-nav-bar-max-inline-size: 1280px;
+  --govnl-nav-bar-container-inline-size: 100%;
+  --govnl-nav-bar-link-text-decoration: none;
+  --govnl-nav-bar-menu-label-background-color: none;
+  --govnl-nav-bar-mobile-max-inline-size: 100%;
+  --govnl-nav-bar-border-block-end-width: var(--govnl-border-border-width-sm);
+  --govnl-nav-bar-icon-size: {govnl.icon.size.functional};
+  --govnl-nav-bar-padding-inline: var(--govnl-space-sm);
+  --govnl-nav-bar-content-column-gap: var(--govnl-gap-content-min);
+  --govnl-nav-bar-icon-color: var(--govnl-brand-primary-500);
+  --govnl-nav-bar-icon-active-color: var(--govnl-brand-primary-500);
+  --govnl-nav-bar-link-active-background-color: var(--govnl-brand-primary-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-500);
+  --govnl-nav-bar-link-focus-background-color: var(--govnl-brand-primary-50);
+  --govnl-nav-bar-link-focus-color: var(--govnl-brand-primary-500);
+  --govnl-nav-bar-link-hover-background-color: var(--govnl-brand-primary-50);
+  --govnl-nav-bar-link-hover-color: var(--govnl-brand-primary-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-500);
+  --govnl-nav-bar-border-color: var(--govnl-brand-primary-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-500);
+  --govnl-nav-bar-menu-label-font-size: var(--govnl-document-font-size);
+  --govnl-nav-bar-font-size: var(--govnl-document-font-size);
+}

package/dist/page-footer.css

@@ -0,0 +1,16 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.dictu-page-footer {
+  --govnl-page-footer-border-width: var(--govnl-border-border-width-sm);
+  --govnl-page-footer-background-color: var(--govnl-root-background-color);
+  --govnl-page-footer-color: var(--govnl-brand-primary-500);
+  --govnl-page-footer-padding-block-start: var(--govnl-space-2xl);
+  --govnl-page-footer-padding-block-end: var(--govnl-space-2xl);
+  --govnl-page-footer-container-max-inline-width: var(--govnl-container-max-inline-width);
+  --govnl-page-footer-container-padding-inline: var(--govnl-container-padding-inline);
+  --govnl-page-footer-content-column-gap: var(--govnl-gap-content-min) * 2;
+  --govnl-page-footer-content-row-gap: var(--govnl-gap-content-min) * 1.5;
+  --govnl-page-footer-border-color: var(--govnl-brand-primary-200);
+}

package/dist/page-header.css

@@ -0,0 +1,10 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.dictu-page-header {
+  --govnl-header-padding-block-end: var(--govnl-lint-size-half-lint);
+  --govnl-header-background-color: var(--govnl-document-background-color);
+  --govnl-header-container-max-inline-width: var(--govnl-container-max-inline-width);
+  --govnl-header-container-padding-inline: var(--govnl-container-padding-inline);
+}

package/dist/paragraph.css

@@ -0,0 +1,14 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.dictu-paragraph {
+  --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-size: var(--govnl-document-font-size);
+  --nl-paragraph-lead-font-weight: var(--govnl-document-strong-font-weight);
+  --nl-paragraph-lead-line-height: var(--govnl-document-line-height);
+}

package/dist/skip-link.css

@@ -0,0 +1,16 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.dictu-skip-link {
+  --nl-skip-link-text-decoration-thickness: 1px;
+  --nl-skip-link-text-underline-offset: 1px;
+  --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-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-skip-link-background-color: var(--govnl-interaction-color);
+}