@keenmate/pure-admin-theme-dark 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/dark.css +1489 -411
  2. package/package.json +3 -3
  3. package/src/scss/dark.scss +122 -85
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@keenmate/pure-admin-theme-dark",
3
- "version": "1.0.0-rc01",
3
+ "version": "1.0.0-rc04",
4
4
  "description": "Dark theme for Pure Admin with color variants (blue, green, red) via CSS classes",
5
5
  "style": "dist/dark.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-rc01"
22
+ "@keenmate/pure-admin-core": "^1.0.0-rc04"
23
23
  },
24
24
  "devDependencies": {
25
- "@keenmate/pure-admin-core": "^1.0.0-rc01",
25
+ "@keenmate/pure-admin-core": "^1.0.0-rc04",
26
26
  "sass": "^1.70.0"
27
27
  },
28
28
  "publishConfig": {
package/src/scss/dark.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  /* Dark Theme for Pure Admin Visual */
2
2
  @use 'sass:color';
3
3
 
4
- @import '@keenmate/pure-admin-core/src/scss/variables/index';
5
-
6
- // Dark theme color palette
4
+ // ============================================================================
5
+ // DARK THEME COLOR PALETTE
6
+ // ============================================================================
7
7
  $dark-bg-primary: #1a1a1a;
8
8
  $dark-bg-secondary: #2a2a2a;
9
9
  $dark-bg-tertiary: #333333;
@@ -17,67 +17,99 @@ $dark-text-secondary: #b8b8b8;
17
17
 
18
18
  $dark-accent: #4dabf7;
19
19
 
20
- // Color overrides for dark theme
21
- $primary-bg: $dark-bg-primary;
22
- $content-background-color: $dark-bg-primary;
23
- $header-bg: $dark-bg-header;
24
- $sidebar-bg: $dark-bg-sidebar;
25
- $sidebar-submenu-bg: $dark-bg-tertiary;
26
- $sidebar-submenu-hover-bg: $dark-bg-hover;
27
- $sidebar-submenu-active-bg: $dark-bg-quaternary;
28
- $footer-bg: $dark-bg-header;
29
- $border-color: $dark-bg-quaternary;
30
- $text-primary: $dark-text-primary;
31
- $text-secondary: $dark-text-secondary;
32
- $accent-color: $dark-accent;
33
- $accent-hover: rgba(77, 171, 247, 0.15);
34
- $accent-light: rgba(77, 171, 247, 0.08);
35
-
36
- // Sync base variables with theme colors (for web components)
37
- // Colors
38
- $base-accent-color: $accent-color;
39
- $base-accent-color-hover: color.adjust($base-accent-color, $lightness: 10%);
40
- $base-accent-color-active: color.adjust($base-accent-color, $lightness: 20%);
41
- $base-accent-color-light: $accent-light;
42
- $base-accent-color-light-hover: rgba($base-accent-color, 0.12);
43
- $base-primary-bg: $dark-bg-secondary;
44
- $base-primary-bg-hover: $dark-bg-tertiary;
45
- $base-text-color-1: #ffffff;
46
- $base-text-color-2: #b8b8b8;
20
+ // ============================================================================
21
+ // BASE VARIABLES - Single Source of Truth
22
+ // ============================================================================
23
+ // All framework variables will derive from these
24
+
25
+ // Accent colors
26
+ $base-accent-color: $dark-accent;
27
+ $base-accent-color-hover: color.adjust($dark-accent, $lightness: 10%);
28
+ $base-accent-color-active: color.adjust($dark-accent, $lightness: 20%);
29
+ $base-accent-color-light: rgba($dark-accent, 0.08);
30
+ $base-accent-color-light-hover: rgba($dark-accent, 0.12);
31
+
32
+ // Text colors (dark theme = light text)
33
+ $base-text-color-1: $dark-text-primary;
34
+ $base-text-color-2: $dark-text-secondary;
47
35
  $base-text-color-3: #888888;
48
36
  $base-text-color-4: #666666;
49
- $base-text-on-accent: #ffffff;
37
+ $base-text-color-on-accent: #ffffff;
38
+
39
+ // Surface colors (dark theme = dark surfaces)
40
+ $base-surface-1: $dark-bg-secondary; // Cards, modals
41
+ $base-surface-2: $dark-bg-primary; // Page background
42
+ $base-surface-3: $dark-bg-quaternary; // Dividers
43
+ $base-surface-inverse: $dark-text-primary; // Light elements on dark
44
+ $base-overlay-bg: rgba(0, 0, 0, 0.7);
45
+ $base-shadow-color: rgba(0, 0, 0, 0.4);
46
+
47
+ // Border
50
48
  $base-border-color: $dark-bg-quaternary;
51
49
 
52
50
  // Input fields
53
- $base-input-background: $dark-bg-tertiary;
54
- $base-input-color: #ffffff;
51
+ $base-input-bg: $dark-bg-tertiary;
52
+ $base-input-color: $dark-text-primary;
55
53
  $base-input-border: 1px solid $dark-bg-quaternary;
56
- $base-input-border-hover: 1px solid $accent-color;
57
- $base-input-border-focus: 1px solid $accent-color;
54
+ $base-input-border-hover: 1px solid $dark-accent;
55
+ $base-input-border-focus: 1px solid $dark-accent;
58
56
  $base-input-placeholder-color: #666666;
59
- $base-input-background-disabled: rgba($dark-bg-tertiary, 0.5);
60
57
 
61
58
  // Dropdown/Popover
62
- $base-dropdown-background: $dark-bg-secondary;
63
- $base-dropdown-border: 1px solid $dark-bg-quaternary;
59
+ $base-dropdown-bg: $dark-bg-secondary;
60
+ $base-dropdown-border: $dark-bg-quaternary;
64
61
  $base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
65
62
 
66
63
  // Tooltip
67
- $base-tooltip-background: $dark-bg-tertiary;
68
- $base-tooltip-text-color: #ffffff;
64
+ $base-tooltip-bg: $dark-bg-tertiary;
65
+ $base-tooltip-text-color: $dark-text-primary;
66
+
67
+ // Contextual colors (adjusted for dark theme visibility)
68
+ $base-success-color: #059669;
69
+ $base-success-color-hover: #047857;
70
+ $base-success-bg-light: rgba(5, 150, 105, 0.15);
71
+ $base-success-text: #34d399;
72
+ $base-text-on-success: #ffffff;
73
+
74
+ $base-danger-color: #dc2626;
75
+ $base-danger-color-hover: #b91c1c;
76
+ $base-danger-bg-light: rgba(220, 38, 38, 0.15);
77
+ $base-danger-text: #f87171;
78
+ $base-text-on-danger: #ffffff;
79
+
80
+ $base-warning-color: #d97706;
81
+ $base-warning-color-hover: #b45309;
82
+ $base-warning-bg-light: rgba(217, 119, 6, 0.15);
83
+ $base-warning-text: #fbbf24;
84
+ $base-text-on-warning: #ffffff;
85
+
86
+ $base-info-color: #0891b2;
87
+ $base-info-color-hover: #0e7490;
88
+ $base-info-bg-light: rgba(8, 145, 178, 0.15);
89
+ $base-info-text: #22d3ee;
90
+ $base-text-on-info: #ffffff;
91
+
92
+ // Interactive states
93
+ $base-focus-ring-color: rgba($dark-accent, 0.25);
69
94
 
70
- // Form focus colors - must match accent color
71
- $input-focus-border-color: $accent-color;
72
- $select-focus-border-color: $accent-color;
73
- $textarea-focus-border-color: $accent-color;
95
+ // ============================================================================
96
+ // FRAMEWORK VARIABLES - Import and let them derive from base
97
+ // ============================================================================
98
+ @import '@keenmate/pure-admin-core/src/scss/variables/index';
74
99
 
75
- // Checkbox colors - must match accent color
76
- $checkbox-border-color-hover: $accent-color;
77
- $checkbox-border-color-checked: $accent-color;
78
- $checkbox-bg-checked: $accent-color;
79
- $checkbox-bg-indeterminate: $accent-color;
80
- $checkbox-focus-shadow: 0 0 0 2px rgba($accent-color, 0.25);
100
+ // Layout-specific overrides (these are Pure Admin specific)
101
+ $primary-bg: $dark-bg-primary;
102
+ $content-background-color: $dark-bg-primary;
103
+ $header-bg: $dark-bg-header;
104
+ $sidebar-bg: $dark-bg-sidebar;
105
+ $sidebar-submenu-bg: $dark-bg-tertiary;
106
+ $sidebar-submenu-hover-bg: $dark-bg-hover;
107
+ $sidebar-submenu-active-bg: $dark-bg-quaternary;
108
+ $footer-bg: $dark-bg-header;
109
+ $text-primary: $dark-text-primary;
110
+ $text-secondary: $dark-text-secondary;
111
+ $accent-hover: rgba($dark-accent, 0.15);
112
+ $accent-light: rgba($dark-accent, 0.08);
81
113
 
82
114
  // Card colors
83
115
  $card-bg: $dark-bg-secondary;
@@ -87,8 +119,8 @@ $card-tabs-bg: $dark-bg-tertiary;
87
119
 
88
120
  // Input colors
89
121
  $input-bg: $dark-bg-tertiary;
90
- $input-border: $border-color;
91
- $input-text: $text-primary;
122
+ $input-border: $base-border-color;
123
+ $input-text: $dark-text-primary;
92
124
 
93
125
  // Table colors
94
126
  $table-bg: $dark-bg-secondary;
@@ -96,40 +128,45 @@ $table-header-bg: $dark-bg-tertiary;
96
128
  $table-hover-bg: $dark-bg-hover;
97
129
  $table-stripe: $dark-bg-tertiary;
98
130
 
99
- // Button colors
131
+ // Button colors (override from base contextual)
100
132
  $btn-primary-bg: #2563eb;
101
133
  $btn-primary-bg-hover: #1d4ed8;
102
134
  $btn-secondary-bg: #374151;
103
135
  $btn-secondary-bg-hover: #4b5563;
104
- $btn-success-bg: #059669;
105
- $btn-success-bg-hover: #047857;
106
- $btn-warning-bg: #d97706;
107
- $btn-warning-text: #ffffff;
108
- $btn-danger-bg: #dc2626;
109
- $btn-danger-bg-hover: #b91c1c;
110
- $btn-info-bg: #0891b2;
111
- $btn-info-bg-hover: #0e7490;
112
136
  $btn-light-bg: #374151;
113
137
  $btn-light-text: #f3f4f6;
114
138
  $btn-light-bg-hover: #4b5563;
115
139
  $btn-dark-bg: #111827;
116
140
  $btn-dark-bg-hover: #030712;
141
+ $btn-warning-text: #ffffff;
117
142
 
118
- // Validation shadow colors - match button colors
119
- $success-bg: $btn-success-bg;
120
- $success-bg-light: rgba(5, 150, 105, 0.15);
121
- $warning-bg: $btn-warning-bg;
122
- $warning-bg-light: rgba(217, 119, 6, 0.15);
123
- $danger-bg: $btn-danger-bg;
124
- $danger-bg-light: rgba(220, 38, 38, 0.15);
143
+ // Validation shadow colors
144
+ $success-bg-light: $base-success-bg-light;
145
+ $warning-bg-light: $base-warning-bg-light;
146
+ $danger-bg-light: $base-danger-bg-light;
125
147
 
126
148
  // Modal colors
127
- $modal-overlay-bg: rgba(0, 0, 0, 0.7);
149
+ $modal-overlay-bg: $base-overlay-bg;
128
150
  $modal-content-bg: $dark-bg-secondary;
129
151
 
130
152
  // Profile name in header
131
- $header-profile-name-color: #ffffff; // White text on dark header
153
+ $header-profile-name-color: #ffffff;
154
+
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;
159
+
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 $base-focus-ring-color;
132
166
 
167
+ // ============================================================================
168
+ // CORE IMPORTS
169
+ // ============================================================================
133
170
  @import '@keenmate/pure-admin-core/src/scss/core';
134
171
  @import '@keenmate/pure-admin-core/src/scss/utilities';
135
172
  @import '@keenmate/pure-admin-core/src/scss/base-css-variables';
@@ -302,19 +339,19 @@ $header-profile-name-color: #ffffff; // White text on dark header
302
339
  --pa-info-bg-light: rgba(14, 165, 233, 0.1);
303
340
 
304
341
  // Base variables for web components (light mode)
305
- --base-primary-bg: #{$light-bg};
306
- --base-primary-bg-hover: #{$light-surface};
342
+ --base-surface-1: #{$light-card};
343
+ --base-surface-2: #{$light-bg};
344
+ --base-surface-3: #{$light-surface};
307
345
  --base-text-color-1: #{$light-text};
308
346
  --base-text-color-2: #{$light-text-secondary};
347
+ --base-text-color-3: #94a3b8;
348
+ --base-text-color-4: #cbd5e1;
309
349
  --base-accent-color: #{$dark-accent};
310
- --base-accent-color-hover: color.adjust($dark-accent, $lightness: -10%);
311
- --base-accent-color-active: color.adjust($dark-accent, $lightness: -15%);
350
+ --base-accent-color-hover: #{color.adjust($dark-accent, $lightness: -10%)};
351
+ --base-accent-color-active: #{color.adjust($dark-accent, $lightness: -15%)};
312
352
  --base-accent-color-light: rgba(77, 171, 247, 0.1);
313
353
  --base-accent-color-light-hover: rgba(77, 171, 247, 0.15);
314
- --base-text-color-3: #94a3b8;
315
- --base-text-color-4: #cbd5e1;
316
354
  --base-border-color: #{$light-border};
317
- --base-border: 1px solid #{$light-border};
318
355
  --base-input-bg: #{$light-card};
319
356
  --base-input-color: #{$light-text};
320
357
  --base-input-border: 1px solid #{$light-border};
@@ -322,7 +359,7 @@ $header-profile-name-color: #ffffff; // White text on dark header
322
359
  --base-input-border-focus: 1px solid #{$dark-accent};
323
360
  --base-input-placeholder-color: #94a3b8;
324
361
  --base-dropdown-bg: #{$light-card};
325
- --base-dropdown-border: 1px solid #{$light-border};
362
+ --base-dropdown-border: #{$light-border};
326
363
  --base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
327
364
  --base-tooltip-bg: #{$light-text};
328
365
  --base-tooltip-text-color: #ffffff;
@@ -428,8 +465,8 @@ $header-profile-name-color: #ffffff; // White text on dark header
428
465
  --page-loader-spinner-accent: #{$blue-accent};
429
466
 
430
467
  --base-accent-color: #{$blue-accent};
431
- --base-primary-bg: #{$blue-card};
432
- --base-primary-bg-hover: #{$blue-surface};
468
+ --base-surface-1: #{$blue-card};
469
+ --base-surface-2: #{$blue-bg};
433
470
  --base-border-color: #{$blue-surface};
434
471
  --base-input-bg: #{$blue-bg};
435
472
  --base-dropdown-bg: #{$blue-card};
@@ -484,8 +521,8 @@ $header-profile-name-color: #ffffff; // White text on dark header
484
521
  --page-loader-spinner-accent: #{$green-accent};
485
522
 
486
523
  --base-accent-color: #{$green-accent};
487
- --base-primary-bg: #{$green-card};
488
- --base-primary-bg-hover: #{$green-surface};
524
+ --base-surface-1: #{$green-card};
525
+ --base-surface-2: #{$green-bg};
489
526
  --base-border-color: #{$green-surface};
490
527
  --base-input-bg: #{$green-bg};
491
528
  --base-dropdown-bg: #{$green-card};
@@ -540,9 +577,9 @@ $header-profile-name-color: #ffffff; // White text on dark header
540
577
  --page-loader-spinner-accent: #{$red-accent};
541
578
 
542
579
  --base-accent-color: #{$red-accent};
543
- --base-primary-bg: #{$red-card};
544
- --base-primary-bg-hover: #{$red-surface};
580
+ --base-surface-1: #{$red-card};
581
+ --base-surface-2: #{$red-bg};
545
582
  --base-border-color: #{$red-surface};
546
583
  --base-input-bg: #{$red-bg};
547
584
  --base-dropdown-bg: #{$red-card};
548
- }
585
+ }