style: navigation list tokens rhc community component - Voorbeeld (#1275)

De volgende tokens zijn toegevoegd aan Navigation List component:

- `rhc.navigation-list.item.background-color`
- `rhc.navigation-list.item.border-color`
- `rhc.navigation-list.item.border-width`
- `rhc.navigation-list.item.column-gap`
- `rhc.navigation-list.item.min-height`
- `rhc.navigation-list.item.padding-block`
- `rhc.navigation-list.item.padding-inline`
- `rhc.navigation-list.item.active.background-color`
- `rhc.navigation-list.item.hover.background-color`
- `rhc.navigation-list.item.focus.background-color`
- `rhc.navigation-list.item.content.column-gap`
- `rhc.navigation-list.item.content.row-gap`
- `rhc.navigation-list.item.description.color`
- `rhc.navigation-list.item.description.font-size`
- `rhc.navigation-list.item.description.line-height`
- `rhc.navigation-list.item.icon-end.color`
- `rhc.navigation-list.item.icon-start.background-color`
- `rhc.navigation-list.item.icon-start.border-radius`
- `rhc.navigation-list.item.icon-start.color`
- `rhc.navigation-list.item.icon-start.padding-block`
- `rhc.navigation-list.item.icon-start.padding-inline`
- `rhc.navigation-list.item.icon-start.size`
- `rhc.navigation-list.item.label.color`
- `rhc.navigation-list.item.label.font-family`
- `rhc.navigation-list.item.label.font-size`
- `rhc.navigation-list.item.label.font-weight`
- `rhc.navigation-list.item.label.line-height`

Author: jeffreylauwers

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

@@ -0,0 +1,33 @@
+---
+"@nl-design-system-unstable/voorbeeld-design-tokens": minor
+---
+
+De volgende tokens zijn toegevoegd aan Navigation List component:
+
+- `rhc.navigation-list.item.background-color`
+- `rhc.navigation-list.item.border-color`
+- `rhc.navigation-list.item.border-width`
+- `rhc.navigation-list.item.column-gap`
+- `rhc.navigation-list.item.min-height`
+- `rhc.navigation-list.item.padding-block`
+- `rhc.navigation-list.item.padding-inline`
+- `rhc.navigation-list.item.active.background-color`
+- `rhc.navigation-list.item.hover.background-color`
+- `rhc.navigation-list.item.focus.background-color`
+- `rhc.navigation-list.item.content.column-gap`
+- `rhc.navigation-list.item.content.row-gap`
+- `rhc.navigation-list.item.description.color`
+- `rhc.navigation-list.item.description.font-size`
+- `rhc.navigation-list.item.description.line-height`
+- `rhc.navigation-list.item.icon-end.color`
+- `rhc.navigation-list.item.icon-start.background-color`
+- `rhc.navigation-list.item.icon-start.border-radius`
+- `rhc.navigation-list.item.icon-start.color`
+- `rhc.navigation-list.item.icon-start.padding-block`
+- `rhc.navigation-list.item.icon-start.padding-inline`
+- `rhc.navigation-list.item.icon-start.size`
+- `rhc.navigation-list.item.label.color`
+- `rhc.navigation-list.item.label.font-family`
+- `rhc.navigation-list.item.label.font-size`
+- `rhc.navigation-list.item.label.font-weight`
+- `rhc.navigation-list.item.label.line-height`

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

@@ -8432,6 +8432,140 @@
       }
     }
   },
+  "components/navigation-list": {
+    "rhc": {
+      "navigation-list": {
+        "item": {
+          "background-color": {
+            "$type": "color",
+            "$value": "{basis.color.transparent}"
+          },
+          "border-color": {
+            "$type": "color",
+            "$value": "{basis.color.default.border-subtle}"
+          },
+          "border-width": {
+            "$type": "dimension",
+            "$value": "{basis.border-width.sm}"
+          },
+          "column-gap": {
+            "$type": "dimension",
+            "$value": "{basis.space.column.xl}"
+          },
+          "min-height": {
+            "$type": "dimension",
+            "$value": "{basis.pointer-target.min-block-size}"
+          },
+          "padding-block": {
+            "$type": "dimension",
+            "$value": "{basis.space.block.lg}"
+          },
+          "padding-inline": {
+            "$type": "dimension",
+            "$value": "{basis.space.inline.xl}"
+          },
+          "active": {
+            "background-color": {
+              "$type": "color",
+              "$value": "{basis.color.default.bg-active}"
+            }
+          },
+          "hover": {
+            "background-color": {
+              "$type": "color",
+              "$value": "{basis.color.default.bg-hover}"
+            }
+          },
+          "focus": {
+            "background-color": {
+              "$type": "color",
+              "$value": "{basis.color.transparent}"
+            }
+          },
+          "content": {
+            "column-gap": {
+              "$type": "dimension",
+              "$value": "{basis.space.column.md}",
+              "$description": "[code-only]"
+            },
+            "row-gap": {
+              "$type": "dimension",
+              "$value": "{basis.space.row.sm}",
+              "$description": "[code-only]"
+            }
+          },
+          "description": {
+            "color": {
+              "$type": "color",
+              "$value": "{basis.color.default.color-subtle}"
+            },
+            "font-size": {
+              "$type": "fontSizes",
+              "$value": "{basis.text.font-size.md}"
+            },
+            "line-height": {
+              "$type": "lineHeights",
+              "$value": "{basis.text.line-height.md}"
+            }
+          },
+          "icon-end": {
+            "color": {
+              "$type": "color",
+              "$value": "{basis.color.action-2.color-default}"
+            }
+          },
+          "icon-start": {
+            "background-color": {
+              "$type": "color",
+              "$value": "{basis.color.accent-1-inverse.bg-default}"
+            },
+            "border-radius": {
+              "$type": "dimension",
+              "$value": "{basis.border-radius.round}"
+            },
+            "color": {
+              "$type": "color",
+              "$value": "{basis.color.accent-1-inverse.color-default}"
+            },
+            "padding-block": {
+              "$type": "dimension",
+              "$value": "{basis.space.block.md}"
+            },
+            "padding-inline": {
+              "$type": "dimension",
+              "$value": "{basis.space.inline.md}"
+            },
+            "size": {
+              "$type": "dimension",
+              "$value": "{basis.size.icon.md}"
+            }
+          },
+          "label": {
+            "color": {
+              "$type": "color",
+              "$value": "{basis.heading.color}"
+            },
+            "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.bold}"
+            },
+            "line-height": {
+              "$type": "lineHeights",
+              "$value": "{basis.text.line-height.md}"
+            }
+          }
+        }
+      }
+    }
+  },
   "components/note": {
     "utrecht": {
       "spotlight-section": {
@@ -14611,6 +14745,7 @@
       "components/mark/utrecht",
       "components/modal-dialog",
       "components/navigation-bar",
+      "components/navigation-list",
       "components/note",
       "components/number-badge/nl",
       "components/number-badge/utrecht",