@seed-design/rootage-artifacts 2.2.1 → 2.3.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/alert-dialog.json +307 -0
- package/__generated__/components/dialog-close-button.json +124 -0
- package/__generated__/components/dialog.json +175 -28
- package/__generated__/components/quantity-picker-button.json +300 -0
- package/__generated__/components/quantity-picker.json +309 -0
- package/__generated__/components/select-item.json +362 -0
- package/__generated__/components/select-trigger.json +451 -0
- package/__generated__/components/select.json +298 -0
- package/__generated__/index.json +22 -1
- package/components/alert-dialog.yaml +131 -0
- package/components/dialog-close-button.yaml +47 -0
- package/components/dialog.yaml +68 -17
- package/components/quantity-picker-button.yaml +93 -0
- package/components/quantity-picker.yaml +101 -0
- package/components/select-item.yaml +141 -0
- package/components/select-trigger.yaml +175 -0
- package/components/select.yaml +118 -0
- package/package.json +1 -1
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
# yaml-language-server: $schema=./schema.json
|
|
2
|
+
kind: ComponentSpec
|
|
3
|
+
metadata:
|
|
4
|
+
id: quantity-picker-button
|
|
5
|
+
name: Quantity Picker Button
|
|
6
|
+
data:
|
|
7
|
+
schema:
|
|
8
|
+
slots:
|
|
9
|
+
root:
|
|
10
|
+
properties:
|
|
11
|
+
size:
|
|
12
|
+
type: dimension
|
|
13
|
+
cornerRadius:
|
|
14
|
+
type: dimension
|
|
15
|
+
color:
|
|
16
|
+
type: color
|
|
17
|
+
colorDuration:
|
|
18
|
+
type: duration
|
|
19
|
+
colorTimingFunction:
|
|
20
|
+
type: cubicBezier
|
|
21
|
+
icon:
|
|
22
|
+
properties:
|
|
23
|
+
size:
|
|
24
|
+
type: dimension
|
|
25
|
+
color:
|
|
26
|
+
type: color
|
|
27
|
+
progressCircle:
|
|
28
|
+
properties:
|
|
29
|
+
trackColor:
|
|
30
|
+
type: color
|
|
31
|
+
rangeColor:
|
|
32
|
+
type: color
|
|
33
|
+
size:
|
|
34
|
+
type: dimension
|
|
35
|
+
thickness:
|
|
36
|
+
type: dimension
|
|
37
|
+
variants:
|
|
38
|
+
size:
|
|
39
|
+
values:
|
|
40
|
+
small: {}
|
|
41
|
+
medium: {}
|
|
42
|
+
large: {}
|
|
43
|
+
definitions:
|
|
44
|
+
base:
|
|
45
|
+
enabled:
|
|
46
|
+
root:
|
|
47
|
+
color: $color.bg.transparent
|
|
48
|
+
colorDuration: $duration.color-transition
|
|
49
|
+
colorTimingFunction: $timing-function.easing
|
|
50
|
+
icon:
|
|
51
|
+
color: $color.fg.neutral
|
|
52
|
+
progressCircle:
|
|
53
|
+
trackColor: $color.palette.gray-500
|
|
54
|
+
rangeColor: $color.fg.neutral
|
|
55
|
+
pressed:
|
|
56
|
+
root:
|
|
57
|
+
color: $color.bg.transparent-pressed
|
|
58
|
+
disabled:
|
|
59
|
+
icon:
|
|
60
|
+
color: $color.fg.disabled
|
|
61
|
+
loading:
|
|
62
|
+
root:
|
|
63
|
+
color: $color.bg.transparent-pressed
|
|
64
|
+
size=small:
|
|
65
|
+
enabled:
|
|
66
|
+
root:
|
|
67
|
+
size: $dimension.x9
|
|
68
|
+
cornerRadius: $radius.r2
|
|
69
|
+
icon:
|
|
70
|
+
size: 16px
|
|
71
|
+
progressCircle:
|
|
72
|
+
size: 16px
|
|
73
|
+
thickness: 2px
|
|
74
|
+
size=medium:
|
|
75
|
+
enabled:
|
|
76
|
+
root:
|
|
77
|
+
size: $dimension.x10
|
|
78
|
+
cornerRadius: $radius.r2
|
|
79
|
+
icon:
|
|
80
|
+
size: 18px
|
|
81
|
+
progressCircle:
|
|
82
|
+
size: 18px
|
|
83
|
+
thickness: 2px
|
|
84
|
+
size=large:
|
|
85
|
+
enabled:
|
|
86
|
+
root:
|
|
87
|
+
size: $dimension.x13
|
|
88
|
+
cornerRadius: $radius.r3
|
|
89
|
+
icon:
|
|
90
|
+
size: 22px
|
|
91
|
+
progressCircle:
|
|
92
|
+
size: 22px
|
|
93
|
+
thickness: 2px
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
# yaml-language-server: $schema=./schema.json
|
|
2
|
+
kind: ComponentSpec
|
|
3
|
+
metadata:
|
|
4
|
+
id: quantity-picker
|
|
5
|
+
name: Quantity Picker
|
|
6
|
+
data:
|
|
7
|
+
schema:
|
|
8
|
+
slots:
|
|
9
|
+
root:
|
|
10
|
+
properties:
|
|
11
|
+
height:
|
|
12
|
+
type: dimension
|
|
13
|
+
cornerRadius:
|
|
14
|
+
type: dimension
|
|
15
|
+
color:
|
|
16
|
+
type: color
|
|
17
|
+
strokeWidth:
|
|
18
|
+
type: dimension
|
|
19
|
+
strokeColor:
|
|
20
|
+
type: color
|
|
21
|
+
valueDisplay:
|
|
22
|
+
properties:
|
|
23
|
+
paddingX:
|
|
24
|
+
type: dimension
|
|
25
|
+
fontSize:
|
|
26
|
+
type: dimension
|
|
27
|
+
lineHeight:
|
|
28
|
+
type: dimension
|
|
29
|
+
fontWeight:
|
|
30
|
+
type: number
|
|
31
|
+
color:
|
|
32
|
+
type: color
|
|
33
|
+
divider:
|
|
34
|
+
properties:
|
|
35
|
+
width:
|
|
36
|
+
type: dimension
|
|
37
|
+
height:
|
|
38
|
+
type: dimension
|
|
39
|
+
color:
|
|
40
|
+
type: color
|
|
41
|
+
variants:
|
|
42
|
+
size:
|
|
43
|
+
values:
|
|
44
|
+
small: {}
|
|
45
|
+
medium: {}
|
|
46
|
+
large: {}
|
|
47
|
+
definitions:
|
|
48
|
+
base:
|
|
49
|
+
enabled:
|
|
50
|
+
root:
|
|
51
|
+
color: $color.bg.layer-default
|
|
52
|
+
strokeWidth: 1px
|
|
53
|
+
strokeColor: $color.stroke.neutral-weak
|
|
54
|
+
valueDisplay:
|
|
55
|
+
fontWeight: $font-weight.medium
|
|
56
|
+
color: $color.fg.neutral
|
|
57
|
+
divider:
|
|
58
|
+
color: $color.stroke.neutral-subtle
|
|
59
|
+
invalid:
|
|
60
|
+
root:
|
|
61
|
+
strokeWidth: 2px
|
|
62
|
+
strokeColor: $color.stroke.critical-solid
|
|
63
|
+
disabled:
|
|
64
|
+
valueDisplay:
|
|
65
|
+
color: $color.fg.disabled
|
|
66
|
+
size=small:
|
|
67
|
+
enabled:
|
|
68
|
+
root:
|
|
69
|
+
height: $dimension.x9
|
|
70
|
+
cornerRadius: $radius.r2
|
|
71
|
+
valueDisplay:
|
|
72
|
+
paddingX: $dimension.x2
|
|
73
|
+
fontSize: $font-size.t5
|
|
74
|
+
lineHeight: $line-height.t5
|
|
75
|
+
divider:
|
|
76
|
+
width: 1px
|
|
77
|
+
height: $dimension.x4
|
|
78
|
+
size=medium:
|
|
79
|
+
enabled:
|
|
80
|
+
root:
|
|
81
|
+
height: $dimension.x10
|
|
82
|
+
cornerRadius: $radius.r2
|
|
83
|
+
valueDisplay:
|
|
84
|
+
paddingX: $dimension.x2
|
|
85
|
+
fontSize: $font-size.t5
|
|
86
|
+
lineHeight: $line-height.t5
|
|
87
|
+
divider:
|
|
88
|
+
width: 1px
|
|
89
|
+
height: $dimension.x4
|
|
90
|
+
size=large:
|
|
91
|
+
enabled:
|
|
92
|
+
root:
|
|
93
|
+
height: $dimension.x13
|
|
94
|
+
cornerRadius: $radius.r3
|
|
95
|
+
valueDisplay:
|
|
96
|
+
paddingX: $dimension.x2
|
|
97
|
+
fontSize: $font-size.t6
|
|
98
|
+
lineHeight: $line-height.t6
|
|
99
|
+
divider:
|
|
100
|
+
width: 1px
|
|
101
|
+
height: $dimension.x4
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
# yaml-language-server: $schema=./schema.json
|
|
2
|
+
kind: ComponentSpec
|
|
3
|
+
metadata:
|
|
4
|
+
id: select-item
|
|
5
|
+
name: Select 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
|
+
paddingX:
|
|
26
|
+
type: dimension
|
|
27
|
+
paddingY:
|
|
28
|
+
type: dimension
|
|
29
|
+
gap:
|
|
30
|
+
type: dimension
|
|
31
|
+
prefixIcon:
|
|
32
|
+
properties:
|
|
33
|
+
size:
|
|
34
|
+
type: dimension
|
|
35
|
+
color:
|
|
36
|
+
type: color
|
|
37
|
+
body:
|
|
38
|
+
properties:
|
|
39
|
+
gap:
|
|
40
|
+
type: dimension
|
|
41
|
+
label:
|
|
42
|
+
properties:
|
|
43
|
+
color:
|
|
44
|
+
type: color
|
|
45
|
+
fontSize:
|
|
46
|
+
type: dimension
|
|
47
|
+
lineHeight:
|
|
48
|
+
type: dimension
|
|
49
|
+
fontWeight:
|
|
50
|
+
type: number
|
|
51
|
+
description:
|
|
52
|
+
properties:
|
|
53
|
+
color:
|
|
54
|
+
type: color
|
|
55
|
+
fontSize:
|
|
56
|
+
type: dimension
|
|
57
|
+
lineHeight:
|
|
58
|
+
type: dimension
|
|
59
|
+
fontWeight:
|
|
60
|
+
type: number
|
|
61
|
+
indicator:
|
|
62
|
+
properties:
|
|
63
|
+
size:
|
|
64
|
+
type: dimension
|
|
65
|
+
color:
|
|
66
|
+
type: color
|
|
67
|
+
variants:
|
|
68
|
+
size:
|
|
69
|
+
values:
|
|
70
|
+
large:
|
|
71
|
+
description: 뷰포트 너비와 관계없이 사용할 수 있습니다.
|
|
72
|
+
medium:
|
|
73
|
+
description: Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
|
|
74
|
+
|
|
75
|
+
definitions:
|
|
76
|
+
base:
|
|
77
|
+
enabled:
|
|
78
|
+
root:
|
|
79
|
+
paddingX: $dimension.x4
|
|
80
|
+
cornerRadius: $radius.r3
|
|
81
|
+
colorDuration: $duration.color-transition
|
|
82
|
+
colorTimingFunction: $timing-function.easing
|
|
83
|
+
marginDuration: $duration.d3
|
|
84
|
+
marginTimingFunction: $timing-function.easing
|
|
85
|
+
prefixIcon:
|
|
86
|
+
color: $color.fg.neutral
|
|
87
|
+
body:
|
|
88
|
+
gap: $dimension.x0_5
|
|
89
|
+
label:
|
|
90
|
+
fontWeight: $font-weight.regular
|
|
91
|
+
color: $color.fg.neutral
|
|
92
|
+
description:
|
|
93
|
+
fontWeight: $font-weight.regular
|
|
94
|
+
color: $color.fg.neutral-subtle
|
|
95
|
+
indicator:
|
|
96
|
+
color: $color.fg.neutral
|
|
97
|
+
|
|
98
|
+
pressed:
|
|
99
|
+
root:
|
|
100
|
+
color: $color.bg.transparent-pressed
|
|
101
|
+
marginX: $dimension.x2
|
|
102
|
+
|
|
103
|
+
disabled:
|
|
104
|
+
prefixIcon:
|
|
105
|
+
color: $color.fg.disabled
|
|
106
|
+
label:
|
|
107
|
+
color: $color.fg.disabled
|
|
108
|
+
description:
|
|
109
|
+
color: $color.fg.disabled
|
|
110
|
+
indicator:
|
|
111
|
+
color: $color.fg.disabled
|
|
112
|
+
size=large:
|
|
113
|
+
enabled:
|
|
114
|
+
root:
|
|
115
|
+
paddingY: $dimension.x3
|
|
116
|
+
gap: $dimension.x3
|
|
117
|
+
prefixIcon:
|
|
118
|
+
size: 22px
|
|
119
|
+
label:
|
|
120
|
+
fontSize: $font-size.t5
|
|
121
|
+
lineHeight: $line-height.t5
|
|
122
|
+
description:
|
|
123
|
+
fontSize: $font-size.t3
|
|
124
|
+
lineHeight: $line-height.t3
|
|
125
|
+
indicator:
|
|
126
|
+
size: $dimension.x3_5
|
|
127
|
+
size=medium:
|
|
128
|
+
enabled:
|
|
129
|
+
root:
|
|
130
|
+
paddingY: $dimension.x2_5
|
|
131
|
+
gap: $dimension.x2
|
|
132
|
+
prefixIcon:
|
|
133
|
+
size: $dimension.x4_5
|
|
134
|
+
label:
|
|
135
|
+
fontSize: $font-size.t4
|
|
136
|
+
lineHeight: $line-height.t4
|
|
137
|
+
description:
|
|
138
|
+
fontSize: $font-size.t2
|
|
139
|
+
lineHeight: $line-height.t2
|
|
140
|
+
indicator:
|
|
141
|
+
size: $dimension.x3
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
# yaml-language-server: $schema=./schema.json
|
|
2
|
+
kind: ComponentSpec
|
|
3
|
+
metadata:
|
|
4
|
+
id: select-trigger
|
|
5
|
+
name: Select Trigger
|
|
6
|
+
data:
|
|
7
|
+
schema:
|
|
8
|
+
slots:
|
|
9
|
+
root:
|
|
10
|
+
properties:
|
|
11
|
+
height:
|
|
12
|
+
type: dimension
|
|
13
|
+
cornerRadius:
|
|
14
|
+
type: dimension
|
|
15
|
+
gap:
|
|
16
|
+
type: dimension
|
|
17
|
+
paddingX:
|
|
18
|
+
type: dimension
|
|
19
|
+
strokeWidth:
|
|
20
|
+
type: dimension
|
|
21
|
+
strokeColor:
|
|
22
|
+
type: color
|
|
23
|
+
color:
|
|
24
|
+
type: color
|
|
25
|
+
colorDuration:
|
|
26
|
+
type: duration
|
|
27
|
+
colorTimingFunction:
|
|
28
|
+
type: cubicBezier
|
|
29
|
+
strokeDuration:
|
|
30
|
+
type: duration
|
|
31
|
+
description: enabled 상태의 stroke 위에 invalid 상태의 stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다.
|
|
32
|
+
strokeTimingFunction:
|
|
33
|
+
type: cubicBezier
|
|
34
|
+
value:
|
|
35
|
+
properties:
|
|
36
|
+
fontSize:
|
|
37
|
+
type: dimension
|
|
38
|
+
lineHeight:
|
|
39
|
+
type: dimension
|
|
40
|
+
fontWeight:
|
|
41
|
+
type: number
|
|
42
|
+
color:
|
|
43
|
+
type: color
|
|
44
|
+
placeholder:
|
|
45
|
+
properties:
|
|
46
|
+
fontSize:
|
|
47
|
+
type: dimension
|
|
48
|
+
lineHeight:
|
|
49
|
+
type: dimension
|
|
50
|
+
fontWeight:
|
|
51
|
+
type: number
|
|
52
|
+
color:
|
|
53
|
+
type: color
|
|
54
|
+
prefixIcon:
|
|
55
|
+
properties:
|
|
56
|
+
size:
|
|
57
|
+
type: dimension
|
|
58
|
+
color:
|
|
59
|
+
type: color
|
|
60
|
+
suffixIcon:
|
|
61
|
+
properties:
|
|
62
|
+
size:
|
|
63
|
+
type: dimension
|
|
64
|
+
color:
|
|
65
|
+
type: color
|
|
66
|
+
openRotateDuration:
|
|
67
|
+
type: duration
|
|
68
|
+
openRotateTimingFunction:
|
|
69
|
+
type: cubicBezier
|
|
70
|
+
closeRotateDuration:
|
|
71
|
+
type: duration
|
|
72
|
+
closeRotateTimingFunction:
|
|
73
|
+
type: cubicBezier
|
|
74
|
+
variants:
|
|
75
|
+
size:
|
|
76
|
+
values:
|
|
77
|
+
large:
|
|
78
|
+
description: 뷰포트 너비와 관계없이 사용할 수 있습니다.
|
|
79
|
+
medium:
|
|
80
|
+
description: Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
|
|
81
|
+
|
|
82
|
+
definitions:
|
|
83
|
+
base:
|
|
84
|
+
enabled:
|
|
85
|
+
root:
|
|
86
|
+
strokeWidth: 1px
|
|
87
|
+
strokeColor: $color.stroke.neutral-weak
|
|
88
|
+
|
|
89
|
+
color: $color.bg.transparent
|
|
90
|
+
colorDuration: $duration.color-transition
|
|
91
|
+
colorTimingFunction: $timing-function.easing
|
|
92
|
+
strokeDuration: 0.1s
|
|
93
|
+
strokeTimingFunction: $timing-function.easing
|
|
94
|
+
|
|
95
|
+
value:
|
|
96
|
+
fontWeight: $font-weight.regular
|
|
97
|
+
|
|
98
|
+
color: $color.fg.neutral
|
|
99
|
+
|
|
100
|
+
placeholder:
|
|
101
|
+
fontWeight: $font-weight.regular
|
|
102
|
+
color: $color.fg.placeholder
|
|
103
|
+
|
|
104
|
+
prefixIcon:
|
|
105
|
+
color: $color.fg.neutral-muted
|
|
106
|
+
|
|
107
|
+
suffixIcon:
|
|
108
|
+
color: $color.fg.neutral-muted
|
|
109
|
+
openRotateDuration: $duration.d3
|
|
110
|
+
openRotateTimingFunction: $timing-function.easing
|
|
111
|
+
closeRotateDuration: $duration.d2
|
|
112
|
+
closeRotateTimingFunction: $timing-function.easing
|
|
113
|
+
|
|
114
|
+
pressed:
|
|
115
|
+
root:
|
|
116
|
+
color: $color.bg.transparent-pressed
|
|
117
|
+
|
|
118
|
+
invalid:
|
|
119
|
+
root:
|
|
120
|
+
strokeWidth: 2px
|
|
121
|
+
strokeColor: $color.stroke.critical-solid
|
|
122
|
+
|
|
123
|
+
disabled:
|
|
124
|
+
root:
|
|
125
|
+
color: $color.bg.disabled
|
|
126
|
+
value:
|
|
127
|
+
color: $color.fg.disabled
|
|
128
|
+
placeholder:
|
|
129
|
+
color: $color.fg.disabled
|
|
130
|
+
prefixIcon:
|
|
131
|
+
color: $color.fg.disabled
|
|
132
|
+
suffixIcon:
|
|
133
|
+
color: $color.fg.disabled
|
|
134
|
+
|
|
135
|
+
readonly:
|
|
136
|
+
root:
|
|
137
|
+
color: $color.bg.disabled
|
|
138
|
+
value:
|
|
139
|
+
color: $color.fg.neutral
|
|
140
|
+
placeholder:
|
|
141
|
+
color: $color.fg.placeholder
|
|
142
|
+
size=large:
|
|
143
|
+
enabled:
|
|
144
|
+
root:
|
|
145
|
+
height: $dimension.x13
|
|
146
|
+
gap: $dimension.x2_5
|
|
147
|
+
cornerRadius: $radius.r3
|
|
148
|
+
paddingX: $dimension.x4
|
|
149
|
+
value:
|
|
150
|
+
fontSize: $font-size.t5
|
|
151
|
+
lineHeight: $line-height.t5
|
|
152
|
+
placeholder:
|
|
153
|
+
fontSize: $font-size.t5
|
|
154
|
+
lineHeight: $line-height.t5
|
|
155
|
+
prefixIcon:
|
|
156
|
+
size: $dimension.x5
|
|
157
|
+
suffixIcon:
|
|
158
|
+
size: $dimension.x5
|
|
159
|
+
size=medium:
|
|
160
|
+
enabled:
|
|
161
|
+
root:
|
|
162
|
+
height: $dimension.x10
|
|
163
|
+
gap: $dimension.x2
|
|
164
|
+
cornerRadius: $radius.r2
|
|
165
|
+
paddingX: $dimension.x3_5
|
|
166
|
+
value:
|
|
167
|
+
fontSize: $font-size.t4
|
|
168
|
+
lineHeight: $line-height.t4
|
|
169
|
+
placeholder:
|
|
170
|
+
fontSize: $font-size.t4
|
|
171
|
+
lineHeight: $line-height.t4
|
|
172
|
+
prefixIcon:
|
|
173
|
+
size: $dimension.x4
|
|
174
|
+
suffixIcon:
|
|
175
|
+
size: $dimension.x4
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
# yaml-language-server: $schema=./schema.json
|
|
2
|
+
kind: ComponentSpec
|
|
3
|
+
metadata:
|
|
4
|
+
id: select
|
|
5
|
+
name: Select
|
|
6
|
+
data:
|
|
7
|
+
schema:
|
|
8
|
+
slots:
|
|
9
|
+
root:
|
|
10
|
+
properties:
|
|
11
|
+
cornerRadius:
|
|
12
|
+
type: dimension
|
|
13
|
+
color:
|
|
14
|
+
type: color
|
|
15
|
+
shadow:
|
|
16
|
+
type: shadow
|
|
17
|
+
paddingY:
|
|
18
|
+
type: dimension
|
|
19
|
+
gap:
|
|
20
|
+
type: dimension
|
|
21
|
+
enterDuration:
|
|
22
|
+
type: duration
|
|
23
|
+
enterTimingFunction:
|
|
24
|
+
type: cubicBezier
|
|
25
|
+
enterScale:
|
|
26
|
+
type: number
|
|
27
|
+
enterOpacity:
|
|
28
|
+
type: number
|
|
29
|
+
exitDuration:
|
|
30
|
+
type: duration
|
|
31
|
+
exitTimingFunction:
|
|
32
|
+
type: cubicBezier
|
|
33
|
+
exitScale:
|
|
34
|
+
type: number
|
|
35
|
+
exitOpacity:
|
|
36
|
+
type: number
|
|
37
|
+
gutter:
|
|
38
|
+
type: dimension
|
|
39
|
+
description: 트리거와 목록 사이의 간격을 정의합니다.
|
|
40
|
+
overflowPadding:
|
|
41
|
+
type: dimension
|
|
42
|
+
description: 목록과 뷰포트 경계 사이의 최소 간격을 정의합니다.
|
|
43
|
+
maxHeight:
|
|
44
|
+
type: dimension
|
|
45
|
+
group:
|
|
46
|
+
properties: {}
|
|
47
|
+
groupLabel:
|
|
48
|
+
properties:
|
|
49
|
+
color:
|
|
50
|
+
type: color
|
|
51
|
+
paddingX:
|
|
52
|
+
type: dimension
|
|
53
|
+
paddingY:
|
|
54
|
+
type: dimension
|
|
55
|
+
fontSize:
|
|
56
|
+
type: dimension
|
|
57
|
+
lineHeight:
|
|
58
|
+
type: dimension
|
|
59
|
+
fontWeight:
|
|
60
|
+
type: number
|
|
61
|
+
divider:
|
|
62
|
+
properties:
|
|
63
|
+
marginX:
|
|
64
|
+
type: dimension
|
|
65
|
+
height:
|
|
66
|
+
type: dimension
|
|
67
|
+
color:
|
|
68
|
+
type: color
|
|
69
|
+
variants:
|
|
70
|
+
size:
|
|
71
|
+
values:
|
|
72
|
+
large:
|
|
73
|
+
description: 뷰포트 너비와 관계없이 사용할 수 있습니다.
|
|
74
|
+
medium:
|
|
75
|
+
description: Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
|
|
76
|
+
|
|
77
|
+
definitions:
|
|
78
|
+
base:
|
|
79
|
+
enabled:
|
|
80
|
+
root:
|
|
81
|
+
cornerRadius: $radius.r5
|
|
82
|
+
color: $color.bg.layer-floating
|
|
83
|
+
shadow: $shadow.s3
|
|
84
|
+
enterDuration: $duration.d3
|
|
85
|
+
enterTimingFunction: $timing-function.enter
|
|
86
|
+
enterScale: 0.95
|
|
87
|
+
enterOpacity: 0
|
|
88
|
+
exitDuration: $duration.d2
|
|
89
|
+
exitTimingFunction: $timing-function.exit
|
|
90
|
+
exitScale: 0.95
|
|
91
|
+
exitOpacity: 0
|
|
92
|
+
paddingY: $dimension.x2
|
|
93
|
+
gap: $dimension.x2
|
|
94
|
+
gutter: $dimension.x2
|
|
95
|
+
overflowPadding: $dimension.x2
|
|
96
|
+
maxHeight: 480px
|
|
97
|
+
groupLabel:
|
|
98
|
+
color: $color.fg.neutral-subtle
|
|
99
|
+
divider:
|
|
100
|
+
marginX: $dimension.x4
|
|
101
|
+
height: 1px
|
|
102
|
+
color: $color.stroke.neutral-muted
|
|
103
|
+
size=large:
|
|
104
|
+
enabled:
|
|
105
|
+
groupLabel:
|
|
106
|
+
paddingY: $dimension.x2_5
|
|
107
|
+
paddingX: $dimension.x4
|
|
108
|
+
fontSize: $font-size.t4
|
|
109
|
+
lineHeight: $line-height.t4
|
|
110
|
+
fontWeight: $font-weight.medium
|
|
111
|
+
size=medium:
|
|
112
|
+
enabled:
|
|
113
|
+
groupLabel:
|
|
114
|
+
paddingY: $dimension.x2
|
|
115
|
+
paddingX: $dimension.x4
|
|
116
|
+
fontSize: $font-size.t3
|
|
117
|
+
lineHeight: $line-height.t3
|
|
118
|
+
fontWeight: $font-weight.regular
|