Shadows / Elevation

[jameskoster]

Related to https://github.com/WordPress/gutenberg/issues/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: https://github.com/WordPress/gutenberg/blob/dc93da08a38af14aef07906c63ec11a599d74582/packages/base-styles/_variables.scss#L72-L73

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.

[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.