[docs] More detailed palette documentation

Author: oliviertassinari

.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/button-base.md

@@ -6,7 +6,9 @@ filename: /src/ButtonBase/ButtonBase.js
 
 # ButtonBase
 
-
+`ButtonBase` contains as few styles as possible.
+It aims to be a building block for people who want to create a simple button.
+It contains a load of style reset and some focus/ripple logic.
 
 ## Props
 

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)