Add hover visual effect for Popup button

[LeafShi1]

Fixes #13882

Proposed changes

• Distinguish between the normal state and hover state of the Popup button, and add a visual effect of about to be pressed to the hover state

Customer Impact

• In Dark mode, Popup buttons also have normal visual feedback

Regression?

• No

Risk

• Minimal

Screenshots

Before

Hover on the button:

Hover-beforeChanges.mp4

Press the button:

Press-BeforeChanges.mp4

After

Hover on the button:

Hover-AfterChanges.mp4

Press the button:

Pressed-AfterChanges.mp4

Test methodology

• Manually

Test environment(s)

• .net 10.0.0-rc.1.25468.102

Microsoft Reviewers: Open in CodeFlow

[Copilot]

Pull Request Overview

This PR adds hover visual effects for Popup buttons in dark mode by implementing distinct rendering states for normal, hover (hot), and pressed button states.

Key changes:

• Enhanced the pressed state with deeper shadows and brighter highlights for better visual depth
• Added a new hover (hot) state that provides intermediate visual feedback between normal and pressed states
• Updated comments to clarify the visual effects for each button state

[codecov]

Codecov Report

❌ Patch coverage is 0% with 10 lines in your changes missing coverage. Please review.
✅ Project coverage is 77.14038%. Comparing base (f812cb6) to head (c6a34f4).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files

@@                 Coverage Diff                 @@
##                main      #13891         +/-   ##
===================================================
- Coverage   77.16116%   77.14038%   -0.02079%     
===================================================
  Files           3273        3274          +1     
  Lines         644919      645050        +131     
  Branches       47694       47702          +8     
===================================================
- Hits          497627      497594         -33     
- Misses        143607      143779        +172     
+ Partials        3685        3677          -8     

Flag	Coverage Δ
Debug	77.14038% <0.00000%> (-0.02079%)	⬇️
integration	18.98162% <0.00000%> (-0.08371%)	⬇️
production	51.99150% <0.00000%> (-0.05427%)	⬇️
test	97.41286% <ø> (+0.00029%)	⬆️
unit	49.41490% <0.00000%> (+0.00663%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[KlausLoeffelmann]

Question:
You had your MP4s shown under "Before" and "After" in your PR description. That would be wrong. But I think you increased the contrast.

Is it rather "Hover" and "Pressed" instead of that?
If that's a case, could you show all 4 versions?

• Pressed - Before/After
• Hover - Before/After

Thanks!

[LeafShi1]

Question: You had your MP4s shown under "Before" and "After" in your PR description. That would be wrong. But I think you increased the contrast.

Is it rather "Hover" and "Pressed" instead of that? If that's a case, could you show all 4 versions?

• Pressed - Before/After
• Hover - Before/After

Thanks!

I updated the description. The visual change is clearer when the button has a background color.