polaris_view_components 1.4.5 → 2.0.0

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

@@ -0,0 +1,98 @@
+/* Polaris no longer uses different button styling depending on the context,
+   so we can override all buttons at once. */
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button {
+  &:not(.Polaris-Button--plain) {
+    &:hover {
+      box-shadow: var(--pc-button-shadow-hover);
+      border: none;
+    }
+  }
+
+  /* IconOnly */
+  &.Polaris-Button--iconOnly {
+    padding: var(--p-space-150) var(--p-space-100);
+  }
+
+  /* Dimsiss buttons */
+  &.Polaris-Button--plain.Polaris-Button--iconOnly {
+    padding: var(--p-space-100);
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.05) !important;
+      box-shadow: none !important;
+    }
+
+    svg {
+      fill: var(--p-color-icon);
+    }
+  }
+
+  /* Plain */
+  &.Polaris-Button--plain {
+    box-shadow: none !important;
+  }
+
+  /* Tertiary */
+  &.Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--removeUnderline {
+    &>.Polaris-Button__Content {
+      font-size: var(--p-font-size-300);
+      font-weight: var(--p-font-weight-medium) !important;
+    }
+
+    &:hover {
+      background: var(--p-color-bg-fill-tertiary);
+    }
+  }
+
+  /* Loading */
+  &.Polaris-Button--loading {
+    svg {
+      fill: var(--p-color-icon-disabled);
+    }
+  }
+
+  /* Destructive */
+  &.Polaris-Button--destructive {
+    --pc-button-color: var(--p-color-bg-fill-critical);
+    --pc-button-text: var(--p-color-bg-surface);
+    --pc-button-color-hover: var(--p-color-bg-fill-critical-hover);
+    --pc-button-color-active: var(--p-color-bg-fill-critical-active);
+    --pc-button-color-depressed: var(--p-color-bg-fill-critical-selected);
+    box-shadow: var(--p-shadow-button-primary-critical);
+  }
+
+  /* Primary */
+  &.Polaris-Button--primary {
+    --pc-button-bg-gradient: var(--p-color-button-gradient-bg-fill);
+    --pc-button-color: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand);
+    --pc-button-text: var(--p-color-bg-surface);
+    --pc-button-color-hover: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-hover);
+    --pc-button-color-active: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-active);
+    --pc-button-color-depressed: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-selected);
+
+    &:hover {
+      --pc-button-text: var(--p-color-bg-surface);
+    }
+    &:active {
+      box-shadow: var(--pc-button-box-shadow_active);
+    }
+  }
+}
+
+@media (max-width: 767px) {
+
+  html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:not(.Polaris-Button--monochrome.Polaris-Button--plain),
+  html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--removeUnderline {
+    &>.Polaris-Button__Content {
+      font-size: var(--p-font-size-350) !important;
+      line-height: var(--p-font-line-height-500) !important;
+    }
+  }
+
+  html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button:not(.Polaris-Button--monochrome.Polaris-Button--plain):not(.Polaris-Button--disclosure.Polaris-Button--plain),
+  html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--monochrome.Polaris-Button--plain.Polaris-Button--removeUnderline {
+    &>.Polaris-Button__Content {
+      font-weight: var(--p-font-weight-semibold) !important;
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-CalloutCard__Container {
+  .Polaris-CalloutCard__Dismiss {
+    display: flex;
+    width: 1.75rem;
+    height: 1.75rem;
+    right: var(--p-space-300);
+    top: var(--p-space-300);
+  }
+}

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

@@ -0,0 +1,41 @@
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard {
+  .Polaris-LegacyCard__Header {
+    padding-top: var(--p-space-400);
+  }
+
+  .Polaris-LegacyCard__Header+.Polaris-LegacyCard__Section {
+    padding-top: var(--p-space-200);
+  }
+
+  .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);
+    }
+
+    &.Polaris-LegacyCard__Section--flush {
+      padding: 0;
+
+      img {
+        border-top-left-radius: var(--p-border-radius-300);
+        border-top-right-radius: var(--p-border-radius-300);
+        width: 100%;
+      }
+    }
+  }
+
+  .Polaris-LegacyCard__Footer {
+    padding-top: var(--p-space-100);
+  }
+
+  &.Polaris-LegacyCard--withoutTitle {
+    .Polaris-LegacyCard__Section:first-child {
+      padding-top: var(--p-space-400);
+    }
+  }
+}

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

