[8.x] [Security Solution][THI] remove usages of EUI json tokens (#210482

) (#210700)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Security Solution][THI] remove usages of EUI json tokens
(#210482)](#210482)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Philippe
Oberti","email":"philippe.oberti@elastic.co"},"sourceCommit":{"committedDate":"2025-02-11T21:11:55Z","message":"[Security
Solution][THI] remove usages of EUI json tokens (#210482)\n\n##
Summary\r\n\r\nThis PR is probably the final PR that makes the changes
to support EUI\r\nBorealis. It focuses on removing all the usage of EUI
Json tokens.\r\n\r\nYou will notice different approaches while removing
the tokens:\r\n- for some cases, the changes were done using `css
from\r\n'@emotions/react'` as the components using the tokens were
already using\r\n`euiTheme` or adding it was straightforward and
required the minimal\r\namount of changes\r\n- for some cases, where the
css changes were pretty involved, a hook was\r\ncreated to be able to
import the styles and apply them in the components\r\n- finally for
other cases, esepcially if the styled components were\r\nextracted in a
different file and were used within many others, I\r\ndecided to create
reusable components. This allowed to not change all\r\nthe files
impacted and limit the number of files modified in this PR.\r\n\r\nFeel
free to comment on any of the approaches and suggest
better\r\noptions!\r\n\r\nhttps://github.com//issues/201889\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"161ce34cf7f38faed884421976b10494df0a4075","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Threat
Hunting:Investigations","backport:version","v9.1.0","v8.19.0"],"title":"[Security
Solution][THI] remove usages of EUI json
tokens","number":210482,"url":"https://github.com/elastic/kibana/pull/210482","mergeCommit":{"message":"[Security
Solution][THI] remove usages of EUI json tokens (#210482)\n\n##
Summary\r\n\r\nThis PR is probably the final PR that makes the changes
to support EUI\r\nBorealis. It focuses on removing all the usage of EUI
Json tokens.\r\n\r\nYou will notice different approaches while removing
the tokens:\r\n- for some cases, the changes were done using `css
from\r\n'@emotions/react'` as the components using the tokens were
already using\r\n`euiTheme` or adding it was straightforward and
required the minimal\r\namount of changes\r\n- for some cases, where the
css changes were pretty involved, a hook was\r\ncreated to be able to
import the styles and apply them in the components\r\n- finally for
other cases, esepcially if the styled components were\r\nextracted in a
different file and were used within many others, I\r\ndecided to create
reusable components. This allowed to not change all\r\nthe files
impacted and limit the number of files modified in this PR.\r\n\r\nFeel
free to comment on any of the approaches and suggest
better\r\noptions!\r\n\r\nhttps://github.com//issues/201889\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"161ce34cf7f38faed884421976b10494df0a4075"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/210482","number":210482,"mergeCommit":{"message":"[Security
Solution][THI] remove usages of EUI json tokens (#210482)\n\n##
Summary\r\n\r\nThis PR is probably the final PR that makes the changes
to support EUI\r\nBorealis. It focuses on removing all the usage of EUI
Json tokens.\r\n\r\nYou will notice different approaches while removing
the tokens:\r\n- for some cases, the changes were done using `css
from\r\n'@emotions/react'` as the components using the tokens were
already using\r\n`euiTheme` or adding it was straightforward and
required the minimal\r\namount of changes\r\n- for some cases, where the
css changes were pretty involved, a hook was\r\ncreated to be able to
import the styles and apply them in the components\r\n- finally for
other cases, esepcially if the styled components were\r\nextracted in a
different file and were used within many others, I\r\ndecided to create
reusable components. This allowed to not change all\r\nthe files
impacted and limit the number of files modified in this PR.\r\n\r\nFeel
free to comment on any of the approaches and suggest
better\r\noptions!\r\n\r\nhttps://github.com//issues/201889\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"161ce34cf7f38faed884421976b10494df0a4075"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Philippe Oberti <philippe.oberti@elastic.co>

x-pack/solutions/security/packages/data_table/components/data_table/helpers.test.tsx

@@ -5,15 +5,14 @@
  * 2.0.
  */
 
+import type { EuiTheme } from '@kbn/kibana-react-plugin/common';
 import type { ColumnHeaderOptions } from '../../common/types';
 import {
+  addBuildingBlockStyle,
   hasCellActions,
   mapSortDirectionToDirection,
   mapSortingColumns,
-  addBuildingBlockStyle,
 } from './helpers';
-
-import { euiThemeVars } from '@kbn/ui-theme';
 import { mockDnsEvent } from '../../mock/mock_timeline_data';
 
 describe('helpers', () => {
@@ -178,7 +177,7 @@ describe('helpers', () => {
   });
 
   describe('addBuildingBlockStyle', () => {
-    const THEME = { eui: euiThemeVars, darkMode: false };
+    const THEME = { eui: { euiColorHighlight: 'euiColorHighlight' }, darkMode: false } as EuiTheme;
 
     test('it calls `setCellProps` with background color when event is a building block', () => {
       const mockedSetCellProps = jest.fn();
@@ -191,12 +190,12 @@ describe('helpers', () => {
 
       expect(mockedSetCellProps).toBeCalledWith({
         style: {
-          backgroundColor: euiThemeVars.euiColorHighlight,
+          backgroundColor: 'euiColorHighlight',
         },
       });
     });
 
-    test('it call `setCellProps` reseting the background color when event is not a building block', () => {
+    test('it call `setCellProps` resetting the background color when event is not a building block', () => {
       const mockedSetCellProps = jest.fn();
 
       addBuildingBlockStyle(mockDnsEvent, THEME, mockedSetCellProps);

x-pack/solutions/security/plugins/security_solution/public/common/components/header_actions/helpers.ts

@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { euiThemeVars } from '@kbn/ui-theme';
 import type { TimelineEventsType } from '../../../../common/types';
 
 /**
@@ -22,8 +21,7 @@ import type { TimelineEventsType } from '../../../../common/types';
  *    `EuiButtonIcon` has a `margin-left: -4px`, which is subtracted from the
  *    `width`
  */
-export const DEFAULT_ACTION_BUTTON_WIDTH =
-  parseInt(euiThemeVars.euiSizeXL, 10) - parseInt(euiThemeVars.euiSizeXS, 10); // px
+export const DEFAULT_ACTION_BUTTON_WIDTH = 28; // px
 
 export const isAlert = (eventType: TimelineEventsType | Omit<TimelineEventsType, 'all'>): boolean =>
   eventType === 'signal';
@@ -46,7 +44,7 @@ export const getActionsColumnWidth = (actionButtonCount: number): number => {
   // `EuiDataGridRowCell` applies additional `padding-left` and
   // `padding-right`, which must be added to the content width to prevent the
   // content from being partially hidden due to the space occupied by padding:
-  const leftRightCellPadding = parseInt(euiThemeVars.euiDataGridCellPaddingM, 10) * 2; // parseInt ignores the trailing `px`, e.g. `6px`
+  const leftRightCellPadding = 12;
 
   return contentWidth + leftRightCellPadding;
 };

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/alert_reason/alert_reason.tsx

@@ -6,27 +6,20 @@
  */
 
 import React, { useMemo } from 'react';
-import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
-import styled from '@emotion/styled';
-import { euiThemeVars } from '@kbn/ui-theme';
+import { EuiPanel, EuiSpacer, EuiTitle, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { ALERT_REASON_BODY_TEST_ID } from './test_ids';
 import { useAlertReasonPanelContext } from './context';
 import { getRowRenderer } from '../../../timelines/components/timeline/body/renderers/get_row_renderer';
 import { defaultRowRenderers } from '../../../timelines/components/timeline/body/renderers';
 import { FlyoutError } from '../../shared/components/flyout_error';
 
-const ReasonContainerWrapper = styled.div`
-  overflow-x: auto;
-  padding-block: ${euiThemeVars.euiSizeS};
-`;
-
-const ReasonContainer = styled.div``;
-
 /**
  * Alert reason renderer on a preview panel on top of the right section of expandable flyout
  */
 export const AlertReason: React.FC = () => {
+  const { euiTheme } = useEuiTheme();
   const { dataAsNestedObject, scopeId } = useAlertReasonPanelContext();
 
   const renderer = useMemo(
@@ -65,9 +58,14 @@ export const AlertReason: React.FC = () => {
         </h6>
       </EuiTitle>
       <EuiSpacer size="m" />
-      <ReasonContainerWrapper>
-        <ReasonContainer className={'eui-displayInlineBlock'}>{rowRenderer}</ReasonContainer>
-      </ReasonContainerWrapper>
+      <div
+        css={css`
+          overflow-x: auto;
+          padding-block: ${euiTheme.size.s};
+        `}
+      >
+        <div className={'eui-displayInlineBlock'}>{rowRenderer}</div>
+      </div>
     </EuiPanel>
   );
 };

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/components/event_renderer.tsx

@@ -7,25 +7,18 @@
 
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
-import { EuiFlexItem, EuiTitle } from '@elastic/eui';
-import styled from '@emotion/styled';
-import { euiThemeVars } from '@kbn/ui-theme';
+import { EuiFlexItem, EuiTitle, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { getRowRenderer } from '../../../../timelines/components/timeline/body/renderers/get_row_renderer';
 import { defaultRowRenderers } from '../../../../timelines/components/timeline/body/renderers';
 import { useDocumentDetailsContext } from '../../shared/context';
 import { EVENT_RENDERER_TEST_ID } from './test_ids';
 
-const ReasonPreviewContainerWrapper = styled.div`
-  overflow-x: auto;
-  padding-block: ${euiThemeVars.euiSizeS};
-`;
-
-const ReasonPreviewContainer = styled.div``;
-
 /**
  * Event renderer of an event document
  */
 export const EventRenderer: FC = () => {
+  const { euiTheme } = useEuiTheme();
   const { dataAsNestedObject, scopeId } = useDocumentDetailsContext();
 
   const renderer = useMemo(
@@ -52,11 +45,14 @@ export const EventRenderer: FC = () => {
       <EuiTitle size="xxs">
         <h5>{'Event renderer'}</h5>
       </EuiTitle>
-      <ReasonPreviewContainerWrapper>
-        <ReasonPreviewContainer className={'eui-displayInlineBlock'}>
-          {rowRenderer}
-        </ReasonPreviewContainer>
-      </ReasonPreviewContainerWrapper>
+      <div
+        css={css`
+          overflow-x: auto;
+          padding-block: ${euiTheme.size.s};
+        `}
+      >
+        <div className={'eui-displayInlineBlock'}>{rowRenderer}</div>
+      </div>
     </EuiFlexItem>
   );
 };

x-pack/solutions/security/plugins/security_solution/public/resolver/view/use_colors.ts

@@ -5,17 +5,15 @@
  * 2.0.
  */
 
-import { darkMode, euiThemeVars } from '@kbn/ui-theme';
+import { useEuiTheme } from '@elastic/eui';
 import { useMemo } from 'react';
 
 type ResolverColorNames =
-  | 'copyableFieldBackground'
   | 'descriptionText'
   | 'full'
   | 'graphControls'
   | 'graphControlsBackground'
   | 'graphControlsBorderColor'
-  | 'linkColor'
   | 'resolverBackground'
   | 'resolverEdge'
   | 'resolverEdgeText'
@@ -29,22 +27,24 @@ type ColorMap = Record<ResolverColorNames, string>;
  * Get access to Kibana-theme based colors.
  */
 export function useColors(): ColorMap {
-  return useMemo(() => {
-    return {
-      copyableFieldBackground: euiThemeVars.euiColorLightShade,
-      descriptionText: euiThemeVars.euiTextColor,
-      full: euiThemeVars.euiColorFullShade,
-      graphControls: euiThemeVars.euiColorDarkestShade,
-      graphControlsBackground: euiThemeVars.euiColorEmptyShade,
-      graphControlsBorderColor: euiThemeVars.euiColorLightShade,
-      processBackingFill: `${euiThemeVars.euiColorPrimary}${darkMode ? '1F' : '0F'}`, // Add opacity 0F = 6% , 1F = 12%
-      resolverBackground: euiThemeVars.euiColorEmptyShade,
-      resolverEdge: darkMode ? euiThemeVars.euiColorLightShade : euiThemeVars.euiColorLightestShade,
-      resolverBreadcrumbBackground: euiThemeVars.euiColorLightestShade,
-      resolverEdgeText: darkMode ? euiThemeVars.euiColorFullShade : euiThemeVars.euiColorDarkShade,
-      triggerBackingFill: `${euiThemeVars.euiColorDanger}${darkMode ? '1F' : '0F'}`,
-      pillStroke: euiThemeVars.euiColorLightShade,
-      linkColor: euiThemeVars.euiLinkColor,
-    };
-  }, []);
+  const { euiTheme, colorMode } = useEuiTheme();
+  const darkMode = useMemo(() => colorMode === 'DARK', [colorMode]);
+
+  return useMemo(
+    () => ({
+      descriptionText: euiTheme.colors.textParagraph,
+      full: euiTheme.colors.fullShade,
+      graphControls: euiTheme.colors.darkestShade,
+      graphControlsBackground: euiTheme.colors.emptyShade,
+      graphControlsBorderColor: euiTheme.colors.lightShade,
+      processBackingFill: `${euiTheme.colors.primary}${darkMode ? '1F' : '0F'}`, // Add opacity 0F = 6% , 1F = 12%
+      resolverBackground: euiTheme.colors.emptyShade,
+      resolverEdge: darkMode ? euiTheme.colors.lightShade : euiTheme.colors.lightestShade,
+      resolverBreadcrumbBackground: euiTheme.colors.lightestShade,
+      resolverEdgeText: darkMode ? euiTheme.colors.fullShade : euiTheme.colors.darkShade,
+      triggerBackingFill: `${euiTheme.colors.danger}${darkMode ? '1F' : '0F'}`,
+      pillStroke: euiTheme.colors.lightShade,
+    }),
+    [darkMode, euiTheme]
+  );
 }

x-pack/solutions/security/plugins/security_solution/public/resolver/view/use_cube_assets.ts

@@ -6,11 +6,10 @@
  */
 
 import { i18n } from '@kbn/i18n';
-
-import { euiThemeVars } from '@kbn/ui-theme';
 import type { EuiButtonColor } from '@elastic/eui';
+import { useEuiTheme } from '@elastic/eui';
 import { useMemo } from 'react';
-import type { ResolverProcessType, NodeDataStatus } from '../types';
+import type { NodeDataStatus, ResolverProcessType } from '../types';
 import { useSymbolIDs } from './use_symbol_ids';
 import { useColors } from './use_colors';
 
@@ -22,6 +21,8 @@ export function useCubeAssets(
   cubeType: NodeDataStatus,
   isProcessTrigger: boolean
 ): NodeStyleConfig {
+  const { euiTheme } = useEuiTheme();
+
   const SymbolIds = useSymbolIDs({ id });
   const colorMap = useColors();
 
@@ -36,7 +37,7 @@ export function useCubeAssets(
         }),
         isLabelFilled: true,
         labelButtonFill: 'primary',
-        strokeColor: euiThemeVars.euiColorPrimary,
+        strokeColor: euiTheme.colors.primary,
       },
       loadingCube: {
         backingFill: colorMap.processBackingFill,
@@ -47,7 +48,7 @@ export function useCubeAssets(
         }),
         isLabelFilled: false,
         labelButtonFill: 'primary',
-        strokeColor: euiThemeVars.euiColorPrimary,
+        strokeColor: euiTheme.colors.primary,
       },
       errorCube: {
         backingFill: colorMap.processBackingFill,
@@ -58,7 +59,7 @@ export function useCubeAssets(
         }),
         isLabelFilled: false,
         labelButtonFill: 'primary',
-        strokeColor: euiThemeVars.euiColorPrimary,
+        strokeColor: euiTheme.colors.primary,
       },
       runningTriggerCube: {
         backingFill: colorMap.triggerBackingFill,
@@ -69,7 +70,7 @@ export function useCubeAssets(
         }),
         isLabelFilled: true,
         labelButtonFill: 'danger',
-        strokeColor: euiThemeVars.euiColorDanger,
+        strokeColor: euiTheme.colors.danger,
       },
       terminatedProcessCube: {
         backingFill: colorMap.processBackingFill,
@@ -83,7 +84,7 @@ export function useCubeAssets(
         ),
         isLabelFilled: false,
         labelButtonFill: 'primary',
-        strokeColor: euiThemeVars.euiColorPrimary,
+        strokeColor: euiTheme.colors.primary,
       },
       terminatedTriggerCube: {
         backingFill: colorMap.triggerBackingFill,
@@ -97,10 +98,10 @@ export function useCubeAssets(
         ),
         isLabelFilled: false,
         labelButtonFill: 'danger',
-        strokeColor: euiThemeVars.euiColorDanger,
+        strokeColor: euiTheme.colors.danger,
       },
     }),
-    [SymbolIds, colorMap]
+    [SymbolIds, colorMap, euiTheme]
   );
 
   if (cubeType === 'terminated') {
@@ -132,6 +133,7 @@ const processTypeToCube: Record<ResolverProcessType, keyof NodeStyleMap> = {
   processError: 'errorCube',
   unknownEvent: 'runningProcessCube',
 };
+
 interface NodeStyleMap {
   runningProcessCube: NodeStyleConfig;
   runningTriggerCube: NodeStyleConfig;
@@ -140,6 +142,7 @@ interface NodeStyleMap {
   loadingCube: NodeStyleConfig;
   errorCube: NodeStyleConfig;
 }
+
 interface NodeStyleConfig {
   backingFill: string;
   cubeSymbol: string;