@seed-design/rootage-artifacts 0.1.1 → 0.1.3

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 (14) hide show
  1. package/color.yaml +2 -2
  2. package/components/badge.yaml +1 -1
  3. package/components/checkbox.yaml +5 -81
  4. package/components/checkmark.yaml +126 -0
  5. package/components/chip-tab.yaml +40 -5
  6. package/components/chip-tablist.yaml +6 -1
  7. package/components/link-content.yaml +2 -1
  8. package/components/list-item.yaml +127 -0
  9. package/components/page-banner.yaml +5 -5
  10. package/components/radio.yaml +34 -49
  11. package/components/radiomark.yaml +91 -0
  12. package/components/select-box.yaml +0 -69
  13. package/components/switch.yaml +20 -8
  14. package/package.json +1 -1
package/color.yaml CHANGED
@@ -585,11 +585,11 @@ data:
585
585
  $color.bg.warning-solid:
586
586
  values:
587
587
  theme-light: $color.palette.yellow-300
588
- theme-dark: $color.palette.yellow-600
588
+ theme-dark: $color.palette.yellow-800
589
589
  $color.bg.warning-solid-pressed:
590
590
  values:
591
591
  theme-light: $color.palette.yellow-400
592
- theme-dark: $color.palette.yellow-700
592
+ theme-dark: $color.palette.yellow-900
593
593
  $color.bg.warning-weak-pressed:
594
594
  values:
595
595
  theme-light: $color.palette.yellow-200
package/components/badge.yaml CHANGED
@@ -160,7 +160,7 @@ data:
160
160
  root:
161
161
  color: $color.bg.warning-solid
162
162
  label:
163
- color: $color.fg.neutral
163
+ color: $color.palette.static-black-alpha-900
164
164
  tone=warning, variant=outline:
165
165
  enabled:
166
166
  root:
package/components/checkbox.yaml CHANGED
@@ -48,71 +48,18 @@ data:
48
48
  color: $color.fg.neutral
49
49
  root:
50
50
  gap: $dimension.x2
51
-
52
- weight=default:
53
- enabled:
54
- label:
55
- fontWeight: $font-weight.regular
56
- weight=stronger:
57
- enabled:
58
- label:
59
- fontWeight: $font-weight.bold
60
-
61
- variant=square:
62
- enabled:
63
- control:
64
- strokeColor: $color.stroke.neutral-weak
65
- strokeWidth: 1px
66
- enabled,selected:
67
- control:
68
- color: $color.bg.brand-solid
69
- icon:
70
- color: $color.palette.static-white
71
- pressed:
72
- control:
73
- color: $color.bg.layer-default-pressed
74
- pressed,selected:
75
- control:
76
- color: $color.bg.brand-solid-pressed
77
- icon:
78
- color: $color.palette.static-white
79
51
  disabled:
80
- control:
81
- color: $color.bg.disabled
82
- strokeColor: $color.stroke.neutral-muted
83
- label:
84
- color: $color.fg.disabled
85
- icon:
86
- color: $color.fg.disabled
87
- disabled,selected:
88
52
  label:
89
53
  color: $color.fg.disabled
90
- icon:
91
- color: $color.fg.disabled
92
54
 
93
- variant=ghost:
55
+ weight=regular:
94
56
  enabled:
95
- icon:
96
- color: $color.fg.placeholder
97
- enabled,selected:
98
- icon:
99
- color: $color.fg.brand
100
- pressed:
101
- control:
102
- color: $color.bg.layer-default-pressed
103
- pressed,selected:
104
- control:
105
- color: $color.palette.carrot-200
106
- disabled:
107
57
  label:
108
- color: $color.fg.disabled
109
- icon:
110
- color: $color.fg.disabled
111
- disabled,selected:
58
+ fontWeight: $font-weight.regular
59
+ weight=bold:
60
+ enabled:
112
61
  label:
113
- color: $color.fg.disabled
114
- icon:
115
- color: $color.fg.disabled
62
+ fontWeight: $font-weight.bold
116
63
 
117
64
  size=medium:
118
65
  enabled:
@@ -121,9 +68,6 @@ data:
121
68
  label:
122
69
  fontSize: $font-size.t4
123
70
  lineHeight: $line-height.t4
124
- control:
125
- size: $dimension.x5
126
- cornerRadius: $radius.r1
127
71
 
128
72
  size=large:
129
73
  enabled:
@@ -132,23 +76,3 @@ data:
132
76
  label:
133
77
  fontSize: $font-size.t5
134
78
  lineHeight: $line-height.t5
135
- control:
136
- size: $dimension.x6
137
- cornerRadius: $radius.r1
138
-
139
- variant=square,size=medium:
140
- enabled:
141
- icon:
142
- size: 12px
143
- variant=square,size=large:
144
- enabled:
145
- icon:
146
- size: 14px
147
- variant=ghost,size=medium:
148
- enabled:
149
- icon:
150
- size: 14px
151
- variant=ghost,size=large:
152
- enabled:
153
- icon:
154
- size: 18px
package/components/checkmark.yaml ADDED
@@ -0,0 +1,126 @@
1
+ # yaml-language-server: $schema=./schema.json
2
+ # parts: root, icon
3
+ kind: ComponentSpec
4
+ metadata:
5
+ id: checkmark
6
+ name: Checkmark
7
+ data:
8
+ schema:
9
+ slots:
10
+ root:
11
+ properties:
12
+ size:
13
+ type: dimension
14
+ color:
15
+ type: color
16
+ strokeColor:
17
+ type: color
18
+ strokeWidth:
19
+ type: dimension
20
+ cornerRadius:
21
+ type: dimension
22
+ icon:
23
+ properties:
24
+ color:
25
+ type: color
26
+ size:
27
+ type: dimension
28
+ definitions:
29
+ variant=square:
30
+ enabled:
31
+ root:
32
+ strokeWidth: 1px
33
+ strokeColor: $color.stroke.neutral-weak
34
+ pressed:
35
+ root:
36
+ color: $color.bg.layer-default-pressed
37
+ enabled,selected:
38
+ root:
39
+ strokeWidth: 0px
40
+ strokeColor: "#00000000"
41
+ disabled:
42
+ root:
43
+ color: $color.bg.disabled
44
+ strokeColor: $color.stroke.neutral-muted
45
+ icon:
46
+ color: $color.fg.disabled
47
+ disabled,selected:
48
+ icon:
49
+ color: $color.fg.disabled
50
+
51
+ variant=square,tone=brand:
52
+ enabled,selected:
53
+ root:
54
+ color: $color.bg.brand-solid
55
+ icon:
56
+ color: $color.palette.static-white
57
+ pressed,selected:
58
+ root:
59
+ color: $color.bg.brand-solid-pressed
60
+ variant=square,tone=neutral:
61
+ enabled,selected:
62
+ root:
63
+ color: $color.bg.neutral-inverted
64
+ icon:
65
+ color: $color.fg.neutral-inverted
66
+ pressed,selected:
67
+ root:
68
+ color: $color.bg.neutral-inverted-pressed
69
+
70
+ variant=ghost:
71
+ enabled:
72
+ icon:
73
+ color: $color.fg.placeholder
74
+ pressed:
75
+ root:
76
+ color: $color.bg.layer-default-pressed
77
+ disabled:
78
+ icon:
79
+ color: $color.fg.disabled
80
+ disabled,selected:
81
+ icon:
82
+ color: $color.fg.disabled
83
+
84
+ variant=ghost,tone=brand:
85
+ enabled,selected:
86
+ icon:
87
+ color: $color.fg.brand
88
+ pressed,selected:
89
+ root:
90
+ color: $color.palette.carrot-200
91
+ variant=ghost,tone=neutral:
92
+ enabled,selected:
93
+ icon:
94
+ color: $color.fg.neutral-muted
95
+ pressed,selected:
96
+ root:
97
+ color: $color.palette.gray-200
98
+
99
+ size=medium:
100
+ enabled:
101
+ root:
102
+ size: $dimension.x5
103
+ cornerRadius: $radius.r1
104
+
105
+ size=large:
106
+ enabled:
107
+ root:
108
+ size: $dimension.x6
109
+ cornerRadius: $radius.r1
110
+
111
+ variant=square,size=medium:
112
+ enabled:
113
+ icon:
114
+ size: 12px
115
+ variant=square,size=large:
116
+ enabled:
117
+ icon:
118
+ size: 14px
119
+ variant=ghost,size=medium:
120
+ enabled:
121
+ icon:
122
+ size: 14px
123
+ variant=ghost,size=large:
124
+ enabled:
125
+ icon:
126
+ size: 18px
package/components/chip-tab.yaml CHANGED
@@ -30,18 +30,55 @@ data:
30
30
  base:
31
31
  enabled:
32
32
  root:
33
- paddingX: $dimension.x3_5
34
33
  paddingY: $dimension.x2
35
34
  cornerRadius: $radius.full
35
+ label:
36
+ fontWeight: $font-weight.medium
37
+ size=medium:
38
+ enabled:
39
+ root:
40
+ paddingX: $dimension.x3_5
36
41
  minHeight: 36px
37
42
  label:
38
43
  fontSize: $font-size.t4
39
- fontWeight: $font-weight.bold
44
+ size=large:
45
+ enabled:
46
+ root:
47
+ paddingX: $dimension.x4
48
+ minHeight: 40px
49
+ label:
50
+ fontSize: $font-size.t4
40
51
  variant=neutralSolid:
41
52
  enabled:
53
+ root:
54
+ color: $color.bg.neutral-weak
55
+ label:
56
+ color: $color.fg.neutral
57
+ enabled,pressed:
58
+ root:
59
+ color: $color.bg.layer-default-pressed
60
+ selected:
61
+ root:
62
+ color: $color.bg.neutral-inverted
63
+ label:
64
+ color: $color.fg.neutral-inverted
65
+ selected,pressed:
66
+ root:
67
+ color: $color.bg.neutral-inverted-pressed
68
+ disabled:
69
+ label:
70
+ color: $color.fg.disabled
71
+ selected,disabled:
72
+ root:
73
+ color: $color.bg.disabled
74
+ label:
75
+ color: $color.fg.disabled
76
+ variant=neutralOutline:
77
+ enabled:
78
+ root:
79
+ stroke: $color.stroke.neutral-muted
42
80
  label:
43
81
  color: $color.fg.neutral
44
- fontWeight: $font-weight.bold
45
82
  enabled,pressed:
46
83
  root:
47
84
  color: $color.bg.layer-default-pressed
@@ -67,7 +104,6 @@ data:
67
104
  color: $color.bg.neutral-weak
68
105
  label:
69
106
  color: $color.fg.neutral-muted
70
- fontWeight: $font-weight.medium
71
107
  enabled,pressed:
72
108
  root:
73
109
  color: $color.bg.neutral-weak-pressed
@@ -76,7 +112,6 @@ data:
76
112
  color: $color.bg.brand-solid
77
113
  label:
78
114
  color: $color.palette.static-white
79
- fontWeight: $font-weight.bold
80
115
  selected,pressed:
81
116
  root:
82
117
  color: $color.bg.brand-solid-pressed
package/components/chip-tablist.yaml CHANGED
@@ -17,10 +17,15 @@ data:
17
17
  enabled:
18
18
  root:
19
19
  paddingX: $dimension.x4
20
+ gap: 8px
20
21
  variant=neutralSolid:
21
22
  enabled:
22
23
  root:
