@seed-design/css 2.1.2 → 2.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 (21) hide show
  1. package/all.css +479 -478
  2. package/all.layered.css +479 -478
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +277 -277
  6. package/base.layered.css +277 -277
  7. package/base.layered.min.css +1 -1
  8. package/base.min.css +1 -1
  9. package/package.json +1 -1
  10. package/recipes/action-button.css +36 -36
  11. package/recipes/action-button.layered.css +36 -36
  12. package/recipes/bottom-sheet.css +39 -39
  13. package/recipes/bottom-sheet.layered.css +39 -39
  14. package/recipes/help-bubble.css +10 -10
  15. package/recipes/help-bubble.layered.css +10 -10
  16. package/recipes/list-item.css +36 -36
  17. package/recipes/list-item.layered.css +36 -36
  18. package/recipes/side-panel.css +61 -60
  19. package/recipes/side-panel.layered.css +61 -60
  20. package/recipes/skeleton.css +20 -20
  21. package/recipes/skeleton.layered.css +20 -20
package/recipes/list-item.layered.css CHANGED
@@ -19,11 +19,11 @@
19
19
 
20
20
  .seed-list-item__prefix {
21
21
  --seed-box-padding-right-base: var(--seed-dimension-x3);
22
- --seed-box-padding-right-sm: var(--seed-box-padding-right-base);
23
- --seed-box-padding-right-md: var(--seed-box-padding-right-sm);
24
- --seed-box-padding-right-lg: var(--seed-box-padding-right-md);
25
- --seed-box-padding-right-xl: var(--seed-box-padding-right-lg);
26
- --seed-box-padding-right: var(--seed-box-padding-right-base);
22
+ --seed-box-padding-right-sm: var(--seed-box-padding-right-base, initial);
23
+ --seed-box-padding-right-md: var(--seed-box-padding-right-sm, initial);
24
+ --seed-box-padding-right-lg: var(--seed-box-padding-right-md, initial);
25
+ --seed-box-padding-right-xl: var(--seed-box-padding-right-lg, initial);
26
+ --seed-box-padding-right: var(--seed-box-padding-right-base, initial);
27
27
  padding-right: var(--seed-box-padding-right);
28
28
  --seed-focus-ring: none;
29
29
  --seed-icon-size: 22px;
@@ -41,11 +41,11 @@
41
41
  --seed-box-position: initial;
42
42
  position: var(--seed-box-position);
43
43
  --seed-box-gap-base: var(--seed-dimension-x1);
44
- --seed-box-gap-sm: var(--seed-box-gap-base);
45
- --seed-box-gap-md: var(--seed-box-gap-sm);
46
- --seed-box-gap-lg: var(--seed-box-gap-md);
47
- --seed-box-gap-xl: var(--seed-box-gap-lg);
48
- --seed-box-gap: var(--seed-box-gap-base);
44
+ --seed-box-gap-sm: var(--seed-box-gap-base, initial);
45
+ --seed-box-gap-md: var(--seed-box-gap-sm, initial);
46
+ --seed-box-gap-lg: var(--seed-box-gap-md, initial);
47
+ --seed-box-gap-xl: var(--seed-box-gap-lg, initial);
48
+ --seed-box-gap: var(--seed-box-gap-base, initial);
49
49
  align-items: center;
50
50
  gap: var(--seed-box-gap);
51
51
  --seed-focus-ring: none;
@@ -67,19 +67,19 @@
67
67
  box-sizing: border-box;
68
68
  text-align: start;
69
69
  --seed-box-gap-base: var(--seed-dimension-x0_5);
70
- --seed-box-gap-sm: var(--seed-box-gap-base);
71
- --seed-box-gap-md: var(--seed-box-gap-sm);
72
- --seed-box-gap-lg: var(--seed-box-gap-md);
73
- --seed-box-gap-xl: var(--seed-box-gap-lg);
74
- --seed-box-gap: var(--seed-box-gap-base);
70
+ --seed-box-gap-sm: var(--seed-box-gap-base, initial);
71
+ --seed-box-gap-md: var(--seed-box-gap-sm, initial);
72
+ --seed-box-gap-lg: var(--seed-box-gap-md, initial);
73
+ --seed-box-gap-xl: var(--seed-box-gap-lg, initial);
74
+ --seed-box-gap: var(--seed-box-gap-base, initial);
75
75
  align-items: flex-start;
76
76
  gap: var(--seed-box-gap);
77
77
  --seed-box-padding-right-base: var(--seed-dimension-x2_5);
78
- --seed-box-padding-right-sm: var(--seed-box-padding-right-base);
79
- --seed-box-padding-right-md: var(--seed-box-padding-right-sm);
80
- --seed-box-padding-right-lg: var(--seed-box-padding-right-md);
81
- --seed-box-padding-right-xl: var(--seed-box-padding-right-lg);
82
- --seed-box-padding-right: var(--seed-box-padding-right-base);
78
+ --seed-box-padding-right-sm: var(--seed-box-padding-right-base, initial);
79
+ --seed-box-padding-right-md: var(--seed-box-padding-right-sm, initial);
80
+ --seed-box-padding-right-lg: var(--seed-box-padding-right-md, initial);
81
+ --seed-box-padding-right-xl: var(--seed-box-padding-right-lg, initial);
82
+ --seed-box-padding-right: var(--seed-box-padding-right-base, initial);
83
83
  padding: 0 var(--seed-box-padding-right) 0 0;
84
84
  background-color: #0000;
85
85
  border: none;
@@ -207,61 +207,61 @@
207
207
 
208
208
  @media (width >= 480px) {
209
209
  .seed-list-item__prefix {
210
- --seed-box-padding-right: var(--seed-box-padding-right-sm);
210
+ --seed-box-padding-right: var(--seed-box-padding-right-sm, initial);
211
211
  }
212
212
 
213
213
  .seed-list-item__suffix {
214
- --seed-box-gap: var(--seed-box-gap-sm);
214
+ --seed-box-gap: var(--seed-box-gap-sm, initial);
215
215
  }
216
216
 
217
217
  .seed-list-item__content {
218
- --seed-box-gap: var(--seed-box-gap-sm);
219
- --seed-box-padding-right: var(--seed-box-padding-right-sm);
218
+ --seed-box-gap: var(--seed-box-gap-sm, initial);
219
+ --seed-box-padding-right: var(--seed-box-padding-right-sm, initial);
220
220
  }
221
221
  }
222
222
 
223
223
  @media (width >= 768px) {
224
224
  .seed-list-item__prefix {
225
- --seed-box-padding-right: var(--seed-box-padding-right-md);
225
+ --seed-box-padding-right: var(--seed-box-padding-right-md, initial);
226
226
  }
227
227
 
228
228
  .seed-list-item__suffix {
229
- --seed-box-gap: var(--seed-box-gap-md);
229
+ --seed-box-gap: var(--seed-box-gap-md, initial);
230
230
  }
231
231
 
232
232
  .seed-list-item__content {
233
- --seed-box-gap: var(--seed-box-gap-md);
234
- --seed-box-padding-right: var(--seed-box-padding-right-md);
233
+ --seed-box-gap: var(--seed-box-gap-md, initial);
234
+ --seed-box-padding-right: var(--seed-box-padding-right-md, initial);
235
235
  }
236
236
  }
237
237
 
238
238
  @media (width >= 1280px) {
239
239
  .seed-list-item__prefix {
240
- --seed-box-padding-right: var(--seed-box-padding-right-lg);
240
+ --seed-box-padding-right: var(--seed-box-padding-right-lg, initial);
241
241
  }
242
242
 
243
243
  .seed-list-item__suffix {
244
- --seed-box-gap: var(--seed-box-gap-lg);
244
+ --seed-box-gap: var(--seed-box-gap-lg, initial);
245
245
  }
246
246
 
247
247
  .seed-list-item__content {
248
- --seed-box-gap: var(--seed-box-gap-lg);
249
- --seed-box-padding-right: var(--seed-box-padding-right-lg);
248
+ --seed-box-gap: var(--seed-box-gap-lg, initial);
249
+ --seed-box-padding-right: var(--seed-box-padding-right-lg, initial);
250
250
  }
251
251
  }
252
252
 
253
253
  @media (width >= 1440px) {
254
254
  .seed-list-item__prefix {
255
- --seed-box-padding-right: var(--seed-box-padding-right-xl);
255
+ --seed-box-padding-right: var(--seed-box-padding-right-xl, initial);
256
256
  }
257
257
 
258
258
  .seed-list-item__suffix {
259
- --seed-box-gap: var(--seed-box-gap-xl);
259
+ --seed-box-gap: var(--seed-box-gap-xl, initial);
260
260
  }
261
261
 
262
262
  .seed-list-item__content {
263
- --seed-box-gap: var(--seed-box-gap-xl);
264
- --seed-box-padding-right: var(--seed-box-padding-right-xl);
263
+ --seed-box-gap: var(--seed-box-gap-xl, initial);
264
+ --seed-box-padding-right: var(--seed-box-padding-right-xl, initial);
265
265
  }
266
266
  }
267
267
  }
