diff --git a/x-pack/plugins/observability_solution/apm/common/service_health_status.ts b/x-pack/plugins/observability_solution/apm/common/service_health_status.ts index e6c4787dd2f2..65427caba747 100644 --- a/x-pack/plugins/observability_solution/apm/common/service_health_status.ts +++ b/x-pack/plugins/observability_solution/apm/common/service_health_status.ts @@ -40,11 +40,11 @@ export function getServiceHealthStatusColor( ) { switch (status) { case ServiceHealthStatus.healthy: - return euiTheme.colors.vis.euiColorVis0; + return euiTheme.colors.success; case ServiceHealthStatus.warning: - return euiTheme.colors.vis.euiColorVis5; + return euiTheme.colors.warning; case ServiceHealthStatus.critical: - return euiTheme.colors.vis.euiColorVis9; + return euiTheme.colors.danger; case ServiceHealthStatus.unknown: return euiTheme.colors.mediumShade; } @@ -56,11 +56,11 @@ export function getServiceHealthStatusBadgeColor( ) { switch (status) { case ServiceHealthStatus.healthy: - return euiTheme.colors.vis.euiColorVis0; + return euiTheme.colors.success; case ServiceHealthStatus.warning: - return euiTheme.colors.vis.euiColorVis5; + return euiTheme.colors.warning; case ServiceHealthStatus.critical: - return euiTheme.colors.vis.euiColorVis9; + return euiTheme.colors.danger; case ServiceHealthStatus.unknown: return euiTheme.colors.mediumShade; } diff --git a/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx index 49d70454cd48..0136fcfb88f3 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx @@ -22,7 +22,7 @@ import { Tooltip, niceTimeFormatter, } from '@elastic/charts'; -import { EuiSpacer, useEuiTheme } from '@elastic/eui'; +import { COLOR_MODES_STANDARD, EuiSpacer, useEuiTheme } from '@elastic/eui'; import React, { useMemo } from 'react'; import { IUiSettingsClient } from '@kbn/core/public'; import { TimeUnitChar } from '@kbn/observability-plugin/common'; @@ -122,7 +122,7 @@ export function ChartPreview({ legendPosition={'bottom'} legendSize={legendSize} locale={i18n.getLocale()} - theme={theme.colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME} + theme={theme.colorMode === COLOR_MODES_STANDARD.dark ? DARK_THEME : LIGHT_THEME} /> diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/metrics/serverless_metrics/serverless_summary.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/metrics/serverless_metrics/serverless_summary.tsx index 6b82f205068f..30544489eb0d 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/metrics/serverless_metrics/serverless_summary.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/metrics/serverless_metrics/serverless_summary.tsx @@ -34,7 +34,7 @@ const CentralizedContainer = styled.div` const Border = styled.div` height: 55px; - border-right: 1px solid ${({ theme }) => theme.euiTheme.colors.lightShade}; + border-right: ${({ theme }) => theme.euiTheme.border.thin}; `; function VerticalRule() { diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/controls.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/controls.tsx index f018d368874d..e3a293a279e2 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/controls.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/controls.tsx @@ -109,8 +109,7 @@ export function Controls() { ); const [zoom, setZoom] = useState((cy && cy.zoom()) || 1); - // @ts-expect-error - const duration = parseInt(euiTheme.animation.fast, 10); + const duration = euiTheme.animation.fast ? parseInt(euiTheme.animation.fast, 10) : 0; const downloadUrl = useDebugDownloadUrl(cy); const viewFullMapUrl = getLegacyApmHref({ basePath, diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/cytoscape_options.ts b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/cytoscape_options.ts index f0d0ed80ca2f..fa6fdbce3c76 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/cytoscape_options.ts +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/cytoscape_options.ts @@ -80,10 +80,9 @@ function getBorderWidth(el: cytoscape.NodeSingular) { const isIE11 = !!window.MSInputMethodContext && !!document.documentMode; export const getAnimationOptions = (euiTheme: EuiThemeComputed): cytoscape.AnimationOptions => ({ - // @ts-expect-error - duration: parseInt(euiTheme.animation.normal, 10), + duration: euiTheme.animation.normal ? parseInt(euiTheme.animation.normal, 10) : 0, // @ts-expect-error The cubic-bezier options here are not recognized by the cytoscape types - easing: euiTheme.animation.bouncetheme, + easing: euiTheme.animation.bounce, }); const zIndexNode = 200; @@ -124,7 +123,7 @@ const getStyle = ( color: (el: cytoscape.NodeSingular) => el.hasClass('primary') || el.selected() ? euiTheme.colors.textPrimary - : euiTheme.colors.text, + : euiTheme.colors.textParagraph, // theme.euiFontFamily doesn't work here for some reason, so we're just // specifying a subset of the fonts for the label text. 'font-family': 'Inter UI, Segoe UI, Helvetica, Arial, sans-serif', diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/storage_explorer/summary_stats.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/storage_explorer/summary_stats.tsx index bd76025d9606..30053480eb4e 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/storage_explorer/summary_stats.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/storage_explorer/summary_stats.tsx @@ -204,7 +204,7 @@ function SummaryMetric({ css={css` ${xlFontSize} font-weight: ${euiTheme.font.weight.bold}; - color: ${euiTheme.colors.text}; + color: ${euiTheme.colors.textParagraph}; `} > {value} diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/accordion_waterfall.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/accordion_waterfall.tsx index ae3a410eac53..41d11ba74e2e 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/accordion_waterfall.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/accordion_waterfall.tsx @@ -211,14 +211,14 @@ const WaterfallNode = React.memo((props: WaterfallNodeProps) => { forceState={node.expanded ? 'open' : 'closed'} onToggle={toggleAccordion} css={css` - border-top: 1px solid ${euiTheme.colors.lightShade}; + border-top: ${euiTheme.border.thin}; .button_${node.item.id} { width: 100%; height: ${ACCORDION_HEIGHT}px; margin-left: ${marginLeftLevel}px; border-left: ${hasError - ? `2px solid ${euiTheme.colors.danger};` - : `1px solid ${euiTheme.colors.lightShade};`}; + ? `${euiTheme.border.width.thick} solid ${euiTheme.colors.danger};` + : `${euiTheme.border.thin};`}; &:hover { background-color: ${euiTheme.colors.lightestShade}; } diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/timeline_axis.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/timeline_axis.tsx index b51d8dfc6a01..ebaa3d231dfa 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/timeline_axis.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/timeline_axis.tsx @@ -76,7 +76,7 @@ export function TimelineAxis({ plotValues, marks = [], topTraceDuration }: Timel key="topTrace" x={topTraceDurationPosition} y={0} - fill={euiTheme.colors.text} + fill={euiTheme.colors.textParagraph} textAnchor="middle" > {tickFormatter(topTraceDuration).formatted} diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/kuery_bar/typeahead/suggestion.js b/x-pack/plugins/observability_solution/apm/public/components/shared/kuery_bar/typeahead/suggestion.js index 949059f7fc26..625b19f92342 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/kuery_bar/typeahead/suggestion.js +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/kuery_bar/typeahead/suggestion.js @@ -43,7 +43,7 @@ const Description = styled.div` `; const ListItem = styled.li` - font-size: ${() => useEuiFontSize('s').fontSize}; + font-size: ${() => useEuiFontSize('xs').fontSize}; height: ${({ theme }) => theme.euiTheme.size.xl}; align-items: center; display: flex; diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/ml_callout/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/ml_callout/index.tsx index 7517c5152032..0a6058a2c28c 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/ml_callout/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/ml_callout/index.tsx @@ -48,7 +48,7 @@ export function MLCallout({ } | undefined; - const getLearnMoreLink = (color: 'primary' | 'accentSecondary') => { + const getLearnMoreLink = (color: 'primary' | 'success') => { return ( { setLoading(true); @@ -120,7 +120,7 @@ export function MLCallout({ })} ) : ( - getLearnMoreLink('accentSecondary') + getLearnMoreLink('success') ), }; break; diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/context.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/context.tsx index 41a6c4e4994e..a79b5529d2cd 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/context.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/context.tsx @@ -52,7 +52,7 @@ const LineNumber = styled.div<{ highlight: boolean }>` color: ${({ theme }) => theme.euiTheme.colors.mediumShade}; line-height: ${LINE_HEIGHT}px; text-align: right; - border-right: 1px solid ${({ theme }) => theme.euiTheme.colors.lightShade}; + border-right: ${({ theme }) => theme.euiTheme.border.thin}; background-color: ${({ highlight, theme }) => highlight ? tint(0.9, theme.euiTheme.colors.warning) : null}; diff --git a/x-pack/plugins/observability_solution/apm/public/utils/test_helpers.tsx b/x-pack/plugins/observability_solution/apm/public/utils/test_helpers.tsx index 0bfc1f12332b..a5d6f6782908 100644 --- a/x-pack/plugins/observability_solution/apm/public/utils/test_helpers.tsx +++ b/x-pack/plugins/observability_solution/apm/public/utils/test_helpers.tsx @@ -112,15 +112,11 @@ export function expectTextsInDocument(output: any, texts: string[]) { }); } -export function renderWithTheme( - component: React.ReactNode, - params?: any, - { darkMode = false } = {} -) { +export function renderWithTheme(component: React.ReactNode, params?: any) { return render({component}, params); } -export function mountWithTheme(tree: React.ReactElement, { darkMode = false } = {}) { +export function mountWithTheme(tree: React.ReactElement) { function WrappingThemeProvider(props: any) { return {props.children}; } diff --git a/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/density_chart.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/density_chart.tsx index 5f42d19d035d..d45fe0c3c42c 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/density_chart.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/density_chart.tsx @@ -11,6 +11,7 @@ import { max } from 'lodash'; import * as React from 'react'; import styled from '@emotion/styled'; import { LogEntriesSummaryBucket } from '@kbn/logs-shared-plugin/common'; +import { COLOR_MODES_STANDARD } from '@elastic/eui'; interface DensityChartProps { buckets: LogEntriesSummaryBucket[]; @@ -66,14 +67,14 @@ export const DensityChart: React.FC = ({ const DensityChartPositiveBackground = styled.rect` fill: ${(props) => - props.theme.colorMode === 'DARK' + props.theme.colorMode === COLOR_MODES_STANDARD.dark ? props.theme.euiTheme.colors.lightShade : props.theme.euiTheme.colors.lightestShade}; `; const PositiveAreaPath = styled.path` fill: ${(props) => - props.theme.colorMode === 'DARK' + props.theme.colorMode === COLOR_MODES_STANDARD.dark ? props.theme.euiTheme.colors.mediumShade : props.theme.euiTheme.colors.lightShade}; `; diff --git a/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/log_minimap.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/log_minimap.tsx index fcd57e98b07d..a2c1121ff2ba 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/log_minimap.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/log_minimap.tsx @@ -14,6 +14,7 @@ import { import { scaleLinear } from 'd3-scale'; import moment from 'moment'; import * as React from 'react'; +import { COLOR_MODES_STANDARD } from '@elastic/eui'; import { DensityChart } from './density_chart'; import { HighlightedInterval } from './highlighted_interval'; import { SearchMarkers } from './search_markers'; @@ -166,7 +167,7 @@ const TimeCursor = styled.line` pointer-events: none; stroke-width: 1px; stroke: ${(props) => - props.theme.colorMode === 'DARK' + props.theme.colorMode === COLOR_MODES_STANDARD.dark ? props.theme.euiTheme.colors.darkestShade : props.theme.euiTheme.colors.darkShade}; `; diff --git a/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/time_ruler.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/time_ruler.tsx index 1223e014fe9e..59e94333e94e 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/time_ruler.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/time_ruler.tsx @@ -8,7 +8,7 @@ import { scaleTime } from 'd3-scale'; import * as React from 'react'; import styled from '@emotion/styled'; -import { useEuiFontSize } from '@elastic/eui'; +import { COLOR_MODES_STANDARD, useEuiFontSize } from '@elastic/eui'; import { useKibanaTimeZoneSetting } from '../../../hooks/use_kibana_time_zone_setting'; import { getTimeLabelFormat } from './time_label_formatter'; @@ -69,7 +69,7 @@ const TimeRulerTickLabel = styled.text` const TimeRulerGridLine = styled.line` stroke: ${(props) => - props.theme.colorMode === 'DARK' + props.theme.colorMode === COLOR_MODES_STANDARD.dark ? props.theme.euiTheme.colors.darkestShade : props.theme.euiTheme.colors.darkShade}; stroke-opacity: 0.5; diff --git a/x-pack/plugins/observability_solution/observability_shared/public/hooks/use_chart_theme.tsx b/x-pack/plugins/observability_solution/observability_shared/public/hooks/use_chart_theme.tsx index a2f7b9813dd1..3c06cfa9c712 100644 --- a/x-pack/plugins/observability_solution/observability_shared/public/hooks/use_chart_theme.tsx +++ b/x-pack/plugins/observability_solution/observability_shared/public/hooks/use_chart_theme.tsx @@ -6,12 +6,12 @@ */ import { LIGHT_THEME, DARK_THEME, PartialTheme } from '@elastic/charts'; -import { useEuiTheme } from '@elastic/eui'; +import { useEuiTheme, COLOR_MODES_STANDARD } from '@elastic/eui'; import { useMemo } from 'react'; export function useChartThemes() { const theme = useEuiTheme(); - const baseTheme = theme.colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME; + const baseTheme = theme.colorMode === COLOR_MODES_STANDARD.dark ? DARK_THEME : LIGHT_THEME; return useMemo(() => { const themeOverrides: PartialTheme = {