diff --git a/packages/kbn-discover-contextual-components/src/data_types/logs/components/cell_actions_popover.tsx b/packages/kbn-discover-contextual-components/src/data_types/logs/components/cell_actions_popover.tsx
index 96651cf26189b..8fa56c56162ab 100644
--- a/packages/kbn-discover-contextual-components/src/data_types/logs/components/cell_actions_popover.tsx
+++ b/packages/kbn-discover-contextual-components/src/data_types/logs/components/cell_actions_popover.tsx
@@ -20,10 +20,10 @@ import {
   EuiTextTruncate,
   EuiButtonEmpty,
   EuiCopy,
+  useEuiTheme,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { useBoolean } from '@kbn/react-hooks';
-import { euiThemeVars } from '@kbn/ui-theme';
 import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import type { SharePluginStart } from '@kbn/share-plugin/public';
 import type { CoreStart } from '@kbn/core-lifecycle-browser';
@@ -38,10 +38,6 @@ import {
   openCellActionPopoverAriaText,
 } from './translations';
 
-const codeFontCSS = css`
-  font-family: ${euiThemeVars.euiCodeFontFamily};
-`;
-
 interface CellActionsPopoverProps {
   onFilter?: DocViewFilterFn;
   /* ECS mapping for the key */
@@ -67,6 +63,7 @@ export function CellActionsPopover({
   renderValue,
   renderPopoverTrigger,
 }: CellActionsPopoverProps) {
+  const { euiTheme } = useEuiTheme();
   const [isPopoverOpen, { toggle: togglePopover, off: closePopover }] = useBoolean(false);
 
   const makeFilterHandlerByOperator = (operator: '+' | '-') => () => {
@@ -95,7 +92,12 @@ export function CellActionsPopover({
         data-test-subj="dataTableCellActionPopoverTitle"
       >
         <EuiFlexItem style={{ maxWidth: '200px' }}>
-          <EuiText size="s" css={codeFontCSS}>
+          <EuiText
+            size="s"
+            css={css`
+              font-family: ${euiTheme.font.familyCode};
+            `}
+          >
             <strong>{property}</strong>{' '}
             {typeof renderValue === 'function' ? renderValue(value) : value}
           </EuiText>
diff --git a/packages/kbn-discover-contextual-components/src/data_types/logs/components/summary_column/utils.tsx b/packages/kbn-discover-contextual-components/src/data_types/logs/components/summary_column/utils.tsx
index 7dacc3393763e..c6d8d3b10e297 100644
--- a/packages/kbn-discover-contextual-components/src/data_types/logs/components/summary_column/utils.tsx
+++ b/packages/kbn-discover-contextual-components/src/data_types/logs/components/summary_column/utils.tsx
@@ -11,7 +11,6 @@ import { dynamic } from '@kbn/shared-ux-utility';
 import React from 'react';
 import { css } from '@emotion/react';
 import { AgentName } from '@kbn/elastic-agent-utils';
-import { euiThemeVars } from '@kbn/ui-theme';
 import type { SharePluginStart } from '@kbn/share-plugin/public';
 import type { CoreStart } from '@kbn/core-lifecycle-browser';
 import {
@@ -28,6 +27,7 @@ import {
 } from '@kbn/discover-utils';
 import { DataTableRecord, getFieldValue } from '@kbn/discover-utils';
 import { LogDocument, ResourceFields, getAvailableResourceFields } from '@kbn/discover-utils/src';
+import { useEuiTheme } from '@elastic/eui';
 import { FieldBadgeWithActions, FieldBadgeWithActionsProps } from '../cell_actions_popover';
 import { ServiceNameBadgeWithActions } from '../service_name_badge_with_actions';
 /**
@@ -94,15 +94,18 @@ export const createResourceFields = (
       value: resourceDoc[name] as string,
       ResourceBadge: resourceBadgeComponentWithDependencies,
       ...(name === SERVICE_NAME_FIELD && {
-        Icon: () => (
-          <AgentIcon
-            agentName={resourceDoc[AGENT_NAME_FIELD] as AgentName}
-            size="m"
-            css={css`
-              margin-right: ${euiThemeVars.euiSizeXS};
-            `}
-          />
-        ),
+        Icon: () => {
+          const { euiTheme } = useEuiTheme();
+          return (
+            <AgentIcon
+              agentName={resourceDoc[AGENT_NAME_FIELD] as AgentName}
+              size="m"
+              css={css`
+                margin-right: ${euiTheme.size.xs};
+              `}
+            />
+          );
+        },
       }),
     };
   });
diff --git a/packages/kbn-discover-contextual-components/tsconfig.json b/packages/kbn-discover-contextual-components/tsconfig.json
index 21d65228b9597..0dc07688b4cab 100644
--- a/packages/kbn-discover-contextual-components/tsconfig.json
+++ b/packages/kbn-discover-contextual-components/tsconfig.json
@@ -22,7 +22,6 @@
     "@kbn/router-utils",
     "@kbn/management-settings-ids",
     "@kbn/share-plugin",
-    "@kbn/ui-theme",
     "@kbn/unified-data-table",
     "@kbn/unified-doc-viewer",
     "@kbn/react-hooks",
diff --git a/src/plugins/unified_doc_viewer/public/components/doc_viewer_logs_overview/sub_components/highlight_field.tsx b/src/plugins/unified_doc_viewer/public/components/doc_viewer_logs_overview/sub_components/highlight_field.tsx
index 0c5356b7f1659..88a431beeabd4 100644
--- a/src/plugins/unified_doc_viewer/public/components/doc_viewer_logs_overview/sub_components/highlight_field.tsx
+++ b/src/plugins/unified_doc_viewer/public/components/doc_viewer_logs_overview/sub_components/highlight_field.tsx
@@ -8,10 +8,8 @@
  */
 
 import { EuiBadge, EuiFlexGroup, EuiText, EuiTitle } from '@elastic/eui';
-import { css } from '@emotion/react';
 import React, { ReactNode } from 'react';
 import { dynamic } from '@kbn/shared-ux-utility';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { PartialFieldMetadataPlain } from '@kbn/fields-metadata-plugin/common';
 import { HoverActionPopover } from './hover_popover_action';
 
@@ -44,7 +42,7 @@ export function HighlightField({
   return formattedValue && value ? (
     <div {...props}>
       <EuiFlexGroup responsive={false} alignItems="center" gutterSize="xs">
-        <EuiTitle css={fieldNameStyle} size="xxxs">
+        <EuiTitle size="xxxs">
           <span>{label}</span>
         </EuiTitle>
         {hasFieldDescription ? <HighlightFieldDescription fieldMetadata={fieldMetadata} /> : null}
@@ -80,7 +78,3 @@ const FormattedValue = ({ value }: { value: string }) => (
     dangerouslySetInnerHTML={{ __html: value }}
   />
 );
-
-const fieldNameStyle = css`
-  color: ${euiThemeVars.euiColorDarkShade};
-`;
diff --git a/src/plugins/unified_doc_viewer/tsconfig.json b/src/plugins/unified_doc_viewer/tsconfig.json
index 212fcb0335c75..fb896fdace3e7 100644
--- a/src/plugins/unified_doc_viewer/tsconfig.json
+++ b/src/plugins/unified_doc_viewer/tsconfig.json
@@ -28,7 +28,6 @@
     "@kbn/code-editor-mock",
     "@kbn/custom-icons",
     "@kbn/react-field",
-    "@kbn/ui-theme",
     "@kbn/discover-shared-plugin",
     "@kbn/fields-metadata-plugin",
     "@kbn/core-notifications-browser",
diff --git a/x-pack/plugins/observability_solution/dataset_quality/public/components/common/vertical_rule.tsx b/x-pack/plugins/observability_solution/dataset_quality/public/components/common/vertical_rule.tsx
new file mode 100644
index 0000000000000..4fc6ae6cb4933
--- /dev/null
+++ b/x-pack/plugins/observability_solution/dataset_quality/public/components/common/vertical_rule.tsx
@@ -0,0 +1,25 @@
+/*
+ * 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 { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import React from 'react';
+
+export const VerticalRule = (props: React.ComponentProps<'span'>) => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <span
+      css={css`
+        width: ${euiTheme.border.width.thin};
+        height: 63px;
+        background-color: ${euiTheme.colors.borderBaseSubdued};
+      `}
+      {...props}
+    />
+  );
+};
diff --git a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/summary_panel/datasets_quality_indicators.tsx b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/summary_panel/datasets_quality_indicators.tsx
index b186c16c0c0f8..483f2fff31eaf 100644
--- a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/summary_panel/datasets_quality_indicators.tsx
+++ b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/summary_panel/datasets_quality_indicators.tsx
@@ -6,8 +6,6 @@
  */
 
 import React from 'react';
-import { euiThemeVars } from '@kbn/ui-theme';
-import { css } from '@emotion/react';
 
 import {
   EuiFlexGroup,
@@ -30,6 +28,7 @@ import {
   summaryPanelQualityTooltipText,
 } from '../../../../common/translations';
 import { mapPercentagesToQualityCounts } from '../../quality_indicator';
+import { VerticalRule } from '../../common/vertical_rule';
 
 export function DatasetsQualityIndicators() {
   const { onPageReady } = usePerformanceContext();
@@ -71,14 +70,14 @@ export function DatasetsQualityIndicators() {
             description={summaryPanelQualityPoorText}
             isLoading={isDatasetsQualityLoading}
           />
-          <span css={verticalRule} />
+          <VerticalRule />
           <QualityIndicator
             value={qualityCounts.degraded}
             quality="warning"
             description={summaryPanelQualityDegradedText}
             isLoading={isDatasetsQualityLoading}
           />
-          <span css={verticalRule} />
+          <VerticalRule />
           <QualityIndicator
             value={qualityCounts.good + datasetsWithoutIgnoredField}
             quality="success"
@@ -125,9 +124,3 @@ const QualityIndicator = ({
     </EuiFlexGroup>
   );
 };
-
-const verticalRule = css`
-  width: 1px;
-  height: 63px;
-  background-color: ${euiThemeVars.euiColorLightShade};
-`;
diff --git a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality_details/degraded_field_flyout/field_info.tsx b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality_details/degraded_field_flyout/field_info.tsx
index 3bcee0bbc89b3..12733e62c9cfb 100644
--- a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality_details/degraded_field_flyout/field_info.tsx
+++ b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality_details/degraded_field_flyout/field_info.tsx
@@ -16,6 +16,7 @@ import {
   EuiTitle,
   EuiToolTip,
   formatNumber,
+  useEuiTheme,
 } from '@elastic/eui';
 import { ES_FIELD_TYPES, KBN_FIELD_TYPES } from '@kbn/field-types';
 
@@ -33,6 +34,8 @@ import { SparkPlot } from '../../common/spark_plot';
 import { DegradedField } from '../../../../common/api_types';
 
 export const DegradedFieldInfo = ({ fieldList }: { fieldList?: DegradedField }) => {
+  const { euiTheme } = useEuiTheme();
+
   const {
     fieldFormats,
     degradedFieldValues,
@@ -164,7 +167,7 @@ export const DegradedFieldInfo = ({ fieldList }: { fieldList?: DegradedField })
                 <EuiBadgeGroup gutterSize="s">
                   {degradedFieldValues?.values.map((value, idx) => (
                     <EuiBadge color="hollow" key={idx}>
-                      <EuiTextColor color="#765B96">
+                      <EuiTextColor color={euiTheme.colors.vis.euiColorVis3}>
                         <strong>{value}</strong>
                       </EuiTextColor>
                     </EuiBadge>
diff --git a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality_details/overview/summary/panel.tsx b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality_details/overview/summary/panel.tsx
index e03e0957b5a52..dfcd95fae704a 100644
--- a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality_details/overview/summary/panel.tsx
+++ b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality_details/overview/summary/panel.tsx
@@ -7,22 +7,9 @@
 
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSkeletonTitle, EuiText } from '@elastic/eui';
-import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { PrivilegesWarningIconWrapper } from '../../../common';
 import { notAvailableLabel } from '../../../../../common/translations';
-
-const verticalRule = css`
-  width: 1px;
-  height: 65px;
-  background-color: ${euiThemeVars.euiColorLightShade};
-`;
-
-const verticalRuleHidden = css`
-  width: 1px;
-  height: 65px;
-  visibility: hidden;
-`;
+import { VerticalRule } from '../../../common/vertical_rule';
 
 export function Panel({
   title,
@@ -38,14 +25,14 @@ export function Panel({
       return panelChildren.map((panelChild, index) => (
         <React.Fragment key={index}>
           {panelChild}
-          {index < panelChildren.length - 1 && <span css={verticalRule} />}
+          {index < panelChildren.length - 1 && <VerticalRule />}
         </React.Fragment>
       ));
     }
     return (
       <>
         {panelChildren}
-        <span css={verticalRuleHidden} />
+        <VerticalRule style={{ visibility: 'hidden' }} />
       </>
     );
   };
diff --git a/x-pack/plugins/observability_solution/dataset_quality/tsconfig.json b/x-pack/plugins/observability_solution/dataset_quality/tsconfig.json
index 57b159cdbd295..9c515d8112088 100644
--- a/x-pack/plugins/observability_solution/dataset_quality/tsconfig.json
+++ b/x-pack/plugins/observability_solution/dataset_quality/tsconfig.json
@@ -29,7 +29,6 @@
     "@kbn/router-utils",
     "@kbn/xstate-utils",
     "@kbn/shared-ux-utility",
-    "@kbn/ui-theme",
     "@kbn/data-service",
     "@kbn/observability-shared-plugin",
     "@kbn/data-plugin",
diff --git a/x-pack/plugins/observability_solution/infra/public/alerting/log_threshold/components/alert_details_app_section/components/alert_annotation.tsx b/x-pack/plugins/observability_solution/infra/public/alerting/log_threshold/components/alert_details_app_section/components/alert_annotation.tsx
index 73f458c3aa6fb..3c83d0673b9b5 100644
--- a/x-pack/plugins/observability_solution/infra/public/alerting/log_threshold/components/alert_details_app_section/components/alert_annotation.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/alerting/log_threshold/components/alert_details_app_section/components/alert_annotation.tsx
@@ -14,8 +14,8 @@ 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();
+  const { uiSettings } = useKibanaContextForPlugin().services;
 
   return (
     <LineAnnotation
@@ -33,7 +33,7 @@ export function AlertAnnotation({ alertStarted }: { alertStarted: number }) {
       style={{
         line: {
           strokeWidth: 3,
-          stroke: euiTheme.colors.textDanger,
+          stroke: euiTheme.colors.borderStrongDanger,
           opacity: 1,
         },
       }}
diff --git a/x-pack/plugins/observability_solution/infra/public/components/log_stream/log_stream_react_embeddable.tsx b/x-pack/plugins/observability_solution/infra/public/components/log_stream/log_stream_react_embeddable.tsx
index 8b841c30f1533..43382cf37203b 100644
--- a/x-pack/plugins/observability_solution/infra/public/components/log_stream/log_stream_react_embeddable.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/components/log_stream/log_stream_react_embeddable.tsx
@@ -111,8 +111,8 @@ const SAVED_SEARCH_DOCS_URL =
   'https://www.elastic.co/guide/en/kibana/current/save-open-search.html';
 
 const DeprecationCallout = () => {
-  const [isDismissed, setDismissed] = useLocalStorage(DISMISSAL_STORAGE_KEY, false);
   const { euiTheme } = useEuiTheme();
+  const [isDismissed, setDismissed] = useLocalStorage(DISMISSAL_STORAGE_KEY, false);
 
   if (isDismissed) {
     return null;
diff --git a/x-pack/plugins/observability_solution/infra/public/components/logs_deprecation_callout.tsx b/x-pack/plugins/observability_solution/infra/public/components/logs_deprecation_callout.tsx
index 756c42214d7c0..a9b14688888c3 100644
--- a/x-pack/plugins/observability_solution/infra/public/components/logs_deprecation_callout.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/components/logs_deprecation_callout.tsx
@@ -11,7 +11,7 @@ import { i18n } from '@kbn/i18n';
 import { EuiButton } from '@elastic/eui';
 import { getRouterLinkProps } from '@kbn/router-utils';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
-import { css } from '@emotion/css';
+import { css } from '@emotion/react';
 import { LocatorPublic } from '@kbn/share-plugin/common';
 import { DISCOVER_APP_LOCATOR, DiscoverAppLocatorParams } from '@kbn/discover-plugin/common';
 import { useKibanaContextForPlugin } from '../hooks/use_kibana';
@@ -38,6 +38,7 @@ interface LogsDeprecationCalloutProps {
 }
 
 export const LogsDeprecationCallout = ({ page }: LogsDeprecationCalloutProps) => {
+  const { euiTheme } = useEuiTheme();
   const {
     services: {
       share,
@@ -47,8 +48,6 @@ export const LogsDeprecationCallout = ({ page }: LogsDeprecationCalloutProps) =>
     },
   } = useKibanaContextForPlugin();
 
-  const { euiTheme } = useEuiTheme();
-
   const { dismissalStorageKey, message } = pageConfigurations[page];
 
   const [isDismissed, setDismissed] = useLocalStorage(dismissalStorageKey, false);
@@ -68,7 +67,7 @@ export const LogsDeprecationCallout = ({ page }: LogsDeprecationCalloutProps) =>
       iconType="iInCircle"
       heading="h2"
       onDismiss={() => setDismissed(true)}
-      className={css`
+      css={css`
         margin-bottom: ${euiTheme.size.l};
       `}
     >
diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/node_square.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/node_square.tsx
index 977bf6b8b16cd..219200f85ded3 100644
--- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/node_square.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/node_square.tsx
@@ -66,6 +66,7 @@ const NodeContainerSmall = ({ children, ...props }: NodeProps & { color: string
 );
 const ValueInner = ({ children, ...props }: NodeProps) => {
   const { euiTheme } = useEuiTheme();
+
   return (
     <div
       css={css`
diff --git a/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/data_view_menu_item.tsx b/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/data_view_menu_item.tsx
index 6c16ec511eb52..ec5c1aab89185 100644
--- a/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/data_view_menu_item.tsx
+++ b/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/data_view_menu_item.tsx
@@ -6,9 +6,8 @@
  */
 
 import React from 'react';
-import { EuiIcon, EuiToolTip } from '@elastic/eui';
+import { EuiIcon, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { DataViewDescriptor } from '../../../../common/data_views/models/data_view_descriptor';
 import { openDiscoverLabel } from '../constants';
 
@@ -17,18 +16,22 @@ interface DataViewMenuItemProps {
   isAvailable: boolean;
 }
 
-const rightSpacing = css`
-  margin-right: ${euiThemeVars.euiSizeS};
-`;
-
 export const DataViewMenuItem = ({ dataView, isAvailable }: DataViewMenuItemProps) => {
+  const { euiTheme } = useEuiTheme();
+
   if (isAvailable) {
     return <span>{dataView.name}</span>;
   }
 
   return (
     <>
-      <span css={rightSpacing}>{dataView.name}</span>
+      <span
+        css={css`
+          margin-right: ${euiTheme.size.s};
+        `}
+      >
+        {dataView.name}
+      </span>
       <EuiToolTip content={openDiscoverLabel}>
         <EuiIcon type="popout" color="subdued" />
       </EuiToolTip>
diff --git a/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/selector_footer.tsx b/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/selector_footer.tsx
index fd1ae95770506..40c88a7453feb 100644
--- a/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/selector_footer.tsx
+++ b/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/selector_footer.tsx
@@ -57,7 +57,7 @@ export const ESQLButton = (props: DiscoverEsqlUrlProps) => {
 
   return (
     <EuiFlexItem grow={false}>
-      <EuiButton {...linkProps} color="success" size="s" data-test-subj="esqlLink">
+      <EuiButton {...linkProps} color="text" size="s" data-test-subj="esqlLink">
         {tryEsql}
       </EuiButton>
     </EuiFlexItem>
diff --git a/x-pack/plugins/observability_solution/logs_explorer/public/components/virtual_columns/column_tooltips/field_with_token.tsx b/x-pack/plugins/observability_solution/logs_explorer/public/components/virtual_columns/column_tooltips/field_with_token.tsx
index 045dbc1205680..4b2fc981aeff8 100644
--- a/x-pack/plugins/observability_solution/logs_explorer/public/components/virtual_columns/column_tooltips/field_with_token.tsx
+++ b/x-pack/plugins/observability_solution/logs_explorer/public/components/virtual_columns/column_tooltips/field_with_token.tsx
@@ -5,14 +5,9 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiText, EuiToken } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiText, EuiToken, useEuiTheme } from '@elastic/eui';
 import React from 'react';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
-
-const spacingXsCss = css`
-  margin-bottom: ${euiThemeVars.euiSizeXS};
-`;
 
 export const FieldWithToken = ({
   field,
@@ -21,8 +16,14 @@ export const FieldWithToken = ({
   field: string;
   iconType?: string;
 }) => {
+  const { euiTheme } = useEuiTheme();
+
   return (
-    <div css={spacingXsCss}>
+    <div
+      css={css`
+        margin-bottom: ${euiTheme.size.xs};
+      `}
+    >
       <EuiFlexGroup
         responsive={false}
         alignItems="center"
diff --git a/x-pack/plugins/observability_solution/logs_explorer/tsconfig.json b/x-pack/plugins/observability_solution/logs_explorer/tsconfig.json
index 2274d2c533d35..b4376d2463c5c 100644
--- a/x-pack/plugins/observability_solution/logs_explorer/tsconfig.json
+++ b/x-pack/plugins/observability_solution/logs_explorer/tsconfig.json
@@ -37,7 +37,6 @@
     "@kbn/router-utils",
     "@kbn/share-plugin",
     "@kbn/shared-ux-utility",
-    "@kbn/ui-theme",
     "@kbn/unified-data-table",
     "@kbn/unified-field-list",
     "@kbn/unified-search-plugin",
diff --git a/x-pack/plugins/observability_solution/logs_shared/emotion.d.ts b/x-pack/plugins/observability_solution/logs_shared/emotion.d.ts
new file mode 100644
index 0000000000000..213178080e536
--- /dev/null
+++ b/x-pack/plugins/observability_solution/logs_shared/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 {}
+}
diff --git a/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/column_headers_wrapper.tsx b/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/column_headers_wrapper.tsx
index f3922abff9b5c..4d7ec0ac92ddc 100644
--- a/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/column_headers_wrapper.tsx
+++ b/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/column_headers_wrapper.tsx
@@ -5,26 +5,33 @@
  * 2.0.
  */
 
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
-import { transparentize } from 'polished';
+import { css } from '@emotion/react';
+import { useEuiTheme } from '@elastic/eui';
+import React from 'react';
 import { ASSUMED_SCROLLBAR_WIDTH } from './vertical_scroll_panel';
 
-export const LogColumnHeadersWrapper = euiStyled.div.attrs((props) => ({
-  role: props.role ?? 'row',
-}))`
-    align-items: stretch;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    overflow: hidden;
-    padding-right: ${ASSUMED_SCROLLBAR_WIDTH}px;
-    border-bottom: ${(props) => props.theme.eui.euiBorderThin};
-    box-shadow: 0 2px 2px -1px ${(props) =>
-      transparentize(0.3, props.theme.eui.euiColorLightShade)};
-    position: relative;
-    z-index: 1;
-  `;
+export const LogColumnHeadersWrapper = ({ role = 'row', ...props }) => {
+  const { euiTheme } = useEuiTheme();
+  return (
+    <div
+      role={role}
+      css={css`
+        align-items: stretch;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        overflow: hidden;
+        padding-right: ${ASSUMED_SCROLLBAR_WIDTH}px;
+        border-bottom: ${euiTheme.border.thin};
+        box-shadow: 0 2px 2px -1px ${euiTheme.colors.borderBaseSubdued};
+        position: relative;
+        z-index: 1;
+      `}
+      {...props}
+    />
+  );
+};
 
 // eslint-disable-next-line import/no-default-export
 export default LogColumnHeadersWrapper;
diff --git a/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/highlighting.tsx b/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/highlighting.tsx
index e8ddd350927db..a9e3b1d0511ed 100644
--- a/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/highlighting.tsx
+++ b/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/highlighting.tsx
@@ -7,33 +7,20 @@
 
 import React from 'react';
 
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
-import { chooseLightOrDarkColor, tintOrShade } from '../../../utils/styles';
+import styled from '@emotion/styled';
 
-export const ActiveHighlightMarker = euiStyled.mark`
-  color: ${(props) =>
-    chooseLightOrDarkColor(
-      props.theme.eui.euiColorAccent,
-      props.theme.eui.euiColorEmptyShade,
-      props.theme.eui.euiColorDarkestShade
-    )};
-  background-color: ${(props) => props.theme.eui.euiColorAccent};
-  outline: 1px solid ${(props) => props.theme.eui.euiColorAccent};
-  };
+export const ActiveHighlightMarker = styled.mark`
+  color: ${({ theme }) => theme.euiTheme.colors.textParagraph};
+  background-color: ${({ theme }) => theme.euiTheme.colors.backgroundFilledAccent};
+  outline: ${({ theme }) =>
+    `${theme.euiTheme.border.width.thin} solid ${theme.euiTheme.colors.backgroundFilledAccent}`};
 `;
 
-export const HighlightMarker = euiStyled.mark`
-  color: ${(props) =>
-    chooseLightOrDarkColor(
-      tintOrShade(props.theme.eui.euiTextColor, props.theme.eui.euiColorAccent, 0.7, 0.5),
-      props.theme.eui.euiColorEmptyShade,
-      props.theme.eui.euiColorDarkestShade
-    )};
-  background-color: ${(props) =>
-    tintOrShade(props.theme.eui.euiTextColor, props.theme.eui.euiColorAccent, 0.7, 0.5)};
-  outline: 1px solid ${(props) =>
-    tintOrShade(props.theme.eui.euiTextColor, props.theme.eui.euiColorAccent, 0.7, 0.5)};
-  };
+export const HighlightMarker = styled.mark`
+  color: ${({ theme }) => theme.euiTheme.colors.textParagraph};
+  background-color: ${({ theme }) => theme.euiTheme.colors.backgroundLightAccent};
+  outline: ${({ theme }) =>
+    `${theme.euiTheme.border.width.thin} solid ${theme.euiTheme.colors.backgroundLightAccent}`};
 `;
 
 export const highlightFieldValue = (
diff --git a/x-pack/plugins/observability_solution/logs_shared/public/utils/styles.ts b/x-pack/plugins/observability_solution/logs_shared/public/utils/styles.ts
deleted file mode 100644
index d0949b58bd575..0000000000000
--- a/x-pack/plugins/observability_solution/logs_shared/public/utils/styles.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
- * 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 { get } from 'lodash';
-import { getLuminance, parseToHsl, parseToRgb, rgba, shade, tint } from 'polished';
-
-type PropReader = <Prop, Default = any>(props: object, defaultValue?: Default) => Prop;
-
-const asPropReader = (reader: string | string[] | PropReader) =>
-  typeof reader === 'function'
-    ? reader
-    : <Props extends object, Prop extends keyof Props, Default>(
-        props: Props,
-        defaultValue?: Default
-      ) => get(props, reader as Prop, defaultValue);
-
-export const switchProp = Object.assign(
-  (propName: string | string[] | PropReader, options: Map<any, any> | object) =>
-    (props: object) => {
-      const propValue = asPropReader(propName)(props, switchProp.default);
-      if (typeof propValue === 'undefined') {
-        return;
-      }
-      return options instanceof Map ? options.get(propValue) : get(options, propValue);
-    },
-  {
-    default: Symbol('default'),
-  }
-);
-
-export const ifProp =
-  <Pass, Fail>(propName: string | string[] | PropReader, pass: Pass, fail: Fail) =>
-  (props: object) =>
-    asPropReader(propName)(props) ? pass : fail;
-
-export const tintOrShade = (
-  textColor: string,
-  color: string,
-  tintFraction: number,
-  shadeFraction: number
-) => {
-  if (parseToHsl(textColor).lightness > 0.5) {
-    return shade(1 - shadeFraction, color);
-  } else {
-    return tint(1 - tintFraction, color);
-  }
-};
-
-export const getContrast = (color1: string, color2: string): number => {
-  const luminance1 = getLuminance(color1);
-  const luminance2 = getLuminance(color2);
-
-  return parseFloat(
-    (luminance1 > luminance2
-      ? (luminance1 + 0.05) / (luminance2 + 0.05)
-      : (luminance2 + 0.05) / (luminance1 + 0.05)
-    ).toFixed(2)
-  );
-};
-
-export const chooseLightOrDarkColor = (
-  backgroundColor: string,
-  lightColor: string,
-  darkColor: string
-) => {
-  if (getContrast(backgroundColor, lightColor) > getContrast(backgroundColor, darkColor)) {
-    return lightColor;
-  } else {
-    return darkColor;
-  }
-};
-
-export const transparentize = (amount: number, color: string): string => {
-  if (color === 'transparent') {
-    return color;
-  }
-
-  const parsedColor = parseToRgb(color);
-  const alpha: number =
-    'alpha' in parsedColor && typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;
-  const colorWithAlpha = {
-    ...parsedColor,
-    alpha: clampValue((alpha * 100 - amount * 100) / 100, 0, 1),
-  };
-
-  return rgba(colorWithAlpha);
-};
-
-export const clampValue = (value: number, minValue: number, maxValue: number) =>
-  Math.max(minValue, Math.min(maxValue, value));
diff --git a/x-pack/plugins/observability_solution/logs_shared/tsconfig.json b/x-pack/plugins/observability_solution/logs_shared/tsconfig.json
index acaed5073a176..de14d6ae57492 100644
--- a/x-pack/plugins/observability_solution/logs_shared/tsconfig.json
+++ b/x-pack/plugins/observability_solution/logs_shared/tsconfig.json
@@ -8,7 +8,8 @@
     "common/**/*",
     "public/**/*",
     "server/**/*",
-    "types/**/*"
+    "types/**/*",
+    "emotion.d.ts"
   ],
   "exclude": ["target/**/*"],
   "kbn_references": [
diff --git a/x-pack/plugins/observability_solution/observability_logs_explorer/emotion.d.ts b/x-pack/plugins/observability_solution/observability_logs_explorer/emotion.d.ts
new file mode 100644
index 0000000000000..213178080e536
--- /dev/null
+++ b/x-pack/plugins/observability_solution/observability_logs_explorer/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 {}
+}
diff --git a/x-pack/plugins/observability_solution/observability_logs_explorer/public/components/logs_explorer_top_nav_menu.tsx b/x-pack/plugins/observability_solution/observability_logs_explorer/public/components/logs_explorer_top_nav_menu.tsx
index 0020df30b8708..0d0adc23f77c8 100644
--- a/x-pack/plugins/observability_solution/observability_logs_explorer/public/components/logs_explorer_top_nav_menu.tsx
+++ b/x-pack/plugins/observability_solution/observability_logs_explorer/public/components/logs_explorer_top_nav_menu.tsx
@@ -11,12 +11,12 @@ import {
   EuiHeaderLinks,
   EuiHeaderSection,
   EuiHeaderSectionItem,
+  useEuiTheme,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { HeaderMenuPortal } from '@kbn/observability-shared-plugin/public';
 import { toMountPoint } from '@kbn/react-kibana-mount';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { LogsExplorerTabs } from '@kbn/discover-plugin/public';
 import React, { useEffect, useState } from 'react';
 import useObservable from 'react-use/lib/useObservable';
@@ -44,12 +44,13 @@ export const LogsExplorerTopNavMenu = () => {
 };
 
 const ProjectTopNav = () => {
+  const { euiTheme } = useEuiTheme();
   const { services } = useKibanaContextForPlugin();
 
   return (
     <EuiHeader
       data-test-subj="logsExplorerHeaderMenu"
-      css={{ boxShadow: 'none', backgroundColor: euiThemeVars.euiPageBackgroundColor }}
+      css={{ boxShadow: 'none', backgroundColor: euiTheme.colors.backgroundBasePlain }}
     >
       <EuiHeaderSection>
         <EuiHeaderSectionItem>
@@ -59,7 +60,7 @@ const ProjectTopNav = () => {
       <EuiHeaderSection
         side="right"
         css={css`
-          gap: ${euiThemeVars.euiSizeM};
+          gap: ${euiTheme.size.m};
         `}
       >
         <EuiHeaderSectionItem>
@@ -85,6 +86,7 @@ const ProjectTopNav = () => {
 };
 
 const ClassicTopNav = () => {
+  const { euiTheme } = useEuiTheme();
   const {
     services: {
       appParams: { setHeaderActionMenu },
@@ -110,7 +112,7 @@ const ClassicTopNav = () => {
           <EuiHeaderSection
             data-test-subj="logsExplorerHeaderMenu"
             css={css`
-              margin-left: ${euiThemeVars.euiSizeM};
+              margin-left: ${euiTheme.size.m};
             `}
           >
             <EuiHeaderSectionItem>
@@ -127,7 +129,7 @@ const ClassicTopNav = () => {
         chrome.setBreadcrumbsAppendExtension(previousAppendExtension);
       }
     };
-  }, [chrome, i18nStart, previousAppendExtension, theme]);
+  }, [chrome, i18nStart, previousAppendExtension, theme, euiTheme]);
 
   return (
     <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme.theme$}>
@@ -151,9 +153,9 @@ const ClassicTopNav = () => {
 };
 
 const VerticalRule = styled.span`
-  width: 1px;
+  width: ${(props) => props.theme.euiTheme.border.width.thin};
   height: 20px;
-  background-color: ${euiThemeVars.euiColorLightShade};
+  background-color: ${(props) => props.theme.euiTheme.colors.borderBaseSubdued};
 `;
 
 const ConditionalVerticalRule = ({ Component }: { Component: JSX.Element | null }) =>
diff --git a/x-pack/plugins/observability_solution/observability_logs_explorer/tsconfig.json b/x-pack/plugins/observability_solution/observability_logs_explorer/tsconfig.json
index 443d4ef8f0de7..7b786ae5bc7ed 100644
--- a/x-pack/plugins/observability_solution/observability_logs_explorer/tsconfig.json
+++ b/x-pack/plugins/observability_solution/observability_logs_explorer/tsconfig.json
@@ -8,7 +8,8 @@
     "common/**/*",
     "public/**/*",
     "server/**/*",
-    ".storybook/**/*.tsx"
+    ".storybook/**/*.tsx",
+    "emotion.d.ts",
   ],
   "kbn_references": [
     "@kbn/config-schema",
@@ -31,7 +32,6 @@
     "@kbn/share-plugin",
     "@kbn/shared-ux-router",
     "@kbn/shared-ux-utility",
-    "@kbn/ui-theme",
     "@kbn/xstate-utils",
     "@kbn/router-utils",
     "@kbn/observability-ai-assistant-plugin",
diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/api_key_banner.tsx b/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/api_key_banner.tsx
index 7c5cf36a46b30..bbcf20935b21a 100644
--- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/api_key_banner.tsx
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/api_key_banner.tsx
@@ -83,7 +83,7 @@ export function ApiKeyBanner({
                 data-test-subj="observabilityOnboardingApiKeySuccessCalloutButton"
                 iconType="copyClipboard"
                 onClick={copy}
-                color="success"
+                color="primary"
                 css={{
                   '> svg.euiIcon': {
                     borderRadius: '0 !important',
diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/configure_logs.tsx b/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/configure_logs.tsx
index 715116a00b28e..1c5045c893bef 100644
--- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/configure_logs.tsx
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/configure_logs.tsx
@@ -284,7 +284,7 @@ export function ConfigureLogsContent() {
           id="advancedSettingsAccordion"
           css={{
             '.euiAccordion__buttonContent': {
-              color: euiTheme.colors.primaryText,
+              color: euiTheme.colors.textPrimary,
               fontSize: xsFontSize,
             },
             '.euiAccordion__arrow svg': {
diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/install_elastic_agent.tsx b/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/install_elastic_agent.tsx
index bb44d3ec38458..51101ead8c339 100644
--- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/install_elastic_agent.tsx
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/install_elastic_agent.tsx
@@ -220,7 +220,7 @@ export function InstallElasticAgent() {
       panelFooter={[
         <EuiButton
           data-test-subj="obltOnboardingExploreLogs"
-          color="success"
+          color="primary"
           fill
           iconType="magnifyWithPlus"
           onClick={onContinue}
diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/shared/optional_form_row.tsx b/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/shared/optional_form_row.tsx
index ca92e441a2725..83efba6aa688b 100644
--- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/shared/optional_form_row.tsx
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/shared/optional_form_row.tsx
@@ -23,7 +23,7 @@ export function OptionalFormRow(props: OptionalFormRowProps) {
         },
         '.euiFormLabel > .euiFlexGroup > div:last-of-type': {
           fontWeight: 'normal',
-          color: euiTheme.colors.subduedText,
+          color: euiTheme.colors.textSubdued,
         },
       }}
       label={