@seed-design/rootage-artifacts 1.1.2 → 1.1.4

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 (18) hide show
  1. package/color.yaml +9 -1
  2. package/components/action-button.yaml +11 -11
  3. package/components/bottom-sheet-handle.yaml +1 -1
  4. package/components/checkmark.yaml +11 -2
  5. package/components/chip-tab.yaml +9 -2
  6. package/components/chip.yaml +5 -5
  7. package/components/contextual-floating-button.yaml +1 -1
  8. package/components/floating-action-button.yaml +1 -1
  9. package/components/input-button.yaml +5 -6
  10. package/components/list-item.yaml +21 -5
  11. package/components/radiomark.yaml +9 -2
  12. package/components/reaction-button.yaml +8 -6
  13. package/components/segmented-control-item.yaml +2 -2
  14. package/components/select-box.yaml +8 -1
  15. package/components/text-input.yaml +1 -2
  16. package/components/toggle-button.yaml +1 -1
  17. package/duration.yaml +4 -0
  18. package/package.json +1 -1
package/color.yaml CHANGED
@@ -2,7 +2,7 @@ kind: Tokens
2
2
  metadata:
3
3
  id: color
4
4
  name: Color
5
- lastUpdated: 25-10-15
5
+ lastUpdated: 25-11-18
6
6
  data:
7
7
  collection: color
8
8
  tokens:
@@ -594,6 +594,14 @@ data:
594
594
  values:
595
595
  theme-light: $color.palette.yellow-200
596
596
  theme-dark: $color.palette.yellow-200
597
+ $color.bg.transparent:
598
+ values:
599
+ theme-light: "#00000000"
600
+ theme-dark: "#ffffff00"
601
+ $color.bg.transparent-pressed:
602
+ values:
603
+ theme-light: $color.palette.static-black-alpha-100
604
+ theme-dark: $color.palette.static-white-alpha-50
597
605
  $color.stroke.brand-weak:
598
606
  values:
599
607
  theme-light: $color.palette.carrot-300
package/components/action-button.yaml CHANGED
@@ -73,7 +73,7 @@ data:
73
73
  base:
74
74
  enabled:
75
75
  root:
76
- colorDuration: $duration.d4
76
+ colorDuration: $duration.color-transition
77
77
  colorTimingFunction: $timing-function.easing
78
78
  label:
79
79
  fontWeight: $font-weight.bold
@@ -208,7 +208,7 @@ data:
208
208
  variant=neutralOutline:
209
209
  enabled:
210
210
  root:
211
- color: $color.bg.layer-default
211
+ color: $color.bg.transparent
212
212
  strokeColor: $color.stroke.neutral-muted
213
213
  strokeWidth: 1px
214
214
  label:
@@ -224,10 +224,10 @@ data:
224
224
  rangeColor: $color.fg.neutral
225
225
  pressed:
226
226
  root:
227
- color: $color.bg.layer-default-pressed
227
+ color: $color.bg.transparent-pressed
228
228
  disabled:
229
229
  root:
230
- color: $color.bg.layer-default
230
+ color: $color.bg.transparent
231
231
  strokeColor: $color.stroke.neutral-muted
232
232
  label:
233
233
  color: $color.fg.disabled
@@ -239,11 +239,11 @@ data:
239
239
  color: $color.fg.disabled
240
240
  loading:
241
241
  root:
242
- color: $color.bg.layer-default
242
+ color: $color.bg.transparent
243
243
  variant=brandOutline:
244
244
  enabled:
245
245
  root:
246
- color: $color.bg.layer-default
246
+ color: $color.bg.transparent
247
247
  strokeColor: $color.stroke.neutral-muted
248
248
  strokeWidth: 1px
249
249
  label:
@@ -259,10 +259,10 @@ data:
259
259
  rangeColor: $color.bg.brand-solid
260
260
  pressed:
261
261
  root:
262
- color: $color.bg.layer-default-pressed
262
+ color: $color.bg.transparent-pressed
263
263
  disabled:
264
264
  root:
265
- color: $color.bg.layer-default
265
+ color: $color.bg.transparent
266
266
  strokeColor: $color.stroke.neutral-muted
267
267
  label:
268
268
  color: $color.fg.disabled
@@ -274,7 +274,7 @@ data:
274
274
  color: $color.fg.disabled
275
275
  loading:
276
276
  root:
277
- color: $color.bg.layer-default
277
+ color: $color.bg.transparent
278
278
  variant=ghost:
279
279
  enabled:
280
280
  root:
@@ -292,7 +292,7 @@ data:
292
292
  rangeColor: $color.fg.neutral
293
293
  pressed:
294
294
  root:
295
- color: $color.bg.layer-default-pressed
295
+ color: $color.bg.transparent-pressed
296
296
  disabled:
297
297
  root:
298
298
  color: "#ffffff00"
@@ -306,7 +306,7 @@ data:
306
306
  color: $color.fg.disabled
307
307
  loading:
308
308
  root:
309
- color: $color.bg.layer-default-pressed
309
+ color: $color.bg.transparent-pressed
310
310
  size=xsmall:
311
311
  enabled:
312
312
  root:
package/components/bottom-sheet-handle.yaml CHANGED
@@ -38,7 +38,7 @@ data:
38
38
  height: 4px
39
39
  color: $color.palette.gray-400
40
40
  borderRadius: 9999px
41
- colorDuration: $duration.d4
41
+ colorDuration: $duration.color-transition
42
42
  colorTimingFunction: $timing-function.easing
43
43
  touchArea:
44
44
  width: 44px
package/components/checkmark.yaml CHANGED
@@ -9,6 +9,10 @@ data:
9
9
  slots:
10
10
  root:
11
11
  properties:
12
+ colorDuration:
13
+ type: duration
14
+ colorTimingFunction:
15
+ type: cubicBezier
12
16
  size:
13
17
  type: dimension
14
18
  color:
@@ -26,6 +30,11 @@ data:
26
30
  size:
27
31
  type: dimension
28
32
  definitions:
33
+ base:
34
+ enabled:
35
+ root:
36
+ colorDuration: $duration.color-transition
37
+ colorTimingFunction: $timing-function.easing
29
38
  variant=square:
30
39
  enabled:
31
40
  root:
@@ -33,7 +42,7 @@ data:
33
42
  strokeColor: $color.stroke.neutral-weak
34
43
  pressed:
35
44
  root:
36
- color: $color.bg.layer-default-pressed
45
+ color: $color.bg.transparent-pressed
37
46
  enabled,selected:
38
47
  root:
39
48
  strokeWidth: 0px
@@ -73,7 +82,7 @@ data:
73
82
  color: $color.fg.placeholder
74
83
  pressed:
75
84
  root:
76
- color: $color.bg.layer-default-pressed
85
+ color: $color.bg.transparent-pressed
77
86
  disabled:
78
87
  icon:
79
88
  color: $color.fg.disabled
package/components/chip-tab.yaml CHANGED
@@ -8,6 +8,10 @@ data:
8
8
  slots:
9
9
  root:
10
10
  properties:
11
+ colorDuration:
12
+ type: duration
13
+ colorTimingFunction:
14
+ type: cubicBezier
11
15
  paddingX:
12
16
  type: dimension
13
17
  paddingY:
@@ -30,6 +34,8 @@ data:
30
34
  base:
31
35
  enabled:
32
36
  root:
37
+ colorDuration: $duration.color-transition
38
+ colorTimingFunction: $timing-function.easing
33
39
  paddingY: $dimension.x2
34
40
  cornerRadius: $radius.full
35
41
  label:
@@ -56,7 +62,7 @@ data:
56
62
  color: $color.fg.neutral
57
63
  enabled,pressed:
58
64
  root:
59
- color: $color.bg.layer-default-pressed
65
+ color: $color.bg.transparent-pressed
60
66
  selected:
61
67
  root:
62
68
  color: $color.bg.neutral-inverted
@@ -76,12 +82,13 @@ data:
76
82
  variant=neutralOutline:
77
83
  enabled:
78
84
  root:
85
+ color: $color.bg.transparent
79
86
  stroke: $color.stroke.neutral-muted
80
87
  label:
81
88
  color: $color.fg.neutral
82
89
  enabled,pressed:
83
90
  root:
84
- color: $color.bg.layer-default-pressed
91
+ color: $color.bg.transparent-pressed
85
92
  selected:
86
93
  root:
87
94
  color: $color.bg.neutral-inverted
package/components/chip.yaml CHANGED
@@ -71,7 +71,7 @@ data:
71
71
  base:
72
72
  enabled:
73
73
  root:
74
- colorDuration: $duration.d4
74
+ colorDuration: $duration.color-transition
75
75
  colorTimingFunction: $timing-function.easing
