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

eidos/components/__init__.py

@@ -1,22 +0,0 @@
-"""EidosUI Components - Simple MVP"""
-
-# Semantic Typography
-from .typography import (
-    H1, H2, H3, H4, H5, H6,
-    P, Text, Em, Strong, A,
-    Code, Pre, Mark, Small
-)
-
-# Forms
-from .forms import (
-    Button, Input, Textarea, Select, Label, FormGroup
-)
-
-__all__ = [
-    # Typography
-    "H1", "H2", "H3", "H4", "H5", "H6",
-    "P", "Text", "Em", "Strong", "A", 
-    "Code", "Pre", "Mark", "Small",
-    # Forms
-    "Button", "Input", "Textarea", "Select", "Label", "FormGroup",
-] 

eidos/components/forms.py

@@ -1,57 +0,0 @@
-"""Form components for EidosUI"""
-
-import fastapi_tags as ft
-from ..core.styles import button_styles, form_styles
-from ..core.utils import merge_classes
-
-
-def Button(*content, cls: str = button_styles.primary, size_cls: str = button_styles.md, **kwargs) -> ft.Button:
-    """Highly flexible button component that takes classes directly"""
-    return ft.Button(
-        *content,
-        cls=merge_classes(cls, size_cls),
-        **kwargs
-    )
-
-
-def Input(cls: str = form_styles.input, size_cls: str = "", state_cls: str = "", **kwargs) -> ft.Input:
-    """Flexible input component with class-based styling"""
-    return ft.Input(
-        cls=merge_classes(cls, size_cls, state_cls),
-        **kwargs
-    )
-
-
-def Textarea(cls: str = form_styles.textarea, **kwargs) -> ft.Textarea:
-    """Flexible textarea component"""
-    return ft.Textarea(
-        cls=cls,
-        **kwargs
-    )
-
-
-def Select(*options, cls: str = form_styles.select, **kwargs) -> ft.Select:
-    """Flexible select component"""
-    return ft.Select(
-        *options,
-        cls=cls,
-        **kwargs
-    )
-
-
-def Label(text: str, cls: str = form_styles.label, **kwargs) -> ft.Label:
-    """Flexible label component"""
-    return ft.Label(
-        text,
-        cls=cls,
-        **kwargs
-    )
-
-
-def FormGroup(*content, cls: str = form_styles.form_group, **kwargs) -> ft.Div:
-    """Form group container with default spacing"""
-    return ft.Div(
-        *content,
-        cls=cls,
-        **kwargs
-    ) 

eidos/components/typography.py

@@ -1,85 +0,0 @@
-"""Semantic typography components for EidosUI"""
-
-import fastapi_tags as ft
-from ..core.styles import typography_styles
-from ..core.utils import merge_classes
-
-
-def H1(*content, cls: str = typography_styles.h1, **kwargs) -> ft.H1:
-    """Semantic H1 heading"""
-    return ft.H1(*content, cls=cls, **kwargs)
-
-
-def H2(*content, cls: str = typography_styles.h2, **kwargs) -> ft.H2:
-    """Semantic H2 heading"""
-    return ft.H2(*content, cls=cls, **kwargs)
-
-
-def H3(*content, cls: str = typography_styles.h3, **kwargs) -> ft.H3:
-    """Semantic H3 heading"""
-    return ft.H3(*content, cls=cls, **kwargs)
-
-
-def H4(*content, cls: str = typography_styles.h4, **kwargs) -> ft.H4:
-    """Semantic H4 heading"""
-    return ft.H4(*content, cls=cls, **kwargs)
-
-
-def H5(*content, cls: str = typography_styles.h5, **kwargs) -> ft.H5:
-    """Semantic H5 heading"""
-    return ft.H5(*content, cls=cls, **kwargs)
-
-
-def H6(*content, cls: str = typography_styles.h6, **kwargs) -> ft.H6:
-    """Semantic H6 heading"""
-    return ft.H6(*content, cls=cls, **kwargs)
-
-
-def P(*content, cls: str = typography_styles.body, **kwargs) -> ft.P:
-    """Semantic paragraph"""
-    return ft.P(*content, cls=cls, **kwargs)
-
-
-def Text(*content, cls: str = typography_styles.body, **kwargs) -> ft.Span:
-    """Generic text span"""
-    return ft.Span(*content, cls=cls, **kwargs)
-
-
-def Em(*content, cls: str = typography_styles.em, **kwargs) -> ft.Em:
-    """Semantic emphasis (italic)"""
-    return ft.Em(*content, cls=cls, **kwargs)
-
-
-def Strong(*content, cls: str = typography_styles.strong, **kwargs) -> ft.Strong:
-    """Semantic strong emphasis (bold)"""
-    return ft.Strong(*content, cls=cls, **kwargs)
-
-
-def A(*content, href: str = "#", cls: str = typography_styles.link, **kwargs) -> ft.A:
-    """Semantic anchor link"""
-    return ft.A(*content, href=href, cls=cls, **kwargs)
-
-
-def Code(*content, cls: str = typography_styles.code, **kwargs) -> ft.Code:
-    """Inline code"""
-    return ft.Code(*content, cls=cls, **kwargs)
-
-
-def Pre(*content, cls: str = typography_styles.pre, **kwargs) -> ft.Pre:
-    """Preformatted text block"""
-    return ft.Pre(*content, cls=cls, **kwargs)
-
-
-# def Blockquote(*content, cls: str = typography_styles.blockquote, **kwargs) -> ft.Blockquote:
-#     """Semantic blockquote"""
-#     return ft.Blockquote(*content, cls=cls, **kwargs)
-
-
-def Mark(*content, cls: str = typography_styles.mark, **kwargs) -> ft.Mark:
-    """Highlighted text"""
-    return ft.Mark(*content, cls=cls, **kwargs)
-
-
-def Small(*content, cls: str = typography_styles.small, **kwargs) -> ft.Small:
-    """Small text"""
-    return ft.Small(*content, cls=cls, **kwargs) 

