[bootstrap/styles] add early support for v8 themes

elastic · May 14, 2020 · 441bff8 · 441bff8
1 parent 8f99f60
commit 441bff8
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/..._plugins/kibana/public/management/sections/index_patterns/create_button/create_button.tsx b/..._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<Props, State> {
 
   private renderBetaBadge = () => {
     return (
-      <EuiBadge color={euiColorAccent}>
+      <EuiBadge color={euiTheme.euiColorAccent}>
         <FormattedMessage
           id="kbn.management.indexPatternList.createButton.betaLabel"
           defaultMessage="Beta"

diff --git a/src/legacy/core_plugins/kibana/server/ui_setting_defaults.js b/src/legacy/core_plugins/kibana/server/ui_setting_defaults.js
@@ -989,6 +989,18 @@ export function getUiSettingDefaults() {
       }),
       requiresPageReload: true,
     },
+    'theme:version': {
+      name: i18n.translate('kbn.advancedSettings.themeVersionTitle', {
+        defaultMessage: 'Theme version',
+      }),
+      value: 'v7',
+      type: 'select',
+      options: ['v7', 'v8'],
+      description: i18n.translate('kbn.advancedSettings.themeVersionText', {
+        defaultMessage: `Switch between the theme used for the current and next version of Kibana. A page refresh is required for the setting to be applied.`,
+      }),
+      requiresPageReload: true,
+    },
     'filters:pinnedByDefault': {
       name: i18n.translate('kbn.advancedSettings.pinFiltersTitle', {
         defaultMessage: 'Pin filters by default',

diff --git a/src/legacy/ui/ui_render/bootstrap/template.js.hbs b/src/legacy/ui/ui_render/bootstrap/template.js.hbs
@@ -1,6 +1,7 @@
 var kbnCsp = JSON.parse(document.querySelector('kbn-csp').getAttribute('data'));
 window.__kbnStrictCsp__ = kbnCsp.strictCsp;
 window.__kbnDarkMode__ = {{darkMode}};
+window.__kbnThemeVersion__ = "{{themeVersion}}";
 window.__kbnPublicPath__ = {{publicPathMap}};
 
 if (window.__kbnStrictCsp__ && window.__kbnCspNotEnforced__) {

diff --git a/src/legacy/ui/ui_render/ui_render_mixin.js b/src/legacy/ui/ui_render/ui_render_mixin.js
@@ -96,6 +96,11 @@ export function uiRenderMixin(kbnServer, server, config) {
             ? await uiSettings.get('theme:darkMode')
             : false;
 
+        const themeVersion =
+          !authEnabled || request.auth.isAuthenticated
+            ? await uiSettings.get('theme:version')
+            : 'v7';
+
         const buildHash = server.newPlatform.env.packageInfo.buildNum;
         const basePath = config.get('server.basePath');
 
@@ -114,12 +119,16 @@ export function uiRenderMixin(kbnServer, server, config) {
           `${regularBundlePath}/kbn-ui-shared-deps/${UiSharedDeps.baseCssDistFilename}`,
           ...(darkMode
             ? [
-                `${regularBundlePath}/kbn-ui-shared-deps/${UiSharedDeps.darkCssDistFilename}`,
+                themeVersion === 'v7'
+                  ? `${regularBundlePath}/kbn-ui-shared-deps/${UiSharedDeps.darkCssDistFilename}`
+                  : `${regularBundlePath}/kbn-ui-shared-deps/${UiSharedDeps.darkV8CssDistFilename}`,
                 `${basePath}/node_modules/@kbn/ui-framework/dist/kui_dark.css`,
                 `${regularBundlePath}/dark_theme.style.css`,
               ]
             : [
-                `${regularBundlePath}/kbn-ui-shared-deps/${UiSharedDeps.lightCssDistFilename}`,
+                themeVersion === 'v7'
+                  ? `${regularBundlePath}/kbn-ui-shared-deps/${UiSharedDeps.lightCssDistFilename}`
+                  : `${regularBundlePath}/kbn-ui-shared-deps/${UiSharedDeps.lightV8CssDistFilename}`,
                 `${basePath}/node_modules/@kbn/ui-framework/dist/kui_light.css`,
                 `${regularBundlePath}/light_theme.style.css`,
               ]),
@@ -186,6 +195,7 @@ export function uiRenderMixin(kbnServer, server, config) {
         const bootstrap = new AppBootstrap({
           templateData: {
             darkMode,
+            themeVersion,
             jsDependencyPaths,
             styleSheetPaths,
             publicPathMap,