エレベーション
エレベーションは box-shadow の4段階（floating / low / medium / high）で、値が大きいほど画面上に「浮いている」度合いが強くなります。この段階は レイヤー の重なり順（z-index）と対応させています。浮遊度が高い部品ほど、重なり順も上位に置きます。
色や角丸と異なり、ダークモードでも同じ box-shadow 値を使います（暗背景では影の視認性が下がるため、将来的に不透明度の調整が必要になる可能性がありますが、現行実装ではライト/ダーク共通です）。
src/theme/DefaultTheme.ts の elevation オブジェクトから自動生成しています。
| token | 見本 | box-shadow |
|---|---|---|
elevation.floating |
0 4px 12px rgba(0, 0, 0, 0.12) |
|
elevation.low |
0 1px 3px rgba(0, 0, 0, 0.1) |
|
elevation.medium |
0 4px 12px rgba(0, 0, 0, 0.15) |
|
elevation.high |
0 10px 30px rgba(0, 0, 0, 0.2) |
- low: Card のような、常時表示されるが浮いている感覚を弱く出したい面。
- floating: Dropdown / SearchDropDown / DatePicker / PopupMenu など、クリックで開く一時的な浮遊パネル。
- medium: Toast のような、画面の他要素より前面に出る通知。
- high: Dialog のような、操作をブロックする最前面の面。
やってはいけないこと
Section titled “やってはいけないこと”box-shadow: 0 4px 12px rgba(0,0,0,0.12)のように値を直接書かない。theme.elevation.floatingを使います。- 「もう少し目立たせたい」という理由で4段階の中間値を独自に作らない。目立たせたい場合は段階そのものを見直します。
- エレベーションだけで重なり順を管理しない。実際の描画順は レイヤー の z-index で決めます。