le-kit 0.1.13 → 0.1.14

package/dist/core/collection/themes/base.css

@@ -1,89 +0,0 @@
-/**
- * Le-Kit Base Design Tokens
- * 
- * Structural tokens that rarely change between themes:
- * - Spacing scale
- * - Typography (font families, sizes, weights, line heights)
- * - Transitions
- * - Z-index layers
- * 
- * Import this file along with a theme file (default.css, dark.css, etc.)
- */
-
-:root {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  /* ============================================
-   * SPACING SCALE
-   * ============================================ */
-  --le-spacing-0: 0;
-  --le-spacing-1: 0.25rem;    /* 4px */
-  --le-spacing-2: 0.5rem;     /* 8px */
-  --le-spacing-3: 0.75rem;    /* 12px */
-  --le-spacing-4: 1rem;       /* 16px */
-  --le-spacing-5: 1.25rem;    /* 20px */
-  --le-spacing-6: 1.5rem;     /* 24px */
-  --le-spacing-8: 2rem;       /* 32px */
-  --le-spacing-10: 2.5rem;    /* 40px */
-  --le-spacing-12: 3rem;      /* 48px */
-  --le-spacing-16: 4rem;      /* 64px */
-
-  /* ============================================
-   * TYPOGRAPHY
-   * ============================================ */
-  --le-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  --le-font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
-  
-  /* Font sizes */
-  --le-font-size-xs: 0.75rem;     /* 12px */
-  --le-font-size-sm: 0.875rem;    /* 14px */
-  --le-font-size-md: 1rem;        /* 16px */
-  --le-font-size-lg: 1.125rem;    /* 18px */
-  --le-font-size-xl: 1.25rem;     /* 20px */
-  --le-font-size-2xl: 1.5rem;     /* 24px */
-  --le-font-size-3xl: 1.875rem;   /* 30px */
-  --le-font-size-4xl: 2.25rem;    /* 36px */
-  
-  /* Font weights */
-  --le-font-weight-normal: 400;
-  --le-font-weight-medium: 500;
-  --le-font-weight-semibold: 600;
-  --le-font-weight-bold: 700;
-  
-  /* Line heights */
-  --le-line-height-tight: 1.25;
-  --le-line-height-normal: 1.5;
-  --le-line-height-relaxed: 1.75;
-
-  /* ============================================
-   * RADIUSES
-   * ============================================ */
-  --le-radius-none: 0;
-  --le-radius-xs: 0.066rem;   /* 1px */
-  --le-radius-sm: 0.125rem;   /* 2px */
-  --le-radius-md: 0.25rem;    /* 4px */
-  --le-radius-lg: 0.5rem;     /* 8px */
-  --le-radius-xl: 0.75rem;    /* 12px */
-  --le-radius-2xl: 1rem;      /* 16px */
-  --le-radius-full: 9999px;
-
-  /* ============================================
-   * TRANSITIONS
-   * ============================================ */
-  --le-transition-fast: 100ms;
-  --le-transition-normal: 200ms;
-  --le-transition-slow: 300ms;
-  --le-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
-
-  /* ============================================
-   * Z-INDEX LAYERS
-   * ============================================ */
-  --le-z-dropdown: 1000;
-  --le-z-sticky: 1020;
-  --le-z-fixed: 1030;
-  --le-z-modal-backdrop: 1040;
-  --le-z-modal: 1050;
-  --le-z-popover: 1060;
-  --le-z-tooltip: 1070;
-}

package/dist/core/collection/themes/dark.css

