chromatic

Chromatic — это инструмент для управления дизайн-системами путем генерации платформозависимых файлов из исходного файла, описывающего дизайн-токены. В README он описывается как система сборки для кроссплатформенных дизайн-систем с использованием дизайн-токенов. Файлы токенов могут содержать сложные выражения в естественном синтаксисе. Примеры включают арифметические операции, такие как 18pt + 5px, единицы измерения, такие как 12px, функции, такие как rgb(), mix() и saturate(), а также ссылки на другие токены. Токен с именем primary-hue может быть установлен в значение 210deg, primary может быть определен как hsl({primary-hue}, 100%, 40%), а primary-dark может ссылаться на primary с трансформацией darken. Это позволяет определениям токенов оставаться компактными, выражая при этом взаимосвязи между значениями. Chromatic поддерживает темы. Каждый токен может иметь тематический вариант, например, темную и светлую темы или компактный и уютный макеты. Необходимые выходные артефакты генерируются автоматически. Например, токен cta-button-background может определять разные значения для темной и светлой тем. Поддержка тем также реализована через импорты: файл темной темы может быть импортирован в базовый файл токенов, чтобы сгенерированный результат содержал как значения по умолчанию, так и тематические значения. Инструмент стремится к концепции zero-conf. Для начала работы достаточно простого файла токенов в формате YAML или JSON. Chromatic также настраиваемый: пользователи могут писать или изменять формат выходных файлов в соответствии со своими требованиями. Кроме того, он доступен в виде API, который можно вызывать из системы сборки. Chromatic является мультиплатформенным. Из одного файла токенов он может генерировать специфические для платформ артефакты: для веба в форматах Sass и CSS, для iOS в форматах JSON и plist, и для Android в XML. Он также может генерировать руководство по стилю (style guide) в виде HTML-файла. Инструкции по началу работы в README включают глобальную установку пакета с помощью npm install -g @arnog/chromatic, создание примера директории с помощью chromatic example ./test и запуск команд chromatic ./test -o tokens.scss или chromatic ./test -o tokens.html. Пользователи также могут создавать собственные файлы токенов. Файл tokens.yaml со значениями background и body-color может быть конвертирован с помощью chromatic tokens.yaml -o tokens.scss, создавая переменные Sass с флагами по умолчанию. Файл темной темы может содержать параметр theme: dark и токены, такие как background и body-color, а затем быть импортированным в основной файл токенов. Сгенерированный CSS-вывод включает пользовательские свойства на уровне root и селектор темной темы с пользовательскими свойствами data-theme='dark'.