@keenmate/pure-admin-theme-audi 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.
Files changed (3) hide show
  1. package/dist/audi.css +1450 -363
  2. package/package.json +3 -3
  3. package/src/scss/audi.scss +142 -135
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@keenmate/pure-admin-theme-audi",
3
- "version": "1.0.0-rc01",
3
+ "version": "1.0.0-rc04",
4
4
  "description": "Audi theme for Pure Admin - includes dark and light variants",
5
5
  "style": "dist/audi.css",
6
6
  "exports": {
@@ -22,10 +22,10 @@
22
22
  "author": "KeenMate",
23
23
  "license": "MIT",
24
24
  "peerDependencies": {
25
- "@keenmate/pure-admin-core": "^1.0.0-rc01"
25
+ "@keenmate/pure-admin-core": "^1.0.0-rc04"
26
26
  },
27
27
  "devDependencies": {
28
- "@keenmate/pure-admin-core": "^1.0.0-rc01",
28
+ "@keenmate/pure-admin-core": "^1.0.0-rc04",
29
29
  "sass": "^1.70.0"
30
30
  },
31
31
  "publishConfig": {
package/src/scss/audi.scss CHANGED
@@ -2,26 +2,9 @@
2
2
  /* Supports runtime switching between dark and light modes via body class */
3
3
  @use 'sass:color';
4
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
- // ============================================================================
5
+ // =============================================================================
6
+ // AUDI COLOR PALETTE
7
+ // =============================================================================
25
8
  $audi-black: #000000;
26
9
  $audi-near-black: #0a0a0a;
27
10
  $audi-dark: #1a1a1a;
@@ -32,74 +15,115 @@ $audi-gray-lightest: #666666;
32
15
  $audi-red: #ff0000;
33
16
  $audi-red-dark: #cc0000;
34
17
 
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;
18
+ $audi-success: #00cc44;
19
+ $audi-success-hover: #009933;
20
+ $audi-warning: #ff6600;
21
+ $audi-warning-hover: #e55a00;
22
+ $audi-info: #0099ff;
23
+ $audi-info-hover: #0077cc;
24
+
25
+ // =============================================================================
26
+ // BASE VARIABLES - Single Source of Truth (Dark Mode Default)
27
+ // =============================================================================
28
+
29
+ // Accent colors (brand)
30
+ $base-accent-color: $audi-red;
31
+ $base-accent-color-hover: color.adjust($audi-red, $lightness: 10%);
32
+ $base-accent-color-active: color.adjust($audi-red, $lightness: 20%);
33
+ $base-accent-color-light: rgba($audi-red, 0.25);
34
+ $base-accent-color-light-hover: rgba($audi-red, 0.3);
35
+
36
+ // Text colors (dark mode - light text)
66
37
  $base-text-color-1: #ffffff;
67
38
  $base-text-color-2: #cccccc;
68
39
  $base-text-color-3: #999999;
69
40
  $base-text-color-4: #666666;
70
41
  $base-text-color-on-accent: #ffffff;
42
+
43
+ // Surface colors (dark mode)
44
+ $base-surface-1: $audi-dark;
45
+ $base-surface-2: $audi-near-black;
46
+ $base-surface-3: $audi-gray-light;
47
+ $base-surface-inverse: #ffffff;
48
+ $base-overlay-bg: rgba($audi-black, 0.8);
49
+
50
+ // Border
71
51
  $base-border-color: $audi-gray-light;
72
- $base-border: 1px solid $audi-gray-light;
73
52
 
74
- // Input fields (dark mode)
53
+ // Input (dark mode)
75
54
  $base-input-bg: $audi-black;
76
55
  $base-input-color: #ffffff;
77
56
  $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);
57
+ $base-input-border-hover: 1px solid $audi-gray-lighter;
58
+ $base-input-border-focus: 1px solid $audi-red;
59
+
60
+ // No border radius (Audi design language - square corners)
61
+ $base-border-radius-sm: 0;
62
+ $base-border-radius-md: 0;
63
+ $base-border-radius-lg: 0;
82
64
 
83
65
  // Dropdown/Popover (dark mode)
84
66
  $base-dropdown-bg: $audi-dark;
85
- $base-dropdown-border: 1px solid $audi-gray-light;
86
67
  $base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
87
68
 
88
69
  // Tooltip (dark mode)
89
70
  $base-tooltip-bg: $audi-gray-light;
90
71
  $base-tooltip-text-color: #ffffff;
91
72
 
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;
73
+ // Contextual colors
74
+ $base-success-color: $audi-success;
75
+ $base-success-color-hover: $audi-success-hover;
76
+ $base-success-bg-light: rgba($audi-success, 0.25);
77
+ $base-text-on-success: #ffffff;
78
+
79
+ $base-danger-color: $audi-red;
80
+ $base-danger-color-hover: $audi-red-dark;
81
+ $base-danger-bg-light: rgba($audi-red, 0.25);
82
+ $base-text-on-danger: #ffffff;
83
+
84
+ $base-warning-color: $audi-warning;
85
+ $base-warning-color-hover: $audi-warning-hover;
86
+ $base-warning-bg-light: rgba($audi-warning, 0.25);
87
+ $base-text-on-warning: #ffffff;
88
+
89
+ $base-info-color: $audi-info;
90
+ $base-info-color-hover: $audi-info-hover;
91
+ $base-info-bg-light: rgba($audi-info, 0.25);
92
+ $base-text-on-info: #ffffff;
93
+
94
+ // =============================================================================
95
+ // IMPORT CORE VARIABLES (with base variables already set)
96
+ // =============================================================================
97
+ @import '@keenmate/pure-admin-core/src/scss/variables/index';
96
98
 
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);
99
+ // =============================================================================
100
+ // LAYOUT-SPECIFIC OVERRIDES
101
+ // =============================================================================
102
+ $sidebar-width: 29rem;
103
+ $border-radius: 1px;
104
+ $border-radius-lg: 2px;
105
+
106
+ // Enable red accent on table row hover (Audi signature detail)
107
+ $table-hover-accent-width: 3px;
108
+ $table-hover-accent-position: left;
109
+
110
+ // Dark mode theme colors
111
+ $primary-bg: $audi-near-black;
112
+ $bg-secondary: $audi-near-black;
113
+ $content-background-color: $audi-dark;
114
+ $header-bg: $audi-black;
115
+ $header-border-color: $audi-gray-light;
116
+ $header-text: #ffffff;
117
+ $header-text-secondary: rgba(255, 255, 255, 0.7);
118
+ $header-profile-name-color: #ffffff;
119
+ $sidebar-bg: $audi-dark;
120
+ $sidebar-text: #ffffff;
121
+ $sidebar-text-secondary: #ffffff;
122
+ $sidebar-submenu-bg: $audi-gray-light;
123
+ $sidebar-submenu-hover-bg: rgba($audi-red, 0.25);
124
+ $sidebar-submenu-active-bg: rgba($audi-red, 0.3);
125
+ $footer-bg: $audi-black;
126
+ $footer-border-color: $audi-gray-light;
103
127
 
