@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/action-button.yaml CHANGED
@@ -4,212 +4,422 @@ metadata:
4
4
  id: action-button
5
5
  name: Action Button
6
6
  data:
7
- base:
8
- enabled:
7
+ schema:
8
+ slots:
9
+ root:
10
+ properties:
11
+ colorDuration:
12
+ type: duration
13
+ colorTimingFunction:
14
+ type: cubicBezier
15
+ color:
16
+ type: color
17
+ strokeColor:
18
+ type: color
19
+ strokeWidth:
20
+ type: dimension
21
+ minHeight:
22
+ type: dimension
23
+ minWidth:
24
+ type: dimension
25
+ cornerRadius:
26
+ type: dimension
27
+ gap:
28
+ type: dimension
29
+ paddingX:
30
+ type: dimension
31
+ paddingY:
32
+ type: dimension
9
33
  label:
10
- fontWeight: "$font-weight.bold"
11
- variant=brand solid:
12
- enabled:
13
- root:
14
- color: "$color.bg.brand-solid"
15
- label:
16
- color: "$color.fg.static-white"
34
+ properties:
35
+ color:
36
+ type: color
37
+ fontWeight:
38
+ type: number
39
+ fontSize:
40
+ type: dimension
41
+ lineHeight:
42
+ type: dimension
17
43
  icon:
18
- color: "$color.fg.static-white"
44
+ description: Icon Only 레이아웃에서 사용되는 아이콘 슬롯입니다.
45
+ properties:
46
+ color:
47
+ type: color
48
+ size:
49
+ type: dimension
19
50
  prefixIcon:
20
- color: "$color.fg.static-white"
51
+ properties:
52
+ color:
53
+ type: color
54
+ size:
55
+ type: dimension
21
56
  suffixIcon:
22
- color: "$color.fg.static-white"
23
- pressed:
24
- root:
25
- color: "$color.bg.brand-solid-pressed"
26
- disabled:
27
- root:
28
- color: "$color.bg.disabled"
29
- loading:
30
- root:
31
- color: "$color.bg.brand-solid-pressed"
32
- variant=brand weak:
33
- enabled:
34
- root:
35
- color: "$color.bg.brand-weak"
36
- label:
37
- color: "$color.fg.brand"
38
- icon:
39
- color: "$color.fg.brand"
40
- prefixIcon:
41
- color: "$color.fg.brand"
42
- suffixIcon:
43
- color: "$color.fg.brand"
44
- pressed:
45
- root:
46
- color: "$color.bg.brand-weak-pressed"
47
- disabled:
48
- root:
49
- color: "$color.bg.disabled"
50
- loading:
51
- root:
52
- color: "$color.bg.brand-weak-pressed"
53
- variant=neutral solid:
54
- enabled:
55
- root:
56
- color: "$color.bg.neutral-solid"
57
- label:
58
- color: "$color.fg.neutral-inverted"
59
- icon:
60
- color: "$color.fg.neutral-inverted"
61
- prefixIcon:
62
- color: "$color.fg.neutral-inverted"
63
- suffixIcon:
64
- color: "$color.fg.neutral-inverted"
65
- pressed:
66
- root:
67
- color: "$color.bg.neutral-solid-pressed"
68
- disabled:
69
- root:
70
- color: "$color.bg.disabled"
71
- loading:
72
- root:
73
- color: "$color.bg.neutral-solid-pressed"
74
- variant=neutral weak:
75
- enabled:
76
- root:
77
- color: "$color.bg.neutral-weak"
78
- label:
79
- color: "$color.fg.neutral"
80
- icon:
81
- color: "$color.fg.neutral"
82
- prefixIcon:
83
- color: "$color.fg.neutral"
84
- suffixIcon:
85
- color: "$color.fg.neutral"
86
- pressed:
87
- root:
88
- color: "$color.bg.neutral-weak-pressed"
89
- disabled:
90
- root:
91
- color: "$color.bg.disabled"
92
- loading:
93
- root:
94
- color: "$color.bg.neutral-weak-pressed"
95
- variant=danger solid:
96
- enabled:
97
- root:
98
- color: "$color.bg.danger-solid"
99
- label:
100
- color: "$color.fg.static-white"
101
- icon:
102
- color: "$color.fg.static-white"
103
- prefixIcon:
104
- color: "$color.fg.static-white"
105
- suffixIcon:
106
- color: "$color.fg.static-white"
107
- pressed:
108
- root:
109
- color: "$color.bg.danger-solid-pressed"
110
- disabled:
111
- root:
112
- color: "$color.bg.disabled"
113
- loading:
114
- root:
115
- color: "$color.bg.danger-solid-pressed"
116
- size=xsmall:
117
- enabled:
118
- root:
119
- minHeight: "$unit.x8"
120
- cornerRadius: "$radius.full"
121
- size=xsmall, layout=with text:
122
- enabled:
123
- root:
124
- gap: "$unit.x1"
125
- paddingX: "$unit.x3_5"
126
- paddingY: "$unit.x1_5"
127
- prefixIcon:
128
- size: "$unit.x3_5"
129
- suffixIcon:
130
- size: "$unit.x3_5"
131
- label:
132
- fontSize: "$font-size.t4"
133
- size=xsmall, layout=icon only:
134
- enabled:
135
- root:
136
- minWidth: "$unit.x8"
137
- paddingX: "$unit.x1_5"
138
- paddingY: "$unit.x1_5"
139
- icon:
140
- size: "$unit.x3_5"
141
- size=small:
142
- enabled:
143
- root:
144
- minHeight: "$unit.x9"
145
- cornerRadius: "$radius.x2"
146
- size=small, layout=with text:
147
- enabled:
148
- root:
149
- gap: "$unit.x1"
150
- paddingX: "$unit.x3_5"
151
- paddingY: "$unit.x2"
152
- prefixIcon:
153
- size: "$unit.x3_5"
154
- suffixIcon:
155
- size: "$unit.x3_5"
156
- label:
157
- fontSize: "$font-size.t4"
158
- size=small, layout=icon only:
159
- enabled:
160
- root:
161
- minWidth: "$unit.x9"
162
- paddingX: "$unit.x2"
163
- paddingY: "$unit.x2"
164
- icon:
165
- size: "$unit.x4"
166
- size=medium:
167
- enabled:
168
- root:
169
- minHeight: "$unit.x10"
170
- cornerRadius: "$radius.x2"
171
- size=medium, layout=with text:
172
- enabled:
173
- root:
174
- gap: "$unit.x1"
175
- paddingX: "$unit.x4"
176
- paddingY: "$unit.x2_5"
177
- prefixIcon:
178
- size: "$unit.x4"
179
- suffixIcon:
180
- size: "$unit.x4"
181
- label:
182
- fontSize: "$font-size.t4"
183
- size=medium, layout=icon only:
184
- enabled:
185
- root:
186
- minWidth: "$unit.x10"
187
- paddingX: "$unit.x2_5"
188
- paddingY: "$unit.x2_5"
189
- icon:
190
- size: "18px"
191
- size=large:
192
- enabled:
193
- root:
194
- minHeight: "$unit.x13"
195
- cornerRadius: "$radius.x3"
196
- size=large, layout=with text:
197
- enabled:
198
- root:
199
- gap: "$unit.x2"
200
- paddingX: "$unit.x5"
201
- paddingY: "$unit.x3_5"
202
- prefixIcon:
203
- size: "22px"
204
- suffixIcon:
205
- size: "22px"
206
- label:
207
- fontSize: "$font-size.t6"
208
- size=large, layout=icon only:
209
- enabled:
210
- root:
211
- minWidth: "$unit.x13"
212
- paddingX: "$unit.x3_5"
213
- paddingY: "$unit.x3_5"
214
- icon:
215
- size: "22px"
57
+ properties:
58
+ color:
59
+ type: color
60
+ size:
61
+ type: dimension
62
+ progressCircle:
63
+ properties:
64
+ trackColor:
65
+ type: color
66
+ rangeColor:
67
+ type: color
68
+ size:
69
+ type: dimension
70
+ thickness:
71
+ type: dimension
72
+ definitions:
73
+ base:
74
+ enabled:
75
+ root:
76
+ colorDuration: $duration.d4
77
+ colorTimingFunction: $timing-function.easing
78
+ label:
79
+ fontWeight: $font-weight.bold
80
+ variant=brandSolid:
81
+ enabled:
82
+ root:
83
+ color: $color.bg.brand-solid
84
+ label:
85
+ color: $color.palette.static-white
86
+ icon:
87
+ color: $color.palette.static-white
88
+ prefixIcon:
89
+ color: $color.palette.static-white
90
+ suffixIcon:
91
+ color: $color.palette.static-white
92
+ progressCircle:
93
+ trackColor: $color.palette.static-white-alpha-300
94
+ rangeColor: $color.palette.static-white
95
+ pressed:
96
+ root:
97
+ color: $color.bg.brand-solid-pressed
98
+ disabled:
99
+ root:
100
+ color: $color.bg.disabled
101
+ label:
102
+ color: $color.fg.disabled
103
+ icon:
104
+ color: $color.fg.disabled
105
+ prefixIcon:
106
+ color: $color.fg.disabled
107
+ suffixIcon:
108
+ color: $color.fg.disabled
109
+ loading:
110
+ root:
111
+ color: $color.bg.brand-solid-pressed
112
+ variant=neutralSolid:
113
+ enabled:
114
+ root:
115
+ color: $color.bg.neutral-inverted
116
+ label:
117
+ color: $color.fg.neutral-inverted
118
+ icon:
119
+ color: $color.fg.neutral-inverted
120
+ prefixIcon:
121
+ color: $color.fg.neutral-inverted
122
+ suffixIcon:
123
+ color: $color.fg.neutral-inverted
124
+ progressCircle:
125
+ trackColor: $color.palette.static-white-alpha-300
126
+ rangeColor: $color.palette.static-white
127
+ pressed:
128
+ root:
129
+ color: $color.bg.neutral-inverted-pressed
130
+ disabled:
131
+ root:
132
+ color: $color.bg.disabled
133
+ label:
134
+ color: $color.fg.disabled
135
+ icon:
136
+ color: $color.fg.disabled
137
+ prefixIcon:
138
+ color: $color.fg.disabled
139
+ suffixIcon:
140
+ color: $color.fg.disabled
141
+ loading:
142
+ root:
143
+ color: $color.bg.neutral-inverted-pressed
144
+ variant=neutralWeak:
145
+ enabled:
146
+ root:
147
+ color: $color.bg.neutral-weak
148
+ label:
149
+ color: $color.fg.neutral
150
+ icon:
151
+ color: $color.fg.neutral
152
+ prefixIcon:
153
+ color: $color.fg.neutral
154
+ suffixIcon:
155
+ color: $color.fg.neutral
156
+ progressCircle:
157
+ trackColor: $color.palette.gray-500
158
+ rangeColor: $color.fg.neutral
159
+ pressed:
160
+ root:
161
+ color: $color.bg.neutral-weak-pressed
162
+ disabled:
163
+ root:
164
+ color: $color.bg.disabled
165
+ label:
166
+ color: $color.fg.disabled
167
+ icon:
168
+ color: $color.fg.disabled
169
+ prefixIcon:
170
+ color: $color.fg.disabled
171
+ suffixIcon:
172
+ color: $color.fg.disabled
173
+ loading:
174
+ root:
175
+ color: $color.bg.neutral-weak-pressed
176
+ variant=criticalSolid:
177
+ enabled:
178
+ root:
179
+ color: $color.bg.critical-solid
180
+ label:
181
+ color: $color.palette.static-white
182
+ icon:
183
+ color: $color.palette.static-white
184
+ prefixIcon:
185
+ color: $color.palette.static-white
186
+ suffixIcon:
187
+ color: $color.palette.static-white
188
+ progressCircle:
189
+ trackColor: $color.palette.static-white-alpha-300
190
+ rangeColor: $color.palette.static-white
191
+ pressed:
192
+ root:
193
+ color: $color.bg.critical-solid-pressed
194
+ disabled:
195
+ root:
196
+ color: $color.bg.disabled
197
+ label:
198
+ color: $color.fg.disabled
199
+ icon:
200
+ color: $color.fg.disabled
201
+ prefixIcon:
202
+ color: $color.fg.disabled
203
+ suffixIcon:
204
+ color: $color.fg.disabled
205
+ loading:
206
+ root:
207
+ color: $color.bg.critical-solid-pressed
208
+ variant=neutralOutline:
209
+ enabled:
210
+ root:
211
+ color: $color.bg.layer-default
212
+ strokeColor: $color.stroke.neutral
213
+ strokeWidth: 1px
214
+ label:
215
+ color: $color.fg.neutral
216
+ icon:
217
+ color: $color.fg.neutral
218
+ prefixIcon:
219
+ color: $color.fg.neutral
220
+ suffixIcon:
221
+ color: $color.fg.neutral
222
+ progressCircle:
223
+ trackColor: $color.palette.gray-500
224
+ rangeColor: $color.fg.neutral
225
+ pressed:
226
+ root:
227
+ color: $color.bg.layer-default-pressed
228
+ disabled:
229
+ root:
230
+ color: $color.bg.layer-default
231
+ strokeColor: $color.stroke.neutral
232
+ label:
233
+ color: $color.fg.disabled
234
+ icon:
235
+ color: $color.fg.disabled
236
+ prefixIcon:
237
+ color: $color.fg.disabled
238
+ suffixIcon:
239
+ color: $color.fg.disabled
240
+ loading:
241
+ root:
242
+ color: $color.bg.layer-default
243
+ variant=brandOutline:
244
+ enabled:
245
+ root:
246
+ color: $color.bg.layer-default
247
+ strokeColor: $color.stroke.neutral
248
+ strokeWidth: 1px
249
+ label:
250
+ color: $color.fg.brand
251
+ icon:
252
+ color: $color.fg.brand
253
+ prefixIcon:
254
+ color: $color.fg.brand
255
+ suffixIcon:
256
+ color: $color.fg.brand
257
+ progressCircle:
258
+ trackColor: $color.palette.carrot-200
259
+ rangeColor: $color.bg.brand-solid
260
+ pressed:
261
+ root:
262
+ color: $color.bg.layer-default-pressed
263
+ disabled:
264
+ root:
265
+ color: $color.bg.layer-default
266
+ strokeColor: $color.stroke.neutral
267
+ label:
268
+ color: $color.fg.disabled
269
+ icon:
270
+ color: $color.fg.disabled
271
+ prefixIcon:
272
+ color: $color.fg.disabled
273
+ suffixIcon:
274
+ color: $color.fg.disabled
275
+ loading:
276
+ root:
277
+ color: $color.bg.layer-default
278
+ variant=ghost:
279
+ enabled:
280
+ root:
281
+ color: "#ffffff00"
282
+ label:
283
+ color: $color.fg.neutral
284
+ icon:
285
+ color: $color.fg.neutral
286
+ prefixIcon:
287
+ color: $color.fg.neutral
288
+ suffixIcon:
289
+ color: $color.fg.neutral
290
+ progressCircle:
291
+ trackColor: $color.palette.gray-500
292
+ rangeColor: $color.fg.neutral
293
+ pressed:
294
+ root:
295
+ color: $color.bg.layer-default-pressed
296
+ disabled:
297
+ root:
298
+ color: "#ffffff00"
299
+ label:
300
+ color: $color.fg.disabled
301
+ icon:
302
+ color: $color.fg.disabled
303
+ prefixIcon:
304
+ color: $color.fg.disabled
305
+ suffixIcon:
306
+ color: $color.fg.disabled
307
+ loading:
308
+ root:
309
+ color: $color.bg.layer-default-pressed
310
+ size=xsmall:
311
+ enabled:
312
+ root:
313
+ minHeight: $dimension.x8
314
+ cornerRadius: $radius.full
315
+ progressCircle:
316
+ size: 14px
317
+ thickness: 2px
318
+ size=xsmall, layout=withText:
319
+ enabled:
320
+ root:
321
+ gap: $dimension.x1
322
+ paddingX: $dimension.x3_5
323
+ paddingY: $dimension.x1_5
324
+ prefixIcon:
325
+ size: $dimension.x3_5
326
+ suffixIcon:
327
+ size: $dimension.x3_5
328
+ label:
329
+ fontSize: $font-size.t4
330
+ lineHeight: $line-height.t4
331
+ size=xsmall, layout=iconOnly:
332
+ enabled:
333
+ root:
334
+ minWidth: $dimension.x8
335
+ paddingX: $dimension.x1_5
336
+ paddingY: $dimension.x1_5
337
+ icon:
338
+ size: $dimension.x3_5
339
+ size=small:
340
+ enabled:
341
+ root:
342
+ minHeight: $dimension.x9
343
+ cornerRadius: $radius.r2
344
+ progressCircle:
345
+ size: 14px
346
+ thickness: 2px
347
+ size=small, layout=withText:
348
+ enabled:
349
+ root:
350
+ gap: $dimension.x1
351
+ paddingX: $dimension.x3_5
352
+ paddingY: $dimension.x2
353
+ prefixIcon:
354
+ size: $dimension.x3_5
355
+ suffixIcon:
356
+ size: $dimension.x3_5
357
+ label:
358
+ fontSize: $font-size.t4
359
+ lineHeight: $line-height.t4
360
+ size=small, layout=iconOnly:
361
+ enabled:
362
+ root:
363
+ minWidth: $dimension.x9
364
+ paddingX: $dimension.x2
365
+ paddingY: $dimension.x2
366
+ icon:
367
+ size: $dimension.x4
368
+ size=medium:
369
+ enabled:
370
+ root:
371
+ minHeight: $dimension.x10
372
+ cornerRadius: $radius.r2
373
+ progressCircle:
374
+ size: 16px
375
+ thickness: 2px
376
+ size=medium, layout=withText:
377
+ enabled:
378
+ root:
379
+ gap: $dimension.x1_5
380
+ paddingX: $dimension.x4
381
+ paddingY: $dimension.x2_5
382
+ prefixIcon:
383
+ size: $dimension.x4
384
+ suffixIcon:
385
+ size: $dimension.x4
386
+ label:
387
+ fontSize: $font-size.t4
388
+ lineHeight: $line-height.t4
389
+ size=medium, layout=iconOnly:
390
+ enabled:
391
+ root:
392
+ minWidth: $dimension.x10
393
+ paddingX: $dimension.x2_5
394
+ paddingY: $dimension.x2_5
395
+ icon:
396
+ size: 18px
397
+ size=large:
398
+ enabled:
399
+ root:
400
+ minHeight: $dimension.x13
401
+ cornerRadius: $radius.r3
402
+ progressCircle:
403
+ size: 18px
404
+ thickness: 2px
405
+ size=large, layout=withText:
406
+ enabled:
407
+ root:
408
+ gap: $dimension.x2
409
+ paddingX: $dimension.x5
410
+ paddingY: $dimension.x3_5
411
+ prefixIcon:
412
+ size: 22px
413
+ suffixIcon:
414
+ size: 22px
415
+ label:
416
+ fontSize: $font-size.t6
417
+ lineHeight: $line-height.t6
418
+ size=large, layout=iconOnly:
419
+ enabled:
420
+ root:
421
+ minWidth: $dimension.x13
422
+ paddingX: $dimension.x3_5
423
+ paddingY: $dimension.x3_5
424
+ icon:
425
+ size: 22px