🧪 [Spike] Theming “support” in HDS and Showcase - Aggregated

package.json

@@ -19,6 +19,7 @@
   "packageManager": "yarn@4.4.0",
   "resolutions": {
     "broccoli-asset-rewrite@^2.0.0": "patch:broccoli-asset-rewrite@npm%3A2.0.0#./.yarn/patches/broccoli-asset-rewrite-npm-2.0.0-c4ce42084a.patch",
-    "@glint/environment-ember-loose": "patch:@glint/environment-ember-loose@npm%3A1.4.0#~/.yarn/patches/@glint-environment-ember-loose-npm-1.4.0-31c2f31bcb.patch"
+    "@glint/environment-ember-loose": "patch:@glint/environment-ember-loose@npm%3A1.4.0#~/.yarn/patches/@glint-environment-ember-loose-npm-1.4.0-31c2f31bcb.patch",
+    "style-dictionary": "portal:/Users/cristianorastelli/src/github/style-dictionary-didoo"
   }
 }

packages/components/package.json

@@ -17,9 +17,10 @@
   "license": "MPL-2.0",
   "author": "HashiCorp Design Systems <design-systems@hashicorp.com>",
   "scripts": {
-    "build": "concurrently 'npm:build:*'",
+    "build": "concurrently 'npm:build:js' 'npm:build:types'",
     "build:js": "rollup --config",
     "build:types": "glint --declaration",
+    "build:watch": "nodemon --watch '../tokens/dist/*' --ext 'css' --exec 'yarn build'",
     "prepublishOnly": "yarn build && test -f 'dist/styles/@hashicorp/design-system-components.css' || (echo 'The pre-compiled CSS file was not found' && exit 1)",
     "start": "concurrently 'yarn:start:*'",
     "start:js": "rollup --config --watch --environment development",
@@ -99,6 +100,7 @@
     "eslint-plugin-n": "^17.7.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-qunit": "^8.1.1",
+    "nodemon": "^3.1.7",
     "postcss": "^8.4.47",
     "prettier": "^3.3.2",
     "rollup": "^4.22.4",
@@ -288,6 +290,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/index.js": "./dist/_app_/components/hds/text/index.js",
+      "./components/hds/theme-switcher/index.js": "./dist/_app_/components/hds/theme-switcher/index.js",
       "./components/hds/time/index.js": "./dist/_app_/components/hds/time/index.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",
@@ -303,6 +306,7 @@
       "./modifiers/hds-clipboard.js": "./dist/_app_/modifiers/hds-clipboard.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-theming.js": "./dist/_app_/services/hds-theming.js",
       "./services/hds-time.js": "./dist/_app_/services/hds-time.js"
     }
   },

packages/components/rollup.config.mjs

@@ -22,6 +22,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
@@ -55,6 +58,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,61 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+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: object | undefined) {
+    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;
+      }
+    }
+  }
+}