@mui/material 5.8.6 → 5.8.7

package/node/styles/experimental_extendTheme.js

@@ -5,6 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.createGetCssVar = void 0;
 exports.default = extendTheme;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -19,7 +20,7 @@ var _createTheme = _interopRequireDefault(require("./createTheme"));
 
 var _Paper = require("../Paper/Paper");
 
-const _excluded = ["colorSchemes"],
+const _excluded = ["colorSchemes", "cssVarPrefix"],
       _excluded2 = ["palette"];
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   if (index === 0) {
@@ -42,13 +43,19 @@ function setColor(obj, key, defaultValue) {
   obj[key] = obj[key] || defaultValue;
 }
 
+const createGetCssVar = (cssVarPrefix = 'mui') => (0, _system.unstable_createGetCssVar)(cssVarPrefix);
+
+exports.createGetCssVar = createGetCssVar;
+
 function extendTheme(options = {}, ...args) {
   var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
 
   const {
-    colorSchemes: colorSchemesInput = {}
+    colorSchemes: colorSchemesInput = {},
+    cssVarPrefix = 'mui'
   } = options,
         input = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
+  const getCssVar = createGetCssVar(cssVarPrefix);
 
   const _createThemeWithoutVa = (0, _createTheme.default)((0, _extends2.default)({}, input, colorSchemesInput.light && {
     palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
@@ -66,6 +73,8 @@ function extendTheme(options = {}, ...args) {
     }, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
   });
   let theme = (0, _extends2.default)({}, muiTheme, {
+    cssVarPrefix,
+    getCssVar,
     colorSchemes: (0, _extends2.default)({}, colorSchemesInput, {
       light: (0, _extends2.default)({}, colorSchemesInput.light, {
         palette: lightPalette,
@@ -108,10 +117,10 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.Alert, 'infoColor', (0, _system.darken)(palette.info.light, 0.6));
       setColor(palette.Alert, 'successColor', (0, _system.darken)(palette.success.light, 0.6));
       setColor(palette.Alert, 'warningColor', (0, _system.darken)(palette.warning.light, 0.6));
-      setColor(palette.Alert, 'errorFilledBg', 'var(--mui-palette-error-main)');
-      setColor(palette.Alert, 'infoFilledBg', 'var(--mui-palette-info-main)');
-      setColor(palette.Alert, 'successFilledBg', 'var(--mui-palette-success-main)');
-      setColor(palette.Alert, 'warningFilledBg', 'var(--mui-palette-warning-main)');
+      setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-main'));
+      setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-main'));
+      setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-main'));
+      setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-main'));
       setColor(palette.Alert, 'errorFilledColor', lightPalette.getContrastText(palette.error.main));
       setColor(palette.Alert, 'infoFilledColor', lightPalette.getContrastText(palette.info.main));
       setColor(palette.Alert, 'successFilledColor', lightPalette.getContrastText(palette.success.main));
@@ -120,15 +129,15 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.Alert, 'infoStandardBg', (0, _system.lighten)(palette.info.light, 0.9));
       setColor(palette.Alert, 'successStandardBg', (0, _system.lighten)(palette.success.light, 0.9));
       setColor(palette.Alert, 'warningStandardBg', (0, _system.lighten)(palette.warning.light, 0.9));
-      setColor(palette.Alert, 'errorIconColor', 'var(--mui-palette-error-light)');
-      setColor(palette.Alert, 'infoIconColor', 'var(--mui-palette-info-light)');
-      setColor(palette.Alert, 'successIconColor', 'var(--mui-palette-success-light)');
-      setColor(palette.Alert, 'warningIconColor', 'var(--mui-palette-warning-light)');
-      setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-100)');
-      setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-400)');
-      setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-400)');
-      setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-700)');
-      setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-700)');
+      setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-light'));
+      setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-light'));
+      setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-light'));
+      setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-light'));
+      setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-100'));
+      setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-400'));
+      setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-400'));
+      setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-700'));
+      setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-700'));
       setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
       setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
       setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
@@ -138,19 +147,21 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.LinearProgress, 'infoBg', (0, _system.lighten)(palette.info.main, 0.62));
       setColor(palette.LinearProgress, 'successBg', (0, _system.lighten)(palette.success.main, 0.62));
       setColor(palette.LinearProgress, 'warningBg', (0, _system.lighten)(palette.warning.main, 0.62));
-      setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primaryChannel) / 0.11)');
+      setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.11)`);
       setColor(palette.Slider, 'primaryTrack', (0, _system.lighten)(palette.primary.main, 0.62));
       setColor(palette.Slider, 'secondaryTrack', (0, _system.lighten)(palette.secondary.main, 0.62));
       setColor(palette.Slider, 'errorTrack', (0, _system.lighten)(palette.error.main, 0.62));
       setColor(palette.Slider, 'infoTrack', (0, _system.lighten)(palette.info.main, 0.62));
       setColor(palette.Slider, 'successTrack', (0, _system.lighten)(palette.success.main, 0.62));
       setColor(palette.Slider, 'warningTrack', (0, _system.lighten)(palette.warning.main, 0.62));
-      setColor(palette.SnackbarContent, 'bg', (0, _system.emphasize)(palette.background.default, 0.8));
+      const snackbarContentBackground = (0, _system.emphasize)(palette.background.default, 0.8);
+      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+      setColor(palette.SnackbarContent, 'color', lightPalette.getContrastText(snackbarContentBackground));
       setColor(palette.SpeedDialAction, 'fabHoverBg', (0, _system.emphasize)(palette.background.paper, 0.15));
-      setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-400)');
-      setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-400)');
-      setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-common-white)');
-      setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-palette-grey-100)');
+      setColor(palette.StepConnector, 'border', getCssVar('palette-grey-400'));
+      setColor(palette.StepContent, 'border', getCssVar('palette-grey-400'));
+      setColor(palette.Switch, 'defaultColor', getCssVar('palette-common-white'));
+      setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-100'));
       setColor(palette.Switch, 'primaryDisabledColor', (0, _system.lighten)(palette.primary.main, 0.62));
       setColor(palette.Switch, 'secondaryDisabledColor', (0, _system.lighten)(palette.secondary.main, 0.62));
       setColor(palette.Switch, 'errorDisabledColor', (0, _system.lighten)(palette.error.main, 0.62));
@@ -164,10 +175,10 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.Alert, 'infoColor', (0, _system.lighten)(palette.info.light, 0.6));
       setColor(palette.Alert, 'successColor', (0, _system.lighten)(palette.success.light, 0.6));
       setColor(palette.Alert, 'warningColor', (0, _system.lighten)(palette.warning.light, 0.6));
-      setColor(palette.Alert, 'errorFilledBg', 'var(--mui-palette-error-dark)');
-      setColor(palette.Alert, 'infoFilledBg', 'var(--mui-palette-info-dark)');
-      setColor(palette.Alert, 'successFilledBg', 'var(--mui-palette-success-dark)');
-      setColor(palette.Alert, 'warningFilledBg', 'var(--mui-palette-warning-dark)');
+      setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-dark'));
+      setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-dark'));
+      setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-dark'));
+      setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-dark'));
       setColor(palette.Alert, 'errorFilledColor', darkPalette.getContrastText(palette.error.dark));
       setColor(palette.Alert, 'infoFilledColor', darkPalette.getContrastText(palette.info.dark));
       setColor(palette.Alert, 'successFilledColor', darkPalette.getContrastText(palette.success.dark));
@@ -176,19 +187,19 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.Alert, 'infoStandardBg', (0, _system.darken)(palette.info.light, 0.9));
       setColor(palette.Alert, 'successStandardBg', (0, _system.darken)(palette.success.light, 0.9));
       setColor(palette.Alert, 'warningStandardBg', (0, _system.darken)(palette.warning.light, 0.9));
-      setColor(palette.Alert, 'errorIconColor', 'var(--mui-palette-error-main)');
-      setColor(palette.Alert, 'infoIconColor', 'var(--mui-palette-info-main)');
-      setColor(palette.Alert, 'successIconColor', 'var(--mui-palette-success-main)');
-      setColor(palette.Alert, 'warningIconColor', 'var(--mui-palette-warning-main)');
-      setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-900)');
-      setColor(palette.AppBar, 'darkBg', 'var(--mui-palette-background-paper)'); // specific for dark mode
-
-      setColor(palette.AppBar, 'darkColor', 'var(--mui-palette-text-primary)'); // specific for dark mode
-
-      setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-600)');
-      setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-700)');
-      setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-300)');
-      setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-300)');
+      setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-main'));
+      setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-main'));
+      setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-main'));
+      setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-main'));
+      setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-900'));
+      setColor(palette.AppBar, 'darkBg', getCssVar('palette-background-paper')); // specific for dark mode
+
+      setColor(palette.AppBar, 'darkColor', getCssVar('palette-text-primary')); // specific for dark mode
+
+      setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-600'));
+      setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-700'));
+      setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-300'));
+      setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-300'));
       setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
       setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
       setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
@@ -198,19 +209,21 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.LinearProgress, 'infoBg', (0, _system.darken)(palette.info.main, 0.5));
       setColor(palette.LinearProgress, 'successBg', (0, _system.darken)(palette.success.main, 0.5));
       setColor(palette.LinearProgress, 'warningBg', (0, _system.darken)(palette.warning.main, 0.5));
-      setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primaryChannel) / 0.13)');
+      setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.13)`);
       setColor(palette.Slider, 'primaryTrack', (0, _system.darken)(palette.primary.main, 0.5));
       setColor(palette.Slider, 'secondaryTrack', (0, _system.darken)(palette.secondary.main, 0.5));
       setColor(palette.Slider, 'errorTrack', (0, _system.darken)(palette.error.main, 0.5));
       setColor(palette.Slider, 'infoTrack', (0, _system.darken)(palette.info.main, 0.5));
       setColor(palette.Slider, 'successTrack', (0, _system.darken)(palette.success.main, 0.5));
       setColor(palette.Slider, 'warningTrack', (0, _system.darken)(palette.warning.main, 0.5));
