@qwickapps/react-framework 1.5.1 → 1.5.3

package/README.md

@@ -4,6 +4,16 @@ A complete React framework for building modern, responsive applications with int
 
 ## What's New
 
+### December 5, 2025 - GridLayout equalHeight Fix (v1.5.3)
+
+- **GridLayout equalHeight Fix**: Fixed `equalHeight` prop not working in MUI v6 - updated CSS selector to target Grid children correctly
+
+### December 5, 2025 - Bug Fixes & Control Panel Icons (v1.5.2)
+
+- **Control Panel Icons**: 10 new icons for admin UIs (`key`, `refresh`, `storage`, `manage_accounts`, `person_search`, `block`, `check_circle`, etc.)
+- **Scaffold Background Fix**: Unified background colors between nav and content areas for consistent admin panel appearance
+- **Button Icon Bug Fix**: Fixed issue where unmapped icon names appeared as text (e.g., "refresh Refresh")
+
 ### December 2, 2025 - Major Feature Release (v1.5.0)
 
 #### New Components & Systems

package/dist/components/layout/GridLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/layout/GridLayout.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAMH,OAAO,EAA0B,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,0DAA0D;IAC1D,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAChC,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAuID;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,qBAAqB,CAAC,eAAe,CAK5D,CAAC;AAEH;;GAEG;AACH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/layout/GridLayout.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAMH,OAAO,EAA0B,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,0DAA0D;IAC1D,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAChC,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAwID;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,qBAAqB,CAAC,eAAe,CAK5D,CAAC;AAEH;;GAEG;AACH,eAAe,UAAU,CAAC"}

package/dist/index.esm.js

