@exmg/exm-theme 1.1.35 → 1.1.37-alpha.31

package/.rollup.cache/root/repo/packages/exm-theme/dist/config.d.ts

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

package/.rollup.cache/root/repo/packages/exm-theme/dist/config.js

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

package/.rollup.cache/root/repo/packages/exm-theme/dist/index.d.ts

@@ -0,0 +1,28 @@
+import { changeColor, changeColorAndMode, changeColorMode, getCurrentMode, getCurrentSeedColor, getCurrentThemeString, getLastSavedAutoColorMode, isModeDark } from './theme.js';
+import { ThemeChangeColorEvent, ThemeChangeDarkModeEvent, ColorMode } from './types.js';
+import { hctFromHex, hexFromHct } from './material-color-helpers.js';
+export declare const initTheme: (config?: {
+    themeColor?: string;
+    colorMode?: ColorMode;
+}) => void;
+declare global {
+    interface HTMLElementEventMap {
+        'theme-change-color': ThemeChangeColorEvent;
+        'theme-change-mode': ThemeChangeDarkModeEvent;
+    }
+}
+export { ThemeChangeColorEvent, ThemeChangeDarkModeEvent, ColorMode } from './types.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 './theme-mixin.js';
+export { themeCurrentMode } from './theme-signals.js';

package/.rollup.cache/root/repo/packages/exm-theme/dist/index.js

@@ -0,0 +1,70 @@
+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';
+import { hctFromHex, hexFromHct } from './material-color-helpers.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();
+};
+export { ThemeChangeColorEvent, ThemeChangeDarkModeEvent } from './types.js';
+export const ThemeUtils = {
+    changeColor,
+    changeColorAndMode,
+    changeColorMode,
+    getCurrentMode,
+    getCurrentSeedColor,
+    getCurrentThemeString,
+    getLastSavedAutoColorMode,
+    isModeDark,
+    hctFromHex,
+    hexFromHct,
+};
+export { ThemeMixin } from './theme-mixin.js';
+export { themeCurrentMode } from './theme-signals.js';
+//# sourceMappingURL=index.js.map

package/.rollup.cache/root/repo/packages/exm-theme/dist/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/.rollup.cache/root/repo/packages/exm-theme/dist/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/.rollup.cache/root/repo/packages/exm-theme/dist/storage.d.ts

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

package/.rollup.cache/root/repo/packages/exm-theme/dist/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/.rollup.cache/root/repo/packages/exm-theme/dist/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/.rollup.cache/root/repo/packages/exm-theme/dist/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 ExmTheme extends SignalWatcher(base) {
+        connectedCallback() {
+            super.connectedCallback();
+            // Read current mode from local storage
+            themeCurrentMode.value = getCurrentMode() || 'auto';
+        }
+        isDarkMode() {
+            return isModeDark(themeCurrentMode.value);
+        }
+    }
+    return ExmTheme;
+};
+//# sourceMappingURL=theme-mixin.js.map

package/.rollup.cache/root/repo/packages/exm-theme/dist/theme-signals.d.ts

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

package/.rollup.cache/root/repo/packages/exm-theme/dist/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/.rollup.cache/root/repo/packages/exm-theme/dist/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/.rollup.cache/root/repo/packages/exm-theme/dist/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/.rollup.cache/root/repo/packages/exm-theme/dist/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/.rollup.cache/root/repo/packages/exm-theme/dist/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

package/dist/config.js

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

package/dist/index.js

@@ -1,8 +1,11 @@
 import { DEFAULT_THEME_COLOR } from './config.js';
-import { applyTheme } from './material-color-helpers.js';
+import { hexFromHct, hctFromHex, applyTheme } from './material-color-helpers.js';
 import { loadfromStorage } from './storage.js';
