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

Fix for: https://github.com/elastic/kibana/issues/213974
Replacing legacy base theme with appropriate theme from the charts hook.


| Before  | After |
| ------------- | ------------- |
| <img width="404" alt="decision_path_before_light"
src="https://github.com/user-attachments/assets/217cb07d-65a2-4ac0-948b-9950af1e2663"
/> |
![decision_path_after_light](https://github.com/user-attachments/assets/6c75ab42-2985-41c4-b095-9a469b765598)
|
|
![decision_path_before_dark](https://github.com/user-attachments/assets/a917b699-dae2-4146-b708-b0acd76daca8)
| <img width="403" alt="decision_path_after_dark"
src="https://github.com/user-attachments/assets/5fc47999-e8c6-48f1-9293-03f23ce437e0"
/> |
| <img width="769" alt="feature_importance_before_light"
src="https://github.com/user-attachments/assets/6d25f980-0dd2-4a6a-a43f-450afa76fa62"
/> |
![feature_importance_after_light](https://github.com/user-attachments/assets/eee1b0ee-1872-426b-a825-d9bcbcef2231)
|
| <img width="767" alt="feature_importance_before_dark"
src="https://github.com/user-attachments/assets/db7eb5d7-80b3-49fa-99a5-1ae204fdbcc6"
/> |
![feature_importance_after_dark](https://github.com/user-attachments/assets/d48efb1e-4e3d-45e8-be2c-4c071a3ca144)
|
| <img width="536" alt="datafeed_chart_before_light"
src="https://github.com/user-attachments/assets/a5230c96-50f4-4754-a09f-8fe429da5f8d"
/> | <img width="728" alt="image"
src="https://github.com/user-attachments/assets/12d37527-cdec-410c-a8db-3c1176a6e1c9"
/> |
| <img width="497" alt="datafeed_chart_before_dark"
src="https://github.com/user-attachments/assets/3db9a313-baed-4abd-9cec-33abffcfd9d9"
/> | <img width="732" alt="datafeed_chart_after_dark"
src="https://github.com/user-attachments/assets/b8bf681a-f873-43a7-ad2d-2775ae91d4e3"
/> |
| <img width="813" alt="anomaly_chart_before_light"
src="https://github.com/user-attachments/assets/cf7cab54-513f-40dc-bb28-dbb7d93850b5"
/> | <img width="805" alt="anomaly_chart_after_light"
src="https://github.com/user-attachments/assets/25b95962-00ec-4066-895a-71ee771609c9"
/> |
| <img width="795" alt="anomaly_chart_before_dark"
src="https://github.com/user-attachments/assets/a87e2f8e-b871-409a-9485-9b05a5195025"
/> | <img width="802" alt="anomaly_chart_after_dark"
src="https://github.com/user-attachments/assets/ac27f414-c5fa-409b-b289-4f629de4e729"
/> |
| <img width="799" alt="event_rate_chart_before_light"
src="https://github.com/user-attachments/assets/346fdfaf-4c71-4e1d-ad72-ac3ef8abde32"
/> | <img width="801" alt="event_rate_chart_after_light"
src="https://github.com/user-attachments/assets/23a14bee-bd89-4dea-ad67-c29116e7e275"
/> |
| <img width="797" alt="event_rate_chart_before_dark"
src="https://github.com/user-attachments/assets/7c255206-299c-4dfd-9134-06517f82ba23"
/> | <img width="810" alt="event_rate_chart_after_dark"
src="https://github.com/user-attachments/assets/6f2c912e-cdeb-4be4-84a1-1520eec65d01"
/> |

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,6 +44,16 @@ 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 (
@@ -50,12 +61,7 @@ export const AnomalyChart: FC<Props> = ({
       <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,
     };