Shadows

Elevation shadows from sm to xl. Used by cards, dropdowns, dialogs, and toasts. Shadows automatically adapt to dark mode.

--kg-shadow-smCards, chips, badges

Subtle lift for elements that sit just above the surface.

--kg-shadow-mdPopovers, dropdowns, date pickers

Visible elevation for floating UI that overlaps content.

--kg-shadow-lgModals, dialogs, sheets

Prominent float for focused, blocking content layers.

--kg-shadow-xlCommand palette, full-screen overlays

Highest elevation for top-layer UI.

Dark mode

Under data-theme="dark", shadow opacity is significantly increased. The tint shifts from --kg-gray-900 (#1C1917) to --kg-gray-950 (#0C0A09) so shadows remain visible against dark surfaces.