@dictu/design-tokens 2.0.0 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @dictu/design-tokens
 
+## 2.2.0
+
+### Minor Changes
+
+- b474a6c: Changes to table component:
+  - Smaller caption font-size
+  - Word wrap set on table header
+
+## 2.1.0
+
+### Minor Changes
+
+- 7ffe9c0: Added new tokens for Table component
+
 ## 2.0.0
 
 ### Major Changes

package/dist/index.css

@@ -191,12 +191,17 @@
   --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-footer-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-table-cell-header-border-inline-end-width: 2px;
+  --govnl-searchbar-small-min-inline-size: 240px;
+  --govnl-searchbar-small-max-inline-size: 480px;
+  --govnl-searchbar-min-inline-size: 400px;
+  --govnl-searchbar-max-inline-size: 640px;
   --govnl-nav-bar-max-inline-size: 1280px;
   --govnl-nav-bar-padding-inline: 0px;
   --govnl-nav-bar-container-inline-size: 100%;
@@ -233,10 +238,12 @@
   --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-metadata-subheading-text-decoration-line: none;
   --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-card-metadata-footer-text-decoration-line: none;
   --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);
@@ -250,13 +257,13 @@
   --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-border-color: transparant;
   --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-button-small-icon-size: 1em;
   --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;
@@ -273,6 +280,17 @@
   --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-select-list-item-active-text-decoration: none;
+  --govnl-select-list-item-hover-text-decoration: underline;
+  --govnl-select-list-item-text-decoration: none;
+  --govnl-radio-button-checked-border-color: transparant;
+  --govnl-radio-button-checked-hover-border-color: transparant;
+  --govnl-radio-button-checked-active-border-color: transparant;
+  --govnl-form-field-label-group-row-gap: 0rem;
+  --govnl-fieldset-legend-group-row-gap: 0rem;
+  --govnl-checkbox-checked-border-color: transparant;
+  --govnl-checkbox-checked-hover-border-color: transparant;
+  --govnl-checkbox-checked-active-border-color: transparant;
   --govnl-form-control-read-only-border-color: rgba(0, 0, 0, 0);
   --govnl-focus-outline-style: dashed;
   --nl-skip-link-text-decoration-thickness: 1px;
@@ -290,12 +308,12 @@
   --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-caption-font-size: var(--govnl-typography-font-size-sm);
   --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-footer-background-color: var(--govnl-color-white);
+  --govnl-table-footer-color: var(--govnl-color-black);
+  --govnl-table-cell-border-inline-end-width: var(--govnl-border-border-width-sm);
   --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);
@@ -303,9 +321,11 @@
   --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-searchbar-gap: var(--govnl-dimension-size-50);
   --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-nav-bar-submenu-max-inline-size: var(--govnl-nav-bar-container-inline-size);
   --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);
@@ -344,19 +364,80 @@
   --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-color: var(--govnl-color-white);
