remove useCurrentEuiThemeVars()

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/use_field_stats_flyout_context.ts

@@ -7,7 +7,6 @@
 
 import { createContext, useContext } from 'react';
 import type { TimeRange as TimeRangeMs } from '@kbn/ml-date-picker';
-import type { ThemeServiceStart } from '@kbn/core-theme-browser';
 
 /**
  * Represents the properties for the MLJobWizardFieldStatsFlyout component.
@@ -22,7 +21,6 @@ interface MLJobWizardFieldStatsFlyoutProps {
   fieldValue?: string | number;
   timeRangeMs?: TimeRangeMs;
   populatedFields?: Set<string>;
-  theme?: ThemeServiceStart;
 }
 
 /**
@@ -36,7 +34,6 @@ export const MLFieldStatsFlyoutContext = createContext<MLJobWizardFieldStatsFlyo
   setFieldValue: () => {},
   timeRangeMs: undefined,
   populatedFields: undefined,
-  theme: undefined,
 });
 
 /**
@@ -52,17 +49,3 @@ export function useFieldStatsFlyoutContext() {
 
   return fieldStatsFlyoutContext;
 }
-
-/**
- * Retrieves the theme vars from the field stats flyout context.
- * @returns The theme vars.
- */
-export function useFieldStatsFlyoutThemeVars() {
-  const { theme } = useFieldStatsFlyoutContext();
-
-  if (!theme) {
-    throw new Error('theme must be provided in the MLFieldStatsFlyoutContext');
-  }
-
-  return theme;
-}

x-pack/platform/packages/private/ml/kibana_theme/index.ts

@@ -5,4 +5,4 @@
  * 2.0.
  */
 
-export { useIsDarkTheme, useCurrentEuiThemeVars, type EuiThemeType } from './src/hooks';
+export { useIsDarkTheme } from './src/hooks';

x-pack/platform/packages/private/ml/kibana_theme/src/hooks.ts

@@ -8,11 +8,8 @@
 import { useMemo } from 'react';
 import { of } from 'rxjs';
 import useObservable from 'react-use/lib/useObservable';
-import { euiDarkVars as euiThemeDark, euiLightVars as euiThemeLight } from '@kbn/ui-theme';
 import type { ThemeServiceStart } from '@kbn/core-theme-browser';
 
-export type EuiThemeType = typeof euiThemeLight | typeof euiThemeDark;
-
 const themeDefault = { darkMode: false };
 
 /**
@@ -28,11 +25,3 @@ export function useIsDarkTheme(theme: ThemeServiceStart): boolean {
 
   return darkMode;
 }
-
-/**
- * Returns an EUI theme definition based on the currently applied theme.
- */
-export function useCurrentEuiThemeVars(theme: ThemeServiceStart): { euiTheme: EuiThemeType } {
-  const isDarkMode = useIsDarkTheme(theme);
-  return useMemo(() => ({ euiTheme: isDarkMode ? euiThemeDark : euiThemeLight }), [isDarkMode]);
-}

x-pack/platform/plugins/private/transform/public/app/sections/create_transform/components/wizard/wizard.tsx