package/recipes/side-panel.css CHANGED
@@ -46,27 +46,28 @@
46
46
  background: var(--seed-color-bg-layer-floating);
47
47
  touch-action: none;
48
48
  will-change: transform;
49
- --seed-box-width-base: initial;
50
- --seed-box-width-sm: var(--seed-box-width-base);
51
- --seed-box-width-md: var(--seed-box-width-sm);
52
- --seed-box-width-lg: var(--seed-box-width-md);
53
- --seed-box-width-xl: var(--seed-box-width-lg);
54
- --seed-box-width: var(--seed-box-width-base);
49
+ --side-panel-default-width: calc(0.8 * 100vw);
50
+ --seed-box-width-base: var(--side-panel-default-width);
51
+ --seed-box-width-sm: var(--seed-box-width-base, initial);
52
+ --seed-box-width-md: var(--seed-box-width-sm, initial);
53
+ --seed-box-width-lg: var(--seed-box-width-md, initial);
54
+ --seed-box-width-xl: var(--seed-box-width-lg, initial);
55
+ --seed-box-width: var(--seed-box-width-base, initial);
55
56
  --seed-box-max-width-base: calc(0.8 * 100%);
56
- --seed-box-max-width-sm: var(--seed-box-max-width-base);
57
- --seed-box-max-width-md: var(--seed-box-max-width-sm);
58
- --seed-box-max-width-lg: var(--seed-box-max-width-md);
59
- --seed-box-max-width-xl: var(--seed-box-max-width-lg);
60
- --seed-box-max-width: var(--seed-box-max-width-base);
57
+ --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
58
+ --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
59
+ --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
60
+ --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
61
+ --seed-box-max-width: var(--seed-box-max-width-base, initial);
61
62
  top: 0;
