Skip to content

Commit 83bfdd7

Browse files
siriwatknpsiriwatknp
authored
[material-ui] Replace JS color manipulation with native color syntax (#43942)
1 parent 80d32a2 commit 83bfdd7

File tree

79 files changed

+2576
-346
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

79 files changed

+2576
-346
lines changed

‎docs/data/material/customization/css-theme-variables/AliasColorVariables.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import * as React from 'react';
2+
import { ThemeProvider, createTheme } from '@mui/material/styles';
3+
import GlobalStyles from '@mui/material/GlobalStyles';
4+
import Box from '@mui/material/Box';
5+
import Button from '@mui/material/Button';
6+
7+
const theme = createTheme({
8+
cssVariables: {
9+
nativeColor: true,
10+
cssVarPrefix: 'alias', // This is for the demo only, you don't need to set this to use the feature
11+
},
12+
palette: {
13+
primary: {
14+
main: 'var(--colors-brand-primary)',
15+
},
16+
},
17+
});
18+
19+
export default function AliasColorVariables() {
20+
return (
21+
<div>
22+
{/* This is just a demo to replicate the global CSS file */}
23+
<GlobalStyles
24+
styles={{
25+
':root': {
26+
'--colors-brand-primary': 'oklch(0.85 0.2 83.89)',
27+
},
28+
}}
29+
/>
30+
{/* Your App */}
31+
<ThemeProvider theme={theme}>
32+
<Box sx={{ p: 2 }}>
33+
<Button variant="contained">Branded Button</Button>
34+
</Box>
35+
</ThemeProvider>
36+
</div>
37+
);
38+
}

‎docs/data/material/customization/css-theme-variables/AliasColorVariables.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import * as React from 'react';
2+
import { ThemeProvider, createTheme } from '@mui/material/styles';
3+
import GlobalStyles from '@mui/material/GlobalStyles';
4+
import Box from '@mui/material/Box';
5+
import Button from '@mui/material/Button';
6+
7+
const theme = createTheme({
8+
cssVariables: {
9+
nativeColor: true,
10+
cssVarPrefix: 'alias', // This is for the demo only, you don't need to set this to use the feature
11+
},
12+
palette: {
13+
primary: {
14+
main: 'var(--colors-brand-primary)',
15+
},
16+
},
17+
});
18+
19+
export default function AliasColorVariables() {
20+
return (
21+
<div>
22+
{/* This is just a demo to replicate the global CSS file */}
23+
<GlobalStyles
24+
styles={{
25+
':root': {
26+
'--colors-brand-primary': 'oklch(0.85 0.2 83.89)',
27+
},
28+
}}
29+
/>
30+
31+
{/* Your App */}
32+
<ThemeProvider theme={theme}>
33+
<Box sx={{ p: 2 }}>
34+
<Button variant="contained">Branded Button</Button>
35+
</Box>
36+
</ThemeProvider>
37+
</div>
38+
);
39+
}

‎docs/data/material/customization/css-theme-variables/AliasColorVariables.tsx.preview

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{/* This is just a demo to replicate the global CSS file */}
2+
<GlobalStyles
3+
styles={{
4+
':root': {
5+
'--colors-brand-primary': 'oklch(0.85 0.2 83.89)',
6+
},
7+
}}
8+
/>
9+
10+
{/* Your App */}
11+
<ThemeProvider theme={theme}>
12+
<Box sx={{ p: 2 }}>
13+
<Button variant="contained">Branded Button</Button>
14+
</Box>
15+
</ThemeProvider>

‎docs/data/material/customization/css-theme-variables/ContrastTextDemo.js

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import * as React from 'react';
2+
import { ThemeProvider, createTheme } from '@mui/material/styles';
3+
import Box from '@mui/material/Box';
4+
import Typography from '@mui/material/Typography';
5+
import Slider from '@mui/material/Slider';
6+
7+
const theme = createTheme({
8+
cssVariables: {
9+
nativeColor: true,
10+
cssVarPrefix: 'contrast', // This is for the demo only, you don't need to set this to use the feature
11+
},
12+
});
13+
14+
export default function ContrastTextDemo() {
15+
const [lightness, setLightness] = React.useState(0.65);
16+
const [chroma, setChroma] = React.useState(0.3);
17+
const [hue, setHue] = React.useState(29);
18+
19+
// Create OKLCH color from slider values
20+
const backgroundColor = `oklch(${lightness} ${chroma} ${hue})`;
21+
22+
// Get contrast text using theme function
23+
const contrastText = theme.palette.getContrastText(backgroundColor);
24+
25+
return (
26+
<ThemeProvider theme={theme}>
27+
<Box
28+
sx={{
29+
p: 2,
30+
display: 'flex',
31+
gap: 5,
32+
alignItems: 'flex-start',
33+
justifyContent: 'center',
34+
width: '100%',
35+
flexWrap: 'wrap',
36+
}}
37+
>
38+
{/* Live Preview Square */}
39+
<Box
40+
sx={{
41+
mt: 2,
42+
width: 200,
43+
height: 200,
44+
bgcolor: backgroundColor,
45+
color: contrastText,
46+
display: 'flex',
47+
flexDirection: 'column',
48+
justifyContent: 'center',
49+
alignItems: 'center',
50+
textAlign: 'center',
51+
borderRadius: 1,
52+
border: '1px solid',
53+
borderColor: 'divider',
54+
flexShrink: 0,
55+
}}
56+
>
57+
<Typography variant="body2" fontFamily="monospace">
58+
{backgroundColor}
59+
</Typography>
60+
</Box>
61+
{/* Sliders */}
62+
<Box sx={{ flex: '1 1 300px', maxWidth: 400 }}>
63+
<Typography variant="h6" gutterBottom>
64+
OKLCH
65+
</Typography>
66+
<div>
67+
<Typography variant="body2" gutterBottom>
68+
Lightness: {lightness}
69+
</Typography>
70+
<Slider
71+
value={lightness}
72+
onChange={(_, value) => setLightness(value)}
73+
min={0}
74+
max={1}
75+
step={0.01}
76+
valueLabelDisplay="auto"
77+
/>
78+
</div>
79+
80+
<div>
81+
<Typography variant="body2" gutterBottom>
82+
Chroma: {chroma}
83+
</Typography>
84+
<Slider
85+
value={chroma}
86+
onChange={(_, value) => setChroma(value)}
87+
min={0}
88+
max={0.4}
89+
step={0.01}
90+
valueLabelDisplay="auto"
91+
/>
92+
</div>
93+
94+
<div>
95+
<Typography variant="body2" gutterBottom>
96+
Hue: {hue}°
97+
</Typography>
98+
<Slider
99+
value={hue}
100+
onChange={(_, value) => setHue(value)}
101+
min={0}
102+
max={360}
103+
step={1}
104+
valueLabelDisplay="auto"
105+
/>
106+
</div>
107+
</Box>
108+
<Box
109+
sx={{
110+
p: 2,
111+
display: 'flex',
112+
gap: 3,
113+
}}
114+
>
115+
<Typography variant="body2" fontFamily="monospace">
116+
<b>Text color:</b> {contrastText}
117+
</Typography>
118+
</Box>
119+
</Box>
120+
</ThemeProvider>
121+
);
122+
}

‎docs/data/material/customization/css-theme-variables/ContrastTextDemo.tsx

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import * as React from 'react';
2+
import { ThemeProvider, createTheme } from '@mui/material/styles';
3+
import Box from '@mui/material/Box';
4+
import Typography from '@mui/material/Typography';
5+
import Slider from '@mui/material/Slider';
6+
7+
const theme = createTheme({
8+
cssVariables: {
9+
nativeColor: true,
10+
cssVarPrefix: 'contrast', // This is for the demo only, you don't need to set this to use the feature
11+
},
12+
});
13+
14+
export default function ContrastTextDemo() {
15+
const [lightness, setLightness] = React.useState(0.65);
16+
const [chroma, setChroma] = React.useState(0.3);
17+
const [hue, setHue] = React.useState(29);
18+
19+
// Create OKLCH color from slider values
20+
const backgroundColor = `oklch(${lightness} ${chroma} ${hue})`;
21+
22+
// Get contrast text using theme function
23+
const contrastText = theme.palette.getContrastText(backgroundColor);
24+
25+
return (
26+
<ThemeProvider theme={theme}>
27+
<Box
28+
sx={{
29+
p: 2,
30+
display: 'flex',
31+
gap: 5,
32+
alignItems: 'flex-start',
33+
justifyContent: 'center',
34+
width: '100%',
35+
flexWrap: 'wrap',
36+
}}
37+
>
38+
{/* Live Preview Square */}
39+
<Box
40+
sx={{
41+
mt: 2,
42+
width: 200,
43+
height: 200,
44+
bgcolor: backgroundColor,
45+
color: contrastText,
46+
display: 'flex',
47+
flexDirection: 'column',
48+
justifyContent: 'center',
49+
alignItems: 'center',
50+
textAlign: 'center',
51+
borderRadius: 1,
52+
border: '1px solid',
53+
borderColor: 'divider',
54+
flexShrink: 0,
55+
}}
56+
>
57+
<Typography variant="body2" fontFamily="monospace">
58+
{backgroundColor}
59+
</Typography>
60+
</Box>
61+
{/* Sliders */}
62+
<Box sx={{ flex: '1 1 300px', maxWidth: 400 }}>
63+
<Typography variant="h6" gutterBottom>
64+
OKLCH
65+
</Typography>
66+
<div>
67+
<Typography variant="body2" gutterBottom>
68+
Lightness: {lightness}
69+
</Typography>
70+
<Slider
71+
value={lightness}
72+
onChange={(_, value) => setLightness(value)}
73+
min={0}
74+
max={1}
75+
step={0.01}
76+
valueLabelDisplay="auto"
77+
/>
78+
</div>
79+
80+
<div>
81+
<Typography variant="body2" gutterBottom>
82+
Chroma: {chroma}
83+
</Typography>
84+
<Slider
85+
value={chroma}
86+
onChange={(_, value) => setChroma(value)}
87+
min={0}
88+
max={0.4}
89+
step={0.01}
90+
valueLabelDisplay="auto"
91+
/>
92+
</div>
93+
94+
<div>
95+
<Typography variant="body2" gutterBottom>
96+
Hue: {hue}°
97+
</Typography>
98+
<Slider
99+
value={hue}
100+
onChange={(_, value) => setHue(value)}
101+
min={0}
102+
max={360}
103+
step={1}
104+
valueLabelDisplay="auto"
105+
/>
106+
</div>
107+
</Box>
108+
<Box
109+
sx={{
110+
p: 2,
111+
display: 'flex',
112+
gap: 3,
113+
}}
114+
>
115+
<Typography variant="body2" fontFamily="monospace">
116+
<b>Text color:</b> {contrastText}
117+
</Typography>
118+
</Box>
119+
</Box>
120+
</ThemeProvider>
121+
);
122+
}

‎docs/data/material/customization/css-theme-variables/CustomColorSpace.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import * as React from 'react';
2+
import { ThemeProvider, createTheme } from '@mui/material/styles';
3+
import Card from '@mui/material/Card';
4+
import CardContent from '@mui/material/CardContent';
5+
import CardActions from '@mui/material/CardActions';
6+
import Alert from '@mui/material/Alert';
7+
import Button from '@mui/material/Button';
8+
9+
const theme = createTheme({
10+
cssVariables: {
11+
nativeColor: true,
12+
cssVarPrefix: 'colorSpace', // This is for the demo only, you don't need to set this to use the feature
13+
},
14+
palette: {
15+
primary: {
16+
main: 'oklch(0.65 0.3 28.95)',
17+
},
18+
warning: {
19+
main: 'oklch(0.72 0.24 44.32)',
20+
},
21+
},
22+
});
23+
24+
export default function CustomColorSpace() {
25+
return (
26+
<ThemeProvider theme={theme}>
27+
<Card>
28+
<CardContent>
29+
<Alert severity="info" color="warning">
30+
This theme uses the <code>oklch</code> color space.
31+
</Alert>
32+
</CardContent>
33+
<CardActions sx={{ justifyContent: 'flex-end' }}>
34+
<Button variant="contained" color="primary">
35+
Submit
36+
</Button>
37+
<Button variant="outlined" color="primary">
38+
Cancel
39+
</Button>
40+
</CardActions>
41+
</Card>
42+
</ThemeProvider>
43+
);
44+
}

0 commit comments

Comments
 (0)