Related to #63703

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:

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
• Storybook: Add foundations page
• Storybook: Add tokens (Add elevation tokens to storybook #66122)