@propbinder/mobile-design 0.2.50 → 0.2.52

package/src/services/whitelabel.service.ts

@@ -1,675 +0,0 @@
-import { Injectable, signal, effect, computed } from '@angular/core';
-import { StatusBar, Style } from '@capacitor/status-bar';
-
-export interface WhitelabelConfig {
-  // Logo assets
-  logoUrl: string; // Full logo for header (typically horizontal)
-  logoMarkUrl: string; // Compact logo mark for avatars/badges
-  logoAlt: string; // Alt text for accessibility
-  logoSize: 'sm' | 'md' | 'lg' | 'xl'; // Logo size in header (sm: 24px, md: 28px, lg: 32px, xl: 36px)
-
-  // Logo dimensions (optional, for optimization)
-  logoWidth?: number;
-  logoHeight?: number;
-  logoMarkWidth?: number;
-  logoMarkHeight?: number;
-
-  // ============================================
-  // APP ICON (app icons, logo badges)
-  // ============================================
-  appIconSurface: string; // App icon background fill
-  appIconContent: string; // Logomark color on app icon
-
-  // ============================================
-  // ACTIONS & SELECTIONS (buttons, FABs, active tabs, selected items)
-  // ============================================
-  accent: string; // Main accent color (button bg, active tab icon)
-  onAccent: string; // Content on accent-colored surfaces (button text/icon)
-
-  // ============================================
-  // HEADER/NAVIGATION (includes ion-header and header-expandable)
-  // ============================================
-  headerSurface: string; // Header background
-  headerContent: string; // Header text/icons
-  headerAccent: string; // Accent elements in header (e.g., subtle overlay)
-  onHeaderAccent: string; // Content on header accent elements
-
-  // ============================================
-  // SIGN-IN PAGE CUSTOMIZATION
-  // ============================================
-  showCityIllustration: boolean; // Show/hide city illustration on sign-in page
-
-  // Sign-in background
-  signInBgType: 'solid' | 'gradient'; // Background type
-  signInBgSolid: string; // Solid background color
-  signInBgGradientStart: string; // Gradient start color (top)
-  signInBgGradientEnd: string; // Gradient end color (bottom)
-
-  // Sign-in content color
-  signInContentColor: string; // Text color on sign-in page (headings, body text, links)
-
-  // Organization info
-  organizationName: string;
-  organizationId: string;
-}
-
-const DEFAULT_CONFIG: WhitelabelConfig = {
-  logoUrl: '/Assets/logos/propbinder-logomark.svg',
-  logoMarkUrl: '/Assets/logos/propbinder-logomark.svg',
-  logoAlt: 'Propbinder',
-  logoSize: 'md', // Propbinder default: md (28px mobile, 32px desktop)
-
-  // App icon (brand identity)
-  appIconSurface: '#6B5FF5', // Purple
-  appIconContent: '#FFFFFF', // White
-
-  // Accent (buttons, FABs, active tabs)
-  accent: '#6B5FF5', // Purple
-  onAccent: '#FFFFFF', // White
-
-  // Header/navigation
-  headerSurface: '#221a4c', // Dark purple
-  headerContent: '#FFFFFF', // White
-  headerAccent: '#6B5FF5', // Purple accent (matches Propbinder theme)
-  onHeaderAccent: '#FFFFFF', // White
-
-  // Sign-in page
-  showCityIllustration: true, // Show city illustration by default
-  signInBgType: 'gradient', // Use gradient by default
-  signInBgSolid: '#D6C7FF', // Fallback solid color
-  signInBgGradientStart: '#D6C7FF', // Gradient top color
-  signInBgGradientEnd: '#8A9BFF', // Gradient bottom color
-  signInContentColor: '#1a1a1a', // Default dark text color
-
-  organizationName: 'Propbinder',
-  organizationId: 'default',
-};
-
-/**
- * WhitelabelService
- *
- * Manages whitelabel configuration including logos and brand colors.
- * Automatically updates CSS custom properties when colors change.
- *
- * @example
- * Initialize with custom config:
- * ```typescript
- * whitelabelService.initialize({
- *   logoUrl: '/Assets/logos/acme-logo.svg',
- *   logoMarkUrl: '/Assets/logos/acme-mark.svg',
- *   accent: '#2563eb',
- *   onAccent: '#ffffff',
- *   headerSurface: '#1e40af',
- *   headerContent: '#ffffff',
- *   organizationName: 'Acme Corp'
- * });
- * ```
- *
- * Load from API:
- * ```typescript
- * await whitelabelService.loadFromApi('acme-corp');
- * ```
- */
-@Injectable({
-  providedIn: 'root',
-})
-export class WhitelabelService {
-  private _config = signal<WhitelabelConfig>(DEFAULT_CONFIG);
-
-  // Readonly computed signals for accessing config values
-  readonly logoUrl = computed(() => this._config().logoUrl);
-  readonly logoMarkUrl = computed(() => this._config().logoMarkUrl);
-  readonly logoAlt = computed(() => this._config().logoAlt);
-  readonly logoSize = computed(() => this._config().logoSize);
-  readonly logoHeight = computed(() => {
-    const customHeight = this._config().logoHeight;
-    const size = this._config().logoSize;
-
-    // If custom height is explicitly specified, always use it
-    if (customHeight !== undefined) {
-      return customHeight;
-    }
-
-    // Otherwise calculate height based on logoSize
-    switch (size) {
-      case 'sm':
-        return 24;
-      case 'md':
-        return 28;
-      case 'lg':
-        return 32;
-      case 'xl':
-        return 36;
-      default:
-        return 28;
-    }
-  });
-  readonly appIconSurface = computed(() => this._config().appIconSurface);
-  readonly appIconContent = computed(() => this._config().appIconContent);
-  readonly accent = computed(() => this._config().accent);
-  readonly onAccent = computed(() => this._config().onAccent);
-  readonly headerSurface = computed(() => this._config().headerSurface);
-  readonly headerContent = computed(() => this._config().headerContent);
-  readonly headerAccent = computed(() => this._config().headerAccent);
-  readonly onHeaderAccent = computed(() => this._config().onHeaderAccent);
-  readonly showCityIllustration = computed(() => this._config().showCityIllustration);
-  readonly signInBgType = computed(() => this._config().signInBgType);
-  readonly signInBgSolid = computed(() => this._config().signInBgSolid);
-  readonly signInBgGradientStart = computed(() => this._config().signInBgGradientStart);
-  readonly signInBgGradientEnd = computed(() => this._config().signInBgGradientEnd);
-  readonly signInContentColor = computed(() => this._config().signInContentColor);
-  readonly organizationName = computed(() => this._config().organizationName);
-  readonly organizationId = computed(() => this._config().organizationId);
-
-  // Computed background style for sign-in page
-  readonly signInBgStyle = computed(() => {
-    const config = this._config();
-    if (config.signInBgType === 'solid') {
-      return config.signInBgSolid;
-    } else {
-      return `linear-gradient(180deg, ${config.signInBgGradientStart} 0%, ${config.signInBgGradientEnd} 100%)`;
-    }
-  });
-
-  // Full config accessor
-  readonly config = this._config.asReadonly();
-
-  constructor() {
-    // Apply default colors on initialization
-    this.applyColors(DEFAULT_CONFIG);
-
-    // Watch for config changes and update CSS custom properties
-    effect(() => {
-      const config = this._config();
-      this.applyColors(config);
-    });
-
-    // Listen for modal dismissals and re-apply status bar
-    // This fixes the issue where Ionic restores cached status bar state
-    this.setupModalDismissListener();
-  }
-
-  /**
-   * Setup global listener for modal dismiss events
-   * Re-applies status bar after modals close to override Ionic's cached state restoration
-   */
-  private setupModalDismissListener(): void {
-    if (typeof document === 'undefined') return;
-
-    document.addEventListener('ionModalDidDismiss', () => {
-      // Small delay to let Ionic's restoration happen first
-      setTimeout(() => {
-        // Check if we're on the sign-in page
-        const isOnSignInPage = document.querySelector('app-sign-in') !== null;
-
-        if (isOnSignInPage) {
-          // On sign-in page - use sign-in background color
-          const config = this._config();
-          const backgroundColor = config.signInBgType === 'gradient' ? config.signInBgGradientStart : config.signInBgSolid;
-          const style = this.getStatusBarStyleForColor(backgroundColor);
-
-          StatusBar.setBackgroundColor({ color: backgroundColor }).catch(() => {});
-          StatusBar.setStyle({ style }).catch(() => {});
-        } else {
-          // On regular page - use header color
-          const config = this._config();
-          const headerColor = config.headerSurface;
-          const style = this.getStatusBarStyleForColor(headerColor);
-
-          StatusBar.setStyle({ style }).catch(() => {});
-        }
-      }, 50);
-    });
-  }
-
-  /**
-   * Initialize whitelabel configuration
-   * Call this early in app initialization (app.config.ts or app.component.ts)
-   */
-  initialize(config: Partial<WhitelabelConfig>) {
-    this._config.update((current) => ({
-      ...current,
-      ...config,
-    }));
-  }
-
-  /**
-   * Load whitelabel config from API
-   * Typically called on app startup based on subdomain, user tenant, etc.
-   *
-   * @param organizationId - The organization identifier (subdomain, tenant ID, etc.)
-   */
-  async loadFromApi(organizationId?: string): Promise<void> {
-    try {
-      // Example API call structure
-      // const response = await fetch(`/api/whitelabel/${organizationId || 'default'}`);
-      // const config = await response.json();
-      // this.initialize(config);
-
-      //console.log('Loading whitelabel config from API for:', organizationId);
-
-      // Example: Different configs for different organizations
-      if (organizationId === 'demo-client') {
-        this.initialize({
-          logoUrl: '/Assets/logos/demo-logo.svg',
-          logoMarkUrl: '/Assets/logos/demo-mark.svg',
-          logoAlt: 'Demo Client',
-          appIconSurface: '#2563eb',
-          appIconContent: '#FFFFFF',
-          accent: '#2563eb',
-          onAccent: '#FFFFFF',
-          headerSurface: '#1e40af',
-          headerContent: '#FFFFFF',
-          headerAccent: 'rgba(255, 255, 255, 0.15)',
-          onHeaderAccent: '#FFFFFF',
-          organizationName: 'Demo Client',
-          organizationId: 'demo-client',
-        });
-      } else if (organizationId === 'cobblestone') {
-        this.initialize({
-          logoUrl: '/Assets/logos/cobblestone-logo.svg',
-          logoMarkUrl: '/Assets/logos/cobblestone-logomark.svg',
-          logoAlt: 'Cobblestone',
-          logoSize: 'sm',
-          appIconSurface: '#2C3E50',
-          appIconContent: '#FFFFFF',
-          accent: '#3498DB',
-          onAccent: '#FFFFFF',
-          headerSurface: '#2C3E50',
-          headerContent: '#FFFFFF',
-          headerAccent: '#3498DB',
-          onHeaderAccent: '#FFFFFF',
-          showCityIllustration: false,
-          signInBgType: 'gradient',
-          signInBgSolid: '#E8EEF2',
-          signInBgGradientStart: '#E8EEF2',
-          signInBgGradientEnd: '#BDC3C7',
-          signInContentColor: '#1a1a1a',
-          organizationName: 'Cobblestone',
-          organizationId: 'cobblestone',
-        });
-      }
-      // Add more organization-specific configs as needed
-    } catch (error) {
-      console.error('Failed to load whitelabel config:', error);
-      // Fallback to defaults already set
-    }
-  }
-
-  /**
-   * Update config dynamically (e.g., when user switches organizations)
-   */
-  updateConfig(updates: Partial<WhitelabelConfig>) {
-    this.initialize(updates);
-  }
-
-  /**
-   * Update only the brand colors
-   */
-  updateColors(colors: {
-    appIconSurface?: string;
-    appIconContent?: string;
-    accent?: string;
-    onAccent?: string;
-    headerSurface?: string;
-    headerContent?: string;
-    headerAccent?: string;
-    onHeaderAccent?: string;
-  }) {
-    this._config.update((current) => ({
-      ...current,
-      ...colors,
-    }));
-  }
-
-  /**
-   * Reset to default configuration
-   */
-  resetToDefault() {
-    this._config.set(DEFAULT_CONFIG);
-  }
-
-  /**
-   * Convert hex color to RGB values
-   */
-  private hexToRgb(hex: string): { r: number; g: number; b: number } | null {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result
-      ? {
-          r: parseInt(result[1], 16),
-          g: parseInt(result[2], 16),
-          b: parseInt(result[3], 16),
-        }
-      : null;
-  }
-
-  /**
-   * Calculate relative luminance of a color (WCAG standard)
-   * Returns a value between 0 (darkest) and 1 (lightest)
-   */
-  private getRelativeLuminance(color: string): number {
-    const rgb = this.hexToRgb(color);
-    if (!rgb) return 0;
-
-    const rsRGB = rgb.r / 255;
-    const gsRGB = rgb.g / 255;
-    const bsRGB = rgb.b / 255;
-
-    const r = rsRGB <= 0.03928 ? rsRGB / 12.92 : Math.pow((rsRGB + 0.055) / 1.055, 2.4);
-    const g = gsRGB <= 0.03928 ? gsRGB / 12.92 : Math.pow((gsRGB + 0.055) / 1.055, 2.4);
-    const b = bsRGB <= 0.03928 ? bsRGB / 12.92 : Math.pow((bsRGB + 0.055) / 1.055, 2.4);
-
-    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-  }
-
-  /**
-   * Determine if a color is light (needs dark status bar content)
-   */
-  private isColorLight(color: string): boolean {
-    const luminance = this.getRelativeLuminance(color);
-    return luminance > 0.5;
-  }
-
-  /**
-   * Get the appropriate status bar style for a background color
-   * Public method for use by sign-in page
-   */
-  getStatusBarStyleForColor(color: string): Style {
-    // Style.Dark = black icons (for light backgrounds)
-    // Style.Light = white icons (for dark backgrounds)
-    return this.isColorLight(color) ? Style.Light : Style.Dark;
-  }
-
-  /**
-   * Generate a hover state color by applying a black overlay
-   * This simulates the effect of overlaying #000000 with 10% opacity
-   *
-   * @param baseColor - Hex color to overlay on (e.g., '#6B5FF5')
-   * @param overlayColor - Overlay color (default: '#000000' for darkening)
-   * @param overlayAlpha - Opacity of overlay (0-1, default: 0.1 = 10%)
-   * @returns Hex color with overlay applied
-   *
-   * @example
-   * generateHoverColor('#6B5FF5') // Returns darker purple for hover state
-   * generateHoverColor('#FF0000', '#FFFFFF', 0.2) // Lighten red by 20%
-   */
-  private generateHoverColor(baseColor: string, overlayColor: string = '#000000', overlayAlpha: number = 0.1): string {
-    const base = this.hexToRgb(baseColor);
-    const overlay = this.hexToRgb(overlayColor);
-
-    if (!base || !overlay) return baseColor;
-
-    // Alpha blending formula: result = overlay * alpha + base * (1 - alpha)
-    const r = Math.round(overlay.r * overlayAlpha + base.r * (1 - overlayAlpha));
-    const g = Math.round(overlay.g * overlayAlpha + base.g * (1 - overlayAlpha));
-    const b = Math.round(overlay.b * overlayAlpha + base.b * (1 - overlayAlpha));
-
-    // Convert to hex and ensure 2-digit format
-    const toHex = (n: number) => Math.max(0, Math.min(255, n)).toString(16).padStart(2, '0');
-    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-  }
-
-  /**
-   * Generate an active/pressed state color (darker than hover)
-   * Uses 20% black overlay for a more pronounced pressed effect
-   *
-   * @param baseColor - Hex color to overlay on
-   * @returns Hex color for active/pressed state
-   */
-  private generateActiveColor(baseColor: string): string {
-    return this.generateHoverColor(baseColor, '#000000', 0.2); // 20% darker
-  }
-
-  /**
-   * Apply colors to CSS custom properties and native StatusBar
-   * This updates the actual CSS variables used throughout the app
-   * and the native status bar color on mobile devices
-   */
-  private applyColors(config: WhitelabelConfig) {
-    if (typeof document !== 'undefined') {
-      const { appIconSurface, appIconContent, accent, onAccent, headerSurface, headerContent, headerAccent, onHeaderAccent, signInContentColor } = config;
-      const root = document.documentElement;
-      const body = document.body;
-      const ionApp = document.querySelector('ion-app');
-
-      // Generate hover and active state colors for accent
-      const accentHover = this.generateHoverColor(accent);
-      const accentActive = this.generateActiveColor(accent);
-      const headerAccentHover = this.generateHoverColor(headerAccent);
-      const headerAccentActive = this.generateActiveColor(headerAccent);
-
-      // Generate RGB values for Ionic color system
-      const accentRgb = this.hexToRgb(accent);
-      const accentRgbString = accentRgb ? `${accentRgb.r}, ${accentRgb.g}, ${accentRgb.b}` : '107, 95, 245';
-      const onAccentRgb = this.hexToRgb(onAccent);
-      const onAccentRgbString = onAccentRgb ? `${onAccentRgb.r}, ${onAccentRgb.g}, ${onAccentRgb.b}` : '255, 255, 255';
-
-      // ============================================
-      // APP ICON COLORS
-      // ============================================
-      root.style.setProperty('--color-app-icon-surface', appIconSurface);
-      root.style.setProperty('--color-app-icon-content', appIconContent);
-      body.style.setProperty('--color-app-icon-surface', appIconSurface);
-      body.style.setProperty('--color-app-icon-content', appIconContent);
-
-      // ============================================
-      // ACCENT COLORS (buttons, FABs, active tabs, selections)
-      // ============================================
-
-      // Base color
-      root.style.setProperty('--color-accent', accent);
-      root.style.setProperty('--color-on-accent', onAccent);
-      body.style.setProperty('--color-accent', accent);
-      body.style.setProperty('--color-on-accent', onAccent);
-
-      // Hover state (10% darker)
-      root.style.setProperty('--color-accent-hover', accentHover);
-      body.style.setProperty('--color-accent-hover', accentHover);
-
-      // Active/pressed state (20% darker)
-      root.style.setProperty('--color-accent-active', accentActive);
-      body.style.setProperty('--color-accent-active', accentActive);
-
-      // Legacy aliases for backward compatibility
-      root.style.setProperty('--color-background-brand', accent);
-      root.style.setProperty('--color-brand-base', accent);
-      root.style.setProperty('--color-primary-surface', accent);
-      root.style.setProperty('--color-primary-content', onAccent);
-      root.style.setProperty('--color-brand-base-hover', accentHover);
-      root.style.setProperty('--color-primary-surface-hover', accentHover);
-      root.style.setProperty('--color-brand-base-active', accentActive);
-      root.style.setProperty('--color-primary-surface-active', accentActive);
-
-      body.style.setProperty('--color-background-brand', accent);
-      body.style.setProperty('--color-brand-base', accent);
-      body.style.setProperty('--color-primary-surface', accent);
-      body.style.setProperty('--color-primary-content', onAccent);
-      body.style.setProperty('--color-brand-base-hover', accentHover);
-      body.style.setProperty('--color-primary-surface-hover', accentHover);
-      body.style.setProperty('--color-brand-base-active', accentActive);
-      body.style.setProperty('--color-primary-surface-active', accentActive);
-
-      if (ionApp) {
-        (ionApp as HTMLElement).style.setProperty('--color-accent', accent);
-        (ionApp as HTMLElement).style.setProperty('--color-on-accent', onAccent);
-        (ionApp as HTMLElement).style.setProperty('--color-accent-hover', accentHover);
-        (ionApp as HTMLElement).style.setProperty('--color-accent-active', accentActive);
-        (ionApp as HTMLElement).style.setProperty('--color-background-brand', accent);
-        (ionApp as HTMLElement).style.setProperty('--color-brand-base', accent);
-        (ionApp as HTMLElement).style.setProperty('--color-primary-surface', accent);
-        (ionApp as HTMLElement).style.setProperty('--color-primary-content', onAccent);
-        (ionApp as HTMLElement).style.setProperty('--color-brand-base-hover', accentHover);
-        (ionApp as HTMLElement).style.setProperty('--color-primary-surface-hover', accentHover);
-        (ionApp as HTMLElement).style.setProperty('--color-brand-base-active', accentActive);
-        (ionApp as HTMLElement).style.setProperty('--color-primary-surface-active', accentActive);
-        (ionApp as HTMLElement).style.setProperty('--color-selected', accent);
-      }
-
-      // Update tab button selected color directly
-      // CSS variable inheritance doesn't always work dynamically with Ionic components
-      document.querySelectorAll('ion-tab-button').forEach((tabButton) => {
-        (tabButton as HTMLElement).style.setProperty('--color-selected', accent);
-      });
-
-      // ============================================
-      // IONIC COLOR SYSTEM
-      // ============================================
-      // Update Ionic's primary color system with RGB values
-      root.style.setProperty('--ion-color-primary', accent);
-      root.style.setProperty('--ion-color-primary-rgb', accentRgbString);
-      root.style.setProperty('--ion-color-primary-contrast', onAccent);
-      root.style.setProperty('--ion-color-primary-contrast-rgb', onAccentRgbString);
-      root.style.setProperty('--ion-color-primary-shade', accentHover);
-      root.style.setProperty('--ion-color-primary-tint', accent);
-
-      body.style.setProperty('--ion-color-primary', accent);
-      body.style.setProperty('--ion-color-primary-rgb', accentRgbString);
-      body.style.setProperty('--ion-color-primary-contrast', onAccent);
-      body.style.setProperty('--ion-color-primary-contrast-rgb', onAccentRgbString);
-      body.style.setProperty('--ion-color-primary-shade', accentHover);
-      body.style.setProperty('--ion-color-primary-tint', accent);
-
-      if (ionApp) {
-        (ionApp as HTMLElement).style.setProperty('--ion-color-primary', accent);
-        (ionApp as HTMLElement).style.setProperty('--ion-color-primary-rgb', accentRgbString);
-        (ionApp as HTMLElement).style.setProperty('--ion-color-primary-contrast', onAccent);
-        (ionApp as HTMLElement).style.setProperty('--ion-color-primary-contrast-rgb', onAccentRgbString);
-        (ionApp as HTMLElement).style.setProperty('--ion-color-primary-shade', accentHover);
-        (ionApp as HTMLElement).style.setProperty('--ion-color-primary-tint', accent);
-      }
-
-      // ============================================
-      // HEADER COLORS (navigation bar, header-expandable)
-      // ============================================
-
-      // Base colors
-      root.style.setProperty('--color-header-surface', headerSurface);
-      root.style.setProperty('--color-header-content', headerContent);
-      root.style.setProperty('--color-header-accent', headerAccent);
-      root.style.setProperty('--color-on-header-accent', onHeaderAccent);
-      body.style.setProperty('--color-header-surface', headerSurface);
-      body.style.setProperty('--color-header-content', headerContent);
-      body.style.setProperty('--color-header-accent', headerAccent);
-      body.style.setProperty('--color-on-header-accent', onHeaderAccent);
-
-      // Hover/active states for header accent
-      root.style.setProperty('--color-header-accent-hover', headerAccentHover);
-      root.style.setProperty('--color-header-accent-active', headerAccentActive);
-      body.style.setProperty('--color-header-accent-hover', headerAccentHover);
-      body.style.setProperty('--color-header-accent-active', headerAccentActive);
-
-      // Legacy aliases for backward compatibility
-      root.style.setProperty('--color-brand-secondary', headerSurface);
-      root.style.setProperty('--color-secondary-surface', headerSurface);
-      root.style.setProperty('--color-secondary-content', headerContent);
-      root.style.setProperty('--header-content-color', headerContent);
-      root.style.setProperty('--color-brand-secondary-hover', this.generateHoverColor(headerSurface));
-      root.style.setProperty('--color-secondary-surface-hover', this.generateHoverColor(headerSurface));
-      root.style.setProperty('--color-brand-secondary-active', this.generateActiveColor(headerSurface));
-      root.style.setProperty('--color-secondary-surface-active', this.generateActiveColor(headerSurface));
-
-      body.style.setProperty('--color-brand-secondary', headerSurface);
-      body.style.setProperty('--color-secondary-surface', headerSurface);
-      body.style.setProperty('--color-secondary-content', headerContent);
-      body.style.setProperty('--header-content-color', headerContent);
-      body.style.setProperty('--color-brand-secondary-hover', this.generateHoverColor(headerSurface));
-      body.style.setProperty('--color-secondary-surface-hover', this.generateHoverColor(headerSurface));
-      body.style.setProperty('--color-brand-secondary-active', this.generateActiveColor(headerSurface));
-      body.style.setProperty('--color-secondary-surface-active', this.generateActiveColor(headerSurface));
-
-      if (ionApp) {
-        (ionApp as HTMLElement).style.setProperty('--color-header-surface', headerSurface);
-        (ionApp as HTMLElement).style.setProperty('--color-header-content', headerContent);
-        (ionApp as HTMLElement).style.setProperty('--color-header-accent', headerAccent);
-        (ionApp as HTMLElement).style.setProperty('--color-on-header-accent', onHeaderAccent);
-        (ionApp as HTMLElement).style.setProperty('--color-header-accent-hover', headerAccentHover);
-        (ionApp as HTMLElement).style.setProperty('--color-header-accent-active', headerAccentActive);
-        (ionApp as HTMLElement).style.setProperty('--color-brand-secondary', headerSurface);
-        (ionApp as HTMLElement).style.setProperty('--color-secondary-surface', headerSurface);
-        (ionApp as HTMLElement).style.setProperty('--color-secondary-content', headerContent);
-        (ionApp as HTMLElement).style.setProperty('--header-content-color', headerContent);
-        (ionApp as HTMLElement).style.setProperty('--color-brand-secondary-hover', this.generateHoverColor(headerSurface));
-        (ionApp as HTMLElement).style.setProperty('--color-secondary-surface-hover', this.generateHoverColor(headerSurface));
-        (ionApp as HTMLElement).style.setProperty('--color-brand-secondary-active', this.generateActiveColor(headerSurface));
-        (ionApp as HTMLElement).style.setProperty('--color-secondary-surface-active', this.generateActiveColor(headerSurface));
-      }
-
-      // Also set RGB values for use with rgba() opacity variations
-      const rgbContent = this.hexToRgb(headerContent);
-      if (rgbContent) {
-        const rgbValue = `${rgbContent.r}, ${rgbContent.g}, ${rgbContent.b}`;
-        root.style.setProperty('--header-content-color-rgb', rgbValue);
-        root.style.setProperty('--color-secondary-content-rgb', rgbValue);
-        root.style.setProperty('--color-header-content-rgb', rgbValue);
-        body.style.setProperty('--header-content-color-rgb', rgbValue);
-        body.style.setProperty('--color-secondary-content-rgb', rgbValue);
-        body.style.setProperty('--color-header-content-rgb', rgbValue);
-        if (ionApp) {
-          (ionApp as HTMLElement).style.setProperty('--header-content-color-rgb', rgbValue);
-          (ionApp as HTMLElement).style.setProperty('--color-secondary-content-rgb', rgbValue);
-          (ionApp as HTMLElement).style.setProperty('--color-header-content-rgb', rgbValue);
-        }
-      }
-
-      const rgbOnHeaderAccent = this.hexToRgb(onHeaderAccent);
-      if (rgbOnHeaderAccent) {
-        const rgbValue = `${rgbOnHeaderAccent.r}, ${rgbOnHeaderAccent.g}, ${rgbOnHeaderAccent.b}`;
-        root.style.setProperty('--color-on-header-accent-rgb', rgbValue);
-        body.style.setProperty('--color-on-header-accent-rgb', rgbValue);
-        if (ionApp) {
-          (ionApp as HTMLElement).style.setProperty('--color-on-header-accent-rgb', rgbValue);
-        }
-      }
-
-      // Update theme-color meta tag for browser chrome/status bar (PWA/iOS)
-      const metaThemeColor = document.querySelector('meta[name="theme-color"]');
-      if (metaThemeColor) {
-        metaThemeColor.setAttribute('content', headerSurface);
-      }
-
-      // ============================================
-      // SIGN-IN PAGE COLORS
-      // ============================================
-      root.style.setProperty('--color-signin-content', signInContentColor);
-      body.style.setProperty('--color-signin-content', signInContentColor);
-      if (ionApp) {
-        (ionApp as HTMLElement).style.setProperty('--color-signin-content', signInContentColor);
-      }
-
-      // Update native StatusBar color (Capacitor - Android only, iOS ignores this)
-      this.updateNativeStatusBar(headerSurface);
-
-      // console.log('Applied whitelabel colors:', {
-      //   appIconSurface,
-      //   appIconContent,
-      //   accent,
-      //   accentHover,
-      //   accentActive,
-      //   onAccent,
-      //   headerSurface,
-      //   headerContent,
-      //   headerAccent,
-      //   headerAccentHover,
-      //   headerAccentActive,
-      //   onHeaderAccent,
-      //   signInContentColor
-      // });
-    }
-  }
-
-  /**
-   * Update the native status bar color AND style
-   * Sets background color (Android) and content style (iOS/Android)
-   */
-  private async updateNativeStatusBar(color: string): Promise<void> {
-    try {
-      await StatusBar.setBackgroundColor({ color });
-
-      // Calculate and set appropriate style for status bar content
-      const style = this.getStatusBarStyleForColor(color);
-      await StatusBar.setStyle({ style });
-    } catch (e) {
-      // StatusBar API not available (web browser) or failed
-    }
-  }
-}