[Checkbox] consolidates se23 styles and logic (#10015)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes #9927 <!-- link to issue if one exists -->

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

- Consolidate se23 logic
- Consolidate se23 styles
- Consolidate se23 logic in control-backdrop mixin 

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

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

@@ -6,37 +6,29 @@
 }
 
 .ChoiceLabel .Backdrop {
-  #{$se23} & {
-    border-width: 0;
-    box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
-      var(--p-color-border-input);
-    transition: border-color var(--p-motion-duration-100)
-        var(--p-motion-ease-out),
-      border-width var(--p-motion-duration-100) var(--p-motion-ease-out),
-      box-shadow var(--p-motion-duration-100) var(--p-motion-ease-out);
-
-    // This fixes artifacts caused by box-shadow in some browsers
-    transform: translate3d(0, 0, 0);
-  }
+  border-width: 0;
+  box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
+    var(--p-color-border-input);
+  transition: border-color var(--p-motion-duration-100) var(--p-motion-ease-out),
+    border-width var(--p-motion-duration-100) var(--p-motion-ease-out),
+    box-shadow var(--p-motion-duration-100) var(--p-motion-ease-out);
+
+  // This fixes artifacts caused by box-shadow in some browsers
+  transform: translate3d(0, 0, 0);
 }
 
 .ChoiceLabel:hover .Backdrop {
   border-color: var(--p-color-border-input-hover);
-
-  #{$se23} & {
-    box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
-      var(--p-color-border-input-hover);
-    background-color: var(--p-color-bg-input-hover-experimental);
-  }
+  box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
+    var(--p-color-border-input-hover);
+  background-color: var(--p-color-bg-input-hover-experimental);
 }
 
 .ChoiceLabel:active .Backdrop,
 .ChoiceLabel:checked .Backdrop {
-  #{$se23} & {
-    border-color: var(--p-color-bg-primary);
-    border-width: 0;
-    box-shadow: inset 0 0 0 var(--p-space-05) var(--p-color-bg-primary);
-  }
+  border-color: var(--p-color-bg-primary);
+  border-width: 0;
+  box-shadow: inset 0 0 0 var(--p-space-05) var(--p-color-bg-primary);
 }
 
 // stylelint-disable selector-max-specificity, selector-max-class -- Much easier to read the rules when written like this
@@ -64,29 +56,18 @@
     + .Backdrop {
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include control-backdrop(active);
-
-      #{$se23} & {
-        border-color: var(--p-color-bg-primary);
-        background-color: var(--p-color-bg-primary);
-        box-shadow: inset 0 0 0 var(--p-space-8) var(--p-color-bg-primary);
-      }
+      border-color: var(--p-color-bg-primary);
+      background-color: var(--p-color-bg-primary);
+      box-shadow: inset 0 0 0 var(--p-space-8) var(--p-color-bg-primary);
     }
 
     ~ .Icon {
-      transition: opacity var(--p-motion-duration-150) var(--p-motion-ease),
-        transform var(--p-motion-duration-150) var(--p-motion-ease);
-      transform: translate3d(-50%, -50%, 0) scale(1);
+      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;
 
-      #{$se23} & {
-        transition: opacity var(--p-motion-duration-150)
-            var(--p-motion-ease-out),
-          transform var(--p-motion-duration-150) var(--p-motion-ease-out);
-
-        // stylelint-disable-next-line selector-max-combinators, max-nesting-depth -- se23 override
-        &.animated {
-          transition: initial;
-        }
+      &.animated {
+        transition: initial;
       }
     }
   }
