[POC] Migrate infra from styled-components to @emotion (#202405)

Closes https://github.com/elastic/kibana/issues/202255

### Summary
While working on the visual refresh for the new EUI theme Borealis we
figured that was a good time to do the recommended migration from
styled-components to @emotion

### What has been done

- Migrate infra plugin from styled-components to @emotion
- Eui Visual Refresh for Borealis new theme
- All usage of color palette tokens and functions now pull from the
theme, and correctly update to use new colors when the theme changes
from Borealis to Amsterdam and vice versa
- All references to renamed tokens have been updated to use the new
token name
- Remove usage of deprecated `useEuiBackgroundColor`
- All usages of "success" colors have been updated to `accentSecondary`
and `textAccentSecondary` as needed


### How to test

#### Running Kibana with the Borealis theme
In order to run Kibana with Borealis, you'll need to do the following:

- Set the following in kibana.dev.yml:
`uiSettings.experimental.themeSwitcherEnabled: true`
- Run Kibana with the following environment variable set:
`KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn
start`
- This will expose a toggle under Stack Management > Advanced Settings >
Theme version, which you can use to toggle between Amsterdam and
Borealis.

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/new_search_index_template.tsx

@@ -154,7 +154,11 @@ export const NewSearchIndexTemplate: React.FC<Props> = ({
                 optionally set a default {language_analyzer} for the index."
                   values={{
                     language_analyzer: (
-                      <EuiLink target="_blank" href={docLinks.languageAnalyzers}>
+                      <EuiLink
+                        data-test-subj="enterpriseSearchNewSearchIndexTemplateLanguageAnalyzerLink"
+                        target="_blank"
+                        href={docLinks.languageAnalyzers}
+                      >
                         {i18n.translate(
                           'xpack.enterpriseSearch.content.newIndex.newSearchIndexTemplate.formDescription.linkText',
                           {
@@ -247,6 +251,7 @@ export const NewSearchIndexTemplate: React.FC<Props> = ({
                   )}
                 >
                   <EuiSelect
+                    data-test-subj="enterpriseSearchNewSearchIndexTemplateSelect"
                     data-telemetry-id={`entSearchContent-${type}-newIndex-languageAnalyzer`}
                     disabled={disabled}
                     options={SUPPORTED_LANGUAGES}
@@ -261,7 +266,11 @@ export const NewSearchIndexTemplate: React.FC<Props> = ({
         <EuiSpacer />
         <EuiFlexGroup direction="column" gutterSize="xs">
           <EuiFlexItem>
-            <EuiLink target="_blank" href={docLinks.elasticsearchGettingStarted}>
+            <EuiLink
+              data-test-subj="enterpriseSearchNewSearchIndexTemplateLearnMoreAboutIndicesLink"
+              target="_blank"
+              href={docLinks.elasticsearchGettingStarted}
+            >
               {i18n.translate(
                 'xpack.enterpriseSearch.content.newIndex.newSearchIndexTemplate.learnMoreIndices.linkText',
                 {
@@ -273,7 +282,11 @@ export const NewSearchIndexTemplate: React.FC<Props> = ({
 
           {type === INGESTION_METHOD_IDS.CONNECTOR && (
             <EuiFlexItem grow={false}>
-              <EuiLink target="_blank" href={docLinks.connectors}>
+              <EuiLink
+                data-test-subj="enterpriseSearchNewSearchIndexTemplateLearnMoreAboutConnectorsLink"
+                target="_blank"
+                href={docLinks.connectors}
+              >
                 {i18n.translate(
                   'xpack.enterpriseSearch.content.newIndex.newSearchIndexTemplate.learnMoreConnectors.linkText',
                   {
@@ -285,7 +298,11 @@ export const NewSearchIndexTemplate: React.FC<Props> = ({
           )}
           {type === INGESTION_METHOD_IDS.CRAWLER && (
             <EuiFlexItem grow={false}>
-              <EuiLink target="_blank" href={docLinks.crawlerOverview}>
+              <EuiLink
+                data-test-subj="enterpriseSearchNewSearchIndexTemplateLearnMoreAboutTheElasticWebCrawlerLink"
+                target="_blank"
+                href={docLinks.crawlerOverview}
+              >
                 {i18n.translate(
                   'xpack.enterpriseSearch.content.newIndex.newSearchIndexTemplate.learnMoreCrawler.linkText',
                   {
@@ -297,7 +314,11 @@ export const NewSearchIndexTemplate: React.FC<Props> = ({
           )}
           {type === INGESTION_METHOD_IDS.API && (
             <EuiFlexItem grow={false}>
-              <EuiLink target="_blank" href={docLinks.ingestionApis}>
+              <EuiLink
+                data-test-subj="enterpriseSearchNewSearchIndexTemplateLearnMoreAboutIngestionApIsLink"
+                target="_blank"
+                href={docLinks.ingestionApis}
+              >
                 {i18n.translate(
                   'xpack.enterpriseSearch.content.newIndex.newSearchIndexTemplate.learnMoreApis.linkText',
                   {
@@ -312,6 +333,7 @@ export const NewSearchIndexTemplate: React.FC<Props> = ({
         <EuiFlexGroup direction="row" alignItems="center" justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
             <EuiButton
+              data-test-subj="enterpriseSearchNewSearchIndexTemplateButton"
               data-telemetry-id={`entSearchContent-${type}-newIndex-goBack`}
               isDisabled={buttonLoading}
               onClick={() => history.back()}

x-pack/plugins/observability_solution/infra/emotion.d.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import '@emotion/react';
+import type { UseEuiTheme } from '@elastic/eui';
+
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends UseEuiTheme {}
+}

x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx

@@ -7,13 +7,13 @@
 
 import React from 'react';
 import { Chart, Metric, Settings } from '@elastic/charts';
-import { EuiIcon, EuiPanel, useEuiBackgroundColor } from '@elastic/eui';
+import { EuiIcon, EuiPanel, type UseEuiTheme, useEuiTheme } from '@elastic/eui';
 import type { PartialTheme, Theme } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
 import { COMPARATORS } from '@kbn/alerting-comparators';
 
 export interface ChartProps {
-  theme?: PartialTheme;
+  theme?: UseEuiTheme<{}>;
   baseTheme: Theme;
 }
 
@@ -41,7 +41,8 @@ export const Threshold = ({
   valueFormatter,
   warning,
 }: Props) => {
-  const color = useEuiBackgroundColor('danger');
+  const { euiTheme } = useEuiTheme();
+  const color = euiTheme.colors.backgroundBaseDanger;
 
   return (
     <EuiPanel
@@ -56,7 +57,7 @@ export const Threshold = ({
       data-test-subj={`threshold-${thresholds.join('-')}-${value}`}
     >
       <Chart>
-        <Settings theme={theme} baseTheme={baseTheme} locale={i18n.getLocale()} />
+        <Settings theme={theme as PartialTheme} baseTheme={baseTheme} locale={i18n.getLocale()} />
         <Metric
           id={id}
           data={[

x-pack/plugins/observability_solution/infra/public/alerting/log_threshold/components/alert_details_app_section/components/alert_annotation.tsx

@@ -8,13 +8,14 @@
 import React from 'react';
 import { AnnotationDomainType, LineAnnotation, Position } from '@elastic/charts';
 import moment from 'moment';
-import { EuiIcon } from '@elastic/eui';
+import { EuiIcon, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { UI_SETTINGS } from '@kbn/data-plugin/public';
 import { useKibanaContextForPlugin } from '../../../../../hooks/use_kibana';
+
 export function AlertAnnotation({ alertStarted }: { alertStarted: number }) {
   const { uiSettings } = useKibanaContextForPlugin().services;
+  const { euiTheme } = useEuiTheme();
 
   return (
     <LineAnnotation
@@ -32,7 +33,7 @@ export function AlertAnnotation({ alertStarted }: { alertStarted: number }) {
       style={{
         line: {
           strokeWidth: 3,
-          stroke: euiThemeVars.euiColorDangerText,
+          stroke: euiTheme.colors.textDanger,
           opacity: 1,
         },
       }}

x-pack/plugins/observability_solution/infra/public/alerting/log_threshold/components/alert_details_app_section/index.tsx

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
-import { LEGACY_LIGHT_THEME } from '@elastic/charts';
+import { LIGHT_THEME } from '@elastic/charts';
 import { EuiPanel } from '@elastic/eui';
 import {
   ALERT_CONTEXT,
@@ -93,8 +93,7 @@ const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) =>
               <EuiSpacer size="s" />
               <Threshold
                 title={`Threshold breached`}
-                // @ts-expect-error this chart needs to be migrated to the new chart theming system, comment should be removed once https://github.com/elastic/kibana/issues/202138 is resolved
-                chartProps={{ theme, baseTheme: LEGACY_LIGHT_THEME }}
+                chartProps={{ theme, baseTheme: LIGHT_THEME }}
                 comparator={ComparatorToi18nSymbolsMap[rule.params.count.comparator]}
                 id={'threshold-ratio-chart'}
                 thresholds={[rule.params.count.value]}
@@ -161,8 +160,7 @@ const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) =>
               <EuiSpacer size="s" />
               <Threshold
                 title={`Threshold breached`}
-                // @ts-expect-error this chart needs to be migrated to the new chart theming system, comment should be removed once https://github.com/elastic/kibana/issues/202138 is resolved
-                chartProps={{ theme, baseTheme: LEGACY_LIGHT_THEME }}
+                chartProps={{ theme, baseTheme: LIGHT_THEME }}
                 comparator={ComparatorToi18nSymbolsMap[rule.params.count.comparator]}
                 id="logCountThreshold"
                 thresholds={[rule.params.count.value]}

x-pack/plugins/observability_solution/infra/public/alerting/metric_threshold/components/expression_row.tsx

@@ -18,7 +18,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { omit } from 'lodash';
 import React, { PropsWithChildren, useCallback, useMemo, useState } from 'react';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import {
   AggregationType,
   IErrorObject,
@@ -46,13 +46,15 @@ interface ExpressionRowProps {
   setRuleParams(id: number, params: MetricExpression): void;
 }
 
-const NegativeHorizontalMarginDiv = euiStyled.div`margin: 0 -4px;`;
+const NegativeHorizontalMarginDiv = styled.div`
+  margin: 0 -4px;
+`;
 
-const StyledExpression = euiStyled.div`
+const StyledExpression = styled.div`
   padding: 0 4px;
 `;
 
-const StyledHealth = euiStyled(EuiHealth)`
+const StyledHealth = styled(EuiHealth)`
   margin-left: 4px;
 `;
 

x-pack/plugins/observability_solution/infra/public/components/asset_details/tabs/processes/process_row.tsx

@@ -21,7 +21,7 @@ import {
   EuiButton,
   EuiSpacer,
 } from '@elastic/eui';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import useToggle from 'react-use/lib/useToggle';
 import { type Message } from '@kbn/observability-ai-assistant-plugin/public';
 import { useKibanaContextForPlugin } from '../../../../hooks/use_kibana';
@@ -199,15 +199,13 @@ const explainProcessMessageTitle = i18n.translate(
   }
 );
 
-const ExpandedRowDescriptionList = euiStyled(EuiDescriptionList).attrs({
-  compressed: true,
-})`
+const ExpandedRowDescriptionList = styled(EuiDescriptionList)`
   width: 100%;
 `;
 
-const CodeListItem = euiStyled(EuiCode).attrs({
-  transparentBackground: true,
-})`
+ExpandedRowDescriptionList.defaultProps = { compressed: true };
+
+const CodeListItem = styled(EuiCode)`
   padding: 0 !important;
   & code.euiCodeBlock__code {
     white-space: nowrap !important;
@@ -215,18 +213,19 @@ const CodeListItem = euiStyled(EuiCode).attrs({
   }
 `;
 
-const ExpandedCommandLine = euiStyled(EuiCode).attrs({
-  transparentBackground: true,
-})`
+CodeListItem.defaultProps = { transparentBackground: true };
+
+const ExpandedCommandLine = styled(EuiCode)`
   padding: 0 !important;
-  margin-bottom: ${(props) => props.theme.eui.euiSizeS};
+  margin-bottom: ${(props) => props.theme.euiTheme.size.s};
 `;
 
-const ExpandedRowCell = euiStyled(EuiTableRowCell).attrs({
-  textOnly: false,
-  colSpan: 6,
-})`
-  padding-top: ${(props) => props.theme.eui.euiSizeM} !important;
-  padding-bottom: ${(props) => props.theme.eui.euiSizeM} !important;
-  background-color: ${(props) => props.theme.eui.euiColorLightestShade};
+ExpandedCommandLine.defaultProps = { transparentBackground: true };
+
+const ExpandedRowCell = styled(EuiTableRowCell)`
+  padding-top: ${(props) => props.theme.euiTheme.size.m} !important;
+  padding-bottom: ${(props) => props.theme.euiTheme.size.m} !important;
+  background-color: ${(props) => props.theme.euiTheme.colors.lightestShade};
 `;
+
+ExpandedRowCell.defaultProps = { textOnly: false, colSpan: 6 };

x-pack/plugins/observability_solution/infra/public/components/asset_details/tabs/processes/processes_table.tsx

@@ -367,7 +367,7 @@ const columns: Array<{
 ];
 
 const CodeLine = ({ command }: { command: string }) => {
-  const euiTheme = useEuiTheme();
+  const { euiTheme } = useEuiTheme();
   return (
     <div
       css={css`
@@ -379,8 +379,8 @@ const CodeLine = ({ command }: { command: string }) => {
       <EuiCode
         transparentBackground
         css={css`
-          color: ${euiTheme.euiTheme.colors.text};
-          font-weight: ${euiTheme.euiTheme.font.weight.medium};
+          color: ${euiTheme.colors.textParagraph};
+          font-weight: ${euiTheme.font.weight.medium};
         `}
       >
         {command}

x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/autocomplete_field.tsx

@@ -8,7 +8,7 @@
 import { EuiFieldSearch, EuiOutsideClickDetector, EuiPanel } from '@elastic/eui';
 import React from 'react';
 import { QuerySuggestion } from '@kbn/unified-search-plugin/public';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { composeStateUpdaters } from '../../utils/typed_react';
 import { SuggestionItem } from './suggestion_item';
 
@@ -302,19 +302,18 @@ const withUnfocused = (state: AutocompleteFieldState) => ({
   isFocused: false,
 });
 
-const AutocompleteContainer = euiStyled.div`
+const AutocompleteContainer = styled.div`
   position: relative;
 `;
 
-const SuggestionsPanel = euiStyled(EuiPanel).attrs(() => ({
-  paddingSize: 'none',
-  hasShadow: true,
-}))`
+const SuggestionsPanel = styled(EuiPanel)`
   position: absolute;
   width: 100%;
   margin-top: 2px;
   overflow-x: hidden;
   overflow-y: scroll;
-  z-index: ${(props) => props.theme.eui.euiZLevel1};
+  z-index: ${(props) => props.theme.euiTheme.levels.maskBelowHeader};
   max-height: 322px;
 `;
+
+SuggestionsPanel.defaultProps = { paddingSize: 'none', hasShadow: true };

x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx

@@ -6,8 +6,9 @@
  */
 
 import React from 'react';
-import { EuiIcon } from '@elastic/eui';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import { EuiIcon, useEuiFontSize } from '@elastic/eui';
+import styled from '@emotion/styled';
+import type { Theme } from '@emotion/react';
 import { QuerySuggestion, QuerySuggestionTypes } from '@kbn/unified-search-plugin/public';
 import { transparentize } from 'polished';
 
@@ -36,51 +37,51 @@ SuggestionItem.defaultProps = {
   isSelected: false,
 };
 
-const SuggestionItemContainer = euiStyled.div<{
+const SuggestionItemContainer = styled.div<{
   isSelected?: boolean;
 }>`
   display: flex;
   flex-direction: row;
-  font-size: ${(props) => props.theme.eui.euiFontSizeS};
-  height: ${(props) => props.theme.eui.euiSizeXL};
+  font-size: ${() => useEuiFontSize('m').fontSize};
+  height: ${({ theme }) => theme.euiTheme.size.xl};
   white-space: nowrap;
   background-color: ${(props) =>
-    props.isSelected ? props.theme.eui.euiColorLightestShade : 'transparent'};
+    props.isSelected ? props.theme.euiTheme.colors.lightestShade : 'transparent'};
 `;
 
-const SuggestionItemField = euiStyled.div`
+const SuggestionItemField = styled.div`
   align-items: center;
   cursor: pointer;
   display: flex;
   flex-direction: row;
-  height: ${(props) => props.theme.eui.euiSizeXL};
-  padding: ${(props) => props.theme.eui.euiSizeXS};
+  height: ${({ theme }) => theme.euiTheme.size.xl};
+  padding: ${({ theme }) => theme.euiTheme.size.xs};
 `;
 
-const SuggestionItemIconField = euiStyled(SuggestionItemField)<{
+const SuggestionItemIconField = styled(SuggestionItemField)<{
   suggestionType: QuerySuggestionTypes;
 }>`
-  background-color: ${(props) =>
-    transparentize(0.9, getEuiIconColor(props.theme, props.suggestionType))};
-  color: ${(props) => getEuiIconColor(props.theme, props.suggestionType)};
+  background-color: ${({ theme, suggestionType }) =>
+    transparentize(0.9, getEuiIconColor(theme, suggestionType))};
+  color: ${({ theme, suggestionType }) => getEuiIconColor(theme, suggestionType)};
   flex: 0 0 auto;
   justify-content: center;
-  width: ${(props) => props.theme.eui.euiSizeXL};
+  width: ${({ theme }) => theme.euiTheme.size.xl};
 `;
 
-const SuggestionItemTextField = euiStyled(SuggestionItemField)`
+const SuggestionItemTextField = styled(SuggestionItemField)`
   flex: 2 0 0;
-  font-family: ${(props) => props.theme.eui.euiCodeFontFamily};
+  font-family: ${({ theme }) => theme.euiTheme.font.familyCode};
 `;
 
-const SuggestionItemDescriptionField = euiStyled(SuggestionItemField)`
+const SuggestionItemDescriptionField = styled(SuggestionItemField)`
   flex: 3 0 0;
 
   p {
     display: inline;
 
     span {
-      font-family: ${(props) => props.theme.eui.euiCodeFontFamily};
+      font-family: ${({ theme }) => theme.euiTheme.font.familyCode};
     }
   }
 `;
@@ -102,18 +103,18 @@ const getEuiIconType = (suggestionType: QuerySuggestionTypes) => {
   }
 };
 
-const getEuiIconColor = (theme: any, suggestionType: QuerySuggestionTypes): string => {
+const getEuiIconColor = (theme: Theme, suggestionType: QuerySuggestionTypes): string => {
   switch (suggestionType) {
     case QuerySuggestionTypes.Field:
-      return theme?.eui.euiColorVis7;
+      return theme?.euiTheme.colors.vis.euiColorVis7;
     case QuerySuggestionTypes.Value:
-      return theme?.eui.euiColorVis0;
+      return theme?.euiTheme.colors.vis.euiColorVis0;
     case QuerySuggestionTypes.Operator:
-      return theme?.eui.euiColorVis1;
+      return theme?.euiTheme.colors.vis.euiColorVis1;
     case QuerySuggestionTypes.Conjunction:
-      return theme?.eui.euiColorVis2;
+      return theme?.euiTheme.colors.vis.euiColorVis2;
     case QuerySuggestionTypes.RecentSearch:
     default:
-      return theme?.eui.euiColorMediumShade;
+      return theme?.euiTheme.colors.mediumShade;
   }
 };

x-pack/plugins/observability_solution/infra/public/components/empty_states/no_data.tsx

@@ -7,8 +7,7 @@
 
 import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
 import React from 'react';
-
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 
 interface NoDataProps {
   titleText: string;
@@ -44,6 +43,6 @@ export const NoData: React.FC<NoDataProps> = ({
   />
 );
 
-const CenteredEmptyPrompt = euiStyled(EuiEmptyPrompt)`
+const CenteredEmptyPrompt = styled(EuiEmptyPrompt)`
   align-self: center;
 `;

x-pack/plugins/observability_solution/infra/public/components/eui/toolbar/toolbar.tsx

@@ -6,22 +6,14 @@
  */
 
 import { EuiPanel } from '@elastic/eui';
-import { FunctionComponent } from 'react';
-import { StyledComponent } from 'styled-components';
-import { euiStyled, EuiTheme } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 
-// The return type of this component needs to be specified because the inferred
-// return type depends on types that are not exported from EUI. You get a TS4023
-// error if the return type is not specified.
-export const Toolbar: StyledComponent<FunctionComponent, EuiTheme> = euiStyled(EuiPanel).attrs(
-  () => ({
-    grow: false,
-    paddingSize: 'none',
-  })
-)`
+export const Toolbar = styled(EuiPanel)`
   border-top: none;
   border-right: none;
   border-left: none;
   border-radius: 0;
-  padding: ${(props) => props.theme.eui.euiSizeS} ${(props) => props.theme.eui.euiSizeL};
+  padding: ${(props) => props.theme.euiTheme.size.s} ${(props) => props.theme.euiTheme.size.l};
 `;
+
+Toolbar.defaultProps = { grow: false, paddingSize: 'none' };

x-pack/plugins/observability_solution/infra/public/components/fixed_datepicker.tsx

@@ -6,17 +6,13 @@
  */
 
 import { EuiDatePicker, EuiDatePickerProps } from '@elastic/eui';
-import React, { FunctionComponent } from 'react';
-import { StyledComponent } from 'styled-components';
-import { euiStyled, EuiTheme } from '@kbn/kibana-react-plugin/common';
+import React from 'react';
+import styled, { type StyledComponent } from '@emotion/styled';
 
 // The return type of this component needs to be specified because the inferred
 // return type depends on types that are not exported from EUI. You get a TS4023
 // error if the return type is not specified.
-export const FixedDatePicker: StyledComponent<
-  FunctionComponent<EuiDatePickerProps>,
-  EuiTheme
-> = euiStyled(
+export const FixedDatePicker: StyledComponent<EuiDatePickerProps> = styled(
   ({
     className,
     inputClassName,

x-pack/plugins/observability_solution/infra/public/components/loading/index.tsx

@@ -7,8 +7,7 @@
 
 import { EuiLoadingChart, EuiPanel, EuiText } from '@elastic/eui';
 import * as React from 'react';
-
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 
 interface InfraLoadingProps {
   text: string | JSX.Element;
@@ -34,7 +33,7 @@ export class InfraLoadingPanel extends React.PureComponent<InfraLoadingProps, {}
   }
 }
 
-export const InfraLoadingStaticPanel = euiStyled.div`
+export const InfraLoadingStaticPanel = styled.div`
   position: relative;
   overflow: hidden;
   display: flex;
@@ -42,7 +41,7 @@ export const InfraLoadingStaticPanel = euiStyled.div`
   justify-content: center;
 `;
 
-export const InfraLoadingStaticContentPanel = euiStyled.div`
+export const InfraLoadingStaticContentPanel = styled.div`
   flex: 0 0 auto;
   align-self: center;
   text-align: center;

x-pack/plugins/observability_solution/infra/public/components/loading_overlay_wrapper.tsx

@@ -8,7 +8,7 @@
 import { EuiLoadingSpinner } from '@elastic/eui';
 import { transparentize } from 'polished';
 import React, { FC, PropsWithChildren } from 'react';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 
 export const LoadingOverlayWrapper: React.FC<
   React.HTMLAttributes<HTMLDivElement> & {
@@ -28,13 +28,13 @@ const Overlay: FC<PropsWithChildren<unknown>> = ({ children }) => (
   <OverlayDiv>{children ? children : <EuiLoadingSpinner size="xl" />}</OverlayDiv>
 );
 
-const RelativeDiv = euiStyled.div`
+const RelativeDiv = styled.div`
   position: relative;
 `;
 
-const OverlayDiv = euiStyled.div`
+const OverlayDiv = styled.div`
   align-items: center;
-  background-color: ${(props) => transparentize(0.3, props.theme.eui.euiColorEmptyShade)};
+  background-color: ${(props) => transparentize(0.3, props.theme.euiTheme.colors.emptyShade)};
   display: flex;
   height: 100%;
   justify-content: center;
@@ -42,5 +42,5 @@ const OverlayDiv = euiStyled.div`
   position: absolute;
   top: 0;
   width: 100%;
-  z-index: ${(props) => props.theme.eui.euiZLevel1};
+  z-index: ${(props) => props.theme.euiTheme.levels.maskBelowHeader};
 `;

x-pack/plugins/observability_solution/infra/public/components/log_stream/log_stream_react_embeddable.tsx

@@ -7,7 +7,7 @@
 
 import React, { FC, PropsWithChildren, useEffect, useMemo, useState } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiCallOut, EuiLink } from '@elastic/eui';
+import { EuiCallOut, EuiLink, useEuiTheme } from '@elastic/eui';
 import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
 import {
   initializeTimeRange,
@@ -19,7 +19,6 @@ import { AppMountParameters, CoreStart } from '@kbn/core/public';
 import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
 import { Query } from '@kbn/es-query';
 import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
-import { euiThemeVars } from '@kbn/ui-theme';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { LogStreamApi, LogStreamSerializedState, Services } from './types';
@@ -113,6 +112,7 @@ const SAVED_SEARCH_DOCS_URL =
 
 const DeprecationCallout = () => {
   const [isDismissed, setDismissed] = useLocalStorage(DISMISSAL_STORAGE_KEY, false);
+  const { euiTheme } = useEuiTheme();
 
   if (isDismissed) {
     return null;
@@ -125,8 +125,8 @@ const DeprecationCallout = () => {
       onDismiss={() => setDismissed(true)}
       css={{
         position: 'absolute',
-        bottom: euiThemeVars.euiSizeM,
-        right: euiThemeVars.euiSizeM,
+        bottom: euiTheme.size.m,
+        right: euiTheme.size.m,
         width: 'min(100%, 40ch)',
       }}
     >

x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_job_status/quality_warning_notices.tsx

@@ -17,7 +17,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { groupBy } from 'lodash';
 import React, { Fragment, useState } from 'react';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import {
   CategoryQualityWarning,
   CategoryQualityWarningReason,
@@ -83,10 +83,10 @@ export const CategoryQualityWarnings: React.FC<{
   );
 };
 
-const QualityWarningReasonDescription = euiStyled(EuiDescriptionListDescription)`
+const QualityWarningReasonDescription = styled(EuiDescriptionListDescription)`
   display: list-item;
   list-style-type: disc;
-  margin-left: ${(props) => props.theme.eui.euiSizeM};
+  margin-left: ${(props) => props.theme.euiTheme.size.m};
 `;
 
 const categoryQualityWarningCalloutTitle = i18n.translate(

x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_results/category_expression.tsx

@@ -7,8 +7,7 @@
 
 import { i18n } from '@kbn/i18n';
 import React, { memo } from 'react';
-
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 
 export const RegularExpressionRepresentation: React.FunctionComponent<{
   maximumSegmentCount?: number;
@@ -48,16 +47,16 @@ export const RegularExpressionRepresentation: React.FunctionComponent<{
   );
 });
 
-const CategoryPattern = euiStyled.span`
-  font-family: ${(props) => props.theme.eui.euiCodeFontFamily};
+const CategoryPattern = styled.span`
+  font-family: ${(props) => props.theme.euiTheme.font.familyCode};
   word-break: break-all;
 `;
 
-const CategoryPatternWildcard = euiStyled.span`
-  color: ${(props) => props.theme.eui.euiColorMediumShade};
+const CategoryPatternWildcard = styled.span`
+  color: ${(props) => props.theme.euiTheme.colors.mediumShade};
 `;
 
-const CategoryPatternSegment = euiStyled.span`
+const CategoryPatternSegment = styled.span`
   font-weight: bold;
 `;
 

x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_setup/missing_results_privileges_prompt.tsx

@@ -7,7 +7,7 @@
 
 import { EuiEmptyPrompt } from '@elastic/eui';
 import React from 'react';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import {
   missingMlPrivilegesTitle,
   missingMlResultsPrivilegesDescription,
@@ -23,6 +23,6 @@ export const MissingResultsPrivilegesPrompt: React.FunctionComponent = () => (
   />
 );
 
-const EmptyPrompt = euiStyled(EuiEmptyPrompt)`
+const EmptyPrompt = styled(EuiEmptyPrompt)`
   align-self: center;
 `;

x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_setup/missing_setup_privileges_prompt.tsx

@@ -7,7 +7,7 @@
 
 import { EuiEmptyPrompt } from '@elastic/eui';
 import React from 'react';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import {
   missingMlPrivilegesTitle,
   missingMlSetupPrivilegesDescription,
@@ -23,6 +23,6 @@ export const MissingSetupPrivilegesPrompt: React.FunctionComponent = () => (
   />
 );
 
-const EmptyPrompt = euiStyled(EuiEmptyPrompt)`
+const EmptyPrompt = styled(EuiEmptyPrompt)`
   align-self: center;
 `;

x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_setup/ml_unavailable_prompt.tsx

@@ -9,8 +9,7 @@ import { EuiButton, EuiEmptyPrompt, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import React from 'react';
-
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 
 export const MlUnavailablePrompt: React.FunctionComponent<{}> = () => (
   <EmptyPrompt
@@ -60,6 +59,6 @@ export const MlUnavailablePrompt: React.FunctionComponent<{}> = () => (
   />
 );
 
-const EmptyPrompt = euiStyled(EuiEmptyPrompt)`
+const EmptyPrompt = styled(EuiEmptyPrompt)`
   align-self: center;
 `;

x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_setup/setup_status_unknown_prompt.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiEmptyPrompt, EuiButton } from '@elastic/eui';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 
 interface Props {
   retry: () => void;
@@ -42,6 +42,6 @@ export const LogAnalysisSetupStatusUnknownPrompt: React.FunctionComponent<Props>
   />
 );
 
-const EmptyPrompt = euiStyled(EuiEmptyPrompt)`
+const EmptyPrompt = styled(EuiEmptyPrompt)`
   align-self: center;
 `;

x-pack/plugins/observability_solution/infra/public/components/logging/log_customization_menu.tsx

@@ -8,8 +8,7 @@
 import { EuiButtonEmpty, EuiPopover } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import * as React from 'react';
-
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 
 interface LogCustomizationMenuState {
   isShown: boolean;
@@ -75,6 +74,6 @@ export class LogCustomizationMenu extends React.Component<
   }
 }
 
-const CustomizationMenuContent = euiStyled.div`
+const CustomizationMenuContent = styled.div`
   min-width: 200px;
 `;

x-pack/plugins/observability_solution/infra/public/components/logging/log_entry_examples/log_entry_examples.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { FC, PropsWithChildren } from 'react';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { LogEntryExampleMessagesEmptyIndicator } from './log_entry_examples_empty_indicator';
 import { LogEntryExampleMessagesFailureIndicator } from './log_entry_examples_failure_indicator';
 import { LogEntryExampleMessagesLoadingIndicator } from './log_entry_examples_loading_indicator';
@@ -41,7 +41,7 @@ export const LogEntryExampleMessages: FC<PropsWithChildren<Props>> = ({
   );
 };
 
-const Wrapper = euiStyled.div`
+const Wrapper = styled.div`
   align-items: stretch;
   flex-direction: column;
   flex: 1 0 0%;

x-pack/plugins/observability_solution/infra/public/components/logging/log_highlights_menu.tsx

@@ -18,9 +18,9 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { debounce } from 'lodash';
 import React, { useCallback, useMemo, useState } from 'react';
-
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { useVisibilityState } from '../../hooks/use_visibility_state';
+import { withAttrs } from '../../utils/theme_utils/with_attrs';
 
 interface LogHighlightsMenuProps {
   onChange: (highlightTerms: string[]) => void;
@@ -174,14 +174,17 @@ const goToNextHighlightLabel = i18n.translate(
   }
 );
 
-const ActiveHighlightsIndicator = euiStyled(EuiIcon).attrs(({ theme }) => ({
-  type: 'checkInCircleFilled',
-  size: 'm',
-  color: theme?.eui.euiColorAccent,
-}))`
-  padding-left: ${(props) => props.theme.eui.euiSizeXS};
-`;
+const ActiveHighlightsIndicator = withAttrs(
+  styled(EuiIcon)`
+    padding-left: ${(props) => props.theme.euiTheme.size.xs};
+  `,
+  ({ theme }) => ({
+    type: 'checkInCircleFilled',
+    size: 'm',
+    color: theme?.euiTheme.colors.accent,
+  })
+);
 
-const LogHighlightsMenuContent = euiStyled.div`
+const LogHighlightsMenuContent = styled.div`
   width: 300px;
 `;

x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/density_chart.tsx

@@ -9,8 +9,7 @@ import { scaleLinear, scaleTime } from 'd3-scale';
 import { area, curveMonotoneY } from 'd3-shape';
 import { max } from 'lodash';
 import * as React from 'react';
-
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { LogEntriesSummaryBucket } from '@kbn/logs-shared-plugin/common';
 
 interface DensityChartProps {
@@ -65,16 +64,16 @@ export const DensityChart: React.FC<DensityChartProps> = ({
   );
 };
 
-const DensityChartPositiveBackground = euiStyled.rect`
+const DensityChartPositiveBackground = styled.rect`
   fill: ${(props) =>
-    props.theme.darkMode
-      ? props.theme.eui.euiColorLightShade
-      : props.theme.eui.euiColorLightestShade};
+    props.theme.colorMode === 'DARK'
+      ? props.theme.euiTheme.colors.lightShade
+      : props.theme.euiTheme.colors.lightestShade};
 `;
 
-const PositiveAreaPath = euiStyled.path`
+const PositiveAreaPath = styled.path`
   fill: ${(props) =>
-    props.theme.darkMode
-      ? props.theme.eui.euiColorMediumShade
-      : props.theme.eui.euiColorLightShade};
+    props.theme.colorMode === 'DARK'
+      ? props.theme.euiTheme.colors.mediumShade
+      : props.theme.euiTheme.colors.lightShade};
 `;

x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/highlighted_interval.tsx

@@ -6,8 +6,7 @@
  */
 
 import * as React from 'react';
-
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 
 interface HighlightedIntervalProps {
   className?: string;
@@ -53,14 +52,14 @@ export const HighlightedInterval: React.FC<HighlightedIntervalProps> = ({
 
 HighlightedInterval.displayName = 'HighlightedInterval';
 
-const HighlightTargetMarker = euiStyled.line`
-  stroke: ${(props) => props.theme.eui.euiColorPrimary};
+const HighlightTargetMarker = styled.line`
+  stroke: ${(props) => props.theme.euiTheme.colors.primary};
   stroke-width: 1;
 `;
 
-const HighlightPolygon = euiStyled.polygon`
-  fill: ${(props) => props.theme.eui.euiColorPrimary};
+const HighlightPolygon = styled.polygon`
+  fill: ${(props) => props.theme.euiTheme.colors.primary};
   fill-opacity: 0.3;
-  stroke: ${(props) => props.theme.eui.euiColorPrimary};
+  stroke: ${(props) => props.theme.euiTheme.colors.primary};
   stroke-width: 1;
 `;

x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/log_minimap.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import {
   LogEntriesSummaryBucket,
   LogEntriesSummaryHighlightsBucket,
@@ -157,23 +157,23 @@ export class LogMinimap extends React.Component<LogMinimapProps, LogMinimapState
   }
 }
 
-const MinimapBorder = euiStyled.line`
-  stroke: ${(props) => props.theme.eui.euiColorMediumShade};
+const MinimapBorder = styled.line`
+  stroke: ${(props) => props.theme.euiTheme.colors.mediumShade};
   stroke-width: 1px;
 `;
 
-const TimeCursor = euiStyled.line`
+const TimeCursor = styled.line`
   pointer-events: none;
   stroke-width: 1px;
   stroke: ${(props) =>
-    props.theme.darkMode
-      ? props.theme.eui.euiColorDarkestShade
-      : props.theme.eui.euiColorDarkShade};
+    props.theme.colorMode === 'DARK'
+      ? props.theme.euiTheme.colors.darkestShade
+      : props.theme.euiTheme.colors.darkShade};
 `;
 
-const MinimapWrapper = euiStyled.svg`
+const MinimapWrapper = styled.svg`
   cursor: pointer;
-  fill: ${(props) => props.theme.eui.euiColorEmptyShade};
+  fill: ${(props) => props.theme.euiTheme.colors.emptyShade};
   & ${TimeCursor} {
     visibility: hidden;
   }

x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/search_marker.tsx

@@ -6,7 +6,8 @@
  */
 
 import { FormattedMessage } from '@kbn/i18n-react';
-import { euiStyled, keyframes } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
 import { LogEntriesSummaryHighlightsBucket, LogEntryTime } from '@kbn/logs-shared-plugin/common';
 import * as React from 'react';
 import { SearchMarkerTooltip } from './search_marker_tooltip';
@@ -101,14 +102,14 @@ const fadeInAnimation = keyframes`
   }
 `;
 
-const SearchMarkerGroup = euiStyled.g`
-  animation: ${fadeInAnimation} ${(props) => props.theme.eui.euiAnimSpeedExtraSlow} ease-in both;
+const SearchMarkerGroup = styled.g`
+  animation: ${fadeInAnimation} ${(props) => props.theme.euiTheme.animation.extraSlow} ease-in both;
 `;
 
-const SearchMarkerBackgroundRect = euiStyled.rect`
-  fill: ${(props) => props.theme.eui.euiColorAccent};
+const SearchMarkerBackgroundRect = styled.rect`
+  fill: ${(props) => props.theme.euiTheme.colors.accent};
   opacity: 0;
-  transition: opacity ${(props) => props.theme.eui.euiAnimSpeedNormal} ease-in;
+  transition: opacity ${(props) => props.theme.euiTheme.animation.normal} ease-in;
   cursor: pointer;
 
   ${SearchMarkerGroup}:hover & {
@@ -116,6 +117,6 @@ const SearchMarkerBackgroundRect = euiStyled.rect`
   }
 `;
 
-const SearchMarkerForegroundRect = euiStyled.rect`
-  fill: ${(props) => props.theme.eui.euiColorAccent};
+const SearchMarkerForegroundRect = styled.rect`
+  fill: ${(props) => props.theme.euiTheme.colors.accent};
 `;

x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/time_ruler.tsx

@@ -7,8 +7,8 @@
 
 import { scaleTime } from 'd3-scale';
 import * as React from 'react';
-
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
+import { useEuiFontSize } from '@elastic/eui';
 import { useKibanaTimeZoneSetting } from '../../../hooks/use_kibana_time_zone_setting';
 import { getTimeLabelFormat } from './time_label_formatter';
 
@@ -59,19 +59,19 @@ export const TimeRuler: React.FC<TimeRulerProps> = ({ end, height, start, tickCo
 
 TimeRuler.displayName = 'TimeRuler';
 
-const TimeRulerTickLabel = euiStyled.text`
+const TimeRulerTickLabel = styled.text`
   font-size: 9px;
-  line-height: ${(props) => props.theme.eui.euiLineHeight};
-  fill: ${(props) => props.theme.eui.euiTextSubduedColor};
+  line-height: ${() => useEuiFontSize('s').lineHeight};
+  fill: ${(props) => props.theme.euiTheme.colors.textSubdued};
   user-select: none;
   pointer-events: none;
 `;
 
-const TimeRulerGridLine = euiStyled.line`
+const TimeRulerGridLine = styled.line`
   stroke: ${(props) =>
-    props.theme.darkMode
-      ? props.theme.eui.euiColorDarkestShade
-      : props.theme.eui.euiColorDarkShade};
+    props.theme.colorMode === 'DARK'
+      ? props.theme.euiTheme.colors.darkestShade
+      : props.theme.euiTheme.colors.darkShade};
   stroke-opacity: 0.5;
   stroke-width: 1px;
 `;

x-pack/plugins/observability_solution/infra/public/components/logging/log_search_controls/log_search_input.tsx

@@ -7,12 +7,10 @@
 
 import { EuiFieldSearch } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-
+import styled from '@emotion/styled';
 import classNames from 'classnames';
 import * as React from 'react';
 
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
-
 interface LogSearchInputProps {
   className?: string;
   isLoading: boolean;
@@ -77,11 +75,11 @@ export const LogSearchInput = class extends React.PureComponent<
   }
 };
 
-const PlainSearchField = euiStyled(EuiFieldSearch)`
+const PlainSearchField = styled(EuiFieldSearch)`
   background: transparent;
   box-shadow: none;
 
   &:focus {
-    box-shadow: inset 0 -2px 0 0 ${(props) => props.theme.eui.euiColorPrimary};
+    box-shadow: inset 0 -2px 0 0 ${(props) => props.theme.euiTheme.colors.primary};
   }
 `;

x-pack/plugins/observability_solution/infra/public/components/logging/log_statusbar.tsx

@@ -5,21 +5,29 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, type EuiFlexGroupProps, EuiFlexItem, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/css';
+import React from 'react';
 
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+export const LogStatusbar = (props: EuiFlexGroupProps) => {
+  const { euiTheme } = useEuiTheme();
 
-export const LogStatusbar = euiStyled(EuiFlexGroup).attrs(() => ({
-  alignItems: 'center',
-  gutterSize: 'none',
-  justifyContent: 'flexEnd',
-}))`
-  padding: ${(props) => props.theme.eui.euiSizeS};
-  border-top: ${(props) => props.theme.eui.euiBorderThin};
-  max-height: 48px;
-  min-height: 48px;
-  background-color: ${(props) => props.theme.eui.euiColorEmptyShade};
-  flex-direction: row;
-`;
+  return (
+    <EuiFlexGroup
+      alignItems="center"
+      gutterSize="none"
+      justifyContent="flexEnd"
+      css={css`
+        padding: ${euiTheme.size.s};
+        border-top: ${euiTheme.border.thin};
+        max-height: ${euiTheme.size.xxxl};
+        min-height: ${euiTheme.size.xxxl};
+        background-color: ${euiTheme.colors.emptyShade};
+        flex-direction: row;
+      `}
+      {...props}
+    />
+  );
+};
 
 export const LogStatusbarItem = EuiFlexItem;

x-pack/plugins/observability_solution/infra/public/components/logs_deprecation_callout.tsx

@@ -5,13 +5,12 @@
  * 2.0.
  */
 
-import { EuiCallOut } from '@elastic/eui';
+import { EuiCallOut, useEuiTheme } from '@elastic/eui';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiButton } from '@elastic/eui';
 import { getRouterLinkProps } from '@kbn/router-utils';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { css } from '@emotion/css';
 import { LocatorPublic } from '@kbn/share-plugin/common';
 import { DISCOVER_APP_LOCATOR, DiscoverAppLocatorParams } from '@kbn/discover-plugin/common';
@@ -48,6 +47,8 @@ export const LogsDeprecationCallout = ({ page }: LogsDeprecationCalloutProps) =>
     },
   } = useKibanaContextForPlugin();
 
+  const { euiTheme } = useEuiTheme();
+
   const { dismissalStorageKey, message } = pageConfigurations[page];
 
   const [isDismissed, setDismissed] = useLocalStorage(dismissalStorageKey, false);
@@ -67,7 +68,9 @@ export const LogsDeprecationCallout = ({ page }: LogsDeprecationCalloutProps) =>
       iconType="iInCircle"
       heading="h2"
       onDismiss={() => setDismissed(true)}
-      className={calloutStyle}
+      className={css`
+        margin-bottom: ${euiTheme.size.l};
+      `}
     >
       <p>{message}</p>
       <EuiButton
@@ -90,7 +93,3 @@ const getDiscoverLinkProps = (locator: LocatorPublic<DiscoverAppLocatorParams>)
     onClick: () => locator.navigate({}),
   });
 };
-
-const calloutStyle = css`
-  margin-bottom: ${euiThemeVars.euiSizeL};
-`;

x-pack/plugins/observability_solution/infra/public/components/page.tsx

@@ -6,24 +6,23 @@
  */
 
 import { EuiPage } from '@elastic/eui';
+import styled from '@emotion/styled';
 
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
-
-export const ColumnarPage = euiStyled.div`
+export const ColumnarPage = styled.div`
   display: flex;
   flex-direction: column;
   flex: 1 0 auto;
-  width: 100%
+  width: 100%;
 `;
 
-export const PageContent = euiStyled.div`
+export const PageContent = styled.div`
   flex: 1 0 0%;
   display: flex;
   flex-direction: row;
-  background-color: ${(props) => props.theme.eui.euiColorEmptyShade};
+  background-color: ${(props) => props.theme.euiTheme.colors.emptyShade};
 `;
 
-export const FlexPage = euiStyled(EuiPage)`
+export const FlexPage = styled(EuiPage)`
   align-self: stretch;
   flex: 1 0 0%;
 `;

x-pack/plugins/observability_solution/infra/public/pages/error.tsx

@@ -8,13 +8,12 @@
 import { EuiCallOut, EuiTitle, EuiPageTemplate } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import React from 'react';
-
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { ColumnarPage, PageContent } from '../components/page';
 
-const DetailPageContent = euiStyled(PageContent)`
+const DetailPageContent = styled(PageContent)`
   overflow: auto;
-  background-color: ${(props) => props.theme.eui.euiColorLightestShade};
+  background-color: ${(props) => props.theme.euiTheme.colors.lightestShade};
 `;
 
 interface Props {

x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/page_results_content.tsx

@@ -11,7 +11,7 @@ import { i18n } from '@kbn/i18n';
 import moment from 'moment';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import useInterval from 'react-use/lib/useInterval';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { MLJobsAwaitingNodeWarning, ML_PAGES, useMlHref } from '@kbn/ml-plugin/public';
 import { useTrackPageview } from '@kbn/observability-shared-plugin/public';
@@ -299,11 +299,11 @@ const stringToNumericTimeRange = (timeRange: StringTimeRange): TimeRange => ({
 
 // This is needed due to the flex-basis: 100% !important; rule that
 // kicks in on small screens via media queries breaking when using direction="column"
-export const ResultsContentPage = euiStyled(EuiPage)`
+export const ResultsContentPage = styled(EuiPage)`
   flex: 1 0 0%;
   flex-direction: column;
 
-  [class*="euiFlexGroup-responsive"] > .euiFlexItem {
+  [class*='euiFlexGroup-responsive'] > .euiFlexItem {
     flex-basis: auto !important;
   }
 `;

x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/sections/top_categories/datasets_list.tsx

@@ -6,8 +6,7 @@
  */
 
 import React from 'react';
-
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { LogEntryCategoryDataset } from '../../../../../../common/log_analysis';
 import { getFriendlyNameForPartitionId } from '../../../../../../common/log_analysis';
 
@@ -30,7 +29,7 @@ export const DatasetsList: React.FunctionComponent<{
  * These aim at aligning the list with the EuiHealth list in the neighboring
  * column.
  */
-const DatasetLabel = euiStyled.div`
+const DatasetLabel = styled.div`
   display: inline-block;
   margin-bottom: 2.5px;
   margin-top: 1px;

x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_comparison.tsx

@@ -9,8 +9,7 @@ import { EuiIcon, EuiTextColor } from '@elastic/eui';
 import numeral from '@elastic/numeral';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 
 export const SingleMetricComparison: React.FunctionComponent<{
   currentValue: number;
@@ -53,6 +52,6 @@ const newCategoryTrendLabel = i18n.translate(
   }
 );
 
-const NoWrapSpan = euiStyled.span`
+const NoWrapSpan = styled.span`
   white-space: nowrap;
 `;

x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/sections/top_categories/top_categories_table.tsx

@@ -10,8 +10,7 @@ import numeral from '@elastic/numeral';
 import { i18n } from '@kbn/i18n';
 import React, { useMemo, useCallback } from 'react';
 import useSet from 'react-use/lib/useSet';
-
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { PersistedLogViewReference } from '@kbn/logs-shared-plugin/common';
 import {
   categoriesSortRT,
@@ -29,7 +28,7 @@ import { DatasetsList } from './datasets_list';
 import { LogEntryCountSparkline } from './log_entry_count_sparkline';
 import { SortOptions, ChangeSortOptions } from '../../use_log_entry_categories_results';
 
-export const TopCategoriesTable = euiStyled(
+export const TopCategoriesTable = styled(
   ({
     categorizationJobId,
     className,

x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_rate/sections/anomalies/expanded_row.tsx

@@ -10,7 +10,7 @@ import numeral from '@elastic/numeral';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import useMount from 'react-use/lib/useMount';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { useLogViewContext } from '@kbn/logs-shared-plugin/public';
 import {
   isCategoryAnomaly,
@@ -139,6 +139,6 @@ export const AnomaliesTableExpandedRow: React.FunctionComponent<{
   );
 };
 
-const ExpandedContentWrapper = euiStyled(EuiFlexGroup)`
+const ExpandedContentWrapper = styled(EuiFlexGroup)`
   overflow: hidden;
 `;

x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_rate/sections/anomalies/log_entry_example.tsx

@@ -10,7 +10,7 @@ import moment from 'moment';
 import { encode } from '@kbn/rison';
 import { i18n } from '@kbn/i18n';
 import { useMlHref, ML_PAGES } from '@kbn/ml-plugin/public';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { useLinkProps, shouldHandleLinkEvent } from '@kbn/observability-shared-plugin/public';
 import {
   LogEntryColumn,
@@ -333,7 +333,7 @@ export const LogEntryExampleMessageHeaders: React.FunctionComponent<{
   );
 };
 
-const LogEntryExampleMessageHeadersWrapper = euiStyled(LogColumnHeadersWrapper)`
+const LogEntryExampleMessageHeadersWrapper = styled(LogColumnHeadersWrapper)`
   border-bottom: none;
   box-shadow: none;
   padding-right: 0;

x-pack/plugins/observability_solution/infra/public/pages/logs/settings/add_log_column_popover.tsx

@@ -16,7 +16,7 @@ import {
 import { FormattedMessage } from '@kbn/i18n-react';
 import React, { useCallback, useMemo } from 'react';
 import { v4 as uuidv4 } from 'uuid';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { LogColumnConfiguration } from '../../../utils/source_configuration';
 import { useVisibilityState } from '../../../hooks/use_visibility_state';
 
@@ -162,6 +162,6 @@ const SystemColumnBadge: React.FunctionComponent = () => (
   </EuiBadge>
 );
 
-const SelectableContent = euiStyled.div`
+const SelectableContent = styled.div`
   width: 400px;
 `;

x-pack/plugins/observability_solution/infra/public/pages/logs/stream/page_logs_content.tsx

@@ -7,7 +7,7 @@
 
 import { EuiSpacer } from '@elastic/eui';
 import type { Query } from '@kbn/es-query';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { LogEntry, convertISODateToNanoPrecision } from '@kbn/logs-shared-plugin/common';
 import {
   LogEntryFlyout,
@@ -341,7 +341,7 @@ export const StreamPageLogsContentForState = React.memo<{
   );
 });
 
-const LogPageMinimapColumn = euiStyled.div`
+const LogPageMinimapColumn = styled.div`
   flex: 1 0 0%;
   overflow: hidden;
   min-width: 100px;

x-pack/plugins/observability_solution/infra/public/pages/logs/stream/page_view_log_in_context.tsx

@@ -16,7 +16,7 @@ import {
 import { FormattedMessage } from '@kbn/i18n-react';
 import { isEmpty } from 'lodash';
 import React, { useCallback, useMemo } from 'react';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { LogEntry } from '@kbn/logs-shared-plugin/common';
 import { LogStream } from '@kbn/logs-shared-plugin/public';
 import { useViewLogInProviderContext } from '../../../containers/logs/view_log_in_context';
@@ -71,7 +71,7 @@ export const PageViewLogInContext: React.FC = () => {
   );
 };
 
-const LogInContextWrapper = euiStyled.div<{ width: number | string; height: number | string }>`
+const LogInContextWrapper = styled.div<{ width: number | string; height: number | string }>`
   padding: 16px;
   width: ${(props) => (typeof props.width === 'number' ? `${props.width}px` : props.width)};
   height: ${(props) => (typeof props.height === 'number' ? `${props.height}px` : props.height)};

x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/kpis/host_count_kpi.tsx

@@ -6,9 +6,9 @@
  */
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import { useTheme } from '@kbn/observability-shared-plugin/public';
 import { findInventoryModel } from '@kbn/metrics-data-access-plugin/common';
 import useAsync from 'react-use/lib/useAsync';
+import { useEuiTheme } from '@elastic/eui';
 import { KPI_CHART_HEIGHT, METRICS_TOOLTIP } from '../../../../../common/visualizations';
 import { useHostCountContext } from '../../hooks/use_host_count';
 import { useUnifiedSearchContext } from '../../hooks/use_unified_search';
@@ -19,13 +19,13 @@ export const HostCountKpi = () => {
   const inventoryModel = findInventoryModel('host');
   const { count, loading } = useHostCountContext();
   const { searchCriteria } = useUnifiedSearchContext();
-  const euiTheme = useTheme();
+  const { euiTheme } = useEuiTheme();
 
   const { value: formulas } = useAsync(() => inventoryModel.metrics.getFormulas());
 
   const hostsCountChart: Pick<Props, 'id' | 'color' | 'title'> = {
     id: 'hostsViewKPI-hostsCount',
-    color: euiTheme.eui.euiColorLightestShade,
+    color: euiTheme.colors.lightestShade,
     title: i18n.translate('xpack.infra.hostsViewPage.kpi.hostCount.title', {
       defaultMessage: 'Hosts',
     }),

x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/search_bar/controls_content.tsx

@@ -13,7 +13,7 @@ import {
 } from '@kbn/controls-plugin/public';
 import { DataView } from '@kbn/data-views-plugin/public';
 import type { Filter, Query, TimeRange } from '@kbn/es-query';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { useControlPanels } from '@kbn/observability-shared-plugin/public';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { Subscription } from 'rxjs';
@@ -104,8 +104,8 @@ export const ControlsContent: React.FC<Props> = ({
   );
 };
 
-const ControlGroupContainer = euiStyled.div`
+const ControlGroupContainer = styled.div`
   .controlGroup {
-    min-height: ${(props) => props.theme.eui.euiSizeXXL}
+    min-height: ${(props) => props.theme.euiTheme.size.xxl};
   }
 `;

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx

@@ -8,7 +8,7 @@
 import React, { useCallback, useState, useEffect, useRef } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty, EuiPanel } from '@elastic/eui';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { useUiTracker } from '@kbn/observability-shared-plugin/public';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
 import { InventoryItemType } from '@kbn/metrics-data-access-plugin/common';
@@ -117,19 +117,19 @@ export const BottomDrawer = ({ interval, formatter, view, nodeType }: Props) =>
   );
 };
 
-const BottomActionContainer = euiStyled.div`
+const BottomActionContainer = styled.div`
   position: sticky;
   bottom: 0;
   left: 0;
-  background: ${(props) => props.theme.eui.euiColorGhost};
-  width: calc(100% + ${(props) => props.theme.eui.euiSizeL} * 2);
-  margin-left: -${(props) => props.theme.eui.euiSizeL};
+  background: ${(props) => props.theme.euiTheme.colors.backgroundBasePlain};
+  width: calc(100% + ${(props) => props.theme.euiTheme.size.l} * 2);
+  margin-left: -${(props) => props.theme.euiTheme.size.l};
 `; // Additional width comes from the padding on the EuiPageBody and inner nodes container
 
-const BottomPanel = euiStyled(EuiPanel)`
-  padding: ${(props) => props.theme.eui.euiSizeL} 0;
+const BottomPanel = styled(EuiPanel)`
+  padding: ${(props) => props.theme.euiTheme.size.l} 0;
 `;
 
-const StickyPanel = euiStyled(EuiPanel)`
-  padding: 0 ${(props) => props.theme.eui.euiSizeL};
+const StickyPanel = styled(EuiPanel)`
+  padding: 0 ${(props) => props.theme.euiTheme.size.l};
 `;

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/dropdown_button.tsx

@@ -5,52 +5,58 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
+  withEuiTheme,
+  WithEuiThemeProps,
+  type EuiThemeComputed,
+} from '@elastic/eui';
 import React, { ReactNode } from 'react';
-import { withTheme, EuiTheme } from '@kbn/kibana-react-plugin/common';
 import { KubernetesTour } from './kubernetes_tour';
 
 interface Props {
   'data-test-subj'?: string;
   label: string;
   onClick: () => void;
-  theme: EuiTheme | undefined;
   children: ReactNode;
   showKubernetesInfo?: boolean;
 }
 
-const ButtonLabel = ({ label, theme }: { label: string; theme?: EuiTheme }) => (
+type PropsWithTheme = Props & WithEuiThemeProps;
+
+const ButtonLabel = ({ label, theme }: { label: string; theme?: EuiThemeComputed }) => (
   <EuiFlexItem
     grow={false}
     style={{
       padding: 12,
-      background: theme?.eui.euiFormInputGroupLabelBackground,
+      background: theme?.colors.backgroundBaseFormsPrepend,
       fontSize: '0.75em',
       fontWeight: 600,
-      color: theme?.eui.euiTitleColor,
+      color: theme?.colors.textHeading,
     }}
   >
     {label}
   </EuiFlexItem>
 );
 
-export const DropdownButton = withTheme((props: Props) => {
+export const DropdownButton = withEuiTheme((props: PropsWithTheme) => {
   const { onClick, label, theme, children, showKubernetesInfo } = props;
   return (
     <EuiFlexGroup
       alignItems="center"
       gutterSize="none"
       style={{
-        border: theme?.eui.euiFormInputGroupBorder,
-        boxShadow: `0px 3px 2px ${theme?.eui.euiTableActionsBorderColor}, 0px 1px 1px ${theme?.eui.euiTableActionsBorderColor}`,
+        border: theme?.euiTheme.border.thin,
       }}
     >
       {showKubernetesInfo ? (
         <KubernetesTour>
-          <ButtonLabel label={label} theme={theme} />
+          <ButtonLabel label={label} theme={theme.euiTheme} />
         </KubernetesTour>
       ) : (
-        <ButtonLabel label={label} theme={theme} />
+        <ButtonLabel label={label} theme={theme.euiTheme} />
       )}
       <EuiFlexItem grow={false}>
         <EuiButtonEmpty

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/layout.tsx

@@ -9,7 +9,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import useInterval from 'react-use/lib/useInterval';
 import { css } from '@emotion/react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { InventoryView } from '../../../../../common/inventory_views';
 import { SnapshotNode } from '../../../../../common/http_api';
 import { AutoSizer } from '../../../../components/auto_sizer';
@@ -197,6 +197,6 @@ export const Layout = React.memo(({ currentView, reload, interval, nodes, loadin
   );
 });
 
-const TopActionContainer = euiStyled(EuiFlexItem)`
-  padding: ${(props) => `${props.theme.eui.euiSizeM} 0`};
+const TopActionContainer = styled(EuiFlexItem)`
+  padding: ${(props) => `${props.theme.euiTheme.size.m} 0`};
 `;

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/nodes_overview.tsx

@@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
 import { usePerformanceContext } from '@kbn/ebt-tools';
 import React, { useCallback, useMemo } from 'react';
 import { useCurrentEuiBreakpoint } from '@elastic/eui';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { InventoryItemType } from '@kbn/metrics-data-access-plugin/common';
 import {
   InfraWaffleMapBounds,
@@ -196,11 +196,11 @@ export const NodesOverview = ({
   );
 };
 
-const TableContainer = euiStyled.div`
-  padding: ${(props) => props.theme.eui.euiSizeL};
+const TableContainer = styled.div`
+  padding: ${(props) => props.theme.euiTheme.size.l};
 `;
 
-const MapContainer = euiStyled.div<{ positionStatic: boolean }>`
+const MapContainer = styled.div<{ positionStatic: boolean }>`
   position: ${(props) => (props.positionStatic ? 'static' : 'absolute')};
   display: flex;
   top: 0;

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx

@@ -27,7 +27,7 @@ import {
 import { EuiFlexItem } from '@elastic/eui';
 import { EuiFlexGroup } from '@elastic/eui';
 import { EuiIcon } from '@elastic/eui';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { Metric } from '../../../../../../common/http_api/infra_ml';
 import { useTimelineChartTheme } from '../../../../../hooks/use_timeline_chart_theme';
 import { toMetricOpt } from '../../../../../../common/snapshot_metric_i18n';
@@ -298,32 +298,32 @@ export const Timeline: React.FC<Props> = ({ interval, yAxisFormatter, isVisible
   );
 };
 
-const TimelineContainer = euiStyled.div`
-  background-color: ${(props) => props.theme.eui.euiPageBackgroundColor};
-  border-top: 1px solid ${(props) => props.theme.eui.euiColorLightShade};
+const TimelineContainer = styled.div`
+  background-color: ${(props) => props.theme.euiTheme.colors.body};
+  border-top: 1px solid ${(props) => props.theme.euiTheme.colors.lightShade};
   height: 220px;
   width: 100%;
-  padding: ${(props) => props.theme.eui.euiSizeS} ${(props) => props.theme.eui.euiSizeM};
+  padding: ${(props) => props.theme.euiTheme.size.s} ${(props) => props.theme.euiTheme.size.m};
   display: flex;
   flex-direction: column;
 `;
 
-const TimelineHeader = euiStyled.div`
+const TimelineHeader = styled.div`
   display: flex;
   width: 100%;
-  padding: ${(props) => props.theme.eui.euiSizeS} ${(props) => props.theme.eui.euiSizeM};
+  padding: ${(props) => props.theme.euiTheme.size.s} ${(props) => props.theme.euiTheme.size.m};
   @media only screen and (max-width: 767px) {
-      margin-top: 30px;
+    margin-top: 30px;
   }
 `;
 
-const TimelineChartContainer = euiStyled.div`
-  padding-left: ${(props) => props.theme.eui.euiSizeXS};
+const TimelineChartContainer = styled.div`
+  padding-left: ${(props) => props.theme.euiTheme.size.xs};
   width: 100%;
   height: 100%;
 `;
 
-const TimelineLoadingContainer = euiStyled.div`
+const TimelineLoadingContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/gradient_legend.tsx

@@ -6,8 +6,7 @@
  */
 
 import React from 'react';
-
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import {
   InfraFormatter,
   InfraWaffleMapBounds,
@@ -53,7 +52,7 @@ export const GradientLegend: React.FC<Props> = ({ legend, bounds, formatter }) =
   );
 };
 
-const GradientLegendContainer = euiStyled.div`
+const GradientLegendContainer = styled.div`
   position: absolute;
   height: 10px;
   bottom: 0;
@@ -61,15 +60,15 @@ const GradientLegendContainer = euiStyled.div`
   right: 40px;
 `;
 
-const GradientLegendTick = euiStyled.div`
+const GradientLegendTick = styled.div`
   position: absolute;
   bottom: 0;
   top: -18px;
 `;
 
-const GradientLegendTickLine = euiStyled.div`
+const GradientLegendTickLine = styled.div`
   position: absolute;
-  background-color: ${(props) => props.theme.eui.euiBorderColor};
+  background-color: ${(props) => props.theme.euiTheme.border.color};
   width: 1px;
   left: 0;
   top: 15px;
@@ -82,7 +81,7 @@ const GradientLegendTickLine = euiStyled.div`
   }
 `;
 
-const GradientLegendTickLabel = euiStyled.div`
+const GradientLegendTickLabel = styled.div`
   position: absolute;
   font-size: 11px;
   text-align: center;

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_name.tsx

@@ -7,8 +7,7 @@
 
 import { EuiLink, EuiToolTip } from '@elastic/eui';
 import React from 'react';
-
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { InfraWaffleMapGroup, InfraWaffleMapOptions } from '../../../../../common/inventory/types';
 
 interface Props {
@@ -56,7 +55,7 @@ export class GroupName extends React.PureComponent<Props, {}> {
   };
 }
 
-const GroupNameContainer = euiStyled.div`
+const GroupNameContainer = styled.div`
   position: relative;
   text-align: center;
   font-size: 16px;
@@ -71,19 +70,21 @@ interface InnerProps {
   isChild?: boolean;
 }
 
-const Inner = euiStyled.div<InnerProps>`
-  border: 1px solid ${(props) => props.theme.eui.euiBorderColor};
+const Inner = styled.div<InnerProps>`
+  border: ${(props) => props.theme.euiTheme.border.thin};
   background-color: ${(props) =>
-    props.isChild ? props.theme.eui.euiColorLightestShade : props.theme.eui.euiColorEmptyShade};
+    props.isChild
+      ? props.theme.euiTheme.colors.lightestShade
+      : props.theme.euiTheme.colors.emptyShade};
   border-radius: 4px;
-  box-shadow: 0px 2px 0px 0px ${(props) => props.theme.eui.euiBorderColor};
+  box-shadow: 0px 2px 0px 0px ${(props) => props.theme.euiTheme.border.color};
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
 `;
 
-const Name = euiStyled.div`
+const Name = styled.div`
   flex: 1 1 auto;
   padding: 6px 10px;
   overflow: hidden;
@@ -91,9 +92,9 @@ const Name = euiStyled.div`
   white-space: nowrap;
 `;
 
-const Count = euiStyled.div`
+const Count = styled.div`
   flex: 0 0 auto;
-  border-left: 1px solid ${(props) => props.theme.eui.euiBorderColor};
+  border-left: ${(props) => props.theme.euiTheme.border.thin};
   padding: 6px 10px;
   font-size: 0.85em;
   font-weight: normal;

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_of_groups.tsx

@@ -6,8 +6,7 @@
  */
 
 import React from 'react';
-
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { InventoryItemType } from '@kbn/metrics-data-access-plugin/common';
 import {
   InfraWaffleMapBounds,
@@ -52,18 +51,18 @@ export const GroupOfGroups: React.FC<Props> = (props) => {
   );
 };
 
-const GroupOfGroupsContainer = euiStyled.div`
+const GroupOfGroupsContainer = styled.div`
   margin: 0 10px;
   width: 100%;
 `;
 
-const Groups = euiStyled.div`
+const Groups = styled.div`
   display: flex;
   background-color: rgba(0, 0, 0, 0.05);
   flex-wrap: wrap;
   justify-content: center;
   padding: 20px 10px 10px;
   border-radius: 4px;
-  border: 1px solid ${(props) => props.theme.eui.euiBorderColor};
+  border: 1px solid ${(props) => props.theme.euiTheme.border.color};
   box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1);
 `;

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_of_nodes.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { EuiLoadingSpinner } from '@elastic/eui';
 import { isEqual } from 'lodash';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { InventoryItemType } from '@kbn/metrics-data-access-plugin/common';
 import {
   InfraWaffleMapBounds,
@@ -87,17 +87,17 @@ export const GroupOfNodes = React.memo<Props>(
   isEqualGroupOfNodes
 );
 
-const GroupOfNodesContainer = euiStyled.div`
+const GroupOfNodesContainer = styled.div`
   margin: 0 10px;
 `;
 
-const Nodes = euiStyled.div`
+const Nodes = styled.div`
   display: flex;
   background-color: rgba(0, 0, 0, 0.05);
   flex-wrap: wrap;
   justify-content: center;
   padding: 20px 10px 10px;
   border-radius: 4px;
-  border: 1px solid ${(props) => props.theme.eui.euiBorderColor};
+  border: 1px solid ${(props) => props.theme.euiTheme.border.color};
   box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1);
 `;

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/legend.tsx

@@ -6,8 +6,7 @@
  */
 
 import React from 'react';
-
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import {
   InfraFormatter,
   InfraWaffleMapBounds,
@@ -40,7 +39,7 @@ export const Legend: React.FC<Props> = ({ legend, bounds, formatter }) => {
   );
 };
 
-const LegendContainer = euiStyled.div`
+const LegendContainer = styled.div`
   margin: 0 10px;
   display: flex;
 `;

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/legend_controls.tsx

@@ -24,7 +24,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import React, { SyntheticEvent, useState, useCallback, useEffect } from 'react';
 import { first, last } from 'lodash';
 import { EuiRangeProps, EuiSelectProps } from '@elastic/eui';
@@ -378,7 +378,7 @@ export const LegendControls = ({
   );
 };
 
-const StyledEuiForm = euiStyled(EuiForm)`
+const StyledEuiForm = styled(EuiForm)`
   min-width: 400px;
   @media (max-width: 480px) {
     min-width: 100%;

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/map.tsx

@@ -6,8 +6,7 @@
  */
 
 import React from 'react';
-
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { InventoryItemType } from '@kbn/metrics-data-access-plugin/common';
 import { nodesToWaffleMap } from '../../lib/nodes_to_wafflemap';
 import { isWaffleMapGroupWithGroups, isWaffleMapGroupWithNodes } from '../../lib/type_guards';
@@ -99,7 +98,7 @@ export const Map: React.FC<Props> = ({
   );
 };
 
-const WaffleMapOuterContainer = euiStyled.div<{ bottomMargin: number; staticHeight: boolean }>`
+const WaffleMapOuterContainer = styled.div<{ bottomMargin: number; staticHeight: boolean }>`
   flex: 1 0 0%;
   display: flex;
   justify-content: flex-start;
@@ -111,7 +110,7 @@ const WaffleMapOuterContainer = euiStyled.div<{ bottomMargin: number; staticHeig
   ${(props) => props.staticHeight && 'min-height: 300px;'}
 `;
 
-const WaffleMapInnerContainer = euiStyled.div`
+const WaffleMapInnerContainer = styled.div`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/custom_metric_form.tsx

@@ -19,10 +19,11 @@ import {
   EuiFlexItem,
   EuiText,
   EuiPopoverTitle,
+  WithEuiThemeProps,
+  withEuiTheme,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiTheme, withTheme } from '@kbn/kibana-react-plugin/common';
 import {
   SnapshotCustomAggregation,
   SnapshotCustomMetricInput,
@@ -51,204 +52,210 @@ const AGGREGATION_LABELS = {
 };
 
 interface Props {
-  theme: EuiTheme | undefined;
   metric?: SnapshotCustomMetricInput;
   customMetrics: SnapshotCustomMetricInput[];
   onChange: (metric: SnapshotCustomMetricInput) => void;
   onCancel: () => void;
 }
 
-export const CustomMetricForm = withTheme(({ theme, onCancel, onChange, metric }: Props) => {
-  const { metricsView } = useMetricsDataViewContext();
-  const [label, setLabel] = useState<string | undefined>(metric ? metric.label : void 0);
-  const [aggregation, setAggregation] = useState<SnapshotCustomAggregation>(
-    metric ? metric.aggregation : 'avg'
-  );
-  const [field, setField] = useState<string | undefined>(metric ? metric.field : void 0);
+type PropsWithTheme = Props & WithEuiThemeProps;
 
-  const handleSubmit = useCallback(() => {
-    if (metric && aggregation && field) {
-      onChange({
-        ...metric,
-        label,
-        aggregation,
-        field,
-      });
-    } else if (aggregation && field) {
-      const newMetric: SnapshotCustomMetricInput = {
-        type: 'custom',
-        id: uuidv4(),
-        label,
-        aggregation,
-        field,
-      };
-      onChange(newMetric);
-    }
-  }, [metric, aggregation, field, onChange, label]);
+export const CustomMetricForm = withEuiTheme(
+  ({ theme, onCancel, onChange, metric }: PropsWithTheme) => {
+    const { metricsView } = useMetricsDataViewContext();
+    const [label, setLabel] = useState<string | undefined>(metric ? metric.label : void 0);
+    const [aggregation, setAggregation] = useState<SnapshotCustomAggregation>(
+      metric ? metric.aggregation : 'avg'
+    );
+    const [field, setField] = useState<string | undefined>(metric ? metric.field : void 0);
 
-  const handleLabelChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      setLabel(e.target.value);
-    },
-    [setLabel]
-  );
+    const handleSubmit = useCallback(() => {
+      if (metric && aggregation && field) {
+        onChange({
+          ...metric,
+          label,
+          aggregation,
+          field,
+        });
+      } else if (aggregation && field) {
+        const newMetric: SnapshotCustomMetricInput = {
+          type: 'custom',
+          id: uuidv4(),
+          label,
+          aggregation,
+          field,
+        };
+        onChange(newMetric);
+      }
+    }, [metric, aggregation, field, onChange, label]);
 
-  const handleFieldChange = useCallback(
-    (selectedOptions: SelectedOption[]) => {
-      setField(selectedOptions[0].label);
-    },
-    [setField]
-  );
+    const handleLabelChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        setLabel(e.target.value);
+      },
+      [setLabel]
+    );
 
-  const handleAggregationChange = useCallback(
-    (e: React.ChangeEvent<HTMLSelectElement>) => {
-      const value = e.target.value;
-      const aggValue: SnapshotCustomAggregation = SnapshotCustomAggregationRT.is(value)
-        ? value
-        : 'avg';
-      setAggregation(aggValue);
-    },
-    [setAggregation]
-  );
+    const handleFieldChange = useCallback(
+      (selectedOptions: SelectedOption[]) => {
+        setField(selectedOptions[0].label);
+      },
+      [setField]
+    );
 
-  const fieldOptions = (metricsView?.fields ?? [])
-    .filter((f) => f.aggregatable && f.type === 'number' && !(field && field === f.name))
-    .map((f) => ({ label: f.name }));
+    const handleAggregationChange = useCallback(
+      (e: React.ChangeEvent<HTMLSelectElement>) => {
+        const value = e.target.value;
+        const aggValue: SnapshotCustomAggregation = SnapshotCustomAggregationRT.is(value)
+          ? value
+          : 'avg';
+        setAggregation(aggValue);
+      },
+      [setAggregation]
+    );
 
-  const aggregationOptions = SNAPSHOT_CUSTOM_AGGREGATIONS.map((k) => ({
-    text: AGGREGATION_LABELS[k as SnapshotCustomAggregation],
-    value: k,
-  }));
+    const fieldOptions = (metricsView?.fields ?? [])
+      .filter((f) => f.aggregatable && f.type === 'number' && !(field && field === f.name))
+      .map((f) => ({ label: f.name }));
 
-  const isSubmitDisabled = !field || !aggregation;
+    const aggregationOptions = SNAPSHOT_CUSTOM_AGGREGATIONS.map((k) => ({
+      text: AGGREGATION_LABELS[k as SnapshotCustomAggregation],
+      value: k,
+    }));
 
-  const title = metric
-    ? i18n.translate('xpack.infra.waffle.customMetricPanelLabel.edit', {
-        defaultMessage: 'Edit custom metric',
-      })
-    : i18n.translate('xpack.infra.waffle.customMetricPanelLabel.add', {
-        defaultMessage: 'Add custom metric',
-      });
+    const isSubmitDisabled = !field || !aggregation;
 
-  const titleAriaLabel = metric
-    ? i18n.translate('xpack.infra.waffle.customMetricPanelLabel.editAriaLabel', {
-        defaultMessage: 'Back to custom metrics edit mode',
-      })
-    : i18n.translate('xpack.infra.waffle.customMetricPanelLabel.addAriaLabel', {
-        defaultMessage: 'Back to metric picker',
-      });
+    const title = metric
+      ? i18n.translate('xpack.infra.waffle.customMetricPanelLabel.edit', {
+          defaultMessage: 'Edit custom metric',
+        })
+      : i18n.translate('xpack.infra.waffle.customMetricPanelLabel.add', {
+          defaultMessage: 'Add custom metric',
+        });
 
-  return (
-    <div style={{ width: 685 }}>
-      <EuiForm>
-        <EuiPopoverTitle>
-          <EuiButtonEmpty
-            data-test-subj="infraCustomMetricFormButton"
-            iconType="arrowLeft"
-            onClick={onCancel}
-            color="text"
-            size="xs"
-            flush="left"
-            style={{ fontWeight: 700, textTransform: 'uppercase' }}
-            aria-label={titleAriaLabel}
+    const titleAriaLabel = metric
+      ? i18n.translate('xpack.infra.waffle.customMetricPanelLabel.editAriaLabel', {
+          defaultMessage: 'Back to custom metrics edit mode',
+        })
+      : i18n.translate('xpack.infra.waffle.customMetricPanelLabel.addAriaLabel', {
+          defaultMessage: 'Back to metric picker',
+        });
+
+    return (
+      <div style={{ width: 685 }}>
+        <EuiForm>
+          <EuiPopoverTitle>
+            <EuiButtonEmpty
+              data-test-subj="infraCustomMetricFormButton"
+              iconType="arrowLeft"
+              onClick={onCancel}
+              color="text"
+              size="xs"
+              flush="left"
+              style={{ fontWeight: 700, textTransform: 'uppercase' }}
+              aria-label={titleAriaLabel}
+            >
+              {title}
+            </EuiButtonEmpty>
+          </EuiPopoverTitle>
+          <div
+            style={{
+              padding: theme?.euiTheme.size.m,
+              borderBottom: `${theme?.euiTheme.border.thin}`,
+            }}
           >
-            {title}
-          </EuiButtonEmpty>
-        </EuiPopoverTitle>
-        <div
-          style={{
-            padding: theme?.eui.euiSizeM,
-            borderBottom: `${theme?.eui.euiBorderWidthThin} solid ${theme?.eui.euiBorderColor}`,
-          }}
-        >
-          <EuiFormRow
-            label={i18n.translate('xpack.infra.waffle.customMetrics.metricLabel', {
-              defaultMessage: 'Metric',
-            })}
-            display="rowCompressed"
-            fullWidth
-          >
-            <EuiFlexGroup alignItems="center" gutterSize="s">
-              <EuiFlexItem grow={false}>
-                <EuiSelect
-                  data-test-subj="infraCustomMetricFormSelect"
-                  onChange={handleAggregationChange}
-                  value={aggregation}
-                  options={aggregationOptions}
-                  fullWidth
-                />
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiText color="subdued">
-                  <span>
-                    {i18n.translate('xpack.infra.waffle.customMetrics.ofLabel', {
-                      defaultMessage: 'of',
-                    })}
-                  </span>
-                </EuiText>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <EuiComboBox
-                  fullWidth
-                  placeholder={i18n.translate('xpack.infra.waffle.customMetrics.fieldPlaceholder', {
-                    defaultMessage: 'Select a field',
-                  })}
-                  singleSelection={{ asPlainText: true }}
-                  selectedOptions={field ? [{ label: field }] : []}
-                  options={fieldOptions}
-                  onChange={handleFieldChange}
-                  isClearable={false}
-                  data-test-subj="infraCustomMetricFieldSelect"
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFormRow>
-          <EuiFormRow
-            label={i18n.translate('xpack.infra.waffle.customMetrics.labelLabel', {
-              defaultMessage: 'Label (optional)',
-            })}
-            display="rowCompressed"
-            fullWidth
-          >
-            <EuiFieldText
-              data-test-subj="infraCustomMetricFormFieldText"
-              name="label"
-              placeholder={i18n.translate('xpack.infra.waffle.customMetrics.labelPlaceholder', {
-                defaultMessage: 'Choose a name to appear in the "Metric" dropdown',
+            <EuiFormRow
+              label={i18n.translate('xpack.infra.waffle.customMetrics.metricLabel', {
+                defaultMessage: 'Metric',
               })}
-              value={label}
+              display="rowCompressed"
               fullWidth
-              onChange={handleLabelChange}
-            />
-          </EuiFormRow>
-        </div>
-        <div style={{ padding: theme?.eui.euiSizeM, textAlign: 'right' }}>
-          <EuiButtonEmpty
-            data-test-subj="infraCustomMetricFormCancelButton"
-            onClick={onCancel}
-            size="s"
-            style={{ paddingRight: theme?.eui.euiSizeXL }}
-          >
-            <FormattedMessage
-              id="xpack.infra.waffle.customMetrics.cancelLabel"
-              defaultMessage="Cancel"
-            />
-          </EuiButtonEmpty>
-          <EuiButton
-            data-test-subj="infraCustomMetricFormSaveButton"
-            type="submit"
-            size="s"
-            fill
-            onClick={handleSubmit}
-            disabled={isSubmitDisabled}
-          >
-            <FormattedMessage
-              id="xpack.infra.waffle.customMetrics.submitLabel"
-              defaultMessage="Save"
-            />
-          </EuiButton>
-        </div>
-      </EuiForm>
-    </div>
-  );
-});
+            >
+              <EuiFlexGroup alignItems="center" gutterSize="s">
+                <EuiFlexItem grow={false}>
+                  <EuiSelect
+                    data-test-subj="infraCustomMetricFormSelect"
+                    onChange={handleAggregationChange}
+                    value={aggregation}
+                    options={aggregationOptions}
+                    fullWidth
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiText color="subdued">
+                    <span>
+                      {i18n.translate('xpack.infra.waffle.customMetrics.ofLabel', {
+                        defaultMessage: 'of',
+                      })}
+                    </span>
+                  </EuiText>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiComboBox
+                    fullWidth
+                    placeholder={i18n.translate(
+                      'xpack.infra.waffle.customMetrics.fieldPlaceholder',
+                      {
+                        defaultMessage: 'Select a field',
+                      }
+                    )}
+                    singleSelection={{ asPlainText: true }}
+                    selectedOptions={field ? [{ label: field }] : []}
+                    options={fieldOptions}
+                    onChange={handleFieldChange}
+                    isClearable={false}
+                    data-test-subj="infraCustomMetricFieldSelect"
+                  />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFormRow>
+            <EuiFormRow
+              label={i18n.translate('xpack.infra.waffle.customMetrics.labelLabel', {
+                defaultMessage: 'Label (optional)',
+              })}
+              display="rowCompressed"
+              fullWidth
+            >
+              <EuiFieldText
+                data-test-subj="infraCustomMetricFormFieldText"
+                name="label"
+                placeholder={i18n.translate('xpack.infra.waffle.customMetrics.labelPlaceholder', {
+                  defaultMessage: 'Choose a name to appear in the "Metric" dropdown',
+                })}
+                value={label}
+                fullWidth
+                onChange={handleLabelChange}
+              />
+            </EuiFormRow>
+          </div>
+          <div style={{ padding: theme?.euiTheme.size.m, textAlign: 'right' }}>
+            <EuiButtonEmpty
+              data-test-subj="infraCustomMetricFormCancelButton"
+              onClick={onCancel}
+              size="s"
+              style={{ paddingRight: theme?.euiTheme.size.xl }}
+            >
+              <FormattedMessage
+                id="xpack.infra.waffle.customMetrics.cancelLabel"
+                defaultMessage="Cancel"
+              />
+            </EuiButtonEmpty>
+            <EuiButton
+              data-test-subj="infraCustomMetricFormSaveButton"
+              type="submit"
+              size="s"
+              fill
+              onClick={handleSubmit}
+              disabled={isSubmitDisabled}
+            >
+              <FormattedMessage
+                id="xpack.infra.waffle.customMetrics.submitLabel"
+                defaultMessage="Save"
+              />
+            </EuiButton>
+          </div>
+        </EuiForm>
+      </div>
+    );
+  }
+);

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/metrics_edit_mode.tsx

@@ -6,28 +6,35 @@
  */
 
 import React from 'react';
-import { EuiFlexItem, EuiFlexGroup, EuiButtonIcon } from '@elastic/eui';
+import {
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiButtonIcon,
+  withEuiTheme,
+  type WithEuiThemeProps,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { EuiTheme, withTheme } from '@kbn/kibana-react-plugin/common';
 import { getCustomMetricLabel } from '../../../../../../../common/formatters/get_custom_metric_label';
 import { SnapshotCustomMetricInput } from '../../../../../../../common/http_api/snapshot_api';
 
 interface Props {
-  theme: EuiTheme | undefined;
   customMetrics: SnapshotCustomMetricInput[];
   options: Array<{ text: string; value: string }>;
   onEdit: (metric: SnapshotCustomMetricInput) => void;
   onDelete: (metric: SnapshotCustomMetricInput) => void;
 }
+
+type PropsWithTheme = Props & WithEuiThemeProps;
+
 const ICON_WIDTH = 36;
 
-export const MetricsEditMode = withTheme(
-  ({ theme, customMetrics, options, onEdit, onDelete }: Props) => {
+export const MetricsEditMode = withEuiTheme(
+  ({ theme, customMetrics, options, onEdit, onDelete }: PropsWithTheme) => {
     return (
       <div style={{ width: 256 }}>
         {options.map((option) => (
           <div key={option.value} style={{ padding: '14px 14px 13px 36px' }}>
-            <span style={{ color: theme?.eui.euiButtonColorDisabled }}>{option.text}</span>
+            <span style={{ color: theme?.euiTheme.colors.disabled }}>{option.text}</span>
           </div>
         ))}
         {customMetrics.map((metric) => (

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/node_context_menu.tsx

@@ -5,12 +5,11 @@
  * 2.0.
  */
 
-import { EuiCode } from '@elastic/eui';
+import { EuiCode, type WithEuiThemeProps, withEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
 import React, { useMemo, useState } from 'react';
-import { withTheme, EuiTheme } from '@kbn/kibana-react-plugin/common';
 import {
   Section,
   SectionLinkProps,
@@ -40,9 +39,10 @@ interface Props {
   node: InfraWaffleMapNode;
   nodeType: InventoryItemType;
 }
+type PropsWithTheme = Props & WithEuiThemeProps;
 
-export const NodeContextMenu: React.FC<Props & { theme?: EuiTheme }> = withTheme(
-  ({ options, currentTime, node, nodeType }) => {
+export const NodeContextMenu = withEuiTheme(
+  ({ options, currentTime, node, nodeType }: PropsWithTheme) => {
     const { getAssetDetailUrl } = useAssetDetailsRedirect();
     const [flyoutVisible, setFlyoutVisible] = useState(false);
     const inventoryModel = findInventoryModel(nodeType);

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/node_square.tsx

@@ -7,12 +7,10 @@
 
 import { darken, readableColor } from 'polished';
 import React, { CSSProperties } from 'react';
-
 import { i18n } from '@kbn/i18n';
-
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { UseBooleanHandlers } from '@kbn/react-hooks';
+import { useEuiTheme } from '@elastic/eui';
 
 type NodeProps<T = HTMLDivElement> = React.DetailedHTMLProps<React.HTMLAttributes<T>, T> & {
   'data-test-subj'?: string;
@@ -66,35 +64,38 @@ const NodeContainerSmall = ({ children, ...props }: NodeProps & { color: string
     {children}
   </div>
 );
-const ValueInner = ({ children, ...props }: NodeProps) => (
-  <div
-    css={css`
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      display: flex;
-      line-height: 1.2em;
-      align-items: center;
-      align-content: center;
-      padding: 1em;
-      overflow: hidden;
-      flex-wrap: wrap;
-      width: 100%;
-      border: none;
-      &:focus {
-        outline: none !important;
-        border: ${euiThemeVars.euiFocusRingSize} solid ${euiThemeVars.euiFocusRingColor};
-        box-shadow: none;
-      }
-    `}
-    tabIndex={0}
-    {...props}
-  >
-    {children}
-  </div>
-);
+const ValueInner = ({ children, ...props }: NodeProps) => {
+  const { euiTheme } = useEuiTheme();
+  return (
+    <div
+      css={css`
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        line-height: 1.2em;
+        align-items: center;
+        align-content: center;
+        padding: 1em;
+        overflow: hidden;
+        flex-wrap: wrap;
+        width: 100%;
+        border: none;
+        &:focus {
+          outline: none !important;
+          border: ${euiTheme.focus.width} solid ${euiTheme.focus.color};
+          box-shadow: none;
+        }
+      `}
+      tabIndex={0}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
 const SquareOuter = ({ children, ...props }: NodeProps & { color: string }) => (
   <div
     css={css`

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/palette_preview.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import type { InventoryColorPalette } from '../../../../../common/inventory/types';
 import { getColorPalette } from '../../lib/get_color_palette';
 
@@ -27,19 +27,19 @@ export const PalettePreview = ({ steps, palette, reverse }: Props) => {
   );
 };
 
-const Swatch = euiStyled.div`
+const Swatch = styled.div`
   max-width: 15px;
   height: 12px;
   flex: 1 1 auto;
   &:first-child {
-    border-radius: ${(props) => props.theme.eui.euiBorderRadius} 0 0 ${(props) =>
-  props.theme.eui.euiBorderRadius};
+    border-radius: ${(props) => props.theme.euiTheme.border.radius} 0 0 ${(props) =>
+  props.theme.euiTheme.border.radius};
   }
   &:last-child {
-    border-radius: 0 ${(props) => props.theme.eui.euiBorderRadius} ${(props) =>
-  props.theme.eui.euiBorderRadius} 0;
+    border-radius: 0 ${(props) => props.theme.euiTheme.border.radius} ${(props) =>
+  props.theme.euiTheme.border.radius} 0;
 `;
 
-const Swatches = euiStyled.div`
+const Swatches = styled.div`
   display: flex;
 `;

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/stepped_gradient_legend.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { EuiText } from '@elastic/eui';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import {
   InfraWaffleMapBounds,
   InfraFormatter,
@@ -56,7 +56,7 @@ const TickLabel = ({ value, bounds, formatter }: TickProps) => {
   );
 };
 
-const LegendContainer = euiStyled.div`
+const LegendContainer = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -64,7 +64,7 @@ const LegendContainer = euiStyled.div`
   align-items: center;
 `;
 
-const GradientContainer = euiStyled.div`
+const GradientContainer = styled.div`
   height: 200px;
   width: 10px;
   display: flex;
@@ -72,14 +72,14 @@ const GradientContainer = euiStyled.div`
   align-items: stretch;
 `;
 
-const GradientStep = euiStyled.div`
+const GradientStep = styled.div`
   flex: 1 1 auto;
   &:first-child {
-    border-radius: ${(props) => props.theme.eui.euiBorderRadius} ${(props) =>
-  props.theme.eui.euiBorderRadius} 0 0;
+    border-radius: ${(props) => props.theme.euiTheme.border.radius}
+      ${(props) => props.theme.euiTheme.border.radius} 0 0;
   }
   &:last-child {
-    border-radius: 0 0 ${(props) => props.theme.eui.euiBorderRadius} ${(props) =>
-  props.theme.eui.euiBorderRadius};
+    border-radius: 0 0 ${(props) => props.theme.euiTheme.border.radius}
+      ${(props) => props.theme.euiTheme.border.radius};
   }
 `;

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/steps_legend.tsx

@@ -7,8 +7,7 @@
 
 import { darken } from 'polished';
 import React from 'react';
-
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import {
   InfraFormatter,
   InfraWaffleMapRuleOperator,
@@ -48,18 +47,18 @@ export const StepLegend: React.FC<Props> = ({ legend, formatter }) => {
   return <StepLegendContainer>{legend.rules.map(createStep(formatter))}</StepLegendContainer>;
 };
 
-const StepLegendContainer = euiStyled.div`
+const StepLegendContainer = styled.div`
   display: flex;
   padding: 10px 40px 10px 10px;
 `;
 
-const StepContainer = euiStyled.div`
+const StepContainer = styled.div`
   display: flex;
   margin-right: 20px
   align-items: center;
 `;
 
-const StepSquare = euiStyled.div`
+const StepSquare = styled.div`
   position: relative;
   width: 24px;
   height: 24px;
@@ -69,7 +68,7 @@ const StepSquare = euiStyled.div`
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
 `;
 
-const StepSquareInner = euiStyled.div`
+const StepSquareInner = styled.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -78,6 +77,6 @@ const StepSquareInner = euiStyled.div`
   border-radius: 3px;
 `;
 
-const StepLabel = euiStyled.div`
+const StepLabel = styled.div`
   font-size: 12px;
 `;

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/waffle_sort_controls.tsx

@@ -6,9 +6,15 @@
  */
 
 import React, { useCallback, useMemo, useState, ReactNode } from 'react';
-import { EuiSwitch, EuiContextMenuPanelDescriptor, EuiPopover, EuiContextMenu } from '@elastic/eui';
+import {
+  EuiSwitch,
+  EuiContextMenuPanelDescriptor,
+  EuiPopover,
+  EuiContextMenu,
+  withEuiTheme,
+  WithEuiThemeProps,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { EuiTheme, withTheme } from '@kbn/kibana-react-plugin/common';
 import { WaffleSortOption } from '../../hooks/use_waffle_options';
 import { DropdownButton } from '../dropdown_button';
 
@@ -108,16 +114,17 @@ export const WaffleSortControls = ({ sort, onChange }: Props) => {
 };
 
 interface SwitchContainerProps {
-  theme: EuiTheme | undefined;
   children: ReactNode;
 }
 
-const SwitchContainer = withTheme(({ children, theme }: SwitchContainerProps) => {
+type SwitchContainerPropsWithTheme = SwitchContainerProps & WithEuiThemeProps;
+
+const SwitchContainer = withEuiTheme(({ children, theme }: SwitchContainerPropsWithTheme) => {
   return (
     <div
       style={{
-        padding: theme?.eui.euiSizeM,
-        borderTop: `1px solid ${theme?.eui.euiBorderColor}`,
+        padding: theme?.euiTheme.size.m,
+        borderTop: `${theme?.euiTheme.border.thin}`,
       }}
     >
       {children}

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/waffle_time_controls.tsx

@@ -5,20 +5,28 @@
  * 2.0.
  */
 
-import { EuiButton, EuiDatePicker, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiDatePicker,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiToolTip,
+  WithEuiThemeProps,
+  withEuiTheme,
+} from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import moment, { Moment } from 'moment';
 import React, { useCallback } from 'react';
-import { withTheme, EuiTheme } from '@kbn/kibana-react-plugin/common';
 import { convertIntervalToString } from '../../../../../utils/convert_interval_to_string';
 import { useWaffleTimeContext } from '../../hooks/use_waffle_time';
 
 interface Props {
-  theme: EuiTheme | undefined;
   interval: string;
 }
 
-export const WaffleTimeControls = withTheme(({ interval }: Props) => {
+type PropsWithTheme = Props & WithEuiThemeProps;
+
+export const WaffleTimeControls = withEuiTheme(({ interval }: PropsWithTheme) => {
   const { currentTime, isAutoReloading, startAutoReload, stopAutoReload, jumpToTime } =
     useWaffleTimeContext();
 

x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/gauges_section_vis.tsx

@@ -16,8 +16,7 @@ import {
 } from '@elastic/eui';
 import { get, last, max } from 'lodash';
 import React, { ReactText } from 'react';
-
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { InventoryFormatterType } from '@kbn/metrics-data-access-plugin/common';
 import { createFormatter } from '../../../../../common/formatters';
 import { SeriesOverrides, VisSectionProps } from '../types';
@@ -97,7 +96,7 @@ export const GaugesSectionVis = ({
   );
 };
 
-const GroupBox = euiStyled.div`
+const GroupBox = styled.div`
   display: flex;
   flex-flow: row wrap;
   justify-content: space-evenly;

x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/invalid_node.tsx

@@ -8,7 +8,7 @@
 import { EuiButton, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import React from 'react';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { useLinkProps } from '@kbn/observability-shared-plugin/public';
 import { ViewSourceConfigurationButton } from '../../../../components/source_configuration/view_source_configuration_button';
 
@@ -72,6 +72,6 @@ export const InvalidNodeError: React.FunctionComponent<InvalidNodeErrorProps> =
   );
 };
 
-const CenteredEmptyPrompt = euiStyled(EuiEmptyPrompt)`
+const CenteredEmptyPrompt = styled(EuiEmptyPrompt)`
   align-self: center;
 `;

x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_ec2_layout.tsx

@@ -5,9 +5,8 @@
  * 2.0.
  */
 
-import { EuiPanel } from '@elastic/eui';
+import { EuiPanel, withEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { withTheme } from '@kbn/kibana-react-plugin/common';
 import React from 'react';
 import type { LayoutPropsWithTheme } from '../../types';
 import { ChartSectionVis } from '../chart_section_vis';
@@ -15,7 +14,7 @@ import { MetadataDetails } from '../metadata_details';
 import { Section } from '../section';
 import { SubSection } from '../sub_section';
 
-export const AwsEC2Layout = withTheme(
+export const AwsEC2Layout = withEuiTheme(
   ({ metrics, theme, onChangeRangeTime }: LayoutPropsWithTheme) => (
     <React.Fragment>
       <MetadataDetails
@@ -54,7 +53,7 @@ export const AwsEC2Layout = withTheme(
               type="area"
               formatter="percent"
               seriesOverrides={{
-                total: { color: theme.eui.euiColorVis1 },
+                total: { color: theme.euiTheme.colors.vis.euiColorVis1 },
               }}
             />
           </SubSection>
@@ -73,7 +72,7 @@ export const AwsEC2Layout = withTheme(
               type="area"
               seriesOverrides={{
                 rx: {
-                  color: theme.eui.euiColorVis1,
+                  color: theme.euiTheme.colors.vis.euiColorVis1,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.hostMetricsLayout.networkTrafficSection.networkRxRateSeriesLabel',
                     {
@@ -82,7 +81,7 @@ export const AwsEC2Layout = withTheme(
                   ),
                 },
                 tx: {
-                  color: theme.eui.euiColorVis2,
+                  color: theme.euiTheme.colors.vis.euiColorVis2,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.hostMetricsLayout.networkTrafficSection.networkTxRateSeriesLabel',
                     {
@@ -108,7 +107,7 @@ export const AwsEC2Layout = withTheme(
               type="area"
               seriesOverrides={{
                 write: {
-                  color: theme.eui.euiColorVis2,
+                  color: theme.euiTheme.colors.vis.euiColorVis2,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.ec2MetricsLayout.diskIOBytesSection.writeLabel',
                     {
@@ -117,7 +116,7 @@ export const AwsEC2Layout = withTheme(
                   ),
                 },
                 read: {
-                  color: theme.eui.euiColorVis1,
+                  color: theme.euiTheme.colors.vis.euiColorVis1,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.ec2MetricsLayout.diskIOBytesSection.readLabel',
                     {

x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_rds_layout.tsx

@@ -5,16 +5,15 @@
  * 2.0.
  */
 
-import { EuiPanel } from '@elastic/eui';
+import { EuiPanel, withEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { withTheme } from '@kbn/kibana-react-plugin/common';
 import React from 'react';
 import type { LayoutPropsWithTheme } from '../../types';
 import { ChartSectionVis } from '../chart_section_vis';
 import { Section } from '../section';
 import { SubSection } from '../sub_section';
 
-export const AwsRDSLayout = withTheme(
+export const AwsRDSLayout = withEuiTheme(
   ({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
     <EuiPanel>
       <Section
@@ -42,7 +41,7 @@ export const AwsRDSLayout = withTheme(
             formatter="percent"
             seriesOverrides={{
               cpu: {
-                color: theme.eui.euiColorVis1,
+                color: theme.euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.rdsMetricsLayout.cpuTotal.chartLabel',
                   { defaultMessage: 'Total' }
@@ -65,7 +64,7 @@ export const AwsRDSLayout = withTheme(
             formatter="number"
             seriesOverrides={{
               connections: {
-                color: theme.eui.euiColorVis1,
+                color: theme.euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.rdsMetricsLayout.connections.chartLabel',
                   { defaultMessage: 'Connections' }
@@ -88,7 +87,7 @@ export const AwsRDSLayout = withTheme(
             formatter="number"
             seriesOverrides={{
               queries: {
-                color: theme.eui.euiColorVis1,
+                color: theme.euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.rdsMetricsLayout.queriesExecuted.chartLabel',
                   { defaultMessage: 'Queries' }
@@ -111,14 +110,14 @@ export const AwsRDSLayout = withTheme(
             formatter="number"
             seriesOverrides={{
               active: {
-                color: theme.eui.euiColorVis1,
+                color: theme.euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.rdsMetricsLayout.active.chartLabel',
                   { defaultMessage: 'Active' }
                 ),
               },
               blocked: {
-                color: theme.eui.euiColorVis2,
+                color: theme.euiTheme.colors.vis.euiColorVis2,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.rdsMetricsLayout.blocked.chartLabel',
                   { defaultMessage: 'Blocked' }
@@ -143,35 +142,35 @@ export const AwsRDSLayout = withTheme(
             formatterTemplate={'{{value}} ms'}
             seriesOverrides={{
               read: {
-                color: theme.eui.euiColorVis1,
+                color: theme.euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.rdsMetricsLayout.latency.read.chartLabel',
                   { defaultMessage: 'Read' }
                 ),
               },
               write: {
-                color: theme.eui.euiColorVis2,
+                color: theme.euiTheme.colors.vis.euiColorVis2,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.rdsMetricsLayout.latency.write.chartLabel',
                   { defaultMessage: 'Write' }
                 ),
               },
               insert: {
-                color: theme.eui.euiColorVis0,
+                color: theme.euiTheme.colors.vis.euiColorVis0,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.rdsMetricsLayout.latency.insert.chartLabel',
                   { defaultMessage: 'Insert' }
                 ),
               },
               update: {
-                color: theme.eui.euiColorVis7,
+                color: theme.euiTheme.colors.vis.euiColorVis7,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.rdsMetricsLayout.latency.update.chartLabel',
                   { defaultMessage: 'Update' }
                 ),
               },
               commit: {
-                color: theme.eui.euiColorVis3,
+                color: theme.euiTheme.colors.vis.euiColorVis3,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.rdsMetricsLayout.latency.commit.chartLabel',
                   { defaultMessage: 'Commit' }

x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_s3_layout.tsx

@@ -7,14 +7,13 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { withTheme } from '@kbn/kibana-react-plugin/common';
-import { EuiPanel } from '@elastic/eui';
+import { EuiPanel, withEuiTheme } from '@elastic/eui';
 import type { LayoutPropsWithTheme } from '../../types';
 import { Section } from '../section';
 import { SubSection } from '../sub_section';
 import { ChartSectionVis } from '../chart_section_vis';
 
-export const AwsS3Layout = withTheme(
+export const AwsS3Layout = withEuiTheme(
   ({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
     <EuiPanel>
       <Section
@@ -42,7 +41,7 @@ export const AwsS3Layout = withTheme(
             formatter="bytes"
             seriesOverrides={{
               bytes: {
-                color: theme.eui.euiColorVis1,
+                color: theme.euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.s3MetricsLayout.bucketSize.chartLabel',
                   { defaultMessage: 'Total Bytes' }
@@ -65,7 +64,7 @@ export const AwsS3Layout = withTheme(
             formatter="abbreviatedNumber"
             seriesOverrides={{
               objects: {
-                color: theme.eui.euiColorVis1,
+                color: theme.euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.s3MetricsLayout.numberOfObjects.chartLabel',
                   { defaultMessage: 'Objects' }
@@ -88,7 +87,7 @@ export const AwsS3Layout = withTheme(
             formatter="abbreviatedNumber"
             seriesOverrides={{
               total: {
-                color: theme.eui.euiColorVis1,
+                color: theme.euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.s3MetricsLayout.totalRequests.chartLabel',
                   { defaultMessage: 'Requests' }
@@ -111,7 +110,7 @@ export const AwsS3Layout = withTheme(
             formatter="bytes"
             seriesOverrides={{
               bytes: {
-                color: theme.eui.euiColorVis1,
+                color: theme.euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.s3MetricsLayout.downloadBytes.chartLabel',
                   { defaultMessage: 'Bytes' }
@@ -134,7 +133,7 @@ export const AwsS3Layout = withTheme(
             formatter="bytes"
             seriesOverrides={{
               bytes: {
-                color: theme.eui.euiColorVis1,
+                color: theme.euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.s3MetricsLayout.uploadBytes.chartLabel',
                   { defaultMessage: 'Bytes' }

x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_sqs_layout.tsx

@@ -5,16 +5,15 @@
  * 2.0.
  */
 
-import { EuiPanel } from '@elastic/eui';
+import { EuiPanel, withEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { withTheme } from '@kbn/kibana-react-plugin/common';
 import React from 'react';
 import type { LayoutPropsWithTheme } from '../../types';
 import { ChartSectionVis } from '../chart_section_vis';
 import { Section } from '../section';
 import { SubSection } from '../sub_section';
 
-export const AwsSQSLayout = withTheme(
+export const AwsSQSLayout = withEuiTheme(
   ({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
     <EuiPanel>
       <Section
@@ -42,7 +41,7 @@ export const AwsSQSLayout = withTheme(
             formatter="abbreviatedNumber"
             seriesOverrides={{
               visible: {
-                color: theme.eui.euiColorVis1,
+                color: theme.euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesVisible.chartLabel',
                   { defaultMessage: 'Available' }
@@ -65,7 +64,7 @@ export const AwsSQSLayout = withTheme(
             formatter="abbreviatedNumber"
             seriesOverrides={{
               delayed: {
-                color: theme.eui.euiColorVis1,
+                color: theme.euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesDelayed.chartLabel',
                   { defaultMessage: 'Delayed' }
@@ -88,7 +87,7 @@ export const AwsSQSLayout = withTheme(
             formatter="abbreviatedNumber"
             seriesOverrides={{
               sent: {
-                color: theme.eui.euiColorVis1,
+                color: theme.euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesSent.chartLabel',
                   { defaultMessage: 'Added' }
@@ -111,7 +110,7 @@ export const AwsSQSLayout = withTheme(
             formatter="abbreviatedNumber"
             seriesOverrides={{
               sent: {
-                color: theme.eui.euiColorVis1,
+                color: theme.euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesEmpty.chartLabel',
                   { defaultMessage: 'Empty' }
@@ -134,7 +133,7 @@ export const AwsSQSLayout = withTheme(
             formatter="abbreviatedNumber"
             seriesOverrides={{
               oldest: {
-                color: theme.eui.euiColorVis1,
+                color: theme.euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.sqsMetricsLayout.oldestMessage.chartLabel',
                   { defaultMessage: 'Age' }

x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/container_layout.tsx

@@ -5,9 +5,8 @@
  * 2.0.
  */
 
-import { EuiPanel } from '@elastic/eui';
+import { EuiPanel, withEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { withTheme } from '@kbn/kibana-react-plugin/common';
 import React from 'react';
 import type { LayoutPropsWithTheme } from '../../types';
 import { ChartSectionVis } from '../chart_section_vis';
@@ -16,7 +15,7 @@ import { MetadataDetails } from '../metadata_details';
 import { Section } from '../section';
 import { SubSection } from '../sub_section';
 
-export const ContainerLayout = withTheme(
+export const ContainerLayout = withEuiTheme(
   ({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
     <React.Fragment>
       <MetadataDetails />
@@ -47,7 +46,7 @@ export const ContainerLayout = withTheme(
                       defaultMessage: 'CPU Usage',
                     }
                   ),
-                  color: theme.eui.euiColorFullShade,
+                  color: theme.euiTheme.colors.fullShade,
                   formatter: 'percent',
                   gaugeMax: 1,
                 },
@@ -58,7 +57,7 @@ export const ContainerLayout = withTheme(
                       defaultMessage: 'Memory Usage',
                     }
                   ),
-                  color: theme.eui.euiColorFullShade,
+                  color: theme.euiTheme.colors.fullShade,
                   formatter: 'percent',
                   gaugeMax: 1,
                 },
@@ -76,7 +75,7 @@ export const ContainerLayout = withTheme(
                       defaultMessage: 'CPU Usage',
                     }
                   ),
-                  color: theme.eui.euiColorFullShade,
+                  color: theme.euiTheme.colors.fullShade,
                   formatter: 'percent',
                   gaugeMax: 1,
                 },
@@ -87,7 +86,7 @@ export const ContainerLayout = withTheme(
                       defaultMessage: 'Memory Usage',
                     }
                   ),
-                  color: theme.eui.euiColorFullShade,
+                  color: theme.euiTheme.colors.fullShade,
                   formatter: 'percent',
                   gaugeMax: 1,
                 },
@@ -98,7 +97,7 @@ export const ContainerLayout = withTheme(
                       defaultMessage: 'Inbound (RX)',
                     }
                   ),
-                  color: theme.eui.euiColorFullShade,
+                  color: theme.euiTheme.colors.fullShade,
                   formatter: 'bits',
                   formatterTemplate: '{{value}}/s',
                 },
@@ -109,7 +108,7 @@ export const ContainerLayout = withTheme(
                       defaultMessage: 'Outbound (TX)',
                     }
                   ),
-                  color: theme.eui.euiColorFullShade,
+                  color: theme.euiTheme.colors.fullShade,
                   formatter: 'bits',
                   formatterTemplate: '{{value}}/s',
                 },
@@ -130,7 +129,7 @@ export const ContainerLayout = withTheme(
               type="area"
               formatter="percent"
               seriesOverrides={{
-                cpu: { color: theme.eui.euiColorVis1 },
+                cpu: { color: theme.euiTheme.colors.vis.euiColorVis1 },
               }}
             />
           </SubSection>
@@ -148,7 +147,7 @@ export const ContainerLayout = withTheme(
               type="area"
               formatter="percent"
               seriesOverrides={{
-                memory: { color: theme.eui.euiColorVis1 },
+                memory: { color: theme.euiTheme.colors.vis.euiColorVis1 },
               }}
             />
           </SubSection>
@@ -166,7 +165,7 @@ export const ContainerLayout = withTheme(
               type="area"
               formatter="percent"
               seriesOverrides={{
-                cpu: { color: theme.eui.euiColorVis1 },
+                cpu: { color: theme.euiTheme.colors.vis.euiColorVis1 },
               }}
             />
           </SubSection>
@@ -184,7 +183,7 @@ export const ContainerLayout = withTheme(
               type="area"
               formatter="percent"
               seriesOverrides={{
-                memory: { color: theme.eui.euiColorVis1 },
+                memory: { color: theme.euiTheme.colors.vis.euiColorVis1 },
               }}
             />
           </SubSection>
@@ -203,7 +202,7 @@ export const ContainerLayout = withTheme(
               type="area"
               seriesOverrides={{
                 rx: {
-                  color: theme.eui.euiColorVis1,
+                  color: theme.euiTheme.colors.vis.euiColorVis1,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.containerMetricsLayout.networkTrafficSection.networkRxRateSeriesLabel',
                     {
@@ -212,7 +211,7 @@ export const ContainerLayout = withTheme(
                   ),
                 },
                 tx: {
-                  color: theme.eui.euiColorVis2,
+                  color: theme.euiTheme.colors.vis.euiColorVis2,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.containerMetricsLayout.networkTrafficSection.networkTxRateSeriesLabel',
                     {
@@ -238,7 +237,7 @@ export const ContainerLayout = withTheme(
               formatter="number"
               seriesOverrides={{
                 read: {
-                  color: theme.eui.euiColorVis1,
+                  color: theme.euiTheme.colors.vis.euiColorVis1,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoOpsSection.readRateSeriesLabel',
                     {
@@ -247,7 +246,7 @@ export const ContainerLayout = withTheme(
                   ),
                 },
                 write: {
-                  color: theme.eui.euiColorVis2,
+                  color: theme.euiTheme.colors.vis.euiColorVis2,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoOpsSection.writeRateSeriesLabel',
                     {
@@ -273,7 +272,7 @@ export const ContainerLayout = withTheme(
               formatterTemplate="{{value}}/s"
               seriesOverrides={{
                 read: {
-                  color: theme.eui.euiColorVis1,
+                  color: theme.euiTheme.colors.vis.euiColorVis1,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoBytesSection.readRateSeriesLabel',
                     {
@@ -282,7 +281,7 @@ export const ContainerLayout = withTheme(
                   ),
                 },
                 write: {
-                  color: theme.eui.euiColorVis2,
+                  color: theme.euiTheme.colors.vis.euiColorVis2,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoBytesSection.writeRateSeriesLabel',
                     {

x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/nginx_layout_sections.tsx

@@ -7,13 +7,13 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { withTheme } from '@kbn/kibana-react-plugin/common';
+import { withEuiTheme } from '@elastic/eui';
 import type { LayoutPropsWithTheme } from '../../types';
 import { Section } from '../section';
 import { SubSection } from '../sub_section';
 import { ChartSectionVis } from '../chart_section_vis';
 
-export const NginxLayoutSection = withTheme(
+export const NginxLayoutSection = withEuiTheme(
   ({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
     <React.Fragment>
       <Section
@@ -36,10 +36,10 @@ export const NginxLayoutSection = withTheme(
             type="bar"
             formatter="abbreviatedNumber"
             seriesOverrides={{
-              '200s': { color: theme.eui.euiColorVis1 },
-              '300s': { color: theme.eui.euiColorVis5 },
-              '400s': { color: theme.eui.euiColorVis2 },
-              '500s': { color: theme.eui.euiColorVis9 },
+              '200s': { color: theme.euiTheme.colors.vis.euiColorVis1 },
+              '300s': { color: theme.euiTheme.colors.vis.euiColorVis5 },
+              '400s': { color: theme.euiTheme.colors.vis.euiColorVis2 },
+              '500s': { color: theme.euiTheme.colors.vis.euiColorVis9 },
             }}
           />
         </SubSection>
@@ -57,7 +57,7 @@ export const NginxLayoutSection = withTheme(
             formatter="abbreviatedNumber"
             formatterTemplate="{{value}}/s"
             seriesOverrides={{
-              rate: { color: theme.eui.euiColorVis1 },
+              rate: { color: theme.euiTheme.colors.vis.euiColorVis1 },
             }}
           />
         </SubSection>
@@ -75,7 +75,7 @@ export const NginxLayoutSection = withTheme(
             formatter="abbreviatedNumber"
             seriesOverrides={{
               connections: {
-                color: theme.eui.euiColorVis1,
+                color: theme.euiTheme.colors.vis.euiColorVis1,
                 type: 'bar',
               },
             }}
@@ -95,7 +95,7 @@ export const NginxLayoutSection = withTheme(
             formatter="abbreviatedNumber"
             seriesOverrides={{
               reqPerConns: {
-                color: theme.eui.euiColorVis1,
+                color: theme.euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.nginxMetricsLayout.requestsPerConnectionsSection.reqsPerConnSeriesLabel',
                   {

x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/pod_layout.tsx

@@ -5,9 +5,8 @@
  * 2.0.
  */
 
-import { EuiPanel } from '@elastic/eui';
+import { EuiPanel, withEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { withTheme } from '@kbn/kibana-react-plugin/common';
 import React from 'react';
 import type { LayoutPropsWithTheme } from '../../types';
 import { ChartSectionVis } from '../chart_section_vis';
@@ -17,7 +16,7 @@ import { Section } from '../section';
 import { SubSection } from '../sub_section';
 import { NginxLayoutSection } from './nginx_layout_sections';
 
-export const PodLayout = withTheme(
+export const PodLayout = withEuiTheme(
   ({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
     <React.Fragment>
       <MetadataDetails />
@@ -45,7 +44,7 @@ export const PodLayout = withTheme(
                       defaultMessage: 'CPU Usage',
                     }
                   ),
-                  color: theme.eui.euiColorFullShade,
+                  color: theme.euiTheme.colors.fullShade,
                   formatter: 'percent',
                   gaugeMax: 1,
                 },
@@ -56,7 +55,7 @@ export const PodLayout = withTheme(
                       defaultMessage: 'Memory Usage',
                     }
                   ),
-                  color: theme.eui.euiColorFullShade,
+                  color: theme.euiTheme.colors.fullShade,
                   formatter: 'percent',
                   gaugeMax: 1,
                 },
@@ -67,7 +66,7 @@ export const PodLayout = withTheme(
                       defaultMessage: 'Inbound (RX)',
                     }
                   ),
-                  color: theme.eui.euiColorFullShade,
+                  color: theme.euiTheme.colors.fullShade,
                   formatter: 'bits',
                   formatterTemplate: '{{value}}/s',
                 },
@@ -78,7 +77,7 @@ export const PodLayout = withTheme(
                       defaultMessage: 'Outbound (TX)',
                     }
                   ),
-                  color: theme.eui.euiColorFullShade,
+                  color: theme.euiTheme.colors.fullShade,
                   formatter: 'bits',
                   formatterTemplate: '{{value}}/s',
                 },
@@ -98,7 +97,7 @@ export const PodLayout = withTheme(
               formatter="percent"
               type="area"
               seriesOverrides={{
-                cpu: { color: theme.eui.euiColorVis1 },
+                cpu: { color: theme.euiTheme.colors.vis.euiColorVis1 },
               }}
             />
           </SubSection>
@@ -116,7 +115,7 @@ export const PodLayout = withTheme(
               formatter="percent"
               seriesOverrides={{
                 memory: {
-                  color: theme.eui.euiColorVis1,
+                  color: theme.euiTheme.colors.vis.euiColorVis1,
                 },
               }}
             />
@@ -136,7 +135,7 @@ export const PodLayout = withTheme(
               type="area"
               seriesOverrides={{
                 rx: {
-                  color: theme.eui.euiColorVis1,
+                  color: theme.euiTheme.colors.vis.euiColorVis1,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.podMetricsLayout.networkTrafficSection.networkRxRateSeriesLabel',
                     {
@@ -145,7 +144,7 @@ export const PodLayout = withTheme(
                   ),
                 },
                 tx: {
-                  color: theme.eui.euiColorVis2,
+                  color: theme.euiTheme.colors.vis.euiColorVis2,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.podMetricsLayout.networkTrafficSection.networkTxRateSeriesLabel',
                     {

x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/metadata_details.tsx

@@ -6,10 +6,10 @@
  */
 
 import React, { useContext, useState, useCallback, useMemo } from 'react';
+import { get } from 'lodash';
 import { EuiButtonIcon, EuiFlexGrid, EuiFlexItem, EuiTitle, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { get } from 'lodash';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { InfraMetadata } from '../../../../../common/http_api';
 import { MetadataContext } from '../containers/metadata_context';
 
@@ -165,18 +165,16 @@ export const MetadataDetails = (props: Props) => {
   );
 };
 
-const MetadataContainer = euiStyled.div`
-border-top: ${(props) => props.theme.eui.euiBorderWidthThin} solid ${(props) =>
-  props.theme.eui.euiBorderColor};
-border-bottom: ${(props) => props.theme.eui.euiBorderWidthThin} solid ${(props) =>
-  props.theme.eui.euiBorderColor};
-padding: ${(props) => props.theme.eui.euiSizeM} 0;
-margin-bottom: ${(props) => props.theme.eui.euiSizeM};
-display: flex;
+const MetadataContainer = styled.div`
+  border-top: ${(props) => props.theme.euiTheme.border.thin};
+  border-bottom: ${(props) => props.theme.euiTheme.border.thin};
+  padding: ${(props) => props.theme.euiTheme.size.m} 0;
+  margin-bottom: ${(props) => props.theme.euiTheme.size.m};
+  display: flex;
 `;
 
-const Controls = euiStyled.div`
-flex-grow: 0;
-margin-right: ${(props) => props.theme.eui.euiSizeM};
-min-width: 0px;
+const Controls = styled.div`
+  flex-grow: 0;
+  margin-right: ${(props) => props.theme.euiTheme.size.m};
+  min-width: 0px;
 `;

x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/time_controls.tsx

@@ -8,7 +8,7 @@
 import { EuiSuperDatePicker, OnRefreshChangeProps, OnTimeChangeProps } from '@elastic/eui';
 import React, { useCallback } from 'react';
 import { UI_SETTINGS } from '@kbn/data-plugin/public';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { MetricsTimeInput } from '../hooks/use_metrics_time';
 import { useKibanaUiSetting } from '../../../../hooks/use_kibana_ui_setting';
 import { mapKibanaQuickRangesToDatePickerRanges } from '../../../../utils/map_timepicker_quickranges_to_datepicker_ranges';
@@ -76,6 +76,6 @@ export const MetricsTimeControls = (props: MetricsTimeControlsProps) => {
   );
 };
 
-const MetricsTimeControlsContainer = euiStyled.div`
+const MetricsTimeControlsContainer = styled.div`
   max-width: 750px;
 `;

x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/types.ts

@@ -7,7 +7,7 @@
 
 import rt from 'io-ts';
 import { PropsWithChildren } from 'react';
-import { EuiTheme } from '@kbn/kibana-react-plugin/common';
+import type { WithEuiThemeProps } from '@elastic/eui';
 import { InventoryFormatterTypeRT } from '@kbn/metrics-data-access-plugin/common';
 import { MetricsTimeInput } from './hooks/use_metrics_time';
 import { NodeDetailsMetricData } from '../../../../common/http_api/node_details_api';
@@ -19,7 +19,7 @@ export interface LayoutProps {
   stopLiveStreaming?: () => void;
 }
 
-export type LayoutPropsWithTheme = LayoutProps & PropsWithChildren<{ theme: EuiTheme }>;
+export type LayoutPropsWithTheme = LayoutProps & PropsWithChildren & WithEuiThemeProps;
 
 const ChartTypesRT = rt.keyof({
   area: null,

x-pack/plugins/observability_solution/infra/public/pages/metrics/metrics_explorer/components/chart.tsx

@@ -16,7 +16,7 @@ import {
   Tooltip,
 } from '@elastic/charts';
 import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiToolTip } from '@elastic/eui';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { first, last } from 'lodash';
 import moment from 'moment';
 import React, { useCallback, useMemo } from 'react';
@@ -176,7 +176,7 @@ export const MetricsExplorerChart = ({
   );
 };
 
-const ChartTitleContainer = euiStyled.div`
+const ChartTitleContainer = styled.div`
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;

x-pack/plugins/observability_solution/infra/public/utils/theme_utils/with_attrs.tsx

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { type Theme, useTheme } from '@emotion/react';
+import React from 'react';
+
+import { ComponentType } from 'react';
+
+export const withAttrs =
+  (Component: ComponentType<any>, fn: (args: { theme: Theme; props: any }) => any) =>
+  (props: any) => {
+    const theme = useTheme();
+    const attrs = fn({ theme, props });
+
+    return <Component {...props} {...attrs} />;
+  };

x-pack/plugins/observability_solution/infra/tsconfig.json

@@ -8,7 +8,8 @@
     "common/**/*",
     "public/**/*",
     "server/**/*",
-    "types/**/*"
+    "types/**/*",
+    "./emotion.d.ts"
   ],
   "kbn_references": [
     "@kbn/core",
@@ -65,7 +66,6 @@
     "@kbn/discover-plugin",
     "@kbn/observability-shared-plugin",
     "@kbn/observability-ai-assistant-plugin",
-    "@kbn/ui-theme",
     "@kbn/ml-anomaly-utils",
     "@kbn/aiops-plugin",
     "@kbn/field-formats-plugin",

x-pack/plugins/observability_solution/profiling/public/components/topn_functions/function_row.tsx

@@ -11,7 +11,6 @@ import {
   EuiFlexItem,
   EuiIcon,
   EuiText,
-  useEuiBackgroundColor,
   useEuiTheme,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -101,9 +100,9 @@ interface DiffColumnProps {
 }
 
 function DiffColumn({ diff, setCellProps }: DiffColumnProps) {
-  const theme = useEuiTheme();
-  const successColor = useEuiBackgroundColor('success');
-  const dangerColor = useEuiBackgroundColor('danger');
+  const { euiTheme } = useEuiTheme();
+  const successColor = euiTheme.colors.backgroundBaseSuccess;
+  const dangerColor = euiTheme.colors.backgroundBaseDanger;
 
   useEffect(() => {
     if (diff && diff.rank !== 0) {
@@ -116,7 +115,7 @@ function DiffColumn({ diff, setCellProps }: DiffColumnProps) {
 
   if (!diff) {
     return (
-      <EuiText size="xs" color={theme.euiTheme.colors.primaryText}>
+      <EuiText size="xs" color={euiTheme.colors.textPrimary}>
         {i18n.translate('xpack.profiling.functionsView.newLabel', {
           defaultMessage: 'New',
         })}