@forcecalendar/interface 1.0.27 → 1.0.28

package/src/utils/StyleUtils.js

@@ -3,133 +3,133 @@
  */
 
 export class StyleUtils {
-    /**
-     * Default theme colors
-     */
-    static colors = {
-        primary: '#3B82F6', // Modern Blue
-        secondary: '#64748B', // Slate
-        accent: '#F59E0B', // Amber
-        danger: '#EF4444', // Red
-        warning: '#F97316', // Orange
-        info: '#06B6D4', // Cyan
-        success: '#22C55E', // Green
-        light: '#F8FAFC',
-        dark: '#0F172A',
-        white: '#FFFFFF',
-        gray: {
-            50: '#F8FAFC',
-            100: '#F1F5F9',
-            200: '#E2E8F0',
-            300: '#CBD5E1',
-            400: '#94A3B8',
-            500: '#64748B',
-            600: '#475569',
-            700: '#334155',
-            800: '#1E293B',
-            900: '#0F172A'
-        }
-    };
-
-    /**
-     * Common CSS variables
-     */
-    static cssVariables = {
-        // "Pro" Palette - Functional & Sharp
-        '--fc-primary-color': '#2563EB', // International Blue (Focus)
-        '--fc-primary-hover': '#1D4ED8',
-        '--fc-primary-light': '#EFF6FF',
-        
-        // Neutral Scale (Slate/Gray for structure)
-        '--fc-text-color': '#111827', // Almost Black
-        '--fc-text-secondary': '#6B7280', // Cool Gray
-        '--fc-text-light': '#9CA3AF',
-        
-        '--fc-border-color': '#E5E7EB', // Crisp Light Gray
-        '--fc-border-color-hover': '#D1D5DB',
-        
-        '--fc-background': '#FFFFFF',
-        '--fc-background-alt': '#FAFAFA', // Very subtle off-white
-        '--fc-background-hover': '#F3F4F6',
-        '--fc-background-active': '#E5E7EB',
-
-        // Semantic Colors
-        '--fc-accent-color': '#F59E0B',
-        '--fc-danger-color': '#EF4444',
-        '--fc-success-color': '#10B981',
-
-        // Typography - optimized for UI density
-        '--fc-font-family': 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-        '--fc-font-size-xs': '11px',
-        '--fc-font-size-sm': '12px',
-        '--fc-font-size-base': '13px', // Slightly smaller for density
-        '--fc-font-size-lg': '15px',
-        '--fc-font-size-xl': '18px',
-        '--fc-font-size-2xl': '24px',
-        '--fc-line-height': '1.4',
-        '--fc-font-weight-normal': '400',
-        '--fc-font-weight-medium': '500',
-        '--fc-font-weight-semibold': '600',
-        '--fc-font-weight-bold': '700',
-
-        // Spacing - Tighter
-        '--fc-spacing-xs': '2px',
-        '--fc-spacing-sm': '6px',
-        '--fc-spacing-md': '10px',
-        '--fc-spacing-lg': '14px',
-        '--fc-spacing-xl': '20px',
-        '--fc-spacing-2xl': '28px',
-
-        // Border
-        '--fc-border-width': '1px',
-        '--fc-border-radius-sm': '3px', // Micro rounding
-        '--fc-border-radius': '5px',
-        '--fc-border-radius-lg': '8px',
-        '--fc-border-radius-full': '9999px',
-
-        // Shadows - Minimal/Functional
-        '--fc-shadow-sm': '0 1px 1px rgba(0,0,0,0.05)',
-        '--fc-shadow': '0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)',
-        '--fc-shadow-md': '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
-        '--fc-shadow-lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
-
-        // Transitions - Snappy
-        '--fc-transition-fast': '100ms ease-out',
-        '--fc-transition': '150ms ease-out',
-        '--fc-transition-slow': '250ms ease-out',
-
-        // Z-index
-        '--fc-z-dropdown': '1000',
-        '--fc-z-modal': '2000',
-        '--fc-z-tooltip': '3000'
-    };
-
-    /**
-     * Get CSS variable value
-     */
-    static getCSSVariable(name, element = document.documentElement) {
-        return getComputedStyle(element).getPropertyValue(name).trim();
+  /**
+   * Default theme colors
+   */
+  static colors = {
+    primary: '#3B82F6', // Modern Blue
+    secondary: '#64748B', // Slate
+    accent: '#F59E0B', // Amber
+    danger: '#EF4444', // Red
+    warning: '#F97316', // Orange
+    info: '#06B6D4', // Cyan
+    success: '#22C55E', // Green
+    light: '#F8FAFC',
+    dark: '#0F172A',
+    white: '#FFFFFF',
+    gray: {
+      50: '#F8FAFC',
+      100: '#F1F5F9',
+      200: '#E2E8F0',
+      300: '#CBD5E1',
+      400: '#94A3B8',
+      500: '#64748B',
+      600: '#475569',
+      700: '#334155',
+      800: '#1E293B',
+      900: '#0F172A'
     }
-
-    /**
-     * Set CSS variables
-     */
-    static setCSSVariables(variables, element = document.documentElement) {
-        Object.entries(variables).forEach(([key, value]) => {
-            element.style.setProperty(key, value);
-        });
-    }
-
-    /**
-     * Generate base styles
-     */
-    static getBaseStyles() {
-        return `
+  };
+
+  /**
+   * Common CSS variables
+   */
+  static cssVariables = {
+    // "Pro" Palette - Functional & Sharp
+    '--fc-primary-color': '#2563EB', // International Blue (Focus)
+    '--fc-primary-hover': '#1D4ED8',
+    '--fc-primary-light': '#EFF6FF',
+
+    // Neutral Scale (Slate/Gray for structure)
+    '--fc-text-color': '#111827', // Almost Black
+    '--fc-text-secondary': '#6B7280', // Cool Gray
+    '--fc-text-light': '#9CA3AF',
+
+    '--fc-border-color': '#E5E7EB', // Crisp Light Gray
+    '--fc-border-color-hover': '#D1D5DB',
+
+    '--fc-background': '#FFFFFF',
+    '--fc-background-alt': '#FAFAFA', // Very subtle off-white
+    '--fc-background-hover': '#F3F4F6',
+    '--fc-background-active': '#E5E7EB',
+
+    // Semantic Colors
+    '--fc-accent-color': '#F59E0B',
+    '--fc-danger-color': '#EF4444',
+    '--fc-success-color': '#10B981',
+
+    // Typography - optimized for UI density
+    '--fc-font-family': 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    '--fc-font-size-xs': '11px',
+    '--fc-font-size-sm': '12px',
+    '--fc-font-size-base': '13px', // Slightly smaller for density
+    '--fc-font-size-lg': '15px',
+    '--fc-font-size-xl': '18px',
+    '--fc-font-size-2xl': '24px',
+    '--fc-line-height': '1.4',
+    '--fc-font-weight-normal': '400',
+    '--fc-font-weight-medium': '500',
+    '--fc-font-weight-semibold': '600',
+    '--fc-font-weight-bold': '700',
+
+    // Spacing - Tighter
+    '--fc-spacing-xs': '2px',
+    '--fc-spacing-sm': '6px',
+    '--fc-spacing-md': '10px',
+    '--fc-spacing-lg': '14px',
+    '--fc-spacing-xl': '20px',
+    '--fc-spacing-2xl': '28px',
+
+    // Border
+    '--fc-border-width': '1px',
+    '--fc-border-radius-sm': '3px', // Micro rounding
+    '--fc-border-radius': '5px',
+    '--fc-border-radius-lg': '8px',
+    '--fc-border-radius-full': '9999px',
+
+    // Shadows - Minimal/Functional
+    '--fc-shadow-sm': '0 1px 1px rgba(0,0,0,0.05)',
+    '--fc-shadow': '0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)',
+    '--fc-shadow-md': '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+    '--fc-shadow-lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+
+    // Transitions - Snappy
+    '--fc-transition-fast': '100ms ease-out',
+    '--fc-transition': '150ms ease-out',
+    '--fc-transition-slow': '250ms ease-out',
+
+    // Z-index
+    '--fc-z-dropdown': '1000',
+    '--fc-z-modal': '2000',
+    '--fc-z-tooltip': '3000'
+  };
+
+  /**
+   * Get CSS variable value
+   */
+  static getCSSVariable(name, element = document.documentElement) {
+    return getComputedStyle(element).getPropertyValue(name).trim();
+  }
+
+  /**
+   * Set CSS variables
+   */
+  static setCSSVariables(variables, element = document.documentElement) {
+    Object.entries(variables).forEach(([key, value]) => {
+      element.style.setProperty(key, value);
+    });
+  }
+
+  /**
+   * Generate base styles
+   */
+  static getBaseStyles() {
+    return `
             :host {
                 /* Apply CSS variables */
                 ${Object.entries(this.cssVariables)
-                    .map(([key, value]) => `${key}: ${value};`)
-                    .join('\n                ')}
+                  .map(([key, value]) => `${key}: ${value};`)
+                  .join('\n                ')}
 
                 /* Base styles */
                 display: block;
@@ -178,13 +178,13 @@ export class StyleUtils {
                 outline-offset: 2px;
             }
         `;
-    }
+  }
 
-    /**
-     * Generate button styles
-     */
-    static getButtonStyles() {
-        return `
+  /**
+   * Generate button styles
+   */
+  static getButtonStyles() {
+    return `
             .fc-btn {
                 display: inline-flex;
                 align-items: center;
@@ -270,108 +270,145 @@ export class StyleUtils {
                 border-radius: var(--fc-border-radius-full);
             }
         `;
+  }
+
+  /**
+   * Darken color by percentage
+   */
+  static darken(color, percent) {
+    const num = parseInt(color.replace('#', ''), 16);
+    const amt = Math.round(2.55 * percent);
+    const R = (num >> 16) - amt;
+    const G = ((num >> 8) & 0x00ff) - amt;
+    const B = (num & 0x0000ff) - amt;
+    return (
+      '#' +
+      (
+        0x1000000 +
+        (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
+        (G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
+        (B < 255 ? (B < 1 ? 0 : B) : 255)
+      )
+        .toString(16)
+        .slice(1)
+    );
+  }
+
+  /**
+   * Lighten color by percentage
+   */
+  static lighten(color, percent) {
+    const num = parseInt(color.replace('#', ''), 16);
+    const amt = Math.round(2.55 * percent);
+    const R = (num >> 16) + amt;
+    const G = ((num >> 8) & 0x00ff) + amt;
+    const B = (num & 0x0000ff) + amt;
+    return (
+      '#' +
+      (
+        0x1000000 +
+        (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
+        (G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
+        (B < 255 ? (B < 1 ? 0 : B) : 255)
+      )
+        .toString(16)
+        .slice(1)
+    );
+  }
+
+  /**
+   * Get contrast color (black or white) for background
+   */
+  static getContrastColor(bgColor) {
+    const color = bgColor.replace('#', '');
+    const r = parseInt(color.substr(0, 2), 16);
+    const g = parseInt(color.substr(2, 2), 16);
+    const b = parseInt(color.substr(4, 2), 16);
+    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+    return yiq >= 128 ? '#000000' : '#FFFFFF';
+  }
+
+  /**
+   * Sanitize color value to prevent CSS injection
+   * Returns the color if valid, or a fallback color if invalid
+   */
+  static sanitizeColor(color, fallback = 'var(--fc-primary-color)') {
+    if (!color || typeof color !== 'string') {
+      return fallback;
     }
 
-    /**
-     * Darken color by percentage
-     */
-    static darken(color, percent) {
-        const num = parseInt(color.replace('#', ''), 16);
-        const amt = Math.round(2.55 * percent);
-        const R = (num >> 16) - amt;
-        const G = (num >> 8 & 0x00FF) - amt;
-        const B = (num & 0x0000FF) - amt;
-        return '#' + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
-            (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
-            (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);
+    // Trim and check for dangerous characters that could break out of CSS
+    const trimmed = color.trim();
+    if (/[;{}()<>\"\'\\]/.test(trimmed)) {
+      return fallback;
     }
 
-    /**
-     * Lighten color by percentage
-     */
-    static lighten(color, percent) {
-        const num = parseInt(color.replace('#', ''), 16);
-        const amt = Math.round(2.55 * percent);
-        const R = (num >> 16) + amt;
-        const G = (num >> 8 & 0x00FF) + amt;
-        const B = (num & 0x0000FF) + amt;
-        return '#' + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
-            (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
-            (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);
+    // Allow hex colors (#RGB, #RRGGBB, #RRGGBBAA)
+    if (/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(trimmed)) {
+      return trimmed;
     }
 
-    /**
-     * Get contrast color (black or white) for background
-     */
-    static getContrastColor(bgColor) {
-        const color = bgColor.replace('#', '');
-        const r = parseInt(color.substr(0, 2), 16);
-        const g = parseInt(color.substr(2, 2), 16);
-        const b = parseInt(color.substr(4, 2), 16);
-        const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
-        return yiq >= 128 ? '#000000' : '#FFFFFF';
+    // Allow CSS variables
+    if (/^var\(--[a-zA-Z0-9-]+\)$/.test(trimmed)) {
+      return trimmed;
     }
 
-    /**
-     * Sanitize color value to prevent CSS injection
-     * Returns the color if valid, or a fallback color if invalid
-     */
-    static sanitizeColor(color, fallback = 'var(--fc-primary-color)') {
-        if (!color || typeof color !== 'string') {
-            return fallback;
-        }
-
-        // Trim and check for dangerous characters that could break out of CSS
-        const trimmed = color.trim();
-        if (/[;{}()<>\"\'\\]/.test(trimmed)) {
-            return fallback;
-        }
-
-        // Allow hex colors (#RGB, #RRGGBB, #RRGGBBAA)
-        if (/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(trimmed)) {
-            return trimmed;
-        }
-
-        // Allow CSS variables
-        if (/^var\(--[a-zA-Z0-9-]+\)$/.test(trimmed)) {
-            return trimmed;
-        }
-
-        // Allow rgb/rgba with numbers only
-        if (/^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(,\s*(0|1|0?\.\d+))?\s*\)$/.test(trimmed)) {
-            return trimmed;
-        }
-
-        // Allow safe CSS color keywords
-        const safeKeywords = [
-            'transparent', 'currentColor', 'inherit',
-            'black', 'white', 'red', 'green', 'blue', 'yellow', 'orange', 'purple',
-            'pink', 'brown', 'gray', 'grey', 'cyan', 'magenta', 'lime', 'navy',
-            'teal', 'aqua', 'maroon', 'olive', 'silver', 'fuchsia'
-        ];
-        if (safeKeywords.includes(trimmed.toLowerCase())) {
-            return trimmed;
-        }
-
-        return fallback;
+    // Allow rgb/rgba with numbers only
+    if (/^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(,\s*(0|1|0?\.\d+))?\s*\)$/.test(trimmed)) {
+      return trimmed;
     }
 
-    /**
-     * Convert hex to rgba
-     */
-    static hexToRgba(hex, alpha = 1) {
-        const color = hex.replace('#', '');
-        const r = parseInt(color.substr(0, 2), 16);
-        const g = parseInt(color.substr(2, 2), 16);
-        const b = parseInt(color.substr(4, 2), 16);
-        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    // Allow safe CSS color keywords
+    const safeKeywords = [
+      'transparent',
+      'currentColor',
+      'inherit',
+      'black',
+      'white',
+      'red',
+      'green',
+      'blue',
+      'yellow',
+      'orange',
+      'purple',
+      'pink',
+      'brown',
+      'gray',
+      'grey',
+      'cyan',
+      'magenta',
+      'lime',
+      'navy',
+      'teal',
+      'aqua',
+      'maroon',
+      'olive',
+      'silver',
+      'fuchsia'
+    ];
+    if (safeKeywords.includes(trimmed.toLowerCase())) {
+      return trimmed;
     }
 
-    /**
-     * Generate grid styles
-     */
-    static getGridStyles() {
-        return `
+    return fallback;
+  }
+
+  /**
+   * Convert hex to rgba
+   */
+  static hexToRgba(hex, alpha = 1) {
+    const color = hex.replace('#', '');
+    const r = parseInt(color.substr(0, 2), 16);
+    const g = parseInt(color.substr(2, 2), 16);
+    const b = parseInt(color.substr(4, 2), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+
+  /**
+   * Generate grid styles
+   */
+  static getGridStyles() {
+    return `
             .fc-grid {
                 display: grid;
                 gap: 1px;
@@ -403,34 +440,34 @@ export class StyleUtils {
                 letter-spacing: 0.5px;
             }
         `;
-    }
-
-    /**
-     * Get responsive breakpoints
-     */
-    static breakpoints = {
-        xs: '320px',
-        sm: '576px',
-        md: '768px',
-        lg: '992px',
-        xl: '1200px',
-        '2xl': '1400px'
-    };
-
-    /**
-     * Generate media query
-     */
-    static mediaQuery(breakpoint, styles) {
-        const size = this.breakpoints[breakpoint];
-        if (!size) return '';
-        return `@media (min-width: ${size}) { ${styles} }`;
-    }
-
-    /**
-     * Animation keyframes
-     */
-    static getAnimations() {
-        return `
+  }
+
+  /**
+   * Get responsive breakpoints
+   */
+  static breakpoints = {
+    xs: '320px',
+    sm: '576px',
+    md: '768px',
+    lg: '992px',
+    xl: '1200px',
+    '2xl': '1400px'
+  };
+
+  /**
+   * Generate media query
+   */
+  static mediaQuery(breakpoint, styles) {
+    const size = this.breakpoints[breakpoint];
+    if (!size) return '';
+    return `@media (min-width: ${size}) { ${styles} }`;
+  }
+
+  /**
+   * Animation keyframes
+   */
+  static getAnimations() {
+    return `
             @keyframes fc-fade-in {
                 from { opacity: 0; }
                 to { opacity: 1; }
@@ -486,7 +523,7 @@ export class StyleUtils {
                 animation: fc-scale-in var(--fc-transition);
             }
         `;
-    }
+  }
 }
 
-export default StyleUtils;
+export default StyleUtils;