@@ -95,39 +76,29 @@
     + .Backdrop {
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include control-backdrop(disabled);
-      #{$se23} & {
-        // We set the border-color to transparent here
-        // in order for the background color to bleed all the way to the edge of the element.
-        border-color: transparent;
-        background-color: var(
-          --p-color-bg-transparent-secondary-disabled-experimental
-        );
-        box-shadow: none;
-
-        // stylelint-disable-next-line max-nesting-depth, selector-max-combinators -- se23
-        &::before {
-          background-color: transparent;
-        }
+      // We set the border-color to transparent here
+      // in order for the background color to bleed all the way to the edge of the element.
+      border-color: transparent;
+      background-color: var(
+        --p-color-bg-transparent-secondary-disabled-experimental
+      );
+      box-shadow: none;
+
+      &::before {
+        background-color: transparent;
       }
     }
   }
 
   &:disabled:checked,
   &:disabled.Input-indeterminate {
     + .Backdrop {
-      background: var(--p-color-border-disabled);
+      background-color: var(
+        --p-color-bg-transparent-secondary-disabled-experimental
+      );
 
       &::before {
-        background: var(--p-color-border-disabled);
-      }
-      #{$se23} & {
-        background-color: var(
-          --p-color-bg-transparent-secondary-disabled-experimental
-        );
-        // stylelint-disable-next-line max-nesting-depth, selector-max-combinators -- pse23 override
-        &::before {
-          background-color: transparent;
-        }
+        background-color: transparent;
       }
     }
   }
@@ -141,15 +112,8 @@
   display: block;
   width: 100%;
   height: 100%;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include focus-ring($border-width: var(--p-border-width-2));
 
-  #{$se23} & {
-    /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 override */
-    @include no-focus-ring;
-    border: var(--p-border-width-1-experimental) solid
-      var(--p-color-border-input);
-  }
+  border: var(--p-border-width-1-experimental) solid var(--p-color-border-input);
 
   &:hover {
     border-color: var(--p-color-border-input-hover);
@@ -158,48 +122,34 @@
 
 .Icon {
   position: absolute;
-  top: 50%;
-  left: 50%;
   transform-origin: 50% 50%;
   pointer-events: none;
-
-  transform: translate3d(-50%, -50%, 0) scale(0.25);
   opacity: 0;
-  transition: opacity var(--p-motion-duration-100) var(--p-motion-ease),
-    transform var(--p-motion-duration-100) var(--p-motion-ease);
-
-  #{$se23} & {
-    top: calc(-1 * var(--p-space-05));
-    left: calc(-1 * var(--p-space-05));
-    bottom: calc(-1 * var(--p-space-05));
-    right: calc(-1 * var(--p-space-05));
-    /* stylelint-disable-next-line  -- se23 override */
-    transform: none !important;
-
-    transition: opacity var(--p-motion-duration-100) var(--p-motion-ease-out),
-      transform var(--p-motion-duration-100) var(--p-motion-ease-out);
-
-    &.animated {
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      margin: var(--p-space-05);
-      transform: none;
-      transition: initial;
-    }
+  transition: opacity var(--p-motion-duration-100) var(--p-motion-ease-out),
+    transform var(--p-motion-duration-100) var(--p-motion-ease-out);
+
+  top: calc(-1 * var(--p-space-05));
+  left: calc(-1 * var(--p-space-05));
+  bottom: calc(-1 * var(--p-space-05));
+  right: calc(-1 * var(--p-space-05));
+
+  &.animated {
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    margin: var(--p-space-05);
+    transition: initial;
   }
 
   svg {
     fill: var(--p-color-icon-on-color);
 
-    #{$se23} & {
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-    }
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
   }
 
   @media (-ms-high-contrast: active) {
@@ -217,53 +167,41 @@
     + .Backdrop {
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include control-backdrop(error);
-      #{$se23} & {
-        background-color: var(--p-color-bg-critical-subdued);
-        box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
-          var(--p-color-bg-critical-strong-active);
-      }
+      background-color: var(--p-color-bg-critical-subdued);
+      box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
+        var(--p-color-bg-critical-strong-active);
     }
   }
 
   .Backdrop {
     &:active {
-      #{$se23} & {
-        box-shadow: inset 0 0 0 var(--p-space-05)
-          var(--p-color-bg-critical-strong-active);
-      }
+      box-shadow: inset 0 0 0 var(--p-space-05)
+        var(--p-color-bg-critical-strong-active);
     }
   }
 
   .Input:checked,
   .Input.Input-indeterminate {
     + .Backdrop {
       background-color: var(--p-color-border-critical);
-      #{$se23} & {
-        // stylelint-disable declaration-no-important -- se23
-        box-shadow: inset 0 0 0 var(--p-space-3)
-          var(--p-color-bg-critical-strong-active) !important;
-        // stylelint-enable declaration-no-important
-      }
+      box-shadow: inset 0 0 0 var(--p-space-3)
+        var(--p-color-bg-critical-strong-active);
     }
   }
 
   .Input:active {
     + .Backdrop {
       background-color: var(--p-color-border-critical);
-      #{$se23} & {
-        box-shadow: inset 0 0 0 var(--p-space-05)
-          var(--p-color-bg-critical-strong-active);
-      }
+      box-shadow: inset 0 0 0 var(--p-space-05)
+        var(--p-color-bg-critical-strong-active);
     }
   }
 
   .Input:focus-visible + .Backdrop {
     &,
     .ChoiceLabel:hover & {
-      #{$se23} & {
-        border-color: var(--p-color-border-critical-strong-experimental);
-        background-color: var(--p-color-bg-critical-subdued);
-      }
+      border-color: var(--p-color-border-critical-strong-experimental);
+      background-color: var(--p-color-bg-critical-subdued);
     }
   }
 }

