Add wrapper and utilities around EuiThemeProvider

docs/development/core/public/kibana-plugin-core-public.appmountparameters.md

@@ -20,4 +20,5 @@ export interface AppMountParameters<HistoryLocationState = unknown>
 |  [history](./kibana-plugin-core-public.appmountparameters.history.md) | ScopedHistory&lt;HistoryLocationState&gt; | A scoped history instance for your application. Should be used to wire up your applications Router. |
 |  [onAppLeave](./kibana-plugin-core-public.appmountparameters.onappleave.md) | (handler: AppLeaveHandler) =&gt; void | A function that can be used to register a handler that will be called when the user is leaving the current application, allowing to prompt a confirmation message before actually changing the page.<!-- -->This will be called either when the user goes to another application, or when trying to close the tab or manually changing the url. |
 |  [setHeaderActionMenu](./kibana-plugin-core-public.appmountparameters.setheaderactionmenu.md) | (menuMount: MountPoint \| undefined) =&gt; void | A function that can be used to set the mount point used to populate the application action container in the chrome header.<!-- -->Calling the handler multiple time will erase the current content of the action menu with the mount from the latest call. Calling the handler with <code>undefined</code> will unmount the current mount point. Calling the handler after the application has been unmounted will have no effect. |
+|  [theme$](./kibana-plugin-core-public.appmountparameters.theme_.md) | Observable&lt;CoreTheme&gt; | An observable emitting [Core's theme](./kibana-plugin-core-public.coretheme.md)<!-- -->. Should be used when mounting the application to include theme information. |
 

docs/development/core/public/kibana-plugin-core-public.appmountparameters.theme_.md

@@ -0,0 +1,33 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [AppMountParameters](./kibana-plugin-core-public.appmountparameters.md) &gt; [theme$](./kibana-plugin-core-public.appmountparameters.theme_.md)
+
+## AppMountParameters.theme$ property
+
+An observable emitting [Core's theme](./kibana-plugin-core-public.coretheme.md)<!-- -->. Should be used when mounting the application to include theme information.
+
+<b>Signature:</b>
+
+```typescript
+theme$: Observable<CoreTheme>;
+```
+
+## Example
+
+When mounting a react application:
+
+```ts
+// application.tsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { AppMountParameters } from 'src/core/public';
+import { wrapWithTheme } from 'src/plugins/kibana_react';
+import { MyApp } from './app';
+
+export renderApp = ({ element, theme$ }: AppMountParameters) => {
+   ReactDOM.render(wrapWithTheme(<MyApp/>, theme$), element);
+   return () => ReactDOM.unmountComponentAtNode(element);
+}
+```
+

docs/development/core/public/kibana-plugin-core-public.coresetup.md

@@ -22,5 +22,6 @@ export interface CoreSetup<TPluginsStart extends object = object, TStart = unkno
 |  [http](./kibana-plugin-core-public.coresetup.http.md) | HttpSetup | [HttpSetup](./kibana-plugin-core-public.httpsetup.md) |
 |  [injectedMetadata](./kibana-plugin-core-public.coresetup.injectedmetadata.md) | { getInjectedVar: (name: string, defaultValue?: any) =&gt; unknown; } | exposed temporarily until https://github.com/elastic/kibana/issues/41990 done use \*only\* to retrieve config values. There is no way to set injected values in the new platform. |
 |  [notifications](./kibana-plugin-core-public.coresetup.notifications.md) | NotificationsSetup | [NotificationsSetup](./kibana-plugin-core-public.notificationssetup.md) |
+|  [theme](./kibana-plugin-core-public.coresetup.theme.md) | ThemeServiceSetup | [ThemeServiceSetup](./kibana-plugin-core-public.themeservicesetup.md) |
 |  [uiSettings](./kibana-plugin-core-public.coresetup.uisettings.md) | IUiSettingsClient | [IUiSettingsClient](./kibana-plugin-core-public.iuisettingsclient.md) |
 

docs/development/core/public/kibana-plugin-core-public.coresetup.theme.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [CoreSetup](./kibana-plugin-core-public.coresetup.md) &gt; [theme](./kibana-plugin-core-public.coresetup.theme.md)
+
+## CoreSetup.theme property
+
+[ThemeServiceSetup](./kibana-plugin-core-public.themeservicesetup.md)
+
+<b>Signature:</b>
+
+```typescript
+theme: ThemeServiceSetup;
+```

docs/development/core/public/kibana-plugin-core-public.corestart.md

@@ -27,5 +27,6 @@ export interface CoreStart
 |  [notifications](./kibana-plugin-core-public.corestart.notifications.md) | NotificationsStart | [NotificationsStart](./kibana-plugin-core-public.notificationsstart.md) |
 |  [overlays](./kibana-plugin-core-public.corestart.overlays.md) | OverlayStart | [OverlayStart](./kibana-plugin-core-public.overlaystart.md) |
 |  [savedObjects](./kibana-plugin-core-public.corestart.savedobjects.md) | SavedObjectsStart | [SavedObjectsStart](./kibana-plugin-core-public.savedobjectsstart.md) |
+|  [theme](./kibana-plugin-core-public.corestart.theme.md) | ThemeServiceStart | [ThemeServiceStart](./kibana-plugin-core-public.themeservicestart.md) |
 |  [uiSettings](./kibana-plugin-core-public.corestart.uisettings.md) | IUiSettingsClient | [IUiSettingsClient](./kibana-plugin-core-public.iuisettingsclient.md) |
 

docs/development/core/public/kibana-plugin-core-public.corestart.theme.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [CoreStart](./kibana-plugin-core-public.corestart.md) &gt; [theme](./kibana-plugin-core-public.corestart.theme.md)
+
+## CoreStart.theme property
+
+[ThemeServiceStart](./kibana-plugin-core-public.themeservicestart.md)
+
+<b>Signature:</b>
+
+```typescript
+theme: ThemeServiceStart;
+```

docs/development/core/public/kibana-plugin-core-public.coretheme.darkmode.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [CoreTheme](./kibana-plugin-core-public.coretheme.md) &gt; [darkMode](./kibana-plugin-core-public.coretheme.darkmode.md)
+
+## CoreTheme.darkMode property
+
+is dark mode enabled or not
+
+<b>Signature:</b>
+
+```typescript
+readonly darkMode: boolean;
+```

docs/development/core/public/kibana-plugin-core-public.coretheme.md

@@ -0,0 +1,20 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [CoreTheme](./kibana-plugin-core-public.coretheme.md)
+
+## CoreTheme interface
+
+Contains all the required information to apply Kibana's theme at the various levels it can be used.
+
+<b>Signature:</b>
+
+```typescript
+export interface CoreTheme 
+```
+
+## Properties
+
+|  Property | Type | Description |
+|  --- | --- | --- |
+|  [darkMode](./kibana-plugin-core-public.coretheme.darkmode.md) | boolean | is dark mode enabled or not |
+

docs/development/core/public/kibana-plugin-core-public.md

@@ -58,6 +58,7 @@ The plugin integrates with the core system via lifecycle events: `setup`<!-- -->
 |  [ChromeUserBanner](./kibana-plugin-core-public.chromeuserbanner.md) |  |
 |  [CoreSetup](./kibana-plugin-core-public.coresetup.md) | Core services exposed to the <code>Plugin</code> setup lifecycle |
 |  [CoreStart](./kibana-plugin-core-public.corestart.md) | Core services exposed to the <code>Plugin</code> start lifecycle |
+|  [CoreTheme](./kibana-plugin-core-public.coretheme.md) | Contains all the required information to apply Kibana's theme at the various levels it can be used. |
 |  [DeprecationsServiceStart](./kibana-plugin-core-public.deprecationsservicestart.md) | DeprecationsService provides methods to fetch domain deprecation details from the Kibana server. |
 |  [DocLinksStart](./kibana-plugin-core-public.doclinksstart.md) |  |
 |  [ErrorToastOptions](./kibana-plugin-core-public.errortoastoptions.md) | Options available for [IToasts](./kibana-plugin-core-public.itoasts.md) error APIs. |
@@ -131,6 +132,8 @@ The plugin integrates with the core system via lifecycle events: `setup`<!-- -->
 |  [SavedObjectsResolveResponse](./kibana-plugin-core-public.savedobjectsresolveresponse.md) |  |
 |  [SavedObjectsStart](./kibana-plugin-core-public.savedobjectsstart.md) |  |
 |  [SavedObjectsUpdateOptions](./kibana-plugin-core-public.savedobjectsupdateoptions.md) |  |
+|  [ThemeServiceSetup](./kibana-plugin-core-public.themeservicesetup.md) |  |
+|  [ThemeServiceStart](./kibana-plugin-core-public.themeservicestart.md) |  |
 |  [ToastOptions](./kibana-plugin-core-public.toastoptions.md) | Options available for [IToasts](./kibana-plugin-core-public.itoasts.md) APIs. |
 |  [UiSettingsParams](./kibana-plugin-core-public.uisettingsparams.md) | UiSettings parameters defined by the plugins. |
 |  [UiSettingsState](./kibana-plugin-core-public.uisettingsstate.md) |  |

docs/development/core/public/kibana-plugin-core-public.themeservicesetup.md

@@ -0,0 +1,19 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [ThemeServiceSetup](./kibana-plugin-core-public.themeservicesetup.md)
+
+## ThemeServiceSetup interface
+
+
+<b>Signature:</b>
+
+```typescript
+export interface ThemeServiceSetup 
+```
+
+## Properties
+
+|  Property | Type | Description |
+|  --- | --- | --- |
+|  [theme$](./kibana-plugin-core-public.themeservicesetup.theme_.md) | Observable&lt;CoreTheme&gt; |  |
+

docs/development/core/public/kibana-plugin-core-public.themeservicesetup.theme_.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [ThemeServiceSetup](./kibana-plugin-core-public.themeservicesetup.md) &gt; [theme$](./kibana-plugin-core-public.themeservicesetup.theme_.md)
+
+## ThemeServiceSetup.theme$ property
+
+<b>Signature:</b>
+
+```typescript
+theme$: Observable<CoreTheme>;
+```

docs/development/core/public/kibana-plugin-core-public.themeservicestart.md

@@ -0,0 +1,19 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [ThemeServiceStart](./kibana-plugin-core-public.themeservicestart.md)
+
+## ThemeServiceStart interface
+
+
+<b>Signature:</b>
+
+```typescript
+export interface ThemeServiceStart 
+```
+
+## Properties
+
+|  Property | Type | Description |
+|  --- | --- | --- |
+|  [theme$](./kibana-plugin-core-public.themeservicestart.theme_.md) | Observable&lt;CoreTheme&gt; |  |
+

docs/development/core/public/kibana-plugin-core-public.themeservicestart.theme_.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [ThemeServiceStart](./kibana-plugin-core-public.themeservicestart.md) &gt; [theme$](./kibana-plugin-core-public.themeservicestart.theme_.md)
+
+## ThemeServiceStart.theme$ property
+
+<b>Signature:</b>
+
+```typescript
+theme$: Observable<CoreTheme>;
+```

docs/development/core/server/kibana-plugin-core-server.eventloopdelaysmonitor.collect.md

@@ -6,6 +6,8 @@
 
 Collect gathers event loop delays metrics from nodejs perf\_hooks.monitorEventLoopDelay the histogram calculations start from the last time `reset` was called or this EventLoopDelaysMonitor instance was created.
 
+Returns metrics in milliseconds.
+
 <b>Signature:</b>
 
 ```typescript

docs/development/core/server/kibana-plugin-core-server.eventloopdelaysmonitor.md

@@ -20,7 +20,7 @@ export declare class EventLoopDelaysMonitor
 
 |  Method | Modifiers | Description |
 |  --- | --- | --- |
-|  [collect()](./kibana-plugin-core-server.eventloopdelaysmonitor.collect.md) |  | Collect gathers event loop delays metrics from nodejs perf\_hooks.monitorEventLoopDelay the histogram calculations start from the last time <code>reset</code> was called or this EventLoopDelaysMonitor instance was created. |
+|  [collect()](./kibana-plugin-core-server.eventloopdelaysmonitor.collect.md) |  | Collect gathers event loop delays metrics from nodejs perf\_hooks.monitorEventLoopDelay the histogram calculations start from the last time <code>reset</code> was called or this EventLoopDelaysMonitor instance was created.<!-- -->Returns metrics in milliseconds. |
 |  [reset()](./kibana-plugin-core-server.eventloopdelaysmonitor.reset.md) |  | Resets the collected histogram data. |
 |  [stop()](./kibana-plugin-core-server.eventloopdelaysmonitor.stop.md) |  | Disables updating the interval timer for collecting new data points. |
 

docs/development/core/server/kibana-plugin-core-server.intervalhistogram.md

@@ -4,7 +4,7 @@
 
 ## IntervalHistogram interface
 
-an IntervalHistogram object that samples and reports the event loop delay over time. The delays will be reported in nanoseconds.
+an IntervalHistogram object that samples and reports the event loop delay over time. The delays will be reported in milliseconds.
 
 <b>Signature:</b>
 

docs/development/core/server/kibana-plugin-core-server.md

@@ -101,7 +101,7 @@ The plugin integrates with the core system via lifecycle events: `setup`<!-- -->
 |  [IExternalUrlPolicy](./kibana-plugin-core-server.iexternalurlpolicy.md) | A policy describing whether access to an external destination is allowed. |
 |  [IKibanaResponse](./kibana-plugin-core-server.ikibanaresponse.md) | A response data object, expected to returned as a result of [RequestHandler](./kibana-plugin-core-server.requesthandler.md) execution |
 |  [IKibanaSocket](./kibana-plugin-core-server.ikibanasocket.md) | A tiny abstraction for TCP socket. |
-|  [IntervalHistogram](./kibana-plugin-core-server.intervalhistogram.md) | an IntervalHistogram object that samples and reports the event loop delay over time. The delays will be reported in nanoseconds. |
+|  [IntervalHistogram](./kibana-plugin-core-server.intervalhistogram.md) | an IntervalHistogram object that samples and reports the event loop delay over time. The delays will be reported in milliseconds. |
 |  [IRenderOptions](./kibana-plugin-core-server.irenderoptions.md) |  |
 |  [IRouter](./kibana-plugin-core-server.irouter.md) | Registers route handlers for specified resource path and method. See [RouteConfig](./kibana-plugin-core-server.routeconfig.md) and [RequestHandler](./kibana-plugin-core-server.requesthandler.md) for more information about arguments to route registrations. |
 |  [ISavedObjectsPointInTimeFinder](./kibana-plugin-core-server.isavedobjectspointintimefinder.md) |  |

src/core/public/application/application_service.mock.ts

@@ -11,12 +11,15 @@ import { BehaviorSubject, Subject } from 'rxjs';
 
 import type { MountPoint } from '../types';
 import { capabilitiesServiceMock } from './capabilities/capabilities_service.mock';
+import { themeServiceMock } from '../theme/theme_service.mock';
+import { scopedHistoryMock } from './scoped_history.mock';
 import {
   ApplicationSetup,
   InternalApplicationStart,
   ApplicationStart,
   InternalApplicationSetup,
   PublicAppInfo,
+  AppMountParameters,
 } from './types';
 import { ApplicationServiceContract } from './test_types';
 
@@ -81,6 +84,19 @@ const createInternalStartContractMock = (): jest.Mocked<InternalApplicationStart
   };
 };
 
+const createAppMountParametersMock = (parts: Partial<AppMountParameters>) => {
+  const mock: AppMountParameters = {
+    element: document.createElement('div'),
+    history: scopedHistoryMock.create(),
+    appBasePath: '/app',
+    onAppLeave: jest.fn(),
+    setHeaderActionMenu: jest.fn(),
+    theme$: themeServiceMock.createTheme$(),
+    ...parts,
+  };
+  return mock;
+};
+
 const createMock = (): jest.Mocked<ApplicationServiceContract> => ({
   setup: jest.fn().mockReturnValue(createInternalSetupContractMock()),
   start: jest.fn().mockReturnValue(createInternalStartContractMock()),
@@ -93,4 +109,5 @@ export const applicationServiceMock = {
   createStartContract: createStartContractMock,
   createInternalSetupContract: createInternalSetupContractMock,
   createInternalStartContract: createInternalStartContractMock,
+  createAppMountParameters: createAppMountParametersMock,
 };

src/core/public/application/application_service.test.ts

@@ -19,6 +19,7 @@ import { mount, shallow } from 'enzyme';
 
 import { httpServiceMock } from '../http/http_service.mock';
 import { overlayServiceMock } from '../overlays/overlay_service.mock';
+import { themeServiceMock } from '../theme/theme_service.mock';
 import { MockLifecycle } from './test_types';
 import { ApplicationService } from './application_service';
 import { App, AppDeepLink, AppNavLinkStatus, AppStatus, AppUpdater, PublicAppInfo } from './types';
@@ -44,7 +45,11 @@ describe('#setup()', () => {
       http,
       redirectTo: jest.fn(),
     };
-    startDeps = { http, overlays: overlayServiceMock.createStartContract() };
+    startDeps = {
+      http,
+      overlays: overlayServiceMock.createStartContract(),
+      theme: themeServiceMock.createStartContract(),
+    };
     service = new ApplicationService();
   });
 
@@ -454,7 +459,11 @@ describe('#start()', () => {
       http,
       redirectTo: jest.fn(),
     };
-    startDeps = { http, overlays: overlayServiceMock.createStartContract() };
+    startDeps = {
+      http,
+      overlays: overlayServiceMock.createStartContract(),
+      theme: themeServiceMock.createStartContract(),
+    };
     service = new ApplicationService();
   });
 
@@ -1124,7 +1133,11 @@ describe('#stop()', () => {
     setupDeps = {
       http,
     };
-    startDeps = { http, overlays: overlayServiceMock.createStartContract() };
+    startDeps = {
+      http,
+      overlays: overlayServiceMock.createStartContract(),
+      theme: themeServiceMock.createStartContract(),
+    };
     service = new ApplicationService();
   });
 

src/core/public/application/application_service.tsx

@@ -15,6 +15,7 @@ import { MountPoint } from '../types';
 import { HttpSetup, HttpStart } from '../http';
 import { OverlayStart } from '../overlays';
 import { PluginOpaqueId } from '../plugins';
+import type { ThemeServiceStart } from '../theme';
 import { AppRouter } from './ui';
 import { Capabilities, CapabilitiesService } from './capabilities';
 import {
@@ -44,6 +45,7 @@ interface SetupDeps {
 
 interface StartDeps {
   http: HttpStart;
+  theme: ThemeServiceStart;
   overlays: OverlayStart;
 }
 
@@ -191,7 +193,7 @@ export class ApplicationService {
     };
   }
 
-  public async start({ http, overlays }: StartDeps): Promise<InternalApplicationStart> {
+  public async start({ http, overlays, theme }: StartDeps): Promise<InternalApplicationStart> {
     if (!this.redirectTo) {
       throw new Error('ApplicationService#setup() must be invoked before start.');
     }
@@ -314,6 +316,7 @@ export class ApplicationService {
         return (
           <AppRouter
             history={this.history}
+            theme$={theme.theme$}
             mounters={availableMounters}
             appStatuses$={applicationStatuses$}
             setAppLeaveHandler={this.setAppLeaveHandler}

src/core/public/application/integration_tests/application_service.test.tsx

@@ -15,6 +15,7 @@ import { ApplicationService } from '../application_service';
 import { httpServiceMock } from '../../http/http_service.mock';
 import { MockLifecycle } from '../test_types';
 import { overlayServiceMock } from '../../overlays/overlay_service.mock';
+import { themeServiceMock } from '../../theme/theme_service.mock';
 import { AppMountParameters } from '../types';
 import { Observable } from 'rxjs';
 import { MountPoint } from 'kibana/public';
@@ -43,7 +44,11 @@ describe('ApplicationService', () => {
       http,
       history: history as any,
     };
-    startDeps = { http, overlays: overlayServiceMock.createStartContract() };
+    startDeps = {
+      http,
+      overlays: overlayServiceMock.createStartContract(),
+      theme: themeServiceMock.createStartContract(),
+    };
     service = new ApplicationService();
   });