@exmg/exm-theme 1.0.0

package/README.md

@@ -0,0 +1,69 @@
+# @exmg/exm-theme
+
+This package is designed for the easy integration and management of material theming. It offers a streamlined process to implement dynamic themes in web components.
+
+[Demo](https://exmg.github.io/exmachina-web-components/demo/?el=exm-tooltip)
+
+## Getting Started: Installation
+
+To incorporate @exmg/exm-theme into your project, use the following command:
+
+```sh
+npm install @exmg/exm-theme
+```
+
+## Example Initialisation
+
+In your main JavaScript file, add the following snippet to initialize the theme. This setup either loads existing theme variables from local storage or generates new ones based on the specified color settings.
+
+Default Initialisation Parameters:
+
+```
+import { initTheme } from '@exmg/exm-theme';
+
+initTheme({ themeColor: 'blue', colorMode: 'dark' });
+```
+
+## Modifying the Theme Color
+
+To change the theme color dynamically, use the following code:
+
+```
+this.dispatchEvent(new ThemeChangeDarkModeEvent('light'));
+```
+
+## Responsive Theme Adjustments
+
+React to changes in theme color or mode using the following implementation:
+
+```
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { ColorMode, ThemeUtils, ThemeMixin } from '@exmg/exm-theme';
+
+@customElement('customer-logo')
+export class CustomerLogo extends ThemeMixin(LitElement) {
+  @state() selectedColorMode: ColorMode | null = null;
+
+  static styles = [
+    css`
+      :host {
+        display: block;
+        margin: 1rem 1rem 0rem;
+      }
+    `,
+  ];
+
+  async firstUpdated() {
+    if (!this.selectedColorMode) {
+      this.selectedColorMode = ThemeUtils.getCurrentMode();
+    }
+  }
+
+  render() {
+    if (!this.selectedColorMode) return nothing;
+    return html`<img src="/demo/demos/exm-navigation/logo-small-${this.isDarkMode() ? 'dark' : 'light'}.svg" />`;
+  }
+}
+
+```

package/index.d.ts

@@ -0,0 +1,18 @@
+export { initTheme } from './src/index.js';
+export { ThemeChangeColorEvent, ThemeChangeDarkModeEvent, ColorMode } from './src/types.js';
+import { changeColor, changeColorAndMode, changeColorMode, getCurrentMode, getCurrentSeedColor, getCurrentThemeString, getLastSavedAutoColorMode, isModeDark } from './src/theme.js';
+import { hctFromHex, hexFromHct } from './src/material-color-helpers.js';
+export declare const ThemeUtils: {
+    changeColor: typeof changeColor;
+    changeColorAndMode: typeof changeColorAndMode;
+    changeColorMode: typeof changeColorMode;
+    getCurrentMode: typeof getCurrentMode;
+    getCurrentSeedColor: typeof getCurrentSeedColor;
+    getCurrentThemeString: typeof getCurrentThemeString;
+    getLastSavedAutoColorMode: typeof getLastSavedAutoColorMode;
+    isModeDark: typeof isModeDark;
+    hctFromHex: typeof hctFromHex;
+    hexFromHct: typeof hexFromHct;
+};
+export { ThemeMixin } from './src/theme-mixin.js';
+export { themeCurrentMode } from './src/theme-signals.js';

package/index.js

@@ -0,0 +1,19 @@
+export { initTheme } from './src/index.js';
+export { ThemeChangeColorEvent, ThemeChangeDarkModeEvent } from './src/types.js';
+import { changeColor, changeColorAndMode, changeColorMode, getCurrentMode, getCurrentSeedColor, getCurrentThemeString, getLastSavedAutoColorMode, isModeDark, } from './src/theme.js';
+import { hctFromHex, hexFromHct } from './src/material-color-helpers.js';
+export const ThemeUtils = {
+    changeColor,
+    changeColorAndMode,
+    changeColorMode,
+    getCurrentMode,
+    getCurrentSeedColor,
+    getCurrentThemeString,
+    getLastSavedAutoColorMode,
+    isModeDark,
+    hctFromHex,
+    hexFromHct,
+};
+export { ThemeMixin } from './src/theme-mixin.js';
+export { themeCurrentMode } from './src/theme-signals.js';
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@exmg/exm-theme",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "index.js",
+  "module": "index.js",
+  "description": "Helper to initialize theme for material components",
+  "contributors": [
+    "Ex Machina Group"
+  ],
+  "keywords": [
+    "web-components",
+    "lit",
+    "theme"
+  ],
+  "files": [
+    "**/*.js",
+    "**/*.d.ts"
+  ],
+  "dependencies": {
+    "@exmg/lit-base": "^2.0.1",
+    "@material/material-color-utilities": "^0.2.7",
+    "lit": "^3.0.0",
+    "tslib": "^2.6.2"
+  },
+  "devDependencies": {
+    "@exmg/lit-cli": "1.1.13"
+  },
+  "homepage": "https://github.com/exmg/exmachina-web-components",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:exmg/exm-web-components.git",
+    "directory": "packages/exm-theme"
+  },
+  "license": "MIT",
+  "scripts": {
+    "tsc": "tsc"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "0907b55c89325d59902b98a64c352bf6e1fc81ff"
+}