-      setColor(palette.SnackbarContent, 'bg', (0, _system.emphasize)(palette.background.default, 0.98));
+      const snackbarContentBackground = (0, _system.emphasize)(palette.background.default, 0.98);
+      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+      setColor(palette.SnackbarContent, 'color', darkPalette.getContrastText(snackbarContentBackground));
       setColor(palette.SpeedDialAction, 'fabHoverBg', (0, _system.emphasize)(palette.background.paper, 0.15));
-      setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-600)');
-      setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-600)');
-      setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-grey-300)');
-      setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-palette-grey-600)');
+      setColor(palette.StepConnector, 'border', getCssVar('palette-grey-600'));
+      setColor(palette.StepContent, 'border', getCssVar('palette-grey-600'));
+      setColor(palette.Switch, 'defaultColor', getCssVar('palette-grey-300'));
+      setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-600'));
       setColor(palette.Switch, 'primaryDisabledColor', (0, _system.darken)(palette.primary.main, 0.55));
       setColor(palette.Switch, 'secondaryDisabledColor', (0, _system.darken)(palette.secondary.main, 0.55));
       setColor(palette.Switch, 'errorDisabledColor', (0, _system.darken)(palette.error.main, 0.55));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.8.6",
+  "version": "5.8.7",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -46,12 +46,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@mui/base": "5.0.0-alpha.87",
-    "@mui/system": "^5.8.6",
+    "@mui/base": "5.0.0-alpha.88",
+    "@mui/system": "^5.8.7",
     "@mui/types": "^7.1.4",
     "@mui/utils": "^5.8.6",
