@seed-design/rootage-artifacts 2.8.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/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__/index.d.ts +1 -1
- package/__generated__/index.json +1 -1
- 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/package.json +1 -1
|
@@ -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
|
}
|
package/__generated__/index.d.ts
CHANGED
package/__generated__/index.json
CHANGED
|
@@ -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:
|