Add global class and scss helper (#9238)

Help with toggling between current and se23

Toggles a class on the document root that we can hook into via a handy
sass var:

```scss
  #{$se23} & {
    --pc-button-color: var(--p-text);
  }
```

---------

Co-authored-by: Lo Kim <lo.kim@shopify.com>

Author: 2 people

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

@@ -15,7 +15,10 @@ import {
 } from '../../utilities/sticky-manager';
 import {LinkContext} from '../../utilities/link';
 import type {LinkLikeComponent} from '../../utilities/link';
-import {FeaturesContext} from '../../utilities/features';
+import {
+  FeaturesContext,
+  summerEditions2023ClassName,
+} from '../../utilities/features';
 import type {FeaturesConfig} from '../../utilities/features';
 
 import './AppProvider.scss';
@@ -59,6 +62,7 @@ export class AppProvider extends Component<AppProviderProps, State> {
     if (document != null) {
       this.stickyManager.setContainer(document);
       this.setBodyStyles();
+      this.setRootAttributes();
     }
   }
 
@@ -68,6 +72,8 @@ export class AppProvider extends Component<AppProviderProps, State> {
   }: AppProviderProps) {
     const {i18n, linkComponent} = this.props;
 
+    this.setRootAttributes();
+
     if (i18n === prevI18n && linkComponent === prevLinkComponent) {
       return;
     }
@@ -83,6 +89,13 @@ export class AppProvider extends Component<AppProviderProps, State> {
     document.body.style.color = 'var(--p-color-text)';
   };
 
+  setRootAttributes = () => {
+    document.documentElement.classList.toggle(
+      summerEditions2023ClassName,
+      this.props.features?.polarisSummerEditions2023,
+    );
+  };
+
   render() {
     const {
       children,

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

@@ -213,7 +213,12 @@
   --pc-button-color-hover: var(--p-color-bg-primary-hover);
   --pc-button-color-active: var(--p-color-bg-primary-active);
   --pc-button-color-depressed: var(--p-color-bg-primary-active);
+
+  #{$se23} & {
+    --pc-button-color: var(--p-text);
+  }
   // stylelint-enable
+
   svg {
     fill: var(--p-color-icon-on-color);
   }

polaris-react/src/styles/_common.scss

@@ -17,3 +17,5 @@
 @import './shared/interaction-state';
 
 @import '../../../node_modules/@shopify/polaris-tokens/dist/scss/media-queries';
+
+$se23: "html[class*='Polaris-Summer-Editions-2023']";

polaris-react/src/utilities/features/context.ts

@@ -2,6 +2,8 @@ import {createContext} from 'react';
 
 import type {FeaturesConfig} from './types';
 
+export const summerEditions2023ClassName = 'Polaris-Summer-Editions-2023';
+
 export const FeaturesContext = createContext<FeaturesConfig | undefined>(
   undefined,
 );