From d811cc0bd87ffd7b265cb92f7b5e0f04acbd8843 Mon Sep 17 00:00:00 2001
From: Martin Lopez <mlopez@flowingcode.com>
Date: Sat, 6 Dec 2025 15:21:21 -0300
Subject: [PATCH] feat: add initial lumo variables support

Closes #28
---
 dev/index.html      | 37 ++++++++++++++---
 package-lock.json   | 98 ++++++++++++++++++++++++---------------------
 package.json        |  5 ++-
 src/fc-applayout.ts | 66 +++++++++++++++++++++---------
 4 files changed, 132 insertions(+), 74 deletions(-)

diff --git a/dev/index.html b/dev/index.html
index df5b749..7241672 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -8,6 +8,11 @@
     <script type="module" src="../fc-applayout.js"></script>
     <script type="module" src="../node_modules/@vaadin/vertical-layout/vaadin-vertical-layout.js"></script>
     <script type="module" src="../node_modules/@polymer/paper-card/paper-card.js"></script>
+    <script type="module">
+      // Import Lumo theme at document level for dark mode support
+      import '@vaadin/vaadin-lumo-styles/color-global.js';
+      import '@vaadin/vaadin-lumo-styles/typography-global.js';
+    </script>
     <style>
       p {
         border: solid 1px blue;
@@ -16,9 +21,10 @@
 
       html, body {
         margin: 0;
-        font-family: 'Roboto', 'Noto', sans-serif;
+        font-family: var(--lumo-font-family);
         -webkit-font-smoothing: antialiased;
-        background: #f1f1f1;
+        background: var(--lumo-base-color);
+        color: var(--lumo-body-text-color);
         max-height: 368px;
         max-width: 100%;
       }
@@ -33,9 +39,6 @@
 
       app-drawer {
         --app-drawer-scrim-background: rgba(0, 0, 100, 0.8);
-        --app-drawer-content-container: {
-              background-color: #F1F1F1;
-            }
         z-index: 1001;
       }
 
@@ -56,6 +59,7 @@
 
       .hamlet {
         user-select: none;
+        color: black;
       }
 
       .hamlet paper-card {
@@ -67,7 +71,10 @@
         background: rgb(220,248,198);
       }
 
-      .hamlet paper-card h5 {margin-top: 0.25em}
+      .hamlet paper-card h5 {
+        margin-top: 0.25em;
+        color: black;
+      }
 
       .hamlet paper-card[elevation="0"] {
         background: rgb(254,244,197);
@@ -97,6 +104,7 @@ <h4 slot="profile">User</h4>
       <img slot="title" class="applogo" src="./applogo.png" alt="applogo">
       <div slot="title" main-title="">AppLayout Vaadin 14 Demo</div>
       <paper-icon-button disabled slot="toolbar" icon="block" role="button" tabindex="0" aria-disabled="false"></paper-icon-button>
+      <paper-icon-button id="darkModeToggle" slot="toolbar" icon="invert-colors" title="Toggle Dark Mode" role="button" tabindex="0" aria-disabled="false"></paper-icon-button>
       <paper-icon-button slot="toolbar" icon="settings" title="Settings" role="button" tabindex="0" aria-disabled="false"></paper-icon-button>
       <div slot="menu">
         <p onclick="this.dispatchEvent(new CustomEvent('item-clicked', {bubbles: true}))">This is menu</p>
@@ -150,5 +158,22 @@ <h4 slot="profile">User</h4>
         Howe'er my haps, my joys were ne'er begun. </span></div></div></paper-card><paper-card elevation="0" aria-label=""><div class="card-content"><span>Claudius exits</span></div></paper-card></vaadin-vertical-layout>
       </div>
     </fc-applayout>
+    <script>
+      // Dark mode toggle functionality
+      document.addEventListener('DOMContentLoaded', () => {
+        const darkModeToggle = document.getElementById('darkModeToggle');
+
+        if (darkModeToggle) {
+          darkModeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('theme');
+            if (currentTheme === 'dark') {
+              document.documentElement.removeAttribute('theme');
+            } else {
+              document.documentElement.setAttribute('theme', 'dark');
+            }
+          });
+        }
+      });
+    </script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
index 072914f..0e24398 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@flowingcode/fc-applayout",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@flowingcode/fc-applayout",
-      "version": "1.3.0",
+      "version": "1.4.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@flowingcode/fc-applayout": "^1.0.0",
@@ -16,7 +16,8 @@
         "@polymer/paper-card": "^3.0.1",
         "@polymer/paper-icon-button": "^3.0.2",
         "@polymer/paper-listbox": "^3.0.1",