package/src/config.d.ts

@@ -0,0 +1,2 @@
+export declare const STORAGE_KEY_THEME = "exm-theme";
+export declare const DEFAULT_THEME_COLOR = "#3284FF";

package/src/config.js

@@ -0,0 +1,3 @@
+export const STORAGE_KEY_THEME = 'exm-theme';
+export const DEFAULT_THEME_COLOR = '#3284FF';
+//# sourceMappingURL=config.js.map

package/src/index.d.ts

@@ -0,0 +1,11 @@
+import { ThemeChangeColorEvent, ThemeChangeDarkModeEvent, ColorMode } from './types.js';
+export declare const initTheme: (config?: {
+    themeColor?: string;
+    colorMode?: ColorMode;
+}) => void;
+declare global {
+    interface HTMLElementEventMap {
+        'theme-change-color': ThemeChangeColorEvent;
+        'theme-change-mode': ThemeChangeDarkModeEvent;
+    }
+}

package/src/index.js

@@ -0,0 +1,54 @@
+import { DEFAULT_THEME_COLOR } from './config.js';
+import { applyTheme } from './material-color-helpers.js';
+import { loadfromStorage } from './storage.js';
+import { changeColor, changeColorAndMode, changeColorMode, getCurrentMode, getCurrentSeedColor, getCurrentThemeString, getLastSavedAutoColorMode, isModeDark, } from './theme.js';
+/**
+ * Determines whether to update the theme on page navigation if the mode is
+ * 'auto'.
+ *
+ * This is necessary in the edge case where the user has set color mode to
+ * 'auto', and the system mode is A. They navigate away from the catalog, and
+ * over time the system mode changes to B. When they navigate back to the
+ * catalog, the mode may be 'auto', but color theme with mode A is saved instead
+ * of B.
+ */
+function determinePageNavigationAutoMode() {
+    if (getCurrentMode() !== 'auto') {
+        return;
+    }
+    const actualColorMode = isModeDark('auto', false) ? 'dark' : 'light';
+    const lastSavedAutoColorMode = getLastSavedAutoColorMode();
+    if (actualColorMode !== lastSavedAutoColorMode) {
+        // Recalculate auto mode with the same theme color.
+        changeColorMode('auto');
+    }
+}
+function setupListeners() {
+    document.body.addEventListener('theme-change-color', (event) => {
+        changeColor(event.color);
+    });
+    document.body.addEventListener('theme-change-mode', (event) => {
+        changeColorMode(event.mode);
+    });
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        if (getCurrentMode() !== 'auto') {
+            return;
+        }
+        changeColor(getCurrentSeedColor());
+    });
+}
+// Initializes the theme by applying the theme string from localStorage.
+export const initTheme = (config) => {
+    const { themeColor, colorMode } = config || {};
+    const theme = loadfromStorage();
+    // Applies the theme string to the document if available.
+    if (theme) {
+        applyTheme(document, theme);
+    }
+    setupListeners();
+    if (!getCurrentThemeString()) {
+        changeColorAndMode(themeColor || DEFAULT_THEME_COLOR, colorMode || 'auto');
+    }
+    determinePageNavigationAutoMode();
+};
+//# sourceMappingURL=index.js.map