@@ -27,12 +27,24 @@ a.Polaris-Tag__Button {
   overflow: initial;
 }
 
-.Polaris-LegacyCard__Section--borderTop {
-  border-top: 0.1rem solid var(--p-color-border-subdued);
-}
+html[class~="Polaris-Summer-Editions-2023"] {
+  .Polaris-LegacyCard__Section--borderTop {
+    border-top: 0.1rem solid var(--p-color-border-subdued) !important;
+    padding-top: var(--p-space-300) !important;
+  }
+
+  .Polaris-LegacyCard__Section:has(+.Polaris-LegacyCard__Section--borderTop) {
+    padding-bottom: var(--p-space-300) !important;
+  }
+
+  .Polaris-LegacyCard__Section--borderBottom {
+    border-bottom: 0.1rem solid var(--p-color-border-subdued) !important;
+    padding-bottom: var(--p-space-300) !important;
 
-.Polaris-LegacyCard__Section--borderBottom {
-  border-bottom: 0.1rem solid var(--p-color-border-subdued);
+    & + .Polaris-LegacyCard__Section {
+      padding-top: var(--p-space-300) !important;
+    }
+  }
 }
 
 /* IndexTable */
@@ -65,9 +77,10 @@ a.Polaris-Tag__Button {
 }
 
 /* Filters */
-
 .Polaris-LegacyFilters-ConnectedFilterControl__RightContainer {
   .Polaris-LegacyFilters-ConnectedFilterControl__Item {
+    z-index: auto;
+
     & > div > div > button {
       margin-right: -1px;
       border-radius: 0;

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

@@ -0,0 +1,12 @@
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable {
+
+  .Polaris-DataTable__Cell:not(.Polaris-DataTable__Cell--flush):first-child,
+  .Polaris-DataTable__Heading:not(.Polaris-DataTable__Heading--flush):first-child {
+    padding-left: var(--p-space-400);
+  }
+
+  .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);
+  }
+}

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

@@ -0,0 +1,14 @@
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('InterVariable.woff2') format('woff2');
+}
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('InterVariable-Italic.woff2') format('woff2');
+}

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

@@ -0,0 +1,5 @@
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-FooterHelp {
+  .Polaris-FooterHelp__Text {
+    font-size: var(--p-font-size-325);
+  }
+}

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

@@ -0,0 +1,4 @@
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-FormLayout {
+  --pc-form-layout-gap: var(--p-space-400);
+  --pc-form-layout-item-top: calc(var(--p-space-400) - 2px);
+}

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

@@ -0,0 +1,12 @@
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-IndexTable {
+
+  .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);
+  }
+
+  .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);
+  }
+}

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

@@ -0,0 +1,5 @@
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-List {
+  .Polaris-List__Item:last-child {
+    margin-bottom: 0 !important;
+  }
+}

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

@@ -0,0 +1,5 @@
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-Modal-CloseButton {
+  &:hover {
+    background: var(--p-color-bg-fill-tertiary);
+  }
+}

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

@@ -0,0 +1,11 @@
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-Navigation {
+  .Polaris-Navigation__Item {
+    &.Polaris-Navigation__Item--selected {
+      background-color: var(--p-color-nav-bg-surface-selected) !important;
+    }
+
+    &:hover {
+      background-color: var(--p-color-bg-surface-tertiary);
+    }
+  }
+}

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

@@ -8,7 +8,15 @@
   }
 
   .Polaris-Navigation__Item {
-    padding-bottom: var(--p-space-1);
-    padding-top: var(--p-space-1);
+    padding-bottom: var(--p-space-05);
+    padding-top: var(--p-space-05);
+
+    &.Polaris-Navigation__Item--selected {
+      background-color: var(--p-color-bg-surface-tertiary-hover);
+    }
+
+    &:hover {
+      background-color: var(--p-color-bg-surface-tertiary);
+    }
   }
 }

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

