@mui/system 5.11.11 → 5.11.13

package/esm/cssVars/createGetCssVar.js

@@ -8,7 +8,7 @@ export default 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/esm/cssVars/cssVarsParser.js

@@ -105,6 +105,7 @@ export default 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)) {
@@ -114,6 +115,7 @@ export default 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
@@ -121,6 +123,7 @@ export default function cssVarsParser(theme, options) {
 
   return {
     css,
-    vars
+    vars,
+    varsWithDefaults
   };
 }

package/esm/cssVars/index.js

@@ -1,2 +1,4 @@
 export { default } from './createCssVarsProvider';
-export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
+export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
+export { default as prepareCssVars } from './prepareCssVars';
+export { default as createCssVarsTheme } from './createCssVarsTheme';

package/esm/cssVars/prepareCssVars.js

@@ -0,0 +1,62 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["colorSchemes", "components"],
+  _excluded2 = ["light"];
+import { deepmerge } from '@mui/utils';
+import cssVarsParser from './cssVarsParser';
+function prepareCssVars(theme, parserConfig) {
+  // @ts-ignore - ignore components do not exist
+  const {
+      colorSchemes = {}
+    } = theme,
+    otherTheme = _objectWithoutPropertiesLoose(theme, _excluded);
+  const {
+    vars: rootVars,
+    css: rootCss,
+    varsWithDefaults: rootVarsWithDefaults
+  } = cssVarsParser(otherTheme, parserConfig);
+  let themeVars = rootVarsWithDefaults;
+  const colorSchemesMap = {};
+  const {
+      light
+    } = colorSchemes,
+    otherColorSchemes = _objectWithoutPropertiesLoose(colorSchemes, _excluded2);
+  Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
+    const {
+      vars,
+      css,
+      varsWithDefaults
+    } = cssVarsParser(scheme, parserConfig);
+    themeVars = 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
+    } = cssVarsParser(light, parserConfig);
+    themeVars = deepmerge(themeVars, varsWithDefaults);
+    colorSchemesMap.light = {
+      css,
+      vars
+    };
+  }
+  const generateCssVars = colorScheme => {
+    if (!colorScheme) {
+      return {
+        css: rootCss,
+        vars: rootVars
+      };
+    }
+    return colorSchemesMap[colorScheme];
+  };
+  return {
+    vars: themeVars,
+    generateCssVars
+  };
+}
+export default prepareCssVars;

package/esm/index.js

@@ -45,6 +45,9 @@ export * from './colorManipulator';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
 export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';
+export { default as unstable_cssVarsParser } from './cssVars/cssVarsParser';
+export { default as unstable_prepareCssVars } from './cssVars/prepareCssVars';
+export { default as unstable_createCssVarsTheme } from './cssVars/createCssVarsTheme';
 export { default as responsivePropType } from './responsivePropType';
 
 /** ----------------- */

package/esm/styleFunctionSx/defaultSxConfig.js

@@ -1,8 +1,32 @@
+import { unstable_capitalize as capitalize } from '@mui/utils';
 import { padding, margin } from '../spacing';
+import { handleBreakpoints } from '../breakpoints';
 import { borderRadius, borderTransform } from '../borders';
 import { gap, rowGap, columnGap } from '../cssGrid';
 import { paletteTransform } from '../palette';
 import { maxWidth, sizingTransform } from '../sizing';
