Цветовые токены и их использование

Цветовые токены в MUI представляют собой централизованную систему управления цветами интерфейса, обеспечивающую единообразие и согласованность визуального оформления. Они позволяют задать основные цвета темы приложения, а затем использовать их через компоненты, обеспечивая гибкость и масштабируемость дизайна.

Основные цветовые палитры

MUI предоставляет стандартные цветовые палитры, включающие primary, secondary, error, warning, info и success. Каждая палитра состоит из нескольких оттенков, обозначенных числовыми значениями: 50, 100, 200 … до 900, а также контрастного цвета текста contrastText.

Пример структуры палитры:

import { createTheme } from '@mui/material/styles';
import { blue, pink } from '@mui/material/colors';

const theme = createTheme({
  palette: {
    primary: {
      main: blue[500],
      light: blue[300],
      dark: blue[700],
      contrastText: '#fff'
    },
    secondary: {
      main: pink[500],
      light: pink[300],
      dark: pink[700],
      contrastText: '#000'
    }
  }
});

В этом примере blue[500] и pink[500] задают основные цвета для компонентов, а contrastText автоматически определяет цвет текста для достаточного контраста.

Настройка собственной палитры

Для более точного соответствия брендбуку или дизайнерским требованиям можно создавать собственные цветовые токены. В MUI это делается через объект palette при создании темы:

const customTheme = createTheme({
  palette: {
    brandPrimary: {
      main: '#1a73e8',
      light: '#4d95ff',
      dark: '#0049b3',
      contrastText: '#ffffff'
    },
    brandSecondary: {
      main: '#ff6f00',
      light: '#ffa040',
      dark: '#c43e00',
      contrastText: '#000000'
    }
  }
});

После добавления пользовательских токенов их можно использовать через систему sx или styled компоненты:

import Button from '@mui/material/Button';

<Button sx={{ bgcolor: 'brandPrimary.main', color: 'brandPrimary.contrastText' }}>
  Кнопка
</Button>

Использование цветовых токенов в компонентах

MUI интегрирует цветовые токены на уровне всех компонентов. В большинстве компонентов есть пропсы color, позволяющие ссылаться на палитру темы:

<Button color="primary">Primary Button</Button>
<Button color="secondary">Secondary Button</Button>
<Alert severity="error">Ошибка!</Alert>

Некоторые компоненты используют токены для автоматического расчета оттенков при hover или disabled состояниях. Например, кнопки Button и элементы Chip применяют light и dark версии цвета для интерактивного состояния.

Система прозрачности и альфа-канала

MUI предоставляет утилиту alpha, которая позволяет задавать прозрачность цветов:

import { alpha } from '@mui/material';

<Box sx={{ bgcolor: alpha(theme.palette.primary.main, 0.2) }}>
  Полупрозрачный фон
</Box>

Функция alpha принимает цвет и значение прозрачности от 0 до 1. Это удобно для создания overlay-эффектов, теней и выделений.

Цвета фона и текста

В MUI выделяют отдельные токены для background и text. Например:

palette: {
  background: {
    default: '#f5f5f5',
    paper: '#ffffff'
  },
  text: {
    primary: '#212121',
    secondary: '#757575',
    disabled: '#bdbdbd'
  }
}
  • background.default — основной фон приложения.
  • background.paper — фон для карточек и поверхностей.
  • text.primary — основной цвет текста.
  • text.secondary — вспомогательный текст.
  • text.disabled — цвет текста в неактивных элементах.

Поддержка светлой и тёмной темы

MUI упрощает переключение между светлой (light) и тёмной (dark) темой, предоставляя возможность автоматически менять токены:

const darkTheme = createTheme({
  palette: {
    mode: 'dark',
    primary: {
      main: '#90caf9'
    },
    background: {
      default: '#121212',
      paper: '#1d1d1d'
    },
    text: {
      primary: '#ffffff',
      secondary: '#aaaaaa'
    }
  }
});

Токены автоматически адаптируют цвета компонентов под выбранный режим, включая контрастность и оттенки hover.

Практика с sx и styled

Цветовые токены удобно использовать в sx для быстрого стилизования:

<Box sx={{ bgcolor: 'primary.main', color: 'text.primary', p: 2 }}>
  Контейнер с основным цветом
</Box>

Или через styled для создания переиспользуемых компонентов:

import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';

const BrandButton = styled(Button)(({ theme }) => ({
  backgroundColor: theme.palette.brandPrimary.main,
  color: theme.palette.brandPrimary.contrastText,
  '&:hover': {
    backgroundColor: theme.palette.brandPrimary.dark
  }
}));

Итоговая концепция

Цветовые токены MUI обеспечивают консистентность, масштабируемость и адаптивность дизайна, позволяя управлять цветами всего приложения через единый объект theme.palette. Они поддерживают:

  • стандартные палитры MUI,
  • кастомные брендовые цвета,
  • светлую и тёмную темы,
  • прозрачность и overlay-эффекты,
  • автоматическое применение в компонентах через пропсы и утилиты sx/styled.

Эта система делает управление цветами централизованным и гибким, упрощая поддержку визуального единства и соответствие дизайну.

Оглавление