-        "@vaadin/vaadin-themable-mixin": "24.3.8",
+        "@vaadin/vaadin-lumo-styles": "24.3.11",
+        "@vaadin/vaadin-themable-mixin": "24.3.11",
         "lit": "^3.1.2"
       },
       "devDependencies": {
@@ -3339,10 +3340,10 @@
       "dev": true
     },
     "node_modules/@vaadin/component-base": {
-      "version": "24.3.11",
-      "resolved": "https://registry.npmjs.org/@vaadin/component-base/-/component-base-24.3.11.tgz",
-      "integrity": "sha512-90jec9d8tFzP1OdoMQhD79hKE7DHlLnbE7lmSk1FyKHU30z95TxAsdqCDfv1+QNur8ahqPUvQ8CzBEBsi6gpKg==",
-      "dev": true,
+      "version": "24.3.22",
+      "resolved": "https://registry.npmjs.org/@vaadin/component-base/-/component-base-24.3.22.tgz",
+      "integrity": "sha512-7BPgiDw1icpk9Ngw4uhsfIOqWRc6beeJnDpnyIOKoaLZUtoQOwNx1IQdH7mwwyEevbi86585JP/LS6p5k1dSLw==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@open-wc/dedupe-mixin": "^1.3.0",
         "@polymer/polymer": "^3.0.0",
@@ -3352,24 +3353,36 @@
       }
     },
     "node_modules/@vaadin/icon": {
-      "version": "24.3.11",
-      "resolved": "https://registry.npmjs.org/@vaadin/icon/-/icon-24.3.11.tgz",
-      "integrity": "sha512-+ZLauTjROVi1WzU1gdcBWsusgDv/yf2cDg3yVpdrcrFCH6hVd/QJgoDFg6q8Cb/ro0KGCDueTQtVUQUNnxuweg==",
-      "dev": true,
+      "version": "24.3.22",
+      "resolved": "https://registry.npmjs.org/@vaadin/icon/-/icon-24.3.22.tgz",
+      "integrity": "sha512-zx6hzSBEtJthl4CS9AmOQIlvGeO+0913KebcmvJ/GV9SAF54nZNSo6KGVE5Njp7W32h1lSzPTw89O5Pre2Cjqg==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@open-wc/dedupe-mixin": "^1.3.0",
         "@polymer/polymer": "^3.0.0",
-        "@vaadin/component-base": "~24.3.11",
-        "@vaadin/vaadin-lumo-styles": "~24.3.11",
-        "@vaadin/vaadin-themable-mixin": "~24.3.11",
+        "@vaadin/component-base": "~24.3.22",
+        "@vaadin/vaadin-lumo-styles": "~24.3.22",
+        "@vaadin/vaadin-themable-mixin": "~24.3.22",
         "lit": "^3.0.0"
       }
     },
