@seed-design/rootage-artifacts 0.1.1 → 0.1.2

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 (10) hide show
  1. package/components/checkbox.yaml +3 -79
  2. package/components/checkmark.yaml +104 -0
  3. package/components/chip-tab.yaml +40 -5
  4. package/components/chip-tablist.yaml +6 -1
  5. package/components/link-content.yaml +2 -1
  6. package/components/list-item.yaml +127 -0
  7. package/components/radio.yaml +34 -49
  8. package/components/radiomark.yaml +78 -0
  9. package/components/select-box.yaml +0 -69
  10. package/package.json +1 -1
package/components/checkbox.yaml CHANGED
@@ -48,6 +48,9 @@ data:
48
48
  color: $color.fg.neutral
49
49
  root:
50
50
  gap: $dimension.x2
51
+ disabled:
52
+ label:
53
+ color: $color.fg.disabled
51
54
 
52
55
  weight=default:
53
56
  enabled:
@@ -58,62 +61,6 @@ data:
58
61
  label:
59
62
  fontWeight: $font-weight.bold
60
63
 
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
- 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
- label:
89
- color: $color.fg.disabled
90
- icon:
91
- color: $color.fg.disabled
92
-
93
- variant=ghost:
94
- 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
- label:
108
- color: $color.fg.disabled
109
- icon:
110
- color: $color.fg.disabled
111
- disabled,selected:
112
- label:
113
- color: $color.fg.disabled
114
- icon:
115
- color: $color.fg.disabled
116
-
117
64
  size=medium:
118
65
  enabled:
119
66
  root:
@@ -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,104 @@
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
+ strokeColor: $color.stroke.neutral-weak
33
+ strokeWidth: 1px
34
+ enabled,selected:
35
+ root:
36
+ color: $color.bg.brand-solid
37
+ icon:
38
+ color: $color.palette.static-white
39
+ pressed:
40
+ root:
41
+ color: $color.bg.layer-default-pressed
42
+ pressed,selected:
43
+ root:
44
+ color: $color.bg.brand-solid-pressed
45
+ icon:
46
+ color: $color.palette.static-white
47
+ disabled:
48
+ root:
49
+ color: $color.bg.disabled
50
+ strokeColor: $color.stroke.neutral-muted
51
+ icon:
52
+ color: $color.fg.disabled
53
+ disabled,selected:
54
+ icon:
55
+ color: $color.fg.disabled
56
+
57
+ variant=ghost:
58
+ enabled:
59
+ icon:
60
+ color: $color.fg.placeholder
61
+ enabled,selected:
62
+ icon:
63
+ color: $color.fg.brand
64
+ pressed:
65
+ root:
66
+ color: $color.bg.layer-default-pressed
67
+ pressed,selected:
68
+ root:
69
+ color: $color.palette.carrot-200
70
+ disabled:
71
+ icon:
72
+ color: $color.fg.disabled
73
+ disabled,selected:
74
+ icon:
75
+ color: $color.fg.disabled
76
+
77
+ size=medium:
78
+ enabled:
79
+ root:
80
+ size: $dimension.x5
81
+ cornerRadius: $radius.r1
82
+
83
+ size=large:
84
+ enabled:
85
+ root:
86
+ size: $dimension.x6
87
+ cornerRadius: $radius.r1
88
+
89
+ variant=square,size=medium:
90
+ enabled:
91
+ icon:
92
+ size: 12px
93
+ variant=square,size=large:
94
+ enabled:
95
+ icon:
96
+ size: 14px
97
+ variant=ghost,size=medium:
98
+ enabled:
99
+ icon:
100
+ size: 14px
101
+ variant=ghost,size=large:
102
+ enabled:
103
+ icon:
104
+ 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/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=default:
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=stronger:
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,78 @@
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
+ color: $color.bg.layer-default
35
+ strokeWidth: 1px
36
+ strokeColor: $color.stroke.neutral-weak
37
+ cornerRadius: $radius.full
38
+ icon:
39
+ cornerRadius: $radius.full
40
+ enabled,pressed:
41
+ root:
42
+ color: $color.bg.layer-default-pressed
43
+ enabled,selected:
44
+ root:
45
+ color: $color.bg.brand-solid
46
+ strokeWidth: 0px
47
+ icon:
48
+ color: $color.palette.static-white
49
+ enabled,selected,pressed:
50
+ root:
51
+ color: $color.bg.brand-solid-pressed
52
+ disabled:
53
+ root:
54
+ color: $color.palette.gray-300
55
+ disabled,selected:
56
+ root:
57
+ strokeColor: $color.palette.gray-300
58
+ icon:
59
+ color: $color.palette.gray-300
60
+
61
+ size=medium:
62
+ enabled:
63
+ root:
64
+ size: $dimension.x5
65
+ icon:
66
+ size: $dimension.x2
67
+ disabled:
68
+ icon:
69
+ size: $dimension.x2_5
70
+ size=large:
71
+ enabled:
72
+ root:
73
+ size: $dimension.x6
74
+ icon:
75
+ size: $dimension.x2_5
76
+ disabled:
77
+ icon:
78
+ 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/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.2",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",