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

package/modern/Unstable_Grid/createGrid.js

@@ -88,7 +88,7 @@ export default function createGrid(options = {}) {
       rowSpacing: rowSpacingProp = spacingProp,
       columnSpacing: columnSpacingProp = spacingProp,
       unstable_level: level = 0,
-      ...rest
+      ...other
     } = props;
     const size = parseResponsiveProp(sizeProp, theme.breakpoints, val => val !== false);
     const offset = parseResponsiveProp(offsetProp, theme.breakpoints);
@@ -115,7 +115,7 @@ export default function createGrid(options = {}) {
       as: component,
       ownerState: ownerState,
       className: clsx(classes.root, className),
-      ...rest,
+      ...other,
       children: React.Children.map(children, child => {
         if ( /*#__PURE__*/React.isValidElement(child) && isMuiElement(child, ['Grid'])) {
           return /*#__PURE__*/React.cloneElement(child, {

package/modern/createTheme/applyStyles.js

@@ -59,10 +59,16 @@
 export default function applyStyles(key, styles) {
   // @ts-expect-error this is 'any' type
   const theme = this;
-  if (theme.vars && typeof theme.getColorSchemeSelector === 'function') {
-    // If CssVarsProvider is used as a provider,
-    // returns '* :where([data-mui-color-scheme="light|dark"]) &'
-    const selector = theme.getColorSchemeSelector(key).replace(/(\[[^\]]+\])/, '*:where($1)');
+  if (theme.vars) {
+    if (!theme.colorSchemes?.[key] || typeof theme.getColorSchemeSelector !== 'function') {
+      return {};
+    }
+    // If CssVarsProvider is used as a provider, returns '*:where({selector}) &'
+    let selector = theme.getColorSchemeSelector(key);
+    if (selector.includes('data-') || selector.includes('.')) {
+      // '*' is required as a workaround for Emotion issue (https://github.com/emotion-js/emotion/issues/2836)
+      selector = `*:where(${selector.replace(/\s*&$/, '')}) &`;
+    }
     return {
       [selector]: styles
     };

package/modern/cssVars/createCssVarsProvider.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { GlobalStyles } from '@mui/styled-engine';
 import { useTheme as muiUseTheme } from '@mui/private-theming';
 import ThemeProvider from '../ThemeProvider';
-import InitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from '../InitColorSchemeScript/InitColorSchemeScript';
+import InitColorSchemeScript, { DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from '../InitColorSchemeScript/InitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
@@ -18,17 +18,12 @@ export default function createCssVarsProvider(options) {
      * It should also ideally have a vars object created using `prepareCssVars`.
      */
     theme: defaultTheme = {},
-    attribute: defaultAttribute = DEFAULT_ATTRIBUTE,
     modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
     colorSchemeStorageKey: defaultColorSchemeStorageKey = 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?.light] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[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';
@@ -46,14 +41,10 @@ export default function createCssVarsProvider(options) {
       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;
@@ -68,9 +59,11 @@ export default 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[restThemeProp.defaultColorScheme]?.palette?.mode;
 
     // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
     const {
@@ -96,27 +89,9 @@ export default 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.generateThemeVars?.() || restThemeProp.vars;
@@ -153,30 +128,34 @@ export default 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
@@ -237,10 +216,6 @@ export default function createCssVarsProvider(options) {
     });
   }
   process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
-    /**
-     * The body attribute name to attach colorScheme.
-     */
-    attribute: PropTypes.string,
     /**
      * The component tree.
      */
@@ -249,22 +224,10 @@ export default function createCssVarsProvider(options) {
      * The node used to attach the color-scheme attribute
      */
     colorSchemeNode: PropTypes.any,
-    /**
-     * The CSS selector for attaching the generated custom properties
-     */
-    colorSchemeSelector: PropTypes.string,
     /**
      * localStorage key used to store `colorScheme`
      */
     colorSchemeStorageKey: PropTypes.string,
-    /**
-     * The initial color scheme used.
-     */
-    defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    /**
-     * The initial mode used.
-     */
-    defaultMode: PropTypes.string,
     /**
      * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
      */
@@ -297,12 +260,10 @@ 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 defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
+  const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
   const getInitColorSchemeScript = params => InitColorSchemeScript({
-    attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
-    defaultMode: designSystemMode,
     defaultLightColorScheme,
     defaultDarkColorScheme,
     modeStorageKey: defaultModeStorageKey,

package/modern/cssVars/createCssVarsTheme.js

@@ -1,13 +1,21 @@
 import prepareCssVars from './prepareCssVars';
-function createCssVarsTheme(theme) {
+import { createGetColorSchemeSelector } from './getColorSchemeSelector';
+import { DEFAULT_ATTRIBUTE } from '../InitColorSchemeScript/InitColorSchemeScript';
+function createCssVarsTheme({
+  colorSchemeSelector = `[${DEFAULT_ATTRIBUTE}="%s"]`,
+  ...theme
+}) {
   const output = theme;
   const result = prepareCssVars(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 = createGetColorSchemeSelector(colorSchemeSelector);
   return output;
 }
 export default createCssVarsTheme;

package/modern/cssVars/getColorSchemeSelector.js

@@ -0,0 +1,26 @@
+/* eslint-disable import/prefer-default-export */
+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/modern/cssVars/index.js

@@ -3,4 +3,5 @@
 export { default } from './createCssVarsProvider';
 export { default as prepareCssVars } from './prepareCssVars';
 export { default as prepareTypographyVars } from './prepareTypographyVars';
-export { default as createCssVarsTheme } from './createCssVarsTheme';
+export { default as createCssVarsTheme } from './createCssVarsTheme';
+export { createGetColorSchemeSelector } from './getColorSchemeSelector';

package/modern/cssVars/prepareCssVars.js

@@ -1,9 +1,11 @@
 import deepmerge from '@mui/utils/deepmerge';
 import cssVarsParser from './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 = {},
@@ -47,6 +49,32 @@ function prepareCssVars(theme, {
       vars
     };
   }
+  function defaultGetSelector(colorScheme) {
+    let rule = selector;
+    if (selector === 'class') {
+      rule = '.%s';
+    }
+    if (selector === 'data') {
+      rule = '[data-%s]';
+    }
+    if (selector?.startsWith('data-') && !selector.includes('%s')) {
+      // 'data-joy-color-scheme' -> '[data-joy-color-scheme="%s"]'
+      rule = `[${selector}="%s"]`;
+    }
+    if (colorScheme) {
+      if (rule === 'media') {
+        if (theme.defaultColorScheme === colorScheme) {
+          return ':root';
+        }
+        const mode = colorSchemes[colorScheme]?.palette?.mode || colorScheme;
+        return `@media (prefers-color-scheme: ${mode}) { :root`;
+      }
+      if (rule) {
+        return rule.replace('%s', String(colorScheme));
+      }
+    }
+    return ':root';
+  }
   const generateThemeVars = () => {
     let vars = {
       ...rootVars
@@ -61,37 +89,51 @@ 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?.(undefined, {
+    insertStyleSheet(getSelector(undefined, {
       ...rootCss
-    }) || ':root', rootCss);
+    }), rootCss);
     const {
       [colorScheme]: defaultSchemeVal,
-      ...rest
+      ...other
     } = colorSchemesMap;
     if (defaultSchemeVal) {
       // default color scheme has to come before other color schemes
       const {
         css
       } = defaultSchemeVal;
-      insertStyleSheet(getSelector?.(colorScheme, {
+      const cssColorSheme = colorSchemes[colorScheme]?.palette?.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?.(key, {
+      const cssColorSheme = colorSchemes[key]?.palette?.mode;
+      const finalCss = !disableCssColorScheme && cssColorSheme ? {
+        colorScheme: cssColorSheme,
+        ...css
+      } : {
         ...css
-      }) || `[${theme.attribute || 'data-color-scheme'}="${key}"]`, css);
+      };
+      insertStyleSheet(getSelector(key, {
+        ...finalCss
+      }), finalCss);
     });
     return stylesheets;
   };

package/modern/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/node/InitColorSchemeScript/InitColorSchemeScript.js

@@ -18,7 +18,6 @@ const DEFAULT_COLOR_SCHEME_STORAGE_KEY = exports.DEFAULT_COLOR_SCHEME_STORAGE_KE
 const DEFAULT_ATTRIBUTE = exports.DEFAULT_ATTRIBUTE = 'data-color-scheme';
 function InitColorSchemeScript(options) {
   const {
-    defaultMode = 'light',
     defaultLightColorScheme = 'light',
     defaultDarkColorScheme = 'dark',
     modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
@@ -27,6 +26,24 @@ function InitColorSchemeScript(options) {
     colorSchemeNode = 'document.documentElement',
     nonce
   } = options || {};
+  let setter = '';
+  if (attribute.startsWith('.')) {
+    const selector = attribute.substring(1);
+    setter += `${colorSchemeNode}.classList.remove('${selector}'.replace('%s', light), '${selector}'.replace('%s', dark));
+      ${colorSchemeNode}.classList.add('${selector}'.replace('%s', colorScheme));`;
+  }
+  const matches = attribute.match(/\[([^\]]+)\]/); // case [data-color-scheme=%s] or [data-color-scheme]
+  if (matches) {
+    const [attr, value] = matches[1].split('=');
+    if (!value) {
+      setter += `${colorSchemeNode}.removeAttribute('${attr}'.replace('%s', light));
+      ${colorSchemeNode}.removeAttribute('${attr}'.replace('%s', dark));`;
+    }
+    setter += `
+      ${colorSchemeNode}.setAttribute('${attr}'.replace('%s', colorScheme), ${value ? `${value}.replace('%s', colorScheme)` : '""'});`;
+  } else {
+    setter += `${colorSchemeNode}.setAttribute('${attribute}', colorScheme);`;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("script", {
     suppressHydrationWarning: true,
     nonce: typeof window === 'undefined' ? nonce : ''
@@ -35,25 +52,27 @@ function InitColorSchemeScript(options) {
     dangerouslySetInnerHTML: {
       __html: `(function() {
 try {
-  var mode = localStorage.getItem('${modeStorageKey}') || '${defaultMode}';
+  var mode = localStorage.getItem('${modeStorageKey}') || 'system';
   var colorScheme = '';
+  var dark = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
+  var light = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
   if (mode === 'system') {
     // handle system mode
     var mql = window.matchMedia('(prefers-color-scheme: dark)');
     if (mql.matches) {
-      colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
+      colorScheme = dark
     } else {
-      colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
+      colorScheme = light
     }
   }
   if (mode === 'light') {
-    colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
+    colorScheme = light;
   }
   if (mode === 'dark') {
-    colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
+    colorScheme = dark;
   }
   if (colorScheme) {
-    ${colorSchemeNode}.setAttribute('${attribute}', colorScheme);
+    ${setter}
   }
 } catch(e){}})();`
     }

package/node/Unstable_Grid/createGrid.js

@@ -98,7 +98,7 @@ function createGrid(options = {}) {
       rowSpacing: rowSpacingProp = spacingProp,
       columnSpacing: columnSpacingProp = spacingProp,
       unstable_level: level = 0,
-      ...rest
+      ...other
     } = props;
     const size = parseResponsiveProp(sizeProp, theme.breakpoints, val => val !== false);
     const offset = parseResponsiveProp(offsetProp, theme.breakpoints);
@@ -125,7 +125,7 @@ function createGrid(options = {}) {
       as: component,
       ownerState: ownerState,
       className: (0, _clsx.default)(classes.root, className),
-      ...rest,
+      ...other,
       children: React.Children.map(children, child => {
         if ( /*#__PURE__*/React.isValidElement(child) && (0, _isMuiElement.default)(child, ['Grid'])) {
           var _unstable_level;

package/node/createTheme/applyStyles.js

@@ -65,10 +65,17 @@ exports.default = applyStyles;
 function applyStyles(key, styles) {
   // @ts-expect-error this is 'any' type
   const theme = this;
-  if (theme.vars && typeof theme.getColorSchemeSelector === 'function') {
-    // If CssVarsProvider is used as a provider,
-    // returns '* :where([data-mui-color-scheme="light|dark"]) &'
-    const selector = theme.getColorSchemeSelector(key).replace(/(\[[^\]]+\])/, '*:where($1)');
+  if (theme.vars) {
+    var _theme$colorSchemes;
+    if (!((_theme$colorSchemes = theme.colorSchemes) != null && _theme$colorSchemes[key]) || typeof theme.getColorSchemeSelector !== 'function') {
+      return {};
+    }
+    // If CssVarsProvider is used as a provider, returns '*:where({selector}) &'
+    let selector = theme.getColorSchemeSelector(key);
+    if (selector.includes('data-') || selector.includes('.')) {
+      // '*' is required as a workaround for Emotion issue (https://github.com/emotion-js/emotion/issues/2836)
+      selector = `*:where(${selector.replace(/\s*&$/, '')}) &`;
+    }
     return {
       [selector]: styles
     };