Skip to content

Commit ed87dd5

Browse files
RozerinayRozerinay
authored
feat: add ams-file-input tokens - Voorbeeld (#1258)
Met deze PR voegen we de volgende design tokens toe voor de File Input component van Amsterdam voor het Voorbeeld-thema: - `ams.file-input.background-color` - `ams.file-input.border-color` - `ams.file-input.border-style` - `ams.file-input.border-width` - `ams.file-input.color` - `ams.file-input.cursor` - `ams.file-input.outline-offset` - `ams.file-input.disabled.color` - `ams.file-input.disabled.cursor` - `ams.file-input.font-family` - `ams.file-input.font-size` - `ams.file-input.font-weight` - `ams.file-input.line-height` - `ams.file-input.padding-block` - `ams.file-input.padding-inline` - `ams.file-input.button.background-color` - `ams.file-input.button.border-color` - `ams.file-input.button.border-style` - `ams.file-input.button.border-width` - `ams.file-input.button.color` - `ams.file-input.button.cursor` - `ams.file-input.button.line-height` - `ams.file-input.button.margin-inline-end` - `ams.file-input.button.padding-block` - `ams.file-input.button.padding-inline` - `ams.file-input.button.disabled.color` - `ams.file-input.button.disabled.cursor` - `ams.file-input.button.hover.box-shadow` - `ams.file-input.button.hover.color`
1 parent 1b1f4ff commit ed87dd5

File tree

2 files changed

+174
-0
lines changed

2 files changed

+174
-0
lines changed

‎.changeset/ams-file-input-voorbeeld.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
"@nl-design-system-unstable/start-design-tokens": minor
3+
---
4+
5+
De volgende tokens zijn toegevoegd aan File Input component van Amsterdam:
6+
7+
- `ams.file-input.background-color`
8+
- `ams.file-input.border-color`
9+
- `ams.file-input.border-style`
10+
- `ams.file-input.border-width`
11+
- `ams.file-input.color`
12+
- `ams.file-input.cursor`
13+
- `ams.file-input.outline-offset`
14+
- `ams.file-input.disabled.color`
15+
- `ams.file-input.disabled.cursor`
16+
- `ams.file-input.font-family`
17+
- `ams.file-input.font-size`
18+
- `ams.file-input.font-weight`
19+
- `ams.file-input.line-height`
20+
- `ams.file-input.padding-block`
21+
- `ams.file-input.padding-inline`
22+
- `ams.file-input.button.background-color`
23+
- `ams.file-input.button.border-color`
24+
- `ams.file-input.button.border-style`
25+
- `ams.file-input.button.border-width`
26+
- `ams.file-input.button.color`
27+
- `ams.file-input.button.cursor`
28+
- `ams.file-input.button.line-height`
29+
- `ams.file-input.button.margin-inline-end`
30+
- `ams.file-input.button.padding-block`
31+
- `ams.file-input.button.padding-inline`
32+
- `ams.file-input.button.disabled.color`
33+
- `ams.file-input.button.disabled.cursor`
34+
- `ams.file-input.button.hover.box-shadow`
35+
- `ams.file-input.button.hover.color`

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

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6425,6 +6425,144 @@
64256425
}
64266426
}
64276427
},
6428+
"components/file-input": {
6429+
"ams": {
6430+
"file-input": {
6431+
"background-color": {
6432+
"$type": "color",
6433+
"$value": "{basis.form-control.background-color}"
6434+
},
6435+
"border-color": {
6436+
"$type": "color",
6437+
"$value": "{basis.form-control.border-color}"
6438+
},
6439+
"border-style": {
6440+
"$type": "other",
6441+
"$value": "dashed",
6442+
"$description": "[code-only]"
6443+
},
6444+
"border-width": {
6445+
"$type": "dimension",
6446+
"$value": "{basis.form-control.border-width}"
6447+
},
6448+
"color": {
6449+
"$type": "color",
6450+
"$value": "{basis.form-control.color}"
6451+
},
6452+
"cursor": {
6453+
"$type": "other",
6454+
"$value": "default",
6455+
"$description": "[code-only]"
6456+
},
6457+
"font-family": {
6458+
"$type": "fontFamilies",
6459+
"$value": "{basis.form-control.font-family}"
6460+
},
6461+
"font-size": {
6462+
"$type": "fontSizes",
6463+
"$value": "{basis.form-control.font-size}"
6464+
},
6465+
"font-weight": {
6466+
"$type": "fontWeights",
6467+
"$value": "{basis.form-control.font-weight}"
6468+
},
6469+
"line-height": {
6470+
"$type": "lineHeights",
6471+
"$value": "{basis.form-control.line-height}"
6472+
},
6473+
"outline-offset": {
6474+
"$type": "other",
6475+
"$value": "auto",
6476+
"$description": "[code-only]"
6477+
},
6478+
"padding-block": {
6479+
"$type": "dimension",
6480+
"$value": "{basis.space.block.xl}"
6481+
},
6482+
"padding-inline": {
6483+
"$type": "dimension",
6484+
"$value": "{basis.space.inline.xl}"
6485+
},
6486+
"disabled": {
6487+
"color": {
6488+
"$type": "color",
6489+
"$value": "{basis.form-control.disabled.color}"
6490+
},
6491+
"cursor": {
6492+
"$type": "other",
6493+
"$value": "disabled",
6494+
"$description": "[code-only]"
6495+
}
6496+
},
6497+
"button": {
6498+
"background-color": {
6499+
"$type": "color",
6500+
"$value": "{basis.color.transparent}"
6501+
},
6502+
"border-color": {
6503+
"$type": "color",
6504+
"$value": "{basis.color.action-1.border-default}"
6505+
},
6506+
"border-style": {
6507+
"$type": "other",
6508+
"$value": "solid",
6509+
"$description": "[code-only]"
6510+
},
6511+
"border-width": {
6512+
"$type": "dimension",
6513+
"$value": "{basis.border-width.sm}"
6514+
},
6515+
"color": {
6516+
"$type": "color",
6517+
"$value": "{basis.color.action-1.color-default}"
6518+
},
6519+
"cursor": {
6520+
"$type": "other",
6521+
"$value": "default",
6522+
"$description": "[code-only]"
6523+
},
6524+
"line-height": {
6525+
"$type": "lineHeights",
6526+
"$value": "{basis.text.line-height.md}"
6527+
},
6528+
"margin-inline-end": {
6529+
"$type": "dimension",
6530+
"$value": "{basis.space.inline.xl}",
6531+
"$description": "[code-only]"
6532+
},
6533+
"padding-block": {
6534+
"$type": "dimension",
6535+
"$value": "{basis.space.block.lg}"
6536+
},
6537+
"padding-inline": {
6538+
"$type": "dimension",
6539+
"$value": "{basis.space.inline.xl}"
6540+
},
6541+
"disabled": {
6542+
"color": {
6543+
"$type": "color",
6544+
"$value": "{basis.color.disabled.color-subtle}"
6545+
},
6546+
"cursor": {
6547+
"$type": "other",
6548+
"$value": "disabled",
6549+
"$description": "[code-only]"
6550+
}
6551+
},
6552+
"hover": {
6553+
"box-shadow": {
6554+
"$type": "boxShadow",
6555+
"$value": "None"
6556+
},
6557+
"color": {
6558+
"$type": "color",
6559+
"$value": "{basis.color.action-1.color-hover}"
6560+
}
6561+
}
6562+
}
6563+
}
6564+
}
6565+
},
64286566
"components/form-field": {
64296567
"utrecht": {
64306568
"form-field": {
@@ -14106,6 +14244,7 @@
1410614244
"components/figure/amsterdam",
1410714245
"components/figure/utrecht",
1410814246
"components/file",
14247+
"components/file-input",
1410914248
"components/form-field",
1411014249
"components/form-field-checkbox-option",
1411114250
"components/form-field-description",

0 commit comments

Comments
 (0)