@utrecht/design-tokens 4.1.1 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @utrecht/design-tokens
 
+## 4.2.0
+
+### Minor Changes
+
+- f02b554: Corrected several spacing token values and metadata in the Breadcrumb Navigation and Rich Text components.
+- 55988ac: Add hover, focus, and active state tokens for Utrecht navigation toggle button
+
 ## 4.1.1
 
 ### Patch Changes

package/dist/_mixin-theme.scss

@@ -602,9 +602,9 @@
   --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
   --utrecht-root-color: var(--utrecht-color-grey-10);
   --utrecht-root-background-color: var(--utrecht-color-grey-95);
-  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-2xs);
-  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-xs);
-  --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-md);
+  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-xs);
+  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-md);
+  --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-xl);
   --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
   --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
   --utrecht-radio-button-disabled-border-color: var(--utrecht-color-grey-80);
@@ -995,6 +995,7 @@
   --utrecht-button-color: var(--utrecht-color-grey-40);
   --utrecht-button-border-color: var(--utrecht-color-grey-40);
   --utrecht-button-background-color: var(--utrecht-color-white);
+  --utrecht-breadcrumb-nav-margin-block-end: var(--utrecht-space-block-2xl);
   --utrecht-breadcrumb-nav-arrows-link-color: var(--utrecht-color-black);
   --utrecht-breadcrumb-nav-arrows-link-focus-color: var(--utrecht-color-black);
   --utrecht-breadcrumb-nav-arrows-link-background-color: var(--utrecht-color-grey-90);

package/dist/_mixin.scss

@@ -602,9 +602,9 @@
   --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
   --utrecht-root-color: var(--utrecht-color-grey-10);
   --utrecht-root-background-color: var(--utrecht-color-grey-95);
-  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-2xs);
-  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-xs);
-  --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-md);
+  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-xs);
+  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-md);
+  --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-xl);
   --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
   --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
   --utrecht-radio-button-disabled-border-color: var(--utrecht-color-grey-80);
@@ -995,6 +995,7 @@
   --utrecht-button-color: var(--utrecht-color-grey-40);
   --utrecht-button-border-color: var(--utrecht-color-grey-40);
   --utrecht-button-background-color: var(--utrecht-color-white);
+  --utrecht-breadcrumb-nav-margin-block-end: var(--utrecht-space-block-2xl);
   --utrecht-breadcrumb-nav-arrows-link-color: var(--utrecht-color-black);
   --utrecht-breadcrumb-nav-arrows-link-focus-color: var(--utrecht-color-black);
   --utrecht-breadcrumb-nav-arrows-link-background-color: var(--utrecht-color-grey-90);

package/dist/_variables.scss

@@ -600,9 +600,9 @@ $utrecht-search-bar-button-border-color: $utrecht-color-red-40;
 $utrecht-search-bar-button-background-color: $utrecht-color-red-40;
 $utrecht-root-color: $utrecht-color-grey-10;
 $utrecht-root-background-color: $utrecht-color-grey-95;
-$utrecht-rich-text-best-friend-margin-block-end: $utrecht-space-block-2xs;
-$utrecht-rich-text-friend-margin-block-end: $utrecht-space-block-xs;
-$utrecht-rich-text-acquaintance-margin-block-end: $utrecht-space-block-md;
+$utrecht-rich-text-best-friend-margin-block-end: $utrecht-space-block-xs;
+$utrecht-rich-text-friend-margin-block-end: $utrecht-space-block-md;
+$utrecht-rich-text-acquaintance-margin-block-end: $utrecht-space-block-xl;
 $utrecht-rich-text-stranger-margin-block-end: $utrecht-space-block-2xl;
 $utrecht-radio-button-disabled-color: $utrecht-color-white;
 $utrecht-radio-button-disabled-border-color: $utrecht-color-grey-80;
@@ -993,6 +993,7 @@ $utrecht-button-column-gap: $utrecht-space-text-xs;
 $utrecht-button-color: $utrecht-color-grey-40;
 $utrecht-button-border-color: $utrecht-color-grey-40;
 $utrecht-button-background-color: $utrecht-color-white;
+$utrecht-breadcrumb-nav-margin-block-end: $utrecht-space-block-2xl;
 $utrecht-breadcrumb-nav-arrows-link-color: $utrecht-color-black;
 $utrecht-breadcrumb-nav-arrows-link-focus-color: $utrecht-color-black;
 $utrecht-breadcrumb-nav-arrows-link-background-color: $utrecht-color-grey-90;

