@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/action-button.css CHANGED
@@ -27,29 +27,29 @@
27
27
  padding-left: var(--seed-box-padding-left);
28
28
  padding-right: var(--seed-box-padding-right);
29
29
  --seed-box-bleed-bottom-base: 0px;
30
- --seed-box-bleed-bottom-sm: var(--seed-box-bleed-bottom-base);
31
- --seed-box-bleed-bottom-md: var(--seed-box-bleed-bottom-sm);
32
- --seed-box-bleed-bottom-lg: var(--seed-box-bleed-bottom-md);
33
- --seed-box-bleed-bottom-xl: var(--seed-box-bleed-bottom-lg);
34
- --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-base);
30
+ --seed-box-bleed-bottom-sm: var(--seed-box-bleed-bottom-base, initial);
31
+ --seed-box-bleed-bottom-md: var(--seed-box-bleed-bottom-sm, initial);
32
+ --seed-box-bleed-bottom-lg: var(--seed-box-bleed-bottom-md, initial);
33
+ --seed-box-bleed-bottom-xl: var(--seed-box-bleed-bottom-lg, initial);
34
+ --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-base, initial);
35
35
  --seed-box-bleed-top-base: 0px;
36
- --seed-box-bleed-top-sm: var(--seed-box-bleed-top-base);
37
- --seed-box-bleed-top-md: var(--seed-box-bleed-top-sm);
38
- --seed-box-bleed-top-lg: var(--seed-box-bleed-top-md);
39
- --seed-box-bleed-top-xl: var(--seed-box-bleed-top-lg);
40
- --seed-box-bleed-top: var(--seed-box-bleed-top-base);
36
+ --seed-box-bleed-top-sm: var(--seed-box-bleed-top-base, initial);
37
+ --seed-box-bleed-top-md: var(--seed-box-bleed-top-sm, initial);
38
+ --seed-box-bleed-top-lg: var(--seed-box-bleed-top-md, initial);
39
+ --seed-box-bleed-top-xl: var(--seed-box-bleed-top-lg, initial);
40
+ --seed-box-bleed-top: var(--seed-box-bleed-top-base, initial);
41
41
  --seed-box-bleed-left-base: 0px;
42
- --seed-box-bleed-left-sm: var(--seed-box-bleed-left-base);
43
- --seed-box-bleed-left-md: var(--seed-box-bleed-left-sm);
44
- --seed-box-bleed-left-lg: var(--seed-box-bleed-left-md);
45
- --seed-box-bleed-left-xl: var(--seed-box-bleed-left-lg);
46
- --seed-box-bleed-left: var(--seed-box-bleed-left-base);
42
+ --seed-box-bleed-left-sm: var(--seed-box-bleed-left-base, initial);
43
+ --seed-box-bleed-left-md: var(--seed-box-bleed-left-sm, initial);
44
+ --seed-box-bleed-left-lg: var(--seed-box-bleed-left-md, initial);
45
+ --seed-box-bleed-left-xl: var(--seed-box-bleed-left-lg, initial);
46
+ --seed-box-bleed-left: var(--seed-box-bleed-left-base, initial);
47
47
  --seed-box-bleed-right-base: 0px;
48
- --seed-box-bleed-right-sm: var(--seed-box-bleed-right-base);
49
- --seed-box-bleed-right-md: var(--seed-box-bleed-right-sm);
50
- --seed-box-bleed-right-lg: var(--seed-box-bleed-right-md);
51
- --seed-box-bleed-right-xl: var(--seed-box-bleed-right-lg);
52
- --seed-box-bleed-right: var(--seed-box-bleed-right-base);
48
+ --seed-box-bleed-right-sm: var(--seed-box-bleed-right-base, initial);
49
+ --seed-box-bleed-right-md: var(--seed-box-bleed-right-sm, initial);
50
+ --seed-box-bleed-right-lg: var(--seed-box-bleed-right-md, initial);
51
+ --seed-box-bleed-right-xl: var(--seed-box-bleed-right-lg, initial);
52
+ --seed-box-bleed-right: var(--seed-box-bleed-right-base, initial);
53
53
  margin-top: calc(var(--seed-box-bleed-top) * -1);
54
54
  margin-bottom: calc(var(--seed-box-bleed-bottom) * -1);
55
55
  margin-left: calc(var(--seed-box-bleed-left) * -1);
@@ -391,33 +391,33 @@
391
391
  }
392
392
  @media (min-width: 480px) {
393
393
  .seed-action-button {
394
- --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-sm);
395
- --seed-box-bleed-top: var(--seed-box-bleed-top-sm);
396
- --seed-box-bleed-left: var(--seed-box-bleed-left-sm);
397
- --seed-box-bleed-right: var(--seed-box-bleed-right-sm);
394
+ --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-sm, initial);
395
+ --seed-box-bleed-top: var(--seed-box-bleed-top-sm, initial);
396
+ --seed-box-bleed-left: var(--seed-box-bleed-left-sm, initial);
397
+ --seed-box-bleed-right: var(--seed-box-bleed-right-sm, initial);
398
398
  }
