@depersgroep/lfvp-design-tokens 0.147.0 → 0.149.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/tokens/$metadata.json +4 -3
  3. package/tokens/components/{clickable-box.json → selectable-box.json} +26 -2
  4. package/tokens/components/selectable.json +260 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@depersgroep/lfvp-design-tokens",
3
- "version": "0.147.0",
3
+ "version": "0.149.0",
4
4
  "description": "Figma design tokens for LFVP",
5
5
  "repository": {
6
6
  "type": "git",
package/tokens/$metadata.json CHANGED
@@ -15,12 +15,13 @@
15
15
  "base/ui",
16
16
  "components/app-header",
17
17
  "components/box",
18
- "components/clickable-box",
19
18
  "components/button",
19
+ "components/selectable",
20
+ "components/selectable-box",
20
21
  "components/form",
22
+ "components/input",
21
23
  "components/landingpage",
22
24
  "components/toggle",
23
- "components/top-10",
24
- "components/input"
25
+ "components/top-10"
25
26
  ]
26
27
  }
package/tokens/components/{clickable-box.json → selectable-box.json} RENAMED
@@ -1,5 +1,5 @@
1
1
  {
2
- "clickableBox": {
2
+ "selectableBox": {
3
3
  "normal": {
4
4
  "backgroundColor": {
5
5
  "value": "{base.color.ui.dark4}",
@@ -60,10 +60,34 @@
60
60
  "borderWidth": {
61
61
  "value": "{core.borderWidth.3}",
62
62
  "type": "borderWidth"
63
+ }
64
+ },
65
+ "focus": {
66
+ "backgroundColor": {
67
+ "value": "{base.color.ui.dark4}",
68
+ "type": "color"
63
69
  },
64
- "focusColor": {
70
+ "borderColor": {
65
71
  "value": "{base.color.functional.focus}",
66
72
  "type": "color"
73
+ },
74
+ "textColor": {
75
+ "value": "{base.color.text.default}",
76
+ "type": "color"
77
+ }
78
+ },
79
+ "error": {
80
+ "backgroundColor": {
81
+ "value": "{base.color.ui.dark4}",
82
+ "type": "color"
83
+ },
84
+ "borderColor": {
85
+ "value": "{base.color.primary.default}",
86
+ "type": "color"
87
+ },
88
+ "textColor": {
89
+ "value": "{base.color.text.default}",
90
+ "type": "color"
67
91
  }
68
92
  }
69
93
  }
package/tokens/components/selectable.json ADDED
@@ -0,0 +1,260 @@
1
+ {
2
+ "selectable": {
3
+ "unchecked": {
4
+ "normal": {
5
+ "backgroundColor": {
6
+ "value": "{base.color.ui.dark2}",
7
+ "type": "color"
8
+ },
9
+ "borderColor": {
10
+ "value": "{base.color.ui.white}",
11
+ "type": "color"
12
+ },
13
+ "textColor": {
14
+ "value": "{base.color.text.default}",
15
+ "type": "color"
16
+ },
17
+ "iconColor": {
18
+ "value": "transparent",
19
+ "type": "color"
20
+ }
21
+ },
22
+ "hover": {
23
+ "backgroundColor": {
24
+ "value": "{base.color.ui.dark2}",
25
+ "type": "color"
26
+ },
27
+ "borderColor": {
28
+ "value": "{base.color.ui.white}",
29
+ "type": "color"
30
+ },
31
+ "textColor": {
32
+ "value": "{base.color.text.default}",
33
+ "type": "color"
34
+ },
35
+ "iconColor": {
36
+ "value": "{base.color.ui.accent1}",
37
+ "type": "color"
38
+ }
39
+ },
40
+ "active": {
41
+ "backgroundColor": {
42
+ "value": "{base.color.ui.accent1}",
43
+ "type": "color"
44
+ },
45
+ "borderColor": {
46
+ "value": "{base.color.ui.white}",
47
+ "type": "color"
48
+ },
49
+ "textColor": {
50
+ "value": "{base.color.text.default}",
51
+ "type": "color"
52
+ },
53
+ "iconColor": {
54
+ "value": "transparent",
55
+ "type": "color"
56
+ }
57
+ },
58
+ "disabled": {
59
+ "backgroundColor": {
60
+ "value": "{core.color.softAlpha.20}",
61
+ "type": "color"
62
+ },
63
+ "borderColor": {
64
+ "value": "transparent",
65
+ "type": "color"
66
+ },
67
+ "textColor": {
68
+ "value": "{base.color.ui.accent2}",
69
+ "type": "color"
70
+ },
71
+ "iconColor": {
72
+ "value": "transparent",
73
+ "type": "color"
74
+ }
75
+ },
76
+ "focus": {
77
+ "backgroundColor": {
78
+ "value": "{base.color.ui.dark2}",
79
+ "type": "color"
80
+ },
81
+ "borderColor": {
82
+ "value": "{base.color.ui.accent2}",
83
+ "type": "color"
84
+ },
85
+ "textColor": {
86
+ "value": "{base.color.text.default}",
87
+ "type": "color"
88
+ },
89
+ "iconColor": {
90
+ "value": "transparent",
91
+ "type": "color"
92
+ }
93
+ },
94
+ "error": {
95
+ "backgroundColor": {
96
+ "value": "{core.color.primary.10}",
97
+ "type": "color"
98
+ },
99
+ "borderColor": {
100
+ "value": "{base.color.primary.default}",
101
+ "type": "color"
102
+ },
103
+ "helpTextColor": {
104
+ "value": "{base.color.primary.lighter}",
105
+ "type": "color"
106
+ },
107
+ "textColor": {
108
+ "value": "{base.color.text.default}",
109
+ "type": "color"
110
+ },
111
+ "iconColor": {
112
+ "value": "transparent",
113
+ "type": "color"
114
+ }
115
+ }
116
+ },
117
+ "checkbox": {
118
+ "borderRadius": {
119
+ "value": "{core.borderRadius.4}",
120
+ "type": "borderRadius"
121
+ }
122
+ },
123
+ "radio": {
124
+ "borderRadius": {
125
+ "value": "{core.borderRadius.full}",
126
+ "type": "borderRadius"
127
+ }
128
+ },
129
+ "default": {
130
+ "borderWidth": {
131
+ "value": "{core.borderWidth.2}",
132
+ "type": "borderWidth"
133
+ }
134
+ },
135
+ "medium": {
136
+ "size": {
137
+ "value": "{core.sizing.24}",
138
+ "type": "sizing"
139
+ },
140
+ "large": {
141
+ "value": "{core.sizing.40}",
142
+ "type": "sizing"
143
+ }
144
+ },
145
+ "checked": {
146
+ "normal": {
147
+ "backgroundColor": {
148
+ "value": "{base.color.ui.white}",
149
+ "type": "color"
150
+ },
151
+ "borderColor": {
152
+ "value": "transparent",
153
+ "type": "color"
154
+ },
155
+ "textColor": {
156
+ "value": "{base.color.text.default}",
157
+ "type": "color"
158
+ },
159
+ "iconColor": {
160
+ "value": "{base.color.ui.dark1}",
161
+ "type": "color"
162
+ }
163
+ },
164
+ "hover": {
165
+ "backgroundColor": {
166
+ "value": "{base.color.ui.white}",
167
+ "type": "color"
168
+ },
169
+ "borderColor": {
170
+ "value": "transparent",
171
+ "type": "color"
172
+ },
173
+ "textColor": {
174
+ "value": "{base.color.text.default}",
175
+ "type": "color"
176
+ },
177
+ "iconColor": {
178
+ "value": "{base.color.ui.accent1}",
179
+ "type": "color"
180
+ }
181
+ },
182
+ "active": {
183
+ "backgroundColor": {
184
+ "value": "{base.color.ui.white}",
185
+ "type": "color"
186
+ },
187
+ "borderColor": {
188
+ "value": "transparent",
189
+ "type": "color"
190
+ },
191
+ "textColor": {
192
+ "value": "{base.color.text.default}",
193
+ "type": "color"
194
+ },
195
+ "iconColor": {
196
+ "value": "{base.color.ui.accent2}",
197
+ "type": "color"
198
+ }
199
+ },
200
+ "disabled": {
201
+ "backgroundColor": {
202
+ "value": "{core.color.softAlpha.20}",
203
+ "type": "color"
204
+ },
205
+ "borderColor": {
206
+ "value": "transparent",
207
+ "type": "color"
208
+ },
209
+ "textColor": {
210
+ "value": "{base.color.ui.accent2}",
211
+ "type": "color"
212
+ },
213
+ "iconColor": {
214
+ "value": "{base.color.ui.accent2}",
215
+ "type": "color"
216
+ }
217
+ },
218
+ "focus": {
219
+ "backgroundColor": {
220
+ "value": "{base.color.ui.white}",
221
+ "type": "color"
222
+ },
223
+ "borderColor": {
224
+ "value": "transparent",
225
+ "type": "color"
226
+ },
227
+ "textColor": {
228
+ "value": "{base.color.text.default}",
229
+ "type": "color"
230
+ },
231
+ "iconColor": {
232
+ "value": "{base.color.ui.dark1}",
233
+ "type": "color"
234
+ }
235
+ },
236
+ "error": {
237
+ "backgroundColor": {
238
+ "value": "{base.color.primary.default}",
239
+ "type": "color"
240
+ },
241
+ "helpTextColor": {
242
+ "value": "{base.color.primary.lighter}",
243
+ "type": "color"
244
+ },
245
+ "borderColor": {
246
+ "value": "transparent",
247
+ "type": "color"
248
+ },
249
+ "textColor": {
250
+ "value": "{base.color.text.default}",
251
+ "type": "color"
252
+ },
253
+ "iconColor": {
254
+ "value": "{base.color.ui.white}",
255
+ "type": "color"
256
+ }
257
+ }
258
+ }
259
+ }
260
+ }