@mui/system 5.10.9 → 5.10.10

package/cssVars/cssVarsParser.js

@@ -131,7 +131,7 @@ function cssVarsParser(theme, options) {
   const parsedTheme = {};
   walkObjectDeep(theme, (keys, value, arrayKeys) => {
     if (typeof value === 'string' || typeof value === 'number') {
-      if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, value)) {
+      if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
         // only create css & var if `shouldSkipGeneratingVar` return false
         const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
         Object.assign(css, {

package/cssVars/getInitColorSchemeScript.d.ts

@@ -1,42 +1,42 @@
-/// <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 {
-    /**
-     * The mode to be used for the first visit
-     * @default 'light'
-     */
-    defaultMode?: 'light' | 'dark' | 'system';
-    /**
-     * The default color scheme to be used on the light mode
-     * @default 'light'
-     */
-    defaultLightColorScheme?: string;
-    /**
-     * The default color scheme to be used on the dark mode
-     * * @default 'dark'
-     */
-    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 {
+    /**
+     * The mode to be used for the first visit
+     * @default 'light'
+     */
+    defaultMode?: 'light' | 'dark' | 'system';
+    /**
+     * The default color scheme to be used on the light mode
+     * @default 'light'
+     */
+    defaultLightColorScheme?: string;
+    /**
+     * The default color scheme to be used on the dark mode
+     * * @default 'dark'
+     */
+    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,3 +1,3 @@
-export { default } from './createCssVarsProvider';
-export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue, } from './createCssVarsProvider';
-export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
+export { default } from './createCssVarsProvider';
+export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue, } from './createCssVarsProvider';
+export { default as getInitColorSchemeScript } from './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/cssVarsParser.js

@@ -117,7 +117,7 @@ export default function cssVarsParser(theme, options) {
   const parsedTheme = {};
   walkObjectDeep(theme, (keys, value, arrayKeys) => {
     if (typeof value === 'string' || typeof value === 'number') {
-      if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, value)) {
+      if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
         // only create css & var if `shouldSkipGeneratingVar` return false
         const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
         Object.assign(css, {

package/esm/palette.js

@@ -1,17 +1,29 @@
 import style from './style';
 import compose from './compose';
+
+function transform(value, userValue) {
+  if (userValue === 'grey') {
+    return userValue;
+  }
+
+  return value;
+}
+
 export const color = style({
   prop: 'color',
-  themeKey: 'palette'
+  themeKey: 'palette',
+  transform
 });
 export const bgcolor = style({
   prop: 'bgcolor',
   cssProperty: 'backgroundColor',
-  themeKey: 'palette'
+  themeKey: 'palette',
+  transform
 });
 export const backgroundColor = style({
   prop: 'backgroundColor',
-  themeKey: 'palette'
+  themeKey: 'palette',
+  transform
 });
 const palette = compose(color, bgcolor, backgroundColor);
 export default palette;

package/esm/style.js

@@ -36,7 +36,7 @@ function getValue(themeMapping, transform, propValueFinal, userValue = propValue
   }
 
   if (transform) {
-    value = transform(value);
+    value = transform(value, userValue);
   }
 
   return value;

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.9
+/** @license MUI v5.10.10
  *
  * 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/cssVarsParser.js

@@ -132,7 +132,7 @@ export default function cssVarsParser(theme, options) {
   var parsedTheme = {};
   walkObjectDeep(theme, function (keys, value, arrayKeys) {
     if (typeof value === 'string' || typeof value === 'number') {
-      if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, value)) {
+      if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
         // only create css & var if `shouldSkipGeneratingVar` return false
         var cssVar = "--".concat(prefix ? "".concat(prefix, "-") : '').concat(keys.join('-'));
 

package/legacy/index.js

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

package/legacy/palette.js

@@ -1,17 +1,29 @@
 import style from './style';
 import compose from './compose';
+
+function transform(value, userValue) {
+  if (userValue === 'grey') {
+    return userValue;
+  }
+
+  return value;
+}
+
 export var color = style({
   prop: 'color',
-  themeKey: 'palette'
+  themeKey: 'palette',
+  transform: transform
 });
 export var bgcolor = style({
   prop: 'bgcolor',
   cssProperty: 'backgroundColor',
-  themeKey: 'palette'
+  themeKey: 'palette',
+  transform: transform
 });
 export var backgroundColor = style({
   prop: 'backgroundColor',
-  themeKey: 'palette'
+  themeKey: 'palette',
+  transform: transform
 });
 var palette = compose(color, bgcolor, backgroundColor);
 export default palette;

package/legacy/style.js

@@ -42,7 +42,7 @@ function getValue(themeMapping, transform, propValueFinal) {
   }
 
   if (transform) {
-    value = transform(value);
+    value = transform(value, userValue);
   }
 
   return value;

package/modern/cssVars/cssVarsParser.js

@@ -117,7 +117,7 @@ export default function cssVarsParser(theme, options) {
   const parsedTheme = {};
   walkObjectDeep(theme, (keys, value, arrayKeys) => {
     if (typeof value === 'string' || typeof value === 'number') {
-      if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, value)) {
+      if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
         // only create css & var if `shouldSkipGeneratingVar` return false
         const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
         Object.assign(css, {

package/modern/index.js

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

package/modern/palette.js

@@ -1,17 +1,29 @@
 import style from './style';
 import compose from './compose';
+
+function transform(value, userValue) {
+  if (userValue === 'grey') {
+    return userValue;
+  }
+
+  return value;
+}
+
 export const color = style({
   prop: 'color',
-  themeKey: 'palette'
+  themeKey: 'palette',
+  transform
 });
 export const bgcolor = style({
   prop: 'bgcolor',
   cssProperty: 'backgroundColor',
-  themeKey: 'palette'
+  themeKey: 'palette',
+  transform
 });
 export const backgroundColor = style({
   prop: 'backgroundColor',
-  themeKey: 'palette'
+  themeKey: 'palette',
+  transform
 });
 const palette = compose(color, bgcolor, backgroundColor);
 export default palette;

package/modern/style.js

@@ -36,7 +36,7 @@ function getValue(themeMapping, transform, propValueFinal, userValue = propValue
   }
 
   if (transform) {
-    value = transform(value);
+    value = transform(value, userValue);
   }
 
   return value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.10.9",
+  "version": "5.10.10",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",

package/palette.js

@@ -11,20 +11,31 @@ var _style = _interopRequireDefault(require("./style"));
 
 var _compose = _interopRequireDefault(require("./compose"));
 
+function transform(value, userValue) {
+  if (userValue === 'grey') {
+    return userValue;
+  }
+
+  return value;
+}
+
 const color = (0, _style.default)({
   prop: 'color',
-  themeKey: 'palette'
+  themeKey: 'palette',
+  transform
 });
 exports.color = color;
 const bgcolor = (0, _style.default)({
   prop: 'bgcolor',
   cssProperty: 'backgroundColor',
-  themeKey: 'palette'
+  themeKey: 'palette',
+  transform
 });
 exports.bgcolor = bgcolor;
 const backgroundColor = (0, _style.default)({
   prop: 'backgroundColor',
-  themeKey: 'palette'
+  themeKey: 'palette',
+  transform
 });
 exports.backgroundColor = backgroundColor;
 const palette = (0, _compose.default)(color, bgcolor, backgroundColor);

package/style.d.ts

@@ -8,7 +8,10 @@ export interface StyleOptions<PropKey> {
    * dot access in `Theme`
    */
   themeKey?: string;
-  transform?: (cssValue: unknown) => number | string | React.CSSProperties | CSSObject;
+  transform?: (
+    cssValue: unknown,
+    userValue: unknown,
+  ) => number | string | React.CSSProperties | CSSObject;
 }
 export function style<PropKey extends string, Theme extends object>(
   options: StyleOptions<PropKey>,

package/style.js

@@ -49,7 +49,7 @@ function getValue(themeMapping, transform, propValueFinal, userValue = propValue
   }
 
   if (transform) {
-    value = transform(value);
+    value = transform(value, userValue);
   }
 
   return value;

package/styleFunctionSx/styleFunctionSx.spec.d.ts

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