@qwickapps/react-framework 1.4.4 → 1.4.6

package/dist/palettes/PaletteSpring.css

@@ -0,0 +1,160 @@
+/**
+ * Spring Color Palette
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ * 
+ * Fresh greens, soft pinks, and bright yellows - inspired by spring blooms
+ */
+
+/* ===== SPRING PALETTE - LIGHT THEME ===== */
+html[data-palette="spring"]:not([data-theme="dark"]), 
+html[data-palette="spring"][data-theme="light"] {
+  /* Primary palette - Fresh green */
+  --palette-primary-main: #16a34a;
+  --palette-primary-light: #4ade80;
+  --palette-primary-dark: #15803d;
+  --palette-on-primary: #ffffff;
+
+  /* Secondary palette - Blossom pink */
+  --palette-secondary-main: #ec4899;
+  --palette-secondary-light: #f472b6;
+  --palette-secondary-dark: #be185d;
+  --palette-on-secondary: #ffffff;
+
+  /* Surface palette - Soft white */
+  --palette-surface-main: #f7fee7;
+  --palette-surface-variant: #d9f7be; /* Improved contrast with subtle green tint */
+  --palette-surface-elevated: #ffffff;
+  --palette-on-surface: #14532d;
+
+  /* Background palette - Morning dew */
+  --palette-background-main: #f0fdf4;
+  --palette-background-dark: #dcfce7;
+  --palette-background-overlay: rgba(240, 253, 244, 0.95);
+  --palette-on-background: #166534;
+
+  /* Text palette - Deep forest */
+  --palette-text-primary: #14532d;
+  --palette-text-secondary: #166534;
+  --palette-text-disabled: rgba(20, 83, 45, 0.38);
+  --palette-text-inverted: #ffffff;
+  
+  /* Border palette - Sage */
+  --palette-border-main: #bbf7d0;
+  --palette-border-light: rgba(20, 83, 45, 0.12);
+  --palette-border-lighter: rgba(20, 83, 45, 0.05);
+  --palette-border-medium: #86efac;
+  
+  /* Success palette - Vibrant green */
+  --palette-success-main: #22c55e;
+  --palette-success-light: #dcfce7;
+  --palette-success-dark: #15803d;
+  --palette-success-border: #bbf7d0;
+  
+  /* Error palette - Cherry blossom */
+  --palette-error-main: #f43f5e;
+  --palette-error-light: #ffe4e6;
+  --palette-error-dark: #881337;
+  --palette-error-border: #fecdd3;
+  
+  /* Warning palette - Daffodil */
+  --palette-warning-main: #eab308;
+  --palette-warning-light: #fefce8;
+  --palette-warning-dark: #713f12;
+  --palette-warning-border: #fef08a;
+  
+  /* Info palette - Sky blue */
+  --palette-info-main: #0ea5e9;
+  --palette-info-light: #e0f2fe;
+  --palette-info-dark: #0c4a6e;
+  --palette-on-info: #14532d;
+  --palette-info-border: #7dd3fc;
+  
+  /* Accent palette - Cherry blossom */
+  --palette-accent-main: #ec4899;
+  --palette-accent-light: #fce7f3;
+  --palette-accent-dark: #be185d;
+  --palette-on-accent: #ffffff;
+  
+  /* Control palette - Rich earth */
+  --palette-control-main: #365314;
+  --palette-control-light: #4d7c0f;
+  --palette-control-text: #ecfdf5;
+  --palette-control-border: #65a30d;
+}
+
+/* ===== SPRING PALETTE - DARK THEME ===== */
+html[data-palette="spring"][data-theme="dark"] {
+  /* Primary palette - Neon leaf */
+  --palette-primary-main: #4ade80;
+  --palette-primary-light: #86efac;
+  --palette-primary-dark: #16a34a;
+  --palette-on-primary: #0f1f0f;
+
+  /* Secondary palette - Neon bloom */
+  --palette-secondary-main: #f472b6;
+  --palette-secondary-light: #f9a8d4;
+  --palette-secondary-dark: #ec4899;
+  --palette-on-secondary: #0f1f0f;
+
+  /* Surface palette - Dark moss */
+  --palette-surface-main: #0f1f0f;
+  --palette-surface-variant: #1a2e1a;
+  --palette-surface-elevated: #2d4a2d;
+  --palette-on-surface: #dcfce7;
+
+  /* Background palette - Deep forest */
+  --palette-background-main: #0a120a;
+  --palette-background-dark: #0f1f0f;
+  --palette-background-overlay: rgba(15, 31, 15, 0.95);
+  --palette-on-background: #bbf7d0;
+
+  /* Text palette - Moonlit green */
+  --palette-text-primary: #dcfce7;
+  --palette-text-secondary: #bbf7d0;
+  --palette-text-disabled: rgba(220, 252, 231, 0.38);
+  --palette-text-inverted: #0a120a;
+  
+  /* Border palette - Night vine */
+  --palette-border-main: #166534;
+  --palette-border-light: rgba(220, 252, 231, 0.12);
+  --palette-border-lighter: rgba(220, 252, 231, 0.05);
+  --palette-border-medium: #14532d;
+  
+  /* Success palette - Electric green */
+  --palette-success-main: #22c55e;
+  --palette-success-light: #14532d;
+  --palette-success-dark: #4ade80;
+  --palette-success-border: #166534;
+  
+  /* Error palette - Neon pink */
+  --palette-error-main: #f472b6;
+  --palette-error-light: #881337;
+  --palette-error-dark: #ec4899;
+  --palette-error-border: #be185d;
+  
+  /* Warning palette - Electric yellow */
+  --palette-warning-main: #facc15;
+  --palette-warning-light: #713f12;
+  --palette-warning-dark: #eab308;
+  --palette-warning-border: #a16207;
+  
+  /* Info palette - Electric cyan */
+  --palette-info-main: #06b6d4;
+  --palette-info-light: #164e63;
+  --palette-info-dark: #22d3ee;
+  --palette-on-info: #0a120a;
+  --palette-info-border: #0891b2;
+  
+  /* Accent palette - Electric bloom */
+  --palette-accent-main: #f472b6;
+  --palette-accent-light: #fce7f3;
+  --palette-accent-dark: #db2777;
+  --palette-on-accent: #dcfce7;
+  
+  /* Control palette - Deep forest */
+  --palette-control-main: #1a2e1a;
+  --palette-control-light: #2d4a2d;
+  --palette-control-text: #dcfce7;
+  --palette-control-border: #166534;
+}

