@seed-design/rootage-artifacts 0.0.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.
Files changed (31) hide show
  1. package/collections.yaml +12 -0
  2. package/color.yaml +591 -0
  3. package/components/action-button.yaml +215 -0
  4. package/components/action-chip.yaml +78 -0
  5. package/components/avatar.yaml +55 -0
  6. package/components/badge.yaml +136 -0
  7. package/components/callout.yaml +137 -0
  8. package/components/checkbox.yaml +131 -0
  9. package/components/chip-tab.yaml +67 -0
  10. package/components/chip-tablist.yaml +18 -0
  11. package/components/control-chip.yaml +100 -0
  12. package/components/dialog.yaml +30 -0
  13. package/components/expand-button.yaml +34 -0
  14. package/components/fab.yaml +28 -0
  15. package/components/help-bubble.yaml +42 -0
  16. package/components/inline-banner.yaml +149 -0
  17. package/components/progress-circle.yaml +41 -0
  18. package/components/radio.yaml +79 -0
  19. package/components/segmented-control.yaml +38 -0
  20. package/components/switch.yaml +56 -0
  21. package/components/tab.yaml +39 -0
  22. package/components/tablist.yaml +23 -0
  23. package/components/text-button.yaml +64 -0
  24. package/components/typography.yaml +144 -0
  25. package/font-size.yaml +37 -0
  26. package/font-weight.yaml +16 -0
  27. package/line-height.yaml +37 -0
  28. package/package.json +17 -0
  29. package/radius.yaml +40 -0
  30. package/timing-function.yaml +0 -0
  31. package/unit.yaml +70 -0
