@mui/material 7.0.1 → 7.1.0

package/modern/styles/createThemeWithVars.js

@@ -1,386 +0,0 @@
-import _formatErrorMessage from "@mui/utils/formatMuiErrorMessage";
-import deepmerge from '@mui/utils/deepmerge';
-import { unstable_createGetCssVar as systemCreateGetCssVar, createSpacing } from '@mui/system';
-import { createUnarySpacing } from '@mui/system/spacing';
-import { prepareCssVars, prepareTypographyVars, createGetColorSchemeSelector } from '@mui/system/cssVars';
-import styleFunctionSx, { unstable_defaultSxConfig as defaultSxConfig } from '@mui/system/styleFunctionSx';
-import { private_safeColorChannel as safeColorChannel, private_safeAlpha as safeAlpha, private_safeDarken as safeDarken, private_safeLighten as safeLighten, private_safeEmphasize as safeEmphasize, hslToRgb } from '@mui/system/colorManipulator';
-import createThemeNoVars from "./createThemeNoVars.js";
-import createColorScheme, { getOpacity, getOverlays } from "./createColorScheme.js";
-import defaultShouldSkipGeneratingVar from "./shouldSkipGeneratingVar.js";
-import defaultGetSelector from "./createGetSelector.js";
-import { stringifyTheme } from "./stringifyTheme.js";
-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 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`] = 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;
-};
-export const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix);
-function attachColorScheme(colorSchemes, scheme, restTheme, colorScheme) {
-  if (!scheme) {
-    return undefined;
-  }
-  scheme = scheme === true ? {} : scheme;
-  const mode = colorScheme === 'dark' ? 'dark' : 'light';
-  if (!restTheme) {
-    colorSchemes[colorScheme] = createColorScheme({
-      ...scheme,
-      palette: {
-        mode,
-        ...scheme?.palette
-      }
-    });
-    return undefined;
-  }
-  const {
-    palette,
-    ...muiTheme
-  } = createThemeNoVars({
-    ...restTheme,
-    palette: {
-      mode,
-      ...scheme?.palette
-    }
-  });
-  colorSchemes[colorScheme] = {
-    ...scheme,
-    palette,
-    opacity: {
-      ...getOpacity(mode),
-      ...scheme?.opacity
-    },
-    overlays: scheme?.overlays || 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.
- */
-export default function createThemeWithVars(options = {}, ...args) {
-  const {
-    colorSchemes: colorSchemesInput = {
-      light: true
-    },
-    defaultColorScheme: defaultColorSchemeInput,
-    disableCssColorScheme = false,
-    cssVarPrefix = 'mui',
-    shouldSkipGeneratingVar = defaultShouldSkipGeneratingVar,
-    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.` : _formatErrorMessage(21, defaultColorScheme));
-  }
-
-  // Create the palette for the default color scheme, either `light`, `dark`, or custom color scheme.
-  const muiTheme = attachColorScheme(colorSchemes, defaultScheme, input, defaultColorScheme);
-  if (builtInLight && !colorSchemes.light) {
-    attachColorScheme(colorSchemes, builtInLight, undefined, 'light');
-  }
-  if (builtInDark && !colorSchemes.dark) {
-    attachColorScheme(colorSchemes, builtInDark, undefined, 'dark');
-  }
-  let theme = {
-    defaultColorScheme,
-    ...muiTheme,
-    cssVarPrefix,
-    colorSchemeSelector: selector,
-    rootSelector,
-    getCssVar,
-    colorSchemes,
-    font: {
-      ...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');
-    }
-
-    // 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', safeDarken(palette.error.light, 0.6));
-      setColor(palette.Alert, 'infoColor', safeDarken(palette.info.light, 0.6));
-      setColor(palette.Alert, 'successColor', safeDarken(palette.success.light, 0.6));
-      setColor(palette.Alert, 'warningColor', 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', safeLighten(palette.error.light, 0.9));
-      setColor(palette.Alert, 'infoStandardBg', safeLighten(palette.info.light, 0.9));
-      setColor(palette.Alert, 'successStandardBg', safeLighten(palette.success.light, 0.9));
-      setColor(palette.Alert, 'warningStandardBg', 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', safeLighten(palette.primary.main, 0.62));
-      setColor(palette.LinearProgress, 'secondaryBg', safeLighten(palette.secondary.main, 0.62));
-      setColor(palette.LinearProgress, 'errorBg', safeLighten(palette.error.main, 0.62));
-      setColor(palette.LinearProgress, 'infoBg', safeLighten(palette.info.main, 0.62));
-      setColor(palette.LinearProgress, 'successBg', safeLighten(palette.success.main, 0.62));
-      setColor(palette.LinearProgress, 'warningBg', safeLighten(palette.warning.main, 0.62));
-      setColor(palette.Skeleton, 'bg', `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.11)`);
-      setColor(palette.Slider, 'primaryTrack', safeLighten(palette.primary.main, 0.62));
-      setColor(palette.Slider, 'secondaryTrack', safeLighten(palette.secondary.main, 0.62));
-      setColor(palette.Slider, 'errorTrack', safeLighten(palette.error.main, 0.62));
-      setColor(palette.Slider, 'infoTrack', safeLighten(palette.info.main, 0.62));
-      setColor(palette.Slider, 'successTrack', safeLighten(palette.success.main, 0.62));
-      setColor(palette.Slider, 'warningTrack', safeLighten(palette.warning.main, 0.62));
-      const snackbarContentBackground = safeEmphasize(palette.background.default, 0.8);
-      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
-      setColor(palette.SnackbarContent, 'color', silent(() => palette.getContrastText(snackbarContentBackground)));
-      setColor(palette.SpeedDialAction, 'fabHoverBg', 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', safeLighten(palette.primary.main, 0.62));
-      setColor(palette.Switch, 'secondaryDisabledColor', safeLighten(palette.secondary.main, 0.62));
-      setColor(palette.Switch, 'errorDisabledColor', safeLighten(palette.error.main, 0.62));
-      setColor(palette.Switch, 'infoDisabledColor', safeLighten(palette.info.main, 0.62));
-      setColor(palette.Switch, 'successDisabledColor', safeLighten(palette.success.main, 0.62));
-      setColor(palette.Switch, 'warningDisabledColor', safeLighten(palette.warning.main, 0.62));
-      setColor(palette.TableCell, 'border', safeLighten(safeAlpha(palette.divider, 1), 0.88));
-      setColor(palette.Tooltip, 'bg', safeAlpha(palette.grey[700], 0.92));
-    }
-    if (palette.mode === 'dark') {
-      setColor(palette.Alert, 'errorColor', safeLighten(palette.error.light, 0.6));
-      setColor(palette.Alert, 'infoColor', safeLighten(palette.info.light, 0.6));
-      setColor(palette.Alert, 'successColor', safeLighten(palette.success.light, 0.6));
-      setColor(palette.Alert, 'warningColor', 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', safeDarken(palette.error.light, 0.9));
-      setColor(palette.Alert, 'infoStandardBg', safeDarken(palette.info.light, 0.9));
-      setColor(palette.Alert, 'successStandardBg', safeDarken(palette.success.light, 0.9));
-      setColor(palette.Alert, 'warningStandardBg', 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', safeDarken(palette.primary.main, 0.5));
-      setColor(palette.LinearProgress, 'secondaryBg', safeDarken(palette.secondary.main, 0.5));
-      setColor(palette.LinearProgress, 'errorBg', safeDarken(palette.error.main, 0.5));
-      setColor(palette.LinearProgress, 'infoBg', safeDarken(palette.info.main, 0.5));
-      setColor(palette.LinearProgress, 'successBg', safeDarken(palette.success.main, 0.5));
-      setColor(palette.LinearProgress, 'warningBg', safeDarken(palette.warning.main, 0.5));
-      setColor(palette.Skeleton, 'bg', `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.13)`);
-      setColor(palette.Slider, 'primaryTrack', safeDarken(palette.primary.main, 0.5));
-      setColor(palette.Slider, 'secondaryTrack', safeDarken(palette.secondary.main, 0.5));
-      setColor(palette.Slider, 'errorTrack', safeDarken(palette.error.main, 0.5));
-      setColor(palette.Slider, 'infoTrack', safeDarken(palette.info.main, 0.5));
-      setColor(palette.Slider, 'successTrack', safeDarken(palette.success.main, 0.5));
-      setColor(palette.Slider, 'warningTrack', safeDarken(palette.warning.main, 0.5));
-      const snackbarContentBackground = safeEmphasize(palette.background.default, 0.98);
-      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
-      setColor(palette.SnackbarContent, 'color', silent(() => palette.getContrastText(snackbarContentBackground)));
-      setColor(palette.SpeedDialAction, 'fabHoverBg', 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', safeDarken(palette.primary.main, 0.55));
-      setColor(palette.Switch, 'secondaryDisabledColor', safeDarken(palette.secondary.main, 0.55));
-      setColor(palette.Switch, 'errorDisabledColor', safeDarken(palette.error.main, 0.55));
-      setColor(palette.Switch, 'infoDisabledColor', safeDarken(palette.info.main, 0.55));
-      setColor(palette.Switch, 'successDisabledColor', safeDarken(palette.success.main, 0.55));
-      setColor(palette.Switch, 'warningDisabledColor', safeDarken(palette.warning.main, 0.55));
-      setColor(palette.TableCell, 'border', safeDarken(safeAlpha(palette.divider, 1), 0.68));
-      setColor(palette.Tooltip, 'bg', 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', safeColorChannel(toRgb(colors.main)));
-        }
-        if (colors.light) {
-          setColor(palette[color], 'lightChannel', safeColorChannel(toRgb(colors.light)));
-        }
-        if (colors.dark) {
-          setColor(palette[color], 'darkChannel', safeColorChannel(toRgb(colors.dark)));
-        }
-        if (colors.contrastText) {
-          setColor(palette[color], 'contrastTextChannel', 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) => deepmerge(acc, argument), theme);
-  const parserConfig = {
-    prefix: cssVarPrefix,
-    disableCssColorScheme,
-    shouldSkipGeneratingVar,
-    getSelector: defaultGetSelector(theme)
-  };
-  const {
-    vars,
-    generateThemeVars,
-    generateStyleSheets
-  } = 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 createSpacing(input.spacing, createUnarySpacing(this));
-  };
-  theme.getColorSchemeSelector = createGetColorSchemeSelector(selector);
-  theme.spacing = theme.generateSpacing();
-  theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
-  theme.unstable_sxConfig = {
-    ...defaultSxConfig,
-    ...input?.unstable_sxConfig
-  };
-  theme.unstable_sx = function sx(props) {
-    return styleFunctionSx({
-      sx: props,
-      theme: this
-    });
-  };
-  theme.toRuntimeSource = stringifyTheme; // for Pigment CSS integration
-
-  return theme;
-}

package/modern/styles/createTransitions.d.ts

@@ -1,51 +0,0 @@
-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/modern/styles/createTransitions.js

@@ -1,89 +0,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.
-export const 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
-export const 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);
-}
-export default 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
-  };
-}

package/modern/styles/createTypography.d.ts

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { CSSProperties } from "./createMixins.js";
-import { Palette } from "./createPalette.js";
-export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline';
-export interface FontStyle {
-  fontFamily: React.CSSProperties['fontFamily'];
-  fontSize: number;
-  fontWeightLight: React.CSSProperties['fontWeight'];
-  fontWeightRegular: React.CSSProperties['fontWeight'];
-  fontWeightMedium: React.CSSProperties['fontWeight'];
-  fontWeightBold: React.CSSProperties['fontWeight'];
-  htmlFontSize: number;
-}
-export interface FontStyleOptions extends Partial<FontStyle> {
-  allVariants?: React.CSSProperties;
-}
-
-// TODO: which one should actually be allowed to be subject to module augmentation?
-// current type vs interface decision is kept for historical reasons until we
-// made a decision
-export type TypographyStyle = CSSProperties;
-export interface TypographyStyleOptions extends TypographyStyle {}
-export interface TypographyUtils {
-  pxToRem: (px: number) => string;
-}
-export interface TypographyVariants extends Record<TypographyVariant, TypographyStyle>, FontStyle, TypographyUtils {}
-export interface TypographyVariantsOptions extends Partial<Record<TypographyVariant, TypographyStyleOptions> & FontStyleOptions> {}
-export default function createTypography(palette: Palette, typography: TypographyVariantsOptions | ((palette: Palette) => TypographyVariantsOptions)): TypographyVariants;

package/modern/styles/createTypography.js

@@ -1,92 +0,0 @@
-import deepmerge from '@mui/utils/deepmerge';
-function round(value) {
-  return Math.round(value * 1e5) / 1e5;
-}
-const caseAllCaps = {
-  textTransform: 'uppercase'
-};
-const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
-
-/**
- * @see @link{https://m2.material.io/design/typography/the-type-system.html}
- * @see @link{https://m2.material.io/design/typography/understanding-typography.html}
- */
-export default function createTypography(palette, typography) {
-  const {
-    fontFamily = defaultFontFamily,
-    // The default font size of the Material Specification.
-    fontSize = 14,
-    // px
-    fontWeightLight = 300,
-    fontWeightRegular = 400,
-    fontWeightMedium = 500,
-    fontWeightBold = 700,
-    // Tell MUI what's the font-size on the html element.
-    // 16px is the default font-size used by browsers.
-    htmlFontSize = 16,
-    // Apply the CSS properties to all the variants.
-    allVariants,
-    pxToRem: pxToRem2,
-    ...other
-  } = typeof typography === 'function' ? typography(palette) : typography;
-  if (process.env.NODE_ENV !== 'production') {
-    if (typeof fontSize !== 'number') {
-      console.error('MUI: `fontSize` is required to be a number.');
-    }
-    if (typeof htmlFontSize !== 'number') {
-      console.error('MUI: `htmlFontSize` is required to be a number.');
-    }
-  }
-  const coef = fontSize / 14;
-  const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
-  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => ({
-    fontFamily,
-    fontWeight,
-    fontSize: pxToRem(size),
-    // Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
-    lineHeight,
-    // The letter spacing was designed for the Roboto font-family. Using the same letter-spacing
-    // across font-families can cause issues with the kerning.
-    ...(fontFamily === defaultFontFamily ? {
-      letterSpacing: `${round(letterSpacing / size)}em`
-    } : {}),
-    ...casing,
-    ...allVariants
-  });
-  const variants = {
-    h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
-    h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
-    h3: buildVariant(fontWeightRegular, 48, 1.167, 0),
-    h4: buildVariant(fontWeightRegular, 34, 1.235, 0.25),
-    h5: buildVariant(fontWeightRegular, 24, 1.334, 0),
-    h6: buildVariant(fontWeightMedium, 20, 1.6, 0.15),
-    subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15),
-    subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1),
-    body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15),
-    body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15),
-    button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
-    caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
-    overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps),
-    // TODO v6: Remove handling of 'inherit' variant from the theme as it is already handled in Material UI's Typography component. Also, remember to remove the associated types.
-    inherit: {
-      fontFamily: 'inherit',
-      fontWeight: 'inherit',
-      fontSize: 'inherit',
-      lineHeight: 'inherit',
-      letterSpacing: 'inherit'
-    }
-  };
-  return deepmerge({
-    htmlFontSize,
-    pxToRem,
-    fontFamily,
-    fontSize,
-    fontWeightLight,
-    fontWeightRegular,
-    fontWeightMedium,
-    fontWeightBold,
-    ...variants
-  }, other, {
-    clone: false // No need to clone deep
-  });
-}

package/modern/styles/cssUtils.d.ts

@@ -1,25 +0,0 @@
-import { CSSProperties } from "./createMixins.js";
-export function isUnitless(value: string): boolean;
-export function getUnit(input: string): string;
-export function toUnitless(value: string): number;
-export function convertLength(baseFontSize: string): (length: string, toUnit: string) => string;
-export interface AlignPropertyParams {
-  size: number;
-  grid: number;
-}
-export function alignProperty(params: AlignPropertyParams): number;
-export interface FontGridParams {
-  lineHeight: number;
-  pixels: number;
-  htmlFontSize: number;
-}
-export function fontGrid(params: FontGridParams): number;
-export interface ResponsivePropertyParams {
-  cssProperty: string;
-  min: number;
-  max: number;
-  unit?: string;
-  breakpoints?: number[];
-  transform?: (value: number) => number;
-}
-export function responsiveProperty(params: ResponsivePropertyParams): CSSProperties;