62
63
  bottom: 0;
63
- width: var(--seed-box-width, calc(0.8 * 100vw));
64
+ width: var(--seed-box-width);
64
65
  max-width: var(--seed-box-max-width);
65
66
  padding-bottom: var(--seed-safe-area-bottom);
66
67
  }
67
68
  @media (min-width: 768px) {
68
69
  .seed-side-panel__content {
69
- width: var(--seed-box-width, var(--side-panel-size-width));
70
+ --side-panel-default-width: var(--side-panel-size-width);
70
71
  }
71
72
  }
72
73
  .seed-side-panel__content::after {
@@ -171,29 +172,29 @@
171
172
  flex: 1;
172
173
  overflow-y: auto;
173
174
  --seed-box-padding-x-base: var(--seed-dimension-x6);
174
- --seed-box-padding-x-sm: var(--seed-box-padding-x-base);
175
- --seed-box-padding-x-md: var(--seed-box-padding-x-sm);
176
- --seed-box-padding-x-lg: var(--seed-box-padding-x-md);
177
- --seed-box-padding-x-xl: var(--seed-box-padding-x-lg);
178
- --seed-box-padding-x: var(--seed-box-padding-x-base);
179
- --seed-box-height-base: initial;
180
- --seed-box-height-sm: var(--seed-box-height-base);
181
- --seed-box-height-md: var(--seed-box-height-sm);
182
- --seed-box-height-lg: var(--seed-box-height-md);
183
- --seed-box-height-xl: var(--seed-box-height-lg);
184
- --seed-box-height: var(--seed-box-height-base);
185
- --seed-box-min-height-base: initial;
186
- --seed-box-min-height-sm: var(--seed-box-min-height-base);
187
- --seed-box-min-height-md: var(--seed-box-min-height-sm);
188
- --seed-box-min-height-lg: var(--seed-box-min-height-md);
189
- --seed-box-min-height-xl: var(--seed-box-min-height-lg);
190
- --seed-box-min-height: var(--seed-box-min-height-base);
191
- --seed-box-max-height-base: initial;
192
- --seed-box-max-height-sm: var(--seed-box-max-height-base);
193
- --seed-box-max-height-md: var(--seed-box-max-height-sm);
194
- --seed-box-max-height-lg: var(--seed-box-max-height-md);
195
- --seed-box-max-height-xl: var(--seed-box-max-height-lg);
196
- --seed-box-max-height: var(--seed-box-max-height-base);
175
+ --seed-box-padding-x-sm: var(--seed-box-padding-x-base, initial);
176
+ --seed-box-padding-x-md: var(--seed-box-padding-x-sm, initial);
177
+ --seed-box-padding-x-lg: var(--seed-box-padding-x-md, initial);
178
+ --seed-box-padding-x-xl: var(--seed-box-padding-x-lg, initial);
179
+ --seed-box-padding-x: var(--seed-box-padding-x-base, initial);
180
+ --seed-box-height-base: auto;
181
+ --seed-box-height-sm: var(--seed-box-height-base, initial);
182
+ --seed-box-height-md: var(--seed-box-height-sm, initial);
183
+ --seed-box-height-lg: var(--seed-box-height-md, initial);
184
+ --seed-box-height-xl: var(--seed-box-height-lg, initial);
185
+ --seed-box-height: var(--seed-box-height-base, initial);
186
+ --seed-box-min-height-base: auto;
187
+ --seed-box-min-height-sm: var(--seed-box-min-height-base, initial);
188
+ --seed-box-min-height-md: var(--seed-box-min-height-sm, initial);
189
+ --seed-box-min-height-lg: var(--seed-box-min-height-md, initial);
190
+ --seed-box-min-height-xl: var(--seed-box-min-height-lg, initial);
191
+ --seed-box-min-height: var(--seed-box-min-height-base, initial);
192
+ --seed-box-max-height-base: none;
193
+ --seed-box-max-height-sm: var(--seed-box-max-height-base, initial);
194
+ --seed-box-max-height-md: var(--seed-box-max-height-sm, initial);
195
+ --seed-box-max-height-lg: var(--seed-box-max-height-md, initial);
196
+ --seed-box-max-height-xl: var(--seed-box-max-height-lg, initial);
197
+ --seed-box-max-height: var(--seed-box-max-height-base, initial);
197
198
  --seed-box-justify-content: initial;
198
199
  --seed-box-align-items: initial;
199
200
  padding-left: var(--seed-box-padding-x);
@@ -265,49 +266,49 @@
265
266
  }
