@seed-design/rootage-artifacts 0.0.6 → 0.1.1

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 (17) hide show
  1. package/color.yaml +55 -39
  2. package/components/action-button.yaml +4 -4
  3. package/components/action-sheet.yaml +1 -1
  4. package/components/avatar.yaml +1 -1
  5. package/components/badge.yaml +6 -6
  6. package/components/checkbox.yaml +2 -2
  7. package/components/chip.yaml +19 -78
  8. package/components/control-chip.yaml +1 -1
  9. package/components/extended-action-sheet.yaml +1 -1
  10. package/components/menu-sheet.yaml +1 -1
  11. package/components/radio.yaml +1 -1
  12. package/components/reaction-button.yaml +1 -1
  13. package/components/select-box.yaml +4 -4
  14. package/components/tablist.yaml +1 -1
  15. package/components/text-field.yaml +4 -4
  16. package/components/top-navigation.yaml +1 -1
  17. 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-08-22
5
+ lastUpdated: 25-09-03
6
6
  data:
7
7
  collection: color
8
8
  tokens:
@@ -386,10 +386,22 @@ data:
386
386
  values:
387
387
  theme-light: $color.palette.gray-1000
388
388
  theme-dark: $color.palette.gray-1000
389
+ $color.fg.placeholder:
390
+ values:
391
+ theme-light: $color.palette.gray-600
392
+ theme-dark: $color.palette.gray-600
393
+ $color.fg.disabled:
394
+ values:
395
+ theme-light: $color.palette.gray-500
396
+ theme-dark: $color.palette.gray-500
389
397
  $color.fg.brand:
390
398
  values:
391
399
  theme-light: $color.palette.carrot-600
392
400
  theme-dark: $color.palette.carrot-700
401
+ $color.fg.informative:
402
+ values:
403
+ theme-light: $color.palette.blue-700
404
+ theme-dark: $color.palette.blue-700
393
405
  $color.fg.critical:
394
406
  values:
395
407
  theme-light: $color.palette.red-700
@@ -402,18 +414,6 @@ data:
402
414
  values:
403
415
  theme-light: $color.palette.yellow-700
404
416
  theme-dark: $color.palette.yellow-700
405
- $color.fg.informative:
406
- values:
407
- theme-light: $color.palette.blue-700
408
- theme-dark: $color.palette.blue-700
409
- $color.fg.placeholder:
410
- values:
411
- theme-light: $color.palette.gray-600
412
- theme-dark: $color.palette.gray-600
413
- $color.fg.disabled:
414
- values:
415
- theme-light: $color.palette.gray-500
416
- theme-dark: $color.palette.gray-500
417
417
  $color.fg.brand-contrast:
418
418
  values:
419
419
  theme-light: $color.palette.carrot-700
@@ -594,50 +594,66 @@ data:
594
594
  values:
595
595
  theme-light: $color.palette.yellow-200
596
596
  theme-dark: $color.palette.yellow-200
597
- $color.stroke.neutral:
598
- values:
599
- theme-light: $color.palette.static-black-alpha-300
600
- theme-dark: $color.palette.static-white-alpha-100
601
- $color.stroke.brand:
597
+ $color.stroke.brand-weak:
602
598
  values:
603
599
  theme-light: $color.palette.carrot-300
604
600
  theme-dark: $color.palette.carrot-300
605
- $color.stroke.positive:
601
+ $color.stroke.brand-solid:
606
602
  values:
607
- theme-light: $color.palette.green-300
608
- theme-dark: $color.palette.green-300
609
- $color.stroke.informative:
603
+ theme-light: $color.palette.carrot-700
604
+ theme-dark: $color.palette.carrot-700
605
+ $color.stroke.critical-weak:
606
+ values:
607
+ theme-light: $color.palette.red-300
608
+ theme-dark: $color.palette.red-300
609
+ $color.stroke.critical-solid:
610
+ values:
611
+ theme-light: $color.palette.red-700
612
+ theme-dark: $color.palette.red-700
613
+ $color.stroke.informative-weak:
610
614
  values:
611
615
  theme-light: $color.palette.blue-300
612
616
  theme-dark: $color.palette.blue-300
613
- $color.stroke.warning:
617
+ $color.stroke.informative-solid:
614
618
  values:
615
- theme-light: $color.palette.yellow-300
616
- theme-dark: $color.palette.yellow-300
617
- $color.stroke.critical:
619
+ theme-light: $color.palette.blue-700
620
+ theme-dark: $color.palette.blue-700
621
+ $color.stroke.neutral-contrast:
618
622
  values:
619
- theme-light: $color.palette.red-300
620
- theme-dark: $color.palette.red-300
621
- $color.stroke.field:
623
+ theme-light: $color.palette.gray-1000
624
+ theme-dark: $color.palette.gray-1000
625
+ $color.stroke.neutral-solid:
622
626
  values:
623
- theme-light: $color.palette.gray-400
624
- theme-dark: $color.palette.gray-400
625
- $color.stroke.control:
627
+ theme-light: $color.palette.gray-800
628
+ theme-dark: $color.palette.gray-800
629
+ $color.stroke.neutral-weak:
626
630
  values:
627
631
  theme-light: $color.palette.gray-400
628
632
  theme-dark: $color.palette.gray-400
629
- $color.stroke.field-focused:
630
- values:
631
- theme-light: $color.palette.gray-800
632
- theme-dark: $color.palette.gray-800
633
633
  $color.stroke.neutral-muted:
634
634
  values:
635
- theme-light: $color.palette.static-black-alpha-200
636
- theme-dark: $color.palette.static-white-alpha-50
637
- $color.stroke.on-image:
635
+ theme-light: $color.palette.static-black-alpha-300
636
+ theme-dark: $color.palette.static-white-alpha-100
637
+ $color.stroke.neutral-subtle:
638
638
  values:
639
639
  theme-light: $color.palette.static-black-alpha-200
640
640
  theme-dark: $color.palette.static-white-alpha-50
641
+ $color.stroke.positive-weak:
642
+ values:
643
+ theme-light: $color.palette.green-300
644
+ theme-dark: $color.palette.green-300
645
+ $color.stroke.positive-solid:
646
+ values:
647
+ theme-light: $color.palette.green-700
648
+ theme-dark: $color.palette.green-700
649
+ $color.stroke.warning-weak:
650
+ values:
651
+ theme-light: $color.palette.yellow-300
652
+ theme-dark: $color.palette.yellow-300
653
+ $color.stroke.warning-solid:
654
+ values:
655
+ theme-light: $color.palette.yellow-700
656
+ theme-dark: $color.palette.yellow-700
641
657
  $color.manner-temp.l1.text:
642
658
  values:
643
659
  theme-light: "#62666a"
package/components/action-button.yaml CHANGED
@@ -209,7 +209,7 @@ data:
209
209
  enabled:
210
210
  root:
211
211
  color: $color.bg.layer-default
212
- strokeColor: $color.stroke.neutral
212
+ strokeColor: $color.stroke.neutral-muted
213
213
  strokeWidth: 1px
214
214
  label:
215
215
  color: $color.fg.neutral
@@ -228,7 +228,7 @@ data:
228
228
  disabled:
229
229
  root:
230
230
  color: $color.bg.layer-default
231
- strokeColor: $color.stroke.neutral
231
+ strokeColor: $color.stroke.neutral-muted
232
232
  label:
233
233
  color: $color.fg.disabled
234
234
  icon:
@@ -244,7 +244,7 @@ data:
244
244
  enabled:
245
245
  root:
246
246
  color: $color.bg.layer-default
247
- strokeColor: $color.stroke.neutral
247
+ strokeColor: $color.stroke.neutral-muted
248
248
  strokeWidth: 1px
249
249
  label:
