@seed-design/css 3.0.0 → 3.0.2

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 (22) hide show
  1. package/all.css +44 -21
  2. package/all.layered.css +44 -21
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/alert-dialog.css +6 -0
  7. package/recipes/alert-dialog.layered.css +6 -0
  8. package/recipes/bottom-sheet.css +4 -0
  9. package/recipes/bottom-sheet.layered.css +5 -1
  10. package/recipes/dialog.css +10 -6
  11. package/recipes/dialog.layered.css +10 -6
  12. package/recipes/menu-sheet.css +5 -0
  13. package/recipes/menu-sheet.layered.css +5 -0
  14. package/recipes/page-banner.css +4 -4
  15. package/recipes/page-banner.layered.css +4 -4
  16. package/recipes/popover.css +1 -1
  17. package/recipes/popover.layered.css +1 -1
  18. package/recipes/side-panel.css +10 -6
  19. package/recipes/side-panel.layered.css +10 -6
  20. package/recipes/snackbar-region.css +3 -3
  21. package/recipes/snackbar-region.layered.css +3 -3
  22. package/vars/color/bg.d.ts +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/css",
3
- "version": "3.0.0",
3
+ "version": "3.0.2",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
package/recipes/alert-dialog.css CHANGED
@@ -5,6 +5,10 @@
5
5
  align-items: center;
6
6
  inset: 0;
7
7
  overscroll-behavior-y: none;
8
+ padding-top: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
9
+ padding-right: var(--seed-safe-area-right);
10
+ padding-bottom: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
11
+ padding-left: var(--seed-safe-area-left);
8
12
  --dialog-z-index: 2;
9
13
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
10
14
  }
@@ -25,6 +29,8 @@
25
29
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
26
30
  background: var(--seed-color-bg-layer-floating);
27
31
  max-width: 272px;
32
+ max-height: 100%;
33
+ overflow-y: auto;
28
34
  margin: auto var(--seed-dimension-x8);
29
35
  border-radius: var(--seed-radius-r5);
30
36
  }
