Add elevation tokens to storybook

[jameskoster]

Follow up to #65993.

What?

Adds elevation tokens section to storybook.

Why?

This makes them more discoverable and usable.

Testing Instructions

1. npm run storybook
2. Browse the Tokens -> Elevation section

---

The usage section definitely needs some input from an engineer. It would be good to include a section describing how to use the tokens in a third party app.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: jameskoster <[email protected]>
Co-authored-by: ciampo <[email protected]>
Co-authored-by: tyxla <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[ciampo]

Visually showing the different elevation options would be a great addition to this page, similarly to how we show the colors tokens — we should be able to do so by either creating an ad-hoc example for this page, or by using an existing component (ie. Elevation?)

The usage section definitely needs some input from an engineer. It would be good to include a section describing how to use the tokens in a third party app.

Do you mean adding a code snippet? For now, I guess a consumer would only be able to consume the token as Sass variables, right? This should then change one the Theme engine will be implemented and will provide tokens as CSS variables (cc @mirka)

[jameskoster]

Do you mean adding a code snippet?

Yes

For now, I guess a consumer would only be able to consume the token as Sass variables, right?

I don't know :D I kind of assumed the properties in config-values.js were accessible too, but perhaps not?

Visually showing the different elevation options would be a great addition to this page, similarly to how we show the colors tokens — we should be able to do so by either creating an ad-hoc example for this page, or by using an existing component (ie. Elevation?)

Agreed. It would be nice to do it in an abstract way, but the Elevation component doesn't actually use values from the scale yet. So I suppose we'd need to use other components as examples.

[tyxla]

Visually showing the different elevation options would be a great addition to this page, similarly to how we show the colors tokens — we should be able to do so by either creating an ad-hoc example for this page, or by using an existing component (ie. Elevation?)

That would be ideal. It's not something that can't be done in a separate PR, though. I'm fine with approaching these documentation pages in an incremental way.

[ciampo]

I'll push an update later today with code snippets and a visual examples for each elevation

[ciampo]

Pushed a couple of updates — here's what the page looks like now.

Feel free to make amends, or to merge and improve it iteratively in follow-up PRs

[github-actions]

Flaky tests detected in 2db5ee2.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/11386852895
📝 Reported issues:

• [Flaky Test] Navigates the items list via UP/DOWN arrow keys #64334 in /test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js

[jameskoster]

Pushed a couple of tiny adjustments, I reckon this is in a decent spot for an initial iteration.

[ciampo]

Let's merge and iterate 🚀