399
399
  }
400
400
  @media (min-width: 768px) {
401
401
  .seed-action-button {
402
- --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-md);
403
- --seed-box-bleed-top: var(--seed-box-bleed-top-md);
404
- --seed-box-bleed-left: var(--seed-box-bleed-left-md);
405
- --seed-box-bleed-right: var(--seed-box-bleed-right-md);
402
+ --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-md, initial);
403
+ --seed-box-bleed-top: var(--seed-box-bleed-top-md, initial);
404
+ --seed-box-bleed-left: var(--seed-box-bleed-left-md, initial);
405
+ --seed-box-bleed-right: var(--seed-box-bleed-right-md, initial);
406
406
  }
407
407
  }
408
408
  @media (min-width: 1280px) {
409
409
  .seed-action-button {
410
- --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-lg);
411
- --seed-box-bleed-top: var(--seed-box-bleed-top-lg);
412
- --seed-box-bleed-left: var(--seed-box-bleed-left-lg);
413
- --seed-box-bleed-right: var(--seed-box-bleed-right-lg);
410
+ --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-lg, initial);
411
+ --seed-box-bleed-top: var(--seed-box-bleed-top-lg, initial);
412
+ --seed-box-bleed-left: var(--seed-box-bleed-left-lg, initial);
413
+ --seed-box-bleed-right: var(--seed-box-bleed-right-lg, initial);
414
414
  }
415
415
  }
416
416
  @media (min-width: 1440px) {
417
417
  .seed-action-button {
418
- --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-xl);
419
- --seed-box-bleed-top: var(--seed-box-bleed-top-xl);
420
- --seed-box-bleed-left: var(--seed-box-bleed-left-xl);
421
- --seed-box-bleed-right: var(--seed-box-bleed-right-xl);
418
+ --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-xl, initial);
419
+ --seed-box-bleed-top: var(--seed-box-bleed-top-xl, initial);
420
+ --seed-box-bleed-left: var(--seed-box-bleed-left-xl, initial);
421
+ --seed-box-bleed-right: var(--seed-box-bleed-right-xl, initial);
422
422
  }
423
423
  }
package/recipes/action-button.layered.css CHANGED
@@ -21,29 +21,29 @@
21
21
  padding-left: var(--seed-box-padding-left);
22
22
  padding-right: var(--seed-box-padding-right);
23
23
  --seed-box-bleed-bottom-base: 0px;
24
- --seed-box-bleed-bottom-sm: var(--seed-box-bleed-bottom-base);
25
- --seed-box-bleed-bottom-md: var(--seed-box-bleed-bottom-sm);
26
- --seed-box-bleed-bottom-lg: var(--seed-box-bleed-bottom-md);
27
- --seed-box-bleed-bottom-xl: var(--seed-box-bleed-bottom-lg);
28
- --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-base);
24
+ --seed-box-bleed-bottom-sm: var(--seed-box-bleed-bottom-base, initial);
25
+ --seed-box-bleed-bottom-md: var(--seed-box-bleed-bottom-sm, initial);
26
+ --seed-box-bleed-bottom-lg: var(--seed-box-bleed-bottom-md, initial);
27
+ --seed-box-bleed-bottom-xl: var(--seed-box-bleed-bottom-lg, initial);
28
+ --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-base, initial);
29
29
  --seed-box-bleed-top-base: 0px;
30
- --seed-box-bleed-top-sm: var(--seed-box-bleed-top-base);
31
- --seed-box-bleed-top-md: var(--seed-box-bleed-top-sm);
32
- --seed-box-bleed-top-lg: var(--seed-box-bleed-top-md);
33
- --seed-box-bleed-top-xl: var(--seed-box-bleed-top-lg);
34
- --seed-box-bleed-top: var(--seed-box-bleed-top-base);
30
+ --seed-box-bleed-top-sm: var(--seed-box-bleed-top-base, initial);
31
+ --seed-box-bleed-top-md: var(--seed-box-bleed-top-sm, initial);
32
+ --seed-box-bleed-top-lg: var(--seed-box-bleed-top-md, initial);
33
+ --seed-box-bleed-top-xl: var(--seed-box-bleed-top-lg, initial);
34
+ --seed-box-bleed-top: var(--seed-box-bleed-top-base, initial);
35
35
  --seed-box-bleed-left-base: 0px;
36
- --seed-box-bleed-left-sm: var(--seed-box-bleed-left-base);
37
- --seed-box-bleed-left-md: var(--seed-box-bleed-left-sm);
38
- --seed-box-bleed-left-lg: var(--seed-box-bleed-left-md);
39
- --seed-box-bleed-left-xl: var(--seed-box-bleed-left-lg);
40
- --seed-box-bleed-left: var(--seed-box-bleed-left-base);
36
+ --seed-box-bleed-left-sm: var(--seed-box-bleed-left-base, initial);
37
+ --seed-box-bleed-left-md: var(--seed-box-bleed-left-sm, initial);
38
+ --seed-box-bleed-left-lg: var(--seed-box-bleed-left-md, initial);
39
+ --seed-box-bleed-left-xl: var(--seed-box-bleed-left-lg, initial);
40
+ --seed-box-bleed-left: var(--seed-box-bleed-left-base, initial);
41
41
  --seed-box-bleed-right-base: 0px;
