From 6003dd76c0db9f5a6e3fdfacd91c8b7863a1e20a Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Wed, 6 Oct 2021 05:30:05 -0400
Subject: [PATCH] [Fleet] fix for inactive color (#113736) (#114057)

* fix for inactive color

* fix for inactive color

* using theme colors

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: juliaElastic <90178898+juliaElastic@users.noreply.github.com>
---
 .../fleet/sections/agents/components/agent_health.tsx      | 4 +++-
 .../fleet/sections/agents/services/agent_status.tsx        | 7 ++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_health.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_health.tsx
index f597d2c6758a..fbac6ad74906 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_health.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_health.tsx
@@ -9,6 +9,8 @@ import React from 'react';
 import { FormattedMessage, FormattedRelative } from '@kbn/i18n/react';
 import { EuiBadge, EuiToolTip } from '@elastic/eui';
 
+import * as euiVars from '@elastic/eui/dist/eui_theme_light.json';
+
 import type { Agent } from '../../../types';
 
 interface Props {
@@ -27,7 +29,7 @@ const Status = {
     </EuiBadge>
   ),
   Inactive: (
-    <EuiBadge color="default">
+    <EuiBadge color={euiVars.default.euiColorDarkShade}>
       <FormattedMessage id="xpack.fleet.agentHealth.inactiveStatusText" defaultMessage="Inactive" />
     </EuiBadge>
   ),
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/services/agent_status.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/services/agent_status.tsx
index 275d0c83da65..74e9879936d4 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/services/agent_status.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/services/agent_status.tsx
@@ -7,19 +7,20 @@
 
 import { euiPaletteColorBlindBehindText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import * as euiVars from '@elastic/eui/dist/eui_theme_light.json';
 
 import type { SimplifiedAgentStatus } from '../../../types';
 
 const visColors = euiPaletteColorBlindBehindText();
 const colorToHexMap = {
-  // TODO - replace with variable once https://github.com/elastic/eui/issues/2731 is closed
-  default: '#d3dae6',
+  // using variables as mentioned here https://elastic.github.io/eui/#/guidelines/getting-started
+  default: euiVars.default.euiColorLightShade,
   primary: visColors[1],
   secondary: visColors[0],
   accent: visColors[2],
   warning: visColors[5],
   danger: visColors[9],
-  inactive: '#98A2B3',
+  inactive: euiVars.default.euiColorDarkShade,
 };
 
 export const AGENT_STATUSES: SimplifiedAgentStatus[] = [