@mui/material 5.11.11 → 5.11.13

package/Autocomplete/Autocomplete.d.ts

@@ -32,6 +32,7 @@ export type AutocompleteOwnerState<
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
 > = AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent> & {
   disablePortal: boolean;
+  expanded: boolean;
   focused: boolean;
   fullWidth: boolean;
   hasClearIcon: boolean;

package/Autocomplete/Autocomplete.js

@@ -29,6 +29,7 @@ const useUtilityClasses = ownerState => {
   const {
     classes,
     disablePortal,
+    expanded,
     focused,
     fullWidth,
     hasClearIcon,
@@ -38,7 +39,7 @@ const useUtilityClasses = ownerState => {
     size
   } = ownerState;
   const slots = {
-    root: ['root', focused && 'focused', fullWidth && 'fullWidth', hasClearIcon && 'hasClearIcon', hasPopupIcon && 'hasPopupIcon'],
+    root: ['root', expanded && 'expanded', focused && 'focused', fullWidth && 'fullWidth', hasClearIcon && 'hasClearIcon', hasPopupIcon && 'hasPopupIcon'],
     inputRoot: ['inputRoot'],
     input: ['input', inputFocused && 'inputFocused'],
     tag: ['tag', `tagSize${capitalize(size)}`],
@@ -438,6 +439,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     getOptionProps,
     value,
     dirty,
+    expanded,
     id,
     popupOpen,
     focused,
@@ -455,6 +457,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
   const ownerState = _extends({}, props, {
     disablePortal,
+    expanded,
     focused,
     fullWidth,
     hasClearIcon,
@@ -901,7 +904,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    *
    * @param {React.SyntheticEvent} event The event source of the callback.
    * @param {T} option The highlighted option.
-   * @param {string} reason Can be: `"keyboard"`, `"auto"`, `"mouse"`.
+   * @param {string} reason Can be: `"keyboard"`, `"auto"`, `"mouse"`, `"touch"`.
    */
   onHighlightChange: PropTypes.func,
   /**

package/Autocomplete/autocompleteClasses.d.ts

@@ -3,6 +3,8 @@ export interface AutocompleteClasses {
     root: string;
     /** Styles applied to the root element if `fullWidth={true}`. */
     fullWidth: string;
+    /** State class applied to the root element if the listbox is displayed. */
+    expanded: string;
     /** State class applied to the root element if focused. */
     focused: string;
     /** Styles applied to the tag elements, e.g. the chips. */

package/Autocomplete/autocompleteClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '../generateUtilityClass';
 export function getAutocompleteUtilityClass(slot) {
   return generateUtilityClass('MuiAutocomplete', slot);
 }
-const autocompleteClasses = generateUtilityClasses('MuiAutocomplete', ['root', 'fullWidth', 'focused', 'focusVisible', 'tag', 'tagSizeSmall', 'tagSizeMedium', 'hasPopupIcon', 'hasClearIcon', 'inputRoot', 'input', 'inputFocused', 'endAdornment', 'clearIndicator', 'popupIndicator', 'popupIndicatorOpen', 'popper', 'popperDisablePortal', 'paper', 'listbox', 'loading', 'noOptions', 'option', 'groupLabel', 'groupUl']);
+const autocompleteClasses = generateUtilityClasses('MuiAutocomplete', ['root', 'expanded', 'fullWidth', 'focused', 'focusVisible', 'tag', 'tagSizeSmall', 'tagSizeMedium', 'hasPopupIcon', 'hasClearIcon', 'inputRoot', 'input', 'inputFocused', 'endAdornment', 'clearIndicator', 'popupIndicator', 'popupIndicatorOpen', 'popper', 'popperDisablePortal', 'paper', 'listbox', 'loading', 'noOptions', 'option', 'groupLabel', 'groupUl']);
 export default autocompleteClasses;

package/CHANGELOG.md

@@ -1,5 +1,190 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.11.13
+
+<!-- generated comparing v5.11.12..master -->
+
+_Mar 14, 2023_
+
+A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- @michaldudak added an option for [disabling the generation](https://mui.com/base/getting-started/customization/#disabling-default-css-classes) of the default classes in MUI Base (#35963)
+- other 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.11.13`
+
+- &#8203;<!-- 13 -->[core] Bump MUI Base's version in Material UI (#36492) @hbjORbj
+- &#8203;<!-- 17 -->[material] Export `shouldSkipGeneratingVar` from Material UI (#36489) @siriwatknp
+- &#8203;<!-- 06 -->[Typography] Apply font properties to typography inherit variant (#33621) @oyar99
+
+### `@mui/base@5.0.0-alpha.121`
+
+- &#8203;<!-- 16 -->[base] Disable classes generation via a context (#35963) @michaldudak
+- &#8203;<!-- 15 -->[useMenu][base] Add return interface for useMenu hook (#36376) @HeVictor
+- &#8203;<!-- 05 -->[useBadge] Add interface for the return value (#36042) @skevprog
+- &#8203;<!-- 04 -->[useMenuItem] Add explicit return type (#36359) @rayrw
+- &#8203;<!-- 03 -->[useTabs] Add explicit return type (#36047) @sai6855
+
+### Docs
+
+- &#8203;<!-- 14 -->[blog] Update fields behavior on date pickers blog post (#36480) @joserodolfofreitas
+- &#8203;<!-- 12 -->[docs] Info markdown not rendering in Contributing Guide README (#36487) @hbjORbj
+- &#8203;<!-- 11 -->[docs] Remove 301 redirection to MUI X lab migration @oliviertassinari
+- &#8203;<!-- 10 -->[docs] Fix a grammar error (#36486) @hbjORbj
+- &#8203;<!-- 09 -->[docs] Add blog post notification for v6 release (#36446) @joserodolfofreitas
+- &#8203;<!-- 08 -->[docs] Update link to v5 docs (#36421) @m4theushw
+- &#8203;<!-- 07 -->[docs] Fix 404 in the API page links (#36419) @oliviertassinari
+- &#8203;<!-- 08 -->[docs][joy] Error in the exemplary Codesandbox of using Material UI and Joy UI together (#36462) @hbjORbj
+- &#8203;<!-- 06 -->[examples] Refactor to have better types in the Next.js + TypeScript examples (#36355) @erikian
+- &#8203;<!-- 02 -->[website] Fix layout shift when loading /blog/mui-x-v6/ @oliviertassinari
+- &#8203;<!-- 01 -->[website] Update stats (#36477) @hrutik7
+
+All contributors of this release in alphabetical order: @erikian, @hbjORbj, @HeVictor, @hrutik7, @joserodolfofreitas, @m4theushw, @michaldudak, @oliviertassinari, @oyar99, @rayrw, @sai6855, @siriwatknp, @skevprog
+
+## 5.11.12
+
+<!-- generated comparing v5.11.11..master -->
+
+_Mar 6, 2023_
+
+A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
+
+- @michaldudak added the multiselect functionality to SelectUnstyled (#36274)
+- @mnajdova updated `extendTheme` so that it can generate CSS variables with default values. This means that the `CssVarsProvider` is no longer required for Joy UI when using the default theme (#35739)
+- other 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.11.12`
+
+- &#8203;<!-- 30 -->[Autocomplete] Fix list scrolls to the top when new data is added on touch devices (#36231) @SaidMarar
+- &#8203;<!-- 29 -->[Autocomplete] Add `Mui-expanded` class (#33312) @Osman-Sodefa
+- &#8203;<!-- 24 -->[Dialog] Use the `id` prop provided to the `DialogTitle` component (#36353) @Kundan28
+- &#8203;<!-- 07 -->[Menu] Fix Menu Paper styles overriding in the theme (#36316) @Paatus
+
+### `@mui/lab@5.0.0-alpha.122`
+
+- &#8203;<!-- 05 -->[TreeView] Fix Tree View inside shadow root crashes (#36225) @NoFr1ends
+
+### `@mui/system@5.11.12`
+
+#### Breaking changes
+
+- &#8203;<!-- 26 -->[core] Generate vars in `extendTheme` (#35739) @mnajdova
+
+  The `shouldSkipGeneratingVar` prop was moved from the `createCssVarsProvider`'s option to the `theme`. If the default theme does not use `extendTheme` from Material UI or Joy UI, it needs to be wrapped inside `unstable_createCssVarsTheme` - a util exported from the MUI System. Below is an example of how the migration should look like:
+
+  ```diff
+   import {
+      unstable_createCssVarsProvider as createCssVarsProvider,
+  +   unstable_createCssVarsTheme as createCssVarsTheme,
+   } from '@mui/system';
+
+   const { CssVarsProvider } = createCssVarsProvider({
+  -  theme: {
+  +  theme: createCssVarsTheme({
+       colorSchemes: {
+         light: {
+           typography: {
+             htmlFontSize: '16px',
+             h1: {
+               fontSize: '1rem',
+               fontWeight: 500,
+             },
+           },
+         },
+       },
+  +    shouldSkipGeneratingVar: (keys) => keys[0] === 'typography' && keys[1] === 'h1',
+  -  },
+  +  }),
+     defaultColorScheme: 'light',
+  -  shouldSkipGeneratingVar: (keys) => keys[0] === 'typography' && keys[1] === 'h1',
+   });
+  ```
+
+  Or you can define it directly in the theme prop:
+
+  ```diff
+   <CssVarsProvider
+  +   theme={createCssVarsProvider({
+  +    // other theme keys
+  +    shouldSkipGeneratingVar: (keys) => keys[0] === 'typography' && keys[1] === 'h1'
+  +   })} />
+  ```
+
+  This breaking change **only** affects experimental APIs
+
+### `@mui/base@5.0.0-alpha.120`
+
+#### Breaking changes
+
+- &#8203;<!-- 27 -->[Select][base] Add the multiselect functionality to SelectUnstyled (#36274) @michaldudak
+
+  The MultiSelectUnstyled was removed. The `SelectUnstyled` component with the `multiple` prop should be used instead. Additionally, the SelectUnstyledProps received a second generic parameter: `Multiple extends boolean`. If you deal with strictly single- or multi-select components, you can hard-code this parameter to `false` or `true`, respectively. Below is an example of how the migration should look like:
+
+  ```diff
+  -import MultiSelectUnstyled from '@mui/base/MultiSelectUnstyled';
+  +import SelectUnstyled from '@mui/base/SelectUnstyled';
+
+   export default App() {
+  -return <MultiSelectUnstyled />
+  +return <SelectUnstyled multiple />
+   }
+  ```
+
+#### Changes
+
+- &#8203;<!-- 34 -->[useSnackBar] Add explicit return type (#36052) @sai6855
+- &#8203;<!-- 04 -->[useMenu] Fix `import type` syntax (#36411) @ZeeshanTamboli
+- &#8203;<!-- 03 -->[useSwitch] Add explicit return type (#36050) @sai6855
+
+### `@mui/joy@5.0.0-alpha.70`
+
+#### Breaking changes
+
+- &#8203;<!-- 09 -->[Joy] Change CSS variables naming for components (#36282) @hbjORbj
+
+  Joy UI has new naming standards of the CSS variables for its components. Below is an example of how the migration should look like:
+
+  ```diff
+  -<List sx={{ py: 'var(--List-divider-gap)' }}>
+  +<List sx={{ py: 'var(--ListDivider-gap)' }}>
+  -<Switch sx={{ '--Switch-track-width': '40px' }}>
+  +<Switch sx={{ '--Switch-trackWidth': '40px' }}>
+  ```
+
+#### Changes
+
+- &#8203;<!-- 28 -->[Autocomplete][joy] Add disabled class to the popup indicator (#36397) @hbjORbj
+- &#8203;<!-- 08 -->[Joy] Fix broken loading button in Safari (#36298) @Kuba429
+
+### Docs
+
+- &#8203;<!-- 33 -->[docs][joy] Clarify when `CssVarsProvider` is required (#36410) @mnajdova
+- &#8203;<!-- 32 -->MUI X v6 release announcement (#36398) @joserodolfofreitas
+- &#8203;<!-- 23 -->[docs] Add instructions for deploying docs without a release (#36301) @cherniavskii
+- &#8203;<!-- 22 -->[docs] Fix 301 redirections on the docs @oliviertassinari
+- &#8203;<!-- 21 -->[docs] Update MUI X banner to reflect stable release (#36354) @MBilalShafi
+- &#8203;<!-- 20 -->[docs] Clarify the future plan for integrating MUI Base in Material UI (#36365) @mnajdova
+- &#8203;<!-- 19 -->[docs] Improve visual look of loose lists (#36190) @oliviertassinari
+- &#8203;<!-- 18 -->[docs] Fix @mui/styles example links (#36331) @oliviertassinari
+- &#8203;<!-- 17 -->[docs][joy] Build TS versions for List component demos (#36382) @sai6855
+- &#8203;<!-- 16 -->[docs][joy] Build TS versions for Radio component demos (#36406) @sai6855
+- &#8203;<!-- 15 -->[docs][joy] Build TS versions for Checkbox component demos (#36381) @sai6855
+- &#8203;<!-- 14 -->[docs][joy] Build TS versions for Select component demos (#36380) @sai6855
+- &#8203;<!-- 13 -->[docs][joy] Build TS versions for Typography component demos (#36378) @varunmulay22
+- &#8203;<!-- 12 -->[docs][joy] Add typescript demos for `Divider` (#36374) @sai6855
+- &#8203;<!-- 11 -->[docs][joy] Build TS versions for Textarea component demos (#36371) @varunmulay22
+- &#8203;<!-- 10 -->[docs][joy] Build TS versions for Link component demos (#36366) @hbjORbj
+
+### Core
+
+- &#8203;<!-- 31 -->Revert "Bump rimraf to ^4.1.3" (#36420) @mnajdova
+- &#8203;<!-- 25 -->[core] Fix test utils types and external `buildApiUtils` usage issues (#36310) @LukasTy
+- &#8203;<!-- 06 -->[test] Remove duplicate `combobox` role queries in Autocomplete tests (#36394) @ZeeshanTamboli
+- &#8203;<!-- 02 -->[website] Clarify redistribution @oliviertassinari
+- &#8203;<!-- 01 -->[website] Sync /about page (#36334) @oliviertassinari
+
+All contributors of this release in alphabetical order: @cherniavskii, @hbjORbj, @joserodolfofreitas, @Kuba429, @Kundan28, @LukasTy, @MBilalShafi, @michaldudak, @mnajdova, @NoFr1ends, @oliviertassinari, @Osman-Sodefa, @Paatus, @sai6855, @SaidMarar, @varunmulay22, @ZeeshanTamboli
+
 ## 5.11.11
 
 <!-- generated comparing v5.11.10..master -->
@@ -2098,7 +2283,7 @@ A big thanks to the 19 contributors who made this release possible. Here are som
 - 🧪 Exported Grid v2 as `Unstable_Grid2` (#33479) @siriwatknp
 - 📖 Added a guide for using Joy UI and Material UI together (#33396) @siriwatknp
 - 🐛 Fixed a few bugs in Material UI components. Thanks to @ZeeshanTamboli, @ivan-ngchakming, and @joebingham-wk.
-- ⚠️ **[BREAKING CHANGE]** Date pickers were removed from the lab. Learn how to migrate by visiting the [migration guide](https://mui.com/x/react-date-pickers/migration-lab/). (#33386) @flaviendelangle
+- ⚠️ **[BREAKING CHANGE]** Date pickers were removed from the lab. Learn how to migrate by visiting the [migration guide](https://mui.com/x/migration/migration-pickers-lab/). (#33386) @flaviendelangle
 - many other 🐛 bug fixes and 📚 documentation improvements
 - our documentation site is now running with React 18! (#33196) @mnajdova
 
@@ -2124,7 +2309,7 @@ A big thanks to the 19 contributors who made this release possible. Here are som
 
 - [lab] Remove the pickers (#33386) @flaviendelangle
 
-  The pickers are moved to MUI X, check out the [migration guide](https://mui.com/x/react-date-pickers/migration-lab/).
+  The pickers are moved to MUI X, check out the [migration guide](https://mui.com/x/migration/migration-pickers-lab/).
 
 **Changes**
 

package/DialogTitle/DialogTitle.js

@@ -41,7 +41,7 @@ const DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(inProps,
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const {
-    titleId: id = idProp
+    titleId = idProp
   } = React.useContext(DialogContext);
   return /*#__PURE__*/_jsx(DialogTitleRoot, _extends({
     component: "h2",
@@ -49,7 +49,7 @@ const DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(inProps,
     ownerState: ownerState,
     ref: ref,
     variant: "h6",
-    id: id
+    id: idProp != null ? idProp : titleId
   }, other));
 });
 process.env.NODE_ENV !== "production" ? DialogTitle.propTypes /* remove-proptypes */ = {

package/Menu/Menu.js

@@ -149,7 +149,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     },
     transformOrigin: isRtl ? RTL_ORIGIN : LTR_ORIGIN,
     PaperProps: _extends({
-      component: MenuPaper
+      as: MenuPaper
     }, PaperProps, {
       classes: _extends({}, PaperProps.classes, {
         root: classes.paper

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.11.11
+ * @mui/material v5.11.13
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/Autocomplete/Autocomplete.js

@@ -28,6 +28,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     disablePortal = ownerState.disablePortal,
+    expanded = ownerState.expanded,
     focused = ownerState.focused,
     fullWidth = ownerState.fullWidth,
     hasClearIcon = ownerState.hasClearIcon,
@@ -36,7 +37,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     popupOpen = ownerState.popupOpen,
     size = ownerState.size;
   var slots = {
-    root: ['root', focused && 'focused', fullWidth && 'fullWidth', hasClearIcon && 'hasClearIcon', hasPopupIcon && 'hasPopupIcon'],
+    root: ['root', expanded && 'expanded', focused && 'focused', fullWidth && 'fullWidth', hasClearIcon && 'hasClearIcon', hasPopupIcon && 'hasPopupIcon'],
     inputRoot: ['inputRoot'],
     input: ['input', inputFocused && 'inputFocused'],
     tag: ['tag', "tagSize".concat(capitalize(size))],
@@ -453,6 +454,7 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
     getOptionProps = _useAutocomplete.getOptionProps,
     value = _useAutocomplete.value,
     dirty = _useAutocomplete.dirty,
+    expanded = _useAutocomplete.expanded,
     id = _useAutocomplete.id,
     popupOpen = _useAutocomplete.popupOpen,
     focused = _useAutocomplete.focused,
@@ -467,6 +469,7 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
   // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
   var ownerState = _extends({}, props, {
     disablePortal: disablePortal,
+    expanded: expanded,
     focused: focused,
     fullWidth: fullWidth,
     hasClearIcon: hasClearIcon,
@@ -923,7 +926,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    *
    * @param {React.SyntheticEvent} event The event source of the callback.
    * @param {T} option The highlighted option.
-   * @param {string} reason Can be: `"keyboard"`, `"auto"`, `"mouse"`.
+   * @param {string} reason Can be: `"keyboard"`, `"auto"`, `"mouse"`, `"touch"`.
    */
   onHighlightChange: PropTypes.func,
   /**

package/legacy/Autocomplete/autocompleteClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '../generateUtilityClass';
 export function getAutocompleteUtilityClass(slot) {
   return generateUtilityClass('MuiAutocomplete', slot);
 }
-var autocompleteClasses = generateUtilityClasses('MuiAutocomplete', ['root', 'fullWidth', 'focused', 'focusVisible', 'tag', 'tagSizeSmall', 'tagSizeMedium', 'hasPopupIcon', 'hasClearIcon', 'inputRoot', 'input', 'inputFocused', 'endAdornment', 'clearIndicator', 'popupIndicator', 'popupIndicatorOpen', 'popper', 'popperDisablePortal', 'paper', 'listbox', 'loading', 'noOptions', 'option', 'groupLabel', 'groupUl']);
+var autocompleteClasses = generateUtilityClasses('MuiAutocomplete', ['root', 'expanded', 'fullWidth', 'focused', 'focusVisible', 'tag', 'tagSizeSmall', 'tagSizeMedium', 'hasPopupIcon', 'hasClearIcon', 'inputRoot', 'input', 'inputFocused', 'endAdornment', 'clearIndicator', 'popupIndicator', 'popupIndicatorOpen', 'popper', 'popperDisablePortal', 'paper', 'listbox', 'loading', 'noOptions', 'option', 'groupLabel', 'groupUl']);
 export default autocompleteClasses;

package/legacy/DialogTitle/DialogTitle.js

@@ -39,14 +39,14 @@ var DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(inProps, re
   var classes = useUtilityClasses(ownerState);
   var _React$useContext = React.useContext(DialogContext),
     _React$useContext$tit = _React$useContext.titleId,
-    id = _React$useContext$tit === void 0 ? idProp : _React$useContext$tit;
+    titleId = _React$useContext$tit === void 0 ? idProp : _React$useContext$tit;
   return /*#__PURE__*/_jsx(DialogTitleRoot, _extends({
     component: "h2",
     className: clsx(classes.root, className),
     ownerState: ownerState,
     ref: ref,
     variant: "h6",
-    id: id
+    id: idProp != null ? idProp : titleId
   }, other));
 });
 process.env.NODE_ENV !== "production" ? DialogTitle.propTypes /* remove-proptypes */ = {

package/legacy/Menu/Menu.js

@@ -157,7 +157,7 @@ var Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     },
     transformOrigin: isRtl ? RTL_ORIGIN : LTR_ORIGIN,
     PaperProps: _extends({
-      component: MenuPaper
+      as: MenuPaper
     }, PaperProps, {
       classes: _extends({}, PaperProps.classes, {
         root: classes.paper

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.11.11
+ * @mui/material v5.11.13
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/styles/CssVarsProvider.js

@@ -3,12 +3,6 @@ import { unstable_createCssVarsProvider as createCssVarsProvider, unstable_style
 import experimental_extendTheme from './experimental_extendTheme';
 import createTypography from './createTypography';
 import excludeVariablesFromRoot from './excludeVariablesFromRoot';
-var shouldSkipGeneratingVar = function shouldSkipGeneratingVar(keys) {
-  var _keys$;
-  return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
-  // ends with sxConfig
-  keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
-};
 var defaultTheme = experimental_extendTheme();
 var _createCssVarsProvide = createCssVarsProvider({
     theme: defaultTheme,
@@ -31,10 +25,9 @@ var _createCssVarsProvide = createCssVarsProvider({
       };
       return newTheme;
     },
-    shouldSkipGeneratingVar: shouldSkipGeneratingVar,
     excludeVariablesFromRoot: excludeVariablesFromRoot
   }),
   CssVarsProvider = _createCssVarsProvide.CssVarsProvider,
   useColorScheme = _createCssVarsProvide.useColorScheme,
   getInitColorSchemeScript = _createCssVarsProvide.getInitColorSchemeScript;
-export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider };
+export { useColorScheme, getInitColorSchemeScript, CssVarsProvider as Experimental_CssVarsProvider };

package/legacy/styles/createTypography.js

@@ -68,7 +68,14 @@ export default function createTypography(palette, typography) {
     body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15),
     button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
     caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
-    overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps)
+    overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps),
+    inherit: {
+      fontFamily: 'inherit',
+      fontWeight: 'inherit',
+      fontSize: 'inherit',
+      lineHeight: 'inherit',
+      letterSpacing: 'inherit'
+    }
   };
   return deepmerge(_extends({
     htmlFontSize: htmlFontSize,

package/legacy/styles/experimental_extendTheme.js

@@ -3,7 +3,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import { deepmerge } from '@mui/utils';
-import { private_safeColorChannel as safeColorChannel, private_safeAlpha as safeAlpha, private_safeDarken as safeDarken, private_safeLighten as safeLighten, private_safeEmphasize as safeEmphasize, unstable_createGetCssVar as systemCreateGetCssVar, unstable_defaultSxConfig as defaultSxConfig, unstable_styleFunctionSx as styleFunctionSx } from '@mui/system';
+import { private_safeColorChannel as safeColorChannel, private_safeAlpha as safeAlpha, private_safeDarken as safeDarken, private_safeLighten as safeLighten, private_safeEmphasize as safeEmphasize, unstable_createGetCssVar as systemCreateGetCssVar, unstable_defaultSxConfig as defaultSxConfig, unstable_styleFunctionSx as styleFunctionSx, unstable_prepareCssVars as prepareCssVars } from '@mui/system';
+import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar';
 import createThemeWithoutVars from './createTheme';
 import getOverlayAlpha from './getOverlayAlpha';
 var defaultDarkOverlays = _toConsumableArray(Array(25)).map(function (_, index) {
@@ -51,7 +52,9 @@ export default function extendTheme() {
     colorSchemesInput = _options$colorSchemes === void 0 ? {} : _options$colorSchemes,
     _options$cssVarPrefix = options.cssVarPrefix,
     cssVarPrefix = _options$cssVarPrefix === void 0 ? 'mui' : _options$cssVarPrefix,
-    input = _objectWithoutProperties(options, ["colorSchemes", "cssVarPrefix"]);
+    _options$shouldSkipGe = options.shouldSkipGeneratingVar,
+    shouldSkipGeneratingVar = _options$shouldSkipGe === void 0 ? defaultShouldSkipGeneratingVar : _options$shouldSkipGe,
+    input = _objectWithoutProperties(options, ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar"]);
   var getCssVar = createGetCssVar(cssVarPrefix);
   var _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
       palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
@@ -92,6 +95,12 @@ export default function extendTheme() {
   });
   Object.keys(theme.colorSchemes).forEach(function (key) {
     var palette = theme.colorSchemes[key].palette;
+    var setCssVarColor = function setCssVarColor(cssVar) {
+      var tokens = cssVar.split('-');
+      var color = tokens[1];
+      var colorToken = tokens[2];
+      return getCssVar(cssVar, palette[color][colorToken]);
+    };
 
     // attach black & white channels to common node
     if (key === 'light') {
@@ -109,10 +118,10 @@ export default function extendTheme() {
       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', getCssVar('palette-error-main'));
-      setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-main'));
-      setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-main'));
-      setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-main'));
+      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(function () {
         return lightPalette.getContrastText(palette.error.main);
       }));
@@ -129,15 +138,15 @@ export default function extendTheme() {
       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', getCssVar('palette-error-main'));
-      setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-main'));
-      setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-main'));
-      setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-main'));
-      setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-100'));
-      setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-400'));
-      setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-400'));
-      setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-700'));
-      setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-700'));
+      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.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)');
@@ -147,7 +156,7 @@ export default function extendTheme() {
       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(".concat(getCssVar('palette-text-primaryChannel'), " / 0.11)"));
+      setColor(palette.Skeleton, 'bg', "rgba(".concat(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));
@@ -160,10 +169,10 @@ export default function extendTheme() {
         return lightPalette.getContrastText(snackbarContentBackground);
       }));
       setColor(palette.SpeedDialAction, 'fabHoverBg', safeEmphasize(palette.background.paper, 0.15));
-      setColor(palette.StepConnector, 'border', getCssVar('palette-grey-400'));
-      setColor(palette.StepContent, 'border', getCssVar('palette-grey-400'));
-      setColor(palette.Switch, 'defaultColor', getCssVar('palette-common-white'));
-      setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-100'));
+      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));
@@ -177,10 +186,10 @@ export default function extendTheme() {
       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', getCssVar('palette-error-dark'));
-      setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-dark'));
-      setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-dark'));
-      setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-dark'));
+      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(function () {
         return darkPalette.getContrastText(palette.error.dark);
       }));
@@ -197,17 +206,17 @@ export default function extendTheme() {
       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', getCssVar('palette-error-main'));
-      setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-main'));
-      setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-main'));
-      setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-main'));
-      setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-900'));
-      setColor(palette.AppBar, 'darkBg', getCssVar('palette-background-paper')); // specific for dark mode
-      setColor(palette.AppBar, 'darkColor', getCssVar('palette-text-primary')); // specific for dark mode
-      setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-600'));
-      setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-700'));
-      setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-300'));
-      setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-300'));
+      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.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)');
@@ -217,7 +226,7 @@ export default function extendTheme() {
       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(".concat(getCssVar('palette-text-primaryChannel'), " / 0.13)"));
+      setColor(palette.Skeleton, 'bg', "rgba(".concat(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));
@@ -230,10 +239,10 @@ export default function extendTheme() {
         return darkPalette.getContrastText(_snackbarContentBackground);
       }));
       setColor(palette.SpeedDialAction, 'fabHoverBg', safeEmphasize(palette.background.paper, 0.15));
-      setColor(palette.StepConnector, 'border', getCssVar('palette-grey-600'));
-      setColor(palette.StepContent, 'border', getCssVar('palette-grey-600'));
-      setColor(palette.Switch, 'defaultColor', getCssVar('palette-grey-300'));
-      setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-600'));
+      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));
@@ -291,6 +300,16 @@ export default function extendTheme() {
   theme = args.reduce(function (acc, argument) {
     return deepmerge(acc, argument);
   }, theme);
+  var parserConfig = {
+    prefix: cssVarPrefix,
+    shouldSkipGeneratingVar: shouldSkipGeneratingVar
+  };
+  var _prepareCssVars = prepareCssVars(theme, parserConfig),
+    themeVars = _prepareCssVars.vars,
+    generateCssVars = _prepareCssVars.generateCssVars;
+  theme.vars = themeVars;
+  theme.generateCssVars = generateCssVars;
+  theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
   theme.unstable_sxConfig = _extends({}, defaultSxConfig, input == null ? void 0 : input.unstable_sxConfig);
   theme.unstable_sx = function sx(props) {
     return styleFunctionSx({

package/legacy/styles/index.js

@@ -26,6 +26,7 @@ export { default as withTheme } from './withTheme';
 export * from './CssVarsProvider';
 export { default as experimental_extendTheme } from './experimental_extendTheme';
 export { default as getOverlayAlpha } from './getOverlayAlpha';
+export { default as shouldSkipGeneratingVar } from './shouldSkipGeneratingVar';
 
 // Private methods for creating parts of the theme
 export { default as private_createTypography } from './createTypography';