@mui/material 6.0.0-alpha.8 → 6.0.0-beta.0

package/node/zero-styled/index.js

@@ -4,13 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createUseThemeProps = createUseThemeProps;
 Object.defineProperty(exports, "css", {
   enumerable: true,
   get: function () {
     return _system.css;
   }
 });
+exports.globalCss = globalCss;
+exports.internal_createExtendSxProp = internal_createExtendSxProp;
 Object.defineProperty(exports, "keyframes", {
   enumerable: true,
   get: function () {
@@ -23,10 +24,37 @@ Object.defineProperty(exports, "styled", {
     return _styled.default;
   }
 });
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTheme.default;
+  }
+});
+var React = _interopRequireWildcard(require("react"));
+var _styleFunctionSx = require("@mui/system/styleFunctionSx");
+var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
+var _GlobalStyles = _interopRequireDefault(require("../GlobalStyles"));
+var _jsxRuntime = require("react/jsx-runtime");
 var _system = require("@mui/system");
 var _styled = _interopRequireDefault(require("../styles/styled"));
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function createUseThemeProps(name) {
-  return _useThemeProps.default;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function globalCss(styles) {
+  return function GlobalStylesWrapper(props) {
+    return (
+      /*#__PURE__*/
+      // Pigment CSS `globalCss` support callback with theme inside an object but `GlobalStyles` support theme as a callback value.
+      (0, _jsxRuntime.jsx)(_GlobalStyles.default, {
+        styles: typeof styles === 'function' ? theme => styles({
+          theme,
+          ...props
+        }) : styles
+      })
+    );
+  };
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function internal_createExtendSxProp() {
+  return _styleFunctionSx.extendSxProp;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.0.0-alpha.8",
+  "version": "6.0.0-beta.0",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -27,25 +27,26 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
+    "@babel/runtime": "^7.24.7",
     "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "react-is": "^18.2.0",
+    "react-is": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "@mui/base": "5.0.0-beta.46",
+    "@mui/base": "5.0.0-beta.53",
+    "@mui/core-downloads-tracker": "^6.0.0-beta.0",
+    "@mui/system": "6.0.0-beta.0",
     "@mui/types": "^7.2.14",
-    "@mui/core-downloads-tracker": "^6.0.0-alpha.8",
-    "@mui/utils": "^6.0.0-alpha.8",
-    "@mui/system": "^6.0.0-alpha.8"
+    "@mui/utils": "6.0.0-beta.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
     "@types/react": "^17.0.0 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "@mui/material-pigment-css": "^6.0.0-alpha.13"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -56,6 +57,9 @@
     },
     "@emotion/styled": {
       "optional": true
+    },
+    "@mui/material-pigment-css": {
+      "optional": true
     }
   },
   "sideEffects": false,
@@ -66,6 +70,18 @@
   "engines": {
     "node": ">=12.0.0"
   },
+  "pigment-css": {
+    "vite": {
+      "include": [
+        "prop-types",
+        "react-is",
+        "hoist-non-react-statics",
+        "react",
+        "react-dom",
+        "@emotion/react"
+      ]
+    }
+  },
   "module": "./index.js",
   "types": "./index.d.ts"
 }

