@seed-design/rootage-artifacts 2.0.0 → 2.1.1
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__/color.json +13 -0
- package/__generated__/components/floating-action-button.json +1 -1
- package/__generated__/components/image-frame-reaction-button.json +29 -2
- package/__generated__/components/side-panel-close-button.json +20 -10
- package/__generated__/components/side-panel.json +24 -6
- package/__generated__/index.json +1 -1
- package/color.yaml +5 -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/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/__generated__/color.json
CHANGED
|
@@ -1549,6 +1549,19 @@
|
|
|
1549
1549
|
},
|
|
1550
1550
|
"description": "basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠(List, TextField 등)가 이 레이어 위에서 표현됩니다. (pressed)"
|
|
1551
1551
|
},
|
|
1552
|
+
"$color.bg.layer-fill": {
|
|
1553
|
+
"values": {
|
|
1554
|
+
"theme-light": {
|
|
1555
|
+
"type": "color",
|
|
1556
|
+
"value": "$color.palette.gray-100"
|
|
1557
|
+
},
|
|
1558
|
+
"theme-dark": {
|
|
1559
|
+
"type": "color",
|
|
1560
|
+
"value": "$color.palette.gray-200"
|
|
1561
|
+
}
|
|
1562
|
+
},
|
|
1563
|
+
"description": "@deprecated @seed-design/css@3.0.0에서 새 이름 토큰으로 대체·제거될 예정입니다."
|
|
1564
|
+
},
|
|
1552
1565
|
"$color.bg.layer-floating": {
|
|
1553
1566
|
"values": {
|
|
1554
1567
|
"theme-light": {
|
|
@@ -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": {
|
|
@@ -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
package/color.yaml
CHANGED
|
@@ -539,6 +539,11 @@ data:
|
|
|
539
539
|
values:
|
|
540
540
|
theme-light: $color.palette.gray-100
|
|
541
541
|
theme-dark: $color.palette.gray-300
|
|
542
|
+
$color.bg.layer-fill:
|
|
543
|
+
description: "@deprecated @seed-design/css@3.0.0에서 새 이름 토큰으로 대체·제거될 예정입니다."
|
|
544
|
+
values:
|
|
545
|
+
theme-light: $color.palette.gray-100
|
|
546
|
+
theme-dark: $color.palette.gray-200
|
|
542
547
|
$color.bg.layer-floating:
|
|
543
548
|
description: 화면의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 사용자의 상호작용을 필요로 하는 모달(Modal)성 요소들이 여기에 속합니다.
|
|
544
549
|
values:
|
|
@@ -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
|
|
@@ -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:
|