@keenmate/pure-admin-theme-corporate 1.0.0-rc01 → 1.0.0-rc04
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/corporate.css +1501 -424
- package/package.json +3 -3
- package/src/scss/corporate.scss +134 -104
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@keenmate/pure-admin-theme-corporate",
|
|
3
|
-
"version": "1.0.0-
|
|
3
|
+
"version": "1.0.0-rc04",
|
|
4
4
|
"description": "Corporate theme for Pure Admin",
|
|
5
5
|
"style": "dist/corporate.css",
|
|
6
6
|
"exports": {
|
|
@@ -19,10 +19,10 @@
|
|
|
19
19
|
"author": "KeenMate",
|
|
20
20
|
"license": "MIT",
|
|
21
21
|
"peerDependencies": {
|
|
22
|
-
"@keenmate/pure-admin-core": "^1.0.0-
|
|
22
|
+
"@keenmate/pure-admin-core": "^1.0.0-rc04"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
|
-
"@keenmate/pure-admin-core": "^1.0.0-
|
|
25
|
+
"@keenmate/pure-admin-core": "^1.0.0-rc04",
|
|
26
26
|
"sass": "^1.70.0"
|
|
27
27
|
},
|
|
28
28
|
"publishConfig": {
|
package/src/scss/corporate.scss
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
/* Corporate Theme for Pure Admin Visual - Professional blue/gray palette */
|
|
2
2
|
@use 'sass:color';
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
// =============================================================================
|
|
5
|
+
// CORPORATE COLOR PALETTE
|
|
6
|
+
// =============================================================================
|
|
5
7
|
|
|
6
|
-
// Corporate color palette
|
|
7
8
|
$corporate-slate-50: #f8fafc;
|
|
8
9
|
$corporate-slate-100: #f1f5f9;
|
|
9
10
|
$corporate-slate-200: #e2e8f0;
|
|
@@ -15,7 +16,7 @@ $corporate-slate-700: #334155;
|
|
|
15
16
|
$corporate-slate-800: #1e293b;
|
|
16
17
|
$corporate-slate-900: #0f172a;
|
|
17
18
|
|
|
18
|
-
$corporate-blue-500: #0ea5e9;
|
|
19
|
+
$corporate-blue-500: #0ea5e9;
|
|
19
20
|
$corporate-blue-600: #0284c7;
|
|
20
21
|
$corporate-blue-700: #0369a1;
|
|
21
22
|
|
|
@@ -31,102 +32,144 @@ $corporate-gray-800: #1f2937;
|
|
|
31
32
|
$corporate-emerald-500: #10b981;
|
|
32
33
|
$corporate-emerald-600: #059669;
|
|
33
34
|
$corporate-amber-500: #f59e0b;
|
|
35
|
+
$corporate-amber-600: #d97706;
|
|
34
36
|
$corporate-red-500: #ef4444;
|
|
35
37
|
$corporate-red-600: #dc2626;
|
|
36
38
|
$corporate-cyan-500: #06b6d4;
|
|
37
39
|
$corporate-cyan-600: #0891b2;
|
|
38
40
|
|
|
39
|
-
//
|
|
40
|
-
|
|
41
|
-
|
|
41
|
+
// =============================================================================
|
|
42
|
+
// BASE VARIABLES - Single Source of Truth
|
|
43
|
+
// Set these and everything else derives automatically
|
|
44
|
+
// =============================================================================
|
|
45
|
+
|
|
46
|
+
// Accent colors (brand)
|
|
47
|
+
$base-accent-color: $corporate-blue-500;
|
|
48
|
+
$base-accent-color-hover: $corporate-blue-600;
|
|
49
|
+
$base-accent-color-active: $corporate-blue-700;
|
|
50
|
+
$base-accent-color-light: rgba($corporate-blue-500, 0.05);
|
|
51
|
+
$base-accent-color-light-hover: rgba($corporate-blue-500, 0.08);
|
|
52
|
+
|
|
53
|
+
// Text colors
|
|
54
|
+
$base-text-color-1: $corporate-slate-700;
|
|
55
|
+
$base-text-color-2: $corporate-slate-500;
|
|
56
|
+
$base-text-color-3: $corporate-slate-400;
|
|
57
|
+
$base-text-color-4: $corporate-slate-300;
|
|
58
|
+
$base-text-color-on-accent: #ffffff;
|
|
59
|
+
|
|
60
|
+
// Surface colors
|
|
61
|
+
$base-surface-1: #ffffff;
|
|
62
|
+
$base-surface-2: $corporate-slate-50;
|
|
63
|
+
$base-surface-3: $corporate-slate-200;
|
|
64
|
+
$base-surface-inverse: $corporate-slate-800;
|
|
65
|
+
$base-overlay-bg: rgba($corporate-slate-800, 0.5);
|
|
66
|
+
|
|
67
|
+
// Border
|
|
68
|
+
$base-border-color: $corporate-slate-200;
|
|
69
|
+
|
|
70
|
+
// Input
|
|
71
|
+
$base-input-bg: #ffffff;
|
|
72
|
+
$base-input-color: $corporate-slate-700;
|
|
73
|
+
$base-input-border: 1px solid $corporate-slate-200;
|
|
74
|
+
$base-input-border-hover: 1px solid $corporate-blue-500;
|
|
75
|
+
$base-input-border-focus: 1px solid $corporate-blue-500;
|
|
76
|
+
|
|
77
|
+
// Contextual colors
|
|
78
|
+
$base-success-color: $corporate-emerald-500;
|
|
79
|
+
$base-success-color-hover: $corporate-emerald-600;
|
|
80
|
+
$base-success-bg-light: rgba($corporate-emerald-500, 0.1);
|
|
81
|
+
$base-text-on-success: #ffffff;
|
|
82
|
+
|
|
83
|
+
$base-danger-color: $corporate-red-500;
|
|
84
|
+
$base-danger-color-hover: $corporate-red-600;
|
|
85
|
+
$base-danger-bg-light: rgba($corporate-red-500, 0.1);
|
|
86
|
+
$base-text-on-danger: #ffffff;
|
|
87
|
+
|
|
88
|
+
$base-warning-color: $corporate-amber-500;
|
|
89
|
+
$base-warning-color-hover: $corporate-amber-600;
|
|
90
|
+
$base-warning-bg-light: rgba($corporate-amber-500, 0.1);
|
|
91
|
+
$base-text-on-warning: #ffffff;
|
|
92
|
+
|
|
93
|
+
$base-info-color: $corporate-cyan-500;
|
|
94
|
+
$base-info-color-hover: $corporate-cyan-600;
|
|
95
|
+
$base-info-bg-light: rgba($corporate-cyan-500, 0.1);
|
|
96
|
+
$base-text-on-info: #ffffff;
|
|
97
|
+
|
|
98
|
+
// =============================================================================
|
|
99
|
+
// IMPORT CORE (with base variables already set)
|
|
100
|
+
// =============================================================================
|
|
101
|
+
|
|
102
|
+
@import '@keenmate/pure-admin-core/src/scss/variables/index';
|
|
42
103
|
|
|
43
|
-
//
|
|
104
|
+
// =============================================================================
|
|
105
|
+
// LAYOUT-SPECIFIC OVERRIDES
|
|
106
|
+
// These don't have base equivalents yet
|
|
107
|
+
// =============================================================================
|
|
108
|
+
|
|
109
|
+
$footer-height: 3.2rem;
|
|
110
|
+
$sidebar-width: 29rem;
|
|
111
|
+
|
|
112
|
+
// Layout colors (derived from base but with specific overrides)
|
|
44
113
|
$primary-bg: #f4f6f9;
|
|
45
114
|
$content-background-color: #f4f6f9;
|
|
46
115
|
$header-bg: $corporate-slate-800;
|
|
47
|
-
$header-border-color: $corporate-slate-200;
|
|
48
|
-
$header-profile-name-color: #ffffff;
|
|
116
|
+
$header-border-color: $corporate-slate-200;
|
|
117
|
+
$header-profile-name-color: #ffffff;
|
|
49
118
|
$sidebar-bg: $corporate-slate-50;
|
|
50
119
|
$footer-bg: $corporate-slate-800;
|
|
51
|
-
$border-color: $corporate-slate-200;
|
|
52
|
-
$text-primary: $corporate-slate-700;
|
|
53
|
-
$text-secondary: $corporate-slate-500;
|
|
54
|
-
$accent-color: $corporate-blue-500;
|
|
55
|
-
$accent-hover: rgba(59, 130, 246, 0.1);
|
|
56
|
-
$accent-light: rgba(59, 130, 246, 0.05);
|
|
57
|
-
|
|
58
|
-
// Sync base variables with theme colors
|
|
59
|
-
$base-accent-color: $accent-color;
|
|
60
|
-
$base-accent-color-hover: $corporate-blue-600;
|
|
61
|
-
$base-accent-color-active: $corporate-blue-700;
|
|
62
|
-
$base-accent-color-light: $accent-light;
|
|
63
|
-
$base-accent-color-light-hover: rgba($base-accent-color, 0.08);
|
|
64
|
-
|
|
65
|
-
// Form focus colors - must match accent color
|
|
66
|
-
$input-focus-border-color: $accent-color;
|
|
67
|
-
$select-focus-border-color: $accent-color;
|
|
68
|
-
$textarea-focus-border-color: $accent-color;
|
|
69
|
-
|
|
70
|
-
// Checkbox colors - must match accent color
|
|
71
|
-
$checkbox-border-color-hover: $accent-color;
|
|
72
|
-
$checkbox-border-color-checked: $accent-color;
|
|
73
|
-
$checkbox-bg-checked: $accent-color;
|
|
74
|
-
$checkbox-bg-indeterminate: $accent-color;
|
|
75
|
-
$checkbox-focus-shadow: 0 0 0 2px rgba($accent-color, 0.25);
|
|
76
120
|
|
|
77
121
|
// Card colors
|
|
78
|
-
$card-bg: #ffffff;
|
|
79
122
|
$card-header-bg: $corporate-slate-100;
|
|
80
123
|
$card-footer-bg: $corporate-slate-50;
|
|
81
124
|
$card-tabs-bg: $corporate-slate-200;
|
|
82
125
|
|
|
83
|
-
// Input
|
|
84
|
-
$input-bg: #ffffff;
|
|
126
|
+
// Input border (specific)
|
|
85
127
|
$input-border: $corporate-slate-200;
|
|
86
|
-
$input-text: $corporate-slate-700;
|
|
87
128
|
|
|
88
129
|
// Table colors
|
|
89
|
-
$table-bg: #ffffff;
|
|
90
130
|
$table-header-bg: $corporate-slate-100;
|
|
91
131
|
$table-hover-bg: $corporate-slate-50;
|
|
92
132
|
$table-stripe: $corporate-slate-50;
|
|
93
133
|
|
|
94
|
-
//
|
|
95
|
-
$btn-primary-bg: $corporate-blue-500;
|
|
96
|
-
$btn-primary-bg-hover: $corporate-blue-600;
|
|
134
|
+
// Secondary button (not derived from base)
|
|
97
135
|
$btn-secondary-bg: $corporate-gray-500;
|
|
98
136
|
$btn-secondary-bg-hover: $corporate-gray-600;
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
$btn-warning-bg: $corporate-amber-500;
|
|
102
|
-
$btn-warning-text: #ffffff;
|
|
103
|
-
$btn-danger-bg: $corporate-red-500;
|
|
104
|
-
$btn-danger-bg-hover: $corporate-red-600;
|
|
105
|
-
$btn-info-bg: $corporate-cyan-500;
|
|
106
|
-
$btn-info-bg-hover: $corporate-cyan-600;
|
|
137
|
+
|
|
138
|
+
// Light/dark buttons
|
|
107
139
|
$btn-light-bg: $corporate-gray-100;
|
|
108
140
|
$btn-light-text: $corporate-gray-700;
|
|
109
141
|
$btn-light-bg-hover: $corporate-gray-200;
|
|
110
142
|
$btn-dark-bg: $corporate-gray-700;
|
|
111
143
|
$btn-dark-bg-hover: $corporate-gray-800;
|
|
112
144
|
|
|
113
|
-
//
|
|
114
|
-
$
|
|
115
|
-
$success-bg-light: rgba(16, 185, 129, 0.1);
|
|
116
|
-
$warning-bg: $btn-warning-bg;
|
|
117
|
-
$warning-bg-light: rgba(245, 158, 11, 0.1);
|
|
118
|
-
$danger-bg: $btn-danger-bg;
|
|
119
|
-
$danger-bg-light: rgba(239, 68, 68, 0.1);
|
|
120
|
-
|
|
121
|
-
// Modal colors
|
|
122
|
-
$modal-overlay-bg: rgba(30, 41, 59, 0.5);
|
|
145
|
+
// Modal
|
|
146
|
+
$modal-overlay-bg: rgba($corporate-slate-800, 0.5);
|
|
123
147
|
$modal-content-bg: #ffffff;
|
|
124
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 rgba($base-accent-color, 0.25);
|
|
160
|
+
|
|
161
|
+
// =============================================================================
|
|
162
|
+
// IMPORT CORE STYLES
|
|
163
|
+
// =============================================================================
|
|
164
|
+
|
|
125
165
|
@import '@keenmate/pure-admin-core/src/scss/core';
|
|
126
166
|
@import '@keenmate/pure-admin-core/src/scss/utilities';
|
|
127
167
|
@import '@keenmate/pure-admin-core/src/scss/base-css-variables';
|
|
128
168
|
|
|
129
|
-
//
|
|
169
|
+
// =============================================================================
|
|
170
|
+
// CORPORATE-SPECIFIC STYLING OVERRIDES
|
|
171
|
+
// =============================================================================
|
|
172
|
+
|
|
130
173
|
// Header text visibility - light text on dark header
|
|
131
174
|
.pa-header {
|
|
132
175
|
&__brand h1 {
|
|
@@ -142,7 +185,6 @@ $modal-content-bg: #ffffff;
|
|
|
142
185
|
}
|
|
143
186
|
}
|
|
144
187
|
|
|
145
|
-
// Dropdown menu items - dark text on light background
|
|
146
188
|
&__dropdown li a {
|
|
147
189
|
color: $corporate-slate-700 !important;
|
|
148
190
|
|
|
@@ -193,18 +235,16 @@ $modal-content-bg: #ffffff;
|
|
|
193
235
|
}
|
|
194
236
|
}
|
|
195
237
|
|
|
196
|
-
//
|
|
238
|
+
// =============================================================================
|
|
197
239
|
// CSS VARIABLES - LIGHT MODE (Default)
|
|
198
|
-
//
|
|
240
|
+
// =============================================================================
|
|
199
241
|
:root, .pa-mode-light {
|
|
200
242
|
--page-loader-bg: rgba(255, 255, 255, 0.95);
|
|
201
243
|
--page-loader-spinner-border: #ccc;
|
|
202
244
|
--page-loader-spinner-accent: #{$corporate-blue-500};
|
|
203
245
|
|
|
204
|
-
//
|
|
246
|
+
// Output all CSS variables
|
|
205
247
|
@include output-base-css-variables;
|
|
206
|
-
|
|
207
|
-
// Pure Admin theme CSS variables for runtime theme switching
|
|
208
248
|
@include output-pa-css-variables;
|
|
209
249
|
|
|
210
250
|
// Web component overrides (light mode)
|
|
@@ -235,17 +275,17 @@ $modal-content-bg: #ffffff;
|
|
|
235
275
|
--ms-selected-popover-bg: #ffffff;
|
|
236
276
|
}
|
|
237
277
|
|
|
238
|
-
//
|
|
278
|
+
// =============================================================================
|
|
239
279
|
// CSS VARIABLES - DARK MODE
|
|
240
|
-
//
|
|
280
|
+
// =============================================================================
|
|
241
281
|
.pa-mode-dark {
|
|
242
282
|
// Corporate dark palette
|
|
243
|
-
$dark-bg: #0f172a;
|
|
244
|
-
$dark-card: #1e293b;
|
|
245
|
-
$dark-surface: #334155;
|
|
246
|
-
$dark-border: #475569;
|
|
247
|
-
$dark-text: #f1f5f9;
|
|
248
|
-
$dark-text-secondary: #94a3b8;
|
|
283
|
+
$dark-bg: #0f172a;
|
|
284
|
+
$dark-card: #1e293b;
|
|
285
|
+
$dark-surface: #334155;
|
|
286
|
+
$dark-border: #475569;
|
|
287
|
+
$dark-text: #f1f5f9;
|
|
288
|
+
$dark-text-secondary: #94a3b8;
|
|
249
289
|
|
|
250
290
|
--page-loader-bg: rgba(15, 23, 42, 0.95);
|
|
251
291
|
--page-loader-spinner-border: #334155;
|
|
@@ -268,14 +308,14 @@ $modal-content-bg: #ffffff;
|
|
|
268
308
|
// Border
|
|
269
309
|
--pa-border-color: #{$dark-border};
|
|
270
310
|
|
|
271
|
-
// Header
|
|
311
|
+
// Header
|
|
272
312
|
--pa-header-bg: #{$dark-card};
|
|
273
313
|
--pa-header-border-color: #{$dark-border};
|
|
274
314
|
--pa-header-text: #{$dark-text};
|
|
275
315
|
--pa-header-text-secondary: #{$dark-text-secondary};
|
|
276
316
|
--pa-header-profile-name-color: #{$dark-text};
|
|
277
317
|
|
|
278
|
-
// Sidebar
|
|
318
|
+
// Sidebar
|
|
279
319
|
--pa-sidebar-bg: #{$dark-card};
|
|
280
320
|
--pa-sidebar-text: #{$dark-text};
|
|
281
321
|
--pa-sidebar-text-secondary: #{$dark-text-secondary};
|
|
@@ -283,29 +323,28 @@ $modal-content-bg: #ffffff;
|
|
|
283
323
|
--pa-sidebar-submenu-hover-bg: rgba(14, 165, 233, 0.1);
|
|
284
324
|
--pa-sidebar-submenu-active-bg: #{$corporate-blue-600};
|
|
285
325
|
|
|
286
|
-
// Footer
|
|
326
|
+
// Footer
|
|
287
327
|
--pa-footer-bg: #{$dark-card};
|
|
288
328
|
--pa-footer-border-color: #{$dark-border};
|
|
289
329
|
|
|
290
|
-
// Cards
|
|
330
|
+
// Cards
|
|
291
331
|
--pa-card-bg: #{$dark-card};
|
|
292
332
|
--pa-card-header-bg: #{$dark-surface};
|
|
293
333
|
--pa-card-footer-bg: #{$dark-surface};
|
|
294
334
|
--pa-card-tabs-bg: #{$dark-border};
|
|
295
335
|
|
|
296
|
-
// Inputs
|
|
336
|
+
// Inputs
|
|
297
337
|
--pa-input-bg: #{$dark-surface};
|
|
298
338
|
--pa-input-border: #{$dark-border};
|
|
299
339
|
--pa-input-text: #{$dark-text};
|
|
300
340
|
--pa-input-focus-border-color: #{$corporate-blue-500};
|
|
301
341
|
|
|
302
|
-
// Input group
|
|
342
|
+
// Input group
|
|
303
343
|
--pa-input-group-prepend-bg: rgba(14, 165, 233, 0.15);
|
|
304
344
|
--pa-input-group-prepend-text: #{$corporate-blue-500};
|
|
305
345
|
--pa-input-group-append-bg: rgba(14, 165, 233, 0.15);
|
|
306
346
|
--pa-input-group-append-text: #{$corporate-blue-500};
|
|
307
347
|
|
|
308
|
-
// Input group buttons
|
|
309
348
|
.pa-input-group__button {
|
|
310
349
|
background-color: rgba(14, 165, 233, 0.15) !important;
|
|
311
350
|
color: $corporate-blue-500 !important;
|
|
@@ -316,7 +355,7 @@ $modal-content-bg: #ffffff;
|
|
|
316
355
|
}
|
|
317
356
|
}
|
|
318
357
|
|
|
319
|
-
// Tables
|
|
358
|
+
// Tables
|
|
320
359
|
--pa-table-bg: #{$dark-card};
|
|
321
360
|
--pa-table-header-bg: #{$dark-surface};
|
|
322
361
|
--pa-table-stripe: #{$dark-bg};
|
|
@@ -326,10 +365,8 @@ $modal-content-bg: #ffffff;
|
|
|
326
365
|
--pa-modal-content-bg: #{$dark-card};
|
|
327
366
|
--pa-modal-overlay-bg: rgba(0, 0, 0, 0.8);
|
|
328
367
|
|
|
329
|
-
// Loader
|
|
368
|
+
// Loader/Profile
|
|
330
369
|
--pa-loader-overlay-bg: rgba(0, 0, 0, 0.7);
|
|
331
|
-
|
|
332
|
-
// Profile panel
|
|
333
370
|
--pa-profile-overlay-bg: rgba(0, 0, 0, 0.5);
|
|
334
371
|
|
|
335
372
|
// Tooltip/Popover
|
|
@@ -343,7 +380,7 @@ $modal-content-bg: #ffffff;
|
|
|
343
380
|
--pa-command-palette-item-active-bg: rgba(14, 165, 233, 0.2);
|
|
344
381
|
--pa-command-palette-highlight-bg: rgba(14, 165, 233, 0.3);
|
|
345
382
|
|
|
346
|
-
// Alerts
|
|
383
|
+
// Alerts
|
|
347
384
|
--pa-alert-info-text: #ffffff;
|
|
348
385
|
--pa-alert-info-bg: rgba(6, 182, 212, 0.3);
|
|
349
386
|
--pa-alert-success-text: #ffffff;
|
|
@@ -353,13 +390,12 @@ $modal-content-bg: #ffffff;
|
|
|
353
390
|
--pa-alert-danger-text: #ffffff;
|
|
354
391
|
--pa-alert-danger-bg: rgba(239, 68, 68, 0.3);
|
|
355
392
|
|
|
356
|
-
// Code inside alerts - inherit alert text color
|
|
357
393
|
.pa-alert code {
|
|
358
394
|
color: inherit;
|
|
359
395
|
background-color: rgba(255, 255, 255, 0.2);
|
|
360
396
|
}
|
|
361
397
|
|
|
362
|
-
// Buttons
|
|
398
|
+
// Buttons
|
|
363
399
|
--pa-btn-secondary-bg: #{$dark-border};
|
|
364
400
|
--pa-btn-secondary-bg-hover: #{$dark-surface};
|
|
365
401
|
--pa-btn-secondary-text: #{$dark-text};
|
|
@@ -367,7 +403,7 @@ $modal-content-bg: #ffffff;
|
|
|
367
403
|
--pa-btn-light-bg-hover: #{$dark-border};
|
|
368
404
|
--pa-btn-light-text: #{$dark-text};
|
|
369
405
|
|
|
370
|
-
// Semantic colors
|
|
406
|
+
// Semantic colors
|
|
371
407
|
--pa-success-bg: #{$corporate-emerald-500};
|
|
372
408
|
--pa-success-bg-light: rgba(16, 185, 129, 0.2);
|
|
373
409
|
--pa-warning-bg: #{$corporate-amber-500};
|
|
@@ -378,16 +414,14 @@ $modal-content-bg: #ffffff;
|
|
|
378
414
|
--pa-info-bg-light: rgba(6, 182, 212, 0.2);
|
|
379
415
|
|
|
380
416
|
// Base variables for web components (dark mode)
|
|
417
|
+
--base-surface-1: #{$dark-card};
|
|
418
|
+
--base-surface-2: #{$dark-bg};
|
|
419
|
+
--base-surface-3: #{$dark-surface};
|
|
420
|
+
--base-surface-inverse: #{$dark-text};
|
|
381
421
|
--base-primary-bg: #{$dark-bg};
|
|
382
422
|
--base-primary-bg-hover: #{$dark-surface};
|
|
383
423
|
--base-text-color-1: #{$dark-text};
|
|
384
424
|
--base-text-color-2: #{$dark-text-secondary};
|
|
385
|
-
// Accent colors - use blue for Corporate branding
|
|
386
|
-
--base-accent-color: #{$corporate-blue-500};
|
|
387
|
-
--base-accent-color-hover: #{$corporate-blue-600};
|
|
388
|
-
--base-accent-color-active: #{$corporate-blue-700};
|
|
389
|
-
--base-accent-color-light: rgba(14, 165, 233, 0.2);
|
|
390
|
-
--base-accent-color-light-hover: rgba(14, 165, 233, 0.3);
|
|
391
425
|
--base-text-color-3: #64748b;
|
|
392
426
|
--base-text-color-4: #475569;
|
|
393
427
|
--base-border-color: #{$dark-border};
|
|
@@ -437,26 +471,23 @@ $modal-content-bg: #ffffff;
|
|
|
437
471
|
}
|
|
438
472
|
}
|
|
439
473
|
|
|
440
|
-
//
|
|
474
|
+
// =============================================================================
|
|
441
475
|
// DARK MODE COMPONENT ADJUSTMENTS
|
|
442
|
-
//
|
|
476
|
+
// =============================================================================
|
|
443
477
|
.pa-mode-dark {
|
|
444
|
-
// Header dropdown - light text on dark background
|
|
445
478
|
.pa-header__dropdown li a {
|
|
446
479
|
color: #f1f5f9 !important;
|
|
447
480
|
|
|
448
481
|
&:hover {
|
|
449
|
-
color: #38bdf8 !important;
|
|
482
|
+
color: #38bdf8 !important;
|
|
450
483
|
background-color: rgba($corporate-blue-500, 0.2) !important;
|
|
451
484
|
}
|
|
452
485
|
}
|
|
453
486
|
|
|
454
|
-
// Card shadows darker
|
|
455
487
|
.pa-card {
|
|
456
488
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
457
489
|
}
|
|
458
490
|
|
|
459
|
-
// Secondary button adjustments for dark mode
|
|
460
491
|
.pa-btn--secondary {
|
|
461
492
|
background-color: #475569 !important;
|
|
462
493
|
color: #f1f5f9 !important;
|
|
@@ -468,7 +499,6 @@ $modal-content-bg: #ffffff;
|
|
|
468
499
|
}
|
|
469
500
|
}
|
|
470
501
|
|
|
471
|
-
// Outline secondary button
|
|
472
502
|
.pa-btn--outline-secondary {
|
|
473
503
|
border-color: #64748b !important;
|
|
474
504
|
color: #94a3b8 !important;
|
|
@@ -478,4 +508,4 @@ $modal-content-bg: #ffffff;
|
|
|
478
508
|
color: #f1f5f9 !important;
|
|
479
509
|
}
|
|
480
510
|
}
|
|
481
|
-
}
|
|
511
|
+
}
|