Filters consolidate se23 styles

Author: gwyneplaine

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

@@ -78,9 +78,9 @@
 }
 
 .AddFilter {
-  background: var(--p-color-bg-subdued);
-  border-radius: var(--p-border-radius-6);
-  border: var(--p-color-border-subdued) dashed var(--p-border-width-1);
+  background: var(--p-color-bg-secondary-experimental);
+  border-radius: var(--p-border-radius-2);
+  border: var(--p-color-border) dashed var(--p-border-width-1);
   padding: 0 var(--p-space-2) 0 var(--p-space-3);
   height: 28px;
   cursor: pointer;
@@ -106,16 +106,24 @@
 
   &:hover,
   &:focus {
-    background: var(--p-color-bg-hover);
+    background: transparent;
     border-color: var(--p-color-border-hover);
 
     path {
       fill: var(--p-color-icon-hover);
     }
   }
 
+  &:hover {
+    border-style: solid;
+  }
+
+  &:focus {
+    outline-offset: var(--p-border-width-2);
+  }
+
   &:active {
-    background: var(--p-color-bg-active);
+    background: var(--p-color-bg-secondary-experimental);
     border-color: var(--p-color-border-hover);
   }
 
@@ -136,7 +144,7 @@
   }
 
   &::after {
-    border-radius: var(--p-border-radius-6);
+    border-radius: var(--p-border-radius-2);
   }
 
   span {
@@ -154,34 +162,6 @@
       width: var(--p-space-4);
     }
   }
-
-  #{$se23} & {
-    background: var(--p-color-bg-secondary-experimental);
-    border-radius: var(--p-border-radius-2);
-    border: var(--p-color-border) dashed var(--p-border-width-1);
-
-    &:hover {
-      background: transparent;
-      border-style: solid;
-    }
-
-    &:focus {
-      background: transparent;
-      outline-offset: var(--p-border-width-2);
-    }
-
-    &:active {
-      background: var(--p-color-bg-subdued);
-
-      #{$se23} & {
-        background: var(--p-color-bg-secondary-experimental);
-      }
-    }
-
-    &::after {
-      border-radius: var(--p-border-radius-2);
-    }
-  }
 }
 
 @media #{$p-breakpoints-md-down} {
@@ -247,32 +227,22 @@
 }
 
 .ClearAll {
-  margin-left: var(--p-space-1);
-
-  #{$se23} & {
-    margin-left: var(--p-space-2);
+  margin-left: var(--p-space-2);
 
-    // stylelint-disable-next-line -- se23 overrides
-    span {
-      font-size: var(--p-font-size-75);
-      font-weight: var(--p-font-weight-medium);
-    }
+  span {
+    font-size: var(--p-font-size-75);
+    font-weight: var(--p-font-weight-medium);
   }
 }
 
 @media #{$p-breakpoints-md-down} {
   .ClearAll {
-    margin-left: var(--p-space-2);
+    margin-left: 0;
     padding-right: var(--p-space-4);
 
-    #{$se23} & {
-      margin-left: 0;
-
-      // stylelint-disable-next-line -- se23 overrides
-      span {
-        font-size: var(--p-font-size-100);
-        font-weight: var(--p-font-weight-medium);
-      }
+    span {
+      font-size: var(--p-font-size-100);
+      font-weight: var(--p-font-weight-medium);
     }
   }
 

polaris-react/src/components/Filters/components/FilterPill/FilterPill.scss

@@ -1,9 +1,9 @@
 @import '../../../../styles/common';
 
 .FilterButton {
-  background: var(--p-color-bg-subdued);
-  border-radius: var(--p-border-radius-6);
-  border: var(--p-color-border-subdued) dashed var(--p-border-width-1);
+  background: var(--p-color-bg-secondary-experimental);
+  border-radius: var(--p-border-radius-2);
+  border: var(--p-color-border) dashed var(--p-border-width-1);
   cursor: pointer;
   color: var(--p-color-text);
 
@@ -26,6 +26,20 @@
     }
   }
 
+  &:hover,
+  &:active {
+    border-style: solid;
+  }
+
+  &:hover,
+  &:focus {
+    background: transparent;
+  }
+
+  &:active {
+    background: var(--p-color-bg-subdued);
+  }
+
   &.disabledFilterButton {
     background: var(--p-color-bg-disabled);
     border-color: var(--p-color-border-disabled);
@@ -36,58 +50,14 @@
   &.ActiveFilterButton {
     background: var(--p-color-bg);
     border-style: solid;
-  }
-
-  &::after {
-    border-radius: var(--p-border-radius-6);
-  }
-
-  #{$se23} & {
-    background: var(--p-color-bg-secondary-experimental);
-    border-radius: var(--p-border-radius-2);
-    border: var(--p-color-border) dashed var(--p-border-width-1);
-
-    &:hover,
-    &:active {
-      border-style: solid;
-    }
-
-    &:hover,
-    &:focus {
-      background: transparent;
-    }
 
     &:active {
       background: var(--p-color-bg-subdued);
-
-      #{$se23} & {
-        background: var(--p-color-bg-secondary-experimental);
-      }
-    }
-
-    &.disabledFilterButton {
-      background: var(--p-color-bg-disabled);
-      border-color: var(--p-color-border-disabled);
-      color: var(--p-color-text-disabled);
-      cursor: default;
-    }
-
-    &.ActiveFilterButton {
-      background: var(--p-color-bg);
-      border-style: solid;
-
-      &:active {
-        background: var(--p-color-bg-subdued);
-
-        #{$se23} & {
-          background: var(--p-color-bg-secondary-experimental);
-        }
-      }
     }
+  }
 
-    &::after {
-      border-radius: var(--p-border-radius-2);
-    }
+  &::after {
+    border-radius: var(--p-border-radius-2);
   }
 }
 
@@ -161,7 +131,7 @@
 }
 
 .ClearButtonWrapper {
-  #{$se23} & button {
+  button {
     min-height: 0;
     padding: 0;
     margin: 0;