@seed-design/rootage-artifacts 0.1.3 → 1.0.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 (11) hide show
  1. package/color.yaml +56 -24
  2. package/components/help-bubble.yaml +5 -15
  3. package/components/list-header.yaml +43 -0
  4. package/components/manner-temp-badge.yaml +25 -1
  5. package/components/manner-temp.yaml +17 -7
  6. package/components/segmented-control-item.yaml +31 -8
  7. package/components/segmented-control.yaml +7 -1
  8. package/components/snackbar.yaml +15 -4
  9. package/components/switch-mark.yaml +120 -0
  10. package/components/switch.yaml +4 -104
  11. 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-09-03
5
+ lastUpdated: 25-09-15
6
6
  data:
7
7
  collection: color
8
8
  tokens:
@@ -656,49 +656,81 @@ data:
656
656
  theme-dark: $color.palette.yellow-700
657
657
  $color.manner-temp.l1.text:
658
658
  values:
659
- theme-light: "#62666a"
660
- theme-dark: "#b1b5b9"
659
+ theme-light: "#757b85"
660
+ theme-dark: "#b8b8b9"
661
661
  $color.manner-temp.l2.text:
662
662
  values:
663
- theme-light: "#2592f7"
664
- theme-dark: "#7cbaf4"
663
+ theme-light: "#ab863f"
664
+ theme-dark: "#f5db97"
665
665
  $color.manner-temp.l3.text:
666
666
  values:
667
- theme-light: "#0099c8"
668
- theme-dark: "#47c3eb"
667
+ theme-light: "#e08a00"
668
+ theme-dark: "#fdda65"
669
669
  $color.manner-temp.l4.text:
670
670
  values:
671
- theme-light: "#03a07e"
672
- theme-dark: "#33cc94"
671
+ theme-light: "#f57e00"
672
+ theme-dark: "#fbbe55"
673
673
  $color.manner-temp.l4.bg:
674
674
  values:
675
- theme-light: "#ebf9f4"
676
- theme-dark: "#162822"
675
+ theme-light: "#fff3e5"
676
+ theme-dark: "#372301"
677
677
  $color.manner-temp.l5.text:
678
678
  values:
679
- theme-light: "#d28500"
680
- theme-dark: "#ffa100"
679
+ theme-light: "#ff7300"
680
+ theme-dark: "#faac4b"
681
681
  $color.manner-temp.l6.text:
682
682
  values:
683
- theme-light: "#f06000"
684
- theme-dark: "#ff9147"
683
+ theme-light: "#ff6600"
684
+ theme-dark: "#fc9855"
685
685
  $color.manner-temp.l1.bg:
686
686
  values:
687
- theme-light: "#eff0f1"
688
- theme-dark: "#222226"
687
+ theme-light: "#f1f2f3"
688
+ theme-dark: "#292929"
689
689
  $color.manner-temp.l2.bg:
690
690
  values:
691
- theme-light: "#e7f2fc"
692
- theme-dark: "#16212b"
691
+ theme-light: "#f8f4ec"
692
+ theme-dark: "#332605"
693
693
  $color.manner-temp.l3.bg:
694
694
  values:
695
- theme-light: "#e3f6fc"
696
- theme-dark: "#12262c"
695
+ theme-light: "#fff5e5"
696
+ theme-dark: "#372b01"
697
697
  $color.manner-temp.l5.bg:
698
698
  values:
699
- theme-light: "#fff5e5"
700
- theme-dark: "#2e2312"
699
+ theme-light: "#fff1e5"
700
+ theme-dark: "#371f01"
701
701
  $color.manner-temp.l6.bg:
702
702
  values:
703
703
  theme-light: "#fff0e5"
