Токены цвета

Данный кейс не является полным отображением выполненной работы — он передаёт лишь принцип. Самой работы было в разы больше, но показать её полностью я не могу по причине NDA.

На момент, когда я взялся за задачу, библиотека цветов выглядела, мягко говоря, печально. Цвета задавались либо просто HEX-кодом, либо брались из каких-то непонятных переменных, названных программистами, как им хотелось. Не было системы, и цвета добавлялись по необходимости. В итоге это сильно затягивало разработку и создавало хаос как в коде, так и в интерфейсе пользователя.
Для того чтобы привести всё это в порядок, в начале я запросил у разработчиков все цвета, которые когда-либо использовались. Получился огромный хаотичный список. После этого я систематизировал хотя бы схожие друг на друга цвета и подогнал под них весь остальной зоопарк. Получилось чище, и с этим уже можно было работать.

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

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

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

Добавляем цвета тёмной темы для каждого из цветов. Важно не упустить, что есть контрастные цвета, которые могут не меняться в зависимости от смены темы — для таких заводятся отдельные токены с названием… Invariably. Также важно было в инструменте вариаций добавить правила для использования цветов только в тех компонентах, к которым они относятся.