[DataDiscovery] Replace euiThemeVars with euiTheme (#204457)

## Summary

Closes #204357 

This PR replaces euiThemeVars occurrences with euiTheme.


### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [ ] ~~Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)~~
- [ ]
~~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials~~
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] ~~If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~~
- [ ] ~~This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.~~
- [ ] ~~[Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed~~
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

Author: akowalska622

src/platform/packages/shared/kbn-discover-contextual-components/src/data_types/logs/components/log_level_badge_cell/log_level_badge_cell.test.tsx

@@ -9,6 +9,7 @@
 
 import { fieldFormatsMock } from '@kbn/field-formats-plugin/common/mocks';
 import { render, screen } from '@testing-library/react';
+import { EuiProvider } from '@elastic/eui';
 import React from 'react';
 import { getLogLevelBadgeCell } from './log_level_badge_cell';
 import { dataViewMock } from '@kbn/discover-utils/src/__mocks__/data_view';
@@ -17,19 +18,21 @@ import { DataTableRecord, buildDataTableRecord } from '@kbn/discover-utils';
 const renderCell = (logLevelField: string, record: DataTableRecord) => {
   const LogLevelBadgeCell = getLogLevelBadgeCell(logLevelField);
   render(
-    <LogLevelBadgeCell
-      rowIndex={0}
-      colIndex={0}
-      columnId="log.level"
-      isExpandable={false}
-      isExpanded={false}
-      isDetails={false}
-      row={record}
-      dataView={dataViewMock}
-      fieldFormats={fieldFormatsMock}
-      setCellProps={() => {}}
-      closePopover={() => {}}
-    />
+    <EuiProvider>
+      <LogLevelBadgeCell
+        rowIndex={0}
+        colIndex={0}
+        columnId="log.level"
+        isExpandable={false}
+        isExpanded={false}
+        isDetails={false}
+        row={record}
+        dataView={dataViewMock}
+        fieldFormats={fieldFormatsMock}
+        setCellProps={() => {}}
+        closePopover={() => {}}
+      />
+    </EuiProvider>
   );
 };
 

src/platform/packages/shared/kbn-discover-utils/src/components/custom_control_columns/degraded_docs_control.tsx

@@ -9,9 +9,8 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiCode } from '@elastic/eui';
+import { EuiCode, useEuiTheme } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import {
   RowControlColumn,
   RowControlComponent,
@@ -83,6 +82,8 @@ const DegradedDocs = ({
   Control: RowControlComponent;
   rowProps: RowControlRowProps;
 } & DegradedDocsControlProps) => {
+  const { euiTheme } = useEuiTheme();
+
   const isDegradedDocumentExists = DEGRADED_DOCS_FIELDS.some(
     (field) => field in record.raw && record.raw[field] !== null && record.raw[field] !== undefined
   );
@@ -91,7 +92,7 @@ const DegradedDocs = ({
     if (addIgnoredMetadataToQuery) {
       return (
         <Control
-          css={{ color: euiThemeVars.euiColorDisabledText }} // Give same color as disabled
+          css={{ color: euiTheme.colors.textDisabled }} // Give same color as disabled
           data-test-subj="docTableDegradedDocDisabled"
           iconType="indexClose"
           label={actionsHeaderAriaLabelDegradedAction}

src/platform/packages/shared/kbn-discover-utils/src/data_types/logs/components/log_level_badge.test.tsx

@@ -9,14 +9,17 @@
 
 import { render, screen } from '@testing-library/react';
 import React from 'react';
+import { EuiProvider } from '@elastic/eui';
 import { LogLevelBadge } from './log_level_badge';
 
 const renderBadge = (logLevel: string) => {
   render(
-    <LogLevelBadge
-      logLevel={logLevel}
-      fallback={<span data-test-subj="logLevelBadge-unknown">{logLevel}</span>}
-    />
+    <EuiProvider>
+      <LogLevelBadge
+        logLevel={logLevel}
+        fallback={<span data-test-subj="logLevelBadge-unknown">{logLevel}</span>}
+      />
+    </EuiProvider>
   );
 };
 

src/platform/packages/shared/kbn-discover-utils/src/data_types/logs/components/log_level_badge.tsx

@@ -8,14 +8,13 @@
  */
 
 import React, { ReactElement } from 'react';
-import { EuiBadge, EuiBadgeProps, mathWithUnits, useEuiTheme } from '@elastic/eui';
-import { CSSObject } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
+import { EuiBadge, EuiBadgeProps, useEuiTheme, UseEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { getLogLevelCoalescedValue, getLogLevelColor } from '../utils';
 
-const badgeCss: CSSObject = {
-  maxWidth: mathWithUnits(euiThemeVars.euiSize, (size) => size * 7.5),
-};
+const badgeCss = ({ euiTheme }: UseEuiTheme) => css`
+  max-width: calc(${euiTheme.size.base} * 7.5);
+`;
 
 export const LogLevelBadge = ({
   logLevel,

src/platform/packages/shared/kbn-discover-utils/tsconfig.json

@@ -6,16 +6,12 @@
       "jest",
       "node",
       "react",
-      "@testing-library/jest-dom"
+      "@testing-library/jest-dom",
+      "../../../../../typings/emotion.d.ts"
     ]
   },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "target/**/*"
-  ],
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["target/**/*"],
   "kbn_references": [
     "@kbn/data-service",
     "@kbn/data-views-plugin",
@@ -27,7 +23,6 @@
     "@kbn/expressions-plugin",
     "@kbn/logs-data-access-plugin",
     "@kbn/i18n-react",
-    "@kbn/navigation-plugin",
-    "@kbn/ui-theme"
+    "@kbn/navigation-plugin"
   ]
 }

src/platform/packages/shared/kbn-unified-data-table/src/components/column_header_truncate_container.tsx

@@ -8,9 +8,8 @@
  */
 
 import React from 'react';
-import { EuiTextBlockTruncate } from '@elastic/eui';
+import { EuiTextBlockTruncate, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 
 const ColumnHeaderTruncateContainer = ({
   headerRowHeight,
@@ -19,11 +18,13 @@ const ColumnHeaderTruncateContainer = ({
   headerRowHeight?: number;
   children: React.ReactNode;
 }) => {
+  const { euiTheme } = useEuiTheme();
+
   const headerCss = css`
     overflow-wrap: anywhere;
     white-space: normal;
     word-break: break-all;
-    line-height: ${euiThemeVars.euiSize};
+    line-height: ${euiTheme.size.base};
     text-align: left;
     .euiDataGridHeaderCell--numeric & {
       float: right;

src/platform/packages/shared/kbn-unified-data-table/src/components/data_table_column_header.tsx

@@ -9,12 +9,11 @@
 
 import React, { useMemo } from 'react';
 import { css, CSSObject } from '@emotion/react';
-import { EuiIconTip } from '@elastic/eui';
+import { EuiIconTip, useEuiTheme } from '@elastic/eui';
 import type { DataView, DataViewField } from '@kbn/data-views-plugin/common';
 import { FieldIcon, getFieldIconProps, getTextBasedColumnIconType } from '@kbn/field-utils';
 import { isNestedFieldParent } from '@kbn/discover-utils';
 import { i18n } from '@kbn/i18n';
-import { euiThemeVars } from '@kbn/ui-theme';
 import type { DataTableColumnsMeta } from '../types';
 import ColumnHeaderTruncateContainer from './column_header_truncate_container';
 
@@ -52,15 +51,14 @@ export const DataTableColumnHeader: React.FC<DataTableColumnHeaderProps> = ({
 const DataTableColumnToken: React.FC<
   Pick<DataTableColumnHeaderProps, 'columnName' | 'columnsMeta' | 'dataView'>
 > = (props) => {
+  const { euiTheme } = useEuiTheme();
   const { columnName, columnsMeta, dataView } = props;
   const columnToken = useMemo(
     () => getRenderedToken({ columnName, columnsMeta, dataView }),
     [columnName, columnsMeta, dataView]
   );
 
-  return columnToken ? (
-    <span css={{ paddingRight: euiThemeVars.euiSizeXS }}>{columnToken}</span>
-  ) : null;
+  return columnToken ? <span css={{ paddingRight: euiTheme.size.xs }}>{columnToken}</span> : null;
 };
 
 const DataTableColumnTitle: React.FC<Pick<DataTableColumnHeaderProps, 'columnDisplayName'>> = ({

src/platform/packages/shared/kbn-unified-data-table/src/components/row_height_settings.tsx

@@ -9,8 +9,7 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiButtonGroup, EuiFormRow, EuiRange, htmlIdGenerator } from '@elastic/eui';
-import { euiThemeVars } from '@kbn/ui-theme';
+import { EuiButtonGroup, EuiFormRow, EuiRange, htmlIdGenerator, useEuiTheme } from '@elastic/eui';
 
 export enum RowHeightMode {
   auto = 'auto',
@@ -40,6 +39,8 @@ export function RowHeightSettings({
   maxRowHeight,
   ['data-test-subj']: dataTestSubj,
 }: RowHeightSettingsProps) {
+  const { euiTheme } = useEuiTheme();
+
   const rowHeightModeOptions = [
     {
       id: `${idPrefix}${RowHeightMode.single}`,
@@ -95,7 +96,7 @@ export function RowHeightSettings({
               }}
               data-test-subj={`${dataTestSubj}_lineCountNumber`}
               css={{
-                marginTop: compressed ? euiThemeVars.euiSizeXS : euiThemeVars.euiSizeM,
+                marginTop: compressed ? euiTheme.size.xs : euiTheme.size.m,
               }}
             />
           ) : null}

src/platform/packages/shared/kbn-unified-data-table/tsconfig.json

@@ -3,10 +3,14 @@
   "compilerOptions": {
     "outDir": "target/types"
   },
-  "include": ["*.ts", "**/*.tsx", "src/**/*", "__mocks__/**/*.ts"],
-  "exclude": [
-    "target/**/*"
+  "include": [
+    "*.ts",
+    "**/*.tsx",
+    "src/**/*",
+    "__mocks__/**/*.ts",
+    "../../../../../typings/emotion.d.ts"
   ],
+  "exclude": ["target/**/*"],
   "kbn_references": [
     "@kbn/i18n",
     "@kbn/data-views-plugin",
@@ -16,7 +20,6 @@
     "@kbn/expressions-plugin",
     "@kbn/test-jest-helpers",
     "@kbn/i18n-react",
-    "@kbn/ui-theme",
     "@kbn/field-types",
     "@kbn/kibana-utils-plugin",
     "@kbn/cell-actions",
@@ -39,6 +42,6 @@
     "@kbn/unified-field-list",
     "@kbn/core-notifications-browser",
     "@kbn/core-capabilities-browser-mocks",
-    "@kbn/sort-predicates",
+    "@kbn/sort-predicates"
   ]
 }

src/platform/packages/shared/kbn-unified-field-list/src/components/field_popover/field_popover.tsx

@@ -15,8 +15,9 @@ import {
   EuiPopoverProps,
   EuiPopoverTitle,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
+
 import './field_popover.scss';
-import { euiThemeVars } from '@kbn/ui-theme';
 
 export interface FieldPopoverProps extends EuiPopoverProps {
   renderHeader?: () => React.ReactNode;
@@ -80,10 +81,10 @@ export const FieldPopover: React.FC<FieldPopoverProps> = ({
           {content ? (
             <EuiFlexItem
               className="eui-yScrollWithShadows"
-              css={{
-                padding: euiThemeVars.euiSize,
-                margin: `-${euiThemeVars.euiSize}`,
-              }}
+              css={({ euiTheme }) => css`
+                padding: ${euiTheme.size.base};
+                margin: -${euiTheme.size.base};
+              `}
             >
               {content}
             </EuiFlexItem>