@seed-design/rootage-artifacts 2.1.0 → 2.2.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.
- package/__generated__/collections.json +11 -0
- package/__generated__/components/action-button.json +69 -0
- package/__generated__/components/floating-action-button.json +1 -1
- package/__generated__/components/image-frame-reaction-button.json +29 -2
- package/__generated__/components/list-item.json +2 -2
- package/__generated__/components/side-panel-close-button.json +20 -10
- package/__generated__/components/side-panel.json +24 -6
- package/__generated__/index.json +4 -1
- package/__generated__/scale.json +48 -0
- package/collections.yaml +4 -0
- package/components/action-button.yaml +20 -0
- package/components/floating-action-button.yaml +1 -1
- package/components/image-frame-floater.yaml +2 -0
- package/components/image-frame-reaction-button.yaml +12 -2
- package/components/list-item.yaml +2 -2
- package/components/scroll-fog.yaml +2 -0
- package/components/side-panel-close-button.yaml +9 -4
- package/components/side-panel.yaml +13 -6
- package/package.json +1 -1
- package/scale.yaml +19 -0
|
@@ -17,6 +17,15 @@
|
|
|
17
17
|
"colorTimingFunction": {
|
|
18
18
|
"type": "cubicBezier"
|
|
19
19
|
},
|
|
20
|
+
"scale": {
|
|
21
|
+
"type": "number"
|
|
22
|
+
},
|
|
23
|
+
"scaleDuration": {
|
|
24
|
+
"type": "duration"
|
|
25
|
+
},
|
|
26
|
+
"scaleTimingFunction": {
|
|
27
|
+
"type": "cubicBezier"
|
|
28
|
+
},
|
|
20
29
|
"color": {
|
|
21
30
|
"type": "color"
|
|
22
31
|
},
|
|
@@ -186,6 +195,14 @@
|
|
|
186
195
|
"colorTimingFunction": {
|
|
187
196
|
"type": "cubicBezier",
|
|
188
197
|
"value": "$timing-function.easing"
|
|
198
|
+
},
|
|
199
|
+
"scaleDuration": {
|
|
200
|
+
"type": "duration",
|
|
201
|
+
"value": "$duration.pressed-scale"
|
|
202
|
+
},
|
|
203
|
+
"scaleTimingFunction": {
|
|
204
|
+
"type": "cubicBezier",
|
|
205
|
+
"value": "$timing-function.pressed-scale"
|
|
189
206
|
}
|
|
190
207
|
},
|
|
191
208
|
"label": {
|
|
@@ -1084,6 +1101,19 @@
|
|
|
1084
1101
|
}
|
|
1085
1102
|
}
|
|
1086
1103
|
}
|
|
1104
|
+
},
|
|
1105
|
+
{
|
|
1106
|
+
"states": [
|
|
1107
|
+
"pressed"
|
|
1108
|
+
],
|
|
1109
|
+
"slots": {
|
|
1110
|
+
"root": {
|
|
1111
|
+
"scale": {
|
|
1112
|
+
"type": "number",
|
|
1113
|
+
"value": "$scale.s95"
|
|
1114
|
+
}
|
|
1115
|
+
}
|
|
1116
|
+
}
|
|
1087
1117
|
}
|
|
1088
1118
|
]
|
|
1089
1119
|
},
|
|
@@ -1210,6 +1240,19 @@
|
|
|
1210
1240
|
}
|
|
1211
1241
|
}
|
|
1212
1242
|
}
|
|
1243
|
+
},
|
|
1244
|
+
{
|
|
1245
|
+
"states": [
|
|
1246
|
+
"pressed"
|
|
1247
|
+
],
|
|
1248
|
+
"slots": {
|
|
1249
|
+
"root": {
|
|
1250
|
+
"scale": {
|
|
1251
|
+
"type": "number",
|
|
1252
|
+
"value": "$scale.s97"
|
|
1253
|
+
}
|
|
1254
|
+
}
|
|
1255
|
+
}
|
|
1213
1256
|
}
|
|
1214
1257
|
]
|
|
1215
1258
|
},
|
|
@@ -1336,6 +1379,19 @@
|
|
|
1336
1379
|
}
|
|
1337
1380
|
}
|
|
1338
1381
|
}
|
|
1382
|
+
},
|
|
1383
|
+
{
|
|
1384
|
+
"states": [
|
|
1385
|
+
"pressed"
|
|
1386
|
+
],
|
|
1387
|
+
"slots": {
|
|
1388
|
+
"root": {
|
|
1389
|
+
"scale": {
|
|
1390
|
+
"type": "number",
|
|
1391
|
+
"value": "$scale.s97"
|
|
1392
|
+
}
|
|
1393
|
+
}
|
|
1394
|
+
}
|
|
1339
1395
|
}
|
|
1340
1396
|
]
|
|
1341
1397
|
},
|
|
@@ -1465,6 +1521,19 @@
|
|
|
1465
1521
|
}
|
|
1466
1522
|
}
|
|
1467
1523
|
}
|
|
1524
|
+
},
|
|
1525
|
+
{
|
|
1526
|
+
"states": [
|
|
1527
|
+
"pressed"
|
|
1528
|
+
],
|
|
1529
|
+
"slots": {
|
|
1530
|
+
"root": {
|
|
1531
|
+
"scale": {
|
|
1532
|
+
"type": "number",
|
|
1533
|
+
"value": "$scale.s98"
|
|
1534
|
+
}
|
|
1535
|
+
}
|
|
1536
|
+
}
|
|
1468
1537
|
}
|
|
1469
1538
|
]
|
|
1470
1539
|
},
|
|
@@ -29,6 +29,9 @@
|
|
|
29
29
|
},
|
|
30
30
|
"size": {
|
|
31
31
|
"type": "dimension"
|
|
32
|
+
},
|
|
33
|
+
"shadow": {
|
|
34
|
+
"type": "shadow"
|
|
32
35
|
}
|
|
33
36
|
},
|
|
34
37
|
"description": "lineIcon 아래에 내려가는 하트 아이콘입니다."
|
|
@@ -71,11 +74,11 @@
|
|
|
71
74
|
"type": "gradient",
|
|
72
75
|
"value": [
|
|
73
76
|
{
|
|
74
|
-
"color": "$color.palette.static-black-alpha-
|
|
77
|
+
"color": "$color.palette.static-black-alpha-600",
|
|
75
78
|
"position": 0
|
|
76
79
|
},
|
|
77
80
|
{
|
|
78
|
-
"color": "$color.palette.static-black-alpha-
|
|
81
|
+
"color": "$color.palette.static-black-alpha-600",
|
|
79
82
|
"position": 1
|
|
80
83
|
}
|
|
81
84
|
]
|
|
@@ -83,6 +86,30 @@
|
|
|
83
86
|
"size": {
|
|
84
87
|
"type": "dimension",
|
|
85
88
|
"value": "$dimension.x6"
|
|
89
|
+
},
|
|
90
|
+
"shadow": {
|
|
91
|
+
"type": "shadow",
|
|
92
|
+
"value": [
|
|
93
|
+
{
|
|
94
|
+
"color": "#00000026",
|
|
95
|
+
"offsetX": {
|
|
96
|
+
"value": 0,
|
|
97
|
+
"unit": "px"
|
|
98
|
+
},
|
|
99
|
+
"offsetY": {
|
|
100
|
+
"value": 2,
|
|
101
|
+
"unit": "px"
|
|
102
|
+
},
|
|
103
|
+
"blur": {
|
|
104
|
+
"value": 4,
|
|
105
|
+
"unit": "px"
|
|
106
|
+
},
|
|
107
|
+
"spread": {
|
|
108
|
+
"value": 0,
|
|
109
|
+
"unit": "px"
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
]
|
|
86
113
|
}
|
|
87
114
|
},
|
|
88
115
|
"lineIcon": {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
},
|
|
48
48
|
"contentScale": {
|
|
49
49
|
"type": "number",
|
|
50
|
-
"description": "pressed 시 배경 레이어는 좌우 폭이 marginX만큼 줄어들고, 배경 레이어 위 요소들이 위치하는 레이아웃 레이어는 scale로 인해 전체적으로 줄어드는 형태로 두 레이어가 별개로 작동합니다.
|
|
50
|
+
"description": "pressed 시 배경 레이어는 좌우 폭이 marginX만큼 줄어들고, 배경 레이어 위 요소들이 위치하는 레이아웃 레이어는 scale로 인해 전체적으로 줄어드는 형태로 두 레이어가 별개로 작동합니다."
|
|
51
51
|
},
|
|
52
52
|
"contentScaleDuration": {
|
|
53
53
|
"type": "duration"
|
|
@@ -331,7 +331,7 @@
|
|
|
331
331
|
},
|
|
332
332
|
"contentScale": {
|
|
333
333
|
"type": "number",
|
|
334
|
-
"value":
|
|
334
|
+
"value": "$scale.s97"
|
|
335
335
|
}
|
|
336
336
|
}
|
|
337
337
|
}
|
|
@@ -17,11 +17,14 @@
|
|
|
17
17
|
"cornerRadius": {
|
|
18
18
|
"type": "dimension"
|
|
19
19
|
},
|
|
20
|
-
"targetSize": {
|
|
21
|
-
"type": "dimension"
|
|
22
|
-
},
|
|
23
20
|
"size": {
|
|
24
21
|
"type": "dimension"
|
|
22
|
+
},
|
|
23
|
+
"colorDuration": {
|
|
24
|
+
"type": "duration"
|
|
25
|
+
},
|
|
26
|
+
"colorTimingFunction": {
|
|
27
|
+
"type": "cubicBezier"
|
|
25
28
|
}
|
|
26
29
|
}
|
|
27
30
|
},
|
|
@@ -62,19 +65,20 @@
|
|
|
62
65
|
"type": "dimension",
|
|
63
66
|
"value": "$radius.r3"
|
|
64
67
|
},
|
|
65
|
-
"
|
|
68
|
+
"size": {
|
|
66
69
|
"type": "dimension",
|
|
67
70
|
"value": {
|
|
68
71
|
"value": 52,
|
|
69
72
|
"unit": "px"
|
|
70
73
|
}
|
|
71
74
|
},
|
|
72
|
-
"
|
|
73
|
-
"type": "
|
|
74
|
-
"value":
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
75
|
+
"colorDuration": {
|
|
76
|
+
"type": "duration",
|
|
77
|
+
"value": "$duration.color-transition"
|
|
78
|
+
},
|
|
79
|
+
"colorTimingFunction": {
|
|
80
|
+
"type": "cubicBezier",
|
|
81
|
+
"value": "$timing-function.easing"
|
|
78
82
|
}
|
|
79
83
|
},
|
|
80
84
|
"icon": {
|
|
@@ -105,6 +109,12 @@
|
|
|
105
109
|
"pressed"
|
|
106
110
|
],
|
|
107
111
|
"slots": {
|
|
112
|
+
"root": {
|
|
113
|
+
"color": {
|
|
114
|
+
"type": "color",
|
|
115
|
+
"value": "$color.bg.transparent-pressed"
|
|
116
|
+
}
|
|
117
|
+
},
|
|
108
118
|
"icon": {
|
|
109
119
|
"color": {
|
|
110
120
|
"type": "color",
|
|
@@ -78,6 +78,10 @@
|
|
|
78
78
|
},
|
|
79
79
|
"paddingBottom": {
|
|
80
80
|
"type": "dimension"
|
|
81
|
+
},
|
|
82
|
+
"closeButtonGap": {
|
|
83
|
+
"type": "dimension",
|
|
84
|
+
"description": "closeButton이 표시되는 경우 paddingRight에 추가되는 여백입니다."
|
|
81
85
|
}
|
|
82
86
|
}
|
|
83
87
|
},
|
|
@@ -90,14 +94,17 @@
|
|
|
90
94
|
"type": "dimension",
|
|
91
95
|
"description": "body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다."
|
|
92
96
|
},
|
|
93
|
-
"
|
|
97
|
+
"strokeWidth": {
|
|
98
|
+
"type": "dimension"
|
|
99
|
+
},
|
|
100
|
+
"strokeColor": {
|
|
94
101
|
"type": "color",
|
|
95
102
|
"description": "본문이 스크롤된(scrolled) 상태에서 body 상단에 나타나는 divider의 색상입니다."
|
|
96
103
|
},
|
|
97
|
-
"
|
|
104
|
+
"strokeDuration": {
|
|
98
105
|
"type": "duration"
|
|
99
106
|
},
|
|
100
|
-
"
|
|
107
|
+
"strokeTimingFunction": {
|
|
101
108
|
"type": "cubicBezier"
|
|
102
109
|
}
|
|
103
110
|
}
|
|
@@ -257,6 +264,10 @@
|
|
|
257
264
|
"paddingBottom": {
|
|
258
265
|
"type": "dimension",
|
|
259
266
|
"value": "$dimension.x4"
|
|
267
|
+
},
|
|
268
|
+
"closeButtonGap": {
|
|
269
|
+
"type": "dimension",
|
|
270
|
+
"value": "$dimension.x1_5"
|
|
260
271
|
}
|
|
261
272
|
},
|
|
262
273
|
"body": {
|
|
@@ -268,11 +279,11 @@
|
|
|
268
279
|
"type": "dimension",
|
|
269
280
|
"value": "$dimension.x12"
|
|
270
281
|
},
|
|
271
|
-
"
|
|
282
|
+
"strokeDuration": {
|
|
272
283
|
"type": "duration",
|
|
273
284
|
"value": "$duration.color-transition"
|
|
274
285
|
},
|
|
275
|
-
"
|
|
286
|
+
"strokeTimingFunction": {
|
|
276
287
|
"type": "cubicBezier",
|
|
277
288
|
"value": "$timing-function.easing"
|
|
278
289
|
}
|
|
@@ -351,7 +362,14 @@
|
|
|
351
362
|
],
|
|
352
363
|
"slots": {
|
|
353
364
|
"body": {
|
|
354
|
-
"
|
|
365
|
+
"strokeWidth": {
|
|
366
|
+
"type": "dimension",
|
|
367
|
+
"value": {
|
|
368
|
+
"value": 1,
|
|
369
|
+
"unit": "px"
|
|
370
|
+
}
|
|
371
|
+
},
|
|
372
|
+
"strokeColor": {
|
|
355
373
|
"type": "color",
|
|
356
374
|
"value": "$color.stroke.neutral-muted"
|
|
357
375
|
}
|
package/__generated__/index.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "Rootage",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"resources": [
|
|
5
5
|
{
|
|
6
6
|
"path": "/collections.json"
|
|
@@ -299,6 +299,9 @@
|
|
|
299
299
|
{
|
|
300
300
|
"path": "/radius.json"
|
|
301
301
|
},
|
|
302
|
+
{
|
|
303
|
+
"path": "/scale.json"
|
|
304
|
+
},
|
|
302
305
|
{
|
|
303
306
|
"path": "/shadow.json"
|
|
304
307
|
},
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
{
|
|
2
|
+
"kind": "Tokens",
|
|
3
|
+
"metadata": {
|
|
4
|
+
"id": "scale",
|
|
5
|
+
"name": "Scale"
|
|
6
|
+
},
|
|
7
|
+
"data": {
|
|
8
|
+
"collection": "motion",
|
|
9
|
+
"tokens": {
|
|
10
|
+
"$scale.s95": {
|
|
11
|
+
"values": {
|
|
12
|
+
"preferred": {
|
|
13
|
+
"type": "number",
|
|
14
|
+
"value": 0.95
|
|
15
|
+
},
|
|
16
|
+
"reduced": {
|
|
17
|
+
"type": "number",
|
|
18
|
+
"value": 1
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
"$scale.s97": {
|
|
23
|
+
"values": {
|
|
24
|
+
"preferred": {
|
|
25
|
+
"type": "number",
|
|
26
|
+
"value": 0.97
|
|
27
|
+
},
|
|
28
|
+
"reduced": {
|
|
29
|
+
"type": "number",
|
|
30
|
+
"value": 1
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
"$scale.s98": {
|
|
35
|
+
"values": {
|
|
36
|
+
"preferred": {
|
|
37
|
+
"type": "number",
|
|
38
|
+
"value": 0.98
|
|
39
|
+
},
|
|
40
|
+
"reduced": {
|
|
41
|
+
"type": "number",
|
|
42
|
+
"value": 1
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
package/collections.yaml
CHANGED
|
@@ -12,6 +12,12 @@ data:
|
|
|
12
12
|
type: duration
|
|
13
13
|
colorTimingFunction:
|
|
14
14
|
type: cubicBezier
|
|
15
|
+
scale:
|
|
16
|
+
type: number
|
|
17
|
+
scaleDuration:
|
|
18
|
+
type: duration
|
|
19
|
+
scaleTimingFunction:
|
|
20
|
+
type: cubicBezier
|
|
15
21
|
color:
|
|
16
22
|
type: color
|
|
17
23
|
strokeColor:
|
|
@@ -110,6 +116,8 @@ data:
|
|
|
110
116
|
root:
|
|
111
117
|
colorDuration: $duration.color-transition
|
|
112
118
|
colorTimingFunction: $timing-function.easing
|
|
119
|
+
scaleDuration: $duration.pressed-scale
|
|
120
|
+
scaleTimingFunction: $timing-function.pressed-scale
|
|
113
121
|
label:
|
|
114
122
|
fontWeight: $font-weight.bold
|
|
115
123
|
variant=brandSolid:
|
|
@@ -350,6 +358,9 @@ data:
|
|
|
350
358
|
progressCircle:
|
|
351
359
|
size: 14px
|
|
352
360
|
thickness: 2px
|
|
361
|
+
pressed:
|
|
362
|
+
root:
|
|
363
|
+
scale: $scale.s95
|
|
353
364
|
size=xsmall, layout=withText:
|
|
354
365
|
enabled:
|
|
355
366
|
root:
|
|
@@ -379,6 +390,9 @@ data:
|
|
|
379
390
|
progressCircle:
|
|
380
391
|
size: 14px
|
|
381
392
|
thickness: 2px
|
|
393
|
+
pressed:
|
|
394
|
+
root:
|
|
395
|
+
scale: $scale.s97
|
|
382
396
|
size=small, layout=withText:
|
|
383
397
|
enabled:
|
|
384
398
|
root:
|
|
@@ -408,6 +422,9 @@ data:
|
|
|
408
422
|
progressCircle:
|
|
409
423
|
size: 16px
|
|
410
424
|
thickness: 2px
|
|
425
|
+
pressed:
|
|
426
|
+
root:
|
|
427
|
+
scale: $scale.s97
|
|
411
428
|
size=medium, layout=withText:
|
|
412
429
|
enabled:
|
|
413
430
|
root:
|
|
@@ -437,6 +454,9 @@ data:
|
|
|
437
454
|
progressCircle:
|
|
438
455
|
size: 18px
|
|
439
456
|
thickness: 2px
|
|
457
|
+
pressed:
|
|
458
|
+
root:
|
|
459
|
+
scale: $scale.s98
|
|
440
460
|
size=large, layout=withText:
|
|
441
461
|
enabled:
|
|
442
462
|
root:
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
# yaml-language-server: $schema=./schema.json
|
|
2
|
+
# NOTE: do not remove this file unless you're bumping the major version of @seed-design/react; vars generated from here have been imported in react/src/components/ImageFrame/ImageFrame.tsx
|
|
2
3
|
kind: ComponentSpec
|
|
3
4
|
metadata:
|
|
4
5
|
id: image-frame-floater
|
|
@@ -15,4 +16,5 @@ data:
|
|
|
15
16
|
base:
|
|
16
17
|
enabled:
|
|
17
18
|
root:
|
|
19
|
+
# NOTE: do not move/remove this property unless you're bumping the major version of @seed-design/react; vars generated from here have been imported in react/src/components/ImageFrame/ImageFrame.tsx
|
|
18
20
|
offset: 6px
|
|
@@ -22,6 +22,8 @@ data:
|
|
|
22
22
|
type: gradient
|
|
23
23
|
size:
|
|
24
24
|
type: dimension
|
|
25
|
+
shadow:
|
|
26
|
+
type: shadow
|
|
25
27
|
lineIcon:
|
|
26
28
|
description: fillIcon 위로 올라가는 하트 아이콘입니다.
|
|
27
29
|
properties:
|
|
@@ -39,11 +41,19 @@ data:
|
|
|
39
41
|
gradient:
|
|
40
42
|
type: gradient
|
|
41
43
|
value:
|
|
42
|
-
- color: $color.palette.static-black-alpha-
|
|
44
|
+
- color: $color.palette.static-black-alpha-600
|
|
43
45
|
position: 0
|
|
44
|
-
- color: $color.palette.static-black-alpha-
|
|
46
|
+
- color: $color.palette.static-black-alpha-600
|
|
45
47
|
position: 1
|
|
46
48
|
size: $dimension.x6
|
|
49
|
+
shadow:
|
|
50
|
+
type: shadow
|
|
51
|
+
value:
|
|
52
|
+
- offsetX: 0px
|
|
53
|
+
offsetY: 2px
|
|
54
|
+
blur: 4px
|
|
55
|
+
spread: 0px
|
|
56
|
+
color: "#00000026" # 15%
|
|
47
57
|
lineIcon:
|
|
48
58
|
color: $color.palette.static-white
|
|
49
59
|
size: $dimension.x6
|
|
@@ -33,7 +33,7 @@ data:
|
|
|
33
33
|
type: cubicBezier
|
|
34
34
|
contentScale:
|
|
35
35
|
type: number
|
|
36
|
-
description: pressed 시 배경 레이어는 좌우 폭이 marginX만큼 줄어들고, 배경 레이어 위 요소들이 위치하는 레이아웃 레이어는 scale로 인해 전체적으로 줄어드는 형태로 두 레이어가 별개로 작동합니다.
|
|
36
|
+
description: pressed 시 배경 레이어는 좌우 폭이 marginX만큼 줄어들고, 배경 레이어 위 요소들이 위치하는 레이아웃 레이어는 scale로 인해 전체적으로 줄어드는 형태로 두 레이어가 별개로 작동합니다.
|
|
37
37
|
contentScaleDuration:
|
|
38
38
|
type: duration
|
|
39
39
|
contentScaleTimingFunction:
|
|
@@ -142,7 +142,7 @@ data:
|
|
|
142
142
|
color: $color.bg.transparent-pressed
|
|
143
143
|
marginX: $dimension.x1_5
|
|
144
144
|
cornerRadius: $dimension.x2_5
|
|
145
|
-
contentScale:
|
|
145
|
+
contentScale: $scale.s97
|
|
146
146
|
highlighted:
|
|
147
147
|
root:
|
|
148
148
|
color: $color.bg.brand-weak
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
# yaml-language-server: $schema=./schema.json
|
|
2
|
+
# NOTE: do not remove this file unless you're bumping the major version of @seed-design/react; vars generated from here have been imported in react/src/components/ScrollFog/ScrollFog.tsx
|
|
2
3
|
kind: ComponentSpec
|
|
3
4
|
metadata:
|
|
4
5
|
id: scroll-fog
|
|
@@ -20,4 +21,5 @@ data:
|
|
|
20
21
|
root:
|
|
21
22
|
fromColor: "#00000000"
|
|
22
23
|
toColor: "#000000ff"
|
|
24
|
+
# NOTE: do not move/remove this property unless you're bumping the major version of @seed-design/react; vars generated from here have been imported in react/src/components/ScrollFog/ScrollFog.tsx
|
|
23
25
|
size: 20px
|
|
@@ -12,10 +12,12 @@ data:
|
|
|
12
12
|
type: color
|
|
13
13
|
cornerRadius:
|
|
14
14
|
type: dimension
|
|
15
|
-
targetSize:
|
|
16
|
-
type: dimension
|
|
17
15
|
size:
|
|
18
16
|
type: dimension
|
|
17
|
+
colorDuration:
|
|
18
|
+
type: duration
|
|
19
|
+
colorTimingFunction:
|
|
20
|
+
type: cubicBezier
|
|
19
21
|
icon:
|
|
20
22
|
properties:
|
|
21
23
|
color:
|
|
@@ -32,13 +34,16 @@ data:
|
|
|
32
34
|
root:
|
|
33
35
|
color: $color.bg.transparent
|
|
34
36
|
cornerRadius: $radius.r3
|
|
35
|
-
|
|
36
|
-
|
|
37
|
+
size: 52px
|
|
38
|
+
colorDuration: $duration.color-transition
|
|
39
|
+
colorTimingFunction: $timing-function.easing
|
|
37
40
|
icon:
|
|
38
41
|
color: $color.fg.neutral-subtle
|
|
39
42
|
size: 22px
|
|
40
43
|
colorDuration: $duration.color-transition
|
|
41
44
|
colorTimingFunction: $timing-function.easing
|
|
42
45
|
pressed:
|
|
46
|
+
root:
|
|
47
|
+
color: $color.bg.transparent-pressed
|
|
43
48
|
icon:
|
|
44
49
|
color: $color.fg.neutral
|
|
@@ -53,6 +53,9 @@ data:
|
|
|
53
53
|
description: 이 값은 상단 safe-area inset과 합산하여 적용합니다.
|
|
54
54
|
paddingBottom:
|
|
55
55
|
type: dimension
|
|
56
|
+
closeButtonGap:
|
|
57
|
+
type: dimension
|
|
58
|
+
description: closeButton이 표시되는 경우 paddingRight에 추가되는 여백입니다.
|
|
56
59
|
body:
|
|
57
60
|
properties:
|
|
58
61
|
paddingX:
|
|
@@ -60,12 +63,14 @@ data:
|
|
|
60
63
|
paddingBottom:
|
|
61
64
|
type: dimension
|
|
62
65
|
description: body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다.
|
|
63
|
-
|
|
66
|
+
strokeWidth:
|
|
67
|
+
type: dimension
|
|
68
|
+
strokeColor:
|
|
64
69
|
type: color
|
|
65
70
|
description: 본문이 스크롤된(scrolled) 상태에서 body 상단에 나타나는 divider의 색상입니다.
|
|
66
|
-
|
|
71
|
+
strokeDuration:
|
|
67
72
|
type: duration
|
|
68
|
-
|
|
73
|
+
strokeTimingFunction:
|
|
69
74
|
type: cubicBezier
|
|
70
75
|
footer:
|
|
71
76
|
properties:
|
|
@@ -131,11 +136,12 @@ data:
|
|
|
131
136
|
paddingX: $dimension.x6
|
|
132
137
|
paddingTop: $dimension.x6
|
|
133
138
|
paddingBottom: $dimension.x4
|
|
139
|
+
closeButtonGap: $dimension.x1_5
|
|
134
140
|
body:
|
|
135
141
|
paddingX: $dimension.x6
|
|
136
142
|
paddingBottom: $dimension.x12
|
|
137
|
-
|
|
138
|
-
|
|
143
|
+
strokeDuration: $duration.color-transition
|
|
144
|
+
strokeTimingFunction: $timing-function.easing
|
|
139
145
|
footer:
|
|
140
146
|
paddingX: $dimension.x6
|
|
141
147
|
paddingTop: $dimension.x4
|
|
@@ -155,7 +161,8 @@ data:
|
|
|
155
161
|
fromRight: 24px
|
|
156
162
|
scrolled:
|
|
157
163
|
body:
|
|
158
|
-
|
|
164
|
+
strokeWidth: 1px
|
|
165
|
+
strokeColor: $color.stroke.neutral-muted
|
|
159
166
|
size=small:
|
|
160
167
|
enabled:
|
|
161
168
|
content:
|
package/package.json
CHANGED
package/scale.yaml
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
kind: Tokens
|
|
2
|
+
metadata:
|
|
3
|
+
id: scale
|
|
4
|
+
name: Scale
|
|
5
|
+
data:
|
|
6
|
+
collection: motion
|
|
7
|
+
tokens:
|
|
8
|
+
$scale.s95:
|
|
9
|
+
values:
|
|
10
|
+
preferred: 0.95
|
|
11
|
+
reduced: 1
|
|
12
|
+
$scale.s97:
|
|
13
|
+
values:
|
|
14
|
+
preferred: 0.97
|
|
15
|
+
reduced: 1
|
|
16
|
+
$scale.s98:
|
|
17
|
+
values:
|
|
18
|
+
preferred: 0.98
|
|
19
|
+
reduced: 1
|