eidosui 0.1.0__py3-none-any.whl → 0.3.0__py3-none-any.whl

eidos/css/themes/dark.css

@@ -0,0 +1,119 @@
+/* EidosUI Dark Theme */
+[data-theme="dark"] {
+    /* Core Colors - Dark Mode Adjusted */
+    --color-primary: #60a5fa;
+    --color-primary-hover: #3b82f6;
+    --color-primary-light: #1e3a8a;
+    --color-primary-dark: #2563eb;
+    --color-primary-foreground: #0f172a;
+    
+    --color-secondary: #9ca3af;
+    --color-secondary-hover: #d1d5db;
+    --color-secondary-light: #374151;
+    --color-secondary-dark: #e5e7eb;
+    --color-secondary-foreground: #0f172a;
+    
+    --color-accent: #a78bfa;
+    --color-accent-hover: #8b5cf6;
+    --color-accent-light: #5b21b6;
+    --color-accent-dark: #7c3aed;
+    --color-accent-foreground: #0f172a;
+    
+    /* Semantic Colors - Dark Mode Adjusted */
+    --color-success: #34d399;
+    --color-success-hover: #10b981;
+    --color-success-light: #065f46;
+    --color-success-dark: #6ee7b7;
+    --color-success-foreground: #0f172a;
+    
+    --color-cta: #fbbf24;
+    --color-cta-hover: #f59e0b;
+    --color-cta-light: #92400e;
+    --color-cta-dark: #fcd34d;
+    --color-cta-foreground: #0f172a;
+    
+    --color-warning: #fde047;
+    --color-warning-hover: #facc15;
+    --color-warning-light: #713f12;
+    --color-warning-dark: #fef08a;
+    --color-warning-foreground: #0f172a;
+    
+    --color-error: #f87171;
+    --color-error-hover: #ef4444;
+    --color-error-light: #7f1d1d;
+    --color-error-dark: #fca5a5;
+    --color-error-foreground: #0f172a;
+    
+    --color-info: #38bdf8;
+    --color-info-hover: #0ea5e9;
+    --color-info-light: #0c4a6e;
+    --color-info-dark: #7dd3fc;
+    --color-info-foreground: #0f172a;
+    
+    /* Surface Colors - Dark Mode */
+    --color-background: #0f172a;
+    --color-surface: #1e293b;
+    --color-surface-elevated: #334155;
+    --color-border: #334155;
+    --color-border-hover: #475569;
+    --color-input: #1e293b;
+    --color-card: #1e293b;
+    
+    /* Text Colors - Dark Mode */
+    --color-text: #f8fafc;
+    --color-text-muted: #94a3b8;
+    --color-text-subtle: #64748b;
+    --color-text-inverse: #0f172a;
+    
+    /* Shadows - Subtle for Dark Mode */
+    --shadow-xs: 0 0 0 1px rgb(255 255 255 / 0.05);
+    --shadow-sm: 0 0 0 1px rgb(255 255 255 / 0.1);
+    --shadow-base: 0 0 0 1px rgb(255 255 255 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.3);
+    --shadow-md: 0 0 0 1px rgb(255 255 255 / 0.1), 0 4px 6px -1px rgb(0 0 0 / 0.3);
+    --shadow-lg: 0 0 0 1px rgb(255 255 255 / 0.1), 0 10px 15px -3px rgb(0 0 0 / 0.3);
+    --shadow-xl: 0 0 0 1px rgb(255 255 255 / 0.1), 0 20px 25px -5px rgb(0 0 0 / 0.3);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);
+    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.3);
+  }
+  
+  /* Dark theme button overrides for better aesthetics */
+  [data-theme="dark"] .eidos-btn-primary,
+  [data-theme="dark"] .eidos-btn-secondary,
+  [data-theme="dark"] .eidos-btn-success,
+  [data-theme="dark"] .eidos-btn-error,
+  [data-theme="dark"] .eidos-btn-warning,
+  [data-theme="dark"] .eidos-btn-info,
+  [data-theme="dark"] .eidos-btn-cta {
+    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.2), 0 0 0 1px rgb(255 255 255 / 0.05);
+  }
+  
+  [data-theme="dark"] .eidos-btn-primary:hover,
+  [data-theme="dark"] .eidos-btn-secondary:hover,
+  [data-theme="dark"] .eidos-btn-success:hover,
+  [data-theme="dark"] .eidos-btn-error:hover,
+  [data-theme="dark"] .eidos-btn-warning:hover,
+  [data-theme="dark"] .eidos-btn-info:hover,
+  [data-theme="dark"] .eidos-btn-cta:hover {
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.2), 0 0 0 1px rgb(255 255 255 / 0.1);
+  }
+  
+  [data-theme="dark"] .eidos-btn-primary:active,
+  [data-theme="dark"] .eidos-btn-secondary:active,
+  [data-theme="dark"] .eidos-btn-success:active,
+  [data-theme="dark"] .eidos-btn-error:active,
+  [data-theme="dark"] .eidos-btn-warning:active,
+  [data-theme="dark"] .eidos-btn-info:active,
+  [data-theme="dark"] .eidos-btn-cta:active {
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.2), 0 0 0 1px rgb(255 255 255 / 0.05);
+  }
+  
+  [data-theme="dark"] .eidos-btn-ghost {
+    color: var(--color-text-muted);
+  }
+  
+  [data-theme="dark"] .eidos-btn-ghost:hover {
+    color: var(--color-text);
+    background-color: rgb(255 255 255 / 0.05);
+    border-color: rgb(255 255 255 / 0.1);
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2);
+  }

