Skip to content

Commit a194311

Browse files
oliviertassinarioliviertassinari
committed
Revert "[theme] Deprecate fade color utility in favor of alpha (mui#22837)"
This reverts commit a87f8a2.
1 parent d5b607d commit a194311

File tree

32 files changed

+109
-147
lines changed

32 files changed

+109
-147
lines changed

‎docs/src/modules/components/AppSearch.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import url from 'url';
33
import { useSelector } from 'react-redux';
44
import useLazyCSS from 'docs/src/modules/utils/useLazyCSS';
55
import useMediaQuery from '@material-ui/core/useMediaQuery';
6-
import { alpha, useTheme, makeStyles } from '@material-ui/core/styles';
6+
import { fade, useTheme, makeStyles } from '@material-ui/core/styles';
77
import Input from '@material-ui/core/Input';
88
import SearchIcon from '@material-ui/icons/Search';
99
import { handleEvent } from 'docs/src/modules/components/MarkdownLinks';
@@ -76,9 +76,9 @@ const useStyles = makeStyles(
7676
marginRight: theme.spacing(2),
7777
marginLeft: theme.spacing(1),
7878
borderRadius: theme.shape.borderRadius,
79-
backgroundColor: alpha(theme.palette.common.white, 0.15),
79+
backgroundColor: fade(theme.palette.common.white, 0.15),
8080
'&:hover': {
81-
backgroundColor: alpha(theme.palette.common.white, 0.25),
81+
backgroundColor: fade(theme.palette.common.white, 0.25),
8282
},
8383
'& $inputInput': {
8484
transition: theme.transitions.create('width'),

‎docs/src/modules/components/Demo.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
44
import clsx from 'clsx';
55
import copy from 'clipboard-copy';
66
import { useSelector, useDispatch } from 'react-redux';
7-
import { alpha, makeStyles, useTheme } from '@material-ui/core/styles';
7+
import { fade, makeStyles, useTheme } from '@material-ui/core/styles';
88
import IconButton from '@material-ui/core/IconButton';
99
import useMediaQuery from '@material-ui/core/useMediaQuery';
1010
import Collapse from '@material-ui/core/Collapse';
@@ -649,7 +649,7 @@ const useStyles = makeStyles(
649649
/* Isolate the demo with an outline. */
650650
demoBgOutlined: {
651651
padding: theme.spacing(3),
652-
border: `1px solid ${alpha(theme.palette.action.active, 0.12)}`,
652+
border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
653653
borderLeftWidth: 0,
654654
borderRightWidth: 0,
655655
[theme.breakpoints.up('sm')]: {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { alpha } from '@material-ui/core/styles';
1+
import { fade } from '@material-ui/core/styles';
22
import { adShape } from 'docs/src/modules/components/AdManager';
33

44
const adBodyImageStyles = (theme) => ({
55
root: {
66
display: 'block',
77
overflow: 'hidden',
8-
border: `1px solid ${alpha(theme.palette.action.active, 0.12)}`,
8+
border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
99
padding: `${theme.spacing(1.5)}px ${theme.spacing(1.5)}px ${theme.spacing(1.5)}px ${
1010
theme.spacing(1.5) + 130
1111
}px`,

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { alpha, makeStyles } from '@material-ui/core/styles';
2+
import { fade, makeStyles } from '@material-ui/core/styles';
33
import AppBar from '@material-ui/core/AppBar';
44
import Toolbar from '@material-ui/core/Toolbar';
55
import IconButton from '@material-ui/core/IconButton';
@@ -31,9 +31,9 @@ const useStyles = makeStyles((theme) => ({
3131
search: {
3232
position: 'relative',
3333
borderRadius: theme.shape.borderRadius,
34-
backgroundColor: alpha(theme.palette.common.white, 0.15),
34+
backgroundColor: fade(theme.palette.common.white, 0.15),
3535
'&:hover': {
36-
backgroundColor: alpha(theme.palette.common.white, 0.25),
36+
backgroundColor: fade(theme.palette.common.white, 0.25),
3737
},
3838
marginRight: theme.spacing(2),
3939
marginLeft: 0,

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { alpha, makeStyles, Theme, createStyles } from '@material-ui/core/styles';
2+
import { fade, makeStyles, Theme, createStyles } from '@material-ui/core/styles';
33
import AppBar from '@material-ui/core/AppBar';
44
import Toolbar from '@material-ui/core/Toolbar';
55
import IconButton from '@material-ui/core/IconButton';
@@ -32,9 +32,9 @@ const useStyles = makeStyles((theme: Theme) =>
3232
search: {
3333
position: 'relative',
3434
borderRadius: theme.shape.borderRadius,
35-
backgroundColor: alpha(theme.palette.common.white, 0.15),
35+
backgroundColor: fade(theme.palette.common.white, 0.15),
3636
'&:hover': {
37-
backgroundColor: alpha(theme.palette.common.white, 0.25),
37+
backgroundColor: fade(theme.palette.common.white, 0.25),
3838
},
3939
marginRight: theme.spacing(2),
4040
marginLeft: 0,

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Toolbar from '@material-ui/core/Toolbar';
44
import IconButton from '@material-ui/core/IconButton';
55
import Typography from '@material-ui/core/Typography';
66
import InputBase from '@material-ui/core/InputBase';
7-
import { alpha, makeStyles } from '@material-ui/core/styles';
7+
import { fade, makeStyles } from '@material-ui/core/styles';
88
import MenuIcon from '@material-ui/icons/Menu';
99
import SearchIcon from '@material-ui/icons/Search';
1010

@@ -25,9 +25,9 @@ const useStyles = makeStyles((theme) => ({
2525
search: {
2626
position: 'relative',
2727
borderRadius: theme.shape.borderRadius,
28-
backgroundColor: alpha(theme.palette.common.white, 0.15),
28+
backgroundColor: fade(theme.palette.common.white, 0.15),
2929
'&:hover': {
30-
backgroundColor: alpha(theme.palette.common.white, 0.25),
30+
backgroundColor: fade(theme.palette.common.white, 0.25),
3131
},
3232
marginLeft: 0,
3333
width: '100%',

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Toolbar from '@material-ui/core/Toolbar';
44
import IconButton from '@material-ui/core/IconButton';
55
import Typography from '@material-ui/core/Typography';
66
import InputBase from '@material-ui/core/InputBase';
7-
import { createStyles, alpha, Theme, makeStyles } from '@material-ui/core/styles';
7+
import { createStyles, fade, Theme, makeStyles } from '@material-ui/core/styles';
88
import MenuIcon from '@material-ui/icons/Menu';
99
import SearchIcon from '@material-ui/icons/Search';
1010

@@ -26,9 +26,9 @@ const useStyles = makeStyles((theme: Theme) =>
2626
search: {
2727
position: 'relative',
2828
borderRadius: theme.shape.borderRadius,
29-
backgroundColor: alpha(theme.palette.common.white, 0.15),
29+
backgroundColor: fade(theme.palette.common.white, 0.15),
3030
'&:hover': {
31-
backgroundColor: alpha(theme.palette.common.white, 0.25),
31+
backgroundColor: fade(theme.palette.common.white, 0.25),
3232
},
3333
marginLeft: 0,
3434
width: '100%',

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable no-use-before-define */
22
import React from 'react';
3-
import { useTheme, alpha, makeStyles } from '@material-ui/core/styles';
3+
import { useTheme, fade, makeStyles } from '@material-ui/core/styles';
44
import Popper from '@material-ui/core/Popper';
55
import SettingsIcon from '@material-ui/icons/Settings';
66
import CloseIcon from '@material-ui/icons/Close';
@@ -67,7 +67,7 @@ const useStyles = makeStyles((theme) => ({
6767
border: '1px solid #ced4da',
6868
fontSize: 14,
6969
'&:focus': {
70-
boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
70+
boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
7171
borderColor: theme.palette.primary.main,
7272
},
7373
},

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable no-use-before-define */
22
import React from 'react';
3-
import { useTheme, alpha, makeStyles, Theme, createStyles } from '@material-ui/core/styles';
3+
import { useTheme, fade, makeStyles, Theme, createStyles } from '@material-ui/core/styles';
44
import Popper from '@material-ui/core/Popper';
55
import SettingsIcon from '@material-ui/icons/Settings';
66
import CloseIcon from '@material-ui/icons/Close';
@@ -68,7 +68,7 @@ const useStyles = makeStyles((theme: Theme) =>
6868
border: '1px solid #ced4da',
6969
fontSize: 14,
7070
'&:focus': {
71-
boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
71+
boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
7272
borderColor: theme.palette.primary.main,
7373
},
7474
},

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import {
3-
alpha,
3+
fade,
44
ThemeProvider,
55
withStyles,
66
makeStyles,
@@ -63,7 +63,7 @@ const BootstrapInput = withStyles((theme) => ({
6363
'"Segoe UI Symbol"',
6464
].join(','),
6565
'&:focus': {
66-
boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
66+
boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
6767
borderColor: theme.palette.primary.main,
6868
},
6969
},
@@ -81,7 +81,7 @@ const useStylesReddit = makeStyles((theme) => ({
8181
},
8282
'&$focused': {
8383
backgroundColor: '#fff',
84-
boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 2px`,
84+
boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 2px`,
8585
borderColor: theme.palette.primary.main,
8686
},
8787
},

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import {
33
createStyles,
4-
alpha,
4+
fade,
55
Theme,
66
ThemeProvider,
77
withStyles,
@@ -67,7 +67,7 @@ const BootstrapInput = withStyles((theme: Theme) =>
6767
'"Segoe UI Symbol"',
6868
].join(','),
6969
'&:focus': {
70-
boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
70+
boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
7171
borderColor: theme.palette.primary.main,
7272
},
7373
},
@@ -87,7 +87,7 @@ const useStylesReddit = makeStyles((theme: Theme) =>
8787
},
8888
'&$focused': {
8989
backgroundColor: '#fff',
90-
boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 2px`,
90+
boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 2px`,
9191
borderColor: theme.palette.primary.main,
9292
},
9393
},

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import SvgIcon from '@material-ui/core/SvgIcon';
4-
import { alpha, makeStyles, withStyles } from '@material-ui/core/styles';
4+
import { fade, makeStyles, withStyles } from '@material-ui/core/styles';
55
import TreeView from '@material-ui/lab/TreeView';
66
import TreeItem from '@material-ui/lab/TreeItem';
77
import Collapse from '@material-ui/core/Collapse';
@@ -63,7 +63,7 @@ const StyledTreeItem = withStyles((theme) => ({
6363
group: {
6464
marginLeft: 7,
6565
paddingLeft: 18,
66-
borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`,
66+
borderLeft: `1px dashed ${fade(theme.palette.text.primary, 0.4)}`,
6767
},
6868
}))((props) => <TreeItem {...props} TransitionComponent={TransitionComponent} />);
6969

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
3-
import { alpha, makeStyles, withStyles, Theme, createStyles } from '@material-ui/core/styles';
3+
import { fade, makeStyles, withStyles, Theme, createStyles } from '@material-ui/core/styles';
44
import TreeView from '@material-ui/lab/TreeView';
55
import TreeItem, { TreeItemProps } from '@material-ui/lab/TreeItem';
66
import Collapse from '@material-ui/core/Collapse';
@@ -57,7 +57,7 @@ const StyledTreeItem = withStyles((theme: Theme) =>
5757
group: {
5858
marginLeft: 7,
5959
paddingLeft: 18,
60-
borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`,
60+
borderLeft: `1px dashed ${fade(theme.palette.text.primary, 0.4)}`,
6161
},
6262
}),
6363
)((props: TreeItemProps) => <TreeItem {...props} TransitionComponent={TransitionComponent} />);

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import PropTypes from 'prop-types';
33
import clsx from 'clsx';
4-
import { alpha, useTheme, withStyles } from '@material-ui/core/styles';
4+
import { fade, useTheme, withStyles } from '@material-ui/core/styles';
55
import ButtonBase from '@material-ui/core/ButtonBase';
66
import FirstPageIcon from '../internal/svg-icons/FirstPage';
77
import LastPageIcon from '../internal/svg-icons/LastPage';
@@ -40,7 +40,7 @@ export const styles = (theme) => ({
4040
'&$selected': {
4141
backgroundColor: theme.palette.action.selected,
4242
'&:hover, &$focusVisible': {
43-
backgroundColor: alpha(
43+
backgroundColor: fade(
4444
theme.palette.action.selected,
4545
theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
4646
),
@@ -130,10 +130,10 @@ export const styles = (theme) => ({
130130
outlinedPrimary: {
131131
'&$selected': {
132132
color: theme.palette.primary.main,
133-
border: `1px solid ${alpha(theme.palette.primary.main, 0.5)}`,
134-
backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
133+
border: `1px solid ${fade(theme.palette.primary.main, 0.5)}`,
134+
backgroundColor: fade(theme.palette.primary.main, theme.palette.action.activatedOpacity),
135135
'&:hover, &$focusVisible': {
136-
backgroundColor: alpha(
136+
backgroundColor: fade(
137137
theme.palette.primary.main,
138138
theme.palette.action.activatedOpacity + theme.palette.action.hoverOpacity,
139139
),
@@ -151,10 +151,10 @@ export const styles = (theme) => ({
151151
outlinedSecondary: {
152152
'&$selected': {
153153
color: theme.palette.secondary.main,
154-
border: `1px solid ${alpha(theme.palette.secondary.main, 0.5)}`,
155-
backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.activatedOpacity),
154+
border: `1px solid ${fade(theme.palette.secondary.main, 0.5)}`,
155+
backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.activatedOpacity),
156156
'&:hover, &$focusVisible': {
157-
backgroundColor: alpha(
157+
backgroundColor: fade(
158158
theme.palette.secondary.main,
159159
theme.palette.action.activatedOpacity + theme.palette.action.hoverOpacity,
160160
),

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
11
import * as React from 'react';
22
import clsx from 'clsx';
33
import PropTypes from 'prop-types';
4-
import { alpha, withStyles } from '@material-ui/core/styles';
4+
import { fade, withStyles } from '@material-ui/core/styles';
55

66
export const styles = (theme) => ({
77
/* Styles applied to the root element. */
88
root: {
99
display: 'block',
1010
// Create a "on paper" color with sufficient contrast retaining the color
11-
backgroundColor: alpha(
12-
theme.palette.text.primary,
13-
theme.palette.type === 'light' ? 0.11 : 0.13,
14-
),
11+
backgroundColor: fade(theme.palette.text.primary, theme.palette.type === 'light' ? 0.11 : 0.13),
1512
height: '1.2em',
1613
},
1714
/* Styles applied to the root element if `variant="text"`. */

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import * as React from 'react';
44
import PropTypes from 'prop-types';
55
import clsx from 'clsx';
6-
import { alpha, withStyles } from '@material-ui/core/styles';
6+
import { fade, withStyles } from '@material-ui/core/styles';
77
import ButtonBase from '@material-ui/core/ButtonBase';
88
import { capitalize } from '@material-ui/core/utils';
99

@@ -14,26 +14,26 @@ export const styles = (theme) => ({
1414
boxSizing: 'border-box',
1515
borderRadius: theme.shape.borderRadius,
1616
padding: 11,
17-
border: `1px solid ${alpha(theme.palette.action.active, 0.12)}`,
18-
color: alpha(theme.palette.action.active, 0.38),
17+
border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
18+
color: fade(theme.palette.action.active, 0.38),
1919
'&$selected': {
2020
color: theme.palette.action.active,
21-
backgroundColor: alpha(theme.palette.action.active, 0.12),
21+
backgroundColor: fade(theme.palette.action.active, 0.12),
2222
'&:hover': {
23-
backgroundColor: alpha(theme.palette.action.active, 0.15),
23+
backgroundColor: fade(theme.palette.action.active, 0.15),
2424
},
2525
'& + &': {
2626
borderLeft: 0,
2727
marginLeft: 0,
2828
},
2929
},
3030
'&$disabled': {
31-
color: alpha(theme.palette.action.disabled, 0.12),
31+
color: fade(theme.palette.action.disabled, 0.12),
3232
},
3333
'&:hover': {
3434
textDecoration: 'none',
3535
// Reset on mouse devices
36-
backgroundColor: alpha(theme.palette.text.primary, 0.05),
36+
backgroundColor: fade(theme.palette.text.primary, 0.05),
3737
'@media (hover: none)': {
3838
backgroundColor: 'transparent',
3939
},

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import clsx from 'clsx';
44
import PropTypes from 'prop-types';
55
import Typography from '@material-ui/core/Typography';
66
import Collapse from '@material-ui/core/Collapse';
7-
import { alpha, withStyles, useTheme } from '@material-ui/core/styles';
7+
import { fade, withStyles, useTheme } from '@material-ui/core/styles';
88
import { useForkRef } from '@material-ui/core/utils';
99
import TreeViewContext from '../TreeView/TreeViewContext';
1010

@@ -20,10 +20,10 @@ export const styles = (theme) => ({
2020
backgroundColor: theme.palette.action.hover,
2121
},
2222
'&$selected > $content $label': {
23-
backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
23+
backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity),
2424
},
2525
'&$selected > $content $label:hover, &$selected:focus > $content $label': {
26-
backgroundColor: alpha(
26+
backgroundColor: fade(
2727
theme.palette.primary.main,
2828
theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
2929
),

0 commit comments

Comments
 (0)