[Frame][ContextualSaveBar] Consolidate se23 styles and logic

Author: sophschneider

polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss

@@ -71,27 +71,28 @@
   flex-direction: row;
   gap: var(--p-space-2);
 
-  #{$se23} & [class*='Polaris-Icon__Svg'],
-  #{$se23} & [class*='Icon-Svg'] {
+  // stylelint-disable -- Icon overrides specific to Contextual Save Bar
+  & [class*='Polaris-Icon__Svg'],
+  & [class*='Icon-Svg'] {
     fill: var(--p-color-text-inverse);
   }
 }
 
 .ActionContainer {
   flex-shrink: 0;
 
-  // Button overrides specific to Contextual Save Bar
-  /* stylelint-disable -- summer edition overrides */
-  #{$se23} & [class*='Polaris-Button--primary'],
-  #{$se23} & [class*='Button-primary'] {
+  & [class*='Polaris-Button--primary'],
+  & [class*='Button-primary'] {
     --pc-color-text: rgba(48, 48, 48, 1);
     --pc-button-text: var(--pc-color-text);
     --pc-button-color: rgba(255, 255, 255, 1);
     --pc-button-color-hover: rgba(250, 250, 250, 1);
     --pc-button-color-active: rgba(247, 247, 247, 1);
     --pc-button-color-depressed: rgba(247, 247, 247, 1);
-    --pc-button-color-disabled:  rgba(255, 255, 255, 0.2);
-    --pc-button-shadow-inset: 0px 2px 1px 0px rgba(26, 26, 26, 0.2) inset, 1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset, -1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset;
+    --pc-button-color-disabled: rgba(255, 255, 255, 0.2);
+    --pc-button-shadow-inset: 0px 2px 1px 0px rgba(26, 26, 26, 0.2) inset,
+      1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset,
+      -1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset;
 
     &::before {
       top: 0;
@@ -115,21 +116,21 @@
     }
 
     &[class*='Polaris-Button--disabled'],
-    &[class*='Button-disabled']{
+    &[class*='Button-disabled'] {
       --pc-button-text: var(--p-color-text-subdued);
       background: var(--pc-button-color-disabled);
     }
   }
 
-  #{$se23} & [class*='Polaris-Button--tertiary'],
-  #{$se23} & [class*='Button-tertiary'] {
+  & [class*='Polaris-Button--tertiary'],
+  & [class*='Button-tertiary'] {
     --pc-button-color: var(--p-color-bg-inset-strong);
     --pc-button-color-hover: var(--p-color-bg-inverse-hover);
     --pc-button-color-active: var(--p-color-bg-inverse-active);
     --pc-button-text: var(--p-color-text-inverse);
 
     &::after {
-     content: none;
+      content: none;
     }
 
     &:hover {

polaris-react/src/components/Frame/components/Loading/Loading.scss

@@ -11,13 +11,9 @@
   width: 100%;
   height: 100%;
   transform-origin: 0;
-  background-color: var(--p-color-icon-success);
+  background-color: var(--p-color-bg-primary);
   transition: transform var(--p-motion-duration-500) linear;
 
-  #{$se23} & {
-    background-color: var(--p-color-bg-primary);
-  }
-
   @media screen and (-ms-high-contrast: active) {
     background-color: highlight;
   }

polaris-react/src/components/Frame/components/Toast/Toast.scss

@@ -12,12 +12,10 @@ $Backdrop-opacity: 0.88;
   margin-bottom: var(--p-space-5);
   box-shadow: var(--p-shadow-xl);
 
-  #{$se23} & {
-    @include shadow-bevel(
-      $boxShadow: var(--p-shadow-lg),
-      $borderRadius: var(--p-border-radius-2)
-    );
-  }
+  @include shadow-bevel(
+    $boxShadow: var(--p-shadow-lg),
+    $borderRadius: var(--p-border-radius-2)
+  );
 
   @media #{$p-breakpoints-sm-up} {
     padding: var(--p-space-3);
@@ -29,12 +27,8 @@ $Backdrop-opacity: 0.88;
 }
 
 .Action {
-  margin-left: var(--p-space-2);
+  margin-left: var(--p-space-4);
   color: var(--p-color-text-on-color);
-
-  #{$se23} & {
-    margin-left: var(--p-space-4);
-  }
 }
 
 .error {
@@ -43,19 +37,11 @@ $Backdrop-opacity: 0.88;
 
   .CloseButton {
     color: var(--p-color-icon-on-color);
-
-    #{$se23} & {
-      color: var(--p-color-icon-on-color);
-    }
   }
 }
 
 .LeadingIcon {
-  margin-right: var(--p-space-2);
-
-  #{$se23} & {
-    margin-right: var(--p-space-1_5-experimental);
-  }
+  margin-right: var(--p-space-1_5-experimental);
 
   svg {
     fill: currentColor;
@@ -71,14 +57,10 @@ $Backdrop-opacity: 0.88;
   border: none;
   appearance: none;
   background: transparent;
-  color: var(--p-color-icon-subdued);
+  color: var(--p-color-icon-inverse);
   cursor: pointer;
   margin-left: var(--p-space-2);
 
-  #{$se23} & {
-    color: var(--p-color-icon-inverse);
-  }
-
   svg {
     fill: currentColor;
   }