@camp2gether/c2g-ui 0.0.7

package/src/lib/styles/design-tokens.css

@@ -0,0 +1,153 @@
+:root {
+  /* Colors */
+  --c2g-color-bg-base: #f8f6f3;
+  --c2g-color-bg-secondary: #efe9e0;
+  --c2g-color-bg-tertiary: #e1d9ce;
+  --c2g-color-surface: #ffffff;
+  --c2g-color-surface-glass: rgba(255, 255, 255, 0.95);
+  --c2g-color-primary: #ff6b35;
+  --c2g-color-primary-light: #fff4f0;
+  --c2g-color-primary-dark: #e55623;
+  --c2g-color-primary-container: #ffede6;
+  --c2g-color-on-primary-container: #4a1800;
+  --c2g-color-primary-rgb: 255, 107, 53;
+  --c2g-color-secondary: #4ecdc4;
+  --c2g-color-secondary-light: #7ed8d2;
+  --c2g-color-secondary-dark: #3ba99f;
+  --c2g-color-secondary-container: #e5f9f7;
+  --c2g-color-tertiary: #ffb347;
+  --c2g-color-accent-light: #ffe570;
+  --c2g-color-accent-dark: #f4c430;
+  --c2g-color-success: #95e1d3;
+  --c2g-color-warning: #ffb347;
+  --c2g-color-error: #ff6b6b;
+  --c2g-color-info: #74c0fc;
+  --c2g-color-neutral-50: #f8f6f3;
+  --c2g-color-neutral-100: #efe9e0;
+  --c2g-color-neutral-200: #e1d9ce;
+  --c2g-color-neutral-300: #d1c4b5;
+  --c2g-color-neutral-400: #b8a89b;
+  --c2g-color-neutral-500: #98877a;
+  --c2g-color-neutral-600: #6b5e52;
+  --c2g-color-neutral-700: #4a423b;
+  --c2g-color-neutral-800: #2f2b27;
+  --c2g-color-neutral-900: #1a1714;
+  --c2g-color-text-primary: #1a1714;
+  --c2g-color-text-secondary: #4a423b;
+  --c2g-color-text-muted: #6b5e52;
+  --c2g-color-outline: #d1c4b5;
+  --c2g-color-outline-variant: #e1d9ce;
+  --c2g-color-border-subtle: rgba(74, 66, 59, 0.18);
+  --c2g-color-border-soft: rgba(74, 66, 59, 0.12);
+  --c2g-color-accent: #ff6b35;
+  --c2g-color-focus: #e55623;
+  --c2g-color-button-primary: #ff6b35;
+  --c2g-color-button-primary-hover: #e55623;
+  --c2g-color-button-secondary: #4ecdc4;
+  --c2g-color-button-secondary-hover: #3ba99f;
+  --c2g-color-button-secondary-text: #1a1714;
+  --c2g-color-button-primary-text: #1a1714;
+  --c2g-color-button-ghost-hover: #ffe0d6;
+
+  /* Map marker activity/status colors */
+  --c2g-activity-water: #1976d2;
+  --c2g-activity-forest: #2e7d32;
+  --c2g-activity-mountain: #6d4c41;
+  --c2g-activity-desert: #f9a825;
+  --c2g-activity-urban: #546e7a;
+  --c2g-activity-adventure: #8e24aa;
+  --c2g-activity-point-of-interest: #d81b60;
+  --c2g-tour-declined: #b71c1c;
+  --c2g-tour-completed: #2e7d32;
+  --c2g-tour-current: #ef6c00;
+  --c2g-tour-upcoming: #1565c0;
+
+  /* Typography */
+  --c2g-font-family-base: "Quicksand", "Segoe UI", sans-serif;
+  --c2g-font-size-xs: 0.75rem;
+  --c2g-font-size-sm: 0.875rem;
+  --c2g-font-size-md: 1rem;
+  --c2g-font-size-lg: 1.25rem;
+  --c2g-font-weight-semibold: 600;
+  --c2g-font-weight-bold: 700;
+  --c2g-font-weight-extrabold: 800;
+  --c2g-letter-spacing-tight: -0.02em;
+  --c2g-letter-spacing-wide: 0.1em;
+
+  /* Spacing */
+  --c2g-space-1: 0.25rem;
+  --c2g-space-2: 0.5rem;
+  --c2g-space-3: 0.75rem;
+  --c2g-space-4: 1rem;
+  --c2g-space-5: 1.25rem;
+  --c2g-space-6: 1.5rem;
+
+  /* Radius */
+  --c2g-radius-sm: 0.375rem;
+  --c2g-radius-md: 0.625rem;
+  --c2g-radius-lg: 0.75rem;
+  --c2g-radius-xl: 1.125rem;
+
+  /* Shadow */
+  --c2g-shadow-sm: 0 0 3px rgba(31, 28, 25, 0.06);
+  --c2g-shadow-md: 0 0 6px rgba(31, 28, 25, 0.08);
+
+  /* Motion */
+  --c2g-motion-duration-fast: 120ms;
+  --c2g-motion-duration-base: 200ms;
+  --c2g-motion-ease-standard: ease;
+
+  /* Z-index */
+  --c2g-z-index-base: 1;
+  --c2g-z-index-dropdown: 1000;
+  --c2g-z-index-sticky: 1100;
+  --c2g-z-index-overlay: 1200;
+  --c2g-z-index-modal: 1300;
+  --c2g-z-index-toast: 1400;
+
+  /* Breakpoints */
+  --c2g-breakpoint-sm: 36rem;
+  --c2g-breakpoint-md: 48rem;
+  --c2g-breakpoint-lg: 64rem;
+  --c2g-breakpoint-xl: 80rem;
+
+  /* Backward-compatible aliases used by existing components */
+  --c2g-glass-bg: var(--c2g-color-surface-glass);
+
+  /* Neutral color aliases (short form without -color- infix) */
+  --c2g-neutral-50: var(--c2g-color-neutral-50);
+  --c2g-neutral-100: var(--c2g-color-neutral-100);
+  --c2g-neutral-200: var(--c2g-color-neutral-200);
+  --c2g-neutral-300: var(--c2g-color-neutral-300);
+  --c2g-neutral-400: var(--c2g-color-neutral-400);
+  --c2g-neutral-500: var(--c2g-color-neutral-500);
+  --c2g-neutral-600: var(--c2g-color-neutral-600);
+  --c2g-neutral-700: var(--c2g-color-neutral-700);
+  --c2g-neutral-800: var(--c2g-color-neutral-800);
+  --c2g-neutral-900: var(--c2g-color-neutral-900);
+
+  /* Semantic space aliases */
+  --c2g-space-sm: var(--c2g-space-2);
+  --c2g-space-md: var(--c2g-space-4);
+  --c2g-space-lg: var(--c2g-space-6);
+  --c2g-space-xl: calc(var(--c2g-space-6) * 1.5);
+
+  /* Transition shorthand alias */
+  --c2g-transition-fast: var(--c2g-motion-duration-fast) var(--c2g-motion-ease-standard);
+
+  --c2g-primary: var(--c2g-color-primary);
+  --c2g-primary-light: var(--c2g-color-primary-light);
+  --c2g-primary-dark: var(--c2g-color-primary-dark);
+  --c2g-secondary: var(--c2g-color-secondary);
+  --c2g-secondary-light: var(--c2g-color-secondary-light);
+  --c2g-secondary-dark: var(--c2g-color-secondary-dark);
+  --c2g-accent: var(--c2g-color-tertiary);
+  --c2g-success: var(--c2g-color-success);
+  --c2g-warning: var(--c2g-color-warning);
+  --c2g-error: var(--c2g-color-error);
+  --c2g-info: var(--c2g-color-info);
+  --c2g-text-primary: var(--c2g-color-text-primary);
+  --c2g-text-secondary: var(--c2g-color-text-secondary);
+  --c2g-text-muted: var(--c2g-color-text-muted);
+  --spacing-3: var(--c2g-space-3);
+}

