Первое, что видят ваши клиенты, — экран входа. Мы сделали его вашим

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

Нам такое не нравится. В Versola экраны входа — это тема: одна из семи готовых заготовок, пять значений, которые вы задаёте в консоли администратора, и, если понадобится, именованные токены и свой CSS сверху. В статье покажем, что вы получаете, ничего не трогая, что меняет один клик и как далеко можно зайти, не привлекая разработчика. Все скриншоты сняты с настоящей консоли и настоящих форм, на данных example.com.

Из коробки

Новый тенант использует тему default, которая начинается с пресета Versola: цвет бренда #155e75, мягкие углы, насыщенный фон страницы и свечение за карточкой. Логотипа тенанта пока нет, поэтому над карточкой стоит wordmark Versola. Через минуту вы его замените.

Две вещи решены за вас. У экрана есть светлая и тёмная схема, и по умолчанию он следует за устройством посетителя; круглая кнопка рядом с переключателем языка даёт посетителю выбрать Auto, Light или Dark для своего браузера. И вёрстка идёт от телефона: на ширине меньше 520 px карточка превращается в шторку, прижатую к нижнему краю, то есть туда, где палец.

Один клик: выбрать пресет

Пресет — это именованное сочетание тех же пяти значений. В Versola их семь. Они часть сборки: список нельзя дополнить или поправить, зато начать можно с любого.

Пресет	Цвет бренда	Углы	Страница	Фон
Versola	#155e75	Soft	Bold	Glow
Studio	#ff6b4a	Round	Bold	Glow
Fintech	#5b5bd6	Soft	Neutral	Linear
Wellness	#0e9f8e	Round	Soft	Horizon
Editorial	#14130f	Sharp	Neutral	Flat
Sunny	#f5c518	Soft	Bold	Glow
Berry	#b4348a	Round	Bold	Glow

Вот одна и та же форма входа под четырьмя пресетами: сверху светлая схема, снизу тёмная. Больше ничего не менялось: форма, тексты и разметка те же.

