シャドウエレベーショントークン — 階層化されたボックスシャドウシステム

シャドウエレベーショントークンのデザイン

シャドウトークンはフラットインターフェースに奥行きの錯覚を作り出します。よく設計されたエレベーションシステムは視覚的階層を伝えます：浮遊要素（モーダル、ドロップダウン）はページ表面の上に表示されます。

エレベーションスケール

:root {
  --shadows-none: none;
  --shadows-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadows-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadows-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadows-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadows-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

コンポーネントとエレベーションのマッピング

コンポーネントタイプに一貫したエレベーションレベルを割り当てます。

マルチレイヤーシャドウ

リアルなシャドウは複数のレイヤーを使用します。各レイヤーは異なる光の特性をシミュレートします。

ダークモードのシャドウ

ダークモードでは、シャドウはより高い不透明度と場合によってはカラーティンティングが必要です。

パフォーマンスに関する注意

複雑なマルチレイヤーシャドウはコストの高い再描画を引き起こす可能性があります。シャドウ付きのアニメーション要素にはwill-change: transformを使用してください。