Proposal: Update hover visual

[sravya03]

Summary

Update the hover visual to align more with the depth model. When item is hovered over, the item is lifted. When you get closer to the item, the color becomes lighter.

Rationale

• The button today indicates hover via grid border lines. Removed the border and using color is more coherent and consistent.
• Follows the other control updates being proposed.

Important Notes

Here are the scoped changes proposed. Ones with asterisk are places where change is proposed.

Controls impacted:

• Button
• ToggleButton
• Checkbox
• SplitButton
• ToggleButton
• ToggleSplitButton

[mdtauk]

Fluent Web uses this elevate on hover design. Take a look at the Microsoft Store app pages

[mdtauk]

Here is a look at 4 different Microsoft buttons using Fluent Design.

And on the right is an idea how you could blend those ideas into a new design

[chigy]

Status update

This proposal is being closed in favor of the another proposal (#1054) that was created that better defines the scope of the ask.

BTW, I do believe the other proposal does cover the suggestion @mdtauk mentioned in one of the feedback.

@mdtauk , @sravya03 FYI

[chigy]

Status update

Re-opening this because more systematic update to the button (#1054) was tabled but we still want to do the visual update to remove the border during hover state in WinUI2.2 to bring the design more in line to be more coherent and familiar. This change and #839 should be done together to align the design amongst the set of controls.