Skip to content

Commit 86bcbf7

Browse files
jeffreylauwersjeffreylauwers
authored
style: navigation list tokens rhc community component (#1263)
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`
1 parent 38fabb0 commit 86bcbf7

File tree

2 files changed

+168
-0
lines changed

2 files changed

+168
-0
lines changed

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
"@nl-design-system-unstable/start-design-tokens": minor
3+
---
4+
5+
De volgende tokens zijn toegevoegd aan Navigation List component:
6+
7+
- `rhc.navigation-list.item.background-color`
8+
- `rhc.navigation-list.item.border-color`
9+
- `rhc.navigation-list.item.border-width`
10+
- `rhc.navigation-list.item.column-gap`
11+
- `rhc.navigation-list.item.min-height`
12+
- `rhc.navigation-list.item.padding-block`
13+
- `rhc.navigation-list.item.padding-inline`
14+
- `rhc.navigation-list.item.active.background-color`
15+
- `rhc.navigation-list.item.hover.background-color`
16+
- `rhc.navigation-list.item.focus.background-color`
17+
- `rhc.navigation-list.item.content.column-gap`
18+
- `rhc.navigation-list.item.content.row-gap`
19+
- `rhc.navigation-list.item.description.color`
20+
- `rhc.navigation-list.item.description.font-size`
21+
- `rhc.navigation-list.item.description.line-height`
22+
- `rhc.navigation-list.item.icon-end.color`
23+
- `rhc.navigation-list.item.icon-start.background-color`
24+
- `rhc.navigation-list.item.icon-start.border-radius`
25+
- `rhc.navigation-list.item.icon-start.color`
26+
- `rhc.navigation-list.item.icon-start.padding-block`
27+
- `rhc.navigation-list.item.icon-start.padding-inline`
28+
- `rhc.navigation-list.item.icon-start.size`
29+
- `rhc.navigation-list.item.label.color`
30+
- `rhc.navigation-list.item.label.font-family`
31+
- `rhc.navigation-list.item.label.font-size`
32+
- `rhc.navigation-list.item.label.font-weight`
33+
- `rhc.navigation-list.item.label.line-height`

‎packages/start-design-tokens/figma/start.tokens.json‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8185,6 +8185,140 @@
81858185
}
81868186
}
81878187
},
8188+
"components/navigation-list": {
8189+
"rhc": {
8190+
"navigation-list": {
8191+
"item": {
8192+
"background-color": {
8193+
"$type": "color",
8194+
"$value": "{basis.color.transparent}"
8195+
},
8196+
"border-color": {
8197+
"$type": "color",
8198+
"$value": "{basis.color.default.border-subtle}"
8199+
},
8200+
"border-width": {
8201+
"$type": "dimension",
8202+
"$value": "{basis.border-width.sm}"
8203+
},
8204+
"column-gap": {
8205+
"$type": "dimension",
8206+
"$value": "{basis.space.column.xl}"
8207+
},
8208+
"min-height": {
8209+
"$type": "dimension",
8210+
"$value": "{basis.pointer-target.min-block-size}"
8211+
},
8212+
"padding-block": {
8213+
"$type": "dimension",
8214+
"$value": "{basis.space.block.lg}"
8215+
},
8216+
"padding-inline": {
8217+
"$type": "dimension",
8218+
"$value": "{basis.space.inline.xl}"
8219+
},
8220+
"active": {
8221+
"background-color": {
8222+
"$type": "color",
8223+
"$value": "{basis.color.default.bg-active}"
8224+
}
8225+
},
8226+
"hover": {
8227+
"background-color": {
8228+
"$type": "color",
8229+
"$value": "{basis.color.default.bg-hover}"
8230+
}
8231+
},
8232+
"focus": {
8233+
"background-color": {
8234+
"$type": "color",
8235+
"$value": "{basis.color.transparent}"
8236+
}
8237+
},
8238+
"content": {
8239+
"column-gap": {
8240+
"$type": "dimension",
8241+
"$value": "{basis.space.column.md}",
8242+
"$description": "[code-only]"
8243+
},
8244+
"row-gap": {
8245+
"$type": "dimension",
8246+
"$value": "{basis.space.row.sm}",
8247+
"$description": "[code-only]"
8248+
}
8249+
},
8250+
"description": {
8251+
"color": {
8252+
"$type": "color",
8253+
"$value": "{basis.color.default.color-subtle}"
8254+
},
8255+
"font-size": {
8256+
"$type": "fontSizes",
8257+
"$value": "{basis.text.font-size.md}"
8258+
},
8259+
"line-height": {
8260+
"$type": "lineHeights",
8261+
"$value": "{basis.text.line-height.md}"
8262+
}
8263+
},
8264+
"icon-end": {
8265+
"color": {
8266+
"$type": "color",
8267+
"$value": "{basis.color.action-2.color-default}"
8268+
}
8269+
},
8270+
"icon-start": {
8271+
"background-color": {
8272+
"$type": "color",
8273+
"$value": "{basis.color.accent-1-inverse.bg-default}"
8274+
},
8275+
"border-radius": {
8276+
"$type": "dimension",
8277+
"$value": "{basis.border-radius.round}"
8278+
},
8279+
"color": {
8280+
"$type": "color",
8281+
"$value": "{basis.color.accent-1-inverse.color-default}"
8282+
},
8283+
"padding-block": {
8284+
"$type": "dimension",
8285+
"$value": "{basis.space.block.md}"
8286+
},
8287+
"padding-inline": {
8288+
"$type": "dimension",
8289+
"$value": "{basis.space.inline.md}"
8290+
},
8291+
"size": {
8292+
"$type": "dimension",
8293+
"$value": "{basis.size.icon.md}"
8294+
}
8295+
},
8296+
"label": {
8297+
"color": {
8298+
"$type": "color",
8299+
"$value": "{basis.heading.color}"
8300+
},
8301+
"font-family": {
8302+
"$type": "fontFamilies",
8303+
"$value": "{basis.text.font-family.default}"
8304+
},
8305+
"font-size": {
8306+
"$type": "fontSizes",
8307+
"$value": "{basis.text.font-size.md}"
8308+
},
8309+
"font-weight": {
8310+
"$type": "fontWeights",
8311+
"$value": "{basis.text.font-weight.bold}"
8312+
},
8313+
"line-height": {
8314+
"$type": "lineHeights",
8315+
"$value": "{basis.text.line-height.md}"
8316+
}
8317+
}
8318+
}
8319+
}
8320+
}
8321+
},
81888322
"components/note": {
81898323
"utrecht": {
81908324
"spotlight-section": {
@@ -14364,6 +14498,7 @@
1436414498
"components/mark/utrecht",
1436514499
"components/modal-dialog",
1436614500
"components/navigation-bar",
14501+
"components/navigation-list",
1436714502
"components/note",
1436814503
"components/number-badge/nl",
1436914504
"components/number-badge/utrecht",

0 commit comments

Comments
 (0)