kimu-core 0.4.1

package/src/modules-repository/theme/theme-service.ts

@@ -0,0 +1,389 @@
+/**
+ * Theme Service for KIMU-Core
+ * 
+ * Provides theme management with CSS-based themes, custom CSS variables,
+ * persistent storage, and system preference detection.
+ * 
+ * @module ThemeService
+ * @version 2.0.0
+ */
+
+import { KimuGlobalStyles } from '../../core/kimu-global-styles';
+import themesConfig from './themes-config.json';
+
+export type ThemeMode = 'light' | 'dark' | 'ocean' | 'cozy' | 'auto' | string;
+
+export interface ThemeColors {
+  background: string;
+  backgroundEnd: string;
+  text: string;
+  border: string;
+}
+
+export interface CssTheme {
+  name: string;
+  mode: 'light' | 'dark';
+  cssPath: string;
+  description?: string;
+  icon?: string;
+  colors?: ThemeColors;
+}
+
+export type ThemeChangeListener = (themeName: string, mode: ThemeMode) => void;
+
+/**
+ * ThemeService - Centralized theme management with CSS-based themes
+ * 
+ * @example
+ * ```typescript
+ * import { themeService } from './modules/theme/theme-service';
+ * 
+ * // Set theme mode
+ * themeService.setMode('dark');
+ * themeService.setMode('ocean');
+ * themeService.setMode('cozy');
+ * 
+ * // Register a custom CSS theme
+ * themeService.registerCssTheme({
+ *   name: 'custom',
+ *   mode: 'dark',
+ *   cssPath: '/themes/custom.css'
+ * });
+ * 
+ * // Listen to theme changes
+ * themeService.onChange((themeName, mode) => {
+ *   console.log('Theme changed:', themeName);
+ * });
+ * ```
+ */
+export class ThemeService {
+  private currentMode: ThemeMode = 'auto';
+  private currentThemeName: string = 'light';
+  private listeners: Set<ThemeChangeListener> = new Set();
+  private storageKey = 'kimu-theme-mode';
+  private systemPreferenceQuery?: MediaQueryList;
+  private cssThemes: Map<string, CssTheme> = new Map();
+  private debugMode: boolean = true; // Enable debug by default for development
+  private activeThemeLink?: HTMLLinkElement;
+
+  constructor() {
+    console.log('[Theme] ThemeService initializing...');
+    this.initDefaultThemes();
+    this.loadFromStorage();
+    this.initSystemPreference();
+    this.applyTheme();
+    console.log('[Theme] ThemeService initialized. Current mode:', this.currentMode);
+  }
+
+  /**
+   * Initialize default themes from configuration file
+   */
+  private initDefaultThemes(): void {
+    // Theme CSS files are in public/themes/ folder
+    // In development: Vite serves public/ from root → /themes/
+    // In production: Vite copies public/ to dist/ → /dist/themes/
+    const basePath = this.getBasePath();
+    
+    const themesPath = basePath === '/' 
+      ? '/themes/'           // Development: public/themes/ → /themes/
+      : `${basePath}themes/`; // Production: public/themes/ → /dist/themes/
+    
+    // Load themes from configuration file
+    if (themesConfig && themesConfig.themes) {
+      themesConfig.themes.forEach(theme => {
+        this.cssThemes.set(theme.name, {
+          name: theme.name,
+          mode: theme.mode as 'light' | 'dark',
+          cssPath: `${themesPath}${theme.cssPath}`,
+          description: theme.description,
+          icon: theme.icon,
+          colors: theme.colors
+        });
+      });
+
+      if (this.debugMode) {
+        console.log('[Theme] Initialized themes from config with base path:', basePath);
+        console.log('[Theme] Themes path:', themesPath);
+        console.log('[Theme] Loaded themes:', Array.from(this.cssThemes.keys()));
+      }
+    } else {
+      console.warn('[Theme] No themes configuration found, using empty theme list');
+    }
+  }
+
+  /**
+   * Get base path for theme files
+   */
+  private getBasePath(): string {
+    // In development with Vite, files are served from root
+    // In production, files are in /dist/
+    if (typeof window !== 'undefined') {
+      // Check if we're running in production (built files)
+      const scripts = document.getElementsByTagName('script');
+      for (let i = 0; i < scripts.length; i++) {
+        const src = scripts[i].src;
+        // If we find a script in /assets/ or with hash, we're in production
+        if (src.includes('/assets/') || src.match(/\-[a-zA-Z0-9]{8}\.(js|css)$/)) {
+          return '/dist/';
+        }
+      }
+    }
+    // Development mode (Vite serves from root)
+    return '/';
+  }
+
+  /**
+   * Enable or disable debug mode
+   */
+  setDebugMode(enabled: boolean): void {
+    this.debugMode = enabled;
+  }
+
+  /**
+   * Set theme mode
+   */
+  setMode(mode: ThemeMode, persist: boolean = true): void {
+    if (this.debugMode) {
+      console.log('[Theme] Setting mode:', mode);
+    }
+
+    this.currentMode = mode;
+
+    if (persist) {
+      this.saveToStorage();
+    }
+
+    // updateTheme() will handle loading the CSS and notifying listeners
+    this.updateTheme();
+  }
+
+  /**
+   * Get current theme mode
+   */
+  getMode(): ThemeMode {
+    return this.currentMode;
+  }
+
+  /**
+   * Get current theme name
+   */
+  getCurrentThemeName(): string {
+    return this.currentThemeName;
+  }
+
+  /**
+   * Get effective mode (resolves 'auto' to actual theme)
+   */
+  getEffectiveMode(): string {
+    if (this.currentMode === 'auto') {
+      const systemPref = this.getSystemPreference();
+      return systemPref;
+    }
+    return this.currentMode;
+  }
+
+  /**
+   * Toggle between light and dark mode
+   */
+  toggle(): void {
+    const effectiveMode = this.getEffectiveMode();
+    const currentTheme = this.cssThemes.get(effectiveMode);
+    
+    if (!currentTheme) {
+      this.setMode('light');
+      return;
+    }
+
+    // Toggle between light and dark modes
+    if (currentTheme.mode === 'light') {
+      this.setMode('dark');
+    } else {
+      this.setMode('light');
+    }
+  }
+
+  /**
+   * Register a custom CSS theme
+   */
+  registerCssTheme(theme: CssTheme): void {
+    this.cssThemes.set(theme.name, theme);
+    
+    if (this.debugMode) {
+      console.log('[Theme] Registered CSS theme:', theme.name);
+    }
+  }
+
+  /**
+   * Get all available theme names
+   */
+  getAvailableThemes(): string[] {
+    return Array.from(this.cssThemes.keys());
+  }
+
+  /**
+   * Get theme info by name
+   */
+  getThemeInfo(name: string): CssTheme | undefined {
+    return this.cssThemes.get(name);
+  }
+
+  /**
+   * Listen to theme changes
+   */
+  onChange(callback: ThemeChangeListener): void {
+    this.listeners.add(callback);
+  }
+
+  /**
+   * Remove theme change listener
+   */
+  offChange(callback: ThemeChangeListener): void {
+    this.listeners.delete(callback);
+  }
+
+  /**
+   * Update theme based on current mode
+   */
+  private updateTheme(): void {
+    const effectiveMode = this.getEffectiveMode();
+    const theme = this.cssThemes.get(effectiveMode);
+
+    if (!theme) {
+      console.error(`[Theme] Theme "${effectiveMode}" not found`);
+      return;
+    }
+
+    this.currentThemeName = theme.name;
+    this.loadCssTheme(theme);
+    
+    // Notify listeners after theme is loaded
+    this.notifyListeners();
+  }
+
+  /**
+   * Load CSS theme file
+   */
+  private loadCssTheme(theme: CssTheme): void {
+    // Remove existing theme link from main document
+    if (this.activeThemeLink) {
+      this.activeThemeLink.remove();
+    }
+
+    // Create new link element for main document
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = theme.cssPath;
+    link.id = 'kimu-theme';
+    link.setAttribute('data-theme', theme.name);
+
+    // Wait for CSS to load before applying (optional, for smoother transitions)
+    link.onload = () => {
+      if (this.debugMode) {
+        console.log('[Theme] CSS theme loaded:', theme.name, theme.cssPath);
+      }
+    };
+
+    link.onerror = () => {
+      console.error('[Theme] Failed to load CSS theme:', theme.name, theme.cssPath);
+    };
+
+    // Add to document head
+    document.head.appendChild(link);
+    this.activeThemeLink = link;
+
+    // Register theme CSS as global style for all extensions
+    // This will make the theme available in all shadow roots
+    KimuGlobalStyles.registerGlobalStyle('kimu-theme-active', theme.cssPath);
+
+    // Update theme in all currently loaded extensions
+    // This ensures that existing extensions get the new theme immediately
+    KimuGlobalStyles.updateStyleInAllExtensions('kimu-theme-active').catch(error => {
+      console.error('[Theme] Failed to update theme in extensions:', error);
+    });
+
+    if (this.debugMode) {
+      console.log('[Theme] Loading CSS theme:', theme.name, theme.cssPath);
+      console.log('[Theme] Registered theme as global style for all extensions');
+    }
+  }
+
+  /**
+   * Apply current theme
+   */
+  private applyTheme(): void {
+    this.updateTheme();
+  }
+
+  /**
+   * Initialize system preference detection
+   */
+  private initSystemPreference(): void {
+    if (typeof window === 'undefined' || !window.matchMedia) {
+      return;
+    }
+
+    this.systemPreferenceQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    
+    // Listen for system preference changes
+    this.systemPreferenceQuery.addEventListener('change', (e) => {
+      if (this.currentMode === 'auto') {
+        if (this.debugMode) {
+          console.log('[Theme] System preference changed:', e.matches ? 'dark' : 'light');
+        }
+        this.updateTheme();
+        this.notifyListeners();
+      }
+    });
+  }
+
+  /**
+   * Get system color scheme preference
+   */
+  private getSystemPreference(): 'light' | 'dark' {
+    if (!this.systemPreferenceQuery) {
+      return 'light';
+    }
+    return this.systemPreferenceQuery.matches ? 'dark' : 'light';
+  }
+
+  /**
+   * Save theme mode to localStorage
+   */
+  private saveToStorage(): void {
+    try {
+      localStorage.setItem(this.storageKey, this.currentMode);
+    } catch (error) {
+      console.error('[Theme] Failed to save to localStorage:', error);
+    }
+  }
+
+  /**
+   * Load theme mode from localStorage
+   */
+  private loadFromStorage(): void {
+    try {
+      const stored = localStorage.getItem(this.storageKey);
+      if (stored) {
+        this.currentMode = stored as ThemeMode;
+      }
+    } catch (error) {
+      console.error('[Theme] Failed to load from localStorage:', error);
+    }
+  }
+
+  /**
+   * Notify all listeners of theme change
+   */
+  private notifyListeners(): void {
+    this.listeners.forEach(listener => {
+      try {
+        listener(this.currentThemeName, this.currentMode);
+      } catch (error) {
+        console.error('[Theme] Error in listener:', error);
+      }
+    });
+  }
+}
+
+// Export singleton instance
+export const themeService = new ThemeService();