42
- --seed-box-bleed-right-sm: var(--seed-box-bleed-right-base);
43
- --seed-box-bleed-right-md: var(--seed-box-bleed-right-sm);
44
- --seed-box-bleed-right-lg: var(--seed-box-bleed-right-md);
45
- --seed-box-bleed-right-xl: var(--seed-box-bleed-right-lg);
46
- --seed-box-bleed-right: var(--seed-box-bleed-right-base);
42
+ --seed-box-bleed-right-sm: var(--seed-box-bleed-right-base, initial);
43
+ --seed-box-bleed-right-md: var(--seed-box-bleed-right-sm, initial);
44
+ --seed-box-bleed-right-lg: var(--seed-box-bleed-right-md, initial);
45
+ --seed-box-bleed-right-xl: var(--seed-box-bleed-right-lg, initial);
46
+ --seed-box-bleed-right: var(--seed-box-bleed-right-base, initial);
47
47
  margin-top: calc(var(--seed-box-bleed-top) * -1);
48
48
  margin-bottom: calc(var(--seed-box-bleed-bottom) * -1);
49
49
  margin-left: calc(var(--seed-box-bleed-left) * -1);
@@ -441,37 +441,37 @@
441
441
 
442
442
  @media (width >= 480px) {
443
443
  .seed-action-button {
444
- --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-sm);
445
- --seed-box-bleed-top: var(--seed-box-bleed-top-sm);
446
- --seed-box-bleed-left: var(--seed-box-bleed-left-sm);
447
- --seed-box-bleed-right: var(--seed-box-bleed-right-sm);
444
+ --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-sm, initial);
445
+ --seed-box-bleed-top: var(--seed-box-bleed-top-sm, initial);
446
+ --seed-box-bleed-left: var(--seed-box-bleed-left-sm, initial);
447
+ --seed-box-bleed-right: var(--seed-box-bleed-right-sm, initial);
448
448
  }
449
449
  }
450
450
 
451
451
  @media (width >= 768px) {
452
452
  .seed-action-button {
453
- --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-md);
454
- --seed-box-bleed-top: var(--seed-box-bleed-top-md);
455
- --seed-box-bleed-left: var(--seed-box-bleed-left-md);
456
- --seed-box-bleed-right: var(--seed-box-bleed-right-md);
453
+ --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-md, initial);
454
+ --seed-box-bleed-top: var(--seed-box-bleed-top-md, initial);
455
+ --seed-box-bleed-left: var(--seed-box-bleed-left-md, initial);
456
+ --seed-box-bleed-right: var(--seed-box-bleed-right-md, initial);
457
457
  }
458
458
  }
459
459
 
460
460
  @media (width >= 1280px) {
461
461
  .seed-action-button {
462
- --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-lg);
463
- --seed-box-bleed-top: var(--seed-box-bleed-top-lg);
464
- --seed-box-bleed-left: var(--seed-box-bleed-left-lg);
465
- --seed-box-bleed-right: var(--seed-box-bleed-right-lg);
462
+ --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-lg, initial);
463
+ --seed-box-bleed-top: var(--seed-box-bleed-top-lg, initial);
464
+ --seed-box-bleed-left: var(--seed-box-bleed-left-lg, initial);
465
+ --seed-box-bleed-right: var(--seed-box-bleed-right-lg, initial);
466
466
  }
467
467
  }
468
468
 
469
469
  @media (width >= 1440px) {
470
470
  .seed-action-button {
471
- --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-xl);
472
- --seed-box-bleed-top: var(--seed-box-bleed-top-xl);
473
- --seed-box-bleed-left: var(--seed-box-bleed-left-xl);
474
- --seed-box-bleed-right: var(--seed-box-bleed-right-xl);
471
+ --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-xl, initial);
472
+ --seed-box-bleed-top: var(--seed-box-bleed-top-xl, initial);
473
+ --seed-box-bleed-left: var(--seed-box-bleed-left-xl, initial);
474
+ --seed-box-bleed-right: var(--seed-box-bleed-right-xl, initial);
475
475
  }
476
476
  }
477
477
  }
package/recipes/bottom-sheet.css CHANGED
@@ -93,29 +93,29 @@
93
93
  display: flex;
94
94
  flex-direction: column;
95
95
  --seed-box-padding-x-base: var(--seed-dimension-spacing-x-global-gutter);
