[Project Solar / Phase 1 / Components] Tag carbonization

[dchyun]

📌 Summary

This PR carbonizes the Tag component and adds component tokens for it to the tokens library.

Tag carbonization page

🛠️ Detailed description

Summary of changes:

• Aligned typography, colors, paddings, other foundational styles
• Refactored borders to support link specific border colors

🔗 External links

Jira ticket: HDS-6107

---

👀 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 18, 2026 8:52pm
hds-website	Ready	Preview	Mar 18, 2026 8:52pm

[jorytindall]

I think this is causing the icon in the dismiss button to match the text, which is not how the primary variant appears now. So the x in the dismiss button is matching the color of the text.

Before

After

[KristinLBradley]

Looks like this style was there before (now gone in this PR) that was controlling the svg icon color:

.hds-tag__dismiss-icon, .hds-tag__text {
    color: var(--token-color-foreground-primary);
}

[dchyun]

This has been fixed now. I added in some icon color tokens like there are in Figma. I had to separate the link primary and secondary colors for the icon from the plain text color. So I have three new variables

• tag.icon.color
• tag.link.icon.color.primary
• tag.link.icon.color.secondary

[jorytindall]

I've matched up a couple of things in the Figma component (mainly the focus ring), I think this is looking solid, just left one note about the color of the icon in the dismiss button that is being inherited

[dchyun]

[Note] I added a letter spacing token, because without it the cut off for long text would differ between Carbonized HDS and the Carbon component.

Carbonized HDS w/out letter spacing token

Carbon

[didoo]

Personally, I would leave the cutoff different (what is the issue)? I think we're overthinking this letter-spacing thing. For the end-user is not perceivable, it should be considered in the context of a wider, more complex UI.