影

影のトークンは、要素の周りに落とす影（シャドウ）の大きさを定義します。

CSSではbox-shadowやdrop-shadowを指しています。

値の考え方

影の大きさや柔らかさ、拡散量によって要素間の高低差を表現できます。

例えば値の小さい影を持つ要素は、その背後にある要素と近いことを表しています。より大きく柔らかい影は、要素間の距離が離れていることを表します。

それぞれの要素に高低差の視覚効果を与えることで、インターフェース全体に以下のメリットが生まれます。

• ユーザーが要素間の優先度を読み取りやすく、どの要素がインタラクティブなのかを理解しやすくします。
• 要素のレイヤー順序を明確に定義することで、要素同士の意図しない干渉や重なりを回避します。

セマンティックトークン

LAYER0は影なし。 色は透明色を使用しています。

LAYER0

例外的に、コンポーネントの影を打ち消したい場合に使います。

LAYER1

背景の上に表示する視覚的グルーピングのための矩形に使います。

コンポーネント内部での使用例：AppNavi、Panel

LAYER2

以下の場合に使います。

• マウスオーバー時のみ表示される要素
  • コンポーネント内部での使用例：Tooltip
• LAYER1よりも強く高低差を示して、情報の上位・下位を表現したい場合
  • 例：コレクションとシングルの2カラムのコレクション領域

LAYER3

以下の場合に使います。

• スクロールに関わらず画面内に固定表示する場合
  • コンポーネント内部での使用例：FloatArea
• 一時的に要素の上に重なって表示され、ユーザーによる明示的な操作で閉じられる場合
  • コンポーネント内部での使用例：Calendar、Dialog、Dropdown
• 一時的に既存の要素間に割り込んで表示される要素を視覚的に目立たせたい場合
  • コンポーネント内部での使用例：InformationPanel

LAYER4

例外的に、LAYER3を用いても背景とのコントラストが十分でない場合に使います。