@keenmate/pure-admin-theme-minimal 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/minimal.css +1435 -357
  2. package/package.json +3 -3
  3. package/src/scss/minimal.scss +122 -59
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@keenmate/pure-admin-theme-minimal",
3
- "version": "1.0.0-rc01",
3
+ "version": "1.0.0-rc04",
4
4
  "description": "Minimal theme for Pure Admin",
5
5
  "style": "dist/minimal.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/minimal.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  /* Minimal Theme for Pure Admin Visual - Ultra clean, monochrome approach */
2
2
  @use 'sass:color';
3
3
 
4
- @import '@keenmate/pure-admin-core/src/scss/variables/index';
5
-
6
- // Minimal theme color palette - grayscale focused
4
+ // ============================================================================
5
+ // MINIMAL COLOR PALETTE - Grayscale focused
6
+ // ============================================================================
7
7
  $minimal-white: #ffffff;
8
8
  $minimal-gray-50: #fafafa;
9
9
  $minimal-gray-100: #f8f9fa;
@@ -22,41 +22,100 @@ $minimal-dark-500: #343a40;
22
22
  $minimal-dark-700: #23272b;
23
23
  $minimal-dark-900: #212529;
24
24
 
25
+ // ============================================================================
26
+ // BASE VARIABLES - Single Source of Truth
27
+ // ============================================================================
28
+ // All framework variables will derive from these
29
+
30
+ // Accent colors (Minimal uses dark gray as accent)
31
+ $base-accent-color: $minimal-gray-800;
32
+ $base-accent-color-hover: color.adjust($minimal-gray-800, $lightness: 10%);
33
+ $base-accent-color-active: color.adjust($minimal-gray-800, $lightness: 20%);
34
+ $base-accent-color-light: rgba($minimal-gray-800, 0.05);
35
+ $base-accent-color-light-hover: rgba($minimal-gray-800, 0.08);
36
+
37
+ // Text colors
38
+ $base-text-color-1: $minimal-gray-900;
39
+ $base-text-color-2: $minimal-gray-700;
40
+ $base-text-color-3: $minimal-gray-600;
41
+ $base-text-color-4: $minimal-gray-500;
42
+ $base-text-color-on-accent: $minimal-white;
43
+
44
+ // Surface colors
45
+ $base-surface-1: $minimal-white; // Cards, modals
46
+ $base-surface-2: $minimal-gray-50; // Page background
47
+ $base-surface-3: $minimal-gray-400; // Dividers
48
+ $base-surface-inverse: $minimal-gray-900;
49
+ $base-overlay-bg: rgba(0, 0, 0, 0.4);
50
+ $base-shadow-color: rgba(0, 0, 0, 0.1);
51
+
52
+ // Border
53
+ $base-border-color: $minimal-gray-400;
54
+
55
+ // Input fields
56
+ $base-input-bg: $minimal-white;
57
+ $base-input-color: $minimal-gray-900;
58
+ $base-input-border: 1px solid $minimal-gray-400;
59
+ $base-input-border-hover: 1px solid $minimal-gray-700;
60
+ $base-input-border-focus: 1px solid $minimal-gray-800;
61
+ $base-input-placeholder-color: $minimal-gray-500;
62
+
63
+ // Dropdown/Popover
64
+ $base-dropdown-bg: $minimal-white;
65
+ $base-dropdown-border: $minimal-gray-400;
66
+ $base-dropdown-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
67
+
68
+ // Tooltip
69
+ $base-tooltip-bg: $minimal-gray-900;
70
+ $base-tooltip-text-color: $minimal-white;
71
+
72
+ // Contextual colors (kept colorful for visibility in minimal theme)
73
+ $base-success-color: #28a745;
74
+ $base-success-color-hover: #218838;
75
+ $base-success-bg-light: rgba(40, 167, 69, 0.1);
76
+ $base-success-text: #155724;
77
+ $base-text-on-success: $minimal-white;
78
+
79
+ $base-danger-color: #dc3545;
80
+ $base-danger-color-hover: #c82333;
81
+ $base-danger-bg-light: rgba(220, 53, 69, 0.1);
82
+ $base-danger-text: #721c24;
83
+ $base-text-on-danger: $minimal-white;
84
+
85
+ $base-warning-color: #ffc107;
86
+ $base-warning-color-hover: #e0a800;
87
+ $base-warning-bg-light: rgba(255, 193, 7, 0.1);
88
+ $base-warning-text: #856404;
89
+ $base-text-on-warning: $minimal-dark-900;
90
+
91
+ $base-info-color: #17a2b8;
92
+ $base-info-color-hover: #138496;
93
+ $base-info-bg-light: rgba(23, 162, 184, 0.1);
94
+ $base-info-text: #0c5460;
95
+ $base-text-on-info: $minimal-white;
96
+
97
+ // Interactive states
98
+ $base-focus-ring-color: rgba($minimal-gray-800, 0.25);
99
+
100
+ // ============================================================================
101
+ // FRAMEWORK VARIABLES - Import and let them derive from base
102
+ // ============================================================================
103
+ @import '@keenmate/pure-admin-core/src/scss/variables/index';
104
+
25
105
  // Layout overrides
