[9.0] [ML] Replace Legacy Base Theme Usage (#216307)

x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/feature_importance/decision_path_chart.tsx

@@ -21,7 +21,6 @@ import {
   Position,
   ScaleType,
   Settings,
-  LEGACY_LIGHT_THEME,
 } from '@elastic/charts';
 import { useEuiTheme, EuiIcon } from '@elastic/eui';
 
@@ -31,6 +30,7 @@ import {
   type FeatureImportanceBaseline,
   isRegressionFeatureImportanceBaseline,
 } from '@kbn/ml-data-frame-analytics-utils';
+import { useMlKibana } from '../../../../../contexts/kibana';
 import type { DecisionPathPlotData } from './use_classification_path_data';
 import { formatSingleValue } from '../../../../../formatters/format_value';
 
@@ -53,8 +53,18 @@ export const DecisionPathChart = ({
   maxDomain,
   baseline,
 }: DecisionPathChartProps) => {
+  const {
+    services: {
+      charts: {
+        theme: { useChartsBaseTheme },
+      },
+    },
+  } = useMlKibana();
+
   const { euiTheme } = useEuiTheme();
 
+  const baseTheme = useChartsBaseTheme();
+
   const { baselineStyle, theme } = useMemo<{
     baselineStyle: LineAnnotationStyle;
     theme: PartialTheme;
@@ -92,7 +102,21 @@ export const DecisionPathChart = ({
           opacity: 0.75,
         },
       },
-      theme: { axes },
+      theme: {
+        axes,
+        lineSeriesStyle: {
+          line: {
+            visible: true,
+            strokeWidth: 1,
+          },
+          point: {
+            visible: 'always',
+          },
+        },
+        chartMargins: {
+          top: 10,
+        },
+      },
     };
   }, [euiTheme]);
 
