@seed-design/rootage-artifacts 0.0.0 → 0.0.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 (63) hide show
  1. package/README.md +10 -0
  2. package/color.yaml +438 -366
  3. package/components/action-button.yaml +415 -205
  4. package/components/action-chip.yaml +139 -67
  5. package/components/action-sheet-close-button.yaml +45 -0
  6. package/components/action-sheet-item.yaml +52 -0
  7. package/components/action-sheet.yaml +115 -0
  8. package/components/avatar-stack.yaml +74 -0
  9. package/components/avatar.yaml +110 -47
  10. package/components/badge.yaml +153 -130
  11. package/components/bottom-sheet-close-button.yaml +38 -0
  12. package/components/bottom-sheet.yaml +143 -0
  13. package/components/callout.yaml +169 -129
  14. package/components/checkbox.yaml +139 -116
  15. package/components/chip-tab.yaml +82 -59
  16. package/components/chip-tablist.yaml +20 -11
  17. package/components/chip.yaml +314 -0
  18. package/components/contextual-floating-button.yaml +155 -0
  19. package/components/control-chip.yaml +157 -88
  20. package/components/dialog.yaml +119 -18
  21. package/components/divider.yaml +17 -0
  22. package/components/extended-action-sheet-close-button.yaml +50 -0
  23. package/components/extended-action-sheet-item.yaml +67 -0
  24. package/components/extended-action-sheet.yaml +134 -0
  25. package/components/extended-fab.yaml +102 -0
  26. package/components/fab.yaml +38 -20
  27. package/components/floating-action-button.yaml +99 -0
  28. package/components/help-bubble.yaml +121 -32
  29. package/components/identity-placeholder.yaml +23 -0
  30. package/components/inline-banner.yaml +188 -141
  31. package/components/link-content.yaml +60 -0
  32. package/components/manner-temp-badge.yaml +78 -0
  33. package/components/manner-temp.yaml +61 -0
  34. package/components/menu-sheet-close-button.yaml +49 -0
  35. package/components/menu-sheet-item.yaml +70 -0
  36. package/components/menu-sheet.yaml +133 -0
  37. package/components/notification-badge.yaml +67 -0
  38. package/components/progress-circle.yaml +83 -40
  39. package/components/radio.yaml +67 -71
  40. package/components/reaction-button.yaml +159 -0
  41. package/components/segmented-control-item.yaml +54 -0
  42. package/components/segmented-control.yaml +41 -30
  43. package/components/select-box.yaml +152 -0
  44. package/components/skeleton.yaml +56 -0
  45. package/components/snackbar.yaml +125 -0
  46. package/components/switch.yaml +98 -46
  47. package/components/tab.yaml +49 -31
  48. package/components/tablist.yaml +56 -15
  49. package/components/text-button.yaml +41 -57
  50. package/components/text-field.yaml +361 -0
  51. package/components/toggle-button.yaml +196 -0
  52. package/components/top-navigation.yaml +100 -0
  53. package/components/typography.yaml +167 -138
  54. package/dimension.yaml +88 -0
  55. package/duration.yaml +25 -0
  56. package/font-size.yaml +9 -0
  57. package/gradient.yaml +168 -0
  58. package/line-height.yaml +4 -4
  59. package/package.json +5 -2
  60. package/radius.yaml +10 -10
  61. package/timing-function.yaml +37 -0
  62. package/components/expand-button.yaml +0 -34
  63. package/unit.yaml +0 -70
package/components/callout.yaml CHANGED
@@ -4,134 +4,174 @@ metadata:
4
4
  id: callout
5
5
  name: Callout
6
6
  data:
7
- base:
8
- enabled:
7
+ schema:
8
+ slots:
9
9
  root:
10
- paddingXStart: $unit.x3_5
11
- paddingXEnd: $unit.x0_5
12
- paddingY: 5px
13
- cornerRadius: $radius.x2_5
14
- content:
15
- gap: $unit.x3
16
- paddingY: 9.5px
17
- fontSize: $font-size.t4
18
- lineHeight: $line-height.t5
19
- icon:
20
- # XXX: scalable 결정 x
21
- size: $unit.x4
10
+ properties:
11
+ paddingX:
12
+ type: dimension
13
+ paddingY:
14
+ type: dimension
15
+ gap:
16
+ type: dimension
17
+ cornerRadius:
18
+ type: dimension
19
+ minHeight:
20
+ type: dimension
21
+ color:
22
+ type: color
23
+ prefixIcon:
24
+ properties:
25
+ size:
26
+ type: dimension
27
+ color:
28
+ type: color
22
29
  title:
