Migrate to EUI severity colors palette for CSP (#222246)

## Summary

Fixes:
- elastic/security-team#11606

this PR updates Cloud Risk Apps team owned flows to use new severity
color palette


### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [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
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: kibanamachine <[email protected]>

Author: maxcold

x-pack/solutions/security/packages/kbn-cloud-security-posture/public/index.ts

@@ -11,14 +11,11 @@ export type { NavFilter } from './src/utils/query_utils';
 export { showErrorToast } from './src/utils/show_error_toast';
 export { encodeQuery, decodeQuery } from './src/utils/query_utils';
 export { CspEvaluationBadge } from './src/components/csp_evaluation_badge';
-export {
-  getSeverityStatusColor,
-  getCvsScoreColor,
-  getMisconfigurationStatusColor,
-} from './src/utils/get_finding_colors';
+export { getSeverityStatusColor, getCvsScoreColor } from './src/utils/get_finding_colors';
 export { getSeverityText } from './src/utils/get_vulnerability_text';
 export { getVulnerabilityStats, hasVulnerabilitiesData } from './src/utils/vulnerability_helpers';
 export { CVSScoreBadge, SeverityStatusBadge } from './src/components/vulnerability_badges';
+export { useGetMisconfigurationStatusColor } from './src/hooks/use_get_misconfiguration_status_color';
 export { getNormalizedSeverity } from './src/utils/get_normalized_severity';
 export { createMisconfigurationFindingsQuery } from './src/utils/findings_query_builders';
 export { ActionableBadge, type MultiValueCellAction } from './src/components/actionable_badge';

x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/components/csp_evaluation_badge.tsx

@@ -11,7 +11,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
 import { MISCONFIGURATION_STATUS } from '@kbn/cloud-security-posture-common';
 import type { MisconfigurationEvaluationStatus } from '@kbn/cloud-security-posture-common';
-import { getMisconfigurationStatusColor } from '../utils/get_finding_colors';
+import { useGetMisconfigurationStatusColor } from '../hooks/use_get_misconfiguration_status_color';
 
 interface Props {
   type?: MisconfigurationEvaluationStatus;
@@ -21,31 +21,35 @@ interface Props {
 // 46px is used to make sure the badge is always the same width.
 const BADGE_WIDTH = '46px';
 
-export const CspEvaluationBadge = ({ type }: Props) => (
-  <EuiBadge
-    color={getMisconfigurationStatusColor(type)}
-    css={css`
-      width: ${BADGE_WIDTH};
-      display: flex;
-      justify-content: center;
-    `}
-    data-test-subj={`${type}_finding`}
-  >
-    {type === MISCONFIGURATION_STATUS.FAILED ? (
-      <FormattedMessage
-        id="securitySolutionPackages.csp.cspEvaluationBadge.failLabel"
-        defaultMessage="Fail"
-      />
-    ) : type === MISCONFIGURATION_STATUS.PASSED ? (
-      <FormattedMessage
-        id="securitySolutionPackages.csp.cspEvaluationBadge.passLabel"
-        defaultMessage="Pass"
-      />
-    ) : (
-      <FormattedMessage
-        id="securitySolutionPackages.csp.cspEvaluationBadge.naLabel"
-        defaultMessage="N/A"
-      />
-    )}
-  </EuiBadge>
-);
+export const CspEvaluationBadge = ({ type = MISCONFIGURATION_STATUS.UNKNOWN }: Props) => {
+  const { getMisconfigurationStatusColor } = useGetMisconfigurationStatusColor();
+
+  return (
+    <EuiBadge
+      color={getMisconfigurationStatusColor(type)}
+      css={css`
+        width: ${BADGE_WIDTH};
+        display: flex;
+        justify-content: center;
+      `}
+      data-test-subj={`${type}_finding`}
+    >
+      {type === MISCONFIGURATION_STATUS.FAILED ? (
+        <FormattedMessage
+          id="securitySolutionPackages.csp.cspEvaluationBadge.failLabel"
+          defaultMessage="Fail"
+        />
+      ) : type === MISCONFIGURATION_STATUS.PASSED ? (
+        <FormattedMessage
+          id="securitySolutionPackages.csp.cspEvaluationBadge.passLabel"
+          defaultMessage="Pass"
+        />
+      ) : (
+        <FormattedMessage
+          id="securitySolutionPackages.csp.cspEvaluationBadge.naLabel"
+          defaultMessage="N/A"
+        />
+      )}
+    </EuiBadge>
+  );
+};

x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/hooks/use_get_misconfiguration_status_color.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 { useEuiTheme } from '@elastic/eui';
+import type { MisconfigurationEvaluationStatus } from '@kbn/cloud-security-posture-common';
+import { getMisconfigurationStatusColor as getMisconfigurationStatusColorUtil } from '../utils/get_finding_colors';
+
+export const useGetMisconfigurationStatusColor = () => {
+  const { euiTheme } = useEuiTheme();
+  const getMisconfigurationStatusColor = (status: MisconfigurationEvaluationStatus) => {
+    return getMisconfigurationStatusColorUtil(status, euiTheme);
+  };
+  return { getMisconfigurationStatusColor };
+};

x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_finding_colors.test.ts

@@ -5,73 +5,68 @@
  * 2.0.
  */
 
-import { getCvsScoreColor, getSeverityStatusColor, SEVERITY_COLOR } from './get_finding_colors';
+import { getCvsScoreColor, getSeverityStatusColor } from './get_finding_colors';
 import { EuiThemeComputed } from '@elastic/eui';
 
 const mockEuiThemeBorealis = {
   themeName: 'borialis',
+  colors: {
+    severity: {
+      neutral: 'neutral',
+      warning: 'warning',
+      risk: 'risk',
+      danger: 'danger',
+      unknown: 'unknown',
+    },
+  },
 };
 
 describe('getSeverityStatusColor', () => {
   it('should return the correct color for LOW severity', () => {
-    expect(getSeverityStatusColor('LOW', mockEuiThemeBorealis as EuiThemeComputed)).toBe(
-      SEVERITY_COLOR.low
-    );
+    expect(getSeverityStatusColor('LOW', mockEuiThemeBorealis as EuiThemeComputed)).toBe('neutral');
   });
 
   it('should return the correct color for MEDIUM severity', () => {
     expect(getSeverityStatusColor('MEDIUM', mockEuiThemeBorealis as EuiThemeComputed)).toBe(
-      SEVERITY_COLOR.medium
+      'warning'
     );
   });
 
   it('should return the correct color for HIGH severity', () => {
-    expect(getSeverityStatusColor('HIGH', mockEuiThemeBorealis as EuiThemeComputed)).toBe(
-      SEVERITY_COLOR.high
-    );
+    expect(getSeverityStatusColor('HIGH', mockEuiThemeBorealis as EuiThemeComputed)).toBe('risk');
   });
 
   it('should return the correct color for CRITICAL severity', () => {
     expect(getSeverityStatusColor('CRITICAL', mockEuiThemeBorealis as EuiThemeComputed)).toBe(
-      SEVERITY_COLOR.critical
+      'danger'
     );
   });
 
   it('should return the correct color for an unknown severity', () => {
     expect(getSeverityStatusColor('UNKNOWN', mockEuiThemeBorealis as EuiThemeComputed)).toBe(
-      SEVERITY_COLOR.unknown
+      'unknown'
     );
   });
 });
 
 describe('getCvsScoreColor', () => {
   it('returns correct color for low severity score', () => {
-    expect(getCvsScoreColor(1.5, mockEuiThemeBorealis as EuiThemeComputed)).toBe(
-      SEVERITY_COLOR.low
-    );
+    expect(getCvsScoreColor(1.5, mockEuiThemeBorealis as EuiThemeComputed)).toBe('neutral');
   });
 
   it('returns correct color for medium severity score', () => {
-    expect(getCvsScoreColor(5.5, mockEuiThemeBorealis as EuiThemeComputed)).toBe(
-      SEVERITY_COLOR.medium
-    );
+    expect(getCvsScoreColor(5.5, mockEuiThemeBorealis as EuiThemeComputed)).toBe('warning');
   });
 
   it('returns correct color for high severity score', () => {
-    expect(getCvsScoreColor(7.9, mockEuiThemeBorealis as EuiThemeComputed)).toBe(
-      SEVERITY_COLOR.high
-    );
+    expect(getCvsScoreColor(7.9, mockEuiThemeBorealis as EuiThemeComputed)).toBe('risk');
   });
 
   it('returns correct color for critical severity score', () => {
-    expect(getCvsScoreColor(10.0, mockEuiThemeBorealis as EuiThemeComputed)).toBe(
-      SEVERITY_COLOR.critical
-    );
+    expect(getCvsScoreColor(10.0, mockEuiThemeBorealis as EuiThemeComputed)).toBe('danger');
   });
 
   it('returns correct color for low severity score for undefined value', () => {
-    expect(getCvsScoreColor(-0.2, mockEuiThemeBorealis as EuiThemeComputed)).toBe(
-      SEVERITY_COLOR.unknown
-    );
+    expect(getCvsScoreColor(-0.2, mockEuiThemeBorealis as EuiThemeComputed)).toBe('unknown');
   });
 });

x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_finding_colors.ts

@@ -6,74 +6,28 @@
  */
 
 import { EuiThemeComputed } from '@elastic/eui';
-import { euiThemeVars } from '@kbn/ui-theme'; // TODO: replace with euiTheme
 import type { MisconfigurationEvaluationStatus } from '@kbn/cloud-security-posture-common';
 import {
   VULNERABILITIES_SEVERITY,
   MISCONFIGURATION_STATUS,
 } from '@kbn/cloud-security-posture-common';
 
-const isAmsterdam = (euiThemeName: string) => {
-  return euiThemeName?.toLowerCase().includes('amsterdam');
-};
-
-// Designers blocked the migration to tokens from EUI during the Borealys theme migration.
-// We keep using hardcoded colors until security severity palette is ready https://github.com/elastic/kibana/issues/203387
-// TODO: Borealis migration - move from hardcoded values to severity palette https://github.com/elastic/security-team/issues/11606
-export const SEVERITY_COLOR = {
-  critical: '#E7664C',
-  high: '#DA8B45',
-  medium: '#D6BF57',
-  low: '#54B399',
-  unknown: '#aaa',
-} as const;
-
-// TODO: Borealis migration - migrate to security severity palette when it's ready https://github.com/elastic/security-team/issues/11606
 export const getSeverityStatusColor = (severity: string, euiTheme: EuiThemeComputed): string => {
-  // TODO: Borealis migration - remove old mapping in main after Serverless switched to Borealis
-  if (euiTheme && isAmsterdam(euiTheme.themeName)) {
-    switch (severity) {
-      case VULNERABILITIES_SEVERITY.LOW:
-        return euiThemeVars.euiColorVis0;
-      case VULNERABILITIES_SEVERITY.MEDIUM:
-        return euiThemeVars.euiColorVis5_behindText;
-      case VULNERABILITIES_SEVERITY.HIGH:
-        return euiThemeVars.euiColorVis9_behindText;
-      case VULNERABILITIES_SEVERITY.CRITICAL:
-        return euiThemeVars.euiColorDanger;
-      default:
-        return '#aaa';
-    }
-  }
-
   switch (severity) {
     case VULNERABILITIES_SEVERITY.LOW:
-      return SEVERITY_COLOR.low;
+      return euiTheme.colors.severity.neutral;
     case VULNERABILITIES_SEVERITY.MEDIUM:
-      return SEVERITY_COLOR.medium;
+      return euiTheme.colors.severity.warning;
     case VULNERABILITIES_SEVERITY.HIGH:
-      return SEVERITY_COLOR.high;
+      return euiTheme.colors.severity.risk;
     case VULNERABILITIES_SEVERITY.CRITICAL:
-      return SEVERITY_COLOR.critical;
+      return euiTheme.colors.severity.danger;
     default:
-      return SEVERITY_COLOR.unknown;
+      return euiTheme.colors.severity.unknown;
   }
 };
 
 export const getCvsScoreColor = (score: number, euiTheme: EuiThemeComputed): string | undefined => {
-  // TODO: Borealis migration - remove old mapping in main when Serverless switched to Borealis
-  if (euiTheme && isAmsterdam(euiTheme.themeName)) {
-    if (score <= 4) {
-      return euiThemeVars.euiColorVis0; // low severity
-    } else if (score >= 4 && score <= 7) {
-      return euiThemeVars.euiColorVis7; // medium severity
-    } else if (score >= 7 && score <= 9) {
-      return euiThemeVars.euiColorVis9; // high severity
-    } else if (score >= 9) {
-      return euiThemeVars.euiColorDanger; // critical severity
-    }
-  }
-
   if (score >= 0 && score <= 4) {
     return getSeverityStatusColor(VULNERABILITIES_SEVERITY.LOW, euiTheme);
   } else if (score >= 4 && score <= 7) {
@@ -87,16 +41,16 @@ export const getCvsScoreColor = (score: number, euiTheme: EuiThemeComputed): str
   }
 };
 
-// TODO: Borealis migration - migrate to EUI color tokens when they are ready https://github.com/elastic/security-team/issues/11606
 export const getMisconfigurationStatusColor = (
-  status?: MisconfigurationEvaluationStatus
+  status: MisconfigurationEvaluationStatus,
+  euiTheme: EuiThemeComputed
 ): string => {
   switch (status) {
     case MISCONFIGURATION_STATUS.PASSED:
-      return SEVERITY_COLOR.low;
+      return euiTheme.colors.severity.success;
     case MISCONFIGURATION_STATUS.FAILED:
-      return SEVERITY_COLOR.critical;
+      return euiTheme.colors.severity.danger;
     default:
-      return SEVERITY_COLOR.unknown;
+      return euiTheme.colors.severity.unknown;
   }
 };

x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/vulnerability_helpers.test.ts

@@ -9,14 +9,20 @@ import { i18n } from '@kbn/i18n';
 import type { EuiThemeComputed } from '@elastic/eui';
 import type { VulnSeverity } from '@kbn/cloud-security-posture-common';
 import { getVulnerabilityStats } from './vulnerability_helpers';
-import {
-  getSeverityStatusColor as getSeverityStatusColorUtil,
-  SEVERITY_COLOR,
-} from './get_finding_colors';
+import { getSeverityStatusColor as getSeverityStatusColorUtil } from './get_finding_colors';
 
 const getSeverityStatusColor = (status: VulnSeverity) => {
   const euiTheme = {
     themeName: 'borealis',
+    colors: {
+      severity: {
+        danger: 'danger',
+        risk: 'risk',
+        warning: 'warning',
+        neutral: 'neutral',
+        unknown: 'unknown',
+      },
+    },
   };
 
   return getSeverityStatusColorUtil(status, euiTheme as EuiThemeComputed);
@@ -52,7 +58,7 @@ describe('getVulnerabilitiesAggregationCount', () => {
           }
         ),
         count: 5,
-        color: SEVERITY_COLOR.unknown,
+        color: 'unknown',
         isCurrentFilter: false,
       },
       {
@@ -63,7 +69,7 @@ describe('getVulnerabilitiesAggregationCount', () => {
           }
         ),
         count: 4,
-        color: SEVERITY_COLOR.low,
+        color: 'neutral',
         isCurrentFilter: false,
       },
       {
@@ -74,7 +80,7 @@ describe('getVulnerabilitiesAggregationCount', () => {
           }
         ),
         count: 3,
-        color: SEVERITY_COLOR.medium,
+        color: 'warning',
         isCurrentFilter: false,
       },
       {
@@ -85,7 +91,7 @@ describe('getVulnerabilitiesAggregationCount', () => {
           }
         ),
         count: 2,
-        color: SEVERITY_COLOR.high,
+        color: 'risk',
         isCurrentFilter: false,
       },
       {
@@ -96,7 +102,7 @@ describe('getVulnerabilitiesAggregationCount', () => {
           }
         ),
         count: 1,
-        color: SEVERITY_COLOR.critical,
+        color: 'danger',
         isCurrentFilter: false,
       },
     ]);

x-pack/solutions/security/packages/kbn-cloud-security-posture/public/tsconfig.json

@@ -32,7 +32,6 @@
     "@kbn/cloud-security-posture-common",
     "@kbn/i18n",
     "@kbn/search-types",
-    "@kbn/ui-theme",
     "@kbn/i18n-react",
     "@kbn/rison",
     "@kbn/core-lifecycle-browser",

x-pack/solutions/security/plugins/cloud_security_posture/public/components/compliance_score_bar.tsx

@@ -10,7 +10,7 @@ import { css, SerializedStyles } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { MISCONFIGURATION_STATUS } from '@kbn/cloud-security-posture-common';
-import { getMisconfigurationStatusColor } from '@kbn/cloud-security-posture';
+import { useGetMisconfigurationStatusColor } from '@kbn/cloud-security-posture';
 import { calculatePostureScore } from '../../common/utils/helpers';
 import {
   CSP_FINDINGS_COMPLIANCE_SCORE,
@@ -34,6 +34,7 @@ export const ComplianceScoreBar = ({
   overrideCss?: SerializedStyles;
 }) => {
   const { euiTheme } = useEuiTheme();
+  const { getMisconfigurationStatusColor } = useGetMisconfigurationStatusColor();
   const complianceScore = calculatePostureScore(totalPassed, totalFailed);
 
   // ensures the compliance bar takes full width of its parent