From d98730e4ad1e184e3947eed15a6062307c7e51fb Mon Sep 17 00:00:00 2001 From: Angela Chuang <6295984+angorayc@users.noreply.github.com> Date: Mon, 30 Dec 2024 18:03:31 +0000 Subject: [PATCH] [Security Solution][threat hunting explore] EUI refresh: Remove color functions (#204921) ## Summary https://github.com/elastic/kibana/issues/202505 ### 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> --- .../public/flyout/document_details/left/content.tsx | 5 +++-- .../public/flyout/document_details/left/header.tsx | 5 +++-- .../onboarding_body/onboarding_card_panel.styles.ts | 6 +++--- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/content.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/content.tsx index 53d2efe883397..5da0f5b8f5fc8 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/content.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/content.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { useEuiBackgroundColor } from '@elastic/eui'; +import { useEuiTheme } from '@elastic/eui'; import type { FC } from 'react'; import React, { useMemo } from 'react'; import { css } from '@emotion/react'; @@ -29,6 +29,7 @@ export interface PanelContentProps { * Displays the content of investigation and insights tabs (visualize is hidden for 8.9). */ export const PanelContent: FC = ({ selectedTabId, tabs }) => { + const { euiTheme } = useEuiTheme(); const selectedTabContent = useMemo(() => { return tabs.find((tab) => tab.id === selectedTabId)?.content; }, [selectedTabId, tabs]); @@ -36,7 +37,7 @@ export const PanelContent: FC = ({ selectedTabId, tabs }) => return ( {selectedTabContent} diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/header.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/header.tsx index 2b61a97577e06..1e8f88cb68964 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/header.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/header.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { EuiTab, EuiTabs, useEuiBackgroundColor } from '@elastic/eui'; +import { EuiTab, EuiTabs, useEuiTheme } from '@elastic/eui'; import type { FC } from 'react'; import React, { memo } from 'react'; import { css } from '@emotion/react'; @@ -38,6 +38,7 @@ export interface PanelHeaderProps { */ export const PanelHeader: FC = memo( ({ selectedTabId, setSelectedTabId, tabs }) => { + const { euiTheme } = useEuiTheme(); const { getFieldsData } = useDocumentDetailsContext(); const isEventKindSignal = getField(getFieldsData('event.kind')) === EventKind.signal; @@ -56,7 +57,7 @@ export const PanelHeader: FC = memo( return ( { const { euiTheme, colorMode } = useEuiTheme(); - const successBackgroundColor = useEuiBackgroundColor('success'); + const successBackgroundColor = euiTheme.colors.backgroundBaseSuccess; const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark; const darkModeStyles = useDarkPanelStyles(isDarkMode); @@ -31,7 +31,7 @@ export const useCardPanelStyles = () => { } .onboardingCardHeaderCompleteBadge { background-color: ${successBackgroundColor}; - color: ${euiTheme.colors.successText}; + color: ${euiTheme.colors.textSuccess}; } .onboardingCardContentWrapper { display: grid;