solid-ui 3.0.0 → 3.0.1-11be53b

package/dist/themes/README.md

@@ -0,0 +1,254 @@
+# Solid-UI Theme System
+
+**Phase 1: Foundation** - CSS Variables & Runtime Theme Switching
+
+## 🎨 Live Demo
+
+**[Open Theme Demo](../../docs/theme-demo.html)** - Interactive preview of all 5 themes (no setup required, works offline)
+
+This standalone demo file can be:
+- Shared with team members via email or Slack
+- Attached to GitHub issues/PRs for visual review
+- Opened directly in any browser for quick testing
+
+## Overview
+
+The Solid-UI theme system provides modern, customizable styling using CSS custom properties (variables). It supports multiple built-in themes and allows runtime theme switching with localStorage persistence.
+
+## Architecture
+
+```
+src/themes/
+├── foundation/
+│   ├── variables.css      # Base CSS custom properties
+│   └── accessibility.css  # WCAG 2.1 AA compliance features
+└── presets/
+    ├── classic.css        # Original solid-ui appearance (default)
+    ├── default.css        # Modern purple gradient (Solid style)
+    ├── wave.css          # WhatsApp-style green
+    ├── telegram.css      # Messenger-style blue
+    └── signal.css        # Signal-style blue
+```
+
+## Usage
+
+### Automatic Initialization
+
+The theme system auto-initializes on page load and applies the saved theme preference (or "classic" by default):
+
+```javascript
+import { themeLoader } from 'solid-ui'
+
+// Theme system initializes automatically
+// Loads foundation CSS + saved theme from localStorage
+```
+
+### Switching Themes Programmatically
+
+```javascript
+import { themeLoader } from 'solid-ui'
+
+// Switch to a theme
+await themeLoader.loadTheme('wave')
+
+// Get current theme
+const currentTheme = themeLoader.getCurrentTheme() // 'wave'
+
+// Get available themes
+const themes = themeLoader.getAvailableThemes()
+// Returns: [{ name: 'classic', label: 'Classic' }, ...]
+```
+
+### Listen for Theme Changes
+
+```javascript
+window.addEventListener('solid-ui-theme-change', (event) => {
+  console.log('Theme changed to:', event.detail.theme)
+})
+```
+
+### Using in Components
+
+The `style` object now uses CSS variables with fallbacks:
+
+```javascript
+import { style } from 'solid-ui'
+
+// Styles automatically adapt to active theme
+const input = document.createElement('input')
+input.style = style.textInputStyle
+// Uses var(--sui-bg-input) from active theme, falls back to #eef
+```
+
+## Available Themes
+
+### Classic (Default)
+- **Colors**: Original solid-ui palette (#3B5998, #eef, #888)
+- **Style**: Preserves exact original appearance
+- **Use case**: Backward compatibility, no visual changes
+
+### Default (Solid)
+- **Colors**: Modern purple gradient (#667eea, #9f7aea)
+- **Style**: Clean, modern with improved spacing
+- **Use case**: New projects, modern look
+
+### Wave
+- **Colors**: WhatsApp green (#128c7e, #075e54)
+- **Style**: Clean messenger style
+- **Use case**: Familiar, friendly interface
+
+### Telegram
+- **Colors**: Telegram blue (#0088cc, #0078b8)
+- **Style**: Professional messenger
+- **Use case**: Business, clean interface
+
+### Signal
+- **Colors**: Signal blue (#2c6bed, #1851c4)
+- **Style**: Privacy-focused, professional
+- **Use case**: Security-focused apps
+
+## CSS Variables Reference
+
+### Colors
+```css
+--sui-primary: #805ad5;
+--sui-accent: #9f7aea;
+--sui-bg: #f7f8fc;
+--sui-bg-panel: #ffffff;
+--sui-text: #2d3748;
+--sui-text-secondary: #4a5568;
+--sui-border-color: #e2e8f0;
+```
+
+### Spacing
+```css
+--sui-space-xs: 0.25em;
+--sui-space-sm: 0.5em;
+--sui-space-md: 1em;
+--sui-space-lg: 1.5em;
+--sui-space-xl: 2em;
+```
+
+### Border Radius
+```css
+--sui-border-radius: 0.5em;
+--sui-border-radius-sm: 0.3em;
+--sui-border-radius-lg: 1em;
+--sui-border-radius-full: 50%;
+```
+
+### Shadows
+```css
+--sui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
+--sui-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+--sui-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
+```
+
+See `foundation/variables.css` for the complete list.
+
+## Creating Custom Themes
+
+Create a new CSS file in `presets/`:
+
+```css
+/* src/themes/presets/mytheme.css */
+:root {
+  --sui-primary: #your-color;
+  --sui-accent: #your-accent;
+  /* Override other variables as needed */
+}
+```
+
+Register the theme:
+
+```javascript
+import { themeLoader } from 'solid-ui'
+
+themeLoader.themes.mytheme = 'themes/presets/mytheme.css'
+await themeLoader.loadTheme('mytheme')
+```
+
+## Accessibility Features
+
+All themes include WCAG 2.1 Level AA compliance features:
+
+- **Focus Indicators**: Visible 2px outlines
+- **High Contrast Mode**: Automatic adaptation
+- **Reduced Motion**: Respects user preference
+- **Touch Targets**: Minimum 44x44px
+- **Screen Reader Support**: `.sr-only` utility class
+
+See `foundation/accessibility.css` for details.
+
+## Browser Support
+
+CSS custom properties are supported in:
+- ✅ Chrome/Edge 49+
+- ✅ Firefox 31+
+- ✅ Safari 9.1+
+- ✅ iOS Safari 9.3+
+- ✅ Android Browser 76+
+
+For older browsers, fallback values ensure basic functionality.
+
+## Migration from Inline Styles
+
+The style.js file now uses a hybrid approach:
+
+**Before (hard-coded)**:
+```javascript
+background-color: #eef;
+```
+
+**After (with CSS variable + fallback)**:
+```javascript
+background-color: var(--sui-bg-input, #eef);
+```
+
+This maintains backward compatibility while enabling theming.
+
+## Performance
+
+- CSS variables have negligible performance impact
+- Theme files are ~2-4KB each (gzipped)
+- Theme switching is near-instant (<100ms)
+- Foundation CSS loads once and caches
+
+## Troubleshooting
+
+### Theme not loading?
+Check browser console for errors. Verify CSS file paths are correct relative to your build output.
+
+### Styles not updating?
+Hard refresh (Ctrl+Shift+R) to clear cached CSS. Check that CSS variables are defined in your theme file.
+
+### Want to disable auto-init?
+```javascript
+// In your app's entry point, before solid-ui loads:
+window.SOLID_UI_SKIP_THEME_INIT = true
+
+// Then manually init later:
+import { themeLoader } from 'solid-ui'
+await themeLoader.init()
+```
+
+## Future Enhancements
+
+Phase 1 establishes the foundation. Future phases will add:
+- Theme picker widget
+- Component-specific theme overrides
+- Dark mode variants
+- Community theme marketplace
+
+## Contributing
+
+When adding new styles:
+1. Use CSS variables with fallbacks
+2. Test with all 5 themes
+3. Verify accessibility (contrast, focus, etc.)
+4. Update this documentation
+
+---
+
+**Status**: Phase 1 Complete ✅  
+**Next**: Phase 2 - Component Modernization

package/dist/themes/foundation/accessibility.css

@@ -0,0 +1,147 @@
+/**
+ * Accessibility Features for Solid-UI
+ * WCAG 2.1 Level AA compliance
+ */
+
+/* ========== Screen Reader Only ========== */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.sr-only-focusable:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: inherit;
+  margin: inherit;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+/* ========== Focus Indicators ========== */
+:focus-visible {
+  outline: var(--sui-focus-width, 2px) solid var(--sui-focus-color, #667eea);
+  outline-offset: var(--sui-focus-offset, 2px);
+}
+
+/* Don't hide focus for mouse users who might need it */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* ========== Skip Links ========== */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: var(--sui-primary);
+  color: white;
+  padding: 0.5em 1em;
+  text-decoration: none;
+  z-index: var(--sui-z-tooltip, 200);
+}
+
+.skip-link:focus {
+  top: 0;
+}
+
+/* ========== High Contrast Mode ========== */
+@media (prefers-contrast: high) {
+  :root {
+    --sui-border-color: #000;
+    --sui-border-color-dark: #000;
+    --sui-text: #000;
+    --sui-bg-panel: #fff;
+    --sui-bg: #fff;
+    --sui-focus-color: #000;
+  }
+  
+  button,
+  input,
+  select,
+  textarea {
+    border: 2px solid currentColor !important;
+  }
+  
+  a {
+    text-decoration: underline;
+  }
+}
+
+/* ========== Reduced Motion ========== */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ========== Touch Targets ========== */
+/* Mobile/tablet: 44px minimum for touch targets */
+@media (max-width: 1024px) {
+  button,
+  a,
+  input[type="checkbox"],
+  input[type="radio"],
+  select {
+    min-height: var(--sui-touch-target-min, 44px);
+    min-width: var(--sui-touch-target-min, 44px);
+  }
+}
+
+/* Desktop: smaller targets are acceptable with precise mouse control */
+@media (min-width: 1025px) {
+  button,
+  a,
+  select {
+    min-height: var(--sui-touch-target-min-desktop, 32px);
+    min-width: var(--sui-touch-target-min-desktop, 32px);
+  }
+  
+  input[type="checkbox"],
+  input[type="radio"] {
+    min-height: auto;
+    min-width: auto;
+  }
+}
+
+/* Allow smaller targets when explicitly sized */
+.small-touch-target {
+  min-height: auto;
+  min-width: auto;
+}
+
+/* ========== Heading Styles ========== */
+/* Apply theme colors to headings */
+h1, h2, h3, h4, h5, h6 {
+  color: var(--sui-primary, #7C4DFF);
+}
+
+/* Override for specific contexts where headings should use text color */
+.use-text-color h1,
+.use-text-color h2,
+.use-text-color h3,
+.use-text-color h4,
+.use-text-color h5,
+.use-text-color h6 {
+  color: var(--sui-text, #333);
+}
+
+/* ========== Dark Mode Support ========== */
+@media (prefers-color-scheme: dark) {
+  /* Dark mode variables can be defined here or in a dark theme preset */
+  /* For now, themes will handle dark mode explicitly */
+}

package/dist/themes/foundation/variables.css

@@ -0,0 +1,163 @@
+/**
+ * Base CSS Variables for Solid-UI Theme System
+ * Phase 1: Foundation
+ * 
+ * These variables form the foundation of all themes.
+ * They provide fallback values and can be overridden by theme presets.
+ */
+
+:root {
+  /* ========== Colors - Primary ========== */
+  --sui-primary: #805ad5;
+  --sui-primary-dark: #667eea;
+  --sui-primary-light: #9f7aea;
+  --sui-accent: #9f7aea;
+  
+  /* ========== Colors - Gradients ========== */
+  --sui-gradient-start: #667eea;
+  --sui-gradient-end: #9f7aea;
+  --sui-gradient: linear-gradient(135deg, var(--sui-gradient-start), var(--sui-gradient-end));
+  
+  /* ========== Backgrounds ========== */
+  --sui-bg: #f7f8fc;
+  --sui-bg-panel: #ffffff;
+  --sui-bg-header: #ffffff;
+  --sui-bg-input: #eef;
+  --sui-bg-hover: #f7f8fc;
+  --sui-bg-active: #ede9fe;
+  --sui-bg-button: #fff;
+  --sui-bg-button-hover: #f7f8fc;
+  
+  /* ========== Text Colors ========== */
+  --sui-text: #2d3748;
+  --sui-text-secondary: #4a5568;
+  --sui-text-muted: #a0aec0;
+  --sui-text-link: #3B5998;
+  --sui-text-on-primary: #ffffff;
+  
+  /* ========== Borders ========== */
+  --sui-border-color: #e2e8f0;
+  --sui-border-color-dark: #88c;
+  --sui-border-width: 0.05em;
+  --sui-border: var(--sui-border-width) solid var(--sui-border-color);
+  
+  /* ========== Border Radius ========== */
+  --sui-border-radius: 0.5em;
+  --sui-border-radius-sm: 0.2em;
+  --sui-border-radius-lg: 1em;
+  --sui-border-radius-full: 50%;
+  
+  /* ========== Shadows ========== */
+  --sui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
+  --sui-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  --sui-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
+  --sui-shadow-colored: 0 4px 20px rgba(102, 126, 234, 0.3);
+  
+  /* ========== Spacing Scale ========== */
+  --sui-space-xs: 0.25em;
+  --sui-space-sm: 0.5em;
+  --sui-space-md: 1em;
+  --sui-space-lg: 1.5em;
+  --sui-space-xl: 2em;
+  --sui-space-2xl: 3em;
+  
+  /* ========== Typography ========== */
+  --sui-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
+                     "Helvetica Neue", Arial, sans-serif;
+  --sui-font-family-mono: 'Monaco', 'Courier New', monospace;
+  
+  --sui-font-size-xs: 0.75em;
+  --sui-font-size-sm: 0.875em;
+  --sui-font-size-base: 1em;
+  --sui-font-size-lg: 1.125em;
+  --sui-font-size-xl: 1.25em;
+  --sui-font-size-2xl: 1.5em;
+  --sui-font-size-3xl: 1.875em;
+  
+  --sui-line-height: 1.5;
+  --sui-line-height-tight: 1.25;
+  --sui-line-height-relaxed: 1.75;
+  
+  /* ========== Forms ========== */
+  --sui-form-border-color: #88c;
+  --sui-form-group-border: var(--sui-border-width) solid var(--sui-form-border-color);
+  --sui-input-padding: var(--sui-space-sm);
+  --sui-input-margin: 0.4em;
+  
+  /* ========== Buttons ========== */
+  --sui-button-padding: 0.7em;
+  --sui-button-padding-sm: 0.5em 1em;
+  --sui-button-padding-lg: 1em 4em;
+  --sui-button-margin: 0.3em;
+  
+  /* ========== Icon Sizes ========== */
+  --sui-icon-size: 1.5em;        /* Standard icons and buttons */
+  --sui-avatar-size: 2.5em;      /* Person/contact avatars */
+  --sui-icon-class-size: 3em;    /* Class/type icons */
+  
+  /* ========== ACL Groups (preserve current colors) ========== */
+  --sui-group-default: #888;
+  --sui-group-1: green;
+  --sui-group-2: #cc0;
+  --sui-group-3: orange;
+  --sui-group-5: red;
+  --sui-group-9: blue;
+  --sui-group-13: purple;
+  
+  /* ========== Status Colors ========== */
+  --sui-success: #48bb78;
+  --sui-warning: orange;
+  --sui-error: red;
+  --sui-info: #01c9ea;
+  
+  /* ========== Header ========== */
+  --sui-header-gradient: linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%);
+  --sui-header-height: 60px;
+  --sui-header-shadow: 0px 1px 4px #000000;
+  
+  /* ========== Transitions ========== */
+  --sui-transition-fast: 0.15s ease;
+  --sui-transition: 0.2s ease;
+  --sui-transition-slow: 0.3s ease;
+  
+  /* ========== Z-Index Scale ========== */
+  --sui-z-dropdown: 1;
+  --sui-z-modal: 100;
+  --sui-z-tooltip: 200;
+  
+  /* ========== Accessibility ========== */
+  --sui-focus-color: #667eea;
+  --sui-focus-width: 2px;
+  --sui-focus-offset: 2px;
+  --sui-touch-target-min: 44px;
+}
+
+/* ========== Responsive Adjustments ========== */
+/* Mobile: Smaller base font and tighter spacing */
+@media (max-width: 768px) {
+  :root {
+    --sui-font-size-base: 0.9em;
+    --sui-font-size-sm: 0.8em;
+    --sui-font-size-xs: 0.7em;
+    --sui-space-md: 0.8em;
+    --sui-space-lg: 1.2em;
+    --sui-space-xl: 1.6em;
+    --sui-space-2xl: 2.4em;
+  }
+}
+
+/* Tablet: Slightly smaller than desktop */
+@media (min-width: 769px) and (max-width: 1024px) {
+  :root {
+    --sui-font-size-base: 0.95em;
+    --sui-space-md: 0.9em;
+    --sui-space-lg: 1.35em;
+  }
+}
+
+/* Desktop: Use default values (already defined above) */
+@media (min-width: 1025px) {
+  :root {
+    /* Desktop uses the base values defined above */
+  }
+}

package/dist/themes/presets/classic.css

@@ -0,0 +1,70 @@
+/**
+ * Classic Theme - Preserves Original solid-ui Appearance
+ * 
+ * This theme maintains backward compatibility by using the exact
+ * colors and styling from the original solid-ui implementation.
+ * Use this as the default to ensure no visual changes during migration.
+ */
+
+:root {
+  /* ========== Primary Colors (Original) ========== */
+  --sui-primary: #3B5998;
+  --sui-primary-dark: #2d4373;
+  --sui-primary-light: #7C4DFF;
+  --sui-accent: #01c9ea;
+  
+  /* ========== Gradients (Original) ========== */
+  --sui-gradient-start: #7C4DFF;
+  --sui-gradient-end: #01c9ea;
+  --sui-gradient: linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%);
+  
+  /* ========== Backgrounds (Original) ========== */
+  --sui-bg: #ffffff;
+  --sui-bg-panel: #ffffff;
+  --sui-bg-header: #eef;
+  --sui-bg-input: #eef;
+  --sui-bg-hover: #eef;
+  --sui-bg-active: #dde;
+  --sui-bg-button: #fff;
+  --sui-bg-button-hover: #eef;
+  
+  /* ========== Text Colors (Original) ========== */
+  --sui-text: #000000;
+  --sui-text-secondary: #333333;
+  --sui-text-muted: #888888;
+  --sui-text-link: #3B5998;
+  --sui-text-on-primary: #ffffff;
+  
+  /* ========== Borders (Original) ========== */
+  --sui-border-color: #88c;
+  --sui-border-color-dark: #888;
+  --sui-border-width: 0.05em;
+  --sui-border: var(--sui-border-width) solid var(--sui-border-color);
+  
+  /* ========== Border Radius (Original) ========== */
+  --sui-border-radius: 0.2em;
+  --sui-border-radius-sm: 0.2em;
+  --sui-border-radius-lg: 1em;
+  --sui-border-radius-full: 50%;
+  
+  /* ========== Shadows (Original - minimal) ========== */
+  --sui-shadow-sm: 0 1px 2px #888;
+  --sui-shadow: 0.5em 0.9em #888;
+  --sui-shadow-lg: 0.7em 1.1em #888;
+  --sui-shadow-colored: 0.5em 0.9em #888;
+  
+  /* ========== Forms (Original) ========== */
+  --sui-form-border-color: #88c;
+  --sui-form-group-border: var(--sui-border-width) solid var(--sui-form-border-color);
+  
+  /* ========== Status Colors (Original) ========== */
+  --sui-success: green;
+  --sui-warning: orange;
+  --sui-error: red;
+  --sui-info: #01c9ea;
+  
+  /* ========== Header (Original) ========== */
+  --sui-header-gradient: linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%);
+  
+  /* Keep all other variables from foundation/variables.css */
+}

package/dist/themes/presets/default.css

@@ -0,0 +1,65 @@
+/**
+ * Default (Solid) Theme - Modern Purple Gradient
+ * 
+ * Inspired by solid-chat's "Solid" theme.
+ * Modern, clean design with purple gradient and improved spacing.
+ */
+
+:root {
+  /* ========== Primary Colors ========== */
+  --sui-primary: #805ad5;
+  --sui-primary-dark: #667eea;
+  --sui-primary-light: #9f7aea;
+  --sui-accent: #9f7aea;
+  
+  /* ========== Gradients ========== */
+  --sui-gradient-start: #667eea;
+  --sui-gradient-end: #9f7aea;
+  --sui-gradient: linear-gradient(135deg, var(--sui-gradient-start), var(--sui-gradient-end));
+  
+  /* ========== Backgrounds ========== */
+  --sui-bg: #f7f8fc;
+  --sui-bg-panel: #ffffff;
+  --sui-bg-header: #e9d8fd;
+  --sui-bg-input: #ffffff;
+  --sui-bg-hover: #f7f8fc;
+  --sui-bg-active: #ede9fe;
+  --sui-bg-button: #ffffff;
+  --sui-bg-button-hover: #f7f8fc;
+  
+  /* ========== Text Colors ========== */
+  --sui-text: #2d3748;
+  --sui-text-secondary: #4a5568;
+  --sui-text-muted: #a0aec0;
+  --sui-text-link: #805ad5;
+  --sui-text-on-primary: #ffffff;
+  
+  /* ========== Borders ========== */
+  --sui-border-color: #e2e8f0;
+  --sui-border-color-dark: #cbd5e0;
+  --sui-border-width: 0.05em;
+  --sui-border: var(--sui-border-width) solid var(--sui-border-color);
+  
+  /* ========== Border Radius ========== */
+  --sui-border-radius: 0.5em;
+  --sui-border-radius-sm: 0.3em;
+  --sui-border-radius-lg: 1em;
+  --sui-border-radius-full: 50%;
+  
+  /* ========== Shadows ========== */
+  --sui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
+  --sui-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  --sui-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
+  --sui-shadow-colored: 0 4px 20px rgba(102, 126, 234, 0.3);
+  
+  /* ========== Status Colors ========== */
+  --sui-success: #48bb78;
+  --sui-warning: #ed8936;
+  --sui-error: #f56565;
+  --sui-info: #4299e1;
+  
+  /* ========== Header ========== */
+  --sui-header-gradient: linear-gradient(135deg, var(--sui-gradient-start), var(--sui-gradient-end));
+  
+  /* All other variables inherit from foundation/variables.css */
+}