From e4eb7219e6983c397a166fbe5d91c43d47a9908d Mon Sep 17 00:00:00 2001 From: Daniel Sanchez Date: Fri, 19 Feb 2021 11:41:56 +0100 Subject: [PATCH 1/2] Change polished rgba for@material-ui fade --- src/dataDisplay/Card/index.tsx | 4 ++-- src/dataDisplay/FixedDialog/index.tsx | 4 ++-- src/dataDisplay/Text/index.tsx | 4 ++-- src/dataDisplay/Tooltip/index.tsx | 6 +++--- src/inputs/Switch/index.tsx | 4 ++-- src/utils/modals/GenericModal/index.tsx | 4 ++-- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/dataDisplay/Card/index.tsx b/src/dataDisplay/Card/index.tsx index 2286a5b1..de5b40e1 100644 --- a/src/dataDisplay/Card/index.tsx +++ b/src/dataDisplay/Card/index.tsx @@ -1,10 +1,10 @@ import React from 'react'; import styled from 'styled-components'; -import { rgba } from 'polished'; +import { fade } from '@material-ui/core/styles/colorManipulator'; const StyledCard = styled.div` box-shadow: 1px 2px 10px 0 - ${({ theme }) => rgba(theme.colors.shadow.color, 0.18)}; + ${({ theme }) => fade(theme.colors.shadow.color, 0.18)}; border-radius: 8px; padding: 24px; background-color: ${({ theme }) => theme.colors.white}; diff --git a/src/dataDisplay/FixedDialog/index.tsx b/src/dataDisplay/FixedDialog/index.tsx index 37be1fd7..e341b8f6 100644 --- a/src/dataDisplay/FixedDialog/index.tsx +++ b/src/dataDisplay/FixedDialog/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import { rgba } from 'polished'; +import { fade } from '@material-ui/core/styles/colorManipulator'; import { Title, ModalFooterConfirmation } from '../../index'; @@ -9,7 +9,7 @@ const Container = styled.div` display: flex; align-items: center; justify-content: center; - background-color: ${({ theme }) => rgba(theme.colors.overlay.color, 0.8)}; + background-color: ${({ theme }) => fade(theme.colors.overlay.color, 0.8)}; `; const Wrapper = styled.div` diff --git a/src/dataDisplay/Text/index.tsx b/src/dataDisplay/Text/index.tsx index fdaef603..bc83efcd 100644 --- a/src/dataDisplay/Text/index.tsx +++ b/src/dataDisplay/Text/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import Tooltip from '@material-ui/core/Tooltip'; import { withStyles } from '@material-ui/core/styles'; -import { rgba } from 'polished'; +import { fade } from '@material-ui/core/styles/colorManipulator'; import theme, { ThemeTextSize, ThemeColors } from '../../theme'; @@ -32,7 +32,7 @@ const StyledTooltip = withStyles(() => ({ tooltip: { backgroundColor: theme.colors.white, color: theme.colors.text, - boxShadow: `0px 0px 10px ${rgba(theme.colors.shadow.color, 0.2)}`, + boxShadow: `0px 0px 10px ${fade(theme.colors.shadow.color, 0.2)}`, }, arrow: { color: theme.colors.white, diff --git a/src/dataDisplay/Tooltip/index.tsx b/src/dataDisplay/Tooltip/index.tsx index d631251b..cf623ad0 100644 --- a/src/dataDisplay/Tooltip/index.tsx +++ b/src/dataDisplay/Tooltip/index.tsx @@ -3,7 +3,7 @@ import MUITooltip, { TooltipProps as TooltipPropsMui, } from '@material-ui/core/Tooltip'; import { withStyles } from '@material-ui/core/styles'; -import { rgba } from 'polished'; +import { fade } from '@material-ui/core/styles/colorManipulator'; import theme, { ThemeColors, ThemeTooltipSize } from '../../theme'; @@ -60,7 +60,7 @@ const customTooltip = ({ backgroundColor: backgroundColor ? (theme.colors[backgroundColor] as string) : theme.colors.overlay.color, - boxShadow: `1px 2px 10px ${rgba(theme.colors.shadow.color, 0.18)}`, + boxShadow: `1px 2px 10px ${fade(theme.colors.shadow.color, 0.18)}`, border: getBorderBySize(size), color: textColor ? (theme.colors[textColor] as string) @@ -78,7 +78,7 @@ const customTooltip = ({ border: 'none', '&::before': { - boxShadow: `1px 2px 10px ${rgba(theme.colors.shadow.color, 0.18)}`, + boxShadow: `1px 2px 10px ${fade(theme.colors.shadow.color, 0.18)}`, }, }, }))(MUITooltip); diff --git a/src/inputs/Switch/index.tsx b/src/inputs/Switch/index.tsx index 1d28e878..3a114113 100644 --- a/src/inputs/Switch/index.tsx +++ b/src/inputs/Switch/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import SwitchMui from '@material-ui/core/Switch'; import styled from 'styled-components'; -import { rgba } from 'polished'; +import { fade } from '@material-ui/core/styles/colorManipulator'; const StyledSwitch = styled(({ ...rest }) => )` && { @@ -12,7 +12,7 @@ const StyledSwitch = styled(({ ...rest }) => )` } .MuiSwitch-colorSecondary.Mui-checked:hover { - background-color: ${({ theme }) => rgba(theme.colors.primary, 0.08)}; + background-color: ${({ theme }) => fade(theme.colors.primary, 0.08)}; } .Mui-checked + .MuiSwitch-track { diff --git a/src/utils/modals/GenericModal/index.tsx b/src/utils/modals/GenericModal/index.tsx index 3477823d..a2cee33b 100644 --- a/src/utils/modals/GenericModal/index.tsx +++ b/src/utils/modals/GenericModal/index.tsx @@ -1,9 +1,9 @@ import React from 'react'; import Modal from '@material-ui/core/Modal'; import { makeStyles } from '@material-ui/core/styles'; +import { fade } from '@material-ui/core/styles/colorManipulator'; import styled from 'styled-components'; import cn from 'classnames'; -import { rgba } from 'polished'; import Media from 'react-media'; import theme from '../../../theme'; @@ -66,7 +66,7 @@ const useStyles = makeStyles({ alignItems: 'center', justifyContent: 'center', overflowY: 'scroll', - background: rgba(theme.colors.overlay.color, theme.colors.overlay.opacity), + background: fade(theme.colors.overlay.color, theme.colors.overlay.opacity), }, paper: { From a5bce8bcd63f24b2b25ac30c7e9f8cb3f4e18f1a Mon Sep 17 00:00:00 2001 From: Daniel Sanchez Date: Fri, 19 Feb 2021 12:01:23 +0100 Subject: [PATCH 2/2] Remove polished direct dependency --- package.json | 1 - src/colors.stories.tsx | 4 ++-- yarn.lock | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 41087b7f..7121222f 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,6 @@ "license": "MIT", "dependencies": { "classnames": "^2.2.6", - "polished": "^3.6.7", "react-media": "^1.10.0" }, "devDependencies": { diff --git a/src/colors.stories.tsx b/src/colors.stories.tsx index 7caa68ac..e9ac1e34 100644 --- a/src/colors.stories.tsx +++ b/src/colors.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import { parseToHsl } from 'polished'; +import { getLuminance } from '@material-ui/core/styles/colorManipulator'; import { Text, theme } from './index'; @@ -44,7 +44,7 @@ export const ColorsSample = (): React.ReactElement => { }, []) .sort( ({ code: colorA }, { code: colorB }) => - parseToHsl(colorA).lightness - parseToHsl(colorB).lightness + getLuminance(colorA) - getLuminance(colorB) ); return ( diff --git a/yarn.lock b/yarn.lock index 34c0d47e..67e3d760 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8046,7 +8046,7 @@ pnp-webpack-plugin@1.6.4: dependencies: ts-pnp "^1.1.6" -polished@^3.4.4, polished@^3.6.7: +polished@^3.4.4: version "3.7.0" resolved "https://registry.yarnpkg.com/polished/-/polished-3.7.0.tgz#ece3368df30d33082bc8a957aa212d3f98119278" integrity sha512-1tnvQ2wsxfR/DyPE2Xu9sRbnLAwXAarCWiZJ8Hfirw59bTigqjbzEWSAmzYizT6ocQW995V8n7RP48jq50DjJA==