@seed-design/rootage-artifacts 2.7.0 → 2.9.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__/components/scroll-fog.d.ts +5 -12
- package/__generated__/components/scroll-fog.json +5 -12
- package/__generated__/components/top-navigation-icon-button.d.ts +52 -0
- package/__generated__/components/top-navigation-icon-button.json +52 -0
- package/__generated__/components/top-navigation-text-button.d.ts +52 -0
- package/__generated__/components/top-navigation-text-button.json +52 -0
- package/__generated__/components/top-navigation.d.ts +25 -10
- package/__generated__/components/top-navigation.json +25 -10
- package/__generated__/gradient.d.ts +143 -0
- package/__generated__/gradient.json +143 -0
- package/__generated__/index.d.ts +1 -1
- package/__generated__/index.json +1 -1
- package/components/scroll-fog.yaml +3 -6
- package/components/top-navigation-icon-button.yaml +19 -0
- package/components/top-navigation-text-button.yaml +19 -0
- package/components/top-navigation.yaml +9 -5
- package/gradient.yaml +73 -0
- package/package.json +1 -1
|
@@ -11,11 +11,8 @@ declare const artifact: {
|
|
|
11
11
|
"slots": {
|
|
12
12
|
"root": {
|
|
13
13
|
"properties": {
|
|
14
|
-
"
|
|
15
|
-
"type": "
|
|
16
|
-
};
|
|
17
|
-
"toColor": {
|
|
18
|
-
"type": "color";
|
|
14
|
+
"gradient": {
|
|
15
|
+
"type": "gradient";
|
|
19
16
|
};
|
|
20
17
|
"size": {
|
|
21
18
|
"type": "dimension";
|
|
@@ -35,13 +32,9 @@ declare const artifact: {
|
|
|
35
32
|
];
|
|
36
33
|
"slots": {
|
|
37
34
|
"root": {
|
|
38
|
-
"
|
|
39
|
-
"type": "
|
|
40
|
-
"value": "
|
|
41
|
-
};
|
|
42
|
-
"toColor": {
|
|
43
|
-
"type": "color";
|
|
44
|
-
"value": "#000000ff";
|
|
35
|
+
"gradient": {
|
|
36
|
+
"type": "gradient";
|
|
37
|
+
"value": "$gradient.fade-mask";
|
|
45
38
|
};
|
|
46
39
|
"size": {
|
|
47
40
|
"type": "dimension";
|
|
@@ -11,11 +11,8 @@
|
|
|
11
11
|
"slots": {
|
|
12
12
|
"root": {
|
|
13
13
|
"properties": {
|
|
14
|
-
"
|
|
15
|
-
"type": "
|
|
16
|
-
},
|
|
17
|
-
"toColor": {
|
|
18
|
-
"type": "color"
|
|
14
|
+
"gradient": {
|
|
15
|
+
"type": "gradient"
|
|
19
16
|
},
|
|
20
17
|
"size": {
|
|
21
18
|
"type": "dimension"
|
|
@@ -35,13 +32,9 @@
|
|
|
35
32
|
],
|
|
36
33
|
"slots": {
|
|
37
34
|
"root": {
|
|
38
|
-
"
|
|
39
|
-
"type": "
|
|
40
|
-
"value": "
|
|
41
|
-
},
|
|
42
|
-
"toColor": {
|
|
43
|
-
"type": "color",
|
|
44
|
-
"value": "#000000ff"
|
|
35
|
+
"gradient": {
|
|
36
|
+
"type": "gradient",
|
|
37
|
+
"value": "$gradient.fade-mask"
|
|
45
38
|
},
|
|
46
39
|
"size": {
|
|
47
40
|
"type": "dimension",
|
|
@@ -14,6 +14,25 @@ declare const artifact: {
|
|
|
14
14
|
"size": {
|
|
15
15
|
"type": "dimension";
|
|
16
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
|
+
"scaleScope": {
|
|
30
|
+
"type": "enum";
|
|
31
|
+
"values": readonly [
|
|
32
|
+
"self",
|
|
33
|
+
"content",
|
|
34
|
+
];
|
|
35
|
+
};
|
|
17
36
|
};
|
|
18
37
|
};
|
|
19
38
|
"icon": {
|
|
@@ -54,6 +73,22 @@ declare const artifact: {
|
|
|
54
73
|
"unit": "px";
|
|
55
74
|
};
|
|
56
75
|
};
|
|
76
|
+
"cornerRadius": {
|
|
77
|
+
"type": "dimension";
|
|
78
|
+
"value": "$radius.r2";
|
|
79
|
+
};
|
|
80
|
+
"color": {
|
|
81
|
+
"type": "color";
|
|
82
|
+
"value": "$color.bg.transparent";
|
|
83
|
+
};
|
|
84
|
+
"colorDuration": {
|
|
85
|
+
"type": "duration";
|
|
86
|
+
"value": "$duration.color-transition";
|
|
87
|
+
};
|
|
88
|
+
"colorTimingFunction": {
|
|
89
|
+
"type": "cubicBezier";
|
|
90
|
+
"value": "$timing-function.easing";
|
|
91
|
+
};
|
|
57
92
|
};
|
|
58
93
|
"icon": {
|
|
59
94
|
"size": {
|
|
@@ -66,6 +101,23 @@ declare const artifact: {
|
|
|
66
101
|
};
|
|
67
102
|
};
|
|
68
103
|
},
|
|
104
|
+
{
|
|
105
|
+
"states": readonly [
|
|
106
|
+
"pressed",
|
|
107
|
+
];
|
|
108
|
+
"slots": {
|
|
109
|
+
"root": {
|
|
110
|
+
"color": {
|
|
111
|
+
"type": "color";
|
|
112
|
+
"value": "$color.bg.transparent-pressed";
|
|
113
|
+
};
|
|
114
|
+
"scaleScope": {
|
|
115
|
+
"type": "enum";
|
|
116
|
+
"value": "self";
|
|
117
|
+
};
|
|
118
|
+
};
|
|
119
|
+
};
|
|
120
|
+
},
|
|
69
121
|
];
|
|
70
122
|
},
|
|
71
123
|
{
|
|
@@ -13,6 +13,25 @@
|
|
|
13
13
|
"properties": {
|
|
14
14
|
"size": {
|
|
15
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
|
+
"scaleScope": {
|
|
30
|
+
"type": "enum",
|
|
31
|
+
"values": [
|
|
32
|
+
"self",
|
|
33
|
+
"content"
|
|
34
|
+
]
|
|
16
35
|
}
|
|
17
36
|
}
|
|
18
37
|
},
|
|
@@ -53,6 +72,22 @@
|
|
|
53
72
|
"value": 44,
|
|
54
73
|
"unit": "px"
|
|
55
74
|
}
|
|
75
|
+
},
|
|
76
|
+
"cornerRadius": {
|
|
77
|
+
"type": "dimension",
|
|
78
|
+
"value": "$radius.r2"
|
|
79
|
+
},
|
|
80
|
+
"color": {
|
|
81
|
+
"type": "color",
|
|
82
|
+
"value": "$color.bg.transparent"
|
|
83
|
+
},
|
|
84
|
+
"colorDuration": {
|
|
85
|
+
"type": "duration",
|
|
86
|
+
"value": "$duration.color-transition"
|
|
87
|
+
},
|
|
88
|
+
"colorTimingFunction": {
|
|
89
|
+
"type": "cubicBezier",
|
|
90
|
+
"value": "$timing-function.easing"
|
|
56
91
|
}
|
|
57
92
|
},
|
|
58
93
|
"icon": {
|
|
@@ -65,6 +100,23 @@
|
|
|
65
100
|
}
|
|
66
101
|
}
|
|
67
102
|
}
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"states": [
|
|
106
|
+
"pressed"
|
|
107
|
+
],
|
|
108
|
+
"slots": {
|
|
109
|
+
"root": {
|
|
110
|
+
"color": {
|
|
111
|
+
"type": "color",
|
|
112
|
+
"value": "$color.bg.transparent-pressed"
|
|
113
|
+
},
|
|
114
|
+
"scaleScope": {
|
|
115
|
+
"type": "enum",
|
|
116
|
+
"value": "self"
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
68
120
|
}
|
|
69
121
|
]
|
|
70
122
|
},
|
|
@@ -21,6 +21,25 @@ declare const artifact: {
|
|
|
21
21
|
"paddingX": {
|
|
22
22
|
"type": "dimension";
|
|
23
23
|
};
|
|
24
|
+
"cornerRadius": {
|
|
25
|
+
"type": "dimension";
|
|
26
|
+
};
|
|
27
|
+
"color": {
|
|
28
|
+
"type": "color";
|
|
29
|
+
};
|
|
30
|
+
"colorDuration": {
|
|
31
|
+
"type": "duration";
|
|
32
|
+
};
|
|
33
|
+
"colorTimingFunction": {
|
|
34
|
+
"type": "cubicBezier";
|
|
35
|
+
};
|
|
36
|
+
"scaleScope": {
|
|
37
|
+
"type": "enum";
|
|
38
|
+
"values": readonly [
|
|
39
|
+
"self",
|
|
40
|
+
"content",
|
|
41
|
+
];
|
|
42
|
+
};
|
|
24
43
|
};
|
|
25
44
|
};
|
|
26
45
|
"label": {
|
|
@@ -90,6 +109,22 @@ declare const artifact: {
|
|
|
90
109
|
"type": "dimension";
|
|
91
110
|
"value": "$dimension.x2_5";
|
|
92
111
|
};
|
|
112
|
+
"cornerRadius": {
|
|
113
|
+
"type": "dimension";
|
|
114
|
+
"value": "$radius.r2";
|
|
115
|
+
};
|
|
116
|
+
"color": {
|
|
117
|
+
"type": "color";
|
|
118
|
+
"value": "$color.bg.transparent";
|
|
119
|
+
};
|
|
120
|
+
"colorDuration": {
|
|
121
|
+
"type": "duration";
|
|
122
|
+
"value": "$duration.color-transition";
|
|
123
|
+
};
|
|
124
|
+
"colorTimingFunction": {
|
|
125
|
+
"type": "cubicBezier";
|
|
126
|
+
"value": "$timing-function.easing";
|
|
127
|
+
};
|
|
93
128
|
};
|
|
94
129
|
"label": {
|
|
95
130
|
"fontSize": {
|
|
@@ -123,6 +158,23 @@ declare const artifact: {
|
|
|
123
158
|
};
|
|
124
159
|
};
|
|
125
160
|
},
|
|
161
|
+
{
|
|
162
|
+
"states": readonly [
|
|
163
|
+
"pressed",
|
|
164
|
+
];
|
|
165
|
+
"slots": {
|
|
166
|
+
"root": {
|
|
167
|
+
"color": {
|
|
168
|
+
"type": "color";
|
|
169
|
+
"value": "$color.bg.transparent-pressed";
|
|
170
|
+
};
|
|
171
|
+
"scaleScope": {
|
|
172
|
+
"type": "enum";
|
|
173
|
+
"value": "self";
|
|
174
|
+
};
|
|
175
|
+
};
|
|
176
|
+
};
|
|
177
|
+
},
|
|
126
178
|
];
|
|
127
179
|
},
|
|
128
180
|
{
|
|
@@ -20,6 +20,25 @@
|
|
|
20
20
|
},
|
|
21
21
|
"paddingX": {
|
|
22
22
|
"type": "dimension"
|
|
23
|
+
},
|
|
24
|
+
"cornerRadius": {
|
|
25
|
+
"type": "dimension"
|
|
26
|
+
},
|
|
27
|
+
"color": {
|
|
28
|
+
"type": "color"
|
|
29
|
+
},
|
|
30
|
+
"colorDuration": {
|
|
31
|
+
"type": "duration"
|
|
32
|
+
},
|
|
33
|
+
"colorTimingFunction": {
|
|
34
|
+
"type": "cubicBezier"
|
|
35
|
+
},
|
|
36
|
+
"scaleScope": {
|
|
37
|
+
"type": "enum",
|
|
38
|
+
"values": [
|
|
39
|
+
"self",
|
|
40
|
+
"content"
|
|
41
|
+
]
|
|
23
42
|
}
|
|
24
43
|
}
|
|
25
44
|
},
|
|
@@ -89,6 +108,22 @@
|
|
|
89
108
|
"paddingX": {
|
|
90
109
|
"type": "dimension",
|
|
91
110
|
"value": "$dimension.x2_5"
|
|
111
|
+
},
|
|
112
|
+
"cornerRadius": {
|
|
113
|
+
"type": "dimension",
|
|
114
|
+
"value": "$radius.r2"
|
|
115
|
+
},
|
|
116
|
+
"color": {
|
|
117
|
+
"type": "color",
|
|
118
|
+
"value": "$color.bg.transparent"
|
|
119
|
+
},
|
|
120
|
+
"colorDuration": {
|
|
121
|
+
"type": "duration",
|
|
122
|
+
"value": "$duration.color-transition"
|
|
123
|
+
},
|
|
124
|
+
"colorTimingFunction": {
|
|
125
|
+
"type": "cubicBezier",
|
|
126
|
+
"value": "$timing-function.easing"
|
|
92
127
|
}
|
|
93
128
|
},
|
|
94
129
|
"label": {
|
|
@@ -122,6 +157,23 @@
|
|
|
122
157
|
}
|
|
123
158
|
}
|
|
124
159
|
}
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
"states": [
|
|
163
|
+
"pressed"
|
|
164
|
+
],
|
|
165
|
+
"slots": {
|
|
166
|
+
"root": {
|
|
167
|
+
"color": {
|
|
168
|
+
"type": "color",
|
|
169
|
+
"value": "$color.bg.transparent-pressed"
|
|
170
|
+
},
|
|
171
|
+
"scaleScope": {
|
|
172
|
+
"type": "enum",
|
|
173
|
+
"value": "self"
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
}
|
|
125
177
|
}
|
|
126
178
|
]
|
|
127
179
|
},
|
|
@@ -17,6 +17,10 @@ declare const artifact: {
|
|
|
17
17
|
"paddingX": {
|
|
18
18
|
"type": "dimension";
|
|
19
19
|
};
|
|
20
|
+
"titleMinGap": {
|
|
21
|
+
"type": "dimension";
|
|
22
|
+
"description": "main과 left/right 영역 간 최소 간격입니다.";
|
|
23
|
+
};
|
|
20
24
|
"color": {
|
|
21
25
|
"type": "color";
|
|
22
26
|
};
|
|
@@ -139,6 +143,24 @@ declare const artifact: {
|
|
|
139
143
|
};
|
|
140
144
|
};
|
|
141
145
|
"definitions": readonly [
|
|
146
|
+
{
|
|
147
|
+
"variants": {};
|
|
148
|
+
"definitions": readonly [
|
|
149
|
+
{
|
|
150
|
+
"states": readonly [
|
|
151
|
+
"enabled",
|
|
152
|
+
];
|
|
153
|
+
"slots": {
|
|
154
|
+
"root": {
|
|
155
|
+
"paddingX": {
|
|
156
|
+
"type": "dimension";
|
|
157
|
+
"value": "$dimension.x1_5";
|
|
158
|
+
};
|
|
159
|
+
};
|
|
160
|
+
};
|
|
161
|
+
},
|
|
162
|
+
];
|
|
163
|
+
},
|
|
142
164
|
{
|
|
143
165
|
"variants": {
|
|
144
166
|
"theme": "ios";
|
|
@@ -157,9 +179,9 @@ declare const artifact: {
|
|
|
157
179
|
"unit": "px";
|
|
158
180
|
};
|
|
159
181
|
};
|
|
160
|
-
"
|
|
182
|
+
"titleMinGap": {
|
|
161
183
|
"type": "dimension";
|
|
162
|
-
"value": "$dimension.
|
|
184
|
+
"value": "$dimension.x2";
|
|
163
185
|
};
|
|
164
186
|
};
|
|
165
187
|
};
|
|
@@ -184,18 +206,11 @@ declare const artifact: {
|
|
|
184
206
|
"unit": "px";
|
|
185
207
|
};
|
|
186
208
|
};
|
|
187
|
-
"paddingX": {
|
|
188
|
-
"type": "dimension";
|
|
189
|
-
"value": "$dimension.x4";
|
|
190
|
-
};
|
|
191
209
|
};
|
|
192
210
|
"main": {
|
|
193
211
|
"paddingLeft": {
|
|
194
212
|
"type": "dimension";
|
|
195
|
-
"value":
|
|
196
|
-
"value": 16;
|
|
197
|
-
"unit": "px";
|
|
198
|
-
};
|
|
213
|
+
"value": "$dimension.x1_5";
|
|
199
214
|
};
|
|
200
215
|
};
|
|
201
216
|
};
|
|
@@ -17,6 +17,10 @@
|
|
|
17
17
|
"paddingX": {
|
|
18
18
|
"type": "dimension"
|
|
19
19
|
},
|
|
20
|
+
"titleMinGap": {
|
|
21
|
+
"type": "dimension",
|
|
22
|
+
"description": "main과 left/right 영역 간 최소 간격입니다."
|
|
23
|
+
},
|
|
20
24
|
"color": {
|
|
21
25
|
"type": "color"
|
|
22
26
|
},
|
|
@@ -139,6 +143,24 @@
|
|
|
139
143
|
}
|
|
140
144
|
},
|
|
141
145
|
"definitions": [
|
|
146
|
+
{
|
|
147
|
+
"variants": {},
|
|
148
|
+
"definitions": [
|
|
149
|
+
{
|
|
150
|
+
"states": [
|
|
151
|
+
"enabled"
|
|
152
|
+
],
|
|
153
|
+
"slots": {
|
|
154
|
+
"root": {
|
|
155
|
+
"paddingX": {
|
|
156
|
+
"type": "dimension",
|
|
157
|
+
"value": "$dimension.x1_5"
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
]
|
|
163
|
+
},
|
|
142
164
|
{
|
|
143
165
|
"variants": {
|
|
144
166
|
"theme": "ios"
|
|
@@ -157,9 +179,9 @@
|
|
|
157
179
|
"unit": "px"
|
|
158
180
|
}
|
|
159
181
|
},
|
|
160
|
-
"
|
|
182
|
+
"titleMinGap": {
|
|
161
183
|
"type": "dimension",
|
|
162
|
-
"value": "$dimension.
|
|
184
|
+
"value": "$dimension.x2"
|
|
163
185
|
}
|
|
164
186
|
}
|
|
165
187
|
}
|
|
@@ -183,19 +205,12 @@
|
|
|
183
205
|
"value": 56,
|
|
184
206
|
"unit": "px"
|
|
185
207
|
}
|
|
186
|
-
},
|
|
187
|
-
"paddingX": {
|
|
188
|
-
"type": "dimension",
|
|
189
|
-
"value": "$dimension.x4"
|
|
190
208
|
}
|
|
191
209
|
},
|
|
192
210
|
"main": {
|
|
193
211
|
"paddingLeft": {
|
|
194
212
|
"type": "dimension",
|
|
195
|
-
"value":
|
|
196
|
-
"value": 16,
|
|
197
|
-
"unit": "px"
|
|
198
|
-
}
|
|
213
|
+
"value": "$dimension.x1_5"
|
|
199
214
|
}
|
|
200
215
|
}
|
|
201
216
|
}
|
|
@@ -8,6 +8,149 @@ declare const artifact: {
|
|
|
8
8
|
"data": {
|
|
9
9
|
"collection": "color";
|
|
10
10
|
"tokens": {
|
|
11
|
+
"$gradient.fade-mask": {
|
|
12
|
+
"values": {
|
|
13
|
+
"theme-light": {
|
|
14
|
+
"type": "gradient";
|
|
15
|
+
"value": readonly [
|
|
16
|
+
{
|
|
17
|
+
"color": "#00000000";
|
|
18
|
+
"position": 0;
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"color": "#00000003";
|
|
22
|
+
"position": 0.08;
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"color": "#00000005";
|
|
26
|
+
"position": 0.16;
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"color": "#0000000d";
|
|
30
|
+
"position": 0.22;
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"color": "#00000014";
|
|
34
|
+
"position": 0.29;
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"color": "#00000021";
|
|
38
|
+
"position": 0.35;
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"color": "#0000002e";
|
|
42
|
+
"position": 0.41;
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"color": "#00000040";
|
|
46
|
+
"position": 0.47;
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"color": "#00000052";
|
|
50
|
+
"position": 0.53;
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"color": "#00000066";
|
|
54
|
+
"position": 0.59;
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"color": "#0000007a";
|
|
58
|
+
"position": 0.65;
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"color": "#00000094";
|
|
62
|
+
"position": 0.71;
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"color": "#000000ab";
|
|
66
|
+
"position": 0.78;
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"color": "#000000c7";
|
|
70
|
+
"position": 0.84;
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"color": "#000000e3";
|
|
74
|
+
"position": 0.92;
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"color": "#000000ff";
|
|
78
|
+
"position": 1;
|
|
79
|
+
},
|
|
80
|
+
];
|
|
81
|
+
};
|
|
82
|
+
"theme-dark": {
|
|
83
|
+
"type": "gradient";
|
|
84
|
+
"value": readonly [
|
|
85
|
+
{
|
|
86
|
+
"color": "#00000000";
|
|
87
|
+
"position": 0;
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"color": "#00000003";
|
|
91
|
+
"position": 0.08;
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"color": "#00000005";
|
|
95
|
+
"position": 0.16;
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"color": "#0000000d";
|
|
99
|
+
"position": 0.22;
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"color": "#00000014";
|
|
103
|
+
"position": 0.29;
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
"color": "#00000021";
|
|
107
|
+
"position": 0.35;
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"color": "#0000002e";
|
|
111
|
+
"position": 0.41;
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"color": "#00000040";
|
|
115
|
+
"position": 0.47;
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"color": "#00000052";
|
|
119
|
+
"position": 0.53;
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"color": "#00000066";
|
|
123
|
+
"position": 0.59;
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
"color": "#0000007a";
|
|
127
|
+
"position": 0.65;
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
"color": "#00000094";
|
|
131
|
+
"position": 0.71;
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
"color": "#000000ab";
|
|
135
|
+
"position": 0.78;
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"color": "#000000c7";
|
|
139
|
+
"position": 0.84;
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"color": "#000000e3";
|
|
143
|
+
"position": 0.92;
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
"color": "#000000ff";
|
|
147
|
+
"position": 1;
|
|
148
|
+
},
|
|
149
|
+
];
|
|
150
|
+
};
|
|
151
|
+
};
|
|
152
|
+
"description": "콘텐츠를 부드럽게 가리는 마스크용 불투명도(alpha) easing 곡선입니다. Figma에 없는 개발 전용 토큰입니다.";
|
|
153
|
+
};
|
|
11
154
|
"$gradient.glow-magic": {
|
|
12
155
|
"values": {
|
|
13
156
|
"theme-light": {
|
|
@@ -8,6 +8,149 @@
|
|
|
8
8
|
"data": {
|
|
9
9
|
"collection": "color",
|
|
10
10
|
"tokens": {
|
|
11
|
+
"$gradient.fade-mask": {
|
|
12
|
+
"values": {
|
|
13
|
+
"theme-light": {
|
|
14
|
+
"type": "gradient",
|
|
15
|
+
"value": [
|
|
16
|
+
{
|
|
17
|
+
"color": "#00000000",
|
|
18
|
+
"position": 0
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"color": "#00000003",
|
|
22
|
+
"position": 0.08
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"color": "#00000005",
|
|
26
|
+
"position": 0.16
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"color": "#0000000d",
|
|
30
|
+
"position": 0.22
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"color": "#00000014",
|
|
34
|
+
"position": 0.29
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"color": "#00000021",
|
|
38
|
+
"position": 0.35
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"color": "#0000002e",
|
|
42
|
+
"position": 0.41
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"color": "#00000040",
|
|
46
|
+
"position": 0.47
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"color": "#00000052",
|
|
50
|
+
"position": 0.53
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"color": "#00000066",
|
|
54
|
+
"position": 0.59
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"color": "#0000007a",
|
|
58
|
+
"position": 0.65
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"color": "#00000094",
|
|
62
|
+
"position": 0.71
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"color": "#000000ab",
|
|
66
|
+
"position": 0.78
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"color": "#000000c7",
|
|
70
|
+
"position": 0.84
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"color": "#000000e3",
|
|
74
|
+
"position": 0.92
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"color": "#000000ff",
|
|
78
|
+
"position": 1
|
|
79
|
+
}
|
|
80
|
+
]
|
|
81
|
+
},
|
|
82
|
+
"theme-dark": {
|
|
83
|
+
"type": "gradient",
|
|
84
|
+
"value": [
|
|
85
|
+
{
|
|
86
|
+
"color": "#00000000",
|
|
87
|
+
"position": 0
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"color": "#00000003",
|
|
91
|
+
"position": 0.08
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"color": "#00000005",
|
|
95
|
+
"position": 0.16
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"color": "#0000000d",
|
|
99
|
+
"position": 0.22
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"color": "#00000014",
|
|
103
|
+
"position": 0.29
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
"color": "#00000021",
|
|
107
|
+
"position": 0.35
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"color": "#0000002e",
|
|
111
|
+
"position": 0.41
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"color": "#00000040",
|
|
115
|
+
"position": 0.47
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"color": "#00000052",
|
|
119
|
+
"position": 0.53
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"color": "#00000066",
|
|
123
|
+
"position": 0.59
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
"color": "#0000007a",
|
|
127
|
+
"position": 0.65
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
"color": "#00000094",
|
|
131
|
+
"position": 0.71
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
"color": "#000000ab",
|
|
135
|
+
"position": 0.78
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"color": "#000000c7",
|
|
139
|
+
"position": 0.84
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"color": "#000000e3",
|
|
143
|
+
"position": 0.92
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
"color": "#000000ff",
|
|
147
|
+
"position": 1
|
|
148
|
+
}
|
|
149
|
+
]
|
|
150
|
+
}
|
|
151
|
+
},
|
|
152
|
+
"description": "콘텐츠를 부드럽게 가리는 마스크용 불투명도(alpha) easing 곡선입니다. Figma에 없는 개발 전용 토큰입니다."
|
|
153
|
+
},
|
|
11
154
|
"$gradient.glow-magic": {
|
|
12
155
|
"values": {
|
|
13
156
|
"theme-light": {
|
package/__generated__/index.d.ts
CHANGED
package/__generated__/index.json
CHANGED
|
@@ -9,17 +9,14 @@ data:
|
|
|
9
9
|
slots:
|
|
10
10
|
root:
|
|
11
11
|
properties:
|
|
12
|
-
|
|
13
|
-
type:
|
|
14
|
-
toColor:
|
|
15
|
-
type: color
|
|
12
|
+
gradient:
|
|
13
|
+
type: gradient
|
|
16
14
|
size:
|
|
17
15
|
type: dimension
|
|
18
16
|
definitions:
|
|
19
17
|
base:
|
|
20
18
|
enabled:
|
|
21
19
|
root:
|
|
22
|
-
|
|
23
|
-
toColor: "#000000ff"
|
|
20
|
+
gradient: $gradient.fade-mask
|
|
24
21
|
# 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
|
|
25
22
|
size: 20px
|
|
@@ -10,6 +10,17 @@ data:
|
|
|
10
10
|
properties:
|
|
11
11
|
size:
|
|
12
12
|
type: dimension
|
|
13
|
+
cornerRadius:
|
|
14
|
+
type: dimension
|
|
15
|
+
color:
|
|
16
|
+
type: color
|
|
17
|
+
colorDuration:
|
|
18
|
+
type: duration
|
|
19
|
+
colorTimingFunction:
|
|
20
|
+
type: cubicBezier
|
|
21
|
+
scaleScope:
|
|
22
|
+
type: enum
|
|
23
|
+
values: [self, content]
|
|
13
24
|
icon:
|
|
14
25
|
properties:
|
|
15
26
|
size:
|
|
@@ -21,8 +32,16 @@ data:
|
|
|
21
32
|
enabled:
|
|
22
33
|
root:
|
|
23
34
|
size: 44px
|
|
35
|
+
cornerRadius: $radius.r2
|
|
36
|
+
color: $color.bg.transparent
|
|
37
|
+
colorDuration: $duration.color-transition
|
|
38
|
+
colorTimingFunction: $timing-function.easing
|
|
24
39
|
icon:
|
|
25
40
|
size: 24px
|
|
41
|
+
pressed:
|
|
42
|
+
root:
|
|
43
|
+
color: $color.bg.transparent-pressed
|
|
44
|
+
scaleScope: self
|
|
26
45
|
tone=layer:
|
|
27
46
|
enabled:
|
|
28
47
|
icon:
|
|
@@ -16,6 +16,17 @@ data:
|
|
|
16
16
|
type: dimension
|
|
17
17
|
paddingX:
|
|
18
18
|
type: dimension
|
|
19
|
+
cornerRadius:
|
|
20
|
+
type: dimension
|
|
21
|
+
color:
|
|
22
|
+
type: color
|
|
23
|
+
colorDuration:
|
|
24
|
+
type: duration
|
|
25
|
+
colorTimingFunction:
|
|
26
|
+
type: cubicBezier
|
|
27
|
+
scaleScope:
|
|
28
|
+
type: enum
|
|
29
|
+
values: [self, content]
|
|
19
30
|
label:
|
|
20
31
|
properties:
|
|
21
32
|
color:
|
|
@@ -40,6 +51,10 @@ data:
|
|
|
40
51
|
root:
|
|
41
52
|
height: 44px
|
|
42
53
|
paddingX: $dimension.x2_5
|
|
54
|
+
cornerRadius: $radius.r2
|
|
55
|
+
color: $color.bg.transparent
|
|
56
|
+
colorDuration: $duration.color-transition
|
|
57
|
+
colorTimingFunction: $timing-function.easing
|
|
43
58
|
label:
|
|
44
59
|
fontSize: $font-size.t5
|
|
45
60
|
lineHeight: $line-height.t5
|
|
@@ -48,6 +63,10 @@ data:
|
|
|
48
63
|
minFontSizeScale: 1
|
|
49
64
|
maxLineHeightScale: 1.2
|
|
50
65
|
minLineHeightScale: 1
|
|
66
|
+
pressed:
|
|
67
|
+
root:
|
|
68
|
+
color: $color.bg.transparent-pressed
|
|
69
|
+
scaleScope: self
|
|
51
70
|
tone=layer:
|
|
52
71
|
enabled:
|
|
53
72
|
label:
|
|
@@ -12,6 +12,9 @@ data:
|
|
|
12
12
|
type: dimension
|
|
13
13
|
paddingX:
|
|
14
14
|
type: dimension
|
|
15
|
+
titleMinGap:
|
|
16
|
+
type: dimension
|
|
17
|
+
description: main과 left/right 영역 간 최소 간격입니다.
|
|
15
18
|
color:
|
|
16
19
|
type: color
|
|
17
20
|
gradient:
|
|
@@ -82,20 +85,21 @@ data:
|
|
|
82
85
|
직접 확보해야 합니다. 스크린 배경 색상이 Top Navigation에 보이기를 원하는 경우 tone=layer를
|
|
83
86
|
사용하세요.
|
|
84
87
|
definitions:
|
|
88
|
+
base:
|
|
89
|
+
enabled:
|
|
90
|
+
root:
|
|
91
|
+
paddingX: $dimension.x1_5
|
|
85
92
|
theme=ios:
|
|
86
93
|
enabled:
|
|
87
94
|
root:
|
|
88
95
|
height: 44px
|
|
89
|
-
|
|
90
|
-
# main:
|
|
91
|
-
# paddingLeft: $dimension.x1
|
|
96
|
+
titleMinGap: $dimension.x2
|
|
92
97
|
theme=android:
|
|
93
98
|
enabled:
|
|
94
99
|
root:
|
|
95
100
|
height: 56px
|
|
96
|
-
paddingX: $dimension.x4
|
|
97
101
|
main:
|
|
98
|
-
paddingLeft:
|
|
102
|
+
paddingLeft: $dimension.x1_5
|
|
99
103
|
tone=layer:
|
|
100
104
|
enabled:
|
|
101
105
|
root:
|
package/gradient.yaml
CHANGED
|
@@ -6,6 +6,79 @@ metadata:
|
|
|
6
6
|
data:
|
|
7
7
|
collection: color
|
|
8
8
|
tokens:
|
|
9
|
+
$gradient.fade-mask:
|
|
10
|
+
description: 콘텐츠를 부드럽게 가리는 마스크용 불투명도(alpha) easing 곡선입니다. Figma에 없는 개발 전용 토큰입니다.
|
|
11
|
+
values:
|
|
12
|
+
theme-light:
|
|
13
|
+
type: gradient
|
|
14
|
+
value:
|
|
15
|
+
- color: "#00000000"
|
|
16
|
+
position: 0
|
|
17
|
+
- color: "#00000003"
|
|
18
|
+
position: 0.08
|
|
19
|
+
- color: "#00000005"
|
|
20
|
+
position: 0.16
|
|
21
|
+
- color: "#0000000d"
|
|
22
|
+
position: 0.22
|
|
23
|
+
- color: "#00000014"
|
|
24
|
+
position: 0.29
|
|
25
|
+
- color: "#00000021"
|
|
26
|
+
position: 0.35
|
|
27
|
+
- color: "#0000002e"
|
|
28
|
+
position: 0.41
|
|
29
|
+
- color: "#00000040"
|
|
30
|
+
position: 0.47
|
|
31
|
+
- color: "#00000052"
|
|
32
|
+
position: 0.53
|
|
33
|
+
- color: "#00000066"
|
|
34
|
+
position: 0.59
|
|
35
|
+
- color: "#0000007a"
|
|
36
|
+
position: 0.65
|
|
37
|
+
- color: "#00000094"
|
|
38
|
+
position: 0.71
|
|
39
|
+
- color: "#000000ab"
|
|
40
|
+
position: 0.78
|
|
41
|
+
- color: "#000000c7"
|
|
42
|
+
position: 0.84
|
|
43
|
+
- color: "#000000e3"
|
|
44
|
+
position: 0.92
|
|
45
|
+
- color: "#000000ff"
|
|
46
|
+
position: 1
|
|
47
|
+
theme-dark:
|
|
48
|
+
type: gradient
|
|
49
|
+
value:
|
|
50
|
+
- color: "#00000000"
|
|
51
|
+
position: 0
|
|
52
|
+
- color: "#00000003"
|
|
53
|
+
position: 0.08
|
|
54
|
+
- color: "#00000005"
|
|
55
|
+
position: 0.16
|
|
56
|
+
- color: "#0000000d"
|
|
57
|
+
position: 0.22
|
|
58
|
+
- color: "#00000014"
|
|
59
|
+
position: 0.29
|
|
60
|
+
- color: "#00000021"
|
|
61
|
+
position: 0.35
|
|
62
|
+
- color: "#0000002e"
|
|
63
|
+
position: 0.41
|
|
64
|
+
- color: "#00000040"
|
|
65
|
+
position: 0.47
|
|
66
|
+
- color: "#00000052"
|
|
67
|
+
position: 0.53
|
|
68
|
+
- color: "#00000066"
|
|
69
|
+
position: 0.59
|
|
70
|
+
- color: "#0000007a"
|
|
71
|
+
position: 0.65
|
|
72
|
+
- color: "#00000094"
|
|
73
|
+
position: 0.71
|
|
74
|
+
- color: "#000000ab"
|
|
75
|
+
position: 0.78
|
|
76
|
+
- color: "#000000c7"
|
|
77
|
+
position: 0.84
|
|
78
|
+
- color: "#000000e3"
|
|
79
|
+
position: 0.92
|
|
80
|
+
- color: "#000000ff"
|
|
81
|
+
position: 1
|
|
9
82
|
$gradient.glow-magic:
|
|
10
83
|
description: 반짝이는 것처럼 느껴지는 배경에 쓰이는 ai 컬러입니다.
|
|
11
84
|
values:
|