Eui Refresh

x-pack/plugins/security_solution/public/entity_analytics/components/asset_criticality/asset_criticality_badge.tsx

@@ -6,17 +6,9 @@
  */
 import React from 'react';
 import { EuiHealth } from '@elastic/eui';
-import { euiLightVars } from '@kbn/ui-theme';
 import { CRITICALITY_LEVEL_TITLE } from './translations';
 import type { CriticalityLevelWithUnassigned } from '../../../../common/entity_analytics/asset_criticality/types';
-
-export const CRITICALITY_LEVEL_COLOR: Record<CriticalityLevelWithUnassigned, string> = {
-  extreme_impact: '#E7664C',
-  high_impact: '#DA8B45',
-  medium_impact: 'D6BF57',
-  low_impact: '#54B399',
-  unassigned: euiLightVars.euiColorMediumShade,
-};
+import { useCriticalityLevelColors } from '../../hooks/use_criticality_level_colors';
 
 export const AssetCriticalityBadge: React.FC<{
   criticalityLevel?: CriticalityLevelWithUnassigned;
@@ -29,10 +21,11 @@ export const AssetCriticalityBadge: React.FC<{
   dataTestSubj = 'asset-criticality-badge',
   className,
 }) => {
+  const criticalityColors = useCriticalityLevelColors();
   return (
     <EuiHealth
       data-test-subj={dataTestSubj}
-      color={CRITICALITY_LEVEL_COLOR[criticalityLevel]}
+      color={criticalityColors[criticalityLevel]}
       style={style}
       className={className}
     >

x-pack/plugins/security_solution/public/entity_analytics/components/asset_criticality_file_uploader/components/file_picker_step.tsx

@@ -13,13 +13,14 @@ import {
   EuiSpacer,
   EuiText,
   EuiTitle,
+  useEuiFontSize,
   useEuiTheme,
 } from '@elastic/eui';
+
 import { css } from '@emotion/css';
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { euiThemeVars } from '@kbn/ui-theme';
 import {
   CRITICALITY_CSV_MAX_SIZE_BYTES,
   ValidCriticalityLevels,
@@ -35,17 +36,18 @@ interface AssetCriticalityFilePickerStepProps {
 
 const sampleCSVContent = `user,user-001,low_impact\nuser,user-002,medium_impact\nhost,host-001,extreme_impact`;
 
-const listStyle = css`
-  list-style-type: disc;
-  margin-bottom: ${euiThemeVars.euiSizeL};
-  margin-left: ${euiThemeVars.euiSizeL};
-  line-height: ${euiThemeVars.euiLineHeight};
-`;
-
 export const AssetCriticalityFilePickerStep: React.FC<AssetCriticalityFilePickerStepProps> =
   React.memo(({ onFileChange, errorMessage, isLoading }) => {
     const formatBytes = useFormatBytes();
     const { euiTheme } = useEuiTheme();
+
+    const listStyle = css`
+      list-style-type: disc;
+      margin-bottom: ${euiTheme.size.l};
+      margin-left: ${euiTheme.size.l};
+      line-height: ${useEuiFontSize('s').lineHeight};
+    `;
+
     return (
       <>
         <EuiSpacer size="m" />

x-pack/plugins/security_solution/public/entity_analytics/components/asset_criticality_file_uploader/components/validation_step.tsx

@@ -100,7 +100,7 @@ export const AssetCriticalityValidationStep: React.FC<AssetCriticalityValidation
               language="CSV"
               isVirtualized
               css={css`
-                border: 1px solid ${euiTheme.colors.success};
+                border: 1px solid ${euiTheme.colors.accentSecondary};
               `}
             >
               {validLines.text}

x-pack/plugins/security_solution/public/entity_analytics/components/risk_information/index.tsx

@@ -144,7 +144,7 @@ export const RiskInformationFlyout = ({ handleOnClose }: { handleOnClose: () =>
               label={BETA}
               size="s"
               css={css`
-                color: ${euiTheme.colors.text};
+                color: ${euiTheme.colors.textParagraph};
                 margin-top: ${euiTheme.size.xxs};
               `}
             />

x-pack/plugins/security_solution/public/entity_analytics/components/risk_summary_flyout/risk_summary.tsx

@@ -19,7 +19,6 @@ import {
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import dateMath from '@kbn/datemath';
 import { i18n } from '@kbn/i18n';
 import { useKibana } from '../../../common/lib/kibana/kibana_react';
@@ -243,7 +242,7 @@ const FlyoutRiskSummaryComponent = <T extends RiskScoreEntity>({
                   css={css`
                     position: absolute;
                     right: 0;
-                    top: -${euiThemeVars.euiSize};
+                    top: -${euiTheme.size};
                   `}
                 >
                   <InspectButton

x-pack/plugins/security_solution/public/entity_analytics/components/severity/common/index.test.tsx

@@ -13,10 +13,9 @@ import { TestProviders } from '../../../../common/mock';
 import type { EuiHealthProps } from '@elastic/eui';
 import { EuiHealth } from '@elastic/eui';
 
-import { euiThemeVars } from '@kbn/ui-theme';
 import { RiskSeverity } from '../../../../../common/search_strategy';
 import { RiskScoreLevel } from '.';
-import { SEVERITY_COLOR } from '../../../../overview/components/detection_response/utils';
+import { RISK_SEVERITY_COLOUR } from '../../../common/utils';
 
 jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
@@ -38,7 +37,7 @@ describe('RiskScore', () => {
     expect(container).toHaveTextContent(RiskSeverity.Critical);
 
     expect(EuiHealth as jest.Mock).toHaveBeenLastCalledWith(
-      expect.objectContaining({ color: SEVERITY_COLOR.critical }),
+      expect.objectContaining({ color: RISK_SEVERITY_COLOUR.Critical }),
       context
     );
   });
@@ -53,7 +52,7 @@ describe('RiskScore', () => {
     expect(container).toHaveTextContent(RiskSeverity.High);
 
     expect(EuiHealth as jest.Mock).toHaveBeenLastCalledWith(
-      expect.objectContaining({ color: SEVERITY_COLOR.high }),
+      expect.objectContaining({ color: RISK_SEVERITY_COLOUR.High }),
       context
     );
   });
@@ -68,7 +67,7 @@ describe('RiskScore', () => {
     expect(container).toHaveTextContent(RiskSeverity.Moderate);
 
     expect(EuiHealth as jest.Mock).toHaveBeenLastCalledWith(
-      expect.objectContaining({ color: SEVERITY_COLOR.medium }),
+      expect.objectContaining({ color: RISK_SEVERITY_COLOUR.Moderate }),
       context
     );
   });
@@ -83,7 +82,7 @@ describe('RiskScore', () => {
     expect(container).toHaveTextContent(RiskSeverity.Low);
 
     expect(EuiHealth as jest.Mock).toHaveBeenLastCalledWith(
-      expect.objectContaining({ color: SEVERITY_COLOR.low }),
+      expect.objectContaining({ color: RISK_SEVERITY_COLOUR.Low }),
       context
     );
   });
@@ -98,7 +97,7 @@ describe('RiskScore', () => {
     expect(container).toHaveTextContent(RiskSeverity.Unknown);
 
     expect(EuiHealth as jest.Mock).toHaveBeenLastCalledWith(
-      expect.objectContaining({ color: euiThemeVars.euiColorMediumShade }),
+      expect.objectContaining({ color: RISK_SEVERITY_COLOUR.Unknown }),
       context
     );
   });

x-pack/plugins/security_solution/public/entity_analytics/components/severity/common/index.tsx

@@ -7,31 +7,33 @@
 
 import React from 'react';
 
-import { EuiHealth, EuiTextColor, transparentize } from '@elastic/eui';
+import { EuiHealth, EuiTextColor, useEuiTheme } from '@elastic/eui';
 
 import styled, { css } from 'styled-components';
-import { euiLightVars } from '@kbn/ui-theme';
 
 import { RISK_SEVERITY_COLOUR } from '../../../common/utils';
 import { HoverPopover } from '../../../../common/components/hover_popover';
 import type { RiskSeverity } from '../../../../../common/search_strategy';
 
-const RiskBadge = styled.div<{ $severity: RiskSeverity; $hideBackgroundColor: boolean }>`
+const RiskBadge = styled.div<{
+  $severity: RiskSeverity;
+  $hideBackgroundColor: boolean;
+}>`
   ${({ theme, $severity, $hideBackgroundColor }) => css`
     width: fit-content;
-    padding-right: ${theme.eui.euiSizeS};
+    padding-right: ${theme.eui.euiSizeXS};
     padding-left: ${theme.eui.euiSizeXS};
 
     ${($severity === 'Critical' || $severity === 'High') &&
     !$hideBackgroundColor &&
     css`
-      background-color: ${transparentize(theme.eui.euiColorDanger, 0.2)};
+      background-color: ${theme.eui.euiColorDanger};
       border-radius: 999px; // pill shaped
     `};
   `}
 `;
 const TooltipContainer = styled.div`
-  padding: ${({ theme }) => theme.eui.euiSizeS};
+  padding: ${({ theme }) => theme.euiSizeS};
 `;
 
 export const RiskScoreLevel: React.FC<{
@@ -68,18 +70,21 @@ const RiskScoreBadge: React.FC<{
   severity: RiskSeverity;
   hideBackgroundColor?: boolean;
   ['data-test-subj']?: string;
-}> = React.memo(({ severity, hideBackgroundColor = false, 'data-test-subj': dataTestSubj }) => (
-  <RiskBadge
-    color={euiLightVars.euiColorDanger}
-    $severity={severity}
-    $hideBackgroundColor={hideBackgroundColor}
-    data-test-subj={dataTestSubj ?? 'risk-score'}
-  >
-    <EuiTextColor color="default">
-      <EuiHealth className="eui-alignMiddle" color={RISK_SEVERITY_COLOUR[severity]}>
-        {severity}
-      </EuiHealth>
-    </EuiTextColor>
-  </RiskBadge>
-));
+}> = React.memo(({ severity, hideBackgroundColor = false, 'data-test-subj': dataTestSubj }) => {
+  const { euiTheme } = useEuiTheme();
+  return (
+    <RiskBadge
+      color={euiTheme.colors.danger}
+      $severity={severity}
+      $hideBackgroundColor={hideBackgroundColor}
+      data-test-subj={dataTestSubj ?? 'risk-score'}
+    >
+      <EuiTextColor color="default">
+        <EuiHealth className="eui-alignMiddle" color={RISK_SEVERITY_COLOUR[severity]}>
+          {severity}
+        </EuiHealth>
+      </EuiTextColor>
+    </RiskBadge>
+  );
+});
 RiskScoreBadge.displayName = 'RiskScoreBadge';

x-pack/plugins/security_solution/public/entity_analytics/hooks/use_criticality_level_colors.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { useEuiTheme } from '@elastic/eui';
+import type { CriticalityLevelWithUnassigned } from '../../../common/entity_analytics/asset_criticality/types';
+// TODO: update these colors once severity color palette is available
+export const useCriticalityLevelColors = (): Record<CriticalityLevelWithUnassigned, string> => {
+  const { euiTheme } = useEuiTheme();
+  return {
+    extreme_impact: '#F66D64', // TODO change to euiTheme.colors.vis.euiColorVis6 when borealis is available,
+    high_impact: euiTheme.colors.vis.euiColorVisWarm1,
+    medium_impact: euiTheme.colors.vis.euiColorVis9,
+    low_impact: euiTheme.colors.vis.euiColorVisSuccess0,
+    unassigned: euiTheme.colors.vis.euiColorVisNeutral0, // TODO: this is a closest guess based on severity colors, change to grey20 when available
+  };
+};