@mui/material 9.0.1 → 9.1.1

package/styles/createThemeNoVars.d.ts

@@ -3,6 +3,7 @@ import { Mixins, MixinsOptions } from "./createMixins.js";
 import { Palette, PaletteOptions } from "./createPalette.js";
 import { TypographyVariants, TypographyVariantsOptions } from "./createTypography.js";
 import { Shadows } from "./shadows.js";
+import { Motion, MotionOptions } from "./createMotion.js";
 import { Transitions, TransitionsOptions } from "./createTransitions.js";
 import { ZIndex, ZIndexOptions } from "./zIndex.js";
 import { Components } from "./components.js";
@@ -25,6 +26,7 @@ type CssVarsOptions = CssThemeVariables extends {
 export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'>, CssVarsOptions {
   mixins?: MixinsOptions | undefined;
   components?: Components<Omit<Theme, 'components'>> | undefined;
+  motion?: MotionOptions | undefined;
   palette?: PaletteOptions | undefined;
   shadows?: Shadows | undefined;
   shape?: ShapeOptions | undefined;
@@ -37,6 +39,7 @@ export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'>, CssVar
 }
 export interface BaseTheme extends SystemTheme {
   mixins: Mixins;
+  motion: Motion;
   palette: Palette & (CssThemeVariables extends {
     enabled: true;
   } ? CssVarsPalette : {});

package/styles/createThemeNoVars.js

@@ -17,6 +17,7 @@ var _createPalette = _interopRequireDefault(require("./createPalette"));
 var _createTypography = _interopRequireDefault(require("./createTypography"));
 var _shadows = _interopRequireDefault(require("./shadows"));
 var _createTransitions = _interopRequireDefault(require("./createTransitions"));
+var _createMotion = _interopRequireDefault(require("./createMotion"));
 var _zIndex = _interopRequireDefault(require("./zIndex"));
 var _stringifyTheme = require("./stringifyTheme");
 function coefficientToPercentage(coefficient) {
@@ -77,6 +78,7 @@ function createThemeNoVars(options = {}, ...args) {
     mixins: mixinsInput = {},
     spacing: spacingInput,
     palette: paletteInput = {},
+    motion: motionInput = {},
     transitions: transitionsInput = {},
     typography: typographyInput = {},
     shape: shapeInput,
@@ -102,6 +104,7 @@ function createThemeNoVars(options = {}, ...args) {
     // Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
     shadows: _shadows.default.slice(),
     typography: (0, _createTypography.default)(palette, typographyInput),
+    motion: (0, _createMotion.default)(motionInput),
     transitions: (0, _createTransitions.default)(transitionsInput),
     zIndex: {
       ..._zIndex.default
@@ -109,6 +112,8 @@ function createThemeNoVars(options = {}, ...args) {
   });
   muiTheme = (0, _deepmerge.default)(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => (0, _deepmerge.default)(acc, argument), muiTheme);
+  // `reducedMotion` is owned by `theme.motion`; remove stale values preserved by systemCreateTheme.
+  delete muiTheme.transitions.reducedMotion;
   if (process.env.NODE_ENV !== 'production') {
     // TODO v6: Refactor to use globalStateClassesMapping from @mui/utils once `readOnly` state class is used in Rating component.
     const stateClasses = ['active', 'checked', 'completed', 'disabled', 'error', 'expanded', 'focused', 'focusVisible', 'required', 'selected'];

package/styles/createThemeNoVars.mjs

@@ -9,6 +9,7 @@ import createPalette from "./createPalette.mjs";
 import createTypography from "./createTypography.mjs";
 import shadows from "./shadows.mjs";
 import createTransitions from "./createTransitions.mjs";
+import createMotion from "./createMotion.mjs";
 import zIndex from "./zIndex.mjs";
 import { stringifyTheme } from "./stringifyTheme.mjs";
 function coefficientToPercentage(coefficient) {
@@ -69,6 +70,7 @@ function createThemeNoVars(options = {}, ...args) {
     mixins: mixinsInput = {},
     spacing: spacingInput,
     palette: paletteInput = {},
+    motion: motionInput = {},
     transitions: transitionsInput = {},
     typography: typographyInput = {},
     shape: shapeInput,
@@ -94,6 +96,7 @@ function createThemeNoVars(options = {}, ...args) {
     // Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
     shadows: shadows.slice(),
     typography: createTypography(palette, typographyInput),
+    motion: createMotion(motionInput),
     transitions: createTransitions(transitionsInput),
     zIndex: {
       ...zIndex
@@ -101,6 +104,8 @@ function createThemeNoVars(options = {}, ...args) {
   });
   muiTheme = deepmerge(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
+  // `reducedMotion` is owned by `theme.motion`; remove stale values preserved by systemCreateTheme.
+  delete muiTheme.transitions.reducedMotion;
   if (process.env.NODE_ENV !== 'production') {
     // TODO v6: Refactor to use globalStateClassesMapping from @mui/utils once `readOnly` state class is used in Rating component.
     const stateClasses = ['active', 'checked', 'completed', 'disabled', 'error', 'expanded', 'focused', 'focusVisible', 'required', 'selected'];

package/styles/createTransitions.d.mts

@@ -18,7 +18,11 @@ export const duration: Duration;
 export interface TransitionsOptions {
   easing?: Partial<Easing> | undefined;
   duration?: Partial<Duration> | undefined;
-  create?: ((props: string | string[], options?: Partial<{
+  create?: ((props?: string | string[], options?: Partial<{
+    duration: number | string;
+    easing: string;
+    delay: number | string;
+  }>) => string) | ((props: string | string[], options?: Partial<{
     duration: number | string;
     easing: string;
     delay: number | string;
@@ -31,7 +35,7 @@ export interface TransitionsOptions {
  * @param props
  * @param options
  */
-export function create(props: string | string[], options?: Partial<{
+export function create(props?: string | string[], options?: Partial<{
   duration: number | string;
   easing: string;
   delay: number | string;

package/styles/createTransitions.d.ts

@@ -18,7 +18,11 @@ export const duration: Duration;
 export interface TransitionsOptions {
   easing?: Partial<Easing> | undefined;
   duration?: Partial<Duration> | undefined;
-  create?: ((props: string | string[], options?: Partial<{
+  create?: ((props?: string | string[], options?: Partial<{
+    duration: number | string;
+    easing: string;
+    delay: number | string;
+  }>) => string) | ((props: string | string[], options?: Partial<{
     duration: number | string;
     easing: string;
     delay: number | string;
@@ -31,7 +35,7 @@ export interface TransitionsOptions {
  * @param props
  * @param options
  */
-export function create(props: string | string[], options?: Partial<{
+export function create(props?: string | string[], options?: Partial<{
   duration: number | string;
   easing: string;
   delay: number | string;

package/styles/createTransitions.js

@@ -5,6 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = createTransitions;
 exports.easing = exports.duration = void 0;
+const DEFAULT_TRANSITION_PROPS = ['all'];
+const EMPTY_OPTIONS = {};
+
 // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
 // to learn the context in which each easing should be used.
 const easing = exports.easing = {
@@ -47,15 +50,19 @@ function getAutoHeightDuration(height) {
   return Math.min(Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10), 3000);
 }
 function createTransitions(inputTransitions) {
+  const transitions = {
+    ...inputTransitions
+  };
+  delete transitions.reducedMotion;
   const mergedEasing = {
     ...easing,
-    ...inputTransitions.easing
+    ...transitions.easing
   };
   const mergedDuration = {
     ...duration,
-    ...inputTransitions.duration
+    ...transitions.duration
   };
-  const create = (props = ['all'], options = {}) => {
+  const createTransitionValue = (props = DEFAULT_TRANSITION_PROPS, options = EMPTY_OPTIONS) => {
     const {
       duration: durationOption = mergedDuration.standard,
       easing: easingOption = mergedEasing.easeInOut,
@@ -86,10 +93,11 @@ function createTransitions(inputTransitions) {
     }
     return (Array.isArray(props) ? props : [props]).map(animatedProp => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`).join(',');
   };
+  const create = transitions.create ?? createTransitionValue;
   return {
     getAutoHeightDuration,
     create,
-    ...inputTransitions,
+    ...transitions,
     easing: mergedEasing,
     duration: mergedDuration
   };

package/styles/createTransitions.mjs

@@ -1,3 +1,6 @@
+const DEFAULT_TRANSITION_PROPS = ['all'];
+const EMPTY_OPTIONS = {};
+
 // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
 // to learn the context in which each easing should be used.
 export const easing = {
@@ -40,15 +43,19 @@ function getAutoHeightDuration(height) {
   return Math.min(Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10), 3000);
 }
 export default function createTransitions(inputTransitions) {
+  const transitions = {
+    ...inputTransitions
+  };
+  delete transitions.reducedMotion;
   const mergedEasing = {
     ...easing,
-    ...inputTransitions.easing
+    ...transitions.easing
   };
   const mergedDuration = {
     ...duration,
-    ...inputTransitions.duration
+    ...transitions.duration
   };
-  const create = (props = ['all'], options = {}) => {
+  const createTransitionValue = (props = DEFAULT_TRANSITION_PROPS, options = EMPTY_OPTIONS) => {
     const {
       duration: durationOption = mergedDuration.standard,
       easing: easingOption = mergedEasing.easeInOut,
@@ -79,10 +86,11 @@ export default function createTransitions(inputTransitions) {
     }
     return (Array.isArray(props) ? props : [props]).map(animatedProp => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`).join(',');
   };
+  const create = transitions.create ?? createTransitionValue;
   return {
     getAutoHeightDuration,
     create,
-    ...inputTransitions,
+    ...transitions,
     easing: mergedEasing,
     duration: mergedDuration
   };

package/styles/enhanceHighContrast.d.mts

@@ -0,0 +1,70 @@
+import { Theme } from "./createTheme.mjs";
+export interface HighContrastTokens {
+  /**
+   * Color for disabled elements.
+   * @default 'GrayText'
+   */
+  disabled?: string | undefined;
+  /**
+   * Color for error states.
+   * @default 'ActiveText'
+   */
+  error?: string | undefined;
+  /**
+   * Background color for selected items.
+   * @default 'SelectedItem'
+   */
+  selectedBackground?: string | undefined;
+  /**
+   * Text color on selected items.
+   * @default 'SelectedItemText'
+   */
+  selectedText?: string | undefined;
+  /**
+   * Background color for active/toggled controls.
+   * @default 'Highlight'
+   */
+  activeBackground?: string | undefined;
+  /**
+   * Text color on active/toggled controls.
+   * @default 'HighlightText'
+   */
+  activeText?: string | undefined;
+  /**
+   * Border color for interactive controls.
+   * @default 'ButtonBorder'
+   */
+  buttonBorder?: string | undefined;
+  /**
+   * Text/icon color on buttons.
+   * @default 'ButtonText'
+   */
+  buttonText?: string | undefined;
+  /**
+   * Background color for the page/canvas.
+   * @default 'Canvas'
+   */
+  canvas?: string | undefined;
+}
+/**
+ * Enhances a theme with styles for Windows High Contrast Mode (forced-colors).
+ *
+ * Accepts a fully-created theme, merges in HCM component overrides using arrays
+ * so that Emotion emits each entry as a separate CSS rule and the browser
+ * cascade (rather than JS object merging) resolves specificity.
+ *
+ * @param themeInput - The theme to enhance.
+ * @param tokens - Override any of the default system color tokens.
+ * @returns The enhanced theme (same type as the input).
+ *
+ * @example
+ * // Use defaults
+ * const theme = enhanceHighContrast(createTheme({ palette: { ... } }));
+ *
+ * @example
+ * // Override specific tokens
+ * const theme = enhanceHighContrast(createTheme(), { disabled: 'ButtonText' });
+ */
+export default function enhanceHighContrast<T extends {
+  components?: Theme['components'] | undefined;
+}>(themeInput: T, tokens?: HighContrastTokens): T;

package/styles/enhanceHighContrast.d.ts

@@ -0,0 +1,70 @@
+import { Theme } from "./createTheme.js";
+export interface HighContrastTokens {
+  /**
+   * Color for disabled elements.
+   * @default 'GrayText'
+   */
+  disabled?: string | undefined;
+  /**
+   * Color for error states.
+   * @default 'ActiveText'
+   */
+  error?: string | undefined;
+  /**
+   * Background color for selected items.
+   * @default 'SelectedItem'
+   */
+  selectedBackground?: string | undefined;
+  /**
+   * Text color on selected items.
+   * @default 'SelectedItemText'
+   */
+  selectedText?: string | undefined;
+  /**
+   * Background color for active/toggled controls.
+   * @default 'Highlight'
+   */
+  activeBackground?: string | undefined;
+  /**
+   * Text color on active/toggled controls.
+   * @default 'HighlightText'
+   */
+  activeText?: string | undefined;
+  /**
+   * Border color for interactive controls.
+   * @default 'ButtonBorder'
+   */
+  buttonBorder?: string | undefined;
+  /**
+   * Text/icon color on buttons.
+   * @default 'ButtonText'
+   */
+  buttonText?: string | undefined;
+  /**
+   * Background color for the page/canvas.
+   * @default 'Canvas'
+   */
+  canvas?: string | undefined;
+}
+/**
+ * Enhances a theme with styles for Windows High Contrast Mode (forced-colors).
+ *
+ * Accepts a fully-created theme, merges in HCM component overrides using arrays
+ * so that Emotion emits each entry as a separate CSS rule and the browser
+ * cascade (rather than JS object merging) resolves specificity.
+ *
+ * @param themeInput - The theme to enhance.
+ * @param tokens - Override any of the default system color tokens.
+ * @returns The enhanced theme (same type as the input).
+ *
+ * @example
+ * // Use defaults
+ * const theme = enhanceHighContrast(createTheme({ palette: { ... } }));
+ *
+ * @example
+ * // Override specific tokens
+ * const theme = enhanceHighContrast(createTheme(), { disabled: 'ButtonText' });
+ */
+export default function enhanceHighContrast<T extends {
+  components?: Theme['components'] | undefined;
+}>(themeInput: T, tokens?: HighContrastTokens): T;