[01] [Project Solar / Phase 1 / Tokens Pipeline] Main feature branch for `$modes` support in tokens pipeline and component's CSS compilation #3238

didoo · 2025-09-25T20:33:52Z

📌 Summary

This is the feature branch for the work needed to add support in the design the tokens pipeline for:

definition of co-located $modes token values in the src JSON files
generation of multiple "themed" CSS files in output

It is based on top of #3237

🛠️ Detailed description

This PR includes:

[02] [Project Solar / Phase 1 / Tokens Pipeline] Add $modes support to tokens pipeline #3239
[03] [Project Solar / Phase 1 / Themed CSS for HDS components] Rollup configuration and Sass processing for multiple files #3259

🔗 External links

Jira ticket (Epic): https://hashicorp.atlassian.net/browse/HDS-5193

👀 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 · 2025-09-25T20:33:56Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
hds-showcase	Ready	Preview	Nov 25, 2025 10:23pm
hds-website	Ready	Preview	Nov 25, 2025 10:23pm

.changeset/tough-cows-rule.md

…added custom source files for theming + updated rollup config to process different files

…th output from `rollup-plugin-scss`

…les to CSS files

…er-cli-build.js`

… to new custom plugin

…ugin for every Scss compilation)

…validate that all the new CSS files are generated too

…eed)

… for old CSS files that don’t exist anymore)

…tion, per code review suggestion #3259 (comment)

Co-authored-by: Copilot <[email protected]>

…ents.scss Co-authored-by: Kristin Bradley <[email protected]>

…6_modes/modes-pipeline-implementation [02] [Project Solar / Phase 1 / Tokens Pipeline] Add `$modes` support to tokens pipeline

…5_components/modes-css-compilation [03] [Project Solar / Phase 1 / Themed CSS for HDS components] Rollup configuration and Sass processing for multiple files

didoo · 2025-11-25T22:40:46Z

merged this PR since it was just an empty container of the two "child" PRs, nothing else

vercel bot deployed to Preview – hds-website September 25, 2025 20:34 View deployment

didoo changed the title ~~[WIP] Add $modes support to tokens pipeline~~ [WIP] [Project solaris / Phase 1 / Tokens Pipeline] Add $modes support to tokens pipeline Sep 25, 2025

didoo changed the title ~~[WIP] [Project solaris / Phase 1 / Tokens Pipeline] Add $modes support to tokens pipeline~~ [WIP] [Project solaris / Phase 1 / Tokens Pipeline] Main feature branch for $modes support in tokens pipeline Sep 25, 2025

didoo mentioned this pull request Sep 25, 2025

[02] [Project Solar / Phase 1 / Tokens Pipeline] Add $modes support to tokens pipeline #3239

Merged

5 tasks

didoo changed the title ~~[WIP] [Project solaris / Phase 1 / Tokens Pipeline] Main feature branch for $modes support in tokens pipeline~~ [WIP] [Project Solar / Phase 1 / Tokens Pipeline] Main feature branch for $modes support in tokens pipeline Sep 25, 2025

didoo added the project solar label Sep 26, 2025

didoo force-pushed the project-solar/phase-1-main-feature-branch branch from 519a6a6 to 3863dfa Compare September 30, 2025 14:50

didoo force-pushed the project-solar/phase-1/HDS-5216_modes/modes-feature-branch branch from bcb7219 to fa4bad2 Compare September 30, 2025 14:50

vercel bot deployed to Preview – hds-showcase September 30, 2025 14:52 View deployment

vercel bot deployed to Preview – hds-website September 30, 2025 14:55 View deployment

didoo changed the title ~~[WIP] [Project Solar / Phase 1 / Tokens Pipeline] Main feature branch for $modes support in tokens pipeline~~ [WIP0-01] [Project Solar / Phase 1 / Tokens Pipeline] Main feature branch for $modes support in tokens pipeline Oct 9, 2025

didoo changed the title ~~[WIP0-01] [Project Solar / Phase 1 / Tokens Pipeline] Main feature branch for $modes support in tokens pipeline~~ [WIP-01] [Project Solar / Phase 1 / Tokens Pipeline] Main feature branch for $modes support in tokens pipeline Oct 9, 2025

didoo mentioned this pull request Oct 9, 2025

[WIP-00] [Project Solar / Phase 1] Main feature branch to add modes support to tokens + components + showcase #3237

Draft

10 tasks

didoo changed the title ~~[WIP-01] [Project Solar / Phase 1 / Tokens Pipeline] Main feature branch for $modes support in tokens pipeline~~ [WIP-01] [Project Solar / Phase 1 / Tokens Pipeline] Main feature branch for $modes support in tokens pipeline and component's CSS compilation Oct 10, 2025

didoo force-pushed the project-solar/phase-1-main-feature-branch branch from 3863dfa to a88accd Compare October 10, 2025 17:19

didoo force-pushed the project-solar/phase-1/HDS-5216_modes/modes-feature-branch branch from fa4bad2 to 3a4d9f2 Compare October 10, 2025 17:19

vercel bot deployed to Preview – hds-showcase October 10, 2025 17:20 View deployment

vercel bot deployed to Preview – hds-website October 10, 2025 17:23 View deployment

KristinLBradley reviewed Oct 15, 2025

View reviewed changes

.changeset/tough-cows-rule.md Show resolved Hide resolved

didoo force-pushed the project-solar/phase-1-main-feature-branch branch from a88accd to 5375e7a Compare October 24, 2025 17:30

didoo force-pushed the project-solar/phase-1/HDS-5216_modes/modes-feature-branch branch from 3a4d9f2 to d7609e3 Compare October 24, 2025 17:30

vercel bot deployed to Preview – hds-showcase October 24, 2025 17:32 View deployment

vercel bot deployed to Preview – hds-website October 24, 2025 17:35 View deployment

didoo force-pushed the project-solar/phase-1-main-feature-branch branch from 5375e7a to 6f015ce Compare October 27, 2025 20:53

didoo force-pushed the project-solar/phase-1/HDS-5216_modes/modes-feature-branch branch from d7609e3 to 41f911f Compare October 27, 2025 20:54

vercel bot deployed to Preview – hds-showcase October 27, 2025 20:55 View deployment

vercel bot deployed to Preview – hds-website October 27, 2025 20:58 View deployment

didoo force-pushed the project-solar/phase-1-main-feature-branch branch from 6f015ce to 20d4838 Compare November 5, 2025 16:34

TODO - added temporary file to main feature branch for phase 1

c7bad46

didoo and others added 18 commits November 20, 2025 09:43

renamed generateExtra*** to generate***

f8caa0f

updated comment

9e45b40

Draft a custom plugin to compile the themed SCSS

4e131af

updated SCSS files organization for components (split common part) + …

1ced1d2

…added custom source files for theming + updated rollup config to process different files

added support for source maps for generated themed CSS files

d416e7f

TEMP - Added generation of “alt” CSS for HDS components to compare wi…

2935a3d

…th output from `rollup-plugin-scss`

abstracted logic for custom Rollup plugin to compile multiple Sass fi…

423b892

…les to CSS files

updated includePaths for design tokens in Showcase and Website `emb…

