diff --git a/packages/__docs__/src/withStyleForDocs.tsx b/packages/__docs__/src/withStyleForDocs.tsx
index 0d7ed8e1e0..1a562c5b30 100644
--- a/packages/__docs__/src/withStyleForDocs.tsx
+++ b/packages/__docs__/src/withStyleForDocs.tsx
@@ -234,7 +234,7 @@ const withStyleForDocs = decorator(
         theme,
         displayName,
         ComposedComponent.componentId,
-        componentProps,
+        (componentProps as ThemeOverrideProp).themeOverride,
         componentTheme
       )
 
diff --git a/packages/emotion/src/InstUISettingsProvider/index.tsx b/packages/emotion/src/InstUISettingsProvider/index.tsx
index a28ebb2631..1477097041 100644
--- a/packages/emotion/src/InstUISettingsProvider/index.tsx
+++ b/packages/emotion/src/InstUISettingsProvider/index.tsx
@@ -32,22 +32,61 @@ import { getTheme } from '../getTheme'
 
 import type { ThemeOrLegacyOverride } from '../EmotionTypes'
 import type { DeterministicIdProviderValue } from '@instructure/ui-react-utils'
+import type { NewThemeOverrideObject, Theme } from '@instructure/ui-themes'
 declare const process: Record<string, any> | undefined
 
 type InstUIProviderProps = {
   children?: React.ReactNode
 
   /**
-   * A full theme or an override object
+   * A full theme or an override object. The override only works for legacy
+   * (v11.6 or earlier) themes, for newer ones use the `themeOverride` prop.
    */
   theme?: ThemeOrLegacyOverride
 
-  // TODO-theme-types: fix override typing
-  // TODO explain the usage of this override object. It will be deep merged into theme.themeOverride and the shape has to be a partial of the "newTheme" object
   /**
-   * An override object for the new theming system.
+   * An override object for the new theming system. It will be deep merged into
+   * the theme. One can override primitives, semantics and individual component's
+   * themes, for example:
+   * ```js
+   * themeOverride={{
+   *   semantics: {
+   *     color: {
+   *       stroke: {
+   *         error: 'purple'
+   *       }
+   *     }
+   *   },
+   *   primitives: {
+   *     color: {
+   *       blue: {
+   *         blue100: 'yellow'
+   *       }
+   *     }
+   *   },
+   *   components: {
+   *     Alert: {
+   *       background: 'brown',
+   *       infoIconBackground: 'darkblue',
+   *       borderWidth: '0.5rem'
+   *     },
+   *     Pill: {
+   *       baseTextColor: 'purple',
+   *       baseBorderColor: 'purple'
+   *     }
+   *   },
+   *   sharedTokens: {
+   *     focusOutline: {
+   *       width: '0.55rem',
+   *       infoColor: 'deeppink'
+   *     }
+   *   }
+   * }}
+   * ```
    */
-  themeOverride?: any
+  themeOverride?:
+    | NewThemeOverrideObject
+    | ((theme: Theme) => NewThemeOverrideObject)
 
   /**
    * @deprecated the `instanceCounterMap` prop is deprecated. You don't need to supply the
@@ -100,7 +139,6 @@ function InstUISettingsProvider({
    * For backward compatibility reasons, the old way of passing a partial theme to the theme prop is still supported, however only for
    * legacy (pre v11_7) components. Overriding the newTheme this way could break the system.
    */
-
   let providers = (
     <DeterministicIdContextProvider instanceCounterMap={instanceCounterMap}>
       <ThemeProvider theme={getTheme(theme, themeOverride)}>
@@ -120,3 +158,4 @@ function InstUISettingsProvider({
 
 export default InstUISettingsProvider
 export { InstUISettingsProvider }
+export type { InstUIProviderProps }
diff --git a/packages/emotion/src/getComponentThemeOverride.ts b/packages/emotion/src/getComponentThemeOverride.ts
index 6d4550d8ce..17473724fd 100644
--- a/packages/emotion/src/getComponentThemeOverride.ts
+++ b/packages/emotion/src/getComponentThemeOverride.ts
@@ -29,7 +29,7 @@ import type {
 } from './EmotionTypes'
 import type { ComponentTheme } from '@instructure/shared-types'
 import { ThemeOverrideProp } from './withStyle'
-import { ThemeOverrideValue } from './useStyle'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type ComponentName = keyof ComponentOverride | undefined
 
@@ -51,8 +51,10 @@ const getComponentThemeOverride = (
   theme: ThemeOverride,
   displayName: string,
   componentId?: string,
-  // ThemeOverrideProp is the old type, ThemeOverrideValue is the new one
-  themeOverride?: ThemeOverrideProp['themeOverride'] | ThemeOverrideValue,
+  // ThemeOverrideProp['themeOverride'] is the old type
+  themeOverride?:
+    | ThemeOverrideProp['themeOverride']
+    | ReturnType<NewComponentTypes[keyof NewComponentTypes]>,
   componentTheme?: ComponentTheme
 ): Partial<ComponentTheme> => {
   const name = displayName as ComponentName
diff --git a/packages/emotion/src/getTheme.ts b/packages/emotion/src/getTheme.ts
index 8946ef13e9..0322d564ff 100644
--- a/packages/emotion/src/getTheme.ts
+++ b/packages/emotion/src/getTheme.ts
@@ -24,13 +24,14 @@
 import canvas from '@instructure/ui-themes'
 import { isBaseTheme, mergeDeep } from '@instructure/ui-utils'
 
-import type { BaseTheme } from '@instructure/shared-types'
+import type { Theme } from '@instructure/ui-themes'
 
 import type {
   Overrides,
   ThemeOrLegacyOverride,
   SpecificThemeOverride
 } from './EmotionTypes'
+import { InstUIProviderProps } from './InstUISettingsProvider'
 declare const process: Record<string, any> | undefined
 
 /**
@@ -45,14 +46,20 @@ declare const process: Record<string, any> | undefined
  * the overrides merged together.
  *
  * @param themeOrLegacyOverride - A full theme or an override object
- * @param themeOverride - if provided, it means it's a new theming-system override. This will be merged into theme.themeOverride and will be treated separately from the old way of applying overrides. This override will be applied in the withStyle.ts decorator
+ * @param themeOverride - if provided, it means it's a new theming-system override.
+ * This will be merged into theme.themeOverride and will be treated separately
+ * from the old way of applying overrides. This override will be applied in the
+ * `withStyle.ts` decorator
  * @returns A function that returns with the theme object for the [ThemeProvider](https://emotion.sh/docs/theming#themeprovider-reactcomponenttype)
  *    This function is called by Emotion on theme provider creation, where
  *    `ancestorTheme` is a theme object from an ancestor `ThemeProvider`
  */
 const getTheme =
-  (themeOrLegacyOverride: ThemeOrLegacyOverride, themeOverride?: any) =>
-  (ancestorTheme = {} as BaseTheme) => {
+  (
+    themeOrLegacyOverride: ThemeOrLegacyOverride,
+    themeOverride?: InstUIProviderProps['themeOverride']
+  ) =>
+  (ancestorTheme = {} as Theme) => {
     // we need to clone the ancestor theme not to override it
     let currentTheme
     if (Object.keys(ancestorTheme).length === 0) {
diff --git a/packages/emotion/src/index.ts b/packages/emotion/src/index.ts
index 52a912f135..c87581d0d1 100644
--- a/packages/emotion/src/index.ts
+++ b/packages/emotion/src/index.ts
@@ -43,9 +43,10 @@ export { useStyleLegacy } from './useStyleLegacy'
 export { useStyle } from './useStyle'
 export { useTheme } from './useTheme'
 
+export type { InstUIProviderProps } from './InstUISettingsProvider'
 export type { ComponentStyle, StyleObject, Overrides } from './EmotionTypes'
-export type { WithStyleProps } from './withStyleLegacy'
-export type { ThemeOverrideValue } from './useStyle'
+export type { WithStyleProps } from './withStyle'
+export type { NewThemeOverrideProp } from './useStyle'
 export type {
   SpacingValues,
   Spacing,
diff --git a/packages/emotion/src/useStyle.ts b/packages/emotion/src/useStyle.ts
index 98c1f69fae..9d0df63837 100644
--- a/packages/emotion/src/useStyle.ts
+++ b/packages/emotion/src/useStyle.ts
@@ -25,8 +25,8 @@
 import { useTheme } from './useTheme'
 import { mergeDeep } from '@instructure/ui-utils'
 import type {
-  SharedTokens,
   NewComponentTypes,
+  SharedTokens,
   Theme
 } from '@instructure/ui-themes'
 
@@ -34,89 +34,84 @@ import type {
 type SecondParameter<T extends (...args: any) => any> =
   Parameters<T>[1] extends undefined ? never : Parameters<T>[1]
 
-type GenerateStyleParams =
-  | ((componentTheme: any, params: any, sharedTokens: SharedTokens) => any)
-  | ((componentTheme: any, params: any) => any)
-  | ((componentTheme: any) => any)
+type NewThemeOverrideProp<
+  ComponentTheme extends ReturnType<NewComponentTypes[keyof NewComponentTypes]>
+> = {
+  themeOverride?:
+    | Partial<ComponentTheme>
+    | ((compTheme: ComponentTheme, theme: Theme) => Partial<ComponentTheme>)
+}
 
-/**
- * Type for a theme override
- */
-type ThemeOverrideValue =
-  | Partial<Theme>
+type GenerateStyleFn<ComponentTheme> =
   | ((
-    componentTheme: Theme,
-    currentTheme: NewComponentTypes[keyof NewComponentTypes]
-  ) => Partial<Theme>)
+      componentTheme: ComponentTheme,
+      params: any,
+      sharedTokens: SharedTokens
+    ) => any)
+  | ((componentTheme: ComponentTheme, params: any) => any)
+  | ((componentTheme: ComponentTheme) => any)
 
 /**
- * new useStyle syntax, use this with v12 themes
+ * new useStyle syntax, use this with v11.7+ themes
  */
-
 // TODO: improve useStyle to handle generateStyle functions that don't
 // have a theme.
-const useStyle = <P extends GenerateStyleParams>(useStyleParams: {
-  generateStyle: P
-  params?: SecondParameter<P>
+const useStyle = <
+  ComponentTheme extends ReturnType<NewComponentTypes[keyof NewComponentTypes]>,
+  GenerateStyle extends GenerateStyleFn<ComponentTheme>
+>(useStyleParams: {
+  generateStyle: GenerateStyle
+  params?: SecondParameter<GenerateStyle>
   // needs to be a string too because it might be a child component
   componentId: keyof NewComponentTypes | string
-  themeOverride: ThemeOverrideValue | undefined
+  themeOverride?: NewThemeOverrideProp<ComponentTheme>['themeOverride']
   displayName?: string
-  //in case of a child component needed to use it's parent's tokens, provide parent's name
+  //in case of a child component needed to use its parent's tokens, provide parent's name
   useTokensFrom?: keyof NewComponentTypes
-}): ReturnType<P> => {
+}): ReturnType<GenerateStyle> => {
   const { generateStyle, params, componentId, themeOverride } = useStyleParams
   const useTokensFrom = useStyleParams.useTokensFrom
   const themeInContext = useTheme() as Theme
 
   const themeOverrideFromProvider = themeInContext.themeOverride
-  const componentWithTokensId = useTokensFrom ?? componentId
+  const componentWithTokensId =
+    useTokensFrom ?? (componentId as keyof NewComponentTypes)
 
   // resolving the theming functions and applying the overrides
   const primitiveOverrides = themeOverrideFromProvider?.primitives
   const semanticsOverrides = themeOverrideFromProvider?.semantics
-  // @ts-ignore TODO-theme-types: fix typing
   const sharedTokensOverrides = themeOverrideFromProvider?.sharedTokens
   const componentOverridesFromSettingsProvider =
-    // @ts-ignore TODO-theme-types: fix typing
-    themeOverrideFromProvider?.components?.[
-    componentWithTokensId as keyof NewComponentTypes
-    ]
+    themeOverrideFromProvider?.components?.[componentWithTokensId]
 
   const primitives = mergeDeep(
     themeInContext.newTheme.primitives,
-    primitiveOverrides
+    primitiveOverrides!
   )
 
   const semantics = mergeDeep(
     themeInContext.newTheme.semantics?.(primitives),
-    semanticsOverrides
+    semanticsOverrides!
   )
 
   const sharedTokens = mergeDeep(
     themeInContext.newTheme.sharedTokens?.(semantics),
-    sharedTokensOverrides
+    sharedTokensOverrides as Record<string, unknown>
   )
 
   const baseComponentTheme =
-    themeInContext.newTheme.components[
-      componentWithTokensId as keyof NewComponentTypes
-    ]?.(semantics)
+    themeInContext.newTheme.components[componentWithTokensId]?.(semantics)
 
   const componentThemeFromSettingsProvider = mergeDeep(
     baseComponentTheme,
-    componentOverridesFromSettingsProvider
-  )
+    componentOverridesFromSettingsProvider as Record<string, unknown>
+  ) as ComponentTheme
 
   const componentTheme = mergeDeep(
     componentThemeFromSettingsProvider,
-    // @ts-ignore TODO-theme-types: fix typing
     typeof themeOverride === 'function'
-      ? themeOverride(
-        componentThemeFromSettingsProvider as Theme,
-        themeInContext as any
-      )
-      : themeOverride
+      ? themeOverride(componentThemeFromSettingsProvider, themeInContext)
+      : themeOverride!
   )
 
   // @ts-ignore TODO-theme-types: fix typing
@@ -125,4 +120,4 @@ const useStyle = <P extends GenerateStyleParams>(useStyleParams: {
 
 export default useStyle
 export { useStyle }
-export type { ThemeOverrideValue }
+export type { NewThemeOverrideProp }
diff --git a/packages/emotion/src/withStyle.tsx b/packages/emotion/src/withStyle.tsx
index 9eb74118ad..923d138577 100644
--- a/packages/emotion/src/withStyle.tsx
+++ b/packages/emotion/src/withStyle.tsx
@@ -37,11 +37,7 @@ import { decorator } from '@instructure/ui-decorator'
 
 import { useTheme } from './useTheme'
 
-import type {
-  BaseTheme,
-  ComponentTheme,
-  InstUIComponent
-} from '@instructure/shared-types'
+import type { ComponentTheme, InstUIComponent } from '@instructure/shared-types'
 import type {
   ComponentStyle,
   ComponentOverride,
@@ -49,7 +45,11 @@ import type {
   Props
 } from './EmotionTypes'
 
-import type { NewComponentTypes, Theme } from '@instructure/ui-themes'
+import type {
+  NewComponentTypes,
+  SharedTokens,
+  Theme
+} from '@instructure/ui-themes'
 
 // Extract is needed because it would allow number otherwise
 // https://stackoverflow.com/a/51808262/319473
@@ -66,28 +66,30 @@ type WithStylePrivateProps<
 > = Style extends null
   ? object
   : {
-    styles?: Style
-    makeStyles?: (extraArgs?: Record<string, unknown>) => void
-  }
+      styles?: Style
+      makeStyles?: (extraArgs?: Record<string, unknown>) => void
+    }
 
-type ThemeOverrideProp<Theme extends ComponentTheme | null = ComponentTheme> = {
+type ThemeOverrideProp<
+  CompTheme extends ComponentTheme | null = ComponentTheme
+> = {
   themeOverride?:
-  | Partial<Theme>
-  | ((componentTheme: Theme, currentTheme: BaseTheme) => Partial<Theme>)
+    | Partial<CompTheme>
+    | ((componentTheme: CompTheme, currentTheme: Theme) => Partial<CompTheme>)
 }
 
 type WithStyleProps<
-  Theme extends ComponentTheme | null = ComponentTheme,
+  CompTheme extends ComponentTheme | null = ComponentTheme,
   Style extends ComponentStyle | null = ComponentStyle
 > = Theme extends null
   ? WithStylePrivateProps<Style>
-  : WithStylePrivateProps<Style> & ThemeOverrideProp<Theme>
+  : WithStylePrivateProps<Style> & ThemeOverrideProp<CompTheme>
 
 declare const process: Record<string, any> | undefined
 
 const defaultValues = {
   styles: {},
-  makeStyles: () => { }
+  makeStyles: () => {}
 }
 
 /**
@@ -154,7 +156,7 @@ const withStyle = decorator(
   ) => {
     const displayName = ComposedComponent.displayName || ComposedComponent.name
 
-    const componentId =
+    const componentId: keyof NewComponentTypes =
       useTokensFrom ?? ComposedComponent.componentId?.replace('.', '')
 
     const WithStyle: ForwardRefExoticComponent<
@@ -175,7 +177,7 @@ const withStyle = decorator(
       if (frozenTheme && !frozenTheme[themeKey]) {
         console.error(
           `The version of ${displayName} you are using does not support the currently applied "${themeKey}" theme. ` +
-          `Please upgrade to the latest version of ${displayName}.`
+            `Please upgrade to the latest version of ${displayName}.`
         )
       }
 
@@ -208,38 +210,34 @@ const withStyle = decorator(
       // resolving the theming functions and applying the overrides
       const primitiveOverrides = themeOverride?.primitives
       const semanticsOverrides = themeOverride?.semantics
-      // @ts-ignore TODO-theme-types: fix typing
       const sharedTokensOverrides = themeOverride?.sharedTokens
       const componentOverridesFromSettingsProvider =
-        // @ts-ignore TODO-theme-types: fix typing
-        themeOverride?.components?.[componentId as keyof NewComponentTypes]
+        themeOverride?.components?.[componentId]
       const componentOverridesFromThemeOverrideProp = (
         componentProps as ThemeOverrideProp
       ).themeOverride
 
       const primitives = mergeDeep(
         theme.newTheme.primitives,
-        primitiveOverrides
+        primitiveOverrides!
       )
 
       const semantics = mergeDeep(
         theme.newTheme.semantics?.(primitives),
-        semanticsOverrides
+        semanticsOverrides!
       )
 
       const sharedTokens = mergeDeep(
         theme.newTheme.sharedTokens?.(semantics),
-        sharedTokensOverrides
-      )
-
+        sharedTokensOverrides as Record<string, unknown>
+      ) as SharedTokens
+      // Note: Some components do not have a theme, e.g., FormFieldMessages
       const baseComponentTheme =
-        theme.newTheme.components[componentId as keyof NewComponentTypes]?.(
-          semantics
-        )
+        theme.newTheme.components[componentId]?.(semantics)
 
       const componentThemeFromSettingsProvider = mergeDeep(
         baseComponentTheme,
-        componentOverridesFromSettingsProvider
+        componentOverridesFromSettingsProvider as Record<string, unknown>
       )
 
       const componentTheme = mergeDeep(
@@ -247,9 +245,9 @@ const withStyle = decorator(
         // @ts-ignore TODO-theme-types: fix typing
         typeof componentOverridesFromThemeOverrideProp === 'function'
           ? componentOverridesFromThemeOverrideProp(
-            componentThemeFromSettingsProvider,
-            themeInContext
-          )
+              componentThemeFromSettingsProvider,
+              themeInContext
+            )
           : componentOverridesFromThemeOverrideProp
       )
 
@@ -257,7 +255,7 @@ const withStyle = decorator(
       const [styles, setStyles] = useState(
         generateStyle
           ? // @ts-ignore TODO-theme-types: fix typing
-          generateStyle(componentTheme, componentProps, sharedTokens, {})
+            generateStyle(componentTheme, componentProps, sharedTokens, {})
           : {}
       )
 
diff --git a/packages/shared-types/src/BaseTheme.ts b/packages/shared-types/src/BaseTheme.ts
index 53aac6fef2..3df84920c4 100644
--- a/packages/shared-types/src/BaseTheme.ts
+++ b/packages/shared-types/src/BaseTheme.ts
@@ -175,6 +175,9 @@ type Size = {
 type Radius = Size
 type StrokeWidth = Size
 
+/**
+ * Theme variables used in old (11.6 and earlier) themes
+ */
 type BaseThemeVariables = {
   borders: Border
   breakpoints: Breakpoints
@@ -204,7 +207,6 @@ type BaseThemeVariableKeys = [
 type BaseTheme = {
   key: string
   description?: string
-  themeOverride?: { primitives: any; semantics: any }
 } & BaseThemeVariables
 
 export type {
diff --git a/packages/ui-alerts/src/Alert/v2/props.ts b/packages/ui-alerts/src/Alert/v2/props.ts
index e93aefe82c..33a1966d06 100644
--- a/packages/ui-alerts/src/Alert/v2/props.ts
+++ b/packages/ui-alerts/src/Alert/v2/props.ts
@@ -29,7 +29,8 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
-import type { AlertTheme, Renderable } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { Renderable } from '@instructure/shared-types'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
 type AlertOwnProps = {
@@ -116,7 +117,7 @@ type PropKeys = keyof AlertOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type AlertProps = AlertOwnProps &
-  WithStyleProps<AlertTheme, AlertStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Alert']>, AlertStyle> &
   WithDeterministicIdProps
 
 type AlertStyle = ComponentStyle<
diff --git a/packages/ui-avatar/package.json b/packages/ui-avatar/package.json
index 9fd06afd3f..922af43e7c 100644
--- a/packages/ui-avatar/package.json
+++ b/packages/ui-avatar/package.json
@@ -28,13 +28,13 @@
     "@instructure/shared-types": "workspace:*",
     "@instructure/ui-icons": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-view": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
diff --git a/packages/ui-avatar/src/Avatar/v2/props.ts b/packages/ui-avatar/src/Avatar/v2/props.ts
index 993f0f52f7..40fa9986bf 100644
--- a/packages/ui-avatar/src/Avatar/v2/props.ts
+++ b/packages/ui-avatar/src/Avatar/v2/props.ts
@@ -27,13 +27,14 @@ import { SyntheticEvent } from 'react'
 import type {
   Spacing,
   ComponentStyle,
-  ThemeOverrideValue
+  NewThemeOverrideProp
 } from '@instructure/emotion'
 import type {
   AsElementType,
   OtherHTMLAttributes,
   Renderable
 } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 const avatarSizeToIconSize = {
   'xx-small': 'xs',
@@ -112,9 +113,9 @@ type PropKeys = keyof AvatarOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type AvatarProps = AvatarOwnProps & {
-  themeOverride?: ThemeOverrideValue
-} & OtherHTMLAttributes<AvatarOwnProps>
+type AvatarProps = AvatarOwnProps &
+  NewThemeOverrideProp<ReturnType<NewComponentTypes['Avatar']>> &
+  OtherHTMLAttributes<AvatarOwnProps>
 
 type AvatarStyle = ComponentStyle<'avatar' | 'image'>
 
diff --git a/packages/ui-badge/package.json b/packages/ui-badge/package.json
index 983c17acce..79b0892241 100644
--- a/packages/ui-badge/package.json
+++ b/packages/ui-badge/package.json
@@ -29,12 +29,12 @@
     "@instructure/ui-color-utils": "workspace:*",
     "@instructure/ui-position": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-view": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
diff --git a/packages/ui-badge/src/Badge/v2/props.ts b/packages/ui-badge/src/Badge/v2/props.ts
index a8812c69fc..dfdda5271d 100644
--- a/packages/ui-badge/src/Badge/v2/props.ts
+++ b/packages/ui-badge/src/Badge/v2/props.ts
@@ -23,12 +23,13 @@
  */
 
 import React from 'react'
-import type { AsElementType, BadgeTheme } from '@instructure/shared-types'
+import type { AsElementType } from '@instructure/shared-types'
 import type {
   Spacing,
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { PlacementPropValues } from '@instructure/ui-position'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 import type { PropsWithChildren } from 'react'
@@ -87,7 +88,7 @@ type PropKeys = keyof BadgeOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type BadgeProps = BadgeOwnProps &
-  WithStyleProps<BadgeTheme, BadgeStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Badge']>, BadgeStyle> &
   WithDeterministicIdProps
 
 type BadgeStyle = ComponentStyle<'badge' | 'wrapper'>
diff --git a/packages/ui-billboard/package.json b/packages/ui-billboard/package.json
index 8f6ac3a5ba..bcdd8f83cd 100644
--- a/packages/ui-billboard/package.json
+++ b/packages/ui-billboard/package.json
@@ -29,6 +29,7 @@
     "@instructure/ui-heading": "workspace:*",
     "@instructure/ui-img": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-view": "workspace:*"
   },
   "devDependencies": {
@@ -36,7 +37,6 @@
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
     "@instructure/ui-icons": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-billboard/src/Billboard/v2/props.ts b/packages/ui-billboard/src/Billboard/v2/props.ts
index 852e7876c9..085b147a46 100644
--- a/packages/ui-billboard/src/Billboard/v2/props.ts
+++ b/packages/ui-billboard/src/Billboard/v2/props.ts
@@ -27,9 +27,9 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type {
   AsElementType,
-  BillboardTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { ViewProps } from '@instructure/ui-view/latest'
@@ -102,7 +102,7 @@ type PropKeys = keyof BillboardOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type BillboardProps = BillboardOwnProps &
-  WithStyleProps<BillboardTheme, BillboardStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Billboard']>, BillboardStyle> &
   OtherHTMLAttributes<BillboardOwnProps>
 
 type BillboardStyle = ComponentStyle<
diff --git a/packages/ui-breadcrumb/package.json b/packages/ui-breadcrumb/package.json
index fd5615ffe8..482f990f74 100644
--- a/packages/ui-breadcrumb/package.json
+++ b/packages/ui-breadcrumb/package.json
@@ -29,6 +29,7 @@
     "@instructure/ui-icons": "workspace:*",
     "@instructure/ui-link": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-tooltip": "workspace:*",
     "@instructure/ui-truncate-text": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
@@ -38,7 +39,6 @@
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-scripts": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
diff --git a/packages/ui-buttons/package.json b/packages/ui-buttons/package.json
index 6206849548..086e9bc7e6 100644
--- a/packages/ui-buttons/package.json
+++ b/packages/ui-buttons/package.json
@@ -34,6 +34,7 @@
     "@instructure/ui-icons": "workspace:*",
     "@instructure/ui-position": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-tooltip": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/ui-view": "workspace:*",
@@ -42,7 +43,6 @@
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-byline/package.json b/packages/ui-byline/package.json
index f72ee597d0..d063d6c27d 100644
--- a/packages/ui-byline/package.json
+++ b/packages/ui-byline/package.json
@@ -27,13 +27,13 @@
     "@instructure/emotion": "workspace:*",
     "@instructure/shared-types": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-view": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
diff --git a/packages/ui-byline/src/Byline/v2/props.ts b/packages/ui-byline/src/Byline/v2/props.ts
index 6d4b2ae646..3e8d73fe62 100644
--- a/packages/ui-byline/src/Byline/v2/props.ts
+++ b/packages/ui-byline/src/Byline/v2/props.ts
@@ -28,10 +28,8 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
-import type {
-  BylineTheme,
-  OtherHTMLAttributes
-} from '@instructure/shared-types'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type BylineOwnProps = {
   /**
@@ -71,7 +69,7 @@ type PropKeys = keyof BylineOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type BylineProps = BylineOwnProps &
-  WithStyleProps<BylineTheme, BylineStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Byline']>, BylineStyle> &
   OtherHTMLAttributes<BylineOwnProps>
 
 type BylineStyle = ComponentStyle<
diff --git a/packages/ui-calendar/package.json b/packages/ui-calendar/package.json
index b9f21022d1..3b7711c538 100644
--- a/packages/ui-calendar/package.json
+++ b/packages/ui-calendar/package.json
@@ -33,6 +33,7 @@
     "@instructure/ui-icons": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
     "@instructure/ui-simple-select": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/ui-view": "workspace:*",
     "@instructure/uid": "workspace:*"
@@ -40,7 +41,6 @@
   "devDependencies": {
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-calendar/src/Calendar/v2/Day/props.ts b/packages/ui-calendar/src/Calendar/v2/Day/props.ts
index 9925a48f98..cd2c5da3c2 100644
--- a/packages/ui-calendar/src/Calendar/v2/Day/props.ts
+++ b/packages/ui-calendar/src/Calendar/v2/Day/props.ts
@@ -24,10 +24,10 @@
 
 import type {
   AsElementType,
-  CalendarDayTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import { KeyboardEvent, MouseEvent } from 'react'
 import type { ViewProps } from '@instructure/ui-view/latest'
 import { Renderable } from '@instructure/shared-types'
@@ -104,7 +104,10 @@ type PropKeys = keyof CalendarDayOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type CalendarDayProps = CalendarDayOwnProps &
-  WithStyleProps<CalendarDayTheme, CalendarDayStyle> &
+  WithStyleProps<
+    ReturnType<NewComponentTypes['CalendarDay']>,
+    CalendarDayStyle
+  > &
   OtherHTMLAttributes<CalendarDayOwnProps>
 
 type CalendarDayStyle = ComponentStyle<'calendarDay' | 'day'>
diff --git a/packages/ui-calendar/src/Calendar/v2/props.ts b/packages/ui-calendar/src/Calendar/v2/props.ts
index c2d1397784..054998cb17 100644
--- a/packages/ui-calendar/src/Calendar/v2/props.ts
+++ b/packages/ui-calendar/src/Calendar/v2/props.ts
@@ -24,10 +24,10 @@
 
 import type {
   AsElementType,
-  CalendarTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import { ReactElement } from 'react'
 import type { CalendarDayProps } from './Day/props'
 import { Renderable } from '@instructure/shared-types'
@@ -172,7 +172,7 @@ type PropKeys = keyof CalendarOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type CalendarProps = CalendarOwnProps &
-  WithStyleProps<CalendarTheme, CalendarStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Calendar']>, CalendarStyle> &
   OtherHTMLAttributes<CalendarOwnProps> &
   WithDeterministicIdProps
 
diff --git a/packages/ui-checkbox/package.json b/packages/ui-checkbox/package.json
index 3d8c0a26a4..53263e63b0 100644
--- a/packages/ui-checkbox/package.json
+++ b/packages/ui-checkbox/package.json
@@ -32,6 +32,7 @@
     "@instructure/ui-icons": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
     "@instructure/ui-svg-images": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/ui-view": "workspace:*",
     "@instructure/uid": "workspace:*",
@@ -41,7 +42,6 @@
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-checkbox/src/Checkbox/v2/CheckboxFacade/props.ts b/packages/ui-checkbox/src/Checkbox/v2/CheckboxFacade/props.ts
index 2a7efda6d7..0d3cdf3704 100644
--- a/packages/ui-checkbox/src/Checkbox/v2/CheckboxFacade/props.ts
+++ b/packages/ui-checkbox/src/Checkbox/v2/CheckboxFacade/props.ts
@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import type { CheckboxFacadeTheme } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type CheckboxFacadeOwnProps = {
   children: React.ReactNode
@@ -48,7 +48,7 @@ type PropKeys = keyof CheckboxFacadeOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type CheckboxFacadeProps = CheckboxFacadeOwnProps &
-  WithStyleProps<CheckboxFacadeTheme, CheckboxFacadeStyle>
+  WithStyleProps<ReturnType<NewComponentTypes['Checkbox']>, CheckboxFacadeStyle>
 
 type CheckboxFacadeStyle = ComponentStyle<'checkboxFacade' | 'facade' | 'label'>
 const allowedProps: AllowedPropKeys = [
diff --git a/packages/ui-checkbox/src/Checkbox/v2/ToggleFacade/props.ts b/packages/ui-checkbox/src/Checkbox/v2/ToggleFacade/props.ts
index 281331aea8..03360d7271 100644
--- a/packages/ui-checkbox/src/Checkbox/v2/ToggleFacade/props.ts
+++ b/packages/ui-checkbox/src/Checkbox/v2/ToggleFacade/props.ts
@@ -23,8 +23,8 @@
  */
 
 import React from 'react'
-import type { ToggleFacadeTheme } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type ToggleFacadeOwnProps = {
   children: React.ReactNode
@@ -46,7 +46,7 @@ type PropKeys = keyof ToggleFacadeOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type ToggleFacadeProps = ToggleFacadeOwnProps &
-  WithStyleProps<ToggleFacadeTheme, ToggleFacadeStyle>
+  WithStyleProps<ReturnType<NewComponentTypes['Toggle']>, ToggleFacadeStyle>
 
 type ToggleFacadeStyle = ComponentStyle<
   'toggleFacade' | 'facade' | 'icon' | 'iconToggle' | 'label'
diff --git a/packages/ui-checkbox/src/Checkbox/v2/index.tsx b/packages/ui-checkbox/src/Checkbox/v2/index.tsx
index 39c5adfbe7..a50c6fb0c3 100644
--- a/packages/ui-checkbox/src/Checkbox/v2/index.tsx
+++ b/packages/ui-checkbox/src/Checkbox/v2/index.tsx
@@ -42,11 +42,6 @@ import generateStyle from './styles'
 import { allowedProps } from './props'
 import type { CheckboxProps, CheckboxState } from './props'
 
-import type {
-  CheckboxFacadeTheme,
-  ToggleFacadeTheme
-} from '@instructure/shared-types'
-
 /**
 ---
 category: components
@@ -231,7 +226,9 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
           checked={this.checked}
           readOnly={readOnly}
           labelPlacement={labelPlacement}
-          themeOverride={themeOverride as Partial<ToggleFacadeTheme>}
+          // @ts-ignore TODO: This will lead to buggy overrides, `Toggle`'s
+          //  styles should be a superset of Checkbox's styles
+          themeOverride={themeOverride}
           invalid={this.invalid}
         >
           {label}
@@ -256,7 +253,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
           checked={this.checked}
           readOnly={readOnly}
           indeterminate={indeterminate}
-          themeOverride={themeOverride as Partial<CheckboxFacadeTheme>}
+          themeOverride={themeOverride}
           invalid={this.invalid}
         >
           {label}
diff --git a/packages/ui-checkbox/src/Checkbox/v2/props.ts b/packages/ui-checkbox/src/Checkbox/v2/props.ts
index 349de7069e..cc66568be5 100644
--- a/packages/ui-checkbox/src/Checkbox/v2/props.ts
+++ b/packages/ui-checkbox/src/Checkbox/v2/props.ts
@@ -23,12 +23,9 @@
  */
 
 import type { FormMessage } from '@instructure/ui-form-field/latest'
-import type {
-  CheckboxFacadeTheme,
-  OtherHTMLAttributes,
-  ToggleFacadeTheme
-} from '@instructure/shared-types'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
 type CheckboxOwnProps = {
@@ -85,7 +82,7 @@ type PropKeys = keyof CheckboxOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type CheckboxProps = CheckboxOwnProps &
-  WithStyleProps<CheckboxFacadeTheme | ToggleFacadeTheme, CheckboxStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Checkbox']>, CheckboxStyle> &
   OtherHTMLAttributes<CheckboxOwnProps> &
   WithDeterministicIdProps
 
diff --git a/packages/ui-color-picker/src/ColorContrast/v2/props.ts b/packages/ui-color-picker/src/ColorContrast/v2/props.ts
index c8abd09b60..3dac7c92be 100644
--- a/packages/ui-color-picker/src/ColorContrast/v2/props.ts
+++ b/packages/ui-color-picker/src/ColorContrast/v2/props.ts
@@ -24,10 +24,8 @@
 
 import React from 'react'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import type {
-  OtherHTMLAttributes,
-  ColorContrastTheme
-} from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 
 type HeadingLevel<U extends keyof React.JSX.IntrinsicElements> = U
 
@@ -134,7 +132,10 @@ type PropKeys = keyof ColorContrastOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type ColorContrastProps = ColorContrastOwnProps &
-  WithStyleProps<ColorContrastTheme, ColorContrastStyle> &
+  WithStyleProps<
+    ReturnType<NewComponentTypes['ColorContrast']>,
+    ColorContrastStyle
+  > &
   OtherHTMLAttributes<ColorContrastOwnProps>
 
 type ColorContrastStyle = ComponentStyle<
diff --git a/packages/ui-color-picker/src/ColorIndicator/v2/props.ts b/packages/ui-color-picker/src/ColorIndicator/v2/props.ts
index d404dae017..7fd1d3aeb8 100644
--- a/packages/ui-color-picker/src/ColorIndicator/v2/props.ts
+++ b/packages/ui-color-picker/src/ColorIndicator/v2/props.ts
@@ -23,10 +23,8 @@
  */
 
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import type {
-  OtherHTMLAttributes,
-  ColorIndicatorTheme
-} from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 
 type ColorIndicatorOwnProps = {
   /**
@@ -48,7 +46,10 @@ type PropKeys = keyof ColorIndicatorOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type ColorIndicatorProps = ColorIndicatorOwnProps &
-  WithStyleProps<ColorIndicatorTheme, ColorIndicatorStyle> &
+  WithStyleProps<
+    ReturnType<NewComponentTypes['ColorIndicator']>,
+    ColorIndicatorStyle
+  > &
   OtherHTMLAttributes<ColorIndicatorOwnProps>
 
 type ColorIndicatorStyle = ComponentStyle<'colorIndicator'>
diff --git a/packages/ui-color-picker/src/ColorMixer/v2/ColorPalette/props.ts b/packages/ui-color-picker/src/ColorMixer/v2/ColorPalette/props.ts
index 4ad7985376..63e98992c5 100644
--- a/packages/ui-color-picker/src/ColorMixer/v2/ColorPalette/props.ts
+++ b/packages/ui-color-picker/src/ColorMixer/v2/ColorPalette/props.ts
@@ -23,11 +23,9 @@
  */
 
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
-import type {
-  OtherHTMLAttributes,
-  ColorMixerPaletteTheme
-} from '@instructure/shared-types'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { HSVType } from '@instructure/ui-color-utils'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
@@ -52,7 +50,7 @@ type PropKeys = keyof ColorPaletteOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type ColorPaletteProps = ColorPaletteOwnProps &
-  WithStyleProps<ColorMixerPaletteTheme, ColorPaletteStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Palette']>, ColorPaletteStyle> &
   OtherHTMLAttributes<ColorPaletteOwnProps> &
   WithDeterministicIdProps
 
diff --git a/packages/ui-color-picker/src/ColorMixer/v2/RGBAInput/props.ts b/packages/ui-color-picker/src/ColorMixer/v2/RGBAInput/props.ts
index a815a47fb2..fa95ee2d84 100644
--- a/packages/ui-color-picker/src/ColorMixer/v2/RGBAInput/props.ts
+++ b/packages/ui-color-picker/src/ColorMixer/v2/RGBAInput/props.ts
@@ -23,11 +23,9 @@
  */
 
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
-import type {
-  OtherHTMLAttributes,
-  ColorMixerRGBAInputTheme
-} from '@instructure/shared-types'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { RGBAType } from '@instructure/ui-color-utils'
 
 type RGBAInputOwnProps = {
@@ -53,7 +51,7 @@ type PropKeys = keyof RGBAInputOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type RGBAInputProps = RGBAInputOwnProps &
-  WithStyleProps<ColorMixerRGBAInputTheme, RGBAInputStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['RgbaInput']>, RGBAInputStyle> &
   OtherHTMLAttributes<RGBAInputOwnProps>
 
 type RGBAInputStyle = ComponentStyle<
diff --git a/packages/ui-color-picker/src/ColorMixer/v2/Slider/props.ts b/packages/ui-color-picker/src/ColorMixer/v2/Slider/props.ts
index 0a12bec596..706241d5c1 100644
--- a/packages/ui-color-picker/src/ColorMixer/v2/Slider/props.ts
+++ b/packages/ui-color-picker/src/ColorMixer/v2/Slider/props.ts
@@ -23,10 +23,8 @@
  */
 
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import type {
-  OtherHTMLAttributes,
-  ColorMixerSliderTheme
-} from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 
 type SliderOwnProps = {
   isColorSlider?: boolean
@@ -46,7 +44,7 @@ type PropKeys = keyof SliderOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type SliderProps = SliderOwnProps &
-  WithStyleProps<ColorMixerSliderTheme, SliderStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Slider']>, SliderStyle> &
   OtherHTMLAttributes<SliderOwnProps>
 
 type SliderStyleProps = {
diff --git a/packages/ui-color-picker/src/ColorMixer/v2/styles.ts b/packages/ui-color-picker/src/ColorMixer/v2/styles.ts
index 1b51ae52f4..d7ef07020b 100644
--- a/packages/ui-color-picker/src/ColorMixer/v2/styles.ts
+++ b/packages/ui-color-picker/src/ColorMixer/v2/styles.ts
@@ -29,9 +29,6 @@ import type { ColorMixerStyle } from './props'
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (): ColorMixerStyle => {
diff --git a/packages/ui-color-picker/src/ColorPicker/v2/props.ts b/packages/ui-color-picker/src/ColorPicker/v2/props.ts
index acd94ad886..d61bf8afce 100644
--- a/packages/ui-color-picker/src/ColorPicker/v2/props.ts
+++ b/packages/ui-color-picker/src/ColorPicker/v2/props.ts
@@ -29,10 +29,8 @@ import type {
   ComponentStyle,
   Spacing
 } from '@instructure/emotion'
-import type {
-  ColorPickerTheme,
-  OtherHTMLAttributes
-} from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 type ContrastStrength = 'min' | 'mid' | 'max'
 
 type ColorPickerOwnProps = {
@@ -253,7 +251,10 @@ type PropKeys = keyof ColorPickerOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type ColorPickerProps = ColorPickerOwnProps &
-  WithStyleProps<ColorPickerTheme, ColorPickerStyle> &
+  WithStyleProps<
+    ReturnType<NewComponentTypes['ColorPicker']>,
+    ColorPickerStyle
+  > &
   OtherHTMLAttributes<ColorPickerOwnProps>
 
 type ColorPickerStyle = ComponentStyle<
diff --git a/packages/ui-color-picker/src/ColorPreset/v2/props.ts b/packages/ui-color-picker/src/ColorPreset/v2/props.ts
index 31e132d0ab..adaeadf4c6 100644
--- a/packages/ui-color-picker/src/ColorPreset/v2/props.ts
+++ b/packages/ui-color-picker/src/ColorPreset/v2/props.ts
@@ -23,10 +23,8 @@
  */
 
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import type {
-  OtherHTMLAttributes,
-  ColorPresetTheme
-} from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { RGBAType } from '@instructure/ui-color-utils'
 
 type ContrastStrength = 'min' | 'mid' | 'max'
@@ -125,7 +123,10 @@ type PropKeys = keyof ColorPresetOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type ColorPresetProps = ColorPresetOwnProps &
-  WithStyleProps<ColorPresetTheme, ColorPresetStyle> &
+  WithStyleProps<
+    ReturnType<NewComponentTypes['ColorPreset']>,
+    ColorPresetStyle
+  > &
   OtherHTMLAttributes<ColorPresetOwnProps>
 
 type ColorPresetStyle = ComponentStyle<
diff --git a/packages/ui-drawer-layout/package.json b/packages/ui-drawer-layout/package.json
index e1839edd58..21fb14774d 100644
--- a/packages/ui-drawer-layout/package.json
+++ b/packages/ui-drawer-layout/package.json
@@ -35,6 +35,7 @@
     "@instructure/ui-portal": "workspace:*",
     "@instructure/ui-position": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/ui-view": "workspace:*",
     "@instructure/uid": "workspace:*"
@@ -42,7 +43,6 @@
   "devDependencies": {
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-buttons": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
diff --git a/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerContent/props.ts b/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerContent/props.ts
index eef56c8421..ce202908ee 100644
--- a/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerContent/props.ts
+++ b/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerContent/props.ts
@@ -24,11 +24,9 @@
 
 import { AriaRole } from 'react'
 
-import type {
-  DrawerLayoutContentTheme,
-  OtherHTMLAttributes
-} from '@instructure/shared-types'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type DrawerContentSize = { width: number; height?: number }
 
@@ -52,7 +50,10 @@ type PropKeys = keyof DrawerLayoutContentOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type DrawerLayoutContentProps = DrawerLayoutContentOwnProps &
-  WithStyleProps<DrawerLayoutContentTheme, DrawerLayoutContentStyle> &
+  WithStyleProps<
+    ReturnType<NewComponentTypes['DrawerLayoutContent']>,
+    DrawerLayoutContentStyle
+  > &
   OtherHTMLAttributes<DrawerLayoutContentOwnProps>
 
 type DrawerLayoutContentStyle = ComponentStyle<'drawerContent'>
diff --git a/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerTray/props.ts b/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerTray/props.ts
index c6ea1b1ee6..decbe7dcdf 100644
--- a/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerTray/props.ts
+++ b/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerTray/props.ts
@@ -26,8 +26,8 @@ import React from 'react'
 import type { PositionMountNode } from '@instructure/ui-position'
 import type { TextDirectionContextConsumerProps } from '@instructure/ui-i18n'
 import type { ComponentStyle, WithStyleProps } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type {
-  DrawerLayoutTrayTheme,
   LiveRegion,
   OtherHTMLAttributes,
   UIElement
@@ -183,7 +183,10 @@ type PropKeys = keyof DrawerLayoutTrayOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type DrawerLayoutTrayProps = DrawerLayoutTrayOwnProps &
-  WithStyleProps<DrawerLayoutTrayTheme, DrawerLayoutTrayStyle> &
+  WithStyleProps<
+    ReturnType<NewComponentTypes['DrawerLayoutTray']>,
+    DrawerLayoutTrayStyle
+  > &
   OtherHTMLAttributes<DrawerLayoutTrayOwnProps>
 
 type DrawerLayoutTrayStyle = ComponentStyle<
diff --git a/packages/ui-drawer-layout/src/DrawerLayout/v2/styles.ts b/packages/ui-drawer-layout/src/DrawerLayout/v2/styles.ts
index 0d9d624373..5dd07955ab 100644
--- a/packages/ui-drawer-layout/src/DrawerLayout/v2/styles.ts
+++ b/packages/ui-drawer-layout/src/DrawerLayout/v2/styles.ts
@@ -29,10 +29,7 @@ import type { DrawerLayoutStyle } from './props'
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
- * @return {Object} The final style object, which will be used in the component
+ * @return The final style object, which will be used in the component
  */
 const generateStyle = (): DrawerLayoutStyle => {
   return {
diff --git a/packages/ui-drilldown/package.json b/packages/ui-drilldown/package.json
index 65e270ed3a..b4fdc8ca1e 100644
--- a/packages/ui-drilldown/package.json
+++ b/packages/ui-drilldown/package.json
@@ -34,6 +34,7 @@
     "@instructure/ui-position": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
     "@instructure/ui-selectable": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/ui-view": "workspace:*"
   },
@@ -42,7 +43,6 @@
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
     "@instructure/ui-scripts": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-drilldown/src/Drilldown/v2/DrilldownGroup/props.ts b/packages/ui-drilldown/src/Drilldown/v2/DrilldownGroup/props.ts
index 61f33fbf0d..02fc6721ac 100644
--- a/packages/ui-drilldown/src/Drilldown/v2/DrilldownGroup/props.ts
+++ b/packages/ui-drilldown/src/Drilldown/v2/DrilldownGroup/props.ts
@@ -26,7 +26,6 @@ import React from 'react'
 
 import type {
   OtherHTMLAttributes,
-  OptionsTheme,
   AsElementType
 } from '@instructure/shared-types'
 import type { WithStyleProps } from '@instructure/emotion'
@@ -34,6 +33,7 @@ import type { WithStyleProps } from '@instructure/emotion'
 import Drilldown from '../index'
 import type { DrilldownOptionValue } from '../DrilldownOption/props'
 import type { OptionChild, SeparatorChild } from '../props'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type GroupChildren = OptionChild | SeparatorChild
 
@@ -113,7 +113,7 @@ type PropKeys = keyof DrilldownGroupOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type DrilldownGroupProps = DrilldownGroupOwnProps &
-  WithStyleProps<OptionsTheme, null> &
+  WithStyleProps<ReturnType<NewComponentTypes['Options']>, null> &
   OtherHTMLAttributes<DrilldownGroupOwnProps>
 const allowedProps: AllowedPropKeys = [
   'id',
diff --git a/packages/ui-drilldown/src/Drilldown/v2/DrilldownOption/props.ts b/packages/ui-drilldown/src/Drilldown/v2/DrilldownOption/props.ts
index be7c1d7ad6..e803a18c52 100644
--- a/packages/ui-drilldown/src/Drilldown/v2/DrilldownOption/props.ts
+++ b/packages/ui-drilldown/src/Drilldown/v2/DrilldownOption/props.ts
@@ -25,7 +25,6 @@
 import React from 'react'
 import type {
   OtherHTMLAttributes,
-  OptionsItemTheme,
   AsElementType
 } from '@instructure/shared-types'
 import type { WithStyleProps } from '@instructure/emotion'
@@ -36,6 +35,7 @@ import type {
 
 import Drilldown from '../index'
 import { Renderable } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type DrilldownOptionValue = string | number | undefined
 
@@ -182,7 +182,7 @@ type PropKeys = keyof DrilldownOptionOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type DrilldownOptionProps = DrilldownOptionOwnProps &
-  WithStyleProps<OptionsItemTheme, null> &
+  WithStyleProps<ReturnType<NewComponentTypes['OptionsItem']>, null> &
   OtherHTMLAttributes<DrilldownOptionOwnProps>
 const allowedProps: AllowedPropKeys = [
   'id',
diff --git a/packages/ui-drilldown/src/Drilldown/v2/DrilldownSeparator/props.ts b/packages/ui-drilldown/src/Drilldown/v2/DrilldownSeparator/props.ts
index 823d4f83e6..2946ebe116 100644
--- a/packages/ui-drilldown/src/Drilldown/v2/DrilldownSeparator/props.ts
+++ b/packages/ui-drilldown/src/Drilldown/v2/DrilldownSeparator/props.ts
@@ -25,11 +25,11 @@
 import type {
   OtherHTMLAttributes,
   PickPropsWithExceptions,
-  AsElementType,
-  OptionsSeparatorTheme
+  AsElementType
 } from '@instructure/shared-types'
 import type { WithStyleProps } from '@instructure/emotion'
 import type { OptionsSeparatorProps } from '@instructure/ui-options'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type DrilldownSeparatorOwnProps = {
   id: string
@@ -48,7 +48,7 @@ type DrilldownSeparatorProps =
   // we are passing all props to Options.Separator
   PickPropsWithExceptions<OptionsSeparatorProps, 'as'> &
     DrilldownSeparatorOwnProps &
-    WithStyleProps<OptionsSeparatorTheme, null> &
+    WithStyleProps<ReturnType<NewComponentTypes['OptionsSeparator']>, null> &
     OtherHTMLAttributes<DrilldownSeparatorOwnProps>
 const allowedProps: AllowedPropKeys = ['id', 'as']
 
diff --git a/packages/ui-drilldown/src/Drilldown/v2/index.tsx b/packages/ui-drilldown/src/Drilldown/v2/index.tsx
index 3fedf5bf1f..ed715e9f16 100644
--- a/packages/ui-drilldown/src/Drilldown/v2/index.tsx
+++ b/packages/ui-drilldown/src/Drilldown/v2/index.tsx
@@ -1198,7 +1198,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
 
     // track as valid active option if not the title and the map doesn't already contain the id
     if (id !== this._headerTitleId && !this._activeOptionsMap[id]) {
-      // store index to know the order of ids later; js objects doesn't preserve order
+      // store index to know the order of ids later; js objects don't preserve order
       this._activeOptionsMap[id] = {
         ...option,
         ...optionData,
diff --git a/packages/ui-drilldown/src/Drilldown/v2/props.ts b/packages/ui-drilldown/src/Drilldown/v2/props.ts
index 34da6e9a27..14c3cd0fdf 100644
--- a/packages/ui-drilldown/src/Drilldown/v2/props.ts
+++ b/packages/ui-drilldown/src/Drilldown/v2/props.ts
@@ -33,7 +33,6 @@ import type {
   PositionMountNode
 } from '@instructure/ui-position'
 import type {
-  DrilldownTheme,
   OtherHTMLAttributes,
   AsElementType
 } from '@instructure/shared-types'
@@ -51,6 +50,7 @@ import { DrilldownSeparator } from './DrilldownSeparator'
 import type { DrilldownSeparatorProps } from './DrilldownSeparator/props'
 
 import { Drilldown } from './index'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type PageChild = React.ComponentElement<DrilldownPageProps, DrilldownPage>
 type GroupChild = React.ComponentElement<DrilldownGroupProps, DrilldownGroup>
@@ -273,7 +273,7 @@ type PropKeys = keyof DrilldownOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type DrilldownProps = DrilldownOwnProps &
-  WithStyleProps<DrilldownTheme, DrilldownStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Drilldown']>, DrilldownStyle> &
   WithDeterministicIdProps &
   OtherHTMLAttributes<DrilldownOwnProps>
 
diff --git a/packages/ui-editable/src/InPlaceEdit/v2/styles.ts b/packages/ui-editable/src/InPlaceEdit/v2/styles.ts
index b0c4f3dcd5..d8fb07c556 100644
--- a/packages/ui-editable/src/InPlaceEdit/v2/styles.ts
+++ b/packages/ui-editable/src/InPlaceEdit/v2/styles.ts
@@ -29,10 +29,7 @@ import type { InPlaceEditStyle } from './props'
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
- * @return {Object} The final style object, which will be used in the component
+ * @return The final style object, which will be used in the component
  */
 const generateStyle = (): InPlaceEditStyle => {
   return {
diff --git a/packages/ui-file-drop/package.json b/packages/ui-file-drop/package.json
index 1d34bfa7dc..5e69105c57 100644
--- a/packages/ui-file-drop/package.json
+++ b/packages/ui-file-drop/package.json
@@ -30,6 +30,7 @@
     "@instructure/ui-color-utils": "workspace:*",
     "@instructure/ui-form-field": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/ui-view": "workspace:*",
     "@instructure/uid": "workspace:*",
@@ -38,7 +39,6 @@
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
diff --git a/packages/ui-file-drop/src/FileDrop/v2/props.ts b/packages/ui-file-drop/src/FileDrop/v2/props.ts
index 1462279c13..8e9e9633ee 100644
--- a/packages/ui-file-drop/src/FileDrop/v2/props.ts
+++ b/packages/ui-file-drop/src/FileDrop/v2/props.ts
@@ -28,10 +28,8 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
-import type {
-  FileDropTheme,
-  OtherHTMLAttributes
-} from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 import { Renderable } from '@instructure/shared-types'
 type RenderLabelProps = {
@@ -173,7 +171,7 @@ type PropKeys = keyof FileDropOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type FileDropProps = FileDropOwnProps &
-  WithStyleProps<FileDropTheme, FileDropStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['FileDrop']>, FileDropStyle> &
   OtherHTMLAttributes<FileDropOwnProps> &
   WithDeterministicIdProps
 
diff --git a/packages/ui-flex/package.json b/packages/ui-flex/package.json
index 8d4d229273..dbea5f8f73 100644
--- a/packages/ui-flex/package.json
+++ b/packages/ui-flex/package.json
@@ -28,12 +28,12 @@
     "@instructure/emotion": "workspace:*",
     "@instructure/shared-types": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-view": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
diff --git a/packages/ui-flex/src/Flex/v2/props.ts b/packages/ui-flex/src/Flex/v2/props.ts
index 4fe5925cd5..2dbc4817f8 100644
--- a/packages/ui-flex/src/Flex/v2/props.ts
+++ b/packages/ui-flex/src/Flex/v2/props.ts
@@ -24,7 +24,6 @@
 
 import type {
   AsElementType,
-  FlexTheme,
   OtherHTMLAttributes,
   Renderable
 } from '@instructure/shared-types'
@@ -33,6 +32,7 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type FlexOwnProps = {
   /**
@@ -127,7 +127,7 @@ type PropKeys = keyof FlexOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type FlexProps = FlexOwnProps &
-  WithStyleProps<FlexTheme, FlexStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Flex']>, FlexStyle> &
   OtherHTMLAttributes<FlexOwnProps>
 
 type FlexStyle = ComponentStyle<'flex'>
diff --git a/packages/ui-form-field/package.json b/packages/ui-form-field/package.json
index 584c6a2194..acbce74b29 100644
--- a/packages/ui-form-field/package.json
+++ b/packages/ui-form-field/package.json
@@ -32,13 +32,13 @@
     "@instructure/ui-grid": "workspace:*",
     "@instructure/ui-icons": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/uid": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
diff --git a/packages/ui-form-field/src/FormFieldGroup/v2/props.ts b/packages/ui-form-field/src/FormFieldGroup/v2/props.ts
index 5bae4f33a0..87320c6d14 100644
--- a/packages/ui-form-field/src/FormFieldGroup/v2/props.ts
+++ b/packages/ui-form-field/src/FormFieldGroup/v2/props.ts
@@ -24,7 +24,6 @@
 
 import type {
   AsElementType,
-  FormFieldGroupTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
@@ -73,7 +72,7 @@ type PropKeys = keyof FormFieldGroupOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type FormFieldGroupProps = FormFieldGroupOwnProps &
-  WithStyleProps<FormFieldGroupTheme, FormFieldGroupStyle> &
+  WithStyleProps<null, FormFieldGroupStyle> &
   OtherHTMLAttributes<FormFieldGroupOwnProps> &
   // Adding other props that can be passed to FormFieldLayout,
   // excluding the ones we set manually
diff --git a/packages/ui-form-field/src/FormFieldGroup/v2/styles.ts b/packages/ui-form-field/src/FormFieldGroup/v2/styles.ts
index f2d9ae2748..5ec5d0fb6e 100644
--- a/packages/ui-form-field/src/FormFieldGroup/v2/styles.ts
+++ b/packages/ui-form-field/src/FormFieldGroup/v2/styles.ts
@@ -29,14 +29,12 @@ import type { FormFieldGroupProps, FormFieldGroupStyle } from './props'
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} _componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-  _componentTheme: {},
+  _componentTheme: never,
   props: FormFieldGroupProps
 ): FormFieldGroupStyle => {
   const { disabled } = props
diff --git a/packages/ui-form-field/src/FormFieldLayout/v2/props.ts b/packages/ui-form-field/src/FormFieldLayout/v2/props.ts
index bf7671412c..7ad2ae6e66 100644
--- a/packages/ui-form-field/src/FormFieldLayout/v2/props.ts
+++ b/packages/ui-form-field/src/FormFieldLayout/v2/props.ts
@@ -28,11 +28,12 @@ import type {
 } from '@instructure/shared-types'
 import type {
   ComponentStyle,
-  Spacing,
-  ThemeOverrideValue
+  NewThemeOverrideProp,
+  Spacing
 } from '@instructure/emotion'
 import type { FormMessage } from '../../utils/v1/FormPropTypes'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type FormFieldLayoutOwnProps = {
   label: React.ReactNode
@@ -111,9 +112,9 @@ type PropKeys = keyof FormFieldLayoutOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type FormFieldLayoutProps = FormFieldLayoutOwnProps & {
-  themeOverride?: ThemeOverrideValue
-} & OtherHTMLAttributes<FormFieldLayoutOwnProps> &
+type FormFieldLayoutProps = FormFieldLayoutOwnProps &
+  NewThemeOverrideProp<ReturnType<NewComponentTypes['FormFieldLayout']>> &
+  OtherHTMLAttributes<FormFieldLayoutOwnProps> &
   WithDeterministicIdProps
 
 type FormFieldLayoutStyle = ComponentStyle<
diff --git a/packages/ui-form-field/src/FormFieldMessage/v2/props.ts b/packages/ui-form-field/src/FormFieldMessage/v2/props.ts
index afd1d08e06..40ae1a05b9 100644
--- a/packages/ui-form-field/src/FormFieldMessage/v2/props.ts
+++ b/packages/ui-form-field/src/FormFieldMessage/v2/props.ts
@@ -22,11 +22,12 @@
  * SOFTWARE.
  */
 
-import type { ComponentStyle, ThemeOverrideValue } from '@instructure/emotion'
+import type { ComponentStyle, NewThemeOverrideProp } from '@instructure/emotion'
 import type {
   FormMessageType,
   FormMessageChild
 } from '../../utils/v1/FormPropTypes'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type FormFieldMessageOwnProps = {
   variant?: FormMessageType
@@ -37,9 +38,8 @@ type PropKeys = keyof FormFieldMessageOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type FormFieldMessageProps = FormFieldMessageOwnProps & {
-  themeOverride?: ThemeOverrideValue
-}
+type FormFieldMessageProps = FormFieldMessageOwnProps &
+  NewThemeOverrideProp<ReturnType<NewComponentTypes['FormFieldMessage']>>
 
 type FormFieldMessageStyle = ComponentStyle<'formFieldMessage' | 'icon'>
 const allowedProps: AllowedPropKeys = ['variant', 'children']
diff --git a/packages/ui-form-field/src/FormFieldMessage/v2/styles.ts b/packages/ui-form-field/src/FormFieldMessage/v2/styles.ts
index e1ccaaa233..96a70ae578 100644
--- a/packages/ui-form-field/src/FormFieldMessage/v2/styles.ts
+++ b/packages/ui-form-field/src/FormFieldMessage/v2/styles.ts
@@ -35,10 +35,10 @@ type StyleParams = {
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
- * @return {Object} The final style object, which will be used in the component
+ * @param componentTheme The theme variable object.
+ * @param params Additional parameters to customize the style.
+ * @param sharedTokens Shared token object that stores common values for the theme.
+ * @return The final style object, which will be used in the component
  */
 const generateStyle = (
   componentTheme: ReturnType<NewComponentTypes['FormFieldMessage']>,
diff --git a/packages/ui-form-field/src/FormFieldMessages/v2/props.ts b/packages/ui-form-field/src/FormFieldMessages/v2/props.ts
index 02d98f198b..359ec11f42 100644
--- a/packages/ui-form-field/src/FormFieldMessages/v2/props.ts
+++ b/packages/ui-form-field/src/FormFieldMessages/v2/props.ts
@@ -22,10 +22,7 @@
  * SOFTWARE.
  */
 
-import type {
-  FormFieldMessagesTheme,
-  OtherHTMLAttributes
-} from '@instructure/shared-types'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type { FormMessage } from '../../utils/v1/FormPropTypes'
 
@@ -49,7 +46,7 @@ type PropKeys = keyof FormFieldMessagesOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type FormFieldMessagesProps = FormFieldMessagesOwnProps &
-  WithStyleProps<FormFieldMessagesTheme, FormFieldMessagesStyle> &
+  WithStyleProps<null, FormFieldMessagesStyle> &
   OtherHTMLAttributes<FormFieldMessagesOwnProps>
 
 type FormFieldMessagesStyle = ComponentStyle<'formFieldMessages' | 'message'>
diff --git a/packages/ui-form-field/src/FormFieldMessages/v2/styles.ts b/packages/ui-form-field/src/FormFieldMessages/v2/styles.ts
index 3f245f18a3..d5d4325132 100644
--- a/packages/ui-form-field/src/FormFieldMessages/v2/styles.ts
+++ b/packages/ui-form-field/src/FormFieldMessages/v2/styles.ts
@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 
-import type { FormFieldMessagesTheme } from '@instructure/shared-types'
 import type { FormFieldMessagesProps, FormFieldMessagesStyle } from './props'
 
 /**
@@ -30,12 +29,12 @@ import type { FormFieldMessagesProps, FormFieldMessagesStyle } from './props'
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} _componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  _componentTheme: FormFieldMessagesTheme,
+  _componentTheme: never,
   props: FormFieldMessagesProps
 ): FormFieldMessagesStyle => {
   return {
diff --git a/packages/ui-grid/package.json b/packages/ui-grid/package.json
index 16f0f82c45..1f588ca463 100644
--- a/packages/ui-grid/package.json
+++ b/packages/ui-grid/package.json
@@ -29,12 +29,12 @@
     "@instructure/shared-types": "workspace:*",
     "@instructure/ui-a11y-content": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
diff --git a/packages/ui-grid/src/Grid/v2/props.ts b/packages/ui-grid/src/Grid/v2/props.ts
index f226df96b3..b9e1053cba 100644
--- a/packages/ui-grid/src/Grid/v2/props.ts
+++ b/packages/ui-grid/src/Grid/v2/props.ts
@@ -22,8 +22,9 @@
  * SOFTWARE.
  */
 
-import type { GridTheme, OtherHTMLAttributes } from '@instructure/shared-types'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { GridBreakpoints } from '../../utils/v1/GridTypes'
 
 type GridOwnProps = {
@@ -44,7 +45,7 @@ type PropKeys = keyof GridOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type GridProps = GridOwnProps &
-  WithStyleProps<GridTheme, GridStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Grid']>, GridStyle> &
   OtherHTMLAttributes<GridOwnProps>
 
 type GridStyle = ComponentStyle<'grid'>
diff --git a/packages/ui-grid/src/GridCol/v2/props.ts b/packages/ui-grid/src/GridCol/v2/props.ts
index 8820e80080..9472e6e316 100644
--- a/packages/ui-grid/src/GridCol/v2/props.ts
+++ b/packages/ui-grid/src/GridCol/v2/props.ts
@@ -23,7 +23,8 @@
  */
 
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import type { GridTheme, OtherHTMLAttributes } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { GridBreakpoints } from '../../utils/v1/GridTypes'
 
 type ColWidths = 'auto' | number
@@ -66,7 +67,7 @@ type PropKeys = keyof GridColOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type GridColProps = GridColOwnProps &
-  WithStyleProps<GridTheme, GridColStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['GridCol']>, GridColStyle> &
   OtherHTMLAttributes<GridColOwnProps>
 
 type GridColStyle = ComponentStyle<'gridCol'>
diff --git a/packages/ui-grid/src/GridRow/v2/props.ts b/packages/ui-grid/src/GridRow/v2/props.ts
index 9c6f07ae50..1359a6ff24 100644
--- a/packages/ui-grid/src/GridRow/v2/props.ts
+++ b/packages/ui-grid/src/GridRow/v2/props.ts
@@ -24,8 +24,9 @@
 
 import React from 'react'
 
-import type { GridTheme, OtherHTMLAttributes } from '@instructure/shared-types'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { GridBreakpoints } from '../../utils/v1/GridTypes'
 
 type GridRowOwnProps = {
@@ -47,7 +48,7 @@ type PropKeys = keyof GridRowOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type GridRowProps = GridRowOwnProps &
-  WithStyleProps<GridTheme, GridRowStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['GridRow']>, GridRowStyle> &
   OtherHTMLAttributes<GridRowOwnProps>
 
 type GridRowStyle = ComponentStyle<'gridRow'>
diff --git a/packages/ui-heading/package.json b/packages/ui-heading/package.json
index 5f5304124b..d546ab276a 100644
--- a/packages/ui-heading/package.json
+++ b/packages/ui-heading/package.json
@@ -29,12 +29,12 @@
     "@instructure/shared-types": "workspace:*",
     "@instructure/ui-icons": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-view": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
diff --git a/packages/ui-heading/src/Heading/v2/props.ts b/packages/ui-heading/src/Heading/v2/props.ts
index a6677b3f74..44ab944f4c 100644
--- a/packages/ui-heading/src/Heading/v2/props.ts
+++ b/packages/ui-heading/src/Heading/v2/props.ts
@@ -25,7 +25,6 @@
 import React from 'react'
 import type {
   AsElementType,
-  HeadingTheme,
   OtherHTMLAttributes,
   Renderable
 } from '@instructure/shared-types'
@@ -34,6 +33,7 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type HeadingLevel<U extends keyof React.JSX.IntrinsicElements> = U
 
@@ -111,7 +111,7 @@ type PropKeys = keyof HeadingOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type HeadingProps = HeadingOwnProps &
-  WithStyleProps<HeadingTheme, HeadingStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Heading']>, HeadingStyle> &
   OtherHTMLAttributes<HeadingOwnProps>
 
 type HeadingStyle = ComponentStyle<
diff --git a/packages/ui-icons/src/props.ts b/packages/ui-icons/src/props.ts
index 4c3f78eca1..cedc93d63a 100644
--- a/packages/ui-icons/src/props.ts
+++ b/packages/ui-icons/src/props.ts
@@ -22,8 +22,9 @@
  * SOFTWARE.
  */
 
-import type { ComponentStyle, ThemeOverrideValue } from '@instructure/emotion'
+import type { ComponentStyle, NewThemeOverrideProp } from '@instructure/emotion'
 import type { OtherHTMLAttributes } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 /**
  * SVGIcon size tokens (legacy) - DEPRECATED
@@ -170,13 +171,13 @@ type InstUIIconOwnProps = {
 
 /**
  * Full props: InstUI semantic + theme support + SVG attributes.
- * OtherHTMLAttributes provides SVG props for backward compatibility.
+ * `OtherHTMLAttributes` provides SVG props for backward compatibility.
  * children, style, and className are explicitly omitted.
  */
 type InstUIIconProps = Omit<
-  InstUIIconOwnProps & {
-    themeOverride?: ThemeOverrideValue
-  } & OtherHTMLAttributes<InstUIIconOwnProps>,
+  InstUIIconOwnProps &
+    NewThemeOverrideProp<ReturnType<NewComponentTypes['Icon']>> &
+    OtherHTMLAttributes<InstUIIconOwnProps>,
   'children' | 'style' | 'className'
 >
 
diff --git a/packages/ui-img/src/Img/v2/props.ts b/packages/ui-img/src/Img/v2/props.ts
index 87593daee6..abe9b9bee6 100644
--- a/packages/ui-img/src/Img/v2/props.ts
+++ b/packages/ui-img/src/Img/v2/props.ts
@@ -66,8 +66,7 @@ type PropKeys = keyof ImgOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type ImgProps = ImgOwnProps &
-  //@ts-expect-error TODO-theme-types
-  WithStyleProps<NewComponentTypes['Img'], ImgStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Img']>, ImgStyle> &
   OtherHTMLAttributes<ImgOwnProps>
 
 type ImgStyle = ComponentStyle<'overlay' | 'container' | 'img'>
diff --git a/packages/ui-img/src/Img/v2/styles.ts b/packages/ui-img/src/Img/v2/styles.ts
index 6ba178b764..b47244d0eb 100644
--- a/packages/ui-img/src/Img/v2/styles.ts
+++ b/packages/ui-img/src/Img/v2/styles.ts
@@ -32,11 +32,10 @@ import type { ImgProps, ImgStyle } from './props'
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: NewComponentTypes['Img'],
+  componentTheme: ReturnType<NewComponentTypes['Img']>,
   props: ImgProps
 ): ImgStyle => {
   const { overlay, withBlur, withGrayscale, constrain } = props
@@ -47,25 +46,22 @@ const generateStyle = (
   // if overlay or filters are updated via props,
   // make the transition look smooth
   const transitionStyle = {
-    //@ts-expect-error TODO-theme-types
     transition: `all ${componentTheme.effectTransitionDuration}`
   }
 
   const getFilterStyle = () => {
     const filters = []
-
-    //@ts-expect-error TODO-theme-types
     withBlur && filters.push(`blur(${componentTheme.imageBlurAmount})`)
     withGrayscale && filters.push('grayscale(1)')
 
     return filters.length > 0
       ? {
-        ...transitionStyle,
-        filter: filters.join(' ')
-      }
+          ...transitionStyle,
+          filter: filters.join(' ')
+        }
       : {
-        filter: 'none'
-      }
+          filter: 'none'
+        }
   }
 
   const fillContainer = {
diff --git a/packages/ui-instructure/package.json b/packages/ui-instructure/package.json
index 02f2456858..fe395ccbdc 100644
--- a/packages/ui-instructure/package.json
+++ b/packages/ui-instructure/package.json
@@ -34,13 +34,13 @@
     "@instructure/ui-popover": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
     "@instructure/ui-text": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-view": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
diff --git a/packages/ui-instructure/src/AiInformation/v2/props.ts b/packages/ui-instructure/src/AiInformation/v2/props.ts
index dbf568c15a..0b3110c07c 100644
--- a/packages/ui-instructure/src/AiInformation/v2/props.ts
+++ b/packages/ui-instructure/src/AiInformation/v2/props.ts
@@ -21,10 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import type { ComponentStyle, ThemeOverrideValue } from '@instructure/emotion'
+
+import type { ComponentStyle, NewThemeOverrideProp } from '@instructure/emotion'
 import type { OtherHTMLAttributes, Renderable } from '@instructure/shared-types'
 import type { NutritionFactsProps } from '../../NutritionFacts/v1/props'
 import type { DataPermissionLevelsProps } from '../../DataPermissionLevels/v1/props'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type AiInformationOwnProps = {
   /**
@@ -119,9 +121,9 @@ type PropKeys = keyof AiInformationOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type AiInformationProps = AiInformationOwnProps & {
-  themeOverride?: ThemeOverrideValue
-} & OtherHTMLAttributes<AiInformationOwnProps>
+type AiInformationProps = AiInformationOwnProps &
+  NewThemeOverrideProp<ReturnType<NewComponentTypes['AiInformation']>> &
+  OtherHTMLAttributes<AiInformationOwnProps>
 
 type AiInformationStyle = ComponentStyle<
   | 'aiInformation'
diff --git a/packages/ui-instructure/src/AiInformation/v2/styles.ts b/packages/ui-instructure/src/AiInformation/v2/styles.ts
index b77328adb3..37a319c847 100644
--- a/packages/ui-instructure/src/AiInformation/v2/styles.ts
+++ b/packages/ui-instructure/src/AiInformation/v2/styles.ts
@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
-import type { AiInformationStyle, AiInformationProps } from './props'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { AiInformationStyle } from './props'
 
 /**
  * ---
@@ -31,14 +31,10 @@ import type { AiInformationStyle, AiInformationProps } from './props'
  * ---
  * Generates the style object from the theme and provided additional information
  * @param componentTheme The theme variable object.
- * @param params Additional parameters to customize the style.
- * @param sharedTokens Shared token object that stores common values for the theme.
  * @return The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: ReturnType<NewComponentTypes['AiInformation']>,
-  _params: AiInformationProps,
-  _sharedTokens: SharedTokens
+  componentTheme: ReturnType<NewComponentTypes['AiInformation']>
 ): AiInformationStyle => {
   return {
     aiInformation: {
diff --git a/packages/ui-instructure/src/DataPermissionLevels/v2/props.ts b/packages/ui-instructure/src/DataPermissionLevels/v2/props.ts
index ac947eead5..ea15003c2e 100644
--- a/packages/ui-instructure/src/DataPermissionLevels/v2/props.ts
+++ b/packages/ui-instructure/src/DataPermissionLevels/v2/props.ts
@@ -22,8 +22,9 @@
  * SOFTWARE.
  */
 
-import type { ComponentStyle, ThemeOverrideValue } from '@instructure/emotion'
+import type { ComponentStyle, NewThemeOverrideProp } from '@instructure/emotion'
 import type { OtherHTMLAttributes } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type DataPermissionLevelsOwnProps = {
   /**
@@ -73,9 +74,9 @@ type PropKeys = keyof DataPermissionLevelsOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type DataPermissionLevelsProps = DataPermissionLevelsOwnProps & {
-  themeOverride?: ThemeOverrideValue
-} & OtherHTMLAttributes<DataPermissionLevelsOwnProps>
+type DataPermissionLevelsProps = DataPermissionLevelsOwnProps &
+  NewThemeOverrideProp<ReturnType<NewComponentTypes['DataPermissionLevels']>> &
+  OtherHTMLAttributes<DataPermissionLevelsOwnProps>
 
 type DataPermissionLevelsStyle = ComponentStyle<
   | 'dataPermissionLevels'
diff --git a/packages/ui-instructure/src/DataPermissionLevels/v2/styles.ts b/packages/ui-instructure/src/DataPermissionLevels/v2/styles.ts
index 154d0a2fa9..40d9e11dbc 100644
--- a/packages/ui-instructure/src/DataPermissionLevels/v2/styles.ts
+++ b/packages/ui-instructure/src/DataPermissionLevels/v2/styles.ts
@@ -22,11 +22,8 @@
  * SOFTWARE.
  */
 
-import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
-import type {
-  DataPermissionLevelsProps,
-  DataPermissionLevelsStyle
-} from './props'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { DataPermissionLevelsStyle } from './props'
 
 /**
  * ---
@@ -34,14 +31,10 @@ import type {
  * ---
  * Generates the style object from the theme and provided additional information
  * @param componentTheme The theme variable object.
- * @param params Additional parameters to customize the style.
- * @param sharedTokens Shared token object that stores common values for the theme.
  * @return The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: ReturnType<NewComponentTypes['DataPermissionLevels']>,
-  _params: DataPermissionLevelsProps,
-  _sharedTokens: SharedTokens
+  componentTheme: ReturnType<NewComponentTypes['DataPermissionLevels']>
 ): DataPermissionLevelsStyle => {
   return {
     dataPermissionLevels: {
diff --git a/packages/ui-instructure/src/NutritionFacts/v2/props.ts b/packages/ui-instructure/src/NutritionFacts/v2/props.ts
index cd71f93734..51d5411712 100644
--- a/packages/ui-instructure/src/NutritionFacts/v2/props.ts
+++ b/packages/ui-instructure/src/NutritionFacts/v2/props.ts
@@ -22,8 +22,9 @@
  * SOFTWARE.
  */
 
-import type { ComponentStyle, ThemeOverrideValue } from '@instructure/emotion'
+import type { ComponentStyle, NewThemeOverrideProp } from '@instructure/emotion'
 import type { OtherHTMLAttributes } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type BlockType = {
   blockTitle: string
@@ -74,9 +75,9 @@ type PropKeys = keyof NutritionFactsOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type NutritionFactsProps = NutritionFactsOwnProps & {
-  themeOverride?: ThemeOverrideValue
-} & OtherHTMLAttributes<NutritionFactsOwnProps>
+type NutritionFactsProps = NutritionFactsOwnProps &
+  NewThemeOverrideProp<ReturnType<NewComponentTypes['NutritionFacts']>> &
+  OtherHTMLAttributes<NutritionFactsOwnProps>
 
 type NutritionFactsStyle = ComponentStyle<
   | 'segmentCard'
diff --git a/packages/ui-instructure/src/NutritionFacts/v2/styles.ts b/packages/ui-instructure/src/NutritionFacts/v2/styles.ts
index 43f9635083..7b0f0abfd7 100644
--- a/packages/ui-instructure/src/NutritionFacts/v2/styles.ts
+++ b/packages/ui-instructure/src/NutritionFacts/v2/styles.ts
@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
-import type { NutritionFactsProps, NutritionFactsStyle } from './props'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { NutritionFactsStyle } from './props'
 
 /**
  * ---
@@ -31,14 +31,10 @@ import type { NutritionFactsProps, NutritionFactsStyle } from './props'
  * ---
  * Generates the style object from the theme and provided additional information
  * @param componentTheme The theme variable object.
- * @param params Additional parameters to customize the style.
- * @param sharedTokens Shared token object that stores common values for the theme.
  * @return The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: ReturnType<NewComponentTypes['NutritionFacts']>,
-  _params: NutritionFactsProps,
-  _sharedTokens: SharedTokens
+  componentTheme: ReturnType<NewComponentTypes['NutritionFacts']>
 ): NutritionFactsStyle => {
   return {
     segmentCard: {
diff --git a/packages/ui-link/package.json b/packages/ui-link/package.json
index 1ff9d679c9..8dbe3eaa91 100644
--- a/packages/ui-link/package.json
+++ b/packages/ui-link/package.json
@@ -32,13 +32,13 @@
     "@instructure/ui-dom-utils": "workspace:*",
     "@instructure/ui-icons": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/ui-view": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-link/src/Link/v2/props.ts b/packages/ui-link/src/Link/v2/props.ts
index feec4b6a22..c7598754da 100644
--- a/packages/ui-link/src/Link/v2/props.ts
+++ b/packages/ui-link/src/Link/v2/props.ts
@@ -26,7 +26,6 @@ import React from 'react'
 import type {
   ToProp,
   AsElementType,
-  LinkTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type {
@@ -34,6 +33,7 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { ViewOwnProps } from '@instructure/ui-view/latest'
 import { Renderable } from '@instructure/shared-types'
 
@@ -154,7 +154,7 @@ type LinkState = {
 }
 
 type LinkProps = LinkOwnProps &
-  WithStyleProps<LinkTheme, LinkStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Link']>, LinkStyle> &
   OtherHTMLAttributes<LinkOwnProps> &
   ToProp
 
diff --git a/packages/ui-list/package.json b/packages/ui-list/package.json
index d67dcf5953..1dd54c16de 100644
--- a/packages/ui-list/package.json
+++ b/packages/ui-list/package.json
@@ -28,13 +28,13 @@
     "@instructure/emotion": "workspace:*",
     "@instructure/shared-types": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-view": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
diff --git a/packages/ui-list/src/InlineList/v2/InlineListItem/props.ts b/packages/ui-list/src/InlineList/v2/InlineListItem/props.ts
index 6dbf9b4153..7109b7bc73 100644
--- a/packages/ui-list/src/InlineList/v2/InlineListItem/props.ts
+++ b/packages/ui-list/src/InlineList/v2/InlineListItem/props.ts
@@ -29,10 +29,8 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
-import type {
-  InlineListItemTheme,
-  OtherHTMLAttributes
-} from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 
 type InlineListItemOwnProps = {
   /**
@@ -80,7 +78,10 @@ type PropKeys = keyof InlineListItemOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type InlineListItemProps = InlineListItemOwnProps &
-  WithStyleProps<InlineListItemTheme, InlineListItemStyle> &
+  WithStyleProps<
+    ReturnType<NewComponentTypes['InlineListItem']>,
+    InlineListItemStyle
+  > &
   OtherHTMLAttributes<InlineListItemOwnProps>
 
 type InlineListItemStyle = ComponentStyle<'inlineListItem' | 'delimiter'>
diff --git a/packages/ui-list/src/List/v2/ListItem/props.ts b/packages/ui-list/src/List/v2/ListItem/props.ts
index 4875e44bb3..4d05833e4f 100644
--- a/packages/ui-list/src/List/v2/ListItem/props.ts
+++ b/packages/ui-list/src/List/v2/ListItem/props.ts
@@ -29,10 +29,8 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
-import type {
-  ListItemTheme,
-  OtherHTMLAttributes
-} from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 
 type ListItemOwnProps = {
   /**
@@ -76,7 +74,7 @@ type PropKeys = keyof ListItemOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type ListItemProps = ListItemOwnProps &
-  WithStyleProps<ListItemTheme, ListItemStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['ListItem']>, ListItemStyle> &
   OtherHTMLAttributes<ListItemOwnProps>
 
 type ListItemStyle = ComponentStyle<'listItem'>
diff --git a/packages/ui-list/src/List/v2/props.ts b/packages/ui-list/src/List/v2/props.ts
index 8f057c7b87..2b46b58abb 100644
--- a/packages/ui-list/src/List/v2/props.ts
+++ b/packages/ui-list/src/List/v2/props.ts
@@ -29,7 +29,8 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
-import type { ListTheme, OtherHTMLAttributes } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 
 type ListOwnProps = {
   /**
@@ -76,7 +77,7 @@ type PropKeys = keyof ListOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type ListProps = ListOwnProps &
-  WithStyleProps<ListTheme, ListStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['List']>, ListStyle> &
   OtherHTMLAttributes<ListOwnProps>
 
 type ListStyle = ComponentStyle<'list'>
diff --git a/packages/ui-menu/package.json b/packages/ui-menu/package.json
index fa65411887..e32de6cd92 100644
--- a/packages/ui-menu/package.json
+++ b/packages/ui-menu/package.json
@@ -33,6 +33,7 @@
     "@instructure/ui-popover": "workspace:*",
     "@instructure/ui-position": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/ui-view": "workspace:*",
     "keycode": "^2"
@@ -41,7 +42,6 @@
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-menu/src/Menu/v2/MenuItem/props.ts b/packages/ui-menu/src/Menu/v2/MenuItem/props.ts
index 61feb18c6a..e3d8a250b8 100644
--- a/packages/ui-menu/src/Menu/v2/MenuItem/props.ts
+++ b/packages/ui-menu/src/Menu/v2/MenuItem/props.ts
@@ -27,10 +27,10 @@ import MenuItem from '../MenuItem'
 
 import type {
   AsElementType,
-  MenuItemTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
 type OnMenuItemSelect = (
@@ -100,7 +100,7 @@ type PropKeys = keyof MenuItemOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type MenuItemProps = MenuItemOwnProps &
-  WithStyleProps<MenuItemTheme, MenuItemStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['MenuItem']>, MenuItemStyle> &
   OtherHTMLAttributes<MenuItemOwnProps> &
   WithDeterministicIdProps
 
diff --git a/packages/ui-menu/src/Menu/v2/MenuItemGroup/props.ts b/packages/ui-menu/src/Menu/v2/MenuItemGroup/props.ts
index 8e473de873..9d17035f07 100644
--- a/packages/ui-menu/src/Menu/v2/MenuItemGroup/props.ts
+++ b/packages/ui-menu/src/Menu/v2/MenuItemGroup/props.ts
@@ -26,11 +26,9 @@ import React from 'react'
 
 import { MenuItem } from '../MenuItem'
 
-import type {
-  MenuGroupTheme,
-  OtherHTMLAttributes
-} from '@instructure/shared-types'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { MenuItemProps } from '../MenuItem/props'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
@@ -79,7 +77,7 @@ type PropKeys = keyof MenuGroupOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type MenuGroupProps = MenuGroupOwnProps &
-  WithStyleProps<MenuGroupTheme, MenuGroupStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['MenuGroup']>, MenuGroupStyle> &
   OtherHTMLAttributes<MenuGroupOwnProps> &
   WithDeterministicIdProps
 
diff --git a/packages/ui-menu/src/Menu/v2/MenuItemSeparator/props.ts b/packages/ui-menu/src/Menu/v2/MenuItemSeparator/props.ts
index 66b3ec3f1b..7939d0148f 100644
--- a/packages/ui-menu/src/Menu/v2/MenuItemSeparator/props.ts
+++ b/packages/ui-menu/src/Menu/v2/MenuItemSeparator/props.ts
@@ -23,10 +23,8 @@
  */
 
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import type {
-  MenuSeparatorTheme,
-  OtherHTMLAttributes
-} from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 
 // keeping here to keep the structure of props.ts
 // eslint-disable-next-line
@@ -37,7 +35,10 @@ type PropKeys = keyof MenuSeparatorOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type MenuSeparatorProps = MenuSeparatorOwnProps &
-  WithStyleProps<MenuSeparatorTheme, MenuSeparatorStyle> &
+  WithStyleProps<
+    ReturnType<NewComponentTypes['MenuSeparator']>,
+    MenuSeparatorStyle
+  > &
   OtherHTMLAttributes<MenuSeparatorOwnProps>
 
 type MenuSeparatorStyle = ComponentStyle<'menuItemSeparator'>
diff --git a/packages/ui-menu/src/Menu/v2/props.ts b/packages/ui-menu/src/Menu/v2/props.ts
index 38d145d814..67be9e8ed6 100644
--- a/packages/ui-menu/src/Menu/v2/props.ts
+++ b/packages/ui-menu/src/Menu/v2/props.ts
@@ -24,8 +24,9 @@
 
 import React from 'react'
 
-import type { MenuTheme, OtherHTMLAttributes } from '@instructure/shared-types'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type {
   PlacementPropValues,
   PositionConstraint,
@@ -171,7 +172,7 @@ type PropKeys = keyof MenuOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type MenuProps = MenuOwnProps &
-  WithStyleProps<MenuTheme, MenuStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Menu']>, MenuStyle> &
   // controls can be passed in renderChildren and used later as aria-controls
   Omit<OtherHTMLAttributes<MenuOwnProps>, 'controls'> & {
     controls?: React.AriaAttributes['aria-controls']
diff --git a/packages/ui-metric/package.json b/packages/ui-metric/package.json
index e70307c7b2..2a88f8a24d 100644
--- a/packages/ui-metric/package.json
+++ b/packages/ui-metric/package.json
@@ -27,13 +27,13 @@
     "@instructure/console": "workspace:*",
     "@instructure/emotion": "workspace:*",
     "@instructure/shared-types": "workspace:*",
-    "@instructure/ui-react-utils": "workspace:*"
+    "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
diff --git a/packages/ui-metric/src/Metric/v2/props.ts b/packages/ui-metric/src/Metric/v2/props.ts
index d8c6b32d41..4d73980fa6 100644
--- a/packages/ui-metric/src/Metric/v2/props.ts
+++ b/packages/ui-metric/src/Metric/v2/props.ts
@@ -22,13 +22,9 @@
  * SOFTWARE.
  */
 
-import type {
-  MetricTheme,
-  OtherHTMLAttributes,
-  Renderable
-} from '@instructure/shared-types'
-import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import { ThemeOverrideValue } from '@instructure/emotion'
+import type { OtherHTMLAttributes, Renderable } from '@instructure/shared-types'
+import type { ComponentStyle, NewThemeOverrideProp } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type MetricOwnProps = {
   textAlign?: 'start' | 'center' | 'end'
@@ -46,10 +42,8 @@ type PropKeys = keyof MetricOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type MetricProps = MetricOwnProps &
-  WithStyleProps<MetricTheme, MetricStyle> &
-  OtherHTMLAttributes<MetricOwnProps> & {
-    themeOverride?: ThemeOverrideValue
-  }
+  OtherHTMLAttributes<MetricOwnProps> &
+  NewThemeOverrideProp<ReturnType<NewComponentTypes['Metric']>>
 
 type MetricStyle = ComponentStyle<'metric' | 'label' | 'value'>
 const allowedProps: AllowedPropKeys = [
diff --git a/packages/ui-modal/package.json b/packages/ui-modal/package.json
index 80e5d1851e..ad2244d728 100644
--- a/packages/ui-modal/package.json
+++ b/packages/ui-modal/package.json
@@ -34,6 +34,7 @@
     "@instructure/ui-overlays": "workspace:*",
     "@instructure/ui-portal": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/ui-view": "workspace:*"
   },
@@ -41,7 +42,6 @@
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
     "@instructure/ui-position": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-modal/src/Modal/v2/ModalBody/props.ts b/packages/ui-modal/src/Modal/v2/ModalBody/props.ts
index cab7d37854..25a344d0fc 100644
--- a/packages/ui-modal/src/Modal/v2/ModalBody/props.ts
+++ b/packages/ui-modal/src/Modal/v2/ModalBody/props.ts
@@ -28,9 +28,9 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type {
   AsElementType,
-  ModalBodyTheme,
   OtherHTMLAttributes,
   UIElement
 } from '@instructure/shared-types'
@@ -50,7 +50,7 @@ type PropKeys = keyof ModalBodyOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type ModalBodyProps = ModalBodyOwnProps &
-  WithStyleProps<ModalBodyTheme, ModalBodyStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['ModalBody']>, ModalBodyStyle> &
   OtherHTMLAttributes<ModalBodyOwnProps>
 
 type ModalBodyStyle = ComponentStyle<'modalBody'>
diff --git a/packages/ui-modal/src/Modal/v2/ModalFooter/props.ts b/packages/ui-modal/src/Modal/v2/ModalFooter/props.ts
index 585051a3f9..011718441b 100644
--- a/packages/ui-modal/src/Modal/v2/ModalFooter/props.ts
+++ b/packages/ui-modal/src/Modal/v2/ModalFooter/props.ts
@@ -23,11 +23,9 @@
  */
 
 import React from 'react'
-import type {
-  ModalFooterTheme,
-  OtherHTMLAttributes
-} from '@instructure/shared-types'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type ModalFooterOwnProps = {
   children?: React.ReactNode
@@ -40,7 +38,10 @@ type PropKeys = keyof ModalFooterOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type ModalFooterProps = ModalFooterOwnProps &
-  WithStyleProps<ModalFooterTheme, ModalFooterStyle> &
+  WithStyleProps<
+    ReturnType<NewComponentTypes['ModalFooter']>,
+    ModalFooterStyle
+  > &
   OtherHTMLAttributes<ModalFooterOwnProps>
 
 type ModalFooterStyle = ComponentStyle<'modalFooter'>
diff --git a/packages/ui-modal/src/Modal/v2/ModalHeader/props.ts b/packages/ui-modal/src/Modal/v2/ModalHeader/props.ts
index 7e75fafd86..0af11ea8b3 100644
--- a/packages/ui-modal/src/Modal/v2/ModalHeader/props.ts
+++ b/packages/ui-modal/src/Modal/v2/ModalHeader/props.ts
@@ -23,11 +23,9 @@
  */
 
 import React from 'react'
-import type {
-  ModalHeaderTheme,
-  OtherHTMLAttributes
-} from '@instructure/shared-types'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type ModalHeaderOwnProps = {
   children?: React.ReactNode
@@ -44,7 +42,10 @@ type PropKeys = keyof ModalHeaderOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type ModalHeaderProps = ModalHeaderOwnProps &
-  WithStyleProps<ModalHeaderTheme, ModalHeaderStyle> &
+  WithStyleProps<
+    ReturnType<NewComponentTypes['ModalHeader']>,
+    ModalHeaderStyle
+  > &
   OtherHTMLAttributes<ModalHeaderOwnProps>
 
 type ModalHeaderStyle = ComponentStyle<'modalHeader'>
diff --git a/packages/ui-modal/src/Modal/v2/props.ts b/packages/ui-modal/src/Modal/v2/props.ts
index 6da48bdf20..78e795f10f 100644
--- a/packages/ui-modal/src/Modal/v2/props.ts
+++ b/packages/ui-modal/src/Modal/v2/props.ts
@@ -27,7 +27,6 @@ import { Dialog } from '@instructure/ui-dialog'
 
 import type {
   AsElementType,
-  ModalTheme,
   OtherHTMLAttributes,
   LiveRegion,
   UIElement
@@ -35,6 +34,7 @@ import type {
 import type { PositionMountNode } from '@instructure/ui-position'
 import type { TransitionType } from '@instructure/ui-motion'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type ModalPropsForPortal = {
   /**
@@ -180,7 +180,7 @@ type PropKeys = keyof ModalOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type ModalProps = ModalOwnProps &
-  WithStyleProps<ModalTheme, ModalStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Modal']>, ModalStyle> &
   OtherHTMLAttributes<ModalOwnProps>
 
 type ModalStyle = ComponentStyle<
diff --git a/packages/ui-motion/package.json b/packages/ui-motion/package.json
index 15842f7eb4..31408bee73 100644
--- a/packages/ui-motion/package.json
+++ b/packages/ui-motion/package.json
@@ -28,11 +28,11 @@
     "@instructure/shared-types": "workspace:*",
     "@instructure/ui-dom-utils": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-babel-preset": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
diff --git a/packages/ui-navigation/package.json b/packages/ui-navigation/package.json
index caa34295a2..3b9b7c2c52 100644
--- a/packages/ui-navigation/package.json
+++ b/packages/ui-navigation/package.json
@@ -36,6 +36,7 @@
     "@instructure/ui-icons": "workspace:*",
     "@instructure/ui-menu": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-tooltip": "workspace:*",
     "@instructure/ui-truncate-list": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
@@ -46,7 +47,6 @@
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
     "@instructure/ui-scripts": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-navigation/src/AppNav/v2/Item/props.ts b/packages/ui-navigation/src/AppNav/v2/Item/props.ts
index e65974acc8..06667b8cf1 100644
--- a/packages/ui-navigation/src/AppNav/v2/Item/props.ts
+++ b/packages/ui-navigation/src/AppNav/v2/Item/props.ts
@@ -24,10 +24,10 @@
 
 import type {
   AsElementType,
-  AppNavItemTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { Cursor } from '@instructure/shared-types'
 import React from 'react'
 import { Renderable } from '@instructure/shared-types'
@@ -82,7 +82,7 @@ type PropKeys = keyof AppNavItemOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type AppNavItemProps = AppNavItemOwnProps &
-  WithStyleProps<AppNavItemTheme, AppNavItemStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['AppNavItem']>, AppNavItemStyle> &
   OtherHTMLAttributes<AppNavItemOwnProps>
 
 type AppNavItemStyle = ComponentStyle<'item' | 'label'>
diff --git a/packages/ui-navigation/src/AppNav/v2/props.ts b/packages/ui-navigation/src/AppNav/v2/props.ts
index 14a1a70e35..56aa43669d 100644
--- a/packages/ui-navigation/src/AppNav/v2/props.ts
+++ b/packages/ui-navigation/src/AppNav/v2/props.ts
@@ -28,10 +28,8 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
-import type {
-  AppNavTheme,
-  OtherHTMLAttributes
-} from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import { Renderable } from '@instructure/shared-types'
 
 type AppNavOwnProps = {
@@ -89,7 +87,7 @@ type PropKeys = keyof AppNavOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type AppNavProps = AppNavOwnProps &
-  WithStyleProps<AppNavTheme, AppNavStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['AppNav']>, AppNavStyle> &
   OtherHTMLAttributes<AppNavOwnProps>
 
 type AppNavStyle = ComponentStyle<'appNav' | 'alignCenter' | 'list'> & {
diff --git a/packages/ui-number-input/package.json b/packages/ui-number-input/package.json
index 08396a5465..d1996ac2b3 100644
--- a/packages/ui-number-input/package.json
+++ b/packages/ui-number-input/package.json
@@ -30,6 +30,7 @@
     "@instructure/ui-form-field": "workspace:*",
     "@instructure/ui-icons": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/uid": "workspace:*",
     "keycode": "^2"
@@ -37,7 +38,6 @@
   "devDependencies": {
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-scripts": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-number-input/src/NumberInput/v2/props.ts b/packages/ui-number-input/src/NumberInput/v2/props.ts
index 3a86498d0c..03b984fc19 100644
--- a/packages/ui-number-input/src/NumberInput/v2/props.ts
+++ b/packages/ui-number-input/src/NumberInput/v2/props.ts
@@ -31,8 +31,8 @@ import type {
 } from '@instructure/shared-types'
 import type {
   ComponentStyle,
-  Spacing,
-  ThemeOverrideValue
+  NewThemeOverrideProp,
+  Spacing
 } from '@instructure/emotion'
 import type {
   FormFieldOwnProps,
@@ -43,6 +43,7 @@ import type {
   WithDeterministicIdProps
 } from '@instructure/ui-react-utils'
 import { Renderable } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type NumberInputOwnProps = {
   /**
@@ -194,9 +195,9 @@ type NumberInputProps =
     FormFieldOwnProps,
     'label' | 'inline' | 'id' | 'elementRef'
   > &
-    NumberInputOwnProps & {
-      themeOverride?: ThemeOverrideValue
-    } & OtherHTMLAttributes<
+    NumberInputOwnProps &
+    NewThemeOverrideProp<ReturnType<NewComponentTypes['TextInput']>> &
+    OtherHTMLAttributes<
       NumberInputOwnProps,
       InputHTMLAttributes<NumberInputOwnProps & Element>
     > &
diff --git a/packages/ui-options/package.json b/packages/ui-options/package.json
index 33fa1eefd5..690cabe799 100644
--- a/packages/ui-options/package.json
+++ b/packages/ui-options/package.json
@@ -28,6 +28,7 @@
     "@instructure/shared-types": "workspace:*",
     "@instructure/ui-icons": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/ui-view": "workspace:*"
   },
@@ -35,7 +36,6 @@
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-options/src/Options/v2/Item/props.ts b/packages/ui-options/src/Options/v2/Item/props.ts
index dff1683997..85946099d7 100644
--- a/packages/ui-options/src/Options/v2/Item/props.ts
+++ b/packages/ui-options/src/Options/v2/Item/props.ts
@@ -24,12 +24,12 @@
 
 import type {
   AsElementType,
-  OptionsItemTheme,
   OtherHTMLAttributes,
   Renderable
 } from '@instructure/shared-types'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type OptionsItemRenderProps = {
   children?: Renderable
@@ -103,7 +103,10 @@ type PropKeys = keyof OptionsItemOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type OptionsItemProps = OptionsItemOwnProps &
-  WithStyleProps<OptionsItemTheme, OptionsItemStyle> &
+  WithStyleProps<
+    ReturnType<NewComponentTypes['OptionsItem']>,
+    OptionsItemStyle
+  > &
   WithDeterministicIdProps &
   OtherHTMLAttributes<OptionsItemOwnProps>
 
diff --git a/packages/ui-options/src/Options/v2/Separator/props.ts b/packages/ui-options/src/Options/v2/Separator/props.ts
index 97e45723d5..3d0846e0d2 100644
--- a/packages/ui-options/src/Options/v2/Separator/props.ts
+++ b/packages/ui-options/src/Options/v2/Separator/props.ts
@@ -24,10 +24,10 @@
 
 import type {
   AsElementType,
-  OptionsSeparatorTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import { AllHTMLAttributes } from 'react'
 
 type OptionsSeparatorOwnProps = {
@@ -42,7 +42,10 @@ type PropKeys = keyof OptionsSeparatorOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type OptionsSeparatorProps = OptionsSeparatorOwnProps &
-  WithStyleProps<OptionsSeparatorTheme, OptionsSeparatorStyle> &
+  WithStyleProps<
+    ReturnType<NewComponentTypes['OptionsSeparator']>,
+    OptionsSeparatorStyle
+  > &
   OtherHTMLAttributes<OptionsSeparatorOwnProps, AllHTMLAttributes<any>>
 
 type OptionsSeparatorStyle = ComponentStyle<'separator'>
diff --git a/packages/ui-options/src/Options/v2/props.ts b/packages/ui-options/src/Options/v2/props.ts
index 64f85b1fff..43edcf7be7 100644
--- a/packages/ui-options/src/Options/v2/props.ts
+++ b/packages/ui-options/src/Options/v2/props.ts
@@ -24,10 +24,10 @@
 import React from 'react'
 import type {
   AsElementType,
-  OptionsTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 import { Renderable } from '@instructure/shared-types'
 
@@ -59,7 +59,7 @@ type PropKeys = keyof OptionsOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type OptionsProps = OptionsOwnProps &
-  WithStyleProps<OptionsTheme, OptionsStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Options']>, OptionsStyle> &
   OtherHTMLAttributes<OptionsOwnProps> &
   WithDeterministicIdProps
 
diff --git a/packages/ui-overlays/package.json b/packages/ui-overlays/package.json
index 1d6fc42a45..e76abfb85f 100644
--- a/packages/ui-overlays/package.json
+++ b/packages/ui-overlays/package.json
@@ -37,6 +37,7 @@
     "@instructure/ui-portal": "workspace:*",
     "@instructure/ui-position": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-tooltip": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/ui-view": "workspace:*",
@@ -45,7 +46,6 @@
   },
   "devDependencies": {
     "@instructure/ui-babel-preset": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-overlays/src/Mask/v2/props.ts b/packages/ui-overlays/src/Mask/v2/props.ts
index e4830fccca..e06e9d3058 100644
--- a/packages/ui-overlays/src/Mask/v2/props.ts
+++ b/packages/ui-overlays/src/Mask/v2/props.ts
@@ -23,8 +23,9 @@
  */
 
 import React from 'react'
-import type { MaskTheme, OtherHTMLAttributes } from '@instructure/shared-types'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type MaskOwnProps = {
   children?: React.ReactNode
@@ -42,7 +43,7 @@ type PropKeys = keyof MaskOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type MaskProps = MaskOwnProps &
-  WithStyleProps<MaskTheme, MaskStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Mask']>, MaskStyle> &
   OtherHTMLAttributes<MaskOwnProps>
 
 type MaskStyle = ComponentStyle<'mask'>
diff --git a/packages/ui-pages/package.json b/packages/ui-pages/package.json
index 39c3648afd..71429709a4 100644
--- a/packages/ui-pages/package.json
+++ b/packages/ui-pages/package.json
@@ -29,13 +29,13 @@
     "@instructure/shared-types": "workspace:*",
     "@instructure/ui-dom-utils": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/ui-view": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-pagination/src/Pagination/v2/PaginationPageInput/props.ts b/packages/ui-pagination/src/Pagination/v2/PaginationPageInput/props.ts
index 898e7f1872..0b0b8ee9dc 100644
--- a/packages/ui-pagination/src/Pagination/v2/PaginationPageInput/props.ts
+++ b/packages/ui-pagination/src/Pagination/v2/PaginationPageInput/props.ts
@@ -23,7 +23,7 @@
  */
 
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import type { PaginationPageInputTheme } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import React from 'react'
 type PaginationPageInputOwnProps = {
   /**
@@ -67,7 +67,10 @@ type PropKeys = keyof PaginationPageInputOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type PaginationPageInputProps = PaginationPageInputOwnProps &
-  WithStyleProps<PaginationPageInputTheme, PaginationPageInputStyle>
+  WithStyleProps<
+    ReturnType<NewComponentTypes['PaginationPageInput']>,
+    PaginationPageInputStyle
+  >
 
 type PaginationPageInputStyle = ComponentStyle<
   'paginationPageInput' | 'numberInput' | 'inputLabel'
diff --git a/packages/ui-pagination/src/Pagination/v2/props.ts b/packages/ui-pagination/src/Pagination/v2/props.ts
index 48303a0bd8..b10661d5e0 100644
--- a/packages/ui-pagination/src/Pagination/v2/props.ts
+++ b/packages/ui-pagination/src/Pagination/v2/props.ts
@@ -34,6 +34,7 @@ import type {
 } from '@instructure/shared-types'
 import type { PaginationPageProps } from './PaginationButton/props'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 type ChildPage = React.ReactElement<PaginationPageProps>
 
 type PaginationOwnProps = {
@@ -200,7 +201,7 @@ type PropKeys = keyof PaginationOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type PaginationProps = PaginationOwnProps &
-  WithStyleProps<null, PaginationStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Pagination']>, PaginationStyle> &
   OtherHTMLAttributes<PaginationOwnProps> &
   WithDeterministicIdProps
 
diff --git a/packages/ui-pagination/src/Pagination/v2/styles.ts b/packages/ui-pagination/src/Pagination/v2/styles.ts
index 2ded13faf9..2a383a6225 100644
--- a/packages/ui-pagination/src/Pagination/v2/styles.ts
+++ b/packages/ui-pagination/src/Pagination/v2/styles.ts
@@ -31,9 +31,6 @@ import type { PaginationStyle } from './props'
  * ---
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} sharedTokens Shared token object that stores common values for the theme.
- * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
diff --git a/packages/ui-pill/src/Pill/v2/props.ts b/packages/ui-pill/src/Pill/v2/props.ts
index a8a6776c98..caa9f4eeea 100644
--- a/packages/ui-pill/src/Pill/v2/props.ts
+++ b/packages/ui-pill/src/Pill/v2/props.ts
@@ -27,9 +27,9 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type {
   AsElementType,
-  PillTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 
@@ -63,7 +63,7 @@ type PropKeys = keyof PillOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type PillProps = PillOwnProps &
-  WithStyleProps<PillTheme, PillStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Pill']>, PillStyle> &
   OtherHTMLAttributes<PillOwnProps>
 
 type PillStyle = ComponentStyle<
diff --git a/packages/ui-popover/package.json b/packages/ui-popover/package.json
index a675d64000..fa18a780bd 100644
--- a/packages/ui-popover/package.json
+++ b/packages/ui-popover/package.json
@@ -33,6 +33,7 @@
     "@instructure/ui-i18n": "workspace:*",
     "@instructure/ui-position": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/ui-view": "workspace:*",
     "@instructure/uid": "workspace:*",
@@ -42,7 +43,6 @@
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-popover/src/Popover/v2/props.ts b/packages/ui-popover/src/Popover/v2/props.ts
index ee3642dc74..842e184d5a 100644
--- a/packages/ui-popover/src/Popover/v2/props.ts
+++ b/packages/ui-popover/src/Popover/v2/props.ts
@@ -23,6 +23,7 @@
  */
 import React from 'react'
 import { BorderWidth } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 import type { Shadow, Stacking, WithStyleProps } from '@instructure/emotion'
 
@@ -36,8 +37,7 @@ import type { TextDirectionContextConsumerProps } from '@instructure/ui-i18n'
 import type {
   LiveRegion,
   UIElement,
-  Renderable,
-  PopoverTheme
+  Renderable
 } from '@instructure/shared-types'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
@@ -289,7 +289,7 @@ type PopoverOwnProps = {
 type PopoverProps = PopoverOwnProps &
   TextDirectionContextConsumerProps &
   WithDeterministicIdProps &
-  WithStyleProps<PopoverTheme, PopoverStyle>
+  WithStyleProps<ReturnType<NewComponentTypes['Popover']>, PopoverStyle>
 
 type PopoverState = {
   placement: PopoverOwnProps['placement']
diff --git a/packages/ui-position/package.json b/packages/ui-position/package.json
index 50fb915659..29a093f785 100644
--- a/packages/ui-position/package.json
+++ b/packages/ui-position/package.json
@@ -30,13 +30,13 @@
     "@instructure/ui-dom-utils": "workspace:*",
     "@instructure/ui-portal": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/uid": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
diff --git a/packages/ui-progress/package.json b/packages/ui-progress/package.json
index 96b933ef0e..9e58243412 100644
--- a/packages/ui-progress/package.json
+++ b/packages/ui-progress/package.json
@@ -30,12 +30,12 @@
     "@instructure/ui-a11y-content": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-view": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
diff --git a/packages/ui-progress/src/ProgressBar/v2/props.ts b/packages/ui-progress/src/ProgressBar/v2/props.ts
index 587d435032..5435e01a47 100644
--- a/packages/ui-progress/src/ProgressBar/v2/props.ts
+++ b/packages/ui-progress/src/ProgressBar/v2/props.ts
@@ -27,9 +27,9 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type {
   AsElementType,
-  ProgressBarTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import { Renderable } from '@instructure/shared-types'
@@ -125,7 +125,10 @@ type PropKeys = keyof ProgressBarOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type ProgressBarProps = ProgressBarOwnProps &
-  WithStyleProps<ProgressBarTheme, ProgressBarStyle> &
+  WithStyleProps<
+    ReturnType<NewComponentTypes['ProgressBar']>,
+    ProgressBarStyle
+  > &
   OtherHTMLAttributes<ProgressBarOwnProps>
 
 type ProgressBarStyle = ComponentStyle<
diff --git a/packages/ui-progress/src/ProgressCircle/v2/props.ts b/packages/ui-progress/src/ProgressCircle/v2/props.ts
index b9247a4833..a4df44aa93 100644
--- a/packages/ui-progress/src/ProgressCircle/v2/props.ts
+++ b/packages/ui-progress/src/ProgressCircle/v2/props.ts
@@ -27,9 +27,9 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type {
   AsElementType,
-  ProgressCircleTheme,
   OtherHTMLAttributes,
   Renderable
 } from '@instructure/shared-types'
@@ -108,7 +108,10 @@ type PropKeys = keyof ProgressCircleOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type ProgressCircleProps = ProgressCircleOwnProps &
-  WithStyleProps<ProgressCircleTheme, ProgressCircleStyle> &
+  WithStyleProps<
+    ReturnType<NewComponentTypes['ProgressCircle']>,
+    ProgressCircleStyle
+  > &
   OtherHTMLAttributes<ProgressCircleOwnProps>
 
 type ProgressCircleStyle = ComponentStyle<
diff --git a/packages/ui-radio-input/package.json b/packages/ui-radio-input/package.json
index 9213ed82a2..902509dcde 100644
--- a/packages/ui-radio-input/package.json
+++ b/packages/ui-radio-input/package.json
@@ -29,13 +29,13 @@
     "@instructure/ui-a11y-utils": "workspace:*",
     "@instructure/ui-dom-utils": "workspace:*",
     "@instructure/ui-form-field": "workspace:*",
-    "@instructure/ui-react-utils": "workspace:*"
+    "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-radio-input/src/RadioInput/v2/props.ts b/packages/ui-radio-input/src/RadioInput/v2/props.ts
index e2baf815cb..37ded5a9f8 100644
--- a/packages/ui-radio-input/src/RadioInput/v2/props.ts
+++ b/packages/ui-radio-input/src/RadioInput/v2/props.ts
@@ -25,8 +25,9 @@
 import React from 'react'
 import type { InputHTMLAttributes } from 'react'
 import type { OtherHTMLAttributes } from '@instructure/shared-types'
-import type { ComponentStyle, ThemeOverrideValue } from '@instructure/emotion'
+import type { ComponentStyle, NewThemeOverrideProp } from '@instructure/emotion'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type RadioInputOwnProps = {
   /**
@@ -92,9 +93,9 @@ type PropKeys = keyof RadioInputOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type RadioInputProps = RadioInputOwnProps & {
-  themeOverride?: ThemeOverrideValue
-} & OtherHTMLAttributes<
+type RadioInputProps = RadioInputOwnProps &
+  NewThemeOverrideProp<ReturnType<NewComponentTypes['RadioInput']>> &
+  OtherHTMLAttributes<
     RadioInputOwnProps,
     InputHTMLAttributes<RadioInputOwnProps & Element>
   > &
diff --git a/packages/ui-range-input/package.json b/packages/ui-range-input/package.json
index 0c524c285d..ed62c65bf2 100644
--- a/packages/ui-range-input/package.json
+++ b/packages/ui-range-input/package.json
@@ -32,6 +32,7 @@
     "@instructure/ui-form-field": "workspace:*",
     "@instructure/ui-i18n": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/ui-view": "workspace:*",
     "@instructure/uid": "workspace:*"
@@ -39,7 +40,6 @@
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
diff --git a/packages/ui-range-input/src/RangeInput/v2/props.ts b/packages/ui-range-input/src/RangeInput/v2/props.ts
index f5a8c76486..1d8104491d 100644
--- a/packages/ui-range-input/src/RangeInput/v2/props.ts
+++ b/packages/ui-range-input/src/RangeInput/v2/props.ts
@@ -26,11 +26,14 @@ import React from 'react'
 
 import type {
   OtherHTMLAttributes,
-  RangeInputTheme,
   PickPropsWithExceptions
 } from '@instructure/shared-types'
-import type { FormFieldOwnProps, FormMessage } from '@instructure/ui-form-field/latest'
+import type {
+  FormFieldOwnProps,
+  FormMessage
+} from '@instructure/ui-form-field/latest'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { InputHTMLAttributes } from 'react'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
@@ -110,7 +113,10 @@ type RangeInputProps =
     'label' | 'inline' | 'id' | 'elementRef'
   > &
     RangeInputOwnProps &
-    WithStyleProps<RangeInputTheme, RangeInputStyle> &
+    WithStyleProps<
+      ReturnType<NewComponentTypes['RangeInput']>,
+      RangeInputStyle
+    > &
     OtherHTMLAttributes<
       RangeInputOwnProps,
       InputHTMLAttributes<RangeInputOwnProps & Element>
diff --git a/packages/ui-rating/package.json b/packages/ui-rating/package.json
index 9bfa2b889f..a7529f4169 100644
--- a/packages/ui-rating/package.json
+++ b/packages/ui-rating/package.json
@@ -32,12 +32,12 @@
     "@instructure/ui-icons": "workspace:*",
     "@instructure/ui-motion": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-view": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
diff --git a/packages/ui-rating/src/Rating/v2/styles.ts b/packages/ui-rating/src/Rating/v2/styles.ts
index b9c82c0423..ce460972f4 100644
--- a/packages/ui-rating/src/Rating/v2/styles.ts
+++ b/packages/ui-rating/src/Rating/v2/styles.ts
@@ -29,10 +29,7 @@ import type { RatingStyle } from './props'
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
- * @return {Object} The final style object, which will be used in the component
+ * @return The final style object, which will be used in the component
  */
 const generateStyle = (): RatingStyle => {
   return {
diff --git a/packages/ui-rating/src/RatingIcon/v2/props.ts b/packages/ui-rating/src/RatingIcon/v2/props.ts
index 6c3992c796..87ad168ef8 100644
--- a/packages/ui-rating/src/RatingIcon/v2/props.ts
+++ b/packages/ui-rating/src/RatingIcon/v2/props.ts
@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import type { RatingIconTheme } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type RatingIconOwnProps = {
   animationDelay?: number
@@ -41,7 +41,7 @@ type PropKeys = keyof RatingIconOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type RatingIconProps = RatingIconOwnProps &
-  WithStyleProps<RatingIconTheme, RatingIconStyle>
+  WithStyleProps<ReturnType<NewComponentTypes['RatingIcon']>, RatingIconStyle>
 
 type RatingIconStyle = ComponentStyle<'ratingIcon' | 'icon'>
 const allowedProps: AllowedPropKeys = [
diff --git a/packages/ui-select/package.json b/packages/ui-select/package.json
index de9e4d5cae..07d7eea10f 100644
--- a/packages/ui-select/package.json
+++ b/packages/ui-select/package.json
@@ -35,6 +35,7 @@
     "@instructure/ui-react-utils": "workspace:*",
     "@instructure/ui-selectable": "workspace:*",
     "@instructure/ui-text-input": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/ui-view": "workspace:*",
     "@instructure/uid": "workspace:*"
@@ -43,7 +44,6 @@
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
     "@instructure/ui-scripts": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-select/src/Select/v2/index.tsx b/packages/ui-select/src/Select/v2/index.tsx
index c6ab29fe7c..78785cfb20 100644
--- a/packages/ui-select/src/Select/v2/index.tsx
+++ b/packages/ui-select/src/Select/v2/index.tsx
@@ -112,18 +112,18 @@ const MemoedOption = memo(
   (prevProps, nextProps) => {
     return (
       prevProps.selectOption.props.isHighlighted ===
-      nextProps.selectOption.props.isHighlighted &&
+        nextProps.selectOption.props.isHighlighted &&
       prevProps.selectOption.props.isSelected ===
-      nextProps.selectOption.props.isSelected &&
+        nextProps.selectOption.props.isSelected &&
       prevProps.selectOption.props.isDisabled ===
-      nextProps.selectOption.props.isDisabled &&
+        nextProps.selectOption.props.isDisabled &&
       prevProps.selectOption.props.children ===
-      nextProps.selectOption.props.children &&
+        nextProps.selectOption.props.children &&
       prevProps.selectOption.props.id === nextProps.selectOption.props.id &&
       prevProps.selectOption.props.renderBeforeLabel ===
-      nextProps.selectOption.props.renderBeforeLabel &&
+        nextProps.selectOption.props.renderBeforeLabel &&
       prevProps.selectOption.props.renderAfterLabel ===
-      nextProps.selectOption.props.renderAfterLabel &&
+        nextProps.selectOption.props.renderAfterLabel &&
       prevProps.children === nextProps.children
     )
   }
@@ -334,59 +334,59 @@ class Select extends Component<SelectProps> {
 
     return this.interaction === 'enabled'
       ? {
-        onRequestShowOptions: (event) => {
-          onRequestShowOptions?.(event)
-          const selectedOptionId = this.selectedOptionId
+          onRequestShowOptions: (event) => {
+            onRequestShowOptions?.(event)
+            const selectedOptionId = this.selectedOptionId
 
-          if (selectedOptionId && !Array.isArray(selectedOptionId)) {
-            // highlight selected option on show
-            this.highlightOption(event, selectedOptionId)
-          }
-        },
-        onRequestHideOptions: (event) => {
-          onRequestHideOptions?.(event)
-        },
-        onRequestHighlightOption: (
-          event,
-          { id, direction }: { id?: string; direction?: number }
-        ) => {
-          if (!isShowingOptions) return
-
-          const highlightedOptionId = this.highlightedOptionId
-          // if id exists, use that
-          let highlightId = this._optionIds.indexOf(id!) > -1 ? id : undefined
-          if (!highlightId) {
-            if (!highlightedOptionId) {
-              // nothing highlighted yet, highlight first option
-              highlightId = this._optionIds[0]
-            } else {
-              // find next id based on direction
-              const index = this._optionIds.indexOf(highlightedOptionId)
-              highlightId =
-                index > -1 ? this._optionIds[index + direction!] : undefined
+            if (selectedOptionId && !Array.isArray(selectedOptionId)) {
+              // highlight selected option on show
+              this.highlightOption(event, selectedOptionId)
             }
-          }
-          if (highlightId) {
-            // only highlight if id exists as a valid option
-            this.highlightOption(event, highlightId)
-          }
-        },
-        onRequestHighlightFirstOption: (event) => {
-          this.highlightOption(event, this._optionIds[0])
-        },
-        onRequestHighlightLastOption: (event) => {
-          this.highlightOption(
+          },
+          onRequestHideOptions: (event) => {
+            onRequestHideOptions?.(event)
+          },
+          onRequestHighlightOption: (
             event,
-            this._optionIds[this._optionIds.length - 1]
-          )
-        },
-        onRequestSelectOption: (event, { id }) => {
-          if (id && this._optionIds.indexOf(id) !== -1) {
-            // only select if id exists as a valid option
-            onRequestSelectOption?.(event, { id })
+            { id, direction }: { id?: string; direction?: number }
+          ) => {
+            if (!isShowingOptions) return
+
+            const highlightedOptionId = this.highlightedOptionId
+            // if id exists, use that
+            let highlightId = this._optionIds.indexOf(id!) > -1 ? id : undefined
+            if (!highlightId) {
+              if (!highlightedOptionId) {
+                // nothing highlighted yet, highlight first option
+                highlightId = this._optionIds[0]
+              } else {
+                // find next id based on direction
+                const index = this._optionIds.indexOf(highlightedOptionId)
+                highlightId =
+                  index > -1 ? this._optionIds[index + direction!] : undefined
+              }
+            }
+            if (highlightId) {
+              // only highlight if id exists as a valid option
+              this.highlightOption(event, highlightId)
+            }
+          },
+          onRequestHighlightFirstOption: (event) => {
+            this.highlightOption(event, this._optionIds[0])
+          },
+          onRequestHighlightLastOption: (event) => {
+            this.highlightOption(
+              event,
+              this._optionIds[this._optionIds.length - 1]
+            )
+          },
+          onRequestSelectOption: (event, { id }) => {
+            if (id && this._optionIds.indexOf(id) !== -1) {
+              // only select if id exists as a valid option
+              onRequestSelectOption?.(event, { id })
+            }
           }
         }
-      }
       : {}
   }
 
@@ -413,12 +413,12 @@ class Select extends Component<SelectProps> {
       return typeof renderOptionLabel === 'function' &&
         !renderOptionLabel?.prototype?.isReactComponent
         ? (renderOptionLabel as any).bind(null, {
-          id,
-          isDisabled,
-          isSelected,
-          isHighlighted,
-          children
-        })
+            id,
+            isDisabled,
+            isSelected,
+            isHighlighted,
+            children
+          })
         : (renderOptionLabel as React.ReactNode)
     }
 
@@ -539,18 +539,18 @@ class Select extends Component<SelectProps> {
 
     const viewProps: Partial<ViewProps> = isShowingOptions
       ? {
-        display: 'block',
-        overflowY: 'auto',
-        maxHeight:
-          optionsMaxHeight ||
-          this._optionHeight * visibleOptionsCount! -
-          // in Chrome, we need to prevent scrolling when the bottom area of last item is hovered
-          (utils.isChromium() ? this.SCROLL_TOLERANCE : 0),
-        maxWidth: optionsMaxWidth || this.width,
-        background: 'primary',
-        elementRef: (node: Element | null) => (this._listView = node),
-        borderRadius: 'inherit'
-      }
+          display: 'block',
+          overflowY: 'auto',
+          maxHeight:
+            optionsMaxHeight ||
+            this._optionHeight * visibleOptionsCount! -
+              // in Chrome, we need to prevent scrolling when the bottom area of last item is hovered
+              (utils.isChromium() ? this.SCROLL_TOLERANCE : 0),
+          maxWidth: optionsMaxWidth || this.width,
+          background: 'primary',
+          elementRef: (node: Element | null) => (this._listView = node),
+          borderRadius: 'inherit'
+        }
       : { maxHeight: 0 }
 
     return (
@@ -560,30 +560,30 @@ class Select extends Component<SelectProps> {
         >
           {isShowingOptions
             ? Children.map(children as SelectChildren, (child, index) => {
-              if (!child || !matchComponentTypes(child, [Group, Option])) {
-                return // ignore invalid children
-              }
-              if (matchComponentTypes<OptionChild>(child, [Option])) {
-                lastWasGroup = false
-                return this.renderOption(child, {
-                  getOptionProps,
-                  getDisabledOptionProps
-                })
-              }
-              if (matchComponentTypes<GroupChild>(child, [Group])) {
-                const afterGroup = lastWasGroup
-                lastWasGroup = true
-                return this.renderGroup(child, {
-                  getOptionProps,
-                  getDisabledOptionProps,
-                  // for rendering separators appropriately
-                  isFirstChild: index === 0,
-                  isLastChild: index === Children.count(children) - 1,
-                  afterGroup
-                })
-              }
-              return
-            })
+                if (!child || !matchComponentTypes(child, [Group, Option])) {
+                  return // ignore invalid children
+                }
+                if (matchComponentTypes<OptionChild>(child, [Option])) {
+                  lastWasGroup = false
+                  return this.renderOption(child, {
+                    getOptionProps,
+                    getDisabledOptionProps
+                  })
+                }
+                if (matchComponentTypes<GroupChild>(child, [Group])) {
+                  const afterGroup = lastWasGroup
+                  lastWasGroup = true
+                  return this.renderGroup(child, {
+                    getOptionProps,
+                    getDisabledOptionProps,
+                    // for rendering separators appropriately
+                    isFirstChild: index === 0,
+                    isLastChild: index === Children.count(children) - 1,
+                    afterGroup
+                  })
+                }
+                return
+              })
             : null}
         </Options>
       </View>
@@ -622,8 +622,8 @@ class Select extends Component<SelectProps> {
             return position === 'before'
               ? option.props.renderBeforeLabel
               : option.props.renderAfterLabel
-                ? option.props.renderAfterLabel
-                : this.renderIcon()
+              ? option.props.renderAfterLabel
+              : this.renderIcon()
           }
         }
       } else {
@@ -632,8 +632,8 @@ class Select extends Component<SelectProps> {
           return position === 'before'
             ? child.props.renderBeforeLabel
             : child.props.renderAfterLabel
-              ? child.props.renderAfterLabel
-              : this.renderIcon()
+            ? child.props.renderAfterLabel
+            : this.renderIcon()
         }
       }
     }
@@ -730,26 +730,26 @@ class Select extends Component<SelectProps> {
     // popup buttons rather than comboboxes.
     const overrideProps: Partial<TextInputProps> = !isEditable
       ? {
-        // We need role="combobox" for the 'open list' button shortcut to work
-        // with desktop screenreaders.
-        // But desktop Safari with Voiceover does not support proper combobox
-        // handling, a 'button' role is set as a workaround.
-        // See https://bugs.webkit.org/show_bug.cgi?id=236881
-        // Also on iOS Chrome with role='combobox' it announces unnecessarily
-        // that its 'read-only' and that this is a 'textfield', see INSTUI-4500
-        role:
-          utils.isSafari() ||
+          // We need role="combobox" for the 'open list' button shortcut to work
+          // with desktop screenreaders.
+          // But desktop Safari with Voiceover does not support proper combobox
+          // handling, a 'button' role is set as a workaround.
+          // See https://bugs.webkit.org/show_bug.cgi?id=236881
+          // Also on iOS Chrome with role='combobox' it announces unnecessarily
+          // that its 'read-only' and that this is a 'textfield', see INSTUI-4500
+          role:
+            utils.isSafari() ||
             utils.isAndroidOrIOS() ||
             (interaction === 'disabled' && utils.isChromium())
-            ? 'button'
-            : 'combobox',
-        title: inputValue,
-        'aria-autocomplete': undefined,
-        'aria-readonly': true
-      }
+              ? 'button'
+              : 'combobox',
+          title: inputValue,
+          'aria-autocomplete': undefined,
+          'aria-readonly': true
+        }
       : interaction === 'disabled' && utils.isChromium()
-        ? { role: 'button' }
-        : {}
+      ? { role: 'button' }
+      : {}
 
     // backdoor to autocomplete attr to work around chrome autofill issues
     if (passthroughProps['autoComplete']) {
@@ -796,8 +796,8 @@ class Select extends Component<SelectProps> {
         typeof onInputChange === 'function'
           ? onInputChange
           : inputValue
-            ? () => { }
-            : undefined,
+          ? () => {}
+          : undefined,
 
       onFocus,
       onBlur: utils.createChainedFunction(onBlur, onRequestHideOptions),
@@ -811,11 +811,10 @@ class Select extends Component<SelectProps> {
         suppressHydrationWarning
         {...(interaction === 'enabled' &&
           !isEditable && {
-          themeOverride: (componentTheme) => ({
-            //@ts-expect-error TODO-theme-types
-            backgroundReadonlyColor: componentTheme.backgroundColor
-          })
-        })}
+            themeOverride: (componentTheme) => ({
+              backgroundReadonlyColor: componentTheme.backgroundColor
+            })
+          })}
       />
     )
   }
@@ -872,8 +871,8 @@ class Select extends Component<SelectProps> {
                 mountNode !== undefined
                   ? mountNode
                   : utils.isAndroidOrIOS()
-                    ? this.ref
-                    : undefined
+                  ? this.ref
+                  : undefined
               }
               positionTarget={this._inputContainer}
               isShowingContent={isShowingOptions}
diff --git a/packages/ui-select/src/Select/v2/props.ts b/packages/ui-select/src/Select/v2/props.ts
index 97eead8319..7a83964ad6 100644
--- a/packages/ui-select/src/Select/v2/props.ts
+++ b/packages/ui-select/src/Select/v2/props.ts
@@ -282,8 +282,7 @@ type PropKeys = keyof SelectOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type SelectProps = SelectOwnProps &
-  //@ts-expect-error TODO-theme-types
-  WithStyleProps<NewComponentTypes['Select'], SelectStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Select']>, SelectStyle> &
   OtherHTMLAttributes<
     SelectOwnProps,
     InputHTMLAttributes<SelectOwnProps & Element>
diff --git a/packages/ui-select/src/Select/v2/styles.ts b/packages/ui-select/src/Select/v2/styles.ts
index ad6d191afb..6db2d14b43 100644
--- a/packages/ui-select/src/Select/v2/styles.ts
+++ b/packages/ui-select/src/Select/v2/styles.ts
@@ -28,12 +28,11 @@ import type { SelectProps, SelectStyle } from './props'
 /**
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
+ * @param  {Object} _props the props of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: NewComponentTypes['Select'],
+  componentTheme: ReturnType<NewComponentTypes['Select']>,
   _props: SelectProps
 ): SelectStyle => {
   return {
@@ -41,7 +40,6 @@ const generateStyle = (
       label: 'select__assistiveText',
       display: 'none'
     },
-    //@ts-expect-error TODO-theme-types
     popoverBorderWidth: componentTheme.popoverBorderWidth
   }
 }
diff --git a/packages/ui-side-nav-bar/package.json b/packages/ui-side-nav-bar/package.json
index d46fccf796..00ac31b6e2 100644
--- a/packages/ui-side-nav-bar/package.json
+++ b/packages/ui-side-nav-bar/package.json
@@ -32,13 +32,13 @@
     "@instructure/ui-badge": "workspace:*",
     "@instructure/ui-icons": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-tooltip": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-side-nav-bar/src/SideNavBar/v2/SideNavBarItem/props.ts b/packages/ui-side-nav-bar/src/SideNavBar/v2/SideNavBarItem/props.ts
index bebf6baf06..c54d83c67f 100644
--- a/packages/ui-side-nav-bar/src/SideNavBar/v2/SideNavBarItem/props.ts
+++ b/packages/ui-side-nav-bar/src/SideNavBar/v2/SideNavBarItem/props.ts
@@ -25,10 +25,10 @@
 import React from 'react'
 import type {
   AsElementType,
-  SideNavBarItemTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type SideNavBarItemOwnProps = {
   /**
@@ -70,7 +70,10 @@ type PropKeys = keyof SideNavBarItemOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type SideNavBarItemProps = SideNavBarItemOwnProps &
-  WithStyleProps<SideNavBarItemTheme, SideNavBarItemStyle> &
+  WithStyleProps<
+    ReturnType<NewComponentTypes['SideNavBarItem']>,
+    SideNavBarItemStyle
+  > &
   OtherHTMLAttributes<SideNavBarItemOwnProps>
 
 type SideNavBarItemStyle = ComponentStyle<'navigationItem' | 'icon' | 'label'>
diff --git a/packages/ui-side-nav-bar/src/SideNavBar/v2/props.ts b/packages/ui-side-nav-bar/src/SideNavBar/v2/props.ts
index b94d40fe81..4617369920 100644
--- a/packages/ui-side-nav-bar/src/SideNavBar/v2/props.ts
+++ b/packages/ui-side-nav-bar/src/SideNavBar/v2/props.ts
@@ -23,11 +23,9 @@
  */
 import React from 'react'
 
-import type {
-  SideNavBarTheme,
-  OtherHTMLAttributes
-} from '@instructure/shared-types'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type SideNavBarOwnProps = {
   /**
@@ -73,7 +71,7 @@ type PropKeys = keyof SideNavBarOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type SideNavBarProps = SideNavBarOwnProps &
-  WithStyleProps<SideNavBarTheme, SideNavBarStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['SideNavBar']>, SideNavBarStyle> &
   OtherHTMLAttributes<SideNavBarOwnProps>
 
 type SideNavBarStyle = ComponentStyle<
diff --git a/packages/ui-source-code-editor/src/SourceCodeEditor/v2/props.ts b/packages/ui-source-code-editor/src/SourceCodeEditor/v2/props.ts
index d221034545..a5e6b50b4a 100644
--- a/packages/ui-source-code-editor/src/SourceCodeEditor/v2/props.ts
+++ b/packages/ui-source-code-editor/src/SourceCodeEditor/v2/props.ts
@@ -24,15 +24,13 @@
 
 import type { TagStyle } from '@codemirror/language'
 
-import type {
-  CodeEditorTheme,
-  OtherHTMLAttributes
-} from '@instructure/shared-types'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type {
   WithStyleProps,
   StyleObject,
   ComponentStyle
 } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 import type { TextDirectionContextConsumerProps } from '@instructure/ui-i18n'
 import type { SearchConfig } from './SearchPanel'
@@ -213,7 +211,7 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type SourceCodeEditorProps = SourceCodeEditorOwnProps &
   WithStyleProps<
-    CodeEditorTheme,
+    ReturnType<NewComponentTypes['SourceCodeEditor']>,
     // The highlightStyle is a unique one, not compatible with our style syntax,
     // but isn't used for the css prop anyway
     Record<keyof SourceCodeEditorStyle, any>
diff --git a/packages/ui-spinner/package.json b/packages/ui-spinner/package.json
index 6e318fe611..2a12c767b7 100644
--- a/packages/ui-spinner/package.json
+++ b/packages/ui-spinner/package.json
@@ -29,6 +29,7 @@
     "@instructure/shared-types": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/ui-view": "workspace:*",
     "@instructure/uid": "workspace:*"
@@ -36,7 +37,6 @@
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
diff --git a/packages/ui-spinner/src/Spinner/v2/props.ts b/packages/ui-spinner/src/Spinner/v2/props.ts
index 909f5d8244..1198610581 100644
--- a/packages/ui-spinner/src/Spinner/v2/props.ts
+++ b/packages/ui-spinner/src/Spinner/v2/props.ts
@@ -25,11 +25,12 @@
 import type {
   Spacing,
   ComponentStyle,
-  ThemeOverrideValue
+  NewThemeOverrideProp
 } from '@instructure/emotion'
 import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 import { Renderable } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type SpinnerOwnProps = {
   /**
@@ -60,9 +61,9 @@ type PropKeys = keyof SpinnerOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type SpinnerProps = SpinnerOwnProps & {
-  themeOverride?: ThemeOverrideValue
-} & OtherHTMLAttributes<SpinnerOwnProps> &
+type SpinnerProps = SpinnerOwnProps &
+  NewThemeOverrideProp<ReturnType<NewComponentTypes['Spinner']>> &
+  OtherHTMLAttributes<SpinnerOwnProps> &
   WithDeterministicIdProps
 
 type SpinnerStyle = ComponentStyle<
diff --git a/packages/ui-spinner/src/Spinner/v2/styles.ts b/packages/ui-spinner/src/Spinner/v2/styles.ts
index 72cd40df7f..861f12b419 100644
--- a/packages/ui-spinner/src/Spinner/v2/styles.ts
+++ b/packages/ui-spinner/src/Spinner/v2/styles.ts
@@ -61,8 +61,8 @@ const morph = keyframes`
  * ---
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
+ * @param params Additional parameters to customize the style.
+ * @param sharedTokens Shared token object that stores common values for the theme.
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
diff --git a/packages/ui-svg-images/package.json b/packages/ui-svg-images/package.json
index e5c44ca125..7cb745ebb1 100644
--- a/packages/ui-svg-images/package.json
+++ b/packages/ui-svg-images/package.json
@@ -27,12 +27,12 @@
     "@instructure/emotion": "workspace:*",
     "@instructure/shared-types": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/uid": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-babel-preset": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-table/package.json b/packages/ui-table/package.json
index 0187491431..5fd6d5ddc9 100644
--- a/packages/ui-table/package.json
+++ b/packages/ui-table/package.json
@@ -31,6 +31,7 @@
     "@instructure/ui-icons": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
     "@instructure/ui-simple-select": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/ui-view": "workspace:*"
   },
@@ -38,7 +39,6 @@
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-table/src/Table/v2/Body/props.ts b/packages/ui-table/src/Table/v2/Body/props.ts
index 9256c207fd..578baa8169 100644
--- a/packages/ui-table/src/Table/v2/Body/props.ts
+++ b/packages/ui-table/src/Table/v2/Body/props.ts
@@ -24,6 +24,7 @@
 import React from 'react'
 import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { ComponentStyle, WithStyleProps } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type TableBodyOwnProps = {
   /**
@@ -40,7 +41,7 @@ type PropKeys = keyof TableBodyOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TableBodyProps = TableBodyOwnProps &
-  WithStyleProps<null, TableBodyStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['TableBody']>, TableBodyStyle> &
   OtherHTMLAttributes<TableBodyOwnProps>
 
 type TableBodyStyle = ComponentStyle<'body'>
diff --git a/packages/ui-table/src/Table/v2/Cell/props.ts b/packages/ui-table/src/Table/v2/Cell/props.ts
index 1ceb4131f7..98ec45fa2c 100644
--- a/packages/ui-table/src/Table/v2/Cell/props.ts
+++ b/packages/ui-table/src/Table/v2/Cell/props.ts
@@ -24,6 +24,7 @@
 
 import type { ComponentStyle, WithStyleProps } from '@instructure/emotion'
 import type { Renderable, OtherHTMLAttributes } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type TableCellOwnProps = {
   /**
@@ -44,7 +45,7 @@ type PropKeys = keyof TableCellOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TableCellProps = TableCellOwnProps &
-  WithStyleProps<null, TableCellStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['TableCell']>, TableCellStyle> &
   OtherHTMLAttributes<TableCellOwnProps>
 
 type TableCellStyle = ComponentStyle<'cell'>
diff --git a/packages/ui-table/src/Table/v2/ColHeader/props.ts b/packages/ui-table/src/Table/v2/ColHeader/props.ts
index 086b9bb8ac..3612742c1e 100644
--- a/packages/ui-table/src/Table/v2/ColHeader/props.ts
+++ b/packages/ui-table/src/Table/v2/ColHeader/props.ts
@@ -25,6 +25,7 @@ import { ThHTMLAttributes } from 'react'
 
 import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { ComponentStyle, WithStyleProps } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type TableColHeaderOwnProps = {
   /**
@@ -69,7 +70,10 @@ type PropKeys = keyof TableColHeaderOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TableColHeaderProps = TableColHeaderOwnProps &
-  WithStyleProps<null, TableColHeaderStyle> &
+  WithStyleProps<
+    ReturnType<NewComponentTypes['TableColHeader']>,
+    TableColHeaderStyle
+  > &
   OtherHTMLAttributes<
     TableColHeaderOwnProps,
     ThHTMLAttributes<TableColHeaderOwnProps>
diff --git a/packages/ui-table/src/Table/v2/Head/props.ts b/packages/ui-table/src/Table/v2/Head/props.ts
index 74dfac427e..9df246df4b 100644
--- a/packages/ui-table/src/Table/v2/Head/props.ts
+++ b/packages/ui-table/src/Table/v2/Head/props.ts
@@ -25,6 +25,7 @@
 import type { Renderable, OtherHTMLAttributes } from '@instructure/shared-types'
 import type { ComponentStyle, WithStyleProps } from '@instructure/emotion'
 import { RowChild } from '../props'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type TableHeadOwnProps = {
   /**
@@ -54,7 +55,7 @@ type PropKeys = keyof TableHeadOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TableHeadProps = TableHeadOwnProps &
-  WithStyleProps<null, TableHeadStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['TableHead']>, TableHeadStyle> &
   OtherHTMLAttributes<TableHeadOwnProps>
 
 type TableHeadStyle = ComponentStyle<'head'>
diff --git a/packages/ui-table/src/Table/v2/Row/props.ts b/packages/ui-table/src/Table/v2/Row/props.ts
index 77447b3cd6..dae2bffd7c 100644
--- a/packages/ui-table/src/Table/v2/Row/props.ts
+++ b/packages/ui-table/src/Table/v2/Row/props.ts
@@ -25,6 +25,7 @@
 import React from 'react'
 import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { ComponentStyle, WithStyleProps } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type TableRowOwnProps = {
   /**
@@ -56,7 +57,7 @@ type PropKeys = keyof TableRowOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TableRowProps = TableRowOwnProps &
-  WithStyleProps<null, TableRowStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['TableRow']>, TableRowStyle> &
   OtherHTMLAttributes<TableRowOwnProps>
 
 type TableRowStyle = ComponentStyle<'row'>
diff --git a/packages/ui-table/src/Table/v2/RowHeader/props.ts b/packages/ui-table/src/Table/v2/RowHeader/props.ts
index e1e5a62f37..11fa1b0c5f 100644
--- a/packages/ui-table/src/Table/v2/RowHeader/props.ts
+++ b/packages/ui-table/src/Table/v2/RowHeader/props.ts
@@ -24,6 +24,7 @@
 
 import type { Renderable, OtherHTMLAttributes } from '@instructure/shared-types'
 import type { ComponentStyle, WithStyleProps } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type TableRowHeaderOwnProps = {
   /**
@@ -38,7 +39,10 @@ type PropKeys = keyof TableRowHeaderOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TableRowHeaderProps = TableRowHeaderOwnProps &
-  WithStyleProps<null, TableRowHeaderStyle> &
+  WithStyleProps<
+    ReturnType<NewComponentTypes['TableRowHeader']>,
+    TableRowHeaderStyle
+  > &
   OtherHTMLAttributes<TableRowHeaderOwnProps>
 
 type TableRowHeaderStyle = ComponentStyle<'rowHeader'>
diff --git a/packages/ui-table/src/Table/v2/props.ts b/packages/ui-table/src/Table/v2/props.ts
index caf66f5f2f..f2afc07c07 100644
--- a/packages/ui-table/src/Table/v2/props.ts
+++ b/packages/ui-table/src/Table/v2/props.ts
@@ -28,6 +28,7 @@ import type {
   WithStyleProps
 } from '@instructure/emotion'
 import type { OtherHTMLAttributes } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type RowChild = React.ReactElement<{ children: React.ReactElement }>
 
@@ -76,7 +77,7 @@ type PropKeys = keyof TableOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TableProps = TableOwnProps &
-  WithStyleProps<null, TableStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Table']>, TableStyle> &
   OtherHTMLAttributes<TableOwnProps>
 
 type TableStyle = ComponentStyle<'table' | 'liveRegion'>
diff --git a/packages/ui-tabs/package.json b/packages/ui-tabs/package.json
index 5dcece137f..899f1432dd 100644
--- a/packages/ui-tabs/package.json
+++ b/packages/ui-tabs/package.json
@@ -33,6 +33,7 @@
     "@instructure/ui-i18n": "workspace:*",
     "@instructure/ui-motion": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/ui-view": "workspace:*",
     "@instructure/uid": "workspace:*",
@@ -42,7 +43,6 @@
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-tabs/src/Tabs/v2/Panel/props.ts b/packages/ui-tabs/src/Tabs/v2/Panel/props.ts
index 34fcdbcb66..4a16af5bde 100644
--- a/packages/ui-tabs/src/Tabs/v2/Panel/props.ts
+++ b/packages/ui-tabs/src/Tabs/v2/Panel/props.ts
@@ -28,10 +28,8 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
-import type {
-  OtherHTMLAttributes,
-  TabsPanelTheme
-} from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 
 type TabsPanelOwnProps = {
   /**
@@ -74,7 +72,7 @@ type PropKeys = keyof TabsPanelOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TabsPanelProps = TabsPanelOwnProps &
-  WithStyleProps<TabsPanelTheme, TabsPanelStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['TabsPanel']>, TabsPanelStyle> &
   OtherHTMLAttributes<TabsPanelOwnProps>
 
 type TabsPanelStyle = ComponentStyle<'panel' | 'content'>
diff --git a/packages/ui-tabs/src/Tabs/v2/Tab/props.ts b/packages/ui-tabs/src/Tabs/v2/Tab/props.ts
index 3c62bbe592..a3a7fbd780 100644
--- a/packages/ui-tabs/src/Tabs/v2/Tab/props.ts
+++ b/packages/ui-tabs/src/Tabs/v2/Tab/props.ts
@@ -23,12 +23,9 @@
  */
 
 import React from 'react'
-import type {
-  OtherHTMLAttributes,
-  Renderable,
-  TabsTabTheme
-} from '@instructure/shared-types'
+import type { OtherHTMLAttributes, Renderable } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { ViewOwnProps } from '@instructure/ui-view/latest'
 
 type TabsTabOwnProps = {
@@ -58,7 +55,7 @@ type PropKeys = keyof TabsTabOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TabsTabProps = TabsTabOwnProps &
-  WithStyleProps<TabsTabTheme, TabsTabStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['TabsTab']>, TabsTabStyle> &
   OtherHTMLAttributes<TabsTabOwnProps>
 
 type TabsTabStyle = ComponentStyle<'tab'>
diff --git a/packages/ui-tabs/src/Tabs/v2/props.ts b/packages/ui-tabs/src/Tabs/v2/props.ts
index 9c6a74b513..8a54504db6 100644
--- a/packages/ui-tabs/src/Tabs/v2/props.ts
+++ b/packages/ui-tabs/src/Tabs/v2/props.ts
@@ -27,7 +27,8 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
-import type { OtherHTMLAttributes, TabsTheme } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { TextDirectionContextConsumerProps } from '@instructure/ui-i18n'
 import type { ViewOwnProps } from '@instructure/ui-view/latest'
 
@@ -85,7 +86,7 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TabsProps = TabsOwnProps &
   TextDirectionContextConsumerProps &
-  WithStyleProps<TabsTheme, TabsStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Tabs']>, TabsStyle> &
   OtherHTMLAttributes<TabsOwnProps>
 
 type TabsStyle = ComponentStyle<
diff --git a/packages/ui-tag/package.json b/packages/ui-tag/package.json
index 1c77754cb0..ec5f9c435c 100644
--- a/packages/ui-tag/package.json
+++ b/packages/ui-tag/package.json
@@ -31,12 +31,12 @@
     "@instructure/ui-dom-utils": "workspace:*",
     "@instructure/ui-icons": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-view": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-tag/src/Tag/v2/props.ts b/packages/ui-tag/src/Tag/v2/props.ts
index efb45d8f31..1593a51a13 100644
--- a/packages/ui-tag/src/Tag/v2/props.ts
+++ b/packages/ui-tag/src/Tag/v2/props.ts
@@ -29,7 +29,8 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
-import type { OtherHTMLAttributes, TagTheme } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 
 type TagOwnProps = {
   className?: string
@@ -71,7 +72,7 @@ type PropKeys = keyof TagOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TagProps = TagOwnProps &
-  WithStyleProps<TagTheme, TagStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Tag']>, TagStyle> &
   OtherHTMLAttributes<TagOwnProps>
 
 type TagStyle = ComponentStyle<'tag' | 'text' | 'icon'>
diff --git a/packages/ui-text-area/package.json b/packages/ui-text-area/package.json
index 567b91357e..07dbe3e80e 100644
--- a/packages/ui-text-area/package.json
+++ b/packages/ui-text-area/package.json
@@ -31,6 +31,7 @@
     "@instructure/ui-dom-utils": "workspace:*",
     "@instructure/ui-form-field": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/uid": "workspace:*"
   },
@@ -38,7 +39,6 @@
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-text-area/src/TextArea/v2/props.ts b/packages/ui-text-area/src/TextArea/v2/props.ts
index 227b697f98..5c6609c77c 100644
--- a/packages/ui-text-area/src/TextArea/v2/props.ts
+++ b/packages/ui-text-area/src/TextArea/v2/props.ts
@@ -28,13 +28,17 @@ import type {
   OtherHTMLAttributes,
   PickPropsWithExceptions
 } from '@instructure/shared-types'
-import type { FormMessage, FormFieldOwnProps } from '@instructure/ui-form-field/latest'
+import type {
+  FormMessage,
+  FormFieldOwnProps
+} from '@instructure/ui-form-field/latest'
 import type {
   ComponentStyle,
-  Spacing,
-  ThemeOverrideValue
+  NewThemeOverrideProp,
+  Spacing
 } from '@instructure/emotion'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+import { NewComponentTypes } from '@instructure/ui-themes'
 
 type TextAreaOwnProps = {
   label: React.ReactNode
@@ -124,9 +128,9 @@ type TextAreaProps =
     FormFieldOwnProps,
     'label' | 'inline' | 'id' | 'elementRef'
   > &
-    TextAreaOwnProps & {
-      themeOverride?: ThemeOverrideValue
-    } & OtherHTMLAttributes<
+    TextAreaOwnProps &
+    NewThemeOverrideProp<ReturnType<NewComponentTypes['TextArea']>> &
+    OtherHTMLAttributes<
       TextAreaOwnProps,
       TextareaHTMLAttributes<TextAreaOwnProps & Element>
     > &
diff --git a/packages/ui-text-area/src/TextArea/v2/styles.ts b/packages/ui-text-area/src/TextArea/v2/styles.ts
index 285dbc8ccd..efc27f581e 100644
--- a/packages/ui-text-area/src/TextArea/v2/styles.ts
+++ b/packages/ui-text-area/src/TextArea/v2/styles.ts
@@ -39,9 +39,10 @@ type StyleParams = {
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} params Additional parameters to customize the style.
- * @return {Object} The final style object, which will be used in the component
+ * @param componentTheme The theme variable object.
+ * @param params Additional parameters to customize the style.
+ * @param sharedTokens Shared token object that stores common values for the theme.
+ * @return The final style object, which will be used in the component
  */
 const generateStyle = (
   componentTheme: ReturnType<NewComponentTypes['TextArea']>,
diff --git a/packages/ui-text-input/src/TextInput/v2/props.ts b/packages/ui-text-input/src/TextInput/v2/props.ts
index 8981c14df7..1411149fb9 100644
--- a/packages/ui-text-input/src/TextInput/v2/props.ts
+++ b/packages/ui-text-input/src/TextInput/v2/props.ts
@@ -184,8 +184,7 @@ type PropKeys = keyof TextInputOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TextInputProps = TextInputOwnProps &
-  //@ts-expect-error TODO-theme-types
-  WithStyleProps<NewComponentTypes['TextInput'], TextInputStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['TextInput']>, TextInputStyle> &
   OtherHTMLAttributes<
     TextInputOwnProps,
     InputHTMLAttributes<TextInputOwnProps>
diff --git a/packages/ui-text-input/src/TextInput/v2/theme.ts b/packages/ui-text-input/src/TextInput/v2/theme.ts
deleted file mode 100644
index e1d77a78b3..0000000000
--- a/packages/ui-text-input/src/TextInput/v2/theme.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import type { Theme, ThemeSpecificStyle } from '@instructure/ui-themes'
-import { TextInputTheme } from '@instructure/shared-types'
-
-/**
- * Generates the theme object for the component from the theme and provided additional information
- * @param  {Object} theme The actual theme object.
- * @return {Object} The final theme object with the overrides and component variables
- */
-const generateComponentTheme = (theme: Theme): TextInputTheme => {
-  const { colors, typography, borders, spacing, forms, key: themeName } = theme
-
-  const themeSpecificStyle: ThemeSpecificStyle<TextInputTheme> = {
-    canvas: {
-      color: theme['ic-brand-font-color-dark'],
-      focusOutlineColor: theme['ic-brand-primary']
-    }
-  }
-
-  const componentVariables: TextInputTheme = {
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
-
-    borderWidth: borders?.widthSmall,
-    borderStyle: borders?.style,
-    borderColor: colors?.contrasts?.grey3045,
-    borderRadius: borders?.radiusMedium,
-
-    color: colors?.contrasts?.grey125125,
-    background: colors?.contrasts?.white1010,
-
-    requiredInvalidColor: colors?.contrasts?.red5782,
-
-    padding: spacing?.small,
-
-    focusOutlineWidth: borders?.widthMedium,
-    focusOutlineStyle: borders?.style,
-    focusOutlineColor: colors?.contrasts?.blue4570,
-
-    errorBorderColor: colors?.contrasts?.red4570,
-    errorOutlineColor: colors?.contrasts?.red4570,
-
-    placeholderColor: colors?.contrasts?.grey4570,
-
-    smallFontSize: typography?.fontSizeSmall,
-    smallHeight: forms?.inputHeightSmall,
-
-    mediumFontSize: typography?.fontSizeMedium,
-    mediumHeight: forms?.inputHeightMedium,
-
-    largeFontSize: typography?.fontSizeLarge,
-    largeHeight: forms?.inputHeightLarge
-  }
-
-  return {
-    ...componentVariables,
-    ...themeSpecificStyle[themeName]
-  }
-}
-
-export default generateComponentTheme
diff --git a/packages/ui-text/package.json b/packages/ui-text/package.json
index 67092c0c59..0dfcdc6f74 100644
--- a/packages/ui-text/package.json
+++ b/packages/ui-text/package.json
@@ -28,12 +28,12 @@
     "@instructure/emotion": "workspace:*",
     "@instructure/shared-types": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
-    "@instructure/ui-react-utils": "workspace:*"
+    "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7"
   },
diff --git a/packages/ui-text/src/Text/v2/props.ts b/packages/ui-text/src/Text/v2/props.ts
index b0c43f29e3..73e9b1ccea 100644
--- a/packages/ui-text/src/Text/v2/props.ts
+++ b/packages/ui-text/src/Text/v2/props.ts
@@ -25,10 +25,10 @@
 import React from 'react'
 import type {
   AsElementType,
-  TextTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type TextOwnProps = {
   /**
@@ -113,7 +113,7 @@ type PropKeys = keyof TextOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TextProps = TextOwnProps &
-  WithStyleProps<TextTheme, TextStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Text']>, TextStyle> &
   OtherHTMLAttributes<TextOwnProps>
 
 type TextStyle = ComponentStyle<'text'>
diff --git a/packages/ui-themes/src/index.ts b/packages/ui-themes/src/index.ts
index 7031cd41a8..1f9f6bcb06 100644
--- a/packages/ui-themes/src/index.ts
+++ b/packages/ui-themes/src/index.ts
@@ -37,7 +37,8 @@ import type {
   Primitives,
   AdditionalPrimitives,
   DataVisualization,
-  UI
+  UI,
+  DeepPartial
 } from '@instructure/shared-types'
 
 import canvasHighContrast from './themes/canvasHighContrast'
@@ -70,11 +71,23 @@ type ThemeMap = {
 
 type ThemeKeys = keyof ThemeMap
 
+// converts `AA: (semantics: any) => AA` to `AA: AA`
+type NewComponentsAsValue = {
+  [K in keyof NewComponentTypes]: ReturnType<NewComponentTypes[K]>
+}
+
+type NewThemeOverrideObject = {
+  primitives?: Record<string, any>
+  semantics?: Record<string, any>
+  sharedTokens?: DeepPartial<SharedTokens>
+  components?: DeepPartial<NewComponentsAsValue>
+}
+
 type Theme<
   NewThemeType extends NewBaseTheme = NewBaseTheme,
   K extends ThemeKeys = ThemeKeys
-> = BaseTheme & { newTheme: NewThemeType } & {
-  key: K
+> = BaseTheme & { newTheme: NewThemeType } & { key: K } & {
+  themeOverride?: NewThemeOverrideObject
 } & Partial<CanvasBrandVariables>
 
 type ThemeSpecificStyle<ComponentTheme> = {
@@ -113,6 +126,7 @@ export type {
   Light,
   NewComponentTypes,
   NewBaseTheme,
+  NewThemeOverrideObject,
   TokenBoxshadowValueInst,
   TokenTypographyValueInst,
   SharedTokens
diff --git a/packages/ui-toggle-details/package.json b/packages/ui-toggle-details/package.json
index a2e79dab05..ff6a33de94 100644
--- a/packages/ui-toggle-details/package.json
+++ b/packages/ui-toggle-details/package.json
@@ -33,6 +33,7 @@
     "@instructure/ui-icons": "workspace:*",
     "@instructure/ui-motion": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/ui-view": "workspace:*",
     "@instructure/uid": "workspace:*"
@@ -40,7 +41,6 @@
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-toggle-details/src/ToggleDetails/v2/props.ts b/packages/ui-toggle-details/src/ToggleDetails/v2/props.ts
index e34bb100d5..4766da69a0 100644
--- a/packages/ui-toggle-details/src/ToggleDetails/v2/props.ts
+++ b/packages/ui-toggle-details/src/ToggleDetails/v2/props.ts
@@ -24,11 +24,9 @@
 
 import React from 'react'
 
-import type {
-  OtherHTMLAttributes,
-  ToggleDetailsTheme
-} from '@instructure/shared-types'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { ViewProps } from '@instructure/ui-view/latest'
 
 type ToggleDetailsOwnProps = {
@@ -80,7 +78,10 @@ type PropKeys = keyof ToggleDetailsOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type ToggleDetailsProps = ToggleDetailsOwnProps &
-  WithStyleProps<ToggleDetailsTheme, ToggleDetailsStyle> &
+  WithStyleProps<
+    ReturnType<NewComponentTypes['ToggleDetails']>,
+    ToggleDetailsStyle
+  > &
   OtherHTMLAttributes<ToggleDetailsOwnProps>
 
 type ToggleDetailsStyle = ComponentStyle<
diff --git a/packages/ui-toggle-details/src/ToggleGroup/v2/props.ts b/packages/ui-toggle-details/src/ToggleGroup/v2/props.ts
index 8fcb428ccb..aea313a6b6 100644
--- a/packages/ui-toggle-details/src/ToggleGroup/v2/props.ts
+++ b/packages/ui-toggle-details/src/ToggleGroup/v2/props.ts
@@ -27,11 +27,11 @@ import React from 'react'
 import {
   AsElementType,
   OtherHTMLAttributes,
-  Renderable,
-  ToggleGroupTheme
+  Renderable
 } from '@instructure/shared-types'
 
 import type { WithStyleProps } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type ToggleGroupOwnProps = {
   /**
@@ -94,7 +94,7 @@ type ToggleGroupStyle = { borderColor: string }
 
 type ToggleGroupProps = ToggleGroupOwnProps &
   OtherHTMLAttributes<ToggleGroupOwnProps> &
-  WithStyleProps<ToggleGroupTheme, ToggleGroupStyle>
+  WithStyleProps<ReturnType<NewComponentTypes['ToggleGroup']>, ToggleGroupStyle>
 const allowedProps: AllowedPropKeys = [
   'children',
   'summary',
diff --git a/packages/ui-tooltip/package.json b/packages/ui-tooltip/package.json
index 53261f13d0..77565ca848 100644
--- a/packages/ui-tooltip/package.json
+++ b/packages/ui-tooltip/package.json
@@ -29,13 +29,13 @@
     "@instructure/ui-popover": "workspace:*",
     "@instructure/ui-position": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
     "@instructure/ui-scripts": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-tooltip/src/Tooltip/v2/props.ts b/packages/ui-tooltip/src/Tooltip/v2/props.ts
index 86de063066..f59ddd2226 100644
--- a/packages/ui-tooltip/src/Tooltip/v2/props.ts
+++ b/packages/ui-tooltip/src/Tooltip/v2/props.ts
@@ -26,7 +26,6 @@ import React from 'react'
 
 import type {
   AsElementType,
-  TooltipTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type {
@@ -35,6 +34,7 @@ import type {
   PositionMountNode
 } from '@instructure/ui-position'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { PopoverOwnProps } from '@instructure/ui-popover/latest'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 import { Renderable } from '@instructure/shared-types'
@@ -183,7 +183,7 @@ type PropsPassableToPopover = Omit<
 
 type TooltipProps = PropsPassableToPopover &
   TooltipOwnProps &
-  WithStyleProps<TooltipTheme, TooltipStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Tooltip']>, TooltipStyle> &
   // the OtherHTMLAttributes might be passed to the trigger or Popover
   OtherHTMLAttributes<TooltipOwnProps> &
   WithDeterministicIdProps
diff --git a/packages/ui-top-nav-bar/package.json b/packages/ui-top-nav-bar/package.json
index 1801cecb3c..806e95955e 100644
--- a/packages/ui-top-nav-bar/package.json
+++ b/packages/ui-top-nav-bar/package.json
@@ -39,6 +39,7 @@
     "@instructure/ui-popover": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
     "@instructure/ui-responsive": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-tooltip": "workspace:*",
     "@instructure/ui-tray": "workspace:*",
     "@instructure/ui-truncate-list": "workspace:*",
@@ -50,7 +51,6 @@
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
     "@instructure/ui-scripts": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-tray/package.json b/packages/ui-tray/package.json
index 4d3fcd1a42..1a88efeec2 100644
--- a/packages/ui-tray/package.json
+++ b/packages/ui-tray/package.json
@@ -34,11 +34,11 @@
     "@instructure/ui-portal": "workspace:*",
     "@instructure/ui-position": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-babel-preset": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
diff --git a/packages/ui-tray/src/Tray/v2/props.ts b/packages/ui-tray/src/Tray/v2/props.ts
index 924b7ab6f8..29f8a64f18 100644
--- a/packages/ui-tray/src/Tray/v2/props.ts
+++ b/packages/ui-tray/src/Tray/v2/props.ts
@@ -24,9 +24,9 @@
 
 import React from 'react'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type {
   OtherHTMLAttributes,
-  TrayTheme,
   LiveRegion,
   UIElement
 } from '@instructure/shared-types'
@@ -166,7 +166,7 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TrayProps = TrayOwnProps &
   TextDirectionContextConsumerProps &
-  WithStyleProps<TrayTheme, TrayStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['Tray']>, TrayStyle> &
   OtherHTMLAttributes<TrayOwnProps>
 
 type TrayStyle = ComponentStyle<'tray' | 'content'>
diff --git a/packages/ui-tree-browser/package.json b/packages/ui-tree-browser/package.json
index a01e78ede5..e30d07874e 100644
--- a/packages/ui-tree-browser/package.json
+++ b/packages/ui-tree-browser/package.json
@@ -29,6 +29,7 @@
     "@instructure/ui-icons": "workspace:*",
     "@instructure/ui-img": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "keycode": "^2"
   },
@@ -36,7 +37,6 @@
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
diff --git a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeButton/props.ts b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeButton/props.ts
index eeb48426a0..de715cf1b2 100644
--- a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeButton/props.ts
+++ b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeButton/props.ts
@@ -24,7 +24,7 @@
 
 import React from 'react'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import type { TreeBrowserButtonTheme } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { TreeBrowserCommonProps } from '../props'
 
 type TreeBrowserButtonOwnProps = {
@@ -58,7 +58,10 @@ type PropKeys = keyof TreeBrowserButtonOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TreeBrowserButtonProps = TreeBrowserButtonOwnProps &
-  WithStyleProps<TreeBrowserButtonTheme, TreeBrowserButtonStyle>
+  WithStyleProps<
+    ReturnType<NewComponentTypes['TreeBrowserTreeButton']>,
+    TreeBrowserButtonStyle
+  >
 
 type TreeBrowserButtonStyle = ComponentStyle<
   | 'treeButton'
diff --git a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeCollection/props.ts b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeCollection/props.ts
index be2c0e6fe7..f1d968eb34 100644
--- a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeCollection/props.ts
+++ b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeCollection/props.ts
@@ -25,8 +25,8 @@
 import React from 'react'
 
 import type { CollectionData } from '../props'
-import type { TreeBrowserCollectionTheme } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import { CollectionProps, TreeBrowserBaseProps } from '../props'
 
 type TreeBrowserCollectionOwnProps = {
@@ -45,7 +45,10 @@ type PropKeys = keyof TreeBrowserCollectionOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TreeBrowserCollectionProps = TreeBrowserCollectionOwnProps &
-  WithStyleProps<TreeBrowserCollectionTheme, TreeBrowserCollectionStyle>
+  WithStyleProps<
+    ReturnType<NewComponentTypes['TreeBrowserTreeCollection']>,
+    TreeBrowserCollectionStyle
+  >
 
 type TreeBrowserCollectionStyle = ComponentStyle<
   'treeCollection' | 'list' | 'item'
diff --git a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeNode/props.ts b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeNode/props.ts
index fa45243090..146478cc82 100644
--- a/packages/ui-tree-browser/src/TreeBrowser/v2/TreeNode/props.ts
+++ b/packages/ui-tree-browser/src/TreeBrowser/v2/TreeNode/props.ts
@@ -23,8 +23,8 @@
  */
 
 import React from 'react'
-import type { TreeBrowserButtonTheme } from '@instructure/shared-types'
 import type { WithStyleProps } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 import type {
   TreeBrowserButtonProps,
@@ -63,7 +63,10 @@ type PropKeys = keyof TreeBrowserNodeOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TreeBrowserNodeProps = TreeBrowserNodeOwnProps &
-  WithStyleProps<TreeBrowserButtonTheme, TreeBrowserButtonStyle>
+  WithStyleProps<
+    ReturnType<NewComponentTypes['TreeBrowserTreeButton']>,
+    TreeBrowserButtonStyle
+  >
 const allowedProps: AllowedPropKeys = [
   'id',
   'size',
diff --git a/packages/ui-tree-browser/src/TreeBrowser/v2/props.ts b/packages/ui-tree-browser/src/TreeBrowser/v2/props.ts
index 636b7f1c5b..27154299fd 100644
--- a/packages/ui-tree-browser/src/TreeBrowser/v2/props.ts
+++ b/packages/ui-tree-browser/src/TreeBrowser/v2/props.ts
@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import type { TreeBrowserTheme } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import React, { ReactElement } from 'react'
 import type { TreeBrowserButtonProps } from './TreeButton/props'
 import { Renderable } from '@instructure/shared-types'
@@ -141,7 +141,7 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 // For now it doesn't need the OtherHTMLAttributes, because the extra props
 // get passed to TreeCollection and it doesn't handle them
 type TreeBrowserProps = TreeBrowserOwnProps &
-  WithStyleProps<TreeBrowserTheme, TreeBrowserStyle>
+  WithStyleProps<ReturnType<NewComponentTypes['TreeBrowser']>, TreeBrowserStyle>
 
 type TreeBrowserStyle = ComponentStyle<'treeBrowser'>
 
diff --git a/packages/ui-truncate-list/src/TruncateList/styles.ts b/packages/ui-truncate-list/src/TruncateList/styles.ts
index 757fe264da..e6d0d238ed 100644
--- a/packages/ui-truncate-list/src/TruncateList/styles.ts
+++ b/packages/ui-truncate-list/src/TruncateList/styles.ts
@@ -29,9 +29,7 @@ import type { TruncateListProps, TruncateListStyle } from './props'
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
diff --git a/packages/ui-truncate-text/package.json b/packages/ui-truncate-text/package.json
index a008695369..f510d9620e 100644
--- a/packages/ui-truncate-text/package.json
+++ b/packages/ui-truncate-text/package.json
@@ -30,6 +30,7 @@
     "@instructure/shared-types": "workspace:*",
     "@instructure/ui-dom-utils": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "escape-html": "^1.0.3"
   },
@@ -38,7 +39,6 @@
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
     "@instructure/ui-text": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@types/escape-html": "^1.0.4",
diff --git a/packages/ui-truncate-text/src/TruncateText/v2/props.ts b/packages/ui-truncate-text/src/TruncateText/v2/props.ts
index 4b0b2b2a61..8bcc15ecca 100644
--- a/packages/ui-truncate-text/src/TruncateText/v2/props.ts
+++ b/packages/ui-truncate-text/src/TruncateText/v2/props.ts
@@ -24,8 +24,8 @@
 
 import { ReactNode } from 'react'
 
-import type { TruncateTextTheme } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type CleanDataOptions = {
   /**
@@ -79,7 +79,10 @@ type PropKeys = keyof TruncateTextOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type TruncateTextProps = TruncateTextOwnProps &
-  WithStyleProps<TruncateTextTheme, TruncateTextStyle>
+  WithStyleProps<
+    ReturnType<NewComponentTypes['TruncateText']>,
+    TruncateTextStyle
+  >
 
 type TruncateTextStyle = ComponentStyle<
   'truncateText' | 'auto' | 'spacer' | 'lineHeight'
diff --git a/packages/ui-view/package.json b/packages/ui-view/package.json
index afb37a584c..d7075a49be 100644
--- a/packages/ui-view/package.json
+++ b/packages/ui-view/package.json
@@ -31,12 +31,12 @@
     "@instructure/ui-dom-utils": "workspace:*",
     "@instructure/ui-i18n": "workspace:*",
     "@instructure/ui-position": "workspace:*",
-    "@instructure/ui-react-utils": "workspace:*"
+    "@instructure/ui-react-utils": "workspace:*",
+    "@instructure/ui-themes": "workspace:*"
   },
   "devDependencies": {
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
-    "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2"
diff --git a/packages/ui-view/src/ContextView/v2/props.ts b/packages/ui-view/src/ContextView/v2/props.ts
index 650b835a83..daa24c8c7f 100644
--- a/packages/ui-view/src/ContextView/v2/props.ts
+++ b/packages/ui-view/src/ContextView/v2/props.ts
@@ -25,7 +25,6 @@
 import React from 'react'
 import type {
   AsElementType,
-  ContextViewTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { PlacementPropValues } from '@instructure/ui-position'
@@ -36,6 +35,7 @@ import type {
   WithStyleProps,
   ComponentStyle
 } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type ContextViewOwnProps = {
   as?: AsElementType
@@ -63,7 +63,10 @@ type PropKeys = keyof ContextViewOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type ContextViewProps = ContextViewOwnProps &
-  WithStyleProps<ContextViewTheme, ContextViewStyle> &
+  WithStyleProps<
+    ReturnType<NewComponentTypes['ContextView']>,
+    ContextViewStyle
+  > &
   OtherHTMLAttributes<ContextViewOwnProps>
 
 type ContextViewStyle = ComponentStyle<
diff --git a/packages/ui-view/src/View/v2/props.ts b/packages/ui-view/src/View/v2/props.ts
index 31739e028b..69e25a0b5a 100644
--- a/packages/ui-view/src/View/v2/props.ts
+++ b/packages/ui-view/src/View/v2/props.ts
@@ -26,8 +26,7 @@ import React from 'react'
 import type { Cursor } from '@instructure/shared-types'
 import type {
   AsElementType,
-  OtherHTMLAttributes,
-  ViewTheme
+  OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type {
   WithStyleProps,
@@ -39,6 +38,7 @@ import type {
   ComponentStyle,
   StyleObject
 } from '@instructure/emotion'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type BorderColor =
   | string
@@ -223,7 +223,7 @@ type ViewOwnProps = {
 type PropKeys = keyof ViewOwnProps
 
 type ViewProps = ViewOwnProps &
-  WithStyleProps<ViewTheme, ViewStyle> &
+  WithStyleProps<ReturnType<NewComponentTypes['View']>, ViewStyle> &
   OtherHTMLAttributes<ViewOwnProps>
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ec6c5b4050..c429f1bf68 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1017,6 +1017,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-view':
         specifier: workspace:*
         version: link:../ui-view
@@ -1030,9 +1033,6 @@ importers:
       '@instructure/ui-color-utils':
         specifier: workspace:*
         version: link:../ui-color-utils
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -1154,6 +1154,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-view':
         specifier: workspace:*
         version: link:../ui-view
@@ -1164,9 +1167,6 @@ importers:
       '@instructure/ui-babel-preset':
         specifier: workspace:*
         version: link:../ui-babel-preset
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -1197,6 +1197,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-view':
         specifier: workspace:*
         version: link:../ui-view
@@ -1213,9 +1216,6 @@ importers:
       '@instructure/ui-icons':
         specifier: workspace:*
         version: link:../ui-icons
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -1249,6 +1249,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-tooltip':
         specifier: workspace:*
         version: link:../ui-tooltip
@@ -1271,9 +1274,6 @@ importers:
       '@instructure/ui-scripts':
         specifier: workspace:*
         version: link:../ui-scripts
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -1319,6 +1319,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-tooltip':
         specifier: workspace:*
         version: link:../ui-tooltip
@@ -1338,9 +1341,6 @@ importers:
       '@instructure/ui-babel-preset':
         specifier: workspace:*
         version: link:../ui-babel-preset
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -1368,6 +1368,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-view':
         specifier: workspace:*
         version: link:../ui-view
@@ -1381,9 +1384,6 @@ importers:
       '@instructure/ui-color-utils':
         specifier: workspace:*
         version: link:../ui-color-utils
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -1426,6 +1426,9 @@ importers:
       '@instructure/ui-simple-select':
         specifier: workspace:*
         version: link:../ui-simple-select
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -1442,9 +1445,6 @@ importers:
       '@instructure/ui-color-utils':
         specifier: workspace:*
         version: link:../ui-color-utils
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -1487,6 +1487,9 @@ importers:
       '@instructure/ui-svg-images':
         specifier: workspace:*
         version: link:../ui-svg-images
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -1509,9 +1512,6 @@ importers:
       '@instructure/ui-color-utils':
         specifier: workspace:*
         version: link:../ui-color-utils
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -1892,6 +1892,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -1908,9 +1911,6 @@ importers:
       '@instructure/ui-buttons':
         specifier: workspace:*
         version: link:../ui-buttons
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -1956,6 +1956,9 @@ importers:
       '@instructure/ui-selectable':
         specifier: workspace:*
         version: link:../ui-selectable
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -1975,9 +1978,6 @@ importers:
       '@instructure/ui-scripts':
         specifier: workspace:*
         version: link:../ui-scripts
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -2112,6 +2112,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -2131,9 +2134,6 @@ importers:
       '@instructure/ui-babel-preset':
         specifier: workspace:*
         version: link:../ui-babel-preset
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -2161,6 +2161,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-view':
         specifier: workspace:*
         version: link:../ui-view
@@ -2171,9 +2174,6 @@ importers:
       '@instructure/ui-babel-preset':
         specifier: workspace:*
         version: link:../ui-babel-preset
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -2253,6 +2253,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -2266,9 +2269,6 @@ importers:
       '@instructure/ui-babel-preset':
         specifier: workspace:*
         version: link:../ui-babel-preset
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -2299,6 +2299,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -2309,9 +2312,6 @@ importers:
       '@instructure/ui-color-utils':
         specifier: workspace:*
         version: link:../ui-color-utils
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -2342,6 +2342,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-view':
         specifier: workspace:*
         version: link:../ui-view
@@ -2352,9 +2355,6 @@ importers:
       '@instructure/ui-babel-preset':
         specifier: workspace:*
         version: link:../ui-babel-preset
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -2526,6 +2526,9 @@ importers:
       '@instructure/ui-text':
         specifier: workspace:*
         version: link:../ui-text
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-view':
         specifier: workspace:*
         version: link:../ui-view
@@ -2539,9 +2542,6 @@ importers:
       '@instructure/ui-color-utils':
         specifier: workspace:*
         version: link:../ui-color-utils
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -2581,6 +2581,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -2594,9 +2597,6 @@ importers:
       '@instructure/ui-babel-preset':
         specifier: workspace:*
         version: link:../ui-babel-preset
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -2627,6 +2627,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-view':
         specifier: workspace:*
         version: link:../ui-view
@@ -2640,9 +2643,6 @@ importers:
       '@instructure/ui-color-utils':
         specifier: workspace:*
         version: link:../ui-color-utils
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -2685,6 +2685,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -2704,9 +2707,6 @@ importers:
       '@instructure/ui-color-utils':
         specifier: workspace:*
         version: link:../ui-color-utils
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -2737,6 +2737,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
     devDependencies:
       '@instructure/ui-axe-check':
         specifier: workspace:*
@@ -2747,9 +2750,6 @@ importers:
       '@instructure/ui-color-utils':
         specifier: workspace:*
         version: link:../ui-color-utils
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -2795,6 +2795,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -2811,9 +2814,6 @@ importers:
       '@instructure/ui-position':
         specifier: workspace:*
         version: link:../ui-position
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -2844,6 +2844,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -2851,9 +2854,6 @@ importers:
       '@instructure/ui-babel-preset':
         specifier: workspace:*
         version: link:../ui-babel-preset
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -2905,6 +2905,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-tooltip':
         specifier: workspace:*
         version: link:../ui-tooltip
@@ -2930,9 +2933,6 @@ importers:
       '@instructure/ui-scripts':
         specifier: workspace:*
         version: link:../ui-scripts
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -2969,6 +2969,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -2985,9 +2988,6 @@ importers:
       '@instructure/ui-scripts':
         specifier: workspace:*
         version: link:../ui-scripts
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -3018,6 +3018,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -3034,9 +3037,6 @@ importers:
       '@instructure/ui-color-utils':
         specifier: workspace:*
         version: link:../ui-color-utils
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -3094,6 +3094,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-tooltip':
         specifier: workspace:*
         version: link:../ui-tooltip
@@ -3113,9 +3116,6 @@ importers:
       '@instructure/ui-babel-preset':
         specifier: workspace:*
         version: link:../ui-babel-preset
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -3152,6 +3152,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -3165,9 +3168,6 @@ importers:
       '@instructure/ui-color-utils':
         specifier: workspace:*
         version: link:../ui-color-utils
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -3344,6 +3344,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -3366,9 +3369,6 @@ importers:
       '@instructure/ui-color-utils':
         specifier: workspace:*
         version: link:../ui-color-utils
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -3442,6 +3442,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -3455,9 +3458,6 @@ importers:
       '@instructure/ui-color-utils':
         specifier: workspace:*
         version: link:../ui-color-utils
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -3491,6 +3491,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-view':
         specifier: workspace:*
         version: link:../ui-view
@@ -3501,9 +3504,6 @@ importers:
       '@instructure/ui-babel-preset':
         specifier: workspace:*
         version: link:../ui-babel-preset
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -3537,6 +3537,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
     devDependencies:
       '@instructure/ui-axe-check':
         specifier: workspace:*
@@ -3547,9 +3550,6 @@ importers:
       '@instructure/ui-color-utils':
         specifier: workspace:*
         version: link:../ui-color-utils
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -3592,6 +3592,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -3608,9 +3611,6 @@ importers:
       '@instructure/ui-babel-preset':
         specifier: workspace:*
         version: link:../ui-babel-preset
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -3650,6 +3650,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-view':
         specifier: workspace:*
         version: link:../ui-view
@@ -3660,9 +3663,6 @@ importers:
       '@instructure/ui-babel-preset':
         specifier: workspace:*
         version: link:../ui-babel-preset
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -3846,6 +3846,9 @@ importers:
       '@instructure/ui-text-input':
         specifier: workspace:*
         version: link:../ui-text-input
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -3865,9 +3868,6 @@ importers:
       '@instructure/ui-scripts':
         specifier: workspace:*
         version: link:../ui-scripts
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -3950,6 +3950,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-tooltip':
         specifier: workspace:*
         version: link:../ui-tooltip
@@ -3963,9 +3966,6 @@ importers:
       '@instructure/ui-color-utils':
         specifier: workspace:*
         version: link:../ui-color-utils
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -4145,6 +4145,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -4161,9 +4164,6 @@ importers:
       '@instructure/ui-babel-preset':
         specifier: workspace:*
         version: link:../ui-babel-preset
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -4188,6 +4188,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -4198,9 +4201,6 @@ importers:
       '@instructure/ui-babel-preset':
         specifier: workspace:*
         version: link:../ui-babel-preset
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -4240,6 +4240,9 @@ importers:
       '@instructure/ui-simple-select':
         specifier: workspace:*
         version: link:../ui-simple-select
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -4256,9 +4259,6 @@ importers:
       '@instructure/ui-color-utils':
         specifier: workspace:*
         version: link:../ui-color-utils
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -4304,6 +4304,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -4326,9 +4329,6 @@ importers:
       '@instructure/ui-color-utils':
         specifier: workspace:*
         version: link:../ui-color-utils
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -4368,6 +4368,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-view':
         specifier: workspace:*
         version: link:../ui-view
@@ -4378,9 +4381,6 @@ importers:
       '@instructure/ui-babel-preset':
         specifier: workspace:*
         version: link:../ui-babel-preset
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -4414,6 +4414,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
     devDependencies:
       '@instructure/ui-axe-check':
         specifier: workspace:*
@@ -4421,9 +4424,6 @@ importers:
       '@instructure/ui-babel-preset':
         specifier: workspace:*
         version: link:../ui-babel-preset
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -4457,6 +4457,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -4473,9 +4476,6 @@ importers:
       '@instructure/ui-color-utils':
         specifier: workspace:*
         version: link:../ui-color-utils
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -4657,6 +4657,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -4673,9 +4676,6 @@ importers:
       '@instructure/ui-babel-preset':
         specifier: workspace:*
         version: link:../ui-babel-preset
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -4709,6 +4709,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -4722,9 +4725,6 @@ importers:
       '@instructure/ui-scripts':
         specifier: workspace:*
         version: link:../ui-scripts
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -4788,6 +4788,9 @@ importers:
       '@instructure/ui-responsive':
         specifier: workspace:*
         version: link:../ui-responsive
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-tooltip':
         specifier: workspace:*
         version: link:../ui-tooltip
@@ -4816,9 +4819,6 @@ importers:
       '@instructure/ui-scripts':
         specifier: workspace:*
         version: link:../ui-scripts
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -4867,6 +4867,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -4874,9 +4877,6 @@ importers:
       '@instructure/ui-babel-preset':
         specifier: workspace:*
         version: link:../ui-babel-preset
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -4910,6 +4910,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -4926,9 +4929,6 @@ importers:
       '@instructure/ui-color-utils':
         specifier: workspace:*
         version: link:../ui-color-utils
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -5011,6 +5011,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
       '@instructure/ui-utils':
         specifier: workspace:*
         version: link:../ui-utils
@@ -5030,9 +5033,6 @@ importers:
       '@instructure/ui-text':
         specifier: workspace:*
         version: link:../ui-text
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1
@@ -5115,6 +5115,9 @@ importers:
       '@instructure/ui-react-utils':
         specifier: workspace:*
         version: link:../ui-react-utils
+      '@instructure/ui-themes':
+        specifier: workspace:*
+        version: link:../ui-themes
     devDependencies:
       '@instructure/ui-axe-check':
         specifier: workspace:*
@@ -5122,9 +5125,6 @@ importers:
       '@instructure/ui-babel-preset':
         specifier: workspace:*
         version: link:../ui-babel-preset
-      '@instructure/ui-themes':
-        specifier: workspace:*
-        version: link:../ui-themes
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.9.1