@mui/system 5.11.11 → 5.11.13

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/cssVars/createCssVarsProvider.d.ts

@@ -39,14 +39,6 @@ export interface CssVarsProviderConfig<ColorScheme extends string> {
    * @default false
    */
   disableTransitionOnChange?: boolean;
-  /**
-   * A function to determine if the key, value should be attached as CSS Variable
-   * `keys` is an array that represents the object path keys.
-   *  Ex, if the theme is { foo: { bar: 'var(--test)' } }
-   *  then, keys = ['foo', 'bar']
-   *        value = 'var(--test)'
-   */
-  shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean;
 }
 
 export interface CreateCssVarsProviderResult<ColorScheme extends string> {
@@ -92,48 +84,6 @@ export interface CreateCssVarsProviderResult<ColorScheme extends string> {
     >,
   ) => React.ReactElement;
   useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
-  generateCssThemeVars: (options?: {
-    /**
-     * Design system default color scheme.
-     * - provides string if the design system has one default color scheme (either light or dark)
-     * - provides object if the design system has default light & dark color schemes
-     */
-    defaultColorScheme?: ColorScheme | { light: ColorScheme; dark: ColorScheme };
-    /**
-     * @default 'light'
-     */
-    defaultMode?: 'light' | 'dark';
-    /**
-     * The selector for attaching CSS variables that are **outside** of `theme.colorSchemes.*`.
-     * @default ':root'
-     */
-    rootSelector: string;
-    /**
-     * The selector for attaching CSS variables that are **outside** of `theme.colorSchemes.*`.
-     * @default (key) => `[data-color-scheme="${key}"]`
-     */
-    colorSchemeSelector: (key: ColorScheme) => string;
-    /**
-     * A function to determine if the key, value should be attached as CSS Variable
-     * `keys` is an array that represents the object path keys.
-     *  Ex, if the theme is { foo: { bar: 'var(--test)' } }
-     *  then, keys = ['foo', 'bar']
-     *        value = 'var(--test)'
-     */
-    shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean;
-    /**
-     * Controlled mode. If not provided, it will try to read the value from the upper CssVarsProvider.
-     */
-    mode?: Mode;
-    /**
-     * Controlled color scheme. If not provided, it will try to read the value from the upper CssVarsProvider.
-     */
-    colorScheme?: ColorScheme;
-    theme?: {
-      cssVarPrefix?: string;
-      colorSchemes: Record<ColorScheme, Record<string, any>>;
-    };
-  }) => Record<string, any>;
   getInitColorSchemeScript: typeof getInitColorSchemeScript;
 }
 

package/cssVars/createCssVarsProvider.js

@@ -13,12 +13,11 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledEngine = require("@mui/styled-engine");
 var _privateTheming = require("@mui/private-theming");
