@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/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
  }
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 {
@@ -146,7 +147,7 @@
146
147
  padding-bottom: var(--seed-dimension-x4);
147
148
  }
148
149
  .seed-side-panel__header[data-show-close-button] {
149
- padding-right: calc(var(--seed-dimension-x6) + 52px);
150
+ padding-right: calc(24px + 22px + var(--seed-dimension-x1_5));
150
151
  }
151
152
  .seed-side-panel__title {
152
153
  color: var(--seed-color-fg-neutral);
@@ -167,32 +168,33 @@
167
168
  .seed-side-panel__body {
168
169
  display: flex;
169
170
  flex-direction: column;
171
+ box-sizing: border-box;
170
172
  flex: 1;
171
173
  overflow-y: auto;
172
174
  --seed-box-padding-x-base: var(--seed-dimension-x6);
173
- --seed-box-padding-x-sm: var(--seed-box-padding-x-base);
174
- --seed-box-padding-x-md: var(--seed-box-padding-x-sm);
175
- --seed-box-padding-x-lg: var(--seed-box-padding-x-md);
176
- --seed-box-padding-x-xl: var(--seed-box-padding-x-lg);
177
- --seed-box-padding-x: var(--seed-box-padding-x-base);
178
- --seed-box-height-base: initial;
179
- --seed-box-height-sm: var(--seed-box-height-base);
180
- --seed-box-height-md: var(--seed-box-height-sm);
181
- --seed-box-height-lg: var(--seed-box-height-md);
182
- --seed-box-height-xl: var(--seed-box-height-lg);
183
- --seed-box-height: var(--seed-box-height-base);
184
- --seed-box-min-height-base: initial;
185
- --seed-box-min-height-sm: var(--seed-box-min-height-base);
186
- --seed-box-min-height-md: var(--seed-box-min-height-sm);
187
- --seed-box-min-height-lg: var(--seed-box-min-height-md);
188
- --seed-box-min-height-xl: var(--seed-box-min-height-lg);
189
- --seed-box-min-height: var(--seed-box-min-height-base);
190
- --seed-box-max-height-base: initial;
191
- --seed-box-max-height-sm: var(--seed-box-max-height-base);
192
- --seed-box-max-height-md: var(--seed-box-max-height-sm);
193
- --seed-box-max-height-lg: var(--seed-box-max-height-md);
194
- --seed-box-max-height-xl: var(--seed-box-max-height-lg);
195
- --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);
196
198
  --seed-box-justify-content: initial;
197
199
  --seed-box-align-items: initial;
198
200
  padding-left: var(--seed-box-padding-x);
@@ -226,48 +228,33 @@
226
228
  justify-content: center;
227
229
  align-items: center;
228
230
  border: none;
231
+ background: var(--seed-color-bg-transparent);
229
232
  top: calc(28px + var(--seed-safe-area-top));
230
233
  right: 24px;
231
234
  border-radius: var(--seed-radius-r3);
232
- background: var(--seed-color-bg-transparent);
233
- width: 22px;
234
- height: 22px;
235
+ padding: calc((52px - 22px) / 2);
236
+ margin: calc((22px - 52px) / 2);
235
237
  cursor: pointer;
238
+ transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
236
239
  --seed-icon-size: 22px;
237
240
  --seed-icon-color: var(--seed-color-fg-neutral-subtle);
241
+ outline: var(--seed-dimension-x0_5) solid transparent;
242
+ outline-offset: var(--seed-dimension-x0_5);
238
243
  }
239
- .seed-side-panel__closeButton :where(.seed-icon) {
240
- transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
244
+ .seed-side-panel__closeButton:is(:focus-visible, [data-focus-visible]) {
245
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
246
+ outline-offset: var(--seed-dimension-x0_5);
241
247
  }
242
248
  @media (hover: hover) and (pointer: fine) {
243
249
  .seed-side-panel__closeButton:is(:hover, [data-hover]) {
244
- --seed-icon-color: var(--seed-color-fg-neutral);
250
+ background: var(--seed-color-bg-transparent-pressed);
245
251
  }
246
252
  }
247
253
  @media not all and (hover: hover) and (pointer: fine) {
248
254
  .seed-side-panel__closeButton:is(:active, [data-active]) {
249
- --seed-icon-color: var(--seed-color-fg-neutral);
255
+ background: var(--seed-color-bg-transparent-pressed);
250
256
  }
251
257
  }
252
- .seed-side-panel__closeButton:after {
253
- content: "";
254
- position: absolute;
255
- top: calc((22px - 52px) / 2);
256
- right: calc((22px - 52px) / 2);
257
- bottom: calc((22px - 52px) / 2);
258
- left: calc((22px - 52px) / 2);
259
- border-radius: var(--seed-radius-r3);
260
- outline: var(--seed-dimension-x0_5) solid transparent;
261
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
262
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
263
- }
264
- .seed-side-panel__closeButton:is(:focus, [data-focus]) {
265
- outline: none;
266
- }
267
- .seed-side-panel__closeButton:is(:focus-visible, [data-focus-visible]):after {
268
- outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
269
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
270
- }
271
258
  .seed-side-panel__content--size_small {
272
259
  --side-panel-size-width: 480px;
273
260
  }
@@ -279,49 +266,49 @@
279
266
  }
280
267
  @media (min-width: 480px) {
281
268
  .seed-side-panel__content {
282
- --seed-box-width: var(--seed-box-width-sm);
283
- --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);
284
271
  }
285
272
  .seed-side-panel__body {
286
- --seed-box-padding-x: var(--seed-box-padding-x-sm);
287
- --seed-box-height: var(--seed-box-height-sm);
288
- --seed-box-min-height: var(--seed-box-min-height-sm);
289
- --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);
290
277
  }
291
278
  }
292
279
  @media (min-width: 768px) {
293
280
  .seed-side-panel__content {
294
- --seed-box-width: var(--seed-box-width-md);
295
- --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);
296
283
  }
297
284
  .seed-side-panel__body {
298
- --seed-box-padding-x: var(--seed-box-padding-x-md);
299
- --seed-box-height: var(--seed-box-height-md);
300
- --seed-box-min-height: var(--seed-box-min-height-md);
301
- --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);
302
289
  }
303
290
  }
304
291
  @media (min-width: 1280px) {
305
292
  .seed-side-panel__content {
306
- --seed-box-width: var(--seed-box-width-lg);
307
- --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);
308
295
  }
309
296
  .seed-side-panel__body {
310
- --seed-box-padding-x: var(--seed-box-padding-x-lg);
311
- --seed-box-height: var(--seed-box-height-lg);
312
- --seed-box-min-height: var(--seed-box-min-height-lg);
313
- --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);
314
301
  }
315
302
  }
316
303
  @media (min-width: 1440px) {
317
304
  .seed-side-panel__content {
318
- --seed-box-width: var(--seed-box-width-xl);
319
- --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);
320
307
  }
321
308
  .seed-side-panel__body {
322
- --seed-box-padding-x: var(--seed-box-padding-x-xl);
323
- --seed-box-height: var(--seed-box-height-xl);
324
- --seed-box-min-height: var(--seed-box-min-height-xl);
325
- --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);
326
313
  }
327
314
  }