package/dist/dark/_mixin-theme.scss

@@ -606,9 +606,9 @@
   --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
   --utrecht-root-color: var(--utrecht-color-grey-10);
   --utrecht-root-background-color: var(--utrecht-color-grey-95);
-  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-2xs);
-  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-xs);
-  --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-md);
+  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-xs);
+  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-md);
+  --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-xl);
   --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
   --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
   --utrecht-radio-button-disabled-border-color: var(--utrecht-color-grey-80);
@@ -995,6 +995,7 @@
   --utrecht-button-color: var(--utrecht-color-grey-80);
   --utrecht-button-border-color: var(--utrecht-color-grey-40);
   --utrecht-button-background-color: var(--utrecht-color-grey-30);
+  --utrecht-breadcrumb-nav-margin-block-end: var(--utrecht-space-block-2xl);
   --utrecht-breadcrumb-nav-arrows-link-color: var(--utrecht-color-black);
   --utrecht-breadcrumb-nav-arrows-link-focus-color: var(--utrecht-color-black);
   --utrecht-breadcrumb-nav-arrows-link-background-color: var(--utrecht-color-grey-90);

package/dist/dark/_mixin.scss

@@ -606,9 +606,9 @@
   --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
   --utrecht-root-color: var(--utrecht-color-grey-10);
   --utrecht-root-background-color: var(--utrecht-color-grey-95);
-  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-2xs);
-  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-xs);
-  --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-md);
+  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-xs);
+  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-md);
+  --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-xl);
   --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
   --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
   --utrecht-radio-button-disabled-border-color: var(--utrecht-color-grey-80);
@@ -995,6 +995,7 @@
   --utrecht-button-color: var(--utrecht-color-grey-80);
   --utrecht-button-border-color: var(--utrecht-color-grey-40);
   --utrecht-button-background-color: var(--utrecht-color-grey-30);
+  --utrecht-breadcrumb-nav-margin-block-end: var(--utrecht-space-block-2xl);
   --utrecht-breadcrumb-nav-arrows-link-color: var(--utrecht-color-black);
   --utrecht-breadcrumb-nav-arrows-link-focus-color: var(--utrecht-color-black);
   --utrecht-breadcrumb-nav-arrows-link-background-color: var(--utrecht-color-grey-90);

package/dist/dark/_variables.scss

@@ -604,9 +604,9 @@ $utrecht-search-bar-button-border-color: $utrecht-color-red-40;
 $utrecht-search-bar-button-background-color: $utrecht-color-red-40;
 $utrecht-root-color: $utrecht-color-grey-10;
 $utrecht-root-background-color: $utrecht-color-grey-95;
-$utrecht-rich-text-best-friend-margin-block-end: $utrecht-space-block-2xs;
-$utrecht-rich-text-friend-margin-block-end: $utrecht-space-block-xs;
-$utrecht-rich-text-acquaintance-margin-block-end: $utrecht-space-block-md;
+$utrecht-rich-text-best-friend-margin-block-end: $utrecht-space-block-xs;
+$utrecht-rich-text-friend-margin-block-end: $utrecht-space-block-md;
+$utrecht-rich-text-acquaintance-margin-block-end: $utrecht-space-block-xl;
 $utrecht-rich-text-stranger-margin-block-end: $utrecht-space-block-2xl;
 $utrecht-radio-button-disabled-color: $utrecht-color-white;
 $utrecht-radio-button-disabled-border-color: $utrecht-color-grey-80;
@@ -993,6 +993,7 @@ $utrecht-button-column-gap: $utrecht-space-text-xs;
 $utrecht-button-color: $utrecht-color-grey-80;
 $utrecht-button-border-color: $utrecht-color-grey-40;
 $utrecht-button-background-color: $utrecht-color-grey-30;
+$utrecht-breadcrumb-nav-margin-block-end: $utrecht-space-block-2xl;
 $utrecht-breadcrumb-nav-arrows-link-color: $utrecht-color-black;
 $utrecht-breadcrumb-nav-arrows-link-focus-color: $utrecht-color-black;
 $utrecht-breadcrumb-nav-arrows-link-background-color: $utrecht-color-grey-90;

