Дизайн-токены ui.design-tokens и Air Design

Дизайн-токены — CSS-переменные с цветами, размерами шрифтов, отступами и скруглениями. Компоненты раздела берут оформление из токенов. Те же токены можно использовать в стилях своих блоков, чтобы блоки выглядели согласованно с интерфейсом.

Выбрать набор токенов

Токены объявляют два расширения.

  • ui.design-tokens — основной набор с переменными —ui-color-*, —ui-font-size-*, —ui-space-*, —ui-border-radius-* и другими.

  • ui.design-tokens.air — набор для Air Design с переменными —ui-color-design-*, —ui-color-bg-* и другими. Значения части переменных зависят от контекста — светлого или темного фона.

Полный список переменных основного набора лежит в файле bitrix/js/ui/design-tokens/dist/ui.design-tokens.css, набора для Air Design — в файле bitrix/js/ui/design-tokens/air/dist/air-design-tokens.css.

Подключить токены

Многие расширения раздела, например ui.alerts, ui.notification, ui.switcher и ui.forms, подключают ui.design-tokens как зависимость. Если токены нужны в стилях страницы без таких расширений, загрузите набор сами.

\Bitrix\Main\UI\Extension::load('ui.design-tokens');

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

Подставляйте токены в свойства CSS через функцию var(). Основной набор содержит, например, такие цветовые переменные.

  • —ui-color-primary — основной акцентный цвет.

  • —ui-color-base-* — оттенки серого для текста и границ.

  • —ui-color-palette-* — исходная палитра, на которой построены остальные цвета.

Пример. Стили карточки документа используют токены цвета текста, фона, отступа и скругления.

.document-card {
    padding: var(—ui-space-inset-md);
    border-radius: var(—ui-border-radius-md);
    background: var(—ui-color-background-primary);
    color: var(—ui-color-text-primary);
    font-size: var(—ui-font-size-md);
}

.document-card__hint {
    color: var(—ui-color-base-70);
}

Включить Air Design

Air Design — вариант оформления интерфейса Битрикс24. Его включают двумя способами.

  • Константа AIR_SITE_TEMPLATE включает Air Design на стороне сервера. Модуль intranet определяет ее в публичной части сайта, если сайт работает на шаблоне bitrix24. Панель инструментов ui.toolbar переводит добавленные кнопки в оформление Air. PHP-классы кнопок ui.buttons включают его параметром 'air' => true, только если константа определена.

  • Параметр useAirDesign: true включает Air Design для отдельного JS-компонента. Параметр есть, например, у кнопок ui.buttons, переключателя ui.switcher, счетчика ui.counter, кольцевого индикатора ui.progressround, уведомлений ui.notification и окна сообщения ui.dialogs.messagebox.

У перечисленных JS-компонентов параметр useAirDesign по умолчанию равен false. Если на странице с Air Design компонент тоже должен быть в оформлении Air, передайте useAirDesign: true в параметрах компонента. Если кнопка, переключатель или счетчик создаются из готовой разметки, класс —air на их узле включает оформление Air.

Связанные материалы

Предыдущая
JS-ядро main.core и события
Следующая
Типографика