Skip to content

Commit a1082ee

Browse files
r3dm1keoliviertassinari
r3dm1ke
authored and
oliviertassinari
committed
[theme] Add warning, success and info colors to the palette (#18820)
1 parent 0b2196c commit a1082ee

File tree

18 files changed

+544
-562
lines changed

18 files changed

+544
-562
lines changed

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -45,15 +45,15 @@ import HUE from '@material-ui/core/colors/HUE';
4545
const color = HUE[SHADE];
4646
```
4747

48-
{{"demo": "pages/customization/color/Color.js", "hideHeader": true}}
48+
{{"demo": "pages/customization/color/Color.js", "hideHeader": true, "bg": "inline"}}
4949

5050
## Color tool
5151

5252
To test a [material.io/design/color](https://material.io/design/color/) color scheme with the Material-UI
5353
documentation, simply select colors using the palette and sliders below.
5454
Alternatively, you can enter hex values in the Primary and Secondary text fields.
5555

56-
{{"demo": "pages/customization/color/ColorTool.js", "hideHeader": true}}
56+
{{"demo": "pages/customization/color/ColorTool.js", "hideHeader": true, "bg": true}}
5757

5858
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)):
5959

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

+9-10
Original file line numberDiff line numberDiff line change
@@ -228,11 +228,14 @@ function DefaultTheme(props) {
228228
}
229229

230230
setExpandPaths(
231-
expandPath.split('.').reduce((acc, path) => {
232-
const last = acc.length > 0 ? `${acc[acc.length - 1]}.` : '';
233-
acc.push(last + path);
234-
return acc;
235-
}, []),
231+
expandPath
232+
.replace('$.', '')
233+
.split('.')
234+
.reduce((acc, path) => {
235+
const last = acc.length > 0 ? `${acc[acc.length - 1]}.` : '';
236+
acc.push(last + path);
237+
return acc;
238+
}, []),
236239
);
237240
}, []);
238241

@@ -256,11 +259,7 @@ function DefaultTheme(props) {
256259
checked={checked}
257260
onChange={(event, newChecked) => {
258261
setChecked(newChecked);
259-
if (newChecked) {
260-
setExpandPaths(allNodeIds);
261-
} else {
262-
setExpandPaths([]);
263-
}
262+
setExpandPaths(newChecked ? allNodeIds : []);
264263
}}
265264
/>
266265
}

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

+32-25
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,50 @@
11
import React from 'react';
22
import Typography from '@material-ui/core/Typography';
3-
import { useTheme, createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
3+
import { makeStyles, ThemeProvider, useTheme, createMuiTheme } from '@material-ui/core/styles';
44

5-
function WithTheme() {
6-
const theme = useTheme();
7-
const primaryText = theme.palette.text.primary;
8-
const primaryColor = theme.palette.primary.main;
5+
const useStyles = makeStyles(theme => ({
6+
root: {
7+
padding: theme.spacing(3),
8+
textAlign: 'center',
9+
backgroundColor: theme.palette.background.default,
10+
color: theme.palette.text.primary,
11+
},
12+
}));
913

10-
const styles = {
11-
primaryText: {
12-
backgroundColor: theme.palette.background.default,
13-
padding: theme.spacing(1, 2),
14-
color: primaryText,
15-
},
16-
primaryColor: {
17-
backgroundColor: primaryColor,
18-
padding: theme.spacing(1, 2),
19-
color: theme.palette.common.white,
20-
},
21-
};
14+
function Demo() {
15+
const classes = useStyles();
16+
const theme = useTheme();
2217

2318
return (
24-
<div style={{ width: 300 }}>
25-
<Typography style={styles.primaryColor}>{`Primary color ${primaryColor}`}</Typography>
26-
<Typography style={styles.primaryText}>{`Primary text ${primaryText}`}</Typography>
19+
<div className={classes.root}>
20+
<Typography>{`${theme.palette.type} theme`}</Typography>
2721
</div>
2822
);
2923
}
3024

31-
const theme = createMuiTheme({
25+
const lightTheme = createMuiTheme({
26+
palette: {
27+
// This is the default, so only included for comparison.
28+
type: 'light',
29+
},
30+
});
31+
32+
const darkTheme = createMuiTheme({
3233
palette: {
33-
type: 'dark', // Switching the dark mode on is a single property value change.
34+
// Switching the dark mode on is a single property value change.
35+
type: 'dark',
3436
},
3537
});
3638

3739
export default function DarkTheme() {
3840
return (
39-
<ThemeProvider theme={theme}>
40-
<WithTheme />
41-
</ThemeProvider>
41+
<div style={{ width: '100%' }}>
42+
<ThemeProvider theme={darkTheme}>
43+
<Demo />
44+
</ThemeProvider>
45+
<ThemeProvider theme={lightTheme}>
46+
<Demo />
47+
</ThemeProvider>
48+
</div>
4249
);
4350
}

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

+40-24
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,59 @@
11
import React from 'react';
22
import Typography from '@material-ui/core/Typography';
3-
import { useTheme, createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
3+
import {
4+
createStyles,
5+
makeStyles,
6+
ThemeProvider,
7+
useTheme,
8+
createMuiTheme,
9+
Theme,
10+
} from '@material-ui/core/styles';
411

5-
function WithTheme() {
6-
const theme = useTheme();
7-
const primaryText = theme.palette.text.primary;
8-
const primaryColor = theme.palette.primary.main;
9-
10-
const styles = {
11-
primaryText: {
12+
const useStyles = makeStyles((theme: Theme) =>
13+
createStyles({
14+
root: {
15+
padding: theme.spacing(3),
16+
textAlign: 'center',
1217
backgroundColor: theme.palette.background.default,
13-
padding: theme.spacing(1, 2),
14-
color: primaryText,
15-
},
16-
primaryColor: {
17-
backgroundColor: primaryColor,
18-
padding: theme.spacing(1, 2),
19-
color: theme.palette.common.white,
18+
color: theme.palette.text.primary,
2019
},
21-
};
20+
}),
21+
);
22+
23+
function Demo() {
24+
const classes = useStyles();
25+
const theme = useTheme();
2226

2327
return (
24-
<div style={{ width: 300 }}>
25-
<Typography style={styles.primaryColor}>{`Primary color ${primaryColor}`}</Typography>
26-
<Typography style={styles.primaryText}>{`Primary text ${primaryText}`}</Typography>
28+
<div className={classes.root}>
29+
<Typography>{`${theme.palette.type} theme`}</Typography>
2730
</div>
2831
);
2932
}
3033

31-
const theme = createMuiTheme({
34+
const lightTheme = createMuiTheme({
3235
palette: {
33-
type: 'dark', // Switching the dark mode on is a single property value change.
36+
// This is the default, so only included for comparison.
37+
type: 'light',
38+
},
39+
});
40+
41+
const darkTheme = createMuiTheme({
42+
palette: {
43+
// Switching the dark mode on is a single property value change.
44+
type: 'dark',
3445
},
3546
});
3647

3748
export default function DarkTheme() {
3849
return (
39-
<ThemeProvider theme={theme}>
40-
<WithTheme />
41-
</ThemeProvider>
50+
<div style={{ width: '100%' }}>
51+
<ThemeProvider theme={darkTheme}>
52+
<Demo />
53+
</ThemeProvider>
54+
<ThemeProvider theme={lightTheme}>
55+
<Demo />
56+
</ThemeProvider>
57+
</div>
4258
);
4359
}

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

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import React from 'react';
2+
import Grid from '@material-ui/core/Grid';
3+
import Typography from '@material-ui/core/Typography';
4+
import { makeStyles, useTheme, rgbToHex } from '@material-ui/core/styles';
5+
6+
const useStyles = makeStyles(theme => ({
7+
root: {
8+
width: '100%',
9+
maxWidth: 600,
10+
},
11+
group: {
12+
marginTop: theme.spacing(3),
13+
},
14+
color: {
15+
display: 'flex',
16+
alignItems: 'center',
17+
'& div:first-of-type': {
18+
width: theme.spacing(6),
19+
height: theme.spacing(6),
20+
marginRight: theme.spacing(1),
21+
borderRadius: theme.shape.borderRadius,
22+
},
23+
},
24+
}));
25+
26+
export default function Intentions() {
27+
const classes = useStyles();
28+
const theme = useTheme();
29+
30+
const item = (color, name) => (
31+
<Grid item xs={6} sm={4} className={classes.color}>
32+
<div style={{ backgroundColor: color }} />
33+
<div>
34+
<Typography variant="body2">{name}</Typography>
35+
<Typography variant="body2" color="textSecondary">
36+
{rgbToHex(color)}
37+
</Typography>
38+
</div>
39+
</Grid>
40+
);
41+
42+
return (
43+
<div className={classes.root}>
44+
<Typography gutterBottom className={classes.group}>
45+
Primary
46+
</Typography>
47+
<Grid container spacing={1}>
48+
{item(theme.palette.primary.light, 'light')}
49+
{item(theme.palette.primary.main, 'main')}
50+
{item(theme.palette.primary.dark, 'dark')}
51+
</Grid>
52+
<Typography gutterBottom className={classes.group}>
53+
Secondary
54+
</Typography>
55+
<Grid container spacing={1}>
56+
{item(theme.palette.secondary.light, 'light')}
57+
{item(theme.palette.secondary.main, 'main')}
58+
{item(theme.palette.secondary.dark, 'dark')}
59+
</Grid>
60+
<Typography gutterBottom className={classes.group}>
61+
Error
62+
</Typography>
63+
<Grid container spacing={1}>
64+
{item(theme.palette.error.light, 'light')}
65+
{item(theme.palette.error.main, 'main')}
66+
{item(theme.palette.error.dark, 'dark')}
67+
</Grid>
68+
<Typography gutterBottom className={classes.group}>
69+
Warning
70+
</Typography>
71+
<Grid container spacing={1}>
72+
{item(theme.palette.warning.light, 'light')}
73+
{item(theme.palette.warning.main, 'main')}
74+
{item(theme.palette.warning.dark, 'dark')}
75+
</Grid>
76+
<Typography gutterBottom className={classes.group}>
77+
Info
78+
</Typography>
79+
<Grid container spacing={1}>
80+
{item(theme.palette.info.light, 'light')}
81+
{item(theme.palette.info.main, 'main')}
82+
{item(theme.palette.info.dark, 'dark')}
83+
</Grid>
84+
<Typography gutterBottom className={classes.group}>
85+
Success
86+
</Typography>
87+
<Grid container spacing={1}>
88+
{item(theme.palette.success.light, 'light')}
89+
{item(theme.palette.success.main, 'main')}
90+
{item(theme.palette.success.dark, 'dark')}
91+
</Grid>
92+
</div>
93+
);
94+
}

0 commit comments

Comments
 (0)