[Security Solution][threat hunting explore] EUI refresh: Remove color…

… functions (elastic#204921) ## Summary elastic#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 <[email protected]>
stratoula · Jan 2, 2025 · 3acbb79 · 3acbb79
1 parent e5191af
commit 3acbb79
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/...utions/security/plugins/security_solution/public/flyout/document_details/left/content.tsx b/...utions/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,14 +29,15 @@ export interface PanelContentProps {
  * Displays the content of investigation and insights tabs (visualize is hidden for 8.9).
  */
 export const PanelContent: FC<PanelContentProps> = ({ selectedTabId, tabs }) => {
+  const { euiTheme } = useEuiTheme();
   const selectedTabContent = useMemo(() => {
     return tabs.find((tab) => tab.id === selectedTabId)?.content;
   }, [selectedTabId, tabs]);
 
   return (
     <FlyoutBody
       css={css`
-        background-color: ${useEuiBackgroundColor('subdued')};
+        background-color: ${euiTheme.colors.backgroundBaseSubdued};
       `}
     >
       {selectedTabContent}

diff --git a/...lutions/security/plugins/security_solution/public/flyout/document_details/left/header.tsx b/...lutions/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<PanelHeaderProps> = 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<PanelHeaderProps> = memo(
     return (
       <FlyoutHeader
         css={css`
-          background-color: ${useEuiBackgroundColor('subdued')};
+          background-color: ${euiTheme.colors.backgroundBaseSubdued};
           padding-bottom: 0 !important;
           border-block-end: none !important;
         `}

diff --git a/...ity_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts b/...ity_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts
@@ -5,14 +5,14 @@
  * 2.0.
  */
 
-import { COLOR_MODES_STANDARD, useEuiBackgroundColor, useEuiTheme } from '@elastic/eui';
+import { COLOR_MODES_STANDARD, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/css';
 
 export const HEIGHT_ANIMATION_DURATION = 250;
 
 export const useCardPanelStyles = () => {
   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;