Remove polished dependency

package.json

@@ -23,7 +23,6 @@
   "license": "MIT",
   "dependencies": {
     "classnames": "^2.2.6",
-    "polished": "^3.6.7",
     "react-media": "^1.10.0"
   },
   "devDependencies": {

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 (

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};

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`

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,

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);

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 }) => <SwitchMui {...rest} />)`
   && {
@@ -12,7 +12,7 @@ const StyledSwitch = styled(({ ...rest }) => <SwitchMui {...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 {

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: {

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==