@propbinder/mobile-design 0.2.48 → 0.2.50

package/src/services/whitelabel.service.ts

@@ -0,0 +1,675 @@
+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
+    }
+  }
+}