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で記述されたシンプルなトークンファイルがあれば、すぐに開始できます。また、必要に応じてカスタマイズも可能で、ユーザーは要件に合わせて出力ファイルの形式を記述または変更できます。さらに、ビルドシステムから呼び出し可能なAPIとしても提供されています。 Chromaticはマルチプラットフォームに対応しています。単一のトークンファイルから、Web向けにはSassとCSS、iOS向けにはJSONとplist形式、Android向けにはXMLというプラットフォーム固有の成果物を生成できます。また、HTMLファイルとしてスタイルガイドを生成することも可能です。 READMEの開始手順では、npm install -g @arnog/chromaticによるパッケージのグローバルインストール、chromatic example ./testによる例ディレクトリの作成、およびchromatic ./test -o tokens.scssまたはchromatic ./test -o tokens.htmlの実行について説明されています。ユーザーは独自のトークンファイルを記述することもできます。backgroundとbody-colorの値を持つtokens.yamlファイルをchromatic tokens.yaml -o tokens.scssで変換すると、デフォルトフラグ付きのSass変数が生成されます。ダークテーマファイルでtheme: darkとbackgroundやbody-colorなどのトークンを設定し、それをメインのトークンファイルにインポートすることも可能です。生成されたCSS出力には、ルートレベルのカスタムプロパティと、data-theme='dark'を持つダークテーマセレクターのカスタムプロパティが含まれます。