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"