feat(styles): eui Amsterdam theme (#1463)

migrate to eui amsterdam theme. Changes include:

- slight color differences (copied from eui, since in javascript).
- `:focus` & `:focus-within` states are slightly different, particularly with the legend.
- slight dimensional changes.

BREAKING CHANGE: chart color and style changes

docs/0-Intro/0-Intro.mdx

@@ -50,11 +50,8 @@ import '@elastic/charts/dist/theme_only_dark.css';
 If using Elastic Charts in the same project that is already compiling EUI's Sass (like Kibana), you can import the SASS files directly instead of using the CSS. Just be sure to import Elastic Charts Sass files **after** EUI.
 
 ```scss
-@import '~@elastic/eui/src/themes/eui/eui_colors_light';
-@import '~@elastic/eui/src/global_styling/functions/index';
-@import '~@elastic/eui/src/global_styling/variables/index';
-@import '~@elastic/eui/src/global_styling/mixins/index';
-@import '~@elastic/eui/src/global_styling/reset/index';
+@import '~@elastic/eui/src/themes/amsterdam/colors_light';
+@import '~@elastic/eui/src/themes/amsterdam/globals';
 @import '~@elastic/charts/dist/theme';
 ```
 

e2e-server/server/generate/vrt_page_template.js

@@ -44,6 +44,7 @@ ReactDOM.render(<VRTPage />, document.getElementById('story-root') as HTMLElemen
 function pageTemplate(imports, routes, urls) {
   return `
 import React, { Suspense } from 'react';
+import { EuiProvider } from '@elastic/eui';
 import { ThemeIdProvider, BackgroundIdProvider } from '../../storybook/use_base_theme';
 import { useGlobalsParameters } from '../server/mocks/use_global_parameters';
 
@@ -54,6 +55,7 @@ export function VRTPage() {
     setParams,
   } = useGlobalsParameters();
   const urlParams = new URL(window.location.toString()).searchParams;
+  const colorMode = themeId.includes('light') ? 'light' : 'dark';
   ${imports.join('\n  ')}
 
   const path = urlParams.get('path');
@@ -70,13 +72,15 @@ export function VRTPage() {
     </>);
   }
   return (
-    <ThemeIdProvider value={themeId as any}>
-      <BackgroundIdProvider value={backgroundId}>
-        <Suspense fallback={<div>Loading...</div>}>
-          ${routes.join('\n          ')}
-        </Suspense>
-      </BackgroundIdProvider>
-    </ThemeIdProvider>
+    <EuiProvider colorMode={colorMode}>
+      <ThemeIdProvider value={themeId as any}>
+        <BackgroundIdProvider value={backgroundId}>
+          <Suspense fallback={<div>Loading...</div>}>
+            ${routes.join('\n          ')}
+          </Suspense>
+        </BackgroundIdProvider>
+      </ThemeIdProvider>
+    </EuiProvider>
   );
 }
 

integration/server/generate/vrt_page_template.js

@@ -44,6 +44,7 @@ ReactDOM.render(<VRTPage />, document.getElementById('story-root') as HTMLElemen
 function pageTemplate(imports, routes, urls) {
   return `
 import React, { Suspense } from 'react';
+import { EuiProvider } from '@elastic/eui';
 import { ThemeIdProvider, BackgroundIdProvider } from '../../storybook/use_base_theme';
 import { useGlobalsParameters } from '../server/mocks/use_global_parameters';
 
@@ -54,6 +55,7 @@ export function VRTPage() {
     setParams,
   } = useGlobalsParameters();
   const urlParams = new URL(window.location.toString()).searchParams;
+  const colorMode = themeId.includes('light') ? 'light' : 'dark';
   ${imports.join('\n  ')}
 
   const path = urlParams.get('path');
@@ -70,13 +72,15 @@ export function VRTPage() {
     </>);
   }
   return (
-    <ThemeIdProvider value={themeId as any}>
-      <BackgroundIdProvider value={backgroundId}>
-        <Suspense fallback={<div>Loading...</div>}>
-          ${routes.join('\n          ')}
-        </Suspense>
-      </BackgroundIdProvider>
-    </ThemeIdProvider>
+    <EuiProvider colorMode={colorMode}>
+      <ThemeIdProvider value={themeId as any}>
+        <BackgroundIdProvider value={backgroundId}>
+          <Suspense fallback={<div>Loading...</div>}>
+            ${routes.join('\n          ')}
+          </Suspense>
+        </BackgroundIdProvider>
+      </ThemeIdProvider>
+    </EuiProvider>
   );
 }