+const createFontStyleFunction = prop => {
+  return props => {
+    if (props[prop] !== undefined && props[prop] !== null) {
+      const styleFromPropValue = propValue => {
+        var _props$theme$typograp, _props$prop;
+        let value = (_props$theme$typograp = props.theme.typography) == null ? void 0 : _props$theme$typograp[`${prop}${props[prop] === 'default' || props[prop] === prop ? '' : capitalize((_props$prop = props[prop]) == null ? void 0 : _props$prop.toString())}`];
+        if (!value) {
+          var _props$theme$typograp2, _props$theme$typograp3;
+          value = (_props$theme$typograp2 = props.theme.typography) == null ? void 0 : (_props$theme$typograp3 = _props$theme$typograp2[propValue]) == null ? void 0 : _props$theme$typograp3[prop];
+        }
+        if (!value) {
+          value = propValue;
+        }
+        return {
+          [prop]: value
+        };
+      };
+      return handleBreakpoints(props, props[prop], styleFromPropValue);
+    }
+    return null;
+  };
+};
 const defaultSxConfig = {
   // borders
   border: {
@@ -261,16 +285,19 @@ const defaultSxConfig = {
   boxSizing: {},
   // typography
   fontFamily: {
-    themeKey: 'typography'
+    themeKey: 'typography',
+    style: createFontStyleFunction('fontFamily')
   },
   fontSize: {
-    themeKey: 'typography'
+    themeKey: 'typography',
+    style: createFontStyleFunction('fontSize')
   },
   fontStyle: {
     themeKey: 'typography'
   },
   fontWeight: {
-    themeKey: 'typography'
+    themeKey: 'typography',
+    style: createFontStyleFunction('fontWeight')
   },
   letterSpacing: {},
   textTransform: {},

package/index.d.ts

@@ -166,6 +166,9 @@ export * from './ThemeProvider';
 
 export { default as unstable_createCssVarsProvider, CreateCssVarsProviderResult } from './cssVars';
 export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';
+export { default as unstable_cssVarsParser } from './cssVars/cssVarsParser';
+export { default as unstable_prepareCssVars } from './cssVars/prepareCssVars';
+export { default as unstable_createCssVarsTheme } from './cssVars/createCssVarsTheme';
 export * from './cssVars';
 
 export { default as responsivePropType } from './responsivePropType';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.11.11
+ * @mui/system v5.11.13
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -55,6 +55,9 @@ var _exportNames = {
   ThemeProvider: true,
   unstable_createCssVarsProvider: true,
   unstable_createGetCssVar: true,
+  unstable_cssVarsParser: true,
+  unstable_prepareCssVars: true,
+  unstable_createCssVarsTheme: true,
   responsivePropType: true,
   createContainer: true,
   Container: true,
@@ -284,6 +287,12 @@ Object.defineProperty(exports, "unstable_createCssVarsProvider", {
     return _createCssVarsProvider.default;
   }
 });
+Object.defineProperty(exports, "unstable_createCssVarsTheme", {
+  enumerable: true,
+  get: function () {
+    return _createCssVarsTheme.default;
+  }
+});
 Object.defineProperty(exports, "unstable_createGetCssVar", {
   enumerable: true,
   get: function () {
@@ -296,6 +305,12 @@ Object.defineProperty(exports, "unstable_createStyleFunctionSx", {
     return _styleFunctionSx.unstable_createStyleFunctionSx;
   }
 });
+Object.defineProperty(exports, "unstable_cssVarsParser", {
+  enumerable: true,
+  get: function () {
+    return _cssVarsParser.default;
+  }
+});
 Object.defineProperty(exports, "unstable_defaultSxConfig", {
   enumerable: true,
   get: function () {
@@ -314,6 +329,12 @@ Object.defineProperty(exports, "unstable_getThemeValue", {
     return _getThemeValue.default;
   }
 });
+Object.defineProperty(exports, "unstable_prepareCssVars", {
+  enumerable: true,
+  get: function () {
+    return _prepareCssVars.default;
+  }
+});
 Object.defineProperty(exports, "unstable_resolveBreakpointValues", {
   enumerable: true,
   get: function () {
@@ -486,6 +507,9 @@ Object.keys(_colorManipulator).forEach(function (key) {
 var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
 var _createCssVarsProvider = _interopRequireDefault(require("./cssVars/createCssVarsProvider"));
 var _createGetCssVar = _interopRequireDefault(require("./cssVars/createGetCssVar"));
+var _cssVarsParser = _interopRequireDefault(require("./cssVars/cssVarsParser"));
+var _prepareCssVars = _interopRequireDefault(require("./cssVars/prepareCssVars"));
+var _createCssVarsTheme = _interopRequireDefault(require("./cssVars/createCssVarsTheme"));
 var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
 var _createContainer = _interopRequireDefault(require("./Container/createContainer"));
 var _Container = _interopRequireWildcard(require("./Container"));

package/legacy/cssVars/createCssVarsProvider.js

@@ -9,7 +9,6 @@ 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';
@@ -30,7 +29,6 @@ export default function createCssVarsProvider(options) {
     designSystemColorScheme = options.defaultColorScheme,
     _options$disableTrans = options.disableTransitionOnChange,
     designSystemTransitionOnChange = _options$disableTrans === void 0 ? false : _options$disableTrans,
-    designSystemShouldSkipGeneratingVar = options.shouldSkipGeneratingVar,
     resolveTheme = options.resolveTheme,
     excludeVariablesFromRoot = options.excludeVariablesFromRoot;
   if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
@@ -68,8 +66,6 @@ export default function createCssVarsProvider(options) {
       colorSchemeNode = _ref$colorSchemeNode === void 0 ? typeof document === 'undefined' ? undefined : document.documentElement : _ref$colorSchemeNode,
       _ref$colorSchemeSelec = _ref.colorSchemeSelector,
       colorSchemeSelector = _ref$colorSchemeSelec === void 0 ? ':root' : _ref$colorSchemeSelec,
-      _ref$shouldSkipGenera = _ref.shouldSkipGeneratingVar,
-      shouldSkipGeneratingVar = _ref$shouldSkipGenera === void 0 ? designSystemShouldSkipGeneratingVar : _ref$shouldSkipGenera,
       _ref$disableNestedCon = _ref.disableNestedContext,
       disableNestedContext = _ref$disableNestedCon === void 0 ? false : _ref$disableNestedCon,
       _ref$disableStyleShee = _ref.disableStyleSheetGeneration,
@@ -82,8 +78,15 @@ export default function createCssVarsProvider(options) {
       colorSchemes = _themeProp$colorSchem === void 0 ? {} : _themeProp$colorSchem,
       _themeProp$components = themeProp.components,
       components = _themeProp$components === void 0 ? {} : _themeProp$components,
+      _themeProp$generateCs = themeProp.generateCssVars,
+      generateCssVars = _themeProp$generateCs === void 0 ? function () {
+        return {
+          vars: {},
+          css: {}
+        };
+      } : _themeProp$generateCs,
       cssVarPrefix = themeProp.cssVarPrefix,
-      restThemeProp = _objectWithoutProperties(themeProp, ["colorSchemes", "components", "cssVarPrefix"]);
+      restThemeProp = _objectWithoutProperties(themeProp, ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"]);
     var allColorSchemes = Object.keys(colorSchemes);
     var defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     var defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -134,12 +137,9 @@ export default function createCssVarsProvider(options) {
     }();
 
     // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
-    var _cssVarsParser = cssVarsParser(restThemeProp, {
-        prefix: cssVarPrefix,
-        shouldSkipGeneratingVar: shouldSkipGeneratingVar
-      }),
-      rootCss = _cssVarsParser.css,
-      rootVars = _cssVarsParser.vars; // 3. Start composing the theme object
+    var _generateCssVars = generateCssVars(),
+      rootCss = _generateCssVars.css,
+      rootVars = _generateCssVars.vars; // 3. Start composing the theme object
     var theme = _extends({}, restThemeProp, {
       components: components,
       colorSchemes: colorSchemes,
@@ -159,12 +159,9 @@ export default function createCssVarsProvider(options) {
       var _ref3 = _slicedToArray(_ref2, 2),
         key = _ref3[0],
         scheme = _ref3[1];
-      var _cssVarsParser2 = cssVarsParser(scheme, {
-          prefix: cssVarPrefix,
-          shouldSkipGeneratingVar: shouldSkipGeneratingVar
-        }),
-        css = _cssVarsParser2.css,
-        vars = _cssVarsParser2.vars;
+      var _generateCssVars2 = generateCssVars(key),
+        css = _generateCssVars2.css,
+        vars = _generateCssVars2.vars;
       theme.vars = deepmerge(theme.vars, vars);
       if (key === calculatedColorScheme) {
         // 4.1 Merge the selected color scheme to the theme
@@ -203,6 +200,7 @@ export default function createCssVarsProvider(options) {
         otherColorSchemesStyleSheet["".concat(colorSchemeSelector === ':root' ? '' : colorSchemeSelector, "[").concat(attribute, "=\"").concat(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.
@@ -329,10 +327,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/legacy/cssVars/createCssVarsTheme.js

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

package/legacy/cssVars/createGetCssVar.js

@@ -13,7 +13,7 @@ export default function createGetCssVar() {
       return '';
     }
     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))/)) {
+    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(--".concat(prefix ? "".concat(prefix, "-") : '').concat(value).concat(appendVar.apply(void 0, _toConsumableArray(vars.slice(1))), ")");
     }
     return ", ".concat(value);

package/legacy/cssVars/cssVarsParser.js

@@ -117,6 +117,7 @@ export default function cssVarsParser(theme, options) {
     shouldSkipGeneratingVar = _ref3.shouldSkipGeneratingVar;
   var css = {};
   var vars = {};
+  var varsWithDefaults = {};
   walkObjectDeep(theme, function (keys, value, arrayKeys) {
     if (typeof value === 'string' || typeof value === 'number') {
       if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
@@ -124,6 +125,7 @@ export default function cssVarsParser(theme, options) {
         var cssVar = "--".concat(prefix ? "".concat(prefix, "-") : '').concat(keys.join('-'));
         _extends(css, _defineProperty({}, cssVar, getCssValue(keys, value)));
         assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"), arrayKeys);
+        assignNestedKeys(varsWithDefaults, keys, "var(".concat(cssVar, ", ").concat(value, ")"), arrayKeys);
       }
     }
   }, function (keys) {
@@ -133,6 +135,7 @@ export default function cssVarsParser(theme, options) {
 
   return {
     css: css,
-    vars: vars
+    vars: vars,
+    varsWithDefaults: varsWithDefaults
   };
 }

package/legacy/cssVars/index.js

@@ -1,2 +1,4 @@
 export { default } from './createCssVarsProvider';
-export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
+export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
+export { default as prepareCssVars } from './prepareCssVars';
+export { default as createCssVarsTheme } from './createCssVarsTheme';

package/legacy/cssVars/prepareCssVars.js

@@ -0,0 +1,59 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import { deepmerge } from '@mui/utils';
+import cssVarsParser from './cssVarsParser';
+function prepareCssVars(theme, parserConfig) {
+  // @ts-ignore - ignore components do not exist
+  var _theme$colorSchemes = theme.colorSchemes,
+    colorSchemes = _theme$colorSchemes === void 0 ? {} : _theme$colorSchemes,
+    components = theme.components,
+    otherTheme = _objectWithoutProperties(theme, ["colorSchemes", "components"]);
+  var _cssVarsParser = cssVarsParser(otherTheme, parserConfig),
+    rootVars = _cssVarsParser.vars,
+    rootCss = _cssVarsParser.css,
+    rootVarsWithDefaults = _cssVarsParser.varsWithDefaults;
+  var themeVars = rootVarsWithDefaults;
+  var colorSchemesMap = {};
+  var light = colorSchemes.light,
+    otherColorSchemes = _objectWithoutProperties(colorSchemes, ["light"]);
+  Object.entries(otherColorSchemes || {}).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      scheme = _ref2[1];
+    var _cssVarsParser2 = cssVarsParser(scheme, parserConfig),
+      vars = _cssVarsParser2.vars,
+      css = _cssVarsParser2.css,
+      varsWithDefaults = _cssVarsParser2.varsWithDefaults;
+    themeVars = deepmerge(themeVars, varsWithDefaults);
+    colorSchemesMap[key] = {
+      css: css,
+      vars: vars
+    };
+  });
+  if (light) {
+    // light color scheme vars should be merged last to set as default
+    var _cssVarsParser3 = cssVarsParser(light, parserConfig),
+      css = _cssVarsParser3.css,
+      vars = _cssVarsParser3.vars,
+      varsWithDefaults = _cssVarsParser3.varsWithDefaults;
+    themeVars = deepmerge(themeVars, varsWithDefaults);
+    colorSchemesMap.light = {
+      css: css,
+      vars: vars
+    };
+  }
+  var generateCssVars = function generateCssVars(colorScheme) {
+    if (!colorScheme) {
+      return {
+        css: rootCss,
+        vars: rootVars
+      };
+    }
+    return colorSchemesMap[colorScheme];
+  };
+  return {
+    vars: themeVars,
+    generateCssVars: generateCssVars
+  };
+}
+export default prepareCssVars;

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.11.11
+ * @mui/system v5.11.13
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -52,6 +52,9 @@ export * from './colorManipulator';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
 export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';
+export { default as unstable_cssVarsParser } from './cssVars/cssVarsParser';
+export { default as unstable_prepareCssVars } from './cssVars/prepareCssVars';
+export { default as unstable_createCssVarsTheme } from './cssVars/createCssVarsTheme';
 export { default as responsivePropType } from './responsivePropType';
 
 /** ----------------- */

package/legacy/styleFunctionSx/defaultSxConfig.js

@@ -1,8 +1,31 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { unstable_capitalize as capitalize } from '@mui/utils';
 import { padding, margin } from '../spacing';
+import { handleBreakpoints } from '../breakpoints';
 import { borderRadius, borderTransform } from '../borders';
 import { gap, rowGap, columnGap } from '../cssGrid';
 import { paletteTransform } from '../palette';
 import { maxWidth, sizingTransform } from '../sizing';
+var createFontStyleFunction = function createFontStyleFunction(prop) {
+  return function (props) {
+    if (props[prop] !== undefined && props[prop] !== null) {
+      var styleFromPropValue = function styleFromPropValue(propValue) {
+        var _props$theme$typograp, _props$prop;
+        var value = (_props$theme$typograp = props.theme.typography) == null ? void 0 : _props$theme$typograp["".concat(prop).concat(props[prop] === 'default' || props[prop] === prop ? '' : capitalize((_props$prop = props[prop]) == null ? void 0 : _props$prop.toString()))];
+        if (!value) {
+          var _props$theme$typograp2, _props$theme$typograp3;
+          value = (_props$theme$typograp2 = props.theme.typography) == null ? void 0 : (_props$theme$typograp3 = _props$theme$typograp2[propValue]) == null ? void 0 : _props$theme$typograp3[prop];
+        }
+        if (!value) {
+          value = propValue;
+        }
+        return _defineProperty({}, prop, value);
+      };
+      return handleBreakpoints(props, props[prop], styleFromPropValue);
+    }
+    return null;
+  };
+};
 var defaultSxConfig = {
   // borders
   border: {
@@ -263,16 +286,19 @@ var defaultSxConfig = {
   boxSizing: {},
   // typography
   fontFamily: {
-    themeKey: 'typography'
+    themeKey: 'typography',
+    style: createFontStyleFunction('fontFamily')
   },
   fontSize: {
-    themeKey: 'typography'
+    themeKey: 'typography',
+    style: createFontStyleFunction('fontSize')
   },
   fontStyle: {
     themeKey: 'typography'
   },
   fontWeight: {
-    themeKey: 'typography'
+    themeKey: 'typography',
+    style: createFontStyleFunction('fontWeight')
   },
   letterSpacing: {},
   textTransform: {},

package/modern/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/modern/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;

package/modern/cssVars/createGetCssVar.js

@@ -8,7 +8,7 @@ export default 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}`;