eidos/core/__init__.py

@@ -1,25 +0,0 @@
-"""Core functionality for EidosUI theme and style system"""
-
-from .styles import (
-    button_styles,
-    typography_styles,
-    form_styles,
-)
-from .utils import merge_classes
-from .helpers import (
-    serve_eidos_static,
-    create_eidos_head_tag,
-    get_theme_css,
-    get_eidos_js,
-)
-
-__all__ = [
-    "button_styles",
-    "typography_styles",
-    "form_styles",
-    "merge_classes",
-    "serve_eidos_static",
-    "create_eidos_head_tag",
-    "get_theme_css",
-    "get_eidos_js",
-] 

eidos/core/helpers.py

@@ -1,87 +0,0 @@
-"""Helper functions for easy EidosUI integration"""
-
-import importlib.resources
-from pathlib import Path
-from typing import Optional
-from fastapi import FastAPI
-from fastapi.staticfiles import StaticFiles
-
-
-def get_theme_css(theme: str = "light") -> str:
-    """Get CSS content for a theme directly from the package"""
-    try:
-        with importlib.resources.open_text("eidos.themes", f"{theme}.css") as f:
-            return f.read()
-    except FileNotFoundError:
-        return ""
-
-
-def get_eidos_js() -> str:
-    """Get JavaScript content directly from the package"""
-    try:
-        with importlib.resources.open_text("eidos.static", "eidos-ui.js") as f:
-            return f.read()
-    except FileNotFoundError:
-        return ""
-
-def serve_eidos_static(app: FastAPI, prefix: str = "/eidos") -> None:
-    """
-    Automatically mount EidosUI static files to a FastAPI app
-    
-    Args:
-        app: FastAPI application instance
-        prefix: URL prefix for static files (default: "/eidos")
-    """
-    try:
-        # Get the package directory paths
-        with importlib.resources.path("eidos", "static") as static_path:
-            app.mount(f"{prefix}/static", StaticFiles(directory=str(static_path)), name="eidos_static")
-        
-        with importlib.resources.path("eidos", "themes") as themes_path:
-            app.mount(f"{prefix}/themes", StaticFiles(directory=str(themes_path)), name="eidos_themes")
-            
-    except Exception as e:
-        # Fallback for development - try relative paths
-        import os
-        package_dir = Path(__file__).parent.parent
-        
-        if (package_dir / "static").exists():
-            app.mount(f"{prefix}/static", StaticFiles(directory=str(package_dir / "static")), name="eidos_static")
-        
-        if (package_dir / "themes").exists():
-            app.mount(f"{prefix}/themes", StaticFiles(directory=str(package_dir / "themes")), name="eidos_themes")
-
-
- 
-
-
-def create_eidos_head_tag(
-    title: str = "EidosUI App",
-    themes: list = ["light", "dark"],
-    prefix: str = "/eidos",
-    include_tailwind: bool = True
-):
-    """Create a fastapi-tags Head component with EidosUI setup"""
-    import fastapi_tags as ft
-    
-    head_content = []
-    
-    head_content.extend([
-        ft.Meta(charset="UTF-8"),
-        ft.Meta(name="viewport", content="width=device-width, initial-scale=1.0"),
-        ft.Title(title)
-    ])
-    
-    if include_tailwind:
-        head_content.append(ft.Script(src="https://cdn.tailwindcss.com"))
-    
-    # Add CSS links
-    for theme in themes:
-        head_content.append(ft.Link(rel="stylesheet", href=f"{prefix}/themes/{theme}.css"))
-    
-    # Add JS script
-    head_content.append(ft.Script(src=f"{prefix}/static/eidos-ui.js"))
-    
-    return ft.Head(*head_content)
-
-