eidos/css/themes/eidos-variables.css

@@ -0,0 +1,190 @@
+/* EidosUI CSS Variables - Base Configuration */
+
+:root {
+    /* Core Colors */
+    --color-primary: #3b82f6;
+    --color-primary-hover: #2563eb;
+    --color-primary-light: #dbeafe;
+    --color-primary-dark: #1d4ed8;
+    --color-primary-foreground: #ffffff;
+    
+    --color-secondary: #6b7280;
+    --color-secondary-hover: #4b5563;
+    --color-secondary-light: #f9fafb;
+    --color-secondary-dark: #374151;
+    --color-secondary-foreground: #ffffff;
+    
+    --color-accent: #7c3aed;
+    --color-accent-hover: #6d28d9;
+    --color-accent-light: #f3e8ff;
+    --color-accent-dark: #5b21b6;
+    --color-accent-foreground: #ffffff;
+    
+    /* Semantic Colors */
+    --color-success: #10b981;
+    --color-success-hover: #059669;
+    --color-success-light: #d1fae5;
+    --color-success-dark: #047857;
+    --color-success-foreground: #ffffff;
+    
+    --color-cta: #f59e0b;
+    --color-cta-hover: #d97706;
+    --color-cta-light: #fef3c7;
+    --color-cta-dark: #b45309;
+    --color-cta-foreground: #ffffff;
+    
+    --color-warning: #eab308;
+    --color-warning-hover: #ca8a04;
+    --color-warning-light: #fefce8;
+    --color-warning-dark: #a16207;
+    --color-warning-foreground: #000000;
+    
+    --color-error: #dc2626;
+    --color-error-hover: #b91c1c;
+    --color-error-light: #fef2f2;
+    --color-error-dark: #991b1b;
+    --color-error-foreground: #ffffff;
+    
+    --color-info: #0ea5e9;
+    --color-info-hover: #0284c7;
+    --color-info-light: #f0f9ff;
+    --color-info-dark: #0369a1;
+    --color-info-foreground: #ffffff;
+    
+    /* Surface Colors */
+    --color-background: #ffffff;
+    --color-surface: #f8fafc;
+    --color-surface-elevated: #ffffff;
+    --color-border: #e2e8f0;
+    --color-border-hover: #cbd5e1;
+    --color-input: #ffffff;
+    --color-card: #ffffff;
+    
+    /* Text Colors */
+    --color-text: #0f172a;
+    --color-text-muted: #64748b;
+    --color-text-subtle: #94a3b8;
+    --color-text-inverse: #ffffff;
+    
+    /* RGB Values for Gradients (without rgb() wrapper) */
+    --color-primary-rgb: 59, 130, 246;
+    --color-secondary-rgb: 156, 163, 175;
+    --color-accent-rgb: 168, 85, 247;
+    --color-surface-rgb: 248, 250, 252;
+    --color-background-rgb: 255, 255, 255;
+    
+    /* Spacing Scale */
+    --space-xs: 0.25rem;   /* 4px */
+    --space-sm: 0.5rem;    /* 8px */
+    --space-md: 1rem;      /* 16px */
+    --space-lg: 1.5rem;    /* 24px */
+    --space-xl: 2rem;      /* 32px */
+    --space-2xl: 3rem;     /* 48px */
+    --space-3xl: 4rem;     /* 64px */
+    
+    /* Typography Scale */
+    --font-size-xs: 0.75rem;    /* 12px */
+    --font-size-sm: 0.875rem;   /* 14px */
+    --font-size-base: 1rem;     /* 16px */
+    --font-size-lg: 1.125rem;   /* 18px */
+    --font-size-xl: 1.25rem;    /* 20px */
+    --font-size-2xl: 1.5rem;    /* 24px */
+    --font-size-3xl: 1.875rem;  /* 30px */
+    --font-size-4xl: 2.25rem;   /* 36px */
+    --font-size-5xl: 3rem;      /* 48px */
+    --font-size-6xl: 3.75rem;   /* 60px */
+    
+    /* Font Weights */
+    --font-weight-thin: 100;
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    --font-weight-black: 900;
+    
+    /* Line Heights */
+    --line-height-none: 1;
+    --line-height-tight: 1.25;
+    --line-height-snug: 1.375;
+    --line-height-normal: 1.5;
+    --line-height-relaxed: 1.625;
+    --line-height-loose: 2;
+    
+    /* Letter Spacing */
+    --letter-spacing-tighter: -0.05em;
+    --letter-spacing-tight: -0.025em;
+    --letter-spacing-normal: 0em;
+    --letter-spacing-wide: 0.025em;
+    --letter-spacing-wider: 0.05em;
+    --letter-spacing-widest: 0.1em;
+    
+    /* Border Radius */
+    --radius-none: 0;
+    --radius-sm: 0.125rem;   /* 2px */
+    --radius-base: 0.25rem;  /* 4px */
+    --radius-md: 0.375rem;   /* 6px */
+    --radius-lg: 0.5rem;     /* 8px */
+    --radius-xl: 0.75rem;    /* 12px */
+    --radius-2xl: 1rem;      /* 16px */
+    --radius-3xl: 1.5rem;    /* 24px */
+    --radius-full: 9999px;
+    
+    /* Border Width */
+    --border-0: 0px;
+    --border: 1px;
+    --border-2: 2px;
+    --border-4: 4px;
+    --border-8: 8px;
+    
+    /* Shadows */
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-base: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --shadow-2xl: 0 30px 60px -15px rgb(0 0 0 / 0.3);
+    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+    --shadow-none: none;
+    
+    /* Opacity */
+    --opacity-0: 0;
+    --opacity-5: 0.05;
+    --opacity-10: 0.1;
+    --opacity-20: 0.2;
+    --opacity-25: 0.25;
+    --opacity-30: 0.3;
+    --opacity-40: 0.4;
+    --opacity-50: 0.5;
+    --opacity-60: 0.6;
+    --opacity-70: 0.7;
+    --opacity-75: 0.75;
+    --opacity-80: 0.8;
+    --opacity-90: 0.9;
+    --opacity-95: 0.95;
+    --opacity-100: 1;
+    
+    /* Animation */
+    --transition-fast: 150ms ease;
+    --transition-base: 200ms ease;
+    --transition-slow: 300ms ease;
+    --transition-slower: 500ms ease;
+    
+    /* Z-index */
+    --z-index-0: 0;
+    --z-index-10: 10;
+    --z-index-20: 20;
+    --z-index-30: 30;
+    --z-index-40: 40;
+    --z-index-50: 50;
+    --z-index-auto: auto;
+    
+    /* Breakpoints (for reference in JavaScript) */
+    --breakpoint-sm: 640px;
+    --breakpoint-md: 768px;
+    --breakpoint-lg: 1024px;
+    --breakpoint-xl: 1280px;
+    --breakpoint-2xl: 1536px;
+  }