@@ -0,0 +1,8 @@
+html[class~="Polaris-Summer-Editions-2023"] {
+  .Polaris-OptionList-Option__Checkbox {
+    .Polaris-Checkbox__Icon > svg {
+      fill: var(--p-color-text-brand-on-bg-fill);
+      color: var(--p-color-text-brand-on-bg-fill);
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+html[class~="Polaris-Summer-Editions-2023"] {
+  .Polaris-Page-Header {
+    font-weight: var(--p-font-weight-bold);
+  }
+
+  .Polaris-Page-Header--smallTitle .Polaris-Header-Title {
+    font-size: var(--p-font-size-300);
+    line-height: var(--p-font-line-height-400);
+  }
+
+  .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--largeTitle .Polaris-Header-Title {
+    font-size: var(--p-font-size-500);
+    line-height: var(--p-font-line-height-600);
+  }
+}

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

@@ -0,0 +1,13 @@
+html[class~="Polaris-Summer-Editions-2023"] [aria-label='Pagination'] {
+  .Polaris-Button {
+    background-color: var(--p-color-bg-fill-tertiary);
+    border: none !important;
+    box-shadow: none;
+
+    &:hover {
+      background-color: var(--p-color-bg-fill-tertiary-hover);
+      box-shadow: none;
+      border: none;
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-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);
+  }
+  .Polaris-Popover__Content .Polaris-Popover__Pane:last-child > .Polaris-Popover__Section > .Polaris-Box {
+    padding: var(--p-space-300) var(--p-space-300);
+  }
+}

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

@@ -0,0 +1,46 @@
+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);
+  box-shadow: none;
+
+  &:hover {
+    background: var(--p-color-bg-fill-inverse-hover);
+    color: var(--p-color-text-inverse);
+    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;
+
+    &:hover {
+      background: var(--p-color-bg-fill-hover);
+    }
+
+    &:before,
+    &:after {
+      box-shadow: none;
+    }
+
+    &.Polaris-Button--disabled {
+      background: #616161;
+      color: #303030;
+      box-shadow: none;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      user-select: none;
+      pointer-events: none;
+    }
+  }
+}

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

@@ -99,7 +99,7 @@
   font-weight: 400;
   color: var(--p-color-text);
   text-decoration: none;
-  border-bottom: 3px solid var(--p-color-bg-primary);
+  border-bottom: 3px solid var(--p-color-bg-fill-tertiary-hover);
 }
 
 .shp-Navigation_Link:focus .shp-Navigation_LinkText {

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

@@ -0,0 +1,7 @@
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyTabs__Wrapper {
+  margin-bottom: var(--p-space-200);
+
+  &:has(+.Polaris-IndexTable) {
+    margin-bottom: 0 !important;
+  }
+}

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

@@ -0,0 +1,5 @@
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-TextField {
+  input[type="date"], input[type="time"] {
+    display: block;
+  }
+}

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

@@ -3,8 +3,9 @@
   position: absolute;
   top: 0;
   left: 0;
+  z-index: var(--p-z-index-2);
   opacity: 1;
-  box-shadow: var(--p-shadow-lg);
+  filter: drop-shadow(rgba(0, 0, 0, 0.3) 0 2px 5px);
   border-radius: var(--p-border-radius-2);
   pointer-events: none;
   -webkit-backface-visibility: hidden;

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

@@ -0,0 +1,19 @@
+html.Polaris-Summer-Editions-2023 {
+  --p-font-size-300: 0.75rem;
+  --p-font-size-400: 1rem;
+  --p-font-size-500: 1.25rem;
+  --p-font-weight-regular: 450;
+  --p-font-weight-medium: 550;
+  --p-font-weight-semibold: 650;
+  --p-font-weight-bold: 700;
+
+  --p-space-1_5: var(--p-space-1_5-experimental);
+  --pc-stack-spacing: var(--p-space-300);
+
+  --p-color-bg-surface-secondary: rgba(247, 247, 247, 1);
+  --p-color-bg-inverse: #1a1a1a;
+  --p-color-bg-fill-inverse: #303030
+  --p-color-icon: rgba(74, 74, 74, 1);
+  --p-color-border: rgba(235, 235, 235, 1);
+  --p-color-button-gradient-bg-fill: linear-gradient(180deg,rgba(48,48,48,0) 63.53%,hsla(0,0%,100%,.15));
+}