package/dist/dark/index.cjs

@@ -117,6 +117,7 @@ module.exports = {
   "utrechtBreadcrumbNavArrowsLinkFocusBackgroundColor": "hsl(48 100% 60%)",
   "utrechtBreadcrumbNavArrowsLinkFocusColor": "hsl(0 0% 0%)",
   "utrechtBreadcrumbNavArrowsLinkColor": "hsl(0 0% 0%)",
+  "utrechtBreadcrumbNavMarginBlockEnd": "32px",
   "utrechtBreadcrumbNavDividerInlineSize": "1px",
   "utrechtButtonBackgroundColor": "hsl(0 0% 30%)",
   "utrechtButtonBorderColor": "hsl(0 0% 40%)",
@@ -893,9 +894,9 @@ module.exports = {
   "utrechtRadioButtonInvalidBorderWidth": "2px",
   "utrechtRadioButtonBorderRadius": "0",
   "utrechtRichTextStrangerMarginBlockEnd": "32px",
-  "utrechtRichTextAcquaintanceMarginBlockEnd": "16px",
-  "utrechtRichTextFriendMarginBlockEnd": "8px",
-  "utrechtRichTextBestFriendMarginBlockEnd": "4px",
+  "utrechtRichTextAcquaintanceMarginBlockEnd": "24px",
+  "utrechtRichTextFriendMarginBlockEnd": "16px",
+  "utrechtRichTextBestFriendMarginBlockEnd": "8px",
   "utrechtRichTextConfidantMarginBlockEnd": 0,
   "utrechtRootBackgroundColor": "hsl(0 0% 95%)",
   "utrechtRootColor": "hsl(0 0% 10%)",

package/dist/dark/index.css

@@ -611,9 +611,9 @@
   --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
   --utrecht-root-color: var(--utrecht-color-grey-10);
   --utrecht-root-background-color: var(--utrecht-color-grey-95);
-  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-2xs);
-  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-xs);
-  --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-md);
+  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-xs);
+  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-md);
+  --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-xl);
   --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
   --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
   --utrecht-radio-button-disabled-border-color: var(--utrecht-color-grey-80);
@@ -1000,6 +1000,7 @@
   --utrecht-button-color: var(--utrecht-color-grey-80);
   --utrecht-button-border-color: var(--utrecht-color-grey-40);
   --utrecht-button-background-color: var(--utrecht-color-grey-30);
+  --utrecht-breadcrumb-nav-margin-block-end: var(--utrecht-space-block-2xl);
   --utrecht-breadcrumb-nav-arrows-link-color: var(--utrecht-color-black);
   --utrecht-breadcrumb-nav-arrows-link-focus-color: var(--utrecht-color-black);
   --utrecht-breadcrumb-nav-arrows-link-background-color: var(--utrecht-color-grey-90);

package/dist/dark/index.d.ts

@@ -126,6 +126,7 @@ export const utrechtBreadcrumbNavArrowsLinkBackgroundColor : string;
 export const utrechtBreadcrumbNavArrowsLinkFocusBackgroundColor : string;
 export const utrechtBreadcrumbNavArrowsLinkFocusColor : string;
 export const utrechtBreadcrumbNavArrowsLinkColor : string;
+export const utrechtBreadcrumbNavMarginBlockEnd : string;
 export const utrechtBreadcrumbNavDividerInlineSize : string;
 export const utrechtButtonBackgroundColor : string;
 export const utrechtButtonBorderColor : string;

package/dist/dark/index.flat.json

@@ -239,6 +239,7 @@
   "utrechtBreadcrumbNavLinkHoverTextDecoration": "underline",
   "utrechtBreadcrumbNavLinkIconSize": "16px",
   "utrechtBreadcrumbNavLinkTextDecoration": "none",
+  "utrechtBreadcrumbNavMarginBlockEnd": "32px",
   "utrechtBreadcrumbNavMinBlockSize": "34px",
   "utrechtBreadcrumbNavSeparatorColor": "hsl(211 60% 35%)",
   "utrechtBreadcrumbNavSeparatorIconSize": "0.875rem",
@@ -993,10 +994,10 @@
   "utrechtRadioButtonInvalidBorderWidth": "2px",
   "utrechtRadioButtonMarginInlineEnd": "12px",
   "utrechtRadioButtonSize": "24px",
