RadioButton consolidate se23 styles

Shopify · Aug 15, 2023 · be9d55a · be9d55a
1 parent 700a72f
commit be9d55a
Showing 1 changed file with 22 additions and 58 deletions.
diff --git a/polaris-react/src/components/RadioButton/RadioButton.scss b/polaris-react/src/components/RadioButton/RadioButton.scss
@@ -11,16 +11,9 @@
   @include visually-hidden;
 
   &:focus-visible + .Backdrop {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    @include focus-ring($style: 'focused');
-
-    #{$se23} & {
-      /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 radio overrides */
-      @include no-focus-ring;
-      outline: var(--p-border-width-2) solid
-        var(--p-color-border-interactive-focus);
-      outline-offset: var(--p-space-025);
-    }
+    outline: var(--p-border-width-2) solid
+      var(--p-color-border-interactive-focus);
+    outline-offset: var(--p-space-025);
 
     &::after {
       border-radius: var(--p-border-radius-full);
@@ -37,14 +30,10 @@
       border-color: var(--p-color-border-interactive);
 
       &::before {
-        #{$se23} & {
-          background-color: var(--p-color-icon-on-color);
-          transition: opacity var(--p-motion-duration-150)
-              var(--p-motion-ease-out),
-            transform var(--p-motion-duration-150) var(--p-motion-ease-out);
-        }
-        transition: opacity var(--p-motion-duration-150) var(--p-motion-ease),
-          transform var(--p-motion-duration-150) var(--p-motion-ease);
+        background-color: var(--p-color-icon-on-color);
+        transition: opacity var(--p-motion-duration-150)
+            var(--p-motion-ease-out),
+          transform var(--p-motion-duration-150) var(--p-motion-ease-out);
         opacity: 1;
         transform: translate(-50%, -50%) scale(1);
       }
@@ -54,44 +43,32 @@
   &:checked:not([disabled]) + .Backdrop {
     &,
     .ChoiceLabel:hover & {
-      #{$se23} & {
-        background-color: var(--p-color-bg-primary);
-        border-color: var(--p-color-border-input-active-experimental);
-      }
+      background-color: var(--p-color-bg-primary);
+      border-color: var(--p-color-border-input-active-experimental);
     }
   }
 
   + .Backdrop {
     .ChoiceLabel:hover & {
       cursor: pointer;
       border-color: var(--p-color-border-input-hover);
-      #{$se23} & {
-        background: var(--p-color-bg-input-hover-experimental);
-      }
+      background: var(--p-color-bg-input-hover-experimental);
     }
 
     .ChoiceLabel:active & {
-      #{$se23} & {
-        border-color: var(--p-color-bg-primary);
-        border-width: var(--p-border-width-2);
-      }
+      border-color: var(--p-color-bg-primary);
+      border-width: var(--p-border-width-2);
     }
   }
 
   &:disabled + .Backdrop {
     &,
     .ChoiceLabel:hover & {
-      border-color: var(--p-color-border-disabled);
       cursor: default;
-      #{$se23} & {
-        background-color: var(
-          --p-color-bg-transparent-secondary-disabled-experimental
-        );
-        border: none;
-        // Duplicating this rule due to the specificity of the se23 selector
-        // in earlier rules blasting it away.
-        cursor: default;
-      }
+      background-color: var(
+        --p-color-bg-transparent-secondary-disabled-experimental
+      );
+      border: none;
 
       &::before {
         background-color: var(--p-color-border-disabled);
@@ -102,26 +79,13 @@
   &:disabled:checked + .Backdrop::before {
     &,
     .ChoiceLabel:hover & {
-      #{$se23} & {
-        background-color: var(--p-color-icon-on-color);
-      }
+      background-color: var(--p-color-icon-on-color);
     }
   }
 }
 /* stylelint-enable selector-max-specificity, selector-max-class, selector-max-combinators */
 
 .Backdrop {
-  #{$se23} & {
-    border-width: var(--p-border-width-1-experimental);
-    background-color: var(--p-color-bg-input);
-    transition: border-color var(--p-motion-duration-100)
-      var(--p-motion-ease-out);
-
-    &::before {
-      transition: opacity var(--p-motion-duration-100) var(--p-motion-ease-out),
-        transform var(--p-motion-duration-100) var(--p-motion-ease-out);
-    }
-  }
   // stylelint-disable-next-line -- Polaris component custom properties
   --pc-icon-size-small: 8px;
 
@@ -137,10 +101,10 @@
   display: block;
   width: 100%;
   height: 100%;
-  border: var(--p-border-width-2) solid var(--p-color-border-input);
+  border: var(--p-border-width-1-experimental) solid var(--p-color-border-input);
   border-radius: var(--p-border-radius-full);
-  background-color: var(--p-color-bg);
-  transition: border-color var(--p-motion-duration-100) var(--p-motion-ease);
+  background-color: var(--p-color-bg-input);
+  transition: border-color var(--p-motion-duration-100) var(--p-motion-ease-out);
 
   &::before {
     content: '';
@@ -156,8 +120,8 @@
     width: var(--pc-icon-size-small);
     background-color: var(--p-color-bg-interactive);
     border-radius: var(--p-border-radius-full);
-    transition: opacity var(--p-motion-duration-100) var(--p-motion-ease),
-      transform var(--p-motion-duration-100) var(--p-motion-ease);
+    transition: opacity var(--p-motion-duration-100) var(--p-motion-ease-out),
+      transform var(--p-motion-duration-100) var(--p-motion-ease-out);
 
     @media (forced-colors: active) {
       border: var(--p-border-width-5) solid transparent;