style: breadcrumb navigation tokens amsterdam community component - Voorbeeld (#1278)

De volgende tokens zijn toegevoegd voor de Breadcrumb Navigation
component van Amsterdam:

- `ams.breadcrumb.font-family`
- `ams.breadcrumb.font-size`
- `ams.breadcrumb.font-weight`
- `ams.breadcrumb.line-height`
- `ams.breadcrumb.separator.background-image`
- `ams.breadcrumb.separator.block-size`
- `ams.breadcrumb.separator.inline-size`
- `ams.breadcrumb.separator.margin-inline`
- `ams.breadcrumb.link.color`
- `ams.breadcrumb.link.outline-offset`
- `ams.breadcrumb.link.text-decoration-line`
- `ams.breadcrumb.link.text-underline-offset`
- `ams.breadcrumb.link.text-decoration-thickness`
- `ams.breadcrumb.link.hover.color`
- `ams.breadcrumb.link.hover.text-decoration-line`

Author: jeffreylauwers

.changeset/breadcrumb-navigation-tokens-voorbeeld.md

@@ -0,0 +1,21 @@
+---
+"@nl-design-system-unstable/voorbeeld-design-tokens": minor
+---
+
+De volgende tokens zijn toegevoegd voor de Breadcrumb Navigation component van Amsterdam:
+
+- `ams.breadcrumb.font-family`
+- `ams.breadcrumb.font-size`
+- `ams.breadcrumb.font-weight`
+- `ams.breadcrumb.line-height`
+- `ams.breadcrumb.separator.background-image`
+- `ams.breadcrumb.separator.block-size`
+- `ams.breadcrumb.separator.inline-size`
+- `ams.breadcrumb.separator.margin-inline`
+- `ams.breadcrumb.link.color`
+- `ams.breadcrumb.link.outline-offset`
+- `ams.breadcrumb.link.text-decoration-line`
+- `ams.breadcrumb.link.text-underline-offset`
+- `ams.breadcrumb.link.text-decoration-thickness`
+- `ams.breadcrumb.link.hover.color`
+- `ams.breadcrumb.link.hover.text-decoration-line`

packages/voorbeeld-design-tokens/figma/voorbeeld.tokens.json

@@ -3426,6 +3426,82 @@
       }
     }
   },
+  "components/breadcrumb-nav/amsterdam": {
+    "ams": {
+      "breadcrumb": {
+        "font-family": {
+          "$type": "fontFamilies",
+          "$value": "{basis.text.font-family.default}"
+        },
+        "font-size": {
+          "$type": "fontSizes",
+          "$value": "{basis.text.font-size.md}"
+        },
+        "font-weight": {
+          "$type": "fontWeights",
+          "$value": "{basis.text.font-weight.default}"
+        },
+        "line-height": {
+          "$type": "lineHeights",
+          "$value": "{basis.text.line-height.md}"
+        },
+        "separator": {
+          "background-image": {
+            "$type": "other",
+            "$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>\")",
+            "$description": "[code-only]"
+          },
+          "block-size": {
+            "$type": "dimension",
+            "$value": "0.750rem"
+          },
+          "inline-size": {
+            "$type": "dimension",
+            "$value": "0.750rem"
+          },
+          "margin-inline": {
+            "$type": "dimension",
+            "$value": "{basis.space.column.lg}"
+          }
+        },
+        "link": {
+          "color": {
+            "$type": "color",
+            "$value": "{basis.color.action-2.color-default}"
+          },
+          "outline-offset": {
+            "$type": "other",
+            "$value": "auto",
+            "$description": "[code-only]"
+          },
+          "text-decoration-line": {
+            "$type": "textDecoration",
+            "$value": "underline"
+          },
+          "text-underline-offset": {
+            "$type": "other",
+            "$value": "auto",
+            "$description": "[code-only]"
+          },
+          "text-decoration-thickness": {
+            "$type": "other",
+            "$value": "auto",
+            "$description": "[code-only]"
+          },
+          "hover": {
+            "color": {
+              "$type": "color",
+              "$value": "{basis.color.action-2.color-hover}"
+            },
+            "text-decoration-line": {
+              "$type": "textDecoration",
+              "$value": "None"
+            }
+          }
+        }
+      }
+    }
+  },
   "components/breadcrumb-nav/utrecht": {
     "utrecht": {
       "breadcrumb-nav": {
@@ -14690,6 +14766,7 @@
       "components/avatar",
       "components/backdrop",
       "components/blockquote",
+      "components/breadcrumb-nav/amsterdam",
       "components/breadcrumb-nav/utrecht",
       "components/breadcrumb-nav/todo",
       "components/button/nl",