704
- theme-dark: "#2e1d12"
704
+ theme-dark: "#351b03"
705
+ $color.manner-temp.l7.text:
706
+ values:
707
+ theme-light: "#ff5100"
708
+ theme-dark: "#f97a25"
709
+ $color.manner-temp.l7.bg:
710
+ values:
711
+ theme-light: "#ffefe5"
712
+ theme-dark: "#371701"
713
+ $color.manner-temp.l8.text:
714
+ values:
715
+ theme-light: "#ff3300"
716
+ theme-dark: "#fe6a34"
717
+ $color.manner-temp.l9.text:
718
+ values:
719
+ theme-light: "#f30a02"
720
+ theme-dark: "#fe6a5d"
721
+ $color.manner-temp.l8.bg:
722
+ values:
723
+ theme-light: "#ffeee5"
724
+ theme-dark: "#380f00"
725
+ $color.manner-temp.l9.bg:
726
+ values:
727
+ theme-light: "#ffeceb"
728
+ theme-dark: "#380500"
729
+ $color.manner-temp.l10.text:
730
+ values:
731
+ theme-light: "#cb0123"
732
+ theme-dark: "#fb6f82"
733
+ $color.manner-temp.l10.bg:
734
+ values:
735
+ theme-light: "#ffebee"
736
+ theme-dark: "#34040a"
package/components/help-bubble.yaml CHANGED
@@ -16,8 +16,6 @@ data:
16
16
  type: dimension
17
17
  paddingY:
18
18
  type: dimension
19
- shadow:
20
- type: shadow
21
19
  enterScale:
22
20
  type: number
23
21
  enterOpacity:
@@ -86,18 +84,10 @@ data:
86
84
  base:
87
85
  enabled:
88
86
  root:
89
- color: $color.bg.neutral-solid
87
+ color: $color.bg.neutral-inverted
90
88
  cornerRadius: $radius.r3
91
89
  paddingX: $dimension.x3
92
90
  paddingY: $dimension.x2_5
93
- shadow:
94
- type: shadow
95
- value:
96
- - color: "#00000029"
97
- blur: 24px
98
- offsetX: 0px
99
- offsetY: 8px
100
- spread: 0px
101
91
  enterScale: 0.9
102
92
  enterOpacity: 0
103
93
  enterDuration: $duration.d4
@@ -107,24 +97,24 @@ data:
107
97
  exitDuration: $duration.d4
108
98
  exitTimingFunction: $timing-function.easing
109
99
  arrow:
110
- color: $color.bg.neutral-solid
100
+ color: $color.bg.neutral-inverted
111
101
  width: 12px
112
102
  height: 8px
113
103
  cornerRadius: 2px
114
104
  gutter: 4px
115
105
  padding: 14px
116
106
  title:
117
- color: $color.palette.static-white
107
+ color: $color.fg.neutral-inverted
118
108
  fontSize: $font-size.t3
119
109
  fontWeight: $font-weight.bold
120
110
  lineHeight: $line-height.t3
121
111
  description:
122
- color: $color.palette.static-white
112
+ color: $color.fg.neutral-inverted
123
113
  fontSize: $font-size.t3
124
114
  fontWeight: $font-weight.regular
125
115
  lineHeight: $line-height.t3
126
116
  closeButton:
127
- color: $color.palette.static-white
117
+ color: $color.fg.neutral-inverted
128
118
  fromRight: 12px
129
119
  fromTop: 12px
130
120
  size: 14px
package/components/list-header.yaml ADDED
@@ -0,0 +1,43 @@
1
+ # yaml-language-server: $schema=./schema.json
2
+ kind: ComponentSpec
3
+ metadata:
4
+ id: list-header
5
+ name: List Header
6
+ data:
7
+ schema:
8
+ slots:
9
+ root:
10
+ properties:
11
+ paddingX:
12
+ type: dimension
13
+ paddingY:
14
+ type: dimension
15
+ gap:
16
+ type: dimension
17
+ fontSize:
18
+ type: dimension
19
+ lineHeight:
20
+ type: dimension
21
+ fontWeight:
22
+ type: number
23
+ color:
24
+ type: color
25
+ definitions:
26
+ base:
27
+ enabled:
28
+ root:
29
+ paddingX: $dimension.spacing-x.global-gutter
30
+ paddingY: $dimension.x2
31
+ gap: $dimension.x2_5
32
+ fontSize: $font-size.t4
33
+ lineHeight: $line-height.t4
34
+ variant=mediumWeak:
35
+ enabled:
36
+ root:
37
+ fontWeight: $font-weight.medium
38
+ color: $color.fg.neutral-subtle
39
+ variant=boldSolid:
40
+ enabled:
41
+ root:
42
+ fontWeight: $font-weight.bold
43
+ color: $color.fg.neutral
package/components/manner-temp-badge.yaml CHANGED
@@ -32,7 +32,7 @@ data:
32
32
  base:
