[ML] EUI Visual Refresh (tokens)

x-pack/platform/packages/private/ml/aiops_components/src/document_count_chart/document_count_chart.tsx

@@ -28,6 +28,7 @@ import {
   getSnappedTimestamps,
   getSnappedWindowParameters,
   getWindowParametersForTrigger,
+  useLogRateAnalysisBarColors,
   type DocumentCountStatsChangePoint,
   type LogRateHistogramItem,
   type WindowParameters,
@@ -198,6 +199,7 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = (props) => {
   const { data, uiSettings, fieldFormats, charts } = dependencies;
 
   const chartBaseTheme = charts.theme.useChartsBaseTheme();
+  const barColors = useLogRateAnalysisBarColors();
 
   const xAxisFormatter = fieldFormats.deserialize({ id: 'date' });
   const useLegacyTimeAxis = uiSettings.get('visualization:useLegacyTimeAxis', false);
@@ -422,8 +424,10 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = (props) => {
   const baselineBadgeMarginLeft =
     (mlBrushMarginLeft ?? 0) + (windowParametersAsPixels?.baselineMin ?? 0);
 
-  const barColor = barColorOverride ? [barColorOverride] : undefined;
-  const barHighlightColor = barHighlightColorOverride ? [barHighlightColorOverride] : ['orange'];
+  const barColor = barColorOverride ? [barColorOverride] : barColors.barColor;
+  const barHighlightColor = barHighlightColorOverride
+    ? [barHighlightColorOverride]
+    : [barColors.barHighlightColor];
 
   return (
     <>

x-pack/platform/packages/private/ml/data_grid/hooks/use_column_chart.test.tsx

@@ -10,6 +10,8 @@ import { render, renderHook } from '@testing-library/react';
 
 import { KBN_FIELD_TYPES } from '@kbn/field-types';
 
+import type { EuiThemeComputed } from '@elastic/eui';
+
 import type {
   NumericChartData,
   OrdinalChartData,
@@ -23,6 +25,10 @@ import {
 
 import { getFieldType, getLegendText, getXScaleType, useColumnChart } from './use_column_chart';
 
+const euiThemeMock = {
+  size: { base: '16px' },
+} as EuiThemeComputed;
+
 describe('getFieldType()', () => {
   it('should return the Kibana field type for a given EUI data grid schema', () => {
     expect(getFieldType('text')).toBe('string');
@@ -103,63 +109,81 @@ describe('isUnsupportedChartData()', () => {
 
 describe('getLegendText()', () => {
   it('should return the chart legend text for unsupported chart types', () => {
-    expect(getLegendText(validUnsupportedChartData)).toBe('Chart not supported.');
+    expect(getLegendText(validUnsupportedChartData, euiThemeMock)).toBe('Chart not supported.');
   });
   it('should return the chart legend text for empty datasets', () => {
-    expect(getLegendText(validNumericChartData)).toBe('0 documents contain field.');
+    expect(getLegendText(validNumericChartData, euiThemeMock)).toBe('0 documents contain field.');
   });
   it('should return the chart legend text for boolean chart types', () => {
     const { getByText } = render(
       <>
-        {getLegendText({
+        {getLegendText(
+          {
             cardinality: 2,
             data: [
               { key: 'true', key_as_string: 'true', doc_count: 10 },
               { key: 'false', key_as_string: 'false', doc_count: 20 },
             ],
             id: 'the-id',
             type: 'boolean',
-        })}
+          },
+          euiThemeMock
+        )}
       </>
     );
     expect(getByText('true')).toBeInTheDocument();
     expect(getByText('false')).toBeInTheDocument();
   });
   it('should return the chart legend text for ordinal chart data with less than max categories', () => {
-    expect(getLegendText({ ...validOrdinalChartData, data: [{ key: 'cat', doc_count: 10 }] })).toBe(
-      '10 categories'
-    );
+    expect(
+      getLegendText(
+        { ...validOrdinalChartData, data: [{ key: 'cat', doc_count: 10 }] },
+        euiThemeMock
+      )
+    ).toBe('10 categories');
   });
   it('should return the chart legend text for ordinal chart data with more than max categories', () => {
     expect(
-      getLegendText({
+      getLegendText(
+        {
           ...validOrdinalChartData,
           cardinality: 30,
           data: [{ key: 'cat', doc_count: 10 }],
-      })
+        },
+        euiThemeMock
+      )
     ).toBe('top 20 of 30 categories');
   });
   it('should return the chart legend text for numeric datasets', () => {
     expect(
-      getLegendText({
+      getLegendText(
+        {
           ...validNumericChartData,
           data: [{ key: 1, doc_count: 10 }],
           stats: [1, 100],
-      })
+        },
+        euiThemeMock
+      )
     ).toBe('1 - 100');
     expect(
-      getLegendText({
+      getLegendText(
+        {
           ...validNumericChartData,
           data: [{ key: 1, doc_count: 10 }],
           stats: [100, 100],
-      })
+        },
+        euiThemeMock
+      )
     ).toBe('100');
     expect(
-      getLegendText({
+      getLegendText(
+        {
           ...validNumericChartData,
           data: [{ key: 1, doc_count: 10 }],
           stats: [1.2345, 6.3456],
-      })
+        },
+        euiThemeMock
+      )
     ).toBe('1.23 - 6.35');
   });
 });

x-pack/platform/packages/private/ml/data_grid/hooks/use_column_chart.tsx

@@ -12,9 +12,13 @@ import { css } from '@emotion/react';
 
 import useObservable from 'react-use/lib/useObservable';
 
-import { euiPaletteColorBlind, type EuiDataGridColumn } from '@elastic/eui';
+import {
+  useEuiTheme,
+  euiPaletteColorBlind,
+  type EuiDataGridColumn,
+  type EuiThemeComputed,
+} from '@elastic/eui';
 
-import { euiThemeVars } from '@kbn/ui-theme';
 import { i18n } from '@kbn/i18n';
 import { KBN_FIELD_TYPES } from '@kbn/field-types';
 
@@ -29,14 +33,6 @@ import { isNumericChartData, isOrdinalChartData } from '../lib/field_histograms'
 import { NON_AGGREGATABLE } from '../lib/common';
 import type { DataGridItem } from '../lib/types';
 
-const cssHistogramLegendBoolean = css({
-  width: '100%',
-  // This was originally $euiButtonMinWidth, but that
-  // is no longer exported from the EUI package,
-  // so we're replicating it here inline.
-  minWidth: `calc(${euiThemeVars.euiSize} * 7)`,
-});
-
 const cssTextAlignCenter = css({
   textAlign: 'center',
 });
@@ -97,6 +93,7 @@ export const getFieldType = (schema: EuiDataGridColumn['schema']): KBN_FIELD_TYP
 type LegendText = string | JSX.Element;
 export const getLegendText = (
   chartData: ChartData,
+  euiTheme: EuiThemeComputed,
   maxChartColumns = MAX_CHART_COLUMNS
 ): LegendText => {
   if (chartData.type === 'unsupported') {
@@ -112,6 +109,14 @@ export const getLegendText = (
   }
 
   if (chartData.type === 'boolean') {
+    const cssHistogramLegendBoolean = css({
+      width: '100%',
+      // This was originally $euiButtonMinWidth, but that
+      // is no longer exported from the EUI package,
+      // so we're replicating it here inline.
+      minWidth: `calc(${euiTheme.size.base} * 7)`,
+    });
+
     return (
       <table css={cssHistogramLegendBoolean}>
         <tbody>
@@ -171,6 +176,8 @@ export const useColumnChart = (
   columnType: EuiDataGridColumn,
   maxChartColumns?: number
 ): ColumnChart => {
+  const { euiTheme } = useEuiTheme();
+
   const fieldType = getFieldType(columnType.schema);
 
   const hoveredRow = useObservable(hoveredRow$);
@@ -231,7 +238,7 @@ export const useColumnChart = (
 
   return {
     data,
-    legendText: getLegendText(chartData, maxChartColumns),
+    legendText: getLegendText(chartData, euiTheme, maxChartColumns),
     xScaleType,
   };
 };

x-pack/platform/packages/private/ml/data_grid/tsconfig.json

@@ -28,7 +28,6 @@
     "@kbn/ml-agg-utils",
     "@kbn/ml-error-utils",
     "@kbn/ml-data-frame-analytics-utils",
-    "@kbn/ui-theme",
     "@kbn/i18n-react",
     "@kbn/ml-is-populated-object",
     "@kbn/ml-date-picker",

x-pack/platform/packages/private/ml/field_stats_flyout/field_stats_flyout_provider.tsx

@@ -7,7 +7,6 @@
 
 import type { PropsWithChildren, FC } from 'react';
 import React, { useCallback, useState } from 'react';
-import type { ThemeServiceStart } from '@kbn/core-theme-browser';
 import type { DataView } from '@kbn/data-plugin/common';
 import type { FieldStatsServices } from '@kbn/unified-field-list/src/components/field_stats';
 import type { TimeRange as TimeRangeMs } from '@kbn/ml-date-picker';
@@ -36,7 +35,6 @@ import { PopulatedFieldsCacheManager } from './populated_fields/populated_fields
 export type FieldStatsFlyoutProviderProps = PropsWithChildren<{
   dataView: DataView;
   fieldStatsServices: FieldStatsServices;
-  theme: ThemeServiceStart;
   timeRangeMs?: TimeRangeMs;
   dslQuery?: FieldStatsProps['dslQuery'];
   disablePopulatedFields?: boolean;
@@ -65,7 +63,6 @@ export const FieldStatsFlyoutProvider: FC<FieldStatsFlyoutProviderProps> = (prop
   const {
     dataView,
     fieldStatsServices,
-    theme,
     timeRangeMs,
     dslQuery,
     disablePopulatedFields = false,
@@ -174,7 +171,6 @@ export const FieldStatsFlyoutProvider: FC<FieldStatsFlyoutProviderProps> = (prop
         fieldValue,
         timeRangeMs,
         populatedFields,
-        theme,
       }}
     >
       <FieldStatsFlyout

x-pack/platform/packages/private/ml/field_stats_flyout/field_stats_info_button.tsx

@@ -5,13 +5,18 @@
  * 2.0.
  */
 
-import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiToolTip, EuiText } from '@elastic/eui';
+import {
+  useEuiTheme,
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiToolTip,
+  EuiText,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { type FC } from 'react';
 import { FieldIcon } from '@kbn/react-field';
 import { type Field } from '@kbn/ml-anomaly-utils';
-import { useCurrentEuiThemeVars } from '@kbn/ml-kibana-theme';
-import { useFieldStatsFlyoutThemeVars } from './use_field_stats_flyout_context';
 
 import { getKbnFieldIconType } from './get_kbn_field_icon_types';
 
@@ -71,8 +76,7 @@ export interface FieldStatsInfoButtonProps {
  */
 export const FieldStatsInfoButton: FC<FieldStatsInfoButtonProps> = (props) => {
   const { field, label, onButtonClick, disabled, isEmpty, hideTrigger } = props;
-  const theme = useFieldStatsFlyoutThemeVars();
-  const themeVars = useCurrentEuiThemeVars(theme);
+  const { euiTheme } = useEuiTheme();
 
   const emptyFieldMessage = isEmpty
     ? ' ' +
@@ -100,7 +104,7 @@ export const FieldStatsInfoButton: FC<FieldStatsInfoButtonProps> = (props) => {
               disabled={disabled === true}
               size="xs"
               iconType="fieldStatistics"
-              css={{ color: isEmpty ? themeVars.euiTheme.euiColorDisabled : undefined }}
+              css={{ color: isEmpty ? euiTheme.colors.textDisabled : undefined }}
               onClick={(ev: React.MouseEvent<HTMLButtonElement>) => {
                 if (ev.type === 'click') {
                   ev.currentTarget.focus();
@@ -127,12 +131,12 @@ export const FieldStatsInfoButton: FC<FieldStatsInfoButtonProps> = (props) => {
       <EuiFlexItem
         grow={false}
         css={{
-          paddingRight: themeVars.euiTheme.euiSizeXS,
+          paddingRight: euiTheme.size.xs,
         }}
       >
         {!hideTrigger ? (
           <FieldIcon
-            color={isEmpty ? themeVars.euiTheme.euiColorDisabled : undefined}
+            color={isEmpty ? euiTheme.colors.textDisabled : undefined}
             type={getKbnFieldIconType(field.type)}
             fill="none"
           />

x-pack/platform/packages/private/ml/field_stats_flyout/options_list_with_stats/option_list_popover_footer.tsx

@@ -6,25 +6,26 @@
  */
 import React from 'react';
 import type { FC } from 'react';
-import { EuiPopoverFooter, EuiSwitch, EuiProgress, useEuiBackgroundColor } from '@elastic/eui';
+import { EuiPopoverFooter, EuiSwitch, EuiProgress, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
-import { euiThemeVars } from '@kbn/ui-theme';
 
 export const OptionsListPopoverFooter: FC<{
   showEmptyFields: boolean;
   setShowEmptyFields: (showEmptyFields: boolean) => void;
   isLoading?: boolean;
 }> = ({ showEmptyFields, setShowEmptyFields, isLoading }) => {
+  const { euiTheme } = useEuiTheme();
+
   return (
     <EuiPopoverFooter
       paddingSize="none"
       css={css({
-        height: euiThemeVars.euiButtonHeight,
-        backgroundColor: useEuiBackgroundColor('subdued'),
+        height: euiTheme.size.xxl,
+        backgroundColor: euiTheme.colors.backgroundBaseSubdued,
         alignItems: 'center',
         display: 'flex',
-        paddingLeft: euiThemeVars.euiSizeS,
+        paddingLeft: euiTheme.size.s,
       })}
     >
       {isLoading ? (

x-pack/platform/packages/private/ml/field_stats_flyout/tsconfig.json

@@ -23,14 +23,11 @@
     "@kbn/i18n",
     "@kbn/react-field",
     "@kbn/ml-anomaly-utils",
-    "@kbn/ml-kibana-theme",
     "@kbn/ml-data-grid",
     "@kbn/ml-string-hash",
     "@kbn/ml-is-populated-object",
     "@kbn/ml-query-utils",
     "@kbn/ml-is-defined",
     "@kbn/field-types",
-    "@kbn/ui-theme",
-    "@kbn/core-theme-browser",
   ]
 }