package/src/material-color-helpers.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Hct } from '@material/material-color-utilities';
+import type { Theme } from './types.js';
+export declare const applyTheme: (doc: DocumentOrShadowRoot, theme: string) => void;
+/**
+ * Converts a hex value to a HCT tuple.
+ *
+ * @param value A stringified hex color e.g. '#C01075'
+ * @return Material Color Utilities HCT color tuple.
+ */
+export declare function hctFromHex(value: string): Hct;
+/**
+ * Converts a hue chroma and tone to a hex color value clamped in the hex
+ * colorspace.
+ *
+ * @param hue The hue of the color of value [0,360]
+ * @param chroma The chroma of the color of value [0,150]
+ * @param tone The tone of the color of value [0,100]
+ * @return A clamped, stringified hex color value representing the HCT values.
+ */
+export declare function hexFromHct(hue: number, chroma: number, tone: number): string;
+/**
+ * Generates a theme object mapping of kebab-system-color-token to stringified
+ * sRGB hex value in the Material SchemeContent color scheme given a single
+ * color.
+ *
+ * @param color A stringified hex color e.g. '#C01075'
+ * @param isDark Whether or not to generate a dark mode theme.
+ * @return A theme object that maps the sys color token to its value (not a
+ *     custom property).
+ */
+export declare function themeFromSourceColor(color: string, isDark: boolean): Theme;
+/**
+ * Generates a stylesheet string of custom properties from the given theme, and
+ * applies the styles to the given document or shadow root, and caches the value
+ * in memory and localstorage given an optional ssName.
+ *
+ * @param doc Document or ShadowRoot to apply theme.
+ * @param theme A theme object that maps the sys color token to its value
+ *     (output of themeFromSourceColor).
+ * @param ssName Optional global identifier of the constructable stylesheet and
+ *     used to generate the localstorage name.
+ */
+export declare function applyMaterialTheme(doc: DocumentOrShadowRoot, theme: Theme): void;

package/src/material-color-helpers.js

