@seed-design/css 1.2.16 → 2.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 (183) hide show
  1. package/all.css +4956 -1925
  2. package/all.layered.css +5922 -2883
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +348 -35
  6. package/base.layered.css +348 -35
  7. package/base.layered.min.css +1 -1
  8. package/base.min.css +1 -1
  9. package/breakpoints/index.d.ts +7 -0
  10. package/breakpoints/index.mjs +17 -0
  11. package/package.json +6 -1
  12. package/recipes/accordion.css +268 -0
  13. package/recipes/accordion.d.ts +33 -0
  14. package/recipes/accordion.layered.css +308 -0
  15. package/recipes/accordion.layered.mjs +94 -0
  16. package/recipes/accordion.mjs +94 -0
  17. package/recipes/action-button.css +56 -4
  18. package/recipes/action-button.d.ts +16 -0
  19. package/recipes/action-button.layered.css +60 -4
  20. package/recipes/app-bar.css +0 -3
  21. package/recipes/app-bar.d.ts +0 -4
  22. package/recipes/app-bar.layered.css +0 -4
  23. package/recipes/app-bar.layered.mjs +1 -5
  24. package/recipes/app-bar.mjs +1 -5
  25. package/recipes/app-screen.css +3 -0
  26. package/recipes/app-screen.layered.css +4 -0
  27. package/recipes/attachment-input-item.css +275 -0
  28. package/recipes/attachment-input-item.d.ts +24 -0
  29. package/recipes/attachment-input-item.layered.css +288 -0
  30. package/recipes/attachment-input-item.layered.mjs +79 -0
  31. package/recipes/attachment-input-item.mjs +79 -0
  32. package/recipes/attachment-input-trigger.css +71 -0
  33. package/recipes/attachment-input-trigger.d.ts +21 -0
  34. package/recipes/attachment-input-trigger.layered.css +85 -0
  35. package/recipes/attachment-input-trigger.layered.mjs +48 -0
  36. package/recipes/attachment-input-trigger.mjs +48 -0
  37. package/recipes/attachment-input.css +55 -0
  38. package/recipes/attachment-input.d.ts +21 -0
  39. package/recipes/attachment-input.layered.css +64 -0
  40. package/recipes/attachment-input.layered.mjs +48 -0
  41. package/recipes/attachment-input.mjs +48 -0
  42. package/recipes/avatar.d.ts +9 -0
  43. package/recipes/badge.d.ts +10 -0
  44. package/recipes/bottom-sheet.css +62 -5
  45. package/recipes/bottom-sheet.layered.css +67 -5
  46. package/recipes/callout.d.ts +7 -0
  47. package/recipes/checkmark.d.ts +3 -0
  48. package/recipes/chip-tabs.css +8 -52
  49. package/recipes/chip-tabs.d.ts +1 -1
  50. package/recipes/chip-tabs.layered.css +8 -62
  51. package/recipes/chip-tabs.layered.mjs +1 -2
  52. package/recipes/chip-tabs.mjs +1 -2
  53. package/recipes/chip.d.ts +4 -0
  54. package/recipes/contextual-floating-button.d.ts +6 -0
  55. package/recipes/dialog.css +14 -11
  56. package/recipes/dialog.layered.css +4 -0
  57. package/recipes/footer.css +44 -0
  58. package/recipes/footer.d.ts +24 -0
  59. package/recipes/footer.layered.css +52 -0
  60. package/recipes/footer.layered.mjs +39 -0
  61. package/recipes/footer.mjs +39 -0
  62. package/recipes/help-bubble.css +29 -1
  63. package/recipes/help-bubble.layered.css +34 -1
  64. package/recipes/image-frame.css +0 -3
  65. package/recipes/image-frame.d.ts +0 -4
  66. package/recipes/image-frame.layered.css +0 -4
  67. package/recipes/image-frame.layered.mjs +1 -6
  68. package/recipes/image-frame.mjs +1 -6
  69. package/recipes/input-button.css +176 -20
  70. package/recipes/input-button.d.ts +8 -1
  71. package/recipes/input-button.layered.css +197 -21
  72. package/recipes/input-button.layered.mjs +10 -2
  73. package/recipes/input-button.mjs +10 -2
  74. package/recipes/layout.css +25 -0
  75. package/recipes/layout.d.ts +24 -0
  76. package/recipes/layout.layered.css +25 -0
  77. package/recipes/layout.layered.mjs +44 -0
  78. package/recipes/layout.mjs +44 -0
  79. package/recipes/list-item.css +72 -4
  80. package/recipes/list-item.layered.css +84 -4
  81. package/recipes/menu-item.css +174 -0
  82. package/recipes/menu-item.d.ts +35 -0
  83. package/recipes/menu-item.layered.css +200 -0
  84. package/recipes/menu-item.layered.mjs +57 -0
  85. package/recipes/menu-item.mjs +57 -0
  86. package/recipes/menu-sheet-item.d.ts +6 -0
  87. package/recipes/menu-sheet.css +19 -1
  88. package/recipes/menu-sheet.layered.css +22 -1
  89. package/recipes/menu.css +119 -0
  90. package/recipes/menu.d.ts +28 -0
  91. package/recipes/menu.layered.css +139 -0
  92. package/recipes/menu.layered.mjs +56 -0
  93. package/recipes/menu.mjs +56 -0
  94. package/recipes/notification-badge.d.ts +3 -0
  95. package/recipes/page-banner.d.ts +5 -0
  96. package/recipes/progress-circle.d.ts +7 -0
  97. package/recipes/{selectBoxCheckmark.css → select-box-checkmark.css} +6 -6
  98. package/recipes/{selectBoxCheckmark.layered.css → select-box-checkmark.layered.css} +6 -6
  99. package/recipes/{selectBoxCheckmark.layered.mjs → select-box-checkmark.layered.mjs} +4 -4
  100. package/recipes/{selectBoxCheckmark.mjs → select-box-checkmark.mjs} +4 -4
  101. package/recipes/side-navigation-inset.css +4 -0
  102. package/recipes/side-navigation-inset.d.ts +19 -0
  103. package/recipes/side-navigation-inset.layered.css +6 -0
  104. package/recipes/side-navigation-inset.layered.mjs +22 -0
  105. package/recipes/side-navigation-inset.mjs +22 -0
  106. package/recipes/side-navigation-menu-item.css +135 -0
  107. package/recipes/side-navigation-menu-item.d.ts +21 -0
  108. package/recipes/side-navigation-menu-item.layered.css +156 -0
  109. package/recipes/side-navigation-menu-item.layered.mjs +48 -0
  110. package/recipes/side-navigation-menu-item.mjs +48 -0
  111. package/recipes/side-navigation.css +115 -0
  112. package/recipes/side-navigation.d.ts +24 -0
  113. package/recipes/side-navigation.layered.css +132 -0
  114. package/recipes/side-navigation.layered.mjs +63 -0
  115. package/recipes/side-navigation.mjs +63 -0
  116. package/recipes/side-panel.css +327 -0
  117. package/recipes/side-panel.d.ts +24 -0
  118. package/recipes/side-panel.layered.css +361 -0
  119. package/recipes/side-panel.layered.mjs +72 -0
  120. package/recipes/side-panel.mjs +72 -0
  121. package/recipes/skeleton.css +36 -2
  122. package/recipes/skeleton.d.ts +8 -0
  123. package/recipes/skeleton.layered.css +40 -2
  124. package/recipes/text-input.css +323 -52
  125. package/recipes/text-input.d.ts +8 -1
  126. package/recipes/text-input.layered.css +385 -51
  127. package/recipes/text-input.layered.mjs +18 -1
  128. package/recipes/text-input.mjs +18 -1
  129. package/recipes/text.css +180 -0
  130. package/recipes/text.d.ts +59 -1
  131. package/recipes/text.layered.css +216 -0
  132. package/recipes/text.layered.mjs +37 -1
  133. package/recipes/text.mjs +37 -1
  134. package/recipes/toggle-button.d.ts +3 -0
  135. package/vars/color/bg.d.ts +2 -2
  136. package/vars/color/bg.mjs +2 -1
  137. package/vars/color/stroke.d.ts +2 -2
  138. package/vars/color/stroke.mjs +2 -2
  139. package/vars/component/accordion-item.d.ts +132 -0
  140. package/vars/component/accordion-item.mjs +126 -0
  141. package/vars/component/accordion.d.ts +22 -0
  142. package/vars/component/accordion.mjs +16 -0
  143. package/vars/component/attachment-input-dropzone.d.ts +32 -0
  144. package/vars/component/attachment-input-dropzone.mjs +30 -0
  145. package/vars/component/attachment-input-item-action-button.d.ts +37 -0
  146. package/vars/component/attachment-input-item-action-button.mjs +37 -0
  147. package/vars/component/attachment-input-item-remove-button.d.ts +28 -0
  148. package/vars/component/attachment-input-item-remove-button.mjs +28 -0
  149. package/vars/component/attachment-input-item.d.ts +103 -0
  150. package/vars/component/attachment-input-item.mjs +102 -0
  151. package/vars/component/attachment-input-trigger.d.ts +46 -0
  152. package/vars/component/attachment-input-trigger.mjs +46 -0
  153. package/vars/component/attachment-input.d.ts +14 -0
  154. package/vars/component/attachment-input.mjs +12 -0
  155. package/vars/component/chip-tablist.d.ts +0 -7
  156. package/vars/component/chip-tablist.mjs +0 -7
  157. package/vars/component/image-frame.d.ts +1 -22
  158. package/vars/component/image-frame.mjs +1 -9
  159. package/vars/component/index.d.ts +12 -1
  160. package/vars/component/index.mjs +12 -1
  161. package/vars/component/input-button.d.ts +90 -17
  162. package/vars/component/input-button.mjs +84 -17
  163. package/vars/component/menu-item.d.ts +129 -0
  164. package/vars/component/menu-item.mjs +117 -0
  165. package/vars/component/menu.d.ts +68 -0
  166. package/vars/component/menu.mjs +60 -0
  167. package/vars/component/side-panel-close-button.d.ts +23 -0
  168. package/vars/component/side-panel-close-button.mjs +23 -0
  169. package/vars/component/side-panel.d.ts +94 -0
  170. package/vars/component/side-panel.mjs +83 -0
  171. package/vars/component/text-input.d.ts +92 -24
  172. package/vars/component/text-input.mjs +76 -24
  173. package/vars/component/typography.d.ts +414 -0
  174. package/vars/component/typography.mjs +324 -0
  175. package/vars/font-size.d.ts +17 -1
  176. package/vars/font-size.mjs +9 -1
  177. package/vars/gradient.d.ts +0 -8
  178. package/vars/gradient.mjs +0 -2
  179. package/vars/line-height.d.ts +17 -1
  180. package/vars/line-height.mjs +9 -1
  181. package/vars/component/chip-tab.d.ts +0 -162
  182. package/vars/component/chip-tab.mjs +0 -162
  183. /package/recipes/{selectBoxCheckmark.d.ts → select-box-checkmark.d.ts} +0 -0
