[docs] More detailed palette documentation

.size-limit

@@ -2,12 +2,12 @@
   {
     "name": "The initial cost people pay for using one component",
     "path": "test/size/overhead.js",
-    "limit": "24.9 KB"
+    "limit": "24.7 KB"
   },
   {
     "name": "The size of the whole library.",
     "path": "build/index.js",
-    "limit": "96.4 KB"
+    "limit": "96.1 KB"
   },
   {
     "name": "The main bundle of the documentation",

docs/src/modules/components/Demo.js

@@ -24,7 +24,8 @@ const styles = theme => ({
     },
   },
   demo: theme.mixins.gutters({
-    backgroundColor: theme.palette.background.contentFrame,
+    backgroundColor:
+      theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900],
     display: 'flex',
     justifyContent: 'center',
     paddingTop: theme.spacing.unit * 2,

docs/src/modules/components/MarkdownElement.js

@@ -146,7 +146,7 @@ const styles = theme => ({
       overflow: 'hidden',
     },
     '& thead': {
-      fontSize: 12,
+      fontSize: 13,
       fontWeight: theme.typography.fontWeightMedium,
       color: theme.palette.text.secondary,
     },
@@ -156,7 +156,7 @@ const styles = theme => ({
       color: theme.palette.text.primary,
     },
     '& td': {
-      borderBottom: `1px solid ${theme.palette.text.lightDivider}`,
+      borderBottom: `1px solid ${theme.palette.divider}`,
       padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px ${theme.spacing.unit}px ${
         theme.spacing.unit
       }px`,
@@ -174,7 +174,8 @@ const styles = theme => ({
     },
     '& th': {
       whiteSpace: 'pre',
-      borderBottom: `1px solid ${theme.palette.text.lightDivider}`,
+      borderBottom: `1px solid ${theme.palette.divider}`,
+      fontWeight: theme.typography.fontWeightMedium,
       padding: `0 ${theme.spacing.unit * 2}px 0 ${theme.spacing.unit}px`,
       textAlign: 'left',
     },

docs/src/pages/customization/ThemeDefault.js

@@ -10,7 +10,8 @@ const styles = theme => ({
   root: {
     padding: theme.spacing.unit * 2,
     paddingTop: 0,
-    backgroundColor: theme.palette.type === 'light' ? '#fff' : 'rgb(36, 36, 36)',
+    // Match <Inspector /> default theme.
+    backgroundColor: theme.palette.type === 'light' ? theme.palette.common.white : '#242424',
     minHeight: theme.spacing.unit * 40,
     width: '100%',
   },

docs/src/pages/demos/dividers/ListDividers.js

@@ -19,14 +19,18 @@ function ListDividers(props) {
       <ListItem button>
         <ListItemText primary="Inbox" />
       </ListItem>
-      <Divider light />
+      <Divider />
       <ListItem button>
         <ListItemText primary="Drafts" />
       </ListItem>
       <Divider />
       <ListItem button>
         <ListItemText primary="Trash" />
       </ListItem>
+      <Divider light />
+      <ListItem button>
+        <ListItemText primary="Spam" />
+      </ListItem>
     </List>
   );
 }

docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js

@@ -36,7 +36,7 @@ const styles = theme => ({
     flexBasis: '33.3%',
   },
   helper: {
-    borderLeft: `2px solid ${theme.palette.text.lightDivider}`,
+    borderLeft: `2px solid ${theme.palette.divider}`,
     padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
   },
   link: {

docs/src/pages/demos/menus/ListItemComposition.js

@@ -12,12 +12,12 @@ const styles = theme => ({
   menuItem: {
     '&:focus': {
       backgroundColor: theme.palette.primary.main,
-      '& $text, & $icon': {
+      '& $primary, & $icon': {
         color: theme.palette.common.white,
       },
     },
   },
-  text: {},
+  primary: {},
   icon: {},
 });
 
@@ -31,19 +31,19 @@ function ListItemComposition(props) {
           <ListItemIcon className={classes.icon}>
             <SendIcon />
           </ListItemIcon>
-          <ListItemText classes={{ text: classes.text }} inset primary="Sent mail" />
+          <ListItemText classes={{ primary: classes.primary }} inset primary="Sent mail" />
         </MenuItem>
         <MenuItem className={classes.menuItem}>
           <ListItemIcon className={classes.icon}>
             <DraftsIcon />
           </ListItemIcon>
-          <ListItemText classes={{ text: classes.text }} inset primary="Drafts" />
+          <ListItemText classes={{ primary: classes.primary }} inset primary="Drafts" />
         </MenuItem>
         <MenuItem className={classes.menuItem}>
           <ListItemIcon className={classes.icon}>
             <InboxIcon />
           </ListItemIcon>
-          <ListItemText classes={{ text: classes.text }} inset primary="Inbox" />
+          <ListItemText classes={{ primary: classes.primary }} inset primary="Inbox" />
         </MenuItem>
       </MenuList>
     </Paper>

docs/src/pages/demos/tables/EnhancedTable.js

@@ -94,7 +94,7 @@ EnhancedTableHead.propTypes = {
 
 const toolbarStyles = theme => ({
   root: {
-    paddingRight: 2,
+    paddingRight: theme.spacing.unit,
   },
   highlight:
     theme.palette.type === 'light'

pages/api/table-row.md

@@ -26,10 +26,10 @@ Any other properties supplied will be [spread to the root element](/guides/api#s
 You can override all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 - `root`
-- `head`
-- `footer`
-- `hover`
+- `typeHead`
+- `typeFooter`
 - `selected`
+- `hover`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/tree/v1-beta/src/Table/TableRow.js)

src/Button/Button.js

@@ -79,7 +79,7 @@ export const styles = theme => ({
     },
     '&$disabled': {
       boxShadow: theme.shadows[0],
-      backgroundColor: theme.palette.text.divider,
+      backgroundColor: theme.palette.action.disabledBackground,
     },
     '&:hover': {
       backgroundColor: theme.palette.grey.A100,
@@ -88,11 +88,7 @@ export const styles = theme => ({
         backgroundColor: theme.palette.grey[300],
       },
       '&$disabled': {
-        backgroundColor: theme.palette.text.divider,
-        // Reset on mouse devices
-        '@media (hover: none)': {
-          backgroundColor: theme.palette.grey[300],
-        },
+        backgroundColor: theme.palette.action.disabledBackground,
       },
     },
   },

src/Divider/Divider.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
+import { fade } from '../styles/colorManipulator';
 
 export const styles = theme => ({
   root: {
@@ -14,10 +15,10 @@ export const styles = theme => ({
     marginLeft: 72,
   },
   default: {
-    backgroundColor: theme.palette.text.divider,
+    backgroundColor: theme.palette.divider,
   },
   light: {
-    backgroundColor: theme.palette.text.lightDivider,
+    backgroundColor: fade(theme.palette.divider, 0.08),
   },
   absolute: {
     position: 'absolute',

src/Drawer/Drawer.js

@@ -70,16 +70,16 @@ export const styles = theme => ({
     maxHeight: '100vh',
   },
   paperAnchorDockedLeft: {
-    borderRight: `1px solid ${theme.palette.text.divider}`,
+    borderRight: `1px solid ${theme.palette.divider}`,
   },
   paperAnchorDockedTop: {
-    borderBottom: `1px solid ${theme.palette.text.divider}`,
+    borderBottom: `1px solid ${theme.palette.divider}`,
   },
   paperAnchorDockedRight: {
-    borderLeft: `1px solid ${theme.palette.text.divider}`,
+    borderLeft: `1px solid ${theme.palette.divider}`,
   },
   paperAnchorDockedBottom: {
-    borderTop: `1px solid ${theme.palette.text.divider}`,
+    borderTop: `1px solid ${theme.palette.divider}`,
   },
   modal: {}, // Just here so people can override the style.
 });

src/ExpansionPanel/ExpansionPanel.js

@@ -27,7 +27,7 @@ export const styles = theme => {
         height: 1,
         content: '""',
         opacity: 1,
-        backgroundColor: theme.palette.text.divider,
+        backgroundColor: theme.palette.divider,
         transition: theme.transitions.create(['opacity', 'background-color'], transition),
       },
       '&:first-child': {
@@ -60,7 +60,7 @@ export const styles = theme => {
       },
     },
     disabled: {
-      backgroundColor: theme.palette.text.divider,
+      backgroundColor: theme.palette.action.disabledBackground,
     },
   };
 };

src/ExpansionPanel/ExpansionPanelSummary.js

@@ -33,7 +33,6 @@ export const styles = theme => {
     },
     disabled: {
       opacity: 0.38,
-      color: theme.palette.action.disabled,
     },
     content: {
       display: 'flex',
@@ -48,7 +47,6 @@ export const styles = theme => {
       margin: '20px 0',
     },
     expandIcon: {
-      color: theme.palette.text.icon,
       position: 'absolute',
       top: '50%',
       right: theme.spacing.unit,

src/Form/FormHelperText.js

@@ -5,7 +5,7 @@ import withStyles from '../styles/withStyles';
 
 export const styles = theme => ({
   root: {
-    color: theme.palette.input.helperText,
+    color: theme.palette.text.secondary,
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.pxToRem(12),
     textAlign: 'left',
@@ -21,7 +21,7 @@ export const styles = theme => ({
     color: theme.palette.error.main,
   },
   disabled: {
-    color: theme.palette.input.disabled,
+    color: theme.palette.text.disabled,
   },
 });
 

src/Form/FormLabel.js

@@ -3,27 +3,24 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 
-export const styles = theme => {
-  const focusColor = theme.palette.primary[theme.palette.type === 'light' ? 'dark' : 'light'];
-  return {
-    root: {
-      fontFamily: theme.typography.fontFamily,
-      color: theme.palette.input.labelText,
-      fontSize: theme.typography.pxToRem(16),
-      lineHeight: 1,
-      padding: 0,
-    },
-    focused: {
-      color: focusColor,
-    },
-    error: {
-      color: theme.palette.error.main,
-    },
-    disabled: {
-      color: theme.palette.input.disabled,
-    },
-  };
-};
+export const styles = theme => ({
+  root: {
+    fontFamily: theme.typography.fontFamily,
+    color: theme.palette.text.secondary,
+    fontSize: theme.typography.pxToRem(16),
+    lineHeight: 1,
+    padding: 0,
+  },
+  focused: {
+    color: theme.palette.primary[theme.palette.type === 'light' ? 'dark' : 'light'],
+  },
+  error: {
+    color: theme.palette.error.main,
+  },
+  disabled: {
+    color: theme.palette.text.disabled,
+  },
+});
 
 function FormLabel(props, context) {
   const {

src/IconButton/IconButton.js

@@ -34,7 +34,7 @@ export const styles = theme => ({
     color: theme.palette.secondary.main,
   },
   disabled: {
-    color: theme.palette.action.disabled,
+    color: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.38)' : 'rgba(255, 255, 255, 0.5)',
   },
   label: {
     width: '100%',

src/Input/Input.js

@@ -42,9 +42,10 @@ export function isAdornedStart(obj) {
 }
 
 export const styles = theme => {
+  const light = theme.palette.type === 'light';
   const placeholder = {
     color: 'currentColor',
-    opacity: theme.palette.type === 'light' ? 0.42 : 0.5,
+    opacity: light ? 0.42 : 0.5,
     transition: theme.transitions.create('opacity', {
       duration: theme.transitions.duration.shorter,
       easing: theme.transitions.easing.ease,
@@ -54,8 +55,9 @@ export const styles = theme => {
     opacity: 0,
   };
   const placeholderVisible = {
-    opacity: theme.palette.type === 'light' ? 0.42 : 0.5,
+    opacity: light ? 0.42 : 0.5,
   };
+  const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
 
   return {
     root: {
@@ -64,7 +66,7 @@ export const styles = theme => {
       alignItems: 'baseline',
       position: 'relative',
       fontFamily: theme.typography.fontFamily,
-      color: theme.palette.input.inputText,
+      color: light ? 'rgba(0, 0, 0, 0.87)' : theme.palette.common.fullWhite,
       fontSize: theme.typography.pxToRem(16),
     },
     formControl: {
@@ -74,7 +76,7 @@ export const styles = theme => {
     },
     inkbar: {
       '&:after': {
-        backgroundColor: theme.palette.primary[theme.palette.type === 'light' ? 'dark' : 'light'],
+        backgroundColor: theme.palette.primary[light ? 'dark' : 'light'],
         left: 0,
         bottom: 0,
         // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -105,7 +107,7 @@ export const styles = theme => {
     },
     underline: {
       '&:before': {
-        backgroundColor: theme.palette.input.bottomLine,
+        backgroundColor: bottomLineColor,
         left: 0,
         bottom: 0,
         // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -125,9 +127,7 @@ export const styles = theme => {
       },
       '&$disabled:before': {
         background: 'transparent',
-        backgroundImage: `linear-gradient(to right, ${
-          theme.palette.input.bottomLine
-        } 33%, transparent 0%)`,
+        backgroundImage: `linear-gradient(to right, ${bottomLineColor} 33%, transparent 0%)`,
         backgroundPosition: 'left top',
         backgroundRepeat: 'repeat-x',
         backgroundSize: '5px 1px',

src/Input/InputLabel.js

@@ -30,7 +30,7 @@ export const styles = theme => ({
     }),
   },
   disabled: {
-    color: theme.palette.input.disabled,
+    color: theme.palette.text.disabled,
   },
 });