[Security Solution][Entity Analytics] EUI refresh: Remove color funct…

…ions (elastic#205262)

## Summary

elastic#202505
elastic#204921

### 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)

x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/shared/components/left_panel/left_panel_content.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { useEuiBackgroundColor } from '@elastic/eui';
+import { useEuiTheme } from '@elastic/eui';
 import type { VFC } from 'react';
 import React, { useMemo } from 'react';
 import { css } from '@emotion/react';
@@ -22,14 +22,15 @@ export interface PanelContentProps {
  * Appears after the user clicks on the expand details button in the right section.
  */
 export const LeftPanelContent: VFC<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}

x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/shared/components/left_panel/left_panel_header.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiTab, EuiTabs, useEuiBackgroundColor } from '@elastic/eui';
+import { EuiTab, EuiTabs, useEuiTheme } from '@elastic/eui';
 import type { ReactElement, VFC } from 'react';
 import React, { memo } from 'react';
 import { css } from '@emotion/react';
@@ -57,6 +57,7 @@ export interface PanelHeaderProps {
  */
 export const LeftPanelHeader: VFC<PanelHeaderProps> = memo(
   ({ selectedTabId, setSelectedTabId, tabs }) => {
+    const { euiTheme } = useEuiTheme();
     const onSelectedTabChanged = (id: EntityDetailsLeftPanelTab) => setSelectedTabId(id);
     const renderTabs = tabs.map((tab, index) => (
       <EuiTab
@@ -72,7 +73,7 @@ export const LeftPanelHeader: VFC<PanelHeaderProps> = memo(
     return (
       <FlyoutHeader
         css={css`
-          background-color: ${useEuiBackgroundColor('subdued')};
+          background-color: ${euiTheme.colors.backgroundBaseSubdued};
           padding-bottom: 0 !important;
           border-block-end: none !important;
         `}