266
267
  @media (min-width: 480px) {
267
268
  .seed-side-panel__content {
268
- --seed-box-width: var(--seed-box-width-sm);
269
- --seed-box-max-width: var(--seed-box-max-width-sm);
269
+ --seed-box-width: var(--seed-box-width-sm, initial);
270
+ --seed-box-max-width: var(--seed-box-max-width-sm, initial);
270
271
  }
271
272
  .seed-side-panel__body {
272
- --seed-box-padding-x: var(--seed-box-padding-x-sm);
273
- --seed-box-height: var(--seed-box-height-sm);
274
- --seed-box-min-height: var(--seed-box-min-height-sm);
275
- --seed-box-max-height: var(--seed-box-max-height-sm);
273
+ --seed-box-padding-x: var(--seed-box-padding-x-sm, initial);
274
+ --seed-box-height: var(--seed-box-height-sm, initial);
275
+ --seed-box-min-height: var(--seed-box-min-height-sm, initial);
276
+ --seed-box-max-height: var(--seed-box-max-height-sm, initial);
276
277
  }
277
278
  }
278
279
  @media (min-width: 768px) {
279
280
  .seed-side-panel__content {
280
- --seed-box-width: var(--seed-box-width-md);
281
- --seed-box-max-width: var(--seed-box-max-width-md);
281
+ --seed-box-width: var(--seed-box-width-md, initial);
282
+ --seed-box-max-width: var(--seed-box-max-width-md, initial);
282
283
  }
283
284
  .seed-side-panel__body {
284
- --seed-box-padding-x: var(--seed-box-padding-x-md);
285
- --seed-box-height: var(--seed-box-height-md);
286
- --seed-box-min-height: var(--seed-box-min-height-md);
287
- --seed-box-max-height: var(--seed-box-max-height-md);
285
+ --seed-box-padding-x: var(--seed-box-padding-x-md, initial);
286
+ --seed-box-height: var(--seed-box-height-md, initial);
287
+ --seed-box-min-height: var(--seed-box-min-height-md, initial);
288
+ --seed-box-max-height: var(--seed-box-max-height-md, initial);
288
289
  }
289
290
  }
290
291
  @media (min-width: 1280px) {
291
292
  .seed-side-panel__content {
292
- --seed-box-width: var(--seed-box-width-lg);
293
- --seed-box-max-width: var(--seed-box-max-width-lg);
293
+ --seed-box-width: var(--seed-box-width-lg, initial);
294
+ --seed-box-max-width: var(--seed-box-max-width-lg, initial);
294
295
  }
295
296
  .seed-side-panel__body {
296
- --seed-box-padding-x: var(--seed-box-padding-x-lg);
297
- --seed-box-height: var(--seed-box-height-lg);
298
- --seed-box-min-height: var(--seed-box-min-height-lg);
299
- --seed-box-max-height: var(--seed-box-max-height-lg);
297
+ --seed-box-padding-x: var(--seed-box-padding-x-lg, initial);
298
+ --seed-box-height: var(--seed-box-height-lg, initial);
299
+ --seed-box-min-height: var(--seed-box-min-height-lg, initial);
300
+ --seed-box-max-height: var(--seed-box-max-height-lg, initial);
300
301
  }
301
302
  }