package/recipes/text-input.layered.css CHANGED
@@ -63,27 +63,42 @@
63
63
  }
64
64
 
65
65
  .seed-text-input__prefixText {
66
- color: var(--seed-color-fg-neutral-muted);
66
+ color: var(--seed-color-fg-neutral-subtle);
67
67
  font-weight: var(--seed-font-weight-regular);
68
68
  }
69
69
 
70
+ .seed-text-input__prefixText:is(:disabled, [disabled], [data-disabled]) {
71
+ color: var(--seed-color-fg-disabled);
72
+ }
73
+
70
74
  .seed-text-input__prefixIcon {
71
75
  color: var(--seed-color-fg-neutral-muted);
72
76
  flex-shrink: 0;
73
77
  }
74
78
 
79
+ .seed-text-input__prefixIcon:is(:disabled, [disabled], [data-disabled]) {
80
+ color: var(--seed-color-fg-disabled);
81
+ }
82
+
75
83
  .seed-text-input__suffixText {
76
- color: var(--seed-color-fg-neutral-muted);
84
+ color: var(--seed-color-fg-neutral-subtle);
77
85
  font-weight: var(--seed-font-weight-regular);
78
86
  }
79
87
 
88
+ .seed-text-input__suffixText:is(:disabled, [disabled], [data-disabled]) {
89
+ color: var(--seed-color-fg-disabled);
90
+ }
91
+
80
92
  .seed-text-input__suffixIcon {
81
93
  color: var(--seed-color-fg-neutral-muted);
82
94
  flex-shrink: 0;
83
95
  }