104
128
  // Card colors (dark mode)
105
129
  $card-bg: $audi-dark;
@@ -107,49 +131,43 @@ $card-header-bg: $audi-black;
107
131
  $card-footer-bg: $audi-black;
108
132
  $card-tabs-bg: $audi-gray-light;
109
133
 
110
- // Input colors (dark mode)
134
+ // Input colors
111
135
  $input-bg: $audi-black;
112
136
  $input-border: $audi-gray-light;
113
137
  $input-text: #ffffff;
114
138
 
115
- // Multiselect (dark mode)
139
+ // Multiselect
116
140
  $multiselect-dropdown-bg: $audi-dark;
117
141
  $multiselect-dropdown-border: $audi-gray-light;
118
142
  $multiselect-dropdown-text: #ffffff;
119
143
 
120
- // Table colors (dark mode)
144
+ // Table colors
121
145
  $table-stripe: $audi-gray;
122
146
  $table-bg: $audi-dark;
123
147
  $table-header-bg: $audi-black;
124
148
  $table-hover-bg: $audi-gray-light;
125
- $table-hover-accent-color: $accent-color;
149
+ $table-hover-accent-color: $audi-red;
126
150
 
127
- // Modal colors (dark mode)
151
+ // Modal colors
128
152
  $modal-content-bg: $audi-dark;
129
153
  $modal-overlay-bg: rgba($audi-black, 0.8);
130
154
 
131
- // Profile name in header
132
- $header-profile-name-color: #ffffff;
155
+ // Form focus colors
156
+ $input_focus-border-color: $base-accent-color;
157
+ $select-focus-border-color: $base-accent-color;
158
+ $textarea-focus-border-color: $base-accent-color;
133
159
 
134
- // Button colors
135
- $btn-primary-bg: $audi-red;
136
- $btn-primary-bg-hover: $audi-red-dark;
137
- $btn-primary-text: #ffffff;
160
+ // Checkbox colors
161
+ $checkbox-border-color-hover: $base-accent-color;
162
+ $checkbox-border-color-checked: $base-accent-color;
163
+ $checkbox-bg-checked: $base-accent-color;
164
+ $checkbox-bg-indeterminate: $base-accent-color;
165
+ $checkbox-focus-shadow: 0 0 0 2px rgba($base-accent-color, 0.25);
166
+
167
+ // Button colors (secondary not derived from base)
138
168
  $btn-secondary-bg: $audi-gray-light;
