Skip to content

Commit 1f3a2bf

Browse files
jeffreylauwersjeffreylauwers
authored
style: status badge tokens utrecht community component (#1279)
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 f0e24c1 commit 1f3a2bf

File tree

2 files changed

+260
-2
lines changed

2 files changed

+260
-2
lines changed

‎.changeset/status-badge-tokens.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/start-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/start-design-tokens/figma/start.tokens.json‎

Lines changed: 209 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10780,7 +10780,213 @@
1078010780
}
1078110781
}
1078210782
},
10783-
"components/status-badge": {
10783+
"components/status-badge/utrecht": {
10784+
"utrecht": {
10785+
"status-badge": {
10786+
"background-color": {
10787+
"$type": "color",
10788+
"$value": "{basis.color.default.bg-default}"
10789+
},
10790+
"border-color": {
10791+
"$type": "color",
10792+
"$value": "{basis.color.transparent}"
10793+
},
10794+
"border-radius": {
10795+
"$type": "dimension",
10796+
"$value": "{basis.border-radius.sm}"
10797+
},
10798+
"border-width": {
10799+
"$type": "dimension",
10800+
"$value": "{basis.border-width.sm}"
10801+
},
10802+
"color": {
10803+
"$type": "color",
10804+
"$value": "{basis.color.default.color-default}"
10805+
},
10806+
"font-family": {
10807+
"$type": "fontFamilies",
10808+
"$value": "{basis.text.font-family.default}"
10809+
},
10810+
"font-size": {
10811+
"$type": "fontSizes",
10812+
"$value": "{basis.text.font-size.md}"
10813+
},
10814+
"font-weight": {
10815+
"$type": "fontWeights",
10816+
"$value": "{basis.text.font-weight.bold}"
10817+
},
10818+
"line-height": {
10819+
"$type": "lineHeights",
10820+
"$value": "{basis.text.line-height.md}"
10821+
},
10822+
"letter-spacing": {
10823+
"$type": "letterSpacing",
10824+
"$value": "0px"
10825+
},
10826+
"min-block-size": {
10827+
"$type": "dimension",
10828+
"$value": "{basis.size.xs}"
10829+
},
10830+
"min-inline-size": {
10831+
"$type": "dimension",
10832+
"$value": "{basis.size.sm}"
10833+
},
10834+
"padding-block": {
10835+
"$type": "dimension",
10836+
"$value": "0px"
10837+
},
10838+
"padding-inline": {
10839+
"$type": "dimension",
10840+
"$value": "{basis.space.inline.sm}"
10841+
},
10842+
"text-transform": {
10843+
"$type": "textCase",
10844+
"$value": "None"
10845+
},
10846+
"active": {
10847+
"background-color": {
10848+
"$type": "color",
10849+
"$value": "{basis.color.positive.bg-default}"
10850+
},
10851+
"border-color": {
10852+
"$type": "color",
10853+
"$value": "{basis.color.transparent}"
10854+
},
10855+
"color": {
10856+
"$type": "color",
10857+
"$value": "{basis.color.positive.color-default}"
10858+
}
10859+
},
10860+
"danger": {
10861+
"background-color": {
10862+
"$type": "color",
10863+
"$value": "{basis.color.negative.bg-default}"
10864+
},
10865+
"border-color": {
10866+
"$type": "color",
10867+
"$value": "{basis.color.transparent}"
10868+
},
10869+
"color": {
10870+
"$type": "color",
10871+
"$value": "{basis.color.negative.color-default}"
10872+
}
10873+
},
10874+
"error": {
10875+
"background-color": {
10876+
"$type": "color",
10877+
"$value": "{basis.color.negative.bg-default}"
10878+
},
10879+
"border-color": {
10880+
"$type": "color",
10881+
"$value": "{basis.color.transparent}"
10882+
},
10883+
"color": {
10884+
"$type": "color",
10885+
"$value": "{basis.color.negative.color-default}"
10886+
}
10887+
},
10888+
"inactive": {
10889+
"background-color": {
10890+
"$type": "color",
10891+
"$value": "{basis.color.default.bg-default}"
10892+
},
10893+
"border-color": {
10894+
"$type": "color",
10895+
"$value": "{basis.color.transparent}"
10896+
},
10897+
"color": {
10898+
"$type": "color",
10899+
"$value": "{basis.color.default.color-default}"
10900+
}
10901+
},
10902+
"invalid": {
10903+
"background-color": {
10904+
"$type": "color",
10905+
"$value": "{basis.color.negative.bg-default}"
10906+
},
10907+
"border-color": {
10908+
"$type": "color",
10909+
"$value": "{basis.color.transparent}"
10910+
},
10911+
"color": {
10912+
"$type": "color",
10913+
"$value": "{basis.color.negative.color-default}"
10914+
}
10915+
},
10916+
"neutral": {
10917+
"background-color": {
10918+
"$type": "color",
10919+
"$value": "{basis.color.info.bg-default}"
10920+
},
10921+
"border-color": {
10922+
"$type": "color",
10923+
"$value": "{basis.color.transparent}"
10924+
},
10925+
"color": {
10926+
"$type": "color",
10927+
"$value": "{basis.color.info.color-default}"
10928+
}
10929+
},
10930+
"safe": {
10931+
"background-color": {
10932+
"$type": "color",
10933+
"$value": "{basis.color.positive.bg-default}"
10934+
},
10935+
"border-color": {
10936+
"$type": "color",
10937+
"$value": "{basis.color.transparent}"
10938+
},
10939+
"color": {
10940+
"$type": "color",
10941+
"$value": "{basis.color.positive.color-default}"
10942+
}
10943+
},
10944+
"success": {
10945+
"background-color": {
10946+
"$type": "color",
10947+
"$value": "{basis.color.positive.bg-default}"
10948+
},
10949+
"border-color": {
10950+
"$type": "color",
10951+
"$value": "{basis.color.transparent}"
10952+
},
10953+
"color": {
10954+
"$type": "color",
10955+
"$value": "{basis.color.positive.color-default}"
10956+
}
10957+
},
10958+
"valid": {
10959+
"background-color": {
10960+
"$type": "color",
10961+
"$value": "{basis.color.positive.bg-default}"
10962+
},
10963+
"border-color": {
10964+
"$type": "color",
10965+
"$value": "{basis.color.transparent}"
10966+
},
10967+
"color": {
10968+
"$type": "color",
10969+
"$value": "{basis.color.positive.color-default}"
10970+
}
10971+
},
10972+
"warning": {
10973+
"background-color": {
10974+
"$type": "color",
10975+
"$value": "{basis.color.warning.bg-default}"
10976+
},
10977+
"border-color": {
10978+
"$type": "color",
10979+
"$value": "{basis.color.transparent}"
10980+
},
10981+
"color": {
10982+
"$type": "color",
10983+
"$value": "{basis.color.warning.color-default}"
10984+
}
10985+
}
10986+
}
10987+
}
10988+
},
10989+
"components/status-badge/todo": {
1078410990
"todo": {
1078510991
"status-badge": {
1078610992
"background-color": {
@@ -14594,7 +14800,8 @@
1459414800
"components/side-navigation",
1459514801
"components/skip-link/nl",
1459614802
"components/skip-link/utrecht",
14597-
"components/status-badge",
14803+
"components/status-badge/utrecht",
14804+
"components/status-badge/todo",
1459814805
"components/step-marker",
1459914806
"components/switch",
1460014807
"components/table",

0 commit comments

Comments
 (0)