@vaadin/vaadin-themable-mixin 25.0.0-beta1 → 25.0.0-beta3

package/lumo-injection-mixin.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { LumoInjector } from './src/lumo-injector.js';
+import { getLumoInjectorPropName, LumoInjector } from './src/lumo-injector.js';
 
 /**
  * @type {Set<string>}
@@ -16,7 +16,7 @@ const registeredProperties = new Set();
  * @param {HTMLElement} element
  * @return {DocumentOrShadowRoot}
  */
-function findRoot(element) {
+export function findRoot(element) {
   const root = element.getRootNode();
 
   if (root.host && root.host.constructor.version) {
@@ -36,7 +36,7 @@ export const LumoInjectionMixin = (superClass) =>
     static finalize() {
       super.finalize();
 
-      const propName = this.lumoInjectPropName;
+      const propName = getLumoInjectorPropName(this.lumoInjector);
 
       // Prevent registering same property twice when a class extends
       // another class using this mixin, since `finalize()` is called
@@ -57,12 +57,9 @@ export const LumoInjectionMixin = (superClass) =>
       }
     }
 
-    static get lumoInjectPropName() {
-      return `--_lumo-${this.is}-inject`;
-    }
-
     static get lumoInjector() {
       return {
+        is: this.is,
         includeBaseStyles: false,
       };
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-themable-mixin",
-  "version": "25.0.0-beta1",
+  "version": "25.0.0-beta3",
   "publishConfig": {
     "access": "public"
   },
@@ -33,15 +33,15 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "25.0.0-beta1",
+    "@vaadin/component-base": "25.0.0-beta3",
     "lit": "^3.0.0"
   },
   "devDependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/chai-plugins": "25.0.0-beta1",
-    "@vaadin/test-runner-commands": "25.0.0-beta1",
+    "@vaadin/chai-plugins": "25.0.0-beta3",
+    "@vaadin/test-runner-commands": "25.0.0-beta3",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^21.0.0"
   },
-  "gitHead": "1d20cf54e582d1f2e209126d4586f8b4c01c50e0"
+  "gitHead": "4b2006b0e2f4fc131f5483223b852d34224e7b9a"
 }

package/src/css-property-observer.js

@@ -9,23 +9,22 @@
  *
  * @private
  */
