@seed-design/rootage-artifacts 2.2.0 → 2.3.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.
@@ -42,13 +42,18 @@
42
42
  "cornerRadius": {
43
43
  "type": "dimension"
44
44
  },
45
- "marginX": {
45
+ "maxWidth": {
46
46
  "type": "dimension"
47
47
  },
48
- "marginY": {
49
- "type": "dimension"
48
+ "widthFraction": {
49
+ "type": "number",
50
+ "description": "viewport width 또는 parent width에 대한 비율입니다. viewport `md` 미만에서 적용합니다."
50
51
  },
51
- "maxWidth": {
52
+ "maxHeightFraction": {
53
+ "type": "number",
54
+ "description": "viewport height 또는 parent height에 대한 최대 비율입니다."
55
+ },
56
+ "marginX": {
52
57
  "type": "dimension"
53
58
  },
54
59
  "enterDuration": {
@@ -84,14 +89,43 @@
84
89
  },
85
90
  "paddingTop": {
86
91
  "type": "dimension"
92
+ },
93
+ "paddingBottom": {
94
+ "type": "dimension"
95
+ },
96
+ "closeButtonGap": {
97
+ "type": "dimension",
98
+ "description": "closeButton이 표시되는 경우 paddingRight에 추가되는 여백입니다."
87
99
  }
88
100
  }
89
101
  },
90
- "footer": {
102
+ "body": {
91
103
  "properties": {
92
- "gap": {
104
+ "paddingX": {
93
105
  "type": "dimension"
94
106
  },
107
+ "paddingBottom": {
108
+ "type": "dimension",
109
+ "description": "body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. 본문이 오버플로되어 스크롤 가능한 경우에만 적용됩니다."
110
+ },
111
+ "strokeWidth": {
112
+ "type": "dimension",
113
+ "description": "본문이 스크롤된(scrolled) 상태에서 body 상단에 나타나는 divider의 두께입니다."
114
+ },
115
+ "strokeColor": {
116
+ "type": "color",
117
+ "description": "본문이 스크롤된(scrolled) 상태에서 body 상단에 나타나는 divider의 색상입니다."
118
+ },
119
+ "strokeDuration": {
120
+ "type": "duration"
121
+ },
122
+ "strokeTimingFunction": {
123
+ "type": "cubicBezier"
124
+ }
125
+ }
126
+ },
127
+ "footer": {
128
+ "properties": {
95
129
  "paddingX": {
96
130
  "type": "dimension"
97
131
  },
@@ -134,9 +168,27 @@
134
168
  "type": "number"
135
169
  }
136
170
  }
171
+ },
172
+ "closeButton": {
173
+ "properties": {
174
+ "fromTop": {
175
+ "type": "dimension"
176
+ },
177
+ "fromRight": {
178
+ "type": "dimension"
179
+ }
180
+ }
137
181
  }
138
182
  },
139
- "variants": {}
183
+ "variants": {
184
+ "size": {
185
+ "values": {
186
+ "medium": {},
187
+ "large": {}
188
+ },
189
+ "defaultValue": "medium"
190
+ }
191
+ }
140
192
  },
