[APM] Service Inventory Updated the EuiBadge to use the `behind_tex…

…t` vars instead of the base colors for the health status badges (#77844)

* Use behind_text colors in health status

* Separated badge color usage from getSeverityColor

x-pack/plugins/apm/common/service_health_status.ts

@@ -54,6 +54,22 @@ export function getServiceHealthStatusColor(
   }
 }
 
+export function getServiceHealthStatusBadgeColor(
+  theme: EuiTheme,
+  status: ServiceHealthStatus
+) {
+  switch (status) {
+    case ServiceHealthStatus.healthy:
+      return theme.eui.euiColorVis0_behindText;
+    case ServiceHealthStatus.warning:
+      return theme.eui.euiColorVis5_behindText;
+    case ServiceHealthStatus.critical:
+      return theme.eui.euiColorVis9_behindText;
+    case ServiceHealthStatus.unknown:
+      return theme.eui.euiColorMediumShade;
+  }
+}
+
 export function getServiceHealthStatusLabel(status: ServiceHealthStatus) {
   switch (status) {
     case ServiceHealthStatus.critical:

x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/HealthBadge.tsx

@@ -6,7 +6,7 @@
 import React from 'react';
 import { EuiBadge } from '@elastic/eui';
 import {
-  getServiceHealthStatusColor,
+  getServiceHealthStatusBadgeColor,
   getServiceHealthStatusLabel,
   ServiceHealthStatus,
 } from '../../../../../common/service_health_status';
@@ -20,7 +20,7 @@ export function HealthBadge({
   const theme = useTheme();
 
   return (
-    <EuiBadge color={getServiceHealthStatusColor(theme, healthStatus)}>
+    <EuiBadge color={getServiceHealthStatusBadgeColor(theme, healthStatus)}>
       {getServiceHealthStatusLabel(healthStatus)}
     </EuiBadge>
   );