Names what a thing lifted off the page is painted on: the surface it carries its own background in, the shadow
setting it apart from what it covers, and the blanket dimming the page behind a thing demanding an answer.
Remarks
Pairing — a surface and its shadow are taken together, backgroundColorRaised with boxShadowRaised and
backgroundColorOverlay with boxShadowOverlay. A surface without its shadow reads as a flat patch of a slightly
different colour, and a shadow without its surface lets the page show through wherever the reset hands an element
background-color: inherit.
Steps — backgroundColorRaised lifts a thing that stays in the flow, a card or a sticky header, and
backgroundColorOverlay lifts one that leaves it, a menu, a popover or a dialog. backgroundColorSunken goes the
other way, for a well a thing is dropped into.
Lifting — boxShadow is the shadow of the one element css assigns it to, set from a step.
White pages — the surfaces are derived by lightening the page, so on a light scheme whose page is already white
they resolve to the page colour itself and the shadow carries the whole separation, while on a dark scheme they
lighten as expected. This is what lets one derivation serve both schemes; a design needing a visible card on a light
page overrides the page anchor to an off-white rather than the surface.
Blankets — backgroundColorBlanket is a translucent value, so it dims whatever it covers rather than replacing
it. It pairs with the zIndexBlanket slot, which decides what it covers.
Elevation tokens.
Names what a thing lifted off the page is painted on: the surface it carries its own background in, the shadow setting it apart from what it covers, and the blanket dimming the page behind a thing demanding an answer.
Remarks
Pairing — a surface and its shadow are taken together,
backgroundColorRaisedwithboxShadowRaisedandbackgroundColorOverlaywithboxShadowOverlay. A surface without its shadow reads as a flat patch of a slightly different colour, and a shadow without its surface lets the page show through wherever the reset hands an elementbackground-color: inherit.Steps —
backgroundColorRaisedlifts a thing that stays in the flow, a card or a sticky header, andbackgroundColorOverlaylifts one that leaves it, a menu, a popover or a dialog.backgroundColorSunkengoes the other way, for a well a thing is dropped into.Lifting —
boxShadowis the shadow of the one element css assigns it to, set from a step.White pages — the surfaces are derived by lightening the page, so on a light scheme whose page is already white they resolve to the page colour itself and the shadow carries the whole separation, while on a dark scheme they lighten as expected. This is what lets one derivation serve both schemes; a design needing a visible card on a light page overrides the page anchor to an off-white rather than the surface.
Blankets —
backgroundColorBlanketis a translucent value, so it dims whatever it covers rather than replacing it. It pairs with thezIndexBlanketslot, which decides what it covers.