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

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,
       ...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(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.1
+ * @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.1",
+  "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.",
@@ -30,10 +30,10 @@
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "6.0.0-beta.1",
+    "@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.1",
-    "@mui/styled-engine": "6.0.0-beta.1"
+    "@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"