[ui-shared-deps/theme] implement auto-switching theme vars module (#70274)

Co-authored-by: spalger <spalger@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

packages/kbn-ui-shared-deps/entry.js

@@ -61,5 +61,8 @@ if (window.__kbnThemeVersion__ === 'v7') {
   ElasticEuiDarkTheme = require('@elastic/eui/dist/eui_theme_amsterdam_dark.json');
 }
 
+import * as Theme from './theme.ts';
+export { Theme };
+
 // massive deps that we should really get rid of or reduce in size substantially
 export const ElasticsearchBrowser = require('elasticsearch-browser/elasticsearch.js');

packages/kbn-ui-shared-deps/index.js

@@ -44,6 +44,7 @@ exports.externals = {
   'react-router-dom': '__kbnSharedDeps__.ReactRouterDom',
   'styled-components': '__kbnSharedDeps__.StyledComponents',
   '@kbn/monaco': '__kbnSharedDeps__.KbnMonaco',
+  '@kbn/ui-shared-deps/theme': '__kbnSharedDeps__.Theme',
   // this is how plugins/consumers from npm load monaco
   'monaco-editor/esm/vs/editor/editor.api': '__kbnSharedDeps__.MonacoBarePluginApi',
 
@@ -59,8 +60,8 @@ exports.externals = {
   '@elastic/eui/lib/services': '__kbnSharedDeps__.ElasticEuiLibServices',
   '@elastic/eui/lib/services/format': '__kbnSharedDeps__.ElasticEuiLibServicesFormat',
   '@elastic/eui/dist/eui_charts_theme': '__kbnSharedDeps__.ElasticEuiChartsTheme',
-  '@elastic/eui/dist/eui_theme_light.json': '__kbnSharedDeps__.ElasticEuiLightTheme',
-  '@elastic/eui/dist/eui_theme_dark.json': '__kbnSharedDeps__.ElasticEuiDarkTheme',
+  '@elastic/eui/dist/eui_theme_light.json': '__kbnSharedDeps__.Theme.euiLightVars',
+  '@elastic/eui/dist/eui_theme_dark.json': '__kbnSharedDeps__.Theme.euiDarkVars',
 
   /**
    * massive deps that we should really get rid of or reduce in size substantially

packages/kbn-ui-shared-deps/theme.ts

@@ -0,0 +1,44 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import LightTheme from '@elastic/eui/dist/eui_theme_light.json';
+
+const globals: any = typeof window === 'undefined' ? {} : window;
+
+export type Theme = typeof LightTheme;
+
+export let euiLightVars: Theme;
+export let euiDarkVars: Theme;
+if (globals.__kbnThemeVersion__ === 'v7') {
+  euiLightVars = require('@elastic/eui/dist/eui_theme_light.json');
+  euiDarkVars = require('@elastic/eui/dist/eui_theme_dark.json');
+} else {
+  euiLightVars = require('@elastic/eui/dist/eui_theme_amsterdam_light.json');
+  euiDarkVars = require('@elastic/eui/dist/eui_theme_amsterdam_dark.json');
+}
+
+/**
+ * EUI Theme vars that automatically adjust to light/dark theme
+ */
+export let euiThemeVars: Theme;
+if (globals.__kbnDarkTheme__) {
+  euiThemeVars = euiDarkVars;
+} else {
+  euiThemeVars = euiLightVars;
+}

packages/kbn-ui-shared-deps/tsconfig.json

@@ -1,4 +1,7 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["index.d.ts", "./monaco"]
+  "include": [
+    "index.d.ts",
+    "theme.ts"
+  ]
 }

packages/kbn-ui-shared-deps/webpack.config.js

@@ -78,6 +78,17 @@ exports.getWebpackConfig = ({ dev = false } = {}) => ({
         test: /\.css$/,
         use: [MiniCssExtractPlugin.loader, 'css-loader'],
       },
+      {
+        include: [require.resolve('./theme.ts')],
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: [require.resolve('@kbn/babel-preset/webpack_preset')],
+            },
+          },
+        ],
+      },
     ],
   },
 

x-pack/plugins/apm/public/plugin.ts

@@ -6,6 +6,7 @@
 
 import { i18n } from '@kbn/i18n';
 import { lazy } from 'react';
+import { euiThemeVars as theme } from '@kbn/ui-shared-deps/theme';
 import { ConfigSchema } from '.';
 import { ObservabilityPluginSetup } from '../../observability/public';
 import {
@@ -42,7 +43,6 @@ import {
   fetchLandingPageData,
   hasData,
 } from './services/rest/observability_dashboard';
-import { getTheme } from './utils/get_theme';
 
 export type ApmPluginSetup = void;
 export type ApmPluginStart = void;
@@ -79,9 +79,6 @@ export class ApmPlugin implements Plugin<ApmPluginSetup, ApmPluginStart> {
     pluginSetupDeps.home.featureCatalogue.register(featureCatalogueEntry);
 
     if (plugins.observability) {
-      const theme = getTheme({
-        isDarkMode: core.uiSettings.get('theme:darkMode'),
-      });
       plugins.observability.dashboard.register({
         appName: 'apm',
         fetchData: async (params) => {

x-pack/plugins/apm/public/services/rest/observability.dashboard.test.ts

@@ -6,9 +6,7 @@
 
 import { fetchLandingPageData, hasData } from './observability_dashboard';
 import * as createCallApmApi from './createCallApmApi';
-import { getTheme } from '../../utils/get_theme';
-
-const theme = getTheme({ isDarkMode: false });
+import { euiThemeVars as theme } from '@kbn/ui-shared-deps/theme';
 
 describe('Observability dashboard data', () => {
   const callApmApiMock = jest.spyOn(createCallApmApi, 'callApmApi');

x-pack/plugins/apm/public/services/rest/observability_dashboard.ts

@@ -6,12 +6,12 @@
 
 import { i18n } from '@kbn/i18n';
 import { sum } from 'lodash';
+import { Theme } from '@kbn/ui-shared-deps/theme';
 import {
   ApmFetchDataResponse,
   FetchDataParams,
 } from '../../../../observability/public';
 import { callApmApi } from './createCallApmApi';
-import { Theme } from '../../utils/get_theme';
 
 interface Options {
   theme: Theme;

x-pack/plugins/apm/public/utils/get_theme.ts

@@ -1,13 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
-import darkTheme from '@elastic/eui/dist/eui_theme_dark.json';
-
-export type Theme = ReturnType<typeof getTheme>;
-
-export function getTheme({ isDarkMode }: { isDarkMode: boolean }) {
-  return isDarkMode ? darkTheme : lightTheme;
-}