Migrate Studio dropshadows to KDS

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Summary

As part of migrating Studio to KDS, we will need to move away from Vuetify's elevation system to using KDS dropshadows. We will also need to remove custom box-shadows.

Guidance

• Use KDS dropshadow guidelines
• Also refer to the additional design guidance for Studio:
  

References

Relevant places discovered so far:

• https://github.com/search?q=repo%3Alearningequality%2Fstudio+box-shadow&type=code
• https://github.com/learningequality/studio/blob/e415aff29f10d6a26041e0c99b8184985ac0a0a6/contentcuration/contentcuration/frontend/shared/styles/vuetify.scss#L2121-L2219
• https://github.com/learningequality/studio/blob/e415aff29f10d6a26041e0c99b8184985ac0a0a6/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/ImagesMenu/ImagesMenu.vue#L6

Needs decision

• Will we want to update styles/vuetify.scss or just remove elevations from there completely?
• How do we best scope these updates: sub-tasks, all at once?
• At what point this would be suitable to do?
  • @MisRob: Since Studio still uses many Vuetify components that are presumably consistent with the elevation styles, I wonder if this would be one of the last tasks to do in the migration process?

Start with the repository search for box-shadow, then inspect contentcuration/contentcuration/frontend/shared/styles/vuetify.scss and the referenced ImagesMenu.vue. Read the KDS dropshadow and Studio design guidance, then resolve the open scoping decisions before changing the relevant elevation styles. Done means Studio no longer relies on Vuetify elevations or custom box shadows where the migration requires KDS dropshadows.