Eui Refresh

x-pack/solutions/security/plugins/security_solution/public/entity_analytics/common/utils.ts

@@ -6,6 +6,7 @@
  */
 
 import { euiLightVars } from '@kbn/ui-theme';
+import { useEuiTheme } from '@elastic/eui';
 import { RiskSeverity } from '../../../common/search_strategy';
 import { SEVERITY_COLOR } from '../../overview/components/detection_response/utils';
 export { RISK_LEVEL_RANGES as RISK_SCORE_RANGES } from '../../../common/entity_analytics/risk_engine';
@@ -26,6 +27,27 @@ export const RISK_SEVERITY_COLOUR: { [k in RiskSeverity]: string } = {
   [RiskSeverity.Critical]: SEVERITY_COLOR.critical,
 };
 
+export const useRiskSeverityColors = (): { [k in RiskSeverity]: string } => {
+  const { euiTheme } = useEuiTheme();
+
+  return {
+    [RiskSeverity.Unknown]: euiTheme.colors.vis.euiColorVisNeutral0, // TODO: this is a closest guess based on severity colors, change to grey20 when available
+    // TODO: update these with V9.0.0 severity palette colors when available / keep if the below are  updated with the palette
+    [RiskSeverity.Low]: euiTheme.flags.hasVisColorAdjustment
+      ? euiTheme.colors.vis.euiColorVis0 // amsterdam palette
+      : euiTheme.colors.vis.euiColorVisSuccess0, // borealis palette
+    [RiskSeverity.Moderate]: euiTheme.flags.hasVisColorAdjustment
+      ? euiTheme.colors.vis.euiColorVis5 // amsterdam palette
+      : euiTheme.colors.vis.euiColorSeverity7, // borealis palette
+    [RiskSeverity.High]: euiTheme.flags.hasVisColorAdjustment
+      ? euiTheme.colors.vis.euiColorVis7 // amsterdam palette
+      : euiTheme.colors.vis.euiColorSeverity10, // borealis palette
+    [RiskSeverity.Critical]: euiTheme.flags.hasVisColorAdjustment
+      ? euiTheme.colors.vis.euiColorVis9 // amsterdam palette
+      : euiTheme.colors.vis.euiColorSeverity14, // borealis palette
+  };
+};
+
 type SnakeToCamelCaseString<S extends string> = S extends `${infer T}_${infer U}`
   ? `${T}${Capitalize<SnakeToCamelCaseString<U>>}`
   : S;

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

@@ -10,6 +10,7 @@ import { euiLightVars } from '@kbn/ui-theme';
 import { CRITICALITY_LEVEL_TITLE } from './translations';
 import type { CriticalityLevelWithUnassigned } from '../../../../common/entity_analytics/asset_criticality/types';
 
+// below will be updated with new severity color palette & shared security wide severity colors hook creation
 export const CRITICALITY_LEVEL_COLOR: Record<CriticalityLevelWithUnassigned, string> = {
   extreme_impact: '#E7664C',
   high_impact: '#DA8B45',

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

@@ -13,15 +13,17 @@ import {
   EuiSpacer,
   EuiText,
   EuiTitle,
+  useEuiFontSize,
   useEuiTheme,
 } from '@elastic/eui';
+
 import { css } from '@emotion/css';
 import React from 'react';
 import { FormattedMessage, useI18n } from '@kbn/i18n-react';
 
-import { euiThemeVars } from '@kbn/ui-theme';
 import { useAssetCriticalityEntityTypes } from '../../../hooks/use_enabled_entity_types';
 import { EntityTypeToIdentifierField } from '../../../../../common/entity_analytics/types';
+
 import {
   CRITICALITY_CSV_MAX_SIZE_BYTES,
   ValidCriticalityLevels,
@@ -37,19 +39,20 @@ 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 i18n = useI18n();
 
     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};
+    `;
+
     const entityTypes = useAssetCriticalityEntityTypes();
     const i18nOrList = (items: string[]) =>
       i18n

x-pack/solutions/security/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: ${euiTheme.border.width.thin} solid ${euiTheme.colors.accentSecondary};
               `}
             >
               {validLines.text}

x-pack/solutions/security/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/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_score_donut_chart/index.tsx

@@ -10,7 +10,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { i18n } from '@kbn/i18n';
 import { ChartLabel } from '../../../overview/components/detection_response/alerts_by_status/chart_label';
-import { RISK_SEVERITY_COLOUR } from '../../common/utils';
+import { useRiskSeverityColors } from '../../common/utils';
 import type { SeverityCount } from '../severity/types';
 import { useRiskDonutChartData } from './use_risk_donut_chart_data';
 import type { FillColor } from '../../../common/components/charts/donutchart';
