[WIP-00] [Project Solar / Milestone 1] Main feature branch

.changeset/tough-cows-rule.md

@@ -0,0 +1,8 @@
+---
+"@hashicorp/design-system-tokens": major
+---
+
+MODES - TODOs
+
+- Decide if this is a `major` or a `minor`
+- Add a proper changeset entry here

DELETE-ME.txt

@@ -0,0 +1 @@
+DELETE ME!

packages/components/package.json

@@ -18,6 +18,7 @@
   "author": "HashiCorp Design Systems <design-systems@hashicorp.com>",
   "scripts": {
     "build": "rollup --config",
+    "postbuild": "cp -R dist/styles/@hashicorp/design-system-components.css ../../showcase/public/assets/styles/@hashicorp/ && cp -R dist/styles/@hashicorp/design-system-components-common.css ../../showcase/public/assets/styles/@hashicorp/ && cp -R dist/styles/@hashicorp/design-system-power-select-overrides.css ../../showcase/public/assets/styles/@hashicorp/",
     "format": "prettier . --cache --write",
     "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto",
     "lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\" --prefixColors auto && pnpm run format",
@@ -30,7 +31,10 @@
     "lint:js:fix": "eslint . --fix",
     "lint:types": "glint",
     "start": "rollup --config --watch --environment development",
-    "prepublishOnly": "pnpm build && test -f 'dist/styles/@hashicorp/design-system-components.css' || (echo \"\n\\033[31m⚠️  Error: the pre-compiled CSS file \\`dist/styles/@hashicorp/design-system-components.css\\` was not found\\033[0m\\n\" && exit 1)"
+    "test-f:design-system-components": "test -f 'dist/styles/@hashicorp/design-system-components.css' || (echo \"\n\\033[31m⚠️  Error: the pre-compiled CSS file \\`dist/styles/@hashicorp/design-system-components.css\\` was not found\\033[0m\\n\" && exit 1)",
+    "test-f:design-system-components-common": "test -f 'dist/styles/@hashicorp/design-system-components-common.css' || (echo \"\n\\033[31m⚠️  Error: the pre-compiled CSS file \\`dist/styles/@hashicorp/design-system-components-common.css\\` was not found\\033[0m\\n\" && exit 1)",
+    "test-f:design-system-power-select-overrides": "test -f 'dist/styles/@hashicorp/design-system-power-select-overrides.css' || (echo \"\n\\033[31m⚠️  Error: the pre-compiled CSS file \\`dist/styles/@hashicorp/design-system-power-select-overrides.css\\` was not found\\033[0m\\n\" && exit 1)",
+    "prepublishOnly": "pnpm build && pnpm test-f:design-system-components && pnpm test-f:design-system-components-common && pnpm test-f:design-system-power-select-overrides"
   },
   "dependencies": {
     "@codemirror/commands": "^6.8.0",
@@ -112,7 +116,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 +370,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",
@@ -395,6 +400,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 plugin 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,22 @@ 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-common.scss',
+      outputFile: 'design-system-components-common.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,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>