96
- --seed-box-padding-x-sm: var(--seed-box-padding-x-base);
97
- --seed-box-padding-x-md: var(--seed-box-padding-x-sm);
98
- --seed-box-padding-x-lg: var(--seed-box-padding-x-md);
99
- --seed-box-padding-x-xl: var(--seed-box-padding-x-lg);
100
- --seed-box-padding-x: var(--seed-box-padding-x-base);
101
- --seed-box-height-base: initial;
102
- --seed-box-height-sm: var(--seed-box-height-base);
103
- --seed-box-height-md: var(--seed-box-height-sm);
104
- --seed-box-height-lg: var(--seed-box-height-md);
105
- --seed-box-height-xl: var(--seed-box-height-lg);
106
- --seed-box-height: var(--seed-box-height-base);
107
- --seed-box-min-height-base: initial;
108
- --seed-box-min-height-sm: var(--seed-box-min-height-base);
109
- --seed-box-min-height-md: var(--seed-box-min-height-sm);
110
- --seed-box-min-height-lg: var(--seed-box-min-height-md);
111
- --seed-box-min-height-xl: var(--seed-box-min-height-lg);
112
- --seed-box-min-height: var(--seed-box-min-height-base);
113
- --seed-box-max-height-base: initial;
114
- --seed-box-max-height-sm: var(--seed-box-max-height-base);
115
- --seed-box-max-height-md: var(--seed-box-max-height-sm);
116
- --seed-box-max-height-lg: var(--seed-box-max-height-md);
117
- --seed-box-max-height-xl: var(--seed-box-max-height-lg);
118
- --seed-box-max-height: var(--seed-box-max-height-base);
96
+ --seed-box-padding-x-sm: var(--seed-box-padding-x-base, initial);
97
+ --seed-box-padding-x-md: var(--seed-box-padding-x-sm, initial);
98
+ --seed-box-padding-x-lg: var(--seed-box-padding-x-md, initial);
99
+ --seed-box-padding-x-xl: var(--seed-box-padding-x-lg, initial);
100
+ --seed-box-padding-x: var(--seed-box-padding-x-base, initial);
101
+ --seed-box-height-base: auto;
102
+ --seed-box-height-sm: var(--seed-box-height-base, initial);
103
+ --seed-box-height-md: var(--seed-box-height-sm, initial);
104
+ --seed-box-height-lg: var(--seed-box-height-md, initial);
105
+ --seed-box-height-xl: var(--seed-box-height-lg, initial);
106
+ --seed-box-height: var(--seed-box-height-base, initial);
107
+ --seed-box-min-height-base: auto;
108
+ --seed-box-min-height-sm: var(--seed-box-min-height-base, initial);
109
+ --seed-box-min-height-md: var(--seed-box-min-height-sm, initial);
110
+ --seed-box-min-height-lg: var(--seed-box-min-height-md, initial);
111
+ --seed-box-min-height-xl: var(--seed-box-min-height-lg, initial);
112
+ --seed-box-min-height: var(--seed-box-min-height-base, initial);
113
+ --seed-box-max-height-base: none;
114
+ --seed-box-max-height-sm: var(--seed-box-max-height-base, initial);
115
+ --seed-box-max-height-md: var(--seed-box-max-height-sm, initial);
116
+ --seed-box-max-height-lg: var(--seed-box-max-height-md, initial);
117
+ --seed-box-max-height-xl: var(--seed-box-max-height-lg, initial);
118
+ --seed-box-max-height: var(--seed-box-max-height-base, initial);
119
119
  --seed-box-justify-content: initial;
120
120
  --seed-box-align-items: initial;
121
121
  padding-left: var(--seed-box-padding-x);
@@ -230,33 +230,33 @@
230
230
  }
231
231
  @media (min-width: 480px) {
232
232
  .seed-bottom-sheet__body {
233
- --seed-box-padding-x: var(--seed-box-padding-x-sm);
234
- --seed-box-height: var(--seed-box-height-sm);
235
- --seed-box-min-height: var(--seed-box-min-height-sm);
236
- --seed-box-max-height: var(--seed-box-max-height-sm);
233
+ --seed-box-padding-x: var(--seed-box-padding-x-sm, initial);
234
+ --seed-box-height: var(--seed-box-height-sm, initial);
235
+ --seed-box-min-height: var(--seed-box-min-height-sm, initial);
236
+ --seed-box-max-height: var(--seed-box-max-height-sm, initial);
237
237
  }
238
238
  }
239
239
  @media (min-width: 768px) {
240
240
  .seed-bottom-sheet__body {
241
- --seed-box-padding-x: var(--seed-box-padding-x-md);
242
- --seed-box-height: var(--seed-box-height-md);
243
- --seed-box-min-height: var(--seed-box-min-height-md);
244
- --seed-box-max-height: var(--seed-box-max-height-md);
241
+ --seed-box-padding-x: var(--seed-box-padding-x-md, initial);
242
+ --seed-box-height: var(--seed-box-height-md, initial);
243
+ --seed-box-min-height: var(--seed-box-min-height-md, initial);
244
+ --seed-box-max-height: var(--seed-box-max-height-md, initial);
245
245
  }
246
246
  }