+  --govnl-button-icon-only-hover-color: var(--govnl-color-white);
+  --govnl-button-icon-only-active-color: var(--govnl-color-white);
   --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-line-height: var(--govnl-typography-line-height-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-small-font-size: var(--govnl-typography-font-size-sm);
+  --govnl-button-small-min-block-size: var(--govnl-dimension-size-500);
+  --govnl-button-small-min-inline-size: var(--govnl-dimension-size-500);
   --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-text-input-min-block-size: var(--govnl-dimension-pointer-target-min-size);
+  --govnl-text-input-border-radius: var(--govnl-border-border-radius-sm);
+  --govnl-text-input-border-width: var(--govnl-border-border-width-sm);
+  --govnl-text-input-error-border-width: var(--govnl-border-border-width-md);
+  --govnl-text-input-read-only-border-color: var(--govnl-form-control-read-only-border-color);
+  --govnl-text-input-small-font-size: var(--govnl-typography-font-size-sm);
+  --govnl-text-input-small-min-block-size: var(--govnl-dimension-size-500);
+  --govnl-textarea-min-block-size: var(--govnl-dimension-pointer-target-min-size);
+  --govnl-textarea-border-radius: var(--govnl-border-border-radius-sm);
+  --govnl-textarea-border-width: var(--govnl-border-border-width-sm);
+  --govnl-textarea-error-border-width: var(--govnl-border-border-width-md);
+  --govnl-text-area-read-only-border-color: var(--govnl-form-control-read-only-border-color);
+  --govnl-select-min-block-size: var(--govnl-dimension-pointer-target-min-size);
+  --govnl-select-border-radius: var(--govnl-border-border-radius-sm);
+  --govnl-select-border-width: var(--govnl-border-border-width-sm);
+  --govnl-select-error-border-width: var(--govnl-border-border-width-md);
+  --govnl-radio-button-size: var(--govnl-dimension-size-300);
+  --govnl-radio-button-border-radius: var(--govnl-border-border-radius-round);
+  --govnl-radio-button-icon-size: var(--govnl-icon-size);
+  --govnl-radio-button-unchecked-border-width: var(--govnl-border-border-width-sm);
+  --govnl-radio-button-unchecked-hover-border-width: var(--govnl-border-border-width-md);
+  --govnl-radio-button-unchecked-active-border-width: var(--govnl-border-border-width-md);
+  --govnl-radio-button-unchecked-focus-border-width: var(--govnl-border-border-width-sm);
+  --govnl-radio-button-checked-border-width: var(--govnl-border-border-width-sm);
+  --govnl-radio-button-checked-hover-border-width: var(--govnl-border-border-width-md);
+  --govnl-radio-button-checked-active-border-width: var(--govnl-border-border-width-md);
+  --govnl-radio-button-checked-focus-border-width: var(--govnl-border-border-width-sm);
+  --govnl-label-required-color: var(--govnl-color-grijs-700);
+  --govnl-label-required-font-size: var(--govnl-typography-font-size-xs);
+  --govnl-form-field-description-font-size: var(--govnl-typography-font-size-sm);
+  --govnl-form-field-error-message-font-size: var(--govnl-typography-font-size-sm);
+  --govnl-form-field-error-message-icon-size: var(--govnl-icon-size);
+  --govnl-form-field-error-border-inline-start-width: var(--govnl-border-border-width-md);
+  --govnl-fieldset-description-font-size: var(--govnl-typography-font-size-sm);
+  --govnl-fieldset-error-message-font-size: var(--govnl-typography-font-size-sm);
+  --govnl-fieldset-error-message-icon-size: var(--govnl-icon-size);
+  --govnl-fieldset-error-border-inline-start-width: var(--govnl-border-border-width-md);
+  --govnl-date-input-border-radius: var(--govnl-border-border-radius-sm);
+  --govnl-date-input-border-width: var(--govnl-border-border-width-sm);
+  --govnl-date-input-min-block-size: var(--govnl-dimension-pointer-target-min-size);
+  --govnl-date-input-error-border-width: var(--govnl-border-border-width-md);
+  --govnl-date-input-icon-size: var(--govnl-icon-size);
+  --govnl-checkbox-border-radius: var(--govnl-border-border-radius-sm);
+  --govnl-checkbox-size: var(--govnl-dimension-size-300);
+  --govnl-checkbox-unchecked-border-width: var(--govnl-border-border-width-sm);
+  --govnl-checkbox-unchecked-hover-border-width: var(--govnl-border-border-width-md);
+  --govnl-checkbox-unchecked-active-border-width: var(--govnl-border-border-width-md);
+  --govnl-checkbox-unchecked-focus-visible-border-width: var(--govnl-border-border-width-sm);
+  --govnl-checkbox-checked-color: var(--govnl-color-white);
+  --govnl-checkbox-checked-border-width: var(--govnl-border-border-width-sm);
+  --govnl-checkbox-checked-hover-color: var(--govnl-color-white);
+  --govnl-checkbox-checked-hover-border-width: var(--govnl-border-border-width-sm);
+  --govnl-checkbox-checked-active-color: var(--govnl-color-white);
+  --govnl-checkbox-checked-active-border-width: var(--govnl-border-border-width-sm);
+  --govnl-checkbox-checked-focus-visible-border-width: var(--govnl-border-border-width-sm);
+  --govnl-checkbox-icon-size: var(--govnl-icon-size);
   --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);
