diff --git a/docs/data/material/experimental-api/css-variables/CssVariablesCustomization.js b/docs/data/material/experimental-api/css-variables/CssVariablesCustomization.js index a66e39a6062202..35075805100766 100644 --- a/docs/data/material/experimental-api/css-variables/CssVariablesCustomization.js +++ b/docs/data/material/experimental-api/css-variables/CssVariablesCustomization.js @@ -17,9 +17,9 @@ const CustomButton = styled(Button)(({ theme }) => ({ // Custom button using CSS variables const CssVarsCustomButton = styled(Button)({ - '--md-palette-primary-main': '#FF0000', - '--md-palette-primary-dark': '#8B0000', - '--md-palette-primary-mainChannel': colorChannel('#FF0000'), // necessary for calculating the alpha values + '--mui-palette-primary-main': '#FF0000', + '--mui-palette-primary-dark': '#8B0000', + '--mui-palette-primary-mainChannel': colorChannel('#FF0000'), // necessary for calculating the alpha values }); const useEnhancedEffect = diff --git a/docs/pages/experiments/material-ui/app-bar.tsx b/docs/pages/experiments/material-ui/app-bar.tsx new file mode 100644 index 00000000000000..428bb8e74872b9 --- /dev/null +++ b/docs/pages/experiments/material-ui/app-bar.tsx @@ -0,0 +1,118 @@ +import * as React from 'react'; +import { + Experimental_CssVarsProvider as CssVarsProvider, + useColorScheme, +} from '@mui/material/styles'; +import CssBaseline from '@mui/material/CssBaseline'; +import AppBar from '@mui/material/AppBar'; +import Box from '@mui/material/Box'; +import Toolbar from '@mui/material/Toolbar'; +import Typography from '@mui/material/Typography'; +import Button from '@mui/material/Button'; +import IconButton from '@mui/material/IconButton'; +import MenuIcon from '@mui/icons-material/Menu'; +import Container from '@mui/material/Container'; +import Moon from '@mui/icons-material/DarkMode'; +import Sun from '@mui/icons-material/LightMode'; + +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', + }, + }} + > + + + + + + + News + + + + + + + + + + + News + + + + + + + + + + + News + + + + + + + + ); +} diff --git a/docs/pages/experiments/material-ui/chip.tsx b/docs/pages/experiments/material-ui/chip.tsx new file mode 100644 index 00000000000000..6b766aac733acd --- /dev/null +++ b/docs/pages/experiments/material-ui/chip.tsx @@ -0,0 +1,78 @@ +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 Chip from '@mui/material/Chip'; +import Stack from '@mui/material/Stack'; + +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', + }, + }} + > + + + + + + + + + + + {}} /> + {}} /> + + + + + + ); +} diff --git a/docs/pages/experiments/material-ui/css-variables-custom-theme.tsx b/docs/pages/experiments/material-ui/css-variables-custom-theme.tsx index 473fce9917b517..165c198fb21d07 100644 --- a/docs/pages/experiments/material-ui/css-variables-custom-theme.tsx +++ b/docs/pages/experiments/material-ui/css-variables-custom-theme.tsx @@ -15,9 +15,9 @@ import { teal, deepOrange, orange, cyan } from '@mui/material/colors'; const COLORS = ['primary', 'secondary', 'error', 'info', 'warning', 'success']; const overrideCssVariables = { - '--md-palette-primary-main': '#FF0000', - '--md-palette-primary-mainChannel': '255 0 0', - '--md-palette-primary-dark': '#8b0000', + '--mui-palette-primary-main': '#FF0000', + '--mui-palette-primary-mainChannel': '255 0 0', + '--mui-palette-primary-dark': '#8b0000', }; const ColorSchemePicker = () => { diff --git a/docs/pages/experiments/material-ui/filled-input.tsx b/docs/pages/experiments/material-ui/filled-input.tsx new file mode 100644 index 00000000000000..aea7c2457d8914 --- /dev/null +++ b/docs/pages/experiments/material-ui/filled-input.tsx @@ -0,0 +1,72 @@ +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 FilledInput from '@mui/material/FilledInput'; +import OutlinedInput from '@mui/material/OutlinedInput'; +import Moon from '@mui/icons-material/DarkMode'; +import Sun from '@mui/icons-material/LightMode'; + +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', + }, + }} + > + + + + + + + + + + + + ); +} diff --git a/docs/pages/experiments/material-ui/linear-progress.tsx b/docs/pages/experiments/material-ui/linear-progress.tsx new file mode 100644 index 00000000000000..06de878cb9f957 --- /dev/null +++ b/docs/pages/experiments/material-ui/linear-progress.tsx @@ -0,0 +1,72 @@ +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 Stack from '@mui/material/Stack'; +import LinearProgress from '@mui/material/LinearProgress'; +import Moon from '@mui/icons-material/DarkMode'; +import Sun from '@mui/icons-material/LightMode'; + +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', + }, + }} + > + + + + + + + + + + + + ); +} diff --git a/docs/pages/experiments/material-ui/skeleton.tsx b/docs/pages/experiments/material-ui/skeleton.tsx new file mode 100644 index 00000000000000..73e471e10e1a26 --- /dev/null +++ b/docs/pages/experiments/material-ui/skeleton.tsx @@ -0,0 +1,69 @@ +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 Skeleton from '@mui/material/Skeleton'; +import Stack from '@mui/material/Stack'; +import Moon from '@mui/icons-material/DarkMode'; +import Sun from '@mui/icons-material/LightMode'; + +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', + }, + }} + > + + + + + + + + + ); +} diff --git a/docs/pages/experiments/material-ui/slider.tsx b/docs/pages/experiments/material-ui/slider.tsx new file mode 100644 index 00000000000000..4ebc37e1a707ef --- /dev/null +++ b/docs/pages/experiments/material-ui/slider.tsx @@ -0,0 +1,107 @@ +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 Slider from '@mui/material/Slider'; +import Moon from '@mui/icons-material/DarkMode'; +import Sun from '@mui/icons-material/LightMode'; + +const ColorSchemePicker = () => { + const { mode, setMode } = useColorScheme(); + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + if (!mounted) { + return null; + } + + return ( + + ); +}; + +const marks = [ + { + value: 0, + label: '0°C', + }, + { + value: 20, + label: '20°C', + }, + { + value: 37, + label: '37°C', + }, + { + value: 100, + label: '100°C', + }, +]; + +export default function CssVarsTemplate() { + return ( + + + + + + + div': { + placeSelf: 'center', + }, + }} + > + + + + + + + + + + + ); +} diff --git a/docs/pages/experiments/material-ui/table.tsx b/docs/pages/experiments/material-ui/table.tsx index 1304bb14e8f3d0..7fa8b8e8d47f52 100644 --- a/docs/pages/experiments/material-ui/table.tsx +++ b/docs/pages/experiments/material-ui/table.tsx @@ -10,7 +10,12 @@ import Container from '@mui/material/Container'; import Moon from '@mui/icons-material/DarkMode'; import Sun from '@mui/icons-material/LightMode'; import Table from '@mui/material/Table'; -import { TableBody, TableHead, TableRow } from '@mui/material'; +import TableBody from '@mui/material/TableBody'; +import TableCell from '@mui/material/TableCell'; +import TableContainer from '@mui/material/TableContainer'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; +import Paper from '@mui/material/Paper'; const ColorSchemePicker = () => { const { mode, setMode } = useColorScheme(); @@ -38,6 +43,18 @@ const ColorSchemePicker = () => { ); }; +function createData(name: string, calories: number, fat: number, carbs: number, protein: number) { + return { name, calories, fat, carbs, protein }; +} + +const rows = [ + createData('Frozen yoghurt', 159, 6.0, 24, 4.0), + createData('Ice cream sandwich', 237, 9.0, 37, 4.3), + createData('Eclair', 262, 16.0, 24, 6.0), + createData('Cupcake', 305, 3.7, 67, 4.3), + createData('Gingerbread', 356, 16.0, 49, 3.9), +]; + export default function CssVarsTemplate() { return ( @@ -89,6 +106,35 @@ export default function CssVarsTemplate() { + + + + + Dessert (100g serving) + Calories + Fat (g) + Carbs (g) + Protein (g) + + + + {rows.map((row) => ( + + + {row.name} + + {row.calories} + {row.fat} + {row.carbs} + {row.protein} + + ))} + +
+ diff --git a/packages/mui-material/src/AppBar/AppBar.js b/packages/mui-material/src/AppBar/AppBar.js index 024d6734057454..f68b30d817521a 100644 --- a/packages/mui-material/src/AppBar/AppBar.js +++ b/packages/mui-material/src/AppBar/AppBar.js @@ -18,6 +18,10 @@ const useUtilityClasses = (ownerState) => { return composeClasses(slots, getAppBarUtilityClass, classes); }; +// var2 is the fallback. +// Ex. var1: 'var(--a)', var2: 'var(--b)'; return: 'var(--a, var(--b))' +const joinVars = (var1, var2) => `${var1?.replace(')', '')}, ${var2})`; + const AppBarRoot = styled(Paper, { name: 'MuiAppBar', slot: 'Root', @@ -42,7 +46,7 @@ const AppBarRoot = styled(Paper, { flexShrink: 0, ...(ownerState.position === 'fixed' && { position: 'fixed', - zIndex: theme.zIndex.appBar, + zIndex: (theme.vars || theme).zIndex.appBar, top: 0, left: 'auto', right: 0, @@ -53,7 +57,7 @@ const AppBarRoot = styled(Paper, { }), ...(ownerState.position === 'absolute' && { position: 'absolute', - zIndex: theme.zIndex.appBar, + zIndex: (theme.vars || theme).zIndex.appBar, top: 0, left: 'auto', right: 0, @@ -61,7 +65,7 @@ const AppBarRoot = styled(Paper, { ...(ownerState.position === 'sticky' && { // ⚠️ sticky is not supported by IE11. position: 'sticky', - zIndex: theme.zIndex.appBar, + zIndex: (theme.vars || theme).zIndex.appBar, top: 0, left: 'auto', right: 0, @@ -72,30 +76,61 @@ const AppBarRoot = styled(Paper, { ...(ownerState.position === 'relative' && { position: 'relative', }), - ...(ownerState.color === 'default' && { - backgroundColor: backgroundColorDefault, - color: theme.palette.getContrastText(backgroundColorDefault), - }), - ...(ownerState.color && - ownerState.color !== 'default' && - ownerState.color !== 'inherit' && - ownerState.color !== 'transparent' && { - backgroundColor: theme.palette[ownerState.color].main, - color: theme.palette[ownerState.color].contrastText, + ...(!theme.vars && { + ...(ownerState.color === 'default' && { + backgroundColor: backgroundColorDefault, + color: theme.palette.getContrastText(backgroundColorDefault), + }), + ...(ownerState.color && + ownerState.color !== 'default' && + ownerState.color !== 'inherit' && + ownerState.color !== 'transparent' && { + backgroundColor: theme.palette[ownerState.color].main, + color: theme.palette[ownerState.color].contrastText, + }), + ...(ownerState.color === 'inherit' && { + color: 'inherit', + }), + ...(theme.palette.mode === 'dark' && + !ownerState.enableColorOnDark && { + backgroundColor: null, + color: null, + }), + ...(ownerState.color === 'transparent' && { + backgroundColor: 'transparent', + color: 'inherit', + ...(theme.palette.mode === 'dark' && { + backgroundImage: 'none', + }), }), - ...(ownerState.color === 'inherit' && { - color: 'inherit', }), - ...(theme.palette.mode === 'dark' && - !ownerState.enableColorOnDark && { - backgroundColor: null, - color: null, + ...(theme.vars && { + ...(ownerState.color === 'default' && { + '--AppBar-background': ownerState.enableColorOnDark + ? theme.vars.palette.AppBar.defaultBg + : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette.AppBar.defaultBg), + '--AppBar-color': ownerState.enableColorOnDark + ? theme.vars.palette.text.primary + : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette.text.primary), }), - ...(ownerState.color === 'transparent' && { - backgroundColor: 'transparent', - color: 'inherit', - ...(theme.palette.mode === 'dark' && { + ...(ownerState.color && + !ownerState.color.match(/^(default|inherit|transparent)$/) && { + '--AppBar-background': ownerState.enableColorOnDark + ? theme.vars.palette[ownerState.color].main + : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette[ownerState.color].main), + '--AppBar-color': ownerState.enableColorOnDark + ? theme.vars.palette[ownerState.color].contrastText + : joinVars( + theme.vars.palette.AppBar.darkColor, + theme.vars.palette[ownerState.color].contrastText, + ), + }), + backgroundColor: 'var(--AppBar-background)', + color: ownerState.color === 'inherit' ? 'inherit' : 'var(--AppBar-color)', + ...(ownerState.color === 'transparent' && { backgroundImage: 'none', + backgroundColor: 'transparent', + color: 'inherit', }), }), }; diff --git a/packages/mui-material/src/Chip/Chip.js b/packages/mui-material/src/Chip/Chip.js index 314e955b786497..9596ec57b00fcc 100644 --- a/packages/mui-material/src/Chip/Chip.js +++ b/packages/mui-material/src/Chip/Chip.js @@ -74,7 +74,8 @@ const ChipRoot = styled('div', { })( ({ theme, ownerState }) => { const deleteIconColor = alpha(theme.palette.text.primary, 0.26); - + const textColor = + theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300]; return { maxWidth: '100%', fontFamily: theme.typography.fontFamily, @@ -83,8 +84,8 @@ const ChipRoot = styled('div', { alignItems: 'center', justifyContent: 'center', height: 32, - color: theme.palette.text.primary, - backgroundColor: theme.palette.action.selected, + color: (theme.vars || theme).palette.text.primary, + backgroundColor: (theme.vars || theme).palette.action.selected, borderRadius: 32 / 2, whiteSpace: 'nowrap', transition: theme.transitions.create(['background-color', 'box-shadow']), @@ -98,7 +99,7 @@ const ChipRoot = styled('div', { verticalAlign: 'middle', boxSizing: 'border-box', [`&.${chipClasses.disabled}`]: { - opacity: theme.palette.action.disabledOpacity, + opacity: (theme.vars || theme).palette.action.disabledOpacity, pointerEvents: 'none', }, [`& .${chipClasses.avatar}`]: { @@ -106,16 +107,16 @@ const ChipRoot = styled('div', { marginRight: -6, width: 24, height: 24, - color: theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300], + color: theme.vars ? theme.vars.palette.Chip.defaultAvatarColor : textColor, fontSize: theme.typography.pxToRem(12), }, [`& .${chipClasses.avatarColorPrimary}`]: { - color: theme.palette.primary.contrastText, - backgroundColor: theme.palette.primary.dark, + color: (theme.vars || theme).palette.primary.contrastText, + backgroundColor: (theme.vars || theme).palette.primary.dark, }, [`& .${chipClasses.avatarColorSecondary}`]: { - color: theme.palette.secondary.contrastText, - backgroundColor: theme.palette.secondary.dark, + color: (theme.vars || theme).palette.secondary.contrastText, + backgroundColor: (theme.vars || theme).palette.secondary.dark, }, [`& .${chipClasses.avatarSmall}`]: { marginLeft: 4, @@ -125,7 +126,7 @@ const ChipRoot = styled('div', { fontSize: theme.typography.pxToRem(10), }, [`& .${chipClasses.icon}`]: { - color: theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300], + color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor, marginLeft: 5, marginRight: -6, ...(ownerState.size === 'small' && { @@ -139,12 +140,16 @@ const ChipRoot = styled('div', { }, [`& .${chipClasses.deleteIcon}`]: { WebkitTapHighlightColor: 'transparent', - color: deleteIconColor, + color: theme.vars + ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` + : deleteIconColor, fontSize: 22, cursor: 'pointer', margin: '0 5px 0 -6px', '&:hover': { - color: alpha(deleteIconColor, 0.4), + color: theme.vars + ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` + : alpha(deleteIconColor, 0.4), }, ...(ownerState.size === 'small' && { fontSize: 16, @@ -152,9 +157,11 @@ const ChipRoot = styled('div', { marginLeft: -4, }), ...(ownerState.color !== 'default' && { - color: alpha(theme.palette[ownerState.color].contrastText, 0.7), + color: theme.vars + ? `rgba(${theme.vars.palette[ownerState.color].contrastTextChannel} / 0.7)` + : alpha(theme.palette[ownerState.color].contrastText, 0.7), '&:hover, &:active': { - color: theme.palette[ownerState.color].contrastText, + color: (theme.vars || theme).palette[ownerState.color].contrastText, }, }), }, @@ -162,21 +169,25 @@ const ChipRoot = styled('div', { height: 24, }), ...(ownerState.color !== 'default' && { - backgroundColor: theme.palette[ownerState.color].main, - color: theme.palette[ownerState.color].contrastText, + backgroundColor: (theme.vars || theme).palette[ownerState.color].main, + color: (theme.vars || theme).palette[ownerState.color].contrastText, }), ...(ownerState.onDelete && { [`&.${chipClasses.focusVisible}`]: { - backgroundColor: alpha( - theme.palette.action.selected, - theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity, - ), + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${ + theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.focusOpacity + }))` + : alpha( + theme.palette.action.selected, + theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity, + ), }, }), ...(ownerState.onDelete && ownerState.color !== 'default' && { [`&.${chipClasses.focusVisible}`]: { - backgroundColor: theme.palette[ownerState.color].dark, + backgroundColor: (theme.vars || theme).palette[ownerState.color].dark, }, }), }; @@ -187,39 +198,49 @@ const ChipRoot = styled('div', { WebkitTapHighlightColor: 'transparent', cursor: 'pointer', '&:hover': { - backgroundColor: alpha( - theme.palette.action.selected, - theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity, - ), + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${ + theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.hoverOpacity + }))` + : alpha( + theme.palette.action.selected, + theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity, + ), }, [`&.${chipClasses.focusVisible}`]: { - backgroundColor: alpha( - theme.palette.action.selected, - theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity, - ), + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${ + theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.focusOpacity + }))` + : alpha( + theme.palette.action.selected, + theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity, + ), }, '&:active': { - boxShadow: theme.shadows[1], + boxShadow: (theme.vars || theme).shadows[1], }, }), ...(ownerState.clickable && ownerState.color !== 'default' && { [`&:hover, &.${chipClasses.focusVisible}`]: { - backgroundColor: theme.palette[ownerState.color].dark, + backgroundColor: (theme.vars || theme).palette[ownerState.color].dark, }, }), }), ({ theme, ownerState }) => ({ ...(ownerState.variant === 'outlined' && { backgroundColor: 'transparent', - border: `1px solid ${ - theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700] - }`, + border: theme.vars + ? `1px solid ${theme.vars.palette.Chip.defaultBorder}` + : `1px solid ${ + theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700] + }`, [`&.${chipClasses.clickable}:hover`]: { - backgroundColor: theme.palette.action.hover, + backgroundColor: (theme.vars || theme).palette.action.hover, }, [`&.${chipClasses.focusVisible}`]: { - backgroundColor: theme.palette.action.focus, + backgroundColor: (theme.vars || theme).palette.action.focus, }, [`& .${chipClasses.avatar}`]: { marginLeft: 4, @@ -242,24 +263,32 @@ const ChipRoot = styled('div', { }), ...(ownerState.variant === 'outlined' && ownerState.color !== 'default' && { - color: theme.palette[ownerState.color].main, - border: `1px solid ${alpha(theme.palette[ownerState.color].main, 0.7)}`, + color: (theme.vars || theme).palette[ownerState.color].main, + border: `1px solid ${ + theme.vars + ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` + : alpha(theme.palette[ownerState.color].main, 0.7) + }`, [`&.${chipClasses.clickable}:hover`]: { - backgroundColor: alpha( - theme.palette[ownerState.color].main, - theme.palette.action.hoverOpacity, - ), + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${ + theme.vars.palette.action.hoverOpacity + })` + : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity), }, [`&.${chipClasses.focusVisible}`]: { - backgroundColor: alpha( - theme.palette[ownerState.color].main, - theme.palette.action.focusOpacity, - ), + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${ + theme.vars.palette.action.focusOpacity + })` + : alpha(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity), }, [`& .${chipClasses.deleteIcon}`]: { - color: alpha(theme.palette[ownerState.color].main, 0.7), + color: theme.vars + ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` + : alpha(theme.palette[ownerState.color].main, 0.7), '&:hover, &:active': { - color: theme.palette[ownerState.color].main, + color: (theme.vars || theme).palette[ownerState.color].main, }, }, }), diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js index 05bc58705691c4..a772873cc6b478 100644 --- a/packages/mui-material/src/FilledInput/FilledInput.js +++ b/packages/mui-material/src/FilledInput/FilledInput.js @@ -44,31 +44,35 @@ const FilledInputRoot = styled(InputBaseRoot, { const light = theme.palette.mode === 'light'; const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)'; const backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)'; + const hoverBackground = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.13)'; + const disabledBackground = light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)'; return { position: 'relative', - backgroundColor, - borderTopLeftRadius: theme.shape.borderRadius, - borderTopRightRadius: theme.shape.borderRadius, + backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor, + borderTopLeftRadius: (theme.vars || theme).shape.borderRadius, + borderTopRightRadius: (theme.vars || theme).shape.borderRadius, transition: theme.transitions.create('background-color', { duration: theme.transitions.duration.shorter, easing: theme.transitions.easing.easeOut, }), '&:hover': { - backgroundColor: light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.13)', + backgroundColor: theme.vars ? theme.vars.palette.FilledInput.hoverBg : hoverBackground, // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { - backgroundColor, + backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor, }, }, [`&.${filledInputClasses.focused}`]: { - backgroundColor, + backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor, }, [`&.${filledInputClasses.disabled}`]: { - backgroundColor: light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)', + backgroundColor: theme.vars ? theme.vars.palette.FilledInput.disabledBg : disabledBackground, }, ...(!ownerState.disableUnderline && { '&:after': { - borderBottom: `2px solid ${theme.palette[ownerState.color || 'primary']?.main}`, + borderBottom: `2px solid ${ + (theme.vars || theme).palette[ownerState.color || 'primary']?.main + }`, left: 0, bottom: 0, // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242 @@ -88,11 +92,15 @@ const FilledInputRoot = styled(InputBaseRoot, { transform: 'scaleX(1) translateX(0)', }, [`&.${filledInputClasses.error}:after`]: { - borderBottomColor: theme.palette.error.main, + borderBottomColor: (theme.vars || theme).palette.error.main, transform: 'scaleX(1)', // error is always underlined in red }, '&:before': { - borderBottom: `1px solid ${bottomLineColor}`, + borderBottom: `1px solid ${ + theme.vars + ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputTouchBottomLine})` + : bottomLineColor + }`, left: 0, bottom: 0, // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242 @@ -105,7 +113,7 @@ const FilledInputRoot = styled(InputBaseRoot, { pointerEvents: 'none', // Transparent to the hover style. }, [`&:hover:not(.${filledInputClasses.disabled}):before`]: { - borderBottom: `1px solid ${theme.palette.text.primary}`, + borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`, }, [`&.${filledInputClasses.disabled}:before`]: { borderBottomStyle: 'dotted', @@ -140,13 +148,28 @@ const FilledInputInput = styled(InputBaseInput, { paddingRight: 12, paddingBottom: 8, paddingLeft: 12, - '&:-webkit-autofill': { - WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset', - WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff', - caretColor: theme.palette.mode === 'light' ? null : '#fff', - borderTopLeftRadius: 'inherit', - borderTopRightRadius: 'inherit', - }, + ...(!theme.vars && { + '&:-webkit-autofill': { + WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset', + WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff', + caretColor: theme.palette.mode === 'light' ? null : '#fff', + borderTopLeftRadius: 'inherit', + borderTopRightRadius: 'inherit', + }, + }), + ...(theme.vars && { + '&:-webkit-autofill': { + borderTopLeftRadius: 'inherit', + borderTopRightRadius: 'inherit', + }, + [theme.getColorSchemeSelector('dark')]: { + '&:-webkit-autofill': { + WebkitBoxShadow: '0 0 0 100px #266798 inset', + WebkitTextFillColor: '#fff', + caretColor: '#fff', + }, + }, + }), ...(ownerState.size === 'small' && { paddingTop: 21, paddingBottom: 4, diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js index 5df9cf7a6b5a66..c3edc6ae0bbee2 100644 --- a/packages/mui-material/src/InputBase/InputBase.js +++ b/packages/mui-material/src/InputBase/InputBase.js @@ -135,7 +135,7 @@ export const InputBaseComponent = styled('input', { color: 'currentColor', ...(theme.vars ? { - opacity: theme.vars.opacity.placeholder, + opacity: theme.vars.opacity.inputPlaceholder, } : { opacity: light ? 0.42 : 0.5, @@ -151,7 +151,7 @@ export const InputBaseComponent = styled('input', { const placeholderVisible = theme.vars ? { - opacity: theme.vars.opacity.placeholder, + opacity: theme.vars.opacity.inputPlaceholder, } : { opacity: light ? 0.42 : 0.5, diff --git a/packages/mui-material/src/LinearProgress/LinearProgress.js b/packages/mui-material/src/LinearProgress/LinearProgress.js index f8efac8ec70642..76fb1a2b9ba151 100644 --- a/packages/mui-material/src/LinearProgress/LinearProgress.js +++ b/packages/mui-material/src/LinearProgress/LinearProgress.js @@ -90,6 +90,9 @@ const getColorShade = (theme, color) => { if (color === 'inherit') { return 'currentColor'; } + if (theme.vars) { + return theme.vars.palette.LinearProgress[`${color}Bg`]; + } return theme.palette.mode === 'light' ? lighten(theme.palette[color].main, 0.62) : darken(theme.palette[color].main, 0.5); @@ -190,7 +193,9 @@ const LinearProgressBar1 = styled('span', { transition: 'transform 0.2s linear', transformOrigin: 'left', backgroundColor: - ownerState.color === 'inherit' ? 'currentColor' : theme.palette[ownerState.color].main, + ownerState.color === 'inherit' + ? 'currentColor' + : (theme.vars || theme).palette[ownerState.color].main, ...(ownerState.variant === 'determinate' && { transition: `transform .${TRANSITION_DURATION}s linear`, }), @@ -232,7 +237,9 @@ const LinearProgressBar2 = styled('span', { transformOrigin: 'left', ...(ownerState.variant !== 'buffer' && { backgroundColor: - ownerState.color === 'inherit' ? 'currentColor' : theme.palette[ownerState.color].main, + ownerState.color === 'inherit' + ? 'currentColor' + : (theme.vars || theme).palette[ownerState.color].main, }), ...(ownerState.color === 'inherit' && { opacity: 0.3, diff --git a/packages/mui-material/src/OutlinedInput/OutlinedInput.js b/packages/mui-material/src/OutlinedInput/OutlinedInput.js index 11ea07a3d78777..1b4c9fcf574295 100644 --- a/packages/mui-material/src/OutlinedInput/OutlinedInput.js +++ b/packages/mui-material/src/OutlinedInput/OutlinedInput.js @@ -42,25 +42,27 @@ const OutlinedInputRoot = styled(InputBaseRoot, { theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'; return { position: 'relative', - borderRadius: theme.shape.borderRadius, + borderRadius: (theme.vars || theme).shape.borderRadius, [`&:hover .${outlinedInputClasses.notchedOutline}`]: { - borderColor: theme.palette.text.primary, + borderColor: (theme.vars || theme).palette.text.primary, }, // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { [`&:hover .${outlinedInputClasses.notchedOutline}`]: { - borderColor, + borderColor: theme.vars + ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` + : borderColor, }, }, [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: { - borderColor: theme.palette[ownerState.color].main, + borderColor: (theme.vars || theme).palette[ownerState.color].main, borderWidth: 2, }, [`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: { - borderColor: theme.palette.error.main, + borderColor: (theme.vars || theme).palette.error.main, }, [`&.${outlinedInputClasses.disabled} .${outlinedInputClasses.notchedOutline}`]: { - borderColor: theme.palette.action.disabled, + borderColor: (theme.vars || theme).palette.action.disabled, }, ...(ownerState.startAdornment && { paddingLeft: 14, @@ -81,9 +83,15 @@ const NotchedOutlineRoot = styled(NotchedOutline, { name: 'MuiOutlinedInput', slot: 'NotchedOutline', overridesResolver: (props, styles) => styles.notchedOutline, -})(({ theme }) => ({ - borderColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)', -})); +})(({ theme }) => { + const borderColor = + theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'; + return { + borderColor: theme.vars + ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` + : borderColor, + }; +}); const OutlinedInputInput = styled(InputBaseInput, { name: 'MuiOutlinedInput', @@ -91,12 +99,26 @@ const OutlinedInputInput = styled(InputBaseInput, { overridesResolver: inputBaseInputOverridesResolver, })(({ theme, ownerState }) => ({ padding: '16.5px 14px', - '&:-webkit-autofill': { - WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset', - WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff', - caretColor: theme.palette.mode === 'light' ? null : '#fff', - borderRadius: 'inherit', - }, + ...(!theme.vars && { + '&:-webkit-autofill': { + WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset', + WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff', + caretColor: theme.palette.mode === 'light' ? null : '#fff', + borderRadius: 'inherit', + }, + }), + ...(theme.vars && { + '&:-webkit-autofill': { + borderRadius: 'inherit', + }, + [theme.getColorSchemeSelector('dark')]: { + '&:-webkit-autofill': { + WebkitBoxShadow: '0 0 0 100px #266798 inset', + WebkitTextFillColor: '#fff', + caretColor: '#fff', + }, + }, + }), ...(ownerState.size === 'small' && { padding: '8.5px 14px', }), diff --git a/packages/mui-material/src/Skeleton/Skeleton.js b/packages/mui-material/src/Skeleton/Skeleton.js index 5bd6a7311e2345..9228c7e066ef2a 100644 --- a/packages/mui-material/src/Skeleton/Skeleton.js +++ b/packages/mui-material/src/Skeleton/Skeleton.js @@ -77,10 +77,9 @@ const SkeletonRoot = styled('span', { return { display: 'block', // Create a "on paper" color with sufficient contrast retaining the color - backgroundColor: alpha( - theme.palette.text.primary, - theme.palette.mode === 'light' ? 0.11 : 0.13, - ), + backgroundColor: theme.vars + ? theme.vars.palette.Skeleton.bg + : alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13), height: '1.2em', ...(ownerState.variant === 'text' && { marginTop: 0, @@ -129,7 +128,12 @@ const SkeletonRoot = styled('span', { &::after { animation: ${waveKeyframe} 1.6s linear 0.5s infinite; - background: linear-gradient(90deg, transparent, ${theme.palette.action.hover}, transparent); + background: linear-gradient( + 90deg, + transparent, + ${(theme.vars || theme).palette.action.hover}, + transparent + ); content: ''; position: absolute; transform: translateX(-100%); /* Avoid flash during server-side hydration */ diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index 994fe85dd371a9..8453781872dff2 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -50,7 +50,7 @@ const SliderRoot = styled('span', { position: 'relative', cursor: 'pointer', touchAction: 'none', - color: theme.palette[ownerState.color].main, + color: (theme.vars || theme).palette[ownerState.color].main, WebkitTapHighlightColor: 'transparent', ...(ownerState.orientation === 'horizontal' && { height: 4, @@ -90,7 +90,7 @@ const SliderRoot = styled('span', { [`&.${sliderClasses.disabled}`]: { pointerEvents: 'none', cursor: 'default', - color: theme.palette.grey[400], + color: (theme.vars || theme).palette.grey[400], }, [`&.${sliderClasses.dragging}`]: { [`& .${sliderClasses.thumb}, & .${sliderClasses.track}`]: { @@ -187,8 +187,8 @@ const SliderTrack = styled('span', { display: 'none', }), ...(ownerState.track === 'inverted' && { - backgroundColor: color, - borderColor: color, + backgroundColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color, + borderColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color, }), }; }); @@ -249,7 +249,7 @@ const SliderThumb = styled('span', { borderRadius: 'inherit', width: '100%', height: '100%', - boxShadow: theme.shadows[2], + boxShadow: (theme.vars || theme).shadows[2], ...(ownerState.size === 'small' && { boxShadow: 'none', }), @@ -266,13 +266,21 @@ const SliderThumb = styled('span', { transform: 'translate(-50%, -50%)', }, [`&:hover, &.${sliderClasses.focusVisible}`]: { - boxShadow: `0px 0px 0px 8px ${alpha(theme.palette[ownerState.color].main, 0.16)}`, + boxShadow: `0px 0px 0px 8px ${ + theme.vars + ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` + : alpha(theme.palette[ownerState.color].main, 0.16) + }`, '@media (hover: none)': { boxShadow: 'none', }, }, [`&.${sliderClasses.active}`]: { - boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[ownerState.color].main, 0.16)}`, + boxShadow: `0px 0px 0px 14px ${ + theme.vars + ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` + : alpha(theme.palette[ownerState.color].main, 0.16) + }`, }, [`&.${sliderClasses.disabled}`]: { '&:hover': { @@ -312,9 +320,9 @@ const SliderValueLabel = styled(SliderValueLabelUnstyled, { transformOrigin: 'bottom center', transform: 'translateY(-100%) scale(0)', position: 'absolute', - backgroundColor: theme.palette.grey[600], + backgroundColor: (theme.vars || theme).palette.grey[600], borderRadius: 2, - color: theme.palette.common.white, + color: (theme.vars || theme).palette.common.white, display: 'flex', alignItems: 'center', justifyContent: 'center', @@ -385,7 +393,7 @@ const SliderMark = styled('span', { transform: 'translate(-50%, 1px)', }), ...(markActive && { - backgroundColor: theme.palette.background.paper, + backgroundColor: (theme.vars || theme).palette.background.paper, opacity: 0.8, }), })); @@ -410,7 +418,7 @@ const SliderMarkLabel = styled('span', { overridesResolver: (props, styles) => styles.markLabel, })(({ theme, ownerState, markLabelActive }) => ({ ...theme.typography.body2, - color: theme.palette.text.secondary, + color: (theme.vars || theme).palette.text.secondary, position: 'absolute', whiteSpace: 'nowrap', ...(ownerState.orientation === 'horizontal' && { @@ -428,7 +436,7 @@ const SliderMarkLabel = styled('span', { }, }), ...(markLabelActive && { - color: theme.palette.text.primary, + color: (theme.vars || theme).palette.text.primary, }), })); diff --git a/packages/mui-material/src/SnackbarContent/SnackbarContent.js b/packages/mui-material/src/SnackbarContent/SnackbarContent.js index b5679c4cb5f8aa..d2526323b8120c 100644 --- a/packages/mui-material/src/SnackbarContent/SnackbarContent.js +++ b/packages/mui-material/src/SnackbarContent/SnackbarContent.js @@ -30,13 +30,15 @@ const SnackbarContentRoot = styled(Paper, { return { ...theme.typography.body2, - color: theme.palette.getContrastText(backgroundColor), - backgroundColor, + color: theme.vars + ? theme.vars.palette.text.primary + : theme.palette.getContrastText(backgroundColor), + backgroundColor: theme.vars ? theme.vars.palette.SnackbarContent.bg : backgroundColor, display: 'flex', alignItems: 'center', flexWrap: 'wrap', padding: '6px 16px', - borderRadius: theme.shape.borderRadius, + borderRadius: (theme.vars || theme).shape.borderRadius, flexGrow: 1, [theme.breakpoints.up('sm')]: { flexGrow: 'initial', diff --git a/packages/mui-material/src/StepConnector/StepConnector.js b/packages/mui-material/src/StepConnector/StepConnector.js index 34f4c204b735c1..e849dba428e9f1 100644 --- a/packages/mui-material/src/StepConnector/StepConnector.js +++ b/packages/mui-material/src/StepConnector/StepConnector.js @@ -61,19 +61,23 @@ const StepConnectorLine = styled('span', { return [styles.line, styles[`line${capitalize(ownerState.orientation)}`]]; }, -})(({ ownerState, theme }) => ({ - display: 'block', - borderColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600], - ...(ownerState.orientation === 'horizontal' && { - borderTopStyle: 'solid', - borderTopWidth: 1, - }), - ...(ownerState.orientation === 'vertical' && { - borderLeftStyle: 'solid', - borderLeftWidth: 1, - minHeight: 24, - }), -})); +})(({ ownerState, theme }) => { + const borderColor = + theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]; + return { + display: 'block', + borderColor: theme.vars ? theme.vars.palette.StepConnector.border : borderColor, + ...(ownerState.orientation === 'horizontal' && { + borderTopStyle: 'solid', + borderTopWidth: 1, + }), + ...(ownerState.orientation === 'vertical' && { + borderLeftStyle: 'solid', + borderLeftWidth: 1, + minHeight: 24, + }), + }; +}); const StepConnector = React.forwardRef(function StepConnector(inProps, ref) { const props = useThemeProps({ props: inProps, name: 'MuiStepConnector' }); diff --git a/packages/mui-material/src/StepContent/StepContent.js b/packages/mui-material/src/StepContent/StepContent.js index 41b4e5ec7b039e..5d867ed0fc0fee 100644 --- a/packages/mui-material/src/StepContent/StepContent.js +++ b/packages/mui-material/src/StepContent/StepContent.js @@ -29,9 +29,11 @@ const StepContentRoot = styled('div', { marginLeft: 12, // half icon paddingLeft: 8 + 12, // margin + half icon paddingRight: 8, - borderLeft: `1px solid ${ - theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600] - }`, + borderLeft: theme.vars + ? `1px solid ${theme.vars.palette.StepContent.border}` + : `1px solid ${ + theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600] + }`, ...(ownerState.last && { borderLeft: 'none', }), diff --git a/packages/mui-material/src/Switch/Switch.js b/packages/mui-material/src/Switch/Switch.js index eab62c13cf6e13..fa016e850296d3 100644 --- a/packages/mui-material/src/Switch/Switch.js +++ b/packages/mui-material/src/Switch/Switch.js @@ -102,7 +102,9 @@ const SwitchSwitchBase = styled(SwitchBase, { top: 0, left: 0, zIndex: 1, // Render above the focus ripple. - color: theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[300], + color: theme.vars + ? theme.vars.palette.Switch.defaultColor + : `${theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[300]}`, transition: theme.transitions.create(['left', 'transform'], { duration: theme.transitions.duration.shortest, }), @@ -110,13 +112,17 @@ const SwitchSwitchBase = styled(SwitchBase, { transform: 'translateX(20px)', }, [`&.${switchClasses.disabled}`]: { - color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600], + color: theme.vars + ? theme.vars.palette.Switch.defaultDisabledColor + : `${theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600]}`, }, [`&.${switchClasses.checked} + .${switchClasses.track}`]: { opacity: 0.5, }, [`&.${switchClasses.disabled} + .${switchClasses.track}`]: { - opacity: theme.palette.mode === 'light' ? 0.12 : 0.2, + opacity: theme.vars + ? theme.vars.opacity.switchTrackDisabled + : `${theme.palette.mode === 'light' ? 0.12 : 0.2}`, }, [`& .${switchClasses.input}`]: { left: '-100%', @@ -125,7 +131,9 @@ const SwitchSwitchBase = styled(SwitchBase, { }), ({ theme, ownerState }) => ({ '&:hover': { - backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity), + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` + : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent', @@ -133,25 +141,29 @@ const SwitchSwitchBase = styled(SwitchBase, { }, ...(ownerState.color !== 'default' && { [`&.${switchClasses.checked}`]: { - color: theme.palette[ownerState.color].main, + color: (theme.vars || theme).palette[ownerState.color].main, '&:hover': { - backgroundColor: alpha( - theme.palette[ownerState.color].main, - theme.palette.action.hoverOpacity, - ), + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${ + theme.vars.palette.action.hoverOpacity + })` + : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity), '@media (hover: none)': { backgroundColor: 'transparent', }, }, [`&.${switchClasses.disabled}`]: { - color: - theme.palette.mode === 'light' - ? lighten(theme.palette[ownerState.color].main, 0.62) - : darken(theme.palette[ownerState.color].main, 0.55), + color: theme.vars + ? theme.vars.palette.Switch[`${ownerState.color}DisabledColor`] + : `${ + theme.palette.mode === 'light' + ? lighten(theme.palette[ownerState.color].main, 0.62) + : darken(theme.palette[ownerState.color].main, 0.55) + }`, }, }, [`&.${switchClasses.checked} + .${switchClasses.track}`]: { - backgroundColor: theme.palette[ownerState.color].main, + backgroundColor: (theme.vars || theme).palette[ownerState.color].main, }, }), }), @@ -169,9 +181,12 @@ const SwitchTrack = styled('span', { transition: theme.transitions.create(['opacity', 'background-color'], { duration: theme.transitions.duration.shortest, }), - backgroundColor: - theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white, - opacity: theme.palette.mode === 'light' ? 0.38 : 0.3, + backgroundColor: theme.vars + ? theme.vars.palette.common.onBackground + : `${theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white}`, + opacity: theme.vars + ? theme.vars.opacity.switchTrack + : `${theme.palette.mode === 'light' ? 0.38 : 0.3}`, })); const SwitchThumb = styled('span', { @@ -179,7 +194,7 @@ const SwitchThumb = styled('span', { slot: 'Thumb', overridesResolver: (props, styles) => styles.thumb, })(({ theme }) => ({ - boxShadow: theme.shadows[1], + boxShadow: (theme.vars || theme).shadows[1], backgroundColor: 'currentColor', width: 20, height: 20, diff --git a/packages/mui-material/src/TableCell/TableCell.js b/packages/mui-material/src/TableCell/TableCell.js index ee9fb48fd973c7..0987a29d8852ef 100644 --- a/packages/mui-material/src/TableCell/TableCell.js +++ b/packages/mui-material/src/TableCell/TableCell.js @@ -48,7 +48,9 @@ const TableCellRoot = styled('td', { verticalAlign: 'inherit', // Workaround for a rendering bug with spanned columns in Chrome 62.0. // Removes the alpha (sets it to 1), and lightens or darkens the theme color. - borderBottom: `1px solid + borderBottom: theme.vars + ? `1px solid ${theme.vars.palette.TableCell.border}` + : `1px solid ${ theme.palette.mode === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) @@ -57,15 +59,15 @@ const TableCellRoot = styled('td', { textAlign: 'left', padding: 16, ...(ownerState.variant === 'head' && { - color: theme.palette.text.primary, + color: (theme.vars || theme).palette.text.primary, lineHeight: theme.typography.pxToRem(24), fontWeight: theme.typography.fontWeightMedium, }), ...(ownerState.variant === 'body' && { - color: theme.palette.text.primary, + color: (theme.vars || theme).palette.text.primary, }), ...(ownerState.variant === 'footer' && { - color: theme.palette.text.secondary, + color: (theme.vars || theme).palette.text.secondary, lineHeight: theme.typography.pxToRem(21), fontSize: theme.typography.pxToRem(12), }), @@ -103,7 +105,7 @@ const TableCellRoot = styled('td', { position: 'sticky', top: 0, zIndex: 2, - backgroundColor: theme.palette.background.default, + backgroundColor: (theme.vars || theme).palette.background.default, }), })); diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js index 88d7f7b00cbab8..86129bd76aebd6 100644 --- a/packages/mui-material/src/Tooltip/Tooltip.js +++ b/packages/mui-material/src/Tooltip/Tooltip.js @@ -119,7 +119,7 @@ const TooltipTooltip = styled('div', { }, })(({ theme, ownerState }) => ({ backgroundColor: theme.vars - ? `rgba(${theme.vars.palette.grey.darkChannel} / 0.92)` + ? theme.vars.palette.Tooltip.bg : alpha(theme.palette.grey[700], 0.92), borderRadius: (theme.vars || theme).shape.borderRadius, color: (theme.vars || theme).palette.common.white, diff --git a/packages/mui-material/src/styles/CssVarsProvider.js b/packages/mui-material/src/styles/CssVarsProvider.js index 05da2901c7f5bd..b1708765bd6b89 100644 --- a/packages/mui-material/src/styles/CssVarsProvider.js +++ b/packages/mui-material/src/styles/CssVarsProvider.js @@ -18,7 +18,7 @@ const { light: 'light', dark: 'dark', }, - prefix: 'md', + prefix: 'mui', resolveTheme: (theme) => { const newTheme = { ...theme, diff --git a/packages/mui-material/src/styles/CssVarsProvider.test.js b/packages/mui-material/src/styles/CssVarsProvider.test.js index 70f8c64548c05a..a796f1b7daa8fb 100644 --- a/packages/mui-material/src/styles/CssVarsProvider.test.js +++ b/packages/mui-material/src/styles/CssVarsProvider.test.js @@ -62,120 +62,121 @@ describe('[Material UI] CssVarsProvider', () => { expect(screen.getByTestId('palette-primary').textContent).to.equal( JSON.stringify({ - main: 'var(--md-palette-primary-main)', - light: 'var(--md-palette-primary-light)', - dark: 'var(--md-palette-primary-dark)', - contrastText: 'var(--md-palette-primary-contrastText)', - mainChannel: 'var(--md-palette-primary-mainChannel)', - lightChannel: 'var(--md-palette-primary-lightChannel)', - darkChannel: 'var(--md-palette-primary-darkChannel)', - contrastTextChannel: 'var(--md-palette-primary-contrastTextChannel)', + main: 'var(--mui-palette-primary-main)', + light: 'var(--mui-palette-primary-light)', + dark: 'var(--mui-palette-primary-dark)', + contrastText: 'var(--mui-palette-primary-contrastText)', + mainChannel: 'var(--mui-palette-primary-mainChannel)', + lightChannel: 'var(--mui-palette-primary-lightChannel)', + darkChannel: 'var(--mui-palette-primary-darkChannel)', + contrastTextChannel: 'var(--mui-palette-primary-contrastTextChannel)', }), ); expect(screen.getByTestId('palette-secondary').textContent).to.equal( JSON.stringify({ - main: 'var(--md-palette-secondary-main)', - light: 'var(--md-palette-secondary-light)', - dark: 'var(--md-palette-secondary-dark)', - contrastText: 'var(--md-palette-secondary-contrastText)', - mainChannel: 'var(--md-palette-secondary-mainChannel)', - lightChannel: 'var(--md-palette-secondary-lightChannel)', - darkChannel: 'var(--md-palette-secondary-darkChannel)', - contrastTextChannel: 'var(--md-palette-secondary-contrastTextChannel)', + main: 'var(--mui-palette-secondary-main)', + light: 'var(--mui-palette-secondary-light)', + dark: 'var(--mui-palette-secondary-dark)', + contrastText: 'var(--mui-palette-secondary-contrastText)', + mainChannel: 'var(--mui-palette-secondary-mainChannel)', + lightChannel: 'var(--mui-palette-secondary-lightChannel)', + darkChannel: 'var(--mui-palette-secondary-darkChannel)', + contrastTextChannel: 'var(--mui-palette-secondary-contrastTextChannel)', }), ); expect(screen.getByTestId('palette-error').textContent).to.equal( JSON.stringify({ - main: 'var(--md-palette-error-main)', - light: 'var(--md-palette-error-light)', - dark: 'var(--md-palette-error-dark)', - contrastText: 'var(--md-palette-error-contrastText)', - mainChannel: 'var(--md-palette-error-mainChannel)', - lightChannel: 'var(--md-palette-error-lightChannel)', - darkChannel: 'var(--md-palette-error-darkChannel)', - contrastTextChannel: 'var(--md-palette-error-contrastTextChannel)', + main: 'var(--mui-palette-error-main)', + light: 'var(--mui-palette-error-light)', + dark: 'var(--mui-palette-error-dark)', + contrastText: 'var(--mui-palette-error-contrastText)', + mainChannel: 'var(--mui-palette-error-mainChannel)', + lightChannel: 'var(--mui-palette-error-lightChannel)', + darkChannel: 'var(--mui-palette-error-darkChannel)', + contrastTextChannel: 'var(--mui-palette-error-contrastTextChannel)', }), ); expect(screen.getByTestId('palette-warning').textContent).to.equal( JSON.stringify({ - main: 'var(--md-palette-warning-main)', - light: 'var(--md-palette-warning-light)', - dark: 'var(--md-palette-warning-dark)', - contrastText: 'var(--md-palette-warning-contrastText)', - mainChannel: 'var(--md-palette-warning-mainChannel)', - lightChannel: 'var(--md-palette-warning-lightChannel)', - darkChannel: 'var(--md-palette-warning-darkChannel)', - contrastTextChannel: 'var(--md-palette-warning-contrastTextChannel)', + main: 'var(--mui-palette-warning-main)', + light: 'var(--mui-palette-warning-light)', + dark: 'var(--mui-palette-warning-dark)', + contrastText: 'var(--mui-palette-warning-contrastText)', + mainChannel: 'var(--mui-palette-warning-mainChannel)', + lightChannel: 'var(--mui-palette-warning-lightChannel)', + darkChannel: 'var(--mui-palette-warning-darkChannel)', + contrastTextChannel: 'var(--mui-palette-warning-contrastTextChannel)', }), ); expect(screen.getByTestId('palette-info').textContent).to.equal( JSON.stringify({ - main: 'var(--md-palette-info-main)', - light: 'var(--md-palette-info-light)', - dark: 'var(--md-palette-info-dark)', - contrastText: 'var(--md-palette-info-contrastText)', - mainChannel: 'var(--md-palette-info-mainChannel)', - lightChannel: 'var(--md-palette-info-lightChannel)', - darkChannel: 'var(--md-palette-info-darkChannel)', - contrastTextChannel: 'var(--md-palette-info-contrastTextChannel)', + main: 'var(--mui-palette-info-main)', + light: 'var(--mui-palette-info-light)', + dark: 'var(--mui-palette-info-dark)', + contrastText: 'var(--mui-palette-info-contrastText)', + mainChannel: 'var(--mui-palette-info-mainChannel)', + lightChannel: 'var(--mui-palette-info-lightChannel)', + darkChannel: 'var(--mui-palette-info-darkChannel)', + contrastTextChannel: 'var(--mui-palette-info-contrastTextChannel)', }), ); expect(screen.getByTestId('palette-success').textContent).to.equal( JSON.stringify({ - main: 'var(--md-palette-success-main)', - light: 'var(--md-palette-success-light)', - dark: 'var(--md-palette-success-dark)', - contrastText: 'var(--md-palette-success-contrastText)', - mainChannel: 'var(--md-palette-success-mainChannel)', - lightChannel: 'var(--md-palette-success-lightChannel)', - darkChannel: 'var(--md-palette-success-darkChannel)', - contrastTextChannel: 'var(--md-palette-success-contrastTextChannel)', + main: 'var(--mui-palette-success-main)', + light: 'var(--mui-palette-success-light)', + dark: 'var(--mui-palette-success-dark)', + contrastText: 'var(--mui-palette-success-contrastText)', + mainChannel: 'var(--mui-palette-success-mainChannel)', + lightChannel: 'var(--mui-palette-success-lightChannel)', + darkChannel: 'var(--mui-palette-success-darkChannel)', + contrastTextChannel: 'var(--mui-palette-success-contrastTextChannel)', }), ); expect(screen.getByTestId('palette-text').textContent).to.equal( JSON.stringify({ - primary: 'var(--md-palette-text-primary)', - secondary: 'var(--md-palette-text-secondary)', - disabled: 'var(--md-palette-text-disabled)', - primaryChannel: 'var(--md-palette-text-primaryChannel)', - secondaryChannel: 'var(--md-palette-text-secondaryChannel)', - icon: 'var(--md-palette-text-icon)', + primary: 'var(--mui-palette-text-primary)', + secondary: 'var(--mui-palette-text-secondary)', + disabled: 'var(--mui-palette-text-disabled)', + primaryChannel: 'var(--mui-palette-text-primaryChannel)', + secondaryChannel: 'var(--mui-palette-text-secondaryChannel)', + icon: 'var(--mui-palette-text-icon)', }), ); expect(screen.getByTestId('palette-divider').textContent).to.equal( - '"var(--md-palette-divider)"', + '"var(--mui-palette-divider)"', ); expect(screen.getByTestId('palette-background').textContent).to.equal( JSON.stringify({ - paper: 'var(--md-palette-background-paper)', - default: 'var(--md-palette-background-default)', + paper: 'var(--mui-palette-background-paper)', + default: 'var(--mui-palette-background-default)', }), ); expect(screen.getByTestId('palette-action').textContent).to.equal( JSON.stringify({ - active: 'var(--md-palette-action-active)', - hover: 'var(--md-palette-action-hover)', - hoverOpacity: 'var(--md-palette-action-hoverOpacity)', - selected: 'var(--md-palette-action-selected)', - selectedOpacity: 'var(--md-palette-action-selectedOpacity)', - disabled: 'var(--md-palette-action-disabled)', - disabledBackground: 'var(--md-palette-action-disabledBackground)', - disabledOpacity: 'var(--md-palette-action-disabledOpacity)', - focus: 'var(--md-palette-action-focus)', - focusOpacity: 'var(--md-palette-action-focusOpacity)', - activatedOpacity: 'var(--md-palette-action-activatedOpacity)', - activeChannel: 'var(--md-palette-action-activeChannel)', + active: 'var(--mui-palette-action-active)', + hover: 'var(--mui-palette-action-hover)', + hoverOpacity: 'var(--mui-palette-action-hoverOpacity)', + selected: 'var(--mui-palette-action-selected)', + selectedOpacity: 'var(--mui-palette-action-selectedOpacity)', + disabled: 'var(--mui-palette-action-disabled)', + disabledBackground: 'var(--mui-palette-action-disabledBackground)', + disabledOpacity: 'var(--mui-palette-action-disabledOpacity)', + focus: 'var(--mui-palette-action-focus)', + focusOpacity: 'var(--mui-palette-action-focusOpacity)', + activatedOpacity: 'var(--mui-palette-action-activatedOpacity)', + activeChannel: 'var(--mui-palette-action-activeChannel)', + selectedChannel: 'var(--mui-palette-action-selectedChannel)', }), ); expect(screen.getByTestId('palette-common').textContent).to.equal( JSON.stringify({ - black: 'var(--md-palette-common-black)', - white: 'var(--md-palette-common-white)', - background: 'var(--md-palette-common-background)', - onBackground: 'var(--md-palette-common-onBackground)', - backgroundChannel: 'var(--md-palette-common-backgroundChannel)', - onBackgroundChannel: 'var(--md-palette-common-onBackgroundChannel)', + black: 'var(--mui-palette-common-black)', + white: 'var(--mui-palette-common-white)', + background: 'var(--mui-palette-common-background)', + onBackground: 'var(--mui-palette-common-onBackground)', + backgroundChannel: 'var(--mui-palette-common-backgroundChannel)', + onBackgroundChannel: 'var(--mui-palette-common-onBackgroundChannel)', }), ); }); @@ -198,8 +199,10 @@ describe('[Material UI] CssVarsProvider', () => { expect(screen.getByTestId('opacity').textContent).to.equal( JSON.stringify({ - placeholder: 'var(--md-opacity-placeholder)', - inputTouchBottomLine: 'var(--md-opacity-inputTouchBottomLine)', + inputPlaceholder: 'var(--mui-opacity-inputPlaceholder)', + inputTouchBottomLine: 'var(--mui-opacity-inputTouchBottomLine)', + switchTrackDisabled: 'var(--mui-opacity-switchTrackDisabled)', + switchTrack: 'var(--mui-opacity-switchTrack)', }), ); }); @@ -222,7 +225,7 @@ describe('[Material UI] CssVarsProvider', () => { expect(screen.getByTestId('shape').textContent).to.equal( JSON.stringify({ - borderRadius: 'var(--md-shape-borderRadius)', + borderRadius: 'var(--mui-shape-borderRadius)', }), ); }); diff --git a/packages/mui-material/src/styles/createPalette.d.ts b/packages/mui-material/src/styles/createPalette.d.ts index 342255f7943976..aabaebbd075141 100644 --- a/packages/mui-material/src/styles/createPalette.d.ts +++ b/packages/mui-material/src/styles/createPalette.d.ts @@ -122,13 +122,70 @@ export interface PaletteWithChannels { info: PaletteColor & Channels; success: PaletteColor & Channels; grey: Color & { darkChannel: string }; - text: TypeText & { primaryChannel: string; secondaryChannel: string; disabledChannel: string }; + text: TypeText & { primaryChannel: string; secondaryChannel: string }; divider: TypeDivider; dividerChannel: TypeDivider; - action: TypeAction & { disabledChannel: string; activeChannel: string }; + action: TypeAction & { activeChannel: string; selectedChannel: string }; background: TypeBackground; getContrastText: (background: string) => string; augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor; + // component tokens + AppBar: { + defaultBg: string; + darkBg: string; + darkColor: string; + }; + Chip: { + defaultBorder: string; + defaultAvatarColor: string; + defaultIconColor: string; + }; + FilledInput: { + bg: string; + hoverBg: string; + disabledBg: string; + }; + LinearProgress: { + primaryBg: string; + secondaryBg: string; + errorBg: string; + infoBg: string; + successBg: string; + warningBg: string; + }; + Slider: { + primaryTrack: string; + secondaryTrack: string; + errorTrack: string; + infoTrack: string; + successTrack: string; + warningTrack: string; + }; + SnackbarContent: { + bg: string; + }; + StepConnector: { + border: string; + }; + StepContent: { + border: string; + }; + Switch: { + defaultColor: string; + defaultDisabledColor: string; + primaryDisabledColor: string; + secondaryDisabledColor: string; + errorDisabledColor: string; + infoDisabledColor: string; + successDisabledColor: string; + warningDisabledColor: string; + }; + TableCell: { + border: string; + }; + Tooltip: { + bg: string; + }; } export type PartialTypeObject = { [P in keyof TypeObject]?: Partial }; diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 78a718bc712d49..d4d87c2e3a7bbc 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -1,5 +1,5 @@ import { deepmerge } from '@mui/utils'; -import { colorChannel } from '@mui/system'; +import { colorChannel, alpha, darken, lighten, emphasize } from '@mui/system'; import createThemeWithoutVars from './createTheme'; import { getOverlayAlpha } from '../Paper/Paper'; @@ -11,6 +11,18 @@ const defaultDarkOverlays = [...Array(25)].map((_, index) => { return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`; }); +function assignNode(obj, keys) { + keys.forEach((k) => { + if (!obj[k]) { + obj[k] = {}; + } + }); +} + +function setColor(obj, key, defaultValue) { + obj[key] = obj[key] || defaultValue; +} + export default function extendTheme(options = {}, ...args) { const { colorSchemes: colorSchemesInput = {}, ...input } = options; @@ -30,8 +42,10 @@ export default function extendTheme(options = {}, ...args) { ...colorSchemesInput.light, palette: lightPalette, opacity: { - placeholder: 0.42, + inputPlaceholder: 0.42, inputTouchBottomLine: 0.42, + switchTrackDisabled: 0.12, + switchTrack: 0.38, ...colorSchemesInput.light?.opacity, }, overlays: colorSchemesInput.light?.overlays || [], @@ -40,8 +54,10 @@ export default function extendTheme(options = {}, ...args) { ...colorSchemesInput.dark, palette: darkPalette, opacity: { - placeholder: 0.5, + inputPlaceholder: 0.5, inputTouchBottomLine: 0.7, + switchTrackDisabled: 0.2, + switchTrack: 0.3, ...colorSchemesInput.dark?.opacity, }, overlays: colorSchemesInput.dark?.overlays || defaultDarkOverlays, @@ -53,12 +69,99 @@ export default function extendTheme(options = {}, ...args) { const palette = theme.colorSchemes[key].palette; // attach black & white channels to common node - if (key === 'dark') { - palette.common.background = palette.common.background || '#000'; - palette.common.onBackground = palette.common.onBackground || '#fff'; + if (key === 'light') { + setColor(palette.common, 'background', '#fff'); + setColor(palette.common, 'onBackground', '#000'); } else { - palette.common.background = palette.common.background || '#fff'; - palette.common.onBackground = palette.common.onBackground || '#000'; + setColor(palette.common, 'background', '#000'); + setColor(palette.common, 'onBackground', '#fff'); + } + + // assign component variables + assignNode(palette, [ + 'AppBar', + 'Chip', + 'FilledInput', + 'LinearProgress', + 'Skeleton', + 'Slider', + 'SnackbarContent', + 'StepConnector', + 'StepContent', + 'Switch', + 'TableCell', + 'Tooltip', + ]); + if (key === 'light') { + setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-100)'); + setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-400)'); + setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-700)'); + setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-700)'); + setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)'); + setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)'); + setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)'); + setColor(palette.LinearProgress, 'primaryBg', lighten(palette.primary.main, 0.62)); + setColor(palette.LinearProgress, 'secondaryBg', lighten(palette.secondary.main, 0.62)); + setColor(palette.LinearProgress, 'errorBg', lighten(palette.error.main, 0.62)); + setColor(palette.LinearProgress, 'infoBg', lighten(palette.info.main, 0.62)); + setColor(palette.LinearProgress, 'successBg', lighten(palette.success.main, 0.62)); + setColor(palette.LinearProgress, 'warningBg', lighten(palette.warning.main, 0.62)); + setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primaryChannel) / 0.11)'); + setColor(palette.Slider, 'primaryTrack', lighten(palette.primary.main, 0.62)); + setColor(palette.Slider, 'secondaryTrack', lighten(palette.secondary.main, 0.62)); + setColor(palette.Slider, 'errorTrack', lighten(palette.error.main, 0.62)); + setColor(palette.Slider, 'infoTrack', lighten(palette.info.main, 0.62)); + setColor(palette.Slider, 'successTrack', lighten(palette.success.main, 0.62)); + setColor(palette.Slider, 'warningTrack', lighten(palette.warning.main, 0.62)); + setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.8)); + setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-400)'); + setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-400)'); + setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-common-white)'); + setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-palette-grey-100)'); + setColor(palette.Switch, 'primaryDisabledColor', lighten(palette.primary.main, 0.62)); + setColor(palette.Switch, 'secondaryDisabledColor', lighten(palette.secondary.main, 0.62)); + setColor(palette.Switch, 'errorDisabledColor', lighten(palette.error.main, 0.62)); + setColor(palette.Switch, 'infoDisabledColor', lighten(palette.info.main, 0.62)); + setColor(palette.Switch, 'successDisabledColor', lighten(palette.success.main, 0.62)); + setColor(palette.Switch, 'warningDisabledColor', lighten(palette.warning.main, 0.62)); + setColor(palette.TableCell, 'border', lighten(alpha(palette.divider, 1), 0.88)); + setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92)); + } else { + 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 + setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-700)'); + setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-300)'); + setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-300)'); + setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)'); + setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)'); + setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)'); + setColor(palette.LinearProgress, 'primaryBg', darken(palette.primary.main, 0.5)); + setColor(palette.LinearProgress, 'secondaryBg', darken(palette.secondary.main, 0.5)); + setColor(palette.LinearProgress, 'errorBg', darken(palette.error.main, 0.5)); + setColor(palette.LinearProgress, 'infoBg', darken(palette.info.main, 0.5)); + setColor(palette.LinearProgress, 'successBg', darken(palette.success.main, 0.5)); + setColor(palette.LinearProgress, 'warningBg', darken(palette.warning.main, 0.5)); + setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primaryChannel) / 0.13)'); + setColor(palette.Slider, 'primaryTrack', darken(palette.primary.main, 0.5)); + setColor(palette.Slider, 'secondaryTrack', darken(palette.secondary.main, 0.5)); + setColor(palette.Slider, 'errorTrack', darken(palette.error.main, 0.5)); + setColor(palette.Slider, 'infoTrack', darken(palette.info.main, 0.5)); + setColor(palette.Slider, 'successTrack', darken(palette.success.main, 0.5)); + setColor(palette.Slider, 'warningTrack', darken(palette.warning.main, 0.5)); + setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.98)); + setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-600)'); + setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-600)'); + setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-grey-300)'); + setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-palette-grey-600)'); + setColor(palette.Switch, 'primaryDisabledColor', darken(palette.primary.main, 0.55)); + setColor(palette.Switch, 'secondaryDisabledColor', darken(palette.secondary.main, 0.55)); + setColor(palette.Switch, 'errorDisabledColor', darken(palette.error.main, 0.55)); + setColor(palette.Switch, 'infoDisabledColor', darken(palette.info.main, 0.55)); + setColor(palette.Switch, 'successDisabledColor', darken(palette.success.main, 0.55)); + setColor(palette.Switch, 'warningDisabledColor', darken(palette.warning.main, 0.55)); + setColor(palette.TableCell, 'border', darken(alpha(palette.divider, 1), 0.68)); + setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92)); } palette.common.backgroundChannel = colorChannel(palette.common.background); @@ -66,12 +169,6 @@ export default function extendTheme(options = {}, ...args) { palette.dividerChannel = colorChannel(palette.divider); - // special token for Tooltip - // TODO: consider adding `main`, and `light` to palette.grey to make it consistent. - if (!palette.grey.dark) { - palette.grey.dark = palette.grey[700]; - } - Object.keys(palette).forEach((color) => { const colors = palette[color]; @@ -97,10 +194,13 @@ export default function extendTheme(options = {}, ...args) { palette[color].secondaryChannel = colorChannel(colors.secondary); } - // Action colors: action.activeChannel + // Action colors: action.active, action.selected if (colors.active) { palette[color].activeChannel = colorChannel(colors.active); } + if (colors.selected) { + palette[color].selectedChannel = colorChannel(colors.selected); + } }); }); diff --git a/packages/mui-material/src/styles/experimental_extendTheme.test.js b/packages/mui-material/src/styles/experimental_extendTheme.test.js index 117d04c98c5fe9..a0c27dd65e8d13 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.test.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.test.js @@ -83,34 +83,11 @@ describe('experimental_extendTheme', () => { expect(theme.colorSchemes.light.palette.dividerChannel).to.equal('0 0 0'); - expect(theme.colorSchemes.light.palette.grey.darkChannel).to.equal('97 97 97'); - expect(theme.colorSchemes.dark.palette.grey.darkChannel).to.equal('97 97 97'); - expect(theme.colorSchemes.dark.palette.action.activeChannel).to.equal('255 255 255'); expect(theme.colorSchemes.light.palette.action.activeChannel).to.equal('0 0 0'); - }); - it('should change grey darkChannel', () => { - const theme = extendTheme({ - colorSchemes: { - light: { - palette: { - grey: { - dark: '#888', - }, - }, - }, - dark: { - palette: { - grey: { - dark: '#999', - }, - }, - }, - }, - }); - expect(theme.colorSchemes.light.palette.grey.darkChannel).to.equal('136 136 136'); - expect(theme.colorSchemes.dark.palette.grey.darkChannel).to.equal('153 153 153'); + expect(theme.colorSchemes.dark.palette.action.selectedChannel).to.equal('255 255 255'); + expect(theme.colorSchemes.light.palette.action.selectedChannel).to.equal('0 0 0'); }); it('should generate common background, onBackground channels', () => { @@ -225,12 +202,16 @@ describe('experimental_extendTheme', () => { it('should provide the default opacities', () => { const theme = extendTheme(); expect(theme.colorSchemes.light.opacity).to.deep.equal({ - placeholder: 0.42, + inputPlaceholder: 0.42, inputTouchBottomLine: 0.42, + switchTrackDisabled: 0.12, + switchTrack: 0.38, }); expect(theme.colorSchemes.dark.opacity).to.deep.equal({ - placeholder: 0.5, + inputPlaceholder: 0.5, inputTouchBottomLine: 0.7, + switchTrackDisabled: 0.2, + switchTrack: 0.3, }); }); @@ -239,22 +220,22 @@ describe('experimental_extendTheme', () => { colorSchemes: { light: { opacity: { - placeholder: 1, + inputPlaceholder: 1, }, }, dark: { opacity: { - placeholder: 0.2, + inputPlaceholder: 0.2, }, }, }, }); - expect(theme.colorSchemes.light.opacity).to.deep.equal({ - placeholder: 1, + expect(theme.colorSchemes.light.opacity).to.deep.include({ + inputPlaceholder: 1, inputTouchBottomLine: 0.42, }); - expect(theme.colorSchemes.dark.opacity).to.deep.equal({ - placeholder: 0.2, + expect(theme.colorSchemes.dark.opacity).to.deep.include({ + inputPlaceholder: 0.2, inputTouchBottomLine: 0.7, }); }); diff --git a/packages/mui-system/src/Box/Box.spec.tsx b/packages/mui-system/src/Box/Box.spec.tsx index 46c29e63048f81..4e81f4bd530ea4 100644 --- a/packages/mui-system/src/Box/Box.spec.tsx +++ b/packages/mui-system/src/Box/Box.spec.tsx @@ -56,22 +56,22 @@ function ThemeCallbackTest() { function CssVariablesWithNestedSelectors() { ({ - '--md-palette-primary-main': '#FF0000', + '--mui-palette-primary-main': '#FF0000', })} />; ({ - '--md-palette-primary-main': '#FF0000', + '--mui-palette-primary-main': '#FF0000', '&:hover': { backgroundColor: theme.palette.primary.main, - '--md-palette-primary-main': (t) => theme.palette.primary.main, - '--md-spacing': (t) => theme.shape.borderRadius, + '--mui-palette-primary-main': (t) => theme.palette.primary.main, + '--mui-spacing': (t) => theme.shape.borderRadius, }, })} />; ;