-import { changeColor, changeColorAndMode, changeColorMode, getCurrentMode, getCurrentSeedColor, getCurrentThemeString, getLastSavedAutoColorMode, isModeDark, } from './theme.js';
-import { hctFromHex, hexFromHct } from './material-color-helpers.js';
+import { isModeDark, getLastSavedAutoColorMode, getCurrentThemeString, getCurrentSeedColor, getCurrentMode, changeColorMode, changeColorAndMode, changeColor } from './theme.js';
+export { ThemeChangeColorEvent, ThemeChangeDarkModeEvent } from './types.js';
+export { ThemeMixin } from './theme-mixin.js';
+export { themeCurrentMode } from './theme-signals.js';
+
 /**
  * Determines whether to update the theme on page navigation if the mode is
  * 'auto'.
@@ -39,7 +42,7 @@ function setupListeners() {
     });
 }
 // Initializes the theme by applying the theme string from localStorage.
-export const initTheme = (config) => {
+const initTheme = (config) => {
     const { themeColor, colorMode } = config || {};
     const theme = loadfromStorage();
     // Applies the theme string to the document if available.
@@ -52,8 +55,7 @@ export const initTheme = (config) => {
     }
     determinePageNavigationAutoMode();
 };
-export { ThemeChangeColorEvent, ThemeChangeDarkModeEvent } from './types.js';
-export const ThemeUtils = {
+const ThemeUtils = {
     changeColor,
     changeColorAndMode,
     changeColorMode,
@@ -65,6 +67,6 @@ export const ThemeUtils = {
     hctFromHex,
     hexFromHct,
 };
-export { ThemeMixin } from './theme-mixin.js';
-export { themeCurrentMode } from './theme-signals.js';
-//# sourceMappingURL=index.js.map
+
+export { ThemeUtils, initTheme };
+//# sourceMappingURL=index.js.map

package/dist/material-color-helpers.js

@@ -1,11 +1,12 @@
+import { MaterialDynamicColors, Hct, hexFromArgb, argbFromHex, SchemeContent } from '@material/material-color-utilities';
+import { STORAGE_KEY_THEME } from './config.js';
+import { saveToStorage } from './storage.js';
+
 /**
  * @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;
@@ -15,7 +16,7 @@ const setUrlBarColor = (themeString) => {
     }
 };
 // eslint-disable-next-line
-export const applyTheme = (doc, theme) => {
+const applyTheme = (doc, theme) => {
     // eslint-disable-next-line
     let sheet = globalThis[STORAGE_KEY_THEME];
     if (!sheet) {
@@ -76,7 +77,7 @@ const materialColors = {
  * @param value A stringified hex color e.g. '#C01075'
  * @return Material Color Utilities HCT color tuple.
  */
