@tw1934/mui-material 7.3.7

package/styles/createThemeWithVars.d.ts

@@ -0,0 +1,71 @@
+import { ThemeOptions, Theme } from "./createThemeNoVars.js";
+import { Components } from "./components.js";
+import { DefaultColorScheme, ColorSchemeOverrides, ExtendedColorScheme, SupportedColorScheme, Opacity, Overlays, PaletteBackgroundChannel, PaletteCommonChannel, PaletteColorChannel, PaletteActionChannel, PaletteTextChannel, PaletteAlert, PaletteAppBar, PaletteAvatar, PaletteButton, PaletteChip, PaletteFilledInput, PaletteLinearProgress, PaletteSkeleton, PaletteSlider, PaletteSnackbarContent, PaletteSpeedDialAction, PaletteStepConnector, PaletteStepContent, PaletteSwitch, PaletteTableCell, PaletteTooltip, ColorSystemOptions, CssVarsPalette, ColorSystem, ThemeVars, ThemeCssVarOverrides, ThemeCssVar, CssVarsTheme, Shape, ShapeOptions } from "./createThemeFoundation.js";
+
+// Re-export all types from foundation to maintain backward compatibility
+export type { DefaultColorScheme, ColorSchemeOverrides, ExtendedColorScheme, SupportedColorScheme, Opacity, Overlays, PaletteBackgroundChannel, PaletteCommonChannel, PaletteColorChannel, PaletteActionChannel, PaletteTextChannel, PaletteAlert, PaletteAppBar, PaletteAvatar, PaletteButton, PaletteChip, PaletteFilledInput, PaletteLinearProgress, PaletteSkeleton, PaletteSlider, PaletteSnackbarContent, PaletteSpeedDialAction, PaletteStepConnector, PaletteStepContent, PaletteSwitch, PaletteTableCell, PaletteTooltip, ColorSystemOptions, CssVarsPalette, ColorSystem, ThemeVars, ThemeCssVarOverrides, ThemeCssVar, CssVarsTheme, Shape, ShapeOptions };
+export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'components'> {
+  /**
+   * The strategy to generate CSS variables
+   *
+   * @example 'media'
+   * Generate CSS variables using [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme)
+   *
+   * @example '.mode-%s'
+   * Generate CSS variables within a class .mode-light, .mode-dark
+   *
+   * @example '[data-mode-%s]'
+   * Generate CSS variables within a data attribute [data-mode-light], [data-mode-dark]
+   */
+  colorSchemeSelector?: 'media' | 'class' | 'data' | string;
+  /**
+   * Prefix of the generated CSS variables
+   * @default 'mui'
+   */
+  cssVarPrefix?: string;
+  /**
+   * If `true`, the CSS color-scheme will not be set.
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme
+   * @default false
+   */
+  disableCssColorScheme?: boolean;
+  /**
+   * If `true`, the CSS relative color will be used.
+   */
+  nativeColor?: boolean;
+  /**
+   * The selector to generate the global CSS variables (non-color-scheme related)
+   * @default ':root'
+   * @example ':host' // (for shadow DOM)
+   * @see https://mui.com/material-ui/customization/shadow-dom/#3-css-theme-variables-optional
+   */
+  rootSelector?: 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;
+  /**
+   * @default 'light'
+   */
+  defaultColorScheme?: SupportedColorScheme;
+  /**
+   * Theme components
+   */
+  components?: Components<Omit<Theme, 'components' | 'palette'> & CssVarsTheme>;
+  /**
+   * Color schemes configuration
+   */
+  colorSchemes?: Partial<Record<DefaultColorScheme, boolean | ColorSystemOptions>> & (ExtendedColorScheme extends string ? Record<ExtendedColorScheme, ColorSystemOptions> : {});
+}
+
+/**
+ * Generate a theme base on the options received.
+ * @param options Takes an incomplete theme object and adds the missing parts.
+ * @param args Deep merge the arguments with the about to be returned theme.
+ * @returns A complete, ready-to-use theme object.
+ */
+export default function createThemeWithVars(options?: CssVarsThemeOptions, ...args: object[]): Omit<Theme, 'applyStyles'> & CssVarsTheme;

package/styles/createThemeWithVars.js

