@keenmate/pure-admin-theme-express 1.0.0 → 1.1.0

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 (3) hide show
  1. package/dist/express.css +1165 -641
  2. package/package.json +7 -2
  3. package/src/scss/express.scss +747 -729
package/src/scss/express.scss CHANGED
@@ -1,729 +1,747 @@
1
- /* Express Theme - Bold yellow and red palette inspired by logistics brands */
2
- @use 'sass:color';
3
-
4
- // =============================================================================
5
- // THEME COLOR SLOTS (1-9) - Express logistics palette
6
- // =============================================================================
7
- $color-1: #D40511; // Express Red (primary)
8
- $color-2: #FFCC00; // Express Yellow (brand)
9
- $color-3: #ff6b00; // Orange (urgent)
10
- $color-4: #00a651; // Green (delivered)
11
- $color-5: #0066cc; // Blue (tracking)
12
- $color-6: #6b3fa0; // Purple (premium)
13
- $color-7: #8C8C8C; // Gray (neutral)
14
- $color-8: #333333; // Dark (contrast)
15
- $color-9: #00b4d8; // Cyan (info)
16
-
17
- // ============================================================================
18
- // EXPRESS COLOR PALETTE
19
- // ============================================================================
20
- $express-yellow: #FFCC00; // Primary yellow
21
- $express-yellow-light: #FFE57F;
22
- $express-yellow-lighter: #FFF0B2;
23
-
24
- $express-red: #D40511; // Primary red
25
- $express-red-hover: #F91320;
26
- $express-red-dark: #98040C;
27
-
28
- $express-black: #000000;
29
- $express-dark: #333333;
30
- $express-gray: #8C8C8C;
31
- $express-gray-light: #CCCCCC;
32
- $express-gray-lighter: #E5E5E5;
33
- $express-gray-lightest: #EBEBEB;
34
- $express-bg: #F2F2F2;
35
-
36
- // ============================================================================
37
- // BASE VARIABLES - Single Source of Truth
38
- // ============================================================================
39
- // All framework variables will derive from these
40
-
41
- // Accent colors (Express uses red as accent)
42
- $base-accent-color: $express-red;
43
- $base-accent-color-hover: $express-red-hover;
44
- $base-accent-color-active: color.adjust($express-red, $lightness: 15%);
45
- $base-accent-color-light: rgba($express-red, 0.06);
46
- $base-accent-color-light-hover: rgba($express-red, 0.10);
47
-
48
- // Text colors
49
- $base-text-color-1: $express-dark;
50
- $base-text-color-2: $express-gray;
51
- $base-text-color-3: $express-gray-light;
52
- $base-text-color-4: $express-gray-lighter;
53
- $base-text-color-on-accent: #ffffff;
54
-
55
- // Surface colors
56
- $base-surface-1: #ffffff; // Cards, modals
57
- $base-surface-2: $express-bg; // Page background
58
- $base-surface-3: $express-gray-lighter; // Dividers
59
- $base-surface-inverse: $express-dark;
60
- $base-overlay-bg: rgba(0, 0, 0, 0.6);
61
- $base-shadow-color: rgba(0, 0, 0, 0.15);
62
-
63
- // Border
64
- $base-border-color: $express-gray-lighter;
65
-
66
- // Input fields
67
- $base-input-bg: #ffffff;
68
- $base-input-color: $express-dark;
69
- $base-input-border: 1px solid $express-gray-lighter;
70
- $base-input-border-hover: 1px solid $express-gray;
71
- $base-input-border-focus: 1px solid $express-red;
72
- $base-input-placeholder-color: $express-gray-light;
73
-
74
- // Dropdown/Popover
75
- $base-dropdown-bg: #ffffff;
76
- $base-dropdown-border: $express-gray-lighter;
77
- $base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
78
-
79
- // Tooltip
80
- $base-tooltip-bg: $express-dark;
81
- $base-tooltip-text-color: #ffffff;
82
-
83
- // Contextual colors
84
- $base-success-color: #10b981;
85
- $base-success-color-hover: #059669;
86
- $base-success-bg-light: rgba(16, 185, 129, 0.1);
87
- $base-success-text: #065f46;
88
- $base-text-on-success: #ffffff;
89
-
90
- $base-danger-color: $express-red-dark;
91
- $base-danger-color-hover: $express-red;
92
- $base-danger-bg-light: rgba(180, 5, 14, 0.1);
93
- $base-danger-text: #7f1d1d;
94
- $base-text-on-danger: #ffffff;
95
-
96
- $base-warning-color: #f59e0b;
97
- $base-warning-color-hover: #d97706;
98
- $base-warning-bg-light: rgba(245, 158, 11, 0.1);
99
- $base-warning-text: #78350f;
100
- $base-text-on-warning: #ffffff;
101
-
102
- $base-info-color: #06b6d4;
103
- $base-info-color-hover: #0891b2;
104
- $base-info-bg-light: rgba(6, 182, 212, 0.1);
105
- $base-info-text: #164e63;
106
- $base-text-on-info: #ffffff;
107
-
108
- // Interactive states
109
- $base-focus-ring-color: rgba($express-red, 0.25);
110
-
111
- // Typography
112
- $base-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
113
-
114
- // ============================================================================
115
- // FRAMEWORK VARIABLES - Import and let them derive from base
116
- // ============================================================================
117
- @import '@keenmate/pure-admin-core/src/scss/variables/index';
118
-
119
- // Layout overrides
120
- $sidebar-width: 29rem; // 290px (10px base)
121
-
122
- // Font overrides
123
- $body-font-family: $base-font-family;
124
-
125
- // Layout-specific overrides (Express brand identity)
126
- $primary-bg: #ffffff;
127
- $content-background-color: $express-bg;
128
- $header-bg: $express-yellow; // Bold yellow header
129
- $header-border-color: $express-yellow;
130
- $sidebar-bg: $express-black; // Black sidebar
131
- $sidebar-submenu-bg: #1a1a1a;
132
- $sidebar-submenu-hover-bg: rgba(255, 255, 255, 0.1);
133
- $sidebar-submenu-active-bg: $express-red;
134
- $footer-bg: $express-yellow; // Bold yellow footer
135
- $footer-border-color: $express-yellow;
136
- $text-primary: $base-text-color-1;
137
- $text-secondary: $base-text-color-2;
138
- $accent-hover: rgba($express-red, 0.12);
139
- $accent-light: rgba($express-red, 0.06);
140
-
141
- // Card colors
142
- $card-bg: #ffffff;
143
- $card-header-bg: $express-gray-lightest;
144
- $card-footer-bg: #ffffff;
145
- $card-tabs-bg: $express-gray-lighter;
146
-
147
- // Input colors
148
- $input-bg: $base-input-bg;
149
- $input-border: $base-input-border;
150
- $input-text: $base-input-color;
151
-
152
- // Form focus colors
153
- $input-focus-border-color: $base-accent-color;
154
- $select-focus-border-color: $base-accent-color;
155
- $textarea-focus-border-color: $base-accent-color;
156
-
157
- // Checkbox colors
158
- $checkbox-border-color-hover: $base-accent-color;
159
- $checkbox-border-color-checked: $base-accent-color;
160
- $checkbox-bg-checked: $base-accent-color;
161
- $checkbox-bg-indeterminate: $base-accent-color;
162
- $checkbox-focus-shadow: 0 0 0 2px $base-focus-ring-color;
163
-
164
- // Table colors
165
- $table-bg: #ffffff;
166
- $table-header-bg: $express-gray-lightest;
167
- $table-hover-bg: $express-yellow-lighter;
168
- $table-stripe: $express-bg;
169
-
170
- // Button colors - Red primary, yellow secondary
171
- $btn-primary-bg: $base-accent-color;
172
- $btn-primary-bg-hover: $base-accent-color-hover;
173
- $btn-primary-text: #ffffff;
174
- $btn-secondary-bg: $express-yellow;
175
- $btn-secondary-bg-hover: $express-yellow-light;
176
- $btn-secondary-text: $express-black;
177
- $btn-light-bg: $express-gray-lightest;
178
- $btn-light-text: $express-dark;
179
- $btn-light-bg-hover: $express-gray-lighter;
180
- $btn-dark-bg: $express-dark;
181
- $btn-dark-bg-hover: $express-black;
182
-
183
- // Validation shadow colors
184
- $success-bg-light: $base-success-bg-light;
185
- $warning-bg-light: $base-warning-bg-light;
186
- $danger-bg-light: $base-danger-bg-light;
187
-
188
- // Modal colors
189
- $modal-overlay-bg: $base-overlay-bg;
190
- $modal-content-bg: #ffffff;
191
-
192
- // Profile name in header
193
- $header-profile-name-color: $express-black; // Black text on yellow header
194
-
195
- // Alert colors - Vibrant and punchy with semi-transparent backgrounds
196
- $alert-success-text: $base-success-text;
197
- $alert-success-bg: rgba(16, 185, 129, 0.68);
198
- $alert-success-border: $base-success-color;
199
-
200
- $alert-danger-text: $base-danger-text;
201
- $alert-danger-bg: rgba(212, 5, 17, 0.58);
202
- $alert-danger-border: $express-red;
203
-
204
- $alert-warning-text: $base-warning-text;
205
- $alert-warning-bg: rgba(255, 193, 7, 0.58);
206
- $alert-warning-border: #ffc107;
207
-
208
- $alert-info-text: $base-info-text;
209
- $alert-info-bg: rgba(6, 182, 212, 0.58);
210
- $alert-info-border: $base-info-color;
211
-
212
- // ============================================================================
213
- // FONTS
214
- // ============================================================================
215
- /* cyrillic-ext */
216
- @font-face {
217
- font-family: 'Fira Sans Condensed';
218
- font-style: normal;
219
- font-weight: 400;
220
- font-display: swap;
221
- src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfvtrftV.woff2) format('woff2');
222
- unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
223
- }
224
- /* cyrillic */
225
- @font-face {
226
- font-family: 'Fira Sans Condensed';
227
- font-style: normal;
228
- font-weight: 400;
229
- font-display: swap;
230
- src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfLtrftV.woff2) format('woff2');
231
- unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
232
- }
233
- /* greek-ext */
234
- @font-face {
235
- font-family: 'Fira Sans Condensed';
236
- font-style: normal;
237
- font-weight: 400;
238
- font-display: swap;
239
- src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfrtrftV.woff2) format('woff2');
240
- unicode-range: U+1F00-1FFF;
241
- }
242
- /* greek */
243
- @font-face {
244
- font-family: 'Fira Sans Condensed';
245
- font-style: normal;
246
- font-weight: 400;
247
- font-display: swap;
248
- src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfXtrftV.woff2) format('woff2');
249
- unicode-range: U+0370-03FF;
250
- }
251
- /* vietnamese */
252
- @font-face {
253
- font-family: 'Fira Sans Condensed';
254
- font-style: normal;
255
- font-weight: 400;
256
- font-display: swap;
257
- src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfntrftV.woff2) format('woff2');
258
- unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
259
- }
260
- /* latin-ext */
261
- @font-face {
262
- font-family: 'Fira Sans Condensed';
263
- font-style: normal;
264
- font-weight: 400;
265
- font-display: swap;
266
- src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfjtrftV.woff2) format('woff2');
267
- unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
268
- }
269
- /* latin */
270
- @font-face {
271
- font-family: 'Fira Sans Condensed';
272
- font-style: normal;
273
- font-weight: 400;
274
- font-display: swap;
275
- src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfbtrQ.woff2) format('woff2');
276
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
277
- }
278
-
279
- // ============================================================================
280
- // CORE IMPORTS
281
- // ============================================================================
282
- @import '@keenmate/pure-admin-core/src/scss/core';
283
- @import '@keenmate/pure-admin-core/src/scss/utilities';
284
- @import '@keenmate/pure-admin-core/src/scss/base-css-variables';
285
-
286
- // ============================================================================
287
- // EXPRESS-SPECIFIC STYLING OVERRIDES
288
- // ============================================================================
289
-
290
- // Header text visibility - black text on yellow header
291
- .pa-header {
292
- &__brand h1 {
293
- color: $express-black !important;
294
- font-weight: $font-weight-bold !important;
295
- }
296
-
297
- &__nav > ul > li > a {
298
- color: $express-dark !important;
299
-
300
- &:hover {
301
- color: $express-red !important;
302
- background-color: rgba(212, 5, 17, 0.08) !important;
303
- }
304
- }
305
-
306
- &__title h2 {
307
- color: $express-dark !important;
308
- }
309
-
310
- &__profile-btn {
311
- color: $express-black !important;
312
-
313
- &:hover {
314
- background-color: rgba(212, 5, 17, 0.12) !important;
315
- }
316
- }
317
- }
318
-
319
- // Burger menu - black bars on yellow header
320
- .burger-menu {
321
- span {
322
- background-color: $express-black !important;
323
- }
324
-
325
- &:hover span {
326
- background-color: $express-red !important;
327
- }
328
- }
329
-
330
- // Theme switcher in header
331
- .theme-switcher {
332
- label {
333
- color: $express-dark !important;
334
- }
335
-
336
- select {
337
- background-color: $express-yellow-light !important;
338
- color: $express-black !important;
339
- border-color: $express-gray-lighter !important;
340
-
341
- &:focus {
342
- border-color: $express-red !important;
343
- }
344
- }
345
- }
346
-
347
- // Footer text - black on yellow
348
- .pa-layout__footer {
349
- color: $express-dark !important;
350
-
351
- p {
352
- color: $express-dark !important;
353
- }
354
- }
355
-
356
- // Sidebar - black background with white/light text
357
- .pa-sidebar {
358
- border-right-color: $express-black !important;
359
-
360
- &__link,
361
- &__toggle {
362
- color: #ffffff !important;
363
-
364
- &:hover {
365
- background-color: rgba(255, 255, 255, 0.1) !important;
366
- color: $express-yellow !important;
367
- }
368
- }
369
-
370
- &__link--active {
371
- background-color: $express-red !important;
372
- border-right: 3px solid $express-yellow !important;
373
- color: #ffffff !important;
374
- }
375
-
376
- &__chevron {
377
- color: #ffffff !important;
378
- }
379
- }
380
-
381
- // Primary button - bold red with white text
382
- .pa-btn--primary {
383
- font-weight: $font-weight-bold !important;
384
- background-color: $express-red !important;
385
- color: #ffffff !important;
386
-
387
- &:hover {
388
- background-color: $express-red-hover !important;
389
- box-shadow: 0 2px 8px rgba(212, 5, 17, 0.3) !important;
390
- }
391
- }
392
-
393
- // Secondary button - yellow with black text
394
- .pa-btn--secondary {
395
- background-color: $express-yellow !important;
396
- color: $express-black !important;
397
- border-color: $express-yellow !important;
398
-
399
- &:hover {
400
- background-color: $express-yellow-light !important;
401
- border-color: $express-yellow-light !important;
402
- box-shadow: 0 2px 8px rgba(255, 204, 0, 0.25) !important;
403
- }
404
- }
405
-
406
- // Danger button - dark red
407
- .pa-btn--danger {
408
- font-weight: $font-weight-bold !important;
409
-
410
- &:hover {
411
- box-shadow: 0 2px 8px rgba(212, 5, 17, 0.3) !important;
412
- }
413
- }
414
-
415
- // Profile panel tabs - improve visibility on yellow header
416
- .pa-profile-panel__tabs {
417
- .pa-tabs__item {
418
- color: $express-dark !important;
419
-
420
- &:hover {
421
- color: $express-red !important;
422
- background-color: rgba(212, 5, 17, 0.08) !important;
423
- }
424
-
425
- &--active {
426
- color: $express-red !important;
427
- border-bottom-color: $express-red !important;
428
- }
429
- }
430
- }
431
-
432
- // ============================================================================
433
- // CSS VARIABLES - LIGHT MODE (Default - matches current Express)
434
- // ============================================================================
435
- :root, .pa-mode-light {
436
- --page-loader-bg: rgba(255, 255, 255, 0.95);
437
- --page-loader-spinner-border: #ccc;
438
- --page-loader-spinner-accent: #{$express-red};
439
-
440
- // Base CSS variables for web components
441
- @include output-base-css-variables;
442
-
443
- // Pure Admin theme CSS variables
444
- @include output-pa-css-variables;
445
-
446
- // Input group - light gray background for light mode
447
- --pa-input-group-prepend-bg: #{$express-gray-lightest};
448
- --pa-input-group-prepend-text: #{$express-dark};
449
- --pa-input-group-append-bg: #{$express-gray-lightest};
450
- --pa-input-group-append-text: #{$express-dark};
451
-
452
- // Web component overrides (light mode)
453
- --drp-dropdown-bg: #ffffff;
454
- --drp-border-color: #{$express-gray-lighter};
455
- --drp-primary-bg: #{$express-bg};
456
- --drp-primary-bg-hover: #{$express-gray-lightest};
457
- --drp-text-primary: #{$express-dark};
458
- --drp-text-secondary: #{$express-gray};
459
- --drp-button-bg: transparent;
460
- --drp-button-color: #{$express-dark};
461
- --drp-button-accent-text-color: #ffffff;
462
- --drp-button-today-color: #{$express-red};
463
- --drp-button-clear-color: #{$express-gray};
464
- --drp-button-cancel-color: #{$express-gray};
465
-
466
- --ms-dropdown-bg: #ffffff;
467
- --ms-input-bg: #ffffff;
468
- --ms-primary-bg: #{$express-bg};
469
- --ms-primary-bg-hover: #{$express-gray-lightest};
470
- --ms-border-color: #{$express-gray-lighter};
471
- --ms-text-color-1: #{$express-dark};
472
- --ms-text-color-2: #{$express-gray};
473
- --ms-text-color-3: #{$express-gray-light};
474
- --ms-text-color-4: #{$express-gray-lighter};
475
- --ms-hint-bg: #{$express-gray-lightest};
476
- --ms-actions-bg: #{$express-gray-lightest};
477
- --ms-selected-popover-bg: #ffffff;
478
- }
479
-
480
- // ============================================================================
481
- // CSS VARIABLES - DARK MODE
482
- // ============================================================================
483
- .pa-mode-dark {
484
- // Express dark palette
485
- $dark-bg: #1a1a1a;
486
- $dark-card: #242424;
487
- $dark-surface: #2a2a2a;
488
- $dark-border: #3a3a3a;
489
- $dark-text: #ffffff;
490
- $dark-text-secondary: #aaaaaa;
491
-
492
- --page-loader-bg: rgba(0, 0, 0, 0.95);
493
- --page-loader-spinner-border: #333;
494
- --page-loader-spinner-accent: #{$express-yellow};
495
-
496
- // Core colors - dark backgrounds
497
- --pa-primary-bg: #{$dark-bg};
498
- --pa-bg-secondary: #{$dark-bg};
499
- --pa-content-bg: #121212;
500
-
501
- // Text colors - light text on dark bg
502
- --pa-text-primary: #{$dark-text};
503
- --pa-text-secondary: #{$dark-text-secondary};
504
-
505
- // Keep Express brand colors
506
- --pa-accent: #{$express-red};
507
- --pa-accent-hover: rgba(212, 5, 17, 0.2);
508
- --pa-accent-light: rgba(212, 5, 17, 0.15);
509
-
510
- // Border
511
- --pa-border-color: #{$dark-border};
512
-
513
- // Header stays yellow (Express brand)
514
- --pa-header-bg: #{$express-yellow};
515
- --pa-header-border-color: #{$express-yellow};
516
- --pa-header-text: #{$express-black};
517
- --pa-header-text-secondary: #{$express-dark};
518
- --pa-header-profile-name-color: #{$express-black};
519
-
520
- // Sidebar stays black
521
- --pa-sidebar-bg: #{$express-black};
522
- --pa-sidebar-text: #ffffff;
523
- --pa-sidebar-text-secondary: #ffffff;
524
- --pa-sidebar-submenu-bg: #{$dark-bg};
525
- --pa-sidebar-submenu-hover-bg: rgba(255, 255, 255, 0.1);
526
- --pa-sidebar-submenu-active-bg: #{$express-red};
527
-
528
- // Footer stays yellow
529
- --pa-footer-bg: #{$express-yellow};
530
- --pa-footer-border-color: #{$express-yellow};
531
-
532
- // Cards - dark backgrounds
533
- --pa-card-bg: #{$dark-card};
534
- --pa-card-header-bg: #{$dark-surface};
535
- --pa-card-footer-bg: #{$dark-surface};
536
- --pa-card-tabs-bg: #{$dark-border};
537
-
538
- // Inputs - dark backgrounds
539
- --pa-input-bg: #{$dark-surface};
540
- --pa-input-border: #{$dark-border};
541
- --pa-input-text: #{$dark-text};
542
- --pa-input-focus-border-color: #{$express-red};
543
-
544
- // Input group - use muted yellow for Express branding
545
- --pa-input-group-prepend-bg: rgba(255, 204, 0, 0.15);
546
- --pa-input-group-prepend-text: #{$express-yellow};
547
- --pa-input-group-append-bg: rgba(255, 204, 0, 0.15);
548
- --pa-input-group-append-text: #{$express-yellow};
549
-
550
- // Input group buttons
551
- .pa-input-group__button {
552
- background-color: rgba(255, 204, 0, 0.15) !important;
553
- color: $express-yellow !important;
554
- border-color: $dark-border !important;
555
-
556
- &:hover {
557
- background-color: rgba(255, 204, 0, 0.25) !important;
558
- }
559
- }
560
-
561
- // Tables - dark backgrounds
562
- --pa-table-bg: #{$dark-card};
563
- --pa-table-header-bg: #{$dark-surface};
564
- --pa-table-stripe: #{$dark-bg};
565
- --pa-table-hover-bg: #{$dark-surface};
566
-
567
- // Modals
568
- --pa-modal-content-bg: #{$dark-card};
569
- --pa-modal-overlay-bg: rgba(0, 0, 0, 0.8);
570
-
571
- // Loader overlay
572
- --pa-loader-overlay-bg: rgba(0, 0, 0, 0.7);
573
-
574
- // Profile panel
575
- --pa-profile-overlay-bg: rgba(0, 0, 0, 0.5);
576
-
577
- // Tooltip/Popover
578
- --pa-tooltip-bg: #{$dark-border};
579
- --pa-tooltip-text: #{$dark-text};
580
- --pa-popover-content-bg: #{$dark-card};
581
-
582
- // Command palette
583
- --pa-command-palette-backdrop-bg: rgba(0, 0, 0, 0.8);
584
- --pa-command-palette-item-hover-bg: #{$dark-surface};
585
- --pa-command-palette-item-active-bg: rgba(212, 5, 17, 0.2);
586
- --pa-command-palette-highlight-bg: rgba(212, 5, 17, 0.3);
587
-
588
- // Alerts - light text for dark mode visibility
589
- --pa-alert-info-text: #ffffff;
590
- --pa-alert-info-bg: rgba(6, 182, 212, 0.3);
591
- --pa-alert-success-text: #ffffff;
592
- --pa-alert-success-bg: rgba(16, 185, 129, 0.3);
593
- --pa-alert-warning-text: #ffffff;
594
- --pa-alert-warning-bg: rgba(255, 193, 7, 0.3);
595
- --pa-alert-danger-text: #ffffff;
596
- --pa-alert-danger-bg: rgba(212, 5, 17, 0.3);
597
-
598
- // Code inside alerts - inherit alert text color
599
- .pa-alert code {
600
- color: inherit;
601
- background-color: rgba(255, 255, 255, 0.2);
602
- }
603
-
604
- // Buttons - adjust for dark mode
605
- --pa-btn-secondary-bg: #{$dark-border};
606
- --pa-btn-secondary-bg-hover: #{$dark-surface};
607
- --pa-btn-secondary-text: #{$dark-text};
608
- --pa-btn-light-bg: #{$dark-surface};
609
- --pa-btn-light-bg-hover: #{$dark-border};
610
- --pa-btn-light-text: #{$dark-text};
611
-
612
- // Semantic colors - slightly brighter for dark mode
613
- --pa-success-bg: #10b981;
614
- --pa-success-bg-light: rgba(16, 185, 129, 0.2);
615
- --pa-warning-bg: #f59e0b;
616
- --pa-warning-bg-light: rgba(245, 158, 11, 0.2);
617
- --pa-danger-bg: #{$express-red-dark};
618
- --pa-danger-bg-light: rgba(180, 5, 14, 0.2);
619
- --pa-info-bg: #06b6d4;
620
- --pa-info-bg-light: rgba(6, 182, 212, 0.2);
621
-
622
- // Base variables for web components (dark mode)
623
- --base-surface-1: #{$dark-card};
624
- --base-surface-2: #{$dark-bg};
625
- --base-surface-3: #{$dark-surface};
626
- --base-text-color-1: #{$dark-text};
627
- --base-text-color-2: #{$dark-text-secondary};
628
- --base-text-color-3: #888888;
629
- --base-text-color-4: #666666;
630
- // Accent colors - use yellow for better visibility on dark backgrounds
631
- --base-accent-color: #{$express-yellow};
632
- --base-accent-color-hover: #{$express-yellow-light};
633
- --base-accent-color-active: #{$express-yellow-light};
634
- --base-accent-color-light: rgba(255, 204, 0, 0.2);
635
- --base-accent-color-light-hover: rgba(255, 204, 0, 0.3);
636
- --base-border-color: #{$dark-border};
637
- --base-input-bg: #{$dark-surface};
638
- --base-input-color: #{$dark-text};
639
- --base-input-border: 1px solid #{$dark-border};
640
- --base-input-border-hover: 1px solid #{$express-red};
641
- --base-input-border-focus: 1px solid #{$express-red};
642
- --base-input-placeholder-color: #666666;
643
- --base-dropdown-bg: #{$dark-card};
644
- --base-dropdown-border: #{$dark-border};
645
- --base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
646
- --base-tooltip-bg: #{$dark-border};
647
- --base-tooltip-text-color: #{$dark-text};
648
-
649
- // Daterangepicker overrides (dark mode)
650
- web-daterangepicker {
651
- --drp-dropdown-bg: #{$dark-card};
652
- --drp-border-color: #{$dark-border};
653
- --drp-primary-bg: #{$dark-bg};
654
- --drp-primary-bg-hover: #{$dark-surface};
655
- --drp-text-primary: #{$dark-text};
656
- --drp-text-secondary: #{$dark-text-secondary};
657
- --drp-button-bg: transparent;
658
- --drp-button-color: #{$dark-text};
659
- --drp-button-accent-text-color: #ffffff;
660
- --drp-button-today-color: #{$express-red};
661
- --drp-button-clear-color: #{$dark-text-secondary};
662
- --drp-button-cancel-color: #{$dark-text-secondary};
663
- }
664
-
665
- // Multiselect overrides (dark mode)
666
- web-multiselect {
667
- --ms-dropdown-bg: #{$dark-card};
668
- --ms-input-bg: #{$dark-surface};
669
- --ms-primary-bg: #{$dark-bg};
670
- --ms-primary-bg-hover: #{$dark-surface};
671
- --ms-border-color: #{$dark-border};
672
- --ms-text-color-1: #{$dark-text};
673
- --ms-text-color-2: #{$dark-text-secondary};
674
- --ms-text-color-3: #888888;
675
- --ms-text-color-4: #666666;
676
- --ms-hint-bg: #{$dark-bg};
677
- --ms-actions-bg: #{$dark-bg};
678
- --ms-selected-popover-bg: #{$dark-card};
679
- }
680
- }
681
-
682
- // ============================================================================
683
- // DARK MODE COMPONENT ADJUSTMENTS
684
- // ============================================================================
685
- .pa-mode-dark {
686
- // Footer text - keep dark on yellow background
687
- .pa-layout__footer {
688
- color: $express-dark !important;
689
-
690
- p {
691
- color: $express-dark !important;
692
- }
693
- }
694
-
695
- // Primary alert - white text on red background for contrast
696
- .pa-alert--primary {
697
- color: #ffffff !important;
698
- background-color: rgba($express-red, 0.25) !important;
699
- border-color: rgba($express-red, 0.4) !important;
700
- }
701
-
702
- // Card shadows darker
703
- .pa-card {
704
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
705
- }
706
-
707
- // Secondary button adjustments for dark mode
708
- .pa-btn--secondary {
709
- background-color: #3a3a3a !important;
710
- color: #ffffff !important;
711
- border-color: #4a4a4a !important;
712
-
713
- &:hover {
714
- background-color: #4a4a4a !important;
715
- border-color: #5a5a5a !important;
716
- }
717
- }
718
-
719
- // Outline secondary button
720
- .pa-btn--outline-secondary {
721
- border-color: #5a5a5a !important;
722
- color: #aaaaaa !important;
723
-
724
- &:hover {
725
- background-color: #3a3a3a !important;
726
- color: #ffffff !important;
727
- }
728
- }
729
- }
1
+ /* Express Theme - Bold yellow and red palette inspired by logistics brands */
2
+ @use 'sass:color';
3
+
4
+ // =============================================================================
5
+ // THEME COLOR SLOTS (1-9) - Express logistics palette
6
+ // =============================================================================
7
+ $color-1: #D40511; // Express Red (primary)
8
+ $color-2: #FFCC00; // Express Yellow (brand)
9
+ $color-3: #ff6b00; // Orange (urgent)
10
+ $color-4: #00a651; // Green (delivered)
11
+ $color-5: #0066cc; // Blue (tracking)
12
+ $color-6: #6b3fa0; // Purple (premium)
13
+ $color-7: #8C8C8C; // Gray (neutral)
14
+ $color-8: #333333; // Dark (contrast)
15
+ $color-9: #00b4d8; // Cyan (info)
16
+
17
+ // ============================================================================
18
+ // EXPRESS COLOR PALETTE
19
+ // ============================================================================
20
+ $express-yellow: #FFCC00; // Primary yellow
21
+ $express-yellow-light: #FFE57F;
22
+ $express-yellow-lighter: #FFF0B2;
23
+
24
+ $express-red: #D40511; // Primary red
25
+ $express-red-hover: #F91320;
26
+ $express-red-dark: #98040C;
27
+
28
+ $express-black: #000000;
29
+ $express-dark: #333333;
30
+ $express-gray: #8C8C8C;
31
+ $express-gray-light: #CCCCCC;
32
+ $express-gray-lighter: #E5E5E5;
33
+ $express-gray-lightest: #EBEBEB;
34
+ $express-bg: #F2F2F2;
35
+
36
+ // ============================================================================
37
+ // BASE VARIABLES - Single Source of Truth
38
+ // ============================================================================
39
+ // All framework variables will derive from these
40
+
41
+ // Accent colors (Express uses red as accent)
42
+ $base-accent-color: $express-red;
43
+ $base-accent-color-hover: $express-red-hover;
44
+ $base-accent-color-active: color.adjust($express-red, $lightness: 15%);
45
+ $base-accent-color-light: rgba($express-red, 0.06);
46
+ $base-accent-color-light-hover: rgba($express-red, 0.10);
47
+
48
+ // Text colors
49
+ $base-text-color-1: $express-dark;
50
+ $base-text-color-2: $express-gray;
51
+ $base-text-color-3: $express-gray-light;
52
+ $base-text-color-4: $express-gray-lighter;
53
+ $base-text-color-on-accent: #ffffff;
54
+
55
+ // Surface colors
56
+ $base-surface-1: #ffffff; // Cards, modals
57
+ $base-surface-2: $express-bg; // Page background
58
+ $base-surface-3: $express-gray-lighter; // Dividers
59
+ $base-surface-inverse: $express-dark;
60
+ $base-overlay-bg: rgba(0, 0, 0, 0.6);
61
+ $base-shadow-color: rgba(0, 0, 0, 0.15);
62
+
63
+ // Border
64
+ $base-border-color: $express-gray-lighter;
65
+
66
+ // Input fields
67
+ $base-input-bg: #ffffff;
68
+ $base-input-color: $express-dark;
69
+ $base-input-border: 1px solid $express-gray-lighter;
70
+ $base-input-border-hover: 1px solid $express-gray;
71
+ $base-input-border-focus: 1px solid $express-red;
72
+ $base-input-placeholder-color: $express-gray-light;
73
+
74
+ // Dropdown/Popover
75
+ $base-dropdown-bg: #ffffff;
76
+ $base-dropdown-border: $express-gray-lighter;
77
+ $base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
78
+
79
+ // Tooltip
80
+ $base-tooltip-bg: $express-dark;
81
+ $base-tooltip-text-color: #ffffff;
82
+
83
+ // Contextual colors
84
+ $base-success-color: #10b981;
85
+ $base-success-color-hover: #059669;
86
+ $base-success-bg-light: rgba(16, 185, 129, 0.1);
87
+ $base-success-text: #065f46;
88
+ $base-text-on-success: #ffffff;
89
+
90
+ $base-danger-color: $express-red-dark;
91
+ $base-danger-color-hover: $express-red;
92
+ $base-danger-bg-light: rgba(180, 5, 14, 0.1);
93
+ $base-danger-text: #7f1d1d;
94
+ $base-text-on-danger: #ffffff;
95
+
96
+ $base-warning-color: #f59e0b;
97
+ $base-warning-color-hover: #d97706;
98
+ $base-warning-bg-light: rgba(245, 158, 11, 0.1);
99
+ $base-warning-text: #78350f;
100
+ $base-text-on-warning: #ffffff;
101
+
102
+ $base-info-color: #06b6d4;
103
+ $base-info-color-hover: #0891b2;
104
+ $base-info-bg-light: rgba(6, 182, 212, 0.1);
105
+ $base-info-text: #164e63;
106
+ $base-text-on-info: #ffffff;
107
+
108
+ // Interactive states
109
+ $base-focus-ring-color: rgba($express-red, 0.25);
110
+
111
+ // Typography
112
+ $base-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
113
+
114
+ // ============================================================================
115
+ // FRAMEWORK VARIABLES - Import and let them derive from base
116
+ // ============================================================================
117
+ @import '@keenmate/pure-admin-core/src/scss/variables/index';
118
+
119
+ // Layout overrides
120
+ $sidebar-width: 29rem; // 290px (10px base)
121
+
122
+ // Layout-specific overrides (Express brand identity)
123
+ $main-bg: #ffffff;
124
+ $subtle-bg: $express-bg;
125
+ $header-bg: $express-yellow; // Bold yellow header
126
+ $header-border-color: $express-yellow;
127
+ $sidebar-bg: $express-black; // Black sidebar
128
+ $sidebar-submenu-bg: #1a1a1a;
129
+ $sidebar-submenu-hover-bg: rgba(255, 255, 255, 0.1);
130
+ $sidebar-submenu-active-bg: $express-red;
131
+ $footer-bg: $express-yellow; // Bold yellow footer
132
+ $footer-border-color: $express-yellow;
133
+ $text-color-1: $base-text-color-1;
134
+ $text-color-2: $base-text-color-2;
135
+ $accent-hover: rgba($express-red, 0.12);
136
+ $accent-light: rgba($express-red, 0.06);
137
+
138
+ // Card colors
139
+ $card-bg: #ffffff;
140
+ $card-header-bg: $express-gray-lightest;
141
+ $card-footer-bg: #ffffff;
142
+ $card-tabs-bg: $express-gray-lighter;
143
+
144
+ // Input colors
145
+ $input-bg: $base-input-bg;
146
+ $input-border: $base-input-border;
147
+ $input-text: $base-input-color;
148
+
149
+ // Form focus colors
150
+ $input-focus-border-color: $base-accent-color;
151
+ $select-focus-border-color: $base-accent-color;
152
+ $textarea-focus-border-color: $base-accent-color;
153
+
154
+ // Checkbox colors
155
+ $checkbox-border-color-hover: $base-accent-color;
156
+ $checkbox-border-color-checked: $base-accent-color;
157
+ $checkbox-bg-checked: $base-accent-color;
158
+ $checkbox-bg-indeterminate: $base-accent-color;
159
+ $checkbox-focus-shadow: 0 0 0 2px $base-focus-ring-color;
160
+
161
+ // Table colors
162
+ $table-bg: #ffffff;
163
+ $table-header-bg: $express-gray-lightest;
164
+ $table-hover-bg: $express-yellow-lighter;
165
+ $table-stripe: $express-bg;
166
+
167
+ // Button colors - Red primary, yellow secondary
168
+ $btn-color-1-bg: $base-accent-color;
169
+ $btn-color-1-bg-hover: $base-accent-color-hover;
170
+ $btn-color-1-text: #ffffff;
171
+ $btn-bg-bg: $express-yellow;
172
+ $btn-bg-bg-hover: $express-yellow-light;
173
+ $btn-bg-text: $express-black;
174
+ $btn-light-bg: $express-gray-lightest;
175
+ $btn-light-text: $express-dark;
176
+ $btn-light-bg-hover: $express-gray-lighter;
177
+ $btn-dark-bg: $express-dark;
178
+ $btn-dark-bg-hover: $express-black;
179
+
180
+ // Validation shadow colors
181
+ $success-bg-light: $base-success-bg-light;
182
+ $warning-bg-light: $base-warning-bg-light;
183
+ $danger-bg-light: $base-danger-bg-light;
184
+
185
+ // Modal colors
186
+ $modal-overlay-bg: $base-overlay-bg;
187
+ $modal-content-bg: #ffffff;
188
+
189
+ // Profile name in header
190
+ $header-profile-name-color: $express-black; // Black text on yellow header
191
+
192
+ // Alert colors - Vibrant and punchy with semi-transparent backgrounds
193
+ $alert-success-text: $base-success-text;
194
+ $alert-success-bg: rgba(16, 185, 129, 0.68);
195
+ $alert-success-border: $base-success-color;
196
+
197
+ $alert-danger-text: $base-danger-text;
198
+ $alert-danger-bg: rgba(212, 5, 17, 0.58);
199
+ $alert-danger-border: $express-red;
200
+
201
+ $alert-warning-text: $base-warning-text;
202
+ $alert-warning-bg: rgba(255, 193, 7, 0.58);
203
+ $alert-warning-border: #ffc107;
204
+
205
+ $alert-info-text: $base-info-text;
206
+ $alert-info-bg: rgba(6, 182, 212, 0.58);
207
+ $alert-info-border: $base-info-color;
208
+
209
+ // ============================================================================
210
+ // FONTS - Fira Sans Condensed
211
+ // ============================================================================
212
+ /* cyrillic-ext */
213
+ @font-face {
214
+ font-family: 'Fira Sans Condensed';
215
+ font-style: normal;
216
+ font-weight: 400;
217
+ font-display: swap;
218
+ src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfvtrftV.woff2) format('woff2');
219
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
220
+ }
221
+ /* cyrillic */
222
+ @font-face {
223
+ font-family: 'Fira Sans Condensed';
224
+ font-style: normal;
225
+ font-weight: 400;
226
+ font-display: swap;
227
+ src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfLtrftV.woff2) format('woff2');
228
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
229
+ }
230
+ /* greek-ext */
231
+ @font-face {
232
+ font-family: 'Fira Sans Condensed';
233
+ font-style: normal;
234
+ font-weight: 400;
235
+ font-display: swap;
236
+ src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfrtrftV.woff2) format('woff2');
237
+ unicode-range: U+1F00-1FFF;
238
+ }
239
+ /* greek */
240
+ @font-face {
241
+ font-family: 'Fira Sans Condensed';
242
+ font-style: normal;
243
+ font-weight: 400;
244
+ font-display: swap;
245
+ src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfXtrftV.woff2) format('woff2');
246
+ unicode-range: U+0370-03FF;
247
+ }
248
+ /* vietnamese */
249
+ @font-face {
250
+ font-family: 'Fira Sans Condensed';
251
+ font-style: normal;
252
+ font-weight: 400;
253
+ font-display: swap;
254
+ src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfntrftV.woff2) format('woff2');
255
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
256
+ }
257
+ /* latin-ext */
258
+ @font-face {
259
+ font-family: 'Fira Sans Condensed';
260
+ font-style: normal;
261
+ font-weight: 400;
262
+ font-display: swap;
263
+ src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfjtrftV.woff2) format('woff2');
264
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
265
+ }
266
+ /* latin */
267
+ @font-face {
268
+ font-family: 'Fira Sans Condensed';
269
+ font-style: normal;
270
+ font-weight: 400;
271
+ font-display: swap;
272
+ src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfbtrQ.woff2) format('woff2');
273
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
274
+ }
275
+
276
+ // ============================================================================
277
+ // CORE IMPORTS
278
+ // ============================================================================
279
+ @import '@keenmate/pure-admin-core/src/scss/core';
280
+ @import '@keenmate/pure-admin-core/src/scss/utilities';
281
+ @import '@keenmate/pure-admin-core/src/scss/base-css-variables';
282
+
283
+ // ============================================================================
284
+ // EXPRESS-SPECIFIC STYLING OVERRIDES
285
+ // ============================================================================
286
+
287
+ // Header text visibility - black text on yellow header
288
+ .pa-header {
289
+ &__brand h1 {
290
+ color: $express-black !important;
291
+ font-weight: $font-weight-bold !important;
292
+ }
293
+
294
+ &__nav > ul > li > a {
295
+ color: $express-dark !important;
296
+
297
+ &:hover {
298
+ color: $express-red !important;
299
+ background-color: rgba(212, 5, 17, 0.08) !important;
300
+ }
301
+ }
302
+
303
+ &__title h2 {
304
+ color: $express-dark !important;
305
+ }
306
+
307
+ &__profile-btn {
308
+ &:hover {
309
+ background-color: rgba(212, 5, 17, 0.12) !important;
310
+ }
311
+ }
312
+ }
313
+
314
+ // Burger menu - black bars on yellow header
315
+ .burger-menu {
316
+ span {
317
+ background-color: $express-black !important;
318
+ }
319
+
320
+ &:hover span {
321
+ background-color: $express-red !important;
322
+ }
323
+ }
324
+
325
+ // Theme switcher in header
326
+ .theme-switcher {
327
+ label {
328
+ color: $express-dark !important;
329
+ }
330
+
331
+ select {
332
+ background-color: $express-yellow-light !important;
333
+ color: $express-black !important;
334
+ border-color: $express-gray-lighter !important;
335
+
336
+ &:focus {
337
+ border-color: $express-red !important;
338
+ }
339
+ }
340
+ }
341
+
342
+ // Footer text - black on yellow
343
+ .pa-layout__footer {
344
+ color: $express-dark !important;
345
+
346
+ p {
347
+ color: $express-dark !important;
348
+ }
349
+ }
350
+
351
+ // Sidebar - black background with white/light text
352
+ .pa-sidebar {
353
+ border-right-color: $express-black !important;
354
+
355
+ &__link,
356
+ &__toggle {
357
+ color: #ffffff !important;
358
+
359
+ &:hover {
360
+ background-color: rgba(255, 255, 255, 0.1) !important;
361
+ color: $express-yellow !important;
362
+ }
363
+ }
364
+
365
+ &__link--active {
366
+ background-color: $express-red !important;
367
+ border-right: 3px solid $express-yellow !important;
368
+ color: #ffffff !important;
369
+ }
370
+
371
+ &__chevron {
372
+ color: #ffffff !important;
373
+ }
374
+ }
375
+
376
+ // Primary button - bold red with white text
377
+ .pa-btn--color-1 {
378
+ font-weight: $font-weight-bold !important;
379
+ background-color: $express-red !important;
380
+ color: #ffffff !important;
381
+
382
+ &:hover {
383
+ background-color: $express-red-hover !important;
384
+ box-shadow: 0 2px 8px rgba(212, 5, 17, 0.3) !important;
385
+ }
386
+ }
387
+
388
+ // Secondary button - yellow with black text
389
+ .pa-btn--secondary {
390
+ background-color: $express-yellow !important;
391
+ color: $express-black !important;
392
+ border-color: $express-yellow !important;
393
+
394
+ &:hover {
395
+ background-color: $express-yellow-light !important;
396
+ border-color: $express-yellow-light !important;
397
+ box-shadow: 0 2px 8px rgba(255, 204, 0, 0.25) !important;
398
+ }
399
+ }
400
+
401
+ // Danger button - dark red
402
+ .pa-btn--danger {
403
+ font-weight: $font-weight-bold !important;
404
+
405
+ &:hover {
406
+ box-shadow: 0 2px 8px rgba(212, 5, 17, 0.3) !important;
407
+ }
408
+ }
409
+
410
+ // Profile panel tabs - improve visibility on yellow header
411
+ .pa-profile-panel__tabs {
412
+ .pa-tabs__item {
413
+ color: $express-dark !important;
414
+
415
+ &:hover {
416
+ color: $express-red !important;
417
+ background-color: rgba(212, 5, 17, 0.08) !important;
418
+ }
419
+
420
+ &--active {
421
+ color: $express-red !important;
422
+ border-bottom-color: $express-red !important;
423
+ }
424
+ }
425
+ }
426
+
427
+ // ============================================================================
428
+ // CSS VARIABLES - LIGHT MODE (Default - matches current Express)
429
+ // ============================================================================
430
+ :root, .pa-mode-light {
431
+ --page-loader-bg: rgba(255, 255, 255, 0.95);
432
+ --page-loader-spinner-border: #ccc;
433
+ --page-loader-spinner-accent: #{$express-red};
434
+
435
+ // Base CSS variables for web components
436
+ @include output-base-css-variables;
437
+
438
+ // Pure Admin theme CSS variables
439
+ @include output-pa-css-variables;
440
+
441
+ // Input group - light gray background for light mode
442
+ --pa-input-group-prepend-bg: #{$express-gray-lightest};
443
+ --pa-input-group-prepend-text: #{$express-dark};
444
+ --pa-input-group-append-bg: #{$express-gray-lightest};
445
+ --pa-input-group-append-text: #{$express-dark};
446
+
447
+ // Web component overrides (light mode)
448
+ --drp-dropdown-bg: #ffffff;
449
+ --drp-border-color: #{$express-gray-lighter};
450
+ --drp-primary-bg: #{$express-bg};
451
+ --drp-primary-bg-hover: #{$express-gray-lightest};
452
+ --drp-text-color-1: #{$express-dark};
453
+ --drp-text-bg: #{$express-gray};
454
+ --drp-button-bg: transparent;
455
+ --drp-button-color: #{$express-dark};
456
+ --drp-button-accent-text-color: #ffffff;
457
+ --drp-button-today-color: #{$express-red};
458
+ --drp-button-clear-color: #{$express-gray};
459
+ --drp-button-cancel-color: #{$express-gray};
460
+
461
+ --ms-dropdown-bg: #ffffff;
462
+ --ms-input-bg: #ffffff;
463
+ --ms-primary-bg: #{$express-bg};
464
+ --ms-primary-bg-hover: #{$express-gray-lightest};
465
+ --ms-border-color: #{$express-gray-lighter};
466
+ --ms-text-color-1: #{$express-dark};
467
+ --ms-text-color-2: #{$express-gray};
468
+ --ms-text-color-3: #{$express-gray-light};
469
+ --ms-text-color-4: #{$express-gray-lighter};
470
+ --ms-hint-bg: #{$express-gray-lightest};
471
+ --ms-actions-bg: #{$express-gray-lightest};
472
+ --ms-selected-popover-bg: #ffffff;
473
+ }
474
+
475
+ // ============================================================================
476
+ // CSS VARIABLES - DARK MODE
477
+ // ============================================================================
478
+ .pa-mode-dark {
479
+ // Express dark palette
480
+ $dark-bg: #1a1a1a;
481
+ $dark-card: #242424;
482
+ $dark-surface: #2a2a2a;
483
+ $dark-border: #3a3a3a;
484
+ $dark-text: #ffffff;
485
+ $dark-text-bg: #aaaaaa;
486
+
487
+ --page-loader-bg: rgba(0, 0, 0, 0.95);
488
+ --page-loader-spinner-border: #333;
489
+ --page-loader-spinner-accent: #{$express-yellow};
490
+
491
+ // Core colors - dark backgrounds
492
+ --pa-main-bg: #{$dark-bg};
493
+ --pa-page-bg: #{$dark-bg};
494
+ --pa-subtle-bg: #121212;
495
+
496
+ // Text colors - light text on dark bg
497
+ --pa-text-color-1: #{$dark-text};
498
+ --pa-text-color-2: #{$dark-text-bg};
499
+
500
+ // Keep Express brand colors
501
+ --pa-accent: #{$express-red};
502
+ --pa-accent-hover: rgba(212, 5, 17, 0.2);
503
+ --pa-accent-light: rgba(212, 5, 17, 0.15);
504
+
505
+ // Border
506
+ --pa-border-color: #{$dark-border};
507
+
508
+ // Header stays yellow (Express brand)
509
+ --pa-header-bg: #{$express-yellow};
510
+ --pa-header-border-color: #{$express-yellow};
511
+ --pa-header-text: #{$express-black};
512
+ --pa-header-text-secondary: #{$express-dark};
513
+ --pa-header-profile-name-color: #{$express-black};
514
+
515
+ // Sidebar stays black
516
+ --pa-sidebar-bg: #{$express-black};
517
+ --pa-sidebar-text: #ffffff;
518
+ --pa-sidebar-text-secondary: #ffffff;
519
+ --pa-sidebar-submenu-bg: #{$dark-bg};
520
+ --pa-sidebar-submenu-hover-bg: rgba(255, 255, 255, 0.1);
521
+ --pa-sidebar-submenu-active-bg: #{$express-red};
522
+
523
+ // Footer stays yellow
524
+ --pa-footer-bg: #{$express-yellow};
525
+ --pa-footer-border-color: #{$express-yellow};
526
+
527
+ // Cards - dark backgrounds
528
+ --pa-card-bg: #{$dark-card};
529
+ --pa-card-header-bg: #{$dark-surface};
530
+ --pa-card-footer-bg: #{$dark-surface};
531
+ --pa-card-tabs-bg: #{$dark-border};
532
+
533
+ // Inputs - dark backgrounds
534
+ --pa-input-bg: #{$dark-surface};
535
+ --pa-input-border: #{$dark-border};
536
+ --pa-input-text: #{$dark-text};
537
+ --pa-input-focus-border-color: #{$express-red};
538
+
539
+ // Input group - use muted yellow for Express branding
540
+ --pa-input-group-prepend-bg: rgba(255, 204, 0, 0.15);
541
+ --pa-input-group-prepend-text: #{$express-yellow};
542
+ --pa-input-group-append-bg: rgba(255, 204, 0, 0.15);
543
+ --pa-input-group-append-text: #{$express-yellow};
544
+
545
+ // Input group buttons
546
+ .pa-input-group__button {
547
+ background-color: rgba(255, 204, 0, 0.15) !important;
548
+ color: $express-yellow !important;
549
+ border-color: $dark-border !important;
550
+
551
+ &:hover {
552
+ background-color: rgba(255, 204, 0, 0.25) !important;
553
+ }
554
+ }
555
+
556
+ // Tables - dark backgrounds
557
+ --pa-table-bg: #{$dark-card};
558
+ --pa-table-header-bg: #{$dark-surface};
559
+ --pa-table-stripe: #{$dark-bg};
560
+ --pa-table-hover-bg: #{$dark-surface};
561
+
562
+ // Modals
563
+ --pa-modal-content-bg: #{$dark-card};
564
+ --pa-modal-overlay-bg: rgba(0, 0, 0, 0.8);
565
+
566
+ // Loader overlay
567
+ --pa-loader-overlay-bg: rgba(0, 0, 0, 0.7);
568
+
569
+ // Profile panel
570
+ --pa-profile-overlay-bg: rgba(0, 0, 0, 0.5);
571
+
572
+ // Tooltip/Popover
573
+ --pa-tooltip-bg: #{$dark-border};
574
+ --pa-tooltip-text: #{$dark-text};
575
+ --pa-popover-content-bg: #{$dark-card};
576
+
577
+ // Command palette
578
+ --pa-command-palette-backdrop-bg: rgba(0, 0, 0, 0.8);
579
+ --pa-command-palette-item-hover-bg: #{$dark-surface};
580
+ --pa-command-palette-item-active-bg: rgba(212, 5, 17, 0.2);
581
+ --pa-command-palette-highlight-bg: rgba(212, 5, 17, 0.3);
582
+
583
+ // Alerts - light text for dark mode visibility
584
+ --pa-alert-info-text: #ffffff;
585
+ --pa-alert-info-bg: rgba(6, 182, 212, 0.3);
586
+ --pa-alert-success-text: #ffffff;
587
+ --pa-alert-success-bg: rgba(16, 185, 129, 0.3);
588
+ --pa-alert-warning-text: #ffffff;
589
+ --pa-alert-warning-bg: rgba(255, 193, 7, 0.3);
590
+ --pa-alert-danger-text: #ffffff;
591
+ --pa-alert-danger-bg: rgba(212, 5, 17, 0.3);
592
+
593
+ // Code inside alerts - inherit alert text color
594
+ .pa-alert code {
595
+ color: inherit;
596
+ background-color: rgba(255, 255, 255, 0.2);
597
+ }
598
+
599
+ // Buttons - adjust for dark mode
600
+ --pa-btn-secondary-bg: #{$dark-border};
601
+ --pa-btn-secondary-bg-hover: #{$dark-surface};
602
+ --pa-btn-secondary-text: #{$dark-text};
603
+ --pa-btn-light-bg: #{$dark-surface};
604
+ --pa-btn-light-bg-hover: #{$dark-border};
605
+ --pa-btn-light-text: #{$dark-text};
606
+
607
+ // Semantic colors - slightly brighter for dark mode
608
+ --pa-success-bg: #10b981;
609
+ --pa-success-bg-light: rgba(16, 185, 129, 0.2);
610
+ --pa-warning-bg: #f59e0b;
611
+ --pa-warning-bg-light: rgba(245, 158, 11, 0.2);
612
+ --pa-danger-bg: #{$express-red-dark};
613
+ --pa-danger-bg-light: rgba(180, 5, 14, 0.2);
614
+ --pa-info-bg: #06b6d4;
615
+ --pa-info-bg-light: rgba(6, 182, 212, 0.2);
616
+
617
+ // Base variables for web components (dark mode)
618
+ // Semantic names (preferred)
619
+ --base-main-bg: #{$dark-card};
620
+ --base-page-bg: #{$dark-bg};
621
+ --base-subtle-bg: #{$dark-surface};
622
+ --base-hover-bg: #{$dark-surface};
623
+ --base-active-bg: #{$dark-border};
624
+ --base-disabled-bg: #{$dark-surface};
625
+ --base-elevated-bg: #{$dark-surface};
626
+ // Legacy aliases
627
+ --base-surface-1: #{$dark-card};
628
+ --base-surface-2: #{$dark-bg};
629
+ --base-surface-3: #{$dark-surface};
630
+ // Text colors
631
+ --base-text-color-1: #{$dark-text};
632
+ --base-text-color-2: #{$dark-text-bg};
633
+ --base-text-color-3: #888888;
634
+ --base-text-color-4: #666666;
635
+ // Accent colors - use yellow for better visibility on dark backgrounds
636
+ --base-accent-color: #{$express-yellow};
637
+ --base-accent-color-hover: #{$express-yellow-light};
638
+ --base-accent-color-active: #{$express-yellow-light};
639
+ --base-accent-color-light: rgba(255, 204, 0, 0.2);
640
+ --base-accent-color-light-hover: rgba(255, 204, 0, 0.3);
641
+ --base-border-color: #{$dark-border};
642
+ --base-input-bg: #{$dark-surface};
643
+ --base-input-color: #{$dark-text};
644
+ --base-input-border: 1px solid #{$dark-border};
645
+ --base-input-border-hover: 1px solid #{$express-red};
646
+ --base-input-border-focus: 1px solid #{$express-red};
647
+ --base-input-placeholder-color: #666666;
648
+ --base-dropdown-bg: #{$dark-card};
649
+ --base-dropdown-border: #{$dark-border};
650
+ --base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
651
+ --base-tooltip-bg: #{$dark-border};
652
+ --base-tooltip-text-color: #{$dark-text};
653
+
654
+ // Daterangepicker overrides (dark mode)
655
+ web-daterangepicker {
656
+ --drp-dropdown-bg: #{$dark-card};
657
+ --drp-border-color: #{$dark-border};
658
+ --drp-primary-bg: #{$dark-bg};
659
+ --drp-primary-bg-hover: #{$dark-surface};
660
+ --drp-text-color-1: #{$dark-text};
661
+ --drp-text-bg: #{$dark-text-bg};
662
+ --drp-button-bg: transparent;
663
+ --drp-button-color: #{$dark-text};
664
+ --drp-button-accent-text-color: #ffffff;
665
+ --drp-button-today-color: #{$express-red};
666
+ --drp-button-clear-color: #{$dark-text-bg};
667
+ --drp-button-cancel-color: #{$dark-text-bg};
668
+ }
669
+
670
+ // Multiselect overrides (dark mode)
671
+ web-multiselect {
672
+ --ms-dropdown-bg: #{$dark-card};
673
+ --ms-input-bg: #{$dark-surface};
674
+ --ms-primary-bg: #{$dark-bg};
675
+ --ms-primary-bg-hover: #{$dark-surface};
676
+ --ms-border-color: #{$dark-border};
677
+ --ms-text-color-1: #{$dark-text};
678
+ --ms-text-color-2: #{$dark-text-bg};
679
+ --ms-text-color-3: #888888;
680
+ --ms-text-color-4: #666666;
681
+ --ms-hint-bg: #{$dark-bg};
682
+ --ms-actions-bg: #{$dark-bg};
683
+ --ms-selected-popover-bg: #{$dark-card};
684
+ }
685
+ }
686
+
687
+ // ============================================================================
688
+ // DARK MODE COMPONENT ADJUSTMENTS
689
+ // ============================================================================
690
+ .pa-mode-dark {
691
+ // Footer text - keep dark on yellow background
692
+ .pa-layout__footer {
693
+ color: $express-dark !important;
694
+
695
+ p {
696
+ color: $express-dark !important;
697
+ }
698
+ }
699
+
700
+ // Primary alert - white text on red background for contrast
701
+ .pa-alert--color-1 {
702
+ color: #ffffff !important;
703
+ background-color: rgba($express-red, 0.25) !important;
704
+ border-color: rgba($express-red, 0.4) !important;
705
+ }
706
+
707
+ // Card shadows darker
708
+ .pa-card {
709
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
710
+ }
711
+
712
+ // Secondary button adjustments for dark mode
713
+ .pa-btn--secondary {
714
+ background-color: #3a3a3a !important;
715
+ color: #ffffff !important;
716
+ border-color: #4a4a4a !important;
717
+
718
+ &:hover {
719
+ background-color: #4a4a4a !important;
720
+ border-color: #5a5a5a !important;
721
+ }
722
+ }
723
+
724
+ // Outline secondary button
725
+ .pa-btn--outline-bg {
726
+ border-color: #5a5a5a !important;
727
+ color: #aaaaaa !important;
728
+
729
+ &:hover {
730
+ background-color: #3a3a3a !important;
731
+ color: #ffffff !important;
732
+ }
733
+ }
734
+
735
+ // Profile panel header - dark background needs light text
736
+ .pa-profile-panel__header {
737
+ background-color: #242424; // $dark-card
738
+
739
+ .pa-profile-panel__name {
740
+ color: #ffffff;
741
+ }
742
+
743
+ .pa-profile-panel__email {
744
+ color: #aaaaaa;
745
+ }
746
+ }
747
+ }