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

@@ -13,6 +13,7 @@ import {
 import * as domtools from '@design.estate/dees-domtools';
 import '../dees-appui-tabs/dees-appui-tabs.js';
 import type { DeesAppuiTabs } from '../dees-appui-tabs/dees-appui-tabs.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 @customElement('dees-appui-maincontent')
 export class DeesAppuiMaincontent extends DeesElement {
@@ -35,16 +36,18 @@ export class DeesAppuiMaincontent extends DeesElement {
   @property({
     type: Array,
   })
-  accessor tabs: interfaces.ITab[] = [
+  accessor tabs: interfaces.IMenuItem[] = [
     { key: '⚠️ Please set tabs', action: () => console.warn('No tabs configured for maincontent') },
   ];
 
   @property({ type: Object })
-  accessor selectedTab: interfaces.ITab | null = null;
+  accessor selectedTab: interfaces.IMenuItem | null = null;
 
   public static styles = [
+    themeDefaultStyles,
     cssManager.defaultStyles,
     css`
+      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         color: ${cssManager.bdTheme('#333', '#fff')};
         display: block;