@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/chip-tab.yaml CHANGED
@@ -4,64 +4,87 @@ metadata:
4
4
  id: chip-tab
5
5
  name: Chip Tab
6
6
  data:
7
- base:
8
- enabled:
7
+ schema:
8
+ slots:
9
9
  root:
10
- paddingX: $unit.x3_5
11
- paddingY: $unit.x2
12
- cornerRadius: $radius.full
13
- minHeight: 36px
10
+ properties:
11
+ paddingX:
12
+ type: dimension
13
+ paddingY:
14
+ type: dimension
15
+ cornerRadius:
16
+ type: dimension
17
+ minHeight:
18
+ type: dimension
19
+ color:
20
+ type: color
14
21
  label:
15
- fontSize: $font-size.t4
16
- fontWeight: $font-weight.bold
17
- variant=neutral solid:
18
- enabled:
19
- label:
20
- color: $color.fg.neutral
21
- fontWeight: $font-weight.bold
22
- enabled,pressed:
23
- root:
24
- color: $color.bg.layer-default-pressed
25
- selected:
26
- root:
27
- color: $color.bg.neutral-solid
28
- label:
29
- color: $color.fg.neutral-inverted
30
- selected,pressed:
31
- root:
32
- color: $color.bg.neutral-solid-pressed
33
- disabled:
34
- label:
35
- color: $color.fg.disabled
36
- selected,disabled:
37
- root:
38
- color: $color.bg.disabled
39
- label:
40
- color: $color.fg.disabled
41
- variant=brand solid:
42
- enabled:
43
- root:
44
- color: $color.bg.neutral-weak
45
- label:
46
- color: $color.fg.neutral-muted
47
- fontWeight: $font-weight.medium
48
- enabled,pressed:
49
- root:
50
- color: $color.bg.neutral-weak-pressed
51
- selected:
52
- root:
53
- color: $color.bg.brand-solid
54
- label:
55
- color: $color.fg.static-white
56
- fontWeight: $font-weight.bold
57
- selected,pressed:
58
- root:
59
- color: $color.bg.brand-solid-pressed
60
- disabled:
61
- root:
62
- color: $color.bg.disabled
63
- label:
64
- color: $color.fg.disabled
65
- selected,disabled:
66
- root:
67
- color: $color.bg.disabled
22
+ properties:
23
+ fontSize:
24
+ type: dimension
25
+ fontWeight:
26
+ type: number
27
+ color:
28
+ type: color
29
+ definitions:
30
+ base:
31
+ enabled:
32
+ root:
33
+ paddingX: $dimension.x3_5
34
+ paddingY: $dimension.x2
35
+ cornerRadius: $radius.full
36
+ minHeight: 36px
37
+ label:
38
+ fontSize: $font-size.t4
39
+ fontWeight: $font-weight.bold
40
+ variant=neutralSolid:
41
+ enabled:
42
+ label:
43
+ color: $color.fg.neutral
44
+ fontWeight: $font-weight.bold
45
+ enabled,pressed:
46
+ root:
47
+ color: $color.bg.layer-default-pressed
48
+ selected:
49
+ root:
50
+ color: $color.bg.neutral-inverted
51
+ label:
52
+ color: $color.fg.neutral-inverted
53
+ selected,pressed:
54
+ root:
55
+ color: $color.bg.neutral-inverted-pressed
56
+ disabled:
57
+ label:
58
+ color: $color.fg.disabled
59
+ selected,disabled:
60
+ root:
61
+ color: $color.bg.disabled
62
+ label:
63
+ color: $color.fg.disabled
64
+ variant=brandSolid:
65
+ enabled:
66
+ root:
67
+ color: $color.bg.neutral-weak
68
+ label:
69
+ color: $color.fg.neutral-muted
70
+ fontWeight: $font-weight.medium
71
+ enabled,pressed:
72
+ root:
73
+ color: $color.bg.neutral-weak-pressed
74
+ selected:
75
+ root:
76
+ color: $color.bg.brand-solid
77
+ label:
78
+ color: $color.palette.static-white
79
+ fontWeight: $font-weight.bold
80
+ selected,pressed:
81
+ root:
82
+ color: $color.bg.brand-solid-pressed
83
+ disabled:
84
+ root:
85
+ color: $color.bg.disabled
86
+ label:
87
+ color: $color.fg.disabled
88
+ selected,disabled:
89
+ root:
90
+ color: $color.bg.disabled
package/components/chip-tablist.yaml CHANGED
@@ -4,15 +4,24 @@ metadata:
4
4
  id: chip-tablist
