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-input/profilepicture/dees-input-profilepicture.ts

@@ -12,6 +12,7 @@ import '../../dees-icon/dees-icon.js';
 import '../../dees-label/dees-label.js';
 import { ProfilePictureModal } from './profilepicture.modal.js';
 import { demoFunc } from './dees-input-profilepicture.demo.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -67,9 +68,11 @@ export class DeesInputProfilePicture extends DeesInputBase<DeesInputProfilePictu
   private modalInstance: ProfilePictureModal | null = null;
 
   public static styles = [
+    themeDefaultStyles,
     ...DeesInputBase.baseStyles,
     cssManager.defaultStyles,
     css`
+      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         display: block;
         position: relative;

ts_web/elements/00group-input/profilepicture/profilepicture.modal.ts

@@ -17,6 +17,7 @@ import '../../dees-windowlayer/dees-windowlayer.js';
 import { DeesWindowLayer } from '../../dees-windowlayer/dees-windowlayer.js';
 import { ImageCropper } from './profilepicture.cropper.js';
 import type { ProfileShape } from './dees-input-profilepicture.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 @customElement('dees-profilepicture-modal')
 export class ProfilePictureModal extends DeesElement {
@@ -46,8 +47,10 @@ export class ProfilePictureModal extends DeesElement {
   private zIndex: number = 0;
 
   public static styles = [
+    themeDefaultStyles,
     cssManager.defaultStyles,
     css`
+      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         font-family: ${cssGeistFontFamily};
         color: ${cssManager.bdTheme('#333', '#fff')};