色にセマンティックなエイリアスを提供するためのガイドです。
blue や red のように、カラースケールを実際のスケール名で参照することはうまく機能します。しかし、特にテーマ設定に関しては、accent、primary、neutral、brand のようなセマンティックエイリアスを作成すると便利なことがよくあります。
このアプローチでは、複数のセマンティクスに同じスケールを使用する必要があるという問題に遭遇する可能性が高くなります。一般的な例としては、以下のようなものがあります。
yellow を "warning" にマッピングした場合、"pending" を伝えるためにも yellow が必要になる場合があります。red を "danger" にマッピングした場合、"error" や "rejected" を伝えるためにも red が必要になる場合があります。green を "success" にマッピングした場合、"valid" を伝えるためにも green が必要になる場合があります。blue を "accent" にマッピングした場合、"info" を伝えるためにも blue が必要になる場合があります。このシナリオでは、同じスケールにマッピングされる複数のセマンティックエイリアスを定義できます。
または、適切なセマンティックエイリアスがない状況では、チームメイトに元のスケール名を参照することを推奨することもできます。
Radix Colors スケールの各ステップは、特定のユースケース向けに設計されています。どのステップを使用するかをチームが把握できるように、設計されたユースケースに基づいてエイリアスを提供できます。
ここでも、このアプローチでは、複数のユースケースに同じステップを使用する必要があるという問題に遭遇する可能性が高くなります。一般的な例としては、以下のようなものがあります。
これらの場合、同じステップにマッピングされる複数のエイリアスを定義できます。
または、ユースケースにエイリアスがない状況では、チームメイトに元のステップ番号を参照することを推奨することもできます。
ライトモードとダークモードの両方を設計する場合、変数をライトモードではある色に、ダークモードでは別の色にマッピングする必要がある場合があります。一般的な例としては、以下のようなものがあります。
"CardBg" や "Tooltip" のような特定の変数名の使用は避けてください。各変数を複数のユースケースで使用する必要がある可能性が高いためです。
必要に応じて、スケール名を変更できます。理由としては、以下のようなものが考えられます。
gray に名前変更して、シンプルにする。sky や grass を blue や green に名前変更して、直感的な名前にする。blurple を使用しているように、ブランドに合わせてスケール名を変更する。