23
- fontWeight: $font-weight.bold
24
- label:
25
- fontWeight: $font-weight.regular
26
- dismissButton:
27
- size: $unit.x10
28
- dismissIcon:
29
- size: $unit.x4
30
- actionableIcon:
31
- size: $unit.x4
32
- margin: $unit.x3
33
-
34
- type=contentOnly:
35
- enabled:
36
- content:
37
- paddingXEnd: $unit.x3
38
-
39
- variant=neutral:
40
- enabled:
41
- root:
42
- color: $color.bg.neutral-weak
43
- icon:
44
- color: $color.fg.neutral
45
- title:
46
- color: $color.fg.neutral
47
- label:
48
- color: $color.fg.neutral
49
- linkLabel:
50
- color: $color.fg.neutral
51
- dismissIcon:
52
- color: $color.fg.neutral
53
- actionableIcon:
54
- color: $color.fg.neutral
55
- pressed:
56
- root:
57
- color: $color.bg.neutral-weak-pressed
58
-
59
- variant=informative:
60
- enabled:
61
- root:
62
- color: $color.bg.informative-weak
63
- icon:
64
- color: $color.fg.informative-contrast
65
- title:
66
- color: $color.fg.informative-contrast
67
- label:
68
- color: $color.fg.informative-contrast
69
- linkLabel:
70
- color: $color.fg.informative-contrast
71
- dismissIcon:
72
- color: $color.fg.informative-contrast
73
- actionableIcon:
74
- color: $color.fg.informative-contrast
75
- pressed:
76
- root:
77
- color: $color.bg.informative-weak-pressed
78
-
79
- variant=warning:
80
- enabled:
81
- root:
82
- color: $color.bg.warning-weak
83
- icon:
84
- color: $color.fg.warning-contrast
85
- title:
86
- color: $color.fg.warning-contrast
87
- label:
88
- color: $color.fg.warning-contrast
89
- linkLabel:
90
- color: $color.fg.warning-contrast
91
- dismissIcon:
92
- color: $color.fg.warning-contrast
93
- actionableIcon:
94
- color: $color.fg.warning-contrast
95
- pressed:
96
- root:
97
- color: $color.bg.warning-weak-pressed
98
-
99
- variant=danger:
100
- enabled:
101
- root:
102
- color: $color.bg.danger-weak
103
- icon:
104
- color: $color.fg.danger-contrast
105
- title:
106
- color: $color.fg.danger-contrast
107
- label:
108
- color: $color.fg.danger-contrast
109
- linkLabel:
110
- color: $color.fg.danger-contrast
111
- dismissIcon:
112
- color: $color.fg.danger-contrast
113
- actionableIcon:
114
- color: $color.fg.danger-contrast
115
- pressed:
116
- root:
117
- color: $color.bg.danger-weak-pressed
118
-
119
- variant=magic:
120
- enabled:
121
- root:
122
- color: $color.bg.magic-weak
123
- icon:
124
- color: $color.fg.magic-contrast
125
- title:
126
- color: $color.fg.magic-contrast
127
- label:
128
- color: $color.fg.magic-contrast
129
- linkLabel:
130
- color: $color.fg.magic-contrast
131
- dismissIcon:
132
- color: $color.fg.magic-contrast
133
- actionableIcon:
134
- color: $color.fg.magic-contrast
135
- pressed:
136
- root:
137
- color: $color.bg.magic-weak-pressed
30
+ properties:
31
+ fontSize:
32
+ type: dimension
33
+ lineHeight:
34
+ type: dimension
35
+ fontWeight:
36
+ type: number
37
+ color:
38
+ type: color
39
+ description:
40
+ properties:
41
+ fontSize:
42
+ type: dimension
43
+ lineHeight:
44
+ type: dimension
45
+ fontWeight:
46
+ type: number
47
+ color:
48
+ type: color
49
+ link:
50
+ properties:
51
+ fontSize:
52
+ type: dimension
53
+ lineHeight:
54
+ type: dimension
55
+ fontWeight:
56
+ type: number
57
+ color:
58
+ type: color
59
+ suffixIcon:
60
+ properties:
61
+ size:
62
+ type: dimension
63
+ targetSize:
64
+ type: dimension
65
+ color:
66
+ type: color
67
+ definitions:
68
+ base:
69
+ enabled:
70
+ root:
71
+ paddingX: $dimension.x3_5
72
+ paddingY: $dimension.x3_5
73
+ gap: $dimension.x3
74
+ cornerRadius: $radius.r2_5
75
+ minHeight: 50px
76
+ prefixIcon:
77
+ size: $dimension.x4
78
+ title:
79
+ fontSize: $font-size.t4
80
+ lineHeight: $line-height.t4
81
+ fontWeight: $font-weight.bold
82
+ description:
83
+ fontSize: $font-size.t4
84
+ lineHeight: $line-height.t4
85
+ fontWeight: $font-weight.regular
86
+ link:
87
+ fontSize: $font-size.t4
88
+ lineHeight: $line-height.t4
89
+ fontWeight: $font-weight.regular
90
+ suffixIcon:
91
+ size: $dimension.x4
92
+ targetSize: $dimension.x10
93
+ tone=neutral:
94
+ enabled:
95
+ root:
96
+ color: $color.bg.neutral-weak
97
+ prefixIcon:
98
+ color: $color.fg.neutral
99
+ title:
100
+ color: $color.fg.neutral
101
+ description:
102
+ color: $color.fg.neutral
103
+ link:
104
+ color: $color.fg.neutral
105
+ suffixIcon:
106
+ color: $color.fg.neutral
107
+ pressed:
108
+ root:
109
+ color: $color.bg.neutral-weak-pressed
110
+ tone=informative:
111
+ enabled:
112
+ root:
113
+ color: $color.bg.informative-weak
114
+ prefixIcon:
115
+ color: $color.fg.informative-contrast
116
+ title:
117
+ color: $color.fg.informative-contrast
118
+ description:
119
+ color: $color.fg.informative-contrast
120
+ link:
121
+ color: $color.fg.informative-contrast
122
+ suffixIcon:
123
+ color: $color.fg.informative-contrast
124
+ pressed:
125
+ root:
126
+ color: $color.bg.informative-weak-pressed
127
+ tone=warning:
128
+ enabled:
129
+ root:
130
+ color: $color.bg.warning-weak
131
+ prefixIcon:
132
+ color: $color.fg.warning-contrast
133
+ title:
134
+ color: $color.fg.warning-contrast
135
+ description:
136
+ color: $color.fg.warning-contrast
137
+ link:
138
+ color: $color.fg.warning-contrast
139
+ suffixIcon:
140
+ color: $color.fg.warning-contrast
141
+ pressed:
142
+ root:
143
+ color: $color.bg.warning-weak-pressed
144
+ tone=critical:
145
+ enabled:
146
+ root:
147
+ color: $color.bg.critical-weak
148
+ prefixIcon:
149
+ color: $color.fg.critical-contrast
150
+ title:
151
+ color: $color.fg.critical-contrast
152
+ description:
153
+ color: $color.fg.critical-contrast
154
+ link:
155
+ color: $color.fg.critical-contrast
156
+ suffixIcon:
157
+ color: $color.fg.critical-contrast
158
+ pressed:
159
+ root:
160
+ color: $color.bg.critical-weak-pressed
161
+ tone=magic:
162
+ enabled:
163
+ root:
164
+ color: $gradient.glow-magic
165
+ prefixIcon:
166
+ color: $color.fg.neutral
167
+ title:
168
+ color: $color.fg.neutral
169
+ description:
170
+ color: $color.fg.neutral
171
+ link:
172
+ color: $color.fg.neutral
173
+ suffixIcon:
174
+ color: $color.fg.neutral
175
+ pressed:
176
+ root:
177
+ color: $gradient.glow-magic-pressed
package/components/checkbox.yaml CHANGED
@@ -5,127 +5,150 @@ metadata:
5
5
  id: checkbox
