@seed-design/css 1.1.0 → 1.1.3

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 (26) hide show
  1. package/all.css +121 -50
  2. package/all.min.css +1 -1
  3. package/package.json +1 -1
  4. package/recipes/action-sheet.css +8 -2
  5. package/recipes/app-bar.css +8 -1
  6. package/recipes/bottom-sheet.css +12 -3
  7. package/recipes/callout.css +1 -0
  8. package/recipes/dialog.css +8 -2
  9. package/recipes/extended-action-sheet.css +8 -2
  10. package/recipes/input-button.css +6 -1
  11. package/recipes/list-header.css +1 -0
  12. package/recipes/list-item.css +13 -3
  13. package/recipes/menu-sheet-item.css +3 -0
  14. package/recipes/menu-sheet.css +12 -2
  15. package/recipes/scroll-fog.css +23 -0
  16. package/recipes/scroll-fog.d.ts +22 -0
  17. package/recipes/scroll-fog.mjs +28 -0
  18. package/recipes/text-input.css +73 -35
  19. package/recipes/text-input.d.ts +4 -0
  20. package/recipes/text-input.mjs +16 -2
  21. package/vars/component/index.d.ts +1 -0
  22. package/vars/component/index.mjs +1 -0
  23. package/vars/component/scroll-fog.d.ts +11 -0
  24. package/vars/component/scroll-fog.mjs +11 -0
  25. package/vars/component/text-input.d.ts +74 -24
  26. package/vars/component/text-input.mjs +74 -24
