[WIP] [Project Solar / Phase 1 / Themed CSS for HDS components] Rollup configuration and Sass processing for multiple files

[didoo]

📌 Summary

This is built on top of #3239 and is based on the initial spike done by @alex-ju in #3235

🛠️ Detailed description

In this PR I have:

• re-organized the components' Sass files architecture to split the common part in a separate file, and add two new Sass files that include theming via CSS selectors or via prefers-color-scheme
• update the Rollup configuration to process multiple Sass files and generate distinct CSS files in output:
  • design-system-components.css - current file for HDS components
  • design-system-components-theming-with-css-selectors.css - new file for theming via CSS selectors
  • design-system-components-theming-with-prefers-color-scheme.css - new file for theming via prefers-color-scheme

Then, after discussion and agreement with @alex-ju, I have moved also the existing compilation of the design-system-components.scss and design-system-power-select-overrides.scss files to our custom plugin, so we can remove rollup-plugin-scss as dev-dependency

• in the new configuration, the design-system-power-select-overrides.scss is not only copied in the dist folder, but also compiled to .css (and a .map file is generated)

⚠️ TODO

• create a Jira ticket for the future, to look at the code of rollup-plugin-scss and see if there is something else that we want to port from their implementation into our custom plugin logic

🔗 External links

Jira ticket: https://hashicorp.atlassian.net/browse/HDS-5505

---

👀 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	Preview	Updated (UTC)
hds-showcase	Error		Oct 2, 2025 11:44am
hds-website	Error		Oct 2, 2025 11:44am

[Copilot]

Pull Request Overview

This PR reorganizes the Sass architecture for the Helios Design System components to support theming capabilities. It creates a foundation for generating multiple CSS builds with different theming strategies while maintaining the existing component functionality.

Key changes:

• Reorganizes Sass files to separate common components from theming-specific configurations
• Updates Rollup configuration to support multiple CSS output files with custom SCSS compilation
• Creates new themed CSS variants using CSS selectors and prefers-color-scheme approaches

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/components/src/styles/components/index.scss	New centralized index file importing all component SCSS files
packages/components/src/styles/@hashicorp/design-system-components.scss	Refactored to use new components index and updated token paths
packages/components/src/styles/@hashicorp/design-system-components-theming-with-prefers-color-scheme.scss	New themed variant using prefers-color-scheme media queries
packages/components/src/styles/@hashicorp/design-system-components-theming-with-css-selectors.scss	New themed variant using CSS selectors
packages/components/rollup.config.mjs	Updated with custom SCSS compilation function and multiple output configurations