@mui/system 5.4.1 → 5.4.4

package/legacy/cssVars/createCssVarsProvider.js

@@ -26,12 +26,13 @@ export default function createCssVarsProvider(options) {
       desisgnSystemMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
       designSystemColorScheme = options.defaultColorScheme,
       _options$disableTrans = options.disableTransitionOnChange,
-      disableTransitionOnChange = _options$disableTrans === void 0 ? false : _options$disableTrans,
+      designSystemTransitionOnChange = _options$disableTrans === void 0 ? false : _options$disableTrans,
       _options$enableColorS = options.enableColorScheme,
-      enableColorScheme = _options$enableColorS === void 0 ? true : _options$enableColorS,
+      designSystemEnableColorScheme = _options$enableColorS === void 0 ? true : _options$enableColorS,
       _options$prefix = options.prefix,
       designSystemPrefix = _options$prefix === void 0 ? '' : _options$prefix,
-      shouldSkipGeneratingVar = options.shouldSkipGeneratingVar;
+      shouldSkipGeneratingVar = options.shouldSkipGeneratingVar,
+      resolveTheme = options.resolveTheme;
   var systemSpacing = createSpacing(baseTheme.spacing);
   var systemBreakpoints = createBreakpoints((_baseTheme$breakpoint = baseTheme.breakpoints) != null ? _baseTheme$breakpoint : {});
 
@@ -64,16 +65,15 @@ export default function createCssVarsProvider(options) {
         _ref$defaultMode = _ref.defaultMode,
         defaultMode = _ref$defaultMode === void 0 ? desisgnSystemMode : _ref$defaultMode,
         _ref$defaultColorSche = _ref.defaultColorScheme,
-        defaultColorScheme = _ref$defaultColorSche === void 0 ? designSystemColorScheme : _ref$defaultColorSche;
-    // make sure that baseTheme is always independent of each <CssVarsProvider /> call.
-    // JSON.parse(JSON.stringify(...)) is okay to be used as long as the baseTheme is a plain object.
-    var clonedBaseTheme = React.useMemo(function () {
-      return JSON.parse(JSON.stringify(baseTheme));
-    }, []);
+        defaultColorScheme = _ref$defaultColorSche === void 0 ? designSystemColorScheme : _ref$defaultColorSche,
+        _ref$disableTransitio = _ref.disableTransitionOnChange,
+        disableTransitionOnChange = _ref$disableTransitio === void 0 ? designSystemTransitionOnChange : _ref$disableTransitio,
+        _ref$enableColorSchem = _ref.enableColorScheme,
+        enableColorScheme = _ref$enableColorSchem === void 0 ? designSystemEnableColorScheme : _ref$enableColorSchem;
 
-    var _clonedBaseTheme$colo = clonedBaseTheme.colorSchemes,
-        baseColorSchemes = _clonedBaseTheme$colo === void 0 ? {} : _clonedBaseTheme$colo,
-        restBaseTheme = _objectWithoutProperties(clonedBaseTheme, ["colorSchemes"]);
+    var _baseTheme$colorSchem = baseTheme.colorSchemes,
+        baseColorSchemes = _baseTheme$colorSchem === void 0 ? {} : _baseTheme$colorSchem,
+        restBaseTheme = _objectWithoutProperties(baseTheme, ["colorSchemes"]);
 
     var _themeProp$colorSchem = themeProp.colorSchemes,
         colorSchemesProp = _themeProp$colorSchem === void 0 ? {} : _themeProp$colorSchem,
@@ -126,11 +126,13 @@ export default function createCssVarsProvider(options) {
       shouldSkipGeneratingVar: shouldSkipGeneratingVar
     }),
         rootCss = _cssVarsParser.css,
-        rootVars = _cssVarsParser.vars;
+        rootVars = _cssVarsParser.vars,
+        parsedTheme = _cssVarsParser.parsedTheme;
 
-    mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
+    mergedTheme = _extends({}, parsedTheme, {
       components: components,
       colorSchemes: colorSchemes,
+      prefix: prefix,
       vars: rootVars,
       spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
       breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
@@ -148,10 +150,15 @@ export default function createCssVarsProvider(options) {
         shouldSkipGeneratingVar: shouldSkipGeneratingVar
       }),
           css = _cssVarsParser2.css,
-          vars = _cssVarsParser2.vars;
+          vars = _cssVarsParser2.vars,
+          parsedScheme = _cssVarsParser2.parsedTheme;
 
       mergedTheme.vars = deepmerge(mergedTheme.vars, vars);
 
+      if (key === resolvedColorScheme) {
+        mergedTheme = _extends({}, mergedTheme, parsedScheme);
+      }
+
       var resolvedDefaultColorScheme = function () {
         if (typeof defaultColorScheme === 'string') {
           return defaultColorScheme;
@@ -192,7 +199,7 @@ export default function createCssVarsProvider(options) {
       return function () {
         document.documentElement.style.setProperty('color-scheme', priorColorScheme);
       };
-    }, [mode, systemMode]);
+    }, [mode, systemMode, enableColorScheme]);
     React.useEffect(function () {
       var timer;
 
@@ -214,7 +221,7 @@ export default function createCssVarsProvider(options) {
       return function () {
         clearTimeout(timer);
       };
-    }, [colorScheme]);
+    }, [colorScheme, disableTransitionOnChange]);
     React.useEffect(function () {
       hasMounted.current = true;
       return function () {
@@ -238,7 +245,7 @@ export default function createCssVarsProvider(options) {
       }), /*#__PURE__*/_jsx(GlobalStyles, {
         styles: styleSheet
       }), /*#__PURE__*/_jsx(ThemeProvider, {
-        theme: mergedTheme,
+        theme: resolveTheme ? resolveTheme(mergedTheme) : mergedTheme,
         children: children
       })]
     });