247
247
  @media (min-width: 1280px) {
248
248
  .seed-bottom-sheet__body {
249
- --seed-box-padding-x: var(--seed-box-padding-x-lg);
250
- --seed-box-height: var(--seed-box-height-lg);
251
- --seed-box-min-height: var(--seed-box-min-height-lg);
252
- --seed-box-max-height: var(--seed-box-max-height-lg);
249
+ --seed-box-padding-x: var(--seed-box-padding-x-lg, initial);
250
+ --seed-box-height: var(--seed-box-height-lg, initial);
251
+ --seed-box-min-height: var(--seed-box-min-height-lg, initial);
252
+ --seed-box-max-height: var(--seed-box-max-height-lg, initial);
253
253
  }
254
254
  }
255
255
  @media (min-width: 1440px) {
256
256
  .seed-bottom-sheet__body {
257
- --seed-box-padding-x: var(--seed-box-padding-x-xl);
258
- --seed-box-height: var(--seed-box-height-xl);
259
- --seed-box-min-height: var(--seed-box-min-height-xl);
260
- --seed-box-max-height: var(--seed-box-max-height-xl);
257
+ --seed-box-padding-x: var(--seed-box-padding-x-xl, initial);
258
+ --seed-box-height: var(--seed-box-height-xl, initial);
259
+ --seed-box-min-height: var(--seed-box-min-height-xl, initial);
260
+ --seed-box-max-height: var(--seed-box-max-height-xl, initial);
261
261
  }
262
262
  }
package/recipes/bottom-sheet.layered.css CHANGED
@@ -95,29 +95,29 @@
95
95
 
