@mui/system 5.10.8 → 5.10.9

package/modern/cssVars/createCssVarsProvider.js

@@ -4,7 +4,7 @@ import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 const _excluded = ["colorSchemes", "components", "cssVarPrefix"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { deepmerge } from '@mui/utils';
 import { GlobalStyles } from '@mui/styled-engine';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
@@ -19,10 +19,9 @@ export default function createCssVarsProvider(options) {
     attribute: defaultAttribute = DEFAULT_ATTRIBUTE,
     modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
     colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    defaultMode: desisgnSystemMode = 'light',
+    defaultMode: designSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
-    enableColorScheme: designSystemEnableColorScheme = true,
     shouldSkipGeneratingVar: designSystemShouldSkipGeneratingVar,
     resolveTheme,
     excludeVariablesFromRoot
@@ -50,10 +49,9 @@ export default function createCssVarsProvider(options) {
     modeStorageKey = defaultModeStorageKey,
     colorSchemeStorageKey = defaultColorSchemeStorageKey,
     attribute = defaultAttribute,
-    defaultMode = desisgnSystemMode,
+    defaultMode = designSystemMode,
     defaultColorScheme = designSystemColorScheme,
     disableTransitionOnChange = designSystemTransitionOnChange,
-    enableColorScheme = designSystemEnableColorScheme,
     storageWindow = typeof window === 'undefined' ? undefined : window,
     documentNode = typeof document === 'undefined' ? undefined : document,
     colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
@@ -71,7 +69,8 @@ export default function createCssVarsProvider(options) {
 
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
-    const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
+    const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark; // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
+
     const {
       mode,
       setMode,
@@ -90,36 +89,54 @@ export default function createCssVarsProvider(options) {
       storageWindow
     });
 
-    const resolvedColorScheme = (() => {
+    const calculatedMode = (() => {
+      if (!mode) {
+        // This scope occurs on the server
+        if (defaultMode === 'system') {
+          return designSystemMode;
+        }
+
+        return defaultMode;
+      }
+
+      return mode;
+    })();
+
+    const calculatedColorScheme = (() => {
       if (!colorScheme) {
         // This scope occurs on the server
-        if (defaultMode === 'dark') {
+        if (calculatedMode === 'dark') {
           return defaultDarkColorScheme;
-        } // use light color scheme, if default mode is 'light' | 'auto'
+        } // use light color scheme, if default mode is 'light' | 'system'
 
 
         return defaultLightColorScheme;
       }
 
       return colorScheme;
-    })();
+    })(); // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
+
 
-    let theme = restThemeProp;
     const {
       css: rootCss,
       vars: rootVars,
       parsedTheme
-    } = cssVarsParser(theme, {
+    } = cssVarsParser(restThemeProp, {
       prefix: cssVarPrefix,
       shouldSkipGeneratingVar
-    });
-    theme = _extends({}, parsedTheme, {
+    }); // 3. Start composing the theme object
+
+    let theme = _extends({}, parsedTheme, {
       components,
       colorSchemes,
       cssVarPrefix,
       vars: rootVars,
       getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
-    });
+    }); // 4. Create color CSS variables and store them in objects (to be generated in stylesheets in the final step)
+    //    The default color scheme stylesheet is constructed to have the least CSS specificity.
+    //    The other color schemes uses selector, default as data attribute, to increase the CSS specificity so that they can override the default color scheme stylesheet.
+
+
     const defaultColorSchemeStyleSheet = {};
     const otherColorSchemesStyleSheet = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
@@ -133,13 +150,12 @@ export default function createCssVarsProvider(options) {
       });
       theme.vars = deepmerge(theme.vars, vars);
 
-      if (key === resolvedColorScheme) {
+      if (key === calculatedColorScheme) {
+        // 4.1 Merge the selected color scheme to the theme
         theme = _extends({}, theme, parsedScheme);
 
         if (theme.palette) {
-          // assign runtime mode & colorScheme
-          theme.palette.mode = mode;
-          theme.palette.colorScheme = resolvedColorScheme;
+          theme.palette.colorScheme = key;
         }
       }
 
@@ -169,35 +185,21 @@ export default function createCssVarsProvider(options) {
       } else {
         otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
       }
-    });
+    }); // 5. Declaring effects
+    // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
+
     React.useEffect(() => {
       if (colorScheme && colorSchemeNode) {
         // attaches attribute to <html> because the css variables are attached to :root (html)
         colorSchemeNode.setAttribute(attribute, colorScheme);
       }
-    }, [colorScheme, attribute, colorSchemeNode]);
-    useEnhancedEffect(() => {
-      if (!mode || !enableColorScheme || !colorSchemeNode) {
-        return undefined;
-      }
-
-      const priorColorScheme = colorSchemeNode.style.getPropertyValue('color-scheme'); // `color-scheme` tells browser to render built-in elements according to its value: `light` or `dark`
-
-      if (mode === 'system') {
-        colorSchemeNode.style.setProperty('color-scheme', systemMode);
-      } else {
-        colorSchemeNode.style.setProperty('color-scheme', mode);
-      }
+    }, [colorScheme, attribute, colorSchemeNode]); // 5.2 Remove the CSS transition when color scheme changes to create instant experience.
+    // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
 
-      return () => {
-        colorSchemeNode.style.setProperty('color-scheme', priorColorScheme);
-      };
-    }, [mode, systemMode, enableColorScheme, colorSchemeNode]);
     React.useEffect(() => {
       let timer;
 
       if (disableTransitionOnChange && hasMounted.current && documentNode) {
-        // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
         const css = documentNode.createElement('style');
         css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION));
         documentNode.head.appendChild(css); // Force browser repaint
@@ -222,6 +224,7 @@ export default function createCssVarsProvider(options) {
     return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
       value: {
         mode,
+        systemMode,
         setMode,
         lightColorScheme,
         darkColorScheme,
@@ -290,11 +293,6 @@ export default function createCssVarsProvider(options) {
      */
     documentNode: PropTypes.any,
 
-    /**
-     * 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.
      */
@@ -316,12 +314,16 @@ export default function createCssVarsProvider(options) {
      */
     theme: PropTypes.object
   } : void 0;
+  const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
+  const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
 
   const getInitColorSchemeScript = params => systemGetInitColorSchemeScript(_extends({
     attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
-    modeStorageKey: defaultModeStorageKey,
-    enableColorScheme: designSystemEnableColorScheme
+    defaultMode: designSystemMode,
+    defaultLightColorScheme,
+    defaultDarkColorScheme,
+    modeStorageKey: defaultModeStorageKey
   }, params));
 
   return {

package/modern/cssVars/getInitColorSchemeScript.js

@@ -5,7 +5,6 @@ export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
 export const DEFAULT_ATTRIBUTE = 'data-color-scheme';
 export default function getInitColorSchemeScript(options) {
   const {
-    enableColorScheme = true,
     defaultMode = 'light',
     defaultLightColorScheme = 'light',
     defaultDarkColorScheme = 'dark',
@@ -41,9 +40,6 @@ export default function getInitColorSchemeScript(options) {
         if (colorScheme) {
           ${colorSchemeNode}.setAttribute('${attribute}', colorScheme);
         }
-        if (${enableColorScheme} && !!cssColorScheme) {
-          ${colorSchemeNode}.style.setProperty('color-scheme', cssColorScheme);
-        }
       } catch (e) {} })();`
     }
   });

package/modern/index.js

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

package/package.json

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

package/styleFunctionSx/styleFunctionSx.spec.d.ts

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