-export class CSSPropertyObserver {
+export class CSSPropertyObserver extends EventTarget {
   #root;
-  #callback;
   #properties = new Set();
   #styleSheet;
   #isConnected = false;
 
-  constructor(root, callback) {
+  constructor(root) {
+    super();
     this.#root = root;
-    this.#callback = callback;
     this.#styleSheet = new CSSStyleSheet();
   }
 
   #handleTransitionEvent(event) {
     const { propertyName } = event;
     if (this.#properties.has(propertyName)) {
-      this.#callback(propertyName);
+      this.dispatchEvent(new CustomEvent('property-changed', { detail: { propertyName } }));
     }
   }
 
@@ -78,4 +77,14 @@ export class CSSPropertyObserver {
   get #rootHost() {
     return this.#root.documentElement ?? this.#root.host;
   }
+
+  /**
+   * Gets or creates the CSSPropertyObserver for the given root.
+   * @param {DocumentOrShadowRoot} root
+   * @returns {CSSPropertyObserver}
+   */
+  static for(root) {
+    root.__cssPropertyObserver ||= new CSSPropertyObserver(root);
+    return root.__cssPropertyObserver;
+  }
 }

package/src/lumo-injector.js

@@ -7,6 +7,10 @@ import { CSSPropertyObserver } from './css-property-observer.js';
 import { injectLumoStyleSheet, removeLumoStyleSheet } from './css-utils.js';
 import { parseStyleSheets } from './lumo-modules.js';
 
+export function getLumoInjectorPropName(lumoInjector) {
+  return `--_lumo-${lumoInjector.is}-inject`;
+}
+
 /**
  * Implements auto-injection of CSS styles from document style sheets
  * into the Shadow DOM of corresponding Vaadin components.
@@ -82,14 +86,13 @@ export class LumoInjector {
 
   constructor(root = document) {
     this.#root = root;
-    this.#cssPropertyObserver = new CSSPropertyObserver(this.#root, (propertyName) => {
-      const tagName = propertyName.match(/^--_lumo-(.*)-inject$/u)?.[1];
-      this.#updateStyleSheet(tagName);
-    });
+    this.handlePropertyChange = this.handlePropertyChange.bind(this);
+    this.#cssPropertyObserver = CSSPropertyObserver.for(root);
+    this.#cssPropertyObserver.addEventListener('property-changed', this.handlePropertyChange);
   }
 
   disconnect() {
-    this.#cssPropertyObserver.disconnect();
+    this.#cssPropertyObserver.removeEventListener('property-changed', this.handlePropertyChange);
     this.#styleSheetsByTag.clear();
     this.#componentsByTag.values().forEach((components) => components.forEach(removeLumoStyleSheet));
   }
@@ -104,7 +107,8 @@ export class LumoInjector {
    * @param {HTMLElement} component
    */
   componentConnected(component) {
-    const { is: tagName, lumoInjectPropName } = component.constructor;
+    const { lumoInjector } = component.constructor;
+    const { is: tagName } = lumoInjector;
 
     this.#componentsByTag.set(tagName, this.#componentsByTag.get(tagName) ?? new Set());
     this.#componentsByTag.get(tagName).add(component);
@@ -118,7 +122,9 @@ export class LumoInjector {
     }
 
     this.#initStyleSheet(tagName);
-    this.#cssPropertyObserver.observe(lumoInjectPropName);
+
+    const propName = getLumoInjectorPropName(lumoInjector);
+    this.#cssPropertyObserver.observe(propName);
   }
 
   /**
@@ -128,12 +134,20 @@ export class LumoInjector {
    * @param {HTMLElement} component
    */
   componentDisconnected(component) {
-    const { is: tagName } = component.constructor;
+    const { is: tagName } = component.constructor.lumoInjector;
     this.#componentsByTag.get(tagName)?.delete(component);
 
     removeLumoStyleSheet(component);
   }
 
+  handlePropertyChange(event) {
+    const { propertyName } = event.detail;
+    const tagName = propertyName.match(/^--_lumo-(.*)-inject$/u)?.[1];
+    if (tagName) {
+      this.#updateStyleSheet(tagName);
+    }
+  }
+
   #initStyleSheet(tagName) {
     this.#styleSheetsByTag.set(tagName, new CSSStyleSheet());
     this.#updateStyleSheet(tagName);

package/src/theme-detector.js

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { CSSPropertyObserver } from './css-property-observer.js';
+
+// Register CSS custom properties for observing theme changes
+CSS.registerProperty({
+  name: '--vaadin-aura-theme',
+  syntax: '<number>',
+  inherits: true,
+  initialValue: '0',
+});
+
+CSS.registerProperty({
+  name: '--vaadin-lumo-theme',
+  syntax: '<number>',
+  inherits: true,
+  initialValue: '0',
+});
+
+/**
+ * Observes a root (Document or ShadowRoot) for which Vaadin theme is currently applied.
+ * Notifies about theme changes by firing a `theme-changed` event.
+ *
+ * WARNING: For internal use only. Do not use this class in custom components.
+ *
+ * @private
+ */
+export class ThemeDetector extends EventTarget {
+  /** @type {DocumentOrShadowRoot} */
+  #root;
+  /** @type {CSSPropertyObserver} */
+  #observer;
+  /** @type {{ aura: boolean; lumo: boolean }} */
+  #themes = { aura: false, lumo: false };
+  /** @type {(event: CustomEvent) => void} */
+  #boundHandleThemeChange = this.#handleThemeChange.bind(this);
+
+  constructor(root) {
+    super();
+    this.#root = root;
+    this.#detectTheme();
+
+    this.#observer = CSSPropertyObserver.for(this.#root);
+    this.#observer.observe('--vaadin-aura-theme');
+    this.#observer.observe('--vaadin-lumo-theme');
+    this.#observer.addEventListener('property-changed', this.#boundHandleThemeChange);
+  }
+
+  get themes() {
+    return { ...this.#themes };
+  }
+
+  #handleThemeChange(event) {
+    const { propertyName } = event.detail;
+    if (!['--vaadin-aura-theme', '--vaadin-lumo-theme'].includes(propertyName)) {
+      return;
+    }
+
+    this.#detectTheme();
+    this.dispatchEvent(new CustomEvent('theme-changed'));
+  }
+
+  #detectTheme() {
+    const rootElement = this.#root.documentElement ?? this.#root.host;
+    const style = getComputedStyle(rootElement);
+    this.#themes = {
+      aura: style.getPropertyValue('--vaadin-aura-theme').trim() === '1',
+      lumo: style.getPropertyValue('--vaadin-lumo-theme').trim() === '1',
+    };
+  }
+
+  disconnect() {
+    this.#observer.removeEventListener('property-changed', this.#boundHandleThemeChange);
+  }
+}

package/vaadin-theme-detection-mixin.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+
+export declare function ThemeDetectionMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ThemeDetectionMixinClass> & T;
+
+export declare class ThemeDetectionMixinClass {}

package/vaadin-theme-detection-mixin.js

@@ -0,0 +1,58 @@
+import { findRoot } from './lumo-injection-mixin.js';
+import { ThemeDetector } from './src/theme-detector.js';
+
+/**
+ * Mixin for detecting which Vaadin theme is applied to the application.
+ * Automatically adds a `data-application-theme` attribute to the host
+ * element with the name of the detected theme (`lumo` or `aura`), which
+ * can be used in component styles to apply theme-specific styling.
+ *
+ * @polymerMixin
+ */
+export const ThemeDetectionMixin = (superClass) =>
+  class ThemeDetectionMixinClass extends superClass {
+    constructor() {
+      super();
+
+      this.__applyDetectedTheme = this.__applyDetectedTheme.bind(this);
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+
+      if (this.isConnected) {
+        const root = findRoot(this);
+        root.__themeDetector = root.__themeDetector || new ThemeDetector(root);
+        this.__themeDetector = root.__themeDetector;
+        this.__themeDetector.addEventListener('theme-changed', this.__applyDetectedTheme);
+        this.__applyDetectedTheme();
+      }
+    }
+
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+
+      if (this.__themeDetector) {
+        this.__themeDetector.removeEventListener('theme-changed', this.__applyDetectedTheme);
+        this.__themeDetector = null;
+      }
+    }
+
+    /** @private */
+    __applyDetectedTheme() {
+      if (!this.__themeDetector) {
+        return;
+      }
+
+      const themes = this.__themeDetector.themes;
+      if (themes.aura) {
+        this.dataset.applicationTheme = 'aura';
+      } else if (themes.lumo) {
+        this.dataset.applicationTheme = 'lumo';
+      } else {
+        delete this.dataset.applicationTheme;
+      }
+    }
+  };