eidos/css/themes/light.css

@@ -0,0 +1,80 @@
+/* EidosUI Light Theme */
+/* Default theme - these values are already defined in eidos-variables.css */
+/* This file exists for explicit light theme selection and future customization */
+
+[data-theme="light"] {
+    /* Core Colors */
+    --color-primary: #3b82f6;
+    --color-primary-hover: #2563eb;
+    --color-primary-light: #dbeafe;
+    --color-primary-dark: #1d4ed8;
+    --color-primary-foreground: #ffffff;
+    
+    --color-secondary: #6b7280;
+    --color-secondary-hover: #4b5563;
+    --color-secondary-light: #f9fafb;
+    --color-secondary-dark: #374151;
+    --color-secondary-foreground: #ffffff;
+    
+    --color-accent: #7c3aed;
+    --color-accent-hover: #6d28d9;
+    --color-accent-light: #f3e8ff;
+    --color-accent-dark: #5b21b6;
+    --color-accent-foreground: #ffffff;
+    
+    /* Semantic Colors */
+    --color-success: #10b981;
+    --color-success-hover: #059669;
+    --color-success-light: #d1fae5;
+    --color-success-dark: #047857;
+    --color-success-foreground: #ffffff;
+    
+    --color-cta: #f59e0b;
+    --color-cta-hover: #d97706;
+    --color-cta-light: #fef3c7;
+    --color-cta-dark: #b45309;
+    --color-cta-foreground: #ffffff;
+    
+    --color-warning: #eab308;
+    --color-warning-hover: #ca8a04;
+    --color-warning-light: #fefce8;
+    --color-warning-dark: #a16207;
+    --color-warning-foreground: #000000;
+    
+    --color-error: #dc2626;
+    --color-error-hover: #b91c1c;
+    --color-error-light: #fef2f2;
+    --color-error-dark: #991b1b;
+    --color-error-foreground: #ffffff;
+    
+    --color-info: #0ea5e9;
+    --color-info-hover: #0284c7;
+    --color-info-light: #f0f9ff;
+    --color-info-dark: #0369a1;
+    --color-info-foreground: #ffffff;
+    
+    /* Surface Colors */
+    --color-background: #ffffff;
+    --color-surface: #f8fafc;
+    --color-surface-elevated: #ffffff;
+    --color-border: #e2e8f0;
+    --color-border-hover: #cbd5e1;
+    --color-input: #ffffff;
+    --color-card: #ffffff;
+    
+    /* Text Colors */
+    --color-text: #0f172a;
+    --color-text-muted: #64748b;
+    --color-text-subtle: #94a3b8;
+    --color-text-inverse: #ffffff;
+    
+    /* Shadows - Light Theme */
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-base: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --shadow-2xl: 0 30px 60px -15px rgb(0 0 0 / 0.3);
+    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  }