@@ -414,13 +495,14 @@
   --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-form-control-active-background-color: var(--govnl-color-grijs-100);
+  --govnl-form-control-active-border-color: var(--govnl-color-grijs-800);
+  --govnl-form-control-active-color: var(--govnl-color-grijs-900);
+  --govnl-form-control-strong-font-weight: var(--govnl-typography-font-weight-bold);
   --govnl-interaction-color: var(--govnl-color-lintblauw-500);
   --govnl-focus-background-color: var(--govnl-color-geel-500);
   --govnl-focus-color: var(--govnl-color-black);
@@ -479,12 +561,18 @@
   --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-background-color: var(--govnl-document-background-color);
   --govnl-table-header-border-block-end-color: var(--govnl-line-strong-border-color);
+  --govnl-table-header-sticky-font-weight: var(--govnl-heading-font-weight);
+  --govnl-table-header-sticky-background-color: var(--govnl-document-background-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-footer-font-weight: var(--govnl-document-strong-font-weight);
+  --govnl-table-footer-border-block-start-color: var(--govnl-line-strong-border-color);
+  --govnl-table-cell-border-inline-end-color: var(--govnl-line-subtle-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-table-cell-header-border-inline-end-color: var(--govnl-line-strong-border-color);
+  --govnl-table-row-border-block-end-color: var(--govnl-line-subtle-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);
@@ -516,7 +604,15 @@
   --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-menu-label-active-font-weight: var(--govnl-document-strong-font-weight);
+  --govnl-nav-bar-mobile-submenu-padding-inline-start: var(--govnl-space-md);
+  --govnl-nav-bar-mobile-submenu-padding-inline-end: var(--govnl-space-md);
   --govnl-nav-bar-font-size: var(--govnl-document-font-size);
+  --govnl-nav-bar-submenu-padding-inline-start: var(--govnl-space-lg);
+  --govnl-nav-bar-submenu-padding-inline-end: var(--govnl-space-xl);
+  --govnl-nav-bar-submenu-padding-block-start: var(--govnl-space-lg);
+  --govnl-nav-bar-submenu-padding-block-end: var(--govnl-space-lg);
+  --govnl-nav-bar-submenu-background-color: var(--govnl-button-subtle-active-background-color);
   --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);
@@ -553,6 +649,14 @@
   --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-default-metadata-subheading-color: var(--govnl-document-subtle-color);
+  --govnl-card-default-metadata-footer-color: var(--govnl-document-subtle-color);
+  --govnl-card-metadata-subheading-font-family: var(--govnl-document-font-family);
+  --govnl-card-metadata-subheading-font-size: var(--govnl-document-font-size);
+  --govnl-card-metadata-subheading-font-weight: var(--govnl-document-font-weight);
+  --govnl-card-metadata-subheading-line-height: var(--govnl-document-line-height);
+  --govnl-card-accent-metadata-subheading-color: var(--govnl-document-inverse-color);
+  --govnl-card-accent-metadata-footer-color: var(--govnl-document-inverse-color);
   --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);
@@ -566,6 +670,10 @@
   --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-card-metadata-footer-font-family: var(--govnl-document-font-family);
+  --govnl-card-metadata-footer-font-size: var(--govnl-document-font-size);
+  --govnl-card-metadata-footer-font-weight: var(--govnl-document-font-weight);
+  --govnl-card-metadata-footer-line-height: var(--govnl-document-line-height);
   --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);
@@ -576,7 +684,7 @@
   --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-background-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);
@@ -586,12 +694,20 @@
   --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-small-icon-only-padding-block-end: var(--govnl-space-2xs);
+  --govnl-button-small-icon-only-padding-block-start: var(--govnl-space-2xs);
+  --govnl-button-small-icon-only-padding-inline-start: var(--govnl-space-2xs);
+  --govnl-button-small-icon-only-padding-inline-end: var(--govnl-space-2xs);
+  --govnl-button-small-padding-block-end: var(--govnl-space-2xs);
+  --govnl-button-small-padding-block-start: var(--govnl-space-2xs);
+  --govnl-button-small-padding-inline-end: var(--govnl-space-xs);
+  --govnl-button-small-padding-inline-start: var(--govnl-space-xs);
+  --govnl-button-small-column-gap: var(--govnl-gap-content-min) / 4;
   --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);
