[Project Solar / Phase 1 / Components] AppHeader carbonization

[dchyun]

Important

This PR contains a squash of #3814. Do not merge until that PR is merged

📌 Summary

This PR carbonizes the AppHeader component and adds component tokens for it to the tokens library.

Additionally it removes the hds-interactive-dark-theme mixin, which was only used in the AppHeader.

AppHeader carbonization page

Note: This PR contains a squash of the Dropdown carbonization in #3814 since the AppHeader uses the Dropdown. Do not merge until that PR is merged, or the squash is removed.

🛠️ Detailed description

Summary of changes:

• Aligned typography, colors, paddings, other foundational styles
• Removed the hds-interactive-dark-theme mixin

hds-interactive-dark-theme removal

Currently the AppHeader utilizes the hds-interactive-dark-theme mixin for its interactive elements. It is the only component that utilizes this mixing currently.

I have decided to remove this mixin, and implement all styles within the AppHeader for the following purposes:

• It is only utilized within the AppHeader currently
• Theming the AppHeader would be difficult as the mixin is only for "dark" components on light (HDS, cds-0, cds-10) themes, but the Carbonized AppHeader needs to be a "light" component on a light theme. There would be two main options
  • Remove reliance on the mixin and have all styles live within the AppHeader, then create tokens for those styles
  • Create an alternative hds-interactive-light-theme mixin and switch between using that mixin and the dark-interavctive based on hds-apply-only-if-carbon

🔗 External links

Jira ticket: HDS-6073
Figma file: [if it applies]

---

👀 Component checklist

• Percy was checked for any visual regression

💬 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	May 7, 2026 3:44pm
hds-website	Ready	Preview	May 7, 2026 3:44pm

[jorytindall]

I did a quick run through of this and caught a couple of things right off the bat, but I think we're going to need to make some decisions about the spacing and visual language of some of the interactive elements. I've left some comments for us to discuss in the planning doc.

[jorytindall]

For some reason I'm not seeing the interactive states for the home-link (not sure where else to comment this)

[dchyun]

The Carbon component doesn't have an interactive state for the home link, so I removed it from the HDS home link as well.

[jorytindall]

Sorry @dchyun I thought I had submitted this review, but there's one cleanup item regarding text color, then I think this will be good to go

[KristinLBradley]

I left a few comments/questions and minor suggestions.