-  "utrechtRichTextAcquaintanceMarginBlockEnd": "16px",
-  "utrechtRichTextBestFriendMarginBlockEnd": "4px",
+  "utrechtRichTextAcquaintanceMarginBlockEnd": "24px",
+  "utrechtRichTextBestFriendMarginBlockEnd": "8px",
   "utrechtRichTextConfidantMarginBlockEnd": 0,
-  "utrechtRichTextFriendMarginBlockEnd": "8px",
+  "utrechtRichTextFriendMarginBlockEnd": "16px",
   "utrechtRichTextStrangerMarginBlockEnd": "32px",
   "utrechtRootBackgroundColor": "hsl(0 0% 95%)",
   "utrechtRootColor": "hsl(0 0% 10%)",

package/dist/dark/index.json

@@ -6356,6 +6356,21 @@
       "text-decoration"
     ]
   },
+  {
+    "value": "32px",
+    "filePath": "src/component/utrecht/breadcrumb-nav.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{utrecht.space.block.2xl}"
+    },
+    "name": "utrechtBreadcrumbNavMarginBlockEnd",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "breadcrumb-nav",
+      "margin-block-end"
+    ]
+  },
   {
     "$extensions": {
       "nl.nldesignsystem.css.property": {
@@ -29553,7 +29568,7 @@
       }
     },
     "type": "dimension",
-    "value": "16px",
+    "value": "24px",
     "filePath": "src/component/utrecht/rich-text.tokens.json",
     "isSource": true,
     "original": {
@@ -29568,7 +29583,7 @@
         }
       },
       "type": "dimension",
-      "value": "{utrecht.space.block.md}"
+      "value": "{utrecht.space.block.xl}"
     },
     "name": "utrechtRichTextAcquaintanceMarginBlockEnd",
     "attributes": {},
@@ -29591,7 +29606,7 @@
       }
     },
     "type": "dimension",
-    "value": "4px",
+    "value": "8px",
     "filePath": "src/component/utrecht/rich-text.tokens.json",
     "isSource": true,
     "original": {
@@ -29606,7 +29621,7 @@
         }
       },
       "type": "dimension",
-      "value": "{utrecht.space.block.2xs}"
+      "value": "{utrecht.space.block.xs}"
     },
     "name": "utrechtRichTextBestFriendMarginBlockEnd",
     "attributes": {},
@@ -29667,7 +29682,7 @@
       }
     },
     "type": "dimension",
-    "value": "8px",
+    "value": "16px",
     "filePath": "src/component/utrecht/rich-text.tokens.json",
     "isSource": true,
     "original": {
@@ -29682,7 +29697,7 @@
         }
       },
       "type": "dimension",
-      "value": "{utrecht.space.block.xs}"
+      "value": "{utrecht.space.block.md}"
     },
     "name": "utrechtRichTextFriendMarginBlockEnd",
     "attributes": {},

package/dist/dark/index.mjs

@@ -116,6 +116,7 @@ export const utrechtBreadcrumbNavArrowsLinkBackgroundColor = "hsl(0 0% 90%)";
 export const utrechtBreadcrumbNavArrowsLinkFocusBackgroundColor = "hsl(48 100% 60%)";
 export const utrechtBreadcrumbNavArrowsLinkFocusColor = "hsl(0 0% 0%)";
 export const utrechtBreadcrumbNavArrowsLinkColor = "hsl(0 0% 0%)";
+export const utrechtBreadcrumbNavMarginBlockEnd = "32px";
 export const utrechtBreadcrumbNavDividerInlineSize = "1px";
 export const utrechtButtonBackgroundColor = "hsl(0 0% 30%)";
 export const utrechtButtonBorderColor = "hsl(0 0% 40%)";
@@ -892,9 +893,9 @@ export const utrechtRadioButtonInvalidBorderColor = "#990000";
 export const utrechtRadioButtonInvalidBorderWidth = "2px";
 export const utrechtRadioButtonBorderRadius = "0";
 export const utrechtRichTextStrangerMarginBlockEnd = "32px";
