polaris_view_components 3.2.0 → 4.0.0

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 (73) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/app/assets/fonts/OFL.txt +92 -0
  4. data/app/assets/fonts/ShopifyInterVariable-latin-ext.woff2 +0 -0
  5. data/app/assets/fonts/ShopifyInterVariable-latin.woff2 +0 -0
  6. data/app/assets/icons/polaris/AlertCircleFilledIcon.svg +1 -0
  7. data/app/assets/icons/polaris/CheckCircleFilledIcon.svg +1 -0
  8. data/app/assets/icons/polaris/InfoFilledIcon.svg +1 -0
  9. data/app/assets/javascripts/polaris_view_components/button_controller.js +6 -7
  10. data/app/assets/javascripts/polaris_view_components/dropzone_controller.js +2 -0
  11. data/app/assets/javascripts/polaris_view_components/index.js +2 -0
  12. data/app/assets/javascripts/polaris_view_components/popover_controller.js +33 -6
  13. data/app/assets/javascripts/polaris_view_components/tabs_controller.js +14 -0
  14. data/app/assets/javascripts/polaris_view_components.js +103 -7
  15. data/app/assets/stylesheets/polaris_view_components/action_list.pcss +19 -4
  16. data/app/assets/stylesheets/polaris_view_components/badge.pcss +75 -0
  17. data/app/assets/stylesheets/polaris_view_components/banner.pcss +132 -87
  18. data/app/assets/stylesheets/polaris_view_components/button.pcss +395 -61
  19. data/app/assets/stylesheets/polaris_view_components/callout_card.pcss +63 -2
  20. data/app/assets/stylesheets/polaris_view_components/card.pcss +130 -30
  21. data/app/assets/stylesheets/polaris_view_components/choice.pcss +80 -0
  22. data/app/assets/stylesheets/polaris_view_components/custom.pcss +6 -67
  23. data/app/assets/stylesheets/polaris_view_components/data_table.pcss +58 -2
  24. data/app/assets/stylesheets/polaris_view_components/description_list.pcss +34 -0
  25. data/app/assets/stylesheets/polaris_view_components/drop_zone.pcss +100 -0
  26. data/app/assets/stylesheets/polaris_view_components/fonts.pcss +27 -0
  27. data/app/assets/stylesheets/polaris_view_components/footer_help.pcss +24 -0
  28. data/app/assets/stylesheets/polaris_view_components/index_table.pcss +17 -2
  29. data/app/assets/stylesheets/polaris_view_components/media.pcss +126 -0
  30. data/app/assets/stylesheets/polaris_view_components/modal.pcss +115 -3
  31. data/app/assets/stylesheets/polaris_view_components/navigation.pcss +49 -0
  32. data/app/assets/stylesheets/polaris_view_components/navigation_list_component.pcss +73 -10
  33. data/app/assets/stylesheets/polaris_view_components/page.pcss +120 -10
  34. data/app/assets/stylesheets/polaris_view_components/pagination.pcss +6 -2
  35. data/app/assets/stylesheets/polaris_view_components/popover.pcss +13 -0
  36. data/app/assets/stylesheets/polaris_view_components/resource_list.pcss +100 -0
  37. data/app/assets/stylesheets/polaris_view_components/save_bar.pcss +35 -25
  38. data/app/assets/stylesheets/polaris_view_components/shopify_navigation.pcss +21 -18
  39. data/app/assets/stylesheets/polaris_view_components/tabs.pcss +69 -0
  40. data/app/assets/stylesheets/polaris_view_components/tag.pcss +45 -0
  41. data/app/assets/stylesheets/polaris_view_components/text_fields.pcss +226 -0
  42. data/app/assets/stylesheets/polaris_view_components/theme.pcss +386 -0
  43. data/app/assets/stylesheets/polaris_view_components/tooltip_component.pcss +7 -5
  44. data/app/assets/stylesheets/polaris_view_components/variables.pcss +1 -1
  45. data/app/assets/stylesheets/polaris_view_components.css +1766 -275
  46. data/app/assets/stylesheets/polaris_view_components.pcss +8 -0
  47. data/app/components/polaris/avatar_component.rb +1 -1
  48. data/app/components/polaris/banner_component.html.erb +27 -90
  49. data/app/components/polaris/banner_component.rb +4 -5
  50. data/app/components/polaris/button_component.html.erb +1 -9
  51. data/app/components/polaris/callout_card_component.html.erb +11 -7
  52. data/app/components/polaris/callout_card_component.rb +4 -3
  53. data/app/components/polaris/card/header_component.rb +1 -1
  54. data/app/components/polaris/card/section_component.html.erb +1 -1
  55. data/app/components/polaris/card/section_component.rb +2 -1
  56. data/app/components/polaris/card_component.html.erb +39 -37
  57. data/app/components/polaris/card_component.rb +3 -3
  58. data/app/components/polaris/checkbox_component.html.erb +2 -1
  59. data/app/components/polaris/checkbox_component.rb +0 -4
  60. data/app/components/polaris/dropzone_component.html.erb +12 -36
  61. data/app/components/polaris/headless_button.html.erb +1 -9
  62. data/app/components/polaris/headless_button.rb +13 -0
  63. data/app/components/polaris/modal_component.html.erb +6 -0
  64. data/app/components/polaris/page_component.html.erb +4 -4
  65. data/app/components/polaris/progress_bar_component.rb +4 -4
  66. data/app/components/polaris/resource_item/shortcut_actions_component.html.erb +6 -8
  67. data/app/components/polaris/resource_item/shortcut_actions_component.rb +5 -1
  68. data/app/components/polaris/resource_item_component.html.erb +4 -4
  69. data/app/components/polaris/resource_item_component.rb +4 -1
  70. data/app/components/polaris/spinner_component.html.erb +4 -9
  71. data/app/components/polaris/tabs_component.rb +2 -0
  72. data/lib/polaris/view_components/version.rb +1 -1
  73. metadata +18 -3