84
96
 
97
+ .seed-text-input__suffixIcon:is(:disabled, [disabled], [data-disabled]) {
98
+ color: var(--seed-color-fg-disabled);
99
+ }
100
+
85
101
  .seed-text-input__root--variant_outline {
86
- border-radius: var(--seed-radius-r3);
87
102
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
88
103
  }
89
104
 
@@ -106,25 +121,7 @@
106
121
  background-color: var(--seed-color-bg-disabled);
107
122
  }
108
123
 
109
- .seed-text-input__value--variant_outline:first-child {
110
- padding-left: var(--seed-dimension-x4);
111
- }
112
-
113
- .seed-text-input__value--variant_outline:last-child {
114
- padding-right: var(--seed-dimension-x4);
115
- }
116
-
117
- .seed-text-input__prefixText--variant_outline:first-child, .seed-text-input__prefixIcon--variant_outline:first-child {
118
- margin-left: var(--seed-dimension-x4);
119
- }
120
-
121
- .seed-text-input__suffixText--variant_outline:last-child, .seed-text-input__suffixIcon--variant_outline:last-child {
122
- margin-right: var(--seed-dimension-x4);
123
- }
124
-
125
124
  .seed-text-input__root--variant_underline {
126
- gap: var(--seed-dimension-x2_5);
127
- min-height: var(--seed-dimension-x10);
128
125
  box-shadow: inset 0 calc(1px * -1) 0 0 var(--seed-color-stroke-neutral-weak);
129
126
  }