302
303
  @media (min-width: 1440px) {
303
304
  .seed-side-panel__content {
304
- --seed-box-width: var(--seed-box-width-xl);
305
- --seed-box-max-width: var(--seed-box-max-width-xl);
305
+ --seed-box-width: var(--seed-box-width-xl, initial);
306
+ --seed-box-max-width: var(--seed-box-max-width-xl, initial);
306
307
  }
307
308
  .seed-side-panel__body {
308
- --seed-box-padding-x: var(--seed-box-padding-x-xl);
309
- --seed-box-height: var(--seed-box-height-xl);
310
- --seed-box-min-height: var(--seed-box-min-height-xl);
311
- --seed-box-max-height: var(--seed-box-max-height-xl);
309
+ --seed-box-padding-x: var(--seed-box-padding-x-xl, initial);
310
+ --seed-box-height: var(--seed-box-height-xl, initial);
311
+ --seed-box-min-height: var(--seed-box-min-height-xl, initial);
312
+ --seed-box-max-height: var(--seed-box-max-height-xl, initial);
312
313
  }
313
314
  }
package/recipes/side-panel.layered.css CHANGED
@@ -42,19 +42,20 @@
42
42
  background: var(--seed-color-bg-layer-floating);
43
43
  touch-action: none;
44
44
  will-change: transform;
45
- --seed-box-width-base: initial;
46
- --seed-box-width-sm: var(--seed-box-width-base);
47
- --seed-box-width-md: var(--seed-box-width-sm);
48
- --seed-box-width-lg: var(--seed-box-width-md);
49
- --seed-box-width-xl: var(--seed-box-width-lg);
50
- --seed-box-width: var(--seed-box-width-base);
45
+ --side-panel-default-width: calc(.8 * 100vw);
46
+ --seed-box-width-base: var(--side-panel-default-width);
47
+ --seed-box-width-sm: var(--seed-box-width-base, initial);
48
+ --seed-box-width-md: var(--seed-box-width-sm, initial);
49
+ --seed-box-width-lg: var(--seed-box-width-md, initial);
50
+ --seed-box-width-xl: var(--seed-box-width-lg, initial);
51
+ --seed-box-width: var(--seed-box-width-base, initial);
51
52
  --seed-box-max-width-base: calc(.8 * 100%);
52
- --seed-box-max-width-sm: var(--seed-box-max-width-base);
53
- --seed-box-max-width-md: var(--seed-box-max-width-sm);
54
- --seed-box-max-width-lg: var(--seed-box-max-width-md);
55
- --seed-box-max-width-xl: var(--seed-box-max-width-lg);
56
- --seed-box-max-width: var(--seed-box-max-width-base);
57
- width: var(--seed-box-width, calc(.8 * 100vw));
53
+ --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
54
+ --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
55
+ --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
56
+ --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
57
+ --seed-box-max-width: var(--seed-box-max-width-base, initial);
58
+ width: var(--seed-box-width);
58
59
  max-width: var(--seed-box-max-width);
59
60
  padding-bottom: var(--seed-safe-area-bottom);
60
61
  flex-direction: column;
@@ -66,7 +67,7 @@
66
67
 
67
68
  @media (width >= 768px) {
68
69
  .seed-side-panel__content {
69
- width: var(--seed-box-width, var(--side-panel-size-width));
70
+ --side-panel-default-width: var(--side-panel-size-width);
70
71
  }
71
72
  }
72
73
 
