[theme] Polish background scale

mui · Jan 10, 2018 · 157e12c · 157e12c
1 parent fa14719
commit 157e12c
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 27 deletions.
diff --git a/docs/src/pages/demos/chips/Chips.js b/docs/src/pages/demos/chips/Chips.js
@@ -4,21 +4,17 @@ import { withStyles } from 'material-ui/styles';
 import Avatar from 'material-ui/Avatar';
 import Chip from 'material-ui/Chip';
 import FaceIcon from 'material-ui-icons/Face';
-import Done from 'material-ui-icons/Done';
-import grey from 'material-ui/colors/grey';
+import DoneIcon from 'material-ui-icons/Done';
 
 const styles = theme => ({
-  chip: {
-    margin: theme.spacing.unit,
-  },
-  svgIcon: {
-    color: grey[800],
-  },
-  row: {
+  root: {
     display: 'flex',
     justifyContent: 'center',
     flexWrap: 'wrap',
   },
+  chip: {
+    margin: theme.spacing.unit,
+  },
 });
 
 function handleDelete() {
@@ -32,7 +28,7 @@ function handleClick() {
 function Chips(props) {
   const { classes } = props;
   return (
-    <div className={classes.row}>
+    <div className={classes.root}>
       <Chip label="Basic Chip" className={classes.chip} />
       <Chip
         avatar={<Avatar>MB</Avatar>}
@@ -49,7 +45,7 @@ function Chips(props) {
       <Chip
         avatar={
           <Avatar>
-            <FaceIcon className={classes.svgIcon} />
+            <FaceIcon />
           </Avatar>
         }
         label="Clickable Deletable Chip"
@@ -62,7 +58,7 @@ function Chips(props) {
         onClick={handleClick}
         onDelete={handleDelete}
         className={classes.chip}
-        deleteIcon={<Done />}
+        deleteIcon={<DoneIcon />}
       />
     </div>
   );

diff --git a/docs/src/pages/demos/chips/ChipsArray.js b/docs/src/pages/demos/chips/ChipsArray.js
@@ -1,32 +1,36 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'material-ui/styles';
+import Avatar from 'material-ui/Avatar';
 import Chip from 'material-ui/Chip';
+import Paper from 'material-ui/Paper';
+import TagFacesIcon from 'material-ui-icons/TagFaces';
 
 const styles = theme => ({
-  chip: {
-    margin: theme.spacing.unit / 2,
-  },
-  row: {
+  root: {
     display: 'flex',
     justifyContent: 'center',
     flexWrap: 'wrap',
+    padding: theme.spacing.unit / 2,
+  },
+  chip: {
+    margin: theme.spacing.unit / 2,
   },
 });
 
 class ChipsArray extends React.Component {
   state = {
     chipData: [
       { key: 0, label: 'Angular' },
-      { key: 1, label: 'JQuery' },
+      { key: 1, label: 'jQuery' },
       { key: 2, label: 'Polymer' },
-      { key: 3, label: 'ReactJS' },
+      { key: 3, label: 'React' },
       { key: 4, label: 'Vue.js' },
     ],
   };
 
   handleDelete = data => () => {
-    if (data.label === 'ReactJS') {
+    if (data.label === 'React') {
       alert('Why would you want to delete React?! :)'); // eslint-disable-line no-alert
       return;
     }
@@ -41,18 +45,29 @@ class ChipsArray extends React.Component {
     const { classes } = this.props;
 
     return (
-      <div className={classes.row}>
+      <Paper className={classes.root}>
         {this.state.chipData.map(data => {
+          let avatar = null;
+
+          if (data.label === 'React') {
+            avatar = (
+              <Avatar>
+                <TagFacesIcon className={classes.svgIcon} />
+              </Avatar>
+            );
+          }
+
           return (
             <Chip
-              label={data.label}
               key={data.key}
+              avatar={avatar}
+              label={data.label}
               onDelete={this.handleDelete(data)}
               className={classes.chip}
             />
           );
         })}
-      </div>
+      </Paper>
     );
   }
 }

diff --git a/src/Avatar/Avatar.js b/src/Avatar/Avatar.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
-import { emphasize } from '../styles/colorManipulator';
 
 export const styles = theme => ({
   root: {
@@ -21,7 +20,7 @@ export const styles = theme => ({
   },
   colorDefault: {
     color: theme.palette.background.default,
-    backgroundColor: emphasize(theme.palette.background.default, 0.26),
+    backgroundColor: theme.palette.background.avatar,
   },
   img: {
     width: '100%',

diff --git a/src/Chip/Chip.js b/src/Chip/Chip.js
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import keycode from 'keycode';
 import CancelIcon from '../internal/svg-icons/Cancel';
 import withStyles from '../styles/withStyles';
+import grey from '../colors/grey';
 import { emphasize, fade } from '../styles/colorManipulator';
 import '../Avatar/Avatar'; // So we don't have any override priority issue.
 
@@ -52,6 +53,7 @@ export const styles = theme => {
       marginRight: -4,
       width: height,
       height,
+      color: theme.palette.type === 'light' ? grey[700] : grey[300],
       fontSize: theme.typography.pxToRem(16),
     },
     avatarChildren: {

diff --git a/src/styles/createPalette.js b/src/styles/createPalette.js
@@ -31,11 +31,12 @@ export const light = {
     disabled: 'rgba(0, 0, 0, 0.26)',
   },
   background: {
-    default: grey[50],
     paper: common.white,
+    default: grey[50],
     appBar: grey[100],
     contentFrame: grey[200],
     chip: grey[300],
+    avatar: grey[400],
   },
   line: {
     stepper: grey[400],
@@ -64,11 +65,12 @@ export const dark = {
     disabled: 'rgba(255, 255, 255, 0.3)',
   },
   background: {
-    default: '#303030',
     paper: grey[800],
+    default: '#303030',
     appBar: grey[900],
     contentFrame: grey[900],
-    chip: grey[800],
+    chip: grey[700],
+    avatar: grey[600],
   },
   line: {
     stepper: grey[600],