-export function hctFromHex(value) {
+function hctFromHex(value) {
     return Hct.fromInt(argbFromHex(value));
 }
 /**
@@ -88,7 +89,7 @@ export function hctFromHex(value) {
  * @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) {
+function hexFromHct(hue, chroma, tone) {
     const hct = Hct.from(hue, chroma, tone);
     const value = hct.toInt();
     return hexFromArgb(value);
@@ -103,7 +104,7 @@ export function hexFromHct(hue, chroma, tone) {
  * @return A theme object that maps the sys color token to its value (not a
  *     custom property).
  */
-export function themeFromSourceColor(color, isDark) {
+function themeFromSourceColor(color, isDark) {
     const scheme = new SchemeContent(Hct.fromInt(argbFromHex(color)), isDark, 0);
     const theme = {};
     for (const [key, value] of Object.entries(materialColors)) {
@@ -123,7 +124,7 @@ export function themeFromSourceColor(color, isDark) {
  *     used to generate the localstorage name.
  */
 // eslint-disable-next-line
-export function applyMaterialTheme(doc, theme) {
+function applyMaterialTheme(doc, theme) {
     let styleString = ':root,:host{';
     for (const [key, value] of Object.entries(theme)) {
         styleString += `--md-sys-color-${key}:${value};`;
@@ -131,4 +132,6 @@ export function applyMaterialTheme(doc, theme) {
     styleString += '}';
     applyTheme(doc, styleString);
 }
-//# sourceMappingURL=material-color-helpers.js.map
+
+export { applyMaterialTheme, applyTheme, hctFromHex, hexFromHct, themeFromSourceColor };
+//# sourceMappingURL=material-color-helpers.js.map

package/dist/storage.js

@@ -1,4 +1,5 @@
 import { STORAGE_KEY_THEME } from './config.js';
+
 // Load the theme string from localStorage.
 const loadfromStorage = () => {
     const theme = localStorage.getItem(STORAGE_KEY_THEME);
@@ -8,5 +9,6 @@ const loadfromStorage = () => {
 const saveToStorage = (theme) => {
     localStorage.setItem(STORAGE_KEY_THEME, theme);
 };
+
 export { loadfromStorage, saveToStorage };
-//# sourceMappingURL=storage.js.map
+//# sourceMappingURL=storage.js.map

package/dist/theme-mixin.js

@@ -1,10 +1,9 @@
-import { LitElement } from 'lit';
+import '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) => {
+
+const ThemeMixin = (base) => {
     // eslint-disable-next-line
     class ExmTheme extends SignalWatcher(base) {
         connectedCallback() {
@@ -18,4 +17,6 @@ export const ThemeMixin = (base) => {
     }
     return ExmTheme;
 };
-//# sourceMappingURL=theme-mixin.js.map
+
+export { ThemeMixin };
+//# sourceMappingURL=theme-mixin.js.map

package/dist/theme-signals.js

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

package/dist/theme.js

@@ -1,6 +1,7 @@
 import { STORAGE_KEY_THEME } from './config.js';
 import { themeCurrentMode } from './theme-signals.js';
-import { applyMaterialTheme, themeFromSourceColor } from './material-color-helpers.js';
+import { themeFromSourceColor, applyMaterialTheme } 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
@@ -26,7 +27,7 @@ function applyThemeFromColor(color, isDark) {
  *     is dark or not. Defaults to true.
  * @return Whether or not the dark mode color tokens should apply.
  */
-export function isModeDark(mode, saveAutoMode = true) {
+function isModeDark(mode, saveAutoMode = true) {
     let isDark = mode === 'dark';
     // Determines whether the auto mode should display light or dark.
     if (mode === 'auto') {
@@ -45,7 +46,7 @@ export function isModeDark(mode, saveAutoMode = true) {
  *
  * @return The current stringified material theme css string.
  */
-export function getCurrentThemeString() {
+function getCurrentThemeString() {
     return localStorage.getItem(STORAGE_KEY_THEME);
 }
 /**
@@ -53,7 +54,7 @@ export function getCurrentThemeString() {
  *
  * @return The current color mode.
  */
-export function getCurrentMode() {
+function getCurrentMode() {
     return localStorage.getItem('color-mode');
 }
 /**
@@ -61,7 +62,7 @@ export function getCurrentMode() {
  *
  * @param mode The color mode to save to localstorage.
  */
-export function saveColorMode(mode) {
+function saveColorMode(mode) {
     themeCurrentMode.value = mode;
     localStorage.setItem('color-mode', mode);
 }
@@ -70,7 +71,7 @@ export function saveColorMode(mode) {
  *
  * @return The current seed color.
  */
-export function getCurrentSeedColor() {
+function getCurrentSeedColor() {
     return localStorage.getItem('seed-color');
 }
 /**
@@ -78,7 +79,7 @@ export function getCurrentSeedColor() {
  *
  * @param color The seed color to save to local storage.
  */
-export function saveSeedColor(color) {
+function saveSeedColor(color) {
     localStorage.setItem('seed-color', color);
 }
 /**
@@ -86,7 +87,7 @@ export function saveSeedColor(color) {
  *
  * @return The last applied color mode while in "auto".
  */
-export function getLastSavedAutoColorMode() {
+function getLastSavedAutoColorMode() {
     return localStorage.getItem('last-auto-color-mode');
 }
 /**
@@ -95,7 +96,7 @@ export function getLastSavedAutoColorMode() {
  * @param mode The last applied color mode while in "auto" to be saved to local
  *     storage.
  */
-export function saveLastSavedAutoColorMode(mode) {
+function saveLastSavedAutoColorMode(mode) {
     localStorage.setItem('last-auto-color-mode', mode);
 }
 /**
@@ -103,7 +104,7 @@ export function saveLastSavedAutoColorMode(mode) {
  *
  * @param color The new source color from which to generate the new theme.
  */
-export function changeColor(color) {
+function changeColor(color) {
     const lastColorMode = getCurrentMode();
     const isDark = isModeDark(lastColorMode);
     applyThemeFromColor(color, isDark);
@@ -114,7 +115,7 @@ export function changeColor(color) {
  *
  * @param mode The new color mode from which to generate the new theme.
  */
-export function changeColorMode(mode) {
+function changeColorMode(mode) {
     const color = getCurrentSeedColor();
     const isDark = isModeDark(mode);
     applyThemeFromColor(color, isDark);
@@ -127,10 +128,12 @@ export function changeColorMode(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) {
+function changeColorAndMode(color, mode) {
     const isDark = isModeDark(mode);
     applyThemeFromColor(color, isDark);
     saveSeedColor(color);
     saveColorMode(mode);
 }
-//# sourceMappingURL=theme.js.map
+
+export { changeColor, changeColorAndMode, changeColorMode, getCurrentMode, getCurrentSeedColor, getCurrentThemeString, getLastSavedAutoColorMode, isModeDark, saveColorMode, saveLastSavedAutoColorMode, saveSeedColor };
+//# sourceMappingURL=theme.js.map

package/dist/types.js

@@ -1,7 +1,7 @@
 /**
  * Requests the global theme listener change the theme due to a color change.
  */
-export class ThemeChangeColorEvent extends Event {
+class ThemeChangeColorEvent extends Event {
     /**
      * @param color The new source color to apply.
      */
@@ -14,7 +14,7 @@ export class ThemeChangeColorEvent extends Event {
  * Requests the global theme listener change the theme due to a dark mode
  * change.
  */
-export class ThemeChangeDarkModeEvent extends Event {
+class ThemeChangeDarkModeEvent extends Event {
     /**
      * @param mode The new color mode to apply.
      */
@@ -23,4 +23,6 @@ export class ThemeChangeDarkModeEvent extends Event {
         this.mode = mode;
     }
 }
-//# sourceMappingURL=types.js.map
+
+export { ThemeChangeColorEvent, ThemeChangeDarkModeEvent };
+//# sourceMappingURL=types.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-theme",
-  "version": "1.1.35",
+  "version": "1.1.37-alpha.31+513140a",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -38,5 +38,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1e671cd5dd060b682c8d9bb8c8a519a690c87782"
+  "gitHead": "513140a59e3a5a9a0fa572147ba6c0cf9801816e"
 }