diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx
index eeb6e83368acd..46a28da4def99 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx
@@ -7,7 +7,6 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { AssistantAvatar } from './assistant_avatar/assistant_avatar';
 
 const Container = styled.div`
@@ -18,8 +17,8 @@ const Container = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-top: ${euiThemeVars.euiSizeXXL};
-  margin-bottom: ${euiThemeVars.euiSizeL};
+  margin-top: ${(props) => props.theme.euiTheme.size.xxl};
+  margin-bottom: ${(props) => props.theme.euiTheme.size.xxl};
 
   :before,
   :after {
@@ -45,7 +44,7 @@ const Animation = styled.div`
     top: 0;
     left: 0;
     z-index: 0;
-    border: 1px solid ${euiThemeVars.euiColorPrimary};
+    border: 1px solid ${(props) => props.theme.euiTheme.colors.borderBasePlain};
     border-radius: inherit;
     animation: 4s cubic-bezier(0.42, 0, 0.37, 1) 0.5s infinite normal none running pulsing;
   }
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_body/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_body/index.tsx
index 757f385db058c..8451e012f8927 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_body/index.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_body/index.tsx
@@ -13,9 +13,15 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
+import {
+  EuiEmptyPrompt,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiText,
+  useEuiTheme,
+} from '@elastic/eui';
 import { HttpSetup } from '@kbn/core-http-browser';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { css } from '@emotion/react';
 import { PromptResponse } from '@kbn/elastic-assistant-common';
 import { AssistantAnimatedIcon } from '../assistant_animated_icon';