-    "@types/react-transition-group": "^4.4.4",
-    "clsx": "^1.1.1",
+    "@types/react-transition-group": "^4.4.5",
+    "clsx": "^1.2.0",
     "csstype": "^3.1.0",
     "prop-types": "^15.8.1",
     "react-is": "^17.0.2",

package/styles/CssVarsProvider.d.ts

@@ -1,10 +1,14 @@
-/// <reference types="react" />
-import { SupportedColorScheme, CssVarsTheme } from './experimental_extendTheme';
-declare const Experimental_CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("packages/mui-system/src/cssVars/createCssVarsProvider").CssVarsProviderConfig<SupportedColorScheme>> & {
-    theme?: CssVarsTheme | undefined;
-    documentNode?: Document | null | undefined;
-    colorSchemeNode?: Document | HTMLElement | null | undefined;
-    colorSchemeSelector?: string | undefined;
-    storageWindow?: Window | null | undefined;
-}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("packages/mui-system/src/cssVars/createCssVarsProvider").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("packages/mui-system/src/cssVars/getInitColorSchemeScript").default;
-export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };
+/// <reference types="react" />
+import { SupportedColorScheme } from './experimental_extendTheme';
+declare const shouldSkipGeneratingVar: (keys: string[]) => boolean;
+declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
+    theme?: {
+        cssVarPrefix?: string | undefined;
+        colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
+    } | undefined;
+    documentNode?: Document | null | undefined;
+    colorSchemeNode?: Document | HTMLElement | null | undefined;
+    colorSchemeSelector?: string | undefined;
+    storageWindow?: Window | null | undefined;
+}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
+export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider, };

