@instructure/emotion 11.7.3-snapshot-33 → 11.7.3-snapshot-37

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.3-snapshot-33](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-33) (2026-05-07)
+## [11.7.3-snapshot-37](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-37) (2026-05-07)
 
 
 ### Bug Fixes
@@ -11,6 +11,11 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
 
 
+### Features
+
+* **many:** add a way for consumers to pass their own component theme definition so they can build their own components with InstUI ([ce01c3e](https://github.com/instructure/instructure-ui/commit/ce01c3eedc46aa2588f4c8309a6eabf4461aaec7))
+
+
 
 
 

package/es/getTheme.js

@@ -38,7 +38,7 @@ import { isBaseTheme, mergeDeep } from '@instructure/ui-utils';
  * @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
+ * `withStyleNew.ts` decorator
  * @returns A function that returns with the theme object for the [ThemeProvider](https://emotion.sh/docs/theming#themeprovider-reactcomponenttype)
  *    This function is called by Emotion on theme provider creation, where
  *    `ancestorTheme` is a theme object from an ancestor `ThemeProvider`

package/es/index.js

@@ -26,10 +26,10 @@
 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";
 export { withStyle } from "./withStyle.js";
+export { getComponentThemeOverride } from "./getComponentThemeOverride.js";
+export { withStyleNew } from "./withStyleNew.js";
 export { ThemeablePropValues, makeThemeVars, getShorthandPropValue, mirrorShorthandCorners, mirrorShorthandEdges, calcSpacingFromShorthand, calcFocusOutlineStyles } from "./styleUtils/index.js";
-export { useStyleLegacy } from "./useStyleLegacy.js";
 export { useStyle } from "./useStyle.js";
+export { useStyleNew } from "./useStyleNew.js";
 export { useTheme } from "./useTheme.js";

package/es/useStyle.js

@@ -22,41 +22,29 @@
  * SOFTWARE.
  */
 import { useTheme } from "./useTheme.js";
-import { mergeDeep } from '@instructure/ui-utils';
-
-// returns the second parameter of a function
-
-/**
- * new useStyle syntax, use this with v11.7+ themes
+import { getComponentThemeOverride } from "./getComponentThemeOverride.js"; // returns the second parameter of a function
+// TODO this is only used by the old themes, remove when everything uses the new
+// theming system
+/*
+ * This is only used by the **old themes**, remove when everything uses the new
+ * theming system (InstUI v12)
  */
-// TODO: improve useStyle to handle generateStyle functions that don't
-// have a theme.
 const useStyle = useStyleParams => {
   const {
     generateStyle,
     params,
     componentId,
-    themeOverride
+    displayName
   } = useStyleParams;
-  const useTokensFrom = useStyleParams.useTokensFrom;
-  const themeInContext = useTheme();
-  const themeOverrideFromProvider = themeInContext.themeOverride;
-  const componentWithTokensId = useTokensFrom ?? componentId;
-
-  // resolving the theming functions and applying the overrides
-  const primitiveOverrides = themeOverrideFromProvider?.primitives;
-  const semanticsOverrides = themeOverrideFromProvider?.semantics;
-  const sharedTokensOverrides = themeOverrideFromProvider?.sharedTokens;
-  const componentOverridesFromSettingsProvider = themeOverrideFromProvider?.components?.[componentWithTokensId];
-  const primitives = mergeDeep(themeInContext.newTheme.primitives, primitiveOverrides);
-  const semantics = mergeDeep(themeInContext.newTheme.semantics?.(primitives), semanticsOverrides);
-  const sharedTokens = mergeDeep(themeInContext.newTheme.sharedTokens?.(semantics), sharedTokensOverrides);
-  const baseComponentTheme = themeInContext.newTheme.components[componentWithTokensId]?.(semantics);
-  const componentThemeFromSettingsProvider = mergeDeep(baseComponentTheme, componentOverridesFromSettingsProvider);
-  const componentTheme = mergeDeep(componentThemeFromSettingsProvider, typeof themeOverride === 'function' ? themeOverride(componentThemeFromSettingsProvider, themeInContext) : themeOverride);
-
-  // @ts-ignore TODO-theme-types: fix typing
-  return generateStyle(componentTheme, params, sharedTokens);
+  const generateComponentTheme = useStyleParams?.generateComponentTheme;
+  const theme = useTheme();
+  const baseComponentTheme = typeof generateComponentTheme === 'function' ? generateComponentTheme(theme) : {};
+  const themeOverride = getComponentThemeOverride(theme, displayName ?? componentId ?? '', componentId, params?.themeOverride, baseComponentTheme);
+  const componentTheme = {
+    ...baseComponentTheme,
+    ...themeOverride
+  };
+  return generateStyle(componentTheme, params ? params : {}, theme);
 };
 export default useStyle;
 export { useStyle };

package/es/useStyleNew.js

@@ -0,0 +1,79 @@
+/*
+ * 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 "./useTheme.js";
+import { mergeDeep } from '@instructure/ui-utils';
+
+// returns the second parameter of a function
+
+/**
+ * new useStyleNew syntax, use this with v11.7+ themes
+ */
+// TODO: improve useStyleNew to handle generateStyle functions that don't
+// have a theme.
+const useStyleNew = useStyleParams => {
+  const {
+    generateStyle,
+    params,
+    componentId,
+    themeOverride,
+    frozenTheme,
+    generateComponentTheme
+  } = useStyleParams;
+  const useTokensFrom = useStyleParams.useTokensFrom;
+  const themeInContext = useTheme();
+  const themeKey = themeInContext.key;
+
+  // 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;
+  const themeOverrideFromProvider = themeInContext.themeOverride;
+  const componentWithTokensId = useTokensFrom ?? componentId;
+
+  // resolving the theming functions and applying the overrides
+  const primitiveOverrides = themeOverrideFromProvider?.primitives;
+  const semanticsOverrides = themeOverrideFromProvider?.semantics;
+  const sharedTokensOverrides = themeOverrideFromProvider?.sharedTokens;
+  const componentOverridesFromSettingsProvider = themeOverrideFromProvider?.components?.[componentWithTokensId];
+  const primitives = mergeDeep(theme.newTheme.primitives, primitiveOverrides);
+  const semantics = mergeDeep(theme.newTheme.semantics?.(primitives), semanticsOverrides);
+  const sharedTokens = mergeDeep(theme.newTheme.sharedTokens?.(semantics), sharedTokensOverrides);
+  const baseComponentTheme = generateComponentTheme ? generateComponentTheme({
+    primitives,
+    semantics,
+    sharedTokens
+  }) : theme.newTheme.components[componentWithTokensId]?.(semantics);
+  const componentThemeFromSettingsProvider = mergeDeep(baseComponentTheme, componentOverridesFromSettingsProvider);
+  const componentTheme = mergeDeep(componentThemeFromSettingsProvider, typeof themeOverride === 'function' ? themeOverride(componentThemeFromSettingsProvider, themeInContext) : themeOverride);
+
+  // @ts-ignore TODO-theme-types: fix typing
+  return generateStyle(componentTheme, params, sharedTokens);
+};
+export default useStyleNew;
+export { useStyleNew };

package/es/withStyle.js

@@ -24,9 +24,10 @@
 
 import { forwardRef, useState } from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { deepEqual as isEqual, mergeDeep } from '@instructure/ui-utils';
+import { deepEqual as isEqual } 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
@@ -40,111 +41,33 @@ const defaultValues = {
  * ---
  * category: utilities/themes
  * ---
- *
- * A decorator or higher order component that makes a component themeable.
- *
- * It adds a `makeStyles` function and the generated `styles` object to the decorated Component's props. If it has an own theme, it also adds the `themeOverride` prop to the component.
- *
- * As a HOC:
- *
- * ```js-code
- * import { withStyle } from '@instructure/emotion'
- * import generateStyle from './styles'
- *
- * export default withStyle(generateStyle)(ExampleComponent)
- * ```
- *
- * Themeable components inject their themed styles into the document
- * when they are mounted.
- *
- * ### Applying themes
- *
- * A themeable component’s theme can be configured via wrapping it in an
- * [InstUISettingsProvider](InstUISettingsProvider) component, and/or set
- * explicitly via its `themeOverride` prop.
- *
- * InstUISettingsProvider provides a theme object (e.g. the [canvas theme](/#canvas)).
- * These variables are mapped to the component's own variables in `theme.js` (see [theming](theming-basics) for more info).
- *
- * With the `themeOverride` prop you can directly set/override the component theme variables declared in theme.js. It accepts an object or a function. The function has the component's theme and the currently active main theme as its parameter.
- *
- * See more about the overrides on the [Using theme overrides](/#using-theme-overrides) docs page.
- *
- * ```jsx-code
- * {// global theme override}
- * <InstUISettingsProvider theme={{
- *   colors: { backgroundMedium: '#888' }
- * }}>
- *  {// component theme override}
- *   <ExampleComponent themeOverride={{ hoverColor: '#eee' }} />
- *
- *  {// component theme override with function}
- *   <ExampleComponent themeOverride={(componentTheme, currentTheme) => ({
- *     hoverBackground: componentTheme.background,
- *     activeBackground: currentTheme.colors.backgroundBrand
- *   })} />
- * </InstUISettingsProvider>
- * ```
- *
- * @module withStyle
- *
- * @param {function} generateStyle - The function that returns the component's style object
- * @returns {ReactElement} The decorated WithStyle Component
+ * used for old (v11 and eariler) theming system
+ * TODO delete when the theme migration is complete
  */
-const withStyle = decorator((ComposedComponent, generateStyle, useTokensFrom, frozenTheme) => {
+const withStyle = decorator((ComposedComponent, generateStyle, generateComponentTheme) => {
   const displayName = ComposedComponent.displayName || ComposedComponent.name;
-  const componentId = useTokensFrom ?? ComposedComponent.componentId?.replace('.', '');
   const WithStyle = /*#__PURE__*/forwardRef((props, ref) => {
-    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;
+    const theme = useTheme();
     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);
+      warn(false, `Manually passing the "styles" property is not allowed on the ${displayName} component. Using the default styles calculated by the @withStyleNew decorator instead.\n`, props.styles);
     }
     if (props.makeStyles) {
-      warn(false, `Manually passing the "makeStyles" property is not allowed on the ${displayName} component. Styles are calculated by the @withStyle decorator.`);
+      warn(false, `Manually passing the "makeStyles" property is not allowed on the ${displayName} component. Styles are calculated by the @withStyleNew decorator.`);
     }
     const componentProps = {
       ...ComposedComponent.defaultProps,
       ...props,
       ...defaultValues
     };
-    // resolving the theming functions and applying the overrides
-    const primitiveOverrides = themeOverride?.primitives;
-    const semanticsOverrides = themeOverride?.semantics;
-    const sharedTokensOverrides = themeOverride?.sharedTokens;
-    const componentOverridesFromSettingsProvider = themeOverride?.components?.[componentId];
-    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);
-    // Note: Some components do not have a theme, e.g., FormFieldMessages
-    const baseComponentTheme = theme.newTheme.components[componentId]?.(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 [styles, setStyles] = useState(generateStyle ?
-    // @ts-ignore TODO-theme-types: fix typing
-    generateStyle(componentTheme, componentProps, sharedTokens, {}) : {});
+    let componentTheme = typeof generateComponentTheme === 'function' ? generateComponentTheme(theme) : {};
+    const themeOverride = getComponentThemeOverride(theme, displayName, ComposedComponent.componentId, componentProps.themeOverride, componentTheme);
+    componentTheme = {
+      ...componentTheme,
+      ...themeOverride
+    };
+    const [styles, setStyles] = useState(generateStyle ? generateStyle(componentTheme, componentProps, {}) : {});
     const makeStyleHandler = extraArgs => {
-      const calculatedStyles = generateStyle(componentTheme, componentProps,
-      // @ts-ignore TODO-theme-types: fix typing
-      sharedTokens, extraArgs);
+      const calculatedStyles = generateStyle(componentTheme, componentProps, extraArgs);
       if (!isEqual(calculatedStyles, styles)) {
         setStyles(calculatedStyles);
       }
@@ -154,6 +77,11 @@ const withStyle = decorator((ComposedComponent, generateStyle, useTokensFrom, fr
       ...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);
@@ -165,6 +93,9 @@ const withStyle = decorator((ComposedComponent, generateStyle, useTokensFrom, fr
   // These static fields exist on InstUI components
   WithStyle.allowedProps = ComposedComponent.allowedProps;
 
+  // we are exposing the theme generator for the docs generation
+  WithStyle.generateComponentTheme = generateComponentTheme;
+
   // we have to add defaults to makeStyles and styles added by this decorator
   // eslint-disable-next-line no-param-reassign
   ComposedComponent.defaultProps = {

package/es/withStyleNew.js

@@ -0,0 +1,185 @@
+/*
+ * 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 { forwardRef, useState } from 'react';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import { deepEqual as isEqual, mergeDeep } from '@instructure/ui-utils';
+import { warn } from '@instructure/console';
+import { decorator } from '@instructure/ui-decorator';
+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
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+const defaultValues = {
+  styles: {},
+  makeStyles: () => {}
+};
+
+/**
+ * ---
+ * category: utilities/themes
+ * ---
+ *
+ * A decorator or higher order component that makes a component themeable.
+ *
+ * It adds a `makeStyles` function and the generated `styles` object to the decorated Component's props. If it has an own theme, it also adds the `themeOverride` prop to the component.
+ *
+ * As a HOC:
+ *
+ * ```js-code
+ * import { withStyleNew } from '@instructure/emotion'
+ * import generateStyle from './styles'
+ *
+ * export default withStyleNew(generateStyle)(ExampleComponent)
+ * ```
+ *
+ * Themeable components inject their themed styles into the document
+ * when they are mounted.
+ *
+ * ### Applying themes
+ *
+ * A themeable component’s theme can be configured via wrapping it in an
+ * [InstUISettingsProvider](InstUISettingsProvider) component, and/or set
+ * explicitly via its `themeOverride` prop.
+ *
+ * InstUISettingsProvider provides a theme object (e.g. the [canvas theme](/#canvas)).
+ * These variables are mapped to the component's own variables in `theme.js` (see [theming](theming-basics) for more info).
+ *
+ * With the `themeOverride` prop you can directly set/override the component theme variables declared in theme.js. It accepts an object or a function. The function has the component's theme and the currently active main theme as its parameter.
+ *
+ * See more about the overrides on the [Using theme overrides](/#using-theme-overrides) docs page.
+ *
+ * ```jsx-code
+ * {// global theme override}
+ * <InstUISettingsProvider theme={{
+ *   colors: { backgroundMedium: '#888' }
+ * }}>
+ *  {// component theme override}
+ *   <ExampleComponent themeOverride={{ hoverColor: '#eee' }} />
+ *
+ *  {// component theme override with function}
+ *   <ExampleComponent themeOverride={(componentTheme, currentTheme) => ({
+ *     hoverBackground: componentTheme.background,
+ *     activeBackground: currentTheme.colors.backgroundBrand
+ *   })} />
+ * </InstUISettingsProvider>
+ * ```
+ *
+ * @module withStyleNew
+ *
+ * @param {function} generateStyle - The function that returns the component's style object
+ * @returns {ReactElement} The decorated WithStyle Component
+ */
+const withStyleNew = decorator((ComposedComponent, generateStyle, useTokensFrom, frozenTheme, generateComponentTheme) => {
+  const displayName = ComposedComponent.displayName || ComposedComponent.name;
+  const componentId = useTokensFrom ?? ComposedComponent.componentId?.replace('.', '');
+  const WithStyle = /*#__PURE__*/forwardRef((props, ref) => {
+    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 @withStyleNew decorator instead.\n`, props.styles);
+    }
+    if (props.makeStyles) {
+      warn(false, `Manually passing the "makeStyles" property is not allowed on the ${displayName} component. Styles are calculated by the @withStyleNew decorator.`);
+    }
+    const componentProps = {
+      ...ComposedComponent.defaultProps,
+      ...props,
+      ...defaultValues
+    };
+    // resolving the theming functions and applying the overrides
+    const primitiveOverrides = themeOverride?.primitives;
+    const semanticsOverrides = themeOverride?.semantics;
+    const sharedTokensOverrides = themeOverride?.sharedTokens;
+    const componentOverridesFromSettingsProvider = themeOverride?.components?.[componentId];
+    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);
+    // Note: Some components do not have a theme, e.g., FormFieldMessages
+    const baseComponentTheme = generateComponentTheme ? generateComponentTheme({
+      primitives,
+      semantics,
+      sharedTokens
+    }) : theme.newTheme.components[componentId]?.(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 [styles, setStyles] = useState(generateStyle ?
+    // @ts-ignore TODO-theme-types: fix typing
+    generateStyle(componentTheme, componentProps, sharedTokens, {}) : {});
+    const makeStyleHandler = extraArgs => {
+      const calculatedStyles = generateStyle(componentTheme, componentProps,
+      // @ts-ignore TODO-theme-types: fix typing
+      sharedTokens, extraArgs);
+      if (!isEqual(calculatedStyles, styles)) {
+        setStyles(calculatedStyles);
+      }
+    };
+    return _jsx(ComposedComponent, {
+      ref: ref,
+      ...props,
+      makeStyles: makeStyleHandler,
+      styles: styles
+    });
+  });
+  hoistNonReactStatics(WithStyle, ComposedComponent);
+
+  // added so it can be tested with ReactTestUtils
+  // more info: https://github.com/facebook/react/issues/13455
+  WithStyle.originalType = ComposedComponent.originalType || ComposedComponent;
+  WithStyle.defaultProps = ComposedComponent.defaultProps;
+  // These static fields exist on InstUI components
+  WithStyle.allowedProps = ComposedComponent.allowedProps;
+
+  // we have to add defaults to makeStyles and styles added by this decorator
+  // eslint-disable-next-line no-param-reassign
+  ComposedComponent.defaultProps = {
+    ...ComposedComponent.defaultProps,
+    makeStyles: defaultValues.makeStyles,
+    styles: defaultValues.styles
+  };
+  if (typeof process !== 'undefined' && process?.env?.NODE_ENV !== 'production') {
+    WithStyle.displayName = `WithStyle(${displayName})`;
+  }
+  return WithStyle;
+});
+export default withStyleNew;
+export { withStyleNew };

package/lib/getTheme.js

@@ -47,7 +47,7 @@ var _mergeDeep = require("@instructure/ui-utils/lib/mergeDeep.js");
  * @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
+ * `withStyleNew.ts` decorator
  * @returns A function that returns with the theme object for the [ThemeProvider](https://emotion.sh/docs/theming#themeprovider-reactcomponenttype)
  *    This function is called by Emotion on theme provider creation, where
  *    `ancestorTheme` is a theme object from an ancestor `ThemeProvider`

package/lib/index.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   useComputedTheme: true,
   InstUISettingsProvider: true,
-  withStyleLegacy: true,
-  getComponentThemeOverride: true,
   withStyle: true,
+  getComponentThemeOverride: true,
+  withStyleNew: true,
   ThemeablePropValues: true,
   makeThemeVars: true,
   getShorthandPropValue: true,
@@ -16,8 +16,8 @@ var _exportNames = {
   mirrorShorthandEdges: true,
   calcSpacingFromShorthand: true,
   calcFocusOutlineStyles: true,
-  useStyleLegacy: true,
   useStyle: true,
+  useStyleNew: true,
   useTheme: true
 };
 Object.defineProperty(exports, "InstUISettingsProvider", {
@@ -86,10 +86,10 @@ Object.defineProperty(exports, "useStyle", {
     return _useStyle.useStyle;
   }
 });
-Object.defineProperty(exports, "useStyleLegacy", {
+Object.defineProperty(exports, "useStyleNew", {
   enumerable: true,
   get: function () {
-    return _useStyleLegacy.useStyleLegacy;
+    return _useStyleNew.useStyleNew;
   }
 });
 Object.defineProperty(exports, "useTheme", {
@@ -104,10 +104,10 @@ Object.defineProperty(exports, "withStyle", {
     return _withStyle.withStyle;
   }
 });
-Object.defineProperty(exports, "withStyleLegacy", {
+Object.defineProperty(exports, "withStyleNew", {
   enumerable: true,
   get: function () {
-    return _withStyleLegacy.withStyleLegacy;
+    return _withStyleNew.withStyleNew;
   }
 });
 var _react = require("@emotion/react");
@@ -124,10 +124,10 @@ Object.keys(_react).forEach(function (key) {
 });
 var _useComputedTheme = require("./useComputedTheme");
 var _InstUISettingsProvider = require("./InstUISettingsProvider");
-var _withStyleLegacy = require("./withStyleLegacy");
-var _getComponentThemeOverride = require("./getComponentThemeOverride");
 var _withStyle = require("./withStyle");
+var _getComponentThemeOverride = require("./getComponentThemeOverride");
+var _withStyleNew = require("./withStyleNew");
 var _styleUtils = require("./styleUtils");
-var _useStyleLegacy = require("./useStyleLegacy");
 var _useStyle = require("./useStyle");
+var _useStyleNew = require("./useStyleNew");
 var _useTheme = require("./useTheme");