@seed-design/rootage-artifacts 0.0.0 → 0.0.2

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 (63) hide show
  1. package/README.md +10 -0
  2. package/color.yaml +438 -366
  3. package/components/action-button.yaml +415 -205
  4. package/components/action-chip.yaml +139 -67
  5. package/components/action-sheet-close-button.yaml +45 -0
  6. package/components/action-sheet-item.yaml +52 -0
  7. package/components/action-sheet.yaml +115 -0
  8. package/components/avatar-stack.yaml +74 -0
  9. package/components/avatar.yaml +110 -47
  10. package/components/badge.yaml +153 -130
  11. package/components/bottom-sheet-close-button.yaml +38 -0
  12. package/components/bottom-sheet.yaml +143 -0
  13. package/components/callout.yaml +169 -129
  14. package/components/checkbox.yaml +139 -116
  15. package/components/chip-tab.yaml +82 -59
  16. package/components/chip-tablist.yaml +20 -11
  17. package/components/chip.yaml +314 -0
  18. package/components/contextual-floating-button.yaml +155 -0
  19. package/components/control-chip.yaml +157 -88
  20. package/components/dialog.yaml +119 -18
  21. package/components/divider.yaml +17 -0
  22. package/components/extended-action-sheet-close-button.yaml +50 -0
  23. package/components/extended-action-sheet-item.yaml +67 -0
  24. package/components/extended-action-sheet.yaml +134 -0
  25. package/components/extended-fab.yaml +102 -0
  26. package/components/fab.yaml +38 -20
  27. package/components/floating-action-button.yaml +99 -0
  28. package/components/help-bubble.yaml +121 -32
  29. package/components/identity-placeholder.yaml +23 -0
  30. package/components/inline-banner.yaml +188 -141
  31. package/components/link-content.yaml +60 -0
  32. package/components/manner-temp-badge.yaml +78 -0
  33. package/components/manner-temp.yaml +61 -0
  34. package/components/menu-sheet-close-button.yaml +49 -0
  35. package/components/menu-sheet-item.yaml +70 -0
  36. package/components/menu-sheet.yaml +133 -0
  37. package/components/notification-badge.yaml +67 -0
  38. package/components/progress-circle.yaml +83 -40
  39. package/components/radio.yaml +67 -71
  40. package/components/reaction-button.yaml +159 -0
  41. package/components/segmented-control-item.yaml +54 -0
  42. package/components/segmented-control.yaml +41 -30
  43. package/components/select-box.yaml +152 -0
  44. package/components/skeleton.yaml +56 -0
  45. package/components/snackbar.yaml +125 -0
  46. package/components/switch.yaml +98 -46
  47. package/components/tab.yaml +49 -31
  48. package/components/tablist.yaml +56 -15
  49. package/components/text-button.yaml +41 -57
  50. package/components/text-field.yaml +361 -0
  51. package/components/toggle-button.yaml +196 -0
  52. package/components/top-navigation.yaml +100 -0
  53. package/components/typography.yaml +167 -138
  54. package/dimension.yaml +88 -0
  55. package/duration.yaml +25 -0
  56. package/font-size.yaml +9 -0
  57. package/gradient.yaml +168 -0
  58. package/line-height.yaml +4 -4
  59. package/package.json +5 -2
  60. package/radius.yaml +10 -10
  61. package/timing-function.yaml +37 -0
  62. package/components/expand-button.yaml +0 -34
  63. package/unit.yaml +0 -70
package/components/tablist.yaml CHANGED
@@ -4,20 +4,61 @@ metadata:
4
4
  id: tablist
5
5
  name: Tablist
6
6
  data:
7
- base:
8
- enabled:
7
+ schema:
8
+ slots:
9
9
  root:
10
- color: $color.bg.layer-default
11
- strokeBottomWidth: 1px
12
- strokeColor: $color.stroke.neutral
10
+ properties:
11
+ color:
12
+ type: color
13
+ strokeBottomWidth:
14
+ type: dimension
15
+ strokeColor:
16
+ type: color
17
+ paddingX:
18
+ type: dimension
19
+ height:
20
+ type: dimension
13
21
  indicator:
14
- height: 2px
15
- color: $color.fg.neutral
16
- layout=hug:
17
- enabled:
18
- root:
19
- paddingX: $unit.x4
20
- layout=fill:
21
- enabled:
22
- root:
23
- paddingX: 0px
22
+ properties:
23
+ height:
24
+ type: dimension
25
+ color:
26
+ type: color
27
+ transformDuration:
28
+ type: duration
29
+ transformTimingFunction:
30
+ type: cubicBezier
31
+ insetX:
32
+ type: dimension
33
+ definitions:
34
+ base:
35
+ enabled:
36
+ root:
37
+ color: $color.bg.layer-default
38
+ strokeBottomWidth: 1px
39
+ strokeColor: $color.stroke.neutral
40
+ indicator:
41
+ height: 2px
42
+ color: $color.fg.neutral
43
+ transformDuration: $duration.d4
44
+ transformTimingFunction: $timing-function.easing
45
+ layout=hug:
46
+ enabled:
47
+ root:
48
+ paddingX: $dimension.spacing-x.global-gutter
49
+ indicator:
50
+ insetX: 0px
51
+ layout=fill:
52
+ enabled:
53
+ root:
54
+ paddingX: 0px
55
+ indicator:
56
+ insetX: $dimension.spacing-x.global-gutter
57
+ size=small:
58
+ enabled:
59
+ root:
60
+ height: 40px
61
+ size=medium:
62
+ enabled:
63
+ root:
64
+ height: 44px
package/components/text-button.yaml CHANGED
@@ -4,61 +4,45 @@ metadata:
4
4
  id: text-button
5
5
  name: Text Button
6
6
  data:
7
- base:
8
- enabled:
9
- root:
10
- paddingY: $unit.x0_5
11
- gap: $unit.x0_5
12
- borderWidth: 0.125rem
13
- label:
14
- fontWeight: $font-weight.regular
15
- pressed:
16
- root:
17
- color: $color.palette.gray-200
18
- borderColor: $color.palette.gray-200
19
- disabled:
20
- root:
21
- color: $color.fg.disabled
22
- variant=brand:
23
- enabled:
24
- root:
25
- color: $color.fg.brand
26
- variant=neutral:
27
- enabled:
28
- root:
29
- color: $color.fg.neutral
30
- variant=neutral subtle:
31
- enabled:
32
- root:
33
- color: $color.fg.neutral-subtle
34
- variant=danger:
35
- enabled:
36
- root:
37
- color: $color.fg.danger
38
- size=large:
39
- enabled:
40
- root:
41
- cornerRadius: $radius.x1_5
42
- icon:
43
- size: $unit.x4
44
- label:
45
- fontSize: $font-size.t6
46
- lineHeight: $line-height.t6
47
- size=medium:
48
- enabled:
49
- root:
50
- cornerRadius: $radius.x1_5
51
- icon:
52
- size: $unit.x3_5
53
- label:
54
- fontSize: $font-size.t5
55
- lineHeight: $line-height.t5
56
- size=small:
57
- enabled:
58
- root:
59
- cornerRadius: $radius.x1
60
- icon:
61
- size: $unit.x3_5
7
+ schema:
8
+ slots:
9
+ root:
10
+ properties:
11
+ color:
12
+ type: color
13
+ minHeight:
14
+ type: dimension
15
+ minWidth:
16
+ type: dimension
17
+ cornerRadius:
18
+ type: dimension
19
+ paddingX:
20
+ type: dimension
21
+ paddingY:
22
+ type: dimension
62
23
  label:
63
- fontSize: $font-size.t4
64
- lineHeight: $line-height.t4
24
+ properties:
25
+ color:
26
+ type: color
27
+ fontWeight:
28
+ type: number
29
+ fontSize:
30
+ type: dimension
31
+ lineHeight:
32
+ type: dimension
33
+ definitions:
34
+ base:
35
+ enabled:
36
+ root:
37
+ minHeight: $dimension.x9
38
+ paddingX: $dimension.x3_5
39
+ paddingY: $dimension.x2
40
+ cornerRadius: $radius.r2
41
+ label:
42
+ color: $color.fg.neutral-muted
43
+ fontSize: $font-size.t4
44
+ lineHeight: $line-height.t4
45
+ fontWeight: $font-weight.bold
46
+ pressed:
47
+ root:
48
+ color: $color.bg.layer-default-pressed
package/components/text-field.yaml ADDED
@@ -0,0 +1,361 @@
1
+ # yaml-language-server: $schema=./schema.json
2
+ kind: ComponentSpec
3
+ metadata:
4
+ id: text-field
5
+ name: Text Field
6
+ data:
7
+ schema:
8
+ slots:
9
+ header:
10
+ properties:
11
+ paddingBottom:
12
+ type: dimension
13
+ gap:
14
+ type: dimension
15
+ label:
16
+ properties:
17
+ color:
18
+ type: color
19
+ fontWeight:
20
+ type: number
21
+ fontSize:
22
+ type: dimension
23
+ lineHeight:
24
+ type: dimension
25
+ indicator:
26
+ properties:
27
+ color:
28
+ type: color
29
+ fontWeight:
30
+ type: number
31
+ fontSize:
32
+ type: dimension
33
+ lineHeight:
34
+ type: dimension
35
+ field:
36
+ properties:
37
+ color:
38
+ type: color
39
+ strokeWidth:
40
+ type: dimension
41
+ strokeColor:
42
+ type: color
43
+ minHeight:
44
+ type: dimension
45
+ cornerRadius:
46
+ type: dimension
47
+ gap:
48
+ type: dimension
49
+ paddingX:
50
+ type: dimension
51
+ paddingY:
52
+ type: dimension
53
+ value:
54
+ properties:
55
+ color:
56
+ type: color
57
+ fontSize:
58
+ type: dimension
59
+ lineHeight:
60
+ type: dimension
61
+ placeholder:
62
+ properties:
63
+ color:
64
+ type: color
65
+ prefixText:
66
+ properties:
67
+ color:
68
+ type: color
69
+ fontSize:
70
+ type: dimension
71
+ lineHeight:
72
+ type: dimension
73
+ prefixIcon:
74
+ properties:
75
+ color:
76
+ type: color
77
+ size:
78
+ type: dimension
79
+ suffixText:
80
+ properties:
81
+ color:
82
+ type: color
83
+ fontSize:
84
+ type: dimension
85
+ lineHeight:
86
+ type: dimension
87
+ suffixIcon:
88
+ properties:
89
+ color:
90
+ type: color
91
+ size:
92
+ type: dimension
93
+ footer:
94
+ properties:
95
+ gap:
96
+ type: dimension
97
+ paddingTop:
98
+ type: dimension
99
+ minHeight:
100
+ type: dimension
101
+ description:
102
+ properties:
103
+ color:
104
+ type: color
105
+ fontWeight:
106
+ type: number
107
+ fontSize:
108
+ type: dimension
109
+ lineHeight:
110
+ type: dimension
111
+ errorMessage:
112
+ properties:
113
+ color:
114
+ type: color
115
+ fontWeight:
116
+ type: number
117
+ fontSize:
118
+ type: dimension
119
+ lineHeight:
120
+ type: dimension
121
+ errorIcon:
122
+ properties:
123
+ size:
124
+ type: dimension
125
+ marginRight:
126
+ type: dimension
127
+ characterCount:
128
+ properties:
129
+ color:
130
+ type: color
131
+ fontWeight:
132
+ type: number
133
+ fontSize:
134
+ type: dimension
135
+ lineHeight:
136
+ type: dimension
137
+ maxCharacterCount:
138
+ properties:
139
+ color:
140
+ type: color
141
+ fontWeight:
142
+ type: number
143
+ fontSize:
144
+ type: dimension
145
+ lineHeight:
146
+ type: dimension
147
+ definitions:
148
+ base:
149
+ enabled:
150
+ label:
151
+ color: $color.fg.neutral
152
+ fontWeight: $font-weight.bold
153
+ indicator:
154
+ color: $color.fg.neutral
155
+ fontWeight: $font-weight.regular
156
+ field:
157
+ color: $color.bg.layer-default
158
+ strokeWidth: 1px
159
+ strokeColor: $color.stroke.field
160
+ value:
161
+ color: $color.fg.neutral
162
+ placeholder:
163
+ color: $color.fg.placeholder
164
+ prefixText:
165
+ color: $color.fg.neutral
166
+ prefixIcon:
167
+ color: $color.fg.neutral
168
+ suffixText:
169
+ color: $color.fg.neutral
170
+ suffixIcon:
171
+ color: $color.fg.neutral
172
+ description:
173
+ color: $color.fg.neutral-subtle
174
+ fontWeight: $font-weight.regular
175
+ errorMessage:
176
+ color: $color.fg.critical
177
+ fontWeight: $font-weight.regular
178
+ characterCount:
179
+ color: $color.fg.neutral
180
+ fontWeight: $font-weight.regular
181
+ maxCharacterCount:
182
+ color: $color.fg.neutral-subtle
183
+ fontWeight: $font-weight.regular
184
+ focused:
185
+ field:
186
+ strokeColor: $color.stroke.field-focused
187
+ invalid:
188
+ field:
189
+ color: $color.bg.critical-weak
190
+ strokeColor: $color.stroke.critical
191
+ invalid,focused:
192
+ field:
193
+ color: $color.bg.layer-default
194
+ strokeColor: $color.stroke.field
195
+ readonly:
196
+ field:
197
+ color: $color.bg.disabled
198
+ disabled:
199
+ field:
200
+ color: $color.bg.disabled
201
+ value:
202
+ color: $color.fg.disabled
203
+ placeholder:
204
+ color: $color.fg.disabled
205
+ prefixText:
206
+ color: $color.fg.disabled
207
+ prefixIcon:
208
+ color: $color.fg.disabled
209
+ suffixText:
210
+ color: $color.fg.disabled
211
+ suffixIcon:
212
+ color: $color.fg.disabled
213
+
214
+ size=xlarge:
215
+ enabled:
216
+ header:
217
+ paddingBottom: $dimension.x3
218
+ gap: $dimension.x1_5
219
+ label:
220
+ fontSize: $font-size.t5
221
+ lineHeight: $line-height.t5
222
+ indicator:
223
+ fontSize: $font-size.t5
224
+ lineHeight: $line-height.t5
225
+ field:
226
+ minHeight: 56px
227
+ cornerRadius: $radius.r2_5
228
+ gap: $dimension.x2
229
+ paddingX: $dimension.x4
230
+ paddingY: $dimension.x3
231
+ value:
232
+ fontSize: $font-size.t6
233
+ lineHeight: $line-height.t6
234
+ prefixText:
235
+ fontSize: $font-size.t6
236
+ lineHeight: $line-height.t6
237
+ prefixIcon:
238
+ size: $dimension.x5
239
+ suffixText:
240
+ fontSize: $font-size.t6
241
+ lineHeight: $line-height.t6
242
+ suffixIcon:
243
+ size: $dimension.x5
244
+ footer:
245
+ gap: $dimension.x3_5
246
+ paddingTop: $dimension.x2
247
+ minHeight: 20px
248
+ description:
249
+ fontSize: $font-size.t4
250
+ lineHeight: $line-height.t4
251
+ errorMessage:
252
+ fontSize: $font-size.t4
253
+ lineHeight: $line-height.t4
254
+ errorIcon:
255
+ size: $dimension.x4
256
+ marginRight: $dimension.x1
257
+ characterCount:
258
+ fontSize: $font-size.t2
259
+ lineHeight: $line-height.t2
260
+ maxCharacterCount:
261
+ fontSize: $font-size.t2
262
+ lineHeight: $line-height.t2
263
+
264
+ size=large:
265
+ enabled:
266
+ header:
267
+ paddingBottom: $dimension.x3
268
+ gap: $dimension.x1_5
269
+ label:
270
+ fontSize: $font-size.t5
271
+ lineHeight: $line-height.t5
272
+ indicator:
273
+ fontSize: $font-size.t5
274
+ lineHeight: $line-height.t5
275
+ field:
276
+ minHeight: 52px
277
+ cornerRadius: $radius.r2_5
278
+ gap: $dimension.x2
279
+ paddingX: $dimension.x4
280
+ paddingY: $dimension.x3
281
+ value:
282
+ fontSize: $font-size.t5
283
+ lineHeight: $line-height.t5
284
+ prefixText:
285
+ fontSize: $font-size.t5
286
+ lineHeight: $line-height.t5
287
+ prefixIcon:
288
+ size: $dimension.x5
289
+ suffixText:
290
+ fontSize: $font-size.t5
291
+ lineHeight: $line-height.t5
292
+ suffixIcon:
293
+ size: $dimension.x5
294
+ footer:
295
+ gap: $dimension.x3_5
296
+ paddingTop: $dimension.x2
297
+ minHeight: 20px
298
+ description:
299
+ fontSize: $font-size.t4
300
+ lineHeight: $line-height.t4
301
+ errorMessage:
302
+ fontSize: $font-size.t4
303
+ lineHeight: $line-height.t4
304
+ errorIcon:
305
+ size: $dimension.x4
306
+ marginRight: $dimension.x1
307
+ characterCount:
308
+ fontSize: $font-size.t2
309
+ lineHeight: $line-height.t2
310
+ maxCharacterCount:
311
+ fontSize: $font-size.t2
312
+ lineHeight: $line-height.t2
313
+
314
+ size=medium:
315
+ enabled:
316
+ header:
317
+ paddingBottom: $dimension.x3
318
+ label:
319
+ fontSize: $font-size.t4
320
+ lineHeight: $line-height.t4
321
+ indicator:
322
+ fontSize: $font-size.t4
323
+ lineHeight: $line-height.t4
324
+ field:
325
+ minHeight: 40px
326
+ cornerRadius: $radius.r2
327
+ gap: $dimension.x1_5
328
+ paddingX: $dimension.x3_5
329
+ paddingY: $dimension.x2_5
330
+ value:
331
+ fontSize: $font-size.t4
332
+ lineHeight: $line-height.t4
333
+ prefixText:
334
+ fontSize: $font-size.t4
335
+ lineHeight: $line-height.t4
336
+ prefixIcon:
337
+ size: $dimension.x4
338
+ suffixText:
339
+ fontSize: $font-size.t4
340
+ lineHeight: $line-height.t4
341
+ suffixIcon:
342
+ size: $dimension.x4
343
+ footer:
344
+ gap: $dimension.x3_5
345
+ paddingTop: $dimension.x2
346
+ minHeight: $dimension.x4
347
+ description:
348
+ fontSize: $font-size.t2
349
+ lineHeight: $line-height.t2
350
+ errorMessage:
351
+ fontSize: $font-size.t2
352
+ lineHeight: $line-height.t2
353
+ errorIcon:
354
+ size: $dimension.x3_5
355
+ marginRight: $dimension.x1
356
+ characterCount:
357
+ fontSize: $font-size.t2
358
+ lineHeight: $line-height.t2
359
+ maxCharacterCount:
360
+ fontSize: $font-size.t2
361
+ lineHeight: $line-height.t2