Add docs for the usage of each shadow level

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

I would be very nice to have a list of usage of each shadows level in theme settings, like where each shadow level is being used in MUI Components. For example, theme.shadows[1] is being used for Card component, theme.shadows[4] is being used for AppBar component and theme.shadows[5] is being used in Popover component.

This would really help people who are customizing their own design system with a different set of shadows than the default.

Examples 🌈

A label on each shadow level of which components are using it (this example is not accurate, but it should paint a picture)

Shadows
0
1 - Card, Paper, Button
2 - Popover
3
4 - App Bar
5 - Drawer, Snack Bar
.
.
.
25 - Dialog

Motivation 🔦

When I was working with designers to come up with a custom theme that has a different style of shadows than the MUI default, I'm having a hard time describing how each shadow level should be designed and where it will be used.

There's a total of 25 shadow levels, and we don't know which one will be used or how to design each shadow level so that it will look nice on each component.

Start by reviewing the theme shadow levels and the components cited in the issue, including Card, AppBar, Popover, Drawer, Snack Bar, and Dialog. Document which components use each of the 25 shadow levels, and consider the work complete when the list clearly explains the intended usage of every level.