@qwickapps/react-framework 1.5.2 → 1.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/README.md +4 -0
  2. package/dist/components/layout/GridLayout.d.ts.map +1 -1
  3. package/dist/index.esm.js +2 -1
  4. package/dist/index.js +2 -1
  5. package/dist/palettes/manifest.json +19 -19
  6. package/dist/palettes/palette-autumn.1.5.3.css +172 -0
  7. package/dist/palettes/palette-autumn.1.5.3.min.css +1 -0
  8. package/dist/palettes/palette-cosmic.1.5.3.css +172 -0
  9. package/dist/palettes/palette-cosmic.1.5.3.min.css +1 -0
  10. package/dist/palettes/palette-default.1.5.3.css +178 -0
  11. package/dist/palettes/palette-default.1.5.3.min.css +1 -0
  12. package/dist/palettes/palette-ocean.1.5.3.css +172 -0
  13. package/dist/palettes/palette-ocean.1.5.3.min.css +1 -0
  14. package/dist/palettes/palette-spring.1.5.3.css +160 -0
  15. package/dist/palettes/palette-spring.1.5.3.min.css +1 -0
  16. package/dist/palettes/palette-winter.1.5.3.css +172 -0
  17. package/dist/palettes/palette-winter.1.5.3.min.css +1 -0
  18. package/package.json +1 -1
  19. package/src/components/layout/GridLayout.tsx +2 -1
package/README.md CHANGED
@@ -4,6 +4,10 @@ A complete React framework for building modern, responsive applications with int
4
4
 
5
5
  ## What's New
6
6
 
7
+ ### December 5, 2025 - GridLayout equalHeight Fix (v1.5.3)
8
+
9
+ - **GridLayout equalHeight Fix**: Fixed `equalHeight` prop not working in MUI v6 - updated CSS selector to target Grid children correctly
10
+
7
11
  ### December 5, 2025 - Bug Fixes & Control Panel Icons (v1.5.2)
8
12
 
9
13
  - **Control Panel Icons**: 10 new icons for admin UIs (`key`, `refresh`, `storage`, `manage_accounts`, `person_search`, `block`, `check_circle`, etc.)