@@ -1,100 +0,0 @@
-/**
- * Le-Kit Dark Theme
- * 
- * Dark mode with light text on dark backgrounds.
- * 
- * Usage: set theme="dark" on any element, or import as your default.
- */
-
-[theme="dark"] {
-  /* Primary brand color - lighter for dark backgrounds */
-  --le-color-primary: #4da6ff;
-  --le-color-primary-light: #80c1ff;
-  --le-color-primary-dark: #0088ff;
-  --le-color-primary-contrast: #000000;
-  
-  /* Secondary accent color */
-  --le-color-secondary: #868e96;
-  --le-color-secondary-light: #adb5bd;
-  --le-color-secondary-dark: #6c757d;
-  --le-color-secondary-contrast: #000000;
-  
-  /* Semantic colors - adjusted for dark mode */
-  --le-color-success: #48c764;
-  --le-color-success-light: #6dd587;
-  --le-color-success-dark: #28a745;
-  --le-color-success-contrast: #000000;
-  
-  --le-color-warning: #ffcd39;
-  --le-color-warning-light: #ffda6a;
-  --le-color-warning-dark: #ffc107;
-  --le-color-warning-contrast: #000000;
-  
-  --le-color-danger: #e4606d;
-  --le-color-danger-light: #ea868f;
-  --le-color-danger-dark: #dc3545;
-  --le-color-danger-contrast: #000000;
-  
-  --le-color-info: #3ab0c3;
-  --le-color-info-light: #6dc4d3;
-  --le-color-info-dark: #17a2b8;
-  --le-color-info-contrast: #000000;
-  
-  /* Neutral colors - inverted */
-  --le-color-white: #ffffff;
-  --le-color-black: #000000;
-  --le-color-gray-50: #212121;
-  --le-color-gray-100: #424242;
-  --le-color-gray-200: #616161;
-  --le-color-gray-300: #757575;
-  --le-color-gray-400: #9e9e9e;
-  --le-color-gray-500: #bdbdbd;
-  --le-color-gray-600: #e0e0e0;
-  --le-color-gray-700: #eeeeee;
-  --le-color-gray-800: #f5f5f5;
-  --le-color-gray-900: #fafafa;
-  
-  /* Background colors */
-  --le-color-background: #121212;
-  --le-color-background-secondary: #1e1e1e;
-  --le-color-background-tertiary: #2d2d2d;
-  
-  /* Surface colors */
-  --le-color-surface: #1e1e1e;
-  --le-color-surface-elevated: #2d2d2d;
-  
-  /* Text colors */
-  --le-color-text-primary: #ffffff;
-  --le-color-text-secondary: #b3b3b3;
-  --le-color-text-disabled: #666666;
-  --le-color-text-inverse: #121212;
-  
-  /* Border colors */
-  --le-color-border: #333333;
-  --le-color-border-light: #2d2d2d;
-  --le-color-border-dark: #444444;
-
-  /** Input borders */
-  --le-border-width: 2px;
-  --le-color-border-input: #515c6b;
-
-  /* Focus ring */
-  --le-color-focus: rgba(77, 166, 255, 0.5);
-  
-  /* Border radius - same as default */
-  --le-radius-none: 0;
-  --le-radius-sm: 0.125rem;
-  --le-radius-md: 0.25rem;
-  --le-radius-lg: 0.5rem;
-  --le-radius-xl: 0.75rem;
-  --le-radius-2xl: 1rem;
-  --le-radius-full: 9999px;
-  
-  /* Shadows - darker for dark mode */
-  --le-shadow-none: none;
-  --le-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --le-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
-  --le-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
-  --le-shadow-xl: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.3);
-  --le-shadow-2xl: 0 20px 25px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(0, 0, 0, 0.3);
-}

package/dist/core/collection/themes/default.css

