diff --git a/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_popover_suggestion_badge.tsx b/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_popover_suggestion_badge.tsx
index bf32a194d77ca..6704a725b7c62 100644
--- a/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_popover_suggestion_badge.tsx
+++ b/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_popover_suggestion_badge.tsx
@@ -27,7 +27,7 @@ export const OptionsListPopoverSuggestionBadge = ({ documentCount }: { documentC
           size="xs"
           aria-hidden={true}
           className="eui-textNumber"
-          color={euiTheme.colors.subduedText}
+          color={euiTheme.colors.textSubdued}
           data-test-subj="optionsList-document-count-badge"
           css={css`
             font-weight: ${euiTheme.font.weight.medium} !important;
diff --git a/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_popover_suggestions.tsx b/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_popover_suggestions.tsx
index 9372c2a091de3..410082d5f4b8b 100644
--- a/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_popover_suggestions.tsx
+++ b/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_popover_suggestions.tsx
@@ -9,10 +9,9 @@
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { EuiHighlight, EuiSelectable } from '@elastic/eui';
+import { EuiHighlight, EuiSelectable, useEuiTheme } from '@elastic/eui';
 import { EuiSelectableOption } from '@elastic/eui/src/components/selectable/selectable_option';
 import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
-import { euiThemeVars } from '@kbn/ui-theme';
 
 import { OptionsListSuggestions } from '../../../../../common/options_list/types';
 import { OptionsListSelection } from '../../../../../common/options_list/options_list_selections';
@@ -35,6 +34,8 @@ export const OptionsListPopoverSuggestions = ({
     displaySettings: { hideExists },
   } = useOptionsListContext();
 
+  const { euiTheme } = useEuiTheme();
+
   const [
     sort,
     searchString,
@@ -147,13 +148,13 @@ export const OptionsListPopoverSuggestions = ({
     if (!listbox) return;
 
     const { scrollTop, scrollHeight, clientHeight } = listbox;
-    if (scrollTop + clientHeight >= scrollHeight - parseInt(euiThemeVars.euiSizeXXL, 10)) {
+    if (scrollTop + clientHeight >= scrollHeight - parseInt(euiTheme.size.xxl, 10)) {
       // reached the "bottom" of the list, where euiSizeXXL acts as a "margin of error" so that the user doesn't
       // have to scroll **all the way** to the bottom in order to load more options
       stateManager.requestSize.next(totalCardinality ?? MAX_OPTIONS_LIST_REQUEST_SIZE);
       api.loadMoreSubject.next(null); // trigger refetch with loadMoreSubject
     }
-  }, [api.loadMoreSubject, stateManager.requestSize, totalCardinality]);
+  }, [api.loadMoreSubject, euiTheme.size.xxl, stateManager.requestSize, totalCardinality]);
 
   const renderOption = useCallback(
     (option: EuiSelectableOption, searchStringValue: string) => {
diff --git a/src/plugins/controls/public/controls/data_controls/range_slider/components/range_slider.styles.ts b/src/plugins/controls/public/controls/data_controls/range_slider/components/range_slider.styles.ts
index 5f7bc836205fb..384b79d103f9b 100644
--- a/src/plugins/controls/public/controls/data_controls/range_slider/components/range_slider.styles.ts
+++ b/src/plugins/controls/public/controls/data_controls/range_slider/components/range_slider.styles.ts
@@ -67,15 +67,15 @@ export const rangeSliderControlStyles = (euiThemeContext: UseEuiTheme) => {
         &:placeholder-shown,
         &::placeholder {
           font-weight: ${euiTheme.font.weight.regular};
-          color: ${euiTheme.colors.subduedText};
+          color: ${euiTheme.colors.textSubdued};
         }
       `,
       invalid: css`
         &:not(:invalid) {
-          color: ${euiTheme.colors.warningText};
+          color: ${euiTheme.colors.textWarning};
         }
         &:invalid {
-          color: ${euiTheme.colors.dangerText};
+          color: ${euiTheme.colors.textDanger};
         }
       `,
       // unset the red underline for values between steps
diff --git a/src/plugins/controls/tsconfig.json b/src/plugins/controls/tsconfig.json
index 7759a0fdc7935..79bd194990cb2 100644
--- a/src/plugins/controls/tsconfig.json
+++ b/src/plugins/controls/tsconfig.json
@@ -26,7 +26,6 @@
     "@kbn/i18n-react",
     "@kbn/datemath",
     "@kbn/config-schema",
-    "@kbn/ui-theme",
     "@kbn/safer-lodash-set",
     "@kbn/ui-actions-plugin",
     "@kbn/core-mount-utils-browser",