Css Vars

// Old
color: theme.palette.common.white,
 
// New
color: theme.vars.palette.common.white,

// Old
import { alpha } from '@mui/material/styles';
alpha(theme.palette.text.primary, 0.2)
 
// New
import { varAlpha } from 'src/theme/styles/utils';
varAlpha(theme.vars.palette.text.primary, 0.2)

import { alpha } from '@mui/material/styles';
 
<Box
  sx={{
    color: theme.palette.mode === 'light' ? 'primary.main' : 'primary.light',
    boxShadow: `-80px 80px 80px ${
    theme.palette.mode === 'light'
    ? alpha(theme.palette.grey[500], 0.48)
    : alpha(theme.palette.common.black, 0.24)
    }`,
  }}
>
Box
</Box>

import { stylesMode, varAlpha } from 'src/theme/styles';
 
<Box
  sx={{
    color: 'primary.main',
    boxShadow: `-80px 80px 80px ${varAlpha(theme.vars.palette.grey['500Channel'], 0.48)}`,
    [stylesMode.dark]: {
    color: 'primary.light',
    boxShadow: `-80px 80px 80px ${varAlpha(theme.vars.palette.common.blackChannel, 0.24)}`,
    },
  }}
>
Box
</Box>