fix(core): give underlined Link a visible hover state

[durvesh1992]

Summary

Closes #2852.

When hasUnderline is enabled, Link was always underlined, so the base :hover → underline rule produced no visible change on hover. Now the underline flips off on hover — a clear affordance that mirrors the default link (which adds an underline on hover). Both variants now have symmetric, visible hover feedback, using the existing text-decoration mechanism (no new tokens).

packages/core/src/Link/Link.tsx — styles.hasUnderline gains a :hover (under @media (hover: hover)) that sets text-decoration: none.

Testing

• pnpm -F @astryxdesign/core test Link — 50/50 pass.
• Verified the rule compiles into astryx.css: @media (hover: hover){…:hover…{text-decoration:none}}.

Note: I couldn't run a browser in my environment to capture a hover screenshot, so this is verified at the CSS-compilation + unit-test level. A quick visual check is welcome — and if maintainers prefer a different affordance (e.g. a color shift) over removing the underline, I'm happy to adjust.

Changeset

Included (@astryxdesign/core patch).

[vercel]

Someone is attempting to deploy a commit to the Meta Open Source Team on Vercel.

A member of the Team first needs to authorize it.

[cixzhang]

Thanks for working on this. @kentonquatman when you filed #2852 did you have a specific visual in mind for when a link with hasUnderline is hovered?

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
astryx	Ready	Preview, Comment	Jun 26, 2026 11:37pm

[kentonquatman]

Thanks for this contribution! For this update, we'd like to keep the underline and just have a color change on hover - similar to Material Design, IBM Carbon, and Microsoft Fluent. The trick will be figuring out how to make it work across all themes.

[kentonquatman]

Maybe we just need to add theme support for hover: https://github.com/facebook/astryx/blob/main/packages/core/src/Link/Link.tsx#L107-L126

[cixzhang]

Maybe we just need to add theme support for hover: https://github.com/facebook/astryx/blob/main/packages/core/src/Link/Link.tsx#L107-L126

We want to try to avoid having component or situation specific tokens in gimbals since it can lead to expansion and these need to be kept as minimal as possible to avoid memory crashes on complex apps.

I'm thinking we can do a color adjust using --color-tint in the base styling for links with underline. This should work well in most cases then can be adjusted by component override theming for themes that want something different.

[cixzhang]

Let's follow the design adjustment to adjust the color on hover using the tint.

[durvesh1992]

Reworked to follow the design direction: instead of toggling the underline off on hover, links now shift their color on hover using the hover tint — color-mix(in srgb, <link color>, var(--color-tint-hover) 15%), the same pattern Slider/Switch/RadioList use. Applied to the primary, secondary, and accent color variants (disabled/placeholder/inherit left alone).

This gives always-underlined links (hasUnderline) the visible hover affordance they were missing — previously their underline never changed — while the default link keeps its underline-on-hover. color is already in the transition, so it animates.

Note: the old branch had drifted ~73 commits behind main (it predated the active→accent color rename), so I rebuilt the change cleanly on top of current main — the diff is now just the Link color hover + changeset. Verified: compiles into astryx.css (3 new color-mix … --color-tint-hover 15% rules) and 26/26 Link tests pass. If the design spec wants a different mix % than 15%, happy to adjust.

[kentonquatman]

Thanks @durvesh1992!