@@ -1,108 +0,0 @@
-/**
- * Le-Kit Default Theme
- * 
- * Clean, professional light theme with blue primary color.
- * 
- * Usage:
- * 1. As default: import alongside base.css
- * 2. For switching: set theme="default" on any element
- * 
- * To create a custom theme:
- * 1. Copy this file
- * 2. Change selector to :root or [theme="your-theme"]
- * 3. Modify the variables you need
- */
-
-:root,
-[theme="default"] {
-  /* Primary brand color */
-  --le-color-primary: #0088ff;
-  --le-color-primary-light: #4da6ff;
-  --le-color-primary-dark: #0066cc;
-  --le-color-primary-contrast: #ffffff;
-  
-  /* Secondary accent color */
-  --le-color-secondary: #6c757d;
-  --le-color-secondary-light: #868e96;
-  --le-color-secondary-dark: #545b62;
-  --le-color-secondary-contrast: #ffffff;
-  
-  /* Semantic colors */
-  --le-color-success: #28a745;
-  --le-color-success-light: #48c764;
-  --le-color-success-dark: #1e7e34;
-  --le-color-success-contrast: #ffffff;
-  
-  --le-color-warning: #ffc107;
-  --le-color-warning-light: #ffcd39;
-  --le-color-warning-dark: #d39e00;
-  --le-color-warning-contrast: #212529;
-  
-  --le-color-danger: #dc3545;
-  --le-color-danger-light: #e4606d;
-  --le-color-danger-dark: #bd2130;
-  --le-color-danger-contrast: #ffffff;
-  
-  --le-color-info: #17a2b8;
-  --le-color-info-light: #3ab0c3;
-  --le-color-info-dark: #117a8b;
-  --le-color-info-contrast: #ffffff;
-  
-  /* Neutral colors */
-  --le-color-white: #ffffff;
-  --le-color-black: #000000;
-  --le-color-gray-50: #fafafa;
-  --le-color-gray-100: #f5f5f5;
-  --le-color-gray-200: #eeeeee;
-  --le-color-gray-300: #e0e0e0;
-  --le-color-gray-400: #bdbdbd;
-  --le-color-gray-500: #9e9e9e;
-  --le-color-gray-600: #757575;
-  --le-color-gray-700: #616161;
-  --le-color-gray-800: #424242;
-  --le-color-gray-900: #212121;
-  
-  /* Background colors */
-  --le-color-background: #ffffff;
-  --le-color-background-secondary: #f5f5f5;
-  --le-color-background-tertiary: #eeeeee;
-  
-  /* Surface colors (cards, modals, etc.) */
-  --le-color-surface: #ffffff;
-  --le-color-surface-elevated: #ffffff;
-  
-  /* Text colors */
-  --le-color-text-primary: #212121;
-  --le-color-text-secondary: #757575;
-  --le-color-text-disabled: #9e9e9e;
-  --le-color-text-inverse: #ffffff;
-  
-  /* Border colors */
-  --le-color-border: #e0e0e0;
-  --le-color-border-light: #eeeeee;
-  --le-color-border-dark: #bdbdbd;
-
-  /** Input borders */
-  --le-border-width: 2px;
-  --le-color-border-input: #c4d6e6;
-  
-  /* Focus ring */
-  --le-color-focus: rgba(0, 136, 255, 0.5);
-  
-  /* Border radius */
-  --le-radius-none: 0;
-  --le-radius-sm: 0.125rem;   /* 2px */
-  --le-radius-md: 0.25rem;    /* 4px */
-  --le-radius-lg: 0.5rem;     /* 8px */
-  --le-radius-xl: 0.75rem;    /* 12px */
-  --le-radius-2xl: 1rem;      /* 16px */
-  --le-radius-full: 9999px;
-  
-  /* Shadows */
-  --le-shadow-none: none;
-  --le-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --le-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
-  --le-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
-  --le-shadow-xl: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
-  --le-shadow-2xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
-}

package/dist/core/collection/themes/gradient.css