@@ -0,0 +1,425 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createGetCssVar = void 0;
+exports.default = createThemeWithVars;
+var _formatMuiErrorMessage = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
+var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
+var _system = require("@mui/system");
+var _spacing = require("@mui/system/spacing");
+var _cssVars = require("@mui/system/cssVars");
+var _styleFunctionSx = _interopRequireWildcard(require("@mui/system/styleFunctionSx"));
+var _colorManipulator = require("@mui/system/colorManipulator");
+var _createThemeNoVars = _interopRequireDefault(require("./createThemeNoVars"));
+var _createColorScheme = _interopRequireWildcard(require("./createColorScheme"));
+var _shouldSkipGeneratingVar = _interopRequireDefault(require("./shouldSkipGeneratingVar"));
+var _createGetSelector = _interopRequireDefault(require("./createGetSelector"));
+var _stringifyTheme = require("./stringifyTheme");
+var _createPalette = require("./createPalette");
+function assignNode(obj, keys) {
+  keys.forEach(k => {
+    if (!obj[k]) {
+      obj[k] = {};
+    }
+  });
+}
+function setColor(obj, key, defaultValue) {
+  if (!obj[key] && defaultValue) {
+    obj[key] = defaultValue;
+  }
+}
+function toRgb(color) {
+  if (typeof color !== 'string' || !color.startsWith('hsl')) {
+    return color;
+  }
+  return (0, _colorManipulator.hslToRgb)(color);
+}
+function setColorChannel(obj, key) {
+  if (!(`${key}Channel` in obj)) {
+    // custom channel token is not provided, generate one.
+    // if channel token can't be generated, show a warning.
+    obj[`${key}Channel`] = (0, _colorManipulator.private_safeColorChannel)(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, for example "12 12 12") or undefined if you want to remove the channel token.`);
+  }
+}
+function getSpacingVal(spacingInput) {
+  if (typeof spacingInput === 'number') {
+    return `${spacingInput}px`;
+  }
+  if (typeof spacingInput === 'string' || typeof spacingInput === 'function' || Array.isArray(spacingInput)) {
+    return spacingInput;
+  }
+  return '8px';
+}
+const silent = fn => {
+  try {
+    return fn();
+  } catch (error) {
+    // ignore error
+  }
+  return undefined;
+};
+const createGetCssVar = (cssVarPrefix = 'mui') => (0, _system.unstable_createGetCssVar)(cssVarPrefix);
+exports.createGetCssVar = createGetCssVar;
+function attachColorScheme(colorSpace, colorSchemes, scheme, restTheme, colorScheme) {
+  if (!scheme) {
+    return undefined;
+  }
+  scheme = scheme === true ? {} : scheme;
+  const mode = colorScheme === 'dark' ? 'dark' : 'light';
+  if (!restTheme) {
+    colorSchemes[colorScheme] = (0, _createColorScheme.default)({
+      ...scheme,
+      palette: {
+        mode,
+        ...scheme?.palette
+      },
+      colorSpace
+    });
+    return undefined;
+  }
+  const {
+    palette,
+    ...muiTheme
+  } = (0, _createThemeNoVars.default)({
+    ...restTheme,
+    palette: {
+      mode,
+      ...scheme?.palette
+    },
+    colorSpace
+  });
+  colorSchemes[colorScheme] = {
+    ...scheme,
+    palette,
+    opacity: {
+      ...(0, _createColorScheme.getOpacity)(mode),
+      ...scheme?.opacity
+    },
+    overlays: scheme?.overlays || (0, _createColorScheme.getOverlays)(mode)
+  };
+  return muiTheme;
+}
+
+/**
+ * A default `createThemeWithVars` comes with a single color scheme, either `light` or `dark` based on the `defaultColorScheme`.
+ * This is better suited for apps that only need a single color scheme.
+ *
+ * To enable built-in `light` and `dark` color schemes, either:
+ * 1. provide a `colorSchemeSelector` to define how the color schemes will change.
+ * 2. provide `colorSchemes.dark` will set `colorSchemeSelector: 'media'` by default.
+ */
+function createThemeWithVars(options = {}, ...args) {
+  const {
+    colorSchemes: colorSchemesInput = {
+      light: true
+    },
+    defaultColorScheme: defaultColorSchemeInput,
+    disableCssColorScheme = false,
+    cssVarPrefix = 'mui',
+    nativeColor = false,
+    shouldSkipGeneratingVar = _shouldSkipGeneratingVar.default,
+    colorSchemeSelector: selector = colorSchemesInput.light && colorSchemesInput.dark ? 'media' : undefined,
+    rootSelector = ':root',
+    ...input
+  } = options;
+  const firstColorScheme = Object.keys(colorSchemesInput)[0];
+  const defaultColorScheme = defaultColorSchemeInput || (colorSchemesInput.light && firstColorScheme !== 'light' ? 'light' : firstColorScheme);
+  const getCssVar = createGetCssVar(cssVarPrefix);
+  const {
+    [defaultColorScheme]: defaultSchemeInput,
+    light: builtInLight,
+    dark: builtInDark,
+    ...customColorSchemes
+  } = colorSchemesInput;
+  const colorSchemes = {
+    ...customColorSchemes
+  };
+  let defaultScheme = defaultSchemeInput;
+
+  // For built-in light and dark color schemes, ensure that the value is valid if they are the default color scheme.
+  if (defaultColorScheme === 'dark' && !('dark' in colorSchemesInput) || defaultColorScheme === 'light' && !('light' in colorSchemesInput)) {
+    defaultScheme = true;
+  }
+  if (!defaultScheme) {
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`colorSchemes.${defaultColorScheme}\` option is either missing or invalid.` : (0, _formatMuiErrorMessage.default)(21, defaultColorScheme));
+  }
+
+  // The reason to use `oklch` is that it is the most perceptually uniform color space and widely supported.
+  let colorSpace;
+  if (nativeColor) {
+    colorSpace = 'oklch';
+  }
+
+  // Create the palette for the default color scheme, either `light`, `dark`, or custom color scheme.
+  const muiTheme = attachColorScheme(colorSpace, colorSchemes, defaultScheme, input, defaultColorScheme);
+  if (builtInLight && !colorSchemes.light) {
+    attachColorScheme(colorSpace, colorSchemes, builtInLight, undefined, 'light');
+  }
+  if (builtInDark && !colorSchemes.dark) {
+    attachColorScheme(colorSpace, colorSchemes, builtInDark, undefined, 'dark');
+  }
+  let theme = {
+    defaultColorScheme,
+    ...muiTheme,
+    cssVarPrefix,
+    colorSchemeSelector: selector,
+    rootSelector,
+    getCssVar,
+    colorSchemes,
+    font: {
+      ...(0, _cssVars.prepareTypographyVars)(muiTheme.typography),
+      ...muiTheme.font
+    },
+    spacing: getSpacingVal(input.spacing)
+  };
+  Object.keys(theme.colorSchemes).forEach(key => {
+    const palette = theme.colorSchemes[key].palette;
+    const setCssVarColor = cssVar => {
+      const tokens = cssVar.split('-');
+      const color = tokens[1];
+      const colorToken = tokens[2];
+      return getCssVar(cssVar, palette[color][colorToken]);
+    };
+
+    // attach black & white channels to common node
+    if (palette.mode === 'light') {
+      setColor(palette.common, 'background', '#fff');
+      setColor(palette.common, 'onBackground', '#000');
+    }
+    if (palette.mode === 'dark') {
+      setColor(palette.common, 'background', '#000');
+      setColor(palette.common, 'onBackground', '#fff');
+    }
+    function colorMix(method, color, coefficient) {
+      if (colorSpace) {
+        let mixer;
+        if (method === _colorManipulator.private_safeAlpha) {
+          mixer = `transparent ${((1 - coefficient) * 100).toFixed(0)}%`;
+        }
+        if (method === _colorManipulator.private_safeDarken) {
+          mixer = `#000 ${(coefficient * 100).toFixed(0)}%`;
+        }
+        if (method === _colorManipulator.private_safeLighten) {
+          mixer = `#fff ${(coefficient * 100).toFixed(0)}%`;
+        }
+        return `color-mix(in ${colorSpace}, ${color}, ${mixer})`;
+      }
+      return method(color, coefficient);
+    }
+
+    // assign component variables
+    assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Button', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
+    if (palette.mode === 'light') {
+      setColor(palette.Alert, 'errorColor', colorMix(_colorManipulator.private_safeDarken, palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', colorMix(_colorManipulator.private_safeDarken, palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', colorMix(_colorManipulator.private_safeDarken, palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', colorMix(_colorManipulator.private_safeDarken, palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorFilledBg', setCssVarColor('palette-error-main'));
+      setColor(palette.Alert, 'infoFilledBg', setCssVarColor('palette-info-main'));
+      setColor(palette.Alert, 'successFilledBg', setCssVarColor('palette-success-main'));
+      setColor(palette.Alert, 'warningFilledBg', setCssVarColor('palette-warning-main'));
+      setColor(palette.Alert, 'errorFilledColor', silent(() => palette.getContrastText(palette.error.main)));
+      setColor(palette.Alert, 'infoFilledColor', silent(() => palette.getContrastText(palette.info.main)));
+      setColor(palette.Alert, 'successFilledColor', silent(() => palette.getContrastText(palette.success.main)));
+      setColor(palette.Alert, 'warningFilledColor', silent(() => palette.getContrastText(palette.warning.main)));
+      setColor(palette.Alert, 'errorStandardBg', colorMix(_colorManipulator.private_safeLighten, palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', colorMix(_colorManipulator.private_safeLighten, palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', colorMix(_colorManipulator.private_safeLighten, palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', colorMix(_colorManipulator.private_safeLighten, palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorIconColor', setCssVarColor('palette-error-main'));
+      setColor(palette.Alert, 'infoIconColor', setCssVarColor('palette-info-main'));
+      setColor(palette.Alert, 'successIconColor', setCssVarColor('palette-success-main'));
+      setColor(palette.Alert, 'warningIconColor', setCssVarColor('palette-warning-main'));
+      setColor(palette.AppBar, 'defaultBg', setCssVarColor('palette-grey-100'));
+      setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-400'));
+      setColor(palette.Button, 'inheritContainedBg', setCssVarColor('palette-grey-300'));
+      setColor(palette.Button, 'inheritContainedHoverBg', setCssVarColor('palette-grey-A100'));
+      setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-400'));
+      setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-700'));
+      setColor(palette.Chip, 'defaultIconColor', setCssVarColor('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)');
+      setColor(palette.LinearProgress, 'primaryBg', colorMix(_colorManipulator.private_safeLighten, palette.primary.main, 0.62));
+      setColor(palette.LinearProgress, 'secondaryBg', colorMix(_colorManipulator.private_safeLighten, palette.secondary.main, 0.62));
+      setColor(palette.LinearProgress, 'errorBg', colorMix(_colorManipulator.private_safeLighten, palette.error.main, 0.62));
+      setColor(palette.LinearProgress, 'infoBg', colorMix(_colorManipulator.private_safeLighten, palette.info.main, 0.62));
+      setColor(palette.LinearProgress, 'successBg', colorMix(_colorManipulator.private_safeLighten, palette.success.main, 0.62));
+      setColor(palette.LinearProgress, 'warningBg', colorMix(_colorManipulator.private_safeLighten, palette.warning.main, 0.62));
+      setColor(palette.Skeleton, 'bg', colorSpace ? colorMix(_colorManipulator.private_safeAlpha, palette.text.primary, 0.11) : `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.11)`);
+      setColor(palette.Slider, 'primaryTrack', colorMix(_colorManipulator.private_safeLighten, palette.primary.main, 0.62));
+      setColor(palette.Slider, 'secondaryTrack', colorMix(_colorManipulator.private_safeLighten, palette.secondary.main, 0.62));
+      setColor(palette.Slider, 'errorTrack', colorMix(_colorManipulator.private_safeLighten, palette.error.main, 0.62));
+      setColor(palette.Slider, 'infoTrack', colorMix(_colorManipulator.private_safeLighten, palette.info.main, 0.62));
+      setColor(palette.Slider, 'successTrack', colorMix(_colorManipulator.private_safeLighten, palette.success.main, 0.62));
+      setColor(palette.Slider, 'warningTrack', colorMix(_colorManipulator.private_safeLighten, palette.warning.main, 0.62));
+      const snackbarContentBackground = colorSpace ? colorMix(_colorManipulator.private_safeDarken, palette.background.default, 0.6825) // use `0.6825` instead of `0.8` to match the contrast ratio of JS implementation
+      : (0, _colorManipulator.private_safeEmphasize)(palette.background.default, 0.8);
+      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+      setColor(palette.SnackbarContent, 'color', silent(() => colorSpace ? _createPalette.dark.text.primary : palette.getContrastText(snackbarContentBackground)));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', (0, _colorManipulator.private_safeEmphasize)(palette.background.paper, 0.15));
+      setColor(palette.StepConnector, 'border', setCssVarColor('palette-grey-400'));
+      setColor(palette.StepContent, 'border', setCssVarColor('palette-grey-400'));
+      setColor(palette.Switch, 'defaultColor', setCssVarColor('palette-common-white'));
+      setColor(palette.Switch, 'defaultDisabledColor', setCssVarColor('palette-grey-100'));
+      setColor(palette.Switch, 'primaryDisabledColor', colorMix(_colorManipulator.private_safeLighten, palette.primary.main, 0.62));
+      setColor(palette.Switch, 'secondaryDisabledColor', colorMix(_colorManipulator.private_safeLighten, palette.secondary.main, 0.62));
+      setColor(palette.Switch, 'errorDisabledColor', colorMix(_colorManipulator.private_safeLighten, palette.error.main, 0.62));
+      setColor(palette.Switch, 'infoDisabledColor', colorMix(_colorManipulator.private_safeLighten, palette.info.main, 0.62));
+      setColor(palette.Switch, 'successDisabledColor', colorMix(_colorManipulator.private_safeLighten, palette.success.main, 0.62));
+      setColor(palette.Switch, 'warningDisabledColor', colorMix(_colorManipulator.private_safeLighten, palette.warning.main, 0.62));
+      setColor(palette.TableCell, 'border', colorMix(_colorManipulator.private_safeLighten, colorMix(_colorManipulator.private_safeAlpha, palette.divider, 1), 0.88));
+      setColor(palette.Tooltip, 'bg', colorMix(_colorManipulator.private_safeAlpha, palette.grey[700], 0.92));
+    }
+    if (palette.mode === 'dark') {
+      setColor(palette.Alert, 'errorColor', colorMix(_colorManipulator.private_safeLighten, palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', colorMix(_colorManipulator.private_safeLighten, palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', colorMix(_colorManipulator.private_safeLighten, palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', colorMix(_colorManipulator.private_safeLighten, palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorFilledBg', setCssVarColor('palette-error-dark'));
+      setColor(palette.Alert, 'infoFilledBg', setCssVarColor('palette-info-dark'));
+      setColor(palette.Alert, 'successFilledBg', setCssVarColor('palette-success-dark'));
+      setColor(palette.Alert, 'warningFilledBg', setCssVarColor('palette-warning-dark'));
+      setColor(palette.Alert, 'errorFilledColor', silent(() => palette.getContrastText(palette.error.dark)));
+      setColor(palette.Alert, 'infoFilledColor', silent(() => palette.getContrastText(palette.info.dark)));
+      setColor(palette.Alert, 'successFilledColor', silent(() => palette.getContrastText(palette.success.dark)));
+      setColor(palette.Alert, 'warningFilledColor', silent(() => palette.getContrastText(palette.warning.dark)));
+      setColor(palette.Alert, 'errorStandardBg', colorMix(_colorManipulator.private_safeDarken, palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', colorMix(_colorManipulator.private_safeDarken, palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', colorMix(_colorManipulator.private_safeDarken, palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', colorMix(_colorManipulator.private_safeDarken, palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorIconColor', setCssVarColor('palette-error-main'));
+      setColor(palette.Alert, 'infoIconColor', setCssVarColor('palette-info-main'));
+      setColor(palette.Alert, 'successIconColor', setCssVarColor('palette-success-main'));
+      setColor(palette.Alert, 'warningIconColor', setCssVarColor('palette-warning-main'));
+      setColor(palette.AppBar, 'defaultBg', setCssVarColor('palette-grey-900'));
+      setColor(palette.AppBar, 'darkBg', setCssVarColor('palette-background-paper')); // specific for dark mode
+      setColor(palette.AppBar, 'darkColor', setCssVarColor('palette-text-primary')); // specific for dark mode
+      setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-600'));
+      setColor(palette.Button, 'inheritContainedBg', setCssVarColor('palette-grey-800'));
+      setColor(palette.Button, 'inheritContainedHoverBg', setCssVarColor('palette-grey-700'));
+      setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-700'));
+      setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-300'));
+      setColor(palette.Chip, 'defaultIconColor', setCssVarColor('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)');
+      setColor(palette.LinearProgress, 'primaryBg', colorMix(_colorManipulator.private_safeDarken, palette.primary.main, 0.5));
+      setColor(palette.LinearProgress, 'secondaryBg', colorMix(_colorManipulator.private_safeDarken, palette.secondary.main, 0.5));
+      setColor(palette.LinearProgress, 'errorBg', colorMix(_colorManipulator.private_safeDarken, palette.error.main, 0.5));
+      setColor(palette.LinearProgress, 'infoBg', colorMix(_colorManipulator.private_safeDarken, palette.info.main, 0.5));
+      setColor(palette.LinearProgress, 'successBg', colorMix(_colorManipulator.private_safeDarken, palette.success.main, 0.5));
+      setColor(palette.LinearProgress, 'warningBg', colorMix(_colorManipulator.private_safeDarken, palette.warning.main, 0.5));
+      setColor(palette.Skeleton, 'bg', colorSpace ? colorMix(_colorManipulator.private_safeAlpha, palette.text.primary, 0.13) : `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.13)`);
+      setColor(palette.Slider, 'primaryTrack', colorMix(_colorManipulator.private_safeDarken, palette.primary.main, 0.5));
+      setColor(palette.Slider, 'secondaryTrack', colorMix(_colorManipulator.private_safeDarken, palette.secondary.main, 0.5));
+      setColor(palette.Slider, 'errorTrack', colorMix(_colorManipulator.private_safeDarken, palette.error.main, 0.5));
+      setColor(palette.Slider, 'infoTrack', colorMix(_colorManipulator.private_safeDarken, palette.info.main, 0.5));
+      setColor(palette.Slider, 'successTrack', colorMix(_colorManipulator.private_safeDarken, palette.success.main, 0.5));
+      setColor(palette.Slider, 'warningTrack', colorMix(_colorManipulator.private_safeDarken, palette.warning.main, 0.5));
+      const snackbarContentBackground = colorSpace ? colorMix(_colorManipulator.private_safeLighten, palette.background.default, 0.985) // use `0.985` instead of `0.98` to match the contrast ratio of JS implementation
+      : (0, _colorManipulator.private_safeEmphasize)(palette.background.default, 0.98);
+      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+      setColor(palette.SnackbarContent, 'color', silent(() => colorSpace ? _createPalette.light.text.primary : palette.getContrastText(snackbarContentBackground)));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', (0, _colorManipulator.private_safeEmphasize)(palette.background.paper, 0.15));
+      setColor(palette.StepConnector, 'border', setCssVarColor('palette-grey-600'));
+      setColor(palette.StepContent, 'border', setCssVarColor('palette-grey-600'));
+      setColor(palette.Switch, 'defaultColor', setCssVarColor('palette-grey-300'));
+      setColor(palette.Switch, 'defaultDisabledColor', setCssVarColor('palette-grey-600'));
+      setColor(palette.Switch, 'primaryDisabledColor', colorMix(_colorManipulator.private_safeDarken, palette.primary.main, 0.55));
+      setColor(palette.Switch, 'secondaryDisabledColor', colorMix(_colorManipulator.private_safeDarken, palette.secondary.main, 0.55));
+      setColor(palette.Switch, 'errorDisabledColor', colorMix(_colorManipulator.private_safeDarken, palette.error.main, 0.55));
+      setColor(palette.Switch, 'infoDisabledColor', colorMix(_colorManipulator.private_safeDarken, palette.info.main, 0.55));
+      setColor(palette.Switch, 'successDisabledColor', colorMix(_colorManipulator.private_safeDarken, palette.success.main, 0.55));
+      setColor(palette.Switch, 'warningDisabledColor', colorMix(_colorManipulator.private_safeDarken, palette.warning.main, 0.55));
+      setColor(palette.TableCell, 'border', colorMix(_colorManipulator.private_safeDarken, colorMix(_colorManipulator.private_safeAlpha, palette.divider, 1), 0.68));
+      setColor(palette.Tooltip, 'bg', colorMix(_colorManipulator.private_safeAlpha, palette.grey[700], 0.92));
+    }
+
+    // MUI X - DataGrid needs this token.
+    setColorChannel(palette.background, 'default');
+
+    // added for consistency with the `background.default` token
+    setColorChannel(palette.background, 'paper');
+    setColorChannel(palette.common, 'background');
+    setColorChannel(palette.common, 'onBackground');
+    setColorChannel(palette, 'divider');
+    Object.keys(palette).forEach(color => {
+      const colors = palette[color];
+
+      // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
+
+      if (color !== 'tonalOffset' && colors && typeof colors === 'object') {
+        // Silent the error for custom palettes.
+        if (colors.main) {
+          setColor(palette[color], 'mainChannel', (0, _colorManipulator.private_safeColorChannel)(toRgb(colors.main)));
+        }
+        if (colors.light) {
+          setColor(palette[color], 'lightChannel', (0, _colorManipulator.private_safeColorChannel)(toRgb(colors.light)));
+        }
+        if (colors.dark) {
+          setColor(palette[color], 'darkChannel', (0, _colorManipulator.private_safeColorChannel)(toRgb(colors.dark)));
+        }
+        if (colors.contrastText) {
+          setColor(palette[color], 'contrastTextChannel', (0, _colorManipulator.private_safeColorChannel)(toRgb(colors.contrastText)));
+        }
+        if (color === 'text') {
+          // Text colors: text.primary, text.secondary
+          setColorChannel(palette[color], 'primary');
+          setColorChannel(palette[color], 'secondary');
+        }
+        if (color === 'action') {
+          // Action colors: action.active, action.selected
+          if (colors.active) {
+            setColorChannel(palette[color], 'active');
+          }
+          if (colors.selected) {
+            setColorChannel(palette[color], 'selected');
+          }
+        }
+      }
+    });
+  });
+  theme = args.reduce((acc, argument) => (0, _deepmerge.default)(acc, argument), theme);
+  const parserConfig = {
+    prefix: cssVarPrefix,
+    disableCssColorScheme,
+    shouldSkipGeneratingVar,
+    getSelector: (0, _createGetSelector.default)(theme),
+    enableContrastVars: nativeColor
+  };
+  const {
+    vars,
+    generateThemeVars,
+    generateStyleSheets
+  } = (0, _cssVars.prepareCssVars)(theme, parserConfig);
+  theme.vars = vars;
+  Object.entries(theme.colorSchemes[theme.defaultColorScheme]).forEach(([key, value]) => {
+    theme[key] = value;
+  });
+  theme.generateThemeVars = generateThemeVars;
+  theme.generateStyleSheets = generateStyleSheets;
+  theme.generateSpacing = function generateSpacing() {
+    return (0, _system.createSpacing)(input.spacing, (0, _spacing.createUnarySpacing)(this));
+  };
+  theme.getColorSchemeSelector = (0, _cssVars.createGetColorSchemeSelector)(selector);
+  theme.spacing = theme.generateSpacing();
+  theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
+  theme.unstable_sxConfig = {
+    ..._styleFunctionSx.unstable_defaultSxConfig,
+    ...input?.unstable_sxConfig
+  };
+  theme.unstable_sx = function sx(props) {
+    return (0, _styleFunctionSx.default)({
+      sx: props,
+      theme: this
+    });
+  };
+  theme.toRuntimeSource = _stringifyTheme.stringifyTheme; // for Pigment CSS integration
+
+  return theme;
+}

package/styles/createTransitions.d.ts

@@ -0,0 +1,51 @@
+export interface Easing {
+  easeInOut: string;
+  easeOut: string;
+  easeIn: string;
+  sharp: string;
+}
+export const easing: Easing;
+export interface Duration {
+  shortest: number;
+  shorter: number;
+  short: number;
+  standard: number;
+  complex: number;
+  enteringScreen: number;
+  leavingScreen: number;
+}
+export const duration: Duration;
+export interface TransitionsOptions {
+  easing?: Partial<Easing>;
+  duration?: Partial<Duration>;
+  create?: (props: string | string[], options?: Partial<{
+    duration: number | string;
+    easing: string;
+    delay: number | string;
+  }>) => string;
+  getAutoHeightDuration?: (height: number) => number;
+}
+
+/**
+ * @internal
+ * @param props
+ * @param options
+ */
+export function create(props: string | string[], options?: Partial<{
+  duration: number | string;
+  easing: string;
+  delay: number | string;
+}>): string;
+
+/**
+ * @internal
+ * @param height
+ */
+export function getAutoHeightDuration(height: number): number;
+export interface Transitions {
+  easing: Easing;
+  duration: Duration;
+  create: typeof create;
+  getAutoHeightDuration: typeof getAutoHeightDuration;
+}
+export default function createTransitions(inputTransitions: TransitionsOptions): Transitions;

package/styles/createTransitions.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createTransitions;
+exports.easing = exports.duration = void 0;
+// Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
+// to learn the context in which each easing should be used.
+const easing = exports.easing = {
+  // This is the most common easing curve.
+  easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  // Objects enter the screen at full velocity from off-screen and
+  // slowly decelerate to a resting point.
+  easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
+  // Objects leave the screen at full velocity. They do not decelerate when off-screen.
+  easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
+  // The sharp curve is used by objects that may return to the screen at any time.
+  sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
+};
+
+// Follow https://m2.material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
+// to learn when use what timing
+const duration = exports.duration = {
+  shortest: 150,
+  shorter: 200,
+  short: 250,
+  // most basic recommended timing
+  standard: 300,
+  // this is to be used in complex animations
+  complex: 375,
+  // recommended when something is entering screen
+  enteringScreen: 225,
+  // recommended when something is leaving screen
+  leavingScreen: 195
+};
+function formatMs(milliseconds) {
+  return `${Math.round(milliseconds)}ms`;
+}
+function getAutoHeightDuration(height) {
+  if (!height) {
+    return 0;
+  }
+  const constant = height / 36;
+
+  // https://www.desmos.com/calculator/vbrp3ggqet
+  return Math.min(Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10), 3000);
+}
+function createTransitions(inputTransitions) {
+  const mergedEasing = {
+    ...easing,
+    ...inputTransitions.easing
+  };
+  const mergedDuration = {
+    ...duration,
+    ...inputTransitions.duration
+  };
+  const create = (props = ['all'], options = {}) => {
+    const {
+      duration: durationOption = mergedDuration.standard,
+      easing: easingOption = mergedEasing.easeInOut,
+      delay = 0,
+      ...other
+    } = options;
+    if (process.env.NODE_ENV !== 'production') {
+      const isString = value => typeof value === 'string';
+      const isNumber = value => !Number.isNaN(parseFloat(value));
+      if (!isString(props) && !Array.isArray(props)) {
+        console.error('MUI: Argument "props" must be a string or Array.');
+      }
+      if (!isNumber(durationOption) && !isString(durationOption)) {
+        console.error(`MUI: Argument "duration" must be a number or a string but found ${durationOption}.`);
+      }
+      if (!isString(easingOption)) {
+        console.error('MUI: Argument "easing" must be a string.');
+      }
+      if (!isNumber(delay) && !isString(delay)) {
+        console.error('MUI: Argument "delay" must be a number or a string.');
+      }
+      if (typeof options !== 'object') {
+        console.error(['MUI: Secong argument of transition.create must be an object.', "Arguments should be either `create('prop1', options)` or `create(['prop1', 'prop2'], options)`"].join('\n'));
+      }
+      if (Object.keys(other).length !== 0) {
+        console.error(`MUI: Unrecognized argument(s) [${Object.keys(other).join(',')}].`);
+      }
+    }
+    return (Array.isArray(props) ? props : [props]).map(animatedProp => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`).join(',');
+  };
+  return {
+    getAutoHeightDuration,
+    create,
+    ...inputTransitions,
+    easing: mergedEasing,
+    duration: mergedDuration
+  };
+}