polaris_view_components 3.2.0 → 4.0.0

data/app/assets/stylesheets/polaris_view_components/media.pcss

@@ -0,0 +1,126 @@
+/* Avatar */
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-Avatar {
+  &.Polaris-Avatar--sizeExtraSmall {
+    border-radius: 0.375rem;
+  }
+
+  &.Polaris-Avatar--sizeSmall {
+    border-radius: 0.5rem;
+  }
+
+  &.Polaris-Avatar--sizeMedium {
+    border-radius: 0.5rem;
+  }
+
+  &.Polaris-Avatar--sizeLarge {
+    border-radius: 0.625rem;
+  }
+
+  &.Polaris-Avatar--shapeRound {
+    border-radius: var(--p-border-radius-full);
+  }
+
+  .Polaris-Avatar__Text {
+    font-weight: var(--p-font-weight-medium);
+  }
+
+  .Polaris-Avatar__Svg text {
+    font-size: 1rem;
+  }
+}
+
+/* Thumbnail */
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-Thumbnail {
+  &,
+  &::after {
+    border-radius: var(--p-border-radius-300);
+  }
+
+  &.Polaris-Thumbnail--sizeExtraSmall,
+  &.Polaris-Thumbnail--sizeExtraSmall::after {
+    border-radius: var(--p-border-radius-150);
+  }
+
+  &.Polaris-Thumbnail--sizeSmall,
+  &.Polaris-Thumbnail--sizeSmall::after {
+    border-radius: 0.625rem;
+  }
+}
+
+/* Progress bar */
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-ProgressBar {
+  --pc-progress-bar-background: var(--p-color-bg-surface-tertiary);
+  border-radius: var(--p-border-radius-full);
+
+  &.Polaris-ProgressBar--colorPrimary {
+    --pc-progress-bar-indicator: var(--p-color-bg-fill-brand);
+  }
+
+  .Polaris-ProgressBar__Indicator {
+    border-radius: var(--p-border-radius-full);
+    width: clamp(0%, calc(var(--pc-progress-bar-percent) * 100%), 100%);
+    transform: none;
+    transition: width var(--pc-progress-bar-duration) var(--p-motion-ease);
+  }
+
+  &.Polaris-ProgressBar--sizeSmall {
+    height: 0.25rem;
+  }
+
+  &.Polaris-ProgressBar--sizeMedium {
+    height: 0.375rem;
+  }
+
+  &.Polaris-ProgressBar--sizeLarge {
+    height: 0.5rem;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .Polaris-ProgressBar__Indicator { transition: none; }
+  }
+}
+
+/* Spinner: the web-component ring has a subdued track and a 40% foreground arc. */
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-Spinner {
+  display: inline-flex;
+  flex-shrink: 0;
+  vertical-align: middle;
+  opacity: 1;
+  transition: opacity 150ms allow-discrete;
+
+  svg {
+    display: block;
+    fill: none;
+    transform-origin: center;
+    animation: var(--p-motion-keyframes-spin) 500ms linear infinite;
+  }
+
+  .Polaris-Spinner__Track { stroke: rgba(0, 0, 0, 0.18); }
+
+  .Polaris-Spinner__Indicator {
+    stroke: #1b1b1b;
+    stroke-linecap: round;
+    stroke-dasharray: 4, 6;
+  }
+
+  @starting-style { opacity: 0; }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+    svg { animation: none; }
+  }
+}
+
+/* Skeletons */
+html[class~="Polaris-Summer-Editions-2023"] {
+  .Polaris-SkeletonBodyText,
+  .Polaris-SkeletonDisplayText__DisplayText,
+  .Polaris-SkeletonThumbnail {
+    border-radius: var(--p-border-radius-200);
+  }
+
+  .Polaris-SkeletonBodyText::after,
+  .Polaris-SkeletonDisplayText__DisplayText::after {
+    border-radius: var(--p-border-radius-200);
+  }
+}

data/app/assets/stylesheets/polaris_view_components/modal.pcss

