Skip to content

Commit 1b1f4ff

Browse files
RozerinayRozerinay
authored
feat: add ams-file-input tokens (#1257)
Met deze PR voegen we de volgende design tokens toe voor de File Input component van Amsterdam voor het Start-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 dd1c418 commit 1b1f4ff

File tree

2 files changed

+174
-0
lines changed

2 files changed

+174
-0
lines changed

‎.changeset/ams-file-input.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/start-design-tokens/figma/start.tokens.json‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6178,6 +6178,144 @@
61786178
}
61796179
}
61806180
},
6181+
"components/file-input": {
6182+
"ams": {
6183+
"file-input": {
6184+
"background-color": {
6185+
"$type": "color",
6186+
"$value": "{basis.form-control.background-color}"
6187+
},
6188+
"border-color": {
6189+
"$type": "color",
6190+
"$value": "{basis.form-control.border-color}"
6191+
},
6192+
"border-style": {
6193+
"$type": "other",
6194+
"$value": "dashed",
6195+
"$description": "[code-only]"
6196+
},
6197+
"border-width": {
6198+
"$type": "dimension",
6199+
"$value": "{basis.form-control.border-width}"
6200+
},
6201+
"color": {
6202+
"$type": "color",
6203+
"$value": "{basis.form-control.color}"
6204+
},
6205+
"cursor": {
6206+
"$type": "other",
6207+
"$value": "default",
6208+
"$description": "[code-only]"
6209+
},
6210+
"font-family": {
6211+
"$type": "fontFamilies",
6212+
"$value": "{basis.form-control.font-family}"
6213+
},
6214+
"font-size": {
6215+
"$type": "fontSizes",
6216+
"$value": "{basis.form-control.font-size}"
6217+
},
6218+
"font-weight": {
6219+
"$type": "fontWeights",
6220+
"$value": "{basis.form-control.font-weight}"
6221+
},
6222+
"line-height": {
6223+
"$type": "lineHeights",
6224+
"$value": "{basis.form-control.line-height}"
6225+
},
6226+
"outline-offset": {
6227+
"$type": "other",
6228+
"$value": "auto",
6229+
"$description": "[code-only]"
6230+
},
6231+
"padding-block": {
6232+
"$type": "dimension",
6233+
"$value": "{basis.space.block.xl}"
6234+
},
6235+
"padding-inline": {
6236+
"$type": "dimension",
6237+
"$value": "{basis.space.inline.xl}"
6238+
},
6239+
"disabled": {
6240+
"color": {
6241+
"$type": "color",
6242+
"$value": "{basis.form-control.disabled.color}"
6243+
},
6244+
"cursor": {
6245+
"$type": "other",
6246+
"$value": "disabled",
6247+
"$description": "[code-only]"
6248+
}
6249+
},
6250+
"button": {
6251+
"background-color": {
6252+
"$type": "color",
6253+
"$value": "{basis.color.transparent}"
6254+
},
6255+
"border-color": {
6256+
"$type": "color",
6257+
"$value": "{basis.color.action-1.border-default}"
6258+
},
6259+
"border-style": {
6260+
"$type": "other",
6261+
"$value": "solid",
6262+
"$description": "[code-only]"
6263+
},
6264+
"border-width": {
6265+
"$type": "dimension",
6266+
"$value": "{basis.border-width.sm}"
6267+
},
6268+
"color": {
6269+
"$type": "color",
6270+
"$value": "{basis.color.action-1.color-default}"
6271+
},
6272+
"cursor": {
6273+
"$type": "other",
6274+
"$value": "default",
6275+
"$description": "[code-only]"
6276+
},
6277+
"line-height": {
6278+
"$type": "lineHeights",
6279+
"$value": "{basis.text.line-height.md}"
6280+
},
6281+
"margin-inline-end": {
6282+
"$type": "dimension",
6283+
"$value": "{basis.space.inline.xl}",
6284+
"$description": "[code-only]"
6285+
},
6286+
"padding-block": {
6287+
"$type": "dimension",
6288+
"$value": "{basis.space.block.lg}"
6289+
},
6290+
"padding-inline": {
6291+
"$type": "dimension",
6292+
"$value": "{basis.space.inline.xl}"
6293+
},
6294+
"disabled": {
6295+
"color": {
6296+
"$type": "color",
6297+
"$value": "{basis.color.disabled.color-subtle}"
6298+
},
6299+
"cursor": {
6300+
"$type": "other",
6301+
"$value": "disabled",
6302+
"$description": "[code-only]"
6303+
}
6304+
},
6305+
"hover": {
6306+
"box-shadow": {
6307+
"$type": "boxShadow",
6308+
"$value": "None"
6309+
},
6310+
"color": {
6311+
"$type": "color",
6312+
"$value": "{basis.color.action-1.color-hover}"
6313+
}
6314+
}
6315+
}
6316+
}
6317+
}
6318+
},
61816319
"components/form-field": {
61826320
"utrecht": {
61836321
"form-field": {
@@ -13859,6 +13997,7 @@
1385913997
"components/figure/amsterdam",
1386013998
"components/figure/utrecht",
1386113999
"components/file",
14000+
"components/file-input",
1386214001
"components/form-field",
1386314002
"components/form-field-checkbox-option",
1386414003
"components/form-field-description",

0 commit comments

Comments
 (0)