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

package/CHANGELOG.md

@@ -3,13 +3,21 @@
 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-62](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-62) (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
+
+* **emotion:** add helper for accessing computed theme (useComputedTheme.ts in the emotion package) ([6d3c649](https://github.com/instructure/instructure-ui/commit/6d3c64912304bf863e3bc720cdb29c88165bfe81))
+* **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/index.js

@@ -24,6 +24,7 @@
 /// <reference types="@emotion/react/types/css-prop" />
 
 export * from '@emotion/react';
+export { useComputedTheme } from "./useComputedTheme.js";
 export { InstUISettingsProvider } from "./InstUISettingsProvider/index.js";
 export { withStyleLegacy } from "./withStyleLegacy.js";
 export { getComponentThemeOverride } from "./getComponentThemeOverride.js";

package/es/useComputedTheme.js

@@ -0,0 +1,61 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useTheme } from '@emotion/react';
+
+/**
+ * ---
+ * category: utilities/themes
+ * ---
+ * A hook that returns the fully resolved theme object from the context, with all token layers evaluated.
+ *
+ * The raw `newTheme` stored on the context exposes its layers as functions
+ * that depend on the previous layer (`semantics` takes `primitives`,
+ * `components` and `sharedTokens` take `semantics`). This hook runs those
+ * functions for you and returns the computed values, so you can read
+ * tokens directly without having to know the evaluation order.
+ *
+ * @returns An object containing the computed `primitives`, `semantics`,
+ *          `components` and `sharedTokens` of the current theme.
+ */
+export const useComputedTheme = () => {
+  var _rawTheme$semantics, _rawTheme$sharedToken;
+  const rawTheme = useTheme().newTheme;
+  const primitives = rawTheme === null || rawTheme === void 0 ? void 0 : rawTheme.primitives;
+  const semantics = rawTheme === null || rawTheme === void 0 ? void 0 : (_rawTheme$semantics = rawTheme.semantics) === null || _rawTheme$semantics === void 0 ? void 0 : _rawTheme$semantics.call(rawTheme, primitives);
+  const components = Object.keys(rawTheme === null || rawTheme === void 0 ? void 0 : rawTheme.components).reduce((acc, component) => {
+    var _rawTheme$components$, _rawTheme$components;
+    return {
+      ...acc,
+      [component]: (_rawTheme$components$ = (_rawTheme$components = rawTheme.components)[component]) === null || _rawTheme$components$ === void 0 ? void 0 : _rawTheme$components$.call(_rawTheme$components, semantics)
+    };
+  }, {});
+  const sharedTokens = rawTheme === null || rawTheme === void 0 ? void 0 : (_rawTheme$sharedToken = rawTheme.sharedTokens) === null || _rawTheme$sharedToken === void 0 ? void 0 : _rawTheme$sharedToken.call(rawTheme, semantics);
+  return {
+    primitives,
+    semantics,
+    components,
+    sharedTokens
+  };
+};

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/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  useComputedTheme: true,
   InstUISettingsProvider: true,
   withStyleLegacy: true,
   getComponentThemeOverride: true,
@@ -73,6 +74,12 @@ Object.defineProperty(exports, "mirrorShorthandEdges", {
     return _styleUtils.mirrorShorthandEdges;
   }
 });
+Object.defineProperty(exports, "useComputedTheme", {
+  enumerable: true,
+  get: function () {
+    return _useComputedTheme.useComputedTheme;
+  }
+});
 Object.defineProperty(exports, "useStyle", {
   enumerable: true,
   get: function () {
@@ -115,6 +122,7 @@ Object.keys(_react).forEach(function (key) {
     }
   });
 });
+var _useComputedTheme = require("./useComputedTheme");
 var _InstUISettingsProvider = require("./InstUISettingsProvider");
 var _withStyleLegacy = require("./withStyleLegacy");
 var _getComponentThemeOverride = require("./getComponentThemeOverride");

package/lib/useComputedTheme.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useComputedTheme = void 0;
+var _react = require("@emotion/react");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * category: utilities/themes
+ * ---
+ * A hook that returns the fully resolved theme object from the context, with all token layers evaluated.
+ *
+ * The raw `newTheme` stored on the context exposes its layers as functions
+ * that depend on the previous layer (`semantics` takes `primitives`,
+ * `components` and `sharedTokens` take `semantics`). This hook runs those
+ * functions for you and returns the computed values, so you can read
+ * tokens directly without having to know the evaluation order.
+ *
+ * @returns An object containing the computed `primitives`, `semantics`,
+ *          `components` and `sharedTokens` of the current theme.
+ */
+const useComputedTheme = () => {
+  var _rawTheme$semantics, _rawTheme$sharedToken;
+  const rawTheme = (0, _react.useTheme)().newTheme;
+  const primitives = rawTheme === null || rawTheme === void 0 ? void 0 : rawTheme.primitives;
+  const semantics = rawTheme === null || rawTheme === void 0 ? void 0 : (_rawTheme$semantics = rawTheme.semantics) === null || _rawTheme$semantics === void 0 ? void 0 : _rawTheme$semantics.call(rawTheme, primitives);
+  const components = Object.keys(rawTheme === null || rawTheme === void 0 ? void 0 : rawTheme.components).reduce((acc, component) => {
+    var _rawTheme$components$, _rawTheme$components;
+    return {
+      ...acc,
+      [component]: (_rawTheme$components$ = (_rawTheme$components = rawTheme.components)[component]) === null || _rawTheme$components$ === void 0 ? void 0 : _rawTheme$components$.call(_rawTheme$components, semantics)
+    };
+  }, {});
+  const sharedTokens = rawTheme === null || rawTheme === void 0 ? void 0 : (_rawTheme$sharedToken = rawTheme.sharedTokens) === null || _rawTheme$sharedToken === void 0 ? void 0 : _rawTheme$sharedToken.call(rawTheme, semantics);
+  return {
+    primitives,
+    semantics,
+    components,
+    sharedTokens
+  };
+};
+exports.useComputedTheme = useComputedTheme;

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;