MudRipple: Follow theme colors and improve visibility (#8072)

[meenzen]

Description

Previously the ripple effect would only use a static color (#000) which doesn't work well with the dark theme. Additionally it was hard to see on filled buttons.

Changes:

• Always use the text color as the ripple color
• Double the effect opacity for filled buttons
• Add a palette option for the ripple opacity
• Fix a minor visual issue where MudNavLink ripple effect was too large

Note: Other Material UI libraries also use the text color for the ripple effect.

resolves #8072

How Has This Been Tested?

visually

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Filled Buttons

Before:

Screencast_20240325_130427.webm

After:

Screencast_20240325_130518.webm

Text Buttons

Before:

Screencast_20240325_130742.webm

After:

Screencast_20240325_130811.webm

MudNavLink

Before:

After:

Checklist:

• The PR is submitted to the correct branch (dev).
• My code follows the code style of this project.
• I've added relevant tests.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 89.01%. Comparing base (61e8a76) to head (c664b36).
Report is 7 commits behind head on dev.

Additional details and impacted files

@@            Coverage Diff             @@
##              dev    #8460      +/-   ##
==========================================
+ Coverage   88.84%   89.01%   +0.16%     
==========================================
  Files         416      411       -5     
  Lines       12358    12188     -170     
  Branches     2458     2433      -25     
==========================================
- Hits        10980    10849     -131     
+ Misses        845      803      -42     
- Partials      533      536       +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[danielchalmers]

Looks great! Naturally handles light/dark themes and makes the hover->active->ripple effect less jarring.
Can you confirm it looks good with touch on mobile too?

I think --mud-ripple-opacity: 0.2 should be scaled so one could change the base value and have it propagate through the library.

I personally think the hover and ripple should be more opaque like MUI but that's a separate issue.

[henon]

I love it.

[danielchalmers]

Should probably be configurable through the Palette

MudBlazor/src/MudBlazor/Themes/Models/Palette.cs

Line 383 in b59465c

public double HoverOpacity { get; set; } = 0.06;

[henon]

Should probably be configurable through the Palette

I don't expect many will need to customize it but who knows. Would this be easy to do as part of this PR?

[meenzen]

I've added configuration options to the palette, both opacity values can be changed separately.

[henon]

Thanks @meenzen

[danielchalmers]

Amazing, thanks for doing that