@seed-design/rootage-artifacts 0.0.5 → 0.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 (20) 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 +6 -6
  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/snackbar.yaml +3 -0
  15. package/components/tablist.yaml +1 -1
  16. package/components/text-field.yaml +4 -4
  17. package/components/top-navigation.yaml +1 -1
  18. package/font-size.yaml +21 -0
  19. package/line-height.yaml +30 -0
  20. 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
@@ -137,7 +137,7 @@ data:
137
137
  variant=outlineStrong:
138
138
  enabled:
139
139
  root:
140
- strokeColor: $color.stroke.neutral
140
+ strokeColor: $color.stroke.neutral-muted
141
141
  strokeWidth: 1px
142
142
  color: $color.bg.layer-default
143
143
  label:
@@ -150,7 +150,7 @@ data:
150
150
  color: $color.fg.neutral
151
151
  pressed:
152
152
  root:
153
- strokeColor: $color.stroke.neutral
153
+ strokeColor: $color.stroke.neutral-muted
154
154
  strokeWidth: 1px
155
155
  color: $color.bg.layer-default-pressed
156
156
  label:
@@ -193,7 +193,7 @@ data:
193
193
  variant=outlineWeak:
194
194
  enabled:
195
195
  root:
196
- strokeColor: $color.stroke.neutral
196
+ strokeColor: $color.stroke.neutral-muted
197
197
  strokeWidth: 1px
198
198
  color: $color.bg.layer-default
199
199
  label:
@@ -206,7 +206,7 @@ data:
206
206
  color: $color.fg.neutral
207
207
  pressed:
208
208
  root:
209
- strokeColor: $color.stroke.neutral
209
+ strokeColor: $color.stroke.neutral-muted
210
210
  strokeWidth: 1px
211
211
  color: $color.bg.layer-default-pressed
212
212
  label:
@@ -222,7 +222,7 @@ data:
222
222
  opacity: 0.5
223
223
  selected:
224
224
  root:
225
- strokeColor: $color.stroke.field-focused
225
+ strokeColor: $color.stroke.neutral-contrast
226
226
  strokeWidth: 1px
227
227
  color: $color.bg.neutral-weak
228
228
  label:
@@ -235,7 +235,7 @@ data:
235
235
  color: $color.fg.neutral
236
236
  selected, pressed:
237
237
  root:
238
- strokeColor: $color.stroke.field-focused
238
+ strokeColor: $color.stroke.neutral-contrast
239
239
  strokeWidth: 1px
240
240
  color: $color.bg.neutral-weak-pressed
241
241
  label:
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/snackbar.yaml CHANGED
@@ -24,6 +24,8 @@ data:
24
24
  type: dimension
25
25
  minHeight:
26
26
  type: dimension
27
+ maxWidth:
28
+ type: dimension
27
29
  paddingX:
28
30
  type: dimension
29
31
  paddingY:
@@ -89,6 +91,7 @@ data:
89
91
  color: $color.bg.neutral-solid
90
92
  cornerRadius: $radius.r2
91
93
  minHeight: 44px
94
+ maxWidth: 560px
92
95
  paddingX: $dimension.x4
93
96
  paddingY: $dimension.x2_5
94
97
  gap: $dimension.x2
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/font-size.yaml CHANGED
@@ -35,12 +35,33 @@ data:
35
35
  $font-size.t10:
36
36
  values:
37
37
  default: 1.625rem # 26px ÷ 16
38
+ $font-size.t1-static:
39
+ values:
40
+ default: 11px
38
41
  $font-size.t2-static:
39
42
  values:
40
43
  default: 12px
44
+ $font-size.t3-static:
45
+ values:
46
+ default: 13px
47
+ $font-size.t4-static:
48
+ values:
49
+ default: 14px
41
50
  $font-size.t5-static:
42
51
  values:
43
52
  default: 16px
44
53
  $font-size.t6-static:
45
54
  values:
46
55
  default: 18px
56
+ $font-size.t7-static:
57
+ values:
58
+ default: 20px
59
+ $font-size.t8-static:
60
+ values:
61
+ default: 22px
62
+ $font-size.t9-static:
63
+ values:
64
+ default: 24px
65
+ $font-size.t10-static:
66
+ values:
67
+ default: 26px
package/line-height.yaml CHANGED
@@ -35,3 +35,33 @@ data:
35
35
  $line-height.t10:
36
36
  values:
37
37
  default: 2.1875rem # 35px ÷ 16
38
+ $line-height.t1-static:
39
+ values:
40
+ default: 15px
41
+ $line-height.t2-static:
42
+ values:
43
+ default: 16px
44
+ $line-height.t3-static:
45
+ values:
46
+ default: 18px
47
+ $line-height.t4-static:
48
+ values:
49
+ default: 19px
50
+ $line-height.t5-static:
51
+ values:
52
+ default: 22px
53
+ $line-height.t6-static:
54
+ values:
55
+ default: 24px
56
+ $line-height.t7-static:
57
+ values:
58
+ default: 27px
59
+ $line-height.t8-static:
60
+ values:
61
+ default: 30px
62
+ $line-height.t9-static:
63
+ values:
64
+ default: 32px
65
+ $line-height.t10-static:
66
+ values:
67
+ default: 35px
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/rootage-artifacts",
3
- "version": "0.0.5",
3
+ "version": "0.1.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",