[docs] More detailed palette documentation

mui · Jan 20, 2018 · 903c87a · 903c87a
1 parent 0724dad
commit 903c87a
Show file tree

Hide file tree

Showing 26 changed files with 137 additions and 144 deletions.
diff --git a/docs/src/modules/components/Demo.js b/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,

diff --git a/docs/src/modules/components/MarkdownElement.js b/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.line.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.line.divider}`,
+      fontWeight: theme.typography.fontWeightMedium,
       padding: `0 ${theme.spacing.unit * 2}px 0 ${theme.spacing.unit}px`,
       textAlign: 'left',
     },

diff --git a/docs/src/pages/demos/dividers/ListDividers.js b/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>
   );
 }

diff --git a/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js b/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.line.divider}`,
     padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
   },
   link: {

diff --git a/docs/src/pages/demos/menus/ListItemComposition.js b/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>

diff --git a/docs/src/pages/demos/tables/EnhancedTable.js b/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'

diff --git a/pages/api/table-row.md b/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)

diff --git a/src/Button/Button.js b/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,
       },
     },
   },

diff --git a/src/Divider/Divider.js b/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.line.divider,
   },
   light: {
-    backgroundColor: theme.palette.text.lightDivider,
+    backgroundColor: fade(theme.palette.line.divider, 0.08),
   },
   absolute: {
     position: 'absolute',

diff --git a/src/Drawer/Drawer.js b/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.line.divider}`,
   },
   paperAnchorDockedTop: {
-    borderBottom: `1px solid ${theme.palette.text.divider}`,
+    borderBottom: `1px solid ${theme.palette.line.divider}`,
   },
   paperAnchorDockedRight: {
-    borderLeft: `1px solid ${theme.palette.text.divider}`,
+    borderLeft: `1px solid ${theme.palette.line.divider}`,
   },
   paperAnchorDockedBottom: {
-    borderTop: `1px solid ${theme.palette.text.divider}`,
+    borderTop: `1px solid ${theme.palette.line.divider}`,
   },
   modal: {}, // Just here so people can override the style.
 });

diff --git a/src/ExpansionPanel/ExpansionPanel.js b/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.line.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,
     },
   };
 };

diff --git a/src/ExpansionPanel/ExpansionPanelSummary.js b/src/ExpansionPanel/ExpansionPanelSummary.js
@@ -33,7 +33,6 @@ export const styles = theme => {
     },
     disabled: {
       opacity: 0.38,
-      color: theme.palette.action.disabled,
     },
     content: {
       display: 'flex',

diff --git a/src/List/ListItem.js b/src/List/ListItem.js
@@ -17,7 +17,7 @@ export const styles = theme => ({
     position: 'relative',
   },
   keyboardFocused: {
-    backgroundColor: theme.palette.text.divider,
+    backgroundColor: theme.palette.action.hover,
   },
   default: {
     paddingTop: 12,
@@ -31,7 +31,7 @@ export const styles = theme => ({
     opacity: 0.5,
   },
   divider: {
-    borderBottom: `1px solid ${theme.palette.text.lightDivider}`,
+    borderBottom: `1px solid ${theme.palette.line.divider}`,
   },
   gutters: {
     paddingLeft: theme.spacing.unit * 2,
@@ -43,7 +43,7 @@ export const styles = theme => ({
     }),
     '&:hover': {
       textDecoration: 'none',
-      backgroundColor: theme.palette.text.divider,
+      backgroundColor: theme.palette.action.hover,
       // Reset on mouse devices
       '@media (hover: none)': {
         backgroundColor: 'transparent',

diff --git a/src/Menu/MenuItem.js b/src/Menu/MenuItem.js
@@ -14,11 +14,11 @@ export const styles = theme => ({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
-    '&:hover': {
-      backgroundColor: theme.palette.text.lightDivider,
-    },
     '&$selected': {
-      backgroundColor: theme.palette.text.divider,
+      backgroundColor: theme.palette.action.selected,
+    },
+    '&:hover': {
+      backgroundColor: theme.palette.action.hover,
     },
   },
   selected: {},

diff --git a/src/Table/TableCell.js b/src/Table/TableCell.js
@@ -12,8 +12,8 @@ export const styles = theme => ({
     borderBottom: `1px solid
     ${
       theme.palette.type === 'light'
-        ? lighten(fade(theme.palette.text.lightDivider, 1), 0.925)
-        : darken(fade(theme.palette.text.lightDivider, 1), 0.685)
+        ? lighten(fade(theme.palette.line.divider, 1), 0.88)
+        : darken(fade(theme.palette.line.divider, 1), 0.8)
     }`,
     textAlign: 'left',
   },

diff --git a/src/Table/TableRow.d.ts b/src/Table/TableRow.d.ts
@@ -9,7 +9,7 @@ export interface TableRowProps extends StandardProps<TableRowBaseProps, TableRow
 
 export type TableRowBaseProps = React.HTMLAttributes<HTMLTableRowElement>;
 
-export type TableRowClassKey = 'root' | 'head' | 'footer' | 'hover' | 'selected';
+export type TableRowClassKey = 'root' | 'typeHead' | 'typeFooter' | 'hover' | 'selected';
 
 declare const TableRow: React.ComponentType<TableRowProps>;
 

diff --git a/src/Table/TableRow.js b/src/Table/TableRow.js
@@ -13,20 +13,26 @@ export const styles = theme => ({
     },
     verticalAlign: 'middle',
   },
-  head: {
+  typeHead: {
     height: 56,
   },
-  footer: {
+  typeFooter: {
     height: 56,
   },
+  selected: {
+    backgroundColor:
+      theme.palette.type === 'light'
+        ? 'rgba(0, 0, 0, 0.04)' // grey[100]
+        : 'rgba(255, 255, 255, 0.08)',
+  },
   hover: {
     '&:hover': {
-      backgroundColor: theme.palette.background.contentFrame,
+      backgroundColor:
+        theme.palette.type === 'light'
+          ? 'rgba(0, 0, 0, 0.07)' // grey[200]
+          : 'rgba(255, 255, 255, 0.14)',
     },
   },
-  selected: {
-    backgroundColor: theme.palette.background.appBar,
-  },
 });
 
 /**
@@ -47,8 +53,8 @@ function TableRow(props, context) {
   const className = classNames(
     classes.root,
     {
-      [classes.head]: table && table.head,
-      [classes.footer]: table && table.footer,
+      [classes.typeHead]: table && table.head,
+      [classes.typeFooter]: table && table.footer,
       [classes.hover]: table && hover,
       [classes.selected]: table && selected,
     },

diff --git a/src/Table/TableRow.spec.js b/src/Table/TableRow.spec.js
@@ -49,13 +49,13 @@ describe('<TableRow />', () => {
     const wrapper = shallow(<TableRow />);
     wrapper.setContext({ table: { head: true } });
     assert.strictEqual(wrapper.hasClass(classes.root), true);
-    assert.strictEqual(wrapper.hasClass(classes.head), true, 'should have the head class');
+    assert.strictEqual(wrapper.hasClass(classes.typeHead), true, 'should have the head class');
   });
 
   it('should render with the footer class when in the context of a table footer', () => {
     const wrapper = shallow(<TableRow />);
     wrapper.setContext({ table: { footer: true } });
     assert.strictEqual(wrapper.hasClass(classes.root), true);
-    assert.strictEqual(wrapper.hasClass(classes.footer), true, 'should have the footer class');
+    assert.strictEqual(wrapper.hasClass(classes.typeFooter), true, 'should have the footer class');
   });
 });
diff --git a/src/colors/common.d.ts b/src/colors/common.d.ts
@@ -1,15 +1,9 @@
 export interface CommonColors {
-  black: string;
-  white: string;
   transparent: string;
+  black: string;
   fullBlack: string;
-  darkBlack: string;
-  lightBlack: string;
-  minBlack: string;
-  faintBlack: string;
+  white: string;
   fullWhite: string;
-  darkWhite: string;
-  lightWhite: string;
 }
 
 declare const common: CommonColors;

diff --git a/src/colors/common.js b/src/colors/common.js
@@ -1,17 +1,11 @@
 // @flow
 
 const common = {
+  transparent: 'transparent',
   black: '#000',
-  white: '#fff',
-  transparent: 'rgba(0, 0, 0, 0)',
   fullBlack: 'rgba(0, 0, 0, 1)',
-  darkBlack: 'rgba(0, 0, 0, 0.87)',
-  lightBlack: 'rgba(0, 0, 0, 0.54)',
-  minBlack: 'rgba(0, 0, 0, 0.26)',
-  faintBlack: 'rgba(0, 0, 0, 0.12)',
+  white: '#fff',
   fullWhite: 'rgba(255, 255, 255, 1)',
-  darkWhite: 'rgba(255, 255, 255, 0.87)',
-  lightWhite: 'rgba(255, 255, 255, 0.54)',
 };
 
 export default common;