From fad48de8f7d9a449adb4ab9796e9ed1c2c0593ca Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 22 Sep 2020 16:49:45 +0200 Subject: [PATCH] [theme] Rename `type` to `mode` (#22687) --- docs/src/modules/components/AppFrame.js | 10 +++--- docs/src/modules/components/AppSearch.js | 2 +- .../modules/components/AppTableOfContents.js | 4 +-- .../src/modules/components/DiamondSponsors.js | 2 +- .../src/modules/components/MarkdownElement.js | 6 ++-- docs/src/modules/components/ThemeContext.js | 32 +++++++++---------- .../components/autocomplete/CustomizedHook.js | 18 +++++------ .../autocomplete/CustomizedHook.tsx | 18 +++++------ .../progress/CustomizedProgressBars.js | 4 +-- .../progress/CustomizedProgressBars.tsx | 4 +-- .../pages/components/tables/EnhancedTable.js | 2 +- .../pages/components/tables/EnhancedTable.tsx | 2 +- .../default-theme/DefaultTheme.js | 2 +- .../pages/customization/palette/DarkTheme.js | 2 +- .../templates/dashboard/Dashboard.js | 2 +- .../templates/dashboard/Dashboard.tsx | 2 +- .../templates/pricing/Pricing.js | 2 +- .../templates/pricing/Pricing.tsx | 2 +- .../templates/sign-in-side/SignInSide.js | 2 +- .../templates/sign-in-side/SignInSide.tsx | 2 +- .../templates/sticky-footer/StickyFooter.js | 2 +- .../templates/sticky-footer/StickyFooter.tsx | 2 +- .../pages/guides/migration-v4/migration-v4.md | 9 ++++++ docs/src/pages/landing/Themes.js | 2 +- .../code/ThemeProvider.tsx | 10 +++--- .../Material-UI.framerfx/design/document.json | 2 +- framer/scripts/additionalProps.js | 6 ++-- packages/material-ui-lab/src/Alert/Alert.js | 4 +-- .../src/PaginationItem/PaginationItem.js | 2 +- .../material-ui-lab/src/Skeleton/Skeleton.js | 2 +- packages/material-ui/src/AppBar/AppBar.js | 2 +- packages/material-ui/src/Avatar/Avatar.js | 2 +- packages/material-ui/src/Button/Button.js | 2 +- .../src/ButtonGroup/ButtonGroup.js | 4 +-- packages/material-ui/src/Chip/Chip.js | 8 ++--- .../src/FilledInput/FilledInput.js | 8 ++--- packages/material-ui/src/Input/Input.js | 2 +- .../material-ui/src/InputBase/InputBase.js | 2 +- .../src/LinearProgress/LinearProgress.js | 2 +- .../src/NativeSelect/NativeSelect.js | 2 +- .../src/OutlinedInput/OutlinedInput.js | 8 ++--- packages/material-ui/src/Slider/Slider.js | 2 +- .../src/SnackbarContent/SnackbarContent.js | 2 +- .../src/StepConnector/StepConnector.js | 2 +- .../src/StepContent/StepContent.js | 2 +- packages/material-ui/src/Switch/Switch.js | 18 +++++------ .../material-ui/src/TableCell/TableCell.js | 2 +- packages/material-ui/src/index.d.ts | 2 +- .../material-ui/src/styles/adaptV4Theme.js | 10 ++++-- .../src/styles/adaptV4Theme.test.js | 28 +++++++++++++++- .../material-ui/src/styles/createPalette.d.ts | 6 ++-- .../material-ui/src/styles/createPalette.js | 16 +++++----- .../src/styles/createPalette.test.js | 8 ++--- .../test/typescript/styles.spec.tsx | 2 +- 54 files changed, 172 insertions(+), 131 deletions(-) diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js index 87a96eab50f2f0..c1c4350701ed45 100644 --- a/docs/src/modules/components/AppFrame.js +++ b/docs/src/modules/components/AppFrame.js @@ -110,8 +110,8 @@ const styles = (theme) => ({ }, }, appBar: { - color: theme.palette.type === 'light' ? null : '#fff', - backgroundColor: theme.palette.type === 'light' ? null : theme.palette.background.level2, + color: theme.palette.mode === 'light' ? null : '#fff', + backgroundColor: theme.palette.mode === 'light' ? null : theme.palette.background.level2, transition: theme.transitions.create('width'), }, language: { @@ -171,9 +171,9 @@ function AppFrame(props) { const changeTheme = useChangeTheme(); const handleTogglePaletteType = () => { - const paletteType = theme.palette.type === 'light' ? 'dark' : 'light'; + const paletteMode = theme.palette.mode === 'light' ? 'dark' : 'light'; - changeTheme({ paletteType }); + changeTheme({ paletteMode }); }; const handleToggleDirection = () => { changeTheme({ direction: theme.direction === 'ltr' ? 'rtl' : 'ltr' }); @@ -310,7 +310,7 @@ function AppFrame(props) { data-ga-event-category="header" data-ga-event-action="dark" > - {theme.palette.type === 'light' ? : } + {theme.palette.mode === 'light' ? : } diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js index 0103198422a0c0..9cdb67703c37fc 100644 --- a/docs/src/modules/components/AppSearch.js +++ b/docs/src/modules/components/AppSearch.js @@ -45,7 +45,7 @@ const useStyles = makeStyles( fontWeight: theme.typography.fontWeightRegular, }, '& .algolia-docsearch-suggestion--highlight': { - color: theme.palette.type === 'light' ? '#174d8c' : '#acccf1', + color: theme.palette.mode === 'light' ? '#174d8c' : '#acccf1', }, '& .algolia-docsearch-suggestion': { textDecoration: 'none', diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js index b7845c7837683a..27bfce7b3c0762 100644 --- a/docs/src/modules/components/AppTableOfContents.js +++ b/docs/src/modules/components/AppTableOfContents.js @@ -41,11 +41,11 @@ const useStyles = makeStyles((theme) => ({ boxSizing: 'border-box', '&:hover': { borderLeftColor: - theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900], + theme.palette.mode === 'light' ? theme.palette.grey[200] : theme.palette.grey[900], }, '&$active,&:active': { borderLeftColor: - theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[800], + theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800], }, }, secondaryItem: { diff --git a/docs/src/modules/components/DiamondSponsors.js b/docs/src/modules/components/DiamondSponsors.js index 740121218ac683..38e6396be9c97d 100644 --- a/docs/src/modules/components/DiamondSponsors.js +++ b/docs/src/modules/components/DiamondSponsors.js @@ -57,7 +57,7 @@ export default function DiamondSponsors(props) { octopus ({ padding: '0 3px', color: theme.palette.text.primary, backgroundColor: - theme.palette.type === 'light' ? 'rgba(255, 229, 100, 0.2)' : 'rgba(255, 229, 100, 0.2)', + theme.palette.mode === 'light' ? 'rgba(255, 229, 100, 0.2)' : 'rgba(255, 229, 100, 0.2)', fontSize: '.85em', borderRadius: 2, }, @@ -130,11 +130,11 @@ const styles = (theme) => ({ fontFamily: 'Consolas, "Liberation Mono", Menlo, monospace', }, '& .required': { - color: theme.palette.type === 'light' ? '#006500' : '#a5ffa5', + color: theme.palette.mode === 'light' ? '#006500' : '#a5ffa5', }, '& .prop-type': { fontFamily: 'Consolas, "Liberation Mono", Menlo, monospace', - color: theme.palette.type === 'light' ? '#932981' : '#ffb6ec', + color: theme.palette.mode === 'light' ? '#932981' : '#ffb6ec', }, '& .prop-default': { fontFamily: 'Consolas, "Liberation Mono", Menlo, monospace', diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js index 163318b956ff2c..16448cc170c019 100644 --- a/docs/src/modules/components/ThemeContext.js +++ b/docs/src/modules/components/ThemeContext.js @@ -169,7 +169,7 @@ export function ThemeProvider(props) { case 'CHANGE': return { ...state, - paletteType: action.payload.paletteType || state.paletteType, + paletteMode: action.payload.paletteMode || state.paletteMode, direction: action.payload.direction || state.direction, paletteColors: action.payload.paletteColors || state.paletteColors, }; @@ -180,27 +180,27 @@ export function ThemeProvider(props) { const userLanguage = useSelector((state) => state.options.userLanguage); const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); - const preferredType = prefersDarkMode ? 'dark' : 'light'; - const { dense, direction, paletteColors, paletteType = preferredType, spacing } = themeOptions; + const preferredMode = prefersDarkMode ? 'dark' : 'light'; + const { dense, direction, paletteColors, paletteMode = preferredMode, spacing } = themeOptions; useLazyCSS('/static/styles/prism-okaidia.css', '#prismjs'); React.useEffect(() => { if (process.browser) { const nextPaletteColors = JSON.parse(getCookie('paletteColors') || 'null'); - const nextPaletteType = getCookie('paletteType'); + const nextPaletteType = getCookie('paletteMode'); dispatch({ type: 'CHANGE', - payload: { paletteColors: nextPaletteColors, paletteType: nextPaletteType }, + payload: { paletteColors: nextPaletteColors, paletteMode: nextPaletteType }, }); } }, []); - // persist paletteType + // persist paletteMode React.useEffect(() => { - document.cookie = `paletteType=${paletteType};path=/;max-age=31536000`; - }, [paletteType]); + document.cookie = `paletteMode=${paletteMode};path=/;max-age=31536000`; + }, [paletteMode]); useEnhancedEffect(() => { document.body.dir = direction; @@ -211,18 +211,18 @@ export function ThemeProvider(props) { { direction, nprogress: { - color: paletteType === 'light' ? '#000' : '#fff', + color: paletteMode === 'light' ? '#000' : '#fff', }, palette: { primary: { - main: paletteType === 'light' ? blue[700] : blue[200], + main: paletteMode === 'light' ? blue[700] : blue[200], }, secondary: { - main: paletteType === 'light' ? darken(pink.A400, 0.1) : pink[200], + main: paletteMode === 'light' ? darken(pink.A400, 0.1) : pink[200], }, - type: paletteType, + mode: paletteMode, background: { - default: paletteType === 'light' ? '#fff' : '#121212', + default: paletteMode === 'light' ? '#fff' : '#121212', }, ...paletteColors, }, @@ -233,13 +233,13 @@ export function ThemeProvider(props) { ); nextTheme.palette.background.level2 = - paletteType === 'light' ? nextTheme.palette.grey[100] : '#333'; + paletteMode === 'light' ? nextTheme.palette.grey[100] : '#333'; nextTheme.palette.background.level1 = - paletteType === 'light' ? '#fff' : nextTheme.palette.grey[900]; + paletteMode === 'light' ? '#fff' : nextTheme.palette.grey[900]; return nextTheme; - }, [dense, direction, paletteColors, paletteType, spacing, userLanguage]); + }, [dense, direction, paletteColors, paletteMode, spacing, userLanguage]); React.useEffect(() => { // Expose the theme as a global variable so people can play with it. diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.js b/docs/src/pages/components/autocomplete/CustomizedHook.js index 56b3478db7e140..3b77a4d2a2b102 100644 --- a/docs/src/pages/components/autocomplete/CustomizedHook.js +++ b/docs/src/pages/components/autocomplete/CustomizedHook.js @@ -16,8 +16,8 @@ const Label = styled('label')` const InputWrapper = styled('div')` ${({ theme }) => ` width: 300px; - border: 1px solid ${theme.palette.type === 'dark' ? '#434343' : '#d9d9d9'}; - background-color: ${theme.palette.type === 'dark' ? '#141414' : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? '#434343' : '#d9d9d9'}; + background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'}; border-radius: 4px; padding: 1px; display: flex; @@ -33,8 +33,8 @@ const InputWrapper = styled('div')` } & input { - background-color: ${theme.palette.type === 'dark' ? '#141414' : '#fff'}; - color: ${theme.palette.type === 'dark' ? '#fff' : '#000'}; + background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'}; + color: ${theme.palette.mode === 'dark' ? '#fff' : '#000'}; font-size: 14px; height: 30px; box-sizing: border-box; @@ -62,9 +62,9 @@ const Tag = styled(({ label, onDelete, ...props }) => ( margin: 2px; line-height: 22px; background-color: ${ - theme.palette.type === 'dark' ? 'rgba(255,255,255,0.08)' : '#fafafa' + theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.08)' : '#fafafa' }; - border: 1px solid ${theme.palette.type === 'dark' ? '#303030' : '#e8e8e8'}; + border: 1px solid ${theme.palette.mode === 'dark' ? '#303030' : '#e8e8e8'}; border-radius: 2px; box-sizing: content-box; padding: 0 4px 0 10px; @@ -97,7 +97,7 @@ const Listbox = styled('ul')` padding: 0; position: absolute; list-style: none; - background-color: ${theme.palette.type === 'dark' ? '#141414' : '#fff'}; + background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'}; overflow: auto; max-height: 250px; border-radius: 4px; @@ -118,7 +118,7 @@ const Listbox = styled('ul')` } & li[aria-selected='true'] { - background-color: ${theme.palette.type === 'dark' ? '#2b2b2b' : '#fafafa'}; + background-color: ${theme.palette.mode === 'dark' ? '#2b2b2b' : '#fafafa'}; font-weight: 600; & svg { @@ -127,7 +127,7 @@ const Listbox = styled('ul')` } & li[data-focus='true'] { - background-color: ${theme.palette.type === 'dark' ? '#003b57' : '#e6f7ff'}; + background-color: ${theme.palette.mode === 'dark' ? '#003b57' : '#e6f7ff'}; cursor: pointer; & svg { diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.tsx b/docs/src/pages/components/autocomplete/CustomizedHook.tsx index 93ce9ce9300319..c493731607c531 100644 --- a/docs/src/pages/components/autocomplete/CustomizedHook.tsx +++ b/docs/src/pages/components/autocomplete/CustomizedHook.tsx @@ -16,8 +16,8 @@ const Label = styled('label')` const InputWrapper = styled('div')` ${({ theme }) => ` width: 300px; - border: 1px solid ${theme.palette.type === 'dark' ? '#434343' : '#d9d9d9'}; - background-color: ${theme.palette.type === 'dark' ? '#141414' : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? '#434343' : '#d9d9d9'}; + background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'}; border-radius: 4px; padding: 1px; display: flex; @@ -33,8 +33,8 @@ const InputWrapper = styled('div')` } & input { - background-color: ${theme.palette.type === 'dark' ? '#141414' : '#fff'}; - color: ${theme.palette.type === 'dark' ? '#fff' : '#000'}; + background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'}; + color: ${theme.palette.mode === 'dark' ? '#fff' : '#000'}; font-size: 14px; height: 30px; box-sizing: border-box; @@ -62,9 +62,9 @@ const Tag = styled(({ label, onDelete, ...props }) => ( margin: 2px; line-height: 22px; background-color: ${ - theme.palette.type === 'dark' ? 'rgba(255,255,255,0.08)' : '#fafafa' + theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.08)' : '#fafafa' }; - border: 1px solid ${theme.palette.type === 'dark' ? '#303030' : '#e8e8e8'}; + border: 1px solid ${theme.palette.mode === 'dark' ? '#303030' : '#e8e8e8'}; border-radius: 2px; box-sizing: content-box; padding: 0 4px 0 10px; @@ -97,7 +97,7 @@ const Listbox = styled('ul')` padding: 0; position: absolute; list-style: none; - background-color: ${theme.palette.type === 'dark' ? '#141414' : '#fff'}; + background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'}; overflow: auto; max-height: 250px; border-radius: 4px; @@ -118,7 +118,7 @@ const Listbox = styled('ul')` } & li[aria-selected='true'] { - background-color: ${theme.palette.type === 'dark' ? '#2b2b2b' : '#fafafa'}; + background-color: ${theme.palette.mode === 'dark' ? '#2b2b2b' : '#fafafa'}; font-weight: 600; & svg { @@ -127,7 +127,7 @@ const Listbox = styled('ul')` } & li[data-focus='true'] { - background-color: ${theme.palette.type === 'dark' ? '#003b57' : '#e6f7ff'}; + background-color: ${theme.palette.mode === 'dark' ? '#003b57' : '#e6f7ff'}; cursor: pointer; & svg { diff --git a/docs/src/pages/components/progress/CustomizedProgressBars.js b/docs/src/pages/components/progress/CustomizedProgressBars.js index 1b884317ecb664..c2186eac779a73 100644 --- a/docs/src/pages/components/progress/CustomizedProgressBars.js +++ b/docs/src/pages/components/progress/CustomizedProgressBars.js @@ -10,7 +10,7 @@ const BorderLinearProgress = withStyles((theme) => ({ }, colorPrimary: { backgroundColor: - theme.palette.grey[theme.palette.type === 'light' ? 200 : 700], + theme.palette.grey[theme.palette.mode === 'light' ? 200 : 700], }, bar: { borderRadius: 5, @@ -24,7 +24,7 @@ const useStylesFacebook = makeStyles((theme) => ({ position: 'relative', }, bottom: { - color: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700], + color: theme.palette.grey[theme.palette.mode === 'light' ? 200 : 700], }, top: { color: '#1a90ff', diff --git a/docs/src/pages/components/progress/CustomizedProgressBars.tsx b/docs/src/pages/components/progress/CustomizedProgressBars.tsx index 6bc55c85d410bc..add59c348f291b 100644 --- a/docs/src/pages/components/progress/CustomizedProgressBars.tsx +++ b/docs/src/pages/components/progress/CustomizedProgressBars.tsx @@ -18,7 +18,7 @@ const BorderLinearProgress = withStyles((theme: Theme) => }, colorPrimary: { backgroundColor: - theme.palette.grey[theme.palette.type === 'light' ? 200 : 700], + theme.palette.grey[theme.palette.mode === 'light' ? 200 : 700], }, bar: { borderRadius: 5, @@ -34,7 +34,7 @@ const useStylesFacebook = makeStyles((theme: Theme) => position: 'relative', }, bottom: { - color: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700], + color: theme.palette.grey[theme.palette.mode === 'light' ? 200 : 700], }, top: { color: '#1a90ff', diff --git a/docs/src/pages/components/tables/EnhancedTable.js b/docs/src/pages/components/tables/EnhancedTable.js index c853ca951ce370..c688e80cdc5f8a 100644 --- a/docs/src/pages/components/tables/EnhancedTable.js +++ b/docs/src/pages/components/tables/EnhancedTable.js @@ -191,7 +191,7 @@ const useToolbarStyles = makeStyles((theme) => ({ paddingRight: theme.spacing(1), }, highlight: - theme.palette.type === 'light' + theme.palette.mode === 'light' ? { color: theme.palette.secondary.main, backgroundColor: lighten(theme.palette.secondary.light, 0.85), diff --git a/docs/src/pages/components/tables/EnhancedTable.tsx b/docs/src/pages/components/tables/EnhancedTable.tsx index c3cefc218b45f4..13c216f7144141 100644 --- a/docs/src/pages/components/tables/EnhancedTable.tsx +++ b/docs/src/pages/components/tables/EnhancedTable.tsx @@ -233,7 +233,7 @@ const useToolbarStyles = makeStyles((theme: Theme) => paddingRight: theme.spacing(1), }, highlight: - theme.palette.type === 'light' + theme.palette.mode === 'light' ? { color: theme.palette.secondary.main, backgroundColor: lighten(theme.palette.secondary.light, 0.85), diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js index 3e2abe02d38c70..74cc03a331aa6f 100644 --- a/docs/src/pages/customization/default-theme/DefaultTheme.js +++ b/docs/src/pages/customization/default-theme/DefaultTheme.js @@ -299,7 +299,7 @@ function DefaultTheme(props) { const data = React.useMemo(() => { return createMuiTheme({ - palette: { type: darkTheme ? 'dark' : 'light' }, + palette: { mode: darkTheme ? 'dark' : 'light' }, }); }, [darkTheme]); diff --git a/docs/src/pages/customization/palette/DarkTheme.js b/docs/src/pages/customization/palette/DarkTheme.js index 1b6620d5c0923e..7d1fc77da666e9 100644 --- a/docs/src/pages/customization/palette/DarkTheme.js +++ b/docs/src/pages/customization/palette/DarkTheme.js @@ -102,7 +102,7 @@ const lightTheme = createMuiTheme(); const darkTheme = createMuiTheme({ palette: { // Switching the dark mode on is a single property value change. - type: 'dark', + mode: 'dark', }, }); diff --git a/docs/src/pages/getting-started/templates/dashboard/Dashboard.js b/docs/src/pages/getting-started/templates/dashboard/Dashboard.js index 8ef003fde214f6..8b6ceb2721e04c 100644 --- a/docs/src/pages/getting-started/templates/dashboard/Dashboard.js +++ b/docs/src/pages/getting-started/templates/dashboard/Dashboard.js @@ -99,7 +99,7 @@ const useStyles = makeStyles((theme) => ({ appBarSpacer: theme.mixins.toolbar, content: { backgroundColor: - theme.palette.type === 'light' + theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900], flexGrow: 1, diff --git a/docs/src/pages/getting-started/templates/dashboard/Dashboard.tsx b/docs/src/pages/getting-started/templates/dashboard/Dashboard.tsx index 8ef003fde214f6..8b6ceb2721e04c 100644 --- a/docs/src/pages/getting-started/templates/dashboard/Dashboard.tsx +++ b/docs/src/pages/getting-started/templates/dashboard/Dashboard.tsx @@ -99,7 +99,7 @@ const useStyles = makeStyles((theme) => ({ appBarSpacer: theme.mixins.toolbar, content: { backgroundColor: - theme.palette.type === 'light' + theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900], flexGrow: 1, diff --git a/docs/src/pages/getting-started/templates/pricing/Pricing.js b/docs/src/pages/getting-started/templates/pricing/Pricing.js index 23f4568830d2b6..da93035bea7dd0 100644 --- a/docs/src/pages/getting-started/templates/pricing/Pricing.js +++ b/docs/src/pages/getting-started/templates/pricing/Pricing.js @@ -53,7 +53,7 @@ const useStyles = makeStyles((theme) => ({ }, cardHeader: { backgroundColor: - theme.palette.type === 'light' + theme.palette.mode === 'light' ? theme.palette.grey[200] : theme.palette.grey[700], }, diff --git a/docs/src/pages/getting-started/templates/pricing/Pricing.tsx b/docs/src/pages/getting-started/templates/pricing/Pricing.tsx index 17d574e04bb573..c5133f1e411559 100644 --- a/docs/src/pages/getting-started/templates/pricing/Pricing.tsx +++ b/docs/src/pages/getting-started/templates/pricing/Pricing.tsx @@ -53,7 +53,7 @@ const useStyles = makeStyles((theme) => ({ }, cardHeader: { backgroundColor: - theme.palette.type === 'light' + theme.palette.mode === 'light' ? theme.palette.grey[200] : theme.palette.grey[700], }, diff --git a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js index 971368f65164a6..7b5dbdbfdfbc93 100644 --- a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js +++ b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js @@ -34,7 +34,7 @@ const useStyles = makeStyles((theme) => ({ backgroundImage: 'url(https://source.unsplash.com/random)', backgroundRepeat: 'no-repeat', backgroundColor: - theme.palette.type === 'light' + theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.grey[900], backgroundSize: 'cover', diff --git a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.tsx b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.tsx index 971368f65164a6..7b5dbdbfdfbc93 100644 --- a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.tsx +++ b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.tsx @@ -34,7 +34,7 @@ const useStyles = makeStyles((theme) => ({ backgroundImage: 'url(https://source.unsplash.com/random)', backgroundRepeat: 'no-repeat', backgroundColor: - theme.palette.type === 'light' + theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.grey[900], backgroundSize: 'cover', diff --git a/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js b/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js index 0321fb6677bf8c..5a4bb92d7035c6 100644 --- a/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js +++ b/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js @@ -32,7 +32,7 @@ const useStyles = makeStyles((theme) => ({ padding: theme.spacing(3, 2), marginTop: 'auto', backgroundColor: - theme.palette.type === 'light' + theme.palette.mode === 'light' ? theme.palette.grey[200] : theme.palette.grey[800], }, diff --git a/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.tsx b/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.tsx index 0321fb6677bf8c..5a4bb92d7035c6 100644 --- a/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.tsx +++ b/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.tsx @@ -32,7 +32,7 @@ const useStyles = makeStyles((theme) => ({ padding: theme.spacing(3, 2), marginTop: 'auto', backgroundColor: - theme.palette.type === 'light' + theme.palette.mode === 'light' ? theme.palette.grey[200] : theme.palette.grey[800], }, diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index ee17898d5e621f..1e8815c6a1260a 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -126,6 +126,15 @@ import { createMuiTheme } from '@material-ui/core/styles'; - The components' definition inside the theme were restructure under the `components` key, to allow people easier discoverability about the definitions regarding one component. +- The `theme.palette.type` was renamed to `theme.palette.mode`, to better follow the "dark mode" term that is usually used for describing this feature. + +```diff +import { createMuiTheme } from '@material-ui/core/styles'; + +-const theme = createMuitheme({palette: { type: 'dark' }}), ++const theme = createMuitheme({palette: { mode: 'dark' }}), +``` + 1. `props` ```diff diff --git a/docs/src/pages/landing/Themes.js b/docs/src/pages/landing/Themes.js index 7233b6f84f4029..7bda84c387aede 100644 --- a/docs/src/pages/landing/Themes.js +++ b/docs/src/pages/landing/Themes.js @@ -59,7 +59,7 @@ export default function Themes() { {t('themesButton')} { type: { name: 'string' }, defaultValue: { value: componentSettings[component].propValues.message }, }, - paletteType: { - type: { name: 'enum', value: [{ value: "'dark'" }, { value: "'light'" }] }, - description: 'Theme palette type', + paletteMode: { + mode: { name: 'enum', value: [{ value: "'dark'" }, { value: "'light'" }] }, + description: 'Theme palette mode', defaultValue: { value: "'light'" }, }, primaryAction: { diff --git a/packages/material-ui-lab/src/Alert/Alert.js b/packages/material-ui-lab/src/Alert/Alert.js index 6153215d01be4a..6ed6e5e8e9e157 100644 --- a/packages/material-ui-lab/src/Alert/Alert.js +++ b/packages/material-ui-lab/src/Alert/Alert.js @@ -13,8 +13,8 @@ import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined'; import CloseIcon from '../internal/svg-icons/Close'; export const styles = (theme) => { - const getColor = theme.palette.type === 'light' ? darken : lighten; - const getBackgroundColor = theme.palette.type === 'light' ? lighten : darken; + const getColor = theme.palette.mode === 'light' ? darken : lighten; + const getBackgroundColor = theme.palette.mode === 'light' ? lighten : darken; return { /* Styles applied to the root element. */ diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index 5949224f474c0f..3dc56b9c7094eb 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -127,7 +127,7 @@ export const styles = (theme) => ({ /* Styles applied to the root element if `variant="outlined"`. */ outlined: { border: `1px solid ${ - theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' + theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' }`, '&$selected': { '&$disabled': { diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.js b/packages/material-ui-lab/src/Skeleton/Skeleton.js index 21c01b352caca2..b98c6cb519a73c 100644 --- a/packages/material-ui-lab/src/Skeleton/Skeleton.js +++ b/packages/material-ui-lab/src/Skeleton/Skeleton.js @@ -20,7 +20,7 @@ export const styles = (theme) => { // Create a "on paper" color with sufficient contrast retaining the color backgroundColor: fade( theme.palette.text.primary, - theme.palette.type === 'light' ? 0.11 : 0.13, + theme.palette.mode === 'light' ? 0.11 : 0.13, ), height: '1.2em', }, diff --git a/packages/material-ui/src/AppBar/AppBar.js b/packages/material-ui/src/AppBar/AppBar.js index 5b6958c2a0ff13..f66113fff1e75a 100644 --- a/packages/material-ui/src/AppBar/AppBar.js +++ b/packages/material-ui/src/AppBar/AppBar.js @@ -7,7 +7,7 @@ import Paper from '../Paper'; export const styles = (theme) => { const backgroundColorDefault = - theme.palette.type === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]; + theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]; return { /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/Avatar/Avatar.js b/packages/material-ui/src/Avatar/Avatar.js index 38e8b7a0f1fa4d..d5d2433b841772 100644 --- a/packages/material-ui/src/Avatar/Avatar.js +++ b/packages/material-ui/src/Avatar/Avatar.js @@ -26,7 +26,7 @@ export const styles = (theme) => ({ colorDefault: { color: theme.palette.background.default, backgroundColor: - theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600], + theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600], }, /* Styles applied to the root element if `variant="circular"`. */ circular: {}, diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js index 5b5e0929c853b4..2b09f8934857e7 100644 --- a/packages/material-ui/src/Button/Button.js +++ b/packages/material-ui/src/Button/Button.js @@ -66,7 +66,7 @@ export const styles = (theme) => ({ outlined: { padding: '5px 15px', border: `1px solid ${ - theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' + theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' }`, '&$disabled': { border: `1px solid ${theme.palette.action.disabledBackground}`, diff --git a/packages/material-ui/src/ButtonGroup/ButtonGroup.js b/packages/material-ui/src/ButtonGroup/ButtonGroup.js index 3a4fd35c990916..aa586eaed20f2e 100644 --- a/packages/material-ui/src/ButtonGroup/ButtonGroup.js +++ b/packages/material-ui/src/ButtonGroup/ButtonGroup.js @@ -72,7 +72,7 @@ export const styles = (theme) => ({ groupedTextHorizontal: { '&:not(:last-child)': { borderRight: `1px solid ${ - theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' + theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' }`, }, }, @@ -80,7 +80,7 @@ export const styles = (theme) => ({ groupedTextVertical: { '&:not(:last-child)': { borderBottom: `1px solid ${ - theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' + theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' }`, }, }, diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js index 8880f5a124a83d..5412bfcc7a2746 100644 --- a/packages/material-ui/src/Chip/Chip.js +++ b/packages/material-ui/src/Chip/Chip.js @@ -12,7 +12,7 @@ import ButtonBase from '../ButtonBase'; export const styles = (theme) => { const backgroundColor = - theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700]; + theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[700]; const deleteIconColor = fade(theme.palette.text.primary, 0.26); return { @@ -47,7 +47,7 @@ export const styles = (theme) => { marginRight: -6, width: 24, height: 24, - color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300], + color: theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300], fontSize: theme.typography.pxToRem(12), }, '& $avatarColorPrimary': { @@ -128,7 +128,7 @@ export const styles = (theme) => { outlined: { backgroundColor: 'transparent', border: `1px solid ${ - theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' + theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' }`, '&$focusVisible, $clickable&:hover': { backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity), @@ -181,7 +181,7 @@ export const styles = (theme) => { avatarColorSecondary: {}, /* Styles applied to the `icon` element. */ icon: { - color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300], + color: theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300], marginLeft: 5, marginRight: -6, }, diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js index 8063c398c1adb0..6d68315c291777 100644 --- a/packages/material-ui/src/FilledInput/FilledInput.js +++ b/packages/material-ui/src/FilledInput/FilledInput.js @@ -6,7 +6,7 @@ import InputBase from '../InputBase'; import withStyles from '../styles/withStyles'; export const styles = (theme) => { - const light = theme.palette.type === 'light'; + const light = theme.palette.mode === 'light'; const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)'; const backgroundColor = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)'; @@ -119,9 +119,9 @@ export const styles = (theme) => { input: { padding: '25px 12px 8px', '&:-webkit-autofill': { - WebkitBoxShadow: theme.palette.type === 'light' ? null : '0 0 0 100px #266798 inset', - WebkitTextFillColor: theme.palette.type === 'light' ? null : '#fff', - caretColor: theme.palette.type === 'light' ? null : '#fff', + WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset', + WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff', + caretColor: theme.palette.mode === 'light' ? null : '#fff', borderTopLeftRadius: 'inherit', borderTopRightRadius: 'inherit', }, diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js index e35b8ade4ddcb0..ad7eb00781dad9 100644 --- a/packages/material-ui/src/Input/Input.js +++ b/packages/material-ui/src/Input/Input.js @@ -6,7 +6,7 @@ import InputBase from '../InputBase'; import withStyles from '../styles/withStyles'; export const styles = (theme) => { - const light = theme.palette.type === 'light'; + const light = theme.palette.mode === 'light'; const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)'; return { diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js index e90471015f70fe..eda2e7a96f50b3 100644 --- a/packages/material-ui/src/InputBase/InputBase.js +++ b/packages/material-ui/src/InputBase/InputBase.js @@ -14,7 +14,7 @@ import TextareaAutosize from '../TextareaAutosize'; import { isFilled } from './utils'; export const styles = (theme) => { - const light = theme.palette.type === 'light'; + const light = theme.palette.mode === 'light'; const placeholder = { color: 'currentColor', opacity: light ? 0.42 : 0.5, diff --git a/packages/material-ui/src/LinearProgress/LinearProgress.js b/packages/material-ui/src/LinearProgress/LinearProgress.js index 7a809f78e3d31d..5de6b6d81e4d12 100644 --- a/packages/material-ui/src/LinearProgress/LinearProgress.js +++ b/packages/material-ui/src/LinearProgress/LinearProgress.js @@ -10,7 +10,7 @@ const TRANSITION_DURATION = 4; // seconds export const styles = (theme) => { const getColor = (color) => - theme.palette.type === 'light' ? lighten(color, 0.62) : darken(color, 0.5); + theme.palette.mode === 'light' ? lighten(color, 0.62) : darken(color, 0.5); const backgroundPrimary = getColor(theme.palette.primary.main); const backgroundSecondary = getColor(theme.palette.secondary.main); diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.js b/packages/material-ui/src/NativeSelect/NativeSelect.js index d3a459acdaf4db..54e8a9a6c3aaf1 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelect.js +++ b/packages/material-ui/src/NativeSelect/NativeSelect.js @@ -23,7 +23,7 @@ export const styles = (theme) => ({ '&:focus': { // Show that it's not an text input backgroundColor: - theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)', + theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)', borderRadius: 0, // Reset Chrome style }, // Remove IE 11 arrow diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js index cb91e91861ba53..3ef1dcb354f25e 100644 --- a/packages/material-ui/src/OutlinedInput/OutlinedInput.js +++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.js @@ -8,7 +8,7 @@ import withStyles from '../styles/withStyles'; export const styles = (theme) => { const borderColor = - theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'; + theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'; return { /* Styles applied to the root element. */ @@ -73,9 +73,9 @@ export const styles = (theme) => { input: { padding: '16.5px 14px', '&:-webkit-autofill': { - WebkitBoxShadow: theme.palette.type === 'light' ? null : '0 0 0 100px #266798 inset', - WebkitTextFillColor: theme.palette.type === 'light' ? null : '#fff', - caretColor: theme.palette.type === 'light' ? null : '#fff', + WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset', + WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff', + caretColor: theme.palette.mode === 'light' ? null : '#fff', borderRadius: 'inherit', }, }, diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index 4e8b78e2c4282f..023774495fa0a3 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -237,7 +237,7 @@ export const styles = (theme) => ({ '& $track': { backgroundColor: // Same logic as the LinearProgress track color - theme.palette.type === 'light' + theme.palette.mode === 'light' ? lighten(theme.palette.primary.main, 0.62) : darken(theme.palette.primary.main, 0.5), }, diff --git a/packages/material-ui/src/SnackbarContent/SnackbarContent.js b/packages/material-ui/src/SnackbarContent/SnackbarContent.js index 69ad2b3a7fb82a..94e819d4191bd1 100644 --- a/packages/material-ui/src/SnackbarContent/SnackbarContent.js +++ b/packages/material-ui/src/SnackbarContent/SnackbarContent.js @@ -6,7 +6,7 @@ import Paper from '../Paper'; import { emphasize } from '../styles/colorManipulator'; export const styles = (theme) => { - const emphasis = theme.palette.type === 'light' ? 0.8 : 0.98; + const emphasis = theme.palette.mode === 'light' ? 0.8 : 0.98; const backgroundColor = emphasize(theme.palette.background.default, emphasis); return { diff --git a/packages/material-ui/src/StepConnector/StepConnector.js b/packages/material-ui/src/StepConnector/StepConnector.js index bb24300f82df97..57bf3578085002 100644 --- a/packages/material-ui/src/StepConnector/StepConnector.js +++ b/packages/material-ui/src/StepConnector/StepConnector.js @@ -32,7 +32,7 @@ export const styles = (theme) => ({ /* Styles applied to the line element. */ line: { display: 'block', - borderColor: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600], + borderColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600], }, /* Styles applied to the root element if `orientation="horizontal"`. */ lineHorizontal: { diff --git a/packages/material-ui/src/StepContent/StepContent.js b/packages/material-ui/src/StepContent/StepContent.js index 5687640017179b..b5eb1e40f5e179 100644 --- a/packages/material-ui/src/StepContent/StepContent.js +++ b/packages/material-ui/src/StepContent/StepContent.js @@ -13,7 +13,7 @@ export const styles = (theme) => ({ paddingLeft: 8 + 12, // margin + half icon paddingRight: 8, borderLeft: `1px solid ${ - theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600] + theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600] }`, }, /* Styles applied to the root element if `last={true}` (controlled by `Step`). */ diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js index 4d154bf2eb3d87..a4a4d1f80eba87 100644 --- a/packages/material-ui/src/Switch/Switch.js +++ b/packages/material-ui/src/Switch/Switch.js @@ -40,7 +40,7 @@ export const styles = (theme) => ({ top: 0, left: 0, zIndex: 1, // Render above the focus ripple. - color: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[400], + color: theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.grey[400], transition: theme.transitions.create(['left', 'transform'], { duration: theme.transitions.duration.shortest, }), @@ -48,13 +48,13 @@ export const styles = (theme) => ({ transform: 'translateX(20px)', }, '&$disabled': { - color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800], + color: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[800], }, '&$checked + $track': { opacity: 0.5, }, '&$disabled + $track': { - opacity: theme.palette.type === 'light' ? 0.12 : 0.1, + opacity: theme.palette.mode === 'light' ? 0.12 : 0.1, }, }, /* Styles applied to the internal SwitchBase component's root element if `color="primary"`. */ @@ -69,14 +69,14 @@ export const styles = (theme) => ({ }, }, '&$disabled': { - color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800], + color: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[800], }, '&$checked + $track': { backgroundColor: theme.palette.primary.main, }, '&$disabled + $track': { backgroundColor: - theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white, + theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white, }, }, /* Styles applied to the internal SwitchBase component's root element if `color="secondary"`. */ @@ -91,14 +91,14 @@ export const styles = (theme) => ({ }, }, '&$disabled': { - color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800], + color: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[800], }, '&$checked + $track': { backgroundColor: theme.palette.secondary.main, }, '&$disabled + $track': { backgroundColor: - theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white, + theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white, }, }, /* Styles applied to the root element if `size="small"`. */ @@ -144,8 +144,8 @@ export const styles = (theme) => ({ duration: theme.transitions.duration.shortest, }), backgroundColor: - theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white, - opacity: theme.palette.type === 'light' ? 0.38 : 0.3, + theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white, + opacity: theme.palette.mode === 'light' ? 0.38 : 0.3, }, }); diff --git a/packages/material-ui/src/TableCell/TableCell.js b/packages/material-ui/src/TableCell/TableCell.js index aba15e9c1e1fc3..1209fbce1b9384 100644 --- a/packages/material-ui/src/TableCell/TableCell.js +++ b/packages/material-ui/src/TableCell/TableCell.js @@ -17,7 +17,7 @@ export const styles = (theme) => ({ // Removes the alpha (sets it to 1), and lightens or darkens the theme color. borderBottom: `1px solid ${ - theme.palette.type === 'light' + theme.palette.mode === 'light' ? lighten(fade(theme.palette.divider, 1), 0.88) : darken(fade(theme.palette.divider, 1), 0.68) }`, diff --git a/packages/material-ui/src/index.d.ts b/packages/material-ui/src/index.d.ts index 500008efc32c26..e099b26876a12a 100644 --- a/packages/material-ui/src/index.d.ts +++ b/packages/material-ui/src/index.d.ts @@ -47,7 +47,7 @@ export type InternalStandardProps = Omit< style?: React.CSSProperties; }; -export type PaletteType = 'light' | 'dark'; +export type PaletteMode = 'light' | 'dark'; export interface Color { 50: string; 100: string; diff --git a/packages/material-ui/src/styles/adaptV4Theme.js b/packages/material-ui/src/styles/adaptV4Theme.js index 99eadf6af45056..bc0adac56e1af1 100644 --- a/packages/material-ui/src/styles/adaptV4Theme.js +++ b/packages/material-ui/src/styles/adaptV4Theme.js @@ -74,12 +74,18 @@ export default function adaptV4Theme(inputTheme) { ...mixins, }; + const { type: mode, ...paletteRest } = palette; + // theme.palette.text.hint theme.palette = { text: { - hint: palette.type === 'dark' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.38)', + hint: + palette.mode === 'dark' || palette.type === 'dark' + ? 'rgba(255, 255, 255, 0.5)' + : 'rgba(0, 0, 0, 0.38)', }, - ...palette, + mode, + ...paletteRest, }; return theme; diff --git a/packages/material-ui/src/styles/adaptV4Theme.test.js b/packages/material-ui/src/styles/adaptV4Theme.test.js index 1d32a32f6a97c0..9360e3f4c25891 100644 --- a/packages/material-ui/src/styles/adaptV4Theme.test.js +++ b/packages/material-ui/src/styles/adaptV4Theme.test.js @@ -277,7 +277,7 @@ describe('adaptV4Theme', () => { expect(transformedTheme.palette.text.hint).to.equal('rgba(0, 0, 0, 0.38)'); }); - it('is added to a dark theme', () => { + it('is added to a dark theme using the old palette.type value', () => { const theme = { palette: { type: 'dark' } }; let transformedTheme; @@ -288,6 +288,32 @@ describe('adaptV4Theme', () => { expect(transformedTheme.palette.text.hint).to.equal('rgba(255, 255, 255, 0.5)'); }); + + it('is added to a dark theme', () => { + const theme = { palette: { mode: 'dark' } }; + + let transformedTheme; + + expect(() => { + transformedTheme = adaptV4Theme(theme); + }).toWarnDev(['adaptV4Theme() is deprecated']); + + expect(transformedTheme.palette.text.hint).to.equal('rgba(255, 255, 255, 0.5)'); + }); + }); + + describe('theme.palette.mode', () => { + it('converts theme.palette.type to theme.palette.mode', () => { + const theme = { palette: { type: 'dark' } }; + + let transformedTheme; + + expect(() => { + transformedTheme = adaptV4Theme(theme); + }).toWarnDev(['adaptV4Theme() is deprecated']); + + expect(transformedTheme.palette.mode).to.equal('dark'); + }); }); describe('theme.spacing', () => { diff --git a/packages/material-ui/src/styles/createPalette.d.ts b/packages/material-ui/src/styles/createPalette.d.ts index f3b6ece72042b9..012d211dbd1403 100644 --- a/packages/material-ui/src/styles/createPalette.d.ts +++ b/packages/material-ui/src/styles/createPalette.d.ts @@ -1,4 +1,4 @@ -import { Color, PaletteType } from '..'; +import { Color, PaletteMode } from '..'; export {}; // use standalone interface over typeof colors/commons @@ -72,7 +72,7 @@ export const dark: TypeObject; export interface Palette { common: CommonColors; - type: PaletteType; + mode: PaletteMode; contrastThreshold: number; tonalOffset: PaletteTonalOffset; primary: PaletteColor; @@ -107,7 +107,7 @@ export interface PaletteOptions { warning?: PaletteColorOptions; info?: PaletteColorOptions; success?: PaletteColorOptions; - type?: PaletteType; + mode?: PaletteMode; tonalOffset?: PaletteTonalOffset; contrastThreshold?: number; common?: Partial; diff --git a/packages/material-ui/src/styles/createPalette.js b/packages/material-ui/src/styles/createPalette.js index 067271d981b0b1..840461aec8a66b 100644 --- a/packages/material-ui/src/styles/createPalette.js +++ b/packages/material-ui/src/styles/createPalette.js @@ -123,7 +123,7 @@ export default function createPalette(palette) { main: green[500], dark: green[700], }, - type = 'light', + mode = 'light', contrastThreshold = 3, tonalOffset = 0.2, ...other @@ -193,11 +193,11 @@ export default function createPalette(palette) { return color; }; - const types = { dark, light }; + const modes = { dark, light }; if (process.env.NODE_ENV !== 'production') { - if (!types[type]) { - console.error(`Material-UI: The palette type \`${type}\` is not supported.`); + if (!modes[mode]) { + console.error(`Material-UI: The palette mode \`${mode}\` is not supported.`); } } @@ -205,8 +205,8 @@ export default function createPalette(palette) { { // A collection of common colors. common, - // The palette type, can be light or dark. - type, + // The palette mode, can be light or dark. + mode, // The colors used to represent primary interface elements for a user. primary: augmentColor(primary), // The colors used to represent secondary interface elements for a user. @@ -232,8 +232,8 @@ export default function createPalette(palette) { // two indexes within its tonal palette. // E.g., shift from Red 500 to Red 300 or Red 700. tonalOffset, - // The light and dark type object. - ...types[type], + // The light and dark mode object. + ...modes[mode], }, other, ); diff --git a/packages/material-ui/src/styles/createPalette.test.js b/packages/material-ui/src/styles/createPalette.test.js index ab46abf194e03c..939023f63f92b7 100644 --- a/packages/material-ui/src/styles/createPalette.test.js +++ b/packages/material-ui/src/styles/createPalette.test.js @@ -84,7 +84,7 @@ describe('createPalette()', () => { }); it('should create a dark palette', () => { - const palette = createPalette({ type: 'dark' }); + const palette = createPalette({ mode: 'dark' }); expect(palette.primary.main, 'should use indigo as the default primary color').to.equal( indigo[500], ); @@ -135,10 +135,10 @@ describe('createPalette()', () => { }); describe('warnings', () => { - it('throws an exception when an invalid type is specified', () => { + it('throws an exception when an invalid mode is specified', () => { expect(() => { - createPalette({ type: 'foo' }); - }).toErrorDev('Material-UI: The palette type `foo` is not supported'); + createPalette({ mode: 'foo' }); + }).toErrorDev('Material-UI: The palette mode `foo` is not supported'); }); it('throws an exception when a wrong color is provided', () => { diff --git a/packages/material-ui/test/typescript/styles.spec.tsx b/packages/material-ui/test/typescript/styles.spec.tsx index 0094a70a9efee1..46edf5be59d98f 100644 --- a/packages/material-ui/test/typescript/styles.spec.tsx +++ b/packages/material-ui/test/typescript/styles.spec.tsx @@ -77,7 +77,7 @@ const AnotherStyledSFC = withStyles({ // Overriding styles const theme = createMuiTheme({ palette: { - type: 'dark', + mode: 'dark', primary: blue, contrastThreshold: 3, tonalOffset: 0.2,