From 441bff86dbbb3229059496456b5611f6c6697e25 Mon Sep 17 00:00:00 2001 From: spalger Date: Thu, 14 May 2020 16:12:19 -0700 Subject: [PATCH] [bootstrap/styles] add early support for v8 themes --- packages/kbn-ui-shared-deps/entry.js | 3 +- packages/kbn-ui-shared-deps/eui_theme.ts | 40 +++++++++++++++++++ packages/kbn-ui-shared-deps/index.d.ts | 10 +++++ packages/kbn-ui-shared-deps/index.js | 10 +++-- packages/kbn-ui-shared-deps/package.json | 2 +- packages/kbn-ui-shared-deps/tsconfig.json | 3 +- packages/kbn-ui-shared-deps/webpack.config.js | 21 ++++++++-- .../create_button/create_button.tsx | 5 +-- .../kibana/server/ui_setting_defaults.js | 12 ++++++ .../ui/ui_render/bootstrap/template.js.hbs | 1 + src/legacy/ui/ui_render/ui_render_mixin.js | 14 ++++++- 11 files changed, 105 insertions(+), 16 deletions(-) create mode 100644 packages/kbn-ui-shared-deps/eui_theme.ts diff --git a/packages/kbn-ui-shared-deps/entry.js b/packages/kbn-ui-shared-deps/entry.js index f19271de8ad27..0ba72aa89f326 100644 --- a/packages/kbn-ui-shared-deps/entry.js +++ b/packages/kbn-ui-shared-deps/entry.js @@ -48,9 +48,8 @@ export const ElasticCharts = require('@elastic/charts'); export const ElasticEui = require('@elastic/eui'); export const ElasticEuiLibServices = require('@elastic/eui/lib/services'); export const ElasticEuiLibServicesFormat = require('@elastic/eui/lib/services/format'); -export const ElasticEuiLightTheme = require('@elastic/eui/dist/eui_theme_light.json'); -export const ElasticEuiDarkTheme = require('@elastic/eui/dist/eui_theme_dark.json'); export const ElasticEuiChartsTheme = require('@elastic/eui/dist/eui_charts_theme'); +export * from './eui_theme.ts'; // 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/eui_theme.ts b/packages/kbn-ui-shared-deps/eui_theme.ts new file mode 100644 index 0000000000000..89ec924bf6669 --- /dev/null +++ b/packages/kbn-ui-shared-deps/eui_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 euiLightTheme: typeof Theme; +export let euiDarkTheme: typeof Theme; +if ((window as any).__kbnThemeVersion__ === 'v7') { + euiLightTheme = require('@elastic/eui/dist/eui_theme_light.json'); + euiDarkTheme = require('@elastic/eui/dist/eui_theme_dark.json'); +} else { + euiLightTheme = require('@elastic/eui/dist/eui_theme_amsterdam_light.json'); + euiDarkTheme = require('@elastic/eui/dist/eui_theme_amsterdam_dark.json'); +} + +/** + * EUI Theme vars that automatically adjust to light/dark theme + */ +export let euiTheme: typeof Theme; +if ((window as any).__kbnDarkTheme__) { + euiTheme = euiDarkTheme; +} else { + euiTheme = euiLightTheme; +} diff --git a/packages/kbn-ui-shared-deps/index.d.ts b/packages/kbn-ui-shared-deps/index.d.ts index b829c87d91c4a..cd659b6f04853 100644 --- a/packages/kbn-ui-shared-deps/index.d.ts +++ b/packages/kbn-ui-shared-deps/index.d.ts @@ -42,11 +42,21 @@ export const baseCssDistFilename: string; */ export const darkCssDistFilename: string; +/** + * Filename of the dark-theme css file in the distributable directory + */ +export const darkV8CssDistFilename: string; + /** * Filename of the light-theme css file in the distributable directory */ export const lightCssDistFilename: string; +/** + * Filename of the light-theme css file in the distributable directory + */ +export const lightV8CssDistFilename: string; + /** * Externals mapping inteded to be used in a webpack config */ diff --git a/packages/kbn-ui-shared-deps/index.js b/packages/kbn-ui-shared-deps/index.js index 42ed08259ac8f..d871a8391ff08 100644 --- a/packages/kbn-ui-shared-deps/index.js +++ b/packages/kbn-ui-shared-deps/index.js @@ -23,8 +23,10 @@ exports.distDir = Path.resolve(__dirname, 'target'); exports.jsDepFilenames = ['kbn-ui-shared-deps.@elastic.js']; exports.jsFilename = 'kbn-ui-shared-deps.js'; exports.baseCssDistFilename = 'kbn-ui-shared-deps.css'; -exports.lightCssDistFilename = 'kbn-ui-shared-deps.light.css'; -exports.darkCssDistFilename = 'kbn-ui-shared-deps.dark.css'; +exports.lightCssDistFilename = 'kbn-ui-shared-deps.v7.light.css'; +exports.lightV8CssDistFilename = 'kbn-ui-shared-deps.v8.light.css'; +exports.darkCssDistFilename = 'kbn-ui-shared-deps.v7.dark.css'; +exports.darkV8CssDistFilename = 'kbn-ui-shared-deps.v8.dark.css'; exports.externals = { // stateful deps angular: '__kbnSharedDeps__.Angular', @@ -54,8 +56,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__.euiLightTheme', + '@elastic/eui/dist/eui_theme_dark.json': '__kbnSharedDeps__.euiDarkTheme', /** * massive deps that we should really get rid of or reduce in size substantially diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json index 8259f251a9be3..5292a825ab4d9 100644 --- a/packages/kbn-ui-shared-deps/package.json +++ b/packages/kbn-ui-shared-deps/package.json @@ -6,7 +6,7 @@ "scripts": { "build": "node scripts/build", "kbn:bootstrap": "node scripts/build --dev", - "kbn:watch": "node scripts/build --watch" + "kbn:watch": "node scripts/build --dev --watch" }, "dependencies": { "@elastic/charts": "19.2.0", diff --git a/packages/kbn-ui-shared-deps/tsconfig.json b/packages/kbn-ui-shared-deps/tsconfig.json index 5d981c73f1d21..22dc6e9331463 100644 --- a/packages/kbn-ui-shared-deps/tsconfig.json +++ b/packages/kbn-ui-shared-deps/tsconfig.json @@ -2,6 +2,7 @@ "extends": "../../tsconfig.json", "include": [ "index.d.ts", - "monaco.ts" + "monaco.ts", + "eui_theme.ts" ] } diff --git a/packages/kbn-ui-shared-deps/webpack.config.js b/packages/kbn-ui-shared-deps/webpack.config.js index ca913d0f16417..481f1e091d7b0 100644 --- a/packages/kbn-ui-shared-deps/webpack.config.js +++ b/packages/kbn-ui-shared-deps/webpack.config.js @@ -32,14 +32,26 @@ exports.getWebpackConfig = ({ dev = false } = {}) => ({ mode: dev ? 'development' : 'production', entry: { 'kbn-ui-shared-deps': './entry.js', - 'kbn-ui-shared-deps.dark': [ + 'kbn-ui-shared-deps.v7.dark': [ '@elastic/eui/dist/eui_theme_dark.css', '@elastic/charts/dist/theme_only_dark.css', ], - 'kbn-ui-shared-deps.light': [ + 'kbn-ui-shared-deps.v7.light': [ '@elastic/eui/dist/eui_theme_light.css', '@elastic/charts/dist/theme_only_light.css', ], + ...(dev + ? { + 'kbn-ui-shared-deps.v8.dark': [ + '@elastic/eui/dist/eui_theme_amsterdam_dark.css', + '@elastic/charts/dist/theme_only_dark.css', + ], + 'kbn-ui-shared-deps.v8.light': [ + '@elastic/eui/dist/eui_theme_amsterdam_light.css', + '@elastic/charts/dist/theme_only_light.css', + ], + } + : {}), }, context: __dirname, devtool: dev ? '#cheap-source-map' : false, @@ -71,7 +83,7 @@ exports.getWebpackConfig = ({ dev = false } = {}) => ({ use: [MiniCssExtractPlugin.loader, 'css-loader'], }, { - include: [require.resolve('./monaco.ts')], + include: [require.resolve('./monaco.ts'), require.resolve('./eui_theme.ts')], use: [ { loader: 'babel-loader', @@ -121,6 +133,9 @@ exports.getWebpackConfig = ({ dev = false } = {}) => ({ ...(dev ? [] : [ + new webpack.DefinePlugin({ + 'window.__kbnThemeVersion__': '"v7"', + }), new CompressionPlugin({ algorithm: 'brotliCompress', filename: '[path].br', diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_button/create_button.tsx b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_button/create_button.tsx index 1309c85a07099..5997107159d61 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_button/create_button.tsx +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_button/create_button.tsx @@ -17,8 +17,7 @@ * under the License. */ -// @ts-ignore -import { euiColorAccent } from '@elastic/eui/dist/eui_theme_light.json'; +import { euiTheme } from '@kbn/ui-shared-deps/eui_theme'; import React, { Component, Fragment } from 'react'; import { @@ -144,7 +143,7 @@ class CreateButtonComponent extends Component { private renderBetaBadge = () => { return ( - +