package/styles/CssVarsProvider.js

@@ -1,12 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-
-/* eslint-disable @typescript-eslint/naming-convention */
 import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
 import experimental_extendTheme from './experimental_extendTheme';
 import createTypography from './createTypography';
+
+const shouldSkipGeneratingVar = keys => {
+  var _keys$;
+
+  return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
+};
+
 const defaultTheme = experimental_extendTheme();
 const {
-  CssVarsProvider: Experimental_CssVarsProvider,
+  CssVarsProvider,
   useColorScheme,
   getInitColorSchemeScript
 } = createCssVarsProvider({
@@ -18,7 +23,6 @@ const {
     light: 'light',
     dark: 'dark'
   },
-  prefix: 'mui',
   resolveTheme: theme => {
     const newTheme = _extends({}, theme, {
       typography: createTypography(theme.palette, theme.typography)
@@ -26,10 +30,6 @@ const {
 
     return newTheme;
   },
-  shouldSkipGeneratingVar: keys => {
-    var _keys$;
-
-    return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
-  }
+  shouldSkipGeneratingVar
 });
-export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };
+export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider };

package/styles/experimental_extendTheme.d.ts

@@ -157,6 +157,7 @@ export interface PaletteSlider {
 
 export interface PaletteSnackbarContent {
   bg: string;
+  color: string;
 }
 
 export interface PaletteSpeedDialAction {
@@ -222,41 +223,53 @@ export interface ColorSystemOptions {
   overlays?: Overlays;
 }
 
-// The Palette should be sync with `../themeCssVarsAugmentation/index.d.ts`
+export interface CssVarsPalette {
+  colorScheme: SupportedColorScheme;
+  common: PaletteCommonChannel;
+  primary: PaletteColorChannel;
+  secondary: PaletteColorChannel;
+  error: PaletteColorChannel;
+  info: PaletteColorChannel;
+  success: PaletteColorChannel;
+  text: PaletteTextChannel;
+  dividerChannel: string;
+  action: PaletteActionChannel;
+  Alert: PaletteAlert;
+  AppBar: PaletteAppBar;
+  Avatar: PaletteAvatar;
+  Chip: PaletteChip;
+  FilledInput: PaletteFilledInput;
+  LinearProgress: PaletteLinearProgress;
+  Skeleton: PaletteSkeleton;
+  Slider: PaletteSlider;
+  SnackbarContent: PaletteSnackbarContent;
+  SpeedDialAction: PaletteSpeedDialAction;
+  StepConnector: PaletteStepConnector;
+  StepContent: PaletteStepContent;
+  Switch: PaletteSwitch;
+  TableCell: PaletteTableCell;
+  Tooltip: PaletteTooltip;
+}
+
 export interface ColorSystem {
-  palette: Palette & {
-    colorScheme: SupportedColorScheme;
-    common: PaletteCommonChannel;
-    primary: PaletteColorChannel;
-    secondary: PaletteColorChannel;
-    error: PaletteColorChannel;
-    info: PaletteColorChannel;
-    success: PaletteColorChannel;
-    text: PaletteTextChannel;
-    dividerChannel: string;
-    action: PaletteActionChannel;
-    Alert: PaletteAlert;
-    AppBar: PaletteAppBar;
-    Avatar: PaletteAvatar;
-    Chip: PaletteChip;
-    FilledInput: PaletteFilledInput;
-    LinearProgress: PaletteLinearProgress;
-    Skeleton: PaletteSkeleton;
-    Slider: PaletteSlider;
-    SnackbarContent: PaletteSnackbarContent;
-    SpeedDialAction: PaletteSpeedDialAction;
-    StepConnector: PaletteStepConnector;
-    StepContent: PaletteStepContent;
-    Switch: PaletteSwitch;
-    TableCell: PaletteTableCell;
-    Tooltip: PaletteTooltip;
-  };
+  palette: Palette & CssVarsPalette;
   opacity: Opacity;
   overlays: Overlays;
 }
 
 export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'components'> {
-  components?: Components<Omit<CssVarsTheme, 'components'>>;
+  /**
+   * Prefix of the generated CSS variables
+   * @default 'mui'
+   */
+  cssVarPrefix?: string;
+  /**
+   * Theme components
+   */
+  components?: Components<Omit<Theme, 'components' | 'palette'> & CssVarsTheme>;
+  /**
+   * Color schemes configuration
+   */
   colorSchemes?: Partial<Record<SupportedColorScheme, ColorSystemOptions>>;
 }
 
@@ -281,10 +294,12 @@ interface ThemeVars {
 // shut off automatic exporting for the `ThemeVars` above
 export {};
 
-export interface CssVarsTheme extends Omit<Theme, 'palette' | 'components'>, ColorSystem {
-  components?: Components<Omit<CssVarsTheme, 'components'>>;
+/**
+ * Theme properties generated by extendTheme and CssVarsProvider
+ */
+export interface CssVarsTheme extends ColorSystem {
   colorSchemes: Record<SupportedColorScheme, ColorSystem>;
-  prefix: string;
+  cssVarPrefix: string;
   vars: ThemeVars;
   getCssVar: <CustomVar extends string = never>(
     field: string | CustomVar,
@@ -302,4 +317,4 @@ export interface CssVarsTheme extends Omit<Theme, 'palette' | 'components'>, Col
 export default function experimental_extendTheme(
   options?: CssVarsThemeOptions,
   ...args: object[]
-): CssVarsTheme;
+): Omit<Theme, 'palette'> & CssVarsTheme;

package/styles/experimental_extendTheme.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colorSchemes"],
+const _excluded = ["colorSchemes", "cssVarPrefix"],
       _excluded2 = ["palette"];
 import { deepmerge } from '@mui/utils';
-import { colorChannel, alpha, darken, lighten, emphasize } from '@mui/system';
+import { colorChannel, alpha, darken, lighten, emphasize, unstable_createGetCssVar as systemCreateGetCssVar } from '@mui/system';
 import createThemeWithoutVars from './createTheme';
 import { getOverlayAlpha } from '../Paper/Paper';
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
@@ -27,14 +27,18 @@ function setColor(obj, key, defaultValue) {
   obj[key] = obj[key] || defaultValue;
 }
 
+export const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix);
 export default function extendTheme(options = {}, ...args) {
   var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
 
   const {
-    colorSchemes: colorSchemesInput = {}
+    colorSchemes: colorSchemesInput = {},
+    cssVarPrefix = 'mui'
   } = options,
         input = _objectWithoutPropertiesLoose(options, _excluded);
 
+  const getCssVar = createGetCssVar(cssVarPrefix);
+
   const _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
     palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
   })),
@@ -52,6 +56,8 @@ export default function extendTheme(options = {}, ...args) {
   });
 
   let theme = _extends({}, muiTheme, {
+    cssVarPrefix,
+    getCssVar,
     colorSchemes: _extends({}, colorSchemesInput, {
       light: _extends({}, colorSchemesInput.light, {
         palette: lightPalette,
@@ -95,10 +101,10 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.Alert, 'infoColor', darken(palette.info.light, 0.6));
       setColor(palette.Alert, 'successColor', darken(palette.success.light, 0.6));
       setColor(palette.Alert, 'warningColor', darken(palette.warning.light, 0.6));
-      setColor(palette.Alert, 'errorFilledBg', 'var(--mui-palette-error-main)');
-      setColor(palette.Alert, 'infoFilledBg', 'var(--mui-palette-info-main)');
-      setColor(palette.Alert, 'successFilledBg', 'var(--mui-palette-success-main)');
-      setColor(palette.Alert, 'warningFilledBg', 'var(--mui-palette-warning-main)');
+      setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-main'));
+      setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-main'));
+      setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-main'));
+      setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-main'));
       setColor(palette.Alert, 'errorFilledColor', lightPalette.getContrastText(palette.error.main));
       setColor(palette.Alert, 'infoFilledColor', lightPalette.getContrastText(palette.info.main));
       setColor(palette.Alert, 'successFilledColor', lightPalette.getContrastText(palette.success.main));
@@ -107,15 +113,15 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.Alert, 'infoStandardBg', lighten(palette.info.light, 0.9));
       setColor(palette.Alert, 'successStandardBg', lighten(palette.success.light, 0.9));
       setColor(palette.Alert, 'warningStandardBg', lighten(palette.warning.light, 0.9));
-      setColor(palette.Alert, 'errorIconColor', 'var(--mui-palette-error-light)');
-      setColor(palette.Alert, 'infoIconColor', 'var(--mui-palette-info-light)');
-      setColor(palette.Alert, 'successIconColor', 'var(--mui-palette-success-light)');
-      setColor(palette.Alert, 'warningIconColor', 'var(--mui-palette-warning-light)');
-      setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-100)');
-      setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-400)');
-      setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-400)');
-      setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-700)');
-      setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-700)');
+      setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-light'));
+      setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-light'));
+      setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-light'));
+      setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-light'));
+      setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-100'));
+      setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-400'));
+      setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-400'));
+      setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-700'));
+      setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-700'));
       setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
       setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
       setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
@@ -125,19 +131,21 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.LinearProgress, 'infoBg', lighten(palette.info.main, 0.62));
       setColor(palette.LinearProgress, 'successBg', lighten(palette.success.main, 0.62));
       setColor(palette.LinearProgress, 'warningBg', lighten(palette.warning.main, 0.62));
