From 45a4c3d59d10d3b34fa95f8ac81daececb1eaed3 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 2 Oct 2020 11:46:29 +0200 Subject: [PATCH 1/7] init --- docs/src/modules/components/AppSearch.js | 6 ++-- docs/src/modules/components/Demo.js | 4 +-- docs/src/modules/components/ad.styles.js | 4 +-- .../components/app-bar/PrimarySearchAppBar.js | 6 ++-- .../app-bar/PrimarySearchAppBar.tsx | 6 ++-- .../pages/components/app-bar/SearchAppBar.js | 6 ++-- .../pages/components/app-bar/SearchAppBar.tsx | 6 ++-- .../components/autocomplete/GitHubLabel.js | 4 +-- .../components/autocomplete/GitHubLabel.tsx | 4 +-- .../text-fields/CustomizedInputs.js | 6 ++-- .../text-fields/CustomizedInputs.tsx | 6 ++-- .../tree-view/CustomizedTreeView.js | 4 +-- .../tree-view/CustomizedTreeView.tsx | 4 +-- .../src/PaginationItem/PaginationItem.js | 16 +++++----- .../material-ui-lab/src/Skeleton/Skeleton.js | 7 +++-- .../src/ToggleButton/ToggleButton.js | 14 ++++----- .../material-ui-lab/src/TreeItem/TreeItem.js | 6 ++-- packages/material-ui/src/Button/Button.js | 16 +++++----- .../src/ButtonGroup/ButtonGroup.js | 6 ++-- packages/material-ui/src/Checkbox/Checkbox.js | 6 ++-- packages/material-ui/src/Chip/Chip.js | 20 ++++++------- packages/material-ui/src/Divider/Divider.js | 4 +-- .../material-ui/src/IconButton/IconButton.js | 8 ++--- packages/material-ui/src/Radio/Radio.js | 6 ++-- packages/material-ui/src/Slider/Slider.js | 10 +++---- packages/material-ui/src/Switch/Switch.js | 6 ++-- .../material-ui/src/TableCell/TableCell.js | 6 ++-- packages/material-ui/src/TableRow/TableRow.js | 4 +-- packages/material-ui/src/Tooltip/Tooltip.js | 6 ++-- .../src/styles/colorManipulator.d.ts | 5 ++++ .../src/styles/colorManipulator.js | 30 +++++++++++++++++++ .../src/styles/colorManipulator.test.js | 14 ++++----- 32 files changed, 147 insertions(+), 109 deletions(-) diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js index 75dff91128e1f1..39971abaa04fbd 100644 --- a/docs/src/modules/components/AppSearch.js +++ b/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'), diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index 40894c7981b3d3..0f53d407a76d4d 100644 --- a/docs/src/modules/components/Demo.js +++ b/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')]: { diff --git a/docs/src/modules/components/ad.styles.js b/docs/src/modules/components/ad.styles.js index d604fe4722bb8e..f0d91c2ce7e871 100644 --- a/docs/src/modules/components/ad.styles.js +++ b/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`, diff --git a/docs/src/pages/components/app-bar/PrimarySearchAppBar.js b/docs/src/pages/components/app-bar/PrimarySearchAppBar.js index 5c907e687980d9..9e92d681975c46 100644 --- a/docs/src/pages/components/app-bar/PrimarySearchAppBar.js +++ b/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, diff --git a/docs/src/pages/components/app-bar/PrimarySearchAppBar.tsx b/docs/src/pages/components/app-bar/PrimarySearchAppBar.tsx index 0b6108df37b215..634b3f44ea2358 100644 --- a/docs/src/pages/components/app-bar/PrimarySearchAppBar.tsx +++ b/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, diff --git a/docs/src/pages/components/app-bar/SearchAppBar.js b/docs/src/pages/components/app-bar/SearchAppBar.js index 5edccad937a52b..a573a20abfba84 100644 --- a/docs/src/pages/components/app-bar/SearchAppBar.js +++ b/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%', diff --git a/docs/src/pages/components/app-bar/SearchAppBar.tsx b/docs/src/pages/components/app-bar/SearchAppBar.tsx index 91eeef616c8d69..132d204ec68798 100644 --- a/docs/src/pages/components/app-bar/SearchAppBar.tsx +++ b/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%', diff --git a/docs/src/pages/components/autocomplete/GitHubLabel.js b/docs/src/pages/components/autocomplete/GitHubLabel.js index 2f1c309bd48db3..48295ceb3855a6 100644 --- a/docs/src/pages/components/autocomplete/GitHubLabel.js +++ b/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, }, }, diff --git a/docs/src/pages/components/autocomplete/GitHubLabel.tsx b/docs/src/pages/components/autocomplete/GitHubLabel.tsx index bd4eec9845276b..c84d5170412b0e 100644 --- a/docs/src/pages/components/autocomplete/GitHubLabel.tsx +++ b/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, }, }, diff --git a/docs/src/pages/components/text-fields/CustomizedInputs.js b/docs/src/pages/components/text-fields/CustomizedInputs.js index 07aaac51ac5818..82593b8405dee4 100644 --- a/docs/src/pages/components/text-fields/CustomizedInputs.js +++ b/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, }, }, diff --git a/docs/src/pages/components/text-fields/CustomizedInputs.tsx b/docs/src/pages/components/text-fields/CustomizedInputs.tsx index d95f091c0d21ba..14ac9509873095 100644 --- a/docs/src/pages/components/text-fields/CustomizedInputs.tsx +++ b/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, }, }, diff --git a/docs/src/pages/components/tree-view/CustomizedTreeView.js b/docs/src/pages/components/tree-view/CustomizedTreeView.js index ee10f7ca2338a7..7eed4262d95ba3 100644 --- a/docs/src/pages/components/tree-view/CustomizedTreeView.js +++ b/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) => ); diff --git a/docs/src/pages/components/tree-view/CustomizedTreeView.tsx b/docs/src/pages/components/tree-view/CustomizedTreeView.tsx index 839eb971e70172..9551874ef7e2cf 100644 --- a/docs/src/pages/components/tree-view/CustomizedTreeView.tsx +++ b/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) => ); diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index 7133b5362392c2..fce83da697b308 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/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, ), diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.js b/packages/material-ui-lab/src/Skeleton/Skeleton.js index 886947f18b1d78..3ce260654491dc 100644 --- a/packages/material-ui-lab/src/Skeleton/Skeleton.js +++ b/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"`. */ diff --git a/packages/material-ui-lab/src/ToggleButton/ToggleButton.js b/packages/material-ui-lab/src/ToggleButton/ToggleButton.js index 5dd5291266f9bc..402ecd638d26c7 100644 --- a/packages/material-ui-lab/src/ToggleButton/ToggleButton.js +++ b/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,13 +14,13 @@ 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, @@ -28,12 +28,12 @@ export const styles = (theme) => ({ }, }, '&$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', }, diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.js b/packages/material-ui-lab/src/TreeItem/TreeItem.js index 149db4c81ede70..11e5011144a106 100644 --- a/packages/material-ui-lab/src/TreeItem/TreeItem.js +++ b/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, ), diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js index 437fe073030227..a0689bce19a1b4 100644 --- a/packages/material-ui/src/Button/Button.js +++ b/packages/material-ui/src/Button/Button.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import withStyles from '../styles/withStyles'; -import { fade } from '../styles/colorManipulator'; +import { alpha } from '../styles/colorManipulator'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; @@ -20,7 +20,7 @@ export const styles = (theme) => ({ }), '&:hover': { textDecoration: 'none', - backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity), + backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent', @@ -48,7 +48,7 @@ export const styles = (theme) => ({ textPrimary: { color: theme.palette.primary.main, '&:hover': { - backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity), + backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent', @@ -59,7 +59,7 @@ export const styles = (theme) => ({ textSecondary: { color: theme.palette.secondary.main, '&:hover': { - backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity), + backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent', @@ -79,10 +79,10 @@ export const styles = (theme) => ({ /* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */ outlinedPrimary: { color: theme.palette.primary.main, - border: `1px solid ${fade(theme.palette.primary.main, 0.5)}`, + border: `1px solid ${alpha(theme.palette.primary.main, 0.5)}`, '&:hover': { border: `1px solid ${theme.palette.primary.main}`, - backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity), + backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent', @@ -92,10 +92,10 @@ export const styles = (theme) => ({ /* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */ outlinedSecondary: { color: theme.palette.secondary.main, - border: `1px solid ${fade(theme.palette.secondary.main, 0.5)}`, + border: `1px solid ${alpha(theme.palette.secondary.main, 0.5)}`, '&:hover': { border: `1px solid ${theme.palette.secondary.main}`, - backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity), + backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent', diff --git a/packages/material-ui/src/ButtonGroup/ButtonGroup.js b/packages/material-ui/src/ButtonGroup/ButtonGroup.js index e93ec47d78daba..f97efc82d9cfaf 100644 --- a/packages/material-ui/src/ButtonGroup/ButtonGroup.js +++ b/packages/material-ui/src/ButtonGroup/ButtonGroup.js @@ -3,7 +3,7 @@ import { isFragment } from 'react-is'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import capitalize from '../utils/capitalize'; -import { fade } from '../styles/colorManipulator'; +import { alpha } from '../styles/colorManipulator'; import withStyles from '../styles/withStyles'; import Button from '../Button'; @@ -82,13 +82,13 @@ export const styles = (theme) => ({ /* Styles applied to the children if `variant="text"` and `color="primary"`. */ groupedTextPrimary: { '&:not(:last-child)': { - borderColor: fade(theme.palette.primary.main, 0.5), + borderColor: alpha(theme.palette.primary.main, 0.5), }, }, /* Styles applied to the children if `variant="text"` and `color="secondary"`. */ groupedTextSecondary: { '&:not(:last-child)': { - borderColor: fade(theme.palette.secondary.main, 0.5), + borderColor: alpha(theme.palette.secondary.main, 0.5), }, }, /* Styles applied to the children if `variant="outlined"`. */ diff --git a/packages/material-ui/src/Checkbox/Checkbox.js b/packages/material-ui/src/Checkbox/Checkbox.js index f9ad60c587cadc..4625b5128866ed 100644 --- a/packages/material-ui/src/Checkbox/Checkbox.js +++ b/packages/material-ui/src/Checkbox/Checkbox.js @@ -5,7 +5,7 @@ import { refType } from '@material-ui/utils'; import SwitchBase from '../internal/SwitchBase'; import CheckBoxOutlineBlankIcon from '../internal/svg-icons/CheckBoxOutlineBlank'; import CheckBoxIcon from '../internal/svg-icons/CheckBox'; -import { fade } from '../styles/colorManipulator'; +import { alpha } from '../styles/colorManipulator'; import IndeterminateCheckBoxIcon from '../internal/svg-icons/IndeterminateCheckBox'; import capitalize from '../utils/capitalize'; import withStyles from '../styles/withStyles'; @@ -26,7 +26,7 @@ export const styles = (theme) => ({ '&$checked': { color: theme.palette.primary.main, '&:hover': { - backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity), + backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent', @@ -42,7 +42,7 @@ export const styles = (theme) => ({ '&$checked': { color: theme.palette.secondary.main, '&:hover': { - backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity), + backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent', diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js index 1451fc8e44fbc6..9ad8a28cb20a64 100644 --- a/packages/material-ui/src/Chip/Chip.js +++ b/packages/material-ui/src/Chip/Chip.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import CancelIcon from '../internal/svg-icons/Cancel'; import withStyles from '../styles/withStyles'; -import { emphasize, fade } from '../styles/colorManipulator'; +import { emphasize, alpha } from '../styles/colorManipulator'; import useForkRef from '../utils/useForkRef'; import unsupportedProp from '../utils/unsupportedProp'; import capitalize from '../utils/capitalize'; @@ -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]; - const deleteIconColor = fade(theme.palette.text.primary, 0.26); + const deleteIconColor = alpha(theme.palette.text.primary, 0.26); return { /* Styles applied to the root element. */ @@ -130,7 +130,7 @@ export const styles = (theme) => { theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' }`, '$clickable&:hover, $clickable&:focus, $deletable&:focus': { - backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity), + backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity), }, '& $avatar': { marginLeft: 4, @@ -156,7 +156,7 @@ export const styles = (theme) => { color: theme.palette.primary.main, border: `1px solid ${theme.palette.primary.main}`, '$clickable&:hover, $clickable&:focus, $deletable&:focus': { - backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity), + backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity), }, }, /* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */ @@ -164,7 +164,7 @@ export const styles = (theme) => { color: theme.palette.secondary.main, border: `1px solid ${theme.palette.secondary.main}`, '$clickable&:hover, $clickable&:focus, $deletable&:focus': { - backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity), + backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity), }, }, // TODO v5: remove @@ -219,7 +219,7 @@ export const styles = (theme) => { cursor: 'pointer', margin: '0 5px 0 -6px', '&:hover': { - color: fade(deleteIconColor, 0.4), + color: alpha(deleteIconColor, 0.4), }, }, /* Styles applied to the `deleteIcon` element if `size="small"`. */ @@ -231,28 +231,28 @@ export const styles = (theme) => { }, /* Styles applied to the deleteIcon element if `color="primary"` and `variant="default"`. */ deleteIconColorPrimary: { - color: fade(theme.palette.primary.contrastText, 0.7), + color: alpha(theme.palette.primary.contrastText, 0.7), '&:hover, &:active': { color: theme.palette.primary.contrastText, }, }, /* Styles applied to the deleteIcon element if `color="secondary"` and `variant="default"`. */ deleteIconColorSecondary: { - color: fade(theme.palette.secondary.contrastText, 0.7), + color: alpha(theme.palette.secondary.contrastText, 0.7), '&:hover, &:active': { color: theme.palette.secondary.contrastText, }, }, /* Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`. */ deleteIconOutlinedColorPrimary: { - color: fade(theme.palette.primary.main, 0.7), + color: alpha(theme.palette.primary.main, 0.7), '&:hover, &:active': { color: theme.palette.primary.main, }, }, /* Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`. */ deleteIconOutlinedColorSecondary: { - color: fade(theme.palette.secondary.main, 0.7), + color: alpha(theme.palette.secondary.main, 0.7), '&:hover, &:active': { color: theme.palette.secondary.main, }, diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js index ec1a38b75c5b8f..8ac967d2aae0fc 100644 --- a/packages/material-ui/src/Divider/Divider.js +++ b/packages/material-ui/src/Divider/Divider.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import withStyles from '../styles/withStyles'; -import { fade } from '../styles/colorManipulator'; +import { alpha } from '../styles/colorManipulator'; export const styles = (theme) => ({ /* Styles applied to the root element. */ @@ -26,7 +26,7 @@ export const styles = (theme) => ({ }, /* Styles applied to the root element if `light={true}`. */ light: { - backgroundColor: fade(theme.palette.divider, 0.08), + backgroundColor: alpha(theme.palette.divider, 0.08), }, /* Styles applied to the root element if `variant="middle"`. */ middle: { diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js index 7a35d5da99daf0..fb211b92476394 100644 --- a/packages/material-ui/src/IconButton/IconButton.js +++ b/packages/material-ui/src/IconButton/IconButton.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { chainPropTypes } from '@material-ui/utils'; import withStyles from '../styles/withStyles'; -import { fade } from '../styles/colorManipulator'; +import { alpha } from '../styles/colorManipulator'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; @@ -21,7 +21,7 @@ export const styles = (theme) => ({ duration: theme.transitions.duration.shortest, }), '&:hover': { - backgroundColor: fade(theme.palette.action.active, theme.palette.action.hoverOpacity), + backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent', @@ -54,7 +54,7 @@ export const styles = (theme) => ({ colorPrimary: { color: theme.palette.primary.main, '&:hover': { - backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity), + backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent', @@ -65,7 +65,7 @@ export const styles = (theme) => ({ colorSecondary: { color: theme.palette.secondary.main, '&:hover': { - backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity), + backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent', diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js index d4c855d7f8b080..c2f7859d15088d 100644 --- a/packages/material-ui/src/Radio/Radio.js +++ b/packages/material-ui/src/Radio/Radio.js @@ -4,7 +4,7 @@ import clsx from 'clsx'; import { refType } from '@material-ui/utils'; import SwitchBase from '../internal/SwitchBase'; import RadioButtonIcon from './RadioButtonIcon'; -import { fade } from '../styles/colorManipulator'; +import { alpha } from '../styles/colorManipulator'; import capitalize from '../utils/capitalize'; import createChainedFunction from '../utils/createChainedFunction'; import withStyles from '../styles/withStyles'; @@ -24,7 +24,7 @@ export const styles = (theme) => ({ '&$checked': { color: theme.palette.primary.main, '&:hover': { - backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity), + backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent', @@ -40,7 +40,7 @@ export const styles = (theme) => ({ '&$checked': { color: theme.palette.secondary.main, '&:hover': { - backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity), + backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent', diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index db0a9bd6b41c3e..a2e63583cfe6dd 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -4,7 +4,7 @@ import clsx from 'clsx'; import { chainPropTypes } from '@material-ui/utils'; import withStyles from '../styles/withStyles'; import useTheme from '../styles/useTheme'; -import { fade, lighten, darken } from '../styles/colorManipulator'; +import { alpha, lighten, darken } from '../styles/colorManipulator'; import useIsFocusVisible from '../utils/useIsFocusVisible'; import ownerDocument from '../utils/ownerDocument'; import useEventCallback from '../utils/useEventCallback'; @@ -252,13 +252,13 @@ export const styles = (theme) => ({ bottom: -15, }, '&$focusVisible,&:hover': { - boxShadow: `0px 0px 0px 8px ${fade(theme.palette.primary.main, 0.16)}`, + boxShadow: `0px 0px 0px 8px ${alpha(theme.palette.primary.main, 0.16)}`, '@media (hover: none)': { boxShadow: 'none', }, }, '&$active': { - boxShadow: `0px 0px 0px 14px ${fade(theme.palette.primary.main, 0.16)}`, + boxShadow: `0px 0px 0px 14px ${alpha(theme.palette.primary.main, 0.16)}`, }, '&$disabled': { width: 8, @@ -285,10 +285,10 @@ export const styles = (theme) => ({ /* Styles applied to the thumb element if `color="secondary"`. */ thumbColorSecondary: { '&$focusVisible,&:hover': { - boxShadow: `0px 0px 0px 8px ${fade(theme.palette.secondary.main, 0.16)}`, + boxShadow: `0px 0px 0px 8px ${alpha(theme.palette.secondary.main, 0.16)}`, }, '&$active': { - boxShadow: `0px 0px 0px 14px ${fade(theme.palette.secondary.main, 0.16)}`, + boxShadow: `0px 0px 0px 14px ${alpha(theme.palette.secondary.main, 0.16)}`, }, }, /* Pseudo-class applied to the thumb element if it's active. */ diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js index 64fea496653c0a..f915667882d771 100644 --- a/packages/material-ui/src/Switch/Switch.js +++ b/packages/material-ui/src/Switch/Switch.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { refType } from '@material-ui/utils'; import withStyles from '../styles/withStyles'; -import { fade } from '../styles/colorManipulator'; +import { alpha } from '../styles/colorManipulator'; import capitalize from '../utils/capitalize'; import SwitchBase from '../internal/SwitchBase'; @@ -62,7 +62,7 @@ export const styles = (theme) => ({ '&$checked': { color: theme.palette.primary.main, '&:hover': { - backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity), + backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity), '@media (hover: none)': { backgroundColor: 'transparent', }, @@ -84,7 +84,7 @@ export const styles = (theme) => ({ '&$checked': { color: theme.palette.secondary.main, '&:hover': { - backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity), + backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity), '@media (hover: none)': { backgroundColor: 'transparent', }, diff --git a/packages/material-ui/src/TableCell/TableCell.js b/packages/material-ui/src/TableCell/TableCell.js index d2d04472028c29..a53f0f4fca6b77 100644 --- a/packages/material-ui/src/TableCell/TableCell.js +++ b/packages/material-ui/src/TableCell/TableCell.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import withStyles from '../styles/withStyles'; import capitalize from '../utils/capitalize'; -import { darken, fade, lighten } from '../styles/colorManipulator'; +import { darken, alpha, lighten } from '../styles/colorManipulator'; import TableContext from '../Table/TableContext'; import Tablelvl2Context from '../Table/Tablelvl2Context'; @@ -18,8 +18,8 @@ export const styles = (theme) => ({ borderBottom: `1px solid ${ theme.palette.type === 'light' - ? lighten(fade(theme.palette.divider, 1), 0.88) - : darken(fade(theme.palette.divider, 1), 0.68) + ? lighten(alpha(theme.palette.divider, 1), 0.88) + : darken(alpha(theme.palette.divider, 1), 0.68) }`, textAlign: 'left', padding: 16, diff --git a/packages/material-ui/src/TableRow/TableRow.js b/packages/material-ui/src/TableRow/TableRow.js index d23e5d188ad29c..7d519be72e4dad 100644 --- a/packages/material-ui/src/TableRow/TableRow.js +++ b/packages/material-ui/src/TableRow/TableRow.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import withStyles from '../styles/withStyles'; import Tablelvl2Context from '../Table/Tablelvl2Context'; -import { fade } from '../styles/colorManipulator'; +import { alpha } from '../styles/colorManipulator'; export const styles = (theme) => ({ /* Styles applied to the root element. */ @@ -17,7 +17,7 @@ export const styles = (theme) => ({ backgroundColor: theme.palette.action.hover, }, '&$selected, &$selected:hover': { - backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.selectedOpacity), + backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.selectedOpacity), }, }, /* Pseudo-class applied to the root element if `selected={true}`. */ diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js index d218123923da75..72255aae814147 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.js +++ b/packages/material-ui/src/Tooltip/Tooltip.js @@ -3,7 +3,7 @@ import * as ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { deepmerge, elementAcceptingRef } from '@material-ui/utils'; -import { fade } from '../styles/colorManipulator'; +import { alpha } from '../styles/colorManipulator'; import withStyles from '../styles/withStyles'; import capitalize from '../utils/capitalize'; import Grow from '../Grow'; @@ -80,7 +80,7 @@ export const styles = (theme) => ({ popperArrow: arrowGenerator(), /* Styles applied to the tooltip (label wrapper) element. */ tooltip: { - backgroundColor: fade(theme.palette.grey[700], 0.9), + backgroundColor: alpha(theme.palette.grey[700], 0.9), borderRadius: theme.shape.borderRadius, color: theme.palette.common.white, fontFamily: theme.typography.fontFamily, @@ -103,7 +103,7 @@ export const styles = (theme) => ({ width: '1em', height: '0.71em' /* = width / sqrt(2) = (length of the hypotenuse) */, boxSizing: 'border-box', - color: fade(theme.palette.grey[700], 0.9), + color: alpha(theme.palette.grey[700], 0.9), '&::before': { content: '""', margin: 'auto', diff --git a/packages/material-ui/src/styles/colorManipulator.d.ts b/packages/material-ui/src/styles/colorManipulator.d.ts index f2e1518a82bfb2..7db86e4a43b3e8 100644 --- a/packages/material-ui/src/styles/colorManipulator.d.ts +++ b/packages/material-ui/src/styles/colorManipulator.d.ts @@ -12,6 +12,11 @@ export function recomposeColor(color: ColorObject): string; export function getContrastRatio(foreground: string, background: string): number; export function getLuminance(color: string): number; export function emphasize(color: string, coefficient?: number): string; +/**s + * @deprecated + * Use `import { alpha } from '@material-ui/core/styles'` instead. + */ export function fade(color: string, value: number): string; +export function alpha(color: string, value: number): string; export function darken(color: string, coefficient: number): string; export function lighten(color: string, coefficient: number): string; diff --git a/packages/material-ui/src/styles/colorManipulator.js b/packages/material-ui/src/styles/colorManipulator.js index e228e9ca01be6a..9dc20e77b9d5e4 100644 --- a/packages/material-ui/src/styles/colorManipulator.js +++ b/packages/material-ui/src/styles/colorManipulator.js @@ -198,6 +198,8 @@ export function emphasize(color, coefficient = 0.15) { return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient); } +let warnedOnce = false; + /** * Set the absolute transparency of a color. * Any existing alpha values are overwritten. @@ -205,8 +207,36 @@ export function emphasize(color, coefficient = 0.15) { * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() * @param {number} value - value to set the alpha channel to in the range 0 -1 * @returns {string} A CSS color string. Hex input values are returned as rgb + * + * @deprecated + * Use `import { alpha } from '@material-ui/core/styles'` instead. */ export function fade(color, value) { + if (process.env.NODE_ENV !== 'production') { + if (!warnedOnce) { + warnedOnce = true; + console.error( + [ + 'Material-UI: the fade color utility was renamed to alpha to better describe the functinality of the utility.', + '', + "You should use `import { alpha } from '@material-ui/core/styles'`", + ].join('\n'), + ); + } + } + + return alpha(color, value); +} + +/** + * Set the absolute transparency of a color. + * Any existing alpha values are overwritten. + * + * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() + * @param {number} value - value to set the alpha channel to in the range 0 -1 + * @returns {string} A CSS color string. Hex input values are returned as rgb + */ +export function alpha(color, value) { color = decomposeColor(color); value = clamp(value); diff --git a/packages/material-ui/src/styles/colorManipulator.test.js b/packages/material-ui/src/styles/colorManipulator.test.js index 2f2ac91237523f..1f458ca7a094ec 100644 --- a/packages/material-ui/src/styles/colorManipulator.test.js +++ b/packages/material-ui/src/styles/colorManipulator.test.js @@ -8,7 +8,7 @@ import { darken, decomposeColor, emphasize, - fade, + alpha, getContrastRatio, getLuminance, lighten, @@ -216,26 +216,26 @@ describe('utils/colorManipulator', () => { }); }); - describe('fade', () => { + describe('alpha', () => { it('converts an rgb color to an rgba color with the value provided', () => { - expect(fade('rgb(1, 2, 3)', 0.4)).to.equal('rgba(1, 2, 3, 0.4)'); + expect(alpha('rgb(1, 2, 3)', 0.4)).to.equal('rgba(1, 2, 3, 0.4)'); }); it('updates an rgba color with the alpha value provided', () => { - expect(fade('rgba(255, 0, 0, 0.2)', 0.5)).to.equal('rgba(255, 0, 0, 0.5)'); + expect(alpha('rgba(255, 0, 0, 0.2)', 0.5)).to.equal('rgba(255, 0, 0, 0.5)'); }); it('converts an hsl color to an hsla color with the value provided', () => { - expect(fade('hsl(0, 100%, 50%)', 0.1)).to.equal('hsla(0, 100%, 50%, 0.1)'); + expect(alpha('hsl(0, 100%, 50%)', 0.1)).to.equal('hsla(0, 100%, 50%, 0.1)'); }); it('updates an hsla color with the alpha value provided', () => { - expect(fade('hsla(0, 100%, 50%, 0.2)', 0.5)).to.equal('hsla(0, 100%, 50%, 0.5)'); + expect(alpha('hsla(0, 100%, 50%, 0.2)', 0.5)).to.equal('hsla(0, 100%, 50%, 0.5)'); }); it('throw on invalid colors', () => { expect(() => { - fade('white', 0.4); + alpha('white', 0.4); }).to.throw('Material-UI: Unsupported `white` color'); }); }); From 85699ce995d0dc8b88a10c93b9ad1b6fc0323ce4 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 2 Oct 2020 11:55:35 +0200 Subject: [PATCH 2/7] fixed jsdoc --- packages/material-ui/src/styles/colorManipulator.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/styles/colorManipulator.d.ts b/packages/material-ui/src/styles/colorManipulator.d.ts index 7db86e4a43b3e8..a903862190633d 100644 --- a/packages/material-ui/src/styles/colorManipulator.d.ts +++ b/packages/material-ui/src/styles/colorManipulator.d.ts @@ -12,7 +12,7 @@ export function recomposeColor(color: ColorObject): string; export function getContrastRatio(foreground: string, background: string): number; export function getLuminance(color: string): number; export function emphasize(color: string, coefficient?: number): string; -/**s +/** * @deprecated * Use `import { alpha } from '@material-ui/core/styles'` instead. */ From 99a42ce99c07296ce446a5908424fa69b5af90a2 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Sat, 3 Oct 2020 13:25:50 +0200 Subject: [PATCH 3/7] Update packages/material-ui/src/styles/colorManipulator.js Co-authored-by: Matt --- packages/material-ui/src/styles/colorManipulator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/styles/colorManipulator.js b/packages/material-ui/src/styles/colorManipulator.js index 9dc20e77b9d5e4..06cffdef40a123 100644 --- a/packages/material-ui/src/styles/colorManipulator.js +++ b/packages/material-ui/src/styles/colorManipulator.js @@ -230,7 +230,7 @@ export function fade(color, value) { /** * Set the absolute transparency of a color. - * Any existing alpha values are overwritten. + * Any existing alpha value is overwritten. * * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() * @param {number} value - value to set the alpha channel to in the range 0 -1 From c621648ca357e7a6fd657e26569155f71fa3aa7e Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Sat, 3 Oct 2020 13:26:26 +0200 Subject: [PATCH 4/7] Update packages/material-ui/src/styles/colorManipulator.js Co-authored-by: Josh Wooding <12938082+joshwooding@users.noreply.github.com> --- packages/material-ui/src/styles/colorManipulator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/styles/colorManipulator.js b/packages/material-ui/src/styles/colorManipulator.js index 06cffdef40a123..f56c1e4b90affb 100644 --- a/packages/material-ui/src/styles/colorManipulator.js +++ b/packages/material-ui/src/styles/colorManipulator.js @@ -233,7 +233,7 @@ export function fade(color, value) { * Any existing alpha value is overwritten. * * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() - * @param {number} value - value to set the alpha channel to in the range 0 -1 + * @param {number} value - value to set the alpha channel to in the range 0-1 * @returns {string} A CSS color string. Hex input values are returned as rgb */ export function alpha(color, value) { From 21d5836fb084143213174fac919e84ef939139e9 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 5 Oct 2020 09:58:57 +0200 Subject: [PATCH 5/7] Update packages/material-ui/src/styles/colorManipulator.js Co-authored-by: Matt --- packages/material-ui/src/styles/colorManipulator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/styles/colorManipulator.js b/packages/material-ui/src/styles/colorManipulator.js index f56c1e4b90affb..65fd4d8138f8fc 100644 --- a/packages/material-ui/src/styles/colorManipulator.js +++ b/packages/material-ui/src/styles/colorManipulator.js @@ -217,7 +217,7 @@ export function fade(color, value) { warnedOnce = true; console.error( [ - 'Material-UI: the fade color utility was renamed to alpha to better describe the functinality of the utility.', + 'Material-UI: The `fade` color utility was renamed to alpha to better describe its functionality.', '', "You should use `import { alpha } from '@material-ui/core/styles'`", ].join('\n'), From 2e9b1f8ea2ad56c711a2c61eaab4038e78330fd4 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 5 Oct 2020 09:59:30 +0200 Subject: [PATCH 6/7] Update packages/material-ui/src/styles/colorManipulator.js --- packages/material-ui/src/styles/colorManipulator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/styles/colorManipulator.js b/packages/material-ui/src/styles/colorManipulator.js index 65fd4d8138f8fc..0f674381ed5b30 100644 --- a/packages/material-ui/src/styles/colorManipulator.js +++ b/packages/material-ui/src/styles/colorManipulator.js @@ -217,7 +217,7 @@ export function fade(color, value) { warnedOnce = true; console.error( [ - 'Material-UI: The `fade` color utility was renamed to alpha to better describe its functionality.', + 'Material-UI: The `fade` color utility was renamed to `alpha` to better describe its functionality.', '', "You should use `import { alpha } from '@material-ui/core/styles'`", ].join('\n'), From 959c9492bfd53adfe7941b8d5be838d569a65deb Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 7 Oct 2020 12:10:27 +0200 Subject: [PATCH 7/7] trigger build