@@ -0,0 +1,134 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { argbFromHex, Hct, hexFromArgb, MaterialDynamicColors, SchemeContent, } from '@material/material-color-utilities';
+import { STORAGE_KEY_THEME } from './config.js';
+import { saveToStorage } from './storage.js';
+// If supported by the browser, sets the theme color in the URL bar.
+const setUrlBarColor = (themeString) => {
+    var _a, _b;
+    const surfaceContainer = (_a = themeString.match(/--md-sys-color-surface-container:(.+?);/)) === null || _a === void 0 ? void 0 : _a[1];
+    if (surfaceContainer) {
+        (_b = document.querySelector('meta[name="theme-color"]')) === null || _b === void 0 ? void 0 : _b.setAttribute('content', surfaceContainer);
+    }
+};
+// eslint-disable-next-line
+export const applyTheme = (doc, theme) => {
+    // eslint-disable-next-line
+    let sheet = globalThis[STORAGE_KEY_THEME];
+    if (!sheet) {
+        sheet = new CSSStyleSheet();
+        // eslint-disable-next-line
+        globalThis[STORAGE_KEY_THEME] = sheet;
+        doc.adoptedStyleSheets.push(sheet);
+    }
+    setUrlBarColor(theme);
+    sheet.replaceSync(theme);
+    saveToStorage(theme);
+};
+/**
+ * A Mapping of color token name to MCU HCT color function generator.
+ */
+const materialColors = {
+    background: MaterialDynamicColors.background,
+    'on-background': MaterialDynamicColors.onBackground,
+    surface: MaterialDynamicColors.surface,
+    'surface-dim': MaterialDynamicColors.surfaceDim,
+    'surface-bright': MaterialDynamicColors.surfaceBright,
+    'surface-container-lowest': MaterialDynamicColors.surfaceContainerLowest,
+    'surface-container-low': MaterialDynamicColors.surfaceContainerLow,
+    'surface-container': MaterialDynamicColors.surfaceContainer,
+    'surface-container-high': MaterialDynamicColors.surfaceContainerHigh,
+    'surface-container-highest': MaterialDynamicColors.surfaceContainerHighest,
+    'on-surface': MaterialDynamicColors.onSurface,
+    'surface-variant': MaterialDynamicColors.surfaceVariant,
+    'on-surface-variant': MaterialDynamicColors.onSurfaceVariant,
+    'inverse-surface': MaterialDynamicColors.inverseSurface,
+    'inverse-on-surface': MaterialDynamicColors.inverseOnSurface,
+    outline: MaterialDynamicColors.outline,
+    'outline-variant': MaterialDynamicColors.outlineVariant,
+    shadow: MaterialDynamicColors.shadow,
+    scrim: MaterialDynamicColors.scrim,
+    'surface-tint': MaterialDynamicColors.surfaceTint,
+    primary: MaterialDynamicColors.primary,
+    'on-primary': MaterialDynamicColors.onPrimary,
+    'primary-container': MaterialDynamicColors.primaryContainer,
+    'on-primary-container': MaterialDynamicColors.onPrimaryContainer,
+    'inverse-primary': MaterialDynamicColors.inversePrimary,
+    secondary: MaterialDynamicColors.secondary,
+    'on-secondary': MaterialDynamicColors.onSecondary,
+    'secondary-container': MaterialDynamicColors.secondaryContainer,
+    'on-secondary-container': MaterialDynamicColors.onSecondaryContainer,
+    tertiary: MaterialDynamicColors.tertiary,
+    'on-tertiary': MaterialDynamicColors.onTertiary,
+    'tertiary-container': MaterialDynamicColors.tertiaryContainer,
+    'on-tertiary-container': MaterialDynamicColors.onTertiaryContainer,
+    error: MaterialDynamicColors.error,
+    'on-error': MaterialDynamicColors.onError,
+    'error-container': MaterialDynamicColors.errorContainer,
+    'on-error-container': MaterialDynamicColors.onErrorContainer,
+};
+/**
+ * Converts a hex value to a HCT tuple.
+ *
+ * @param value A stringified hex color e.g. '#C01075'
+ * @return Material Color Utilities HCT color tuple.
+ */
+export function hctFromHex(value) {
+    return Hct.fromInt(argbFromHex(value));
+}
+/**
+ * Converts a hue chroma and tone to a hex color value clamped in the hex
+ * colorspace.
+ *
+ * @param hue The hue of the color of value [0,360]
+ * @param chroma The chroma of the color of value [0,150]
+ * @param tone The tone of the color of value [0,100]
+ * @return A clamped, stringified hex color value representing the HCT values.
+ */
+export function hexFromHct(hue, chroma, tone) {
+    const hct = Hct.from(hue, chroma, tone);
+    const value = hct.toInt();
+    return hexFromArgb(value);
+}
+/**
+ * Generates a theme object mapping of kebab-system-color-token to stringified
+ * sRGB hex value in the Material SchemeContent color scheme given a single
+ * color.
+ *
+ * @param color A stringified hex color e.g. '#C01075'
+ * @param isDark Whether or not to generate a dark mode theme.
+ * @return A theme object that maps the sys color token to its value (not a
+ *     custom property).
+ */
+export function themeFromSourceColor(color, isDark) {
+    const scheme = new SchemeContent(Hct.fromInt(argbFromHex(color)), isDark, 0);
+    const theme = {};
+    for (const [key, value] of Object.entries(materialColors)) {
+        theme[key] = hexFromArgb(value.getArgb(scheme));
+    }
+    return theme;
+}
+/**
+ * Generates a stylesheet string of custom properties from the given theme, and
+ * applies the styles to the given document or shadow root, and caches the value
+ * in memory and localstorage given an optional ssName.
+ *
+ * @param doc Document or ShadowRoot to apply theme.
+ * @param theme A theme object that maps the sys color token to its value
+ *     (output of themeFromSourceColor).
+ * @param ssName Optional global identifier of the constructable stylesheet and
+ *     used to generate the localstorage name.
+ */
+// eslint-disable-next-line
+export function applyMaterialTheme(doc, theme) {
+    let styleString = ':root,:host{';
+    for (const [key, value] of Object.entries(theme)) {
+        styleString += `--md-sys-color-${key}:${value};`;
+    }
+    styleString += '}';
+    applyTheme(doc, styleString);
+}
+//# sourceMappingURL=material-color-helpers.js.map

