CSS variables

This guide explains how to use CSS theme variables in Material UI v6+ with the Zone design system.

✅ Applies from v3.0.0 and above

🎨 Color

🔗 Reference:

MUI – Using theme variables

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

💧 Alpha transparency

Replace alpha() with varAlpha() for full support with CSS variables.

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

🌙 Dark mode support

Use theme.applyStyles('dark', { ... }) to apply overrides for dark mode.

🔗 Related docs:

Old

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

New

import { varAlpha } from 'minimal-shared/utils';
 
<Box
  sx={{
    color: 'primary.main',
    boxShadow: `-80px 80px 80px ${varAlpha(theme.vars.palette.grey['500Channel'], 0.48)}`,
    // ✅ Dark mode support
    ...theme.applyStyles('dark', {
      color: 'primary.light',
      boxShadow: `-80px 80px 80px ${varAlpha(theme.vars.palette.common.blackChannel, 0.24)}`,
    }),
  }}
>
  Box
</Box>