le-kit 0.1.15 → 0.1.16

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

@@ -18,7 +18,6 @@
    * SPACING SCALE
    * ============================================ */
   --le-spacing-0: 0;
-  --le-spacing-0-5: 0.125rem;  /* 2px */
   --le-spacing-1: 0.25rem;    /* 4px */
   --le-spacing-2: 0.5rem;     /* 8px */
   --le-spacing-3: 0.75rem;    /* 12px */
@@ -72,10 +71,10 @@
   /* ============================================
    * TRANSITIONS
    * ============================================ */
-  --le-transition-fast: 100ms;
-  --le-transition-normal: 200ms;
-  --le-transition-slow: 300ms;
-  --le-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --le-transition-fast: 150ms ease;
+  --le-transition-normal: 250ms ease;
+  --le-transition-slow: 400ms ease;
+  --le-transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
 
   /* ============================================
    * Z-INDEX LAYERS
@@ -87,47 +86,4 @@
   --le-z-modal: 1050;
   --le-z-popover: 1060;
   --le-z-tooltip: 1070;
-
-  /* ============================================
-   * RICH TEXT EDITOR
-   * ============================================ */
-  
-  /* Editor Container */
-  --le-editor-padding: var(--le-spacing-4);
-  --le-editor-min-height: 200px;
-  
-  /* Blocks */
-  --le-editor-block-spacing: var(--le-spacing-1);
-  --le-editor-block-padding-x: var(--le-spacing-3);
-  --le-editor-block-padding-y: var(--le-spacing-2);
-  
-  /* Block Controls */
-  --le-editor-controls-size: 24px;
-  --le-editor-controls-gap: var(--le-spacing-1);
-  
-  /* Typography */
-  --le-editor-font-size: var(--le-font-size-md);
-  --le-editor-line-height: var(--le-line-height-relaxed);
-  
-  /* Headings */
-  --le-editor-h1-size: var(--le-font-size-3xl);
-  --le-editor-h2-size: var(--le-font-size-2xl);
-  --le-editor-h3-size: var(--le-font-size-xl);
-  --le-editor-heading-weight: var(--le-font-weight-bold);
-  
-  /* Quote */
-  --le-editor-quote-border-width: 3px;
-  
-  /* Code */
-  --le-editor-code-padding: var(--le-spacing-3);
-  --le-editor-inline-code-padding: 0.125em 0.375em;
-  
-  /* Divider */
-  --le-editor-divider-margin: var(--le-spacing-4);
-  
-  /* Lists */
-  --le-editor-list-indent: var(--le-spacing-6);
-  
-  /* Toolbar */
-  --le-editor-toolbar-button-size: 32px;
 }

package/dist/collection/dist/components/themes/index.css

@@ -70,346 +70,7 @@
   --le-z-tooltip: 1070;
 }
 