package/src/modules-repository/theme/themes/theme-cherry-blossom.css

@@ -0,0 +1,78 @@
+/**
+ * Cherry Blossom Theme - Delicate pink sakura colors
+ * A soft and elegant theme inspired by Japanese cherry blossoms
+ */
+
+:root {
+  /* Main colors */
+  --kimu-background: linear-gradient(135deg, #FFE5EC 0%, #FFD6E0 50%, #FFC2D4 100%);
+  --kimu-surface: rgba(255, 194, 212, 0.2);
+  --kimu-surface-elevated: rgba(255, 194, 212, 0.3);
+  
+  /* Text colors */
+  --kimu-text-primary: #6B2E4F;
+  --kimu-text-secondary: #8B4A6F;
+  --kimu-text-tertiary: #A86B8F;
+  --kimu-text-disabled: #C28BAF;
+  
+  /* Border colors */
+  --kimu-border: #FFB3C6;
+  --kimu-border-light: #FFCCD9;
+  --kimu-divider: rgba(255, 179, 198, 0.3);
+  
+  /* Accent colors */
+  --kimu-primary: #FF9EBB;
+  --kimu-primary-dark: #FF85AA;
+  --kimu-primary-light: #FFB3C6;
+  --kimu-secondary: #FFAAC2;
+  --kimu-accent: #FFC2D4;
+  
+  /* State colors */
+  --kimu-success: #98D8C8;
+  --kimu-warning: #FFD93D;
+  --kimu-error: #FF6B9D;
+  --kimu-info: #C8A2D0;
+  
+  /* Shadow */
+  --kimu-shadow: rgba(255, 158, 187, 0.3);
+  --kimu-shadow-strong: rgba(255, 158, 187, 0.5);
+  
+  /* Component colors */
+  --kimu-input-bg: #FFFFFF;
+  --kimu-input-border: #FFB3C6;
+  --kimu-button-bg: #FF9EBB;
+  --kimu-button-hover: #FF85AA;
+  --kimu-card-bg: rgba(255, 255, 255, 0.9);
+  
+  /* Font */
+  --kimu-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+}
+
+/* Body background with gradient */
+body {
+  background: linear-gradient(135deg, #FFE5EC 0%, #FFD6E0 50%, #FFC2D4 100%);
+  background-attachment: fixed;
+  color: var(--kimu-text-primary);
+}
+
+/* Petal animation effect */
+@keyframes petal-fall {
+  0% {
+    transform: translateY(-10px) rotate(0deg);
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    transform: translateY(100vh) rotate(360deg);
+    opacity: 0;
+  }
+}
+
+/* Soft glow on hover */
+button:hover,
+a:hover {
+  box-shadow: 0 0 15px rgba(255, 158, 187, 0.6);
+  transition: all 0.3s ease;
+}

package/src/modules-repository/theme/themes/theme-cozy.css

@@ -0,0 +1,111 @@
+/**
+ * KIMU Cozy Theme
+ * Warm, feminine and cozy theme with soft colors
+ * 
+ * This file OVERRIDES the default CSS variables defined in style.css
+ * When this theme is loaded, these values take precedence.
+ */
+
+:root {
+  /* Primary colors - Soft pinks and purples */
+  --kimu-primary: #ec4899;
+  --kimu-primary-light: #f472b6;
+  --kimu-primary-dark: #db2777;
+  --kimu-text-on-primary: #ffffff;
+  
+  /* Accent colors - Warm coral/peach */
+  --kimu-accent: #fb923c;
+  --kimu-accent-light: #fdba74;
+  --kimu-accent-dark: #f97316;
+  --kimu-text-on-accent: #ffffff;
+  
+  /* Background colors - Soft creams and beiges */
+  --kimu-background: #fef3f2;
+  --kimu-background-alt: #fff1f0;
+  --kimu-surface: #ffffff;
+  
+  /* Text colors - Warm darks */
+  --kimu-text-primary: #431407;
+  --kimu-text-secondary: #78350f;
+  --kimu-text-disabled: #d97706;
+  
+  /* Semantic colors */
+  --kimu-success: #86efac;
+  --kimu-success-light: #bbf7d0;
+  --kimu-success-dark: #4ade80;
+  
+  --kimu-warning: #fbbf24;
+  --kimu-warning-light: #fde047;
+  --kimu-warning-dark: #f59e0b;
+  
+  --kimu-error: #f87171;
+  --kimu-error-light: #fca5a5;
+  --kimu-error-dark: #ef4444;
+  
+  --kimu-info: #93c5fd;
+  --kimu-info-light: #bfdbfe;
+  --kimu-info-dark: #60a5fa;
+  
+  /* Borders and dividers */
+  --kimu-border: #fed7d7;
+  --kimu-divider: #fecaca;
+  
+  /* Shadows - Soft pink tint */
+  --kimu-shadow: rgba(236, 72, 153, 0.1);
+  --kimu-shadow-light: rgba(236, 72, 153, 0.05);
+  --kimu-shadow-medium: rgba(236, 72, 153, 0.15);
+  --kimu-shadow-heavy: rgba(236, 72, 153, 0.25);
+  
+  /* Additional UI colors */
+  --kimu-card-bg: #fffbeb;
+  --kimu-card-border: #fed7aa;
+  --kimu-input-bg: #ffffff;
+  --kimu-input-border: #fecaca;
+  --kimu-input-focus: #ec4899;
+  
+  /* Navigation */
+  --kimu-nav-bg: #fef3c7;
+  --kimu-nav-text: #78350f;
+  --kimu-nav-active: #ec4899;
+  
+  /* Footer */
+  --kimu-footer-bg: #fff7ed;
+  --kimu-footer-text: #c2410c;
+}
+
+/* Smooth transitions for theme changes */
+* {
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+/* Cozy gradient background */
+body {
+  background: linear-gradient(135deg, #fef3f2 0%, #fff1f0 50%, #fffbeb 100%);
+}
+
+/* Soft rounded corners for cozy feel */
+.kimu-card,
+.kimu-button,
+.kimu-input {
+  border-radius: 16px;
+}
+
+/* Subtle texture overlay (optional) */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: 
+    repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 10px,
+      rgba(255, 255, 255, 0.03) 10px,
+      rgba(255, 255, 255, 0.03) 20px
+    );
+  pointer-events: none;
+  z-index: -1;
+}