polaris_view_components 3.2.1 → 4.0.0

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

@@ -1,50 +1,150 @@
 html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard {
-  .Polaris-LegacyCard__Header {
-    padding-top: var(--p-space-400);
-  }
+  --pc-card-surface-bg: var(--p-color-bg-surface);
+  --pc-card-radius: var(--p-border-radius-container);
+
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+
+  &::before { content: none; }
+
+  /* Stacked cards are 16px apart, plus 16px above an outside header (like s-section). */
+  & + .Polaris-LegacyCard { margin-top: var(--p-space-400); }
+  & + .Polaris-LegacyCard:has(> .Polaris-LegacyCard__Header) { margin-top: var(--p-space-800); }
+
+  .Polaris-LegacyCard__Header,
+  .Polaris-LegacyCard__SectionHeader {
+    .Polaris-ButtonGroup {
+      margin: 0;
+      gap: var(--p-space-200);
 
-  .Polaris-LegacyCard__Header+.Polaris-LegacyCard__Section {
-    padding-top: var(--p-space-200);
+      & > .Polaris-ButtonGroup__Item { margin: 0; }
+    }
   }
 
-  .Polaris-LegacyCard__Section {
-    padding: var(--p-space-400) var(--p-space-400) var(--p-space-200);
+  & > .Polaris-LegacyCard__Header {
+    display: flex;
+    align-items: center;
+    min-height: 1.75rem;
+    padding: 0;
+    margin-bottom: var(--p-space-300);
+    overflow-wrap: anywhere;
 
-    &+.Polaris-LegacyCard__Section {
-      padding-top: var(--p-space-200);
+    .Polaris-Text--headingMd {
+      font-size: 0.9375rem;
+      line-height: 1.375rem;
+      letter-spacing: -0.01em;
     }
 
-    &:last-child {
-      padding-bottom: var(--p-space-400);
+    & > .Polaris-LegacyStack {
+      flex: 1;
+      min-width: 0;
+      margin: 0;
+      gap: var(--p-space-200);
+      align-items: center;
+
+      & > .Polaris-LegacyStack__Item { margin: 0; min-width: 0; }
+      & > .Polaris-LegacyStack__Item--fill { flex: 1 1 10rem; }
     }
 
-    &.Polaris-LegacyCard__Section--flush {
-      padding: 0;
+    .Polaris-Button--plain { margin: 0; }
+  }
+
+  & > .Polaris-LegacyCard__Surface {
+    min-width: 0;
+    background: var(--pc-card-surface-bg);
+    border-radius: var(--pc-card-radius);
+    box-shadow: var(--p-shadow-container);
+
+    & > .Polaris-LegacyCard__Section {
+      padding: var(--p-space-400) var(--p-space-400) var(--p-space-200);
+
+      & + .Polaris-LegacyCard__Section { padding-top: var(--p-space-200); }
+      &:last-child { padding-bottom: var(--p-space-400); }
+
+      &:first-child {
+        border-top-left-radius: var(--pc-card-radius);
+        border-top-right-radius: var(--pc-card-radius);
+      }
+
+      &:last-child {
+        border-bottom-left-radius: var(--pc-card-radius);
+        border-bottom-right-radius: var(--pc-card-radius);
+      }
+
+      &.Polaris-LegacyCard__Section--subdued {
+        padding-top: var(--p-space-300);
+        padding-bottom: var(--p-space-300);
+
+        &:last-child { padding-bottom: var(--p-space-400); }
+      }
+
+      &.Polaris-LegacyCard__Section--fullWidth { padding-inline: 0; }
+
+      &:has(> .Polaris-LegacyFilters) { padding-bottom: var(--p-space-400); }
 
-      img {
-        border-top-left-radius: var(--p-border-radius-300);
-        border-top-right-radius: var(--p-border-radius-300);
-        width: 100%;
+      &.Polaris-LegacyCard__Section--flush {
+        padding: 0;
+
+        img { display: block; width: 100%; }
+        &:first-child img {
+          border-top-left-radius: var(--pc-card-radius);
+          border-top-right-radius: var(--pc-card-radius);
+        }
+        &:last-child img {
+          border-bottom-left-radius: var(--pc-card-radius);
+          border-bottom-right-radius: var(--pc-card-radius);
+        }
       }
     }
-  }
 
-  .Polaris-LegacyCard__Footer {
-    padding-top: var(--p-space-100);
-  }
+    /* Tabs leave 8px below them, so a section under tabs starts 12px down, like
+       the 12px a bordered section leaves below its content. */
+    & > :is(.Polaris-LegacyTabs__Wrapper, :has(> .Polaris-LegacyTabs__Wrapper)) + .Polaris-LegacyCard__Section:not(.Polaris-LegacyCard__Section--flush) {
+      padding-top: var(--p-space-100);
+    }
 
-  &.Polaris-LegacyCard--withoutTitle {
-    .Polaris-LegacyCard__Section:first-child {
-      padding-top: var(--p-space-400);
+    & > .Polaris-LegacyCard__Footer {
+      padding-top: var(--p-space-100);
+      &:first-child { padding-top: var(--p-space-400); }
     }
   }
 
-  &.Polaris-LegacyCard--borderless {
-    border: none;
-    box-shadow: none;
+  &.Polaris-LegacyCard--subdued { --pc-card-surface-bg: var(--p-color-bg-surface-secondary); }
 
-    &::before {
-      content: none;
-    }
+  &.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.
+   The card may sit in one wrapper (a turbo frame, say). Sections that share the first row keep the
+   default so they stay aligned. */
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-Layout__Section:has(
+  > .Polaris-LegacyCard:first-child > .Polaris-LegacyCard__Header,
+  > :first-child > .Polaris-LegacyCard:first-child > .Polaris-LegacyCard__Header
+):not(
+  :first-child,
+  .Polaris-Layout__Section:first-child + .Polaris-Layout__Section--secondary,
+  .Polaris-Layout__Section--oneHalf:first-child + .Polaris-Layout__Section--oneHalf,
+  .Polaris-Layout__Section--oneThird:first-child + .Polaris-Layout__Section--oneThird,
+  .Polaris-Layout__Section--oneThird:first-child + .Polaris-Layout__Section--oneThird + .Polaris-Layout__Section--oneThird
+) {
+  margin-top: var(--p-space-800);
+}
+
+/* Pages have no side padding on small screens, so cards run edge to edge. */
+@media (max-width: 30.6225em) {
+  html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard {
+    --pc-card-radius: 0;
+
+    & > .Polaris-LegacyCard__Header { padding-inline: var(--p-space-400); }
+  }
+
+  html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinPage {
+    border-radius: 0;
+  }
+
+  html[class~="Polaris-Summer-Editions-2023"] .Polaris-Layout__Annotation {
+    padding-left: var(--p-space-400);
   }
 }

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

@@ -0,0 +1,80 @@
+/* Checkbox and radio button */
+html[class~="Polaris-Summer-Editions-2023"] {
+  .Polaris-Checkbox__Backdrop,
+  .Polaris-RadioButton__Backdrop {
+    border: none;
+    background-color: var(--p-color-input-bg-surface);
+    box-shadow: var(--p-shadow-input-strong);
+  }
+
+  .Polaris-Checkbox__Backdrop {
+    border-radius: var(--p-border-radius-100);
+  }
+
+  :is(.Polaris-Choice, .Polaris-Checkbox__ChoiceLabel, .Polaris-OptionList-Option__CheckboxLabel):hover .Polaris-Checkbox__Input:not(:checked, :disabled, .Polaris-Checkbox__Input--indeterminate) + .Polaris-Checkbox__Backdrop,
+  :is(.Polaris-Choice, .Polaris-RadioButton__ChoiceLabel):hover .Polaris-RadioButton__Input:not(:checked, :disabled) + .Polaris-RadioButton__Backdrop {
+    background-color: var(--p-color-input-bg-surface-hover);
+    box-shadow: var(--p-shadow-input-strong);
+  }
+
+  :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,
+  .Polaris-Checkbox__Input:is(:checked, .Polaris-Checkbox__Input--indeterminate):focus-visible + .Polaris-Checkbox__Backdrop,
+  .Polaris-Checkbox__Input:checked + .Polaris-Checkbox__Backdrop,
+  .Polaris-Checkbox__Input.Polaris-Checkbox__Input--indeterminate + .Polaris-Checkbox__Backdrop,
+  .Polaris-RadioButton__Input:checked:not([disabled]) + .Polaris-RadioButton__Backdrop,
+  .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:checked:not([disabled]) + .Polaris-RadioButton__Backdrop {
+    border: none;
+    background-color: var(--p-color-bg-fill-brand);
+    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);
+  }
+
+  .Polaris-Checkbox__Input:disabled + .Polaris-Checkbox__Backdrop,
+  .Polaris-RadioButton__Input:disabled + .Polaris-RadioButton__Backdrop,
+  .Polaris-Checkbox__ChoiceLabel:hover .Polaris-Checkbox__Input:disabled + .Polaris-Checkbox__Backdrop,
+  .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:disabled + .Polaris-RadioButton__Backdrop {
+    background-color: var(--p-color-bg-fill-disabled);
+    box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.08);
+  }
+
+  .Polaris-Checkbox__Input:disabled:checked + .Polaris-Checkbox__Backdrop,
+  .Polaris-RadioButton__Input:disabled:checked + .Polaris-RadioButton__Backdrop,
+  .Polaris-Checkbox__ChoiceLabel:hover .Polaris-Checkbox__Input:disabled:is(:checked, .Polaris-Checkbox__Input--indeterminate) + .Polaris-Checkbox__Backdrop,
+  .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:disabled:checked + .Polaris-RadioButton__Backdrop {
+    background-color: var(--p-color-bg-fill-brand-disabled);
+    box-shadow: none;
+  }
+
+  .Polaris-Checkbox--error .Polaris-Checkbox__Input + .Polaris-Checkbox__Backdrop {
+    background-color: var(--p-color-input-bg-surface);
+    box-shadow: var(--p-shadow-input-critical);
+  }
+
+  .Polaris-Choice:hover .Polaris-Checkbox--error .Polaris-Checkbox__Input:not(:checked, :disabled, .Polaris-Checkbox__Input--indeterminate) + .Polaris-Checkbox__Backdrop,
+  .Polaris-Checkbox--error .Polaris-Checkbox__Input:not(:checked, :disabled, .Polaris-Checkbox__Input--indeterminate):focus-visible + .Polaris-Checkbox__Backdrop {
+    background-color: var(--p-color-input-bg-surface-hover);
+    box-shadow: var(--p-shadow-input-critical);
+  }
+
+  .Polaris-Checkbox--error .Polaris-Checkbox__Input:is(:checked, .Polaris-Checkbox__Input--indeterminate):not(:disabled) + .Polaris-Checkbox__Backdrop,
+  .Polaris-Choice:hover .Polaris-Checkbox--error .Polaris-Checkbox__Input:is(:checked, .Polaris-Checkbox__Input--indeterminate):not(:disabled) + .Polaris-Checkbox__Backdrop {
+    background-color: var(--p-color-bg-fill-critical);
+    box-shadow: none !important;
+  }
+
+  /* Both icons render, so toggling the indeterminate class in JS swaps them. */
+  .Polaris-Checkbox__Input:not(.Polaris-Checkbox__Input--indeterminate) ~ .Polaris-Checkbox__Icon .Polaris-Checkbox__MinusIcon,
+  .Polaris-Checkbox__Input--indeterminate ~ .Polaris-Checkbox__Icon .Polaris-Checkbox__CheckIcon {
+    display: none;
+  }
+
+  .Polaris-Choice__Label {
+    font-size: var(--p-font-size-325);
+  }
+
+  /* Checkboxes are 14px, radio buttons 16px. */
+  .Polaris-Choice__Control:has(> .Polaris-Checkbox) {
+    width: 1rem;
+    height: 1rem;
+    margin-top: 0.0625rem;
+  }
+}

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

@@ -87,23 +87,23 @@ html[class~="Polaris-Summer-Editions-2023"] {
     }
 
     &:first-of-type > div > div > button {
-      border-top-left-radius: var(--p-border-radius-1);
-      border-bottom-left-radius: var(--p-border-radius-1);
+      border-top-left-radius: var(--p-border-radius-full);
+      border-bottom-left-radius: var(--p-border-radius-full);
     }
   }
 
   &.Polaris-LegacyFilters-ConnectedFilterControl--queryFieldHidden {
     .Polaris-LegacyFilters-ConnectedFilterControl__Item:first-of-type > div > div > button {
-      border-top-left-radius: var(--p-border-radius-1);
-      border-bottom-left-radius: var(--p-border-radius-1);
+      border-top-left-radius: var(--p-border-radius-full);
+      border-bottom-left-radius: var(--p-border-radius-full);
     }
   }
 }
 
 .Polaris-LegacyFilters-ConnectedFilterControl__RightContainerWithoutMoreFilters {
   .Polaris-LegacyFilters-ConnectedFilterControl__Item:last-child > div > div > button {
-    border-top-right-radius: var(--p-border-radius-1);
-    border-bottom-right-radius: var(--p-border-radius-1);
+    border-top-right-radius: var(--p-border-radius-full);
+    border-bottom-right-radius: var(--p-border-radius-full);
   }
 }
 
@@ -210,67 +210,6 @@ html[class~="Polaris-Summer-Editions-2023"] {
   border: none !important;
 }
 
-/* ResourceItem Actions + Disclosure */
-
-.Polaris-ResourceItem__Actions {
-  display: none;
-}
-.Polaris-ResourceItem:hover .Polaris-ResourceItem__Actions {
-  display: flex;
-}
-@media (max-width: 45em), (min-width: 48.0625em) and (max-width: 61.5em) {
-  [data-has-navigation] .Polaris-ResourceItem__Actions {
-    display: none !important;
-  }
-}
-@media (max-width: 46.5em) {
-  .Polaris-ResourceItem__Actions {
-    display: none !important;
-  }
-}
-
-.Polaris-ResourceItem--persistActions .Polaris-ResourceItem__Actions {
-  display: flex;
-}
-@media (max-width: 45em), (min-width: 48.0625em) and (max-width: 61.5em) {
-  [data-has-navigation] .Polaris-ResourceItem--persistActions .Polaris-ResourceItem__Actions {
-    display: none !important;
-  }
-}
-@media (max-width: 46.5em) {
-  .Polaris-ResourceItem--persistActions .Polaris-ResourceItem__Actions {
-    display: none !important;
-  }
-}
-
-.Polaris-ResourceItem__Disclosure {
-  position: relative;
-  top: -0.7rem;
-  right: -1.65rem;
-  display: none;
-  width: 4.8rem;
-  pointer-events: initial;
-}
-.Polaris-ResourceItem--selectMode .Polaris-ResourceItem__Disclosure {
-  display: none;
-}
-@media (max-width: 45em), (min-width: 48.0625em) and (max-width: 61.5em) {
-  [data-has-navigation] .Polaris-ResourceItem__Disclosure {
-    display: flex;
-    flex: 0 0 4.8rem;
-    justify-content: center;
-    align-items: center;
-  }
-}
-@media (max-width: 46.5em) {
-  .Polaris-ResourceItem__Disclosure {
-    display: flex;
-    flex: 0 0 4.8rem;
-    justify-content: center;
-    align-items: center;
-  }
-}
-
 /* Polaris-VisuallyHidden */
 
 .Polaris-VisuallyHidden {

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

@@ -1,4 +1,6 @@
 html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable {
+  border-radius: var(--p-border-radius-container);
+
   .Polaris-DataTable__TableRow {
     content-visibility: auto;
     contain-intrinsic-size: auto 250px;
@@ -7,13 +9,67 @@ html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable {
   .Polaris-DataTable__Heading:not(
       .Polaris-DataTable__Heading--flush
     ):first-child {
-    padding-left: var(--p-space-400);
+    padding-left: var(--p-space-300);
   }
 
   .Polaris-DataTable__Cell:not(.Polaris-DataTable__Cell--flush):last-child,
   .Polaris-DataTable__Heading:not(
       .Polaris-DataTable__Heading--flush
     ):last-child {
-    padding-right: var(--p-space-400);
+    padding-right: var(--p-space-300);
+  }
+}
+
+/* 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); }
+
+  :is(.Polaris-DataTable, .Polaris-IndexTable):not(:first-child),
+  :not(:first-child) :is(.Polaris-DataTable, .Polaris-IndexTable) {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  :is(.Polaris-DataTable, .Polaris-IndexTable):not(:last-child),
+  :not(:last-child) :is(.Polaris-DataTable, .Polaris-IndexTable) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable {
+  .Polaris-DataTable__Cell--header {
+    padding-top: var(--p-space-150);
+    padding-bottom: var(--p-space-150);
+    background-color: var(--p-color-bg-surface-secondary);
+    color: var(--p-color-text-secondary);
+    font-size: var(--p-font-size-300);
+    font-weight: var(--p-font-weight-medium);
+    line-height: 1.125rem;
+    border-bottom: var(--p-border-width-025) solid var(--p-color-border-secondary);
+  }
+
+  .Polaris-DataTable__Cell:not(.Polaris-DataTable__Cell--header) {
+    padding-top: var(--p-space-150);
+    padding-bottom: var(--p-space-150);
+  }
+
+  .Polaris-DataTable__Cell--sortable {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .Polaris-DataTable__Heading {
+    padding-top: var(--p-space-150);
+    padding-bottom: var(--p-space-150);
+  }
+
+  .Polaris-DataTable__TableRow + .Polaris-DataTable__TableRow .Polaris-DataTable__Cell,
+  .Polaris-DataTable__Cell--total {
+    border-color: var(--p-color-border-secondary);
+  }
+
+  .Polaris-DataTable__TableRow:hover .Polaris-DataTable__Cell {
+    background-color: var(--p-color-bg-surface-hover);
   }
 }

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

@@ -0,0 +1,34 @@
+/* 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 {
+  --pc-description-list-spacing: var(--p-space-300);
+
+  &.Polaris-DescriptionList--spacingTight { --pc-description-list-spacing: var(--p-space-200); }
+
+  .Polaris-DescriptionList__Term {
+    font-weight: var(--p-font-weight-medium);
+    padding: var(--pc-description-list-spacing) 0 var(--p-space-100);
+  }
+
+  .Polaris-DescriptionList__Description {
+    padding: 0 0 var(--pc-description-list-spacing);
+  }
+
+  & > .Polaris-DescriptionList__Term:first-child { padding-top: 0; }
+  & > .Polaris-DescriptionList__Description:last-child { padding-bottom: 0; }
+
+  @media (min-width: 30.625em) {
+    .Polaris-DescriptionList__Term {
+      padding: var(--pc-description-list-spacing) var(--p-space-400) var(--pc-description-list-spacing) 0;
+    }
+
+    .Polaris-DescriptionList__Description {
+      padding: var(--pc-description-list-spacing) 0;
+    }
+
+    & > .Polaris-DescriptionList__Term:first-child,
+    & > .Polaris-DescriptionList__Term:first-child + .Polaris-DescriptionList__Description { padding-top: 0; }
+
+    & > .Polaris-DescriptionList__Term:nth-last-child(2),
+    & > .Polaris-DescriptionList__Description:last-child { padding-bottom: 0; }
+  }
+}

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

@@ -0,0 +1,100 @@
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-DropZone {
+  --p-color-input-bg-surface-hover: var(--p-color-bg-surface-hover);
+  border-radius: var(--p-border-radius-control);
+
+  &::after,
+  &.Polaris-DropZone--hasOutline:not(.Polaris-DropZone--focused)::after {
+    border-radius: var(--p-border-radius-control);
+    border-width: var(--p-border-width-0165);
+  }
+
+  &.Polaris-DropZone--sizeExtraLarge,
+  &.Polaris-DropZone--sizeLarge { min-height: 7.5rem; }
+
+  .Polaris-DropZone__Container::after { border-radius: var(--p-border-radius-control); }
+
+  .Polaris-DropZone__Overlay {
+    border-radius: var(--p-border-radius-control);
+    background-color: var(--p-color-bg-surface-hover);
+    padding: var(--p-space-200);
+
+    .Polaris-Text--root {
+      font-size: var(--p-font-size-325);
+      line-height: var(--p-font-line-height-500);
+      font-weight: var(--p-font-weight-regular);
+      letter-spacing: inherit;
+    }
+  }
+
+  .Polaris-DropZone-FileUpload { min-height: inherit; }
+
+  .Polaris-DropZone-FileUpload__Content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--p-space-200);
+  }
+
+  .Polaris-DropZone-FileUpload__UploadIcon { display: none; }
+
+  .Polaris-DropZone-FileUpload__Button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--p-border-radius-full);
+    padding: var(--p-space-150) var(--p-space-300);
+    background: var(--p-color-bg-fill-secondary);
+    color: var(--p-color-text);
+    font-size: var(--p-font-size-300);
+    line-height: var(--p-font-line-height-400);
+    font-weight: var(--p-font-weight-medium);
+  }
+
+  .Polaris-DropZone-FileUpload__HelpText {
+    color: var(--p-color-text-secondary);
+    font-size: var(--p-font-size-300);
+    line-height: 1.125rem;
+  }
+
+  &:not(.Polaris-DropZone--isDisabled) .Polaris-DropZone-FileUpload__Button {
+    &:hover { background: var(--p-color-bg-fill-secondary-hover); }
+    &:active { background: var(--p-color-bg-fill-secondary-active); }
+  }
+
+  &.Polaris-DropZone--sizeMedium .Polaris-DropZone-FileUpload { padding: var(--p-space-400); }
+
+  &.Polaris-DropZone--sizeSmall {
+    min-height: 2.5rem;
+    max-height: 7.5rem;
+    aspect-ratio: 1;
+
+    .Polaris-DropZone-FileUpload { padding: var(--p-space-200); }
+    .Polaris-DropZone-FileUpload__UploadIcon { display: block; }
+    .Polaris-DropZone-FileUpload__Button,
+    .Polaris-DropZone-FileUpload__HelpText { display: none; }
+  }
+
+  &.Polaris-DropZone--hasError {
+    --p-color-input-border: var(--p-color-border-critical-secondary);
+    --p-color-input-border-hover: var(--p-color-border-critical-secondary);
+    --p-color-input-bg-surface-hover: var(--p-color-bg-surface-critical);
+    background: var(--p-color-bg-surface-critical);
+
+    &:hover { background: var(--p-color-bg-surface-critical); }
+    &::after { border-color: var(--p-color-border-critical-secondary); }
+    .Polaris-DropZone__Overlay { background: var(--p-color-bg-surface-critical); }
+  }
+
+  &.Polaris-DropZone--isDisabled {
+    background: var(--p-color-bg-surface-disabled);
+    cursor: default;
+
+    &::after { border-color: var(--p-color-bg-surface-disabled); }
+    .Polaris-DropZone-FileUpload__Button {
+      background: var(--p-color-bg-fill-disabled);
+      color: var(--p-color-text-disabled);
+    }
+    .Polaris-DropZone-FileUpload__HelpText { color: var(--p-color-text-disabled); }
+    .Polaris-DropZone-FileUpload__UploadIcon svg { fill: var(--p-color-icon-disabled); }
+  }
+}

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

@@ -1,3 +1,30 @@
+/* ShopifyInter is the Inter fork used in the Shopify admin. It's licensed under the SIL Open Font License (see OFL.txt). */
+@font-face {
+  font-family: ShopifyInter;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('ShopifyInterVariable-latin-ext.woff2') format('woff2');
+  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;
+}
+@font-face {
+  font-family: ShopifyInter;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('ShopifyInterVariable-latin.woff2') format('woff2');
+  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;
+}
+/* ShopifyInter has no italic, so use Inter's italic instead of a synthesized one */
+@font-face {
+  font-family: ShopifyInter;
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('InterVariable-Italic.woff2') format('woff2');
+}
+
+/* Inter covers the scripts that aren't included in ShopifyInter subsets */
 @font-face {
   font-family: Inter;
   font-style: normal;

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

@@ -1,5 +1,29 @@
 html[class~="Polaris-Summer-Editions-2023"] .Polaris-FooterHelp {
+  flex-direction: column;
+  align-items: center;
+  margin: var(--p-space-500) 0;
+  width: 100%;
+
   .Polaris-FooterHelp__Text {
     font-size: var(--p-font-size-325);
+    letter-spacing: inherit;
+    max-width: 100%;
+  }
+
+  .Polaris-Link {
+    color: inherit;
+    border-radius: var(--p-border-radius-100);
+    text-decoration: underline;
+
+    &:hover,
+    &:active { color: inherit; }
+
+    &:focus:not(:focus-visible) { outline: none; }
+
+    &:focus-visible {
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
+      outline-offset: var(--p-space-050);
+      text-decoration: none;
+    }
   }
 }

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

@@ -1,12 +1,27 @@
 html[class~="Polaris-Summer-Editions-2023"] .Polaris-IndexTable {
+  border-radius: var(--p-border-radius-container);
 
   .Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush):first-child,
   .Polaris-IndexTable__TableHeading:not(.Polaris-IndexTable__TableHeading--flush):first-child {
-    padding-left: var(--p-space-400);
+    padding-left: var(--p-space-300);
   }
 
   .Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush):last-child,
   .Polaris-IndexTable__TableHeading:not(.Polaris-IndexTable__TableHeading--flush):last-child {
-    padding-right: var(--p-space-400);
+    padding-right: var(--p-space-300);
+  }
+}
+
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-IndexTable {
+  .Polaris-IndexTable__TableHeading {
+    padding-top: var(--p-space-150);
+    padding-bottom: var(--p-space-150);
+    font-weight: var(--p-font-weight-medium);
+    line-height: 1.125rem;
+  }
+
+  .Polaris-IndexTable__TableRow:not(:first-child) .Polaris-IndexTable__TableCell,
+  .Polaris-IndexTable__TableRow + .Polaris-IndexTable__TableRow {
+    border-color: var(--p-color-border-secondary);
   }
 }