Для адаптации многоцветных SVG-логотипов к тёмной теме, изначально использовались жестко заданные HEX-коды, что не позволяло логотипам автоматически менять цвета при переключении темы. В итоге было принято решение заменить эти HEX-коды на CSS-переменные.
Для этого использовался Plugin API Figma, позволяющий получить доступ к переменным и экспортировать SVG с уникальными ID элементов. Это позволило сопоставить элементы логотипа в Figma с их аналогами в SVG. Для корректного отображения повторяющихся названий слоев, названия вложенных элементов делались уникальными.
Далее была сформирована карта привязок цветов к токенам UI-кита, сопоставляющая уникальные ID элементов с соответствующими CSS-переменными. Эта карта использовалась для замены HEX-кодов на CSS-переменные в SVG с помощью библиотеки SVGO и кастомного плагина, что обеспечило автоматическую адаптацию цветов логотипов к выбранной теме интерфейса.
Изображение носит иллюстративный характер
Для этого использовался Plugin API Figma, позволяющий получить доступ к переменным и экспортировать SVG с уникальными ID элементов. Это позволило сопоставить элементы логотипа в Figma с их аналогами в SVG. Для корректного отображения повторяющихся названий слоев, названия вложенных элементов делались уникальными.
Далее была сформирована карта привязок цветов к токенам UI-кита, сопоставляющая уникальные ID элементов с соответствующими CSS-переменными. Эта карта использовалась для замены HEX-кодов на CSS-переменные в SVG с помощью библиотеки SVGO и кастомного плагина, что обеспечило автоматическую адаптацию цветов логотипов к выбранной теме интерфейса.