+    "node_modules/@vaadin/icon/node_modules/@vaadin/vaadin-lumo-styles": {
+      "version": "24.3.22",
+      "resolved": "https://registry.npmjs.org/@vaadin/vaadin-lumo-styles/-/vaadin-lumo-styles-24.3.22.tgz",
+      "integrity": "sha512-uHEtzfk8u2k5iTknIaOhbIEHH6VcuiLZeFs7p4V9a01E5KkBcBFlOPY3hMgPua3yPVJKDNCmK1lzG8Qt/IrArg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@polymer/polymer": "^3.0.0",
+        "@vaadin/component-base": "~24.3.22",
+        "@vaadin/icon": "~24.3.22",
+        "@vaadin/vaadin-themable-mixin": "~24.3.22"
+      }
+    },
     "node_modules/@vaadin/icon/node_modules/@vaadin/vaadin-themable-mixin": {
-      "version": "24.3.11",
-      "resolved": "https://registry.npmjs.org/@vaadin/vaadin-themable-mixin/-/vaadin-themable-mixin-24.3.11.tgz",
-      "integrity": "sha512-DTjg4j6QW0k/dlWXrS3djwq1f+iMx0zvpex55GzpFFHE/Ccf7V6IrRgdjCkYxoy+Io7FrEmRmWNrkHwmtve14Q==",
-      "dev": true,
+      "version": "24.3.22",
+      "resolved": "https://registry.npmjs.org/@vaadin/vaadin-themable-mixin/-/vaadin-themable-mixin-24.3.22.tgz",
+      "integrity": "sha512-u+r0UXtCzMoZbR1UKQTPWUZEnkXlxwRuxjpNCAdyumqbFMMHd5yw1/LbXertouzj60CN3SUU1FXLtjCgFOeRXQ==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@open-wc/dedupe-mixin": "^1.3.0",
         "lit": "^3.0.0"
@@ -3378,14 +3391,13 @@
     "node_modules/@vaadin/vaadin-development-mode-detector": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@vaadin/vaadin-development-mode-detector/-/vaadin-development-mode-detector-2.0.6.tgz",
-      "integrity": "sha512-N6a5nLT/ytEUlpPo+nvdCKIGoyNjPsj3rzPGvGYK8x9Ceg76OTe1xI/GtN71mRW9e2HUScR0kCNOkl1Z63YDjw==",
-      "dev": true
+      "integrity": "sha512-N6a5nLT/ytEUlpPo+nvdCKIGoyNjPsj3rzPGvGYK8x9Ceg76OTe1xI/GtN71mRW9e2HUScR0kCNOkl1Z63YDjw=="
     },
     "node_modules/@vaadin/vaadin-lumo-styles": {
       "version": "24.3.11",
       "resolved": "https://registry.npmjs.org/@vaadin/vaadin-lumo-styles/-/vaadin-lumo-styles-24.3.11.tgz",
       "integrity": "sha512-IWfIRMMX6LkgZ097akVzvMrUPp6sS9WThNHlve/8MibAnHTore4av5PDEy7IQwTGs5YrJr0S73+bQXeNYhS7dg==",
-      "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
         "@polymer/polymer": "^3.0.0",
         "@vaadin/component-base": "~24.3.11",
@@ -3393,16 +3405,6 @@
         "@vaadin/vaadin-themable-mixin": "~24.3.11"
       }
     },
-    "node_modules/@vaadin/vaadin-lumo-styles/node_modules/@vaadin/vaadin-themable-mixin": {
-      "version": "24.3.11",
-      "resolved": "https://registry.npmjs.org/@vaadin/vaadin-themable-mixin/-/vaadin-themable-mixin-24.3.11.tgz",
-      "integrity": "sha512-DTjg4j6QW0k/dlWXrS3djwq1f+iMx0zvpex55GzpFFHE/Ccf7V6IrRgdjCkYxoy+Io7FrEmRmWNrkHwmtve14Q==",
-      "dev": true,
-      "dependencies": {
-        "@open-wc/dedupe-mixin": "^1.3.0",
-        "lit": "^3.0.0"
-      }
-    },
     "node_modules/@vaadin/vaadin-material-styles": {
       "version": "24.3.11",
       "resolved": "https://registry.npmjs.org/@vaadin/vaadin-material-styles/-/vaadin-material-styles-24.3.11.tgz",
@@ -3414,20 +3416,11 @@
         "@vaadin/vaadin-themable-mixin": "~24.3.11"
       }
     },
