[theme] Deprecate createMuiTheme (#26004)

docs/public/static/error-codes.json

@@ -3,7 +3,7 @@
   "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."
 }

docs/scripts/buildApi.js

@@ -16,7 +16,7 @@ import { findPagesMarkdown, findComponents } from '../src/modules/utils/find';
 import { getHeaders } from '../src/modules/utils/parseMarkdown';
 import parseTest from '../src/modules/utils/parseTest';
 import { pageToTitle } from '../src/modules/utils/helpers';
-import createMuiTheme from '../../packages/material-ui/src/styles/createMuiTheme';
+import createTheme from '../../packages/material-ui/src/styles/createTheme';
 import getStylesCreator from '../../packages/material-ui-styles/src/getStylesCreator';
 import createGenerateClassName from '../../packages/material-ui-styles/src/createGenerateClassName';
 
@@ -51,7 +51,7 @@ if (args.length < 4) {
 
 const rootDirectory = path.resolve(__dirname, '../../');
 const docsApiDirectory = path.resolve(rootDirectory, args[3]);
-const theme = createMuiTheme();
+const theme = createTheme();
 
 const inheritedComponentRegexp = /\/\/ @inheritedComponent (.*)/;
 

docs/src/modules/components/ThemeContext.js

@@ -2,7 +2,7 @@ import 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';
@@ -98,11 +98,11 @@ if (process.env.NODE_ENV !== 'production') {
 
 const useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
 
-let createMuiTheme;
+let createTheme;
 if (process.env.REACT_MODE === 'legacy') {
-  createMuiTheme = createLegacyModeTheme;
+  createTheme = createLegacyModeTheme;
 } else {
-  createMuiTheme = createStrictModeTheme;
+  createTheme = createStrictModeTheme;
 }
 
 export function ThemeProvider(props) {
@@ -184,7 +184,7 @@ export function ThemeProvider(props) {
   }, [direction]);
 
   const theme = React.useMemo(() => {
-    const nextTheme = createMuiTheme(
+    const nextTheme = createTheme(
       {
         direction,
         nprogress: {

docs/src/modules/utils/parseMarkdown.test.js

@@ -89,7 +89,7 @@ authors: ['foo', 'bar']
 # Theming
 ## API
 ### responsiveFontSizes(theme, options) => theme
-### createMuiTheme(options, ...args) => theme
+### createTheme(options, ...args) => theme
 `;
       // mock require.context
       function requireRaw() {
@@ -115,9 +115,9 @@ authors: ['foo', 'bar']
               text: 'responsiveFontSizes(​theme, options) => theme',
             },
             {
-              hash: 'createmuitheme-options-args-theme',
+              hash: 'createtheme-options-args-theme',
               level: 3,
-              text: 'createMuiTheme(​options, ...args) => theme',
+              text: 'createTheme(​options, ...args) => theme',
             },
           ],
           hash: 'api',

docs/src/modules/utils/textToHash.test.js

@@ -5,7 +5,7 @@ import textToHash from './textToHash';
 describe('textToHash', () => {
   it('should hash as expected', () => {
     const table = [
-      ['createMuiTheme(options) => theme', 'createmuitheme-options-theme'],
+      ['createTheme(options) => theme', 'createtheme-options-theme'],
       ['Typography - Font family', 'typography-font-family'],
       ["barre d'application", 'barre-dapplication'],
       [

docs/src/pages/components/about-the-lab/about-the-lab-de.md

@@ -44,7 +44,7 @@ In order to benefit from the [CSS overrides](/customization/globals/#css) and [d
 ```tsx
 import type '@material-ui/lab/themeAugmentation';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   overrides: {
     MuiTimeline: {
       root: {

docs/src/pages/components/about-the-lab/about-the-lab-es.md

@@ -44,7 +44,7 @@ Con el fin de beneficiarse de la [sobrescritura de CSS](/customization/globals/#
 ```tsx
 import type '@material-ui/lab/themeAugmentation';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   overrides: {
     MuiTimeline: {
       root: {

docs/src/pages/components/about-the-lab/about-the-lab-fr.md

@@ -44,7 +44,7 @@ De manière à pouvoir [ outrepasser le CSS ](/customization/globals/#css) et [
 ```tsx
 import type '@material-ui/lab/themeAugmentation';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   overrides: {
     MuiTimeline: {
       root: {

docs/src/pages/components/about-the-lab/about-the-lab-ja.md

@@ -44,7 +44,7 @@ yarn add @material-ui/core
 ```tsx
 import type '@material-ui/lab/themeAugmentation';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   overrides: {
     MuiTimeline: {
       root: {

docs/src/pages/components/about-the-lab/about-the-lab-pt.md

@@ -44,7 +44,7 @@ Para se beneficiar de [CSS overrides](/customization/globals/#css) e [customiza
 ```tsx
 import type '@material-ui/lab/themeAugmentation';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   overrides: {
     MuiTimeline: {
       root: {

docs/src/pages/components/about-the-lab/about-the-lab-ru.md

@@ -44,7 +44,7 @@ yarn add @material-ui/core
 ```tsx
 import type '@material-ui/lab/themeAugmentation';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   overrides: {
     MuiTimeline: {
       root: {

docs/src/pages/components/about-the-lab/about-the-lab-zh.md

@@ -44,7 +44,7 @@ yarn add @material-ui/core
 ```tsx
 import type '@material-ui/lab/themeAugmentation';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   overrides: {
     MuiTimeline: {
       root: {

docs/src/pages/components/about-the-lab/about-the-lab.md

@@ -44,7 +44,7 @@ In order to benefit from the [CSS overrides](/customization/globals/#css) and [d
 ```tsx
 import type '@material-ui/lab/themeAugmentation';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   overrides: {
     MuiTimeline: {
       root: {

docs/src/pages/components/breakpoints/breakpoints-de.md

@@ -207,7 +207,7 @@ Einige Implementierungsdetails, die interessant sein könnten:
     - ` options.initialWidth ` (*Breakpoint* [optional]): Da ` window.innerWidth ` auf dem Server nicht verfügbar ist, wird eine leere Komponente während der ersten Mounts standardmäßig gerendert. Vielleicht mögen Sie eine Heuristik verwenden, um annähernd die Bildschirmbreite des Client-Browsers zu bestimmen. Sie könnten beispielsweise den Benutzeragenten oder die Client-Hinweise verwenden. Mit https://caniuse.com/#search=client%20hint, können wir die anfängliche Breite global festlegen, indem Sie die [`benutzerdefinierten Eigenschaften`](/customization/themes/#default-props) zum Theme verwenden. Um die Anfangsbreite festzulegen, müssen wir eine benutzerdefinierte Eigenschaft mit dieser Form übergeben:
 
 ```js
-const theme = createMuiTheme({
+const theme = createTheme({
   props: {
     // withWidth component ⚛️
     MuiWithWidth: {

docs/src/pages/components/breakpoints/breakpoints-es.md

@@ -207,7 +207,7 @@ Some implementation details that might be interesting to being aware of:
     - `options.initialWidth` (*Breakpoint* [optional]): As `window.innerWidth` is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use an heuristic to approximate the screen width of the client browser screen width. For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/themes/#default-props) on the theme. In order to set the initialWidth we need to pass a custom property with this shape:
 
 ```js
-const theme = createMuiTheme({
+const theme = createTheme({
   props: {
     // withWidth component ⚛️
     MuiWithWidth: {

docs/src/pages/components/breakpoints/breakpoints-fr.md

@@ -207,7 +207,7 @@ Some implementation details that might be interesting to being aware of:
     - `options.initialWidth` (*Breakpoint* [optional]): As `window.innerWidth` is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use an heuristic to approximate the screen width of the client browser screen width. For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/themes/#default-props) on the theme. In order to set the initialWidth we need to pass a custom property with this shape:
 
 ```js
-const theme = createMuiTheme({
+const theme = createTheme({
   props: {
     // withWidth component ⚛️
     MuiWithWidth: {

docs/src/pages/components/breakpoints/breakpoints-ja.md

@@ -207,7 +207,7 @@ Some implementation details that might be interesting to being aware of:
     - `options.initialWidth` (*Breakpoint* [optional]): As `window.innerWidth` is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use an heuristic to approximate the screen width of the client browser screen width. For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/themes/#default-props) on the theme. In order to set the initialWidth we need to pass a custom property with this shape:
 
 ```js
-const theme = createMuiTheme({
+const theme = createTheme({
   props: {
     // withWidth component ⚛️
     MuiWithWidth: {

docs/src/pages/components/breakpoints/breakpoints-pt.md

@@ -207,7 +207,7 @@ Alguns detalhes de implementação que podem ser interessantes para estar ciente
     - `options.initialWidth` (*Breakpoint* [opcional]): Como `window.innerWidth` não esta disponível no servidor, retornamos uma correspondência padrão durante a primeira montagem. Você pode querer usar uma heurística para aproximar a largura da tela no navegador do cliente. Por exemplo, você poderia estar usando o user-agent ou o client-hint. https://caniuse.com/#search=client%20hint, também podemos definir a largura inicial globalmente usando [`propriedades customizadas`](/customization/themes/#default-props) no tema. Para definir o initialWidth, precisamos passar uma propriedade customizada com esta forma:
 
 ```js
-const theme = createMuiTheme({
+const theme = createTheme({
   props: {
     // Componente withWidth ⚛️
     MuiWithWidth: {

docs/src/pages/components/breakpoints/breakpoints-ru.md

@@ -207,7 +207,7 @@ type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     - `options.initialWidth` (*Breakpoint* [optional]): As `window.innerWidth` is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use an heuristic to approximate the screen width of the client browser screen width. For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/themes/#default-props) on the theme. In order to set the initialWidth we need to pass a custom property with this shape:
 
 ```js
-const theme = createMuiTheme({
+const theme = createTheme({
   props: {
     // withWidth component ⚛️
     MuiWithWidth: {

docs/src/pages/components/breakpoints/breakpoints-zh.md

@@ -207,7 +207,7 @@ type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     - `options.initialWidth` （*Breakpoint* [可选的]）： 为`window.innerWidth`在服务器上不可用， 我们默认在第一次安装期间呈现空组件。 您可能希望使用启发式来近似 客户端浏览器屏幕宽度的屏幕宽度。 例如，您可以使用用户代理或客户端提示。 https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/themes/#default-props) on the theme. 为了设置initialWidth，我们需要传递一个具有以下形状的自定义属性：
 
 ```js
-const theme = createMuiTheme({
+const theme = createTheme({
   props: {
     // withWidth component ⚛️
     MuiWithWidth: {

docs/src/pages/components/buttons/CustomizedButtons.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createMuiTheme, withStyles, makeStyles, ThemeProvider } from '@material-ui/core/styles';
+import { createTheme, withStyles, makeStyles, ThemeProvider } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import { green, purple } from '@material-ui/core/colors';
 
@@ -57,7 +57,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const theme = createMuiTheme({
+const theme = createTheme({
   palette: {
     primary: green,
   },

docs/src/pages/components/buttons/CustomizedButtons.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  createMuiTheme,
+  createTheme,
   createStyles,
   withStyles,
   makeStyles,
@@ -66,7 +66,7 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-const theme = createMuiTheme({
+const theme = createTheme({
   palette: {
     primary: green,
   },

docs/src/pages/components/text-fields/CustomizedInputs.js

@@ -4,7 +4,7 @@ import {
   ThemeProvider,
   withStyles,
   makeStyles,
-  createMuiTheme,
+  createTheme,
 } from '@material-ui/core/styles';
 import InputBase from '@material-ui/core/InputBase';
 import InputLabel from '@material-ui/core/InputLabel';
@@ -121,7 +121,7 @@ const ValidationTextField = withStyles({
   },
 })(TextField);
 
-const theme = createMuiTheme({
+const theme = createTheme({
   palette: {
     primary: green,
   },

docs/src/pages/components/text-fields/CustomizedInputs.tsx

@@ -6,7 +6,7 @@ import {
   ThemeProvider,
   withStyles,
   makeStyles,
-  createMuiTheme,
+  createTheme,
 } from '@material-ui/core/styles';
 import InputBase from '@material-ui/core/InputBase';
 import InputLabel from '@material-ui/core/InputLabel';
@@ -135,7 +135,7 @@ const ValidationTextField = withStyles({
   },
 })(TextField);
 
-const theme = createMuiTheme({
+const theme = createTheme({
   palette: {
     primary: green,
   },

docs/src/pages/components/typography/typography-de.md

@@ -63,7 +63,7 @@ Heading
 - Sie können das Mapping [global mit dem Theme](/customization/globals/#default-props) ändern:
 
 ```js
-const theme = createMuiTheme({
+const theme = createTheme({
   props: {
     MuiTypography: {
       variantMapping: {

docs/src/pages/components/typography/typography-es.md

@@ -63,7 +63,7 @@ Heading
 - You can change the mapping [globally using the theme](/customization/globals/#default-props):
 
 ```js
-const theme = createMuiTheme({
+const theme = createTheme({
   props: {
     MuiTypography: {
       variantMapping: {

docs/src/pages/components/typography/typography-fr.md

@@ -63,7 +63,7 @@ Heading
 - You can change the mapping [globally using the theme](/customization/globals/#default-props):
 
 ```js
-const theme = createMuiTheme({
+const theme = createTheme({
   props: {
     MuiTypography: {
       variantMapping: {

docs/src/pages/components/typography/typography-ja.md

@@ -63,7 +63,7 @@ Heading
 - 以下のようにテーマ使用して、[マッピング をグローバルに](/customization/globals/#default-props)変更できます。
 
 ```js
-const theme = createMuiTheme({
+const theme = createTheme({
   props: {
     MuiTypography: {
       variantMapping: {

docs/src/pages/components/typography/typography-pt.md

@@ -63,7 +63,7 @@ O componente de Tipografia (Typography) usa a propriedade `variantMapping` para
 - Você pode alterar o mapeamento [globalmente usando o tema](/customization/globals/#default-props):
 
 ```js
-const theme = createMuiTheme({
+const theme = createTheme({
   props: {
     MuiTypography: {
       variantMapping: {

docs/src/pages/components/typography/typography-ru.md

@@ -64,7 +64,7 @@ Heading
 - Вы можете изменить сопоставление вариантов [глобально используя тему](/customization/globals/#default-props):
 
 ```js
-const theme = createMuiTheme({
+const theme = createTheme({
   props: {
     MuiTypography: {
       variantMapping: {

docs/src/pages/components/typography/typography-zh.md

@@ -63,7 +63,7 @@ import 'fontsource-roboto';
 - 您也可以 [使用 theme](/customization/globals/#default-props) 来修改全局字体映射。
 
 ```js
-const theme = createMuiTheme({
+const theme = createTheme({
   props: {
     MuiTypography: {
       variantMapping: {

docs/src/pages/components/typography/typography.md

@@ -72,7 +72,7 @@ It’s important to realize that the style of a typography is independent from t
 - You can change the mapping [globally using the theme](/customization/globals/#default-props):
 
 ```js
-const theme = createMuiTheme({
+const theme = createTheme({
   props: {
     MuiTypography: {
       variantMapping: {

docs/src/pages/components/use-media-query/ThemeHelper.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createMuiTheme, ThemeProvider, useTheme } from '@material-ui/core/styles';
+import { createTheme, ThemeProvider, useTheme } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 
 function MyComponent() {
@@ -9,7 +9,7 @@ function MyComponent() {
   return <span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>;
 }
 
-const theme = createMuiTheme();
+const theme = createTheme();
 
 export default function ThemeHelper() {
   return (

docs/src/pages/components/use-media-query/ThemeHelper.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createMuiTheme, ThemeProvider, useTheme } from '@material-ui/core/styles';
+import { createTheme, ThemeProvider, useTheme } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 
 function MyComponent() {
@@ -9,7 +9,7 @@ function MyComponent() {
   return <span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>;
 }
 
-const theme = createMuiTheme();
+const theme = createTheme();
 
 export default function ThemeHelper() {
   return (