139
169
  $btn-secondary-bg-hover: $audi-gray-lighter;
140
170
  $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
171
  $btn-light-bg: $audi-gray-lightest;
154
172
  $btn-light-bg-hover: #808080;
155
173
  $btn-light-text: #ffffff;
@@ -157,17 +175,9 @@ $btn-dark-bg: $audi-black;
157
175
  $btn-dark-bg-hover: $audi-dark;
158
176
  $btn-dark-text: #ffffff;
159
177
 
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
- // ============================================================================
178
+ // =============================================================================
169
179
  // FONTS - Fira Sans Condensed
170
- // ============================================================================
180
+ // =============================================================================
171
181
  /* cyrillic-ext */
172
182
  @font-face {
173
183
  font-family: 'Fira Sans Condensed';
@@ -234,16 +244,16 @@ $danger-bg-light: rgba(255, 0, 0, 0.25);
234
244
 
235
245
  $body-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
236
246
 
237
- // ============================================================================
238
- // IMPORT CORE FRAMEWORK (uses dark mode SCSS variables)
239
- // ============================================================================
247
+ // =============================================================================
248
+ // IMPORT CORE FRAMEWORK
249
+ // =============================================================================
240
250
  @import '@keenmate/pure-admin-core/src/scss/core';
241
251
  @import '@keenmate/pure-admin-core/src/scss/utilities';
242
252
  @import '@keenmate/pure-admin-core/src/scss/base-css-variables';
243
253
 
244
- // ============================================================================
254
+ // =============================================================================
245
255
  // AUDI-SPECIFIC COMPONENT OVERRIDES
246
- // ============================================================================
256
+ // =============================================================================
247
257
  .pa-btn--primary {
248
258
  font-weight: $font-weight-bold;
249
259
  color: #ffffff !important;
@@ -293,18 +303,15 @@ $body-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
293
303
  color: var(--pa-sidebar-text) !important;
294
304
  }
295
305
 
296
- // ============================================================================
306
+ // =============================================================================
297
307
  // CSS VARIABLES - DARK MODE (Default)
298
- // ============================================================================
308
+ // =============================================================================
299
309
  :root, .pa-mode-dark {
300
310
  --page-loader-bg: rgba(10, 10, 10, 0.95);
301
311
  --page-loader-spinner-border: #333;
302
312
  --page-loader-spinner-accent: #ff0000;
303
313
 
304
- // Base CSS variables for web components
305
314
  @include output-base-css-variables;
306
-
307
- // Pure Admin theme CSS variables
308
315
  @include output-pa-css-variables;
309
316
 
310
317
  // Daterangepicker overrides (dark mode)
@@ -335,11 +342,10 @@ $body-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
335
342
  --ms-selected-popover-bg: #{$audi-dark};
336
343
  }
337
344
 
338
- // ============================================================================
345
+ // =============================================================================
339
346
  // CSS VARIABLES - LIGHT MODE
340
- // ============================================================================
347
+ // =============================================================================
341
348
  .pa-mode-light {
342
- // Light mode color palette
343
349
  $light-white: #ffffff;
344
350
  $light-gray-50: #f8f9fa;
345
351
  $light-gray-100: #f1f3f5;
@@ -356,24 +362,18 @@ $body-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
356
362
  --page-loader-spinner-border: #d0d0d0;
357
363
  --page-loader-spinner-accent: #ff0000;
358
364
 
359
- // Core colors - light backgrounds
365
+ // Core colors
360
366
  --pa-primary-bg: #{$light-gray-100};
361
367
  --pa-bg-secondary: #{$light-gray-50};
362
368
  --pa-content-bg: #{$light-gray-100};
363
-
364
- // Text colors - dark text on light bg
365
369
  --pa-text-primary: #{$light-gray-900};
366
370
  --pa-text-secondary: #{$light-gray-600};
367
-
368
- // Accent stays red
369
371
  --pa-accent: #ff0000;
370
372
  --pa-accent-hover: rgba(255, 0, 0, 0.1);
371
373
  --pa-accent-light: rgba(255, 0, 0, 0.05);
372
-
373
- // Border - lighter for light mode
374
374
  --pa-border-color: #{$light-gray-200};
375
375
 
376
- // Header/Sidebar/Footer stay dark for contrast
376
+ // Header/Sidebar/Footer stay dark
377
377
  --pa-header-bg: #1a1a1a;
378
378
  --pa-header-border-color: #{$light-gray-300};
379
379
  --pa-header-text: #ffffff;
@@ -388,18 +388,18 @@ $body-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
388
388
  --pa-footer-bg: #1a1a1a;
389
389
  --pa-footer-border-color: #{$light-gray-300};
390
390
 
391
- // Cards - white/light backgrounds
391
+ // Cards
392
392
  --pa-card-bg: #{$light-white};
393
393
  --pa-card-header-bg: #{$light-gray-50};
394
394
  --pa-card-footer-bg: #{$light-gray-50};
395
395
  --pa-card-tabs-bg: #{$light-gray-200};
396
396
 
397
- // Inputs - white backgrounds
397
+ // Inputs
398
398
  --pa-input-bg: #{$light-white};
399
399
  --pa-input-border: #{$light-gray-300};
400
400
  --pa-input-text: #{$light-gray-900};
401
401
 
402
- // Tables - light backgrounds
402
+ // Tables
403
403
  --pa-table-bg: #{$light-white};
404
404
  --pa-table-header-bg: #{$light-gray-100};
405
405
  --pa-table-stripe: #{$light-gray-50};
@@ -409,27 +409,28 @@ $body-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
409
409
  --pa-modal-content-bg: #{$light-white};
410
410
  --pa-modal-overlay-bg: rgba(0, 0, 0, 0.75);
411
411
 
412
- // Buttons - adjust light button for light mode
412
+ // Buttons
413
413
  --pa-btn-light-bg: #{$light-gray-200};
414
414
  --pa-btn-light-bg-hover: #{$light-gray-300};
415
415
  --pa-btn-light-text: #{$light-gray-900};
416
416
  --pa-btn-secondary-bg: #{$light-gray-600};
417
417
  --pa-btn-secondary-bg-hover: #{$light-gray-700};
418
418
 
419
- // Tooltip
419
+ // Tooltip/Popover
420
420
  --pa-tooltip-bg: #{$light-gray-800};
421
421
  --pa-tooltip-text: #ffffff;
422
-
423
- // Popover
424
422
  --pa-popover-content-bg: #{$light-white};
425
423
 
426
- // Semantic colors - slightly adjusted for light mode
424
+ // Semantic colors
427
425
  --pa-success-bg-light: rgba(0, 204, 68, 0.1);
428
426
  --pa-warning-bg-light: rgba(255, 102, 0, 0.1);
429
427
  --pa-danger-bg-light: rgba(255, 0, 0, 0.1);
430
428
  --pa-info-bg-light: rgba(0, 153, 255, 0.1);
431
429
 
432
430
  // Base variables for web components (light mode)
431
+ --base-surface-1: #{$light-white};
432
+ --base-surface-2: #{$light-gray-100};
433
+ --base-surface-3: #{$light-gray-200};
433
434
  --base-primary-bg: #{$light-gray-100};
434
435
  --base-primary-bg-hover: #{$light-gray-200};
435
436
  --base-text-color-1: #{$light-gray-900};
@@ -447,7 +448,6 @@ $body-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
447
448
  --base-tooltip-bg: #{$light-gray-800};
448
449
  --base-tooltip-text-color: #ffffff;
449
450
 
450
- // Daterangepicker overrides (light mode) - must target element directly to override core
451
451
  web-daterangepicker {
452
452
  --drp-dropdown-bg: #{$light-white};
453
453
  --drp-border-color: #{$light-gray-300};
@@ -463,7 +463,6 @@ $body-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
463
463
  --drp-button-cancel-color: #{$light-gray-600};
464
464
  }
465
465
 
466
- // Multiselect overrides (light mode) - must target element directly to override core
467
466
  web-multiselect {
468
467
  --ms-dropdown-bg: #{$light-white};
469
468
  --ms-input-bg: #{$light-white};
@@ -480,14 +479,12 @@ $body-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
480
479
  }
481
480
  }
482
481
 
483
- // Light mode specific component adjustments
482
+ // Light mode component adjustments
484
483
  .pa-mode-light {
485
- // Card shadows lighter
486
484
  .pa-card {
487
485
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
488
486
  }
489
487
 
490
- // Outline secondary button adjustments
491
488
  .pa-btn--outline-secondary {
492
489
  border-color: #adb5bd !important;
493
490
  color: #495057 !important;
@@ -497,4 +494,14 @@ $body-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
497
494
  color: #212529 !important;
498
495
  }
499
496
  }
497
+
498
+ // Profile panel fix - header stays dark, so use light text
499
+ .pa-profile-panel__header {
500
+ .pa-profile-panel__name {
501
+ color: var(--pa-header-text);
502
+ }
503
+ .pa-profile-panel__email {
504
+ color: var(--pa-header-text-secondary);
505
+ }
506
+ }
500
507
  }