@mui/system 5.11.11 → 5.11.13

package/modern/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/modern/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/modern/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/modern/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/modern/styleFunctionSx/defaultSxConfig.js

@@ -1,8 +1,30 @@
+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 => {
+        let value = props.theme.typography?.[`${prop}${props[prop] === 'default' || props[prop] === prop ? '' : capitalize(props[prop]?.toString())}`];
+        if (!value) {
+          value = props.theme.typography?.[propValue]?.[prop];
+        }
+        if (!value) {
+          value = propValue;
+        }
+        return {
+          [prop]: value
+        };
+      };
+      return handleBreakpoints(props, props[prop], styleFromPropValue);
+    }
+    return null;
+  };
+};
 const defaultSxConfig = {
   // borders
   border: {
@@ -261,16 +283,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.11.11",
+  "version": "5.11.13",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -44,10 +44,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@mui/private-theming": "^5.11.11",
+    "@mui/private-theming": "^5.11.13",
     "@mui/styled-engine": "^5.11.11",
     "@mui/types": "^7.2.3",
-    "@mui/utils": "^5.11.11",
+    "@mui/utils": "^5.11.13",
     "clsx": "^1.2.1",
     "csstype": "^3.1.1",
     "prop-types": "^15.8.1"

package/styleFunctionSx/defaultSxConfig.js

@@ -4,11 +4,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _utils = require("@mui/utils");
 var _spacing = require("../spacing");
+var _breakpoints = require("../breakpoints");
 var _borders = require("../borders");
 var _cssGrid = require("../cssGrid");
 var _palette = require("../palette");
 var _sizing = require("../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 ? '' : (0, _utils.unstable_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 (0, _breakpoints.handleBreakpoints)(props, props[prop], styleFromPropValue);
+    }
+    return null;
+  };
+};
 const defaultSxConfig = {
   // borders
   border: {
@@ -267,16 +291,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: {},