@qwickapps/react-framework 1.3.0

package/src/palettes/PaletteCosmic.css

@@ -0,0 +1,172 @@
+/**
+ * Cosmic Color Palette
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ * 
+ * Modern purple gradient for creative and tech brands - inspired by cosmic nebulae
+ */
+
+/* ===== COSMIC PALETTE - LIGHT THEME ===== */
+html[data-palette="cosmic"]:not([data-theme="dark"]), 
+html[data-palette="cosmic"][data-theme="light"] {
+  /* Primary palette - Deep cosmic purple */
+  --palette-primary-main: #8b5cf6;
+  --palette-primary-light: #a78bfa;
+  --palette-primary-dark: #7c3aed;
+  --palette-on-primary: #ffffff;
+
+  /* Secondary palette - Violet accents */
+  --palette-secondary-main: #8b5cf6;
+  --palette-secondary-light: #c4b5fd;
+  --palette-secondary-dark: #6d28d9;
+  --palette-on-secondary: #ffffff;
+
+  /* Surface palette - Stardust */
+  --palette-surface-main: #faf7ff;
+  --palette-surface-variant: #f3e8ff;
+  --palette-surface-elevated: #ffffff;
+  --palette-on-surface: #4c1d95;
+
+  /* Background palette - Galaxy mist */
+  --palette-background-main: #fef7ff;
+  --palette-background-dark: #fae8ff;
+  --palette-background-overlay: rgba(254, 247, 255, 0.95);
+  --palette-on-background: #6b21a8;
+
+  /* Header background with transparency */
+  --palette-header-bg-start: rgba(254, 247, 255, 0.98);
+  --palette-header-bg-end: rgba(254, 247, 255, 0.95);
+  --palette-header-collapsed-bg-start: rgba(254, 247, 255, 0.99);
+  --palette-header-collapsed-bg-end: rgba(254, 247, 255, 0.96);
+  
+  /* Text palette - Deep space */
+  --palette-text-primary: #4c1d95;
+  --palette-text-secondary: #7c3aed;
+  --palette-text-disabled: rgba(76, 29, 149, 0.38);
+  --palette-text-inverted: #ffffff;
+  
+  /* Border palette - Aurora */
+  --palette-border-main: #c4b5fd;
+  --palette-border-light: rgba(76, 29, 149, 0.12);
+  --palette-border-lighter: rgba(76, 29, 149, 0.05);
+  --palette-border-medium: #a78bfa;
+  
+  /* Success palette - Emerald nebula */
+  --palette-success-main: #10b981;
+  --palette-success-light: #d1fae5;
+  --palette-success-dark: #047857;
+  --palette-success-border: #6ee7b7;
+  
+  /* Error palette - Red giant */
+  --palette-error-main: #ef4444;
+  --palette-error-light: #fee2e2;
+  --palette-error-dark: #b91c1c;
+  --palette-error-border: #fecaca;
+  
+  /* Warning palette - Solar flare */
+  --palette-warning-main: #f59e0b;
+  --palette-warning-light: #fef3c7;
+  --palette-warning-dark: #b45309;
+  --palette-warning-border: #fde68a;
+  
+  /* Info palette - Cosmic blue */
+  --palette-info-main: #3b82f6;
+  --palette-info-light: #dbeafe;
+  --palette-info-dark: #1d4ed8;
+  --palette-on-info: #ffffff;
+  --palette-info-border: #93c5fd;
+  
+  /* Accent palette - Pink nebula */
+  --palette-accent-main: #ec4899;
+  --palette-accent-light: #f472b6;
+  --palette-accent-dark: #be185d;
+  --palette-on-accent: #ffffff;
+  
+  /* Control palette - Void */
+  --palette-control-main: #1e1b4b;
+  --palette-control-light: #3730a3;
+  --palette-control-text: #e0e7ff;
+  --palette-control-border: #8b5cf6;
+}
+
+/* ===== COSMIC PALETTE - DARK THEME ===== */
+html[data-palette="cosmic"][data-theme="dark"] {
+  /* Primary palette - Neon purple */
+  --palette-primary-main: #a78bfa;
+  --palette-primary-light: #c4b5fd;
+  --palette-primary-dark: #8b5cf6;
+  --palette-on-primary: #1e1b4b;
+
+  /* Secondary palette - Electric violet */
+  --palette-secondary-main: #c4b5fd;
+  --palette-secondary-light: #ddd6fe;
+  --palette-secondary-dark: #a78bfa;
+  --palette-on-secondary: #1e1b4b;
+
+  /* Surface palette - Dark matter */
+  --palette-surface-main: #1e1b4b;
+  --palette-surface-variant: #312e81;
+  --palette-surface-elevated: #3730a3;
+  --palette-on-surface: #e0e7ff;
+
+  /* Background palette - Deep space */
+  --palette-background-main: #0f0c29;
+  --palette-background-dark: #1a1625;
+  --palette-background-overlay: rgba(15, 12, 41, 0.95);
+  --palette-on-background: #c4b5fd;
+
+  /* Header background with transparency */
+  --palette-header-bg-start: rgba(15, 12, 41, 0.98);
+  --palette-header-bg-end: rgba(15, 12, 41, 0.95);
+  --palette-header-collapsed-bg-start: rgba(15, 12, 41, 0.99);
+  --palette-header-collapsed-bg-end: rgba(15, 12, 41, 0.96);
+  
+  /* Text palette - Starlight */
+  --palette-text-primary: #e0e7ff;
+  --palette-text-secondary: #c4b5fd;
+  --palette-text-disabled: rgba(224, 231, 255, 0.38);
+  --palette-text-inverted: #0f0c29;
+  
+  /* Border palette - Cosmic rays */
+  --palette-border-main: #4338ca;
+  --palette-border-light: rgba(224, 231, 255, 0.12);
+  --palette-border-lighter: rgba(224, 231, 255, 0.05);
+  --palette-border-medium: #312e81;
+  
+  /* Success palette - Green pulsar */
+  --palette-success-main: #34d399;
+  --palette-success-light: #047857;
+  --palette-success-dark: #10b981;
+  --palette-success-border: #065f46;
+  
+  /* Error palette - Red dwarf */
+  --palette-error-main: #f87171;
+  --palette-error-light: #b91c1c;
+  --palette-error-dark: #ef4444;
+  --palette-error-border: #991b1b;
+  
+  /* Warning palette - Orange giant */
+  --palette-warning-main: #fb7185;
+  --palette-warning-light: #881337;
+  --palette-warning-dark: #e11d48;
+  --palette-warning-border: #be123c;
+  
+  /* Info palette - Blue supergiant */
+  --palette-info-main: #60a5fa;
+  --palette-info-light: #1d4ed8;
+  --palette-info-dark: #3b82f6;
+  --palette-on-info: #0f0c29;
+  --palette-info-border: #2563eb;
+  
+  /* Accent palette - Magenta quasar */
+  --palette-accent-main: #f472b6;
+  --palette-accent-light: #f9a8d4;
+  --palette-accent-dark: #ec4899;
+  --palette-on-accent: #0f0c29;
+  
+  /* Control palette - Black hole */
+  --palette-control-main: #312e81;
+  --palette-control-light: #4338ca;
+  --palette-control-text: #f3f4f6;
+  --palette-control-border: #4338ca;
+}

