@mui/material 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/styles/createTheme.d.ts

@@ -1,62 +1,14 @@
-import {
-  ThemeOptions as SystemThemeOptions,
-  Theme as SystemTheme,
-  SxProps,
-  CSSObject,
-  SxConfig,
-} from '@mui/system';
-import { Mixins, MixinsOptions } from './createMixins';
-import { Palette, PaletteOptions } from './createPalette';
-import { Typography, TypographyOptions } from './createTypography';
-import { Shadows } from './shadows';
-import { Transitions, TransitionsOptions } from './createTransitions';
-import { ZIndex, ZIndexOptions } from './zIndex';
-import { Components } from './components';
-
-export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'> {
-  mixins?: MixinsOptions;
-  components?: Components<Omit<Theme, 'components'>>;
-  palette?: PaletteOptions;
-  shadows?: Shadows;
-  transitions?: TransitionsOptions;
-  typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);
-  zIndex?: ZIndexOptions;
-  unstable_strictMode?: boolean;
-  unstable_sxConfig?: SxConfig;
-}
-
-interface BaseTheme extends SystemTheme {
-  mixins: Mixins;
-  palette: Palette;
-  shadows: Shadows;
-  transitions: Transitions;
-  typography: Typography;
-  zIndex: ZIndex;
-  unstable_strictMode?: boolean;
-}
-
-// shut off automatic exporting for the `BaseTheme` above
-export {};
-
-/**
- * Our [TypeScript guide on theme customization](https://mui.com/material-ui/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties.
- */
-export interface Theme extends BaseTheme {
-  components?: Components<BaseTheme>;
-  unstable_sx: (props: SxProps<Theme>) => CSSObject;
-  unstable_sxConfig: SxConfig;
-}
-
-/**
- * @deprecated
- * Use `import { createTheme } from '@mui/material/styles'` instead.
- */
-export function createMuiTheme(options?: ThemeOptions, ...args: object[]): Theme;
-
+import { CssVarsThemeOptions } from './createThemeWithVars';
+import { Theme, ThemeOptions } from './createThemeNoVars';
+export { createMuiTheme } from './createThemeNoVars';
+export type { ThemeOptions, Theme, CssThemeVariables } from './createThemeNoVars';
 /**
  * Generate a theme base on the options received.
  * @param options Takes an incomplete theme object and adds the missing parts.
  * @param args Deep merge the arguments with the about to be returned theme.
  * @returns A complete, ready-to-use theme object.
  */
-export default function createTheme(options?: ThemeOptions, ...args: object[]): Theme;
+export default function createTheme(options?: Omit<ThemeOptions, 'components'> & Pick<CssVarsThemeOptions, 'defaultColorScheme' | 'colorSchemes' | 'components'> & {
+    cssVariables?: boolean | Pick<CssVarsThemeOptions, 'colorSchemeSelector' | 'disableCssColorScheme' | 'cssVarPrefix' | 'shouldSkipGeneratingVar'>;
+}, // cast type to skip module augmentation test
+...args: object[]): Theme;

package/styles/createTheme.js

