@seed-design/css 1.0.7 → 1.1.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 (64) hide show
  1. package/all.css +874 -512
  2. package/all.min.css +1 -1
  3. package/base.css +32 -0
  4. package/base.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/action-button.css +8 -1
  7. package/recipes/app-screen.css +16 -0
  8. package/recipes/app-screen.d.ts +4 -0
  9. package/recipes/app-screen.mjs +6 -1
  10. package/recipes/bottom-sheet-handle.css +24 -0
  11. package/recipes/bottom-sheet-handle.d.ts +21 -0
  12. package/recipes/bottom-sheet-handle.mjs +36 -0
  13. package/recipes/bottom-sheet.css +55 -32
  14. package/recipes/field-label.css +29 -0
  15. package/recipes/field-label.d.ts +24 -0
  16. package/recipes/field-label.mjs +47 -0
  17. package/recipes/field.css +63 -0
  18. package/recipes/field.d.ts +21 -0
  19. package/recipes/field.mjs +60 -0
  20. package/recipes/input-button.css +98 -0
  21. package/recipes/input-button.d.ts +21 -0
  22. package/recipes/input-button.mjs +64 -0
  23. package/recipes/page-banner.css +5 -4
  24. package/recipes/page-banner.d.ts +1 -1
  25. package/recipes/page-banner.mjs +6 -2
  26. package/recipes/slider-marker.css +42 -0
  27. package/recipes/slider-marker.d.ts +22 -0
  28. package/recipes/slider-marker.mjs +30 -0
  29. package/recipes/slider-tick.css +19 -0
  30. package/recipes/slider-tick.d.ts +22 -0
  31. package/recipes/slider-tick.mjs +29 -0
  32. package/recipes/slider.css +174 -0
  33. package/recipes/slider.d.ts +21 -0
  34. package/recipes/slider.mjs +68 -0
  35. package/recipes/text-input.css +156 -0
  36. package/recipes/text-input.d.ts +24 -0
  37. package/recipes/text-input.mjs +59 -0
  38. package/vars/component/bottom-sheet-handle.d.ts +24 -0
  39. package/vars/component/bottom-sheet-handle.mjs +24 -0
  40. package/vars/component/bottom-sheet.d.ts +2 -2
  41. package/vars/component/bottom-sheet.mjs +2 -2
  42. package/vars/component/field-label.d.ts +25 -0
  43. package/vars/component/field-label.mjs +25 -0
  44. package/vars/component/field.d.ts +72 -0
  45. package/vars/component/field.mjs +72 -0
  46. package/vars/component/index.d.ts +8 -1
  47. package/vars/component/index.mjs +8 -1
  48. package/vars/component/input-button.d.ts +78 -0
  49. package/vars/component/input-button.mjs +78 -0
  50. package/vars/component/page-banner.d.ts +1 -1
  51. package/vars/component/page-banner.mjs +1 -1
  52. package/vars/component/slider-thumb.d.ts +25 -0
  53. package/vars/component/slider-thumb.mjs +25 -0
  54. package/vars/component/slider-tick.d.ts +23 -0
  55. package/vars/component/slider-tick.mjs +23 -0
  56. package/vars/component/slider.d.ts +74 -0
  57. package/vars/component/slider.mjs +74 -0
  58. package/vars/component/text-input.d.ts +162 -0
  59. package/vars/component/text-input.mjs +162 -0
  60. package/recipes/text-field.css +0 -385
  61. package/recipes/text-field.d.ts +0 -24
  62. package/recipes/text-field.mjs +0 -104
  63. package/vars/component/text-field.d.ts +0 -294
  64. package/vars/component/text-field.mjs +0 -294
