@instructure/emotion 11.6.0 → 11.6.1-snapshot-129

package/lib/index.js

@@ -5,13 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   InstUISettingsProvider: true,
+  withStyleLegacy: true,
+  getComponentThemeOverride: true,
   withStyle: true,
   ThemeablePropValues: true,
   makeThemeVars: true,
   getShorthandPropValue: true,
   mirrorShorthandCorners: true,
   mirrorShorthandEdges: true,
-  mapSpacingToShorthand: true,
+  calcSpacingFromShorthand: true,
+  calcFocusOutlineStyles: true,
+  useStyleLegacy: true,
   useStyle: true,
   useTheme: true
 };
@@ -27,22 +31,34 @@ Object.defineProperty(exports, "ThemeablePropValues", {
     return _styleUtils.ThemeablePropValues;
   }
 });
-Object.defineProperty(exports, "getShorthandPropValue", {
+Object.defineProperty(exports, "calcFocusOutlineStyles", {
   enumerable: true,
   get: function () {
-    return _styleUtils.getShorthandPropValue;
+    return _styleUtils.calcFocusOutlineStyles;
   }
 });
-Object.defineProperty(exports, "makeThemeVars", {
+Object.defineProperty(exports, "calcSpacingFromShorthand", {
   enumerable: true,
   get: function () {
-    return _styleUtils.makeThemeVars;
+    return _styleUtils.calcSpacingFromShorthand;
+  }
+});
+Object.defineProperty(exports, "getComponentThemeOverride", {
+  enumerable: true,
+  get: function () {
+    return _getComponentThemeOverride.getComponentThemeOverride;
+  }
+});
+Object.defineProperty(exports, "getShorthandPropValue", {
+  enumerable: true,
+  get: function () {
+    return _styleUtils.getShorthandPropValue;
   }
 });
-Object.defineProperty(exports, "mapSpacingToShorthand", {
+Object.defineProperty(exports, "makeThemeVars", {
   enumerable: true,
   get: function () {
-    return _styleUtils.mapSpacingToShorthand;
+    return _styleUtils.makeThemeVars;
   }
 });
 Object.defineProperty(exports, "mirrorShorthandCorners", {
@@ -63,6 +79,12 @@ Object.defineProperty(exports, "useStyle", {
     return _useStyle.useStyle;
   }
 });
+Object.defineProperty(exports, "useStyleLegacy", {
+  enumerable: true,
+  get: function () {
+    return _useStyleLegacy.useStyleLegacy;
+  }
+});
 Object.defineProperty(exports, "useTheme", {
   enumerable: true,
   get: function () {
@@ -75,6 +97,12 @@ Object.defineProperty(exports, "withStyle", {
     return _withStyle.withStyle;
   }
 });
+Object.defineProperty(exports, "withStyleLegacy", {
+  enumerable: true,
+  get: function () {
+    return _withStyleLegacy.withStyleLegacy;
+  }
+});
 var _react = require("@emotion/react");
 Object.keys(_react).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -88,7 +116,10 @@ Object.keys(_react).forEach(function (key) {
   });
 });
 var _InstUISettingsProvider = require("./InstUISettingsProvider");
+var _withStyleLegacy = require("./withStyleLegacy");
+var _getComponentThemeOverride = require("./getComponentThemeOverride");
 var _withStyle = require("./withStyle");
 var _styleUtils = require("./styleUtils");
+var _useStyleLegacy = require("./useStyleLegacy");
 var _useStyle = require("./useStyle");
 var _useTheme = require("./useTheme");

package/lib/styleUtils/calcFocusOutlineStyles.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.calcFocusOutlineStyles = void 0;
+var _alpha = require("@instructure/ui-color-utils/lib/alpha.js");
+/*
+ * 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.
+ */
+
+/**
+ * This function creates CSS-in-JS styles for focus indicators.
+ *
+ * @returns CSS-in-JS style object containing focus outline styles ready for use with emotion or similar libraries.
+ */
+const calcFocusOutlineStyles = (theme, params) => {
+  var _params$focusColor, _params$focusPosition, _params$shouldAnimate, _params$focusWithin, _params$withFocusOutl, _params$customCSSSele;
+  const focusColor = (_params$focusColor = params === null || params === void 0 ? void 0 : params.focusColor) !== null && _params$focusColor !== void 0 ? _params$focusColor : 'info';
+  const focusPosition = (_params$focusPosition = params === null || params === void 0 ? void 0 : params.focusPosition) !== null && _params$focusPosition !== void 0 ? _params$focusPosition : 'offset';
+  const shouldAnimateFocus = (_params$shouldAnimate = params === null || params === void 0 ? void 0 : params.shouldAnimateFocus) !== null && _params$shouldAnimate !== void 0 ? _params$shouldAnimate : true;
+  const focusWithin = (_params$focusWithin = params === null || params === void 0 ? void 0 : params.focusWithin) !== null && _params$focusWithin !== void 0 ? _params$focusWithin : false;
+  const withFocusOutline = (_params$withFocusOutl = params === null || params === void 0 ? void 0 : params.withFocusOutline) !== null && _params$withFocusOutl !== void 0 ? _params$withFocusOutl : false;
+  const selector = (_params$customCSSSele = params === null || params === void 0 ? void 0 : params.customCSSSelector) !== null && _params$customCSSSele !== void 0 ? _params$customCSSSele : '&:focus';
+  const focusColorVariants = {
+    info: theme.infoColor,
+    inverse: theme.onColor,
+    success: theme.successColor,
+    danger: theme.dangerColor
+  };
+  const outlineStyle = {
+    outlineColor: focusColorVariants[focusColor],
+    outlineStyle: 'solid',
+    outlineWidth: theme.width,
+    outlineOffset: theme[focusPosition]
+  };
+  return {
+    ...(shouldAnimateFocus && {
+      transition: 'outline-color 0.2s, outline-offset 0.25s'
+    }),
+    outlineOffset: '-0.8rem',
+    outlineStyle: 'solid',
+    outlineColor: (0, _alpha.alpha)(outlineStyle.outlineColor, 0),
+    ...(withFocusOutline && outlineStyle),
+    [selector]: {
+      ...outlineStyle,
+      '&:hover, &:active': {
+        // apply the same style so it's not overridden by some global style
+        ...outlineStyle
+      }
+    },
+    ...(focusWithin && {
+      '&:focus-within': outlineStyle
+    })
+  };
+};
+exports.calcFocusOutlineStyles = calcFocusOutlineStyles;
+var _default = exports.default = calcFocusOutlineStyles;

package/lib/styleUtils/calcSpacingFromShorthand.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calcSpacingFromShorthand = calcSpacingFromShorthand;
+/*
+ * 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.
+ */
+
+/**
+ * Converts hyphen-case strings to camelCase
+ * Example: 'medium-small' -> 'mediumSmall'
+ */
+function camelize(str) {
+  return str.replace(/-([a-z])/g, g => g[1].toUpperCase());
+}
+
+/**
+ * Converts shorthand spacing values into CSS strings using theme spacing tokens.
+ *
+ * This function parses space-separated spacing values (margin, padding) and resolves theme
+ * tokens to their actual CSS values. It supports CSS shorthand syntax (1-4 values), nested
+ * theme token paths using dot notation, and automatically converts hyphen-case tokens to camelCase.
+ *
+ * @param {Spacing | undefined} value - The shorthand spacing value string containing space-separated tokens or CSS values.
+ *   Tokens can be in camelCase (mediumSmall) or hyphen-case (medium-small).
+ *   Can be undefined, in which case '0' is returned.
+ * @param {Record<string, string>} spacingMap - The spacing theme object containing spacing tokens and nested values.
+ *   Typically comes from `sharedTokens.margin.spacing` or `sharedTokens.padding.spacing` in the component theme.
+ *
+ * @returns {string} The resolved CSS spacing string ready to be used in styles.
+ *
+ * @example
+ * // Hyphen-case tokens are converted to camelCase
+ * calcSpacingFromShorthand('medium-small', spacingMap) // resolves to spacingMap.mediumSmall
+ * calcSpacingFromShorthand('x-large small', spacingMap) // resolves to spacingMap.xLarge + spacingMap.small
+ *
+ * // Dot notation paths are NOT converted
+ * calcSpacingFromShorthand('gap.nested-value', spacingMap) // resolves to spacingMap.gap['nested-value']
+ *
+ * // CSS values like 'none', 'auto', '10px' are returned as-is
+ * calcSpacingFromShorthand('none', spacingMap) // returns 'none'
+ */
+function calcSpacingFromShorthand(value, spacingMap) {
+  // return undefined when there is no value -> this is important when a component (like View)
+  // doesn't have a prop like `padding` but has inline css for padding
+  // this makes sure to not overwrite the inline style
+  if (!value) return;
+  const tokens = value.trim().split(' ');
+
+  // Handle whitespace-only strings
+  if (tokens.length === 1 && tokens[0] === '') return '';
+
+  // Map each token to its resolved CSS value
+  const resolvedValues = tokens.map(token => {
+    // Handle special CSS value 'none' - convert to 0 for valid CSS
+    if (token === 'none') {
+      return '0';
+    }
+
+    // Handle valid CSS numeric and keyword values
+    if (token === '0' || token === 'auto') {
+      return token;
+    }
+
+    // Handle dot notation for nested theme token paths (no camelization)
+    if (token.includes('.')) {
+      const path = token.split('.');
+      let currentLevel = spacingMap;
+      for (const key of path) {
+        if (currentLevel && typeof currentLevel === 'object' && key in currentLevel) {
+          currentLevel = currentLevel[key];
+        } else {
+          // If path doesn't resolve, return the original token as fallback
+          return token;
+        }
+      }
+      if (typeof currentLevel === 'string') {
+        return currentLevel;
+      }
+    }
+
+    // For direct tokens, try camelized version
+    const camelizedToken = camelize(token);
+    const directValue = spacingMap[camelizedToken];
+    if (typeof directValue === 'string') {
+      return directValue;
+    }
+
+    // Return the original token if not found (could be a direct CSS value like 'auto', '10px', etc.)
+
+    return token;
+  });
+
+  // Return the space-separated resolved values
+  return resolvedValues.join(' ');
+}

package/lib/styleUtils/index.js

@@ -9,22 +9,28 @@ Object.defineProperty(exports, "ThemeablePropValues", {
     return _ThemeablePropValues.ThemeablePropValues;
   }
 });
-Object.defineProperty(exports, "getShorthandPropValue", {
+Object.defineProperty(exports, "calcFocusOutlineStyles", {
   enumerable: true,
   get: function () {
-    return _getShorthandPropValue.getShorthandPropValue;
+    return _calcFocusOutlineStyles.calcFocusOutlineStyles;
   }
 });
-Object.defineProperty(exports, "makeThemeVars", {
+Object.defineProperty(exports, "calcSpacingFromShorthand", {
   enumerable: true,
   get: function () {
-    return _makeThemeVars.makeThemeVars;
+    return _calcSpacingFromShorthand.calcSpacingFromShorthand;
+  }
+});
+Object.defineProperty(exports, "getShorthandPropValue", {
+  enumerable: true,
+  get: function () {
+    return _getShorthandPropValue.getShorthandPropValue;
   }
 });
-Object.defineProperty(exports, "mapSpacingToShorthand", {
+Object.defineProperty(exports, "makeThemeVars", {
   enumerable: true,
   get: function () {
-    return _mapSpacingToShorthand.mapSpacingToShorthand;
+    return _makeThemeVars.makeThemeVars;
   }
 });
 Object.defineProperty(exports, "mirrorShorthandCorners", {
@@ -44,4 +50,5 @@ var _makeThemeVars = require("./makeThemeVars");
 var _getShorthandPropValue = require("./getShorthandPropValue");
 var _mirrorShorthandCorners = require("./mirrorShorthandCorners");
 var _mirrorShorthandEdges = require("./mirrorShorthandEdges");
-var _mapSpacingToShorthand = require("./mapSpacingToShorthand");
+var _calcSpacingFromShorthand = require("./calcSpacingFromShorthand");
+var _calcFocusOutlineStyles = require("./calcFocusOutlineStyles");

package/lib/useStyle.js

@@ -32,20 +32,42 @@ var _getComponentThemeOverride = require("./getComponentThemeOverride");
 
 // 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
+ */
+
+// TODO: improve useStyle to handle generateStyle functions that don't
+// have a theme.
 const useStyle = useStyleParams => {
+  var _ref, _ref2;
   const generateStyle = useStyleParams.generateStyle,
-    generateComponentTheme = useStyleParams.generateComponentTheme,
     params = useStyleParams.params,
     componentId = useStyleParams.componentId,
-    displayName = useStyleParams.displayName;
+    displayName = useStyleParams.displayName,
+    themeOverride = useStyleParams.themeOverride;
+  const useTokensFrom = useStyleParams.useTokensFrom;
   const theme = (0, _useTheme.useTheme)();
-  const baseComponentTheme = generateComponentTheme ? generateComponentTheme(theme) : {};
-  const themeOverride = (0, _getComponentThemeOverride.getComponentThemeOverride)(theme, displayName ? displayName : componentId || '', componentId, params, baseComponentTheme);
+  let baseComponentTheme = {};
+  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,
-    ...themeOverride
+    ...finalOverride
   };
-  return generateStyle(componentTheme, params ? params : {});
+  return generateStyle(componentTheme, params, theme.newTheme.sharedTokens);
 };
 exports.useStyle = useStyle;
 var _default = exports.default = useStyle;

package/lib/useStyleLegacy.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyleLegacy = exports.default = void 0;
+var _useTheme = require("./useTheme");
+var _getComponentThemeOverride = require("./getComponentThemeOverride");
+/*
+ * 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.
+ */
+
+// 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)
+ */
+const useStyleLegacy = useStyleParams => {
+  var _ref;
+  const generateStyle = useStyleParams.generateStyle,
+    params = useStyleParams.params,
+    componentId = useStyleParams.componentId,
+    displayName = useStyleParams.displayName;
+  const generateComponentTheme = useStyleParams === null || useStyleParams === void 0 ? void 0 : useStyleParams.generateComponentTheme;
+  const theme = (0, _useTheme.useTheme)();
+  const baseComponentTheme = typeof generateComponentTheme === 'function' ? generateComponentTheme(theme) : {};
+  const themeOverride = (0, _getComponentThemeOverride.getComponentThemeOverride)(theme, (_ref = displayName !== null && displayName !== void 0 ? displayName : componentId) !== null && _ref !== void 0 ? _ref : '', componentId, params === null || params === void 0 ? void 0 : params.themeOverride, baseComponentTheme);
+  const componentTheme = {
+    ...baseComponentTheme,
+    ...themeOverride
+  };
+  return generateStyle(componentTheme, params ? params : {}, theme);
+};
+exports.useStyleLegacy = useStyleLegacy;
+var _default = exports.default = useStyleLegacy;

package/lib/useTheme.js

@@ -44,7 +44,7 @@ const useTheme = () => {
   // This reads the theme from Emotion's ThemeContext
   let theme = (0, _react.useTheme)();
   if ((0, _isEmpty.isEmpty)(theme)) {
-    if (process.env.NODE_ENV !== 'production') {}
+    if (process.env.NODE_ENV !== 'production' || process.env.GITHUB_PULL_REQUEST_PREVIEW === 'true') {}
     theme = _uiThemes.default;
   }
   return theme;

package/lib/withStyle.js

@@ -62,9 +62,8 @@ const defaultValues = {
  * ```js-code
  * import { withStyle } from '@instructure/emotion'
  * import generateStyle from './styles'
- * import generateComponentTheme from './theme'
  *
- * export default withStyle(generateStyle, generateComponentTheme)(ExampleComponent)
+ * export default withStyle(generateStyle)(ExampleComponent)
  * ```
  *
  * Themeable components inject their themed styles into the document
@@ -83,24 +82,6 @@ const defaultValues = {
  *
  * See more about the overrides on the [Using theme overrides](/#using-theme-overrides) docs page.
  *
- * ```js-code
- * // ExampleComponent/theme.js
- * const generateComponentTheme = (theme) => {
- *   const { colors } = theme
- *
- *   const componentVariables = {
- *     background: colors?.backgroundMedium,
- *     color: colors?.textDarkest,
- *
- *     hoverColor: colors?.textLightest,
- *     hoverBackground: colors?.backgroundDarkest
- *   }
- *
- *   return componentVariables
- * }
- * export default generateComponentTheme
- * ```
- *
  * ```jsx-code
  * {// global theme override}
  * <InstUISettingsProvider theme={{
@@ -120,11 +101,12 @@ const defaultValues = {
  * @module withStyle
  *
  * @param {function} generateStyle - The function that returns the component's style object
- * @param {function} generateComponentTheme - The function that returns the component's theme variables object
  * @returns {ReactElement} The decorated WithStyle Component
  */
-const withStyle = exports.withStyle = (0, _decorator.decorator)((ComposedComponent, generateStyle, generateComponentTheme) => {
+const withStyle = exports.withStyle = (0, _decorator.decorator)((ComposedComponent, generateStyle, useTokensFrom) => {
+  var _ComposedComponent$co;
   const displayName = ComposedComponent.displayName || ComposedComponent.name;
+  const componentId = (_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)();
     if (props.styles) {
@@ -138,18 +120,21 @@ const withStyle = exports.withStyle = (0, _decorator.decorator)((ComposedCompone
       ...props,
       ...defaultValues
     };
-    let componentTheme = typeof generateComponentTheme === 'function' ? generateComponentTheme(theme) : {};
-    const themeOverride = (0, _getComponentThemeOverride.getComponentThemeOverride)(theme, displayName, ComposedComponent.componentId, componentProps, componentTheme);
-    componentTheme = {
-      ...componentTheme,
+    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
     };
-    const _useState = (0, _react.useState)(generateStyle ? generateStyle(componentTheme, componentProps, {}) : {}),
+
+    // TODO do not call here generateStyle, it does not receive the extraArgs
+    const _useState = (0, _react.useState)(generateStyle ? generateStyle(componentTheme, componentProps, theme.newTheme.sharedTokens, {}) : {}),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       styles = _useState2[0],
       setStyles = _useState2[1];
     const makeStyleHandler = extraArgs => {
-      const calculatedStyles = generateStyle(componentTheme, componentProps, extraArgs);
+      const calculatedStyles = generateStyle(componentTheme, componentProps, theme.newTheme.sharedTokens, extraArgs);
       if (!(0, _deepEqual.deepEqual)(calculatedStyles, styles)) {
         setStyles(calculatedStyles);
       }
@@ -175,9 +160,6 @@ const withStyle = exports.withStyle = (0, _decorator.decorator)((ComposedCompone
   // 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/lib/withStyleLegacy.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withStyleLegacy = exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
+var _deepEqual = require("@instructure/ui-utils/lib/deepEqual.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");
+/*
+ * 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.
+ */
+
+// Extract is needed because it would allow number otherwise
+// https://stackoverflow.com/a/51808262/319473
+
+// Unique name of an InstUI component
+
+const defaultValues = {
+  styles: {},
+  makeStyles: () => {}
+};
+
+/**
+ * ---
+ * category: utilities/themes
+ * ---
+ * used for old (v11 and eariler) theming system
+ * TODO delete when the theme migration is complete
+ */
+const withStyleLegacy = exports.withStyleLegacy = (0, _decorator.decorator)((ComposedComponent, generateStyle, generateComponentTheme) => {
+  const displayName = ComposedComponent.displayName || ComposedComponent.name;
+  const WithStyle = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+    const theme = (0, _useTheme.useTheme)();
+    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);
+    }
+    if (props.makeStyles) {
+      (0, _console.warn)(false, `Manually passing the "makeStyles" property is not allowed on the ${displayName} component. Styles are calculated by the @withStyle decorator.`);
+    }
+    const componentProps = {
+      ...ComposedComponent.defaultProps,
+      ...props,
+      ...defaultValues
+    };
+    let componentTheme = typeof generateComponentTheme === 'function' ? generateComponentTheme(theme) : {};
+    const themeOverride = (0, _getComponentThemeOverride.getComponentThemeOverride)(theme, displayName, ComposedComponent.componentId, componentProps.themeOverride, componentTheme);
+    componentTheme = {
+      ...componentTheme,
+      ...themeOverride
+    };
+    const _useState = (0, _react.useState)(generateStyle ? generateStyle(componentTheme, componentProps, {}) : {}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      styles = _useState2[0],
+      setStyles = _useState2[1];
+    const makeStyleHandler = extraArgs => {
+      const calculatedStyles = generateStyle(componentTheme, componentProps, extraArgs);
+      if (!(0, _deepEqual.deepEqual)(calculatedStyles, styles)) {
+        setStyles(calculatedStyles);
+      }
+    };
+    return (0, _jsxRuntime.jsx)(ComposedComponent, {
+      ref: ref,
+      ...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);
+
+  // 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 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 = {
+    ...ComposedComponent.defaultProps,
+    makeStyles: defaultValues.makeStyles,
+    styles: defaultValues.styles
+  };
+  if (process.env.NODE_ENV !== 'production') {
+    WithStyle.displayName = `WithStyle(${displayName})`;
+  }
+  return WithStyle;
+});
+var _default = exports.default = withStyleLegacy;