33
33
  enabled:
34
34
  root:
35
- minHeight: 20px
35
+ minHeight: $dimension.x5
36
36
  paddingY: $dimension.x0_5
37
37
  paddingX: $dimension.x1_5
38
38
  cornerRadius: $radius.full
@@ -76,3 +76,27 @@ data:
76
76
  color: $color.manner-temp.l6.bg
77
77
  label:
78
78
  color: $color.manner-temp.l6.text
79
+ level=l7:
80
+ enabled:
81
+ root:
82
+ color: $color.manner-temp.l7.bg
83
+ label:
84
+ color: $color.manner-temp.l7.text
85
+ level=l8:
86
+ enabled:
87
+ root:
88
+ color: $color.manner-temp.l8.bg
89
+ label:
90
+ color: $color.manner-temp.l8.text
91
+ level=l9:
92
+ enabled:
93
+ root:
94
+ color: $color.manner-temp.l9.bg
95
+ label:
96
+ color: $color.manner-temp.l9.text
97
+ level=l10:
98
+ enabled:
99
+ root:
100
+ color: $color.manner-temp.l10.bg
101
+ label:
102
+ color: $color.manner-temp.l10.text
package/components/manner-temp.yaml CHANGED
@@ -6,10 +6,6 @@ metadata:
6
6
  data:
7
7
  schema:
8
8
  slots:
9
- root:
10
- properties:
11
- gap:
12
- type: dimension
13
9
  label:
14
10
  properties:
15
11
  fontSize:
@@ -27,14 +23,12 @@ data:
27
23
  definitions:
28
24
  base:
29
25
  enabled:
30
- root:
31
- gap: $dimension.x1
32
26
  label:
33
27
  fontSize: $font-size.t5
34
28
  lineHeight: $line-height.t5
35
29
  fontWeight: $font-weight.bold
36
30
  emote:
37
- size: $dimension.x6
31
+ size: $dimension.x8
38
32
  level=l1:
39
33
  enabled:
40
34
  label:
@@ -59,3 +53,19 @@ data:
59
53
  enabled:
60
54
  label:
61
55
  color: $color.manner-temp.l6.text
56
+ level=l7:
57
+ enabled:
58
+ label:
59
+ color: $color.manner-temp.l7.text
60
+ level=l8:
61
+ enabled:
62
+ label:
63
+ color: $color.manner-temp.l8.text
64
+ level=l9:
65
+ enabled:
66
+ label:
67
+ color: $color.manner-temp.l9.text
68
+ level=l10:
69
+ enabled:
70
+ label:
71
+ color: $color.manner-temp.l10.text
package/components/segmented-control-item.yaml CHANGED
@@ -9,16 +9,24 @@ data:
9
9
  slots:
10
10
  root:
11
11
  properties:
12
- height:
12
+ minWidth:
13
+ type: dimension
14
+ minHeight:
13
15
  type: dimension
14
16
  cornerRadius:
15
17
  type: dimension
16
18
  paddingX:
17
19
  type: dimension
18
- minWidth:
20
+ paddingY:
21
+ type: dimension
22
+ gap:
19
23
  type: dimension
20
24
  color:
21
25
  type: color
