[Project Solar / Phase 1 / Components] DialogPrimitive/Modal/Flyout carbonization

[didoo]

📌 Summary

This PR intends to finalize the "carbonization" of the DialogPrimitive, Modal, and Flyout components.

🛠️ Detailed description

In this PR I have:

• added showcase pages for utilities/dialog-primitive and components/flyout
  • components/modal was done during the dry-run phase
• added a few design tokens for dialog-primitive
• made a few tweaks to the DialogPrimitive, Modal and Flyout components
• added fix for the DismissButton position when carbonized (following [Project Solar / Phase 1 / Components] DismissButton carbonization #3665)
• removed unnecessary box-shadow overrides (now it’s handled at tokens level, following [Project solar / Phase 1 / Foundations] Elevation #3693)
• updated the tokens for DialogPrimitive to align with most recent Figma variables for the component
• updated showcase for carbonized Flyout by using equivalent web component (SidePanel from IBM 4 Products)
• re-generated files in output

👀 Previews:

• DialogPrimitive: https://hds-showcase-git-project-solar-phase-1hds-6126-e02631-hashicorp.vercel.app/carbonization/utilities/dialog-primitive
• Modal: https://hds-showcase-git-project-solar-phase-1hds-6126-e02631-hashicorp.vercel.app/carbonization/components/modal
• Flyout: https://hds-showcase-git-project-solar-phase-1hds-6126-e02631-hashicorp.vercel.app/carbonization/components/flyout

🤔 Open questions

See shared document: https://docs.google.com/document/d/1b3lGaN1sJBD5G_1vPkpBubznLR1WacHKK9kzlULTO4c/edit?tab=t.94hepqj7ajq6#heading=h.lryrk1b5x8rt

🔗 External links

Jira tickets:

• https://hashicorp.atlassian.net/browse/HDS-6126
• https://hashicorp.atlassian.net/browse/HDS-6098
• https://hashicorp.atlassian.net/browse/HDS-6085

Figma file: https://www.figma.com/design/GWMDKHuGr98DFxSptH6vgj/-LJ--Token-Migration

---

👀 Component checklist

• Percy was checked for any visual regression
  • Note: the subtle differences in the DialogPrimitive and Modal screenshots are due to the fact that we added a 1px transparent border to the dialog primitive, which slightly shifts the layout of the element; this is not an issue in production code, since the component in horizontally/vertically centered in the screen

💬 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 6:48pm
hds-website	Ready	Preview	Mar 18, 2026 6:48pm

[dchyun]

@didoo I've carbonized the DismissButton which is used inside components here. If you would like to cherry pick those changes you can get them from #3665

[didoo]

@didoo I've carbonized the DismissButton which is used inside components here. If you would like to cherry pick those changes you can get them from #3665

@dchyun probably I could rebase this branch on yours, or viceversa, so we can see the overall effect of both carbonizations (it's used also in the Alert, and hence the Toast, components(

[didoo]

@dchyun update: I've rebased this PR on #3665

[KristinLBradley]

The Dialog Primitive border-color is transparent in the default theme. Is this as expected?

Dialog Primitive Carbonization

Dialog Primitive Showcase

[didoo]

The Dialog Primitive border-color is transparent in the default theme. Is this as expected?

@KristinLBradley yes, because in the default/"classic" HDS the border is applied via the elevation/box-shadow, but in the "carbonized" versions the shadow is completely removed ("none") so we had to introduce a border around the dialog element (transparent in one case, with color in the other)

[KristinLBradley]

Looks good overall. I just had a couple minor feedback comments I added.