Дизайн-токены

Система дизайн-токенов обеспечивает централизованное хранение и управление базовыми параметрами интерфейса: цветами (color), размерами и отступами (dimensions), типографикой (font) и эффектами (effects). Дизайн-токены используются во всех компонентах системы и позволяют обеспечивать единый внешний вид, быструю смену темы оформления, а также поддержку дизайна при масштабировании системы.

внимание

В текущей реализации поддерживается настройка токенов только категорий color и font-family.

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

Чтобы переопределить стиль, создайте новый CSS-файл с нужными значениями токенов и укажите его название в корневом файле index.html.

Дизайн-токен – это атомарная единица визуального оформления интерфейса, которая хранит значение дизайн-параметра в машиночитаемом виде, например, цвет, шрифт, отступ или радиус скругления.

Дизайн-токены реализуются с помощью CSS-переменных и доступны:

• в стилях компонентов;
• в клиентских скриптах;
• в скриптах виджетов.

Пример оформления дизайн-токенов:

.Filter {
    background: var(--color-fill-background-container-basic-primary);
    border-bottom: 1px solid var(--color-stroke-basic-primary);
    border-top: 1px solid var(--color-stroke-basic-primary);
    padding: 24px;

    &.compact {
        padding-top: 0;
  }
}

Компоненты системы, поддерживающие дизайн-токены

• Поля ввода: codeMirror, color, conditions, daysOfWeek, documentId, htmlInput, image, list, maskedInput, reference, select, stringInput, templateField, textarea, url, unavailableField
• Элементы управления: checkbox, toggle, radiobutton
• Сообщения под полями: fieldMessage
• Компонент-обертка поля: fieldWrapper
• Секции форм: section
• Конструктор условий: conditionFilters, conditionFields, filter
• Отчеты и конструктор отчетов: report
• Табуляция: tabs, slider
• Связанные списки: relatedLists
• Вкладки на связанных списках: relatedListTab
• Заголовки бокового меню настроек: sidebar
• Таблицы: table, groupedTable
• Модальные окна: modalWindow
• Вложения: attachment
• Листовое представление: listbox
• Представление формы: formLayout
• Кнопки доступа: button
• Шапка: header

Категория color

Категория дизайн-токенов color предназначена для управления цветами элементов, фона контейнера, линий, обводок и текста.

color-stroke

---

Используйте stroke, чтобы определять цвета линий.

Типы

• basic – цвет линий базовых компонентов. Имеет два состояния:
  • primary – основной цвет;
  • secondary – дополнительный цвет.
• warning – цвет линии элемента с ошибкой.
• focus – цвет линии при взаимодействии.

Пример

--color-stroke-basic-primary: var(--color-transparent-black-150);
--color-stroke-basic-secondary: rgba(41, 41, 41, 0.02);
--color-stroke-focus: #63A6E9;
--color-stroke-warning: #EC5E46;

color-text

---

Используйте color-text для управления цветом текста.

• interactive – настройка цвета текста, изменяющегося при взаимодействии пользователя:
  • default – цвет текста по умолчанию;
  • hovered – цвет текста при наведении на него;
  • pressed – цвет ссылки при нажатии;
  • visited – цвет посещенной ссылки.
• static - постоянный цвет текста. Этот тип имеет несколько состояний и уровней:
  • basic – аналогично подкатегории stroke используется как основной цвет и имеет следующие уровни:
    • primary – первый уровень;
    • primaryInvert – первый уровень, инвертированный цвет;
    • secondary – второй уровень;
    • secondaryInvert – второй уровень, инвертированный цвет;
    • tertiary – третий уровень;
    • quaternary – четвертый уровень;
    • quinary – пятый уровень.
  • warning – цвет текста предупреждений;
  • palette – пользовательские цвета
    • paint1-600
    • paint5-500

Пример

--color-text-static-warning: #C61E03;

--color-text-static-basic-primary: #202020;
--color-text-static-basic-secondary: var(--color-neutral-900);
--color-text-static-basic-tertiary: #202020;
--color-text-static-basic-quaternary: rgba(41, 41, 41, 0.68);
--color-text-static-basic-quinary: rgba(41, 41, 41, 0.40);
--color-text-static-basic-primaryInvert: #FFFFFF;
--color-text-static-basic-secondaryInvert: var(--color-transparent-white-900);

--color-text-static-palette-paint5-500: #7B58D0;
--color-text-static-palette-paint1-600: #1066BC;
  
--color-text-interactive-hovered: #0C5CAC;
--color-text-interactive-pressed: #074786;
--color-text-interactive-visited: #5841B8;
--color-text-interactive-default: #1066BC;

color-fill-shape

---

Используйте color-fill-shape для заливки иконок и графических форм.

• basic – аналогично подкатегории stroke и text используется как основной цвет и имеет следующие состояния:
  • primary – первый уровень;
  • secondary – второй уровень;
  • secondaryInvert – второй уровень, инвертированный цвет;
  • tertiary – третий уровень;
  • quaternary – четвертый уровень;
  • quinary – пятый уровень.
• warning – цвет элементов с ошибкой;
• attention – цвет элементов, которые требуют внимания пользователя;
• online – индикатор состояния онлайн;
• palette – пользовательский цвет. Вы можете настроить до 5 цветов:
  • paint1-500
  • paint1-600
  • paint3-400
  • paint4-400
  • paint5-500