26
+ colorDuration:
27
+ type: duration
28
+ colorTimingFunction:
29
+ type: cubicBezier
22
30
  label:
23
31
  properties:
24
32
  fontSize:
@@ -29,26 +37,41 @@ data:
29
37
  type: number
30
38
  color:
31
39
  type: color
40
+ colorDuration:
41
+ type: duration
42
+ colorTimingFunction:
43
+ type: cubicBezier
32
44
  definitions:
33
45
  base:
34
46
  enabled:
35
47
  root:
36
- height: $dimension.x8
37
- cornerRadius: $radius.full
38
- paddingX: $dimension.x4
39
48
  minWidth: 86px
49
+ minHeight: 34px
50
+ paddingX: $dimension.x6
51
+ paddingY: $dimension.x1_5
52
+ cornerRadius: $radius.full
53
+ gap: $dimension.x1_5
54
+ colorDuration: $duration.d4
55
+ colorTimingFunction: $timing-function.easing
40
56
  label:
41
57
  fontSize: $font-size.t5
42
58
  lineHeight: $line-height.t5
43
- fontWeight: $font-weight.medium
44
- color: $color.fg.neutral-muted
59
+ fontWeight: $font-weight.bold
60
+ color: $color.fg.neutral-subtle
61
+ colorDuration: $duration.d4
62
+ colorTimingFunction: $timing-function.easing
45
63
  pressed:
46
64
  root:
47
65
  color: $color.bg.neutral-weak-pressed
48
66
  selected:
49
67
  label:
50
- fontWeight: $font-weight.bold
51
68
  color: $color.fg.neutral
69
+ selected,pressed:
70
+ root:
71
+ color: $color.palette.gray-100
52
72
  disabled:
53
73
  label:
54
74
  color: $color.fg.disabled
75
+ disabled,selected:
76
+ root:
77
+ color: $color.bg.disabled
package/components/segmented-control.yaml CHANGED
@@ -21,6 +21,10 @@ data:
21
21
  type: color
22
22
  cornerRadius:
23
23
  type: dimension
24
+ strokeWidth:
25
+ type: dimension
26
+ strokeColor:
27
+ type: color
24
28
  shadow:
25
29
  type: shadow
26
30
  transformDuration:
@@ -35,8 +39,10 @@ data:
35
39
  cornerRadius: $radius.full
36
40
  color: $color.bg.neutral-weak
37
41
  indicator:
38
- color: $color.bg.layer-default
42
+ color: $color.palette.gray-00
39
43
  cornerRadius: $radius.full
44
+ strokeWidth: 1px
45
+ strokeColor: $color.stroke.neutral-muted
40
46
  shadow:
41
47
  type: shadow
42
48
  value:
package/components/snackbar.yaml CHANGED
@@ -48,6 +48,12 @@ data:
48
48
  type: duration
49
49
  exitTimingFunction:
50
50
  type: cubicBezier
51
+ content:
52
+ properties:
53
+ paddingX:
54
+ type: dimension
55
+ gap:
56
+ type: dimension
51
57
  message:
52
58
  properties:
53
59
  color:
@@ -64,6 +70,8 @@ data:
64
70
  type: dimension
65
71
  color:
66
72
  type: color
73
+ paddingRight:
74
+ type: dimension
67
75
  actionButton:
68
76
  properties:
69
77
  targetPaddingX:
@@ -88,13 +96,12 @@ data:
88
96
  offsetDuration: $duration.d4
89
97
  offsetTimingFunction: $timing-function.easing
90
98
  root:
91
- color: $color.bg.neutral-solid
99
+ color: $color.bg.neutral-inverted
92
100
  cornerRadius: $radius.r2
93
101
  minHeight: 44px
94
102
  maxWidth: 560px
95
- paddingX: $dimension.x4
103
+ paddingX: $dimension.x2_5
96
104
  paddingY: $dimension.x2_5
97
- gap: $dimension.x2
98
105
  enterOpacity: 0
99
106
  enterScale: 0.8
