[Visual Refresh] Add Borealis theme (#199993)

## Summary This PR introduces the first internal version of the new theme `Borealis` and ensures that: - themes can be switched between "Amsterdam" and "Borealis" - theme-specific Sass files are available and can be loaded with `KBN_OPTIMIZER_THEMES=experimental` - legacy JSON variable usage accounts for both themes - static template styles account for both themes ## Running locally ```yml // kibana.dev.yml or kibana.yml uiSettings.experimental.themeSwitcherEnabled: true ``` Start kibana ``` KBN_OPTIMIZER_THEMES='v8light,v8dark,borealislight,borealisdark' yarn start or KBN_OPTIMIZER_THEMES=experimental yarn start ``` ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed --------- Co-authored-by: Tomasz Kajtoch <[email protected]>
elastic · Nov 19, 2024 · ee49986 · ee49986
1 parent b46d93f
commit ee49986
Show file tree

Hide file tree

Showing 24 changed files with 155 additions and 56 deletions.
diff --git a/package.json b/package.json
@@ -118,7 +118,8 @@
     "@elastic/ecs": "^8.11.1",
     "@elastic/elasticsearch": "^8.15.2",
     "@elastic/ems-client": "8.5.3",
-    "@elastic/eui": "97.3.1",
+    "@elastic/eui": "97.3.1-borealis.2",
+    "@elastic/eui-theme-borealis": "0.0.2",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "^1.2.3",
     "@elastic/numeral": "^2.5.1",

diff --git a/packages/core/rendering/core-rendering-server-internal/src/views/styles.tsx b/packages/core/rendering/core-rendering-server-internal/src/views/styles.tsx
@@ -8,25 +8,46 @@
  */
 
 import React, { FC } from 'react';
-import type { DarkModeValue } from '@kbn/core-ui-settings-common';
+import { type DarkModeValue, ThemeName } from '@kbn/core-ui-settings-common';
 
 interface Props {
   darkMode: DarkModeValue;
+  themeName: ThemeName;
   stylesheetPaths: string[];
 }
 
-export const Styles: FC<Props> = ({ darkMode, stylesheetPaths }) => {
+export const Styles: FC<Props> = ({ darkMode, themeName, stylesheetPaths }) => {
   return (
     <>
-      {darkMode !== 'system' && <InlineStyles darkMode={darkMode} />}
+      {darkMode !== 'system' && <InlineStyles darkMode={darkMode} themeName={themeName} />}
       {stylesheetPaths.map((path) => (
         <link key={path} rel="stylesheet" type="text/css" href={path} />
       ))}
     </>
   );
 };
 
-const InlineStyles: FC<{ darkMode: boolean }> = ({ darkMode }) => {
+const InlineStyles: FC<{ darkMode: boolean; themeName: ThemeName }> = ({ darkMode, themeName }) => {
+  const getThemeStyles = (theme: ThemeName) => {
+    if (theme === 'borealis') {
+      return {
+        pageBackground: darkMode ? '#07101F' : '#F6F9FC', // colors.body
+        welcomeText: darkMode ? '#8E9FBC' : '#5A6D8C', // colors.subduedText
+        progress: darkMode ? '#172336' : '#ECF1F9', // colors.lightestShade
+        progressBefore: darkMode ? '#599DFF' : '#0B64DD', // colors.primary
+      };
+    }
+
+    return {
+      pageBackground: darkMode ? '#141519' : '#F8FAFD',
+      welcomeText: darkMode ? '#98A2B3' : '#69707D',
+      progress: darkMode ? '#25262E' : '#F5F7FA',
+      progressBefore: darkMode ? '#1BA9F5' : '#006DE4',
+    };
+  };
+
+  const themeStyles = getThemeStyles(themeName);
+
   // must be kept in sync with
   // packages/core/apps/core-apps-server-internal/assets/legacy_theme.js
   /* eslint-disable react/no-danger */
@@ -36,19 +57,19 @@ const InlineStyles: FC<{ darkMode: boolean }> = ({ darkMode }) => {
         __html: `
 
           html {
-            background-color: ${darkMode ? '#141519' : '#F8FAFD'}
+            background-color: ${themeStyles.pageBackground}
           }
 
           .kbnWelcomeText {
-            color: ${darkMode ? '#98A2B3' : '#69707D'};
+            color: ${themeStyles.welcomeText};
           }
 
           .kbnProgress {
-            background-color: ${darkMode ? '#25262E' : '#F5F7FA'};
+            background-color: ${themeStyles.progress};
           }
 
           .kbnProgress:before {
-            background-color: ${darkMode ? '#1BA9F5' : '#006DE4'};
+            background-color: ${themeStyles.progressBefore};
           }
 
         `,

diff --git a/packages/core/rendering/core-rendering-server-internal/src/views/template.tsx b/packages/core/rendering/core-rendering-server-internal/src/views/template.tsx
@@ -56,7 +56,11 @@ export const Template: FunctionComponent<Props> = ({
         {/* Inject EUI reset and global styles before all other component styles */}
         <meta name={EUI_STYLES_GLOBAL} />
         <meta name="emotion" />
-        <Styles darkMode={darkMode} stylesheetPaths={stylesheetPaths} />
+        <Styles
+          darkMode={darkMode}
+          themeName={injectedMetadata.theme.name}
+          stylesheetPaths={stylesheetPaths}
+        />
         {scriptPaths.map((path) => (
           <script key={path} src={path} />
         ))}

diff --git a/packages/core/ui-settings/core-ui-settings-common/src/theme.ts b/packages/core/ui-settings/core-ui-settings-common/src/theme.ts
@@ -52,6 +52,11 @@ export function parseThemeTags(input?: unknown): ThemeTags {
     return DEFAULT_THEME_TAGS;
   }
 
+  // TODO: remove when Borealis is in public beta
+  if (input === 'experimental') {
+    return SUPPORTED_THEME_TAGS;
+  }
+
   let rawTags: string[];
   if (typeof input === 'string') {
     rawTags = input.split(',').map((tag) => tag.trim());

diff --git a/packages/kbn-eslint-config/.eslintrc.js b/packages/kbn-eslint-config/.eslintrc.js
@@ -127,13 +127,16 @@ module.exports = {
           exclude: USES_STYLED_COMPONENTS,
           disallowedMessage: `Prefer using @emotion/react instead. To use styled-components, ensure you plugin is enabled in packages/kbn-babel-preset/styled_components_files.js.`,
         },
-        ...['@elastic/eui/dist/eui_theme_light.json', '@elastic/eui/dist/eui_theme_dark.json'].map(
-          (from) => ({
-            from,
-            to: false,
-            disallowedMessage: `Use "@kbn/ui-theme" to access theme vars.`,
-          })
-        ),
+        ...[
+          '@elastic/eui/dist/eui_theme_amsterdam_light.json',
+          '@elastic/eui/dist/eui_theme_amsterdam_dark.json',
+          '@elastic/eui/dist/eui_theme_borealis_light.json',
+          '@elastic/eui/dist/eui_theme_borealis_dark.json',
+        ].map((from) => ({
+          from,
+          to: false,
+          disallowedMessage: `Use "@kbn/ui-theme" to access theme vars.`,
+        })),
         {
           from: '@kbn/test/jest',
           to: '@kbn/test-jest-helpers',

diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml
@@ -2,7 +2,7 @@ pageLoadAssetSize:
   actions: 20000
   advancedSettings: 27596
   aiAssistantManagementSelection: 19146
-  aiops: 16600
+  aiops: 16670
   alerting: 106936
   apm: 64385
   banners: 17946
@@ -31,7 +31,7 @@ pageLoadAssetSize:
   dataUsage: 30000
   dataViewEditor: 28082
   dataViewFieldEditor: 42021
-  dataViewManagement: 5300
+  dataViewManagement: 5370
   dataViews: 65000
   dataVisualizer: 30000
   devTools: 38637

diff --git a/packages/kbn-ui-shared-deps-npm/webpack.config.js b/packages/kbn-ui-shared-deps-npm/webpack.config.js
@@ -65,8 +65,10 @@ module.exports = (_, argv) => {
         '@elastic/eui/optimize/es/components/provider/nested',
         '@elastic/eui/optimize/es/services',
         '@elastic/eui/optimize/es/services/format',
-        '@elastic/eui/dist/eui_theme_light.json',
-        '@elastic/eui/dist/eui_theme_dark.json',
+        '@elastic/eui/dist/eui_theme_amsterdam_light.json',
+        '@elastic/eui/dist/eui_theme_amsterdam_dark.json',
+        '@elastic/eui/dist/eui_theme_borealis_light.json',
+        '@elastic/eui/dist/eui_theme_borealis_dark.json',
         '@elastic/numeral',
         '@emotion/cache',
         '@emotion/react',

diff --git a/packages/kbn-ui-shared-deps-src/src/definitions.js b/packages/kbn-ui-shared-deps-src/src/definitions.js
@@ -77,6 +77,7 @@ const externals = {
     '__kbnSharedDeps__.ElasticEuiLibComponentsUseIsNestedEuiProvider',
   '@elastic/eui/lib/services': '__kbnSharedDeps__.ElasticEuiLibServices',
   '@elastic/eui/lib/services/format': '__kbnSharedDeps__.ElasticEuiLibServicesFormat',
+  '@elastic/eui-theme-borealis': '__kbnSharedDeps__.ElasticEuiThemeBorealis',
 
   // transient dep of eui
   '@hello-pangea/dnd': '__kbnSharedDeps__.HelloPangeaDnd',

diff --git a/packages/kbn-ui-shared-deps-src/src/entry.js b/packages/kbn-ui-shared-deps-src/src/entry.js
@@ -41,6 +41,7 @@ export const Rxjs = require('rxjs');
 export const ElasticNumeral = require('@elastic/numeral');
 export const ElasticCharts = require('@elastic/charts');
 export const ElasticEui = require('@elastic/eui');
+export const ElasticEuiThemeBorealis = require('@elastic/eui-theme-borealis');
 export const ElasticEuiLibComponentsUseIsNestedEuiProvider = require('@elastic/eui/optimize/es/components/provider/nested');
 export const ElasticEuiLibServices = require('@elastic/eui/optimize/es/services');
 export const ElasticEuiLibServicesFormat = require('@elastic/eui/optimize/es/services/format');

diff --git a/packages/kbn-ui-theme/src/theme.ts b/packages/kbn-ui-theme/src/theme.ts
@@ -7,12 +7,15 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-// TODO(tkajtoch): Add support for multiple themes
+/* eslint-disable-next-line @kbn/eslint/module_migration */
+import { default as v8Light } from '@elastic/eui/dist/eui_theme_amsterdam_light.json';
+/* eslint-disable-next-line @kbn/eslint/module_migration */
+import { default as v8Dark } from '@elastic/eui/dist/eui_theme_amsterdam_dark.json';
 
 /* eslint-disable-next-line @kbn/eslint/module_migration */
-import { default as v8Light } from '@elastic/eui/dist/eui_theme_light.json';
+import { default as borealisLight } from '@elastic/eui/dist/eui_theme_borealis_light.json';
 /* eslint-disable-next-line @kbn/eslint/module_migration */
-import { default as v8Dark } from '@elastic/eui/dist/eui_theme_dark.json';
+import { default as borealisDark } from '@elastic/eui/dist/eui_theme_borealis_dark.json';
 
 const globals: any = typeof window === 'undefined' ? {} : window;
 
@@ -27,19 +30,40 @@ export const version = 8;
 /** @deprecated theme can be dynamic now, access is discouraged */
 export const darkMode = tag.endsWith('dark');
 
-export const euiLightVars: Theme = v8Light;
-export const euiDarkVars: Theme = v8Dark;
-
 let isDarkMode = darkMode;
 export const _setDarkMode = (mode: boolean) => {
   isDarkMode = mode;
 };
 
+const getThemeVars = (): { light: Theme; dark: Theme } => {
+  if (globals?.__kbnThemeTag__?.includes('borealis')) {
+    return {
+      light: borealisLight,
+      dark: borealisDark,
+    };
+  }
+
+  return {
+    light: v8Light,
+    dark: v8Dark,
+  };
+};
+
+export const euiLightVars: Theme = getThemeVars().light;
+export const euiDarkVars: Theme = getThemeVars().dark;
+
 /**
  * EUI Theme vars that automatically adjust to light/dark theme
  */
-export const euiThemeVars: Theme = new Proxy(isDarkMode ? euiDarkVars : euiLightVars, {
-  get(accessedTarget, accessedKey, ...rest) {
-    return Reflect.get(isDarkMode ? euiDarkVars : euiLightVars, accessedKey, ...rest);
-  },
-});
+export const euiThemeVars: Theme = new Proxy(
+  isDarkMode ? getThemeVars().dark : getThemeVars().light,
+  {
+    get(accessedTarget, accessedKey, ...rest) {
+      return Reflect.get(
+        isDarkMode ? getThemeVars().dark : getThemeVars().light,
+        accessedKey,
+        ...rest
+      );
+    },
+  }
+);
diff --git a/packages/react/kibana_context/common/theme.ts b/packages/react/kibana_context/common/theme.ts
@@ -8,6 +8,7 @@
  */
 
 import { EuiThemeSystem, EuiThemeAmsterdam } from '@elastic/eui';
+import { EuiThemeBorealis } from '@elastic/eui-theme-borealis';
 
 export interface ThemeConfig {
   euiTheme: EuiThemeSystem;
@@ -17,6 +18,9 @@ const THEMES: Record<string, ThemeConfig> = {
   amsterdam: {
     euiTheme: EuiThemeAmsterdam,
   },
+  borealis: {
+    euiTheme: EuiThemeBorealis,
+  },
 };
 
 export const getThemeConfigByName = (name: string): ThemeConfig | null => {

diff --git a/src/core/public/styles/core_app/_globals_borealisdark.scss b/src/core/public/styles/core_app/_globals_borealisdark.scss
@@ -0,0 +1,9 @@
+// v9 borealis theme global scope
+//
+// prepended to all .scss imports (from JS, when borealis dark theme selected)
+
+@import '@elastic/eui-theme-borealis/src/theme_dark.scss';
+
+@import './mixins';
+
+$kbnThemeVersion: 'borealisdark';
diff --git a/src/core/public/styles/core_app/_globals_borealislight.scss b/src/core/public/styles/core_app/_globals_borealislight.scss
@@ -0,0 +1,9 @@
+// v9 borealis theme global scope
+//
+// prepended to all .scss imports (from JS, when borealis light theme selected)
+
+@import '@elastic/eui-theme-borealis/src/theme_light.scss';
+
+@import './mixins';
+
+$kbnThemeVersion: 'borealislight';
diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
@@ -87,7 +87,8 @@ export const LICENSE_OVERRIDES = {
   '[email protected]': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/[email protected]': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/[email protected]': ['Elastic License 2.0'],
-  '@elastic/[email protected]': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/[email protected]': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/[email protected]': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
   '[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   '[email protected]': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
   '@bufbuild/[email protected]': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)

diff --git a/src/plugins/home/public/application/components/_solutions_section.scss b/src/plugins/home/public/application/components/_solutions_section.scss
@@ -24,6 +24,6 @@
   }
 
   &--securitySolution img {
-    background-color: $euiColorSuccess;
+    background-color: $euiColorAccentSecondary;
   }
 }
diff --git a/...public/classes/styles/heatmap/components/__snapshots__/heatmap_style_editor.test.tsx.snap b/...public/classes/styles/heatmap/components/__snapshots__/heatmap_style_editor.test.tsx.snap