package/vars/component/text-field.mjs DELETED
@@ -1,294 +0,0 @@
1
- export const vars = {
2
- "base": {
3
- "enabled": {
4
- "label": {
5
- "color": "var(--seed-color-fg-neutral)",
6
- "fontWeight": "var(--seed-font-weight-bold)"
7
- },
8
- "indicator": {
9
- "color": "var(--seed-color-fg-neutral)",
10
- "fontWeight": "var(--seed-font-weight-regular)"
11
- },
12
- "field": {
13
- "strokeWidth": "1px",
14
- "strokeColor": "var(--seed-color-stroke-neutral-weak)"
15
- },
16
- "value": {
17
- "color": "var(--seed-color-fg-neutral)"
18
- },
19
- "placeholder": {
20
- "color": "var(--seed-color-fg-placeholder)"
21
- },
22
- "prefixText": {
23
- "color": "var(--seed-color-fg-neutral)"
24
- },
25
- "prefixIcon": {
26
- "color": "var(--seed-color-fg-neutral)"
27
- },
28
- "suffixText": {
29
- "color": "var(--seed-color-fg-neutral)"
30
- },
31
- "suffixIcon": {
32
- "color": "var(--seed-color-fg-neutral)"
33
- },
34
- "description": {
35
- "color": "var(--seed-color-fg-neutral-subtle)",
36
- "fontWeight": "var(--seed-font-weight-regular)"
37
- },
38
- "errorMessage": {
39
- "color": "var(--seed-color-fg-critical)",
40
- "fontWeight": "var(--seed-font-weight-regular)"
41
- },
42
- "characterCount": {
43
- "color": "var(--seed-color-fg-neutral)",
44
- "fontWeight": "var(--seed-font-weight-regular)"
45
- },
46
- "maxCharacterCount": {
47
- "color": "var(--seed-color-fg-neutral-subtle)",
48
- "fontWeight": "var(--seed-font-weight-regular)"
49
- }
50
- },
51
- "focused": {
52
- "field": {
53
- "strokeColor": "var(--seed-color-stroke-neutral-contrast)"
54
- }
55
- },
56
- "invalid": {
57
- "field": {
58
- "color": "var(--seed-color-bg-critical-weak)",
59
- "strokeColor": "var(--seed-color-stroke-critical-weak)"
60
- }
61
- },
62
- "invalidFocused": {
63
- "field": {
64
- "color": "#00000000",
65
- "strokeColor": "var(--seed-color-stroke-neutral-weak)"
66
- }
67
- },
68
- "readonly": {
69
- "field": {
70
- "color": "var(--seed-color-bg-disabled)"
71
- }
72
- },
73
- "disabled": {
74
- "field": {
75
- "color": "var(--seed-color-bg-disabled)"
76
- },
77
- "value": {
78
- "color": "var(--seed-color-fg-disabled)"
79
- },
80
- "placeholder": {
81
- "color": "var(--seed-color-fg-disabled)"
82
- },
83
- "prefixText": {
84
- "color": "var(--seed-color-fg-disabled)"
85
- },
86
- "prefixIcon": {
87
- "color": "var(--seed-color-fg-disabled)"
88
- },
89
- "suffixText": {
90
- "color": "var(--seed-color-fg-disabled)"
91
- },
92
- "suffixIcon": {
93
- "color": "var(--seed-color-fg-disabled)"
94
- }
95
- }
96
- },
97
- "sizeXlarge": {
98
- "enabled": {
99
- "header": {
100
- "paddingBottom": "var(--seed-dimension-x3)",
101
- "gap": "var(--seed-dimension-x1_5)"
102
- },
103
- "label": {
104
- "fontSize": "var(--seed-font-size-t5)",
105
- "lineHeight": "var(--seed-line-height-t5)"
106
- },
107
- "indicator": {
108
- "fontSize": "var(--seed-font-size-t5)",
109
- "lineHeight": "var(--seed-line-height-t5)"
110
- },
111
- "field": {
112
- "minHeight": "56px",
113
- "cornerRadius": "var(--seed-radius-r2_5)",
114
- "gap": "var(--seed-dimension-x2)",
115
- "paddingX": "var(--seed-dimension-x4)",
116
- "paddingY": "var(--seed-dimension-x3)"
117
- },
118
- "value": {
119
- "fontSize": "var(--seed-font-size-t6)",
120
- "lineHeight": "var(--seed-line-height-t6)"
121
- },
122
- "prefixText": {
123
- "fontSize": "var(--seed-font-size-t6)",
124
- "lineHeight": "var(--seed-line-height-t6)"
125
- },
126
- "prefixIcon": {
127
- "size": "var(--seed-dimension-x5)"
128
- },
129
- "suffixText": {
130
- "fontSize": "var(--seed-font-size-t6)",
131
- "lineHeight": "var(--seed-line-height-t6)"
132
- },
133
- "suffixIcon": {
134
- "size": "var(--seed-dimension-x5)"
135
- },
136
- "footer": {
137
- "gap": "var(--seed-dimension-x3_5)",
138
- "paddingTop": "var(--seed-dimension-x2)",
139
- "minHeight": "20px"
140
- },
141
- "description": {
142
- "fontSize": "var(--seed-font-size-t4)",
143
- "lineHeight": "var(--seed-line-height-t4)"
144
- },
145
- "errorMessage": {
146
- "fontSize": "var(--seed-font-size-t4)",
147
- "lineHeight": "var(--seed-line-height-t4)"
148
- },
149
- "errorIcon": {
150
- "size": "var(--seed-dimension-x4)",
151
- "marginRight": "var(--seed-dimension-x1)"
152
- },
153
- "characterCount": {
154
- "fontSize": "var(--seed-font-size-t2)",
155
- "lineHeight": "var(--seed-line-height-t2)"
156
- },
157
- "maxCharacterCount": {
158
- "fontSize": "var(--seed-font-size-t2)",
159
- "lineHeight": "var(--seed-line-height-t2)"
160
- }
161
- }
162
- },
163
- "sizeLarge": {
164
- "enabled": {
165
- "header": {
166
- "paddingBottom": "var(--seed-dimension-x3)",
167
- "gap": "var(--seed-dimension-x1_5)"
168
- },
169
- "label": {
170
- "fontSize": "var(--seed-font-size-t5)",
171
- "lineHeight": "var(--seed-line-height-t5)"
172
- },
173
- "indicator": {
174
- "fontSize": "var(--seed-font-size-t5)",
175
- "lineHeight": "var(--seed-line-height-t5)"
176
- },
177
- "field": {
178
- "minHeight": "52px",
179
- "cornerRadius": "var(--seed-radius-r2_5)",
180
- "gap": "var(--seed-dimension-x2)",
181
- "paddingX": "var(--seed-dimension-x4)",
182
- "paddingY": "var(--seed-dimension-x3)"
183
- },
184
- "value": {
185
- "fontSize": "var(--seed-font-size-t5)",
186
- "lineHeight": "var(--seed-line-height-t5)"
187
- },
188
- "prefixText": {
189
- "fontSize": "var(--seed-font-size-t5)",
190
- "lineHeight": "var(--seed-line-height-t5)"
191
- },
192
- "prefixIcon": {
193
- "size": "var(--seed-dimension-x5)"
194
- },
195
- "suffixText": {
196
- "fontSize": "var(--seed-font-size-t5)",
197
- "lineHeight": "var(--seed-line-height-t5)"
198
- },
199
- "suffixIcon": {
200
- "size": "var(--seed-dimension-x5)"
201
- },
202
- "footer": {
203
- "gap": "var(--seed-dimension-x3_5)",
204
- "paddingTop": "var(--seed-dimension-x2)",
205
- "minHeight": "20px"
206
- },
207
- "description": {
208
- "fontSize": "var(--seed-font-size-t4)",
209
- "lineHeight": "var(--seed-line-height-t4)"
210
- },
211
- "errorMessage": {
212
- "fontSize": "var(--seed-font-size-t4)",
213
- "lineHeight": "var(--seed-line-height-t4)"
214
- },
215
- "errorIcon": {
216
- "size": "var(--seed-dimension-x4)",
217
- "marginRight": "var(--seed-dimension-x1)"
218
- },
219
- "characterCount": {
220
- "fontSize": "var(--seed-font-size-t2)",
221
- "lineHeight": "var(--seed-line-height-t2)"
222
- },
223
- "maxCharacterCount": {
224
- "fontSize": "var(--seed-font-size-t2)",
225
- "lineHeight": "var(--seed-line-height-t2)"
226
- }
227
- }
228
- },
229
- "sizeMedium": {
230
- "enabled": {
231
- "header": {
232
- "paddingBottom": "var(--seed-dimension-x3)"
233
- },
234
- "label": {
235
- "fontSize": "var(--seed-font-size-t4)",
236
- "lineHeight": "var(--seed-line-height-t4)"
237
- },
238
- "indicator": {
239
- "fontSize": "var(--seed-font-size-t4)",
240
- "lineHeight": "var(--seed-line-height-t4)"
241
- },
242
- "field": {
243
- "minHeight": "40px",
244
- "cornerRadius": "var(--seed-radius-r2)",
245
- "gap": "var(--seed-dimension-x1_5)",
246
- "paddingX": "var(--seed-dimension-x3_5)",
247
- "paddingY": "var(--seed-dimension-x2_5)"
248
- },
249
- "value": {
250
- "fontSize": "var(--seed-font-size-t4)",
251
- "lineHeight": "var(--seed-line-height-t4)"
252
- },
253
- "prefixText": {
254
- "fontSize": "var(--seed-font-size-t4)",
255
- "lineHeight": "var(--seed-line-height-t4)"
256
- },
257
- "prefixIcon": {
258
- "size": "var(--seed-dimension-x4)"
259
- },
260
- "suffixText": {
261
- "fontSize": "var(--seed-font-size-t4)",
262
- "lineHeight": "var(--seed-line-height-t4)"
263
- },
264
- "suffixIcon": {
265
- "size": "var(--seed-dimension-x4)"
266
- },
267
- "footer": {
268
- "gap": "var(--seed-dimension-x3_5)",
269
- "paddingTop": "var(--seed-dimension-x2)",
270
- "minHeight": "var(--seed-dimension-x4)"
271
- },
272
- "description": {
273
- "fontSize": "var(--seed-font-size-t2)",
274
- "lineHeight": "var(--seed-line-height-t2)"
275
- },
276
- "errorMessage": {
277
- "fontSize": "var(--seed-font-size-t2)",
278
- "lineHeight": "var(--seed-line-height-t2)"
279
- },
280
- "errorIcon": {
281
- "size": "var(--seed-dimension-x3_5)",
282
- "marginRight": "var(--seed-dimension-x1)"
283
- },
284
- "characterCount": {
285
- "fontSize": "var(--seed-font-size-t2)",
286
- "lineHeight": "var(--seed-line-height-t2)"
287
- },
288
- "maxCharacterCount": {
289
- "fontSize": "var(--seed-font-size-t2)",
290
- "lineHeight": "var(--seed-line-height-t2)"
291
- }
292
- }
293
- }
294
- }