From 53f72fd71ccf5ceaff6942f213d1114dac48b7dd Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Tue, 3 Dec 2024 12:10:42 +0100
Subject: [PATCH 01/15] style(dataset-quality): update colors

---
 .../dataset_quality/filters/integrations_selector.tsx           | 2 +-
 .../components/dataset_quality/filters/namespaces_selector.tsx  | 2 +-
 .../components/dataset_quality/filters/qualities_selector.tsx   | 2 +-
 .../public/components/dataset_quality/filters/selector.tsx      | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/integrations_selector.tsx b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/integrations_selector.tsx
index 8e78d53efaf7e..b620a50df5608 100644
--- a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/integrations_selector.tsx
+++ b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/integrations_selector.tsx
@@ -91,7 +91,7 @@ export function IntegrationsSelector({
     <EuiFilterButton
       data-test-subj="datasetQualityIntegrationsSelectableButton"
       iconType="arrowDown"
-      badgeColor="success"
+      badgeColor="accentSecondary"
       onClick={onButtonClick}
       isSelected={isPopoverOpen}
       numFilters={integrations.length}
diff --git a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/namespaces_selector.tsx b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/namespaces_selector.tsx
index d4e9ad90cc5f4..b90026982fa42 100644
--- a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/namespaces_selector.tsx
+++ b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/namespaces_selector.tsx
@@ -71,7 +71,7 @@ export function NamespacesSelector({
     <EuiFilterButton
       data-test-subj="datasetQualityNamespacesSelectableButton"
       iconType="arrowDown"
-      badgeColor="success"
+      badgeColor="accentSecondary"
       onClick={onButtonClick}
       isSelected={isPopoverOpen}
       numFilters={namespaces.length}
diff --git a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/qualities_selector.tsx b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/qualities_selector.tsx
index 5c7682df08e4e..ba1944f788525 100644
--- a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/qualities_selector.tsx
+++ b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/qualities_selector.tsx
@@ -75,7 +75,7 @@ export function QualitiesSelector({
     <EuiFilterButton
       data-test-subj="datasetQualityQualitiesSelectableButton"
       iconType="arrowDown"
-      badgeColor="success"
+      badgeColor="accentSecondary"
       onClick={onButtonClick}
       isSelected={isPopoverOpen}
       numFilters={qualities.length}
diff --git a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/selector.tsx b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/selector.tsx
index 0bb60846c91c3..959b24a818f7c 100644
--- a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/selector.tsx
+++ b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/selector.tsx
@@ -62,7 +62,7 @@ export function Selector({
     <EuiFilterButton
       data-test-subj={`${dataTestSubj}Button`}
       iconType="arrowDown"
-      badgeColor="success"
+      badgeColor="accentSecondary"
       onClick={onButtonClick}
       isSelected={isPopoverOpen}
       numFilters={options.length}

From 158ba988e6b5c2a4e2049444c7dde4f094a7eba4 Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Tue, 3 Dec 2024 13:48:39 +0100
Subject: [PATCH 02/15] style(logs-explorer): update colors

---
 .../data_source_selector/sub_components/selector_footer.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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..0290ed75e631c 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="accentSecondary" size="s" data-test-subj="esqlLink">
         {tryEsql}
       </EuiButton>
     </EuiFlexItem>

From b362b42e00f24d800b6363c97cd559f807874621 Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Tue, 3 Dec 2024 13:58:35 +0100
Subject: [PATCH 03/15] style(observability-onboarding): update colors

---
 .../application/quickstart_flows/custom_logs/api_key_banner.tsx | 2 +-
 .../quickstart_flows/custom_logs/install_elastic_agent.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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..a8fa4b75b373b 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="accentSecondary"
                 css={{
                   '> svg.euiIcon': {
                     borderRadius: '0 !important',
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..43e2c8ce1ecdd 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="accentSecondary"
           fill
           iconType="magnifyWithPlus"
           onClick={onContinue}

From ef8b4898056742d6423c859682ca0ad8c7a300b1 Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Tue, 3 Dec 2024 14:20:15 +0100
Subject: [PATCH 04/15] style(observability-onboarding): update colors token
 name

---
 .../application/quickstart_flows/custom_logs/configure_logs.tsx | 2 +-
 .../application/quickstart_flows/shared/optional_form_row.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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/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={

From f42865137c93b2410d4a05689ceda399f73cbd7d Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Tue, 3 Dec 2024 17:11:58 +0100
Subject: [PATCH 05/15] style(logs): remove euiThemeVars usages

---
 .../logs/components/cell_actions_popover.tsx  | 14 ++--
 .../logs/components/summary_column/utils.tsx  | 23 ++++---
 .../sub_components/highlight_field.tsx        | 16 +++--
 .../components/common/vertical_rule.tsx       | 25 ++++++++
 .../datasets_quality_indicators.tsx           | 13 +---
 .../overview/summary/panel.tsx                | 19 +-----
 .../components/alert_annotation.tsx           |  6 +-
 .../log_stream_react_embeddable.tsx           |  8 +--
 .../components/logs_deprecation_callout.tsx   | 14 ++--
 .../components/waffle/node_square.tsx         | 64 ++++++++++---------
 .../sub_components/data_view_menu_item.tsx    | 17 +++--
 .../column_tooltips/field_with_token.tsx      | 15 +++--
 .../observability_logs_explorer/emotion.d.ts  | 14 ++++
 .../components/logs_explorer_top_nav_menu.tsx | 14 ++--
 .../observability_logs_explorer/tsconfig.json |  3 +-
 15 files changed, 150 insertions(+), 115 deletions(-)
 create mode 100644 x-pack/plugins/observability_solution/dataset_quality/public/components/common/vertical_rule.tsx
 create mode 100644 x-pack/plugins/observability_solution/observability_logs_explorer/emotion.d.ts

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/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..469c354703a0f 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
@@ -7,11 +7,10 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiBadge, EuiFlexGroup, EuiText, EuiTitle } from '@elastic/eui';
+import { EuiBadge, EuiFlexGroup, EuiText, EuiTitle, useEuiTheme } 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';
 
@@ -39,12 +38,19 @@ export function HighlightField({
   children,
   ...props
 }: HighlightFieldProps) {
+  const { euiTheme } = useEuiTheme();
+
   const hasFieldDescription = !!fieldMetadata?.short;
 
   return formattedValue && value ? (
     <div {...props}>
       <EuiFlexGroup responsive={false} alignItems="center" gutterSize="xs">
-        <EuiTitle css={fieldNameStyle} size="xxxs">
+        <EuiTitle
+          css={css`
+            color: ${euiTheme.colors.textHeading};
+          `}
+          size="xxxs"
+        >
           <span>{label}</span>
         </EuiTitle>
         {hasFieldDescription ? <HighlightFieldDescription fieldMetadata={fieldMetadata} /> : null}
@@ -80,7 +86,3 @@ const FormattedValue = ({ value }: { value: string }) => (
     dangerouslySetInnerHTML={{ __html: value }}
   />
 );
-
-const fieldNameStyle = css`
-  color: ${euiThemeVars.euiColorDarkShade};
-`;
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..a2160fedf4d67
--- /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: 1px;
+        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/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/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 0d05b82a8b93d..d07aa495338e2 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
@@ -8,12 +8,12 @@
 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 { euiTheme } = useEuiTheme();
   const { uiSettings } = useKibanaContextForPlugin().services;
 
   return (
@@ -32,7 +32,7 @@ export function AlertAnnotation({ alertStarted }: { alertStarted: number }) {
       style={{
         line: {
           strokeWidth: 3,
-          stroke: euiThemeVars.euiColorDangerText,
+          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 1193b81379219..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
@@ -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';
@@ -112,6 +111,7 @@ const SAVED_SEARCH_DOCS_URL =
   'https://www.elastic.co/guide/en/kibana/current/save-open-search.html';
 
 const DeprecationCallout = () => {
+  const { euiTheme } = useEuiTheme();
   const [isDismissed, setDismissed] = useLocalStorage(DISMISSAL_STORAGE_KEY, false);
 
   if (isDismissed) {
@@ -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)',
       }}
     >
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 0edb8b9ab2924..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
@@ -5,14 +5,13 @@
  * 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 { 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';
@@ -39,6 +38,7 @@ interface LogsDeprecationCalloutProps {
 }
 
 export const LogsDeprecationCallout = ({ page }: LogsDeprecationCalloutProps) => {
+  const { euiTheme } = useEuiTheme();
   const {
     services: {
       share,
@@ -67,7 +67,9 @@ export const LogsDeprecationCallout = ({ page }: LogsDeprecationCalloutProps) =>
       iconType="iInCircle"
       heading="h2"
       onDismiss={() => setDismissed(true)}
-      className={calloutStyle}
+      css={css`
+        margin-bottom: ${euiTheme.size.l};
+      `}
     >
       <p>{message}</p>
       <EuiButton
@@ -90,7 +92,3 @@ const getDiscoverLinkProps = (locator: LocatorPublic<DiscoverAppLocatorParams>)
     onClick: () => locator.navigate({}),
   });
 };
-
-const calloutStyle = css`
-  margin-bottom: ${euiThemeVars.euiSizeL};
-`;
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 31d31fed64016..af77373c08be9 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
@@ -11,8 +11,8 @@ 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 +66,39 @@ 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`
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/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/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..5e1753fafc2e3 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$}>
@@ -153,7 +155,7 @@ const ClassicTopNav = () => {
 const VerticalRule = styled.span`
   width: 1px;
   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..13f3a61dfc3f7 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",

From c1428b21485019f857c1a90efc804c027aff8b95 Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Wed, 4 Dec 2024 12:06:52 +0100
Subject: [PATCH 06/15] style(logs): remove color computation by function

---
 .../degraded_field_flyout/field_info.tsx      |  5 +-
 .../logs_shared/emotion.d.ts                  | 14 +++
 .../column_headers_wrapper.tsx                | 43 +++++----
 .../logging/log_text_stream/highlighting.tsx  | 33 ++-----
 .../logs_shared/public/utils/styles.ts        | 94 -------------------
 .../logs_shared/tsconfig.json                 |  3 +-
 6 files changed, 54 insertions(+), 138 deletions(-)
 create mode 100644 x-pack/plugins/observability_solution/logs_shared/emotion.d.ts
 delete mode 100644 x-pack/plugins/observability_solution/logs_shared/public/utils/styles.ts

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/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..2888e7371c489 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,18 @@
 
 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: 1px solid ${({ theme }) => 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: 1px solid ${({ theme }) => 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": [

From c5849d41eb1e4b0ece0db7aef7eed7b76a81f36e Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Wed, 4 Dec 2024 11:46:03 +0000
Subject: [PATCH 07/15] [CI] Auto-commit changed files from 'node
 scripts/notice'

---
 packages/kbn-discover-contextual-components/tsconfig.json        | 1 -
 src/plugins/unified_doc_viewer/tsconfig.json                     | 1 -
 .../plugins/observability_solution/dataset_quality/tsconfig.json | 1 -
 x-pack/plugins/observability_solution/infra/tsconfig.json        | 1 -
 .../plugins/observability_solution/logs_explorer/tsconfig.json   | 1 -
 .../observability_logs_explorer/tsconfig.json                    | 1 -
 6 files changed, 6 deletions(-)

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/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/tsconfig.json b/x-pack/plugins/observability_solution/dataset_quality/tsconfig.json
index 8576b08bd9479..cbc53db205167 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/tsconfig.json b/x-pack/plugins/observability_solution/infra/tsconfig.json
index efd8be77b688c..061feb56bcbc5 100644
--- a/x-pack/plugins/observability_solution/infra/tsconfig.json
+++ b/x-pack/plugins/observability_solution/infra/tsconfig.json
@@ -65,7 +65,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",
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/observability_logs_explorer/tsconfig.json b/x-pack/plugins/observability_solution/observability_logs_explorer/tsconfig.json
index 13f3a61dfc3f7..7b786ae5bc7ed 100644
--- a/x-pack/plugins/observability_solution/observability_logs_explorer/tsconfig.json
+++ b/x-pack/plugins/observability_solution/observability_logs_explorer/tsconfig.json
@@ -32,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",

From 14767d3bdeba4e844150123ed4f25ae5fd7658be Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Wed, 4 Dec 2024 16:07:06 +0100
Subject: [PATCH 08/15] temp(logs): hardcode borealis theme for QA

---
 .../core/ui-settings/core-ui-settings-common/src/theme.ts  | 3 ++-
 .../core-ui-settings-server-internal/src/settings/theme.ts | 7 ++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/core/ui-settings/core-ui-settings-common/src/theme.ts b/packages/core/ui-settings/core-ui-settings-common/src/theme.ts
index 73b465d5b192f..90bec798919f8 100644
--- a/packages/core/ui-settings/core-ui-settings-common/src/theme.ts
+++ b/packages/core/ui-settings/core-ui-settings-common/src/theme.ts
@@ -35,7 +35,8 @@ export type ThemeTags = readonly ThemeTag[];
  * An array of theme tags available in Kibana by default when not customized
  * using KBN_OPTIMIZER_THEMES environment variable.
  */
-export const DEFAULT_THEME_TAGS: ThemeTags = ThemeAmsterdamTags;
+export const DEFAULT_THEME_TAGS: ThemeTags = SUPPORTED_THEME_TAGS; // TODO: (tonyghiani) remove after design QA on deployment
+// export const DEFAULT_THEME_TAGS: ThemeTags = ThemeAmsterdamTags; // TODO: (tonyghiani) uncomment after design QA on deployment
 
 export const FALLBACK_THEME_TAG: ThemeTag = 'v8light';
 
diff --git a/packages/core/ui-settings/core-ui-settings-server-internal/src/settings/theme.ts b/packages/core/ui-settings/core-ui-settings-server-internal/src/settings/theme.ts
index 36324f951952e..fd72e8fa02c6a 100644
--- a/packages/core/ui-settings/core-ui-settings-server-internal/src/settings/theme.ts
+++ b/packages/core/ui-settings/core-ui-settings-server-internal/src/settings/theme.ts
@@ -104,9 +104,10 @@ export const getThemeSettings = (
         }),
       },
       value: 'amsterdam',
-      readonly: Object.hasOwn(options, 'isThemeSwitcherEnabled')
-        ? !options.isThemeSwitcherEnabled
-        : true,
+      // TODO: (tonyghiani) Remove after design QA on deployment
+      // readonly: Object.hasOwn(options, 'isThemeSwitcherEnabled')
+      //   ? !options.isThemeSwitcherEnabled
+      //   : true,
       requiresPageReload: true,
       schema: schema.oneOf([
         schema.literal('amsterdam'),

From cd704c9e6720f314a3297bb8807b4305d21a070e Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Thu, 5 Dec 2024 09:57:04 +0100
Subject: [PATCH 09/15] Revert "temp(logs): hardcode borealis theme for QA"

This reverts commit 14767d3bdeba4e844150123ed4f25ae5fd7658be.
---
 .../core/ui-settings/core-ui-settings-common/src/theme.ts  | 3 +--
 .../core-ui-settings-server-internal/src/settings/theme.ts | 7 +++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/core/ui-settings/core-ui-settings-common/src/theme.ts b/packages/core/ui-settings/core-ui-settings-common/src/theme.ts
index 90bec798919f8..73b465d5b192f 100644
--- a/packages/core/ui-settings/core-ui-settings-common/src/theme.ts
+++ b/packages/core/ui-settings/core-ui-settings-common/src/theme.ts
@@ -35,8 +35,7 @@ export type ThemeTags = readonly ThemeTag[];
  * An array of theme tags available in Kibana by default when not customized
  * using KBN_OPTIMIZER_THEMES environment variable.
  */
-export const DEFAULT_THEME_TAGS: ThemeTags = SUPPORTED_THEME_TAGS; // TODO: (tonyghiani) remove after design QA on deployment
-// export const DEFAULT_THEME_TAGS: ThemeTags = ThemeAmsterdamTags; // TODO: (tonyghiani) uncomment after design QA on deployment
+export const DEFAULT_THEME_TAGS: ThemeTags = ThemeAmsterdamTags;
 
 export const FALLBACK_THEME_TAG: ThemeTag = 'v8light';
 
diff --git a/packages/core/ui-settings/core-ui-settings-server-internal/src/settings/theme.ts b/packages/core/ui-settings/core-ui-settings-server-internal/src/settings/theme.ts
index fd72e8fa02c6a..36324f951952e 100644
--- a/packages/core/ui-settings/core-ui-settings-server-internal/src/settings/theme.ts
+++ b/packages/core/ui-settings/core-ui-settings-server-internal/src/settings/theme.ts
@@ -104,10 +104,9 @@ export const getThemeSettings = (
         }),
       },
       value: 'amsterdam',
-      // TODO: (tonyghiani) Remove after design QA on deployment
-      // readonly: Object.hasOwn(options, 'isThemeSwitcherEnabled')
-      //   ? !options.isThemeSwitcherEnabled
-      //   : true,
+      readonly: Object.hasOwn(options, 'isThemeSwitcherEnabled')
+        ? !options.isThemeSwitcherEnabled
+        : true,
       requiresPageReload: true,
       schema: schema.oneOf([
         schema.literal('amsterdam'),

From 4b302caa9b955be196e704d26be0ba55aad92718 Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Wed, 11 Dec 2024 16:33:49 +0100
Subject: [PATCH 10/15] fix(logs): remove duplicate useEuiTheme usage

---
 .../alert_details_app_section/components/alert_annotation.tsx   | 1 -
 .../components/log_stream/log_stream_react_embeddable.tsx       | 1 -
 .../infra/public/components/logs_deprecation_callout.tsx        | 2 --
 3 files changed, 4 deletions(-)

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 407707b3985a8..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
@@ -16,7 +16,6 @@ import { useKibanaContextForPlugin } from '../../../../../hooks/use_kibana';
 export function AlertAnnotation({ alertStarted }: { alertStarted: number }) {
   const { euiTheme } = useEuiTheme();
   const { uiSettings } = useKibanaContextForPlugin().services;
-  const { euiTheme } = useEuiTheme();
 
   return (
     <LineAnnotation
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 cd1fae6761c74..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
@@ -113,7 +113,6 @@ const SAVED_SEARCH_DOCS_URL =
 const DeprecationCallout = () => {
   const { euiTheme } = useEuiTheme();
   const [isDismissed, setDismissed] = useLocalStorage(DISMISSAL_STORAGE_KEY, false);
-  const { euiTheme } = useEuiTheme();
 
   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 641bcc075e07b..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
@@ -48,8 +48,6 @@ export const LogsDeprecationCallout = ({ page }: LogsDeprecationCalloutProps) =>
     },
   } = useKibanaContextForPlugin();
 
-  const { euiTheme } = useEuiTheme();
-
   const { dismissalStorageKey, message } = pageConfigurations[page];
 
   const [isDismissed, setDismissed] = useLocalStorage(dismissalStorageKey, false);

From 7b12855cc171332cadbb533ee98505855aa016b6 Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Thu, 12 Dec 2024 12:12:00 +0100
Subject: [PATCH 11/15] style(logs): update style suggestions

---
 .../sub_components/highlight_field.tsx                     | 7 +------
 .../public/components/common/vertical_rule.tsx             | 2 +-
 .../components/logging/log_text_stream/highlighting.tsx    | 6 ++++--
 .../public/components/logs_explorer_top_nav_menu.tsx       | 2 +-
 4 files changed, 7 insertions(+), 10 deletions(-)

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 469c354703a0f..3f890a9ca8e72 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
@@ -45,12 +45,7 @@ export function HighlightField({
   return formattedValue && value ? (
     <div {...props}>
       <EuiFlexGroup responsive={false} alignItems="center" gutterSize="xs">
-        <EuiTitle
-          css={css`
-            color: ${euiTheme.colors.textHeading};
-          `}
-          size="xxxs"
-        >
+        <EuiTitle size="xxxs">
           <span>{label}</span>
         </EuiTitle>
         {hasFieldDescription ? <HighlightFieldDescription fieldMetadata={fieldMetadata} /> : null}
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
index a2160fedf4d67..4fc6ae6cb4933 100644
--- 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
@@ -15,7 +15,7 @@ export const VerticalRule = (props: React.ComponentProps<'span'>) => {
   return (
     <span
       css={css`
-        width: 1px;
+        width: ${euiTheme.border.width.thin};
         height: 63px;
         background-color: ${euiTheme.colors.borderBaseSubdued};
       `}
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 2888e7371c489..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
@@ -12,13 +12,15 @@ import styled from '@emotion/styled';
 export const ActiveHighlightMarker = styled.mark`
   color: ${({ theme }) => theme.euiTheme.colors.textParagraph};
   background-color: ${({ theme }) => theme.euiTheme.colors.backgroundFilledAccent};
-  outline: 1px solid ${({ theme }) => theme.euiTheme.colors.backgroundFilledAccent};
+  outline: ${({ theme }) =>
+    `${theme.euiTheme.border.width.thin} solid ${theme.euiTheme.colors.backgroundFilledAccent}`};
 `;
 
 export const HighlightMarker = styled.mark`
   color: ${({ theme }) => theme.euiTheme.colors.textParagraph};
   background-color: ${({ theme }) => theme.euiTheme.colors.backgroundLightAccent};
-  outline: 1px solid ${({ 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/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 5e1753fafc2e3..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
@@ -153,7 +153,7 @@ const ClassicTopNav = () => {
 };
 
 const VerticalRule = styled.span`
-  width: 1px;
+  width: ${(props) => props.theme.euiTheme.border.width.thin};
   height: 20px;
   background-color: ${(props) => props.theme.euiTheme.colors.borderBaseSubdued};
 `;

From 169eee0b76b79465d4c5f1787d315bb323c29dbc Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Thu, 12 Dec 2024 12:17:47 +0100
Subject: [PATCH 12/15] style(logs): revert badges color to success

---
 .../dataset_quality/filters/integrations_selector.tsx           | 2 +-
 .../components/dataset_quality/filters/namespaces_selector.tsx  | 2 +-
 .../components/dataset_quality/filters/qualities_selector.tsx   | 2 +-
 .../public/components/dataset_quality/filters/selector.tsx      | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/integrations_selector.tsx b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/integrations_selector.tsx
index b620a50df5608..8e78d53efaf7e 100644
--- a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/integrations_selector.tsx
+++ b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/integrations_selector.tsx
@@ -91,7 +91,7 @@ export function IntegrationsSelector({
     <EuiFilterButton
       data-test-subj="datasetQualityIntegrationsSelectableButton"
       iconType="arrowDown"
-      badgeColor="accentSecondary"
+      badgeColor="success"
       onClick={onButtonClick}
       isSelected={isPopoverOpen}
       numFilters={integrations.length}
diff --git a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/namespaces_selector.tsx b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/namespaces_selector.tsx
index b90026982fa42..d4e9ad90cc5f4 100644
--- a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/namespaces_selector.tsx
+++ b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/namespaces_selector.tsx
@@ -71,7 +71,7 @@ export function NamespacesSelector({
     <EuiFilterButton
       data-test-subj="datasetQualityNamespacesSelectableButton"
       iconType="arrowDown"
-      badgeColor="accentSecondary"
+      badgeColor="success"
       onClick={onButtonClick}
       isSelected={isPopoverOpen}
       numFilters={namespaces.length}
diff --git a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/qualities_selector.tsx b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/qualities_selector.tsx
index ba1944f788525..5c7682df08e4e 100644
--- a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/qualities_selector.tsx
+++ b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/qualities_selector.tsx
@@ -75,7 +75,7 @@ export function QualitiesSelector({
     <EuiFilterButton
       data-test-subj="datasetQualityQualitiesSelectableButton"
       iconType="arrowDown"
-      badgeColor="accentSecondary"
+      badgeColor="success"
       onClick={onButtonClick}
       isSelected={isPopoverOpen}
       numFilters={qualities.length}
diff --git a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/selector.tsx b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/selector.tsx
index 959b24a818f7c..0bb60846c91c3 100644
--- a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/selector.tsx
+++ b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/selector.tsx
@@ -62,7 +62,7 @@ export function Selector({
     <EuiFilterButton
       data-test-subj={`${dataTestSubj}Button`}
       iconType="arrowDown"
-      badgeColor="accentSecondary"
+      badgeColor="success"
       onClick={onButtonClick}
       isSelected={isPopoverOpen}
       numFilters={options.length}

From a4b29076573deac1f069d9b4d22b9aa42f77fc1f Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Thu, 12 Dec 2024 12:47:13 +0100
Subject: [PATCH 13/15] style(logs): remove unused imports

---
 .../sub_components/highlight_field.tsx                       | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

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 3f890a9ca8e72..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
@@ -7,8 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiBadge, EuiFlexGroup, EuiText, EuiTitle, useEuiTheme } from '@elastic/eui';
-import { css } from '@emotion/react';
+import { EuiBadge, EuiFlexGroup, EuiText, EuiTitle } from '@elastic/eui';
 import React, { ReactNode } from 'react';
 import { dynamic } from '@kbn/shared-ux-utility';
 import { PartialFieldMetadataPlain } from '@kbn/fields-metadata-plugin/common';
@@ -38,8 +37,6 @@ export function HighlightField({
   children,
   ...props
 }: HighlightFieldProps) {
-  const { euiTheme } = useEuiTheme();
-
   const hasFieldDescription = !!fieldMetadata?.short;
 
   return formattedValue && value ? (

From 6d70a3ceca9171571653fe36196ca569cba45c86 Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Thu, 12 Dec 2024 13:27:33 +0100
Subject: [PATCH 14/15] style(logs): update button color

---
 .../data_source_selector/sub_components/selector_footer.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 0290ed75e631c..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="accentSecondary" size="s" data-test-subj="esqlLink">
+      <EuiButton {...linkProps} color="text" size="s" data-test-subj="esqlLink">
         {tryEsql}
       </EuiButton>
     </EuiFlexItem>

From 003434b33ec367211e72c88d1b720d8e5a317d0f Mon Sep 17 00:00:00 2001
From: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Date: Thu, 12 Dec 2024 16:19:46 +0100
Subject: [PATCH 15/15] style(logs): update buttons color

---
 .../application/quickstart_flows/custom_logs/api_key_banner.tsx | 2 +-
 .../quickstart_flows/custom_logs/install_elastic_agent.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 a8fa4b75b373b..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="accentSecondary"
+                color="primary"
                 css={{
                   '> svg.euiIcon': {
                     borderRadius: '0 !important',
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 43e2c8ce1ecdd..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="accentSecondary"
+          color="primary"
           fill
           iconType="magnifyWithPlus"
           onClick={onContinue}