Update EUI to v108.0.0 (#240888)

- `@elastic/eui`: `v107.0.1` ⏩ `v108.0.0`
- `@elastic/eui-theme-borealis`: `v3.6.0` ⏩ `v4.0.0`

---

## Changes

>[!IMPORTANT]
This PR removes code related to the legacy Amsterdam theme. But it
purposefully keeps Amsterdam palettes in `kbn-palettes` as those are
standalone.

- removed code related to the legacy theme Amsterdam
[[#9090](elastic/eui#9090)]
- updated custom types to align with changes to the event type of
`onClose` on `EuiModal`
[[#9137](elastic/eui#9137)]

## Package updates

### [`v108.0.0`](https://github.com/elastic/eui/releases/v108.0.0)

- Updated `EuiModal` to support closing on outside click, via the new
`outsideClickCloses` prop
([#9137](elastic/eui#9137))

**Breaking changes**

- Removed all "Amsterdam" theme related code in `src/themes/amsterdam` -
EUI now only supports the "Borealis" theme in `eui-theme-borealis`
([#9090](elastic/eui#9090))
- Removed `euiTheme.flags.hasGlobalFocusColor`
([#9090](elastic/eui#9090))
- Removed `euiTheme.flags.hasVisColorAdjustment`
([#9090](elastic/eui#9090))
- Removed `hasVisColorAdjustment` argument from color palettes (used in
`euiPaletteColorBlindBehindText`, `euiPaletteForTemperature`,
`euiPaletteComplementary`, `euiPaletteCool`)
([#9090](elastic/eui#9090))
- Removed `euiTheme.flags.buttonVariant` and
`euiTheme.flags.formVariant`
([#9090](elastic/eui#9090))
- Removed `euiTheme.components.keyPadMenuItemBackgroundDisabledSelect`
([#9090](elastic/eui#9090))
- Removed legacy SCSS files from `src/global_styling/variables`,
`src/global_styling/mixins` and `src/global_styling/functions` - if
needed, use them from `eui-theme-common` instead
([#9090](elastic/eui#9090))

### [`v4.0.0`](https://github.com/elastic/eui/releases/v4.0.0)

**Breaking changes**

- Removed `euiTheme.flags.hasGlobalFocusColor`
([#9090](elastic/eui#9090))
- Removed `euiTheme.flags.hasVisColorAdjustment`
([#9090](elastic/eui#9090))
- Removed `euiTheme.flags.buttonVariant` and
`euiTheme.flags.formVariant`
([#9090](elastic/eui#9090))
- Removed `euiTheme.components.keyPadMenuItemBackgroundDisabledSelect`
([#9090](elastic/eui#9090))

---------

Co-authored-by: Elastic Machine <[email protected]>

Author: mgadewoll

package.json

@@ -129,8 +129,8 @@
     "@elastic/ecs": "^9.0.0",
     "@elastic/elasticsearch": "9.1.1",
     "@elastic/ems-client": "8.6.3",
-    "@elastic/eui": "107.0.1",
-    "@elastic/eui-theme-borealis": "3.6.0",
+    "@elastic/eui": "108.0.0",
+    "@elastic/eui-theme-borealis": "4.0.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/kibana-d3-color": "npm:@elastic/[email protected]",
     "@elastic/monaco-esql": "^3.1.11",

packages/kbn-optimizer/README.mdx

@@ -51,16 +51,16 @@ Any import in a bundle which resolves into another bundles "context" directory,
 
 ## Themes
 
-SASS imports in bundles are automatically converted to CSS for one or more themes. In development we build the `v8light` and `v8dark` themes by default to improve build performance. When producing distributable bundles the default shifts to `*` so that the distributable bundles will include all themes, preventing the bundles from needing to be rebuilt when users change the active theme in Kibana's advanced settings.
+SASS imports in bundles are automatically converted to CSS for one or more themes. In development we build the `borealislight` and `borealisdark` themes by default to improve build performance. When producing distributable bundles the default shifts to `*` so that the distributable bundles will include all themes, preventing the bundles from needing to be rebuilt when users change the active theme in Kibana's advanced settings.
 
 To customize the themes that are built for development you can specify the `KBN_OPTIMIZER_THEMES` environment variable to one or more theme tags, or use `*` to build styles for all themes. Unfortunately building more than one theme significantly impacts build performance, so try to be strategic about which themes you build.
 
-Currently supported theme tags: `v8light`, `v8dark`
+Currently supported theme tags: `borealislight`, `borealisdark`
 
 Examples:
 ```sh
 # start Kibana with only a single theme
-KBN_OPTIMIZER_THEMES=v8light yarn start
+KBN_OPTIMIZER_THEMES=borealislight yarn start
 
 # start Kibana with all the themes
 KBN_OPTIMIZER_THEMES=* yarn start

src/core/packages/injected-metadata/browser-mocks/src/injected_metadata_service.mock.ts

@@ -43,7 +43,7 @@ const createSetupContractMock = () => {
     } as any),
     getTheme: jest.fn().mockReturnValue({
       darkMode: false,
-      name: 'amsterdam',
+      name: 'borealis',
       version: 'v8',
       stylesheetPaths: {
         default: ['light-1.css'],

src/core/packages/notifications/browser-internal/src/toasts/__snapshots__/error_toast.test.tsx.snap

@@ -395,15 +395,15 @@ describe('bootstrapRenderer', () => {
       })
     );
 
-    themeName$.next('amsterdam');
+    themeName$.next('borealis');
     await renderer({
       request,
       uiSettingsClient,
     });
 
     expect(renderTemplateMock).toHaveBeenCalledWith(
       expect.objectContaining({
-        themeTagName: 'v8',
+        themeTagName: 'borealis',
       })
     );
   });

src/core/packages/rendering/server-internal/src/bootstrap/__snapshots__/render_template.test.ts.snap

@@ -83,9 +83,7 @@ export const bootstrapRendererFactory: BootstrapRendererFactory = ({
     }
 
     const colorMode = darkMode === false ? 'light' : darkMode === true ? 'dark' : 'system';
-    // Amsterdam theme is called `v8` internally
-    // and should be kept this way for compatibility reasons.
-    const themeTagName = themeName === 'amsterdam' ? 'v8' : themeName;
+    const themeTagName = themeName;
     const bundlesHref = getBundlesHref(baseHref);
 
     const bundlePaths = getPluginsBundlePaths({

src/core/packages/rendering/server-internal/src/bootstrap/bootstrap_renderer.test.ts

@@ -11,7 +11,7 @@ import { renderTemplate } from './render_template';
 
 function mockParams() {
   return {
-    themeTagName: 'v8',
+    themeTagName: 'borealis',
     colorMode: 'light',
     jsDependencyPaths: ['/js-1', '/js-2'],
     styleSheetPaths: ['/style-1', '/style-2'],

src/core/packages/rendering/server-internal/src/bootstrap/bootstrap_renderer.ts

@@ -42,11 +42,7 @@ export const getScriptPaths = ({
   themeName: ThemeName;
 }) => {
   if (darkMode === 'system') {
-    return [
-      `${baseHref}/ui/bootstrap_system_theme_${
-        themeName === 'borealis' ? 'borealis' : 'amsterdam'
-      }.js`,
-    ];
+    return [`${baseHref}/ui/bootstrap_system_theme_borealis.js`];
   } else {
     return [];
   }

src/core/packages/rendering/server-internal/src/bootstrap/render_template.test.ts

@@ -605,7 +605,7 @@ describe('RenderingService', () => {
   });
 
   describe('start()', () => {
-    it('subscribes to the featureFlags.setStringValue$ observable and updates theme name accordingly', async () => {
+    it('subscribes to the featureFlags.setStringValue$', async () => {
       // setup and render added to assert the current theme name
       const { render } = await service.setup(mockRenderingSetupDeps);
       const themeName$ = new BehaviorSubject<ThemeName>(DEFAULT_THEME_NAME);
@@ -631,15 +631,11 @@ describe('RenderingService', () => {
         globalClient: uiSettingsServiceMock.createClient(),
       };
 
-      getIsThemeBundledMock.mockImplementation((name) => ['borealis', 'amsterdam'].includes(name));
+      getIsThemeBundledMock.mockImplementation((name) => name === 'borealis');
 
-      let renderResult = await render(createKibanaRequest(), uiSettings);
+      const renderResult = await render(createKibanaRequest(), uiSettings);
       expect(getIsThemeBundledMock).toHaveBeenCalledWith('borealis');
       expect(renderResult).toContain(',&quot;name&quot;:&quot;borealis&quot;');
-
-      themeName$.next('amsterdam');
-      renderResult = await render(createKibanaRequest(), uiSettings);
-      expect(renderResult).toContain(',&quot;name&quot;:&quot;amsterdam&quot;');
     });
 
     it('falls back to the default theme if theme is not bundled', async () => {