50 оттенков хаоса: как мы навели порядок в палитре проекта
Работая над дизайн-системой для нашего проекта в Sendsay, мы столкнулись с распространённой проблемой: одни и те же элементы в разных частях приложения имели разные оттенки цветов.
Например, синяя кнопка везде оставалась синей, но оттенки различались: где-то она была светлее, где-то темнее. Особенно это бросалось в глаза на бордерах и тенях. Мы осознали, что у нас в проекте используется множество близких, но разных оттенков одного и того же цвета — своеобразные "50 оттенков серого" (и не только серого, но и синего, зелёного и других).
Эта проблема знакома многим командам, особенно на крупных проектах, где над дизайном работают разные люди. На эту тему есть классный доклад Семена Левенсона про дизайн-систему Яндекс.Дзена, но готового решения там не было. Поэтому мы решили создать свой инструмент.
🛠 Как мы это сделали Мы разработали CLI-утилиту, которую назвали zimablue (с отсылкой к одноименной короткометражке из "Любовь, смерть и роботы"). Вот как она работает:
1️⃣ Создание палитры В основе лежит JSON-файл с палитрой всех цветов. Мы взяли палитру Tailwind и добавили в нее наши брендовые цвета.
2️⃣ Анализ проекта Утилита с помощью регулярных выражений парсит весь код проекта, находит все упоминания цветов (в любом формате: HEX, RGB, HSL) и приводит их к HEX-формату.
Пример запуска для поиска всех цветов в проекте: npx zimablue -f ./*/.css
3️⃣ Сравнение и подбор Затем она выводит список всех использованных в проекте цветов, подбирая к каждому ближайший оттенок из палитры по специальному алгоритму. Если найденный оттенок подходит в рамках заданной дельты, он подсвечивается зеленым.
4️⃣ Проверка дизайнером Мы отдали результат дизайнеру на согласование, чтобы убедиться, что автоматическая замена работает корректно.
5️⃣ Автоматическая замена_ После одобрения мы повторно запускаем утилиту с аргументом, который заменяет цвета в коде на выбранные из палитры.
Пример команды для автоматической замены цветов: npx zimablue -f './**/.css' --replace_
✅ Результат В итоге мы смогли унифицировать большую часть цветов в проекте, ускорить процесс и минимизировать человеческий фактор.
Особняком стояли цвета с прозрачностью. Для них мы создали отдельный алгоритм, который помогает находить ближайшие цвета с учетом альфа-канала. Однако, чтобы избежать ошибок, мы решили приводить такие цвета вручную. Это позволило учесть нюансы и сохранить визуальную согласованность в сложных сценариях.
Это позволило нам не только привести проект в порядок, но и заложить фундамент для дальнейшего развития дизайн-системы.
🌐 Утилита в открытом доступе Мы опубликовали zimablue в npm как публичный пакет. Если у вас в проекте стоит похожая задача, вы можете воспользоваться нашим решением. Надеемся, оно сэкономит вам время и нервы!
