@rijkshuisstijl-community/design-tokens 4.0.1 → 5.0.0

package/dist/root.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 28 Jul 2025 08:31:48 GMT
+ * Generated on Fri, 22 Aug 2025 10:20:29 GMT
  */
 
 :root {
@@ -24,6 +24,7 @@
   --basis-color-default-color-subtle: #334155;
   --basis-color-default-color-document: #0F172A;
   --basis-color-default-bg-document: #fff;
+  --figma-link-icon-size: 1.25rem;
   --nl-heading-level-6-margin-block-start: 0rem;
   --nl-heading-level-6-margin-block-end: 0rem;
   --nl-heading-level-6-line-height: 150%;
@@ -71,26 +72,13 @@
   --nl-link-hover-text-decoration-line: underline;
   --nl-link-disabled-cursor: disabled;
   --nl-link-disabled-color: #334155;
+  --nl-link-active-color: #1a4972;
   --nl-link-current-cursor: default;
   --nl-link-text-underline-offset: 0.125rem;
   --nl-link-text-decoration-thickness: 0.0625em;
   --nl-link-text-decoration-line: underline;
   --nl-link-text-decoration-color: inherit;
   --nl-link-color: #01689b;
-  --nl-link-visited-color: #01689b;
-  --nl-link-focus-text-decoration-thickness: auto;
-  --nl-link-focus-text-decoration: None;
-  --nl-link-focus-color: #01689b;
-  --nl-link-focus-background-color: transparent;
-  --nl-link-active-color: #1a4972;
-  --nl-link-active-text-decoration: None;
-  --nl-link-icon-size: 24px;
-  --nl-link-icon-inset-block-start: 0.25rem;
-  --nl-link-line-height: 150%;
-  --nl-link-font-weight: 400;
-  --nl-link-font-size: 1.25rem;
-  --nl-link-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
-  --nl-link-column-gap: 0.25rem;
   --nl-number-badge-padding-inline: 0.5rem;
   --nl-number-badge-padding-block: 0.125rem;
   --nl-number-badge-min-inline-size: 24px;
@@ -104,6 +92,11 @@
   --nl-number-badge-border-color: transparent;
   --nl-number-badge-background-color: #154273;
   --nl-number-badge-line-height: 125%;
+  --nl-paragraph-lead-margin-block-start: 0rem;
+  --nl-paragraph-lead-margin-block-end: 0rem;
+  --nl-paragraph-lead-line-height: 150%;
+  --nl-paragraph-lead-font-weight: 400;
+  --nl-paragraph-lead-font-size: 1.5rem;
   --nl-paragraph-margin-block-start: 0rem;
   --nl-paragraph-margin-block-end: 0rem;
   --nl-paragraph-line-height: 150%;
@@ -111,12 +104,6 @@
   --nl-paragraph-font-size: 1.25rem;
   --nl-paragraph-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
   --nl-paragraph-color: #0F172A;
-  --nl-paragraph-lead-margin-block-start: 0rem;
-  --nl-paragraph-lead-margin-block-end: 0rem;
-  --nl-paragraph-lead-line-height: 150%;
-  --nl-paragraph-lead-font-weight: 400;
-  --nl-paragraph-lead-font-size: 1.5rem;
-  --nl-paragraph-lead-color: #0F172A;
   --nl-skip-link-font-size: 1.25rem;
   --nl-skip-link-line-height: 150%;
   --nl-skip-link-text-underline-offset: 0.125rem;
@@ -451,6 +438,7 @@
   --rhc-keep-top-left-border-radius-top-right: 0;
   --rhc-keep-top-left-border-radius-top-left: 48px;
   --rhc-keep-comment: ⚠️ Deze tokens zijn legacy en worden vervangen door de tokenset components/blockquote.;
+  --rhc-breadcrumb-nav-link-current-color: #334155;
   --rhc-card-as-link-horizontal-heading-inline-size: 200px;
   --rhc-card-as-link-horizontal-padding-inline-start: 1rem;
   --rhc-card-as-link-horizontal-padding-inline-end: 1rem;
@@ -487,13 +475,55 @@
   --rhc-card-as-link-link-color: #01689b;
   --rhc-card-as-link-icon-size: 24px;
   --rhc-card-as-link-icon-color: #154273;
-  --rhc-card-as-link-inline-size: 328px;
   --rhc-card-as-link-column-gap: 1rem;
   --rhc-card-as-link-color: #0F172A;
   --rhc-card-as-link-border-width: 1px;
   --rhc-card-as-link-border-radius: 5px;
   --rhc-card-as-link-border-color: #CBD5E1;
   --rhc-card-as-link-background-color: #fff;
+  --rhc-card-horizontal-heading-inline-size: 200px;
+  --rhc-card-horizontal-padding-inline-start: 1rem;
+  --rhc-card-horizontal-padding-inline-end: 1rem;
+  --rhc-card-horizontal-padding-block-start: 0;
+  --rhc-card-horizontal-padding-block-end: 0;
+  --rhc-card-horizontal-max-block-size: 96px;
+  --rhc-card-horizontal-color: #fff;
+  --rhc-card-horizontal-border-color: transparent;
+  --rhc-card-horizontal-background-color: #154273;
+  --rhc-card-heading-font-weight: 700;
+  --rhc-card-heading-font-size: 1.5rem;
+  --rhc-card-heading-padding-block-start: 0.5rem;
+  --rhc-card-heading-color: #154273;
+  --rhc-card-full-bleed-opacity: 0.5;
+  --rhc-card-full-bleed-color: #fff;
+  --rhc-card-full-bleed-border-color: transparent;
+  --rhc-card-full-bleed-background-color: #000;
+  --rhc-card-focus-text-decoration: underline;
+  --rhc-card-focus-background-color: #dce3ea;
+  --rhc-card-hover-text-decoration: underline;
+  --rhc-card-hover-background-color: #F8FAFC;
+  --rhc-card-active-text-decoration: underline;
+  --rhc-card-active-background-color: #F1F5F9;
+  --rhc-card-row-gap: 0.75rem;
+  --rhc-card-padding-inline-start: 1rem;
+  --rhc-card-padding-inline-end: 1rem;
+  --rhc-card-padding-block-start: 1rem;
+  --rhc-card-padding-block-end: 1rem;
+  --rhc-card-metadata-color: #334155;
+  --rhc-card-link-focus-text-decoration: none;
+  --rhc-card-link-hover-text-decoration: none;
+  --rhc-card-link-active-text-decoration: none;
+  --rhc-card-link-text-decoration: underline;
+  --rhc-card-link-color: #01689b;
+  --rhc-card-icon-size: 24px;
+  --rhc-card-icon-color: #154273;
+  --rhc-card-inline-size: 328px;
+  --rhc-card-column-gap: 1rem;
+  --rhc-card-color: #0F172A;
+  --rhc-card-border-width: 1px;
+  --rhc-card-border-radius: 5px;
+  --rhc-card-border-color: #CBD5E1;
+  --rhc-card-background-color: #fff;
   --rhc-checkbox-group-row-gap: 1rem;
   --rhc-checkbox-group-padding-block-start: 0.5rem;
   --rhc-checkbox-group-padding-block-end: 0.5rem;
@@ -538,6 +568,11 @@
   --rhc-dot-badge-size: 12px;
   --rhc-dot-badge-color: #d52b1e;
   --rhc-dot-badge-border-radius: 999px;
+  --rhc-expandable-checkbox-group-summary-text-decoration: underline;
+  --rhc-expandable-checkbox-group-summary-margin-block-start: 0.5rem;
+  --rhc-expandable-checkbox-group-summary-margin-block-end: 0.5rem;
+  --rhc-expandable-checkbox-group-summary-color: #01689b;
+  --rhc-expandable-checkbox-group-details-margin-block-start: 0.5rem;
   --rhc-file-subtitle-color: #64748B;
   --rhc-file-error-border-color: #d52b1e;
   --rhc-file-column-gap: 0.25rem;
@@ -601,7 +636,7 @@
   --rhc-icon-only-button-padding-inline-end: 0.75rem;
   --rhc-icon-only-button-padding-block-start: 0.75rem;
   --rhc-icon-only-button-padding-block-end: 0.75rem;
-  --rhc-link-list-text-decoration: None;
+  --rhc-link-column-gap: 0.25rem;
   --rhc-link-list-card-padding-inline-end: 1.5rem;
   --rhc-link-list-card-padding-inline-start: 1.5rem;
   --rhc-link-list-card-row-gap: 1rem;
@@ -742,6 +777,7 @@
   --rhc-toggletip-border-color: transparent;
   --rhc-toggletip-background-color: #007bc7;
   --rhc-toggletip-color: #fff;
+  --rhc-unordered-list-nested-margin-inline-start: 0rem;
   --utrecht-action-submit-cursor: pointer;
   --utrecht-action-navigate-cursor: pointer;
   --utrecht-action-inert-cursor: default;
@@ -899,6 +935,18 @@
   --utrecht-blockquote-border-end-end-radius: 0;
   --utrecht-blockquote-border-block-start-width: 0;
   --utrecht-blockquote-border-block-end-width: 0;
+  --utrecht-breadcrumb-nav-link-icon-size: 24px;
+  --utrecht-breadcrumb-nav-link-hover-color: #01496c;
+  --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
+  --utrecht-breadcrumb-nav-link-focus-text-decoration: None;
+  --utrecht-breadcrumb-nav-link-focus-color: #01689b;
+  --utrecht-breadcrumb-nav-link-focus-background-color: transparent;
+  --utrecht-breadcrumb-nav-link-disabled-color: #334155;
+  --utrecht-breadcrumb-nav-link-active-text-decoration: underline;
+  --utrecht-breadcrumb-nav-link-active-color: #163f5b;
+  --utrecht-breadcrumb-nav-link-current-font-weight: 400;
+  --utrecht-breadcrumb-nav-link-text-decoration: underline;
+  --utrecht-breadcrumb-nav-link-color: #01689b;
   --utrecht-breadcrumb-nav-separator-icon-size: 24px;
   --utrecht-breadcrumb-nav-separator-color: #334155;
   --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0rem;
@@ -910,28 +958,6 @@
   --utrecht-breadcrumb-nav-line-height: 150%;
   --utrecht-breadcrumb-nav-font-size: 1.25rem;
   --utrecht-breadcrumb-nav-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
-  --utrecht-breadcrumb-nav-link-hover-color: #01496c;
-  --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
-  --utrecht-breadcrumb-nav-link-focus-text-decoration: None;
-  --utrecht-breadcrumb-nav-link-focus-color: #01689b;
-  --utrecht-breadcrumb-nav-link-focus-background-color: transparent;
-  --utrecht-breadcrumb-nav-link-disabled-color: #334155;
-  --utrecht-breadcrumb-nav-link-active-text-decoration: underline;
-  --utrecht-breadcrumb-nav-link-active-color: #163f5b;
-  --utrecht-breadcrumb-nav-link-text-decoration: underline;
-  --utrecht-breadcrumb-nav-link-color: #01689b;
-  --utrecht-breadcrumb-nav-link-icon-size: 24px;
-  --utrecht-breadcrumb-nav-link-icon-margin-inline: 0.25rem;
-  --utrecht-breadcrumb-nav-link-icon-inset-block-start: 0;
-  --utrecht-breadcrumb-nav-link-current-font-weight: 400;
-  --utrecht-breadcrumb-nav-link-current-color: #334155;
-  --utrecht-breadcrumb-nav-link-padding-inline-start: 0rem;
-  --utrecht-breadcrumb-nav-link-padding-inline-end: 0rem;
-  --utrecht-breadcrumb-nav-link-padding-block-start: 0.75rem;
-  --utrecht-breadcrumb-nav-link-padding-block-end: 0.75rem;
-  --utrecht-breadcrumb-nav-divider-size: 24px;
-  --utrecht-breadcrumb-nav-divider-inset-block-start: 0;
-  --utrecht-breadcrumb-nav-divider-color: #334155;
   --utrecht-button-group-row-gap: 0.5rem;
   --utrecht-button-group-padding-block-start: 0px;
   --utrecht-button-group-padding-block-end: 0px;
@@ -1162,75 +1188,25 @@
   --utrecht-form-label-font-weight: 700;
   --utrecht-form-label-font-size: 1.25rem;
   --utrecht-form-label-color: #0F172A;
-  --utrecht-heading-6-margin-block-start: 0rem;
-  --utrecht-heading-6-margin-block-end: 0rem;
-  --utrecht-heading-6-line-height: 150%;
-  --utrecht-heading-6-font-weight: 700;
-  --utrecht-heading-6-font-size: 1.25rem;
-  --utrecht-heading-6-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
-  --utrecht-heading-6-color: #154273;
-  --utrecht-heading-5-margin-block-start: 0rem;
-  --utrecht-heading-5-margin-block-end: 0rem;
-  --utrecht-heading-5-line-height: 150%;
-  --utrecht-heading-5-font-weight: 700;
-  --utrecht-heading-5-font-size: 1.25rem;
-  --utrecht-heading-5-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
-  --utrecht-heading-5-color: #154273;
-  --utrecht-heading-4-margin-block-start: 0rem;
-  --utrecht-heading-4-margin-block-end: 0rem;
-  --utrecht-heading-4-line-height: 150%;
-  --utrecht-heading-4-font-weight: 700;
-  --utrecht-heading-4-font-size: 1.5rem;
-  --utrecht-heading-4-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
-  --utrecht-heading-4-color: #154273;
-  --utrecht-heading-3-margin-block-start: 0rem;
-  --utrecht-heading-3-margin-block-end: 0rem;
-  --utrecht-heading-3-line-height: 125%;
-  --utrecht-heading-3-font-weight: 700;
-  --utrecht-heading-3-font-size: 1.875rem;
-  --utrecht-heading-3-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
-  --utrecht-heading-3-color: #154273;
-  --utrecht-heading-2-margin-block-start: 0rem;
-  --utrecht-heading-2-margin-block-end: 0rem;
-  --utrecht-heading-2-line-height: 125%;
-  --utrecht-heading-2-font-weight: 700;
-  --utrecht-heading-2-font-size: 2.5rem;
-  --utrecht-heading-2-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
-  --utrecht-heading-2-color: #154273;
-  --utrecht-heading-1-margin-block-start: 0rem;
-  --utrecht-heading-1-margin-block-end: 0rem;
-  --utrecht-heading-1-line-height: 125%;
-  --utrecht-heading-1-font-weight: 700;
-  --utrecht-heading-1-font-size: 3.125rem;
-  --utrecht-heading-1-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
-  --utrecht-heading-1-color: #154273;
   --utrecht-icon-inset-block-start: 0rem;
   --utrecht-icon-size: 24px;
   --utrecht-icon-color: inherit;
   --utrecht-link-visited-color: #01689b;
   --utrecht-link-focus-visible-text-decoration-thickness: 0.0625em;
   --utrecht-link-focus-visible-text-decoration: None;
+  --utrecht-link-focus-color: #01689b;
+  --utrecht-link-focus-background-color: transparent;
   --utrecht-link-hover-text-decoration-thickness: 0.1875em;
   --utrecht-link-hover-text-decoration: underline;
   --utrecht-link-hover-color: #15496a;
+  --utrecht-link-active-color: #163f5b;
+  --utrecht-link-icon-size: 24px;
   --utrecht-link-text-underline-offset: 0.125rem;
   --utrecht-link-text-decoration-thickness: 0.0625em;
   --utrecht-link-text-decoration: underline;
   --utrecht-link-column-gap: 0.25rem;
   --utrecht-link-text-decoration-color: inherit;
   --utrecht-link-color: #01689b;
-  --utrecht-link-icon-size: 24px;
-  --utrecht-link-icon-inset-block-start: 0.25rem;
-  --utrecht-link-focus-color: #01689b;
-  --utrecht-link-focus-background-color: transparent;
-  --utrecht-link-focus-text-decoration-thickness: auto;
-  --utrecht-link-focus-text-decoration: None;
-  --utrecht-link-active-color: #163f5b;
-  --utrecht-link-active-text-decoration: None;
-  --utrecht-link-font-size: 1.25rem;
-  --utrecht-link-line-height: 150%;
-  --utrecht-link-font-weight: 400;
-  --utrecht-link-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
   --utrecht-link-list-font-weight: 400;
   --utrecht-link-list-link-text-decoration: None;
   --utrecht-link-list-link-column-gap: 0.5rem;
@@ -1239,8 +1215,6 @@
   --utrecht-link-list-row-gap: 0.5rem;
   --utrecht-link-list-margin-block-start: 0rem;
   --utrecht-link-list-margin-block-end: 0rem;
-  --utrecht-link-list-item-column-gap: 0.5rem;
-  --utrecht-link-list-item-text-decoration: None;
   --utrecht-number-badge-padding-inline: 0.5rem;
   --utrecht-number-badge-padding-block: 0.125rem;
   --utrecht-number-badge-min-inline-size: 24px;
@@ -1257,30 +1231,11 @@
   --utrecht-ordered-list-item-padding-inline-start: 0.5rem;
   --utrecht-ordered-list-item-margin-block-start: 0.25rem;
   --utrecht-ordered-list-item-margin-block-end: 0.25rem;
-  --utrecht-ordered-list-padding-inline-start: 1.5rem;
+  --utrecht-ordered-list-padding-inline-start: 2rem;
   --utrecht-ordered-list-margin-block-start: 0.25rem;
   --utrecht-ordered-list-margin-block-end: 0.25rem;
   --utrecht-ordered-list-line-height: 150%;
   --utrecht-ordered-list-font-size: 1.25rem;
-  --utrecht-ordered-list-margin-inline-start: 0.625rem;
-  --utrecht-ordered-list-font-weight: 400;
-  --utrecht-ordered-list-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
-  --utrecht-ordered-list-color: #0F172A;
-  --utrecht-paragraph-margin-block-start: 0rem;
-  --utrecht-paragraph-margin-block-end: 0rem;
-  --utrecht-paragraph-small-line-height: 150%;
-  --utrecht-paragraph-small-font-weight: 400;
-  --utrecht-paragraph-small-color: #0F172A;
-  --utrecht-paragraph-small-font-size: 1.5rem;
-  --utrecht-paragraph-lead-line-height: 150%;
-  --utrecht-paragraph-lead-font-weight: 400;
-  --utrecht-paragraph-lead-font-size: 1.5rem;
-  --utrecht-paragraph-lead-color: #0F172A;
-  --utrecht-paragraph-line-height: 150%;
-  --utrecht-paragraph-font-weight: 400;
-  --utrecht-paragraph-font-size: 1.25rem;
-  --utrecht-paragraph-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
-  --utrecht-paragraph-color: #0F172A;
   --utrecht-pre-heading-font-size: 1rem;
   --utrecht-pre-heading-line-height: 125%;
   --utrecht-pre-heading-font-weight: 700;
@@ -1519,6 +1474,7 @@
   --utrecht-textbox-hover-border-width: 1px;
   --utrecht-textbox-hover-border-color: #738eab;
   --utrecht-textbox-hover-background-color: #fff;
+  --utrecht-unordered-list-marker-color: #0F172A;
   --utrecht-unordered-list-item-padding-inline-start: 0.5rem;
   --utrecht-unordered-list-item-margin-block-start: 0.25rem;
   --utrecht-unordered-list-item-margin-block-end: 0.25rem;
@@ -1527,11 +1483,6 @@
   --utrecht-unordered-list-margin-block-end: 0.25rem;
   --utrecht-unordered-list-line-height: 150%;
   --utrecht-unordered-list-font-size: 1.25rem;
-  --utrecht-unordered-list-font-weight: 400;
-  --utrecht-unordered-list-font-family: 'Fira Sans', Arial, Verdana, sans-serif;
-  --utrecht-unordered-list-marker-color: #0F172A;
-  --utrecht-unordered-list-marker-border-color: #0F172A;
-  --utrecht-unordered-list-color: #0F172A;
   --utrecht-column-layout-gap: 0.75rem;
   --utrecht-column-layout-column-width: 400px;
   --utrecht-column-layout-column-rule-width: 0px;