@hashicorp/design-system-components 6.2.0 → 6.3.0-rc-20260514101332

package/dist/services/hds-theming.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hds-theming.js","sources":["../../src/services/hds-theming.ts"],"sourcesContent":["import Service from '@ember/service';\nimport { tracked } from '@glimmer/tracking';\n\nexport enum HdsThemeValues {\n  // default (original HDS)\n  Default = 'default',\n  // system settings (prefers-color-scheme)\n  System = 'system',\n  // user settings for dark/light\n  Light = 'light',\n  Dark = 'dark',\n}\n\nexport enum HdsModesBaseValues {\n  Default = 'default',\n}\n\nexport enum HdsModesLightValues {\n  CdsG0 = 'cds-g0',\n  CdsG10 = 'cds-g10',\n}\n\nexport enum HdsModesDarkValues {\n  CdsG90 = 'cds-g90',\n  CdsG100 = 'cds-g100',\n}\n\nexport type HdsThemes = `${HdsThemeValues}`;\nexport type HdsModes =\n  | `${HdsModesBaseValues}`\n  | `${HdsModesLightValues}`\n  | `${HdsModesDarkValues}`;\nexport type HdsModesLight = `${HdsModesLightValues}`;\nexport type HdsModesDark = `${HdsModesDarkValues}`;\n\nexport type HdsThemingOptions = {\n  lightTheme: HdsModesLight;\n  darkTheme: HdsModesDark;\n};\n\nexport type HdsSetThemeArgs = {\n  theme: HdsThemes | undefined;\n  options?: HdsThemingOptions;\n  onSetTheme?: HdsOnSetThemeCallback;\n};\n\nexport type HdsOnSetThemeCallbackArgs = {\n  currentTheme: HdsThemes | undefined;\n  currentMode: HdsModes | undefined;\n};\n\nexport type HdsOnSetThemeCallback = (args: HdsOnSetThemeCallbackArgs) => void;\n\nexport const THEMES: HdsThemes[] = Object.values(HdsThemeValues);\nexport const MODES_LIGHT: HdsModesLight[] = Object.values(HdsModesLightValues);\nexport const MODES_DARK: HdsModesDark[] = Object.values(HdsModesDarkValues);\nexport const MODES: HdsModes[] = [\n  ...Object.values(HdsModesBaseValues),\n  ...MODES_LIGHT,\n  ...MODES_DARK,\n];\n\nexport const DEFAULT_THEMING_OPTION_LIGHT_THEME = HdsModesLightValues.CdsG0;\nexport const DEFAULT_THEMING_OPTION_DARK_THEME = HdsModesDarkValues.CdsG100;\n\nexport default class HdsThemingService extends Service {\n  @tracked _currentTheme: HdsThemes | undefined = undefined;\n  @tracked _currentMode: HdsModes | undefined = undefined;\n  @tracked _currentLightTheme: HdsModesLight =\n    DEFAULT_THEMING_OPTION_LIGHT_THEME;\n  @tracked _currentDarkTheme: HdsModesDark = DEFAULT_THEMING_OPTION_DARK_THEME;\n\n  setTheme({ theme, options, onSetTheme }: HdsSetThemeArgs) {\n    if (options !== undefined) {\n      // if we have new options, we override the current ones (`lightTheme` / `darkTheme`)\n      // these options can be used by consumers that want to customize how they apply theming\n      // (and used by the showcase for the custom theming / theme switching logic)\n      if (\n        Object.hasOwn(options, 'lightTheme') &&\n        Object.hasOwn(options, 'darkTheme')\n      ) {\n        const { lightTheme, darkTheme } = options;\n\n        this._currentLightTheme = lightTheme;\n        this._currentDarkTheme = darkTheme;\n      } else {\n        // fallback if something goes wrong\n        this._currentLightTheme = DEFAULT_THEMING_OPTION_LIGHT_THEME;\n        this._currentDarkTheme = DEFAULT_THEMING_OPTION_DARK_THEME;\n      }\n    }\n\n    // set the current theme/mode (`currentTheme` / `currentMode`)\n    if (\n      theme === undefined || // standard (no theming)\n      !THEMES.includes(theme) // handle possible errors\n    ) {\n      this._currentTheme = undefined;\n      this._currentMode = undefined;\n    } else if (\n      theme === HdsThemeValues.Default // default (original HDS)\n    ) {\n      this._currentTheme = HdsThemeValues.Default;\n      this._currentMode = undefined;\n    } else if (\n      theme === HdsThemeValues.System // system (prefers-color-scheme)\n    ) {\n      this._currentTheme = HdsThemeValues.System;\n      this._currentMode = undefined;\n    } else {\n      this._currentTheme = theme;\n      if (this._currentTheme === HdsThemeValues.Light) {\n        this._currentMode = this._currentLightTheme;\n      }\n      if (this._currentTheme === HdsThemeValues.Dark) {\n        this._currentMode = this._currentDarkTheme;\n      }\n    }\n\n    // IMPORTANT: for this to work, it needs to be the `<html>` tag (it's the `:root` in CSS)\n    const rootElement = document.querySelector('html');\n\n    if (!rootElement) {\n      return;\n    }\n    // remove or update the CSS selectors applied to the root element (depending on the `theme`/`mode` arguments)\n    const hdsThemingClassesToRemove = Array.from(rootElement.classList).filter(\n      (className) => className.match(/^hds-(theme|mode)/)\n    );\n    rootElement.classList.remove(...hdsThemingClassesToRemove);\n    if (this._currentTheme !== undefined) {\n      rootElement.classList.add(`hds-theme-${this._currentTheme}`);\n    }\n    if (this._currentMode !== undefined) {\n      rootElement.classList.add(`hds-mode-${this._currentMode}`);\n    }\n\n    if (onSetTheme) {\n      onSetTheme({\n        currentTheme: this._currentTheme,\n        currentMode: this._currentMode,\n      });\n    }\n  }\n\n  // getters used for reactivity in the components/services using this service\n\n  get currentTheme(): HdsThemes | undefined {\n    return this._currentTheme;\n  }\n\n  get isCarbonThemeEnabled(): boolean {\n    return [\n      HdsThemeValues.System,\n      HdsThemeValues.Light,\n      HdsThemeValues.Dark,\n    ].includes(this._currentTheme as HdsThemeValues);\n  }\n\n  get currentMode(): HdsModes | undefined {\n    return this._currentMode;\n  }\n\n  get currentLightTheme(): HdsModesLight {\n    return this._currentLightTheme;\n  }\n\n  get currentDarkTheme(): HdsModesDark {\n    return this._currentDarkTheme;\n  }\n}\n"],"names":["HdsThemeValues","HdsModesBaseValues","HdsModesLightValues","HdsModesDarkValues","THEMES","Object","values","MODES_LIGHT","MODES_DARK","MODES","DEFAULT_THEMING_OPTION_LIGHT_THEME","CdsG0","DEFAULT_THEMING_OPTION_DARK_THEME","CdsG100","HdsThemingService","Service","g","prototype","tracked","undefined","i","setTheme","theme","options","onSetTheme","hasOwn","lightTheme","darkTheme","_currentLightTheme","_currentDarkTheme","includes","_currentTheme","_currentMode","Default","System","Light","Dark","rootElement","document","querySelector","hdsThemingClassesToRemove","Array","from","classList","filter","className","match","remove","add","currentTheme","currentMode","isCarbonThemeEnabled","currentLightTheme","currentDarkTheme"],"mappings":"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"}

package/dist/services.js

@@ -1,2 +1,2 @@
-
+export { DEFAULT_THEMING_OPTION_DARK_THEME, DEFAULT_THEMING_OPTION_LIGHT_THEME, HdsModesBaseValues, HdsModesDarkValues, HdsModesLightValues, HdsThemeValues, MODES, MODES_DARK, MODES_LIGHT, THEMES } from './services/hds-theming.js';
 //# sourceMappingURL=services.js.map