@@ -21,12 +21,6 @@ import type { RiskSeverity } from '../../../../common/search_strategy';
 
 const DONUT_HEIGHT = 120;
 
-const fillColor: FillColor = (dataName) => {
-  return Object.hasOwn(RISK_SEVERITY_COLOUR, dataName)
-    ? RISK_SEVERITY_COLOUR[dataName as RiskSeverity]
-    : emptyDonutColor;
-};
-
 const DonutContainer = styled(EuiFlexItem)`
   padding-right: ${({ theme }) => theme.eui.euiSizeXXL};
   padding-left: ${({ theme }) => theme.eui.euiSizeM};
@@ -42,7 +36,12 @@ interface RiskScoreDonutChartProps {
 
 export const RiskScoreDonutChart = ({ severityCount }: RiskScoreDonutChartProps) => {
   const [donutChartData, legendItems, total] = useRiskDonutChartData(severityCount);
-
+  const riskColors = useRiskSeverityColors();
+  const fillColorValue: FillColor = (dataName) => {
+    return Object.hasOwn(riskColors, dataName)
+      ? riskColors[dataName as RiskSeverity]
+      : emptyDonutColor;
+  };
   return (
     <EuiFlexGroup responsive={false} data-test-subj="risk-score-donut-chart">
       <StyledLegendItems grow={false}>
@@ -51,7 +50,7 @@ export const RiskScoreDonutChart = ({ severityCount }: RiskScoreDonutChartProps)
       <DonutContainer grow={false} className="eui-textCenter">
         <DonutChart
           data={donutChartData ?? null}
-          fillColor={fillColor}
+          fillColor={fillColorValue}
           height={DONUT_HEIGHT}
           label={i18n.translate(
             'xpack.securitySolution.entityAnalytics.riskScore.donut_chart.totalLabel',

x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_score_donut_chart/use_risk_donut_chart_data.ts

@@ -6,7 +6,7 @@
  */
 import { sum } from 'lodash/fp';
 import { useMemo } from 'react';
-import { RISK_SEVERITY_COLOUR } from '../../common/utils';
+import { useRiskSeverityColors } from '../../common/utils';
 import type { LegendItem } from '../../../common/components/charts/legend_item';
 import type { SeverityCount } from '../severity/types';
 import type { DonutChartProps } from '../../../common/components/charts/donutchart';
@@ -17,22 +17,23 @@ const legendField = 'kibana.alert.severity';
 export const useRiskDonutChartData = (
   severityCount: SeverityCount
 ): [DonutChartProps['data'], LegendItem[], number] => {
+  const riskSeverityColor = useRiskSeverityColors();
   const [donutChartData, legendItems, total] = useMemo(() => {
-    const severities = Object.keys(RISK_SEVERITY_COLOUR) as RiskSeverity[];
+    const severities = Object.keys(riskSeverityColor) as RiskSeverity[];
 
     return [
       severities.map((status) => ({
         key: status,
         value: severityCount[status],
       })),
       severities.map((status) => ({
-        color: RISK_SEVERITY_COLOUR[status],
+        color: riskSeverityColor[status],
         field: legendField,
         value: status,
       })),
       sum(Object.values(severityCount)),
     ];
-  }, [severityCount]);
+  }, [riskSeverityColor, severityCount]);
 
   return [donutChartData, legendItems, total];
 };

x-pack/solutions/security/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 { capitalize } from 'lodash/fp';
@@ -46,6 +45,7 @@ import {
   SUMMARY_TABLE_MIN_WIDTH,
 } from './common';
 import { EntityEventTypes } from '../../../common/lib/telemetry';
+import { useRiskSeverityColors } from '../../common/utils';
 
 export interface RiskSummaryProps<T extends EntityType> {
   riskScoreData: RiskScoreState<T>;
@@ -71,7 +71,7 @@ const FlyoutRiskSummaryComponent = <T extends EntityType>({
   const riskData = data && data.length > 0 ? data[0] : undefined;
   const entityData = getEntityData<T>(entityType, riskData);
   const { euiTheme } = useEuiTheme();
-
+  const riskColors = useRiskSeverityColors();
   const lensAttributes = useMemo(() => {
     const entityName = entityData?.name ?? '';
     const fieldName = EntityTypeToIdentifierField[entityType];
@@ -80,10 +80,10 @@ const FlyoutRiskSummaryComponent = <T extends EntityType>({
       severity: entityData?.risk?.calculated_level,
       query: `${fieldName}: ${entityName}`,
       spaceId: 'default',
+      riskColors,
       riskEntity: entityType,
     });
-  }, [entityData?.name, entityData?.risk?.calculated_level, entityType]);
-
+  }, [entityData?.name, entityData?.risk?.calculated_level, entityType, riskColors]);
   const xsFontSize = useEuiFontSize('xxs').fontSize;
   const rows = useMemo(() => getItems(entityData), [entityData]);
 
@@ -247,7 +247,7 @@ const FlyoutRiskSummaryComponent = <T extends EntityType>({
                   css={css`
                     position: absolute;
                     right: 0;
