[theme] Add warning, success and info colors to the palette

docs/src/pages/customization/color/color.md

@@ -45,15 +45,15 @@ import HUE from '@material-ui/core/colors/HUE';
 const color = HUE[SHADE];
 ```
 
-{{"demo": "pages/customization/color/Color.js", "hideHeader": true}}
+{{"demo": "pages/customization/color/Color.js", "hideHeader": true, "bg": "inline"}}
 
 ## Color tool
 
 To test a [material.io/design/color](https://material.io/design/color/) color scheme with the Material-UI
 documentation, simply select colors using the palette and sliders below.
 Alternatively, you can enter hex values in the Primary and Secondary text fields.
 
-{{"demo": "pages/customization/color/ColorTool.js", "hideHeader": true}}
+{{"demo": "pages/customization/color/ColorTool.js", "hideHeader": true, "bg": true}}
 
 The output shown in the color sample can be pasted directly into a [`createMuiTheme()`](/customization/theming/#createmuitheme-options-theme) function (to be used with [`ThemeProvider`](/customization/theming/#theme-provider)):
 

docs/src/pages/customization/default-theme/DefaultTheme.js

@@ -228,11 +228,14 @@ function DefaultTheme(props) {
     }
 
     setExpandPaths(
-      expandPath.split('.').reduce((acc, path) => {
-        const last = acc.length > 0 ? `${acc[acc.length - 1]}.` : '';
-        acc.push(last + path);
-        return acc;
-      }, []),
+      expandPath
+        .replace('$.', '')
+        .split('.')
+        .reduce((acc, path) => {
+          const last = acc.length > 0 ? `${acc[acc.length - 1]}.` : '';
+          acc.push(last + path);
+          return acc;
+        }, []),
     );
   }, []);
 
@@ -256,11 +259,7 @@ function DefaultTheme(props) {
             checked={checked}
             onChange={(event, newChecked) => {
               setChecked(newChecked);
-              if (newChecked) {
-                setExpandPaths(allNodeIds);
-              } else {
-                setExpandPaths([]);
-              }
+              setExpandPaths(newChecked ? allNodeIds : []);
             }}
           />
         }

docs/src/pages/customization/palette/DarkTheme.js

@@ -1,43 +1,50 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
-import { useTheme, createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+import { makeStyles, ThemeProvider, useTheme, createMuiTheme } from '@material-ui/core/styles';
 
-function WithTheme() {
-  const theme = useTheme();
-  const primaryText = theme.palette.text.primary;
-  const primaryColor = theme.palette.primary.main;
+const useStyles = makeStyles(theme => ({
+  root: {
+    padding: theme.spacing(3),
+    textAlign: 'center',
+    backgroundColor: theme.palette.background.default,
+    color: theme.palette.text.primary,
+  },
+}));
 
-  const styles = {
-    primaryText: {
-      backgroundColor: theme.palette.background.default,
-      padding: theme.spacing(1, 2),
-      color: primaryText,
-    },
-    primaryColor: {
-      backgroundColor: primaryColor,
-      padding: theme.spacing(1, 2),
-      color: theme.palette.common.white,
-    },
-  };
+function Demo() {
+  const classes = useStyles();
+  const theme = useTheme();
 
   return (
-    <div style={{ width: 300 }}>
-      <Typography style={styles.primaryColor}>{`Primary color ${primaryColor}`}</Typography>
-      <Typography style={styles.primaryText}>{`Primary text ${primaryText}`}</Typography>
+    <div className={classes.root}>
+      <Typography>{`${theme.palette.type} theme`}</Typography>
     </div>
   );
 }
 
-const theme = createMuiTheme({
+const lightTheme = createMuiTheme({
+  palette: {
+    // This is the default, so only included for comparison.
+    type: 'light',
+  },
+});
+
+const darkTheme = createMuiTheme({
   palette: {
-    type: 'dark', // Switching the dark mode on is a single property value change.
+    // Switching the dark mode on is a single property value change.
+    type: 'dark',
   },
 });
 
 export default function DarkTheme() {
   return (
-    <ThemeProvider theme={theme}>
-      <WithTheme />
-    </ThemeProvider>
+    <div style={{ width: '100%' }}>
+      <ThemeProvider theme={darkTheme}>
+        <Demo />
+      </ThemeProvider>
+      <ThemeProvider theme={lightTheme}>
+        <Demo />
+      </ThemeProvider>
+    </div>
   );
 }

docs/src/pages/customization/palette/DarkTheme.tsx

@@ -1,43 +1,59 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
-import { useTheme, createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+import {
+  createStyles,
+  makeStyles,
+  ThemeProvider,
+  useTheme,
+  createMuiTheme,
+  Theme,
+} from '@material-ui/core/styles';
 
-function WithTheme() {
-  const theme = useTheme();
-  const primaryText = theme.palette.text.primary;
-  const primaryColor = theme.palette.primary.main;
-
-  const styles = {
-    primaryText: {
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      padding: theme.spacing(3),
+      textAlign: 'center',
       backgroundColor: theme.palette.background.default,
-      padding: theme.spacing(1, 2),
-      color: primaryText,
-    },
-    primaryColor: {
-      backgroundColor: primaryColor,
-      padding: theme.spacing(1, 2),
-      color: theme.palette.common.white,
+      color: theme.palette.text.primary,
     },
-  };
+  }),
+);
+
+function Demo() {
+  const classes = useStyles();
+  const theme = useTheme();
 
   return (
-    <div style={{ width: 300 }}>
-      <Typography style={styles.primaryColor}>{`Primary color ${primaryColor}`}</Typography>
-      <Typography style={styles.primaryText}>{`Primary text ${primaryText}`}</Typography>
+    <div className={classes.root}>
+      <Typography>{`${theme.palette.type} theme`}</Typography>
     </div>
   );
 }
 
-const theme = createMuiTheme({
+const lightTheme = createMuiTheme({
   palette: {
-    type: 'dark', // Switching the dark mode on is a single property value change.
+    // 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 (
-    <ThemeProvider theme={theme}>
-      <WithTheme />
-    </ThemeProvider>
+    <div style={{ width: '100%' }}>
+      <ThemeProvider theme={darkTheme}>
+        <Demo />
+      </ThemeProvider>
+      <ThemeProvider theme={lightTheme}>
+        <Demo />
+      </ThemeProvider>
+    </div>
   );
 }

docs/src/pages/customization/palette/Intentions.js

@@ -0,0 +1,94 @@
+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';
+
+const useStyles = makeStyles(theme => ({
+  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 = useTheme();
+
+  const item = (color, name) => (
+    <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>
+  );
+}