[DO NOT MERGE] [DRAFT] button variants testing branch

package.json

@@ -115,7 +115,7 @@
     "@elastic/ecs": "^8.11.1",
     "@elastic/elasticsearch": "^8.15.0",
     "@elastic/ems-client": "8.5.3",
-    "@elastic/eui": "95.10.1",
+    "@elastic/eui": "./elastic_eui_95_10_1_vr_button_options_07.tgz",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

packages/react/kibana_context/root/eui_provider.tsx

@@ -11,11 +11,37 @@ import React, { FC, PropsWithChildren, useMemo } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import createCache from '@emotion/cache';
 
-import { EuiProvider, EuiProviderProps, euiStylisPrefixer } from '@elastic/eui';
+import {
+  EuiProvider,
+  EuiProviderProps,
+  euiStylisPrefixer,
+  EuiThemeNewButtonOption1,
+  EuiThemeNewButtonOption2_1,
+  EuiThemeNewButtonOption2_2,
+  EuiThemeNewButtonOption3,
+  EuiThemeNewButtonOption4,
+  EuiThemeShape,
+} from '@elastic/eui';
+
 import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
 import { getColorMode, defaultTheme } from '@kbn/react-kibana-context-common';
 import { ThemeServiceStart } from '@kbn/react-kibana-context-common';
 
+const BUTTON_KEY_TO_THEME_MAP: Record<
+  string,
+  {
+    model: EuiThemeShape;
+    root: EuiThemeShape;
+    key: string;
+  }
+> = {
+  '1': EuiThemeNewButtonOption1,
+  '2.1': EuiThemeNewButtonOption2_1,
+  '2.2': EuiThemeNewButtonOption2_2,
+  '3': EuiThemeNewButtonOption3,
+  '4': EuiThemeNewButtonOption4,
+};
+
 /**
  * Props for the KibanaEuiProvider.
  */
@@ -67,6 +93,11 @@ export const KibanaEuiProvider: FC<PropsWithChildren<KibanaEuiProviderProps>> =
   const theme = useObservable(theme$, defaultTheme);
   const themeColorMode = useMemo(() => getColorMode(theme), [theme]);
 
+  const selectedButtonOption = localStorage.getItem('kbn-theme-button-option');
+  const selectedCustomTheme = selectedButtonOption
+    ? BUTTON_KEY_TO_THEME_MAP[selectedButtonOption]
+    : undefined;
+
   // In some cases-- like in Storybook or testing-- we want to explicitly override the
   // colorMode provided by the `theme`.
   const colorMode = colorModeProp || themeColorMode;
@@ -75,8 +106,19 @@ export const KibanaEuiProvider: FC<PropsWithChildren<KibanaEuiProviderProps>> =
   // elsewhere.  Should be a passive addition to anyone using the older theme provider(s).
   const globalStyles = globalStylesProp === false ? false : undefined;
 
+  const customThemeProps = selectedCustomTheme && { theme: selectedCustomTheme };
+
   return (
-    <EuiProvider {...{ cache, modify, colorMode, globalStyles, utilityClasses: globalStyles }}>
+    <EuiProvider
+      {...{
+        cache,
+        modify,
+        colorMode,
+        globalStyles,
+        utilityClasses: globalStyles,
+        ...customThemeProps,
+      }}
+    >
       {children}
     </EuiProvider>
   );

packages/react/kibana_context/root/root_provider.tsx

@@ -48,14 +48,24 @@ export const KibanaRootContextProvider: FC<PropsWithChildren<KibanaRootContextPr
 }) => {
   const hasEuiProvider = useIsNestedEuiProvider();
 
+  const overrides = JSON.parse(localStorage.getItem('kbn-theme-overrides') || '{}');
+
+  const enhancedProps = {
+    ...props,
+    modify: {
+      ...props.modify,
+      ...overrides,
+    },
+  };
+
   if (hasEuiProvider) {
     emitEuiProviderWarning(
       'KibanaRootContextProvider has likely been nested in this React tree, either by direct reference or by KibanaRenderContextProvider.  The result of this nesting is a nesting of EuiProvider, which has negative effects.  Check your React tree for nested Kibana context providers.'
     );
     return <i18n.Context>{children}</i18n.Context>;
   } else {
     return (
-      <KibanaEuiProvider {...props}>
+      <KibanaEuiProvider {...enhancedProps}>
         <i18n.Context>{children}</i18n.Context>
       </KibanaEuiProvider>
     );

yarn.lock

@@ -1741,10 +1741,9 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
-"@elastic/eui@95.10.1":
+"@elastic/eui@./elastic_eui_95_10_1_vr_button_options_07.tgz":
   version "95.10.1"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-95.10.1.tgz#f3fb356ad49ba45e42981e39748693ba392567fe"
-  integrity sha512-1kqyx/NfiQE/bKMf1E3uJEpYZnQnPBrI5zO0l2FB+fs7Naf7wT7zq1VFRzNLn/r1x6mnou8wJ+VlouHCI+prLw==
+  resolved "./elastic_eui_95_10_1_vr_button_options_07.tgz#06041a26e4e99a6da682faccfd8678d07e8b4627"
   dependencies:
     "@hello-pangea/dnd" "^16.6.0"
     "@types/lodash" "^4.14.202"