Elevation & Shadow System

All 6 elevation levels rendered side by side. Each card applies its respective shadow-elevation-N class so you can compare the visual depth at each level.

Each elevation level is backed by a CSS custom property that resolves to a box-shadow value. The Tailwind theme maps these tokens to shadow-elevation-N utility classes.

Components ship with sensible default elevation levels mapped to Elevation enum members. Surface elements default to Elevation.Surface, overlays use Elevation.Overlay, and modals use Elevation.Modal. All defaults can be overridden via the Elevation parameter.

MD3 elevation combines shadow with a Surface Tint Overlay: a semi-transparent layer of the Primary color whose intensity increases with elevation level. This is especially important in Dark Mode where shadows are barely visible — the tint becomes the primary visual depth cue. The tint is applied via background-image using color-mix() and is fully theme-configurable.

ComponentStyleHelper.ElevationClass(Elevation level) generates the Tailwind shadow class for a given Elevation enum value. The type-safe enum ensures only valid levels (0-5) are used.

// Models/Elevation.cs
public enum Elevation
{
    None = 0,     // no shadow
    Surface = 1,  // cards, panels, navigation bars
    Raised = 2,   // elevated buttons, tooltips
    Overlay = 3,  // menus, dropdowns, snackbar
    Sticky = 4,   // navigation drawer (modal)
    Modal = 5     // modal dialogs
}

// Helpers/ComponentStyleHelper.cs
public static string ElevationClass(Elevation level)
    => $"shadow-elevation-{(int)level}";

// Usage
<Card Elevation="Elevation.Surface" />
<Modal Elevation="Elevation.Modal" />
<Card Elevation="Elevation.None" />    // no shadow