Themes

Тема определяет, как выглядит каждый экран входа: цвета, скругления, страница за карточкой. Экран Themes показывает список тем, собирает новую из встроенной базовой темы, нескольких значений и, если нужно, переопределений токенов и вашего CSS и показывает ее на настоящих формах до сохранения.

Прежде чем начать

Themes находится в боковом меню в группе GLOBAL, после Forms. Темы бывают глобальными или принадлежат одному тенанту, поэтому список зависит от тенанта, выбранного в боковом меню. Чтобы увидеть экран, нужно разрешение forms:read, а чтобы создавать, править и удалять темы, нужно forms:manage. Клиент выбирает тему в поле Forms Theme на своей странице (Клиент); если клиент не выбрал тему, применяется тема default.

Список

×

Тема — это базовая тема, несколько значений поверх нее и, по желанию, ваш CSS. Одна таблица показывает глобальные темы и темы выбранного тенанта и говорит, какая из них какая.

«Used by» вычисляется в консоли по клиентам выбранного тенанта. В central нет эндпоинта, который говорит об использовании, поэтому глобальную тему могут использовать и клиенты другого тенанта — список их не покажет; central все равно откажется удалить такую тему.

Фильтры — All и This tenant, рядом с поиском по ID темы. В меню строки — Open, Copy ID и Delete theme; пока тему нельзя удалить, пункт недоступен и показывает причину. Кнопка + Create theme открывает редактор.

Страница темы

Щелкните строку, чтобы открыть тему. Страница и есть редактор: в шапке ID темы, область действия, теги Token overrides и Custom CSS, если они есть у темы, и клиенты, которые ее используют. Основной кнопки в шапке нет; внизу страницы закреплена панель с Cancel и Save theme, и она говорит, что еще не сохранено, например Unsaved: brand colour, shape. Пока ничего не изменено, Save theme недоступна, а после сохранения вы остаетесь на странице. При выходе с несохраненными изменениями консоль просит подтверждение.

Предпросмотр формы входа справа от элементов управления остается на экране, пока они прокручиваются; в широком окне он шириной 560 px, в более узком — 380 px, а ниже 900 px это сворачиваемая полоса над элементами управления.

Delete theme — последняя карточка. Она недоступна, с указанием причины, для темы, которую используют клиенты (Used by shop-mobile and storefront-web. Move them to another theme first.), и для default, которую удалить нельзя. В остальных случаях подтверждение называет тему. Если тему все еще использует клиент другого тенанта, API отвечает конфликтом, и страница показывает его сообщение. default — обычная тема: она начинается с базовой Versola без переопределений и правится в том же редакторе, поэтому изменение доходит до каждого клиента, который ее использует. На пустой базе она создается именно такой; при обновлении central превращает default, которая еще была поставляемой таблицей стилей, в эту визуальную тему, а default с уже заданными базой и переопределениями оставляет как вы ее настроили.

Создание темы

+ Create theme открывает редактор с карточкой Basics (Theme ID, Scope) над карточками Base theme, Look и Advanced. Create theme сохраняет тему и открывает ее страницу.

×

Базовая тема и значения

Тема — это одна из встроенных базовых тем и значения, которые вы на ней переопределяете.

Список входит в сборку central: добавить в него или изменить его нельзя. Поверх базовой темы задаются пять значений:

Карточка Base theme — это ряд кнопок-плашек, по одной на каждую базовую тему, с цветом бренда в виде точки; строка под рядом говорит, что задает выбранная. В карточке Look значение, которое отличается от базового, помечено Overridden с базовым значением, а Reset возвращает его; Clear overrides в шапке карточки сбрасывает все, а подзаголовок карточки называет переопределенные значения (Overrides on Versola: brand colour, shape.). Значение, равное базовому, переопределением не считается, и тогда тема следует за базой. При смене базовой темы переопределения сохраняются. Отдельные переменные и свои правила задают в карточке Advanced, она описана ниже; оставьте ее пустой, если значения справляются.

×

Таблицу стилей темы auth собирает при выдаче формы: базовая таблица стилей, которая поставляется с Versola, затем то, что задают значения, затем переопределения токенов, затем собственный CSS темы (Custom CSS). Базовая таблица входит в релиз, это не тема, которую можно править; чтобы изменить вид всех экранов, правьте значения темы default или дайте ей свой CSS.

Предпросмотр рисует форму на ваш выбор (активную версию любой формы), в выбранном состоянии, в светлой или темной схеме и, в широком окне, в ширину телефона или рабочего стола, с той же таблицей стилей, которую выдал бы auth, вместе с вашим CSS. Он начинается со схемы вашего устройства. Темный предпросмотр недоступен, если тема фиксирует цветовую схему. Если central не может отрисовать предпросмотр, страница говорит об этом и оставляет последнюю отрисованную версию, приглушенной.

Note: Если central не отдает базовых тем, Create theme остается недоступной: тема всегда строится на базовой.

Внешний вид отдельного клиента

Партнерское приложение может переопределить те же пять значений поверх своей темы, только для собственных экранов входа. Это задается на странице клиента под Forms Theme и применяется после таблицы стилей темы; см. Client. Сама тема не меняется, поэтому остальные клиенты с этой темой выглядят как раньше.

Как выглядят экраны

Так выглядят экраны, которые оформляет тема. Бренд над карточкой — логотип тенанта из Branding или, если его нет, словесный знак Versola; иконка партнера всегда внутри карточки.

×

×

×

Переключатель цветовой схемы у посетителя

