[link] Revert to color-mix when underline color is not accepted by silviuaavram · Pull Request #49077 · mui/material-ui · GitHub
Skip to content

[link] Revert to color-mix when underline color is not accepted - #49077

Open
silviuaavram wants to merge 1 commit into
mui:masterfrom
silviuaavram:feat/use-current-color-for-underline
Open

[link] Revert to color-mix when underline color is not accepted#49077
silviuaavram wants to merge 1 commit into
mui:masterfrom
silviuaavram:feat/use-current-color-for-underline

Conversation

@silviuaavram

@silviuaavram silviuaavram commented Sep 1, 2026

Copy link
Copy Markdown
Member

Fixes #49052.
Closes #49054.

Link uses getTextDecoration to apply 40% opacity to its underline color. For color formats supported by MUI's JavaScript color parser, this continues to use alpha() as before.

Valid CSS colors that the parser cannot decompose, such as named colors, previously caused alpha() to throw during render. This change catches that failure and falls back to CSS color-mix():

color-mix(in srgb, <color> 40%, transparent)

This prevents the render failure while preserving the existing styling behavior:

  • Palette, RGB, hex, and CSS-variable colors keep their existing output.
  • Named CSS colors receive the intended transparent underline.
  • The underline remains derived from the color prop, even when styleOverrides or sx changes the rendered text color.
  • Existing RGBA colors continue to use absolute 40% alpha rather than multiplying their current alpha.

Tests cover:

  • Rendering a Link with a named CSS color without throwing.
  • Applying transparency to a named CSS underline color in a browser.
  • Preserving the color prop as the source of the underline color.
  • The fallback with and without CSS theme variables.
  • Existing supported color formats and custom palette colors.

Copilot AI lite review requested due to automatic review settings September 1, 2026 11:07
@silviuaavram silviuaavram added scope: link Changes related to the link. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. labels Sep 1, 2026
@code-infra-dashboard

code-infra-dashboard Bot commented Sep 1, 2026

Copy link
Copy Markdown

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates @mui/material/Link so the underline color is derived from the computed text color (currentColor) using CSS color-mix(), eliminating runtime color parsing that could throw for valid (but non-parsable) CSS colors like named keywords (e.g. white).

Changes:

  • Switch underline="always" to use textDecorationColor: color-mix(..., currentColor 40%, transparent) and restore opaque underline (currentColor) on hover.
  • Remove palette-specific underline color logic and the getTextDecoration helper (and its unit tests).
  • Add coverage in Link.test.js to ensure named CSS colors don’t crash and (in non-JSDOM runs) validate underline color derives from computed text color.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File Description
packages/mui-material/src/Link/Link.js Replaces underline color derivation with currentColor + color-mix(), removing runtime parsing and palette-mapped underline styling.
packages/mui-material/src/Link/Link.test.js Adds tests to prevent regressions for named CSS colors and computed underline color behavior (non-JSDOM).
packages/mui-material/src/Link/getTextDecoration.ts Removes obsolete underline color helper (no longer needed with CSS-based approach).
packages/mui-material/src/Link/getTextDecoration.test.js Removes tests for the deleted helper.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

@silviuaavram
silviuaavram force-pushed the feat/use-current-color-for-underline branch from c24491f to 08a606d Compare September 1, 2026 13:02
@silviuaavram
silviuaavram requested a balanced review from Copilot September 1, 2026 13:05
@silviuaavram silviuaavram changed the title [link] Leverage currentColor for the underline [link] Revert to color-mix when underline color is not accepted Sep 1, 2026

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: link Changes related to the link. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Valid CSS color strings can throw during render when Link has underline="always", crashes the app

4 participants