@instructure/emotion 11.7.4-snapshot-11 → 11.7.4-snapshot-49

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.4-snapshot-11](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-11) (2026-05-19)
+## [11.7.4-snapshot-49](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-49) (2026-06-17)
 
-**Note:** Version bump only for package @instructure/emotion
+
+### Features
+
+* **ui-scripts:** refactor theme type generation and fix token fetching script ([ab0536f](https://github.com/instructure/instructure-ui/commit/ab0536f81ffe9ae60f8b8cdc5038f4f323314416))
 
 
 

package/LICENSE.md

@@ -2,6 +2,7 @@
 title: The MIT License (MIT)
 category: Getting Started
 order: 9
+isWIP: true
 ---
 
 # The MIT License (MIT)

package/es/InstUISettingsProvider/index.js

@@ -26,7 +26,7 @@ import { useContext } from 'react';
 import { ThemeProvider } from '@emotion/react';
 import { TextDirectionContext } from '@instructure/ui-i18n';
 import { DeterministicIdContextProvider } from '@instructure/ui-react-utils';
-import { getTheme } from "../getTheme.js";
+import { getTheme } from '../getTheme.js';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
  * ---

package/es/index.js

@@ -24,12 +24,12 @@
 /// <reference types="@emotion/react/types/css-prop" />
 
 export * from '@emotion/react';
-export { useComputedTheme } from "./useComputedTheme.js";
-export { InstUISettingsProvider } from "./InstUISettingsProvider/index.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 { useStyle } from "./useStyle.js";
-export { useStyleNew } from "./useStyleNew.js";
-export { useTheme } from "./useTheme.js";
+export { useComputedTheme } from './useComputedTheme.js';
+export { InstUISettingsProvider } from './InstUISettingsProvider/index.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 { useStyle } from './useStyle.js';
+export { useStyleNew } from './useStyleNew.js';
+export { useTheme } from './useTheme.js';

package/es/styleUtils/applyColorModifiers.js

@@ -0,0 +1,83 @@
+/*
+ * 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 { colorToHsla } from '@instructure/ui-color-utils';
+// Matches Tokens Studio's HSL modifier math: move L by `amount` (0–1) of the
+// remaining distance toward the endpoint, so the step shrinks as it approaches
+// black/white and never overshoots.
+const modifyLightness = (l, amount, type) => type === 'darken' ? Math.max(0, l - l * amount) : Math.min(1, l + (1 - l) * amount);
+const formatHsla = (h, s, l, a) => {
+  const hh = Math.round(h);
+  const ss = +(s * 100).toFixed(2);
+  const ll = +(l * 100).toFixed(2);
+  return a < 1 ? `hsla(${hh}, ${ss}%, ${ll}%, ${a})` : `hsl(${hh}, ${ss}%, ${ll}%)`;
+};
+const isModifyColor = val => typeof val === 'object' && val !== null && typeof val.value === 'string' && typeof val.modify === 'object' && val.modify !== null;
+const resolveModifyColor = ({
+  value,
+  modify
+}) => {
+  if (modify.type === 'darken' || modify.type === 'lighten') {
+    const {
+      h,
+      s,
+      l,
+      a
+    } = colorToHsla(value);
+    const newL = modifyLightness(l, modify.value, modify.type);
+    return formatHsla(h, s, newL, a);
+  }
+  return value;
+};
+
+/**
+ * Resolves a component theme object by applying color modifiers to any entries
+ * shaped as `{ value, modify: { type, value } }`. Entries with `modify.type` of
+ * `'darken'` or `'lighten'` are transformed in HSL space using the same math
+ * Tokens Studio applies (`space: "hsl"`): `amount` is a 0–1 fraction of the
+ * remaining distance to black/white. Plain values and unrecognized modifier
+ * types are passed through unchanged. Nested plain objects are walked
+ * recursively so modifiers anywhere in the tree get resolved.
+ *
+ * @param componentTheme - Theme map whose values can be CSS strings, `ModifyColor`
+ *   objects, or nested theme objects containing the same.
+ * @returns A new theme object mirroring the input shape, with every `ModifyColor`
+ *   collapsed to its final resolved color string.
+ */
+const applyColorModifiers = componentTheme => {
+  if (componentTheme == null) return {};
+  const result = {};
+  for (const key of Object.keys(componentTheme)) {
+    const entry = componentTheme[key];
+    if (isModifyColor(entry)) {
+      result[key] = resolveModifyColor(entry);
+    } else if (typeof entry === 'object' && entry !== null && !Array.isArray(entry)) {
+      result[key] = applyColorModifiers(entry);
+    } else {
+      result[key] = entry;
+    }
+  }
+  return result;
+};
+export default applyColorModifiers;
+export { applyColorModifiers };

package/es/styleUtils/index.js

@@ -21,10 +21,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { ThemeablePropValues } from "./ThemeablePropValues.js";
-export { makeThemeVars } from "./makeThemeVars.js";
-export { getShorthandPropValue } from "./getShorthandPropValue.js";
-export { mirrorShorthandCorners } from "./mirrorShorthandCorners.js";
-export { mirrorShorthandEdges } from "./mirrorShorthandEdges.js";
-export { calcSpacingFromShorthand } from "./calcSpacingFromShorthand.js";
-export { calcFocusOutlineStyles } from "./calcFocusOutlineStyles.js";
+
+export { ThemeablePropValues } from './ThemeablePropValues.js';
+export { makeThemeVars } from './makeThemeVars.js';
+export { getShorthandPropValue } from './getShorthandPropValue.js';
+export { mirrorShorthandCorners } from './mirrorShorthandCorners.js';
+export { mirrorShorthandEdges } from './mirrorShorthandEdges.js';
+export { calcSpacingFromShorthand } from './calcSpacingFromShorthand.js';
+export { calcFocusOutlineStyles } from './calcFocusOutlineStyles.js';

package/es/styleUtils/mirrorShorthandCorners.js

@@ -21,6 +21,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { mirrorShorthandCorners } from "./mirrorShorthand.js";
+import { mirrorShorthandCorners } from './mirrorShorthand.js';
 export default mirrorShorthandCorners;
 export { mirrorShorthandCorners };

package/es/styleUtils/mirrorShorthandEdges.js

@@ -21,6 +21,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { mirrorShorthandEdges } from "./mirrorShorthand.js";
+import { mirrorShorthandEdges } from './mirrorShorthand.js';
 export default mirrorShorthandEdges;
 export { mirrorShorthandEdges };

package/es/useStyle.js

@@ -21,10 +21,15 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { useTheme } from "./useTheme.js";
-import { getComponentThemeOverride } from "./getComponentThemeOverride.js"; // returns the second parameter of a function
+
+import { useTheme } from './useTheme.js';
+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)

package/es/useStyleNew.js

@@ -21,8 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { useTheme } from "./useTheme.js";
+
+import { useTheme } from './useTheme.js';
 import { mergeDeep } from '@instructure/ui-utils';
+import { applyColorModifiers } from './styleUtils/applyColorModifiers.js';
 
 // returns the second parameter of a function
 
@@ -64,11 +66,11 @@ const useStyleNew = useStyleParams => {
   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({
+  const baseComponentTheme = applyColorModifiers(generateComponentTheme ? generateComponentTheme({
     primitives,
     semantics,
     sharedTokens
-  }) : theme.newTheme.components[componentWithTokensId]?.(semantics);
+  }) : theme.newTheme.components[componentWithTokensId]?.(semantics));
   const componentThemeFromSettingsProvider = mergeDeep(baseComponentTheme, componentOverridesFromSettingsProvider);
   const componentTheme = mergeDeep(componentThemeFromSettingsProvider, typeof themeOverride === 'function' ? themeOverride(componentThemeFromSettingsProvider, themeInContext) : themeOverride);
 

package/es/withStyle.js

@@ -27,9 +27,12 @@ import hoistNonReactStatics from 'hoist-non-react-statics';
 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
+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
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 const defaultValues = {
@@ -41,7 +44,11 @@ const defaultValues = {
  * ---
  * category: utilities/themes
  * ---
- * used for old (v11 and eariler) theming system
+ * Legacy decorator for the pre-v11.7 theming system. New components should use
+ * `withStyleNew` instead. Override patterns for components decorated with
+ * `withStyle` are documented on the
+ * [Legacy theme overrides](/#legacy-theme-overrides) docs page.
+ *
  * TODO delete when the theme migration is complete
  */
 const withStyle = decorator((ComposedComponent, generateStyle, generateComponentTheme) => {

package/es/withStyleNew.js

@@ -27,8 +27,12 @@ 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
+import { useTheme } from './useTheme.js';
+import { applyColorModifiers } from './styleUtils/applyColorModifiers.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 = {
@@ -41,11 +45,9 @@ 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:
+ * Decorator (or HOC) that makes a component themeable using InstUI's new
+ * theming system. Injects a `makeStyles` function and the
+ * generated `styles` object as props.
  *
  * ```js-code
  * import { withStyleNew } from '@instructure/emotion'
@@ -54,42 +56,18 @@ const defaultValues = {
  * 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.
+ * Optionally pass a `useTokensFrom` key as the second argument to consume
+ * another component's tokens (e.g. `withStyleNew(generateStyle, 'BaseButton')`).
  *
- * 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>
- * ```
+ * Override patterns (provider-scoped, per-component, primitives / semantics /
+ * sharedTokens layers, priority rules) are documented on the
+ * [New theme overrides](/#new-theme-overrides) docs page.
  *
  * @module withStyleNew
  *
- * @param {function} generateStyle - The function that returns the component's style object
- * @returns {ReactElement} The decorated WithStyle Component
+ * @param {function} generateStyle - Returns the component's style object
+ * @param {string}   [useTokensFrom] - Key of another component whose tokens this one should consume
+ * @returns {ReactElement} The decorated component
  */
 const withStyleNew = decorator((ComposedComponent, generateStyle, useTokensFrom, frozenTheme, generateComponentTheme) => {
   const displayName = ComposedComponent.displayName || ComposedComponent.name;
@@ -131,11 +109,11 @@ const withStyleNew = decorator((ComposedComponent, generateStyle, useTokensFrom,
     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({
+    const baseComponentTheme = applyColorModifiers(generateComponentTheme ? generateComponentTheme({
       primitives,
       semantics,
       sharedTokens
-    }) : theme.newTheme.components[componentId]?.(semantics);
+    }) : theme.newTheme.components[componentId]?.(semantics));
     const componentThemeFromSettingsProvider = mergeDeep(baseComponentTheme, componentOverridesFromSettingsProvider);
     const componentTheme = mergeDeep(componentThemeFromSettingsProvider,
     // @ts-ignore TODO-theme-types: fix typing

package/lib/InstUISettingsProvider/index.js

@@ -9,7 +9,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _TextDirectionContext = require("@instructure/ui-i18n/lib/TextDirectionContext.js");
 var _DeterministicIdContextProvider = require("@instructure/ui-react-utils/lib/DeterministicIdContext/DeterministicIdContextProvider.js");
-var _getTheme = require("../getTheme");
+var _getTheme = require("../getTheme.js");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /*
  * The MIT License (MIT)

package/lib/index.js

@@ -23,25 +23,25 @@ var _exportNames = {
 Object.defineProperty(exports, "InstUISettingsProvider", {
   enumerable: true,
   get: function () {
-    return _InstUISettingsProvider.InstUISettingsProvider;
+    return _index.InstUISettingsProvider;
   }
 });
 Object.defineProperty(exports, "ThemeablePropValues", {
   enumerable: true,
   get: function () {
-    return _styleUtils.ThemeablePropValues;
+    return _index2.ThemeablePropValues;
   }
 });
 Object.defineProperty(exports, "calcFocusOutlineStyles", {
   enumerable: true,
   get: function () {
-    return _styleUtils.calcFocusOutlineStyles;
+    return _index2.calcFocusOutlineStyles;
   }
 });
 Object.defineProperty(exports, "calcSpacingFromShorthand", {
   enumerable: true,
   get: function () {
-    return _styleUtils.calcSpacingFromShorthand;
+    return _index2.calcSpacingFromShorthand;
   }
 });
 Object.defineProperty(exports, "getComponentThemeOverride", {
@@ -53,25 +53,25 @@ Object.defineProperty(exports, "getComponentThemeOverride", {
 Object.defineProperty(exports, "getShorthandPropValue", {
   enumerable: true,
   get: function () {
-    return _styleUtils.getShorthandPropValue;
+    return _index2.getShorthandPropValue;
   }
 });
 Object.defineProperty(exports, "makeThemeVars", {
   enumerable: true,
   get: function () {
-    return _styleUtils.makeThemeVars;
+    return _index2.makeThemeVars;
   }
 });
 Object.defineProperty(exports, "mirrorShorthandCorners", {
   enumerable: true,
   get: function () {
-    return _styleUtils.mirrorShorthandCorners;
+    return _index2.mirrorShorthandCorners;
   }
 });
 Object.defineProperty(exports, "mirrorShorthandEdges", {
   enumerable: true,
   get: function () {
-    return _styleUtils.mirrorShorthandEdges;
+    return _index2.mirrorShorthandEdges;
   }
 });
 Object.defineProperty(exports, "useComputedTheme", {
@@ -122,12 +122,12 @@ Object.keys(_react).forEach(function (key) {
     }
   });
 });
-var _useComputedTheme = require("./useComputedTheme");
-var _InstUISettingsProvider = require("./InstUISettingsProvider");
-var _withStyle = require("./withStyle");
-var _getComponentThemeOverride = require("./getComponentThemeOverride");
-var _withStyleNew = require("./withStyleNew");
-var _styleUtils = require("./styleUtils");
-var _useStyle = require("./useStyle");
-var _useStyleNew = require("./useStyleNew");
-var _useTheme = require("./useTheme");
+var _useComputedTheme = require("./useComputedTheme.js");
+var _index = require("./InstUISettingsProvider/index.js");
+var _withStyle = require("./withStyle.js");
+var _getComponentThemeOverride = require("./getComponentThemeOverride.js");
+var _withStyleNew = require("./withStyleNew.js");
+var _index2 = require("./styleUtils/index.js");
+var _useStyle = require("./useStyle.js");
+var _useStyleNew = require("./useStyleNew.js");
+var _useTheme = require("./useTheme.js");

package/lib/styleUtils/applyColorModifiers.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.applyColorModifiers = void 0;
+var _uiColorUtils = require("@instructure/ui-color-utils");
+/*
+ * 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.
+ */
+
+// Matches Tokens Studio's HSL modifier math: move L by `amount` (0–1) of the
+// remaining distance toward the endpoint, so the step shrinks as it approaches
+// black/white and never overshoots.
+const modifyLightness = (l, amount, type) => type === 'darken' ? Math.max(0, l - l * amount) : Math.min(1, l + (1 - l) * amount);
+const formatHsla = (h, s, l, a) => {
+  const hh = Math.round(h);
+  const ss = +(s * 100).toFixed(2);
+  const ll = +(l * 100).toFixed(2);
+  return a < 1 ? `hsla(${hh}, ${ss}%, ${ll}%, ${a})` : `hsl(${hh}, ${ss}%, ${ll}%)`;
+};
+const isModifyColor = val => typeof val === 'object' && val !== null && typeof val.value === 'string' && typeof val.modify === 'object' && val.modify !== null;
+const resolveModifyColor = ({
+  value,
+  modify
+}) => {
+  if (modify.type === 'darken' || modify.type === 'lighten') {
+    const {
+      h,
+      s,
+      l,
+      a
+    } = (0, _uiColorUtils.colorToHsla)(value);
+    const newL = modifyLightness(l, modify.value, modify.type);
+    return formatHsla(h, s, newL, a);
+  }
+  return value;
+};
+
+/**
+ * Resolves a component theme object by applying color modifiers to any entries
+ * shaped as `{ value, modify: { type, value } }`. Entries with `modify.type` of
+ * `'darken'` or `'lighten'` are transformed in HSL space using the same math
+ * Tokens Studio applies (`space: "hsl"`): `amount` is a 0–1 fraction of the
+ * remaining distance to black/white. Plain values and unrecognized modifier
+ * types are passed through unchanged. Nested plain objects are walked
+ * recursively so modifiers anywhere in the tree get resolved.
+ *
+ * @param componentTheme - Theme map whose values can be CSS strings, `ModifyColor`
+ *   objects, or nested theme objects containing the same.
+ * @returns A new theme object mirroring the input shape, with every `ModifyColor`
+ *   collapsed to its final resolved color string.
+ */
+const applyColorModifiers = componentTheme => {
+  if (componentTheme == null) return {};
+  const result = {};
+  for (const key of Object.keys(componentTheme)) {
+    const entry = componentTheme[key];
+    if (isModifyColor(entry)) {
+      result[key] = resolveModifyColor(entry);
+    } else if (typeof entry === 'object' && entry !== null && !Array.isArray(entry)) {
+      result[key] = applyColorModifiers(entry);
+    } else {
+      result[key] = entry;
+    }
+  }
+  return result;
+};
+exports.applyColorModifiers = applyColorModifiers;
+var _default = exports.default = applyColorModifiers;

package/lib/styleUtils/index.js

@@ -45,10 +45,10 @@ Object.defineProperty(exports, "mirrorShorthandEdges", {
     return _mirrorShorthandEdges.mirrorShorthandEdges;
   }
 });
-var _ThemeablePropValues = require("./ThemeablePropValues");
-var _makeThemeVars = require("./makeThemeVars");
-var _getShorthandPropValue = require("./getShorthandPropValue");
-var _mirrorShorthandCorners = require("./mirrorShorthandCorners");
-var _mirrorShorthandEdges = require("./mirrorShorthandEdges");
-var _calcSpacingFromShorthand = require("./calcSpacingFromShorthand");
-var _calcFocusOutlineStyles = require("./calcFocusOutlineStyles");
+var _ThemeablePropValues = require("./ThemeablePropValues.js");
+var _makeThemeVars = require("./makeThemeVars.js");
+var _getShorthandPropValue = require("./getShorthandPropValue.js");
+var _mirrorShorthandCorners = require("./mirrorShorthandCorners.js");
+var _mirrorShorthandEdges = require("./mirrorShorthandEdges.js");
+var _calcSpacingFromShorthand = require("./calcSpacingFromShorthand.js");
+var _calcFocusOutlineStyles = require("./calcFocusOutlineStyles.js");

package/lib/styleUtils/mirrorShorthandCorners.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "mirrorShorthandCorners", {
     return _mirrorShorthand.mirrorShorthandCorners;
   }
 });
-var _mirrorShorthand = require("./mirrorShorthand");
+var _mirrorShorthand = require("./mirrorShorthand.js");
 /*
  * The MIT License (MIT)
  *

package/lib/styleUtils/mirrorShorthandEdges.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "mirrorShorthandEdges", {
     return _mirrorShorthand.mirrorShorthandEdges;
   }
 });
-var _mirrorShorthand = require("./mirrorShorthand");
+var _mirrorShorthand = require("./mirrorShorthand.js");
 /*
  * The MIT License (MIT)
  *

package/lib/useStyle.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStyle = exports.default = void 0;
-var _useTheme = require("./useTheme");
-var _getComponentThemeOverride = require("./getComponentThemeOverride");
+var _useTheme = require("./useTheme.js");
+var _getComponentThemeOverride = require("./getComponentThemeOverride.js");
 /*
  * The MIT License (MIT)
  *

package/lib/useStyleNew.js

@@ -4,8 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStyleNew = exports.default = void 0;
-var _useTheme = require("./useTheme");
+var _useTheme = require("./useTheme.js");
 var _mergeDeep = require("@instructure/ui-utils/lib/mergeDeep.js");
+var _applyColorModifiers = require("./styleUtils/applyColorModifiers.js");
 /*
  * The MIT License (MIT)
  *
@@ -70,11 +71,11 @@ const useStyleNew = useStyleParams => {
   const primitives = (0, _mergeDeep.mergeDeep)(theme.newTheme.primitives, primitiveOverrides);
   const semantics = (0, _mergeDeep.mergeDeep)(theme.newTheme.semantics?.(primitives), semanticsOverrides);
   const sharedTokens = (0, _mergeDeep.mergeDeep)(theme.newTheme.sharedTokens?.(semantics), sharedTokensOverrides);
-  const baseComponentTheme = generateComponentTheme ? generateComponentTheme({
+  const baseComponentTheme = (0, _applyColorModifiers.applyColorModifiers)(generateComponentTheme ? generateComponentTheme({
     primitives,
     semantics,
     sharedTokens
-  }) : theme.newTheme.components[componentWithTokensId]?.(semantics);
+  }) : theme.newTheme.components[componentWithTokensId]?.(semantics));
   const componentThemeFromSettingsProvider = (0, _mergeDeep.mergeDeep)(baseComponentTheme, componentOverridesFromSettingsProvider);
   const componentTheme = (0, _mergeDeep.mergeDeep)(componentThemeFromSettingsProvider, typeof themeOverride === 'function' ? themeOverride(componentThemeFromSettingsProvider, themeInContext) : themeOverride);
 

package/lib/withStyle.js

@@ -10,8 +10,8 @@ var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-stat
 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 _getComponentThemeOverride = require("./getComponentThemeOverride.js");
+var _useTheme = require("./useTheme.js");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /*
  * The MIT License (MIT)
@@ -51,7 +51,11 @@ const defaultValues = {
  * ---
  * category: utilities/themes
  * ---
- * used for old (v11 and eariler) theming system
+ * Legacy decorator for the pre-v11.7 theming system. New components should use
+ * `withStyleNew` instead. Override patterns for components decorated with
+ * `withStyle` are documented on the
+ * [Legacy theme overrides](/#legacy-theme-overrides) docs page.
+ *
  * TODO delete when the theme migration is complete
  */
 const withStyle = exports.withStyle = (0, _decorator.decorator)((ComposedComponent, generateStyle, generateComponentTheme) => {