При Auto формы, у которых есть выбор языка, показывают рядом с ним небольшую кнопку-иконку: Auto, Light или Dark. Выбор делается для браузера и хранится в локальном хранилище браузера для адреса входа. Это не настройка аккаунта, поэтому в другом браузере пользователя он не действует. Предпросмотр в консоли переключатель не показывает; используйте его собственный переключатель светлой и темной схемы.

Фиксированная схема Light или Dark, заданная в теме или переопределением клиента, скрывает переключатель, а ранее выбранная посетителем схема не применяется. Клиент, который переопределяет фиксированную тему значением Auto, снова показывает переключатель.

Advanced: переопределения токенов и свой CSS

Карточка Advanced стоит после Look. В ней две части, и обе применяются после значений выше. Побеждает позднее, так что порядок такой: базовая тема, пять значений, переопределения токенов, свой CSS.

Переопределения токенов

Переопределение токена задает одну именованную переменную экранов входа без всякого CSS. Нажмите Add token, выберите токен в строке и задайте значение. Список сгруппирован (Page, Brand and logo, Card, Text, Fields, Buttons, Links and focus, Lines, Status and overlays), а под ним строка одной фразой говорит, что токен красит и каков он по умолчанию: --btn — заливка главной кнопки, по умолчанию var(--ink). Remove убирает строку, а панель называет изменение (Unsaved: token overrides). Один токен можно использовать один раз.

Чем редактировать значение, зависит от типа токена:

Значение, которое элементы не умеют показать, например color-mix(in oklab, red 10%, white), записанное через API, — это обычное текстовое поле.

Цвет, который различается в светлой и темной схеме, — токен-пара (столбец Светлая и темная ниже). У него два поля, Light и Dark, каждое с выбором цвета и hex; они заполнены тем, что формы рисуют сейчас, так что добавление ничего не меняет, пока вы не правите значение. Отметьте Same for both, чтобы записать одно значение для обеих схем; снимите отметку, чтобы задать каждой свое, начиная с этого значения. central записывает пару как light-dark(light, dark), а одиночное значение как есть. Токен, который не пара, принимает только одно значение.

central отказывает имени, которого нет в справочнике ниже, и значению, которое не подходит типу токена, длиннее 120 символов или содержит ;, {, }, !, @, \, комментарий, url( или expression(. Редактор показывает причину под строкой и не дает нажать Save theme; через API ответ — 400 с причиной, и ничего не сохраняется. Переопределение --brand не двигает --on-brand и цвет фокуса: задайте их тоже, если этого требует контраст. --btn, --link и --field-focus по умолчанию равны var(--ink), поэтому переопределение --ink двигает и их, пока вы не задали их сами.

Токены, которые можно переопределить

Список задан в central и отдается через GET /configuration/themes/variables; консоль читает его оттуда. Значения по умолчанию — то, что объявляет базовая таблица стилей.

Страница

Бренд и логотип

Карточка

Текст

Поля

Кнопки

Ссылки и фокус

Линии

Статус и затемнение

В большинстве случаев хватает этих токенов. К своему CSS обращайтесь, когда ни один токен не делает нужного.

Custom CSS

У темы без CSS эта часть свернута и показывает кнопку Add custom CSS; у темы, где CSS есть, она открыта. В ней редактор CSS, а под ним — переменные, на которые может опираться правило. Подсказка говорит прямо: Most things are tokens above: buttons, the card, fields, text, lines and the logo. Write CSS only for what no token does. It is applied after the colours, shape and background above, so your rules win; you are responsible for contrast and small screens. То есть почти все — токены выше: кнопки, карточка, поля, текст, линии и логотип; CSS нужен только для того, что токен не умеет. Он применяется после выбранных цветов, формы и фона, поэтому побеждает; за контраст и маленькие экраны отвечаете вы. Это крайнее средство.

×

Правила кладутся после CSS, сгенерированного из значений, поэтому правило перекрывает значение, на которое нацелено: :root { --rs: 8px; } сильнее радиуса, который дало значение Shape (переопределение токена делает то же самое без CSS). Предпросмотр учитывает CSS по мере набора, а панель называет его, когда он изменился (Unsaved: custom CSS). На странице создания темы та же карточка.

Правило может задавать или читать на :root токены выше и такие переменные, которые не относятся к токенам:

Работают и другие селекторы, например .container { box-shadow: none; }, но имена классов не гарантированы: релиз может их переименовать, а переменная — надежнее.

Note: За свой CSS отвечаете вы. Его никто не проверяет: цвет, плохо читаемый на карточке, или ширина, которая не влезает в телефон, дойдут до пользователей как написано. Посмотрите предпросмотр в обеих цветовых схемах и в ширину телефона. Если тема фиксирует color-scheme в своем CSS и посетитель не должен ее менять, задайте еще и --scheme-locked: 1.

Тема, сохраненная только с CSS

Тема, сохраненная до появления значений, имеет CSS и не имеет базы. Пока вы ее не сохранили, формы, которые ее используют, получают один этот CSS вместо базовой таблицы стилей. Консоль открывает ее в том же редакторе: база Versola без переопределений, часть Custom CSS карточки Advanced раскрыта, а в карточке Base theme об этом сказано строкой. Save theme доступна сразу: она сохраняет значения, которые показывает редактор, вместе с CSS, и дальше этот CSS ложится поверх значений, как любой другой Custom CSS. Правила, написанные в расчете на прежнюю целую таблицу стилей, стоит пересмотреть: теперь под ними лежит базовая таблица.

Что дальше

• Forms — экраны, которые оформляет тема, их версии и предпросмотр
• Клиент — выбор темы клиента
• Locales — языки, которые предлагают экраны