@keenmate/pure-admin-theme-express 1.0.0-rc01
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/dist/express.css +13135 -0
- package/package.json +31 -0
- package/src/scss/express.scss +566 -0
package/package.json
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@keenmate/pure-admin-theme-express",
|
|
3
|
+
"version": "1.0.0-rc01",
|
|
4
|
+
"description": "Express theme for Pure Admin",
|
|
5
|
+
"style": "dist/express.css",
|
|
6
|
+
"exports": {
|
|
7
|
+
".": "./dist/express.css",
|
|
8
|
+
"./scss": "./src/scss/express.scss"
|
|
9
|
+
},
|
|
10
|
+
"files": [
|
|
11
|
+
"dist/",
|
|
12
|
+
"src/scss/"
|
|
13
|
+
],
|
|
14
|
+
"scripts": {
|
|
15
|
+
"build": "sass src/scss:dist --no-source-map --silence-deprecation=import --load-path=../../node_modules",
|
|
16
|
+
"prepublishOnly": "npm run build"
|
|
17
|
+
},
|
|
18
|
+
"keywords": ["pure-admin", "theme", "express", "css"],
|
|
19
|
+
"author": "KeenMate",
|
|
20
|
+
"license": "MIT",
|
|
21
|
+
"peerDependencies": {
|
|
22
|
+
"@keenmate/pure-admin-core": "^1.0.0-rc01"
|
|
23
|
+
},
|
|
24
|
+
"devDependencies": {
|
|
25
|
+
"@keenmate/pure-admin-core": "^1.0.0-rc01",
|
|
26
|
+
"sass": "^1.70.0"
|
|
27
|
+
},
|
|
28
|
+
"publishConfig": {
|
|
29
|
+
"access": "public"
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -0,0 +1,566 @@
|
|
|
1
|
+
/* Express Theme - Bold yellow and red palette inspired by logistics brands */
|
|
2
|
+
@use 'sass:color';
|
|
3
|
+
|
|
4
|
+
@import '@keenmate/pure-admin-core/src/scss/variables/index';
|
|
5
|
+
|
|
6
|
+
// Express color palette - Bold yellow and red
|
|
7
|
+
$express-yellow: #FFCC00; // Primary yellow
|
|
8
|
+
$express-yellow-light: #FFE57F;
|
|
9
|
+
$express-yellow-lighter: #FFF0B2;
|
|
10
|
+
|
|
11
|
+
$express-red: #D40511; // Primary red
|
|
12
|
+
$express-red-hover: #F91320;
|
|
13
|
+
$express-red-dark: #98040C;
|
|
14
|
+
|
|
15
|
+
$express-black: #000000;
|
|
16
|
+
$express-dark: #333333;
|
|
17
|
+
$express-gray: #8C8C8C;
|
|
18
|
+
$express-gray-light: #CCCCCC;
|
|
19
|
+
$express-gray-lighter: #E5E5E5;
|
|
20
|
+
$express-gray-lightest: #EBEBEB;
|
|
21
|
+
$express-bg: #F2F2F2;
|
|
22
|
+
|
|
23
|
+
// Layout overrides
|
|
24
|
+
$sidebar-width: 29rem; // 290px (10px base)
|
|
25
|
+
|
|
26
|
+
// Font overrides
|
|
27
|
+
$body-font-family: "Delivery", system-ui, -apple-system, sans-serif;
|
|
28
|
+
|
|
29
|
+
// Express theme color overrides - Bold yellow header/footer with red accents
|
|
30
|
+
$primary-bg: #ffffff;
|
|
31
|
+
$content-background-color: $express-bg;
|
|
32
|
+
$header-bg: $express-yellow; // Bold yellow header
|
|
33
|
+
$header-border-color: $express-yellow; // Remove gray line between header and sidebar
|
|
34
|
+
$sidebar-bg: $express-black; // Black sidebar
|
|
35
|
+
$sidebar-submenu-bg: #1a1a1a; // Slightly lighter black for submenus
|
|
36
|
+
$sidebar-submenu-hover-bg: rgba(255, 255, 255, 0.1); // Match level 1 hover
|
|
37
|
+
$sidebar-submenu-active-bg: $express-red; // Match level 1 active (red accent)
|
|
38
|
+
$footer-bg: $express-yellow; // Bold yellow footer
|
|
39
|
+
$footer-border-color: $express-yellow; // Remove gray line between footer and sidebar
|
|
40
|
+
$border-color: $express-gray-lighter;
|
|
41
|
+
$text-primary: $express-dark;
|
|
42
|
+
$text-secondary: $express-gray;
|
|
43
|
+
$accent-color: $express-red; // Red accent
|
|
44
|
+
$accent-hover: rgba(212, 5, 17, 0.12);
|
|
45
|
+
$accent-light: rgba(212, 5, 17, 0.06);
|
|
46
|
+
|
|
47
|
+
// Sync base variables with theme colors
|
|
48
|
+
$base-accent-color: $accent-color;
|
|
49
|
+
$base-accent-color-hover: $express-red-hover;
|
|
50
|
+
$base-accent-color-active: color.adjust($express-red, $lightness: 15%);
|
|
51
|
+
$base-accent-color-light: $accent-light;
|
|
52
|
+
$base-accent-color-light-hover: rgba($base-accent-color, 0.10);
|
|
53
|
+
|
|
54
|
+
// Form focus colors - must match accent color
|
|
55
|
+
$input-focus-border-color: $accent-color;
|
|
56
|
+
$select-focus-border-color: $accent-color;
|
|
57
|
+
$textarea-focus-border-color: $accent-color;
|
|
58
|
+
|
|
59
|
+
// Checkbox colors - must match accent color
|
|
60
|
+
$checkbox-border-color-hover: $accent-color;
|
|
61
|
+
$checkbox-border-color-checked: $accent-color;
|
|
62
|
+
$checkbox-bg-checked: $accent-color;
|
|
63
|
+
$checkbox-bg-indeterminate: $accent-color;
|
|
64
|
+
$checkbox-focus-shadow: 0 0 0 2px rgba($accent-color, 0.25);
|
|
65
|
+
|
|
66
|
+
// Card colors
|
|
67
|
+
$card-bg: #ffffff;
|
|
68
|
+
$card-header-bg: $express-gray-lightest;
|
|
69
|
+
$card-footer-bg: #ffffff;
|
|
70
|
+
$card-tabs-bg: $express-gray-lighter;
|
|
71
|
+
|
|
72
|
+
// Input colors
|
|
73
|
+
$input-bg: #ffffff;
|
|
74
|
+
$input-border: $express-gray-lighter;
|
|
75
|
+
$input-text: $express-dark;
|
|
76
|
+
|
|
77
|
+
// Table colors
|
|
78
|
+
$table-bg: #ffffff;
|
|
79
|
+
$table-header-bg: $express-gray-lightest;
|
|
80
|
+
$table-hover-bg: $express-yellow-lighter;
|
|
81
|
+
$table-stripe: $express-bg;
|
|
82
|
+
|
|
83
|
+
// Button colors - Red primary, yellow secondary
|
|
84
|
+
$btn-primary-bg: $express-red;
|
|
85
|
+
$btn-primary-bg-hover: $express-red-hover;
|
|
86
|
+
$btn-primary-text: #ffffff;
|
|
87
|
+
$btn-secondary-bg: $express-yellow;
|
|
88
|
+
$btn-secondary-bg-hover: $express-yellow-light;
|
|
89
|
+
$btn-secondary-text: $express-black;
|
|
90
|
+
$btn-success-bg: #10b981;
|
|
91
|
+
$btn-success-bg-hover: #059669;
|
|
92
|
+
$btn-warning-bg: #f59e0b;
|
|
93
|
+
$btn-warning-text: #ffffff;
|
|
94
|
+
$btn-danger-bg: $express-red-dark;
|
|
95
|
+
$btn-danger-bg-hover: $express-red;
|
|
96
|
+
$btn-info-bg: #06b6d4;
|
|
97
|
+
$btn-info-bg-hover: #0891b2;
|
|
98
|
+
$btn-light-bg: $express-gray-lightest;
|
|
99
|
+
$btn-light-text: $express-dark;
|
|
100
|
+
$btn-light-bg-hover: $express-gray-lighter;
|
|
101
|
+
$btn-dark-bg: $express-dark;
|
|
102
|
+
$btn-dark-bg-hover: $express-black;
|
|
103
|
+
|
|
104
|
+
// Validation shadow colors - match button colors
|
|
105
|
+
$success-bg: $btn-success-bg;
|
|
106
|
+
$success-bg-light: rgba(16, 185, 129, 0.1);
|
|
107
|
+
$warning-bg: $btn-warning-bg;
|
|
108
|
+
$warning-bg-light: rgba(245, 158, 11, 0.1);
|
|
109
|
+
$danger-bg: $btn-danger-bg;
|
|
110
|
+
$danger-bg-light: rgba(180, 5, 14, 0.1);
|
|
111
|
+
|
|
112
|
+
// Modal colors
|
|
113
|
+
$modal-overlay-bg: rgba(0, 0, 0, 0.6);
|
|
114
|
+
$modal-content-bg: #ffffff;
|
|
115
|
+
|
|
116
|
+
// Profile name in header
|
|
117
|
+
$header-profile-name-color: $express-black; // Black text on yellow header
|
|
118
|
+
|
|
119
|
+
// Alert colors - Vibrant and punchy with semi-transparent backgrounds
|
|
120
|
+
$alert-success-text: #065f46; // Darker green for contrast
|
|
121
|
+
$alert-success-bg: rgba(16, 185, 129, 0.68); // More vibrant
|
|
122
|
+
$alert-success-border: #10b981;
|
|
123
|
+
|
|
124
|
+
$alert-danger-text: #7f1d1d; // Dark red for contrast
|
|
125
|
+
$alert-danger-bg: rgba(212, 5, 17, 0.58);
|
|
126
|
+
$alert-danger-border: $express-red;
|
|
127
|
+
$alert-danger-text-transform: uppercase; // Uppercase for emphasis
|
|
128
|
+
|
|
129
|
+
$alert-warning-text: #78350f; // Dark amber for contrast
|
|
130
|
+
$alert-warning-bg: rgba(255, 193, 7, 0.58);
|
|
131
|
+
$alert-warning-border: #ffc107;
|
|
132
|
+
|
|
133
|
+
$alert-info-text: #164e63; // Dark cyan for contrast
|
|
134
|
+
$alert-info-bg: rgba(6, 182, 212, 0.58);
|
|
135
|
+
$alert-info-border: #06b6d4;
|
|
136
|
+
|
|
137
|
+
// Delivery Font
|
|
138
|
+
@font-face {
|
|
139
|
+
font-family: "Delivery";
|
|
140
|
+
src: url(/fonts/Delivery/Delivery_W_Rg.woff2) format("woff2");
|
|
141
|
+
font-weight: 400;
|
|
142
|
+
font-style: normal;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
@import '@keenmate/pure-admin-core/src/scss/core';
|
|
146
|
+
@import '@keenmate/pure-admin-core/src/scss/utilities';
|
|
147
|
+
@import '@keenmate/pure-admin-core/src/scss/base-css-variables';
|
|
148
|
+
|
|
149
|
+
// Express-specific styling overrides
|
|
150
|
+
// Header text visibility - black text on yellow header
|
|
151
|
+
.pa-header {
|
|
152
|
+
&__brand h1 {
|
|
153
|
+
color: $express-black !important;
|
|
154
|
+
font-weight: $font-weight-bold !important;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
&__nav > ul > li > a {
|
|
158
|
+
color: $express-dark !important;
|
|
159
|
+
|
|
160
|
+
&:hover {
|
|
161
|
+
color: $express-red !important;
|
|
162
|
+
background-color: rgba(212, 5, 17, 0.08) !important;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
&__title h2 {
|
|
167
|
+
color: $express-dark !important;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
&__profile-btn {
|
|
171
|
+
color: $express-black !important;
|
|
172
|
+
|
|
173
|
+
&:hover {
|
|
174
|
+
background-color: rgba(212, 5, 17, 0.12) !important;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
// Burger menu - black bars on yellow header
|
|
180
|
+
.burger-menu {
|
|
181
|
+
span {
|
|
182
|
+
background-color: $express-black !important;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
&:hover span {
|
|
186
|
+
background-color: $express-red !important;
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
// Theme switcher in header
|
|
191
|
+
.theme-switcher {
|
|
192
|
+
label {
|
|
193
|
+
color: $express-dark !important;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
select {
|
|
197
|
+
background-color: $express-yellow-light !important;
|
|
198
|
+
color: $express-black !important;
|
|
199
|
+
border-color: $express-gray-lighter !important;
|
|
200
|
+
|
|
201
|
+
&:focus {
|
|
202
|
+
border-color: $express-red !important;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
// Footer text - black on yellow
|
|
208
|
+
.pa-layout__footer {
|
|
209
|
+
color: $express-dark !important;
|
|
210
|
+
|
|
211
|
+
p {
|
|
212
|
+
color: $express-dark !important;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
// Sidebar - black background with white/light text
|
|
217
|
+
.pa-sidebar {
|
|
218
|
+
border-right-color: $express-black !important; // Remove gray border
|
|
219
|
+
|
|
220
|
+
&__link,
|
|
221
|
+
&__toggle {
|
|
222
|
+
color: #ffffff !important;
|
|
223
|
+
|
|
224
|
+
&:hover {
|
|
225
|
+
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
226
|
+
color: $express-yellow !important;
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
&__link--active {
|
|
231
|
+
background-color: $express-red !important;
|
|
232
|
+
border-right: 3px solid $express-yellow !important;
|
|
233
|
+
color: #ffffff !important;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
&__chevron {
|
|
237
|
+
color: #ffffff !important;
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
// Primary button - bold red with white text
|
|
242
|
+
.pa-btn--primary {
|
|
243
|
+
font-weight: $font-weight-bold !important;
|
|
244
|
+
background-color: $express-red !important;
|
|
245
|
+
color: #ffffff !important;
|
|
246
|
+
|
|
247
|
+
&:hover {
|
|
248
|
+
background-color: $express-red-hover !important;
|
|
249
|
+
box-shadow: 0 2px 8px rgba(212, 5, 17, 0.3) !important;
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
// Secondary button - yellow with black text
|
|
254
|
+
.pa-btn--secondary {
|
|
255
|
+
background-color: $express-yellow !important;
|
|
256
|
+
color: $express-black !important;
|
|
257
|
+
border-color: $express-yellow !important;
|
|
258
|
+
|
|
259
|
+
&:hover {
|
|
260
|
+
background-color: $express-yellow-light !important;
|
|
261
|
+
border-color: $express-yellow-light !important;
|
|
262
|
+
box-shadow: 0 2px 8px rgba(255, 204, 0, 0.25) !important;
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
// Danger button - dark red
|
|
267
|
+
.pa-btn--danger {
|
|
268
|
+
font-weight: $font-weight-bold !important;
|
|
269
|
+
|
|
270
|
+
&:hover {
|
|
271
|
+
box-shadow: 0 2px 8px rgba(212, 5, 17, 0.3) !important;
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
// ============================================================================
|
|
276
|
+
// CSS VARIABLES - LIGHT MODE (Default - matches current Express)
|
|
277
|
+
// ============================================================================
|
|
278
|
+
:root, .pa-mode-light {
|
|
279
|
+
--page-loader-bg: rgba(255, 255, 255, 0.95);
|
|
280
|
+
--page-loader-spinner-border: #ccc;
|
|
281
|
+
--page-loader-spinner-accent: #D40511; // Express red
|
|
282
|
+
|
|
283
|
+
// Base CSS variables for web components (daterangepicker, multiselect, etc.)
|
|
284
|
+
@include output-base-css-variables;
|
|
285
|
+
|
|
286
|
+
// Pure Admin theme CSS variables for runtime theme switching
|
|
287
|
+
@include output-pa-css-variables;
|
|
288
|
+
|
|
289
|
+
// Web component overrides (light mode)
|
|
290
|
+
--drp-dropdown-bg: #ffffff;
|
|
291
|
+
--drp-border-color: #{$express-gray-lighter};
|
|
292
|
+
--drp-primary-bg: #{$express-bg};
|
|
293
|
+
--drp-primary-bg-hover: #{$express-gray-lightest};
|
|
294
|
+
--drp-text-primary: #{$express-dark};
|
|
295
|
+
--drp-text-secondary: #{$express-gray};
|
|
296
|
+
--drp-button-bg: transparent;
|
|
297
|
+
--drp-button-color: #{$express-dark};
|
|
298
|
+
--drp-button-accent-text-color: #ffffff;
|
|
299
|
+
--drp-button-today-color: #{$express-red};
|
|
300
|
+
--drp-button-clear-color: #{$express-gray};
|
|
301
|
+
--drp-button-cancel-color: #{$express-gray};
|
|
302
|
+
|
|
303
|
+
--ms-dropdown-bg: #ffffff;
|
|
304
|
+
--ms-input-bg: #ffffff;
|
|
305
|
+
--ms-primary-bg: #{$express-bg};
|
|
306
|
+
--ms-primary-bg-hover: #{$express-gray-lightest};
|
|
307
|
+
--ms-border-color: #{$express-gray-lighter};
|
|
308
|
+
--ms-text-color-1: #{$express-dark};
|
|
309
|
+
--ms-text-color-2: #{$express-gray};
|
|
310
|
+
--ms-text-color-3: #{$express-gray-light};
|
|
311
|
+
--ms-text-color-4: #{$express-gray-lighter};
|
|
312
|
+
--ms-hint-bg: #{$express-gray-lightest};
|
|
313
|
+
--ms-actions-bg: #{$express-gray-lightest};
|
|
314
|
+
--ms-selected-popover-bg: #ffffff;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
// ============================================================================
|
|
318
|
+
// CSS VARIABLES - DARK MODE
|
|
319
|
+
// ============================================================================
|
|
320
|
+
.pa-mode-dark {
|
|
321
|
+
// Express dark palette
|
|
322
|
+
$dark-bg: #1a1a1a;
|
|
323
|
+
$dark-card: #242424;
|
|
324
|
+
$dark-surface: #2a2a2a;
|
|
325
|
+
$dark-border: #3a3a3a;
|
|
326
|
+
$dark-text: #ffffff;
|
|
327
|
+
$dark-text-secondary: #aaaaaa;
|
|
328
|
+
|
|
329
|
+
--page-loader-bg: rgba(0, 0, 0, 0.95);
|
|
330
|
+
--page-loader-spinner-border: #333;
|
|
331
|
+
--page-loader-spinner-accent: #{$express-yellow};
|
|
332
|
+
|
|
333
|
+
// Core colors - dark backgrounds
|
|
334
|
+
--pa-primary-bg: #{$dark-bg};
|
|
335
|
+
--pa-bg-secondary: #{$dark-bg};
|
|
336
|
+
--pa-content-bg: #121212;
|
|
337
|
+
|
|
338
|
+
// Text colors - light text on dark bg
|
|
339
|
+
--pa-text-primary: #{$dark-text};
|
|
340
|
+
--pa-text-secondary: #{$dark-text-secondary};
|
|
341
|
+
|
|
342
|
+
// Keep Express brand colors
|
|
343
|
+
--pa-accent: #{$express-red};
|
|
344
|
+
--pa-accent-hover: rgba(212, 5, 17, 0.2);
|
|
345
|
+
--pa-accent-light: rgba(212, 5, 17, 0.15);
|
|
346
|
+
|
|
347
|
+
// Border
|
|
348
|
+
--pa-border-color: #{$dark-border};
|
|
349
|
+
|
|
350
|
+
// Header stays yellow (Express brand)
|
|
351
|
+
--pa-header-bg: #{$express-yellow};
|
|
352
|
+
--pa-header-border-color: #{$express-yellow};
|
|
353
|
+
--pa-header-text: #{$express-black};
|
|
354
|
+
--pa-header-text-secondary: #{$express-dark};
|
|
355
|
+
--pa-header-profile-name-color: #{$express-black};
|
|
356
|
+
|
|
357
|
+
// Sidebar stays black
|
|
358
|
+
--pa-sidebar-bg: #{$express-black};
|
|
359
|
+
--pa-sidebar-text: #ffffff;
|
|
360
|
+
--pa-sidebar-text-secondary: #ffffff;
|
|
361
|
+
--pa-sidebar-submenu-bg: #{$dark-bg};
|
|
362
|
+
--pa-sidebar-submenu-hover-bg: rgba(255, 255, 255, 0.1);
|
|
363
|
+
--pa-sidebar-submenu-active-bg: #{$express-red};
|
|
364
|
+
|
|
365
|
+
// Footer stays yellow
|
|
366
|
+
--pa-footer-bg: #{$express-yellow};
|
|
367
|
+
--pa-footer-border-color: #{$express-yellow};
|
|
368
|
+
|
|
369
|
+
// Cards - dark backgrounds
|
|
370
|
+
--pa-card-bg: #{$dark-card};
|
|
371
|
+
--pa-card-header-bg: #{$dark-surface};
|
|
372
|
+
--pa-card-footer-bg: #{$dark-surface};
|
|
373
|
+
--pa-card-tabs-bg: #{$dark-border};
|
|
374
|
+
|
|
375
|
+
// Inputs - dark backgrounds
|
|
376
|
+
--pa-input-bg: #{$dark-surface};
|
|
377
|
+
--pa-input-border: #{$dark-border};
|
|
378
|
+
--pa-input-text: #{$dark-text};
|
|
379
|
+
--pa-input-focus-border-color: #{$express-red};
|
|
380
|
+
|
|
381
|
+
// Input group - use muted yellow for Express branding
|
|
382
|
+
--pa-input-group-prepend-bg: rgba(255, 204, 0, 0.15);
|
|
383
|
+
--pa-input-group-prepend-text: #{$express-yellow};
|
|
384
|
+
--pa-input-group-append-bg: rgba(255, 204, 0, 0.15);
|
|
385
|
+
--pa-input-group-append-text: #{$express-yellow};
|
|
386
|
+
|
|
387
|
+
// Input group buttons
|
|
388
|
+
.pa-input-group__button {
|
|
389
|
+
background-color: rgba(255, 204, 0, 0.15) !important;
|
|
390
|
+
color: $express-yellow !important;
|
|
391
|
+
border-color: $dark-border !important;
|
|
392
|
+
|
|
393
|
+
&:hover {
|
|
394
|
+
background-color: rgba(255, 204, 0, 0.25) !important;
|
|
395
|
+
}
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
// Tables - dark backgrounds
|
|
399
|
+
--pa-table-bg: #{$dark-card};
|
|
400
|
+
--pa-table-header-bg: #{$dark-surface};
|
|
401
|
+
--pa-table-stripe: #{$dark-bg};
|
|
402
|
+
--pa-table-hover-bg: #{$dark-surface};
|
|
403
|
+
|
|
404
|
+
// Modals
|
|
405
|
+
--pa-modal-content-bg: #{$dark-card};
|
|
406
|
+
--pa-modal-overlay-bg: rgba(0, 0, 0, 0.8);
|
|
407
|
+
|
|
408
|
+
// Loader overlay
|
|
409
|
+
--pa-loader-overlay-bg: rgba(0, 0, 0, 0.7);
|
|
410
|
+
|
|
411
|
+
// Profile panel
|
|
412
|
+
--pa-profile-overlay-bg: rgba(0, 0, 0, 0.5);
|
|
413
|
+
|
|
414
|
+
// Tooltip/Popover
|
|
415
|
+
--pa-tooltip-bg: #{$dark-border};
|
|
416
|
+
--pa-tooltip-text: #{$dark-text};
|
|
417
|
+
--pa-popover-content-bg: #{$dark-card};
|
|
418
|
+
|
|
419
|
+
// Command palette
|
|
420
|
+
--pa-command-palette-backdrop-bg: rgba(0, 0, 0, 0.8);
|
|
421
|
+
--pa-command-palette-item-hover-bg: #{$dark-surface};
|
|
422
|
+
--pa-command-palette-item-active-bg: rgba(212, 5, 17, 0.2);
|
|
423
|
+
--pa-command-palette-highlight-bg: rgba(212, 5, 17, 0.3);
|
|
424
|
+
|
|
425
|
+
// Alerts - light text for dark mode visibility
|
|
426
|
+
--pa-alert-info-text: #ffffff;
|
|
427
|
+
--pa-alert-info-bg: rgba(6, 182, 212, 0.3);
|
|
428
|
+
--pa-alert-success-text: #ffffff;
|
|
429
|
+
--pa-alert-success-bg: rgba(16, 185, 129, 0.3);
|
|
430
|
+
--pa-alert-warning-text: #ffffff;
|
|
431
|
+
--pa-alert-warning-bg: rgba(255, 193, 7, 0.3);
|
|
432
|
+
--pa-alert-danger-text: #ffffff;
|
|
433
|
+
--pa-alert-danger-bg: rgba(212, 5, 17, 0.3);
|
|
434
|
+
|
|
435
|
+
// Code inside alerts - inherit alert text color
|
|
436
|
+
.pa-alert code {
|
|
437
|
+
color: inherit;
|
|
438
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
// Buttons - adjust for dark mode
|
|
442
|
+
--pa-btn-secondary-bg: #{$dark-border};
|
|
443
|
+
--pa-btn-secondary-bg-hover: #{$dark-surface};
|
|
444
|
+
--pa-btn-secondary-text: #{$dark-text};
|
|
445
|
+
--pa-btn-light-bg: #{$dark-surface};
|
|
446
|
+
--pa-btn-light-bg-hover: #{$dark-border};
|
|
447
|
+
--pa-btn-light-text: #{$dark-text};
|
|
448
|
+
|
|
449
|
+
// Semantic colors - slightly brighter for dark mode
|
|
450
|
+
--pa-success-bg: #10b981;
|
|
451
|
+
--pa-success-bg-light: rgba(16, 185, 129, 0.2);
|
|
452
|
+
--pa-warning-bg: #f59e0b;
|
|
453
|
+
--pa-warning-bg-light: rgba(245, 158, 11, 0.2);
|
|
454
|
+
--pa-danger-bg: #{$express-red-dark};
|
|
455
|
+
--pa-danger-bg-light: rgba(180, 5, 14, 0.2);
|
|
456
|
+
--pa-info-bg: #06b6d4;
|
|
457
|
+
--pa-info-bg-light: rgba(6, 182, 212, 0.2);
|
|
458
|
+
|
|
459
|
+
// Base variables for web components (dark mode)
|
|
460
|
+
--base-primary-bg: #{$dark-bg};
|
|
461
|
+
--base-primary-bg-hover: #{$dark-surface};
|
|
462
|
+
--base-text-color-1: #{$dark-text};
|
|
463
|
+
--base-text-color-2: #{$dark-text-secondary};
|
|
464
|
+
// Accent colors - use yellow for better visibility on dark backgrounds
|
|
465
|
+
--base-accent-color: #{$express-yellow};
|
|
466
|
+
--base-accent-color-hover: #{$express-yellow-light};
|
|
467
|
+
--base-accent-color-active: #{$express-yellow-light};
|
|
468
|
+
--base-accent-color-light: rgba(255, 204, 0, 0.2);
|
|
469
|
+
--base-accent-color-light-hover: rgba(255, 204, 0, 0.3);
|
|
470
|
+
--base-text-color-3: #888888;
|
|
471
|
+
--base-text-color-4: #666666;
|
|
472
|
+
--base-border-color: #{$dark-border};
|
|
473
|
+
--base-border: 1px solid #{$dark-border};
|
|
474
|
+
--base-input-bg: #{$dark-surface};
|
|
475
|
+
--base-input-color: #{$dark-text};
|
|
476
|
+
--base-input-border: 1px solid #{$dark-border};
|
|
477
|
+
--base-input-border-hover: 1px solid #{$express-red};
|
|
478
|
+
--base-input-border-focus: 1px solid #{$express-red};
|
|
479
|
+
--base-input-placeholder-color: #666666;
|
|
480
|
+
--base-dropdown-bg: #{$dark-card};
|
|
481
|
+
--base-dropdown-border: 1px solid #{$dark-border};
|
|
482
|
+
--base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
|
|
483
|
+
--base-tooltip-bg: #{$dark-border};
|
|
484
|
+
--base-tooltip-text-color: #{$dark-text};
|
|
485
|
+
|
|
486
|
+
// Daterangepicker overrides (dark mode)
|
|
487
|
+
web-daterangepicker {
|
|
488
|
+
--drp-dropdown-bg: #{$dark-card};
|
|
489
|
+
--drp-border-color: #{$dark-border};
|
|
490
|
+
--drp-primary-bg: #{$dark-bg};
|
|
491
|
+
--drp-primary-bg-hover: #{$dark-surface};
|
|
492
|
+
--drp-text-primary: #{$dark-text};
|
|
493
|
+
--drp-text-secondary: #{$dark-text-secondary};
|
|
494
|
+
--drp-button-bg: transparent;
|
|
495
|
+
--drp-button-color: #{$dark-text};
|
|
496
|
+
--drp-button-accent-text-color: #ffffff;
|
|
497
|
+
--drp-button-today-color: #{$express-red};
|
|
498
|
+
--drp-button-clear-color: #{$dark-text-secondary};
|
|
499
|
+
--drp-button-cancel-color: #{$dark-text-secondary};
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
// Multiselect overrides (dark mode)
|
|
503
|
+
web-multiselect {
|
|
504
|
+
--ms-dropdown-bg: #{$dark-card};
|
|
505
|
+
--ms-input-bg: #{$dark-surface};
|
|
506
|
+
--ms-primary-bg: #{$dark-bg};
|
|
507
|
+
--ms-primary-bg-hover: #{$dark-surface};
|
|
508
|
+
--ms-border-color: #{$dark-border};
|
|
509
|
+
--ms-text-color-1: #{$dark-text};
|
|
510
|
+
--ms-text-color-2: #{$dark-text-secondary};
|
|
511
|
+
--ms-text-color-3: #888888;
|
|
512
|
+
--ms-text-color-4: #666666;
|
|
513
|
+
--ms-hint-bg: #{$dark-bg};
|
|
514
|
+
--ms-actions-bg: #{$dark-bg};
|
|
515
|
+
--ms-selected-popover-bg: #{$dark-card};
|
|
516
|
+
}
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
// ============================================================================
|
|
520
|
+
// DARK MODE COMPONENT ADJUSTMENTS
|
|
521
|
+
// ============================================================================
|
|
522
|
+
.pa-mode-dark {
|
|
523
|
+
// Footer text - keep dark on yellow background
|
|
524
|
+
.pa-layout__footer {
|
|
525
|
+
color: $express-dark !important;
|
|
526
|
+
|
|
527
|
+
p {
|
|
528
|
+
color: $express-dark !important;
|
|
529
|
+
}
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
// Primary alert - white text on red background for contrast
|
|
533
|
+
.pa-alert--primary {
|
|
534
|
+
color: #ffffff !important;
|
|
535
|
+
background-color: rgba($express-red, 0.25) !important;
|
|
536
|
+
border-color: rgba($express-red, 0.4) !important;
|
|
537
|
+
}
|
|
538
|
+
|
|
539
|
+
// Card shadows darker
|
|
540
|
+
.pa-card {
|
|
541
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
542
|
+
}
|
|
543
|
+
|
|
544
|
+
// Secondary button adjustments for dark mode
|
|
545
|
+
.pa-btn--secondary {
|
|
546
|
+
background-color: #3a3a3a !important;
|
|
547
|
+
color: #ffffff !important;
|
|
548
|
+
border-color: #4a4a4a !important;
|
|
549
|
+
|
|
550
|
+
&:hover {
|
|
551
|
+
background-color: #4a4a4a !important;
|
|
552
|
+
border-color: #5a5a5a !important;
|
|
553
|
+
}
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
// Outline secondary button
|
|
557
|
+
.pa-btn--outline-secondary {
|
|
558
|
+
border-color: #5a5a5a !important;
|
|
559
|
+
color: #aaaaaa !important;
|
|
560
|
+
|
|
561
|
+
&:hover {
|
|
562
|
+
background-color: #3a3a3a !important;
|
|
563
|
+
color: #ffffff !important;
|
|
564
|
+
}
|
|
565
|
+
}
|
|
566
|
+
}
|