Select consolidate se23 styles

Shopify · Aug 17, 2023 · 2f75ee9 · 2f75ee9
1 parent d1e892d
commit 2f75ee9
Showing 1 changed file with 27 additions and 72 deletions.
diff --git a/polaris-react/src/components/Select/Select.scss b/polaris-react/src/components/Select/Select.scss
@@ -13,7 +13,7 @@
     display: none;
   }
 
-  #{$se23} &:not(.disabled):not(.error) {
+  &:not(.disabled):not(.error) {
     // stylelint-disable-next-line -- se23 overrides
     &:hover .Backdrop {
       border-color: var(--p-color-border-input-hover);
@@ -52,17 +52,10 @@
 
   .Backdrop {
     border-color: var(--p-color-border-disabled);
-
-    #{$se23} & {
-      background-color: var(--p-color-bg-transparent-disabled-experimental);
-    }
+    background-color: var(--p-color-bg-transparent-disabled-experimental);
 
     &::before {
-      background-color: var(--p-color-bg-disabled);
-
-      #{$se23} & {
-        background-color: var(--p-color-bg-input);
-      }
+      background-color: var(--p-color-bg-input);
     }
 
     &:hover {
@@ -82,22 +75,15 @@
   width: 100%;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   min-height: control-height();
-  // stylelint-disable -- generated by polaris-migrator DO NOT COPY
-  padding: control-vertical-padding() var(--p-space-2)
-    control-vertical-padding() var(--p-space-3);
-  // stylelint-enable
+  padding: var(--p-space-1_5-experimental) var(--p-space-2)
+    var(--p-space-1_5-experimental) var(--p-space-3);
 
-  #{$se23} & {
-    min-height: 32px;
-    font-size: var(--p-font-size-200);
-    line-height: var(--p-font-line-height-3);
-    padding: var(--p-space-1_5-experimental) var(--p-space-2)
-      var(--p-space-1_5-experimental) var(--p-space-3);
+  font-size: var(--p-font-size-200);
+  line-height: var(--p-font-line-height-3);
 
-    @media #{$p-breakpoints-md-up} {
-      line-height: var(--p-font-line-height-2);
-      font-size: var(--p-font-size-80-experimental);
-    }
+  @media #{$p-breakpoints-md-up} {
+    line-height: var(--p-font-line-height-2);
+    font-size: var(--p-font-size-80-experimental);
   }
 
   @media #{$p-breakpoints-md-down} {
@@ -121,11 +107,7 @@
 }
 
 .Icon svg {
-  fill: var(--p-color-icon);
-
-  #{$se23} & {
-    fill: var(--p-color-icon-subdued);
-  }
+  fill: var(--p-color-icon-subdued);
 }
 
 .Input {
@@ -161,33 +143,29 @@
   right: 0;
   bottom: 0;
   left: 0;
-  border: var(--p-border-width-1) solid var(--p-color-border-input);
-  border-radius: var(--p-border-radius-1);
-  background-color: var(--p-color-bg);
-  box-shadow: var(--p-shadow-sm);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include focus-ring($border-width: 1px);
+  border: var(--p-border-width-1-experimental) solid var(--p-color-border-input);
+  border-radius: var(--p-border-radius-2);
+  background-color: var(--p-color-bg-input);
   // stylelint-disable-next-line order/properties-order -- 'position' needs to sit below focus-ring since it will be overwritten with relative when the focus ring style is 'base'
   position: absolute;
+}
 
-  #{$se23} & {
-    background-color: var(--p-color-bg-input);
-    border-radius: var(--p-border-radius-2);
-    border-width: var(--p-border-width-1-experimental);
-    box-shadow: none;
+.Input:focus-visible {
+  ~ .Backdrop {
+    border-color: var(--p-color-border-input-active-experimental);
+    border-width: var(--p-border-width-2-experimental);
+    background-color: var(--p-color-bg-input-active-experimental);
+    outline: var(--p-border-width-2) solid
+      var(--p-color-border-interactive-focus);
+    outline-offset: var(--p-space-025);
   }
 }
 
 .error {
   .Backdrop {
-    border-color: var(--p-color-border-critical);
+    border-color: var(--p-color-border-critical-strong-experimental);
     background-color: var(--p-color-bg-critical-subdued);
 
-    #{$se23} & {
-      border-color: var(--p-color-border-critical-strong-experimental);
-      background-color: var(--p-color-bg-critical-subdued);
-    }
-
     // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
     &.hover,
     &:hover {
@@ -199,32 +177,9 @@
   // so that errors still have red borders.
   // stylelint-disable-next-line selector-max-combinators, selector-max-specificity, selector-max-class -- generated by polaris-migrator DO NOT COPY
   .Input:focus-visible ~ .Backdrop {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    @include focus-ring($style: 'focused');
-
-    #{$se23} & {
-      border-color: var(--p-color-border-critical-strong-experimental);
-      border-width: var(--p-border-width-2-experimental);
-      background-color: var(--p-color-bg-critical-subdued);
-    }
-  }
-}
-
-.Input:focus-visible {
-  ~ .Backdrop {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    @include focus-ring($style: 'focused');
-
-    #{$se23} & {
-      border-color: var(--p-color-border-input-active-experimental);
-      border-width: var(--p-border-width-2-experimental);
-      background-color: var(--p-color-bg-input-active-experimental);
-      // stylelint-disable-next-line -- se23
-      @include no-focus-ring;
-      outline: var(--p-border-width-2) solid
-        var(--p-color-border-interactive-focus);
-      outline-offset: var(--p-space-025);
-    }
+    border-color: var(--p-color-border-input-active-experimental);
+    border-width: var(--p-border-width-2-experimental);
+    background-color: var(--p-color-bg-critical-subdued);
   }
 }