[WIP-05] [Project Solar / Phase 1 / Showcase] Scaffolding of the showcase pages for the carbonization of the HDS components

[didoo]

📌 Summary

This PR is the initial scaffolding of the showcase pages that will be used for the dry-run migrations (and subsequent actual migration) of the HDS components (as in theming/re-skinning).

This PR is based on top of #3240.

🛠️ Detailed description

In this PR I have:

• introduced a new <ShwCarbonizationComparisonGrid> component, used to showcase an HDS component with different themes applied (HDS standard + the four Carbon themes g0/g10/g90/g100) next to the equivalent Carbon web components for that specific variant/state.
• added a set of "carbonized" showcase pages, dedicated to showing all the (meaningful) variants/states of a foundation or component, and compare them with the expected look&feel of the original equivalent Carbon component
  • Note: in this early phase, they are intentionally left as single file, even if they're quite long; later when we have a better idea of what we want to do and we start to see emerging patterns, we can decide what should be the final implementation for these pages
• updated the showcase/app/index.html file to include the scripts (and the hiding styles for the not-yet-loaded web components)

🔎 How to review

Note

This is not the final implementation, there will be likely things we will want to change/update, once we start to work on the dry-run migrations; these changes will likely be done in follow-up PRs.

Check the different carbonized pages and how they've been implemented (also their organization as single file .gts components):

• Foundations > Color
• Foundations > Typography
• Foundations > Focus Ring
• Components > Badge
• Components > Badge Count
• Components > Button
• Components > Form / TextInput
• Components > SegmentedGroup

Review the implementation of the <ShwCarbonizationComparisonGrid> component, and see if the API is clear to you; look also at how it's used across the "carbonized" showcase pages

Review how the Carbon Web components are instantiated in the code, and how Carbon theming is applied to them

Note: at the moment there's an open conversation about how to use the cds-icon web component in an Ember app, that has not been resolved yet, so we're using the HdsIcon component instead

👉 👉 👉 Previews:

• Index
• Carbonization > Color
• Carbonization > Typography
• Carbonization > Focus-ring
• Carbonization > Badge
• Carbonization > BadgeCount
• Carbonization > Button
• Carbonization > Form::TextInput
• Carbonization > SegmentedGroup

🛠️ How to test

Note

At the moment the HDS component look the same for the different themes, because the underlying design tokens are all the same; once we start the dry-run migrations (in a follow-up PR) they will start to (should) look more and more like the equivalent Carbon web components shown below

Open the different "carbonized" pages and see how the HDS components are rendered, and how the Carbon Web components are rendered

🗒️ TODOs

• ask help to the Carbon team to
  • understand what to do with the icons (how to use directly the Carbon icons)
  • understand how to consume the Carbon Web Components, without having to manually include the compiled files in the showcase/app/index.html file, but importing and instantiating them using the npm packages/dependencies.
• understand how to load automatically the correct CSS ("CSS Selectors" or "Combined strategies") and potentially disable the selection of non-working CSS files (or even completely hide the theme switcher) - see @dchyun comment
  • partial solution (to be completed): [WIP-05] [Project Solar / Phase 1 / Showcase] Scaffolding of the showcase pages for the carbonization of the HDS components #3241 (comment)

🔗 External links

Main Jira task:

• https://hashicorp.atlassian.net/browse/HDS-5533

Related Jira tasks

• https://hashicorp.atlassian.net/browse/HDS-5249
• https://hashicorp.atlassian.net/browse/HDS-5276
• https://hashicorp.atlassian.net/browse/HDS-5258

---

👀 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	Oct 29, 2025 2:28pm
hds-website	Ready	Preview	Oct 29, 2025 2:28pm

[KristinLBradley]

At first glance, the cds-tag name seemed like a generic element/component name to me (like an HTML "tag") but I see that they are calling they call their "badge" a "tag"... :P

[KristinLBradley]

The <ShwCarbonizationComparisonGrid> APIs and implementation here seem pretty clear. Also looking at how they are used within the Carbonized Showcase pages seems quite straightforward.