diff --git a/src/platform/packages/shared/kbn-alerts-ui-shared/src/alert_fields_table/index.tsx b/src/platform/packages/shared/kbn-alerts-ui-shared/src/alert_fields_table/index.tsx
index 3da86b5f848f7..d00f888feff00 100644
--- a/src/platform/packages/shared/kbn-alerts-ui-shared/src/alert_fields_table/index.tsx
+++ b/src/platform/packages/shared/kbn-alerts-ui-shared/src/alert_fields_table/index.tsx
@@ -14,11 +14,12 @@ import {
   EuiTabbedContentProps,
   useEuiOverflowScroll,
   EuiBasicTableColumn,
+  useEuiTheme,
+  useEuiFontSize,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import React, { memo, useMemo } from 'react';
 import { Alert } from '@kbn/alerting-types';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { useEuiTablePersist } from '@kbn/shared-ux-table-persist';
 
 export const search = {
@@ -90,6 +91,8 @@ export interface AlertFieldsTableProps {
  * A paginated, filterable table to show alert object fields
  */
 export const AlertFieldsTable = memo(({ alert, fields }: AlertFieldsTableProps) => {
+  const { euiTheme } = useEuiTheme();
+  const xsFontSize = useEuiFontSize('xs').fontSize;
   const { pageSize, sorting, onTableChange } = useEuiTablePersist<AlertField>({
     tableId: 'obltAlertFields',
     initialPageSize: 25,
@@ -122,8 +125,8 @@ export const AlertFieldsTable = memo(({ alert, fields }: AlertFieldsTableProps)
       search={search}
       css={css`
         & .euiTableRow {
-          font-size: ${euiThemeVars.euiFontSizeXS};
-          font-family: ${euiThemeVars.euiCodeFontFamily};
+          font-size: ${xsFontSize};
+          font-family: ${euiTheme.font.familyCode};
         }
       `}
     />
diff --git a/src/platform/packages/shared/kbn-alerts-ui-shared/tsconfig.json b/src/platform/packages/shared/kbn-alerts-ui-shared/tsconfig.json
index f51993a610f0b..eddb5578cd2ac 100644
--- a/src/platform/packages/shared/kbn-alerts-ui-shared/tsconfig.json
+++ b/src/platform/packages/shared/kbn-alerts-ui-shared/tsconfig.json
@@ -19,7 +19,6 @@
     "@kbn/data-views-plugin",
     "@kbn/unified-search-plugin",
     "@kbn/es-query",
-    "@kbn/ui-theme",
     "@kbn/controls-plugin",
     "@kbn/embeddable-plugin",
     "@kbn/core-http-browser",
diff --git a/src/platform/packages/shared/kbn-grouping/src/components/accordion_panel/group_stats.tsx b/src/platform/packages/shared/kbn-grouping/src/components/accordion_panel/group_stats.tsx
index d7b05c0ef02f8..552a728bd11c5 100644
--- a/src/platform/packages/shared/kbn-grouping/src/components/accordion_panel/group_stats.tsx
+++ b/src/platform/packages/shared/kbn-grouping/src/components/accordion_panel/group_stats.tsx
@@ -15,13 +15,13 @@ import {
   EuiFlexItem,
   EuiPopover,
   EuiToolTip,
+  useEuiTheme,
+  useEuiFontSize,
 } from '@elastic/eui';
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
 import { Filter } from '@kbn/es-query';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { GroupStatsItem } from '../types';
-import { statsContainerCss } from '../styles';
 import { TAKE_ACTION } from '../translations';
 
 interface GroupStatsProps<T> {
@@ -34,6 +34,7 @@ interface GroupStatsProps<T> {
 }
 
 const Separator = () => {
+  const { euiTheme } = useEuiTheme();
   return (
     <EuiFlexItem
       grow={false}
@@ -41,7 +42,7 @@ const Separator = () => {
       css={css`
         align-self: center;
         height: 20px;
-        border-right: ${euiThemeVars.euiBorderThin};
+        border-right: ${euiTheme.border.thin};
       `}
     />
   );
@@ -55,6 +56,9 @@ const GroupStatsComponent = <T,>({
   stats,
   takeActionItems: getTakeActionItems,
 }: GroupStatsProps<T>) => {
+  const { euiTheme } = useEuiTheme();
+  const xsFontSize = useEuiFontSize('xs').fontSize;
+
   const [isPopoverOpen, setPopover] = useState(false);
   const takeActionItems = useMemo(() => {
     return getTakeActionItems?.(groupFilter, groupNumber) ?? [];
@@ -86,14 +90,28 @@ const GroupStatsComponent = <T,>({
 
         return (
           <EuiFlexItem grow={false} key={stat.title}>
-            <span css={statsContainerCss} data-test-subj={dataTestSubj}>
+            <span
+              css={css`
+                font-size: ${xsFontSize};
+                font-weight: ${euiTheme.font.weight.semiBold};
+                .smallDot {
+                  width: 3px !important;
+                  display: inline-block;
+                }
+                .euiBadge__text {
+                  text-align: center;
+                  width: 100%;
+                }
+              `}
+              data-test-subj={dataTestSubj}
+            >
               {stat.title}
               {component}
             </span>
           </EuiFlexItem>
         );
       }) ?? [],
-    [stats]
+    [stats, euiTheme, xsFontSize]
   );
 
   const takeActionMenu = useMemo(
diff --git a/src/platform/packages/shared/kbn-grouping/src/components/group_selector/index.test.tsx b/src/platform/packages/shared/kbn-grouping/src/components/group_selector/index.test.tsx
index 36ad1e96adcd7..83c40e6fc405f 100644
--- a/src/platform/packages/shared/kbn-grouping/src/components/group_selector/index.test.tsx
+++ b/src/platform/packages/shared/kbn-grouping/src/components/group_selector/index.test.tsx
@@ -65,6 +65,11 @@ const testProps = {
     },
   ],
   title: 'Group alerts by',
+  euiTheme: {
+    border: {
+      thin: '1px solid #E3E8F2',
+    },
+  },
 };
 describe('group selector', () => {
   beforeEach(() => {
diff --git a/src/platform/packages/shared/kbn-grouping/src/components/group_selector/index.tsx b/src/platform/packages/shared/kbn-grouping/src/components/group_selector/index.tsx
index b1bf17c26115a..82f21da011749 100644
--- a/src/platform/packages/shared/kbn-grouping/src/components/group_selector/index.tsx
+++ b/src/platform/packages/shared/kbn-grouping/src/components/group_selector/index.tsx
@@ -7,9 +7,10 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type {
+import {
   EuiContextMenuPanelDescriptor,
   EuiContextMenuPanelItemDescriptor,
+  useEuiTheme,
 } from '@elastic/eui';
 import { EuiPopover } from '@elastic/eui';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -44,6 +45,8 @@ const GroupSelectorComponent = ({
     [groupsSelected]
   );
 
+  const { euiTheme } = useEuiTheme();
+
   const panels: EuiContextMenuPanelDescriptor[] = useMemo(() => {
     const isOptionDisabled = (key?: string) => {
       // Do not disable when maxGroupingLevels is 1 to allow toggling between groups
@@ -147,6 +150,7 @@ const GroupSelectorComponent = ({
         data-test-subj="groupByContextMenu"
         initialPanelId="firstPanel"
         panels={panels}
+        euiTheme={euiTheme}
       />
     </EuiPopover>
   );
diff --git a/src/platform/packages/shared/kbn-grouping/src/components/grouping.tsx b/src/platform/packages/shared/kbn-grouping/src/components/grouping.tsx
index 36d284cf28df6..ad655438440a0 100644
--- a/src/platform/packages/shared/kbn-grouping/src/components/grouping.tsx
+++ b/src/platform/packages/shared/kbn-grouping/src/components/grouping.tsx
@@ -13,7 +13,10 @@ import {
   EuiProgress,
   EuiSpacer,
   EuiTablePagination,
+  useEuiTheme,
+  useEuiFontSize,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import type { Filter } from '@kbn/es-query';
 import React, { useMemo, useState } from 'react';
 import { METRIC_TYPE, UiCounterMetricType } from '@kbn/analytics';
@@ -22,7 +25,7 @@ import { createGroupFilter, getNullGroupFilter } from '../containers/query/helpe
 import { GroupPanel } from './accordion_panel';
 import { GroupStats } from './accordion_panel/group_stats';
 import { EmptyGroupingComponent } from './empty_results_panel';
-import { countCss, groupingContainerCss, groupingContainerCssLevel } from './styles';
+import { groupingContainerCss, groupingContainerCssLevel } from './styles';
 import { GROUPS_UNIT, NULL_GROUP } from './translations';
 import type { ParsedGroupingAggregation, GroupPanelRenderer, GetGroupStats } from './types';
 import { GroupingBucket, OnGroupToggle } from './types';
@@ -78,6 +81,17 @@ const GroupingComponent = <T,>({
   unit = defaultUnit,
   groupsUnit = GROUPS_UNIT,
 }: GroupingProps<T>) => {
+  const { euiTheme } = useEuiTheme();
+  const xsFontSize = useEuiFontSize('xs').fontSize;
+
+  const countCss = css`
+    font-size: ${xsFontSize};
+    font-weight: ${euiTheme.font.weight.semiBold};
+    border-right: ${euiTheme.border.thin};
+    margin-right: 16px;
+    padding-right: 16px;
+  `;
+
   const [trigger, setTrigger] = useState<Record<string, { state: 'open' | 'closed' | undefined }>>(
     {}
   );
@@ -219,7 +233,9 @@ const GroupingComponent = <T,>({
         </EuiFlexGroup>
       )}
       <div
-        css={groupingLevel > 0 ? groupingContainerCssLevel : groupingContainerCss}
+        css={
+          groupingLevel > 0 ? groupingContainerCssLevel(euiTheme) : groupingContainerCss(euiTheme)
+        }
         className="eui-xScroll"
       >
         {isLoading ? (
diff --git a/src/platform/packages/shared/kbn-grouping/src/components/styles.tsx b/src/platform/packages/shared/kbn-grouping/src/components/styles.tsx
index e51ac01948a38..9d19fee6ed05d 100644
--- a/src/platform/packages/shared/kbn-grouping/src/components/styles.tsx
+++ b/src/platform/packages/shared/kbn-grouping/src/components/styles.tsx
@@ -7,52 +7,30 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiButtonEmpty, EuiContextMenu } from '@elastic/eui';
+import { EuiButtonEmpty, EuiContextMenu, type EuiThemeComputed } from '@elastic/eui';
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 
-export const countCss = css`
-  font-size: ${euiThemeVars.euiFontSizeXS};
-  font-weight: ${euiThemeVars.euiFontWeightSemiBold};
-  border-right: ${euiThemeVars.euiBorderThin};
-  margin-right: 16px;
-  padding-right: 16px;
-`;
-
-export const statsContainerCss = css`
-  font-size: ${euiThemeVars.euiFontSizeXS};
-  font-weight: ${euiThemeVars.euiFontWeightSemiBold};
-  .smallDot {
-    width: 3px !important;
-    display: inline-block;
-  }
-  .euiBadge__text {
-    text-align: center;
-    width: 100%;
-  }
-`;
-
-export const groupingContainerCss = css`
+export const groupingContainerCss = (euiTheme: EuiThemeComputed<{}>) => css`
   .groupingAccordionForm .euiAccordion__childWrapper .euiAccordion__children {
     margin-left: 8px;
     margin-right: 8px;
-    border-left: ${euiThemeVars.euiBorderThin};
-    border-right: ${euiThemeVars.euiBorderThin};
-    border-bottom: ${euiThemeVars.euiBorderThin};
+    border-left: ${euiTheme.border.thin};
+    border-right: ${euiTheme.border.thin};
+    border-bottom: ${euiTheme.border.thin};
     border-radius: 0 0 6px 6px;
   }
   .groupingAccordionForm .euiAccordion__triggerWrapper {
-    border-bottom: ${euiThemeVars.euiBorderThin};
-    border-left: ${euiThemeVars.euiBorderThin};
-    border-right: ${euiThemeVars.euiBorderThin};
+    border-bottom: ${euiTheme.border.thin};
+    border-left: ${euiTheme.border.thin};
+    border-right: ${euiTheme.border.thin};
     border-radius: 6px;
     min-height: 78px;
     padding-left: 16px;
     padding-right: 16px;
   }
   .groupingAccordionForm {
-    border-top: ${euiThemeVars.euiBorderThin};
+    border-top: ${euiTheme.border.thin};
     border-bottom: none;
     border-radius: 6px;
     min-width: 1090px;
@@ -65,17 +43,17 @@ export const groupingContainerCss = css`
   }
 `;
 
-export const groupingContainerCssLevel = css`
+export const groupingContainerCssLevel = (euiTheme: EuiThemeComputed<{}>) => css`
   .groupingAccordionFormLevel .euiAccordion__childWrapper .euiAccordion__children {
     margin-left: 8px;
     margin-right: 8px;
     border-left: none;
     border-right: none;
-    border-bottom: ${euiThemeVars.euiBorderThin};
+    border-bottom: ${euiTheme.border.thin};
     border-radius: 0;
   }
   .groupingAccordionFormLevel .euiAccordion__triggerWrapper {
-    border-bottom: ${euiThemeVars.euiBorderThin};
+    border-bottom: ${euiTheme.border.thin};
     border-left: none;
     border-right: none;
     min-height: 78px;
@@ -97,14 +75,14 @@ export const groupingContainerCssLevel = css`
   }
 `;
 
-export const StyledContextMenu = euiStyled(EuiContextMenu)`
+export const StyledContextMenu = euiStyled(EuiContextMenu)<{ euiTheme: EuiThemeComputed }>`
   width: 250px;
   & .euiContextMenuItem__text {
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .euiContextMenuItem {
-    border-bottom: ${euiThemeVars.euiBorderThin};
+    border-bottom: ${(props) => props.euiTheme.border.thin};
   }
   .euiContextMenuItem:last-child {
     border: none;
diff --git a/src/platform/packages/shared/kbn-grouping/tsconfig.json b/src/platform/packages/shared/kbn-grouping/tsconfig.json
index 118c5c53fa2b8..4b5dcc2c63494 100644
--- a/src/platform/packages/shared/kbn-grouping/tsconfig.json
+++ b/src/platform/packages/shared/kbn-grouping/tsconfig.json
@@ -24,7 +24,6 @@
     "@kbn/i18n-react",
     "@kbn/kibana-react-plugin",
     "@kbn/shared-svg",
-    "@kbn/ui-theme",
     "@kbn/analytics",
   ]
 }
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_actions/rule_actions_item.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_actions/rule_actions_item.tsx
index d3a77b21c1379..af3f98dc51277 100644
--- a/src/platform/packages/shared/response-ops/rule_form/src/rule_actions/rule_actions_item.tsx
+++ b/src/platform/packages/shared/response-ops/rule_form/src/rule_actions/rule_actions_item.tsx
@@ -16,7 +16,6 @@ import {
   EuiPanel,
   EuiButtonIcon,
   useEuiTheme,
-  useEuiBackgroundColor,
   EuiIcon,
   EuiText,
   EuiTabs,
@@ -110,9 +109,9 @@ export const RuleActionsItem = (props: RuleActionsItemProps) => {
   } = useRuleFormState();
 
   const [tab, setTab] = useState<string>(MESSAGES_TAB);
-  const subdued = useEuiBackgroundColor('subdued');
-  const plain = useEuiBackgroundColor('plain');
   const { euiTheme } = useEuiTheme();
+  const subdued = euiTheme.colors.lightestShade;
+  const plain = euiTheme.colors.backgroundBasePlain;
 
   const [availableActionVariables, setAvailableActionVariables] = useState<ActionVariable[]>(() => {
     if (!selectedRuleType.actionVariables) {
@@ -692,7 +691,7 @@ export const RuleActionsItem = (props: RuleActionsItemProps) => {
       }
       buttonContentClassName="eui-fullWidth"
       buttonContent={
-        <EuiPanel color="subdued" paddingSize="m">
+        <EuiPanel color="transparent" paddingSize="m">
           <EuiFlexGroup alignItems="center" responsive={false}>
             {accordionIcon}
             {connectorTitle}
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_actions/rule_actions_system_actions_item.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_actions/rule_actions_system_actions_item.tsx
index 4ed0305ec6e8d..01a4385a6bfde 100644
--- a/src/platform/packages/shared/response-ops/rule_form/src/rule_actions/rule_actions_system_actions_item.tsx
+++ b/src/platform/packages/shared/response-ops/rule_form/src/rule_actions/rule_actions_system_actions_item.tsx
@@ -126,8 +126,8 @@ export const RuleActionsSystemActionsItem = (props: RuleActionsSystemActionsItem
   >({});
   const [warning, setWarning] = useState<string | null>(null);
 
-  const subdued = useEuiBackgroundColor('subdued');
   const { euiTheme } = useEuiTheme();
+  const subdued = euiTheme.colors.lightestShade;
 
   const dispatch = useRuleFormDispatch();
   const actionTypeModel = actionTypeRegistry.get(action.actionTypeId);
@@ -267,7 +267,7 @@ export const RuleActionsSystemActionsItem = (props: RuleActionsSystemActionsItem
       buttonContent={
         <EuiPanel
           data-test-subj="ruleActionsSystemActionsItemAccordionButton"
-          color="subdued"
+          color="transparent"
           paddingSize="m"
         >
           <EuiFlexGroup alignItems="center">
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_form_errors/rule_form_error_prompt_wrapper.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_form_errors/rule_form_error_prompt_wrapper.tsx
index 359a7cc911a3e..b35e29ead0302 100644
--- a/src/platform/packages/shared/response-ops/rule_form/src/rule_form_errors/rule_form_error_prompt_wrapper.tsx
+++ b/src/platform/packages/shared/response-ops/rule_form/src/rule_form_errors/rule_form_error_prompt_wrapper.tsx
@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { useEuiBackgroundColorCSS, EuiPageTemplate } from '@elastic/eui';
+import { EuiPageTemplate } from '@elastic/eui';
 
 interface RuleFormErrorPromptWrapperProps {
   hasBorder?: boolean;
@@ -18,7 +18,9 @@ interface RuleFormErrorPromptWrapperProps {
 export const RuleFormErrorPromptWrapper: React.FC<
   React.PropsWithChildren<RuleFormErrorPromptWrapperProps>
 > = ({ children, hasBorder, hasShadow }) => {
-  const styles = useEuiBackgroundColorCSS().transparent;
+  const styles = {
+    backgroundColor: 'transparent',
+  };
   return (
     <EuiPageTemplate offset={0} css={styles}>
       <EuiPageTemplate.EmptyPrompt paddingSize="none" hasBorder={hasBorder} hasShadow={hasShadow}>
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_page/rule_page.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_page/rule_page.tsx
index 52c25ee79a5d8..a7280d184f8bb 100644
--- a/src/platform/packages/shared/response-ops/rule_form/src/rule_page/rule_page.tsx
+++ b/src/platform/packages/shared/response-ops/rule_form/src/rule_page/rule_page.tsx
@@ -16,7 +16,6 @@ import {
   EuiPageTemplate,
   EuiSpacer,
   EuiSteps,
-  useEuiBackgroundColorCSS,
 } from '@elastic/eui';
 import { checkActionFormActionTypeEnabled } from '@kbn/alerts-ui-shared';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -51,7 +50,9 @@ export const RulePage = (props: RulePageProps) => {
 
   const { actions } = formData;
 
-  const styles = useEuiBackgroundColorCSS().transparent;
+  const styles = {
+    backgroundColor: 'transparent',
+  };
 
   const onSaveInternal = useCallback(() => {
     onSave({
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_page/rule_page_name_input.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_page/rule_page_name_input.tsx
index 75db3fc988a4b..4c78734163fee 100644
--- a/src/platform/packages/shared/response-ops/rule_form/src/rule_page/rule_page_name_input.tsx
+++ b/src/platform/packages/shared/response-ops/rule_form/src/rule_page/rule_page_name_input.tsx
@@ -115,7 +115,7 @@ export const RulePageNameInput = () => {
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiButtonIcon
-            color="success"
+            color="primary"
             iconType="check"
             size="m"
             onClick={onCancelEdit}
diff --git a/x-pack/examples/gen_ai_streaming_response_example/public/components/streaming_response.tsx b/x-pack/examples/gen_ai_streaming_response_example/public/components/streaming_response.tsx
index 8cba309a1274e..1c3bdf0c9a655 100644
--- a/x-pack/examples/gen_ai_streaming_response_example/public/components/streaming_response.tsx
+++ b/x-pack/examples/gen_ai_streaming_response_example/public/components/streaming_response.tsx
@@ -150,13 +150,13 @@ export const StreamingResponse = ({
         id={`streamingResponse`}
         css={css`
           .euiButtonIcon {
-            color: ${euiTheme.colors.primaryText};
+            color: ${euiTheme.colors.textPrimary};
           }
         `}
         buttonContent={
           <EuiFlexGroup direction="row" alignItems="center">
             <EuiFlexItem grow>
-              <EuiText size="m" color={euiTheme.colors.primaryText}>
+              <EuiText size="m" color={euiTheme.colors.textPrimary}>
                 <strong>
                   {i18n.translate(
                     'genAiStreamingResponseExample.app.component.streamingResponseTitle',
diff --git a/x-pack/platform/plugins/shared/alerting/public/pages/maintenance_windows/components/link_icon.tsx b/x-pack/platform/plugins/shared/alerting/public/pages/maintenance_windows/components/link_icon.tsx
index c89f67e63aa02..c8e487d5c15d9 100644
--- a/x-pack/platform/plugins/shared/alerting/public/pages/maintenance_windows/components/link_icon.tsx
+++ b/x-pack/platform/plugins/shared/alerting/public/pages/maintenance_windows/components/link_icon.tsx
@@ -6,35 +6,12 @@
  */
 
 import type { IconSize, IconType } from '@elastic/eui';
-import { EuiIcon, EuiLink } from '@elastic/eui';
+import { EuiIcon, EuiLink, useEuiTheme } from '@elastic/eui';
 import type { LinkAnchorProps } from '@elastic/eui/src/components/link/link';
 import type { ReactNode } from 'react';
 import React from 'react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { css } from '@emotion/react';
 
-function getStyles(iconSide: string) {
-  return {
-    link: css`
-      align-items: center;
-      display: inline-flex;
-      vertical-align: top;
-      white-space: nowrap;
-      flex-direction: ${iconSide === 'left' ? 'row' : 'row-reverse'};
-    `,
-    leftSide: css`
-      margin-right: ${euiThemeVars.euiSizeXS};
-    `,
-    rightSide: css`
-      flex-direction: row-reverse;
-
-      .euiIcon {
-        margin-left: ${euiThemeVars.euiSizeXS};
-      }
-    `,
-  };
-}
-
 export interface LinkIconProps {
   children: string | ReactNode;
   iconSize?: IconSize;
@@ -60,11 +37,17 @@ export const LinkIcon = React.memo<LinkIconProps>(
     onClick,
     ...rest
   }) => {
-    const styles = getStyles(iconSide);
+    const { euiTheme } = useEuiTheme();
 
     return (
       <EuiLink
-        css={styles.link}
+        css={css`
+          align-items: center;
+          display: inline-flex;
+          vertical-align: top;
+          white-space: nowrap;
+          flex-direction: ${iconSide === 'left' ? 'row' : 'row-reverse'};
+        `}
         color={color}
         data-test-subj={dataTestSubj}
         disabled={disabled}
@@ -73,7 +56,19 @@ export const LinkIcon = React.memo<LinkIconProps>(
         {...rest}
       >
         <EuiIcon
-          css={iconSide === 'left' ? styles.leftSide : styles.rightSide}
+          css={
+            iconSide === 'left'
+              ? css`
+                  margin-right: ${euiTheme.size.xs};
+                `
+              : css`
+                  flex-direction: row-reverse;
+
+                  .euiIcon {
+                    margin-left: ${euiTheme.size.xs};
+                  }
+                `
+          }
           data-test-subj="link-icon"
           size={iconSize}
           type={iconType}
diff --git a/x-pack/platform/plugins/shared/alerting/public/pages/maintenance_windows/components/maintenance_windows_list.tsx b/x-pack/platform/plugins/shared/alerting/public/pages/maintenance_windows/components/maintenance_windows_list.tsx
index e4f69106ffa46..363e00414a8d8 100644
--- a/x-pack/platform/plugins/shared/alerting/public/pages/maintenance_windows/components/maintenance_windows_list.tsx
+++ b/x-pack/platform/plugins/shared/alerting/public/pages/maintenance_windows/components/maintenance_windows_list.tsx
@@ -12,13 +12,12 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiBadge,
-  useEuiTheme,
   EuiButton,
   EuiBasicTable,
   EuiFieldSearch,
   EuiSpacer,
 } from '@elastic/eui';
-import { css } from '@emotion/react';
+
 import * as i18n from '../translations';
 import { useEditMaintenanceWindowsNavigation } from '../../../hooks/use_navigation';
 import { STATUS_DISPLAY, STATUS_SORT } from '../constants';
@@ -112,7 +111,6 @@ export const MaintenanceWindowsList = React.memo<MaintenanceWindowsListProps>(
     onStatusChange,
     onSearchChange,
   }) => {
-    const { euiTheme } = useEuiTheme();
     const [search, setSearch] = useState<string>('');
 
     const { navigateToEditMaintenanceWindows } = useEditMaintenanceWindowsNavigation();
@@ -149,16 +147,6 @@ export const MaintenanceWindowsList = React.memo<MaintenanceWindowsListProps>(
       return isLoadingFinish || isLoadingArchive || isLoadingFinishAndArchive || isLoading;
     }, [isLoadingFinish, isLoadingArchive, isLoadingFinishAndArchive, isLoading]);
 
-    const tableCss = useMemo(() => {
-      return css`
-        .euiTableRow {
-          &.running {
-            background-color: ${euiTheme.colors.highlight};
-          }
-        }
-      `;
-    }, [euiTheme.colors.highlight]);
-
     const actions: Array<EuiBasicTableColumn<MaintenanceWindow>> = useMemo(
       () => [
         {
@@ -232,7 +220,6 @@ export const MaintenanceWindowsList = React.memo<MaintenanceWindowsListProps>(
             <EuiFlexItem>
               <EuiBasicTable
                 data-test-subj="maintenance-windows-table"
-                css={tableCss}
                 itemId="id"
                 loading={isMutatingOrLoading}
                 tableCaption="Maintenance Windows List"
diff --git a/x-pack/platform/plugins/shared/alerting/public/pages/maintenance_windows/components/page_header.tsx b/x-pack/platform/plugins/shared/alerting/public/pages/maintenance_windows/components/page_header.tsx
index 97602e9f6c972..be29ba0160356 100644
--- a/x-pack/platform/plugins/shared/alerting/public/pages/maintenance_windows/components/page_header.tsx
+++ b/x-pack/platform/plugins/shared/alerting/public/pages/maintenance_windows/components/page_header.tsx
@@ -6,8 +6,15 @@
  */
 
 import React, { useCallback } from 'react';
-import { EuiBetaBadge, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
-import { euiThemeVars } from '@kbn/ui-theme';
+import {
+  EuiBetaBadge,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiTitle,
+  useEuiTheme,
+  useEuiFontSize,
+} from '@elastic/eui';
 import { css } from '@emotion/react';
 
 import { LinkIcon } from './link_icon';
@@ -15,14 +22,6 @@ import * as i18n from '../translations';
 import { TruncatedText } from './truncated_text';
 import { useMaintenanceWindowsNavigation } from '../../../hooks/use_navigation';
 
-export const styles = {
-  linkBack: css`
-    font-size: ${euiThemeVars.euiFontSizeXS};
-    line-height: ${euiThemeVars.euiLineHeight};
-    margin-bottom: ${euiThemeVars.euiSizeS};
-  `,
-};
-
 export const ExperimentalBadge = React.memo(() => (
   <EuiBetaBadge
     label={i18n.EXPERIMENTAL_LABEL}
@@ -72,6 +71,9 @@ export interface PageHeaderProps {
 
 export const PageHeader = React.memo<PageHeaderProps>(
   ({ showBackButton = false, title, description }) => {
+    const { euiTheme } = useEuiTheme();
+    const xsFontSize = useEuiFontSize('xs').fontSize;
+    const lineHeight = useEuiFontSize('xs').lineHeight;
     const { navigateToMaintenanceWindows } = useMaintenanceWindowsNavigation();
 
     const navigateToMaintenanceWindowsClick = useCallback(() => {
@@ -82,7 +84,14 @@ export const PageHeader = React.memo<PageHeaderProps>(
       <EuiFlexGroup alignItems="center">
         <EuiFlexItem grow={false}>
           {showBackButton && (
-            <div data-test-subj="link-back" css={styles.linkBack}>
+            <div
+              data-test-subj="link-back"
+              css={css`
+                font-size: ${xsFontSize};
+                line-height: ${lineHeight};
+                margin-bottom: ${euiTheme.size.s};
+              `}
+            >
               <LinkIcon onClick={navigateToMaintenanceWindowsClick} iconType="arrowLeft">
                 {i18n.MAINTENANCE_WINDOWS_RETURN_LINK}
               </LinkIcon>
diff --git a/x-pack/platform/plugins/shared/alerting/tsconfig.json b/x-pack/platform/plugins/shared/alerting/tsconfig.json
index a73c99e39fd96..3375a48fca722 100644
--- a/x-pack/platform/plugins/shared/alerting/tsconfig.json
+++ b/x-pack/platform/plugins/shared/alerting/tsconfig.json
@@ -47,7 +47,6 @@
     "@kbn/kibana-react-plugin",
     "@kbn/management-plugin",
     "@kbn/es-ui-shared-plugin",
-    "@kbn/ui-theme",
     "@kbn/core-doc-links-server-mocks",
     "@kbn/doc-links",
     "@kbn/core-saved-objects-utils-server",
diff --git a/x-pack/platform/plugins/shared/cases/public/components/all_cases/severity_filter.tsx b/x-pack/platform/plugins/shared/cases/public/components/all_cases/severity_filter.tsx
index dbc7bdef31c2a..621b1123a5c96 100644
--- a/x-pack/platform/plugins/shared/cases/public/components/all_cases/severity_filter.tsx
+++ b/x-pack/platform/plugins/shared/cases/public/components/all_cases/severity_filter.tsx
@@ -5,10 +5,10 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiHealth } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
 import type { CaseSeverity } from '../../../common/types/domain';
-import { severities } from '../severity/config';
+import { severities, SeverityHealth } from '../severity/config';
 import type { MultiSelectFilterOption } from './multi_select_filter';
 import { MultiSelectFilter, mapToMultiSelectOption } from './multi_select_filter';
 import * as i18n from './translations';
@@ -22,11 +22,10 @@ const options = mapToMultiSelectOption(Object.keys(severities) as CaseSeverity[]
 
 export const SeverityFilter: React.FC<Props> = ({ selectedOptionKeys, onChange }) => {
   const renderOption = (option: MultiSelectFilterOption<CaseSeverity>) => {
-    const severityData = severities[option.label];
     return (
       <EuiFlexGroup gutterSize="xs" alignItems={'center'} responsive={false}>
         <EuiFlexItem grow={false}>
-          <EuiHealth color={severityData.color}>{severityData.label}</EuiHealth>
+          <SeverityHealth severity={option.label} />
         </EuiFlexItem>
       </EuiFlexGroup>
     );
diff --git a/x-pack/platform/plugins/shared/cases/public/components/all_cases/use_cases_columns.tsx b/x-pack/platform/plugins/shared/cases/public/components/all_cases/use_cases_columns.tsx
index 73292ac9d71bd..da92ad3bd3908 100644
--- a/x-pack/platform/plugins/shared/cases/public/components/all_cases/use_cases_columns.tsx
+++ b/x-pack/platform/plugins/shared/cases/public/components/all_cases/use_cases_columns.tsx
@@ -18,7 +18,6 @@ import {
   EuiButton,
   EuiLink,
   EuiIcon,
-  EuiHealth,
   EuiToolTip,
   RIGHT_ALIGNMENT,
 } from '@elastic/eui';
@@ -26,7 +25,6 @@ import { Status } from '@kbn/cases-components/src/status/status';
 import type { UserProfileWithAvatar } from '@kbn/user-profile-components';
 
 import type { ActionConnector } from '../../../common/types/domain';
-import { CaseSeverity } from '../../../common/types/domain';
 import type { CaseUI } from '../../../common/ui/types';
 import type { CasesColumnSelection } from './types';
 import { getEmptyCellValue } from '../empty_value';
@@ -38,7 +36,7 @@ import { useCasesColumnsConfiguration } from './use_cases_columns_configuration'
 import { useApplicationCapabilities, useKibana } from '../../common/lib/kibana';
 import { TruncatedText } from '../truncated_text';
 import { getConnectorIcon } from '../utils';
-import { severities } from '../severity/config';
+import { SeverityHealth } from '../severity/config';
 import { AssigneesColumn } from './assignees_column';
 import { builderMap as customFieldsBuilderMap } from '../custom_fields/builder';
 import { useGetCaseConfiguration } from '../../containers/configure/use_get_case_configuration';
@@ -60,7 +58,6 @@ const getLineClampedCss = css`
 
 const renderStringField = (field: string, dataTestSubj: string) =>
   field != null ? <span data-test-subj={dataTestSubj}>{field}</span> : getEmptyCellValue();
-
 export interface GetCasesColumn {
   filterStatus: string[];
   userProfiles: Map<string, UserProfileWithAvatar>;
@@ -298,14 +295,11 @@ export const useCasesColumns = ({
         sortable: true,
         render: (severity: CaseUI['severity']) => {
           if (severity != null) {
-            const severityData = severities[severity ?? CaseSeverity.LOW];
             return (
-              <EuiHealth
+              <SeverityHealth
                 data-test-subj={`case-table-column-severity-${severity}`}
-                color={severityData.color}
-              >
-                {severityData.label}
-              </EuiHealth>
+                severity={severity}
+              />
             );
           }
           return getEmptyCellValue();
diff --git a/x-pack/platform/plugins/shared/cases/public/components/case_view/components/edit_category.tsx b/x-pack/platform/plugins/shared/cases/public/components/case_view/components/edit_category.tsx
index 460fa364bc4d7..fc4f0cc3d9ba4 100644
--- a/x-pack/platform/plugins/shared/cases/public/components/case_view/components/edit_category.tsx
+++ b/x-pack/platform/plugins/shared/cases/public/components/case_view/components/edit_category.tsx
@@ -163,7 +163,7 @@ export const EditCategory = React.memo(({ isLoading, onSubmit, category }: EditC
               <EuiFlexGroup alignItems="center" responsive={false}>
                 <EuiFlexItem grow={false}>
                   <EuiButton
-                    color="success"
+                    color="primary"
                     data-test-subj="edit-category-submit"
                     fill
                     iconType="save"
diff --git a/x-pack/platform/plugins/shared/cases/public/components/case_view/components/edit_tags.tsx b/x-pack/platform/plugins/shared/cases/public/components/case_view/components/edit_tags.tsx
index d8c98e42f2e38..c7e3a567d5d4b 100644
--- a/x-pack/platform/plugins/shared/cases/public/components/case_view/components/edit_tags.tsx
+++ b/x-pack/platform/plugins/shared/cases/public/components/case_view/components/edit_tags.tsx
@@ -149,7 +149,7 @@ export const EditTags = React.memo(({ isLoading, onSubmit, tags }: EditTagsProps
               <EuiFlexGroup alignItems="center" responsive={false}>
                 <EuiFlexItem grow={false}>
                   <EuiButton
-                    color="success"
+                    color="primary"
                     data-test-subj="edit-tags-submit"
                     fill
                     iconType="save"
diff --git a/x-pack/platform/plugins/shared/cases/public/components/custom_fields/number/edit.tsx b/x-pack/platform/plugins/shared/cases/public/components/custom_fields/number/edit.tsx
index 3ebb65a9dab8e..0c205ce9d56fa 100644
--- a/x-pack/platform/plugins/shared/cases/public/components/custom_fields/number/edit.tsx
+++ b/x-pack/platform/plugins/shared/cases/public/components/custom_fields/number/edit.tsx
@@ -211,7 +211,7 @@ const EditComponent: CustomFieldType<CaseCustomFieldNumber>['Edit'] = ({
               <EuiFlexGroup alignItems="center" responsive={false}>
                 <EuiFlexItem grow={false}>
                   <EuiButton
-                    color="success"
+                    color="primary"
                     data-test-subj={`case-number-custom-field-submit-button-${customFieldConfiguration.key}`}
                     fill
                     iconType="save"
diff --git a/x-pack/platform/plugins/shared/cases/public/components/custom_fields/text/edit.tsx b/x-pack/platform/plugins/shared/cases/public/components/custom_fields/text/edit.tsx
index 4fc7c2dde9af4..67a0ab9b68b26 100644
--- a/x-pack/platform/plugins/shared/cases/public/components/custom_fields/text/edit.tsx
+++ b/x-pack/platform/plugins/shared/cases/public/components/custom_fields/text/edit.tsx
@@ -208,7 +208,7 @@ const EditComponent: CustomFieldType<CaseCustomFieldText>['Edit'] = ({
               <EuiFlexGroup alignItems="center" responsive={false}>
                 <EuiFlexItem grow={false}>
                   <EuiButton
-                    color="success"
+                    color="primary"
                     data-test-subj={`case-text-custom-field-submit-button-${customFieldConfiguration.key}`}
                     fill
                     iconType="save"
diff --git a/x-pack/platform/plugins/shared/cases/public/components/edit_connector/connectors_form.tsx b/x-pack/platform/plugins/shared/cases/public/components/edit_connector/connectors_form.tsx
index 04ed2d8520919..3931bc27c1192 100644
--- a/x-pack/platform/plugins/shared/cases/public/components/edit_connector/connectors_form.tsx
+++ b/x-pack/platform/plugins/shared/cases/public/components/edit_connector/connectors_form.tsx
@@ -147,7 +147,7 @@ const ConnectorsFormComponent: React.FC<Props> = ({
             <EuiFlexItem grow={false}>
               <EuiButton
                 disabled={!enableSave}
-                color="success"
+                color="primary"
                 data-test-subj="edit-connectors-submit"
                 fill
                 iconType="save"
diff --git a/x-pack/platform/plugins/shared/cases/public/components/markdown_editor/editable_markdown_footer.tsx b/x-pack/platform/plugins/shared/cases/public/components/markdown_editor/editable_markdown_footer.tsx
index 5ce43423597de..f5a0095e72193 100644
--- a/x-pack/platform/plugins/shared/cases/public/components/markdown_editor/editable_markdown_footer.tsx
+++ b/x-pack/platform/plugins/shared/cases/public/components/markdown_editor/editable_markdown_footer.tsx
@@ -36,7 +36,7 @@ const EditableMarkdownFooterComponent: React.FC<EditableMarkdownFooterProps> = (
       <EuiFlexItem grow={false}>
         <EuiButton
           data-test-subj="editable-save-markdown"
-          color="success"
+          color="primary"
           fill
           iconType="save"
           onClick={handleSaveAction}
diff --git a/x-pack/platform/plugins/shared/cases/public/components/recent_cases/recent_cases.tsx b/x-pack/platform/plugins/shared/cases/public/components/recent_cases/recent_cases.tsx
index f3a276d66a9c0..1d17ea74777e8 100644
--- a/x-pack/platform/plugins/shared/cases/public/components/recent_cases/recent_cases.tsx
+++ b/x-pack/platform/plugins/shared/cases/public/components/recent_cases/recent_cases.tsx
@@ -28,7 +28,7 @@ import { useCasesContext } from '../cases_context/use_cases_context';
 const getMarkdownContainerCss = (euiTheme: EuiThemeComputed<{}>) => css`
   max-height: 150px;
   overflow-y: auto;
-  color: ${euiTheme.colors.subduedText};
+  color: ${euiTheme.colors.textSubdued};
 `;
 
 const getTruncateCompCss = css`
diff --git a/x-pack/platform/plugins/shared/cases/public/components/severity/config.ts b/x-pack/platform/plugins/shared/cases/public/components/severity/config.ts
deleted file mode 100644
index 85df4b527c1b5..0000000000000
--- a/x-pack/platform/plugins/shared/cases/public/components/severity/config.ts
+++ /dev/null
@@ -1,29 +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 { euiLightVars } from '@kbn/ui-theme';
-import { CaseSeverity } from '../../../common/types/domain';
-import { CRITICAL, HIGH, LOW, MEDIUM } from './translations';
-
-export const severities = {
-  [CaseSeverity.LOW]: {
-    color: euiLightVars.euiColorVis0,
-    label: LOW,
-  },
-  [CaseSeverity.MEDIUM]: {
-    color: euiLightVars.euiColorVis5,
-    label: MEDIUM,
-  },
-  [CaseSeverity.HIGH]: {
-    color: euiLightVars.euiColorVis7,
-    label: HIGH,
-  },
-  [CaseSeverity.CRITICAL]: {
-    color: euiLightVars.euiColorVis9,
-    label: CRITICAL,
-  },
-};
diff --git a/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx b/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx
new file mode 100644
index 0000000000000..dd95baa5668e3
--- /dev/null
+++ b/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx
@@ -0,0 +1,68 @@
+/*
+ * 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 React from 'react';
+
+import { useEuiTheme, EuiHealth } from '@elastic/eui';
+import { CaseSeverity } from '../../../common/types/domain';
+import { CRITICAL, HIGH, LOW, MEDIUM } from './translations';
+
+interface Props {
+  severity: CaseSeverity;
+}
+
+export const severities = {
+  [CaseSeverity.LOW]: {
+    label: LOW,
+  },
+  [CaseSeverity.MEDIUM]: {
+    label: MEDIUM,
+  },
+  [CaseSeverity.HIGH]: {
+    label: HIGH,
+  },
+  [CaseSeverity.CRITICAL]: {
+    label: CRITICAL,
+  },
+};
+
+export const SeverityHealth: React.FC<Props> = ({ severity }) => {
+  const { euiTheme } = useEuiTheme();
+  const isAmsterdam = euiTheme.flags.hasVisColorAdjustment;
+
+  const severityData = {
+    low: {
+      color: isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.vis.euiColorSeverity5,
+      label: LOW,
+    },
+    medium: {
+      color: isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.vis.euiColorSeverity7,
+      label: MEDIUM,
+    },
+    high: {
+      color: isAmsterdam
+        ? euiTheme.colors.vis.euiColorVis7
+        : euiTheme.colors.vis.euiColorSeverity10,
+      label: HIGH,
+    },
+    critical: {
+      color: isAmsterdam
+        ? euiTheme.colors.vis.euiColorVis9
+        : euiTheme.colors.vis.euiColorSeverity14,
+      label: CRITICAL,
+    },
+  };
+
+  const { color, label } = severityData[severity];
+
+  return (
+    <EuiHealth color={color} data-test-subj={`case-table-column-severity-${severity}`}>
+      {label}
+    </EuiHealth>
+  );
+};
+SeverityHealth.displayName = 'SeverityHealth';
diff --git a/x-pack/platform/plugins/shared/cases/public/components/severity/selector.tsx b/x-pack/platform/plugins/shared/cases/public/components/severity/selector.tsx
index 90e38fc0a9c16..15f287973df34 100644
--- a/x-pack/platform/plugins/shared/cases/public/components/severity/selector.tsx
+++ b/x-pack/platform/plugins/shared/cases/public/components/severity/selector.tsx
@@ -6,10 +6,10 @@
  */
 
 import type { EuiSuperSelectOption } from '@elastic/eui';
-import { EuiFlexGroup, EuiFlexItem, EuiHealth, EuiSuperSelect } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSuperSelect } from '@elastic/eui';
 import React from 'react';
 import type { CaseSeverity } from '../../../common/types/domain';
-import { severities } from './config';
+import { severities, SeverityHealth } from './config';
 
 interface Props {
   selectedSeverity: CaseSeverity;
@@ -26,7 +26,6 @@ export const SeveritySelector: React.FC<Props> = ({
 }) => {
   const caseSeverities = Object.keys(severities) as CaseSeverity[];
   const options: Array<EuiSuperSelectOption<CaseSeverity>> = caseSeverities.map((severity) => {
-    const severityData = severities[severity];
     return {
       value: severity,
       inputDisplay: (
@@ -37,7 +36,7 @@ export const SeveritySelector: React.FC<Props> = ({
           data-test-subj={`case-severity-selection-${severity}`}
         >
           <EuiFlexItem grow={false}>
-            <EuiHealth color={severityData.color}>{severityData.label}</EuiHealth>
+            <SeverityHealth severity={severity} />
           </EuiFlexItem>
         </EuiFlexGroup>
       ),
diff --git a/x-pack/platform/plugins/shared/cases/public/components/similar_cases/use_similar_cases_columns.tsx b/x-pack/platform/plugins/shared/cases/public/components/similar_cases/use_similar_cases_columns.tsx
index 54ad38363f14e..fe6075ca06cb9 100644
--- a/x-pack/platform/plugins/shared/cases/public/components/similar_cases/use_similar_cases_columns.tsx
+++ b/x-pack/platform/plugins/shared/cases/public/components/similar_cases/use_similar_cases_columns.tsx
@@ -12,15 +12,14 @@ import type {
   EuiTableComputedColumnType,
   EuiTableFieldDataColumnType,
 } from '@elastic/eui';
-import { EuiBadgeGroup, EuiBadge, EuiHealth, EuiToolTip } from '@elastic/eui';
+import { EuiBadgeGroup, EuiBadge, EuiToolTip } from '@elastic/eui';
 import { Status } from '@kbn/cases-components/src/status/status';
 
-import { CaseSeverity } from '../../../common/types/domain';
 import type { CaseUI, SimilarCaseUI } from '../../../common/ui/types';
 import { getEmptyCellValue } from '../empty_value';
 import { CaseDetailsLink } from '../links';
 import { TruncatedText } from '../truncated_text';
-import { severities } from '../severity/config';
+import { SeverityHealth } from '../severity/config';
 import { useCasesColumnsConfiguration } from '../all_cases/use_cases_columns_configuration';
 import * as i18n from './translations';
 
@@ -157,14 +156,11 @@ export const useSimilarCasesColumns = (): UseSimilarCasesColumnsReturnValue => {
         sortable: false,
         render: (severity: CaseUI['severity']) => {
           if (severity != null) {
-            const severityData = severities[severity ?? CaseSeverity.LOW];
             return (
-              <EuiHealth
+              <SeverityHealth
                 data-test-subj={`similar-cases-table-column-severity-${severity}`}
-                color={severityData.color}
-              >
-                {severityData.label}
-              </EuiHealth>
+                severity={severity}
+              />
             );
           }
           return getEmptyCellValue();
diff --git a/x-pack/platform/plugins/shared/cases/public/components/user_actions/severity.tsx b/x-pack/platform/plugins/shared/cases/public/components/user_actions/severity.tsx
index 8196acefc0faa..a03ed71361db1 100644
--- a/x-pack/platform/plugins/shared/cases/public/components/user_actions/severity.tsx
+++ b/x-pack/platform/plugins/shared/cases/public/components/user_actions/severity.tsx
@@ -5,17 +5,18 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiHealth } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
 import type { SnakeToCamelCase } from '../../../common/types';
 import type { SeverityUserAction } from '../../../common/types/domain';
 import { SET_SEVERITY_TO } from '../create/translations';
 import { createCommonUpdateUserActionBuilder } from './common';
 import type { UserActionBuilder } from './types';
-import { severities } from '../severity/config';
+import { severities, SeverityHealth } from '../severity/config';
 
 const getLabelTitle = (userAction: SnakeToCamelCase<SeverityUserAction>) => {
   const severity = userAction.payload.severity;
+
   const severityData = severities[severity];
   if (severityData === undefined) {
     return null;
@@ -29,7 +30,7 @@ const getLabelTitle = (userAction: SnakeToCamelCase<SeverityUserAction>) => {
     >
       <EuiFlexItem grow={false}>{SET_SEVERITY_TO}</EuiFlexItem>
       <EuiFlexItem data-test-subj={`${userAction.id}-user-action-severity-title-${severity}`}>
-        <EuiHealth color={severityData.color}>{severityData.label}</EuiHealth>
+        <SeverityHealth severity={severity} />
       </EuiFlexItem>
     </EuiFlexGroup>
   );
diff --git a/x-pack/platform/plugins/shared/cases/tsconfig.json b/x-pack/platform/plugins/shared/cases/tsconfig.json
index 5368aa8418ef3..00d250c5229c9 100644
--- a/x-pack/platform/plugins/shared/cases/tsconfig.json
+++ b/x-pack/platform/plugins/shared/cases/tsconfig.json
@@ -38,7 +38,6 @@
     "@kbn/licensing-plugin",
     "@kbn/user-profile-components",
     "@kbn/rule-data-utils",
-    "@kbn/ui-theme",
     "@kbn/std",
     "@kbn/test-jest-helpers",
     "@kbn/config-schema",
diff --git a/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.test.tsx b/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.test.tsx
index d65d15fd0fc3d..ccfdedcc47315 100644
--- a/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.test.tsx
+++ b/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.test.tsx
@@ -7,7 +7,8 @@
 
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
-import { CaseSeverity, severities, SeverityFilter } from './severity_filter';
+import { CaseSeverity, SeverityFilter } from './severity_filter';
+import * as i18n from './translations';
 const onSeverityChange = jest.fn();
 const defaultProps = {
   selectedSeverity: CaseSeverity.LOW,
@@ -26,11 +27,14 @@ describe('SeverityFilter', () => {
     expect(superSelect).toHaveTextContent('Low');
     fireEvent.click(superSelect);
     const options = getAllByRole('option');
-    const allSeverities = Object.keys(severities) as CaseSeverity[];
-    expect(options).toHaveLength(allSeverities.length);
-    options.forEach((option, index) => {
-      expect(option).toHaveTextContent(severities[allSeverities[index]].label);
-    });
+
+    expect(options).toHaveLength(Object.values(CaseSeverity).length);
+    expect(options.map((option) => option.textContent)).toEqual([
+      i18n.SEVERITY_LOW_LABEL,
+      i18n.SEVERITY_MEDIUM_LABEL,
+      i18n.SEVERITY_HIGH_LABEL,
+      i18n.SEVERITY_CRITICAL_LABEL,
+    ]);
   });
 
   it('should call onSeverityChange with selected severity when an option is clicked', () => {
diff --git a/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx b/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx
index 619f4c58d12df..aefdd895a5b02 100644
--- a/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx
+++ b/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx
@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { euiLightVars } from '@kbn/ui-theme';
 import React from 'react';
 import {
   EuiFlexGroup,
@@ -13,7 +12,9 @@ import {
   EuiHealth,
   EuiSuperSelect,
   EuiSuperSelectOption,
+  useEuiTheme,
 } from '@elastic/eui';
+
 import * as i18n from './translations';
 
 export enum CaseSeverity {
@@ -23,31 +24,37 @@ export enum CaseSeverity {
   CRITICAL = 'critical',
 }
 
-export const severities = {
-  [CaseSeverity.LOW]: {
-    color: euiLightVars.euiColorVis0,
-    label: i18n.SEVERITY_LOW_LABEL,
-  },
-  [CaseSeverity.MEDIUM]: {
-    color: euiLightVars.euiColorVis5,
-    label: i18n.SEVERITY_MEDIUM_LABEL,
-  },
-  [CaseSeverity.HIGH]: {
-    color: euiLightVars.euiColorVis7,
-    label: i18n.SEVERITY_HIGH_LABEL,
-  },
-  [CaseSeverity.CRITICAL]: {
-    color: euiLightVars.euiColorVis9,
-    label: i18n.SEVERITY_CRITICAL_LABEL,
-  },
-};
-
 interface Props {
   selectedSeverity: CaseSeverity;
   onSeverityChange: (status: CaseSeverity) => void;
 }
 
 export const SeverityFilter: React.FC<Props> = ({ selectedSeverity, onSeverityChange }) => {
+  const { euiTheme } = useEuiTheme();
+  const isAmsterdam = euiTheme.flags.hasVisColorAdjustment;
+
+  const severities = {
+    [CaseSeverity.LOW]: {
+      color: isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.vis.euiColorSeverity5,
+      label: i18n.SEVERITY_LOW_LABEL,
+    },
+    [CaseSeverity.MEDIUM]: {
+      color: isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.vis.euiColorSeverity7,
+      label: i18n.SEVERITY_MEDIUM_LABEL,
+    },
+    [CaseSeverity.HIGH]: {
+      color: isAmsterdam
+        ? euiTheme.colors.vis.euiColorVis7
+        : euiTheme.colors.vis.euiColorSeverity10,
+      label: i18n.SEVERITY_HIGH_LABEL,
+    },
+    [CaseSeverity.CRITICAL]: {
+      color: isAmsterdam
+        ? euiTheme.colors.vis.euiColorVis9
+        : euiTheme.colors.vis.euiColorSeverity14,
+      label: i18n.SEVERITY_CRITICAL_LABEL,
+    },
+  };
   const caseSeverities = Object.keys(severities) as CaseSeverity[];
   const options: Array<EuiSuperSelectOption<CaseSeverity>> = caseSeverities.map((severity) => {
     const severityData = severities[severity];
diff --git a/x-pack/platform/plugins/shared/stack_connectors/tsconfig.json b/x-pack/platform/plugins/shared/stack_connectors/tsconfig.json
index 79f6aa48aaa26..18d8722b51abd 100644
--- a/x-pack/platform/plugins/shared/stack_connectors/tsconfig.json
+++ b/x-pack/platform/plugins/shared/stack_connectors/tsconfig.json
@@ -36,7 +36,6 @@
     "@kbn/core-saved-objects-api-server-mocks",
     "@kbn/alerting-plugin",
     "@kbn/securitysolution-ecs",
-    "@kbn/ui-theme",
     "@kbn/cases-components",
     "@kbn/code-editor-mock",
     "@kbn/utility-types",
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/components/text_area_with_autocomplete/index.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/components/text_area_with_autocomplete/index.tsx
index da3b08fda8e18..896f7e2cb2e7d 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/components/text_area_with_autocomplete/index.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/components/text_area_with_autocomplete/index.tsx
@@ -17,11 +17,9 @@ import {
   EuiHighlight,
   EuiOutsideClickDetector,
   useEuiTheme,
-  useEuiBackgroundColor,
 } from '@elastic/eui';
 import { ActionVariable } from '@kbn/alerting-plugin/common';
 import { AddMessageVariables } from '@kbn/alerts-ui-shared';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { filterSuggestions } from './lib/filter_suggestions_for_autocomplete';
 import { templateActionVariable } from './lib/template_action_variable';
 
@@ -48,7 +46,7 @@ export const TextAreaWithAutocomplete: React.FunctionComponent<TextAreaWithAutoc
   paramsProperty,
 }) => {
   const { euiTheme } = useEuiTheme();
-  const backgroundColor = useEuiBackgroundColor('plain');
+  const backgroundColor = euiTheme.colors.backgroundBasePlain;
 
   const textAreaRef = React.useRef<HTMLTextAreaElement | null>(null);
   const selectableRef = React.useRef<EuiSelectable | null>(null);
@@ -272,12 +270,13 @@ export const TextAreaWithAutocomplete: React.FunctionComponent<TextAreaWithAutoc
       left: popupPosition.left,
       border: `${euiTheme.border.width.thin} solid ${euiTheme.border.color}`,
       background: backgroundColor,
-      zIndex: euiThemeVars.euiZLevel1,
+      zIndex: euiTheme.levels.flyout,
     }),
     [
       backgroundColor,
       euiTheme.border.color,
       euiTheme.border.width.thin,
+      euiTheme.levels.flyout,
       popupPosition.left,
       popupPosition.top,
       popupPosition.width,
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.tsx
index 6e590b0ed38d4..c14d6462a2a7f 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.tsx
@@ -306,7 +306,7 @@ const ConnectorAddModal = ({
         {canSave ? (
           <EuiButton
             fill
-            color="success"
+            color="primary"
             data-test-subj="saveActionButtonModal"
             type="submit"
             iconType="check"
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/action_connector_form/connector_rules_list.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/action_connector_form/connector_rules_list.tsx
index 719cd0fef2377..93a635ddc5bf4 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/action_connector_form/connector_rules_list.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/action_connector_form/connector_rules_list.tsx
@@ -18,6 +18,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFieldSearch,
+  useEuiTheme,
 } from '@elastic/eui';
 import { fromKueryExpression } from '@kbn/es-query';
 import {
@@ -42,6 +43,7 @@ export interface ConnectorRulesListProps {
 
 export const ConnectorRulesList = (props: ConnectorRulesListProps) => {
   const { connector } = props;
+  const { euiTheme } = useEuiTheme();
 
   const {
     application: { getUrlForApp },
@@ -192,7 +194,7 @@ export const ConnectorRulesList = (props: ConnectorRulesListProps) => {
         render: (_, rule: Rule) => {
           return (
             rule.lastRun && (
-              <EuiHealth color={getRuleHealthColor(rule) || 'default'}>
+              <EuiHealth color={getRuleHealthColor(rule, euiTheme) || 'default'}>
                 {rulesLastRunOutcomeTranslationMapping[rule.lastRun.outcome]}
               </EuiHealth>
             )
@@ -200,7 +202,7 @@ export const ConnectorRulesList = (props: ConnectorRulesListProps) => {
         },
       },
     ];
-  }, [ruleTypesState, tagPopoverOpenId, getUrlForApp, onSetTagPopoverOpenId]);
+  }, [ruleTypesState, tagPopoverOpenId, getUrlForApp, onSetTagPopoverOpenId, euiTheme]);
 
   const onChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     setSearchText(e.target.value);
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/action_connector_form/create_connector_flyout/index.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/action_connector_form/create_connector_flyout/index.tsx
index c341f861b5ead..12b98fcaeee43 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/action_connector_form/create_connector_flyout/index.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/action_connector_form/create_connector_flyout/index.tsx
@@ -266,7 +266,7 @@ const CreateConnectorFlyoutComponent: React.FC<CreateConnectorFlyoutProps> = ({
                   {onTestConnector && (
                     <EuiFlexItem grow={false}>
                       <EuiButton
-                        color="success"
+                        color="primary"
                         data-test-subj="create-connector-flyout-save-test-btn"
                         type="submit"
                         isLoading={isSaving}
@@ -283,7 +283,7 @@ const CreateConnectorFlyoutComponent: React.FC<CreateConnectorFlyoutProps> = ({
                   <EuiFlexItem grow={false}>
                     <EuiButton
                       fill
-                      color="success"
+                      color="primary"
                       data-test-subj="create-connector-flyout-save-btn"
                       type="submit"
                       isLoading={isSaving}
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/action_connector_form/edit_connector_flyout/index.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/action_connector_form/edit_connector_flyout/index.tsx
index 09ac4c1827022..8b30535fd9bd2 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/action_connector_form/edit_connector_flyout/index.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/action_connector_form/edit_connector_flyout/index.tsx
@@ -259,7 +259,7 @@ const EditConnectorFlyoutComponent: React.FC<EditConnectorFlyoutProps> = ({
                 <EuiButton
                   fill
                   iconType={isSaved ? 'check' : undefined}
-                  color="success"
+                  color="primary"
                   data-test-subj="edit-connector-flyout-save-btn"
                   isLoading={isSaving}
                   onClick={onClickSave}
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_counts.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_counts.tsx
index 67c4852cae41c..10a62046b0ab9 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_counts.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_counts.tsx
@@ -41,7 +41,7 @@ export const AlertCounts = ({ activeAlertCount, recoveredAlertCount, handleClick
       <AlertItem
         label={ACTIVE_NOW_LABEL}
         count={activeAlertCount}
-        color={activeAlertCount > 0 ? euiTheme.colors.dangerText : euiTheme.colors.successText}
+        color={activeAlertCount > 0 ? euiTheme.colors.textDanger : euiTheme.colors.textSuccess}
         alertType={ALERT_STATUS_ACTIVE}
         handleClick={handleClick}
         showWarningIcon={true}
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/alerts_page/hooks/use_rule_stats.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/alerts_page/hooks/use_rule_stats.tsx
index 4d3841672defb..e16dcbb05d8c3 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/alerts_page/hooks/use_rule_stats.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/alerts_page/hooks/use_rule_stats.tsx
@@ -9,7 +9,6 @@ import { i18n } from '@kbn/i18n';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { EuiButtonEmpty, EuiStat } from '@elastic/eui';
 import styled from '@emotion/styled';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { loadRuleAggregations, useKibana } from '../../../..';
 
 const Stat = styled(EuiStat)`
@@ -19,7 +18,7 @@ const Stat = styled(EuiStat)`
 `;
 
 const Divider = styled.div`
-  border-right: 1px solid ${euiThemeVars.euiColorLightShade};
+  border-right: ${(props) => props.theme.euiTheme.border.thin};
   height: 100%;
 `;
 
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/alerts_table/cells/alert_lifecycle_status_cell.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/alerts_table/cells/alert_lifecycle_status_cell.tsx
index c050ac2e4a3e2..8c04b48ee7670 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/alerts_table/cells/alert_lifecycle_status_cell.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/alerts_table/cells/alert_lifecycle_status_cell.tsx
@@ -7,20 +7,16 @@
 
 import { AlertStatus, ALERT_FLAPPING, ALERT_STATUS } from '@kbn/rule-data-utils';
 import React, { memo } from 'react';
-import { EuiBadge, EuiFlexGroup, EuiToolTip } from '@elastic/eui';
+import { EuiBadge, EuiFlexGroup, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { AlertLifecycleStatusBadge } from '../../../components/alert_lifecycle_status_badge';
 import { CellComponentProps } from '../types';
 import { DefaultCell } from './default_cell';
 import { useAlertMutedState } from '../hooks/alert_mute/use_alert_muted_state';
 
-const mutedBadgeStyle = css`
-  padding-inline: ${euiThemeVars.euiSizeXS};
-`;
-
 const AlertLifecycleStatusCellComponent: React.FC<CellComponentProps> = (props) => {
+  const { euiTheme } = useEuiTheme();
   const { alert, showAlertStatusWithFlapping } = props;
   const { isMuted } = useAlertMutedState(alert);
 
@@ -45,7 +41,12 @@ const AlertLifecycleStatusCellComponent: React.FC<CellComponentProps> = (props)
               defaultMessage: 'Alert muted',
             })}
           >
-            <EuiBadge iconType="bellSlash" css={mutedBadgeStyle} />
+            <EuiBadge
+              iconType="bellSlash"
+              css={css`
+                padding-inline: ${euiTheme.size.xs};
+              `}
+            />
           </EuiToolTip>
         )}
       </EuiFlexGroup>
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status.tsx
index 2dc460fc755ca..53862a17df04f 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { useMemo } from 'react';
-import { EuiIcon } from '@elastic/eui';
+import { EuiIcon, useEuiTheme } from '@elastic/eui';
 import { RuleAlertingOutcome } from '@kbn/alerting-plugin/common';
 import {
   RULE_LAST_RUN_OUTCOME_SUCCEEDED,
@@ -30,13 +30,6 @@ const iconStyles = {
   marginRight: '8px',
 };
 
-const STATUS_TO_COLOR: Record<RuleAlertingOutcome, string> = {
-  success: 'success',
-  failure: 'danger',
-  unknown: 'gray',
-  warning: 'warning',
-};
-
 const STATUS_TO_OUTCOME: Record<RuleAlertingOutcome, string> = {
   success: RULE_LAST_RUN_OUTCOME_SUCCEEDED,
   failure: RULE_LAST_RUN_OUTCOME_FAILED,
@@ -45,7 +38,14 @@ const STATUS_TO_OUTCOME: Record<RuleAlertingOutcome, string> = {
 };
 
 export const EventLogListStatus = (props: EventLogListStatusProps) => {
+  const { euiTheme } = useEuiTheme();
   const { status, useExecutionStatus = true } = props;
+  const STATUS_TO_COLOR: Record<RuleAlertingOutcome, string> = {
+    success: euiTheme.colors.success,
+    failure: euiTheme.colors.danger,
+    unknown: euiTheme.colors.mediumShade,
+    warning: euiTheme.colors.warning,
+  };
   const color = STATUS_TO_COLOR[status] || 'gray';
 
   const statusString = useMemo(() => {
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx
index 6ab5b96cade27..a3bc732beae9e 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx
@@ -16,8 +16,8 @@ import {
   EuiTitle,
   EuiSelect,
   EuiLoadingChart,
+  useEuiTheme,
 } from '@elastic/eui';
-import { euiLightVars as lightEuiTheme } from '@kbn/ui-theme';
 import {
   Axis,
   BarSeries,
@@ -60,6 +60,8 @@ export const ExecutionDurationChart: React.FunctionComponent<ComponentOpts> = ({
   onChangeDuration,
   isLoading,
 }: ComponentOpts) => {
+  const { euiTheme } = useEuiTheme();
+
   const paddedExecutionDurations = padOrTruncateDurations(
     executionDuration.valuesWithTimestamp,
     numberOfExecutions
@@ -117,7 +119,7 @@ export const ExecutionDurationChart: React.FunctionComponent<ComponentOpts> = ({
                 theme={{
                   lineSeriesStyle: {
                     point: { visible: 'never' },
-                    line: { stroke: lightEuiTheme.euiColorAccent },
+                    line: { stroke: euiTheme.colors.accent },
                   },
                 }}
                 // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rule_details/components/rule.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rule_details/components/rule.tsx
index 593e0a989b5f3..fb5e6dab336ca 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rule_details/components/rule.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rule_details/components/rule.tsx
@@ -7,7 +7,7 @@
 
 import React, { lazy, useCallback, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiTabbedContent } from '@elastic/eui';
+import { EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiTabbedContent, useEuiTheme } from '@elastic/eui';
 import { AlertStatusValues } from '@kbn/alerting-plugin/common';
 import { ALERT_RULE_UUID } from '@kbn/rule-data-utils';
 import { ALERT_TABLE_GENERIC_CONFIG_ID } from '../../../constants';
@@ -75,6 +75,8 @@ export function RuleComponent({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const lastReloadRequestTime = useMemo(() => new Date().getTime(), [refreshToken]);
 
+  const { euiTheme } = useEuiTheme();
+
   const alerts = Object.entries(ruleSummary.alerts)
     .map(([alertId, alert]) => alertToListItem(durationEpoch, alertId, alert))
     .sort((leftAlert, rightAlert) => leftAlert.sortPriority - rightAlert.sortPriority);
@@ -89,7 +91,7 @@ export function RuleComponent({
     [muteAlertInstance, requestRefresh, rule, unmuteAlertInstance]
   );
 
-  const healthColor = getRuleHealthColor(rule);
+  const healthColor = getRuleHealthColor(rule, euiTheme);
   const statusMessage = getRuleStatusMessage({
     rule,
     licenseErrorText: ALERT_STATUS_LICENSE_ERROR,
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rule_details/components/rule_execution_summary_and_chart.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rule_details/components/rule_execution_summary_and_chart.tsx
index d5d740748b371..de85e91f42361 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rule_details/components/rule_execution_summary_and_chart.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rule_details/components/rule_execution_summary_and_chart.tsx
@@ -192,7 +192,7 @@ export const RuleExecutionSummaryAndChart = (props: RuleExecutionSummaryAndChart
               </EuiFlexItem>
             )}
             <EuiFlexItem grow={false} data-test-subj="ruleEventLogListAvgDuration">
-              <EuiText size="m" color={euiTheme.colors.text}>
+              <EuiText size="m" color={euiTheme.colors.textParagraph}>
                 <strong>
                   {formatMillisForDisplay(computedRuleSummary.executionDuration.average)}
                 </strong>
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rule_form/rule_add_footer.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rule_form/rule_add_footer.tsx
index 9ca30dd49660d..1e9c5eb1ca485 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rule_form/rule_add_footer.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rule_form/rule_add_footer.tsx
@@ -75,7 +75,7 @@ export const RuleAddFooter = ({
             <EuiFlexItem grow={false}>
               <EuiButton
                 fill
-                color="success"
+                color="primary"
                 data-test-subj="saveRuleButton"
                 type="submit"
                 iconType="check"
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rule_form/rule_edit.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rule_form/rule_edit.tsx
index 5d1337063948d..9e6c535aec939 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rule_form/rule_edit.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rule_form/rule_edit.tsx
@@ -348,7 +348,7 @@ export const RuleEdit = <
                     <EuiFlexItem grow={false}>
                       <EuiButton
                         fill
-                        color="success"
+                        color="primary"
                         data-test-subj="saveEditedRuleButton"
                         type="submit"
                         iconType="check"
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_execution_status_filter.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_execution_status_filter.tsx
index 84c02de34d339..2d0bd99f8ea84 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_execution_status_filter.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_execution_status_filter.tsx
@@ -77,7 +77,7 @@ export const RuleExecutionStatusFilter: React.FunctionComponent<RuleExecutionSta
           @see https://elastic.github.io/eui/#/forms/filter-group#multi-select */}
       <div className="eui-yScroll" css={{ maxHeight: euiTheme.base * 30 }}>
         {sortedRuleExecutionStatusValues.map((item: RuleExecutionStatuses) => {
-          const healthColor = getExecutionStatusHealthColor(item);
+          const healthColor = getExecutionStatusHealthColor(item, euiTheme);
           return (
             <EuiFilterSelectItem
               key={item}
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_last_run_outcome_filter.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_last_run_outcome_filter.tsx
index 5f9be80873803..19817cfda9a3e 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_last_run_outcome_filter.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_last_run_outcome_filter.tsx
@@ -77,7 +77,7 @@ export const RuleLastRunOutcomeFilter: React.FunctionComponent<RuleLastRunOutcom
           @see https://elastic.github.io/eui/#/forms/filter-group#multi-select */}
       <div className="eui-yScroll" css={{ maxHeight: euiTheme.base * 30 }}>
         {sortedRuleLastRunOutcomeValues.map((item: RuleLastRunOutcomes) => {
-          const healthColor = getOutcomeHealthColor(item);
+          const healthColor = getOutcomeHealthColor(item, euiTheme);
           return (
             <EuiFilterSelectItem
               key={item}
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx
index 3d6523a144e99..db61f3353be1e 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx
@@ -216,31 +216,32 @@ export const BaseSnoozePanel: React.FunctionComponent<BaseSnoozePanelProps> = ({
                   const isActive = schedule.id && activeSnoozes.includes(schedule.id);
                   return (
                     <EuiFlexItem key={`snooze-${schedule.id}`}>
-                      <button
+                      <EuiButton
+                        size="s"
+                        onClick={onClickEditScheduleFactory(schedule as SnoozeSchedule)}
+                        iconType={isActive ? 'bellSlash' : 'calendar'}
+                        iconSide="left"
                         style={{
                           paddingLeft: '9px',
                           paddingRight: '9px',
-                          height: '36px',
-                          // Replicate euiPanel--accent vs euiPanel--subdued
-                          // Applying these classNames by themselves doesn't work due to a CSS-in-JS issue with EuiPanel
-                          color: isActive ? '#a8376a' : euiTheme.colors.subduedText,
-                          backgroundColor: isActive ? 'rgba(240,78,152,0.2)' : euiTheme.colors.body,
+                          color: isActive
+                            ? euiTheme.colors.textAccent
+                            : euiTheme.colors.textSubdued,
+                          backgroundColor: isActive
+                            ? euiTheme.colors.backgroundLightAccent
+                            : euiTheme.colors.body,
                         }}
-                        className="euiButton euiPanel euiPanel--borderRadiusMedium euiPanel--noShadow euiPanel--noBorder"
-                        onClick={onClickEditScheduleFactory(schedule as SnoozeSchedule)}
+                        fullWidth={true}
                       >
                         <EuiFlexGroup alignItems="center">
                           <EuiFlexItem grow={false}>
-                            <EuiIcon type={isActive ? 'bellSlash' : 'calendar'} />
-                          </EuiFlexItem>
-                          <EuiFlexItem style={{ textAlign: 'left' }}>
                             {scheduleSummary(schedule as SnoozeSchedule)}
                           </EuiFlexItem>
                           <EuiFlexItem grow={false}>
                             <EuiIcon type="arrowRight" />
                           </EuiFlexItem>
                         </EuiFlexGroup>
-                      </button>
+                      </EuiButton>
                     </EuiFlexItem>
                   );
                 })}
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_statuses.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_statuses.tsx
index 12d044462ad3a..eeea751b48fff 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_statuses.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_statuses.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiHealth } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiHealth, useEuiTheme } from '@elastic/eui';
 import { getIsExperimentalFeatureEnabled } from '../../../../common/get_experimental_features';
 
 import {
@@ -27,6 +27,7 @@ interface RulesListStatusesProps {
 }
 
 export const RulesListStatuses = (props: RulesListStatusesProps) => {
+  const { euiTheme } = useEuiTheme();
   const { rulesStatuses, rulesLastRunOutcomes } = props;
 
   const isRuleUsingExecutionStatus = getIsExperimentalFeatureEnabled('ruleUseExecutionStatus');
@@ -35,27 +36,27 @@ export const RulesListStatuses = (props: RulesListStatusesProps) => {
     return (
       <EuiFlexGroup alignItems="center" gutterSize="none">
         <EuiFlexItem grow={false}>
-          <EuiHealth color="success" data-test-subj="totalActiveRulesCount">
+          <EuiHealth color={euiTheme.colors.success} data-test-subj="totalActiveRulesCount">
             {RULE_STATUS_ACTIVE(rulesStatuses.active)}
           </EuiHealth>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiHealth color="danger" data-test-subj="totalErrorRulesCount">
+          <EuiHealth color={euiTheme.colors.danger} data-test-subj="totalErrorRulesCount">
             {RULE_STATUS_ERROR(rulesStatuses.error)}
           </EuiHealth>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiHealth color="warning" data-test-subj="totalWarningRulesCount">
+          <EuiHealth color={euiTheme.colors.warning} data-test-subj="totalWarningRulesCount">
             {RULE_STATUS_WARNING(rulesStatuses.warning)}
           </EuiHealth>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiHealth color="primary" data-test-subj="totalOkRulesCount">
+          <EuiHealth color={euiTheme.colors.primary} data-test-subj="totalOkRulesCount">
             {RULE_STATUS_OK(rulesStatuses.ok)}
           </EuiHealth>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiHealth color="accent" data-test-subj="totalPendingRulesCount">
+          <EuiHealth color={euiTheme.colors.accent} data-test-subj="totalPendingRulesCount">
             {RULE_STATUS_PENDING(rulesStatuses.pending)}
           </EuiHealth>
         </EuiFlexItem>
@@ -71,17 +72,17 @@ export const RulesListStatuses = (props: RulesListStatusesProps) => {
   return (
     <EuiFlexGroup alignItems="center" gutterSize="none">
       <EuiFlexItem grow={false}>
-        <EuiHealth color="success" data-test-subj="totalSucceededRulesCount">
+        <EuiHealth color={euiTheme.colors.success} data-test-subj="totalSucceededRulesCount">
           {RULE_LAST_RUN_OUTCOME_SUCCEEDED_DESCRIPTION(rulesLastRunOutcomes.succeeded)}
         </EuiHealth>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiHealth color="danger" data-test-subj="totalFailedRulesCount">
+        <EuiHealth color={euiTheme.colors.danger} data-test-subj="totalFailedRulesCount">
           {RULE_LAST_RUN_OUTCOME_FAILED_DESCRIPTION(rulesLastRunOutcomes.failed)}
         </EuiHealth>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiHealth color="warning" data-test-subj="totalWarningRulesCount">
+        <EuiHealth color={euiTheme.colors.warning} data-test-subj="totalWarningRulesCount">
           {RULE_LAST_RUN_OUTCOME_WARNING_DESCRIPTION(rulesLastRunOutcomes.warning)}
         </EuiHealth>
       </EuiFlexItem>
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table_status_cell.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table_status_cell.tsx
index 759e16c7f696d..4dbd49078a65d 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table_status_cell.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table_status_cell.tsx
@@ -14,6 +14,7 @@ import {
   EuiHealth,
   EuiToolTip,
   EuiStat,
+  useEuiTheme,
 } from '@elastic/eui';
 import { RuleTableItem } from '../../../../types';
 import {
@@ -33,11 +34,12 @@ export interface RulesListTableStatusCellProps {
 }
 
 export const RulesListTableStatusCell = (props: RulesListTableStatusCellProps) => {
+  const { euiTheme } = useEuiTheme();
   const { rule, onManageLicenseClick } = props;
   const { lastRun } = rule;
 
   const isLicenseError = getIsLicenseError(rule);
-  const healthColor = getRuleHealthColor(rule);
+  const healthColor = getRuleHealthColor(rule, euiTheme);
   const statusMessage = getRuleStatusMessage({
     rule,
     licenseErrorText: ALERT_STATUS_LICENSE_ERROR,
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/common/lib/rule_status_helper.test.ts b/x-pack/platform/plugins/shared/triggers_actions_ui/public/common/lib/rule_status_helper.test.ts
index b2c4bc79ea78d..506a96db21074 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/common/lib/rule_status_helper.test.ts
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/common/lib/rule_status_helper.test.ts
@@ -6,6 +6,7 @@
  */
 
 import { getRuleHealthColor, getRuleStatusMessage } from './rule_status_helpers';
+import { EuiThemeComputed } from '@elastic/eui';
 import { RuleTableItem } from '../../types';
 
 import { getIsExperimentalFeatureEnabled } from '../get_experimental_features';
@@ -19,6 +20,16 @@ jest.mock('../get_experimental_features', () => ({
   getIsExperimentalFeatureEnabled: jest.fn(),
 }));
 
+const mockTheme = {
+  colors: {
+    success: '008A5E',
+    warning: '#FACB3D',
+    danger: '#C61E25',
+    primary: '#0B64DD',
+    accent: '#BC1E70',
+  },
+} as EuiThemeComputed;
+
 const mockRule = {
   id: '1',
   enabled: true,
@@ -70,33 +81,33 @@ beforeEach(() => {
 
 describe('getRuleHealthColor', () => {
   it('should return the correct color for successful rule', () => {
-    let color = getRuleHealthColor(mockRule);
-    expect(color).toEqual('success');
+    let color = getRuleHealthColor(mockRule, mockTheme);
+    expect(color).toEqual(mockTheme.colors.success);
 
     (getIsExperimentalFeatureEnabled as jest.Mock<any, any>).mockImplementation(() => true);
 
-    color = getRuleHealthColor(mockRule);
-    expect(color).toEqual('success');
+    color = getRuleHealthColor(mockRule, mockTheme);
+    expect(color).toEqual(mockTheme.colors.success);
   });
 
   it('should return the correct color for warning rule', () => {
-    let color = getRuleHealthColor(warningRule);
-    expect(color).toEqual('warning');
+    let color = getRuleHealthColor(warningRule, mockTheme);
+    expect(color).toEqual(mockTheme.colors.warning);
 
     (getIsExperimentalFeatureEnabled as jest.Mock<any, any>).mockImplementation(() => true);
 
-    color = getRuleHealthColor(warningRule);
-    expect(color).toEqual('warning');
+    color = getRuleHealthColor(warningRule, mockTheme);
+    expect(color).toEqual(mockTheme.colors.warning);
   });
 
   it('should return the correct color for failed rule', () => {
-    let color = getRuleHealthColor(failedRule);
-    expect(color).toEqual('danger');
+    let color = getRuleHealthColor(failedRule, mockTheme);
+    expect(color).toEqual(mockTheme.colors.danger);
 
     (getIsExperimentalFeatureEnabled as jest.Mock<any, any>).mockImplementation(() => true);
 
-    color = getRuleHealthColor(failedRule);
-    expect(color).toEqual('danger');
+    color = getRuleHealthColor(failedRule, mockTheme);
+    expect(color).toEqual(mockTheme.colors.danger);
   });
 });
 
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/common/lib/rule_status_helpers.ts b/x-pack/platform/plugins/shared/triggers_actions_ui/public/common/lib/rule_status_helpers.ts
index ceb83870ca724..26335b41cf5cb 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/common/lib/rule_status_helpers.ts
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/common/lib/rule_status_helpers.ts
@@ -9,45 +9,49 @@ import {
   RuleExecutionStatuses,
   RuleExecutionStatusErrorReasons,
 } from '@kbn/alerting-plugin/common';
+import { type EuiThemeComputed } from '@elastic/eui';
 import { getIsExperimentalFeatureEnabled } from '../get_experimental_features';
 import { Rule } from '../../types';
 
-export const getOutcomeHealthColor = (status: RuleLastRunOutcomes) => {
+export const getOutcomeHealthColor = (status: RuleLastRunOutcomes, euiTheme: EuiThemeComputed) => {
   switch (status) {
     case 'succeeded':
-      return 'success';
+      return euiTheme.colors.success;
     case 'failed':
-      return 'danger';
+      return euiTheme.colors.danger;
     case 'warning':
-      return 'warning';
+      return euiTheme.colors.warning;
     default:
       return 'subdued';
   }
 };
 
-export const getExecutionStatusHealthColor = (status: RuleExecutionStatuses) => {
+export const getExecutionStatusHealthColor = (
+  status: RuleExecutionStatuses,
+  euiTheme: EuiThemeComputed
+) => {
   switch (status) {
     case 'active':
-      return 'success';
+      return euiTheme.colors.success;
     case 'error':
-      return 'danger';
+      return euiTheme.colors.danger;
     case 'ok':
-      return 'primary';
+      return euiTheme.colors.primary;
     case 'pending':
-      return 'accent';
+      return euiTheme.colors.accent;
     case 'warning':
-      return 'warning';
+      return euiTheme.colors.warning;
     default:
       return 'subdued';
   }
 };
 
-export const getRuleHealthColor = (rule: Rule) => {
+export const getRuleHealthColor = (rule: Rule, euiTheme: EuiThemeComputed) => {
   const isRuleUsingExecutionStatus = getIsExperimentalFeatureEnabled('ruleUseExecutionStatus');
   if (isRuleUsingExecutionStatus) {
-    return getExecutionStatusHealthColor(rule.executionStatus.status);
+    return getExecutionStatusHealthColor(rule.executionStatus.status, euiTheme);
   }
-  return (rule.lastRun && getOutcomeHealthColor(rule.lastRun.outcome)) || 'subdued';
+  return (rule.lastRun && getOutcomeHealthColor(rule.lastRun.outcome, euiTheme)) || 'subdued';
 };
 
 export const getIsLicenseError = (rule: Rule) => {
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/tsconfig.json b/x-pack/platform/plugins/shared/triggers_actions_ui/tsconfig.json
index 66fe1224520f3..e24bd9664df7e 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/tsconfig.json
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/tsconfig.json
@@ -41,7 +41,6 @@
     "@kbn/core-http-browser",
     "@kbn/core-notifications-browser",
     "@kbn/core-doc-links-browser",
-    "@kbn/ui-theme",
     "@kbn/datemath",
     "@kbn/core-capabilities-common",
     "@kbn/shared-ux-router",