Начиная с версии 2026.4 в ELMA365 используется технология дизайн‑токенов. Это специальные переменные, в которых хранятся значения мельчайших единиц визуального стиля системы: цвета, размеры, отступы, радиусы скругления и т. п.
При помощи дизайн-токенов определяется дизайн системы. Они помогают сохранить единообразие стилей в интерфейсе. Например, вместо определённых HEX‑кодов цветов для текста применяются такие токены, как color-text-primary, color-text-secondary и т. д. При настройке корпоративного стиля вы можете измените значение этих токенов. Новые цвета текста применятся ко всему интерфейсу.
Рассмотрим, как работать с дизайн-токенами для настройки стилей в своей компании.
Как использовать дизайн-токены
Вы можете применять дизайн-токены:
- В пользовательских компонентах — когда вы настраиваете форму, страницу или пользовательский виджет в дизайнере интерфейсов, используйте токены в CSS‑стилях. Доступны два варианта применения:
- в качестве значений — для сохранения единообразия вместо определённых размеров, цветов и т. д. используйте в стилях дизайн‑токены, хранящие подходящие значения. Если значение токена изменится, стили во всех настроенных компонентах с этим токеном автоматически обновятся;
- в качестве свойств — чтобы задать внешний вид системных виджетов, измените в их стилях параметры дизайн‑токенов. Для этого токен добавляется в код в качестве свойства, и для него задаётся новое значение. Например, так можно изменить фон виджета Кнопка или Информационный блок.
- На уровне компании — если вы настраиваете корпоративный стиль для интерфейса ELMA365, опционально можно задать свои размеры, отступы, радиусы скругления и т. д. в дизайн-токенах. Новые значения устанавливаются в файле пользовательских стилей и применяются ко всем интерфейсам системы.
Использовать дизайн-токены в пользовательских компонентах
Дизайн-токены можно использовать для настройки внешнего вида форм, страниц и пользовательских виджетов с помощью CSS‑стилей. Они доступны:
- в редакторе стилей;
- в виджете Код.
Работа с этими инструментами происходит схожим образом. Рассмотрим применение дизайн-токенов на примере редактора стилей.
Допустим, вы хотите визуально выделить для пользователя информационный блок, расположенный на форме. Чтобы задать для него дополнительный отступ и особый цвет:
- В дизайнере интерфейсов откройте настройки виджета Информационный блок.
- Чтобы определять, какие стили применятся к виджету, добавьте для него класс custom-info-box и нажмите на его название. Откроется редактор стилей.
- Чтобы добавить отступ над виджетом, используйте стандартное свойство margin-top и задайте для него значение с помощью дизайн-токена. Для этого установите курсор напротив свойства, затем в контекстном меню выберите Добавить дизайн-токен.
- В открывшемся окне найдите подходящий токен. Вы можете фильтровать токены:
- по использованию — с помощью переключателя в левом верхнем углу укажите вид токенов:
- Семантические — могут применяться для разных элементов интерфейса и сгруппированы по смыслу. Хранят доступные цвета, отступы, радиусы скругления и т. п.
- Компонентные — предназначены для определённых элементов интерфейса. Например, в дизайн‑токенах для информационного блока заданы значения цвета его фона, цвета текста, внутренний отступ и т. д. Выберите в поле Компонент элемент интерфейса, чтобы увидеть предназначенные для него токены;
- по типу значения — в поле Тип выберите, что хранится в токене: цвет, размер или шрифт;
- по названию токена — введите текст в строку поиска.
- Выберите в списке дизайн-токен, в котором хранится нужный размер отступа, и нажмите Добавить. Токен появится в CSS‑коде в корректном для распознавания виде:
var(--el-b-spacing-5x)
где:
- var()— функция, которая используется для вставки значения переменной в CSS‑код;
- --el — префикс, который позволяет получить доступ к переменной в дизайнере интерфейсов;
- -b или -c — префикс, обозначающий вид токена: семантический или компонентный.
- Так как цвет фона информационного блока задаётся в системе с помощью дизайн‑токена, для изменения цвета нужно установить другое значение токена в рамках этого виджета. Повторите шаги 3–5, чтобы добавить в код токен с параметрами:
- вид — компонентный;
- компонент — элемент интерфейса info‑block;
- расположение — background > color > default.
- Чтобы добавленный токен использовался как свойство, для которого можно задать значение, в редакторе стилей удалите для него функцию var().
- Установите для свойства значение, например, с помощью другого дизайн-токена, хранящего нужный цвет.
Получившийся CSS‑код выглядит так:
.custom-info-box {
margin-top: var(--el-b-spacing-5x);
--el-c-info-block-background-color-default: var(--el-b-color-special-mint-green);
}
- Нажмите в редакторе стилей Применить, чтобы увидеть в шаблоне формы результат. У виджета Информационный блок появится дополнительный отступ и изменится цвет.
- Чтобы изменения отображались для пользователей, сохраните и опубликуйте форму с информационным блоком.
Определить значения дизайн-токенов на уровне компании
Рассмотрим, как с помощью дизайн-токенов изменить внешний вид системы для соответствия корпоративному стилю. Например, вы можете задать радиус скругления и толщину границ для всех кнопок, выпадающих списков, полей для ввода текста, строк поиска и т. д.
Чтобы определить значения дизайн-токенов для всей системы:
- Получите названия дизайн‑токенов, значения которых вы хотите изменить. Для этого откройте любую форму или страницу в дизайнере интерфейсов, добавьте токены в код в редакторе стилей и скопируйте их названия с префиксами.
- Подготовьте файл формата .css, в котором для дизайн-токенов задаются пользовательские значения:
:root:not(.non-existing) { /* Используется для увеличения приоритета по сравнению со значениями по умолчанию */
--el-b-border-radius-base: 8px;
--el-b-border-width-base: 2px;
--el-b-border-width-m: 4px;
--el-b-border-width-s: 2px;
}
- Перейдите в раздел Администрирование > Тема оформления, загрузите файл .css в поле Файл пользовательских стилей.
- Сохраните настройки.
После этого изменятся стили границ в системных разделах ELMA365, а также в пользовательских компонентах, для которых стили заданы с помощью дизайн‑токенов.
