[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>
This commit is contained in:
parent
9ff68e4c8c
commit
481dccdb6f
|
@ -61,5 +61,8 @@ if (window.__kbnThemeVersion__ === 'v7') {
|
||||||
ElasticEuiDarkTheme = require('@elastic/eui/dist/eui_theme_amsterdam_dark.json');
|
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
|
// massive deps that we should really get rid of or reduce in size substantially
|
||||||
export const ElasticsearchBrowser = require('elasticsearch-browser/elasticsearch.js');
|
export const ElasticsearchBrowser = require('elasticsearch-browser/elasticsearch.js');
|
||||||
|
|
|
@ -44,6 +44,7 @@ exports.externals = {
|
||||||
'react-router-dom': '__kbnSharedDeps__.ReactRouterDom',
|
'react-router-dom': '__kbnSharedDeps__.ReactRouterDom',
|
||||||
'styled-components': '__kbnSharedDeps__.StyledComponents',
|
'styled-components': '__kbnSharedDeps__.StyledComponents',
|
||||||
'@kbn/monaco': '__kbnSharedDeps__.KbnMonaco',
|
'@kbn/monaco': '__kbnSharedDeps__.KbnMonaco',
|
||||||
|
'@kbn/ui-shared-deps/theme': '__kbnSharedDeps__.Theme',
|
||||||
// this is how plugins/consumers from npm load monaco
|
// this is how plugins/consumers from npm load monaco
|
||||||
'monaco-editor/esm/vs/editor/editor.api': '__kbnSharedDeps__.MonacoBarePluginApi',
|
'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': '__kbnSharedDeps__.ElasticEuiLibServices',
|
||||||
'@elastic/eui/lib/services/format': '__kbnSharedDeps__.ElasticEuiLibServicesFormat',
|
'@elastic/eui/lib/services/format': '__kbnSharedDeps__.ElasticEuiLibServicesFormat',
|
||||||
'@elastic/eui/dist/eui_charts_theme': '__kbnSharedDeps__.ElasticEuiChartsTheme',
|
'@elastic/eui/dist/eui_charts_theme': '__kbnSharedDeps__.ElasticEuiChartsTheme',
|
||||||
'@elastic/eui/dist/eui_theme_light.json': '__kbnSharedDeps__.ElasticEuiLightTheme',
|
'@elastic/eui/dist/eui_theme_light.json': '__kbnSharedDeps__.Theme.euiLightVars',
|
||||||
'@elastic/eui/dist/eui_theme_dark.json': '__kbnSharedDeps__.ElasticEuiDarkTheme',
|
'@elastic/eui/dist/eui_theme_dark.json': '__kbnSharedDeps__.Theme.euiDarkVars',
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* massive deps that we should really get rid of or reduce in size substantially
|
* massive deps that we should really get rid of or reduce in size substantially
|
||||||
|
|
44
packages/kbn-ui-shared-deps/theme.ts
Normal file
44
packages/kbn-ui-shared-deps/theme.ts
Normal file
|
@ -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;
|
||||||
|
}
|
|
@ -1,4 +1,7 @@
|
||||||
{
|
{
|
||||||
"extends": "../../tsconfig.json",
|
"extends": "../../tsconfig.json",
|
||||||
"include": ["index.d.ts", "./monaco"]
|
"include": [
|
||||||
|
"index.d.ts",
|
||||||
|
"theme.ts"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
|
@ -78,6 +78,17 @@ exports.getWebpackConfig = ({ dev = false } = {}) => ({
|
||||||
test: /\.css$/,
|
test: /\.css$/,
|
||||||
use: [MiniCssExtractPlugin.loader, 'css-loader'],
|
use: [MiniCssExtractPlugin.loader, 'css-loader'],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
include: [require.resolve('./theme.ts')],
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: 'babel-loader',
|
||||||
|
options: {
|
||||||
|
presets: [require.resolve('@kbn/babel-preset/webpack_preset')],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
|
|
||||||
import { i18n } from '@kbn/i18n';
|
import { i18n } from '@kbn/i18n';
|
||||||
import { lazy } from 'react';
|
import { lazy } from 'react';
|
||||||
|
import { euiThemeVars as theme } from '@kbn/ui-shared-deps/theme';
|
||||||
import { ConfigSchema } from '.';
|
import { ConfigSchema } from '.';
|
||||||
import { ObservabilityPluginSetup } from '../../observability/public';
|
import { ObservabilityPluginSetup } from '../../observability/public';
|
||||||
import {
|
import {
|
||||||
|
@ -42,7 +43,6 @@ import {
|
||||||
fetchLandingPageData,
|
fetchLandingPageData,
|
||||||
hasData,
|
hasData,
|
||||||
} from './services/rest/observability_dashboard';
|
} from './services/rest/observability_dashboard';
|
||||||
import { getTheme } from './utils/get_theme';
|
|
||||||
|
|
||||||
export type ApmPluginSetup = void;
|
export type ApmPluginSetup = void;
|
||||||
export type ApmPluginStart = void;
|
export type ApmPluginStart = void;
|
||||||
|
@ -79,9 +79,6 @@ export class ApmPlugin implements Plugin<ApmPluginSetup, ApmPluginStart> {
|
||||||
pluginSetupDeps.home.featureCatalogue.register(featureCatalogueEntry);
|
pluginSetupDeps.home.featureCatalogue.register(featureCatalogueEntry);
|
||||||
|
|
||||||
if (plugins.observability) {
|
if (plugins.observability) {
|
||||||
const theme = getTheme({
|
|
||||||
isDarkMode: core.uiSettings.get('theme:darkMode'),
|
|
||||||
});
|
|
||||||
plugins.observability.dashboard.register({
|
plugins.observability.dashboard.register({
|
||||||
appName: 'apm',
|
appName: 'apm',
|
||||||
fetchData: async (params) => {
|
fetchData: async (params) => {
|
||||||
|
|
|
@ -6,9 +6,7 @@
|
||||||
|
|
||||||
import { fetchLandingPageData, hasData } from './observability_dashboard';
|
import { fetchLandingPageData, hasData } from './observability_dashboard';
|
||||||
import * as createCallApmApi from './createCallApmApi';
|
import * as createCallApmApi from './createCallApmApi';
|
||||||
import { getTheme } from '../../utils/get_theme';
|
import { euiThemeVars as theme } from '@kbn/ui-shared-deps/theme';
|
||||||
|
|
||||||
const theme = getTheme({ isDarkMode: false });
|
|
||||||
|
|
||||||
describe('Observability dashboard data', () => {
|
describe('Observability dashboard data', () => {
|
||||||
const callApmApiMock = jest.spyOn(createCallApmApi, 'callApmApi');
|
const callApmApiMock = jest.spyOn(createCallApmApi, 'callApmApi');
|
||||||
|
|
|
@ -6,12 +6,12 @@
|
||||||
|
|
||||||
import { i18n } from '@kbn/i18n';
|
import { i18n } from '@kbn/i18n';
|
||||||
import { sum } from 'lodash';
|
import { sum } from 'lodash';
|
||||||
|
import { Theme } from '@kbn/ui-shared-deps/theme';
|
||||||
import {
|
import {
|
||||||
ApmFetchDataResponse,
|
ApmFetchDataResponse,
|
||||||
FetchDataParams,
|
FetchDataParams,
|
||||||
} from '../../../../observability/public';
|
} from '../../../../observability/public';
|
||||||
import { callApmApi } from './createCallApmApi';
|
import { callApmApi } from './createCallApmApi';
|
||||||
import { Theme } from '../../utils/get_theme';
|
|
||||||
|
|
||||||
interface Options {
|
interface Options {
|
||||||
theme: Theme;
|
theme: Theme;
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
Loading…
Reference in a new issue