[link] Links using `color="inherit"` don't use the proper color for the text decoration

[gentlementlegen]

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/laughing-dubinsky-fsop9l?file=/src/App.tsx

Current behavior 😯

When using the property color="inherit" on a MuiLink component, the underline color doesn't change on hover. Instead, it remains the same color as the link text.

Expected behavior 🤔

The color should be different, or at least the alpha, as it is the behavior for all the other colors. Or the documentation should show a warning, or a workaround regarding this behavior.

Context 🔦

I am using Alert components in which there is a text link, in the form of a MuiLink. I have to hardcode the color for it to be the same color as the Alert text. On a side note, I could not find inside the palette the colors used for the text inside Alert components.

Your environment 🌎

The environment is the one set by the default Sandbox provided by the official template.

[mnajdova]

When some specific value for the color is used, we are able to add the opacity for the text decoration, because we have the RGB, but when inherit is used, we just use the inherit CSS value, we can't really add opacity in that case. If the color is not dynamic, adding the style override is the feasible way for achieving what you are trying to do.

[gentlementlegen]

Thank you for the update. In such case, could you recommend an approach to handle dark / light mode inside Alert components to match the text? The colors used for the text inside Alert components don't seem to be exposed anywhere in the theme, so I cannot do color="text.alert" or something similar.

[oliviertassinari]

I'm removing the "status: expected behavior", it's not the correct behavior. The closest label would be "external dependency" if we can't implement the desired behavior.

But even then, it's not true, we can use color-mix(in srgb, currentColor, white 60%), it seems to work fine as even if the value is not recognized by the browser (outside of our browser support), the default is currentColor: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color#formal_definition, so it's backward compatible (older browsers would get today's UX)

Screen.Recording.2024-02-25.at.20.29.09.mov

This looks like a quick win to me.

[siriwatknp]

@gentlementlegen Check this out! https://stackblitz.com/edit/cu6pxmbh?file=src%2FDemo.tsx

It's currently a WIP PR: #43942, you can participate by giving it a like to pushing to the finishing line.