package/src/storage.d.ts

@@ -0,0 +1,3 @@
+declare const loadfromStorage: () => string | null;
+declare const saveToStorage: (theme: string) => void;
+export { loadfromStorage, saveToStorage };

package/src/storage.js

@@ -0,0 +1,12 @@
+import { STORAGE_KEY_THEME } from './config.js';
+// Load the theme string from localStorage.
+const loadfromStorage = () => {
+    const theme = localStorage.getItem(STORAGE_KEY_THEME);
+    return theme;
+};
+// Saves the theme string to localStorage.
+const saveToStorage = (theme) => {
+    localStorage.setItem(STORAGE_KEY_THEME, theme);
+};
+export { loadfromStorage, saveToStorage };
+//# sourceMappingURL=storage.js.map

package/src/theme-mixin.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+export type Constructor<T> = new (...args: any[]) => T;
+export declare abstract class ThemeClass extends LitElement {
+}
+export declare class ThemeInterface {
+    isDarkMode(): boolean;
+}
+export declare const ThemeMixin: <T extends Constructor<LitElement & ThemeClass>>(base: T) => Constructor<ThemeInterface> & T;

package/src/theme-mixin.js

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+import { SignalWatcher } from '@lit-labs/preact-signals';
+import { themeCurrentMode } from './theme-signals.js';
+import { getCurrentMode, isModeDark } from './theme.js';
+export class ThemeClass extends LitElement {
+}
+export const ThemeMixin = (base) => {
+    // eslint-disable-next-line
+    class ExmgTheme extends SignalWatcher(base) {
+        connectedCallback() {
+            super.connectedCallback();
+            // Read current mode from local storage
+            themeCurrentMode.value = getCurrentMode() || 'auto';
+        }
+        isDarkMode() {
+            return isModeDark(themeCurrentMode.value);
+        }
+    }
+    return ExmgTheme;
+};
+//# sourceMappingURL=theme-mixin.js.map

package/src/theme-signals.d.ts

@@ -0,0 +1,2 @@
+import { ColorMode } from './types.js';
+export declare const themeCurrentMode: import("@preact/signals-core").Signal<ColorMode>;

package/src/theme-signals.js

@@ -0,0 +1,3 @@
+import { signal } from '@lit-labs/preact-signals';
+export const themeCurrentMode = signal('light');
+//# sourceMappingURL=theme-signals.js.map

package/src/theme.d.ts

