# Дизайн-токены для настройки стилей

> [HTML Version](design-tokens.html)

Начиная с версии 2026.4 в ELMA365 используется технология **дизайн‑токенов**. Это специальные переменные, в которых хранятся значения мельчайших единиц визуального стиля системы: цвета, размеры, отступы, радиусы скругления и т. п. 

При помощи дизайн-токенов определяется дизайн системы. Они помогают сохранить единообразие стилей в интерфейсе. Например, вместо определённых HEX‑кодов цветов для текста применяются такие токены, как **color-text-primary**, **color-text-secondary** и т. д. При настройке корпоративного стиля вы можете измените значение этих токенов. Новые цвета текста применятся ко всему интерфейсу.

Рассмотрим, как работать с дизайн-токенами для настройки стилей в своей компании.

## Как использовать дизайн-токены

Вы можете применять дизайн-токены:

1. [В пользовательских компонентах](#in-custom-components) — когда вы настраиваете форму, страницу или пользовательский виджет в дизайнере интерфейсов, используйте токены в CSS‑стилях. Доступны два варианта применения:

- в качестве значений — для сохранения единообразия вместо определённых размеров, цветов и т. д. используйте в стилях дизайн‑токены, хранящие подходящие значения. Если значение токена изменится, стили во всех настроенных компонентах с этим токеном автоматически обновятся;

- в качестве свойств — чтобы задать внешний вид системных виджетов, измените в их стилях параметры дизайн‑токенов. Для этого токен добавляется в код в качестве свойства, и для него задаётся новое значение. Например, так можно изменить фон виджета **Кнопка** или **Информационный блок**. 

2. [На уровне компании](#for-whole-company) — если вы настраиваете корпоративный стиль для интерфейса ELMA365, опционально можно задать свои размеры, отступы, радиусы скругления и т. д. в дизайн-токенах. Новые значения устанавливаются в файле пользовательских стилей и применяются ко всем интерфейсам системы. 

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

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

- в [редакторе стилей](style-editor.md);

- в [виджете Код](code_widget.md#configure-styles).

Работа с этими инструментами происходит схожим образом. Рассмотрим применение дизайн-токенов на примере редактора стилей.

Допустим, вы хотите визуально выделить для пользователя информационный блок, расположенный на форме. Чтобы задать для него дополнительный отступ и особый цвет:

1. В дизайнере интерфейсов откройте настройки виджета **Информационный блок**. 

2. Чтобы определять, какие стили применятся к виджету, [добавьте для него класс](common_widget_settings.md#html-classes) **custom-info-box** и нажмите на его название. Откроется редактор стилей.

3. Чтобы добавить отступ над виджетом, используйте стандартное свойство `margin-top` и задайте для него значение с помощью дизайн-токена. Для этого установите курсор напротив свойства, затем в контекстном меню выберите **Добавить дизайн-токен**.

**(design-tokens-1.png)**

4. В открывшемся окне найдите подходящий токен. Вы можете фильтровать токены:

**(design-tokens-2.png)**

- по использованию — с помощью переключателя в левом верхнем углу укажите вид токенов:

	- **Семантические** — могут применяться для разных элементов интерфейса и сгруппированы по смыслу. Хранят доступные цвета, отступы, радиусы скругления и т. п.

	- **Компонентные** — предназначены для определённых элементов интерфейса. Например, в дизайн‑токенах для информационного блока заданы значения цвета его фона, цвета текста, внутренний отступ и т. д. Выберите в поле **Компонент** элемент интерфейса, чтобы увидеть предназначенные для него токены;

- по типу значения — в поле **Тип** выберите, что хранится в токене: цвет, размер или шрифт;

- по названию токена — введите текст в строку поиска.

5. Выберите в списке дизайн-токен, в котором хранится нужный размер отступа, и нажмите **Добавить**. Токен появится в CSS‑коде в корректном для распознавания виде:

````
var(--el-b-spacing-5x)

````
где:

	- `var()`— функция, которая используется для вставки значения переменной в CSS‑код;

	- `--el` — префикс, который позволяет получить доступ к переменной в дизайнере интерфейсов;

	- `-b` или `-c` — префикс, обозначающий вид токена: семантический или компонентный.

6. Так как цвет фона информационного блока задаётся в системе с помощью дизайн‑токена, для изменения цвета нужно установить другое значение токена в рамках этого виджета. Повторите шаги 3–5, чтобы добавить в код токен с параметрами:  

	- вид — компонентный;

	- компонент — элемент интерфейса **info‑block**;

	- расположение — **background > color > default**.

7. Чтобы добавленный токен использовался как свойство, для которого можно задать значение, в редакторе стилей удалите для него функцию `var()`.

8. Установите для свойства значение, например, с помощью другого дизайн-токена, хранящего нужный цвет. 

Получившийся 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);  
\}

9. ````
Нажмите в редакторе стилей **Применить**, чтобы увидеть в шаблоне формы результат. У виджета **Информационный блок** появится дополнительный отступ и изменится цвет.

**(design-tokens-3.png)**

10. Чтобы изменения отображались для пользователей, сохраните и опубликуйте форму с информационным блоком.

### Определить значения дизайн-токенов на уровне компании

Рассмотрим, как с помощью дизайн-токенов изменить внешний вид системы для соответствия корпоративному стилю. Например, вы можете задать радиус скругления и толщину границ для всех кнопок, выпадающих списков, полей для ввода текста, строк поиска и т. д.

Чтобы определить значения дизайн-токенов для всей системы:

1. Получите названия дизайн‑токенов, значения которых вы хотите изменить. Для этого откройте любую форму или страницу в дизайнере интерфейсов, [добавьте токены в код в редакторе стилей](#insert-token) и скопируйте их названия с префиксами.

2. Подготовьте файл формата **.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;  
\}

3. ````
Перейдите в раздел **Администрирование > Тема оформления**, загрузите файл **.css** в поле **Файл пользовательских стилей**.

4. Сохраните настройки.

После этого изменятся стили границ в системных разделах ELMA365, а также в пользовательских компонентах, для которых стили заданы с помощью дизайн‑токенов.

**(design-tokens-4.png)**