5
5
  name: Chip Tablist
6
6
  data:
7
- base:
8
- enabled:
7
+ schema:
8
+ slots:
9
9
  root:
10
- paddingX: $unit.x4
11
- variant=neutral solid:
12
- enabled:
13
- triggerList:
14
- gap: 0px
15
- variant=brand solid:
16
- enabled:
17
- triggerList:
18
- gap: 8px
10
+ properties:
11
+ paddingX:
12
+ type: dimension
13
+ gap:
14
+ type: dimension
15
+ definitions:
16
+ base:
17
+ enabled:
18
+ root:
19
+ paddingX: $dimension.x4
20
+ variant=neutralSolid:
21
+ enabled:
22
+ root:
23
+ gap: 0px
24
+ variant=brandSolid:
25
+ enabled:
26
+ root:
27
+ gap: 8px
package/components/chip.yaml ADDED
@@ -0,0 +1,314 @@
1
+ # yaml-language-server: $schema=./schema.json
2
+ kind: ComponentSpec
3
+ metadata:
4
+ id: chip
5
+ name: Chip
6
+ lastUpdated: 25-07-17
7
+ data:
8
+ schema:
9
+ slots:
10
+ root:
11
+ properties:
12
+ colorDuration:
13
+ type: duration
14
+ colorTimingFunction:
15
+ type: cubicBezier
16
+ strokeColor:
17
+ type: color
18
+ strokeWidth:
19
+ type: dimension
20
+ cornerRadius:
21
+ type: dimension
22
+ height:
23
+ type: dimension
24
+ gap:
25
+ type: dimension
26
+ paddingX:
27
+ type: dimension
28
+ minWidth:
29
+ type: dimension
30
+ color:
31
+ type: color
32
+ opacity:
33
+ type: number
34
+ label:
35
+ properties:
36
+ color:
37
+ type: color
38
+ fontWeight:
39
+ type: number
40
+ fontSize:
41
+ type: dimension
42
+ lineHeight:
43
+ type: dimension
44
+ prefixIcon:
45
+ properties:
46
+ color:
47
+ type: color
48
+ size:
49
+ type: dimension
50
+ prefixAvatar:
51
+ properties:
52
+ size:
53
+ type: dimension
54
+ suffixIcon:
55
+ properties:
56
+ color:
57
+ type: color
58
+ size:
59
+ type: dimension
60
+ icon:
61
+ properties:
62
+ color:
63
+ type: color
64
+ size:
65
+ type: dimension
66
+ definitions:
67
+ base:
68
+ enabled:
69
+ root:
70
+ colorDuration: $duration.d4
71
+ colorTimingFunction: $timing-function.easing
72
+ cornerRadius: $radius.full
73
+ prefixIcon:
74
+ paddingLeft: $dimension.x1_5
75
+ prefixAvatar:
76
+ size: $dimension.x6
77
+ suffixIcon:
78
+ paddingRight: $dimension.x1_5
79
+ label:
80
+ fontWeight: $font-weight.medium
81
+ paddingX: $dimension.x1_5
82
+ icon:
83
+ color: $color.fg.neutral
84
+
85
+ variant=solid:
86
+ enabled:
87
+ root:
88
+ color: $color.bg.neutral-weak
89
+ label:
90
+ color: $color.fg.neutral
91
+ prefixIcon:
92
+ color: $color.fg.neutral
93
+ suffixIcon:
94
+ color: $color.fg.neutral
95
+ icon:
96
+ color: $color.fg.neutral
97
+ pressed:
98
+ root:
99
+ color: $color.bg.neutral-weak-pressed
100
+ label:
101
+ color: $color.fg.neutral
102
+ prefixIcon:
103
+ color: $color.fg.neutral
104
+ suffixIcon:
105
+ color: $color.fg.neutral
106
+ icon:
107
+ color: $color.fg.neutral
108
+ disabled:
109
+ root:
110
+ opacity: 0.5
111
+ selected:
112
+ root:
113
+ color: $color.bg.neutral-inverted
114
+ label:
115
+ color: $color.fg.neutral-inverted
116
+ prefixIcon:
117
+ color: $color.fg.neutral-inverted
118
+ suffixIcon:
119
+ color: $color.fg.neutral-inverted
120
+ icon:
121
+ color: $color.fg.neutral-inverted
122
+ selected, pressed:
123
+ root:
124
+ color: $color.bg.neutral-inverted-pressed
125
+ label:
126
+ color: $color.fg.neutral-inverted
127
+ prefixIcon:
128
+ color: $color.fg.neutral-inverted
129
+ suffixIcon:
130
+ color: $color.fg.neutral-inverted
131
+ icon:
132
+ color: $color.fg.neutral-inverted
133
+ selected, disabled:
134
+ root:
135
+ opacity: 0.5
136
+
137
+ variant=outlineStrong:
138
+ enabled:
139
+ root:
140
+ strokeColor: $color.stroke.neutral
141
+ strokeWidth: 1px
142
+ color: $color.bg.layer-default
143
+ label:
144
+ color: $color.fg.neutral
145
+ prefixIcon:
146
+ color: $color.fg.neutral
147
+ suffixIcon:
148
+ color: $color.fg.neutral
149
+ icon:
150
+ color: $color.fg.neutral
151
+ pressed:
152
+ root:
153
+ strokeColor: $color.stroke.neutral
154
+ strokeWidth: 1px
155
+ color: $color.bg.layer-default-pressed
156
+ label:
157
+ color: $color.fg.neutral
158
+ prefixIcon:
159
+ color: $color.fg.neutral
160
+ suffixIcon:
161
+ color: $color.fg.neutral
162
+ icon:
163
+ color: $color.fg.neutral
164
+ disabled:
165
+ root:
166
+ opacity: 0.5
167
+ selected:
168
+ root:
169
+ color: $color.bg.neutral-inverted
170
+ label:
171
+ color: $color.fg.neutral-inverted
172
+ prefixIcon:
173
+ color: $color.fg.neutral-inverted
174
+ suffixIcon:
175
+ color: $color.fg.neutral-inverted
176
+ icon:
177
+ color: $color.fg.neutral-inverted
178
+ selected, pressed:
179
+ root:
180
+ color: $color.bg.neutral-inverted-pressed
181
+ label:
182
+ color: $color.fg.neutral-inverted
183
+ prefixIcon:
184
+ color: $color.fg.neutral-inverted
185
+ suffixIcon:
186
+ color: $color.fg.neutral-inverted
187
+ icon:
188
+ color: $color.fg.neutral-inverted
189
+ selected, disabled:
190
+ root:
191
+ opacity: 0.5
192
+
193
+ variant=outlineWeak:
194
+ enabled:
195
+ root:
196
+ strokeColor: $color.stroke.neutral
197
+ strokeWidth: 1px
198
+ color: $color.bg.layer-default
199
+ label:
200
+ color: $color.fg.neutral
201
+ prefixIcon:
202
+ color: $color.fg.neutral
203
+ suffixIcon:
204
+ color: $color.fg.neutral
205
+ icon:
206
+ color: $color.fg.neutral
207
+ pressed:
208
+ root:
209
+ strokeColor: $color.stroke.neutral
210
+ strokeWidth: 1px
211
+ color: $color.bg.layer-default-pressed
212
+ label:
213
+ color: $color.fg.neutral
214
+ prefixIcon:
215
+ color: $color.fg.neutral
216
+ suffixIcon:
217
+ color: $color.fg.neutral
218
+ icon:
219
+ color: $color.fg.neutral
220
+ disabled:
221
+ root:
222
+ opacity: 0.5
223
+ selected:
224
+ root:
225
+ strokeColor: $color.stroke.field-focused
226
+ strokeWidth: 1px
227
+ color: $color.bg.neutral-weak
228
+ label:
229
+ color: $color.fg.neutral
230
+ prefixIcon:
231
+ color: $color.fg.neutral
232
+ suffixIcon:
233
+ color: $color.fg.neutral
234
+ icon:
235
+ color: $color.fg.neutral
236
+ selected, pressed:
237
+ root:
238
+ strokeColor: $color.stroke.field-focused
239
+ strokeWidth: 1px
240
+ color: $color.bg.neutral-weak-pressed
241
+ label:
242
+ color: $color.fg.neutral
243
+ prefixIcon:
244
+ color: $color.fg.neutral
245
+ suffixIcon:
246
+ color: $color.fg.neutral
247
+ icon:
248
+ color: $color.fg.neutral
249
+ selected, disabled:
250
+ root:
251
+ opacity: 0.5
252
+
253
+ size=small:
254
+ enabled:
255
+ root:
256
+ height: 32px
257
+ paddingX: $dimension.x1_5
258
+ label:
259
+ fontSize: $font-size.t4
260
+ lineHeight: $line-height.t4
261
+ prefixIcon:
262
+ size: $dimension.x3_5
263
+ suffixIcon:
264
+ size: $dimension.x3_5
265
+ prefixAvatar:
266
+ size: $dimension.x5
267
+ icon:
268
+ size: $dimension.x3_5
269
+ size=medium:
270
+ enabled:
271
+ root:
272
+ height: 36px
273
+ paddingX: $dimension.x2
274
+ label:
275
+ fontSize: $font-size.t4
276
+ lineHeight: $line-height.t4
277
+ prefixIcon:
278
+ size: $dimension.x4
279
+ suffixIcon:
280
+ size: $dimension.x3_5
281
+ prefixAvatar:
282
+ size: $dimension.x6
283
+ icon:
284
+ size: $dimension.x4
285
+ size=large:
286
+ enabled:
287
+ root:
288
+ height: 40px
289
+ paddingX: $dimension.x2_5
290
+ label:
291
+ fontSize: $font-size.t4
292
+ lineHeight: $line-height.t4
293
+ prefixIcon:
294
+ size: $dimension.x4
295
+ paddingLeft: $dimension.x1_5
296
+ suffixIcon:
297
+ size: $dimension.x4
298
+ prefixAvatar:
299
+ size: $dimension.x7
300
+ icon:
301
+ size: $dimension.x4
302
+
303
+ size=small,layout=iconOnly:
304
+ enabled:
305
+ root:
306
+ minWidth: $dimension.x8
307
+ size=medium,layout=iconOnly:
308
+ enabled:
309
+ root:
310
+ minWidth: $dimension.x9
311
+ size=large,layout=iconOnly:
312
+ enabled:
313
+ root:
314
+ minWidth: $dimension.x10
package/components/contextual-floating-button.yaml ADDED
@@ -0,0 +1,155 @@
1
+ # yaml-language-server: $schema=./schema.json
2
+ kind: ComponentSpec
3
+ metadata:
4
+ id: contextual-floating-button
5
+ name: Contextual Floating Button
6
+ data:
7
+ schema:
8
+ slots:
9
+ root:
10
+ properties:
11
+ cornerRadius:
12
+ type: dimension
13
+ shadow:
14
+ type: shadow
15
+ colorDuration:
16
+ type: duration
17
+ colorTimingFunction:
18
+ type: cubicBezier
19
+ color:
20
+ type: color
21
+ minHeight:
22
+ type: dimension
23
+ paddingX:
24
+ type: dimension
25
+ paddingY:
26
+ type: dimension
27
+ gap:
28
+ type: dimension
29
+ size:
30
+ type: dimension
31
+ progressCircle:
32
+ properties:
33
+ size:
34
+ type: dimension
35
+ thickness:
36
+ type: dimension
37
+ trackColor:
38
+ type: color
39
+ rangeColor:
40
+ type: color
41
+ label:
42
+ properties:
43
+ color:
44
+ type: color
45
+ fontSize:
46
+ type: dimension
47
+ lineHeight:
48
+ type: dimension
49
+ fontWeight:
50
+ type: number
51
+ prefixIcon:
52
+ properties:
53
+ color:
54
+ type: color
55
+ size:
56
+ type: dimension
57
+ icon:
58
+ properties:
59
+ color:
60
+ type: color
61
+ size:
62
+ type: dimension
63
+ definitions:
64
+ base:
65
+ enabled:
66
+ root:
67
+ cornerRadius: $radius.full
68
+ shadow:
69
+ type: shadow
70
+ value:
71
+ - offsetX: 0px
72
+ offsetY: 2px
73
+ blur: 6px
74
+ spread: 0px
75
+ color: "#00000026"
76
+ colorDuration: $duration.d4
77
+ colorTimingFunction: $timing-function.easing
78
+ progressCircle:
79
+ size: 16px
80
+ thickness: 2px
81
+ variant=solid:
82
+ enabled:
83
+ root:
84
+ color: $color.bg.neutral-inverted
85
+ progressCircle:
86
+ trackColor: $color.palette.gray-700
87
+ rangeColor: $color.fg.neutral-inverted
88
+ label:
89
+ color: $color.fg.neutral-inverted
90
+ prefixIcon:
91
+ color: $color.fg.neutral-inverted
92
+ icon:
93
+ color: $color.fg.neutral-inverted
94
+ pressed:
95
+ root:
96
+ color: $color.bg.neutral-inverted-pressed
97
+ disabled:
98
+ root:
99
+ color: $color.bg.disabled
100
+ label:
101
+ color: $color.fg.disabled
102
+ prefixIcon:
103
+ color: $color.fg.disabled
104
+ icon:
105
+ color: $color.fg.disabled
106
+ loading:
107
+ root:
108
+ color: $color.bg.neutral-inverted-pressed
109
+ variant=layer:
110
+ enabled:
111
+ root:
112
+ color: $color.bg.layer-floating
113
+ progressCircle:
114
+ trackColor: $color.palette.gray-500
115
+ rangeColor: $color.fg.neutral
116
+ label:
117
+ color: $color.fg.neutral
118
+ prefixIcon:
119
+ color: $color.fg.neutral
120
+ icon:
121
+ color: $color.fg.neutral
122
+ pressed:
123
+ root:
124
+ color: $color.bg.layer-floating-pressed
125
+ disabled:
126
+ root:
127
+ color: $color.bg.disabled
128
+ label:
129
+ color: $color.fg.disabled
130
+ prefixIcon:
131
+ color: $color.fg.disabled
132
+ icon:
133
+ color: $color.fg.disabled
134
+ loading:
135
+ root:
136
+ color: $color.bg.layer-floating-pressed
137
+ layout=withText:
138
+ enabled:
139
+ root:
140
+ minHeight: 36px
141
+ paddingX: $dimension.x3_5
142
+ paddingY: $dimension.x2
143
+ gap: $dimension.x1
144
+ label:
145
+ fontSize: $font-size.t4
146
+ lineHeight: $line-height.t4
147
+ fontWeight: $font-weight.medium
148
+ prefixIcon:
149
+ size: 16px
150
+ layout=iconOnly:
151
+ enabled:
152
+ root:
153
+ size: 44px
154
+ icon:
155
+ size: 22px