100
107
  enterDuration: $duration.d3
@@ -103,13 +110,17 @@ data:
103
110
  exitScale: 0.8
104
111
  exitDuration: $duration.d2
105
112
  exitTimingFunction: $timing-function.exit
113
+ content:
114
+ paddingX: $dimension.x1_5
115
+ gap: $dimension.x2_5
106
116
  message:
107
- color: $color.palette.static-white
117
+ color: $color.fg.neutral-inverted
108
118
  fontSize: $font-size.t4
109
119
  lineHeight: $line-height.t4
110
120
  fontWeight: $font-weight.regular
111
121
  prefixIcon:
112
122
  size: 24px
123
+ paddingRight: $dimension.x0_5
113
124
  actionButton:
114
125
  targetPaddingX: $dimension.x2
115
126
  targetMinHeight: 44px
package/components/switch-mark.yaml ADDED
@@ -0,0 +1,120 @@
1
+ # yaml-language-server: $schema=./schema.json
2
+ # parts: root, thumb
3
+ kind: ComponentSpec
4
+ metadata:
5
+ id: switch-mark
6
+ name: Switch Mark
7
+ data:
8
+ schema:
9
+ slots:
10
+ root:
11
+ properties:
12
+ color:
13
+ type: color
14
+ cornerRadius:
15
+ type: dimension
16
+ opacity:
17
+ type: number
18
+ height:
19
+ type: dimension
20
+ width:
21
+ type: dimension
22
+ paddingX:
23
+ type: dimension
24
+ paddingY:
25
+ type: dimension
26
+ thumb:
27
+ properties:
28
+ color:
29
+ type: color
30
+ cornerRadius:
31
+ type: dimension
32
+ height:
33
+ type: dimension
34
+ width:
35
+ type: dimension
36
+ shadow:
37
+ type: shadow
38
+ definitions:
39
+ base:
40
+ enabled:
41
+ root:
42
+ color: $color.palette.gray-600
43
+ cornerRadius: $radius.full
44
+ thumb:
45
+ cornerRadius: $radius.full
46
+ disabled:
47
+ root:
48
+ opacity: 0.38
49
+
50
+ tone=brand:
51
+ enabled:
52
+ thumb:
53
+ color: $color.palette.static-white
54
+ enabled,selected:
55
+ root:
56
+ color: $color.bg.brand-solid
57
+ tone=neutral:
58
+ enabled:
59
+ thumb:
60
+ color: $color.fg.neutral-inverted
61
+ enabled,selected:
62
+ root:
63
+ color: $color.bg.neutral-inverted
64
+
65
+ size=32:
66
+ enabled:
67
+ root:
68
+ height: 32px
69
+ width: 52px
70
+ paddingX: 3px
71
+ paddingY: 3px
72
+ thumb:
73
+ height: 26px
74
+ width: 26px
75
+ shadow:
76
+ type: shadow
77
+ value:
78
+ - offsetX: 0px
79
+ offsetY: 3px
80
+ blur: 8px
81
+ spread: 0px
82
+ color: "#00000026"
83
+ - offsetX: 0px
84
+ offsetY: 1px
85
+ blur: 3px
86
+ spread: 0px
87
+ color: "#0000000f"
88
+ size=24:
89
+ enabled:
90
+ root:
91
+ height: 24px
92
+ width: 38px
93
+ paddingX: 2px
94
+ paddingY: 2px
95
+ thumb:
96
+ height: 20px
97
+ width: 20px
98
+ shadow:
99
+ type: shadow
100
+ value:
101
+ - offsetX: 0px
102
+ offsetY: 3px
103
+ blur: 8px
104
+ spread: 0px
105
+ color: "#00000026"
106
+ - offsetX: 0px
107
+ offsetY: 1px
108
+ blur: 3px
109
+ spread: 0px
110
+ color: "#0000000f"
111
+ size=16:
112
+ enabled:
113
+ root:
114
+ height: 16px
115
+ width: 26px
116
+ paddingX: 2px
117
+ paddingY: 2px
118
+ thumb:
119
+ height: 12px
120
+ width: 12px
package/components/switch.yaml CHANGED
@@ -1,5 +1,5 @@
1
1
  # yaml-language-server: $schema=./schema.json
