[Observability plugin] Audit new EUI Borealis theme

x-pack/plugins/observability_solution/apm/common/service_health_status.ts

@@ -5,8 +5,9 @@
  * 2.0.
  */
 
+import { EuiThemeComputed } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { EuiTheme } from '@kbn/kibana-react-plugin/common';
+
 import { ML_ANOMALY_SEVERITY } from '@kbn/ml-anomaly-utils/anomaly_severity';
 
 export enum ServiceHealthStatus {
@@ -34,29 +35,32 @@ export function getServiceHealthStatus({ severity }: { severity: ML_ANOMALY_SEVE
   }
 }
 
-export function getServiceHealthStatusColor(theme: EuiTheme, status: ServiceHealthStatus) {
+export function getServiceHealthStatusColor(theme: EuiThemeComputed, status: ServiceHealthStatus) {
   switch (status) {
     case ServiceHealthStatus.healthy:
-      return theme.eui.euiColorVis0;
+      return theme.colors.vis.euiColorVisSuccess0;
     case ServiceHealthStatus.warning:
-      return theme.eui.euiColorVis5;
+      return theme.colors.vis.euiColorVisWarning0;
     case ServiceHealthStatus.critical:
-      return theme.eui.euiColorVis9;
+      return theme.colors.vis.euiColorVisDanger0;
     case ServiceHealthStatus.unknown:
-      return theme.eui.euiColorMediumShade;
+      return theme.colors.mediumShade;
   }
 }
 
-export function getServiceHealthStatusBadgeColor(theme: EuiTheme, status: ServiceHealthStatus) {
+export function getServiceHealthStatusBadgeColor(
+  theme: EuiThemeComputed,
+  status: ServiceHealthStatus
+) {
   switch (status) {
     case ServiceHealthStatus.healthy:
-      return theme.eui.euiColorVis0_behindText;
+      return theme.colors.vis.euiColorVisSuccess0;
     case ServiceHealthStatus.warning:
-      return theme.eui.euiColorVis5_behindText;
+      return theme.colors.vis.euiColorVisWarning0;
     case ServiceHealthStatus.critical:
-      return theme.eui.euiColorVis9_behindText;
+      return theme.colors.vis.euiColorVisDanger0;
     case ServiceHealthStatus.unknown:
-      return theme.eui.euiColorMediumShade;
+      return theme.colors.mediumShade;
   }
 }
 

x-pack/plugins/observability_solution/apm/common/viz_colors.ts

@@ -8,6 +8,8 @@
 import { euiLightVars as lightTheme } from '@kbn/ui-theme';
 
 function getVizColorsForTheme(theme = lightTheme) {
+  // Regarding https://github.com/elastic/kibana/issues/203338
+  // Guidance right now is to keep these as they are for now (meaning to keep using the JSON
   return [
     theme.euiColorVis0,
     theme.euiColorVis1,

x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx

@@ -52,15 +52,15 @@ export function ChartPreview({
   timeUnit = 'm',
   totalGroups,
 }: ChartPreviewProps) {
-  const theme = useTheme();
+  const { euiTheme } = useTheme();
   const thresholdOpacity = 0.3;
   const DEFAULT_DATE_FORMAT = 'Y-MM-DD HH:mm:ss';
 
   const style = {
-    fill: theme.eui.euiColorVis2,
+    fill: euiTheme.colors.vis.euiColorVis2,
     line: {
       strokeWidth: 2,
-      stroke: theme.eui.euiColorVis2,
+      stroke: euiTheme.colors.vis.euiColorVis2,
       opacity: 1,
     },
     opacity: thresholdOpacity,

x-pack/plugins/observability_solution/apm/public/components/app/correlations/context_popover/field_stats_popover.tsx

@@ -205,7 +205,7 @@ export function FieldStatsPopover({
   const field = dataView?.getFieldByName(fieldName);
 
   const closePopover = useCallback(() => setInfoOpen(false), []);
-  const theme = useTheme();
+  const { euiTheme } = useTheme();
 
   const params = useFetchParams();
 
@@ -280,7 +280,7 @@ export function FieldStatsPopover({
           }
         )}
         data-test-subj={'apmCorrelationsContextPopoverButton'}
-        style={{ marginLeft: theme.eui.euiSizeXS }}
+        style={{ marginLeft: euiTheme.size.xs }}
       />
     </EuiToolTip>
   );

x-pack/plugins/observability_solution/apm/public/components/app/correlations/correlations_table.tsx

@@ -43,7 +43,7 @@ export function CorrelationsTable<T extends FieldValuePair>({
   sorting,
   rowHeader,
 }: CorrelationsTableProps<T>) {
-  const euiTheme = useTheme();
+  const { euiTheme } = useTheme();
   const trackApmEvent = useUiTracker({ app: 'apm' });
   const trackSelectSignificantCorrelationTerm = useCallback(
     () => debounce(() => trackApmEvent({ metric: 'select_significant_term' }), 1000),
@@ -105,7 +105,7 @@ export function CorrelationsTable<T extends FieldValuePair>({
             selectedTerm.fieldValue === term.fieldValue &&
             selectedTerm.fieldName === term.fieldName
               ? {
-                  backgroundColor: euiTheme.eui.euiColorLightestShade,
+                  backgroundColor: euiTheme.colors.lightestShade,
                 }
               : null,
         };

x-pack/plugins/observability_solution/apm/public/components/app/correlations/failed_transactions_correlations.tsx

@@ -54,7 +54,7 @@ import { MIN_TAB_TITLE_HEIGHT } from '../../shared/charts/duration_distribution_
 import { TotalDocCountLabel } from '../../shared/charts/duration_distribution_chart/total_doc_count_label';
 
 export function FailedTransactionsCorrelations({ onFilter }: { onFilter: () => void }) {
-  const euiTheme = useTheme();
+  const { euiTheme } = useTheme();
 
   const {
     core: { notifications },
@@ -456,7 +456,7 @@ export function FailedTransactionsCorrelations({ onFilter }: { onFilter: () => v
           style={{
             display: 'flex',
             flexDirection: 'row',
-            paddingLeft: euiTheme.eui.euiSizeS,
+            paddingLeft: euiTheme.size.s,
           }}
         >
           <EuiSwitch
@@ -473,7 +473,7 @@ export function FailedTransactionsCorrelations({ onFilter }: { onFilter: () => v
           <EuiIconTip
             size="m"
             iconProps={{
-              style: { marginLeft: euiTheme.eui.euiSizeXS },
+              style: { marginLeft: euiTheme.size.xs },
             }}
             content={i18n.translate(
               'xpack.apm.correlations.latencyCorrelations.advancedStatisticsTooltipContent',

x-pack/plugins/observability_solution/apm/public/components/app/correlations/get_transaction_distribution_chart_data.ts

@@ -6,7 +6,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { EuiTheme } from '@kbn/kibana-react-plugin/common';
+import { EuiThemeComputed } from '@elastic/eui';
 import type { HistogramItem } from '../../../../common/correlations/types';
 import { DurationDistributionChartData } from '../../shared/charts/duration_distribution_chart';
 import { LatencyCorrelation } from '../../../../common/correlations/latency_correlations/types';
@@ -18,7 +18,7 @@ export function getTransactionDistributionChartData({
   failedTransactionsHistogram,
   selectedTerm,
 }: {
-  euiTheme: EuiTheme;
+  euiTheme: EuiThemeComputed;
   allTransactionsHistogram?: HistogramItem[];
   failedTransactionsHistogram?: HistogramItem[];
   selectedTerm?: LatencyCorrelation | FailedTransactionsCorrelation | undefined;
@@ -31,7 +31,7 @@ export function getTransactionDistributionChartData({
         defaultMessage: 'All transactions',
       }),
       histogram: allTransactionsHistogram,
-      areaSeriesColor: euiTheme.eui.euiColorVis1,
+      areaSeriesColor: euiTheme.colors.vis.euiColorVis0,
     });
   }
 
@@ -41,15 +41,15 @@ export function getTransactionDistributionChartData({
         defaultMessage: 'Failed transactions',
       }),
       histogram: failedTransactionsHistogram,
-      areaSeriesColor: euiTheme.eui.euiColorVis7,
+      areaSeriesColor: euiTheme.colors.vis.euiColorVis7,
     });
   }
 
   if (selectedTerm && Array.isArray(selectedTerm.histogram)) {
     transactionDistributionChartData.push({
       id: `${selectedTerm.fieldName}:${selectedTerm.fieldValue}`,
       histogram: selectedTerm.histogram,
-      areaSeriesColor: euiTheme.eui.euiColorVis2,
+      areaSeriesColor: euiTheme.colors.vis.euiColorVis2,
     });
   }
 

x-pack/plugins/observability_solution/apm/public/components/app/correlations/latency_correlations.tsx

@@ -68,7 +68,7 @@ export function LatencyCorrelations({ onFilter }: { onFilter: () => void }) {
     core: { notifications },
   } = useApmPluginContext();
 
-  const euiTheme = useTheme();
+  const { euiTheme } = useTheme();
 
   const { progress, response, startFetch, cancelFetch } = useLatencyCorrelations();
   const { overallHistogram, hasData, status } = getOverallHistogram(response, progress.isRunning);

x-pack/plugins/observability_solution/apm/public/components/app/dependency_operation_detail_view/dependency_operation_distribution_chart.tsx

@@ -22,7 +22,7 @@ export function DependencyOperationDistributionChart() {
   // there is no "current" event in the dependency operation detail view
   const markerCurrentEvent = undefined;
 
-  const euiTheme = useTheme();
+  const { euiTheme } = useTheme();
 
   const {
     query: {
@@ -67,14 +67,14 @@ export function DependencyOperationDistributionChart() {
 
   const chartData: DurationDistributionChartData[] = [
     {
-      areaSeriesColor: euiTheme.eui.euiColorVis1,
+      areaSeriesColor: euiTheme.colors.vis.euiColorVis1,
       histogram: data?.allSpansDistribution.overallHistogram ?? [],
       id: i18n.translate('xpack.apm.dependencyOperationDistributionChart.allSpansLegendLabel', {
         defaultMessage: 'All spans',
       }),
     },
     {
-      areaSeriesColor: euiTheme.eui.euiColorVis7,
+      areaSeriesColor: euiTheme.colors.vis.euiColorVis7,
       histogram: data?.failedSpansDistribution?.overallHistogram ?? [],
       id: i18n.translate('xpack.apm.dependencyOperationDistributionChart.failedSpansLegendLabel', {
         defaultMessage: 'Failed spans',

x-pack/plugins/observability_solution/apm/public/components/app/entities/entity_link/index.tsx

@@ -5,7 +5,14 @@
  * 2.0.
  */
 
-import { EuiButtonEmpty, EuiEmptyPrompt, EuiImage, EuiLink, EuiLoadingSpinner } from '@elastic/eui';
+import {
+  COLOR_MODES_STANDARD,
+  EuiButtonEmpty,
+  EuiEmptyPrompt,
+  EuiImage,
+  EuiLink,
+  EuiLoadingSpinner,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
@@ -65,7 +72,7 @@ export function EntityLink() {
           icon={
             <EuiImage
               size="fullWidth"
-              src={theme.darkMode ? dashboardsDark : dashboardsLight}
+              src={theme.colorMode === COLOR_MODES_STANDARD.dark ? dashboardsDark : dashboardsLight}
               alt=""
             />
           }

x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/distribution/index.tsx

@@ -18,7 +18,7 @@ import {
   DARK_THEME,
   LegendValue,
 } from '@elastic/charts';
-import { EuiTitle } from '@elastic/eui';
+import { COLOR_MODES_STANDARD, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
@@ -97,7 +97,7 @@ export function ErrorDistribution({ distribution, title, fetchStatus }: Props) {
             showLegend
             legendValues={[LegendValue.CurrentAndLastValue]}
             legendPosition={Position.Bottom}
-            theme={theme.darkMode ? DARK_THEME : LIGHT_THEME}
+            theme={theme.colorMode === COLOR_MODES_STANDARD.dark ? DARK_THEME : LIGHT_THEME}
             locale={i18n.getLocale()}
           />
           <Axis

x-pack/plugins/observability_solution/apm/public/components/app/infra_overview/infra_tabs/empty_prompt.tsx

@@ -6,6 +6,7 @@
  */
 
 import {
+  COLOR_MODES_STANDARD,
   EuiDescriptionList,
   EuiDescriptionListDescription,
   EuiDescriptionListTitle,
@@ -54,7 +55,10 @@ export function EmptyPrompt() {
 function NoResultsIllustration() {
   const theme = useTheme();
 
-  const illustration = theme.darkMode ? noResultsIllustrationDark : noResultsIllustrationLight;
+  const illustration =
+    theme.colorMode === COLOR_MODES_STANDARD.dark
+      ? noResultsIllustrationDark
+      : noResultsIllustrationLight;
 
   return (
     <EuiImage alt={noResultsIllustrationAlternativeText} size="fullWidth" src={illustration} />

x-pack/plugins/observability_solution/apm/public/components/app/service_dashboards/empty_dashboards.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 import React from 'react';
-import { EuiEmptyPrompt, EuiImage } from '@elastic/eui';
+import { COLOR_MODES_STANDARD, EuiEmptyPrompt, EuiImage } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { dashboardsDark, dashboardsLight } from '@kbn/shared-svg';
 import { useTheme } from '../../../hooks/use_theme';
@@ -25,7 +25,7 @@ export function EmptyDashboards({ actions }: Props) {
         icon={
           <EuiImage
             size="fullWidth"
-            src={theme.darkMode ? dashboardsDark : dashboardsLight}
+            src={theme.colorMode === COLOR_MODES_STANDARD.dark ? dashboardsDark : dashboardsLight}
             alt=""
           />
         }

x-pack/plugins/observability_solution/apm/public/components/app/service_inventory/service_list/health_badge.tsx

@@ -15,10 +15,10 @@ import {
 import { useTheme } from '../../../../hooks/use_theme';
 
 export function HealthBadge({ healthStatus }: { healthStatus: ServiceHealthStatus }) {
-  const theme = useTheme();
+  const { euiTheme } = useTheme();
 
   return (
-    <EuiBadge color={getServiceHealthStatusBadgeColor(theme, healthStatus)}>
+    <EuiBadge color={getServiceHealthStatusBadgeColor(euiTheme, healthStatus)}>
       {getServiceHealthStatusLabel(healthStatus)}
     </EuiBadge>
   );

x-pack/plugins/observability_solution/apm/public/components/app/service_map/controls.tsx

@@ -110,7 +110,7 @@ export function Controls() {
   );
 
   const [zoom, setZoom] = useState((cy && cy.zoom()) || 1);
-  const duration = parseInt(theme.eui.euiAnimSpeedFast, 10);
+  const duration = parseInt(theme.euiTheme.animation.fast || '0', 10);
   const downloadUrl = useDebugDownloadUrl(cy);
   const viewFullMapUrl = getLegacyApmHref({
     basePath,