@mui/system 7.0.0-beta.3 → 7.0.0-rc.0

package/modern/cssVars/createCssVarsProvider.d.ts

@@ -35,6 +35,12 @@ export interface CssVarsProviderConfig<ColorScheme extends string> {
    * @default false
    */
   disableTransitionOnChange?: boolean;
+  /**
+   * If `true`, theme values are recalculated when the mode changes.
+   * The `theme.colorSchemes.{mode}.*` nodes will be shallow merged to the top-level of the theme.
+   * @default false
+   */
+  forceThemeRerender?: boolean;
 }
 type Identify<I extends string | undefined, T> = I extends string ? T | { [k in I]: T } : T;
 export interface CreateCssVarsProviderResult<ColorScheme extends string, Identifier extends string | undefined = undefined> {

package/modern/cssVars/createCssVarsProvider.js

@@ -57,6 +57,7 @@ export default function createCssVarsProvider(options) {
       disableNestedContext = false,
       disableStyleSheetGeneration = false,
       defaultMode: initialMode = 'system',
+      forceThemeRerender = false,
       noSsr
     } = props;
     const hasMounted = React.useRef(false);
@@ -108,10 +109,15 @@ export default function createCssVarsProvider(options) {
       mode = ctx.mode;
       colorScheme = ctx.colorScheme;
     }
+    if (process.env.NODE_ENV !== 'production') {
+      if (forceThemeRerender && !restThemeProp.vars) {
+        console.warn(['MUI: The `forceThemeRerender` prop should only be used with CSS theme variables.', 'Note that it will slow down the app when changing between modes, so only do this when you cannot find a better solution.'].join('\n'));
+      }
+    }
+    const calculatedColorScheme = forceThemeRerender && restThemeProp.vars ?
+    // `colorScheme` is undefined on the server and hydration phase
+    colorScheme || restThemeProp.defaultColorScheme : restThemeProp.defaultColorScheme;
     const memoTheme = React.useMemo(() => {
-      // `colorScheme` is undefined on the server and hydration phase
-      const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
-
       // 2. get the `vars` object that refers to the CSS custom properties
       const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
 
@@ -146,7 +152,7 @@ export default function createCssVarsProvider(options) {
         }
       }
       return resolveTheme ? resolveTheme(theme) : theme;
-    }, [restThemeProp, colorScheme, components, colorSchemes, cssVarPrefix]);
+    }, [restThemeProp, calculatedColorScheme, components, colorSchemes, cssVarPrefix]);
 
     // 5. Declaring effects
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
@@ -284,6 +290,10 @@ export default function createCssVarsProvider(options) {
      * The document to attach the attribute to.
      */
     documentNode: PropTypes.any,
+    /**
+     * If `true`, theme values are recalculated when the mode changes.
+     */
+    forceThemeRerender: PropTypes.bool,
     /**
      * The key in the local storage used to store current color scheme.
      */

package/modern/display/display.d.ts

@@ -1,2 +1,3 @@
 import { PropsFor, display } from "../Box/index.js";
-export type DisplayProps = PropsFor<typeof display>;
+export type DisplayProps = PropsFor<typeof display>;
+export default display;

package/modern/flexbox/flexbox.d.ts

@@ -1,2 +1,3 @@
 import { PropsFor, flexbox } from "../Box/index.js";
-export type FlexboxProps = PropsFor<typeof flexbox>;
+export type FlexboxProps = PropsFor<typeof flexbox>;
+export default flexbox;

package/modern/index.d.ts

@@ -27,6 +27,7 @@ export { css, keyframes, StyledEngineProvider, Interpolation, CSSInterpolation,
 export { default as GlobalStyles } from "./GlobalStyles/index.js";
 export type { GlobalStylesProps } from "./GlobalStyles/index.js";
 export * from "./style/index.js";
+export { default as style } from "./style/index.js";
 export * from "./spacing/index.js";
 export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp, unstable_defaultSxConfig } from "./styleFunctionSx/index.js";
 export * from "./styleFunctionSx/index.js";

package/modern/index.js

@@ -1,11 +1,11 @@
 /**
- * @mui/system v7.0.0-beta.3
+ * @mui/system v7.0.0-rc.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
+import _formatErrorMessage from "@mui/utils/formatMuiErrorMessage";
 export { css, keyframes, StyledEngineProvider } from '@mui/styled-engine';
 export { default as GlobalStyles } from "./GlobalStyles/index.js";
 export { default as borders } from "./borders/index.js";
@@ -35,7 +35,7 @@ export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, ex
 // TODO: Remove this function in v6
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export function experimental_sx() {
-  throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: The `experimental_sx` has been moved to `theme.unstable_sx`.' + 'For more details, see https://github.com/mui/material-ui/pull/35150.' : _formatMuiErrorMessage(19));
+  throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: The `experimental_sx` has been moved to `theme.unstable_sx`.' + 'For more details, see https://github.com/mui/material-ui/pull/35150.' : _formatErrorMessage(19));
 }
 export { default as unstable_getThemeValue } from "./getThemeValue/index.js";
 export { default as Box } from "./Box/index.js";

package/modern/palette/palette.d.ts

@@ -1,4 +1,5 @@
 import { PropsFor, SimpleStyleFunction, palette } from "../Box/index.js";
 export const color: SimpleStyleFunction<'color'>;
 export const bgcolor: SimpleStyleFunction<'bgcolor'>;
-export type PaletteProps = PropsFor<typeof palette>;
+export type PaletteProps = PropsFor<typeof palette>;
+export default palette;

package/modern/positions/positions.d.ts

@@ -1,2 +1,3 @@
 import { PropsFor, positions } from "../Box/index.js";
-export type PositionsProps = PropsFor<typeof positions>;
+export type PositionsProps = PropsFor<typeof positions>;
+export default positions;

package/modern/shadows/shadows.d.ts

@@ -1,2 +1,3 @@
 import { PropsFor, shadows } from "../Box/index.js";
-export type ShadowsProps = PropsFor<typeof shadows>;
+export type ShadowsProps = PropsFor<typeof shadows>;
+export default shadows;

package/modern/sizing/sizing.d.ts

@@ -8,4 +8,5 @@ export const minHeight: SimpleStyleFunction<'minHeight'>;
 export const sizeWidth: SimpleStyleFunction<'sizeWidth'>;
 export const sizeHeight: SimpleStyleFunction<'sizeHeight'>;
 export const boxSizing: SimpleStyleFunction<'boxSizing'>;
-export type SizingProps = PropsFor<typeof sizing>;
+export type SizingProps = PropsFor<typeof sizing>;
+export default sizing;

package/modern/spacing/spacing.d.ts

@@ -15,4 +15,5 @@ export const margin: SimpleStyleFunction<'m' | 'mt' | 'mr' | 'mb' | 'ml' | 'mx'
 export type MarginProps = PropsFor<typeof margin>;
 export const padding: SimpleStyleFunction<'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'paddingX' | 'paddingY' | 'paddingInline' | 'paddingInlineStart' | 'paddingInlineEnd' | 'paddingBlock' | 'paddingBlockStart' | 'paddingBlockEnd'>;
 export function getValue(transformer: (prop: SpacingValueType) => SpacingValueType, propValue: SpacingValueType): SpacingValueType;
-export type PaddingProps = PropsFor<typeof padding>;
+export type PaddingProps = PropsFor<typeof padding>;
+export default spacing;

package/modern/spacing/spacing.js

@@ -55,6 +55,12 @@ export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
         }
       }
       if (typeof themeSpacing === 'string') {
+        if (themeSpacing.startsWith('var(') && val === 0) {
+          return 0;
+        }
+        if (themeSpacing.startsWith('var(') && val === 1) {
+          return themeSpacing;
+        }
         return `calc(${val} * ${themeSpacing})`;
       }
       return themeSpacing * val;
@@ -80,6 +86,9 @@ export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
       if (typeof transformed === 'number') {
         return -transformed;
       }
+      if (typeof transformed === 'string' && transformed.startsWith('var(')) {
+        return `calc(-1 * ${transformed})`;
+      }
       return `-${transformed}`;
     };
   }

package/modern/style/style.d.ts

@@ -10,10 +10,10 @@ export interface StyleOptions<PropKey> {
   themeKey?: string;
   transform?: TransformFunction;
 }
-export function style<PropKey extends string, Theme extends object>(options: StyleOptions<PropKey>): StyleFunction<{ [K in PropKey]?: unknown } & {
+export function getPath<T>(obj: T, path: string | undefined, checkVars?: boolean): null | unknown;
+export function getStyleValue(themeMapping: object | ((arg: any) => any), transform: TransformFunction | null, propValueFinal: unknown, userValue?: unknown): any;
+export default function style<PropKey extends string, Theme extends object>(options: StyleOptions<PropKey>): StyleFunction<{ [K in PropKey]?: unknown } & {
   theme?: Theme;
 }> & {
   filterProps: string[];
-};
-export function getPath<T>(obj: T, path: string | undefined, checkVars?: boolean): null | unknown;
-export function getStyleValue(themeMapping: object | ((arg: any) => any), transform: TransformFunction | null, propValueFinal: unknown, userValue?: unknown): any;
+};

package/modern/typography/typography.d.ts

@@ -8,4 +8,5 @@ export const letterSpacing: SimpleStyleFunction<'letterSpacing'>;
 export const lineHeight: SimpleStyleFunction<'lineHeight'>;
 export const textAlign: SimpleStyleFunction<'textAlign'>;
 export const textTransform: SimpleStyleFunction<'textTransform'>;
-export type TypographyProps = PropsFor<typeof typography>;
+export type TypographyProps = PropsFor<typeof typography>;
+export default typography;

package/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "7.0.0-beta.3";
+export const version = "7.0.0-rc.0";
 export const major = Number("7");
 export const minor = Number("0");
 export const patch = Number("0");
-export const prerelease = "beta.3";
+export const prerelease = "rc.0";
 export default version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "7.0.0-beta.3",
+  "version": "7.0.0-rc.0",
   "private": false,
   "author": "MUI Team",
   "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
@@ -26,14 +26,14 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.26.9",
+    "@babel/runtime": "^7.26.10",
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/types": "^7.2.23",
-    "@mui/private-theming": "7.0.0-beta.3",
-    "@mui/styled-engine": "7.0.0-beta.3",
-    "@mui/utils": "7.0.0-beta.3"
+    "@mui/styled-engine": "7.0.0-rc.0",
+    "@mui/private-theming": "7.0.0-rc.0",
+    "@mui/types": "^7.3.1",
+    "@mui/utils": "7.0.0-rc.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/palette/palette.d.ts

@@ -1,4 +1,5 @@
 import { PropsFor, SimpleStyleFunction, palette } from "../Box/index.js";
 export const color: SimpleStyleFunction<'color'>;
 export const bgcolor: SimpleStyleFunction<'bgcolor'>;
-export type PaletteProps = PropsFor<typeof palette>;
+export type PaletteProps = PropsFor<typeof palette>;
+export default palette;

package/positions/positions.d.ts

@@ -1,2 +1,3 @@
 import { PropsFor, positions } from "../Box/index.js";
-export type PositionsProps = PropsFor<typeof positions>;
+export type PositionsProps = PropsFor<typeof positions>;
+export default positions;

package/shadows/shadows.d.ts

@@ -1,2 +1,3 @@
 import { PropsFor, shadows } from "../Box/index.js";
-export type ShadowsProps = PropsFor<typeof shadows>;
+export type ShadowsProps = PropsFor<typeof shadows>;
+export default shadows;

package/sizing/sizing.d.ts

@@ -8,4 +8,5 @@ export const minHeight: SimpleStyleFunction<'minHeight'>;
 export const sizeWidth: SimpleStyleFunction<'sizeWidth'>;
 export const sizeHeight: SimpleStyleFunction<'sizeHeight'>;
 export const boxSizing: SimpleStyleFunction<'boxSizing'>;
-export type SizingProps = PropsFor<typeof sizing>;
+export type SizingProps = PropsFor<typeof sizing>;
+export default sizing;

package/spacing/spacing.d.ts

@@ -15,4 +15,5 @@ export const margin: SimpleStyleFunction<'m' | 'mt' | 'mr' | 'mb' | 'ml' | 'mx'
 export type MarginProps = PropsFor<typeof margin>;
 export const padding: SimpleStyleFunction<'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'paddingX' | 'paddingY' | 'paddingInline' | 'paddingInlineStart' | 'paddingInlineEnd' | 'paddingBlock' | 'paddingBlockStart' | 'paddingBlockEnd'>;
 export function getValue(transformer: (prop: SpacingValueType) => SpacingValueType, propValue: SpacingValueType): SpacingValueType;
-export type PaddingProps = PropsFor<typeof padding>;
+export type PaddingProps = PropsFor<typeof padding>;
+export default spacing;

package/spacing/spacing.js

@@ -70,6 +70,12 @@ function createUnaryUnit(theme, themeKey, defaultValue, propName) {
         }
       }
       if (typeof themeSpacing === 'string') {
+        if (themeSpacing.startsWith('var(') && val === 0) {
+          return 0;
+        }
+        if (themeSpacing.startsWith('var(') && val === 1) {
+          return themeSpacing;
+        }
         return `calc(${val} * ${themeSpacing})`;
       }
       return themeSpacing * val;
@@ -95,6 +101,9 @@ function createUnaryUnit(theme, themeKey, defaultValue, propName) {
       if (typeof transformed === 'number') {
         return -transformed;
       }
+      if (typeof transformed === 'string' && transformed.startsWith('var(')) {
+        return `calc(-1 * ${transformed})`;
+      }
       return `-${transformed}`;
     };
   }

package/style/style.d.ts

@@ -10,10 +10,10 @@ export interface StyleOptions<PropKey> {
   themeKey?: string;
   transform?: TransformFunction;
 }
-export function style<PropKey extends string, Theme extends object>(options: StyleOptions<PropKey>): StyleFunction<{ [K in PropKey]?: unknown } & {
+export function getPath<T>(obj: T, path: string | undefined, checkVars?: boolean): null | unknown;
+export function getStyleValue(themeMapping: object | ((arg: any) => any), transform: TransformFunction | null, propValueFinal: unknown, userValue?: unknown): any;
+export default function style<PropKey extends string, Theme extends object>(options: StyleOptions<PropKey>): StyleFunction<{ [K in PropKey]?: unknown } & {
   theme?: Theme;
 }> & {
   filterProps: string[];
-};
-export function getPath<T>(obj: T, path: string | undefined, checkVars?: boolean): null | unknown;
-export function getStyleValue(themeMapping: object | ((arg: any) => any), transform: TransformFunction | null, propValueFinal: unknown, userValue?: unknown): any;
+};