kimu-core 0.4.1

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

@@ -0,0 +1,150 @@
+/**
+ * Cyberpunk Theme - Futuristic neon aesthetic
+ * 
+ * Inspired by cyberpunk aesthetics with neon colors,
+ * dark backgrounds, and electric accents
+ */
+
+:root {
+  /* Primary Colors - Neon Cyan */
+  --kimu-primary: #00F0FF;
+  --kimu-primary-hover: #33F3FF;
+  --kimu-primary-active: #00D0E0;
+  --kimu-primary-light: rgba(0, 240, 255, 0.15);
+
+  /* Secondary Colors - Electric Pink */
+  --kimu-secondary: #FF006E;
+  --kimu-secondary-hover: #FF3388;
+  --kimu-secondary-active: #E0005E;
+
+  /* Accent Colors - Neon Purple */
+  --kimu-accent: #B100FF;
+  --kimu-accent-hover: #C433FF;
+  --kimu-accent-active: #9900E0;
+
+  /* Background Colors - Deep Dark */
+  --kimu-bg-primary: #0A0A0F;
+  --kimu-bg-secondary: #14141F;
+  --kimu-bg-tertiary: #1E1E2E;
+  --kimu-bg-hover: #28283D;
+
+  /* Text Colors - Bright Neon */
+  --kimu-text-primary: #F0F0FF;
+  --kimu-text-secondary: #C0C0E0;
+  --kimu-text-tertiary: #9090C0;
+  --kimu-text-disabled: #505070;
+
+  /* Border Colors - Glowing edges */
+  --kimu-border: #00F0FF;
+  --kimu-border-light: rgba(0, 240, 255, 0.3);
+  --kimu-border-strong: #FF006E;
+
+  /* Status Colors - Neon Palette */
+  --kimu-success: #00FF88;
+  --kimu-warning: #FFD700;
+  --kimu-error: #FF0055;
+  --kimu-info: #00CCFF;
+
+  /* Shadows - Glowing effects */
+  --kimu-shadow-sm: 0 0 10px rgba(0, 240, 255, 0.3);
+  --kimu-shadow-md: 0 0 20px rgba(0, 240, 255, 0.4);
+  --kimu-shadow-lg: 0 0 30px rgba(0, 240, 255, 0.5);
+
+  /* Additional Component-specific Colors */
+  --kimu-card-bg: var(--kimu-bg-secondary);
+  --kimu-input-bg: var(--kimu-bg-tertiary);
+  --kimu-input-border: var(--kimu-border-light);
+  --kimu-input-focus: var(--kimu-primary);
+
+  /* Links - Neon glow */
+  --kimu-link: var(--kimu-primary);
+  --kimu-link-hover: var(--kimu-secondary);
+
+  /* Overlays */
+  --kimu-overlay: rgba(10, 10, 15, 0.9);
+}
+
+/* Cyberpunk-specific styling */
+body {
+  color: var(--kimu-text-primary);
+  background: var(--kimu-bg-primary);
+  font-family: 'Courier New', 'Consolas', monospace;
+}
+
+/* Add subtle grid background */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: 
+    linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
+  background-size: 50px 50px;
+  pointer-events: none;
+  z-index: -1;
+}
+
+/* Glowing text effect for headers */
+h1, h2, h3, h4, h5, h6 {
+  color: var(--kimu-primary);
+  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
+}
+
+/* Button glow effects */
+button {
+  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
+  transition: all 0.3s ease;
+}
+
+button:hover {
+  box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
+  transform: translateY(-2px);
+}
+
+/* Input glow on focus */
+input:focus,
+textarea:focus,
+select:focus {
+  box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
+  border-color: var(--kimu-primary);
+}
+
+/* Link neon glow */
+a {
+  text-shadow: 0 0 5px rgba(0, 240, 255, 0.5);
+  transition: all 0.3s ease;
+}
+
+a:hover {
+  text-shadow: 0 0 10px rgba(255, 0, 110, 0.8);
+}
+
+/* Scrollbar - Neon style */
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--kimu-bg-secondary);
+  border: 1px solid rgba(0, 240, 255, 0.2);
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #00F0FF, #B100FF);
+  border-radius: 6px;
+  box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  box-shadow: 0 0 15px rgba(0, 240, 255, 0.8);
+}
+
+/* Selection glow */
+::selection {
+  background: rgba(0, 240, 255, 0.3);
+  text-shadow: 0 0 5px rgba(0, 240, 255, 0.8);
+}

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