package/vars/component/text-input.d.ts CHANGED
@@ -2,7 +2,6 @@ export declare const vars: {
2
2
  "base": {
3
3
  "enabled": {
4
4
  "root": {
5
- "gap": "var(--seed-dimension-x2_5)",
6
5
  "strokeColor": "var(--seed-color-stroke-neutral-weak)",
7
6
  "strokeColorDuration": "var(--seed-duration-d3)",
8
7
  "strokeColorTimingFunction": "var(--seed-timing-function-easing)",
@@ -47,14 +46,6 @@ export declare const vars: {
47
46
  "strokeColor": "var(--seed-color-stroke-critical-solid)"
48
47
  }
49
48
  },
50
- "readonly": {
51
- "value": {
52
- "color": "var(--seed-color-fg-neutral-muted)"
53
- },
54
- "placeholder": {
55
- "color": "var(--seed-color-fg-neutral-muted)"
56
- }
57
- },
58
49
  "disabled": {
59
50
  "value": {
60
51
  "color": "var(--seed-color-fg-disabled)"
@@ -67,10 +58,37 @@ export declare const vars: {
67
58
  "variantOutline": {
68
59
  "enabled": {
69
60
  "root": {
70
- "minHeight": "var(--seed-dimension-x13)",
71
61
  "cornerRadius": "var(--seed-radius-r3)",
72
62
  "paddingX": "var(--seed-dimension-x4)",
73
63
  "strokeWidth": "1px"
64
+ }
65
+ },
66
+ "focused": {
67
+ "root": {
68
+ "strokeWidth": "2px"
69
+ }
70
+ },
71
+ "invalid": {
72
+ "root": {
73
+ "strokeWidth": "2px"
74
+ }
75
+ },
76
+ "readonly": {
77
+ "root": {
78
+ "color": "var(--seed-color-bg-disabled)"
79
+ }
80
+ },
81
+ "disabled": {
82
+ "root": {
83
+ "color": "var(--seed-color-bg-disabled)"
84
+ }
85
+ }
86
+ },
87
+ "variantOutlineSizeLarge": {
88
+ "enabled": {
89
+ "root": {
90
+ "gap": "var(--seed-dimension-x2_5)",
91
+ "minHeight": "var(--seed-dimension-x13)"
74
92
  },
75
93
  "value": {
76
94
  "fontSize": "var(--seed-font-size-t5)",
@@ -94,26 +112,42 @@ export declare const vars: {
94
112
  "suffixIcon": {
95
113
  "size": "var(--seed-dimension-x5)"
96
114
  }
97
- },
98
- "focused": {
99
- "root": {
100
- "strokeWidth": "2px"
101
- }
102
- },
103
- "invalid": {
104
- "root": {
105
- "strokeWidth": "2px"
106
- }
107
- },
108
- "disabled": {
115
+ }
116
+ },
117
+ "variantOutlineSizeMedium": {
118
+ "enabled": {
109
119
  "root": {
110
- "color": "var(--seed-color-bg-disabled)"
120
+ "gap": "var(--seed-dimension-x1_5)",
121
+ "minHeight": "var(--seed-dimension-x10)"
122
+ },
123
+ "value": {
124
+ "fontSize": "var(--seed-font-size-t4)",
125
+ "lineHeight": "var(--seed-line-height-t4)"
126
+ },
127
+ "placeholder": {
128
+ "fontSize": "var(--seed-font-size-t4)",
129
+ "lineHeight": "var(--seed-line-height-t4)"
130
+ },
131
+ "prefixText": {
132
+ "fontSize": "var(--seed-font-size-t4)",
133
+ "lineHeight": "var(--seed-line-height-t4)"
134
+ },
135
+ "prefixIcon": {
136
+ "size": "var(--seed-dimension-x4)"
137
+ },
138
+ "suffixText": {
139
+ "fontSize": "var(--seed-font-size-t4)",
140
+ "lineHeight": "var(--seed-line-height-t4)"
141
+ },
142
+ "suffixIcon": {
143
+ "size": "var(--seed-dimension-x4)"
111
144
  }
112
145
  }
113
146
  },
114
147
  "variantUnderline": {
115
148
  "enabled": {
116
149
  "root": {
150
+ "gap": "var(--seed-dimension-x2_5)",
117
151
  "minHeight": "var(--seed-dimension-x10)",
118
152
  "strokeBottomWidth": "1px"
119
153
  },
@@ -149,14 +183,30 @@ export declare const vars: {
149
183
  "root": {
150
184
  "strokeBottomWidth": "2px"
151
185
  }
186
+ },
187
+ "readonly": {
188
+ "value": {
189
+ "color": "var(--seed-color-fg-neutral-muted)"
190
+ },
191
+ "placeholder": {
192
+ "color": "var(--seed-color-fg-neutral-muted)"
193
+ }
152
194
  }
153
195
  },
154
- "typeMultiline": {
196
+ "typeMultilineSizeLarge": {
155
197
  "enabled": {
156
198
  "root": {
157
199
  "minHeight": "95px",
158
200
  "paddingY": "var(--seed-dimension-x3_5)"
159
201
  }
160
202
  }
203
+ },
204
+ "typeMultilineSizeMedium": {
205
+ "enabled": {
206
+ "root": {
207
+ "minHeight": "90px",
208
+ "paddingY": "11px"
209
+ }
210
+ }
161
211
  }
162
212
  }
package/vars/component/text-input.mjs CHANGED
@@ -2,7 +2,6 @@ export const vars = {
2
2
  "base": {
3
3
  "enabled": {
4
4
  "root": {
5
- "gap": "var(--seed-dimension-x2_5)",
6
5
  "strokeColor": "var(--seed-color-stroke-neutral-weak)",
7
6
  "strokeColorDuration": "var(--seed-duration-d3)",
8
7
  "strokeColorTimingFunction": "var(--seed-timing-function-easing)",
@@ -47,14 +46,6 @@ export const vars = {
47
46
  "strokeColor": "var(--seed-color-stroke-critical-solid)"
48
47
  }
49
48
  },
50
- "readonly": {
51
- "value": {
52
- "color": "var(--seed-color-fg-neutral-muted)"
53
- },
54
- "placeholder": {
55
- "color": "var(--seed-color-fg-neutral-muted)"
56
- }
57
- },
58
49
  "disabled": {
59
50
  "value": {
60
51
  "color": "var(--seed-color-fg-disabled)"
@@ -67,10 +58,37 @@ export const vars = {
67
58
  "variantOutline": {
68
59
  "enabled": {
69
60
  "root": {
70
- "minHeight": "var(--seed-dimension-x13)",
71
61
  "cornerRadius": "var(--seed-radius-r3)",
72
62
  "paddingX": "var(--seed-dimension-x4)",
73
63
  "strokeWidth": "1px"
64
+ }
65
+ },
66
+ "focused": {
67
+ "root": {
68
+ "strokeWidth": "2px"
69
+ }
70
+ },
71
+ "invalid": {
72
+ "root": {
73
+ "strokeWidth": "2px"
74
+ }
75
+ },
76
+ "readonly": {
77
+ "root": {
78
+ "color": "var(--seed-color-bg-disabled)"
79
+ }
80
+ },
81
+ "disabled": {
82
+ "root": {
83
+ "color": "var(--seed-color-bg-disabled)"
84
+ }
85
+ }
86
+ },
87
+ "variantOutlineSizeLarge": {
88
+ "enabled": {
89
+ "root": {
90
+ "gap": "var(--seed-dimension-x2_5)",
91
+ "minHeight": "var(--seed-dimension-x13)"
74
92
  },
75
93
  "value": {
76
94
  "fontSize": "var(--seed-font-size-t5)",
@@ -94,26 +112,42 @@ export const vars = {
94
112
  "suffixIcon": {
95
113
  "size": "var(--seed-dimension-x5)"
96
114
  }
97
- },
98
- "focused": {
99
- "root": {
100
- "strokeWidth": "2px"
101
- }
102
- },
103
- "invalid": {
104
- "root": {
105
- "strokeWidth": "2px"
106
- }
107
- },
108
- "disabled": {
115
+ }
116
+ },
117
+ "variantOutlineSizeMedium": {
118
+ "enabled": {
109
119
  "root": {
110
- "color": "var(--seed-color-bg-disabled)"
120
+ "gap": "var(--seed-dimension-x1_5)",
121
+ "minHeight": "var(--seed-dimension-x10)"
122
+ },
123
+ "value": {
124
+ "fontSize": "var(--seed-font-size-t4)",
125
+ "lineHeight": "var(--seed-line-height-t4)"
126
+ },
127
+ "placeholder": {
128
+ "fontSize": "var(--seed-font-size-t4)",
129
+ "lineHeight": "var(--seed-line-height-t4)"
130
+ },
131
+ "prefixText": {
132
+ "fontSize": "var(--seed-font-size-t4)",
133
+ "lineHeight": "var(--seed-line-height-t4)"
134
+ },
135
+ "prefixIcon": {
136
+ "size": "var(--seed-dimension-x4)"
137
+ },
138
+ "suffixText": {
139
+ "fontSize": "var(--seed-font-size-t4)",
140
+ "lineHeight": "var(--seed-line-height-t4)"
141
+ },
142
+ "suffixIcon": {
143
+ "size": "var(--seed-dimension-x4)"
111
144
  }
112
145
  }
113
146
  },
114
147
  "variantUnderline": {
115
148
  "enabled": {
116
149
  "root": {
150
+ "gap": "var(--seed-dimension-x2_5)",
117
151
  "minHeight": "var(--seed-dimension-x10)",
118
152
  "strokeBottomWidth": "1px"
119
153
  },
@@ -149,14 +183,30 @@ export const vars = {
149
183
  "root": {
150
184
  "strokeBottomWidth": "2px"
151
185
  }
186
+ },
187
+ "readonly": {
188
+ "value": {
189
+ "color": "var(--seed-color-fg-neutral-muted)"
190
+ },
191
+ "placeholder": {
192
+ "color": "var(--seed-color-fg-neutral-muted)"
193
+ }
152
194
  }
153
195
  },
154
- "typeMultiline": {
196
+ "typeMultilineSizeLarge": {
155
197
  "enabled": {
156
198
  "root": {
157
199
  "minHeight": "95px",
158
200
  "paddingY": "var(--seed-dimension-x3_5)"
159
201
  }
160
202
  }
203
+ },
204
+ "typeMultilineSizeMedium": {
205
+ "enabled": {
206
+ "root": {
207
+ "minHeight": "90px",
208
+ "paddingY": "11px"
209
+ }
210
+ }
161
211
  }
162
212
  }