@lux-design-system/design-tokens 1.1.0 → 2.0.0

package/README.md

@@ -15,7 +15,7 @@ In design tokens worden de design beslissingen vastgelegd voor het design system
 
 ### PNPM
 
-`pnpm add -D @lux-design-system/design-tokens --save-dev`
+`pnpm add @lux-design-system/design-tokens --save-dev`
 
 Daarna zijn de volgende tokens beschikbaar:
 

package/dist/digid/dark/lg-theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Oct 2024 13:09:47 GMT
+ * Generated on Fri, 03 Jan 2025 11:07:33 GMT
  */
 
 .lux-theme--digid-dark {
@@ -18,14 +18,39 @@
   --figma-rijkslint-variant: default;
   --figma-product: DigiD;
   --figma-focus-outline-radius: 6px;
+  --todo-link-list-item-text-decoration: None;
+  --todo-checkbox-indeterminate-focus-border-width: 2px;
+  --todo-checkbox-indeterminate-hover-border-color: transparent;
+  --todo-checkbox-indeterminate-hover-border-width: 2px;
+  --todo-checkbox-indeterminate-active-border-width: 1.5px;
+  --todo-checkbox-checked-active-border-width: 1.5px;
+  --todo-checkbox-checked-hover-border-width: 2px;
+  --todo-checkbox-checked-focus-border-width: 2px;
+  --utrecht-textarea-border-bottom-width: auto;
+  --utrecht-textarea-max-inline-size: 400px;
+  --utrecht-textbox-max-inline-size: 400px;
+  --utrecht-select-max-inline-size: 400px;
+  --utrecht-radio-button-checked-focus-border-width: 0.125rem;
+  --utrecht-radio-button-checked-hover-border-width: 0.125rem;
+  --utrecht-radio-button-focus-border-width: 0.125rem;
+  --utrecht-radio-button-hover-border-width: 0.125rem;
+  --utrecht-radio-button-icon-size: 0.625rem;
+  --utrecht-radio-button-size: 1.125rem;
+  --utrecht-radio-button-border-width: 0.094rem;
+  --utrecht-page-footer-content-column-width: 12.5rem;
   --utrecht-link-hover-text-decoration-thickness: auto;
   --utrecht-link-focus-text-decoration-thickness: auto;
   --utrecht-link-text-underline-offset: auto;
   --utrecht-link-text-decoration-thickness: auto;
+  --utrecht-form-field-error-message-icon-size: 1.5rem;
   --utrecht-focus-inverse-outline-color: transparant;
+  --utrecht-column-layout-column-width: 12.5rem; /* full-size, hoe stel ik dit in?  */
+  --utrecht-checkbox-size: 1.125rem;
+  --utrecht-checkbox-border-width: 1.5px;
   --ro-font-family-secondary: RijksoverheidSerifWeb, 'Times New Roman', serif;
   --ro-font-family-primary: RijksoverheidSansWebText, Arial, Verdana, sans-serif;
   --no-token: /* */; /* Discussie nodig */
+  --lux-icon-inset-block-start: 0.375rem;
   --lux-login-link-border-style: solid;
   --lux-login-link-icon-size: 2.5rem;
   --lux-login-link-min-block-size: 48px;
@@ -34,7 +59,9 @@
   --lux-link-text-decoration: underline;
   --lux-link-active-text-decoration: none;
   --lux-link-hover-text-decoration: none;
+  --lux-button-small-min-block-size: 2rem;
   --lux-alert-icon-size: 24px;
+  --lux-grid-max-inline-size: 82.5rem;
   --lux-grid-margin: 2.5rem;
   --lux-grid-gutter: 2rem;
   --lux-grid-max-inline: 77.5rem;
@@ -232,36 +259,143 @@
   --product-button-font-size: var(--lux-font-size-large-scale-sm);
   --product-button-secondary-background-color: var(--lux-color-none);
   --figma-size-icon-wrapper-height: var(--figma-viewport-size-icon-wrapper-height);
+  --todo-select-hover-border-width: var(--lux-border-width-m);
+  --todo-select-focus-border-width: var(--lux-border-width-m);
+  --todo-select-icon-size: var(--lux-size-icon);
+  --todo-link-list-item-column-gap: var(--lux-space-100);
+  --utrecht-textarea-font-weight: var(--lux-font-weight-regular);
+  --utrecht-textarea-border-width: var(--lux-border-width-default);
+  --utrecht-textarea-border-radius: var(--lux-border-radius-default);
+  --utrecht-textarea-hover-border-width: var(--lux-border-width-default);
+  --utrecht-textarea-read-only-border-color: var(--lux-color-none);
+  --utrecht-textarea-read-only-background-color: var(--lux-color-grijs-100);
+  --utrecht-textarea-focus-border-width: var(--lux-border-width-m);
+  --utrecht-textarea-invalid-border-width: var(--lux-border-width-default);
+  --utrecht-textarea-padding-inline-start: var(--lux-space-200);
+  --utrecht-textarea-padding-inline-end: var(--lux-space-200);
+  --utrecht-textarea-padding-block-start: var(--lux-space-100);
+  --utrecht-textarea-padding-block-end: var(--lux-space-100);
+  --utrecht-textbox-min-block-size: var(--lux-size-target);
+  --utrecht-textbox-hover-border-width: var(--lux-border-width-default);
+  --utrecht-textbox-read-only-border-color: var(--lux-color-none);
+  --utrecht-textbox-read-only-background-color: var(--lux-color-grijs-100);
+  --utrecht-textbox-focus-border-width: var(--lux-border-width-m);
+  --utrecht-textbox-border-width: var(--lux-border-width-default);
+  --utrecht-textbox-border-block-end-width: var(--lux-border-width-default);
+  --utrecht-textbox-invalid-border-width: var(--lux-border-width-default);
+  --utrecht-textbox-padding-inline-start: var(--lux-space-200);
+  --utrecht-textbox-padding-inline-end: var(--lux-space-200);
+  --utrecht-textbox-padding-block-start: var(--lux-space-100);
+  --utrecht-textbox-padding-block-end: var(--lux-space-100);
+  --utrecht-textbox-font-weight: var(--lux-font-weight-regular);
+  --utrecht-textbox-border-radius: var(--lux-border-radius-default);
+  --utrecht-select-invalid-border-width: var(--lux-border-width-default);
+  --utrecht-select-padding-inline-start: var(--lux-space-200);
+  --utrecht-select-padding-inline-end: var(--lux-space-200);
+  --utrecht-select-padding-block-start: var(--lux-space-100);
+  --utrecht-select-padding-block-end: var(--lux-space-100);
+  --utrecht-select-min-block-size: var(--lux-size-target);
+  --utrecht-select-border-width: var(--lux-border-width-default);
+  --utrecht-select-border-radius: var(--lux-border-radius-default);
+  --utrecht-radio-button-margin-inline-end: var(--lux-space-100);
+  --utrecht-radio-button-checked-border-width: var(--utrecht-radio-button-border-width);
+  --utrecht-radio-button-checked-active-border-width: var(--utrecht-radio-button-border-width);
+  --utrecht-radio-button-disabled-border-width: var(--utrecht-radio-button-border-width);
+  --utrecht-radio-button-active-border-width: var(--utrecht-radio-button-border-width);
+  --utrecht-radio-button-invalid-border-width: var(--utrecht-radio-button-border-width);
+  --utrecht-pre-heading-font-weight: var(--lux-font-weight-bold);
+  --utrecht-pointer-target-min-size: var(--lux-size-target);
   --utrecht-paragraph-margin-block-start: var(--lux-space-0);
   --utrecht-paragraph-margin-block-end: var(--lux-space-0);
+  --utrecht-page-footer-content-max-inline-size: var(--lux-grid-max-inline-size);
+  --utrecht-page-footer-content-row-gap: var(--lux-space-400);
+  --utrecht-page-footer-content-column-gap: var(--lux-grid-gutter);
+  --utrecht-page-footer-border-width: var(--lux-border-width-m);
+  --utrecht-page-footer-padding-inline-end: var(--lux-grid-margin);
+  --utrecht-page-footer-padding-inline-start: var(--lux-grid-margin);
+  --utrecht-page-footer-padding-block-end: var(--lux-space-600);
+  --utrecht-page-footer-padding-block-start: var(--lux-space-600);
   --utrecht-link-text-decoration: var(--lux-link-text-decoration);
   --utrecht-link-hover-text-decoration: var(--lux-link-hover-text-decoration);
   --utrecht-link-focus-text-decoration: var(--lux-link-focus-text-decoration);
   --utrecht-link-active-text-decoration: var(--lux-link-active-text-decoration);
+  --utrecht-link-list-icon-inset-block-start: var(--lux-icon-inset-block-start);
+  --utrecht-link-list-icon-size: var(--lux-size-icon);
+  --utrecht-link-list-row-gap: var(--lux-space-100);
   --utrecht-heading-6-font-weight: var(--lux-font-weight-bold);
   --utrecht-heading-5-font-weight: var(--lux-font-weight-bold);
   --utrecht-heading-4-font-weight: var(--lux-font-weight-bold);
   --utrecht-heading-3-font-weight: var(--lux-font-weight-bold);
   --utrecht-heading-2-font-weight: var(--lux-font-weight-bold);
-  --utrecht-heading-1-font-weight: var(--lux-font-weight-bold);
+  --utrecht-heading-1-font-weight: var(--lux-font-weight-regular);
+  --utrecht-form-label-radio-font-weight: var(--lux-font-weight-regular);
+  --utrecht-form-label-checked-font-weight: var(--lux-font-weight-regular);
+  --utrecht-form-label-checkbox-font-weight: var(--lux-font-weight-regular);
+  --utrecht-form-label-font-weight: var(--lux-font-weight-bold);
+  --utrecht-form-field-row-gap: var(--lux-space-100);
+  --utrecht-form-field-invalid-padding-inline-start: var(--lux-space-200);
+  --utrecht-form-field-invalid-border-inline-start-width: var(--lux-border-width-m);
+  --utrecht-form-field-error-message-border-color: var(--lux-color-none);
+  --utrecht-form-field-error-message-column-gap: var(--lux-space-100);
+  --utrecht-form-field-error-message-padding-inline-start: var(--lux-space-0);
+  --utrecht-form-field-error-message-padding-inline-end: var(--lux-space-0);
+  --utrecht-form-field-error-message-padding-block-start: var(--lux-space-0);
+  --utrecht-form-field-error-message-padding-block-end: var(--lux-space-0);
+  --utrecht-form-field-error-message-border-radius: var(--lux-border-radius-default); /* todo token */
+  --utrecht-form-field-error-message-background-color: var(--lux-color-none);
+  --utrecht-form-field-error-message-font-weight: var(--lux-font-weight-regular);
+  --utrecht-invalid-font-weight: var(--no-token); /* Controle vraag aan devs: bestaat deze echt in utrecht code? */
   --utrecht-focus-outline-width: var(--lux-focus-outline-width);
   --utrecht-focus-outline-style: var(--lux-focus-outline-style);
+  --utrecht-form-fieldset-section-background-color: var(--lux-color-none);
+  --utrecht-form-fieldset-legend-font-weight: var(--lux-font-weight-bold);
   --utrecht-document-font-weight: var(--lux-font-weight-regular);
+  --utrecht-column-layout-column-gap: var(--lux-grid-gutter);
+  --utrecht-column-layout-column-rule-width: var(--lux-border-width-none);
+  --utrecht-column-layout-column-rule-color: var(--lux-color-none);
+  --utrecht-checkbox-margin-inline-end: var(--lux-space-100);
+  --utrecht-checkbox-indeterminate-color: var(--lux-color-wit);
+  --utrecht-checkbox-indeterminate-border-width: var(--utrecht-checkbox-border-width);
+  --utrecht-checkbox-checked-color: var(--lux-color-wit);
+  --utrecht-checkbox-checked-border-width: var(--utrecht-checkbox-border-width);
+  --utrecht-checkbox-invalid-border-width: var(--utrecht-checkbox-border-width);
+  --utrecht-checkbox-focus-border-width: var(--utrecht-checkbox-border-width);
+  --utrecht-checkbox-hover-border-width: var(--lux-border-width-m);
+  --utrecht-checkbox-active-border-width: var(--utrecht-checkbox-border-width);
+  --utrecht-checkbox-icon-size: var(--lux-size-icon);
+  --utrecht-checkbox-border-radius: var(--lux-border-radius-default);
   --utrecht-button-subtle-hover-scale: var(--no-token);
   --utrecht-button-secondary-action-hover-scale: var(--no-token);
-  --utrecht-button-primary-action-hover-scale: var(--no-token);
   --utrecht-button-hover-scale: var(--no-token);
   --utrecht-button-hover-background-color: var(--lux-color-paars-200);
   --utrecht-button-focus-scale: var(--no-token);
   --utrecht-button-text-transform: var(--no-token);
   --utrecht-button-inline-size: var(--no-token); /* Wat is dit voor token? Waarom zit deze in de button?  */
+  --utrecht-button-primary-action-hover-scale: var(--no-token);
   --utrecht-button-color: var(--lux-color-paars-500);
   --utrecht-button-border-color: var(--lux-color-paars-500);
   --utrecht-button-background-color: var(--lux-color-paars-100);
+  --utrecht-button-group-row-gap: var(--lux-space-100);
+  --utrecht-button-group-padding-block-start: var(--lux-space-0);
+  --utrecht-button-group-padding-block-end: var(--lux-space-0);
+  --utrecht-button-group-column-gap: var(--lux-space-200);
+  --utrecht-button-group-background-color: var(--lux-color-none);
   --utrecht-alert-message-row-gap: var(--lux-space-0);
   --utrecht-alert-icon-size: var(--lux-alert-icon-size);
+  --utrecht-alert-icon-inset-block-start: var(--lux-space-25);
   --utrecht-alert-icon-color: var(--lux-color-grijs-700);
   --lux-font-family-primary: var(--ro-font-family-primary);
+  --lux-checkbox-checked-active-color: var(--lux-color-wit);
+  --lux-checkbox-checked-hover-color: var(--lux-color-wit);
+  --lux-section-border-radius: var(--lux-border-radius-default);
+  --lux-section-row-gap: var(--lux-space-400);
+  --lux-section-padding-inline-end: var(--lux-space-400);
+  --lux-section-padding-inline-start: var(--lux-space-400);
+  --lux-section-padding-block-start: var(--lux-space-400);
+  --lux-section-padding-block-end: var(--lux-space-400);
+  --lux-radio-group-row-gap: var(--lux-space-100);
+  --lux-radio-group-padding-block-end: var(--lux-space-0);
+  --lux-radio-group-padding-block-start: var(--lux-space-0);
   --lux-paragraph-font-weight: var(--lux-font-weight-regular);
   --lux-login-link-font-weight: var(--lux-font-weight-regular);
   --lux-login-link-line-height: var(--lux-line-height-large-scale-sm);
@@ -283,6 +417,8 @@
   --lux-icon-logo-eidas-lock-color: var(--mode-icon-logo-eidas-lock-color);
   --lux-icon-logo-eidas-stars-color: var(--mode-icon-logo-eidas-stars-color);
   --lux-icon-logo-eherkenning-e-color: var(--mode-icon-logo-eherkenning-e-color);
+  --lux-button-small-padding-block-start: var(--lux-space-25);
+  --lux-button-small-padding-block-end: var(--lux-space-25);
   --lux-button-font-weight: var(--lux-font-weight-bold);
   --lux-button-tertiary-disabled-border-color: var(--lux-color-none);
   --lux-button-tertiary-active-border-color: var(--lux-color-none);
@@ -309,6 +445,7 @@
   --lux-button-primary-hover-border-color: var(--lux-color-none);
   --lux-button-primary-border-color: var(--lux-color-none);
   --lux-button-primary-font-size: var(--product-button-primary-font-size);
+  --lux-alert-heading-font-weight: var(--lux-font-weight-bold);
   --lux-alert-message-row-gap: var(--lux-space-0);
   --lux-alert-close-button-size: var(--lux-size-icon); /* Mist in utrecht alert, wat gaan we hiermee doen?  */
   --lux-alert-icon-inset-block-start: var(--lux-space-25);
@@ -359,9 +496,77 @@
   --product-button-secondary-hover-border-color: var(--lux-color-border-default);
   --product-button-secondary-color: var(--lux-color-foreground-default);
   --product-button-secondary-border-color: var(--lux-color-border-default);
+  --todo-textbox-hover-color: var(--lux-color-foreground-default);
+  --todo-textbox-hover-background-color: var(--lux-color-background-default);
+  --todo-select-hover-color: var(--lux-color-foreground-default);
+  --todo-select-hover-background-color: var(--lux-color-background-default);
+  --todo-checkbox-indeterminate-hover-color: var(--lux-checkbox-checked-hover-color);
+  --todo-checkbox-indeterminate-active-color: var(--lux-checkbox-checked-active-color);
+  --utrecht-textarea-font-family: var(--lux-font-family-primary);
+  --utrecht-textarea-hover-color: var(--lux-color-foreground-default);
+  --utrecht-textarea-hover-background-color: var(--lux-color-background-default);
+  --utrecht-textarea-read-only-color: var(--lux-color-foreground-default);
+  --utrecht-textarea-disabled-color: var(--lux-color-foreground-subdued);
+  --utrecht-textarea-disabled-border-color: var(--lux-color-border-subdued);
+  --utrecht-textarea-disabled-background-color: var(--lux-color-background-subdued);
+  --utrecht-textarea-focus-color: var(--lux-color-foreground-default);
+  --utrecht-textarea-focus-background-color: var(--lux-color-background-default);
+  --utrecht-textarea-placeholder-color: var(--lux-color-foreground-subdued);
+  --utrecht-textarea-invalid-color: var(--lux-color-foreground-default);
+  --utrecht-textarea-invalid-border-color: var(--lux-color-feedback-error-default);
+  --utrecht-textarea-invalid-background-color: var(--lux-color-background-default);
+  --utrecht-textarea-color: var(--lux-color-foreground-default);
+  --utrecht-textarea-background-color: var(--lux-color-background-default);
+  --utrecht-textbox-read-only-color: var(--lux-color-foreground-default);
+  --utrecht-textbox-disabled-color: var(--lux-color-foreground-subdued);
+  --utrecht-textbox-disabled-border-color: var(--lux-color-border-subdued);
+  --utrecht-textbox-disabled-background-color: var(--lux-color-background-subdued);
+  --utrecht-textbox-focus-color: var(--lux-color-foreground-default);
+  --utrecht-textbox-focus-background-color: var(--lux-color-background-default);
+  --utrecht-textbox-placeholder-color: var(--lux-color-foreground-subdued);
+  --utrecht-textbox-invalid-color: var(--lux-color-foreground-default);
+  --utrecht-textbox-invalid-background-color: var(--lux-color-background-default);
+  --utrecht-textbox-color: var(--lux-color-foreground-default);
+  --utrecht-textbox-background-color: var(--lux-color-background-default);
+  --utrecht-textbox-font-family: var(--lux-font-family-primary);
+  --utrecht-select-invalid-border-color: var(--lux-color-feedback-error-default);
+  --utrecht-select-invalid-background-color: var(--lux-color-background-default);
+  --utrecht-select-invalid-border-block-end-width: var(--utrecht-select-invalid-border-width);
+  --utrecht-select-disabled-color: var(--lux-color-foreground-subdued);
+  --utrecht-select-disabled-border-color: var(--lux-color-border-subdued);
+  --utrecht-select-disabled-background-color: var(--lux-color-background-subdued);
+  --utrecht-select-font-weight: var(--utrecht-document-font-weight);
+  --utrecht-select-font-family: var(--lux-font-family-primary);
+  --utrecht-select-color: var(--lux-color-foreground-default);
+  --utrecht-select-border-block-end-width: var(--utrecht-select-border-width);
+  --utrecht-select-background-color: var(--lux-color-background-default);
+  --utrecht-radio-button-checked-active-color: var(--lux-color-foreground-default);
+  --utrecht-radio-button-checked-active-border-color: var(--lux-color-foreground-default);
+  --utrecht-radio-button-checked-active-background-color: var(--lux-color-background-default);
+  --utrecht-radio-button-checked-hover-color: var(--lux-color-foreground-default);
+  --utrecht-radio-button-checked-hover-border-color: var(--lux-color-foreground-default);
+  --utrecht-radio-button-checked-hover-background-color: var(--lux-color-background-default);
+  --utrecht-radio-button-checked-color: var(--lux-color-foreground-default);
+  --utrecht-radio-button-checked-border-color: var(--lux-color-foreground-default);
+  --utrecht-radio-button-checked-background-color: var(--lux-color-background-default);
+  --utrecht-radio-button-disabled-color: var(--lux-color-border-subdued);
+  --utrecht-radio-button-disabled-border-color: var(--lux-color-border-subdued);
+  --utrecht-radio-button-disabled-background-color: var(--lux-color-canvas);
+  --utrecht-radio-button-active-border-color: var(--lux-color-foreground-default);
+  --utrecht-radio-button-active-background-color: var(--lux-color-background-default);
+  --utrecht-radio-button-hover-border-color: var(--lux-color-foreground-default);
+  --utrecht-radio-button-hover-background-color: var(--lux-color-background-default);
+  --utrecht-radio-button-invalid-border-color: var(--lux-color-feedback-error-default);
+  --utrecht-radio-button-border-color: var(--lux-color-foreground-default);
+  --utrecht-radio-button-background-color: var(--lux-color-background-default);
+  --utrecht-pre-heading-font-family: var(--lux-font-family-primary);
+  --utrecht-pre-heading-color: var(--lux-color-foreground-default);
   --utrecht-paragraph-small-font-weight: var(--lux-paragraph-font-weight);
   --utrecht-paragraph-lead-font-weight: var(--lux-paragraph-font-weight);
   --utrecht-paragraph-font-weight: var(--lux-paragraph-font-weight);
+  --utrecht-page-footer-border-color: var(--lux-color-brand-default);
+  --utrecht-page-footer-color: var(--lux-color-foreground-default);
+  --utrecht-page-footer-background-color: var(--lux-color-background-default);
   --utrecht-link-column-gap: var(--lux-link-column-gap);
   --utrecht-link-icon-size: var(--lux-link-icon-size);
   --utrecht-link-font-weight: var(--lux-link-font-weight);
@@ -374,14 +579,46 @@
   --utrecht-heading-4-color: var(--lux-color-brand-default);
   --utrecht-heading-3-font-size: var(--viewport-font-size-heading-level-3);
   --utrecht-heading-3-font-family: var(--lux-font-family-primary);
-  --utrecht-heading-3-color: var(--lux-color-brand-default);
+  --utrecht-heading-3-color: var(--lux-color-foreground-default);
   --utrecht-heading-2-font-family: var(--lux-font-family-primary);
   --utrecht-heading-2-color: var(--lux-color-brand-default);
   --utrecht-heading-1-font-family: var(--lux-font-family-primary);
-  --utrecht-heading-1-color: var(--lux-color-brand-default);
+  --utrecht-heading-1-color: var(--lux-color-foreground-default);
+  --utrecht-form-label-radio-color: var(--lux-color-foreground-default);
+  --utrecht-form-label-disabled-color: var(--lux-color-foreground-subdued);
+  --utrecht-form-label-checkbox-color: var(--lux-color-foreground-default);
+  --utrecht-form-label-color: var(--lux-color-foreground-default);
+  --utrecht-form-field-invalid-border-inline-start-color: var(--lux-color-feedback-error-default);
+  --utrecht-form-field-error-message-border-width: var(--lux-alert-border-width);
+  --utrecht-form-field-error-message-font-family: var(--lux-font-family-primary);
+  --utrecht-form-field-error-message-color: var(--lux-color-feedback-error-default);
+  --utrecht-form-field-error-message-icon-color: var(--lux-color-feedback-error-default);
+  --utrecht-form-field-description-valid-color: var(--lux-color-foreground-subdued); /* Checkvraag dev: bestaat deze echt in code?  */
+  --utrecht-form-field-description-invalid-color: var(--lux-color-foreground-subdued); /* Checkvraag dev: bestaat deze echt in code?  */
+  --utrecht-form-field-description-font-family: var(--lux-font-family-primary);
+  --utrecht-form-field-description-color: var(--lux-color-foreground-subdued);
   --utrecht-focus-outline-offset: var(--lux-focus-outline-offset);
+  --utrecht-form-fieldset-invalid-padding-inline-start: var(--utrecht-form-field-invalid-padding-inline-start);
+  --utrecht-form-fieldset-invalid-border-inline-start-width: var(--utrecht-form-field-invalid-border-inline-start-width);
+  --utrecht-form-fieldset-section-color: var(--lux-color-foreground-default);
+  --utrecht-form-fieldset-legend-disabled-color: var(--lux-color-foreground-subdued); /* Do not use a disabled state */
+  --utrecht-form-fieldset-legend-font-family: var(--lux-font-family-primary);
+  --utrecht-form-fieldset-legend-color: var(--lux-color-brand-default);
+  --utrecht-document-background-color: var(--lux-color-background-default);
   --utrecht-document-color: var(--lux-color-foreground-default);
   --utrecht-document-font-family: var(--lux-font-family-primary);
+  --utrecht-column-layout-gap: var(--utrecht-column-layout-column-gap); /* Deze token uitfaseren */
+  --utrecht-checkbox-indeterminate-background-color: var(--lux-color-brand-default);
+  --utrecht-checkbox-checked-background-color: var(--lux-color-brand-default);
+  --utrecht-checkbox-invalid-border-color: var(--lux-color-feedback-error-default);
+  --utrecht-checkbox-invalid-background-color: var(--lux-color-feedback-error-subdued);
+  --utrecht-checkbox-focus-background-color: var(--lux-color-background-default);
+  --utrecht-checkbox-hover-background-color: var(--lux-color-background-default);
+  --utrecht-checkbox-disabled-border-color: var(--lux-color-border-subdued);
+  --utrecht-checkbox-disabled-background-color: var(--lux-color-background-subdued);
+  --utrecht-checkbox-active-background-color: var(--lux-color-background-default);
+  --utrecht-checkbox-background-color: var(--lux-color-background-default);
+  --utrecht-button-subtle-line-height: var(--lux-button-line-height);
   --utrecht-button-subtle-pressed-border-color: var(--lux-button-tertiary-hover-border-color);
   --utrecht-button-subtle-focus-border-color: var(--lux-button-tertiary-border-color);
   --utrecht-button-subtle-focus-background-color: var(--lux-button-tertiary-background-color);
@@ -393,20 +630,13 @@
   --utrecht-button-subtle-border-width: var(--lux-button-border-width);
   --utrecht-button-subtle-border-color: var(--lux-button-tertiary-border-color);
   --utrecht-button-subtle-background-color: var(--lux-button-tertiary-background-color);
+  --utrecht-button-secondary-action-line-height: var(--lux-button-line-height);
   --utrecht-button-secondary-action-focus-background-color: var(--lux-button-secondary-background-color);
   --utrecht-button-secondary-action-disabled-border-color: var(--lux-button-secondary-disabled-border-color);
   --utrecht-button-secondary-action-active-background-color: var(--lux-button-secondary-active-background-color);
   --utrecht-button-secondary-action-font-weight: var(--lux-button-font-weight);
   --utrecht-button-secondary-action-border-width: var(--lux-button-border-width);
   --utrecht-button-secondary-action-background-color: var(--lux-button-secondary-background-color);
-  --utrecht-button-primary-action-pressed-border-color: var(--lux-button-primary-hover-border-color);
-  --utrecht-button-primary-action-focus-border-color: var(--lux-button-primary-hover-border-color);
-  --utrecht-button-primary-action-hover-border-color: var(--lux-button-primary-hover-border-color);
-  --utrecht-button-primary-action-disabled-border-color: var(--lux-button-primary-disabled-border-color);
-  --utrecht-button-primary-action-active-border-color: var(--lux-button-primary-active-border-color);
-  --utrecht-button-primary-action-font-weight: var(--lux-button-font-weight);
-  --utrecht-button-primary-action-border-width: var(--lux-button-border-width);
-  --utrecht-button-primary-action-border-color: var(--lux-button-primary-border-color);
   --utrecht-button-pressed-color: var(--utrecht-button-color);
   --utrecht-button-pressed-border-color: var(--utrecht-button-border-color);
   --utrecht-button-pressed-background-color: var(--utrecht-button-background-color);
@@ -431,12 +661,21 @@
   --utrecht-button-min-block-size: var(--lux-button-min-block-size);
   --utrecht-button-line-height: var(--lux-button-line-height);
   --utrecht-button-font-weight: var(--lux-button-font-weight);
+  --utrecht-button-primary-action-line-height: var(--lux-button-line-height);
+  --utrecht-button-primary-action-pressed-border-color: var(--lux-button-primary-hover-border-color);
+  --utrecht-button-primary-action-focus-border-color: var(--lux-button-primary-hover-border-color);
+  --utrecht-button-primary-action-hover-border-color: var(--lux-button-primary-hover-border-color);
+  --utrecht-button-primary-action-disabled-border-color: var(--lux-button-primary-disabled-border-color);
+  --utrecht-button-primary-action-active-border-color: var(--lux-button-primary-active-border-color);
+  --utrecht-button-primary-action-font-weight: var(--lux-button-font-weight);
+  --utrecht-button-primary-action-border-width: var(--lux-button-border-width);
+  --utrecht-button-primary-action-border-color: var(--lux-button-primary-border-color);
+  --utrecht-button-primary-action-font-size: var(--lux-button-primary-font-size);
   --utrecht-button-border-width: var(--lux-button-border-width);
   --utrecht-button-border-radius: var(--lux-button-border-radius);
   --utrecht-alert-info-border-color: var(--lux-alert-border-color);
   --utrecht-alert-info-color: var(--lux-alert-color);
   --utrecht-alert-icon-info-color: var(--lux-color-feedback-info-default);
-  --utrecht-alert-icon-inset-block-start: var(--lux-alert-icon-inset-block-start);
   --utrecht-alert-icon-ok-color: var(--lux-color-feedback-success-default);
   --utrecht-alert-icon-warning-color: var(--lux-color-feedback-warning-default);
   --utrecht-alert-icon-error-color: var(--lux-color-feedback-error-default);
@@ -456,6 +695,13 @@
   --utrecht-alert-border-radius: var(--lux-alert-border-radius);
   --utrecht-alert-border-color: var(--lux-alert-border-color);
   --utrecht-alert-background-color: var(--lux-color-background-subdued);
+  --lux-checkbox-checked-disabled-color: var(--lux-color-foreground-subdued);
+  --lux-checkbox-checked-disabled-border-color: var(--lux-color-border-subdued);
+  --lux-checkbox-checked-disabled-background-color: var(--lux-color-background-subdued);
+  --lux-checkbox-checked-active-background-color: var(--lux-color-brand-hover);
+  --lux-checkbox-checked-hover-background-color: var(--lux-color-brand-hover);
+  --lux-checkbox-checked-focus-color: var(--utrecht-checkbox-checked-color);
+  --lux-section-background-color: var(--lux-color-background-default);
   --lux-paragraph-font-family: var(--lux-font-family-primary);
   --lux-paragraph-color: var(--lux-color-foreground-default);
   --lux-login-link-focus-border-color: var(--lux-color-border-default);
@@ -490,6 +736,7 @@
   --lux-button-primary-color: var(--lux-color-foreground-on-emphasis);
   --lux-button-primary-background-color: var(--lux-color-brand-default);
   --lux-button-font-size: var(--product-button-font-size);
+  --lux-alert-heading-font-family: var(--lux-font-family-primary);
   --lux-alert-warning-background-color: var(--lux-color-feedback-warning-subdued);
   --lux-alert-error-background-color: var(--lux-color-feedback-error-subdued);
   --lux-alert-success-background-color: var(--lux-color-feedback-success-subdued);
@@ -511,6 +758,41 @@
   --lux-line-height-body-default: var(--viewport-line-height-body-default);
   --lux-line-height-body-small: var(--viewport-line-height-body-small);
   --lux-color-border-strong: var(--lux-color-foreground-default);
+  --todo-textbox-hover-border-color: var(--lux-color-border-strong);
+  --todo-select-hover-border-color: var(--lux-color-border-strong);
+  --todo-select-line-height: var(--lux-line-height-body-default);
+  --todo-checkbox-indeterminate-disabled-color: var(--lux-checkbox-checked-disabled-color);
+  --todo-checkbox-indeterminate-disabled-border-color: var(--lux-checkbox-checked-disabled-border-color);
+  --todo-checkbox-indeterminate-disabled-background-color: var(--lux-checkbox-checked-disabled-background-color);
+  --todo-checkbox-indeterminate-focus-color: var(--lux-checkbox-checked-focus-color);
+  --todo-checkbox-indeterminate-hover-background-color: var(--lux-checkbox-checked-hover-background-color);
+  --todo-checkbox-indeterminate-active-background-color: var(--lux-checkbox-checked-active-background-color);
+  --utrecht-textarea-font-size: var(--lux-font-size-body-default);
+  --utrecht-textarea-line-height: var(--lux-line-height-body-default);
+  --utrecht-textarea-hover-border-color: var(--lux-color-border-strong);
+  --utrecht-textarea-focus-border-color: var(--lux-color-border-strong);
+  --utrecht-textarea-border-color: var(--lux-color-border-strong);
+  --utrecht-textbox-focus-border-color: var(--lux-color-border-strong);
+  --utrecht-textbox-invalid-border-color: var(--lux-color-border-strong);
+  --utrecht-textbox-border-color: var(--lux-color-border-strong);
+  --utrecht-textbox-line-height: var(--lux-line-height-body-default);
+  --utrecht-textbox-font-size: var(--lux-font-size-body-default);
+  --utrecht-select-focus-color: var(--utrecht-select-color);
+  --utrecht-select-focus-background-color: var(--utrecht-select-background-color);
+  --utrecht-select-font-size: var(--lux-font-size-body-default);
+  --utrecht-select-border-color: var(--lux-color-border-strong);
+  --utrecht-radio-button-checked-focus-color: var(--utrecht-radio-button-checked-color);
+  --utrecht-radio-button-checked-focus-border-color: var(--utrecht-radio-button-checked-border-color);
+  --utrecht-radio-button-checked-focus-background-color: var(--utrecht-radio-button-checked-background-color);
+  --utrecht-radio-button-focus-border-color: var(--utrecht-radio-button-border-color);
+  --utrecht-radio-button-focus-background-color: var(--utrecht-radio-button-background-color);
+  --utrecht-radio-button-active-color: var(--utrecht-radio-button-active-border-color);
+  --utrecht-radio-button-hover-color: var(--utrecht-radio-button-hover-border-color);
+  --utrecht-radio-button-invalid-color: var(--utrecht-radio-button-invalid-border-color);
+  --utrecht-radio-button-invalid-background-color: var(--lux-alert-error-background-color);
+  --utrecht-radio-button-color: var(--utrecht-radio-button-border-color);
+  --utrecht-pre-heading-font-size: var(--lux-font-size-body-default);
+  --utrecht-pre-heading-line-height: var(--lux-line-height-body-default);
   --utrecht-paragraph-small-color: var(--lux-paragraph-color);
   --utrecht-paragraph-lead-color: var(--lux-paragraph-color);
   --utrecht-paragraph-font-family: var(--lux-paragraph-font-family);
@@ -533,12 +815,31 @@
   --utrecht-heading-2-line-height: var(--lux-line-height-heading-level-2);
   --utrecht-heading-1-font-size: var(--lux-font-size-heading-level-1);
   --utrecht-heading-1-line-height: var(--lux-line-height-heading-level-1);
+  --utrecht-form-label-font-size: var(--lux-font-size-body-default);
+  --utrecht-form-field-error-message-line-height: var(--lux-line-height-body-default);
+  --utrecht-form-field-error-message-font-size: var(--lux-font-size-body-default);
+  --utrecht-form-field-description-line-height: var(--lux-line-height-body-default);
+  --utrecht-form-field-description-font-size: var(--lux-font-size-body-default);
+  --utrecht-form-fieldset-invalid-border-inline-start-color: var(--utrecht-form-field-invalid-border-inline-start-color);
+  --utrecht-form-fieldset-legend-line-height: var(--lux-line-height-heading-level-3);
+  --utrecht-form-fieldset-legend-font-size: var(--lux-font-size-heading-level-3);
   --utrecht-document-font-size: var(--lux-font-size-body-default);
   --utrecht-document-line-height: var(--lux-line-height-body-default);
+  --utrecht-checkbox-indeterminate-border-color: var(--lux-color-border-strong);
+  --utrecht-checkbox-checked-border-color: var(--lux-color-border-strong);
+  --utrecht-checkbox-invalid-color: var(--utrecht-checkbox-invalid-border-color);
+  --utrecht-checkbox-focus-border-color: var(--lux-color-border-strong);
+  --utrecht-checkbox-hover-border-color: var(--lux-color-border-strong);
+  --utrecht-checkbox-disabled-color: var(--utrecht-checkbox-disabled-border-color);
+  --utrecht-checkbox-active-border-color: var(--lux-color-border-strong);
+  --utrecht-checkbox-border-color: var(--lux-color-border-strong);
+  --utrecht-button-subtle-font-size: var(--lux-button-font-size);
   --utrecht-button-subtle-disabled-color: var(--lux-button-tertiary-disabled-color);
   --utrecht-button-subtle-disabled-background-color: var(--lux-button-tertiary-disabled-background-color);
+  --utrecht-button-secondary-action-font-size: var(--lux-button-font-size);
   --utrecht-button-secondary-action-disabled-color: var(--lux-button-secondary-disabled-color);
   --utrecht-button-secondary-action-disabled-background-color: var(--lux-button-secondary-disabled-background-color);
+  --utrecht-button-icon-gap: var(--utrecht-button-column-gap);
   --utrecht-button-primary-action-pressed-color: var(--lux-button-primary-hover-color);
   --utrecht-button-primary-action-pressed-background-color: var(--lux-button-primary-hover-background-color);
   --utrecht-button-primary-action-focus-color: var(--lux-button-primary-color);
@@ -551,13 +852,15 @@
   --utrecht-button-primary-action-active-background-color: var(--lux-button-primary-active-background-color);
   --utrecht-button-primary-action-color: var(--lux-button-primary-color);
   --utrecht-button-primary-action-background-color: var(--lux-button-primary-background-color);
-  --utrecht-button-icon-gap: var(--utrecht-button-column-gap);
   --utrecht-button-font-size: var(--lux-button-font-size);
   --utrecht-button-font-family: var(--lux-button-font-family);
   --utrecht-alert-info-background-color: var(--lux-alert-info-background-color);
   --utrecht-alert-ok-background-color: var(--lux-alert-success-background-color);
   --utrecht-alert-error-background-color: var(--lux-alert-error-background-color);
   --utrecht-alert-warning-background-color: var(--lux-alert-warning-background-color);
+  --lux-checkbox-checked-active-border-color: var(--lux-color-border-strong);
+  --lux-checkbox-checked-hover-border-color: var(--lux-color-border-strong);
+  --lux-checkbox-checked-focus-background-color: var(--utrecht-checkbox-checked-background-color);
   --lux-paragraph-small-line-height: var(--lux-line-height-body-small);
   --lux-paragraph-small-font-size: var(--lux-font-size-body-small);
   --lux-paragraph-lead-line-height: var(--lux-line-height-body-large);
@@ -578,7 +881,13 @@
   --lux-button-secondary-hover-background-color: var(--mode-button-secondary-hover-background-color);
   --lux-button-secondary-color: var(--mode-button-secondary-color);
   --lux-button-secondary-border-color: var(--mode-button-secondary-border-color);
+  --lux-alert-heading-font-size: var(--lux-font-size-heading-level-4);
+  --lux-alert-heading-line-height: var(--lux-line-height-heading-level-4);
   --lux-color-focus-outline: var(--lux-color-border-strong); /* Outline kleur voor de focus state. */
+  --todo-checkbox-indeterminate-focus-background-color: var(--lux-checkbox-checked-focus-background-color);
+  --todo-checkbox-indeterminate-active-border-color: var(--lux-checkbox-checked-active-border-color);
+  --utrecht-select-focus-border-color: var(--utrecht-select-border-color);
+  --utrecht-radio-button-focus-color: var(--utrecht-radio-button-focus-border-color);
   --utrecht-paragraph-small-line-height: var(--lux-paragraph-small-line-height);
   --utrecht-paragraph-small-font-size: var(--lux-paragraph-small-font-size);
   --utrecht-paragraph-lead-line-height: var(--lux-paragraph-lead-line-height);
@@ -588,6 +897,10 @@
   --utrecht-link-font-size: var(--lux-link-font-size);
   --utrecht-link-line-height: var(--lux-link-line-height);
   --utrecht-focus-outline-color: var(--lux-color-focus-outline);
+  --utrecht-checkbox-focus-color: var(--utrecht-checkbox-focus-border-color);
+  --utrecht-checkbox-hover-color: var(--utrecht-checkbox-hover-border-color);
+  --utrecht-checkbox-active-color: var(--utrecht-checkbox-active-border-color);
+  --utrecht-checkbox-color: var(--utrecht-checkbox-border-color);
   --utrecht-button-subtle-pressed-color: var(--lux-button-tertiary-hover-color);
   --utrecht-button-subtle-pressed-background-color: var(--lux-button-tertiary-hover-background-color);
   --utrecht-button-subtle-focus-color: var(--lux-button-tertiary-color);
@@ -607,4 +920,6 @@
   --utrecht-button-secondary-action-active-border-color: var(--lux-button-secondary-active-border-color);
   --utrecht-button-secondary-action-color: var(--lux-button-secondary-color);
   --utrecht-button-secondary-action-border-color: var(--lux-button-secondary-border-color);
+  --lux-checkbox-checked-focus-border-color: var(--utrecht-checkbox-checked-border-color);
+  --todo-checkbox-indeterminate-focus-border-color: var(--lux-checkbox-checked-focus-border-color);
 }