-export const utrechtRichTextAcquaintanceMarginBlockEnd = "16px";
-export const utrechtRichTextFriendMarginBlockEnd = "8px";
-export const utrechtRichTextBestFriendMarginBlockEnd = "4px";
+export const utrechtRichTextAcquaintanceMarginBlockEnd = "24px";
+export const utrechtRichTextFriendMarginBlockEnd = "16px";
+export const utrechtRichTextBestFriendMarginBlockEnd = "8px";
 export const utrechtRichTextConfidantMarginBlockEnd = 0;
 export const utrechtRootBackgroundColor = "hsl(0 0% 95%)";
 export const utrechtRootColor = "hsl(0 0% 10%)";

package/dist/dark/index.tokens.json

@@ -1006,6 +1006,16 @@
         },
         "padding-block-start": "8px",
         "padding-block-end": "8px",
+        "margin-block-end": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        },
         "padding-inline-end": "8px",
         "padding-inline-start": "8px"
       },
@@ -1057,6 +1067,7 @@
           "color": "hsl(0 0% 0%)"
         }
       },
+      "margin-block-end": "32px",
       "divider": {
         "inline-size": "1px"
       }
@@ -5374,6 +5385,102 @@
             "nl.nldesignsystem.figma.supports-token": false
           },
           "type": "spacing"
+        },
+        "hover": {
+          "color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "color"
+          },
+          "border-color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "color"
+          },
+          "background-color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "color"
+          }
+        },
+        "focus": {
+          "color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "color"
+          },
+          "border-color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "color"
+          },
+          "background-color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "color"
+          }
+        },
+        "active": {
+          "color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "color"
+          },
+          "border-color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "color"
+          },
+          "background-color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "color"
+          }
         }
       }
     },
@@ -6396,13 +6503,13 @@
         "margin-block-end": "32px"
       },
       "acquaintance": {
-        "margin-block-end": "16px"
+        "margin-block-end": "24px"
       },
       "friend": {
-        "margin-block-end": "8px"
+        "margin-block-end": "16px"
       },
       "best-friend": {
-        "margin-block-end": "4px"
+        "margin-block-end": "8px"
       },
       "confidant": {
         "margin-block-end": 0

package/dist/dark/list.json

@@ -6356,6 +6356,21 @@
       "text-decoration"
     ]
   },
+  {
+    "value": "32px",
+    "filePath": "src/component/utrecht/breadcrumb-nav.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{utrecht.space.block.2xl}"
+    },
+    "name": "utrechtBreadcrumbNavMarginBlockEnd",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "breadcrumb-nav",
+      "margin-block-end"
+    ]
+  },
   {
     "$extensions": {
       "nl.nldesignsystem.css.property": {
@@ -29553,7 +29568,7 @@
       }
     },
     "type": "dimension",
-    "value": "16px",
+    "value": "24px",
     "filePath": "src/component/utrecht/rich-text.tokens.json",
     "isSource": true,
     "original": {
@@ -29568,7 +29583,7 @@
         }
       },
       "type": "dimension",
-      "value": "{utrecht.space.block.md}"
+      "value": "{utrecht.space.block.xl}"
     },
     "name": "utrechtRichTextAcquaintanceMarginBlockEnd",
     "attributes": {},
@@ -29591,7 +29606,7 @@
       }
     },
     "type": "dimension",
-    "value": "4px",
+    "value": "8px",
     "filePath": "src/component/utrecht/rich-text.tokens.json",
     "isSource": true,
     "original": {
@@ -29606,7 +29621,7 @@
         }
       },
       "type": "dimension",
-      "value": "{utrecht.space.block.2xs}"
+      "value": "{utrecht.space.block.xs}"
     },
     "name": "utrechtRichTextBestFriendMarginBlockEnd",
     "attributes": {},
@@ -29667,7 +29682,7 @@
       }
     },
     "type": "dimension",
-    "value": "8px",
+    "value": "16px",
     "filePath": "src/component/utrecht/rich-text.tokens.json",
     "isSource": true,
     "original": {
@@ -29682,7 +29697,7 @@
         }
       },
       "type": "dimension",
-      "value": "{utrecht.space.block.xs}"
+      "value": "{utrecht.space.block.md}"
     },
     "name": "utrechtRichTextFriendMarginBlockEnd",
     "attributes": {},

package/dist/dark/list.mjs

@@ -6356,6 +6356,21 @@ export default [
       "text-decoration"
     ]
   },
