solid-ui 3.0.1-4cafc12 → 3.0.1-cfddd49

package/dist/theme-accessibility.css

@@ -1,147 +0,0 @@
-/**
- * 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/theme-classic.css

@@ -1,70 +0,0 @@
-/**
- * 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/theme-default.css

@@ -1,65 +0,0 @@
-/**
- * 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 */
-}

package/dist/theme-signal.css

@@ -1,65 +0,0 @@
-/**
- * Signal Theme - Privacy-focused Dark Blue
- * 
- * Inspired by solid-chat's "Signal" theme.
- * Clean, professional design with Signal's color palette.
- */
-
-:root {
-  /* ========== Primary Colors ========== */
-  --sui-primary: #2c6bed;
-  --sui-primary-dark: #1851c4;
-  --sui-primary-light: #5e94f5;
-  --sui-accent: #5e94f5;
-  
-  /* ========== Gradients ========== */
-  --sui-gradient-start: #2c6bed;
-  --sui-gradient-end: #1851c4;
-  --sui-gradient: linear-gradient(135deg, var(--sui-gradient-start), var(--sui-gradient-end));
-  
-  /* ========== Backgrounds ========== */
-  --sui-bg: #f6f6f6;
-  --sui-bg-panel: #ffffff;
-  --sui-bg-header: #d9e6fc;
-  --sui-bg-input: #ffffff;
-  --sui-bg-hover: #f0f0f0;
-  --sui-bg-active: #e8f1fd;
-  --sui-bg-button: #ffffff;
-  --sui-bg-button-hover: #f0f0f0;
-  
-  /* ========== Text Colors ========== */
-  --sui-text: #1b1b1b;
-  --sui-text-secondary: #5e5e5e;
-  --sui-text-muted: #8e8e93;
-  --sui-text-link: #2c6bed;
-  --sui-text-on-primary: #ffffff;
-  
-  /* ========== Borders ========== */
-  --sui-border-color: #d4d4d4;
-  --sui-border-color-dark: #b8b8b8;
-  --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 2px 8px rgba(44, 107, 237, 0.2);
-  --sui-shadow-lg: 0 4px 12px rgba(44, 107, 237, 0.3);
-  --sui-shadow-colored: 0 2px 8px rgba(44, 107, 237, 0.4);
-  
-  /* ========== Status Colors ========== */
-  --sui-success: #00b433;
-  --sui-warning: #ff9500;
-  --sui-error: #e83535;
-  --sui-info: #2c6bed;
-  
-  /* ========== Header ========== */
-  --sui-header-gradient: linear-gradient(135deg, var(--sui-gradient-start), var(--sui-gradient-end));
-  
-  /* All other variables inherit from foundation/variables.css */
-}

package/dist/theme-telegram.css

@@ -1,65 +0,0 @@
-/**
- * Telegram Theme - Messenger-style Blue
- * 
- * Inspired by solid-chat's "Telegram" theme.
- * Clean blue design reminiscent of Telegram/Messenger.
- */
-
-:root {
-  /* ========== Primary Colors ========== */
-  --sui-primary: #0088cc;
-  --sui-primary-dark: #0078b8;
-  --sui-primary-light: #54a9eb;
-  --sui-accent: #54a9eb;
-  
-  /* ========== Gradients ========== */
-  --sui-gradient-start: #0088cc;
-  --sui-gradient-end: #0078b8;
-  --sui-gradient: linear-gradient(135deg, var(--sui-gradient-start), var(--sui-gradient-end));
-  
-  /* ========== Backgrounds ========== */
-  --sui-bg: #f4f4f5;
-  --sui-bg-panel: #ffffff;
-  --sui-bg-header: #d4e9f7;
-  --sui-bg-input: #ffffff;
-  --sui-bg-hover: #f0f0f1;
-  --sui-bg-active: #e8f4fd;
-  --sui-bg-button: #ffffff;
-  --sui-bg-button-hover: #f0f0f1;
-  
-  /* ========== Text Colors ========== */
-  --sui-text: #000000;
-  --sui-text-secondary: #707579;
-  --sui-text-muted: #a2acb4;
-  --sui-text-link: #0088cc;
-  --sui-text-on-primary: #ffffff;
-  
-  /* ========== Borders ========== */
-  --sui-border-color: #dadce0;
-  --sui-border-color-dark: #c6c9cc;
-  --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 2px 8px rgba(0, 136, 204, 0.2);
-  --sui-shadow-lg: 0 4px 12px rgba(0, 136, 204, 0.3);
-  --sui-shadow-colored: 0 2px 8px rgba(0, 136, 204, 0.4);
-  
-  /* ========== Status Colors ========== */
-  --sui-success: #00c73e;
-  --sui-warning: #ff9500;
-  --sui-error: #ff3b30;
-  --sui-info: #0088cc;
-  
-  /* ========== Header ========== */
-  --sui-header-gradient: linear-gradient(135deg, var(--sui-gradient-start), var(--sui-gradient-end));
-  
-  /* All other variables inherit from foundation/variables.css */
-}

package/dist/theme-variables.css

@@ -1,163 +0,0 @@
-/**
- * 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/theme-wave.css

@@ -1,65 +0,0 @@
-/**
- * Wave Theme - WhatsApp-style Green
- * 
- * Inspired by solid-chat's "Wave" theme.
- * Clean green design reminiscent of WhatsApp.
- */
-
-:root {
-  /* ========== Primary Colors ========== */
-  --sui-primary: #128c7e;
-  --sui-primary-dark: #075e54;
-  --sui-primary-light: #25d366;
-  --sui-accent: #25d366;
-  
-  /* ========== Gradients ========== */
-  --sui-gradient-start: #128c7e;
-  --sui-gradient-end: #075e54;
-  --sui-gradient: linear-gradient(135deg, var(--sui-gradient-start), var(--sui-gradient-end));
-  
-  /* ========== Backgrounds ========== */
-  --sui-bg: #efeae2;
-  --sui-bg-panel: #ffffff;
-  --sui-bg-header: #d9fdd3;
-  --sui-bg-input: #ffffff;
-  --sui-bg-hover: #f0f2f5;
-  --sui-bg-active: #d9fdd3;
-  --sui-bg-button: #ffffff;
-  --sui-bg-button-hover: #f0f2f5;
-  
-  /* ========== Text Colors ========== */
-  --sui-text: #111b21;
-  --sui-text-secondary: #667781;
-  --sui-text-muted: #8696a0;
-  --sui-text-link: #128c7e;
-  --sui-text-on-primary: #ffffff;
-  
-  /* ========== Borders ========== */
-  --sui-border-color: #e9edef;
-  --sui-border-color-dark: #d1d7db;
-  --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 2px 8px rgba(18, 140, 126, 0.2);
-  --sui-shadow-lg: 0 4px 12px rgba(18, 140, 126, 0.3);
-  --sui-shadow-colored: 0 2px 8px rgba(18, 140, 126, 0.4);
-  
-  /* ========== Status Colors ========== */
-  --sui-success: #25d366;
-  --sui-warning: #e8b923;
-  --sui-error: #dd3e3e;
-  --sui-info: #00a5f4;
-  
-  /* ========== Header ========== */
-  --sui-header-gradient: linear-gradient(135deg, var(--sui-gradient-start), var(--sui-gradient-end));
-  
-  /* All other variables inherit from foundation/variables.css */
-}