package/dist/components/layout/GridLayout.d.ts.map CHANGED
@@ -1 +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"}
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;AAwID;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,qBAAqB,CAAC,eAAe,CAK5D,CAAC;AAEH;;GAEG;AACH,eAAe,UAAU,CAAC"}
package/dist/index.esm.js CHANGED
@@ -18126,7 +18126,8 @@ function GridLayoutView({
18126
18126
  // Override only if explicitly set
18127
18127
  ...(equalHeight && {
18128
18128
  alignItems: 'stretch',
18129
- '& > .MuiGrid-item': {
18129
+ // Target direct Grid children - MUI v6 uses .MuiGrid-root for grid items with size prop
18130
+ '& > .MuiGrid-root': {
18130
18131
  display: 'flex',
18131
18132
  '& > *': {
18132
18133
  width: '100%',
package/dist/index.js CHANGED
@@ -18128,7 +18128,8 @@ function GridLayoutView({
18128
18128
  // Override only if explicitly set
18129
18129
  ...(equalHeight && {
18130
18130
  alignItems: 'stretch',
18131
- '& > .MuiGrid-item': {
18131
+ // Target direct Grid children - MUI v6 uses .MuiGrid-root for grid items with size prop
18132
+ '& > .MuiGrid-root': {
18132
18133
  display: 'flex',
18133
18134
  '& > *': {
18134
18135
  width: '100%',
package/dist/palettes/manifest.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "$schema": "./manifest.schema.json",
3
- "version": "1.5.2",
3
+ "version": "1.5.3",
4
4
  "palettes": [
5
5
  {
6
6
  "id": "default",
@@ -8,11 +8,11 @@
8
8
  "description": "Classic blue and neutral color scheme - the original QwickApps palette",
9
9
  "author": "QwickApps",
10
10
  "license": "PolyForm-Shield-1.0.0",
11
- "version": "1.5.2",
12
- "file": "palette-default.1.5.2.css",
11
+ "version": "1.5.3",
12
+ "file": "palette-default.1.5.3.css",
13
13
  "primaryColor": "#007bff",
14
14
  "inlined": true,
15
- "fileMinified": "palette-default.1.5.2.min.css",
15
+ "fileMinified": "palette-default.1.5.3.min.css",
16
16
  "fileLatest": "palette-default.latest.css",
17
17
  "fileLatestMinified": "palette-default.latest.min.css"
18
18
  },
@@ -22,11 +22,11 @@
22
22
  "description": "Warm oranges, golden yellows, and earthy browns - inspired by fall foliage",
23
23
  "author": "QwickApps",
24
24
  "license": "PolyForm-Shield-1.0.0",
25
- "version": "1.5.2",
26
- "file": "palette-autumn.1.5.2.css",
25
+ "version": "1.5.3",
26
+ "file": "palette-autumn.1.5.3.css",
27
27
  "primaryColor": "#ea580c",
28
28
  "inlined": false,
29
- "fileMinified": "palette-autumn.1.5.2.min.css",
29
+ "fileMinified": "palette-autumn.1.5.3.min.css",
30
30
  "fileLatest": "palette-autumn.latest.css",
31
31
  "fileLatestMinified": "palette-autumn.latest.min.css"
32
32
  },
@@ -36,11 +36,11 @@
36
36
  "description": "Modern purple gradient for creative and tech brands - inspired by cosmic nebulae",
37
37
  "author": "QwickApps",
38
38
  "license": "PolyForm-Shield-1.0.0",
39
- "version": "1.5.2",
40
- "file": "palette-cosmic.1.5.2.css",
39
+ "version": "1.5.3",
40
+ "file": "palette-cosmic.1.5.3.css",
41
41
  "primaryColor": "#8b5cf6",
42
42
  "inlined": false,
43
- "fileMinified": "palette-cosmic.1.5.2.min.css",
43
+ "fileMinified": "palette-cosmic.1.5.3.min.css",
44
44
  "fileLatest": "palette-cosmic.latest.css",
45
45
  "fileLatestMinified": "palette-cosmic.latest.min.css"
46
46
  },
@@ -50,11 +50,11 @@
50
50
  "description": "Deep blues, aqua teals, and seafoam greens - inspired by ocean depths",
51
51
  "author": "QwickApps",
52
52
  "license": "PolyForm-Shield-1.0.0",
53
- "version": "1.5.2",
54
- "file": "palette-ocean.1.5.2.css",
53
+ "version": "1.5.3",
54
+ "file": "palette-ocean.1.5.3.css",
55
55
  "primaryColor": "#0891b2",
56
56
  "inlined": false,
57
- "fileMinified": "palette-ocean.1.5.2.min.css",
57
+ "fileMinified": "palette-ocean.1.5.3.min.css",
58
58
  "fileLatest": "palette-ocean.latest.css",
59
59
  "fileLatestMinified": "palette-ocean.latest.min.css"
60
60
  },
@@ -64,11 +64,11 @@
64
64
  "description": "Fresh greens, soft pinks, and bright yellows - inspired by spring blooms",
65
65
  "author": "QwickApps",
66
66
  "license": "PolyForm-Shield-1.0.0",
67
- "version": "1.5.2",
68
- "file": "palette-spring.1.5.2.css",
67
+ "version": "1.5.3",
68
+ "file": "palette-spring.1.5.3.css",
69
69
  "primaryColor": "#16a34a",
70
70
  "inlined": false,
71
- "fileMinified": "palette-spring.1.5.2.min.css",
71
+ "fileMinified": "palette-spring.1.5.3.min.css",
72
72
  "fileLatest": "palette-spring.latest.css",
73
73
  "fileLatestMinified": "palette-spring.latest.min.css"
74
74
  },
@@ -78,11 +78,11 @@
78
78
  "description": "Cool blues, icy whites, and frosty grays - inspired by winter landscapes",
79
79
  "author": "QwickApps",
80
80
  "license": "PolyForm-Shield-1.0.0",
81
- "version": "1.5.2",
82
- "file": "palette-winter.1.5.2.css",
81
+ "version": "1.5.3",
82
+ "file": "palette-winter.1.5.3.css",
83
83
  "primaryColor": "#0077be",
84
84
  "inlined": false,
85
- "fileMinified": "palette-winter.1.5.2.min.css",
85
+ "fileMinified": "palette-winter.1.5.3.min.css",
86
86
  "fileLatest": "palette-winter.latest.css",
87
87
  "fileLatestMinified": "palette-winter.latest.min.css"
88
88
  }
package/dist/palettes/palette-autumn.1.5.3.css ADDED
@@ -0,0 +1,172 @@
1
+ /**
2
+ * Autumn Color Palette
3
+ *
4
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
5
+ *
6
+ * Warm oranges, golden yellows, and earthy browns - inspired by fall foliage
7
+ */
8
+
9
+ /* ===== AUTUMN PALETTE - LIGHT THEME ===== */
10
+ html[data-palette="autumn"]:not([data-theme="dark"]),
11
+ html[data-palette="autumn"][data-theme="light"] {
12
+ /* Primary palette - Burnt orange */
13
+ --palette-primary-main: #ea580c;
14
+ --palette-primary-light: #fb923c;
15
+ --palette-primary-dark: #c2410c;
16
+ --palette-on-primary: #ffffff;
17
+
18
+ /* Secondary palette - Rich amber */
19
+ --palette-secondary-main: #b45309;
20
+ --palette-secondary-light: #d97706;
21
+ --palette-secondary-dark: #92400e;
22
+ --palette-on-secondary: #ffffff;
23
+
24
+ /* Surface palette - Cream */
25
+ --palette-surface-main: #fffbeb;
26
+ --palette-surface-variant: #fef3c7;
27
+ --palette-surface-elevated: #ffffff;
28
+ --palette-on-surface: #451a03;
29
+
30
+ /* Background palette - Warm ivory */
31
+ --palette-background-main: #fefce8;
32
+ --palette-background-dark: #fef3c7;
33
+ --palette-background-overlay: rgba(254, 252, 232, 0.95);
34
+ --palette-on-background: #78350f;
35
+
36
+ /* Header background with transparency */
37
+ --palette-header-bg-start: rgba(254, 252, 232, 0.98);
38
+ --palette-header-bg-end: rgba(254, 252, 232, 0.95);
39
+ --palette-header-collapsed-bg-start: rgba(254, 252, 232, 0.99);
40
+ --palette-header-collapsed-bg-end: rgba(254, 252, 232, 0.96);
41
+
42
+ /* Text palette - Rich brown */
43
+ --palette-text-primary: #451a03;
44
+ --palette-text-secondary: #78350f;
45
+ --palette-text-disabled: rgba(69, 26, 3, 0.38);
46
+ --palette-text-inverted: #ffffff;
47
+
48
+ /* Border palette - Tan */
49
+ --palette-border-main: #d4d4aa;
50
+ --palette-border-light: rgba(69, 26, 3, 0.12);
51
+ --palette-border-lighter: rgba(69, 26, 3, 0.05);
52
+ --palette-border-medium: #a8a29e;
53
+
54
+ /* Success palette - Forest green */
55
+ --palette-success-main: #16a34a;
56
+ --palette-success-light: #dcfce7;
57
+ --palette-success-dark: #14532d;
58
+ --palette-success-border: #bbf7d0;
59
+
60
+ /* Error palette - Crimson */
61
+ --palette-error-main: #dc2626;
62
+ --palette-error-light: #fee2e2;
63
+ --palette-error-dark: #7f1d1d;
64
+ --palette-error-border: #fecaca;
65
+
66
+ /* Warning palette - Amber */
67
+ --palette-warning-main: #f59e0b;
68
+ --palette-warning-light: #fef3c7;
69
+ --palette-warning-dark: #78350f;
70
+ --palette-warning-border: #fde68a;
71
+
72
+ /* Info palette - Teal */
73
+ --palette-info-main: #0891b2;
74
+ --palette-info-light: #e6fffa;
75
+ --palette-info-dark: #164e63;
76
+ --palette-on-info: #ffffff;
77
+ --palette-info-border: #67e8f9;
78
+
79
+ /* Accent palette - Deep crimson */
80
+ --palette-accent-main: #dc2626;
81
+ --palette-accent-light: #f87171;
82
+ --palette-accent-dark: #991b1b;
83
+ --palette-on-accent: #ffffff;
84
+
85
+ /* Control palette - Walnut */
86
+ --palette-control-main: #451a03;
87
+ --palette-control-light: #78350f;
88
+ --palette-control-text: #fef3c7;
89
+ --palette-control-border: #92400e;
90
+ }
91
+
92
+ /* ===== AUTUMN PALETTE - DARK THEME ===== */
93
+ html[data-palette="autumn"][data-theme="dark"] {
94
+ /* Primary palette - Glowing ember */
95
+ --palette-primary-main: #fb923c;
96
+ --palette-primary-light: #fdba74;
97
+ --palette-primary-dark: #ea580c;
98
+ --palette-on-primary: #1c1917;
99
+
100
+ /* Secondary palette - Golden glow */
101
+ --palette-secondary-main: #fbbf24;
102
+ --palette-secondary-light: #fcd34d;
103
+ --palette-secondary-dark: #f59e0b;
104
+ --palette-on-secondary: #1c1917;
105
+
106
+ /* Surface palette - Dark wood */
107
+ --palette-surface-main: #1c1917;
108
+ --palette-surface-variant: #292524;
109
+ --palette-surface-elevated: #44403c;
110
+ --palette-on-surface: #fef3c7;
111
+
112
+ /* Background palette - Deep earth */
113
+ --palette-background-main: #0c0a09;
114
+ --palette-background-dark: #1c1917;
115
+ --palette-background-overlay: rgba(28, 25, 23, 0.95);
116
+ --palette-on-background: #d6d3d1;
117
+
118
+ /* Header background with transparency */
119
+ --palette-header-bg-start: rgba(12, 10, 9, 0.98);
120
+ --palette-header-bg-end: rgba(12, 10, 9, 0.95);
121
+ --palette-header-collapsed-bg-start: rgba(12, 10, 9, 0.99);
122
+ --palette-header-collapsed-bg-end: rgba(12, 10, 9, 0.96);
123
+
124
+ /* Text palette - Warm light */
125
+ --palette-text-primary: #fef3c7;
126
+ --palette-text-secondary: #d6d3d1;
127
+ --palette-text-disabled: rgba(254, 243, 199, 0.38);
128
+ --palette-text-inverted: #0c0a09;
129
+
130
+ /* Border palette - Copper */
131
+ --palette-border-main: #78716c;
132
+ --palette-border-light: rgba(254, 243, 199, 0.12);
133
+ --palette-border-lighter: rgba(254, 243, 199, 0.05);
134
+ --palette-border-medium: #57534e;
135
+
136
+ /* Success palette - Pine */
137
+ --palette-success-main: #4ade80;
138
+ --palette-success-light: #14532d;
139
+ --palette-success-dark: #22c55e;
140
+ --palette-success-border: #166534;
141
+
142
+ /* Error palette - Fire */
143
+ --palette-error-main: #f87171;
144
+ --palette-error-light: #7f1d1d;
145
+ --palette-error-dark: #ef4444;
146
+ --palette-error-border: #991b1b;
147
+
148
+ /* Warning palette - Harvest gold */
149
+ --palette-warning-main: #eab308;
150
+ --palette-warning-light: #78350f;
151
+ --palette-warning-dark: #ca8a04;
152
+ --palette-warning-border: #a16207;
153
+
154
+ /* Info palette - River teal */
155
+ --palette-info-main: #22d3ee;
156
+ --palette-info-light: #164e63;
157
+ --palette-info-dark: #06b6d4;
158
+ --palette-on-info: #0c0a09;
159
+ --palette-info-border: #0891b2;
160
+
161
+ /* Accent palette - Harvest crimson */
162
+ --palette-accent-main: #b91c1c;
163
+ --palette-accent-light: #dc2626;
164
+ --palette-accent-dark: #7f1d1d;
165
+ --palette-on-accent: #fef3c7;
166
+
167
+ /* Control palette - Charcoal */
168
+ --palette-control-main: #292524;
169
+ --palette-control-light: #44403c;
170
+ --palette-control-text: #f5f5f4;
171
+ --palette-control-border: #57534e;
172
+ }
package/dist/palettes/palette-autumn.1.5.3.min.css ADDED
@@ -0,0 +1 @@
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.3.css ADDED
@@ -0,0 +1,172 @@
1
+ /**
2
+ * Cosmic Color Palette
3
+ *
4
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
5
+ *
6
+ * Modern purple gradient for creative and tech brands - inspired by cosmic nebulae
7
+ */
8
+
9
+ /* ===== COSMIC PALETTE - LIGHT THEME ===== */
10
+ html[data-palette="cosmic"]:not([data-theme="dark"]),
11
+ html[data-palette="cosmic"][data-theme="light"] {
12
+ /* Primary palette - Deep cosmic purple */
13
+ --palette-primary-main: #8b5cf6;
14
+ --palette-primary-light: #a78bfa;
15
+ --palette-primary-dark: #7c3aed;
16
+ --palette-on-primary: #ffffff;
17
+
18
+ /* Secondary palette - Violet accents */
19
+ --palette-secondary-main: #8b5cf6;
20
+ --palette-secondary-light: #c4b5fd;
21
+ --palette-secondary-dark: #6d28d9;
22
+ --palette-on-secondary: #ffffff;
23
+
24
+ /* Surface palette - Stardust */
25
+ --palette-surface-main: #faf7ff;
26
+ --palette-surface-variant: #f3e8ff;
27
+ --palette-surface-elevated: #ffffff;
28
+ --palette-on-surface: #4c1d95;
29
+
30
+ /* Background palette - Galaxy mist */
31
+ --palette-background-main: #fef7ff;
32
+ --palette-background-dark: #fae8ff;
33
+ --palette-background-overlay: rgba(254, 247, 255, 0.95);
34
+ --palette-on-background: #6b21a8;
35
+
36
+ /* Header background with transparency */
37
+ --palette-header-bg-start: rgba(254, 247, 255, 0.98);
38
+ --palette-header-bg-end: rgba(254, 247, 255, 0.95);
39
+ --palette-header-collapsed-bg-start: rgba(254, 247, 255, 0.99);
40
+ --palette-header-collapsed-bg-end: rgba(254, 247, 255, 0.96);
41
+
42
+ /* Text palette - Deep space */
43
+ --palette-text-primary: #4c1d95;
44
+ --palette-text-secondary: #7c3aed;
45
+ --palette-text-disabled: rgba(76, 29, 149, 0.38);
46
+ --palette-text-inverted: #ffffff;
47
+
48
+ /* Border palette - Aurora */
49
+ --palette-border-main: #c4b5fd;
50
+ --palette-border-light: rgba(76, 29, 149, 0.12);
51
+ --palette-border-lighter: rgba(76, 29, 149, 0.05);
52
+ --palette-border-medium: #a78bfa;
53
+
54
+ /* Success palette - Emerald nebula */
55
+ --palette-success-main: #10b981;
56
+ --palette-success-light: #d1fae5;
57
+ --palette-success-dark: #047857;
58
+ --palette-success-border: #6ee7b7;
59
+
60
+ /* Error palette - Red giant */
61
+ --palette-error-main: #ef4444;
62
+ --palette-error-light: #fee2e2;
63
+ --palette-error-dark: #b91c1c;
64
+ --palette-error-border: #fecaca;
65
+
66
+ /* Warning palette - Solar flare */
67
+ --palette-warning-main: #f59e0b;
68
+ --palette-warning-light: #fef3c7;
69
+ --palette-warning-dark: #b45309;
70
+ --palette-warning-border: #fde68a;
71
+
72
+ /* Info palette - Cosmic blue */
73
+ --palette-info-main: #3b82f6;
74
+ --palette-info-light: #dbeafe;
75
+ --palette-info-dark: #1d4ed8;
76
+ --palette-on-info: #ffffff;
77
+ --palette-info-border: #93c5fd;
78
+
79
+ /* Accent palette - Pink nebula */
80
+ --palette-accent-main: #ec4899;
81
+ --palette-accent-light: #f472b6;
82
+ --palette-accent-dark: #be185d;
83
+ --palette-on-accent: #ffffff;
84
+
85
+ /* Control palette - Void */
86
+ --palette-control-main: #1e1b4b;
87
+ --palette-control-light: #3730a3;
88
+ --palette-control-text: #e0e7ff;
89
+ --palette-control-border: #8b5cf6;
90
+ }
91
+
92
+ /* ===== COSMIC PALETTE - DARK THEME ===== */
93
+ html[data-palette="cosmic"][data-theme="dark"] {
94
+ /* Primary palette - Neon purple */
95
+ --palette-primary-main: #a78bfa;
96
+ --palette-primary-light: #c4b5fd;
97
+ --palette-primary-dark: #8b5cf6;
98
+ --palette-on-primary: #1e1b4b;
99
+
100
+ /* Secondary palette - Electric violet */
101
+ --palette-secondary-main: #c4b5fd;
102
+ --palette-secondary-light: #ddd6fe;
103
+ --palette-secondary-dark: #a78bfa;
104
+ --palette-on-secondary: #1e1b4b;
105
+
106
+ /* Surface palette - Dark matter */
107
+ --palette-surface-main: #1e1b4b;
108
+ --palette-surface-variant: #312e81;
109
+ --palette-surface-elevated: #3730a3;
110
+ --palette-on-surface: #e0e7ff;
111
+
112
+ /* Background palette - Deep space */
113
+ --palette-background-main: #0f0c29;
114
+ --palette-background-dark: #1a1625;
115
+ --palette-background-overlay: rgba(15, 12, 41, 0.95);
116
+ --palette-on-background: #c4b5fd;
117
+
118
+ /* Header background with transparency */
119
+ --palette-header-bg-start: rgba(15, 12, 41, 0.98);
120
+ --palette-header-bg-end: rgba(15, 12, 41, 0.95);
121
+ --palette-header-collapsed-bg-start: rgba(15, 12, 41, 0.99);
122
+ --palette-header-collapsed-bg-end: rgba(15, 12, 41, 0.96);
123
+
124
+ /* Text palette - Starlight */
125
+ --palette-text-primary: #e0e7ff;
126
+ --palette-text-secondary: #c4b5fd;
127
+ --palette-text-disabled: rgba(224, 231, 255, 0.38);
128
+ --palette-text-inverted: #0f0c29;
129
+
130
+ /* Border palette - Cosmic rays */
131
+ --palette-border-main: #4338ca;
132
+ --palette-border-light: rgba(224, 231, 255, 0.12);
133
+ --palette-border-lighter: rgba(224, 231, 255, 0.05);
134
+ --palette-border-medium: #312e81;
135
+
136
+ /* Success palette - Green pulsar */
137
+ --palette-success-main: #34d399;
138
+ --palette-success-light: #047857;
139
+ --palette-success-dark: #10b981;
140
+ --palette-success-border: #065f46;
141
+
142
+ /* Error palette - Red dwarf */
143
+ --palette-error-main: #f87171;
144
+ --palette-error-light: #b91c1c;
145
+ --palette-error-dark: #ef4444;
146
+ --palette-error-border: #991b1b;
147
+
148
+ /* Warning palette - Orange giant */
149
+ --palette-warning-main: #fb7185;
150
+ --palette-warning-light: #881337;
151
+ --palette-warning-dark: #e11d48;
152
+ --palette-warning-border: #be123c;
153
+
154
+ /* Info palette - Blue supergiant */
155
+ --palette-info-main: #60a5fa;
156
+ --palette-info-light: #1d4ed8;
157
+ --palette-info-dark: #3b82f6;
158
+ --palette-on-info: #0f0c29;
159
+ --palette-info-border: #2563eb;
160
+
161
+ /* Accent palette - Magenta quasar */
162
+ --palette-accent-main: #f472b6;
163
+ --palette-accent-light: #f9a8d4;
164
+ --palette-accent-dark: #ec4899;
165
+ --palette-on-accent: #0f0c29;
166
+
167
+ /* Control palette - Black hole */
168
+ --palette-control-main: #312e81;
169
+ --palette-control-light: #4338ca;
170
+ --palette-control-text: #f3f4f6;
171
+ --palette-control-border: #4338ca;
172
+ }
package/dist/palettes/palette-cosmic.1.5.3.min.css ADDED
@@ -0,0 +1 @@
1
+ html[data-palette="cosmic"]:not([data-theme="dark"]),html[data-palette="cosmic"][data-theme="light"]{--palette-primary-main:#8b5cf6;--palette-primary-light:#a78bfa;--palette-primary-dark:#7c3aed;--palette-on-primary:#ffffff;--palette-secondary-main:#8b5cf6;--palette-secondary-light:#c4b5fd;--palette-secondary-dark:#6d28d9;--palette-on-secondary:#ffffff;--palette-surface-main:#faf7ff;--palette-surface-variant:#f3e8ff;--palette-surface-elevated:#ffffff;--palette-on-surface:#4c1d95;--palette-background-main:#fef7ff;--palette-background-dark:#fae8ff;--palette-background-overlay:rgba(254,247,255,0.95);--palette-on-background:#6b21a8;--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);--palette-text-primary:#4c1d95;--palette-text-secondary:#7c3aed;--palette-text-disabled:rgba(76,29,149,0.38);--palette-text-inverted:#ffffff;--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;--palette-success-main:#10b981;--palette-success-light:#d1fae5;--palette-success-dark:#047857;--palette-success-border:#6ee7b7;--palette-error-main:#ef4444;--palette-error-light:#fee2e2;--palette-error-dark:#b91c1c;--palette-error-border:#fecaca;--palette-warning-main:#f59e0b;--palette-warning-light:#fef3c7;--palette-warning-dark:#b45309;--palette-warning-border:#fde68a;--palette-info-main:#3b82f6;--palette-info-light:#dbeafe;--palette-info-dark:#1d4ed8;--palette-on-info:#ffffff;--palette-info-border:#93c5fd;--palette-accent-main:#ec4899;--palette-accent-light:#f472b6;--palette-accent-dark:#be185d;--palette-on-accent:#ffffff;--palette-control-main:#1e1b4b;--palette-control-light:#3730a3;--palette-control-text:#e0e7ff;--palette-control-border:#8b5cf6}html[data-palette="cosmic"][data-theme="dark"]{--palette-primary-main:#a78bfa;--palette-primary-light:#c4b5fd;--palette-primary-dark:#8b5cf6;--palette-on-primary:#1e1b4b;--palette-secondary-main:#c4b5fd;--palette-secondary-light:#ddd6fe;--palette-secondary-dark:#a78bfa;--palette-on-secondary:#1e1b4b;--palette-surface-main:#1e1b4b;--palette-surface-variant:#312e81;--palette-surface-elevated:#3730a3;--palette-on-surface:#e0e7ff;--palette-background-main:#0f0c29;--palette-background-dark:#1a1625;--palette-background-overlay:rgba(15,12,41,0.95);--palette-on-background:#c4b5fd;--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);--palette-text-primary:#e0e7ff;--palette-text-secondary:#c4b5fd;--palette-text-disabled:rgba(224,231,255,0.38);--palette-text-inverted:#0f0c29;--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;--palette-success-main:#34d399;--palette-success-light:#047857;--palette-success-dark:#10b981;--palette-success-border:#065f46;--palette-error-main:#f87171;--palette-error-light:#b91c1c;--palette-error-dark:#ef4444;--palette-error-border:#991b1b;--palette-warning-main:#fb7185;--palette-warning-light:#881337;--palette-warning-dark:#e11d48;--palette-warning-border:#be123c;--palette-info-main:#60a5fa;--palette-info-light:#1d4ed8;--palette-info-dark:#3b82f6;--palette-on-info:#0f0c29;--palette-info-border:#2563eb;--palette-accent-main:#f472b6;--palette-accent-light:#f9a8d4;--palette-accent-dark:#ec4899;--palette-on-accent:#0f0c29;--palette-control-main:#312e81;--palette-control-light:#4338ca;--palette-control-text:#f3f4f6;--palette-control-border:#4338ca}
package/dist/palettes/palette-default.1.5.3.css ADDED
@@ -0,0 +1,178 @@
1
+ /**
2
+ * Default Color Palette
3
+ *
4
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
5
+ *
6
+ * Classic blue and neutral color scheme - the original QwickApps palette
7
+ */
8
+
9
+ /* ===== DEFAULT PALETTE - LIGHT THEME ===== */
10
+ html[data-palette="default"]:not([data-theme="dark"]),
11
+ html[data-palette="default"][data-theme="light"] {
12
+ /* Primary */
13
+ --palette-primary-main: #007bff;
14
+ --palette-primary-light: #4a90e2;
15
+ --palette-primary-dark: #0056b3;
16
+ --palette-on-primary: #ffffff;
17
+
18
+ /* Secondary */
19
+ --palette-secondary-main: #6c757d;
20
+ --palette-secondary-light: #868e96;
21
+ --palette-secondary-dark: #495057;
22
+ --palette-on-secondary: #ffffff;
23
+
24
+ /* Surface */
25
+ --palette-surface-main: #ffffff;
26
+ --palette-surface-variant: #f5f5f5; /* Improved contrast from #fafafa */
27
+ --palette-surface-elevated: #ffffff;
28
+ --palette-on-surface: #000000;
29
+
30
+ /* Background */
31
+ --palette-background-main: #ffffff;
32
+ --palette-background-dark: #fafafa;
33
+ --palette-background-overlay: rgba(255, 255, 255, 0.95);
34
+ --palette-on-background: #000000;
35
+
36
+ /* Header background with transparency */
37
+ --palette-header-bg-start: rgba(255, 255, 255, 0.98);
38
+ --palette-header-bg-end: rgba(255, 255, 255, 0.95);
39
+ --palette-header-collapsed-bg-start: rgba(255, 255, 255, 0.99);
40
+ --palette-header-collapsed-bg-end: rgba(255, 255, 255, 0.96);
41
+
42
+ /* Text palette */
43
+ --palette-text-primary: #000000;
44
+ --palette-text-secondary: #666666;
45
+ --palette-text-disabled: rgba(0, 0, 0, 0.38);
46
+ --palette-text-inverted: #ffffff;
47
+
48
+ /* Border palette */
49
+ --palette-border-main: #e0e0e0;
50
+ --palette-border-light: rgba(0, 0, 0, 0.12);
51
+ --palette-border-lighter: rgba(0, 0, 0, 0.05);
52
+ --palette-border-medium: #ccc;
53
+
54
+ /* Success palette */
55
+ --palette-success-main: #28a745;
56
+ --palette-success-light: #d4edda;
57
+ --palette-success-dark: #155724;
58
+ --palette-on-success: #ffffff;
59
+ --palette-success-border: #c3e6cb;
60
+
61
+ /* Error palette */
62
+ --palette-error-main: #dc3545;
63
+ --palette-error-light: #f8d7da;
64
+ --palette-error-dark: #721c24;
65
+ --palette-on-error: #ffffff;
66
+ --palette-error-border: #f5c6cb;
67
+
68
+ /* Warning palette */
69
+ --palette-warning-main: #ffc107;
70
+ --palette-warning-light: #fff3cd;
71
+ --palette-warning-dark: #856404;
72
+ --palette-on-warning: #000000;
73
+ --palette-warning-border: #ffeeba;
74
+
75
+ /* Info palette */
76
+ --palette-info-main: #007acc;
77
+ --palette-info-light: #f0f8ff;
78
+ --palette-info-dark: #005588;
79
+ --palette-on-info: #ffffff;
80
+ --palette-info-border: #007acc;
81
+
82
+ /* Accent palette for highlights and branding */
83
+ --palette-accent-main: #ff6b35;
84
+ --palette-accent-light: #ffb3a0;
85
+ --palette-accent-dark: #cc5429;
86
+ --palette-on-accent: #ffffff;
87
+
88
+ /* Control palette */
89
+ --palette-control-main: #1a1a1a;
90
+ --palette-control-light: #2a2a2a;
91
+ --palette-control-text: #ccc;
92
+ --palette-control-border: #333;
93
+ }
94
+
95
+ /* ===== DEFAULT PALETTE - DARK THEME ===== */
96
+ html[data-palette="default"][data-theme="dark"] {
97
+ /* Primary */
98
+ --palette-primary-main: #4a90e2;
99
+ --palette-primary-light: #87ceeb;
100
+ --palette-primary-dark: #1a365d;
101
+ --palette-on-primary: #ffffff;
102
+
103
+ /* Secondary */
104
+ --palette-secondary-main: #868e96;
105
+ --palette-secondary-light: #adb5bd;
106
+ --palette-secondary-dark: #6c757d;
107
+ --palette-on-secondary: #ffffff;
108
+
109
+ /* Surface */
110
+ --palette-surface-main: #1e1e1e;
111
+ --palette-surface-variant: #2a2a2a;
112
+ --palette-surface-elevated: #353535;
113
+ --palette-on-surface: #ffffff;
114
+
115
+ /* Background */
116
+ --palette-background-main: #121212;
117
+ --palette-background-dark: #2a2a2a;
118
+ --palette-background-overlay: rgba(30, 30, 30, 0.95);
119
+ --palette-on-background: #ffffff;
120
+
121
+ /* Header background with transparency */
122
+ --palette-header-bg-start: rgba(18, 18, 18, 0.98);
123
+ --palette-header-bg-end: rgba(18, 18, 18, 0.95);
124
+ --palette-header-collapsed-bg-start: rgba(18, 18, 18, 0.99);
125
+ --palette-header-collapsed-bg-end: rgba(18, 18, 18, 0.96);
126
+
127
+ /* Text palette */
128
+ --palette-text-primary: #ffffff;
129
+ --palette-text-secondary: #b0b0b0;
130
+ --palette-text-disabled: rgba(255, 255, 255, 0.38);
131
+ --palette-text-inverted: #000000;
132
+
133
+ /* Border palette */
134
+ --palette-border-main: #555;
135
+ --palette-border-light: rgba(255, 255, 255, 0.12);
136
+ --palette-border-lighter: rgba(255, 255, 255, 0.05);
137
+ --palette-border-medium: #333;
138
+
139
+ /* Success palette */
140
+ --palette-success-main: #4ade80;
141
+ --palette-success-light: #064e3b;
142
+ --palette-success-dark: #22c55e;
143
+ --palette-on-success: #ffffff;
144
+ --palette-success-border: #065f46;
145
+
146
+ /* Error palette */
147
+ --palette-error-main: #f87171;
148
+ --palette-error-light: #7f1d1d;
149
+ --palette-error-dark: #ef4444;
150
+ --palette-on-error: #ffffff;
151
+ --palette-error-border: #991b1b;
152
+
153
+ /* Warning palette */
154
+ --palette-warning-main: #fbbf24;
155
+ --palette-warning-light: #78350f;
156
+ --palette-warning-dark: #f59e0b;
157
+ --palette-on-warning: #000000;
158
+ --palette-warning-border: #92400e;
159
+
160
+ /* Info palette */
161
+ --palette-info-main: #60a5fa;
162
+ --palette-info-light: #1e3a8a;
163
+ --palette-info-dark: #3b82f6;
164
+ --palette-on-info: #ffffff;
165
+ --palette-info-border: #1d4ed8;
166
+
167
+ /* Accent palette for highlights and branding */
168
+ --palette-accent-main: #ff8a65;
169
+ --palette-accent-light: #ffcc9c;
170
+ --palette-accent-dark: #cc6e52;
171
+ --palette-on-accent: #ffffff;
172
+
173
+ /* Control palette */
174
+ --palette-control-main: #2a2a2a;
175
+ --palette-control-light: #3a3a3a;
176
+ --palette-control-text: #e0e0e0;
177
+ --palette-control-border: #555;
178
+ }
package/dist/palettes/palette-default.1.5.3.min.css ADDED
@@ -0,0 +1 @@
1
+ html[data-palette="default"]:not([data-theme="dark"]),html[data-palette="default"][data-theme="light"]{--palette-primary-main:#007bff;--palette-primary-light:#4a90e2;--palette-primary-dark:#0056b3;--palette-on-primary:#ffffff;--palette-secondary-main:#6c757d;--palette-secondary-light:#868e96;--palette-secondary-dark:#495057;--palette-on-secondary:#ffffff;--palette-surface-main:#ffffff;--palette-surface-variant:#f5f5f5;--palette-surface-elevated:#ffffff;--palette-on-surface:#000000;--palette-background-main:#ffffff;--palette-background-dark:#fafafa;--palette-background-overlay:rgba(255,255,255,0.95);--palette-on-background:#000000;--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);--palette-text-primary:#000000;--palette-text-secondary:#666666;--palette-text-disabled:rgba(0,0,0,0.38);--palette-text-inverted:#ffffff;--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;--palette-success-main:#28a745;--palette-success-light:#d4edda;--palette-success-dark:#155724;--palette-on-success:#ffffff;--palette-success-border:#c3e6cb;--palette-error-main:#dc3545;--palette-error-light:#f8d7da;--palette-error-dark:#721c24;--palette-on-error:#ffffff;--palette-error-border:#f5c6cb;--palette-warning-main:#ffc107;--palette-warning-light:#fff3cd;--palette-warning-dark:#856404;--palette-on-warning:#000000;--palette-warning-border:#ffeeba;--palette-info-main:#007acc;--palette-info-light:#f0f8ff;--palette-info-dark:#005588;--palette-on-info:#ffffff;--palette-info-border:#007acc;--palette-accent-main:#ff6b35;--palette-accent-light:#ffb3a0;--palette-accent-dark:#cc5429;--palette-on-accent:#ffffff;--palette-control-main:#1a1a1a;--palette-control-light:#2a2a2a;--palette-control-text:#ccc;--palette-control-border:#333}html[data-palette="default"][data-theme="dark"]{--palette-primary-main:#4a90e2;--palette-primary-light:#87ceeb;--palette-primary-dark:#1a365d;--palette-on-primary:#ffffff;--palette-secondary-main:#868e96;--palette-secondary-light:#adb5bd;--palette-secondary-dark:#6c757d;--palette-on-secondary:#ffffff;--palette-surface-main:#1e1e1e;--palette-surface-variant:#2a2a2a;--palette-surface-elevated:#353535;--palette-on-surface:#ffffff;--palette-background-main:#121212;--palette-background-dark:#2a2a2a;--palette-background-overlay:rgba(30,30,30,0.95);--palette-on-background:#ffffff;--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);--palette-text-primary:#ffffff;--palette-text-secondary:#b0b0b0;--palette-text-disabled:rgba(255,255,255,0.38);--palette-text-inverted:#000000;--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;--palette-success-main:#4ade80;--palette-success-light:#064e3b;--palette-success-dark:#22c55e;--palette-on-success:#ffffff;--palette-success-border:#065f46;--palette-error-main:#f87171;--palette-error-light:#7f1d1d;--palette-error-dark:#ef4444;--palette-on-error:#ffffff;--palette-error-border:#991b1b;--palette-warning-main:#fbbf24;--palette-warning-light:#78350f;--palette-warning-dark:#f59e0b;--palette-on-warning:#000000;--palette-warning-border:#92400e;--palette-info-main:#60a5fa;--palette-info-light:#1e3a8a;--palette-info-dark:#3b82f6;--palette-on-info:#ffffff;--palette-info-border:#1d4ed8;--palette-accent-main:#ff8a65;--palette-accent-light:#ffcc9c;--palette-accent-dark:#cc6e52;--palette-on-accent:#ffffff;--palette-control-main:#2a2a2a;--palette-control-light:#3a3a3a;--palette-control-text:#e0e0e0;--palette-control-border:#555}
package/dist/palettes/palette-ocean.1.5.3.css ADDED
@@ -0,0 +1,172 @@
1
+ /**
2
+ * Ocean Color Palette
3
+ *
4
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
5
+ *
6
+ * Deep blues, aqua teals, and seafoam greens - inspired by ocean depths
7
+ */
8
+
9
+ /* ===== OCEAN PALETTE - LIGHT THEME ===== */
10
+ html[data-palette="ocean"]:not([data-theme="dark"]),
11
+ html[data-palette="ocean"][data-theme="light"] {
12
+ /* Primary palette - Deep ocean */
13
+ --palette-primary-main: #0891b2;
14
+ --palette-primary-light: #22d3ee;
15
+ --palette-primary-dark: #164e63;
16
+ --palette-on-primary: #ffffff;
17
+
18
+ /* Secondary palette - Deep teal */
19
+ --palette-secondary-main: #0f766e;
20
+ --palette-secondary-light: #14b8a6;
21
+ --palette-secondary-dark: #134e4a;
22
+ --palette-on-secondary: #ffffff;
23
+
24
+ /* Surface palette - Sea foam */
25
+ --palette-surface-main: #f0fdfa;
26
+ --palette-surface-variant: #ccfbf1;
27
+ --palette-surface-elevated: #ffffff;
28
+ --palette-on-surface: #164e63;
29
+
30
+ /* Background palette - Shallow water */
31
+ --palette-background-main: #ecfeff;
32
+ --palette-background-dark: #cffafe;
33
+ --palette-background-overlay: rgba(236, 254, 255, 0.95);
34
+ --palette-on-background: #0f766e;
35
+
36
+ /* Header background with transparency */
37
+ --palette-header-bg-start: rgba(236, 254, 255, 0.98);
38
+ --palette-header-bg-end: rgba(236, 254, 255, 0.95);
39
+ --palette-header-collapsed-bg-start: rgba(236, 254, 255, 0.99);
40
+ --palette-header-collapsed-bg-end: rgba(236, 254, 255, 0.96);
41
+
42
+ /* Text palette - Deep sea */
43
+ --palette-text-primary: #164e63;
44
+ --palette-text-secondary: #0891b2;
45
+ --palette-text-disabled: rgba(22, 78, 99, 0.38);
46
+ --palette-text-inverted: #ffffff;
47
+
48
+ /* Border palette - Tide line */
49
+ --palette-border-main: #a7f3d0;
50
+ --palette-border-light: rgba(22, 78, 99, 0.12);
51
+ --palette-border-lighter: rgba(22, 78, 99, 0.05);
52
+ --palette-border-medium: #67e8f9;
53
+
54
+ /* Success palette - Kelp green */
55
+ --palette-success-main: #059669;
56
+ --palette-success-light: #d1fae5;
57
+ --palette-success-dark: #065f46;
58
+ --palette-success-border: #a7f3d0;
59
+
60
+ /* Error palette - Coral */
61
+ --palette-error-main: #ef4444;
62
+ --palette-error-light: #fee2e2;
63
+ --palette-error-dark: #7f1d1d;
64
+ --palette-error-border: #fecaca;
65
+
66
+ /* Warning palette - Sandy yellow */
67
+ --palette-warning-main: #f59e0b;
68
+ --palette-warning-light: #fef3c7;
69
+ --palette-warning-dark: #78350f;
70
+ --palette-warning-border: #fde68a;
71
+
72
+ /* Info palette - Crystal blue */
73
+ --palette-info-main: #0ea5e9;
74
+ --palette-info-light: #e0f2fe;
75
+ --palette-info-dark: #0c4a6e;
76
+ --palette-on-info: #ffffff;
77
+ --palette-info-border: #7dd3fc;
78
+
79
+ /* Accent palette - Coral reef */
80
+ --palette-accent-main: #f97316;
81
+ --palette-accent-light: #fb923c;
82
+ --palette-accent-dark: #ea580c;
83
+ --palette-on-accent: #ffffff;
84
+
85
+ /* Control palette - Depth */
86
+ --palette-control-main: #0c4a6e;
87
+ --palette-control-light: #075985;
88
+ --palette-control-text: #cffafe;
89
+ --palette-control-border: #0891b2;
90
+ }
91
+
92
+ /* ===== OCEAN PALETTE - DARK THEME ===== */
93
+ html[data-palette="ocean"][data-theme="dark"] {
94
+ /* Primary palette - Bioluminescent */
95
+ --palette-primary-main: #22d3ee;
96
+ --palette-primary-light: #67e8f9;
97
+ --palette-primary-dark: #0891b2;
98
+ --palette-on-primary: #0a1a1f;
99
+
100
+ /* Secondary palette - Deep current */
101
+ --palette-secondary-main: #5eead4;
102
+ --palette-secondary-light: #99f6e4;
103
+ --palette-secondary-dark: #14b8a6;
104
+ --palette-on-secondary: #0a1a1f;
105
+
106
+ /* Surface palette - Abyss */
107
+ --palette-surface-main: #0a1a1f;
108
+ --palette-surface-variant: #164e63;
109
+ --palette-surface-elevated: #0e7490;
110
+ --palette-on-surface: #cffafe;
111
+
112
+ /* Background palette - Ocean floor */
113
+ --palette-background-main: #020617;
114
+ --palette-background-dark: #0c1821;
115
+ --palette-background-overlay: rgba(10, 26, 31, 0.95);
116
+ --palette-on-background: #5eead4;
117
+
118
+ /* Header background with transparency */
119
+ --palette-header-bg-start: rgba(2, 6, 23, 0.98);
120
+ --palette-header-bg-end: rgba(2, 6, 23, 0.95);
121
+ --palette-header-collapsed-bg-start: rgba(2, 6, 23, 0.99);
122
+ --palette-header-collapsed-bg-end: rgba(2, 6, 23, 0.96);
123
+
124
+ /* Text palette - Phosphorescent */
125
+ --palette-text-primary: #cffafe;
126
+ --palette-text-secondary: #a5f3fc;
127
+ --palette-text-disabled: rgba(207, 250, 254, 0.38);
128
+ --palette-text-inverted: #020617;
129
+
130
+ /* Border palette - Deep current */
131
+ --palette-border-main: #155e75;
132
+ --palette-border-light: rgba(207, 250, 254, 0.12);
133
+ --palette-border-lighter: rgba(207, 250, 254, 0.05);
134
+ --palette-border-medium: #0c4a6e;
135
+
136
+ /* Success palette - Algae glow */
137
+ --palette-success-main: #34d399;
138
+ --palette-success-light: #065f46;
139
+ --palette-success-dark: #10b981;
140
+ --palette-success-border: #047857;
141
+
142
+ /* Error palette - Red tide */
143
+ --palette-error-main: #f87171;
144
+ --palette-error-light: #7f1d1d;
145
+ --palette-error-dark: #ef4444;
146
+ --palette-error-border: #991b1b;
147
+
148
+ /* Warning palette - Sunset reflection */
149
+ --palette-warning-main: #fb7185;
150
+ --palette-warning-light: #881337;
151
+ --palette-warning-dark: #e11d48;
152
+ --palette-warning-border: #be123c;
153
+
154
+ /* Info palette - Electric blue */
155
+ --palette-info-main: #0ea5e9;
156
+ --palette-info-light: #0c4a6e;
157
+ --palette-info-dark: #38bdf8;
158
+ --palette-on-info: #020617;
159
+ --palette-info-border: #0284c7;
160
+
161
+ /* Accent palette - Warm coral */
162
+ --palette-accent-main: #ea580c;
163
+ --palette-accent-light: #fb923c;
164
+ --palette-accent-dark: #c2410c;
165
+ --palette-on-accent: #cffafe;
166
+
167
+ /* Control palette - Midnight depth */
168
+ --palette-control-main: #164e63;
169
+ --palette-control-light: #0e7490;
170
+ --palette-control-text: #ecfeff;
171
+ --palette-control-border: #155e75;
172
+ }
package/dist/palettes/palette-ocean.1.5.3.min.css ADDED
@@ -0,0 +1 @@
1
+ html[data-palette="ocean"]:not([data-theme="dark"]),html[data-palette="ocean"][data-theme="light"]{--palette-primary-main:#0891b2;--palette-primary-light:#22d3ee;--palette-primary-dark:#164e63;--palette-on-primary:#ffffff;--palette-secondary-main:#0f766e;--palette-secondary-light:#14b8a6;--palette-secondary-dark:#134e4a;--palette-on-secondary:#ffffff;--palette-surface-main:#f0fdfa;--palette-surface-variant:#ccfbf1;--palette-surface-elevated:#ffffff;--palette-on-surface:#164e63;--palette-background-main:#ecfeff;--palette-background-dark:#cffafe;--palette-background-overlay:rgba(236,254,255,0.95);--palette-on-background:#0f766e;--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);--palette-text-primary:#164e63;--palette-text-secondary:#0891b2;--palette-text-disabled:rgba(22,78,99,0.38);--palette-text-inverted:#ffffff;--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;--palette-success-main:#059669;--palette-success-light:#d1fae5;--palette-success-dark:#065f46;--palette-success-border:#a7f3d0;--palette-error-main:#ef4444;--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:#0ea5e9;--palette-info-light:#e0f2fe;--palette-info-dark:#0c4a6e;--palette-on-info:#ffffff;--palette-info-border:#7dd3fc;--palette-accent-main:#f97316;--palette-accent-light:#fb923c;--palette-accent-dark:#ea580c;--palette-on-accent:#ffffff;--palette-control-main:#0c4a6e;--palette-control-light:#075985;--palette-control-text:#cffafe;--palette-control-border:#0891b2}html[data-palette="ocean"][data-theme="dark"]{--palette-primary-main:#22d3ee;--palette-primary-light:#67e8f9;--palette-primary-dark:#0891b2;--palette-on-primary:#0a1a1f;--palette-secondary-main:#5eead4;--palette-secondary-light:#99f6e4;--palette-secondary-dark:#14b8a6;--palette-on-secondary:#0a1a1f;--palette-surface-main:#0a1a1f;--palette-surface-variant:#164e63;--palette-surface-elevated:#0e7490;--palette-on-surface:#cffafe;--palette-background-main:#020617;--palette-background-dark:#0c1821;--palette-background-overlay:rgba(10,26,31,0.95);--palette-on-background:#5eead4;--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);--palette-text-primary:#cffafe;--palette-text-secondary:#a5f3fc;--palette-text-disabled:rgba(207,250,254,0.38);--palette-text-inverted:#020617;--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;--palette-success-main:#34d399;--palette-success-light:#065f46;--palette-success-dark:#10b981;--palette-success-border:#047857;--palette-error-main:#f87171;--palette-error-light:#7f1d1d;--palette-error-dark:#ef4444;--palette-error-border:#991b1b;--palette-warning-main:#fb7185;--palette-warning-light:#881337;--palette-warning-dark:#e11d48;--palette-warning-border:#be123c;--palette-info-main:#0ea5e9;--palette-info-light:#0c4a6e;--palette-info-dark:#38bdf8;--palette-on-info:#020617;--palette-info-border:#0284c7;--palette-accent-main:#ea580c;--palette-accent-light:#fb923c;--palette-accent-dark:#c2410c;--palette-on-accent:#cffafe;--palette-control-main:#164e63;--palette-control-light:#0e7490;--palette-control-text:#ecfeff;--palette-control-border:#155e75}
package/dist/palettes/palette-spring.1.5.3.css ADDED
@@ -0,0 +1,160 @@
1
+ /**
2
+ * Spring Color Palette
3
+ *
4
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
5
+ *
6
+ * Fresh greens, soft pinks, and bright yellows - inspired by spring blooms
7
+ */
8
+
9
+ /* ===== SPRING PALETTE - LIGHT THEME ===== */
10
+ html[data-palette="spring"]:not([data-theme="dark"]),
11
+ html[data-palette="spring"][data-theme="light"] {
12
+ /* Primary palette - Fresh green */
13
+ --palette-primary-main: #16a34a;
14
+ --palette-primary-light: #4ade80;
15
+ --palette-primary-dark: #15803d;
16
+ --palette-on-primary: #ffffff;
17
+
18
+ /* Secondary palette - Blossom pink */
19
+ --palette-secondary-main: #ec4899;
20
+ --palette-secondary-light: #f472b6;
21
+ --palette-secondary-dark: #be185d;
22
+ --palette-on-secondary: #ffffff;
23
+
24
+ /* Surface palette - Soft white */
25
+ --palette-surface-main: #f7fee7;
26
+ --palette-surface-variant: #d9f7be; /* Improved contrast with subtle green tint */
27
+ --palette-surface-elevated: #ffffff;
28
+ --palette-on-surface: #14532d;
29
+
30
+ /* Background palette - Morning dew */
31
+ --palette-background-main: #f0fdf4;
32
+ --palette-background-dark: #dcfce7;
33
+ --palette-background-overlay: rgba(240, 253, 244, 0.95);
34
+ --palette-on-background: #166534;
35
+
36
+ /* Text palette - Deep forest */
37
+ --palette-text-primary: #14532d;
38
+ --palette-text-secondary: #166534;
39
+ --palette-text-disabled: rgba(20, 83, 45, 0.38);
40
+ --palette-text-inverted: #ffffff;
41
+
42
+ /* Border palette - Sage */
43
+ --palette-border-main: #bbf7d0;
44
+ --palette-border-light: rgba(20, 83, 45, 0.12);
45
+ --palette-border-lighter: rgba(20, 83, 45, 0.05);
46
+ --palette-border-medium: #86efac;
47
+
48
+ /* Success palette - Vibrant green */
49
+ --palette-success-main: #22c55e;
50
+ --palette-success-light: #dcfce7;
51
+ --palette-success-dark: #15803d;
52
+ --palette-success-border: #bbf7d0;
53
+
54
+ /* Error palette - Cherry blossom */
55
+ --palette-error-main: #f43f5e;
56
+ --palette-error-light: #ffe4e6;
57
+ --palette-error-dark: #881337;
58
+ --palette-error-border: #fecdd3;
59
+
60
+ /* Warning palette - Daffodil */
61
+ --palette-warning-main: #eab308;
62
+ --palette-warning-light: #fefce8;
63
+ --palette-warning-dark: #713f12;
64
+ --palette-warning-border: #fef08a;
65
+
66
+ /* Info palette - Sky blue */
67
+ --palette-info-main: #0ea5e9;
68
+ --palette-info-light: #e0f2fe;
69
+ --palette-info-dark: #0c4a6e;
70
+ --palette-on-info: #14532d;
71
+ --palette-info-border: #7dd3fc;
72
+
73
+ /* Accent palette - Cherry blossom */
74
+ --palette-accent-main: #ec4899;
75
+ --palette-accent-light: #fce7f3;
76
+ --palette-accent-dark: #be185d;
77
+ --palette-on-accent: #ffffff;
78
+
79
+ /* Control palette - Rich earth */
80
+ --palette-control-main: #365314;
81
+ --palette-control-light: #4d7c0f;
82
+ --palette-control-text: #ecfdf5;
83
+ --palette-control-border: #65a30d;
84
+ }
85
+
86
+ /* ===== SPRING PALETTE - DARK THEME ===== */
87
+ html[data-palette="spring"][data-theme="dark"] {
88
+ /* Primary palette - Neon leaf */
89
+ --palette-primary-main: #4ade80;
90
+ --palette-primary-light: #86efac;
91
+ --palette-primary-dark: #16a34a;
92
+ --palette-on-primary: #0f1f0f;
93
+
94
+ /* Secondary palette - Neon bloom */
95
+ --palette-secondary-main: #f472b6;
96
+ --palette-secondary-light: #f9a8d4;
97
+ --palette-secondary-dark: #ec4899;
98
+ --palette-on-secondary: #0f1f0f;
99
+
100
+ /* Surface palette - Dark moss */
101
+ --palette-surface-main: #0f1f0f;
102
+ --palette-surface-variant: #1a2e1a;
103
+ --palette-surface-elevated: #2d4a2d;
104
+ --palette-on-surface: #dcfce7;
105
+
106
+ /* Background palette - Deep forest */
107
+ --palette-background-main: #0a120a;
108
+ --palette-background-dark: #0f1f0f;
109
+ --palette-background-overlay: rgba(15, 31, 15, 0.95);
110
+ --palette-on-background: #bbf7d0;
111
+
112
+ /* Text palette - Moonlit green */
113
+ --palette-text-primary: #dcfce7;
114
+ --palette-text-secondary: #bbf7d0;
115
+ --palette-text-disabled: rgba(220, 252, 231, 0.38);
116
+ --palette-text-inverted: #0a120a;
117
+
118
+ /* Border palette - Night vine */
119
+ --palette-border-main: #166534;
120
+ --palette-border-light: rgba(220, 252, 231, 0.12);
121
+ --palette-border-lighter: rgba(220, 252, 231, 0.05);
122
+ --palette-border-medium: #14532d;
123
+
124
+ /* Success palette - Electric green */
125
+ --palette-success-main: #22c55e;
126
+ --palette-success-light: #14532d;
127
+ --palette-success-dark: #4ade80;
128
+ --palette-success-border: #166534;
129
+
130
+ /* Error palette - Neon pink */
131
+ --palette-error-main: #f472b6;
132
+ --palette-error-light: #881337;
133
+ --palette-error-dark: #ec4899;
134
+ --palette-error-border: #be185d;
135
+
136
+ /* Warning palette - Electric yellow */
137
+ --palette-warning-main: #facc15;
138
+ --palette-warning-light: #713f12;
139
+ --palette-warning-dark: #eab308;
140
+ --palette-warning-border: #a16207;
141
+
142
+ /* Info palette - Electric cyan */
143
+ --palette-info-main: #06b6d4;
144
+ --palette-info-light: #164e63;
145
+ --palette-info-dark: #22d3ee;
146
+ --palette-on-info: #0a120a;
147
+ --palette-info-border: #0891b2;
148
+
149
+ /* Accent palette - Electric bloom */
150
+ --palette-accent-main: #f472b6;
151
+ --palette-accent-light: #fce7f3;
152
+ --palette-accent-dark: #db2777;
153
+ --palette-on-accent: #dcfce7;
154
+
155
+ /* Control palette - Deep forest */
156
+ --palette-control-main: #1a2e1a;
157
+ --palette-control-light: #2d4a2d;
158
+ --palette-control-text: #dcfce7;
159
+ --palette-control-border: #166534;
160
+ }
package/dist/palettes/palette-spring.1.5.3.min.css ADDED
@@ -0,0 +1 @@
1
+ html[data-palette="spring"]:not([data-theme="dark"]),html[data-palette="spring"][data-theme="light"]{--palette-primary-main:#16a34a;--palette-primary-light:#4ade80;--palette-primary-dark:#15803d;--palette-on-primary:#ffffff;--palette-secondary-main:#ec4899;--palette-secondary-light:#f472b6;--palette-secondary-dark:#be185d;--palette-on-secondary:#ffffff;--palette-surface-main:#f7fee7;--palette-surface-variant:#d9f7be;--palette-surface-elevated:#ffffff;--palette-on-surface:#14532d;--palette-background-main:#f0fdf4;--palette-background-dark:#dcfce7;--palette-background-overlay:rgba(240,253,244,0.95);--palette-on-background:#166534;--palette-text-primary:#14532d;--palette-text-secondary:#166534;--palette-text-disabled:rgba(20,83,45,0.38);--palette-text-inverted:#ffffff;--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;--palette-success-main:#22c55e;--palette-success-light:#dcfce7;--palette-success-dark:#15803d;--palette-success-border:#bbf7d0;--palette-error-main:#f43f5e;--palette-error-light:#ffe4e6;--palette-error-dark:#881337;--palette-error-border:#fecdd3;--palette-warning-main:#eab308;--palette-warning-light:#fefce8;--palette-warning-dark:#713f12;--palette-warning-border:#fef08a;--palette-info-main:#0ea5e9;--palette-info-light:#e0f2fe;--palette-info-dark:#0c4a6e;--palette-on-info:#14532d;--palette-info-border:#7dd3fc;--palette-accent-main:#ec4899;--palette-accent-light:#fce7f3;--palette-accent-dark:#be185d;--palette-on-accent:#ffffff;--palette-control-main:#365314;--palette-control-light:#4d7c0f;--palette-control-text:#ecfdf5;--palette-control-border:#65a30d}html[data-palette="spring"][data-theme="dark"]{--palette-primary-main:#4ade80;--palette-primary-light:#86efac;--palette-primary-dark:#16a34a;--palette-on-primary:#0f1f0f;--palette-secondary-main:#f472b6;--palette-secondary-light:#f9a8d4;--palette-secondary-dark:#ec4899;--palette-on-secondary:#0f1f0f;--palette-surface-main:#0f1f0f;--palette-surface-variant:#1a2e1a;--palette-surface-elevated:#2d4a2d;--palette-on-surface:#dcfce7;--palette-background-main:#0a120a;--palette-background-dark:#0f1f0f;--palette-background-overlay:rgba(15,31,15,0.95);--palette-on-background:#bbf7d0;--palette-text-primary:#dcfce7;--palette-text-secondary:#bbf7d0;--palette-text-disabled:rgba(220,252,231,0.38);--palette-text-inverted:#0a120a;--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;--palette-success-main:#22c55e;--palette-success-light:#14532d;--palette-success-dark:#4ade80;--palette-success-border:#166534;--palette-error-main:#f472b6;--palette-error-light:#881337;--palette-error-dark:#ec4899;--palette-error-border:#be185d;--palette-warning-main:#facc15;--palette-warning-light:#713f12;--palette-warning-dark:#eab308;--palette-warning-border:#a16207;--palette-info-main:#06b6d4;--palette-info-light:#164e63;--palette-info-dark:#22d3ee;--palette-on-info:#0a120a;--palette-info-border:#0891b2;--palette-accent-main:#f472b6;--palette-accent-light:#fce7f3;--palette-accent-dark:#db2777;--palette-on-accent:#dcfce7;--palette-control-main:#1a2e1a;--palette-control-light:#2d4a2d;--palette-control-text:#dcfce7;--palette-control-border:#166534}
package/dist/palettes/palette-winter.1.5.3.css ADDED
@@ -0,0 +1,172 @@
1
+ /**
2
+ * Winter Color Palette
3
+ *
4
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
5
+ *
6
+ * Cool blues, icy whites, and frosty grays - inspired by winter landscapes
7
+ */
8
+
9
+ /* ===== WINTER PALETTE - LIGHT THEME ===== */
10
+ html[data-palette="winter"]:not([data-theme="dark"]),
11
+ html[data-palette="winter"][data-theme="light"] {
12
+ /* Primary palette - Ice blue */
13
+ --palette-primary-main: #0077be;
14
+ --palette-primary-light: #5ba3d0;
15
+ --palette-primary-dark: #005082;
16
+ --palette-on-primary: #ffffff;
17
+
18
+ /* Secondary palette - Steel blue */
19
+ --palette-secondary-main: #4682b4;
20
+ --palette-secondary-light: #7ba7cc;
21
+ --palette-secondary-dark: #2e5984;
22
+ --palette-on-secondary: #ffffff;
23
+
24
+ /* Surface palette - Snow white */
25
+ --palette-surface-main: #fafbfc;
26
+ --palette-surface-variant: #e2e8f0; /* Improved contrast with cooler tone */
27
+ --palette-surface-elevated: #ffffff;
28
+ --palette-on-surface: #0f172a;
29
+
30
+ /* Background palette - Frosty */
31
+ --palette-background-main: #f8fafc;
32
+ --palette-background-dark: #f1f5f9;
33
+ --palette-background-overlay: rgba(248, 250, 252, 0.95);
34
+ --palette-on-background: #475569;
35
+
36
+ /* Header background with transparency */
37
+ --palette-header-bg-start: rgba(248, 250, 252, 0.98);
38
+ --palette-header-bg-end: rgba(248, 250, 252, 0.95);
39
+ --palette-header-collapsed-bg-start: rgba(248, 250, 252, 0.99);
40
+ --palette-header-collapsed-bg-end: rgba(248, 250, 252, 0.96);
41
+
42
+ /* Text palette - Winter tones */
43
+ --palette-text-primary: #0f172a;
44
+ --palette-text-secondary: #475569;
45
+ --palette-text-disabled: rgba(15, 23, 42, 0.38);
46
+ --palette-text-inverted: #ffffff;
47
+
48
+ /* Border palette - Icy */
49
+ --palette-border-main: #cbd5e1;
50
+ --palette-border-light: rgba(15, 23, 42, 0.12);
51
+ --palette-border-lighter: rgba(15, 23, 42, 0.05);
52
+ --palette-border-medium: #94a3b8;
53
+
54
+ /* Success palette - Pine green */
55
+ --palette-success-main: #059669;
56
+ --palette-success-light: #d1fae5;
57
+ --palette-success-dark: #064e3b;
58
+ --palette-success-border: #a7f3d0;
59
+
60
+ /* Error palette - Winter berry */
61
+ --palette-error-main: #dc2626;
62
+ --palette-error-light: #fee2e2;
63
+ --palette-error-dark: #7f1d1d;
64
+ --palette-error-border: #fecaca;
65
+
66
+ /* Warning palette - Amber frost */
67
+ --palette-warning-main: #d97706;
68
+ --palette-warning-light: #fef3c7;
69
+ --palette-warning-dark: #92400e;
70
+ --palette-warning-border: #fde68a;
71
+
72
+ /* Info palette - Arctic blue */
73
+ --palette-info-main: #0284c7;
74
+ --palette-info-light: #e0f2fe;
75
+ --palette-info-dark: #0c4a6e;
76
+ --palette-on-info: #ffffff;
77
+ --palette-info-border: #7dd3fc;
78
+
79
+ /* Accent palette - Aurora colors */
80
+ --palette-accent-main: #ec4899;
81
+ --palette-accent-light: #fce7f3;
82
+ --palette-accent-dark: #be185d;
83
+ --palette-on-accent: #ffffff;
84
+
85
+ /* Control palette - Charcoal */
86
+ --palette-control-main: #1e293b;
87
+ --palette-control-light: #334155;
88
+ --palette-control-text: #e2e8f0;
89
+ --palette-control-border: #475569;
90
+ }
91
+
92
+ /* ===== WINTER PALETTE - DARK THEME ===== */
93
+ html[data-palette="winter"][data-theme="dark"] {
94
+ /* Primary palette - Arctic glow */
95
+ --palette-primary-main: #7dd3fc;
96
+ --palette-primary-light: #bae6fd;
97
+ --palette-primary-dark: #0369a1;
98
+ --palette-on-primary: #020617;
99
+
100
+ /* Secondary palette - Moonlight */
101
+ --palette-secondary-main: #94a3b8;
102
+ --palette-secondary-light: #cbd5e1;
103
+ --palette-secondary-dark: #64748b;
104
+ --palette-on-secondary: #020617;
105
+
106
+ /* Surface palette - Dark frost */
107
+ --palette-surface-main: #0f172a;
108
+ --palette-surface-variant: #1e293b;
109
+ --palette-surface-elevated: #334155;
110
+ --palette-on-surface: #f8fafc;
111
+
112
+ /* Background palette - Winter night */
113
+ --palette-background-main: #020617;
114
+ --palette-background-dark: #0f172a;
115
+ --palette-background-overlay: rgba(15, 23, 42, 0.95);
116
+ --palette-on-background: #cbd5e1;
117
+
118
+ /* Header background with transparency */
119
+ --palette-header-bg-start: rgba(2, 6, 23, 0.98);
120
+ --palette-header-bg-end: rgba(2, 6, 23, 0.95);
121
+ --palette-header-collapsed-bg-start: rgba(2, 6, 23, 0.99);
122
+ --palette-header-collapsed-bg-end: rgba(2, 6, 23, 0.96);
123
+
124
+ /* Text palette - Snow and ice */
125
+ --palette-text-primary: #f8fafc;
126
+ --palette-text-secondary: #cbd5e1;
127
+ --palette-text-disabled: rgba(248, 250, 252, 0.38);
128
+ --palette-text-inverted: #020617;
129
+
130
+ /* Border palette - Dark ice */
131
+ --palette-border-main: #475569;
132
+ --palette-border-light: rgba(248, 250, 252, 0.12);
133
+ --palette-border-lighter: rgba(248, 250, 252, 0.05);
134
+ --palette-border-medium: #334155;
135
+
136
+ /* Success palette - Aurora green */
137
+ --palette-success-main: #34d399;
138
+ --palette-success-light: #064e3b;
139
+ --palette-success-dark: #10b981;
140
+ --palette-success-border: #065f46;
141
+
142
+ /* Error palette - Northern lights red */
143
+ --palette-error-main: #f87171;
144
+ --palette-error-light: #7f1d1d;
145
+ --palette-error-dark: #ef4444;
146
+ --palette-error-border: #991b1b;
147
+
148
+ /* Warning palette - Aurora orange */
149
+ --palette-warning-main: #fb923c;
150
+ --palette-warning-light: #9a3412;
151
+ --palette-warning-dark: #f97316;
152
+ --palette-warning-border: #c2410c;
153
+
154
+ /* Info palette - Polar blue */
155
+ --palette-info-main: #38bdf8;
156
+ --palette-info-light: #0c4a6e;
157
+ --palette-info-dark: #0ea5e9;
158
+ --palette-on-info: #020617;
159
+ --palette-info-border: #0284c7;
160
+
161
+ /* Accent palette - Northern lights */
162
+ --palette-accent-main: #f472b6;
163
+ --palette-accent-light: #fce7f3;
164
+ --palette-accent-dark: #db2777;
165
+ --palette-on-accent: #f8fafc;
166
+
167
+ /* Control palette - Midnight */
168
+ --palette-control-main: #1e293b;
169
+ --palette-control-light: #334155;
170
+ --palette-control-text: #e2e8f0;
171
+ --palette-control-border: #475569;
172
+ }
package/dist/palettes/palette-winter.1.5.3.min.css ADDED
@@ -0,0 +1 @@
1
+ html[data-palette="winter"]:not([data-theme="dark"]),html[data-palette="winter"][data-theme="light"]{--palette-primary-main:#0077be;--palette-primary-light:#5ba3d0;--palette-primary-dark:#005082;--palette-on-primary:#ffffff;--palette-secondary-main:#4682b4;--palette-secondary-light:#7ba7cc;--palette-secondary-dark:#2e5984;--palette-on-secondary:#ffffff;--palette-surface-main:#fafbfc;--palette-surface-variant:#e2e8f0;--palette-surface-elevated:#ffffff;--palette-on-surface:#0f172a;--palette-background-main:#f8fafc;--palette-background-dark:#f1f5f9;--palette-background-overlay:rgba(248,250,252,0.95);--palette-on-background:#475569;--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);--palette-text-primary:#0f172a;--palette-text-secondary:#475569;--palette-text-disabled:rgba(15,23,42,0.38);--palette-text-inverted:#ffffff;--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;--palette-success-main:#059669;--palette-success-light:#d1fae5;--palette-success-dark:#064e3b;--palette-success-border:#a7f3d0;--palette-error-main:#dc2626;--palette-error-light:#fee2e2;--palette-error-dark:#7f1d1d;--palette-error-border:#fecaca;--palette-warning-main:#d97706;--palette-warning-light:#fef3c7;--palette-warning-dark:#92400e;--palette-warning-border:#fde68a;--palette-info-main:#0284c7;--palette-info-light:#e0f2fe;--palette-info-dark:#0c4a6e;--palette-on-info:#ffffff;--palette-info-border:#7dd3fc;--palette-accent-main:#ec4899;--palette-accent-light:#fce7f3;--palette-accent-dark:#be185d;--palette-on-accent:#ffffff;--palette-control-main:#1e293b;--palette-control-light:#334155;--palette-control-text:#e2e8f0;--palette-control-border:#475569}html[data-palette="winter"][data-theme="dark"]{--palette-primary-main:#7dd3fc;--palette-primary-light:#bae6fd;--palette-primary-dark:#0369a1;--palette-on-primary:#020617;--palette-secondary-main:#94a3b8;--palette-secondary-light:#cbd5e1;--palette-secondary-dark:#64748b;--palette-on-secondary:#020617;--palette-surface-main:#0f172a;--palette-surface-variant:#1e293b;--palette-surface-elevated:#334155;--palette-on-surface:#f8fafc;--palette-background-main:#020617;--palette-background-dark:#0f172a;--palette-background-overlay:rgba(15,23,42,0.95);--palette-on-background:#cbd5e1;--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);--palette-text-primary:#f8fafc;--palette-text-secondary:#cbd5e1;--palette-text-disabled:rgba(248,250,252,0.38);--palette-text-inverted:#020617;--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;--palette-success-main:#34d399;--palette-success-light:#064e3b;--palette-success-dark:#10b981;--palette-success-border:#065f46;--palette-error-main:#f87171;--palette-error-light:#7f1d1d;--palette-error-dark:#ef4444;--palette-error-border:#991b1b;--palette-warning-main:#fb923c;--palette-warning-light:#9a3412;--palette-warning-dark:#f97316;--palette-warning-border:#c2410c;--palette-info-main:#38bdf8;--palette-info-light:#0c4a6e;--palette-info-dark:#0ea5e9;--palette-on-info:#020617;--palette-info-border:#0284c7;--palette-accent-main:#f472b6;--palette-accent-light:#fce7f3;--palette-accent-dark:#db2777;--palette-on-accent:#f8fafc;--palette-control-main:#1e293b;--palette-control-light:#334155;--palette-control-text:#e2e8f0;--palette-control-border:#475569}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qwickapps/react-framework",
3
- "version": "1.5.2",
3
+ "version": "1.5.3",
4
4
  "type": "module",
5
5
  "description": "Complete React framework with responsive navigation, flexible layouts, theming system, and reusable components for building modern applications.",
6
6
  "main": "dist/index.js",
package/src/components/layout/GridLayout.tsx CHANGED
@@ -163,7 +163,8 @@ function GridLayoutView({
163
163
  ...(width && { width: resolveDimension(width, 'width') }), // Override only if explicitly set
164
164
  ...(equalHeight && {
165
165
  alignItems: 'stretch',
166
- '& > .MuiGrid-item': {
166
+ // Target direct Grid children - MUI v6 uses .MuiGrid-root for grid items with size prop
167
+ '& > .MuiGrid-root': {
167
168
  display: 'flex',
168
169
  '& > *': {
169
170
  width: '100%',