96
96
  .seed-bottom-sheet__body {
97
97
  --seed-box-padding-x-base: var(--seed-dimension-spacing-x-global-gutter);
98
- --seed-box-padding-x-sm: var(--seed-box-padding-x-base);
99
- --seed-box-padding-x-md: var(--seed-box-padding-x-sm);
100
- --seed-box-padding-x-lg: var(--seed-box-padding-x-md);
101
- --seed-box-padding-x-xl: var(--seed-box-padding-x-lg);
102
- --seed-box-padding-x: var(--seed-box-padding-x-base);
103
- --seed-box-height-base: initial;
104
- --seed-box-height-sm: var(--seed-box-height-base);
105
- --seed-box-height-md: var(--seed-box-height-sm);
106
- --seed-box-height-lg: var(--seed-box-height-md);
107
- --seed-box-height-xl: var(--seed-box-height-lg);
108
- --seed-box-height: var(--seed-box-height-base);
109
- --seed-box-min-height-base: initial;
110
- --seed-box-min-height-sm: var(--seed-box-min-height-base);
111
- --seed-box-min-height-md: var(--seed-box-min-height-sm);
112
- --seed-box-min-height-lg: var(--seed-box-min-height-md);
113
- --seed-box-min-height-xl: var(--seed-box-min-height-lg);
114
- --seed-box-min-height: var(--seed-box-min-height-base);
115
- --seed-box-max-height-base: initial;
116
- --seed-box-max-height-sm: var(--seed-box-max-height-base);
117
- --seed-box-max-height-md: var(--seed-box-max-height-sm);
118
- --seed-box-max-height-lg: var(--seed-box-max-height-md);
119
- --seed-box-max-height-xl: var(--seed-box-max-height-lg);
120
- --seed-box-max-height: var(--seed-box-max-height-base);
98
+ --seed-box-padding-x-sm: var(--seed-box-padding-x-base, initial);
99
+ --seed-box-padding-x-md: var(--seed-box-padding-x-sm, initial);
100
+ --seed-box-padding-x-lg: var(--seed-box-padding-x-md, initial);
101
+ --seed-box-padding-x-xl: var(--seed-box-padding-x-lg, initial);
102
+ --seed-box-padding-x: var(--seed-box-padding-x-base, initial);
103
+ --seed-box-height-base: auto;
104
+ --seed-box-height-sm: var(--seed-box-height-base, initial);
105
+ --seed-box-height-md: var(--seed-box-height-sm, initial);
106
+ --seed-box-height-lg: var(--seed-box-height-md, initial);
107
+ --seed-box-height-xl: var(--seed-box-height-lg, initial);
108
+ --seed-box-height: var(--seed-box-height-base, initial);
109
+ --seed-box-min-height-base: auto;
110
+ --seed-box-min-height-sm: var(--seed-box-min-height-base, initial);
111
+ --seed-box-min-height-md: var(--seed-box-min-height-sm, initial);
112
+ --seed-box-min-height-lg: var(--seed-box-min-height-md, initial);
113
+ --seed-box-min-height-xl: var(--seed-box-min-height-lg, initial);
114
+ --seed-box-min-height: var(--seed-box-min-height-base, initial);
115
+ --seed-box-max-height-base: none;
116
+ --seed-box-max-height-sm: var(--seed-box-max-height-base, initial);
117
+ --seed-box-max-height-md: var(--seed-box-max-height-sm, initial);
118
+ --seed-box-max-height-lg: var(--seed-box-max-height-md, initial);
119
+ --seed-box-max-height-xl: var(--seed-box-max-height-lg, initial);
120
+ --seed-box-max-height: var(--seed-box-max-height-base, initial);
121
121
  --seed-box-justify-content: initial;
122
122
  --seed-box-align-items: initial;
123
123
  padding-left: var(--seed-box-padding-x);
@@ -250,37 +250,37 @@
250
250
 
251
251
  @media (width >= 480px) {
252
252
  .seed-bottom-sheet__body {
253
- --seed-box-padding-x: var(--seed-box-padding-x-sm);
254
- --seed-box-height: var(--seed-box-height-sm);
255
- --seed-box-min-height: var(--seed-box-min-height-sm);
256
- --seed-box-max-height: var(--seed-box-max-height-sm);
253
+ --seed-box-padding-x: var(--seed-box-padding-x-sm, initial);
254
+ --seed-box-height: var(--seed-box-height-sm, initial);
255
+ --seed-box-min-height: var(--seed-box-min-height-sm, initial);
256
+ --seed-box-max-height: var(--seed-box-max-height-sm, initial);
257
257
  }
258
258
  }
259
259
 
260
260
  @media (width >= 768px) {
261
261
  .seed-bottom-sheet__body {
262
- --seed-box-padding-x: var(--seed-box-padding-x-md);
263
- --seed-box-height: var(--seed-box-height-md);
264
- --seed-box-min-height: var(--seed-box-min-height-md);
265
- --seed-box-max-height: var(--seed-box-max-height-md);
262
+ --seed-box-padding-x: var(--seed-box-padding-x-md, initial);
263
+ --seed-box-height: var(--seed-box-height-md, initial);
264
+ --seed-box-min-height: var(--seed-box-min-height-md, initial);
265
+ --seed-box-max-height: var(--seed-box-max-height-md, initial);
266
266
  }
267
267
  }
268
268
 
269
269
  @media (width >= 1280px) {
270
270
  .seed-bottom-sheet__body {
271
- --seed-box-padding-x: var(--seed-box-padding-x-lg);
272
- --seed-box-height: var(--seed-box-height-lg);
273
- --seed-box-min-height: var(--seed-box-min-height-lg);
274
- --seed-box-max-height: var(--seed-box-max-height-lg);
271
+ --seed-box-padding-x: var(--seed-box-padding-x-lg, initial);
272
+ --seed-box-height: var(--seed-box-height-lg, initial);
273
+ --seed-box-min-height: var(--seed-box-min-height-lg, initial);
274
+ --seed-box-max-height: var(--seed-box-max-height-lg, initial);
275
275
  }
276
276
  }
277
277
 
278
278
  @media (width >= 1440px) {
279
279
  .seed-bottom-sheet__body {
280
- --seed-box-padding-x: var(--seed-box-padding-x-xl);
281
- --seed-box-height: var(--seed-box-height-xl);
282
- --seed-box-min-height: var(--seed-box-min-height-xl);
283
- --seed-box-max-height: var(--seed-box-max-height-xl);
280
+ --seed-box-padding-x: var(--seed-box-padding-x-xl, initial);
281
+ --seed-box-height: var(--seed-box-height-xl, initial);
282
+ --seed-box-min-height: var(--seed-box-min-height-xl, initial);
283
+ --seed-box-max-height: var(--seed-box-max-height-xl, initial);
284
284
  }
285
285
  }
286
286
  }
package/recipes/help-bubble.css CHANGED
@@ -12,12 +12,12 @@
12
12
  padding-top: var(--seed-dimension-x2_5);
13
13
  padding-bottom: var(--seed-dimension-x2_5);
14
14
  border-radius: var(--seed-radius-r3);
15
- --seed-box-max-width-base: initial;
16
- --seed-box-max-width-sm: var(--seed-box-max-width-base);
17
- --seed-box-max-width-md: var(--seed-box-max-width-sm);
18
- --seed-box-max-width-lg: var(--seed-box-max-width-md);
19
- --seed-box-max-width-xl: var(--seed-box-max-width-lg);
20
- --seed-box-max-width: var(--seed-box-max-width-base);
15
+ --seed-box-max-width-base: none;
16
+ --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
17
+ --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
18
+ --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
19
+ --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
20
+ --seed-box-max-width: var(--seed-box-max-width-base, initial);
21
21
  max-width: var(--seed-box-max-width);
22
22
  }
23
23
  .seed-help-bubble__content:is([data-state="open"], [data-open]) {
@@ -103,21 +103,21 @@
103
103
  }
104
104
  @media (min-width: 480px) {
105
105
  .seed-help-bubble__content {
106
- --seed-box-max-width: var(--seed-box-max-width-sm);
106
+ --seed-box-max-width: var(--seed-box-max-width-sm, initial);
107
107
  }
108
108
  }
