asset criticality badge colors update to use euiTheme Colors

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/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
+  };
+};