data/app/assets/stylesheets/polaris_view_components.css CHANGED
@@ -1,4 +1,24 @@
1
- @charset "UTF-8";@font-face {
1
+ @charset "UTF-8";/* ShopifyInter is the Inter fork used in the Shopify admin. It's licensed under the SIL Open Font License (see OFL.txt). */@font-face {
2
+ font-family: ShopifyInter;
3
+ font-style: normal;
4
+ font-weight: 100 900;
5
+ font-display: swap;
6
+ src: url('ShopifyInterVariable-latin-ext.woff2') format('woff2');
7
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
8
+ }@font-face {
9
+ font-family: ShopifyInter;
10
+ font-style: normal;
11
+ font-weight: 100 900;
12
+ font-display: swap;
13
+ src: url('ShopifyInterVariable-latin.woff2') format('woff2');
14
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
15
+ }/* ShopifyInter has no italic, so use Inter's italic instead of a synthesized one */@font-face {
16
+ font-family: ShopifyInter;
17
+ font-style: italic;
18
+ font-weight: 100 900;
19
+ font-display: swap;
20
+ src: url('InterVariable-Italic.woff2') format('woff2');
21
+ }/* Inter covers the scripts that aren't included in ShopifyInter subsets */@font-face {
2
22
  font-family: Inter;
3
23
  font-style: normal;
4
24
  font-weight: 100 900;
@@ -213,169 +233,1006 @@
213
233
 
214
234
  --p-color-bg-surface-secondary: rgba(247, 247, 247, 1);
215
235
  --p-color-bg-inverse: #1a1a1a;
216
- --p-color-bg-fill-inverse: #303030
236
+ --p-color-bg-fill-inverse: #303030;
217
237
  --p-color-icon: rgba(74, 74, 74, 1);
218
238
  --p-color-border: rgba(235, 235, 235, 1);
219
239
  --p-color-button-gradient-bg-fill: linear-gradient(180deg,rgba(48,48,48,0) 63.53%,hsla(0,0%,100%,.15));
240
+ }/* Tokens from the updated Polaris design language (Shopify admin "admin-next" theme).
241
+ Legacy token names are aliased too, since Polaris CSS still reads both. */html[class~="Polaris-Summer-Editions-2023"] {
242
+ /* Typography */
243
+ --p-font-family-sans: "ShopifyInter", "Inter", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
244
+ --p-font-weight-regular: 400;
245
+ --p-font-weight-medium: 500;
246
+ --p-font-weight-semibold: 600;
247
+ --p-font-weight-bold: 600;
248
+ --p-font-letter-spacing-dense: -0.005em;
249
+ --p-font-letter-spacing-denser: -0.01em;
250
+ --p-font-letter-spacing-densest: -0.02em;
251
+
252
+ /* Backgrounds */
253
+ --p-color-bg: #fff;
254
+ --p-color-bg-app: #fff;
255
+ --p-color-bg-inverse: #0a0a0a;
256
+ --p-color-bg-surface: #fff;
257
+ --p-color-bg-surface-hover: #f7f7f7;
258
+ --p-color-bg-surface-active: #f2f2f2;
259
+ --p-color-bg-surface-selected: #f2f2f2;
260
+ --p-color-bg-surface-disabled: #00000008;
261
+ --p-color-bg-surface-secondary: #f7f7f7;
262
+ --p-color-bg-surface-secondary-hover: #f2f2f2;
263
+ --p-color-bg-surface-secondary-active: #ebebeb;
264
+ --p-color-bg-surface-secondary-selected: #ebebeb;
265
+ --p-color-bg-surface-tertiary: #f2f2f2;
266
+ --p-color-bg-surface-tertiary-hover: #ebebeb;
267
+ --p-color-bg-surface-tertiary-active: #ddd;
268
+ --p-color-bg-surface-brand: #f7f7f7;
269
+ --p-color-bg-surface-brand-hover: #f2f2f2;
270
+ --p-color-bg-surface-brand-active: #ebebeb;
271
+ --p-color-bg-surface-brand-selected: #ebebeb;
272
+ --p-color-bg-surface-inverse: #1b1b1b;
273
+ --p-color-bg-surface-info: oklch(0.95 0.0448 212.63);
274
+ --p-color-bg-surface-info-hover: #b2e9f6;
275
+ --p-color-bg-surface-info-active: oklch(0.8821 0.0848 215.71);
276
+ --p-color-bg-surface-success: oklch(0.9672 0.0599 131.73);
277
+ --p-color-bg-surface-success-hover: oklch(0.9241 0.1033 132.55);
278
+ --p-color-bg-surface-success-active: oklch(0.9147 0.1488 133.17);
279
+ --p-color-bg-surface-caution: oklch(0.9662 0.0722 97.61);
280
+ --p-color-bg-surface-caution-hover: oklch(0.9468 0.1191 98.52);
281
+ --p-color-bg-surface-caution-active: oklch(0.9325 0.1496 98.46);
282
+ --p-color-bg-surface-warning: oklch(0.9557 0.035 67.45);
283
+ --p-color-bg-surface-warning-hover: oklch(0.9316 0.0545 67.18);
284
+ --p-color-bg-surface-warning-active: oklch(0.8907 0.0887 65.7);
285
+ --p-color-bg-surface-critical: oklch(0.947 0.03 20.5);
286
+ --p-color-bg-surface-critical-hover: oklch(0.897 0.0609 23.88);
287
+ --p-color-bg-surface-critical-active: oklch(0.8382 0.0956 22.58);
288
+
289
+ /* Fills */
290
+ --p-color-bg-fill-disabled: #00000008;
291
+ --p-color-bg-fill-secondary: #ebebeb;
292
+ --p-color-bg-fill-secondary-hover: #ddd;
293
+ --p-color-bg-fill-secondary-active: #d0d0d0;
294
+ --p-color-bg-fill-tertiary: #ddd;
295
+ --p-color-bg-fill-tertiary-hover: #d0d0d0;
296
+ --p-color-bg-fill-tertiary-active: #c0c0c0;
297
+ --p-color-bg-fill-transparent: #0000000d;
298
+ --p-color-bg-fill-transparent-hover: #00000014;
299
+ --p-color-bg-fill-transparent-active: #00000021;
300
+ --p-color-bg-fill-transparent-selected: #00000021;
301
+ --p-color-bg-fill-transparent-secondary: #00000014;
302
+ --p-color-bg-fill-transparent-secondary-hover: #00000021;
303
+ --p-color-bg-fill-transparent-secondary-active: #0000002e;
304
+ --p-color-bg-fill-brand: #101010;
305
+ --p-color-bg-fill-brand-hover: #0a0a0a;
306
+ --p-color-bg-fill-brand-active: #0a0a0a;
307
+ --p-color-bg-fill-brand-selected: #101010;
308
+ --p-color-bg-fill-brand-disabled: #00000021;
309
+ --p-color-bg-fill-inverse: #1b1b1b;
310
+ --p-color-bg-fill-inverse-hover: #4a4a4a;
311
+ --p-color-bg-fill-inverse-active: #606060;
312
+ --p-color-bg-fill-info: #5bc9eb;
313
+ --p-color-bg-fill-info-hover: #3dbce5;
314
+ --p-color-bg-fill-info-active: oklch(0.7045 0.1543 225.11);
315
+ --p-color-bg-fill-info-secondary: oklch(0.8637 0.1018 216.95);
316
+ --p-color-bg-fill-success: #8ae156;
317
+ --p-color-bg-fill-success-hover: #75d63b;
318
+ --p-color-bg-fill-success-active: oklch(0.7477 0.2647 137.07);
319
+ --p-color-bg-fill-success-secondary: oklch(0.9053 0.1942 133.49);
320
+ --p-color-bg-fill-caution: #ffdd34;
321
+ --p-color-bg-fill-caution-hover: oklch(0.8849 0.2086 94.82);
322
+ --p-color-bg-fill-caution-active: oklch(0.7777 0.1833 90.68);
323
+ --p-color-bg-fill-caution-secondary: oklch(0.9167 0.1785 98);
324
+ --p-color-bg-fill-warning: #ff8a3e;
325
+ --p-color-bg-fill-warning-hover: oklch(0.7194 0.2136 47.51);
326
+ --p-color-bg-fill-warning-active: oklch(0.6819 0.2132 45.87);
327
+ --p-color-bg-fill-warning-secondary: oklch(0.8497 0.1229 65.04);
328
+ --p-color-bg-fill-critical: oklch(0.5656 0.2454 28.92);
329
+ --p-color-bg-fill-critical-hover: oklch(0.5462 0.2365 28.88);
330
+ --p-color-bg-fill-critical-active: oklch(0.4913 0.2122 28.82);
331
+ --p-color-bg-fill-critical-selected: oklch(0.4913 0.2122 28.82);
332
+ --p-color-bg-fill-critical-secondary: oklch(0.897 0.0609 23.88);
333
+
334
+ /* Text */
335
+ --p-color-text: #101010;
336
+ --p-color-text-secondary: #4a4a4a;
337
+ --p-color-text-disabled: #a6a6a6;
338
+ --p-color-text-link: oklch(0.484 0.2413 262.8);
339
+ --p-color-text-link-hover: oklch(0.4441 0.2201 262.81);
340
+ --p-color-text-link-active: #0d3faa;
341
+ --p-color-text-link-inverse: oklch(0.734 0.1449 264.63);
342
+ --p-color-text-brand: #101010;
343
+ --p-color-text-brand-hover: #101010;
344
+ --p-color-text-inverse: #fcfcfc;
345
+ --p-color-text-inverse-secondary: #a6a6a6;
346
+ --p-color-text-info: oklch(0.2715 0.0576 221.37);
347
+ --p-color-text-info-hover: oklch(0.2715 0.0576 221.37);
348
+ --p-color-text-info-active: oklch(0.2715 0.0576 221.37);
349
+ --p-color-text-info-on-bg-fill: oklch(0.2715 0.0576 221.37);
350
+ --p-color-text-success: oklch(0.2334 0.0796 134.14);
351
+ --p-color-text-success-hover: oklch(0.2334 0.0796 134.14);
352
+ --p-color-text-success-active: oklch(0.2334 0.0796 134.14);
353
+ --p-color-text-success-on-bg-fill: oklch(0.2334 0.0796 134.14);
354
+ --p-color-text-caution: oklch(0.2708 0.0638 90.28);
355
+ --p-color-text-caution-hover: oklch(0.2708 0.0638 90.28);
356
+ --p-color-text-caution-active: oklch(0.2708 0.0638 90.28);
357
+ --p-color-text-caution-on-bg-fill: oklch(0.2708 0.0638 90.28);
358
+ --p-color-text-warning: oklch(0.2475 0.0726 51.49);
359
+ --p-color-text-warning-hover: oklch(0.2475 0.0726 51.49);
360
+ --p-color-text-warning-active: oklch(0.2475 0.0726 51.49);
361
+ --p-color-text-warning-on-bg-fill: oklch(0.2475 0.0726 51.49);
362
+ --p-color-text-critical: oklch(0.5462 0.2365 28.88);
363
+ --p-color-text-critical-hover: oklch(0.4913 0.2122 28.82);
364
+ --p-color-text-critical-active: oklch(0.2121 0.0942 30.9);
365
+ --p-color-text-critical-secondary: #7e100c;
366
+ --p-color-text-critical-on-bg-fill: #fff;
367
+
368
+ /* Borders */
369
+ --p-color-border: #ddd;
370
+ --p-color-border-hover: #d0d0d0;
371
+ --p-color-border-disabled: #f7f7f7;
372
+ --p-color-border-secondary: #f2f2f2;
373
+ --p-color-border-tertiary: #c0c0c0;
374
+ --p-color-border-focus: oklch(0.6289 0.2036 263.44);
375
+ --p-color-border-brand: #d0d0d0;
376
+ --p-color-border-info: oklch(0.8637 0.1018 216.95);
377
+ --p-color-border-success: oklch(0.9147 0.1488 133.17);
378
+ --p-color-border-caution: oklch(0.9468 0.1191 98.52);
379
+ --p-color-border-warning: oklch(0.9316 0.0545 67.18);
380
+ --p-color-border-critical: oklch(0.5849 0.2543 28.97);
381
+ --p-color-border-critical-secondary: oklch(0.7794 0.1304 21.97);
382
+ --p-color-border-inverse: #606060;
383
+ --p-color-border-inverse-hover: #c0c0c0;
384
+ --p-color-border-inverse-active: #d0d0d0;
385
+
386
+ /* Icons */
387
+ --p-color-icon: #101010;
388
+ --p-color-icon-hover: #0a0a0a;
389
+ --p-color-icon-active: #0a0a0a;
390
+ --p-color-icon-disabled: #a6a6a6;
391
+ --p-color-icon-secondary: #606060;
392
+ --p-color-icon-secondary-hover: #4a4a4a;
393
+ --p-color-icon-secondary-active: #303030;
394
+ --p-color-icon-brand: #0a0a0a;
395
+ --p-color-icon-inverse: #fcfcfc;
396
+ --p-color-icon-info: oklch(0.7045 0.1543 225.11);
397
+ --p-color-icon-success: oklch(0.7477 0.2647 137.07);
398
+ --p-color-icon-caution: oklch(0.8849 0.2086 94.82);
399
+ --p-color-icon-warning: oklch(0.7194 0.2136 47.51);
400
+ --p-color-icon-critical: oklch(0.5849 0.2543 28.97);
401
+
402
+ /* Inputs */
403
+ --p-color-input-bg-surface: #fff;
404
+ --p-color-input-bg-surface-hover: #f7f7f7;
405
+ --p-color-input-bg-surface-active: #fff;
406
+ --p-color-input-border: #8c8c8c;
407
+ --p-color-input-border-hover: #606060;
408
+ --p-color-input-border-active: oklch(0.6289 0.2036 263.44);
409
+
410
+ /* Avatars */
411
+ --p-color-avatar-bg-fill: #a6a6a6;
412
+ --p-color-avatar-text-on-bg-fill: #101010;
413
+ --p-color-avatar-one-bg-fill: oklch(0.6465 0.2575 341.25);
414
+ --p-color-avatar-one-text-on-bg-fill: #fff;
415
+ --p-color-avatar-two-bg-fill: oklch(0.7477 0.2647 137.07);
416
+ --p-color-avatar-two-text-on-bg-fill: #fff;
417
+ --p-color-avatar-three-bg-fill: oklch(0.7045 0.1543 225.11);
418
+ --p-color-avatar-three-text-on-bg-fill: #fff;
419
+ --p-color-avatar-four-bg-fill: oklch(0.5238 0.2625 262.78);
420
+ --p-color-avatar-four-text-on-bg-fill: #fff;
421
+ --p-color-avatar-five-bg-fill: oklch(0.5849 0.2543 28.97);
422
+ --p-color-avatar-five-text-on-bg-fill: #fff;
423
+ --p-color-avatar-six-bg-fill: oklch(0.8849 0.2086 94.82);
424
+ --p-color-avatar-six-text-on-bg-fill: #fff;
425
+ --p-color-avatar-seven-bg-fill: oklch(0.5169 0.2701 285.54);
426
+ --p-color-avatar-seven-text-on-bg-fill: #fff;
427
+
428
+ /* Shadows */
429
+ --p-shadow-container: 0 0 0.125rem 0 rgba(0, 0, 0, 0.24), 0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.02), 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.02), 0 0.25rem 3rem 0 rgba(0, 0, 0, 0.02);
430
+ --p-shadow-popover: 0 0.125rem 0.125rem -0.0625rem rgba(0, 0, 0, 0.06), 0 0.1875rem 0.25rem -0.125rem rgba(0, 0, 0, 0.06), 0 0.375rem 0.5rem -0.1875rem rgba(0, 0, 0, 0.06), 0 0.75rem 1rem -0.25rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.08);
431
+ --p-shadow-dialog: 0 0.125rem 0.1875rem -0.0625rem rgba(0, 0, 0, 0.06), 0 0.25rem 0.375rem -0.125rem rgba(0, 0, 0, 0.06), 0 0.5rem 0.75rem -0.25rem rgba(0, 0, 0, 0.06), 0 1rem 1.5rem -0.375rem rgba(0, 0, 0, 0.06), 0 2rem 3rem -0.5rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.08);
432
+ --p-shadow-input: 0 0.125rem 0.1875rem -0.0625rem rgba(0, 0, 0, 0.04), 0 0.1875rem 0.25rem -0.09375rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.13);
433
+ --p-shadow-input-strong: 0 0.125rem 0.1875rem -0.0625rem rgba(0, 0, 0, 0.04), 0 0.1875rem 0.25rem -0.09375rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.2);
434
+ --p-shadow-input-focus: 0 0.125rem 0.1875rem -0.0625rem rgba(0, 0, 0, 0.04), 0 0.1875rem 0.25rem -0.09375rem rgba(0, 0, 0, 0.04), 0 0.25rem 0.3125rem -0.125rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem #4680ff, 0 0 0 0.1875rem rgba(53, 115, 246, 0.06), 0 0.25rem 1.25rem 0.125rem rgba(53, 115, 246, 0.06), inset 0 0 0.5rem 0.0625rem rgba(53, 115, 246, 0.05);
435
+ --p-shadow-input-critical: 0 0 0 0.0625rem #eb0014, 0 0.25rem 0.3125rem -0.125rem rgba(0, 0, 0, 0.04), 0 0.1875rem 0.25rem -0.09375rem rgba(0, 0, 0, 0.04), 0 0.125rem 0.1875rem -0.0625rem rgba(0, 0, 0, 0.04), inset 0 0 0.5rem 0.0625rem rgba(224, 61, 80, 0.05);
436
+ --p-shadow-input-critical-focus: inset 0 0 0.5rem 0.0625rem rgba(255, 43, 58, 0.05), 0 0 0 0.1875rem rgba(255, 43, 58, 0.14), 0 0 0 0.0625rem #ff2b3a, 0 0.25rem 0.3125rem -0.125rem rgba(0, 0, 0, 0.04), 0 0.1875rem 0.25rem -0.09375rem rgba(0, 0, 0, 0.04), 0 0.125rem 0.1875rem -0.0625rem rgba(0, 0, 0, 0.04);
437
+ --p-shadow-button-primary: 0 0.0625rem 0.03125rem -0.03125rem rgba(0, 0, 0, 0.13), 0 0.0625rem 0.125rem -0.03125rem rgba(0, 0, 0, 0.13), 0 0.25rem 0.375rem -0.125rem rgba(0, 0, 0, 0.13), 0 0.125rem 0.1875rem -0.09375rem rgba(0, 0, 0, 0.13), inset 0 0 0.25rem 0.0625rem #101010, inset 0 0 0.25rem 0.125rem rgba(255, 255, 255, 0.1), inset 0 0 0.75rem -0.375rem rgba(255, 255, 255, 0.75);
438
+ --p-shadow-button-primary-critical: 0 0.0625rem 0.03125rem -0.03125rem rgba(229, 0, 0, 0.16), 0 0.0625rem 0.125rem -0.03125rem rgba(229, 0, 0, 0.16), 0 0.25rem 0.375rem -0.125rem rgba(229, 0, 0, 0.16), 0 0.125rem 0.1875rem -0.09375rem rgba(255, 0, 0, 0.1), inset 0 0 0.25rem 0.0625rem #f50000, inset 0 0 0.25rem 0.125rem rgba(255, 255, 255, 0.1), inset 0 0 0.75rem -0.375rem rgba(255, 255, 255, 0.75);
439
+ --p-shadow-page-button: 0 0 0 0.0625rem rgba(0, 0, 0, 0.07), 0 0.125rem 1.25rem 0 rgba(0, 0, 0, 0.03), 0 0.3125rem 1.25rem 0 rgba(0, 0, 0, 0.03), 0 0.5rem 3.75rem 0 rgba(0, 0, 0, 0.03);
440
+ --p-color-button-gradient-bg-fill: radial-gradient(50% 50% at 50% 0%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(49.59% 37.11% at 50.41% 101.56%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 66.46%);
441
+
442
+ /* Radius */
443
+ --p-border-radius-action: 9999px;
444
+ --p-border-radius-control: 0.75rem;
445
+ --p-border-radius-container: 1.25rem;
446
+ --p-border-radius-popover: 1rem;
447
+ --p-border-radius-dialog: 1.5rem;
448
+ --p-border-radius-tag: 0.5rem;
449
+
450
+ /* Legacy aliases */
451
+ --p-color-bg-app-selected: var(--p-color-bg-surface-selected);
452
+ --p-color-bg-subdued: var(--p-color-bg-surface-secondary);
453
+ --p-color-bg-subdued-hover: var(--p-color-bg-surface-secondary-hover);
454
+ --p-color-bg-subdued-active: var(--p-color-bg-surface-secondary-active);
455
+ --p-color-bg-secondary-experimental: var(--p-color-bg-surface-tertiary);
456
+ --p-color-bg-info-subdued: var(--p-color-bg-surface-info);
457
+ --p-color-bg-info-subdued-hover: var(--p-color-bg-surface-info-hover);
458
+ --p-color-bg-info-subdued-active: var(--p-color-bg-surface-info-active);
459
+ --p-color-bg-success-subdued: var(--p-color-bg-surface-success);
460
+ --p-color-bg-success-subdued-hover: var(--p-color-bg-surface-success-hover);
461
+ --p-color-bg-success-subdued-active: var(--p-color-bg-surface-success-active);
462
+ --p-color-bg-caution-subdued: var(--p-color-bg-surface-caution);
463
+ --p-color-bg-caution-subdued-hover: var(--p-color-bg-surface-caution-hover);
464
+ --p-color-bg-caution-subdued-active: var(--p-color-bg-surface-caution-active);
465
+ --p-color-bg-warning-subdued-experimental: var(--p-color-bg-surface-warning);
466
+ --p-color-bg-critical-subdued: var(--p-color-bg-surface-critical);
467
+ --p-color-bg-critical-subdued-hover: var(--p-color-bg-surface-critical-hover);
468
+ --p-color-bg-critical-subdued-active: var(--p-color-bg-surface-critical-active);
469
+ --p-color-bg-transparent-disabled-experimental: var(--p-color-bg-fill-disabled);
470
+ --p-color-bg-inset: var(--p-color-bg-fill-secondary);
471
+ --p-color-bg-strong: var(--p-color-bg-fill-tertiary);
472
+ --p-color-bg-strong-hover: var(--p-color-bg-fill-tertiary-hover);
473
+ --p-color-bg-strong-active: var(--p-color-bg-fill-tertiary-active);
474
+ --p-color-bg-transparent-hover-experimental: var(--p-color-bg-fill-transparent-hover);
475
+ --p-color-bg-transparent-active-experimental: var(--p-color-bg-fill-transparent-active);
476
+ --p-color-bg-transparent-subdued-experimental: var(--p-color-bg-fill-transparent-secondary);
477
+ --p-color-bg-transparent-primary-disabled-experimental: var(--p-color-bg-fill-brand-disabled);
478
+ --p-color-bg-inset-strong: var(--p-color-bg-fill-inverse);
479
+ --p-color-bg-inverse-hover: var(--p-color-bg-fill-inverse-hover);
480
+ --p-color-bg-inverse-active: var(--p-color-bg-fill-inverse-active);
481
+ --p-color-bg-info-strong: var(--p-color-bg-fill-info);
482
+ --p-color-bg-info: var(--p-color-bg-fill-info-secondary);
483
+ --p-color-bg-success-strong: var(--p-color-bg-fill-success);
484
+ --p-color-bg-success-strong-hover-experimental: var(--p-color-bg-fill-success-hover);
485
+ --p-color-bg-success-strong-active-experimental: var(--p-color-bg-fill-success-active);
486
+ --p-color-bg-success: var(--p-color-bg-fill-success-secondary);
487
+ --p-color-bg-caution-strong: var(--p-color-bg-fill-caution);
488
+ --p-color-bg-caution: var(--p-color-bg-fill-caution-secondary);
489
+ --p-color-bg-warning-strong-experimental: var(--p-color-bg-fill-warning);
490
+ --p-color-bg-warning: var(--p-color-bg-fill-warning-secondary);
491
+ --p-color-bg-critical-strong: var(--p-color-bg-fill-critical);
492
+ --p-color-bg-critical-strong-hover: var(--p-color-bg-fill-critical-hover);
493
+ --p-color-bg-critical-strong-active: var(--p-color-bg-fill-critical-active);
494
+ --p-color-bg-critical: var(--p-color-bg-fill-critical-secondary);
495
+ --p-color-text-subdued: var(--p-color-text-secondary);
496
+ --p-color-text-primary: var(--p-color-text-brand);
497
+ --p-color-text-primary-hover: var(--p-color-text-brand-hover);
498
+ --p-color-text-inverse-subdued: var(--p-color-text-inverse-secondary);
499
+ --p-color-text-info-strong: var(--p-color-text-info-on-bg-fill);
500
+ --p-color-border-subdued: var(--p-color-border-secondary);
501
+ --p-color-border-interactive-focus: var(--p-color-border-focus);
502
+ --p-color-border-primary: var(--p-color-border-brand);
503
+ --p-color-border-critical-strong-experimental: var(--p-color-border-critical-secondary);
504
+ --p-color-icon-subdued: var(--p-color-icon-secondary);
505
+ --p-color-icon-primary: var(--p-color-icon-brand);
506
+ --p-color-bg-input: var(--p-color-input-bg-surface);
507
+ --p-color-bg-input-hover-experimental: var(--p-color-input-bg-surface-hover);
508
+ --p-color-bg-input-active-experimental: var(--p-color-input-bg-surface-active);
509
+ --p-color-border-input: var(--p-color-input-border);
510
+ --p-color-border-input-hover: var(--p-color-input-border-hover);
511
+ --p-color-border-input-active-experimental: var(--p-color-input-border-active);
512
+ --p-color-avatar-background-experimental: var(--p-color-avatar-bg-fill);
513
+ --p-color-avatar-color-experimental: var(--p-color-avatar-text-on-bg-fill);
514
+ --p-color-avatar-style-one-background-experimental: var(--p-color-avatar-one-bg-fill);
515
+ --p-color-avatar-style-one-color-experimental: var(--p-color-avatar-one-text-on-bg-fill);
516
+ --p-color-avatar-style-two-background-experimental: var(--p-color-avatar-two-bg-fill);
517
+ --p-color-avatar-style-two-color-experimental: var(--p-color-avatar-two-text-on-bg-fill);
518
+ --p-color-avatar-style-three-background-experimental: var(--p-color-avatar-three-bg-fill);
519
+ --p-color-avatar-style-three-color-experimental: var(--p-color-avatar-three-text-on-bg-fill);
520
+ --p-color-avatar-style-four-background-experimental: var(--p-color-avatar-four-bg-fill);
521
+ --p-color-avatar-style-four-color-experimental: var(--p-color-avatar-four-text-on-bg-fill);
522
+ --p-color-avatar-style-five-background-experimental: var(--p-color-avatar-five-bg-fill);
523
+ --p-color-avatar-style-five-color-experimental: var(--p-color-avatar-five-text-on-bg-fill);
524
+ --p-color-text-on-color: #fff;
525
+ --p-color-icon-on-color: #fff;
526
+ --p-color-bg-interactive: var(--p-color-bg-fill-brand);
527
+ --p-color-bg-interactive-hover: var(--p-color-bg-fill-brand-hover);
528
+ --p-color-bg-primary: var(--p-color-bg-fill-brand);
529
+ --p-color-bg-primary-hover: var(--p-color-bg-fill-brand-hover);
530
+ --p-color-bg-primary-active: var(--p-color-bg-fill-brand-active);
531
+ --p-color-text-interactive: var(--p-color-text-link);
532
+ --p-color-text-interactive-hover: var(--p-color-text-link-hover);
533
+ --p-color-text-interactive-active: var(--p-color-text-link-active);
534
+ --p-color-border-interactive: var(--p-color-border-focus);
535
+ --p-color-icon-interactive: var(--p-color-text-link);
536
+ --p-color-icon-interactive-hover: var(--p-color-text-link-hover);
537
+ --p-color-icon-interactive-active: var(--p-color-text-link-active);
538
+ --p-color-text-emphasis: var(--p-color-text-link);
539
+ --p-color-text-emphasis-hover: var(--p-color-text-link-hover);
540
+ --p-color-text-emphasis-active: var(--p-color-text-link-active);
541
+ --p-color-icon-emphasis: var(--p-color-text-link);
542
+ --p-color-icon-emphasis-hover: var(--p-color-text-link-hover);
543
+ --p-color-icon-emphasis-active: var(--p-color-text-link-active);
544
+ --p-color-border-interactive-hover: var(--p-color-border-focus);
545
+ --p-color-border-interactive-active: var(--p-color-border-focus);
546
+ --p-color-border-emphasis-hover: var(--p-color-text-link-hover);
547
+ --p-color-border-info-subdued: var(--p-color-border-info);
548
+ --p-color-border-success-subdued: var(--p-color-border-success);
549
+ --p-color-border-caution-subdued: var(--p-color-border-caution);
550
+ --p-color-border-critical-subdued: var(--p-color-border-critical-secondary);
551
+ --p-color-backdrop-bg: #000000b5;
552
+ --p-color-bg-backdrop-experimental: var(--p-color-backdrop-bg);
553
+ }/* Base typography */html[class~="Polaris-Summer-Editions-2023"] {
554
+ font-feature-settings: "calt" on, "ss03" on, "cv02" on, "cv03" on, "cv04" on, "cv09" on;
555
+ }html[class~="Polaris-Summer-Editions-2023"] body {
556
+ letter-spacing: -0.01em;
557
+ }/* Headings use medium weight */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Text--root:is(
558
+ .Polaris-Text--headingXs,
559
+ .Polaris-Text--headingSm,
560
+ .Polaris-Text--headingMd,
561
+ .Polaris-Text--headingLg,
562
+ .Polaris-Text--headingXl,
563
+ .Polaris-Text--heading2xl,
564
+ .Polaris-Text--heading3xl
565
+ ) {
566
+ font-weight: var(--p-font-weight-medium);
567
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Text--root:is(
568
+ .Polaris-Text--headingLg,
569
+ .Polaris-Text--headingXl,
570
+ .Polaris-Text--heading2xl,
571
+ .Polaris-Text--heading3xl
572
+ ) {
573
+ letter-spacing: -0.02em;
574
+ }/* Links: standalone links are blue without an underline; links inside running
575
+ text follow the text color and stay underlined, like s-link. */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Link {
576
+ color: var(--p-color-text-link);
577
+ text-decoration: none;
578
+ text-decoration-color: currentColor;
579
+ text-underline-offset: 0.125em;
580
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Link:hover {
581
+ color: var(--p-color-text-link-hover);
582
+ text-decoration: underline;
583
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Link:active { color: var(--p-color-text-link-active); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Link.Polaris-Link--removeUnderline {
584
+ text-decoration: none;
585
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Link.Polaris-Link--removeUnderline:hover { text-decoration: underline; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Link.Polaris-Link--monochrome, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Link.Polaris-Link--monochrome:hover, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Link.Polaris-Link--monochrome:active { color: inherit; }html[class~="Polaris-Summer-Editions-2023"] :is(p, li, dd, .Polaris-Text--root, .Polaris-TextContainer, .Polaris-Banner__Message) .Polaris-Link:not(.Polaris-Link--removeUnderline), html[class~="Polaris-Summer-Editions-2023"] :is(p, li, dd, .Polaris-Text--root, .Polaris-TextContainer, .Polaris-Banner__Message) .Polaris-Link:not(.Polaris-Link--removeUnderline):hover, html[class~="Polaris-Summer-Editions-2023"] :is(p, li, dd, .Polaris-Text--root, .Polaris-TextContainer, .Polaris-Banner__Message) .Polaris-Link:not(.Polaris-Link--removeUnderline):active, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Link.Polaris-Link--monochrome:not(.Polaris-Link--removeUnderline), html[class~="Polaris-Summer-Editions-2023"] .Polaris-Link.Polaris-Link--monochrome:not(.Polaris-Link--removeUnderline):hover, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Link.Polaris-Link--monochrome:not(.Polaris-Link--removeUnderline):active {
586
+ color: inherit;
587
+ text-decoration: underline;
588
+ }/* Critical text uses the dark admin tone; the brighter --p-color-text-critical
589
+ is kept for inline errors. */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Text--root.Polaris-Text--critical {
590
+ color: var(--p-color-text-critical-active);
220
591
  }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionMenu-SecondaryAction a,
221
592
  html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionMenu-SecondaryAction button,
222
593
  html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionList__Item {
223
- padding: var(--p-space-200);
594
+ padding: var(--p-space-150) var(--p-space-200);
595
+ border-radius: var(--p-border-radius-300);
224
596
  background: transparent !important;
225
597
  }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionMenu-SecondaryAction a:hover, html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionMenu-SecondaryAction button:hover, html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionList__Item:hover {
226
- background: var(--p-color-bg-surface-secondary-hover) !important;
227
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionMenu-SecondaryAction a.Polaris-ActionList--active, html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionMenu-SecondaryAction button.Polaris-ActionList--active, html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionList__Item.Polaris-ActionList--active {
228
- background: var(--p-color-bg-surface-secondary-active) !important;
598
+ background: var(--p-color-bg-fill-transparent-hover) !important;
599
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionMenu-SecondaryAction a:active,
600
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionMenu-SecondaryAction a.Polaris-ActionList--active,
601
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionMenu-SecondaryAction button:active,
602
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionMenu-SecondaryAction button.Polaris-ActionList--active,
603
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionList__Item:active,
604
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionList__Item.Polaris-ActionList--active {
605
+ background: var(--p-color-bg-fill-transparent-active) !important;
606
+ font-weight: var(--p-font-weight-medium);
607
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionMenu-SecondaryAction a.Polaris-ActionList--destructive, html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionMenu-SecondaryAction button.Polaris-ActionList--destructive, html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionList__Item.Polaris-ActionList--destructive {
608
+ color: var(--p-color-text-critical);
229
609
  }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionMenu-SecondaryAction a.Polaris-ActionList--destructive:hover, html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionMenu-SecondaryAction button.Polaris-ActionList--destructive:hover, html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionList__Item.Polaris-ActionList--destructive:hover {
230
- background: var(--p-color-bg-surface-critical-hover) !important;
610
+ background: var(--p-color-bg-surface-critical) !important;
231
611
  }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionMenu-SecondaryAction a.Polaris-ActionList--destructive svg, html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionMenu-SecondaryAction button.Polaris-ActionList--destructive svg, html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionList__Item.Polaris-ActionList--destructive svg {
232
612
  fill: var(--p-color-text-critical);
233
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner .Polaris-Banner__InlineIcon {
234
- padding: var(--p-space-100);
235
- border-radius: var(--p-border-radius-200);
236
- width: 1.75rem;
237
- height: 1.75rem;
238
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner .Polaris-Banner__DismissButton {
613
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionMenu-SecondaryAction a.Polaris-ActionList--disabled:hover, html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionMenu-SecondaryAction button.Polaris-ActionList--disabled:hover, html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionList__Item.Polaris-ActionList--disabled:hover {
614
+ background: transparent !important;
615
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionList__Prefix svg,
616
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList .Polaris-ActionList__Suffix svg {
617
+ fill: var(--p-color-icon);
618
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Badge {
619
+ --pc-badge-bg: rgba(0, 0, 0, 0.05);
620
+ --pc-badge-text: var(--p-color-text-secondary);
621
+ min-height: 1.25rem;
622
+ padding: var(--p-space-025) var(--p-space-150);
623
+ gap: var(--p-space-100);
624
+ border-radius: var(--p-border-radius-200);
625
+ background-color: var(--pc-badge-bg);
626
+ color: var(--pc-badge-text);
627
+ font-weight: var(--p-font-weight-medium);
628
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Badge .Polaris-Text--root {
629
+ font-size: var(--p-font-size-300);
630
+ font-weight: inherit;
631
+ line-height: 1.125rem;
632
+ letter-spacing: -0.01em;
633
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Badge svg {
634
+ fill: currentColor;
635
+ }/* Progress pips sit in a 16px icon slot, like badge icons in the admin. */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Badge:has(> .Polaris-Badge__PipContainer) {
636
+ padding-left: var(--p-space-100);
637
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Badge .Polaris-Badge__PipContainer {
638
+ display: inline-flex;
639
+ align-items: center;
640
+ justify-content: center;
641
+ width: 1rem;
642
+ height: 1rem;
643
+ margin: 0;
644
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Badge.Polaris-Badge--statusInfo {
645
+ --pc-badge-bg: var(--p-color-bg-fill-info-secondary);
646
+ --pc-badge-text: #01596f;
647
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Badge.Polaris-Badge--statusSuccess {
648
+ --pc-badge-bg: var(--p-color-bg-fill-success-secondary);
649
+ --pc-badge-text: #214b03;
650
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Badge.Polaris-Badge--statusAttention {
651
+ --pc-badge-bg: var(--p-color-bg-fill-caution-secondary);
652
+ --pc-badge-text: #574100;
653
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Badge.Polaris-Badge--statusWarning {
654
+ --pc-badge-bg: var(--p-color-bg-fill-warning-secondary);
655
+ --pc-badge-text: #6f2e01;
656
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Badge.Polaris-Badge--statusCritical {
657
+ --pc-badge-bg: var(--p-color-bg-fill-critical-secondary);
658
+ --pc-badge-text: #7e100c;
659
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Badge.Polaris-Badge--statusNew {
660
+ font-weight: var(--p-font-weight-semibold);
661
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Badge.Polaris-Badge__sizeLarge--experimental,
662
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Badge.Polaris-Badge--sizeLarge {
663
+ min-height: 1.75rem;
664
+ padding: var(--p-space-100) var(--p-space-200);
665
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Badge-Pip {
666
+ --pc-pip-color: currentColor;
667
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner {
668
+ --pc-banner-bg: var(--p-color-bg-surface-info);
669
+ --pc-banner-title: var(--p-color-text-info);
670
+ --pc-banner-text: #01596f;
671
+ --pc-banner-icon: var(--p-color-icon-info);
672
+ --pc-banner-action: var(--p-color-bg-surface-info-hover);
673
+ --pc-banner-action-hover: var(--p-color-bg-surface-info-active);
674
+
675
+ position: relative;
676
+ padding: 0;
677
+ border: none;
678
+ border-radius: var(--p-border-radius-container);
679
+ background: var(--pc-banner-bg);
680
+ box-shadow: none;
681
+ color: var(--pc-banner-text);
682
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner::before { content: none; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--statusSuccess {
683
+ --pc-banner-bg: var(--p-color-bg-surface-success);
684
+ --pc-banner-title: var(--p-color-text-success);
685
+ --pc-banner-text: #214b03;
686
+ --pc-banner-icon: var(--p-color-icon-success);
687
+ --pc-banner-action: var(--p-color-bg-surface-success-hover);
688
+ --pc-banner-action-hover: var(--p-color-bg-surface-success-active);
689
+ }/* Web Components 2.0 maps warning banners to the amber caution palette. */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--statusWarning {
690
+ --pc-banner-bg: var(--p-color-bg-surface-caution);
691
+ --pc-banner-title: var(--p-color-text-caution);
692
+ --pc-banner-text: #574100;
693
+ --pc-banner-icon: var(--p-color-icon-caution);
694
+ --pc-banner-action: var(--p-color-bg-surface-caution-hover);
695
+ --pc-banner-action-hover: var(--p-color-bg-surface-caution-active);
696
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--statusCritical {
697
+ --pc-banner-bg: var(--p-color-bg-surface-critical);
698
+ --pc-banner-title: var(--p-color-text-critical-active);
699
+ --pc-banner-text: #7e100c;
700
+ --pc-banner-icon: var(--p-color-icon-critical);
701
+ --pc-banner-action: var(--p-color-bg-surface-critical-hover);
702
+ --pc-banner-action-hover: var(--p-color-bg-surface-critical-active);
703
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner .Polaris-Banner__Body {
239
704
  display: flex;
240
- width: 1.75rem;
241
- height: 1.75rem;
242
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinPage .Polaris-Banner__TopBar {
243
- padding: var(--p-space-300);
244
- }@media (min-width: 30.625em) {html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinPage .Polaris-Banner__TopBar {
245
- border-top-left-radius: var(--p-border-radius-300);
246
- border-top-right-radius: var(--p-border-radius-300)
247
- }
248
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinPage.Polaris-Banner--statusInfo .Polaris-Banner__TopBar, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinPage.Polaris-Banner--statusInfo .Polaris-Banner__InlineIcon {
249
- color: var(--p-color-text-info-on-bg-fill);
250
- background-color: var(--p-color-bg-fill-info);
251
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinPage.Polaris-Banner--statusInfo .Polaris-Banner__TopBar svg, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinPage.Polaris-Banner--statusInfo .Polaris-Banner__InlineIcon svg {
252
- fill: var(--p-color-text-info-on-bg-fill) !important;
253
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinPage.Polaris-Banner--statusSuccess .Polaris-Banner__TopBar, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinPage.Polaris-Banner--statusSuccess .Polaris-Banner__InlineIcon {
254
- color: var(--p-color-text-success-on-bg-fill);
255
- background-color: var(--p-color-bg-fill-success);
256
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinPage.Polaris-Banner--statusSuccess .Polaris-Banner__TopBar svg, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinPage.Polaris-Banner--statusSuccess .Polaris-Banner__InlineIcon svg {
257
- fill: var(--p-color-text-success-on-bg-fill) !important;
258
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinPage.Polaris-Banner--statusWarning .Polaris-Banner__TopBar, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinPage.Polaris-Banner--statusWarning .Polaris-Banner__InlineIcon {
259
- color: var(--p-color-text-warning-on-bg-fill);
260
- background-color: var(--p-color-bg-fill-warning);
261
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinPage.Polaris-Banner--statusWarning .Polaris-Banner__TopBar svg, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinPage.Polaris-Banner--statusWarning .Polaris-Banner__InlineIcon svg {
262
- fill: var(--p-color-text-warning-on-bg-fill) !important;
263
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinPage.Polaris-Banner--statusCritical .Polaris-Banner__TopBar, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinPage.Polaris-Banner--statusCritical .Polaris-Banner__InlineIcon {
264
- color: var(--p-color-text-critical-on-bg-fill);
265
- background-color: var(--p-color-bg-fill-critical);
266
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinPage.Polaris-Banner--statusCritical .Polaris-Banner__TopBar svg, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinPage.Polaris-Banner--statusCritical .Polaris-Banner__InlineIcon svg {
267
- fill: var(--p-color-text-critical-on-bg-fill) !important;
268
- }@media (min-width: 30.625em) {html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--onlyTitle .Polaris-Banner__TopBar {
269
- border-radius: var(--p-border-radius-300) !important
270
- }
271
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinContentContainer .Polaris-Banner__InlineIcon {
272
- padding: calc(var(--p-space-100) * -1);
273
- margin-left: calc(var(--p-space-100) * -1);
274
- margin-bottom: calc(var(--p-space-200) * -1);
275
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinContentContainer .Polaris-Banner__DismissButton {
276
- padding: calc(var(--p-space-100) * -1);
277
- margin-top: calc(var(--p-space-100) * -1);
278
- margin-right: calc(var(--p-space-100) * -1);
279
- margin-bottom: calc(var(--p-space-100) * -1);
280
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinContentContainer .Polaris-Banner__ContainerContentWrapper {
281
- margin-top: 2px;
282
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinContentContainer.Polaris-Banner--statusInfo {
283
- background-color: var(--p-color-bg-surface-info);
284
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinContentContainer.Polaris-Banner--statusSuccess {
285
- background-color: var(--p-color-bg-surface-success);
286
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinContentContainer.Polaris-Banner--statusWarning {
287
- background-color: var(--p-color-bg-surface-warning);
288
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinContentContainer.Polaris-Banner--statusCritical {
289
- background-color: var(--p-color-bg-surface-critical);
290
- }/* Polaris no longer uses different button styling depending on the context,
291
- so we can override all buttons at once. */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:not(.Polaris-Button--plain):hover {
292
- box-shadow: var(--pc-button-shadow-hover);
293
- border: none;
294
- }/* IconOnly */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--iconOnly {
295
- padding: var(--p-space-150) var(--p-space-100);
296
- }/* Dimsiss buttons */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--plain.Polaris-Button--iconOnly {
297
- padding: var(--p-space-100);
298
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--plain.Polaris-Button--iconOnly:hover {
299
- background: rgba(0, 0, 0, 0.05) !important;
300
- box-shadow: none !important;
301
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--plain.Polaris-Button--iconOnly svg {
302
- fill: var(--p-color-icon);
303
- }/* Plain */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--plain {
705
+ flex-wrap: wrap;
706
+ align-items: center;
707
+ gap: var(--p-space-300) var(--p-space-400);
708
+ padding: var(--p-space-400);
709
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner .Polaris-Banner__ContentWrapper {
710
+ display: flex;
711
+ flex-direction: column;
712
+ align-items: stretch;
713
+ column-gap: var(--p-space-150);
714
+ flex: 1 1 20rem;
715
+ min-width: 0;
716
+ overflow-wrap: anywhere;
717
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner .Polaris-Banner__ContentWrapper:not(:has(h2)) {
718
+ flex-direction: row;
719
+ align-items: flex-start;
720
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner .Polaris-Banner__Message { min-width: 0; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner .Polaris-Banner__Heading {
721
+ display: inline-flex;
722
+ align-items: baseline;
723
+ gap: var(--p-space-150);
724
+ max-width: 100%;
725
+ margin: 0;
726
+ vertical-align: baseline;
727
+ color: var(--pc-banner-title);
728
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner .Polaris-Banner__InlineIcon {
729
+ flex: 0 0 1.25rem;
730
+ align-self: flex-start;
731
+ padding: 0;
732
+ background: none;
733
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner .Polaris-Banner__InlineIcon svg { fill: var(--pc-banner-icon); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner .Polaris-Banner__Message,
734
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner .Polaris-Banner__Message > p:only-child { display: block; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner .Polaris-Banner__Message > p + p { margin-top: var(--p-space-200); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner a:not(.Polaris-Button), html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner .Polaris-Link { color: inherit; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner .Polaris-Banner__Actions {
735
+ flex: 0 0 100%;
736
+ max-width: 100%;
737
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner .Polaris-Banner__Actions .Polaris-ButtonGroup {
738
+ margin: 0;
739
+ gap: var(--p-space-250, 0.625rem);
740
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner .Polaris-Banner__Actions .Polaris-ButtonGroup__Item { margin: 0; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner .Polaris-Button:not(.Polaris-Button--plain, .Polaris-Button--primary, .Polaris-Button--disabled) {
741
+ --pc-button-bg: var(--pc-banner-action);
742
+ --pc-button-bg-hover: var(--pc-banner-action-hover);
743
+ --pc-button-bg-active: var(--pc-banner-action-hover);
744
+ --pc-button-fg: var(--pc-banner-title);
745
+ --pc-button-icon: currentColor;
746
+ --pc-button-shadow: none;
747
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner .Polaris-Button--plain:not(.Polaris-Button--disabled) {
748
+ --pc-button-fg: var(--pc-banner-title);
749
+ --pc-button-fg-hover: var(--pc-banner-title);
750
+ --pc-button-icon: currentColor;
751
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner .Polaris-Banner__DismissButton {
752
+ position: absolute;
753
+ top: -0.375rem;
754
+ right: -0.3125rem;
755
+ border: 2px solid var(--p-color-bg-surface);
756
+ border-radius: var(--p-border-radius-full);
757
+ background: var(--pc-banner-bg);
758
+ opacity: 0;
759
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner .Polaris-Banner__DismissButton .Polaris-Button--iconOnly {
760
+ min-width: 1.5rem;
761
+ min-height: 1.5rem;
762
+ padding: var(--p-space-050);
763
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner .Polaris-Banner__DismissButton .Polaris-Button--iconOnly svg { fill: var(--pc-banner-title); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner:is(:hover, :focus-within) .Polaris-Banner__DismissButton { opacity: 1; }/* Edge-to-edge pages must not gain horizontal scroll from the dismiss control. */@media (max-width: 30.6225em) {
764
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner .Polaris-Banner__DismissButton { right: 0; }
765
+ }@media (pointer: coarse) {
766
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner .Polaris-Banner__DismissButton { opacity: 1; }
767
+ }/* Polaris no longer uses different button styling depending on the context,
768
+ so we can override all buttons at once. */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button {
769
+ --pc-button-bg: var(--p-color-bg-fill-secondary);
770
+ --pc-button-bg-hover: var(--p-color-bg-fill-secondary-hover);
771
+ --pc-button-bg-active: var(--p-color-bg-fill-secondary-active);
772
+ --pc-button-fg: var(--p-color-text);
773
+ --pc-button-fg-hover: var(--pc-button-fg);
774
+ --pc-button-icon: var(--p-color-icon);
775
+ --pc-button-shadow: none;
776
+ --pc-button-shadow-hover: var(--pc-button-shadow);
777
+ --pc-button-shadow-active: var(--pc-button-shadow);
778
+ /* Keep the disclosure icon inside the padding instead of pulling it to the edge. */
779
+ --pc-button-disclosure-icon-offset: 0;
780
+
781
+ min-height: 1.75rem;
782
+ min-width: 1.75rem;
783
+ padding: var(--p-space-150) var(--p-space-300);
784
+ border: none;
785
+ border-radius: var(--p-border-radius-full);
786
+ background: var(--pc-button-bg);
787
+ box-shadow: var(--pc-button-shadow);
788
+ color: var(--pc-button-fg);
789
+ transition-property: background-color, box-shadow, transform;
790
+ transition-duration: var(--p-motion-duration-400);
791
+ transition-timing-function: cubic-bezier(0.2, 0.8, 0, 1);
792
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button::before,
793
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button::after {
794
+ border-radius: inherit;
795
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button svg {
796
+ fill: var(--pc-button-icon);
797
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button > .Polaris-Button__Content {
798
+ font-size: var(--p-font-size-300);
799
+ font-weight: var(--p-font-weight-medium);
800
+ line-height: var(--p-font-line-height-400);
801
+ letter-spacing: -0.01em;
802
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:hover {
803
+ background: var(--pc-button-bg-hover);
804
+ box-shadow: var(--pc-button-shadow-hover);
805
+ color: var(--pc-button-fg-hover);
806
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:active,
807
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--pressed {
808
+ background: var(--pc-button-bg-active);
809
+ box-shadow: var(--pc-button-shadow-active);
810
+ color: var(--pc-button-fg-hover);
811
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:active:not(.Polaris-Button--disabled) {
812
+ transform: scale(0.97);
813
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:active:not(.Polaris-Button--disabled) > .Polaris-Button__Content {
814
+ transform: none;
815
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:focus-visible {
816
+ outline: var(--p-border-width-050) solid var(--p-color-border-focus);
817
+ outline-offset: var(--p-space-025);
818
+ box-shadow: var(--pc-button-shadow);
819
+ }/* The outline above replaces the legacy pseudo-element focus ring. */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:focus::after {
304
820
  box-shadow: none !important;
305
- }/* Tertiary */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--removeUnderline>.Polaris-Button__Content {
821
+ }/* Icons */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button .Polaris-Button__Icon {
822
+ margin-top: calc(var(--p-space-050) * -1);
823
+ margin-bottom: calc(var(--p-space-050) * -1);
824
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:has(> .Polaris-Button__Content > .Polaris-Button__Icon:first-child + .Polaris-Button__Text) {
825
+ padding-block: var(--p-space-100);
826
+ padding-left: var(--p-space-150);
827
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:has(> .Polaris-Button__Content > .Polaris-Button__Icon:first-child + .Polaris-Button__Text) > .Polaris-Button__Content > .Polaris-Button__Icon:first-child {
828
+ margin: 0;
829
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:has(> .Polaris-Button__Content > .Polaris-Button__Icon:first-child + .Polaris-Button__Text) > .Polaris-Button__Content > .Polaris-Button__Text {
830
+ margin-left: var(--p-space-050);
831
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:has(> .Polaris-Button__Content > .Polaris-Button__Icon:first-child + .Polaris-Button__Text).Polaris-Button--sizeSlim {
832
+ padding-left: var(--p-space-100);
833
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:has(> .Polaris-Button__Content > .Polaris-Button__Icon:first-child + .Polaris-Button__Text).Polaris-Button--sizeLarge {
834
+ padding-block: var(--p-space-150);
835
+ padding-left: var(--p-space-200);
836
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:has(> .Polaris-Button__Content > .Polaris-Button__Icon:first-child + .Polaris-Button__Text).Polaris-Button--plain {
837
+ margin: 0;
838
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:has(> .Polaris-Button__Content > .Polaris-Button__Text + .Polaris-Button__Icon:last-child) {
839
+ padding-right: var(--p-space-150);
840
+ }/* Primary */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--primary {
841
+ --pc-button-bg: var(--p-color-button-gradient-bg-fill), var(--p-color-bg-fill-brand);
842
+ --pc-button-bg-hover: var(--p-color-button-gradient-bg-fill), var(--p-color-bg-fill-brand-hover);
843
+ --pc-button-bg-active: var(--p-color-button-gradient-bg-fill), var(--p-color-bg-fill-brand-active);
844
+ --pc-button-fg: var(--p-color-text-brand-on-bg-fill, #fff);
845
+ --pc-button-fg-hover: #ddd;
846
+ --pc-button-icon: currentColor;
847
+ --pc-button-shadow: var(--p-shadow-button-primary);
848
+ /* Override the legacy primary rule that removes the resting shadow. */
849
+ box-shadow: var(--pc-button-shadow);
850
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--primary::before {
851
+ display: none;
852
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--primary:hover svg,
853
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--primary:active svg {
854
+ fill: currentColor;
855
+ }/* Destructive */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--destructive {
856
+ --pc-button-bg: var(--p-color-bg-surface-critical);
857
+ --pc-button-bg-hover: var(--p-color-bg-surface-critical-hover);
858
+ --pc-button-bg-active: var(--p-color-bg-surface-critical-active);
859
+ --pc-button-fg: var(--p-color-text-critical-secondary);
860
+ --pc-button-icon: currentColor;
861
+ --pc-button-shadow: none;
862
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--destructive:hover svg,
863
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--destructive:active svg {
864
+ fill: currentColor;
865
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--primary.Polaris-Button--destructive {
866
+ --pc-button-bg: var(--p-color-button-gradient-bg-fill), var(--p-color-bg-fill-critical);
867
+ --pc-button-bg-hover: var(--p-color-button-gradient-bg-fill), var(--p-color-bg-fill-critical-hover);
868
+ --pc-button-bg-active: var(--p-color-button-gradient-bg-fill), var(--p-color-bg-fill-critical-active);
869
+ --pc-button-fg: #fff;
870
+ --pc-button-fg-hover: #ffe7e6;
871
+ --pc-button-shadow: var(--p-shadow-button-primary-critical);
872
+ }/* Outline */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--outline {
873
+ --pc-button-bg: transparent;
874
+ --pc-button-bg-hover: var(--p-color-bg-fill-transparent-hover);
875
+ --pc-button-bg-active: var(--p-color-bg-fill-transparent-active);
876
+ --pc-button-shadow: inset 0 0 0 var(--p-border-width-025) var(--p-color-border);
877
+ border: none;
878
+ }/* Plain */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--plain {
879
+ --pc-button-bg: transparent;
880
+ --pc-button-bg-hover: transparent;
881
+ --pc-button-bg-active: transparent;
882
+ --pc-button-fg: var(--p-color-text-link);
883
+ --pc-button-fg-hover: var(--p-color-text-link-hover);
884
+ --pc-button-icon: currentColor;
885
+ --pc-button-shadow: none;
886
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--plain:active {
887
+ transform: none;
888
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--plain > .Polaris-Button__Content {
889
+ font-size: var(--p-font-size-325);
890
+ font-weight: var(--p-font-weight-regular);
891
+ line-height: var(--p-font-line-height-500);
892
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--plain:hover > .Polaris-Button__Content {
893
+ text-decoration: underline;
894
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--plain.Polaris-Button--removeUnderline:hover > .Polaris-Button__Content {
895
+ text-decoration: none;
896
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--plain:hover svg,
897
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--plain:active svg {
898
+ fill: currentColor;
899
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--plain.Polaris-Button--monochrome {
900
+ --pc-button-fg: currentColor;
901
+ --pc-button-fg-hover: currentColor;
902
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--plain.Polaris-Button--destructive {
903
+ --pc-button-fg: var(--p-color-text-critical);
904
+ --pc-button-fg-hover: var(--p-color-text-critical-hover);
905
+ }/* Tertiary */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--removeUnderline {
906
+ --pc-button-bg-hover: var(--p-color-bg-fill-transparent-hover);
907
+ --pc-button-bg-active: var(--p-color-bg-fill-transparent-active);
908
+ --pc-button-fg: var(--p-color-text);
909
+ --pc-button-fg-hover: var(--p-color-text);
910
+ --pc-button-icon: var(--p-color-icon);
911
+ margin: 0;
912
+ padding: var(--p-space-150) var(--p-space-300);
913
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--removeUnderline:active {
914
+ transform: scale(0.97);
915
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--removeUnderline > .Polaris-Button__Content {
306
916
  font-size: var(--p-font-size-300);
307
917
  font-weight: var(--p-font-weight-medium) !important;
308
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--removeUnderline:hover {
309
- background: var(--p-color-bg-fill-tertiary);
310
- }/* Loading */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--loading svg {
311
- fill: var(--p-color-icon-disabled);
312
- }/* Destructive */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--destructive:is(.Polaris-Button--primary) {
313
- --pc-button-color: var(--p-color-bg-fill-critical);
314
- --pc-button-text: var(--p-color-bg-surface);
315
- --pc-button-color-hover: var(--p-color-bg-fill-critical-hover);
316
- --pc-button-color-active: var(--p-color-bg-fill-critical-active);
317
- --pc-button-color-depressed: var(--p-color-bg-fill-critical-selected);
318
- box-shadow: var(--p-shadow-button-primary-critical);
319
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--destructive:is(.Polaris-Button--primary):active {
320
- background: var(--pc-button-color-active);
321
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--destructive:not(.Polaris-Button--primary) {
322
- --pc-button-text: var(--p-color-text-critical);
323
- --pc-button-icon-fill: currentColor;
324
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--destructive:not(.Polaris-Button--primary):active {
325
- --pc-button-text: var(--p-color-text-critical-active);
326
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--destructive:not(.Polaris-Button--primary):hover {
327
- --pc-button-text: var(--p-color-text-critical-hover);
328
- }/* Primary */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--primary {
329
- --pc-button-bg-gradient: var(--p-color-button-gradient-bg-fill);
330
- --pc-button-color: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand);
331
- --pc-button-text: var(--p-color-bg-surface);
332
- --pc-button-color-hover: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-hover);
333
- --pc-button-color-active: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-active);
334
- --pc-button-color-depressed: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-selected);
335
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--primary:hover {
336
- --pc-button-text: var(--p-color-bg-surface);
337
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--primary:active {
338
- box-shadow: var(--pc-button-box-shadow_active);
339
- }@media (max-width: 767px) {
340
- html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:not(.Polaris-Button--monochrome.Polaris-Button--plain)>.Polaris-Button__Content, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--removeUnderline>.Polaris-Button__Content {
341
- font-size: var(--p-font-size-350) !important;
918
+ line-height: var(--p-font-line-height-400);
919
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--removeUnderline.Polaris-Button--destructive:not(.Polaris-Button--disabled) {
920
+ --pc-button-bg-hover: var(--p-color-bg-surface-critical);
921
+ --pc-button-bg-active: var(--p-color-bg-surface-critical-hover);
922
+ --pc-button-fg: var(--p-color-text-critical-secondary);
923
+ --pc-button-fg-hover: var(--p-color-text-critical-secondary);
924
+ --pc-button-icon: currentColor;
925
+ color: var(--pc-button-fg);
926
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--removeUnderline.Polaris-Button--destructive:not(.Polaris-Button--disabled):hover,
927
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--removeUnderline.Polaris-Button--destructive:not(.Polaris-Button--disabled):active { color: var(--pc-button-fg-hover); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--removeUnderline.Polaris-Button--destructive:not(.Polaris-Button--disabled) svg { fill: currentColor; }/* Icon only */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--iconOnly {
928
+ padding: var(--p-space-100);
929
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--plain.Polaris-Button--iconOnly {
930
+ --pc-button-bg-hover: var(--p-color-bg-fill-transparent-hover);
931
+ --pc-button-bg-active: var(--p-color-bg-fill-transparent-active);
932
+ --pc-button-icon: var(--p-color-icon-secondary);
933
+ min-width: 1.75rem;
934
+ min-height: 1.75rem;
935
+ margin: 0;
936
+ padding: var(--p-space-100);
937
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--plain.Polaris-Button--iconOnly:hover svg,
938
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--plain.Polaris-Button--iconOnly:active svg {
939
+ fill: var(--p-color-icon);
940
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--plain.Polaris-Button--iconOnly:active {
941
+ transform: scale(0.97);
942
+ }/* Pressed */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--pressed:not(.Polaris-Button--plain, .Polaris-Button--disabled) {
943
+ --pc-button-bg: var(--p-color-bg-fill-inverse);
944
+ --pc-button-bg-hover: var(--p-color-bg-fill-inverse-hover);
945
+ --pc-button-bg-active: var(--p-color-bg-fill-inverse);
946
+ --pc-button-fg: #fff;
947
+ --pc-button-fg-hover: #fff;
948
+ --pc-button-icon: currentColor;
949
+ --pc-button-shadow: none;
950
+
951
+ /* Keep legacy pressed-state rules from restoring a pale fill and inset shadow. */
952
+ background: var(--pc-button-bg);
953
+ box-shadow: var(--pc-button-shadow);
954
+ color: var(--pc-button-fg);
955
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--pressed:not(.Polaris-Button--plain, .Polaris-Button--disabled):hover {
956
+ background: var(--pc-button-bg-hover);
957
+ box-shadow: var(--pc-button-shadow-hover);
958
+ color: var(--pc-button-fg-hover);
959
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--pressed:not(.Polaris-Button--plain, .Polaris-Button--disabled):active {
960
+ background: var(--pc-button-bg-active);
961
+ box-shadow: var(--pc-button-shadow-active);
962
+ }/* Sizes */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--sizeSlim {
963
+ min-height: 1.5rem;
964
+ padding: var(--p-space-100) var(--p-space-200);
965
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--sizeSlim.Polaris-Button--iconOnly {
966
+ min-width: 1.5rem;
967
+ padding: var(--p-space-050);
968
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--sizeLarge {
969
+ min-height: 2rem;
970
+ min-width: 2rem;
971
+ padding: var(--p-space-150) var(--p-space-300);
972
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--sizeLarge > .Polaris-Button__Content {
973
+ font-size: var(--p-font-size-325);
974
+ line-height: var(--p-font-line-height-500);
975
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--sizeLarge.Polaris-Button--iconOnly {
976
+ padding: var(--p-space-150);
977
+ }/* Disabled */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--disabled,
978
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--disabled:hover,
979
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--disabled:active {
980
+ --pc-button-bg: var(--p-color-bg-fill-disabled);
981
+ --pc-button-fg: var(--p-color-text-disabled);
982
+ --pc-button-icon: var(--p-color-icon-disabled);
983
+ --pc-button-shadow: none;
984
+ background: var(--p-color-bg-fill-disabled);
985
+ box-shadow: none;
986
+ color: var(--p-color-text-disabled);
987
+ transform: none;
988
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--primary.Polaris-Button--disabled {
989
+ background: var(--p-color-bg-fill-brand-disabled);
990
+ color: var(--p-color-text-brand-on-bg-fill, #fff);
991
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--primary.Polaris-Button--disabled svg {
992
+ fill: currentColor;
993
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--plain.Polaris-Button--disabled {
994
+ background: transparent;
995
+ }/* Loading */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--loading.Polaris-Button--disabled {
996
+ color: transparent;
997
+ opacity: 1;
998
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--loading.Polaris-Button--disabled > .Polaris-Button__Content {
999
+ opacity: 0;
1000
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--loading.Polaris-Button--disabled > .Polaris-Button__Content .Polaris-Button__Text {
1001
+ visibility: visible;
1002
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--loading.Polaris-Button--disabled > .Polaris-Button__Spinner {
1003
+ display: flex;
1004
+ position: absolute;
1005
+ top: 50%;
1006
+ left: 50%;
1007
+ margin: 0;
1008
+ width: 1.25rem;
1009
+ height: 1.25rem;
1010
+ transform: translate(-50%, -50%);
1011
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--loading.Polaris-Button--disabled > .Polaris-Button__Spinner svg {
1012
+ width: 100%;
1013
+ height: 100%;
1014
+ fill: none;
1015
+ animation: polaris-button-loading-spin 500ms linear infinite;
1016
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--loading.Polaris-Button--disabled > .Polaris-Button__Spinner .Polaris-Button__SpinnerTrack {
1017
+ stroke: rgba(0, 0, 0, 0.18);
1018
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--loading.Polaris-Button--disabled > .Polaris-Button__Spinner .Polaris-Button__SpinnerIndicator {
1019
+ stroke: var(--p-color-bg-fill-inverse);
1020
+ stroke-linecap: round;
1021
+ stroke-dasharray: 4, 6;
1022
+ }@media (prefers-reduced-motion: reduce) {
1023
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--loading.Polaris-Button--disabled > .Polaris-Button__Spinner svg {
1024
+ animation: none;
1025
+ }
1026
+ }@keyframes polaris-button-loading-spin {
1027
+ to {
1028
+ transform: rotate(1turn);
1029
+ }
1030
+ }/* Narrow desktop panels keep compact controls; touch devices get larger targets. */@media (max-width: 767px) and (pointer: coarse) {
1031
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:not(.Polaris-Button--plain) {
1032
+ min-height: 2.25rem;
1033
+ padding-top: var(--p-space-200);
1034
+ padding-bottom: var(--p-space-200);
1035
+ }
1036
+
1037
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:not(.Polaris-Button--plain) > .Polaris-Button__Content {
1038
+ font-size: var(--p-font-size-325) !important;
342
1039
  line-height: var(--p-font-line-height-500) !important;
343
1040
  }
344
- html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:not(.Polaris-Button--monochrome.Polaris-Button--plain):not(.Polaris-Button--disclosure.Polaris-Button--plain)>.Polaris-Button__Content, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--removeUnderline>.Polaris-Button__Content {
345
- font-weight: var(--p-font-weight-semibold) !important;
346
- }
347
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-CalloutCard__Container .Polaris-CalloutCard__Dismiss {
1041
+
1042
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button--iconOnly:not(.Polaris-Button--plain) {
1043
+ min-width: 2.25rem;
1044
+ }
1045
+ }/* Segmented button group */html[class~="Polaris-Summer-Editions-2023"] [data-buttongroup-segmented='true'] > :first-child .Polaris-Button,
1046
+ html[class~="Polaris-Summer-Editions-2023"] [data-buttongroup-segmented='true'] > :first-child .Polaris-Button::before,
1047
+ html[class~="Polaris-Summer-Editions-2023"] [data-buttongroup-segmented='true'] > :first-child .Polaris-Button::after {
1048
+ border-top-left-radius: var(--p-border-radius-full);
1049
+ border-bottom-left-radius: var(--p-border-radius-full);
1050
+ }html[class~="Polaris-Summer-Editions-2023"] [data-buttongroup-segmented='true'] > :last-child .Polaris-Button,
1051
+ html[class~="Polaris-Summer-Editions-2023"] [data-buttongroup-segmented='true'] > :last-child .Polaris-Button::before,
1052
+ html[class~="Polaris-Summer-Editions-2023"] [data-buttongroup-segmented='true'] > :last-child .Polaris-Button::after {
1053
+ border-top-right-radius: var(--p-border-radius-full);
1054
+ border-bottom-right-radius: var(--p-border-radius-full);
1055
+ }html[class~="Polaris-Summer-Editions-2023"] [data-buttongroup-segmented='true'] > :last-child:first-child .Polaris-Button,
1056
+ html[class~="Polaris-Summer-Editions-2023"] [data-buttongroup-segmented='true'] > :last-child:first-child .Polaris-Button::after {
1057
+ border-radius: var(--p-border-radius-full);
1058
+ }html[class~="Polaris-Summer-Editions-2023"] [data-buttongroup-segmented='true'] > :not(:first-child) .Polaris-Button:not(.Polaris-Button--primary, .Polaris-Button--pressed, .Polaris-Button--plain) {
1059
+ --pc-button-shadow: inset var(--p-border-width-025) 0 0 0 rgba(0, 0, 0, 0.11);
1060
+ }html[class~="Polaris-Summer-Editions-2023"] [data-buttongroup-segmented='true'] .Polaris-Button:active {
1061
+ transform: none;
1062
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-CalloutCard__Container {
1063
+ container-type: inline-size;
1064
+ padding: 0;
1065
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-CalloutCard__Container > .Polaris-LegacyCard__Section {
1066
+ display: grid;
1067
+ grid-template-columns: minmax(0, 1fr);
1068
+ align-items: start;
1069
+ gap: var(--p-space-100);
1070
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-CalloutCard__Container.Polaris-CalloutCard--hasDismiss > .Polaris-LegacyCard__Section {
1071
+ grid-template-columns: minmax(0, 1fr) auto;
1072
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-CalloutCard__Container .Polaris-CalloutCard {
1073
+ display: grid;
1074
+ grid-template-columns: minmax(0, 1fr);
1075
+ align-items: center;
1076
+ gap: var(--p-space-400);
1077
+ min-width: 0;
1078
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-CalloutCard__Container .Polaris-CalloutCard:has(.Polaris-CalloutCard__Illustration) { grid-template-columns: auto auto; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-CalloutCard__Container .Polaris-CalloutCard__Content {
1079
+ display: grid;
1080
+ gap: var(--p-space-200);
1081
+ min-width: 0;
1082
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-CalloutCard__Container .Polaris-CalloutCard__Title,
1083
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-CalloutCard__Container .Polaris-CalloutCard__Buttons { margin: 0; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-CalloutCard__Container .Polaris-CalloutCard__Buttons .Polaris-ButtonGroup {
1084
+ margin: 0;
1085
+ gap: var(--p-space-200);
1086
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-CalloutCard__Container .Polaris-CalloutCard__Buttons .Polaris-ButtonGroup > .Polaris-ButtonGroup__Item { margin: 0; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-CalloutCard__Container .Polaris-CalloutCard__Illustration {
1087
+ display: flex;
1088
+ justify-content: center;
1089
+ min-width: 0;
1090
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-CalloutCard__Container .Polaris-CalloutCard__Image {
1091
+ display: block;
1092
+ width: 12.5rem;
1093
+ max-width: 100%;
1094
+ height: 6.25rem;
1095
+ object-fit: contain;
1096
+ margin: 0;
1097
+ border-radius: var(--p-border-radius-200);
1098
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-CalloutCard__Container .Polaris-CalloutCard__Dismiss {
1099
+ position: static;
348
1100
  display: flex;
349
1101
  width: 1.75rem;
350
1102
  height: 1.75rem;
351
- right: var(--p-space-300);
352
- top: var(--p-space-300);
353
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard .Polaris-LegacyCard__Header {
354
- padding-top: var(--p-space-400);
355
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard .Polaris-LegacyCard__Header+.Polaris-LegacyCard__Section {
356
- padding-top: var(--p-space-200);
357
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard .Polaris-LegacyCard__Section {
358
- padding: var(--p-space-400) var(--p-space-400) var(--p-space-200);
359
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard .Polaris-LegacyCard__Section+.Polaris-LegacyCard__Section {
360
- padding-top: var(--p-space-200);
361
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard .Polaris-LegacyCard__Section:last-child {
362
- padding-bottom: var(--p-space-400);
363
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard .Polaris-LegacyCard__Section.Polaris-LegacyCard__Section--flush {
364
- padding: 0;
365
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard .Polaris-LegacyCard__Section.Polaris-LegacyCard__Section--flush img {
366
- border-top-left-radius: var(--p-border-radius-300);
367
- border-top-right-radius: var(--p-border-radius-300);
368
- width: 100%;
369
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard .Polaris-LegacyCard__Footer {
370
- padding-top: var(--p-space-100);
371
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard.Polaris-LegacyCard--withoutTitle .Polaris-LegacyCard__Section:first-child {
372
- padding-top: var(--p-space-400);
373
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard.Polaris-LegacyCard--borderless {
1103
+ }@container (max-width: 480px) {
1104
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-CalloutCard__Container .Polaris-CalloutCard:has(.Polaris-CalloutCard__Illustration) {
1105
+ grid-template-columns: minmax(0, 1fr);
1106
+ }
1107
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard {
1108
+ --pc-card-surface-bg: var(--p-color-bg-surface);
1109
+ --pc-card-radius: var(--p-border-radius-container);
1110
+
1111
+ background: transparent;
1112
+ border: none;
1113
+ border-radius: 0;
1114
+ box-shadow: none;
1115
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard::before { content: none; }/* Stacked cards are 16px apart, plus 16px above an outside header (like s-section). */html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard + .Polaris-LegacyCard { margin-top: var(--p-space-400); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard + .Polaris-LegacyCard:has(> .Polaris-LegacyCard__Header) { margin-top: var(--p-space-800); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard .Polaris-LegacyCard__Header .Polaris-ButtonGroup, html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard .Polaris-LegacyCard__SectionHeader .Polaris-ButtonGroup {
1116
+ margin: 0;
1117
+ gap: var(--p-space-200);
1118
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard .Polaris-LegacyCard__Header .Polaris-ButtonGroup > .Polaris-ButtonGroup__Item, html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard .Polaris-LegacyCard__SectionHeader .Polaris-ButtonGroup > .Polaris-ButtonGroup__Item { margin: 0; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Header {
1119
+ display: flex;
1120
+ align-items: center;
1121
+ min-height: 1.75rem;
1122
+ padding: 0;
1123
+ margin-bottom: var(--p-space-300);
1124
+ overflow-wrap: anywhere;
1125
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Header .Polaris-Text--headingMd {
1126
+ font-size: 0.9375rem;
1127
+ line-height: 1.375rem;
1128
+ letter-spacing: -0.01em;
1129
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Header > .Polaris-LegacyStack {
1130
+ flex: 1;
1131
+ min-width: 0;
1132
+ margin: 0;
1133
+ gap: var(--p-space-200);
1134
+ align-items: center;
1135
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Header > .Polaris-LegacyStack > .Polaris-LegacyStack__Item { margin: 0; min-width: 0; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Header > .Polaris-LegacyStack > .Polaris-LegacyStack__Item--fill { flex: 1 1 10rem; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Header .Polaris-Button--plain { margin: 0; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Surface {
1136
+ min-width: 0;
1137
+ background: var(--pc-card-surface-bg);
1138
+ border-radius: var(--pc-card-radius);
1139
+ box-shadow: var(--p-shadow-container);
1140
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Surface > .Polaris-LegacyCard__Section {
1141
+ padding: var(--p-space-400) var(--p-space-400) var(--p-space-200);
1142
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Surface > .Polaris-LegacyCard__Section + .Polaris-LegacyCard__Section { padding-top: var(--p-space-200); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Surface > .Polaris-LegacyCard__Section:last-child { padding-bottom: var(--p-space-400); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Surface > .Polaris-LegacyCard__Section:first-child {
1143
+ border-top-left-radius: var(--pc-card-radius);
1144
+ border-top-right-radius: var(--pc-card-radius);
1145
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Surface > .Polaris-LegacyCard__Section:last-child {
1146
+ border-bottom-left-radius: var(--pc-card-radius);
1147
+ border-bottom-right-radius: var(--pc-card-radius);
1148
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Surface > .Polaris-LegacyCard__Section.Polaris-LegacyCard__Section--subdued {
1149
+ padding-top: var(--p-space-300);
1150
+ padding-bottom: var(--p-space-300);
1151
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Surface > .Polaris-LegacyCard__Section.Polaris-LegacyCard__Section--subdued:last-child { padding-bottom: var(--p-space-400); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Surface > .Polaris-LegacyCard__Section.Polaris-LegacyCard__Section--fullWidth { padding-inline: 0; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Surface > .Polaris-LegacyCard__Section:has(> .Polaris-LegacyFilters) { padding-bottom: var(--p-space-400); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Surface > .Polaris-LegacyCard__Section.Polaris-LegacyCard__Section--flush {
1152
+ padding: 0;
1153
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Surface > .Polaris-LegacyCard__Section.Polaris-LegacyCard__Section--flush img { display: block; width: 100%; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Surface > .Polaris-LegacyCard__Section.Polaris-LegacyCard__Section--flush:first-child img {
1154
+ border-top-left-radius: var(--pc-card-radius);
1155
+ border-top-right-radius: var(--pc-card-radius);
1156
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Surface > .Polaris-LegacyCard__Section.Polaris-LegacyCard__Section--flush:last-child img {
1157
+ border-bottom-left-radius: var(--pc-card-radius);
1158
+ border-bottom-right-radius: var(--pc-card-radius);
1159
+ }/* Tabs leave 8px below them, so a section under tabs starts 12px down, like
1160
+ the 12px a bordered section leaves below its content. */html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Surface > :is(.Polaris-LegacyTabs__Wrapper, :has(> .Polaris-LegacyTabs__Wrapper)) + .Polaris-LegacyCard__Section:not(.Polaris-LegacyCard__Section--flush) {
1161
+ padding-top: var(--p-space-100);
1162
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Surface > .Polaris-LegacyCard__Footer {
1163
+ padding-top: var(--p-space-100);
1164
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Surface > .Polaris-LegacyCard__Footer:first-child { padding-top: var(--p-space-400); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard.Polaris-LegacyCard--subdued { --pc-card-surface-bg: var(--p-color-bg-surface-secondary); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard.Polaris-LegacyCard--borderless > .Polaris-LegacyCard__Surface { box-shadow: none; }/* Layout sections that open with an outside card header get the same extra 16px as stacked cards.
1165
+ The card may sit in one wrapper (a turbo frame, say). Sections that share the first row keep the
1166
+ default so they stay aligned. */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Layout__Section:has(
1167
+ > .Polaris-LegacyCard:first-child > .Polaris-LegacyCard__Header,
1168
+ > :first-child > .Polaris-LegacyCard:first-child > .Polaris-LegacyCard__Header
1169
+ ):not(
1170
+ :first-child,
1171
+ .Polaris-Layout__Section:first-child + .Polaris-Layout__Section--secondary,
1172
+ .Polaris-Layout__Section--oneHalf:first-child + .Polaris-Layout__Section--oneHalf,
1173
+ .Polaris-Layout__Section--oneThird:first-child + .Polaris-Layout__Section--oneThird,
1174
+ .Polaris-Layout__Section--oneThird:first-child + .Polaris-Layout__Section--oneThird + .Polaris-Layout__Section--oneThird
1175
+ ) {
1176
+ margin-top: var(--p-space-800);
1177
+ }/* Pages have no side padding on small screens, so cards run edge to edge. */@media (max-width: 30.6225em) {
1178
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard {
1179
+ --pc-card-radius: 0;
1180
+ }
1181
+
1182
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard > .Polaris-LegacyCard__Header { padding-inline: var(--p-space-400); }
1183
+
1184
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinPage {
1185
+ border-radius: 0;
1186
+ }
1187
+
1188
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Layout__Annotation {
1189
+ padding-left: var(--p-space-400);
1190
+ }
1191
+ }/* Checkbox and radio button */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Checkbox__Backdrop,
1192
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-RadioButton__Backdrop {
1193
+ border: none;
1194
+ background-color: var(--p-color-input-bg-surface);
1195
+ box-shadow: var(--p-shadow-input-strong);
1196
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Checkbox__Backdrop {
1197
+ border-radius: var(--p-border-radius-100);
1198
+ }html[class~="Polaris-Summer-Editions-2023"] :is(.Polaris-Choice, .Polaris-Checkbox__ChoiceLabel, .Polaris-OptionList-Option__CheckboxLabel):hover .Polaris-Checkbox__Input:not(:checked, :disabled, .Polaris-Checkbox__Input--indeterminate) + .Polaris-Checkbox__Backdrop, html[class~="Polaris-Summer-Editions-2023"] :is(.Polaris-Choice, .Polaris-RadioButton__ChoiceLabel):hover .Polaris-RadioButton__Input:not(:checked, :disabled) + .Polaris-RadioButton__Backdrop {
1199
+ background-color: var(--p-color-input-bg-surface-hover);
1200
+ box-shadow: var(--p-shadow-input-strong);
1201
+ }html[class~="Polaris-Summer-Editions-2023"] :is(.Polaris-Choice, .Polaris-Checkbox__ChoiceLabel, .Polaris-OptionList-Option__CheckboxLabel):hover .Polaris-Checkbox__Input:is(:checked, .Polaris-Checkbox__Input--indeterminate):not(:disabled) + .Polaris-Checkbox__Backdrop, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Checkbox__Input:is(:checked, .Polaris-Checkbox__Input--indeterminate):focus-visible + .Polaris-Checkbox__Backdrop, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Checkbox__Input:checked + .Polaris-Checkbox__Backdrop, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Checkbox__Input.Polaris-Checkbox__Input--indeterminate + .Polaris-Checkbox__Backdrop, html[class~="Polaris-Summer-Editions-2023"] .Polaris-RadioButton__Input:checked:not([disabled]) + .Polaris-RadioButton__Backdrop, html[class~="Polaris-Summer-Editions-2023"] .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:checked:not([disabled]) + .Polaris-RadioButton__Backdrop {
374
1202
  border: none;
1203
+ background-color: var(--p-color-bg-fill-brand);
1204
+ box-shadow: 0 0.0625rem 0.0625rem -0.03125rem rgba(0, 0, 0, 0.13), inset 0 0 0 0.03125rem rgba(0, 0, 0, 0.4), inset 0 0.09375rem 0.125rem -0.0625rem rgba(255, 255, 255, 0.42);
1205
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Checkbox__Input:disabled + .Polaris-Checkbox__Backdrop,
1206
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-RadioButton__Input:disabled + .Polaris-RadioButton__Backdrop,
1207
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Checkbox__ChoiceLabel:hover .Polaris-Checkbox__Input:disabled + .Polaris-Checkbox__Backdrop,
1208
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:disabled + .Polaris-RadioButton__Backdrop {
1209
+ background-color: var(--p-color-bg-fill-disabled);
1210
+ box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.08);
1211
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Checkbox__Input:disabled:checked + .Polaris-Checkbox__Backdrop,
1212
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-RadioButton__Input:disabled:checked + .Polaris-RadioButton__Backdrop,
1213
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Checkbox__ChoiceLabel:hover .Polaris-Checkbox__Input:disabled:is(:checked, .Polaris-Checkbox__Input--indeterminate) + .Polaris-Checkbox__Backdrop,
1214
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:disabled:checked + .Polaris-RadioButton__Backdrop {
1215
+ background-color: var(--p-color-bg-fill-brand-disabled);
375
1216
  box-shadow: none;
376
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard.Polaris-LegacyCard--borderless::before {
377
- content: none;
378
- }.Polaris-Collapsible__Trigger .Polaris-Button__Icon:last-child .Polaris-Icon {
1217
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Checkbox--error .Polaris-Checkbox__Input + .Polaris-Checkbox__Backdrop {
1218
+ background-color: var(--p-color-input-bg-surface);
1219
+ box-shadow: var(--p-shadow-input-critical);
1220
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Choice:hover .Polaris-Checkbox--error .Polaris-Checkbox__Input:not(:checked, :disabled, .Polaris-Checkbox__Input--indeterminate) + .Polaris-Checkbox__Backdrop, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Checkbox--error .Polaris-Checkbox__Input:not(:checked, :disabled, .Polaris-Checkbox__Input--indeterminate):focus-visible + .Polaris-Checkbox__Backdrop {
1221
+ background-color: var(--p-color-input-bg-surface-hover);
1222
+ box-shadow: var(--p-shadow-input-critical);
1223
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Checkbox--error .Polaris-Checkbox__Input:is(:checked, .Polaris-Checkbox__Input--indeterminate):not(:disabled) + .Polaris-Checkbox__Backdrop, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Choice:hover .Polaris-Checkbox--error .Polaris-Checkbox__Input:is(:checked, .Polaris-Checkbox__Input--indeterminate):not(:disabled) + .Polaris-Checkbox__Backdrop {
1224
+ background-color: var(--p-color-bg-fill-critical);
1225
+ box-shadow: none !important;
1226
+ }/* Both icons render, so toggling the indeterminate class in JS swaps them. */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Checkbox__Input:not(.Polaris-Checkbox__Input--indeterminate) ~ .Polaris-Checkbox__Icon .Polaris-Checkbox__MinusIcon,
1227
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Checkbox__Input--indeterminate ~ .Polaris-Checkbox__Icon .Polaris-Checkbox__CheckIcon {
1228
+ display: none;
1229
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Choice__Label {
1230
+ font-size: var(--p-font-size-325);
1231
+ }/* Checkboxes are 14px, radio buttons 16px. */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Choice__Control:has(> .Polaris-Checkbox) {
1232
+ width: 1rem;
1233
+ height: 1rem;
1234
+ margin-top: 0.0625rem;
1235
+ }.Polaris-Collapsible__Trigger .Polaris-Button__Icon:last-child .Polaris-Icon {
379
1236
  transition: transform var(--p-motion-duration-100) var(--p-motion-ease-out);
380
1237
  }.Polaris-Collapsible__Trigger[aria-expanded="true"] .Polaris-Button__Icon:last-child .Polaris-Icon {
381
1238
  transform: rotate(180deg);
@@ -421,14 +1278,14 @@
421
1278
  margin-right: -1px;
422
1279
  border-radius: 0;
423
1280
  }.Polaris-LegacyFilters-ConnectedFilterControl__RightContainer .Polaris-LegacyFilters-ConnectedFilterControl__Item:first-of-type > div > div > button {
424
- border-top-left-radius: var(--p-border-radius-1);
425
- border-bottom-left-radius: var(--p-border-radius-1);
1281
+ border-top-left-radius: var(--p-border-radius-full);
1282
+ border-bottom-left-radius: var(--p-border-radius-full);
426
1283
  }.Polaris-LegacyFilters-ConnectedFilterControl__RightContainer.Polaris-LegacyFilters-ConnectedFilterControl--queryFieldHidden .Polaris-LegacyFilters-ConnectedFilterControl__Item:first-of-type > div > div > button {
427
- border-top-left-radius: var(--p-border-radius-1);
428
- border-bottom-left-radius: var(--p-border-radius-1);
1284
+ border-top-left-radius: var(--p-border-radius-full);
1285
+ border-bottom-left-radius: var(--p-border-radius-full);
429
1286
  }.Polaris-LegacyFilters-ConnectedFilterControl__RightContainerWithoutMoreFilters .Polaris-LegacyFilters-ConnectedFilterControl__Item:last-child > div > div > button {
430
- border-top-right-radius: var(--p-border-radius-1);
431
- border-bottom-right-radius: var(--p-border-radius-1);
1287
+ border-top-right-radius: var(--p-border-radius-full);
1288
+ border-bottom-right-radius: var(--p-border-radius-full);
432
1289
  }/* Toast */.Polaris-Frame-ToastManager {
433
1290
  bottom: 0;
434
1291
  }/* Autocomplete */.Polaris-Autocomplete__EmptyState {
@@ -483,51 +1340,6 @@
483
1340
  text-align: center;
484
1341
  }/* ActionList */.Polaris-ActionList__Item {
485
1342
  border: none !important;
486
- }/* ResourceItem Actions + Disclosure */.Polaris-ResourceItem__Actions {
487
- display: none;
488
- }.Polaris-ResourceItem:hover .Polaris-ResourceItem__Actions {
489
- display: flex;
490
- }@media (max-width: 45em), (min-width: 48.0625em) and (max-width: 61.5em) {
491
- [data-has-navigation] .Polaris-ResourceItem__Actions {
492
- display: none !important;
493
- }
494
- }@media (max-width: 46.5em) {
495
- .Polaris-ResourceItem__Actions {
496
- display: none !important;
497
- }
498
- }.Polaris-ResourceItem--persistActions .Polaris-ResourceItem__Actions {
499
- display: flex;
500
- }@media (max-width: 45em), (min-width: 48.0625em) and (max-width: 61.5em) {
501
- [data-has-navigation] .Polaris-ResourceItem--persistActions .Polaris-ResourceItem__Actions {
502
- display: none !important;
503
- }
504
- }@media (max-width: 46.5em) {
505
- .Polaris-ResourceItem--persistActions .Polaris-ResourceItem__Actions {
506
- display: none !important;
507
- }
508
- }.Polaris-ResourceItem__Disclosure {
509
- position: relative;
510
- top: -0.7rem;
511
- right: -1.65rem;
512
- display: none;
513
- width: 4.8rem;
514
- pointer-events: initial;
515
- }.Polaris-ResourceItem--selectMode .Polaris-ResourceItem__Disclosure {
516
- display: none;
517
- }@media (max-width: 45em), (min-width: 48.0625em) and (max-width: 61.5em) {
518
- [data-has-navigation] .Polaris-ResourceItem__Disclosure {
519
- display: flex;
520
- flex: 0 0 4.8rem;
521
- justify-content: center;
522
- align-items: center;
523
- }
524
- }@media (max-width: 46.5em) {
525
- .Polaris-ResourceItem__Disclosure {
526
- display: flex;
527
- flex: 0 0 4.8rem;
528
- justify-content: center;
529
- align-items: center;
530
- }
531
1343
  }/* Polaris-VisuallyHidden */.Polaris-VisuallyHidden {
532
1344
  position: absolute !important;
533
1345
  top: 0;
@@ -543,6 +1355,8 @@
543
1355
  width: 100%;
544
1356
  }/* Select *//* Fix for Safari bug: https://github.com/baoagency/polaris_view_components/issues/454 */select.Polaris-Select__Input {
545
1357
  font-weight: 400;
1358
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable {
1359
+ border-radius: var(--p-border-radius-container);
546
1360
  }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__TableRow {
547
1361
  content-visibility: auto;
548
1362
  contain-intrinsic-size: auto 250px;
@@ -550,45 +1364,382 @@
550
1364
  html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__Heading:not(
551
1365
  .Polaris-DataTable__Heading--flush
552
1366
  ):first-child {
553
- padding-left: var(--p-space-400);
1367
+ padding-left: var(--p-space-300);
554
1368
  }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__Cell:not(.Polaris-DataTable__Cell--flush):last-child,
555
1369
  html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__Heading:not(
556
1370
  .Polaris-DataTable__Heading--flush
557
1371
  ):last-child {
558
- padding-right: var(--p-space-400);
559
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-FooterHelp .Polaris-FooterHelp__Text {
1372
+ padding-right: var(--p-space-300);
1373
+ }/* Inside cards, tables round only the corners they share with the card, so a header row below tabs, filters, or another section stays square. */html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard__Surface :is(.Polaris-DataTable, .Polaris-IndexTable) { border-radius: var(--pc-card-radius); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard__Surface :is(.Polaris-DataTable, .Polaris-IndexTable):not(:first-child), html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard__Surface :not(:first-child) :is(.Polaris-DataTable, .Polaris-IndexTable) {
1374
+ border-top-left-radius: 0;
1375
+ border-top-right-radius: 0;
1376
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard__Surface :is(.Polaris-DataTable, .Polaris-IndexTable):not(:last-child), html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard__Surface :not(:last-child) :is(.Polaris-DataTable, .Polaris-IndexTable) {
1377
+ border-bottom-left-radius: 0;
1378
+ border-bottom-right-radius: 0;
1379
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__Cell--header {
1380
+ padding-top: var(--p-space-150);
1381
+ padding-bottom: var(--p-space-150);
1382
+ background-color: var(--p-color-bg-surface-secondary);
1383
+ color: var(--p-color-text-secondary);
1384
+ font-size: var(--p-font-size-300);
1385
+ font-weight: var(--p-font-weight-medium);
1386
+ line-height: 1.125rem;
1387
+ border-bottom: var(--p-border-width-025) solid var(--p-color-border-secondary);
1388
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__Cell:not(.Polaris-DataTable__Cell--header) {
1389
+ padding-top: var(--p-space-150);
1390
+ padding-bottom: var(--p-space-150);
1391
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__Cell--sortable {
1392
+ padding-top: 0;
1393
+ padding-bottom: 0;
1394
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__Heading {
1395
+ padding-top: var(--p-space-150);
1396
+ padding-bottom: var(--p-space-150);
1397
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__TableRow + .Polaris-DataTable__TableRow .Polaris-DataTable__Cell,
1398
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__Cell--total {
1399
+ border-color: var(--p-color-border-secondary);
1400
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__TableRow:hover .Polaris-DataTable__Cell {
1401
+ background-color: var(--p-color-bg-surface-hover);
1402
+ }/* Rows are 12px apart (8px when tight), and the first and last rows leave the outer padding to the card section. */html[class~="Polaris-Summer-Editions-2023"] .Polaris-DescriptionList {
1403
+ --pc-description-list-spacing: var(--p-space-300);
1404
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DescriptionList.Polaris-DescriptionList--spacingTight { --pc-description-list-spacing: var(--p-space-200); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DescriptionList .Polaris-DescriptionList__Term {
1405
+ font-weight: var(--p-font-weight-medium);
1406
+ padding: var(--pc-description-list-spacing) 0 var(--p-space-100);
1407
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DescriptionList .Polaris-DescriptionList__Description {
1408
+ padding: 0 0 var(--pc-description-list-spacing);
1409
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DescriptionList > .Polaris-DescriptionList__Term:first-child { padding-top: 0; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DescriptionList > .Polaris-DescriptionList__Description:last-child { padding-bottom: 0; }@media (min-width: 30.625em) {
1410
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-DescriptionList .Polaris-DescriptionList__Term {
1411
+ padding: var(--pc-description-list-spacing) var(--p-space-400) var(--pc-description-list-spacing) 0;
1412
+ }
1413
+
1414
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-DescriptionList .Polaris-DescriptionList__Description {
1415
+ padding: var(--pc-description-list-spacing) 0;
1416
+ }
1417
+
1418
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-DescriptionList > .Polaris-DescriptionList__Term:first-child,
1419
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-DescriptionList > .Polaris-DescriptionList__Term:first-child + .Polaris-DescriptionList__Description { padding-top: 0; }
1420
+
1421
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-DescriptionList > .Polaris-DescriptionList__Term:nth-last-child(2),
1422
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-DescriptionList > .Polaris-DescriptionList__Description:last-child { padding-bottom: 0; }
1423
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone {
1424
+ --p-color-input-bg-surface-hover: var(--p-color-bg-surface-hover);
1425
+ border-radius: var(--p-border-radius-control);
1426
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone::after,
1427
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone.Polaris-DropZone--hasOutline:not(.Polaris-DropZone--focused)::after {
1428
+ border-radius: var(--p-border-radius-control);
1429
+ border-width: var(--p-border-width-0165);
1430
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone.Polaris-DropZone--sizeExtraLarge,
1431
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone.Polaris-DropZone--sizeLarge { min-height: 7.5rem; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone .Polaris-DropZone__Container::after { border-radius: var(--p-border-radius-control); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone .Polaris-DropZone__Overlay {
1432
+ border-radius: var(--p-border-radius-control);
1433
+ background-color: var(--p-color-bg-surface-hover);
1434
+ padding: var(--p-space-200);
1435
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone .Polaris-DropZone__Overlay .Polaris-Text--root {
1436
+ font-size: var(--p-font-size-325);
1437
+ line-height: var(--p-font-line-height-500);
1438
+ font-weight: var(--p-font-weight-regular);
1439
+ letter-spacing: inherit;
1440
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone .Polaris-DropZone-FileUpload { min-height: inherit; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone .Polaris-DropZone-FileUpload__Content {
1441
+ display: flex;
1442
+ flex-direction: column;
1443
+ align-items: center;
1444
+ gap: var(--p-space-200);
1445
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone .Polaris-DropZone-FileUpload__UploadIcon { display: none; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone .Polaris-DropZone-FileUpload__Button {
1446
+ display: inline-flex;
1447
+ align-items: center;
1448
+ justify-content: center;
1449
+ border-radius: var(--p-border-radius-full);
1450
+ padding: var(--p-space-150) var(--p-space-300);
1451
+ background: var(--p-color-bg-fill-secondary);
1452
+ color: var(--p-color-text);
1453
+ font-size: var(--p-font-size-300);
1454
+ line-height: var(--p-font-line-height-400);
1455
+ font-weight: var(--p-font-weight-medium);
1456
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone .Polaris-DropZone-FileUpload__HelpText {
1457
+ color: var(--p-color-text-secondary);
1458
+ font-size: var(--p-font-size-300);
1459
+ line-height: 1.125rem;
1460
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone:not(.Polaris-DropZone--isDisabled) .Polaris-DropZone-FileUpload__Button:hover { background: var(--p-color-bg-fill-secondary-hover); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone:not(.Polaris-DropZone--isDisabled) .Polaris-DropZone-FileUpload__Button:active { background: var(--p-color-bg-fill-secondary-active); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone.Polaris-DropZone--sizeMedium .Polaris-DropZone-FileUpload { padding: var(--p-space-400); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone.Polaris-DropZone--sizeSmall {
1461
+ min-height: 2.5rem;
1462
+ max-height: 7.5rem;
1463
+ aspect-ratio: 1;
1464
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone.Polaris-DropZone--sizeSmall .Polaris-DropZone-FileUpload { padding: var(--p-space-200); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone.Polaris-DropZone--sizeSmall .Polaris-DropZone-FileUpload__UploadIcon { display: block; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone.Polaris-DropZone--sizeSmall .Polaris-DropZone-FileUpload__Button,
1465
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone.Polaris-DropZone--sizeSmall .Polaris-DropZone-FileUpload__HelpText { display: none; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone.Polaris-DropZone--hasError {
1466
+ --p-color-input-border: var(--p-color-border-critical-secondary);
1467
+ --p-color-input-border-hover: var(--p-color-border-critical-secondary);
1468
+ --p-color-input-bg-surface-hover: var(--p-color-bg-surface-critical);
1469
+ background: var(--p-color-bg-surface-critical);
1470
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone.Polaris-DropZone--hasError:hover { background: var(--p-color-bg-surface-critical); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone.Polaris-DropZone--hasError::after { border-color: var(--p-color-border-critical-secondary); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone.Polaris-DropZone--hasError .Polaris-DropZone__Overlay { background: var(--p-color-bg-surface-critical); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone.Polaris-DropZone--isDisabled {
1471
+ background: var(--p-color-bg-surface-disabled);
1472
+ cursor: default;
1473
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone.Polaris-DropZone--isDisabled::after { border-color: var(--p-color-bg-surface-disabled); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone.Polaris-DropZone--isDisabled .Polaris-DropZone-FileUpload__Button {
1474
+ background: var(--p-color-bg-fill-disabled);
1475
+ color: var(--p-color-text-disabled);
1476
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone.Polaris-DropZone--isDisabled .Polaris-DropZone-FileUpload__HelpText { color: var(--p-color-text-disabled); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone.Polaris-DropZone--isDisabled .Polaris-DropZone-FileUpload__UploadIcon svg { fill: var(--p-color-icon-disabled); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-FooterHelp {
1477
+ flex-direction: column;
1478
+ align-items: center;
1479
+ margin: var(--p-space-500) 0;
1480
+ width: 100%;
1481
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-FooterHelp .Polaris-FooterHelp__Text {
560
1482
  font-size: var(--p-font-size-325);
561
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-FormLayout {
1483
+ letter-spacing: inherit;
1484
+ max-width: 100%;
1485
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-FooterHelp .Polaris-Link {
1486
+ color: inherit;
1487
+ border-radius: var(--p-border-radius-100);
1488
+ text-decoration: underline;
1489
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-FooterHelp .Polaris-Link:hover,
1490
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-FooterHelp .Polaris-Link:active { color: inherit; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-FooterHelp .Polaris-Link:focus:not(:focus-visible) { outline: none; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-FooterHelp .Polaris-Link:focus-visible {
1491
+ outline: var(--p-border-width-050) solid var(--p-color-border-focus);
1492
+ outline-offset: var(--p-space-050);
1493
+ text-decoration: none;
1494
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-FormLayout {
562
1495
  --pc-form-layout-gap: var(--p-space-400);
563
1496
  --pc-form-layout-item-top: calc(var(--p-space-400) - 2px);
1497
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-IndexTable {
1498
+ border-radius: var(--p-border-radius-container);
564
1499
  }html[class~="Polaris-Summer-Editions-2023"] .Polaris-IndexTable .Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush):first-child,
565
1500
  html[class~="Polaris-Summer-Editions-2023"] .Polaris-IndexTable .Polaris-IndexTable__TableHeading:not(.Polaris-IndexTable__TableHeading--flush):first-child {
566
- padding-left: var(--p-space-400);
1501
+ padding-left: var(--p-space-300);
567
1502
  }html[class~="Polaris-Summer-Editions-2023"] .Polaris-IndexTable .Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush):last-child,
568
1503
  html[class~="Polaris-Summer-Editions-2023"] .Polaris-IndexTable .Polaris-IndexTable__TableHeading:not(.Polaris-IndexTable__TableHeading--flush):last-child {
569
- padding-right: var(--p-space-400);
1504
+ padding-right: var(--p-space-300);
1505
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-IndexTable .Polaris-IndexTable__TableHeading {
1506
+ padding-top: var(--p-space-150);
1507
+ padding-bottom: var(--p-space-150);
1508
+ font-weight: var(--p-font-weight-medium);
1509
+ line-height: 1.125rem;
1510
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-IndexTable .Polaris-IndexTable__TableRow:not(:first-child) .Polaris-IndexTable__TableCell,
1511
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-IndexTable .Polaris-IndexTable__TableRow + .Polaris-IndexTable__TableRow {
1512
+ border-color: var(--p-color-border-secondary);
570
1513
  }html[class~="Polaris-Summer-Editions-2023"] .Polaris-List .Polaris-List__Item:last-child {
571
1514
  margin-bottom: 0 !important;
572
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-CloseButton:hover {
573
- background: var(--p-color-bg-fill-tertiary);
1515
+ }/* Avatar */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Avatar.Polaris-Avatar--sizeExtraSmall {
1516
+ border-radius: 0.375rem;
1517
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Avatar.Polaris-Avatar--sizeSmall {
1518
+ border-radius: 0.5rem;
1519
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Avatar.Polaris-Avatar--sizeMedium {
1520
+ border-radius: 0.5rem;
1521
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Avatar.Polaris-Avatar--sizeLarge {
1522
+ border-radius: 0.625rem;
1523
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Avatar.Polaris-Avatar--shapeRound {
1524
+ border-radius: var(--p-border-radius-full);
1525
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Avatar .Polaris-Avatar__Text {
1526
+ font-weight: var(--p-font-weight-medium);
1527
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Avatar .Polaris-Avatar__Svg text {
1528
+ font-size: 1rem;
1529
+ }/* Thumbnail */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Thumbnail,
1530
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Thumbnail::after {
1531
+ border-radius: var(--p-border-radius-300);
1532
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Thumbnail.Polaris-Thumbnail--sizeExtraSmall,
1533
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Thumbnail.Polaris-Thumbnail--sizeExtraSmall::after {
1534
+ border-radius: var(--p-border-radius-150);
1535
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Thumbnail.Polaris-Thumbnail--sizeSmall,
1536
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Thumbnail.Polaris-Thumbnail--sizeSmall::after {
1537
+ border-radius: 0.625rem;
1538
+ }/* Progress bar */html[class~="Polaris-Summer-Editions-2023"] .Polaris-ProgressBar {
1539
+ --pc-progress-bar-background: var(--p-color-bg-surface-tertiary);
1540
+ border-radius: var(--p-border-radius-full);
1541
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ProgressBar.Polaris-ProgressBar--colorPrimary {
1542
+ --pc-progress-bar-indicator: var(--p-color-bg-fill-brand);
1543
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ProgressBar .Polaris-ProgressBar__Indicator {
1544
+ border-radius: var(--p-border-radius-full);
1545
+ width: clamp(0%, calc(var(--pc-progress-bar-percent) * 100%), 100%);
1546
+ transform: none;
1547
+ transition: width var(--pc-progress-bar-duration) var(--p-motion-ease);
1548
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ProgressBar.Polaris-ProgressBar--sizeSmall {
1549
+ height: 0.25rem;
1550
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ProgressBar.Polaris-ProgressBar--sizeMedium {
1551
+ height: 0.375rem;
1552
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ProgressBar.Polaris-ProgressBar--sizeLarge {
1553
+ height: 0.5rem;
1554
+ }@media (prefers-reduced-motion: reduce) {
1555
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-ProgressBar .Polaris-ProgressBar__Indicator { transition: none; }
1556
+ }/* Spinner: the web-component ring has a subdued track and a 40% foreground arc. */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Spinner {
1557
+ display: inline-flex;
1558
+ flex-shrink: 0;
1559
+ vertical-align: middle;
1560
+ opacity: 1;
1561
+ transition: opacity 150ms allow-discrete;
1562
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Spinner svg {
1563
+ display: block;
1564
+ fill: none;
1565
+ transform-origin: center;
1566
+ animation: var(--p-motion-keyframes-spin) 500ms linear infinite;
1567
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Spinner .Polaris-Spinner__Track { stroke: rgba(0, 0, 0, 0.18); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Spinner .Polaris-Spinner__Indicator {
1568
+ stroke: #1b1b1b;
1569
+ stroke-linecap: round;
1570
+ stroke-dasharray: 4, 6;
1571
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Spinner{
1572
+
1573
+ @starting-style { opacity: 0; }
1574
+ }@media (prefers-reduced-motion: reduce) {html[class~="Polaris-Summer-Editions-2023"] .Polaris-Spinner {
1575
+ transition: none
1576
+ }
1577
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Spinner svg { animation: none; }
1578
+ }/* Skeletons */html[class~="Polaris-Summer-Editions-2023"] .Polaris-SkeletonBodyText,
1579
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-SkeletonDisplayText__DisplayText,
1580
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-SkeletonThumbnail {
1581
+ border-radius: var(--p-border-radius-200);
1582
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-SkeletonBodyText::after,
1583
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-SkeletonDisplayText__DisplayText::after {
1584
+ border-radius: var(--p-border-radius-200);
1585
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Dialog__Modal {
1586
+ box-shadow: var(--p-shadow-dialog);
1587
+ }@media (min-width: 48em), (pointer: fine) {
1588
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Dialog__Container { justify-content: center; }
1589
+
1590
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Dialog__Modal {
1591
+ position: relative;
1592
+ width: 38.75rem;
1593
+ max-width: calc(100vw - var(--p-space-800));
1594
+ max-height: calc(100svh - 3.75rem);
1595
+ margin: 0 auto;
1596
+ border-radius: var(--p-border-radius-dialog);
1597
+ }
1598
+
1599
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Dialog__Modal.Polaris-Modal-Dialog--sizeSmall { width: 23.75rem; max-width: calc(100vw - var(--p-space-800)); }
1600
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Dialog__Modal.Polaris-Modal-Dialog--sizeLarge { width: 61.25rem; max-width: calc(100vw - var(--p-space-800)); }
1601
+ /* clamp() instead of min(), which LibSass rejects when apps import this CSS from Sass. */
1602
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Dialog__Modal.Polaris-Modal-Dialog--limitHeight { max-height: clamp(0px, calc(100svh - 3.75rem), 37.5rem); }
1603
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Header {
1604
+ --pc-box-background: transparent !important;
1605
+ --pc-box-border-block-end-width: 0 !important;
1606
+ --pc-box-padding-block-start-xs: var(--p-space-400) !important;
1607
+ --pc-box-padding-block-end-xs: var(--p-space-400) !important;
1608
+ --pc-box-padding-inline-start-xs: var(--p-space-500) !important;
1609
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Header .Polaris-Text--root {
1610
+ font-size: 0.9375rem;
1611
+ font-weight: var(--p-font-weight-medium);
1612
+ line-height: 1.375rem;
1613
+ letter-spacing: -0.02em;
1614
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal__Body { min-height: 0; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Section {
1615
+ border-bottom: none;
1616
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Section > .Polaris-Box { padding: var(--p-space-100) var(--p-space-500); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Section + .Polaris-Modal-Section { margin-top: var(--p-space-200); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Dialog__Modal:not(:has(> .Polaris-Modal-Footer)) .Polaris-Modal-Section:last-child > .Polaris-Box {
1617
+ padding-bottom: var(--p-space-400);
1618
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Dialog__Modal:not(:has(> .Polaris-Modal-Header)) .Polaris-Modal-Section:first-of-type > .Polaris-Box {
1619
+ padding-top: var(--p-space-400);
1620
+ padding-right: var(--p-space-1200);
1621
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Footer {
1622
+ flex-shrink: 0;
1623
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Footer > .Polaris-Box {
1624
+ --pc-box-border-block-start-width: 0 !important;
1625
+ padding-top: var(--p-space-300);
1626
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Footer .Polaris-LegacyStack,
1627
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Footer .Polaris-ButtonGroup { margin: 0; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Footer .Polaris-LegacyStack__Item,
1628
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Footer .Polaris-ButtonGroup__Item { margin: 0; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Footer .Polaris-ButtonGroup { gap: var(--p-space-200); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Footer .Polaris-Button:not(.Polaris-Button--primary, .Polaris-Button--plain, .Polaris-Button--destructive, .Polaris-Button--disabled) {
1629
+ --pc-button-bg: var(--p-color-bg-surface);
1630
+ --pc-button-bg-hover: var(--p-color-bg-surface-hover);
1631
+ --pc-button-bg-active: var(--p-color-bg-surface-hover);
1632
+ --pc-button-shadow: var(--p-shadow-page-button);
1633
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-CloseButton {
1634
+ display: flex;
1635
+ align-items: center;
1636
+ justify-content: center;
1637
+ width: 1.75rem;
1638
+ height: 1.75rem;
1639
+ padding: var(--p-space-100);
1640
+ margin: 0;
1641
+ border-radius: var(--p-border-radius-full);
1642
+ background: var(--p-color-bg-surface);
1643
+ box-shadow: var(--p-shadow-page-button);
1644
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-CloseButton:hover,
1645
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-CloseButton:active { background: var(--p-color-bg-surface-hover); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-CloseButton::after { border-radius: var(--p-border-radius-full); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Dialog__Modal > .Polaris-Modal-CloseButton {
1646
+ position: absolute;
1647
+ top: var(--p-space-200);
1648
+ right: var(--p-space-200);
1649
+ z-index: 1;
1650
+ }@media (max-width: 47.9975em) and (pointer: coarse) {
1651
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Footer .Polaris-LegacyStack__Item,
1652
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Footer .Polaris-ButtonGroup,
1653
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Footer .Polaris-ButtonGroup__Item,
1654
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Footer .Polaris-Button { width: 100%; }
1655
+
1656
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Footer .Polaris-LegacyStack__Item--fill { display: none; }
1657
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-Footer .Polaris-ButtonGroup { flex-direction: column-reverse; }
1658
+ }/* Navigation uses the dark sidebar from the Shopify admin */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Navigation {
1659
+ --p-color-text: #e3e3e3;
1660
+ --p-color-text-secondary: #b5b5b5;
1661
+ --p-color-text-disabled: #8a8a8a;
1662
+ --p-color-icon: #e3e3e3;
1663
+ --p-color-icon-hover: #fff;
1664
+ --p-color-icon-secondary: #b5b5b5;
1665
+ --p-color-icon-disabled: #8a8a8a;
1666
+ --p-color-bg-surface-secondary-hover: rgba(255, 255, 255, 0.06);
1667
+ --p-color-bg-surface-secondary-active: rgba(255, 255, 255, 0.11);
1668
+ --p-color-bg-surface-selected: rgba(255, 255, 255, 0.11);
1669
+ --p-color-bg-surface-tertiary: rgba(255, 255, 255, 0.06);
1670
+ --p-color-nav-bg-surface-selected: rgba(255, 255, 255, 0.11);
1671
+ background-color: #1a1a1a;
1672
+ color: var(--p-color-text);
1673
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Navigation .Polaris-Navigation__Item {
1674
+ border-radius: var(--p-border-radius-200);
574
1675
  }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Navigation .Polaris-Navigation__Item.Polaris-Navigation__Item--selected {
575
1676
  background-color: var(--p-color-nav-bg-surface-selected) !important;
576
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Navigation .Polaris-Navigation__Item:hover {
1677
+ color: #fff;
1678
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Navigation .Polaris-Navigation__Item.Polaris-Navigation__Item--selected .Polaris-Navigation__Text {
1679
+ color: #fff;
1680
+ font-weight: var(--p-font-weight-medium);
1681
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Navigation .Polaris-Navigation__Item.Polaris-Navigation__Item--selected svg {
1682
+ fill: #fff;
1683
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Navigation .Polaris-Navigation__Item:hover {
577
1684
  background-color: var(--p-color-bg-surface-tertiary);
578
- }.NavigationList {
579
- padding-top: var(--p-space-3);
580
- padding-bottom: var(--p-space-3);
581
- }.NavigationList ul {
1685
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Navigation .Polaris-Navigation__ItemInnerWrapper {
1686
+ border-radius: var(--p-border-radius-200);
1687
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Navigation .Polaris-Navigation__Icon svg {
1688
+ fill: var(--p-color-icon);
1689
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Navigation .Polaris-Navigation__SectionHeading .Polaris-Navigation__Text {
1690
+ color: var(--p-color-text-secondary);
1691
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Navigation .Polaris-Navigation__SecondaryAction svg,
1692
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Navigation .Polaris-Navigation__SectionHeading svg {
1693
+ fill: var(--p-color-icon-secondary);
1694
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Navigation .Polaris-Navigation__SecondaryAction:hover {
1695
+ background-color: var(--p-color-bg-surface-secondary-hover);
1696
+ }html[class~="Polaris-Summer-Editions-2023"] .NavigationList {
1697
+ padding: 0;
1698
+ }html[class~="Polaris-Summer-Editions-2023"] .NavigationList > .Polaris-LegacyCard__Surface { padding: var(--p-space-200); }html[class~="Polaris-Summer-Editions-2023"] .NavigationList ul {
582
1699
  margin: 0;
583
1700
  padding-inline-start: 0;
584
- }.NavigationList .Polaris-Navigation__Item {
585
- padding-bottom: var(--p-space-05);
586
- padding-top: var(--p-space-05);
587
- }.NavigationList .Polaris-Navigation__Item.Polaris-Navigation__Item--selected {
588
- background-color: var(--p-color-bg-surface-tertiary-hover);
589
- }.NavigationList .Polaris-Navigation__Item:hover {
590
- background-color: var(--p-color-bg-surface-tertiary);
591
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-OptionList-Option__Checkbox .Polaris-Checkbox__Icon > svg {
1701
+ list-style: none;
1702
+ }html[class~="Polaris-Summer-Editions-2023"] .NavigationList .Polaris-Navigation__ItemWrapper { padding: 0; }html[class~="Polaris-Summer-Editions-2023"] .NavigationList .Polaris-Navigation__ItemInnerWrapper {
1703
+ border-radius: var(--p-border-radius-control);
1704
+ background: transparent;
1705
+ }html[class~="Polaris-Summer-Editions-2023"] .NavigationList .Polaris-Navigation__ItemInnerWrapper:hover { background: var(--p-color-bg-surface-hover); }html[class~="Polaris-Summer-Editions-2023"] .NavigationList .Polaris-Navigation__ItemInnerWrapper:active { background: var(--p-color-bg-surface-active); }html[class~="Polaris-Summer-Editions-2023"] .NavigationList .Polaris-Navigation__ItemInnerWrapper.Polaris-Navigation__ItemInnerWrapper--selected {
1706
+ background: var(--p-color-bg-fill-secondary);
1707
+ }html[class~="Polaris-Summer-Editions-2023"] .NavigationList .Polaris-Navigation__ItemInnerWrapper.Polaris-Navigation__ItemInnerDisabled { background: transparent; }html[class~="Polaris-Summer-Editions-2023"] .NavigationList .Polaris-Navigation__Item {
1708
+ min-height: 2rem;
1709
+ align-items: center;
1710
+ gap: var(--p-space-200);
1711
+ padding: var(--p-space-150) var(--p-space-200);
1712
+ border-radius: var(--p-border-radius-control);
1713
+ background: transparent;
1714
+ color: var(--p-color-text);
1715
+ font-size: var(--p-font-size-325);
1716
+ line-height: var(--p-font-line-height-500);
1717
+ font-weight: var(--p-font-weight-regular);
1718
+ }html[class~="Polaris-Summer-Editions-2023"] .NavigationList .Polaris-Navigation__Item:hover,
1719
+ html[class~="Polaris-Summer-Editions-2023"] .NavigationList .Polaris-Navigation__Item:active,
1720
+ html[class~="Polaris-Summer-Editions-2023"] .NavigationList .Polaris-Navigation__Item:focus-visible { background: transparent; color: var(--p-color-text); }html[class~="Polaris-Summer-Editions-2023"] .NavigationList .Polaris-Navigation__Item:focus-visible {
1721
+ outline: var(--p-border-width-050) solid var(--p-color-border-focus);
1722
+ outline-offset: var(--p-space-025);
1723
+ }html[class~="Polaris-Summer-Editions-2023"] .NavigationList .Polaris-Navigation__Item::before,
1724
+ html[class~="Polaris-Summer-Editions-2023"] .NavigationList .Polaris-Navigation__Item::after { content: none; }html[class~="Polaris-Summer-Editions-2023"] .NavigationList .Polaris-Navigation__Item.Polaris-Navigation__Item--disabled { color: var(--p-color-text-disabled); }html[class~="Polaris-Summer-Editions-2023"] .NavigationList .Polaris-Navigation__Text {
1725
+ min-width: 0;
1726
+ margin: 0;
1727
+ font-size: inherit;
1728
+ font-weight: var(--p-font-weight-regular);
1729
+ line-height: inherit;
1730
+ overflow-wrap: anywhere;
1731
+ }html[class~="Polaris-Summer-Editions-2023"] .NavigationList .Polaris-Navigation__Item--selected .Polaris-Navigation__Text {
1732
+ font-weight: var(--p-font-weight-medium);
1733
+ }html[class~="Polaris-Summer-Editions-2023"] .NavigationList .Polaris-Navigation__Icon {
1734
+ margin: 0;
1735
+ flex: 0 0 var(--p-space-500);
1736
+ width: var(--p-space-500);
1737
+ height: var(--p-space-500);
1738
+ }html[class~="Polaris-Summer-Editions-2023"] .NavigationList .Polaris-Navigation__Icon svg { fill: var(--p-color-icon-secondary); }html[class~="Polaris-Summer-Editions-2023"] .NavigationList .Polaris-Navigation__Item--selected .Polaris-Navigation__Icon svg { fill: var(--p-color-icon); }html[class~="Polaris-Summer-Editions-2023"] .NavigationList .Polaris-Navigation__Item--disabled .Polaris-Navigation__Icon svg { fill: var(--p-color-icon-disabled); }html[class~="Polaris-Summer-Editions-2023"] .NavigationList .Polaris-Navigation__Badge {
1739
+ margin: 0 0 0 auto;
1740
+ flex-shrink: 0;
1741
+ align-self: center;
1742
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-OptionList-Option__Checkbox .Polaris-Checkbox__Icon > svg {
592
1743
  fill: var(--p-color-text-brand-on-bg-fill);
593
1744
  color: var(--p-color-text-brand-on-bg-fill);
594
1745
  }.Polaris-OptionList-Option__Layout {
@@ -597,66 +1748,193 @@
597
1748
  justify-content: space-between;
598
1749
  align-items: center;
599
1750
  }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header {
600
- font-weight: var(--p-font-weight-bold);
601
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header--smallTitle .Polaris-Header-Title {
602
- font-size: var(--p-font-size-300);
603
- line-height: var(--p-font-line-height-400);
604
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header--mediumTitle .Polaris-Header-Title {
605
- font-size: var(--p-font-size-400);
606
- line-height: var(--p-font-line-height-500);
607
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header--largeTitle .Polaris-Header-Title {
608
- font-size: var(--p-font-size-500);
609
- line-height: var(--p-font-line-height-600);
610
- }html[class~="Polaris-Summer-Editions-2023"] [aria-label='Pagination'] .Polaris-Button {
1751
+ font-weight: var(--p-font-weight-medium);
1752
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Header-Title {
1753
+ font-size: 1.625rem;
1754
+ font-weight: var(--p-font-weight-medium);
1755
+ line-height: var(--p-font-line-height-800);
1756
+ letter-spacing: -0.02em;
1757
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header--smallTitle .Polaris-Header-Title,
1758
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header--longTitle .Polaris-Header-Title {
1759
+ font-size: 1.375rem;
1760
+ line-height: var(--p-font-line-height-700);
1761
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Header-Title__SubTitle {
1762
+ color: var(--p-color-text-secondary);
1763
+ }/* Keeps the header the same height with or without a title badge. */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Header-Title__TitleWithMetadataWrapper {
1764
+ padding-block: 0;
1765
+ }/* Centers the 28px back button on the 32px title line. It can't center in the
1766
+ row, which a subtitle makes taller. Phones put the button on its own row. */@media (min-width: 30.625em) {
1767
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header--mediumTitle .Polaris-Page-Header__BreadcrumbWrapper {
1768
+ margin-top: var(--p-space-050);
1769
+ }
1770
+ }/* Back button */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header__BreadcrumbWrapper :is(a, button) {
1771
+ border-radius: var(--p-border-radius-full);
1772
+ background-color: var(--p-color-bg-surface);
1773
+ box-shadow: var(--p-shadow-page-button) !important;
1774
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header__BreadcrumbWrapper :is(a, button):is(:hover, :focus-visible) {
1775
+ background-color: var(--p-color-bg-surface-hover);
1776
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header__BreadcrumbWrapper :is(a, button):active {
1777
+ background-color: var(--p-color-bg-surface-active);
1778
+ box-shadow: var(--p-shadow-page-button) !important;
1779
+ }/* Style header buttons and popover activators without affecting menu items. */html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionMenu-SecondaryAction > .Polaris-Button,
1780
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionMenu-SecondaryAction > [data-controller~='polaris-popover'] > [data-polaris-popover-target='activator'] > .Polaris-Button {
1781
+ border-radius: var(--p-border-radius-full) !important;
1782
+ background-color: var(--p-color-bg-surface) !important;
1783
+ box-shadow: var(--p-shadow-page-button) !important;
1784
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionMenu-SecondaryAction > .Polaris-Button:not(.Polaris-Button--disabled):is(:hover, :focus), html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionMenu-SecondaryAction > [data-controller~='polaris-popover'] > [data-polaris-popover-target='activator'] > .Polaris-Button:not(.Polaris-Button--disabled):is(:hover, :focus) {
1785
+ background-color: var(--p-color-bg-surface-hover) !important;
1786
+ box-shadow: var(--p-shadow-page-button) !important;
1787
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionMenu-SecondaryAction > .Polaris-Button:not(.Polaris-Button--disabled):active, html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionMenu-SecondaryAction > [data-controller~='polaris-popover'] > [data-polaris-popover-target='activator'] > .Polaris-Button:not(.Polaris-Button--disabled):active {
1788
+ background-color: var(--p-color-bg-surface-active) !important;
1789
+ box-shadow: var(--p-shadow-page-button) !important;
1790
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionMenu-SecondaryAction > .Polaris-Button.Polaris-Button--disabled, html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionMenu-SecondaryAction > [data-controller~='polaris-popover'] > [data-polaris-popover-target='activator'] > .Polaris-Button.Polaris-Button--disabled {
1791
+ color: var(--p-color-text-disabled);
1792
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionMenu-SecondaryAction > .Polaris-Button.Polaris-Button--disabled svg, html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionMenu-SecondaryAction > [data-controller~='polaris-popover'] > [data-polaris-popover-target='activator'] > .Polaris-Button.Polaris-Button--disabled svg { fill: var(--p-color-icon-disabled); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionMenu-SecondaryAction--destructive > .Polaris-Button:not(.Polaris-Button--disabled) {
1793
+ color: #7e100c !important;
1794
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionMenu-SecondaryAction--destructive > .Polaris-Button:not(.Polaris-Button--disabled) svg {
1795
+ fill: currentColor;
1796
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionMenu-RollupActions__RollupActivator > [data-controller~='polaris-popover'] > [data-polaris-popover-target='activator'] > .Polaris-Button {
1797
+ border-radius: var(--p-border-radius-full);
1798
+ background: var(--p-color-bg-surface);
1799
+ box-shadow: var(--p-shadow-page-button);
1800
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionMenu-RollupActions__RollupActivator > [data-controller~='polaris-popover'] > [data-polaris-popover-target='activator'] > .Polaris-Button:hover,
1801
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionMenu-RollupActions__RollupActivator > [data-controller~='polaris-popover'] > [data-polaris-popover-target='activator'] > .Polaris-Button:focus:not(:active) {
1802
+ background: var(--p-color-bg-surface-hover);
1803
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionMenu-RollupActions__RollupActivator > [data-controller~='polaris-popover'] > [data-polaris-popover-target='activator'] > .Polaris-Button:active {
1804
+ background: var(--p-color-bg-surface-active);
1805
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header__PaginationWrapper .Polaris-ButtonGroup {
1806
+ flex-wrap: nowrap;
1807
+ margin: 0;
1808
+ gap: var(--p-space-100);
1809
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header__PaginationWrapper .Polaris-ButtonGroup .Polaris-ButtonGroup__Item {
1810
+ margin: 0;
1811
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header__PaginationWrapper .Polaris-ButtonGroup .Polaris-Button,
1812
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header__PaginationWrapper .Polaris-ButtonGroup .Polaris-Button::before,
1813
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header__PaginationWrapper .Polaris-ButtonGroup .Polaris-Button::after {
1814
+ border-radius: var(--p-border-radius-full) !important;
1815
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header__PaginationWrapper .Polaris-ButtonGroup .Polaris-Button,
1816
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header__PaginationWrapper .Polaris-ButtonGroup .Polaris-Button--disabled {
1817
+ --pc-button-bg: var(--p-color-bg-surface);
1818
+ --pc-button-bg-hover: var(--p-color-bg-surface-hover);
1819
+ --pc-button-bg-active: var(--p-color-bg-surface-active);
1820
+ --pc-button-shadow: var(--p-shadow-page-button);
1821
+ background: var(--pc-button-bg) !important;
1822
+ box-shadow: var(--pc-button-shadow) !important;
1823
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header__PaginationWrapper .Polaris-ButtonGroup .Polaris-Button:not(.Polaris-Button--disabled):hover {
1824
+ background: var(--pc-button-bg-hover) !important;
1825
+ }html[class~="Polaris-Summer-Editions-2023"] [aria-label='Pagination'] .Polaris-Button {
611
1826
  border: none !important;
612
1827
  box-shadow: none;
613
1828
  }html[class~="Polaris-Summer-Editions-2023"] [aria-label='Pagination'] .Polaris-Button:not([disabled]) {
614
- background-color: var(--p-color-bg-fill-tertiary);
1829
+ background-color: var(--p-color-bg-fill-secondary);
615
1830
  }html[class~="Polaris-Summer-Editions-2023"] [aria-label='Pagination'] .Polaris-Button:not([disabled]):hover {
616
- background-color: var(--p-color-bg-fill-tertiary-hover);
617
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Popover .Polaris-Popover__Content .Polaris-Popover__Pane:first-child > .Polaris-Popover__Section > .Polaris-Box {
1831
+ background-color: var(--p-color-bg-fill-secondary-hover);
1832
+ }html[class~="Polaris-Summer-Editions-2023"] [aria-label='Pagination'] .Polaris-Button:not([disabled]):active {
1833
+ background-color: var(--p-color-bg-fill-secondary-active);
1834
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Popover {
1835
+ border: none;
1836
+ border-radius: var(--p-border-radius-popover);
1837
+ box-shadow: var(--p-shadow-popover);
1838
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Popover::before {
1839
+ content: none;
1840
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Popover .Polaris-Popover__ContentContainer,
1841
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Popover .Polaris-Popover__Content {
1842
+ border-radius: var(--p-border-radius-popover);
1843
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Popover .Polaris-Popover__Content .Polaris-Popover__Pane:first-child > .Polaris-Popover__Section > .Polaris-Box {
618
1844
  padding: var(--p-space-300) var(--p-space-400) var(--p-space-100);
619
1845
  }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Popover .Polaris-Popover__Content .Polaris-Popover__Pane:last-child > .Polaris-Popover__Section > .Polaris-Box {
620
1846
  padding: var(--p-space-300) var(--p-space-300);
1847
+ }/* Resource-list composition: compact rows within the enclosing section surface. */html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard__Surface > .Polaris-ResourceList__ResourceListWrapper {
1848
+ border-radius: inherit;
1849
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceList__ResourceListWrapper > .Polaris-ResourceList:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceList__ResourceListWrapper > .Polaris-ResourceList:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceList > .Polaris-ResourceItem__ListItem:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceList > .Polaris-ResourceItem__ListItem:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceItem__ItemWrapper,
1850
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceItem { border-radius: inherit; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceItem:hover { background: var(--p-color-bg-surface-hover); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceItem:active { background: var(--p-color-bg-surface-active); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceItem--selected { background: var(--p-color-bg-surface-selected); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceItem--selected:hover,
1851
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceItem--selected:active { background: var(--p-color-bg-surface-secondary-selected); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceItem h3,
1852
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceItem h3 .Polaris-Text--semibold {
1853
+ font-size: 0.8125rem;
1854
+ line-height: 1.25rem;
1855
+ font-weight: var(--p-font-weight-medium);
1856
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceItem__Container {
1857
+ min-width: 0;
1858
+ overflow-wrap: anywhere;
1859
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceItem__ListItem:has(.Polaris-ResourceItem__Link:focus-visible)::after {
1860
+ z-index: 3;
1861
+ border-radius: inherit;
1862
+ box-shadow: inset 0 0 0 2px var(--p-color-border-focus);
1863
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceList__FiltersWrapper { padding: var(--p-space-400); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceList__HeaderOuterWrapper { border-radius: inherit; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceList__HeaderWrapper {
1864
+ min-height: 3rem;
1865
+ padding: var(--p-space-200) var(--p-space-400);
1866
+ border-radius: inherit;
1867
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceList__HeaderContentWrapper {
1868
+ position: static;
1869
+ min-width: 0;
1870
+ min-height: 2rem;
1871
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceList__HeaderTitleWrapper { white-space: normal; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceItem__Actions {
1872
+ display: flex;
1873
+ align-items: center;
1874
+ opacity: 0;
1875
+ pointer-events: none;
1876
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceItem__Actions > * { clip: auto; overflow: visible; }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceItem:hover .Polaris-ResourceItem__Actions,
1877
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceItem:focus-within .Polaris-ResourceItem__Actions,
1878
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceItem--persistActions .Polaris-ResourceItem__Actions {
1879
+ opacity: 1;
1880
+ pointer-events: auto;
1881
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceItem__Disclosure {
1882
+ display: none;
1883
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceItem__Disclosure .Polaris-Button--iconOnly {
1884
+ width: 1.75rem;
1885
+ height: 1.75rem;
1886
+ padding: var(--p-space-100);
1887
+ }@media (max-width: 46.5em), (hover: none) {
1888
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceItem__Actions { display: none; }
1889
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-ResourceItem__Disclosure { display: flex; align-items: center; }
1890
+ }@media (min-width: 48.0625em) and (max-width: 61.5em) {
1891
+ html[class~="Polaris-Summer-Editions-2023"] [data-has-navigation] .Polaris-ResourceItem__Actions { display: none; }
1892
+ html[class~="Polaris-Summer-Editions-2023"] [data-has-navigation] .Polaris-ResourceItem__Disclosure { display: flex; align-items: center; }
621
1893
  }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Frame-ContextualSaveBar .Polaris-Frame-ContextualSaveBar__ActionContainer .Polaris-Button {
622
- --pc-color-text: var(--p-color-text-inverse);
623
- --pc-button-text: var(--p-color-text-inverse);
624
- --pc-button-color: var(--p-color-bg-fill-inverse);
625
- --pc-button-color-hover: var(--p-color-bg-fill-inverse-hover);
626
- --pc-button-color-active: var(--p-color-bg-fill-inverse-active);
627
- --pc-button-color-depressed: var(--p-color-bg-fill-inverse-hover);
628
- --pc-button-color-disabled: var(--pc-button-bg);
629
- background: var(--p-color-bg-fill-inverse);
1894
+ --pc-button-bg: rgba(255, 255, 255, 0.12);
1895
+ --pc-button-bg-hover: rgba(255, 255, 255, 0.18);
1896
+ --pc-button-bg-active: rgba(255, 255, 255, 0.24);
1897
+ --pc-button-fg: #fff;
1898
+ --pc-button-fg-hover: #fff;
1899
+ --pc-button-icon: #fff;
1900
+ --pc-button-shadow: none;
1901
+ background: var(--pc-button-bg);
630
1902
  box-shadow: none;
631
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Frame-ContextualSaveBar .Polaris-Frame-ContextualSaveBar__ActionContainer .Polaris-Button:hover {
632
- background: var(--p-color-bg-fill-inverse-hover);
633
- color: var(--p-color-text-inverse);
1903
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Frame-ContextualSaveBar .Polaris-Frame-ContextualSaveBar__ActionContainer .Polaris-Button::before,
1904
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Frame-ContextualSaveBar .Polaris-Frame-ContextualSaveBar__ActionContainer .Polaris-Button::after {
1905
+ box-shadow: none;
1906
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Frame-ContextualSaveBar .Polaris-Frame-ContextualSaveBar__ActionContainer .Polaris-Button:hover {
1907
+ background: var(--pc-button-bg-hover);
1908
+ color: var(--pc-button-fg-hover);
634
1909
  box-shadow: none;
635
1910
  }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Frame-ContextualSaveBar .Polaris-Frame-ContextualSaveBar__ActionContainer .Polaris-Button.Polaris-Button--primary {
636
- --pc-button-color-hover: var(--p-color-bg-fill-hover);
637
- --pc-button-color-active: var(--p-color-bg-fill-active);
638
- --pc-button-color-depressed: var(--p-color-bg-fill-hover);
639
- --pc-button-color-disabled: var(--pc-button-bg);
640
- color: #303030;
641
- background: var(--p-color-bg-fill);
642
- box-shadow: 0 0.0625rem 0 0 hsla(0, 0%, 100%, .48) inset, -0.0625rem 0 0 0 hsla(0, 0%, 100%, .2) inset, 0.0625rem 0 0 0 hsla(0, 0%, 100%, .2) inset, 0 -0.09375rem 0 0 rgba(0, 0, 0, .25) inset;
1911
+ --pc-button-bg: #fff;
1912
+ --pc-button-bg-hover: #f2f2f2;
1913
+ --pc-button-bg-active: #ebebeb;
1914
+ --pc-button-fg: #101010;
1915
+ --pc-button-fg-hover: #101010;
1916
+ --pc-button-icon: #101010;
1917
+ background: var(--pc-button-bg);
1918
+ color: var(--pc-button-fg);
643
1919
  }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Frame-ContextualSaveBar .Polaris-Frame-ContextualSaveBar__ActionContainer .Polaris-Button.Polaris-Button--primary:hover {
644
- background: var(--p-color-bg-fill-hover);
645
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Frame-ContextualSaveBar .Polaris-Frame-ContextualSaveBar__ActionContainer .Polaris-Button.Polaris-Button--primary:before,
646
- html[class~="Polaris-Summer-Editions-2023"] .Polaris-Frame-ContextualSaveBar .Polaris-Frame-ContextualSaveBar__ActionContainer .Polaris-Button.Polaris-Button--primary:after {
647
- box-shadow: none;
1920
+ background: var(--pc-button-bg-hover);
648
1921
  }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Frame-ContextualSaveBar .Polaris-Frame-ContextualSaveBar__ActionContainer .Polaris-Button.Polaris-Button--primary.Polaris-Button--disabled {
649
- background: #616161;
650
- color: #303030;
1922
+ background: rgba(255, 255, 255, 0.24);
1923
+ color: rgba(255, 255, 255, 0.5);
651
1924
  box-shadow: none;
652
1925
  -webkit-user-select: none;
653
1926
  -moz-user-select: none;
654
1927
  user-select: none;
655
1928
  pointer-events: none;
656
- }.shp-Navigation {
1929
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Frame-Toast {
1930
+ border-radius: var(--p-border-radius-300);
1931
+ box-shadow: var(--p-shadow-toast, var(--p-shadow-lg));
1932
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Frame-Toast::before {
1933
+ content: none;
1934
+ }.shp-Navigation {
657
1935
  margin: 0 auto;
658
1936
  padding: 0 20px;
659
- border-bottom: 1px solid var(--p-color-border);
1937
+ border-bottom: 1px solid var(--p-color-border-secondary);
660
1938
  }@media (max-width: 48.0625em) and (min-width: 30.625em), (min-width: 45.625em) {
661
1939
  .shp-Navigation {
662
1940
  padding: 0 20px;
@@ -679,8 +1957,9 @@
679
1957
  }
680
1958
  }.shp-Navigation_Items {
681
1959
  display: flex;
1960
+ gap: 4px;
682
1961
  margin: 0;
683
- padding: 0 2px;
1962
+ padding: 8px 2px;
684
1963
  list-style: none
685
1964
  }.shp-Navigation_Item {
686
1965
  display: flex;
@@ -706,9 +1985,7 @@
706
1985
  justify-content: center;
707
1986
  width: 100%;
708
1987
  min-width: 100%;
709
- margin-top: 1px;
710
- margin-bottom: -1px;
711
- padding: 0 16px;
1988
+ padding: 0;
712
1989
  outline: none;
713
1990
  text-align: center;
714
1991
  white-space: nowrap;
@@ -718,6 +1995,9 @@
718
1995
  color: inherit;
719
1996
  }.shp-Navigation_Link:focus {
720
1997
  outline: none;
1998
+ }.shp-Navigation_Link:focus-visible .shp-Navigation_LinkText {
1999
+ outline: var(--p-border-width-050) solid var(--p-color-border-focus);
2000
+ outline-offset: var(--p-space-025);
721
2001
  }@media (min-width: 40em) {
722
2002
  .shp-Navigation_Link {
723
2003
  font-size: 14px;
@@ -725,25 +2005,26 @@
725
2005
  }.shp-Navigation_Link:hover {
726
2006
  text-decoration: none;
727
2007
  }.shp-Navigation_Link:hover .shp-Navigation_LinkText {
728
- font-weight: 400;
729
2008
  color: var(--p-color-text);
730
2009
  text-decoration: none;
731
- border-bottom: 3px solid var(--p-color-bg-fill-tertiary-hover);
2010
+ background-color: rgba(0, 0, 0, 0.05);
732
2011
  }.shp-Navigation_Link:focus .shp-Navigation_LinkText {
733
- font-weight: 400;
734
2012
  color: var(--p-color-text);
735
- }.shp-Navigation_LinkText {
736
- padding: 16px 0 13px 0;
737
- border-bottom: 3px solid transparent;
738
2013
  }.shp-Navigation_LinkText {
739
2014
  display: block;
740
- }[aria-selected='true'],
2015
+ padding: 6px 12px;
2016
+ border-radius: 9999px;
2017
+ font-size: 13px;
2018
+ font-weight: 500;
2019
+ line-height: 20px;
2020
+ letter-spacing: -0.01em;
2021
+ }.shp-Navigation_Link[aria-selected='true'],
741
2022
  .shp-Navigation_Link:focus .shp-Navigation_LinkText {
742
- font-weight: 400;
743
2023
  color: var(--p-color-text);
744
- }[aria-selected='true'] .shp-Navigation_LinkText {
745
- color: var(--p-color-text-primary);
746
- border-bottom: 3px solid var(--p-color-bg-primary);
2024
+ }[aria-selected='true'] .shp-Navigation_LinkText,
2025
+ [aria-selected='true']:hover .shp-Navigation_LinkText {
2026
+ color: var(--p-color-text);
2027
+ background-color: var(--p-color-bg-fill-transparent-hover);
747
2028
  }/* Vertical */.Polaris-Spacer--verticalSpacingExtraTight {
748
2029
  height: 4px;
749
2030
  }.Polaris-Spacer--verticalSpacingTight {
@@ -772,11 +2053,219 @@
772
2053
  margin-bottom: var(--p-space-200);
773
2054
  }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyTabs__Wrapper:has(+.Polaris-IndexTable) {
774
2055
  margin-bottom: 0 !important;
2056
+ }/* Legacy tabs are displayed as pills */html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyTabs {
2057
+ gap: var(--p-space-050);
2058
+
2059
+ /* Tabs that don't fit scroll in one row instead of wrapping. The inline padding keeps focus rings visible. */
2060
+ flex-wrap: nowrap;
2061
+ overflow-x: auto;
2062
+ scrollbar-width: thin;
2063
+ padding-inline: var(--p-space-050);
2064
+ margin-inline: calc(var(--p-space-050) * -1);
2065
+ }/* Even 6px around the pills, like the index tabs in the admin. */html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyTabs .Polaris-LegacyTabs__Tab {
2066
+ margin: 0;
2067
+ padding: var(--p-space-150) 0;
2068
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyTabs .Polaris-LegacyTabs__Title {
2069
+ min-height: 1.75rem;
2070
+ padding: var(--p-space-150) var(--p-space-300);
2071
+ border-radius: var(--p-border-radius-full);
2072
+ color: var(--p-color-text);
2073
+ font-size: var(--p-font-size-300);
2074
+ font-weight: var(--p-font-weight-medium);
2075
+ line-height: var(--p-font-line-height-400);
2076
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyTabs .Polaris-LegacyTabs__Title::before {
2077
+ content: none;
2078
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyTabs .Polaris-LegacyTabs__Tab:hover .Polaris-LegacyTabs__Title,
2079
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyTabs .Polaris-LegacyTabs__Tab:focus-visible .Polaris-LegacyTabs__Title {
2080
+ background-color: rgba(0, 0, 0, 0.05);
2081
+ color: var(--p-color-text);
2082
+ font-weight: var(--p-font-weight-medium);
2083
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyTabs .Polaris-LegacyTabs__Tab--selected .Polaris-LegacyTabs__Title,
2084
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyTabs .Polaris-LegacyTabs__Tab--selected:hover .Polaris-LegacyTabs__Title {
2085
+ background-color: var(--p-color-bg-fill-transparent-hover);
2086
+ color: var(--p-color-text);
2087
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyTabs .Polaris-LegacyTabs__Tab:active .Polaris-LegacyTabs__Title {
2088
+ background-color: var(--p-color-bg-fill-transparent-active);
2089
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Tabs__Wrapper .Polaris-Tabs__Tab {
2090
+ border-radius: var(--p-border-radius-full);
2091
+ color: var(--p-color-text);
2092
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Tabs__Wrapper .Polaris-Tabs__Tab::after {
2093
+ border-radius: var(--p-border-radius-full);
2094
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Tabs__Wrapper .Polaris-Tabs__Tab:not([aria-disabled='true']):hover {
2095
+ background-color: rgba(0, 0, 0, 0.05);
2096
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Tabs__Wrapper .Polaris-Tabs__Tab--active,
2097
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Tabs__Wrapper .Polaris-Tabs__Tab--active:not([aria-disabled='true']):hover {
2098
+ background-color: var(--p-color-bg-fill-transparent-hover);
2099
+ color: var(--p-color-text);
2100
+ border-radius: var(--p-border-radius-full);
775
2101
  }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Tabs__Wrapper .Polaris-Tabs__Tab:active, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Tabs__Wrapper .Polaris-Tabs__Tab:focus {
776
2102
  background-color: var(--p-color-bg-fill-transparent-hover);
777
2103
  color: var(--p-color-text-brand);
778
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField input[type="date"], html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField input[type="time"] {
2104
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Tag {
2105
+ min-height: 1.25rem;
2106
+ padding: var(--p-space-025) var(--p-space-200);
2107
+ border-radius: var(--p-border-radius-tag);
2108
+ background-color: var(--p-color-bg-fill-transparent);
2109
+ color: var(--p-color-text-secondary);
2110
+ font-size: var(--p-font-size-300);
2111
+ font-weight: var(--p-font-weight-medium);
2112
+ line-height: 1.125rem;
2113
+ letter-spacing: -0.005em;
2114
+ }/* The remove button fills the height, so it replaces the vertical padding. */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Tag.Polaris-Tag--removable {
2115
+ padding-block: 0;
2116
+ padding-right: var(--p-space-050);
2117
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Tag.Polaris-Tag--clickable:hover, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Tag.Polaris-Tag--linkable:hover {
2118
+ background: var(--p-color-bg-fill-transparent-hover);
2119
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Tag.Polaris-Tag--clickable:active, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Tag.Polaris-Tag--linkable:active {
2120
+ background: var(--p-color-bg-fill-transparent-active);
2121
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Tag.Polaris-Tag--disabled {
2122
+ background: var(--p-color-bg-fill-disabled);
2123
+ color: var(--p-color-text-disabled);
2124
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Tag .Polaris-Tag__Button {
2125
+ border-radius: var(--p-border-radius-full);
2126
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Tag .Polaris-Tag__Button svg {
2127
+ fill: var(--p-color-icon-secondary);
2128
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Tag .Polaris-Tag__Button:hover {
2129
+ background: var(--p-color-bg-fill-transparent-hover);
2130
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField input[type="date"], html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField input[type="time"] {
779
2131
  display: block;
2132
+ }/* Labels and help text */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Label__Text,
2133
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-ChoiceList__Title,
2134
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-VerticalStack--fieldsetReset > legend,
2135
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Labelled__LabelWrapper .Polaris-Label {
2136
+ font-weight: var(--p-font-weight-medium);
2137
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Labelled__LabelWrapper {
2138
+ margin-bottom: var(--p-space-150);
2139
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Labelled__HelpText {
2140
+ margin-top: var(--p-space-150);
2141
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Labelled__HelpText,
2142
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Choice__HelpText {
2143
+ color: var(--p-color-text-secondary);
2144
+ font-size: var(--p-font-size-300);
2145
+ line-height: 1.125rem;
2146
+ letter-spacing: -0.005em;
2147
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Labelled__HelpText .Polaris-Text--root, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Choice__HelpText .Polaris-Text--root {
2148
+ font-size: inherit;
2149
+ line-height: inherit;
2150
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-InlineError {
2151
+ color: var(--p-color-text-critical);
2152
+ font-size: var(--p-font-size-300);
2153
+ line-height: 1.125rem;
2154
+ letter-spacing: -0.005em;
2155
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-InlineError .Polaris-Text--root {
2156
+ font-size: inherit;
2157
+ line-height: inherit;
2158
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-InlineError__Icon {
2159
+ fill: var(--p-color-text-critical);
2160
+ }/* Text field */html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField__Backdrop {
2161
+ border: none;
2162
+ border-radius: var(--p-border-radius-control);
2163
+ background-color: var(--p-color-input-bg-surface);
2164
+ box-shadow: var(--p-shadow-input);
2165
+ transition: box-shadow var(--p-motion-duration-150) var(--p-motion-ease);
2166
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField__Backdrop::after {
2167
+ content: none;
2168
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField__Input {
2169
+ min-height: 1.875rem;
2170
+ padding-top: 0.3125rem;
2171
+ padding-bottom: 0.3125rem;
2172
+ font-size: var(--p-font-size-325);
2173
+ line-height: var(--p-font-line-height-500);
2174
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField__Input::placeholder {
2175
+ color: var(--p-color-text-secondary);
2176
+ }/* Hover applies to the whole control, including prefixes and suffixes. */@media (min-width: 48rem), (pointer: fine) {
2177
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField:not(.Polaris-TextField--disabled, .Polaris-TextField--readOnly):hover > .Polaris-TextField__Backdrop, html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField:not(.Polaris-TextField--disabled):not(.Polaris-TextField--error):not(.Polaris-TextField--readOnly) > .Polaris-TextField__Input:hover:not(:focus-visible) ~ .Polaris-TextField__Backdrop {
2178
+ background-color: var(--p-color-bg-surface-hover);
2179
+ border: none;
2180
+ box-shadow: var(--p-shadow-input);
2181
+ }
2182
+
2183
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField--error:not(.Polaris-TextField--disabled, .Polaris-TextField--readOnly):hover > .Polaris-TextField__Backdrop, html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField--error .Polaris-TextField__Input:hover ~ .Polaris-TextField__Backdrop {
2184
+ background-color: var(--p-color-bg-surface-hover);
2185
+ box-shadow: var(--p-shadow-input-critical);
2186
+ }
2187
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField:not(.Polaris-TextField--disabled, .Polaris-TextField--readOnly):is(.Polaris-TextField--focus, :focus-within) > .Polaris-TextField__Backdrop {
2188
+ border: none;
2189
+ outline: none;
2190
+ background-color: var(--p-color-input-bg-surface-active);
2191
+ box-shadow: var(--p-shadow-input-focus);
2192
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField--error > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop {
2193
+ border: none;
2194
+ background-color: var(--p-color-input-bg-surface);
2195
+ box-shadow: var(--p-shadow-input-critical);
2196
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField--multiline > .Polaris-TextField__Input {
2197
+ padding-top: var(--p-space-150);
2198
+ padding-bottom: var(--p-space-150);
2199
+ }/* Labels of disabled fields are dimmed along with the field. */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Labelled__LabelWrapper:has(
2200
+ + .Polaris-Connected > .Polaris-Connected__Item--primary > .Polaris-TextField--disabled,
2201
+ + .Polaris-Select--disabled
2202
+ ) .Polaris-Label__Text {
2203
+ color: var(--p-color-text-disabled);
2204
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField--error:not(.Polaris-TextField--disabled, .Polaris-TextField--readOnly):is(.Polaris-TextField--focus, :focus-within) > .Polaris-TextField__Backdrop {
2205
+ background-color: var(--p-color-input-bg-surface-active);
2206
+ box-shadow: var(--p-shadow-input-critical-focus);
2207
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField--disabled > .Polaris-TextField__Backdrop {
2208
+ background-color: var(--p-color-input-bg-surface);
2209
+ box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
2210
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField--readOnly > .Polaris-TextField__Backdrop {
2211
+ background-color: var(--p-color-bg-surface-disabled);
2212
+ box-shadow: none;
2213
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField--readOnly .Polaris-TextField__Input {
2214
+ color: var(--p-color-text-secondary);
2215
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField--readOnly > .Polaris-TextField__Input:focus-visible ~ .Polaris-TextField__Backdrop {
2216
+ border: none;
2217
+ outline: none;
2218
+ box-shadow: var(--p-shadow-input-focus);
2219
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField__Prefix,
2220
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField__Suffix {
2221
+ color: var(--p-color-text-secondary);
2222
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField__Prefix {
2223
+ margin-right: var(--p-space-100);
2224
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField__Suffix {
2225
+ margin-left: var(--p-space-100);
2226
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField--disabled .Polaris-TextField__Input::placeholder,
2227
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField--disabled .Polaris-TextField__Prefix,
2228
+ html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField--disabled .Polaris-TextField__Suffix {
2229
+ color: var(--p-color-text-disabled);
2230
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField__Spinner {
2231
+ margin: var(--p-space-100);
2232
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField__Segment {
2233
+ border-radius: var(--p-border-radius-150);
2234
+ }/* Select */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Select__Backdrop {
2235
+ border: none;
2236
+ border-radius: var(--p-border-radius-control);
2237
+ background-color: var(--p-color-input-bg-surface);
2238
+ box-shadow: var(--p-shadow-input);
2239
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Select__Backdrop::after {
2240
+ content: none;
2241
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Select__Content {
2242
+ min-height: 1.875rem;
2243
+ padding: 0.3125rem var(--p-space-200) 0.3125rem var(--p-space-300);
2244
+ font-size: var(--p-font-size-325);
2245
+ line-height: var(--p-font-line-height-500);
2246
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Select__Icon svg {
2247
+ fill: #707070;
2248
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Select:not(.Polaris-Select--disabled):not(.Polaris-Select--error):hover .Polaris-Select__Backdrop {
2249
+ border: none;
2250
+ background-color: var(--p-color-input-bg-surface-hover);
2251
+ box-shadow: var(--p-shadow-input);
2252
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Select:not(.Polaris-Select--disabled):not(.Polaris-Select--error):focus-within .Polaris-Select__Backdrop {
2253
+ border: none;
2254
+ outline: none;
2255
+ background-color: var(--p-color-input-bg-surface-active);
2256
+ box-shadow: var(--p-shadow-input-focus);
2257
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Select--error .Polaris-Select__Backdrop {
2258
+ border: none;
2259
+ background-color: var(--p-color-input-bg-surface);
2260
+ box-shadow: var(--p-shadow-input-critical);
2261
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Select--error:not(.Polaris-Select--disabled):hover .Polaris-Select__Backdrop {
2262
+ background-color: var(--p-color-input-bg-surface-hover);
2263
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Select--error:not(.Polaris-Select--disabled):focus-within .Polaris-Select__Backdrop {
2264
+ background-color: var(--p-color-input-bg-surface-active);
2265
+ box-shadow: var(--p-shadow-input-critical-focus);
2266
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Select--disabled .Polaris-Select__Backdrop {
2267
+ background-color: var(--p-color-input-bg-surface);
2268
+ box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
780
2269
  }.Polaris-Tooltip {
781
2270
  width: max-content;
782
2271
  position: absolute;
@@ -784,16 +2273,18 @@
784
2273
  left: 0;
785
2274
  z-index: var(--p-z-index-2);
786
2275
  opacity: 1;
787
- filter: drop-shadow(rgba(0, 0, 0, 0.3) 0 2px 5px);
788
- border-radius: var(--p-border-radius-2);
2276
+ filter: drop-shadow(rgba(0, 0, 0, 0.12) 0 2px 6px);
2277
+ border-radius: var(--p-border-radius-200);
789
2278
  pointer-events: none;
790
2279
  -webkit-backface-visibility: hidden;
791
2280
  backface-visibility: hidden;
792
2281
  will-change: opacity, left, top;
793
2282
  transition: opacity 200ms cubic-bezier(0.36, 0, 1, 1) 100ms;
794
2283
  }.Polaris-Tooltip-TooltipOverlay__Content {
795
- border-radius: var(--p-border-radius-2);
796
- padding: var(--p-space-1) var(--p-space-2);
2284
+ border-radius: var(--p-border-radius-200);
2285
+ padding: var(--p-space-100) var(--p-space-200);
2286
+ font-size: var(--p-font-size-300);
2287
+ line-height: var(--p-font-line-height-400);
797
2288
  }.Polaris-Tooltip-Arrow,.Polaris-Tooltip-Arrow::before {
798
2289
  position: absolute;
799
2290
  width: 8px;
@@ -802,5 +2293,5 @@
802
2293
  }.Polaris-Tooltip-Arrow::before {
803
2294
  content: '';
804
2295
  transform: rotate(45deg);
805
- background-color: var(--p-color-bg);
2296
+ background-color: var(--p-color-bg-surface);
806
2297
  }