Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[theme] Rename createMuiTheme to createTheme #25992

Merged
merged 6 commits into from
Apr 29, 2021
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
Original file line number Diff line number Diff line change
@@ -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() {
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions benchmark/browser/scenarios/styled-emotion/index.js
Original file line number Diff line number Diff line change
@@ -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')(
Expand All @@ -18,7 +18,7 @@ const Div = emotionStyled('div')(
`,
);

const theme = createMuiTheme();
const theme = createTheme();

export default function StyledEmotion() {
return (
Expand Down
4 changes: 2 additions & 2 deletions benchmark/browser/scenarios/styled-sc/index.js
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -20,7 +20,7 @@ const Div = styledComponents('div')(
`,
);

const theme = createMuiTheme();
const theme = createTheme();

export default function StyledSC() {
return (
Expand Down
4 changes: 2 additions & 2 deletions benchmark/server/scenarios/server.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -35,7 +35,7 @@ function renderFullPage(html, css) {
`;
}

const theme = createMuiTheme({
const theme = createTheme({
palette: {
primary: green,
accent: red,
Expand Down
4 changes: 2 additions & 2 deletions benchmark/server/scenarios/system.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand All @@ -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'],
Expand Down
4 changes: 2 additions & 2 deletions docs/public/static/error-codes.json
Original file line number Diff line number Diff line change
Expand Up @@ -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} });"
}
4 changes: 2 additions & 2 deletions docs/scripts/buildApi.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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 }>
Expand Down
6 changes: 3 additions & 3 deletions docs/src/modules/branding/BrandingRoot.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -50,7 +50,7 @@ function round(value: number) {

const oxfordBlue = '#001E3C';

let theme = createMuiTheme({
let theme = createTheme({
palette: {
text: {
primary: oxfordBlue,
Expand Down Expand Up @@ -104,7 +104,7 @@ let theme = createMuiTheme({
},
});

theme = createMuiTheme(theme, {
theme = createTheme(theme, {
palette: {
action: {
active: theme.palette.grey87,
Expand Down
12 changes: 6 additions & 6 deletions docs/src/modules/components/ThemeContext.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -203,7 +203,7 @@ export function ThemeProvider(props) {
}, [direction]);

const theme = React.useMemo(() => {
const nextTheme = createMuiTheme(
const nextTheme = createTheme(
{
direction,
nprogress: {
Expand Down Expand Up @@ -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]);

Expand Down
6 changes: 3 additions & 3 deletions docs/src/modules/utils/parseMarkdown.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion docs/src/modules/utils/textToHash.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
[
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ yarn add @material-ui/core
```tsx
import '@material-ui/lab/themeAugmentation';

const theme = createMuiTheme({
const theme = createTheme({
components: {
MuiTimeline: {
styleOverrides: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ yarn add @material-ui/core
```tsx
import '@material-ui/lab/themeAugmentation';

const theme = createMuiTheme({
const theme = createTheme({
components: {
MuiTimeline: {
styleOverrides: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ yarn add @material-ui/core@next
```tsx
import '@material-ui/lab/themeAugmentation';

const theme = createMuiTheme({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we are supposed to do changes to the translated files. @oliviertassinari ?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's best to avoid it as it add noises in the pull requests. But since this one is already very noisy, no strong preferences.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got ya!

const theme = createTheme({
components: {
MuiTimeline: {
styleOverrides: {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/about-the-lab/about-the-lab.md
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/buttons/CustomizedButtons.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import {
createMuiTheme,
createTheme,
experimentalStyled,
makeStyles,
ThemeProvider,
Expand Down Expand Up @@ -58,7 +58,7 @@ const useStyles = makeStyles((theme) => ({
},
}));

const theme = createMuiTheme({
const theme = createTheme({
palette: {
primary: green,
},
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/buttons/CustomizedButtons.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import {
createMuiTheme,
createTheme,
createStyles,
experimentalStyled,
makeStyles,
Expand Down Expand Up @@ -62,7 +62,7 @@ const useStyles = makeStyles((theme: Theme) =>
}),
);

const theme = createMuiTheme({
const theme = createTheme({
palette: {
primary: green,
},
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/css-baseline/css-baseline.md
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/icons/FontAwesomeIconSize.js
Original file line number Diff line number Diff line change
@@ -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: {
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/icons/FontAwesomeIconSize.tsx
Original file line number Diff line number Diff line change
@@ -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: {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/icons/icons-de.md
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
Loading