-    "node_modules/@vaadin/vaadin-material-styles/node_modules/@vaadin/vaadin-themable-mixin": {
+    "node_modules/@vaadin/vaadin-themable-mixin": {
       "version": "24.3.11",
       "resolved": "https://registry.npmjs.org/@vaadin/vaadin-themable-mixin/-/vaadin-themable-mixin-24.3.11.tgz",
       "integrity": "sha512-DTjg4j6QW0k/dlWXrS3djwq1f+iMx0zvpex55GzpFFHE/Ccf7V6IrRgdjCkYxoy+Io7FrEmRmWNrkHwmtve14Q==",
-      "dev": true,
-      "dependencies": {
-        "@open-wc/dedupe-mixin": "^1.3.0",
-        "lit": "^3.0.0"
-      }
-    },
-    "node_modules/@vaadin/vaadin-themable-mixin": {
-      "version": "24.3.8",
-      "resolved": "https://registry.npmjs.org/@vaadin/vaadin-themable-mixin/-/vaadin-themable-mixin-24.3.8.tgz",
-      "integrity": "sha512-q1jh0SqT7uNMiRnpJi8HrTEggx0DhoMZfuA8TcVCuiy3yh0xPD2GC+Uc6DViq4X2R/q+8YJLNnLvMntSPJPcmQ==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@open-wc/dedupe-mixin": "^1.3.0",
         "lit": "^3.0.0"
@@ -3437,7 +3430,6 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/@vaadin/vaadin-usage-statistics/-/vaadin-usage-statistics-2.1.2.tgz",
       "integrity": "sha512-xKs1PvRfTXsG0eWWcImLXWjv7D+f1vfoIvovppv6pZ5QX8xgcxWUdNgERlOOdGt3CTuxQXukTBW3+Qfva+OXSg==",
-      "dev": true,
       "hasInstallScript": true,
       "dependencies": {
         "@vaadin/vaadin-development-mode-detector": "^2.0.0"
@@ -3459,11 +3451,25 @@
         "@vaadin/vaadin-themable-mixin": "~24.3.11"
       }
     },
+    "node_modules/@vaadin/vertical-layout/node_modules/@vaadin/vaadin-lumo-styles": {
+      "version": "24.3.22",
+      "resolved": "https://registry.npmjs.org/@vaadin/vaadin-lumo-styles/-/vaadin-lumo-styles-24.3.22.tgz",
+      "integrity": "sha512-uHEtzfk8u2k5iTknIaOhbIEHH6VcuiLZeFs7p4V9a01E5KkBcBFlOPY3hMgPua3yPVJKDNCmK1lzG8Qt/IrArg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@polymer/polymer": "^3.0.0",
+        "@vaadin/component-base": "~24.3.22",
+        "@vaadin/icon": "~24.3.22",
+        "@vaadin/vaadin-themable-mixin": "~24.3.22"
+      }
+    },
     "node_modules/@vaadin/vertical-layout/node_modules/@vaadin/vaadin-themable-mixin": {
-      "version": "24.3.11",
-      "resolved": "https://registry.npmjs.org/@vaadin/vaadin-themable-mixin/-/vaadin-themable-mixin-24.3.11.tgz",
-      "integrity": "sha512-DTjg4j6QW0k/dlWXrS3djwq1f+iMx0zvpex55GzpFFHE/Ccf7V6IrRgdjCkYxoy+Io7FrEmRmWNrkHwmtve14Q==",
+      "version": "24.3.22",
+      "resolved": "https://registry.npmjs.org/@vaadin/vaadin-themable-mixin/-/vaadin-themable-mixin-24.3.22.tgz",
+      "integrity": "sha512-u+r0UXtCzMoZbR1UKQTPWUZEnkXlxwRuxjpNCAdyumqbFMMHd5yw1/LbXertouzj60CN3SUU1FXLtjCgFOeRXQ==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
         "@open-wc/dedupe-mixin": "^1.3.0",
         "lit": "^3.0.0"
diff --git a/package.json b/package.json
index 35937d1..5de7bf6 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,8 @@
     "@polymer/paper-card": "^3.0.1",
     "@polymer/paper-icon-button": "^3.0.2",
     "@polymer/paper-listbox": "^3.0.1",
-    "@vaadin/vaadin-themable-mixin": "24.3.8",
+    "@vaadin/vaadin-lumo-styles": "24.3.11",
+    "@vaadin/vaadin-themable-mixin": "24.3.11",
     "lit": "^3.1.2"
   },
   "devDependencies": {
@@ -86,4 +87,4 @@
     "typescript": "5.3.3"
   },
   "customElements": "custom-elements.json"
-}
+}
\ No newline at end of file
diff --git a/src/fc-applayout.ts b/src/fc-applayout.ts
index e18b6d2..dc40529 100644
--- a/src/fc-applayout.ts
+++ b/src/fc-applayout.ts
@@ -26,6 +26,8 @@ import '@polymer/paper-icon-button/paper-icon-button';
 import '@polymer/paper-listbox/paper-listbox';
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';
 
 /**
  * FcAppLayoutElement is a custom web component that provides a responsive and customizable application layout.
@@ -47,8 +49,8 @@ export class FcAppLayoutElement extends ThemableMixin(LitElement) {
 
   static override styles = css`
     app-toolbar {
-      background-color: #4285f4;
-      color: #fff;
+      background-color: var(--lumo-primary-color);
+      color: var(--lumo-primary-contrast-color);
       transform: translate3d(0px, 0px, 0px);
       display:flex;
       height: var(--app-header-height, 64px);
@@ -75,8 +77,8 @@ export class FcAppLayoutElement extends ThemableMixin(LitElement) {
 
     app-header {
       position: var(--layout-fixed-top_-_position); top: var(--layout-fixed-top_-_top); left: var(--layout-fixed-top_-_left); right: var(--layout-fixed-top_-_right);
-      color: #fff;
-      --app-header-background-rear-layer_-_background-color:  #ef6c00;;
+      color: var(--lumo-primary-contrast-color);
+      --app-header-background-rear-layer_-_background-color: var(--lumo-primary-color);
       z-index: 1000;
     }
 
@@ -88,6 +90,7 @@ export class FcAppLayoutElement extends ThemableMixin(LitElement) {
     app-drawer paper-listbox {
         overflow-y: auto;
         flex-grow: 1;
+        background-color: var(--lumo-base-color);
     }
 
     .content-container {
@@ -104,6 +107,8 @@ export class FcAppLayoutElement extends ThemableMixin(LitElement) {
     :host {
       width: 100%;
       height: 100%;
+      color: var(--lumo-body-text-color);
+      font-family: var(--lumo-font-family);
     }
   `;
 
@@ -119,21 +124,21 @@ export class FcAppLayoutElement extends ThemableMixin(LitElement) {
    * @type {boolean}
    */
   @property({type: Boolean})