109
109
  @media (min-width: 768px) {
110
110
  .seed-help-bubble__content {
111
- --seed-box-max-width: var(--seed-box-max-width-md);
111
+ --seed-box-max-width: var(--seed-box-max-width-md, initial);
112
112
  }
113
113
  }
114
114
  @media (min-width: 1280px) {
115
115
  .seed-help-bubble__content {
116
- --seed-box-max-width: var(--seed-box-max-width-lg);
116
+ --seed-box-max-width: var(--seed-box-max-width-lg, initial);
117
117
  }
118
118
  }
119
119
  @media (min-width: 1440px) {
120
120
  .seed-help-bubble__content {
121
- --seed-box-max-width: var(--seed-box-max-width-xl);
121
+ --seed-box-max-width: var(--seed-box-max-width-xl, initial);
122
122
  }
123
123
  }
package/recipes/help-bubble.layered.css CHANGED
@@ -12,12 +12,12 @@
12
12
  padding-top: var(--seed-dimension-x2_5);
13
13
  padding-bottom: var(--seed-dimension-x2_5);
14
14
  border-radius: var(--seed-radius-r3);
15
- --seed-box-max-width-base: initial;
16
- --seed-box-max-width-sm: var(--seed-box-max-width-base);
17
- --seed-box-max-width-md: var(--seed-box-max-width-sm);
18
- --seed-box-max-width-lg: var(--seed-box-max-width-md);
19
- --seed-box-max-width-xl: var(--seed-box-max-width-lg);
20
- --seed-box-max-width: var(--seed-box-max-width-base);
15
+ --seed-box-max-width-base: none;
16
+ --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
17
+ --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
18
+ --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
19
+ --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
20
+ --seed-box-max-width: var(--seed-box-max-width-base, initial);
21
21
  max-width: var(--seed-box-max-width);
22
22
  align-items: flex-start;
23
23
  display: flex;
@@ -117,25 +117,25 @@
117
117
 
118
118
  @media (width >= 480px) {
119
119
  .seed-help-bubble__content {
120
- --seed-box-max-width: var(--seed-box-max-width-sm);
120
+ --seed-box-max-width: var(--seed-box-max-width-sm, initial);
121
121
  }
122
122
  }
123
123
 
124
124
  @media (width >= 768px) {
125
125
  .seed-help-bubble__content {
126
- --seed-box-max-width: var(--seed-box-max-width-md);
126
+ --seed-box-max-width: var(--seed-box-max-width-md, initial);
127
127
  }
128
128
  }
129
129
 
130
130
  @media (width >= 1280px) {
131
131
  .seed-help-bubble__content {
132
- --seed-box-max-width: var(--seed-box-max-width-lg);
132
+ --seed-box-max-width: var(--seed-box-max-width-lg, initial);
133
133
  }
134
134
  }
135
135
 
136
136
  @media (width >= 1440px) {
137
137
  .seed-help-bubble__content {
138
- --seed-box-max-width: var(--seed-box-max-width-xl);
138
+ --seed-box-max-width: var(--seed-box-max-width-xl, initial);
139
139
  }
140
140
  }
141
141
  }
package/recipes/list-item.css CHANGED
@@ -20,11 +20,11 @@
20
20
  align-items: center;
21
21
  flex-shrink: 0;
22
22
  --seed-box-padding-right-base: var(--seed-dimension-x3);
23
- --seed-box-padding-right-sm: var(--seed-box-padding-right-base);
24
- --seed-box-padding-right-md: var(--seed-box-padding-right-sm);
25
- --seed-box-padding-right-lg: var(--seed-box-padding-right-md);
26
- --seed-box-padding-right-xl: var(--seed-box-padding-right-lg);
27
- --seed-box-padding-right: var(--seed-box-padding-right-base);
23
+ --seed-box-padding-right-sm: var(--seed-box-padding-right-base, initial);
24
+ --seed-box-padding-right-md: var(--seed-box-padding-right-sm, initial);
25
+ --seed-box-padding-right-lg: var(--seed-box-padding-right-md, initial);
26
+ --seed-box-padding-right-xl: var(--seed-box-padding-right-lg, initial);
27
+ --seed-box-padding-right: var(--seed-box-padding-right-base, initial);
28
28
  padding-right: var(--seed-box-padding-right);
29
29
  --seed-focus-ring: none;
30
30
  --seed-icon-size: 22px;
@@ -40,11 +40,11 @@
40
40
  --seed-box-position: initial;
41
41
  position: var(--seed-box-position);
42
42
  --seed-box-gap-base: var(--seed-dimension-x1);
43
- --seed-box-gap-sm: var(--seed-box-gap-base);
44
- --seed-box-gap-md: var(--seed-box-gap-sm);
45
- --seed-box-gap-lg: var(--seed-box-gap-md);
46
- --seed-box-gap-xl: var(--seed-box-gap-lg);
47
- --seed-box-gap: var(--seed-box-gap-base);
43
+ --seed-box-gap-sm: var(--seed-box-gap-base, initial);
44
+ --seed-box-gap-md: var(--seed-box-gap-sm, initial);
45
+ --seed-box-gap-lg: var(--seed-box-gap-md, initial);
46
+ --seed-box-gap-xl: var(--seed-box-gap-lg, initial);
47
+ --seed-box-gap: var(--seed-box-gap-base, initial);
48
48
  gap: var(--seed-box-gap);