-/* ============================================
-   DEFAULT THEME
-   Clean, professional light theme
-   ============================================ */
-
-:root,
-[theme="default"] {
-  /* Primary Colors */
-  --le-color-primary: #3b82f6;
-  --le-color-primary-hover: #2563eb;
-  --le-color-primary-active: #1d4ed8;
-  --le-color-primary-subtle: #eff6ff;
-  --le-color-on-primary: #ffffff;
-
-  /* Secondary Colors */
-  --le-color-secondary: #64748b;
-  --le-color-secondary-hover: #475569;
-  --le-color-secondary-active: #334155;
-  --le-color-secondary-subtle: #f1f5f9;
-  --le-color-on-secondary: #ffffff;
-
-  /* Semantic Colors */
-  --le-color-success: #22c55e;
-  --le-color-success-subtle: #f0fdf4;
-  --le-color-on-success: #ffffff;
-
-  --le-color-warning: #f59e0b;
-  --le-color-warning-subtle: #fffbeb;
-  --le-color-on-warning: #000000;
-
-  --le-color-error: #ef4444;
-  --le-color-error-subtle: #fef2f2;
-  --le-color-on-error: #ffffff;
-
-  --le-color-info: #06b6d4;
-  --le-color-info-subtle: #ecfeff;
-  --le-color-on-info: #ffffff;
-
-  /* Surface Colors */
-  --le-color-background: #ffffff;
-  --le-color-surface: #ffffff;
-  --le-color-surface-raised: #ffffff;
-  --le-color-surface-overlay: rgba(0, 0, 0, 0.5);
-
-  /* Text Colors */
-  --le-color-text: #1e293b;
-  --le-color-text-secondary: #64748b;
-  --le-color-text-muted: #94a3b8;
-  --le-color-text-inverse: #ffffff;
-
-  /* Border Colors */
-  --le-color-border: #e2e8f0;
-  --le-color-border-strong: #cbd5e1;
-  --le-color-border-focus: var(--le-color-primary);
-
-  /* Border Radius */
-  --le-radius-none: 0;
-  --le-radius-sm: 4px;
-  --le-radius-md: 7px;
-  --le-radius-lg: 12px;
-  --le-radius-xl: 16px;
-  --le-radius-2xl: 24px;
-  --le-radius-full: 9999px;
-
-  /* Shadows */
-  --le-color-shadow: color-mix(in srgb, var(--le-color-primary) 80%, transparent);
-  --le-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --le-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-  --le-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-  --le-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-  --le-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.3);
-}
-
-/* ============================================
-   DARK THEME
-   Modern dark mode with blue accents
-   ============================================ */
-
-[theme="dark"] {
-  /* Primary Colors */
-  --le-color-primary: #60a5fa;
-  --le-color-primary-hover: #93c5fd;
-  --le-color-primary-active: #3b82f6;
-  --le-color-primary-subtle: #1e3a5f;
-  --le-color-on-primary: #0f172a;
-
-  /* Secondary Colors */
-  --le-color-secondary: #94a3b8;
-  --le-color-secondary-hover: #cbd5e1;
-  --le-color-secondary-active: #64748b;
-  --le-color-secondary-subtle: #1e293b;
-  --le-color-on-secondary: #0f172a;
-
-  /* Semantic Colors */
-  --le-color-success: #4ade80;
-  --le-color-success-subtle: #14532d;
-  --le-color-on-success: #0f172a;
-
-  --le-color-warning: #fbbf24;
-  --le-color-warning-subtle: #422006;
-  --le-color-on-warning: #0f172a;
-
-  --le-color-error: #f87171;
-  --le-color-error-subtle: #450a0a;
-  --le-color-on-error: #0f172a;
-
-  --le-color-info: #22d3ee;
-  --le-color-info-subtle: #164e63;
-  --le-color-on-info: #0f172a;
-
-  /* Surface Colors */
-  --le-color-background: #0f172a;
-  --le-color-surface: #1e293b;
-  --le-color-surface-raised: #334155;
-  --le-color-surface-overlay: rgba(0, 0, 0, 0.7);
-
-  /* Text Colors */
-  --le-color-text: #f1f5f9;
-  --le-color-text-secondary: #94a3b8;
-  --le-color-text-muted: #64748b;
-  --le-color-text-inverse: #0f172a;
-
-  /* Border Colors */
-  --le-color-border: #334155;
-  --le-color-border-strong: #475569;
-  --le-color-border-focus: var(--le-color-primary);
-
-  /* Shadows (adjusted for dark mode) */
-  --le-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  --le-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
-  --le-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
-  --le-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
-  --le-shadow-focus: 0 0 0 3px rgba(96, 165, 250, 0.4);
-}
-
-/* ============================================
-   GRADIENT THEME
-   Vibrant gradients with purple/pink accents
-   ============================================ */
-
-[theme="gradient"] {
-  /* Primary Colors - Purple gradient feel */
-  --le-color-primary: #8b5cf6;
-  --le-color-primary-hover: #a78bfa;
-  --le-color-primary-active: #7c3aed;
-  --le-color-primary-subtle: #f5f3ff;
-  --le-color-on-primary: #ffffff;
-
-  /* Secondary Colors - Pink accent */
-  --le-color-secondary: #ec4899;
-  --le-color-secondary-hover: #f472b6;
-  --le-color-secondary-active: #db2777;
-  --le-color-secondary-subtle: #fdf2f8;
-  --le-color-on-secondary: #ffffff;
-
-  /* Semantic Colors */
-  --le-color-success: #10b981;
-  --le-color-success-subtle: #ecfdf5;
-  --le-color-on-success: #ffffff;
-
-  --le-color-warning: #f59e0b;
-  --le-color-warning-subtle: #fffbeb;
-  --le-color-on-warning: #000000;
-
-  --le-color-error: #f43f5e;
-  --le-color-error-subtle: #fff1f2;
-  --le-color-on-error: #ffffff;
-
-  --le-color-info: #06b6d4;
-  --le-color-info-subtle: #ecfeff;
-  --le-color-on-info: #ffffff;
-
-  /* Surface Colors */
-  --le-color-background: linear-gradient(135deg, #faf5ff 0%, #fdf2f8 50%, #fff7ed 100%);
-  --le-color-surface: rgba(255, 255, 255, 0.9);
-  --le-color-surface-raised: #ffffff;
-  --le-color-surface-overlay: rgba(139, 92, 246, 0.3);
-
-  /* Text Colors */
-  --le-color-text: #1f2937;
-  --le-color-text-secondary: #6b7280;
-  --le-color-text-muted: #9ca3af;
-  --le-color-text-inverse: #ffffff;
-
-  /* Border Colors */
-  --le-color-border: rgba(139, 92, 246, 0.2);
-  --le-color-border-strong: rgba(139, 92, 246, 0.4);
-  --le-color-border-focus: var(--le-color-primary);
-
-  /* Border Radius - More rounded for playful feel */
-  --le-radius-sm: 6px;
-  --le-radius-md: 12px;
-  --le-radius-lg: 16px;
-  --le-radius-xl: 20px;
-  --le-radius-2xl: 28px;
-
-  /* Shadows - Colored shadows */
-  --le-shadow-sm: 0 1px 3px 0 rgba(139, 92, 246, 0.1);
-  --le-shadow-md: 0 4px 6px -1px rgba(139, 92, 246, 0.15), 0 2px 4px -2px rgba(236, 72, 153, 0.1);
-  --le-shadow-lg: 0 10px 15px -3px rgba(139, 92, 246, 0.2), 0 4px 6px -4px rgba(236, 72, 153, 0.15);
-  --le-shadow-xl: 0 20px 25px -5px rgba(139, 92, 246, 0.25), 0 8px 10px -6px rgba(236, 72, 153, 0.2);
-  --le-shadow-focus: 0 0 0 3px rgba(139, 92, 246, 0.4);
-}
-
-/* ============================================
-   MINIMAL THEME
-   Clean, minimal design with subtle grays
-   ============================================ */
-
-[theme="minimal"] {
-  /* Primary Colors - Subtle dark gray */
-  --le-color-primary: #374151;
-  --le-color-primary-hover: #1f2937;
-  --le-color-primary-active: #111827;
-  --le-color-primary-subtle: #f3f4f6;
-  --le-color-on-primary: #ffffff;
-
-  /* Secondary Colors - Light gray */
-  --le-color-secondary: #9ca3af;
-  --le-color-secondary-hover: #6b7280;
-  --le-color-secondary-active: #4b5563;
-  --le-color-secondary-subtle: #f9fafb;
-  --le-color-on-secondary: #ffffff;
-
-  /* Semantic Colors - Muted versions */
-  --le-color-success: #059669;
-  --le-color-success-subtle: #f0fdf4;
-  --le-color-on-success: #ffffff;
-
-  --le-color-warning: #d97706;
-  --le-color-warning-subtle: #fffbeb;
-  --le-color-on-warning: #ffffff;
-
-  --le-color-error: #dc2626;
-  --le-color-error-subtle: #fef2f2;
-  --le-color-on-error: #ffffff;
-
-  --le-color-info: #0891b2;
-  --le-color-info-subtle: #ecfeff;
-  --le-color-on-info: #ffffff;
-
-  /* Surface Colors */
-  --le-color-background: #fafafa;
-  --le-color-surface: #ffffff;
-  --le-color-surface-raised: #ffffff;
-  --le-color-surface-overlay: rgba(0, 0, 0, 0.4);
-
-  /* Text Colors */
-  --le-color-text: #111827;
-  --le-color-text-secondary: #6b7280;
-  --le-color-text-muted: #9ca3af;
-  --le-color-text-inverse: #ffffff;
-
-  /* Border Colors - Very subtle */
-  --le-color-border: #e5e7eb;
-  --le-color-border-strong: #d1d5db;
-  --le-color-border-focus: var(--le-color-primary);
-
-  /* Border Radius - Sharp, minimal */
-  --le-radius-none: 0;
-  --le-radius-sm: 2px;
-  --le-radius-md: 4px;
-  --le-radius-lg: 6px;
-  --le-radius-xl: 8px;
-  --le-radius-2xl: 12px;
-  --le-radius-full: 9999px;
-
-  /* Shadows - Minimal, subtle */
-  --le-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
-  --le-shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  --le-shadow-lg: 0 4px 8px -2px rgba(0, 0, 0, 0.08);
-  --le-shadow-xl: 0 8px 16px -4px rgba(0, 0, 0, 0.1);
-  --le-shadow-focus: 0 0 0 2px rgba(55, 65, 81, 0.2);
-}
-
-/* ============================================
-   WARM THEME
-   Warm earthy tones with orange/amber accents
-   ============================================ */
-
-[theme="warm"] {
-  /* Primary Colors - Warm orange */
-  --le-color-primary: #ea580c;
-  --le-color-primary-hover: #f97316;
-  --le-color-primary-active: #c2410c;
-  --le-color-primary-subtle: #fff7ed;
-  --le-color-on-primary: #ffffff;
-
-  /* Secondary Colors - Warm brown */
-  --le-color-secondary: #78716c;
-  --le-color-secondary-hover: #57534e;
-  --le-color-secondary-active: #44403c;
-  --le-color-secondary-subtle: #fafaf9;
-  --le-color-on-secondary: #ffffff;
-
-  /* Semantic Colors */
-  --le-color-success: #65a30d;
-  --le-color-success-subtle: #f7fee7;
-  --le-color-on-success: #ffffff;
-
-  --le-color-warning: #d97706;
-  --le-color-warning-subtle: #fffbeb;
-  --le-color-on-warning: #000000;
-
-  --le-color-error: #dc2626;
-  --le-color-error-subtle: #fef2f2;
-  --le-color-on-error: #ffffff;
-
-  --le-color-info: #0891b2;
-  --le-color-info-subtle: #ecfeff;
-  --le-color-on-info: #ffffff;
-
-  /* Surface Colors - Warm tinted */
-  --le-color-background: #fffbf5;
-  --le-color-surface: #ffffff;
-  --le-color-surface-raised: #ffffff;
-  --le-color-surface-overlay: rgba(120, 53, 15, 0.4);
-
-  /* Text Colors - Warm grays */
-  --le-color-text: #292524;
-  --le-color-text-secondary: #78716c;
-  --le-color-text-muted: #a8a29e;
-  --le-color-text-inverse: #ffffff;
-
-  /* Border Colors - Warm tinted */
-  --le-color-border: #e7e5e4;
-  --le-color-border-strong: #d6d3d1;
-  --le-color-border-focus: var(--le-color-primary);
-
-  /* Border Radius - Soft, friendly */
-  --le-radius-sm: 4px;
-  --le-radius-md: 8px;
-  --le-radius-lg: 12px;
-  --le-radius-xl: 16px;
-  --le-radius-2xl: 24px;
-
-  /* Shadows - Warm tinted */
-  --le-shadow-sm: 0 1px 2px 0 rgba(120, 53, 15, 0.05);
-  --le-shadow-md: 0 4px 6px -1px rgba(120, 53, 15, 0.1), 0 2px 4px -2px rgba(120, 53, 15, 0.08);
-  --le-shadow-lg: 0 10px 15px -3px rgba(120, 53, 15, 0.12), 0 4px 6px -4px rgba(120, 53, 15, 0.1);
-  --le-shadow-xl: 0 20px 25px -5px rgba(120, 53, 15, 0.15), 0 8px 10px -6px rgba(120, 53, 15, 0.12);
-  --le-shadow-focus: 0 0 0 3px rgba(234, 88, 12, 0.3);
+/* Utility class to hide elements when header is shrunk */
+.header-is-shrunk .hidden-on-shrink {
+  display: none;
 }