影
影のトークンは、要素の周りに落とす影(シャドウ)の大きさを定義します。
CSSではbox-shadow
やdrop-shadow
を指しています。
値の考え方
影の大きさや柔らかさ、拡散量によって要素間の高低差を表現できます。
例えば値の小さい影を持つ要素は、その背後にある要素と近いことを表しています。より大きく柔らかい影は、要素間の距離が離れていることを表します。
それぞれの要素に高低差の視覚効果を与えることで、インターフェース全体に以下のメリットが生まれます。
- ユーザーが要素間の優先度を読み取りやすく、どの要素がインタラクティブなのかを理解しやすくします。
- 要素のレイヤー順序を明確に定義することで、要素同士の意図しない干渉や重なりを回避します。
LAYER0
LAYER1
LAYER2
LAYER3
LAYER4
セマンティックトークン
LAYER0
は影なし。
色は透明色を使用しています。
トークン名 | 値(box-shadow ) | 利用コンポーネント例 |
---|---|---|
LAYER0 | none | |
LAYER1 | 0 1px 2px 0 TRANSPARENCY_30 | AppNavi Base |
LAYER2 | 0 2px 4px 1px TRANSPARENCY_30 | Tooltip |
LAYER3 | 0 4px 8px 2px TRANSPARENCY_30 | BottomFixedArea(上方向) Calendar CompactInformationPanel Dropdown FloatArea InformationPanel |
LAYER4 | 0 8px 16px 4px TRANSPARENCY_30 | FlashMessage |