[Project Solar / Phase 1 / Components] LinkInline and LinkStandalone carbonization

[dchyun]

📌 Summary

This PR carbonizes the LinkInline and LinkStandalone components and adds component tokens for each to the tokens library.

• LinkInline carbonization page
• LinkStandalone carbonization page

🛠️ Detailed description

LinkInline

Note: The LinkInline component does not contain styling for the typography outside of the color. All styling comes from applying an HDS typography class to the component. Those classes are being migrated in a separate effort as part of the Foundational alignments.

Summary of changes

• Aligned margin between icon and text
• Aligned border radius

LinkStandalone

Summary of changes

• Aligned font size, line height, letter spacing, and icon size for each size variant
• Aligned colors for hover and active state, as well as removing background for active state
• Removed transition of color to align to Carbon
• Updated the foreground.action-active semantic variable value for the Carbon themes to align with how Carbon handles links
  • In HDS the active state color is equal to the hover state, but in Carbon the active state is equal to the default state color
• Removed the background from the active state styles
  • The HDS component's active state has a background added through a pseudo element. This background is not present on any other states, or in any of the carbon components. For simplicities sake, this background has been removed from the HDS component. A similar change has been made on the Figma side.

Before

After

🔗 External links

Eng Jira ticket: HDS-6036
Design Jira ticket: HDS-5742
Figma file: [if it applies]

---

👀 Component checklist

• Percy was checked for any visual regression

💬 Please consider using conventional comments when reviewing this PR.

📋 PCI review checklist

• If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
• If applicable, I've worked with GRC to document the impact of any changes to security controls.
  Examples of changes to controls include access controls, encryption, logging, etc.
• If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment.
  Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
hds-showcase	Ready	Preview	Mar 25, 2026 9:34pm
hds-website	Ready	Preview	Mar 25, 2026 9:34pm

[jorytindall]

I've added two new outline tokens, link.inline.outline.width and link.inline.outline.color to align the focus state to Carbon.

Everything looks good to me, but even with the new outline tokens it looks like the width is still more than Carbon's (which is just 1px). Understanding that it's a bit of a unique case compared with the rest of the components that use the mixin. Not wanting to continue splitting hairs!

[dchyun]

Everything looks good to me, but even with the new outline tokens it looks like the width is still more than Carbon's (which is just 1px). Understanding that it's a bit of a unique case compared with the rest of the components that use the mixin. Not wanting to continue splitting hairs!

@jorytindall Both the Carbon focus outline and Carbonized focus outline should be 1px. I believe they are fully aligned. Also made one small update to show the text underline on focus for the carbon themes.

[didoo]

I have left a few minor comments, and a general question

[didoo]

@dchyun this is not a false positive, it's a possible regression: I've checked comparing your branch with production, and I see a shift in the elements in the page, not sure what is the cause (haven't investigated)

[didoo]

Nice job! 💯