[03] [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 related to HDS component in a separate file (packages/components/src/styles/components/index.scss)
• updated 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-common.css - new file for theming
    • contains just the styles for the HDS component, no CSS variables coming from the design tokens pipeline
    • requires that the CSS file with the "themed" design tokens is imported separately

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)

🔎 How to review

You can look at the single commits, to see the sequence of steps and understand the explorations and thinking behind the PR, or you can look directly at the files, checking how the Scss files have been organized, how the Rollup plugin function has been implemented, and how the path for the include declarations have been updated to make it more obvious where a file was coming from.

🛠️ How to test

Check out the branch, delete the dist folder under packages/components, run the command pnpm build or pnpm start, and see how different files are copied/generated under packages/components/dist/styles/@hashicorp (source Scss files, compiled CSS files, map files)

You can also go one step further, and update (or add) some design tokens, run the pnpm build command in the packages/tokens folder, and then run the command pnpm build in the packages/components folder and see how the tokens changes are reflected in the generated CSS files for the components:

• if only $modes are changed, the file packages/components/dist/styles/@hashicorp/design-system-components.css should remain untouched
• if the $value is changed, the file packages/components/dist/styles/@hashicorp/design-system-components.css should be updated too (the CSS variable corresponding to the token that was changed)

🔗 External links

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

---

👀 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 10:04pm
hds-website	Ready	Preview	Nov 21, 2025 10:04pm

[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

[Copilot]

Pull Request Overview

Copilot reviewed 8 out of 9 changed files in this pull request and generated 2 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

[dchyun]

Looks all good to me! Tested locally and everything went as expected.

[dchyun]

You can also go one step further, and update (or add) some design tokens with $modes values, run the pnpm build command in the packages/tokens folder, and then run the command pnpm build in the packages/components folder and see how the tokens changes are reflected in the generated CSS files for the components

[Question] Is this comment in the description outdated now with the new structure? If I'm understanding correctly the two files created from the components package are theme agnostic with the new approach. The existing design-system-components.css still only includes the default theme values. So changing the $modes in the tokens shouldn't change anything in these files.

[didoo]

Yes, absolutely. I've missed that part, I'll update the PR description

[KristinLBradley]

In packages/components/dist/styles/@hashicorp, the copyright in "design-system-components-common.css" and in "design-system-components.css" ends up below the first line of code. Probably not a big deal but it looks a little strange and causes the linter to complain about spacing.

In "design-system-power-select-overrides.css" and "design-system-power-select-overrides.scss" There's this linter complaint:

the linter also complains about spacing between style rules in "design-system-power-select-overrides.css" being absent.

[KristinLBradley]

Added a comment RE some linter complaints in generated dist files: #3259 (comment) and one suggested fix for a typo in a comment. Otherwise, looks good!

[didoo]

In packages/components/dist/styles/@hashicorp, the copyright in "design-system-components-common.css" and in "design-system-components.css" ends up below the first line of code. Probably not a big deal but it looks a little strange and causes the linter to complain about spacing.

In "design-system-power-select-overrides.css" and "design-system-power-select-overrides.scss" There's this linter complaint:

the linter also complains about spacing between style rules in "design-system-power-select-overrides.css" being absent.

@KristinLBradley these are compiled files, there's not much we can do (as you mentioned, they're generated in the dist folder of packages/components)