[Fleet][Eui Visual Refresh] Make agent status colors theme aware (#20…

…4070)

## Summary

Closes #201997

Fleet does not make proper use of [color
palettes](https://eui.elastic.co/#/utilities/color-palettes), in the
sense that [vis colors should only be used to
visualizations](#199715 (comment)).

There are currently two Fleet UI elements, in the agents list table,
that use some vis colors and need to be updated:
- the status icons in the agent status summary
- the horizontal agent status bar


![image](https://github.com/user-attachments/assets/7c4500b0-1c2d-4a65-9886-3857c8210dc2)

This PR updates the function `getColorForAgentStatus`, which returns the
color based on agent status, to return theme colors with semantic
meaning aligned with the agent status badges. This will ensure colours
are aligned between agent status badges and the table header in both
Amsterdam and Borealis themes.

It should be noted that the colours used for offline and inactive status
(lightShade and darkShade), are marked as disabled, since their use
isn't properly semantic:
<img width="1012" alt="Screenshot 2024-12-16 at 15 31 00"
src="https://github.com/user-attachments/assets/ee7a185f-01d9-4139-a1ff-785a249fd882"
/>

## Screenshots

### Before (current `main`)

#### Amsterdam theme

<img width="1918" alt="fleet-agents-amsterdam-main"
src="https://github.com/user-attachments/assets/1be3ccf7-64bd-40e3-832d-b79f47345170"
/>

#### Borealis theme

<img width="1918" alt="fleet-agents-borealis-main"
src="https://github.com/user-attachments/assets/276208ed-91a8-41df-8858-53a0e7894c4a"
/>

### After

#### Amsterdam theme

<img width="1918" alt="fleet-agents-amsterdam-branch"
src="https://github.com/user-attachments/assets/e9e6ab25-f43e-4949-9e9c-8edc3443effd"
/>

#### Borealis theme

<img width="1918" alt="fleet-agents-borealis-branch"
src="https://github.com/user-attachments/assets/6ae2c3ca-9209-406f-8f46-6ee40dc77632"
/>

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_badges.tsx

@@ -5,7 +5,13 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiHealth, EuiNotificationBadge, EuiFlexItem } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiHealth,
+  EuiNotificationBadge,
+  EuiFlexItem,
+  useEuiTheme,
+} from '@elastic/eui';
 import React, { memo } from 'react';
 
 import {
@@ -31,9 +37,10 @@ export const AgentStatusBadges: React.FC<{
 
 const AgentStatusBadge: React.FC<{ status: SimplifiedAgentStatus; count: number }> = memo(
   ({ status, count }) => {
+    const { euiTheme } = useEuiTheme();
     return (
       <>
-        <EuiHealth color={getColorForAgentStatus(status)}>
+        <EuiHealth color={getColorForAgentStatus(status, euiTheme)}>
           <EuiFlexGroup alignItems="center" gutterSize="s">
             <EuiFlexItem grow={false}>{getLabelForAgentStatus(status)}</EuiFlexItem>
             <EuiFlexItem grow={false}>

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_bar.tsx

@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { EuiColorPaletteDisplay, EuiSpacer } from '@elastic/eui';
+import { EuiColorPaletteDisplay, EuiSpacer, useEuiTheme } from '@elastic/eui';
 import React, { useMemo } from 'react';
 
 import { AGENT_STATUSES, getColorForAgentStatus } from '../../services/agent_status';
@@ -25,16 +25,17 @@ const StyledEuiColorPaletteDisplay = styled(EuiColorPaletteDisplay)`
 export const AgentStatusBar: React.FC<{
   agentStatus: { [k in SimplifiedAgentStatus]: number };
 }> = ({ agentStatus }) => {
+  const { euiTheme } = useEuiTheme();
   const palette = useMemo(() => {
     return AGENT_STATUSES.reduce((acc, status) => {
       const previousStop = acc.length > 0 ? acc[acc.length - 1].stop : 0;
       acc.push({
         stop: previousStop + (agentStatus[status] || 0),
-        color: getColorForAgentStatus(status),
+        color: getColorForAgentStatus(status, euiTheme),
       });
       return acc;
     }, [] as Array<{ stop: number; color: string }>);
-  }, [agentStatus]);
+  }, [agentStatus, euiTheme]);
 
   const hasNoAgent = palette[palette.length - 1].stop === 0;
 

x-pack/plugins/fleet/public/applications/fleet/sections/agents/services/agent_status.tsx

@@ -5,24 +5,11 @@
  * 2.0.
  */
 
-import { euiPaletteColorBlindBehindText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { euiLightVars } from '@kbn/ui-theme';
 
-import type { SimplifiedAgentStatus } from '../../../types';
+import type { EuiThemeComputed } from '@elastic/eui-theme-common';
 
-const visColors = euiPaletteColorBlindBehindText();
-const colorToHexMap = {
-  // using variables as mentioned here https://elastic.github.io/eui/#/guidelines/getting-started
-  default: euiLightVars.euiColorLightShade,
-  primary: visColors[1],
-  success: visColors[0],
-  accent: visColors[2],
-  warning: visColors[5],
-  danger: visColors[9],
-  inactive: euiLightVars.euiColorDarkShade,
-  lightest: euiLightVars.euiColorDisabled,
-};
+import type { SimplifiedAgentStatus } from '../../../types';
 
 export const AGENT_STATUSES: SimplifiedAgentStatus[] = [
   'healthy',
@@ -33,20 +20,23 @@ export const AGENT_STATUSES: SimplifiedAgentStatus[] = [
   'unenrolled',
 ];
 
-export function getColorForAgentStatus(agentStatus: SimplifiedAgentStatus): string {
+export function getColorForAgentStatus(
+  agentStatus: SimplifiedAgentStatus,
+  euiTheme: EuiThemeComputed<{}>
+): string {
   switch (agentStatus) {
     case 'healthy':
-      return colorToHexMap.success;
+      return euiTheme.colors.backgroundFilledSuccess;
     case 'offline':
-      return colorToHexMap.default;
+      return euiTheme.colors.lightShade;
     case 'inactive':
-      return colorToHexMap.inactive;
+      return euiTheme.colors.darkShade;
     case 'unhealthy':
-      return colorToHexMap.warning;
+      return euiTheme.colors.backgroundFilledWarning;
     case 'updating':
-      return colorToHexMap.primary;
+      return euiTheme.colors.backgroundFilledPrimary;
     case 'unenrolled':
-      return colorToHexMap.lightest;
+      return euiTheme.colors.backgroundBaseDisabled;
     default:
       throw new Error(`Unsupported Agent status ${agentStatus}`);
   }