Migrate Studio dropshadows to KDS

[MisRob]

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?

[lokesh-sagi125]

hey @MisRob, can I work on this issue since I also worked with dropshadows in both kolibri and kolibri-design-system

[marcellamaki]

Hi @lokesh-sagi125 - thanks for your interest! Since this is still labeled as "Needs Decisions" it's not quite ready for assignment yet, but once it is, we'll tag it as help wanted and check to see if you're still interested in working on it!