[Visual Refresh] behindText datavis and severity color cleanup

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

@@ -26,19 +26,29 @@ export function getColorForAgentStatus(
   agentStatus: SimplifiedAgentStatus,
   euiTheme: EuiThemeComputed<{}>
 ): string {
+  const isAmsterdam = euiTheme.themeName === 'EUI_THEME_AMSTERDAM';
+
   switch (agentStatus) {
     case 'healthy':
-      return euiTheme.colors.backgroundFilledSuccess;
+      return isAmsterdam
+        ? euiTheme.colors.vis.euiColorVisBehindText0
+        : euiTheme.colors.backgroundFilledSuccess;
     case 'offline':
       return euiTheme.colors.lightShade;
     case 'inactive':
       return euiTheme.colors.darkShade;
     case 'unhealthy':
-      return euiTheme.colors.backgroundFilledWarning;
+      return isAmsterdam
+        ? euiTheme.colors.vis.euiColorVisBehindText5
+        : euiTheme.colors.backgroundFilledWarning;
     case 'orphaned':
-      return euiTheme.colors.backgroundFilledWarning;
+      return isAmsterdam
+        ? euiTheme.colors.vis.euiColorVisBehindText5
+        : euiTheme.colors.backgroundFilledWarning;
     case 'updating':
-      return euiTheme.colors.backgroundFilledPrimary;
+      return isAmsterdam
+        ? euiTheme.colors.vis.euiColorVisBehindText1
+        : euiTheme.colors.backgroundFilledPrimary;
     case 'unenrolled':
       return euiTheme.colors.backgroundBaseDisabled;
     case 'uninstalled':

x-pack/platform/plugins/shared/ml/public/application/model_management/test_models/models/question_answering/question_answering_output.tsx

@@ -60,11 +60,11 @@ function insertHighlighting(result: FormattedQuestionAnsweringResult, inputText:
 const ResultBadge: FC<PropsWithChildren<unknown>> = ({ children }) => {
   const { euiTheme } = useEuiTheme();
   const euiFontSizeXS = useEuiFontSize('xs').fontSize;
+  const isAmsterdam = euiTheme.themeName === 'EUI_THEME_AMSTERDAM';
 
-  // For Amsterdam, use a `_behindText` variant. Borealis doesn't need it because of updated contrasts.
-  const badgeColor = euiTheme.flags.hasVisColorAdjustment
-    ? // @ts-expect-error _behindText is not defined in EuiThemeComputed after Borealis update
-      euiTheme.colors.vis.euiColorVis5_behindText
+  // For Amsterdam, use a `behindText` variant. Borealis doesn't need it because of updated contrasts.
+  const badgeColor = isAmsterdam
+    ? euiTheme.colors.vis.euiColorVisBehindText5
     : euiTheme.colors.vis.euiColorVis9;
 
   return (
@@ -74,9 +74,7 @@ const ResultBadge: FC<PropsWithChildren<unknown>> = ({ children }) => {
         marginRight: ICON_PADDING,
         marginTop: `-${ICON_PADDING}`,
         // For Amsterdam, add a border to the badge to improve contrast with the background.
-        ...(euiTheme.flags.hasVisColorAdjustment
-          ? { border: `1px solid ${euiTheme.colors.vis.euiColorVis5}` }
-          : {}),
+        ...(isAmsterdam ? { border: `1px solid ${euiTheme.colors.vis.euiColorVis5}` } : {}),
         fontSize: euiFontSizeXS,
         padding: '0px 6px',
         pointerEvents: 'none',

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

@@ -38,13 +38,19 @@ export function getServiceHealthStatusColor(
   euiTheme: EuiThemeComputed,
   status: ServiceHealthStatus
 ) {
+  const isAmsterdam = euiTheme.themeName === 'EUI_THEME_AMSTERDAM';
+
   switch (status) {
     case ServiceHealthStatus.healthy:
-      return euiTheme.colors.success;
+      return isAmsterdam
+        ? euiTheme.colors.vis.euiColorVis0
+        : euiTheme.colors.vis.euiColorVisSuccess0;
     case ServiceHealthStatus.warning:
-      return euiTheme.colors.warning;
+      return isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.vis.euiColorVis9;
     case ServiceHealthStatus.critical:
-      return euiTheme.colors.danger;
+      return isAmsterdam
+        ? euiTheme.colors.vis.euiColorVis9
+        : euiTheme.colors.vis.euiColorSeverity14;
     case ServiceHealthStatus.unknown:
       return euiTheme.colors.mediumShade;
   }
@@ -54,13 +60,21 @@ export function getServiceHealthStatusBadgeColor(
   euiTheme: EuiThemeComputed,
   status: ServiceHealthStatus
 ) {
+  const isAmsterdam = euiTheme.themeName === 'EUI_THEME_AMSTERDAM';
+
   switch (status) {
     case ServiceHealthStatus.healthy:
-      return euiTheme.colors.success;
+      return isAmsterdam
+        ? euiTheme.colors.vis.euiColorVisBehindText0
+        : euiTheme.colors.vis.euiColorVisSuccess0;
     case ServiceHealthStatus.warning:
-      return euiTheme.colors.warning;
+      return isAmsterdam
+        ? euiTheme.colors.vis.euiColorVisBehindText5
+        : euiTheme.colors.vis.euiColorVis9;
     case ServiceHealthStatus.critical:
-      return euiTheme.colors.danger;
+      return isAmsterdam
+        ? euiTheme.colors.vis.euiColorVisBehindText9
+        : euiTheme.colors.vis.euiColorSeverity12;
     case ServiceHealthStatus.unknown:
       return euiTheme.colors.mediumShade;
   }

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx

@@ -12,7 +12,6 @@ import {
   EuiSkeletonText,
   EuiText,
   EuiTitle,
-  euiPaletteColorBlindBehindText,
   useEuiTheme,
 } from '@elastic/eui';
 import { RECORDS_FIELD } from '@kbn/exploratory-view-plugin/public';
@@ -148,7 +147,7 @@ export const MonitorAlerts = ({
                   ...(locationFilter ?? []),
                 ],
                 color: isAmsterdam
-                  ? euiPaletteColorBlindBehindText()[7]
+                  ? euiTheme.colors.vis.euiColorVisBehindText7
                   : euiTheme.colors.vis.euiColorVis7,
               },
             ]}
@@ -203,7 +202,7 @@ export const MonitorAlerts = ({
                   ...(locationFilter ?? []),
                 ],
                 color: isAmsterdam
-                  ? euiPaletteColorBlindBehindText()[0]
+                  ? euiTheme.colors.vis.euiColorVisBehindText0
                   : euiTheme.colors.vis.euiColorVis0,
               },
             ]}

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx

@@ -5,13 +5,7 @@
  * 2.0.
  */
 import { Chart, Metric, MetricTrendShape, Settings } from '@elastic/charts';
-import {
-  EuiPanel,
-  EuiSpacer,
-  EuiThemeComputed,
-  euiPaletteColorBlindBehindText,
-  useEuiTheme,
-} from '@elastic/eui';
+import { EuiPanel, EuiSpacer, EuiThemeComputed, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -49,13 +43,13 @@ export const getColor = (euiTheme: EuiThemeComputed, isEnabled: boolean, status?
 
   switch (status) {
     case 'down':
-      return isAmsterdam ? euiPaletteColorBlindBehindText()[9] : euiTheme.colors.danger;
+      return isAmsterdam ? euiTheme.colors.vis.euiColorVisBehindText9 : euiTheme.colors.danger;
     case 'up':
-      return isAmsterdam ? euiPaletteColorBlindBehindText()[0] : euiTheme.colors.success;
+      return isAmsterdam ? euiTheme.colors.vis.euiColorVisBehindText0 : euiTheme.colors.success;
     case 'unknown':
       return euiTheme.colors.ghost;
     default:
-      return isAmsterdam ? euiPaletteColorBlindBehindText()[0] : euiTheme.colors.success;
+      return isAmsterdam ? euiTheme.colors.vis.euiColorVisBehindText0 : euiTheme.colors.success;
   }
 };
 

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/hooks/use_status_by_location.tsx

@@ -75,11 +75,13 @@ export function useStatusByLocation({
 
   return useMemo(() => {
     const getColor = (status: string) => {
+      const isAmsterdam = euiTheme.themeName === 'EUI_THEME_AMSTERDAM';
+
       switch (status) {
         case 'up':
-          return euiTheme.colors.success;
+          return isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.success;
         case 'down':
-          return euiTheme.colors.vis.euiColorVis6;
+          return isAmsterdam ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.vis.euiColorVis6;
         default:
           return euiTheme.colors.backgroundBaseSubdued;
       }
@@ -113,8 +115,11 @@ export function useStatusByLocation({
     data?.aggregations?.locations.buckets,
     loading,
     monitorLocations,
+    euiTheme.themeName,
     euiTheme.colors.success,
+    euiTheme.colors.vis.euiColorVis0,
     euiTheme.colors.vis.euiColorVis6,
+    euiTheme.colors.vis.euiColorVis9,
     euiTheme.colors.backgroundBaseSubdued,
   ]);
 }

x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/ping_list/columns/ping_status.tsx

@@ -32,7 +32,11 @@ const getPingStatusLabel = (status: string, ping: Ping) => {
 
 export const PingStatusColumn = ({ pingStatus, item }: Props) => {
   const theme = useEuiTheme();
-  const dangerBehindText = theme.euiTheme.colors.textDanger;
+  const isAmsterdam = theme.euiTheme.themeName === 'EUI_THEME_AMSTERDAM';
+
+  const dangerBehindText = isAmsterdam
+    ? theme.euiTheme.colors.vis.euiColorVisBehindText9
+    : theme.euiTheme.colors.vis.euiColorVis6;
 
   const timeStamp = moment(item.timestamp);
 

x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/columns/status_badge.tsx

@@ -19,7 +19,11 @@ export const StatusBadge = ({
   summaryError?: PingError;
 }) => {
   const theme = useEuiTheme();
-  const dangerBehindText = theme.euiTheme.colors.textDanger;
+  const isAmsterdam = theme.euiTheme.themeName === 'EUI_THEME_AMSTERDAM';
+
+  const dangerBehindText = isAmsterdam
+    ? theme.euiTheme.colors.vis.euiColorVisBehindText9
+    : theme.euiTheme.colors.vis.euiColorVis6;
 
   if (status === STATUS.UP) {
     return (