@instructure/emotion 11.7.4-snapshot-98 → 11.7.4-snapshot-101

package/CHANGELOG.md

@@ -3,11 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.4-snapshot-98](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-98) (2026-07-14)
+## [11.7.4-snapshot-101](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-101) (2026-07-14)
+
+
+### Bug Fixes
+
+* **emotion:** propagate resolved component theme override to wrapped component ([446e820](https://github.com/instructure/instructure-ui/commit/446e8205cb7eb8282af565530d5f82a9f2355dfa))
 
 
 ### Features
 
+* **emotion,ui-scripts:** resolve tokens studio color modifiers and emit hex ([99141c0](https://github.com/instructure/instructure-ui/commit/99141c036c6a353c25200c57e2cd68a1bc1b8205))
 * **emotion:** support alpha color modifier in applyColorModifiers ([c1643b3](https://github.com/instructure/instructure-ui/commit/c1643b3de2f0be084a042d8fd9478b963907da77))
 * **ui-scripts:** refactor theme type generation and fix token fetching script ([ab0536f](https://github.com/instructure/instructure-ui/commit/ab0536f81ffe9ae60f8b8cdc5038f4f323314416))
 

package/es/styleUtils/applyColorModifiers.js

@@ -21,16 +21,14 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { colorToHsla } from '@instructure/ui-color-utils';
+import { colorToHsla, color2hex, colorToHex8 } from '@instructure/ui-color-utils';
 // Matches Tokens Studio's HSL modifier math: move L by `amount` (0–1) of the
 // remaining distance toward the endpoint, so the step shrinks as it approaches
 // black/white and never overshoots.
 const modifyLightness = (l, amount, type) => type === 'darken' ? Math.max(0, l - l * amount) : Math.min(1, l + (1 - l) * amount);
-const formatHsla = (h, s, l, a) => {
-  const hh = Math.round(h);
-  const ss = +(s * 100).toFixed(2);
-  const ll = +(l * 100).toFixed(2);
-  return a < 1 ? `hsla(${hh}, ${ss}%, ${ll}%, ${a})` : `hsl(${hh}, ${ss}%, ${ll}%)`;
+const formatColor = (h, s, l, a) => {
+  const hsla = `hsla(${Math.round(h)}, ${+(s * 100).toFixed(2)}%, ${+(l * 100).toFixed(2)}%, ${a})`;
+  return a < 1 ? colorToHex8(hsla) : color2hex(hsla);
 };
 const isModifyColor = val => typeof val === 'object' && val !== null && typeof val.value === 'string' && typeof val.modify === 'object' && val.modify !== null;
 const resolveModifyColor = ({
@@ -45,7 +43,7 @@ const resolveModifyColor = ({
       a
     } = colorToHsla(value);
     const newL = modifyLightness(l, modify.value, modify.type);
-    return formatHsla(h, s, newL, a);
+    return formatColor(h, s, newL, a);
   }
   if (modify.type === 'alpha') {
     const {
@@ -54,7 +52,7 @@ const resolveModifyColor = ({
       l
     } = colorToHsla(value);
     const newA = Math.min(1, Math.max(0, Number(modify.value)));
-    return formatHsla(h, s, l, newA);
+    return formatColor(h, s, l, newA);
   }
   return value;
 };

package/es/useComputedTheme.js

@@ -23,6 +23,7 @@
  */
 
 import { useTheme } from '@emotion/react';
+import { applyColorModifiers } from './styleUtils/applyColorModifiers.js';
 
 /**
  * ---
@@ -42,12 +43,12 @@ import { useTheme } from '@emotion/react';
 export const useComputedTheme = () => {
   const rawTheme = useTheme().newTheme;
   const primitives = rawTheme?.primitives;
-  const semantics = rawTheme?.semantics?.(primitives);
-  const components = Object.keys(rawTheme?.components).reduce((acc, component) => ({
+  const semantics = applyColorModifiers(rawTheme?.semantics?.(primitives));
+  const components = applyColorModifiers(Object.keys(rawTheme?.components).reduce((acc, component) => ({
     ...acc,
     [component]: rawTheme.components[component]?.(semantics)
-  }), {});
-  const sharedTokens = rawTheme?.sharedTokens?.(semantics);
+  }), {}));
+  const sharedTokens = applyColorModifiers(rawTheme?.sharedTokens?.(semantics));
   return {
     primitives,
     semantics,

package/es/useStyleNew.js

@@ -62,10 +62,10 @@ const useStyleNew = useStyleParams => {
   const primitiveOverrides = themeOverrideFromProvider?.primitives;
   const semanticsOverrides = themeOverrideFromProvider?.semantics;
   const sharedTokensOverrides = themeOverrideFromProvider?.sharedTokens;
-  const componentOverridesFromSettingsProvider = themeOverrideFromProvider?.components?.[componentWithTokensId];
+  const componentOverridesFromSettingsProvider = themeOverrideFromProvider?.components?.[componentId];
   const primitives = mergeDeep(theme.newTheme.primitives, primitiveOverrides);
-  const semantics = mergeDeep(theme.newTheme.semantics?.(primitives), semanticsOverrides);
-  const sharedTokens = mergeDeep(theme.newTheme.sharedTokens?.(semantics), sharedTokensOverrides);
+  const semantics = applyColorModifiers(mergeDeep(theme.newTheme.semantics?.(primitives), semanticsOverrides));
+  const sharedTokens = applyColorModifiers(mergeDeep(theme.newTheme.sharedTokens?.(semantics), sharedTokensOverrides));
   const baseComponentTheme = applyColorModifiers(generateComponentTheme ? generateComponentTheme({
     primitives,
     semantics,

package/es/withStyleNew.js

@@ -71,7 +71,8 @@ const defaultValues = {
  */
 const withStyleNew = decorator((ComposedComponent, generateStyle, useTokensFrom, frozenTheme, generateComponentTheme) => {
   const displayName = ComposedComponent.displayName || ComposedComponent.name;
-  const componentId = useTokensFrom ?? ComposedComponent.componentId?.replace('.', '');
+  const rawComponentId = ComposedComponent.componentId?.replace('.', '');
+  const componentId = useTokensFrom ?? rawComponentId;
   const WithStyle = /*#__PURE__*/forwardRef((props, ref) => {
     const themeInContext = useTheme();
     const themeKey = themeInContext.key;
@@ -103,11 +104,11 @@ const withStyleNew = decorator((ComposedComponent, generateStyle, useTokensFrom,
     const primitiveOverrides = themeOverride?.primitives;
     const semanticsOverrides = themeOverride?.semantics;
     const sharedTokensOverrides = themeOverride?.sharedTokens;
-    const componentOverridesFromSettingsProvider = themeOverride?.components?.[componentId];
+    const componentOverridesFromSettingsProvider = themeOverride?.components?.[rawComponentId] ?? {};
     const componentOverridesFromThemeOverrideProp = componentProps.themeOverride;
     const primitives = mergeDeep(theme.newTheme.primitives, primitiveOverrides);
-    const semantics = mergeDeep(theme.newTheme.semantics?.(primitives), semanticsOverrides);
-    const sharedTokens = mergeDeep(theme.newTheme.sharedTokens?.(semantics), sharedTokensOverrides);
+    const semantics = applyColorModifiers(mergeDeep(theme.newTheme.semantics?.(primitives), semanticsOverrides));
+    const sharedTokens = applyColorModifiers(mergeDeep(theme.newTheme.sharedTokens?.(semantics), sharedTokensOverrides));
     // Note: Some components do not have a theme, e.g., FormFieldMessages
     const baseComponentTheme = applyColorModifiers(generateComponentTheme ? generateComponentTheme({
       primitives,
@@ -115,9 +116,11 @@ const withStyleNew = decorator((ComposedComponent, generateStyle, useTokensFrom,
       sharedTokens
     }) : theme.newTheme.components[componentId]?.(semantics));
     const componentThemeFromSettingsProvider = mergeDeep(baseComponentTheme, componentOverridesFromSettingsProvider);
+    const resolvedComponentOverrideFromThemeOverrideProp = (typeof componentOverridesFromThemeOverrideProp === 'function' ? componentOverridesFromThemeOverrideProp(componentThemeFromSettingsProvider, themeInContext) : componentOverridesFromThemeOverrideProp) ?? {};
     const componentTheme = mergeDeep(componentThemeFromSettingsProvider,
     // @ts-ignore TODO-theme-types: fix typing
-    typeof componentOverridesFromThemeOverrideProp === 'function' ? componentOverridesFromThemeOverrideProp(componentThemeFromSettingsProvider, themeInContext) : componentOverridesFromThemeOverrideProp);
+    resolvedComponentOverrideFromThemeOverrideProp);
+    const derivedComponentOverride = mergeDeep(componentOverridesFromSettingsProvider, resolvedComponentOverrideFromThemeOverrideProp);
 
     // TODO do not call here generateStyle, it does not receive the extraArgs
     const [styles, setStyles] = useState(generateStyle ?
@@ -135,7 +138,8 @@ const withStyleNew = decorator((ComposedComponent, generateStyle, useTokensFrom,
       ref: ref,
       ...props,
       makeStyles: makeStyleHandler,
-      styles: styles
+      styles: styles,
+      themeOverride: derivedComponentOverride
     });
   });
   hoistNonReactStatics(WithStyle, ComposedComponent);

package/lib/styleUtils/applyColorModifiers.js

@@ -33,11 +33,9 @@ var _uiColorUtils = require("@instructure/ui-color-utils");
 // remaining distance toward the endpoint, so the step shrinks as it approaches
 // black/white and never overshoots.
 const modifyLightness = (l, amount, type) => type === 'darken' ? Math.max(0, l - l * amount) : Math.min(1, l + (1 - l) * amount);
-const formatHsla = (h, s, l, a) => {
-  const hh = Math.round(h);
-  const ss = +(s * 100).toFixed(2);
-  const ll = +(l * 100).toFixed(2);
-  return a < 1 ? `hsla(${hh}, ${ss}%, ${ll}%, ${a})` : `hsl(${hh}, ${ss}%, ${ll}%)`;
+const formatColor = (h, s, l, a) => {
+  const hsla = `hsla(${Math.round(h)}, ${+(s * 100).toFixed(2)}%, ${+(l * 100).toFixed(2)}%, ${a})`;
+  return a < 1 ? (0, _uiColorUtils.colorToHex8)(hsla) : (0, _uiColorUtils.color2hex)(hsla);
 };
 const isModifyColor = val => typeof val === 'object' && val !== null && typeof val.value === 'string' && typeof val.modify === 'object' && val.modify !== null;
 const resolveModifyColor = ({
@@ -52,7 +50,7 @@ const resolveModifyColor = ({
       a
     } = (0, _uiColorUtils.colorToHsla)(value);
     const newL = modifyLightness(l, modify.value, modify.type);
-    return formatHsla(h, s, newL, a);
+    return formatColor(h, s, newL, a);
   }
   if (modify.type === 'alpha') {
     const {
@@ -61,7 +59,7 @@ const resolveModifyColor = ({
       l
     } = (0, _uiColorUtils.colorToHsla)(value);
     const newA = Math.min(1, Math.max(0, Number(modify.value)));
-    return formatHsla(h, s, l, newA);
+    return formatColor(h, s, l, newA);
   }
   return value;
 };

package/lib/useComputedTheme.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useComputedTheme = void 0;
 var _react = require("@emotion/react");
+var _applyColorModifiers = require("./styleUtils/applyColorModifiers.js");
 /*
  * The MIT License (MIT)
  *
@@ -47,12 +48,12 @@ var _react = require("@emotion/react");
 const useComputedTheme = () => {
   const rawTheme = (0, _react.useTheme)().newTheme;
   const primitives = rawTheme?.primitives;
-  const semantics = rawTheme?.semantics?.(primitives);
-  const components = Object.keys(rawTheme?.components).reduce((acc, component) => ({
+  const semantics = (0, _applyColorModifiers.applyColorModifiers)(rawTheme?.semantics?.(primitives));
+  const components = (0, _applyColorModifiers.applyColorModifiers)(Object.keys(rawTheme?.components).reduce((acc, component) => ({
     ...acc,
     [component]: rawTheme.components[component]?.(semantics)
-  }), {});
-  const sharedTokens = rawTheme?.sharedTokens?.(semantics);
+  }), {}));
+  const sharedTokens = (0, _applyColorModifiers.applyColorModifiers)(rawTheme?.sharedTokens?.(semantics));
   return {
     primitives,
     semantics,

package/lib/useStyleNew.js

@@ -67,10 +67,10 @@ const useStyleNew = useStyleParams => {
   const primitiveOverrides = themeOverrideFromProvider?.primitives;
   const semanticsOverrides = themeOverrideFromProvider?.semantics;
   const sharedTokensOverrides = themeOverrideFromProvider?.sharedTokens;
-  const componentOverridesFromSettingsProvider = themeOverrideFromProvider?.components?.[componentWithTokensId];
+  const componentOverridesFromSettingsProvider = themeOverrideFromProvider?.components?.[componentId];
   const primitives = (0, _mergeDeep.mergeDeep)(theme.newTheme.primitives, primitiveOverrides);
-  const semantics = (0, _mergeDeep.mergeDeep)(theme.newTheme.semantics?.(primitives), semanticsOverrides);
-  const sharedTokens = (0, _mergeDeep.mergeDeep)(theme.newTheme.sharedTokens?.(semantics), sharedTokensOverrides);
+  const semantics = (0, _applyColorModifiers.applyColorModifiers)((0, _mergeDeep.mergeDeep)(theme.newTheme.semantics?.(primitives), semanticsOverrides));
+  const sharedTokens = (0, _applyColorModifiers.applyColorModifiers)((0, _mergeDeep.mergeDeep)(theme.newTheme.sharedTokens?.(semantics), sharedTokensOverrides));
   const baseComponentTheme = (0, _applyColorModifiers.applyColorModifiers)(generateComponentTheme ? generateComponentTheme({
     primitives,
     semantics,

package/lib/withStyleNew.js

@@ -79,7 +79,8 @@ const defaultValues = {
  */
 const withStyleNew = exports.withStyleNew = (0, _decorator.decorator)((ComposedComponent, generateStyle, useTokensFrom, frozenTheme, generateComponentTheme) => {
   const displayName = ComposedComponent.displayName || ComposedComponent.name;
-  const componentId = useTokensFrom ?? ComposedComponent.componentId?.replace('.', '');
+  const rawComponentId = ComposedComponent.componentId?.replace('.', '');
+  const componentId = useTokensFrom ?? rawComponentId;
   const WithStyle = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     const themeInContext = (0, _useTheme.useTheme)();
     const themeKey = themeInContext.key;
@@ -111,11 +112,11 @@ const withStyleNew = exports.withStyleNew = (0, _decorator.decorator)((ComposedC
     const primitiveOverrides = themeOverride?.primitives;
     const semanticsOverrides = themeOverride?.semantics;
     const sharedTokensOverrides = themeOverride?.sharedTokens;
-    const componentOverridesFromSettingsProvider = themeOverride?.components?.[componentId];
+    const componentOverridesFromSettingsProvider = themeOverride?.components?.[rawComponentId] ?? {};
     const componentOverridesFromThemeOverrideProp = componentProps.themeOverride;
     const primitives = (0, _mergeDeep.mergeDeep)(theme.newTheme.primitives, primitiveOverrides);
-    const semantics = (0, _mergeDeep.mergeDeep)(theme.newTheme.semantics?.(primitives), semanticsOverrides);
-    const sharedTokens = (0, _mergeDeep.mergeDeep)(theme.newTheme.sharedTokens?.(semantics), sharedTokensOverrides);
+    const semantics = (0, _applyColorModifiers.applyColorModifiers)((0, _mergeDeep.mergeDeep)(theme.newTheme.semantics?.(primitives), semanticsOverrides));
+    const sharedTokens = (0, _applyColorModifiers.applyColorModifiers)((0, _mergeDeep.mergeDeep)(theme.newTheme.sharedTokens?.(semantics), sharedTokensOverrides));
     // Note: Some components do not have a theme, e.g., FormFieldMessages
     const baseComponentTheme = (0, _applyColorModifiers.applyColorModifiers)(generateComponentTheme ? generateComponentTheme({
       primitives,
@@ -123,9 +124,11 @@ const withStyleNew = exports.withStyleNew = (0, _decorator.decorator)((ComposedC
       sharedTokens
     }) : theme.newTheme.components[componentId]?.(semantics));
     const componentThemeFromSettingsProvider = (0, _mergeDeep.mergeDeep)(baseComponentTheme, componentOverridesFromSettingsProvider);
+    const resolvedComponentOverrideFromThemeOverrideProp = (typeof componentOverridesFromThemeOverrideProp === 'function' ? componentOverridesFromThemeOverrideProp(componentThemeFromSettingsProvider, themeInContext) : componentOverridesFromThemeOverrideProp) ?? {};
     const componentTheme = (0, _mergeDeep.mergeDeep)(componentThemeFromSettingsProvider,
     // @ts-ignore TODO-theme-types: fix typing
-    typeof componentOverridesFromThemeOverrideProp === 'function' ? componentOverridesFromThemeOverrideProp(componentThemeFromSettingsProvider, themeInContext) : componentOverridesFromThemeOverrideProp);
+    resolvedComponentOverrideFromThemeOverrideProp);
+    const derivedComponentOverride = (0, _mergeDeep.mergeDeep)(componentOverridesFromSettingsProvider, resolvedComponentOverrideFromThemeOverrideProp);
 
     // TODO do not call here generateStyle, it does not receive the extraArgs
     const [styles, setStyles] = (0, _react.useState)(generateStyle ?
@@ -143,7 +146,8 @@ const withStyleNew = exports.withStyleNew = (0, _decorator.decorator)((ComposedC
       ref: ref,
       ...props,
       makeStyles: makeStyleHandler,
-      styles: styles
+      styles: styles,
+      themeOverride: derivedComponentOverride
     });
   });
   (0, _hoistNonReactStatics.default)(WithStyle, ComposedComponent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/emotion",
-  "version": "11.7.4-snapshot-98",
+  "version": "11.7.4-snapshot-101",
   "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.29.7",
     "@emotion/react": "^11",
     "hoist-non-react-statics": "^3.3.2",
-    "@instructure/console": "11.7.4-snapshot-98",
-    "@instructure/shared-types": "11.7.4-snapshot-98",
-    "@instructure/ui-color-utils": "11.7.4-snapshot-98",
-    "@instructure/ui-decorator": "11.7.4-snapshot-98",
-    "@instructure/ui-i18n": "11.7.4-snapshot-98",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-98",
-    "@instructure/ui-themes": "11.7.4-snapshot-98",
-    "@instructure/ui-utils": "11.7.4-snapshot-98"
+    "@instructure/ui-color-utils": "11.7.4-snapshot-101",
+    "@instructure/ui-decorator": "11.7.4-snapshot-101",
+    "@instructure/ui-i18n": "11.7.4-snapshot-101",
+    "@instructure/shared-types": "11.7.4-snapshot-101",
+    "@instructure/console": "11.7.4-snapshot-101",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-101",
+    "@instructure/ui-themes": "11.7.4-snapshot-101",
+    "@instructure/ui-utils": "11.7.4-snapshot-101"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -33,7 +33,7 @@
     "@types/hoist-non-react-statics": "^3.3.7",
     "react-dom": "18.3.1",
     "vitest": "^4.1.9",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-98"
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-101"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/styleUtils/applyColorModifiers.ts

@@ -21,7 +21,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { colorToHsla } from '@instructure/ui-color-utils'
+import {
+  colorToHsla,
+  color2hex,
+  colorToHex8
+} from '@instructure/ui-color-utils'
 
 type ModifyColor = {
   value: string
@@ -43,13 +47,11 @@ const modifyLightness = (
     ? Math.max(0, l - l * amount)
     : Math.min(1, l + (1 - l) * amount)
 
-const formatHsla = (h: number, s: number, l: number, a: number): string => {
-  const hh = Math.round(h)
-  const ss = +(s * 100).toFixed(2)
-  const ll = +(l * 100).toFixed(2)
-  return a < 1
-    ? `hsla(${hh}, ${ss}%, ${ll}%, ${a})`
-    : `hsl(${hh}, ${ss}%, ${ll}%)`
+const formatColor = (h: number, s: number, l: number, a: number): string => {
+  const hsla = `hsla(${Math.round(h)}, ${+(s * 100).toFixed(2)}%, ${+(
+    l * 100
+  ).toFixed(2)}%, ${a})`
+  return a < 1 ? colorToHex8(hsla) : color2hex(hsla)
 }
 
 const isModifyColor = (val: unknown): val is ModifyColor =>
@@ -63,12 +65,12 @@ const resolveModifyColor = ({ value, modify }: ModifyColor): string => {
   if (modify.type === 'darken' || modify.type === 'lighten') {
     const { h, s, l, a } = colorToHsla(value)
     const newL = modifyLightness(l, modify.value, modify.type)
-    return formatHsla(h, s, newL, a)
+    return formatColor(h, s, newL, a)
   }
   if (modify.type === 'alpha') {
     const { h, s, l } = colorToHsla(value)
     const newA = Math.min(1, Math.max(0, Number(modify.value)))
-    return formatHsla(h, s, l, newA)
+    return formatColor(h, s, l, newA)
   }
   return value
 }

package/src/useComputedTheme.ts

@@ -23,6 +23,7 @@
  */
 
 import { useTheme } from '@emotion/react'
+import { applyColorModifiers } from './styleUtils/applyColorModifiers.js'
 
 /**
  * ---
@@ -40,23 +41,25 @@ import { useTheme } from '@emotion/react'
  *          `components` and `sharedTokens` of the current theme.
  */
 export const useComputedTheme = () => {
-    const rawTheme = (useTheme() as any).newTheme
+  const rawTheme = (useTheme() as any).newTheme
 
-    const primitives = rawTheme?.primitives
-    const semantics = rawTheme?.semantics?.(primitives)
-    const components = Object.keys(rawTheme?.components).reduce(
-        (acc, component) => ({
-            ...acc,
-            [component]: rawTheme.components[component]?.(semantics)
-        }),
-        {}
+  const primitives = rawTheme?.primitives
+  const semantics = applyColorModifiers(rawTheme?.semantics?.(primitives))
+  const components = applyColorModifiers(
+    Object.keys(rawTheme?.components).reduce(
+      (acc, component) => ({
+        ...acc,
+        [component]: rawTheme.components[component]?.(semantics)
+      }),
+      {}
     )
-    const sharedTokens = rawTheme?.sharedTokens?.(semantics)
+  )
+  const sharedTokens = applyColorModifiers(rawTheme?.sharedTokens?.(semantics))
 
-    return {
-        primitives,
-        semantics,
-        components,
-        sharedTokens
-    }
-}
+  return {
+    primitives,
+    semantics,
+    components,
+    sharedTokens
+  }
+}

package/src/useStyleNew.ts

@@ -108,18 +108,21 @@ const useStyleNew = <
   const semanticsOverrides = themeOverrideFromProvider?.semantics
   const sharedTokensOverrides = themeOverrideFromProvider?.sharedTokens
   const componentOverridesFromSettingsProvider =
-    themeOverrideFromProvider?.components?.[componentWithTokensId]
+    themeOverrideFromProvider?.components?.[
+      componentId as keyof NewComponentTypes
+    ]
 
   const primitives = mergeDeep(theme.newTheme.primitives, primitiveOverrides!)
 
-  const semantics = mergeDeep(
-    theme.newTheme.semantics?.(primitives),
-    semanticsOverrides!
+  const semantics = applyColorModifiers(
+    mergeDeep(theme.newTheme.semantics?.(primitives), semanticsOverrides!)
   )
 
-  const sharedTokens = mergeDeep(
-    theme.newTheme.sharedTokens?.(semantics),
-    sharedTokensOverrides as Record<string, unknown>
+  const sharedTokens = applyColorModifiers(
+    mergeDeep(
+      theme.newTheme.sharedTokens?.(semantics),
+      sharedTokensOverrides as Record<string, unknown>
+    )
   )
 
   const baseComponentTheme = applyColorModifiers(

package/src/withStyleNew.tsx

@@ -132,8 +132,10 @@ const withStyleNew = decorator(
   ) => {
     const displayName = ComposedComponent.displayName || ComposedComponent.name
 
-    const componentId: keyof NewComponentTypes =
-      useTokensFrom ?? ComposedComponent.componentId?.replace('.', '')
+    const rawComponentId: keyof NewComponentTypes =
+      ComposedComponent.componentId?.replace('.', '')
+
+    const componentId: keyof NewComponentTypes = useTokensFrom ?? rawComponentId
 
     const WithStyle: ForwardRefExoticComponent<
       PropsWithoutRef<Props> & RefAttributes<any>
@@ -188,7 +190,7 @@ const withStyleNew = decorator(
       const semanticsOverrides = themeOverride?.semantics
       const sharedTokensOverrides = themeOverride?.sharedTokens
       const componentOverridesFromSettingsProvider =
-        themeOverride?.components?.[componentId]
+        themeOverride?.components?.[rawComponentId] ?? {}
       const componentOverridesFromThemeOverrideProp = (
         componentProps as ThemeOverrideProp
       ).themeOverride
@@ -198,14 +200,15 @@ const withStyleNew = decorator(
         primitiveOverrides!
       )
 
-      const semantics = mergeDeep(
-        theme.newTheme.semantics?.(primitives),
-        semanticsOverrides!
+      const semantics = applyColorModifiers(
+        mergeDeep(theme.newTheme.semantics?.(primitives), semanticsOverrides!)
       )
 
-      const sharedTokens = mergeDeep(
-        theme.newTheme.sharedTokens?.(semantics),
-        sharedTokensOverrides as Record<string, unknown>
+      const sharedTokens = applyColorModifiers(
+        mergeDeep(
+          theme.newTheme.sharedTokens?.(semantics),
+          sharedTokensOverrides as Record<string, unknown>
+        )
       ) as SharedTokens
       // Note: Some components do not have a theme, e.g., FormFieldMessages
       const baseComponentTheme = applyColorModifiers(
@@ -222,15 +225,23 @@ const withStyleNew = decorator(
         componentOverridesFromSettingsProvider as Record<string, unknown>
       )
 
-      const componentTheme = mergeDeep(
-        componentThemeFromSettingsProvider,
-        // @ts-ignore TODO-theme-types: fix typing
-        typeof componentOverridesFromThemeOverrideProp === 'function'
+      const resolvedComponentOverrideFromThemeOverrideProp =
+        (typeof componentOverridesFromThemeOverrideProp === 'function'
           ? componentOverridesFromThemeOverrideProp(
               componentThemeFromSettingsProvider,
               themeInContext
             )
-          : componentOverridesFromThemeOverrideProp
+          : componentOverridesFromThemeOverrideProp) ?? {}
+
+      const componentTheme = mergeDeep(
+        componentThemeFromSettingsProvider,
+        // @ts-ignore TODO-theme-types: fix typing
+        resolvedComponentOverrideFromThemeOverrideProp
+      )
+
+      const derivedComponentOverride = mergeDeep(
+        componentOverridesFromSettingsProvider,
+        resolvedComponentOverrideFromThemeOverrideProp
       )
 
       // TODO do not call here generateStyle, it does not receive the extraArgs
@@ -260,6 +271,7 @@ const withStyleNew = decorator(
           {...props}
           makeStyles={makeStyleHandler}
           styles={styles}
+          themeOverride={derivedComponentOverride}
         />
       )
     })