@@ -634,7 +750,148 @@
   --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-text-input-font-family: var(--govnl-form-control-font-family);
+  --govnl-text-input-font-size: var(--govnl-form-control-font-size);
+  --govnl-text-input-font-weight: var(--govnl-form-control-font-weight);
+  --govnl-text-input-line-height: var(--govnl-form-control-line-height);
+  --govnl-text-input-background-color: var(--govnl-form-control-background-color);
+  --govnl-text-input-border-color: var(--govnl-form-control-border-color);
+  --govnl-text-input-color: var(--govnl-form-control-color);
+  --govnl-text-input-padding-block-start: var(--govnl-space-xs);
+  --govnl-text-input-padding-inline-end: var(--govnl-space-xs);
+  --govnl-text-input-padding-block-end: var(--govnl-space-xs);
+  --govnl-text-input-padding-inline-start: var(--govnl-space-xs);
+  --govnl-text-input-hover-background-color: var(--govnl-form-control-hover-background-color);
+  --govnl-text-input-hover-border-color: var(--govnl-form-control-hover-border-color);
+  --govnl-text-input-hover-color: var(--govnl-form-control-hover-color);
+  --govnl-text-input-error-background-color: var(--govnl-form-control-invalid-background-color);
+  --govnl-text-input-error-color: var(--govnl-form-control-color);
+  --govnl-text-input-read-only-background-color: var(--govnl-form-control-read-only-background-color);
+  --govnl-text-input-read-only-color: var(--govnl-form-control-read-only-color);
+  --govnl-text-input-placeholder-color: var(--govnl-form-control-placeholder-color);
+  --govnl-text-input-icon-color: var(--govnl-form-control-color);
+  --govnl-text-input-active-background-color: var(--govnl-form-control-active-background-color);
+  --govnl-text-input-active-border-color: var(--govnl-form-control-active-border-color);
+  --govnl-text-input-active-color: var(--govnl-form-control-active-color);
+  --govnl-text-input-small-padding-block-start: var(--govnl-space-2xs);
+  --govnl-text-input-small-padding-inline-end: var(--govnl-space-2xs);
+  --govnl-text-input-small-padding-block-end: var(--govnl-space-2xs);
+  --govnl-text-input-small-padding-inline-start: var(--govnl-space-2xs);
+  --govnl-textarea-font-family: var(--govnl-form-control-font-family);
+  --govnl-textarea-font-size: var(--govnl-form-control-font-size);
+  --govnl-textarea-font-weight: var(--govnl-form-control-font-weight);
+  --govnl-textarea-line-height: var(--govnl-form-control-line-height);
+  --govnl-textarea-padding-block-start: var(--govnl-space-xs);
+  --govnl-textarea-padding-inline-end: var(--govnl-space-xs);
+  --govnl-textarea-padding-block-end: var(--govnl-space-xs);
+  --govnl-textarea-padding-inline-start: var(--govnl-space-xs);
+  --govnl-text-area-background-color: var(--govnl-form-control-background-color);
+  --govnl-text-area-border-color: var(--govnl-form-control-border-color);
+  --govnl-text-area-color: var(--govnl-form-control-color);
+  --govnl-text-area-hover-background-color: var(--govnl-form-control-hover-background-color);
+  --govnl-text-area-hover-border-color: var(--govnl-form-control-hover-border-color);
+  --govnl-text-area-hover-color: var(--govnl-form-control-hover-color);
+  --govnl-text-area-error-background-color: var(--govnl-form-control-invalid-background-color);
+  --govnl-text-area-read-only-background-color: var(--govnl-form-control-read-only-background-color);
+  --govnl-text-area-read-only-color: var(--govnl-form-control-read-only-color);
+  --govnl-text-area-placeholder-color: var(--govnl-form-control-placeholder-color);
+  --govnl-select-font-family: var(--govnl-form-control-font-family);
+  --govnl-select-font-size: var(--govnl-form-control-font-size);
+  --govnl-select-font-weight: var(--govnl-form-control-font-weight);
+  --govnl-select-line-height: var(--govnl-form-control-line-height);
+  --govnl-select-background-color: var(--govnl-form-control-background-color);
+  --govnl-select-border-color: var(--govnl-form-control-border-color);
+  --govnl-select-color: var(--govnl-form-control-color);
+  --govnl-select-padding-block-start: var(--govnl-space-xs);
+  --govnl-select-padding-inline-end: var(--govnl-space-xs);
+  --govnl-select-padding-block-end: var(--govnl-space-xs);
+  --govnl-select-padding-inline-start: var(--govnl-space-xs);
+  --govnl-select-column-gap: var(--govnl-space-3xs);
+  --govnl-select-hover-background-color: var(--govnl-form-control-hover-background-color);
+  --govnl-select-hover-border-color: var(--govnl-form-control-hover-border-color);
+  --govnl-select-hover-color: var(--govnl-form-control-hover-color);
+  --govnl-select-error-background-color: var(--govnl-form-control-invalid-background-color);
+  --govnl-select-icon-color: var(--govnl-form-control-color);
+  --govnl-select-list-item-background-color: var(--govnl-form-control-background-color);
+  --govnl-select-list-item-color: var(--govnl-form-control-color);
+  --govnl-select-list-item-active-background-color: var(--govnl-form-control-active-background-color);
+  --govnl-select-list-item-active-color: var(--govnl-form-control-active-color);
+  --govnl-select-list-item-hover-background-color: var(--govnl-form-control-hover-background-color);
+  --govnl-select-list-item-hover-color: var(--govnl-form-control-hover-color);
+  --govnl-radio-button-unchecked-background-color: var(--govnl-form-control-background-color);
+  --govnl-radio-button-unchecked-border-color: var(--govnl-form-control-border-color);
+  --govnl-radio-button-unchecked-hover-background-color: var(--govnl-form-control-hover-background-color);
+  --govnl-radio-button-unchecked-hover-border-color: var(--govnl-form-control-hover-border-color);
+  --govnl-radio-button-unchecked-active-background-color: var(--govnl-form-control-active-background-color);
+  --govnl-radio-button-unchecked-active-border-color: var(--govnl-form-control-hover-border-color);
+  --govnl-radio-button-checked-background-color: var(--govnl-interaction-color);
+  --govnl-radio-button-checked-color: var(--govnl-document-inverse-color);
+  --govnl-radio-button-checked-hover-color: var(--govnl-document-inverse-color);
+  --govnl-radio-button-checked-active-color: var(--govnl-document-inverse-color);
+  --govnl-radio-button-column-gap: var(--govnl-space-2xs);
+  --govnl-label-required-font-family: var(--govnl-form-control-font-family);
+  --govnl-label-required-font-weight: var(--govnl-form-control-font-weight);
+  --govnl-label-color: var(--govnl-form-control-color);
+  --govnl-label-font-family: var(--govnl-form-control-font-family);
+  --govnl-label-regular-font-weight: var(--govnl-form-control-font-weight);
+  --govnl-label-font-size: var(--govnl-form-control-font-size);
+  --govnl-label-column-gap: var(--govnl-space-3xs);
+  --govnl-label-strong-font-weight: var(--govnl-form-control-strong-font-weight);
+  --govnl-form-field-description-font-family: var(--govnl-form-control-font-family);
+  --govnl-form-field-description-font-weight: var(--govnl-form-control-font-weight);
+  --govnl-form-field-description-color: var(--govnl-document-subtle-color);
+  --govnl-form-field-error-message-font-family: var(--govnl-form-control-font-family);
+  --govnl-form-field-error-message-font-weight: var(--govnl-form-control-font-weight);
+  --govnl-form-field-error-message-column-gap: var(--govnl-space-3xs);
+  --govnl-form-field-row-gap: var(--govnl-space-2xs);
+  --govnl-form-field-error-padding-inline-start: var(--govnl-space-sm);
+  --govnl-fieldset-description-font-family: var(--govnl-form-control-font-family);
+  --govnl-fieldset-description-font-weight: var(--govnl-form-control-font-weight);
+  --govnl-fieldset-description-color: var(--govnl-document-subtle-color);
+  --govnl-fieldset-error-message-font-family: var(--govnl-form-control-font-family);
+  --govnl-fieldset-error-message-font-weight: var(--govnl-form-control-font-weight);
+  --govnl-fieldset-error-message-column-gap: var(--govnl-space-3xs);
+  --govnl-fieldset-row-gap: var(--govnl-space-2xs);
+  --govnl-fieldset-error-padding-inline-start: var(--govnl-space-sm);
+  --govnl-fieldset-legend-font-family: var(--govnl-form-control-font-family);
+  --govnl-fieldset-legend-regular-font-weight: var(--govnl-form-control-font-weight);
+  --govnl-fieldset-legend-strong-font-weight: var(--govnl-form-control-strong-font-weight);
+  --govnl-fieldset-legend-font-size: var(--govnl-form-control-font-size);
+  --govnl-date-input-background-color: var(--govnl-form-control-background-color);
+  --govnl-date-input-border-color: var(--govnl-form-control-border-color);
+  --govnl-date-input-color: var(--govnl-form-control-color);
+  --govnl-date-input-padding-block-start: var(--govnl-space-xs);
+  --govnl-date-input-padding-inline-end: var(--govnl-space-xs);
+  --govnl-date-input-padding-block-end: var(--govnl-space-xs);
+  --govnl-date-input-padding-inline-start: var(--govnl-space-xs);
+  --govnl-date-input-column-gap: var(--govnl-space-3xs);
+  --govnl-date-input-font-family: var(--govnl-form-control-font-family);
+  --govnl-date-input-font-size: var(--govnl-form-control-font-size);
+  --govnl-date-input-font-weight: var(--govnl-form-control-font-weight);
+  --govnl-date-input-line-height: var(--govnl-form-control-line-height);
+  --govnl-date-input-hover-background-color: var(--govnl-form-control-hover-background-color);
+  --govnl-date-input-hover-border-color: var(--govnl-form-control-hover-border-color);
+  --govnl-date-input-hover-color: var(--govnl-form-control-hover-color);
+  --govnl-date-input-error-background-color: var(--govnl-form-control-invalid-background-color);
+  --govnl-date-input-icon-color: var(--govnl-form-control-color);
+  --govnl-date-input-active-background-color: var(--govnl-form-control-active-background-color);
+  --govnl-date-input-active-border-color: var(--govnl-form-control-active-border-color);
+  --govnl-date-input-active-color: var(--govnl-form-control-active-color);
+  --govnl-checkbox-unchecked-background-color: var(--govnl-form-control-background-color);
+  --govnl-checkbox-unchecked-border-color: var(--govnl-form-control-border-color);
+  --govnl-checkbox-unchecked-hover-background-color: var(--govnl-form-control-hover-background-color);
+  --govnl-checkbox-unchecked-hover-border-color: var(--govnl-form-control-hover-border-color);
+  --govnl-checkbox-unchecked-active-background-color: var(--govnl-form-control-active-background-color);
+  --govnl-checkbox-unchecked-active-border-color: var(--govnl-form-control-active-border-color);
+  --govnl-checkbox-unchecked-focus-border-color: var(--govnl-form-control-border-color);
+  --govnl-checkbox-checked-background-color: var(--govnl-interaction-color);
+  --govnl-checkbox-checked-focus-border-color: var(--govnl-form-control-border-color);
+  --govnl-checkbox-column-gap: var(--govnl-space-2xs);
   --govnl-heading-color: var(--govnl-brand-primary-1-500);
