インタラクション状態
ステートレイヤー、「すき間、その外にリング」のフォーカスインジケーター、そして無効の描き方。
操作可能なコンポーネントは、状態について 1 つの語彙を共有します。enabled、hovered、focused、pressed、dragged、selected、activated、error、loading、disabled です。コンポーネントの仕様は対応する状態を列挙し、すべてのプラットフォームがそのすべてを実装しなければなりません。
ホバー、フォーカス、押下、ドラッグは、ステートレイヤーで示します。コンポーネントのコンテナを覆う、半透明のオーバーレイです。
- レイヤーはコンテンツの色、つまり覆っているものの
on-ロールの色を取ります。filled のボタンではon-primary、text のボタンではラベルの色です。 - 不透明度は、コンポーネントではなくトークンが決めます。
- 一度に見えるレイヤーは 1 つだけです。 状態が重なったときは、最も強いものが勝ちます。押下、フォーカス、ホバーの順です。
- 短いエフェクトの遷移でフェードインし、押下のときは即座に現れます。
控えめな選択もレイヤーで、これは残り続けるレイヤーです。リストの選択中の項目、メニューの現在のリンク項目、tonal のタブのインジケーターは、コンテンツの色を selected-state-layer-opacity（ホバーのレイヤーの 2 倍）で、項目の下にあるものの上に重ねて描きます。そのため、どの面の上でも、選択中の項目はホバー中の項目から、ホバー中の項目が通常の項目から離れているのと同じだけ離れて見えます。ホバー、フォーカス、押下のレイヤーはその上に重なります。選択を塗りだけで伝えることはなく、チェック、マーク、ラベルも同じことを伝えます。
| トークン | 値 | 見本 |
|---|---|---|
--tanrei-sys-state-disabled-container-opacity | 0.12 (12%) | AaAa |
--tanrei-sys-state-disabled-content-opacity | 0.38 (38%) | AaAa |
--tanrei-sys-state-dragged-state-layer-opacity | 0.16 (16%) | AaAa |
--tanrei-sys-state-focus-state-layer-opacity | 0.1 (10%) | AaAa |
--tanrei-sys-state-hover-state-layer-opacity | 0.08 (8%) | AaAa |
--tanrei-sys-state-pressed-state-layer-opacity | 0.1 (10%) | AaAa |
--tanrei-sys-state-selected-state-layer-opacity | 0.16 (16%) | AaAa |
生成元 design/tokens/tanrei.light.tokens.json, tokens/sys/state.tokens.json
下のボタンにホバーしたり、押したりして、さまざまなコンテナの上のレイヤーを確かめてください。
ステートレイヤー
キーボードフォーカスは、サーフェスの色の 2px のすき間と、その外側の focus-ring ロールの 2px のリングで描きます。すき間があることで、コンポーネント自身の塗りがリングの色に近いときでも、リングが見えることが保証されます。このロールは、サーフェスに対して 3:1 のコントラストがあるかどうかを検証されます。
- リングは、キーボードと支援技術によるフォーカスに対して表示します。ポインターのクリックでは表示しません。
- アニメーションすることはありません。
- コンポーネントの形状に沿い、外側にずらして描きます。
Tanrei は、押下のときに広がるリップルを描きません。押下のステートレイヤーが、その応えです。テーマがリップルを選ぶことはできますが、リップルに依存するコンポーネントはありません。
無効なコンポーネントは、コンテナを on-surface の disabled-container-opacity で、コンテンツを disabled-content-opacity で描きます。ステートレイヤーは表示せず、フォーカスの順序から外れます。無効な要素はコントラストの要件の対象外です。だからこそ、無効は控えめに使ってください。
ヒント
できれば、アクションは有効なままにして、使われたときに何が足りないかを説明してください。無効なボタンは、なぜ無効なのかを誰にも伝えられません。