[theme] Rename createMuiTheme to createTheme (mui#25992)

Author: m4theushw

benchmark/browser/scenarios/styled-components-box-material-ui-system/index.js

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 import styledComponents, {
   ThemeProvider as StyledComponentsThemeProvider,
 } from 'styled-components';
 import { spacing, palette, typography, compose } from '@material-ui/system';
 
 const materialSystem = compose(palette, spacing, typography);
-const materialSystemTheme = createMuiTheme();
+const materialSystemTheme = createTheme();
 const BoxMaterialSystem = styledComponents('div')(materialSystem);
 
 export default function StyledComponentsBoxMaterialUISystem() {

benchmark/browser/scenarios/styled-components-box-styled-system/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 import styledComponents, {
   ThemeProvider as StyledComponentsThemeProvider,
 } from 'styled-components';
@@ -8,7 +8,7 @@ import { space, color, fontFamily, fontSize, compose } from 'styled-system';
 const styledSystem = compose(color, space, fontFamily, fontSize);
 const BoxStyledSystem = styledComponents('div')(styledSystem);
 
-const styledSystemTheme = createMuiTheme();
+const styledSystemTheme = createTheme();
 styledSystemTheme.breakpoints = ['40em', '52em', '64em'];
 styledSystemTheme.colors = styledSystemTheme.palette;
 styledSystemTheme.fontSizes = styledSystemTheme.typography;

benchmark/browser/scenarios/styled-emotion/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 import emotionStyled from '@emotion/styled';
 
 const Div = emotionStyled('div')(
@@ -18,7 +18,7 @@ const Div = emotionStyled('div')(
 `,
 );
 
-const theme = createMuiTheme();
+const theme = createTheme();
 
 export default function StyledEmotion() {
   return (

benchmark/browser/scenarios/styled-sc/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 import styledComponents, {
   ThemeProvider as StyledComponentsThemeProvider,
 } from 'styled-components';
@@ -20,7 +20,7 @@ const Div = styledComponents('div')(
 `,
 );
 
-const theme = createMuiTheme();
+const theme = createTheme();
 
 export default function StyledSC() {
   return (

benchmark/server/scenarios/server.js

@@ -3,7 +3,7 @@ import express from 'express';
 import * as React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { SheetsRegistry } from 'jss';
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 import {
   styled as materialStyled,
   StylesProvider,
@@ -35,7 +35,7 @@ function renderFullPage(html, css) {
   `;
 }
 
-const theme = createMuiTheme({
+const theme = createTheme({
   palette: {
     primary: green,
     accent: red,

benchmark/server/scenarios/system.js

@@ -2,7 +2,7 @@
 import Benchmark from 'benchmark';
 import { unstable_styleFunctionSx as styleFunctionSx } from '@material-ui/system';
 import styledSystemCss from '@styled-system/css';
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 import { css as chakraCss } from '@chakra-ui/system';
 
 const suite = new Benchmark.Suite('system', {
@@ -12,7 +12,7 @@ const suite = new Benchmark.Suite('system', {
 });
 Benchmark.options.minSamples = 100;
 
-const materialSystemTheme = createMuiTheme();
+const materialSystemTheme = createTheme();
 
 const styledSystemTheme = {
   breakpoints: ['40em', '52em', '64em'],

docs/public/static/error-codes.json

@@ -3,12 +3,12 @@
   "2": "Material-UI: The `value` prop must be an array when using the `Select` component with `multiple`.",
   "3": "Material-UI: Unsupported `%s` color.\nWe support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla().",
   "4": "Material-UI: The color provided to augmentColor(color) is invalid.\nThe color object needs to have a `main` property or a `%s` property.",
-  "5": "Material-UI: The color provided to augmentColor(color) is invalid.\n`color.main` should be a string, but `%s` was provided instead.\n\nDid you intend to use one of the following approaches?\n\nimport { green } from \"@material-ui/core/colors\";\n\nconst theme1 = createMuiTheme({ palette: {\n  primary: green,\n} });\n\nconst theme2 = createMuiTheme({ palette: {\n  primary: { main: green[500] },\n} });",
+  "5": "Material-UI: The color provided to augmentColor(color) is invalid.\n`color.main` should be a string, but `%s` was provided instead.\n\nDid you intend to use one of the following approaches?\n\nimport { green } from \"@material-ui/core/colors\";\n\nconst theme1 = createTheme({ palette: {\n  primary: green,\n} });\n\nconst theme2 = createTheme({ palette: {\n  primary: { main: green[500] },\n} });",
   "6": "Material-UI: Unsupported non-unitless line height with grid alignment.\nUse unitless line heights instead.",
   "7": "Material-UI: `capitalize(string)` expects a string argument.",
   "8": "Material-UI: Unsupported `%s` color.\nWe support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().",
   "9": "Material-UI: Unsupported `%s` color.\nThe following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().",
   "10": "Material-UI: unsupported `%s` color space.\nThe following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.",
   "11": "Material-UI: The color%s provided to augmentColor(color) is invalid.\nThe color object needs to have a `main` property or a `%s` property.",
-  "12": "Material-UI: The color%s provided to augmentColor(color) is invalid.\n`color.main` should be a string, but `%s` was provided instead.\n\nDid you intend to use one of the following approaches?\n\nimport { green } from \"@material-ui/core/colors\";\n\nconst theme1 = createMuiTheme({ palette: {\n  primary: green,\n} });\n\nconst theme2 = createMuiTheme({ palette: {\n  primary: { main: green[500] },\n} });"
+  "12": "Material-UI: The color%s provided to augmentColor(color) is invalid.\n`color.main` should be a string, but `%s` was provided instead.\n\nDid you intend to use one of the following approaches?\n\nimport { green } from \"@material-ui/core/colors\";\n\nconst theme1 = createTheme({ palette: {\n  primary: green,\n} });\n\nconst theme2 = createTheme({ palette: {\n  primary: { main: green[500] },\n} });"
 }

docs/scripts/buildApi.ts

@@ -34,7 +34,7 @@ import {
 import { pageToTitle } from 'docs/src/modules/utils/helpers';
 import createGenerateClassName from '@material-ui/styles/createGenerateClassName';
 import getStylesCreator from '@material-ui/styles/getStylesCreator';
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 import { getLineFeed, getUnstyledFilename } from './helpers';
 
 const apiDocsTranslationsDirectory = path.resolve('docs', 'translations', 'api-docs');
@@ -1306,7 +1306,7 @@ async function run(argv: {
 
   mkdirSync(outputDirectory, { mode: 0o777, recursive: true });
 
-  const theme = createMuiTheme();
+  const theme = createTheme();
 
   /**
    * pageMarkdown: Array<{ components: string[]; filename: string; pathname: string }>

docs/src/modules/branding/BrandingRoot.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import CssBaseline from '@material-ui/core/CssBaseline';
-import { lighten, darken, createMuiTheme, alpha, ThemeProvider } from '@material-ui/core/styles';
+import { lighten, darken, createTheme, alpha, ThemeProvider } from '@material-ui/core/styles';
 import NProgressBar from '@material-ui/docs/NProgressBar';
 import BrandingFooter from 'docs/src/modules/branding/BrandingFooter';
 
@@ -50,7 +50,7 @@ function round(value: number) {
 
 const oxfordBlue = '#001E3C';
 
-let theme = createMuiTheme({
+let theme = createTheme({
   palette: {
     text: {
       primary: oxfordBlue,
@@ -104,7 +104,7 @@ let theme = createMuiTheme({
   },
 });
 
-theme = createMuiTheme(theme, {
+theme = createTheme(theme, {
   palette: {
     action: {
       active: theme.palette.grey87,

docs/src/modules/components/ThemeContext.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import {
   ThemeProvider as MuiThemeProvider,
-  createMuiTheme as createLegacyModeTheme,
+  createTheme as createLegacyModeTheme,
   unstable_createMuiStrictModeTheme as createStrictModeTheme,
   darken,
 } from '@material-ui/core/styles';
@@ -122,11 +122,11 @@ if (process.env.NODE_ENV !== 'production') {
   DispatchContext.displayName = 'ThemeDispatchContext';
 }
 
-let createMuiTheme;
+let createTheme;
 if (process.env.REACT_MODE === 'legacy') {
-  createMuiTheme = createLegacyModeTheme;
+  createTheme = createLegacyModeTheme;
 } else {
-  createMuiTheme = createStrictModeTheme;
+  createTheme = createStrictModeTheme;
 }
 
 export function ThemeProvider(props) {
@@ -203,7 +203,7 @@ export function ThemeProvider(props) {
   }, [direction]);
 
   const theme = React.useMemo(() => {
-    const nextTheme = createMuiTheme(
+    const nextTheme = createTheme(
       {
         direction,
         nprogress: {
@@ -247,7 +247,7 @@ export function ThemeProvider(props) {
     // Expose the theme as a global variable so people can play with it.
     if (process.browser) {
       window.theme = theme;
-      window.createMuiTheme = createMuiTheme;
+      window.createTheme = createTheme;
     }
   }, [theme]);