package/src/lib/styles/themes.scss

@@ -0,0 +1,346 @@
+// ==========================================================================
+// CAMP2GETHER THEME SYSTEM
+// ==========================================================================
+// Universal theme variables that adapt to all theme modes
+// Supports: light, dark, auto, high-contrast
+// Uses C2G's warm color palette
+
+// Base theme variables (always available)
+:root {
+  // Animation and transitions
+  --c2g-transition-fast: var(--c2g-motion-duration-fast) var(--c2g-motion-ease-standard);
+  --c2g-transition-medium: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --c2g-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+  
+  // Border radius (inherit from design tokens)
+  --c2g-radius-sm: var(--c2g-radius-sm);
+  --c2g-radius-md: var(--c2g-radius-md);
+  --c2g-radius-lg: var(--c2g-radius-lg);
+  --c2g-radius-xl: var(--c2g-radius-xl);
+  
+  // Shadows (inherit from design tokens)
+  --c2g-shadow-sm: var(--c2g-shadow-sm);
+  --c2g-shadow-md: var(--c2g-shadow-md);
+  --c2g-shadow-lg: 0 10px 15px -3px rgba(31, 28, 25, 0.1), 0 4px 6px -2px rgba(31, 28, 25, 0.05);
+  --c2g-shadow-xl: 0 20px 25px -5px rgba(31, 28, 25, 0.1), 0 10px 10px -5px rgba(31, 28, 25, 0.04);
+}
+
+// ==========================================================================
+// LIGHT THEME (Default - Uses C2G warm colors)
+// ==========================================================================
+body,
+body.theme-light {
+  // Primary colors (C2G warm orange)
+  --c2g-theme-primary: var(--c2g-color-primary);
+  --c2g-theme-primary-dark: var(--c2g-color-primary-dark, #c0391a);
+  --c2g-theme-primary-hover: var(--c2g-color-primary-dark);
+  --c2g-theme-primary-container: var(--c2g-color-primary-container);
+  --c2g-theme-on-primary: #ffffff;
+  --c2g-theme-on-primary-container: var(--c2g-color-on-primary-container);
+  --c2g-theme-primary-shadow:    rgba(255, 107, 53, 0.35);
+  --c2g-theme-primary-shadow-lg: rgba(255, 107, 53, 0.45);
+  
+  // Secondary colors (C2G teal)
+  --c2g-theme-secondary: var(--c2g-color-secondary);
+  --c2g-theme-secondary-hover: var(--c2g-color-secondary-dark);
+  --c2g-theme-secondary-container: var(--c2g-color-secondary-container);
+  --c2g-theme-on-secondary: #ffffff;
+  --c2g-theme-on-secondary-container: var(--c2g-color-text-primary);
+  
+  // Surface colors (C2G warm neutrals)
+  --c2g-theme-surface: var(--c2g-color-surface);
+  --c2g-theme-surface-container-lowest: var(--c2g-color-surface);
+  --c2g-theme-surface-container-low: var(--c2g-color-bg-base);
+  --c2g-theme-surface-container: var(--c2g-color-bg-secondary);
+  --c2g-theme-surface-container-high: var(--c2g-color-bg-tertiary);
+  --c2g-theme-surface-container-highest: var(--c2g-color-neutral-300);
+  --c2g-theme-on-surface: var(--c2g-color-text-primary);
+  --c2g-theme-on-surface-variant: var(--c2g-color-text-secondary);
+  
+  // Background (C2G warm base)
+  --c2g-theme-background: var(--c2g-color-bg-base);
+  --c2g-theme-on-background: var(--c2g-color-text-primary);
+  
+  // Error colors
+  --c2g-theme-error: var(--c2g-color-error);
+  --c2g-theme-error-container: #fff5f5;
+  --c2g-theme-on-error: #ffffff;
+  --c2g-theme-on-error-container: #7f1d1d;
+  
+  // Success colors
+  --c2g-theme-success: var(--c2g-color-success);
+  --c2g-theme-success-container: #f0fdfa;
+  --c2g-theme-on-success: #ffffff;
+  --c2g-theme-on-success-container: #134e4a;
+  
+  // Warning colors
+  --c2g-theme-warning: var(--c2g-color-warning);
+  --c2g-theme-warning-container: #fffbeb;
+  --c2g-theme-on-warning: #ffffff;
+  --c2g-theme-on-warning-container: #78350f;
+  
+  // Outline colors
+  --c2g-theme-outline: var(--c2g-color-outline);
+  --c2g-theme-outline-variant: var(--c2g-color-outline-variant);
+  
+  // Theme-specific shadows
+  --c2g-shadow-color: rgba(31, 28, 25, 0.1);
+}
+
+// ==========================================================================
+// DARK THEME (C2G warm colors adapted for dark mode)
+// ==========================================================================
+body.theme-dark {
+  // Primary colors (brighter warm orange for dark)
+  --c2g-theme-primary: #ff8c5a;
+  --c2g-theme-primary-dark: #c0391a;
+  --c2g-theme-primary-hover: var(--c2g-color-primary);
+  --c2g-theme-primary-container: #4a1800;
+  --c2g-theme-on-primary: var(--c2g-color-neutral-900);
+  --c2g-theme-on-primary-container: #ffe0d6;
+  --c2g-theme-primary-shadow:    rgba(255, 140, 90, 0.25);
+  --c2g-theme-primary-shadow-lg: rgba(255, 140, 90, 0.35);
+  
+  // Secondary colors (lighter teal for dark)
+  --c2g-theme-secondary: #7ed8d2;
+  --c2g-theme-secondary-hover: var(--c2g-color-secondary-light);
+  --c2g-theme-secondary-container: #134e4a;
+  --c2g-theme-on-secondary: var(--c2g-color-neutral-900);
+  --c2g-theme-on-secondary-container: #a7f3d0;
+  
+  // Surface colors (dark warm neutrals)
+  --c2g-theme-surface: var(--c2g-color-neutral-900);
+  --c2g-theme-surface-container-lowest: #0f0d0b;
+  --c2g-theme-surface-container-low: var(--c2g-color-neutral-800);
+  --c2g-theme-surface-container: var(--c2g-color-neutral-700);
+  --c2g-theme-surface-container-high: var(--c2g-color-neutral-600);
+  --c2g-theme-surface-container-highest: var(--c2g-color-neutral-500);
+  --c2g-theme-on-surface: var(--c2g-color-neutral-50);
+  --c2g-theme-on-surface-variant: var(--c2g-color-neutral-300);
+  
+  // Background (darkest warm)
+  --c2g-theme-background: #0f0d0b;
+  --c2g-theme-on-background: var(--c2g-color-neutral-50);
+  
+  // Error colors (adjusted for dark)
+  --c2g-theme-error: #ff9999;
+  --c2g-theme-error-container: #7f1d1d;
+  --c2g-theme-on-error: var(--c2g-color-neutral-900);
+  --c2g-theme-on-error-container: #fecaca;
+  
+  // Success colors (adjusted for dark)
+  --c2g-theme-success: #a7f3d0;
+  --c2g-theme-success-container: #134e4a;
+  --c2g-theme-on-success: var(--c2g-color-neutral-900);
+  --c2g-theme-on-success-container: #d1fae5;
+  
+  // Warning colors (adjusted for dark)
+  --c2g-theme-warning: #fcd34d;
+  --c2g-theme-warning-container: #78350f;
+  --c2g-theme-on-warning: var(--c2g-color-neutral-900);
+  --c2g-theme-on-warning-container: #fde68a;
+  
+  // Outline colors
+  --c2g-theme-outline: var(--c2g-color-neutral-600);
+  --c2g-theme-outline-variant: var(--c2g-color-neutral-700);
+  
+  // Theme-specific shadows
+  --c2g-shadow-color: rgba(0, 0, 0, 0.4);
+}
+
+// ==========================================================================
+// HIGH CONTRAST THEME (WCAG AAA Compliant with C2G accent)
+// ==========================================================================
+body.theme-high-contrast {
+  // Primary colors - Maximum contrast with C2G orange
+  --c2g-theme-primary: #cc5529;
+  --c2g-theme-primary-dark: #7a2610;
+  --c2g-theme-primary-hover: #994020;
+  --c2g-theme-primary-container: #ffe6cc;
+  --c2g-theme-on-primary: #ffffff;
+  --c2g-theme-on-primary-container: #000000;
+  --c2g-theme-primary-shadow:    rgba(0, 0, 0, 0.0);
+  --c2g-theme-primary-shadow-lg: rgba(0, 0, 0, 0.0);
+  
+  // Secondary colors
+  --c2g-theme-secondary: #006666;
+  --c2g-theme-secondary-hover: #004444;
+  --c2g-theme-secondary-container: #ccffff;
+  --c2g-theme-on-secondary: #ffffff;
+  --c2g-theme-on-secondary-container: #000000;
+  
+  // Surface colors - High contrast
+  --c2g-theme-surface: #ffffff;
+  --c2g-theme-surface-container-lowest: #ffffff;
+  --c2g-theme-surface-container-low: #f8f8f8;
+  --c2g-theme-surface-container: #f0f0f0;
+  --c2g-theme-surface-container-high: #e8e8e8;
+  --c2g-theme-surface-container-highest: #d0d0d0;
+  --c2g-theme-on-surface: #000000;
+  --c2g-theme-on-surface-variant: #333333;
+  
+  // Background
+  --c2g-theme-background: #ffffff;
+  --c2g-theme-on-background: #000000;
+  
+  // Error colors - High contrast
+  --c2g-theme-error: #cc0000;
+  --c2g-theme-error-container: #ffcccc;
+  --c2g-theme-on-error: #ffffff;
+  --c2g-theme-on-error-container: #000000;
+  
+  // Success colors - High contrast
+  --c2g-theme-success: #006600;
+  --c2g-theme-success-container: #ccffcc;
+  --c2g-theme-on-success: #ffffff;
+  --c2g-theme-on-success-container: #000000;
+  
+  // Warning colors - High contrast
+  --c2g-theme-warning: #cc6600;
+  --c2g-theme-warning-container: #ffe6cc;
+  --c2g-theme-on-warning: #ffffff;
+  --c2g-theme-on-warning-container: #000000;
+  
+  // Outline colors - Strong borders
+  --c2g-theme-outline: #666666;
+  --c2g-theme-outline-variant: #999999;
+  
+  // Enhanced shadows for better depth perception
+  --c2g-shadow-color: rgba(0, 0, 0, 0.5);
+  
+  // High contrast specific enhancements
+  --c2g-focus-ring: 3px solid #cc5529;
+  --c2g-border-width: 2px;
+}
+
+// ==========================================================================
+// AUTO THEME (Uses system preference with C2G colors)
+// ==========================================================================
+body.theme-auto {
+  @media (prefers-color-scheme: light) {
+    // Inherit light theme variables
+    --c2g-theme-primary: var(--c2g-color-primary);
+    --c2g-theme-primary-hover: var(--c2g-color-primary-dark);
+    --c2g-theme-primary-container: var(--c2g-color-primary-container);
+    --c2g-theme-on-primary: #ffffff;
+    --c2g-theme-on-primary-container: var(--c2g-color-on-primary-container);
+    --c2g-theme-secondary: var(--c2g-color-secondary);
+    --c2g-theme-secondary-hover: var(--c2g-color-secondary-dark);
+    --c2g-theme-secondary-container: var(--c2g-color-secondary-container);
+    --c2g-theme-on-secondary: #ffffff;
+    --c2g-theme-on-secondary-container: var(--c2g-color-text-primary);
+    --c2g-theme-surface: var(--c2g-color-surface);
+    --c2g-theme-surface-container-lowest: var(--c2g-color-surface);
+    --c2g-theme-surface-container-low: var(--c2g-color-bg-base);
+    --c2g-theme-surface-container: var(--c2g-color-bg-secondary);
+    --c2g-theme-surface-container-high: var(--c2g-color-bg-tertiary);
+    --c2g-theme-surface-container-highest: var(--c2g-color-neutral-300);
+    --c2g-theme-on-surface: var(--c2g-color-text-primary);
+    --c2g-theme-on-surface-variant: var(--c2g-color-text-secondary);
+    --c2g-theme-background: var(--c2g-color-bg-base);
+    --c2g-theme-on-background: var(--c2g-color-text-primary);
+    --c2g-theme-error: var(--c2g-color-error);
+    --c2g-theme-error-container: #fff5f5;
+    --c2g-theme-on-error: #ffffff;
+    --c2g-theme-on-error-container: #7f1d1d;
+    --c2g-theme-success: var(--c2g-color-success);
+    --c2g-theme-success-container: #f0fdfa;
+    --c2g-theme-on-success: #ffffff;
+    --c2g-theme-on-success-container: #134e4a;
+    --c2g-theme-warning: var(--c2g-color-warning);
+    --c2g-theme-warning-container: #fffbeb;
+    --c2g-theme-on-warning: #ffffff;
+    --c2g-theme-on-warning-container: #78350f;
+    --c2g-theme-outline: var(--c2g-color-outline);
+    --c2g-theme-outline-variant: var(--c2g-color-outline-variant);
+    --c2g-shadow-color: rgba(31, 28, 25, 0.1);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    // Inherit dark theme variables
+    --c2g-theme-primary: #ff8c5a;
+    --c2g-theme-primary-hover: var(--c2g-color-primary);
+    --c2g-theme-primary-container: #4a1800;
+    --c2g-theme-on-primary: var(--c2g-color-neutral-900);
+    --c2g-theme-on-primary-container: #ffe0d6;
+    --c2g-theme-secondary: #7ed8d2;
+    --c2g-theme-secondary-hover: var(--c2g-color-secondary-light);
+    --c2g-theme-secondary-container: #134e4a;
+    --c2g-theme-on-secondary: var(--c2g-color-neutral-900);
+    --c2g-theme-on-secondary-container: #a7f3d0;
+    --c2g-theme-surface: var(--c2g-color-neutral-900);
+    --c2g-theme-surface-container-lowest: #0f0d0b;
+    --c2g-theme-surface-container-low: var(--c2g-color-neutral-800);
+    --c2g-theme-surface-container: var(--c2g-color-neutral-700);
+    --c2g-theme-surface-container-high: var(--c2g-color-neutral-600);
+    --c2g-theme-surface-container-highest: var(--c2g-color-neutral-500);
+    --c2g-theme-on-surface: var(--c2g-color-neutral-50);
+    --c2g-theme-on-surface-variant: var(--c2g-color-neutral-300);
+    --c2g-theme-background: #0f0d0b;
+    --c2g-theme-on-background: var(--c2g-color-neutral-50);
+    --c2g-theme-error: #ff9999;
+    --c2g-theme-error-container: #7f1d1d;
+    --c2g-theme-on-error: var(--c2g-color-neutral-900);
+    --c2g-theme-on-error-container: #fecaca;
+    --c2g-theme-success: #a7f3d0;
+    --c2g-theme-success-container: #134e4a;
+    --c2g-theme-on-success: var(--c2g-color-neutral-900);
+    --c2g-theme-on-success-container: #d1fae5;
+    --c2g-theme-warning: #fcd34d;
+    --c2g-theme-warning-container: #78350f;
+    --c2g-theme-on-warning: var(--c2g-color-neutral-900);
+    --c2g-theme-on-warning-container: #fde68a;
+    --c2g-theme-outline: var(--c2g-color-neutral-600);
+    --c2g-theme-outline-variant: var(--c2g-color-neutral-700);
+    --c2g-shadow-color: rgba(0, 0, 0, 0.4);
+  }
+}
+
+// ==========================================================================
+// ACCESSIBILITY ENHANCEMENTS
+// ==========================================================================
+// Enhanced focus indicators for all themes
+body.theme-high-contrast {
+  *:focus-visible {
+    outline: var(--c2g-focus-ring, 2px solid var(--c2g-theme-primary));
+    outline-offset: 2px;
+  }
+  
+  // Stronger borders in high contrast mode
+  .mat-mdc-button,
+  .mat-mdc-card,
+  .mat-mdc-menu-panel {
+    border: var(--c2g-border-width, 1px) solid var(--c2g-theme-outline);
+  }
+}
+
+// Reduced motion support
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+// ==========================================================================
+// THEME TRANSITION ANIMATIONS
+// ==========================================================================
+body {
+  transition: 
+    background-color var(--c2g-transition-medium),
+    color var(--c2g-transition-medium);
+}
+
+// Smooth transitions for theme-aware components
+.mat-mdc-card,
+.mat-mdc-button,
+.mat-mdc-menu-panel,
+.action-card,
+.dashboard-hero {
+  transition: 
+    background-color var(--c2g-transition-medium),
+    color var(--c2g-transition-medium),
+    border-color var(--c2g-transition-medium),
+    box-shadow var(--c2g-transition-medium);
+}

package/theme/index.d.ts

@@ -0,0 +1,63 @@
+import * as _angular_core from '@angular/core';
+import { Provider } from '@angular/core';
+
+type ThemeMode = 'light' | 'dark' | 'auto' | 'high-contrast';
+declare class ThemeService {
+    private readonly platformId;
+    private readonly destroyRef;
+    private readonly _currentTheme;
+    private readonly _isSystemDark;
+    private mediaQueryCleanup?;
+    readonly currentTheme: _angular_core.Signal<ThemeMode>;
+    readonly isSystemDark: _angular_core.Signal<boolean>;
+    readonly effectiveTheme: _angular_core.Signal<ThemeMode>;
+    readonly isLightTheme: _angular_core.Signal<boolean>;
+    readonly isDarkTheme: _angular_core.Signal<boolean>;
+    readonly isHighContrastTheme: _angular_core.Signal<boolean>;
+    constructor();
+    private initializeBrowserFeatures;
+    private getInitialTheme;
+    private getInitialSystemPreference;
+    private watchSystemPreference;
+    private applyThemeToDOM;
+    setTheme(theme: ThemeMode): void;
+    toggleTheme(): void;
+    resetToSystemPreference(): void;
+    getCurrentTheme(): ThemeMode;
+    getEffectiveTheme(): ThemeMode;
+    private cleanup;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeService>;
+}
+
+declare class ThemeSwitcherComponent {
+    protected readonly themeService: ThemeService;
+    protected readonly currentTheme: _angular_core.Signal<ThemeMode>;
+    protected readonly themeIcon: _angular_core.Signal<string>;
+    protected readonly themeOptions: {
+        value: ThemeMode;
+        label: string;
+        icon: string;
+    }[];
+    protected selectTheme(theme: ThemeMode): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeSwitcherComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThemeSwitcherComponent, "c2g-theme-switcher", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Providers for the C2G Theme system that includes all necessary CDK dependencies
+ */
+declare const C2G_THEME_PROVIDERS: Provider[];
+/**
+ * Mock providers for testing or SSR environments where CDK might not be needed
+ */
+declare const C2G_THEME_MOCK_PROVIDERS: Provider[];
+/**
+ * Smart provider factory that chooses appropriate providers based on environment
+ */
+declare function getC2GThemeProviders(): Provider[];
+
+declare const C2G_TRANSLATIONS: Record<string, Record<string, unknown>>;
+
+export { C2G_THEME_MOCK_PROVIDERS, C2G_THEME_PROVIDERS, C2G_TRANSLATIONS, ThemeService, ThemeSwitcherComponent, getC2GThemeProviders };
+export type { ThemeMode };