From cee8d6ee3030fb319850858526e9b09c76df191a Mon Sep 17 00:00:00 2001
From: CAWilson94 <charlotte.wilson@elastic.co>
Date: Wed, 11 Dec 2024 10:25:47 +0000
Subject: [PATCH] asset criticality badge colors update to use euiTheme Colors

---
 .../asset_criticality_badge.tsx               | 13 +++----------
 .../hooks/use_criticality_level_colors.ts     | 19 +++++++++++++++++++
 2 files changed, 22 insertions(+), 10 deletions(-)
 create mode 100644 x-pack/plugins/security_solution/public/entity_analytics/hooks/use_criticality_level_colors.ts

diff --git a/x-pack/plugins/security_solution/public/entity_analytics/components/asset_criticality/asset_criticality_badge.tsx b/x-pack/plugins/security_solution/public/entity_analytics/components/asset_criticality/asset_criticality_badge.tsx
index a4c7344ca5607..befac8537b94a 100644
--- a/x-pack/plugins/security_solution/public/entity_analytics/components/asset_criticality/asset_criticality_badge.tsx
+++ b/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}
     >
diff --git a/x-pack/plugins/security_solution/public/entity_analytics/hooks/use_criticality_level_colors.ts b/x-pack/plugins/security_solution/public/entity_analytics/hooks/use_criticality_level_colors.ts
new file mode 100644
index 0000000000000..d017b111796b1
--- /dev/null
+++ b/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
+  };
+};