[06] [Project Solar / Phase 1 / Dry-run] Migration dry-run for foundations and components

[didoo]

📌 Summary

This PR contains the code changes for the actual dry-run of the HDS migration/carbonization.

This PR is based on top of #3241

🛠️ Detailed description

In this PR I have added new tokens (where needed) and$modes definitions in src JSON tokens for:

• typography
• color/semantic and core/palette
• badge/badge-count
• button
• modal
• file/text-input
• file/radio-card

Then I have updated the CSS styling to use the newly created component-level tokens.

Finally, I have

• re-generated the "themed" tokens in output
• update the temporary CSS files (components + themed tokens) in showcase public folder

🛠️ How to test

Note

This is a dry-run, not a final implementation, so the goal was to learn and discover, not perfection or production-ready code; the proper "final" design tokens and styles will be implemented during the proper "migration" (next phase).

Open the different "carbonized" pages and see how the HDS components are rendered, and how the Carbon Web components are rendered, and what are the differences (some are very similar, others are quite different).

Note: the implementation of focus rings for the component will be done in separate work stream.

If you want, you can also test the adoption in the consumers' application (see PRs below).

🔗 External links

Jira tickets:

• main epic: https://hashicorp.atlassian.net/browse/HDS-5195
• dry-run for typography: https://hashicorp.atlassian.net/browse/HDS-5222
• dry-run for colors: https://hashicorp.atlassian.net/browse/HDS-5224
• dry-run for Bage/BadgeCount: https://hashicorp.atlassian.net/browse/HDS-5664
• dry-run for Button: https://hashicorp.atlassian.net/browse/HDS-5665
• dry-run for Modal: https://hashicorp.atlassian.net/browse/HDS-5685
• dry-run for Form/RadioCard: https://hashicorp.atlassian.net/browse/HDS-5684

Consumer testing PRs:

• https://github.com/hashicorp/cloud-ui/pull/13268
• https://github.com/hashicorp/atlas/pull/25501
• https://github.com/hashicorp/vault-enterprise/pull/10733
• 🧪 [WIP] [HDS / Project Solar] Test theming and carbonization #13268 boundary-ui#3057

---

👀 Component checklist

• Percy was checked for any visual regression
• A changelog entry was added via Changesets if needed (see templates here)
  • changelogs will be added in the main feature branch

💬 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	Preview	Updated (UTC)
hds-showcase	Ready	Preview	Dec 2, 2025 7:46pm
hds-website	Ready	Preview	Dec 2, 2025 7:46pm

[Copilot]

Pull request overview

This PR implements a migration dry-run for the HDS "carbonization" project, adding component-level design tokens with mode definitions to support both default HDS styling and Carbon Design System themes (cds-g0, cds-g10, cds-g90, cds-g100). The work focuses on foundations (typography, colors) and select components (Badge, BadgeCount, Button, Modal, Form inputs) to validate the migration approach before full implementation.

Key changes:

• Introduced $modes definitions in token JSON files to support theme variations
• Created component-specific token files for Button, Badge, and BadgeCount
• Updated SCSS styles to reference new component-level tokens instead of hardcoded values or generic tokens
• Added postbuild scripts to copy generated CSS to showcase public assets

Reviewed changes

Copilot reviewed 23 out of 58 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
packages/tokens/src/products/shared/typography.json	Restructured font stack definitions with "combined" properties and added $modes for Carbon theme support
packages/tokens/src/products/shared/button.json	New comprehensive button token definitions covering height, padding, typography, colors, borders, and icons with theme modes
packages/tokens/src/products/shared/badge.json	New badge token definitions for sizing, typography, colors, surfaces, borders, and icons with theme modes
packages/tokens/src/products/shared/badge-count.json	New badge-count specific horizontal padding tokens with theme modes
packages/tokens/src/products/shared/form/radiocard.json	Added border radius and color tokens with theme modes
packages/tokens/src/global/color/semantic-*.json	Added $modes to semantic color tokens for Carbon theme mapping
packages/tokens/src/global/color/palette-*.json	Added $modes to palette color tokens for Carbon theme mapping
packages/tokens/src/global/border/radius.json	Added $modes to border radius tokens (0 for all Carbon themes)
packages/tokens/package.json	Added postbuild script to copy themed token CSS to showcase assets
packages/components/src/styles/mixins/_button.scss	Replaced hardcoded values and Sass variables with component-level design tokens
packages/components/src/styles/mixins/_interactive-dark-theme.scss	Updated border-radius to use button token instead of Sass variable
packages/components/src/styles/components/button.scss	Added Carbon-specific styling with justify-content adjustment
packages/components/src/styles/components/badge.scss	Refactored to use badge tokens, simplified color/type combinations with loops
packages/components/src/styles/components/badge-count.scss	Refactored to use badge tokens, simplified with loops
packages/components/src/styles/components/form/*.scss	Updated button-related properties to use button tokens
packages/components/src/styles/components/dropdown.scss	Replaced button Sass variables with button tokens
packages/components/package.json	Added postbuild script to copy component CSS to showcase assets

[KristinLBradley]

Are the Percy visual diffs all as expected? The preview for the AdvancedTable looks like something broke when it was generating for some reason.

[didoo]

Are the Percy visual diffs all as expected? The preview for the AdvancedTable looks like something broke when it was generating for some reason.

@KristinLBradley I don't know why it's happening, I also tried to re-run all the tests but they fail again. It seems strange, since nothing has changed in terms of Table/Advanced table. Maybe something related to Percy itself? (those pages are huge to screenshot)