@mui/system 5.8.6 → 5.8.7

package/cssVars/cssVarsParser.js

@@ -102,13 +102,9 @@ const getCssValue = (keys, value) => {
  * @param {Object} theme
  * @param {{
  *  prefix?: string,
- *  basePrefix?: string,
  *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
  * }} options.
- *  `basePrefix`: defined by design system.
- *  `prefix`: defined by application
- *
- *   the CSS variable value will be adjusted based on the provided `basePrefix` & `prefix` which can be found in `parsedTheme`.
+ *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
  *
  * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
  *
@@ -119,16 +115,15 @@ const getCssValue = (keys, value) => {
  *   palette: { primary: { 500: 'var(--color)' } }
  * }, { prefix: 'foo' })
  *
- * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--foo-color)' }
- * console.log(vars) // { fontSize: '--foo-fontSize', lineHeight: '--foo-lineHeight', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
- * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--foo-color)' } } }
+ * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
+ * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+ * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
  */
 
 
 function cssVarsParser(theme, options) {
   const {
     prefix,
-    basePrefix = '',
     shouldSkipGeneratingVar
   } = options || {};
   const css = {};
@@ -136,16 +131,6 @@ function cssVarsParser(theme, options) {
   const parsedTheme = {};
   walkObjectDeep(theme, (keys, value, arrayKeys) => {
     if (typeof value === 'string' || typeof value === 'number') {
-      if (typeof value === 'string' && value.match(/var\(\s*--/)) {
-        // for CSS variable, apply prefix or remove basePrefix from the variable
-        if (!basePrefix && prefix) {
-          value = value.replace(/var\(\s*--/g, `var(--${prefix}-`);
-        } else {
-          value = prefix ? value.replace(new RegExp(`var\\(\\s*--${basePrefix}`, 'g'), `var(--${prefix}`) // removing spaces
-          : value.replace(new RegExp(`var\\(\\s*--${basePrefix}-`, 'g'), 'var(--');
-        }
-      }
-
       if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, value)) {
         // only create css & var if `shouldSkipGeneratingVar` return false
         const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;

package/cssVars/getInitColorSchemeScript.d.ts

@@ -1,45 +1,45 @@
-/// <reference types="react" />
-export declare const DEFAULT_MODE_STORAGE_KEY = "mode";
-export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "color-scheme";
-export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
-export interface GetInitColorSchemeScriptOptions {
-    /**
-     * Indicate to the browser which color scheme is used (light or dark) for rendering built-in UI
-     * @default true
-     */
-    enableColorScheme?: boolean;
-    /**
-     * If `true`, the initial color scheme is set to the user's prefers-color-scheme mode
-     * @default false
-     */
-    enableSystem?: boolean;
-    /**
-     * The default color scheme to be used on the light mode
-     */
-    defaultLightColorScheme?: string;
-    /**
-     * The default color scheme to be used on the dark mode
-     */
-    defaultDarkColorScheme?: string;
-    /**
-     * The node (provided as string) used to attach the color-scheme attribute
-     * @default 'document.documentElement'
-     */
-    colorSchemeNode?: string;
-    /**
-     * localStorage key used to store `mode`
-     * @default 'mode'
-     */
-    modeStorageKey?: string;
-    /**
-     * localStorage key used to store `colorScheme`
-     * @default 'color-scheme'
-     */
-    colorSchemeStorageKey?: string;
-    /**
-     * DOM attribute for applying color scheme
-     * @default 'data-color-scheme'
-     */
-    attribute?: string;
-}
-export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions): JSX.Element;
+/// <reference types="react" />
+export declare const DEFAULT_MODE_STORAGE_KEY = "mode";
+export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "color-scheme";
+export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
+export interface GetInitColorSchemeScriptOptions {
+    /**
+     * Indicate to the browser which color scheme is used (light or dark) for rendering built-in UI
+     * @default true
+     */
+    enableColorScheme?: boolean;
+    /**
+     * If `true`, the initial color scheme is set to the user's prefers-color-scheme mode
+     * @default false
+     */
+    enableSystem?: boolean;
+    /**
+     * The default color scheme to be used on the light mode
+     */
+    defaultLightColorScheme?: string;
+    /**
+     * The default color scheme to be used on the dark mode
+     */
+    defaultDarkColorScheme?: string;
+    /**
+     * The node (provided as string) used to attach the color-scheme attribute
+     * @default 'document.documentElement'
+     */
+    colorSchemeNode?: string;
+    /**
+     * localStorage key used to store `mode`
+     * @default 'mode'
+     */
+    modeStorageKey?: string;
+    /**
+     * localStorage key used to store `colorScheme`
+     * @default 'color-scheme'
+     */
+    colorSchemeStorageKey?: string;
+    /**
+     * DOM attribute for applying color scheme
+     * @default 'data-color-scheme'
+     */
+    attribute?: string;
+}
+export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions): JSX.Element;

package/cssVars/index.d.ts

@@ -1,2 +1,3 @@
-export { default } from './createCssVarsProvider';
-export type { CreateCssVarsProviderResult } from './createCssVarsProvider';
+export { default } from './createCssVarsProvider';
+export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue, } from './createCssVarsProvider';
+export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';

package/cssVars/index.js

@@ -11,5 +11,13 @@ Object.defineProperty(exports, "default", {
     return _createCssVarsProvider.default;
   }
 });
+Object.defineProperty(exports, "getInitColorSchemeScript", {
+  enumerable: true,
+  get: function () {
+    return _getInitColorSchemeScript.default;
+  }
+});
+
+var _createCssVarsProvider = _interopRequireDefault(require("./createCssVarsProvider"));
 
-var _createCssVarsProvider = _interopRequireDefault(require("./createCssVarsProvider"));
+var _getInitColorSchemeScript = _interopRequireDefault(require("./getInitColorSchemeScript"));

package/cssVars/useCurrentColorScheme.d.ts

@@ -1,53 +1,53 @@
-export declare type Mode = 'light' | 'dark' | 'system';
-export declare type SystemMode = Exclude<Mode, 'system'>;
-export interface State<SupportedColorScheme extends string> {
-    /**
-     * User selected mode.
-     * Note: on the server, mode is always undefined
-     */
-    mode: Mode | undefined;
-    /**
-     * Only valid if `mode: 'system'`, either 'light' | 'dark'.
-     */
-    systemMode: SystemMode | undefined;
-    /**
-     * The color scheme for the light mode.
-     */
-    lightColorScheme: SupportedColorScheme;
-    /**
-     * The color scheme for the dark mode.
-     */
-    darkColorScheme: SupportedColorScheme;
-}
-export declare type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
-    /**
-     * The current application color scheme. It is always `undefined` on the server.
-     */
-    colorScheme: SupportedColorScheme | undefined;
-    /**
-     * `mode` is saved to internal state and localStorage
-     * If `mode` is null, it will be reset to the defaultMode
-     */
-    setMode: (mode: Mode | null) => void;
-    /**
-     * `colorScheme` is saved to internal state and localStorage
-     * If `colorScheme` is null, it will be reset to the defaultColorScheme (light | dark)
-     */
-    setColorScheme: (colorScheme: SupportedColorScheme | Partial<{
-        light: SupportedColorScheme | null;
-        dark: SupportedColorScheme | null;
-    }> | null) => void;
-};
-export declare function getSystemMode(mode: undefined | string): SystemMode | undefined;
-export declare function getColorScheme<SupportedColorScheme extends string>(state: State<SupportedColorScheme>): SupportedColorScheme | undefined;
-interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
-    defaultLightColorScheme: SupportedColorScheme;
-    defaultDarkColorScheme: SupportedColorScheme;
-    supportedColorSchemes: Array<SupportedColorScheme>;
-    defaultMode?: Mode;
-    modeStorageKey?: string;
-    colorSchemeStorageKey?: string;
-    storageWindow?: Window | null;
-}
-export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;
-export {};
+export declare type Mode = 'light' | 'dark' | 'system';
+export declare type SystemMode = Exclude<Mode, 'system'>;
+export interface State<SupportedColorScheme extends string> {
+    /**
+     * User selected mode.
+     * Note: on the server, mode is always undefined
+     */
+    mode: Mode | undefined;
+    /**
+     * Only valid if `mode: 'system'`, either 'light' | 'dark'.
+     */
+    systemMode: SystemMode | undefined;
+    /**
+     * The color scheme for the light mode.
+     */
+    lightColorScheme: SupportedColorScheme;
+    /**
+     * The color scheme for the dark mode.
+     */
+    darkColorScheme: SupportedColorScheme;
+}
+export declare type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
+    /**
+     * The current application color scheme. It is always `undefined` on the server.
+     */
+    colorScheme: SupportedColorScheme | undefined;
+    /**
+     * `mode` is saved to internal state and localStorage
+     * If `mode` is null, it will be reset to the defaultMode
+     */
+    setMode: (mode: Mode | null) => void;
+    /**
+     * `colorScheme` is saved to internal state and localStorage
+     * If `colorScheme` is null, it will be reset to the defaultColorScheme (light | dark)
+     */
+    setColorScheme: (colorScheme: SupportedColorScheme | Partial<{
+        light: SupportedColorScheme | null;
+        dark: SupportedColorScheme | null;
+    }> | null) => void;
+};
+export declare function getSystemMode(mode: undefined | string): SystemMode | undefined;
+export declare function getColorScheme<SupportedColorScheme extends string>(state: State<SupportedColorScheme>): SupportedColorScheme | undefined;
+interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
+    defaultLightColorScheme: SupportedColorScheme;
+    defaultDarkColorScheme: SupportedColorScheme;
+    supportedColorSchemes: Array<SupportedColorScheme>;
+    defaultMode?: Mode;
+    modeStorageKey?: string;
+    colorSchemeStorageKey?: string;
+    storageWindow?: Window | null;
+}
+export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;
+export {};

