Add support for scoped theme modes with CSS variables

[taysea]

Deploy Preview

What does this PR do?

Adjusts output of hpe-design-tokens CSS files to allow for scoped theme modes.

For example, it's sometimes desirable to scope a subsection of a page to dark mode (such as a navigation bar, or marketing section). Previously the CSS was only looking for [data-mode] on the root element, but this allows it to be placed on any element.

"light" still serves as the default mode when no data-mode attribute is present.

Where should the reviewer start?

design-tokens/src/formats/cssColorModes.ts

What testing has been done on this PR?

Local in native-web sandbox app:

In addition to the feature you are implementing, have you checked the following:

General UX Checks

• [ ] Small, medium, and large screen sizes
• [ ] Cross-browsers (FireFox, Chrome, and Safari)
• [ ] Light & dark modes
• [ ] All hyperlinks route properly

Accessibility Checks

• [ ] Keyboard interactions
• [ ] Screen reader experience
• [ ] Run WAVE accessibility plugin (Chrome)

Code Quality Checks

• [ ] Console is free of warnings and errors
• [ ] Passes E2E commit checks
• [ ] Visual snapshots are reasonable

How should this be manually tested?

Any background context you want to provide?

What are the relevant issues?

Closes #4946

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: b324730cc963eedbebe2338353dd6ab27419c6a1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
hpe-design-tokens	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify[bot]]

✅ Deploy Preview for rad-shortbread-897892 ready!

Name	Link
🔨 Latest commit	1cacc04e3c6fea97e3a2bcdbaf0f1036e1843d8b
🔍 Latest deploy log	https://app.netlify.com/sites/rad-shortbread-897892/deploys/67ec2ed5e36645000843fed6
😎 Deploy Preview	https://deploy-preview-4947--rad-shortbread-897892.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for unrivaled-bublanina-3a9bae ready!

Name	Link
🔨 Latest commit	b324730cc963eedbebe2338353dd6ab27419c6a1
🔍 Latest deploy log	https://app.netlify.com/sites/unrivaled-bublanina-3a9bae/deploys/67f8528b4569aa0008070557
😎 Deploy Preview	https://deploy-preview-4947--unrivaled-bublanina-3a9bae.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[taysea]

Converting to draft to investigate component tokens not responding when scoped dark mode. Have a solution locally that I'm cleaning up.

[netlify[bot]]

✅ Deploy Preview for hpe-theme-preview ready!

Name	Link
🔨 Latest commit	b324730cc963eedbebe2338353dd6ab27419c6a1
🔍 Latest deploy log	https://app.netlify.com/sites/hpe-theme-preview/deploys/67f8528b3ce7e700084abaca
😎 Deploy Preview	https://deploy-preview-4947--hpe-theme-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.