@@ -0,0 +1,79 @@
+/**
+ * KIMU Dark Theme
+ * Dark theme for low-light environments and reduced eye strain
+ * 
+ * This file OVERRIDES the default CSS variables defined in style.css
+ * When this theme is loaded, these values take precedence.
+ */
+
+:root {
+  /* Primary colors */
+  --kimu-primary: #818cf8;
+  --kimu-primary-light: #a5b4fc;
+  --kimu-primary-dark: #667eea;
+  --kimu-text-on-primary: #1a202c;
+  
+  /* Accent colors */
+  --kimu-accent: #9f7aea;
+  --kimu-accent-light: #b794f4;
+  --kimu-accent-dark: #805ad5;
+  --kimu-text-on-accent: #1a202c;
+  
+  /* Background colors */
+  --kimu-background: #1a202c;
+  --kimu-background-alt: #2d3748;
+  --kimu-surface: #2d3748;
+  
+  /* Text colors */
+  --kimu-text-primary: #f7fafc;
+  --kimu-text-secondary: #e2e8f0;
+  --kimu-text-disabled: #718096;
+  
+  /* Semantic colors */
+  --kimu-success: #34d399;
+  --kimu-success-light: #6ee7b7;
+  --kimu-success-dark: #10b981;
+  
+  --kimu-warning: #fbbf24;
+  --kimu-warning-light: #fcd34d;
+  --kimu-warning-dark: #f59e0b;
+  
+  --kimu-error: #f87171;
+  --kimu-error-light: #fca5a5;
+  --kimu-error-dark: #ef4444;
+  
+  --kimu-info: #60a5fa;
+  --kimu-info-light: #93c5fd;
+  --kimu-info-dark: #3b82f6;
+  
+  /* Borders and dividers */
+  --kimu-border: #4a5568;
+  --kimu-divider: #374151;
+  
+  /* Shadows */
+  --kimu-shadow: rgba(0, 0, 0, 0.3);
+  --kimu-shadow-light: rgba(0, 0, 0, 0.2);
+  --kimu-shadow-medium: rgba(0, 0, 0, 0.4);
+  --kimu-shadow-heavy: rgba(0, 0, 0, 0.6);
+  
+  /* Additional UI colors */
+  --kimu-card-bg: #2d3748;
+  --kimu-card-border: #4a5568;
+  --kimu-input-bg: #374151;
+  --kimu-input-border: #4b5563;
+  --kimu-input-focus: #818cf8;
+  
+  /* Navigation */
+  --kimu-nav-bg: #1f2937;
+  --kimu-nav-text: #e2e8f0;
+  --kimu-nav-active: #818cf8;
+  
+  /* Footer */
+  --kimu-footer-bg: #111827;
+  --kimu-footer-text: #9ca3af;
+}
+
+/* Smooth transitions for theme changes */
+* {
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}

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

@@ -0,0 +1,171 @@
+/**
+ * Forest Theme - Natural green theme
+ * 
+ * Inspired by nature with earthy greens, browns,
+ * and natural tones for a calming effect
+ */
+
+:root {
+  /* Primary Colors - Forest Green */
+  --kimu-primary: #2D5016;
+  --kimu-primary-hover: #3A6B1E;
+  --kimu-primary-active: #234012;
+  --kimu-primary-light: rgba(45, 80, 22, 0.1);
+
+  /* Secondary Colors - Moss Green */
+  --kimu-secondary: #5A7D3C;
+  --kimu-secondary-hover: #6B9147;
+  --kimu-secondary-active: #4A6B30;
+
+  /* Accent Colors - Earthy Brown */
+  --kimu-accent: #8B6F47;
+  --kimu-accent-hover: #A68658;
+  --kimu-accent-active: #755E3B;
+
+  /* Background Colors - Light Natural Tones */
+  --kimu-bg-primary: #F5F3EF;
+  --kimu-bg-secondary: #EAE7E0;
+  --kimu-bg-tertiary: #DDD9CF;
+  --kimu-bg-hover: #D0CCBF;
+
+  /* Text Colors - Dark Natural */
+  --kimu-text-primary: #2C2C2C;
+  --kimu-text-secondary: #4A4A4A;
+  --kimu-text-tertiary: #6A6A6A;
+  --kimu-text-disabled: #9A9A9A;
+
+  /* Border Colors - Subtle Earthy */
+  --kimu-border: #B8B3A7;
+  --kimu-border-light: #D0CCBF;
+  --kimu-border-strong: #8B6F47;
+
+  /* Status Colors - Natural Palette */
+  --kimu-success: #4A7C2E;
+  --kimu-warning: #D4A017;
+  --kimu-error: #A94442;
+  --kimu-info: #5A7D8C;
+
+  /* Shadows - Soft natural */
+  --kimu-shadow-sm: 0 2px 4px rgba(45, 80, 22, 0.1);
+  --kimu-shadow-md: 0 4px 8px rgba(45, 80, 22, 0.15);
+  --kimu-shadow-lg: 0 8px 16px rgba(45, 80, 22, 0.2);
+
+  /* Additional Component-specific Colors */
+  --kimu-card-bg: #FFFFFF;
+  --kimu-input-bg: #FFFFFF;
+  --kimu-input-border: var(--kimu-border);
+  --kimu-input-focus: var(--kimu-primary);
+
+  /* Links */
+  --kimu-link: var(--kimu-primary);
+  --kimu-link-hover: var(--kimu-secondary);
+
+  /* Overlays */
+  --kimu-overlay: rgba(45, 80, 22, 0.6);
+}
+
+/* Forest-specific styling */
+body {
+  color: var(--kimu-text-primary);
+  background: var(--kimu-bg-primary);
+}
+
+/* Add subtle texture */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: 
+    repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 2px,
+      rgba(45, 80, 22, 0.02) 2px,
+      rgba(45, 80, 22, 0.02) 4px
+    );
+  pointer-events: none;
+  z-index: -1;
+}
+
+/* Headers with natural feel */
+h1, h2, h3, h4, h5, h6 {
+  color: var(--kimu-primary);
+  font-weight: 600;
+}
+
+/* Buttons with organic feel */
+button {
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+button:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--kimu-shadow-md);
+}
+
+/* Cards with paper-like appearance */
+.card,
+[class*="card"] {
+  background: #FFFFFF;
+  border-radius: 12px;
+  box-shadow: var(--kimu-shadow-sm);
+}
+
+/* Inputs with natural borders */
+input,
+textarea,
+select {
+  border-radius: 6px;
+  border: 1.5px solid var(--kimu-border);
+  transition: all 0.3s ease;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  border-color: var(--kimu-primary);
+  box-shadow: 0 0 0 3px var(--kimu-primary-light);
+}
+
+/* Links with natural underline */
+a {
+  text-decoration: none;
+  border-bottom: 1px solid var(--kimu-border-light);
+  transition: all 0.2s ease;
+}
+
+a:hover {
+  border-bottom-color: var(--kimu-primary);
+  color: var(--kimu-primary);
+}
+
+/* Scrollbar - Natural wood style */
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--kimu-bg-secondary);
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, var(--kimu-secondary), var(--kimu-accent));
+  border-radius: 6px;
+  border: 2px solid var(--kimu-bg-secondary);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--kimu-primary);
+}
+
+/* Selection with natural highlight */
+::selection {
+  background: var(--kimu-primary-light);
+  color: var(--kimu-text-primary);
+}

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

