PORTING OF SHOWCASE THEMING SQUASHED

Author: didoo

packages/components/package.json

@@ -367,6 +367,7 @@
       "./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-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",
@@ -395,6 +396,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"
     }
   },
@@ -425,4 +427,4 @@
   "engines": {
     "node": ">= 18"
   }
-}
+}

packages/components/rollup.config.mjs

@@ -23,6 +23,9 @@ const plugins = [
     'index.js',
     'template-registry.js',
     'styles/@hashicorp/design-system-components.scss',
+    // TODO they're added to the main CSS file, unfortunately → discuss with Alex what we can do
+    // 'styles/@hashicorp/design-system-components--themed-with-prefers-color-scheme.scss',
+    // 'styles/@hashicorp/design-system-components--themed-with-css-selectors.scss',
   ]),
 
   // These are the modules that should get reexported into the traditional
@@ -57,6 +60,31 @@ const plugins = [
     ],
   }),
 
+  // TODO they're added to the main CSS file, unfortunately → discuss with Alex what we can do
+  // scss({
+  //   fileName:
+  //     'styles/@hashicorp/design-system-components--themed-with-prefers-color-scheme.css',
+  //   includePaths: [
+  //     '../../node_modules/@hashicorp/design-system-tokens/dist/products/css',
+  //   ],
+  // }),
+  // scss({
+  //   fileName:
+  //     'styles/@hashicorp/design-system-components--themed-with-css-selectors.css',
+  //   includePaths: [
+  //     '../../node_modules/@hashicorp/design-system-tokens/dist/products/css',
+  //   ],
+  // }),
+  // TODO let's try this workaround...
+  scss({
+    fileName:
+      'styles/@hashicorp/design-system-components--themed-with-prefers-color-scheme.css',
+  }),
+  scss({
+    fileName:
+      'styles/@hashicorp/design-system-components--themed-with-css-selectors.css',
+  }),
+
   scss({
     fileName: 'styles/@hashicorp/design-system-power-select-overrides.css',
   }),

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

@@ -0,0 +1,11 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  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}} />
+  {{#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>

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

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+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 HdsThemingService from '../../../services/hds-theming.ts';
+import { type HdsThemes } from '../../../services/hds-theming.ts';
+
+export const OPTIONS = {
+  none: { theme: undefined, icon: 'minus', label: 'None' },
+  system: { theme: 'system', icon: 'monitor', label: 'System' },
+  light: { theme: 'light', icon: 'sun', label: 'Light' },
+  dark: { theme: 'dark', icon: 'moon', label: 'Dark' },
+} as const;
+
+export interface HdsThemeSwitcherSignature {
+  Args: {
+    toggleSize?: HdsDropdownToggleButtonSignature['Args']['size'];
+    toggleIsFullWidth?: boolean;
+  };
+  Element: HdsDropdownSignature['Element'];
+}
+
+export default class HdsThemeSwitcher extends Component<HdsThemeSwitcherSignature> {
+  @service declare readonly hdsTheming: HdsThemingService;
+
+  _options = OPTIONS;
+
+  get toggleSize() {
+    return this.args.toggleSize ?? 'small';
+  }
+
+  get toggleContent() {
+    switch (this.currentTheme) {
+      case 'system':
+      case 'light':
+      case 'dark':
+        return {
+          label: OPTIONS[this.currentTheme].label,
+          icon: OPTIONS[this.currentTheme].icon,
+        };
+      case undefined:
+      default:
+        return { label: 'Theme', icon: undefined };
+    }
+  }
+
+  get currentTheme() {
+    return this.hdsTheming.currentTheme;
+  }
+
+  @action
+  setTheme(theme: HdsThemes): void {
+    // we set the theme in the global service
+    this.hdsTheming.setTheme(theme);
+  }
+}

packages/components/src/services.ts

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

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

@@ -0,0 +1,63 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+import type Owner from '@ember/owner';
+
+export const LOCALSTORAGE_KEY = 'hds-current-theme';
+
+export enum HdsThemeValues {
+  System = 'system',
+  Light = 'light',
+  Dark = 'dark',
+}
+
+export type HdsThemes = `${HdsThemeValues}` | undefined;
+
+export const THEMES: string[] = Object.values(HdsThemeValues);
+
+export default class HdsThemingService extends Service {
+  @tracked currentTheme: HdsThemes = undefined;
+
+  constructor(owner: Owner) {
+    super(owner);
+    this.initializeTheme();
+  }
+
+  initializeTheme() {
+    const _initialTheme = localStorage.getItem(LOCALSTORAGE_KEY);
+    if (
+      _initialTheme === 'system' ||
+      _initialTheme === 'light' ||
+      _initialTheme === 'dark'
+    ) {
+      this.setTheme(_initialTheme);
+    }
+  }
+
+  getTheme(): HdsThemes {
+    return this.currentTheme;
+  }
+
+  setTheme(theme: HdsThemes) {
+    // console.log('setting HDS theme', theme);
+
+    if (theme === undefined) {
+      localStorage.removeItem(LOCALSTORAGE_KEY);
+    } else {
+      localStorage.setItem(LOCALSTORAGE_KEY, theme);
+    }
+
+    // IMPORTANT: for this to work, it needs to be the HTML tag (it's the `:root` in CSS)
+    const rootElement = document.querySelector('html');
+
+    if (rootElement) {
+      if (theme === undefined) {
+        rootElement.removeAttribute('data-hds-theme');
+        this.currentTheme = undefined;
+      } else {
+        rootElement.setAttribute('data-hds-theme', theme);
+        this.currentTheme = theme;
+      }
+    }
+  }
+}