@qwickapps/react-framework 1.4.4 → 1.4.6
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.
- package/README.md +1 -1
- package/dist/index.css +1 -1
- package/dist/index.esm.css +1 -1
- package/dist/palettes/PaletteAutumn.css +172 -0
- package/dist/palettes/PaletteCosmic.css +172 -0
- package/dist/palettes/PaletteDefault.css +178 -0
- package/dist/palettes/PaletteOcean.css +172 -0
- package/dist/palettes/PaletteSpring.css +160 -0
- package/dist/palettes/PaletteWinter.css +172 -0
- package/dist/palettes/index.css +12 -0
- package/package.json +6 -5
- package/scripts/create-qwickapps-project.js +1 -1
- package/src/components/QwickApp.css +1213 -2
|
@@ -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
|
+
}
|
|
@@ -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
|
+
}
|
|
@@ -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
|
+
}
|
|
@@ -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
|
+
}
|