SQUASHED COMMITS CRIS EXPLORATIONS

Author: didoo

packages/components/package.json

@@ -303,6 +303,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/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,40 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+export enum HdsThemeValues {
+  // `auto` means to use the default in the browser (which depends on what the consumer imports as CSS)
+  Auto = 'auto',
+  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;
+
+  getTheme(): HdsThemes {
+    // return localStorage.getItem('hdsCurrentTheme');
+    return this._currentTheme;
+  }
+
+  setTheme(theme: HdsThemes) {
+    console.log('setting HDS theme', 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');
+      } else {
+        rootElement.setAttribute('data-hds-theme', theme);
+      }
+
+      // localStorage.setItem('hdsCurrentTheme', theme);
+      this._currentTheme = theme;
+    }
+  }
+}

packages/components/src/styles/@hashicorp/design-system-components.scss

@@ -3,8 +3,12 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-// these files come from the 'design-system-tokens' package
-@use "tokens";
+// this CSS tokens file comes from the 'design-system-tokens' package
+// @use "tokens" as *;
+// TEMP used to include themed tokens in the standard generated CSS file
+@use "themed-tokens/unified.css" as *;
+
+// these helper files come from the 'design-system-tokens' package (they don't depend on theming)
 @use "helpers/color";
 @use "helpers/elevation";
 @use "helpers/focus-ring";