@instructure/emotion 11.7.3-snapshot-4 → 11.7.3-snapshot-7

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.3-snapshot-4](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-4) (2026-04-28)
+## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
 
 **Note:** Version bump only for package @instructure/emotion
 

package/es/InstUISettingsProvider/index.js

@@ -52,7 +52,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 = _jsx(DeterministicIdContextProvider, {
     instanceCounterMap: instanceCounterMap,
     children: _jsx(ThemeProvider, {

package/es/getTheme.js

@@ -35,7 +35,10 @@ import { isBaseTheme, mergeDeep } from '@instructure/ui-utils';
  * 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`

package/es/useStyle.js

@@ -27,13 +27,8 @@ import { mergeDeep } from '@instructure/ui-utils';
 // returns the second parameter of a function
 
 /**
- * Type for a theme override
+ * new useStyle syntax, use this with v11.7+ themes
  */
-
-/**
- * new useStyle syntax, use this with v12 themes
- */
-
 // TODO: improve useStyle to handle generateStyle functions that don't
 // have a theme.
 const useStyle = useStyleParams => {
@@ -50,18 +45,14 @@ const useStyle = useStyleParams => {
   // resolving the theming functions and applying the overrides
   const primitiveOverrides = themeOverrideFromProvider === null || themeOverrideFromProvider === void 0 ? void 0 : themeOverrideFromProvider.primitives;
   const semanticsOverrides = themeOverrideFromProvider === null || themeOverrideFromProvider === void 0 ? void 0 : themeOverrideFromProvider.semantics;
-  // @ts-ignore TODO-theme-types: fix typing
   const sharedTokensOverrides = themeOverrideFromProvider === null || themeOverrideFromProvider === void 0 ? void 0 : themeOverrideFromProvider.sharedTokens;
-  const componentOverridesFromSettingsProvider = // @ts-ignore TODO-theme-types: fix typing
-  themeOverrideFromProvider === null || themeOverrideFromProvider === void 0 ? void 0 : (_themeOverrideFromPro = themeOverrideFromProvider.components) === null || _themeOverrideFromPro === void 0 ? void 0 : _themeOverrideFromPro[componentWithTokensId];
+  const componentOverridesFromSettingsProvider = themeOverrideFromProvider === null || themeOverrideFromProvider === void 0 ? void 0 : (_themeOverrideFromPro = themeOverrideFromProvider.components) === null || _themeOverrideFromPro === void 0 ? void 0 : _themeOverrideFromPro[componentWithTokensId];
   const primitives = mergeDeep(themeInContext.newTheme.primitives, primitiveOverrides);
   const semantics = mergeDeep((_themeInContext$newTh = (_themeInContext$newTh2 = themeInContext.newTheme).semantics) === null || _themeInContext$newTh === void 0 ? void 0 : _themeInContext$newTh.call(_themeInContext$newTh2, primitives), semanticsOverrides);
   const sharedTokens = mergeDeep((_themeInContext$newTh3 = (_themeInContext$newTh4 = themeInContext.newTheme).sharedTokens) === null || _themeInContext$newTh3 === void 0 ? void 0 : _themeInContext$newTh3.call(_themeInContext$newTh4, semantics), sharedTokensOverrides);
   const baseComponentTheme = (_themeInContext$newTh5 = (_themeInContext$newTh6 = themeInContext.newTheme.components)[componentWithTokensId]) === null || _themeInContext$newTh5 === void 0 ? void 0 : _themeInContext$newTh5.call(_themeInContext$newTh6, semantics);
   const componentThemeFromSettingsProvider = mergeDeep(baseComponentTheme, componentOverridesFromSettingsProvider);
-  const componentTheme = mergeDeep(componentThemeFromSettingsProvider,
-  // @ts-ignore TODO-theme-types: fix typing
-  typeof themeOverride === 'function' ? themeOverride(componentThemeFromSettingsProvider, themeInContext) : themeOverride);
+  const componentTheme = mergeDeep(componentThemeFromSettingsProvider, typeof themeOverride === 'function' ? themeOverride(componentThemeFromSettingsProvider, themeInContext) : themeOverride);
 
   // @ts-ignore TODO-theme-types: fix typing
   return generateStyle(componentTheme, params, sharedTokens);

package/es/withStyle.js

@@ -127,14 +127,13 @@ const withStyle = decorator((ComposedComponent, generateStyle, useTokensFrom, fr
     // resolving the theming functions and applying the overrides
     const primitiveOverrides = themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.primitives;
     const semanticsOverrides = themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.semantics;
-    // @ts-ignore TODO-theme-types: fix typing
     const sharedTokensOverrides = themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.sharedTokens;
-    const componentOverridesFromSettingsProvider = // @ts-ignore TODO-theme-types: fix typing
-    themeOverride === null || themeOverride === void 0 ? void 0 : (_themeOverride$compon = themeOverride.components) === null || _themeOverride$compon === void 0 ? void 0 : _themeOverride$compon[componentId];
+    const componentOverridesFromSettingsProvider = themeOverride === null || themeOverride === void 0 ? void 0 : (_themeOverride$compon = themeOverride.components) === null || _themeOverride$compon === void 0 ? void 0 : _themeOverride$compon[componentId];
     const componentOverridesFromThemeOverrideProp = componentProps.themeOverride;
     const primitives = mergeDeep(theme.newTheme.primitives, primitiveOverrides);
     const semantics = mergeDeep((_theme$newTheme$seman = (_theme$newTheme = theme.newTheme).semantics) === null || _theme$newTheme$seman === void 0 ? void 0 : _theme$newTheme$seman.call(_theme$newTheme, primitives), semanticsOverrides);
     const sharedTokens = mergeDeep((_theme$newTheme$share = (_theme$newTheme2 = theme.newTheme).sharedTokens) === null || _theme$newTheme$share === void 0 ? void 0 : _theme$newTheme$share.call(_theme$newTheme2, semantics), sharedTokensOverrides);
+    // Note: Some components do not have a theme, e.g., FormFieldMessages
     const baseComponentTheme = (_theme$newTheme$compo = (_theme$newTheme$compo2 = theme.newTheme.components)[componentId]) === null || _theme$newTheme$compo === void 0 ? void 0 : _theme$newTheme$compo.call(_theme$newTheme$compo2, semantics);
     const componentThemeFromSettingsProvider = mergeDeep(baseComponentTheme, componentOverridesFromSettingsProvider);
     const componentTheme = mergeDeep(componentThemeFromSettingsProvider,

package/lib/InstUISettingsProvider/index.js

@@ -59,7 +59,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 = (0, _jsxRuntime.jsx)(_DeterministicIdContextProvider.DeterministicIdContextProvider, {
     instanceCounterMap: instanceCounterMap,
     children: (0, _jsxRuntime.jsx)(_react2.ThemeProvider, {

package/lib/getTheme.js

@@ -44,7 +44,10 @@ var _mergeDeep = require("@instructure/ui-utils/lib/mergeDeep.js");
  * 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`

package/lib/useStyle.js

@@ -33,13 +33,8 @@ var _mergeDeep = require("@instructure/ui-utils/lib/mergeDeep.js");
 // returns the second parameter of a function
 
 /**
- * Type for a theme override
+ * new useStyle syntax, use this with v11.7+ themes
  */
-
-/**
- * new useStyle syntax, use this with v12 themes
- */
-
 // TODO: improve useStyle to handle generateStyle functions that don't
 // have a theme.
 const useStyle = useStyleParams => {
@@ -56,18 +51,14 @@ const useStyle = useStyleParams => {
   // resolving the theming functions and applying the overrides
   const primitiveOverrides = themeOverrideFromProvider === null || themeOverrideFromProvider === void 0 ? void 0 : themeOverrideFromProvider.primitives;
   const semanticsOverrides = themeOverrideFromProvider === null || themeOverrideFromProvider === void 0 ? void 0 : themeOverrideFromProvider.semantics;
-  // @ts-ignore TODO-theme-types: fix typing
   const sharedTokensOverrides = themeOverrideFromProvider === null || themeOverrideFromProvider === void 0 ? void 0 : themeOverrideFromProvider.sharedTokens;
-  const componentOverridesFromSettingsProvider = // @ts-ignore TODO-theme-types: fix typing
-  themeOverrideFromProvider === null || themeOverrideFromProvider === void 0 ? void 0 : (_themeOverrideFromPro = themeOverrideFromProvider.components) === null || _themeOverrideFromPro === void 0 ? void 0 : _themeOverrideFromPro[componentWithTokensId];
+  const componentOverridesFromSettingsProvider = themeOverrideFromProvider === null || themeOverrideFromProvider === void 0 ? void 0 : (_themeOverrideFromPro = themeOverrideFromProvider.components) === null || _themeOverrideFromPro === void 0 ? void 0 : _themeOverrideFromPro[componentWithTokensId];
   const primitives = (0, _mergeDeep.mergeDeep)(themeInContext.newTheme.primitives, primitiveOverrides);
   const semantics = (0, _mergeDeep.mergeDeep)((_themeInContext$newTh = (_themeInContext$newTh2 = themeInContext.newTheme).semantics) === null || _themeInContext$newTh === void 0 ? void 0 : _themeInContext$newTh.call(_themeInContext$newTh2, primitives), semanticsOverrides);
   const sharedTokens = (0, _mergeDeep.mergeDeep)((_themeInContext$newTh3 = (_themeInContext$newTh4 = themeInContext.newTheme).sharedTokens) === null || _themeInContext$newTh3 === void 0 ? void 0 : _themeInContext$newTh3.call(_themeInContext$newTh4, semantics), sharedTokensOverrides);
   const baseComponentTheme = (_themeInContext$newTh5 = (_themeInContext$newTh6 = themeInContext.newTheme.components)[componentWithTokensId]) === null || _themeInContext$newTh5 === void 0 ? void 0 : _themeInContext$newTh5.call(_themeInContext$newTh6, semantics);
   const componentThemeFromSettingsProvider = (0, _mergeDeep.mergeDeep)(baseComponentTheme, componentOverridesFromSettingsProvider);
-  const componentTheme = (0, _mergeDeep.mergeDeep)(componentThemeFromSettingsProvider,
-  // @ts-ignore TODO-theme-types: fix typing
-  typeof themeOverride === 'function' ? themeOverride(componentThemeFromSettingsProvider, themeInContext) : themeOverride);
+  const componentTheme = (0, _mergeDeep.mergeDeep)(componentThemeFromSettingsProvider, typeof themeOverride === 'function' ? themeOverride(componentThemeFromSettingsProvider, themeInContext) : themeOverride);
 
   // @ts-ignore TODO-theme-types: fix typing
   return generateStyle(componentTheme, params, sharedTokens);

package/lib/withStyle.js

@@ -138,14 +138,13 @@ const withStyle = exports.withStyle = (0, _decorator.decorator)((ComposedCompone
     // resolving the theming functions and applying the overrides
     const primitiveOverrides = themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.primitives;
     const semanticsOverrides = themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.semantics;
-    // @ts-ignore TODO-theme-types: fix typing
     const sharedTokensOverrides = themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.sharedTokens;
-    const componentOverridesFromSettingsProvider = // @ts-ignore TODO-theme-types: fix typing
-    themeOverride === null || themeOverride === void 0 ? void 0 : (_themeOverride$compon = themeOverride.components) === null || _themeOverride$compon === void 0 ? void 0 : _themeOverride$compon[componentId];
+    const componentOverridesFromSettingsProvider = themeOverride === null || themeOverride === void 0 ? void 0 : (_themeOverride$compon = themeOverride.components) === null || _themeOverride$compon === void 0 ? void 0 : _themeOverride$compon[componentId];
     const componentOverridesFromThemeOverrideProp = componentProps.themeOverride;
     const primitives = (0, _mergeDeep.mergeDeep)(theme.newTheme.primitives, primitiveOverrides);
     const semantics = (0, _mergeDeep.mergeDeep)((_theme$newTheme$seman = (_theme$newTheme = theme.newTheme).semantics) === null || _theme$newTheme$seman === void 0 ? void 0 : _theme$newTheme$seman.call(_theme$newTheme, primitives), semanticsOverrides);
     const sharedTokens = (0, _mergeDeep.mergeDeep)((_theme$newTheme$share = (_theme$newTheme2 = theme.newTheme).sharedTokens) === null || _theme$newTheme$share === void 0 ? void 0 : _theme$newTheme$share.call(_theme$newTheme2, semantics), sharedTokensOverrides);
+    // Note: Some components do not have a theme, e.g., FormFieldMessages
     const baseComponentTheme = (_theme$newTheme$compo = (_theme$newTheme$compo2 = theme.newTheme.components)[componentId]) === null || _theme$newTheme$compo === void 0 ? void 0 : _theme$newTheme$compo.call(_theme$newTheme$compo2, semantics);
     const componentThemeFromSettingsProvider = (0, _mergeDeep.mergeDeep)(baseComponentTheme, componentOverridesFromSettingsProvider);
     const componentTheme = (0, _mergeDeep.mergeDeep)(componentThemeFromSettingsProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/emotion",
-  "version": "11.7.3-snapshot-4",
+  "version": "11.7.3-snapshot-7",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -17,14 +17,14 @@
     "@babel/runtime": "^7.27.6",
     "@emotion/react": "^11",
     "hoist-non-react-statics": "^3.3.2",
-    "@instructure/console": "11.7.3-snapshot-4",
-    "@instructure/shared-types": "11.7.3-snapshot-4",
-    "@instructure/ui-color-utils": "11.7.3-snapshot-4",
-    "@instructure/ui-i18n": "11.7.3-snapshot-4",
-    "@instructure/ui-decorator": "11.7.3-snapshot-4",
-    "@instructure/ui-react-utils": "11.7.3-snapshot-4",
-    "@instructure/ui-themes": "11.7.3-snapshot-4",
-    "@instructure/ui-utils": "11.7.3-snapshot-4"
+    "@instructure/console": "11.7.3-snapshot-7",
+    "@instructure/ui-color-utils": "11.7.3-snapshot-7",
+    "@instructure/ui-decorator": "11.7.3-snapshot-7",
+    "@instructure/shared-types": "11.7.3-snapshot-7",
+    "@instructure/ui-i18n": "11.7.3-snapshot-7",
+    "@instructure/ui-react-utils": "11.7.3-snapshot-7",
+    "@instructure/ui-themes": "11.7.3-snapshot-7",
+    "@instructure/ui-utils": "11.7.3-snapshot-7"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -32,7 +32,7 @@
     "@testing-library/user-event": "^14.6.1",
     "react-dom": "18.3.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.7.3-snapshot-4"
+    "@instructure/ui-babel-preset": "11.7.3-snapshot-7"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/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 }

package/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

package/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) {

package/src/index.ts

@@ -44,9 +44,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,

package/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 }