@seed-design/rootage-artifacts 1.2.12 → 2.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.
- package/__generated__/collections.json +53 -0
- package/__generated__/color.json +2452 -0
- package/__generated__/components/accordion-item.json +501 -0
- package/__generated__/components/accordion.json +86 -0
- package/__generated__/components/action-button.json +1568 -0
- package/__generated__/components/action-chip.json +454 -0
- package/__generated__/components/action-sheet-close-button.json +115 -0
- package/__generated__/components/action-sheet-item.json +159 -0
- package/__generated__/components/action-sheet.json +269 -0
- package/__generated__/components/attachment-input-dropzone.json +145 -0
- package/__generated__/components/attachment-input-item-action-button.json +149 -0
- package/__generated__/components/attachment-input-item-remove-button.json +127 -0
- package/__generated__/components/attachment-input-item.json +448 -0
- package/__generated__/components/attachment-input-trigger.json +210 -0
- package/__generated__/components/attachment-input.json +58 -0
- package/__generated__/components/avatar-stack.json +396 -0
- package/__generated__/components/avatar.json +698 -0
- package/__generated__/components/badge.json +759 -0
- package/__generated__/components/bottom-sheet-close-button.json +106 -0
- package/__generated__/components/bottom-sheet-handle.json +136 -0
- package/__generated__/components/bottom-sheet.json +435 -0
- package/__generated__/components/callout.json +613 -0
- package/__generated__/components/checkbox-group.json +43 -0
- package/__generated__/components/checkbox.json +196 -0
- package/__generated__/components/checkmark.json +573 -0
- package/__generated__/components/chip-tablist.json +107 -0
- package/__generated__/components/chip.json +929 -0
- package/__generated__/components/content-placeholder.json +171 -0
- package/__generated__/components/contextual-floating-button.json +473 -0
- package/__generated__/components/control-chip.json +524 -0
- package/__generated__/components/dialog.json +307 -0
- package/__generated__/components/divider.json +46 -0
- package/__generated__/components/extended-action-sheet-close-button.json +122 -0
- package/__generated__/components/extended-action-sheet-item.json +197 -0
- package/__generated__/components/extended-action-sheet.json +308 -0
- package/__generated__/components/extended-fab.json +337 -0
- package/__generated__/components/fab.json +124 -0
- package/__generated__/components/field-label.json +108 -0
- package/__generated__/components/field.json +381 -0
- package/__generated__/components/floating-action-button.json +259 -0
- package/__generated__/components/help-bubble.json +310 -0
- package/__generated__/components/identity-placeholder.json +56 -0
- package/__generated__/components/image-frame-floater.json +47 -0
- package/__generated__/components/image-frame-indicator.json +99 -0
- package/__generated__/components/image-frame-reaction-button.json +132 -0
- package/__generated__/components/image-frame.json +97 -0
- package/__generated__/components/inline-banner.json +581 -0
- package/__generated__/components/input-button.json +558 -0
- package/__generated__/components/link-content.json +210 -0
- package/__generated__/components/list-header.json +133 -0
- package/__generated__/components/list-item.json +401 -0
- package/__generated__/components/manner-temp-badge.json +373 -0
- package/__generated__/components/manner-temp.json +309 -0
- package/__generated__/components/menu-item.json +448 -0
- package/__generated__/components/menu-sheet-close-button.json +121 -0
- package/__generated__/components/menu-sheet-item.json +284 -0
- package/__generated__/components/menu-sheet.json +314 -0
- package/__generated__/components/menu.json +319 -0
- package/__generated__/components/notification-badge.json +232 -0
- package/__generated__/components/page-banner.json +956 -0
- package/__generated__/components/progress-circle.json +318 -0
- package/__generated__/components/radio-group.json +43 -0
- package/__generated__/components/radio.json +196 -0
- package/__generated__/components/radiomark.json +399 -0
- package/__generated__/components/reaction-button.json +504 -0
- package/__generated__/components/scroll-fog.json +60 -0
- package/__generated__/components/segmented-control-indicator.json +107 -0
- package/__generated__/components/segmented-control-item.json +205 -0
- package/__generated__/components/segmented-control.json +57 -0
- package/__generated__/components/select-box-checkmark.json +149 -0
- package/__generated__/components/select-box-group.json +50 -0
- package/__generated__/components/select-box.json +468 -0
- package/__generated__/components/side-panel-close-button.json +120 -0
- package/__generated__/components/side-panel.json +434 -0
- package/__generated__/components/skeleton.json +236 -0
- package/__generated__/components/slider-thumb.json +114 -0
- package/__generated__/components/slider-tick.json +97 -0
- package/__generated__/components/slider.json +395 -0
- package/__generated__/components/snackbar.json +360 -0
- package/__generated__/components/switch.json +207 -0
- package/__generated__/components/switchmark.json +502 -0
- package/__generated__/components/tab.json +189 -0
- package/__generated__/components/tablist.json +225 -0
- package/__generated__/components/tag-group-item.json +402 -0
- package/__generated__/components/tag-group.json +137 -0
- package/__generated__/components/text-button.json +114 -0
- package/__generated__/components/text-input.json +886 -0
- package/__generated__/components/toggle-button.json +641 -0
- package/__generated__/components/top-navigation-icon-button.json +139 -0
- package/__generated__/components/top-navigation-text-button.json +225 -0
- package/__generated__/components/top-navigation.json +438 -0
- package/__generated__/components/typography.json +2674 -0
- package/__generated__/dimension.json +275 -0
- package/__generated__/duration.json +95 -0
- package/__generated__/font-size.json +338 -0
- package/__generated__/font-weight.json +36 -0
- package/__generated__/gradient.json +247 -0
- package/__generated__/index.json +309 -0
- package/__generated__/line-height.json +338 -0
- package/__generated__/radius.json +133 -0
- package/__generated__/shadow.json +170 -0
- package/__generated__/timing-function.json +103 -0
- package/collections.yaml +15 -3
- package/color.yaml +13 -10
- package/components/accordion-item.yaml +193 -0
- package/components/accordion.yaml +33 -0
- package/components/attachment-input-dropzone.yaml +55 -0
- package/components/attachment-input-item-action-button.yaml +53 -0
- package/components/attachment-input-item-remove-button.yaml +48 -0
- package/components/attachment-input-item.yaml +168 -0
- package/components/attachment-input-trigger.yaml +81 -0
- package/components/attachment-input.yaml +25 -0
- package/components/chip-tablist.yaml +0 -4
- package/components/image-frame.yaml +0 -20
- package/components/input-button.yaml +67 -20
- package/components/menu-item.yaml +162 -0
- package/components/menu-sheet-close-button.yaml +0 -1
- package/components/menu.yaml +124 -0
- package/components/side-panel-close-button.yaml +44 -0
- package/components/side-panel.yaml +170 -0
- package/components/text-input.yaml +61 -18
- package/components/typography.yaml +276 -0
- package/font-size.yaml +32 -0
- package/gradient.yaml +0 -38
- package/line-height.yaml +32 -0
- package/package.json +11 -3
- package/components/chip-tab.yaml +0 -137
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
# yaml-language-server: $schema=./schema.json
|
|
2
|
+
kind: ComponentSpec
|
|
3
|
+
metadata:
|
|
4
|
+
id: attachment-input-item
|
|
5
|
+
name: Attachment Input Item
|
|
6
|
+
data:
|
|
7
|
+
schema:
|
|
8
|
+
slots:
|
|
9
|
+
root:
|
|
10
|
+
properties:
|
|
11
|
+
width:
|
|
12
|
+
type: dimension
|
|
13
|
+
height:
|
|
14
|
+
type: dimension
|
|
15
|
+
paddingX:
|
|
16
|
+
type: dimension
|
|
17
|
+
gap:
|
|
18
|
+
type: dimension
|
|
19
|
+
color:
|
|
20
|
+
type: color
|
|
21
|
+
cornerRadius:
|
|
22
|
+
type: dimension
|
|
23
|
+
strokeWidth:
|
|
24
|
+
type: dimension
|
|
25
|
+
strokeColor:
|
|
26
|
+
type: color
|
|
27
|
+
opacity:
|
|
28
|
+
type: number
|
|
29
|
+
thumbnail:
|
|
30
|
+
properties:
|
|
31
|
+
color:
|
|
32
|
+
type: color
|
|
33
|
+
size:
|
|
34
|
+
type: dimension
|
|
35
|
+
cornerRadius:
|
|
36
|
+
type: dimension
|
|
37
|
+
thumbnailIcon:
|
|
38
|
+
properties:
|
|
39
|
+
color:
|
|
40
|
+
type: color
|
|
41
|
+
size:
|
|
42
|
+
type: dimension
|
|
43
|
+
name:
|
|
44
|
+
properties:
|
|
45
|
+
color:
|
|
46
|
+
type: color
|
|
47
|
+
fontSize:
|
|
48
|
+
type: dimension
|
|
49
|
+
lineHeight:
|
|
50
|
+
type: dimension
|
|
51
|
+
fontWeight:
|
|
52
|
+
type: number
|
|
53
|
+
size:
|
|
54
|
+
properties:
|
|
55
|
+
color:
|
|
56
|
+
type: color
|
|
57
|
+
fontSize:
|
|
58
|
+
type: dimension
|
|
59
|
+
lineHeight:
|
|
60
|
+
type: dimension
|
|
61
|
+
fontWeight:
|
|
62
|
+
type: number
|
|
63
|
+
backdrop:
|
|
64
|
+
properties:
|
|
65
|
+
color:
|
|
66
|
+
type: color
|
|
67
|
+
removeButtonMask:
|
|
68
|
+
description: dragging 상태에서는 표시되지 않습니다.
|
|
69
|
+
properties:
|
|
70
|
+
offset:
|
|
71
|
+
type: dimension
|
|
72
|
+
size:
|
|
73
|
+
type: dimension
|
|
74
|
+
badge:
|
|
75
|
+
properties:
|
|
76
|
+
color:
|
|
77
|
+
type: color
|
|
78
|
+
height:
|
|
79
|
+
type: dimension
|
|
80
|
+
cornerRadius:
|
|
81
|
+
type: dimension
|
|
82
|
+
paddingX:
|
|
83
|
+
type: dimension
|
|
84
|
+
badgeLabel:
|
|
85
|
+
properties:
|
|
86
|
+
color:
|
|
87
|
+
type: color
|
|
88
|
+
fontSize:
|
|
89
|
+
type: dimension
|
|
90
|
+
lineHeight:
|
|
91
|
+
type: dimension
|
|
92
|
+
fontWeight:
|
|
93
|
+
type: number
|
|
94
|
+
|
|
95
|
+
definitions:
|
|
96
|
+
base:
|
|
97
|
+
enabled:
|
|
98
|
+
root:
|
|
99
|
+
height: 80px
|
|
100
|
+
color: $color.bg.transparent
|
|
101
|
+
cornerRadius: $radius.r3
|
|
102
|
+
strokeWidth: 1px
|
|
103
|
+
gap: $dimension.x2_5
|
|
104
|
+
thumbnail:
|
|
105
|
+
color: $color.bg.neutral-weak
|
|
106
|
+
size: $dimension.x12
|
|
107
|
+
cornerRadius: $radius.r2
|
|
108
|
+
thumbnailIcon:
|
|
109
|
+
color: $color.fg.neutral-subtle
|
|
110
|
+
size: $dimension.x6
|
|
111
|
+
name:
|
|
112
|
+
color: $color.fg.neutral
|
|
113
|
+
fontSize: $font-size.t2
|
|
114
|
+
lineHeight: $line-height.t2
|
|
115
|
+
fontWeight: $font-weight.medium
|
|
116
|
+
size:
|
|
117
|
+
color: $color.fg.neutral-subtle
|
|
118
|
+
fontSize: $font-size.t1
|
|
119
|
+
lineHeight: $line-height.t1
|
|
120
|
+
fontWeight: $font-weight.regular
|
|
121
|
+
removeButtonMask:
|
|
122
|
+
offset: $dimension.x1_5
|
|
123
|
+
size: $dimension.x6
|
|
124
|
+
|
|
125
|
+
type=file:
|
|
126
|
+
enabled:
|
|
127
|
+
root:
|
|
128
|
+
width: 160px
|
|
129
|
+
strokeColor: $color.stroke.neutral-weak
|
|
130
|
+
paddingX: $dimension.x4
|
|
131
|
+
readonly:
|
|
132
|
+
thumbnailIcon:
|
|
133
|
+
color: $color.fg.disabled
|
|
134
|
+
name:
|
|
135
|
+
color: $color.fg.disabled
|
|
136
|
+
size:
|
|
137
|
+
color: $color.fg.disabled
|
|
138
|
+
dragging:
|
|
139
|
+
thumbnailIcon:
|
|
140
|
+
color: $color.fg.disabled
|
|
141
|
+
name:
|
|
142
|
+
color: $color.fg.disabled
|
|
143
|
+
size:
|
|
144
|
+
color: $color.fg.disabled
|
|
145
|
+
|
|
146
|
+
type=image:
|
|
147
|
+
enabled:
|
|
148
|
+
root:
|
|
149
|
+
width: 80px
|
|
150
|
+
strokeColor: $color.stroke.neutral-subtle
|
|
151
|
+
backdrop:
|
|
152
|
+
color: $color.bg.overlay
|
|
153
|
+
badge:
|
|
154
|
+
color: $color.bg.overlay
|
|
155
|
+
height: $dimension.x6
|
|
156
|
+
cornerRadius: $radius.r3
|
|
157
|
+
paddingX: $dimension.x1
|
|
158
|
+
badgeLabel:
|
|
159
|
+
color: $color.palette.static-white
|
|
160
|
+
fontSize: $font-size.t2
|
|
161
|
+
lineHeight: $line-height.t2
|
|
162
|
+
fontWeight: $font-weight.medium
|
|
163
|
+
readonly:
|
|
164
|
+
root:
|
|
165
|
+
opacity: 0.5
|
|
166
|
+
dragging:
|
|
167
|
+
root:
|
|
168
|
+
opacity: 0.5
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
# yaml-language-server: $schema=./schema.json
|
|
2
|
+
kind: ComponentSpec
|
|
3
|
+
metadata:
|
|
4
|
+
id: attachment-input-trigger
|
|
5
|
+
name: Attachment Input Trigger
|
|
6
|
+
data:
|
|
7
|
+
schema:
|
|
8
|
+
slots:
|
|
9
|
+
root:
|
|
10
|
+
properties:
|
|
11
|
+
size:
|
|
12
|
+
type: dimension
|
|
13
|
+
gap:
|
|
14
|
+
type: dimension
|
|
15
|
+
color:
|
|
16
|
+
type: color
|
|
17
|
+
cornerRadius:
|
|
18
|
+
type: dimension
|
|
19
|
+
strokeWidth:
|
|
20
|
+
type: dimension
|
|
21
|
+
strokeColor:
|
|
22
|
+
type: color
|
|
23
|
+
icon:
|
|
24
|
+
properties:
|
|
25
|
+
size:
|
|
26
|
+
type: dimension
|
|
27
|
+
color:
|
|
28
|
+
type: color
|
|
29
|
+
itemCount:
|
|
30
|
+
properties:
|
|
31
|
+
color:
|
|
32
|
+
type: color
|
|
33
|
+
fontWeight:
|
|
34
|
+
type: number
|
|
35
|
+
fontSize:
|
|
36
|
+
type: dimension
|
|
37
|
+
lineHeight:
|
|
38
|
+
type: dimension
|
|
39
|
+
maxItemCount:
|
|
40
|
+
properties:
|
|
41
|
+
color:
|
|
42
|
+
type: color
|
|
43
|
+
fontWeight:
|
|
44
|
+
type: number
|
|
45
|
+
fontSize:
|
|
46
|
+
type: dimension
|
|
47
|
+
lineHeight:
|
|
48
|
+
type: dimension
|
|
49
|
+
definitions:
|
|
50
|
+
base:
|
|
51
|
+
enabled:
|
|
52
|
+
root:
|
|
53
|
+
size: 80px
|
|
54
|
+
gap: $dimension.x1
|
|
55
|
+
color: $color.bg.transparent
|
|
56
|
+
cornerRadius: $radius.r3
|
|
57
|
+
strokeWidth: 1px
|
|
58
|
+
strokeColor: $color.stroke.neutral-weak
|
|
59
|
+
icon:
|
|
60
|
+
size: $dimension.x6
|
|
61
|
+
color: $color.fg.neutral-subtle
|
|
62
|
+
itemCount:
|
|
63
|
+
color: $color.fg.neutral
|
|
64
|
+
fontWeight: $font-weight.regular
|
|
65
|
+
fontSize: $font-size.t2
|
|
66
|
+
lineHeight: $line-height.t2
|
|
67
|
+
maxItemCount:
|
|
68
|
+
color: $color.fg.neutral-subtle
|
|
69
|
+
fontWeight: $font-weight.regular
|
|
70
|
+
fontSize: $font-size.t2
|
|
71
|
+
lineHeight: $line-height.t2
|
|
72
|
+
pressed:
|
|
73
|
+
root:
|
|
74
|
+
color: $color.bg.transparent-pressed
|
|
75
|
+
disabled:
|
|
76
|
+
icon:
|
|
77
|
+
color: $color.fg.disabled
|
|
78
|
+
itemCount:
|
|
79
|
+
color: $color.fg.disabled
|
|
80
|
+
maxItemCount:
|
|
81
|
+
color: $color.fg.disabled
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
# yaml-language-server: $schema=./schema.json
|
|
2
|
+
kind: ComponentSpec
|
|
3
|
+
metadata:
|
|
4
|
+
id: attachment-input
|
|
5
|
+
name: Attachment Input
|
|
6
|
+
data:
|
|
7
|
+
schema:
|
|
8
|
+
slots:
|
|
9
|
+
root:
|
|
10
|
+
properties:
|
|
11
|
+
gap:
|
|
12
|
+
type: dimension
|
|
13
|
+
description: Attachment Input Dropzone과 Items를 감싸는 컨테이너입니다.
|
|
14
|
+
items:
|
|
15
|
+
properties:
|
|
16
|
+
gap:
|
|
17
|
+
type: dimension
|
|
18
|
+
description: Attachment Input Trigger 및 Attachment Input Items를 감싸는 컨테이너입니다.
|
|
19
|
+
definitions:
|
|
20
|
+
base:
|
|
21
|
+
enabled:
|
|
22
|
+
root:
|
|
23
|
+
gap: $dimension.x2
|
|
24
|
+
items:
|
|
25
|
+
gap: $dimension.x2
|
|
@@ -14,9 +14,6 @@ data:
|
|
|
14
14
|
strokeWidth:
|
|
15
15
|
type: dimension
|
|
16
16
|
description: stroke 옵션 사용 시 적용되는 테두리 두께입니다.
|
|
17
|
-
cornerRadius:
|
|
18
|
-
type: dimension
|
|
19
|
-
description: 이 값은 기본값이며 변경할 수 있습니다.
|
|
20
17
|
padding:
|
|
21
18
|
type: dimension
|
|
22
19
|
description: 내부에 오버레이 요소가 존재하는 경우 이미지 모서리와 오버레이 요소 사이의 간격입니다. 이 값은 기본값이며 변경할 수 있습니다.
|
|
@@ -27,18 +24,6 @@ data:
|
|
|
27
24
|
description: 이미지 테두리에 스트로크를 표시합니다.
|
|
28
25
|
"false":
|
|
29
26
|
description: 테두리를 표시하지 않습니다.
|
|
30
|
-
rounded:
|
|
31
|
-
values:
|
|
32
|
-
"true":
|
|
33
|
-
description: |
|
|
34
|
-
모서리를 둥글게 처리합니다.
|
|
35
|
-
@deprecated `rounded` 옵션은 @seed-design/react@1.3.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
|
|
36
|
-
Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
|
|
37
|
-
"false":
|
|
38
|
-
description: |
|
|
39
|
-
모서리를 둥글게 처리하지 않습니다.
|
|
40
|
-
@deprecated `rounded` 옵션은 @seed-design/react@1.3.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
|
|
41
|
-
Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
|
|
42
27
|
definitions:
|
|
43
28
|
base:
|
|
44
29
|
enabled:
|
|
@@ -50,8 +35,3 @@ data:
|
|
|
50
35
|
strokeColor: $color.stroke.neutral-subtle
|
|
51
36
|
strokeWidth: 1px
|
|
52
37
|
stroke=false: {}
|
|
53
|
-
rounded=true:
|
|
54
|
-
enabled:
|
|
55
|
-
root:
|
|
56
|
-
cornerRadius: $radius.r2
|
|
57
|
-
rounded=false: {}
|
|
@@ -89,15 +89,17 @@ data:
|
|
|
89
89
|
type: dimension
|
|
90
90
|
color:
|
|
91
91
|
type: color
|
|
92
|
+
variants:
|
|
93
|
+
size:
|
|
94
|
+
values:
|
|
95
|
+
large:
|
|
96
|
+
description: 뷰포트 너비와 관계없이 사용할 수 있습니다.
|
|
97
|
+
medium:
|
|
98
|
+
description: Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
|
|
92
99
|
definitions:
|
|
93
100
|
base:
|
|
94
101
|
enabled:
|
|
95
102
|
root:
|
|
96
|
-
height: $dimension.x13
|
|
97
|
-
cornerRadius: $radius.r3
|
|
98
|
-
gap: $dimension.x2_5
|
|
99
|
-
paddingX: $dimension.x4
|
|
100
|
-
|
|
101
103
|
strokeWidth: 1px
|
|
102
104
|
strokeColor: $color.stroke.neutral-weak
|
|
103
105
|
|
|
@@ -108,41 +110,28 @@ data:
|
|
|
108
110
|
strokeTimingFunction: $timing-function.easing
|
|
109
111
|
|
|
110
112
|
value:
|
|
111
|
-
fontSize: $font-size.t5
|
|
112
|
-
lineHeight: $line-height.t5
|
|
113
113
|
fontWeight: $font-weight.regular
|
|
114
114
|
|
|
115
115
|
color: $color.fg.neutral
|
|
116
116
|
|
|
117
117
|
placeholder:
|
|
118
|
-
fontSize: $font-size.t5
|
|
119
|
-
lineHeight: $line-height.t5
|
|
120
118
|
fontWeight: $font-weight.regular
|
|
121
119
|
color: $color.fg.placeholder
|
|
122
120
|
|
|
123
121
|
prefixText:
|
|
124
|
-
fontSize: $font-size.t5
|
|
125
|
-
lineHeight: $line-height.t5
|
|
126
122
|
fontWeight: $font-weight.regular
|
|
127
123
|
|
|
128
|
-
color: $color.fg.neutral-
|
|
124
|
+
color: $color.fg.neutral-subtle
|
|
129
125
|
prefixIcon:
|
|
130
|
-
size: $dimension.x5
|
|
131
|
-
|
|
132
126
|
color: $color.fg.neutral-muted
|
|
133
127
|
suffixText:
|
|
134
|
-
fontSize: $font-size.t5
|
|
135
|
-
lineHeight: $line-height.t5
|
|
136
128
|
fontWeight: $font-weight.regular
|
|
137
129
|
|
|
138
|
-
color: $color.fg.neutral-
|
|
130
|
+
color: $color.fg.neutral-subtle
|
|
139
131
|
|
|
140
132
|
suffixIcon:
|
|
141
|
-
size: $dimension.x5
|
|
142
|
-
|
|
143
133
|
color: $color.fg.neutral-muted
|
|
144
134
|
clearButton:
|
|
145
|
-
size: 22px
|
|
146
135
|
color: $color.fg.neutral-subtle
|
|
147
136
|
|
|
148
137
|
pressed:
|
|
@@ -161,6 +150,14 @@ data:
|
|
|
161
150
|
color: $color.fg.disabled
|
|
162
151
|
placeholder:
|
|
163
152
|
color: $color.fg.disabled
|
|
153
|
+
prefixText:
|
|
154
|
+
color: $color.fg.disabled
|
|
155
|
+
prefixIcon:
|
|
156
|
+
color: $color.fg.disabled
|
|
157
|
+
suffixText:
|
|
158
|
+
color: $color.fg.disabled
|
|
159
|
+
suffixIcon:
|
|
160
|
+
color: $color.fg.disabled
|
|
164
161
|
|
|
165
162
|
readonly:
|
|
166
163
|
root:
|
|
@@ -169,3 +166,53 @@ data:
|
|
|
169
166
|
color: $color.fg.neutral
|
|
170
167
|
placeholder:
|
|
171
168
|
color: $color.fg.placeholder
|
|
169
|
+
size=large:
|
|
170
|
+
enabled:
|
|
171
|
+
root:
|
|
172
|
+
height: $dimension.x13
|
|
173
|
+
gap: $dimension.x2_5
|
|
174
|
+
cornerRadius: $radius.r3
|
|
175
|
+
paddingX: $dimension.x4
|
|
176
|
+
value:
|
|
177
|
+
fontSize: $font-size.t5
|
|
178
|
+
lineHeight: $line-height.t5
|
|
179
|
+
placeholder:
|
|
180
|
+
fontSize: $font-size.t5
|
|
181
|
+
lineHeight: $line-height.t5
|
|
182
|
+
prefixText:
|
|
183
|
+
fontSize: $font-size.t5
|
|
184
|
+
lineHeight: $line-height.t5
|
|
185
|
+
prefixIcon:
|
|
186
|
+
size: $dimension.x5
|
|
187
|
+
suffixText:
|
|
188
|
+
fontSize: $font-size.t5
|
|
189
|
+
lineHeight: $line-height.t5
|
|
190
|
+
suffixIcon:
|
|
191
|
+
size: $dimension.x5
|
|
192
|
+
clearButton:
|
|
193
|
+
size: 22px
|
|
194
|
+
size=medium:
|
|
195
|
+
enabled:
|
|
196
|
+
root:
|
|
197
|
+
height: $dimension.x10
|
|
198
|
+
gap: $dimension.x2
|
|
199
|
+
cornerRadius: $radius.r2
|
|
200
|
+
paddingX: $dimension.x3_5
|
|
201
|
+
value:
|
|
202
|
+
fontSize: $font-size.t4
|
|
203
|
+
lineHeight: $line-height.t4
|
|
204
|
+
placeholder:
|
|
205
|
+
fontSize: $font-size.t4
|
|
206
|
+
lineHeight: $line-height.t4
|
|
207
|
+
prefixText:
|
|
208
|
+
fontSize: $font-size.t4
|
|
209
|
+
lineHeight: $line-height.t4
|
|
210
|
+
prefixIcon:
|
|
211
|
+
size: $dimension.x4
|
|
212
|
+
suffixText:
|
|
213
|
+
fontSize: $font-size.t4
|
|
214
|
+
lineHeight: $line-height.t4
|
|
215
|
+
suffixIcon:
|
|
216
|
+
size: $dimension.x4
|
|
217
|
+
clearButton:
|
|
218
|
+
size: $dimension.x4_5
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
# yaml-language-server: $schema=./schema.json
|
|
2
|
+
kind: ComponentSpec
|
|
3
|
+
metadata:
|
|
4
|
+
id: menu-item
|
|
5
|
+
name: Menu Item
|
|
6
|
+
data:
|
|
7
|
+
schema:
|
|
8
|
+
slots:
|
|
9
|
+
root:
|
|
10
|
+
properties:
|
|
11
|
+
color:
|
|
12
|
+
type: color
|
|
13
|
+
marginX:
|
|
14
|
+
type: dimension
|
|
15
|
+
cornerRadius:
|
|
16
|
+
type: dimension
|
|
17
|
+
colorDuration:
|
|
18
|
+
type: duration
|
|
19
|
+
colorTimingFunction:
|
|
20
|
+
type: cubicBezier
|
|
21
|
+
marginDuration:
|
|
22
|
+
type: duration
|
|
23
|
+
marginTimingFunction:
|
|
24
|
+
type: cubicBezier
|
|
25
|
+
borderRadiusDuration:
|
|
26
|
+
type: duration
|
|
27
|
+
borderRadiusTimingFunction:
|
|
28
|
+
type: cubicBezier
|
|
29
|
+
paddingX:
|
|
30
|
+
type: dimension
|
|
31
|
+
paddingY:
|
|
32
|
+
type: dimension
|
|
33
|
+
gap:
|
|
34
|
+
type: dimension
|
|
35
|
+
prefixIcon:
|
|
36
|
+
properties:
|
|
37
|
+
size:
|
|
38
|
+
type: dimension
|
|
39
|
+
color:
|
|
40
|
+
type: color
|
|
41
|
+
suffixIcon:
|
|
42
|
+
properties:
|
|
43
|
+
size:
|
|
44
|
+
type: dimension
|
|
45
|
+
color:
|
|
46
|
+
type: color
|
|
47
|
+
body:
|
|
48
|
+
properties:
|
|
49
|
+
gap:
|
|
50
|
+
type: dimension
|
|
51
|
+
label:
|
|
52
|
+
properties:
|
|
53
|
+
color:
|
|
54
|
+
type: color
|
|
55
|
+
fontSize:
|
|
56
|
+
type: dimension
|
|
57
|
+
lineHeight:
|
|
58
|
+
type: dimension
|
|
59
|
+
fontWeight:
|
|
60
|
+
type: number
|
|
61
|
+
description:
|
|
62
|
+
properties:
|
|
63
|
+
color:
|
|
64
|
+
type: color
|
|
65
|
+
fontSize:
|
|
66
|
+
type: dimension
|
|
67
|
+
lineHeight:
|
|
68
|
+
type: dimension
|
|
69
|
+
fontWeight:
|
|
70
|
+
type: number
|
|
71
|
+
variants:
|
|
72
|
+
tone:
|
|
73
|
+
values:
|
|
74
|
+
neutral:
|
|
75
|
+
description: 일반적인 작업을 수행하는 기본 아이템입니다.
|
|
76
|
+
critical:
|
|
77
|
+
description: 데이터 삭제와 같이 되돌릴 수 없는 작업을 수행하는 아이템입니다.
|
|
78
|
+
size:
|
|
79
|
+
values:
|
|
80
|
+
medium:
|
|
81
|
+
description: 뷰포트 너비와 관계없이 사용할 수 있습니다.
|
|
82
|
+
small:
|
|
83
|
+
description: Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
|
|
84
|
+
definitions:
|
|
85
|
+
base:
|
|
86
|
+
enabled:
|
|
87
|
+
root:
|
|
88
|
+
colorDuration: $duration.color-transition
|
|
89
|
+
colorTimingFunction: $timing-function.easing
|
|
90
|
+
marginDuration: $duration.d3
|
|
91
|
+
marginTimingFunction: $timing-function.easing
|
|
92
|
+
borderRadiusDuration: $duration.d3
|
|
93
|
+
borderRadiusTimingFunction: $timing-function.easing
|
|
94
|
+
body:
|
|
95
|
+
gap: $dimension.x0_5
|
|
96
|
+
label:
|
|
97
|
+
fontWeight: $font-weight.regular
|
|
98
|
+
description:
|
|
99
|
+
fontWeight: $font-weight.regular
|
|
100
|
+
color: $color.fg.neutral-subtle
|
|
101
|
+
pressed:
|
|
102
|
+
root:
|
|
103
|
+
color: $color.bg.transparent-pressed
|
|
104
|
+
marginX: $dimension.x2
|
|
105
|
+
cornerRadius: $radius.r3
|
|
106
|
+
disabled:
|
|
107
|
+
prefixIcon:
|
|
108
|
+
color: $color.fg.disabled
|
|
109
|
+
suffixIcon:
|
|
110
|
+
color: $color.fg.disabled
|
|
111
|
+
label:
|
|
112
|
+
color: $color.fg.disabled
|
|
113
|
+
description:
|
|
114
|
+
color: $color.fg.disabled
|
|
115
|
+
size=medium:
|
|
116
|
+
enabled:
|
|
117
|
+
root:
|
|
118
|
+
paddingX: $dimension.x4
|
|
119
|
+
paddingY: $dimension.x3
|
|
120
|
+
gap: $dimension.x3
|
|
121
|
+
prefixIcon:
|
|
122
|
+
size: 22px
|
|
123
|
+
suffixIcon:
|
|
124
|
+
size: 18px
|
|
125
|
+
label:
|
|
126
|
+
fontSize: $font-size.t5
|
|
127
|
+
lineHeight: $line-height.t5
|
|
128
|
+
description:
|
|
129
|
+
fontSize: $font-size.t3
|
|
130
|
+
lineHeight: $line-height.t3
|
|
131
|
+
size=small:
|
|
132
|
+
enabled:
|
|
133
|
+
root:
|
|
134
|
+
paddingX: $dimension.x4
|
|
135
|
+
paddingY: $dimension.x2_5
|
|
136
|
+
gap: $dimension.x2
|
|
137
|
+
prefixIcon:
|
|
138
|
+
size: 18px
|
|
139
|
+
suffixIcon:
|
|
140
|
+
size: 16px
|
|
141
|
+
label:
|
|
142
|
+
fontSize: $font-size.t4
|
|
143
|
+
lineHeight: $line-height.t4
|
|
144
|
+
description:
|
|
145
|
+
fontSize: $font-size.t2
|
|
146
|
+
lineHeight: $line-height.t2
|
|
147
|
+
tone=neutral:
|
|
148
|
+
enabled:
|
|
149
|
+
prefixIcon:
|
|
150
|
+
color: $color.fg.neutral
|
|
151
|
+
suffixIcon:
|
|
152
|
+
color: $color.fg.neutral
|
|
153
|
+
label:
|
|
154
|
+
color: $color.fg.neutral
|
|
155
|
+
tone=critical:
|
|
156
|
+
enabled:
|
|
157
|
+
prefixIcon:
|
|
158
|
+
color: $color.fg.critical
|
|
159
|
+
suffixIcon:
|
|
160
|
+
color: $color.fg.critical
|
|
161
|
+
label:
|
|
162
|
+
color: $color.fg.critical
|