kimu-core 0.4.1

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

@@ -0,0 +1,343 @@
+/**
+ * Retro 80s Theme - Nostalgic 1980s aesthetic
+ * 
+ * Inspired by 80s aesthetics with neon grids, LED displays,
+ * laser effects, and retro-futuristic vibes
+ * 
+ * Color Palette inspired by:
+ * - VHS tapes and CRT monitors
+ * - Neon signs and arcade machines
+ * - Synthwave and outrun aesthetics
+ */
+
+:root {
+  /* Primary Colors - Hot Pink/Magenta */
+  --kimu-primary: #FF10F0;
+  --kimu-primary-hover: #FF44F4;
+  --kimu-primary-active: #DD00CC;
+  --kimu-primary-light: rgba(255, 16, 240, 0.15);
+
+  /* Secondary Colors - Electric Cyan */
+  --kimu-secondary: #00FFFF;
+  --kimu-secondary-hover: #33FFFF;
+  --kimu-secondary-active: #00DDDD;
+
+  /* Accent Colors - Laser Orange */
+  --kimu-accent: #FF6600;
+  --kimu-accent-hover: #FF8833;
+  --kimu-accent-active: #DD5500;
+
+  /* Background Colors - Dark with Grid */
+  --kimu-bg-primary: #0D0221;
+  --kimu-bg-secondary: #190F33;
+  --kimu-bg-tertiary: #240F3F;
+  --kimu-bg-hover: #2F1456;
+
+  /* Text Colors - Bright LED style */
+  --kimu-text-primary: #FFFFFF;
+  --kimu-text-secondary: #FFE5FF;
+  --kimu-text-tertiary: #CCAAFF;
+  --kimu-text-disabled: #7744AA;
+
+  /* Border Colors - Glowing neon */
+  --kimu-border: #FF10F0;
+  --kimu-border-light: rgba(255, 16, 240, 0.4);
+  --kimu-border-strong: #00FFFF;
+
+  /* Status Colors - 80s Palette */
+  --kimu-success: #00FF00;
+  --kimu-warning: #FFFF00;
+  --kimu-error: #FF0055;
+  --kimu-info: #00DDFF;
+
+  /* Shadows - Neon glow effects */
+  --kimu-shadow-sm: 0 0 10px rgba(255, 16, 240, 0.5), 0 0 20px rgba(0, 255, 255, 0.3);
+  --kimu-shadow-md: 0 0 15px rgba(255, 16, 240, 0.6), 0 0 30px rgba(0, 255, 255, 0.4);
+  --kimu-shadow-lg: 0 0 25px rgba(255, 16, 240, 0.7), 0 0 50px rgba(0, 255, 255, 0.5);
+
+  /* Additional Component 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-secondary);
+  --kimu-link-hover: var(--kimu-primary);
+
+  /* Overlays */
+  --kimu-overlay: rgba(13, 2, 33, 0.9);
+}
+
+/* 80s Retro Styling */
+body {
+  color: var(--kimu-text-primary);
+  background: var(--kimu-bg-primary);
+  font-family: 'Orbitron', 'Share Tech Mono', 'Courier New', monospace;
+}
+
+/* Classic 80s Grid Background */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: 
+    /* Horizontal lines */
+    repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 39px,
+      rgba(255, 16, 240, 0.15) 39px,
+      rgba(255, 16, 240, 0.15) 40px
+    ),
+    /* Vertical lines */
+    repeating-linear-gradient(
+      90deg,
+      transparent,
+      transparent 39px,
+      rgba(0, 255, 255, 0.1) 39px,
+      rgba(0, 255, 255, 0.1) 40px
+    ),
+    /* Gradient horizon */
+    linear-gradient(
+      180deg,
+      rgba(13, 2, 33, 0) 0%,
+      rgba(13, 2, 33, 0) 50%,
+      rgba(255, 16, 240, 0.05) 70%,
+      rgba(0, 255, 255, 0.05) 100%
+    );
+  pointer-events: none;
+  z-index: -1;
+  animation: gridScroll 20s linear infinite;
+}
+
+@keyframes gridScroll {
+  0% {
+    background-position: 0 0, 0 0, 0 0;
+  }
+  100% {
+    background-position: 0 40px, 0 0, 0 100px;
+  }
+}
+
+/* LED-style text with scan lines effect */
+body::after {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 0.1) 0px,
+    transparent 1px,
+    transparent 2px,
+    rgba(0, 0, 0, 0.1) 3px
+  );
+  pointer-events: none;
+  z-index: 9999;
+  opacity: 0.3;
+}
+
+/* Headers with neon glow */
+h1, h2, h3, h4, h5, h6 {
+  color: var(--kimu-primary);
+  text-shadow: 
+    0 0 10px rgba(255, 16, 240, 0.8),
+    0 0 20px rgba(255, 16, 240, 0.6),
+    0 0 30px rgba(255, 16, 240, 0.4);
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+/* Buttons with laser effect */
+button {
+  background: linear-gradient(135deg, var(--kimu-primary), var(--kimu-secondary));
+  border: 2px solid var(--kimu-primary);
+  box-shadow: 
+    0 0 10px rgba(255, 16, 240, 0.5),
+    inset 0 0 10px rgba(255, 255, 255, 0.2);
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: bold;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Laser sweep animation on hover */
+button::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(
+    45deg,
+    transparent 30%,
+    rgba(255, 255, 255, 0.3) 50%,
+    transparent 70%
+  );
+  transform: translateX(-100%) translateY(-100%) rotate(45deg);
+  transition: transform 0.6s ease;
+}
+
+button:hover::before {
+  transform: translateX(100%) translateY(100%) rotate(45deg);
+}
+
+button:hover {
+  box-shadow: 
+    0 0 20px rgba(255, 16, 240, 0.8),
+    0 0 40px rgba(0, 255, 255, 0.6),
+    inset 0 0 15px rgba(255, 255, 255, 0.3);
+  transform: translateY(-2px);
+  border-color: var(--kimu-secondary);
+}
+
+button:active {
+  transform: translateY(0);
+  box-shadow: 
+    0 0 15px rgba(255, 16, 240, 0.6),
+    inset 0 0 10px rgba(0, 0, 0, 0.3);
+}
+
+/* Input fields with LED display style */
+input,
+textarea,
+select {
+  background: var(--kimu-input-bg);
+  border: 2px solid var(--kimu-border-light);
+  color: var(--kimu-secondary);
+  box-shadow: inset 0 0 10px rgba(255, 16, 240, 0.2);
+  font-family: 'Share Tech Mono', 'Courier New', monospace;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  border-color: var(--kimu-primary);
+  box-shadow: 
+    0 0 10px rgba(255, 16, 240, 0.5),
+    inset 0 0 15px rgba(255, 16, 240, 0.3);
+  color: var(--kimu-primary);
+}
+
+/* Cards with retro frame */
+.card,
+[class*="card"] {
+  background: var(--kimu-bg-secondary);
+  border: 2px solid var(--kimu-primary);
+  box-shadow: 
+    0 0 15px rgba(255, 16, 240, 0.4),
+    inset 0 0 20px rgba(255, 16, 240, 0.1);
+  position: relative;
+}
+
+/* Corner decorations for cards */
+.card::before,
+.card::after,
+[class*="card"]::before,
+[class*="card"]::after {
+  content: '';
+  position: absolute;
+  width: 15px;
+  height: 15px;
+  border: 2px solid var(--kimu-secondary);
+}
+
+.card::before,
+[class*="card"]::before {
+  top: -2px;
+  left: -2px;
+  border-right: none;
+  border-bottom: none;
+  box-shadow: -5px -5px 10px rgba(0, 255, 255, 0.3);
+}
+
+.card::after,
+[class*="card"]::after {
+  bottom: -2px;
+  right: -2px;
+  border-left: none;
+  border-top: none;
+  box-shadow: 5px 5px 10px rgba(0, 255, 255, 0.3);
+}
+
+/* Links with neon underline */
+a {
+  color: var(--kimu-link);
+  text-decoration: none;
+  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
+  border-bottom: 1px solid transparent;
+  transition: all 0.3s ease;
+}
+
+a:hover {
+  color: var(--kimu-primary);
+  text-shadow: 0 0 10px rgba(255, 16, 240, 0.8);
+  border-bottom: 1px solid var(--kimu-primary);
+}
+
+/* Scrollbar - Retro LED style */
+::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--kimu-bg-secondary);
+  border: 1px solid var(--kimu-border-light);
+  box-shadow: inset 0 0 10px rgba(255, 16, 240, 0.2);
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, var(--kimu-primary), var(--kimu-secondary));
+  border: 2px solid var(--kimu-bg-secondary);
+  box-shadow: 
+    0 0 10px rgba(255, 16, 240, 0.6),
+    inset 0 0 5px rgba(255, 255, 255, 0.3);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, var(--kimu-secondary), var(--kimu-accent));
+  box-shadow: 
+    0 0 15px rgba(0, 255, 255, 0.8),
+    inset 0 0 10px rgba(255, 255, 255, 0.5);
+}
+
+/* Selection with laser highlight */
+::selection {
+  background: rgba(255, 16, 240, 0.4);
+  color: var(--kimu-text-primary);
+  text-shadow: 0 0 10px rgba(255, 16, 240, 0.8);
+}
+
+/* Pulse animation for interactive elements */
+@keyframes neonPulse {
+  0%, 100% {
+    box-shadow: 
+      0 0 10px rgba(255, 16, 240, 0.5),
+      0 0 20px rgba(0, 255, 255, 0.3);
+  }
+  50% {
+    box-shadow: 
+      0 0 20px rgba(255, 16, 240, 0.8),
+      0 0 40px rgba(0, 255, 255, 0.6);
+  }
+}
+
+/* Apply pulse to focused/active elements */
+button:focus,
+input:focus,
+textarea:focus,
+select:focus {
+  animation: neonPulse 2s ease-in-out infinite;
+}

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

