Токены дизайна

В библиотеке MUI (Material-UI) токены дизайна представляют собой централизованное определение визуальных и функциональных параметров интерфейса, таких как цвета, размеры, отступы, типографика и состояние компонентов. Они позволяют обеспечить единообразие и масштабируемость дизайна в приложениях на JavaScript и React.

Структура токенов

Токены дизайна в MUI хранятся в объекте theme, который создается с помощью функции createTheme. Основные категории токенов:

  1. Цветовая палитра (palette)
  2. Типографика (typography)
  3. Отступы и размеры (spacing)
  4. Формы и границы (shape)
  5. Тени (shadows)
  6. Состояния и взаимодействия (overrides / components)

Пример базового создания темы:

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
      light: '#63a4ff',
      dark: '#004ba0',
      contrastText: '#fff',
    },
    secondary: {
      main: '#dc004e',
      contrastText: '#fff',
    },
  },
  typography: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
    h1: { fontSize: '2.5rem', fontWeight: 500 },
    body1: { fontSize: '1rem' },
  },
  spacing: 8,
  shape: { borderRadius: 4 },
});

Здесь ключевые токены — palette.primary.main, typography.h1, spacing и shape.borderRadius.

Цветовая палитра

Palette — основной механизм управления цветами интерфейса. Она делится на следующие категории:

  • primary и secondary — базовые цвета приложения.
  • error, warning, info, success — стандартные состояния компонентов.
  • text — цвета текста: primary, secondary, disabled.
  • background — цвета фона: default, paper.
  • action — состояния интерактивных элементов: hover, selected, disabled.

Пример использования цветов в компоненте:

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

<Button color="primary" variant="contained">
  Primary Button
</Button>

<Button sx={{ bgcolor: 'secondary.main', color: 'secondary.contrastText' }}>
  Custom Secondary Button
</Button>

Использование токенов через sx и встроенные пропсы позволяет менять стиль компонентов без жесткой привязки к CSS.

Типографика

Типографика задается объектом typography. Она включает:

  • fontFamily — семейство шрифтов.
  • fontSize — размер шрифта по умолчанию.
  • fontWeight — насыщенность.
  • lineHeight и letterSpacing — высота строки и межбуквенный интервал.
  • Предопределенные варианты: h1…h6, body1, body2, caption, button.

Пример использования:

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

<Typography variant="h4" component="h2">
  Заголовок H4
</Typography>

<Typography variant="body1">
  Обычный текст с использованием токенов типографики.
</Typography>

Каждый вариант автоматически наследует параметры темы, что гарантирует единообразие.

Отступы и размеры

Spacing — функция для стандартизации отступов и размеров элементов. По умолчанию базовый шаг равен 8px.

<Box sx={{ m: 2, p: 3 }}>
  Контент с внешним отступом 16px (2*8) и внутренним 24px (3*8)
</Box>
  • m — margin (внешний отступ)
  • p — padding (внутренний отступ)
  • mt, mb, ml, mr — отдельные стороны
  • mx, my, px, py — горизонтальные и вертикальные пары

Использование токенов spacing обеспечивает консистентность между всеми компонентами.

Форма и границы

Shape управляет скруглениями и геометрией компонентов:

const theme = createTheme({
  shape: { borderRadius: 12 },
});
  • borderRadius применяется к кнопкам, карточкам, модальным окнам.
  • Можно создавать кастомные радиусы для отдельных компонентов через sx или styled.

Тени

Тени (shadows) задаются массивом предопределенных уровней (0–24):

<Box sx={{ boxShadow: 3, p: 2 }}>
  Контент с тенью уровня 3
</Box>
  • 0 — без тени
  • 1–24 — возрастающая интенсивность тени
  • Используются для придания глубины компонентам, соблюдая принцип Material Design.

Компонентные токены и состояния

Через объект components можно переопределять токены на уровне отдельных компонентов:

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: 'none',
          borderRadius: 8,
        },
      },
      defaultProps: {
        variant: 'contained',
        color: 'primary',
      },
    },
  },
});
  • styleOverrides — изменение стилей на уровне токенов
  • defaultProps — значения по умолчанию для пропсов компонентов
  • Позволяет централизованно управлять интерфейсом без дублирования кода.

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

Можно добавлять свои собственные токены через расширение темы:

const theme = createTheme({
  custom: {
    brandColor: '#ff5722',
    headerHeight: 64,
  },
});

Доступ через theme.custom.brandColor позволяет использовать их в sx, styled или логике компонентов, сохраняя консистентность.

Принципы работы с токенами

  1. Централизация — все ключевые параметры дизайна хранятся в theme.
  2. Повторное использование — токены применяются в разных компонентах без дублирования стилей.
  3. Наследование и переопределение — компоненты используют базовые токены, которые можно изменять локально.
  4. Скалируемость — добавление новых токенов или изменение существующих не нарушает консистентность.

Интеграция темы с приложением

Темы подключаются через ThemeProvider:

import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

<ThemeProvider theme={theme}>
  <CssBaseline />
  <App />
</ThemeProvider>
  • CssBaseline — сброс базовых стилей браузера и применение глобальных токенов темы.
  • Все дочерние компоненты получают доступ к токенам через theme и useTheme().

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

Оглавление