@mui/material 9.0.1 → 9.1.0

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;