package/src/palettes/PaletteCosmic.ts

@@ -0,0 +1,16 @@
+/**
+ * Cosmic Palette Configuration
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+import "./PaletteCosmic.css";
+import type { PaletteConfig } from '../contexts/PaletteContext';
+
+export const PaletteCosmic: PaletteConfig = {
+  id: 'cosmic',
+  name: 'Cosmic',
+  description: 'Modern purple gradient for creative and tech brands',
+  primaryColor: '#8b5cf6',
+};
+
+export default PaletteCosmic;

package/src/palettes/PaletteDefault.css

@@ -0,0 +1,178 @@
+/**
+ * Default Color Palette
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ * 
+ * Classic blue and neutral color scheme - the original QwickApps palette
+ */
+
+/* ===== DEFAULT PALETTE - LIGHT THEME ===== */
+html[data-palette="default"]:not([data-theme="dark"]), 
+html[data-palette="default"][data-theme="light"] {
+  /* Primary */
+  --palette-primary-main: #007bff;
+  --palette-primary-light: #4a90e2;
+  --palette-primary-dark: #0056b3;
+  --palette-on-primary: #ffffff;
+
+  /* Secondary */
+  --palette-secondary-main: #6c757d;
+  --palette-secondary-light: #868e96;
+  --palette-secondary-dark: #495057;
+  --palette-on-secondary: #ffffff;
+
+  /* Surface */
+  --palette-surface-main: #ffffff;
+  --palette-surface-variant: #f5f5f5; /* Improved contrast from #fafafa */
+  --palette-surface-elevated: #ffffff;
+  --palette-on-surface: #000000;
+
+  /* Background */
+  --palette-background-main: #ffffff;
+  --palette-background-dark: #fafafa;
+  --palette-background-overlay: rgba(255, 255, 255, 0.95);
+  --palette-on-background: #000000;
+
+  /* Header background with transparency */
+  --palette-header-bg-start: rgba(255, 255, 255, 0.98);
+  --palette-header-bg-end: rgba(255, 255, 255, 0.95);
+  --palette-header-collapsed-bg-start: rgba(255, 255, 255, 0.99);
+  --palette-header-collapsed-bg-end: rgba(255, 255, 255, 0.96);
+
+  /* Text palette */
+  --palette-text-primary: #000000;
+  --palette-text-secondary: #666666;
+  --palette-text-disabled: rgba(0, 0, 0, 0.38);
+  --palette-text-inverted: #ffffff;
+
+  /* Border palette */
+  --palette-border-main: #e0e0e0;
+  --palette-border-light: rgba(0, 0, 0, 0.12);
+  --palette-border-lighter: rgba(0, 0, 0, 0.05);
+  --palette-border-medium: #ccc;
+
+  /* Success palette */
+  --palette-success-main: #28a745;
+  --palette-success-light: #d4edda;
+  --palette-success-dark: #155724;
+  --palette-on-success: #ffffff;
+  --palette-success-border: #c3e6cb;
+
+  /* Error palette */
+  --palette-error-main: #dc3545;
+  --palette-error-light: #f8d7da;
+  --palette-error-dark: #721c24;
+  --palette-on-error: #ffffff;
+  --palette-error-border: #f5c6cb;
+
+  /* Warning palette */
+  --palette-warning-main: #ffc107;
+  --palette-warning-light: #fff3cd;
+  --palette-warning-dark: #856404;
+  --palette-on-warning: #000000;
+  --palette-warning-border: #ffeeba;
+
+  /* Info palette */
+  --palette-info-main: #007acc;
+  --palette-info-light: #f0f8ff;
+  --palette-info-dark: #005588;
+  --palette-on-info: #ffffff;
+  --palette-info-border: #007acc;
+
+  /* Accent palette for highlights and branding */
+  --palette-accent-main: #ff6b35;
+  --palette-accent-light: #ffb3a0;
+  --palette-accent-dark: #cc5429;
+  --palette-on-accent: #ffffff;
+
+  /* Control palette */
+  --palette-control-main: #1a1a1a;
+  --palette-control-light: #2a2a2a;
+  --palette-control-text: #ccc;
+  --palette-control-border: #333;
+}
+
+/* ===== DEFAULT PALETTE - DARK THEME ===== */
+html[data-palette="default"][data-theme="dark"] {
+  /* Primary */
+  --palette-primary-main: #4a90e2;
+  --palette-primary-light: #87ceeb;
+  --palette-primary-dark: #1a365d;
+  --palette-on-primary: #ffffff;
+
+  /* Secondary */
+  --palette-secondary-main: #868e96;
+  --palette-secondary-light: #adb5bd;
+  --palette-secondary-dark: #6c757d;
+  --palette-on-secondary: #ffffff;
+
+  /* Surface */
+  --palette-surface-main: #1e1e1e;
+  --palette-surface-variant: #2a2a2a;
+  --palette-surface-elevated: #353535;
+  --palette-on-surface: #ffffff;
+
+  /* Background */
+  --palette-background-main: #121212;
+  --palette-background-dark: #2a2a2a;
+  --palette-background-overlay: rgba(30, 30, 30, 0.95);
+  --palette-on-background: #ffffff;
+
+  /* Header background with transparency */
+  --palette-header-bg-start: rgba(18, 18, 18, 0.98);
+  --palette-header-bg-end: rgba(18, 18, 18, 0.95);
+  --palette-header-collapsed-bg-start: rgba(18, 18, 18, 0.99);
+  --palette-header-collapsed-bg-end: rgba(18, 18, 18, 0.96);
+
+  /* Text palette */
+  --palette-text-primary: #ffffff;
+  --palette-text-secondary: #b0b0b0;
+  --palette-text-disabled: rgba(255, 255, 255, 0.38);
+  --palette-text-inverted: #000000;
+
+  /* Border palette */
+  --palette-border-main: #555;
+  --palette-border-light: rgba(255, 255, 255, 0.12);
+  --palette-border-lighter: rgba(255, 255, 255, 0.05);
+  --palette-border-medium: #333;
+
+  /* Success palette */
+  --palette-success-main: #4ade80;
+  --palette-success-light: #064e3b;
+  --palette-success-dark: #22c55e;
+  --palette-on-success: #ffffff;
+  --palette-success-border: #065f46;
+
+  /* Error palette */
+  --palette-error-main: #f87171;
+  --palette-error-light: #7f1d1d;
+  --palette-error-dark: #ef4444;
+  --palette-on-error: #ffffff;
+  --palette-error-border: #991b1b;
+
+  /* Warning palette */
+  --palette-warning-main: #fbbf24;
+  --palette-warning-light: #78350f;
+  --palette-warning-dark: #f59e0b;
+  --palette-on-warning: #000000;
+  --palette-warning-border: #92400e;
+
+  /* Info palette */
+  --palette-info-main: #60a5fa;
+  --palette-info-light: #1e3a8a;
+  --palette-info-dark: #3b82f6;
+  --palette-on-info: #ffffff;
+  --palette-info-border: #1d4ed8;
+
+  /* Accent palette for highlights and branding */
+  --palette-accent-main: #ff8a65;
+  --palette-accent-light: #ffcc9c;
+  --palette-accent-dark: #cc6e52;
+  --palette-on-accent: #ffffff;
+
+  /* Control palette */
+  --palette-control-main: #2a2a2a;
+  --palette-control-light: #3a3a3a;
+  --palette-control-text: #e0e0e0;
+  --palette-control-border: #555;
+}

