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

siriwatknp · Apr 29, 2021 · 684a0d5 · 684a0d5
1 parent 4567565
commit 684a0d5
Show file tree

Hide file tree

Showing 322 changed files with 993 additions and 960 deletions.
diff --git a/benchmark/browser/scenarios/styled-components-box-material-ui-system/index.js b/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() {

diff --git a/benchmark/browser/scenarios/styled-components-box-styled-system/index.js b/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;

diff --git a/benchmark/browser/scenarios/styled-emotion/index.js b/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 (

diff --git a/benchmark/browser/scenarios/styled-sc/index.js b/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 (

diff --git a/benchmark/server/scenarios/server.js b/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,

diff --git a/benchmark/server/scenarios/system.js b/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'],

diff --git a/docs/public/static/error-codes.json b/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} });"
 }
diff --git a/docs/scripts/buildApi.ts b/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 }>

diff --git a/docs/src/modules/branding/BrandingRoot.tsx b/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,

diff --git a/docs/src/modules/components/ThemeContext.js b/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]);
 

diff --git a/docs/src/modules/utils/parseMarkdown.test.js b/docs/src/modules/utils/parseMarkdown.test.js
@@ -103,7 +103,7 @@ authors: ['foo', 'bar']
 # Theming
 ## API
 ### responsiveFontSizes(theme, options) => theme
-### createMuiTheme(options, ...args) => theme
+### createTheme(options, ...args) => theme
 `;
       // mock require.context
       function requireRaw() {
@@ -129,9 +129,9 @@ authors: ['foo', 'bar']
               text: 'responsiveFontSizes(&#8203;theme, options) =&gt; theme',
             },
             {
-              hash: 'createmuitheme-options-args-theme',
+              hash: 'createtheme-options-args-theme',
               level: 3,
-              text: 'createMuiTheme(&#8203;options, ...args) =&gt; theme',
+              text: 'createTheme(&#8203;options, ...args) =&gt; theme',
             },
           ],
           hash: 'api',

diff --git a/docs/src/modules/utils/textToHash.test.js b/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'],
       [

diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-de.md b/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/theme-components/#gl
 ```tsx
 import '@material-ui/lab/themeAugmentation';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   components: {
     MuiTimeline: {
       styleOverrides: {

diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-es.md b/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/theme-com
 ```tsx
 import '@material-ui/lab/themeAugmentation';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   components: {
     MuiTimeline: {
       styleOverrides: {

diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-fr.md b/docs/src/pages/components/about-the-lab/about-the-lab-fr.md
@@ -44,7 +44,7 @@ De manière à pouvoir [ outrepasser le CSS ](/customization/theme-components/#g
 ```tsx
 import '@material-ui/lab/themeAugmentation';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   components: {
     MuiTimeline: {
       styleOverrides: {

diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-ja.md b/docs/src/pages/components/about-the-lab/about-the-lab-ja.md
@@ -44,7 +44,7 @@ yarn add @material-ui/core
 ```tsx
 import '@material-ui/lab/themeAugmentation';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   components: {
     MuiTimeline: {
       styleOverrides: {

diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-pt.md b/docs/src/pages/components/about-the-lab/about-the-lab-pt.md
@@ -44,7 +44,7 @@ Para se beneficiar de [CSS overrides](/customization/theme-components/#global-st
 ```tsx
 import '@material-ui/lab/themeAugmentation';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   components: {
     MuiTimeline: {
       styleOverrides: {

diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-ru.md b/docs/src/pages/components/about-the-lab/about-the-lab-ru.md
@@ -44,7 +44,7 @@ yarn add @material-ui/core
 ```tsx
 import '@material-ui/lab/themeAugmentation';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   components: {
     MuiTimeline: {
       styleOverrides: {

diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-zh.md b/docs/src/pages/components/about-the-lab/about-the-lab-zh.md
@@ -44,7 +44,7 @@ yarn add @material-ui/core@next
 ```tsx
 import '@material-ui/lab/themeAugmentation';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   components: {
     MuiTimeline: {
       styleOverrides: {

diff --git a/docs/src/pages/components/about-the-lab/about-the-lab.md b/docs/src/pages/components/about-the-lab/about-the-lab.md
@@ -45,7 +45,7 @@ In order to benefit from the [CSS overrides](/customization/theme-components/#gl
 ```tsx
 import '@material-ui/lab/themeAugmentation';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   components: {
     MuiTimeline: {
       styleOverrides: {

diff --git a/docs/src/pages/components/buttons/CustomizedButtons.js b/docs/src/pages/components/buttons/CustomizedButtons.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  createMuiTheme,
+  createTheme,
   experimentalStyled,
   makeStyles,
   ThemeProvider,
@@ -58,7 +58,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const theme = createMuiTheme({
+const theme = createTheme({
   palette: {
     primary: green,
   },

diff --git a/docs/src/pages/components/buttons/CustomizedButtons.tsx b/docs/src/pages/components/buttons/CustomizedButtons.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  createMuiTheme,
+  createTheme,
   createStyles,
   experimentalStyled,
   makeStyles,
@@ -62,7 +62,7 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-const theme = createMuiTheme({
+const theme = createTheme({
   palette: {
     primary: green,
   },

diff --git a/docs/src/pages/components/css-baseline/css-baseline.md b/docs/src/pages/components/css-baseline/css-baseline.md
@@ -72,7 +72,7 @@ The colors of the scrollbars can be customized to improve the contrast (especial
 ```jsx
 import darkScrollbar from '@material-ui/core/darkScrollbar';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   components: {
     MuiCssBaseline: {
       styleOverrides: {

diff --git a/docs/src/pages/components/icons/FontAwesomeIconSize.js b/docs/src/pages/components/icons/FontAwesomeIconSize.js
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { loadCSS } from 'fg-loadcss';
-import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider, createTheme } from '@material-ui/core/styles';
 import Box from '@material-ui/core/Box';
 import Icon from '@material-ui/core/Icon';
 import MdPhone from '@material-ui/icons/Phone';
 import Chip from '@material-ui/core/Chip';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   components: {
     MuiIcon: {
       styleOverrides: {

diff --git a/docs/src/pages/components/icons/FontAwesomeIconSize.tsx b/docs/src/pages/components/icons/FontAwesomeIconSize.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { loadCSS } from 'fg-loadcss';
-import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider, createTheme } from '@material-ui/core/styles';
 import Box from '@material-ui/core/Box';
 import Icon from '@material-ui/core/Icon';
 import MdPhone from '@material-ui/icons/Phone';
 import Chip from '@material-ui/core/Chip';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   components: {
     MuiIcon: {
       styleOverrides: {

diff --git a/docs/src/pages/components/icons/icons-de.md b/docs/src/pages/components/icons/icons-de.md
@@ -220,7 +220,7 @@ import Icon from '@material-ui/core/Icon';
 Modifying the `baseClassName` prop for each component usage is repetitive. You can change the default prop globally with the theme
 
 ```js
-const theme = createMuiTheme({
+const theme = createTheme({
   components: {
     MuiIcon: {
       defaultProps: {