Wrong color usage for pressed highlight

[dansvend]

Package / App

MAD Components

Version

Latest

What happened?

Currently we use theme.colors.interactive.pressedOverlay in the PressableHighlight component. This is wrong. We should mimic what EDS does. Keep in mind the differences between pressed and hover on web vs. mobile.

• Should a long press trigger an even darker color for a split second?
• Should a hold trigger a different color? Or should it mimic the onHover state on web?

Other info

No response

Relevant log output

No response

[dansvend]

@EmilieOlsen Can you look into this?

[HaakonSvane]

A button is not pressed before the user releases the finger. This is to let users swipe their fingers off the button to cancel the button press.

The idea is then to have the Web and iOS buttons behave like this

When the user...	WEB	iOS
hovers	onHover theme	N/A
holds	onPress theme	onHover theme
releases	onPress theme -> normal theme	onHover theme -> onPress theme -> normal theme

the onPress theme seems to just add a dark overlay to whatever is beneath, so that is solved i think.

What needs to be decided on from @EmilieOlsen is:

• Are you OK with the table presented above?
• What should the Cell components (in both light and dark mode) look like for the onHover theme

[EmilieOlsen]

The table above looks good 🤙🏼
Will look into the other components!

[EmilieOlsen]

Suggestion for the navigation-component:

I did what EDS does in lightmode in an menu-component, but had to make a freestyle version in dark theme.

Can write on the side the name of the color (and HEX-code?) as well.

https://www.figma.com/file/GmYi1qTwOkAM4ZyK5Bsj31/Component-library?type=design&node-id=438%3A22394&mode=design&t=DQN9Kg6trRLVDZpr-1