[SecuritySolution] Update severity colors for Borealis theme

x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/alerts/alerts_preview.tsx

@@ -86,7 +86,7 @@ export const AlertsPreview = ({
   const alertStats = Array.from(severityMap, ([key, count]) => ({
     key: capitalize(key),
     count,
-    color: getSeverityColor(key),
+    color: getSeverityColor(key, euiTheme),
   }));
 
   const totalAlertsCount = alertStats.reduce((total, item) => total + item.count, 0);

x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/csp_details/alerts_findings_details_table.tsx

@@ -9,7 +9,15 @@ import React, { memo, useCallback, useEffect, useState } from 'react';
 import { encode } from '@kbn/rison';
 import { capitalize } from 'lodash';
 import type { Criteria, EuiBasicTableColumn, EuiTableSortingType } from '@elastic/eui';
-import { EuiSpacer, EuiPanel, EuiText, EuiBasicTable, EuiIcon, EuiLink } from '@elastic/eui';
+import {
+  EuiSpacer,
+  EuiPanel,
+  EuiText,
+  EuiBasicTable,
+  EuiIcon,
+  EuiLink,
+  useEuiTheme,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { DistributionBar } from '@kbn/security-solution-distribution-bar';
 import {
@@ -77,6 +85,7 @@ interface AlertsDetailsFields {
 
 export const AlertsDetailsTable = memo(
   ({ field, value }: { field: 'host.name' | 'user.name'; value: string }) => {
+    const { euiTheme } = useEuiTheme();
     useEffect(() => {
       uiMetricService.trackUiMetric(
         METRIC_TYPE.COUNT,
@@ -163,7 +172,7 @@ export const AlertsDetailsTable = memo(
     const alertStats = Array.from(severityMap, ([key, count]) => ({
       key: capitalize(key),
       count,
-      color: getSeverityColor(key),
+      color: getSeverityColor(key, euiTheme),
       filter: () => {
         setCurrentFilter(key);
         setQuery(

x-pack/solutions/security/plugins/security_solution/public/common/components/charts/donutchart_empty.tsx

@@ -4,7 +4,6 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import type { EuiThemeComputed } from '@elastic/eui';
 import { useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import React from 'react';
@@ -15,12 +14,10 @@ interface DonutChartEmptyProps {
 }
 
 /*
- ** @deprecated use getEmptyDonutColor instead
+ ** @deprecated
  */
 export const emptyDonutColor = '#FAFBFD';
 
-export const getEmptyDonutColor = (euiTheme: EuiThemeComputed) => euiTheme.colors.textSubdued;
-
 const EmptyDonutChartComponent: React.FC<DonutChartEmptyProps> = ({
   size = 90,
   donutWidth = 20,

x-pack/solutions/security/plugins/security_solution/public/common/components/severity_badge/index.tsx

@@ -7,18 +7,11 @@
 
 import React from 'react';
 import { upperFirst } from 'lodash/fp';
-import { euiLightVars } from '@kbn/ui-theme';
 import type { Severity } from '@kbn/securitysolution-io-ts-alerting-types';
 
+import { useEuiTheme } from '@elastic/eui';
 import { HealthTruncateText } from '../health_truncate_text';
-
-const { euiColorVis0, euiColorVis5, euiColorVis7, euiColorVis9 } = euiLightVars;
-const severityToColorMap: Record<Severity, string> = {
-  low: euiColorVis0,
-  medium: euiColorVis5,
-  high: euiColorVis7,
-  critical: euiColorVis9,
-};
+import { useRiskSeverityColors } from '../../utils/risk_color_palette';
 
 interface Props {
   value: Severity;
@@ -29,8 +22,10 @@ const SeverityBadgeComponent: React.FC<Props> = ({
   value,
   'data-test-subj': dataTestSubj = 'severity',
 }) => {
+  const { euiTheme } = useEuiTheme();
   const displayValue = upperFirst(value);
-  const color = severityToColorMap[value] ?? 'subdued';
+  const severityToColorMap = useRiskSeverityColors();
+  const color = severityToColorMap[value] ?? euiTheme.colors.textSubdued;
 
   return (
     <HealthTruncateText

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

@@ -5,13 +5,6 @@
  * 2.0.
  */
 
-import { euiLightVars } from '@kbn/ui-theme';
-
-export const RISK_COLOR_LOW = euiLightVars.euiColorVis0;
-export const RISK_COLOR_MEDIUM = euiLightVars.euiColorVis5;
-export const RISK_COLOR_HIGH = euiLightVars.euiColorVis7;
-export const RISK_COLOR_CRITICAL = euiLightVars.euiColorVis9;
-
 export const RISK_SCORE_LOW = 21;
 export const RISK_SCORE_MEDIUM = 47;
 export const RISK_SCORE_HIGH = 73;

x-pack/solutions/security/plugins/security_solution/public/common/utils/risk_color_palette.tsx

@@ -0,0 +1,37 @@
+/*
+ * 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 type { EuiThemeComputed } from '@elastic/eui';
+import { useEuiTheme } from '@elastic/eui';
+import type { Severity } from '@kbn/securitysolution-io-ts-alerting-types';
+import { useMemo } from 'react';
+
+export const getRiskSeverityColors = (euiTheme: EuiThemeComputed) => {
+  if (euiTheme.flags.hasVisColorAdjustment) {
+    // Amsterdam
+    return {
+      low: euiTheme.colors.vis.euiColorVis0,
+      medium: euiTheme.colors.vis.euiColorVis5,
+      high: euiTheme.colors.vis.euiColorVis7,
+      critical: euiTheme.colors.vis.euiColorVis9,
+    };
+  }
+
+  // Borealis
+  return {
+    low: euiTheme.colors.vis.euiColorVisSuccess0,
+    medium: euiTheme.colors.vis.euiColorSeverity7,
+    high: euiTheme.colors.vis.euiColorSeverity10,
+    critical: euiTheme.colors.vis.euiColorSeverity14,
+  };
+};
+
+export const useRiskSeverityColors = (): Record<Severity, string> => {
+  const { euiTheme } = useEuiTheme();
+
+  return useMemo(() => getRiskSeverityColors(euiTheme), [euiTheme]);
+};

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/step_about_rule_details/index.test.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { mount, shallow } from 'enzyme';
-import { EuiProgress, EuiButtonGroup } from '@elastic/eui';
+import { EuiProgress, EuiButtonGroup, useEuiTheme } from '@elastic/eui';
 import { ThemeProvider } from 'styled-components';
 
 import { StepAboutRuleToggleDetails } from '.';
@@ -19,6 +19,7 @@ import { HeaderSection } from '../../../../common/components/header_section';
 import { StepAboutRule } from '../../../rule_creation_ui/components/step_about_rule';
 import type { AboutStepRule } from '../../../../detections/pages/detection_engine/rules/types';
 import { getMockTheme } from '../../../../common/lib/kibana/kibana_react.mock';
+import { renderHook } from '@testing-library/react';
 
 jest.mock('../../../../common/lib/kibana');
 
@@ -30,7 +31,9 @@ describe('StepAboutRuleToggleDetails', () => {
   let stepDataMock: AboutStepRule;
 
   beforeEach(() => {
-    stepDataMock = mockAboutStepRule();
+    const { result } = renderHook(() => useEuiTheme());
+    const euiTheme = result.current.euiTheme;
+    stepDataMock = mockAboutStepRule(euiTheme);
   });
 
   test('it renders loading component when "loading" is true', () => {

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/step_rule_actions/index.test.tsx

@@ -14,13 +14,14 @@ import { TestProviders } from '../../../../common/mock';
 import { StepRuleActions, stepActionsDefaultValue } from '.';
 import {
   defaultSchedule,
-  stepAboutDefaultValue,
+  getStepAboutDefaultValue,
   stepDefineDefaultValue,
 } from '../../../../detections/pages/detection_engine/rules/utils';
 import { useRuleForms } from '../../../rule_creation_ui/pages/form';
 import type { FormHook } from '../../../../shared_imports';
 import type { ActionsStepRule } from '../../../../detections/pages/detection_engine/rules/types';
 import { FrequencyDescription } from './notification_action';
+import type { EuiThemeComputed } from '@elastic/eui';
 
 jest.mock('../../../../common/lib/kibana', () => ({
   useKibana: jest.fn().mockReturnValue({
@@ -61,7 +62,7 @@ describe('StepRuleActions', () => {
   }) => {
     const { actionsStepForm } = useRuleForms({
       defineStepDefault: stepDefineDefaultValue,
-      aboutStepDefault: stepAboutDefaultValue,
+      aboutStepDefault: getStepAboutDefaultValue({} as unknown as EuiThemeComputed),
       scheduleStepDefault: defaultSchedule,
       actionsStepDefault: stepActionsDefaultValue,
     });

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/description_step/index.test.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import { render } from '@testing-library/react';
+import { render, renderHook } from '@testing-library/react';
 
 import {
   StepRuleDescription,
@@ -40,6 +40,7 @@ import {
   ALERT_SUPPRESSION_MISSING_FIELDS_FIELD_NAME,
 } from '../../../rule_creation/components/alert_suppression_edit';
 import { THRESHOLD_ALERT_SUPPRESSION_ENABLED } from '../../../rule_creation/components/threshold_alert_suppression_edit';
+import { useEuiTheme } from '@elastic/eui';
 
 jest.mock('../../../../common/lib/kibana');
 
@@ -60,7 +61,9 @@ describe('description_step', () => {
   beforeEach(() => {
     setupMock.uiSettings.get.mockImplementation(uiSettingsMock(true));
     mockFilterManager = new FilterManager(setupMock.uiSettings);
-    mockAboutStep = mockAboutStepRule();
+    const { result } = renderHook(() => useEuiTheme());
+    const euiTheme = result.current.euiTheme;
+    mockAboutStep = mockAboutStepRule(euiTheme);
   });
 
   describe('StepRuleDescription', () => {

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/rule_preview/index.test.tsx

@@ -19,10 +19,11 @@ import { usePreviewRoute } from './use_preview_route';
 import { DataSourceType } from '../../../../detections/pages/detection_engine/rules/types';
 import {
   getStepScheduleDefaultValue,
-  stepAboutDefaultValue,
+  getStepAboutDefaultValue,
   stepDefineDefaultValue,
 } from '../../../../detections/pages/detection_engine/rules/utils';
 import { usePreviewInvocationCount } from './use_preview_invocation_count';
+import type { EuiThemeComputed } from '@elastic/eui';
 
 jest.mock('../../../../common/lib/kibana');
 jest.mock('./use_preview_route');
@@ -95,7 +96,7 @@ const defaultProps: RulePreviewProps = {
     newTermsFields: ['host.ip'],
     historyWindowSize: '7d',
   },
-  aboutRuleData: stepAboutDefaultValue,
+  aboutRuleData: getStepAboutDefaultValue({} as unknown as EuiThemeComputed),
   scheduleRuleData: getStepScheduleDefaultValue('threat_match'),
 };
 

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/severity_mapping/default_severity.tsx

@@ -12,10 +12,11 @@ import {
   EuiFlexItem,
   EuiSpacer,
   EuiSuperSelect,
+  useEuiTheme,
 } from '@elastic/eui';
 import React from 'react';
 import type { Severity } from '../../../../../common/api/detection_engine/model/rule_schema/common_attributes.gen';
-import { severityOptions } from '../step_about_rule/data';
+import { getSeverityOptions } from '../step_about_rule/data';
 import * as i18n from './translations';
 
 const describedByIds = ['detectionEngineStepAboutRuleSeverity'];
@@ -26,6 +27,8 @@ interface DefaultSeverityProps {
 }
 
 export function DefaultSeverity({ value, onChange }: DefaultSeverityProps) {
+  const { euiTheme } = useEuiTheme();
+  const severityOptions = getSeverityOptions(euiTheme);
   return (
     <EuiFlexItem>
       <EuiFormRow

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/severity_mapping/severity_override.tsx

@@ -14,6 +14,7 @@ import {
   EuiFormLabel,
   EuiIcon,
   EuiSpacer,
+  useEuiTheme,
 } from '@elastic/eui';
 import React, { useCallback, useMemo } from 'react';
 import type { DataViewBase, DataViewFieldBase } from '@kbn/es-query';
@@ -22,7 +23,7 @@ import {
   AutocompleteFieldMatchComponent,
 } from '@kbn/securitysolution-autocomplete';
 import type { Severity, SeverityMappingItem } from '@kbn/securitysolution-io-ts-alerting-types';
-import { severityOptions } from '../step_about_rule/data';
+import { getSeverityOptions } from '../step_about_rule/data';
 import { useKibana } from '../../../../common/lib/kibana';
 import * as styles from './styles';
 import * as i18n from './translations';
@@ -158,6 +159,9 @@ function SeverityMappingRow({
     [index, severityMappingItem.severity, onFieldMatchValueChange]
   );
 
+  const { euiTheme } = useEuiTheme();
+  const severityOptions = useMemo(() => getSeverityOptions(euiTheme), [euiTheme]);
+
   return (
     <EuiFlexItem key={`${severityMappingItem.severity}-${index}`}>
       <EuiFlexGroup data-test-subj="severityOverrideRow" alignItems="center" gutterSize="s">

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/step_about_rule/data.tsx

@@ -7,20 +7,18 @@
 
 import React from 'react';
 import styled from 'styled-components';
+import type { EuiThemeComputed } from '@elastic/eui';
 import { EuiHealth } from '@elastic/eui';
 import type { Severity } from '@kbn/securitysolution-io-ts-alerting-types';
 import * as I18n from './translations';
 
 import {
-  RISK_COLOR_LOW,
-  RISK_COLOR_MEDIUM,
-  RISK_COLOR_HIGH,
-  RISK_COLOR_CRITICAL,
   RISK_SCORE_LOW,
   RISK_SCORE_MEDIUM,
   RISK_SCORE_HIGH,
   RISK_SCORE_CRITICAL,
 } from '../../../../common/constants';
+import { getRiskSeverityColors } from '../../../../common/utils/risk_color_palette';
 
 export interface SeverityOptionItem {
   value: Severity;
@@ -31,24 +29,36 @@ const StyledEuiHealth = styled(EuiHealth)`
   line-height: inherit;
 `;
 
-export const severityOptions: SeverityOptionItem[] = [
-  {
-    value: 'low',
-    inputDisplay: <StyledEuiHealth color={RISK_COLOR_LOW}>{I18n.LOW}</StyledEuiHealth>,
-  },
-  {
-    value: 'medium',
-    inputDisplay: <StyledEuiHealth color={RISK_COLOR_MEDIUM}>{I18n.MEDIUM}</StyledEuiHealth>,
-  },
-  {
-    value: 'high',
-    inputDisplay: <StyledEuiHealth color={RISK_COLOR_HIGH}>{I18n.HIGH}</StyledEuiHealth>,
-  },
-  {
-    value: 'critical',
-    inputDisplay: <StyledEuiHealth color={RISK_COLOR_CRITICAL}>{I18n.CRITICAL}</StyledEuiHealth>,
-  },
-];
+export enum SeverityLevel {
+  low = 'low',
+  medium = 'medium',
+  high = 'high',
+  critical = 'critical',
+}
+
+export const getSeverityOptions: (euiTheme: EuiThemeComputed) => SeverityOptionItem[] = (
+  euiTheme
+) => {
+  const palette = getRiskSeverityColors(euiTheme);
+  return [
+    {
+      value: SeverityLevel.low,
+      inputDisplay: <StyledEuiHealth color={palette.low}>{I18n.LOW}</StyledEuiHealth>,
+    },
+    {
+      value: SeverityLevel.medium,
+      inputDisplay: <StyledEuiHealth color={palette.medium}>{I18n.MEDIUM}</StyledEuiHealth>,
+    },
+    {
+      value: SeverityLevel.high,
+      inputDisplay: <StyledEuiHealth color={palette.high}>{I18n.HIGH}</StyledEuiHealth>,
+    },
+    {
+      value: SeverityLevel.critical,
+      inputDisplay: <StyledEuiHealth color={palette.critical}>{I18n.CRITICAL}</StyledEuiHealth>,
+    },
+  ];
+};
 
 export const defaultRiskScoreBySeverity: Record<Severity, number> = {
   low: RISK_SCORE_LOW,

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/step_about_rule/default_value.ts

@@ -23,7 +23,11 @@ export const stepAboutDefaultValue: AboutStepRule = {
   description: '',
   isAssociatedToEndpointList: false,
   isBuildingBlock: false,
-  severity: { value: 'low', mapping: fillEmptySeverityMappings([]), isMappingChecked: false },
+  severity: {
+    value: 'low',
+    mapping: fillEmptySeverityMappings([]),
+    isMappingChecked: false,
+  },
   riskScore: { value: 21, mapping: [], isMappingChecked: false },
   references: [''],
   falsePositives: [''],