eidos/js/eidos.js

@@ -0,0 +1,112 @@
+// eidos.js - Main EidosUI JavaScript file
+(function() {
+    'use strict';
+    
+    class EidosUI {
+        constructor() {
+            this.initToggle();
+            this.initScrollspy();
+        }
+        
+        initToggle() {
+            document.querySelectorAll('[data-toggle]').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    const targetId = btn.dataset.toggle;
+                    const target = document.querySelector(targetId);
+                    if (target) {
+                        const isHidden = target.classList.contains('hidden');
+                        target.classList.toggle('hidden');
+                        
+                        // Update ARIA attributes
+                        const toggleButtons = document.querySelectorAll(`[data-toggle="${targetId}"][role="button"]`);
+                        toggleButtons.forEach(toggleBtn => {
+                            toggleBtn.setAttribute('aria-expanded', isHidden);
+                            
+                            // Toggle menu icons if they exist
+                            const openIcon = toggleBtn.querySelector('[data-menu-icon="open"]');
+                            const closeIcon = toggleBtn.querySelector('[data-menu-icon="close"]');
+                            if (openIcon && closeIcon) {
+                                openIcon.classList.toggle('hidden');
+                                closeIcon.classList.toggle('hidden');
+                            }
+                        });
+                    }
+                });
+            });
+            
+            // Auto-close mobile menu when clicking a link
+            document.querySelectorAll('[data-mobile-menu="true"] a').forEach(link => {
+                link.addEventListener('click', () => {
+                    const menu = link.closest('[data-mobile-menu="true"]');
+                    if (menu && !menu.classList.contains('hidden')) {
+                        menu.classList.add('hidden');
+                        // Update toggle button state
+                        const menuId = '#' + menu.id;
+                        const toggleBtn = document.querySelector(`[data-toggle="${menuId}"][role="button"]`);
+                        if (toggleBtn) {
+                            toggleBtn.setAttribute('aria-expanded', 'false');
+                            const openIcon = toggleBtn.querySelector('[data-menu-icon="open"]');
+                            const closeIcon = toggleBtn.querySelector('[data-menu-icon="close"]');
+                            if (openIcon && closeIcon) {
+                                openIcon.classList.remove('hidden');
+                                closeIcon.classList.add('hidden');
+                            }
+                        }
+                    }
+                });
+            });
+        }
+        
+        initScrollspy() {
+            const containers = document.querySelectorAll('[data-scrollspy="true"]');
+            if (!containers.length) return;
+            
+            const sections = document.querySelectorAll('section[id], [data-scrollspy-target]');
+            if (!sections.length) return;
+            
+            const observerOptions = {
+                rootMargin: '-20% 0px -70% 0px',
+                threshold: [0, 0.1, 0.5, 1]
+            };
+            
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.intersectionRatio > 0.1) {
+                        const id = entry.target.id;
+                        containers.forEach(container => {
+                            const links = container.querySelectorAll('a[href^="#"]');
+                            links.forEach(link => {
+                                const isActive = link.getAttribute('href') === `#${id}`;
+                                link.classList.toggle('eidos-active', isActive);
+                            });
+                        });
+                    }
+                });
+            }, observerOptions);
+            
+            sections.forEach(section => observer.observe(section));
+            
+            // Smooth scrolling for nav links
+            containers.forEach(container => {
+                container.querySelectorAll('a[href^="#"]').forEach(link => {
+                    link.addEventListener('click', (e) => {
+                        const targetId = link.getAttribute('href');
+                        const target = document.querySelector(targetId);
+                        if (target) {
+                            e.preventDefault();
+                            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                        }
+                    });
+                });
+            });
+        }
+    }
+    
+    window.EidosUI = EidosUI;
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => new EidosUI());
+    } else {
+        new EidosUI();
+    }
+})();

