diff --git a/packages/kbn-ui-shared-deps/entry.js b/packages/kbn-ui-shared-deps/entry.js index aaa46ab74714f..02b64157686c1 100644 --- a/packages/kbn-ui-shared-deps/entry.js +++ b/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'); diff --git a/packages/kbn-ui-shared-deps/index.js b/packages/kbn-ui-shared-deps/index.js index 596c31820e80d..40e89f199b6a1 100644 --- a/packages/kbn-ui-shared-deps/index.js +++ b/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 diff --git a/packages/kbn-ui-shared-deps/theme.ts b/packages/kbn-ui-shared-deps/theme.ts new file mode 100644 index 0000000000000..ca4714779d39e --- /dev/null +++ b/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; +} diff --git a/packages/kbn-ui-shared-deps/tsconfig.json b/packages/kbn-ui-shared-deps/tsconfig.json index 5aa0f45e4100d..cef9a442d17bc 100644 --- a/packages/kbn-ui-shared-deps/tsconfig.json +++ b/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" + ] } diff --git a/packages/kbn-ui-shared-deps/webpack.config.js b/packages/kbn-ui-shared-deps/webpack.config.js index 831e1e55573b3..c81da4689052a 100644 --- a/packages/kbn-ui-shared-deps/webpack.config.js +++ b/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')], + }, + }, + ], + }, ], }, diff --git a/x-pack/plugins/apm/public/plugin.ts b/x-pack/plugins/apm/public/plugin.ts index 0e495391c94f2..d24cb29eaf24f 100644 --- a/x-pack/plugins/apm/public/plugin.ts +++ b/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 { 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) => { diff --git a/x-pack/plugins/apm/public/services/rest/observability.dashboard.test.ts b/x-pack/plugins/apm/public/services/rest/observability.dashboard.test.ts index 1ee8d79ee99a5..dbb5d6029d0f1 100644 --- a/x-pack/plugins/apm/public/services/rest/observability.dashboard.test.ts +++ b/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'); diff --git a/x-pack/plugins/apm/public/services/rest/observability_dashboard.ts b/x-pack/plugins/apm/public/services/rest/observability_dashboard.ts index 4614e06cbd45d..2107565c5facf 100644 --- a/x-pack/plugins/apm/public/services/rest/observability_dashboard.ts +++ b/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; diff --git a/x-pack/plugins/apm/public/utils/get_theme.ts b/x-pack/plugins/apm/public/utils/get_theme.ts deleted file mode 100644 index e5020202b7721..0000000000000 --- a/x-pack/plugins/apm/public/utils/get_theme.ts +++ /dev/null @@ -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; - -export function getTheme({ isDarkMode }: { isDarkMode: boolean }) { - return isDarkMode ? darkTheme : lightTheme; -}