WIP

Author: didoo

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

@@ -3,9 +3,21 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-<Hds::Dropdown @enableCollisionDetection={{true}} @matchToggleWidth={{@toggleIsFullWidth}} class="hds-theme-switcher-control" ...attributes as |D|>
-  <D.ToggleButton @color="secondary" @size={{this.toggleSize}} @isFullWidth={{@toggleIsFullWidth}} @text={{this.toggleContent.label}} @icon={{this.toggleContent.icon}} />
+<Hds::Dropdown
+  @enableCollisionDetection={{true}}
+  @matchToggleWidth={{@toggleIsFullWidth}}
+  class="hds-theme-switcher-control"
+  ...attributes
+  as |D|
+>
+  <D.ToggleButton
+    @color="secondary"
+    @size={{this.toggleSize}}
+    @isFullWidth={{@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.setTheme data.theme)}}>{{data.label}}</D.Interactive>
   {{/each-in}}
-</Hds::Dropdown>
+</Hds::Dropdown>

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

@@ -9,28 +9,53 @@ 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 } from '../../../services/hds-theming.ts';
 
-export const OPTIONS = {
-  none: { theme: undefined, icon: 'minus', label: 'None' },
+type ThemeOptionKey = 'system' | 'light' | 'dark'; // | 'none';
+
+interface ThemeOption {
+  theme: HdsThemes;
+  icon: HdsIconSignature['Args']['name'];
+  label: string;
+}
+
+export const OPTIONS: Record<ThemeOptionKey, ThemeOption> = {
   system: { theme: 'system', icon: 'monitor', label: 'System' },
   light: { theme: 'light', icon: 'sun', label: 'Light' },
   dark: { theme: 'dark', icon: 'moon', label: 'Dark' },
-} as const;
+  // none: { theme: undefined, icon: 'minus', label: 'None' },
+};
 
 export interface HdsThemeSwitcherSignature {
   Args: {
     toggleSize?: HdsDropdownToggleButtonSignature['Args']['size'];
     toggleIsFullWidth?: boolean;
+    hasSystemOption?: boolean;
+    // hasNoThemeOption?: boolean;
   };
   Element: HdsDropdownSignature['Element'];
 }
 
 export default class HdsThemeSwitcher extends Component<HdsThemeSwitcherSignature> {
   @service declare readonly hdsTheming: HdsThemingService;
 
-  _options = OPTIONS;
+  get _options() {
+    const options: Partial<typeof OPTIONS> = { ...OPTIONS };
+    const hasSystemOption = this.args.hasSystemOption ?? true;
+    // const hasNoThemeOption = this.args.hasNoThemeOption ?? false;
+
+    if (!hasSystemOption) {
+      delete options.system;
+    }
+
+    // if (!hasNoThemeOption) {
+    //   delete options.none;
+    // }
+
+    return options;
+  }
 
   get toggleSize() {
     return this.args.toggleSize ?? 'small';
@@ -52,6 +77,7 @@ export default class HdsThemeSwitcher extends Component<HdsThemeSwitcherSignatur
   }
 
   get currentTheme() {
+    // we get the theme from the global service
     return this.hdsTheming.currentTheme;
   }
 

packages/components/src/services/hds-theming.ts

@@ -8,7 +8,7 @@ export const HDS_THEMING_CLASS_SELECTOR = 'hds-theme';
 export const HDS_THEMING_LOCALSTORAGE_KEY = 'hds-current-theming-preferences';
 
 export enum HdsThemeValues {
-  // system settings
+  // system settings (prefers-color-scheme)
   System = 'system',
   // user settings for dark/light
   Light = 'light',
@@ -33,8 +33,8 @@ type ThemeSelector = 'data' | 'class';
 
 export type HdsThemingServiceOptions = {
   themeMap: {
-    [HdsThemeValues.Light]: HdsModes;
-    [HdsThemeValues.Dark]: HdsModes;
+    [HdsThemeValues.Light]: HdsModeValues.CdsG0 | HdsModeValues.CdsG10;
+    [HdsThemeValues.Dark]: HdsModeValues.CdsG90 | HdsModeValues.CdsG100;
   };
   themeSelector: ThemeSelector;
 };
@@ -44,18 +44,20 @@ export default class HdsThemingService extends Service {
   @tracked currentMode: HdsModes = undefined;
   @tracked currentThemingServiceOptions: HdsThemingServiceOptions = {
     themeMap: {
-      [HdsThemeValues.Light]: HdsModeValues.Hds, // TODO understand if we want to use `CdsG0` here instead
+      [HdsThemeValues.Light]: HdsModeValues.CdsG0,
       [HdsThemeValues.Dark]: HdsModeValues.CdsG100,
     },
     themeSelector: 'data',
   };
 
   constructor(owner: Owner) {
     super(owner);
+    console.log('HdsThemingService constructor');
     this.initializeTheme();
   }
 
   initializeTheme() {
+    console.log('HdsThemingService > initializeTheme');
     const storedTheme = localStorage.getItem(
       HDS_THEMING_LOCALSTORAGE_KEY
     ) as HdsThemes;
@@ -76,11 +78,7 @@ export default class HdsThemingService extends Service {
       return;
     }
 
-    if (
-      theme === undefined ||
-      theme === HdsThemeValues.System ||
-      !THEMES.includes(theme)
-    ) {
+    if (theme === undefined || !THEMES.includes(theme)) {
       this.currentTheme = undefined;
       this.currentMode = undefined;
       if (this.currentThemingServiceOptions.themeSelector === 'data') {
@@ -91,8 +89,11 @@ export default class HdsThemingService extends Service {
       localStorage.removeItem(HDS_THEMING_LOCALSTORAGE_KEY);
     } else {
       this.currentTheme = theme;
-      // TODO theme may be `system` in which case what happens to
-      this.currentMode = this.currentThemingServiceOptions.themeMap[theme];
+      if (theme === HdsThemeValues.System) {
+        this.currentMode = undefined;
+      } else {
+        this.currentMode = this.currentThemingServiceOptions.themeMap[theme];
+      }
       if (this.currentThemingServiceOptions.themeSelector === 'data') {
         rootElement.setAttribute(HDS_THEMING_DATA_SELECTOR, this.currentMode);
       } else if (this.currentThemingServiceOptions.themeSelector === 'class') {

showcase/app/components/page-foundations/theming/sub-sections/theme-switcher.gts

@@ -31,6 +31,19 @@ const SubSectionThemeSwitcher: TemplateOnlyComponent = <template>
   </ShwFlex>
 
   <ShwDivider />
+
+  <ShwTextH4 @tag="h3">Options</ShwTextH4>
+
+  <ShwFlex @gap="2rem" as |SF|>
+    <SF.Item @label="System/Light/Dark (default)">
+      <HdsThemeSwitcher />
+    </SF.Item>
+    <SF.Item @label="Only Light/Dark">
+      <HdsThemeSwitcher @hasSystemOption={{false}} />
+    </SF.Item>
+  </ShwFlex>
+
+  <ShwDivider />
 </template>;
 
 export default SubSectionThemeSwitcher;

showcase/app/components/shw/theme-switcher/index.gts

@@ -10,7 +10,7 @@ import { service } from '@ember/service';
 import { eq } from 'ember-truth-helpers';
 // import { tracked } from '@glimmer/tracking';
 
-import type HdsThemingService from '@hashicorp/design-system-components/services/hds-theming.ts';
+import type HdsThemingService from '@hashicorp/design-system-components/services/hds-theming';
 
 interface ShwThemeSwitcherSignature {
   Element: HTMLDivElement;

showcase/app/controllers/application.ts

@@ -10,14 +10,18 @@ import { tracked } from '@glimmer/tracking';
 import type RouterService from '@ember/routing/router-service';
 import type Owner from '@ember/owner';
 
+import type HdsThemingService from '@hashicorp/design-system-components/services/hds-theming';
+
 export default class ApplicationController extends Controller {
   @service declare readonly router: RouterService;
+  @service declare readonly hdsTheming: HdsThemingService;
 
   @tracked isFrameless = false;
 
   constructor(owner: Owner) {
     super(owner);
     this.router.on('routeDidChange', this.routeDidChange.bind(this));
+    this.hdsTheming.initializeTheme();
   }
 
   routeDidChange() {