polaris_view_components 3.2.0 → 4.0.0

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

@@ -1,41 +1,42 @@
 html[class~="Polaris-Summer-Editions-2023"] .Polaris-Frame-ContextualSaveBar .Polaris-Frame-ContextualSaveBar__ActionContainer .Polaris-Button {
-  --pc-color-text: var(--p-color-text-inverse);
-  --pc-button-text: var(--p-color-text-inverse);
-  --pc-button-color: var(--p-color-bg-fill-inverse);
-  --pc-button-color-hover: var(--p-color-bg-fill-inverse-hover);
-  --pc-button-color-active: var(--p-color-bg-fill-inverse-active);
-  --pc-button-color-depressed: var(--p-color-bg-fill-inverse-hover);
-  --pc-button-color-disabled: var(--pc-button-bg);
-  background: var(--p-color-bg-fill-inverse);
+  --pc-button-bg: rgba(255, 255, 255, 0.12);
+  --pc-button-bg-hover: rgba(255, 255, 255, 0.18);
+  --pc-button-bg-active: rgba(255, 255, 255, 0.24);
+  --pc-button-fg: #fff;
+  --pc-button-fg-hover: #fff;
+  --pc-button-icon: #fff;
+  --pc-button-shadow: none;
+  background: var(--pc-button-bg);
   box-shadow: none;
 
+  &::before,
+  &::after {
+    box-shadow: none;
+  }
+
   &:hover {
-    background: var(--p-color-bg-fill-inverse-hover);
-    color: var(--p-color-text-inverse);
+    background: var(--pc-button-bg-hover);
+    color: var(--pc-button-fg-hover);
     box-shadow: none;
   }
 
   &.Polaris-Button--primary {
-    --pc-button-color-hover: var(--p-color-bg-fill-hover);
-    --pc-button-color-active: var(--p-color-bg-fill-active);
-    --pc-button-color-depressed: var(--p-color-bg-fill-hover);
-    --pc-button-color-disabled: var(--pc-button-bg);
-    color: #303030;
-    background: var(--p-color-bg-fill);
-    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;
+    --pc-button-bg: #fff;
+    --pc-button-bg-hover: #f2f2f2;
+    --pc-button-bg-active: #ebebeb;
+    --pc-button-fg: #101010;
+    --pc-button-fg-hover: #101010;
+    --pc-button-icon: #101010;
+    background: var(--pc-button-bg);
+    color: var(--pc-button-fg);
 
     &:hover {
-      background: var(--p-color-bg-fill-hover);
-    }
-
-    &:before,
-    &:after {
-      box-shadow: none;
+      background: var(--pc-button-bg-hover);
     }
 
     &.Polaris-Button--disabled {
-      background: #616161;
-      color: #303030;
+      background: rgba(255, 255, 255, 0.24);
+      color: rgba(255, 255, 255, 0.5);
       box-shadow: none;
       -webkit-user-select: none;
       -moz-user-select: none;
@@ -44,3 +45,12 @@ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Frame-ContextualSaveBar .Po
     }
   }
 }
+
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-Frame-Toast {
+  border-radius: var(--p-border-radius-300);
+  box-shadow: var(--p-shadow-toast, var(--p-shadow-lg));
+
+  &::before {
+    content: none;
+  }
+}

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

@@ -1,7 +1,7 @@
 .shp-Navigation {
   margin: 0 auto;
   padding: 0 20px;
-  border-bottom: 1px solid var(--p-color-border);
+  border-bottom: 1px solid var(--p-color-border-secondary);
 }
 
 @media (max-width: 48.0625em) and (min-width: 30.625em),(min-width: 45.625em) {
@@ -36,8 +36,9 @@
 
 .shp-Navigation_Items {
   display: flex;
+  gap: 4px;
   margin: 0;
-  padding: 0 2px;
+  padding: 8px 2px;
   list-style: none
 }
 
@@ -67,9 +68,7 @@
   justify-content: center;
   width: 100%;
   min-width: 100%;
-  margin-top: 1px;
-  margin-bottom: -1px;
-  padding: 0 16px;
+  padding: 0;
   outline: none;
   text-align: center;
   white-space: nowrap;
@@ -85,6 +84,11 @@
   outline: none;
 }
 
