TWE Design System Components: Create shadow styles according to M3

[karina-sato]

Overview

We need to create the shadow styles according to M3 to be used consistently in different components of our Design System

Action Items

• Use M3 Material Design guidelines to assess the style differences
• Create the different levels and styles according to M3 and name them accordingly
• Communicate changes in the issue's comments and with the design team
• Close this issue

Resources/Instructions

• Use Material Design (https://m3.material.io/) as guideline

[mklmrgn]

See my sandbox here

Wrote basic guidelines for elevation styles and shadows using M3 guidelines. Created shadow styles for designers to use based on material specs and usage (Level 1 - Level 5).

[karina-sato]

Great @mklmrgn, tysm! Can you also create a microsite similar to the template below? We can have the different levels of elevations in Class. We don't need states, so instead, we can have Use Case and Examples of when to each.

[mklmrgn]

Microsite created for Elevation Shadow Styles:
https://www.figma.com/file/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?type=design&node-id=4785%3A805&mode=design&t=kXZVrnuuZF9gjS6e-1

[karina-sato]

@mklmrgn update your progress here. If you are finished, add comment with updates and link to the master component + microsite. Unassign yourself, add tag "Ready for dev", move the issue to the question and review column. Don't forget to mark the Action Items.

[mklmrgn]

Created Elevation shadow styles according to Material 3's style guide. Created a brief overview of how to use perceived elevation for UI. Defined different drop shadows for each elevation (i.e. level 1, level 2, etc) in order to have standardized way to create elevation effect using shadows.

Links to Style in Design System and Microsite

[joshfishman]

approved thank you!