Оформление

Основа — готовая заготовка оформления: фон, карточки, текст, статусы и декор. «Светлая» — оформление по умолчанию; «Тёмная» нужна сайтам с тёмным оформлением, чтобы виджет не светился белым прямоугольником. На тёмном сайте достаточно выбрать основу: фон, карточки и текст берутся из заготовки, отдельно их задавать не нужно.

Пока настройки организации грузятся, виджет не показывает экраны — поэтому светлая основа не мигает перед тёмной. Если настройки недоступны, виджет работает на значениях по умолчанию.

Оператор настраивает пять цветов; остальные оттенки виджет выводит из них.

Фон, карточки и текст необязательны: пустое значение берётся из основы и в админ-панели показано серым с пометкой «как в основе». Основной и брендовый цвет хранятся всегда и от основы не зависят.

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

Цвета принимаются в любом CSS-формате: #abc, #AABBCC, rgb(18, 18, 18), имя цвета. Виджет приводит их к #RRGGBB, а некорректное значение не применяет и не роняет монтаж: действует сохранённый цвет или заготовка основы, в консоль уходит предупреждение [Hodima Widget] ….

Виджет проверяет контраст и пишет предупреждения в консоль браузера [Hodima Widget] …, но ничего не блокирует:

Тёмный текст на кнопках и выбранных элементах виджет ставит сам, поэтому кнопка остаётся читаемой даже на жёлтом или светло-зелёном основном цвете. В админ-панели те же предупреждения показаны под карточкой «Цвета», и сохранить настройки можно всё равно: решение за менеджером, а результат виден в предпросмотре.

Шрифт основного текста и шрифт заголовков задаются семейством и ссылкой на файл. Ссылка — только https: файл .woff2, .woff, .ttf, .otf или Google Fonts. Виджет подключает шрифт сам: для Google Fonts добавляет на страницу ссылку на таблицу стилей, для файла — правило @font-face. Ссылку с другим протоколом или на другой файл виджет пропускает: остаётся введённое семейство и запасная цепочка system-ui. Файлы шрифтов в стили виджета не встраиваются — бюджет CSS этого не позволяет, поэтому шрифт скачивает браузер покупателя.

Отступы и скругление оболочки задают поля shellPaddingBlock, shellPaddingInline, shellBorderRadius и shellPaddingMobile. Пустое значение — отступы по умолчанию, они подстраиваются под ширину экрана.

В самом низу виджета на всех экранах, в предпросмотре и на самостоятельной странице стоит строка «Работает на платформе Ходима» со ссылкой на https://hodima.ru/. Строка мелкая и приглушённая, но на тёмной основе тоже видна: её цвета берутся из темы. Отключить подпись нельзя — ни в настройках организации, ни списком скрытых блоков, ни параметрами монтирования.

Ту же основу, пять цветов, шрифты и радиус оболочки менеджер задаёт в админ-панели: «Настройки» → «Виджет», карточка «Цвета». Параметры монтирования theme главнее сохранённых настроек: ими разработчик сайта переопределяет оформление для отдельной страницы. Порядок источников: значения по умолчанию → сохранённые настройки → параметры mountHodimaWidget. Подробнее о параметрах — Параметры, о карточках в админ-панели — документ «Руководство пользователя», раздел «Настройки организации».