Пример

--color-fill-shape-palette-paint1-500: #2080DF;
--color-fill-shape-palette-paint1-600: #1066BC;
--color-fill-shape-palette-paint3-400: #2EA060;
--color-fill-shape-palette-paint4-400: #F39720;
--color-fill-shape-palette-paint5-500: #7B58D0;

--color-fill-shape-basic-primary: var(--color-transparent-black-900);
--color-fill-shape-basic-secondary: #202020;
--color-fill-shape-basic-tertiary: var(--color-transparent-black-640);
--color-fill-shape-basic-quaternary: var(--color-transparent-black-450);
--color-fill-shape-basic-quinary: rgba(41, 41, 41, 0.45);
--color-fill-shape-basic-secondaryInvert: var(--color-transparent-white-900);
--color-fill-shape-online: var(--color-green-500);
--color-fill-shape-attention: var(--color-orange-400);
--color-fill-shape-warning: var(--color-red-400);

color-fill-background

---

Используйте color-fill-background, чтобы заполнить цветом фон целого контейнера (container) или его отдельного элемента (element).

color-fill-background-container

• basic – используется как основной цвет и имеет следующие состояния:
  • primary – основной фон контейнера;
  • secondary – дополнительный фон контейнера.
• palette – пользовательский фон. Для настройки в текущей версии доступна настройка одного цвета: paint4-010.

Пример

--color-fill-background-container-basic-primary: #FFFFFF;
--color-fill-background-container-basic-secondary: #F7F7F8;
--color-fill-background-container-palette-paint4-010: var(--color-transparent-orange-100);

color-fill-background-element-static

Используйте color-fill-background-element-static, чтобы определить фон статичных элементов.

• basic – основной цвет. Вы можете задать несколько градаций основного цвета:
  • 200
  • 1000
  • invert1000

Пример

--color-fill-background-element-static-basic-200: rgba(41, 41, 41, 0.04);
--color-fill-background-element-static-basic-1000: #202020;
--color-fill-background-element-static-basic-invert1000: #FFFFFF;

color-fill-background-element-interactive

Используйте color-fill-background-element-interactive, чтобы настроить фон, изменяющийся при взаимодействии, например, при наведении на него или успешном выполнении события.

Тип	Подтип	Действие
basic	primary secondary tertiary	default – по умолчанию. Доступно только в подтипе primary и secondary. hovered – при наведении; pressed – при нажатии; disabled – неактивное состояние; brightDisabled – явно выраженное неактивное состояние. Доступно только в подтипе tertiary.
warning	primary	default hovered pressed
success	primary	default hovered pressed
stripe	–	default – по умолчанию; selected – при выборе элемента.
loading	–	–

Пример

--color-fill-background-element-interactive-loading: var(--color-transparent-black-180);

--color-fill-background-element-interactive-stripe-default: #F5F9FE;
--color-fill-background-element-interactive-stripe-selected: #D1E5FA;

--color-fill-background-element-interactive-warning-primary-default: #D82A0E;
--color-fill-background-element-interactive-warning-primary-hovered: #C61E03;
--color-fill-background-element-interactive-warning-primary-pressed: #AB1A03;

--color-fill-background-element-interactive-success-primary-default: #90D5A8;
--color-fill-background-element-interactive-success-primary-hovered: #207745;
--color-fill-background-element-interactive-success-primary-pressed: #23683B;

--color-fill-background-element-interactive-basic-primary-default: #1D73C9;
--color-fill-background-element-interactive-basic-primary-hovered: #1066BC;
--color-fill-background-element-interactive-basic-primary-pressed: #0C5CAC;
--color-fill-background-element-interactive-basic-primary-disabled: rgba(41, 41, 41, 0.04);

--color-fill-background-element-interactive-basic-secondary-default: rgba(41, 41, 41, 0.06);
--color-fill-background-element-interactive-basic-secondary-hovered: rgba(41, 41, 41, 0.12);
--color-fill-background-element-interactive-basic-secondary-pressed: var(--color-transparent-black-180);
--color-fill-background-element-interactive-basic-secondary-disabled: rgba(41, 41, 41, 0.04);

--color-fill-background-element-interactive-basic-tertiary-hovered: rgba(41, 41, 41, 0.06);
--color-fill-background-element-interactive-basic-tertiary-pressed: rgba(255, 255, 255, 0.12);
--color-fill-background-element-interactive-basic-tertiary-disabled: var(--color-transparent-black-020);
--color-fill-background-element-interactive-basic-tertiary-brightDisabled: var(--color-transparent-black-120);

font

Используйте эту категорию токенов, чтобы задать шрифты вашей системы.

font-family

---

Укажите в значении необходимый шрифт и его общую категорию.

• title – шрифт заголовков;
• body – шрифт обычного текста.

Пример

--font-family-body: 'Inter', sans-serif;
--font-family-title: 'Inter', sans-serif;

к сведению

Чтобы восстановить шрифты, которые использовались в платформе версии 1.32.0 и более ранних, примените следующие параметры:

-- font-family-body: 'Open Sans', sans-serif;
-- font-family-title: 'Montserrat', sans-serif;