-var _cssVarsParser = _interopRequireDefault(require("./cssVarsParser"));
 var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
 var _getInitColorSchemeScript = _interopRequireWildcard(require("./getInitColorSchemeScript"));
 var _useCurrentColorScheme = _interopRequireDefault(require("./useCurrentColorScheme"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["colorSchemes", "components", "cssVarPrefix"];
+const _excluded = ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
@@ -32,7 +31,6 @@ function createCssVarsProvider(options) {
     defaultMode: designSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
-    shouldSkipGeneratingVar: designSystemShouldSkipGeneratingVar,
     resolveTheme,
     excludeVariablesFromRoot
   } = options;
@@ -60,7 +58,6 @@ function createCssVarsProvider(options) {
     documentNode = typeof document === 'undefined' ? undefined : document,
     colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
     colorSchemeSelector = ':root',
-    shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar,
     disableNestedContext = false,
     disableStyleSheetGeneration = false
   }) {
@@ -71,6 +68,10 @@ function createCssVarsProvider(options) {
     const {
         colorSchemes = {},
         components = {},
+        generateCssVars = () => ({
+          vars: {},
+          css: {}
+        }),
         cssVarPrefix
       } = themeProp,
       restThemeProp = (0, _objectWithoutPropertiesLoose2.default)(themeProp, _excluded);
@@ -128,10 +129,7 @@ function createCssVarsProvider(options) {
     const {
       css: rootCss,
       vars: rootVars
-    } = (0, _cssVarsParser.default)(restThemeProp, {
-      prefix: cssVarPrefix,
-      shouldSkipGeneratingVar
-    });
+    } = generateCssVars();
 
     // 3. Start composing the theme object
     const theme = (0, _extends2.default)({}, restThemeProp, {
@@ -151,10 +149,7 @@ function createCssVarsProvider(options) {
       const {
         css,
         vars
-      } = (0, _cssVarsParser.default)(scheme, {
-        prefix: cssVarPrefix,
-        shouldSkipGeneratingVar
-      });
+      } = generateCssVars(key);
       theme.vars = (0, _utils.deepmerge)(theme.vars, vars);
       if (key === calculatedColorScheme) {
         // 4.1 Merge the selected color scheme to the theme
@@ -193,6 +188,7 @@ function createCssVarsProvider(options) {
         otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
       }
     });
+    theme.vars = (0, _utils.deepmerge)(theme.vars, rootVars);
 
     // 5. Declaring effects
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
@@ -317,10 +313,6 @@ function createCssVarsProvider(options) {
      * The key in the local storage used to store current color scheme.
      */
     modeStorageKey: _propTypes.default.string,
-    /**
-     * A function to determine if the key, value should be attached as CSS Variable
-     */
-    shouldSkipGeneratingVar: _propTypes.default.func,
     /**
      * The window that attaches the 'storage' event listener
      * @default window

package/cssVars/createCssVarsTheme.d.ts

@@ -0,0 +1,13 @@
+import { DefaultCssVarsTheme } from './prepareCssVars';
+interface Theme extends DefaultCssVarsTheme {
+    cssVarPrefix?: string;
+    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+}
+declare function createCssVarsTheme<T extends Theme, ThemeVars extends Record<string, any>>(theme: T): T & {
+    vars: ThemeVars;
+    generateCssVars: (colorScheme?: string | undefined) => {
+        css: Record<string, string | number>;
+        vars: ThemeVars;
+    };
+};
+export default createCssVarsTheme;

package/cssVars/createCssVarsTheme.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _prepareCssVars = _interopRequireDefault(require("./prepareCssVars"));
+const _excluded = ["cssVarPrefix", "shouldSkipGeneratingVar"];
+function createCssVarsTheme(theme) {
+  const {
+      cssVarPrefix,
+      shouldSkipGeneratingVar
+    } = theme,
+    otherTheme = (0, _objectWithoutPropertiesLoose2.default)(theme, _excluded);
+  return (0, _extends2.default)({}, theme, (0, _prepareCssVars.default)(otherTheme, {
+    prefix: cssVarPrefix,
+    shouldSkipGeneratingVar
+  }));
+}
+var _default = createCssVarsTheme;
+exports.default = _default;

package/cssVars/createGetCssVar.js

@@ -14,7 +14,7 @@ function createGetCssVar(prefix = '') {
       return '';
     }
     const value = vars[0];
-    if (typeof value === 'string' && !value.match(/(#|\(|\)|(-?(\d*\.)?\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))/)) {
+    if (typeof value === 'string' && !value.match(/(#|\(|\)|(-?(\d*\.)?\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))|^(-?(\d*\.)?\d+)$|(\d+ \d+ \d+)/)) {
       return `, var(--${prefix ? `${prefix}-` : ''}${value}${appendVar(...vars.slice(1))})`;
     }
     return `, ${value}`;

package/cssVars/cssVarsParser.d.ts

@@ -53,11 +53,12 @@ export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, ca
  * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
  * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
  */
-export default function cssVarsParser<T extends Record<string, any>>(theme: T, options?: {
+export default function cssVarsParser<T extends Record<string, any>>(theme: Record<string, any>, options?: {
     prefix?: string;
     shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
 }): {
     css: Record<string, string | number>;
-    vars: NestedRecord<string>;
+    vars: T;
+    varsWithDefaults: {};
 };
 export {};

package/cssVars/cssVarsParser.js

@@ -115,6 +115,7 @@ function cssVarsParser(theme, options) {
   } = options || {};
   const css = {};
   const vars = {};
+  const varsWithDefaults = {};
   walkObjectDeep(theme, (keys, value, arrayKeys) => {
     if (typeof value === 'string' || typeof value === 'number') {
       if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
@@ -124,6 +125,7 @@ function cssVarsParser(theme, options) {
           [cssVar]: getCssValue(keys, value)
         });
         assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
+        assignNestedKeys(varsWithDefaults, keys, `var(${cssVar}, ${value})`, arrayKeys);
       }
     }
   }, keys => keys[0] === 'vars' // skip 'vars/*' paths
@@ -131,6 +133,7 @@ function cssVarsParser(theme, options) {
 
   return {
     css,
-    vars
+    vars,
+    varsWithDefaults
   };
 }

package/cssVars/index.d.ts

@@ -1,3 +1,5 @@
 export { default } from './createCssVarsProvider';
 export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue, } from './createCssVarsProvider';
 export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
+export { default as prepareCssVars } from './prepareCssVars';
+export { default as createCssVarsTheme } from './createCssVarsTheme';

package/cssVars/index.js

@@ -4,6 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "createCssVarsTheme", {
+  enumerable: true,
+  get: function () {
+    return _createCssVarsTheme.default;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
@@ -16,5 +22,13 @@ Object.defineProperty(exports, "getInitColorSchemeScript", {
     return _getInitColorSchemeScript.default;
   }
 });
+Object.defineProperty(exports, "prepareCssVars", {
+  enumerable: true,
+  get: function () {
+    return _prepareCssVars.default;
+  }
+});
 var _createCssVarsProvider = _interopRequireDefault(require("./createCssVarsProvider"));
-var _getInitColorSchemeScript = _interopRequireDefault(require("./getInitColorSchemeScript"));
+var _getInitColorSchemeScript = _interopRequireDefault(require("./getInitColorSchemeScript"));
+var _prepareCssVars = _interopRequireDefault(require("./prepareCssVars"));
+var _createCssVarsTheme = _interopRequireDefault(require("./createCssVarsTheme"));

package/cssVars/prepareCssVars.d.ts

@@ -0,0 +1,14 @@
+export interface DefaultCssVarsTheme {
+    colorSchemes: Record<string, any>;
+}
+declare function prepareCssVars<T extends DefaultCssVarsTheme, ThemeVars extends Record<string, any>>(theme: T, parserConfig?: {
+    prefix?: string;
+    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+}): {
+    vars: ThemeVars;
+    generateCssVars: (colorScheme?: string) => {
+        css: Record<string, string | number>;
+        vars: ThemeVars;
+    };
+};
+export default prepareCssVars;

package/cssVars/prepareCssVars.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _utils = require("@mui/utils");
+var _cssVarsParser = _interopRequireDefault(require("./cssVarsParser"));
+const _excluded = ["colorSchemes", "components"],
+  _excluded2 = ["light"];
+function prepareCssVars(theme, parserConfig) {
+  // @ts-ignore - ignore components do not exist
+  const {
+      colorSchemes = {}
+    } = theme,
+    otherTheme = (0, _objectWithoutPropertiesLoose2.default)(theme, _excluded);
+  const {
+    vars: rootVars,
+    css: rootCss,
+    varsWithDefaults: rootVarsWithDefaults
+  } = (0, _cssVarsParser.default)(otherTheme, parserConfig);
+  let themeVars = rootVarsWithDefaults;
+  const colorSchemesMap = {};
+  const {
+      light
+    } = colorSchemes,
+    otherColorSchemes = (0, _objectWithoutPropertiesLoose2.default)(colorSchemes, _excluded2);
+  Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
+    const {
+      vars,
+      css,
+      varsWithDefaults
+    } = (0, _cssVarsParser.default)(scheme, parserConfig);
+    themeVars = (0, _utils.deepmerge)(themeVars, varsWithDefaults);
+    colorSchemesMap[key] = {
+      css,
+      vars
+    };
+  });
+  if (light) {
+    // light color scheme vars should be merged last to set as default
+    const {
+      css,
+      vars,
+      varsWithDefaults
+    } = (0, _cssVarsParser.default)(light, parserConfig);
+    themeVars = (0, _utils.deepmerge)(themeVars, varsWithDefaults);
+    colorSchemesMap.light = {
+      css,
+      vars
+    };
+  }
+  const generateCssVars = colorScheme => {
+    if (!colorScheme) {
+      return {
+        css: rootCss,
+        vars: rootVars
+      };
+    }
+    return colorSchemesMap[colorScheme];
+  };
+  return {
+    vars: themeVars,
+    generateCssVars
+  };
+}
+var _default = prepareCssVars;
+exports.default = _default;

package/esm/cssVars/createCssVarsProvider.js

@@ -1,13 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
-const _excluded = ["colorSchemes", "components", "cssVarPrefix"];
+const _excluded = ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { deepmerge } from '@mui/utils';
 import { GlobalStyles } from '@mui/styled-engine';
 import { useTheme as muiUseTheme } from '@mui/private-theming';
-import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
@@ -23,7 +22,6 @@ export default function createCssVarsProvider(options) {
     defaultMode: designSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
-    shouldSkipGeneratingVar: designSystemShouldSkipGeneratingVar,
     resolveTheme,
     excludeVariablesFromRoot
   } = options;
@@ -51,7 +49,6 @@ export default function createCssVarsProvider(options) {
     documentNode = typeof document === 'undefined' ? undefined : document,
     colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
     colorSchemeSelector = ':root',
-    shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar,
     disableNestedContext = false,
     disableStyleSheetGeneration = false
   }) {
@@ -62,6 +59,10 @@ export default function createCssVarsProvider(options) {
     const {
         colorSchemes = {},
         components = {},
+        generateCssVars = () => ({
+          vars: {},
+          css: {}
+        }),
         cssVarPrefix
       } = themeProp,
       restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded);
@@ -119,10 +120,7 @@ export default function createCssVarsProvider(options) {
     const {
       css: rootCss,
       vars: rootVars
-    } = cssVarsParser(restThemeProp, {
-      prefix: cssVarPrefix,
-      shouldSkipGeneratingVar
-    });
+    } = generateCssVars();
 
     // 3. Start composing the theme object
     const theme = _extends({}, restThemeProp, {
@@ -142,10 +140,7 @@ export default function createCssVarsProvider(options) {
       const {
         css,
         vars
-      } = cssVarsParser(scheme, {
-        prefix: cssVarPrefix,
-        shouldSkipGeneratingVar
-      });
+      } = generateCssVars(key);
       theme.vars = deepmerge(theme.vars, vars);
       if (key === calculatedColorScheme) {
         // 4.1 Merge the selected color scheme to the theme
@@ -184,6 +179,7 @@ export default function createCssVarsProvider(options) {
         otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
       }
     });
+    theme.vars = deepmerge(theme.vars, rootVars);
 
     // 5. Declaring effects
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
@@ -308,10 +304,6 @@ export default function createCssVarsProvider(options) {
      * The key in the local storage used to store current color scheme.
      */
     modeStorageKey: PropTypes.string,
-    /**
-     * A function to determine if the key, value should be attached as CSS Variable
-     */
-    shouldSkipGeneratingVar: PropTypes.func,
     /**
      * The window that attaches the 'storage' event listener
      * @default window

package/esm/cssVars/createCssVarsTheme.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["cssVarPrefix", "shouldSkipGeneratingVar"];
+import prepareCssVars from './prepareCssVars';
+function createCssVarsTheme(theme) {
+  const {
+      cssVarPrefix,
+      shouldSkipGeneratingVar
+    } = theme,
+    otherTheme = _objectWithoutPropertiesLoose(theme, _excluded);
+  return _extends({}, theme, prepareCssVars(otherTheme, {
+    prefix: cssVarPrefix,
+    shouldSkipGeneratingVar
+  }));
+}
+export default createCssVarsTheme;