[WIP-00] [Project Solar / Milestone 1] Main feature branch

.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>