Оформление в Theme Studio
Настраивайте общие цвета, типографику, элементы и состояния воронки.
Проверено по редактору:
Theme Studio задаёт общие правила оформления воронки. Откройте его кнопкой Themes в верхней панели редактора.
Тема связывает фон экрана, типографику, кнопки, поля ввода и другие элементы. Это помогает менять стиль целиком и сохранять согласованность экранов.
Начать настройку
- Откройте Themes.
- Проверьте выбранную тему и область Global или Local.
- В Foundation настройте общие цвета, фон и прогресс. Во вкладке Elements выберите нужное семейство элементов.
- Посмотрите состояния элементов на демонстрационных экранах.
- Проверьте область действия и сохраните изменения.
В новой воронке Theme Studio открывается как обязательный первый шаг. Сначала сохраните тему, затем переходите к редактированию экранов.
Что настраивать в теме
| Область | Примеры |
|---|---|
| Экран | Фон и отображение прогресса |
| Typography | Иерархия текста, размеры, выравнивание |
| Button | Primary, Secondary, Disabled и общая геометрия |
| Input | Обычное состояние, фокус и ошибка |
| Options | Обычная и выбранная карточка |
| Loading | Общие параметры индикаторов |
| Payment plans | Обычная и выбранная карточка плана |
Набор настроек зависит от выбранного семейства. Например, Video использует собственные настройки Appearance элемента; не все параметры каждого элемента представлены как глобальные настройки темы.
Проверять состояния
Не ограничивайтесь первым предпросмотром. Проверьте выбранную карточку Options, фокус и ошибку Input, второстепенную и отключённую кнопку. Текст должен читаться на поверхности каждого состояния.
У Options видимость рамки управляется общим переключателем в Default и действует также на Selected. Для Selected можно настроить отдельный цвет рамки.
Тема и отдельный элемент
Тема задаёт общие значения. Appearance конкретного элемента позволяет сделать исключение. Если изменение темы не отразилось на элементе, проверьте его локальные настройки и при необходимости используйте Restore selected theme values.
Это отдельный уровень настройки: Local Theme относится ко всей текущей воронке, а Appearance — к одному элементу.
Сохранение
Save Local Theme сохраняет исключения для текущей воронки. Save Global Theme меняет выбранную общую тему и сразу влияет на наследующие её воронки.
Перед общим изменением проверьте правила наследования и список затрагиваемых воронок. Обновление общей темы не ждёт публикации Stable.