eidos/plugins/__init__.py

@@ -0,0 +1 @@
+# EidosUI plugins package

eidos/plugins/markdown/__init__.py

@@ -0,0 +1,21 @@
+"""EidosUI Markdown Plugin - Theme-aware markdown rendering
+
+This plugin provides markdown rendering that automatically integrates with
+EidosUI themes through CSS variables.
+
+Basic usage:
+    from eidos.plugins.markdown import Markdown, MarkdownCSS
+    
+    # In your document head
+    MarkdownCSS()
+    
+    # In your content
+    Markdown("# Hello World\\n\\nThis is **markdown**!")
+"""
+
+from .components import Markdown, MarkdownCSS
+from .renderer import MarkdownRenderer
+
+__all__ = ["Markdown", "MarkdownCSS", "MarkdownRenderer"]
+
+__version__ = "0.1.0"

eidos/plugins/markdown/components.py

@@ -0,0 +1,53 @@
+"""Markdown components for EidosUI"""
+
+import air
+from typing import Optional
+from .renderer import MarkdownRenderer
+
+
+# Global renderer instance for reuse
+_renderer = MarkdownRenderer()
+
+
+def Markdown(content: str, class_: Optional[str] = None, **kwargs) -> air.Div:
+    """Main markdown component that renders markdown content with theme integration.
+    
+    Args:
+        content: Markdown text to render
+        class_: Additional CSS classes to apply
+        **kwargs: Additional attributes to pass to the wrapper div
+        
+    Returns:
+        air.Div containing the rendered markdown HTML
+    """
+    # Render the markdown content
+    html_content = _renderer.render(content)
+    
+    # Create the div with raw HTML content
+    if class_:
+        return air.Div(
+            air.RawHTML(html_content),
+            class_=class_,
+            **kwargs
+        )
+    else:
+        return air.Div(
+            air.RawHTML(html_content),
+            **kwargs
+        )
+
+
+def MarkdownCSS() -> air.Link:
+    """Returns a link tag to include the markdown CSS.
+    
+    This should be included in the head of your document to ensure
+    markdown styling is available.
+    
+    Returns:
+        air.Link element pointing to the markdown CSS file
+    """
+    return air.Link(
+        rel="stylesheet",
+        href="/eidos/plugins/markdown/css/markdown.css",
+        type="text/css"
+    )