feat(theme,interfaces): Introduce a global theming system and unify menu/tab interfaces; migrate components to use themeDefaultStyles and update APIs accordingly

ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts

@@ -13,6 +13,7 @@ import {
 } from '@design.estate/dees-element';
 import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
 import { demoFunc } from './dees-appui-mainmenu.demo.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 /**
  * the most left menu
@@ -37,21 +38,23 @@ export class DeesAppuiMainmenu extends DeesElement {
 
   // Bottom tabs (pinned to bottom)
   @property({ type: Array })
-  accessor bottomTabs: interfaces.ITab[] = [];
+  accessor bottomTabs: interfaces.IMenuItem[] = [];
 
   // Legacy tabs property (for backward compatibility)
   @property({ type: Array })
-  accessor tabs: interfaces.ITab[] = [];
+  accessor tabs: interfaces.IMenuItem[] = [];
 
   @property()
-  accessor selectedTab: interfaces.ITab;
+  accessor selectedTab: interfaces.IMenuItem;
 
   @property({ type: Boolean, reflect: true })
   accessor collapsed: boolean = false;
 
   public static styles = [
+    themeDefaultStyles,
     cssManager.defaultStyles,
     css`
+      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         --menu-width-expanded: 200px;
         --menu-width-collapsed: 56px;
@@ -390,7 +393,7 @@ export class DeesAppuiMainmenu extends DeesElement {
         <div class="menuGroup">
           ${group.name ? html`<div class="groupHeader">${group.name}</div>` : ''}
           <div class="groupTabs">
-            ${group.tabs.map((tabArg) => this.renderTab(tabArg))}
+            ${group.items.map((tabArg) => this.renderTab(tabArg))}
           </div>
         </div>
       `)}
@@ -407,7 +410,7 @@ export class DeesAppuiMainmenu extends DeesElement {
     `;
   }
 
-  private renderTab(tabArg: interfaces.ITab): TemplateResult {
+  private renderTab(tabArg: interfaces.IMenuItem): TemplateResult {
     return html`
       <div
         class="tab ${tabArg === this.selectedTab ? 'selectedTab' : ''}"
@@ -422,15 +425,15 @@ export class DeesAppuiMainmenu extends DeesElement {
     `;
   }
 
-  private getAllTabs(): interfaces.ITab[] {
+  private getAllTabs(): interfaces.IMenuItem[] {
     if (this.menuGroups.length > 0) {
-      const groupTabs = this.menuGroups.flatMap(group => group.tabs);
+      const groupTabs = this.menuGroups.flatMap(group => group.items);
       return [...groupTabs, ...this.bottomTabs];
     }
     return [...this.tabs, ...this.bottomTabs];
   }
 
-  updateTab(tabArg: interfaces.ITab) {
+  updateTab(tabArg: interfaces.IMenuItem) {
     this.selectedTab = tabArg;
     this.selectedTab.action();