@keenmate/pure-admin-theme-corporate 1.0.0-rc01
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/corporate.css +13077 -0
- package/package.json +31 -0
- package/src/scss/corporate.scss +481 -0
package/package.json
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@keenmate/pure-admin-theme-corporate",
|
|
3
|
+
"version": "1.0.0-rc01",
|
|
4
|
+
"description": "Corporate theme for Pure Admin",
|
|
5
|
+
"style": "dist/corporate.css",
|
|
6
|
+
"exports": {
|
|
7
|
+
".": "./dist/corporate.css",
|
|
8
|
+
"./scss": "./src/scss/corporate.scss"
|
|
9
|
+
},
|
|
10
|
+
"files": [
|
|
11
|
+
"dist/",
|
|
12
|
+
"src/scss/"
|
|
13
|
+
],
|
|
14
|
+
"scripts": {
|
|
15
|
+
"build": "sass src/scss:dist --no-source-map --silence-deprecation=import --load-path=../../node_modules",
|
|
16
|
+
"prepublishOnly": "npm run build"
|
|
17
|
+
},
|
|
18
|
+
"keywords": ["pure-admin", "theme", "corporate", "css"],
|
|
19
|
+
"author": "KeenMate",
|
|
20
|
+
"license": "MIT",
|
|
21
|
+
"peerDependencies": {
|
|
22
|
+
"@keenmate/pure-admin-core": "^1.0.0-rc01"
|
|
23
|
+
},
|
|
24
|
+
"devDependencies": {
|
|
25
|
+
"@keenmate/pure-admin-core": "^1.0.0-rc01",
|
|
26
|
+
"sass": "^1.70.0"
|
|
27
|
+
},
|
|
28
|
+
"publishConfig": {
|
|
29
|
+
"access": "public"
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -0,0 +1,481 @@
|
|
|
1
|
+
/* Corporate Theme for Pure Admin Visual - Professional blue/gray palette */
|
|
2
|
+
@use 'sass:color';
|
|
3
|
+
|
|
4
|
+
@import '@keenmate/pure-admin-core/src/scss/variables/index';
|
|
5
|
+
|
|
6
|
+
// Corporate color palette
|
|
7
|
+
$corporate-slate-50: #f8fafc;
|
|
8
|
+
$corporate-slate-100: #f1f5f9;
|
|
9
|
+
$corporate-slate-200: #e2e8f0;
|
|
10
|
+
$corporate-slate-300: #cbd5e1;
|
|
11
|
+
$corporate-slate-400: #94a3b8;
|
|
12
|
+
$corporate-slate-500: #64748b;
|
|
13
|
+
$corporate-slate-600: #475569;
|
|
14
|
+
$corporate-slate-700: #334155;
|
|
15
|
+
$corporate-slate-800: #1e293b;
|
|
16
|
+
$corporate-slate-900: #0f172a;
|
|
17
|
+
|
|
18
|
+
$corporate-blue-500: #0ea5e9; // Brighter, more vibrant blue
|
|
19
|
+
$corporate-blue-600: #0284c7;
|
|
20
|
+
$corporate-blue-700: #0369a1;
|
|
21
|
+
|
|
22
|
+
$corporate-gray-50: #f9fafb;
|
|
23
|
+
$corporate-gray-100: #f3f4f6;
|
|
24
|
+
$corporate-gray-200: #e5e7eb;
|
|
25
|
+
$corporate-gray-400: #9ca3af;
|
|
26
|
+
$corporate-gray-500: #6b7280;
|
|
27
|
+
$corporate-gray-600: #4b5563;
|
|
28
|
+
$corporate-gray-700: #374151;
|
|
29
|
+
$corporate-gray-800: #1f2937;
|
|
30
|
+
|
|
31
|
+
$corporate-emerald-500: #10b981;
|
|
32
|
+
$corporate-emerald-600: #059669;
|
|
33
|
+
$corporate-amber-500: #f59e0b;
|
|
34
|
+
$corporate-red-500: #ef4444;
|
|
35
|
+
$corporate-red-600: #dc2626;
|
|
36
|
+
$corporate-cyan-500: #06b6d4;
|
|
37
|
+
$corporate-cyan-600: #0891b2;
|
|
38
|
+
|
|
39
|
+
// Layout overrides
|
|
40
|
+
$footer-height: 3.2rem; // 32px (10px base) - was 2rem at 16px base
|
|
41
|
+
$sidebar-width: 29rem; // 290px (10px base)
|
|
42
|
+
|
|
43
|
+
// Corporate theme color overrides
|
|
44
|
+
$primary-bg: #f4f6f9;
|
|
45
|
+
$content-background-color: #f4f6f9;
|
|
46
|
+
$header-bg: $corporate-slate-800;
|
|
47
|
+
$header-border-color: $corporate-slate-200; // Match sidebar border color
|
|
48
|
+
$header-profile-name-color: #ffffff; // Light text on dark header
|
|
49
|
+
$sidebar-bg: $corporate-slate-50;
|
|
50
|
+
$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
|
+
|
|
77
|
+
// Card colors
|
|
78
|
+
$card-bg: #ffffff;
|
|
79
|
+
$card-header-bg: $corporate-slate-100;
|
|
80
|
+
$card-footer-bg: $corporate-slate-50;
|
|
81
|
+
$card-tabs-bg: $corporate-slate-200;
|
|
82
|
+
|
|
83
|
+
// Input colors
|
|
84
|
+
$input-bg: #ffffff;
|
|
85
|
+
$input-border: $corporate-slate-200;
|
|
86
|
+
$input-text: $corporate-slate-700;
|
|
87
|
+
|
|
88
|
+
// Table colors
|
|
89
|
+
$table-bg: #ffffff;
|
|
90
|
+
$table-header-bg: $corporate-slate-100;
|
|
91
|
+
$table-hover-bg: $corporate-slate-50;
|
|
92
|
+
$table-stripe: $corporate-slate-50;
|
|
93
|
+
|
|
94
|
+
// Button colors - professional blue/gray palette
|
|
95
|
+
$btn-primary-bg: $corporate-blue-500;
|
|
96
|
+
$btn-primary-bg-hover: $corporate-blue-600;
|
|
97
|
+
$btn-secondary-bg: $corporate-gray-500;
|
|
98
|
+
$btn-secondary-bg-hover: $corporate-gray-600;
|
|
99
|
+
$btn-success-bg: $corporate-emerald-500;
|
|
100
|
+
$btn-success-bg-hover: $corporate-emerald-600;
|
|
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;
|
|
107
|
+
$btn-light-bg: $corporate-gray-100;
|
|
108
|
+
$btn-light-text: $corporate-gray-700;
|
|
109
|
+
$btn-light-bg-hover: $corporate-gray-200;
|
|
110
|
+
$btn-dark-bg: $corporate-gray-700;
|
|
111
|
+
$btn-dark-bg-hover: $corporate-gray-800;
|
|
112
|
+
|
|
113
|
+
// Validation shadow colors - match button colors
|
|
114
|
+
$success-bg: $btn-success-bg;
|
|
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);
|
|
123
|
+
$modal-content-bg: #ffffff;
|
|
124
|
+
|
|
125
|
+
@import '@keenmate/pure-admin-core/src/scss/core';
|
|
126
|
+
@import '@keenmate/pure-admin-core/src/scss/utilities';
|
|
127
|
+
@import '@keenmate/pure-admin-core/src/scss/base-css-variables';
|
|
128
|
+
|
|
129
|
+
// Corporate-specific styling overrides
|
|
130
|
+
// Header text visibility - light text on dark header
|
|
131
|
+
.pa-header {
|
|
132
|
+
&__brand h1 {
|
|
133
|
+
color: #ffffff !important;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
&__nav > ul > li > a {
|
|
137
|
+
color: $corporate-slate-300 !important;
|
|
138
|
+
|
|
139
|
+
&:hover {
|
|
140
|
+
color: $corporate-blue-500 !important;
|
|
141
|
+
background-color: rgba($corporate-blue-500, 0.1) !important;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
// Dropdown menu items - dark text on light background
|
|
146
|
+
&__dropdown li a {
|
|
147
|
+
color: $corporate-slate-700 !important;
|
|
148
|
+
|
|
149
|
+
&:hover {
|
|
150
|
+
color: $corporate-blue-500 !important;
|
|
151
|
+
background-color: rgba($corporate-blue-500, 0.1) !important;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
&__title h2 {
|
|
156
|
+
color: $corporate-slate-300 !important;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
&__profile-btn {
|
|
160
|
+
color: #ffffff !important;
|
|
161
|
+
|
|
162
|
+
&:hover {
|
|
163
|
+
background-color: rgba($corporate-blue-500, 0.2) !important;
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
// Burger menu - light bars on dark header
|
|
169
|
+
.burger-menu {
|
|
170
|
+
span {
|
|
171
|
+
background-color: #ffffff !important;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
&:hover span {
|
|
175
|
+
background-color: $corporate-blue-500 !important;
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
// Theme switcher in header
|
|
180
|
+
.theme-switcher {
|
|
181
|
+
label {
|
|
182
|
+
color: $corporate-slate-300 !important;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
select {
|
|
186
|
+
background-color: $corporate-slate-700 !important;
|
|
187
|
+
color: #ffffff !important;
|
|
188
|
+
border-color: $corporate-slate-600 !important;
|
|
189
|
+
|
|
190
|
+
&:focus {
|
|
191
|
+
border-color: $corporate-blue-500 !important;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
// ============================================================================
|
|
197
|
+
// CSS VARIABLES - LIGHT MODE (Default)
|
|
198
|
+
// ============================================================================
|
|
199
|
+
:root, .pa-mode-light {
|
|
200
|
+
--page-loader-bg: rgba(255, 255, 255, 0.95);
|
|
201
|
+
--page-loader-spinner-border: #ccc;
|
|
202
|
+
--page-loader-spinner-accent: #{$corporate-blue-500};
|
|
203
|
+
|
|
204
|
+
// Base CSS variables for web components (daterangepicker, multiselect, etc.)
|
|
205
|
+
@include output-base-css-variables;
|
|
206
|
+
|
|
207
|
+
// Pure Admin theme CSS variables for runtime theme switching
|
|
208
|
+
@include output-pa-css-variables;
|
|
209
|
+
|
|
210
|
+
// Web component overrides (light mode)
|
|
211
|
+
--drp-dropdown-bg: #ffffff;
|
|
212
|
+
--drp-border-color: #{$corporate-slate-200};
|
|
213
|
+
--drp-primary-bg: #{$corporate-slate-50};
|
|
214
|
+
--drp-primary-bg-hover: #{$corporate-slate-100};
|
|
215
|
+
--drp-text-primary: #{$corporate-slate-700};
|
|
216
|
+
--drp-text-secondary: #{$corporate-slate-500};
|
|
217
|
+
--drp-button-bg: transparent;
|
|
218
|
+
--drp-button-color: #{$corporate-slate-700};
|
|
219
|
+
--drp-button-accent-text-color: #ffffff;
|
|
220
|
+
--drp-button-today-color: #{$corporate-blue-500};
|
|
221
|
+
--drp-button-clear-color: #{$corporate-slate-500};
|
|
222
|
+
--drp-button-cancel-color: #{$corporate-slate-500};
|
|
223
|
+
|
|
224
|
+
--ms-dropdown-bg: #ffffff;
|
|
225
|
+
--ms-input-bg: #ffffff;
|
|
226
|
+
--ms-primary-bg: #{$corporate-slate-50};
|
|
227
|
+
--ms-primary-bg-hover: #{$corporate-slate-100};
|
|
228
|
+
--ms-border-color: #{$corporate-slate-200};
|
|
229
|
+
--ms-text-color-1: #{$corporate-slate-700};
|
|
230
|
+
--ms-text-color-2: #{$corporate-slate-500};
|
|
231
|
+
--ms-text-color-3: #{$corporate-slate-400};
|
|
232
|
+
--ms-text-color-4: #{$corporate-slate-300};
|
|
233
|
+
--ms-hint-bg: #{$corporate-slate-100};
|
|
234
|
+
--ms-actions-bg: #{$corporate-slate-100};
|
|
235
|
+
--ms-selected-popover-bg: #ffffff;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
// ============================================================================
|
|
239
|
+
// CSS VARIABLES - DARK MODE
|
|
240
|
+
// ============================================================================
|
|
241
|
+
.pa-mode-dark {
|
|
242
|
+
// Corporate dark palette
|
|
243
|
+
$dark-bg: #0f172a; // slate-900
|
|
244
|
+
$dark-card: #1e293b; // slate-800
|
|
245
|
+
$dark-surface: #334155; // slate-700
|
|
246
|
+
$dark-border: #475569; // slate-600
|
|
247
|
+
$dark-text: #f1f5f9; // slate-100
|
|
248
|
+
$dark-text-secondary: #94a3b8; // slate-400
|
|
249
|
+
|
|
250
|
+
--page-loader-bg: rgba(15, 23, 42, 0.95);
|
|
251
|
+
--page-loader-spinner-border: #334155;
|
|
252
|
+
--page-loader-spinner-accent: #{$corporate-blue-500};
|
|
253
|
+
|
|
254
|
+
// Core colors - dark backgrounds
|
|
255
|
+
--pa-primary-bg: #{$dark-bg};
|
|
256
|
+
--pa-bg-secondary: #{$dark-bg};
|
|
257
|
+
--pa-content-bg: #0a0f1a;
|
|
258
|
+
|
|
259
|
+
// Text colors - light text on dark bg
|
|
260
|
+
--pa-text-primary: #{$dark-text};
|
|
261
|
+
--pa-text-secondary: #{$dark-text-secondary};
|
|
262
|
+
|
|
263
|
+
// Keep Corporate brand colors
|
|
264
|
+
--pa-accent: #{$corporate-blue-500};
|
|
265
|
+
--pa-accent-hover: rgba(14, 165, 233, 0.2);
|
|
266
|
+
--pa-accent-light: rgba(14, 165, 233, 0.15);
|
|
267
|
+
|
|
268
|
+
// Border
|
|
269
|
+
--pa-border-color: #{$dark-border};
|
|
270
|
+
|
|
271
|
+
// Header - stays dark slate
|
|
272
|
+
--pa-header-bg: #{$dark-card};
|
|
273
|
+
--pa-header-border-color: #{$dark-border};
|
|
274
|
+
--pa-header-text: #{$dark-text};
|
|
275
|
+
--pa-header-text-secondary: #{$dark-text-secondary};
|
|
276
|
+
--pa-header-profile-name-color: #{$dark-text};
|
|
277
|
+
|
|
278
|
+
// Sidebar - dark background
|
|
279
|
+
--pa-sidebar-bg: #{$dark-card};
|
|
280
|
+
--pa-sidebar-text: #{$dark-text};
|
|
281
|
+
--pa-sidebar-text-secondary: #{$dark-text-secondary};
|
|
282
|
+
--pa-sidebar-submenu-bg: #{$dark-bg};
|
|
283
|
+
--pa-sidebar-submenu-hover-bg: rgba(14, 165, 233, 0.1);
|
|
284
|
+
--pa-sidebar-submenu-active-bg: #{$corporate-blue-600};
|
|
285
|
+
|
|
286
|
+
// Footer - dark background
|
|
287
|
+
--pa-footer-bg: #{$dark-card};
|
|
288
|
+
--pa-footer-border-color: #{$dark-border};
|
|
289
|
+
|
|
290
|
+
// Cards - dark backgrounds
|
|
291
|
+
--pa-card-bg: #{$dark-card};
|
|
292
|
+
--pa-card-header-bg: #{$dark-surface};
|
|
293
|
+
--pa-card-footer-bg: #{$dark-surface};
|
|
294
|
+
--pa-card-tabs-bg: #{$dark-border};
|
|
295
|
+
|
|
296
|
+
// Inputs - dark backgrounds
|
|
297
|
+
--pa-input-bg: #{$dark-surface};
|
|
298
|
+
--pa-input-border: #{$dark-border};
|
|
299
|
+
--pa-input-text: #{$dark-text};
|
|
300
|
+
--pa-input-focus-border-color: #{$corporate-blue-500};
|
|
301
|
+
|
|
302
|
+
// Input group - use muted blue for Corporate branding
|
|
303
|
+
--pa-input-group-prepend-bg: rgba(14, 165, 233, 0.15);
|
|
304
|
+
--pa-input-group-prepend-text: #{$corporate-blue-500};
|
|
305
|
+
--pa-input-group-append-bg: rgba(14, 165, 233, 0.15);
|
|
306
|
+
--pa-input-group-append-text: #{$corporate-blue-500};
|
|
307
|
+
|
|
308
|
+
// Input group buttons
|
|
309
|
+
.pa-input-group__button {
|
|
310
|
+
background-color: rgba(14, 165, 233, 0.15) !important;
|
|
311
|
+
color: $corporate-blue-500 !important;
|
|
312
|
+
border-color: $dark-border !important;
|
|
313
|
+
|
|
314
|
+
&:hover {
|
|
315
|
+
background-color: rgba(14, 165, 233, 0.25) !important;
|
|
316
|
+
}
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
// Tables - dark backgrounds
|
|
320
|
+
--pa-table-bg: #{$dark-card};
|
|
321
|
+
--pa-table-header-bg: #{$dark-surface};
|
|
322
|
+
--pa-table-stripe: #{$dark-bg};
|
|
323
|
+
--pa-table-hover-bg: #{$dark-surface};
|
|
324
|
+
|
|
325
|
+
// Modals
|
|
326
|
+
--pa-modal-content-bg: #{$dark-card};
|
|
327
|
+
--pa-modal-overlay-bg: rgba(0, 0, 0, 0.8);
|
|
328
|
+
|
|
329
|
+
// Loader overlay
|
|
330
|
+
--pa-loader-overlay-bg: rgba(0, 0, 0, 0.7);
|
|
331
|
+
|
|
332
|
+
// Profile panel
|
|
333
|
+
--pa-profile-overlay-bg: rgba(0, 0, 0, 0.5);
|
|
334
|
+
|
|
335
|
+
// Tooltip/Popover
|
|
336
|
+
--pa-tooltip-bg: #{$dark-border};
|
|
337
|
+
--pa-tooltip-text: #{$dark-text};
|
|
338
|
+
--pa-popover-content-bg: #{$dark-card};
|
|
339
|
+
|
|
340
|
+
// Command palette
|
|
341
|
+
--pa-command-palette-backdrop-bg: rgba(0, 0, 0, 0.8);
|
|
342
|
+
--pa-command-palette-item-hover-bg: #{$dark-surface};
|
|
343
|
+
--pa-command-palette-item-active-bg: rgba(14, 165, 233, 0.2);
|
|
344
|
+
--pa-command-palette-highlight-bg: rgba(14, 165, 233, 0.3);
|
|
345
|
+
|
|
346
|
+
// Alerts - light text for dark mode visibility
|
|
347
|
+
--pa-alert-info-text: #ffffff;
|
|
348
|
+
--pa-alert-info-bg: rgba(6, 182, 212, 0.3);
|
|
349
|
+
--pa-alert-success-text: #ffffff;
|
|
350
|
+
--pa-alert-success-bg: rgba(16, 185, 129, 0.3);
|
|
351
|
+
--pa-alert-warning-text: #ffffff;
|
|
352
|
+
--pa-alert-warning-bg: rgba(255, 193, 7, 0.3);
|
|
353
|
+
--pa-alert-danger-text: #ffffff;
|
|
354
|
+
--pa-alert-danger-bg: rgba(239, 68, 68, 0.3);
|
|
355
|
+
|
|
356
|
+
// Code inside alerts - inherit alert text color
|
|
357
|
+
.pa-alert code {
|
|
358
|
+
color: inherit;
|
|
359
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
// Buttons - adjust for dark mode
|
|
363
|
+
--pa-btn-secondary-bg: #{$dark-border};
|
|
364
|
+
--pa-btn-secondary-bg-hover: #{$dark-surface};
|
|
365
|
+
--pa-btn-secondary-text: #{$dark-text};
|
|
366
|
+
--pa-btn-light-bg: #{$dark-surface};
|
|
367
|
+
--pa-btn-light-bg-hover: #{$dark-border};
|
|
368
|
+
--pa-btn-light-text: #{$dark-text};
|
|
369
|
+
|
|
370
|
+
// Semantic colors - slightly brighter for dark mode
|
|
371
|
+
--pa-success-bg: #{$corporate-emerald-500};
|
|
372
|
+
--pa-success-bg-light: rgba(16, 185, 129, 0.2);
|
|
373
|
+
--pa-warning-bg: #{$corporate-amber-500};
|
|
374
|
+
--pa-warning-bg-light: rgba(245, 158, 11, 0.2);
|
|
375
|
+
--pa-danger-bg: #{$corporate-red-500};
|
|
376
|
+
--pa-danger-bg-light: rgba(239, 68, 68, 0.2);
|
|
377
|
+
--pa-info-bg: #{$corporate-cyan-500};
|
|
378
|
+
--pa-info-bg-light: rgba(6, 182, 212, 0.2);
|
|
379
|
+
|
|
380
|
+
// Base variables for web components (dark mode)
|
|
381
|
+
--base-primary-bg: #{$dark-bg};
|
|
382
|
+
--base-primary-bg-hover: #{$dark-surface};
|
|
383
|
+
--base-text-color-1: #{$dark-text};
|
|
384
|
+
--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
|
+
--base-text-color-3: #64748b;
|
|
392
|
+
--base-text-color-4: #475569;
|
|
393
|
+
--base-border-color: #{$dark-border};
|
|
394
|
+
--base-border: 1px solid #{$dark-border};
|
|
395
|
+
--base-input-bg: #{$dark-surface};
|
|
396
|
+
--base-input-color: #{$dark-text};
|
|
397
|
+
--base-input-border: 1px solid #{$dark-border};
|
|
398
|
+
--base-input-border-hover: 1px solid #{$corporate-blue-500};
|
|
399
|
+
--base-input-border-focus: 1px solid #{$corporate-blue-500};
|
|
400
|
+
--base-input-placeholder-color: #64748b;
|
|
401
|
+
--base-dropdown-bg: #{$dark-card};
|
|
402
|
+
--base-dropdown-border: 1px solid #{$dark-border};
|
|
403
|
+
--base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
|
|
404
|
+
--base-tooltip-bg: #{$dark-border};
|
|
405
|
+
--base-tooltip-text-color: #{$dark-text};
|
|
406
|
+
|
|
407
|
+
// Daterangepicker overrides (dark mode)
|
|
408
|
+
web-daterangepicker {
|
|
409
|
+
--drp-dropdown-bg: #{$dark-card};
|
|
410
|
+
--drp-border-color: #{$dark-border};
|
|
411
|
+
--drp-primary-bg: #{$dark-bg};
|
|
412
|
+
--drp-primary-bg-hover: #{$dark-surface};
|
|
413
|
+
--drp-text-primary: #{$dark-text};
|
|
414
|
+
--drp-text-secondary: #{$dark-text-secondary};
|
|
415
|
+
--drp-button-bg: transparent;
|
|
416
|
+
--drp-button-color: #{$dark-text};
|
|
417
|
+
--drp-button-accent-text-color: #ffffff;
|
|
418
|
+
--drp-button-today-color: #{$corporate-blue-500};
|
|
419
|
+
--drp-button-clear-color: #{$dark-text-secondary};
|
|
420
|
+
--drp-button-cancel-color: #{$dark-text-secondary};
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
// Multiselect overrides (dark mode)
|
|
424
|
+
web-multiselect {
|
|
425
|
+
--ms-dropdown-bg: #{$dark-card};
|
|
426
|
+
--ms-input-bg: #{$dark-surface};
|
|
427
|
+
--ms-primary-bg: #{$dark-bg};
|
|
428
|
+
--ms-primary-bg-hover: #{$dark-surface};
|
|
429
|
+
--ms-border-color: #{$dark-border};
|
|
430
|
+
--ms-text-color-1: #{$dark-text};
|
|
431
|
+
--ms-text-color-2: #{$dark-text-secondary};
|
|
432
|
+
--ms-text-color-3: #64748b;
|
|
433
|
+
--ms-text-color-4: #475569;
|
|
434
|
+
--ms-hint-bg: #{$dark-bg};
|
|
435
|
+
--ms-actions-bg: #{$dark-bg};
|
|
436
|
+
--ms-selected-popover-bg: #{$dark-card};
|
|
437
|
+
}
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
// ============================================================================
|
|
441
|
+
// DARK MODE COMPONENT ADJUSTMENTS
|
|
442
|
+
// ============================================================================
|
|
443
|
+
.pa-mode-dark {
|
|
444
|
+
// Header dropdown - light text on dark background
|
|
445
|
+
.pa-header__dropdown li a {
|
|
446
|
+
color: #f1f5f9 !important;
|
|
447
|
+
|
|
448
|
+
&:hover {
|
|
449
|
+
color: #38bdf8 !important; // sky-400 - lighter blue for dark mode
|
|
450
|
+
background-color: rgba($corporate-blue-500, 0.2) !important;
|
|
451
|
+
}
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
// Card shadows darker
|
|
455
|
+
.pa-card {
|
|
456
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
// Secondary button adjustments for dark mode
|
|
460
|
+
.pa-btn--secondary {
|
|
461
|
+
background-color: #475569 !important;
|
|
462
|
+
color: #f1f5f9 !important;
|
|
463
|
+
border-color: #64748b !important;
|
|
464
|
+
|
|
465
|
+
&:hover {
|
|
466
|
+
background-color: #64748b !important;
|
|
467
|
+
border-color: #94a3b8 !important;
|
|
468
|
+
}
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
// Outline secondary button
|
|
472
|
+
.pa-btn--outline-secondary {
|
|
473
|
+
border-color: #64748b !important;
|
|
474
|
+
color: #94a3b8 !important;
|
|
475
|
+
|
|
476
|
+
&:hover {
|
|
477
|
+
background-color: #475569 !important;
|
|
478
|
+
color: #f1f5f9 !important;
|
|
479
|
+
}
|
|
480
|
+
}
|
|
481
|
+
}
|