@keenmate/pure-admin-theme-express 1.0.0-rc06 → 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 +1701 -665
  2. package/package.json +9 -4
  3. package/src/scss/express.scss +747 -723
package/src/scss/express.scss CHANGED
@@ -1,723 +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
- // Web component overrides (light mode)
447
- --drp-dropdown-bg: #ffffff;
448
- --drp-border-color: #{$express-gray-lighter};
449
- --drp-primary-bg: #{$express-bg};
450
- --drp-primary-bg-hover: #{$express-gray-lightest};
451
- --drp-text-primary: #{$express-dark};
452
- --drp-text-secondary: #{$express-gray};
453
- --drp-button-bg: transparent;
454
- --drp-button-color: #{$express-dark};
455
- --drp-button-accent-text-color: #ffffff;
456
- --drp-button-today-color: #{$express-red};
457
- --drp-button-clear-color: #{$express-gray};
458
- --drp-button-cancel-color: #{$express-gray};
459
-
460
- --ms-dropdown-bg: #ffffff;
461
- --ms-input-bg: #ffffff;
462
- --ms-primary-bg: #{$express-bg};
463
- --ms-primary-bg-hover: #{$express-gray-lightest};
464
- --ms-border-color: #{$express-gray-lighter};
465
- --ms-text-color-1: #{$express-dark};
466
- --ms-text-color-2: #{$express-gray};
467
- --ms-text-color-3: #{$express-gray-light};
468
- --ms-text-color-4: #{$express-gray-lighter};
469
- --ms-hint-bg: #{$express-gray-lightest};
470
- --ms-actions-bg: #{$express-gray-lightest};
471
- --ms-selected-popover-bg: #ffffff;
472
- }
473
-
474
- // ============================================================================
475
- // CSS VARIABLES - DARK MODE
476
- // ============================================================================
477
- .pa-mode-dark {
478
- // Express dark palette
479
- $dark-bg: #1a1a1a;
480
- $dark-card: #242424;
481
- $dark-surface: #2a2a2a;
482
- $dark-border: #3a3a3a;
483
- $dark-text: #ffffff;
484
- $dark-text-secondary: #aaaaaa;
485
-
486
- --page-loader-bg: rgba(0, 0, 0, 0.95);
487
- --page-loader-spinner-border: #333;
488
- --page-loader-spinner-accent: #{$express-yellow};
489
-
490
- // Core colors - dark backgrounds
491
- --pa-primary-bg: #{$dark-bg};
492
- --pa-bg-secondary: #{$dark-bg};
493
- --pa-content-bg: #121212;
494
-
495
- // Text colors - light text on dark bg
496
- --pa-text-primary: #{$dark-text};
497
- --pa-text-secondary: #{$dark-text-secondary};
498
-
499
- // Keep Express brand colors
500
- --pa-accent: #{$express-red};
501
- --pa-accent-hover: rgba(212, 5, 17, 0.2);
502
- --pa-accent-light: rgba(212, 5, 17, 0.15);
503
-
504
- // Border
505
- --pa-border-color: #{$dark-border};
506
-
507
- // Header stays yellow (Express brand)
508
- --pa-header-bg: #{$express-yellow};
509
- --pa-header-border-color: #{$express-yellow};
510
- --pa-header-text: #{$express-black};
511
- --pa-header-text-secondary: #{$express-dark};
512
- --pa-header-profile-name-color: #{$express-black};
513
-
514
- // Sidebar stays black
515
- --pa-sidebar-bg: #{$express-black};
516
- --pa-sidebar-text: #ffffff;
517
- --pa-sidebar-text-secondary: #ffffff;
518
- --pa-sidebar-submenu-bg: #{$dark-bg};
519
- --pa-sidebar-submenu-hover-bg: rgba(255, 255, 255, 0.1);
520
- --pa-sidebar-submenu-active-bg: #{$express-red};
521
-
522
- // Footer stays yellow
523
- --pa-footer-bg: #{$express-yellow};
524
- --pa-footer-border-color: #{$express-yellow};
525
-
526
- // Cards - dark backgrounds
527
- --pa-card-bg: #{$dark-card};
528
- --pa-card-header-bg: #{$dark-surface};
529
- --pa-card-footer-bg: #{$dark-surface};
530
- --pa-card-tabs-bg: #{$dark-border};
531
-
532
- // Inputs - dark backgrounds
533
- --pa-input-bg: #{$dark-surface};
534
- --pa-input-border: #{$dark-border};
535
- --pa-input-text: #{$dark-text};
536
- --pa-input-focus-border-color: #{$express-red};
537
-
538
- // Input group - use muted yellow for Express branding
539
- --pa-input-group-prepend-bg: rgba(255, 204, 0, 0.15);
540
- --pa-input-group-prepend-text: #{$express-yellow};
541
- --pa-input-group-append-bg: rgba(255, 204, 0, 0.15);
542
- --pa-input-group-append-text: #{$express-yellow};
543
-
544
- // Input group buttons
545
- .pa-input-group__button {
546
- background-color: rgba(255, 204, 0, 0.15) !important;
547
- color: $express-yellow !important;
548
- border-color: $dark-border !important;
549
-
550
- &:hover {
551
- background-color: rgba(255, 204, 0, 0.25) !important;
552
- }
553
- }
554
-
555
- // Tables - dark backgrounds
556
- --pa-table-bg: #{$dark-card};
557
- --pa-table-header-bg: #{$dark-surface};
558
- --pa-table-stripe: #{$dark-bg};
559
- --pa-table-hover-bg: #{$dark-surface};
560
-
561
- // Modals
562
- --pa-modal-content-bg: #{$dark-card};
563
- --pa-modal-overlay-bg: rgba(0, 0, 0, 0.8);
564
-
565
- // Loader overlay
566
- --pa-loader-overlay-bg: rgba(0, 0, 0, 0.7);
567
-
568
- // Profile panel
569
- --pa-profile-overlay-bg: rgba(0, 0, 0, 0.5);
570
-
571
- // Tooltip/Popover
572
- --pa-tooltip-bg: #{$dark-border};
573
- --pa-tooltip-text: #{$dark-text};
574
- --pa-popover-content-bg: #{$dark-card};
575
-
576
- // Command palette
577
- --pa-command-palette-backdrop-bg: rgba(0, 0, 0, 0.8);
578
- --pa-command-palette-item-hover-bg: #{$dark-surface};
579
- --pa-command-palette-item-active-bg: rgba(212, 5, 17, 0.2);
580
- --pa-command-palette-highlight-bg: rgba(212, 5, 17, 0.3);
581
-
582
- // Alerts - light text for dark mode visibility
583
- --pa-alert-info-text: #ffffff;
584
- --pa-alert-info-bg: rgba(6, 182, 212, 0.3);
585
- --pa-alert-success-text: #ffffff;
586
- --pa-alert-success-bg: rgba(16, 185, 129, 0.3);
587
- --pa-alert-warning-text: #ffffff;
588
- --pa-alert-warning-bg: rgba(255, 193, 7, 0.3);
589
- --pa-alert-danger-text: #ffffff;
590
- --pa-alert-danger-bg: rgba(212, 5, 17, 0.3);
591
-
592
- // Code inside alerts - inherit alert text color
593
- .pa-alert code {
594
- color: inherit;
595
- background-color: rgba(255, 255, 255, 0.2);
596
- }
597
-
598
- // Buttons - adjust for dark mode
599
- --pa-btn-secondary-bg: #{$dark-border};
600
- --pa-btn-secondary-bg-hover: #{$dark-surface};
601
- --pa-btn-secondary-text: #{$dark-text};
602
- --pa-btn-light-bg: #{$dark-surface};
603
- --pa-btn-light-bg-hover: #{$dark-border};
604
- --pa-btn-light-text: #{$dark-text};
605
-
606
- // Semantic colors - slightly brighter for dark mode
607
- --pa-success-bg: #10b981;
608
- --pa-success-bg-light: rgba(16, 185, 129, 0.2);
609
- --pa-warning-bg: #f59e0b;
610
- --pa-warning-bg-light: rgba(245, 158, 11, 0.2);
611
- --pa-danger-bg: #{$express-red-dark};
612
- --pa-danger-bg-light: rgba(180, 5, 14, 0.2);
613
- --pa-info-bg: #06b6d4;
614
- --pa-info-bg-light: rgba(6, 182, 212, 0.2);
615
-
616
- // Base variables for web components (dark mode)
617
- --base-surface-1: #{$dark-card};
618
- --base-surface-2: #{$dark-bg};
619
- --base-surface-3: #{$dark-surface};
620
- --base-text-color-1: #{$dark-text};
621
- --base-text-color-2: #{$dark-text-secondary};
622
- --base-text-color-3: #888888;
623
- --base-text-color-4: #666666;
624
- // Accent colors - use yellow for better visibility on dark backgrounds
625
- --base-accent-color: #{$express-yellow};
626
- --base-accent-color-hover: #{$express-yellow-light};
627
- --base-accent-color-active: #{$express-yellow-light};
628
- --base-accent-color-light: rgba(255, 204, 0, 0.2);
629
- --base-accent-color-light-hover: rgba(255, 204, 0, 0.3);
630
- --base-border-color: #{$dark-border};
631
- --base-input-bg: #{$dark-surface};
632
- --base-input-color: #{$dark-text};
633
- --base-input-border: 1px solid #{$dark-border};
634
- --base-input-border-hover: 1px solid #{$express-red};
635
- --base-input-border-focus: 1px solid #{$express-red};
636
- --base-input-placeholder-color: #666666;
637
- --base-dropdown-bg: #{$dark-card};
638
- --base-dropdown-border: #{$dark-border};
639
- --base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
640
- --base-tooltip-bg: #{$dark-border};
641
- --base-tooltip-text-color: #{$dark-text};
642
-
643
- // Daterangepicker overrides (dark mode)
644
- web-daterangepicker {
645
- --drp-dropdown-bg: #{$dark-card};
646
- --drp-border-color: #{$dark-border};
647
- --drp-primary-bg: #{$dark-bg};
648
- --drp-primary-bg-hover: #{$dark-surface};
649
- --drp-text-primary: #{$dark-text};
650
- --drp-text-secondary: #{$dark-text-secondary};
651
- --drp-button-bg: transparent;
652
- --drp-button-color: #{$dark-text};
653
- --drp-button-accent-text-color: #ffffff;
654
- --drp-button-today-color: #{$express-red};
655
- --drp-button-clear-color: #{$dark-text-secondary};
656
- --drp-button-cancel-color: #{$dark-text-secondary};
657
- }
658
-
659
- // Multiselect overrides (dark mode)
660
- web-multiselect {
661
- --ms-dropdown-bg: #{$dark-card};
662
- --ms-input-bg: #{$dark-surface};
663
- --ms-primary-bg: #{$dark-bg};
664
- --ms-primary-bg-hover: #{$dark-surface};
665
- --ms-border-color: #{$dark-border};
666
- --ms-text-color-1: #{$dark-text};
667
- --ms-text-color-2: #{$dark-text-secondary};
668
- --ms-text-color-3: #888888;
669
- --ms-text-color-4: #666666;
670
- --ms-hint-bg: #{$dark-bg};
671
- --ms-actions-bg: #{$dark-bg};
672
- --ms-selected-popover-bg: #{$dark-card};
673
- }
674
- }
675
-
676
- // ============================================================================
677
- // DARK MODE COMPONENT ADJUSTMENTS
678
- // ============================================================================
679
- .pa-mode-dark {
680
- // Footer text - keep dark on yellow background
681
- .pa-layout__footer {
682
- color: $express-dark !important;
683
-
684
- p {
685
- color: $express-dark !important;
686
- }
687
- }
688
-
689
- // Primary alert - white text on red background for contrast
690
- .pa-alert--primary {
691
- color: #ffffff !important;
692
- background-color: rgba($express-red, 0.25) !important;
693
- border-color: rgba($express-red, 0.4) !important;
694
- }
695
-
696
- // Card shadows darker
697
- .pa-card {
698
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
699
- }
700
-
701
- // Secondary button adjustments for dark mode
702
- .pa-btn--secondary {
703
- background-color: #3a3a3a !important;
704
- color: #ffffff !important;
705
- border-color: #4a4a4a !important;
706
-
707
- &:hover {
708
- background-color: #4a4a4a !important;
709
- border-color: #5a5a5a !important;
710
- }
711
- }
712
-
713
- // Outline secondary button
714
- .pa-btn--outline-secondary {
715
- border-color: #5a5a5a !important;
716
- color: #aaaaaa !important;
717
-
718
- &:hover {
719
- background-color: #3a3a3a !important;
720
- color: #ffffff !important;
721
- }
722
- }
723
- }
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
+ }