@mui/system 6.0.0-beta.0 → 6.0.0-beta.3

package/node/cssVars/createCssVarsProvider.js

@@ -28,17 +28,12 @@ function createCssVarsProvider(options) {
      * It should also ideally have a vars object created using `prepareCssVars`.
      */
     theme: defaultTheme = {},
-    attribute: defaultAttribute = _InitColorSchemeScript.DEFAULT_ATTRIBUTE,
     modeStorageKey: defaultModeStorageKey = _InitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
     colorSchemeStorageKey: defaultColorSchemeStorageKey = _InitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    defaultMode: designSystemMode = 'light',
-    defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
+    defaultColorScheme,
     resolveTheme
   } = options;
-  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]) {
-    console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
-  }
   const ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
   if (process.env.NODE_ENV !== 'production') {
     ColorSchemeContext.displayName = 'ColorSchemeContext';
@@ -51,20 +46,16 @@ function createCssVarsProvider(options) {
     return value;
   };
   function CssVarsProvider(props) {
-    var _restThemeProp$genera, _theme$generateStyleS;
+    var _colorSchemes$restThe, _restThemeProp$genera, _theme$generateStyleS;
     const {
       children,
       theme: themeProp = defaultTheme,
       modeStorageKey = defaultModeStorageKey,
       colorSchemeStorageKey = defaultColorSchemeStorageKey,
-      attribute = defaultAttribute,
-      defaultMode = designSystemMode,
-      defaultColorScheme = designSystemColorScheme,
       disableTransitionOnChange = designSystemTransitionOnChange,
       storageWindow = typeof window === 'undefined' ? undefined : window,
       documentNode = typeof document === 'undefined' ? undefined : document,
       colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
-      colorSchemeSelector = ':root',
       disableNestedContext = false,
       disableStyleSheetGeneration = false
     } = props;
@@ -79,9 +70,11 @@ function createCssVarsProvider(options) {
       cssVarPrefix,
       ...restThemeProp
     } = scopedTheme || themeProp;
-    const allColorSchemes = Object.keys(colorSchemes);
+    const joinedColorSchemes = Object.keys(colorSchemes).filter(k => !!colorSchemes[k]).join(',');
+    const allColorSchemes = React.useMemo(() => joinedColorSchemes.split(','), [joinedColorSchemes]);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
+    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? 'system' : (_colorSchemes$restThe = colorSchemes[restThemeProp.defaultColorScheme]) == null || (_colorSchemes$restThe = _colorSchemes$restThe.palette) == null ? void 0 : _colorSchemes$restThe.mode;
 
     // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
     const {
@@ -107,27 +100,9 @@ function createCssVarsProvider(options) {
       mode = ctx.mode;
       colorScheme = ctx.colorScheme;
     }
-    const calculatedMode = (() => {
-      if (mode) {
-        return mode;
-      }
-      // This scope occurs on the server
-      if (defaultMode === 'system') {
-        return designSystemMode;
-      }
-      return defaultMode;
-    })();
-    const calculatedColorScheme = (() => {
-      if (!colorScheme) {
-        // This scope occurs on the server
-        if (calculatedMode === 'dark') {
-          return defaultDarkColorScheme;
-        }
-        // use light color scheme, if default mode is 'light' | 'system'
-        return defaultLightColorScheme;
-      }
-      return colorScheme;
-    })();
+
+    // `colorScheme` is undefined on the server
+    const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
 
     // 2. get the `vars` object that refers to the CSS custom properties
     const themeVars = ((_restThemeProp$genera = restThemeProp.generateThemeVars) == null ? void 0 : _restThemeProp$genera.call(restThemeProp)) || restThemeProp.vars;
@@ -164,30 +139,34 @@ function createCssVarsProvider(options) {
         }
       }
     });