@@ -137,13 +161,7 @@ export const DecisionPathChart = ({
       <Chart
         size={{ height: DECISION_PATH_MARGIN + decisionPathData.length * DECISION_PATH_ROW_HEIGHT }}
       >
-        <Settings
-          theme={theme}
-          // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md
-          baseTheme={LEGACY_LIGHT_THEME}
-          rotation={90}
-          locale={i18n.getLocale()}
-        />
+        <Settings theme={theme} baseTheme={baseTheme} rotation={90} locale={i18n.getLocale()} />
         {regressionBaselineData && (
           <LineAnnotation
             id="xpack.ml.dataframe.analytics.explorationResults.decisionPathBaseline"

x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/total_feature_importance_summary/feature_importance_summary.tsx

@@ -10,15 +10,7 @@ import React, { useCallback, useMemo } from 'react';
 
 import { useEuiTheme, EuiButtonEmpty, EuiSpacer, EuiText, EuiCallOut } from '@elastic/eui';
 import type { RecursivePartial, AxisStyle, PartialTheme, BarSeriesProps } from '@elastic/charts';
-import {
-  Chart,
-  Settings,
-  Axis,
-  ScaleType,
-  Position,
-  BarSeries,
-  LEGACY_LIGHT_THEME,
-} from '@elastic/charts';
+import { Chart, Settings, Axis, ScaleType, Position, BarSeries } from '@elastic/charts';
 
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
@@ -73,9 +65,16 @@ export const FeatureImportanceSummaryPanel: FC<FeatureImportanceSummaryPanelProp
 }) => {
   const { euiTheme } = useEuiTheme();
   const {
-    services: { docLinks },
+    services: {
+      docLinks,
+      charts: {
+        theme: { useChartsBaseTheme },
+      },
+    },
   } = useMlKibana();
 
+  const baseTheme = useChartsBaseTheme();
+
   const theme: PartialTheme = useMemo(() => {
     const euiColorMediumShade = euiTheme.colors.mediumShade;
     const axisColor = euiColorMediumShade;
@@ -299,8 +298,7 @@ export const FeatureImportanceSummaryPanel: FC<FeatureImportanceSummaryPanelProp
                 <Settings
                   rotation={90}
                   theme={theme}
-                  // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md
-                  baseTheme={LEGACY_LIGHT_THEME}
+                  baseTheme={baseTheme}
                   showLegend={showLegend}
                   locale={i18n.getLocale()}
                 />

x-pack/platform/plugins/shared/ml/public/application/jobs/jobs_list/components/datafeed_chart_flyout/datafeed_chart_flyout.tsx

@@ -41,7 +41,6 @@ import {
   Axis,
   Chart,
   CurveType,
-  LEGACY_LIGHT_THEME,
   LineAnnotation,
   LineSeries,
   Position,
@@ -62,7 +61,7 @@ import type {
 import type { JobMessage } from '../../../../../../common/types/audit_message';
 import type { LineAnnotationDatumWithModelSnapshot } from '../../../../../../common/types/results';
 import { useToastNotificationService } from '../../../../services/toast_notification_service';
-import { useMlApi } from '../../../../contexts/kibana';
+import { useMlApi, useMlKibana } from '../../../../contexts/kibana';
 import { RevertModelSnapshotFlyout } from '../../../../components/model_snapshots/revert_model_snapshot_flyout';
 import { JobMessagesPane } from '../job_details/job_messages_pane';
 import { EditQueryDelay } from './edit_query_delay';
@@ -143,6 +142,16 @@ export const DatafeedChartFlyout: FC<DatafeedChartFlyoutProps> = ({
   const canCreateJob = useMemo(() => checkPermission('canCreateJob'), []);
   const canStartStopDatafeed = useMemo(() => checkPermission('canStartStopDatafeed'), []);
 
+  const {
+    services: {
+      charts: {
+        theme: { useChartsBaseTheme },
+      },
+    },
+  } = useMlKibana();
+
+  const baseTheme = useChartsBaseTheme();
+
   const {
     getModelSnapshots,
     results: { getDatafeedResultChartData },
@@ -442,9 +451,11 @@ export const DatafeedChartFlyout: FC<DatafeedChartFlyoutProps> = ({
                                 visible: 'never',
                               },
                             },
+                            chartMargins: {
+                              top: 10,
+                            },
                           }}
-                          // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md
-                          baseTheme={LEGACY_LIGHT_THEME}
+                          baseTheme={baseTheme}
                           locale={i18n.getLocale()}
                         />
                         <Axis

x-pack/platform/plugins/shared/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/anomaly_chart.tsx

@@ -7,8 +7,9 @@
 
 import type { FC } from 'react';
 import React from 'react';
-import { Chart, Settings, TooltipType, Tooltip, LEGACY_LIGHT_THEME } from '@elastic/charts';
+import { Chart, Settings, TooltipType, Tooltip } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
+import { useMlKibana } from '../../../../../../contexts/kibana';
 import type { ModelItem, Anomaly } from '../../../../common/results_loader';
 import { Anomalies } from '../common/anomalies';
 import { ModelBounds } from './model_bounds';
@@ -43,19 +44,24 @@ export const AnomalyChart: FC<Props> = ({
   width,
   loading = false,
 }) => {
+  const {
+    services: {
+      charts: {
+        theme: { useChartsBaseTheme },
+      },
+    },
+  } = useMlKibana();
+
+  const baseTheme = useChartsBaseTheme();
+
   const data = chartType === CHART_TYPE.SCATTER ? flattenData(chartData) : chartData;
   const xDomain = getXRange(data);
   return (
     <div style={{ width, height }} data-test-subj={`mlAnomalyChart ${CHART_TYPE[chartType]}`}>
       <LoadingWrapper height={height} hasData={data.length > 0} loading={loading}>
         <Chart>
           <Tooltip type={TooltipType.None} />
-          <Settings
-            // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md
-            baseTheme={LEGACY_LIGHT_THEME}
-            xDomain={xDomain}
-            locale={i18n.getLocale()}
-          />
+          <Settings baseTheme={baseTheme} xDomain={xDomain} locale={i18n.getLocale()} />
           <Axes chartData={data} />
           <Anomalies anomalyData={anomalyData} />
           <ModelBounds modelData={modelData} />

x-pack/platform/plugins/shared/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx

@@ -15,10 +15,10 @@ import {
   Settings,
   TooltipType,
   Tooltip,
-  LEGACY_LIGHT_THEME,
 } from '@elastic/charts';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
+import { useMlKibana } from '../../../../../../contexts/kibana';
 import { Axes } from '../common/axes';
 import type { LineChartPoint } from '../../../../common/chart_loader';
 import type { Anomaly } from '../../../../common/results_loader';
@@ -55,6 +55,16 @@ export const EventRateChart: FC<Props> = ({
   overlayRanges,
   onBrushEnd,
 }) => {
+  const {
+    services: {
+      charts: {
+        theme: { useChartsBaseTheme },
+      },
+    },
+  } = useMlKibana();
+
+  const baseTheme = useChartsBaseTheme();
+
   const { EVENT_RATE_COLOR_WITH_ANOMALIES, EVENT_RATE_COLOR } = useChartColors();
   const barColor = fadeChart ? EVENT_RATE_COLOR_WITH_ANOMALIES : EVENT_RATE_COLOR;
 
@@ -79,8 +89,7 @@ export const EventRateChart: FC<Props> = ({
           <Settings
             onBrushEnd={onBrushEnd}
             theme={theme}
-            // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md
-            baseTheme={LEGACY_LIGHT_THEME}
+            baseTheme={baseTheme}
             locale={i18n.getLocale()}
           />
 

x-pack/platform/plugins/shared/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/split_cards/split_cards.tsx

@@ -15,6 +15,7 @@ import {
   EuiHorizontalRule,
   EuiSpacer,
   useEuiTheme,
+  COLOR_MODES_STANDARD,
 } from '@elastic/eui';
 import type { SplitField } from '@kbn/ml-anomaly-utils';
 import { JOB_TYPE } from '../../../../../../../../../common/constants/new_job';
@@ -34,11 +35,13 @@ interface Panel {
 
 export const SplitCards: FC<PropsWithChildren<Props>> = memo(
   ({ fieldValues, splitField, children, numberOfDetectors, jobType, animate = false }) => {
-    const { euiTheme } = useEuiTheme();
+    const { euiTheme, colorMode } = useEuiTheme();
     const panels: Panel[] = [];
 
+    const isLightTheme = colorMode === COLOR_MODES_STANDARD.light;
+
     const splitCardStyle = {
-      border: euiTheme.border.thin,
+      ...(isLightTheme ? { border: euiTheme.border.thin } : {}),
       paddingTop: euiTheme.size.xs,
     };