Tokens · Shadows

Shadows

テーマに合わせて切り替わる 8 段階のエレベーショントークン ── ダークモードではアルファ値が濃くなり、同じ shadow が暗い背景でも視認できるようになります。

エレベーションスケール

shadow-none

--shadow-none

影なし。フラットな面。

shadow-sm

--shadow-sm

わずかに浮かせる ── 小さい Card や、立体感のある Badge。

shadow

--shadow

Card / Popover のデフォルトの浮き具合。

shadow-md

--shadow-md

デフォルト浮きのホバー状態。

shadow-lg

--shadow-lg

フローティングパネル、ドロップダウン、ツールチップ。

shadow-xl

--shadow-xl

Modal、Dialog、Command Palette。

shadow-2xl

--shadow-2xl

強く浮かせる ── ヒーローのスポットライト等。

shadow-inner

--shadow-inner

内側へ ── 押下状態や、凹ませたウェル。

テーマでの挙動

ライトモードでは shadow のアルファが 10%、ダークモードでは 20% に上がるので、暗い面の上でも深さが読み取れます。トークン名（shadow-md など）は変わらず、変わるのはアルファ値だけです。任意値の shadow-[...] クラスは使わないでください ── design verifier がブロックします。