250
250
  color: $color.fg.brand
@@ -263,7 +263,7 @@ data:
263
263
  disabled:
264
264
  root:
265
265
  color: $color.bg.layer-default
266
- strokeColor: $color.stroke.neutral
266
+ strokeColor: $color.stroke.neutral-muted
267
267
  label:
268
268
  color: $color.fg.disabled
269
269
  icon:
package/components/action-sheet.yaml CHANGED
@@ -111,5 +111,5 @@ data:
111
111
  color: $color.fg.neutral-muted
112
112
  divider:
113
113
  strokeWidth: 1px
114
- strokeColor: $color.stroke.neutral
114
+ strokeColor: $color.stroke.neutral-muted
115
115
  marginX: $dimension.spacing-x.global-gutter
package/components/avatar.yaml CHANGED
@@ -33,7 +33,7 @@ data:
33
33
  enabled:
34
34
  root:
35
35
  cornerRadius: $radius.full
36
- strokeColor: $color.stroke.on-image
36
+ strokeColor: $color.stroke.neutral-subtle
37
37
  size=20:
38
38
  enabled:
39
39
  root:
package/components/badge.yaml CHANGED
@@ -88,7 +88,7 @@ data:
88
88
  tone=neutral, variant=outline:
89
89
  enabled:
90
90
  root:
91
- strokeColor: $color.stroke.neutral
91
+ strokeColor: $color.stroke.neutral-muted
92
92
  label:
93
93
  color: $color.fg.neutral-muted
94
94
 
@@ -107,7 +107,7 @@ data:
107
107
  tone=brand, variant=outline:
108
108
  enabled:
109
109
  root:
110
- strokeColor: $color.stroke.brand
110
+ strokeColor: $color.stroke.brand-weak
111
111
  label:
112
112
  color: $color.fg.brand
113
113
 
@@ -126,7 +126,7 @@ data:
126
126
  tone=informative, variant=outline:
127
127
  enabled:
128
128
  root:
129
- strokeColor: $color.stroke.informative
129
+ strokeColor: $color.stroke.informative-weak
130
130
  label:
131
131
  color: $color.fg.informative
132
132
 
@@ -145,7 +145,7 @@ data:
145
145
  tone=positive, variant=outline:
146
146
  enabled:
147
147
  root:
148
- strokeColor: $color.stroke.positive
148
+ strokeColor: $color.stroke.positive-weak
149
149
  label:
150
150
  color: $color.fg.positive
151
151
 
@@ -164,7 +164,7 @@ data:
164
164
  tone=warning, variant=outline:
165
165
  enabled:
166
166
  root:
167
- strokeColor: $color.stroke.warning
167
+ strokeColor: $color.stroke.warning-weak
168
168
  label:
169
169
  color: $color.fg.warning
170
170
 
@@ -183,6 +183,6 @@ data:
183
183
  tone=critical, variant=outline:
184
184
  enabled:
185
185
  root:
186
- strokeColor: $color.stroke.critical
186
+ strokeColor: $color.stroke.critical-weak
187
187
  label:
188
188
  color: $color.fg.critical
package/components/checkbox.yaml CHANGED
@@ -61,7 +61,7 @@ data:
61
61
  variant=square:
62
62
  enabled:
63
63
  control:
64
- strokeColor: $color.stroke.control
64
+ strokeColor: $color.stroke.neutral-weak
65
65
  strokeWidth: 1px
66
66
  enabled,selected:
67
67
  control:
@@ -79,7 +79,7 @@ data:
79
79
  disabled:
80
80
  control:
81
81
  color: $color.bg.disabled
82
- strokeColor: $color.stroke.neutral
82
+ strokeColor: $color.stroke.neutral-muted
83
83
  label:
84
84
  color: $color.fg.disabled
85
85
  icon:
package/components/chip.yaml CHANGED
@@ -9,44 +9,46 @@ data:
9
9
  slots:
10
10
  root:
