@instructure/emotion 11.7.2-snapshot-54 → 11.7.2-snapshot-60

package/CHANGELOG.md

@@ -3,13 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.2-snapshot-54](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-54) (2026-04-23)
+## [11.7.2-snapshot-60](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-60) (2026-04-23)
 
 
 ### Bug Fixes
 
 * **emotion:** fix getShortHandValue not trimming input string ([75eac6f](https://github.com/instructure/instructure-ui/commit/75eac6f122623fe4c7d750fde8739864402ecaaf))
 * **many:** fix doc component previews, update dark theme text and code block styles, and replace old icons ([d4e48d3](https://github.com/instructure/instructure-ui/commit/d4e48d3f739decb13b76c863c8f01685f0788dd6))
+* **ui-scripts,emotion:** fix primitives and semantics override functionality ([d72df52](https://github.com/instructure/instructure-ui/commit/d72df52242fdf5ecd13fa38e19f254da1be9a8dc))
+
+
+### Features
+
+* **many:** fix issues ([9d623ed](https://github.com/instructure/instructure-ui/commit/9d623ed9ba2be49549b625d1e436edc230a4df41))
+* **ui-themes,ui-alerts,emotion:** fix primitives and semantics overrides and add freeze functionlionality to old components ([336fde9](https://github.com/instructure/instructure-ui/commit/336fde9952698eda020db4916f276e8532ed1669))
 
 
 

package/es/InstUISettingsProvider/index.js

@@ -38,15 +38,25 @@ function InstUISettingsProvider({
   children,
   theme = {},
   dir,
-  instanceCounterMap
+  instanceCounterMap,
+  themeOverride
 }) {
   var _process, _process$env, _process2, _process2$env;
   const finalDir = dir || useContext(TextDirectionContext);
   if (typeof process !== 'undefined' && (((_process = process) === null || _process === void 0 ? void 0 : (_process$env = _process.env) === null || _process$env === void 0 ? void 0 : _process$env.NODE_ENV) !== 'production' || ((_process2 = process) === null || _process2 === void 0 ? void 0 : (_process2$env = _process2.env) === null || _process2$env === void 0 ? void 0 : _process2$env.GITHUB_PULL_REQUEST_PREVIEW) === 'true') && finalDir === 'auto') {}
+
+  /**
+   * new pattern: if you want to replace a theme inside an InstUISettingsProvider, provide it via the theme prop. It'll
+   * override everything, replacing the otherwise used theme.
+   * if you want to apply an override, use the themeOverride prop.
+   * 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, {
-      theme: getTheme(theme),
+      theme: getTheme(theme, themeOverride),
       children: _jsx(TextDirectionContext.Provider, {
         value: finalDir,
         children: children

package/es/getTheme.js

@@ -34,13 +34,14 @@ import { isBaseTheme, mergeDeep } from '@instructure/ui-utils';
  * If an override object is given, it returns the ancestor theme and
  * the overrides merged together.
  *
- * @param themeOrOverride - A full theme or an override object
+ * @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
  * @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 = themeOrOverride => (ancestorTheme = {}) => {
-  var _resolvedThemeOrOverr;
+const getTheme = (themeOrLegacyOverride, themeOverride) => (ancestorTheme = {}) => {
+  var _resolvedLegacyThemeO;
   // we need to clone the ancestor theme not to override it
   let currentTheme;
   if (Object.keys(ancestorTheme).length === 0) {
@@ -50,14 +51,18 @@ const getTheme = themeOrOverride => (ancestorTheme = {}) => {
   } else {
     currentTheme = ancestorTheme;
   }
-  let resolvedThemeOrOverride = themeOrOverride;
-  if (typeof resolvedThemeOrOverride === 'function') {
-    resolvedThemeOrOverride = resolvedThemeOrOverride(currentTheme);
-  }
+  const resolvedThemeOverride = typeof themeOverride === 'function' ? themeOverride(currentTheme) : themeOverride;
+  let resolvedLegacyThemeOrOverride = typeof themeOrLegacyOverride === 'function' ? themeOrLegacyOverride(currentTheme) : themeOrLegacyOverride;
   try {
     // If a valid InstUI theme is given, it just returns the theme.
-    if (isBaseTheme(resolvedThemeOrOverride)) {
-      return resolvedThemeOrOverride;
+    // in case of the legacy pattern, it's just a simple replacement, in the new system, overrides should be merged into the new theme. Old overrides will be removed because they may make no sense for a different theme
+    if (isBaseTheme(resolvedLegacyThemeOrOverride)) {
+      return {
+        ...resolvedLegacyThemeOrOverride,
+        ...(resolvedThemeOverride ? {
+          themeOverride: resolvedThemeOverride
+        } : {})
+      };
     }
   } catch {
     var _process3, _process3$env, _process4, _process4$env;
@@ -65,14 +70,16 @@ const getTheme = themeOrOverride => (ancestorTheme = {}) => {
     // We are using this fail-safe here for the non-TS users,
     // because the whole page can break without a theme.
     if (typeof process !== 'undefined' && (((_process3 = process) === null || _process3 === void 0 ? void 0 : (_process3$env = _process3.env) === null || _process3$env === void 0 ? void 0 : _process3$env.NODE_ENV) !== 'production' || ((_process4 = process) === null || _process4 === void 0 ? void 0 : (_process4$env = _process4.env) === null || _process4$env === void 0 ? void 0 : _process4$env.GITHUB_PULL_REQUEST_PREVIEW) === 'true')) {}
-    resolvedThemeOrOverride = {};
+    resolvedLegacyThemeOrOverride = {};
   }
   const themeName = currentTheme.key;
 
-  // we pick the overrides for the current theme from the override object
-  const specificOverrides = (_resolvedThemeOrOverr = resolvedThemeOrOverride) === null || _resolvedThemeOrOverr === void 0 ? void 0 : _resolvedThemeOrOverr.themeOverrides;
+  // legacy: we pick the overrides for the current theme from the override object
+  const specificOverrides = (_resolvedLegacyThemeO = resolvedLegacyThemeOrOverride) === null || _resolvedLegacyThemeO === void 0 ? void 0 : _resolvedLegacyThemeO.themeOverrides;
   const currentThemeOverrides = (specificOverrides === null || specificOverrides === void 0 ? void 0 : specificOverrides[themeName]) || specificOverrides || {};
-  return mergeDeep(currentTheme, resolvedThemeOrOverride, currentThemeOverrides);
+  return mergeDeep(currentTheme, resolvedLegacyThemeOrOverride, currentThemeOverrides, ...(resolvedThemeOverride ? [{
+    themeOverride: resolvedThemeOverride
+  }] : []));
 };
 export default getTheme;
 export { getTheme };

package/es/useStyle.js

@@ -22,13 +22,13 @@
  * SOFTWARE.
  */
 import { useTheme } from "./useTheme.js";
-import { getComponentThemeOverride } from "./getComponentThemeOverride.js"; // returns the second parameter of a function
+import { mergeDeep } from '@instructure/ui-utils';
+
+// returns the second parameter of a function
+
 /**
  * Type for a theme override
  */
-const isNewThemeObject = obj => {
-  return typeof (obj === null || obj === void 0 ? void 0 : obj.newTheme) === 'object';
-};
 
 /**
  * new useStyle syntax, use this with v12 themes
@@ -37,27 +37,34 @@ const isNewThemeObject = obj => {
 // TODO: improve useStyle to handle generateStyle functions that don't
 // have a theme.
 const useStyle = useStyleParams => {
-  var _ref, _ref2;
+  var _themeOverrideFromPro, _themeInContext$newTh, _themeInContext$newTh2, _themeInContext$newTh3, _themeInContext$newTh4, _themeInContext$newTh5, _themeInContext$newTh6;
   const generateStyle = useStyleParams.generateStyle,
     params = useStyleParams.params,
     componentId = useStyleParams.componentId,
-    displayName = useStyleParams.displayName,
     themeOverride = useStyleParams.themeOverride;
   const useTokensFrom = useStyleParams.useTokensFrom;
-  const theme = useTheme();
-  let baseComponentTheme = {};
+  const themeInContext = useTheme();
+  const themeOverrideFromProvider = themeInContext.themeOverride;
   const componentWithTokensId = useTokensFrom !== null && useTokensFrom !== void 0 ? useTokensFrom : componentId;
-  if (isNewThemeObject(theme) &&
-  // TODO: is it possible not to have a theme object here?
-  theme.newTheme.components[componentWithTokensId]) {
-    baseComponentTheme = theme.newTheme.components[componentWithTokensId];
-  }
-  const finalOverride = getComponentThemeOverride(theme, (_ref = (_ref2 = useTokensFrom !== null && useTokensFrom !== void 0 ? useTokensFrom : displayName) !== null && _ref2 !== void 0 ? _ref2 : componentId) !== null && _ref !== void 0 ? _ref : '', componentWithTokensId, themeOverride, baseComponentTheme);
-  const componentTheme = {
-    ...baseComponentTheme,
-    ...finalOverride
-  };
-  return generateStyle(componentTheme, params, theme.newTheme.sharedTokens);
+
+  // 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 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);
+
+  // @ts-ignore TODO-theme-types: fix typing
+  return generateStyle(componentTheme, params, sharedTokens);
 };
 export default useStyle;
 export { useStyle };

package/es/withStyle.js

@@ -25,10 +25,9 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 
 import { forwardRef, useState } from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { deepEqual as isEqual } from '@instructure/ui-utils';
+import { deepEqual as isEqual, mergeDeep } from '@instructure/ui-utils';
 import { warn } from '@instructure/console';
 import { decorator } from '@instructure/ui-decorator';
-import { getComponentThemeOverride } from "./getComponentThemeOverride.js";
 import { useTheme } from "./useTheme.js"; // Extract is needed because it would allow number otherwise
 // https://stackoverflow.com/a/51808262/319473
 // Unique name of an InstUI component
@@ -93,12 +92,27 @@ const defaultValues = {
  * @param {function} generateStyle - The function that returns the component's style object
  * @returns {ReactElement} The decorated WithStyle Component
  */
-const withStyle = decorator((ComposedComponent, generateStyle, useTokensFrom) => {
+const withStyle = decorator((ComposedComponent, generateStyle, useTokensFrom, frozenTheme) => {
   var _ComposedComponent$co, _process, _process$env;
   const displayName = ComposedComponent.displayName || ComposedComponent.name;
-  const componentId = (_ComposedComponent$co = ComposedComponent.componentId) === null || _ComposedComponent$co === void 0 ? void 0 : _ComposedComponent$co.replace('.', '');
+  const componentId = useTokensFrom !== null && useTokensFrom !== void 0 ? useTokensFrom : (_ComposedComponent$co = ComposedComponent.componentId) === null || _ComposedComponent$co === void 0 ? void 0 : _ComposedComponent$co.replace('.', '');
   const WithStyle = /*#__PURE__*/forwardRef((props, ref) => {
-    const theme = useTheme();
+    var _themeOverride$compon, _theme$newTheme$seman, _theme$newTheme, _theme$newTheme$share, _theme$newTheme2, _theme$newTheme$compo, _theme$newTheme$compo2;
+    const themeInContext = useTheme();
+    const themeKey = themeInContext.key;
+
+    // this is for the new overrides. theme.themeOverride has all the overrides
+    const themeOverride = themeInContext.themeOverride;
+
+    // if a new theme has been added to the lib since this component version has been frozen, it can't be used with this
+    // theme, so we throw an error. Solution: upgrade to the latest version, it will support it
+    if (frozenTheme && !frozenTheme[themeKey]) {}
+
+    // if this component is an older component version but still uses the new theming system, it'll have a frozenTheme
+    // object passed to it. We use that instead of the current theme so backward compatibility stays intact
+    const theme = frozenTheme ? {
+      newTheme: frozenTheme[themeKey]
+    } : themeInContext;
     if (props.styles) {
       warn(false, `Manually passing the "styles" property is not allowed on the ${displayName} component. Using the default styles calculated by the @withStyle decorator instead.\n`, props.styles);
     }
@@ -110,21 +124,34 @@ const withStyle = decorator((ComposedComponent, generateStyle, useTokensFrom) =>
       ...props,
       ...defaultValues
     };
-    const componentWithTokensId = useTokensFrom !== null && useTokensFrom !== void 0 ? useTokensFrom : componentId;
-    const baseComponentTheme = theme.newTheme.components[componentWithTokensId];
-    const themeOverride = getComponentThemeOverride(theme, displayName, ComposedComponent.componentId, componentProps.themeOverride, baseComponentTheme);
-    const componentTheme = {
-      ...baseComponentTheme,
-      ...themeOverride
-    };
+    // 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 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);
+    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,
+    // @ts-ignore TODO-theme-types: fix typing
+    typeof componentOverridesFromThemeOverrideProp === 'function' ? componentOverridesFromThemeOverrideProp(componentThemeFromSettingsProvider, themeInContext) : componentOverridesFromThemeOverrideProp);
 
     // TODO do not call here generateStyle, it does not receive the extraArgs
-    const _useState = useState(generateStyle ? generateStyle(componentTheme, componentProps, theme.newTheme.sharedTokens, {}) : {}),
+    const _useState = useState(generateStyle ?
+      // @ts-ignore TODO-theme-types: fix typing
+      generateStyle(componentTheme, componentProps, sharedTokens, {}) : {}),
       _useState2 = _slicedToArray(_useState, 2),
       styles = _useState2[0],
       setStyles = _useState2[1];
     const makeStyleHandler = extraArgs => {
-      const calculatedStyles = generateStyle(componentTheme, componentProps, theme.newTheme.sharedTokens, extraArgs);
+      const calculatedStyles = generateStyle(componentTheme, componentProps,
+      // @ts-ignore TODO-theme-types: fix typing
+      sharedTokens, extraArgs);
       if (!isEqual(calculatedStyles, styles)) {
         setStyles(calculatedStyles);
       }
@@ -134,11 +161,6 @@ const withStyle = decorator((ComposedComponent, generateStyle, useTokensFrom) =>
       ...props,
       makeStyles: makeStyleHandler,
       styles: styles
-      // passing themeOverrides is needed for components like Button
-      // that have no makeStyles of their own and only pass themeOverrides
-      // to the underlying component (e.g.: BaseButton)
-      ,
-      themeOverride: themeOverride
     });
   });
   hoistNonReactStatics(WithStyle, ComposedComponent);

package/lib/InstUISettingsProvider/index.js

@@ -45,15 +45,25 @@ function InstUISettingsProvider({
   children,
   theme = {},
   dir,
-  instanceCounterMap
+  instanceCounterMap,
+  themeOverride
 }) {
   var _process, _process$env, _process2, _process2$env;
   const finalDir = dir || (0, _react.useContext)(_TextDirectionContext.TextDirectionContext);
   if (typeof process !== 'undefined' && (((_process = process) === null || _process === void 0 ? void 0 : (_process$env = _process.env) === null || _process$env === void 0 ? void 0 : _process$env.NODE_ENV) !== 'production' || ((_process2 = process) === null || _process2 === void 0 ? void 0 : (_process2$env = _process2.env) === null || _process2$env === void 0 ? void 0 : _process2$env.GITHUB_PULL_REQUEST_PREVIEW) === 'true') && finalDir === 'auto') {}
+
+  /**
+   * new pattern: if you want to replace a theme inside an InstUISettingsProvider, provide it via the theme prop. It'll
+   * override everything, replacing the otherwise used theme.
+   * if you want to apply an override, use the themeOverride prop.
+   * 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, {
-      theme: (0, _getTheme.getTheme)(theme),
+      theme: (0, _getTheme.getTheme)(theme, themeOverride),
       children: (0, _jsxRuntime.jsx)(_TextDirectionContext.TextDirectionContext.Provider, {
         value: finalDir,
         children: children

package/lib/getTheme.js

@@ -43,13 +43,14 @@ var _mergeDeep = require("@instructure/ui-utils/lib/mergeDeep.js");
  * If an override object is given, it returns the ancestor theme and
  * the overrides merged together.
  *
- * @param themeOrOverride - A full theme or an override object
+ * @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
  * @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 = themeOrOverride => (ancestorTheme = {}) => {
-  var _resolvedThemeOrOverr;
+const getTheme = (themeOrLegacyOverride, themeOverride) => (ancestorTheme = {}) => {
+  var _resolvedLegacyThemeO;
   // we need to clone the ancestor theme not to override it
   let currentTheme;
   if (Object.keys(ancestorTheme).length === 0) {
@@ -59,14 +60,18 @@ const getTheme = themeOrOverride => (ancestorTheme = {}) => {
   } else {
     currentTheme = ancestorTheme;
   }
-  let resolvedThemeOrOverride = themeOrOverride;
-  if (typeof resolvedThemeOrOverride === 'function') {
-    resolvedThemeOrOverride = resolvedThemeOrOverride(currentTheme);
-  }
+  const resolvedThemeOverride = typeof themeOverride === 'function' ? themeOverride(currentTheme) : themeOverride;
+  let resolvedLegacyThemeOrOverride = typeof themeOrLegacyOverride === 'function' ? themeOrLegacyOverride(currentTheme) : themeOrLegacyOverride;
   try {
     // If a valid InstUI theme is given, it just returns the theme.
-    if ((0, _isBaseTheme.isBaseTheme)(resolvedThemeOrOverride)) {
-      return resolvedThemeOrOverride;
+    // in case of the legacy pattern, it's just a simple replacement, in the new system, overrides should be merged into the new theme. Old overrides will be removed because they may make no sense for a different theme
+    if ((0, _isBaseTheme.isBaseTheme)(resolvedLegacyThemeOrOverride)) {
+      return {
+        ...resolvedLegacyThemeOrOverride,
+        ...(resolvedThemeOverride ? {
+          themeOverride: resolvedThemeOverride
+        } : {})
+      };
     }
   } catch {
     var _process3, _process3$env, _process4, _process4$env;
@@ -74,14 +79,16 @@ const getTheme = themeOrOverride => (ancestorTheme = {}) => {
     // We are using this fail-safe here for the non-TS users,
     // because the whole page can break without a theme.
     if (typeof process !== 'undefined' && (((_process3 = process) === null || _process3 === void 0 ? void 0 : (_process3$env = _process3.env) === null || _process3$env === void 0 ? void 0 : _process3$env.NODE_ENV) !== 'production' || ((_process4 = process) === null || _process4 === void 0 ? void 0 : (_process4$env = _process4.env) === null || _process4$env === void 0 ? void 0 : _process4$env.GITHUB_PULL_REQUEST_PREVIEW) === 'true')) {}
-    resolvedThemeOrOverride = {};
+    resolvedLegacyThemeOrOverride = {};
   }
   const themeName = currentTheme.key;
 
-  // we pick the overrides for the current theme from the override object
-  const specificOverrides = (_resolvedThemeOrOverr = resolvedThemeOrOverride) === null || _resolvedThemeOrOverr === void 0 ? void 0 : _resolvedThemeOrOverr.themeOverrides;
+  // legacy: we pick the overrides for the current theme from the override object
+  const specificOverrides = (_resolvedLegacyThemeO = resolvedLegacyThemeOrOverride) === null || _resolvedLegacyThemeO === void 0 ? void 0 : _resolvedLegacyThemeO.themeOverrides;
   const currentThemeOverrides = (specificOverrides === null || specificOverrides === void 0 ? void 0 : specificOverrides[themeName]) || specificOverrides || {};
-  return (0, _mergeDeep.mergeDeep)(currentTheme, resolvedThemeOrOverride, currentThemeOverrides);
+  return (0, _mergeDeep.mergeDeep)(currentTheme, resolvedLegacyThemeOrOverride, currentThemeOverrides, ...(resolvedThemeOverride ? [{
+    themeOverride: resolvedThemeOverride
+  }] : []));
 };
 exports.getTheme = getTheme;
 var _default = exports.default = getTheme;

package/lib/useStyle.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useStyle = exports.default = void 0;
 var _useTheme = require("./useTheme");
-var _getComponentThemeOverride = require("./getComponentThemeOverride");
+var _mergeDeep = require("@instructure/ui-utils/lib/mergeDeep.js");
 /*
  * The MIT License (MIT)
  *
@@ -36,10 +36,6 @@ var _getComponentThemeOverride = require("./getComponentThemeOverride");
  * Type for a theme override
  */
 
-const isNewThemeObject = obj => {
-  return typeof (obj === null || obj === void 0 ? void 0 : obj.newTheme) === 'object';
-};
-
 /**
  * new useStyle syntax, use this with v12 themes
  */
@@ -47,27 +43,34 @@ const isNewThemeObject = obj => {
 // TODO: improve useStyle to handle generateStyle functions that don't
 // have a theme.
 const useStyle = useStyleParams => {
-  var _ref, _ref2;
+  var _themeOverrideFromPro, _themeInContext$newTh, _themeInContext$newTh2, _themeInContext$newTh3, _themeInContext$newTh4, _themeInContext$newTh5, _themeInContext$newTh6;
   const generateStyle = useStyleParams.generateStyle,
     params = useStyleParams.params,
     componentId = useStyleParams.componentId,
-    displayName = useStyleParams.displayName,
     themeOverride = useStyleParams.themeOverride;
   const useTokensFrom = useStyleParams.useTokensFrom;
-  const theme = (0, _useTheme.useTheme)();
-  let baseComponentTheme = {};
+  const themeInContext = (0, _useTheme.useTheme)();
+  const themeOverrideFromProvider = themeInContext.themeOverride;
   const componentWithTokensId = useTokensFrom !== null && useTokensFrom !== void 0 ? useTokensFrom : componentId;
-  if (isNewThemeObject(theme) &&
-  // TODO: is it possible not to have a theme object here?
-  theme.newTheme.components[componentWithTokensId]) {
-    baseComponentTheme = theme.newTheme.components[componentWithTokensId];
-  }
-  const finalOverride = (0, _getComponentThemeOverride.getComponentThemeOverride)(theme, (_ref = (_ref2 = useTokensFrom !== null && useTokensFrom !== void 0 ? useTokensFrom : displayName) !== null && _ref2 !== void 0 ? _ref2 : componentId) !== null && _ref !== void 0 ? _ref : '', componentWithTokensId, themeOverride, baseComponentTheme);
-  const componentTheme = {
-    ...baseComponentTheme,
-    ...finalOverride
-  };
-  return generateStyle(componentTheme, params, theme.newTheme.sharedTokens);
+
+  // 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 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);
+
+  // @ts-ignore TODO-theme-types: fix typing
+  return generateStyle(componentTheme, params, sharedTokens);
 };
 exports.useStyle = useStyle;
 var _default = exports.default = useStyle;

package/lib/withStyle.js

@@ -9,9 +9,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
 var _deepEqual = require("@instructure/ui-utils/lib/deepEqual.js");
+var _mergeDeep = require("@instructure/ui-utils/lib/mergeDeep.js");
 var _console = require("@instructure/console");
 var _decorator = require("@instructure/ui-decorator/lib/decorator.js");
-var _getComponentThemeOverride = require("./getComponentThemeOverride");
 var _useTheme = require("./useTheme");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /*
@@ -103,12 +103,27 @@ const defaultValues = {
  * @param {function} generateStyle - The function that returns the component's style object
  * @returns {ReactElement} The decorated WithStyle Component
  */
-const withStyle = exports.withStyle = (0, _decorator.decorator)((ComposedComponent, generateStyle, useTokensFrom) => {
+const withStyle = exports.withStyle = (0, _decorator.decorator)((ComposedComponent, generateStyle, useTokensFrom, frozenTheme) => {
   var _ComposedComponent$co, _process, _process$env;
   const displayName = ComposedComponent.displayName || ComposedComponent.name;
-  const componentId = (_ComposedComponent$co = ComposedComponent.componentId) === null || _ComposedComponent$co === void 0 ? void 0 : _ComposedComponent$co.replace('.', '');
+  const componentId = useTokensFrom !== null && useTokensFrom !== void 0 ? useTokensFrom : (_ComposedComponent$co = ComposedComponent.componentId) === null || _ComposedComponent$co === void 0 ? void 0 : _ComposedComponent$co.replace('.', '');
   const WithStyle = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-    const theme = (0, _useTheme.useTheme)();
+    var _themeOverride$compon, _theme$newTheme$seman, _theme$newTheme, _theme$newTheme$share, _theme$newTheme2, _theme$newTheme$compo, _theme$newTheme$compo2;
+    const themeInContext = (0, _useTheme.useTheme)();
+    const themeKey = themeInContext.key;
+
+    // this is for the new overrides. theme.themeOverride has all the overrides
+    const themeOverride = themeInContext.themeOverride;
+
+    // if a new theme has been added to the lib since this component version has been frozen, it can't be used with this
+    // theme, so we throw an error. Solution: upgrade to the latest version, it will support it
+    if (frozenTheme && !frozenTheme[themeKey]) {}
+
+    // if this component is an older component version but still uses the new theming system, it'll have a frozenTheme
+    // object passed to it. We use that instead of the current theme so backward compatibility stays intact
+    const theme = frozenTheme ? {
+      newTheme: frozenTheme[themeKey]
+    } : themeInContext;
     if (props.styles) {
       (0, _console.warn)(false, `Manually passing the "styles" property is not allowed on the ${displayName} component. Using the default styles calculated by the @withStyle decorator instead.\n`, props.styles);
     }
@@ -120,21 +135,34 @@ const withStyle = exports.withStyle = (0, _decorator.decorator)((ComposedCompone
       ...props,
       ...defaultValues
     };
-    const componentWithTokensId = useTokensFrom !== null && useTokensFrom !== void 0 ? useTokensFrom : componentId;
-    const baseComponentTheme = theme.newTheme.components[componentWithTokensId];
-    const themeOverride = (0, _getComponentThemeOverride.getComponentThemeOverride)(theme, displayName, ComposedComponent.componentId, componentProps.themeOverride, baseComponentTheme);
-    const componentTheme = {
-      ...baseComponentTheme,
-      ...themeOverride
-    };
+    // 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 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);
+    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,
+    // @ts-ignore TODO-theme-types: fix typing
+    typeof componentOverridesFromThemeOverrideProp === 'function' ? componentOverridesFromThemeOverrideProp(componentThemeFromSettingsProvider, themeInContext) : componentOverridesFromThemeOverrideProp);
 
     // TODO do not call here generateStyle, it does not receive the extraArgs
-    const _useState = (0, _react.useState)(generateStyle ? generateStyle(componentTheme, componentProps, theme.newTheme.sharedTokens, {}) : {}),
+    const _useState = (0, _react.useState)(generateStyle ?
+      // @ts-ignore TODO-theme-types: fix typing
+      generateStyle(componentTheme, componentProps, sharedTokens, {}) : {}),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       styles = _useState2[0],
       setStyles = _useState2[1];
     const makeStyleHandler = extraArgs => {
-      const calculatedStyles = generateStyle(componentTheme, componentProps, theme.newTheme.sharedTokens, extraArgs);
+      const calculatedStyles = generateStyle(componentTheme, componentProps,
+      // @ts-ignore TODO-theme-types: fix typing
+      sharedTokens, extraArgs);
       if (!(0, _deepEqual.deepEqual)(calculatedStyles, styles)) {
         setStyles(calculatedStyles);
       }
@@ -144,11 +172,6 @@ const withStyle = exports.withStyle = (0, _decorator.decorator)((ComposedCompone
       ...props,
       makeStyles: makeStyleHandler,
       styles: styles
-      // passing themeOverrides is needed for components like Button
-      // that have no makeStyles of their own and only pass themeOverrides
-      // to the underlying component (e.g.: BaseButton)
-      ,
-      themeOverride: themeOverride
     });
   });
   (0, _hoistNonReactStatics.default)(WithStyle, ComposedComponent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/emotion",
-  "version": "11.7.2-snapshot-54",
+  "version": "11.7.2-snapshot-60",
   "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.2-snapshot-54",
-    "@instructure/ui-color-utils": "11.7.2-snapshot-54",
-    "@instructure/shared-types": "11.7.2-snapshot-54",
-    "@instructure/ui-i18n": "11.7.2-snapshot-54",
-    "@instructure/ui-decorator": "11.7.2-snapshot-54",
-    "@instructure/ui-react-utils": "11.7.2-snapshot-54",
-    "@instructure/ui-themes": "11.7.2-snapshot-54",
-    "@instructure/ui-utils": "11.7.2-snapshot-54"
+    "@instructure/console": "11.7.2-snapshot-60",
+    "@instructure/shared-types": "11.7.2-snapshot-60",
+    "@instructure/ui-decorator": "11.7.2-snapshot-60",
+    "@instructure/ui-color-utils": "11.7.2-snapshot-60",
+    "@instructure/ui-i18n": "11.7.2-snapshot-60",
+    "@instructure/ui-react-utils": "11.7.2-snapshot-60",
+    "@instructure/ui-themes": "11.7.2-snapshot-60",
+    "@instructure/ui-utils": "11.7.2-snapshot-60"
   },
   "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.2-snapshot-54"
+    "@instructure/ui-babel-preset": "11.7.2-snapshot-60"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/EmotionTypes.ts

@@ -104,7 +104,7 @@ type Overrides = {
 
 type BaseThemeOrOverride = Theme | PartialTheme | Overrides
 
-type ThemeOrOverride =
+type ThemeOrLegacyOverride =
   | BaseThemeOrOverride
   | ((theme: BaseTheme) => BaseThemeOrOverride)
 
@@ -147,7 +147,7 @@ export interface StyleObject {
 
 export type {
   BaseThemeOrOverride,
-  ThemeOrOverride,
+  ThemeOrLegacyOverride,
   Overrides,
   ComponentOverride,
   SpecificThemeOverride,