package/dist/palettes/PaletteWinter.css

@@ -0,0 +1,172 @@
+/**
+ * Winter Color Palette
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ * 
+ * Cool blues, icy whites, and frosty grays - inspired by winter landscapes
+ */
+
+/* ===== WINTER PALETTE - LIGHT THEME ===== */
+html[data-palette="winter"]:not([data-theme="dark"]), 
+html[data-palette="winter"][data-theme="light"] {
+  /* Primary palette - Ice blue */
+  --palette-primary-main: #0077be;
+  --palette-primary-light: #5ba3d0;
+  --palette-primary-dark: #005082;
+  --palette-on-primary: #ffffff;
+
+  /* Secondary palette - Steel blue */
+  --palette-secondary-main: #4682b4;
+  --palette-secondary-light: #7ba7cc;
+  --palette-secondary-dark: #2e5984;
+  --palette-on-secondary: #ffffff;
+
+  /* Surface palette - Snow white */
+  --palette-surface-main: #fafbfc;
+  --palette-surface-variant: #e2e8f0; /* Improved contrast with cooler tone */
+  --palette-surface-elevated: #ffffff;
+  --palette-on-surface: #0f172a;
+
+  /* Background palette - Frosty */
+  --palette-background-main: #f8fafc;
+  --palette-background-dark: #f1f5f9;
+  --palette-background-overlay: rgba(248, 250, 252, 0.95);
+  --palette-on-background: #475569;
+
+  /* Header background with transparency */
+  --palette-header-bg-start: rgba(248, 250, 252, 0.98);
+  --palette-header-bg-end: rgba(248, 250, 252, 0.95);
+  --palette-header-collapsed-bg-start: rgba(248, 250, 252, 0.99);
+  --palette-header-collapsed-bg-end: rgba(248, 250, 252, 0.96);
+  
+  /* Text palette - Winter tones */
+  --palette-text-primary: #0f172a;
+  --palette-text-secondary: #475569;
+  --palette-text-disabled: rgba(15, 23, 42, 0.38);
+  --palette-text-inverted: #ffffff;
+  
+  /* Border palette - Icy */
+  --palette-border-main: #cbd5e1;
+  --palette-border-light: rgba(15, 23, 42, 0.12);
+  --palette-border-lighter: rgba(15, 23, 42, 0.05);
+  --palette-border-medium: #94a3b8;
+  
+  /* Success palette - Pine green */
+  --palette-success-main: #059669;
+  --palette-success-light: #d1fae5;
+  --palette-success-dark: #064e3b;
+  --palette-success-border: #a7f3d0;
+  
+  /* Error palette - Winter berry */
+  --palette-error-main: #dc2626;
+  --palette-error-light: #fee2e2;
+  --palette-error-dark: #7f1d1d;
+  --palette-error-border: #fecaca;
+  
+  /* Warning palette - Amber frost */
+  --palette-warning-main: #d97706;
+  --palette-warning-light: #fef3c7;
+  --palette-warning-dark: #92400e;
+  --palette-warning-border: #fde68a;
+  
+  /* Info palette - Arctic blue */
+  --palette-info-main: #0284c7;
+  --palette-info-light: #e0f2fe;
+  --palette-info-dark: #0c4a6e;
+  --palette-on-info: #ffffff;
+  --palette-info-border: #7dd3fc;
+  
+  /* Accent palette - Aurora colors */
+  --palette-accent-main: #ec4899;
+  --palette-accent-light: #fce7f3;
+  --palette-accent-dark: #be185d;
+  --palette-on-accent: #ffffff;
+  
+  /* Control palette - Charcoal */
+  --palette-control-main: #1e293b;
+  --palette-control-light: #334155;
+  --palette-control-text: #e2e8f0;
+  --palette-control-border: #475569;
+}
+
+/* ===== WINTER PALETTE - DARK THEME ===== */
+html[data-palette="winter"][data-theme="dark"] {
+  /* Primary palette - Arctic glow */
+  --palette-primary-main: #7dd3fc;
+  --palette-primary-light: #bae6fd;
+  --palette-primary-dark: #0369a1;
+  --palette-on-primary: #020617;
+
+  /* Secondary palette - Moonlight */
+  --palette-secondary-main: #94a3b8;
+  --palette-secondary-light: #cbd5e1;
+  --palette-secondary-dark: #64748b;
+  --palette-on-secondary: #020617;
+
+  /* Surface palette - Dark frost */
+  --palette-surface-main: #0f172a;
+  --palette-surface-variant: #1e293b;
+  --palette-surface-elevated: #334155;
+  --palette-on-surface: #f8fafc;
+
+  /* Background palette - Winter night */
+  --palette-background-main: #020617;
+  --palette-background-dark: #0f172a;
+  --palette-background-overlay: rgba(15, 23, 42, 0.95);
+  --palette-on-background: #cbd5e1;
+
+  /* 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 - Snow and ice */
+  --palette-text-primary: #f8fafc;
+  --palette-text-secondary: #cbd5e1;
+  --palette-text-disabled: rgba(248, 250, 252, 0.38);
+  --palette-text-inverted: #020617;
+  
+  /* Border palette - Dark ice */
+  --palette-border-main: #475569;
+  --palette-border-light: rgba(248, 250, 252, 0.12);
+  --palette-border-lighter: rgba(248, 250, 252, 0.05);
+  --palette-border-medium: #334155;
+  
+  /* Success palette - Aurora green */
+  --palette-success-main: #34d399;
+  --palette-success-light: #064e3b;
+  --palette-success-dark: #10b981;
+  --palette-success-border: #065f46;
+  
+  /* Error palette - Northern lights red */
+  --palette-error-main: #f87171;
+  --palette-error-light: #7f1d1d;
+  --palette-error-dark: #ef4444;
+  --palette-error-border: #991b1b;
+  
+  /* Warning palette - Aurora orange */
+  --palette-warning-main: #fb923c;
+  --palette-warning-light: #9a3412;
+  --palette-warning-dark: #f97316;
+  --palette-warning-border: #c2410c;
+  
+  /* Info palette - Polar blue */
+  --palette-info-main: #38bdf8;
+  --palette-info-light: #0c4a6e;
+  --palette-info-dark: #0ea5e9;
+  --palette-on-info: #020617;
+  --palette-info-border: #0284c7;
+  
+  /* Accent palette - Northern lights */
+  --palette-accent-main: #f472b6;
+  --palette-accent-light: #fce7f3;
+  --palette-accent-dark: #db2777;
+  --palette-on-accent: #f8fafc;
+  
+  /* Control palette - Midnight */
+  --palette-control-main: #1e293b;
+  --palette-control-light: #334155;
+  --palette-control-text: #e2e8f0;
+  --palette-control-border: #475569;
+}