-    const resolvedDefaultColorScheme = (() => {
-      if (typeof defaultColorScheme === 'string') {
-        return defaultColorScheme;
-      }
-      if (defaultMode === 'dark') {
-        return defaultColorScheme.dark;
-      }
-      return defaultColorScheme.light;
-    })();
-    themeProp.defaultColorScheme = resolvedDefaultColorScheme;
-    themeProp.colorSchemeSelector = colorSchemeSelector;
-    themeProp.attribute = attribute;
-    if (!theme.getColorSchemeSelector) {
-      theme.getColorSchemeSelector = targetColorScheme => `[${attribute}="${targetColorScheme}"] &`;
-    }
 
     // 5. Declaring effects
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
+    const colorSchemeSelector = restThemeProp.colorSchemeSelector;
     React.useEffect(() => {
-      if (colorScheme && colorSchemeNode) {
-        // attaches attribute to <html> because the css variables are attached to :root (html)
-        colorSchemeNode.setAttribute(attribute, colorScheme);
+      if (colorScheme && colorSchemeNode && colorSchemeSelector && colorSchemeSelector !== 'media') {
+        const selector = colorSchemeSelector.replace('%s', colorScheme);
+        if (selector.startsWith('.')) {
+          colorSchemeNode.classList.remove(...allColorSchemes.map(scheme => colorSchemeSelector.substring(1).replace('%s', scheme)));
+          colorSchemeNode.classList.add(selector.substring(1));
+        } else {
+          const matches = selector.match(/\[([^\]]+)\]/);
+          if (matches) {
+            const [attr, value] = matches[1].split('=');
+            if (!value) {
+              // for attributes like `data-theme-dark`, `data-theme-light`
+              // remove all the existing data attributes before setting the new one
+              allColorSchemes.forEach(scheme => {
+                colorSchemeNode.removeAttribute(attr.replace(colorScheme, scheme));
+              });
+            }
+            colorSchemeNode.setAttribute(attr, value ? value.replace(/"|'/g, '') : '');
+          } else {
+            colorSchemeNode.setAttribute(selector, colorScheme);
+          }
+        }
       }
-    }, [colorScheme, attribute, colorSchemeNode]);
+    }, [colorScheme, colorSchemeSelector, colorSchemeNode, allColorSchemes]);
 
     // 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
@@ -248,10 +227,6 @@ function createCssVarsProvider(options) {
     });
   }
   process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
-    /**
-     * The body attribute name to attach colorScheme.
-     */
-    attribute: _propTypes.default.string,
     /**
      * The component tree.
      */