76
76
  cornerRadius: $radius.full
77
77
  prefixIcon:
@@ -125,9 +125,9 @@ data:
125
125
  variant=outlineStrong:
126
126
  enabled:
127
127
  root:
128
+ color: $color.bg.transparent
128
129
  strokeColor: $color.stroke.neutral-muted
129
130
  strokeWidth: 1px
130
- color: $color.bg.layer-default
131
131
  label:
132
132
  color: $color.fg.neutral
133
133
  prefixIcon:
@@ -138,7 +138,7 @@ data:
138
138
  color: $color.fg.neutral
139
139
  pressed:
140
140
  root:
141
- color: $color.bg.layer-default-pressed
141
+ color: $color.bg.transparent-pressed
142
142
  disabled:
143
143
  root:
144
144
  opacity: 0.5
@@ -163,9 +163,9 @@ data:
163
163
  variant=outlineWeak:
164
164
  enabled:
165
165
  root:
166
+ color: $color.bg.transparent
166
167
  strokeColor: $color.stroke.neutral-muted
167
168
  strokeWidth: 1px
168
- color: $color.bg.layer-default
169
169
  label:
170
170
  color: $color.fg.neutral
171
171
  prefixIcon:
@@ -176,7 +176,7 @@ data:
176
176
  color: $color.fg.neutral
177
177
  pressed:
178
178
  root:
179
- color: $color.bg.layer-default-pressed
179
+ color: $color.bg.transparent-pressed
180
180
  disabled:
181
181
  root:
182
182
  opacity: 0.5
package/components/contextual-floating-button.yaml CHANGED
@@ -73,7 +73,7 @@ data:
73
73
  blur: 6px
74
74
  spread: 0px
75
75
  color: "#00000026"
76
- colorDuration: $duration.d4
76
+ colorDuration: $duration.color-transition
77
77
  colorTimingFunction: $timing-function.easing
78
78
  progressCircle:
79
79
  size: 16px
package/components/floating-action-button.yaml CHANGED
@@ -66,7 +66,7 @@ data:
66
66
  blur: 6px
67
67
  spread: 0px
68
68
  color: "#00000026"
69
- colorDuration: $duration.d4
69
+ colorDuration: $duration.color-transition
70
70
  colorTimingFunction: $timing-function.easing
71
71
  layoutDuration: $duration.d4
72
72
  layoutTimingFunction: $timing-function.easing
package/components/input-button.yaml CHANGED
@@ -104,11 +104,12 @@ data:
104
104
  strokeWidth: 1px
105
105
  strokeColor: $color.stroke.neutral-weak
106
106
 
107
- colorDuration: $duration.d3
107
+ color: $color.bg.transparent
108
+ colorDuration: $duration.color-transition
108
109
  colorTimingFunction: $timing-function.easing
109
- strokeColorDuration: $duration.d3
110
+ strokeColorDuration: $duration.color-transition
110
111
  strokeColorTimingFunction: $timing-function.easing
111
- strokeWidthDuration: $duration.d3
112
+ strokeWidthDuration: $duration.color-transition
112
113
  strokeWidthTimingFunction: $timing-function.easing
113
114
 
114
115
  value:
@@ -122,7 +123,6 @@ data:
122
123
  fontSize: $font-size.t5
123
124
  lineHeight: $line-height.t5
124
125
  fontWeight: $font-weight.regular
125
-
126
126
  color: $color.fg.placeholder
127
127
 
128
128
  prefixText:
@@ -146,14 +146,13 @@ data:
146
146
  size: $dimension.x5
147
147
 
148
148
  color: $color.fg.neutral-muted
149
-
150
149
  clearButton:
151
150
  size: 22px
152
151
  color: $color.fg.neutral-subtle
153
152
 
154
153
  pressed:
155
154
  root:
156
- color: $color.bg.layer-default-pressed
155
+ color: $color.bg.transparent-pressed
157
156
 
158
157
  invalid:
159
158
  root:
package/components/list-item.yaml CHANGED
@@ -18,8 +18,14 @@ data:
18
18
  type: cubicBezier
19
19
  color:
20
20
  type: color
21
+ marginX:
22
+ type: dimension
23
+ cornerRadius:
24
+ type: dimension
21
25
  content:
22
26
  properties:
27
+ color:
28
+ type: color
23
29
  gap:
24
30
  type: dimension
25
31
  paddingRight:
@@ -80,8 +86,13 @@ data:
80
86
  root:
81
87
  paddingY: $dimension.x3
82
88
  paddingX: $dimension.spacing-x.global-gutter
83
- colorDuration: $duration.d3
89
+ color: $color.bg.transparent
90
+ colorDuration: $duration.color-transition
84
91
  colorTimingFunction: $timing-function.easing
92
+ marginDuration: $duration.d3
93
+ marginTimingFunction: $timing-function.easing
94
+ borderRadiusDuration: $duration.d3
95
+ borderRadiusTimingFunction: $timing-function.easing
85
96
  content:
86
97
  gap: $dimension.x0_5
87
98
  paddingRight: $dimension.x2_5
@@ -110,17 +121,22 @@ data:
110
121
  suffixIcon:
111
122
  size: 18px
112
123
  color: $color.fg.neutral-subtle
124
+ pressed:
125
+ root:
126
+ color: $color.bg.transparent-pressed
127
+ marginX: $dimension.x1_5
128
+ cornerRadius: $dimension.x2_5
113
129
  highlighted:
114
130
  root:
115
- color: $color.palette.carrot-100
116
- pressed:
131
+ color: $color.bg.brand-weak
132
+ highlighted,pressed:
117
133
  root:
118
- color: $color.bg.layer-default-pressed
134
+ color: $color.bg.brand-weak-pressed
119
135
  disabled:
120
136
  title:
121
137
  color: $color.fg.disabled
122
138
  detail:
123
- color: $color.fg.neutral-subtle
139
+ color: $color.fg.disabled
124
140
  prefixIcon:
125
141
  color: $color.fg.disabled
126
142
  suffixIcon:
package/components/radiomark.yaml CHANGED
@@ -9,6 +9,10 @@ data:
9
9
  slots:
10
10
  root:
11
11
  properties:
12
+ colorDuration:
13
+ type: duration
14
+ colorTimingFunction:
15
+ type: cubicBezier
12
16
  size:
13
17
  type: dimension
14
18
  color:
@@ -31,6 +35,8 @@ data:
31
35
  base:
32
36
  enabled:
33
37
  root:
38
+ colorDuration: $duration.color-transition
39
+ colorTimingFunction: $timing-function.easing
34
40
  strokeWidth: 1px
35
41
  strokeColor: $color.stroke.neutral-weak
36
42
  cornerRadius: $radius.full
@@ -38,7 +44,7 @@ data:
38
44
  cornerRadius: $radius.full
39
45
  enabled,pressed:
40
46
  root:
41
- color: $color.bg.layer-default-pressed
47
+ color: $color.bg.transparent-pressed
42
48
  enabled,selected:
43
49
  root:
44
50
  strokeWidth: 0px
@@ -48,6 +54,7 @@ data:
48
54
  color: $color.palette.gray-300
49
55
  disabled,selected:
50
56
  root:
57
+ color: $color.bg.transparent
51
58
  strokeColor: $color.palette.gray-300
52
59
  icon:
53
60
  color: $color.palette.gray-300
@@ -79,7 +86,7 @@ data:
79
86
  size: $dimension.x2
80
87
  disabled:
81
88
  icon:
82
- size: $dimension.x2_5
89
+ size: $dimension.x2_5
83
90
  size=large:
84
91
  enabled:
85
92
  root:
package/components/reaction-button.yaml CHANGED
@@ -68,8 +68,10 @@ data:
68
68
  base:
69
69
  enabled:
70
70
  root:
71
- color: $color.bg.neutral-weak
72
- colorDuration: $duration.d4
71
+ strokeColor: $color.stroke.neutral-muted
72
+ strokeWidth: 1px
73
+ color: $color.bg.transparent
74
+ colorDuration: $duration.color-transition
73
75
  colorTimingFunction: $timing-function.easing
74
76
  label:
75
77
  color: $color.fg.neutral
@@ -84,10 +86,10 @@ data:
84
86
  rangeColor: $color.fg.neutral
85
87
  pressed:
86
88
  root:
87
- color: $color.bg.neutral-weak-pressed
89
+ color: $color.bg.transparent-pressed
88
90
  selected:
89
91
  root:
90
- color: $color.bg.layer-default
92
+ color: $color.bg.transparent
91
93
  strokeColor: $color.stroke.brand-weak
92
94
  strokeWidth: 1px
93
95
  label:
@@ -101,7 +103,7 @@ data:
101
103
  rangeColor: $color.fg.brand
102
104
  selected,pressed:
103
105
  root:
104
- color: $color.bg.layer-default-pressed
106
+ color: $color.bg.transparent-pressed
105
107
  disabled:
106
108
  root:
107
109
  color: $color.bg.disabled
@@ -117,7 +119,7 @@ data:
117
119
  color: $color.bg.neutral-weak-pressed
118
120
  selected,loading:
119
121
  root:
120
- color: $color.bg.layer-default-pressed
122
+ color: $color.bg.transparent-pressed
121
123
  strokeWidth: 1px
122
124
  size=xsmall:
123
125
  enabled:
package/components/segmented-control-item.yaml CHANGED
@@ -51,14 +51,14 @@ data:
51
51
  paddingY: $dimension.x1_5
52
52
  cornerRadius: $radius.full
53
53
  gap: $dimension.x1_5
54
- colorDuration: $duration.d4
54
+ colorDuration: $duration.color-transition
55
55
  colorTimingFunction: $timing-function.easing
56
56
  label:
57
57
  fontSize: $font-size.t5
58
58
  lineHeight: $line-height.t5
59
59
  fontWeight: $font-weight.bold
60
60
  color: $color.fg.neutral-subtle
61
- colorDuration: $duration.d4
61
+ colorDuration: $duration.color-transition
62
62
  colorTimingFunction: $timing-function.easing
63
63
  pressed:
64
64
  root:
package/components/select-box.yaml CHANGED
@@ -8,6 +8,10 @@ data:
8
8
  slots:
9
9
  root:
10
10
  properties:
11
+ colorTransitionDuration:
12
+ type: duration
13
+ colorTransitionTimingFunction:
14
+ type: cubicBezier
11
15
  paddingX:
12
16
  type: dimension
13
17
  paddingY:
@@ -50,12 +54,15 @@ data:
50
54
  base:
51
55
  enabled:
52
56
  root:
57
+ colorTransitionDuration: $duration.color-transition
58
+ colorTransitionTimingFunction: $timing-function.easing
53
59
  paddingX: $dimension.x4
54
60
  paddingY: $dimension.x5
55
61
  gap: $dimension.x2_5
56
62
  strokeWidth: 1px
57
63
  strokeColor: $color.stroke.neutral-muted
58
64
  cornerRadius: $radius.r3
65
+ color: $color.bg.transparent
59
66
  content:
60
67
  gap: $dimension.x0_5
61
68
  label:
@@ -71,7 +78,7 @@ data:
71
78
 
72
79
  enabled,pressed:
73
80
  root:
74
- color: $color.bg.layer-default-pressed
81
+ color: $color.bg.transparent-pressed
75
82
 
76
83
  enabled,selected:
77
84
  root:
package/components/text-input.yaml CHANGED
@@ -91,7 +91,7 @@ data:
91
91
  enabled:
92
92
  root:
93
93
  strokeColor: $color.stroke.neutral-weak
94
- strokeColorDuration: $duration.d3
94
+ strokeColorDuration: $duration.color-transition
95
95
  strokeColorTimingFunction: $timing-function.easing
96
96
  strokeWidthDuration: $duration.d3
97
97
  strokeWidthTimingFunction: $timing-function.easing
@@ -229,4 +229,3 @@ data:
229
229
  root:
230
230
  minHeight: 90px
231
231
  paddingY: 11px
232
-
package/components/toggle-button.yaml CHANGED
@@ -62,7 +62,7 @@ data:
62
62
  base:
63
63
  enabled:
64
64
  root:
65
- colorDuration: $duration.d4
65
+ colorDuration: $duration.color-transition
66
66
  colorTimingFunction: $timing-function.easing
67
67
  label:
68
68
  fontWeight: $font-weight.bold
package/duration.yaml CHANGED
@@ -2,6 +2,7 @@ kind: Tokens
2
2
  metadata:
3
3
  id: duration
4
4
  name: Duration
5
+ lastUpdated: 25-11-18
5
6
  data:
6
7
  collection: global
7
8
  tokens:
@@ -23,3 +24,6 @@ data:
23
24
  $duration.d6:
24
25
  values:
25
26
  default: 300ms
27
+ $duration.color-transition:
28
+ values:
29
+ default: $duration.d3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/rootage-artifacts",
3
- "version": "1.1.2",
3
+ "version": "1.1.4",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",