26
- $footer-height: 3.2rem; // 32px (10px base) - was 2rem at 16px base
27
- $sidebar-width: 29rem; // 290px (10px base)
106
+ $footer-height: 3.2rem; // 32px (10px base)
107
+ $sidebar-width: 29rem; // 290px (10px base)
28
108
 
29
- // Color overrides for minimal theme
109
+ // Layout-specific overrides
30
110
  $primary-bg: $minimal-white;
31
111
  $content-background-color: $minimal-white;
32
112
  $header-bg: $minimal-gray-50;
33
113
  $sidebar-bg: $minimal-gray-150;
34
114
  $footer-bg: $minimal-gray-50;
35
- $border-color: $minimal-gray-400;
36
- $text-primary: $minimal-gray-900;
37
- $text-secondary: $minimal-gray-700;
38
- $accent-color: $minimal-gray-800;
39
- $accent-hover: rgba(85, 85, 85, 0.1);
40
- $accent-light: rgba(85, 85, 85, 0.05);
41
-
42
- // Sync base variables with theme colors
43
- $base-accent-color: $accent-color;
44
- $base-accent-color-hover: color.adjust($base-accent-color, $lightness: 10%);
45
- $base-accent-color-active: color.adjust($base-accent-color, $lightness: 20%);
46
- $base-accent-color-light: $accent-light;
47
- $base-accent-color-light-hover: rgba($base-accent-color, 0.08);
48
-
49
- // Form focus colors - must match accent color
50
- $input-focus-border-color: $accent-color;
51
- $select-focus-border-color: $accent-color;
52
- $textarea-focus-border-color: $accent-color;
53
-
54
- // Checkbox colors - must match accent color
55
- $checkbox-border-color-hover: $accent-color;
56
- $checkbox-border-color-checked: $accent-color;
57
- $checkbox-bg-checked: $accent-color;
58
- $checkbox-bg-indeterminate: $accent-color;
59
- $checkbox-focus-shadow: 0 0 0 2px rgba($accent-color, 0.25);
115
+ $text-primary: $base-text-color-1;
116
+ $text-secondary: $base-text-color-2;
117
+ $accent-hover: rgba($minimal-gray-800, 0.1);
118
+ $accent-light: rgba($minimal-gray-800, 0.05);
60
119
 
61
120
  // Card colors
62
121
  $card-bg: $minimal-white;
@@ -65,9 +124,21 @@ $card-footer-bg: $minimal-gray-50;
65
124
  $card-tabs-bg: $minimal-gray-150;
66
125
 
67
126
  // Input colors
68
- $input-bg: $minimal-white;
69
- $input-border: $minimal-gray-400;
70
- $input-text: $minimal-gray-900;
127
+ $input-bg: $base-input-bg;
128
+ $input-border: $base-input-border;
129
+ $input-text: $base-input-color;
130
+
131
+ // Form focus colors
132
+ $input-focus-border-color: $base-accent-color;
133
+ $select-focus-border-color: $base-accent-color;
134
+ $textarea-focus-border-color: $base-accent-color;
135
+
136
+ // Checkbox colors
137
+ $checkbox-border-color-hover: $base-accent-color;
138
+ $checkbox-border-color-checked: $base-accent-color;
139
+ $checkbox-bg-checked: $base-accent-color;
140
+ $checkbox-bg-indeterminate: $base-accent-color;
141
+ $checkbox-focus-shadow: 0 0 0 2px $base-focus-ring-color;
71
142
 
72
143
  // Table colors
73
144
  $table-bg: $minimal-white;
@@ -80,32 +151,24 @@ $btn-primary-bg: $minimal-gray-800;
80
151
  $btn-primary-bg-hover: $minimal-gray-850;
81
152
  $btn-secondary-bg: $minimal-gray-400;
82
153
  $btn-secondary-bg-hover: $minimal-gray-500;
