[bootstrap/styles] add early support for v8 themes (#66673)

packages/kbn-ui-shared-deps/entry.js

@@ -48,9 +48,16 @@ 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 let ElasticEuiLightTheme;
+export let ElasticEuiDarkTheme;
+if (window.__kbnThemeVersion__ === 'v7') {
+  ElasticEuiLightTheme = require('@elastic/eui/dist/eui_theme_light.json');
+  ElasticEuiDarkTheme = require('@elastic/eui/dist/eui_theme_dark.json');
+} else {
+  ElasticEuiLightTheme = require('@elastic/eui/dist/eui_theme_amsterdam_light.json');
+  ElasticEuiDarkTheme = require('@elastic/eui/dist/eui_theme_amsterdam_dark.json');
+}
 
 // massive deps that we should really get rid of or reduce in size substantially
 export const ElasticsearchBrowser = require('elasticsearch-browser/elasticsearch.js');

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
  */

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',

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",

packages/kbn-ui-shared-deps/webpack.config.js

@@ -32,14 +32,22 @@ 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',
     ],
+    '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,

src/legacy/core_plugins/kibana/server/ui_setting_defaults.js

@@ -810,6 +810,18 @@ export function getUiSettingDefaults() {
       }),
       requiresPageReload: true,
     },
+    'theme:version': {
+      name: i18n.translate('kbn.advancedSettings.themeVersionTitle', {
+        defaultMessage: 'Theme version',
+      }),
+      value: 'v7',
+      type: 'select',
+      options: ['v7', 'v8 (beta)'],
+      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',

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__) {

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,