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

package.json

@@ -26,8 +26,7 @@
   },
   "pnpm": {
     "overrides": {
-      "ember-composable-helpers": "npm:@nullvoxpopuli/ember-composable-helpers@^5.2.11",
-      "style-dictionary": "file:/Users/cristianorastelli/src/github/style-dictionary-didoo"
+      "ember-composable-helpers": "npm:@nullvoxpopuli/ember-composable-helpers@^5.2.11"
     },
     "patchedDependencies": {
       "broccoli-asset-rewrite": "patches/broccoli-asset-rewrite.patch"

packages/components/package.json

@@ -112,7 +112,6 @@
     "prettier-plugin-ember-template-tag": "^2.0.5",
     "rollup": "^4.39.0",
     "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-scss": "^4.0.1",
     "stylelint": "^16.17.0",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard-scss": "^14.0.0",
@@ -367,6 +366,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 +395,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/rollup.config.mjs

@@ -6,24 +6,57 @@
 import { Addon } from '@embroider/addon-dev/rollup';
 import { babel } from '@rollup/plugin-babel';
 import copy from 'rollup-plugin-copy';
-import scss from 'rollup-plugin-scss';
 import process from 'process';
 import path from 'node:path';
+import * as sass from 'sass';
 
 const addon = new Addon({
   srcDir: 'src',
   destDir: 'dist',
 });
 
+// Custom SCSS compilation plugins for Rollup
+function addScssCompilationPlugins(options) {
+  return options.map(({ inputFile, outputFile }) => ({
+    name: `rollup custom plugin to generate ${outputFile}`,
+    generateBundle() {
+      try {
+        const inputFileFullPath = `src/styles/@hashicorp/${inputFile}`;
+        const outputFileFullPath = `styles/@hashicorp/${outputFile}`;
+
+        const result = sass.compile(inputFileFullPath, {
+          sourceMap: true,
+          loadPaths: ['node_modules/@hashicorp/design-system-tokens/dist'],
+        });
+
+        // Emit the compiled CSS
+        this.emitFile({
+          type: 'asset',
+          fileName: outputFileFullPath,
+          source: result.css,
+        });
+
+        // Emit the source map
+        if (result.sourceMap) {
+          this.emitFile({
+            type: 'asset',
+            fileName: `${outputFileFullPath}.map`,
+            source: JSON.stringify(result.sourceMap),
+          });
+        }
+      } catch (error) {
+        this.error(
+          `Failed to compile SCSS file "${inputFile}": ${error.message}`
+        );
+      }
+    },
+  }));
+}
+
 const plugins = [
   // These are the modules that users should be able to import from your
   // addon. Anything not listed here may get optimized away.
-  addon.publicEntrypoints([
-    '**/*.{js,ts}',
-    'index.js',
-    'template-registry.js',
-    'styles/@hashicorp/design-system-components.scss',
-  ]),
+  addon.publicEntrypoints(['**/*.{js,ts}', 'index.js', 'template-registry.js']),
 
   // These are the modules that should get reexported into the traditional
   // "app" tree. Things in here should also be in publicEntrypoints above, but
@@ -50,16 +83,34 @@ const plugins = [
   // package names.
   addon.dependencies(),
 
-  scss({
-    fileName: 'styles/@hashicorp/design-system-components.css',
-    includePaths: [
-      'node_modules/@hashicorp/design-system-tokens/dist/products/css',
-    ],
-  }),
-
-  scss({
-    fileName: 'styles/@hashicorp/design-system-power-select-overrides.css',
-  }),
+  // We use a custom plugin for the Sass/SCSS compilation
+  // so we can have multiple input and multiple outputs
+  ...addScssCompilationPlugins([
+    {
+      inputFile: 'design-system-components.scss',
+      outputFile: 'design-system-components.css',
+    },
+    {
+      inputFile: 'design-system-components-theming-with-css-selectors.scss',
+      outputFile: 'design-system-components-theming-with-css-selectors.css',
+    },
+    {
+      inputFile:
+        'design-system-components-theming-with-prefers-color-scheme.scss',
+      outputFile:
+        'design-system-components-theming-with-prefers-color-scheme.css',
+    },
+    {
+      inputFile:
+        'design-system-components-theming-with-combined-strategies.scss',
+      outputFile:
+        'design-system-components-theming-with-combined-strategies.css',
+    },
+    {
+      inputFile: 'design-system-power-select-overrides.scss',
+      outputFile: 'design-system-power-select-overrides.css',
+    },
+  ]),
 
   // Ensure that standalone .hbs files are properly integrated as Javascript.
   addon.hbs(),

packages/components/src/components.ts

@@ -327,6 +327,9 @@ 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 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-switcher/index.hbs

@@ -0,0 +1,23 @@
+{{!
+  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,89 @@
+/**
+ * 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 { HdsIconSignature } from '../icon/index.ts';
+import type HdsThemingService from '../../../services/hds-theming.ts';
+import { type HdsThemes } from '../../../services/hds-theming.ts';
+
+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' },
+  // 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;
+
+  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';
+  }
+
+  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() {
+    // we get the theme from the global service
+    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';