@@ -0,0 +1,75 @@
+import type { ColorMode } from './types.js';
+/**
+ * Determines whether or not the mode should be Dark. This also means
+ * calculating whether it should be dark if the current mode is 'auto'.
+ *
+ * @param mode The current color mode 'light', 'dark', or 'auto'.
+ * @param saveAutoMode (Optional) Whether or not to save last auto mode to
+ *     localstorage. Set to false if you simply want to query whether auto mode
+ *     is dark or not. Defaults to true.
+ * @return Whether or not the dark mode color tokens should apply.
+ */
+export declare function isModeDark(mode: ColorMode, saveAutoMode?: boolean): boolean;
+/**
+ * Gets the current stringified material theme css string from localstorage.
+ *
+ * @return The current stringified material theme css string.
+ */
+export declare function getCurrentThemeString(): string | null;
+/**
+ * Gets the current color mode from localstorage.
+ *
+ * @return The current color mode.
+ */
+export declare function getCurrentMode(): ColorMode | null;
+/**
+ * Saves the given color mode to localstorage.
+ *
+ * @param mode The color mode to save to localstorage.
+ */
+export declare function saveColorMode(mode: ColorMode): void;
+/**
+ * Gets the current seed color from localstorage.
+ *
+ * @return The current seed color.
+ */
+export declare function getCurrentSeedColor(): string | null;
+/**
+ * Saves the given seed color to localstorage.
+ *
+ * @param color The seed color to save to local storage.
+ */
+export declare function saveSeedColor(color: string): void;
+/**
+ * Gets last applied color mode while in "auto" from localstorage.
+ *
+ * @return The last applied color mode while in "auto".
+ */
+export declare function getLastSavedAutoColorMode(): "light" | "dark" | null;
+/**
+ * Saves last applied color mode while in "auto" from localstorage.
+ *
+ * @param mode The last applied color mode while in "auto" to be saved to local
+ *     storage.
+ */
+export declare function saveLastSavedAutoColorMode(mode: 'light' | 'dark'): void;
+/**
+ * Generates and applies a new theme due to a change in source color.
+ *
+ * @param color The new source color from which to generate the new theme.
+ */
+export declare function changeColor(color: string): void;
+/**
+ * Generates and applies a new theme due to a change in color mode.
+ *
+ * @param mode The new color mode from which to generate the new theme.
+ */
+export declare function changeColorMode(mode: ColorMode): void;
+/**
+ * Generates and applies a new theme due to a change in both source color and
+ * color mode.
+ *
+ * @param color The new source color from which to generate the new theme.
+ * @param mode The new color mode from which to generate the new theme.
+ */
+export declare function changeColorAndMode(color: string, mode: ColorMode): void;

package/src/theme.js

@@ -0,0 +1,136 @@
+import { STORAGE_KEY_THEME } from './config.js';
+import { themeCurrentMode } from './theme-signals.js';
+import { applyMaterialTheme, themeFromSourceColor } from './material-color-helpers.js';
+/**
+ * Generates a Material Theme from a given color and dark mode boolean, and
+ * applies the theme to the document and lets the app know that the theme has
+ * changed.
+ *
+ * @param color The source color to generate the theme.
+ * @param isDark Whether or not the theme should be in dark mode.
+ */
+function applyThemeFromColor(color, isDark) {
+    const theme = themeFromSourceColor(color, isDark);
+    applyMaterialTheme(document, theme);
+    // Dispatches event to communicate with components pages' JS to update the
+    // theme in the playground preview.
+    window.dispatchEvent(new Event('theme-changed'));
+}
+/**
+ * Determines whether or not the mode should be Dark. This also means
+ * calculating whether it should be dark if the current mode is 'auto'.
+ *
+ * @param mode The current color mode 'light', 'dark', or 'auto'.
+ * @param saveAutoMode (Optional) Whether or not to save last auto mode to
+ *     localstorage. Set to false if you simply want to query whether auto mode
+ *     is dark or not. Defaults to true.
+ * @return Whether or not the dark mode color tokens should apply.
+ */
+export function isModeDark(mode, saveAutoMode = true) {
+    let isDark = mode === 'dark';
+    // Determines whether the auto mode should display light or dark.
+    if (mode === 'auto') {
+        isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        if (saveAutoMode) {
+            // We have to save this because if the user closes the tab when it's light
+            // and reopens it when it's dark, we need to know whether the last applied
+            // 'auto' mode was correct.
+            saveLastSavedAutoColorMode(isDark ? 'dark' : 'light');
+        }
+    }
+    return isDark;
+}
+/**
+ * Gets the current stringified material theme css string from localstorage.
+ *
+ * @return The current stringified material theme css string.
+ */
+export function getCurrentThemeString() {
+    return localStorage.getItem(STORAGE_KEY_THEME);
+}
+/**
+ * Gets the current color mode from localstorage.
+ *
+ * @return The current color mode.
+ */
+export function getCurrentMode() {
+    return localStorage.getItem('color-mode');
+}
+/**
+ * Saves the given color mode to localstorage.
+ *
+ * @param mode The color mode to save to localstorage.
+ */
+export function saveColorMode(mode) {
+    themeCurrentMode.value = mode;
+    localStorage.setItem('color-mode', mode);
+}
+/**
+ * Gets the current seed color from localstorage.
+ *
+ * @return The current seed color.
+ */
+export function getCurrentSeedColor() {
+    return localStorage.getItem('seed-color');
+}
+/**
+ * Saves the given seed color to localstorage.
+ *
+ * @param color The seed color to save to local storage.
+ */
+export function saveSeedColor(color) {
+    localStorage.setItem('seed-color', color);
+}
+/**
+ * Gets last applied color mode while in "auto" from localstorage.
+ *
+ * @return The last applied color mode while in "auto".
+ */
+export function getLastSavedAutoColorMode() {
+    return localStorage.getItem('last-auto-color-mode');
+}
+/**
+ * Saves last applied color mode while in "auto" from localstorage.
+ *
+ * @param mode The last applied color mode while in "auto" to be saved to local
+ *     storage.
+ */
+export function saveLastSavedAutoColorMode(mode) {
+    localStorage.setItem('last-auto-color-mode', mode);
+}
+/**
+ * Generates and applies a new theme due to a change in source color.
+ *
+ * @param color The new source color from which to generate the new theme.
+ */
+export function changeColor(color) {
+    const lastColorMode = getCurrentMode();
+    const isDark = isModeDark(lastColorMode);
+    applyThemeFromColor(color, isDark);
+    saveSeedColor(color);
+}
+/**
+ * Generates and applies a new theme due to a change in color mode.
+ *
+ * @param mode The new color mode from which to generate the new theme.
+ */
+export function changeColorMode(mode) {
+    const color = getCurrentSeedColor();
+    const isDark = isModeDark(mode);
+    applyThemeFromColor(color, isDark);
+    saveColorMode(mode);
+}
+/**
+ * Generates and applies a new theme due to a change in both source color and
+ * color mode.
+ *
+ * @param color The new source color from which to generate the new theme.
+ * @param mode The new color mode from which to generate the new theme.
+ */
+export function changeColorAndMode(color, mode) {
+    const isDark = isModeDark(mode);
+    applyThemeFromColor(color, isDark);
+    saveSeedColor(color);
+    saveColorMode(mode);
+}
+//# sourceMappingURL=theme.js.map