@@ -0,0 +1,100 @@
+/**
+ * Gold Theme - Elegant gold and luxury colors
+ * A premium theme with golden accents
+ */
+
+:root {
+  /* Main colors */
+  --kimu-background: linear-gradient(135deg, #1A1410 0%, #2A2218 50%, #3A3020 100%);
+  --kimu-surface: rgba(218, 165, 32, 0.1);
+  --kimu-surface-elevated: rgba(218, 165, 32, 0.15);
+  
+  /* Text colors */
+  --kimu-text-primary: #FFD700;
+  --kimu-text-secondary: #F0C85B;
+  --kimu-text-tertiary: #D4AF37;
+  --kimu-text-disabled: #B8941F;
+  
+  /* Border colors */
+  --kimu-border: #DAA520;
+  --kimu-border-light: #FFD700;
+  --kimu-divider: rgba(218, 165, 32, 0.3);
+  
+  /* Accent colors */
+  --kimu-primary: #FFD700;
+  --kimu-primary-dark: #DAA520;
+  --kimu-primary-light: #FFEC8B;
+  --kimu-secondary: #F0C85B;
+  --kimu-accent: #FFE55C;
+  
+  /* State colors */
+  --kimu-success: #90EE90;
+  --kimu-warning: #FFA500;
+  --kimu-error: #DC143C;
+  --kimu-info: #87CEEB;
+  
+  /* Shadow */
+  --kimu-shadow: rgba(218, 165, 32, 0.4);
+  --kimu-shadow-strong: rgba(218, 165, 32, 0.7);
+  
+  /* Component colors */
+  --kimu-input-bg: rgba(42, 34, 24, 0.7);
+  --kimu-input-border: #DAA520;
+  --kimu-button-bg: #FFD700;
+  --kimu-button-hover: #FFEC8B;
+  --kimu-card-bg: rgba(42, 34, 24, 0.9);
+  
+  /* Font */
+  --kimu-font: 'Georgia', 'Times New Roman', serif;
+}
+
+/* Body background with gradient */
+body {
+  background: linear-gradient(135deg, #1A1410 0%, #2A2218 50%, #3A3020 100%);
+  background-attachment: fixed;
+  color: var(--kimu-text-primary);
+  font-family: var(--kimu-font);
+}
+
+/* Gold shine animation */
+@keyframes gold-shine {
+  0% {
+    background-position: -200% center;
+  }
+  100% {
+    background-position: 200% center;
+  }
+}
+
+/* Luxury glow effect */
+button:hover,
+a:hover {
+  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6),
+              0 0 40px rgba(255, 215, 0, 0.3),
+              0 8px 24px rgba(0, 0, 0, 0.4);
+  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
+}
+
+/* Elegant text shadow */
+h1, h2, h3, h4, h5, h6 {
+  text-shadow: 0 2px 10px rgba(255, 215, 0, 0.5),
+               0 0 20px rgba(218, 165, 32, 0.3);
+}
+
+/* Sparkle effect */
+body::after {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: 
+    radial-gradient(2px 2px at 15% 25%, rgba(255, 215, 0, 0.4), transparent),
+    radial-gradient(2px 2px at 75% 65%, rgba(255, 215, 0, 0.3), transparent),
+    radial-gradient(1px 1px at 45% 85%, rgba(255, 236, 139, 0.5), transparent),
+    radial-gradient(1px 1px at 85% 15%, rgba(218, 165, 32, 0.4), transparent);
+  background-size: 250px 250px, 300px 300px, 200px 200px, 280px 280px;
+  pointer-events: none;
+  z-index: 0;
+}

package/src/modules-repository/theme/themes/theme-high-contrast.css

@@ -0,0 +1,126 @@
+/**
+ * High Contrast Theme - For accessibility
+ * 
+ * Designed following WCAG AAA guidelines:
+ * - Contrast ratio ≥ 7:1 for normal text
+ * - Contrast ratio ≥ 4.5:1 for large text
+ * - Clear visual indicators for focus and active states
+ */
+
+:root {
+  /* Primary Colors - Pure Black on White */
+  --kimu-primary: #0000FF;
+  --kimu-primary-hover: #0000CC;
+  --kimu-primary-active: #000099;
+  --kimu-primary-light: rgba(0, 0, 255, 0.15);
+
+  /* Secondary Colors - Dark Green */
+  --kimu-secondary: #006600;
+  --kimu-secondary-hover: #008800;
+  --kimu-secondary-active: #004400;
+
+  /* Accent Colors - Dark Purple */
+  --kimu-accent: #660099;
+  --kimu-accent-hover: #7700AA;
+  --kimu-accent-active: #550088;
+
+  /* Background Colors - Pure White */
+  --kimu-bg-primary: #FFFFFF;
+  --kimu-bg-secondary: #F5F5F5;
+  --kimu-bg-tertiary: #EBEBEB;
+  --kimu-bg-hover: #E0E0E0;
+
+  /* Text Colors - Pure Black */
+  --kimu-text-primary: #000000;
+  --kimu-text-secondary: #1A1A1A;
+  --kimu-text-tertiary: #333333;
+  --kimu-text-disabled: #666666;
+
+  /* Border Colors - Strong Contrast */
+  --kimu-border: #000000;
+  --kimu-border-light: #333333;
+  --kimu-border-strong: #000000;
+
+  /* Status Colors - High Contrast */
+  --kimu-success: #006600;
+  --kimu-warning: #CC6600;
+  --kimu-error: #CC0000;
+  --kimu-info: #0000CC;
+
+  /* Shadows - Stronger for visibility */
+  --kimu-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
+  --kimu-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
+  --kimu-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
+
+  /* Additional Component-specific Colors */
+  --kimu-card-bg: var(--kimu-bg-primary);
+  --kimu-input-bg: #FFFFFF;
+  --kimu-input-border: #000000;
+  --kimu-input-focus: #0000FF;
+
+  /* Links - Underlined by default for accessibility */
+  --kimu-link: #0000FF;
+  --kimu-link-hover: #0000CC;
+
+  /* Overlays */
+  --kimu-overlay: rgba(0, 0, 0, 0.85);
+}
+
+/* High Contrast specific enhancements */
+body {
+  color: var(--kimu-text-primary);
+  background: var(--kimu-bg-primary);
+}
+
+/* Ensure all links are underlined */
+a {
+  text-decoration: underline;
+  font-weight: bold;
+}
+
+/* Strong focus indicators */
+:focus-visible {
+  outline: 3px solid var(--kimu-primary);
+  outline-offset: 2px;
+}
+
+/* Button styling with clear borders */
+button {
+  border: 2px solid var(--kimu-border) !important;
+  font-weight: bold;
+}
+
+/* Input styling with clear borders */
+input,
+textarea,
+select {
+  border: 2px solid var(--kimu-border) !important;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  border-color: var(--kimu-input-focus) !important;
+  outline: 2px solid var(--kimu-input-focus);
+  outline-offset: 1px;
+}
+
+/* Scrollbar - High contrast */
+::-webkit-scrollbar {
+  width: 16px;
+  height: 16px;
+}
+
+::-webkit-scrollbar-track {
+  background: #F0F0F0;
+  border: 1px solid #000000;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #000000;
+  border: 2px solid #FFFFFF;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #333333;
+}