[SQUASHED] Mega-squash of all the previous commits on this feature branch (at 18 Mar 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

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

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

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)

[Project Solar / Phase 1 / Follow-up] Fix small issue in tokens build pipeline (#3595)

Reverted temporary commits from PR #3595

Revert "TEMP/REMOVE ME - Added `$modes` to `boundary-50` (referenced as alias by `boundary.surface` and `boundary-gradient-faint-stop`)"

This reverts commit eeb1a0a.

Revert "TEMP/REMOVE ME - re-generated tokens in output"

This reverts commit 23c9bb0.

[Project Solar / Phase 1] Align version of carbon web component imports (#3613)

[Project Solar / Phase 1 / Components] Support multiple selectors in carbonization mixin  (#3630)

[Project Solar / Phase 1 / Foundations] Finalize design tokens for Core/Semantic Colors + Typography + Borders (#3572)

[Project Solar / Phase 1 / Components] `Badge/BadgeCount` carbonization (#3592)

[Project Solar / Phase 1 / Foundations] Flight icons &`Icon` carbonization (#3584)

Co-authored-by: Cristiano Rastelli <cristiano.rastelli@hashicorp.com>

Project solar/icons commit icons (#3643)

Small updates to the icons used in the showcase page for the `Icon` component (#3644)

[Project Solar / Phase 1 / Components] `Separator` carbonization (HDS-6102) (#3674)

Co-authored-by: Cristiano Rastelli <cristiano.rastelli@hashicorp.com>

[Project Solar / Phase 1 / Foundations]  Update tokens with `$modes` for semantic products colors (#3680)

[Project Solar / Phase 1 / Icons] Fix copy button showcase status icons (#3694)

[Project Solar / Phase 1 / Components] `ApplicationState` carbonization (HDS-6075) (#3686)

[Project Solar / Phase 1 / Foundations] Remove `$modes` from "core/palette" product colors (#3695)

[Project solar / Phase 1 / Foundations] Elevation (#3693)

[Project Solar / Phase 1 / Showcase] Add support for "column" layout to comparison grid and "no equivalent" block (#3682)

linting

[Project Solar / Phase 1 / Components] `IconTile` carbonization (HDS-6061) (#3588)

Co-authored-by: Cristiano Rastelli <public@didoo.net>

[Project Solar / Phase 1 / Foundations] Add `high-contrast` core semantic token for surface (#3701)

[Project Solar / Phase 1 / Components] `TooltipButton` carbonization (#3622)

Co-authored-by: Cristiano Rastelli <public@didoo.net>

[Project Solar / Phase 1 / Components] `RichTooltip` carbonization (#3641)

Co-authored-by: Cristiano Rastelli <public@didoo.net>

[Project Solar / Phase 1 / Components] `DismissButton` carbonization (#3665)

Co-authored-by: Cristiano Rastelli <public@didoo.net>

fixed AppFooter example in “foundations/theming” showcase page

[Project Solar / Phase 1 / Components] `AppFooter` carbonization (HDS-6072) (#3675)

Co-authored-by: Cristiano Rastelli <public@didoo.net>

fixed issue with themes being applied to the “carbonization” pages

Remove prebuild script (#3715)

Co-authored-by: Cristiano Rastelli <public@didoo.net>

Author: didoo

.changeset/rotten-trains-hear.md

@@ -0,0 +1,10 @@
+---
+"@hashicorp/flight-icons": minor
+"@hashicorp/design-system-components": minor
+---
+
+<!-- START components/icon -->
+`Icon`
+- Changed the way that icons are loaded in from sprite, to dynamic importing and generation at runtime
+- Added support for loading Carbon icons when the user is using a Carbon theme
+<!-- END -->

.changeset/tough-cows-rule.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-tokens": major
+---
+
+TODO - Add proper changeset entries here

packages/components/package.json

@@ -55,6 +55,8 @@
     "@floating-ui/dom": "^1.6.12",
     "@hashicorp/design-system-tokens": "workspace:^4.0.1",
     "@hashicorp/flight-icons": "workspace:^4.2.1",
+    "@ibm/plex-mono": "^1.1.0",
+    "@ibm/plex-sans": "^1.1.0",
     "@lezer/highlight": "^1.2.1",
     "@nullvoxpopuli/ember-composable-helpers": "^5.2.11",
     "clipboard-polyfill": "^4.1.1",
@@ -357,6 +359,8 @@
       "./components/hds/text/code.js": "./dist/_app_/components/hds/text/code.js",
       "./components/hds/text/display.js": "./dist/_app_/components/hds/text/display.js",
       "./components/hds/text.js": "./dist/_app_/components/hds/text.js",
+      "./components/hds/theme-context.js": "./dist/_app_/components/hds/theme-context.js",
+      "./components/hds/theme-switcher.js": "./dist/_app_/components/hds/theme-switcher.js",
       "./components/hds/time.js": "./dist/_app_/components/hds/time.js",
       "./components/hds/time/range.js": "./dist/_app_/components/hds/time/range.js",
       "./components/hds/time/single.js": "./dist/_app_/components/hds/time/single.js",
@@ -368,6 +372,7 @@
       "./helpers/hds-link-to-models.js": "./dist/_app_/helpers/hds-link-to-models.js",
       "./helpers/hds-link-to-query.js": "./dist/_app_/helpers/hds-link-to-query.js",
       "./helpers/hds-t.js": "./dist/_app_/helpers/hds-t.js",
+      "./instance-initializers/load-sprite-empty.js": "./dist/_app_/instance-initializers/load-sprite-empty.js",
       "./instance-initializers/load-sprite.js": "./dist/_app_/instance-initializers/load-sprite.js",
       "./modifiers/hds-advanced-table-cell.js": "./dist/_app_/modifiers/hds-advanced-table-cell.js",
       "./modifiers/hds-advanced-table-cell/dom-management.js": "./dist/_app_/modifiers/hds-advanced-table-cell/dom-management.js",
@@ -384,8 +389,65 @@
       "./modifiers/hds-code-editor/types.js": "./dist/_app_/modifiers/hds-code-editor/types.js",
       "./modifiers/hds-register-event.js": "./dist/_app_/modifiers/hds-register-event.js",
       "./modifiers/hds-tooltip.js": "./dist/_app_/modifiers/hds-tooltip.js",
+      "./services/hds-icon-registry.js": "./dist/_app_/services/hds-icon-registry.js",
       "./services/hds-intl.js": "./dist/_app_/services/hds-intl.js",
+      "./services/hds-theming.js": "./dist/_app_/services/hds-theming.js",
       "./services/hds-time.js": "./dist/_app_/services/hds-time.js"
+    },
+    "public-assets": {
+      "dist/public/assets/fonts/LICENSE.txt": "assets/fonts/LICENSE.txt",
+      "dist/public/assets/fonts/complete/woff2/IBMPlexSans-Italic.woff2": "assets/fonts/complete/woff2/IBMPlexSans-Italic.woff2",
+      "dist/public/assets/fonts/complete/woff2/IBMPlexSans-Regular.woff2": "assets/fonts/complete/woff2/IBMPlexSans-Regular.woff2",
+      "dist/public/assets/fonts/complete/woff2/IBMPlexSans-SemiBold.woff2": "assets/fonts/complete/woff2/IBMPlexSans-SemiBold.woff2",
+      "dist/public/assets/fonts/complete/woff2/IBMPlexSans-SemiBoldItalic.woff2": "assets/fonts/complete/woff2/IBMPlexSans-SemiBoldItalic.woff2",
+      "dist/public/assets/fonts/complete/woff2/IBMPlexMono-Italic.woff2": "assets/fonts/complete/woff2/IBMPlexMono-Italic.woff2",
+      "dist/public/assets/fonts/complete/woff2/IBMPlexMono-Regular.woff2": "assets/fonts/complete/woff2/IBMPlexMono-Regular.woff2",
+      "dist/public/assets/fonts/complete/woff2/IBMPlexMono-SemiBold.woff2": "assets/fonts/complete/woff2/IBMPlexMono-SemiBold.woff2",
+      "dist/public/assets/fonts/complete/woff2/IBMPlexMono-SemiBoldItalic.woff2": "assets/fonts/complete/woff2/IBMPlexMono-SemiBoldItalic.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-Italic-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexMono-Italic-Cyrillic.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-Italic-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexMono-Italic-Latin1.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-Italic-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexMono-Italic-Latin2.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-Italic-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexMono-Italic-Latin3.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-Italic-Pi.woff2": "assets/fonts/split/woff2/IBMPlexMono-Italic-Pi.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-Regular-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexMono-Regular-Cyrillic.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-Regular-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexMono-Regular-Latin1.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-Regular-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexMono-Regular-Latin2.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-Regular-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexMono-Regular-Latin3.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-Regular-Pi.woff2": "assets/fonts/split/woff2/IBMPlexMono-Regular-Pi.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBold-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBold-Cyrillic.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBold-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBold-Latin1.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBold-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBold-Latin2.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBold-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBold-Latin3.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBold-Pi.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBold-Pi.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Cyrillic.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin1.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin2.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Latin3.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Pi.woff2": "assets/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-Pi.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Italic-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexSans-Italic-Cyrillic.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Italic-Greek.woff2": "assets/fonts/split/woff2/IBMPlexSans-Italic-Greek.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Italic-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexSans-Italic-Latin1.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Italic-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexSans-Italic-Latin2.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Italic-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexSans-Italic-Latin3.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Italic-Pi.woff2": "assets/fonts/split/woff2/IBMPlexSans-Italic-Pi.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Regular-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexSans-Regular-Cyrillic.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Regular-Greek.woff2": "assets/fonts/split/woff2/IBMPlexSans-Regular-Greek.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Regular-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexSans-Regular-Latin1.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Regular-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexSans-Regular-Latin2.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Regular-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexSans-Regular-Latin3.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-Regular-Pi.woff2": "assets/fonts/split/woff2/IBMPlexSans-Regular-Pi.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBold-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBold-Cyrillic.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBold-Greek.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBold-Greek.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBold-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBold-Latin1.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBold-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBold-Latin2.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBold-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBold-Latin3.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBold-Pi.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBold-Pi.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Cyrillic.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Cyrillic.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Greek.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Greek.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin1.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin1.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin2.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin2.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin3.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin3.woff2",
+      "dist/public/assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Pi.woff2": "assets/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Pi.woff2"
     }
   },
   "exports": {

packages/components/rollup.config.mjs

@@ -95,10 +95,22 @@ const plugins = [
           'node_modules/@hashicorp/design-system-tokens/dist/products/css',
         ],
       },
+      {
+        inputFile: 'design-system-components-common.scss',
+        outputFile: 'design-system-components-common.css',
+        loadPaths: [
+          'node_modules/@hashicorp/design-system-tokens/dist/products/css',
+        ],
+      },
       {
         inputFile: 'design-system-power-select-overrides.scss',
         outputFile: 'design-system-power-select-overrides.css',
       },
+      {
+        inputFile: 'design-system-plex-fonts.scss',
+        outputFile: 'design-system-plex-fonts.css',
+        loadPaths: ['node_modules/@ibm'],
+      },
     ]
   ),
 
@@ -133,12 +145,54 @@ const plugins = [
       { src: 'LICENSE.md', dest: 'dist' },
       // Copy Sass files for consumers to use directly
       { src: 'src/styles', dest: 'dist' },
+      // Copy the IBM Plex fonts from the @ibm packages to the public folder
+      {
+        src: 'node_modules/@ibm/plex-sans/LICENSE.txt',
+        dest: 'dist/public/assets/fonts',
+      },
+      {
+        src: [
+          'node_modules/@ibm/plex-sans/fonts/complete/woff2/IBMPlexSans-Italic.woff2',
+          'node_modules/@ibm/plex-sans/fonts/complete/woff2/IBMPlexSans-Regular.woff2',
+          'node_modules/@ibm/plex-sans/fonts/complete/woff2/IBMPlexSans-SemiBold.woff2',
+          'node_modules/@ibm/plex-sans/fonts/complete/woff2/IBMPlexSans-SemiBoldItalic.woff2',
+          'node_modules/@ibm/plex-mono/fonts/complete/woff2/IBMPlexMono-Italic.woff2',
+          'node_modules/@ibm/plex-mono/fonts/complete/woff2/IBMPlexMono-Regular.woff2',
+          'node_modules/@ibm/plex-mono/fonts/complete/woff2/IBMPlexMono-SemiBold.woff2',
+          'node_modules/@ibm/plex-mono/fonts/complete/woff2/IBMPlexMono-SemiBoldItalic.woff2',
+        ],
+        dest: 'dist/public/assets/fonts/complete/woff2',
+      },
+      {
+        src: [
+          'node_modules/@ibm/plex-sans/fonts/split/woff2/IBMPlexSans-Regular-*.woff2',
+          'node_modules/@ibm/plex-sans/fonts/split/woff2/IBMPlexSans-Italic-*.woff2',
+          'node_modules/@ibm/plex-sans/fonts/split/woff2/IBMPlexSans-SemiBold-*.woff2',
+          'node_modules/@ibm/plex-sans/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-*.woff2',
+          'node_modules/@ibm/plex-mono/fonts/split/woff2/IBMPlexMono-Regular-*.woff2',
+          'node_modules/@ibm/plex-mono/fonts/split/woff2/IBMPlexMono-Italic-*.woff2',
+          'node_modules/@ibm/plex-mono/fonts/split/woff2/IBMPlexMono-SemiBold-*.woff2',
+          'node_modules/@ibm/plex-mono/fonts/split/woff2/IBMPlexMono-SemiBoldItalic-*.woff2',
+        ],
+        dest: 'dist/public/assets/fonts/split/woff2',
+      },
     ],
     hook: 'writeBundle',
     copySync: true,
     copyOnce: true,
     // verbose: true,
   }),
+
+  // After bundle is written, copy built CSS to Showcase app
+  copy({
+    hook: 'writeBundle',
+    targets: [
+      {
+        src: 'dist/styles/@hashicorp/*.css',
+        dest: '../../showcase/public/assets/styles/@hashicorp',
+      },
+    ],
+  }),
 ];
 
 if (!process.env.development) {

packages/components/scripts/check-dist-files.mjs

@@ -4,7 +4,9 @@ import { existsSync } from 'node:fs';
 
 const FILES_TO_CHECK = [
   'dist/styles/@hashicorp/design-system-components.css',
+  'dist/styles/@hashicorp/design-system-components-common.css',
   'dist/styles/@hashicorp/design-system-power-select-overrides.css',
+  'dist/styles/@hashicorp/design-system-plex-fonts.css',
 ];
 
 let hasErrors = false;

packages/components/src/components.ts

@@ -329,6 +329,12 @@ export { default as HdsTextCode } from './components/hds/text/code.gts';
 export { default as HdsTextDisplay } from './components/hds/text/display.gts';
 export * from './components/hds/text/types.ts';
 
+// Theme Context
+export { default as HdsThemeContext } from './components/hds/theme-context/index.ts';
+
+// Theme Switcher
+export { default as HdsThemeSwitcher } from './components/hds/theme-switcher/index.ts';
+
 // Time
 export { default as HdsTime } from './components/hds/time/index.gts';
 export { default as HdsTimeSingle } from './components/hds/time/single.gts';

packages/components/src/components/hds/icon-tile/index.gts

@@ -77,8 +77,7 @@ export default class HdsIconTile extends Component<HdsIconTileSignature> {
 
   get icon(): HdsIconSignature['Args']['name'] | undefined {
     if (this.args.logo) {
-      // for the logo version we use the colored versions directly
-      return `${this.args.logo}-color`;
+      return this.args.logo;
     } else if (this.args.icon) {
       return this.args.icon;
     } else {

packages/components/src/components/hds/icon/index.gts

@@ -4,13 +4,23 @@
  */
 
 import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
+import { service } from '@ember/service';
 import { guidFor } from '@ember/object/internals';
+import { assert } from '@ember/debug';
+import { modifier } from 'ember-modifier';
 import { iconNames } from '@hashicorp/flight-icons/svg';
-import type { IconName } from '@hashicorp/flight-icons/svg';
-import type Owner from '@ember/owner';
+import { IconRegistry } from '@hashicorp/flight-icons/symbol-js/registry';
+import {
+  HdsIconSizeValues,
+  HdsIconColorValues,
+  HdsIconLibraryValues,
+} from './types.ts';
 
-import { HdsIconSizeValues, HdsIconColorValues } from './types.ts';
+import type { IconName } from '@hashicorp/flight-icons/svg';
+import type { HdsIconRegistryEntry } from '@hashicorp/flight-icons/symbol-js/registry';
+import type HdsThemingService from '@hashicorp/design-system-components/services/hds-theming';
+import type HdsIconRegistryService from '@hashicorp/design-system-components/services/hds-icon-registry';
+import type { HdsIconDefinition } from '@hashicorp/design-system-components/services/hds-icon-registry';
 import type { HdsIconSizes, HdsIconColors } from './types.ts';
 
 export const COLORS: HdsIconColors[] = Object.values(HdsIconColorValues);
@@ -30,19 +40,50 @@ export interface HdsIconSignature {
 }
 
 export default class HdsIcon extends Component<HdsIconSignature> {
+  @service declare readonly hdsTheming: HdsThemingService;
+  @service declare readonly hdsIconRegistry: HdsIconRegistryService;
+
   private _iconId = 'icon-' + guidFor(this);
   private _titleId = 'title-' + guidFor(this);
 
-  constructor(owner: Owner, args: HdsIconSignature['Args']) {
-    super(owner, args);
+  get definition(): HdsIconDefinition {
+    return {
+      name: this.name,
+      size: this.size,
+      library: this.isCarbon
+        ? HdsIconLibraryValues.Carbon
+        : HdsIconLibraryValues.Flight,
+    };
+  }
+
+  get name(): HdsIconSignature['Args']['name'] {
+    const { name } = this.args;
 
-    if (!this.args.name) {
-      assert('Please provide to <Hds::Icon> a value for @name');
-    } else if (!iconNames.includes(this.args.name)) {
-      assert(
-        `The icon @name "${this.args.name}" provided to <Hds::Icon> is not correct. Please verify it exists on https://helios.hashicorp.design/icons/library`
-      );
-    }
+    assert(
+      'Please provide to <Hds::Icon> a value for @name',
+      name !== undefined
+    );
+
+    return name;
+  }
+
+  get registryEntry(): HdsIconRegistryEntry | undefined {
+    const registryEntry = IconRegistry[this.name];
+
+    assert(
+      `The icon @name "${this.args.name}" or @size "${this.args.size}" provided to <Hds::Icon> is not correct. Please verify it exists on https://helios.hashicorp.design/icons/library`,
+      registryEntry !== undefined
+    );
+
+    return IconRegistry[this.name];
+  }
+
+  get hasCarbonEquivalent(): boolean {
+    return this.registryEntry?.carbon !== null;
+  }
+
+  get isCarbon(): boolean {
+    return this.hdsTheming.isCarbonThemeEnabled && this.hasCarbonEquivalent;
   }
 
   get isInline() {
@@ -67,7 +108,7 @@ export default class HdsIcon extends Component<HdsIconSignature> {
     }
   }
 
-  get size() {
+  get size(): HdsIconSizes {
     return this.args.size ?? HdsIconSizeValues.Sixteen;
   }
 
@@ -114,28 +155,39 @@ export default class HdsIcon extends Component<HdsIconSignature> {
     return classes.join(' ');
   }
 
+  get symbolId(): string {
+    return this.hdsIconRegistry.getSymbolId(this.definition) ?? '';
+  }
+
+  loadIcon = modifier(() => {
+    this.hdsIconRegistry.requestLoad(this.definition);
+  });
+
   <template>
     <svg
       class={{this.classNames}}
       ...attributes
       aria-hidden={{if @title "false" "true"}}
       aria-labelledby={{this.ariaLabelledby}}
-      data-test-icon={{@name}}
+      data-test-icon={{this.name}}
+      data-has-carbon-equivalent={{this.hasCarbonEquivalent}}
+      data-is-carbon={{this.isCarbon}}
       fill={{this.fillColor}}
       id={{this._iconId}}
       role={{this.role}}
       width={{this.svgSize.width}}
       height={{this.svgSize.height}}
       viewBox="0 0 {{this.size}} {{this.size}}"
       xmlns="http://www.w3.org/2000/svg"
+      {{this.loadIcon}}
     >
       {{#if @title}}
         <title id={{this._titleId}}>{{@title}}</title>
         <g role="presentation">
-          <use href="#flight-{{@name}}-{{this.size}}" />
+          <use href="#{{this.symbolId}}"></use>
         </g>
       {{else}}
-        <use href="#flight-{{@name}}-{{this.size}}" />
+        <use href="#{{this.symbolId}}"></use>
       {{/if}}
     </svg>
   </template>

packages/components/src/components/hds/icon/types.ts

@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
+import type { HdsIconModule } from '@hashicorp/flight-icons/symbol-js/registry';
+
 export enum HdsIconSizeValues {
   Sixteen = '16',
   TwentyFour = '24',
@@ -33,3 +35,11 @@ export enum HdsIconColorValues {
   CriticalHighContrast = 'critical-high-contrast',
 }
 export type HdsIconColors = `${HdsIconColorValues}`;
+
+export enum HdsIconLibraryValues {
+  Flight = 'flight',
+  Carbon = 'carbon',
+}
+export type HdsIconLibraries = `${HdsIconLibraryValues}`;
+
+export type HdsIconLoader = () => Promise<HdsIconModule>;

packages/components/src/components/hds/theme-context/index.hbs

@@ -0,0 +1,5 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<div class={{this.classNames}} ...attributes>{{yield}}</div>