package/src/types.d.ts

@@ -0,0 +1,32 @@
+export type WithStylesheet = typeof globalThis & {
+    [stylesheetName: string]: CSSStyleSheet | undefined;
+};
+export type ColorMode = 'light' | 'dark' | 'auto';
+/**
+ * A theme mapping of token name (not custom property name) to stringified CSS
+ * value.
+ */
+export interface Theme {
+    [tokenName: string]: string;
+}
+/**
+ * Requests the global theme listener change the theme due to a color change.
+ */
+export declare class ThemeChangeColorEvent extends Event {
+    color: string;
+    /**
+     * @param color The new source color to apply.
+     */
+    constructor(color: string);
+}
+/**
+ * Requests the global theme listener change the theme due to a dark mode
+ * change.
+ */
+export declare class ThemeChangeDarkModeEvent extends Event {
+    mode: 'light' | 'dark' | 'auto';
+    /**
+     * @param mode The new color mode to apply.
+     */
+    constructor(mode: 'light' | 'dark' | 'auto');
+}

package/src/types.js

@@ -0,0 +1,26 @@
+/**
+ * Requests the global theme listener change the theme due to a color change.
+ */
+export class ThemeChangeColorEvent extends Event {
+    /**
+     * @param color The new source color to apply.
+     */
+    constructor(color) {
+        super('theme-change-color', { bubbles: true, composed: true });
+        this.color = color;
+    }
+}
+/**
+ * Requests the global theme listener change the theme due to a dark mode
+ * change.
+ */
+export class ThemeChangeDarkModeEvent extends Event {
+    /**
+     * @param mode The new color mode to apply.
+     */
+    constructor(mode) {
+        super('theme-change-mode', { bubbles: true, composed: true });
+        this.mode = mode;
+    }
+}
+//# sourceMappingURL=types.js.map