@seed-design/css 2.1.1 → 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 (33) hide show
  1. package/all.css +495 -511
  2. package/all.layered.css +495 -511
  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/floating-action-button.css +2 -2
  15. package/recipes/floating-action-button.layered.css +2 -2
  16. package/recipes/help-bubble.css +10 -10
  17. package/recipes/help-bubble.layered.css +10 -10
  18. package/recipes/image-frame-reaction-button.css +1 -3
  19. package/recipes/image-frame-reaction-button.layered.css +1 -4
  20. package/recipes/list-item.css +36 -36
  21. package/recipes/list-item.layered.css +36 -36
  22. package/recipes/side-panel.css +74 -87
  23. package/recipes/side-panel.layered.css +74 -87
  24. package/recipes/skeleton.css +20 -20
  25. package/recipes/skeleton.layered.css +20 -20
  26. package/vars/component/floating-action-button.d.ts +1 -1
  27. package/vars/component/floating-action-button.mjs +1 -1
  28. package/vars/component/image-frame-reaction-button.d.ts +3 -2
  29. package/vars/component/image-frame-reaction-button.mjs +3 -2
  30. package/vars/component/side-panel-close-button.d.ts +6 -2
  31. package/vars/component/side-panel-close-button.mjs +6 -2
  32. package/vars/component/side-panel.d.ts +7 -4
  33. package/vars/component/side-panel.mjs +6 -4
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/floating-action-button.css CHANGED
@@ -63,8 +63,8 @@
63
63
  max-width: 999px;
64
64
  }
65
65
  .seed-floating-action-button__icon--extended_true {
66
- width: var(--seed-dimension-x5);
67
- height: var(--seed-dimension-x5);
66
+ width: var(--seed-dimension-x4);
67
+ height: var(--seed-dimension-x4);
68
68
  margin-right: var(--seed-dimension-x1);
69
69
  transition: none;
70
70
  }
package/recipes/floating-action-button.layered.css CHANGED
@@ -73,8 +73,8 @@
73
73
  }
74
74
 
75
75
  .seed-floating-action-button__icon--extended_true {
76
- width: var(--seed-dimension-x5);
77
- height: var(--seed-dimension-x5);
76
+ width: var(--seed-dimension-x4);
77
+ height: var(--seed-dimension-x4);
78
78
  margin-right: var(--seed-dimension-x1);
79
79
  transition: none;
80
80
  }
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/image-frame-reaction-button.css CHANGED
@@ -46,7 +46,5 @@
46
46
  height: var(--seed-dimension-x6);
47
47
  color: var(--seed-color-palette-static-white);
48
48
  pointer-events: none;
49
- }
50
- .seed-image-frame-reaction-button__lineIcon:is([aria-pressed=true], [data-pressed]) {
51
- color: var(--seed-color-bg-transparent);
49
+ filter: drop-shadow(0px 2px 2px #00000026);
52
50
  }
package/recipes/image-frame-reaction-button.layered.css CHANGED
@@ -49,12 +49,9 @@
49
49
  height: var(--seed-dimension-x6);
50
50
  color: var(--seed-color-palette-static-white);
51
51
  pointer-events: none;
52
+ filter: drop-shadow(0 2px 2px #00000026);
52
53
  margin: auto;
53
54
  position: absolute;
54
55
  inset: 0;
55
56
  }
56
-
57
- .seed-image-frame-reaction-button__lineIcon:is([aria-pressed="true"], [data-pressed]) {
58
- color: var(--seed-color-bg-transparent);
59
- }
60
57
  }