Shadows

Shadow tokens help with communicating component elevation along z-axis.

Arcade supports 2 shadow tokens that demonstrate the level of elevation of the component.

Base shadow is used to elevate the elements that originally don't have any elevation at all, for example in elevated Card. Elevated shadow is used for elements that are displayed on top of other elements, like in DropdownMenu.

Shadows are usually used together with base and elevated background color tokens: --arcade-color-background-base and --arcade-color-background-elevated. Since shadows are less prominent in dark mode, these color tokens will adjust the background color of the element to communicate the elevation to the user.