@@ -265,6 +272,16 @@ export default function createCssVarsProvider(options) {
      */
     defaultMode: PropTypes.string,
 
+    /**
+     * Disable CSS transitions when switching between modes or color schemes
+     */
+    disableTransitionOnChange: PropTypes.bool,
+
+    /**
+     * Indicate to the browser which color scheme is used (light or dark) for rendering built-in UI
+     */
+    enableColorScheme: PropTypes.bool,
+
     /**
      * The key in the local storage used to store current color scheme.
      */

package/legacy/cssVars/createGetCssVar.js

@@ -16,7 +16,13 @@ export default function createGetCssVar() {
       return '';
     }
 
-    return ", var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(vars[0]).concat(appendVar.apply(void 0, _toConsumableArray(vars.slice(1))), ")");
+    var 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))/)) {
+      return ", var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(value).concat(appendVar.apply(void 0, _toConsumableArray(vars.slice(1))), ")");
+    }
+
+    return ", ".concat(value);
   } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
 
 

package/legacy/cssVars/cssVarsParser.js

@@ -98,19 +98,20 @@ var getCssValue = function getCssValue(keys, value) {
  *  `basePrefix`: defined by design system.
  *  `prefix`: defined by application
  *
- *   This function also mutate the string value of theme input by replacing `basePrefix` (if existed) with `prefix`
+ *   the CSS variable value will be adjusted based on the provided `basePrefix` & `prefix` which can be found in `parsedTheme`.
  *
- * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme)
+ * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
  *
  * @example
- * const { css, vars } = parser({
+ * const { css, vars, parsedTheme } = parser({
  *   fontSize: 12,
  *   lineHeight: 1.2,
- *   palette: { primary: { 500: '#000000' } }
- * })
+ *   palette: { primary: { 500: 'var(--color)' } }
+ * }, { prefix: 'foo' })
  *
- * console.log(css) // { '--fontSize': '12px', '--lineHeight': 1.2, '--palette-primary-500': '#000000' }
- * console.log(vars) // { fontSize: '--fontSize', lineHeight: '--lineHeight', palette: { primary: { 500: 'var(--palette-primary-500)' } } }
+ * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--foo-color)' }
+ * console.log(vars) // { fontSize: '--foo-fontSize', lineHeight: '--foo-lineHeight', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+ * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--foo-color)' } } }
  */
 
 
