diff --git a/storybook/stories/foundations/design-language/elevation.mdx b/storybook/stories/foundations/design-language/elevation.mdx new file mode 100644 index 0000000000000..11591568b3600 --- /dev/null +++ b/storybook/stories/foundations/design-language/elevation.mdx @@ -0,0 +1,87 @@ +import { Meta, Typeset } from '@storybook/addon-docs/blocks'; +import elevation from './static/elevation.svg'; +import elevationExamples from './static/elevation-examples.svg'; + + + +# Elevation + +{/* Leaving alt text empty since this image is presentational */} + + + +Elevation, through the use of shadows, visually indicates the layers where overlapping UI elements reside. Shadows create the illusion of depth, showing how one UI element is positioned above another on the z-axis. Elevation should be used to organize elements, establish a clear hierarchy, and draw focus to key components. + +In the WordPress Design System there are four levels of elevation correlating to specific uses: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElevationUsageExamples
Extra small + Applied to large sections and containers that group related content + and controls. These containers may shift or overlap other content + without causing too much visual disruption + Preview Frame, Content Frame
Small + Used for components that provide contextual feedback without being + overly intrusive. Small elevation is ideal for non-interruptive elements + that subtly surface additional information or actions. + Tooltips, Snackbars
Medium + Applied to components that offer additional actions to the user. This + elevation level helps differentiate actionable elements that appear in + context without requiring major focus shifts. + Menus, Command Palette
Large + Reserved for components that confirm actions or require decisions, large + elevation is used for more interruptive elements that demand user attention + to complete important tasks. + Modals
+ +## Accessibility considerations + +* Interactive Elements: Elevation can be an important visual cue to indicate which elements are interactive, +particularly for folks with monochromatic color blindness. Elevating buttons, handles, and other interactive +elements makes them stand out, helping users quickly identify where they can take action. +* Focus: Higher levels of elevation can be used to draw attention to components that require user interaction +or confirmation, such as modals, guides, and decision-based tasks, enhancing accessibility by reducing +cognitive load. + +## Examples + +The diagram below visually demonstrates the examples outlined in the table above. + +Diagram illustrating elevation levels + +1. Content frame and Preview frame +2. Snackbar +3. Menu +4. Modal + +## Tokens + +Use tokens to apply elevation in your work. Please refer to the [Tokens section](?path=/docs/tokens-elevation--page) to learn more. diff --git a/storybook/stories/foundations/design-language/static/elevation-examples.svg b/storybook/stories/foundations/design-language/static/elevation-examples.svg new file mode 100644 index 0000000000000..516313cbca4df --- /dev/null +++ b/storybook/stories/foundations/design-language/static/elevation-examples.svg @@ -0,0 +1,170 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/storybook/stories/foundations/design-language/static/elevation.svg b/storybook/stories/foundations/design-language/static/elevation.svg new file mode 100644 index 0000000000000..737e7955ad9df --- /dev/null +++ b/storybook/stories/foundations/design-language/static/elevation.svg @@ -0,0 +1,208 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/storybook/stories/foundations/design-language/static/wp-logo@2x.png b/storybook/stories/foundations/design-language/static/wp-logo@2x.png new file mode 100644 index 0000000000000..a95cd961902b0 Binary files /dev/null and b/storybook/stories/foundations/design-language/static/wp-logo@2x.png differ diff --git a/storybook/stories/tokens/elevation.mdx b/storybook/stories/tokens/elevation.mdx index d00de6dbde7fa..5bd7dbf79a262 100644 --- a/storybook/stories/tokens/elevation.mdx +++ b/storybook/stories/tokens/elevation.mdx @@ -5,7 +5,7 @@ import { ElevationTable } from './components.tsx'; # Elevation tokens -This document outlines the various tokens relating to elevation in the WordPress design system. +This document outlines the various tokens relating to [elevation](?path=/docs/foundations-design-language-elevation--page) in the WordPress design system. ## Values