[Project Solar / Phase 1 / Cherry-pick] Cherry-pick updates to the HDS tokens

[didoo]

Note

Code cherry picked (and in some cases tweaked) from #3237

📌 Summary

There are some minor changes made to the HDS tokens in #3237 that can be cherry picked and imported directly and safely to the main branch.

🛠️ Detailed description

See commits descriptions for details about the changes.

🔗 External links

Jira ticket: https://hashicorp.atlassian.net/browse/HDS-6480

---

👀 Component checklist

• Percy was checked for any visual regression
• A changelog entry was added via Changesets if needed (see templates here)

💬 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	Jun 25, 2026 8:10pm
hds-website	Ready	Preview	Jun 25, 2026 8:10pm

[Copilot]

Pull request overview

Cherry-picks a set of updates to the HDS tokens package, adding new component-level token definitions (badge, badge-count, icon-tile), extending form base tokens with additional foreground/typography tokens and deprecations, and introducing a global CSS helper token for color-transform direction—along with regenerated dist/ artifacts.

Changes:

• Add new shared product token sets for badge, badge-count, and icon-tile.
• Expand form/base-elements with new foreground + typography tokens and mark older color tokens as deprecated.
• Add a global css.color-transform.direction token and a tokens package start watcher script (plus dependency), regenerating dist/ outputs.

Reviewed changes

Copilot reviewed 6 out of 10 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Locks the newly added dev dependency for the tokens package watcher script.
packages/tokens/package.json	Adds a start script for watching token builds and adds @cnakazawa/watch.
packages/tokens/src/global/css.json	Introduces a global CSS helper token for color-transform direction with modes.
packages/tokens/src/products/shared/form/base-elements.json	Adds new form foreground + typography tokens and deprecates prior color tokens.
packages/tokens/src/products/shared/badge.json	Adds new badge sizing/color/typography token definitions.
packages/tokens/src/products/shared/badge-count.json	Adds new badge-count padding tokens.
packages/tokens/src/products/shared/icon-tile.json	Adds new icon-tile surface/border color tokens.
packages/tokens/dist/products/css/tokens.css	Regenerated CSS variables including the new tokens.
packages/tokens/dist/docs/products/tokens.json	Regenerated docs JSON including the new tokens.
packages/tokens/dist/cloud-email/tokens.scss	Regenerated Sass variables including the new global CSS token.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[dchyun]

Look all good to me just a couple minor things