141
193
  "definitions": [
142
194
  {
@@ -186,20 +238,17 @@
186
238
  "type": "dimension",
187
239
  "value": "$radius.r5"
188
240
  },
189
- "marginX": {
190
- "type": "dimension",
191
- "value": "$dimension.x8"
241
+ "widthFraction": {
242
+ "type": "number",
243
+ "value": 0.9
192
244
  },
193
- "marginY": {
194
- "type": "dimension",
195
- "value": "$dimension.x16"
245
+ "maxHeightFraction": {
246
+ "type": "number",
247
+ "value": 0.8
196
248
  },
197
- "maxWidth": {
249
+ "marginX": {
198
250
  "type": "dimension",
199
- "value": {
200
- "value": 272,
201
- "unit": "px"
202
- }
251
+ "value": "$dimension.x5"
203
252
  },
204
253
  "enterDuration": {
205
254
  "type": "duration",
@@ -237,21 +286,43 @@
237
286
  },
238
287
  "paddingX": {
239
288
  "type": "dimension",
240
- "value": "$dimension.x5"
289
+ "value": "$dimension.x6"
241
290
  },
242
291
  "paddingTop": {
243
292
  "type": "dimension",
244
- "value": "$dimension.x5"
293
+ "value": "$dimension.x6"
294
+ },
295
+ "paddingBottom": {
296
+ "type": "dimension",
297
+ "value": "$dimension.x4"
298
+ },
299
+ "closeButtonGap": {
300
+ "type": "dimension",
301
+ "value": "$dimension.x1_5"
245
302
  }
246
303
  },
247
- "footer": {
248
- "gap": {
304
+ "body": {
305
+ "paddingX": {
306
+ "type": "dimension",
307
+ "value": "$dimension.x6"
308
+ },
309
+ "paddingBottom": {
249
310
  "type": "dimension",
250
- "value": "$dimension.x2"
311
+ "value": "$dimension.x12"
251
312
  },
313
+ "strokeDuration": {
314
+ "type": "duration",
315
+ "value": "$duration.color-transition"
316
+ },
317
+ "strokeTimingFunction": {
318
+ "type": "cubicBezier",
319
+ "value": "$timing-function.easing"
320
+ }
321
+ },
322
+ "footer": {
252
323
  "paddingX": {
253
324
  "type": "dimension",
254
- "value": "$dimension.x5"
325
+ "value": "$dimension.x6"
255
326
  },
256
327
  "paddingTop": {
257
328
  "type": "dimension",
@@ -259,7 +330,7 @@
259
330
  },
260
331
  "paddingBottom": {
261
332
  "type": "dimension",
262
- "value": "$dimension.x5"
333
+ "value": "$dimension.x6"
263
334
  }
264
335
  },
265
336
  "title": {
@@ -269,11 +340,11 @@
269
340
  },
270
341
  "fontSize": {
271
342
  "type": "dimension",
272
- "value": "$font-size.t7"
343
+ "value": "$font-size.t8"
273
344
  },
274
345
  "lineHeight": {
275
346
  "type": "dimension",
276
- "value": "$line-height.t7"
347
+ "value": "$line-height.t8"
277
348
  },
278
349
  "fontWeight": {
279
350
  "type": "number",
@@ -283,7 +354,7 @@
283
354
  "description": {
284
355
  "color": {
285
356
  "type": "color",
286
- "value": "$color.fg.neutral"
357
+ "value": "$color.fg.neutral-muted"
287
358
  },
288
359
  "fontSize": {
289
360
  "type": "dimension",
@@ -297,6 +368,82 @@
297
368
  "type": "number",
298
369
  "value": "$font-weight.regular"
299
370
  }
371
+ },
372
+ "closeButton": {
373
+ "fromTop": {
374
+ "type": "dimension",
375
+ "value": "$dimension.x7"
376
+ },
377
+ "fromRight": {
378
+ "type": "dimension",
379
+ "value": "$dimension.x6"
380
+ }
381
+ }
382
+ }
383
+ },
384
+ {
385
+ "states": [
386
+ "scrolled"
387
+ ],
388
+ "slots": {
389
+ "body": {
390
+ "strokeColor": {
391
+ "type": "color",
392
+ "value": "$color.stroke.neutral-muted"
393
+ },
394
+ "strokeWidth": {
395
+ "type": "dimension",
396
+ "value": {
397
+ "value": 1,
398
+ "unit": "px"
399
+ }
400
+ }
401
+ }
402
+ }
403
+ }
404
+ ]
405
+ },
406
+ {
407
+ "variants": {
408
+ "size": "medium"
409
+ },
410
+ "definitions": [
411
+ {
412
+ "states": [
413
+ "enabled"
414
+ ],
415
+ "slots": {
416
+ "content": {
417
+ "maxWidth": {
418
+ "type": "dimension",
419
+ "value": {
420
+ "value": 480,
421
+ "unit": "px"
422
+ }
423
+ }
424
+ }
425
+ }
426
+ }
427
+ ]
428
+ },
429
+ {
430
+ "variants": {
431
+ "size": "large"
432
+ },
433
+ "definitions": [
434
+ {
435
+ "states": [
436
+ "enabled"
437
+ ],
438
+ "slots": {
439
+ "content": {
440
+ "maxWidth": {
441
+ "type": "dimension",
442
+ "value": {
443
+ "value": 800,
444
+ "unit": "px"
445
+ }
446
+ }
300
447
  }
301
448
  }
302
449
  }
@@ -0,0 +1,300 @@
1
+ {
2
+ "kind": "ComponentSpec",
3
+ "metadata": {
4
+ "id": "quantity-picker-button",
5
+ "name": "Quantity Picker Button"
6
+ },
7
+ "data": {
8
+ "id": "quantity-picker-button",
9
+ "name": "Quantity Picker Button",
10
+ "schema": {
11
+ "slots": {
12
+ "root": {
13
+ "properties": {
14
+ "size": {
15
+ "type": "dimension"
16
+ },
17
+ "cornerRadius": {
18
+ "type": "dimension"
19
+ },
20
+ "color": {
21
+ "type": "color"
22
+ },
23
+ "colorDuration": {
24
+ "type": "duration"
25
+ },
26
+ "colorTimingFunction": {
27
+ "type": "cubicBezier"
28
+ }
29
+ }
30
+ },
31
+ "icon": {
32
+ "properties": {
33
+ "size": {
34
+ "type": "dimension"
35
+ },
36
+ "color": {
37
+ "type": "color"
38
+ }
39
+ }
40
+ },
41
+ "progressCircle": {
42
+ "properties": {
43
+ "trackColor": {
44
+ "type": "color"
45
+ },
46
+ "rangeColor": {
47
+ "type": "color"
48
+ },
49
+ "size": {
50
+ "type": "dimension"
51
+ },
52
+ "thickness": {
53
+ "type": "dimension"
54
+ }
55
+ }
56
+ }
57
+ },
58
+ "variants": {
59
+ "size": {
60
+ "values": {
61
+ "small": {},
62
+ "medium": {},
63
+ "large": {}
64
+ },
65
+ "defaultValue": "small"
66
+ }
67
+ }
68
+ },
69
+ "definitions": [
70
+ {
71
+ "variants": {},
72
+ "definitions": [
73
+ {
74
+ "states": [
75
+ "enabled"
76
+ ],
77
+ "slots": {
78
+ "root": {
79
+ "color": {
80
+ "type": "color",
81
+ "value": "$color.bg.transparent"
82
+ },
83
+ "colorDuration": {
84
+ "type": "duration",
85
+ "value": "$duration.color-transition"
86
+ },
87
+ "colorTimingFunction": {
88
+ "type": "cubicBezier",
89
+ "value": "$timing-function.easing"
90
+ }
91
+ },
92
+ "icon": {
93
+ "color": {
94
+ "type": "color",
95
+ "value": "$color.fg.neutral"
96
+ }
97
+ },
98
+ "progressCircle": {
99
+ "trackColor": {
100
+ "type": "color",
101
+ "value": "$color.palette.gray-500"
102
+ },
103
+ "rangeColor": {
104
+ "type": "color",
105
+ "value": "$color.fg.neutral"
106
+ }
107
+ }
108
+ }
109
+ },
110
+ {
111
+ "states": [
112
+ "pressed"
113
+ ],
114
+ "slots": {
115
+ "root": {
116
+ "color": {
117
+ "type": "color",
118
+ "value": "$color.bg.transparent-pressed"
119
+ }
120
+ }
121
+ }
122
+ },
123
+ {
124
+ "states": [
125
+ "disabled"
126
+ ],
127
+ "slots": {
128
+ "icon": {
129
+ "color": {
130
+ "type": "color",
131
+ "value": "$color.fg.disabled"
132
+ }
133
+ }
134
+ }
135
+ },
136
+ {
137
+ "states": [
138
+ "loading"
139
+ ],
140
+ "slots": {
141
+ "root": {
142
+ "color": {
143
+ "type": "color",
144
+ "value": "$color.bg.transparent-pressed"
145
+ }
146
+ }
147
+ }
148
+ }
149
+ ]
150
+ },
151
+ {
152
+ "variants": {
153
+ "size": "small"
154
+ },
155
+ "definitions": [
156
+ {
157
+ "states": [
158
+ "enabled"
159
+ ],
160
+ "slots": {
161
+ "root": {
162
+ "size": {
163
+ "type": "dimension",
164
+ "value": "$dimension.x9"
165
+ },
166
+ "cornerRadius": {
167
+ "type": "dimension",
168
+ "value": "$radius.r2"
169
+ }
170
+ },
171
+ "icon": {
172
+ "size": {
173
+ "type": "dimension",
174
+ "value": {
175
+ "value": 16,
176
+ "unit": "px"
177
+ }
178
+ }
179
+ },
180
+ "progressCircle": {
181
+ "size": {
182
+ "type": "dimension",
183
+ "value": {
184
+ "value": 16,
185
+ "unit": "px"
186
+ }
187
+ },
188
+ "thickness": {
189
+ "type": "dimension",
190
+ "value": {
191
+ "value": 2,
192
+ "unit": "px"
193
+ }
194
+ }
195
+ }
196
+ }
197
+ }
198
+ ]
199
+ },
200
+ {
201
+ "variants": {
202
+ "size": "medium"
203
+ },
204
+ "definitions": [
205
+ {
206
+ "states": [
207
+ "enabled"
208
+ ],
209
+ "slots": {
210
+ "root": {
211
+ "size": {
212
+ "type": "dimension",
213
+ "value": "$dimension.x10"
214
+ },
215
+ "cornerRadius": {
216
+ "type": "dimension",
217
+ "value": "$radius.r2"
218
+ }
219
+ },
220
+ "icon": {
221
+ "size": {
222
+ "type": "dimension",
223
+ "value": {
224
+ "value": 18,
225
+ "unit": "px"
226
+ }
227
+ }
228
+ },
229
+ "progressCircle": {
230
+ "size": {
231
+ "type": "dimension",
232
+ "value": {
233
+ "value": 18,
234
+ "unit": "px"
235
+ }
236
+ },
237
+ "thickness": {
238
+ "type": "dimension",
239
+ "value": {
240
+ "value": 2,
241
+ "unit": "px"
242
+ }
243
+ }
244
+ }
245
+ }
246
+ }
247
+ ]
248
+ },
249
+ {
250
+ "variants": {
251
+ "size": "large"
252
+ },
253
+ "definitions": [
254
+ {
255
+ "states": [
256
+ "enabled"
257
+ ],
258
+ "slots": {
259
+ "root": {
260
+ "size": {
261
+ "type": "dimension",
262
+ "value": "$dimension.x13"
263
+ },
264
+ "cornerRadius": {
265
+ "type": "dimension",
266
+ "value": "$radius.r3"
267
+ }
268
+ },
269
+ "icon": {
270
+ "size": {
271
+ "type": "dimension",
272
+ "value": {
273
+ "value": 22,
274
+ "unit": "px"
275
+ }
276
+ }
277
+ },
278
+ "progressCircle": {
279
+ "size": {
280
+ "type": "dimension",
281
+ "value": {
282
+ "value": 22,
283
+ "unit": "px"
284
+ }
285
+ },
286
+ "thickness": {
287
+ "type": "dimension",
288
+ "value": {
289
+ "value": 2,
290
+ "unit": "px"
291
+ }
292
+ }
293
+ }
294
+ }
295
+ }
296
+ ]
297
+ }
298
+ ]
299
+ }
300
+ }