6
6
  name: Checkbox
7
7
  data:
8
- base:
9
- enabled:
10
- label:
11
- color: $color.fg.neutral
12
- lineHeight: $line-height.t5
8
+ schema:
9
+ slots:
13
10
  root:
14
- gap: $unit.x2
15
- bold:
16
- label:
17
- fontWeight: $font-weight.bold
18
-
19
- variant=square:
20
- enabled:
21
- control:
22
- strokeColor: $color.stroke.control
23
- strokeWidth: 1.25px
24
- enabledSelected:
25
- control:
26
- color: $color.bg.brand-solid
27
- icon:
28
- color: $color.fg.static-white
29
- pressed:
30
- control:
31
- color: $color.bg.layer-default-pressed
32
- pressedSelected:
33
- control:
34
- color: $color.bg.brand-solid-pressed
35
- icon:
36
- color: $color.fg.static-white
37
- disabled:
38
- control:
39
- color: $color.bg.disabled
40
- strokeColor: $color.stroke.neutral
41
- label:
42
- color: $color.fg.disabled
43
- icon:
44
- color: $color.fg.disabled
45
- disabledSelected:
11
+ properties:
12
+ gap:
13
+ type: dimension
14
+ minHeight:
15
+ type: dimension
46
16
  label:
47
- color: $color.fg.disabled
48
- icon:
49
- color: $color.fg.disabled
50
-
51
- variant=ghost:
52
- enabled:
53
- icon:
54
- color: $color.fg.placeholder
55
- enabledSelected:
56
- icon:
57
- color: $color.fg.brand
58
- pressed:
59
- control:
60
- color: $color.bg.layer-default-pressed
61
- pressedSelected:
17
+ properties:
18
+ color:
19
+ type: color
20
+ fontWeight:
21
+ type: number
22
+ fontSize:
23
+ type: dimension
24
+ lineHeight:
25
+ type: dimension
62
26
  control:
63
- color: $color.bg.brand-weak-pressed
64
- disabled:
65
- label:
66
- color: $color.fg.disabled
67
- icon:
68
- color: $color.fg.disabled
69
- disabledSelected:
70
- label:
71
- color: $color.fg.disabled
27
+ properties:
28
+ color:
29
+ type: color
30
+ strokeColor:
31
+ type: color
32
+ strokeWidth:
33
+ type: dimension
34
+ size:
35
+ type: dimension
36
+ cornerRadius:
37
+ type: dimension
72
38
  icon:
73
- color: $color.fg.disabled
39
+ properties:
40
+ color:
41
+ type: color
42
+ size:
43
+ type: dimension
44
+ definitions:
45
+ base:
46
+ enabled:
47
+ label:
48
+ color: $color.fg.neutral
49
+ root:
50
+ gap: $dimension.x2
74
51
 
75
- size=small:
76
- enabled:
77
- root:
78
- minHeight: $unit.x8
79
- label:
80
- fontSize: $font-size.t3
81
- lineHeight: $line-height.t3
82
- control:
83
- size: $unit.x4
84
- cornerRadius: $radius.x1
52
+ weight=default:
53
+ enabled:
54
+ label:
55
+ fontWeight: $font-weight.regular
56
+ weight=stronger:
57
+ enabled:
58
+ label:
59
+ fontWeight: $font-weight.bold
85
60
 
86
- size=medium:
87
- enabled:
88
- root:
89
- minHeight: $unit.x8
90
- label:
91
- fontSize: $font-size.t4
92
- lineHeight: $line-height.t4
93
- control:
94
- size: $unit.x5
95
- cornerRadius: $radius.x1
61
+ variant=square:
62
+ enabled:
63
+ control:
64
+ strokeColor: $color.stroke.control
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
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
96
92
 
97
- size=large:
98
- enabled:
99
- root:
100
- minHeight: $unit.x9
101
- label:
102
- fontSize: $font-size.t5
103
- lineHeight: $line-height.t5
104
- control:
105
- size: $unit.x6
106
- cornerRadius: $radius.x1_5
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
107
116
 
108
- variant=ghost,size=small:
109
- enabled:
110
- icon:
111
- size: 13.5px
112
- variant=ghost,size=medium:
113
- enabled:
114
- icon:
115
- size: 15px
116
- variant=ghost,size=large:
117
- enabled:
118
- icon:
119
- size: 18px
120
- variant=square,size=small:
121
- enabled:
122
- icon:
123
- size: 10.5px
124
- variant=square,size=medium:
125
- enabled:
126
- icon:
127
- size: 11.67px
128
- variant=square,size=large:
129
- enabled:
130
- icon:
131
- size: 14px
117
+ size=medium:
118
+ enabled:
119
+ root:
120
+ minHeight: $dimension.x8
121
+ label:
122
+ fontSize: $font-size.t4
123
+ lineHeight: $line-height.t4
124
+ control:
125
+ size: $dimension.x5
126
+ cornerRadius: $radius.r1
127
+
128
+ size=large:
129
+ enabled:
130
+ root:
131
+ minHeight: $dimension.x9
132
+ label:
133
+ fontSize: $font-size.t5
134
+ 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