カラー
カラーロール、モノクロームのプライマリ、ただ 1 つのアクセント、そしてすべてのスキームを生成し検証する仕組み。
Tanrei では、コンポーネントが色を選ぶことはありません。コンポーネントは primary や surface-container といったロールを求め、そのロールにどの色を当てるかは、有効なテーマが決めます。ロールは Tanrei の語彙が定め、その値は各デザインシステムのレイヤが定めます。
- インテント：
primary、secondary、および 4 つのステータスのインテントerror・success・warning・info。それぞれ 4 つで 1 組です。その色、その上に置くコンテンツのためのon-の色、より控えめな-container、そしてon-…-container。 - サーフェス：
surface、surface-container-lowestからsurface-container-highestまでの 5 段階、それにsurface-dimとsurface-bright。どのサーフェスでも、その上のコンテンツにはon-surfaceか、より控えめなon-surface-variantを使います。 - アウトライン：
outlineとoutline-variant（後述）。 - インバースのロール。スナックバーのように、あえてテーマを反転させる要素のためのものです。
- フィックストのロール。ライトでもダークでも同じトーンを保ちます。
- ユーティリティ：
scrim、shadow、focus-ring、およびエレベーションが使うリングと影の色。
塗りには、必ずそれ自身の on- ロールを組み合わせてください。コントラストのチェックが保証しているのは、この組み合わせです。
既定のテーマでは、primary はライトモードでほぼ黒、ダークモードでほぼ白です。そのため、画面で最も重要なアクションが、画面の中で最もコントラストの高いものになり、プロダクト自身の色と競合することもありません。secondary は、補助的なアクションのための、より柔らかいニュートラルです。
アクセントはコアの語彙には含まれません。既定の Tanrei システムが宣言しているパレット（シードは #30a3f0）で、宣言によってほかのインテントと同じ 4 つのロール、accent・on-accent・accent-container・on-accent-container が与えられます。コアのロールである focus-ring がこのパレットから色を取り、ほかにこのパレットを使うロールはありません。既定のシステムでは link はプライマリの色を取り、リンクは下線によって隣のテキストと見分けられます。プロダクトも同じ方法で自分のパレットを宣言します。再計算されてはならないブランドカラーや、クイズの「正解」と「不正解」がその例です。Material Design 3 を模したプリセットも tertiary をこの方法で宣言しており、Tanrei がその枠を全員のために持つことはしていません。アクセントを装飾に使わないでください。すべてが青ければ、何も目立ちません。
2 つのアウトラインのロールは、見た目は似ていますが、役割は正反対です。
| ロール | 目的 | コントラスト |
|---|---|---|
outline |
機能的な境界。空のテキストフィールド、未チェックのチェックボックス、アウトラインのボタンのように、コントロールがどこにあるかを示す唯一のものです。 | すべてのサーフェスロールに対して 3:1 以上 |
outline-variant |
装飾的な細い線。区切り線、カードの枠線、エレベーションのリング。取り除いても、情報が何も隠れてはなりません。 | 標準のコントラストでは要件なし。低いアルファの黒または白です。中コントラストでは 3:1 以上、高コントラストでは 4.5:1 以上をすべてのサーフェスロールに対して満たし、常に outline より弱くなります |
注意
枠線が、コントロールがあることを示す唯一の手がかりであるなら、outline を使わなければなりません。アルファ 8% の細い線は感じがよい一方で、多くの人には見えません。
どのテーマにも 3 つのコントラストレベルがあります。標準が既定です。中と高では、コンテンツのロールが両極へ寄り、2 つのアウトラインのロールがどちらも強くなります。Web では、prefers-contrast: more のときに高コントラストが自動で適用されます。ネイティブのプラットフォームは、それぞれのシステム設定に従います。ここで試せます（スイッチはページ全体に適用されます）。
コントラスト
色を手で選ぶことはありません。システムファイル（tokens/systems/core.system.json）がパレットを宣言します。アクセントとエラーにはシードカラー、ニュートラルには色相と彩度です。さらに、ライトとダークの各コントラストレベルで、各ロールがどのパレットのどのトーンを取るかを、データとして記述します。ビルド時に、ジェネレーターが次のことを行います。
- 各キーカラーを、HCT 色空間のトーナルパレットに変換します。Apache-2.0 の
material-color-utilitiesライブラリを使います。この色空間では、トーンとコントラストの対応が予測できます。 - ニュートラルのパレットを、テーマの彩度に切り詰めます。既定では 0 で、純粋なグレーになります。
- ライトとダークの各コントラストレベルについて、すべてのロールにトーンを割り当てます。
- 結果を、DTCG のファイルとして
tokens/generated/に書き出します。
ジェネレーターのアルゴリズムにはバージョン（specVersion）があります。そのため、対応づけの変更は、すべての色がいつの間にかずれる出来事ではなく、レビューできる意図的な変更になります。
テーマとコントラストの 6 通りの組み合わせすべてについて、次の条件を満たさなければ、トークンのビルドは失敗します。
- すべての
(ロール, on-ロール)の組が 4.5:1 に達している（2 つの高コントラストのスキームでは 7:1）。 outlineが、すべてのサーフェスロールに対して 3:1 に達している。focus-ringが、それを描くサーフェスに対して 3:1 に達している。
ビルドを通すためにしきい値を緩めることはできません。ロールと値の一覧は、カラーのトークンリファレンスにあります。