23
- gap: 0px
24
+ gap: 8px
25
+ variant=neutralOutline:
26
+ enabled:
27
+ root:
28
+ gap: 8px
24
29
  variant=brandSolid:
25
30
  enabled:
26
31
  root:
package/components/link-content.yaml CHANGED
@@ -3,6 +3,7 @@ kind: ComponentSpec
3
3
  metadata:
4
4
  id: link-content
5
5
  name: Link Content
6
+ deprecated: Use Action Button with variant="ghost" instead.
6
7
  data:
7
8
  schema:
8
9
  slots:
@@ -57,4 +58,4 @@ data:
57
58
  size: $dimension.x4
58
59
  label:
59
60
  fontSize: $font-size.t6
60
- lineHeight: $line-height.t6
61
+ lineHeight: $line-height.t6
package/components/list-item.yaml ADDED
@@ -0,0 +1,127 @@
1
+ # yaml-language-server: $schema=./schema.json
2
+ kind: ComponentSpec
3
+ metadata:
4
+ id: list-item
5
+ name: List Item
6
+ data:
7
+ schema:
8
+ slots:
9
+ root:
10
+ properties:
11
+ paddingY:
12
+ type: dimension
13
+ paddingX:
14
+ type: dimension
15
+ colorDuration:
16
+ type: duration
17
+ colorTimingFunction:
18
+ type: cubicBezier
19
+ color:
20
+ type: color
21
+ content:
22
+ properties:
23
+ gap:
24
+ type: dimension
25
+ paddingRight:
26
+ type: dimension
27
+ title:
28
+ properties:
29
+ color:
30
+ type: color
31
+ fontSize:
32
+ type: dimension
33
+ lineHeight:
34
+ type: dimension
35
+ fontWeight:
36
+ type: number
37
+ detail:
38
+ properties:
39
+ color:
40
+ type: color
41
+ fontSize:
42
+ type: dimension
43
+ lineHeight:
44
+ type: dimension
45
+ fontWeight:
46
+ type: number
47
+ prefix:
48
+ properties:
49
+ paddingRight:
50
+ type: dimension
51
+ prefixIcon:
52
+ properties:
53
+ size:
54
+ type: dimension
55
+ color:
56
+ type: color
57
+ suffix:
58
+ properties:
59
+ gap:
60
+ type: dimension
61
+ suffixText:
62
+ properties:
63
+ color:
64
+ type: color
65
+ fontSize:
66
+ type: dimension
67
+ lineHeight:
68
+ type: dimension
69
+ fontWeight:
70
+ type: number
71
+ suffixIcon:
72
+ properties:
73
+ size:
74
+ type: dimension
75
+ color:
76
+ type: color
77
+ definitions:
78
+ base:
79
+ enabled:
80
+ root:
81
+ paddingY: $dimension.x2_5
82
+ paddingX: $dimension.spacing-x.global-gutter
83
+ colorDuration: $duration.d3
84
+ colorTimingFunction: $timing-function.easing
85
+ content:
86
+ gap: $dimension.x0_5
87
+ paddingRight: $dimension.x2_5
88
+ title:
89
+ color: $color.fg.neutral
90
+ fontSize: $font-size.t5
91
+ lineHeight: $line-height.t5
92
+ fontWeight: $font-weight.medium
93
+ detail:
94
+ color: $color.fg.neutral-subtle
95
+ fontSize: $font-size.t3
96
+ lineHeight: $line-height.t3
97
+ fontWeight: $font-weight.regular
98
+ prefix:
99
+ paddingRight: $dimension.x3
100
+ prefixIcon:
101
+ size: 22px
102
+ color: $color.fg.neutral
103
+ suffix:
104
+ gap: $dimension.x1
105
+ suffixText:
106
+ color: $color.fg.neutral-subtle
107
+ fontSize: $font-size.t5
108
+ lineHeight: $line-height.t5
109
+ fontWeight: $font-weight.regular
110
+ suffixIcon:
111
+ size: 18px
112
+ color: $color.fg.neutral-subtle
113
+ highlighted:
114
+ root:
115
+ color: $color.palette.carrot-100
116
+ pressed:
117
+ root:
118
+ color: $color.bg.layer-default-pressed
119
+ disabled:
120
+ title:
121
+ color: $color.fg.disabled
122
+ detail:
123
+ color: $color.fg.neutral-subtle
124
+ prefixIcon:
125
+ color: $color.fg.disabled
126
+ suffixIcon:
127
+ color: $color.fg.disabled
package/components/page-banner.yaml CHANGED
@@ -225,15 +225,15 @@ data:
225
225
  root:
226
226
  color: $color.bg.warning-solid
227
227
  prefixIcon:
228
- color: $color.fg.neutral
228
+ color: $color.palette.static-black-alpha-900
229
229
  title:
230
- color: $color.fg.neutral
230
+ color: $color.palette.static-black-alpha-900
231
231
  description:
232
- color: $color.fg.neutral
232
+ color: $color.palette.static-black-alpha-900
233
233
  button:
234
- color: $color.fg.neutral
234
+ color: $color.palette.static-black-alpha-900
235
235
  suffixIcon:
236
- color: $color.fg.neutral
236
+ color: $color.palette.static-black-alpha-900
237
237
  pressed:
238
238
  root:
239
239
  color: $color.bg.warning-solid-pressed
package/components/radio.yaml CHANGED
@@ -1,4 +1,5 @@
1
1
  # yaml-language-server: $schema=./schema.json
2
+ # parts: root, label
2
3
  kind: ComponentSpec
3
4
  metadata:
4
5
  id: radio
@@ -8,68 +9,52 @@ data:
8
9
  slots:
9
10
  root:
10
11
  properties:
11
- color:
12
- type: color
13
- size:
12
+ gap:
14
13
  type: dimension
15
- strokeWidth:
14
+ minHeight:
16
15
  type: dimension
17
- strokeColor:
18
- type: color
19
- cornerRadius:
20
- type: dimension
21
- icon:
16
+ label:
22
17
  properties:
23
18
  color:
24
19
  type: color
25
- size:
20
+ fontWeight:
21
+ type: number
22
+ fontSize:
23
+ type: dimension
24
+ lineHeight:
26
25
  type: dimension
27
26
  definitions:
28
27
  base:
29
28
  enabled:
29
+ label:
30
+ color: $color.fg.neutral
30
31
  root:
31
- color: $color.bg.layer-default
32
- strokeWidth: 1px
33
- strokeColor: $color.stroke.neutral-weak
34
- cornerRadius: $radius.full
35
- icon:
36
- cornerRadius: $radius.full
37
- enabled,pressed:
38
- root:
39
- color: $color.bg.layer-default-pressed
40
- enabled,selected:
41
- root:
42
- color: $color.bg.brand-solid
43
- strokeWidth: 0px
44
- icon:
45
- color: $color.palette.static-white
46
- enabled,selected,pressed:
47
- root:
48
- color: $color.bg.brand-solid-pressed
32
+ gap: $dimension.x2
49
33
  disabled:
50
- root:
51
- color: $color.palette.gray-300
52
- disabled,selected:
53
- root:
54
- strokeColor: $color.palette.gray-300
55
- icon:
56
- color: $color.palette.gray-300
34
+ label:
35
+ color: $color.fg.disabled
57
36
 
58
- size=large:
37
+ weight=regular:
59
38
  enabled:
60
- root:
61
- size: $dimension.x6
62
- icon:
63
- size: $dimension.x2_5
64
- disabled:
65
- icon:
66
- size: $dimension.x3
39
+ label:
40
+ fontWeight: $font-weight.regular
41
+ weight=bold:
42
+ enabled:
43
+ label:
44
+ fontWeight: $font-weight.bold
45
+
67
46
  size=medium:
68
47
  enabled:
69
48
  root:
70
- size: $dimension.x5
71
- icon:
72
- size: $dimension.x2
73
- disabled:
74
- icon:
75
- size: $dimension.x2_5
49
+ minHeight: $dimension.x8
50
+ label:
51
+ fontSize: $font-size.t4
52
+ lineHeight: $line-height.t4
53
+
54
+ size=large:
55
+ enabled:
56
+ root:
57
+ minHeight: $dimension.x9
58
+ label:
59
+ fontSize: $font-size.t5
60
+ lineHeight: $line-height.t5
package/components/radiomark.yaml ADDED
@@ -0,0 +1,91 @@
1
+ # yaml-language-server: $schema=./schema.json
2
+ # parts: root, icon
3
+ kind: ComponentSpec
4
+ metadata:
5
+ id: radiomark
6
+ name: Radiomark
7
+ data:
8
+ schema:
9
+ slots:
10
+ root:
11
+ properties:
12
+ size:
13
+ type: dimension
14
+ color:
15
+ type: color
16
+ strokeWidth:
17
+ type: dimension
18
+ strokeColor:
19
+ type: color
20
+ cornerRadius:
21
+ type: dimension
22
+ icon:
23
+ properties:
24
+ size:
25
+ type: dimension
26
+ color:
27
+ type: color
28
+ cornerRadius:
29
+ type: dimension
30
+ definitions:
31
+ base:
32
+ enabled:
33
+ root:
34
+ strokeWidth: 1px
35
+ strokeColor: $color.stroke.neutral-weak
36
+ cornerRadius: $radius.full
37
+ icon:
38
+ cornerRadius: $radius.full
39
+ enabled,pressed:
40
+ root:
41
+ color: $color.bg.layer-default-pressed
42
+ enabled,selected:
43
+ root:
44
+ strokeWidth: 0px
45
+ strokeColor: "#00000000"
46
+ disabled:
47
+ root:
48
+ color: $color.palette.gray-300
49
+ disabled,selected:
50
+ root:
51
+ strokeColor: $color.palette.gray-300
52
+ icon:
53
+ color: $color.palette.gray-300
54
+
55
+ tone=brand:
56
+ enabled,selected:
57
+ root:
58
+ color: $color.bg.brand-solid
59
+ icon:
60
+ color: $color.palette.static-white
61
+ enabled,selected,pressed:
62
+ root:
63
+ color: $color.bg.brand-solid-pressed
64
+ tone=neutral:
65
+ enabled,selected:
66
+ root:
67
+ color: $color.bg.neutral-inverted
68
+ icon:
69
+ color: $color.fg.neutral-inverted
70
+ enabled,selected,pressed:
71
+ root:
72
+ color: $color.bg.neutral-inverted-pressed
73
+
74
+ size=medium:
75
+ enabled:
76
+ root:
77
+ size: $dimension.x5
78
+ icon:
79
+ size: $dimension.x2
80
+ disabled:
81
+ icon:
82
+ size: $dimension.x2_5
83
+ size=large:
84
+ enabled:
85
+ root:
86
+ size: $dimension.x6
87
+ icon:
88
+ size: $dimension.x2_5
89
+ disabled:
90
+ icon:
91
+ size: $dimension.x3
package/components/select-box.yaml CHANGED
@@ -46,40 +46,6 @@ data:
46
46
  type: dimension
47
47
  lineHeight:
48
48
  type: dimension
49
- checkboxControl:
50
- properties:
51
- size:
52
- type: dimension
53
- color:
54
- type: color
55
- strokeWidth:
56
- type: dimension
57
- strokeColor:
58
- type: color
59
- cornerRadius:
60
- type: dimension
61
- checkboxIcon:
62
- properties:
63
- size:
64
- type: dimension
65
- radioControl:
66
- properties:
67
- size:
68
- type: dimension
69
- color:
70
- type: color
71
- strokeWidth:
72
- type: dimension
73
- strokeColor:
74
- type: color
75
- cornerRadius:
76
- type: dimension
77
- radioIcon:
78
- properties:
79
- size:
80
- type: dimension
81
- cornerRadius:
82
- type: dimension
83
49
  definitions:
84
50
  base:
85
51
  enabled:
@@ -102,51 +68,16 @@ data:
102
68
  fontWeight: $font-weight.regular
103
69
  fontSize: $font-size.t4
104
70
  lineHeight: $line-height.t4
105
- checkboxControl:
106
- size: $dimension.x6
107
- color: $color.bg.layer-default
108
- strokeWidth: 1px
109
- strokeColor: $color.stroke.neutral-weak
110
- cornerRadius: $radius.r1
111
- checkboxIcon:
112
- size: $dimension.x3_5
113
- radioControl:
114
- size: $dimension.x6
115
- color: $color.bg.layer-default
116
- strokeWidth: 1px
117
- strokeColor: $color.stroke.neutral-weak
118
- cornerRadius: $radius.full
119
- radioIcon:
120
- size: $dimension.x2_5
121
- cornerRadius: $radius.full
122
71
 
123
72
  enabled,pressed:
124
73
  root:
125
74
  color: $color.bg.layer-default-pressed
126
- checkboxControl:
127
- color: $color.bg.layer-default-pressed
128
- radioControl:
129
- color: $color.bg.layer-default-pressed
130
75
 
131
76
  enabled,selected:
132
77
  root:
133
78
  color: $color.bg.neutral-weak
134
79
  strokeColor: $color.stroke.neutral-weak
135
- checkboxControl:
136
- color: $color.bg.brand-solid
137
- strokeWidth: 0
138
- checkboxIcon:
139
- color: $color.palette.static-white
140
- radioControl:
141
- color: $color.bg.brand-solid
142
- strokeWidth: 0
143
- radioIcon:
144
- color: $color.palette.static-white
145
80
 
146
81
  enabled,selected,pressed:
147
82
  root:
148
83
  color: $color.bg.neutral-weak-pressed
149
- checkboxControl:
150
- color: $color.bg.brand-solid-pressed
151
- radioControl:
152
- color: $color.bg.brand-solid-pressed
package/components/switch.yaml CHANGED
@@ -58,19 +58,31 @@ data:
58
58
  color: $color.palette.gray-600
59
59
  cornerRadius: $radius.full
60
60
  thumb:
61
- color: $color.palette.static-white
62
61
  cornerRadius: $radius.full
63
62
  label:
64
63
  color: $color.fg.neutral
65
64
  fontWeight: $font-weight.medium
66
- enabled,selected:
67
- control:
68
- color: $color.bg.brand-solid
69
65
  disabled:
70
66
  control:
71
67
  opacity: 0.38
72
68
  label:
73
69
  color: $color.fg.disabled
70
+
71
+ tone=brand:
72
+ enabled:
73
+ thumb:
74
+ color: $color.palette.static-white
75
+ enabled,selected:
76
+ control:
77
+ color: $color.bg.brand-solid
78
+ tone=neutral:
79
+ enabled:
80
+ thumb:
81
+ color: $color.fg.neutral-inverted
82
+ enabled,selected:
83
+ control:
84
+ color: $color.bg.neutral-inverted
85
+
74
86
  size=32:
75
87
  enabled:
76
88
  root:
@@ -79,11 +91,11 @@ data:
79
91
  control:
80
92
  height: 32px
81
93
  width: 52px
82
- paddingX: 2px
83
- paddingY: 2px
94
+ paddingX: 3px
95
+ paddingY: 3px
84
96
  thumb:
85
- height: 28px
86
- width: 28px
97
+ height: 26px
98
+ width: 26px
87
99
  shadow:
88
100
  type: shadow
89
101
  value:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/rootage-artifacts",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",