data/themes/docs/theme/shadows.mdx
<Description>Understanding the shadow styles used in your theme.</Description>
Shadows used in the components are derived from a 6-step scale. Refer to the source code for the actual values used to achieve these shadows.
<Box mt="5" mb="6"> <ThemesShadowScale /> </Box>Shadow tokens can be accessed using CSS variables. You can use these tokens to style your custom components, ensuring they are consistent with the rest of your theme.
/* 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);