Elevation

11 named M2 elevation levels as ready-to-use multi-layer box-shadow values.

@use '@presencelearning/styles/elevation' as e;

.card {
  box-shadow: e.$elevation-01dp;
}
.fab {
  box-shadow: e.$elevation-06dp;
}
.dialog {
  box-shadow: e.$elevation-24dp;
}

The domain also exports the aggregate $elevation map and a get($level) function for dynamic lookups:

.dynamic {
  box-shadow: e.get(01dp);
}

Pass the level unquoted — the map keys are unitful numbers, so e.get('01dp') silently returns null.

$elevation-00dp Flat surface, no shadow

$elevation-01dp Cards (default)

$elevation-02dp Raised buttons

$elevation-03dp Refresh indicator

$elevation-04dp App bar (top)

$elevation-06dp FAB (default)

$elevation-08dp Bottom navigation, menus

$elevation-09dp Side nav

$elevation-12dp FAB (pressed)

$elevation-16dp Nav drawer, modal side sheet

$elevation-24dp Dialog, picker