2
- # parts: root, control, thumb
2
+ # parts: root, label
3
3
  kind: ComponentSpec
4
4
  metadata:
5
5
  id: switch
@@ -13,34 +13,6 @@ data:
13
13
  type: dimension
14
14
  gap:
15
15
  type: dimension
16
- control:
17
- properties:
18
- color:
19
- type: color
20
- cornerRadius:
21
- type: dimension
22
- opacity:
23
- type: number
24
- height:
25
- type: dimension
26
- width:
27
- type: dimension
28
- paddingX:
29
- type: dimension
30
- paddingY:
31
- type: dimension
32
- thumb:
33
- properties:
34
- color:
35
- type: color
36
- cornerRadius:
37
- type: dimension
38
- height:
39
- type: dimension
40
- width:
41
- type: dimension
42
- shadow:
43
- type: shadow
44
16
  label:
45
17
  properties:
46
18
  color:
@@ -54,106 +26,34 @@ data:
54
26
  definitions:
55
27
  base:
56
28
  enabled:
57
- control:
58
- color: $color.palette.gray-600
59
- cornerRadius: $radius.full
60
- thumb:
61
- cornerRadius: $radius.full
62
29
  label:
63
30
  color: $color.fg.neutral
64
31
  fontWeight: $font-weight.medium
65
32
  disabled:
66
- control:
67
- opacity: 0.38
68
33
  label:
69
34
  color: $color.fg.disabled
70
35
 
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
-
86
36
  size=32:
87
37
  enabled:
88
38
  root:
89
- height: 32px
39
+ height: $dimension.x8
90
40
  gap: $dimension.x2_5
91
- control:
92
- height: 32px
93
- width: 52px
94
- paddingX: 3px
95
- paddingY: 3px
96
- thumb:
97
- height: 26px
98
- width: 26px
99
- shadow:
100
- type: shadow
101
- value:
102
- - offsetX: 0px
103
- offsetY: 3px
104
- blur: 8px
105
- spread: 0px
106
- color: "#00000026"
107
- - offsetX: 0px
108
- offsetY: 1px
109
- blur: 3px
110
- spread: 0px
111
- color: "#0000000f"
112
41
  label:
113
42
  fontSize: $font-size.t5
114
43
  lineHeight: $line-height.t5
115
44
  size=24:
116
45
  enabled:
117
46
  root:
118
- height: 24px
47
+ height: $dimension.x6
119
48
  gap: $dimension.x2
120
- control:
121
- height: 24px
122
- width: 38px
123
- paddingX: 2px
124
- paddingY: 2px
125
- thumb:
126
- height: 20px
127
- width: 20px
128
- shadow:
129
- type: shadow
130
- value:
131
- - offsetX: 0px
132
- offsetY: 3px
133
- blur: 8px
134
- spread: 0px
135
- color: "#00000026"
136
- - offsetX: 0px
137
- offsetY: 1px
138
- blur: 3px
139
- spread: 0px
140
- color: "#0000000f"
141
49
  label:
142
50
  fontSize: $font-size.t4
143
51
  lineHeight: $line-height.t4
144
52
  size=16:
145
53
  enabled:
146
54
  root:
147
- height: 24px
55
+ height: $dimension.x6
148
56
  gap: $dimension.x1_5
149
- control:
150
- height: 16px
151
- width: 26px
152
- paddingX: 2px
153
- paddingY: 2px
154
- thumb:
155
- height: 12px
156
- width: 12px
157
57
  label:
158
58
  fontSize: $font-size.t3
159
59
  lineHeight: $line-height.t3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/rootage-artifacts",
3
- "version": "0.1.3",
3
+ "version": "1.0.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",