package/styles/CssVarsProvider.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SupportedColorScheme } from './experimental_extendTheme';
+import { SupportedColorScheme } from './extendTheme';
 declare const CssVarsProvider: (props: React.PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
     theme?: {
         cssVarPrefix?: string | undefined;
@@ -16,5 +16,7 @@ declare const CssVarsProvider: (props: React.PropsWithChildren<Partial<import("@
     storageWindow?: Window | null | undefined;
     disableNestedContext?: boolean | undefined;
     disableStyleSheetGeneration?: boolean | undefined;
-}>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
-export { useColorScheme, getInitColorSchemeScript, CssVarsProvider as Experimental_CssVarsProvider, };
+}>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, deprecatedGetInitColorSchemeScript: typeof import("@mui/system/InitColorSchemeScript").default;
+declare function Experimental_CssVarsProvider(props: any): React.JSX.Element;
+declare const getInitColorSchemeScript: typeof deprecatedGetInitColorSchemeScript;
+export { useColorScheme, CssVarsProvider, getInitColorSchemeScript, Experimental_CssVarsProvider };

package/styles/CssVarsProvider.js

@@ -1,27 +1,27 @@
 'use client';
 
-// do not remove the following import (https://github.com/microsoft/TypeScript/issues/29808#issuecomment-1320713018)
-/* eslint-disable @typescript-eslint/no-unused-vars */
-// @ts-ignore
+import * as React from 'react';
 import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
 import styleFunctionSx from '@mui/system/styleFunctionSx';
-import experimental_extendTheme from './experimental_extendTheme';
+import extendTheme from './extendTheme';
 import createTypography from './createTypography';
 import THEME_ID from './identifier';
-const defaultTheme = experimental_extendTheme();
+import { defaultConfig } from '../InitColorSchemeScript/InitColorSchemeScript';
+import { jsx as _jsx } from "react/jsx-runtime";
+const defaultTheme = extendTheme();
 const {
   CssVarsProvider,
   useColorScheme,
-  getInitColorSchemeScript
+  getInitColorSchemeScript: deprecatedGetInitColorSchemeScript
 } = createCssVarsProvider({
   themeId: THEME_ID,
   theme: defaultTheme,
-  attribute: 'data-mui-color-scheme',
-  modeStorageKey: 'mui-mode',
-  colorSchemeStorageKey: 'mui-color-scheme',
+  attribute: defaultConfig.attribute,
+  colorSchemeStorageKey: defaultConfig.colorSchemeStorageKey,
+  modeStorageKey: defaultConfig.modeStorageKey,
   defaultColorScheme: {
-    light: 'light',
-    dark: 'dark'
+    light: defaultConfig.defaultLightColorScheme,
+    dark: defaultConfig.defaultDarkColorScheme
   },
   resolveTheme: theme => {
     const newTheme = {
@@ -37,4 +37,27 @@ const {
     return newTheme;
   }
 });
-export { useColorScheme, getInitColorSchemeScript, CssVarsProvider as Experimental_CssVarsProvider };
+let warnedOnce = false;
+
+// TODO: remove in v7
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function Experimental_CssVarsProvider(props) {
+  if (!warnedOnce) {
+    console.warn(['MUI: The Experimental_CssVarsProvider component has been stabilized.', '', "You should use `import { CssVarsProvider } from '@mui/material/styles'`"].join('\n'));
+    warnedOnce = true;
+  }
+  return /*#__PURE__*/_jsx(CssVarsProvider, {
+    ...props
+  });
+}
+let warnedInitScriptOnce = false;
+
+// TODO: remove in v7
+const getInitColorSchemeScript = params => {
+  if (!warnedInitScriptOnce) {
+    console.warn(['MUI: The getInitColorSchemeScript function has been deprecated.', '', "You should use `import InitColorSchemeScript from '@mui/material/InitColorSchemeScript'`", 'and replace the function call with `<InitColorSchemeScript />` instead.'].join('\n'));
+    warnedInitScriptOnce = true;
+  }
+  return deprecatedGetInitColorSchemeScript(params);
+};
+export { useColorScheme, CssVarsProvider, getInitColorSchemeScript, Experimental_CssVarsProvider };

package/styles/createTheme.js

@@ -45,7 +45,7 @@ Please use another name.` : _formatMuiErrorMessage(18));
     const traverse = (node, component) => {
       let key;
 
-      // eslint-disable-next-line guard-for-in, no-restricted-syntax
+      // eslint-disable-next-line guard-for-in
       for (key in node) {
         const child = node[key];
         if (stateClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {

package/styles/createTransitions.js

@@ -36,8 +36,8 @@ function getAutoHeightDuration(height) {
   }
   const constant = height / 36;
 
-  // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
-  return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
+  // https://www.desmos.com/calculator/vbrp3ggqet
+  return Math.min(Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10), 3000);
 }
 export default function createTransitions(inputTransitions) {
   const mergedEasing = {

package/styles/experimental_extendTheme.js

@@ -1,355 +1,9 @@
-import deepmerge from '@mui/utils/deepmerge';
-import { unstable_createGetCssVar as systemCreateGetCssVar, createSpacing } from '@mui/system';
-import { createUnarySpacing } from '@mui/system/spacing';
-import { prepareCssVars, prepareTypographyVars } from '@mui/system/cssVars';
-import styleFunctionSx, { unstable_defaultSxConfig as defaultSxConfig } from '@mui/system/styleFunctionSx';
-import { private_safeColorChannel as safeColorChannel, private_safeAlpha as safeAlpha, private_safeDarken as safeDarken, private_safeLighten as safeLighten, private_safeEmphasize as safeEmphasize, hslToRgb } from '@mui/system/colorManipulator';
-import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar';
-import createThemeWithoutVars from './createTheme';
-import getOverlayAlpha from './getOverlayAlpha';
-import defaultGetSelector from './createGetSelector';
-const defaultDarkOverlays = [...Array(25)].map((_, index) => {
-  if (index === 0) {
-    return undefined;
-  }
-  const overlay = getOverlayAlpha(index);
-  return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
-});
-function assignNode(obj, keys) {
-  keys.forEach(k => {
-    if (!obj[k]) {
-      obj[k] = {};
-    }
-  });
-}
-function setColor(obj, key, defaultValue) {
-  if (!obj[key] && defaultValue) {
-    obj[key] = defaultValue;
-  }
-}
-function toRgb(color) {
-  if (!color || !color.startsWith('hsl')) {
-    return color;
-  }
-  return hslToRgb(color);
-}
-function setColorChannel(obj, key) {
-  if (!(`${key}Channel` in obj)) {
-    // custom channel token is not provided, generate one.
-    // if channel token can't be generated, show a warning.
-    obj[`${key}Channel`] = safeColorChannel(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, for example "12 12 12") or undefined if you want to remove the channel token.`);
-  }
-}
-function getSpacingVal(spacingInput) {
-  if (typeof spacingInput === 'number') {
-    return `${spacingInput}px`;
-  }
-  if (typeof spacingInput === 'string') {
-    return spacingInput;
-  }
-  if (typeof spacingInput === 'function') {
-    return getSpacingVal(spacingInput(1));
-  }
-  if (Array.isArray(spacingInput)) {
-    return spacingInput;
-  }
-  return '8px';
-}
-const silent = fn => {
-  try {
-    return fn();
-  } catch (error) {
-    // ignore error
-  }
-  return undefined;
-};
-export const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix);
-export default function extendTheme(options = {}, ...args) {
-  const {
-    colorSchemes: colorSchemesInput = {},
-    cssVarPrefix = 'mui',
-    shouldSkipGeneratingVar = defaultShouldSkipGeneratingVar,
-    getSelector,
-    ...input
-  } = options;
-  const getCssVar = createGetCssVar(cssVarPrefix);
-  const {
-    palette: lightPalette,
-    ...muiTheme
-  } = createThemeWithoutVars({
-    ...input,
-    ...(colorSchemesInput.light && {
-      palette: colorSchemesInput.light?.palette
-    })
-  });
-  const {
-    palette: darkPalette
-  } = createThemeWithoutVars({
-    palette: {
-      mode: 'dark',
-      ...colorSchemesInput.dark?.palette
-    }
-  });
-  let theme = {
-    defaultColorScheme: 'light',
-    ...muiTheme,
-    cssVarPrefix,
-    getCssVar,
-    colorSchemes: {
-      ...colorSchemesInput,
-      light: {
-        ...colorSchemesInput.light,
-        palette: lightPalette,
-        opacity: {
-          inputPlaceholder: 0.42,
-          inputUnderline: 0.42,
-          switchTrackDisabled: 0.12,
-          switchTrack: 0.38,
-          ...colorSchemesInput.light?.opacity
-        },
-        overlays: colorSchemesInput.light?.overlays || []
-      },
-      dark: {
-        ...colorSchemesInput.dark,
-        palette: darkPalette,
-        opacity: {
-          inputPlaceholder: 0.5,
-          inputUnderline: 0.7,
-          switchTrackDisabled: 0.2,
-          switchTrack: 0.3,
-          ...colorSchemesInput.dark?.opacity
-        },
-        overlays: colorSchemesInput.dark?.overlays || defaultDarkOverlays
-      }
-    },
-    font: {
-      ...prepareTypographyVars(muiTheme.typography),
-      ...muiTheme.font
-    },
-    spacing: getSpacingVal(input.spacing)
-  };
-  Object.keys(theme.colorSchemes).forEach(key => {
-    const palette = theme.colorSchemes[key].palette;
-    const setCssVarColor = cssVar => {
-      const tokens = cssVar.split('-');
-      const color = tokens[1];
-      const colorToken = tokens[2];
-      return getCssVar(cssVar, palette[color][colorToken]);
-    };
-
-    // attach black & white channels to common node
-    if (key === 'light') {
-      setColor(palette.common, 'background', '#fff');
-      setColor(palette.common, 'onBackground', '#000');
-    } else {
-      setColor(palette.common, 'background', '#000');
-      setColor(palette.common, 'onBackground', '#fff');
-    }
-
-    // assign component variables
-    assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Button', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
-    if (key === 'light') {
-      setColor(palette.Alert, 'errorColor', safeDarken(palette.error.light, 0.6));
-      setColor(palette.Alert, 'infoColor', safeDarken(palette.info.light, 0.6));
-      setColor(palette.Alert, 'successColor', safeDarken(palette.success.light, 0.6));
-      setColor(palette.Alert, 'warningColor', safeDarken(palette.warning.light, 0.6));
-      setColor(palette.Alert, 'errorFilledBg', setCssVarColor('palette-error-main'));
-      setColor(palette.Alert, 'infoFilledBg', setCssVarColor('palette-info-main'));
-      setColor(palette.Alert, 'successFilledBg', setCssVarColor('palette-success-main'));
-      setColor(palette.Alert, 'warningFilledBg', setCssVarColor('palette-warning-main'));
-      setColor(palette.Alert, 'errorFilledColor', silent(() => lightPalette.getContrastText(palette.error.main)));
-      setColor(palette.Alert, 'infoFilledColor', silent(() => lightPalette.getContrastText(palette.info.main)));
-      setColor(palette.Alert, 'successFilledColor', silent(() => lightPalette.getContrastText(palette.success.main)));
-      setColor(palette.Alert, 'warningFilledColor', silent(() => lightPalette.getContrastText(palette.warning.main)));
-      setColor(palette.Alert, 'errorStandardBg', safeLighten(palette.error.light, 0.9));
-      setColor(palette.Alert, 'infoStandardBg', safeLighten(palette.info.light, 0.9));
-      setColor(palette.Alert, 'successStandardBg', safeLighten(palette.success.light, 0.9));
-      setColor(palette.Alert, 'warningStandardBg', safeLighten(palette.warning.light, 0.9));
-      setColor(palette.Alert, 'errorIconColor', setCssVarColor('palette-error-main'));
-      setColor(palette.Alert, 'infoIconColor', setCssVarColor('palette-info-main'));
-      setColor(palette.Alert, 'successIconColor', setCssVarColor('palette-success-main'));
-      setColor(palette.Alert, 'warningIconColor', setCssVarColor('palette-warning-main'));
-      setColor(palette.AppBar, 'defaultBg', setCssVarColor('palette-grey-100'));
-      setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-400'));
-      setColor(palette.Button, 'inheritContainedBg', setCssVarColor('palette-grey-300'));
-      setColor(palette.Button, 'inheritContainedHoverBg', setCssVarColor('palette-grey-A100'));
-      setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-400'));
-      setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-700'));
-      setColor(palette.Chip, 'defaultIconColor', setCssVarColor('palette-grey-700'));
-      setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
-      setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
-      setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
-      setColor(palette.LinearProgress, 'primaryBg', safeLighten(palette.primary.main, 0.62));
-      setColor(palette.LinearProgress, 'secondaryBg', safeLighten(palette.secondary.main, 0.62));
-      setColor(palette.LinearProgress, 'errorBg', safeLighten(palette.error.main, 0.62));
-      setColor(palette.LinearProgress, 'infoBg', safeLighten(palette.info.main, 0.62));
-      setColor(palette.LinearProgress, 'successBg', safeLighten(palette.success.main, 0.62));
-      setColor(palette.LinearProgress, 'warningBg', safeLighten(palette.warning.main, 0.62));
-      setColor(palette.Skeleton, 'bg', `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.11)`);
-      setColor(palette.Slider, 'primaryTrack', safeLighten(palette.primary.main, 0.62));
-      setColor(palette.Slider, 'secondaryTrack', safeLighten(palette.secondary.main, 0.62));
-      setColor(palette.Slider, 'errorTrack', safeLighten(palette.error.main, 0.62));
-      setColor(palette.Slider, 'infoTrack', safeLighten(palette.info.main, 0.62));
-      setColor(palette.Slider, 'successTrack', safeLighten(palette.success.main, 0.62));
-      setColor(palette.Slider, 'warningTrack', safeLighten(palette.warning.main, 0.62));
-      const snackbarContentBackground = safeEmphasize(palette.background.default, 0.8);
-      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
-      setColor(palette.SnackbarContent, 'color', silent(() => lightPalette.getContrastText(snackbarContentBackground)));
-      setColor(palette.SpeedDialAction, 'fabHoverBg', safeEmphasize(palette.background.paper, 0.15));
-      setColor(palette.StepConnector, 'border', setCssVarColor('palette-grey-400'));
-      setColor(palette.StepContent, 'border', setCssVarColor('palette-grey-400'));
-      setColor(palette.Switch, 'defaultColor', setCssVarColor('palette-common-white'));
-      setColor(palette.Switch, 'defaultDisabledColor', setCssVarColor('palette-grey-100'));
-      setColor(palette.Switch, 'primaryDisabledColor', safeLighten(palette.primary.main, 0.62));
-      setColor(palette.Switch, 'secondaryDisabledColor', safeLighten(palette.secondary.main, 0.62));
-      setColor(palette.Switch, 'errorDisabledColor', safeLighten(palette.error.main, 0.62));
-      setColor(palette.Switch, 'infoDisabledColor', safeLighten(palette.info.main, 0.62));
-      setColor(palette.Switch, 'successDisabledColor', safeLighten(palette.success.main, 0.62));
-      setColor(palette.Switch, 'warningDisabledColor', safeLighten(palette.warning.main, 0.62));
-      setColor(palette.TableCell, 'border', safeLighten(safeAlpha(palette.divider, 1), 0.88));
-      setColor(palette.Tooltip, 'bg', safeAlpha(palette.grey[700], 0.92));
-    } else {
-      setColor(palette.Alert, 'errorColor', safeLighten(palette.error.light, 0.6));
-      setColor(palette.Alert, 'infoColor', safeLighten(palette.info.light, 0.6));
-      setColor(palette.Alert, 'successColor', safeLighten(palette.success.light, 0.6));
-      setColor(palette.Alert, 'warningColor', safeLighten(palette.warning.light, 0.6));
-      setColor(palette.Alert, 'errorFilledBg', setCssVarColor('palette-error-dark'));
-      setColor(palette.Alert, 'infoFilledBg', setCssVarColor('palette-info-dark'));
-      setColor(palette.Alert, 'successFilledBg', setCssVarColor('palette-success-dark'));
-      setColor(palette.Alert, 'warningFilledBg', setCssVarColor('palette-warning-dark'));
-      setColor(palette.Alert, 'errorFilledColor', silent(() => darkPalette.getContrastText(palette.error.dark)));
-      setColor(palette.Alert, 'infoFilledColor', silent(() => darkPalette.getContrastText(palette.info.dark)));
-      setColor(palette.Alert, 'successFilledColor', silent(() => darkPalette.getContrastText(palette.success.dark)));
-      setColor(palette.Alert, 'warningFilledColor', silent(() => darkPalette.getContrastText(palette.warning.dark)));
-      setColor(palette.Alert, 'errorStandardBg', safeDarken(palette.error.light, 0.9));
-      setColor(palette.Alert, 'infoStandardBg', safeDarken(palette.info.light, 0.9));
-      setColor(palette.Alert, 'successStandardBg', safeDarken(palette.success.light, 0.9));
-      setColor(palette.Alert, 'warningStandardBg', safeDarken(palette.warning.light, 0.9));
-      setColor(palette.Alert, 'errorIconColor', setCssVarColor('palette-error-main'));
-      setColor(palette.Alert, 'infoIconColor', setCssVarColor('palette-info-main'));
-      setColor(palette.Alert, 'successIconColor', setCssVarColor('palette-success-main'));
-      setColor(palette.Alert, 'warningIconColor', setCssVarColor('palette-warning-main'));
-      setColor(palette.AppBar, 'defaultBg', setCssVarColor('palette-grey-900'));
-      setColor(palette.AppBar, 'darkBg', setCssVarColor('palette-background-paper')); // specific for dark mode
-      setColor(palette.AppBar, 'darkColor', setCssVarColor('palette-text-primary')); // specific for dark mode
-      setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-600'));
-      setColor(palette.Button, 'inheritContainedBg', setCssVarColor('palette-grey-800'));
-      setColor(palette.Button, 'inheritContainedHoverBg', setCssVarColor('palette-grey-700'));
-      setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-700'));
-      setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-300'));
-      setColor(palette.Chip, 'defaultIconColor', setCssVarColor('palette-grey-300'));
-      setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
-      setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
-      setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
-      setColor(palette.LinearProgress, 'primaryBg', safeDarken(palette.primary.main, 0.5));
-      setColor(palette.LinearProgress, 'secondaryBg', safeDarken(palette.secondary.main, 0.5));
-      setColor(palette.LinearProgress, 'errorBg', safeDarken(palette.error.main, 0.5));
-      setColor(palette.LinearProgress, 'infoBg', safeDarken(palette.info.main, 0.5));
-      setColor(palette.LinearProgress, 'successBg', safeDarken(palette.success.main, 0.5));
-      setColor(palette.LinearProgress, 'warningBg', safeDarken(palette.warning.main, 0.5));
-      setColor(palette.Skeleton, 'bg', `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.13)`);
-      setColor(palette.Slider, 'primaryTrack', safeDarken(palette.primary.main, 0.5));
-      setColor(palette.Slider, 'secondaryTrack', safeDarken(palette.secondary.main, 0.5));
-      setColor(palette.Slider, 'errorTrack', safeDarken(palette.error.main, 0.5));
-      setColor(palette.Slider, 'infoTrack', safeDarken(palette.info.main, 0.5));
-      setColor(palette.Slider, 'successTrack', safeDarken(palette.success.main, 0.5));
-      setColor(palette.Slider, 'warningTrack', safeDarken(palette.warning.main, 0.5));
-      const snackbarContentBackground = safeEmphasize(palette.background.default, 0.98);
-      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
-      setColor(palette.SnackbarContent, 'color', silent(() => darkPalette.getContrastText(snackbarContentBackground)));
-      setColor(palette.SpeedDialAction, 'fabHoverBg', safeEmphasize(palette.background.paper, 0.15));
-      setColor(palette.StepConnector, 'border', setCssVarColor('palette-grey-600'));
-      setColor(palette.StepContent, 'border', setCssVarColor('palette-grey-600'));
-      setColor(palette.Switch, 'defaultColor', setCssVarColor('palette-grey-300'));
-      setColor(palette.Switch, 'defaultDisabledColor', setCssVarColor('palette-grey-600'));
-      setColor(palette.Switch, 'primaryDisabledColor', safeDarken(palette.primary.main, 0.55));
-      setColor(palette.Switch, 'secondaryDisabledColor', safeDarken(palette.secondary.main, 0.55));
-      setColor(palette.Switch, 'errorDisabledColor', safeDarken(palette.error.main, 0.55));
-      setColor(palette.Switch, 'infoDisabledColor', safeDarken(palette.info.main, 0.55));
-      setColor(palette.Switch, 'successDisabledColor', safeDarken(palette.success.main, 0.55));
-      setColor(palette.Switch, 'warningDisabledColor', safeDarken(palette.warning.main, 0.55));
-      setColor(palette.TableCell, 'border', safeDarken(safeAlpha(palette.divider, 1), 0.68));
-      setColor(palette.Tooltip, 'bg', safeAlpha(palette.grey[700], 0.92));
-    }
-
-    // MUI X - DataGrid needs this token.
-    setColorChannel(palette.background, 'default');
-
-    // added for consistency with the `background.default` token
-    setColorChannel(palette.background, 'paper');
-    setColorChannel(palette.common, 'background');
-    setColorChannel(palette.common, 'onBackground');
-    setColorChannel(palette, 'divider');
-    Object.keys(palette).forEach(color => {
-      const colors = palette[color];
-
-      // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
-
-      if (colors && typeof colors === 'object') {
-        // Silent the error for custom palettes.
-        if (colors.main) {
-          setColor(palette[color], 'mainChannel', safeColorChannel(toRgb(colors.main)));
-        }
-        if (colors.light) {
-          setColor(palette[color], 'lightChannel', safeColorChannel(toRgb(colors.light)));
-        }
-        if (colors.dark) {
-          setColor(palette[color], 'darkChannel', safeColorChannel(toRgb(colors.dark)));
-        }
-        if (colors.contrastText) {
-          setColor(palette[color], 'contrastTextChannel', safeColorChannel(toRgb(colors.contrastText)));
-        }
-        if (color === 'text') {
-          // Text colors: text.primary, text.secondary
-          setColorChannel(palette[color], 'primary');
-          setColorChannel(palette[color], 'secondary');
-        }
-        if (color === 'action') {
-          // Action colors: action.active, action.selected
-          if (colors.active) {
-            setColorChannel(palette[color], 'active');
-          }
-          if (colors.selected) {
-            setColorChannel(palette[color], 'selected');
-          }
-        }
-      }
-    });
-  });
-  theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme);
-  const parserConfig = {
-    prefix: cssVarPrefix,
-    shouldSkipGeneratingVar,
-    getSelector: getSelector || defaultGetSelector(theme)
-  };
-  const {
-    vars,
-    generateThemeVars,
-    generateStyleSheets
-  } = prepareCssVars(theme, parserConfig);
-  theme.attribute = 'data-mui-color-scheme';
-  theme.colorSchemeSelector = ':root';
-  theme.vars = vars;
-  Object.entries(theme.colorSchemes[theme.defaultColorScheme]).forEach(([key, value]) => {
-    theme[key] = value;
-  });
-  theme.generateThemeVars = generateThemeVars;
-  theme.generateStyleSheets = generateStyleSheets;
-  theme.generateSpacing = function generateSpacing() {
-    return createSpacing(input.spacing, createUnarySpacing(this));
-  };
-  theme.getColorSchemeSelector = colorScheme => `[${theme.attribute}="${colorScheme}"] &`;
-  theme.spacing = theme.generateSpacing();
-  theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
-  theme.unstable_sxConfig = {
-    ...defaultSxConfig,
-    ...input?.unstable_sxConfig
-  };
-  theme.unstable_sx = function sx(props) {
-    return styleFunctionSx({
-      sx: props,
-      theme: this
-    });
-  };
-  return theme;
+import extendTheme from './extendTheme';
+let warnedOnce = false;
+export default function deprecatedExtendTheme(...args) {
+  if (!warnedOnce) {
+    console.warn(['MUI: The `experimental_extendTheme` has been stabilized.', '', "You should use `import { extendTheme } from '@mui/material/styles'`"].join('\n'));
+    warnedOnce = true;
+  }
+  return extendTheme(...args);
 }

package/styles/{experimental_extendTheme.d.ts → extendTheme.d.ts}

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 import { OverridableStringUnion } from '@mui/types';
 import { SxConfig, SxProps, CSSObject, ApplyStyles } from '@mui/system';
 import { ExtractTypographyTokens } from '@mui/system/cssVars';
@@ -465,7 +464,7 @@ export interface CssVarsTheme extends ColorSystem {
  * @param args Deep merge the arguments with the about to be returned theme.
  * @returns A complete, ready-to-use theme object.
  */
-export default function experimental_extendTheme(
+export default function extendTheme(
   options?: CssVarsThemeOptions,
   ...args: object[]
 ): Omit<Theme, 'applyStyles'> & CssVarsTheme;