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-activitylog/dees-appui-activitylog.ts

@@ -12,53 +12,14 @@ import {
 import * as domtools from '@design.estate/dees-domtools';
 import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
 import '../../dees-icon/dees-icon.js';
-import '@design.estate/dees-wcctools/demotools';
 import type { IActivityEntry, IActivityLogAPI } from '../../interfaces/appconfig.js';
+import { demoFunc } from './dees-appui-activitylog.demo.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 @customElement('dees-appui-activitylog')
 export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI {
   // STATIC
-  public static demo = () => {
-    // Create the activity log element
-    const activityLog = document.createElement('dees-appui-activitylog') as DeesAppuiActivitylog;
-
-    // Add demo entries after the element is connected
-    setTimeout(() => {
-      activityLog.addMany([
-        { type: 'login', user: 'John Doe', message: 'logged in from Chrome on macOS' },
-        { type: 'create', user: 'John Doe', message: 'created a new project "Frontend App"' },
-        { type: 'update', user: 'Jane Smith', message: 'updated API documentation' },
-        { type: 'view', user: 'John Doe', message: 'viewed dashboard analytics' },
-        { type: 'delete', user: 'Admin', message: 'removed deprecated endpoint' },
-        { type: 'custom', user: 'System', message: 'scheduled backup completed', iconName: 'lucide:database' },
-        { type: 'logout', user: 'Alice Brown', message: 'logged out' },
-        { type: 'create', user: 'Jane Smith', message: 'created invoice #1234' },
-      ]);
-
-      // Subscribe to updates
-      activityLog.entries$.subscribe((entries) => {
-        console.log('Activity log updated:', entries.length, 'entries');
-      });
-    }, 100);
-
-    return html`
-      <dees-demowrapper>
-        <style>
-          .demo-container {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 600px;
-            background: ${cssManager.bdTheme('#f4f4f5', '#09090b')};
-            padding: 32px;
-          }
-        </style>
-        <div class="demo-container">
-          ${activityLog}
-        </div>
-      </dees-demowrapper>
-    `;
-  };
+  public static demo = demoFunc;
 
   // INSTANCE PROPERTIES
   @state()
@@ -75,8 +36,10 @@ export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI
 
   // STYLES
   public static styles = [
+    themeDefaultStyles,
     cssManager.defaultStyles,
     css`
+      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         color: ${cssManager.bdTheme('#09090b', '#fafafa')};
         position: relative;