diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/services/agent_status.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/services/agent_status.tsx index 2c61ab10ca78f..6e2986735d6be 100644 --- a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/services/agent_status.tsx +++ b/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': diff --git a/x-pack/platform/plugins/shared/ml/public/application/model_management/test_models/models/question_answering/question_answering_output.tsx b/x-pack/platform/plugins/shared/ml/public/application/model_management/test_models/models/question_answering/question_answering_output.tsx index 58fd02f7b5e00..3d8d3c6485cbf 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/model_management/test_models/models/question_answering/question_answering_output.tsx +++ b/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> = ({ children }) => { const { euiTheme } = useEuiTheme(); const euiFontSizeXS = useEuiFontSize('xs').fontSize; + const isAmsterdam = euiTheme.flags.hasVisColorAdjustment; - // 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> = ({ 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', diff --git a/x-pack/solutions/observability/plugins/apm/common/service_health_status.ts b/x-pack/solutions/observability/plugins/apm/common/service_health_status.ts index 65427caba7473..f9b960693e391 100644 --- a/x-pack/solutions/observability/plugins/apm/common/service_health_status.ts +++ b/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; } diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx index 40bcaa3697b30..690ce9303d2b9 100644 --- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx +++ b/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, }, ]} diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx index 7121268f4661f..58406d8e6555d 100644 --- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx +++ b/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; } }; diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/hooks/use_status_by_location.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/hooks/use_status_by_location.tsx index a4706794ad26d..f37c087a045d7 100644 --- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/hooks/use_status_by_location.tsx +++ b/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, ]); } diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/ping_list/columns/ping_status.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/ping_list/columns/ping_status.tsx index 9e5fef631507c..64608c6c4b445 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/ping_list/columns/ping_status.tsx +++ b/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); diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/columns/status_badge.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/columns/status_badge.tsx index 5abf56c0189e5..55dc1f3cd6889 100644 --- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/columns/status_badge.tsx +++ b/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 (