EWApiColorTokenType

⏳ Список цветовых токенов находится в процессе актуализации. Некоторые значения, указанные в статье, могут отличаться от текущей реализации. Обновленная версия статьи появится в ближайшее время.

За актуальной информацией вы можете обратиться к вашему менеджеру по работе с партнерами.

Цветовые токены позволяют кастомизировать внешний вид виджета онлайн‑записи без изменения логики работы. С их помощью можно полностью перекрасить интерфейс, изменить фоны, тексты, тени и многое другое.

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

Ниже представлен список всех доступных токенов, которые вы можете использовать в методе setColorTokens.

widgetApi.setColorTokens({
  color_bg: '#FFFFFF',
  color_primary: '#4CAF50',
  color_text_black: '#1D1D1D',
});

Также они представлены в SDK как enum EWApiColorTokenType:

export enum EWApiColorTokenType {
  colorBg = 'color_bg',             
  colorPrimary = 'color_primary',   
  ...
}

Список доступных токенов

Базовые цвета и фон

Token	Назначение
`color_bg`	Фон приложения
`color_white`	Фон/подложка большинства элементов
`color_sub_white`	Альтернативный фон (например, в темной теме)
`color_bg_dark`	Фон для фото-карусели (может не быть везде)
`color_grey`	Фон иконок соцсетей (VK, Telegram и др.)
`color_grey_03`	Фон иконок, «i», невыбранного времени
`color_grey_09`	Цвет фона информационного оповещения
`color_grey_light`	Обводка чекбоксов и согласий
`color_red_light`	Фон отмененного заказа
`color_yellow_light`	Фон статуса «Ожидание оплаты»
`color_blue_light`	Фон переноса записи
`color_violet_light`	Фон отсчета времени до оплаты
`banner-accent-bg`	Фон баннера
`banner-accent-bg-image`	Иконка в баннере

Акцентные цвета

Token	Назначение
`color_primary`	Главный акцентный цвет (например, кнопки)
`color_green_01`	Фон «Вы записаны»
`color_green_05`	Цвет успешных оповещений
`color_green_07`	Текст «Вы записаны»
`color_yellow_accent`	Цвет звезд в отзывах
`color_yellow_dark`	Статус «Ожидание оплаты»
`color_red_accent`	Подсказки при ошибках (неверный ввод)
`color_red_dark`	Цвет отмены заказа
`color_blue_accent`	Цвет при переносе записи
`color_violet_accent`	Цвет статуса отсчета оплаты
`primary-agile`	Цвет элемента «Вам доступен подарок»

Границы и тени

Token	Назначение
`color_stroke_primary`	Границы элементов
`color_grey_lines`	Дополнительные границы
`color_btn_shadow_primary`	Тень кнопок (primary, secondary)
`color_btn_shadow_grey`	Тень кнопок (tertiary, quaternary)
`color_pressed_primary`	Граница при нажатии (используется редко)
`tab-stroke-default-text`	Граница табов

Текст

Token	Назначение
`color_text_primary`	Текст на кнопках
`color_text_primary_12`	Цвет фона каунтеров
`color_text_black`	Основной цвет текста
`color_text_white`	Цвет текста (используется во Flocktory)
`color_grey_dark`	Цвет обычного текста
`color_grey_medium`	Второстепенный текст
`icons-secondary-text`	Стрелки, подписи, «Работает на YCLIENTS»
`secondary-text`	Календарь, шаги записи, специалисты и т. д.

Аватары и иконки

Token	Назначение
`color_avatar_bg`	Фон аватара (например, сотрудников)
`color_avatar_text`	Цвет инициалов в аватаре
`icons-grey`	Цвет инициалов, стрелок и иконок редактирования
`color_grey_11`	Цвет иконок (услуги, сотрудники, ресурсы)
`icons-color-agile`	Элемент в баннере
`icons-color-bg`	Фон иконки «Вам доступен подарок»

Предыдущая статья Enums

Следующая статья EWApiSlotContainerType

Была ли статья полезна?