エレベーション
重なりの順序を表す 6 つのレベル。細い線のリングとごく柔らかい影で描き、サーフェスに色は重ねません。
エレベーションは、どのサーフェスがどのサーフェスの上にあるかを表します。Tanrei は 0 から 5 までの 6 つの意味上のレベルを保ちつつ、抑えた描き方をします。
level0level1level2level3level4level5| トークン | ライト | ダーク |
|---|---|---|
--tanrei-sys-elevation-level0 | ||
--tanrei-sys-elevation-level1 | 0px 0px 0px 1px rgb(0 0 0 / 0.08) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) |
--tanrei-sys-elevation-level2 | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 2px 0px rgb(0 0 0 / 0.04) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 2px 0px rgb(0 0 0 / 0.04) |
--tanrei-sys-elevation-level3 | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 4px 8px -4px rgb(0 0 0 / 0.04) 0px 16px 24px -8px rgb(0 0 0 / 0.06) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 4px 8px -4px rgb(0 0 0 / 0.04) 0px 16px 24px -8px rgb(0 0 0 / 0.06) |
--tanrei-sys-elevation-level4 | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 8px 16px -4px rgb(0 0 0 / 0.04) 0px 24px 32px -8px rgb(0 0 0 / 0.06) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 8px 16px -4px rgb(0 0 0 / 0.04) 0px 24px 32px -8px rgb(0 0 0 / 0.06) |
--tanrei-sys-elevation-level5 | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 8px 24px -12px rgb(0 0 0 / 0.12) 0px 8px 32px -12px rgb(0 0 0 / 0.06) 0px 32px 72px -12px rgb(0 0 0 / 0.06) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 8px 24px -12px rgb(0 0 0 / 0.12) 0px 8px 32px -12px rgb(0 0 0 / 0.06) 0px 32px 72px -12px rgb(0 0 0 / 0.06) |
生成元 design/tokens/tanrei.light.tokens.json, design/tokens/tanrei.dark.tokens.json, tokens/sys/elevation.tokens.json
0 より上の各レベルは、2 種類の層からなる合成の影のトークンです。
elevation-ringロールの 1px のリング。どんな背景の上でも、縁をくっきりと示します。- レベルとともに大きくなる、1 つか 2 つのごく柔らかく不透明度の低い影。
リングは常に最初の層です。影の広がり（スプレッド）を描けないプラットフォームは、リングを 1 ピクセルの枠線として描き、残りはそのまま保ちます。
浮いたサーフェスに、プライマリの色を重ねることはしません。奥行きは、リングと影、そして必要に応じてサーフェスコンテナの段階を 1 つ上げることで表します。これにより、ニュートラルなサーフェスはニュートラルなままです。
ほぼ黒の背景の上では影が見えにくいため、ダークテーマでは主にリングが役割を担います。浮いたサーフェスは、より明るいコンテナのロールへも 1 段上がります。
| レベル | 典型的な用途 |
|---|---|
| 0 | ページ、およびページと同じ面にあるもの |
| 1 | 静止状態のカード、選択中のセグメント |
| 2 | elevated のボタン、ホバー時に浮くカード |
| 3 | メニュー、ポップオーバー、スナックバー |
| 4–5 | ダイアログ、シート、その他のモーダルなサーフェス |
レベルの数は、画面が成り立つ範囲でできるだけ少なくしてください。隣り合う 2 つを分ける必要があり、どちらも浮いていないなら、代わりに細い線を使います。