+  --govnl-form-control-focus-background-color: var(--govnl-focus-background-color);
+  --govnl-form-control-focus-outline-color: var(--govnl-focus-outline-color);
+  --govnl-form-control-focus-color: var(--govnl-focus-color);
+  --govnl-form-control-focus-border-color: var(--govnl-form-control-border-color);
   --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);
@@ -677,12 +934,60 @@
   --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-button-icon-only-hover-background-color: var(--govnl-interaction-hover-color);
+  --govnl-button-icon-only-active-background-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);
+  --govnl-text-input-focus-background-color: var(--govnl-form-control-focus-background-color);
+  --govnl-text-input-focus-border-color: var(--govnl-form-control-focus-border-color);
+  --govnl-text-input-focus-color: var(--govnl-form-control-focus-color);
+  --govnl-text-input-focus-outline-color: var(--govnl-form-control-focus-outline-color);
+  --govnl-text-input-error-border-color: var(--govnl-form-control-invalid-border-color);
+  --govnl-text-input-focus-visible-background-color: var(--govnl-form-control-focus-background-color);
+  --govnl-text-input-focus-visible-border-color: var(--govnl-form-control-focus-border-color);
+  --govnl-text-input-focus-visible-color: var(--govnl-form-control-focus-color);
+  --govnl-text-input-focus-visible-outline-color: var(--govnl-form-control-focus-outline-color);
+  --govnl-text-area-focus-background-color: var(--govnl-form-control-focus-background-color);
+  --govnl-text-area-focus-border-color: var(--govnl-form-control-focus-border-color);
+  --govnl-text-area-focus-color: var(--govnl-form-control-focus-color);
+  --govnl-text-area-focus-outline-color: var(--govnl-form-control-focus-outline-color);
+  --govnl-text-area-error-border-color: var(--govnl-form-control-invalid-border-color);
+  --govnl-text-area-error-color: var(--govnl-form-control-invalid-color);
+  --govnl-select-focus-background-color: var(--govnl-form-control-focus-background-color);
+  --govnl-select-focus-border-color: var(--govnl-form-control-focus-border-color);
+  --govnl-select-focus-color: var(--govnl-form-control-focus-color);
+  --govnl-select-focus-outline-color: var(--govnl-form-control-focus-outline-color);
+  --govnl-select-error-border-color: var(--govnl-form-control-invalid-border-color);
+  --govnl-select-error-color: var(--govnl-form-control-invalid-color);
+  --govnl-radio-button-unchecked-focus-background-color: var(--govnl-form-control-focus-background-color);
+  --govnl-radio-button-unchecked-focus-border-color: var(--govnl-form-control-focus-border-color);
+  --govnl-radio-button-unchecked-focus-outline-color: var(--govnl-form-control-focus-outline-color);
+  --govnl-radio-button-checked-hover-background-color: var(--govnl-interaction-hover-color);
+  --govnl-radio-button-checked-active-background-color: var(--govnl-interaction-active-color);
+  --govnl-radio-button-checked-focus-background-color: var(--govnl-form-control-focus-background-color);
+  --govnl-radio-button-checked-focus-border-color: var(--govnl-form-control-focus-border-color);
+  --govnl-radio-button-checked-focus-color: var(--govnl-form-control-focus-color);
+  --govnl-radio-button-checked-focus-outline-color: var(--govnl-form-control-focus-outline-color);
+  --govnl-form-field-error-message-icon-color: var(--govnl-form-control-invalid-color);
+  --govnl-form-field-error-message-color: var(--govnl-form-control-invalid-color);
+  --govnl-form-field-error-border-color: var(--govnl-form-control-invalid-border-color);
+  --govnl-fieldset-error-message-icon-color: var(--govnl-form-control-invalid-color);
+  --govnl-fieldset-error-message-color: var(--govnl-form-control-invalid-color);
+  --govnl-fieldset-error-border-color: var(--govnl-form-control-invalid-border-color);
+  --govnl-date-input-focus-background-color: var(--govnl-form-control-focus-background-color);
+  --govnl-date-input-focus-border-color: var(--govnl-form-control-focus-border-color);
+  --govnl-date-input-focus-color: var(--govnl-form-control-focus-color);
+  --govnl-date-input-focus-outline-color: var(--govnl-form-control-focus-outline-color);
+  --govnl-date-input-error-border-color: var(--govnl-form-control-invalid-border-color);
+  --govnl-date-input-error-color: var(--govnl-form-control-invalid-color);
+  --govnl-checkbox-unchecked-focus-background-color: var(--govnl-form-control-focus-background-color);
+  --govnl-checkbox-unchecked-focus-color: var(--govnl-form-control-focus-color);
+  --govnl-checkbox-checked-hover-background-color: var(--govnl-interaction-hover-color);
+  --govnl-checkbox-checked-active-background-color: var(--govnl-interaction-active-color);
+  --govnl-checkbox-checked-focus-background-color: var(--govnl-form-control-focus-background-color);
+  --govnl-checkbox-checked-focus-color: var(--govnl-form-control-focus-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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dictu/design-tokens",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "author": "Dienst ICT Uitvoering",
   "description": "Design Tokens for DICTU Design system, based on the NL Design System architecture",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/$metadata.json

@@ -8,6 +8,15 @@
     "components/card.tokens",
     "components/container.tokens",
     "components/figure.tokens",
+    "components/form-elements/checkbox.tokens",
+    "components/form-elements/date-input.tokens",
+    "components/form-elements/fieldset.tokens",
+    "components/form-elements/form-field.tokens",
+    "components/form-elements/label.tokens",
+    "components/form-elements/radio-button.tokens",
+    "components/form-elements/select.tokens",
+    "components/form-elements/text-area.tokens",
+    "components/form-elements/text-input.tokens",
     "components/grid.tokens",
     "components/heading.tokens",
     "components/hero.tokens",
@@ -20,7 +29,7 @@
     "components/page-footer.tokens",
     "components/page-header.tokens",
     "components/paragraph.tokens",
-    "components/searchbar.tokens.wip",
+    "components/searchbar.tokens",
     "components/section.tokens",
     "components/skip-link.tokens",
     "components/table.tokens",

package/src/$themes.json

@@ -26,7 +26,18 @@
       "components/grid.tokens": "enabled",
       "components/card.tokens": "enabled",
       "components/timeline.tokens": "enabled",
-      "components/table.tokens": "enabled"
+      "components/table.tokens": "enabled",
+      "components/list.tokens": "enabled",
+      "components/form-elements/checkbox.tokens": "enabled",
+      "components/form-elements/date-input.tokens": "enabled",
+      "components/form-elements/fieldset.tokens": "enabled",
+      "components/form-elements/form-field.tokens": "enabled",
+      "components/form-elements/label.tokens": "enabled",
+      "components/form-elements/radio-button.tokens": "enabled",
+      "components/form-elements/select.tokens": "enabled",
+      "components/form-elements/text-area.tokens": "enabled",
+      "components/form-elements/text-input.tokens": "enabled",
+      "components/searchbar.tokens": "enabled"
     },
     "$figmaVariableReferences": {},
     "group": "GovNL"

package/src/common/common.tokens.json

@@ -280,15 +280,19 @@
       "focus": {
         "background-color": {
           "$type": "color",
-          "$value": "{govnl.color.white}"
+          "$value": "{govnl.focus.background-color}"
         },
-        "border-color": {
+        "outline-color": {
           "$type": "color",
-          "$value": "{govnl.color.black}"
+          "$value": "{govnl.focus.outline-color}"
         },
         "color": {
           "$type": "color",
-          "$value": "{govnl.color.black}"
+          "$value": "{govnl.focus.color}"
+        },
+        "border-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.border-color}"
         }
       },
       "invalid": {
@@ -324,6 +328,26 @@
           "$type": "color",
           "$value": "{govnl.color.grijs.600}"
         }
+      },
+      "active": {
+        "background-color": {
+          "$type": "color",
+          "$value": "{govnl.color.grijs.100}"
+        },
+        "border-color": {
+          "$type": "color",
+          "$value": "{govnl.color.grijs.800}"
+        },
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.color.grijs.900}"
+        }
+      },
+      "strong": {
+        "font-weight": {
+          "$type": "fontWeights",
+          "$value": "{govnl.typography.font-weight.bold}"
+        }
       }
     },
     "interaction": {