eidos/core/styles.py

@@ -1,92 +0,0 @@
-"""Style dataclasses for EidosUI components using CSS variables"""
-
-from dataclasses import dataclass
-
-
-@dataclass(frozen=True)
-class ButtonStyles:
-    """Button style variations using CSS variables"""
-    
-    # Primary styles (most commonly used)
-    primary: str = "bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-[var(--color-primary-foreground)] font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2 shadow-sm hover:shadow-md active:scale-95"
-    secondary: str = "bg-[var(--color-secondary)] hover:bg-[var(--color-secondary-hover)] text-[var(--color-secondary-foreground)] font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[var(--color-secondary)] focus:ring-offset-2 shadow-sm hover:shadow-md active:scale-95"
-    ghost: str = "text-[var(--color-primary)] hover:bg-[var(--color-primary-light)] font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2 active:scale-95"
-    
-    # Semantic styles
-    success: str = "bg-[var(--color-success)] hover:bg-[var(--color-success-hover)] text-[var(--color-success-foreground)] font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[var(--color-success)] focus:ring-offset-2 shadow-sm hover:shadow-md active:scale-95"
-    cta: str = "bg-[var(--color-cta)] hover:bg-[var(--color-cta-hover)] text-[var(--color-cta-foreground)] font-semibold rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[var(--color-cta)] focus:ring-offset-2 shadow-md hover:shadow-lg active:scale-95 transform"
-    warning: str = "bg-[var(--color-warning)] hover:bg-[var(--color-warning-hover)] text-[var(--color-warning-foreground)] font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[var(--color-warning)] focus:ring-offset-2 shadow-sm hover:shadow-md active:scale-95"
-    error: str = "bg-[var(--color-error)] hover:bg-[var(--color-error-hover)] text-[var(--color-error-foreground)] font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[var(--color-error)] focus:ring-offset-2 shadow-sm hover:shadow-md active:scale-95"
-    info: str = "bg-[var(--color-info)] hover:bg-[var(--color-info-hover)] text-[var(--color-info-foreground)] font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[var(--color-info)] focus:ring-offset-2 shadow-sm hover:shadow-md active:scale-95"
-    
-    # Size variations
-    sm: str = "px-3 py-1.5 text-sm"
-    md: str = "px-4 py-2 text-base"  # Default size
-    lg: str = "px-6 py-3 text-lg"
-    xl: str = "px-8 py-4 text-xl"
-    
-    # Icon styles
-    icon_sm: str = "p-1.5"
-    icon_md: str = "p-2"
-    icon_lg: str = "p-3"
-    
-    # Special styles
-    outline_primary: str = "border-2 border-[var(--color-primary)] text-[var(--color-primary)] hover:bg-[var(--color-primary)] hover:text-[var(--color-primary-foreground)] font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2 active:scale-95"
-    outline_secondary: str = "border-2 border-[var(--color-secondary)] text-[var(--color-secondary)] hover:bg-[var(--color-secondary)] hover:text-[var(--color-secondary-foreground)] font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[var(--color-secondary)] focus:ring-offset-2 active:scale-95"
-    link: str = "text-[var(--color-primary)] hover:text-[var(--color-primary-hover)] underline-offset-4 hover:underline font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2 rounded active:scale-95"
-
-
-@dataclass(frozen=True) 
-class TypographyStyles:
-    """Typography style variations using CSS variables"""
-    
-    # Heading styles (mobile-first responsive)
-    h1: str = "text-2xl sm:text-3xl lg:text-4xl font-bold text-[var(--color-text)] leading-tight"
-    h2: str = "text-xl sm:text-2xl lg:text-3xl font-semibold text-[var(--color-text)] leading-tight"
-    h3: str = "text-lg sm:text-xl lg:text-2xl font-semibold text-[var(--color-text)] leading-tight"
-    h4: str = "text-base sm:text-lg lg:text-xl font-semibold text-[var(--color-text)] leading-tight"
-    h5: str = "text-sm sm:text-base lg:text-lg font-medium text-[var(--color-text)] leading-tight"
-    h6: str = "text-xs sm:text-sm lg:text-base font-medium text-[var(--color-text)] leading-tight"
-    
-    # Body text styles
-    body: str = "text-base text-[var(--color-text)] leading-relaxed"
-    
-    # Semantic emphasis
-    em: str = "italic"
-    strong: str = "font-semibold"
-    small: str = "text-sm text-[var(--color-text-muted)]"
-    
-    # Links
-    link: str = "text-[var(--color-primary)] hover:text-[var(--color-primary-hover)] underline underline-offset-2 transition-colors duration-200"
-    
-    # Text decorations
-    code: str = "font-mono bg-[var(--color-surface)] px-1.5 py-0.5 rounded text-sm"
-    pre: str = "bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4 overflow-x-auto text-sm font-mono"
-    mark: str = "bg-[var(--color-warning-light)] px-1 rounded"
-    blockquote: str = "border-l-4 border-[var(--color-primary)] pl-6 py-2 italic text-[var(--color-text-muted)]"
-
-
-@dataclass(frozen=True)
-class FormStyles:
-    """Form component styles using CSS variables"""
-    
-    # Input styles
-    input: str = "w-full px-3 py-2 bg-[var(--color-input)] border border-[var(--color-border)] rounded-lg text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
-    
-    # Textarea
-    textarea: str = "w-full px-3 py-2 bg-[var(--color-input)] border border-[var(--color-border)] rounded-lg text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200 resize-y min-h-[80px]"
-    
-    # Select
-    select: str = "w-full px-3 py-2 bg-[var(--color-input)] border border-[var(--color-border)] rounded-lg text-[var(--color-text)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200 appearance-none"
-    
-    # Labels
-    label: str = "block text-sm font-medium text-[var(--color-text)] mb-1"
-    
-    # Form groups
-    form_group: str = "space-y-2"
-
-
-# Global style instances for easy access
-button_styles = ButtonStyles()
-typography_styles = TypographyStyles()
-form_styles = FormStyles() 

