From 3ffeeffce258ab307d34ff7f1fbd848455e56032 Mon Sep 17 00:00:00 2001 From: spalger Date: Mon, 29 Jun 2020 15:39:19 -0700 Subject: [PATCH] [ui-shared-deps/theme] implement auto-switching theme vars module --- packages/kbn-ui-shared-deps/entry.js | 3 ++ packages/kbn-ui-shared-deps/index.js | 5 ++- packages/kbn-ui-shared-deps/theme.ts | 40 +++++++++++++++++++ packages/kbn-ui-shared-deps/tsconfig.json | 5 ++- packages/kbn-ui-shared-deps/webpack.config.js | 11 +++++ x-pack/plugins/apm/public/plugin.ts | 7 +--- x-pack/plugins/apm/public/utils/get_theme.ts | 13 ------ 7 files changed, 63 insertions(+), 21 deletions(-) create mode 100644 packages/kbn-ui-shared-deps/theme.ts delete mode 100644 x-pack/plugins/apm/public/utils/get_theme.ts diff --git a/packages/kbn-ui-shared-deps/entry.js b/packages/kbn-ui-shared-deps/entry.js index aaa46ab74714f1..02b64157686c19 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 596c31820e80d0..40e89f199b6a13 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 00000000000000..58bcb3e9b83505 --- /dev/null +++ b/packages/kbn-ui-shared-deps/theme.ts @@ -0,0 +1,40 @@ +/* + * 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 Theme from '@elastic/eui/dist/eui_theme_light.json'; + +export let euiLightVars: typeof Theme; +export let euiDarkVars: typeof Theme; +if ((window as any).__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: typeof Theme; +if ((window as any).__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 5aa0f45e4100d4..10073d566bb2cb 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_vars" + ] } diff --git a/packages/kbn-ui-shared-deps/webpack.config.js b/packages/kbn-ui-shared-deps/webpack.config.js index 831e1e55573b3e..c81da4689052a5 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 0e495391c94f2a..34a15a82738020 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 } 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,13 +79,10 @@ 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) => { - return fetchLandingPageData(params, { theme }); + return fetchLandingPageData(params, { theme: euiThemeVars }); }, hasData, }); 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 e5020202b77213..00000000000000 --- 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; -}