+.shp-Navigation_Link:focus-visible .shp-Navigation_LinkText {
+  outline: var(--p-border-width-050) solid var(--p-color-border-focus);
+  outline-offset: var(--p-space-025);
+}
+
 @media (min-width: 40em) {
   .shp-Navigation_Link {
     font-size: 14px;
@@ -96,33 +100,32 @@
 }
 
 .shp-Navigation_Link:hover .shp-Navigation_LinkText {
-  font-weight: 400;
   color: var(--p-color-text);
   text-decoration: none;
-  border-bottom: 3px solid var(--p-color-bg-fill-tertiary-hover);
+  background-color: rgba(0, 0, 0, 0.05);
 }
 
 .shp-Navigation_Link:focus .shp-Navigation_LinkText {
-  font-weight: 400;
   color: var(--p-color-text);
 }
 
-.shp-Navigation_LinkText {
-  padding: 16px 0 13px 0;
-  border-bottom: 3px solid transparent;
-}
-
 .shp-Navigation_LinkText {
   display: block;
+  padding: 6px 12px;
+  border-radius: 9999px;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: -0.01em;
 }
 
-[aria-selected='true'],
+.shp-Navigation_Link[aria-selected='true'],
 .shp-Navigation_Link:focus .shp-Navigation_LinkText {
-  font-weight: 400;
   color: var(--p-color-text);
 }
 
-[aria-selected='true'] .shp-Navigation_LinkText {
-  color: var(--p-color-text-primary);
-  border-bottom: 3px solid var(--p-color-bg-primary);
+[aria-selected='true'] .shp-Navigation_LinkText,
+[aria-selected='true']:hover .shp-Navigation_LinkText {
+  color: var(--p-color-text);
+  background-color: var(--p-color-bg-fill-transparent-hover);
 }

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

@@ -6,7 +6,76 @@ html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyTabs__Wrapper {
   }
 }
 
+/* Legacy tabs are displayed as pills */
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyTabs {
+  gap: var(--p-space-050);
+
+  /* Tabs that don't fit scroll in one row instead of wrapping. The inline padding keeps focus rings visible. */
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  scrollbar-width: thin;
+  padding-inline: var(--p-space-050);
+  margin-inline: calc(var(--p-space-050) * -1);
+
+  /* Even 6px around the pills, like the index tabs in the admin. */
+  .Polaris-LegacyTabs__Tab {
+    margin: 0;
+    padding: var(--p-space-150) 0;
+  }
+
+  .Polaris-LegacyTabs__Title {
+    min-height: 1.75rem;
+    padding: var(--p-space-150) var(--p-space-300);
+    border-radius: var(--p-border-radius-full);
+    color: var(--p-color-text);
+    font-size: var(--p-font-size-300);
+    font-weight: var(--p-font-weight-medium);
+    line-height: var(--p-font-line-height-400);
+
+    &::before {
+      content: none;
+    }
+  }
+
+  .Polaris-LegacyTabs__Tab:hover .Polaris-LegacyTabs__Title,
+  .Polaris-LegacyTabs__Tab:focus-visible .Polaris-LegacyTabs__Title {
+    background-color: rgba(0, 0, 0, 0.05);
+    color: var(--p-color-text);
+    font-weight: var(--p-font-weight-medium);
+  }
+
+  .Polaris-LegacyTabs__Tab--selected .Polaris-LegacyTabs__Title,
+  .Polaris-LegacyTabs__Tab--selected:hover .Polaris-LegacyTabs__Title {
+    background-color: var(--p-color-bg-fill-transparent-hover);
+    color: var(--p-color-text);
+  }
+
+  .Polaris-LegacyTabs__Tab:active .Polaris-LegacyTabs__Title {
+    background-color: var(--p-color-bg-fill-transparent-active);
+  }
+}
+
 html[class~="Polaris-Summer-Editions-2023"] .Polaris-Tabs__Wrapper {
+  .Polaris-Tabs__Tab {
+    border-radius: var(--p-border-radius-full);
+    color: var(--p-color-text);
+
+    &::after {
+      border-radius: var(--p-border-radius-full);
+    }
+  }
+
+  .Polaris-Tabs__Tab:not([aria-disabled='true']):hover {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  .Polaris-Tabs__Tab--active,
+  .Polaris-Tabs__Tab--active:not([aria-disabled='true']):hover {
+    background-color: var(--p-color-bg-fill-transparent-hover);
+    color: var(--p-color-text);
+    border-radius: var(--p-border-radius-full);
+  }
+
   .Polaris-Tabs__Tab:active, .Polaris-Tabs__Tab:focus {
     background-color: var(--p-color-bg-fill-transparent-hover);
     color: var(--p-color-text-brand);

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

@@ -0,0 +1,45 @@
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-Tag {
+  min-height: 1.25rem;
+  padding: var(--p-space-025) var(--p-space-200);
+  border-radius: var(--p-border-radius-tag);
+  background-color: var(--p-color-bg-fill-transparent);
+  color: var(--p-color-text-secondary);
+  font-size: var(--p-font-size-300);
+  font-weight: var(--p-font-weight-medium);
+  line-height: 1.125rem;
+  letter-spacing: -0.005em;
+
+  /* The remove button fills the height, so it replaces the vertical padding. */
+  &.Polaris-Tag--removable {
+    padding-block: 0;
+    padding-right: var(--p-space-050);
+  }
+
+  &.Polaris-Tag--clickable,
+  &.Polaris-Tag--linkable {
+    &:hover {
+      background: var(--p-color-bg-fill-transparent-hover);
+    }
+
+    &:active {
+      background: var(--p-color-bg-fill-transparent-active);
+    }
+  }
+
+  &.Polaris-Tag--disabled {
+    background: var(--p-color-bg-fill-disabled);
+    color: var(--p-color-text-disabled);
+  }
+
+  .Polaris-Tag__Button {
+    border-radius: var(--p-border-radius-full);
+
+    svg {
+      fill: var(--p-color-icon-secondary);
+    }
+
+    &:hover {
+      background: var(--p-color-bg-fill-transparent-hover);
+    }
+  }
+}

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

@@ -3,3 +3,229 @@ html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField {
     display: block;
   }
 }
+
+/* Labels and help text */
+html[class~="Polaris-Summer-Editions-2023"] {
+  .Polaris-Label__Text,
+  .Polaris-ChoiceList__Title,
+  .Polaris-VerticalStack--fieldsetReset > legend,
+  .Polaris-Labelled__LabelWrapper .Polaris-Label {
+    font-weight: var(--p-font-weight-medium);
+  }
+
+  .Polaris-Labelled__LabelWrapper {
+    margin-bottom: var(--p-space-150);
+  }
+
+  .Polaris-Labelled__HelpText {
+    margin-top: var(--p-space-150);
+  }
+
+  .Polaris-Labelled__HelpText,
+  .Polaris-Choice__HelpText {
+    color: var(--p-color-text-secondary);
+    font-size: var(--p-font-size-300);
+    line-height: 1.125rem;
+    letter-spacing: -0.005em;
+
+    .Polaris-Text--root {
+      font-size: inherit;
+      line-height: inherit;
+    }
+  }
+
+  .Polaris-InlineError {
+    color: var(--p-color-text-critical);
+    font-size: var(--p-font-size-300);
+    line-height: 1.125rem;
+    letter-spacing: -0.005em;
+
+    .Polaris-Text--root {
+      font-size: inherit;
+      line-height: inherit;
+    }
+  }
+
+  .Polaris-InlineError__Icon {
+    fill: var(--p-color-text-critical);
+  }
+}
+
+/* Text field */
+html[class~="Polaris-Summer-Editions-2023"] {
+  .Polaris-TextField__Backdrop {
+    border: none;
+    border-radius: var(--p-border-radius-control);
+    background-color: var(--p-color-input-bg-surface);
+    box-shadow: var(--p-shadow-input);
+    transition: box-shadow var(--p-motion-duration-150) var(--p-motion-ease);
+
+    &::after {
+      content: none;
+    }
+  }
+
+  .Polaris-TextField__Input {
+    min-height: 1.875rem;
+    padding-top: 0.3125rem;
+    padding-bottom: 0.3125rem;
+    font-size: var(--p-font-size-325);
+    line-height: var(--p-font-line-height-500);
+  }
+
+  .Polaris-TextField__Input::placeholder {
+    color: var(--p-color-text-secondary);
+  }
+
+  /* Hover applies to the whole control, including prefixes and suffixes. */
+  @media (min-width: 48rem), (pointer: fine) {
+    .Polaris-TextField:not(.Polaris-TextField--disabled, .Polaris-TextField--readOnly):hover > .Polaris-TextField__Backdrop,
+    .Polaris-TextField:not(.Polaris-TextField--disabled):not(.Polaris-TextField--error):not(.Polaris-TextField--readOnly) > .Polaris-TextField__Input:hover:not(:focus-visible) ~ .Polaris-TextField__Backdrop {
+      background-color: var(--p-color-bg-surface-hover);
+      border: none;
+      box-shadow: var(--p-shadow-input);
+    }
+
+    .Polaris-TextField--error:not(.Polaris-TextField--disabled, .Polaris-TextField--readOnly):hover > .Polaris-TextField__Backdrop,
+    .Polaris-TextField--error .Polaris-TextField__Input:hover ~ .Polaris-TextField__Backdrop {
+      background-color: var(--p-color-bg-surface-hover);
+      box-shadow: var(--p-shadow-input-critical);
+    }
+  }
+
+  .Polaris-TextField:not(.Polaris-TextField--disabled, .Polaris-TextField--readOnly):is(.Polaris-TextField--focus, :focus-within) > .Polaris-TextField__Backdrop {
+    border: none;
+    outline: none;
+    background-color: var(--p-color-input-bg-surface-active);
+    box-shadow: var(--p-shadow-input-focus);
+  }
+
+  .Polaris-TextField--error > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop {
+    border: none;
+    background-color: var(--p-color-input-bg-surface);
+    box-shadow: var(--p-shadow-input-critical);
+  }
+
+  .Polaris-TextField--multiline > .Polaris-TextField__Input {
+    padding-top: var(--p-space-150);
+    padding-bottom: var(--p-space-150);
+  }
+
+  /* Labels of disabled fields are dimmed along with the field. */
+  .Polaris-Labelled__LabelWrapper:has(
+    + .Polaris-Connected > .Polaris-Connected__Item--primary > .Polaris-TextField--disabled,
+    + .Polaris-Select--disabled
+  ) .Polaris-Label__Text {
+    color: var(--p-color-text-disabled);
+  }
+
+  .Polaris-TextField--error:not(.Polaris-TextField--disabled, .Polaris-TextField--readOnly):is(.Polaris-TextField--focus, :focus-within) > .Polaris-TextField__Backdrop {
+    background-color: var(--p-color-input-bg-surface-active);
+    box-shadow: var(--p-shadow-input-critical-focus);
+  }
+
+  .Polaris-TextField--disabled > .Polaris-TextField__Backdrop {
+    background-color: var(--p-color-input-bg-surface);
+    box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
+  }
+
+  .Polaris-TextField--readOnly > .Polaris-TextField__Backdrop {
+    background-color: var(--p-color-bg-surface-disabled);
+    box-shadow: none;
+  }
+
+  .Polaris-TextField--readOnly .Polaris-TextField__Input {
+    color: var(--p-color-text-secondary);
+  }
+
+  .Polaris-TextField--readOnly > .Polaris-TextField__Input:focus-visible ~ .Polaris-TextField__Backdrop {
+    border: none;
+    outline: none;
+    box-shadow: var(--p-shadow-input-focus);
+  }
+
+  .Polaris-TextField__Prefix,
+  .Polaris-TextField__Suffix {
+    color: var(--p-color-text-secondary);
+  }
+
+  .Polaris-TextField__Prefix {
+    margin-right: var(--p-space-100);
+  }
+
+  .Polaris-TextField__Suffix {
+    margin-left: var(--p-space-100);
+  }
+
+  .Polaris-TextField--disabled .Polaris-TextField__Input::placeholder,
+  .Polaris-TextField--disabled .Polaris-TextField__Prefix,
+  .Polaris-TextField--disabled .Polaris-TextField__Suffix {
+    color: var(--p-color-text-disabled);
+  }
+
+  .Polaris-TextField__Spinner {
+    margin: var(--p-space-100);
+  }
+
+  .Polaris-TextField__Segment {
+    border-radius: var(--p-border-radius-150);
+  }
+}
+
+/* Select */
+html[class~="Polaris-Summer-Editions-2023"] {
+  .Polaris-Select__Backdrop {
+    border: none;
+    border-radius: var(--p-border-radius-control);
+    background-color: var(--p-color-input-bg-surface);
+    box-shadow: var(--p-shadow-input);
+
+    &::after {
+      content: none;
+    }
+  }
+
+  .Polaris-Select__Content {
+    min-height: 1.875rem;
+    padding: 0.3125rem var(--p-space-200) 0.3125rem var(--p-space-300);
+    font-size: var(--p-font-size-325);
+    line-height: var(--p-font-line-height-500);
+  }
+
+  .Polaris-Select__Icon svg {
+    fill: #707070;
+  }
+
+  .Polaris-Select:not(.Polaris-Select--disabled):not(.Polaris-Select--error):hover .Polaris-Select__Backdrop {
+    border: none;
+    background-color: var(--p-color-input-bg-surface-hover);
+    box-shadow: var(--p-shadow-input);
+  }
+
+  .Polaris-Select:not(.Polaris-Select--disabled):not(.Polaris-Select--error):focus-within .Polaris-Select__Backdrop {
+    border: none;
+    outline: none;
+    background-color: var(--p-color-input-bg-surface-active);
+    box-shadow: var(--p-shadow-input-focus);
+  }
+
+  .Polaris-Select--error .Polaris-Select__Backdrop {
+    border: none;
+    background-color: var(--p-color-input-bg-surface);
+    box-shadow: var(--p-shadow-input-critical);
+  }
+
+  .Polaris-Select--error:not(.Polaris-Select--disabled):hover .Polaris-Select__Backdrop {
+    background-color: var(--p-color-input-bg-surface-hover);
+  }
+
+  .Polaris-Select--error:not(.Polaris-Select--disabled):focus-within .Polaris-Select__Backdrop {
+    background-color: var(--p-color-input-bg-surface-active);
+    box-shadow: var(--p-shadow-input-critical-focus);
+  }
+
+  .Polaris-Select--disabled .Polaris-Select__Backdrop {
+    background-color: var(--p-color-input-bg-surface);
+    box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
+  }
+}