Посмотрите на нижний ряд. Тёмную версию Studio никто не рисовал. В пресете лежат цвет бренда и рецепт страницы, обе схемы выводятся из них: у Studio тёмная страница — глубокий оттенок коралла, у Editorial — почти чёрная, вообще без подмеса. Сложнее всего Sunny: жёлтый на белой карточке пропадает, поэтому кольцо фокуса и галочки в светлой схеме берут тёмно-жёлтый (#ac8a11), а в тёмной остаётся сам фирменный жёлтый.

Пять ручек и живой предпросмотр

Чтобы собрать свою тему, откройте Themes и нажмите + Create theme. Задайте ID, выберите карточку пресета и поставьте любые из пяти значений в карточке Look:

• Brand colour: девять образцов или любой #rrggbb. Текст на цвете бренда белый или почти чёрный, смотря что контрастнее.
• Page background: Bold (глубокий оттенок бренда), Soft (бледный тон) или Neutral (просто серый).
• Background style: Glow, Linear, Horizon или Flat; маленькие карточки показаны в вашем цвете.
• Shape: Round, Soft или Sharp для полей, кнопок и карточки.
• Colour scheme: Auto, Light или Dark. Auto следует за устройством посетителя и оставляет переключатель. Light и Dark фиксируют схему для всех и прячут переключатель.

Предпросмотр справа — не макет. Это форма входа с таблицей стилей, которую central собирает по вашим значениям; он обновляется на каждый клик. Переключайте Form и State (неверный пароль, ошибка passkey, одноразовый код), чтобы проверить экраны, которые не из счастливого пути, а Light и Dark — чтобы увидеть обе схемы.

Меняете значение — консоль запоминает, чем вы отличаетесь от пресета. У значения появляется метка Overridden и ссылка Reset, в шапке карточки есть Clear overrides, а панель внизу говорит, что не сохранено. Если переключить пресет, ваши значения останутся. Это удобно, когда вы не можете выбрать между Fintech и Wellness, но точно знаете, что бренд — #2f9e63.

Своя тема у каждого клиента

Тема не глобальна. Каждый клиент выбирает свою в Forms Theme, на странице клиента, в Branding and logout; кто не выбрал, получает default. Так витрина и внутренний инструмент живут в одном тенанте, не делая вид, что у них одно лицо. Тему, которую использует клиент, нельзя удалить, пока клиента не переведут на другую.

Партнёрское приложение, то есть клиент, который спрашивает согласие пользователя, может больше. На его странице есть Appearance for this app: те же пять значений поверх темы, только для его экранов. Сама тема не меняется, и остальные клиенты выглядят как раньше.

Ваш логотип и ваши слова

Есть две вещи, которые цветом не сделать. Первая — логотип. В Security карточка Branding принимает два URL: логотип для светлой схемы (тёмный рисунок) и для тёмной (светлый рисунок). Он заменяет wordmark Versola над карточкой и становится favicon страниц входа. Нет пары или один из файлов не загрузился — остаётся wordmark.

Вторая — слова. Тексты каждой формы лежат одним JSON-объектом: ключ на каждый код языка, под ним ключи текстов. Откройте Forms, выберите форму, и вкладка Texts покажет их рядом с предпросмотром на выбранном языке. Поправили русский заголовок — предпросмотр сразу его показывает.

Сохранение создаёт новую версию формы, и в работу она не идёт, пока вы не нажмёте Set active. auth подхватит изменение при следующей синхронизации конфигурации, не мгновенно. Зато опечатка в форме входа не дойдёт до пользователей, пока кто-то не включит версию. И язык должен быть активен в Locales, иначе форма его не предложит.

Дальше — переопределения токенов и свой CSS

Пяти значений хватит не каждому бренду. После Look в редакторе темы стоит карточка Advanced с двумя инструментами.

Первый — Token overrides, и он умеет больше, чем кажется. Кнопки, карточка, поля, текст, ссылки и линии — всё это именованные токены, их сорок в девяти группах, и у каждого одной строкой сказано, что он красит. Нажмите Add token, выберите --btn (заливка главной кнопки), задайте #c2410c — и кнопка в предпросмотре станет оранжевой. Цвету, который в тёмной схеме должен отличаться, дают два значения: светлое и тёмное. CSS не нужен, а консоль не примет значение, которое токену не подходит. Полный список — в разделе Токены, которые можно переопределить.

Второй — Custom CSS, крайнее средство: редактор кода, свёрнутый, пока вы не нажмёте Add custom CSS, для правил, которые не выразить ни одним токеном.

Оба применяются после CSS, который строится из пяти значений: сначала токены, потом ваш CSS. Порядок такой: пресет, пять значений, переопределения токенов, свой CSS, и более поздний шаг перекрывает более ранний. Задайте --rs равным 8 px, и у карточки углы в 8 px, что бы ни стояло в Shape. Предпросмотр учитывает всё по мере набора, а панель внизу пишет Unsaved: token overrides, custom CSS, пока вы не сохранили.

У этой силы есть цена. Ваш CSS никто не проверяет. Если выбранный цвет плохо читается на карточке или фиксированная ширина не влезает в телефон, пользователи получат именно это. Имена классов вроде .container могут поменяться между релизами, так что опирайтесь на переменные. Перед сохранением посмотрите предпросмотр в обеих цветовых схемах и в ширину телефона.

Как это устроено

Вид темы — это id пресета, до пяти переопределений, заданные вами токены и необязательный блок CSS. ThemeCss в Versola превращает первые два в короткий блок CSS-переменных, который добавляется после базовой таблицы common.css; переопределения токенов и ваш CSS, если они есть, идут после этого блока. Вот блок для Sunny, жёлтого:

:root{--brand:#f5c518;--on-brand:#1c1b19;--rf:14px;--rb:14px;--rs:24px;}
@supports (color: light-dark(#000, #fff)){:root{--focus:light-dark(#ac8a11,#f5c518);--on-focus:light-dark(#1c1b19,#1c1b19);}}

Фирменному жёлтому нужен тёмный текст, поэтому --on-brand — чернила. --rf, --rb и --rs — радиусы полей, кнопок и карточки. Всё, что различается в светлой и тёмной схеме, как кольцо фокуса выше, записано парой light-dark() внутри правила @supports: браузер без этой функции оставит значения по умолчанию, а не выбросит объявление. Цвет страницы, свечение и градиенты тоже переменные, подмешанные из --brand.

Раз это переменные до самого низа, формул цвета в консоли нет: предпросмотр рисует central тем же кодом, которым auth отдаёт страницу. И едим мы то же, что готовим: этот сайт собран на токенах темы входа по умолчанию, их список — в справочнике дизайна.

Чего здесь нет

Консоль правит эти пять значений, добавленные вами переопределения токенов и ваш CSS. Она проверяет значения токенов, но не ваш CSS, и не следит за читаемостью ни того, ни другого. Семь пресетов зашиты в сборку, набор полей формы не настройка темы, а цвет бренда обязан быть #rrggbb (ни названий, ни rgb()), потому что значение пишется прямо в таблицу стилей. Собственный вид клиента есть только у партнёрских приложений. Тёмный предпросмотр в редакторе доступен, пока цветовая схема не зафиксирована.

Хватает ли пяти значений? Большинству экранов входа — да: это одна форма с логотипом, а запоминаются цвет, углы и страница за карточкой. Когда не хватает, следующий шаг — сорок токенов, а за ними CSS. Если нужного токена в списке нет, напишите нам.

Попробуйте

• По шагам, в консоли: как оформить экраны входа и как перевести форму.
• Все поля редактора: Themes.
• Без установки: урезанная копия редактора тем на четырёх настоящих формах есть на главной странице.