У нас запустился довольно большой редизайн и ренейминг приложения "Мой Beeline" в "Janymda". Если смотреть только на техническую сторону вопроса, то это в основном стилевые изменения, почти не затрагивающие продуктовую вёрстку. В комментах накидаю всяких скриншотов для контекста. Недели три мы синхронно работали практически вообще не отвлекаясь ни на что другое. По этому поводу много мыслей, возможно даже на серию постов какую-то. Много прикольной специфики и впечатлений, которые мне интересно по результатам отрефлексировать. 🪖
Глава один. Меняем цвета
И это сделать было бы вообще просто, если бы было нужно просто хексы поменять на уровне дизайн системы. Но есть нюанс. У нас появилась концепция брендов. Ща расскажу.
Дано. Абсолютно стандартная история. В дизайн-системе есть компоненты. Цвета в них зависят от токенов. Те или иные значения токенов Compose-тема спускает ниже по иерархии основываясь на каких-то условиях. Ну типа того, что для светлой и тёмной темы создаётся разный экземпляр класса со всеми цветами в зависимости от параметра, передаваемого в тему. Compose-тема – это просто CompositionLocalProvider.
Задача. Добавить в это уравнение бренды, идея которых в том, что всё приложение перекрашивается в новые цвета, но кроме разделов, связанных с билайном (условные тарифы). Они остаются в старой жёлто-чёрной гамме. То есть если очень упрощать – тем должно стать не две (светлая/тёмная), а четыре (светлая/тёмная * janymda/beeline).
Получается, что нам в компонентах нужно теперь уметь поддерживать и цвета одного бренда, и цвета второго бренда одновременно. А это что-то совсем новое для нас. Нужно искать решение. 🔭
На первый взгляд это действительно похоже на поддержку тёмной темы. Но на практике брендовые цвета сами зависят от основных цветов. Это новое измерение уровнем выше. И только благодаря этому брендовые цвета тоже могут меняться в зависимости от светлой/тёмной темы. Итого, бренд добавили как ещё один параметр в тему, брендовые цвета собираются и спускаются как новый CompositionLocal. Появляется возможность гибко выставить и бренд и тёмность цветов прямо там где этого захотим. Например, в превьюшках.
Токены добавили – теперь нужно и во всех компонентах токены цветов по умолчанию поменять на брендовые. Чтобы всякий свитч или лоадер из дс без лишних движений со стороны продуктовых разрабов сами перекрасились как надо. Это несложно, но довольно много рутины и не самый быстрый процесс тестирования и дизайн-ревью.
Пункты выше описывают всё то, что нужно сделать на уровне дизайн-системы. И как бы логично, что всё приложение уже должно перекраситься. Работа сделана, получается? Но я же упомянул, что на части экранов тема должна "остаться" старой. А если дефолтная тема теперь "жанымда", то в билайновских фичах нужно явно обернуть свою вёрстку в тему с соответствующим брендом. Забавно, что это оказалось самое сложное. Если этих команд не одна, то всем всё объяснить и синхронизировать, чтобы организованно попасть в нужный график – это та ещё боль. 👥
Дальше – веселее. На цветах, даже с такими специфичными приколами как бренды, мы не остановились.