@@ -182,29 +183,29 @@
182
183
  .seed-side-panel__body {
183
184
  box-sizing: border-box;
184
185
  --seed-box-padding-x-base: var(--seed-dimension-x6);
185
- --seed-box-padding-x-sm: var(--seed-box-padding-x-base);
186
- --seed-box-padding-x-md: var(--seed-box-padding-x-sm);
187
- --seed-box-padding-x-lg: var(--seed-box-padding-x-md);
188
- --seed-box-padding-x-xl: var(--seed-box-padding-x-lg);
189
- --seed-box-padding-x: var(--seed-box-padding-x-base);
190
- --seed-box-height-base: initial;
191
- --seed-box-height-sm: var(--seed-box-height-base);
192
- --seed-box-height-md: var(--seed-box-height-sm);
193
- --seed-box-height-lg: var(--seed-box-height-md);
194
- --seed-box-height-xl: var(--seed-box-height-lg);
195
- --seed-box-height: var(--seed-box-height-base);
196
- --seed-box-min-height-base: initial;
197
- --seed-box-min-height-sm: var(--seed-box-min-height-base);
198
- --seed-box-min-height-md: var(--seed-box-min-height-sm);
199
- --seed-box-min-height-lg: var(--seed-box-min-height-md);
200
- --seed-box-min-height-xl: var(--seed-box-min-height-lg);
201
- --seed-box-min-height: var(--seed-box-min-height-base);
202
- --seed-box-max-height-base: initial;
203
- --seed-box-max-height-sm: var(--seed-box-max-height-base);
204
- --seed-box-max-height-md: var(--seed-box-max-height-sm);
205
- --seed-box-max-height-lg: var(--seed-box-max-height-md);
206
- --seed-box-max-height-xl: var(--seed-box-max-height-lg);
207
- --seed-box-max-height: var(--seed-box-max-height-base);
186
+ --seed-box-padding-x-sm: var(--seed-box-padding-x-base, initial);
187
+ --seed-box-padding-x-md: var(--seed-box-padding-x-sm, initial);
188
+ --seed-box-padding-x-lg: var(--seed-box-padding-x-md, initial);
189
+ --seed-box-padding-x-xl: var(--seed-box-padding-x-lg, initial);
190
+ --seed-box-padding-x: var(--seed-box-padding-x-base, initial);
191
+ --seed-box-height-base: auto;
192
+ --seed-box-height-sm: var(--seed-box-height-base, initial);
193
+ --seed-box-height-md: var(--seed-box-height-sm, initial);
194
+ --seed-box-height-lg: var(--seed-box-height-md, initial);
195
+ --seed-box-height-xl: var(--seed-box-height-lg, initial);
196
+ --seed-box-height: var(--seed-box-height-base, initial);
197
+ --seed-box-min-height-base: auto;
198
+ --seed-box-min-height-sm: var(--seed-box-min-height-base, initial);
199
+ --seed-box-min-height-md: var(--seed-box-min-height-sm, initial);
200
+ --seed-box-min-height-lg: var(--seed-box-min-height-md, initial);
201
+ --seed-box-min-height-xl: var(--seed-box-min-height-lg, initial);
202
+ --seed-box-min-height: var(--seed-box-min-height-base, initial);
203
+ --seed-box-max-height-base: none;
204
+ --seed-box-max-height-sm: var(--seed-box-max-height-base, initial);
205
+ --seed-box-max-height-md: var(--seed-box-max-height-sm, initial);
206
+ --seed-box-max-height-lg: var(--seed-box-max-height-md, initial);
207
+ --seed-box-max-height-xl: var(--seed-box-max-height-lg, initial);
208
+ --seed-box-max-height: var(--seed-box-max-height-base, initial);
208
209
  --seed-box-justify-content: initial;
209
210
  --seed-box-align-items: initial;
210
211
  padding-left: var(--seed-box-padding-x);
@@ -291,57 +292,57 @@
291
292
 
292
293
  @media (width >= 480px) {
293
294
  .seed-side-panel__content {
294
- --seed-box-width: var(--seed-box-width-sm);
295
- --seed-box-max-width: var(--seed-box-max-width-sm);
295
+ --seed-box-width: var(--seed-box-width-sm, initial);
296
+ --seed-box-max-width: var(--seed-box-max-width-sm, initial);
296
297
  }
297
298
 
298
299
  .seed-side-panel__body {
299
- --seed-box-padding-x: var(--seed-box-padding-x-sm);
300
- --seed-box-height: var(--seed-box-height-sm);
301
- --seed-box-min-height: var(--seed-box-min-height-sm);
302
- --seed-box-max-height: var(--seed-box-max-height-sm);
300
+ --seed-box-padding-x: var(--seed-box-padding-x-sm, initial);
301
+ --seed-box-height: var(--seed-box-height-sm, initial);
302
+ --seed-box-min-height: var(--seed-box-min-height-sm, initial);
303
+ --seed-box-max-height: var(--seed-box-max-height-sm, initial);
303
304
  }
304
305
  }
305
306
 
306
307
  @media (width >= 768px) {
307
308
  .seed-side-panel__content {
308
- --seed-box-width: var(--seed-box-width-md);
309
- --seed-box-max-width: var(--seed-box-max-width-md);
309
+ --seed-box-width: var(--seed-box-width-md, initial);
310
+ --seed-box-max-width: var(--seed-box-max-width-md, initial);
310
311
  }
311
312
 
312
313
  .seed-side-panel__body {
313
- --seed-box-padding-x: var(--seed-box-padding-x-md);
314
- --seed-box-height: var(--seed-box-height-md);
315
- --seed-box-min-height: var(--seed-box-min-height-md);
316
- --seed-box-max-height: var(--seed-box-max-height-md);
314
+ --seed-box-padding-x: var(--seed-box-padding-x-md, initial);
315
+ --seed-box-height: var(--seed-box-height-md, initial);
316
+ --seed-box-min-height: var(--seed-box-min-height-md, initial);
317
+ --seed-box-max-height: var(--seed-box-max-height-md, initial);
317
318
  }
318
319
  }
319
320
 
320
321
  @media (width >= 1280px) {
321
322
  .seed-side-panel__content {
322
- --seed-box-width: var(--seed-box-width-lg);
323
- --seed-box-max-width: var(--seed-box-max-width-lg);
323
+ --seed-box-width: var(--seed-box-width-lg, initial);
324
+ --seed-box-max-width: var(--seed-box-max-width-lg, initial);
324
325
  }
325
326
 
326
327
  .seed-side-panel__body {
327
- --seed-box-padding-x: var(--seed-box-padding-x-lg);
328
- --seed-box-height: var(--seed-box-height-lg);
329
- --seed-box-min-height: var(--seed-box-min-height-lg);
330
- --seed-box-max-height: var(--seed-box-max-height-lg);
328
+ --seed-box-padding-x: var(--seed-box-padding-x-lg, initial);
329
+ --seed-box-height: var(--seed-box-height-lg, initial);
330
+ --seed-box-min-height: var(--seed-box-min-height-lg, initial);
331
+ --seed-box-max-height: var(--seed-box-max-height-lg, initial);
331
332
  }
332
333
  }
333
334
 
334
335
  @media (width >= 1440px) {
335
336
  .seed-side-panel__content {
336
- --seed-box-width: var(--seed-box-width-xl);
337
- --seed-box-max-width: var(--seed-box-max-width-xl);
337
+ --seed-box-width: var(--seed-box-width-xl, initial);
338
+ --seed-box-max-width: var(--seed-box-max-width-xl, initial);
338
339
  }
339
340
 
340
341
  .seed-side-panel__body {
341
- --seed-box-padding-x: var(--seed-box-padding-x-xl);
342
- --seed-box-height: var(--seed-box-height-xl);
343
- --seed-box-min-height: var(--seed-box-min-height-xl);
344
- --seed-box-max-height: var(--seed-box-max-height-xl);
342
+ --seed-box-padding-x: var(--seed-box-padding-x-xl, initial);
343
+ --seed-box-height: var(--seed-box-height-xl, initial);
344
+ --seed-box-min-height: var(--seed-box-min-height-xl, initial);
345
+ --seed-box-max-height: var(--seed-box-max-height-xl, initial);
345
346
  }
346
347
  }
347
348
  }
