From 19e641f8eaf3e456738ddf8556baeb739333f224 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Tue, 19 Nov 2024 16:35:10 +0100 Subject: [PATCH] [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 --- package.json | 3 +- .../src/views/styles.tsx | 37 +++++++++++---- .../src/views/template.tsx | 6 ++- .../core-ui-settings-common/src/theme.ts | 5 ++ packages/kbn-eslint-config/.eslintrc.js | 17 ++++--- packages/kbn-optimizer/limits.yml | 4 +- .../kbn-ui-shared-deps-npm/webpack.config.js | 6 ++- .../kbn-ui-shared-deps-src/src/definitions.js | 1 + packages/kbn-ui-shared-deps-src/src/entry.js | 1 + packages/kbn-ui-theme/src/theme.ts | 46 ++++++++++++++----- packages/react/kibana_context/common/theme.ts | 4 ++ .../core_app/_globals_borealisdark.scss | 9 ++++ .../core_app/_globals_borealislight.scss | 9 ++++ src/dev/license_checker/config.ts | 3 +- .../components/_solutions_section.scss | 2 +- .../heatmap_style_editor.test.tsx.snap | 6 +-- .../__snapshots__/prompt_page.test.tsx.snap | 4 +- .../unauthenticated_page.test.tsx.snap | 4 +- .../reset_session_page.test.tsx.snap | 4 +- .../components/endpoint/link_to_app.tsx | 2 +- .../test/functional/apps/infra/home_page.ts | 4 +- .../functional/apps/lens/group4/chart_data.ts | 2 +- .../functional/apps/lens/group5/heatmap.ts | 10 ++-- yarn.lock | 22 +++++++-- 24 files changed, 155 insertions(+), 56 deletions(-) create mode 100644 src/core/public/styles/core_app/_globals_borealisdark.scss create mode 100644 src/core/public/styles/core_app/_globals_borealislight.scss diff --git a/package.json b/package.json index b67d4b90fdf95..eed5b3a9b61cb 100644 --- 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 index ceeb6f4b7f9e2..54e8559ad25c1 100644 --- 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,17 +8,18 @@ */ 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 = ({ darkMode, stylesheetPaths }) => { +export const Styles: FC = ({ darkMode, themeName, stylesheetPaths }) => { return ( <> - {darkMode !== 'system' && } + {darkMode !== 'system' && } {stylesheetPaths.map((path) => ( ))} @@ -26,7 +27,27 @@ export const Styles: FC = ({ darkMode, stylesheetPaths }) => { ); }; -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 index fdbade121445d..d3556287a0333 100644 --- 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 = ({ {/* Inject EUI reset and global styles before all other component styles */} - + {scriptPaths.map((path) => (

Some Title

Some Body
Action#1
Action#2
"`; +exports[`PromptPage renders as expected with additional scripts 1`] = `"ElasticMockedFonts

Some Title

Some Body
Action#1
Action#2
"`; -exports[`PromptPage renders as expected without additional scripts 1`] = `"ElasticMockedFonts

Some Title

Some Body
Action#1
Action#2
"`; +exports[`PromptPage renders as expected without additional scripts 1`] = `"ElasticMockedFonts

Some Title

Some Body
Action#1
Action#2
"`; diff --git a/x-pack/plugins/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap b/x-pack/plugins/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap index 80a7e7a24e1e9..ab94f2c2efc8d 100644 --- a/x-pack/plugins/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap +++ b/x-pack/plugins/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`UnauthenticatedPage renders as expected 1`] = `"ElasticMockedFonts

We hit an authentication error

Try logging in again, and if the problem persists, contact your system administrator.

Log in
"`; +exports[`UnauthenticatedPage renders as expected 1`] = `"ElasticMockedFonts

We hit an authentication error

Try logging in again, and if the problem persists, contact your system administrator.

Log in
"`; -exports[`UnauthenticatedPage renders as expected with custom title 1`] = `"My Company NameMockedFonts

We hit an authentication error

Try logging in again, and if the problem persists, contact your system administrator.

Log in
"`; +exports[`UnauthenticatedPage renders as expected with custom title 1`] = `"My Company NameMockedFonts

We hit an authentication error

Try logging in again, and if the problem persists, contact your system administrator.

Log in
"`; diff --git a/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap b/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap index e7a902015afa7..fcab54e925cfb 100644 --- a/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap +++ b/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ResetSessionPage renders as expected 1`] = `"ElasticMockedFonts

You do not have permission to access the requested page

Either go back to the previous page or log in as a different user.

Log in as different user
"`; +exports[`ResetSessionPage renders as expected 1`] = `"ElasticMockedFonts

You do not have permission to access the requested page

Either go back to the previous page or log in as a different user.

Log in as different user
"`; -exports[`ResetSessionPage renders as expected with custom page title 1`] = `"My Company NameMockedFonts

You do not have permission to access the requested page

Either go back to the previous page or log in as a different user.

Log in as different user
"`; +exports[`ResetSessionPage renders as expected with custom page title 1`] = `"My Company NameMockedFonts

You do not have permission to access the requested page

Either go back to the previous page or log in as a different user.

Log in as different user
"`; diff --git a/x-pack/plugins/security_solution/public/common/components/endpoint/link_to_app.tsx b/x-pack/plugins/security_solution/public/common/components/endpoint/link_to_app.tsx index 2adecd4a42391..74b18c32c63a0 100644 --- a/x-pack/plugins/security_solution/public/common/components/endpoint/link_to_app.tsx +++ b/x-pack/plugins/security_solution/public/common/components/endpoint/link_to_app.tsx @@ -51,7 +51,7 @@ export const LinkToApp = memo( {children} ) : ( - + {children} )} diff --git a/x-pack/test/functional/apps/infra/home_page.ts b/x-pack/test/functional/apps/infra/home_page.ts index f36b3394e2a89..fc937afc3f3c9 100644 --- a/x-pack/test/functional/apps/infra/home_page.ts +++ b/x-pack/test/functional/apps/infra/home_page.ts @@ -426,8 +426,8 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { expect(nodesWithValue).to.eql([ { name: 'host-5', value: 10, color: '#6092c0' }, { name: 'host-4', value: 30, color: '#9ab6d5' }, - { name: 'host-1', value: 50, color: '#f1d9b9' }, - { name: 'host-2', value: 70, color: '#eba47a' }, + { name: 'host-1', value: 50, color: '#f6e0b9' }, + { name: 'host-2', value: 70, color: '#eda77a' }, { name: 'host-3', value: 90, color: '#e7664c' }, ]); }); diff --git a/x-pack/test/functional/apps/lens/group4/chart_data.ts b/x-pack/test/functional/apps/lens/group4/chart_data.ts index 3b3a51c289473..fc922f8d2df17 100644 --- a/x-pack/test/functional/apps/lens/group4/chart_data.ts +++ b/x-pack/test/functional/apps/lens/group4/chart_data.ts @@ -117,7 +117,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { { key: '5,722.775 - 8,529.22', name: '5,722.775 - 8,529.22', color: '#6092c0' }, { key: '8,529.22 - 11,335.665', name: '8,529.22 - 11,335.665', color: '#a8bfda' }, { key: '11,335.665 - 14,142.11', name: '11,335.665 - 14,142.11', color: '#ebeff5' }, - { key: '14,142.11 - 16,948.555', name: '14,142.11 - 16,948.555', color: '#ecb385' }, + { key: '14,142.11 - 16,948.555', name: '14,142.11 - 16,948.555', color: '#efb785' }, { key: '≥ 16,948.555', name: '≥ 16,948.555', color: '#e7664c' }, ]); }); diff --git a/x-pack/test/functional/apps/lens/group5/heatmap.ts b/x-pack/test/functional/apps/lens/group5/heatmap.ts index 7abcba0cb0780..a61afa2d24d8a 100644 --- a/x-pack/test/functional/apps/lens/group5/heatmap.ts +++ b/x-pack/test/functional/apps/lens/group5/heatmap.ts @@ -58,7 +58,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { { key: '5,722.775 - 8,529.22', name: '5,722.775 - 8,529.22', color: '#6092c0' }, { key: '8,529.22 - 11,335.665', name: '8,529.22 - 11,335.665', color: '#a8bfda' }, { key: '11,335.665 - 14,142.11', name: '11,335.665 - 14,142.11', color: '#ebeff5' }, - { key: '14,142.11 - 16,948.555', name: '14,142.11 - 16,948.555', color: '#ecb385' }, + { key: '14,142.11 - 16,948.555', name: '14,142.11 - 16,948.555', color: '#efb785' }, { key: '≥ 16,948.555', name: '≥ 16,948.555', color: '#e7664c' }, ]); }); @@ -80,7 +80,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { { key: '7,125.997 - 8,529.22', name: '7,125.997 - 8,529.22', color: '#6092c0' }, { key: '8,529.22 - 11,335.665', name: '8,529.22 - 11,335.665', color: '#a8bfda' }, { key: '11,335.665 - 14,142.11', name: '11,335.665 - 14,142.11', color: '#ebeff5' }, - { key: '14,142.11 - 16,948.555', name: '14,142.11 - 16,948.555', color: '#ecb385' }, + { key: '14,142.11 - 16,948.555', name: '14,142.11 - 16,948.555', color: '#efb785' }, { key: '≥ 16,948.555', name: '≥ 16,948.555', color: '#e7664c' }, ]); }); @@ -94,7 +94,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { { key: '7,125.99 - 8,529.2', name: '7,125.99 - 8,529.2', color: '#6092c0' }, { key: '8,529.2 - 11,335.66', name: '8,529.2 - 11,335.66', color: '#a8bfda' }, { key: '11,335.66 - 14,142.1', name: '11,335.66 - 14,142.1', color: '#ebeff5' }, - { key: '14,142.1 - 16,948.55', name: '14,142.1 - 16,948.55', color: '#ecb385' }, + { key: '14,142.1 - 16,948.55', name: '14,142.1 - 16,948.55', color: '#efb785' }, { color: '#e7664c', key: '≥ 16,948.55', @@ -115,7 +115,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { { key: '0 - 8,529.2', name: '0 - 8,529.2', color: '#6092c0' }, { key: '8,529.2 - 11,335.66', name: '8,529.2 - 11,335.66', color: '#a8bfda' }, { key: '11,335.66 - 14,142.1', name: '11,335.66 - 14,142.1', color: '#ebeff5' }, - { key: '14,142.1 - 16,948.55', name: '14,142.1 - 16,948.55', color: '#ecb385' }, + { key: '14,142.1 - 16,948.55', name: '14,142.1 - 16,948.55', color: '#efb785' }, { key: '≥ 16,948.55', name: '≥ 16,948.55', color: '#e7664c' }, ]); }); @@ -133,7 +133,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { { key: '5,722.775 - 8,529.2', name: '5,722.775 - 8,529.2', color: '#6092c0' }, { key: '8,529.2 - 11,335.66', name: '8,529.2 - 11,335.66', color: '#a8bfda' }, { key: '11,335.66 - 14,142.1', name: '11,335.66 - 14,142.1', color: '#ebeff5' }, - { key: '14,142.1 - 16,948.55', name: '14,142.1 - 16,948.55', color: '#ecb385' }, + { key: '14,142.1 - 16,948.55', name: '14,142.1 - 16,948.55', color: '#efb785' }, { key: '≥ 16,948.55', name: '≥ 16,948.55', color: '#e7664c' }, ]); // assert the cell has the correct coloring despite the legend rounding diff --git a/yarn.lock b/yarn.lock index 18b5fed51c272..5b3b6f246ff42 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1748,11 +1748,25 @@ resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314" integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ== -"@elastic/eui@97.3.1": - version "97.3.1" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-97.3.1.tgz#b0f07c603042bd359544b41829507e65f4fa3cd2" - integrity sha512-zJs3aaO6qjTdxJM2mPahcqaC6FfaC34yTc3qpQq7+Cbhw2xGrwx8bAfIzhttLU87mwgr59Sqv9Ojvwk8c3js7A== +"@elastic/eui-theme-borealis@0.0.2": + version "0.0.2" + resolved "https://registry.yarnpkg.com/@elastic/eui-theme-borealis/-/eui-theme-borealis-0.0.2.tgz#4b65f13073b1887a12641063ace96539fa923674" + integrity sha512-ekePJ+V9UMCUDqjNLECjM+Vi/qHkJcu6lhm1GenUFs3awPxaLhvasb3pN++qnWYkXWo90vmZER62MTHpxlQyQA== + +"@elastic/eui-theme-common@0.0.2": + version "0.0.2" + resolved "https://registry.yarnpkg.com/@elastic/eui-theme-common/-/eui-theme-common-0.0.2.tgz#3da6078a5d255c5740423d26409e5e06536a5db3" + integrity sha512-tIyXrylrLhmOWiRbxuJSiHHVJpt4fVd5frzhUGoSN2frobOT9RLh8Klzyd4kmHasZ7bB1vETPR5fytqgocRvdA== + dependencies: + "@types/lodash" "^4.14.202" + lodash "^4.17.21" + +"@elastic/eui@97.3.1-borealis.2": + version "97.3.1-borealis.2" + resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-97.3.1-borealis.2.tgz#32d9616ddbab11ef6e97739cf728a667220ca74c" + integrity sha512-j0WsE+WWtV3eEbRqyjr8hJ1swQIbCEGc9iViMtDK/XeVCVqs++dJE/+jPdjharMjXLrstOr0cx0uvtsH6OWTUw== dependencies: + "@elastic/eui-theme-common" "0.0.2" "@hello-pangea/dnd" "^16.6.0" "@types/lodash" "^4.14.202" "@types/numeral" "^2.0.5"