package/esm/cssVars/createCssVarsProvider.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
-const _excluded = ["colorSchemes", "components"];
+const _excluded = ["colorSchemes", "components", "cssVarPrefix"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
@@ -10,7 +10,6 @@ import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
-import createGetCssVar from './createGetCssVar';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { 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}';
@@ -24,8 +23,7 @@ export default function createCssVarsProvider(options) {
     defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
     enableColorScheme: designSystemEnableColorScheme = true,
-    prefix: designSystemPrefix = '',
-    shouldSkipGeneratingVar,
+    shouldSkipGeneratingVar: designSystemShouldSkipGeneratingVar,
     resolveTheme
   } = options;
 
@@ -48,7 +46,6 @@ export default function createCssVarsProvider(options) {
   function CssVarsProvider({
     children,
     theme: themeProp = defaultTheme,
-    prefix = designSystemPrefix,
     modeStorageKey = defaultModeStorageKey,
     colorSchemeStorageKey = defaultColorSchemeStorageKey,
     attribute = defaultAttribute,
@@ -59,13 +56,15 @@ export default function createCssVarsProvider(options) {
     storageWindow = typeof window === 'undefined' ? undefined : window,
     documentNode = typeof document === 'undefined' ? undefined : document,
     colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
-    colorSchemeSelector = ':root'
+    colorSchemeSelector = ':root',
+    shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar
   }) {
     const hasMounted = React.useRef(false);
 
     const {
       colorSchemes = {},
-      components = {}
+      components = {},
+      cssVarPrefix
     } = themeProp,
           restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded);
 
@@ -110,16 +109,14 @@ export default function createCssVarsProvider(options) {
       vars: rootVars,
       parsedTheme
     } = cssVarsParser(theme, {
-      prefix,
-      basePrefix: designSystemPrefix,
+      prefix: cssVarPrefix,
       shouldSkipGeneratingVar
     });
     theme = _extends({}, parsedTheme, {
       components,
       colorSchemes,
-      prefix,
+      cssVarPrefix,
       vars: rootVars,
-      getCssVar: createGetCssVar(prefix),
       getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
     });
     const defaultColorSchemeStyleSheet = {};
@@ -130,8 +127,7 @@ export default function createCssVarsProvider(options) {
         vars,
         parsedTheme: parsedScheme
       } = cssVarsParser(scheme, {
-        prefix,
-        basePrefix: designSystemPrefix,
+        prefix: cssVarPrefix,
         shouldSkipGeneratingVar
       });
       theme.vars = deepmerge(theme.vars, vars);
@@ -295,9 +291,9 @@ export default function createCssVarsProvider(options) {
     modeStorageKey: PropTypes.string,
 
     /**
-     * CSS variable prefix.
+     * A function to determine if the key, value should be attached as CSS Variable
      */
-    prefix: PropTypes.string,
+    shouldSkipGeneratingVar: PropTypes.func,
 
     /**
      * The window that attaches the 'storage' event listener

package/esm/cssVars/createGetCssVar.js

@@ -18,8 +18,8 @@ export default function createGetCssVar(prefix = '') {
   } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
 
 
-  const getCssVar = (field, ...vars) => {
-    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
+  const getCssVar = (field, ...fallbacks) => {
+    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...fallbacks)})`;
   };
 
   return getCssVar;

package/esm/cssVars/cssVarsParser.js

@@ -88,13 +88,9 @@ const getCssValue = (keys, value) => {
  * @param {Object} theme
  * @param {{
  *  prefix?: string,
- *  basePrefix?: string,
  *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
  * }} options.
- *  `basePrefix`: defined by design system.
- *  `prefix`: defined by application
- *
- *   the CSS variable value will be adjusted based on the provided `basePrefix` & `prefix` which can be found in `parsedTheme`.
+ *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
  *
  * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
  *
@@ -105,16 +101,15 @@ const getCssValue = (keys, value) => {
  *   palette: { primary: { 500: 'var(--color)' } }
  * }, { prefix: 'foo' })
  *
- * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--foo-color)' }
- * console.log(vars) // { fontSize: '--foo-fontSize', lineHeight: '--foo-lineHeight', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
- * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--foo-color)' } } }
+ * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
+ * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+ * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
  */
 
 
 export default function cssVarsParser(theme, options) {
   const {
     prefix,
-    basePrefix = '',
     shouldSkipGeneratingVar
   } = options || {};
   const css = {};
@@ -122,16 +117,6 @@ export default function cssVarsParser(theme, options) {
   const parsedTheme = {};
   walkObjectDeep(theme, (keys, value, arrayKeys) => {
     if (typeof value === 'string' || typeof value === 'number') {
-      if (typeof value === 'string' && value.match(/var\(\s*--/)) {
-        // for CSS variable, apply prefix or remove basePrefix from the variable
-        if (!basePrefix && prefix) {
-          value = value.replace(/var\(\s*--/g, `var(--${prefix}-`);
-        } else {
-          value = prefix ? value.replace(new RegExp(`var\\(\\s*--${basePrefix}`, 'g'), `var(--${prefix}`) // removing spaces
-          : value.replace(new RegExp(`var\\(\\s*--${basePrefix}-`, 'g'), 'var(--');
-        }
-      }
-
       if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, value)) {
         // only create css & var if `shouldSkipGeneratingVar` return false
         const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;

package/esm/cssVars/index.js

@@ -1 +1,2 @@
-export { default } from './createCssVarsProvider';
+export { default } from './createCssVarsProvider';
+export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.6
+/** @license MUI v5.8.7
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.spec.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/legacy/cssVars/createCssVarsProvider.js

@@ -12,7 +12,6 @@ import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
-import createGetCssVar from './createGetCssVar';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
@@ -32,9 +31,7 @@ export default function createCssVarsProvider(options) {
       designSystemTransitionOnChange = _options$disableTrans === void 0 ? false : _options$disableTrans,
       _options$enableColorS = options.enableColorScheme,
       designSystemEnableColorScheme = _options$enableColorS === void 0 ? true : _options$enableColorS,
-      _options$prefix = options.prefix,
-      designSystemPrefix = _options$prefix === void 0 ? '' : _options$prefix,
-      shouldSkipGeneratingVar = options.shouldSkipGeneratingVar,
+      designSystemShouldSkipGeneratingVar = options.shouldSkipGeneratingVar,
       resolveTheme = options.resolveTheme;
 
   if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
@@ -57,8 +54,6 @@ export default function createCssVarsProvider(options) {
     var children = _ref.children,
         _ref$theme = _ref.theme,
         themeProp = _ref$theme === void 0 ? defaultTheme : _ref$theme,
-        _ref$prefix = _ref.prefix,
-        prefix = _ref$prefix === void 0 ? designSystemPrefix : _ref$prefix,
         _ref$modeStorageKey = _ref.modeStorageKey,
         modeStorageKey = _ref$modeStorageKey === void 0 ? defaultModeStorageKey : _ref$modeStorageKey,
         _ref$colorSchemeStora = _ref.colorSchemeStorageKey,
@@ -80,14 +75,17 @@ export default function createCssVarsProvider(options) {
         _ref$colorSchemeNode = _ref.colorSchemeNode,
         colorSchemeNode = _ref$colorSchemeNode === void 0 ? typeof document === 'undefined' ? undefined : document.documentElement : _ref$colorSchemeNode,
         _ref$colorSchemeSelec = _ref.colorSchemeSelector,
-        colorSchemeSelector = _ref$colorSchemeSelec === void 0 ? ':root' : _ref$colorSchemeSelec;
+        colorSchemeSelector = _ref$colorSchemeSelec === void 0 ? ':root' : _ref$colorSchemeSelec,
+        _ref$shouldSkipGenera = _ref.shouldSkipGeneratingVar,
+        shouldSkipGeneratingVar = _ref$shouldSkipGenera === void 0 ? designSystemShouldSkipGeneratingVar : _ref$shouldSkipGenera;
     var hasMounted = React.useRef(false);
 
     var _themeProp$colorSchem = themeProp.colorSchemes,
         colorSchemes = _themeProp$colorSchem === void 0 ? {} : _themeProp$colorSchem,
         _themeProp$components = themeProp.components,
         components = _themeProp$components === void 0 ? {} : _themeProp$components,
-        restThemeProp = _objectWithoutProperties(themeProp, ["colorSchemes", "components"]);
+        cssVarPrefix = themeProp.cssVarPrefix,
+        restThemeProp = _objectWithoutProperties(themeProp, ["colorSchemes", "components", "cssVarPrefix"]);
 
     var allColorSchemes = Object.keys(colorSchemes);
     var defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
@@ -127,8 +125,7 @@ export default function createCssVarsProvider(options) {
     var theme = restThemeProp;
 
     var _cssVarsParser = cssVarsParser(theme, {
-      prefix: prefix,
-      basePrefix: designSystemPrefix,
+      prefix: cssVarPrefix,
       shouldSkipGeneratingVar: shouldSkipGeneratingVar
     }),
         rootCss = _cssVarsParser.css,
@@ -138,9 +135,8 @@ export default function createCssVarsProvider(options) {
     theme = _extends({}, parsedTheme, {
       components: components,
       colorSchemes: colorSchemes,
-      prefix: prefix,
+      cssVarPrefix: cssVarPrefix,
       vars: rootVars,
-      getCssVar: createGetCssVar(prefix),
       getColorSchemeSelector: function getColorSchemeSelector(targetColorScheme) {
         return "[".concat(attribute, "=\"").concat(targetColorScheme, "\"] &");
       }
@@ -153,8 +149,7 @@ export default function createCssVarsProvider(options) {
           scheme = _ref3[1];
 
       var _cssVarsParser2 = cssVarsParser(scheme, {
-        prefix: prefix,
-        basePrefix: designSystemPrefix,
+        prefix: cssVarPrefix,
         shouldSkipGeneratingVar: shouldSkipGeneratingVar
       }),
           css = _cssVarsParser2.css,
@@ -322,9 +317,9 @@ export default function createCssVarsProvider(options) {
     modeStorageKey: PropTypes.string,
 
     /**
-     * CSS variable prefix.
+     * A function to determine if the key, value should be attached as CSS Variable
      */
-    prefix: PropTypes.string,
+    shouldSkipGeneratingVar: PropTypes.func,
 
     /**
      * The window that attaches the 'storage' event listener

package/legacy/cssVars/createGetCssVar.js

@@ -27,11 +27,11 @@ export default function createGetCssVar() {
 
 
   var getCssVar = function getCssVar(field) {
-    for (var _len2 = arguments.length, vars = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      vars[_key2 - 1] = arguments[_key2];
+    for (var _len2 = arguments.length, fallbacks = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      fallbacks[_key2 - 1] = arguments[_key2];
     }
 
-    return "var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(field).concat(appendVar.apply(void 0, vars), ")");
+    return "var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(field).concat(appendVar.apply(void 0, fallbacks), ")");
   };
 
   return getCssVar;

package/legacy/cssVars/cssVarsParser.js

@@ -103,13 +103,9 @@ var getCssValue = function getCssValue(keys, value) {
  * @param {Object} theme
  * @param {{
  *  prefix?: string,
- *  basePrefix?: string,
  *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
  * }} options.
- *  `basePrefix`: defined by design system.
- *  `prefix`: defined by application
- *
- *   the CSS variable value will be adjusted based on the provided `basePrefix` & `prefix` which can be found in `parsedTheme`.
+ *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
  *
  * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
  *
@@ -120,17 +116,15 @@ var getCssValue = function getCssValue(keys, value) {
  *   palette: { primary: { 500: 'var(--color)' } }
  * }, { prefix: 'foo' })
  *
- * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--foo-color)' }
- * console.log(vars) // { fontSize: '--foo-fontSize', lineHeight: '--foo-lineHeight', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
- * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--foo-color)' } } }
+ * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
+ * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+ * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
  */
 
 
 export default function cssVarsParser(theme, options) {
   var _ref3 = options || {},
       prefix = _ref3.prefix,
-      _ref3$basePrefix = _ref3.basePrefix,
-      basePrefix = _ref3$basePrefix === void 0 ? '' : _ref3$basePrefix,
       shouldSkipGeneratingVar = _ref3.shouldSkipGeneratingVar;
 
   var css = {};
@@ -138,16 +132,6 @@ export default function cssVarsParser(theme, options) {
   var parsedTheme = {};
   walkObjectDeep(theme, function (keys, value, arrayKeys) {
     if (typeof value === 'string' || typeof value === 'number') {
-      if (typeof value === 'string' && value.match(/var\(\s*--/)) {
-        // for CSS variable, apply prefix or remove basePrefix from the variable
-        if (!basePrefix && prefix) {
-          value = value.replace(/var\(\s*--/g, "var(--".concat(prefix, "-"));
-        } else {
-          value = prefix ? value.replace(new RegExp("var\\(\\s*--".concat(basePrefix), 'g'), "var(--".concat(prefix)) // removing spaces
-          : value.replace(new RegExp("var\\(\\s*--".concat(basePrefix, "-"), 'g'), 'var(--');
-        }
-      }
-
       if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, value)) {
         // only create css & var if `shouldSkipGeneratingVar` return false
         var cssVar = "--".concat(prefix ? "".concat(prefix, "-") : '').concat(keys.join('-'));

package/legacy/cssVars/index.js

@@ -1 +1,2 @@
-export { default } from './createCssVarsProvider';
+export { default } from './createCssVarsProvider';
+export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.6
+/** @license MUI v5.8.7
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.