package/recipes/skeleton.css CHANGED
@@ -2,18 +2,18 @@
2
2
  display: inline-block;
3
3
  box-sizing: border-box;
4
4
  overflow: hidden;
5
- --seed-box-width-base: initial;
6
- --seed-box-width-sm: var(--seed-box-width-base);
7
- --seed-box-width-md: var(--seed-box-width-sm);
8
- --seed-box-width-lg: var(--seed-box-width-md);
9
- --seed-box-width-xl: var(--seed-box-width-lg);
10
- --seed-box-width: var(--seed-box-width-base);
11
- --seed-box-height-base: initial;
12
- --seed-box-height-sm: var(--seed-box-height-base);
13
- --seed-box-height-md: var(--seed-box-height-sm);
14
- --seed-box-height-lg: var(--seed-box-height-md);
15
- --seed-box-height-xl: var(--seed-box-height-lg);
16
- --seed-box-height: var(--seed-box-height-base);
5
+ --seed-box-width-base: auto;
6
+ --seed-box-width-sm: var(--seed-box-width-base, initial);
7
+ --seed-box-width-md: var(--seed-box-width-sm, initial);
8
+ --seed-box-width-lg: var(--seed-box-width-md, initial);
9
+ --seed-box-width-xl: var(--seed-box-width-lg, initial);
10
+ --seed-box-width: var(--seed-box-width-base, initial);
11
+ --seed-box-height-base: auto;
12
+ --seed-box-height-sm: var(--seed-box-height-base, initial);
13
+ --seed-box-height-md: var(--seed-box-height-sm, initial);
14
+ --seed-box-height-lg: var(--seed-box-height-md, initial);
15
+ --seed-box-height-xl: var(--seed-box-height-lg, initial);
16
+ --seed-box-height: var(--seed-box-height-base, initial);
17
17
  width: var(--seed-box-width);
18
18
  height: var(--seed-box-height);
19
19
  }
@@ -55,25 +55,25 @@
55
55
  }
56
56
  @media (min-width: 480px) {
57
57
  .seed-skeleton {
58
- --seed-box-width: var(--seed-box-width-sm);
59
- --seed-box-height: var(--seed-box-height-sm);
58
+ --seed-box-width: var(--seed-box-width-sm, initial);
59
+ --seed-box-height: var(--seed-box-height-sm, initial);
60
60
  }
61
61
  }