@@ -0,0 +1,62 @@
+/**
+ * Sunset Theme - Warm orange and pink sunset colors
+ * A warm and energetic theme inspired by beautiful sunsets
+ */
+
+:root {
+  /* Main colors */
+  --kimu-background: linear-gradient(135deg, #FF6B35 0%, #F7931E 50%, #FFA07A 100%);
+  --kimu-surface: rgba(255, 107, 53, 0.1);
+  --kimu-surface-elevated: rgba(255, 107, 53, 0.15);
+  
+  /* Text colors */
+  --kimu-text-primary: #2D1B00;
+  --kimu-text-secondary: #5D3A1A;
+  --kimu-text-tertiary: #8B5A2B;
+  --kimu-text-disabled: #A67C52;
+  
+  /* Border colors */
+  --kimu-border: #FF8C52;
+  --kimu-border-light: #FFB088;
+  --kimu-divider: rgba(255, 107, 53, 0.2);
+  
+  /* Accent colors */
+  --kimu-primary: #FF6B35;
+  --kimu-primary-dark: #E55B2B;
+  --kimu-primary-light: #FF8C52;
+  --kimu-secondary: #F7931E;
+  --kimu-accent: #FFA07A;
+  
+  /* State colors */
+  --kimu-success: #FFD700;
+  --kimu-warning: #FF8C00;
+  --kimu-error: #DC143C;
+  --kimu-info: #FF7F50;
+  
+  /* Shadow */
+  --kimu-shadow: rgba(255, 107, 53, 0.3);
+  --kimu-shadow-strong: rgba(255, 107, 53, 0.5);
+  
+  /* Component colors */
+  --kimu-input-bg: #FFF5EE;
+  --kimu-input-border: #FF8C52;
+  --kimu-button-bg: #FF6B35;
+  --kimu-button-hover: #E55B2B;
+  --kimu-card-bg: rgba(255, 255, 255, 0.95);
+  
+  /* Font */
+  --kimu-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+}
+
+/* Body background with gradient */
+body {
+  background: linear-gradient(135deg, #FF6B35 0%, #F7931E 50%, #FFA07A 100%);
+  background-attachment: fixed;
+  color: var(--kimu-text-primary);
+}
+
+/* Glow effect for interactive elements */
+button:hover,
+a:hover {
+  box-shadow: 0 0 15px rgba(255, 107, 53, 0.6);
+}

package/src/modules-repository/theme/themes-config.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Type definitions for themes configuration
+ */
+
+export interface ThemeColors {
+  background: string;
+  backgroundEnd: string;
+  text: string;
+  border: string;
+}
+
+export interface ThemeConfig {
+  name: string;
+  mode: 'light' | 'dark';
+  cssPath: string;
+  description?: string;
+  icon?: string;
+  colors?: ThemeColors;
+}
+
+export interface ThemesConfiguration {
+  themes: ThemeConfig[];
+  defaultTheme: string;
+}
+
+declare const themesConfig: ThemesConfiguration;
+export default themesConfig;

package/src/modules-repository/theme/themes-config.json

@@ -0,0 +1,213 @@
+{
+  "themes": [
+    {
+      "name": "light",
+      "mode": "light",
+      "cssPath": "theme-light.css",
+      "description": "Clean and bright theme",
+      "icon": "☀️",
+      "colors": {
+        "background": "#ffffff",
+        "backgroundEnd": "#f7fafc",
+        "text": "#1a202c",
+        "border": "#e2e8f0"
+      }
+    },
+    {
+      "name": "dark",
+      "mode": "dark",
+      "cssPath": "theme-dark.css",
+      "description": "Dark theme for low-light environments",
+      "icon": "🌙",
+      "colors": {
+        "background": "#1a202c",
+        "backgroundEnd": "#2d3748",
+        "text": "#f7fafc",
+        "border": "#4a5568"
+      }
+    },
+    {
+      "name": "ocean",
+      "mode": "dark",
+      "cssPath": "theme-ocean.css",
+      "description": "Ocean-inspired dark theme",
+      "icon": "🌊",
+      "colors": {
+        "background": "#0c1821",
+        "backgroundEnd": "#1b3a4b",
+        "text": "#e0f2fe",
+        "border": "#155e75"
+      }
+    },
+    {
+      "name": "cozy",
+      "mode": "light",
+      "cssPath": "theme-cozy.css",
+      "description": "Warm and cozy feminine theme",
+      "icon": "🌸",
+      "colors": {
+        "background": "#fef3f2",
+        "backgroundEnd": "#fff1f0",
+        "text": "#431407",
+        "border": "#fed7d7"
+      }
+    },
+    {
+      "name": "nord",
+      "mode": "dark",
+      "cssPath": "theme-nord.css",
+      "description": "Cold and relaxing Nordic theme",
+      "icon": "❄️",
+      "colors": {
+        "background": "#2E3440",
+        "backgroundEnd": "#3B4252",
+        "text": "#88C0D0",
+        "border": "#4C566A"
+      }
+    },
+    {
+      "name": "forest",
+      "mode": "light",
+      "cssPath": "theme-forest.css",
+      "description": "Natural green theme",
+      "icon": "🌲",
+      "colors": {
+        "background": "#F5F3EF",
+        "backgroundEnd": "#EAE7E0",
+        "text": "#2D5016",
+        "border": "#B8B3A7"
+      }
+    },
+    {
+      "name": "high-contrast",
+      "mode": "light",
+      "cssPath": "theme-high-contrast.css",
+      "description": "High contrast theme for accessibility",
+      "icon": "⚡",
+      "colors": {
+        "background": "#FFFFFF",
+        "backgroundEnd": "#F5F5F5",
+        "text": "#000000",
+        "border": "#000000"
+      }
+    },
+    {
+      "name": "cyberpunk",
+      "mode": "dark",
+      "cssPath": "theme-cyberpunk.css",
+      "description": "Futuristic neon theme",
+      "icon": "🎮",
+      "colors": {
+        "background": "#0A0A0F",
+        "backgroundEnd": "#14141F",
+        "text": "#00F0FF",
+        "border": "#FF006E"
+      }
+    },
+    {
+      "name": "retro80s",
+      "mode": "dark",
+      "cssPath": "theme-retro80s.css",
+      "description": "Nostalgic 80s aesthetic with LED and laser effects",
+      "icon": "🕹️",
+      "colors": {
+        "background": "#0D0221",
+        "backgroundEnd": "#190F33",
+        "text": "#FF10F0",
+        "border": "#00FFFF"
+      }
+    },
+    {
+      "name": "sunset",
+      "mode": "light",
+      "cssPath": "theme-sunset.css",
+      "description": "Warm orange and pink sunset colors",
+      "icon": "🌅",
+      "colors": {
+        "background": "#FF6B35",
+        "backgroundEnd": "#FFA07A",
+        "text": "#2D1B00",
+        "border": "#FF8C52"
+      }
+    },
+    {
+      "name": "midnight",
+      "mode": "dark",
+      "cssPath": "theme-midnight.css",
+      "description": "Deep blue night colors with stars",
+      "icon": "🌃",
+      "colors": {
+        "background": "#0B1D3D",
+        "backgroundEnd": "#2A4A7C",
+        "text": "#E0E7FF",
+        "border": "#3D5A8C"
+      }
+    },
+    {
+      "name": "cherry-blossom",
+      "mode": "light",
+      "cssPath": "theme-cherry-blossom.css",
+      "description": "Delicate pink sakura colors",
+      "icon": "🌸",
+      "colors": {
+        "background": "#FFE5EC",
+        "backgroundEnd": "#FFC2D4",
+        "text": "#6B2E4F",
+        "border": "#FFB3C6"
+      }
+    },
+    {
+      "name": "lava",
+      "mode": "dark",
+      "cssPath": "theme-lava.css",
+      "description": "Intense red and orange fire colors",
+      "icon": "🌋",
+      "colors": {
+        "background": "#1A0000",
+        "backgroundEnd": "#660000",
+        "text": "#FFE5D9",
+        "border": "#FF4500"
+      }
+    },
+    {
+      "name": "matrix",
+      "mode": "dark",
+      "cssPath": "theme-matrix.css",
+      "description": "Green phosphorescent hacker theme",
+      "icon": "💚",
+      "colors": {
+        "background": "#000000",
+        "backgroundEnd": "#001100",
+        "text": "#00FF41",
+        "border": "#00FF41"
+      }
+    },
+    {
+      "name": "gold",
+      "mode": "dark",
+      "cssPath": "theme-gold.css",
+      "description": "Elegant gold and luxury colors",
+      "icon": "👑",
+      "colors": {
+        "background": "#1A1410",
+        "backgroundEnd": "#3A3020",
+        "text": "#FFD700",
+        "border": "#DAA520"
+      }
+    },
+    {
+      "name": "lavender",
+      "mode": "light",
+      "cssPath": "theme-lavender.css",
+      "description": "Relaxing purple lavender colors",
+      "icon": "💜",
+      "colors": {
+        "background": "#F4ECFA",
+        "backgroundEnd": "#D8C6F0",
+        "text": "#4A2C5B",
+        "border": "#C8B2E0"
+      }
+    }
+  ],
+  "defaultTheme": "light"
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    /* Enable support for decorators. */
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    
+    /* Tree shaking optimization */
+    "importsNotUsedAsValues": "remove",
+    "preserveValueImports": false,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    /* Emit type metadata for decorators, required for using the reflect-metadata library. */
+    "emitDecoratorMetadata": true,
+  },
+  "include": ["src"]
+}