83
- $btn-success-bg: #28a745;
84
- $btn-success-bg-hover: #218838;
85
- $btn-warning-bg: #ffc107;
86
- $btn-warning-text: $minimal-dark-900;
87
- $btn-danger-bg: #dc3545;
88
- $btn-danger-bg-hover: #c82333;
89
- $btn-info-bg: #17a2b8;
90
- $btn-info-bg-hover: #138496;
91
154
  $btn-light-bg: $minimal-gray-100;
92
155
  $btn-light-text: $minimal-gray-900;
93
156
  $btn-light-bg-hover: $minimal-gray-600;
94
157
  $btn-dark-bg: $minimal-dark-500;
95
158
  $btn-dark-bg-hover: $minimal-dark-700;
96
159
 
97
- // Validation shadow colors - match button colors
98
- $success-bg: $btn-success-bg;
99
- $success-bg-light: rgba(40, 167, 69, 0.1);
100
- $warning-bg: $btn-warning-bg;
101
- $warning-bg-light: rgba(255, 193, 7, 0.1);
102
- $danger-bg: $btn-danger-bg;
103
- $danger-bg-light: rgba(220, 53, 69, 0.1);
160
+ // Validation shadow colors
161
+ $success-bg-light: $base-success-bg-light;
162
+ $warning-bg-light: $base-warning-bg-light;
163
+ $danger-bg-light: $base-danger-bg-light;
104
164
 
105
165
  // Modal colors
106
- $modal-overlay-bg: rgba(0, 0, 0, 0.4);
166
+ $modal-overlay-bg: $base-overlay-bg;
107
167
  $modal-content-bg: $minimal-white;
108
168
 
169
+ // ============================================================================
170
+ // CORE IMPORTS
171
+ // ============================================================================
109
172
  @import '@keenmate/pure-admin-core/src/scss/core';
110
173
  @import '@keenmate/pure-admin-core/src/scss/utilities';
111
174
  @import '@keenmate/pure-admin-core/src/scss/base-css-variables';
@@ -118,10 +181,10 @@ $modal-content-bg: $minimal-white;
118
181
  --page-loader-spinner-border: #e0e0e0;
119
182
  --page-loader-spinner-accent: #{$minimal-gray-800};
120
183
 
121
- // Base CSS variables for web components (daterangepicker, multiselect, etc.)
184
+ // Base CSS variables for web components
122
185
  @include output-base-css-variables;
123
186
 
124
- // Pure Admin theme CSS variables for runtime theme switching
187
+ // Pure Admin theme CSS variables
125
188
  @include output-pa-css-variables;
126
189
 
127
190
  // Web component overrides (light mode)
@@ -298,19 +361,19 @@ $modal-content-bg: $minimal-white;
298
361
  --pa-info-bg-light: rgba(23, 162, 184, 0.2);
299
362
 
300
363
  // Base variables for web components (dark mode)
301
- --base-primary-bg: #{$dark-bg};
302
- --base-primary-bg-hover: #{$dark-surface};
364
+ --base-surface-1: #{$dark-card};
365
+ --base-surface-2: #{$dark-bg};
366
+ --base-surface-3: #{$dark-surface};
303
367
  --base-text-color-1: #{$dark-text};
304
368
  --base-text-color-2: #{$dark-text-secondary};
369
+ --base-text-color-3: #707070;
370
+ --base-text-color-4: #505050;
305
371
  --base-accent-color: #{$dark-text};
306
372
  --base-accent-color-hover: #ffffff;
307
373
  --base-accent-color-active: #ffffff;
308
374
  --base-accent-color-light: rgba(232, 232, 232, 0.15);
309
375
  --base-accent-color-light-hover: rgba(232, 232, 232, 0.2);
310
- --base-text-color-3: #707070;
311
- --base-text-color-4: #505050;
312
376
  --base-border-color: #{$dark-border};
313
- --base-border: 1px solid #{$dark-border};
314
377
  --base-input-bg: #{$dark-surface};
315
378
  --base-input-color: #{$dark-text};
316
379
  --base-input-border: 1px solid #{$dark-border};
@@ -318,7 +381,7 @@ $modal-content-bg: $minimal-white;
318
381
  --base-input-border-focus: 1px solid #{$dark-text};
319
382
  --base-input-placeholder-color: #606060;
320
383
  --base-dropdown-bg: #{$dark-card};
321
- --base-dropdown-border: 1px solid #{$dark-border};
384
+ --base-dropdown-border: #{$dark-border};
322
385
  --base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
323
386
  --base-tooltip-bg: #{$dark-border};
324
387
  --base-tooltip-text-color: #{$dark-text};
@@ -397,4 +460,4 @@ $modal-content-bg: $minimal-white;
397
460
  color: #e8e8e8 !important;
398
461
  }
399
462
  }
400
- }
463
+ }