[SecuritySolution] Update severity colors for Borealis theme (elastic…

…#206276) ## Summary Apply severity colors for Borealis theme. elastic#204007 (comment) Update: ⚠️ As the final decision for severity color is still pending, the temporary colors are the hard coded color hex: elastic#203387 `TODO` Borealis migration - move from hardcoded values to severity palette elastic/security-team#11606 | Color token | Amsterdam|Borealis| |-------------|------------|------------| | Critical | euiThemeVars.euiColorDanger |```#E7664C```| | High | euiThemeVars.euiColorVis9_behindText |```#DA8B45``` | | Meduiml |euiThemeVars.euiColorVis5_behindText|```#D6BF57``` | | Low | euiThemeVars.euiColorVis0| ```#54B399``` | ### 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) ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: kibanamachine <[email protected]>
JoseLuisGJ · Jan 27, 2025 · 9333bf6 · 9333bf6
1 parent 7ca9ef3
commit 9333bf6
Show file tree

Hide file tree

Showing 35 changed files with 884 additions and 590 deletions.
diff --git a/...gins/security_solution/public/cloud_security_posture/components/alerts/alerts_preview.tsx b/...gins/security_solution/public/cloud_security_posture/components/alerts/alerts_preview.tsx
@@ -87,7 +87,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);