+  {
+    "value": "32px",
+    "filePath": "src/component/utrecht/breadcrumb-nav.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{utrecht.space.block.2xl}"
+    },
+    "name": "utrechtBreadcrumbNavMarginBlockEnd",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "breadcrumb-nav",
+      "margin-block-end"
+    ]
+  },
   {
     "$extensions": {
       "nl.nldesignsystem.css.property": {
@@ -29553,7 +29568,7 @@ export default [
       }
     },
     "type": "dimension",
-    "value": "16px",
+    "value": "24px",
     "filePath": "src/component/utrecht/rich-text.tokens.json",
     "isSource": true,
     "original": {
@@ -29568,7 +29583,7 @@ export default [
         }
       },
       "type": "dimension",
-      "value": "{utrecht.space.block.md}"
+      "value": "{utrecht.space.block.xl}"
     },
     "name": "utrechtRichTextAcquaintanceMarginBlockEnd",
     "attributes": {},
@@ -29591,7 +29606,7 @@ export default [
       }
     },
     "type": "dimension",
-    "value": "4px",
+    "value": "8px",
     "filePath": "src/component/utrecht/rich-text.tokens.json",
     "isSource": true,
     "original": {
@@ -29606,7 +29621,7 @@ export default [
         }
       },
       "type": "dimension",
-      "value": "{utrecht.space.block.2xs}"
+      "value": "{utrecht.space.block.xs}"
     },
     "name": "utrechtRichTextBestFriendMarginBlockEnd",
     "attributes": {},
@@ -29667,7 +29682,7 @@ export default [
       }
     },
     "type": "dimension",
-    "value": "8px",
+    "value": "16px",
     "filePath": "src/component/utrecht/rich-text.tokens.json",
     "isSource": true,
     "original": {
@@ -29682,7 +29697,7 @@ export default [
         }
       },
       "type": "dimension",
-      "value": "{utrecht.space.block.xs}"
+      "value": "{utrecht.space.block.md}"
     },
     "name": "utrechtRichTextFriendMarginBlockEnd",
     "attributes": {},

package/dist/dark/root.css

@@ -536,9 +536,9 @@
   --utrecht-root-color: var(--utrecht-color-grey-10);
   --utrecht-root-background-color: var(--utrecht-color-grey-95);
   --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
-  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-xs);
-  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-2xs);
-  --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-md);
+  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-md);
+  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-xs);
+  --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-xl);
   --utrecht-radio-button-hover-background-color: var(--utrecht-color-blue-90);
   --utrecht-radio-button-focus-border-color: var(--utrecht-color-blue-40);
   --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
@@ -910,6 +910,7 @@
   --utrecht-button-active-background-color: var(--utrecht-color-grey-40);
   --utrecht-breadcrumb-nav-separator-icon-size: var(--utrecht-typography-scale-sm-font-size);
   --utrecht-breadcrumb-nav-separator-color: var(--utrecht-color-blue-35);
+  --utrecht-breadcrumb-nav-margin-block-end: var(--utrecht-space-block-2xl);
   --utrecht-breadcrumb-nav-link-icon-size: var(--utrecht-icon-scale-md);
   --utrecht-breadcrumb-nav-link-hover-color: var(--utrecht-color-blue-40);
   --utrecht-breadcrumb-nav-link-focus-color: var(--utrecht-color-blue-40);

package/dist/dark/theme-prince-xml.css

@@ -606,9 +606,9 @@
   --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
   --utrecht-root-color: var(--utrecht-color-grey-10);
   --utrecht-root-background-color: var(--utrecht-color-grey-95);
-  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-2xs);
-  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-xs);
-  --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-md);
+  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-xs);
+  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-md);
+  --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-xl);
   --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
   --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
   --utrecht-radio-button-disabled-border-color: var(--utrecht-color-grey-80);
@@ -995,6 +995,7 @@
   --utrecht-button-color: var(--utrecht-color-grey-80);
   --utrecht-button-border-color: var(--utrecht-color-grey-40);
   --utrecht-button-background-color: var(--utrecht-color-grey-30);
+  --utrecht-breadcrumb-nav-margin-block-end: var(--utrecht-space-block-2xl);
   --utrecht-breadcrumb-nav-arrows-link-color: var(--utrecht-color-black);
   --utrecht-breadcrumb-nav-arrows-link-focus-color: var(--utrecht-color-black);
   --utrecht-breadcrumb-nav-arrows-link-background-color: var(--utrecht-color-grey-90);