@@ -1,100 +0,0 @@
-/**
- * Le-Kit Gradient Theme
- * 
- * Modern gradient style with purple accents and rounded corners.
- * 
- * Usage: set theme="gradient" on any element, or import as your default.
- */
-
-[theme="gradient"] {
-  /* Primary brand color - purple */
-  --le-color-primary: #8b5cf6;
-  --le-color-primary-light: #a78bfa;
-  --le-color-primary-dark: #7c3aed;
-  --le-color-primary-contrast: #ffffff;
-  
-  /* Secondary accent color - pink */
-  --le-color-secondary: #ec4899;
-  --le-color-secondary-light: #f472b6;
-  --le-color-secondary-dark: #db2777;
-  --le-color-secondary-contrast: #ffffff;
-  
-  /* Semantic colors */
-  --le-color-success: #10b981;
-  --le-color-success-light: #34d399;
-  --le-color-success-dark: #059669;
-  --le-color-success-contrast: #ffffff;
-  
-  --le-color-warning: #f59e0b;
-  --le-color-warning-light: #fbbf24;
-  --le-color-warning-dark: #d97706;
-  --le-color-warning-contrast: #000000;
-  
-  --le-color-danger: #ef4444;
-  --le-color-danger-light: #f87171;
-  --le-color-danger-dark: #dc2626;
-  --le-color-danger-contrast: #ffffff;
-  
-  --le-color-info: #06b6d4;
-  --le-color-info-light: #22d3ee;
-  --le-color-info-dark: #0891b2;
-  --le-color-info-contrast: #ffffff;
-  
-  /* Neutral colors */
-  --le-color-white: #ffffff;
-  --le-color-black: #000000;
-  --le-color-gray-50: #faf5ff;
-  --le-color-gray-100: #f3e8ff;
-  --le-color-gray-200: #e9d5ff;
-  --le-color-gray-300: #d8b4fe;
-  --le-color-gray-400: #c084fc;
-  --le-color-gray-500: #a855f7;
-  --le-color-gray-600: #9333ea;
-  --le-color-gray-700: #7e22ce;
-  --le-color-gray-800: #6b21a8;
-  --le-color-gray-900: #581c87;
-  
-  /* Background colors */
-  --le-color-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  --le-color-background-secondary: rgba(255, 255, 255, 0.1);
-  --le-color-background-tertiary: rgba(255, 255, 255, 0.05);
-  
-  /* Surface colors */
-  --le-color-surface: rgba(255, 255, 255, 0.95);
-  --le-color-surface-elevated: #ffffff;
-  
-  /* Text colors */
-  --le-color-text-primary: #1f2937;
-  --le-color-text-secondary: #6b7280;
-  --le-color-text-disabled: #9ca3af;
-  --le-color-text-inverse: #ffffff;
-  
-  /* Border colors */
-  --le-color-border: rgba(139, 92, 246, 0.3);
-  --le-color-border-light: rgba(139, 92, 246, 0.1);
-  --le-color-border-dark: rgba(139, 92, 246, 0.5);
-
-  /** Input borders */
-  --le-border-width: 2px;
-  --le-color-border-input: #eccddd;
-  
-  /* Focus ring */
-  --le-color-focus: rgba(139, 92, 246, 0.5);
-  
-  /* Border radius - more rounded */
-  --le-radius-none: 0;
-  --le-radius-sm: 0.25rem;
-  --le-radius-md: 0.5rem;
-  --le-radius-lg: 1rem;
-  --le-radius-xl: 1.5rem;
-  --le-radius-2xl: 2rem;
-  --le-radius-full: 9999px;
-  
-  /* Shadows - purple tinted */
-  --le-shadow-none: none;
-  --le-shadow-sm: 0 1px 2px rgba(139, 92, 246, 0.1);
-  --le-shadow-md: 0 4px 6px rgba(139, 92, 246, 0.15), 0 2px 4px rgba(139, 92, 246, 0.1);
-  --le-shadow-lg: 0 10px 20px rgba(139, 92, 246, 0.2), 0 4px 8px rgba(139, 92, 246, 0.1);
-  --le-shadow-xl: 0 20px 40px rgba(139, 92, 246, 0.25), 0 8px 16px rgba(139, 92, 246, 0.15);
-  --le-shadow-2xl: 0 30px 60px rgba(139, 92, 246, 0.3), 0 15px 30px rgba(139, 92, 246, 0.2);
-}