@@ -111,7 +111,7 @@ export const CreateTransformWizardContext = createContext<{
 export const Wizard: FC<WizardProps> = React.memo(({ cloneConfig, searchItems }) => {
   const { showNodeInfo } = useEnabledFeatures();
   const appDependencies = useAppDependencies();
-  const { uiSettings, data, fieldFormats, charts, theme } = appDependencies;
+  const { uiSettings, data, fieldFormats, charts } = appDependencies;
   const { dataView } = searchItems;
 
   // The current WIZARD_STEP
@@ -247,7 +247,6 @@ export const Wizard: FC<WizardProps> = React.memo(({ cloneConfig, searchItems })
       fieldStatsServices={fieldStatsServices}
       timeRangeMs={stepDefineState.timeRangeMs}
       dslQuery={transformConfig.source.query}
-      theme={theme}
     >
       <CreateTransformWizardContext.Provider
         value={{ dataView, runtimeMappings: stepDefineState.runtimeMappings }}

x-pack/platform/plugins/shared/aiops/public/components/change_point_detection/fields_config.tsx

@@ -638,7 +638,7 @@ export const FieldsControls: FC<PropsWithChildren<FieldsControlsProps>> = ({
 }) => {
   const { splitFieldsOptions, combinedQuery } = useChangePointDetectionContext();
   const { dataView } = useDataSource();
-  const { data, uiSettings, fieldFormats, charts, fieldStats, theme } = useAiopsAppContext();
+  const { data, uiSettings, fieldFormats, charts, fieldStats } = useAiopsAppContext();
   const timefilter = useTimefilter();
   // required in order to trigger state updates
   useTimeRangeUpdates();
@@ -677,7 +677,6 @@ export const FieldsControls: FC<PropsWithChildren<FieldsControlsProps>> = ({
             }
           : undefined
       }
-      theme={theme}
     >
       <EuiFlexGroup alignItems={'center'} responsive={true} wrap={true} gutterSize={'m'}>
         <EuiFlexItem grow={false} css={{ width: '200px' }}>

x-pack/platform/plugins/shared/aiops/public/components/field_stats_popover/field_stats_popover.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
+import { useEuiTheme, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import React, { useCallback, useMemo, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { isDefined } from '@kbn/ml-is-defined';
@@ -19,7 +19,6 @@ import {
 } from '@kbn/unified-field-list/src/components/field_popover';
 import type { DataView } from '@kbn/data-views-plugin/common';
 import type { TimeRange as TimeRangeMs } from '@kbn/ml-date-picker';
-import { useEuiTheme } from '../../hooks/use_eui_theme';
 import { FieldStatsContent } from './field_stats_content';
 
 export function FieldStatsPopover({
@@ -38,7 +37,7 @@ export function FieldStatsPopover({
   timeRangeMs?: TimeRangeMs;
 }) {
   const [infoIsOpen, setInfoOpen] = useState(false);
-  const euiTheme = useEuiTheme();
+  const { euiTheme } = useEuiTheme();
 
   const closePopover = useCallback(() => setInfoOpen(false), []);
 
@@ -62,7 +61,7 @@ export function FieldStatsPopover({
           defaultMessage: 'Show top field values',
         })}
         data-test-subj={'aiopsContextPopoverButton'}
-        css={{ marginLeft: euiTheme.euiSizeXS }}
+        css={{ marginLeft: euiTheme.size.xs }}
       />
     </EuiToolTip>
   );

x-pack/platform/plugins/shared/aiops/public/components/log_categorization/category_table/category_table.tsx

@@ -10,6 +10,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import type { EuiBasicTableColumn, EuiTableSelectionType } from '@elastic/eui';
 import {
+  useEuiTheme,
   useEuiBackgroundColor,
   EuiInMemoryTable,
   EuiButtonIcon,
@@ -24,8 +25,6 @@ import type { UseTableState } from '@kbn/ml-in-memory-table';
 import { css } from '@emotion/react';
 import type { Category } from '@kbn/aiops-log-pattern-analysis/types';
 
-import { useEuiTheme } from '../../../hooks/use_eui_theme';
-
 import { MiniHistogram } from '../../mini_histogram';
 
 import type { EventRate } from '../use_categorize_request';
@@ -63,7 +62,7 @@ export const CategoryTable: FC<Props> = ({
   selectable = true,
   onRenderComplete,
 }) => {
-  const euiTheme = useEuiTheme();
+  const { euiTheme } = useEuiTheme();
   const primaryBackgroundColor = useEuiBackgroundColor('primary');
   const { onTableChange, pagination, sorting } = tableState;
 
@@ -221,12 +220,12 @@ export const CategoryTable: FC<Props> = ({
 
     if (mouseOver.highlightedCategory && mouseOver.highlightedCategory.key === category.key) {
       return {
-        backgroundColor: euiTheme.euiColorLightestShade,
+        backgroundColor: euiTheme.colors.lightestShade,
       };
     }
 
     return {
-      backgroundColor: euiTheme.euiColorEmptyShade,
+      backgroundColor: euiTheme.colors.emptyShade,
     };
   };
 
@@ -235,8 +234,8 @@ export const CategoryTable: FC<Props> = ({
       position: 'sticky',
       insetBlockStart: 0,
       zIndex: 1,
-      backgroundColor: euiTheme.euiColorEmptyShade,
-      boxShadow: `inset 0 0px 0, inset 0 -1px 0 ${euiTheme.euiBorderColor}`,
+      backgroundColor: euiTheme.colors.emptyShade,
+      boxShadow: `inset 0 0px 0, inset 0 -1px 0 ${euiTheme.border.color}`,
     },
   });
 

x-pack/platform/plugins/shared/aiops/public/components/log_categorization/category_table/table_header.tsx

@@ -7,10 +7,16 @@
 
 import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiText, EuiButtonEmpty, EuiToolTip } from '@elastic/eui';
+import {
+  useEuiTheme,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+  EuiButtonEmpty,
+  EuiToolTip,
+} from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { QUERY_MODE } from '@kbn/aiops-log-pattern-analysis/get_category_query';
-import { useEuiTheme } from '../../../hooks/use_eui_theme';
 import type { OpenInDiscover } from './use_open_in_discover';
 
 interface Props {
@@ -24,9 +30,9 @@ export const TableHeader: FC<Props> = ({
   selectedCategoriesCount,
   openInDiscover,
 }) => {
-  const euiTheme = useEuiTheme();
+  const { euiTheme } = useEuiTheme();
   return (
-    <EuiFlexGroup gutterSize="none" alignItems="center" css={{ minHeight: euiTheme.euiSizeXL }}>
+    <EuiFlexGroup gutterSize="none" alignItems="center" css={{ minHeight: euiTheme.size.xl }}>
       <EuiFlexItem>
         <EuiText size="s" data-test-subj="aiopsLogPatternsFoundCount">
           <FormattedMessage

x-pack/platform/plugins/shared/aiops/public/components/log_categorization/format_category.test.tsx

@@ -9,7 +9,7 @@ import type { Category } from '@kbn/aiops-log-pattern-analysis/types';
 import { useCreateFormattedExample } from './format_category';
 import { renderHook } from '@testing-library/react';
 
-jest.mock('../../hooks/use_eui_theme', () => ({
+jest.mock('../../hooks/use_is_dark_theme', () => ({
   useIsDarkTheme: () => false,
 }));
 

x-pack/platform/plugins/shared/aiops/public/components/log_categorization/format_category.tsx

@@ -11,7 +11,7 @@ import { EuiText, EuiHorizontalRule } from '@elastic/eui';
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
 import type { Category } from '@kbn/aiops-log-pattern-analysis/types';
-import { useIsDarkTheme } from '../../hooks/use_eui_theme';
+import { useIsDarkTheme } from '../../hooks/use_is_dark_theme';
 
 interface Props {
   category: Category;

x-pack/platform/plugins/shared/aiops/public/components/log_rate_analysis/log_rate_analysis_info_popover.tsx

@@ -7,14 +7,12 @@
 
 import React, { useState, type FC } from 'react';
 
-import { EuiBadge, EuiPopover, EuiPopoverTitle, EuiText } from '@elastic/eui';
+import { useEuiTheme, EuiBadge, EuiPopover, EuiPopoverTitle, EuiText } from '@elastic/eui';
 
 import { LOG_RATE_ANALYSIS_TYPE } from '@kbn/aiops-log-rate-analysis';
 import { useAppSelector } from '@kbn/aiops-log-rate-analysis/state';
 import { i18n } from '@kbn/i18n';
 
-import { useEuiTheme } from '../../hooks/use_eui_theme';
-
 export const LogRateAnalysisInfoPopoverButton: FC<{
   onClick: React.MouseEventHandler<HTMLButtonElement>;
   label: string;
@@ -37,7 +35,7 @@ export const LogRateAnalysisInfoPopoverButton: FC<{
 };
 
 export const LogRateAnalysisInfoPopover: FC = () => {
-  const euiTheme = useEuiTheme();
+  const { euiTheme } = useEuiTheme();
 
   const showInfoPopover = useAppSelector(
     (s) => s.logRateAnalysisResults.significantItems.length > 0
@@ -117,7 +115,7 @@ export const LogRateAnalysisInfoPopover: FC = () => {
         </EuiPopoverTitle>
       )}
 
-      <EuiText size="s" css={{ maxWidth: `calc(${euiTheme.euiSizeXL} * 15);` }}>
+      <EuiText size="s" css={{ maxWidth: `calc(${euiTheme.size.xl} * 15);` }}>
         <p>
           {infoContent}
           {fieldSelectionMessage && ` ${fieldSelectionMessage}`}