[Project Solar / Phase 1 / Components] Reveal carbonization (HDS-6100)#3706
Draft
KristinLBradley wants to merge 27 commits intoproject-solar/phase-1-main-feature-branchfrom
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>
…-6102) (#3674) Co-authored-by: Cristiano Rastelli <cristiano.rastelli@hashicorp.com>
…or semantic products colors (#3680)
…lette" product colors (#3695)
…to comparison grid and "no equivalent" block (#3682)
…he Flight icons in Figma library (note: it also added the `workspace` icon, which is new)
…6061) (#3588) Co-authored-by: Cristiano Rastelli <public@didoo.net>
…ntic token for surface (#3701)
…3622) Co-authored-by: Cristiano Rastelli <public@didoo.net>
…3641) Co-authored-by: Cristiano Rastelli <public@didoo.net>
…3665) Co-authored-by: Cristiano Rastelli <public@didoo.net>
…-6072) (#3675) Co-authored-by: Cristiano Rastelli <public@didoo.net>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
hashibot-hds
added
docs-website
KristinLBradley
changed the base branch from
main
to
project-solar/phase-1-main-feature-branch
didoo
force-pushed
the
project-solar/phase-1-main-feature-branch
branch
2 times, most recently
from
bd6bcdf to
395ea90
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
5 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.
WIP: Dependant on
Buttoncarbonization (makes use of tertiary Button under the hood)📌 Summary
If merged, this PR adds the “Carbonized”
Revealcomponent & its Showcase to HDS.👉 Preview: https://hds-showcase-git-project-solar-phase-1hds-6100-89fa3f-hashicorp.vercel.app/carbonization/components/reveal
🔗 External links
👀 Component checklist
💬 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.