テーマで使用されているシャドウのスタイルについて理解する。
コンポーネントで使用されるシャドウは、6段階のスケールから派生しています。これらのシャドウを実現するために使用される実際の値については、ソースコードを参照してください。
シャドウトークンは CSS 変数を使用してアクセスできます。これらのトークンを使用すると、カスタムコンポーネントをスタイル設定し、テーマの他の部分と一貫性を保つことができます。
/* Inset shadow */ var(--shadow-1); /* Shadows for variant="classic" panels, like Card */ var(--shadow-2); var(--shadow-3); /* Shadows for smaller overlay panels, like Hover Card and Popover */ var(--shadow-4); var(--shadow-5); /* Shadows for larger overlay panels, like Dialog */ var(--shadow-6);