Shadows
シャドウはUIに深さと階層を与え、要素の浮き上がりを表現します。ダークモードではopacityが自動で調整されます。
Shadow Scale
さまざまな用途に対応した5段階のエレベーション（ダークモード自動対応）
1
level
xs控えめなエレベーション
2
level
sm軽いエレベーション
3
level
mdフローティング要素
4
level
lg高いエレベーション
5
level
xl最も高いエレベーション
1
level
xs2
level
sm3
level
md4
level
lg5
level
xlPreview
shadow-xsLv.1控えめなエレベーション
バッジタグインライン要素
Preview
shadow-smLv.2軽いエレベーション
カード選択状態ホバー
Preview
shadow-mdLv.3フローティング要素
ドロップダウンポップオーバー
Preview
shadow-lgLv.4高いエレベーション
モーダルダイアログトースト
Preview
shadow-xlLv.5最も高いエレベーション
大型モーダルオーバーレイ
Light / Dark Comparison
ダークモードではopacityが自動的に増加し、視認性が向上します。
Light Mode
xssmmdlgxlDark Mode
xssmmdlgxlHover Elevation
ホバー時にシャドウを変化させてインタラクティブ性を表現
xs → sm
sm → md
md → lg
カードにホバーして効果を確認してください
Component Shadows
一般的なUIコンポーネントの推奨シャドウトークン
推奨シャドウトークン: 各UIコンポーネントに最適なシャドウトークンの一覧です。
Card
shadow-smカードの軽いエレベーション
Dropdown
shadow-mdドロップダウンメニュー
Modal
shadow-lgモーダル、ダイアログ
Tooltip
shadow-smツールチップ
Popover
shadow-mdポップオーバー
Dark Mode Notes
✓ 自動ダークモード対応
シャドウトークンはテーマごとに最適なopacity値が定義されています。CSS変数で自動的に切り替わるため、コンポーネントコードの変更は不要です。
Light Mode
xs
opacity: 0.05sm
opacity: 0.1md
opacity: 0.1lg
opacity: 0.1xl
opacity: 0.1Dark Mode
xs
opacity: 0.2sm
opacity: 0.3md
opacity: 0.3lg
opacity: 0.3xl
opacity: 0.3shadow-xs0.05→0.2
shadow-sm0.1→0.3
shadow-md0.1 / 0.06→0.3 / 0.2
shadow-lg0.1 / 0.05→0.3 / 0.2
shadow-xl0.1 / 0.1→0.3 / 0.25
| Token | Light | → | Dark | 倍率 |
|---|---|---|---|---|
shadow-xs | 0.05 | → | 0.2 | 4× |
shadow-sm | 0.1 | → | 0.3 | 3× |
shadow-md | 0.1 / 0.06 | → | 0.3 / 0.2 | 3× |
shadow-lg | 0.1 / 0.05 | → | 0.3 / 0.2 | 3× |
shadow-xl | 0.1 / 0.1 | → | 0.3 / 0.25 | 3× |
ダークモードでの追加テクニック
シャドウに加えて、以下のテクニックを併用するとより効果的です：
- ✓境界を定義するために控えめなボーダーを使用
- ✓浮き上がった要素の背景色を明るくする（bg-elevated）
- ✓シャドウとボーダーの組み合わせで深さを表現