理解您主题中使用的阴影样式。
组件中使用的阴影来源于一个六级尺度。有关实现这些阴影的实际值,请参考 源代码。
阴影代币可以通过 CSS 变量访问。您可以使用这些代币来样式化您的自定义组件,确保它们与您主题的其余部分保持一致。
/* 内嵌阴影 */
var(--shadow-1);
/* 用于 variant="classic" 面板的阴影,如 Card */
var(--shadow-2);
var(--shadow-3);
/* 用于较小的浮层面板的阴影,如 Hover Card 和 Popover */
var(--shadow-4);
var(--shadow-5);
/* 用于较大浮层面板的阴影,如 Dialog */
var(--shadow-6);