package/components/action-button.yaml ADDED
@@ -0,0 +1,215 @@
1
+ # yaml-language-server: $schema=./schema.json
2
+ kind: ComponentSpec
3
+ metadata:
4
+ id: action-button
5
+ name: Action Button
6
+ data:
7
+ base:
8
+ enabled:
9
+ label:
10
+ fontWeight: "$font-weight.bold"
11
+ variant=brand solid:
12
+ enabled:
13
+ root:
14
+ color: "$color.bg.brand-solid"
15
+ label:
16
+ color: "$color.fg.static-white"
17
+ icon:
18
+ color: "$color.fg.static-white"
19
+ prefixIcon:
20
+ color: "$color.fg.static-white"
21
+ suffixIcon:
22
+ color: "$color.fg.static-white"
23
+ pressed:
24
+ root:
25
+ color: "$color.bg.brand-solid-pressed"
26
+ disabled:
27
+ root:
28
+ color: "$color.bg.disabled"
29
+ loading:
30
+ root:
31
+ color: "$color.bg.brand-solid-pressed"
32
+ variant=brand weak:
33
+ enabled:
34
+ root:
35
+ color: "$color.bg.brand-weak"
36
+ label:
37
+ color: "$color.fg.brand"
38
+ icon:
39
+ color: "$color.fg.brand"
40
+ prefixIcon:
41
+ color: "$color.fg.brand"
42
+ suffixIcon:
43
+ color: "$color.fg.brand"
44
+ pressed:
45
+ root:
46
+ color: "$color.bg.brand-weak-pressed"
47
+ disabled:
48
+ root:
49
+ color: "$color.bg.disabled"
50
+ loading:
51
+ root:
52
+ color: "$color.bg.brand-weak-pressed"
53
+ variant=neutral solid:
54
+ enabled:
55
+ root:
56
+ color: "$color.bg.neutral-solid"
57
+ label:
58
+ color: "$color.fg.neutral-inverted"
59
+ icon:
60
+ color: "$color.fg.neutral-inverted"
61
+ prefixIcon:
62
+ color: "$color.fg.neutral-inverted"
63
+ suffixIcon:
64
+ color: "$color.fg.neutral-inverted"
65
+ pressed:
66
+ root:
67
+ color: "$color.bg.neutral-solid-pressed"
68
+ disabled:
69
+ root:
70
+ color: "$color.bg.disabled"
71
+ loading:
72
+ root:
73
+ color: "$color.bg.neutral-solid-pressed"
74
+ variant=neutral weak:
75
+ enabled:
76
+ root:
77
+ color: "$color.bg.neutral-weak"
78
+ label:
79
+ color: "$color.fg.neutral"
80
+ icon:
81
+ color: "$color.fg.neutral"
82
+ prefixIcon:
83
+ color: "$color.fg.neutral"
84
+ suffixIcon:
85
+ color: "$color.fg.neutral"
86
+ pressed:
87
+ root:
88
+ color: "$color.bg.neutral-weak-pressed"
89
+ disabled:
90
+ root:
91
+ color: "$color.bg.disabled"
92
+ loading:
93
+ root:
94
+ color: "$color.bg.neutral-weak-pressed"
95
+ variant=danger solid:
96
+ enabled:
97
+ root:
98
+ color: "$color.bg.danger-solid"
99
+ label:
100
+ color: "$color.fg.static-white"
101
+ icon:
102
+ color: "$color.fg.static-white"
103
+ prefixIcon:
104
+ color: "$color.fg.static-white"
105
+ suffixIcon:
106
+ color: "$color.fg.static-white"
107
+ pressed:
108
+ root:
109
+ color: "$color.bg.danger-solid-pressed"
110
+ disabled:
111
+ root:
112
+ color: "$color.bg.disabled"
113
+ loading:
114
+ root:
115
+ color: "$color.bg.danger-solid-pressed"
116
+ size=xsmall:
117
+ enabled:
118
+ root:
119
+ minHeight: "$unit.x8"
120
+ cornerRadius: "$radius.full"
121
+ size=xsmall, layout=with text:
122
+ enabled:
123
+ root:
124
+ gap: "$unit.x1"
125
+ paddingX: "$unit.x3_5"
126
+ paddingY: "$unit.x1_5"
127
+ prefixIcon:
128
+ size: "$unit.x3_5"
129
+ suffixIcon:
130
+ size: "$unit.x3_5"
131
+ label:
132
+ fontSize: "$font-size.t4"
133
+ size=xsmall, layout=icon only:
134
+ enabled:
135
+ root:
136
+ minWidth: "$unit.x8"
137
+ paddingX: "$unit.x1_5"
138
+ paddingY: "$unit.x1_5"
139
+ icon:
140
+ size: "$unit.x3_5"
141
+ size=small:
142
+ enabled:
143
+ root:
144
+ minHeight: "$unit.x9"
145
+ cornerRadius: "$radius.x2"
146
+ size=small, layout=with text:
147
+ enabled:
148
+ root:
149
+ gap: "$unit.x1"
150
+ paddingX: "$unit.x3_5"
151
+ paddingY: "$unit.x2"
152
+ prefixIcon:
153
+ size: "$unit.x3_5"
154
+ suffixIcon:
155
+ size: "$unit.x3_5"
156
+ label:
157
+ fontSize: "$font-size.t4"
158
+ size=small, layout=icon only:
159
+ enabled:
160
+ root:
161
+ minWidth: "$unit.x9"
162
+ paddingX: "$unit.x2"
163
+ paddingY: "$unit.x2"
164
+ icon:
165
+ size: "$unit.x4"
166
+ size=medium:
167
+ enabled:
168
+ root:
169
+ minHeight: "$unit.x10"
170
+ cornerRadius: "$radius.x2"
171
+ size=medium, layout=with text:
172
+ enabled:
173
+ root:
174
+ gap: "$unit.x1"
175
+ paddingX: "$unit.x4"
176
+ paddingY: "$unit.x2_5"
177
+ prefixIcon:
178
+ size: "$unit.x4"
179
+ suffixIcon:
180
+ size: "$unit.x4"
181
+ label:
182
+ fontSize: "$font-size.t4"
183
+ size=medium, layout=icon only:
184
+ enabled:
185
+ root:
186
+ minWidth: "$unit.x10"
187
+ paddingX: "$unit.x2_5"
188
+ paddingY: "$unit.x2_5"
189
+ icon:
190
+ size: "18px"
191
+ size=large:
192
+ enabled:
193
+ root:
194
+ minHeight: "$unit.x13"
195
+ cornerRadius: "$radius.x3"
196
+ size=large, layout=with text:
197
+ enabled:
198
+ root:
199
+ gap: "$unit.x2"
200
+ paddingX: "$unit.x5"
201
+ paddingY: "$unit.x3_5"
202
+ prefixIcon:
203
+ size: "22px"
204
+ suffixIcon:
205
+ size: "22px"
206
+ label:
207
+ fontSize: "$font-size.t6"
208
+ size=large, layout=icon only:
209
+ enabled:
210
+ root:
211
+ minWidth: "$unit.x13"
212
+ paddingX: "$unit.x3_5"
213
+ paddingY: "$unit.x3_5"
214
+ icon:
215
+ size: "22px"
package/components/action-chip.yaml ADDED
@@ -0,0 +1,78 @@
1
+ # yaml-language-server: $schema=./schema.json
2
+ kind: ComponentSpec
3
+ metadata:
4
+ id: action-chip
5
+ name: Action Chip
6
+ data:
7
+ base:
8
+ enabled:
9
+ root:
10
+ color: $color.bg.neutral-weak
11
+ cornerRadius: $radius.full
12
+ label:
13
+ color: $color.fg.neutral
14
+ fontWeight: $font-weight.medium
15
+ prefixIcon:
16
+ color: $color.fg.neutral
17
+ suffixIcon:
18
+ color: $color.fg.neutral
19
+ count:
20
+ color: $color.fg.neutral-muted
21
+ pressed:
22
+ root:
23
+ color: $color.bg.neutral-weak-pressed
24
+ disabled:
25
+ root:
26
+ color: $color.bg.disabled
27
+ label:
28
+ color: $color.fg.disabled
29
+ prefixIcon:
30
+ color: $color.fg.disabled
31
+ suffixIcon:
32
+ color: $color.fg.disabled
33
+ count:
34
+ color: $color.fg.disabled
35
+ size=small:
36
+ enabled:
37
+ root:
38
+ minHeight: $unit.x8
39
+ paddingY: $unit.x1_5
40
+ gap: $unit.x1
41
+ label:
42
+ fontSize: $font-size.t4
43
+ prefixIcon:
44
+ size: $unit.x4
45
+ suffixIcon:
46
+ size: $unit.x3_5
47
+ size=medium:
48
+ enabled:
49
+ root:
50
+ minHeight: $unit.x9
51
+ paddingY: $unit.x2
52
+ gap: $unit.x1
53
+ label:
54
+ fontSize: $font-size.t4
55
+ prefixIcon:
56
+ size: $unit.x4
57
+ suffixIcon:
58
+ size: $unit.x3_5
59
+ size=small,layout=with text:
60
+ enabled:
61
+ root:
62
+ paddingX: $unit.x3
63
+ size=small,layout=icon only:
64
+ enabled:
65
+ root:
66
+ minWidth: $unit.x8
67
+ icon:
68
+ size: $unit.x4
69
+ size=medium,layout=with text:
70
+ enabled:
71
+ root:
72
+ paddingX: $unit.x3_5
73
+ size=medium,layout=icon only:
74
+ enabled:
75
+ root:
76
+ minWidth: $unit.x9
77
+ icon:
78
+ size: $unit.x4
package/components/avatar.yaml ADDED
@@ -0,0 +1,55 @@
1
+ # yaml-language-server: $schema=./schema.json
2
+ kind: ComponentSpec
3
+ metadata:
4
+ id: avatar
5
+ name: Avatar
6
+ data:
7
+ base:
8
+ enabled:
9
+ root:
10
+ cornerRadius: $radius.full
11
+ badge:
12
+ cornerRadius: $radius.full
13
+ color: $color.bg.layer-default
14
+ size=20:
15
+ enabled:
16
+ root:
17
+ size: $unit.x5
18
+ badge:
19
+ size: $unit.x2_5
20
+ size=24:
21
+ enabled:
22
+ root:
23
+ size: $unit.x6
24
+ badge:
25
+ size: $unit.x3
26
+ size=36:
27
+ enabled:
28
+ root:
29
+ size: $unit.x9
30
+ badge:
31
+ size: $unit.x4
32
+ size=48:
33
+ enabled:
34
+ root:
35
+ size: $unit.x12
36
+ badge:
37
+ size: $unit.x6
38
+ size=64:
39
+ enabled:
40
+ root:
41
+ size: $unit.x16
42
+ badge:
43
+ size: $unit.x6
44
+ size=80:
45
+ enabled:
46
+ root:
47
+ size: 80px
48
+ badge:
49
+ size: $unit.x6
50
+ size=96:
51
+ enabled:
52
+ root:
53
+ size: 96px
54
+ badge:
55
+ size: $unit.x8
package/components/badge.yaml ADDED
@@ -0,0 +1,136 @@
1
+ # yaml-language-server: $schema=./schema.json
2
+ kind: ComponentSpec
3
+ metadata:
4
+ id: badge
5
+ name: Badge
6
+ data:
7
+ size=medium:
8
+ enabled:
9
+ root:
10
+ minHeight: $unit.x5
11
+ paddingX: $unit.x2
12
+ paddingY: $unit.x1
13
+ fontSize: $font-size.t2
14
+ size=small:
15
+ enabled:
16
+ root:
17
+ minHeight: $unit.x4
18
+ paddingX: $unit.x1_5
19
+ paddingY: $unit.x0_5
20
+ fontSize: $font-size.t1
21
+ shape=pill:
22
+ enabled:
23
+ root:
24
+ borderRadius: $radius.full
25
+ shape=rectangle, size=medium:
26
+ enabled:
27
+ root:
28
+ borderRadius: $radius.x1
29
+ shape=rectangle, size=small:
30
+ enabled:
31
+ root:
32
+ borderRadius: $radius.x0_5
33
+ variant=soft:
34
+ enabled:
35
+ label:
36
+ fontWeight: $font-weight.medium
37
+ variant=solid:
38
+ enabled:
39
+ label:
40
+ fontWeight: $font-weight.bold
41
+ variant=outlined:
42
+ enabled:
43
+ root:
44
+ borderWidth: 1px
45
+ label:
46
+ fontWeight: $font-weight.bold
47
+ tone=neutral, variant=soft:
48
+ enabled:
49
+ root:
50
+ color: $color.bg.neutral-weak
51
+ label:
52
+ color: $color.fg.neutral
53
+ tone=neutral, variant=solid:
54
+ enabled:
55
+ root:
56
+ color: $color.bg.neutral-solid
57
+ label:
58
+ color: $color.fg.static-white
59
+ tone=neutral, variant=outlined:
60
+ enabled:
61
+ root:
62
+ strokeColor: $color.stroke.neutral
63
+ label:
64
+ color: $color.fg.neutral
65
+ tone=brand, variant=soft:
66
+ enabled:
67
+ root:
68
+ color: $color.bg.brand-weak
69
+ label:
70
+ color: $color.fg.brand
71
+ tone=brand, variant=solid:
72
+ enabled:
73
+ root:
74
+ color: $color.bg.brand-solid
75
+ label:
76
+ color: $color.fg.static-white
77
+ tone=brand, variant=outlined:
78
+ enabled:
79
+ root:
80
+ strokeColor: $color.stroke.brand
81
+ label:
82
+ color: $color.fg.brand
83
+ tone=informative, variant=soft:
84
+ enabled:
85
+ root:
86
+ color: $color.bg.informative-weak
87
+ label:
88
+ color: $color.fg.informative
89
+ tone=informative, variant=solid:
90
+ enabled:
91
+ root:
92
+ color: $color.bg.informative-solid
93
+ label:
94
+ color: $color.fg.static-white
95
+ tone=informative, variant=outlined:
96
+ enabled:
97
+ root:
98
+ strokeColor: $color.fg.informative
99
+ label:
100
+ color: $color.fg.informative
101
+ tone=positive, variant=soft:
102
+ enabled:
103
+ root:
104
+ color: $color.bg.positive-weak
105
+ label:
106
+ color: $color.fg.positive
107
+ tone=positive, variant=solid:
108
+ enabled:
109
+ root:
110
+ color: $color.bg.positive-solid
111
+ label:
112
+ color: $color.fg.static-white
113
+ tone=positive, variant=outlined:
114
+ enabled:
115
+ root:
116
+ strokeColor: $color.stroke.positive
117
+ label:
118
+ color: $color.fg.positive
119
+ tone=danger, variant=soft:
120
+ enabled:
121
+ root:
122
+ color: $color.bg.danger-weak
123
+ label:
124
+ color: $color.fg.danger
125
+ tone=danger, variant=solid:
126
+ enabled:
127
+ root:
128
+ color: $color.bg.danger-solid
129
+ label:
130
+ color: $color.fg.static-white
131
+ tone=danger, variant=outlined:
132
+ enabled:
133
+ root:
134
+ strokeColor: $color.stroke.danger
135
+ label:
136
+ color: $color.fg.danger
package/components/callout.yaml ADDED
@@ -0,0 +1,137 @@
1
+ # yaml-language-server: $schema=./schema.json
2
+ kind: ComponentSpec
3
+ metadata:
4
+ id: callout
5
+ name: Callout
6
+ data:
7
+ base:
8
+ enabled:
9
+ root:
10
+ paddingXStart: $unit.x3_5
11
+ paddingXEnd: $unit.x0_5
12
+ paddingY: 5px
13
+ cornerRadius: $radius.x2_5
14
+ content:
15
+ gap: $unit.x3
16
+ paddingY: 9.5px
17
+ fontSize: $font-size.t4
18
+ lineHeight: $line-height.t5
19
+ icon:
20
+ # XXX: scalable 결정 x
21
+ size: $unit.x4
22
+ title:
23
+ fontWeight: $font-weight.bold
24
+ label:
25
+ fontWeight: $font-weight.regular
26
+ dismissButton:
27
+ size: $unit.x10
28
+ dismissIcon:
29
+ size: $unit.x4
30
+ actionableIcon:
31
+ size: $unit.x4
32
+ margin: $unit.x3
33
+
34
+ type=contentOnly:
35
+ enabled:
36
+ content:
37
+ paddingXEnd: $unit.x3
38
+
39
+ variant=neutral:
40
+ enabled:
41
+ root:
42
+ color: $color.bg.neutral-weak
43
+ icon:
44
+ color: $color.fg.neutral
45
+ title:
46
+ color: $color.fg.neutral
47
+ label:
48
+ color: $color.fg.neutral
49
+ linkLabel:
50
+ color: $color.fg.neutral
51
+ dismissIcon:
52
+ color: $color.fg.neutral
53
+ actionableIcon:
54
+ color: $color.fg.neutral
55
+ pressed:
56
+ root:
57
+ color: $color.bg.neutral-weak-pressed
58
+
59
+ variant=informative:
60
+ enabled:
61
+ root:
62
+ color: $color.bg.informative-weak
63
+ icon:
64
+ color: $color.fg.informative-contrast
65
+ title:
66
+ color: $color.fg.informative-contrast
67
+ label:
68
+ color: $color.fg.informative-contrast
69
+ linkLabel:
70
+ color: $color.fg.informative-contrast
71
+ dismissIcon:
72
+ color: $color.fg.informative-contrast
73
+ actionableIcon:
74
+ color: $color.fg.informative-contrast
75
+ pressed:
76
+ root:
77
+ color: $color.bg.informative-weak-pressed
78
+
79
+ variant=warning:
80
+ enabled:
81
+ root:
82
+ color: $color.bg.warning-weak
83
+ icon:
84
+ color: $color.fg.warning-contrast
85
+ title:
86
+ color: $color.fg.warning-contrast
87
+ label:
88
+ color: $color.fg.warning-contrast
89
+ linkLabel:
90
+ color: $color.fg.warning-contrast
91
+ dismissIcon:
92
+ color: $color.fg.warning-contrast
93
+ actionableIcon:
94
+ color: $color.fg.warning-contrast
95
+ pressed:
96
+ root:
97
+ color: $color.bg.warning-weak-pressed
98
+
99
+ variant=danger:
100
+ enabled:
101
+ root:
102
+ color: $color.bg.danger-weak
103
+ icon:
104
+ color: $color.fg.danger-contrast
105
+ title:
106
+ color: $color.fg.danger-contrast
107
+ label:
108
+ color: $color.fg.danger-contrast
109
+ linkLabel:
110
+ color: $color.fg.danger-contrast
111
+ dismissIcon:
112
+ color: $color.fg.danger-contrast
113
+ actionableIcon:
114
+ color: $color.fg.danger-contrast
115
+ pressed:
116
+ root:
117
+ color: $color.bg.danger-weak-pressed
118
+
119
+ variant=magic:
120
+ enabled:
121
+ root:
122
+ color: $color.bg.magic-weak
123
+ icon:
124
+ color: $color.fg.magic-contrast
125
+ title:
126
+ color: $color.fg.magic-contrast
127
+ label:
128
+ color: $color.fg.magic-contrast
129
+ linkLabel:
130
+ color: $color.fg.magic-contrast
131
+ dismissIcon:
132
+ color: $color.fg.magic-contrast
133
+ actionableIcon:
134
+ color: $color.fg.magic-contrast
135
+ pressed:
136
+ root:
137
+ color: $color.bg.magic-weak-pressed