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.
Glass — backgroundColorGlass is a translucent ground a step darker than the page, gathering surfaces that float
over the page into one group without a shadow to set them apart, such as a stack of transient notices. It carries no
text of its own: the surfaces set on it do, painted with backgroundColorOverlay, which stands out from it in either
scheme, so their text keeps its contrast whatever the glass lets through.
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.Glass —
backgroundColorGlassis a translucent ground a step darker than the page, gathering surfaces that float over the page into one group without a shadow to set them apart, such as a stack of transient notices. It carries no text of its own: the surfaces set on it do, painted withbackgroundColorOverlay, which stands out from it in either scheme, so their text keeps its contrast whatever the glass lets through.