package/dist/palettes/index.css

@@ -0,0 +1,12 @@
+/**
+ * All Available Color Palettes
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+@import './PaletteDefault.css';
+@import './PaletteAutumn.css';
+@import './PaletteOcean.css';
+@import './PaletteSpring.css';
+@import './PaletteWinter.css';
+@import './PaletteCosmic.css';

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@qwickapps/react-framework",
-  "version": "1.4.4",
+  "version": "1.4.6",
   "type": "module",
   "description": "Complete React framework with responsive navigation, flexible layouts, theming system, and reusable components for building modern applications.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "bin": {
-    "create-qwickapps-project": "./scripts/create-qwickapps-project.js"
+    "create": "./scripts/create-qwickapps-project.js"
   },
   "exports": {
     ".": {
@@ -30,9 +30,10 @@
     "QUICK_START_GUIDE.md"
   ],
   "scripts": {
-    "build": "rollup -c",
-    "build:dev": "NODE_ENV=development rollup -c",
-    "build:prod": "NODE_ENV=production STRIP_LOGS=true rollup -c",
+    "build": "rollup -c && npm run copy-palettes",
+    "copy-palettes": "cp src/palettes/*.css dist/palettes/",
+    "build:dev": "NODE_ENV=development rollup -c && npm run copy-palettes",
+    "build:prod": "NODE_ENV=production STRIP_LOGS=true rollup -c && npm run copy-palettes",
     "dev": "rollup -c -w",
     "test": "jest",
     "test:watch": "jest --watch",

package/scripts/create-qwickapps-project.js

@@ -23,7 +23,7 @@ const projectName = process.argv[2];
 
 if (!projectName) {
   console.error('❌ Error: Please provide a project name');
-  console.log('Usage: npx @qwickapps/react-framework/scripts/create-qwickapps-project my-app-name');
+  console.log('Usage: npx @qwickapps/react-framework create my-app-name');
   process.exit(1);
 }