@@ -1,89 +1,77 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
-const _excluded = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
-import deepmerge from '@mui/utils/deepmerge';
-import styleFunctionSx, { unstable_defaultSxConfig as defaultSxConfig } from '@mui/system/styleFunctionSx';
-import systemCreateTheme from '@mui/system/createTheme';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import createMixins from './createMixins';
-import createPalette from './createPalette';
-import createTypography from './createTypography';
-import shadows from './shadows';
-import createTransitions from './createTransitions';
-import zIndex from './zIndex';
-function createTheme(options = {}, ...args) {
-  const {
-      mixins: mixinsInput = {},
-      palette: paletteInput = {},
-      transitions: transitionsInput = {},
-      typography: typographyInput = {}
-    } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded);
-  if (options.vars) {
-    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
-Please use another name.` : _formatMuiErrorMessage(18));
+import createPalette from "./createPalette.js";
+import createThemeWithVars from "./createThemeWithVars.js";
+import createThemeNoVars from "./createThemeNoVars.js";
+export { createMuiTheme } from "./createThemeNoVars.js";
+// eslint-disable-next-line consistent-return
+function attachColorScheme(theme, scheme, colorScheme) {
+  if (!theme.colorSchemes) {
+    return undefined;
   }
-  const palette = createPalette(paletteInput);
-  const systemTheme = systemCreateTheme(options);
-  let muiTheme = deepmerge(systemTheme, {
-    mixins: createMixins(systemTheme.breakpoints, mixinsInput),
-    palette,
-    // Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
-    shadows: shadows.slice(),
-    typography: createTypography(palette, typographyInput),
-    transitions: createTransitions(transitionsInput),
-    zIndex: _extends({}, zIndex)
-  });
-  muiTheme = deepmerge(muiTheme, other);
-  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-  if (process.env.NODE_ENV !== 'production') {
-    // TODO v6: Refactor to use globalStateClassesMapping from @mui/utils once `readOnly` state class is used in Rating component.
-    const stateClasses = ['active', 'checked', 'completed', 'disabled', 'error', 'expanded', 'focused', 'focusVisible', 'required', 'selected'];
-    const traverse = (node, component) => {
-      let key;
-
-      // eslint-disable-next-line guard-for-in, no-restricted-syntax
-      for (key in node) {
-        const child = node[key];
-        if (stateClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
-          if (process.env.NODE_ENV !== 'production') {
-            const stateClass = generateUtilityClass('', key);
-            console.error([`MUI: The \`${component}\` component increases ` + `the CSS specificity of the \`${key}\` internal state.`, 'You can not override it like this: ', JSON.stringify(node, null, 2), '', `Instead, you need to use the '&.${stateClass}' syntax:`, JSON.stringify({
-              root: {
-                [`&.${stateClass}`]: child
-              }
-            }, null, 2), '', 'https://mui.com/r/state-classes-guide'].join('\n'));
-          }
-          // Remove the style to prevent global conflicts.
-          node[key] = {};
-        }
-      }
+  if (colorScheme) {
+    theme.colorSchemes[scheme] = {
+      ...(colorScheme !== true && colorScheme),
+      palette: createPalette({
+        ...(colorScheme === true ? {} : colorScheme),
+        mode: scheme
+      }) // cast type to skip module augmentation test
     };
-    Object.keys(muiTheme.components).forEach(component => {
-      const styleOverrides = muiTheme.components[component].styleOverrides;
-      if (styleOverrides && component.indexOf('Mui') === 0) {
-        traverse(styleOverrides, component);
-      }
-    });
   }
-  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other?.unstable_sxConfig);
-  muiTheme.unstable_sx = function sx(props) {
-    return styleFunctionSx({
-      sx: props,
-      theme: this
-    });
-  };
-  return muiTheme;
 }