@@ -1,5 +1,117 @@
-html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-CloseButton {
-  &:hover {
-    background: var(--p-color-bg-fill-tertiary);
+html[class~="Polaris-Summer-Editions-2023"] {
+  .Polaris-Modal-Dialog__Modal {
+    box-shadow: var(--p-shadow-dialog);
+  }
+
+  @media (min-width: 48em), (pointer: fine) {
+    .Polaris-Modal-Dialog__Container { justify-content: center; }
+
+    .Polaris-Modal-Dialog__Modal {
+      position: relative;
+      width: 38.75rem;
+      max-width: calc(100vw - var(--p-space-800));
+      max-height: calc(100svh - 3.75rem);
+      margin: 0 auto;
+      border-radius: var(--p-border-radius-dialog);
+
+      &.Polaris-Modal-Dialog--sizeSmall { width: 23.75rem; max-width: calc(100vw - var(--p-space-800)); }
+      &.Polaris-Modal-Dialog--sizeLarge { width: 61.25rem; max-width: calc(100vw - var(--p-space-800)); }
+      /* clamp() instead of min(), which LibSass rejects when apps import this CSS from Sass. */
+      &.Polaris-Modal-Dialog--limitHeight { max-height: clamp(0px, calc(100svh - 3.75rem), 37.5rem); }
+    }
+  }
+
+  .Polaris-Modal-Header {
+    --pc-box-background: transparent !important;
+    --pc-box-border-block-end-width: 0 !important;
+    --pc-box-padding-block-start-xs: var(--p-space-400) !important;
+    --pc-box-padding-block-end-xs: var(--p-space-400) !important;
+    --pc-box-padding-inline-start-xs: var(--p-space-500) !important;
+
+    .Polaris-Text--root {
+      font-size: 0.9375rem;
+      font-weight: var(--p-font-weight-medium);
+      line-height: 1.375rem;
+      letter-spacing: -0.02em;
+    }
+  }
+
+  .Polaris-Modal__Body { min-height: 0; }
+
+  .Polaris-Modal-Section {
+    border-bottom: none;
+
+    > .Polaris-Box { padding: var(--p-space-100) var(--p-space-500); }
+    + .Polaris-Modal-Section { margin-top: var(--p-space-200); }
+  }
+
+  .Polaris-Modal-Dialog__Modal:not(:has(> .Polaris-Modal-Footer)) .Polaris-Modal-Section:last-child > .Polaris-Box {
+    padding-bottom: var(--p-space-400);
+  }
+
+  .Polaris-Modal-Dialog__Modal:not(:has(> .Polaris-Modal-Header)) .Polaris-Modal-Section:first-of-type > .Polaris-Box {
+    padding-top: var(--p-space-400);
+    padding-right: var(--p-space-1200);
+  }
+
+  .Polaris-Modal-Footer {
+    flex-shrink: 0;
+
+    > .Polaris-Box {
+      --pc-box-border-block-start-width: 0 !important;
+      padding-top: var(--p-space-300);
+    }
+
+    .Polaris-LegacyStack,
+    .Polaris-ButtonGroup { margin: 0; }
+
+    .Polaris-LegacyStack__Item,
+    .Polaris-ButtonGroup__Item { margin: 0; }
+
+    .Polaris-ButtonGroup { gap: var(--p-space-200); }
+
+    .Polaris-Button:not(.Polaris-Button--primary, .Polaris-Button--plain, .Polaris-Button--destructive, .Polaris-Button--disabled) {
+      --pc-button-bg: var(--p-color-bg-surface);
+      --pc-button-bg-hover: var(--p-color-bg-surface-hover);
+      --pc-button-bg-active: var(--p-color-bg-surface-hover);
+      --pc-button-shadow: var(--p-shadow-page-button);
+    }
+  }
+
+  .Polaris-Modal-CloseButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    padding: var(--p-space-100);
+    margin: 0;
+    border-radius: var(--p-border-radius-full);
+    background: var(--p-color-bg-surface);
+    box-shadow: var(--p-shadow-page-button);
+
+    &:hover,
+    &:active { background: var(--p-color-bg-surface-hover); }
+
+    &::after { border-radius: var(--p-border-radius-full); }
+  }
+
+  .Polaris-Modal-Dialog__Modal > .Polaris-Modal-CloseButton {
+    position: absolute;
+    top: var(--p-space-200);
+    right: var(--p-space-200);
+    z-index: 1;
+  }
+
+  @media (max-width: 47.9975em) and (pointer: coarse) {
+    .Polaris-Modal-Footer {
+      .Polaris-LegacyStack__Item,
+      .Polaris-ButtonGroup,
+      .Polaris-ButtonGroup__Item,
+      .Polaris-Button { width: 100%; }
+
+      .Polaris-LegacyStack__Item--fill { display: none; }
+      .Polaris-ButtonGroup { flex-direction: column-reverse; }
+    }
   }
 }

data/app/assets/stylesheets/polaris_view_components/navigation.pcss

@@ -1,11 +1,60 @@
+/* Navigation uses the dark sidebar from the Shopify admin */
 html[class~="Polaris-Summer-Editions-2023"] .Polaris-Navigation {
+  --p-color-text: #e3e3e3;
+  --p-color-text-secondary: #b5b5b5;
+  --p-color-text-disabled: #8a8a8a;
+  --p-color-icon: #e3e3e3;
+  --p-color-icon-hover: #fff;
+  --p-color-icon-secondary: #b5b5b5;
+  --p-color-icon-disabled: #8a8a8a;
+  --p-color-bg-surface-secondary-hover: rgba(255, 255, 255, 0.06);
+  --p-color-bg-surface-secondary-active: rgba(255, 255, 255, 0.11);
+  --p-color-bg-surface-selected: rgba(255, 255, 255, 0.11);
+  --p-color-bg-surface-tertiary: rgba(255, 255, 255, 0.06);
+  --p-color-nav-bg-surface-selected: rgba(255, 255, 255, 0.11);
+  background-color: #1a1a1a;
+  color: var(--p-color-text);
+
   .Polaris-Navigation__Item {
+    border-radius: var(--p-border-radius-200);
+
     &.Polaris-Navigation__Item--selected {
       background-color: var(--p-color-nav-bg-surface-selected) !important;
+      color: #fff;
+
+      .Polaris-Navigation__Text {
+        color: #fff;
+        font-weight: var(--p-font-weight-medium);
+      }
+
+      svg {
+        fill: #fff;
+      }
     }
 
     &:hover {
       background-color: var(--p-color-bg-surface-tertiary);
     }
   }
+
+  .Polaris-Navigation__ItemInnerWrapper {
+    border-radius: var(--p-border-radius-200);
+  }
+
+  .Polaris-Navigation__Icon svg {
+    fill: var(--p-color-icon);
+  }
+
+  .Polaris-Navigation__SectionHeading .Polaris-Navigation__Text {
+    color: var(--p-color-text-secondary);
+  }
+
+  .Polaris-Navigation__SecondaryAction svg,
+  .Polaris-Navigation__SectionHeading svg {
+    fill: var(--p-color-icon-secondary);
+  }
+
+  .Polaris-Navigation__SecondaryAction:hover {
+    background-color: var(--p-color-bg-surface-secondary-hover);
+  }
 }

data/app/assets/stylesheets/polaris_view_components/navigation_list_component.pcss

@@ -1,22 +1,85 @@
-.NavigationList {
-  padding-top: var(--p-space-3);
-  padding-bottom: var(--p-space-3);
+html[class~="Polaris-Summer-Editions-2023"] .NavigationList {
+  padding: 0;
+
+  > .Polaris-LegacyCard__Surface { padding: var(--p-space-200); }
 
   ul {
     margin: 0;
     padding-inline-start: 0;
+    list-style: none;
   }
 
-  .Polaris-Navigation__Item {
-    padding-bottom: var(--p-space-05);
-    padding-top: var(--p-space-05);
+  .Polaris-Navigation__ItemWrapper { padding: 0; }
+
+  .Polaris-Navigation__ItemInnerWrapper {
+    border-radius: var(--p-border-radius-control);
+    background: transparent;
 
-    &.Polaris-Navigation__Item--selected {
-      background-color: var(--p-color-bg-surface-tertiary-hover);
+    &:hover { background: var(--p-color-bg-surface-hover); }
+    &:active { background: var(--p-color-bg-surface-active); }
+
+    &.Polaris-Navigation__ItemInnerWrapper--selected {
+      background: var(--p-color-bg-fill-secondary);
     }
 
-    &:hover {
-      background-color: var(--p-color-bg-surface-tertiary);
+    &.Polaris-Navigation__ItemInnerDisabled { background: transparent; }
+  }
+
+  .Polaris-Navigation__Item {
+    min-height: 2rem;
+    align-items: center;
+    gap: var(--p-space-200);
+    padding: var(--p-space-150) var(--p-space-200);
+    border-radius: var(--p-border-radius-control);
+    background: transparent;
+    color: var(--p-color-text);
+    font-size: var(--p-font-size-325);
+    line-height: var(--p-font-line-height-500);
+    font-weight: var(--p-font-weight-regular);
+
+    &:hover,
+    &:active,
+    &:focus-visible { background: transparent; color: var(--p-color-text); }
+
+    &:focus-visible {
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
+      outline-offset: var(--p-space-025);
     }
+
+    &::before,
+    &::after { content: none; }
+
+    &.Polaris-Navigation__Item--disabled { color: var(--p-color-text-disabled); }
+  }
+
+  .Polaris-Navigation__Text {
+    min-width: 0;
+    margin: 0;
+    font-size: inherit;
+    font-weight: var(--p-font-weight-regular);
+    line-height: inherit;
+    overflow-wrap: anywhere;
+  }
+
+  .Polaris-Navigation__Item--selected .Polaris-Navigation__Text {
+    font-weight: var(--p-font-weight-medium);
+  }
+
+  .Polaris-Navigation__Icon {
+    margin: 0;
+    flex: 0 0 var(--p-space-500);
+    width: var(--p-space-500);
+    height: var(--p-space-500);
+
+    svg { fill: var(--p-color-icon-secondary); }
+  }
+
+  .Polaris-Navigation__Item--selected .Polaris-Navigation__Icon svg { fill: var(--p-color-icon); }
+  .Polaris-Navigation__Item--disabled .Polaris-Navigation__Icon svg { fill: var(--p-color-icon-disabled); }
+
+  .Polaris-Navigation__Badge {
+    margin: 0 0 0 auto;
+    flex-shrink: 0;
+    align-self: center;
   }
 }

data/app/assets/stylesheets/polaris_view_components/page.pcss

@@ -1,20 +1,130 @@
 html[class~="Polaris-Summer-Editions-2023"] {
   .Polaris-Page-Header {
-    font-weight: var(--p-font-weight-bold);
+    font-weight: var(--p-font-weight-medium);
   }
 
-  .Polaris-Page-Header--smallTitle .Polaris-Header-Title {
-    font-size: var(--p-font-size-300);
-    line-height: var(--p-font-line-height-400);
+  .Polaris-Header-Title {
+    font-size: 1.625rem;
+    font-weight: var(--p-font-weight-medium);
+    line-height: var(--p-font-line-height-800);
+    letter-spacing: -0.02em;
   }
 
-  .Polaris-Page-Header--mediumTitle .Polaris-Header-Title {
-    font-size: var(--p-font-size-400);
-    line-height: var(--p-font-line-height-500);
+  .Polaris-Page-Header--smallTitle .Polaris-Header-Title,
+  .Polaris-Page-Header--longTitle .Polaris-Header-Title {
+    font-size: 1.375rem;
+    line-height: var(--p-font-line-height-700);
   }
 
-  .Polaris-Page-Header--largeTitle .Polaris-Header-Title {
-    font-size: var(--p-font-size-500);
-    line-height: var(--p-font-line-height-600);
+  .Polaris-Header-Title__SubTitle {
+    color: var(--p-color-text-secondary);
+  }
+
+  /* Keeps the header the same height with or without a title badge. */
+  .Polaris-Header-Title__TitleWithMetadataWrapper {
+    padding-block: 0;
+  }
+
+  /* Centers the 28px back button on the 32px title line. It can't center in the
+     row, which a subtitle makes taller. Phones put the button on its own row. */
+  @media (min-width: 30.625em) {
+    .Polaris-Page-Header--mediumTitle .Polaris-Page-Header__BreadcrumbWrapper {
+      margin-top: var(--p-space-050);
+    }
+  }
+
+  /* Back button */
+  .Polaris-Page-Header__BreadcrumbWrapper :is(a, button) {
+    border-radius: var(--p-border-radius-full);
+    background-color: var(--p-color-bg-surface);
+    box-shadow: var(--p-shadow-page-button) !important;
+
+    &:is(:hover, :focus-visible) {
+      background-color: var(--p-color-bg-surface-hover);
+    }
+
+    &:active {
+      background-color: var(--p-color-bg-surface-active);
+      box-shadow: var(--p-shadow-page-button) !important;
+    }
+  }
+
+  /* Style header buttons and popover activators without affecting menu items. */
+  .Polaris-ActionMenu-SecondaryAction > .Polaris-Button,
+  .Polaris-ActionMenu-SecondaryAction > [data-controller~='polaris-popover'] > [data-polaris-popover-target='activator'] > .Polaris-Button {
+    border-radius: var(--p-border-radius-full) !important;
+    background-color: var(--p-color-bg-surface) !important;
+    box-shadow: var(--p-shadow-page-button) !important;
+
+    &:not(.Polaris-Button--disabled) {
+      &:is(:hover, :focus) {
+        background-color: var(--p-color-bg-surface-hover) !important;
+        box-shadow: var(--p-shadow-page-button) !important;
+      }
+
+      &:active {
+        background-color: var(--p-color-bg-surface-active) !important;
+        box-shadow: var(--p-shadow-page-button) !important;
+      }
+    }
+
+    &.Polaris-Button--disabled {
+      color: var(--p-color-text-disabled);
+
+      svg { fill: var(--p-color-icon-disabled); }
+    }
+  }
+
+  .Polaris-ActionMenu-SecondaryAction--destructive > .Polaris-Button:not(.Polaris-Button--disabled) {
+    color: #7e100c !important;
+
+    svg {
+      fill: currentColor;
+    }
+  }
+
+  .Polaris-ActionMenu-RollupActions__RollupActivator > [data-controller~='polaris-popover'] > [data-polaris-popover-target='activator'] > .Polaris-Button {
+    border-radius: var(--p-border-radius-full);
+    background: var(--p-color-bg-surface);
+    box-shadow: var(--p-shadow-page-button);
+
+    &:hover,
+    &:focus:not(:active) {
+      background: var(--p-color-bg-surface-hover);
+    }
+
+    &:active {
+      background: var(--p-color-bg-surface-active);
+    }
+  }
+
+  .Polaris-Page-Header__PaginationWrapper .Polaris-ButtonGroup {
+    flex-wrap: nowrap;
+    margin: 0;
+    gap: var(--p-space-100);
+
+    .Polaris-ButtonGroup__Item {
+      margin: 0;
+    }
+
+    .Polaris-Button,
+    .Polaris-Button::before,
+    .Polaris-Button::after {
+      border-radius: var(--p-border-radius-full) !important;
+    }
+
+    .Polaris-Button,
+    .Polaris-Button--disabled {
+      --pc-button-bg: var(--p-color-bg-surface);
+      --pc-button-bg-hover: var(--p-color-bg-surface-hover);
+      --pc-button-bg-active: var(--p-color-bg-surface-active);
+      --pc-button-shadow: var(--p-shadow-page-button);
+      background: var(--pc-button-bg) !important;
+      box-shadow: var(--pc-button-shadow) !important;
+    }
+
+    .Polaris-Button:not(.Polaris-Button--disabled):hover {
+      background: var(--pc-button-bg-hover) !important;
+    }
   }
 }

data/app/assets/stylesheets/polaris_view_components/pagination.pcss

@@ -4,10 +4,14 @@ html[class~="Polaris-Summer-Editions-2023"] [aria-label='Pagination'] {
     box-shadow: none;
 
     &:not([disabled]) {
-      background-color: var(--p-color-bg-fill-tertiary);
+      background-color: var(--p-color-bg-fill-secondary);
 
       &:hover {
-        background-color: var(--p-color-bg-fill-tertiary-hover);
+        background-color: var(--p-color-bg-fill-secondary-hover);
+      }
+
+      &:active {
+        background-color: var(--p-color-bg-fill-secondary-active);
       }
     }
   }

data/app/assets/stylesheets/polaris_view_components/popover.pcss

@@ -1,4 +1,17 @@
 html[class~="Polaris-Summer-Editions-2023"] .Polaris-Popover {
+  border: none;
+  border-radius: var(--p-border-radius-popover);
+  box-shadow: var(--p-shadow-popover);
+
+  &::before {
+    content: none;
+  }
+
+  .Polaris-Popover__ContentContainer,
+  .Polaris-Popover__Content {
+    border-radius: var(--p-border-radius-popover);
+  }
+
   .Polaris-Popover__Content .Polaris-Popover__Pane:first-child > .Polaris-Popover__Section > .Polaris-Box {
     padding: var(--p-space-300) var(--p-space-400) var(--p-space-100);
   }

data/app/assets/stylesheets/polaris_view_components/resource_list.pcss

@@ -0,0 +1,100 @@
+/* Resource-list composition: compact rows within the enclosing section surface. */
+html[class~="Polaris-Summer-Editions-2023"] {
+  .Polaris-LegacyCard__Surface > .Polaris-ResourceList__ResourceListWrapper {
+    border-radius: inherit;
+  }
+
+  .Polaris-ResourceList__ResourceListWrapper {
+    & > .Polaris-ResourceList:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
+    & > .Polaris-ResourceList:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
+  }
+
+  .Polaris-ResourceList {
+    & > .Polaris-ResourceItem__ListItem:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
+    & > .Polaris-ResourceItem__ListItem:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
+  }
+
+  .Polaris-ResourceItem__ItemWrapper,
+  .Polaris-ResourceItem { border-radius: inherit; }
+
+  .Polaris-ResourceItem {
+    &:hover { background: var(--p-color-bg-surface-hover); }
+    &:active { background: var(--p-color-bg-surface-active); }
+
+    &--selected { background: var(--p-color-bg-surface-selected); }
+    &--selected:hover,
+    &--selected:active { background: var(--p-color-bg-surface-secondary-selected); }
+
+    h3,
+    h3 .Polaris-Text--semibold {
+      font-size: 0.8125rem;
+      line-height: 1.25rem;
+      font-weight: var(--p-font-weight-medium);
+    }
+  }
+
+  .Polaris-ResourceItem__Container {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .Polaris-ResourceItem__ListItem:has(.Polaris-ResourceItem__Link:focus-visible)::after {
+    z-index: 3;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 2px var(--p-color-border-focus);
+  }
+
+  .Polaris-ResourceList__FiltersWrapper { padding: var(--p-space-400); }
+
+  .Polaris-ResourceList__HeaderOuterWrapper { border-radius: inherit; }
+
+  .Polaris-ResourceList__HeaderWrapper {
+    min-height: 3rem;
+    padding: var(--p-space-200) var(--p-space-400);
+    border-radius: inherit;
+  }
+
+  .Polaris-ResourceList__HeaderContentWrapper {
+    position: static;
+    min-width: 0;
+    min-height: 2rem;
+  }
+
+  .Polaris-ResourceList__HeaderTitleWrapper { white-space: normal; }
+
+  .Polaris-ResourceItem__Actions {
+    display: flex;
+    align-items: center;
+    opacity: 0;
+    pointer-events: none;
+
+    & > * { clip: auto; overflow: visible; }
+  }
+
+  .Polaris-ResourceItem:hover .Polaris-ResourceItem__Actions,
+  .Polaris-ResourceItem:focus-within .Polaris-ResourceItem__Actions,
+  .Polaris-ResourceItem--persistActions .Polaris-ResourceItem__Actions {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .Polaris-ResourceItem__Disclosure {
+    display: none;
+
+    .Polaris-Button--iconOnly {
+      width: 1.75rem;
+      height: 1.75rem;
+      padding: var(--p-space-100);
+    }
+  }
+
+  @media (max-width: 46.5em), (hover: none) {
+    .Polaris-ResourceItem__Actions { display: none; }
+    .Polaris-ResourceItem__Disclosure { display: flex; align-items: center; }
+  }
+
+  @media (min-width: 48.0625em) and (max-width: 61.5em) {
+    [data-has-navigation] .Polaris-ResourceItem__Actions { display: none; }
+    [data-has-navigation] .Polaris-ResourceItem__Disclosure { display: flex; align-items: center; }
+  }
+}