[TEST][Project Solar / Phase 1 / Components] Carbonization instructions#3671
Draft
dchyun wants to merge 14 commits into
Draft
Conversation
…anch (at 10 Feb 2026) TODO - added temporary file to main feature branch for phase 1 added temporary changeset to feature branch for `$modes` support TEMP - added `$modes` entry to `color.palette.neutral-0` refactored logic used to provide SD configuration per target progress on logic for handling `$modes` - 1 TEMP - added `modes-testing` tokens TEMP - added `expected-CSS-output` files progress on logic for handling `$modes` - 2 added `attributes/themeable` transformation progress on logic for handling `$modes` - 3 progress on logic for handling `$modes` - 4 TEMP generated temporary dist files for testing sq TEMP - added examples of generated themed tokens added logic to generate theming CSS files REVERT - Removed `modes-testing` tokens removed `modes-testing` folder from compilation added `carbon-extracted` reference in the `source` definitions TEMP - added `$modes` entries for some color and typography tokens, with references to Carbon tokens, for testing changed `outputReferences` to `false` (temporary) to bypass issue with missing references when using Carbon tokens with theming logic added commented code to `build` to use for debugging issue with missing references and filtering when theming is applied added two new themed tokens generated files, for Scss mixins and for combined strategies fixed issue with `cds` naming missing the `g` fixed some issues with how the “extra” themed CSS files were generated TEMP - Re-generated tokens REVERT - added examples of generated themed tokens This reverts commit 194b9fb. REVERT - added `expected-CSS-output` files This reverts commit 7462def. fixed wrong check for existence of key in object (`0` values would trigger an error, but they’re valid) added `.hds-theme-light/dark` and `[data-hds-theme=“light/dark”]` to generated CSS selectors (later we may decide to remove them, but for the moment we need them for the showcase theming page to work in its current implementation) re-generated themed tokens updated generation of tokens’ CSS helpers to use CSS variables for `font-weight` helpers re-generated CSS helper files updated generation of extra CSS files to include `.hds-theme-hds/[data-hds-theme="hds"]` selectors for default (non-themed) HDS styling (later we will understand if we want to rename the `hds` theme to `default` to avoid this strange class name `hds-theme-hds`) updated design tokens pipeline to generate a `themed-tokens.json` file for documentation, including all the tokens for all the themes (it will be used in the showcase, and potentially the website) re-generated themed tokens updated “src” files to replace `hds` key with `default` in `$modes` definitions updated logic to replace `hds` key with `default` in `$modes` definitions re-generated tokens in `dist` folder tweaked logic for CSS selectors for `@media (prefers-color-scheme)` to use explicit selectors `.hds-theme-system`/`[data-hds-theme="system”]` to avoid specificity issues `:root:not([class*="hds-theme-"]):not([data-hds-theme])` has specificity 030 so when used inside `@media (prefers-color-scheme: light|dark)` it becomes the default compares to other selectors re-generated tokens in `dist` folder updated generation of extra theming CSS files to avoid CSS variables “staleness” updated generation of extra theming CSS files to differentiate between `theme` and `mode` CSS selectors re-generated tokens in `dist` folder removed `[data-hds-theme]` CSS selectors for simplicity asked feedback in Slack (https://ibm-hashicorp.slack.com/archives/C09KZL43EKU/p1762987902565479) and then discussed with Dylan/Kristin; we agreed they’re not really necessary/needed re-generated tokens in `dist` folder updated logic for generation of extra “themed” CSS files (removed `prefers-color-scheme`-only case, generalized `css-selectors`) re-generated tokens in `dist` folder small tweakings before code review renamed `generateExtra***` to `generate***` updated comment updated SCSS files organization for components (split common part) updated `includePaths` for design tokens in Showcase and Website `ember-cli-build.js` removed `rollup-plugin-scss` dev dependency (we use our own custom plugin for every Scss compilation) updated the `prePublish` script in `package.json` of `components` to validate that all the new CSS files are generated too simplified architecture of CSS compilation for HDS components (as agreed) fixed `prepublisOnly` script that was causing error in build (looking for old CSS files that don’t exist anymore) updated `cssFilePath` in blueprints to reflect new Scss file organization, per code review suggestion #3259 (comment) Apply suggestions from code review Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Update packages/components/src/styles/@hashicorp/design-system-components.scss Co-authored-by: Kristin Bradley <kristin.bradley@hashicorp.com> added `Hds::ThemeSwitcher` component added `Hds::Theming` service added theming to the Showcase itself (and replaced hardcoded values with `—shw` CSS variables) added `Shw::ThemeSwitcher` component for showcase updated `Mock::App` and added new yielded sub-components added `Shw:: ThemeSwitcher` to the Showcase page header added `foundations/theming` showcase page (and a frameless demo) refactored `hds-theming` service to align with the new themes/modes and be open to configurations added `hdsTheming` initialization to main showcase app removed compilation of components Scss and replaced it with static inclusion of pre-compiled (standard and themed) CSS The pre-compiled CSS files have been manually copied in the `public/assets` folder, while waiting to understand what is the best way to proceed to have them added at build time from the `@hashicorp/design-system-components` package added theming options via popover - part 1 added theming options via popover - part 2 added theming options via popover - part 3 added theming options via popover - part 4 added theming options via popover - part 5 big code refactoring for the theme selector, to streamline user selection and expand use cases we can cover updated logic that sets the theming for the showcase itself (without relying on HDS selectors) small fixes here and there for cleanup and linting fixed issue with `pnpm lint:format` (missing newline at the end of `package.json` solution: run `pnpm prettier . --cache --write` locally and then commit fixed accessibility issue in `advanced-table` page, due to changes to “themed” `—shw` colors fixed typescript error due to new mock page being added added fix for tests failing see #3298 started large refactoring/rewrite of the theming switcher and page in the showcase updated logic by creating a `shwTheming` service that extends `hdsTheming` moved theming logic from `ShwThemeSwitcher` component/subcomponents to `hdsTheming` service updated reference CSS files to follow new theming approach/logic further refactoring/rewriting of theming logic updated approach to `light/dark` styles in showcase by using the HDS CSS selectors migrated back the `Contextual` demo content to the index page added a `DebuggingPanel` to the `ShwThemeSwitcher` controls refactored/improved `DebuggingPanel` and added new preferences to advanced options small cleanups and refactorings fixed small issue with `ShwThemeSwitcher` selector removed some outdated comments small refactorings added local storage support for theming options big refactoring of the `hdsTheming` service to simplify logic and reduce redundant methods invocations cleanup of debugging comments and other stuff refactor and cleanup in preparation for PR review refactored code to fix logic flow for theming initialization fixed how the theming options were saved in local storage Apply suggestions from Copilot's code review Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> fixed issue with `setTheme` not being passed `options` by the `ShwThemeSwitcher` fix issue with the popover of the ShwThemeSwitcher component, where the states were potentially out of sync Update showcase/app/services/shw-theming.ts Co-authored-by: Kristin Bradley <kristin.bradley@hashicorp.com> small tweak to the typing of `HdsModes` per code review suggestion updated how the CSS files (tokens and components, with/without theming) are consumed by the showcase application updated logic for styleshet switching using the `disabled` attribute removed unused import removed `isInitialized` logic from the `hdeTheming` service to avoid bug Assertion Failed: You attempted to update _isInitialized on <HdsThemingService:ember77>, but it had already been used previously in the same computation. Attempting to update a value after using it in a computation can cause logical errors, infinite revalidation bugs, and performance issues, and is not supported. _isInitialized was first used: While rendering: {{outlet}} for -top-level -top-level {{outlet}} for application Application sq TEMP - added temporary `hds-theme-light/dark` selectors while we understand how to do nesting of theming TEMP - Added back custom token values for testing purpose fixed small issue with the `HdsThemeSwitcher` components used in the `Theming` showcase page context: #3240 (comment) added small comment updated `hdsTheming` service to support `default` theme / mode added support for `default` option to HDS ThemeSwitcher component Updated “foundations/theming” showcase page to include variants of HDS ThemeSwitcher with `default` option updated Showcase ThemeSwitcher to use ``default` as theme option updated logic for how CSS selectors are applied to the `html:root` element + scrappy implementation of `isComplex` (to be completed later) updated CSS selectors for local `public/assets` themed tokens CSS files to be in sync with the ones generated by the tokens pipeline added fake theming for display/text typography to `public/assets` themed tokens CSS files (for debugging purpose) updated “foundations/theming” showcase page to include `default` and `system` themes + improved contextual theming using custom typographic theming implemented `ThemeContex` component added demos of `ThemeContext` component to showcase “foundations/theming” page improved type definitions for ThemeContext and showcase “foundations/theming” page sq refactored how CSS selectors are applied to enable mode-specific overrides updated CSS selectors for local `public/assets` themed tokens CSS files to be in sync with the ones generated by the tokens pipeline updated `ThemeContext` to use a more generic `context` argument updated showcase “theming” page to use the new `@context` argument for the `ThemeContext` component finally defined proper typing for `ThemeContext` component refactored showcase code to remove handling of `[data-hds-theme]` CSS selectors for theming updated CSS selectors for local `public/assets` themed tokens CSS files to use updated selectors and file names refactored theme switching in showcase to use new CSS files updated theme switcher in showcase to allow toggling of the “advanced options” introduced a “carbonization” mixin for applying styles only for certain conditions/modes this is the first implementation, it may see further refinements later it will be used to differentiate styles for the Button component added subtle shadow to `ThemingBasicContainer` fixed small bug that would cause the showcase pages to crash if the value stored in local storage for the `shw-theming-current-stylesheet` value was not found small fix to the control logic for the `HdsThemeSwitcher` demo in showcase page fixed TypeScript issue fix small bug in the logic when the “apply” with “show advanced options” is `false` added `ShwBodyLinkToRoute` component replaced custom link in AdvancedTable showcase page with newly created `ShwBodyLinkToRoute` component reworked the demo frameless for application with theme switcher to avoid collisions between the main page and the frame replaced custom theme switcher with proper `HdsThemeSwitcher` in `AppFooter` demo some cleanup before code review changed how theming is applied to the showcase itself, to limit `prefers-color-scheme` application only to the explict `system` theme selection fixed wrong CSS selector, per code review suggestion prefixed `OnSetThemeCallback` with `Hds` per review suggestion Update packages/components/src/template-registry.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> converted `updatePageStylesheets` function to a private method per Copilot suggestion: #3240 (comment) small cleanup per code reviews suggestions small fixes per code review updated logic that reads the stored theming data for the `HdsThemingService` to make it more robust removed comment updated CSS selectors for local `public/assets` themed tokens CSS files to use updated selectors and file names basic implementation of `<ShwCarbonizationComparisonGrid>` refactored implementation of `<ShwCarbonizationComparisonGrid>` implemented “Carbonization” section for `Badge` page implemented “Carbonization” section for `BadgeCount` page implemented “Carbonization” section for `Button` page implemented “Carbonization” section for `Focus Ring` page implemented “Carbonization” section for `Typography` page implemented “Carbonization” section for (new) `Color` page added `@carbon/web-components` as devDependency to Showcase app added `@carbon/[themes|layout|grid|type]` + `@ibm/plex` as devDependencies to Showcase app refactored `ComparisonGrid` component to add themed background color to the cells/areas added temporary support for IBM Plex font-family refactored code to support theming for reference web components, based on Carbon implementation/specifications small refactoring small refactorings refactored content organization to have the carbonization pages as standalone pages added carbon web components for comparison on `BadgeCount` page added carbon web components for comparison on `Button` page more small fixes for cleanup and linting implemented “Carbonization” section for `Form::TextInput` page implemented “Carbonization” section for `SegmentedGroup` page removed link to “Foundations > Color” page Small update to an `rgba` color Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> moved theming class in ComparisonGrid from item to item content per code review suggestion improved how to apply themed foreground/background colors to content in the comparison grid installed `@carbon/styles` as devDependency to import CSS variables for Carbon theming fixed issue with text color in typography page reorganized carbonized pages so they all live under the `carbonized` folder/route will be used later to detect if we need to do something around theme switcher and CSS to load prepared the ground for controlling the ShwThemeSwitcher on carbonized pages fixed CSS for carbonization pages updated carbonized typography page to show equivalent/mapped Carbon typographic style updated `ShwComparisonGrid` to expose an alternative side-by-side layout updated some components to take into account the new `hideCarbonLabels` argument fixed typescript/glint issue updated a couple of typographic mappings added yielding of `theme` value in the named blocks of the `ComparisonGrid` introduced `ShwCarbonizationStylePreviewTypography` to facilitate comparison of typographic styles refactored `carbonization/foundations/color` page and `ShwCarbonizationTokenPreviewColor` to show actual color values in preview item updated comparison grid to use `default` for original HDS theming instead of `hds` small tweak to the `badge` carbonization page added logic to the application to lock theme switching when loading a “carbonized” page (and restore its previous state when returning to non-carbonized pages) replaced `theme` with `mode` in `ComparisonGrid` fixed issue with the “default” block of the carbonization grid was not rendered as “classic” HDS fixed issue in the carbonization page for colors some cleanup before code review Update showcase/app/components/shw/carbonization/token-preview/color.gts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> updated showcase page for Button carbonization implemented “Carbonization” page for `Modal` component added examples of components with focus state to the carbonization page for focus ring tweaks per code review suggestions implemented “Carbonization” page for `Form/RadioCard` component better visual grouping of carbonization pages links in homepage renamed the `page-carbonization` components files and declarations to add `Index` (for consistency, per review comment) added `disabled` state to `cds-radio-tile` avoid duplicate `name` attributes for different radio groups add missing `{{on "change" this.onChange}}` handled to the `RadioCard` elements when in a group updated logic that converts the Carbon duration value to the DTCG format to use always seconds updated logic that converts the Carbon `cubic-bezier` value to the expected DTCG format see: https://www.designtokens.org/tr/drafts/format/#cubic-bezier re-extracted carbon tokens turned on option to convert `font-size` from `rem` to `px` for extracted Carbon tokens re-extracted carbon tokens [06] [Project Solar / Phase 1 / Dry-run] Migration dry-run for foundations and components (#3332) [Project Solar / Phase 1 / Engineering Follow-ups] Add `localStorage` parsing validation (#3401) added `chalk` as devDependency updated `build.ts` script for design tokens, to have validation of expected `$modes` format improved logging messages for validation warnings/errors of `$modes` [Project Solar / Phase 1 / Engineering Follow-ups] Add tests for HDS theming service and components (#3428) Co-authored-by: Dylan Hyun <dylan.hyun@hashicorp.com> Co-authored-by: Kristin Bradley <kristin.bradley@hashicorp.com> re-generated CSS files in output after rebasing on `main` (new styles have been added to the common styles for HDS components) [HDS-5702] - Remove postbuild in favor of rollup copy (#3441) fixed TS issue fixed some linting warnings for `package.json` files post rebase (and conflicts fixing) enabled logging for StyleDictionary abstracted `getSourceFromFileWithRootSelector` implemented custom “CSS variables” format for theme tokens, with logic to handle aliasing (outputReferences) and files splitting (“common” vs “themed”) abstracted `DocsJson` custom format to its own file removed `attributes/themeable` custom transform (not needed anymore) added validation for generated themed tokens (as SD custom action) small tweakings, cleanups and fixes TEMP - Add `test` tokens (to be removed in a follow-up revert commit) Revert "TEMP - Add `test` tokens (to be removed in a follow-up revert commit)" This reverts commit 455d9ec. [Project Solar / Phase 1 / Engineering Follow-ups] Converted tests for `HdsThemeSwitcher` and `HdsThemeContext` to `.gts` format (#3447) Refactor `dist` CSS file checks into script (#3462) re-generated all the dist and public files after rebasing on `main` small cleanup of initial commits used to open the PR [07a] [Project Solar / Phase 1] Include IBM Plex fonts as part of the `@hashicorp/design-system-components` package (#3387) removed service which was not used [Project Solar / Phase 1 / Engineering Follow-ups] Remove local storage implementation from `HdsTheming` service and move it to the Showcase consuming app (#3540) Co-authored-by: Kristin Bradley <kristin.bradley@hashicorp.com> [Project Solar / Phase 1 / Engineering Follow-ups] Remove `globalOnSetTheme` callback from `HdsTheming` service (#3539) Use esm for `dist` file check (#3551) fixes that were missed after rebase on `main` (and conflict resolution) re-built tokens after rebase on `main` (all the `Hds::SideNav` tokens have been removed) fixed yielded component name [Project Solar / Phase 1 / Engineering Follow-ups] Update tokens pipeline to support structured values for the `$modes` entries (#3575)
…carbonization mixin (#3630)
…re/Semantic Colors + Typography + Borders (#3572)
…ation (#3584) Co-authored-by: Cristiano Rastelli <cristiano.rastelli@hashicorp.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
dchyun
force-pushed
the
project-solar/phase-1/dchyun/bob-carbonization-script
branch
from
March 3, 2026 17:19
bd4b494 to
72155ec
Compare
dchyun
commented
Mar 3, 2026
Contributor
Author
There was a problem hiding this comment.
[Note] The component token creation is the most experimental and prone to inaccuracies. Generated tokens may not follow exactly our intended formatting or leverage proper semantic level tokens. The automated token generation can be viewed as a starting point for further manual work.
dchyun
force-pushed
the
project-solar/phase-1/dchyun/bob-carbonization-script
branch
from
March 3, 2026 19:41
72155ec to
79e6ff8
Compare
dchyun
commented
Mar 3, 2026
| ### Helios Design System | ||
| - Helios Design System (HDS) documentation: https://helios.hashicorp.design/ | ||
|
|
||
| ### Carbon Design System |
Contributor
Author
There was a problem hiding this comment.
[Note] This section is taken from the Carbon MCP prompt starter template
didoo
force-pushed
the
project-solar/phase-1-main-feature-branch
branch
3 times, most recently
from
March 18, 2026 10:51
bd6bcdf to
395ea90
Compare
didoo
force-pushed
the
project-solar/phase-1-main-feature-branch
branch
from
March 18, 2026 18:34
395ea90 to
6d0c7de
Compare
didoo
force-pushed
the
project-solar/phase-1-main-feature-branch
branch
2 times, most recently
from
March 30, 2026 11:04
6842f2b to
1f38be9
Compare
didoo
force-pushed
the
project-solar/phase-1-main-feature-branch
branch
5 times, most recently
from
April 14, 2026 16:55
b347c6d to
856c57f
Compare
didoo
force-pushed
the
project-solar/phase-1-main-feature-branch
branch
from
April 27, 2026 09:59
35b276b to
5f49c8b
Compare
didoo
force-pushed
the
project-solar/phase-1-main-feature-branch
branch
from
May 14, 2026 09:44
169f93d to
0b4062d
Compare
didoo
force-pushed
the
project-solar/phase-1-main-feature-branch
branch
6 times, most recently
from
June 2, 2026 16:19
9e344d9 to
af591ff
Compare
didoo
force-pushed
the
project-solar/phase-1-main-feature-branch
branch
from
June 5, 2026 17:17
b0faa01 to
0f7c918
Compare
didoo
force-pushed
the
project-solar/phase-1-main-feature-branch
branch
from
June 15, 2026 17:42
e50e3d3 to
4a65e6e
Compare
didoo
force-pushed
the
project-solar/phase-1-main-feature-branch
branch
4 times, most recently
from
June 25, 2026 12:22
506c49a to
51ece3f
Compare
didoo
force-pushed
the
project-solar/phase-1-main-feature-branch
branch
5 times, most recently
from
July 2, 2026 15:15
08f3aca to
a9d82e7
Compare
didoo
force-pushed
the
project-solar/phase-1-main-feature-branch
branch
from
July 8, 2026 10:01
60ab613 to
09e5651
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Note
Contains testing commits that are not intended to be merged
📌 Summary
This PR is a testing effort for using a Bob script for the carbonization of HDS components. The three primary steps in carbonization are tested in each commit. Those main steps to test are:
This carbonization can be compared against the actual carbonization of the breadcrumb in #3652
Note: All code generated as part of the testing commits was generated solely by Bob.
🛠️ Detailed description
A new
/instructionsfolder has been added with acarbonization.instructions.mdfile. This file will not automatically get inputed into the AI context just from having it in this location. This is just a place to keep it so users can grab it more easily.How to test
Prerequisites (optional):
1. Pass the script in as a prompt
First, copy and past the entire
carbonization.instructions.mdfile into the prompt and submit it. The script will automatically stop after being read and wait for further instruction.2. Set up the showcase component carbonization page
A showcase page now needs to be added for the component to carbonize, and the new page needs to be added to the homepage and router.
Prompt:
3. Add comparison examples
Now comparison grid examples need to be added to the showcase page showing the differences between the HDS and Carbon component. The script will look at the component's other showcase pages to judge which example should be added. The Carbon web component will also be imported.
Prompt:
4. Add component tokens and carbonization styles
Now the goal is to add component level tokens to the tokens package that are then leveraged to align the HDS and Carbon component visually.
Note: This step is the most experimental and varied in its accuracy
Prompt:
📸 Screenshots
Actual Breadcrumb carbonization
Script Breadcrumb carbonization
Bob output examples
💬 Please consider using conventional comments when reviewing this PR.
📋 PCI review checklist
Examples of changes to controls include access controls, encryption, logging, etc.
Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.