diff --git a/docs/pages/experiments/material-ui/alert.tsx b/docs/pages/experiments/material-ui/alert.tsx new file mode 100644 index 00000000000000..58361b533a62af --- /dev/null +++ b/docs/pages/experiments/material-ui/alert.tsx @@ -0,0 +1,98 @@ +import * as React from 'react'; +import { + Experimental_CssVarsProvider as CssVarsProvider, + useColorScheme, +} from '@mui/material/styles'; +import CssBaseline from '@mui/material/CssBaseline'; +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import Container from '@mui/material/Container'; +import Moon from '@mui/icons-material/DarkMode'; +import Sun from '@mui/icons-material/LightMode'; +import { Alert } from '@mui/material'; + +const ColorSchemePicker = () => { + const { mode, setMode } = useColorScheme(); + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + if (!mounted) { + return null; + } + + return ( + + ); +}; + +export default function CssVarsTemplate() { + return ( + + + + + + + div': { + placeSelf: 'center', + }, + }} + > + + This is an error alert — check it out! + + + This is a warning alert — check it out! + + + This is an info alert — check it out! + + + This is a success alert — check it out! + + + This is an error alert — check it out! + + + This is a warning alert — check it out! + + + This is an info alert — check it out! + + + This is a success alert — check it out! + + + This is an error alert — check it out! + + + This is a warning alert — check it out! + + + This is an info alert — check it out! + + + This is a success alert — check it out! + + + + + ); +} diff --git a/packages/mui-material/src/Alert/Alert.js b/packages/mui-material/src/Alert/Alert.js index 4242c175e14e75..5cfcd0492e59e0 100644 --- a/packages/mui-material/src/Alert/Alert.js +++ b/packages/mui-material/src/Alert/Alert.js @@ -52,30 +52,55 @@ const AlertRoot = styled(Paper, { padding: '6px 16px', ...(color && ownerState.variant === 'standard' && { - color: getColor(theme.palette[color].light, 0.6), - backgroundColor: getBackgroundColor(theme.palette[color].light, 0.9), - [`& .${alertClasses.icon}`]: { - color: - theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light, - }, + color: theme.vars + ? theme.vars.palette.Alert[`${color}Color`] + : getColor(theme.palette[color].light, 0.6), + backgroundColor: theme.vars + ? theme.vars.palette.Alert[`${color}StandardBg`] + : getBackgroundColor(theme.palette[color].light, 0.9), + [`& .${alertClasses.icon}`]: theme.vars + ? { color: theme.vars.palette.Alert[`${color}IconColor`] } + : { + color: + theme.palette.mode === 'dark' + ? theme.palette[color].main + : theme.palette[color].light, + }, }), ...(color && ownerState.variant === 'outlined' && { - color: getColor(theme.palette[color].light, 0.6), - border: `1px solid ${theme.palette[color].light}`, - [`& .${alertClasses.icon}`]: { - color: - theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light, - }, + color: theme.vars + ? theme.vars.palette.Alert[`${color}Color`] + : getColor(theme.palette[color].light, 0.6), + border: `1px solid ${(theme.vars || theme).palette[color].light}`, + [`& .${alertClasses.icon}`]: theme.vars + ? { color: theme.vars.palette.Alert[`${color}IconColor`] } + : { + color: + theme.palette.mode === 'dark' + ? theme.palette[color].main + : theme.palette[color].light, + }, }), ...(color && ownerState.variant === 'filled' && { - color: theme.palette.getContrastText( - theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main, - ), fontWeight: theme.typography.fontWeightMedium, - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main, + ...(theme.vars + ? { + color: theme.vars.palette.Alert[`${color}FilledColor`], + backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`], + } + : { + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette[color].dark + : theme.palette[color].main, + color: theme.palette.getContrastText( + theme.palette.mode === 'dark' + ? theme.palette[color].dark + : theme.palette[color].main, + ), + }), }), }; }); diff --git a/packages/mui-material/src/styles/createPalette.d.ts b/packages/mui-material/src/styles/createPalette.d.ts index 22fe76f2500fae..ba0ffb452b5227 100644 --- a/packages/mui-material/src/styles/createPalette.d.ts +++ b/packages/mui-material/src/styles/createPalette.d.ts @@ -130,6 +130,24 @@ export interface PaletteWithChannels { getContrastText: (background: string) => string; augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor; // component tokens + Alert: { + errorColor: string; + infoColor: string; + successColor: string; + warningColor: string; + errorFilledBg: string; + infoFilledBg: string; + successFilledBg: string; + warningFilledBg: string; + errorStandardBg: string; + infoStandardBg: string; + successStandardBg: string; + warningStandardBg: string; + errorIconColor: string; + infoIconColor: string; + successIconColor: string; + warningIconColor: string; + }; AppBar: { defaultBg: string; darkBg: string; diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 3ca76fa36c4bf1..8c1f24e5276f59 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -79,6 +79,7 @@ export default function extendTheme(options = {}, ...args) { // assign component variables assignNode(palette, [ + 'Alert', 'AppBar', 'Avatar', 'Chip', @@ -95,6 +96,34 @@ export default function extendTheme(options = {}, ...args) { 'Tooltip', ]); if (key === 'light') { + setColor(palette.Alert, 'errorColor', darken(palette.error.light, 0.6)); + setColor(palette.Alert, 'infoColor', darken(palette.info.light, 0.6)); + setColor(palette.Alert, 'successColor', darken(palette.success.light, 0.6)); + setColor(palette.Alert, 'warningColor', darken(palette.warning.light, 0.6)); + setColor(palette.Alert, 'errorFilledBg', 'var(--mui-palette-error-main)'); + setColor(palette.Alert, 'infoFilledBg', 'var(--mui-palette-info-main)'); + setColor(palette.Alert, 'successFilledBg', 'var(--mui-palette-success-main)'); + setColor(palette.Alert, 'warningFilledBg', 'var(--mui-palette-warning-main)'); + setColor(palette.Alert, 'errorFilledColor', lightPalette.getContrastText(palette.error.main)); + setColor(palette.Alert, 'infoFilledColor', lightPalette.getContrastText(palette.info.main)); + setColor( + palette.Alert, + 'successFilledColor', + lightPalette.getContrastText(palette.success.main), + ); + setColor( + palette.Alert, + 'warningFilledColor', + lightPalette.getContrastText(palette.warning.main), + ); + setColor(palette.Alert, 'errorStandardBg', lighten(palette.error.light, 0.9)); + setColor(palette.Alert, 'infoStandardBg', lighten(palette.info.light, 0.9)); + setColor(palette.Alert, 'successStandardBg', lighten(palette.success.light, 0.9)); + setColor(palette.Alert, 'warningStandardBg', lighten(palette.warning.light, 0.9)); + setColor(palette.Alert, 'errorIconColor', 'var(--mui-palette-error-light)'); + setColor(palette.Alert, 'infoIconColor', 'var(--mui-palette-info-light)'); + setColor(palette.Alert, 'successIconColor', 'var(--mui-palette-success-light)'); + setColor(palette.Alert, 'warningIconColor', 'var(--mui-palette-warning-light)'); setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-100)'); setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-400)'); setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-400)'); @@ -131,6 +160,34 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.TableCell, 'border', lighten(alpha(palette.divider, 1), 0.88)); setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92)); } else { + setColor(palette.Alert, 'errorColor', lighten(palette.error.light, 0.6)); + setColor(palette.Alert, 'infoColor', lighten(palette.info.light, 0.6)); + setColor(palette.Alert, 'successColor', lighten(palette.success.light, 0.6)); + setColor(palette.Alert, 'warningColor', lighten(palette.warning.light, 0.6)); + setColor(palette.Alert, 'errorFilledBg', 'var(--mui-palette-error-dark)'); + setColor(palette.Alert, 'infoFilledBg', 'var(--mui-palette-info-dark)'); + setColor(palette.Alert, 'successFilledBg', 'var(--mui-palette-success-dark)'); + setColor(palette.Alert, 'warningFilledBg', 'var(--mui-palette-warning-dark)'); + setColor(palette.Alert, 'errorFilledColor', darkPalette.getContrastText(palette.error.dark)); + setColor(palette.Alert, 'infoFilledColor', darkPalette.getContrastText(palette.info.dark)); + setColor( + palette.Alert, + 'successFilledColor', + darkPalette.getContrastText(palette.success.dark), + ); + setColor( + palette.Alert, + 'warningFilledColor', + darkPalette.getContrastText(palette.warning.dark), + ); + setColor(palette.Alert, 'errorStandardBg', darken(palette.error.light, 0.9)); + setColor(palette.Alert, 'infoStandardBg', darken(palette.info.light, 0.9)); + setColor(palette.Alert, 'successStandardBg', darken(palette.success.light, 0.9)); + setColor(palette.Alert, 'warningStandardBg', darken(palette.warning.light, 0.9)); + setColor(palette.Alert, 'errorIconColor', 'var(--mui-palette-error-main)'); + setColor(palette.Alert, 'infoIconColor', 'var(--mui-palette-info-main)'); + setColor(palette.Alert, 'successIconColor', 'var(--mui-palette-success-main)'); + setColor(palette.Alert, 'warningIconColor', 'var(--mui-palette-warning-main)'); setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-900)'); setColor(palette.AppBar, 'darkBg', 'var(--mui-palette-background-paper)'); // specific for dark mode setColor(palette.AppBar, 'darkColor', 'var(--mui-palette-text-primary)'); // specific for dark mode