TWE Design System Components: Update Input field according to M3

[karina-sato]

Overview

We need to update the components to match M3 Material Design guidelines style

Action Items

• [x] Use M3 Material Design guidelines to assess the style differences
• [x] Update the component design
• [x] Communicate changes in the issue's comments and with the design team
• [x] Update/create microsite for devs accordingly
• [ ] Get sign-off from Project Manager
• [x] Add the microsite to the "Ready for Dev" page
• [ ] Close this issue

Resources/Instructions

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

[meetminji]

BEFORE

AFTER

• Is default state and hover state hard to distinguish?
• Is disabled state too light?
• Get feedback.

[meetminji]

disabled grey too light, switch to color "grey" and close issue

[karina-sato]

Thank you @meetminji. Can you also create the microsite for the dev team? In the next team meeting, you can present the microsite to get sign off and close the issue.

[karina-sato]

Hi @meetminji Can you add your updates here? If you're finished, can you please add links to the master component + microsite, unassign yourself from this issue, tag "Ready for dev lead", and move the issue to the Question/Review column?

Don't forget to mark the Action Items and Hide the outdated comments.

[meetminji]

Updated "disabled state" color

does every class need all the dimensions? does it get too repetitive?

Need to finish microsite and it should be ready for dev.

there are 9 classes and not sure how to show on microsite.

https://www.figma.com/file/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?type=design&node-id=5186-4811&mode=design&t=xWuRqnxufhaJDP75-0

zoomed in

masters

[meetminji]

• [x] Disabled should be darker. Check with accessibility.
• [x] plugin for measurement on figma @karina-sato
• [x] microsite: put right arrow icon on class section if it does not fit in container

[meetminji]

Changed disabled colors and passed accessibility test:

Microsite ready for dev:

but had some issues with spec measurements

[meetminji]

Specs ready to go

[ExperimentsInHonesty]

Add an optional background color specification for the input fields add info about percentage for opacity/transparency/saturation for dark mode

[meetminji]

https://m2.material.io/design/color/dark-theme.html#properties

A dark theme uses dark grey, rather than black

16% is the highest elevation level

[meetminji]

[meetminji]

for picking other colors

https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors

[meetminji]

TWE Colors for Dark Mode

https://www.figma.com/file/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?type=design&node-id=5424-5616&mode=design&t=rJgo7yiWS9NKotqh-0

[meetminji]

dark mode for v2