@@ -260,22 +235,10 @@ function createCssVarsProvider(options) {
      * The node used to attach the color-scheme attribute
      */
     colorSchemeNode: _propTypes.default.any,
-    /**
-     * The CSS selector for attaching the generated custom properties
-     */
-    colorSchemeSelector: _propTypes.default.string,
     /**
      * localStorage key used to store `colorScheme`
      */
     colorSchemeStorageKey: _propTypes.default.string,
-    /**
-     * The initial color scheme used.
-     */
-    defaultColorScheme: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
-    /**
-     * The initial mode used.
-     */
-    defaultMode: _propTypes.default.string,
     /**
      * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
      */
@@ -308,12 +271,10 @@ function createCssVarsProvider(options) {
      */
     theme: _propTypes.default.object
   } : void 0;
-  const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
-  const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
+  const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
+  const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
   const getInitColorSchemeScript = params => (0, _InitColorSchemeScript.default)({
-    attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
-    defaultMode: designSystemMode,
     defaultLightColorScheme,
     defaultDarkColorScheme,
     modeStorageKey: defaultModeStorageKey,

package/node/cssVars/createCssVarsTheme.js

@@ -6,15 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _prepareCssVars = _interopRequireDefault(require("./prepareCssVars"));
-function createCssVarsTheme(theme) {
+var _getColorSchemeSelector = require("./getColorSchemeSelector");
+var _InitColorSchemeScript = require("../InitColorSchemeScript/InitColorSchemeScript");
+function createCssVarsTheme({
+  colorSchemeSelector = `[${_InitColorSchemeScript.DEFAULT_ATTRIBUTE}="%s"]`,
+  ...theme
+}) {
   const output = theme;
   const result = (0, _prepareCssVars.default)(output, {
     ...theme,
-    prefix: theme.cssVarPrefix
+    prefix: theme.cssVarPrefix,
+    colorSchemeSelector
   });
   output.vars = result.vars;
   output.generateThemeVars = result.generateThemeVars;
   output.generateStyleSheets = result.generateStyleSheets;
+  output.colorSchemeSelector = colorSchemeSelector;
+  output.getColorSchemeSelector = (0, _getColorSchemeSelector.createGetColorSchemeSelector)(colorSchemeSelector);
   return output;
 }
 var _default = exports.default = createCssVarsTheme;

package/node/cssVars/getColorSchemeSelector.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createGetColorSchemeSelector = createGetColorSchemeSelector;
+/* eslint-disable import/prefer-default-export */
+function createGetColorSchemeSelector(selector) {
+  return function getColorSchemeSelector(colorScheme) {
+    if (selector === 'media') {
+      if (process.env.NODE_ENV !== 'production') {
+        if (colorScheme !== 'light' && colorScheme !== 'dark') {
+          console.error(`MUI: @media (prefers-color-scheme) supports only 'light' or 'dark', but receive '${colorScheme}'.`);
+        }
+      }
+      return `@media (prefers-color-scheme: ${colorScheme})`;
+    }
+    if (selector) {
+      if (selector.startsWith('data-') && !selector.includes('%s')) {
+        return `[${selector}="${colorScheme}"] &`;
+      }
+      if (selector === 'class') {
+        return `.${colorScheme} &`;
+      }
+      if (selector === 'data') {
+        return `[data-${colorScheme}] &`;
+      }
+      return `${selector.replace('%s', colorScheme)} &`;
+    }
+    return '&';
+  };
+}

package/node/cssVars/index.js

@@ -11,6 +11,12 @@ Object.defineProperty(exports, "createCssVarsTheme", {
     return _createCssVarsTheme.default;
   }
 });
+Object.defineProperty(exports, "createGetColorSchemeSelector", {
+  enumerable: true,
+  get: function () {
+    return _getColorSchemeSelector.createGetColorSchemeSelector;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
@@ -32,4 +38,5 @@ Object.defineProperty(exports, "prepareTypographyVars", {
 var _createCssVarsProvider = _interopRequireDefault(require("./createCssVarsProvider"));
 var _prepareCssVars = _interopRequireDefault(require("./prepareCssVars"));
 var _prepareTypographyVars = _interopRequireDefault(require("./prepareTypographyVars"));
-var _createCssVarsTheme = _interopRequireDefault(require("./createCssVarsTheme"));
+var _createCssVarsTheme = _interopRequireDefault(require("./createCssVarsTheme"));
+var _getColorSchemeSelector = require("./getColorSchemeSelector");

package/node/cssVars/prepareCssVars.js

@@ -7,10 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
 var _cssVarsParser = _interopRequireDefault(require("./cssVarsParser"));
-function prepareCssVars(theme, {
-  getSelector,
-  ...parserConfig
-} = {}) {
+function prepareCssVars(theme, parserConfig = {}) {
+  const {
+    getSelector = defaultGetSelector,
+    disableCssColorScheme,
+    colorSchemeSelector: selector
+  } = parserConfig;
   // @ts-ignore - ignore components do not exist
   const {
     colorSchemes = {},
@@ -54,6 +56,33 @@ function prepareCssVars(theme, {
       vars
     };
   }
+  function defaultGetSelector(colorScheme) {
+    let rule = selector;
+    if (selector === 'class') {
+      rule = '.%s';
+    }
+    if (selector === 'data') {
+      rule = '[data-%s]';
+    }
+    if (selector != null && selector.startsWith('data-') && !selector.includes('%s')) {
+      // 'data-joy-color-scheme' -> '[data-joy-color-scheme="%s"]'
+      rule = `[${selector}="%s"]`;
+    }
+    if (colorScheme) {
+      if (rule === 'media') {
+        var _colorSchemes;
+        if (theme.defaultColorScheme === colorScheme) {
+          return ':root';
+        }
+        const mode = ((_colorSchemes = colorSchemes[colorScheme]) == null || (_colorSchemes = _colorSchemes.palette) == null ? void 0 : _colorSchemes.mode) || colorScheme;
+        return `@media (prefers-color-scheme: ${mode}) { :root`;
+      }
+      if (rule) {
+        return rule.replace('%s', String(colorScheme));
+      }
+    }
+    return ':root';
+  }
   const generateThemeVars = () => {
     let vars = {
       ...rootVars
@@ -68,37 +97,53 @@ function prepareCssVars(theme, {
   const generateStyleSheets = () => {
     const stylesheets = [];
     const colorScheme = theme.defaultColorScheme || 'light';
-    function insertStyleSheet(selector, css) {
+    function insertStyleSheet(key, css) {
       if (Object.keys(css).length) {
-        stylesheets.push(typeof selector === 'string' ? {
-          [selector]: {
+        stylesheets.push(typeof key === 'string' ? {
+          [key]: {
             ...css
           }
-        } : selector);
+        } : key);
       }
     }
-    insertStyleSheet((getSelector == null ? void 0 : getSelector(undefined, {
+    insertStyleSheet(getSelector(undefined, {
       ...rootCss
-    })) || ':root', rootCss);
+    }), rootCss);
     const {
       [colorScheme]: defaultSchemeVal,
-      ...rest
+      ...other
     } = colorSchemesMap;
     if (defaultSchemeVal) {
+      var _colorSchemes$colorSc;
       // default color scheme has to come before other color schemes
       const {
         css
       } = defaultSchemeVal;
-      insertStyleSheet((getSelector == null ? void 0 : getSelector(colorScheme, {
+      const cssColorSheme = (_colorSchemes$colorSc = colorSchemes[colorScheme]) == null || (_colorSchemes$colorSc = _colorSchemes$colorSc.palette) == null ? void 0 : _colorSchemes$colorSc.mode;
+      const finalCss = !disableCssColorScheme && cssColorSheme ? {
+        colorScheme: cssColorSheme,
         ...css
-      })) || `[${theme.attribute || 'data-color-scheme'}="${colorScheme}"]`, css);
+      } : {
+        ...css
+      };
+      insertStyleSheet(getSelector(colorScheme, {
+        ...finalCss
+      }), finalCss);
     }
-    Object.entries(rest).forEach(([key, {
+    Object.entries(other).forEach(([key, {
       css
     }]) => {
-      insertStyleSheet((getSelector == null ? void 0 : getSelector(key, {
+      var _colorSchemes$key;
+      const cssColorSheme = (_colorSchemes$key = colorSchemes[key]) == null || (_colorSchemes$key = _colorSchemes$key.palette) == null ? void 0 : _colorSchemes$key.mode;
+      const finalCss = !disableCssColorScheme && cssColorSheme ? {
+        colorScheme: cssColorSheme,
+        ...css
+      } : {
         ...css
-      })) || `[${theme.attribute || 'data-color-scheme'}="${key}"]`, css);
+      };
+      insertStyleSheet(getSelector(key, {
+        ...finalCss
+      }), finalCss);
     });
     return stylesheets;
   };

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.0.0-beta.0
+ * @mui/system v6.0.0-beta.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "6.0.0-beta.0",
+  "version": "6.0.0-beta.3",
   "private": false,
   "author": "MUI Team",
   "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
@@ -26,14 +26,14 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.7",
+    "@babel/runtime": "^7.24.8",
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "6.0.0-beta.0",
-    "@mui/utils": "6.0.0-beta.0",
-    "@mui/styled-engine": "6.0.0-beta.0",
-    "@mui/types": "^7.2.14"
+    "@mui/private-theming": "6.0.0-beta.3",
+    "@mui/styled-engine": "6.0.0-beta.3",
+    "@mui/types": "^7.2.14",
+    "@mui/utils": "6.0.0-beta.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -58,7 +58,7 @@
     "directory": "build"
   },
   "engines": {
-    "node": ">=12.0.0"
+    "node": ">=14.0.0"
   },
   "module": "./index.js",
   "types": "./index.d.ts"