-let warnedOnce = false;
-export function createMuiTheme(...args) {
-  if (process.env.NODE_ENV !== 'production') {
-    if (!warnedOnce) {
-      warnedOnce = true;
-      console.error(['MUI: the createMuiTheme function was renamed to createTheme.', '', "You should use `import { createTheme } from '@mui/material/styles'`"].join('\n'));
+
+/**
+ * Generate a theme base on the options received.
+ * @param options Takes an incomplete theme object and adds the missing parts.
+ * @param args Deep merge the arguments with the about to be returned theme.
+ * @returns A complete, ready-to-use theme object.
+ */
+export default function createTheme(options = {},
+// cast type to skip module augmentation test
+...args) {
+  const {
+    palette,
+    cssVariables = false,
+    colorSchemes: initialColorSchemes = !palette ? {
+      light: true
+    } : undefined,
+    defaultColorScheme: initialDefaultColorScheme = palette?.mode,
+    ...rest
+  } = options;
+  const defaultColorSchemeInput = initialDefaultColorScheme || 'light';
+  const defaultScheme = initialColorSchemes?.[defaultColorSchemeInput];
+  const colorSchemesInput = {
+    ...initialColorSchemes,
+    ...(palette ? {
+      [defaultColorSchemeInput]: {
+        ...(typeof defaultScheme !== 'boolean' && defaultScheme),
+        palette
+      }
+    } : undefined)
+  };
+  if (cssVariables === false) {
+    const theme = createThemeNoVars(options, ...args);
+    if (!('colorSchemes' in options)) {
+      return theme;
     }
+    theme.defaultColorScheme = defaultColorSchemeInput;
+    theme.colorSchemes = colorSchemesInput;
+    if (theme.palette.mode === 'light') {
+      theme.colorSchemes.light = {
+        palette: theme.palette
+      };
+      attachColorScheme(theme, 'dark', colorSchemesInput.dark);
+    }
+    if (theme.palette.mode === 'dark') {
+      theme.colorSchemes.dark = {
+        palette: theme.palette
+      };
+      attachColorScheme(theme, 'light', colorSchemesInput.light);
+    }
+    return theme;
   }
-  return createTheme(...args);
-}
-export default createTheme;
+  return createThemeWithVars({
+    ...rest,
+    colorSchemes: colorSchemesInput,
+    defaultColorScheme: defaultColorSchemeInput,
+    ...(typeof cssVariables !== 'boolean' && cssVariables)
+  }, ...args);
+}

package/styles/createThemeNoVars.d.ts

@@ -0,0 +1,100 @@
+import {
+  ThemeOptions as SystemThemeOptions,
+  Theme as SystemTheme,
+  SxProps,
+  CSSObject,
+  SxConfig,
+} from '@mui/system';
+import { Mixins, MixinsOptions } from './createMixins';
+import { Palette, PaletteOptions } from './createPalette';
+import { Typography, TypographyOptions } from './createTypography';
+import { Shadows } from './shadows';
+import { Transitions, TransitionsOptions } from './createTransitions';
+import { ZIndex, ZIndexOptions } from './zIndex';
+import { Components } from './components';
+import { CssVarsTheme, CssVarsPalette, ColorSystemOptions } from './createThemeWithVars';
+
+/**
+ * To disable custom properties, use module augmentation
+ *
+ * @example
+ * declare module '@mui/material/styles' {
+ *   interface CssThemeVariables {
+ *     enabled: true;
+ *   }
+ * }
+ */
+export interface CssThemeVariables {}
+
+type CssVarsOptions = CssThemeVariables extends {
+  enabled: true;
+}
+  ? ColorSystemOptions
+  : {};
+
+export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'>, CssVarsOptions {
+  mixins?: MixinsOptions;
+  components?: Components<Omit<Theme, 'components'>>;
+  palette?: PaletteOptions;
+  shadows?: Shadows;
+  transitions?: TransitionsOptions;
+  typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);
+  zIndex?: ZIndexOptions;
+  unstable_strictMode?: boolean;
+  unstable_sxConfig?: SxConfig;
+}
+
+interface BaseTheme extends SystemTheme {
+  mixins: Mixins;
+  palette: Palette & (CssThemeVariables extends { enabled: true } ? CssVarsPalette : {});
+  shadows: Shadows;
+  transitions: Transitions;
+  typography: Typography;
+  zIndex: ZIndex;
+  unstable_strictMode?: boolean;
+}
+
+// shut off automatic exporting for the `BaseTheme` above
+export {};
+
+type CssVarsProperties = CssThemeVariables extends { enabled: true }
+  ? Pick<
+      CssVarsTheme,
+      | 'applyStyles'
+      | 'colorSchemes'
+      | 'colorSchemeSelector'
+      | 'cssVarPrefix'
+      | 'defaultColorScheme'
+      | 'getCssVar'
+      | 'getColorSchemeSelector'
+      | 'generateThemeVars'
+      | 'generateStyleSheets'
+      | 'generateSpacing'
+      | 'shouldSkipGeneratingVar'
+      | 'vars'
+    >
+  : {};
+
+/**
+ * Our [TypeScript guide on theme customization](https://mui.com/material-ui/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties.
+ */
+export interface Theme extends BaseTheme, CssVarsProperties {
+  cssVariables?: false;
+  components?: Components<BaseTheme>;
+  unstable_sx: (props: SxProps<Theme>) => CSSObject;
+  unstable_sxConfig: SxConfig;
+}
+
+/**
+ * @deprecated
+ * Use `import { createTheme } from '@mui/material/styles'` instead.
+ */
+export function createMuiTheme(options?: ThemeOptions, ...args: object[]): Theme;
+
+/**
+ * Generate a theme base on the options received.
+ * @param options Takes an incomplete theme object and adds the missing parts.
+ * @param args Deep merge the arguments with the about to be returned theme.
+ * @returns A complete, ready-to-use theme object.
+ */
+export default function createThemeNoVars(options?: ThemeOptions, ...args: object[]): Theme;

