Skip to content

Commit b3cd80d

Browse files
mnajdovamnajdova
authored
[theme] Rename fade to alpha (#22834)
1 parent 1318789 commit b3cd80d

File tree

38 files changed

+194
-136
lines changed

38 files changed

+194
-136
lines changed

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

Lines changed: 6 additions & 6 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 { makeStyles, fade } from '@material-ui/core/styles';
4+
import { makeStyles, alpha } from '@material-ui/core/styles';
55
import Collapse from '@material-ui/core/Collapse';
66
import ButtonBase from '@material-ui/core/ButtonBase';
77
import ArrowRightIcon from '@material-ui/icons/ArrowRight';
@@ -29,7 +29,7 @@ const useStyles = makeStyles((theme) => ({
2929
}),
3030
'&:hover': {
3131
color: theme.palette.text.primary,
32-
backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity),
32+
backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
3333
},
3434
'&.Mui-focusVisible': {
3535
backgroundColor: theme.palette.action.focus,
@@ -58,19 +58,19 @@ const useStyles = makeStyles((theme) => ({
5858
color: theme.palette.text.secondary,
5959
'&.app-drawer-active': {
6060
color: theme.palette.primary.main,
61-
backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity),
61+
backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
6262
'&:hover': {
63-
backgroundColor: fade(
63+
backgroundColor: alpha(
6464
theme.palette.primary.main,
6565
theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
6666
),
6767
// Reset on touch devices, it doesn't add specificity
6868
'@media (hover: none)': {
69-
backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity),
69+
backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
7070
},
7171
},
7272
'&.Mui-focusVisible': {
73-
backgroundColor: fade(
73+
backgroundColor: alpha(
7474
theme.palette.primary.main,
7575
theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
7676
),

‎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 { fade, useTheme, makeStyles } from '@material-ui/core/styles';
6+
import { alpha, 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';
@@ -77,9 +77,9 @@ const useStyles = makeStyles(
7777
marginRight: theme.spacing(2),
7878
marginLeft: theme.spacing(1),
7979
borderRadius: theme.shape.borderRadius,
80-
backgroundColor: fade(theme.palette.common.white, 0.15),
80+
backgroundColor: alpha(theme.palette.common.white, 0.15),
8181
'&:hover': {
82-
backgroundColor: fade(theme.palette.common.white, 0.25),
82+
backgroundColor: alpha(theme.palette.common.white, 0.25),
8383
},
8484
'& $inputInput': {
8585
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 { fade, makeStyles, useTheme } from '@material-ui/core/styles';
7+
import { alpha, 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';
@@ -648,7 +648,7 @@ const useStyles = makeStyles(
648648
/* Isolate the demo with an outline. */
649649
demoBgOutlined: {
650650
padding: theme.spacing(3),
651-
border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
651+
border: `1px solid ${alpha(theme.palette.action.active, 0.12)}`,
652652
borderLeftWidth: 0,
653653
borderRightWidth: 0,
654654
[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 { fade } from '@material-ui/core/styles';
1+
import { alpha } 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 ${fade(theme.palette.action.active, 0.12)}`,
8+
border: `1px solid ${alpha(theme.palette.action.active, 0.12)}`,
99
padding: `${theme.spacing(1.5)} ${theme.spacing(1.5)} ${theme.spacing(
1010
1.5,
1111
)} calc(${theme.spacing(1.5)} + 130px)`,

‎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 * as React from 'react';
2-
import { fade, makeStyles } from '@material-ui/core/styles';
2+
import { alpha, 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: fade(theme.palette.common.white, 0.15),
34+
backgroundColor: alpha(theme.palette.common.white, 0.15),
3535
'&:hover': {
36-
backgroundColor: fade(theme.palette.common.white, 0.25),
36+
backgroundColor: alpha(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,6 +1,6 @@
11
import * as React from 'react';
22
import {
3-
fade,
3+
alpha,
44
makeStyles,
55
Theme,
66
createStyles,
@@ -37,9 +37,9 @@ const useStyles = makeStyles((theme: Theme) =>
3737
search: {
3838
position: 'relative',
3939
borderRadius: theme.shape.borderRadius,
40-
backgroundColor: fade(theme.palette.common.white, 0.15),
40+
backgroundColor: alpha(theme.palette.common.white, 0.15),
4141
'&:hover': {
42-
backgroundColor: fade(theme.palette.common.white, 0.25),
42+
backgroundColor: alpha(theme.palette.common.white, 0.25),
4343
},
4444
marginRight: theme.spacing(2),
4545
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 { fade, makeStyles } from '@material-ui/core/styles';
7+
import { alpha, 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: fade(theme.palette.common.white, 0.15),
28+
backgroundColor: alpha(theme.palette.common.white, 0.15),
2929
'&:hover': {
30-
backgroundColor: fade(theme.palette.common.white, 0.25),
30+
backgroundColor: alpha(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
@@ -6,7 +6,7 @@ import Typography from '@material-ui/core/Typography';
66
import InputBase from '@material-ui/core/InputBase';
77
import {
88
createStyles,
9-
fade,
9+
alpha,
1010
Theme,
1111
makeStyles,
1212
} from '@material-ui/core/styles';
@@ -31,9 +31,9 @@ const useStyles = makeStyles((theme: Theme) =>
3131
search: {
3232
position: 'relative',
3333
borderRadius: theme.shape.borderRadius,
34-
backgroundColor: fade(theme.palette.common.white, 0.15),
34+
backgroundColor: alpha(theme.palette.common.white, 0.15),
3535
'&:hover': {
36-
backgroundColor: fade(theme.palette.common.white, 0.25),
36+
backgroundColor: alpha(theme.palette.common.white, 0.25),
3737
},
3838
marginLeft: 0,
3939
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 @typescript-eslint/no-use-before-define */
22
import * as React from 'react';
3-
import { useTheme, fade, makeStyles } from '@material-ui/core/styles';
3+
import { useTheme, alpha, makeStyles } from '@material-ui/core/styles';
44
import Popper from '@material-ui/core/Popper';
55
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
66
import SettingsIcon from '@material-ui/icons/Settings';
@@ -68,7 +68,7 @@ const useStyles = makeStyles((theme) => ({
6868
border: '1px solid #ced4da',
6969
fontSize: 14,
7070
'&:focus': {
71-
boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
71+
boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
7272
borderColor: theme.palette.primary.main,
7373
},
7474
},

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import * as React from 'react';
33
import {
44
useTheme,
5-
fade,
5+
alpha,
66
makeStyles,
77
Theme,
88
createStyles,
@@ -77,7 +77,7 @@ const useStyles = makeStyles((theme: Theme) =>
7777
border: '1px solid #ced4da',
7878
fontSize: 14,
7979
'&:focus': {
80-
boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
80+
boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
8181
borderColor: theme.palette.primary.main,
8282
},
8383
},

0 commit comments

Comments
 (0)