Skip to content

Commit 874c315

Browse files
jeffreylauwersjeffreylauwers
authored
style: status badge tokens utrecht community component - Voorbeeld (#1280)
De volgende tokens zijn toegevoegd aan Status Badge component: - `utrecht.status-badge.background-color` - `utrecht.status-badge.border-color` - `utrecht.status-badge.border-radius` - `utrecht.status-badge.border-width` - `utrecht.status-badge.color` - `utrecht.status-badge.font-family` - `utrecht.status-badge.font-size` - `utrecht.status-badge.font-weight` - `utrecht.status-badge.line-height` - `utrecht.status-badge.letter-spacing` - `utrecht.status-badge.min-block-size` - `utrecht.status-badge.min-inline-size` - `utrecht.status-badge.padding-block` - `utrecht.status-badge.padding-inline` - `utrecht.status-badge.text-transform` - `utrecht.status-badge.active.background-color` - `utrecht.status-badge.active.border-color` - `utrecht.status-badge.active.color` - `utrecht.status-badge.danger.background-color` - `utrecht.status-badge.danger.border-color` - `utrecht.status-badge.danger.color` - `utrecht.status-badge.error.background-color` - `utrecht.status-badge.error.border-color` - `utrecht.status-badge.error.color` - `utrecht.status-badge.inactive.background-color` - `utrecht.status-badge.inactive.border-color` - `utrecht.status-badge.inactive.color` - `utrecht.status-badge.invalid.background-color` - `utrecht.status-badge.invalid.border-color` - `utrecht.status-badge.invalid.color` - `utrecht.status-badge.neutral.background-color` - `utrecht.status-badge.neutral.border-color` - `utrecht.status-badge.neutral.color` - `utrecht.status-badge.safe.background-color` - `utrecht.status-badge.safe.border-color` - `utrecht.status-badge.safe.color` - `utrecht.status-badge.success.background-color` - `utrecht.status-badge.success.border-color` - `utrecht.status-badge.success.color` - `utrecht.status-badge.valid.background-color` - `utrecht.status-badge.valid.border-color` - `utrecht.status-badge.valid.color` - `utrecht.status-badge.warning.background-color` - `utrecht.status-badge.warning.border-color` - `utrecht.status-badge.warning.color`
1 parent 1f3a2bf commit 874c315

File tree

2 files changed

+260
-2
lines changed

2 files changed

+260
-2
lines changed

‎.changeset/status-badge-tokens-voorbeeld.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
"@nl-design-system-unstable/voorbeeld-design-tokens": minor
3+
---
4+
5+
De volgende tokens zijn toegevoegd voor de Status Badge component:
6+
7+
- `utrecht.status-badge.background-color`
8+
- `utrecht.status-badge.border-color`
9+
- `utrecht.status-badge.border-radius`
10+
- `utrecht.status-badge.border-width`
11+
- `utrecht.status-badge.color`
12+
- `utrecht.status-badge.font-family`
13+
- `utrecht.status-badge.font-size`
14+
- `utrecht.status-badge.font-weight`
15+
- `utrecht.status-badge.line-height`
16+
- `utrecht.status-badge.letter-spacing`
17+
- `utrecht.status-badge.min-block-size`
18+
- `utrecht.status-badge.min-inline-size`
19+
- `utrecht.status-badge.padding-block`
20+
- `utrecht.status-badge.padding-inline`
21+
- `utrecht.status-badge.text-transform`
22+
- `utrecht.status-badge.active.background-color`
23+
- `utrecht.status-badge.active.border-color`
24+
- `utrecht.status-badge.active.color`
25+
- `utrecht.status-badge.danger.background-color`
26+
- `utrecht.status-badge.danger.border-color`
27+
- `utrecht.status-badge.danger.color`
28+
- `utrecht.status-badge.error.background-color`
29+
- `utrecht.status-badge.error.border-color`
30+
- `utrecht.status-badge.error.color`
31+
- `utrecht.status-badge.inactive.background-color`
32+
- `utrecht.status-badge.inactive.border-color`
33+
- `utrecht.status-badge.inactive.color`
34+
- `utrecht.status-badge.invalid.background-color`
35+
- `utrecht.status-badge.invalid.border-color`
36+
- `utrecht.status-badge.invalid.color`
37+
- `utrecht.status-badge.neutral.background-color`
38+
- `utrecht.status-badge.neutral.border-color`
39+
- `utrecht.status-badge.neutral.color`
40+
- `utrecht.status-badge.safe.background-color`
41+
- `utrecht.status-badge.safe.border-color`
42+
- `utrecht.status-badge.safe.color`
43+
- `utrecht.status-badge.success.background-color`
44+
- `utrecht.status-badge.success.border-color`
45+
- `utrecht.status-badge.success.color`
46+
- `utrecht.status-badge.valid.background-color`
47+
- `utrecht.status-badge.valid.border-color`
48+
- `utrecht.status-badge.valid.color`
49+
- `utrecht.status-badge.warning.background-color`
50+
- `utrecht.status-badge.warning.border-color`
51+
- `utrecht.status-badge.warning.color`

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

Lines changed: 209 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11027,7 +11027,213 @@
1102711027
}
1102811028
}
1102911029
},
11030-
"components/status-badge": {
11030+
"components/status-badge/utrecht": {
11031+
"utrecht": {
11032+
"status-badge": {
11033+
"background-color": {
11034+
"$type": "color",
11035+
"$value": "{basis.color.default.bg-default}"
11036+
},
11037+
"border-color": {
11038+
"$type": "color",
11039+
"$value": "{basis.color.transparent}"
11040+
},
11041+
"border-radius": {
11042+
"$type": "dimension",
11043+
"$value": "{basis.border-radius.sm}"
11044+
},
11045+
"border-width": {
11046+
"$type": "dimension",
11047+
"$value": "{basis.border-width.sm}"
11048+
},
11049+
"color": {
11050+
"$type": "color",
11051+
"$value": "{basis.color.default.color-default}"
11052+
},
11053+
"font-family": {
11054+
"$type": "fontFamilies",
11055+
"$value": "{basis.text.font-family.default}"
11056+
},
11057+
"font-size": {
11058+
"$type": "fontSizes",
11059+
"$value": "{basis.text.font-size.md}"
11060+
},
11061+
"font-weight": {
11062+
"$type": "fontWeights",
11063+
"$value": "{basis.text.font-weight.bold}"
11064+
},
11065+
"line-height": {
11066+
"$type": "lineHeights",
11067+
"$value": "{basis.text.line-height.md}"
11068+
},
11069+
"letter-spacing": {
11070+
"$type": "letterSpacing",
11071+
"$value": "0px"
11072+
},
11073+
"min-block-size": {
11074+
"$type": "dimension",
11075+
"$value": "{basis.size.xs}"
11076+
},
11077+
"min-inline-size": {
11078+
"$type": "dimension",
11079+
"$value": "{basis.size.sm}"
11080+
},
11081+
"padding-block": {
11082+
"$type": "dimension",
11083+
"$value": "0px"
11084+
},
11085+
"padding-inline": {
11086+
"$type": "dimension",
11087+
"$value": "{basis.space.inline.sm}"
11088+
},
11089+
"text-transform": {
11090+
"$type": "textCase",
11091+
"$value": "None"
11092+
},
11093+
"active": {
11094+
"background-color": {
11095+
"$type": "color",
11096+
"$value": "{basis.color.positive.bg-default}"
11097+
},
11098+
"border-color": {
11099+
"$type": "color",
11100+
"$value": "{basis.color.transparent}"
11101+
},
11102+
"color": {
11103+
"$type": "color",
11104+
"$value": "{basis.color.positive.color-default}"
11105+
}
11106+
},
11107+
"danger": {
11108+
"background-color": {
11109+
"$type": "color",
11110+
"$value": "{basis.color.negative.bg-default}"
11111+
},
11112+
"border-color": {
11113+
"$type": "color",
11114+
"$value": "{basis.color.transparent}"
11115+
},
11116+
"color": {
11117+
"$type": "color",
11118+
"$value": "{basis.color.negative.color-default}"
11119+
}
11120+
},
11121+
"error": {
11122+
"background-color": {
11123+
"$type": "color",
11124+
"$value": "{basis.color.negative.bg-default}"
11125+
},
11126+
"border-color": {
11127+
"$type": "color",
11128+
"$value": "{basis.color.transparent}"
11129+
},
11130+
"color": {
11131+
"$type": "color",
11132+
"$value": "{basis.color.negative.color-default}"
11133+
}
11134+
},
11135+
"inactive": {
11136+
"background-color": {
11137+
"$type": "color",
11138+
"$value": "{basis.color.default.bg-default}"
11139+
},
11140+
"border-color": {
11141+
"$type": "color",
11142+
"$value": "{basis.color.transparent}"
11143+
},
11144+
"color": {
11145+
"$type": "color",
11146+
"$value": "{basis.color.default.color-default}"
11147+
}
11148+
},
11149+
"invalid": {
11150+
"background-color": {
11151+
"$type": "color",
11152+
"$value": "{basis.color.negative.bg-default}"
11153+
},
11154+
"border-color": {
11155+
"$type": "color",
11156+
"$value": "{basis.color.transparent}"
11157+
},
11158+
"color": {
11159+
"$type": "color",
11160+
"$value": "{basis.color.negative.color-default}"
11161+
}
11162+
},
11163+
"neutral": {
11164+
"background-color": {
11165+
"$type": "color",
11166+
"$value": "{basis.color.info.bg-default}"
11167+
},
11168+
"border-color": {
11169+
"$type": "color",
11170+
"$value": "{basis.color.transparent}"
11171+
},
11172+
"color": {
11173+
"$type": "color",
11174+
"$value": "{basis.color.info.color-default}"
11175+
}
11176+
},
11177+
"safe": {
11178+
"background-color": {
11179+
"$type": "color",
11180+
"$value": "{basis.color.positive.bg-default}"
11181+
},
11182+
"border-color": {
11183+
"$type": "color",
11184+
"$value": "{basis.color.transparent}"
11185+
},
11186+
"color": {
11187+
"$type": "color",
11188+
"$value": "{basis.color.positive.color-default}"
11189+
}
11190+
},
11191+
"success": {
11192+
"background-color": {
11193+
"$type": "color",
11194+
"$value": "{basis.color.positive.bg-default}"
11195+
},
11196+
"border-color": {
11197+
"$type": "color",
11198+
"$value": "{basis.color.transparent}"
11199+
},
11200+
"color": {
11201+
"$type": "color",
11202+
"$value": "{basis.color.positive.color-default}"
11203+
}
11204+
},
11205+
"valid": {
11206+
"background-color": {
11207+
"$type": "color",
11208+
"$value": "{basis.color.positive.bg-default}"
11209+
},
11210+
"border-color": {
11211+
"$type": "color",
11212+
"$value": "{basis.color.transparent}"
11213+
},
11214+
"color": {
11215+
"$type": "color",
11216+
"$value": "{basis.color.positive.color-default}"
11217+
}
11218+
},
11219+
"warning": {
11220+
"background-color": {
11221+
"$type": "color",
11222+
"$value": "{basis.color.warning.bg-default}"
11223+
},
11224+
"border-color": {
11225+
"$type": "color",
11226+
"$value": "{basis.color.transparent}"
11227+
},
11228+
"color": {
11229+
"$type": "color",
11230+
"$value": "{basis.color.warning.color-default}"
11231+
}
11232+
}
11233+
}
11234+
}
11235+
},
11236+
"components/status-badge/todo": {
1103111237
"todo": {
1103211238
"status-badge": {
1103311239
"background-color": {
@@ -14841,7 +15047,8 @@
1484115047
"components/side-navigation",
1484215048
"components/skip-link/nl",
1484315049
"components/skip-link/utrecht",
14844-
"components/status-badge",
15050+
"components/status-badge/utrecht",
15051+
"components/status-badge/todo",
1484515052
"components/step-marker",
1484615053
"components/switch",
1484715054
"components/table",

0 commit comments

Comments
 (0)