@seed-design/rootage-artifacts 1.0.5 → 1.1.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 (13) hide show
  1. package/components/bottom-sheet-handle.yaml +48 -0
  2. package/components/bottom-sheet.yaml +2 -2
  3. package/components/field-label.yaml +33 -0
  4. package/components/field.yaml +157 -0
  5. package/components/input-button.yaml +169 -0
  6. package/components/list-item.yaml +1 -1
  7. package/components/page-banner.yaml +2 -2
  8. package/components/slider-thumb.yaml +32 -0
  9. package/components/slider-tick.yaml +25 -0
  10. package/components/slider.yaml +72 -0
  11. package/components/text-input.yaml +197 -0
  12. package/package.json +1 -1
  13. package/components/text-field.yaml +0 -360
package/components/bottom-sheet-handle.yaml ADDED
@@ -0,0 +1,48 @@
1
+ # yaml-language-server: $schema=./schema.json
2
+ kind: ComponentSpec
3
+ metadata:
4
+ id: bottom-sheet-handle
5
+ name: Bottom Sheet Handle
6
+ data:
7
+ schema:
8
+ slots:
9
+ root:
10
+ properties:
11
+ fromTop:
12
+ type: dimension
13
+ width:
14
+ type: dimension
15
+ height:
16
+ type: dimension
17
+ color:
18
+ type: color
19
+ borderRadius:
20
+ type: dimension
21
+ colorDuration:
22
+ type: duration
23
+ colorTimingFunction:
24
+ type: timing-function
25
+ touchArea:
26
+ properties:
27
+ width:
28
+ type: dimension
29
+ height:
30
+ type: dimension
31
+
32
+ definitions:
33
+ base:
34
+ enabled:
35
+ root:
36
+ fromTop: 6px
37
+ width: 36px
38
+ height: 4px
39
+ color: $color.palette.gray-400
40
+ borderRadius: 9999px
41
+ colorDuration: $duration.d4
42
+ colorTimingFunction: $timing-function.easing
43
+ touchArea:
44
+ width: 44px
45
+ height: 44px
46
+ pressed:
47
+ root:
48
+ color: $color.palette.gray-500
package/components/bottom-sheet.yaml CHANGED
@@ -93,10 +93,10 @@ data:
93
93
  enabled:
94
94
  backdrop:
95
95
  color: $color.bg.overlay
96
- enterDuration: $duration.d2
96
+ enterDuration: $duration.d6
97
97
  enterTimingFunction: $timing-function.enter
98
98
  enterOpacity: 0
99
- exitDuration: $duration.d2
99
+ exitDuration: $duration.d4
100
100
  exitTimingFunction: $timing-function.exit
101
101
  exitOpacity: 0
102
102
  content:
package/components/field-label.yaml ADDED
@@ -0,0 +1,33 @@
1
+ # yaml-language-server: $schema=./schema.json
2
+ kind: ComponentSpec
3
+ metadata:
4
+ id: field-label
5
+ name: Field Label
6
+ data:
7
+ schema:
8
+ slots:
9
+ root:
10
+ properties:
11
+ color:
12
+ type: color
13
+ fontSize:
14
+ type: dimension
15
+ lineHeight:
16
+ type: dimension
17
+ fontWeight:
18
+ type: number
19
+ definitions:
20
+ base:
21
+ enabled:
22
+ root:
23
+ color: $color.fg.neutral
24
+ fontSize: $font-size.t5
25
+ lineHeight: $line-height.t5
26
+ weight=medium:
27
+ enabled:
28
+ root:
29
+ fontWeight: $font-weight.medium
30
+ weight=bold:
31
+ enabled:
32
+ root:
33
+ fontWeight: $font-weight.bold
package/components/field.yaml ADDED
@@ -0,0 +1,157 @@
1
+ # yaml-language-server: $schema=./schema.json
2
+ kind: ComponentSpec
3
+ metadata:
4
+ id: field
5
+ name: Field
6
+ data:
7
+ schema:
8
+ slots:
9
+ root:
10
+ properties:
11
+ gap:
12
+ type: dimension
13
+ header:
14
+ properties:
15
+ paddingX:
16
+ type: dimension
17
+ gap:
18
+ type: dimension
19
+ indicatorIcon:
20
+ properties:
21
+ color:
22
+ type: color
23
+ size:
24
+ type: dimension
25
+ paddingTop:
26
+ type: dimension
27
+ paddingLeft:
28
+ type: dimension
29
+ indicatorText:
30
+ properties:
31
+ color:
32
+ type: color
33
+ fontSize:
34
+ type: dimension
35
+ lineHeight:
36
+ type: dimension
37
+ fontWeight:
38
+ type: number
39
+ paddingLeft:
40
+ type: dimension
41
+ footer:
42
+ properties:
43
+ paddingX:
44
+ type: dimension
45
+ gap:
46
+ type: dimension
47
+ description:
48
+ properties:
49
+ color:
50
+ type: color
51
+ fontWeight:
52
+ type: number
53
+ fontSize:
54
+ type: dimension
55
+ lineHeight:
56
+ type: dimension
57
+ descriptionIcon:
58
+ properties:
59
+ paddingRight:
60
+ type: dimension
61
+ color:
62
+ type: color
63
+ size:
64
+ type: dimension
65
+ errorMessage:
66
+ properties:
67
+ color:
68
+ type: color
69
+ fontWeight:
70
+ type: number
71
+ fontSize:
72
+ type: dimension
73
+ lineHeight:
74
+ type: dimension
75
+ errorIcon:
76
+ properties:
77
+ paddingRight:
78
+ type: dimension
79
+ color:
80
+ type: color
81
+ size:
82
+ type: dimension
83
+ characterCount:
84
+ properties:
85
+ color:
86
+ type: color
87
+ fontWeight:
88
+ type: number
89
+ fontSize:
90
+ type: dimension
91
+ lineHeight:
92
+ type: dimension
93
+ maxCharacterCount:
94
+ properties:
95
+ color:
96
+ type: color
97
+ fontWeight:
98
+ type: number
99
+ fontSize:
100
+ type: dimension
101
+ lineHeight:
102
+ type: dimension
103
+ definitions:
104
+ base:
105
+ enabled:
106
+ root:
107
+ gap: $dimension.x2
108
+ header:
109
+ paddingX: $dimension.x0_5
110
+ gap: $dimension.x2_5
111
+ indicatorIcon:
112
+ color: $color.fg.critical
113
+ size: 0.375rem # should be font scaled (6px)
114
+ paddingTop: 0.25rem # should be font scaled (4px)
115
+ paddingLeft: 0.125rem # should be font scaled (2px)
116
+ indicatorText:
117
+ color: $color.fg.neutral-subtle
118
+ fontSize: $font-size.t4
119
+ lineHeight: $line-height.t5 # intentional; not a typo
120
+ fontWeight: $font-weight.regular
121
+ paddingLeft: 0.25rem # should be font scaled (4px)
122
+ footer:
123
+ paddingX: $dimension.x0_5
124
+ gap: $dimension.x2
125
+ description:
126
+ color: $color.fg.neutral-subtle
127
+ fontWeight: $font-weight.regular
128
+ fontSize: $font-size.t4
129
+ lineHeight: $line-height.t4
130
+ descriptionIcon:
131
+ paddingRight: $dimension.x1_5
132
+ color: $color.fg.neutral-subtle
133
+ size: $dimension.x4
134
+ errorMessage:
135
+ color: $color.fg.critical
136
+ fontWeight: $font-weight.regular
137
+ fontSize: $font-size.t4
138
+ lineHeight: $line-height.t4
139
+ errorIcon:
140
+ paddingRight: $dimension.x1_5
141
+ color: $color.fg.critical
142
+ size: $dimension.x4
143
+ characterCount:
144
+ color: $color.fg.neutral
145
+ fontWeight: $font-weight.regular
146
+ fontSize: $font-size.t4
147
+ lineHeight: $line-height.t4
148
+ maxCharacterCount:
149
+ color: $color.fg.neutral-subtle
150
+ fontWeight: $font-weight.regular
151
+ fontSize: $font-size.t4
152
+ lineHeight: $line-height.t4
153
+ invalid:
154
+ characterCount:
155
+ color: $color.fg.critical
156
+ maxCharacterCount:
157
+ color: $color.fg.critical
package/components/input-button.yaml ADDED
@@ -0,0 +1,169 @@
1
+ # yaml-language-server: $schema=./schema.json
2
+ kind: ComponentSpec
3
+ metadata:
4
+ id: input-button
5
+ name: Input Button
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
+ strokeColorDuration:
30
+ type: duration
31
+ strokeColorTimingFunction:
32
+ type: cubicBezier
33
+ strokeWidthDuration:
34
+ type: duration
35
+ strokeWidthTimingFunction:
36
+ type: cubicBezier
37
+ value:
38
+ properties:
39
+ fontSize:
40
+ type: dimension
41
+ lineHeight:
42
+ type: dimension
43
+ fontWeight:
44
+ type: number
45
+ color:
46
+ type: color
47
+ placeholder:
48
+ properties:
49
+ fontSize:
50
+ type: dimension
51
+ lineHeight:
52
+ type: dimension
53
+ fontWeight:
54
+ type: number
55
+ color:
56
+ type: color
57
+ prefixText:
58
+ properties:
59
+ fontSize:
60
+ type: dimension
61
+ lineHeight:
62
+ type: dimension
63
+ fontWeight:
64
+ type: number
65
+ color:
66
+ type: color
67
+ prefixIcon:
68
+ properties:
69
+ size:
70
+ type: dimension
71
+ color:
72
+ type: color
73
+ suffixText:
74
+ properties:
75
+ fontSize:
76
+ type: dimension
77
+ lineHeight:
78
+ type: dimension
79
+ fontWeight:
80
+ type: number
81
+ color:
82
+ type: color
83
+ suffixIcon:
84
+ properties:
85
+ size:
86
+ type: dimension
87
+ color:
88
+ type: color
89
+ clearButton:
90
+ properties:
91
+ size:
92
+ type: dimension
93
+ color:
94
+ type: color
95
+ definitions:
96
+ base:
97
+ enabled:
98
+ root:
99
+ height: $dimension.x13
100
+ cornerRadius: $radius.r3
101
+ gap: $dimension.x2_5
102
+ paddingX: $dimension.x4
103
+
104
+ strokeWidth: 1px
105
+ strokeColor: $color.stroke.neutral-weak
106
+
107
+ colorDuration: $duration.d3
108
+ colorTimingFunction: $timing-function.easing
109
+ strokeColorDuration: $duration.d3
110
+ strokeColorTimingFunction: $timing-function.easing
111
+ strokeWidthDuration: $duration.d3
112
+ strokeWidthTimingFunction: $timing-function.easing
113
+
114
+ value:
115
+ fontSize: $font-size.t5
116
+ lineHeight: $line-height.t5
117
+ fontWeight: $font-weight.regular
118
+
119
+ color: $color.fg.neutral
120
+
121
+ placeholder:
122
+ fontSize: $font-size.t5
123
+ lineHeight: $line-height.t5
124
+ fontWeight: $font-weight.regular
125
+
126
+ color: $color.fg.placeholder
127
+
128
+ prefixText:
129
+ fontSize: $font-size.t5
130
+ lineHeight: $line-height.t5
131
+ fontWeight: $font-weight.regular
132
+
133
+ color: $color.fg.neutral-muted
134
+ prefixIcon:
135
+ size: $dimension.x5
136
+
137
+ color: $color.fg.neutral-muted
138
+ suffixText:
139
+ fontSize: $font-size.t5
140
+ lineHeight: $line-height.t5
141
+ fontWeight: $font-weight.regular
142
+
143
+ color: $color.fg.neutral-muted
144
+
145
+ suffixIcon:
146
+ size: $dimension.x5
147
+
148
+ color: $color.fg.neutral-muted
149
+
150
+ clearButton:
151
+ size: 22px
152
+ color: $color.fg.neutral-subtle
153
+
154
+ pressed:
155
+ root:
156
+ color: $color.bg.layer-default-pressed
157
+
158
+ invalid:
159
+ root:
160
+ strokeWidth: 2px
161
+ strokeColor: $color.stroke.critical-solid
162
+
163
+ disabled:
164
+ root:
165
+ color: $color.bg.disabled
166
+ value:
167
+ color: $color.fg.disabled
168
+ placeholder:
169
+ color: $color.fg.disabled
package/components/list-item.yaml CHANGED
@@ -78,7 +78,7 @@ data:
78
78
  base:
79
79
  enabled:
80
80
  root:
81
- paddingY: $dimension.x2_5
81
+ paddingY: $dimension.x3
82
82
  paddingX: $dimension.spacing-x.global-gutter
83
83
  colorDuration: $duration.d3
84
84
  colorTimingFunction: $timing-function.easing
package/components/page-banner.yaml CHANGED
@@ -24,7 +24,7 @@ data:
24
24
  type: dimension
25
25
  color:
26
26
  type: color
27
- textContent:
27
+ content:
28
28
  properties:
29
29
  gap:
30
30
  type: dimension
@@ -82,7 +82,7 @@ data:
82
82
  prefixIcon:
83
83
  size: $dimension.x4
84
84
  marginRight: $dimension.x2
85
- textContent:
85
+ content:
86
86
  gap: $dimension.x1_5
87
87
  title:
88
88
  fontSize: $font-size.t4
package/components/slider-thumb.yaml ADDED
@@ -0,0 +1,32 @@
1
+ # yaml-language-server: $schema=./schema.json
2
+ kind: ComponentSpec
3
+ metadata:
4
+ id: slider-thumb
5
+ name: Slider Thumb
6
+ data:
7
+ schema:
8
+ slots:
9
+ root:
10
+ properties:
11
+ size:
12
+ type: dimension
13
+ # TODO: fill in
14
+ definitions:
15
+ base:
16
+ enabled:
17
+ root:
18
+ size: $dimension.x5
19
+ cornerRadius: $radius.full
20
+ color: $color.bg.neutral-inverted
21
+
22
+ scaleDuration: $duration.d3
23
+ scaleTimingFunction: $timing-function.easing
24
+
25
+ translateDuration: $duration.d3
26
+ translateTimingFunction: $timing-function.easing
27
+ disabled:
28
+ root:
29
+ color: $color.fg.disabled # fg 토큰인데 적절할까?
30
+ pressed:
31
+ root:
32
+ scale: 1.2
package/components/slider-tick.yaml ADDED
@@ -0,0 +1,25 @@
1
+ # yaml-language-server: $schema=./schema.json
2
+ kind: ComponentSpec
3
+ metadata:
4
+ id: slider-tick
5
+ name: Slider Tick
6
+ data:
7
+ schema:
8
+ slots:
9
+ root:
10
+ properties:
11
+ width:
12
+ type: dimension
13
+ definitions:
14
+ base:
15
+ enabled:
16
+ root:
17
+ color: $color.fg.neutral-inverted # fg 토큰인데 적절할까?
18
+ weight=thin:
19
+ enabled:
20
+ root:
21
+ width: 1px
22
+ weight=thick:
23
+ enabled:
24
+ root:
25
+ width: $dimension.x1
package/components/slider.yaml ADDED
@@ -0,0 +1,72 @@
1
+ # yaml-language-server: $schema=./schema.json
2
+ kind: ComponentSpec
3
+ metadata:
4
+ id: slider
5
+ name: Slider
6
+ data:
7
+ schema:
8
+ slots:
9
+ root:
10
+ properties:
11
+ gap:
12
+ type: dimension
13
+ # TODO: fill in
14
+ definitions:
15
+ base:
16
+ enabled:
17
+ root:
18
+ gap: $dimension.x0_5
19
+ control:
20
+ height: 26px
21
+ track:
22
+ height: $dimension.x1
23
+ cornerRadius: $radius.full
24
+ color: $color.palette.gray-400
25
+ range:
26
+ cornerRadius: $radius.full
27
+ color: $color.fg.neutral # fg 토큰인데 적절할까?
28
+
29
+ widthDuration: $duration.d3
30
+ widthTimingFunction: $timing-function.easing
31
+ thumb:
32
+ size: $dimension.x5
33
+ cornerRadius: $radius.full
34
+ color: $color.bg.neutral-inverted
35
+ valueIndicatorRoot:
36
+ color: $color.bg.neutral-inverted
37
+ cornerRadius: $radius.r1
38
+ paddingX: $dimension.x1_5
39
+ paddingY: $dimension.x0_5
40
+ offsetY: $dimension.x3
41
+ enterScale: 0.9
42
+ enterOpacity: 0
43
+ enterDuration: $duration.d4
44
+ enterTimingFunction: $timing-function.enter
45
+ exitScale: 1
46
+ exitOpacity: 0
47
+ exitDuration: $duration.d4
48
+ exitTimingFunction: $timing-function.easing
49
+ valueIndicatorArrow:
50
+ color: $color.bg.neutral-inverted
51
+ width: $dimension.x2_5
52
+ height: 7px
53
+ cornerRadius: $radius.r0_5
54
+ gutter: $dimension.x0_5
55
+ padding: $dimension.x0_5
56
+ valueIndicatorLabel:
57
+ color: $color.fg.neutral-inverted
58
+ fontSize: $font-size.t1
59
+ lineHeight: $line-height.t1
60
+ fontWeight: $font-weight.medium
61
+ marker:
62
+ color: $color.fg.neutral-muted
63
+ fontWeight: $font-weight.regular
64
+ fontSize: $font-size.t3
65
+ lineHeight: $line-height.t3
66
+ disabled:
67
+ range:
68
+ color: $color.fg.disabled
69
+ thumb:
70
+ color: $color.fg.disabled
71
+ marker:
72
+ color: $color.fg.disabled
package/components/text-input.yaml ADDED
@@ -0,0 +1,197 @@
1
+ # yaml-language-server: $schema=./schema.json
2
+ kind: ComponentSpec
3
+ metadata:
4
+ id: text-input
5
+ name: Text Input
6
+ data:
7
+ schema:
8
+ slots:
9
+ root:
10
+ properties:
11
+ gap:
12
+ type: dimension
13
+ minHeight:
14
+ type: dimension
15
+ cornerRadius:
16
+ type: dimension
17
+ paddingX:
18
+ type: dimension
19
+ paddingY:
20
+ type: dimension
21
+ strokeWidth:
22
+ type: dimension
23
+ strokeBottomWidth:
24
+ type: dimension
25
+ strokeColor:
26
+ type: color
27
+ color:
28
+ type: color
29
+ strokeColorDuration:
30
+ type: duration
31
+ strokeColorTimingFunction:
32
+ type: cubicBezier
33
+ strokeWidthDuration:
34
+ type: duration
35
+ strokeWidthTimingFunction:
36
+ type: cubicBezier
37
+ value:
38
+ properties:
39
+ color:
40
+ type: color
41
+ fontWeight:
42
+ type: number
43
+ fontSize:
44
+ type: dimension
45
+ lineHeight:
46
+ type: dimension
47
+ placeholder:
48
+ properties:
49
+ color:
50
+ type: color
51
+ fontWeight:
52
+ type: number
53
+ fontSize:
54
+ type: dimension
55
+ lineHeight:
56
+ type: dimension
57
+ prefixText:
58
+ properties:
59
+ color:
60
+ type: color
61
+ fontWeight:
62
+ type: number
63
+ fontSize:
64
+ type: dimension
65
+ lineHeight:
66
+ type: dimension
67
+ prefixIcon:
68
+ properties:
69
+ color:
70
+ type: color
71
+ size:
72
+ type: dimension
73
+ suffixText:
74
+ properties:
75
+ color:
76
+ type: color
77
+ fontWeight:
78
+ type: number
79
+ fontSize:
80
+ type: dimension
81
+ lineHeight:
82
+ type: dimension
83
+ suffixIcon:
84
+ properties:
85
+ color:
86
+ type: color
87
+ size:
88
+ type: dimension
89
+ definitions:
90
+ base:
91
+ enabled:
92
+ root:
93
+ gap: $dimension.x2_5
94
+ strokeColor: $color.stroke.neutral-weak
95
+ strokeColorDuration: $duration.d3
96
+ strokeColorTimingFunction: $timing-function.easing
97
+ strokeWidthDuration: $duration.d3
98
+ strokeWidthTimingFunction: $timing-function.easing
99
+ value:
100
+ color: $color.fg.neutral
101
+ fontWeight: $font-weight.regular
102
+ placeholder:
103
+ color: $color.fg.placeholder
104
+ fontWeight: $font-weight.regular
105
+ prefixText:
106
+ color: $color.fg.neutral-muted
107
+ fontWeight: $font-weight.regular
108
+ prefixIcon:
109
+ color: $color.fg.neutral-muted
110
+ suffixText:
111
+ color: $color.fg.neutral-muted
112
+ fontWeight: $font-weight.regular
113
+ suffixIcon:
114
+ color: $color.fg.neutral-muted
115
+ focused:
116
+ root:
117
+ strokeColor: $color.stroke.neutral-contrast
118
+ invalid:
119
+ root:
120
+ strokeColor: $color.stroke.critical-solid
121
+ invalid,focused:
122
+ root:
123
+ strokeColor: $color.stroke.critical-solid # being obvious
124
+ readonly:
125
+ value:
126
+ color: $color.fg.neutral-muted
127
+ placeholder:
128
+ color: $color.fg.neutral-muted
129
+ disabled:
130
+ value:
131
+ color: $color.fg.disabled
132
+ placeholder:
133
+ color: $color.fg.disabled
134
+ variant=outline:
135
+ enabled:
136
+ root:
137
+ minHeight: $dimension.x13
138
+ cornerRadius: $radius.r3
139
+ paddingX: $dimension.x4
140
+ strokeWidth: 1px
141
+ value:
142
+ fontSize: $font-size.t5
143
+ lineHeight: $line-height.t5
144
+ placeholder:
145
+ fontSize: $font-size.t5
146
+ lineHeight: $line-height.t5
147
+ prefixText:
148
+ fontSize: $font-size.t5
149
+ lineHeight: $line-height.t5
150
+ prefixIcon:
151
+ size: $dimension.x5
152
+ suffixText:
153
+ fontSize: $font-size.t5
154
+ lineHeight: $line-height.t5
155
+ suffixIcon:
156
+ size: $dimension.x5
157
+ focused:
158
+ root:
159
+ strokeWidth: 2px
160
+ invalid:
161
+ root:
162
+ strokeWidth: 2px
163
+ disabled:
164
+ root:
165
+ color: $color.bg.disabled
166
+ variant=underline:
167
+ enabled:
168
+ root:
169
+ minHeight: $dimension.x10
170
+ strokeBottomWidth: 1px
171
+ value:
172
+ fontSize: $font-size.t6
173
+ lineHeight: $line-height.t6
174
+ placeholder:
175
+ fontSize: $font-size.t6
176
+ lineHeight: $line-height.t6
177
+ prefixText:
178
+ fontSize: $font-size.t6
179
+ lineHeight: $line-height.t6
180
+ prefixIcon:
181
+ size: $dimension.x6
182
+ suffixText:
183
+ fontSize: $font-size.t6
184
+ lineHeight: $line-height.t6
185
+ suffixIcon:
186
+ size: $dimension.x6
187
+ focused:
188
+ root:
189
+ strokeBottomWidth: 2px
190
+ invalid:
191
+ root:
192
+ strokeBottomWidth: 2px
193
+ type=multiline:
194
+ enabled:
195
+ root:
196
+ minHeight: 95px
197
+ paddingY: $dimension.x3_5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/rootage-artifacts",
3
- "version": "1.0.5",
3
+ "version": "1.1.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
package/components/text-field.yaml DELETED
@@ -1,360 +0,0 @@
1
- # yaml-language-server: $schema=./schema.json
2
- kind: ComponentSpec
3
- metadata:
4
- id: text-field
5
- name: Text Field
6
- data:
7
- schema:
8
- slots:
9
- header:
10
- properties:
11
- paddingBottom:
12
- type: dimension
13
- gap:
14
- type: dimension
15
- label:
16
- properties:
17
- color:
18
- type: color
19
- fontWeight:
20
- type: number
21
- fontSize:
22
- type: dimension
23
- lineHeight:
24
- type: dimension
25
- indicator:
26
- properties:
27
- color:
28
- type: color
29
- fontWeight:
30
- type: number
31
- fontSize:
32
- type: dimension
33
- lineHeight:
34
- type: dimension
35
- field:
36
- properties:
37
- color:
38
- type: color
39
- strokeWidth:
40
- type: dimension
41
- strokeColor:
42
- type: color
43
- minHeight:
44
- type: dimension
45
- cornerRadius:
46
- type: dimension
47
- gap:
48
- type: dimension
49
- paddingX:
50
- type: dimension
51
- paddingY:
52
- type: dimension
53
- value:
54
- properties:
55
- color:
56
- type: color
57
- fontSize:
58
- type: dimension
59
- lineHeight:
60
- type: dimension
61
- placeholder:
62
- properties:
63
- color:
64
- type: color
65
- prefixText:
66
- properties:
67
- color:
68
- type: color
69
- fontSize:
70
- type: dimension
71
- lineHeight:
72
- type: dimension
73
- prefixIcon:
74
- properties:
75
- color:
76
- type: color
77
- size:
78
- type: dimension
79
- suffixText:
80
- properties:
81
- color:
82
- type: color
83
- fontSize:
84
- type: dimension
85
- lineHeight:
86
- type: dimension
87
- suffixIcon:
88
- properties:
89
- color:
90
- type: color
91
- size:
92
- type: dimension
93
- footer:
94
- properties:
95
- gap:
96
- type: dimension
97
- paddingTop:
98
- type: dimension
99
- minHeight:
100
- type: dimension
101
- description:
102
- properties:
103
- color:
104
- type: color
105
- fontWeight:
106
- type: number
107
- fontSize:
108
- type: dimension
109
- lineHeight:
110
- type: dimension
111
- errorMessage:
112
- properties:
113
- color:
114
- type: color
115
- fontWeight:
116
- type: number
117
- fontSize:
118
- type: dimension
119
- lineHeight:
120
- type: dimension
121
- errorIcon:
122
- properties:
123
- size:
124
- type: dimension
125
- marginRight:
126
- type: dimension
127
- characterCount:
128
- properties:
129
- color:
130
- type: color
131
- fontWeight:
132
- type: number
133
- fontSize:
134
- type: dimension
135
- lineHeight:
136
- type: dimension
137
- maxCharacterCount:
138
- properties:
139
- color:
140
- type: color
141
- fontWeight:
142
- type: number
143
- fontSize:
144
- type: dimension
145
- lineHeight:
146
- type: dimension
147
- definitions:
148
- base:
149
- enabled:
150
- label:
151
- color: $color.fg.neutral
152
- fontWeight: $font-weight.bold
153
- indicator:
154
- color: $color.fg.neutral
155
- fontWeight: $font-weight.regular
156
- field:
157
- strokeWidth: 1px
158
- strokeColor: $color.stroke.neutral-weak
159
- value:
160
- color: $color.fg.neutral
161
- placeholder:
162
- color: $color.fg.placeholder
163
- prefixText:
164
- color: $color.fg.neutral
165
- prefixIcon:
166
- color: $color.fg.neutral
167
- suffixText:
168
- color: $color.fg.neutral
169
- suffixIcon:
170
- color: $color.fg.neutral
171
- description:
172
- color: $color.fg.neutral-subtle
173
- fontWeight: $font-weight.regular
174
- errorMessage:
175
- color: $color.fg.critical
176
- fontWeight: $font-weight.regular
177
- characterCount:
178
- color: $color.fg.neutral
179
- fontWeight: $font-weight.regular
180
- maxCharacterCount:
181
- color: $color.fg.neutral-subtle
182
- fontWeight: $font-weight.regular
183
- focused:
184
- field:
185
- strokeColor: $color.stroke.neutral-contrast
186
- invalid:
187
- field:
188
- color: $color.bg.critical-weak
189
- strokeColor: $color.stroke.critical-weak
190
- invalid,focused:
191
- field:
192
- color: "#00000000"
193
- strokeColor: $color.stroke.neutral-weak
194
- readonly:
195
- field:
196
- color: $color.bg.disabled
197
- disabled:
198
- field:
199
- color: $color.bg.disabled
200
- value:
201
- color: $color.fg.disabled
202
- placeholder:
203
- color: $color.fg.disabled
204
- prefixText:
205
- color: $color.fg.disabled
206
- prefixIcon:
207
- color: $color.fg.disabled
208
- suffixText:
209
- color: $color.fg.disabled
210
- suffixIcon:
211
- color: $color.fg.disabled
212
-
213
- size=xlarge:
214
- enabled:
215
- header:
216
- paddingBottom: $dimension.x3
217
- gap: $dimension.x1_5
218
- label:
219
- fontSize: $font-size.t5
220
- lineHeight: $line-height.t5
221
- indicator:
222
- fontSize: $font-size.t5
223
- lineHeight: $line-height.t5
224
- field:
225
- minHeight: 56px
226
- cornerRadius: $radius.r2_5
227
- gap: $dimension.x2
228
- paddingX: $dimension.x4
229
- paddingY: $dimension.x3
230
- value:
231
- fontSize: $font-size.t6
232
- lineHeight: $line-height.t6
233
- prefixText:
234
- fontSize: $font-size.t6
235
- lineHeight: $line-height.t6
236
- prefixIcon:
237
- size: $dimension.x5
238
- suffixText:
239
- fontSize: $font-size.t6
240
- lineHeight: $line-height.t6
241
- suffixIcon:
242
- size: $dimension.x5
243
- footer:
244
- gap: $dimension.x3_5
245
- paddingTop: $dimension.x2
246
- minHeight: 20px
247
- description:
248
- fontSize: $font-size.t4
249
- lineHeight: $line-height.t4
250
- errorMessage:
251
- fontSize: $font-size.t4
252
- lineHeight: $line-height.t4
253
- errorIcon:
254
- size: $dimension.x4
255
- marginRight: $dimension.x1
256
- characterCount:
257
- fontSize: $font-size.t2
258
- lineHeight: $line-height.t2
259
- maxCharacterCount:
260
- fontSize: $font-size.t2
261
- lineHeight: $line-height.t2
262
-
263
- size=large:
264
- enabled:
265
- header:
266
- paddingBottom: $dimension.x3
267
- gap: $dimension.x1_5
268
- label:
269
- fontSize: $font-size.t5
270
- lineHeight: $line-height.t5
271
- indicator:
272
- fontSize: $font-size.t5
273
- lineHeight: $line-height.t5
274
- field:
275
- minHeight: 52px
276
- cornerRadius: $radius.r2_5
277
- gap: $dimension.x2
278
- paddingX: $dimension.x4
279
- paddingY: $dimension.x3
280
- value:
281
- fontSize: $font-size.t5
282
- lineHeight: $line-height.t5
283
- prefixText:
284
- fontSize: $font-size.t5
285
- lineHeight: $line-height.t5
286
- prefixIcon:
287
- size: $dimension.x5
288
- suffixText:
289
- fontSize: $font-size.t5
290
- lineHeight: $line-height.t5
291
- suffixIcon:
292
- size: $dimension.x5
293
- footer:
294
- gap: $dimension.x3_5
295
- paddingTop: $dimension.x2
296
- minHeight: 20px
297
- description:
298
- fontSize: $font-size.t4
299
- lineHeight: $line-height.t4
300
- errorMessage:
301
- fontSize: $font-size.t4
302
- lineHeight: $line-height.t4
303
- errorIcon:
304
- size: $dimension.x4
305
- marginRight: $dimension.x1
306
- characterCount:
307
- fontSize: $font-size.t2
308
- lineHeight: $line-height.t2
309
- maxCharacterCount:
310
- fontSize: $font-size.t2
311
- lineHeight: $line-height.t2
312
-
313
- size=medium:
314
- enabled:
315
- header:
316
- paddingBottom: $dimension.x3
317
- label:
318
- fontSize: $font-size.t4
319
- lineHeight: $line-height.t4
320
- indicator:
321
- fontSize: $font-size.t4
322
- lineHeight: $line-height.t4
323
- field:
324
- minHeight: 40px
325
- cornerRadius: $radius.r2
326
- gap: $dimension.x1_5
327
- paddingX: $dimension.x3_5
328
- paddingY: $dimension.x2_5
329
- value:
330
- fontSize: $font-size.t4
331
- lineHeight: $line-height.t4
332
- prefixText:
333
- fontSize: $font-size.t4
334
- lineHeight: $line-height.t4
335
- prefixIcon:
336
- size: $dimension.x4
337
- suffixText:
338
- fontSize: $font-size.t4
339
- lineHeight: $line-height.t4
340
- suffixIcon:
341
- size: $dimension.x4
342
- footer:
343
- gap: $dimension.x3_5
344
- paddingTop: $dimension.x2
345
- minHeight: $dimension.x4
346
- description:
347
- fontSize: $font-size.t2
348
- lineHeight: $line-height.t2
349
- errorMessage:
350
- fontSize: $font-size.t2
351
- lineHeight: $line-height.t2
352
- errorIcon:
353
- size: $dimension.x3_5
354
- marginRight: $dimension.x1
355
- characterCount:
356
- fontSize: $font-size.t2
357
- lineHeight: $line-height.t2
358
- maxCharacterCount:
359
- fontSize: $font-size.t2
360
- lineHeight: $line-height.t2