[theme] Deprecate fade color utility in favor of alpha

docs/src/modules/components/AppSearch.js

@@ -3,7 +3,7 @@ import url from 'url';
 import { useSelector } from 'react-redux';
 import useLazyCSS from 'docs/src/modules/utils/useLazyCSS';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
-import { fade, useTheme, makeStyles } from '@material-ui/core/styles';
+import { alpha, useTheme, makeStyles } from '@material-ui/core/styles';
 import Input from '@material-ui/core/Input';
 import SearchIcon from '@material-ui/icons/Search';
 import { handleEvent } from 'docs/src/modules/components/MarkdownLinks';
@@ -76,9 +76,9 @@ const useStyles = makeStyles(
       marginRight: theme.spacing(2),
       marginLeft: theme.spacing(1),
       borderRadius: theme.shape.borderRadius,
-      backgroundColor: fade(theme.palette.common.white, 0.15),
+      backgroundColor: alpha(theme.palette.common.white, 0.15),
       '&:hover': {
-        backgroundColor: fade(theme.palette.common.white, 0.25),
+        backgroundColor: alpha(theme.palette.common.white, 0.25),
       },
       '& $inputInput': {
         transition: theme.transitions.create('width'),

docs/src/modules/components/Demo.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import copy from 'clipboard-copy';
 import { useSelector, useDispatch } from 'react-redux';
-import { fade, makeStyles, useTheme } from '@material-ui/core/styles';
+import { alpha, makeStyles, useTheme } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import Collapse from '@material-ui/core/Collapse';
@@ -649,7 +649,7 @@ const useStyles = makeStyles(
     /* Isolate the demo with an outline. */
     demoBgOutlined: {
       padding: theme.spacing(3),
-      border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
+      border: `1px solid ${alpha(theme.palette.action.active, 0.12)}`,
       borderLeftWidth: 0,
       borderRightWidth: 0,
       [theme.breakpoints.up('sm')]: {

docs/src/modules/components/ad.styles.js

@@ -1,11 +1,11 @@
-import { fade } from '@material-ui/core/styles';
+import { alpha } from '@material-ui/core/styles';
 import { adShape } from 'docs/src/modules/components/AdManager';
 
 const adBodyImageStyles = (theme) => ({
   root: {
     display: 'block',
     overflow: 'hidden',
-    border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
+    border: `1px solid ${alpha(theme.palette.action.active, 0.12)}`,
     padding: `${theme.spacing(1.5)}px ${theme.spacing(1.5)}px ${theme.spacing(1.5)}px ${
       theme.spacing(1.5) + 130
     }px`,

docs/src/pages/components/app-bar/PrimarySearchAppBar.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { fade, makeStyles } from '@material-ui/core/styles';
+import { alpha, makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
@@ -31,9 +31,9 @@ const useStyles = makeStyles((theme) => ({
   search: {
     position: 'relative',
     borderRadius: theme.shape.borderRadius,
-    backgroundColor: fade(theme.palette.common.white, 0.15),
+    backgroundColor: alpha(theme.palette.common.white, 0.15),
     '&:hover': {
-      backgroundColor: fade(theme.palette.common.white, 0.25),
+      backgroundColor: alpha(theme.palette.common.white, 0.25),
     },
     marginRight: theme.spacing(2),
     marginLeft: 0,

docs/src/pages/components/app-bar/PrimarySearchAppBar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { fade, makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import { alpha, makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
@@ -32,9 +32,9 @@ const useStyles = makeStyles((theme: Theme) =>
     search: {
       position: 'relative',
       borderRadius: theme.shape.borderRadius,
-      backgroundColor: fade(theme.palette.common.white, 0.15),
+      backgroundColor: alpha(theme.palette.common.white, 0.15),
       '&:hover': {
-        backgroundColor: fade(theme.palette.common.white, 0.25),
+        backgroundColor: alpha(theme.palette.common.white, 0.25),
       },
       marginRight: theme.spacing(2),
       marginLeft: 0,

docs/src/pages/components/app-bar/SearchAppBar.js

@@ -4,7 +4,7 @@ import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
 import Typography from '@material-ui/core/Typography';
 import InputBase from '@material-ui/core/InputBase';
-import { fade, makeStyles } from '@material-ui/core/styles';
+import { alpha, makeStyles } from '@material-ui/core/styles';
 import MenuIcon from '@material-ui/icons/Menu';
 import SearchIcon from '@material-ui/icons/Search';
 
@@ -25,9 +25,9 @@ const useStyles = makeStyles((theme) => ({
   search: {
     position: 'relative',
     borderRadius: theme.shape.borderRadius,
-    backgroundColor: fade(theme.palette.common.white, 0.15),
+    backgroundColor: alpha(theme.palette.common.white, 0.15),
     '&:hover': {
-      backgroundColor: fade(theme.palette.common.white, 0.25),
+      backgroundColor: alpha(theme.palette.common.white, 0.25),
     },
     marginLeft: 0,
     width: '100%',

docs/src/pages/components/app-bar/SearchAppBar.tsx

@@ -4,7 +4,7 @@ import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
 import Typography from '@material-ui/core/Typography';
 import InputBase from '@material-ui/core/InputBase';
-import { createStyles, fade, Theme, makeStyles } from '@material-ui/core/styles';
+import { createStyles, alpha, Theme, makeStyles } from '@material-ui/core/styles';
 import MenuIcon from '@material-ui/icons/Menu';
 import SearchIcon from '@material-ui/icons/Search';
 
@@ -26,9 +26,9 @@ const useStyles = makeStyles((theme: Theme) =>
     search: {
       position: 'relative',
       borderRadius: theme.shape.borderRadius,
-      backgroundColor: fade(theme.palette.common.white, 0.15),
+      backgroundColor: alpha(theme.palette.common.white, 0.15),
       '&:hover': {
-        backgroundColor: fade(theme.palette.common.white, 0.25),
+        backgroundColor: alpha(theme.palette.common.white, 0.25),
       },
       marginLeft: 0,
       width: '100%',

docs/src/pages/components/autocomplete/GitHubLabel.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-use-before-define */
 import React from 'react';
-import { useTheme, fade, makeStyles } from '@material-ui/core/styles';
+import { useTheme, alpha, makeStyles } from '@material-ui/core/styles';
 import Popper from '@material-ui/core/Popper';
 import SettingsIcon from '@material-ui/icons/Settings';
 import CloseIcon from '@material-ui/icons/Close';
@@ -67,7 +67,7 @@ const useStyles = makeStyles((theme) => ({
       border: '1px solid #ced4da',
       fontSize: 14,
       '&:focus': {
-        boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
+        boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
         borderColor: theme.palette.primary.main,
       },
     },

docs/src/pages/components/autocomplete/GitHubLabel.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-use-before-define */
 import React from 'react';
-import { useTheme, fade, makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import { useTheme, alpha, makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Popper from '@material-ui/core/Popper';
 import SettingsIcon from '@material-ui/icons/Settings';
 import CloseIcon from '@material-ui/icons/Close';
@@ -68,7 +68,7 @@ const useStyles = makeStyles((theme: Theme) =>
         border: '1px solid #ced4da',
         fontSize: 14,
         '&:focus': {
-          boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
+          boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
           borderColor: theme.palette.primary.main,
         },
       },

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  fade,
+  alpha,
   ThemeProvider,
   withStyles,
   makeStyles,
@@ -63,7 +63,7 @@ const BootstrapInput = withStyles((theme) => ({
       '"Segoe UI Symbol"',
     ].join(','),
     '&:focus': {
-      boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
+      boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
       borderColor: theme.palette.primary.main,
     },
   },
@@ -81,7 +81,7 @@ const useStylesReddit = makeStyles((theme) => ({
     },
     '&$focused': {
       backgroundColor: '#fff',
-      boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 2px`,
+      boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 2px`,
       borderColor: theme.palette.primary.main,
     },
   },

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import {
   createStyles,
-  fade,
+  alpha,
   Theme,
   ThemeProvider,
   withStyles,
@@ -67,7 +67,7 @@ const BootstrapInput = withStyles((theme: Theme) =>
         '"Segoe UI Symbol"',
       ].join(','),
       '&:focus': {
-        boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
+        boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
         borderColor: theme.palette.primary.main,
       },
     },
@@ -87,7 +87,7 @@ const useStylesReddit = makeStyles((theme: Theme) =>
       },
       '&$focused': {
         backgroundColor: '#fff',
-        boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 2px`,
+        boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 2px`,
         borderColor: theme.palette.primary.main,
       },
     },

docs/src/pages/components/tree-view/CustomizedTreeView.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import SvgIcon from '@material-ui/core/SvgIcon';
-import { fade, makeStyles, withStyles } from '@material-ui/core/styles';
+import { alpha, makeStyles, withStyles } from '@material-ui/core/styles';
 import TreeView from '@material-ui/lab/TreeView';
 import TreeItem from '@material-ui/lab/TreeItem';
 import Collapse from '@material-ui/core/Collapse';
@@ -63,7 +63,7 @@ const StyledTreeItem = withStyles((theme) => ({
   group: {
     marginLeft: 7,
     paddingLeft: 18,
-    borderLeft: `1px dashed ${fade(theme.palette.text.primary, 0.4)}`,
+    borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`,
   },
 }))((props) => <TreeItem {...props} TransitionComponent={TransitionComponent} />);
 

docs/src/pages/components/tree-view/CustomizedTreeView.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
-import { fade, makeStyles, withStyles, Theme, createStyles } from '@material-ui/core/styles';
+import { alpha, makeStyles, withStyles, Theme, createStyles } from '@material-ui/core/styles';
 import TreeView from '@material-ui/lab/TreeView';
 import TreeItem, { TreeItemProps } from '@material-ui/lab/TreeItem';
 import Collapse from '@material-ui/core/Collapse';
@@ -57,7 +57,7 @@ const StyledTreeItem = withStyles((theme: Theme) =>
     group: {
       marginLeft: 7,
       paddingLeft: 18,
-      borderLeft: `1px dashed ${fade(theme.palette.text.primary, 0.4)}`,
+      borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`,
     },
   }),
 )((props: TreeItemProps) => <TreeItem {...props} TransitionComponent={TransitionComponent} />);

packages/material-ui-lab/src/PaginationItem/PaginationItem.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { fade, useTheme, withStyles } from '@material-ui/core/styles';
+import { alpha, useTheme, withStyles } from '@material-ui/core/styles';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import FirstPageIcon from '../internal/svg-icons/FirstPage';
 import LastPageIcon from '../internal/svg-icons/LastPage';
@@ -40,7 +40,7 @@ export const styles = (theme) => ({
     '&$selected': {
       backgroundColor: theme.palette.action.selected,
       '&:hover, &$focusVisible': {
-        backgroundColor: fade(
+        backgroundColor: alpha(
           theme.palette.action.selected,
           theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
         ),
@@ -130,10 +130,10 @@ export const styles = (theme) => ({
   outlinedPrimary: {
     '&$selected': {
       color: theme.palette.primary.main,
-      border: `1px solid ${fade(theme.palette.primary.main, 0.5)}`,
-      backgroundColor: fade(theme.palette.primary.main, theme.palette.action.activatedOpacity),
+      border: `1px solid ${alpha(theme.palette.primary.main, 0.5)}`,
+      backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
       '&:hover, &$focusVisible': {
-        backgroundColor: fade(
+        backgroundColor: alpha(
           theme.palette.primary.main,
           theme.palette.action.activatedOpacity + theme.palette.action.hoverOpacity,
         ),
@@ -151,10 +151,10 @@ export const styles = (theme) => ({
   outlinedSecondary: {
     '&$selected': {
       color: theme.palette.secondary.main,
-      border: `1px solid ${fade(theme.palette.secondary.main, 0.5)}`,
-      backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.activatedOpacity),
+      border: `1px solid ${alpha(theme.palette.secondary.main, 0.5)}`,
+      backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.activatedOpacity),
       '&:hover, &$focusVisible': {
-        backgroundColor: fade(
+        backgroundColor: alpha(
           theme.palette.secondary.main,
           theme.palette.action.activatedOpacity + theme.palette.action.hoverOpacity,
         ),

packages/material-ui-lab/src/Skeleton/Skeleton.js

@@ -1,14 +1,17 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import { fade, withStyles } from '@material-ui/core/styles';
+import { alpha, withStyles } from '@material-ui/core/styles';
 
 export const styles = (theme) => ({
   /* Styles applied to the root element. */
   root: {
     display: 'block',
     // 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),
+    backgroundColor: alpha(
+      theme.palette.text.primary,
+      theme.palette.type === 'light' ? 0.11 : 0.13,
+    ),
     height: '1.2em',
   },
   /* Styles applied to the root element if `variant="text"`. */

packages/material-ui-lab/src/ToggleButton/ToggleButton.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { fade, withStyles } from '@material-ui/core/styles';
+import { alpha, withStyles } from '@material-ui/core/styles';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import { capitalize } from '@material-ui/core/utils';
 
@@ -14,26 +14,26 @@ export const styles = (theme) => ({
     boxSizing: 'border-box',
     borderRadius: theme.shape.borderRadius,
     padding: 11,
-    border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
-    color: fade(theme.palette.action.active, 0.38),
+    border: `1px solid ${alpha(theme.palette.action.active, 0.12)}`,
+    color: alpha(theme.palette.action.active, 0.38),
     '&$selected': {
       color: theme.palette.action.active,
-      backgroundColor: fade(theme.palette.action.active, 0.12),
+      backgroundColor: alpha(theme.palette.action.active, 0.12),
       '&:hover': {
-        backgroundColor: fade(theme.palette.action.active, 0.15),
+        backgroundColor: alpha(theme.palette.action.active, 0.15),
       },
       '& + &': {
         borderLeft: 0,
         marginLeft: 0,
       },
     },
     '&$disabled': {
-      color: fade(theme.palette.action.disabled, 0.12),
+      color: alpha(theme.palette.action.disabled, 0.12),
     },
     '&:hover': {
       textDecoration: 'none',
       // Reset on mouse devices
-      backgroundColor: fade(theme.palette.text.primary, 0.05),
+      backgroundColor: alpha(theme.palette.text.primary, 0.05),
       '@media (hover: none)': {
         backgroundColor: 'transparent',
       },

packages/material-ui-lab/src/TreeItem/TreeItem.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
 import Collapse from '@material-ui/core/Collapse';
-import { fade, withStyles, useTheme } from '@material-ui/core/styles';
+import { alpha, withStyles, useTheme } from '@material-ui/core/styles';
 import { useForkRef } from '@material-ui/core/utils';
 import TreeViewContext from '../TreeView/TreeViewContext';
 
@@ -20,10 +20,10 @@ export const styles = (theme) => ({
       backgroundColor: theme.palette.action.hover,
     },
     '&$selected > $content $label': {
-      backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+      backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
     },
     '&$selected > $content $label:hover, &$selected:focus > $content $label': {
-      backgroundColor: fade(
+      backgroundColor: alpha(
         theme.palette.primary.main,
         theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
       ),