@keenmate/pure-admin-theme-audi 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/audi.css +13087 -0
- package/package.json +34 -0
- package/src/scss/audi.scss +500 -0
package/package.json
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@keenmate/pure-admin-theme-audi",
|
|
3
|
+
"version": "1.0.0-rc01",
|
|
4
|
+
"description": "Audi theme for Pure Admin - includes dark and light variants",
|
|
5
|
+
"style": "dist/audi.css",
|
|
6
|
+
"exports": {
|
|
7
|
+
".": "./dist/audi.css",
|
|
8
|
+
"./light": "./dist/audi-light.css",
|
|
9
|
+
"./dark": "./dist/audi.css",
|
|
10
|
+
"./scss": "./src/scss/audi.scss",
|
|
11
|
+
"./scss/light": "./src/scss/audi-light.scss"
|
|
12
|
+
},
|
|
13
|
+
"files": [
|
|
14
|
+
"dist/",
|
|
15
|
+
"src/scss/"
|
|
16
|
+
],
|
|
17
|
+
"scripts": {
|
|
18
|
+
"build": "sass src/scss:dist --no-source-map --silence-deprecation=import --load-path=../../node_modules",
|
|
19
|
+
"prepublishOnly": "npm run build"
|
|
20
|
+
},
|
|
21
|
+
"keywords": ["pure-admin", "theme", "audi", "css"],
|
|
22
|
+
"author": "KeenMate",
|
|
23
|
+
"license": "MIT",
|
|
24
|
+
"peerDependencies": {
|
|
25
|
+
"@keenmate/pure-admin-core": "^1.0.0-rc01"
|
|
26
|
+
},
|
|
27
|
+
"devDependencies": {
|
|
28
|
+
"@keenmate/pure-admin-core": "^1.0.0-rc01",
|
|
29
|
+
"sass": "^1.70.0"
|
|
30
|
+
},
|
|
31
|
+
"publishConfig": {
|
|
32
|
+
"access": "public"
|
|
33
|
+
}
|
|
34
|
+
}
|
|
@@ -0,0 +1,500 @@
|
|
|
1
|
+
/* Pure Admin Visual - Audi Theme (Multi-Mode: Dark + Light) */
|
|
2
|
+
/* Supports runtime switching between dark and light modes via body class */
|
|
3
|
+
@use 'sass:color';
|
|
4
|
+
|
|
5
|
+
// 1. Import framework variables first (all defaults with !default flags)
|
|
6
|
+
@import '@keenmate/pure-admin-core/src/scss/variables/index';
|
|
7
|
+
|
|
8
|
+
// 2. Override structural SCSS variables (shared between modes)
|
|
9
|
+
$sidebar-width: 29rem; // 290px (10px base)
|
|
10
|
+
$border-radius: 1px;
|
|
11
|
+
$border-radius-lg: 2px;
|
|
12
|
+
|
|
13
|
+
// No border radius for inputs (Audi design language - square corners)
|
|
14
|
+
$base-border-radius-sm: 0;
|
|
15
|
+
$base-border-radius-md: 0;
|
|
16
|
+
$base-border-radius-lg: 0;
|
|
17
|
+
|
|
18
|
+
// Enable red accent on table row hover (Audi signature detail)
|
|
19
|
+
$table-hover-accent-width: 3px;
|
|
20
|
+
$table-hover-accent-position: left;
|
|
21
|
+
|
|
22
|
+
// ============================================================================
|
|
23
|
+
// DARK MODE COLORS (Default)
|
|
24
|
+
// ============================================================================
|
|
25
|
+
$audi-black: #000000;
|
|
26
|
+
$audi-near-black: #0a0a0a;
|
|
27
|
+
$audi-dark: #1a1a1a;
|
|
28
|
+
$audi-gray: #2a2a2a;
|
|
29
|
+
$audi-gray-light: #333333;
|
|
30
|
+
$audi-gray-lighter: #4d4d4d;
|
|
31
|
+
$audi-gray-lightest: #666666;
|
|
32
|
+
$audi-red: #ff0000;
|
|
33
|
+
$audi-red-dark: #cc0000;
|
|
34
|
+
|
|
35
|
+
// Dark mode theme colors
|
|
36
|
+
$primary-bg: $audi-near-black;
|
|
37
|
+
$bg-secondary: $audi-near-black;
|
|
38
|
+
$content-background-color: $audi-dark;
|
|
39
|
+
$header-bg: $audi-black;
|
|
40
|
+
$header-border-color: $audi-gray-light;
|
|
41
|
+
$header-text: #ffffff;
|
|
42
|
+
$header-text-secondary: rgba(255, 255, 255, 0.7);
|
|
43
|
+
$sidebar-bg: $audi-dark;
|
|
44
|
+
$sidebar-text: #ffffff;
|
|
45
|
+
$sidebar-text-secondary: #ffffff;
|
|
46
|
+
$sidebar-submenu-bg: $audi-gray-light;
|
|
47
|
+
$sidebar-submenu-hover-bg: rgba($audi-red, 0.25);
|
|
48
|
+
$sidebar-submenu-active-bg: rgba($audi-red, 0.3);
|
|
49
|
+
$footer-bg: $audi-black;
|
|
50
|
+
$footer-border-color: $audi-gray-light;
|
|
51
|
+
$border-color: $audi-gray-light;
|
|
52
|
+
$text-primary: #ffffff;
|
|
53
|
+
$text-secondary: #cccccc;
|
|
54
|
+
$accent-color: $audi-red;
|
|
55
|
+
$accent-hover: rgba($audi-red, 0.3);
|
|
56
|
+
$accent-light: rgba($audi-red, 0.25);
|
|
57
|
+
|
|
58
|
+
// Base variables for web components (dark mode)
|
|
59
|
+
$base-accent-color: $accent-color;
|
|
60
|
+
$base-accent-color-hover: color.adjust($base-accent-color, $lightness: 10%);
|
|
61
|
+
$base-accent-color-active: color.adjust($base-accent-color, $lightness: 20%);
|
|
62
|
+
$base-accent-color-light: $accent-light;
|
|
63
|
+
$base-accent-color-light-hover: rgba($base-accent-color, 0.3);
|
|
64
|
+
$base-primary-bg: $audi-dark;
|
|
65
|
+
$base-primary-bg-hover: $audi-gray;
|
|
66
|
+
$base-text-color-1: #ffffff;
|
|
67
|
+
$base-text-color-2: #cccccc;
|
|
68
|
+
$base-text-color-3: #999999;
|
|
69
|
+
$base-text-color-4: #666666;
|
|
70
|
+
$base-text-color-on-accent: #ffffff;
|
|
71
|
+
$base-border-color: $audi-gray-light;
|
|
72
|
+
$base-border: 1px solid $audi-gray-light;
|
|
73
|
+
|
|
74
|
+
// Input fields (dark mode)
|
|
75
|
+
$base-input-bg: $audi-black;
|
|
76
|
+
$base-input-color: #ffffff;
|
|
77
|
+
$base-input-border: 1px solid $audi-gray-light;
|
|
78
|
+
$base-input-border-hover: 1px solid $accent-color;
|
|
79
|
+
$base-input-border-focus: 1px solid $accent-color;
|
|
80
|
+
$base-input-placeholder-color: #666666;
|
|
81
|
+
$base-input-bg-disabled: rgba($audi-gray, 0.5);
|
|
82
|
+
|
|
83
|
+
// Dropdown/Popover (dark mode)
|
|
84
|
+
$base-dropdown-bg: $audi-dark;
|
|
85
|
+
$base-dropdown-border: 1px solid $audi-gray-light;
|
|
86
|
+
$base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
|
|
87
|
+
|
|
88
|
+
// Tooltip (dark mode)
|
|
89
|
+
$base-tooltip-bg: $audi-gray-light;
|
|
90
|
+
$base-tooltip-text-color: #ffffff;
|
|
91
|
+
|
|
92
|
+
// Form focus colors
|
|
93
|
+
$input-focus-border-color: $accent-color;
|
|
94
|
+
$select-focus-border-color: $accent-color;
|
|
95
|
+
$textarea-focus-border-color: $accent-color;
|
|
96
|
+
|
|
97
|
+
// Checkbox colors
|
|
98
|
+
$checkbox-border-color-hover: $accent-color;
|
|
99
|
+
$checkbox-border-color-checked: $accent-color;
|
|
100
|
+
$checkbox-bg-checked: $accent-color;
|
|
101
|
+
$checkbox-bg-indeterminate: $accent-color;
|
|
102
|
+
$checkbox-focus-shadow: 0 0 0 2px rgba($accent-color, 0.25);
|
|
103
|
+
|
|
104
|
+
// Card colors (dark mode)
|
|
105
|
+
$card-bg: $audi-dark;
|
|
106
|
+
$card-header-bg: $audi-black;
|
|
107
|
+
$card-footer-bg: $audi-black;
|
|
108
|
+
$card-tabs-bg: $audi-gray-light;
|
|
109
|
+
|
|
110
|
+
// Input colors (dark mode)
|
|
111
|
+
$input-bg: $audi-black;
|
|
112
|
+
$input-border: $audi-gray-light;
|
|
113
|
+
$input-text: #ffffff;
|
|
114
|
+
|
|
115
|
+
// Multiselect (dark mode)
|
|
116
|
+
$multiselect-dropdown-bg: $audi-dark;
|
|
117
|
+
$multiselect-dropdown-border: $audi-gray-light;
|
|
118
|
+
$multiselect-dropdown-text: #ffffff;
|
|
119
|
+
|
|
120
|
+
// Table colors (dark mode)
|
|
121
|
+
$table-stripe: $audi-gray;
|
|
122
|
+
$table-bg: $audi-dark;
|
|
123
|
+
$table-header-bg: $audi-black;
|
|
124
|
+
$table-hover-bg: $audi-gray-light;
|
|
125
|
+
$table-hover-accent-color: $accent-color;
|
|
126
|
+
|
|
127
|
+
// Modal colors (dark mode)
|
|
128
|
+
$modal-content-bg: $audi-dark;
|
|
129
|
+
$modal-overlay-bg: rgba($audi-black, 0.8);
|
|
130
|
+
|
|
131
|
+
// Profile name in header
|
|
132
|
+
$header-profile-name-color: #ffffff;
|
|
133
|
+
|
|
134
|
+
// Button colors
|
|
135
|
+
$btn-primary-bg: $audi-red;
|
|
136
|
+
$btn-primary-bg-hover: $audi-red-dark;
|
|
137
|
+
$btn-primary-text: #ffffff;
|
|
138
|
+
$btn-secondary-bg: $audi-gray-light;
|
|
139
|
+
$btn-secondary-bg-hover: $audi-gray-lighter;
|
|
140
|
+
$btn-secondary-text: #ffffff;
|
|
141
|
+
$btn-success-bg: #00cc44;
|
|
142
|
+
$btn-success-bg-hover: #009933;
|
|
143
|
+
$btn-success-text: #ffffff;
|
|
144
|
+
$btn-danger-bg: $audi-red;
|
|
145
|
+
$btn-danger-bg-hover: $audi-red-dark;
|
|
146
|
+
$btn-danger-text: #ffffff;
|
|
147
|
+
$btn-warning-bg: #ff6600;
|
|
148
|
+
$btn-warning-bg-hover: #e55a00;
|
|
149
|
+
$btn-warning-text: #ffffff;
|
|
150
|
+
$btn-info-bg: #0099ff;
|
|
151
|
+
$btn-info-bg-hover: #0077cc;
|
|
152
|
+
$btn-info-text: #ffffff;
|
|
153
|
+
$btn-light-bg: $audi-gray-lightest;
|
|
154
|
+
$btn-light-bg-hover: #808080;
|
|
155
|
+
$btn-light-text: #ffffff;
|
|
156
|
+
$btn-dark-bg: $audi-black;
|
|
157
|
+
$btn-dark-bg-hover: $audi-dark;
|
|
158
|
+
$btn-dark-text: #ffffff;
|
|
159
|
+
|
|
160
|
+
// Validation colors
|
|
161
|
+
$success-bg: $btn-success-bg;
|
|
162
|
+
$success-bg-light: rgba(0, 204, 68, 0.25);
|
|
163
|
+
$warning-bg: $btn-warning-bg;
|
|
164
|
+
$warning-bg-light: rgba(255, 102, 0, 0.25);
|
|
165
|
+
$danger-bg: $btn-danger-bg;
|
|
166
|
+
$danger-bg-light: rgba(255, 0, 0, 0.25);
|
|
167
|
+
|
|
168
|
+
// ============================================================================
|
|
169
|
+
// FONTS - Fira Sans Condensed
|
|
170
|
+
// ============================================================================
|
|
171
|
+
/* cyrillic-ext */
|
|
172
|
+
@font-face {
|
|
173
|
+
font-family: 'Fira Sans Condensed';
|
|
174
|
+
font-style: normal;
|
|
175
|
+
font-weight: 400;
|
|
176
|
+
font-display: swap;
|
|
177
|
+
src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfvtrftV.woff2) format('woff2');
|
|
178
|
+
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
|
179
|
+
}
|
|
180
|
+
/* cyrillic */
|
|
181
|
+
@font-face {
|
|
182
|
+
font-family: 'Fira Sans Condensed';
|
|
183
|
+
font-style: normal;
|
|
184
|
+
font-weight: 400;
|
|
185
|
+
font-display: swap;
|
|
186
|
+
src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfLtrftV.woff2) format('woff2');
|
|
187
|
+
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
|
188
|
+
}
|
|
189
|
+
/* greek-ext */
|
|
190
|
+
@font-face {
|
|
191
|
+
font-family: 'Fira Sans Condensed';
|
|
192
|
+
font-style: normal;
|
|
193
|
+
font-weight: 400;
|
|
194
|
+
font-display: swap;
|
|
195
|
+
src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfrtrftV.woff2) format('woff2');
|
|
196
|
+
unicode-range: U+1F00-1FFF;
|
|
197
|
+
}
|
|
198
|
+
/* greek */
|
|
199
|
+
@font-face {
|
|
200
|
+
font-family: 'Fira Sans Condensed';
|
|
201
|
+
font-style: normal;
|
|
202
|
+
font-weight: 400;
|
|
203
|
+
font-display: swap;
|
|
204
|
+
src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfXtrftV.woff2) format('woff2');
|
|
205
|
+
unicode-range: U+0370-03FF;
|
|
206
|
+
}
|
|
207
|
+
/* vietnamese */
|
|
208
|
+
@font-face {
|
|
209
|
+
font-family: 'Fira Sans Condensed';
|
|
210
|
+
font-style: normal;
|
|
211
|
+
font-weight: 400;
|
|
212
|
+
font-display: swap;
|
|
213
|
+
src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfntrftV.woff2) format('woff2');
|
|
214
|
+
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;
|
|
215
|
+
}
|
|
216
|
+
/* latin-ext */
|
|
217
|
+
@font-face {
|
|
218
|
+
font-family: 'Fira Sans Condensed';
|
|
219
|
+
font-style: normal;
|
|
220
|
+
font-weight: 400;
|
|
221
|
+
font-display: swap;
|
|
222
|
+
src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfjtrftV.woff2) format('woff2');
|
|
223
|
+
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;
|
|
224
|
+
}
|
|
225
|
+
/* latin */
|
|
226
|
+
@font-face {
|
|
227
|
+
font-family: 'Fira Sans Condensed';
|
|
228
|
+
font-style: normal;
|
|
229
|
+
font-weight: 400;
|
|
230
|
+
font-display: swap;
|
|
231
|
+
src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfbtrQ.woff2) format('woff2');
|
|
232
|
+
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;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
$body-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
|
|
236
|
+
|
|
237
|
+
// ============================================================================
|
|
238
|
+
// IMPORT CORE FRAMEWORK (uses dark mode SCSS variables)
|
|
239
|
+
// ============================================================================
|
|
240
|
+
@import '@keenmate/pure-admin-core/src/scss/core';
|
|
241
|
+
@import '@keenmate/pure-admin-core/src/scss/utilities';
|
|
242
|
+
@import '@keenmate/pure-admin-core/src/scss/base-css-variables';
|
|
243
|
+
|
|
244
|
+
// ============================================================================
|
|
245
|
+
// AUDI-SPECIFIC COMPONENT OVERRIDES
|
|
246
|
+
// ============================================================================
|
|
247
|
+
.pa-btn--primary {
|
|
248
|
+
font-weight: $font-weight-bold;
|
|
249
|
+
color: #ffffff !important;
|
|
250
|
+
border-radius: 0 !important;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.pa-btn--danger {
|
|
254
|
+
font-weight: $font-weight-bold;
|
|
255
|
+
text-transform: uppercase;
|
|
256
|
+
color: #ffffff !important;
|
|
257
|
+
border-radius: 0 !important;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.pa-btn--secondary {
|
|
261
|
+
border-color: $audi-gray-lightest !important;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.pa-btn--outline-secondary {
|
|
265
|
+
border-color: $audi-gray-lightest !important;
|
|
266
|
+
color: #cccccc !important;
|
|
267
|
+
|
|
268
|
+
&:hover {
|
|
269
|
+
background-color: $audi-gray-light !important;
|
|
270
|
+
color: #ffffff !important;
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.pa-card {
|
|
275
|
+
border-radius: 0 !important;
|
|
276
|
+
border: $border-width-medium solid var(--pa-border-color);
|
|
277
|
+
box-shadow: 0 $spacing-xs ($spacing-sm * 2) rgba(0, 0, 0, 0.4);
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
// Sidebar left-border accent (instead of default right-border)
|
|
281
|
+
.pa-sidebar__link {
|
|
282
|
+
border-left: $border-width-thick solid transparent;
|
|
283
|
+
border-right: none;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.pa-sidebar__link--active {
|
|
287
|
+
border-left-color: var(--pa-accent) !important;
|
|
288
|
+
color: var(--pa-sidebar-text) !important;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.pa-sidebar__link--active .pa-sidebar__label,
|
|
292
|
+
.pa-sidebar__link--active .pa-sidebar__icon {
|
|
293
|
+
color: var(--pa-sidebar-text) !important;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
// ============================================================================
|
|
297
|
+
// CSS VARIABLES - DARK MODE (Default)
|
|
298
|
+
// ============================================================================
|
|
299
|
+
:root, .pa-mode-dark {
|
|
300
|
+
--page-loader-bg: rgba(10, 10, 10, 0.95);
|
|
301
|
+
--page-loader-spinner-border: #333;
|
|
302
|
+
--page-loader-spinner-accent: #ff0000;
|
|
303
|
+
|
|
304
|
+
// Base CSS variables for web components
|
|
305
|
+
@include output-base-css-variables;
|
|
306
|
+
|
|
307
|
+
// Pure Admin theme CSS variables
|
|
308
|
+
@include output-pa-css-variables;
|
|
309
|
+
|
|
310
|
+
// Daterangepicker overrides (dark mode)
|
|
311
|
+
--drp-dropdown-bg: #{$audi-dark};
|
|
312
|
+
--drp-border-color: #{$audi-gray-light};
|
|
313
|
+
--drp-primary-bg: #{$audi-gray};
|
|
314
|
+
--drp-primary-bg-hover: #{$audi-gray-light};
|
|
315
|
+
--drp-text-primary: #ffffff;
|
|
316
|
+
--drp-text-secondary: #999999;
|
|
317
|
+
--drp-button-bg: transparent;
|
|
318
|
+
--drp-button-color: #ffffff;
|
|
319
|
+
--drp-button-accent-text-color: #ffffff;
|
|
320
|
+
--drp-button-clear-color: #999999;
|
|
321
|
+
--drp-button-cancel-color: #999999;
|
|
322
|
+
|
|
323
|
+
// Multiselect overrides (dark mode)
|
|
324
|
+
--ms-dropdown-bg: #{$audi-dark};
|
|
325
|
+
--ms-input-bg: #{$audi-black};
|
|
326
|
+
--ms-primary-bg: #{$audi-gray};
|
|
327
|
+
--ms-primary-bg-hover: #{$audi-gray-light};
|
|
328
|
+
--ms-border-color: #{$audi-gray-light};
|
|
329
|
+
--ms-text-color-1: #ffffff;
|
|
330
|
+
--ms-text-color-2: #cccccc;
|
|
331
|
+
--ms-text-color-3: #999999;
|
|
332
|
+
--ms-text-color-4: #666666;
|
|
333
|
+
--ms-hint-bg: #{$audi-gray};
|
|
334
|
+
--ms-actions-bg: #{$audi-gray};
|
|
335
|
+
--ms-selected-popover-bg: #{$audi-dark};
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
// ============================================================================
|
|
339
|
+
// CSS VARIABLES - LIGHT MODE
|
|
340
|
+
// ============================================================================
|
|
341
|
+
.pa-mode-light {
|
|
342
|
+
// Light mode color palette
|
|
343
|
+
$light-white: #ffffff;
|
|
344
|
+
$light-gray-50: #f8f9fa;
|
|
345
|
+
$light-gray-100: #f1f3f5;
|
|
346
|
+
$light-gray-200: #e9ecef;
|
|
347
|
+
$light-gray-300: #dee2e6;
|
|
348
|
+
$light-gray-400: #ced4da;
|
|
349
|
+
$light-gray-500: #adb5bd;
|
|
350
|
+
$light-gray-600: #6c757d;
|
|
351
|
+
$light-gray-700: #495057;
|
|
352
|
+
$light-gray-800: #343a40;
|
|
353
|
+
$light-gray-900: #212529;
|
|
354
|
+
|
|
355
|
+
--page-loader-bg: rgba(240, 240, 240, 0.95);
|
|
356
|
+
--page-loader-spinner-border: #d0d0d0;
|
|
357
|
+
--page-loader-spinner-accent: #ff0000;
|
|
358
|
+
|
|
359
|
+
// Core colors - light backgrounds
|
|
360
|
+
--pa-primary-bg: #{$light-gray-100};
|
|
361
|
+
--pa-bg-secondary: #{$light-gray-50};
|
|
362
|
+
--pa-content-bg: #{$light-gray-100};
|
|
363
|
+
|
|
364
|
+
// Text colors - dark text on light bg
|
|
365
|
+
--pa-text-primary: #{$light-gray-900};
|
|
366
|
+
--pa-text-secondary: #{$light-gray-600};
|
|
367
|
+
|
|
368
|
+
// Accent stays red
|
|
369
|
+
--pa-accent: #ff0000;
|
|
370
|
+
--pa-accent-hover: rgba(255, 0, 0, 0.1);
|
|
371
|
+
--pa-accent-light: rgba(255, 0, 0, 0.05);
|
|
372
|
+
|
|
373
|
+
// Border - lighter for light mode
|
|
374
|
+
--pa-border-color: #{$light-gray-200};
|
|
375
|
+
|
|
376
|
+
// Header/Sidebar/Footer stay dark for contrast
|
|
377
|
+
--pa-header-bg: #1a1a1a;
|
|
378
|
+
--pa-header-border-color: #{$light-gray-300};
|
|
379
|
+
--pa-header-text: #ffffff;
|
|
380
|
+
--pa-header-text-secondary: rgba(255, 255, 255, 0.7);
|
|
381
|
+
--pa-header-profile-name-color: #ffffff;
|
|
382
|
+
--pa-sidebar-bg: #1a1a1a;
|
|
383
|
+
--pa-sidebar-text: #ffffff;
|
|
384
|
+
--pa-sidebar-text-secondary: #ffffff;
|
|
385
|
+
--pa-sidebar-submenu-bg: #333333;
|
|
386
|
+
--pa-sidebar-submenu-hover-bg: rgba(255, 0, 0, 0.25);
|
|
387
|
+
--pa-sidebar-submenu-active-bg: rgba(255, 0, 0, 0.3);
|
|
388
|
+
--pa-footer-bg: #1a1a1a;
|
|
389
|
+
--pa-footer-border-color: #{$light-gray-300};
|
|
390
|
+
|
|
391
|
+
// Cards - white/light backgrounds
|
|
392
|
+
--pa-card-bg: #{$light-white};
|
|
393
|
+
--pa-card-header-bg: #{$light-gray-50};
|
|
394
|
+
--pa-card-footer-bg: #{$light-gray-50};
|
|
395
|
+
--pa-card-tabs-bg: #{$light-gray-200};
|
|
396
|
+
|
|
397
|
+
// Inputs - white backgrounds
|
|
398
|
+
--pa-input-bg: #{$light-white};
|
|
399
|
+
--pa-input-border: #{$light-gray-300};
|
|
400
|
+
--pa-input-text: #{$light-gray-900};
|
|
401
|
+
|
|
402
|
+
// Tables - light backgrounds
|
|
403
|
+
--pa-table-bg: #{$light-white};
|
|
404
|
+
--pa-table-header-bg: #{$light-gray-100};
|
|
405
|
+
--pa-table-stripe: #{$light-gray-50};
|
|
406
|
+
--pa-table-hover-bg: #{$light-gray-100};
|
|
407
|
+
|
|
408
|
+
// Modals
|
|
409
|
+
--pa-modal-content-bg: #{$light-white};
|
|
410
|
+
--pa-modal-overlay-bg: rgba(0, 0, 0, 0.75);
|
|
411
|
+
|
|
412
|
+
// Buttons - adjust light button for light mode
|
|
413
|
+
--pa-btn-light-bg: #{$light-gray-200};
|
|
414
|
+
--pa-btn-light-bg-hover: #{$light-gray-300};
|
|
415
|
+
--pa-btn-light-text: #{$light-gray-900};
|
|
416
|
+
--pa-btn-secondary-bg: #{$light-gray-600};
|
|
417
|
+
--pa-btn-secondary-bg-hover: #{$light-gray-700};
|
|
418
|
+
|
|
419
|
+
// Tooltip
|
|
420
|
+
--pa-tooltip-bg: #{$light-gray-800};
|
|
421
|
+
--pa-tooltip-text: #ffffff;
|
|
422
|
+
|
|
423
|
+
// Popover
|
|
424
|
+
--pa-popover-content-bg: #{$light-white};
|
|
425
|
+
|
|
426
|
+
// Semantic colors - slightly adjusted for light mode
|
|
427
|
+
--pa-success-bg-light: rgba(0, 204, 68, 0.1);
|
|
428
|
+
--pa-warning-bg-light: rgba(255, 102, 0, 0.1);
|
|
429
|
+
--pa-danger-bg-light: rgba(255, 0, 0, 0.1);
|
|
430
|
+
--pa-info-bg-light: rgba(0, 153, 255, 0.1);
|
|
431
|
+
|
|
432
|
+
// Base variables for web components (light mode)
|
|
433
|
+
--base-primary-bg: #{$light-gray-100};
|
|
434
|
+
--base-primary-bg-hover: #{$light-gray-200};
|
|
435
|
+
--base-text-color-1: #{$light-gray-900};
|
|
436
|
+
--base-text-color-2: #{$light-gray-600};
|
|
437
|
+
--base-text-color-3: #{$light-gray-500};
|
|
438
|
+
--base-text-color-4: #{$light-gray-400};
|
|
439
|
+
--base-border-color: #{$light-gray-300};
|
|
440
|
+
--base-border: 1px solid #{$light-gray-300};
|
|
441
|
+
--base-input-bg: #{$light-white};
|
|
442
|
+
--base-input-color: #{$light-gray-900};
|
|
443
|
+
--base-input-border: 1px solid #{$light-gray-300};
|
|
444
|
+
--base-dropdown-bg: #{$light-white};
|
|
445
|
+
--base-dropdown-border: 1px solid #{$light-gray-300};
|
|
446
|
+
--base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
|
|
447
|
+
--base-tooltip-bg: #{$light-gray-800};
|
|
448
|
+
--base-tooltip-text-color: #ffffff;
|
|
449
|
+
|
|
450
|
+
// Daterangepicker overrides (light mode) - must target element directly to override core
|
|
451
|
+
web-daterangepicker {
|
|
452
|
+
--drp-dropdown-bg: #{$light-white};
|
|
453
|
+
--drp-border-color: #{$light-gray-300};
|
|
454
|
+
--drp-primary-bg: #{$light-gray-100};
|
|
455
|
+
--drp-primary-bg-hover: #{$light-gray-200};
|
|
456
|
+
--drp-text-primary: #{$light-gray-900};
|
|
457
|
+
--drp-text-secondary: #{$light-gray-600};
|
|
458
|
+
--drp-button-bg: transparent;
|
|
459
|
+
--drp-button-color: #{$light-gray-900};
|
|
460
|
+
--drp-button-accent-text-color: #ffffff;
|
|
461
|
+
--drp-button-today-color: #ff0000;
|
|
462
|
+
--drp-button-clear-color: #{$light-gray-600};
|
|
463
|
+
--drp-button-cancel-color: #{$light-gray-600};
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
// Multiselect overrides (light mode) - must target element directly to override core
|
|
467
|
+
web-multiselect {
|
|
468
|
+
--ms-dropdown-bg: #{$light-white};
|
|
469
|
+
--ms-input-bg: #{$light-white};
|
|
470
|
+
--ms-primary-bg: #{$light-gray-100};
|
|
471
|
+
--ms-primary-bg-hover: #{$light-gray-200};
|
|
472
|
+
--ms-border-color: #{$light-gray-300};
|
|
473
|
+
--ms-text-color-1: #{$light-gray-900};
|
|
474
|
+
--ms-text-color-2: #{$light-gray-700};
|
|
475
|
+
--ms-text-color-3: #{$light-gray-500};
|
|
476
|
+
--ms-text-color-4: #{$light-gray-400};
|
|
477
|
+
--ms-hint-bg: #{$light-gray-50};
|
|
478
|
+
--ms-actions-bg: #{$light-gray-50};
|
|
479
|
+
--ms-selected-popover-bg: #{$light-white};
|
|
480
|
+
}
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
// Light mode specific component adjustments
|
|
484
|
+
.pa-mode-light {
|
|
485
|
+
// Card shadows lighter
|
|
486
|
+
.pa-card {
|
|
487
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
488
|
+
}
|
|
489
|
+
|
|
490
|
+
// Outline secondary button adjustments
|
|
491
|
+
.pa-btn--outline-secondary {
|
|
492
|
+
border-color: #adb5bd !important;
|
|
493
|
+
color: #495057 !important;
|
|
494
|
+
|
|
495
|
+
&:hover {
|
|
496
|
+
background-color: #e9ecef !important;
|
|
497
|
+
color: #212529 !important;
|
|
498
|
+
}
|
|
499
|
+
}
|
|
500
|
+
}
|