[04-Part2] [Project Solar / Phase 1 / Showcase] Add support for theming and theme-switching to the showcase

packages/components/package.json

@@ -369,6 +369,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",
@@ -397,6 +399,7 @@
       "./modifiers/hds-register-event.js": "./dist/_app_/modifiers/hds-register-event.js",
       "./modifiers/hds-tooltip.js": "./dist/_app_/modifiers/hds-tooltip.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"
     }
   },

packages/components/src/components.ts

@@ -327,6 +327,12 @@ export { default as HdsTextCode } from './components/hds/text/code.ts';
 export { default as HdsTextDisplay } from './components/hds/text/display.ts';
 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.ts';
 export { default as HdsTimeSingle } from './components/hds/time/single.ts';

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>

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

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+import type Owner from '@ember/owner';
+
+import {
+  HdsThemeContextThemesValues,
+  HdsThemeContextModesValues,
+} from './types.ts';
+import type { HdsThemeContexts } from './types.ts';
+
+import type { HdsThemes, HdsModes } from '../../../services/hds-theming.ts';
+
+export interface HdsThemeContextSignature {
+  Args: {
+    // can be either an `HdsTheme` or an `HdsMode`
+    context: HdsThemeContexts;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLElement;
+}
+
+export const CONTEXTUAL_THEMES: HdsThemes[] = Object.values(
+  HdsThemeContextThemesValues
+);
+export const CONTEXTUAL_MODES: HdsModes[] = Object.values(
+  HdsThemeContextModesValues
+);
+export const CONTEXTUAL_VALUES: HdsThemeContexts[] = [
+  ...CONTEXTUAL_THEMES,
+  ...CONTEXTUAL_MODES,
+];
+
+export default class HdsThemeContext extends Component<HdsThemeContextSignature> {
+  constructor(owner: Owner, args: HdsThemeContextSignature['Args']) {
+    super(owner, args);
+
+    const { context } = args;
+
+    assert(
+      `@context for "Hds::ThemeContext" must be one of the following: ${CONTEXTUAL_VALUES.join(
+        ', '
+      )}; received: ${context}`,
+      CONTEXTUAL_VALUES.includes(context)
+    );
+  }
+
+  // Get the class names to apply to the component.
+  get classNames(): string {
+    const classes = ['hds-theme-context'];
+
+    const { context } = this.args;
+
+    // add "theme" or "mode" classes based on the @context arguments
+    if (CONTEXTUAL_THEMES.includes(context as HdsThemes)) {
+      classes.push(`hds-theme-${context}`);
+    } else if (CONTEXTUAL_MODES.includes(context as HdsModes)) {
+      classes.push(`hds-mode-${context}`);
+    }
+
+    return classes.join(' ');
+  }
+}

packages/components/src/components/hds/theme-context/types.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import {
+  HdsThemeValues,
+  HdsModesLightValues,
+  HdsModesDarkValues,
+} from '../../../services/hds-theming.ts';
+
+import type { HdsThemes, HdsModes } from '../../../services/hds-theming.ts';
+
+// re-export the enum values for the `HdsThemes` to use in the component
+// note: using `as const` ensures Object.values() returns only the values (not keys _and_ values)
+export const HdsThemeContextThemesValues = {
+  Default: HdsThemeValues.Default,
+  System: HdsThemeValues.System,
+  Light: HdsThemeValues.Light,
+  Dark: HdsThemeValues.Dark,
+} as const;
+
+// re-export the enum values for the `HdsModes` to use in the component
+// note: using `as const` ensures Object.values() returns only the values (not keys _and_ values)
+export const HdsThemeContextModesValues = {
+  CdsG0: HdsModesLightValues.CdsG0,
+  CdsG10: HdsModesLightValues.CdsG10,
+  CdsG90: HdsModesDarkValues.CdsG90,
+  CdsG100: HdsModesDarkValues.CdsG100,
+} as const;
+
+export type HdsThemeContexts = HdsThemes | Exclude<HdsModes, 'default'>;

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

@@ -0,0 +1,29 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{!
+  ------------------------------------------------------------------------------------------
+  IMPORTANT: this is a temporary implementation, while we wait for the design specifications
+  ------------------------------------------------------------------------------------------
+}}
+
+<Hds::Dropdown
+  @enableCollisionDetection={{true}}
+  @matchToggleWidth={{@toggleIsFullWidth}}
+  class="hds-theme-switcher-control"
+  ...attributes
+  as |D|
+>
+  <D.ToggleButton
+    @color="secondary"
+    @size={{this.toggleSize}}
+    @isFullWidth={{this.toggleIsFullWidth}}
+    @text={{this.toggleContent.label}}
+    @icon={{this.toggleContent.icon}}
+  />
+  {{#each-in this._options as |key data|}}
+    <D.Interactive @icon={{data.icon}} {{on "click" (fn this.onSelectTheme data.theme)}}>{{data.label}}</D.Interactive>
+  {{/each-in}}
+</Hds::Dropdown>

packages/components/src/components/hds/theme-switcher/index.ts

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+// ------------------------------------------------------------------------------------------
+// IMPORTANT: this is a temporary implementation, while we wait for the design specifications
+// ------------------------------------------------------------------------------------------
+
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+import type { HdsDropdownSignature } from '../dropdown/index.ts';
+import type { HdsDropdownToggleButtonSignature } from '../dropdown/toggle/button.ts';
+import type { HdsIconSignature } from '../icon/index.ts';
+import type HdsThemingService from '../../../services/hds-theming.ts';
+import type {
+  HdsThemes,
+  HdsOnSetThemeCallback,
+} from '../../../services/hds-theming.ts';
+
+interface ThemeOption {
+  theme: HdsThemes | undefined;
+  icon: HdsIconSignature['Args']['name'];
+  label: string;
+}
+
+const OPTIONS: Record<HdsThemes, ThemeOption> = {
+  default: { theme: 'default', icon: 'hashicorp', label: 'Default' },
+  system: { theme: 'system', icon: 'monitor', label: 'System' },
+  light: { theme: 'light', icon: 'sun', label: 'Light' },
+  dark: { theme: 'dark', icon: 'moon', label: 'Dark' },
+};
+
+export interface HdsThemeSwitcherSignature {
+  Args: {
+    toggleSize?: HdsDropdownToggleButtonSignature['Args']['size'];
+    toggleIsFullWidth?: HdsDropdownToggleButtonSignature['Args']['isFullWidth'];
+    hasDefaultOption?: boolean;
+    hasSystemOption?: boolean;
+    onSetTheme?: HdsOnSetThemeCallback;
+  };
+  Element: HdsDropdownSignature['Element'];
+}
+
+export default class HdsThemeSwitcher extends Component<HdsThemeSwitcherSignature> {
+  @service declare readonly hdsTheming: HdsThemingService;
+
+  get toggleSize() {
+    return this.args.toggleSize ?? 'small';
+  }
+
+  get toggleIsFullWidth() {
+    return this.args.toggleIsFullWidth ?? false;
+  }
+
+  get toggleContent() {
+    if (
+      (this.currentTheme === 'default' && this.hasDefaultOption) ||
+      (this.currentTheme === 'system' && this.hasSystemOption) ||
+      this.currentTheme === 'light' ||
+      this.currentTheme === 'dark'
+    ) {
+      return {
+        label: OPTIONS[this.currentTheme].label,
+        icon: OPTIONS[this.currentTheme].icon,
+      };
+    } else {
+      return { label: 'Theme', icon: undefined };
+    }
+  }
+
+  // note: we will use the `default` option in development, while migrating to the `cds` theming
+  // during this process, consumers will enable/disable this option via code logic or feature flag
+  get hasDefaultOption() {
+    return this.args.hasDefaultOption ?? false;
+  }
+
+  get hasSystemOption() {
+    return this.args.hasSystemOption ?? true;
+  }
+
+  get _options() {
+    const options: Partial<typeof OPTIONS> = { ...OPTIONS };
+
+    if (!this.hasDefaultOption) {
+      delete options.default;
+    }
+
+    if (!this.hasSystemOption) {
+      delete options.system;
+    }
+
+    return options;
+  }
+
+  get currentTheme() {
+    // we get the theme from the global service
+    return this.hdsTheming.currentTheme;
+  }
+
+  @action
+  onSelectTheme(theme: HdsThemes | undefined): void {
+    // we set the theme in the global service (and provide an optional user-defined callback)
+    this.hdsTheming.setTheme({ theme, onSetTheme: this.args.onSetTheme });
+  }
+}

packages/components/src/services.ts

@@ -4,3 +4,5 @@
  */
 
 // This file is used to expose public services
+
+export * from './services/hds-theming.ts';