From 0c0dd631bbd22859a8d8e4214b923c2afafc0f11 Mon Sep 17 00:00:00 2001 From: Angela Chuang <6295984+angorayc@users.noreply.github.com> Date: Thu, 9 Jan 2025 12:47:25 +0000 Subject: [PATCH] [Security Solution][threat hunting explore] EUI refresh: Rename color variables (#204908) ## Summary https://github.com/elastic/kibana/issues/202499 ### Running Kibana with the Borealis theme In order to run Kibana with Borealis, you'll need to do the following: Set the following in kibana.dev.yml: uiSettings.experimental.themeSwitcherEnabled: true Run Kibana with the following environment variable set: KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn start This will expose a toggle under Stack Management > Advanced Settings > Theme version, which you can use to toggle between Amsterdam and Borealis. ![Image](https://github.com/user-attachments/assets/78d64946-43fc-4400-bbb1-229d900b7f05) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> --- .../common/components/charts/donutchart.tsx | 4 +- .../components/empty_prompt/empty_prompt.tsx | 78 ++++++++++--------- .../navigation/nav_item_beta_badge.tsx | 2 +- .../split_accordion/split_accordion.tsx | 2 +- .../onboarding/components/onboarding.tsx | 2 +- .../cards/common/card_callout.styles.ts | 2 +- .../common/connectors/connector_setup.tsx | 2 +- .../onboarding_card_panel.styles.ts | 8 +- .../cards/common/link_card.styles.ts | 6 +- .../onboarding_header.styles.ts | 2 +- 10 files changed, 58 insertions(+), 50 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/donutchart.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/donutchart.tsx index ebfe06476620a..2d5dcafc77df5 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/donutchart.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/donutchart.tsx @@ -106,9 +106,9 @@ const DonutChartWrapperComponent: React.FC = ({ const { euiTheme } = useEuiTheme(); const emptyLabelStyle = useMemo( () => ({ - color: euiTheme.colors.darkShade, + color: euiTheme.colors.textSubdued, }), - [euiTheme.colors.darkShade] + [euiTheme.colors.textSubdued] ); const className = isChartEmbeddablesEnabled ? undefined : 'eui-textTruncate'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx index 9c22ae2440737..d36a34534db59 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { memo, useCallback } from 'react'; +import React, { memo, useCallback, useMemo } from 'react'; import { EuiButton, EuiCard, @@ -13,7 +13,6 @@ import { EuiFlexItem, EuiPageHeader, useEuiTheme, - type EuiThemeComputed, EuiButtonEmpty, } from '@elastic/eui'; import { css } from '@emotion/react'; @@ -33,44 +32,53 @@ const imgUrls = { endpoint: endpointSvg, }; -const headerCardStyles = css` - span.euiTitle { - font-size: 36px; - line-height: 100%; - } -`; +const useEmptyPromptStyles = () => { + const { euiTheme } = useEuiTheme(); -const pageHeaderStyles = css` - h1 { - font-size: 18px; - } -`; + const headerCardStyles = css` + span.euiTitle { + font-size: ${euiTheme.base * 2.25}px; + line-height: 100%; + } + `; -const getFlexItemStyles = (euiTheme: EuiThemeComputed) => css` - background: ${euiTheme.colors.lightestShade}; - padding: 20px; -`; + const pageHeaderStyles = css` + h1 { + font-size: ${euiTheme.base * 1.125}px; + } + `; -const cardStyles = css` - img { - margin-top: 20px; - max-width: 400px; - } -`; + const flexItemStyles = css` + background: ${euiTheme.colors.backgroundBaseSubdued}; + padding: ${euiTheme.base * 1.25}px; + `; -const footerStyles = css` - span.euiTitle { - font-size: 36px; - line-height: 100%; - } - max-width: 600px; - display: block; - margin: 20px auto 0; -`; + const cardStyles = css` + img { + margin-top: ${euiTheme.base * 1.25}px; + max-width: ${euiTheme.components.forms.maxWidth}; + } + `; -export const EmptyPromptComponent = memo(({ onSkip }: { onSkip?: () => void }) => { - const { euiTheme } = useEuiTheme(); + const footerStyles = css` + span.euiTitle { + font-size: ${euiTheme.base * 2.25}px; + line-height: 100%; + } + max-width: 600px; + display: block; + margin: ${euiTheme.base * 1.25}px auto 0; + `; + return useMemo( + () => ({ headerCardStyles, pageHeaderStyles, flexItemStyles, cardStyles, footerStyles }), + [cardStyles, flexItemStyles, footerStyles, headerCardStyles, pageHeaderStyles] + ); +}; + +export const EmptyPromptComponent = memo(({ onSkip }: { onSkip?: () => void }) => { + const { headerCardStyles, pageHeaderStyles, flexItemStyles, cardStyles, footerStyles } = + useEmptyPromptStyles(); const { navigateTo } = useNavigateTo(); const navigateToAddIntegrations = useCallback(() => { @@ -123,7 +131,7 @@ export const EmptyPromptComponent = memo(({ onSkip }: { onSkip?: () => void }) = - + { restrictWidth={PAGE_CONTENT_WIDTH} paddingSize="xl" bottomBorder="extended" - style={{ backgroundColor: euiTheme.colors.body }} + style={{ backgroundColor: euiTheme.colors.backgroundBaseSubdued }} > { const { euiTheme } = useEuiTheme(); return css` padding: ${euiTheme.size.s}; - border: 1px solid ${euiTheme.colors.lightShade}; + border: ${euiTheme.border.width.thin} solid ${euiTheme.colors.backgroundBaseSubdued}; border-radius: ${euiTheme.size.s}; `; }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/connectors/connector_setup.tsx b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/connectors/connector_setup.tsx index f41c77458edf9..96b4b9da4d6a5 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/connectors/connector_setup.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/connectors/connector_setup.tsx @@ -33,7 +33,7 @@ const usePanelCss = () => { .connectorSelectorPanel { height: 160px; &.euiPanel:hover { - background-color: ${euiTheme.colors.lightestShade}; + background-color: ${euiTheme.colors.backgroundBaseSubdued}; } } `; diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts index 02017dccf1990..e613f0b2d7662 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts @@ -12,7 +12,7 @@ export const HEIGHT_ANIMATION_DURATION = 250; export const useCardPanelStyles = () => { const { euiTheme, colorMode } = useEuiTheme(); - const successBackgroundColor = euiTheme.colors.backgroundBaseSuccess; + const successBackgroundColor = euiTheme.colors.backgroundLightSuccess; const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark; const darkModeStyles = useDarkPanelStyles(isDarkMode); @@ -24,7 +24,7 @@ export const useCardPanelStyles = () => { .onboardingCardIcon { padding: ${euiTheme.size.m}; border-radius: 50%; - background-color: ${isDarkMode ? euiTheme.colors.body : euiTheme.colors.lightestShade}; + background-color: ${euiTheme.colors.backgroundBaseSubdued}; } .onboardingCardHeaderTitle { font-weight: ${euiTheme.font.weight.semiBold}; @@ -65,8 +65,8 @@ export const useCardPanelStyles = () => { export const useDarkPanelStyles = (isDarkMode: boolean) => { const { euiTheme } = useEuiTheme(); const darkPanelStyles = css` - background-color: ${euiTheme.colors.lightestShade}; - border-color: ${euiTheme.colors.mediumShade}; + background-color: ${euiTheme.colors.backgroundBasePlain}; + border-color: ${euiTheme.colors.borderBasePlain}; `; return isDarkMode ? darkPanelStyles : ''; }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.styles.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.styles.ts index 8643c3254a6ee..74243250c7678 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.styles.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.styles.ts @@ -22,7 +22,7 @@ export const useCardStyles = () => { .headerCardLink, .headerCardLink * { text-decoration: underline; - text-decoration-color: ${euiTheme.colors.primaryText}; + text-decoration-color: ${euiTheme.colors.textPrimary}; } } @@ -32,9 +32,9 @@ export const useCardStyles = () => { ${isDarkMode ? ` - background-color: ${euiTheme.colors.lightestShade}; + background-color: ${euiTheme.colors.backgroundBasePlain}; box-shadow: none; - border: 1px solid ${euiTheme.colors.mediumShade}; + border: ${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain}; ` : ''} `; diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/onboarding_header.styles.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/onboarding_header.styles.ts index 40cfd7a5d9e1f..299fbdd158e03 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/onboarding_header.styles.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/onboarding_header.styles.ts @@ -16,7 +16,7 @@ export const useOnboardingHeaderStyles = () => { width: calc(${PAGE_CONTENT_WIDTH} / 2); } .onboardingHeaderGreetings { - color: ${euiTheme.colors.darkShade}; + color: ${euiTheme.colors.textSubdued}; } .onboardingHeaderTopicSelector { width: calc(${PAGE_CONTENT_WIDTH} / 3);