polaris-react/src/components/Checkbox/Checkbox.tsx

@@ -5,7 +5,7 @@ import React, {
   useContext,
   useId,
 } from 'react';
-import {MinusMinor, TickSmallMinor} from '@shopify/polaris-icons';
+import {MinusMinor} from '@shopify/polaris-icons';
 
 import {classNames} from '../../utilities/css';
 import type {ResponsiveProp} from '../../utilities/css';
@@ -15,7 +15,6 @@ import {errorTextID} from '../InlineError';
 import {Icon} from '../Icon';
 import type {Error, CheckboxHandles} from '../../types';
 import {WithinListboxContext} from '../../utilities/listbox/context';
-import {useFeatures} from '../../utilities/features';
 
 import styles from './Checkbox.scss';
 
@@ -85,7 +84,6 @@ export const Checkbox = forwardRef<CheckboxHandles, CheckboxProps>(
     const uniqId = useId();
     const id = idProp ?? uniqId;
     const isWithinListbox = useContext(WithinListboxContext);
-    const {polarisSummerEditions2023} = useFeatures();
 
     useImperativeHandle(ref, () => ({
       focus: () => {
@@ -131,11 +129,7 @@ export const Checkbox = forwardRef<CheckboxHandles, CheckboxProps>(
       ? {indeterminate: 'true', 'aria-checked': 'mixed' as const}
       : {'aria-checked': isChecked};
 
-    const iconSource = isIndeterminate ? MinusMinor : TickSmallMinor;
-
-    const animatedTickIcon = polarisSummerEditions2023 && !isIndeterminate;
-
-    const iconSourceSe23 = (
+    const iconSource = (
       <svg
         viewBox="0 0 16 16"
         shapeRendering="geometricPrecision"
@@ -209,10 +203,10 @@ export const Checkbox = forwardRef<CheckboxHandles, CheckboxProps>(
           <span
             className={classNames(
               styles.Icon,
-              animatedTickIcon && styles.animated,
+              !isIndeterminate && styles.animated,
             )}
           >
-            {animatedTickIcon ? iconSourceSe23 : <Icon source={iconSource} />}
+            {isIndeterminate ? <Icon source={MinusMinor} /> : iconSource}
           </span>
         </span>
       </Choice>

polaris-react/src/styles/shared/_controls.scss

@@ -13,25 +13,6 @@
     background-color: var(--p-color-bg);
     border-radius: var(--p-border-radius-1);
 
-    &::before {
-      content: '';
-      position: absolute;
-      top: calc(-1 * var(--p-border-width-2));
-      right: calc(-1 * var(--p-border-width-2));
-      bottom: calc(-1 * var(--p-border-width-2));
-      left: calc(-1 * var(--p-border-width-2));
-      border-radius: var(--p-border-radius-1);
-      background-color: var(--p-color-bg-interactive);
-      opacity: 0;
-      transform: scale(0.25);
-      transition: opacity var(--p-motion-duration-100) var(--p-motion-ease),
-        transform var(--p-motion-duration-100) var(--p-motion-ease);
-
-      #{$se23} & {
-        content: none;
-      }
-    }
-
     &.hover,
     &:hover {
       cursor: pointer;