package/src/palettes/PaletteDefault.ts

@@ -0,0 +1,17 @@
+/**
+ * Default Palette Configuration
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import "./PaletteDefault.css";
+import type { PaletteConfig } from '../contexts/PaletteContext';
+
+export const PaletteDefault: PaletteConfig = {
+  id: 'default',
+  name: 'Default',
+  description: 'Classic blue and neutral colors',
+  primaryColor: '#007bff',
+};
+
+export default PaletteDefault;

package/src/palettes/PaletteOcean.css

@@ -0,0 +1,172 @@
+/**
+ * Ocean Color Palette
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ * 
+ * Deep blues, aqua teals, and seafoam greens - inspired by ocean depths
+ */
+
+/* ===== OCEAN PALETTE - LIGHT THEME ===== */
+html[data-palette="ocean"]:not([data-theme="dark"]), 
+html[data-palette="ocean"][data-theme="light"] {
+  /* Primary palette - Deep ocean */
+  --palette-primary-main: #0891b2;
+  --palette-primary-light: #22d3ee;
+  --palette-primary-dark: #164e63;
+  --palette-on-primary: #ffffff;
+
+  /* Secondary palette - Deep teal */
+  --palette-secondary-main: #0f766e;
+  --palette-secondary-light: #14b8a6;
+  --palette-secondary-dark: #134e4a;
+  --palette-on-secondary: #ffffff;
+
+  /* Surface palette - Sea foam */
+  --palette-surface-main: #f0fdfa;
+  --palette-surface-variant: #ccfbf1;
+  --palette-surface-elevated: #ffffff;
+  --palette-on-surface: #164e63;
+
+  /* Background palette - Shallow water */
+  --palette-background-main: #ecfeff;
+  --palette-background-dark: #cffafe;
+  --palette-background-overlay: rgba(236, 254, 255, 0.95);
+  --palette-on-background: #0f766e;
+
+  /* Header background with transparency */
+  --palette-header-bg-start: rgba(236, 254, 255, 0.98);
+  --palette-header-bg-end: rgba(236, 254, 255, 0.95);
+  --palette-header-collapsed-bg-start: rgba(236, 254, 255, 0.99);
+  --palette-header-collapsed-bg-end: rgba(236, 254, 255, 0.96);
+  
+  /* Text palette - Deep sea */
+  --palette-text-primary: #164e63;
+  --palette-text-secondary: #0891b2;
+  --palette-text-disabled: rgba(22, 78, 99, 0.38);
+  --palette-text-inverted: #ffffff;
+  
+  /* Border palette - Tide line */
+  --palette-border-main: #a7f3d0;
+  --palette-border-light: rgba(22, 78, 99, 0.12);
+  --palette-border-lighter: rgba(22, 78, 99, 0.05);
+  --palette-border-medium: #67e8f9;
+  
+  /* Success palette - Kelp green */
+  --palette-success-main: #059669;
+  --palette-success-light: #d1fae5;
+  --palette-success-dark: #065f46;
+  --palette-success-border: #a7f3d0;
+  
+  /* Error palette - Coral */
+  --palette-error-main: #ef4444;
+  --palette-error-light: #fee2e2;
+  --palette-error-dark: #7f1d1d;
+  --palette-error-border: #fecaca;
+  
+  /* Warning palette - Sandy yellow */
+  --palette-warning-main: #f59e0b;
+  --palette-warning-light: #fef3c7;
+  --palette-warning-dark: #78350f;
+  --palette-warning-border: #fde68a;
+  
+  /* Info palette - Crystal blue */
+  --palette-info-main: #0ea5e9;
+  --palette-info-light: #e0f2fe;
+  --palette-info-dark: #0c4a6e;
+  --palette-on-info: #ffffff;
+  --palette-info-border: #7dd3fc;
+  
+  /* Accent palette - Coral reef */
+  --palette-accent-main: #f97316;
+  --palette-accent-light: #fb923c;
+  --palette-accent-dark: #ea580c;
+  --palette-on-accent: #ffffff;
+  
+  /* Control palette - Depth */
+  --palette-control-main: #0c4a6e;
+  --palette-control-light: #075985;
+  --palette-control-text: #cffafe;
+  --palette-control-border: #0891b2;
+}
+
+/* ===== OCEAN PALETTE - DARK THEME ===== */
+html[data-palette="ocean"][data-theme="dark"] {
+  /* Primary palette - Bioluminescent */
+  --palette-primary-main: #22d3ee;
+  --palette-primary-light: #67e8f9;
+  --palette-primary-dark: #0891b2;
+  --palette-on-primary: #0a1a1f;
+
+  /* Secondary palette - Deep current */
+  --palette-secondary-main: #5eead4;
+  --palette-secondary-light: #99f6e4;
+  --palette-secondary-dark: #14b8a6;
+  --palette-on-secondary: #0a1a1f;
+
+  /* Surface palette - Abyss */
+  --palette-surface-main: #0a1a1f;
+  --palette-surface-variant: #164e63;
+  --palette-surface-elevated: #0e7490;
+  --palette-on-surface: #cffafe;
+
+  /* Background palette - Ocean floor */
+  --palette-background-main: #020617;
+  --palette-background-dark: #0c1821;
+  --palette-background-overlay: rgba(10, 26, 31, 0.95);
+  --palette-on-background: #5eead4;
+
+  /* Header background with transparency */
+  --palette-header-bg-start: rgba(2, 6, 23, 0.98);
+  --palette-header-bg-end: rgba(2, 6, 23, 0.95);
+  --palette-header-collapsed-bg-start: rgba(2, 6, 23, 0.99);
+  --palette-header-collapsed-bg-end: rgba(2, 6, 23, 0.96);
+  
+  /* Text palette - Phosphorescent */
+  --palette-text-primary: #cffafe;
+  --palette-text-secondary: #a5f3fc;
+  --palette-text-disabled: rgba(207, 250, 254, 0.38);
+  --palette-text-inverted: #020617;
+  
+  /* Border palette - Deep current */
+  --palette-border-main: #155e75;
+  --palette-border-light: rgba(207, 250, 254, 0.12);
+  --palette-border-lighter: rgba(207, 250, 254, 0.05);
+  --palette-border-medium: #0c4a6e;
+  
+  /* Success palette - Algae glow */
+  --palette-success-main: #34d399;
+  --palette-success-light: #065f46;
+  --palette-success-dark: #10b981;
+  --palette-success-border: #047857;
+  
+  /* Error palette - Red tide */
+  --palette-error-main: #f87171;
+  --palette-error-light: #7f1d1d;
+  --palette-error-dark: #ef4444;
+  --palette-error-border: #991b1b;
+  
+  /* Warning palette - Sunset reflection */
+  --palette-warning-main: #fb7185;
+  --palette-warning-light: #881337;
+  --palette-warning-dark: #e11d48;
+  --palette-warning-border: #be123c;
+  
+  /* Info palette - Electric blue */
+  --palette-info-main: #0ea5e9;
+  --palette-info-light: #0c4a6e;
+  --palette-info-dark: #38bdf8;
+  --palette-on-info: #020617;
+  --palette-info-border: #0284c7;
+  
+  /* Accent palette - Warm coral */
+  --palette-accent-main: #ea580c;
+  --palette-accent-light: #fb923c;
+  --palette-accent-dark: #c2410c;
+  --palette-on-accent: #cffafe;
+  
+  /* Control palette - Midnight depth */
+  --palette-control-main: #164e63;
+  --palette-control-light: #0e7490;
+  --palette-control-text: #ecfeff;
+  --palette-control-border: #155e75;
+}

package/src/palettes/PaletteOcean.ts

@@ -0,0 +1,16 @@
+/**
+ * Ocean Palette Configuration
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+import "./PaletteOcean.css";
+import type { PaletteConfig } from '../contexts/PaletteContext';
+
+export const PaletteOcean: PaletteConfig = {
+  id: 'ocean',
+  name: 'Ocean',
+  description: 'Deep blues and aqua teals',
+  primaryColor: '#0891b2',
+};
+
+export default PaletteOcean;