[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 default + the four Carbon modes cds-g0/cds-g10/cds-g90/cds-g100) next to the equivalent Carbon web components for that specific variant/state.
• introduced two new Shw component for the preview of colors (<ShwCarbonizationTokenPreviewColor>) and typographic styles (<ShwCarbonizationStylePreviewTypography>)
• updated the showcase/app/index.html file to include
  • the <script> tags used to include the Carbon web components
  • the <script> tags used to import the IBM Plex font
  • the <style> tag used to hide the not-yet-loaded web components
• 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 main application logic to force a specific stylesheets combination to use when the carbonized pages are visited, and disable the theme selector accordingly; everything is reset back to its original state when leaving the carbonized page(s)

🔎 How to review

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

Note: don't focus on the actual visual style of the "carbonized" component: the proper design tokens and $modes will be implemented the #3332

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 the follow-up PR) they will start to 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

🔗 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	Nov 21, 2025 6:34pm
hds-website	Ready	Preview	Nov 21, 2025 6:34pm

[Copilot]

Pull request overview

Copilot reviewed 42 out of 43 changed files in this pull request and generated 4 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (1)

showcase/app/components/page-components/badge/sub-sections/content.gts:1

• Import order was changed but ShwFlex is still imported correctly after ShwTextH2. The original diff shows swapped import order which should not cause issues, but ensure this was an intentional reordering for consistency with project conventions.

/**