package/styles/createThemeNoVars.js

@@ -0,0 +1,94 @@
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
+import deepmerge from '@mui/utils/deepmerge';
+import styleFunctionSx, { unstable_defaultSxConfig as defaultSxConfig } from '@mui/system/styleFunctionSx';
+import systemCreateTheme from '@mui/system/createTheme';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import createMixins from "./createMixins.js";
+import createPalette from "./createPalette.js";
+import createTypography from "./createTypography.js";
+import shadows from "./shadows.js";
+import createTransitions from "./createTransitions.js";
+import zIndex from "./zIndex.js";
+function createThemeNoVars(options = {}, ...args) {
+  const {
+    breakpoints: breakpointsInput,
+    mixins: mixinsInput = {},
+    spacing: spacingInput,
+    palette: paletteInput = {},
+    transitions: transitionsInput = {},
+    typography: typographyInput = {},
+    shape: shapeInput,
+    ...other
+  } = options;
+  if (options.vars) {
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
+Please use another name.` : _formatMuiErrorMessage(20));
+  }
+  const palette = createPalette(paletteInput);
+  const systemTheme = systemCreateTheme(options);
+  let muiTheme = deepmerge(systemTheme, {
+    mixins: createMixins(systemTheme.breakpoints, mixinsInput),
+    palette,
+    // Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
+    shadows: shadows.slice(),
+    typography: createTypography(palette, typographyInput),
+    transitions: createTransitions(transitionsInput),
+    zIndex: {
+      ...zIndex
+    }
+  });
+  muiTheme = deepmerge(muiTheme, other);
+  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
+  if (process.env.NODE_ENV !== 'production') {
+    // TODO v6: Refactor to use globalStateClassesMapping from @mui/utils once `readOnly` state class is used in Rating component.
+    const stateClasses = ['active', 'checked', 'completed', 'disabled', 'error', 'expanded', 'focused', 'focusVisible', 'required', 'selected'];
+    const traverse = (node, component) => {
+      let key;
+
+      // eslint-disable-next-line guard-for-in
+      for (key in node) {
+        const child = node[key];
+        if (stateClasses.includes(key) && Object.keys(child).length > 0) {
+          if (process.env.NODE_ENV !== 'production') {
+            const stateClass = generateUtilityClass('', key);
+            console.error([`MUI: The \`${component}\` component increases ` + `the CSS specificity of the \`${key}\` internal state.`, 'You can not override it like this: ', JSON.stringify(node, null, 2), '', `Instead, you need to use the '&.${stateClass}' syntax:`, JSON.stringify({
+              root: {
+                [`&.${stateClass}`]: child
+              }
+            }, null, 2), '', 'https://mui.com/r/state-classes-guide'].join('\n'));
+          }
+          // Remove the style to prevent global conflicts.
+          node[key] = {};
+        }
+      }
+    };
+    Object.keys(muiTheme.components).forEach(component => {
+      const styleOverrides = muiTheme.components[component].styleOverrides;
+      if (styleOverrides && component.startsWith('Mui')) {
+        traverse(styleOverrides, component);
+      }
+    });
+  }
+  muiTheme.unstable_sxConfig = {
+    ...defaultSxConfig,
+    ...other?.unstable_sxConfig
+  };
+  muiTheme.unstable_sx = function sx(props) {
+    return styleFunctionSx({
+      sx: props,
+      theme: this
+    });
+  };
+  return muiTheme;
+}
+let warnedOnce = false;
+export function createMuiTheme(...args) {
+  if (process.env.NODE_ENV !== 'production') {
+    if (!warnedOnce) {
+      warnedOnce = true;
+      console.error(['MUI: the createMuiTheme function was renamed to createTheme.', '', "You should use `import { createTheme } from '@mui/material/styles'`"].join('\n'));
+    }
+  }
+  return createThemeNoVars(...args);
+}
+export default createThemeNoVars;

package/styles/{experimental_extendTheme.d.ts → createThemeWithVars.d.ts}