package/recipes/alert-dialog.layered.css CHANGED
@@ -1,6 +1,10 @@
1
1
  @layer seed-components {
2
2
  .seed-alert-dialog__positioner {
3
3
  overscroll-behavior-y: none;
4
+ padding-top: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
5
+ padding-right: var(--seed-safe-area-right);
6
+ padding-bottom: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
7
+ padding-left: var(--seed-safe-area-left);
4
8
  --dialog-z-index: 2;
5
9
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
6
10
  justify-content: center;
@@ -23,6 +27,7 @@
23
27
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
24
28
  background: var(--seed-color-bg-layer-floating);
25
29
  max-width: 272px;
30
+ max-height: 100%;
26
31
  margin: auto var(--seed-dimension-x8);
27
32
  border-radius: var(--seed-radius-r5);
28
33
  outline: none;
@@ -30,6 +35,7 @@
30
35
  flex: 1;
31
36
  display: flex;
32
37
  position: relative;
38
+ overflow-y: auto;
33
39
  }
34
40
 
35
41
  .seed-alert-dialog__content:is(:focus, [data-focus]) {
package/recipes/bottom-sheet.css CHANGED
@@ -5,6 +5,8 @@
5
5
  align-items: flex-end;
6
6
  inset: 0;
7
7
  overscroll-behavior-y: none;
8
+ padding-left: var(--seed-safe-area-left);
9
+ padding-right: var(--seed-safe-area-right);
8
10
  --sheet-z-index: 2;
9
11
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
10
12
  }
@@ -33,6 +35,7 @@
33
35
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
34
36
  background: var(--seed-color-bg-layer-floating);
35
37
  max-width: 480px;
38
+ max-height: min(0.9 * 100%, 100% - var(--seed-safe-area-top));
36
39
  border-top-left-radius: var(--seed-radius-r6);
37
40
  border-top-right-radius: var(--seed-radius-r6);
38
41
  padding-bottom: var(--seed-safe-area-bottom);
@@ -85,6 +88,7 @@
85
88
  .seed-bottom-sheet__body {
86
89
  display: flex;
87
90
  flex-direction: column;
91
+ overflow-y: auto;
88
92
  --seed-box-padding-x-base: var(--seed-dimension-spacing-x-global-gutter);
89
93
  --seed-box-padding-x-sm: var(--seed-box-padding-x-base, initial);
90
94
  --seed-box-padding-x-md: var(--seed-box-padding-x-sm, initial);
package/recipes/bottom-sheet.layered.css CHANGED
@@ -1,6 +1,8 @@
1
1
  @layer seed-components {
2
2
  .seed-bottom-sheet__positioner {
3
3
  overscroll-behavior-y: none;
4
+ padding-left: var(--seed-safe-area-left);
5
+ padding-right: var(--seed-safe-area-right);
4
6
  --sheet-z-index: 2;
5
7
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
6
8
  justify-content: center;
@@ -30,9 +32,10 @@
30
32
  word-break: break-all;
31
33
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
32
34
  background: var(--seed-color-bg-layer-floating);
35
+ max-width: 480px;
36
+ max-height: min(.9 * 100%, 100% - var(--seed-safe-area-top));
33
37
  border-top-left-radius: var(--seed-radius-r6);
34
38
  border-top-right-radius: var(--seed-radius-r6);
35
- max-width: 480px;
36
39
  padding-bottom: var(--seed-safe-area-bottom);
37
40
  touch-action: none;
38
41
  will-change: transform;
@@ -127,6 +130,7 @@
127
130
  align-items: var(--seed-box-align-items);
128
131
  flex-direction: column;
129
132
  display: flex;
133
+ overflow-y: auto;
130
134
  }
131
135
 
132
136
  .seed-bottom-sheet__footer {
package/recipes/dialog.css CHANGED
@@ -5,6 +5,10 @@
5
5
  align-items: center;
6
6
  inset: 0;
7
7
  overscroll-behavior-y: none;
8
+ padding-top: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
9
+ padding-right: var(--seed-safe-area-right);
10
+ padding-bottom: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
11
+ padding-left: var(--seed-safe-area-left);
8
12
  --dialog-z-index: 2;
9
13
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
10
14
  }
@@ -44,7 +48,7 @@
44
48
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
45
49
  background: var(--seed-color-bg-layer-floating);
46
50
  border-radius: var(--seed-radius-r5);
47
- --dialog-default-width: calc(0.9 * 100vw);
51
+ --dialog-default-width: calc(0.9 * (100vw - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
48
52
  --dialog-default-max-width: calc(0.9 * 100%);
49
53
  --seed-box-width-base: var(--dialog-default-width);
50
54
  --seed-box-width-sm: var(--seed-box-width-base, initial);
@@ -58,15 +62,15 @@
58
62
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
59
63
  --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
60
64
  --seed-box-max-width: var(--seed-box-max-width-base, initial);
61
- width: var(--seed-box-width);
62
- max-width: var(--seed-box-max-width);
63
- max-height: calc(0.8 * 100vh);
64
- max-height: calc(0.8 * 100dvh);
65
+ width: min(var(--seed-box-width), 100%);
66
+ max-width: min(var(--seed-box-max-width), 100%);
67
+ max-height: min(0.8 * 100vh, 100%);
68
+ max-height: min(0.8 * 100dvh, 100%);
65
69
  }
66
70
  @media (min-width: 768px) {
67
71
  .seed-dialog__content {
68
72
  --dialog-default-width: var(--dialog-size-width);
69
- --dialog-default-max-width: calc(100vw - 2 * var(--seed-dimension-x5));
73
+ --dialog-default-max-width: calc(100vw - 2 * var(--seed-dimension-x5) - var(--seed-safe-area-left) - var(--seed-safe-area-right));
70
74
  }
71
75
  }
72
76
  .seed-dialog__content:is([data-state="open"], [data-open]) {
package/recipes/dialog.layered.css CHANGED
@@ -1,6 +1,10 @@
1
1
  @layer seed-components {
2
2
  .seed-dialog__positioner {
3
3
  overscroll-behavior-y: none;
4
+ padding-top: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
5
+ padding-right: var(--seed-safe-area-right);
6
+ padding-bottom: max(var(--seed-safe-area-top), var(--seed-safe-area-bottom));
7
+ padding-left: var(--seed-safe-area-left);
4
8
  --dialog-z-index: 2;
5
9
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
6
10
  justify-content: center;
@@ -44,7 +48,7 @@
44
48
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
45
49
  background: var(--seed-color-bg-layer-floating);
46
50
  border-radius: var(--seed-radius-r5);
47
- --dialog-default-width: calc(.9 * 100vw);
51
+ --dialog-default-width: calc(.9 * (100vw - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
48
52
  --dialog-default-max-width: calc(.9 * 100%);
49
53
  --seed-box-width-base: var(--dialog-default-width);
50
54
  --seed-box-width-sm: var(--seed-box-width-base, initial);
@@ -58,13 +62,13 @@
58
62
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
59
63
  --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
60
64
  --seed-box-max-width: var(--seed-box-max-width-base, initial);
61
- width: var(--seed-box-width);
62
- max-width: var(--seed-box-max-width);
63
- max-height: 80vh;
65
+ width: min(var(--seed-box-width), 100%);
66
+ max-width: min(var(--seed-box-max-width), 100%);
67
+ max-height: min(80vh, 100%);
64
68
  outline: none;
65
69
  flex-direction: column;
66
70
  flex: none;
67
- max-height: 80dvh;
71
+ max-height: min(80dvh, 100%);
68
72
  display: flex;
69
73
  position: relative;
70
74
  }
@@ -72,7 +76,7 @@
72
76
  @media (min-width: 768px) {
73
77
  .seed-dialog__content {
74
78
  --dialog-default-width: var(--dialog-size-width);
75
- --dialog-default-max-width: calc(100vw - 2 * var(--seed-dimension-x5));
79
+ --dialog-default-max-width: calc(100vw - 2 * var(--seed-dimension-x5) - var(--seed-safe-area-left) - var(--seed-safe-area-right));
76
80
  }
77
81
  }
78
82
 
package/recipes/menu-sheet.css CHANGED
@@ -5,6 +5,8 @@
5
5
  align-items: flex-end;
6
6
  inset: 0;
7
7
  overscroll-behavior-y: none;
8
+ padding-left: var(--seed-safe-area-left);
9
+ padding-right: var(--seed-safe-area-right);
8
10
  --sheet-z-index: 2;
9
11
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
10
12
  }
@@ -25,6 +27,7 @@
25
27
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
26
28
  background: var(--seed-color-bg-layer-floating);
27
29
  max-width: 480px;
30
+ max-height: min(0.9 * 100%, 100% - var(--seed-safe-area-top));
28
31
  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
29
32
  padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
30
33
  padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
@@ -74,6 +77,7 @@
74
77
  display: flex;
75
78
  flex-direction: column;
76
79
  align-items: stretch;
80
+ overflow-y: auto;
77
81
  gap: var(--seed-dimension-x2_5);
78
82
  }
79
83
  .seed-menu-sheet__group {
@@ -81,6 +85,7 @@
81
85
  flex-direction: column;
82
86
  align-items: stretch;
83
87
  overflow: hidden;
88
+ flex-shrink: 0;
84
89
  border-radius: var(--seed-radius-r4);
85
90
  }
86
91
  .seed-menu-sheet__footer {
package/recipes/menu-sheet.layered.css CHANGED
@@ -1,6 +1,8 @@
1
1
  @layer seed-components {
2
2
  .seed-menu-sheet__positioner {
3
3
  overscroll-behavior-y: none;
4
+ padding-left: var(--seed-safe-area-left);
5
+ padding-right: var(--seed-safe-area-right);
4
6
  --sheet-z-index: 2;
5
7
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
6
8
  justify-content: center;
@@ -23,6 +25,7 @@
23
25
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
24
26
  background: var(--seed-color-bg-layer-floating);
25
27
  max-width: 480px;
28
+ max-height: min(.9 * 100%, 100% - var(--seed-safe-area-top));
26
29
  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
27
30
  padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
28
31
  padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
@@ -85,11 +88,13 @@
85
88
  gap: var(--seed-dimension-x2_5);
86
89
  flex-direction: column;
87
90
  display: flex;
91
+ overflow-y: auto;
88
92
  }
89
93
 
90
94
  .seed-menu-sheet__group {
91
95
  border-radius: var(--seed-radius-r4);
92
96
  flex-direction: column;
97
+ flex-shrink: 0;
93
98
  align-items: stretch;
94
99
  display: flex;
95
100
  overflow: hidden;
package/recipes/page-banner.css CHANGED
@@ -232,7 +232,7 @@
232
232
  color: var(--seed-color-fg-on-informative-solid);
233
233
  }
234
234
  .seed-page-banner__closeButton--tone_informative-variant_solid {
235
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
235
+ --seed-suffix-icon-color: var(--seed-color-fg-on-informative-solid);
236
236
  }
237
237
  .seed-page-banner__root--tone_positive-variant_weak {
238
238
  background-color: var(--seed-color-bg-positive-weak);
@@ -286,7 +286,7 @@
286
286
  color: var(--seed-color-fg-on-positive-solid);
287
287
  }
288
288
  .seed-page-banner__closeButton--tone_positive-variant_solid {
289
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
289
+ --seed-suffix-icon-color: var(--seed-color-fg-on-positive-solid);
290
290
  }
291
291
  .seed-page-banner__root--tone_warning-variant_weak {
292
292
  background-color: var(--seed-color-bg-warning-weak);
@@ -340,7 +340,7 @@
340
340
  color: var(--seed-color-fg-on-warning-solid);
341
341
  }
342
342
  .seed-page-banner__closeButton--tone_warning-variant_solid {
343
- --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
343
+ --seed-suffix-icon-color: var(--seed-color-fg-on-warning-solid);
344
344
  }
345
345
  .seed-page-banner__root--tone_critical-variant_weak {
346
346
  background-color: var(--seed-color-bg-critical-weak);
@@ -394,7 +394,7 @@
394
394
  color: var(--seed-color-fg-on-critical-solid);
395
395
  }
396
396
  .seed-page-banner__closeButton--tone_critical-variant_solid {
397
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
397
+ --seed-suffix-icon-color: var(--seed-color-fg-on-critical-solid);
398
398
  }
399
399
  .seed-page-banner__root--tone_magic-variant_weak {
400
400
  background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
package/recipes/page-banner.layered.css CHANGED
@@ -247,7 +247,7 @@
247
247
  }
248
248
 
249
249
  .seed-page-banner__closeButton--tone_informative-variant_solid {
250
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
250
+ --seed-suffix-icon-color: var(--seed-color-fg-on-informative-solid);
251
251
  }
252
252
 
253
253
  .seed-page-banner__root--tone_positive-variant_weak {
@@ -299,7 +299,7 @@
299
299
  }
300
300
 
301
301
  .seed-page-banner__closeButton--tone_positive-variant_solid {
302
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
302
+ --seed-suffix-icon-color: var(--seed-color-fg-on-positive-solid);
303
303
  }
304
304
 
305
305
  .seed-page-banner__root--tone_warning-variant_weak {
@@ -351,7 +351,7 @@
351
351
  }
352
352
 
353
353
  .seed-page-banner__closeButton--tone_warning-variant_solid {
354
- --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
354
+ --seed-suffix-icon-color: var(--seed-color-fg-on-warning-solid);
355
355
  }
356
356
 
357
357
  .seed-page-banner__root--tone_critical-variant_weak {
@@ -403,7 +403,7 @@
403
403
  }
404
404
 
405
405
  .seed-page-banner__closeButton--tone_critical-variant_solid {
406
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
406
+ --seed-suffix-icon-color: var(--seed-color-fg-on-critical-solid);
407
407
  }
408
408
 
409
409
  .seed-page-banner__root--tone_magic-variant_weak {
package/recipes/popover.css CHANGED
@@ -24,7 +24,7 @@
24
24
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
25
25
  --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
26
26
  --seed-box-max-width: var(--seed-box-max-width-base, initial);
27
- width: var(--seed-box-width);
27
+ width: min(var(--seed-box-width), var(--seed-popover-available-width, var(--seed-box-width)));
28
28
  min-width: min(320px, var(--seed-popover-available-width, 320px));
29
29
  max-width: var(--seed-box-max-width);
30
30
  max-height: min(600px, var(--seed-popover-available-height, 600px));
package/recipes/popover.layered.css CHANGED
@@ -23,7 +23,7 @@
23
23
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
24
24
  --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
25
25
  --seed-box-max-width: var(--seed-box-max-width-base, initial);
26
- width: var(--seed-box-width);
26
+ width: min(var(--seed-box-width), var(--seed-popover-available-width, var(--seed-box-width)));
27
27
  min-width: min(320px, var(--seed-popover-available-width, 320px));
28
28
  max-width: var(--seed-box-max-width);
29
29
  max-height: min(600px, var(--seed-popover-available-height, 600px));
package/recipes/side-panel.css CHANGED
@@ -40,22 +40,20 @@
40
40
  background: var(--seed-color-bg-layer-floating);
41
41
  touch-action: none;
42
42
  will-change: transform;
43
- --side-panel-default-width: calc(0.8 * 100vw);
43
+ --side-panel-default-width: calc(0.8 * (100vw - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
44
44
  --seed-box-width-base: var(--side-panel-default-width);
45
45
  --seed-box-width-sm: var(--seed-box-width-base, initial);
46
46
  --seed-box-width-md: var(--seed-box-width-sm, initial);
47
47
  --seed-box-width-lg: var(--seed-box-width-md, initial);
48
48
  --seed-box-width-xl: var(--seed-box-width-lg, initial);
49
49
  --seed-box-width: var(--seed-box-width-base, initial);
50
- --seed-box-max-width-base: calc(0.8 * 100%);
50
+ --seed-box-max-width-base: calc(0.8 * (100% - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
51
51
  --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
52
52
  --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
53
53
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
54
54
  --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
55
55
  --seed-box-max-width: var(--seed-box-max-width-base, initial);
56
56
  inset-block: 0;
57
- width: var(--seed-box-width);
58
- max-width: var(--seed-box-max-width);
59
57
  padding-bottom: var(--seed-safe-area-bottom);
60
58
  }
61
59
  @media (min-width: 768px) {
@@ -76,14 +74,20 @@
76
74
  }
77
75
  .seed-side-panel__content[data-drawer-direction='left'] {
78
76
  left: 0;
79
- padding-left: env(safe-area-inset-left, 0);
77
+ width: calc(var(--seed-box-width) + var(--seed-safe-area-left));
78
+ max-width: calc(var(--seed-box-max-width) + var(--seed-safe-area-left));
79
+ padding-left: var(--seed-safe-area-left);
80
+ padding-right: max(0px, var(--seed-safe-area-right) - (100% - var(--seed-safe-area-left) - min(var(--seed-box-width), var(--seed-box-max-width))));
80
81
  }
81
82
  .seed-side-panel__content[data-drawer-direction='left']::after {
82
83
  right: 100%;
83
84
  }
84
85
  .seed-side-panel__content[data-drawer-direction='right'] {
85
86
  right: 0;
86
- padding-right: env(safe-area-inset-right, 0);
87
+ width: calc(var(--seed-box-width) + var(--seed-safe-area-right));
88
+ max-width: calc(var(--seed-box-max-width) + var(--seed-safe-area-right));
89
+ padding-right: var(--seed-safe-area-right);
90
+ padding-left: max(0px, var(--seed-safe-area-left) - (100% - var(--seed-safe-area-right) - min(var(--seed-box-width), var(--seed-box-max-width))));
87
91
  }
88
92
  .seed-side-panel__content[data-drawer-direction='right']::after {
89
93
  left: 100%;
package/recipes/side-panel.layered.css CHANGED
@@ -42,21 +42,19 @@
42
42
  background: var(--seed-color-bg-layer-floating);
43
43
  touch-action: none;
44
44
  will-change: transform;
45
- --side-panel-default-width: calc(.8 * 100vw);
45
+ --side-panel-default-width: calc(.8 * (100vw - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
46
46
  --seed-box-width-base: var(--side-panel-default-width);
47
47
  --seed-box-width-sm: var(--seed-box-width-base, initial);
48
48
  --seed-box-width-md: var(--seed-box-width-sm, initial);
49
49
  --seed-box-width-lg: var(--seed-box-width-md, initial);
50
50
  --seed-box-width-xl: var(--seed-box-width-lg, initial);
51
51
  --seed-box-width: var(--seed-box-width-base, initial);
52
- --seed-box-max-width-base: calc(.8 * 100%);
52
+ --seed-box-max-width-base: calc(.8 * (100% - var(--seed-safe-area-left) - var(--seed-safe-area-right)));
53
53
  --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
54
54
  --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
55
55
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
56
56
  --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
57
57
  --seed-box-max-width: var(--seed-box-max-width-base, initial);
58
- width: var(--seed-box-width);
59
- max-width: var(--seed-box-max-width);
60
58
  padding-bottom: var(--seed-safe-area-bottom);
61
59
  flex-direction: column;
62
60
  display: flex;
@@ -84,7 +82,10 @@
84
82
  }
85
83
 
86
84
  .seed-side-panel__content[data-drawer-direction="left"] {
87
- padding-left: env(safe-area-inset-left, 0);
85
+ width: calc(var(--seed-box-width) + var(--seed-safe-area-left));
86
+ max-width: calc(var(--seed-box-max-width) + var(--seed-safe-area-left));
87
+ padding-left: var(--seed-safe-area-left);
88
+ padding-right: max(0px, var(--seed-safe-area-right) - (100% - var(--seed-safe-area-left) - min(var(--seed-box-width), var(--seed-box-max-width))));
88
89
  left: 0;
89
90
  }
90
91
 
@@ -93,7 +94,10 @@
93
94
  }
94
95
 
95
96
  .seed-side-panel__content[data-drawer-direction="right"] {
96
- padding-right: env(safe-area-inset-right, 0);
97
+ width: calc(var(--seed-box-width) + var(--seed-safe-area-right));
98
+ max-width: calc(var(--seed-box-max-width) + var(--seed-safe-area-right));
99
+ padding-right: var(--seed-safe-area-right);
100
+ padding-left: max(0px, var(--seed-safe-area-left) - (100% - var(--seed-safe-area-right) - min(var(--seed-box-width), var(--seed-box-max-width))));
97
101
  right: 0;
98
102
  }
99
103
 
package/recipes/snackbar-region.css CHANGED
@@ -3,9 +3,9 @@
3
3
  display: flex;
4
4
  flex-direction: column;
5
5
  align-items: center;
6
- left: calc(env(safe-area-inset-left, 0px));
7
- right: calc(env(safe-area-inset-right, 0px));
8
- bottom: calc(env(safe-area-inset-bottom, 0px) + var(--snackbar-region-offset, 0px));
6
+ left: var(--seed-safe-area-left);
7
+ right: var(--seed-safe-area-right);
8
+ bottom: calc(var(--seed-safe-area-bottom) + var(--snackbar-region-offset, 0px));
9
9
  padding-inline: var(--seed-dimension-x2);
10
10
  padding-block: var(--seed-dimension-x2);
11
11
  transition-property: bottom;
package/recipes/snackbar-region.layered.css CHANGED
@@ -1,9 +1,9 @@
1
1
  @layer seed-components {
2
2
  .seed-snackbar-region {
3
3
  z-index: 2147483647;
4
- left: calc(env(safe-area-inset-left, 0px));
5
- right: calc(env(safe-area-inset-right, 0px));
6
- bottom: calc(env(safe-area-inset-bottom, 0px) + var(--snackbar-region-offset, 0px));
4
+ left: var(--seed-safe-area-left);
5
+ right: var(--seed-safe-area-right);
6
+ bottom: calc(var(--seed-safe-area-bottom) + var(--snackbar-region-offset, 0px));
7
7
  padding-inline: var(--seed-dimension-x2);
8
8
  padding-block: var(--seed-dimension-x2);
9
9
  transition-property: bottom;
package/vars/color/bg.d.ts CHANGED
@@ -44,9 +44,9 @@ export declare const neutralMuted = "var(--seed-color-bg-neutral-muted)";
44
44
  export declare const neutralSolid = "var(--seed-color-bg-neutral-solid)";
45
45
  /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-pressed) */
46
46
  export declare const neutralSolidPressed = "var(--seed-color-bg-neutral-solid-pressed)";
47
- /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted) */
47
+ /** @deprecated 이 토큰은 @seed-design/css@4.0.0과 이에 대응하는 @seed-design/lynx-css 버전에서 제거될 예정입니다. 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted) */
48
48
  export declare const neutralSolidMuted = "var(--seed-color-bg-neutral-solid-muted)";
49
- /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted-pressed) */
49
+ /** @deprecated 이 토큰은 @seed-design/css@4.0.0과 이에 대응하는 @seed-design/lynx-css 버전에서 제거될 예정입니다. 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted-pressed) */
50
50
  export declare const neutralSolidMutedPressed = "var(--seed-color-bg-neutral-solid-muted-pressed)";
51
51
  /** 표면과 같은 색상입니다. 회색 표면 위에서 주변과 구분되는 영역에 사용됩니다. (subtle) */
52
52
  export declare const neutralSubtle = "var(--seed-color-bg-neutral-subtle)";