11
11
  properties:
12
- colorDuration:
13
- type: duration
14
- colorTimingFunction:
15
- type: cubicBezier
12
+ color:
13
+ type: color
14
+ cornerRadius:
15
+ type: dimension
16
16
  strokeColor:
17
17
  type: color
18
18
  strokeWidth:
19
19
  type: dimension
20
- cornerRadius:
21
- type: dimension
22
20
  height:
23
21
  type: dimension
24
- gap:
25
- type: dimension
26
22
  paddingX:
27
23
  type: dimension
28
24
  minWidth:
29
25
  type: dimension
30
- color:
31
- type: color
26
+ colorDuration:
27
+ type: duration
28
+ colorTimingFunction:
29
+ type: cubicBezier
32
30
  opacity:
33
31
  type: number
34
32
  label:
35
33
  properties:
36
34
  color:
37
35
  type: color
38
- fontWeight:
39
- type: number
40
36
  fontSize:
41
37
  type: dimension
42
38
  lineHeight:
43
39
  type: dimension
40
+ fontWeight:
41
+ type: number
42
+ paddingX:
43
+ type: dimension
44
44
  prefixIcon:
45
45
  properties:
46
46
  color:
47
47
  type: color
48
48
  size:
49
49
  type: dimension
50
+ paddingLeft:
51
+ type: dimension
50
52
  prefixAvatar:
51
53
  properties:
52
54
  size:
@@ -57,6 +59,8 @@ data:
57
59
  type: color
58
60
  size:
59
61
  type: dimension
62
+ paddingRight:
63
+ type: dimension
60
64
  icon:
61
65
  properties:
62
66
  color:
@@ -97,14 +101,6 @@ data:
97
101
  pressed:
98
102
  root:
99
103
  color: $color.bg.neutral-weak-pressed
100
- label:
101
- color: $color.fg.neutral
102
- prefixIcon:
103
- color: $color.fg.neutral
104
- suffixIcon:
105
- color: $color.fg.neutral
106
- icon:
107
- color: $color.fg.neutral
108
104
  disabled:
109
105
  root:
110
106
  opacity: 0.5
@@ -122,14 +118,6 @@ data:
122
118
  selected, pressed:
123
119
  root:
124
120
  color: $color.bg.neutral-inverted-pressed
125
- label:
126
- color: $color.fg.neutral-inverted
127
- prefixIcon:
128
- color: $color.fg.neutral-inverted
129
- suffixIcon:
130
- color: $color.fg.neutral-inverted
131
- icon:
132
- color: $color.fg.neutral-inverted
133
121
  selected, disabled:
134
122
  root:
135
123
  opacity: 0.5
@@ -137,7 +125,7 @@ data:
137
125
  variant=outlineStrong:
138
126
  enabled:
139
127
  root:
140
- strokeColor: $color.stroke.neutral
128
+ strokeColor: $color.stroke.neutral-muted
141
129
  strokeWidth: 1px
142
130
  color: $color.bg.layer-default
143
131
  label:
@@ -150,17 +138,7 @@ data:
150
138
  color: $color.fg.neutral
151
139
  pressed:
152
140
  root:
153
- strokeColor: $color.stroke.neutral
154
- strokeWidth: 1px
155
141
  color: $color.bg.layer-default-pressed
156
- label:
157
- color: $color.fg.neutral
158
- prefixIcon:
159
- color: $color.fg.neutral
160
- suffixIcon:
161
- color: $color.fg.neutral
162
- icon:
163
- color: $color.fg.neutral
164
142
  disabled:
165
143
  root:
166
144
  opacity: 0.5
@@ -178,14 +156,6 @@ data:
178
156
  selected, pressed:
179
157
  root:
180
158
  color: $color.bg.neutral-inverted-pressed
181
- label:
182
- color: $color.fg.neutral-inverted
183
- prefixIcon:
184
- color: $color.fg.neutral-inverted
185
- suffixIcon:
186
- color: $color.fg.neutral-inverted
187
- icon:
188
- color: $color.fg.neutral-inverted
189
159
  selected, disabled:
190
160
  root:
191
161
  opacity: 0.5
@@ -193,7 +163,7 @@ data:
193
163
  variant=outlineWeak:
194
164
  enabled:
195
165
  root:
196
- strokeColor: $color.stroke.neutral
166
+ strokeColor: $color.stroke.neutral-muted
197
167
  strokeWidth: 1px
198
168
  color: $color.bg.layer-default
199
169
  label:
@@ -206,46 +176,17 @@ data:
206
176
  color: $color.fg.neutral
207
177
  pressed:
208
178
  root:
209
- strokeColor: $color.stroke.neutral
210
- strokeWidth: 1px
211
179
  color: $color.bg.layer-default-pressed
212
- label:
213
- color: $color.fg.neutral
214
- prefixIcon:
215
- color: $color.fg.neutral
216
- suffixIcon:
217
- color: $color.fg.neutral
218
- icon:
219
- color: $color.fg.neutral
220
180
  disabled:
221
181
  root:
222
182
  opacity: 0.5
223
183
  selected:
224
184
  root:
225
- strokeColor: $color.stroke.field-focused
226
- strokeWidth: 1px
185
+ strokeColor: $color.stroke.neutral-contrast
227
186
  color: $color.bg.neutral-weak
228
- label:
229
- color: $color.fg.neutral
230
- prefixIcon:
231
- color: $color.fg.neutral
232
- suffixIcon:
233
- color: $color.fg.neutral
234
- icon:
235
- color: $color.fg.neutral
236
187
  selected, pressed:
237
188
  root:
238
- strokeColor: $color.stroke.field-focused
239
- strokeWidth: 1px
240
189
  color: $color.bg.neutral-weak-pressed
241
- label:
242
- color: $color.fg.neutral
243
- prefixIcon:
244
- color: $color.fg.neutral
245
- suffixIcon:
246
- color: $color.fg.neutral
247
- icon:
248
- color: $color.fg.neutral
249
190
  selected, disabled:
250
191
  root:
251
192
  opacity: 0.5
package/components/control-chip.yaml CHANGED
@@ -68,7 +68,7 @@ data:
68
68
  base:
69
69
  enabled:
70
70
  root:
71
- strokeColor: $color.stroke.neutral
71
+ strokeColor: $color.stroke.neutral-muted
72
72
  strokeWidth: 1px
73
73
  cornerRadius: $radius.full
74
74
  label:
package/components/extended-action-sheet.yaml CHANGED
@@ -129,6 +129,6 @@ data:
129
129
  cornerRadius: $radius.r4
130
130
  divider:
131
131
  strokeBottomWidth: 1px
132
- strokeColor: $color.stroke.neutral
132
+ strokeColor: $color.stroke.neutral-muted
133
133
  footer:
134
134
  paddingTop: $dimension.x2_5
package/components/menu-sheet.yaml CHANGED
@@ -128,6 +128,6 @@ data:
128
128
  cornerRadius: $radius.r4
129
129
  divider:
130
130
  strokeBottomWidth: 1px
131
- strokeColor: $color.stroke.neutral
131
+ strokeColor: $color.stroke.neutral-muted
132
132
  footer:
133
133
  paddingTop: $dimension.x2_5
package/components/radio.yaml CHANGED
@@ -30,7 +30,7 @@ data:
30
30
  root:
31
31
  color: $color.bg.layer-default
32
32
  strokeWidth: 1px
33
- strokeColor: $color.stroke.control
33
+ strokeColor: $color.stroke.neutral-weak
34
34
  cornerRadius: $radius.full
35
35
  icon:
36
36
  cornerRadius: $radius.full
package/components/reaction-button.yaml CHANGED
@@ -88,7 +88,7 @@ data:
88
88
  selected:
89
89
  root:
90
90
  color: $color.bg.layer-default
91
- strokeColor: $color.stroke.brand
91
+ strokeColor: $color.stroke.brand-weak
92
92
  strokeWidth: 1px
93
93
  label:
94
94
  color: $color.fg.brand
package/components/select-box.yaml CHANGED
@@ -88,7 +88,7 @@ data:
88
88
  paddingY: $dimension.x5
89
89
  gap: $dimension.x2_5
90
90
  strokeWidth: 1px
91
- strokeColor: $color.stroke.neutral
91
+ strokeColor: $color.stroke.neutral-muted
92
92
  cornerRadius: $radius.r3
93
93
  content:
94
94
  gap: $dimension.x0_5
@@ -106,7 +106,7 @@ data:
106
106
  size: $dimension.x6
107
107
  color: $color.bg.layer-default
108
108
  strokeWidth: 1px
109
- strokeColor: $color.stroke.control
109
+ strokeColor: $color.stroke.neutral-weak
110
110
  cornerRadius: $radius.r1
111
111
  checkboxIcon:
112
112
  size: $dimension.x3_5
@@ -114,7 +114,7 @@ data:
114
114
  size: $dimension.x6
115
115
  color: $color.bg.layer-default
116
116
  strokeWidth: 1px
117
- strokeColor: $color.stroke.control
117
+ strokeColor: $color.stroke.neutral-weak
118
118
  cornerRadius: $radius.full
119
119
  radioIcon:
120
120
  size: $dimension.x2_5
@@ -131,7 +131,7 @@ data:
131
131
  enabled,selected:
132
132
  root:
133
133
  color: $color.bg.neutral-weak
134
- strokeColor: $color.stroke.control
134
+ strokeColor: $color.stroke.neutral-weak
135
135
  checkboxControl:
136
136
  color: $color.bg.brand-solid
137
137
  strokeWidth: 0
package/components/tablist.yaml CHANGED
@@ -36,7 +36,7 @@ data:
36
36
  root:
37
37
  color: $color.bg.layer-default
38
38
  strokeBottomWidth: 1px
39
- strokeColor: $color.stroke.neutral
39
+ strokeColor: $color.stroke.neutral-muted
40
40
  indicator:
41
41
  height: 2px
42
42
  color: $color.fg.neutral
package/components/text-field.yaml CHANGED
@@ -156,7 +156,7 @@ data:
156
156
  field:
157
157
  color: $color.bg.layer-default
158
158
  strokeWidth: 1px
159
- strokeColor: $color.stroke.field
159
+ strokeColor: $color.stroke.neutral-weak
160
160
  value:
161
161
  color: $color.fg.neutral
162
162
  placeholder:
@@ -183,15 +183,15 @@ data:
183
183
  fontWeight: $font-weight.regular
184
184
  focused:
185
185
  field:
186
- strokeColor: $color.stroke.field-focused
186
+ strokeColor: $color.stroke.neutral-contrast
187
187
  invalid:
188
188
  field:
189
189
  color: $color.bg.critical-weak
190
- strokeColor: $color.stroke.critical
190
+ strokeColor: $color.stroke.critical-weak
191
191
  invalid,focused:
192
192
  field:
193
193
  color: $color.bg.layer-default
194
- strokeColor: $color.stroke.field
194
+ strokeColor: $color.stroke.neutral-weak
195
195
  readonly:
196
196
  field:
197
197
  color: $color.bg.disabled
package/components/top-navigation.yaml CHANGED
@@ -83,7 +83,7 @@ data:
83
83
  divider=true:
84
84
  enabled:
85
85
  root:
86
- strokeColor: $color.stroke.neutral-muted
86
+ strokeColor: $color.stroke.neutral-subtle
87
87
  strokeWidth: 1px
88
88
  titleLayout=titleOnly:
89
89
  enabled:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/rootage-artifacts",
3
- "version": "0.0.6",
3
+ "version": "0.1.1",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",