eidos/core/utils.py

@@ -1,46 +0,0 @@
-"""Utility functions for EidosUI"""
-
-from typing import Union, Optional, List
-
-
-def merge_classes(*classes: Optional[Union[str, List[str]]]) -> str:
-    """
-    Merge multiple class strings, handling None values and lists
-    
-    Args:
-        *classes: Variable number of class strings, lists of strings, or None values
-        
-    Returns:
-        A single merged class string with duplicates removed and proper spacing
-        
-    Examples:
-        >>> merge_classes("text-base", "font-bold", None, "text-center")
-        "text-base font-bold text-center"
-        
-        >>> merge_classes(["bg-blue-500", "hover:bg-blue-600"], "rounded-lg")
-        "bg-blue-500 hover:bg-blue-600 rounded-lg"
-    """
-    result = []
-    
-    for cls in classes:
-        if cls is None:
-            continue
-        
-        if isinstance(cls, (list, tuple)):
-            # Handle lists/tuples of classes
-            for item in cls:
-                if item and isinstance(item, str):
-                    result.extend(item.split())
-        elif isinstance(cls, str) and cls.strip():
-            # Handle string classes
-            result.extend(cls.split())
-    
-    # Remove duplicates while preserving order
-    seen = set()
-    unique_classes = []
-    for class_name in result:
-        if class_name not in seen:
-            seen.add(class_name)
-            unique_classes.append(class_name)
-    
-    return ' '.join(unique_classes) 

eidos/static/eidos-ui.js