130
127
 
@@ -143,94 +140,431 @@
143
140
  border-bottom-width: 2px;
144
141
  }
145
142
 
146
- .seed-text-input__value--variant_underline, .seed-text-input__value--variant_underline::placeholder {
147
- font-size: var(--seed-font-size-t6);
148
- line-height: var(--seed-line-height-t6);
149
- }
150
-
151
143
  .seed-text-input__value--variant_underline[data-readonly]:not(:is(:disabled, [disabled], [data-disabled])), .seed-text-input__value--variant_underline[data-readonly]:not(:is(:disabled, [disabled], [data-disabled]))::placeholder {
152
144
  color: var(--seed-color-fg-neutral-muted);
153
145
  }
154
146
 
155
- .seed-text-input__prefixText--variant_underline {
156
- font-size: var(--seed-font-size-t6);
157
- line-height: var(--seed-line-height-t6);
158
- }
159
-
160
- .seed-text-input__prefixIcon--variant_underline {
161
- width: var(--seed-dimension-x6);
162
- height: var(--seed-dimension-x6);
163
- }
164
-
165
- .seed-text-input__suffixText--variant_underline {
166
- font-size: var(--seed-font-size-t6);
167
- line-height: var(--seed-line-height-t6);
147
+ .seed-text-input__value--size_large:is(textarea) {
148
+ min-height: 94px;
149
+ padding-top: var(--seed-dimension-x3_5);
150
+ padding-bottom: var(--seed-dimension-x3_5);
168
151
  }
169
152
 
170
- .seed-text-input__suffixIcon--variant_underline {
171
- width: var(--seed-dimension-x6);
172
- height: var(--seed-dimension-x6);
153
+ .seed-text-input__value--size_medium:is(textarea) {
154
+ min-height: 82px;
155
+ padding-top: var(--seed-dimension-x3);
156
+ padding-bottom: var(--seed-dimension-x3);
173
157
  }
174
158
 
175
- .seed-text-input__value--size_large:is(textarea) {
176
- min-height: 95px;
159
+ .seed-text-input__value--size_responsive:is(textarea) {
160
+ min-height: 94px;
177
161
  padding-top: var(--seed-dimension-x3_5);
178
162
  padding-bottom: var(--seed-dimension-x3_5);
179
163
  }
180
164
 
181
- .seed-text-input__value--size_medium:is(textarea) {
182
- min-height: 90px;
183
- padding-top: 11px;
184
- padding-bottom: 11px;
165
+ @media (width >= 1280px) {
166
+ .seed-text-input__value--size_responsive:is(textarea) {
167
+ min-height: 82px;
168
+ padding-top: var(--seed-dimension-x3);
169
+ padding-bottom: var(--seed-dimension-x3);
170
+ }
185
171
  }
186
172
 
187
173
  .seed-text-input__root--variant_outline-size_large {
188
174
  gap: var(--seed-dimension-x2_5);
189
175
  min-height: var(--seed-dimension-x13);
176
+ border-radius: var(--seed-radius-r3);
177
+ }
178
+
179
+ .seed-text-input__value--variant_outline-size_large, .seed-text-input__value--variant_outline-size_large::placeholder {
180
+ font-size: var(--seed-font-size-t5);
181
+ line-height: var(--seed-line-height-t5);
182
+ }
183
+
184
+ .seed-text-input__value--variant_outline-size_large:first-child {
185
+ padding-left: var(--seed-dimension-x4);
186
+ }
187
+
188
+ .seed-text-input__value--variant_outline-size_large:last-child {
189
+ padding-right: var(--seed-dimension-x4);
190
190
  }
191
191
 
192
- .seed-text-input__value--variant_outline-size_large, .seed-text-input__value--variant_outline-size_large::placeholder, .seed-text-input__prefixText--variant_outline-size_large {
192
+ .seed-text-input__prefixText--variant_outline-size_large {
193
193
  font-size: var(--seed-font-size-t5);
194
194
  line-height: var(--seed-line-height-t5);
195
195
  }
196
196
 
197
+ .seed-text-input__prefixText--variant_outline-size_large:first-child {
198
+ margin-left: var(--seed-dimension-x4);
199
+ }
200
+
197
201
  .seed-text-input__prefixIcon--variant_outline-size_large {
198
202
  width: var(--seed-dimension-x5);
199
203
  height: var(--seed-dimension-x5);
200
204
  }
201
205
 
206
+ .seed-text-input__prefixIcon--variant_outline-size_large:first-child {
207
+ margin-left: var(--seed-dimension-x4);
208
+ }
209
+
202
210
  .seed-text-input__suffixText--variant_outline-size_large {
203
211
  font-size: var(--seed-font-size-t5);
204
212
  line-height: var(--seed-line-height-t5);
205
213
  }
206
214
 
215
+ .seed-text-input__suffixText--variant_outline-size_large:last-child {
216
+ margin-right: var(--seed-dimension-x4);
217
+ }
218
+
207
219
  .seed-text-input__suffixIcon--variant_outline-size_large {
208
220
  width: var(--seed-dimension-x5);
209
221
  height: var(--seed-dimension-x5);
210
222
  }
211
223
 
224
+ .seed-text-input__suffixIcon--variant_outline-size_large:last-child {
225
+ margin-right: var(--seed-dimension-x4);
226
+ }
227
+
212
228
  .seed-text-input__root--variant_outline-size_medium {
213
- gap: var(--seed-dimension-x1_5);
229
+ gap: var(--seed-dimension-x2);
214
230
  min-height: var(--seed-dimension-x10);
231
+ border-radius: var(--seed-radius-r2);
232
+ }
233
+
234
+ .seed-text-input__value--variant_outline-size_medium, .seed-text-input__value--variant_outline-size_medium::placeholder {
235
+ font-size: var(--seed-font-size-t4);
236
+ line-height: var(--seed-line-height-t4);
237
+ }
238
+
239
+ .seed-text-input__value--variant_outline-size_medium:first-child {
240
+ padding-left: var(--seed-dimension-x3_5);
241
+ }
242
+
243
+ .seed-text-input__value--variant_outline-size_medium:last-child {
244
+ padding-right: var(--seed-dimension-x3_5);
215
245
  }
216
246
 
217
- .seed-text-input__value--variant_outline-size_medium, .seed-text-input__value--variant_outline-size_medium::placeholder, .seed-text-input__prefixText--variant_outline-size_medium {
247
+ .seed-text-input__prefixText--variant_outline-size_medium {
218
248
  font-size: var(--seed-font-size-t4);
219
249
  line-height: var(--seed-line-height-t4);
220
250
  }
221
251
 
252
+ .seed-text-input__prefixText--variant_outline-size_medium:first-child {
253
+ margin-left: var(--seed-dimension-x3_5);
254
+ }
255
+
222
256
  .seed-text-input__prefixIcon--variant_outline-size_medium {
223
257
  width: var(--seed-dimension-x4);
224
258
  height: var(--seed-dimension-x4);
225
259
  }
226
260
 
261
+ .seed-text-input__prefixIcon--variant_outline-size_medium:first-child {
262
+ margin-left: var(--seed-dimension-x3_5);
263
+ }
264
+
227
265
  .seed-text-input__suffixText--variant_outline-size_medium {
228
266
  font-size: var(--seed-font-size-t4);
229
267
  line-height: var(--seed-line-height-t4);
230
268
  }
231
269
 
270
+ .seed-text-input__suffixText--variant_outline-size_medium:last-child {
271
+ margin-right: var(--seed-dimension-x3_5);
272
+ }
273
+
232
274
  .seed-text-input__suffixIcon--variant_outline-size_medium {
233
275
  width: var(--seed-dimension-x4);
234
276
  height: var(--seed-dimension-x4);
235
277
  }
278
+
279
+ .seed-text-input__suffixIcon--variant_outline-size_medium:last-child {
280
+ margin-right: var(--seed-dimension-x3_5);
281
+ }
282
+
283
+ .seed-text-input__root--variant_outline-size_responsive {
284
+ gap: var(--seed-dimension-x2_5);
285
+ min-height: var(--seed-dimension-x13);
286
+ border-radius: var(--seed-radius-r3);
287
+ }
288
+
289
+ @media (width >= 1280px) {
290
+ .seed-text-input__root--variant_outline-size_responsive {
291
+ gap: var(--seed-dimension-x2);
292
+ min-height: var(--seed-dimension-x10);
293
+ border-radius: var(--seed-radius-r2);
294
+ }
295
+ }
296
+
297
+ .seed-text-input__value--variant_outline-size_responsive {
298
+ font-size: var(--seed-font-size-t5);
299
+ line-height: var(--seed-line-height-t5);
300
+ }
301
+
302
+ @media (width >= 1280px) {
303
+ .seed-text-input__value--variant_outline-size_responsive {
304
+ font-size: var(--seed-font-size-t4);
305
+ line-height: var(--seed-line-height-t4);
306
+ }
307
+ }
308
+
309
+ .seed-text-input__value--variant_outline-size_responsive::placeholder {
310
+ font-size: var(--seed-font-size-t5);
311
+ line-height: var(--seed-line-height-t5);
312
+ }
313
+
314
+ @media (width >= 1280px) {
315
+ .seed-text-input__value--variant_outline-size_responsive::placeholder {
316
+ font-size: var(--seed-font-size-t4);
317
+ line-height: var(--seed-line-height-t4);
318
+ }
319
+ }
320
+
321
+ .seed-text-input__value--variant_outline-size_responsive:first-child {
322
+ padding-left: var(--seed-dimension-x4);
323
+ }
324
+
325
+ @media (width >= 1280px) {
326
+ .seed-text-input__value--variant_outline-size_responsive:first-child {
327
+ padding-left: var(--seed-dimension-x3_5);
328
+ }
329
+ }
330
+
331
+ .seed-text-input__value--variant_outline-size_responsive:last-child {
332
+ padding-right: var(--seed-dimension-x4);
333
+ }
334
+
335
+ @media (width >= 1280px) {
336
+ .seed-text-input__value--variant_outline-size_responsive:last-child {
337
+ padding-right: var(--seed-dimension-x3_5);
338
+ }
339
+ }
340
+
341
+ .seed-text-input__prefixText--variant_outline-size_responsive {
342
+ font-size: var(--seed-font-size-t5);
343
+ line-height: var(--seed-line-height-t5);
344
+ }
345
+
346
+ @media (width >= 1280px) {
347
+ .seed-text-input__prefixText--variant_outline-size_responsive {
348
+ font-size: var(--seed-font-size-t4);
349
+ line-height: var(--seed-line-height-t4);
350
+ }
351
+ }
352
+
353
+ .seed-text-input__prefixText--variant_outline-size_responsive:first-child {
354
+ margin-left: var(--seed-dimension-x4);
355
+ }
356
+
357
+ @media (width >= 1280px) {
358
+ .seed-text-input__prefixText--variant_outline-size_responsive:first-child {
359
+ margin-left: var(--seed-dimension-x3_5);
360
+ }
361
+ }
362
+
363
+ .seed-text-input__prefixIcon--variant_outline-size_responsive {
364
+ width: var(--seed-dimension-x5);
365
+ height: var(--seed-dimension-x5);
366
+ }
367
+
368
+ @media (width >= 1280px) {
369
+ .seed-text-input__prefixIcon--variant_outline-size_responsive {
370
+ width: var(--seed-dimension-x4);
371
+ height: var(--seed-dimension-x4);
372
+ }
373
+ }
374
+
375
+ .seed-text-input__prefixIcon--variant_outline-size_responsive:first-child {
376
+ margin-left: var(--seed-dimension-x4);
377
+ }
378
+
379
+ @media (width >= 1280px) {
380
+ .seed-text-input__prefixIcon--variant_outline-size_responsive:first-child {
381
+ margin-left: var(--seed-dimension-x3_5);
382
+ }
383
+ }
384
+
385
+ .seed-text-input__suffixText--variant_outline-size_responsive {
386
+ font-size: var(--seed-font-size-t5);
387
+ line-height: var(--seed-line-height-t5);
388
+ }
389
+
390
+ @media (width >= 1280px) {
391
+ .seed-text-input__suffixText--variant_outline-size_responsive {
392
+ font-size: var(--seed-font-size-t4);
393
+ line-height: var(--seed-line-height-t4);
394
+ }
395
+ }
396
+
397
+ .seed-text-input__suffixText--variant_outline-size_responsive:last-child {
398
+ margin-right: var(--seed-dimension-x4);
399
+ }
400
+
401
+ @media (width >= 1280px) {
402
+ .seed-text-input__suffixText--variant_outline-size_responsive:last-child {
403
+ margin-right: var(--seed-dimension-x3_5);
404
+ }
405
+ }
406
+
407
+ .seed-text-input__suffixIcon--variant_outline-size_responsive {
408
+ width: var(--seed-dimension-x5);
409
+ height: var(--seed-dimension-x5);
410
+ }
411
+
412
+ @media (width >= 1280px) {
413
+ .seed-text-input__suffixIcon--variant_outline-size_responsive {
414
+ width: var(--seed-dimension-x4);
415
+ height: var(--seed-dimension-x4);
416
+ }
417
+ }
418
+
419
+ .seed-text-input__suffixIcon--variant_outline-size_responsive:last-child {
420
+ margin-right: var(--seed-dimension-x4);
421
+ }
422
+
423
+ @media (width >= 1280px) {
424
+ .seed-text-input__suffixIcon--variant_outline-size_responsive:last-child {
425
+ margin-right: var(--seed-dimension-x3_5);
426
+ }
427
+ }
428
+
429
+ .seed-text-input__root--variant_underline-size_large {
430
+ gap: var(--seed-dimension-x2_5);
431
+ min-height: var(--seed-dimension-x10);
432
+ padding-top: var(--seed-dimension-x2);
433
+ padding-bottom: var(--seed-dimension-x2);
434
+ }
435
+
436
+ .seed-text-input__value--variant_underline-size_large, .seed-text-input__value--variant_underline-size_large::placeholder, .seed-text-input__prefixText--variant_underline-size_large {
437
+ font-size: var(--seed-font-size-t6);
438
+ line-height: var(--seed-line-height-t6);
439
+ }
440
+
441
+ .seed-text-input__prefixIcon--variant_underline-size_large {
442
+ width: var(--seed-dimension-x6);
443
+ height: var(--seed-dimension-x6);
444
+ }
445
+
446
+ .seed-text-input__suffixText--variant_underline-size_large {
447
+ font-size: var(--seed-font-size-t6);
448
+ line-height: var(--seed-line-height-t6);
449
+ }
450
+
451
+ .seed-text-input__suffixIcon--variant_underline-size_large {
452
+ width: var(--seed-dimension-x6);
453
+ height: var(--seed-dimension-x6);
454
+ }
455
+
456
+ .seed-text-input__root--variant_underline-size_medium {
457
+ gap: var(--seed-dimension-x2);
458
+ min-height: 34px;
459
+ padding-top: var(--seed-dimension-x1_5);
460
+ padding-bottom: var(--seed-dimension-x1_5);
461
+ }
462
+
463
+ .seed-text-input__value--variant_underline-size_medium, .seed-text-input__value--variant_underline-size_medium::placeholder, .seed-text-input__prefixText--variant_underline-size_medium {
464
+ font-size: var(--seed-font-size-t5);
465
+ line-height: var(--seed-line-height-t5);
466
+ }
467
+
468
+ .seed-text-input__prefixIcon--variant_underline-size_medium {
469
+ width: var(--seed-dimension-x5);
470
+ height: var(--seed-dimension-x5);
471
+ }
472
+
473
+ .seed-text-input__suffixText--variant_underline-size_medium {
474
+ font-size: var(--seed-font-size-t5);
475
+ line-height: var(--seed-line-height-t5);
476
+ }
477
+
478
+ .seed-text-input__suffixIcon--variant_underline-size_medium {
479
+ width: var(--seed-dimension-x5);
480
+ height: var(--seed-dimension-x5);
481
+ }
482
+
483
+ .seed-text-input__root--variant_underline-size_responsive {
484
+ gap: var(--seed-dimension-x2_5);
485
+ min-height: var(--seed-dimension-x10);
486
+ padding-top: var(--seed-dimension-x2);
487
+ padding-bottom: var(--seed-dimension-x2);
488
+ }
489
+
490
+ @media (width >= 1280px) {
491
+ .seed-text-input__root--variant_underline-size_responsive {
492
+ gap: var(--seed-dimension-x2);
493
+ min-height: 34px;
494
+ padding-top: var(--seed-dimension-x1_5);
495
+ padding-bottom: var(--seed-dimension-x1_5);
496
+ }
497
+ }
498
+
499
+ .seed-text-input__value--variant_underline-size_responsive {
500
+ font-size: var(--seed-font-size-t6);
501
+ line-height: var(--seed-line-height-t6);
502
+ }
503
+
504
+ @media (width >= 1280px) {
505
+ .seed-text-input__value--variant_underline-size_responsive {
506
+ font-size: var(--seed-font-size-t5);
507
+ line-height: var(--seed-line-height-t5);
508
+ }
509
+ }
510
+
511
+ .seed-text-input__value--variant_underline-size_responsive::placeholder {
512
+ font-size: var(--seed-font-size-t6);
513
+ line-height: var(--seed-line-height-t6);
514
+ }
515
+
516
+ @media (width >= 1280px) {
517
+ .seed-text-input__value--variant_underline-size_responsive::placeholder {
518
+ font-size: var(--seed-font-size-t5);
519
+ line-height: var(--seed-line-height-t5);
520
+ }
521
+ }
522
+
523
+ .seed-text-input__prefixText--variant_underline-size_responsive {
524
+ font-size: var(--seed-font-size-t6);
525
+ line-height: var(--seed-line-height-t6);
526
+ }
527
+
528
+ @media (width >= 1280px) {
529
+ .seed-text-input__prefixText--variant_underline-size_responsive {
530
+ font-size: var(--seed-font-size-t5);
531
+ line-height: var(--seed-line-height-t5);
532
+ }
533
+ }
534
+
535
+ .seed-text-input__prefixIcon--variant_underline-size_responsive {
536
+ width: var(--seed-dimension-x6);
537
+ height: var(--seed-dimension-x6);
538
+ }
539
+
540
+ @media (width >= 1280px) {
541
+ .seed-text-input__prefixIcon--variant_underline-size_responsive {
542
+ width: var(--seed-dimension-x5);
543
+ height: var(--seed-dimension-x5);
544
+ }
545
+ }
546
+
547
+ .seed-text-input__suffixText--variant_underline-size_responsive {
548
+ font-size: var(--seed-font-size-t6);
549
+ line-height: var(--seed-line-height-t6);
550
+ }
551
+
552
+ @media (width >= 1280px) {
553
+ .seed-text-input__suffixText--variant_underline-size_responsive {
554
+ font-size: var(--seed-font-size-t5);
555
+ line-height: var(--seed-line-height-t5);
556
+ }
557
+ }
558
+
559
+ .seed-text-input__suffixIcon--variant_underline-size_responsive {
560
+ width: var(--seed-dimension-x6);
561
+ height: var(--seed-dimension-x6);
562
+ }
563
+
564
+ @media (width >= 1280px) {
565
+ .seed-text-input__suffixIcon--variant_underline-size_responsive {
566
+ width: var(--seed-dimension-x5);
567
+ height: var(--seed-dimension-x5);
568
+ }
569
+ }
236
570
  }
package/recipes/text-input.layered.mjs CHANGED
@@ -41,6 +41,22 @@ const compoundVariants = [
41
41
  {
42
42
  "variant": "outline",
43
43
  "size": "medium"
44
+ },
45
+ {
46
+ "variant": "outline",
47
+ "size": "responsive"
48
+ },
49
+ {
50
+ "variant": "underline",
51
+ "size": "large"
52
+ },
53
+ {
54
+ "variant": "underline",
55
+ "size": "medium"
56
+ },
57
+ {
58
+ "variant": "underline",
59
+ "size": "responsive"
44
60
  }
45
61
  ];
46
62
 
@@ -51,7 +67,8 @@ export const textInputVariantMap = {
51
67
  ],
52
68
  "size": [
53
69
  "large",
54
- "medium"
70
+ "medium",
71
+ "responsive"
55
72
  ]
56
73
  };
57
74
 
package/recipes/text-input.mjs CHANGED
@@ -41,6 +41,22 @@ const compoundVariants = [
41
41
  {
42
42
  "variant": "outline",
43
43
  "size": "medium"
44
+ },
45
+ {
46
+ "variant": "outline",
47
+ "size": "responsive"
48
+ },
49
+ {
50
+ "variant": "underline",
51
+ "size": "large"
52
+ },
53
+ {
54
+ "variant": "underline",
55
+ "size": "medium"
56
+ },
57
+ {
58
+ "variant": "underline",
59
+ "size": "responsive"
44
60
  }
45
61
  ];
46
62
 
@@ -51,7 +67,8 @@ export const textInputVariantMap = {
51
67
  ],
52
68
  "size": [
53
69
  "large",
54
- "medium"
70
+ "medium",
71
+ "responsive"
55
72
  ]
56
73
  };
57
74