-  reveals = true;    
+  reveals = true;
 
   /**
    * Sets the drawer visibility.
    * @type {boolean}
    */
   @property({type: Boolean})
-  drawerVisible = true;    
-  
+  drawerVisible = true;
+
   /**
    * Sets header fixed.
    * @type {boolean}
    */
   @property({type: Boolean})
-  fixed = false;    
+  fixed = false;
 
   /**
    * The alignment of the drawer on the screen ('left', 'right', 'start' or 'end').
@@ -148,14 +153,14 @@ export class FcAppLayoutElement extends ThemableMixin(LitElement) {
    * @type {boolean}
    */
   @property({type: Boolean})
-  shadow = true;    
+  shadow = true;
 
   /**
    * Makes the drawer to be opened by default, in a non modal way.
    * @type {boolean}
    */
   @property({type: Boolean})
-  drawerPersistent = false;    
+  drawerPersistent = false;
 
   /**
    * Makes the drawer to be shown below the header.
@@ -163,7 +168,7 @@ export class FcAppLayoutElement extends ThemableMixin(LitElement) {
    */
   @property({type: Boolean})
   drawerBelowHeader = false;
-  
+
   @query('#drawer')
   drawer!: AppDrawerElement;
 
@@ -211,8 +216,29 @@ export class FcAppLayoutElement extends ThemableMixin(LitElement) {
   }
 
   override firstUpdated() {
-    this.drawer.shadowRoot!.getElementById("contentContainer")!.style.display="flex";
-    this.drawer.shadowRoot!.getElementById("contentContainer")!.style.flexDirection="column";
+    const contentContainer = this.drawer.shadowRoot!.getElementById("contentContainer")!;
+    contentContainer.style.display = "flex";
+    contentContainer.style.flexDirection = "column";
+
+    // Inject Lumo background color into app-drawer shadow DOM
+    this._injectDrawerStyles();
+  }
+
+  private _injectDrawerStyles() {
+    // Create a style element to inject Lumo variables into shadow DOM
+    let styleEl = this.drawer.shadowRoot!.querySelector('style#lumo-injected');
+    if (!styleEl) {
+      styleEl = document.createElement('style');
+      styleEl.id = 'lumo-injected';
+      this.drawer.shadowRoot!.appendChild(styleEl);
+    }
+
+    // Inject CSS that uses Lumo variables
+    styleEl.textContent = `
+      #contentContainer {
+        background-color: var(--lumo-base-color);
+      }
+    `;
   }
 
   override updated(changedProps: { has: (arg0: string) => any; get: (arg0: string) => any; }) {
@@ -280,16 +306,16 @@ export class FcAppLayoutElement extends ThemableMixin(LitElement) {
     } else {
       //FALSE TRUE
       //FALSE FALSE
-        if (this.drawerAlign == "right") {
-          this.header.style.marginRight = "0px";
-          this.content.style.marginRight = "0px";
-        } else {
-          this.header.style.marginLeft = "0px";
-          this.content.style.marginLeft = "0px";
-        }
+      if (this.drawerAlign == "right") {
+        this.header.style.marginRight = "0px";
+        this.content.style.marginRight = "0px";
+      } else {
+        this.header.style.marginLeft = "0px";
+        this.content.style.marginLeft = "0px";
       }
     }
   }
+}
 
 declare global {
   interface HTMLElementTagNameMap {