From 1aff23fd1bc11d71eebafac4f29f5c462578bece Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Tue, 7 Jan 2020 13:24:37 +0000
Subject: [PATCH 01/13] [docs] Make inspector aware of current theme

---
 .../customization/default-theme/DefaultTheme.js     | 13 +++++++++++--
 .../customization/default-theme/default-theme.md    |  2 ++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js
index 7dbea9b8b0886a..cc5210dc201714 100644
--- a/docs/src/pages/customization/default-theme/DefaultTheme.js
+++ b/docs/src/pages/customization/default-theme/DefaultTheme.js
@@ -7,7 +7,13 @@ import CollapseIcon from '@material-ui/icons/ChevronRight';
 import TreeView from '@material-ui/lab/TreeView';
 import TreeItem from '@material-ui/lab/TreeItem';
 import clsx from 'clsx';
-import { makeStyles, withStyles, createMuiTheme, lighten } from '@material-ui/core/styles';
+import {
+  makeStyles,
+  withStyles,
+  createMuiTheme,
+  lighten,
+  useTheme,
+} from '@material-ui/core/styles';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
 
@@ -218,6 +224,7 @@ function DefaultTheme(props) {
   const [checked, setChecked] = React.useState(false);
   const [expandPaths, setExpandPaths] = React.useState(null);
   const t = useSelector(state => state.options.t);
+  const { palette } = useTheme();
 
   React.useEffect(() => {
     const URL = url.parse(document.location.href, true);
@@ -240,7 +247,9 @@ function DefaultTheme(props) {
     );
   }, []);
 
-  const data = React.useMemo(createMuiTheme, []);
+  const data = React.useMemo(() => {
+    return createMuiTheme({ palette: { type: palette.type } });
+  }, [palette.type]);
 
   const allNodeIds = useNodeIdsLazy(data);
   React.useDebugValue(allNodeIds);
diff --git a/docs/src/pages/customization/default-theme/default-theme.md b/docs/src/pages/customization/default-theme/default-theme.md
index 99d6ef8cbfa701..7e8caf496c2fce 100644
--- a/docs/src/pages/customization/default-theme/default-theme.md
+++ b/docs/src/pages/customization/default-theme/default-theme.md
@@ -8,6 +8,8 @@ Explore the documentation theme object:
 
 {{"demo": "pages/customization/default-theme/DefaultTheme.js", "hideHeader": true}}
 
+> Tip: toggle between light/dark to see above how Material-UI uses different colors for each theme.
+
 > Tip: you can play with the documentation theme object in **your console**,
 as the `theme` variable is exposed on all the documentation pages.
 Please note that the documentation site is using a custom theme.

From 67033d53aba356c8abf179829b7d503e09a1ce57 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Wed, 8 Jan 2020 17:42:19 +0000
Subject: [PATCH 02/13] Add toggle to show dark theme values

---
 .../default-theme/DefaultTheme.js             | 26 ++++++++++++-------
 .../default-theme/default-theme.md            | 10 +++----
 docs/translations/translations.json           |  1 +
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js
index cc5210dc201714..cbe14be6bd157e 100644
--- a/docs/src/pages/customization/default-theme/DefaultTheme.js
+++ b/docs/src/pages/customization/default-theme/DefaultTheme.js
@@ -7,13 +7,7 @@ import CollapseIcon from '@material-ui/icons/ChevronRight';
 import TreeView from '@material-ui/lab/TreeView';
 import TreeItem from '@material-ui/lab/TreeItem';
 import clsx from 'clsx';
-import {
-  makeStyles,
-  withStyles,
-  createMuiTheme,
-  lighten,
-  useTheme,
-} from '@material-ui/core/styles';
+import { makeStyles, withStyles, createMuiTheme, lighten } from '@material-ui/core/styles';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
 
@@ -224,7 +218,7 @@ function DefaultTheme(props) {
   const [checked, setChecked] = React.useState(false);
   const [expandPaths, setExpandPaths] = React.useState(null);
   const t = useSelector(state => state.options.t);
-  const { palette } = useTheme();
+  const [darkTheme, setDarkTheme] = React.useState(false);
 
   React.useEffect(() => {
     const URL = url.parse(document.location.href, true);
@@ -248,8 +242,8 @@ function DefaultTheme(props) {
   }, []);
 
   const data = React.useMemo(() => {
-    return createMuiTheme({ palette: { type: palette.type } });
-  }, [palette.type]);
+    return createMuiTheme({ palette: { type: darkTheme ? 'dark' : 'light' } });
+  }, [darkTheme]);
 
   const allNodeIds = useNodeIdsLazy(data);
   React.useDebugValue(allNodeIds);
@@ -275,6 +269,18 @@ function DefaultTheme(props) {
         }
         label={t('expandAll')}
       />
+      <FormControlLabel
+        className={classes.switch}
+        control={
+          <Switch
+            checked={darkTheme}
+            onChange={(event, newValue) => {
+              setDarkTheme(newValue);
+            }}
+          />
+        }
+        label={t('useDarkTheme')}
+      />
       <Inspector data={data} expandPaths={expandPaths} expandLevel={checked ? 100 : 1} />
     </div>
   );
diff --git a/docs/src/pages/customization/default-theme/default-theme.md b/docs/src/pages/customization/default-theme/default-theme.md
index 7e8caf496c2fce..70ab06d0d05067 100644
--- a/docs/src/pages/customization/default-theme/default-theme.md
+++ b/docs/src/pages/customization/default-theme/default-theme.md
@@ -4,15 +4,13 @@
 
 ## Explore
 
-Explore the documentation theme object:
+Explore the default theme object:
 
 {{"demo": "pages/customization/default-theme/DefaultTheme.js", "hideHeader": true}}
 