-      setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primaryChannel) / 0.11)');
+      setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.11)`);
       setColor(palette.Slider, 'primaryTrack', lighten(palette.primary.main, 0.62));
       setColor(palette.Slider, 'secondaryTrack', lighten(palette.secondary.main, 0.62));
       setColor(palette.Slider, 'errorTrack', lighten(palette.error.main, 0.62));
       setColor(palette.Slider, 'infoTrack', lighten(palette.info.main, 0.62));
       setColor(palette.Slider, 'successTrack', lighten(palette.success.main, 0.62));
       setColor(palette.Slider, 'warningTrack', lighten(palette.warning.main, 0.62));
-      setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.8));
+      const snackbarContentBackground = emphasize(palette.background.default, 0.8);
+      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+      setColor(palette.SnackbarContent, 'color', lightPalette.getContrastText(snackbarContentBackground));
       setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
-      setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-400)');
-      setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-400)');
-      setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-common-white)');
-      setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-palette-grey-100)');
+      setColor(palette.StepConnector, 'border', getCssVar('palette-grey-400'));
+      setColor(palette.StepContent, 'border', getCssVar('palette-grey-400'));
+      setColor(palette.Switch, 'defaultColor', getCssVar('palette-common-white'));
+      setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-100'));
       setColor(palette.Switch, 'primaryDisabledColor', lighten(palette.primary.main, 0.62));
       setColor(palette.Switch, 'secondaryDisabledColor', lighten(palette.secondary.main, 0.62));
       setColor(palette.Switch, 'errorDisabledColor', lighten(palette.error.main, 0.62));
@@ -151,10 +159,10 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.Alert, 'infoColor', lighten(palette.info.light, 0.6));
       setColor(palette.Alert, 'successColor', lighten(palette.success.light, 0.6));
       setColor(palette.Alert, 'warningColor', lighten(palette.warning.light, 0.6));
-      setColor(palette.Alert, 'errorFilledBg', 'var(--mui-palette-error-dark)');
-      setColor(palette.Alert, 'infoFilledBg', 'var(--mui-palette-info-dark)');
-      setColor(palette.Alert, 'successFilledBg', 'var(--mui-palette-success-dark)');
-      setColor(palette.Alert, 'warningFilledBg', 'var(--mui-palette-warning-dark)');
+      setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-dark'));
+      setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-dark'));
+      setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-dark'));
+      setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-dark'));
       setColor(palette.Alert, 'errorFilledColor', darkPalette.getContrastText(palette.error.dark));
       setColor(palette.Alert, 'infoFilledColor', darkPalette.getContrastText(palette.info.dark));
       setColor(palette.Alert, 'successFilledColor', darkPalette.getContrastText(palette.success.dark));
@@ -163,19 +171,19 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.Alert, 'infoStandardBg', darken(palette.info.light, 0.9));
       setColor(palette.Alert, 'successStandardBg', darken(palette.success.light, 0.9));
       setColor(palette.Alert, 'warningStandardBg', darken(palette.warning.light, 0.9));
-      setColor(palette.Alert, 'errorIconColor', 'var(--mui-palette-error-main)');
-      setColor(palette.Alert, 'infoIconColor', 'var(--mui-palette-info-main)');
-      setColor(palette.Alert, 'successIconColor', 'var(--mui-palette-success-main)');
-      setColor(palette.Alert, 'warningIconColor', 'var(--mui-palette-warning-main)');
-      setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-900)');
-      setColor(palette.AppBar, 'darkBg', 'var(--mui-palette-background-paper)'); // specific for dark mode
-
-      setColor(palette.AppBar, 'darkColor', 'var(--mui-palette-text-primary)'); // specific for dark mode
-
-      setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-600)');
-      setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-700)');
-      setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-300)');
-      setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-300)');
+      setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-main'));
+      setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-main'));
+      setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-main'));
+      setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-main'));
+      setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-900'));
+      setColor(palette.AppBar, 'darkBg', getCssVar('palette-background-paper')); // specific for dark mode
+
+      setColor(palette.AppBar, 'darkColor', getCssVar('palette-text-primary')); // specific for dark mode
+
+      setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-600'));
+      setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-700'));
+      setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-300'));
+      setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-300'));
       setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
       setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
       setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
@@ -185,19 +193,21 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.LinearProgress, 'infoBg', darken(palette.info.main, 0.5));
       setColor(palette.LinearProgress, 'successBg', darken(palette.success.main, 0.5));
       setColor(palette.LinearProgress, 'warningBg', darken(palette.warning.main, 0.5));
-      setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primaryChannel) / 0.13)');
+      setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.13)`);
       setColor(palette.Slider, 'primaryTrack', darken(palette.primary.main, 0.5));
       setColor(palette.Slider, 'secondaryTrack', darken(palette.secondary.main, 0.5));
       setColor(palette.Slider, 'errorTrack', darken(palette.error.main, 0.5));
       setColor(palette.Slider, 'infoTrack', darken(palette.info.main, 0.5));
       setColor(palette.Slider, 'successTrack', darken(palette.success.main, 0.5));
       setColor(palette.Slider, 'warningTrack', darken(palette.warning.main, 0.5));
-      setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.98));
+      const snackbarContentBackground = emphasize(palette.background.default, 0.98);
+      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+      setColor(palette.SnackbarContent, 'color', darkPalette.getContrastText(snackbarContentBackground));
       setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
-      setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-600)');
-      setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-600)');
-      setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-grey-300)');
-      setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-palette-grey-600)');
+      setColor(palette.StepConnector, 'border', getCssVar('palette-grey-600'));
+      setColor(palette.StepContent, 'border', getCssVar('palette-grey-600'));
+      setColor(palette.Switch, 'defaultColor', getCssVar('palette-grey-300'));
+      setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-600'));
       setColor(palette.Switch, 'primaryDisabledColor', darken(palette.primary.main, 0.55));
       setColor(palette.Switch, 'secondaryDisabledColor', darken(palette.secondary.main, 0.55));
       setColor(palette.Switch, 'errorDisabledColor', darken(palette.error.main, 0.55));