62
62
  @media (min-width: 768px) {
63
63
  .seed-skeleton {
64
- --seed-box-width: var(--seed-box-width-md);
65
- --seed-box-height: var(--seed-box-height-md);
64
+ --seed-box-width: var(--seed-box-width-md, initial);
65
+ --seed-box-height: var(--seed-box-height-md, initial);
66
66
  }
67
67
  }
68
68
  @media (min-width: 1280px) {
69
69
  .seed-skeleton {
70
- --seed-box-width: var(--seed-box-width-lg);
71
- --seed-box-height: var(--seed-box-height-lg);
70
+ --seed-box-width: var(--seed-box-width-lg, initial);
71
+ --seed-box-height: var(--seed-box-height-lg, initial);
72
72
  }
73
73
  }
74
74
  @media (min-width: 1440px) {
75
75
  .seed-skeleton {
76
- --seed-box-width: var(--seed-box-width-xl);
77
- --seed-box-height: var(--seed-box-height-xl);
76
+ --seed-box-width: var(--seed-box-width-xl, initial);
77
+ --seed-box-height: var(--seed-box-height-xl, initial);
78
78
  }
79
79
  }
package/recipes/skeleton.layered.css CHANGED
@@ -1,18 +1,18 @@
1
1
  @layer seed-components {
2
2
  .seed-skeleton {
3
3
  box-sizing: border-box;
4
- --seed-box-width-base: initial;
5
- --seed-box-width-sm: var(--seed-box-width-base);
6
- --seed-box-width-md: var(--seed-box-width-sm);
7
- --seed-box-width-lg: var(--seed-box-width-md);
8
- --seed-box-width-xl: var(--seed-box-width-lg);
9
- --seed-box-width: var(--seed-box-width-base);
10
- --seed-box-height-base: initial;
11
- --seed-box-height-sm: var(--seed-box-height-base);
12
- --seed-box-height-md: var(--seed-box-height-sm);
13
- --seed-box-height-lg: var(--seed-box-height-md);
14
- --seed-box-height-xl: var(--seed-box-height-lg);
15
- --seed-box-height: var(--seed-box-height-base);
4
+ --seed-box-width-base: auto;
5
+ --seed-box-width-sm: var(--seed-box-width-base, initial);
6
+ --seed-box-width-md: var(--seed-box-width-sm, initial);
7
+ --seed-box-width-lg: var(--seed-box-width-md, initial);
8
+ --seed-box-width-xl: var(--seed-box-width-lg, initial);
9
+ --seed-box-width: var(--seed-box-width-base, initial);
10
+ --seed-box-height-base: auto;
11
+ --seed-box-height-sm: var(--seed-box-height-base, initial);
12
+ --seed-box-height-md: var(--seed-box-height-sm, initial);
13
+ --seed-box-height-lg: var(--seed-box-height-md, initial);
14
+ --seed-box-height-xl: var(--seed-box-height-lg, initial);
15
+ --seed-box-height: var(--seed-box-height-base, initial);
16
16
  width: var(--seed-box-width);
17
17
  height: var(--seed-box-height);
18
18
  display: inline-block;
@@ -66,29 +66,29 @@
66
66
 
67
67
  @media (width >= 480px) {
68
68
  .seed-skeleton {
69
- --seed-box-width: var(--seed-box-width-sm);
70
- --seed-box-height: var(--seed-box-height-sm);
69
+ --seed-box-width: var(--seed-box-width-sm, initial);
70
+ --seed-box-height: var(--seed-box-height-sm, initial);
71
71
  }
72
72
  }
73
73
 
74
74
  @media (width >= 768px) {
75
75
  .seed-skeleton {
76
- --seed-box-width: var(--seed-box-width-md);
77
- --seed-box-height: var(--seed-box-height-md);
76
+ --seed-box-width: var(--seed-box-width-md, initial);
77
+ --seed-box-height: var(--seed-box-height-md, initial);
78
78
  }
79
79
  }
80
80
 
81
81
  @media (width >= 1280px) {
82
82
  .seed-skeleton {
83
- --seed-box-width: var(--seed-box-width-lg);
84
- --seed-box-height: var(--seed-box-height-lg);
83
+ --seed-box-width: var(--seed-box-width-lg, initial);
84
+ --seed-box-height: var(--seed-box-height-lg, initial);
85
85
  }
86
86
  }
87
87
 
88
88
  @media (width >= 1440px) {
89
89
  .seed-skeleton {
90
- --seed-box-width: var(--seed-box-width-xl);
91
- --seed-box-height: var(--seed-box-height-xl);
90
+ --seed-box-width: var(--seed-box-width-xl, initial);
91
+ --seed-box-height: var(--seed-box-height-xl, initial);
92
92
  }
93
93
  }
94
94
  }