@qwickapps/react-framework 1.5.1 → 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 (31) hide show
  1. package/README.md +10 -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.2.css +172 -0
  7. package/dist/palettes/palette-autumn.1.5.2.min.css +1 -0
  8. package/dist/palettes/palette-autumn.1.5.3.css +172 -0
  9. package/dist/palettes/palette-autumn.1.5.3.min.css +1 -0
  10. package/dist/palettes/palette-cosmic.1.5.2.css +172 -0
  11. package/dist/palettes/palette-cosmic.1.5.2.min.css +1 -0
  12. package/dist/palettes/palette-cosmic.1.5.3.css +172 -0
  13. package/dist/palettes/palette-cosmic.1.5.3.min.css +1 -0
  14. package/dist/palettes/palette-default.1.5.2.css +178 -0
  15. package/dist/palettes/palette-default.1.5.2.min.css +1 -0
  16. package/dist/palettes/palette-default.1.5.3.css +178 -0
  17. package/dist/palettes/palette-default.1.5.3.min.css +1 -0
  18. package/dist/palettes/palette-ocean.1.5.2.css +172 -0
  19. package/dist/palettes/palette-ocean.1.5.2.min.css +1 -0
  20. package/dist/palettes/palette-ocean.1.5.3.css +172 -0
  21. package/dist/palettes/palette-ocean.1.5.3.min.css +1 -0
  22. package/dist/palettes/palette-spring.1.5.2.css +160 -0
  23. package/dist/palettes/palette-spring.1.5.2.min.css +1 -0
  24. package/dist/palettes/palette-spring.1.5.3.css +160 -0
  25. package/dist/palettes/palette-spring.1.5.3.min.css +1 -0
  26. package/dist/palettes/palette-winter.1.5.2.css +172 -0
  27. package/dist/palettes/palette-winter.1.5.2.min.css +1 -0
  28. package/dist/palettes/palette-winter.1.5.3.css +172 -0
  29. package/dist/palettes/palette-winter.1.5.3.min.css +1 -0
  30. package/package.json +1 -1
  31. package/src/components/layout/GridLayout.tsx +2 -1
@@ -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
+ }
@@ -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}
@@ -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
+ }
@@ -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}
@@ -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
+ }
@@ -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}
@@ -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
+ }