use theme detection mixin to automatically apply Lumo theme

Author: sissbruecker

README.md

@@ -37,8 +37,7 @@ Add `<vcf-breadcrumbs>` element to the page. Inside added element add few `<vcf-
 
 ## Updates since version 3.0.0
 
-By default, the component uses a minimal set of functional styles that provide a foundation for a custom theme.
-To use the component with the Vaadin Lumo theme, import the component's Lumo theme from `@vaadin-component-factory/vcf-breadcrumb/theme/lumo.css`.
+When the application does not load the Aura or Lumo theme, the component uses a minimal set of functional styles that provide a foundation for a custom theme.
 
 `ThemableMixin` has been removed from the component, and injecting styles into the component's shadow root using `registerStyles` is no longer supported.
 Use global CSS to style the component using part names and CSS variables instead.

demo/index.html

@@ -7,7 +7,6 @@
     <script dev src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
     <script dev type="module" src="demo.js"></script>
     <link rel="stylesheet" href="/node_modules/@vaadin/vaadin-lumo-styles/lumo.css" />
-    <link rel="stylesheet" href="/theme/lumo.css" />
     <custom-style>
       <style is="custom-style" include="demo-pages-shared-styles">
         .centered {

package.json

@@ -44,9 +44,10 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@vaadin/component-base": "^25.0.0-beta1",
-    "@vaadin/popover": "^25.0.0-beta1",
-    "@vaadin/vertical-layout": "^25.0.0-beta1",
+    "@vaadin/component-base": "^25.0.0-beta2",
+    "@vaadin/popover": "^25.0.0-beta2",
+    "@vaadin/vertical-layout": "^25.0.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "^25.0.0-beta2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
@@ -58,7 +59,7 @@
     "@types/jest": "^29.5.14",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "@typescript-eslint/parser": "^5.48.0",
-    "@vaadin/vaadin-lumo-styles": "^25.0.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "^25.0.0-beta2",
     "@web/dev-server": "^0.4.3",
     "@web/test-runner": "^0.19.0",
     "@webcomponents/webcomponentsjs": "^2.0.0",

src/component/vcf-breadcrumb.ts

@@ -16,10 +16,11 @@
  * limitations under the License.
  * #L%
  */
-import { html, LitElement, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement, property } from 'lit/decorators.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemeDetectionMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-detection-mixin.js';
 
 /**
  * A Web Component for individual breadcrumb items in a breadcrumb navigation system.
@@ -42,10 +43,11 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
  * @name vcf-breadcrumb
  * @mixes ElementMixin
  * @mixes PolylitMixin
+ * @mixes ThemeDetectionMixin
  * @demo demo/index.html
  */
 @customElement("vcf-breadcrumb")
-class VcfBreadcrumb extends ElementMixin(PolylitMixin(LitElement)) {
+class VcfBreadcrumb extends ThemeDetectionMixin(ElementMixin(PolylitMixin(LitElement))) {
 
   @property({ type: String, reflect: true }) 
   href = '';
@@ -72,7 +74,7 @@ class VcfBreadcrumb extends ElementMixin(PolylitMixin(LitElement)) {
   }
 
   static get styles() {
-    return [css`
+    return css`
         :host {
           display: flex;
           align-items: center;
@@ -142,7 +144,27 @@ class VcfBreadcrumb extends ElementMixin(PolylitMixin(LitElement)) {
           margin: var(--vcf-breadcrumb-separator-margin);
           color: inherit;
         }
-    `];
+
+        /* Lumo theme */
+        :host([data-application-theme='lumo']) {
+          --vcf-breadcrumb-separator-font-family: 'lumo-icons';
+          --vcf-breadcrumb-separator-symbol: var(--lumo-icons-angle-right);
+          --vcf-breadcrumb-separator-color: var(--lumo-contrast-40pct);
+          --vcf-breadcrumb-separator-size: var(--lumo-font-size-s);
+          --vcf-breadcrumb-separator-margin: 0;
+          --vcf-breadcrumb-separator-padding: 0 var(--lumo-space-xs);
+          --vcf-breadcrumb-mobile-back-symbol: var(--lumo-icons-angle-left);
+          --vcf-breadcrumb-link-focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+
+          font-family: var(--lumo-font-family);
+          font-size: var(--lumo-font-size-m);
+        }
+
+        :host([data-application-theme='lumo']) ::slotted(a[slot="link-slot"]:not(:any-link)) {
+          /* Lumo global styles use disabled color for anchors without href, force base text color instead */
+          color: var(--lumo-body-text-color) !important;
+        }
+    `;
   }
 
   _createAnchor() {