From 95841fb236db3ef58e328a6663b1ca6943cf82d5 Mon Sep 17 00:00:00 2001 From: Alexandre Hitchcox Date: Mon, 6 Jan 2020 13:31:15 +0000 Subject: [PATCH 1/3] [Alert] improve dark theme coloring --- packages/material-ui-lab/src/Alert/Alert.js | 243 ++++++++++---------- 1 file changed, 118 insertions(+), 125 deletions(-) diff --git a/packages/material-ui-lab/src/Alert/Alert.js b/packages/material-ui-lab/src/Alert/Alert.js index d616fd3a0a2d1a..b8de9f19b2ee0b 100644 --- a/packages/material-ui-lab/src/Alert/Alert.js +++ b/packages/material-ui-lab/src/Alert/Alert.js @@ -11,139 +11,132 @@ import CloseIcon from '../internal/svg-icons/Close'; import IconButton from '@material-ui/core/IconButton'; import { capitalize } from '@material-ui/core/utils'; -export const styles = theme => ({ - /* Styles applied to the root element. */ - root: { - ...theme.typography.body2, - borderRadius: theme.shape.borderRadius, - backgroundColor: 'transparent', - display: 'flex', - padding: '6px 16px', - }, - /* Styles applied to the root element if `variant="standard"` and `color="success"`. */ - standardSuccess: { - color: darken(theme.palette.success.main, 0.6), - backgroundColor: lighten(theme.palette.success.main, 0.9), - '& $icon': { - color: theme.palette.success.main, +export const styles = theme => { + const getColor = theme.palette.type === 'light' ? darken : lighten; + const getBackgroundColor = theme.palette.type === 'light' ? lighten : darken; + + return { + /* Styles applied to the root element. */ + root: { + ...theme.typography.body2, + borderRadius: theme.shape.borderRadius, + backgroundColor: 'transparent', + display: 'flex', + padding: '6px 16px', }, - }, - /* Styles applied to the root element if `variant="standard"` and `color="info"`. */ - standardInfo: { - color: darken(theme.palette.info.main, 0.6), - backgroundColor: lighten(theme.palette.info.main, 0.9), - '& $icon': { - color: theme.palette.info.main, + /* Styles applied to the root element if `variant="standard"` and `color="success"`. */ + standardSuccess: { + color: getColor(theme.palette.success.main, 0.6), + backgroundColor: getBackgroundColor(theme.palette.success.main, 0.9), + '& $icon': { + color: theme.palette.success.main, + }, }, - }, - /* Styles applied to the root element if `variant="standard"` and `color="warning"`. */ - standardWarning: { - color: darken(theme.palette.warning.main, 0.6), - backgroundColor: lighten(theme.palette.warning.main, 0.9), - '& $icon': { - color: theme.palette.warning.main, + /* Styles applied to the root element if `variant="standard"` and `color="info"`. */ + standardInfo: { + color: getColor(theme.palette.info.main, 0.6), + backgroundColor: getBackgroundColor(theme.palette.info.main, 0.9), + '& $icon': { + color: theme.palette.info.main, + }, }, - }, - /* Styles applied to the root element if `variant="standard"` and `color="error"`. */ - standardError: { - color: darken(theme.palette.error.main, 0.6), - backgroundColor: lighten(theme.palette.error.main, 0.9), - '& $icon': { - color: theme.palette.error.main, + /* Styles applied to the root element if `variant="standard"` and `color="warning"`. */ + standardWarning: { + color: getColor(theme.palette.warning.main, 0.6), + backgroundColor: getBackgroundColor(theme.palette.warning.main, 0.9), + '& $icon': { + color: theme.palette.warning.main, + }, }, - }, - /* Styles applied to the root element if `variant="outlined"` and `color="success"`. */ - outlinedSuccess: { - color: - theme.palette.type === 'light' - ? darken(theme.palette.success.main, 0.6) - : lighten(theme.palette.success.main, 0.6), - border: `1px solid ${theme.palette.success.main}`, - '& $icon': { - color: theme.palette.success.main, + /* Styles applied to the root element if `variant="standard"` and `color="error"`. */ + standardError: { + color: getColor(theme.palette.error.main, 0.6), + backgroundColor: getBackgroundColor(theme.palette.error.main, 0.9), + '& $icon': { + color: theme.palette.error.main, + }, }, - }, - /* Styles applied to the root element if `variant="outlined"` and `color="info"`. */ - outlinedInfo: { - color: - theme.palette.type === 'light' - ? darken(theme.palette.info.main, 0.6) - : lighten(theme.palette.info.main, 0.6), - border: `1px solid ${theme.palette.info.main}`, - '& $icon': { - color: theme.palette.info.main, + /* Styles applied to the root element if `variant="outlined"` and `color="success"`. */ + outlinedSuccess: { + color: getColor(theme.palette.success.main, 0.6), + border: `1px solid ${theme.palette.success.main}`, + '& $icon': { + color: theme.palette.success.main, + }, }, - }, - /* Styles applied to the root element if `variant="outlined"` and `color="warning"`. */ - outlinedWarning: { - color: - theme.palette.type === 'light' - ? darken(theme.palette.warning.main, 0.6) - : lighten(theme.palette.warning.main, 0.6), - border: `1px solid ${theme.palette.warning.main}`, - '& $icon': { - color: theme.palette.warning.main, + /* Styles applied to the root element if `variant="outlined"` and `color="info"`. */ + outlinedInfo: { + color: getColor(theme.palette.info.main, 0.6), + border: `1px solid ${theme.palette.info.main}`, + '& $icon': { + color: theme.palette.info.main, + }, }, - }, - /* Styles applied to the root element if `variant="outlined"` and `color="error"`. */ - outlinedError: { - color: - theme.palette.type === 'light' - ? darken(theme.palette.error.main, 0.6) - : lighten(theme.palette.error.main, 0.6), - border: `1px solid ${theme.palette.error.main}`, - '& $icon': { - color: theme.palette.error.main, + /* Styles applied to the root element if `variant="outlined"` and `color="warning"`. */ + outlinedWarning: { + color: getColor(theme.palette.warning.main, 0.6), + border: `1px solid ${theme.palette.warning.main}`, + '& $icon': { + color: theme.palette.warning.main, + }, }, - }, - /* Styles applied to the root element if `variant="filled"` and `color="success"`. */ - filledSuccess: { - color: '#fff', - fontWeight: theme.typography.fontWeightMedium, - backgroundColor: theme.palette.success.main, - }, - /* Styles applied to the root element if `variant="filled"` and `color="info"`. */ - filledInfo: { - color: '#fff', - fontWeight: theme.typography.fontWeightMedium, - backgroundColor: theme.palette.info.main, - }, - /* Styles applied to the root element if `variant="filled"` and `color="warning"`. */ - filledWarning: { - color: '#fff', - fontWeight: theme.typography.fontWeightMedium, - backgroundColor: theme.palette.warning.main, - }, - /* Styles applied to the root element if `variant="filled"` and `color="error"`. */ - filledError: { - color: '#fff', - fontWeight: theme.typography.fontWeightMedium, - backgroundColor: theme.palette.error.main, - }, - /* Styles applied to the icon wrapper element. */ - icon: { - marginRight: 12, - padding: '7px 0', - display: 'flex', - fontSize: 22, - opacity: 0.9, - }, - /* Styles applied to the message wrapper element. */ - message: { - padding: '8px 0', - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - }, - /* Styles applied to the action wrapper element if `action` is provided. */ - action: { - display: 'flex', - alignItems: 'center', - marginLeft: 'auto', - paddingLeft: 16, - marginRight: -8, - }, -}); + /* Styles applied to the root element if `variant="outlined"` and `color="error"`. */ + outlinedError: { + color: getColor(theme.palette.error.main, 0.6), + border: `1px solid ${theme.palette.error.main}`, + '& $icon': { + color: theme.palette.error.main, + }, + }, + /* Styles applied to the root element if `variant="filled"` and `color="success"`. */ + filledSuccess: { + color: '#fff', + fontWeight: theme.typography.fontWeightMedium, + backgroundColor: theme.palette.success.main, + }, + /* Styles applied to the root element if `variant="filled"` and `color="info"`. */ + filledInfo: { + color: '#fff', + fontWeight: theme.typography.fontWeightMedium, + backgroundColor: theme.palette.info.main, + }, + /* Styles applied to the root element if `variant="filled"` and `color="warning"`. */ + filledWarning: { + color: '#fff', + fontWeight: theme.typography.fontWeightMedium, + backgroundColor: theme.palette.warning.main, + }, + /* Styles applied to the root element if `variant="filled"` and `color="error"`. */ + filledError: { + color: '#fff', + fontWeight: theme.typography.fontWeightMedium, + backgroundColor: theme.palette.error.main, + }, + /* Styles applied to the icon wrapper element. */ + icon: { + marginRight: 12, + padding: '7px 0', + display: 'flex', + fontSize: 22, + opacity: 0.9, + }, + /* Styles applied to the message wrapper element. */ + message: { + padding: '8px 0', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + }, + /* Styles applied to the action wrapper element if `action` is provided. */ + action: { + display: 'flex', + alignItems: 'center', + marginLeft: 'auto', + paddingLeft: 16, + marginRight: -8, + }, + }; +}; const defaultIconMapping = { success: , From e6aea69f526dac5b6888b368746ab694bf92c340 Mon Sep 17 00:00:00 2001 From: Alexandre Hitchcox Date: Fri, 10 Jan 2020 10:55:18 +0000 Subject: [PATCH 2/3] [Alert] improve filled variant coloring --- packages/material-ui-lab/src/Alert/Alert.js | 10 ++++++---- packages/material-ui/package.json | 1 + yarn.lock | 7 +++++++ 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/material-ui-lab/src/Alert/Alert.js b/packages/material-ui-lab/src/Alert/Alert.js index b8de9f19b2ee0b..837bacb40d9973 100644 --- 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 index 385d3756f85b2c..b6b84c4356d964 100644 --- 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 index a1b86f8014bcc8..81f66b74404434 100644 --- 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" From 594ec6784cda6abd089adc828f8e2ef0ebaa6da3 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 11 Jan 2020 00:53:20 +0100 Subject: [PATCH 3/3] Revert "[Alert] improve filled variant coloring" This reverts commit e6aea69f526dac5b6888b368746ab694bf92c340. --- packages/material-ui-lab/src/Alert/Alert.js | 10 ++++------ packages/material-ui/package.json | 1 - yarn.lock | 7 ------- 3 files changed, 4 insertions(+), 14 deletions(-) diff --git a/packages/material-ui-lab/src/Alert/Alert.js b/packages/material-ui-lab/src/Alert/Alert.js index 837bacb40d9973..b8de9f19b2ee0b 100644 --- a/packages/material-ui-lab/src/Alert/Alert.js +++ b/packages/material-ui-lab/src/Alert/Alert.js @@ -1,7 +1,6 @@ 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'; @@ -15,7 +14,6 @@ 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. */ @@ -94,25 +92,25 @@ export const styles = theme => { filledSuccess: { color: '#fff', fontWeight: theme.typography.fontWeightMedium, - backgroundColor: getColorWithLightness(theme.palette.success.main, 0.45), + backgroundColor: theme.palette.success.main, }, /* Styles applied to the root element if `variant="filled"` and `color="info"`. */ filledInfo: { color: '#fff', fontWeight: theme.typography.fontWeightMedium, - backgroundColor: getColorWithLightness(theme.palette.info.main, 0.45), + backgroundColor: theme.palette.info.main, }, /* Styles applied to the root element if `variant="filled"` and `color="warning"`. */ filledWarning: { color: '#fff', fontWeight: theme.typography.fontWeightMedium, - backgroundColor: getColorWithLightness(theme.palette.warning.main, 0.45), + backgroundColor: theme.palette.warning.main, }, /* Styles applied to the root element if `variant="filled"` and `color="error"`. */ filledError: { color: '#fff', fontWeight: theme.typography.fontWeightMedium, - backgroundColor: getColorWithLightness(theme.palette.error.main, 0.45), + backgroundColor: theme.palette.error.main, }, /* Styles applied to the icon wrapper element. */ icon: { diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json index b6b84c4356d964..385d3756f85b2c 100644 --- a/packages/material-ui/package.json +++ b/packages/material-ui/package.json @@ -57,7 +57,6 @@ "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 index 81f66b74404434..a1b86f8014bcc8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11532,13 +11532,6 @@ 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"