Справочник темы оформления виджетов
Токены темы виджетов 2.0: брейкпоинты, отступы дополнительного контента, цвета, размеры и скругления, их значения по умолчанию, поля в разделе «Виджеты» и пресеты
Тема задаёт внешний вид всех виджетов 2.0 на странице. Она передаётся в aplaut.init объектом theme из трёх частей: viewport, supplementGap и cssVars. Виджет накладывает тему поверх значений по умолчанию, поэтому указывать нужно только изменённые токены.
aplaut.init(access_token, {
theme: {
cssVars: {
color_widget_accent: { default: "#e30613" },
rounded_md: { default: "0rem" },
},
},
});
В разделе Виджеты токены сгруппированы по разделам Цвета, Размер и форма и Прочее. Для отдельного экземпляра виджета тему можно переопределить атрибутом data-theme с JSON: она накладывается поверх общей.
viewport
Брейкпоинты для значений токенов. Значение с ключом брейкпоинта действует при ширине окна от указанной и больше (min-width). В разделе Виджеты: Размер и форма → Брейкпоинты.
| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
large | CSS-размер | 1024px | Десктоп |
medium | CSS-размер | 768px | Планшет |
small | CSS-размер | 640px | Крупный смартфон |
default | — | пусто | Базовое значение без media query |
(Сверьте перед публикацией: по коду StylesheetBuilder правило default выводится последним и перекрывает значения брейкпоинтов у всех виджетов, кроме AI-сводки. Если это ошибка, после исправления снимите пометку; если так задумано, опишите это ограничение.)
supplementGap
Отступы блока с рейтингом и фильтрами, когда он закрепляется при прокрутке. Значения — числа в пикселях. В разделе Виджеты: Размер и форма → Отступы дополнительного контента.
| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
default.top | number | 10 | Отступ сверху, px |
default.bottom | number | 10 | Отступ снизу, px |
large, medium | { top, bottom } | как default | Отступы от брейкпоинта и шире. Если large не задан, берётся medium, затем default |
Ключ small в supplementGap не учитывается. Значение 0 в large или medium считается незаданным, и виджет берёт следующий уровень. Брейкпоинты в viewport для supplementGap должны быть заданы в px.
cssVars
Каждый токен — объект { default, large, medium, small }. Обязателен только default. Остальные ключи совпадают с ключами viewport, значение с другим ключом виджет пропускает.
Цвет — токен с именем на color_ — записывается тройкой каналов RGB через пробел ("26 86 219") или любым CSS-цветом: "#1a56db", "rgb(26 86 219)", "hsl(221 79% 48%)", "var(--brand)". Форматы в одной теме можно смешивать.
Цвета
| Токен | По умолчанию | В личном кабинете |
|---|---|---|
color_background_primary | 255 255 255 | Основной фон |
color_background_secondary | 246 247 249 | Второй фон |
color_background_tertiary | 237 239 243 | Третий фон |
color_background_controls | 227 230 237 | Фон контролов |
color_background_hover | 218 222 231 | Фон при наведении |
color_background_accent | 235 245 255 | Акцентный фон |
color_system_white | 255 255 255 | Белый |
color_system_black | 0 0 0 | Чёрный |
color_system_positive | 15 167 94 | Успех |
color_system_negative | 206 24 79 | Ошибка |
color_text_accent | 26 86 219 | Акцентный текст |
color_text_primary | 4 15 38 | Основной текст |
color_text_secondary | 42 54 77 | Второстепенный текст |
color_text_tertiary | 128 136 153 | Приглушённый текст |
color_text_inverse | 255 255 255 | Текст на тёмном |
color_text_disabled | 170 176 187 | Неактивный текст |
color_widget_accent | 26 86 219 | Акцент виджета |
color_widget_accent_hover | 21 68 173 | Акцент виджета при наведении |
color_widget_sub | 35 56 118 | Дополнительный цвет виджета |
color_widget_ratings | 250 202 21 | Звёзды рейтинга |
color_stroke_accent | 26 86 219 | Акцентная обводка |
color_stroke_primary | 202 209 224 | Обводка |
Размер и форма
| Токен | Тип | По умолчанию | Описание | В личном кабинете |
|---|---|---|---|---|
base_multiplier | число строкой | 1 | Коэффициент масштаба текста и отступов виджета, например 0.75 | Масштаб |
spacing_base | CSS-размер | 0.25rem | Шаг сетки отступов: внутренние отступы и промежутки виджета кратны ему | — |
button_pill | boolean | false | Кнопки со скруглением в форме таблетки. Учитывается только default, значение — логическое, не строка | Кнопки-таблетки |
base_font_family | string | не задан | Шрифт информера. Остальные виджеты всегда наследуют шрифт сайта | — |
spacing_xs | CSS-размер | 0.25rem | Отступ XS | Отступ XS |
spacing_sm | CSS-размер | 0.5rem | Отступ S | Отступ S |
spacing_md | CSS-размер | 1rem | Отступ M | Отступ M |
spacing_lg | CSS-размер | 1.5rem | Отступ L | Отступ L |
spacing_xl | CSS-размер | 2rem | Отступ XL | Отступ XL |
rounded_sm | CSS-размер | 0.25rem | Скругление S | Скругление S |
rounded_md | CSS-размер | 0.5rem | Скругление M | Скругление M |
rounded_lg | CSS-размер | 1rem | Скругление L | Скругление L |
Токены без действия
Эти токены есть в разделе Виджеты и в теме по умолчанию, но виджеты их не применяют: значение не меняет вид виджета.
| Токен | По умолчанию | В личном кабинете |
|---|---|---|
text_base | 16px | Базовый размер текста |
rounded_nl | 0rem | Скругление, нулевое |
order_button_icon | 0 | Порядок иконки в кнопке |
video_modal_z_index | 9999 | z-index модалки с видео |
Размер текста виджета меняет base_multiplier, z-index окон — параметр modalZIndex виджета.
Пресеты
Пресет — именованный набор значений токенов cssVars в разделе Виджеты. Брейкпоинты и supplementGap в пресет не входят. Выбор пресета копирует его значения в разделы Цвета и Размер и форма, дальше их можно править.
| Пресет | Где хранится | Можно удалить |
|---|---|---|
| По умолчанию | встроен | нет |
| Тёмный | встроен | нет |
| Контрастный | встроен | нет |
| Мягкий | встроен | нет |
| Компактный | встроен | нет |
| сохранённые компанией | у компании, видны всем пользователям с доступом к разделу Виджеты | да |
| Ограничение | Значение | Область действия |
|---|---|---|
| Название сохранённого пресета | уникально, до 60 символов | Компания |
Смотрите также: как настроить виджеты в личном кабинете, справочник настроек виджетов.