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

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

値の考え方

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

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

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

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

プリミティブトークン

0 は影なし

トークン名値(box-shadow
0none
10 1px 2px 0 rgba(0,0,0,0.24)
20 2px 4px 1px rgba(0,0,0,0.24)
40 4px 8px 2px rgba(0,0,0,0.24)
80 8px 16px 4px rgba(0,0,0,0.24)

セマンティクストークン

LAYER0 は影なし

トークン名値(box-shadow
LAYER0none
LAYER10 1px 2px 0 rgba(0,0,0,0.24)
LAYER20 2px 4px 1px rgba(0,0,0,0.24)
LAYER30 4px 8px 2px rgba(0,0,0,0.24)
LAYER40 8px 16px 4px rgba(0,0,0,0.24)

高低差とレイヤー順序は原則連動します。ここでは連動した値も提供します。

レイヤー順序利用コンポーネント
BASELAYER1Base
FIXED_MENULAYER2BottomFixedArea
RightFixedNote
OVERLAPLAYER3CompactInformationPanel
DialogBase
FloatArea
InformationPanel
FLASH_MESSAGELAYER4FlashMessage
© 2021, SmartHR, Inc.