@@ -53,6 +59,8 @@ export const AssistantBody: FunctionComponent<Props> = ({
   isWelcomeSetup,
   setIsSettingsModalVisible,
 }) => {
+  const { euiTheme } = useEuiTheme();
+
   const isEmptyConversation = useMemo(
     () => currentConversation?.messages.length === 0,
     [currentConversation?.messages.length]
@@ -64,16 +72,16 @@ export const AssistantBody: FunctionComponent<Props> = ({
         <EuiText
           data-test-subj="assistant-disclaimer"
           textAlign="center"
-          color={euiThemeVars.euiColorMediumShade}
+          color={euiTheme.colors.backgroundBaseFormsControlDisabled}
           size="xs"
           css={css`
-            margin: 0 ${euiThemeVars.euiSizeL} ${euiThemeVars.euiSizeM} ${euiThemeVars.euiSizeL};
+            margin: 0 ${euiTheme.size.l} ${euiTheme.size.m} ${euiTheme.size.l};
           `}
         >
           {i18n.DISCLAIMER}
         </EuiText>
       ),
-    [isEmptyConversation]
+    [euiTheme, isEmptyConversation]
   );
 
   // Start Scrolling
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/index.tsx
index 406ef8be16c73..e604fb142073c 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/index.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/index.tsx
@@ -14,9 +14,9 @@ import {
   EuiPanel,
   EuiToolTip,
   EuiSkeletonTitle,
+  useEuiTheme,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { isEmpty } from 'lodash';
 import { DataStreamApis } from '../use_data_stream_apis';
 import { Conversation } from '../../..';
@@ -79,6 +79,8 @@ export const AssistantHeader: React.FC<Props> = ({
   isAssistantEnabled,
   refetchPrompts,
 }) => {
+  const { euiTheme } = useEuiTheme();
+
   const showAnonymizedValuesChecked = useMemo(
     () =>
       selectedConversation?.replacements != null &&
@@ -148,8 +150,8 @@ export const AssistantHeader: React.FC<Props> = ({
         hasShadow={false}
         paddingSize="m"
         css={css`
-          padding-top: ${euiThemeVars.euiSizeS};
-          padding-bottom: ${euiThemeVars.euiSizeS};
+          padding-top: ${euiTheme.size.s};
+          padding-bottom: ${euiTheme.size.s};
         `}
       >
         <EuiFlexGroup alignItems={'center'} justifyContent={'spaceBetween'} gutterSize="s">
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/flyout_navigation.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/flyout_navigation.tsx
index 89518940799ee..627def9d0996a 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/flyout_navigation.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/flyout_navigation.tsx
@@ -6,11 +6,17 @@
  */
 
 import React, { memo, useCallback, useMemo } from 'react';
-import { EuiPanel, EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiButtonEmpty } from '@elastic/eui';
+import {
+  EuiPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonIcon,
+  EuiButtonEmpty,
+  useEuiTheme,
+} from '@elastic/eui';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { i18n } from '@kbn/i18n';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { NEW_CHAT } from '../conversations/conversation_sidepanel/translations';
 
 export interface FlyoutNavigationProps {
@@ -26,7 +32,7 @@ const VerticalSeparator = styled.div`
   :before {
     content: '';
     height: 100%;
-    border-left: 1px solid ${euiThemeVars.euiColorLightShade};
+    border-left: 1px solid ${(props) => props.theme.euiTheme.colors.borderBasePlain};
   }
 `;
 
@@ -44,6 +50,8 @@ export const FlyoutNavigation = memo<FlyoutNavigationProps>(
     onConversationCreate,
     isAssistantEnabled,
   }) => {
+    const { euiTheme } = useEuiTheme();
+
     const onToggle = useCallback(
       () => setIsExpanded && setIsExpanded(!isExpanded),
       [isExpanded, setIsExpanded]
@@ -84,7 +92,7 @@ export const FlyoutNavigation = memo<FlyoutNavigationProps>(
         paddingSize="s"
         grow={false}
         css={css`
-          border-bottom: 1px solid ${euiThemeVars.euiColorLightShade};
+          border-bottom: 1px solid ${euiTheme.colors.borderBasePlain};
         `}
       >
         <EuiFlexGroup
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_send/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_send/index.tsx
index cdfa12e3507f0..8197293a5d1f4 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_send/index.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_send/index.tsx
@@ -7,8 +7,7 @@
 
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { css } from '@emotion/react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { euiThemeVars } from '@kbn/ui-theme';
+import { EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui';
 import { UseChatSend } from './use_chat_send';
 import { ChatActions } from '../chat_actions';
 import { PromptTextArea } from '../prompt_textarea';
@@ -32,6 +31,10 @@ export const ChatSend: React.FC<Props> = ({
   shouldRefocusPrompt,
   userPrompt,
 }) => {
+  const { euiTheme } = useEuiTheme();
+
+  console.error('eui', euiTheme);
+
   // For auto-focusing prompt within timeline
   const promptTextAreaRef = useRef<HTMLTextAreaElement>(null);
   useEffect(() => {
@@ -77,9 +80,9 @@ export const ChatSend: React.FC<Props> = ({
         css={css`
           right: 0;
           position: absolute;
-          margin-right: ${euiThemeVars.euiSizeS};
-          margin-bottom: ${euiThemeVars.euiSizeS};
         `}
+        // margin-right: ${euiTheme.size.s};
+        // margin-bottom: ${euiTheme.size.s};
         grow={false}
       >
         <ChatActions
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/index.tsx
index b20122f822164..298603ebd7c18 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/index.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/index.tsx
@@ -23,8 +23,8 @@ import {
   EuiFlyoutFooter,
   EuiFlyoutHeader,
   EuiFlyoutBody,
+  useEuiTheme,
 } from '@elastic/eui';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { createPortal } from 'react-dom';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -79,6 +79,7 @@ const AssistantComponent: React.FC<Props> = ({
   setChatHistoryVisible,
   shouldRefocusPrompt = false,
 }) => {
+  const { euiTheme } = useEuiTheme();
   const {
     assistantAvailability: { isAssistantEnabled },
     assistantTelemetry,
@@ -378,7 +379,7 @@ const AssistantComponent: React.FC<Props> = ({
           })}
           // Avoid comments going off the flyout
           css={css`
-            padding-bottom: ${euiThemeVars.euiSizeL};
+            padding-bottom: ${euiTheme.size.l};
 
             > li > div:nth-child(2) {
               overflow: hidden;
@@ -402,6 +403,7 @@ const AssistantComponent: React.FC<Props> = ({
       setIsStreaming,
       currentUserAvatar,
       currentSystemPrompt?.content,
+      euiTheme.size.l,
       selectedPromptContextsCount,
     ]
   );
@@ -425,7 +427,7 @@ const AssistantComponent: React.FC<Props> = ({
           grow={false}
           css={css`
             inline-size: ${CONVERSATION_SIDE_PANEL_WIDTH}px;
-            border-right: 1px solid ${euiThemeVars.euiColorLightShade};
+            border-right: 1px solid ${euiTheme.colors.borderBasePlain};
           `}
         >
           <ConversationSidePanel
@@ -531,7 +533,7 @@ const AssistantComponent: React.FC<Props> = ({
               <EuiFlyoutFooter
                 css={css`
                   background: none;
-                  border-top: 1px solid ${euiThemeVars.euiColorLightShade};
+                  border-top: 1px solid ${euiTheme.colors.borderBasePlain};
                   overflow: hidden;
                   max-height: 60%;
                   display: flex;
@@ -591,7 +593,7 @@ const AssistantComponent: React.FC<Props> = ({
                 {!isDisabled && (
                   <EuiPanel
                     css={css`
-                      background: ${euiThemeVars.euiColorLightestShade};
+                      background: ${euiTheme.colors.lightestShade};
                     `}
                     hasShadow={false}
                     paddingSize="m"
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/index.tsx
index df3d49127350c..c99fede5cdc6c 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/index.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/index.tsx
@@ -5,11 +5,17 @@
  * 2.0.
  */
 
-import { EuiAccordion, EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import {
+  EuiAccordion,
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiToolTip,
+  useEuiTheme,
+} from '@elastic/eui';
 import { isEmpty, omit } from 'lodash/fp';
 import React, { useCallback } from 'react';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { Conversation } from '../../../assistant_context/types';
 import { DataAnonymizationEditor } from '../../../data_anonymization_editor';
 import type { PromptContext, SelectedPromptContext } from '../../prompt_context/types';
@@ -30,6 +36,8 @@ const SelectedPromptContextsComponent: React.FC<Props> = ({
   setSelectedPromptContexts,
   currentReplacements,
 }) => {
+  const { euiTheme } = useEuiTheme();
+
   const unselectPromptContext = useCallback(
     (unselectedId: string) => {
       setSelectedPromptContexts((prev) => omit(unselectedId, prev));
@@ -64,13 +72,14 @@ const SelectedPromptContextsComponent: React.FC<Props> = ({
               }
               id={id}
               paddingSize="s"
+              // background: ${euiTheme.colors.backgroundPage};
               css={css`
-                background: ${euiThemeVars.euiPageBackgroundColor};
-                border-radius: ${euiThemeVars.euiBorderRadius};
+                background: red;
+                border-radius: ${euiTheme.border.radius};
 
                 > div:first-child {
-                  color: ${euiThemeVars.euiColorPrimary};
-                  padding: ${euiThemeVars.euiFormControlPadding};
+                  color: ${euiTheme.colors.primary};
+                  padding: ${euiTheme.size.m};
                 }
               `}
               borders={'all'}
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx
index 7d54d347964e4..60f745149a0e2 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx
@@ -5,18 +5,17 @@
  * 2.0.
  */
 
-import { EuiText, EuiToolTip } from '@elastic/eui';
+import { EuiText, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import type { EuiSuperSelectOption } from '@elastic/eui';
 import React from 'react';
 import styled from '@emotion/styled';
 import { isEmpty } from 'lodash/fp';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { PromptResponse } from '@kbn/elastic-assistant-common';
 import { css } from '@emotion/react';
 import { EMPTY_PROMPT } from './translations';
 
 const Strong = styled.strong`
-  margin-right: ${euiThemeVars.euiSizeS};
+  margin-right: ${(props) => props.theme.euiTheme.size.s};
 `;
 
 interface GetOptionFromPromptProps extends PromptResponse {
@@ -25,23 +24,28 @@ interface GetOptionFromPromptProps extends PromptResponse {
   name: string;
 }
 
-export const getOptionFromPrompt = ({
-  content,
-  id,
-  name,
-}: GetOptionFromPromptProps): EuiSuperSelectOption<string> => ({
-  value: id,
-  inputDisplay: (
+const InputDisplay = ({ name }: { name: string }) => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
     <span
       data-test-subj="systemPromptText"
-      // @ts-ignore
       css={css`
-        color: ${euiThemeVars.euiColorDarkestShade};
+        color: ${euiTheme.colors.darkestShade};
       `}
     >
       {name}
     </span>
-  ),
+  );
+};
+
+export const getOptionFromPrompt = ({
+  content,
+  id,
+  name,
+}: GetOptionFromPromptProps): EuiSuperSelectOption<string> => ({
+  value: id,
+  inputDisplay: <InputDisplay name={name} />,
   dropdownDisplay: (
     <>
       <Strong data-test-subj={`systemPrompt-${name}`}>{name}</Strong>
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx
index c567e18a446f4..96106d4b94054 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx
@@ -14,10 +14,10 @@ import {
   EuiFormRow,
   EuiSuperSelect,
   EuiToolTip,
+  useEuiTheme,
 } from '@elastic/eui';
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { euiThemeVars } from '@kbn/ui-theme';
 import {
   PromptResponse,
   PromptTypeEnum,
@@ -56,6 +56,7 @@ const SelectSystemPromptComponent: React.FC<Props> = ({
   selectedPrompt,
   setIsSettingsModalVisible,
 }) => {
+  const { euiTheme } = useEuiTheme();
   const { setSelectedSettingsTab } = useAssistantContext();
   const allSystemPrompts = useMemo(
     () => allPrompts.filter((p) => p.promptType === PromptTypeEnum.system),
@@ -128,7 +129,7 @@ const SelectSystemPromptComponent: React.FC<Props> = ({
           <EuiSuperSelect
             // Limits popover z-index to prevent it from getting too high and covering tooltips.
             // If the z-index is not defined, when a popover is opened, it sets the target z-index + 2000
-            popoverProps={{ zIndex: euiThemeVars.euiZLevel8 }}
+            popoverProps={{ zIndex: euiTheme.levels.modal as number }}
             compressed={compressed}
             data-test-subj={TEST_IDS.PROMPT_SUPERSELECT}
             fullWidth
@@ -168,10 +169,10 @@ const SelectSystemPromptComponent: React.FC<Props> = ({
                 inline-size: 16px;
                 block-size: 16px;
                 border-radius: 16px;
-                background: ${euiThemeVars.euiColorMediumShade};
+                background: ${euiTheme.colors.backgroundBaseFormsControlDisabled};
 
                 :hover:not(:disabled) {
-                  background: ${euiThemeVars.euiColorMediumShade};
+                  background: ${euiTheme.colors.backgroundBaseFormsControlDisabled};
                   transform: none;
                 }
 
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/settings_context_menu/settings_context_menu.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/settings_context_menu/settings_context_menu.tsx
index 7b55e994b47ad..cf393e221393a 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/settings_context_menu/settings_context_menu.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/settings_context_menu/settings_context_menu.tsx
@@ -15,9 +15,9 @@ import {
   EuiNotificationBadge,
   EuiPopover,
   EuiButtonIcon,
+  useEuiTheme,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { KnowledgeBaseTour } from '../../../tour/knowledge_base';
 import { AnonymizationSettingsManagement } from '../../../data_anonymization/settings/anonymization_settings_management';
 import { useAssistantContext } from '../../../..';
@@ -32,6 +32,7 @@ interface Params {
 
 export const SettingsContextMenu: React.FC<Params> = React.memo(
   ({ isDisabled = false, onChatCleared }: Params) => {
+    const { euiTheme } = useEuiTheme();
     const { navigateToApp, knowledgeBase } = useAssistantContext();
 
     const [isPopoverOpen, setPopover] = useState(false);
@@ -139,7 +140,7 @@ export const SettingsContextMenu: React.FC<Params> = React.memo(
           icon={'refresh'}
           data-test-subj={'clear-chat'}
           css={css`
-            color: ${euiThemeVars.euiColorDanger};
+            color: ${euiTheme.colors.danger};
           `}
         >
           {i18n.RESET_CONVERSATION}
@@ -147,6 +148,7 @@ export const SettingsContextMenu: React.FC<Params> = React.memo(
       ],
 
       [
+        euiTheme.colors.danger,
         handleNavigateToAnonymization,
         handleNavigateToKnowledgeBase,
         handleNavigateToSettings,
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector/index.tsx
index 3127ab7fe3911..265c0423ca1ef 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector/index.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector/index.tsx
@@ -5,14 +5,20 @@
  * 2.0.
  */
 
-import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSuperSelect, EuiText } from '@elastic/eui';
+import {
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSuperSelect,
+  EuiText,
+  useEuiTheme,
+} from '@elastic/eui';
 import { css } from '@emotion/css';
 import React, { Suspense, useCallback, useMemo, useState } from 'react';
 
 import { ActionConnector, ActionType } from '@kbn/triggers-actions-ui-plugin/public';
 
 import { OpenAiProviderType } from '@kbn/stack-connectors-plugin/common/openai/constants';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { some } from 'lodash';
 import type { AttackDiscoveryStats } from '@kbn/elastic-assistant-common';
 import { AttackDiscoveryStatusIndicator } from './attack_discovery_status_indicator';
@@ -25,13 +31,6 @@ import { AddConnectorModal } from '../add_connector_modal';
 
 export const ADD_NEW_CONNECTOR = 'ADD_NEW_CONNECTOR';
 
-const placeholderCss = css`
-  .euiSuperSelectControl__placeholder {
-    color: ${euiThemeVars.euiColorPrimary};
-    margin-right: ${euiThemeVars.euiSizeXS};
-  }
-`;
-
 interface Props {
   isDisabled?: boolean;
   isOpen?: boolean;
@@ -57,6 +56,7 @@ export const ConnectorSelector: React.FC<Props> = React.memo(
     setIsOpen,
     stats = null,
   }) => {
+    const { euiTheme } = useEuiTheme();
     const { actionTypeRegistry, http, assistantAvailability } = useAssistantContext();
     // Connector Modal State
     const [isConnectorModalVisible, setIsConnectorModalVisible] = useState<boolean>(false);
@@ -198,7 +198,12 @@ export const ConnectorSelector: React.FC<Props> = React.memo(
         ) : (
           <EuiSuperSelect
             aria-label={i18n.CONNECTOR_SELECTOR_TITLE}
-            className={placeholderCss}
+            className={css`
+              .euiSuperSelectControl__placeholder {
+                color: ${euiTheme.colors.primary};
+                margin-right: ${euiTheme.size.xs};
+              }
+            `}
             compressed={true}
             data-test-subj="connector-selector"
             disabled={localIsDisabled}
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector_inline/connector_selector_inline.tsx b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector_inline/connector_selector_inline.tsx
index 19e5db98a74fa..9dd36c13d7c14 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector_inline/connector_selector_inline.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector_inline/connector_selector_inline.tsx
@@ -5,11 +5,10 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiText, useEuiTheme } from '@elastic/eui';
 import React, { useCallback, useState } from 'react';
 
 import { css } from '@emotion/css';
-import { euiThemeVars } from '@kbn/ui-theme';
 import type { AttackDiscoveryStats } from '@kbn/elastic-assistant-common';
 import { AIConnector, ConnectorSelector } from '../connector_selector';
 import { Conversation } from '../../..';
@@ -62,6 +61,7 @@ export const ConnectorSelectorInline: React.FC<Props> = React.memo(
     onConnectorSelected,
     stats = null,
   }) => {
+    const { euiTheme } = useEuiTheme();
     const [isOpen, setIsOpen] = useState<boolean>(false);
     const { assistantAvailability } = useAssistantContext();
     const { setApiConfig } = useConversation();
@@ -120,7 +120,7 @@ export const ConnectorSelectorInline: React.FC<Props> = React.memo(
               <EuiText
                 className={inputDisplayClassName}
                 size="s"
-                color={euiThemeVars.euiColorPrimaryText}
+                color={euiTheme.colors.textPrimary}
               >
                 {displayText}
               </EuiText>
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization/settings/anonymization_settings_management/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization/settings/anonymization_settings_management/index.tsx
index 3b8758afdd215..d98027d24cfec 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization/settings/anonymization_settings_management/index.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization/settings/anonymization_settings_management/index.tsx
@@ -20,7 +20,6 @@ import {
 } from '@elastic/eui';
 import React, { useCallback, useState } from 'react';
 
-import { euiThemeVars } from '@kbn/ui-theme';
 import { Stats } from '../../../data_anonymization_editor/stats';
 import { ContextEditor } from '../../../data_anonymization_editor/context_editor';
 import * as i18n from '../anonymization_settings/translations';
@@ -138,7 +137,7 @@ const AnonymizationSettingsManagementComponent: React.FC<Props> = ({
               isDataAnonymizable={true}
               anonymizationFields={updatedAnonymizationData.data}
               titleSize="m"
-              gap={euiThemeVars.euiSizeS}
+              gap={euiTheme.size.s}
             />
           </EuiFlexGroup>
 
@@ -173,7 +172,7 @@ const AnonymizationSettingsManagementComponent: React.FC<Props> = ({
             isDataAnonymizable={true}
             anonymizationFields={updatedAnonymizationData.data}
             titleSize="m"
-            gap={euiThemeVars.euiSizeS}
+            gap={euiTheme.size.s}
           />
         </EuiFlexGroup>
 
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_editor_modal/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_editor_modal/index.tsx
index 652f6fd89b315..089ab30116cd8 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_editor_modal/index.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_editor_modal/index.tsx
@@ -25,7 +25,6 @@ import {
 } from '@elastic/eui';
 import { i18n as I18n } from '@kbn/i18n';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import {
   AnonymizationFieldResponse,
   PerformAnonymizationFieldsBulkActionRequestBody,
@@ -48,6 +47,7 @@ export interface Props {
 }
 
 const SelectedPromptContextEditorModalComponent = ({ onClose, onSave, promptContext }: Props) => {
+  const { euiTheme } = useEuiTheme();
   const { http, toasts } = useAssistantContext();
   const [checked, setChecked] = useState(false);
   const checkboxId = useGeneratedHtmlId({ prefix: 'updateSettingPresetsCheckbox' });
@@ -187,7 +187,7 @@ const SelectedPromptContextEditorModalComponent = ({ onClose, onSave, promptCont
 
       <EuiModalFooter
         css={css`
-          background: ${euiThemeVars.euiColorLightestShade};
+          background: ${euiTheme.colors.lightestShade};
           padding-block: 16px;
         `}
       >
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_preview.tsx b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_preview.tsx
index 49d5d0fe4d63d..f416d8a22c90f 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_preview.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_preview.tsx
@@ -10,7 +10,6 @@ import { EuiText } from '@elastic/eui';
 import { getAnonymizedValue } from '@kbn/elastic-assistant-common';
 import { getAnonymizedData } from '@kbn/elastic-assistant-common/impl/data_anonymization/get_anonymized_data';
 import { getAnonymizedValues } from '@kbn/elastic-assistant-common/impl/data_anonymization/get_anonymized_values';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { css } from '@emotion/react';
 import { AnonymizedData } from '@kbn/elastic-assistant-common/impl/data_anonymization/types';
 import styled from '@emotion/styled';
@@ -18,10 +17,11 @@ import { SelectedPromptContext } from '../assistant/prompt_context/types';
 
 const Strong = styled.strong<{ showRealValues: boolean }>`
   color: ${(props) =>
-    props.showRealValues ? euiThemeVars.euiColorSuccess : euiThemeVars.euiColorAccent};
+    props.showRealValues
+      ? props.theme.euiTheme.colors.success
+      : props.theme.euiTheme.colors.accent};
   cursor: pointer;
 `;
-
 export interface Props {
   selectedPromptContext: SelectedPromptContext;
   showRealValues: boolean;
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/allowed_stat/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/allowed_stat/index.tsx
index 9d893cdaa65a2..9ebf4f98f45a5 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/allowed_stat/index.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/allowed_stat/index.tsx
@@ -5,10 +5,9 @@
  * 2.0.
  */
 
-import { EuiStat, EuiToolTip } from '@elastic/eui';
+import { EuiStat, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import React, { useMemo } from 'react';
 
-import { euiThemeVars } from '@kbn/ui-theme';
 import { css } from '@emotion/react';
 import { TITLE_SIZE } from '../constants';
 import * as i18n from './translations';
@@ -26,8 +25,9 @@ const AllowedStatComponent: React.FC<Props> = ({
   total,
   inline,
   titleSize = TITLE_SIZE,
-  gap = euiThemeVars.euiSizeXS,
+  gap,
 }) => {
+  const { euiTheme } = useEuiTheme();
   const tooltipContent = useMemo(() => i18n.ALLOWED_TOOLTIP({ allowed, total }), [allowed, total]);
 
   return (
@@ -38,7 +38,7 @@ const AllowedStatComponent: React.FC<Props> = ({
             ? css`
                 display: flex;
                 align-items: center;
-                gap: ${gap};
+                gap: ${gap || euiTheme.size.xs};
               `
             : null
         }
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/anonymized_stat/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/anonymized_stat/index.tsx
index 74b3e631b7117..e07892d5fe14c 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/anonymized_stat/index.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/anonymized_stat/index.tsx
@@ -5,11 +5,10 @@
  * 2.0.
  */
 
-import { EuiStat, EuiText, EuiToolTip } from '@elastic/eui';
+import { EuiStat, EuiText, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import React, { useMemo } from 'react';
 
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { getColor, getTooltipContent } from './helpers';
 import { TITLE_SIZE } from '../constants';
 import * as i18n from './translations';
@@ -27,8 +26,9 @@ const AnonymizedStatComponent: React.FC<Props> = ({
   isDataAnonymizable,
   inline,
   titleSize = TITLE_SIZE,
-  gap = euiThemeVars.euiSizeXS,
+  gap,
 }) => {
+  const { euiTheme } = useEuiTheme();
   const color = useMemo(() => getColor(isDataAnonymizable), [isDataAnonymizable]);
 
   const tooltipContent = useMemo(
@@ -53,7 +53,7 @@ const AnonymizedStatComponent: React.FC<Props> = ({
             ? css`
                 display: flex;
                 align-items: center;
-                gap: ${gap};
+                gap: ${gap || euiTheme.size.xs};
               `
             : null
         }
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/available_stat/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/available_stat/index.tsx
index d29bfab02b897..0a0877895da57 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/available_stat/index.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/available_stat/index.tsx
@@ -5,11 +5,10 @@
  * 2.0.
  */
 
-import { EuiStat, EuiToolTip } from '@elastic/eui';
+import { EuiStat, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import React, { useMemo } from 'react';
 
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { TITLE_SIZE } from '../constants';
 import * as i18n from './translations';
 
@@ -24,8 +23,9 @@ const AvailableStatComponent: React.FC<Props> = ({
   total,
   inline,
   titleSize = TITLE_SIZE,
-  gap = euiThemeVars.euiSizeXS,
+  gap,
 }) => {
+  const { euiTheme } = useEuiTheme();
   const tooltipContent = useMemo(() => i18n.AVAILABLE_TOOLTIP(total), [total]);
 
   return (
@@ -36,7 +36,7 @@ const AvailableStatComponent: React.FC<Props> = ({
             ? css`
                 display: flex;
                 align-items: center;
-                gap: ${gap};
+                gap: ${gap || euiTheme.size.xs};
               `
             : null
         }
diff --git a/x-pack/packages/kbn-elastic-assistant/tsconfig.json b/x-pack/packages/kbn-elastic-assistant/tsconfig.json
index 15009c7f702a5..a66ff0a5d5418 100644
--- a/x-pack/packages/kbn-elastic-assistant/tsconfig.json
+++ b/x-pack/packages/kbn-elastic-assistant/tsconfig.json
@@ -6,12 +6,14 @@
       "jest",
       "node",
       "react",
-      "@kbn/ambient-ui-types"
+      "@kbn/ambient-ui-types",
+      "@emotion/react/types/css-prop"
     ]
   },
   "include": [
     "**/*.ts",
     "**/*.tsx",
+    "../../../typings/emotion.d.ts"
   ],
   "exclude": [
     "target/**/*"
diff --git a/x-pack/plugins/security_solution/public/assistant/get_comments/stream/message_text.tsx b/x-pack/plugins/security_solution/public/assistant/get_comments/stream/message_text.tsx
index ff526c33497c3..46defe4d515d2 100644
--- a/x-pack/plugins/security_solution/public/assistant/get_comments/stream/message_text.tsx
+++ b/x-pack/plugins/security_solution/public/assistant/get_comments/stream/message_text.tsx
@@ -15,12 +15,11 @@ import {
   getDefaultEuiMarkdownParsingPlugins,
   getDefaultEuiMarkdownProcessingPlugins,
   transparentize,
+  useEuiTheme,
 } from '@elastic/eui';
 import { css } from '@emotion/css';
-import classNames from 'classnames';
 import type { Code, InlineCode, Parent, Text } from 'mdast';
 import React from 'react';
-import { euiThemeVars } from '@kbn/ui-theme';
 
 import type { Node } from 'unist';
 import { customCodeBlockLanguagePlugin } from '../custom_codeblock/custom_codeblock_markdown_plugin';
@@ -35,30 +34,37 @@ interface Props {
 
 const ANIMATION_TIME = 1;
 
-const cursorCss = css`
-  @keyframes blink {
-    0% {
-      opacity: 0;
-    }
-    50% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-
-  animation: blink ${ANIMATION_TIME}s infinite;
-  width: 10px;
-  height: 16px;
-  vertical-align: middle;
-  display: inline-block;
-  background: ${transparentize(euiThemeVars.euiColorDarkShade, 0.25)};
-`;
-
-const Cursor = () => (
-  <span data-test-subj="cursor" key="cursor" className={classNames(cursorCss, 'cursor')} />
-);
+const Cursor = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <span
+      data-test-subj="cursor"
+      key="cursor"
+      css={css`
+        @keyframes blink {
+          0% {
+            opacity: 0;
+          }
+          50% {
+            opacity: 1;
+          }
+          100% {
+            opacity: 0;
+          }
+        }
+
+        animation: blink ${ANIMATION_TIME}s infinite;
+        width: 10px;
+        height: 16px;
+        vertical-align: middle;
+        display: inline-block;
+        background: ${transparentize(euiTheme.colors.darkShade, 0.25)};
+      `}
+      // TODO: Replace transparentize
+    />
+  );
+};
 
 // a weird combination of different whitespace chars to make sure it stays
 // invisible even when we cannot properly parse the text while still being