@mui/system 5.8.0 → 5.8.3

package/modern/cssVars/createCssVarsProvider.js

@@ -8,7 +8,7 @@ import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui
 import { GlobalStyles } from '@mui/styled-engine';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
-import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
+import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
 import createGetCssVar from './createGetCssVar';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -17,6 +17,9 @@ export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-
 export default function createCssVarsProvider(options) {
   const {
     theme: defaultTheme = {},
+    attribute: defaultAttribute = DEFAULT_ATTRIBUTE,
+    modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     defaultMode: desisgnSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
@@ -46,9 +49,9 @@ export default function createCssVarsProvider(options) {
     children,
     theme: themeProp = defaultTheme,
     prefix = designSystemPrefix,
-    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    attribute = DEFAULT_ATTRIBUTE,
+    modeStorageKey = defaultModeStorageKey,
+    colorSchemeStorageKey = defaultColorSchemeStorageKey,
+    attribute = defaultAttribute,
     defaultMode = desisgnSystemMode,
     defaultColorScheme = designSystemColorScheme,
     disableTransitionOnChange = designSystemTransitionOnChange,
@@ -116,9 +119,11 @@ export default function createCssVarsProvider(options) {
       colorSchemes,
       prefix,
       vars: rootVars,
-      getCssVar: createGetCssVar(prefix)
+      getCssVar: createGetCssVar(prefix),
+      getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
     });
-    const styleSheet = {};
+    const defaultColorSchemeStyleSheet = {};
+    const otherColorSchemesStyleSheet = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
       const {
         css,
@@ -154,9 +159,9 @@ export default function createCssVarsProvider(options) {
       })();
 
       if (key === resolvedDefaultColorScheme) {
-        styleSheet[colorSchemeSelector] = css;
+        defaultColorSchemeStyleSheet[colorSchemeSelector] = css;
       } else {
-        styleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
+        otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
       }
     });
     React.useEffect(() => {
@@ -223,7 +228,9 @@ export default function createCssVarsProvider(options) {
           [colorSchemeSelector]: rootCss
         }
       }), /*#__PURE__*/_jsx(GlobalStyles, {
-        styles: styleSheet
+        styles: defaultColorSchemeStyleSheet
+      }), /*#__PURE__*/_jsx(GlobalStyles, {
+        styles: otherColorSchemesStyleSheet
       }), /*#__PURE__*/_jsx(ThemeProvider, {
         theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
@@ -303,6 +310,13 @@ export default function createCssVarsProvider(options) {
      */
     theme: PropTypes.object
   } : void 0;
+
+  const getInitColorSchemeScript = params => systemGetInitColorSchemeScript(_extends({
+    attribute: defaultAttribute,
+    colorSchemeStorageKey: defaultColorSchemeStorageKey,
+    modeStorageKey: defaultModeStorageKey
+  }, params));
+
   return {
     CssVarsProvider,
     useColorScheme,

package/modern/cssVars/getInitColorSchemeScript.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const DEFAULT_MODE_STORAGE_KEY = 'mui-mode';
-export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
-export const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
+export const DEFAULT_MODE_STORAGE_KEY = 'mode';
+export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
+export const DEFAULT_ATTRIBUTE = 'data-color-scheme';
 export default function getInitColorSchemeScript(options) {
   const {
     enableSystem = false,

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.0
+/** @license MUI v5.8.3
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/spacing.js

@@ -43,7 +43,7 @@ const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTo
 const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
 const spacingKeys = [...marginKeys, ...paddingKeys];
 export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
-  const themeSpacing = getPath(theme, themeKey) ?? defaultValue;
+  const themeSpacing = getPath(theme, themeKey, false) ?? defaultValue;
 
   if (typeof themeSpacing === 'number') {
     return abs => {

package/modern/style.js

@@ -1,13 +1,13 @@
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import responsivePropType from './responsivePropType';
 import { handleBreakpoints } from './breakpoints';
-export function getPath(obj, path) {
+export function getPath(obj, path, checkVars = true) {
   if (!path || typeof path !== 'string') {
     return null;
   } // Check if CSS variables are used
 
 
-  if (obj && obj.vars) {
+  if (obj && obj.vars && checkVars) {
     const val = `vars.${path}`.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
 
     if (val != null) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.8.0",
+  "version": "5.8.3",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -49,7 +49,7 @@
     "@mui/types": "^7.1.3",
     "@mui/utils": "^5.8.0",
     "clsx": "^1.1.1",
-    "csstype": "^3.0.11",
+    "csstype": "^3.1.0",
     "prop-types": "^15.8.1"
   },
   "sideEffects": false,

package/spacing.js

@@ -66,7 +66,7 @@ const spacingKeys = [...marginKeys, ...paddingKeys];
 function createUnaryUnit(theme, themeKey, defaultValue, propName) {
   var _getPath;
 
-  const themeSpacing = (_getPath = (0, _style.getPath)(theme, themeKey)) != null ? _getPath : defaultValue;
+  const themeSpacing = (_getPath = (0, _style.getPath)(theme, themeKey, false)) != null ? _getPath : defaultValue;
 
   if (typeof themeSpacing === 'number') {
     return abs => {

package/style.js

@@ -14,13 +14,13 @@ var _responsivePropType = _interopRequireDefault(require("./responsivePropType")
 
 var _breakpoints = require("./breakpoints");
 
-function getPath(obj, path) {
+function getPath(obj, path, checkVars = true) {
   if (!path || typeof path !== 'string') {
     return null;
   } // Check if CSS variables are used
 
 
-  if (obj && obj.vars) {
+  if (obj && obj.vars && checkVars) {
     const val = `vars.${path}`.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
 
     if (val != null) {

package/styleFunctionSx/styleFunctionSx.spec.d.ts

@@ -1 +1 @@
-export {};
+export {};