@@ -1,74 +0,0 @@
-/**
- * EidosUI Theme Switcher
- * Client-side utilities for theme management
- */
-
-(function() {
-    'use strict';
-    
-    // Theme management functions
-    window.EidosUI = {
-        /**
-         * Set the current theme
-         * @param {string} theme - Theme name ('light' or 'dark')
-         */
-        setTheme: function(theme) {
-            document.documentElement.setAttribute('data-theme', theme);
-            localStorage.setItem('eidos-theme', theme);
-            
-            // Dispatch custom event
-            document.dispatchEvent(new CustomEvent('eidos:theme-changed', {
-                detail: { theme: theme }
-            }));
-        },
-        
-        /**
-         * Get the current theme
-         * @returns {string} Current theme name
-         */
-        getTheme: function() {
-            return document.documentElement.getAttribute('data-theme') || 'light';
-        },
-        
-        /**
-         * Toggle between light and dark themes
-         */
-        toggleTheme: function() {
-            const current = this.getTheme();
-            const next = current === 'light' ? 'dark' : 'light';
-            this.setTheme(next);
-        },
-        
-        /**
-         * Initialize theme from localStorage or system preference
-         */
-        initTheme: function() {
-            const savedTheme = localStorage.getItem('eidos-theme');
-            const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-            const theme = savedTheme || systemTheme;
-            this.setTheme(theme);
-        }
-    };
-    
-    // Auto-initialize when DOM is ready
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', function() {
-            window.EidosUI.initTheme();
-        });
-    } else {
-        window.EidosUI.initTheme();
-    }
-    
-    // Listen for system theme changes
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
-        // Only auto-switch if user hasn't set a preference
-        if (!localStorage.getItem('eidos-theme')) {
-            window.EidosUI.setTheme(e.matches ? 'dark' : 'light');
-        }
-    });
-    
-    // Global functions for convenience
-    window.setTheme = window.EidosUI.setTheme.bind(window.EidosUI);
-    window.toggleTheme = window.EidosUI.toggleTheme.bind(window.EidosUI);
-    
-})(); 

eidos/themes/dark.css

@@ -1,52 +0,0 @@
-/* EidosUI Dark Theme */
-[data-theme="dark"] {
-  /* Surface Colors - Dark Mode Overrides */
-  --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 Overrides */
-  --color-text: #f8fafc;
-  --color-text-muted: #94a3b8;
-  --color-text-subtle: #64748b;
-  --color-text-inverse: #0f172a;
-  
-  /* Primary Color Override - Blue for Dark Mode */
-  --color-primary: #60a5fa;
-  --color-primary-hover: #3b82f6;
-  --color-primary-light: #1e3a8a;
-  --color-primary-dark: #2563eb;
-  --color-primary-foreground: #1f2937;
-  
-  /* Dark mode overrides for semantic colors */
-  --color-secondary: #9ca3af;
-  --color-secondary-hover: #d1d5db;
-  --color-secondary-light: #374151;
-  --color-secondary-foreground: #1f2937;
-  
-  --color-success: #34d399;
-  --color-success-hover: #10b981;
-  --color-success-light: #065f46;
-  
-  --color-cta: #fbbf24;
-  --color-cta-hover: #f59e0b;
-  --color-cta-light: #92400e;
-  --color-cta-foreground: #1f2937;
-  
-  /* Other semantic colors for dark mode */
-  --color-accent-light: #581c87;
-  --color-warning-light: #713f12;
-  --color-error-light: #7f1d1d;
-  --color-info-light: #0c4a6e;
-  
-  /* Enhanced shadows for dark mode */
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
-  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
-} 

eidos/themes/light.css

@@ -1,110 +0,0 @@
-/* EidosUI Light Theme */
-: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-foreground: #ffffff;
-  
-  /* Semantic Colors */
-  --color-success: #10b981;
-  --color-success-hover: #059669;
-  --color-success-light: #d1fae5;
-  --color-success-foreground: #ffffff;
-  
-  --color-cta: #f59e0b;
-  --color-cta-hover: #d97706;
-  --color-cta-light: #fef3c7;
-  --color-cta-foreground: #ffffff;
-  
-  --color-warning: #eab308;
-  --color-warning-hover: #ca8a04;
-  --color-warning-light: #fefce8;
-  --color-warning-foreground: #000000;
-  
-  --color-error: #dc2626;
-  --color-error-hover: #b91c1c;
-  --color-error-light: #fef2f2;
-  --color-error-foreground: #ffffff;
-  
-  --color-info: #0ea5e9;
-  --color-info-hover: #0284c7;
-  --color-info-light: #f0f9ff;
-  --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;
-  
-  /* 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-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  
-  --line-height-tight: 1.25;
-  --line-height-normal: 1.5;
-  --line-height-relaxed: 1.75;
-  
-  /* Border Radius */
-  --radius-none: 0;
-  --radius-sm: 0.125rem;   /* 2px */
-  --radius-base: 0.375rem; /* 6px */
-  --radius-md: 0.5rem;     /* 8px */
-  --radius-lg: 0.75rem;    /* 12px */
-  --radius-xl: 1rem;       /* 16px */
-  --radius-full: 9999px;
-  
-  /* Shadows */
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  
-  /* Animation */
-  --transition-fast: 150ms ease;
-  --transition-base: 200ms ease;
-  --transition-slow: 300ms ease;
-}