Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[CssVarsProvider] Add CssVarsProvider in @mui/material #31138

Merged
merged 56 commits into from
Mar 30, 2022
Merged

[CssVarsProvider] Add CssVarsProvider in @mui/material #31138

Show file tree
Hide file tree
Changes from 52 commits
Commits
Show all changes
56 commits
Select commit Hold shift + click to select a range
cc346b6
fix typings
siriwatknp Feb 17, 2022
2a3e286
add comment
siriwatknp Feb 17, 2022
3876b19
fix comment
siriwatknp Feb 17, 2022
2e4688e
move variants out
siriwatknp Feb 17, 2022
278b596
change to interface
siriwatknp Feb 17, 2022
9489792
remove unused type
siriwatknp Feb 17, 2022
c670070
test theme types
siriwatknp Feb 17, 2022
79ffa20
refactor types
siriwatknp Feb 17, 2022
5fff83a
wip
siriwatknp Feb 17, 2022
cd8bc7e
add spec
siriwatknp Feb 17, 2022
6e35910
revert the name to PaletteRange
siriwatknp Feb 17, 2022
95d7580
bring back vars for default them
siriwatknp Feb 17, 2022
3465d41
add spec for createCssVarsProvider
siriwatknp Feb 17, 2022
918aa37
fix lint
siriwatknp Feb 17, 2022
7614e32
revert type util change
siriwatknp Feb 17, 2022
0d6279e
fix Typography types
siriwatknp Feb 17, 2022
64eb5fe
wip
mnajdova Feb 18, 2022
ddcdd20
prettier & lint
mnajdova Feb 18, 2022
8a31db8
Merge branch 'master' into feat/css-vars-provider-mui-material
mnajdova Feb 18, 2022
3c228cd
Add custom design system page
mnajdova Feb 21, 2022
1f6b439
Fix CI
mnajdova Feb 21, 2022
27aee41
Merge branch 'master' into feat/css-vars-provider-mui-material
siriwatknp Mar 3, 2022
be88d5a
rename folder to material-ui
siriwatknp Mar 3, 2022
0ef6c17
fix double generated vars
siriwatknp Mar 3, 2022
b62d8d8
use channel token for js color manipulation
siriwatknp Mar 3, 2022
79a1b67
fix custom theme page
siriwatknp Mar 3, 2022
d8f7306
[material] Add an unstable createTheme for creating a theme using col…
mnajdova Mar 8, 2022
37bda7f
Small fixes, create the typography in the CssVarsProvider
mnajdova Mar 8, 2022
b159c33
Improve the createTheme func, fix some channels generation, fix some …
mnajdova Mar 9, 2022
3ea304e
Some fixes
mnajdova Mar 9, 2022
86d9665
Fix TS issue
mnajdova Mar 9, 2022
3e10415
Fix the types
mnajdova Mar 9, 2022
cff193f
Some TS fixes
mnajdova Mar 15, 2022
91d9995
Types improvements
mnajdova Mar 15, 2022
46f6610
Merge branch 'master' into feat/css-vars-provider-mui-material
mnajdova Mar 15, 2022
f502102
Fix build API script
mnajdova Mar 15, 2022
75fd833
More fixes
mnajdova Mar 15, 2022
7181088
Fix CI
mnajdova Mar 15, 2022
8733e6c
Try demos using CSS Variables (to be reverted)
mnajdova Mar 15, 2022
11fe020
Fix netlify build
mnajdova Mar 15, 2022
9d8e060
Some comments addressed
mnajdova Mar 16, 2022
990c453
Move colorChannel to colorManipulator
mnajdova Mar 16, 2022
d25444f
[tests] Added tests and fixed some bugs
mnajdova Mar 16, 2022
22abf9a
prettier
mnajdova Mar 16, 2022
51c95c1
Fix CssVarsProvider to use correct defaul theme
mnajdova Mar 17, 2022
6f9653a
Add the experimental prefix, remove comments
mnajdova Mar 17, 2022
661bee3
Fix lint issue
mnajdova Mar 17, 2022
71def97
Merge branch 'master' into feat/css-vars-provider-mui-material
mnajdova Mar 17, 2022
062c4f5
Fix the DemoSandboxed
mnajdova Mar 18, 2022
6e11cc7
Merge branch 'master' into feat/css-vars-provider-mui-material
mnajdova Mar 30, 2022
5b8ebdf
Revert DemoSandboxed changes
mnajdova Mar 30, 2022
78ab74c
Update docs/data/material/customization/palette/palette.md
mnajdova Mar 30, 2022
59f08e5
Update docs/data/material/customization/palette/palette.md
mnajdova Mar 30, 2022
6d05333
final fixes
mnajdova Mar 30, 2022
a2bbc33
Merge branch 'feat/css-vars-provider-mui-material' of https://github.…
mnajdova Mar 30, 2022
fe370af
Remove unused border color
mnajdova Mar 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion docs/data/material/customization/palette/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,8 @@ declare module '@mui/material/styles' {
}
```

{{"demo": "CustomColor.js"}}
<!-- Revert this. It depends on ThemeProvider -->
<!-- {{"demo": "CustomColor.js"}} -->
mnajdova marked this conversation as resolved.
Show resolved Hide resolved

## Picking colors

Expand Down
194 changes: 194 additions & 0 deletions docs/pages/experiments/material-ui/css-variables-custom-theme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
import * as React from 'react';
import {
Experimental_CssVarsProvider as CssVarsProvider,
useColorScheme,
experimental_extendTheme,
} from '@mui/material/styles';
import Moon from '@mui/icons-material/DarkMode';
import Sun from '@mui/icons-material/LightMode';
import Button from '@mui/material/Button';
import Chip from '@mui/material/Chip';
import Box from '@mui/material/Box';
import { teal, deepOrange, orange, cyan } from '@mui/material/colors';

const ColorSchemePicker = () => {
const { mode, setMode } = useColorScheme();
const [mounted, setMounted] = React.useState(false);
React.useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return null;
}

return (
<Button
variant="outlined"
onClick={() => {
if (mode === 'light') {
setMode('dark');
} else {
setMode('light');
}
}}
>
{mode === 'light' ? <Moon /> : <Sun />}
</Button>
);
};

const theme = experimental_extendTheme({
colorSchemes: {
light: {
palette: {
primary: teal,
secondary: deepOrange,
},
},
dark: {
palette: {
primary: cyan,
secondary: orange,
},
},
},
});

export default function Page() {
return (
<CssVarsProvider theme={theme}>
<Box bgcolor="background.paper">
<Box sx={{ py: 5, maxWidth: { md: 1152, xl: 1536 }, mx: 'auto' }}>
<Box sx={{ pb: 4 }}>
<ColorSchemePicker />
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color="inherit" variant="contained">
Text
</Button>
<Button color="inherit" variant="outlined">
Text
</Button>
<Button color="inherit">Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button variant="contained">Text</Button>
<Button variant="outlined">Text</Button>
<Button>Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color="secondary" variant="contained">
Text
</Button>
<Button color="secondary" variant="outlined">
Text
</Button>
<Button color="secondary">Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color="error" variant="contained">
Text
</Button>
<Button color="error" variant="outlined">
Text
</Button>
<Button color="error">Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color="info" variant="contained">
Text
</Button>
<Button color="info" variant="outlined">
Text
</Button>
<Button color="info">Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color="warning" variant="contained">
Text
</Button>
<Button color="warning" variant="outlined">
Text
</Button>
<Button color="warning">Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color="success" variant="contained">
Text
</Button>
<Button color="success" variant="outlined">
Text
</Button>
<Button color="success">Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button
sx={{
'--md-palette-primary-main': '#FF0000',
'--md-palette-primary-mainChannel': '255 0 0',
'--md-palette-primary-dark': '#8b0000',
}}
variant="contained"
>
Text
</Button>
<Button
sx={{
'--md-palette-primary-main': '#FF0000',
'--md-palette-primary-mainChannel': '255 0 0',
}}
variant="outlined"
>
Text
</Button>
<Button
sx={{
'--md-palette-primary-main': '#FF0000',
'--md-palette-primary-mainChannel': '255 0 0',
}}
>
Text
</Button>
</Box>
</Box>
<Box sx={{ py: 5, maxWidth: { md: 1152, xl: 1536 }, mx: 'auto' }}>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Chip variant="filled" label="Text" />
<Chip variant="outlined" label="Text" />
<Chip variant="notification" label="Text" />
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Chip color="primary" variant="filled" label="Text" />
<Chip color="primary" variant="outlined" label="Text" />
<Chip color="primary" variant="notification" label="Text" />
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Chip color="secondary" variant="filled" label="Text" />
<Chip color="secondary" variant="outlined" label="Text" />
<Chip color="secondary" variant="notification" label="Text" />
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Chip color="error" variant="filled" label="Text" />
<Chip color="error" variant="outlined" label="Text" />
<Chip color="error" variant="notification" label="Text" />
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Chip color="info" variant="filled" label="Text" />
<Chip color="info" variant="outlined" label="Text" />
<Chip color="info" variant="notification" label="Text" />
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Chip color="warning" variant="filled" label="Text" />
<Chip color="warning" variant="outlined" label="Text" />
<Chip color="warning" variant="notification" label="Text" />
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Chip color="success" variant="filled" label="Text" />
<Chip color="success" variant="outlined" label="Text" />
<Chip color="success" variant="notification" label="Text" />
</Box>
</Box>
</Box>
</CssVarsProvider>
);
}
97 changes: 97 additions & 0 deletions docs/pages/experiments/material-ui/css-variables.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import * as React from 'react';
import {
Experimental_CssVarsProvider as CssVarsProvider,
useColorScheme,
} from '@mui/material/styles';
import Moon from '@mui/icons-material/DarkMode';
import Sun from '@mui/icons-material/LightMode';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';

const ColorSchemePicker = () => {
const { mode, setMode } = useColorScheme();
const [mounted, setMounted] = React.useState(false);
React.useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return null;
}

return (
<Button
variant="outlined"
onClick={() => {
if (mode === 'light') {
setMode('dark');
} else {
setMode('light');
}
}}
>
{mode === 'light' ? <Moon /> : <Sun />}
</Button>
);
};

export default function Page() {
return (
<CssVarsProvider>
<Box sx={{ py: 5, maxWidth: { md: 1152, xl: 1536 }, mx: 'auto' }}>
<Box sx={{ pb: 4 }}>
<ColorSchemePicker />
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button variant="contained">Text</Button>
<Button variant="outlined">Text</Button>
<Button>Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color="secondary" variant="contained">
Text
</Button>
<Button color="secondary" variant="outlined">
Text
</Button>
<Button color="secondary">Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color="error" variant="contained">
Text
</Button>
<Button color="error" variant="outlined">
Text
</Button>
<Button color="error">Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color="info" variant="contained">
Text
</Button>
<Button color="info" variant="outlined">
Text
</Button>
<Button color="info">Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color="warning" variant="contained">
Text
</Button>
<Button color="warning" variant="outlined">
Text
</Button>
<Button color="warning">Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color="success" variant="contained">
Text
</Button>
<Button color="success" variant="outlined">
Text
</Button>
<Button color="success">Text</Button>
</Box>
</Box>
</CssVarsProvider>
);
}
6 changes: 5 additions & 1 deletion docs/scripts/buildApi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,11 @@ async function run(argv: CommandOptions) {
return directories.concat(findComponents(componentDirectory));
}, [] as ReadonlyArray<{ filename: string }>)
.filter((component) => {
if (component.filename.includes('ThemeProvider')) {
if (
component.filename.includes('ThemeProvider') ||
(component.filename.includes('mui-material') &&
component.filename.includes('CssVarsProvider'))
) {
return false;
}
if (grep === null) {
Expand Down
Loading