@@ -18126,7 +18126,8 @@ function GridLayoutView({
       // Override only if explicitly set
       ...(equalHeight && {
         alignItems: 'stretch',
-        '& > .MuiGrid-item': {
+        // Target direct Grid children - MUI v6 uses .MuiGrid-root for grid items with size prop
+        '& > .MuiGrid-root': {
           display: 'flex',
           '& > *': {
             width: '100%',

package/dist/index.js

@@ -18128,7 +18128,8 @@ function GridLayoutView({
       // Override only if explicitly set
       ...(equalHeight && {
         alignItems: 'stretch',
-        '& > .MuiGrid-item': {
+        // Target direct Grid children - MUI v6 uses .MuiGrid-root for grid items with size prop
+        '& > .MuiGrid-root': {
           display: 'flex',
           '& > *': {
             width: '100%',

package/dist/palettes/manifest.json

@@ -1,6 +1,6 @@
 {
   "$schema": "./manifest.schema.json",
-  "version": "1.5.1",
+  "version": "1.5.3",
   "palettes": [
     {
       "id": "default",
@@ -8,11 +8,11 @@
       "description": "Classic blue and neutral color scheme - the original QwickApps palette",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.1",
-      "file": "palette-default.1.5.1.css",
+      "version": "1.5.3",
+      "file": "palette-default.1.5.3.css",
       "primaryColor": "#007bff",
       "inlined": true,
-      "fileMinified": "palette-default.1.5.1.min.css",
+      "fileMinified": "palette-default.1.5.3.min.css",
       "fileLatest": "palette-default.latest.css",
       "fileLatestMinified": "palette-default.latest.min.css"
     },
@@ -22,11 +22,11 @@
       "description": "Warm oranges, golden yellows, and earthy browns - inspired by fall foliage",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.1",
-      "file": "palette-autumn.1.5.1.css",
+      "version": "1.5.3",
+      "file": "palette-autumn.1.5.3.css",
       "primaryColor": "#ea580c",
       "inlined": false,
-      "fileMinified": "palette-autumn.1.5.1.min.css",
+      "fileMinified": "palette-autumn.1.5.3.min.css",
       "fileLatest": "palette-autumn.latest.css",
       "fileLatestMinified": "palette-autumn.latest.min.css"
     },
@@ -36,11 +36,11 @@
       "description": "Modern purple gradient for creative and tech brands - inspired by cosmic nebulae",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.1",
-      "file": "palette-cosmic.1.5.1.css",
+      "version": "1.5.3",
+      "file": "palette-cosmic.1.5.3.css",
       "primaryColor": "#8b5cf6",
       "inlined": false,
-      "fileMinified": "palette-cosmic.1.5.1.min.css",
+      "fileMinified": "palette-cosmic.1.5.3.min.css",
       "fileLatest": "palette-cosmic.latest.css",
       "fileLatestMinified": "palette-cosmic.latest.min.css"
     },
@@ -50,11 +50,11 @@
       "description": "Deep blues, aqua teals, and seafoam greens - inspired by ocean depths",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.1",
-      "file": "palette-ocean.1.5.1.css",
+      "version": "1.5.3",
+      "file": "palette-ocean.1.5.3.css",
       "primaryColor": "#0891b2",
       "inlined": false,
-      "fileMinified": "palette-ocean.1.5.1.min.css",
+      "fileMinified": "palette-ocean.1.5.3.min.css",
       "fileLatest": "palette-ocean.latest.css",
       "fileLatestMinified": "palette-ocean.latest.min.css"
     },
@@ -64,11 +64,11 @@
       "description": "Fresh greens, soft pinks, and bright yellows - inspired by spring blooms",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.1",
-      "file": "palette-spring.1.5.1.css",
+      "version": "1.5.3",
+      "file": "palette-spring.1.5.3.css",
       "primaryColor": "#16a34a",
       "inlined": false,
-      "fileMinified": "palette-spring.1.5.1.min.css",
+      "fileMinified": "palette-spring.1.5.3.min.css",
       "fileLatest": "palette-spring.latest.css",
       "fileLatestMinified": "palette-spring.latest.min.css"
     },
@@ -78,11 +78,11 @@
       "description": "Cool blues, icy whites, and frosty grays - inspired by winter landscapes",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.1",
-      "file": "palette-winter.1.5.1.css",
+      "version": "1.5.3",
+      "file": "palette-winter.1.5.3.css",
       "primaryColor": "#0077be",
       "inlined": false,
-      "fileMinified": "palette-winter.1.5.1.min.css",
+      "fileMinified": "palette-winter.1.5.3.min.css",
       "fileLatest": "palette-winter.latest.css",
       "fileLatestMinified": "palette-winter.latest.min.css"
     }

package/dist/palettes/palette-autumn.1.5.2.css

@@ -0,0 +1,172 @@
+/**
+ * Autumn Color Palette
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ * 
+ * Warm oranges, golden yellows, and earthy browns - inspired by fall foliage
+ */
+
+/* ===== AUTUMN PALETTE - LIGHT THEME ===== */
+html[data-palette="autumn"]:not([data-theme="dark"]), 
+html[data-palette="autumn"][data-theme="light"] {
+  /* Primary palette - Burnt orange */
+  --palette-primary-main: #ea580c;
+  --palette-primary-light: #fb923c;
+  --palette-primary-dark: #c2410c;
+  --palette-on-primary: #ffffff;
+
+  /* Secondary palette - Rich amber */
+  --palette-secondary-main: #b45309;
+  --palette-secondary-light: #d97706;
+  --palette-secondary-dark: #92400e;
+  --palette-on-secondary: #ffffff;
+
+  /* Surface palette - Cream */
+  --palette-surface-main: #fffbeb;
+  --palette-surface-variant: #fef3c7;
+  --palette-surface-elevated: #ffffff;
+  --palette-on-surface: #451a03;
+
+  /* Background palette - Warm ivory */
+  --palette-background-main: #fefce8;
+  --palette-background-dark: #fef3c7;
+  --palette-background-overlay: rgba(254, 252, 232, 0.95);
+  --palette-on-background: #78350f;
+
+  /* Header background with transparency */
+  --palette-header-bg-start: rgba(254, 252, 232, 0.98);
+  --palette-header-bg-end: rgba(254, 252, 232, 0.95);
+  --palette-header-collapsed-bg-start: rgba(254, 252, 232, 0.99);
+  --palette-header-collapsed-bg-end: rgba(254, 252, 232, 0.96);
+  
+  /* Text palette - Rich brown */
+  --palette-text-primary: #451a03;
+  --palette-text-secondary: #78350f;
+  --palette-text-disabled: rgba(69, 26, 3, 0.38);
+  --palette-text-inverted: #ffffff;
+  
+  /* Border palette - Tan */
+  --palette-border-main: #d4d4aa;
+  --palette-border-light: rgba(69, 26, 3, 0.12);
+  --palette-border-lighter: rgba(69, 26, 3, 0.05);
+  --palette-border-medium: #a8a29e;
+  
+  /* Success palette - Forest green */
+  --palette-success-main: #16a34a;
+  --palette-success-light: #dcfce7;
+  --palette-success-dark: #14532d;
+  --palette-success-border: #bbf7d0;
+  
+  /* Error palette - Crimson */
+  --palette-error-main: #dc2626;
+  --palette-error-light: #fee2e2;
+  --palette-error-dark: #7f1d1d;
+  --palette-error-border: #fecaca;
+  
+  /* Warning palette - Amber */
+  --palette-warning-main: #f59e0b;
+  --palette-warning-light: #fef3c7;
+  --palette-warning-dark: #78350f;
+  --palette-warning-border: #fde68a;
+  
+  /* Info palette - Teal */
+  --palette-info-main: #0891b2;
+  --palette-info-light: #e6fffa;
+  --palette-info-dark: #164e63;
+  --palette-on-info: #ffffff;
+  --palette-info-border: #67e8f9;
+  
+  /* Accent palette - Deep crimson */
+  --palette-accent-main: #dc2626;
+  --palette-accent-light: #f87171;
+  --palette-accent-dark: #991b1b;
+  --palette-on-accent: #ffffff;
+
+  /* Control palette - Walnut */
+  --palette-control-main: #451a03;
+  --palette-control-light: #78350f;
+  --palette-control-text: #fef3c7;
+  --palette-control-border: #92400e;
+}
+
+/* ===== AUTUMN PALETTE - DARK THEME ===== */
+html[data-palette="autumn"][data-theme="dark"] {
+  /* Primary palette - Glowing ember */
+  --palette-primary-main: #fb923c;
+  --palette-primary-light: #fdba74;
+  --palette-primary-dark: #ea580c;
+  --palette-on-primary: #1c1917;
+
+  /* Secondary palette - Golden glow */
+  --palette-secondary-main: #fbbf24;
+  --palette-secondary-light: #fcd34d;
+  --palette-secondary-dark: #f59e0b;
+  --palette-on-secondary: #1c1917;
+
+  /* Surface palette - Dark wood */
+  --palette-surface-main: #1c1917;
+  --palette-surface-variant: #292524;
+  --palette-surface-elevated: #44403c;
+  --palette-on-surface: #fef3c7;
+
+  /* Background palette - Deep earth */
+  --palette-background-main: #0c0a09;
+  --palette-background-dark: #1c1917;
+  --palette-background-overlay: rgba(28, 25, 23, 0.95);
+  --palette-on-background: #d6d3d1;
+
+  /* Header background with transparency */
+  --palette-header-bg-start: rgba(12, 10, 9, 0.98);
+  --palette-header-bg-end: rgba(12, 10, 9, 0.95);
+  --palette-header-collapsed-bg-start: rgba(12, 10, 9, 0.99);
+  --palette-header-collapsed-bg-end: rgba(12, 10, 9, 0.96);
+  
+  /* Text palette - Warm light */
+  --palette-text-primary: #fef3c7;
+  --palette-text-secondary: #d6d3d1;
+  --palette-text-disabled: rgba(254, 243, 199, 0.38);
+  --palette-text-inverted: #0c0a09;
+  
+  /* Border palette - Copper */
+  --palette-border-main: #78716c;
+  --palette-border-light: rgba(254, 243, 199, 0.12);
+  --palette-border-lighter: rgba(254, 243, 199, 0.05);
+  --palette-border-medium: #57534e;
+  
+  /* Success palette - Pine */
+  --palette-success-main: #4ade80;
+  --palette-success-light: #14532d;
+  --palette-success-dark: #22c55e;
+  --palette-success-border: #166534;
+  
+  /* Error palette - Fire */
+  --palette-error-main: #f87171;
+  --palette-error-light: #7f1d1d;
+  --palette-error-dark: #ef4444;
+  --palette-error-border: #991b1b;
+  
+  /* Warning palette - Harvest gold */
+  --palette-warning-main: #eab308;
+  --palette-warning-light: #78350f;
+  --palette-warning-dark: #ca8a04;
+  --palette-warning-border: #a16207;
+  
+  /* Info palette - River teal */
+  --palette-info-main: #22d3ee;
+  --palette-info-light: #164e63;
+  --palette-info-dark: #06b6d4;
+  --palette-on-info: #0c0a09;
+  --palette-info-border: #0891b2;
+  
+  /* Accent palette - Harvest crimson */
+  --palette-accent-main: #b91c1c;
+  --palette-accent-light: #dc2626;
+  --palette-accent-dark: #7f1d1d;
+  --palette-on-accent: #fef3c7;
+
+  /* Control palette - Charcoal */
+  --palette-control-main: #292524;
+  --palette-control-light: #44403c;
+  --palette-control-text: #f5f5f4;
+  --palette-control-border: #57534e;
+}

package/dist/palettes/palette-autumn.1.5.2.min.css

@@ -0,0 +1 @@
+html[data-palette="autumn"]:not([data-theme="dark"]),html[data-palette="autumn"][data-theme="light"]{--palette-primary-main:#ea580c;--palette-primary-light:#fb923c;--palette-primary-dark:#c2410c;--palette-on-primary:#ffffff;--palette-secondary-main:#b45309;--palette-secondary-light:#d97706;--palette-secondary-dark:#92400e;--palette-on-secondary:#ffffff;--palette-surface-main:#fffbeb;--palette-surface-variant:#fef3c7;--palette-surface-elevated:#ffffff;--palette-on-surface:#451a03;--palette-background-main:#fefce8;--palette-background-dark:#fef3c7;--palette-background-overlay:rgba(254,252,232,0.95);--palette-on-background:#78350f;--palette-header-bg-start:rgba(254,252,232,0.98);--palette-header-bg-end:rgba(254,252,232,0.95);--palette-header-collapsed-bg-start:rgba(254,252,232,0.99);--palette-header-collapsed-bg-end:rgba(254,252,232,0.96);--palette-text-primary:#451a03;--palette-text-secondary:#78350f;--palette-text-disabled:rgba(69,26,3,0.38);--palette-text-inverted:#ffffff;--palette-border-main:#d4d4aa;--palette-border-light:rgba(69,26,3,0.12);--palette-border-lighter:rgba(69,26,3,0.05);--palette-border-medium:#a8a29e;--palette-success-main:#16a34a;--palette-success-light:#dcfce7;--palette-success-dark:#14532d;--palette-success-border:#bbf7d0;--palette-error-main:#dc2626;--palette-error-light:#fee2e2;--palette-error-dark:#7f1d1d;--palette-error-border:#fecaca;--palette-warning-main:#f59e0b;--palette-warning-light:#fef3c7;--palette-warning-dark:#78350f;--palette-warning-border:#fde68a;--palette-info-main:#0891b2;--palette-info-light:#e6fffa;--palette-info-dark:#164e63;--palette-on-info:#ffffff;--palette-info-border:#67e8f9;--palette-accent-main:#dc2626;--palette-accent-light:#f87171;--palette-accent-dark:#991b1b;--palette-on-accent:#ffffff;--palette-control-main:#451a03;--palette-control-light:#78350f;--palette-control-text:#fef3c7;--palette-control-border:#92400e}html[data-palette="autumn"][data-theme="dark"]{--palette-primary-main:#fb923c;--palette-primary-light:#fdba74;--palette-primary-dark:#ea580c;--palette-on-primary:#1c1917;--palette-secondary-main:#fbbf24;--palette-secondary-light:#fcd34d;--palette-secondary-dark:#f59e0b;--palette-on-secondary:#1c1917;--palette-surface-main:#1c1917;--palette-surface-variant:#292524;--palette-surface-elevated:#44403c;--palette-on-surface:#fef3c7;--palette-background-main:#0c0a09;--palette-background-dark:#1c1917;--palette-background-overlay:rgba(28,25,23,0.95);--palette-on-background:#d6d3d1;--palette-header-bg-start:rgba(12,10,9,0.98);--palette-header-bg-end:rgba(12,10,9,0.95);--palette-header-collapsed-bg-start:rgba(12,10,9,0.99);--palette-header-collapsed-bg-end:rgba(12,10,9,0.96);--palette-text-primary:#fef3c7;--palette-text-secondary:#d6d3d1;--palette-text-disabled:rgba(254,243,199,0.38);--palette-text-inverted:#0c0a09;--palette-border-main:#78716c;--palette-border-light:rgba(254,243,199,0.12);--palette-border-lighter:rgba(254,243,199,0.05);--palette-border-medium:#57534e;--palette-success-main:#4ade80;--palette-success-light:#14532d;--palette-success-dark:#22c55e;--palette-success-border:#166534;--palette-error-main:#f87171;--palette-error-light:#7f1d1d;--palette-error-dark:#ef4444;--palette-error-border:#991b1b;--palette-warning-main:#eab308;--palette-warning-light:#78350f;--palette-warning-dark:#ca8a04;--palette-warning-border:#a16207;--palette-info-main:#22d3ee;--palette-info-light:#164e63;--palette-info-dark:#06b6d4;--palette-on-info:#0c0a09;--palette-info-border:#0891b2;--palette-accent-main:#b91c1c;--palette-accent-light:#dc2626;--palette-accent-dark:#7f1d1d;--palette-on-accent:#fef3c7;--palette-control-main:#292524;--palette-control-light:#44403c;--palette-control-text:#f5f5f4;--palette-control-border:#57534e}

package/dist/palettes/palette-autumn.1.5.3.css

@@ -0,0 +1,172 @@
+/**
+ * Autumn Color Palette
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ * 
+ * Warm oranges, golden yellows, and earthy browns - inspired by fall foliage
+ */
+
+/* ===== AUTUMN PALETTE - LIGHT THEME ===== */
+html[data-palette="autumn"]:not([data-theme="dark"]), 
+html[data-palette="autumn"][data-theme="light"] {
+  /* Primary palette - Burnt orange */
+  --palette-primary-main: #ea580c;
+  --palette-primary-light: #fb923c;
+  --palette-primary-dark: #c2410c;
+  --palette-on-primary: #ffffff;
+
+  /* Secondary palette - Rich amber */
+  --palette-secondary-main: #b45309;
+  --palette-secondary-light: #d97706;
+  --palette-secondary-dark: #92400e;
+  --palette-on-secondary: #ffffff;
+
+  /* Surface palette - Cream */
+  --palette-surface-main: #fffbeb;
+  --palette-surface-variant: #fef3c7;
+  --palette-surface-elevated: #ffffff;
+  --palette-on-surface: #451a03;
+
+  /* Background palette - Warm ivory */
+  --palette-background-main: #fefce8;
+  --palette-background-dark: #fef3c7;
+  --palette-background-overlay: rgba(254, 252, 232, 0.95);
+  --palette-on-background: #78350f;
+
+  /* Header background with transparency */
+  --palette-header-bg-start: rgba(254, 252, 232, 0.98);
+  --palette-header-bg-end: rgba(254, 252, 232, 0.95);
+  --palette-header-collapsed-bg-start: rgba(254, 252, 232, 0.99);
+  --palette-header-collapsed-bg-end: rgba(254, 252, 232, 0.96);
+  
+  /* Text palette - Rich brown */
+  --palette-text-primary: #451a03;
+  --palette-text-secondary: #78350f;
+  --palette-text-disabled: rgba(69, 26, 3, 0.38);
+  --palette-text-inverted: #ffffff;
+  
+  /* Border palette - Tan */
+  --palette-border-main: #d4d4aa;
+  --palette-border-light: rgba(69, 26, 3, 0.12);
+  --palette-border-lighter: rgba(69, 26, 3, 0.05);
+  --palette-border-medium: #a8a29e;
+  
+  /* Success palette - Forest green */
+  --palette-success-main: #16a34a;
+  --palette-success-light: #dcfce7;
+  --palette-success-dark: #14532d;
+  --palette-success-border: #bbf7d0;
+  
+  /* Error palette - Crimson */
+  --palette-error-main: #dc2626;
+  --palette-error-light: #fee2e2;
+  --palette-error-dark: #7f1d1d;
+  --palette-error-border: #fecaca;
+  
+  /* Warning palette - Amber */
+  --palette-warning-main: #f59e0b;
+  --palette-warning-light: #fef3c7;
+  --palette-warning-dark: #78350f;
+  --palette-warning-border: #fde68a;
+  
+  /* Info palette - Teal */
+  --palette-info-main: #0891b2;
+  --palette-info-light: #e6fffa;
+  --palette-info-dark: #164e63;
+  --palette-on-info: #ffffff;
+  --palette-info-border: #67e8f9;
+  
+  /* Accent palette - Deep crimson */
+  --palette-accent-main: #dc2626;
+  --palette-accent-light: #f87171;
+  --palette-accent-dark: #991b1b;
+  --palette-on-accent: #ffffff;
+
+  /* Control palette - Walnut */
+  --palette-control-main: #451a03;
+  --palette-control-light: #78350f;
+  --palette-control-text: #fef3c7;
+  --palette-control-border: #92400e;
+}
+
+/* ===== AUTUMN PALETTE - DARK THEME ===== */
+html[data-palette="autumn"][data-theme="dark"] {
+  /* Primary palette - Glowing ember */
+  --palette-primary-main: #fb923c;
+  --palette-primary-light: #fdba74;
+  --palette-primary-dark: #ea580c;
+  --palette-on-primary: #1c1917;
+
+  /* Secondary palette - Golden glow */
+  --palette-secondary-main: #fbbf24;
+  --palette-secondary-light: #fcd34d;
+  --palette-secondary-dark: #f59e0b;
+  --palette-on-secondary: #1c1917;
+
+  /* Surface palette - Dark wood */
+  --palette-surface-main: #1c1917;
+  --palette-surface-variant: #292524;
+  --palette-surface-elevated: #44403c;
+  --palette-on-surface: #fef3c7;
+
+  /* Background palette - Deep earth */
+  --palette-background-main: #0c0a09;
+  --palette-background-dark: #1c1917;
+  --palette-background-overlay: rgba(28, 25, 23, 0.95);
+  --palette-on-background: #d6d3d1;
+
+  /* Header background with transparency */
+  --palette-header-bg-start: rgba(12, 10, 9, 0.98);
+  --palette-header-bg-end: rgba(12, 10, 9, 0.95);
+  --palette-header-collapsed-bg-start: rgba(12, 10, 9, 0.99);
+  --palette-header-collapsed-bg-end: rgba(12, 10, 9, 0.96);
+  
+  /* Text palette - Warm light */
+  --palette-text-primary: #fef3c7;
+  --palette-text-secondary: #d6d3d1;
+  --palette-text-disabled: rgba(254, 243, 199, 0.38);
+  --palette-text-inverted: #0c0a09;
+  
+  /* Border palette - Copper */
+  --palette-border-main: #78716c;
+  --palette-border-light: rgba(254, 243, 199, 0.12);
+  --palette-border-lighter: rgba(254, 243, 199, 0.05);
+  --palette-border-medium: #57534e;
+  
+  /* Success palette - Pine */
+  --palette-success-main: #4ade80;
+  --palette-success-light: #14532d;
+  --palette-success-dark: #22c55e;
+  --palette-success-border: #166534;
+  
+  /* Error palette - Fire */
+  --palette-error-main: #f87171;
+  --palette-error-light: #7f1d1d;
+  --palette-error-dark: #ef4444;
+  --palette-error-border: #991b1b;
+  
+  /* Warning palette - Harvest gold */
+  --palette-warning-main: #eab308;
+  --palette-warning-light: #78350f;
+  --palette-warning-dark: #ca8a04;
+  --palette-warning-border: #a16207;
+  
+  /* Info palette - River teal */
+  --palette-info-main: #22d3ee;
+  --palette-info-light: #164e63;
+  --palette-info-dark: #06b6d4;
+  --palette-on-info: #0c0a09;
+  --palette-info-border: #0891b2;
+  
+  /* Accent palette - Harvest crimson */
+  --palette-accent-main: #b91c1c;
+  --palette-accent-light: #dc2626;
+  --palette-accent-dark: #7f1d1d;
+  --palette-on-accent: #fef3c7;
+
+  /* Control palette - Charcoal */
+  --palette-control-main: #292524;
+  --palette-control-light: #44403c;
+  --palette-control-text: #f5f5f4;
+  --palette-control-border: #57534e;
+}

package/dist/palettes/palette-autumn.1.5.3.min.css

@@ -0,0 +1 @@
+html[data-palette="autumn"]:not([data-theme="dark"]),html[data-palette="autumn"][data-theme="light"]{--palette-primary-main:#ea580c;--palette-primary-light:#fb923c;--palette-primary-dark:#c2410c;--palette-on-primary:#ffffff;--palette-secondary-main:#b45309;--palette-secondary-light:#d97706;--palette-secondary-dark:#92400e;--palette-on-secondary:#ffffff;--palette-surface-main:#fffbeb;--palette-surface-variant:#fef3c7;--palette-surface-elevated:#ffffff;--palette-on-surface:#451a03;--palette-background-main:#fefce8;--palette-background-dark:#fef3c7;--palette-background-overlay:rgba(254,252,232,0.95);--palette-on-background:#78350f;--palette-header-bg-start:rgba(254,252,232,0.98);--palette-header-bg-end:rgba(254,252,232,0.95);--palette-header-collapsed-bg-start:rgba(254,252,232,0.99);--palette-header-collapsed-bg-end:rgba(254,252,232,0.96);--palette-text-primary:#451a03;--palette-text-secondary:#78350f;--palette-text-disabled:rgba(69,26,3,0.38);--palette-text-inverted:#ffffff;--palette-border-main:#d4d4aa;--palette-border-light:rgba(69,26,3,0.12);--palette-border-lighter:rgba(69,26,3,0.05);--palette-border-medium:#a8a29e;--palette-success-main:#16a34a;--palette-success-light:#dcfce7;--palette-success-dark:#14532d;--palette-success-border:#bbf7d0;--palette-error-main:#dc2626;--palette-error-light:#fee2e2;--palette-error-dark:#7f1d1d;--palette-error-border:#fecaca;--palette-warning-main:#f59e0b;--palette-warning-light:#fef3c7;--palette-warning-dark:#78350f;--palette-warning-border:#fde68a;--palette-info-main:#0891b2;--palette-info-light:#e6fffa;--palette-info-dark:#164e63;--palette-on-info:#ffffff;--palette-info-border:#67e8f9;--palette-accent-main:#dc2626;--palette-accent-light:#f87171;--palette-accent-dark:#991b1b;--palette-on-accent:#ffffff;--palette-control-main:#451a03;--palette-control-light:#78350f;--palette-control-text:#fef3c7;--palette-control-border:#92400e}html[data-palette="autumn"][data-theme="dark"]{--palette-primary-main:#fb923c;--palette-primary-light:#fdba74;--palette-primary-dark:#ea580c;--palette-on-primary:#1c1917;--palette-secondary-main:#fbbf24;--palette-secondary-light:#fcd34d;--palette-secondary-dark:#f59e0b;--palette-on-secondary:#1c1917;--palette-surface-main:#1c1917;--palette-surface-variant:#292524;--palette-surface-elevated:#44403c;--palette-on-surface:#fef3c7;--palette-background-main:#0c0a09;--palette-background-dark:#1c1917;--palette-background-overlay:rgba(28,25,23,0.95);--palette-on-background:#d6d3d1;--palette-header-bg-start:rgba(12,10,9,0.98);--palette-header-bg-end:rgba(12,10,9,0.95);--palette-header-collapsed-bg-start:rgba(12,10,9,0.99);--palette-header-collapsed-bg-end:rgba(12,10,9,0.96);--palette-text-primary:#fef3c7;--palette-text-secondary:#d6d3d1;--palette-text-disabled:rgba(254,243,199,0.38);--palette-text-inverted:#0c0a09;--palette-border-main:#78716c;--palette-border-light:rgba(254,243,199,0.12);--palette-border-lighter:rgba(254,243,199,0.05);--palette-border-medium:#57534e;--palette-success-main:#4ade80;--palette-success-light:#14532d;--palette-success-dark:#22c55e;--palette-success-border:#166534;--palette-error-main:#f87171;--palette-error-light:#7f1d1d;--palette-error-dark:#ef4444;--palette-error-border:#991b1b;--palette-warning-main:#eab308;--palette-warning-light:#78350f;--palette-warning-dark:#ca8a04;--palette-warning-border:#a16207;--palette-info-main:#22d3ee;--palette-info-light:#164e63;--palette-info-dark:#06b6d4;--palette-on-info:#0c0a09;--palette-info-border:#0891b2;--palette-accent-main:#b91c1c;--palette-accent-light:#dc2626;--palette-accent-dark:#7f1d1d;--palette-on-accent:#fef3c7;--palette-control-main:#292524;--palette-control-light:#44403c;--palette-control-text:#f5f5f4;--palette-control-border:#57534e}

package/dist/palettes/palette-cosmic.1.5.2.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;
+}