49
49
  --seed-focus-ring: none;
50
50
  font-size: var(--seed-font-size-t5);
@@ -68,18 +68,18 @@
68
68
  border: none;
69
69
  font-family: inherit;
70
70
  --seed-box-gap-base: var(--seed-dimension-x0_5);
71
- --seed-box-gap-sm: var(--seed-box-gap-base);
72
- --seed-box-gap-md: var(--seed-box-gap-sm);
73
- --seed-box-gap-lg: var(--seed-box-gap-md);
74
- --seed-box-gap-xl: var(--seed-box-gap-lg);
75
- --seed-box-gap: var(--seed-box-gap-base);
71
+ --seed-box-gap-sm: var(--seed-box-gap-base, initial);
72
+ --seed-box-gap-md: var(--seed-box-gap-sm, initial);
73
+ --seed-box-gap-lg: var(--seed-box-gap-md, initial);
74
+ --seed-box-gap-xl: var(--seed-box-gap-lg, initial);
75
+ --seed-box-gap: var(--seed-box-gap-base, initial);
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
  text-decoration: none;
85
85
  }
@@ -189,49 +189,49 @@
189
189
  }
190
190
  @media (min-width: 480px) {
191
191
  .seed-list-item__prefix {
192
- --seed-box-padding-right: var(--seed-box-padding-right-sm);
192
+ --seed-box-padding-right: var(--seed-box-padding-right-sm, initial);
193
193
  }
194
194
  .seed-list-item__suffix {
195
- --seed-box-gap: var(--seed-box-gap-sm);
195
+ --seed-box-gap: var(--seed-box-gap-sm, initial);
196
196
  }
197
197
  .seed-list-item__content {
198
- --seed-box-gap: var(--seed-box-gap-sm);
199
- --seed-box-padding-right: var(--seed-box-padding-right-sm);
198
+ --seed-box-gap: var(--seed-box-gap-sm, initial);
199
+ --seed-box-padding-right: var(--seed-box-padding-right-sm, initial);
200
200
  }
201
201
  }
202
202
  @media (min-width: 768px) {
203
203
  .seed-list-item__prefix {
204
- --seed-box-padding-right: var(--seed-box-padding-right-md);
204
+ --seed-box-padding-right: var(--seed-box-padding-right-md, initial);
205
205
  }
206
206
  .seed-list-item__suffix {
207
- --seed-box-gap: var(--seed-box-gap-md);
207
+ --seed-box-gap: var(--seed-box-gap-md, initial);
208
208
  }
209
209
  .seed-list-item__content {
210
- --seed-box-gap: var(--seed-box-gap-md);
211
- --seed-box-padding-right: var(--seed-box-padding-right-md);
210
+ --seed-box-gap: var(--seed-box-gap-md, initial);
211
+ --seed-box-padding-right: var(--seed-box-padding-right-md, initial);
212
212
  }
213
213
  }
214
214
  @media (min-width: 1280px) {
215
215
  .seed-list-item__prefix {
216
- --seed-box-padding-right: var(--seed-box-padding-right-lg);
216
+ --seed-box-padding-right: var(--seed-box-padding-right-lg, initial);
217
217
  }
218
218
  .seed-list-item__suffix {
219
- --seed-box-gap: var(--seed-box-gap-lg);
219
+ --seed-box-gap: var(--seed-box-gap-lg, initial);
220
220
  }
221
221
  .seed-list-item__content {
222
- --seed-box-gap: var(--seed-box-gap-lg);
223
- --seed-box-padding-right: var(--seed-box-padding-right-lg);
222
+ --seed-box-gap: var(--seed-box-gap-lg, initial);
223
+ --seed-box-padding-right: var(--seed-box-padding-right-lg, initial);
224
224
  }
225
225
  }
226
226
  @media (min-width: 1440px) {
227
227
  .seed-list-item__prefix {
228
- --seed-box-padding-right: var(--seed-box-padding-right-xl);
228
+ --seed-box-padding-right: var(--seed-box-padding-right-xl, initial);
229
229
  }
230
230
  .seed-list-item__suffix {
231
- --seed-box-gap: var(--seed-box-gap-xl);
231
+ --seed-box-gap: var(--seed-box-gap-xl, initial);
232
232
  }
233
233
  .seed-list-item__content {
234
- --seed-box-gap: var(--seed-box-gap-xl);
235
- --seed-box-padding-right: var(--seed-box-padding-right-xl);
234
+ --seed-box-gap: var(--seed-box-gap-xl, initial);
235
+ --seed-box-padding-right: var(--seed-box-padding-right-xl, initial);
236
236
  }
237
237
  }