@@ -123,37 +124,37 @@ export default function cssVarsParser(theme, options) {
 
   var css = {};
   var vars = {};
-  walkObjectDeep(theme, function (keys, val, scope) {
-    if (typeof val === 'string' || typeof val === 'number') {
-      var _value = val;
-
-      if (typeof _value === 'string' && _value.startsWith('var')) {
-        // replace the value of the `scope` object with the prefix or remove basePrefix from the value
+  var parsedTheme = {};
+  walkObjectDeep(theme, function (keys, value) {
+    if (typeof value === 'string' || typeof value === 'number') {
+      if (typeof value === 'string' && value.match(/var\(\s*--/)) {
+        // for CSS variable, apply prefix or remove basePrefix from the variable
         if (!basePrefix && prefix) {
-          _value = _value.replace(/var\(--/g, "var(--".concat(prefix, "-"));
+          value = value.replace(/var\(\s*--/g, "var(--".concat(prefix, "-"));
         } else {
-          _value = prefix ? _value.replace(new RegExp(basePrefix, 'g'), prefix) : _value.replace(new RegExp("".concat(basePrefix, "-"), 'g'), '');
-        } // scope is the deepest object in the tree, keys is the theme path keys
-
-
-        scope[keys.slice(-1)[0]] = _value;
+          value = prefix ? value.replace(new RegExp("var\\(\\s*--".concat(basePrefix), 'g'), "var(--".concat(prefix)) // removing spaces
+          : value.replace(new RegExp("var\\(\\s*--".concat(basePrefix, "-"), 'g'), 'var(--');
+        }
       }
 
-      if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, _value)) {
+      if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, value)) {
         // only create css & var if `shouldSkipGeneratingVar` return false
         var cssVar = "--".concat(prefix ? "".concat(prefix, "-") : '').concat(keys.join('-'));
 
-        _extends(css, _defineProperty({}, cssVar, getCssValue(keys, _value)));
+        _extends(css, _defineProperty({}, cssVar, getCssValue(keys, value)));
 
         assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"));
       }
     }
+
+    assignNestedKeys(parsedTheme, keys, value);
   }, function (keys) {
     return keys[0] === 'vars';
   } // skip 'vars/*' paths
   );
   return {
     css: css,
-    vars: vars
+    vars: vars,
+    parsedTheme: parsedTheme
   };
 }

package/legacy/getThemeValue.js

@@ -21,7 +21,7 @@ var filterPropsMapping = {
   spacing: spacing.filterProps,
   typography: typography.filterProps
 };
-var styleFunctionMapping = {
+export var styleFunctionMapping = {
   borders: borders,
   display: display,
   flexbox: flexbox,

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.4.1
+/** @license MUI v5.4.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -26,7 +26,7 @@ export * from './spacing';
 export { default as style, getPath } from './style';
 export { default as typography } from './typography';
 export * from './typography';
-export { default as unstable_styleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx';
+export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx';
 export { default as experimental_sx } from './sx';
 export { default as unstable_getThemeValue } from './getThemeValue';
 export { default as Box } from './Box';

package/legacy/styleFunctionSx/index.js

@@ -1,2 +1,3 @@
 export { default } from './styleFunctionSx';
+export { unstable_createStyleFunctionSx } from './styleFunctionSx';
 export { default as extendSxProp } from './extendSxProp';

package/legacy/styleFunctionSx/styleFunctionSx.js

@@ -1,7 +1,7 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import merge from '../merge';
-import getThemeValue, { propToStyleFunction } from '../getThemeValue';
+import { styleFunctionMapping as defaultStyleFunctionMapping } from '../getThemeValue';
 import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from '../breakpoints';
 
 function objectsHaveSameKeys() {
@@ -20,70 +20,95 @@ function objectsHaveSameKeys() {
 
 function callIfFn(maybeFn, arg) {
   return typeof maybeFn === 'function' ? maybeFn(arg) : maybeFn;
-}
+} // eslint-disable-next-line @typescript-eslint/naming-convention
 
-function styleFunctionSx(props) {
-  var _ref = props || {},
-      sx = _ref.sx,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? {} : _ref$theme;
 
-  if (!sx) {
-    return null; // emotion & styled-components will neglect null
-  }
-  /*
-   * Receive `sxInput` as object or callback
-   * and then recursively check keys & values to create media query object styles.
-   * (the result will be used in `styled`)
-   */
+export function unstable_createStyleFunctionSx() {
+  var styleFunctionMapping = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultStyleFunctionMapping;
+  var propToStyleFunction = Object.keys(styleFunctionMapping).reduce(function (acc, styleFnName) {
+    styleFunctionMapping[styleFnName].filterProps.forEach(function (propName) {
+      acc[propName] = styleFunctionMapping[styleFnName];
+    });
+    return acc;
+  }, {});
+
+  function getThemeValue(prop, value, theme) {
+    var _inputProps;
 
+    var inputProps = (_inputProps = {}, _defineProperty(_inputProps, prop, value), _defineProperty(_inputProps, "theme", theme), _inputProps);
+    var styleFunction = propToStyleFunction[prop];
+    return styleFunction ? styleFunction(inputProps) : _defineProperty({}, prop, value);
+  }
 
-  function traverse(sxInput) {
-    var sxObject = sxInput;
+  function styleFunctionSx(props) {
+    var _ref2 = props || {},
+        sx = _ref2.sx,
+        _ref2$theme = _ref2.theme,
+        theme = _ref2$theme === void 0 ? {} : _ref2$theme;
 
-    if (typeof sxInput === 'function') {
-      sxObject = sxInput(theme);
-    } else if (_typeof(sxInput) !== 'object') {
-      // value
-      return sxInput;
+    if (!sx) {
+      return null; // emotion & styled-components will neglect null
     }
+    /*
+     * Receive `sxInput` as object or callback
+     * and then recursively check keys & values to create media query object styles.
+     * (the result will be used in `styled`)
+     */
 
-    var emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
-    var breakpointsKeys = Object.keys(emptyBreakpoints);
-    var css = emptyBreakpoints;
-    Object.keys(sxObject).forEach(function (styleKey) {
-      var value = callIfFn(sxObject[styleKey], theme);
 
-      if (value !== null && value !== undefined) {
-        if (_typeof(value) === 'object') {
-          if (propToStyleFunction[styleKey]) {
-            css = merge(css, getThemeValue(styleKey, value, theme));
-          } else {
-            var breakpointsValues = handleBreakpoints({
-              theme: theme
-            }, value, function (x) {
-              return _defineProperty({}, styleKey, x);
-            });
-
-            if (objectsHaveSameKeys(breakpointsValues, value)) {
-              css[styleKey] = styleFunctionSx({
-                sx: value,
+    function traverse(sxInput) {
+      var sxObject = sxInput;
+
+      if (typeof sxInput === 'function') {
+        sxObject = sxInput(theme);
+      } else if (_typeof(sxInput) !== 'object') {
+        // value
+        return sxInput;
+      }
+
+      if (!sxObject) {
+        return null;
+      }
+
+      var emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
+      var breakpointsKeys = Object.keys(emptyBreakpoints);
+      var css = emptyBreakpoints;
+      Object.keys(sxObject).forEach(function (styleKey) {
+        var value = callIfFn(sxObject[styleKey], theme);
+
+        if (value !== null && value !== undefined) {
+          if (_typeof(value) === 'object') {
+            if (propToStyleFunction[styleKey]) {
+              css = merge(css, getThemeValue(styleKey, value, theme));
+            } else {
+              var breakpointsValues = handleBreakpoints({
                 theme: theme
+              }, value, function (x) {
+                return _defineProperty({}, styleKey, x);
               });
-            } else {
-              css = merge(css, breakpointsValues);
+
+              if (objectsHaveSameKeys(breakpointsValues, value)) {
+                css[styleKey] = styleFunctionSx({
+                  sx: value,
+                  theme: theme
+                });
+              } else {
+                css = merge(css, breakpointsValues);
+              }
             }
+          } else {
+            css = merge(css, getThemeValue(styleKey, value, theme));
           }
-        } else {
-          css = merge(css, getThemeValue(styleKey, value, theme));
         }
-      }
-    });
-    return removeUnusedBreakpoints(breakpointsKeys, css);
+      });
+      return removeUnusedBreakpoints(breakpointsKeys, css);
+    }
+
+    return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
   }
 
-  return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
+  return styleFunctionSx;
 }
-
+var styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 export default styleFunctionSx;

package/modern/createBox.js

@@ -5,14 +5,15 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import styled from '@mui/styled-engine';
-import styleFunctionSx, { extendSxProp } from './styleFunctionSx';
+import defaultStyleFunctionSx, { extendSxProp } from './styleFunctionSx';
 import useTheme from './useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createBox(options = {}) {
   const {
     defaultTheme,
     defaultClassName = 'MuiBox-root',
-    generateClassName
+    generateClassName,
+    styleFunctionSx = defaultStyleFunctionSx
   } = options;
   const BoxRoot = styled('div')(styleFunctionSx);
   const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {

package/modern/createStyled.js

@@ -6,8 +6,8 @@ const _excluded = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesR
 import styledEngineStyled from '@mui/styled-engine';
 import { getDisplayName } from '@mui/utils';
 import createTheme from './createTheme';
-import styleFunctionSx from './styleFunctionSx';
 import propsToClassKey from './propsToClassKey';
+import defaultStyleFunctionSx from './styleFunctionSx';
 
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;
@@ -59,7 +59,8 @@ const variantsResolver = (props, styles, theme, name) => {
   }
 
   return variantsStyles;
-};
+}; // Update /system/styled/#api in case if this changes
+
 
 export function shouldForwardProp(prop) {
   return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
@@ -74,7 +75,8 @@ export default function createStyled(input = {}) {
   const {
     defaultTheme = systemDefaultTheme,
     rootShouldForwardProp = shouldForwardProp,
-    slotShouldForwardProp = shouldForwardProp
+    slotShouldForwardProp = shouldForwardProp,
+    styleFunctionSx = defaultStyleFunctionSx
   } = input;
   return (tag, inputOptions = {}) => {
     const {
@@ -170,7 +172,11 @@ export default function createStyled(input = {}) {
 
         transformedStyleArg = [...styleArg, ...placeholders];
         transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
-      } else if (typeof styleArg === 'function') {
+      } else if (typeof styleArg === 'function' && // On the server emotion doesn't use React.forwardRef for creating components, so the created
+      // component stays as a function. This condition makes sure that we do not interpolate functions
+      // which are basically components used as a selectors.
+      // eslint-disable-next-line no-underscore-dangle
+      styleArg.__emotion_real !== styleArg) {
         // If the type is function, we need to define the default theme.
         transformedStyleArg = _ref2 => {
           let {

package/modern/createTheme/createBreakpoints.js

@@ -1,9 +1,24 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["values", "unit", "step"];
 // Sorted ASC by size. That's important.
 // It can't be configured as it's used statically for propTypes.
-export const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl']; // Keep in mind that @media is inclusive by the CSS specification.
+export const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+const sortBreakpointsValues = values => {
+  const breakpointsAsArray = Object.keys(values).map(key => ({
+    key,
+    val: values[key]
+  })) || []; // Sort in ascending order
+
+  breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
+  return breakpointsAsArray.reduce((acc, obj) => {
+    return _extends({}, acc, {
+      [obj.key]: obj.val
+    });
+  }, {});
+}; // Keep in mind that @media is inclusive by the CSS specification.
+
 
 export default function createBreakpoints(breakpoints) {
   const {
@@ -26,7 +41,8 @@ export default function createBreakpoints(breakpoints) {
   } = breakpoints,
         other = _objectWithoutPropertiesLoose(breakpoints, _excluded);
 
-  const keys = Object.keys(values);
+  const sortedValues = sortBreakpointsValues(values);
+  const keys = Object.keys(sortedValues);
 
   function up(key) {
     const value = typeof values[key] === 'number' ? values[key] : key;
@@ -68,7 +84,7 @@ export default function createBreakpoints(breakpoints) {
 
   return _extends({
     keys,
-    values,
+    values: sortedValues,
     up,
     down,
     between,

package/modern/cssVars/createCssVarsProvider.js

@@ -23,10 +23,11 @@ export default function createCssVarsProvider(options) {
     theme: baseTheme = {},
     defaultMode: desisgnSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
-    disableTransitionOnChange = false,
-    enableColorScheme = true,
+    disableTransitionOnChange: designSystemTransitionOnChange = false,
+    enableColorScheme: designSystemEnableColorScheme = true,
     prefix: designSystemPrefix = '',
-    shouldSkipGeneratingVar
+    shouldSkipGeneratingVar,
+    resolveTheme
   } = options;
   const systemSpacing = createSpacing(baseTheme.spacing);
   const systemBreakpoints = createBreakpoints(baseTheme.breakpoints ?? {});
@@ -54,16 +55,14 @@ export default function createCssVarsProvider(options) {
     modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
     attribute = DEFAULT_ATTRIBUTE,
     defaultMode = desisgnSystemMode,
-    defaultColorScheme = designSystemColorScheme
+    defaultColorScheme = designSystemColorScheme,
+    disableTransitionOnChange = designSystemTransitionOnChange,
+    enableColorScheme = designSystemEnableColorScheme
   }) {
-    // make sure that baseTheme is always independent of each <CssVarsProvider /> call.
-    // JSON.parse(JSON.stringify(...)) is okay to be used as long as the baseTheme is a plain object.
-    const clonedBaseTheme = React.useMemo(() => JSON.parse(JSON.stringify(baseTheme)), []);
-
     const {
       colorSchemes: baseColorSchemes = {}
-    } = clonedBaseTheme,
-          restBaseTheme = _objectWithoutPropertiesLoose(clonedBaseTheme, _excluded);
+    } = baseTheme,
+          restBaseTheme = _objectWithoutPropertiesLoose(baseTheme, _excluded);
 
     const {
       colorSchemes: colorSchemesProp = {}
@@ -114,15 +113,17 @@ export default function createCssVarsProvider(options) {
 
     const {
       css: rootCss,
-      vars: rootVars
+      vars: rootVars,
+      parsedTheme
     } = cssVarsParser(mergedTheme, {
       prefix,
       basePrefix: designSystemPrefix,
       shouldSkipGeneratingVar
     });
-    mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
+    mergedTheme = _extends({}, parsedTheme, {
       components,
       colorSchemes,
+      prefix,
       vars: rootVars,
       spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
       breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
@@ -132,7 +133,8 @@ export default function createCssVarsProvider(options) {
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
       const {
         css,
-        vars
+        vars,
+        parsedTheme: parsedScheme
       } = cssVarsParser(scheme, {
         prefix,
         basePrefix: designSystemPrefix,
@@ -140,6 +142,10 @@ export default function createCssVarsProvider(options) {
       });
       mergedTheme.vars = deepmerge(mergedTheme.vars, vars);
 
+      if (key === resolvedColorScheme) {
+        mergedTheme = _extends({}, mergedTheme, parsedScheme);
+      }
+
       const resolvedDefaultColorScheme = (() => {
         if (typeof defaultColorScheme === 'string') {
           return defaultColorScheme;
@@ -180,7 +186,7 @@ export default function createCssVarsProvider(options) {
       return () => {
         document.documentElement.style.setProperty('color-scheme', priorColorScheme);
       };
-    }, [mode, systemMode]);
+    }, [mode, systemMode, enableColorScheme]);
     React.useEffect(() => {
       let timer;
 
@@ -200,7 +206,7 @@ export default function createCssVarsProvider(options) {
       return () => {
         clearTimeout(timer);
       };
-    }, [colorScheme]);
+    }, [colorScheme, disableTransitionOnChange]);
     React.useEffect(() => {
       hasMounted.current = true;
       return () => {
@@ -224,7 +230,7 @@ export default function createCssVarsProvider(options) {
       }), /*#__PURE__*/_jsx(GlobalStyles, {
         styles: styleSheet
       }), /*#__PURE__*/_jsx(ThemeProvider, {
-        theme: mergedTheme,
+        theme: resolveTheme ? resolveTheme(mergedTheme) : mergedTheme,
         children: children
       })]
     });
@@ -251,6 +257,16 @@ export default function createCssVarsProvider(options) {
      */
     defaultMode: PropTypes.string,
 
+    /**
+     * Disable CSS transitions when switching between modes or color schemes
+     */
+    disableTransitionOnChange: PropTypes.bool,
+
+    /**
+     * Indicate to the browser which color scheme is used (light or dark) for rendering built-in UI
+     */
+    enableColorScheme: PropTypes.bool,
+
     /**
      * The key in the local storage used to store current color scheme.
      */

package/modern/cssVars/createGetCssVar.js

@@ -8,7 +8,13 @@ export default function createGetCssVar(prefix = '') {
       return '';
     }
 
-    return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`;
+    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))/)) {
+      return `, var(--${prefix ? `${prefix}-` : ''}${value}${appendVar(...vars.slice(1))})`;
+    }
+
+    return `, ${value}`;
   } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.