diff --git a/...on/public/cloud_security_posture/components/csp_details/alerts_findings_details_table.tsx b/...on/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 {
@@ -78,6 +86,8 @@ interface AlertsDetailsFields {
 
 export const AlertsDetailsTable = memo(
   ({ field, value }: { field: CloudPostureEntityIdentifier; value: string }) => {
+    const { euiTheme } = useEuiTheme();
+
     useEffect(() => {
       uiMetricService.trackUiMetric(
         METRIC_TYPE.COUNT,
@@ -164,7 +174,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(

diff --git a/...s/security/plugins/security_solution/public/common/components/charts/donutchart_empty.tsx b/...s/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,

diff --git a/...ions/security/plugins/security_solution/public/common/components/severity_badge/index.tsx b/...ions/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

diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/constants.ts b/x-pack/solutions/security/plugins/security_solution/public/common/constants.ts
@@ -4,13 +4,23 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 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;
+import { euiThemeVars } from '@kbn/ui-theme';
+/**
+ * @deprecated Use getRiskSeverityColors instead
+ */
+export const RISK_COLOR_LOW = euiThemeVars.euiColorVis0;
+/**
+ * @deprecated Use getRiskSeverityColors instead
+ */
+export const RISK_COLOR_MEDIUM = euiThemeVars.euiColorVis5_behindText;
+/**
+ * @deprecated Use getRiskSeverityColors instead
+ */
+export const RISK_COLOR_HIGH = euiThemeVars.euiColorVis9_behindText;
+/**
+ * @deprecated Use getRiskSeverityColors instead
+ */
+export const RISK_COLOR_CRITICAL = euiThemeVars.euiColorDanger;
 
 export const RISK_SCORE_LOW = 21;
 export const RISK_SCORE_MEDIUM = 47;

diff --git a/...tions/security/plugins/security_solution/public/common/utils/__mocks__/severity_colors.ts b/...tions/security/plugins/security_solution/public/common/utils/__mocks__/severity_colors.ts
@@ -0,0 +1,18 @@
+/*
+ * 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';
+
+export const getMockEuiAmsterdamTheme = () =>
+  ({
+    themeName: 'EUI_THEME_AMSTERDAM',
+  } as EuiThemeComputed);
+
+export const getMockEuiBorealisTheme = () =>
+  ({
+    themeName: 'EUI_THEME_BOREALIS',
+  } as EuiThemeComputed);
diff --git a/...utions/security/plugins/security_solution/public/common/utils/risk_color_palette.test.tsx b/...utions/security/plugins/security_solution/public/common/utils/risk_color_palette.test.tsx
@@ -0,0 +1,67 @@
+/*
+ * 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 { renderHook } from '@testing-library/react';
+import { getRiskSeverityColors, useRiskSeverityColors } from './risk_color_palette';
+import { useEuiTheme } from '@elastic/eui';
+import { getMockEuiAmsterdamTheme, getMockEuiBorealisTheme } from './__mocks__/severity_colors';
+
+jest.mock('@elastic/eui', () => ({
+  useEuiTheme: jest.fn(),
+}));
+
+const EXPECTED_SEVERITY_COLOR_AMSTERDAM = {
+  low: '#54b399',
+  medium: '#f1d86f',
+  high: '#ff7e62',
+  critical: '#bd271e',
+};
+
+const EXPECTED_SEVERITY_COLOR_BOREALIS = {
+  low: '#54B399',
+  medium: '#D6BF57',
+  high: '#DA8B45',
+  critical: '#E7664C',
+} as const;
+
+describe('risk_color_palette', () => {
+  const scenarios = [
+    {
+      mockEuiTheme: getMockEuiAmsterdamTheme(),
+      themeName: 'Amsterdam',
+      expected: EXPECTED_SEVERITY_COLOR_AMSTERDAM,
+    },
+    {
+      mockEuiTheme: getMockEuiBorealisTheme(),
+      themeName: 'Borealis',
+      expected: EXPECTED_SEVERITY_COLOR_BOREALIS,
+    },
+  ];
+
+  describe.each(scenarios)(
+    '$themeName: getRiskSeverityColors',
+    ({ mockEuiTheme, themeName, expected }) => {
+      it(`returns the correct colors for ${themeName} theme`, () => {
+        expect(getRiskSeverityColors(mockEuiTheme)).toEqual(expected);
+      });
+    }
+  );
+
+  describe.each(scenarios)(
+    '$themeName: useRiskSeverityColors',
+    ({ mockEuiTheme, themeName, expected }) => {
+      const useEuiThemeMock = useEuiTheme as jest.Mock;
+
+      it(`returns the correct colors for ${themeName} theme`, () => {
+        useEuiThemeMock.mockReturnValue({
+          euiTheme: mockEuiTheme,
+        });
+        const { result } = renderHook(() => useRiskSeverityColors());
+        expect(result.current).toEqual(expected);
+      });
+    }
+  );
+});
diff --git a/...k/solutions/security/plugins/security_solution/public/common/utils/risk_color_palette.tsx b/...k/solutions/security/plugins/security_solution/public/common/utils/risk_color_palette.tsx
@@ -0,0 +1,47 @@
+/*
+ * 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';
+import {
+  RISK_COLOR_CRITICAL,
+  RISK_COLOR_HIGH,
+  RISK_COLOR_LOW,
+  RISK_COLOR_MEDIUM,
+} from '../constants';
+
+// Temporary solution until we have a decision for color palette https://github.com/elastic/kibana/issues/203387
+export const SEVERITY_COLOR = {
+  low: '#54B399',
+  medium: '#D6BF57',
+  high: '#DA8B45',
+  critical: '#E7664C',
+} as const;
+
+const isAmsterdam = (euiThemeName: string) => {
+  return euiThemeName?.toLowerCase().includes('amsterdam');
+};
+
+export const getRiskSeverityColors = (euiTheme: EuiThemeComputed) => {
+  if (euiTheme && isAmsterdam(euiTheme.themeName)) {
+    return {
+      low: RISK_COLOR_LOW,
+      medium: RISK_COLOR_MEDIUM,
+      high: RISK_COLOR_HIGH,
+      critical: RISK_COLOR_CRITICAL,
+    };
+  }
+  return SEVERITY_COLOR;
+};
+
+export const useRiskSeverityColors = (): Record<Severity, string> => {
+  const { euiTheme } = useEuiTheme();
+
+  return useMemo(() => getRiskSeverityColors(euiTheme), [euiTheme]);
+};
diff --git a/...public/detection_engine/rule_creation_ui/components/severity_mapping/default_severity.tsx b/...public/detection_engine/rule_creation_ui/components/severity_mapping/default_severity.tsx
@@ -15,7 +15,7 @@ import {
 } 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 { useSeverityOptions } from '../step_about_rule/data';
 import * as i18n from './translations';
 
 const describedByIds = ['detectionEngineStepAboutRuleSeverity'];
@@ -26,6 +26,7 @@ interface DefaultSeverityProps {
 }
 
 export function DefaultSeverity({ value, onChange }: DefaultSeverityProps) {
+  const severityOptions = useSeverityOptions();
   return (
     <EuiFlexItem>
       <EuiFormRow

diff --git a/...ublic/detection_engine/rule_creation_ui/components/severity_mapping/severity_override.tsx b/...ublic/detection_engine/rule_creation_ui/components/severity_mapping/severity_override.tsx
@@ -22,7 +22,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 { useSeverityOptions } from '../step_about_rule/data';
 import { useKibana } from '../../../../common/lib/kibana';
 import * as styles from './styles';
 import * as i18n from './translations';
@@ -158,6 +158,8 @@ function SeverityMappingRow({
     [index, severityMappingItem.severity, onFieldMatchValueChange]
   );
 
+  const severityOptions = useSeverityOptions();
+
   return (
     <EuiFlexItem key={`${severityMappingItem.severity}-${index}`}>
       <EuiFlexGroup data-test-subj="severityOverrideRow" alignItems="center" gutterSize="s">

diff --git a/...ity_solution/public/detection_engine/rule_creation_ui/components/step_about_rule/data.tsx b/...ity_solution/public/detection_engine/rule_creation_ui/components/step_about_rule/data.tsx
@@ -5,22 +5,20 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';
-import { EuiHealth } from '@elastic/eui';
+import type { EuiThemeComputed } from '@elastic/eui';
+import { EuiHealth, useEuiTheme } 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,41 @@ 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',
+}
+
+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 useSeverityOptions = () => {
+  const { euiTheme } = useEuiTheme();
+  const severityOptions = useMemo(() => getSeverityOptions(euiTheme), [euiTheme]);
+
+  return severityOptions;
+};
 
 export const defaultRiskScoreBySeverity: Record<Severity, number> = {
   low: RISK_SCORE_LOW,

diff --git a/...tion/public/detection_engine/rule_creation_ui/components/step_about_rule/default_value.ts b/...tion/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: [''],