-> Tip: toggle between light/dark to see above how Material-UI uses different colors for each theme.
-
-> Tip: you can play with the documentation theme object in **your console**,
-as the `theme` variable is exposed on all the documentation pages.
-Please note that the documentation site is using a custom theme.
+> Tip: you can play with the documentation theme object in your browser console,
+> as the `theme` variable is exposed on all the documentation pages.
+> Please note that **the documentation site is using a custom theme**.
 
 If you want to learn more about how the theme is assembled, take a look at [`material-ui/style/createMuiTheme.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/createMuiTheme.js),
 and the related imports which `createMuiTheme` uses.
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index 5e38a22e8b5335..f51d4cfcb20784 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -2,6 +2,7 @@
   "homeQuickWord": "A quick word from our sponsors:",
   "helpToTranslate": "Help to translate",
   "editWebsiteColors": "Edit website colors",
+  "useDarkTheme": "Use dark theme",
   "toggleTheme": "Toggle light/dark theme",
   "toggleRTL": "Toggle right-to-left/left-to-right",
   "github": "GitHub repository",

From 2f07fecda6886e37c3c80b783514d55d9d0a7dee Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Wed, 8 Jan 2020 18:49:00 +0000
Subject: [PATCH 03/13] Add color swatches

---
 .../pages/customization/palette/DarkTheme.js  | 62 ++++++++++++++++++-
 1 file changed, 59 insertions(+), 3 deletions(-)

diff --git a/docs/src/pages/customization/palette/DarkTheme.js b/docs/src/pages/customization/palette/DarkTheme.js
index 016f871c29a8dd..016b2a9990e5ee 100644
--- a/docs/src/pages/customization/palette/DarkTheme.js
+++ b/docs/src/pages/customization/palette/DarkTheme.js
@@ -1,23 +1,79 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
-import { makeStyles, ThemeProvider, useTheme, createMuiTheme } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import {
+  makeStyles,
+  ThemeProvider,
+  useTheme,
+  createMuiTheme,
+  rgbToHex,
+} from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
   root: {
     padding: theme.spacing(3),
-    textAlign: 'center',
     backgroundColor: theme.palette.background.default,
     color: theme.palette.text.primary,
   },
+  paper: {
+    padding: theme.spacing(3),
+  },
+  divider: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+  },
+  color: {
+    display: 'flex',
+    alignItems: 'center',
+    '& div:first-of-type': {
+      width: theme.spacing(6),
+      height: theme.spacing(6),
+      marginRight: theme.spacing(1),
+      borderRadius: theme.shape.borderRadius,
+    },
+  },
+  container: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(3, 1fr)',
+    gridGap: theme.spacing(3),
+  },
 }));
 
 function Demo() {
   const classes = useStyles();
   const theme = useTheme();
 
+  const item = (color, name) => (
+    <div className={classes.color}>
+      <div style={{ backgroundColor: color }} />
+      <div>
+        <Typography variant="body2">{name}</Typography>
+        <Typography variant="body2" color="textSecondary">
+          {color}
+        </Typography>
+      </div>
+    </div>
+  );
+
   return (
     <div className={classes.root}>
-      <Typography>{`${theme.palette.type} theme`}</Typography>
+      <Paper className={classes.paper}>
+        <Typography variant="h6" align="center" gutterBottom>{`${
+          theme.palette.type
+        } theme`}</Typography>
+        <div className={classes.container}>
+          {item(theme.palette.text.primary, 'palette.text.primary')}
+          {item(theme.palette.text.secondary, 'palette.text.secondary')}
+          {item(theme.palette.text.disabled, 'palette.text.disabled')}
+          {item(theme.palette.text.hint, 'palette.text.hint')}
+          {item(theme.palette.action.active, 'palette.action.active')}
+          {item(theme.palette.action.hover, 'palette.action.hover')}
+          {item(theme.palette.action.selected, 'palette.action.selected')}
+          {item(theme.palette.action.disabled, 'palette.action.disabled')}
+          {item(theme.palette.action.disabledBackground, 'palette.action.disabledBackground')}
+          {item(theme.palette.divider, 'palette.divider')}
+        </div>
+      </Paper>
     </div>
   );
 }

From 7ec10926e96942e0b5b2ebd07ca9ba79e2908753 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Wed, 8 Jan 2020 18:51:40 +0000
Subject: [PATCH 04/13] Remove unused import

---
 docs/src/pages/customization/palette/DarkTheme.js | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/docs/src/pages/customization/palette/DarkTheme.js b/docs/src/pages/customization/palette/DarkTheme.js
index 016b2a9990e5ee..5cb72d6cffd2a2 100644
--- a/docs/src/pages/customization/palette/DarkTheme.js
+++ b/docs/src/pages/customization/palette/DarkTheme.js
@@ -1,13 +1,7 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
 import Paper from '@material-ui/core/Paper';
-import {
-  makeStyles,
-  ThemeProvider,
-  useTheme,
-  createMuiTheme,
-  rgbToHex,
-} from '@material-ui/core/styles';
+import { makeStyles, ThemeProvider, useTheme, createMuiTheme } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
   root: {

From 105c21496d5a50410dc341a37ab1e684b492d8f9 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Wed, 8 Jan 2020 19:20:55 +0000
Subject: [PATCH 05/13] Add TypeScript demo

---
 .../pages/customization/palette/DarkTheme.tsx | 54 ++++++++++++++++++-
 1 file changed, 52 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/customization/palette/DarkTheme.tsx b/docs/src/pages/customization/palette/DarkTheme.tsx
index dd6567535372bf..03d65b289c88ae 100644
--- a/docs/src/pages/customization/palette/DarkTheme.tsx
+++ b/docs/src/pages/customization/palette/DarkTheme.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
+import Paper from '@material-ui/core/Paper';
 import {
   createStyles,
   makeStyles,
@@ -13,10 +14,31 @@ const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       padding: theme.spacing(3),
-      textAlign: 'center',
       backgroundColor: theme.palette.background.default,
       color: theme.palette.text.primary,
     },
+    paper: {
+      padding: theme.spacing(3),
+    },
+    divider: {
+      marginTop: theme.spacing(2),
+      marginBottom: theme.spacing(2),
+    },
+    color: {
+      display: 'flex',
+      alignItems: 'center',
+      '& div:first-of-type': {
+        width: theme.spacing(6),
+        height: theme.spacing(6),
+        marginRight: theme.spacing(1),
+        borderRadius: theme.shape.borderRadius,
+      },
+    },
+    container: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(3, 1fr)',
+      gridGap: theme.spacing(3),
+    },
   }),
 );
 
@@ -24,9 +46,37 @@ function Demo() {
   const classes = useStyles();
   const theme = useTheme();
 
+  const item = (color: string, name: string) => (
+    <div className={classes.color}>
+      <div style={{ backgroundColor: color }} />
+      <div>
+        <Typography variant="body2">{name}</Typography>
+        <Typography variant="body2" color="textSecondary">
+          {color}
+        </Typography>
+      </div>
+    </div>
+  );
+
   return (
     <div className={classes.root}>
-      <Typography>{`${theme.palette.type} theme`}</Typography>
+      <Paper className={classes.paper}>
+        <Typography variant="h6" align="center" gutterBottom>{`${
+          theme.palette.type
+        } theme`}</Typography>
+        <div className={classes.container}>
+          {item(theme.palette.text.primary, 'palette.text.primary')}
+          {item(theme.palette.text.secondary, 'palette.text.secondary')}
+          {item(theme.palette.text.disabled, 'palette.text.disabled')}
+          {item(theme.palette.text.hint, 'palette.text.hint')}
+          {item(theme.palette.action.active, 'palette.action.active')}
+          {item(theme.palette.action.hover, 'palette.action.hover')}
+          {item(theme.palette.action.selected, 'palette.action.selected')}
+          {item(theme.palette.action.disabled, 'palette.action.disabled')}
+          {item(theme.palette.action.disabledBackground, 'palette.action.disabledBackground')}
+          {item(theme.palette.divider, 'palette.divider')}
+        </div>
+      </Paper>
     </div>
   );
 }

From d436fad599f82cc65e366da631e5fe6842e907b1 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Wed, 8 Jan 2020 21:55:00 -0300
Subject: [PATCH 06/13] Add more colors and group names

---
 .../pages/customization/palette/DarkTheme.js  | 60 +++++++++++------
 .../pages/customization/palette/DarkTheme.tsx | 65 +++++++++++++------
 2 files changed, 87 insertions(+), 38 deletions(-)

diff --git a/docs/src/pages/customization/palette/DarkTheme.js b/docs/src/pages/customization/palette/DarkTheme.js
index 5cb72d6cffd2a2..7491e2454ea784 100644
--- a/docs/src/pages/customization/palette/DarkTheme.js
+++ b/docs/src/pages/customization/palette/DarkTheme.js
@@ -1,21 +1,21 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
 import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
 import { makeStyles, ThemeProvider, useTheme, createMuiTheme } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    padding: theme.spacing(3),
     backgroundColor: theme.palette.background.default,
     color: theme.palette.text.primary,
+    overflow: 'auto',
+    [theme.breakpoints.up('md')]: {
+      padding: theme.spacing(3),
+    },
   },
   paper: {
     padding: theme.spacing(3),
   },
-  divider: {
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(2),
-  },
   color: {
     display: 'flex',
     alignItems: 'center',
@@ -26,10 +26,8 @@ const useStyles = makeStyles(theme => ({
       borderRadius: theme.shape.borderRadius,
     },
   },
-  container: {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(3, 1fr)',
-    gridGap: theme.spacing(3),
+  group: {
+    marginTop: theme.spacing(3),
   },
 }));
 
@@ -37,36 +35,60 @@ function Demo() {
   const classes = useStyles();
   const theme = useTheme();
 
-  const item = (color, name) => (
-    <div className={classes.color}>
-      <div style={{ backgroundColor: color }} />
+  const item = (color, name, expanded = false, border = false) => (
+    <Grid item xs={12} md={expanded ? 8 : 4} className={classes.color}>
+      <div
+        style={{
+          backgroundColor: color,
+          border: border ? `1px solid ${theme.palette.divider}` : undefined,
+        }}
+      />
       <div>
         <Typography variant="body2">{name}</Typography>
         <Typography variant="body2" color="textSecondary">
           {color}
         </Typography>
       </div>
-    </div>
+    </Grid>
   );
 
   return (
     <div className={classes.root}>
       <Paper className={classes.paper}>
-        <Typography variant="h6" align="center" gutterBottom>{`${
-          theme.palette.type
-        } theme`}</Typography>
-        <div className={classes.container}>
+        <Typography gutterBottom>Typography</Typography>
+        <Grid container spacing={2}>
           {item(theme.palette.text.primary, 'palette.text.primary')}
           {item(theme.palette.text.secondary, 'palette.text.secondary')}
           {item(theme.palette.text.disabled, 'palette.text.disabled')}
+        </Grid>
+        <Grid container spacing={2}>
           {item(theme.palette.text.hint, 'palette.text.hint')}
+        </Grid>
+        <Typography gutterBottom className={classes.group}>
+          Buttons
+        </Typography>
+        <Grid container spacing={2}>
           {item(theme.palette.action.active, 'palette.action.active')}
           {item(theme.palette.action.hover, 'palette.action.hover')}
           {item(theme.palette.action.selected, 'palette.action.selected')}
+        </Grid>
+        <Grid container spacing={2}>
           {item(theme.palette.action.disabled, 'palette.action.disabled')}
-          {item(theme.palette.action.disabledBackground, 'palette.action.disabledBackground')}
+          {item(theme.palette.action.disabledBackground, 'palette.action.disabledBackground', true)}
+        </Grid>
+        <Typography gutterBottom className={classes.group}>
+          Background
+        </Typography>
+        <Grid container spacing={2}>
+          {item(theme.palette.background.default, 'palette.background.default', false)}
+          {item(theme.palette.background.paper, 'palette.background.paper', false, true)}
+        </Grid>
+        <Typography gutterBottom className={classes.group}>
+          Divider
+        </Typography>
+        <Grid container spacing={2}>
           {item(theme.palette.divider, 'palette.divider')}
-        </div>
+        </Grid>
       </Paper>
     </div>
   );
diff --git a/docs/src/pages/customization/palette/DarkTheme.tsx b/docs/src/pages/customization/palette/DarkTheme.tsx
index 03d65b289c88ae..cbd4e2e178a899 100644
--- a/docs/src/pages/customization/palette/DarkTheme.tsx
+++ b/docs/src/pages/customization/palette/DarkTheme.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
 import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
 import {
   createStyles,
   makeStyles,
@@ -13,17 +14,16 @@ import {
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
-      padding: theme.spacing(3),
       backgroundColor: theme.palette.background.default,
       color: theme.palette.text.primary,
+      overflow: 'auto',
+      [theme.breakpoints.up('md')]: {
+        padding: theme.spacing(3),
+      },
     },
     paper: {
       padding: theme.spacing(3),
     },
-    divider: {
-      marginTop: theme.spacing(2),
-      marginBottom: theme.spacing(2),
-    },
     color: {
       display: 'flex',
       alignItems: 'center',
@@ -34,10 +34,8 @@ const useStyles = makeStyles((theme: Theme) =>
         borderRadius: theme.shape.borderRadius,
       },
     },
-    container: {
-      display: 'grid',
-      gridTemplateColumns: 'repeat(3, 1fr)',
-      gridGap: theme.spacing(3),
+    group: {
+      marginTop: theme.spacing(3),
     },
   }),
 );
@@ -46,36 +44,65 @@ function Demo() {
   const classes = useStyles();
   const theme = useTheme();
 
-  const item = (color: string, name: string) => (
-    <div className={classes.color}>
-      <div style={{ backgroundColor: color }} />
+  const item = (
+    color: string,
+    name: string,
+    expanded: boolean = false,
+    border: boolean = false,
+  ) => (
+    <Grid item xs={12} md={expanded ? 8 : 4} className={classes.color}>
+      <div
+        style={{
+          backgroundColor: color,
+          border: border ? `1px solid ${theme.palette.divider}` : undefined,
+        }}
+      />
       <div>
         <Typography variant="body2">{name}</Typography>
         <Typography variant="body2" color="textSecondary">
           {color}
         </Typography>
       </div>
-    </div>
+    </Grid>
   );
 
   return (
     <div className={classes.root}>
       <Paper className={classes.paper}>
-        <Typography variant="h6" align="center" gutterBottom>{`${
-          theme.palette.type
-        } theme`}</Typography>
-        <div className={classes.container}>
+        <Typography gutterBottom>Typography</Typography>
+        <Grid container spacing={2}>
           {item(theme.palette.text.primary, 'palette.text.primary')}
           {item(theme.palette.text.secondary, 'palette.text.secondary')}
           {item(theme.palette.text.disabled, 'palette.text.disabled')}
+        </Grid>
+        <Grid container spacing={2}>
           {item(theme.palette.text.hint, 'palette.text.hint')}
+        </Grid>
+        <Typography gutterBottom className={classes.group}>
+          Buttons
+        </Typography>
+        <Grid container spacing={2}>
           {item(theme.palette.action.active, 'palette.action.active')}
           {item(theme.palette.action.hover, 'palette.action.hover')}
           {item(theme.palette.action.selected, 'palette.action.selected')}
+        </Grid>
+        <Grid container spacing={2}>
           {item(theme.palette.action.disabled, 'palette.action.disabled')}
-          {item(theme.palette.action.disabledBackground, 'palette.action.disabledBackground')}
+          {item(theme.palette.action.disabledBackground, 'palette.action.disabledBackground', true)}
+        </Grid>
+        <Typography gutterBottom className={classes.group}>
+          Background
+        </Typography>
+        <Grid container spacing={2}>
+          {item(theme.palette.background.default, 'palette.background.default', false)}
+          {item(theme.palette.background.paper, 'palette.background.paper', false, true)}
+        </Grid>
+        <Typography gutterBottom className={classes.group}>
+          Divider
+        </Typography>
+        <Grid container spacing={2}>
           {item(theme.palette.divider, 'palette.divider')}
-        </div>
+        </Grid>
       </Paper>
     </div>
   );

From 5041d6a15efe1155c9dc3e4a6eab79618df2b790 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Wed, 8 Jan 2020 21:55:52 -0300
Subject: [PATCH 07/13] Minor tweaks

---
 docs/src/pages/customization/palette/Intentions.js |  4 ++--
 docs/src/pages/customization/palette/palette.md    | 12 +++++++-----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/docs/src/pages/customization/palette/Intentions.js b/docs/src/pages/customization/palette/Intentions.js
index 55686fb308f16c..8d4bba2a27deb5 100644
--- a/docs/src/pages/customization/palette/Intentions.js
+++ b/docs/src/pages/customization/palette/Intentions.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
-import { makeStyles, useTheme, rgbToHex } from '@material-ui/core/styles';
+import { makeStyles, rgbToHex, createMuiTheme } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -25,7 +25,7 @@ const useStyles = makeStyles(theme => ({
 
 export default function Intentions() {
   const classes = useStyles();
-  const theme = useTheme();
+  const theme = createMuiTheme();
 
   const item = (color, name) => (
     <Grid item xs={6} sm={4} className={classes.color}>
diff --git a/docs/src/pages/customization/palette/palette.md b/docs/src/pages/customization/palette/palette.md
index 5ca6c7e574443d..655368265fbb47 100644
--- a/docs/src/pages/customization/palette/palette.md
+++ b/docs/src/pages/customization/palette/palette.md
@@ -19,7 +19,7 @@ and the un-prefixed shades for the other intentions.
 
 If you want to learn more about color, you can check out [the color section](/customization/color/).
 
-{{"demo": "pages/customization/palette/Intentions.js", "bg": "inline"}}
+{{"demo": "pages/customization/palette/Intentions.js", "bg": "inline", "hideHeader": true}}
 
 ### Customization
 
@@ -41,7 +41,7 @@ interface PaletteIntention {
   main: string;
   dark?: string;
   contrastText?: string;
-};
+}
 ```
 
 **Using a color object**
@@ -97,9 +97,9 @@ As in the example above, if the intention object contains custom colors using an
 "main", "light", "dark" or "contrastText" keys, these map as follows:
 
 - If the "dark" and / or "light" keys are omitted, their value(s) will be calculated from "main",
-according to the "tonalOffset" value.
+  according to the "tonalOffset" value.
 - If "contrastText" is omitted, its value will be calculated to contrast with "main",
-according to the"contrastThreshold" value.
+  according to the"contrastThreshold" value.
 
 Both the "tonalOffset" and "contrastThreshold" values may be customized as needed.
 A higher value for "tonalOffset" will make calculated values for "light" lighter, and "dark" darker.
@@ -130,7 +130,9 @@ const darkTheme = createMuiTheme({
 });
 ```
 
-{{"demo": "pages/customization/palette/DarkTheme.js", "bg": "inline", "defaultCodeOpen": false}}
+The colors modified by the palette type are the following:
+
+{{"demo": "pages/customization/palette/DarkTheme.js", "bg": "inline", "hideHeader": true}}
 
 ### User preference
 

From c4544cc2119d3aab78261f87c53d40604f4fa9e6 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Wed, 8 Jan 2020 22:09:23 -0300
Subject: [PATCH 08/13] Minor tweaks

---
 docs/src/pages/customization/palette/Intentions.js  |  2 +-
 docs/src/pages/customization/palette/Intentions.tsx | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/docs/src/pages/customization/palette/Intentions.js b/docs/src/pages/customization/palette/Intentions.js
index 8d4bba2a27deb5..e83cea6301f983 100644
--- a/docs/src/pages/customization/palette/Intentions.js
+++ b/docs/src/pages/customization/palette/Intentions.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
-import { makeStyles, rgbToHex, createMuiTheme } from '@material-ui/core/styles';
+import { makeStyles, createMuiTheme, rgbToHex } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
   root: {
diff --git a/docs/src/pages/customization/palette/Intentions.tsx b/docs/src/pages/customization/palette/Intentions.tsx
index 8e2a203a3fa426..c99ca2c3f2cb9e 100644
--- a/docs/src/pages/customization/palette/Intentions.tsx
+++ b/docs/src/pages/customization/palette/Intentions.tsx
@@ -1,7 +1,13 @@
 import React from 'react';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
-import { createStyles, makeStyles, Theme, useTheme, rgbToHex } from '@material-ui/core/styles';
+import {
+  createStyles,
+  makeStyles,
+  Theme,
+  createMuiTheme,
+  rgbToHex,
+} from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -27,7 +33,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export default function Intentions() {
   const classes = useStyles();
-  const theme = useTheme();
+  const theme = createMuiTheme();
 
   const item = (color: string, name: string) => (
     <Grid item xs={6} sm={4} className={classes.color}>

From 6d64407d95db28a643607e6b19dea5b23affc713 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Thu, 9 Jan 2020 11:58:23 -0300
Subject: [PATCH 09/13] Add missing space

---
 docs/src/pages/customization/palette/palette.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/customization/palette/palette.md b/docs/src/pages/customization/palette/palette.md
index 655368265fbb47..c464833dfbc414 100644
--- a/docs/src/pages/customization/palette/palette.md
+++ b/docs/src/pages/customization/palette/palette.md
@@ -99,7 +99,7 @@ As in the example above, if the intention object contains custom colors using an
 - If the "dark" and / or "light" keys are omitted, their value(s) will be calculated from "main",
   according to the "tonalOffset" value.
 - If "contrastText" is omitted, its value will be calculated to contrast with "main",
-  according to the"contrastThreshold" value.
+  according to the "contrastThreshold" value.
 
 Both the "tonalOffset" and "contrastThreshold" values may be customized as needed.
 A higher value for "tonalOffset" will make calculated values for "light" lighter, and "dark" darker.

From 7ac20deb126a08d3d1844ce5d0a43a99fbbedc4c Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Thu, 9 Jan 2020 11:59:09 -0300
Subject: [PATCH 10/13] Remove mentions to 'palette.text.hint'

---
 docs/src/modules/components/MarkdownElement.js     | 2 +-
 docs/src/pages/customization/palette/DarkTheme.js  | 3 ---
 docs/src/pages/customization/palette/DarkTheme.tsx | 3 ---
 docs/src/pages/system/palette/BackgroundColor.js   | 5 -----
 docs/src/pages/system/palette/BackgroundColor.tsx  | 5 -----
 docs/src/pages/system/palette/Color.js             | 1 -
 docs/src/pages/system/palette/Color.tsx            | 1 -
 docs/src/pages/system/palette/palette.md           | 2 --
 8 files changed, 1 insertion(+), 21 deletions(-)

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index 91a4a90983c91f..373f9e96e51004 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -237,7 +237,7 @@ const styles = theme => ({
       '& .prop-default': {
         fontSize: 13,
         fontFamily: 'Consolas, "Liberation Mono", Menlo, monospace',
-        borderBottom: `1px dotted ${theme.palette.text.hint}`,
+        borderBottom: `1px dotted ${theme.palette.text.disabled}`,
       },
     },
     '& td': {
diff --git a/docs/src/pages/customization/palette/DarkTheme.js b/docs/src/pages/customization/palette/DarkTheme.js
index 7491e2454ea784..dccdb8eba41fd4 100644
--- a/docs/src/pages/customization/palette/DarkTheme.js
+++ b/docs/src/pages/customization/palette/DarkTheme.js
@@ -61,9 +61,6 @@ function Demo() {
           {item(theme.palette.text.secondary, 'palette.text.secondary')}
           {item(theme.palette.text.disabled, 'palette.text.disabled')}
         </Grid>
-        <Grid container spacing={2}>
-          {item(theme.palette.text.hint, 'palette.text.hint')}
-        </Grid>
         <Typography gutterBottom className={classes.group}>
           Buttons
         </Typography>
diff --git a/docs/src/pages/customization/palette/DarkTheme.tsx b/docs/src/pages/customization/palette/DarkTheme.tsx
index cbd4e2e178a899..5d4c89d3cc10dc 100644
--- a/docs/src/pages/customization/palette/DarkTheme.tsx
+++ b/docs/src/pages/customization/palette/DarkTheme.tsx
@@ -75,9 +75,6 @@ function Demo() {
           {item(theme.palette.text.secondary, 'palette.text.secondary')}
           {item(theme.palette.text.disabled, 'palette.text.disabled')}
         </Grid>
-        <Grid container spacing={2}>
-          {item(theme.palette.text.hint, 'palette.text.hint')}
-        </Grid>
         <Typography gutterBottom className={classes.group}>
           Buttons
         </Typography>
diff --git a/docs/src/pages/system/palette/BackgroundColor.js b/docs/src/pages/system/palette/BackgroundColor.js
index 8fb08e68943624..891d93ed2d28e8 100644
--- a/docs/src/pages/system/palette/BackgroundColor.js
+++ b/docs/src/pages/system/palette/BackgroundColor.js
@@ -50,11 +50,6 @@ export default function BackgroundColor() {
           text.disabled
         </Box>
       </Grid>
-      <Grid item xs={12} sm={4}>
-        <Box bgcolor="text.hint" color="background.paper" p={2}>
-          text.hint
-        </Box>
-      </Grid>
     </Grid>
   );
 }
diff --git a/docs/src/pages/system/palette/BackgroundColor.tsx b/docs/src/pages/system/palette/BackgroundColor.tsx
index 8fb08e68943624..891d93ed2d28e8 100644
--- a/docs/src/pages/system/palette/BackgroundColor.tsx
+++ b/docs/src/pages/system/palette/BackgroundColor.tsx
@@ -50,11 +50,6 @@ export default function BackgroundColor() {
           text.disabled
         </Box>
       </Grid>
-      <Grid item xs={12} sm={4}>
-        <Box bgcolor="text.hint" color="background.paper" p={2}>
-          text.hint
-        </Box>
-      </Grid>
     </Grid>
   );
 }
diff --git a/docs/src/pages/system/palette/Color.js b/docs/src/pages/system/palette/Color.js
index 92bc186fea95ac..bc46160352de93 100644
--- a/docs/src/pages/system/palette/Color.js
+++ b/docs/src/pages/system/palette/Color.js
@@ -14,7 +14,6 @@ export default function Color() {
       <Box color="text.primary">text.primary</Box>
       <Box color="text.secondary">text.secondary</Box>
       <Box color="text.disabled">text.disabled</Box>
-      <Box color="text.hint">text.hint</Box>
     </Typography>
   );
 }
diff --git a/docs/src/pages/system/palette/Color.tsx b/docs/src/pages/system/palette/Color.tsx
index 92bc186fea95ac..bc46160352de93 100644
--- a/docs/src/pages/system/palette/Color.tsx
+++ b/docs/src/pages/system/palette/Color.tsx
@@ -14,7 +14,6 @@ export default function Color() {
       <Box color="text.primary">text.primary</Box>
       <Box color="text.secondary">text.secondary</Box>
       <Box color="text.disabled">text.disabled</Box>
-      <Box color="text.hint">text.hint</Box>
     </Typography>
   );
 }
diff --git a/docs/src/pages/system/palette/palette.md b/docs/src/pages/system/palette/palette.md
index 34fc479a46c5cf..3e9d54e8620cd5 100644
--- a/docs/src/pages/system/palette/palette.md
+++ b/docs/src/pages/system/palette/palette.md
@@ -16,7 +16,6 @@
 <Box color="text.primary">…
 <Box color="text.secondary">…
 <Box color="text.disabled">…
-<Box color="text.hint">…
 ```
 
 ## Background color
@@ -33,7 +32,6 @@
 <Box bgcolor="text.primary">…
 <Box bgcolor="text.secondary">…
 <Box bgcolor="text.disabled">…
-<Box bgcolor="text.hint">…
 ```
 
 ## API

From fb7bcb7ba0825a9a8fecc678f250a0af03719e05 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Thu, 9 Jan 2020 12:15:06 -0300
Subject: [PATCH 11/13] Use default theme

---
 docs/src/pages/system/palette/BackgroundColor.js  | 13 ++++++++++++-
 docs/src/pages/system/palette/BackgroundColor.tsx | 13 ++++++++++++-
 docs/src/pages/system/palette/Color.js            | 13 ++++++++++++-
 docs/src/pages/system/palette/Color.tsx           | 13 ++++++++++++-
 4 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/docs/src/pages/system/palette/BackgroundColor.js b/docs/src/pages/system/palette/BackgroundColor.js
index 891d93ed2d28e8..9a983c5daf15e8 100644
--- a/docs/src/pages/system/palette/BackgroundColor.js
+++ b/docs/src/pages/system/palette/BackgroundColor.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 
-export default function BackgroundColor() {
+function Demo() {
   return (
     <Grid container spacing={1}>
       <Grid item xs={12} sm={4}>
@@ -53,3 +54,13 @@ export default function BackgroundColor() {
     </Grid>
   );
 }
+
+const theme = createMuiTheme();
+
+export default function BackgroundColor() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Demo />
+    </ThemeProvider>
+  );
+}
diff --git a/docs/src/pages/system/palette/BackgroundColor.tsx b/docs/src/pages/system/palette/BackgroundColor.tsx
index 891d93ed2d28e8..9a983c5daf15e8 100644
--- a/docs/src/pages/system/palette/BackgroundColor.tsx
+++ b/docs/src/pages/system/palette/BackgroundColor.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 
-export default function BackgroundColor() {
+function Demo() {
   return (
     <Grid container spacing={1}>
       <Grid item xs={12} sm={4}>
@@ -53,3 +54,13 @@ export default function BackgroundColor() {
     </Grid>
   );
 }
+
+const theme = createMuiTheme();
+
+export default function BackgroundColor() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Demo />
+    </ThemeProvider>
+  );
+}
diff --git a/docs/src/pages/system/palette/Color.js b/docs/src/pages/system/palette/Color.js
index bc46160352de93..e582974eade037 100644
--- a/docs/src/pages/system/palette/Color.js
+++ b/docs/src/pages/system/palette/Color.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 
-export default function Color() {
+function Demo() {
   return (
     <Typography component="div" variant="body1">
       <Box color="primary.main">primary.main</Box>
@@ -17,3 +18,13 @@ export default function Color() {
     </Typography>
   );
 }
+
+const theme = createMuiTheme();
+
+export default function Color() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Demo />
+    </ThemeProvider>
+  );
+}
diff --git a/docs/src/pages/system/palette/Color.tsx b/docs/src/pages/system/palette/Color.tsx
index bc46160352de93..e582974eade037 100644
--- a/docs/src/pages/system/palette/Color.tsx
+++ b/docs/src/pages/system/palette/Color.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 
-export default function Color() {
+function Demo() {
   return (
     <Typography component="div" variant="body1">
       <Box color="primary.main">primary.main</Box>
@@ -17,3 +18,13 @@ export default function Color() {
     </Typography>
   );
 }
+
+const theme = createMuiTheme();
+
+export default function Color() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Demo />
+    </ThemeProvider>
+  );
+}

From 467807c28857084955743fd2a94065b80d4dd316 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Thu, 9 Jan 2020 13:11:53 -0300
Subject: [PATCH 12/13] Use palette.divider color

---
 docs/src/modules/components/MarkdownElement.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index 373f9e96e51004..054f9e2674b34e 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -237,7 +237,7 @@ const styles = theme => ({
       '& .prop-default': {
         fontSize: 13,
         fontFamily: 'Consolas, "Liberation Mono", Menlo, monospace',
-        borderBottom: `1px dotted ${theme.palette.text.disabled}`,
+        borderBottom: `1px dotted ${theme.palette.divider}`,
       },
     },
     '& td': {

From 313505b0f464ee1c037b37df7eb9d1db1a4444f8 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 11 Jan 2020 00:22:42 +0100
Subject: [PATCH 13/13] polishing

---
 .../default-theme/DefaultTheme.js             |  16 +--
 .../default-theme/default-theme.md            |   2 +-
 .../pages/customization/palette/DarkTheme.js  |  83 +++++------
 .../pages/customization/palette/DarkTheme.tsx | 133 ------------------
 .../pages/customization/palette/Intentions.js |  55 ++++----
 .../customization/palette/Intentions.tsx      | 102 --------------
 .../pages/system/palette/BackgroundColor.js   |  13 +-
 .../pages/system/palette/BackgroundColor.tsx  |  13 +-
 docs/src/pages/system/palette/Color.js        |  13 +-
 docs/src/pages/system/palette/Color.tsx       |  13 +-
 10 files changed, 75 insertions(+), 368 deletions(-)
 delete mode 100644 docs/src/pages/customization/palette/DarkTheme.tsx
 delete mode 100644 docs/src/pages/customization/palette/Intentions.tsx

diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js
index cbe14be6bd157e..8116b0a84551a7 100644
--- a/docs/src/pages/customization/default-theme/DefaultTheme.js
+++ b/docs/src/pages/customization/default-theme/DefaultTheme.js
@@ -135,7 +135,7 @@ ObjectEntry.propTypes = {
 };
 
 function Inspector(props) {
-  const { data, expandPaths } = props;
+  const { data, expandPaths, ...other } = props;
 
   const keyPrefix = '$ROOT';
   const defaultExpanded = React.useMemo(() => {
@@ -153,6 +153,7 @@ function Inspector(props) {
       defaultEndIcon={<div style={{ width: 24 }} />}
       defaultExpanded={defaultExpanded}
       defaultExpandIcon={<CollapseIcon />}
+      {...other}
     >
       {Object.keys(data).map(objectKey => {
         return (
@@ -175,14 +176,13 @@ Inspector.propTypes = {
 
 const styles = theme => ({
   root: {
+    width: '100%',
+  },
+  inspector: {
     backgroundColor: '#333',
-    borderRadius: 4,
     color: '#fff',
-    display: 'block',
-    padding: theme.spacing(2),
-    paddingTop: 0,
-    minHeight: theme.spacing(40),
-    width: '100%',
+    borderRadius: theme.shape.borderRadius,
+    padding: theme.spacing(1),
   },
   switch: {
     paddingBottom: theme.spacing(1),
@@ -281,7 +281,7 @@ function DefaultTheme(props) {
         }
         label={t('useDarkTheme')}
       />
-      <Inspector data={data} expandPaths={expandPaths} expandLevel={checked ? 100 : 1} />
+      <Inspector className={classes.inspector} data={data} expandPaths={expandPaths} />
     </div>
   );
 }
diff --git a/docs/src/pages/customization/default-theme/default-theme.md b/docs/src/pages/customization/default-theme/default-theme.md
index 70ab06d0d05067..62209a223ab7c7 100644
--- a/docs/src/pages/customization/default-theme/default-theme.md
+++ b/docs/src/pages/customization/default-theme/default-theme.md
@@ -6,7 +6,7 @@
 
 Explore the default theme object:
 
-{{"demo": "pages/customization/default-theme/DefaultTheme.js", "hideHeader": true}}
+{{"demo": "pages/customization/default-theme/DefaultTheme.js", "hideHeader": true, "bg": "inline"}}
 
 > Tip: you can play with the documentation theme object in your browser console,
 > as the `theme` variable is exposed on all the documentation pages.
diff --git a/docs/src/pages/customization/palette/DarkTheme.js b/docs/src/pages/customization/palette/DarkTheme.js
index dccdb8eba41fd4..8d0bf985195548 100644
--- a/docs/src/pages/customization/palette/DarkTheme.js
+++ b/docs/src/pages/customization/palette/DarkTheme.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
-import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles, ThemeProvider, useTheme, createMuiTheme } from '@material-ui/core/styles';
 
@@ -8,13 +7,13 @@ const useStyles = makeStyles(theme => ({
   root: {
     backgroundColor: theme.palette.background.default,
     color: theme.palette.text.primary,
-    overflow: 'auto',
+    padding: theme.spacing(2),
     [theme.breakpoints.up('md')]: {
       padding: theme.spacing(3),
     },
   },
-  paper: {
-    padding: theme.spacing(3),
+  group: {
+    marginTop: theme.spacing(3),
   },
   color: {
     display: 'flex',
@@ -22,13 +21,11 @@ const useStyles = makeStyles(theme => ({
     '& div:first-of-type': {
       width: theme.spacing(6),
       height: theme.spacing(6),
+      flexShrink: 0,
       marginRight: theme.spacing(1),
       borderRadius: theme.shape.borderRadius,
     },
   },
-  group: {
-    marginTop: theme.spacing(3),
-  },
 }));
 
 function Demo() {
@@ -36,7 +33,7 @@ function Demo() {
   const theme = useTheme();
 
   const item = (color, name, expanded = false, border = false) => (
-    <Grid item xs={12} md={expanded ? 8 : 4} className={classes.color}>
+    <Grid item xs={12} sm={6} md={expanded ? 8 : 4} className={classes.color}>
       <div
         style={{
           backgroundColor: color,
@@ -54,50 +51,40 @@ function Demo() {
 
   return (
     <div className={classes.root}>
-      <Paper className={classes.paper}>
-        <Typography gutterBottom>Typography</Typography>
-        <Grid container spacing={2}>
-          {item(theme.palette.text.primary, 'palette.text.primary')}
-          {item(theme.palette.text.secondary, 'palette.text.secondary')}
-          {item(theme.palette.text.disabled, 'palette.text.disabled')}
-        </Grid>
-        <Typography gutterBottom className={classes.group}>
-          Buttons
-        </Typography>
-        <Grid container spacing={2}>
-          {item(theme.palette.action.active, 'palette.action.active')}
-          {item(theme.palette.action.hover, 'palette.action.hover')}
-          {item(theme.palette.action.selected, 'palette.action.selected')}
-        </Grid>
-        <Grid container spacing={2}>
-          {item(theme.palette.action.disabled, 'palette.action.disabled')}
-          {item(theme.palette.action.disabledBackground, 'palette.action.disabledBackground', true)}
-        </Grid>
-        <Typography gutterBottom className={classes.group}>
-          Background
-        </Typography>
-        <Grid container spacing={2}>
-          {item(theme.palette.background.default, 'palette.background.default', false)}
-          {item(theme.palette.background.paper, 'palette.background.paper', false, true)}
-        </Grid>
-        <Typography gutterBottom className={classes.group}>
-          Divider
-        </Typography>
-        <Grid container spacing={2}>
-          {item(theme.palette.divider, 'palette.divider')}
-        </Grid>
-      </Paper>
+      <Typography gutterBottom>Typography</Typography>
+      <Grid container spacing={1}>
+        {item(theme.palette.text.primary, 'palette.text.primary')}
+        {item(theme.palette.text.secondary, 'palette.text.secondary')}
+        {item(theme.palette.text.disabled, 'palette.text.disabled')}
+      </Grid>
+      <Typography gutterBottom className={classes.group}>
+        Buttons
+      </Typography>
+      <Grid container spacing={1}>
+        {item(theme.palette.action.active, 'palette.action.active')}
+        {item(theme.palette.action.hover, 'palette.action.hover')}
+        {item(theme.palette.action.selected, 'palette.action.selected')}
+        {item(theme.palette.action.disabled, 'palette.action.disabled')}
+        {item(theme.palette.action.disabledBackground, 'palette.action.disabledBackground', true)}
+      </Grid>
+      <Typography gutterBottom className={classes.group}>
+        Background
+      </Typography>
+      <Grid container spacing={1}>
+        {item(theme.palette.background.default, 'palette.background.default', false, true)}
+        {item(theme.palette.background.paper, 'palette.background.paper')}
+      </Grid>
+      <Typography gutterBottom className={classes.group}>
+        Divider
+      </Typography>
+      <Grid container spacing={1}>
+        {item(theme.palette.divider, 'palette.divider')}
+      </Grid>
     </div>
   );
 }
 
-const lightTheme = createMuiTheme({
-  palette: {
-    // This is the default, so only included for comparison.
-    type: 'light',
-  },
-});
-
+const lightTheme = createMuiTheme();
 const darkTheme = createMuiTheme({
   palette: {
     // Switching the dark mode on is a single property value change.
diff --git a/docs/src/pages/customization/palette/DarkTheme.tsx b/docs/src/pages/customization/palette/DarkTheme.tsx
deleted file mode 100644
index 5d4c89d3cc10dc..00000000000000
--- a/docs/src/pages/customization/palette/DarkTheme.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import React from 'react';
-import Typography from '@material-ui/core/Typography';
-import Paper from '@material-ui/core/Paper';
-import Grid from '@material-ui/core/Grid';
-import {
-  createStyles,
-  makeStyles,
-  ThemeProvider,
-  useTheme,
-  createMuiTheme,
-  Theme,
-} from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      backgroundColor: theme.palette.background.default,
-      color: theme.palette.text.primary,
-      overflow: 'auto',
-      [theme.breakpoints.up('md')]: {
-        padding: theme.spacing(3),
-      },
-    },
-    paper: {
-      padding: theme.spacing(3),
-    },
-    color: {
-      display: 'flex',
-      alignItems: 'center',
-      '& div:first-of-type': {
-        width: theme.spacing(6),
-        height: theme.spacing(6),
-        marginRight: theme.spacing(1),
-        borderRadius: theme.shape.borderRadius,
-      },
-    },
-    group: {
-      marginTop: theme.spacing(3),
-    },
-  }),
-);
-
-function Demo() {
-  const classes = useStyles();
-  const theme = useTheme();
-
-  const item = (
-    color: string,
-    name: string,
-    expanded: boolean = false,
-    border: boolean = false,
-  ) => (
-    <Grid item xs={12} md={expanded ? 8 : 4} className={classes.color}>
-      <div
-        style={{
-          backgroundColor: color,
-          border: border ? `1px solid ${theme.palette.divider}` : undefined,
-        }}
-      />
-      <div>
-        <Typography variant="body2">{name}</Typography>
-        <Typography variant="body2" color="textSecondary">
-          {color}
-        </Typography>
-      </div>
-    </Grid>
-  );
-
-  return (
-    <div className={classes.root}>
-      <Paper className={classes.paper}>
-        <Typography gutterBottom>Typography</Typography>
-        <Grid container spacing={2}>
-          {item(theme.palette.text.primary, 'palette.text.primary')}
-          {item(theme.palette.text.secondary, 'palette.text.secondary')}
-          {item(theme.palette.text.disabled, 'palette.text.disabled')}
-        </Grid>
-        <Typography gutterBottom className={classes.group}>
-          Buttons
-        </Typography>
-        <Grid container spacing={2}>
-          {item(theme.palette.action.active, 'palette.action.active')}
-          {item(theme.palette.action.hover, 'palette.action.hover')}
-          {item(theme.palette.action.selected, 'palette.action.selected')}
-        </Grid>
-        <Grid container spacing={2}>
-          {item(theme.palette.action.disabled, 'palette.action.disabled')}
-          {item(theme.palette.action.disabledBackground, 'palette.action.disabledBackground', true)}
-        </Grid>
-        <Typography gutterBottom className={classes.group}>
-          Background
-        </Typography>
-        <Grid container spacing={2}>
-          {item(theme.palette.background.default, 'palette.background.default', false)}
-          {item(theme.palette.background.paper, 'palette.background.paper', false, true)}
-        </Grid>
-        <Typography gutterBottom className={classes.group}>
-          Divider
-        </Typography>
-        <Grid container spacing={2}>
-          {item(theme.palette.divider, 'palette.divider')}
-        </Grid>
-      </Paper>
-    </div>
-  );
-}
-
-const lightTheme = createMuiTheme({
-  palette: {
-    // This is the default, so only included for comparison.
-    type: 'light',
-  },
-});
-
-const darkTheme = createMuiTheme({
-  palette: {
-    // Switching the dark mode on is a single property value change.
-    type: 'dark',
-  },
-});
-
-export default function DarkTheme() {
-  return (
-    <div style={{ width: '100%' }}>
-      <ThemeProvider theme={darkTheme}>
-        <Demo />
-      </ThemeProvider>
-      <ThemeProvider theme={lightTheme}>
-        <Demo />
-      </ThemeProvider>
-    </div>
-  );
-}
diff --git a/docs/src/pages/customization/palette/Intentions.js b/docs/src/pages/customization/palette/Intentions.js
index e83cea6301f983..1d0d8825b95574 100644
--- a/docs/src/pages/customization/palette/Intentions.js
+++ b/docs/src/pages/customization/palette/Intentions.js
@@ -1,12 +1,11 @@
 import React from 'react';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
-import { makeStyles, createMuiTheme, rgbToHex } from '@material-ui/core/styles';
+import { makeStyles, useTheme, rgbToHex } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
   root: {
     width: '100%',
-    maxWidth: 600,
   },
   group: {
     marginTop: theme.spacing(3),
@@ -25,10 +24,10 @@ const useStyles = makeStyles(theme => ({
 
 export default function Intentions() {
   const classes = useStyles();
-  const theme = createMuiTheme();
+  const theme = useTheme();
 
   const item = (color, name) => (
-    <Grid item xs={6} sm={4} className={classes.color}>
+    <Grid item xs={12} sm={6} md={4} className={classes.color}>
       <div style={{ backgroundColor: color }} />
       <div>
         <Typography variant="body2">{name}</Typography>
@@ -44,50 +43,50 @@ export default function Intentions() {
       <Typography gutterBottom className={classes.group}>
         Primary
       </Typography>
-      <Grid container spacing={1}>
-        {item(theme.palette.primary.light, 'light')}
-        {item(theme.palette.primary.main, 'main')}
-        {item(theme.palette.primary.dark, 'dark')}
+      <Grid container spacing={2}>
+        {item(theme.palette.primary.light, 'palette.primary.light')}
+        {item(theme.palette.primary.main, 'palette.primary.main')}
+        {item(theme.palette.primary.dark, 'palette.primary.dark')}
       </Grid>
       <Typography gutterBottom className={classes.group}>
         Secondary
       </Typography>
-      <Grid container spacing={1}>
-        {item(theme.palette.secondary.light, 'light')}
-        {item(theme.palette.secondary.main, 'main')}
-        {item(theme.palette.secondary.dark, 'dark')}
+      <Grid container spacing={2}>
+        {item(theme.palette.secondary.light, 'palette.secondary.light')}
+        {item(theme.palette.secondary.main, 'palette.secondary.main')}
+        {item(theme.palette.secondary.dark, 'palette.secondary.dark')}
       </Grid>
       <Typography gutterBottom className={classes.group}>
         Error
       </Typography>
-      <Grid container spacing={1}>
-        {item(theme.palette.error.light, 'light')}
-        {item(theme.palette.error.main, 'main')}
-        {item(theme.palette.error.dark, 'dark')}
+      <Grid container spacing={2}>
+        {item(theme.palette.error.light, 'palette.error.light')}
+        {item(theme.palette.error.main, 'palette.error.main')}
+        {item(theme.palette.error.dark, 'palette.error.dark')}
       </Grid>
       <Typography gutterBottom className={classes.group}>
         Warning
       </Typography>
-      <Grid container spacing={1}>
-        {item(theme.palette.warning.light, 'light')}
-        {item(theme.palette.warning.main, 'main')}
-        {item(theme.palette.warning.dark, 'dark')}
+      <Grid container spacing={2}>
+        {item(theme.palette.warning.light, 'palette.warning.light')}
+        {item(theme.palette.warning.main, 'palette.warning.main')}
+        {item(theme.palette.warning.dark, 'palette.warning.dark')}
       </Grid>
       <Typography gutterBottom className={classes.group}>
         Info
       </Typography>
-      <Grid container spacing={1}>
-        {item(theme.palette.info.light, 'light')}
-        {item(theme.palette.info.main, 'main')}
-        {item(theme.palette.info.dark, 'dark')}
+      <Grid container spacing={2}>
+        {item(theme.palette.info.light, 'palette.info.light')}
+        {item(theme.palette.info.main, 'palette.info.main')}
+        {item(theme.palette.info.dark, 'palette.info.dark')}
       </Grid>
       <Typography gutterBottom className={classes.group}>
         Success
       </Typography>
-      <Grid container spacing={1}>
-        {item(theme.palette.success.light, 'light')}
-        {item(theme.palette.success.main, 'main')}
-        {item(theme.palette.success.dark, 'dark')}
+      <Grid container spacing={2}>
+        {item(theme.palette.success.light, 'palette.success.light')}
+        {item(theme.palette.success.main, 'palette.success.main')}
+        {item(theme.palette.success.dark, 'palette.success.dark')}
       </Grid>
     </div>
   );
diff --git a/docs/src/pages/customization/palette/Intentions.tsx b/docs/src/pages/customization/palette/Intentions.tsx
deleted file mode 100644
index c99ca2c3f2cb9e..00000000000000
--- a/docs/src/pages/customization/palette/Intentions.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from 'react';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import {
-  createStyles,
-  makeStyles,
-  Theme,
-  createMuiTheme,
-  rgbToHex,
-} from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 600,
-    },
-    group: {
-      marginTop: theme.spacing(3),
-    },
-    color: {
-      display: 'flex',
-      alignItems: 'center',
-      '& div:first-of-type': {
-        width: theme.spacing(6),
-        height: theme.spacing(6),
-        marginRight: theme.spacing(1),
-        borderRadius: theme.shape.borderRadius,
-      },
-    },
-  }),
-);
-
-export default function Intentions() {
-  const classes = useStyles();
-  const theme = createMuiTheme();
-
-  const item = (color: string, name: string) => (
-    <Grid item xs={6} sm={4} className={classes.color}>
-      <div style={{ backgroundColor: color }} />
-      <div>
-        <Typography variant="body2">{name}</Typography>
-        <Typography variant="body2" color="textSecondary">
-          {rgbToHex(color)}
-        </Typography>
-      </div>
-    </Grid>
-  );
-
-  return (
-    <div className={classes.root}>
-      <Typography gutterBottom className={classes.group}>
-        Primary
-      </Typography>
-      <Grid container spacing={1}>
-        {item(theme.palette.primary.light, 'light')}
-        {item(theme.palette.primary.main, 'main')}
-        {item(theme.palette.primary.dark, 'dark')}
-      </Grid>
-      <Typography gutterBottom className={classes.group}>
-        Secondary
-      </Typography>
-      <Grid container spacing={1}>
-        {item(theme.palette.secondary.light, 'light')}
-        {item(theme.palette.secondary.main, 'main')}
-        {item(theme.palette.secondary.dark, 'dark')}
-      </Grid>
-      <Typography gutterBottom className={classes.group}>
-        Error
-      </Typography>
-      <Grid container spacing={1}>
-        {item(theme.palette.error.light, 'light')}
-        {item(theme.palette.error.main, 'main')}
-        {item(theme.palette.error.dark, 'dark')}
-      </Grid>
-      <Typography gutterBottom className={classes.group}>
-        Warning
-      </Typography>
-      <Grid container spacing={1}>
-        {item(theme.palette.warning.light, 'light')}
-        {item(theme.palette.warning.main, 'main')}
-        {item(theme.palette.warning.dark, 'dark')}
-      </Grid>
-      <Typography gutterBottom className={classes.group}>
-        Info
-      </Typography>
-      <Grid container spacing={1}>
-        {item(theme.palette.info.light, 'light')}
-        {item(theme.palette.info.main, 'main')}
-        {item(theme.palette.info.dark, 'dark')}
-      </Grid>
-      <Typography gutterBottom className={classes.group}>
-        Success
-      </Typography>
-      <Grid container spacing={1}>
-        {item(theme.palette.success.light, 'light')}
-        {item(theme.palette.success.main, 'main')}
-        {item(theme.palette.success.dark, 'dark')}
-      </Grid>
-    </div>
-  );
-}
diff --git a/docs/src/pages/system/palette/BackgroundColor.js b/docs/src/pages/system/palette/BackgroundColor.js
index 9a983c5daf15e8..891d93ed2d28e8 100644
--- a/docs/src/pages/system/palette/BackgroundColor.js
+++ b/docs/src/pages/system/palette/BackgroundColor.js
@@ -1,9 +1,8 @@
 import React from 'react';
 import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
-import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 
-function Demo() {
+export default function BackgroundColor() {
   return (
     <Grid container spacing={1}>
       <Grid item xs={12} sm={4}>
@@ -54,13 +53,3 @@ function Demo() {
     </Grid>
   );
 }
-
-const theme = createMuiTheme();
-
-export default function BackgroundColor() {
-  return (
-    <ThemeProvider theme={theme}>
-      <Demo />
-    </ThemeProvider>
-  );
-}
diff --git a/docs/src/pages/system/palette/BackgroundColor.tsx b/docs/src/pages/system/palette/BackgroundColor.tsx
index 9a983c5daf15e8..891d93ed2d28e8 100644
--- a/docs/src/pages/system/palette/BackgroundColor.tsx
+++ b/docs/src/pages/system/palette/BackgroundColor.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
-import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 
-function Demo() {
+export default function BackgroundColor() {
   return (
     <Grid container spacing={1}>
       <Grid item xs={12} sm={4}>
@@ -54,13 +53,3 @@ function Demo() {
     </Grid>
   );
 }
-
-const theme = createMuiTheme();
-
-export default function BackgroundColor() {
-  return (
-    <ThemeProvider theme={theme}>
-      <Demo />
-    </ThemeProvider>
-  );
-}
diff --git a/docs/src/pages/system/palette/Color.js b/docs/src/pages/system/palette/Color.js
index e582974eade037..bc46160352de93 100644
--- a/docs/src/pages/system/palette/Color.js
+++ b/docs/src/pages/system/palette/Color.js
@@ -1,9 +1,8 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
-import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 
-function Demo() {
+export default function Color() {
   return (
     <Typography component="div" variant="body1">
       <Box color="primary.main">primary.main</Box>
@@ -18,13 +17,3 @@ function Demo() {
     </Typography>
   );
 }
-
-const theme = createMuiTheme();
-
-export default function Color() {
-  return (
-    <ThemeProvider theme={theme}>
-      <Demo />
-    </ThemeProvider>
-  );
-}
diff --git a/docs/src/pages/system/palette/Color.tsx b/docs/src/pages/system/palette/Color.tsx
index e582974eade037..bc46160352de93 100644
--- a/docs/src/pages/system/palette/Color.tsx
+++ b/docs/src/pages/system/palette/Color.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
-import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 
-function Demo() {
+export default function Color() {
   return (
     <Typography component="div" variant="body1">
       <Box color="primary.main">primary.main</Box>
@@ -18,13 +17,3 @@ function Demo() {
     </Typography>
   );
 }
-
-const theme = createMuiTheme();
-
-export default function Color() {
-  return (
-    <ThemeProvider theme={theme}>
-      <Demo />
-    </ThemeProvider>
-  );
-}