@@ -1,8 +1,7 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 import { OverridableStringUnion } from '@mui/types';
 import { SxConfig, SxProps, CSSObject, ApplyStyles } from '@mui/system';
 import { ExtractTypographyTokens } from '@mui/system/cssVars';
-import { ThemeOptions, Theme } from './createTheme';
+import { ThemeOptions, Theme } from './createThemeNoVars';
 import { Palette, PaletteOptions } from './createPalette';
 import { Shadows } from './shadows';
 import { ZIndex } from './zIndex';
@@ -240,7 +239,6 @@ export interface ColorSystemOptions {
 }
 
 export interface CssVarsPalette {
-  colorScheme: SupportedColorScheme;
   common: PaletteCommonChannel;
   primary: PaletteColorChannel;
   secondary: PaletteColorChannel;
@@ -277,6 +275,10 @@ export interface ColorSystem {
 }
 
 export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'components'> {
+  /**
+   * @default 'light'
+   */
+  defaultColorScheme?: SupportedColorScheme;
   /**
    * Prefix of the generated CSS variables
    * @default 'mui'
@@ -289,27 +291,27 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
   /**
    * Color schemes configuration
    */
-  colorSchemes?: Partial<Record<SupportedColorScheme, ColorSystemOptions>>;
+  colorSchemes?: Partial<Record<DefaultColorScheme, boolean | ColorSystemOptions>> &
+    (ExtendedColorScheme extends string ? Record<ExtendedColorScheme, ColorSystemOptions> : {});
   /**
-   * If provided, it will be used to create a selector for the color scheme.
-   * This is useful if you want to use class or data-* attributes to apply the color scheme.
+   * The strategy to generate CSS variables
    *
-   * The callback receives the colorScheme with the possible values of:
-   * - undefined: the selector for tokens that are not color scheme dependent
-   * - string: the selector for the color scheme
+   * @example 'media'
+   * Generate CSS variables using [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
    *
-   * @example
-   * // class selector
-   * (colorScheme) => colorScheme !== 'light' ? `.theme-${colorScheme}` : ":root"
+   * @example '.mode-%s'
+   * Generate CSS variables within a class .mode-light, .mode-dark
    *
-   * @example
-   * // data-* attribute selector
-   * (colorScheme) => colorScheme !== 'light' ? `[data-theme="${colorScheme}"`] : ":root"
+   * @example '[data-mode-%s]'
+   * Generate CSS variables within a data attribute [data-mode-light], [data-mode-dark]
+   */
+  colorSchemeSelector?: 'media' | 'class' | 'data' | string;
+  /**
+   * If `true`, the CSS color-scheme will not be set.
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+   * @default false
    */
-  getSelector?: (
-    colorScheme: SupportedColorScheme | undefined,
-    css: Record<string, any>,
-  ) => string | Record<string, any>;
+  disableCssColorScheme?: boolean;
   /**
    * A function to determine if the key, value should be attached as CSS Variable
    * `keys` is an array that represents the object path keys.
@@ -427,8 +429,10 @@ export type ThemeCssVar = OverridableStringUnion<
  * Theme properties generated by extendTheme and CssVarsProvider
  */
 export interface CssVarsTheme extends ColorSystem {
-  colorSchemes: Record<SupportedColorScheme, ColorSystem>;
+  colorSchemes: Partial<Record<SupportedColorScheme, ColorSystem>>;
+  colorSchemeSelector: 'media' | 'class' | 'data' | string;
   cssVarPrefix: string;
+  defaultColorScheme: SupportedColorScheme;
   vars: ThemeVars;
   getCssVar: (field: ThemeCssVar, ...vars: ThemeCssVar[]) => string;
   getColorSchemeSelector: (colorScheme: SupportedColorScheme) => string;
@@ -465,7 +469,7 @@ export interface CssVarsTheme extends ColorSystem {
  * @param args Deep merge the arguments with the about to be returned theme.
  * @returns A complete, ready-to-use theme object.
  */
-export default function experimental_extendTheme(
+export default function createThemeWithVars(
   options?: CssVarsThemeOptions,
   ...args: object[]
 ): Omit<Theme, 'applyStyles'> & CssVarsTheme;