-                    top: -${euiThemeVars.euiSize};
+                    top: -${euiTheme.size.base};
                   `}
                 >
                   <InspectButton

x-pack/solutions/security/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 { useRiskSeverityColors } from '../../../common/utils';
 
 jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
@@ -27,6 +26,19 @@ jest.mock('@elastic/eui', () => {
 });
 
 describe('RiskScore', () => {
+  let riskSeverityColor: ReturnType<typeof useRiskSeverityColors>;
+  const HookWrapper: React.FC = () => {
+    riskSeverityColor = useRiskSeverityColors();
+    return null;
+  };
+
+  beforeAll(() => {
+    render(
+      <TestProviders>
+        <HookWrapper />
+      </TestProviders>
+    );
+  });
   const context = {};
   it('renders critical severity risk score', () => {
     const { container } = render(
@@ -36,10 +48,9 @@ describe('RiskScore', () => {
     );
 
     expect(container).toHaveTextContent(RiskSeverity.Critical);
-
     expect(EuiHealth as jest.Mock).toHaveBeenLastCalledWith(
-      expect.objectContaining({ color: SEVERITY_COLOR.critical }),
-      context
+      expect.objectContaining({ color: riskSeverityColor.Critical }),
+      {}
     );
   });
 
@@ -53,7 +64,7 @@ describe('RiskScore', () => {
     expect(container).toHaveTextContent(RiskSeverity.High);
 
     expect(EuiHealth as jest.Mock).toHaveBeenLastCalledWith(
-      expect.objectContaining({ color: SEVERITY_COLOR.high }),
+      expect.objectContaining({ color: riskSeverityColor.High }),
       context
     );
   });
@@ -68,7 +79,7 @@ describe('RiskScore', () => {
     expect(container).toHaveTextContent(RiskSeverity.Moderate);
 
     expect(EuiHealth as jest.Mock).toHaveBeenLastCalledWith(
-      expect.objectContaining({ color: SEVERITY_COLOR.medium }),
+      expect.objectContaining({ color: riskSeverityColor.Moderate }),
       context
     );
   });
@@ -83,7 +94,7 @@ describe('RiskScore', () => {
     expect(container).toHaveTextContent(RiskSeverity.Low);
 
     expect(EuiHealth as jest.Mock).toHaveBeenLastCalledWith(
-      expect.objectContaining({ color: SEVERITY_COLOR.low }),
+      expect.objectContaining({ color: riskSeverityColor.Low }),
       context
     );
   });
@@ -98,7 +109,7 @@ describe('RiskScore', () => {
     expect(container).toHaveTextContent(RiskSeverity.Unknown);
 
     expect(EuiHealth as jest.Mock).toHaveBeenLastCalledWith(
-      expect.objectContaining({ color: euiThemeVars.euiColorMediumShade }),
+      expect.objectContaining({ color: riskSeverityColor.Unknown }),
       context
     );
   });

x-pack/solutions/security/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 { useRiskSeverityColors } 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 }>`
-  ${({ theme, $severity, $hideBackgroundColor }) => css`
+const RiskBadge = styled.div<{
+  $severity: RiskSeverity;
+  $hideBackgroundColor: boolean;
+}>`
+  ${({ theme, color, $severity, $hideBackgroundColor }) => css`
     width: fit-content;
     padding-right: ${theme.eui.euiSizeS};
     padding-left: ${theme.eui.euiSizeXS};
 
     ${($severity === 'Critical' || $severity === 'High') &&
     !$hideBackgroundColor &&
     css`
-      background-color: ${transparentize(theme.eui.euiColorDanger, 0.2)};
+      background-color: ${color};
       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,22 @@ 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();
+  const riskColors = useRiskSeverityColors();
+  return (
+    <RiskBadge
+      color={euiTheme.colors.backgroundLightDanger}
+      $severity={severity}
+      $hideBackgroundColor={hideBackgroundColor}
+      data-test-subj={dataTestSubj ?? 'risk-score'}
+    >
+      <EuiTextColor color="default">
+        <EuiHealth className="eui-alignMiddle" color={riskColors[severity]}>
+          {severity}
+        </EuiHealth>
+      </EuiTextColor>
+    </RiskBadge>
+  );
+});
 RiskScoreBadge.displayName = 'RiskScoreBadge';