Shadows / Elevation

[jameskoster]

Related to #63703

Note

Elevation refers to the vertical distance between two surfaces measured along the z-axis.

As the site editing experience transitions from the Editor to new UIs, there is a need for a more clearly defined elevation scale and shadow styles.

In _variables.scss we find values for modals and popovers only:

gutenberg/packages/base-styles/_variables.scss

Lines 72 to 73 in dc93da0

	$shadow-popover: 0 0.7px 1px rgba($black, 0.1), 0 1.2px 1.7px -0.2px rgba($black, 0.1), 0 2.3px 3.3px -0.5px rgba($black, 0.1);
	$shadow-modal: 0 0.7px 1px rgba($black, 0.15), 0 2.7px 3.8px -0.2px rgba($black, 0.15), 0 5.5px 7.8px -0.3px rgba($black, 0.15), 0.1px 11.5px 16.4px -0.5px rgba($black, 0.15);

New UIs now exist with custom shadow values, such as the content/preview frame and the Command Palette. The existing variables do not sufficiently cover these additional use cases. Elements like Snackbars and Tooltips may also require reconsideration.

Systematizing elevation will help create a cohesive experience and avoiding maintenance issues in the future.

Proposed elevation scale

• Elevation 0: The lowest level for most UI elements, with no shadow. Example: Navigation sidebar.
• Elevation 1: For large sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame.
• Elevation 2: For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar.
• Elevation 3: For components that offer additional actions. Example: Menus, Command Palette.
• Elevation 4: For components that confirm decisions or handle necessary interruptions. Example: Modals.

Does this scale meet the needs of the novel UIs, and does its application / mapping of components make sense? Let's discuss and explore further in this issue.

• Add elevation scale #64108
• Apply elevation scale in components package #65159
• Update elevation in the site editor #65410
• Continue updating site editor elevation; Block toolbar/menus, Focus mode/resize handles, Zoom out, Inline inserter buttons, Quick inserter popover
• Update or deprecate Elevation component
• Documentation

[jasmussen]

Nice issue. I wonder, can elevation 2 and 3 be merged? This would improve the contrast between elevations to just have 3 (not conting zero): small, medium, large.