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

Docs/css variables material UI #32

Closed
wants to merge 3 commits into from
Closed

Docs/css variables material UI #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2dc4e2a
scafolded new pages
mnajdova Mar 18, 2022
05a853c
wip
mnajdova Mar 28, 2022
25a11a8
inital docs
mnajdova Mar 29, 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
0 ...sname-generator/classname-generator-pt.md → ...sname-generator/classname-generator-pt.md
View file
Open in desktop
File renamed without changes.
0 ...sname-generator/classname-generator-zh.md → ...sname-generator/classname-generator-zh.md
View file
Open in desktop
File renamed without changes.
0 ...lassname-generator/classname-generator.md → ...lassname-generator/classname-generator.md
View file
Open in desktop
File renamed without changes.
33 changes: 33 additions & 0 deletions docs/data/material/experimental-api/css-variables/CssVariablesCustomization.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import * as React from 'react';
import Button from '@mui/material/Button';
import { colorChannel } from '@mui/system';
import {
Experimental_CssVarsProvider as CssVarsProvider,
styled,
Theme as MuiTheme,
} from '@mui/material/styles';

// Custom button using custom styles with CSS variables
const CustomButton = styled(Button)(({ theme }) => ({
backgroundColor: theme.vars.palette.success.dark,
color: theme.vars.palette.common.white,
'&:hover': {
backgroundColor: `rgba(${theme.vars.palette.success.mainChannel} / 0.95)`,
},
}));

// Custom button using CSS variables
const CssVarsCustomButton = styled(Button)(({ theme }) => ({
'--md-palette-primary-main': '#FF0000',
'--md-palette-primary-dark': '#8B0000',
'--md-palette-primary-mainChannel': colorChannel('#FF0000'), // necessary for calculating the alpha values
}));

export default function App() {
return (
<CssVarsProvider>
<CustomButton sx={{ mr: 1 }}>Custom styles</CustomButton>
<CssVarsCustomButton variant="contained">CSS variables</CssVarsCustomButton>
</CssVarsProvider>
);
}
118 changes: 118 additions & 0 deletions docs/data/material/experimental-api/css-variables/CssVarsCustomTheme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
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 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" sx={{ p: 1 }}>
<Box sx={{ py: 2, 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>
</Box>
</CssVarsProvider>
);
}
118 changes: 118 additions & 0 deletions docs/data/material/experimental-api/css-variables/CssVarsCustomTheme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
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 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" sx={{ p: 1 }}>
<Box sx={{ py: 2, 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>
</Box>
</CssVarsProvider>
);
}
30 changes: 30 additions & 0 deletions docs/data/material/experimental-api/css-variables/CssVarsProviderBasic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import * as React from 'react';
import Typography from '@mui/material/Typography';
import {
Experimental_CssVarsProvider as CssVarsProvider,
useTheme,
} from '@mui/material/styles';

function ThemeConsumer() {
const theme = useTheme();
return (
<div>
<Typography>Regular theme token: </Typography>
<code style={{ color: theme.palette.primary.main }}>
theme.palette.primary.main = {theme.palette.primary.main}
</code>
<Typography sx={{ mt: 2 }}>Theme CSS variable token: </Typography>
<code style={{ color: theme.vars.palette.primary.main }}>
theme.vars.palette.primary.main = {theme.vars.palette.primary.main}
</code>
</div>
);
}

export default function App() {
return (
<CssVarsProvider>
<ThemeConsumer />
</CssVarsProvider>
);
}
38 changes: 38 additions & 0 deletions docs/data/material/experimental-api/css-variables/CssVarsProviderBasic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import * as React from 'react';
import Typography from '@mui/material/Typography';
import {
Experimental_CssVarsProvider as CssVarsProvider,
useTheme,
Theme as MuiTheme,
} from '@mui/material/styles';

interface Theme extends MuiTheme {
vars: Omit<
MuiTheme,
'typography' | 'mixins' | 'breakpoints' | 'direction' | 'transitions'
>;
}

function ThemeConsumer() {
const theme = useTheme() as Theme;
return (
<div>
<Typography>Regular theme token: </Typography>
<code style={{ color: theme.palette.primary.main }}>
theme.palette.primary.main = {theme.palette.primary.main}
</code>
<Typography sx={{ mt: 2 }}>Theme CSS variable token: </Typography>
<code style={{ color: theme.vars.palette.primary.main }}>
theme.vars.palette.primary.main = {theme.vars.palette.primary.main}
</code>
</div>
);
}

export default function App() {
return (
<CssVarsProvider>
<ThemeConsumer />
</CssVarsProvider>
);
}
3 changes: 3 additions & 0 deletions docs/data/material/experimental-api/css-variables/CssVarsProviderBasic.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<CssVarsProvider>
<ThemeConsumer />
</CssVarsProvider>
Loading