@mui/system 5.10.16 → 5.11.0

package/CHANGELOG.md

@@ -1,5 +1,153 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.11.0
+
+<!-- generated comparing v5.10.17..master -->
+
+_Dec 13, 2022_
+
+A big thanks to the 19 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔥 @mnajdova enabled configuration of the `sx` prop in the `theme` (#35150)
+- Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements.
+
+### `@mui/material@5.11.0`
+
+- [Alert] Update icon color in all variants (#35414) @danilo-leal
+- [Select] Fix `MenuProps.PopoverClasses` being overriden (#35394) @vitorfrs-dev
+- [SwipeableDrawer] Fixed typescript warning "prop open undefined" (#34710) @kraftware
+
+### `@mui/icons-material@5.11.0`
+
+- [icons] Restore the PhoneInTalk icons (#35409) @michaldudak
+
+### `@mui/system@5.11.0`
+
+#### BREAKING CHANGES
+
+- [system] Enable configuring the `sx` prop in the `theme` (#35150) @mnajdova
+
+  The breaking change is regarding an experimental API:
+
+  ```diff
+  -import { styled, experimental_sx } from '@mui/material/styles';
+  +import { styled } from '@mui/material/styles';
+
+  -const Component = styled('div)(experimental_sx({ p: 1 }});
+  +const Component = styled('div)(({ theme }) => theme.unstable_sx({ p: 1 }});
+  ```
+
+### `@mui/joy@5.0.0-alpha.58`
+
+- [Joy] Miscellaneous fixes (#35447) @siriwatknp
+
+### `@mui/base@5.0.0-alpha.110`
+
+- [PopperUnstyled] Update PopperTooltip to have correct width when closing with transition (#34714) @EduardoSCosta
+
+### `@mui/material-next@6.0.0-alpha.66`
+
+- [Material You] Add ripple on the button (#35299) @mnajdova
+
+### Docs
+
+- [docs] Simplify state management in Text Field demo page (#35051) @PratikDev
+- [docs] Improve `Responsive App bar with Drawer` demo (#35418) @ZeeshanTamboli
+- [docs] Improve line-height readability (#35387) @oliviertassinari
+- [docs] Improve a bit the Composition docs (#35329) @oliviertassinari
+- [docs] Refactor `ToggleButtonSizes` demo (#35375) @Armanio
+- [docs] Standardize the usage of callouts in the MUI Core docs (#35361) @samuelsycamore
+- [docs] Format feedback to add a link to the commented section (#35381) @alexfauquette
+- [docs] Direct users from Material UI to MUI Base for duplicated components (#35293) @samuelsycamore
+- [docs] Fix typo in FormControl API docs (#35449) @Spanishiwa
+- [docs] Update callouts design (#35390) @danilo-leal
+- [website] New wave of open roles (#35240) @mnajdova
+- [website] Developer survey 2022 (#35407) @joserodolfofreitas
+
+### Core
+
+- [core] Fix @mui/material package building (#35324) @timbset
+- [core] Fix leaking theme color override (#35444) @oliviertassinari
+- [typescript] Add null to return type of OverridableComponent (#35311) @tsollbach
+- [website] Migrate X page to use CSS theme variables (#34922) @jesrodri
+- [website] Migrate `/core` page to use CSS variables (#35366) @siriwatknp
+
+All contributors of this release in alphabetical order: @alexfauquette, @Armanio, @danilo-leal, @EduardoSCosta, @flaviendelangle, @jesrodri, @joserodolfofreitas, @kraftware, @michaldudak, @mnajdova, @oliviertassinari, @PratikDev, @samuelsycamore, @siriwatknp, @Spanishiwa, @timbset, @tsollbach, @vitorfrs-dev, @ZeeshanTamboli
+
+## 5.10.17
+
+<!-- generated comparing v5.10.16..master -->
+
+_Dec 6, 2022_
+
+A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ @mnajdova added a [Material You Button playground](https://mui.com/material-ui/react-button/#material-you-version) (#35222)
+- 🔧 @hbjORbj renamed `components` / `componentProps` to `slots` / `slotProps` prop in Joy UI to create consistency across products (#34997)
+- Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements
+
+### `@mui/material@5.10.17`
+
+- &#8203;<!-- 31 -->[Slider] Fix `markActive` theme class not getting applied (#35067) @ZeeshanTamboli
+- &#8203;<!-- 30 -->[SwipeableDrawer] Fix missing close animation when initial open is true (#35010) @sai6855
+- &#8203;<!-- 28 -->[material-ui] Add channel colors if possible (#35178) @siriwatknp
+- &#8203;<!-- 10 -->[Fab] Increase disabled styles precedence (#35304) @Uzwername
+- &#8203;<!-- 05 -->[Rating] Apply `labelEmptyValueActive` style overrides from theme (#35315) @sai6855
+
+### `@mui/system@5.10.17`
+
+- &#8203;<!-- 04 -->[system] Add support for nested CssVarsProvider (#35277) @siriwatknp
+
+### `@mui/joy@5.0.0-alpha.57`
+
+#### BREAKING CHANGE
+
+- &#8203;<!-- 08 -->[Joy] Add `slots`/`slotProps` props to the typing of all components and apply `useSlot` to all components (#34997) @hbjORbj
+
+  - Change all occurrences of `components` and `componentsProps` props in Joy UI components to `slots` and `slotProps`, respectively.
+
+  ```diff
+  -<Autocomplete components={{listbox: CustomListbox}} componentsProps={{listbox: { className: 'custom-listbox' }}} />
+  +<Autocomplete slots={{listbox: CustomListbox}} slotProps={{listbox: { className: 'custom-listbox' }}} />
+  ```
+
+  You can use this [codemod](https://github.com/mui/material-ui/blob/master/packages/mui-codemod/README.md#joy-rename-components-to-slots) to help with the migration.
+
+#### Changes
+
+- &#8203;<!-- 07 -->[Joy] Miscellaneous fixes (#35345) @siriwatknp
+- &#8203;<!-- 06 -->[Joy][textarea] Expose decorator classes (#35247) @zignis
+
+### Docs
+
+- &#8203;<!-- 29 -->[docs] Improve spacing with ul (#35302) @oliviertassinari
+- &#8203;<!-- 23 -->[docs] Correct grammatically incorrect sentences in CONTRIBUTING.md (#34949) @Pandey-utkarsh
+- &#8203;<!-- 22 -->[docs] Move the demo higher in the API TOC (#35202) @oliviertassinari
+- &#8203;<!-- 21 -->[docs] Fix incorrect link in minimizing-bundle-size (#35297) @Juneezee
+- &#8203;<!-- 20 -->[docs] Revise and expand Joy UI "Breadcrumbs" page (#35292) @samuelsycamore
+- &#8203;<!-- 19 -->[docs] Fix wrong import in the unstyled tabs page (#35310) @guotie
+- &#8203;<!-- 18 -->[docs] Disable translations (#34820) @mnajdova
+- &#8203;<!-- 17 -->[docs] Fix typo (#35312) @flaviendelangle
+- &#8203;<!-- 16 -->[docs] Add Material You Button playground (#35222) @mnajdova
+- &#8203;<!-- 15 -->[docs] Fix experimental API page duplication (#35213) @oliviertassinari
+- &#8203;<!-- 14 -->[docs] Improve the autogenerated "Unstyled" and "API" text (#35185) @samuelsycamore
+- &#8203;<!-- 13 -->[docs] Fix ad margin on API pages (#35201) @oliviertassinari
+- &#8203;<!-- 12 -->[docs] Revise and expand the Joy UI "Badge" page (#35199) @samuelsycamore
+- &#8203;<!-- 11 -->[docs] Update MUI Base docs with latest style conventions (#35034) @samuelsycamore
+- &#8203;<!-- 09 -->[l10n] Improve Chinese (Taiwan) zh-TW locale (#35328) @happyincent
+- &#8203;<!-- 02 -->[website] Update MUI stats: GitHub stars, Twitter followers, etc. (#35318) @nomandhoni-cs
+
+### Core
+
+- &#8203;<!-- 27 -->[core] Use componentStyles.name over componentName (#35303) @oliviertassinari
+- &#8203;<!-- 26 -->[core] Fix warning leak in production (#35313) @oliviertassinari
+- &#8203;<!-- 25 -->[core] Move the internal packages from docs/packages (#35305) @michaldudak
+- &#8203;<!-- 24 -->[core] Clean up the API docs generation scripts (#35244) @michaldudak
+- &#8203;<!-- 03 -->[test] Scope the tests to just Material UI components (#35219) @siriwatknp
+- &#8203;<!-- 01 -->[website] Remove BlackFriday notification @oliviertassinari
+
+All contributors of this release in alphabetical order: @flaviendelangle, @guotie, @happyincent, @hbjORbj, @Juneezee, @michaldudak, @mnajdova, @nomandhoni-cs, @oliviertassinari, @Pandey-utkarsh, @sai6855, @samuelsycamore, @siriwatknp, @Uzwername, @zignis
+
 ## 5.10.16
 
 <!-- generated comparing v5.10.15..master -->

package/borders.js

@@ -4,13 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.borderTopColor = exports.borderTop = exports.borderRightColor = exports.borderRight = exports.borderRadius = exports.borderLeftColor = exports.borderLeft = exports.borderColor = exports.borderBottomColor = exports.borderBottom = exports.border = void 0;
+exports.borderTopColor = exports.borderTop = exports.borderRightColor = exports.borderRight = exports.borderRadius = exports.borderLeftColor = exports.borderLeft = exports.borderColor = exports.borderBottomColor = exports.borderBottom = exports.border = void 0;
+exports.borderTransform = borderTransform;
+exports.default = void 0;
 var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
 var _style = _interopRequireDefault(require("./style"));
 var _compose = _interopRequireDefault(require("./compose"));
 var _spacing = require("./spacing");
 var _breakpoints = require("./breakpoints");
-function getBorder(value) {
+function borderTransform(value) {
   if (typeof value !== 'number') {
     return value;
   }
@@ -19,31 +21,31 @@ function getBorder(value) {
 const border = (0, _style.default)({
   prop: 'border',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 exports.border = border;
 const borderTop = (0, _style.default)({
   prop: 'borderTop',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 exports.borderTop = borderTop;
 const borderRight = (0, _style.default)({
   prop: 'borderRight',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 exports.borderRight = borderRight;
 const borderBottom = (0, _style.default)({
   prop: 'borderBottom',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 exports.borderBottom = borderBottom;
 const borderLeft = (0, _style.default)({
   prop: 'borderLeft',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 exports.borderLeft = borderLeft;
 const borderColor = (0, _style.default)({
@@ -70,6 +72,9 @@ const borderLeftColor = (0, _style.default)({
   prop: 'borderLeftColor',
   themeKey: 'palette'
 });
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 exports.borderLeftColor = borderLeftColor;
 const borderRadius = props => {
   if (props.borderRadius !== undefined && props.borderRadius !== null) {

package/breakpoints.js

@@ -63,6 +63,8 @@ function handleBreakpoints(props, propValue, styleFromPropValue) {
   return output;
 }
 function breakpoints(styleFunction) {
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const newStyleFunction = props => {
     const theme = props.theme || {};
     const base = styleFunction(props);

package/colorManipulator.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 export type ColorFormat = 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'color';
 export interface ColorObject {
   type: ColorFormat;
@@ -10,10 +11,19 @@ export function rgbToHex(color: string): string;
 export function hslToRgb(color: string): string;
 export function decomposeColor(color: string): ColorObject;
 export function colorChannel(color: string): string;
+export function private_safeColorChannel(color: string, warning?: string): string;
 export function recomposeColor(color: ColorObject): string;
 export function getContrastRatio(foreground: string, background: string): number;
 export function getLuminance(color: string): number;
 export function emphasize(color: string, coefficient?: number): string;
+export function private_safeEmphasize(
+  color: string,
+  coefficient?: number,
+  warning?: string,
+): string;
 export function alpha(color: string, value: number): string;
+export function private_safeAlpha(color: string, value: number, warning?: string): string;
 export function darken(color: string, coefficient: number): string;
+export function private_safeDarken(color: string, coefficient: number, warning?: string): string;
 export function lighten(color: string, coefficient: number): string;
+export function private_safeLighten(color: string, coefficient: number, warning?: string): string;

package/colorManipulator.js

@@ -13,6 +13,11 @@ exports.getLuminance = getLuminance;
 exports.hexToRgb = hexToRgb;
 exports.hslToRgb = hslToRgb;
 exports.lighten = lighten;
+exports.private_safeAlpha = private_safeAlpha;
+exports.private_safeColorChannel = void 0;
+exports.private_safeDarken = private_safeDarken;
+exports.private_safeEmphasize = private_safeEmphasize;
+exports.private_safeLighten = private_safeLighten;
 exports.recomposeColor = recomposeColor;
 exports.rgbToHex = rgbToHex;
 var _utils = require("@mui/utils");
@@ -107,6 +112,17 @@ const colorChannel = color => {
   const decomposedColor = decomposeColor(color);
   return decomposedColor.values.slice(0, 3).map((val, idx) => decomposedColor.type.indexOf('hsl') !== -1 && idx !== 0 ? `${val}%` : val).join(' ');
 };
+exports.colorChannel = colorChannel;
+const private_safeColorChannel = (color, warning) => {
+  try {
+    return colorChannel(color);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
+};
 
 /**
  * Converts a color object with type and values to a string.
@@ -115,7 +131,7 @@ const colorChannel = color => {
  * @param {array} color.values - [n,n,n] or [n,n,n,n]
  * @returns {string} A CSS color string
  */
-exports.colorChannel = colorChannel;
+exports.private_safeColorChannel = private_safeColorChannel;
 function recomposeColor(color) {
   const {
     type,
@@ -238,6 +254,16 @@ function alpha(color, value) {
   }
   return recomposeColor(color);
 }
+function private_safeAlpha(color, value, warning) {
+  try {
+    return alpha(color, value);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
+}
 
 /**
  * Darkens a color.
@@ -257,6 +283,16 @@ function darken(color, coefficient) {
   }
   return recomposeColor(color);
 }
+function private_safeDarken(color, coefficient, warning) {
+  try {
+    return darken(color, coefficient);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
+}
 
 /**
  * Lightens a color.
@@ -280,6 +316,16 @@ function lighten(color, coefficient) {
   }
   return recomposeColor(color);
 }
+function private_safeLighten(color, coefficient, warning) {
+  try {
+    return lighten(color, coefficient);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
+}
 
 /**
  * Darken or lighten a color, depending on its luminance.
@@ -290,4 +336,14 @@ function lighten(color, coefficient) {
  */
 function emphasize(color, coefficient = 0.15) {
   return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
+}
+function private_safeEmphasize(color, coefficient, warning) {
+  try {
+    return private_safeEmphasize(color, coefficient);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
 }

package/compose.js

@@ -13,6 +13,9 @@ function compose(...styles) {
     });
     return acc;
   }, {});
+
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const fn = props => {
     return Object.keys(props).reduce((acc, prop) => {
       if (handlers[prop]) {

package/createBox.d.ts

@@ -1,9 +1,7 @@
 import Box from './Box';
-import styleFunctionSx from './styleFunctionSx';
 
 export default function createBox(options?: {
   defaultTheme: object;
   defaultClassName?: string;
   generateClassName?: (componentName: string) => string;
-  styleFunctionSx?: typeof styleFunctionSx;
 }): typeof Box;

package/createBox.js

@@ -20,12 +20,11 @@ function createBox(options = {}) {
   const {
     defaultTheme,
     defaultClassName = 'MuiBox-root',
-    generateClassName,
-    styleFunctionSx = _styleFunctionSx.default
+    generateClassName
   } = options;
   const BoxRoot = (0, _styledEngine.default)('div', {
     shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
-  })(styleFunctionSx);
+  })(_styleFunctionSx.default);
   const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
     const theme = (0, _useTheme.default)(defaultTheme);
     const _extendSxProp = (0, _styleFunctionSx.extendSxProp)(inProps),

package/createStyled.js

@@ -85,12 +85,11 @@ function createStyled(input = {}) {
   const {
     defaultTheme = systemDefaultTheme,
     rootShouldForwardProp = shouldForwardProp,
-    slotShouldForwardProp = shouldForwardProp,
-    styleFunctionSx = _styleFunctionSx.default
+    slotShouldForwardProp = shouldForwardProp
   } = input;
   const systemSx = props => {
     const theme = isEmpty(props.theme) ? defaultTheme : props.theme;
-    return styleFunctionSx((0, _extends2.default)({}, props, {
+    return (0, _styleFunctionSx.default)((0, _extends2.default)({}, props, {
       theme
     }));
   };

package/createTheme/createTheme.d.ts

@@ -1,6 +1,8 @@
+import { CSSObject } from '@mui/styled-engine';
 import { Breakpoints, BreakpointsOptions } from './createBreakpoints';
 import { Shape, ShapeOptions } from './shape';
 import { Spacing, SpacingOptions } from './createSpacing';
+import { SxConfig, SxProps } from '../styleFunctionSx';
 
 export { Breakpoint, BreakpointOverrides } from './createBreakpoints';
 
@@ -18,6 +20,7 @@ export interface ThemeOptions {
   components?: Record<string, any>;
   typography?: unknown;
   zIndex?: Record<string, number>;
+  unstable_sxConfig?: SxConfig;
 }
 
 export interface Theme {
@@ -32,6 +35,8 @@ export interface Theme {
   mixins?: unknown;
   typography?: unknown;
   zIndex?: unknown;
+  unstable_sxConfig: SxConfig;
+  unstable_sx: (props: SxProps<Theme>) => CSSObject;
 }
 
 /**

package/createTheme/createTheme.js

@@ -11,6 +11,8 @@ var _utils = require("@mui/utils");
 var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints"));
 var _shape = _interopRequireDefault(require("./shape"));
 var _createSpacing = _interopRequireDefault(require("./createSpacing"));
+var _styleFunctionSx = _interopRequireDefault(require("../styleFunctionSx/styleFunctionSx"));
+var _defaultSxConfig = _interopRequireDefault(require("../styleFunctionSx/defaultSxConfig"));
 const _excluded = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme(options = {}, ...args) {
   const {
@@ -34,6 +36,13 @@ function createTheme(options = {}, ...args) {
     shape: (0, _extends2.default)({}, _shape.default, shapeInput)
   }, other);
   muiTheme = args.reduce((acc, argument) => (0, _utils.deepmerge)(acc, argument), muiTheme);
+  muiTheme.unstable_sxConfig = (0, _extends2.default)({}, _defaultSxConfig.default, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sx = function sx(props) {
+    return (0, _styleFunctionSx.default)({
+      sx: props,
+      theme: this
+    });
+  };
   return muiTheme;
 }
 var _default = createTheme;

package/cssGrid.js

@@ -10,6 +10,8 @@ var _compose = _interopRequireDefault(require("./compose"));
 var _spacing = require("./spacing");
 var _breakpoints = require("./breakpoints");
 var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
+// false positive
+// eslint-disable-next-line react/function-component-definition
 const gap = props => {
   if (props.gap !== undefined && props.gap !== null) {
     const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'spacing', 8, 'gap');
@@ -25,6 +27,9 @@ gap.propTypes = process.env.NODE_ENV !== 'production' ? {
   gap: _responsivePropType.default
 } : {};
 gap.filterProps = ['gap'];
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 const columnGap = props => {
   if (props.columnGap !== undefined && props.columnGap !== null) {
     const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'spacing', 8, 'columnGap');
@@ -40,6 +45,9 @@ columnGap.propTypes = process.env.NODE_ENV !== 'production' ? {
   columnGap: _responsivePropType.default
 } : {};
 columnGap.filterProps = ['columnGap'];
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 const rowGap = props => {
   if (props.rowGap !== undefined && props.rowGap !== null) {
     const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'spacing', 8, 'rowGap');

package/cssVars/createCssVarsProvider.d.ts

@@ -66,7 +66,7 @@ export interface CreateCssVarsProviderResult<ColorScheme extends string> {
          * The node used to attach the color-scheme attribute
          * @default document
          */
-        colorSchemeNode?: Document | HTMLElement | null;
+        colorSchemeNode?: Element | null;
         /**
          * The CSS selector for attaching the generated custom properties
          * @default ':root'
@@ -77,10 +77,63 @@ export interface CreateCssVarsProviderResult<ColorScheme extends string> {
          * @default window
          */
         storageWindow?: Window | null;
+        /**
+         * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
+         */
+        disableNestedContext?: boolean;
+        /**
+         * If `true`, the style sheet won't be generated.
+         *
+         * This is useful for controlling nested CssVarsProvider behavior.
+         * @default false
+         */
+        disableStyleSheetGeneration?: boolean;
       }
     >,
   ) => React.ReactElement;
   useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
+  generateCssThemeVars: (options?: {
+    /**
+     * Design system default color scheme.
+     * - provides string if the design system has one default color scheme (either light or dark)
+     * - provides object if the design system has default light & dark color schemes
+     */
+    defaultColorScheme?: ColorScheme | { light: ColorScheme; dark: ColorScheme };
+    /**
+     * @default 'light'
+     */
+    defaultMode?: 'light' | 'dark';
+    /**
+     * The selector for attaching CSS variables that are **outside** of `theme.colorSchemes.*`.
+     * @default ':root'
+     */
+    rootSelector: string;
+    /**
+     * The selector for attaching CSS variables that are **outside** of `theme.colorSchemes.*`.
+     * @default (key) => `[data-color-scheme="${key}"]`
+     */
+    colorSchemeSelector: (key: ColorScheme) => string;
+    /**
+     * A function to determine if the key, value should be attached as CSS Variable
+     * `keys` is an array that represents the object path keys.
+     *  Ex, if the theme is { foo: { bar: 'var(--test)' } }
+     *  then, keys = ['foo', 'bar']
+     *        value = 'var(--test)'
+     */
+    shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean;
+    /**
+     * Controlled mode. If not provided, it will try to read the value from the upper CssVarsProvider.
+     */
+    mode?: Mode;
+    /**
+     * Controlled color scheme. If not provided, it will try to read the value from the upper CssVarsProvider.
+     */
+    colorScheme?: ColorScheme;
+    theme?: {
+      cssVarPrefix?: string;
+      colorSchemes: Record<ColorScheme, Record<string, any>>;
+    };
+  }) => Record<string, any>;
   getInitColorSchemeScript: typeof getInitColorSchemeScript;
 }
 

package/cssVars/createCssVarsProvider.js

@@ -12,6 +12,7 @@ var _utils = require("@mui/utils");
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledEngine = require("@mui/styled-engine");
+var _privateTheming = require("@mui/private-theming");
 var _cssVarsParser = _interopRequireDefault(require("./cssVarsParser"));
 var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
 var _getInitColorSchemeScript = _interopRequireWildcard(require("./getInitColorSchemeScript"));
@@ -59,9 +60,14 @@ function createCssVarsProvider(options) {
     documentNode = typeof document === 'undefined' ? undefined : document,
     colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
     colorSchemeSelector = ':root',
-    shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar
+    shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar,
+    disableNestedContext = false,
+    disableStyleSheetGeneration = false
   }) {
     const hasMounted = React.useRef(false);
+    const upperTheme = (0, _privateTheming.useTheme)();
+    const ctx = React.useContext(ColorSchemeContext);
+    const nested = !!ctx && !disableNestedContext;
     const {
         colorSchemes = {},
         components = {},
@@ -74,12 +80,12 @@ function createCssVarsProvider(options) {
 
     // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
     const {
-      mode,
+      mode: stateMode,
       setMode,
       systemMode,
       lightColorScheme,
       darkColorScheme,
-      colorScheme,
+      colorScheme: stateColorScheme,
       setColorScheme
     } = (0, _useCurrentColorScheme.default)({
       supportedColorSchemes: allColorSchemes,
@@ -90,6 +96,12 @@ function createCssVarsProvider(options) {
       defaultMode,
       storageWindow
     });
+    let mode = stateMode;
+    let colorScheme = stateColorScheme;
+    if (nested) {
+      mode = ctx.mode;
+      colorScheme = ctx.colorScheme;
+    }
     const calculatedMode = (() => {
       if (!mode) {
         // This scope occurs on the server
@@ -226,21 +238,33 @@ function createCssVarsProvider(options) {
       setColorScheme,
       allColorSchemes
     }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ColorSchemeContext.Provider, {
-      value: contextValue,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
-        styles: {
-          [colorSchemeSelector]: rootCss
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
-        styles: defaultColorSchemeStyleSheet
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
-        styles: otherColorSchemesStyleSheet
+    let shouldGenerateStyleSheet = true;
+    if (disableStyleSheetGeneration || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {
+      shouldGenerateStyleSheet = false;
+    }
+    const element = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [shouldGenerateStyleSheet && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
+          styles: {
+            [colorSchemeSelector]: rootCss
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
+          styles: defaultColorSchemeStyleSheet
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
+          styles: otherColorSchemesStyleSheet
+        })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
         theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
       })]
     });
+    if (nested) {
+      return element;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorSchemeContext.Provider, {
+      value: contextValue,
+      children: element
+    });
   }
   process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
     /**
@@ -271,6 +295,16 @@ function createCssVarsProvider(options) {
      * 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`.
+     */
+    disableNestedContext: _propTypes.default.bool,
+    /**
+     * If `true`, the style sheet won't be generated.
+     *
+     * This is useful for controlling nested CssVarsProvider behavior.
+     */
+    disableStyleSheetGeneration: _propTypes.default.bool,
     /**
      * Disable CSS transitions when switching between modes or color schemes
      */