Clean up styles/shared/*.scss

.changeset/sharp-elephants-deliver.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Remove unused shared scss functions and move low usage or low value functions into components

polaris-react/src/components/ActionList/ActionList.scss

@@ -35,9 +35,11 @@
   }
 
   &:active {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    @include recolor-icon(var(--p-interactive));
     background-color: var(--p-surface-pressed);
+
+    svg {
+      fill: var(--p-interactive);
+    }
   }
 
   &:focus-visible:not(:active) {
@@ -51,21 +53,25 @@
   }
 
   &.active {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    @include recolor-icon(var(--p-interactive));
     background-color: var(--p-surface-selected);
 
+    svg {
+      fill: var(--p-interactive);
+    }
+
     &::before {
       // stylelint-disable-next-line -- alignment for left tab style https://github.com/Shopify/polaris/pull/3619
       @include list-selected-indicator;
     }
   }
 
   &.destructive {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    @include recolor-icon(var(--p-icon-critical));
     color: var(--p-interactive-critical);
 
+    svg {
+      fill: var(--p-icon-critical);
+    }
+
     &:hover {
       background-color: var(--p-surface-critical-subdued-hovered);
     }
@@ -81,18 +87,15 @@
     background-image: none;
     color: var(--p-text-disabled);
 
-    // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
-    .Prefix,
-    .Suffix {
-      // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-      @include recolor-icon(var(--p-icon-disabled));
+    // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
+    .Prefix svg,
+    .Suffix svg {
+      fill: var(--p-icon-disabled);
     }
   }
 }
 
 .Prefix {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include recolor-icon(var(--p-icon));
   display: flex;
   flex: 0 0 auto;
   justify-content: center;
@@ -111,15 +114,18 @@
   // stylelint-enable
   background-size: cover;
   background-position: center center;
+
+  svg {
+    fill: var(--p-icon);
+  }
 }
 
-.Suffix {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include recolor-icon(var(--p-icon));
+.Suffix svg {
+  fill: var(--p-icon);
 }
 
 .Text {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include layout-flex-fix;
+  min-width: 0;
+  max-width: 100%;
   flex: 1 1 auto;
 }

polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss

@@ -34,10 +34,13 @@
   &.destructive {
     a,
     button {
-      // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-      @include recolor-icon(var(--p-icon-critical));
       color: var(--p-interactive-critical);
 
+      // stylelint-disable-next-line selector-max-combinators, selector-max-type -- generated by polaris-migrator DO NOT COPY
+      svg {
+        fill: var(--p-icon-critical);
+      }
+
       // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
       &:hover {
         background-color: var(--p-surface-critical-subdued-hovered) !important;

polaris-react/src/components/AppProvider/AppProvider.scss

@@ -16,7 +16,8 @@ body {
   letter-spacing: initial;
 
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include text-emphasis-normal;
+  font-weight: var(--p-font-weight-regular);
+  color: var(--p-text);
 }
 
 html,

polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss

@@ -14,7 +14,9 @@
 [data-focused] {
   .Action {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    @include recolor-icon(var(--p-interactive));
+    svg {
+      fill: var(--p-interactive);
+    }
 
     &.destructive {
       background-color: var(--p-surface-critical-subdued-pressed);
@@ -46,15 +48,19 @@
   }
 
   &.selected {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    @include recolor-icon(var(--p-interactive));
     background-color: var(--p-surface-selected);
+
+    svg {
+      fill: var(--p-interactive);
+    }
   }
 
   &:active {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    @include recolor-icon(var(--p-interactive));
     background-color: var(--p-surface-pressed);
+
+    svg {
+      fill: var(--p-interactive);
+    }
   }
 
   &:focus-visible:not(:active) {
@@ -63,10 +69,12 @@
   }
 
   &.destructive {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    @include recolor-icon(var(--p-icon-critical));
     color: var(--p-interactive-critical);
 
+    svg {
+      fill: var(--p-icon-critical);
+    }
+
     &:hover {
       background-color: var(--p-surface-critical-subdued-hovered);
     }
@@ -82,11 +90,10 @@
     background-image: none;
     color: var(--p-text-disabled);
 
-    // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
-    .Prefix,
-    .Suffix {
-      // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-      @include recolor-icon(var(--p-icon-disabled));
+    // stylelint-disable-next-line selector-max-class, selector-max-specificity, selector-max-combinators -- generated by polaris-migrator DO NOT COPY
+    .Prefix svg,
+    .Suffix svg {
+      fill: var(--p-icon-disabled);
     }
   }
 }
@@ -97,8 +104,6 @@
 }
 
 .Prefix {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include recolor-icon(var(--p-icon));
   display: flex;
   flex: 0 0 auto;
   justify-content: center;
@@ -117,17 +122,23 @@
   // stylelint-enable
   background-size: cover;
   background-position: center center;
+
+  svg {
+    fill: var(--p-icon);
+  }
 }
 
 .Suffix {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include recolor-icon(var(--p-icon));
   margin-left: var(--p-space-4);
+
+  svg {
+    fill: var(--p-icon);
+  }
 }
 
 .Text {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include layout-flex-fix;
+  min-width: 0;
+  max-width: 100%;
   flex: 1 1 auto;
 
   .ContentWrap {

polaris-react/src/components/Autocomplete/components/MappedOption/MappedOption.scss

@@ -10,15 +10,19 @@
 
 .Media {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include recolor-icon(var(--p-icon), var(--p-icon-on-interactive));
   padding: 0 var(--p-space-2);
+
+  svg {
+    fill: var(--p-icon);
+    color: var(--p-icon-on-interactive);
+  }
 }
 
 .singleSelectionMedia {
   padding: 0 var(--p-space-2) 0 0;
 }
 
-.disabledMedia {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include recolor-icon(var(--p-icon-disabled), var(--p-text-on-interactive));
+.disabledMedia svg {
+  fill: var(--p-icon-disabled);
+  color: var(--p-text-on-interactive);
 }

polaris-react/src/components/Banner/Banner.scss

@@ -219,11 +219,13 @@
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include plain-button-backdrop;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    @include high-contrast-button-outline;
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($style: 'focused');
     box-shadow: none;
     text-decoration: underline;
+
+    @media (-ms-high-contrast: active) {
+      outline: var(--p-border-width-2) dotted;
+    }
   }
 
   &:visited {

polaris-react/src/components/Breadcrumbs/Breadcrumbs.scss

@@ -33,9 +33,9 @@
     color: var(--p-text);
     text-decoration: none;
 
-    .Icon {
-      // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-      @include recolor-icon(var(--p-icon-pressed));
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+    .Icon svg {
+      fill: var(--p-icon-pressed);
     }
   }
 
@@ -59,8 +59,6 @@
   // stylelint-disable-next-line -- Polaris component custom properties
   --pc-breadcrumbs-icon-size: 20px;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include recolor-icon(var(--p-icon));
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   width: var(--pc-breadcrumbs-icon-size);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   height: var(--pc-breadcrumbs-icon-size);
@@ -69,4 +67,8 @@
     calc(-0.5 * var(--pc-breadcrumbs-icon-size)) calc(-1 * var(--p-space-2));
   // stylelint-enable
   margin: 0;
+
+  svg {
+    fill: var(--p-icon);
+  }
 }