aeac349

…er-cli-build.js`

moved compilation of existing Scss files for components and overrides…

fc45c2f

… to new custom plugin

removed rollup-plugin-scss dev dependency (we use our own custom pl…

394a058

…ugin for every Scss compilation)

added CSS compilation for combined-strategies tokens

909e008

updated the prePublish script in package.json of components to …

5c22feb

…validate that all the new CSS files are generated too

simplified architecture of CSS compilation for HDS components (as agr…

24c9c9b

…eed)

fixed prepublisOnly script that was causing error in build (looking…

16f51cb

… for old CSS files that don’t exist anymore)

updated cssFilePath in blueprints to reflect new Scss file organiza…

afb6e3f

…tion, per code review suggestion #3259 (comment)

Apply suggestions from code review

2fa10f4

Co-authored-by: Copilot <[email protected]>

Update packages/components/src/styles/@hashicorp/design-system-compon…

053e6de

…ents.scss Co-authored-by: Kristin Bradley <[email protected]>

Merge pull request #3239 from hashicorp/project-solar/phase-1/HDS-521…

b883034

…6_modes/modes-pipeline-implementation [02] [Project Solar / Phase 1 / Tokens Pipeline] Add `$modes` support to tokens pipeline

hashibot-hds added the packages/tokens label Nov 25, 2025

Merge pull request #3259 from hashicorp/project-solar/phase-1/HDS-550…

1864883

…5_components/modes-css-compilation [03] [Project Solar / Phase 1 / Themed CSS for HDS components] Rollup configuration and Sass processing for multiple files

hashibot-hds added packages/components showcase labels Nov 25, 2025

vercel bot deployed to Preview – hds-showcase November 25, 2025 22:18 View deployment

vercel bot deployed to Preview – hds-website November 25, 2025 22:23 View deployment

didoo marked this pull request as ready for review November 25, 2025 22:39

didoo requested a review from a team as a code owner November 25, 2025 22:39

didoo merged commit 4d46a8b into project-solar/phase-1-main-feature-branch Nov 25, 2025
18 checks passed

didoo deleted the project-solar/phase-1/HDS-5216_modes/modes-feature-branch branch November 25, 2025 22:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[01] [Project Solar / Phase 1 / Tokens Pipeline] Main feature branch for `$modes` support in tokens pipeline and component's CSS compilation #3238

[01] [Project Solar / Phase 1 / Tokens Pipeline] Main feature branch for `$modes` support in tokens pipeline and component's CSS compilation #3238

Uh oh!

didoo commented Sep 25, 2025 •

edited

Loading

Uh oh!

vercel bot commented Sep 25, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

didoo commented Nov 25, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[01] [Project Solar / Phase 1 / Tokens Pipeline] Main feature branch for $modes support in tokens pipeline and component's CSS compilation #3238

[01] [Project Solar / Phase 1 / Tokens Pipeline] Main feature branch for $modes support in tokens pipeline and component's CSS compilation #3238

Uh oh!

Conversation

didoo commented Sep 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 Summary

🛠️ Detailed description

🔗 External links

👀 Component checklist

Uh oh!

vercel bot commented Sep 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

didoo commented Nov 25, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[01] [Project Solar / Phase 1 / Tokens Pipeline] Main feature branch for `$modes` support in tokens pipeline and component's CSS compilation #3238

[01] [Project Solar / Phase 1 / Tokens Pipeline] Main feature branch for `$modes` support in tokens pipeline and component's CSS compilation #3238

didoo commented Sep 25, 2025 •

edited

Loading

vercel bot commented Sep 25, 2025 •

edited

Loading