Система дизайн-токенов

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

Типы дизайн-токенов

  1. Цветовые токены Цветовые токены отвечают за базовые цвета и их вариации. В Ant Design они разделены на несколько категорий:

    • Primary Colors — основной цвет интерфейса (@primary-color), который используется для кнопок, ссылок и акцентов.
    • Semantic Colors — семантические цвета, такие как @success-color, @error-color, @warning-color, которые применяются для индикаторов состояния.
    • Neutral Colors — нейтральные цвета для фонов, текста и границ (@text-color, @background-color, @border-color).

  2. Токены типографики Управляют шрифтами, размерами и высотой строк:

    • @font-family — семейство шрифтов.
    • @font-size-base — базовый размер шрифта.
    • @line-height-base — базовая высота строки.
    • Токены для заголовков (@heading-color, @heading-1-size) позволяют унифицировать заголовки различных уровней.

  3. Пространственные токены Отвечают за отступы, размеры компонентов и интервал между элементами:

    • @padding-lg, @padding-md, @padding-sm — внутренние отступы.
    • @margin-lg, @margin-md, @margin-sm — внешние отступы.
    • @border-radius-base — базовый радиус скругления углов.

  4. Токены анимации и эффектов Управляют переходами и тенями:

    • @motion-duration-base — стандартная длительность анимации.
    • @box-shadow-base — базовая тень для элементов.

Применение токенов в компонентах

В Ant Design все компоненты используют токены через Less-переменные или через систему ConfigProvider, что позволяет динамически изменять тему.

Пример изменения темы через Less:

@primary-color: #1DA57A; // основной цвет
@link-color: #1890ff;    // цвет ссылок
@border-radius-base: 4px; // радиус скругления кнопок

После перекомпиляции Less все компоненты автоматически подстроятся под новые значения токенов.

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

import { ConfigProvider, Button } from 'antd';

const App = () => (
  <ConfigProvider
    theme={{
      token: {
        colorPrimary: '#1DA57A',
        borderRadius: 6,
        fontSize: 16,
      },
    }}
  >
    <Button type="primary">Основная кнопка</Button>
  </ConfigProvider>
);

С помощью ConfigProvider можно менять токены на лету, без пересборки проекта. Это особенно полезно для динамических тем или кастомизации интерфейсов под разные бренды.

Создание пользовательских токенов

Ant Design позволяет создавать свои токены, расширяя стандартный набор. Для этого необходимо определить объект токенов и передать его в тему:

const customTheme = {
  token: {
    colorPrimary: '#ff4d4f',
    colorSuccess: '#52c41a',
    borderRadiusBase: 8,
    customSpacing: 20, // пользовательский токен
  },
};

<ConfigProvider theme={customTheme}>
  <Button type="primary">Кастомная кнопка</Button>
</ConfigProvider>

Пользовательские токены можно использовать в компонентах через theme.token, обеспечивая единообразие и предсказуемость визуального стиля.

Система токенов и дизайн-системы

Система токенов — это ядро дизайн-системы Ant Design. Она обеспечивает:

  • Масштабируемость: изменения одного токена отражаются во всех компонентах.
  • Гибкость: легко переключать темы и поддерживать несколько цветовых схем.
  • Согласованность: единая визуальная идентичность в большом проекте.
  • Поддерживаемость: централизованное управление стилями упрощает обновления и рефакторинг.

Практические рекомендации

  • Использовать токены везде, где применяются цвета, шрифты и размеры, вместо жестко заданных значений.
  • Выносить часто используемые пользовательские значения в отдельные токены для повторного использования.
  • Применять ConfigProvider для динамического изменения тем, особенно при поддержке светлой и темной схемы.
  • Проверять семантическую нагрузку цветов (success, error, warning), чтобы интерфейс оставался понятным и доступным.

Система дизайн-токенов Ant Design позволяет создавать интерфейсы, которые легко масштабируются, настраиваются и поддерживаются, одновременно обеспечивая единый визуальный язык и высокое качество пользовательского опыта.

Оглавление