[Alert] improve filled variant coloring

mui · Jan 10, 2020 · e6aea69 · e6aea69
1 parent 95841fb
commit e6aea69
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/packages/material-ui-lab/src/Alert/Alert.js b/packages/material-ui-lab/src/Alert/Alert.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { hsl, parseToHsl } from 'polished';
 import { withStyles, lighten, darken } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import SuccessOutlinedIcon from '../internal/svg-icons/SuccessOutlined';
@@ -14,6 +15,7 @@ import { capitalize } from '@material-ui/core/utils';
 export const styles = theme => {
   const getColor = theme.palette.type === 'light' ? darken : lighten;
   const getBackgroundColor = theme.palette.type === 'light' ? lighten : darken;
+  const getColorWithLightness = (color, lightness) => hsl({ ...parseToHsl(color), lightness });
 
   return {
     /* Styles applied to the root element. */
@@ -92,25 +94,25 @@ export const styles = theme => {
     filledSuccess: {
       color: '#fff',
       fontWeight: theme.typography.fontWeightMedium,
-      backgroundColor: theme.palette.success.main,
+      backgroundColor: getColorWithLightness(theme.palette.success.main, 0.45),
     },
     /* Styles applied to the root element if `variant="filled"` and `color="info"`. */
     filledInfo: {
       color: '#fff',
       fontWeight: theme.typography.fontWeightMedium,
-      backgroundColor: theme.palette.info.main,
+      backgroundColor: getColorWithLightness(theme.palette.info.main, 0.45),
     },
     /* Styles applied to the root element if `variant="filled"` and `color="warning"`. */
     filledWarning: {
       color: '#fff',
       fontWeight: theme.typography.fontWeightMedium,
-      backgroundColor: theme.palette.warning.main,
+      backgroundColor: getColorWithLightness(theme.palette.warning.main, 0.45),
     },
     /* Styles applied to the root element if `variant="filled"` and `color="error"`. */
     filledError: {
       color: '#fff',
       fontWeight: theme.typography.fontWeightMedium,
-      backgroundColor: theme.palette.error.main,
+      backgroundColor: getColorWithLightness(theme.palette.error.main, 0.45),
     },
     /* Styles applied to the icon wrapper element. */
     icon: {

diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json
@@ -57,6 +57,7 @@
     "convert-css-length": "^2.0.1",
     "hoist-non-react-statics": "^3.2.1",
     "normalize-scroll-left": "^0.2.0",
+    "polished": "^3.4.2",
     "popper.js": "^1.14.1",
     "prop-types": "^15.7.2",
     "react-is": "^16.8.0",

diff --git a/yarn.lock b/yarn.lock
@@ -11532,6 +11532,13 @@ pngjs@^2.2.0:
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-2.3.1.tgz#11d1e12b9cb64d63e30c143a330f4c1f567da85f"
   integrity sha1-EdHhK5y2TWPjDBQ6Mw9MH1Z9qF8=
 
+polished@^3.4.2:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/polished/-/polished-3.4.2.tgz#b4780dad81d64df55615fbfc77acb52fd17d88cd"
+  integrity sha512-9Rch6iMZckABr6EFCLPZsxodeBpXMo9H4fRlfR/9VjMEyy5xpo1/WgXlJGgSjPyVhEZNycbW7UmYMNyWS5MI0g==
+  dependencies:
+    "@babel/runtime" "^7.6.3"
+
 popper.js@^1.14.1:
   version "1.16.0"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.0.tgz#2e1816bcbbaa518ea6c2e15a466f4cb9c6e2fbb3"