@keenmate/pure-admin-theme-minimal 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/minimal.css +13034 -0
- package/package.json +31 -0
- package/src/scss/minimal.scss +400 -0
package/package.json
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@keenmate/pure-admin-theme-minimal",
|
|
3
|
+
"version": "1.0.0-rc01",
|
|
4
|
+
"description": "Minimal theme for Pure Admin",
|
|
5
|
+
"style": "dist/minimal.css",
|
|
6
|
+
"exports": {
|
|
7
|
+
".": "./dist/minimal.css",
|
|
8
|
+
"./scss": "./src/scss/minimal.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", "minimal", "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,400 @@
|
|
|
1
|
+
/* Minimal Theme for Pure Admin Visual - Ultra clean, monochrome approach */
|
|
2
|
+
@use 'sass:color';
|
|
3
|
+
|
|
4
|
+
@import '@keenmate/pure-admin-core/src/scss/variables/index';
|
|
5
|
+
|
|
6
|
+
// Minimal theme color palette - grayscale focused
|
|
7
|
+
$minimal-white: #ffffff;
|
|
8
|
+
$minimal-gray-50: #fafafa;
|
|
9
|
+
$minimal-gray-100: #f8f9fa;
|
|
10
|
+
$minimal-gray-150: #f8f8f8;
|
|
11
|
+
$minimal-gray-200: #fcfcfc;
|
|
12
|
+
$minimal-gray-250: #fdfdfd;
|
|
13
|
+
$minimal-gray-300: #f0f0f0;
|
|
14
|
+
$minimal-gray-400: #e8e8e8;
|
|
15
|
+
$minimal-gray-500: #d8d8d8;
|
|
16
|
+
$minimal-gray-600: #e2e6ea;
|
|
17
|
+
$minimal-gray-700: #777777;
|
|
18
|
+
$minimal-gray-800: #555555;
|
|
19
|
+
$minimal-gray-850: #444444;
|
|
20
|
+
$minimal-gray-900: #333333;
|
|
21
|
+
$minimal-dark-500: #343a40;
|
|
22
|
+
$minimal-dark-700: #23272b;
|
|
23
|
+
$minimal-dark-900: #212529;
|
|
24
|
+
|
|
25
|
+
// Layout overrides
|
|
26
|
+
$footer-height: 3.2rem; // 32px (10px base) - was 2rem at 16px base
|
|
27
|
+
$sidebar-width: 29rem; // 290px (10px base)
|
|
28
|
+
|
|
29
|
+
// Color overrides for minimal theme
|
|
30
|
+
$primary-bg: $minimal-white;
|
|
31
|
+
$content-background-color: $minimal-white;
|
|
32
|
+
$header-bg: $minimal-gray-50;
|
|
33
|
+
$sidebar-bg: $minimal-gray-150;
|
|
34
|
+
$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);
|
|
60
|
+
|
|
61
|
+
// Card colors
|
|
62
|
+
$card-bg: $minimal-white;
|
|
63
|
+
$card-header-bg: $minimal-gray-50;
|
|
64
|
+
$card-footer-bg: $minimal-gray-50;
|
|
65
|
+
$card-tabs-bg: $minimal-gray-150;
|
|
66
|
+
|
|
67
|
+
// Input colors
|
|
68
|
+
$input-bg: $minimal-white;
|
|
69
|
+
$input-border: $minimal-gray-400;
|
|
70
|
+
$input-text: $minimal-gray-900;
|
|
71
|
+
|
|
72
|
+
// Table colors
|
|
73
|
+
$table-bg: $minimal-white;
|
|
74
|
+
$table-header-bg: $minimal-gray-100;
|
|
75
|
+
$table-hover-bg: $minimal-gray-100;
|
|
76
|
+
$table-stripe: $minimal-gray-200;
|
|
77
|
+
|
|
78
|
+
// Button colors - minimal grayscale approach with selective color
|
|
79
|
+
$btn-primary-bg: $minimal-gray-800;
|
|
80
|
+
$btn-primary-bg-hover: $minimal-gray-850;
|
|
81
|
+
$btn-secondary-bg: $minimal-gray-400;
|
|
82
|
+
$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
|
+
$btn-light-bg: $minimal-gray-100;
|
|
92
|
+
$btn-light-text: $minimal-gray-900;
|
|
93
|
+
$btn-light-bg-hover: $minimal-gray-600;
|
|
94
|
+
$btn-dark-bg: $minimal-dark-500;
|
|
95
|
+
$btn-dark-bg-hover: $minimal-dark-700;
|
|
96
|
+
|
|
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);
|
|
104
|
+
|
|
105
|
+
// Modal colors
|
|
106
|
+
$modal-overlay-bg: rgba(0, 0, 0, 0.4);
|
|
107
|
+
$modal-content-bg: $minimal-white;
|
|
108
|
+
|
|
109
|
+
@import '@keenmate/pure-admin-core/src/scss/core';
|
|
110
|
+
@import '@keenmate/pure-admin-core/src/scss/utilities';
|
|
111
|
+
@import '@keenmate/pure-admin-core/src/scss/base-css-variables';
|
|
112
|
+
|
|
113
|
+
// ============================================================================
|
|
114
|
+
// CSS VARIABLES - LIGHT MODE (Default)
|
|
115
|
+
// ============================================================================
|
|
116
|
+
:root, .pa-mode-light {
|
|
117
|
+
--page-loader-bg: rgba(255, 255, 255, 0.95);
|
|
118
|
+
--page-loader-spinner-border: #e0e0e0;
|
|
119
|
+
--page-loader-spinner-accent: #{$minimal-gray-800};
|
|
120
|
+
|
|
121
|
+
// Base CSS variables for web components (daterangepicker, multiselect, etc.)
|
|
122
|
+
@include output-base-css-variables;
|
|
123
|
+
|
|
124
|
+
// Pure Admin theme CSS variables for runtime theme switching
|
|
125
|
+
@include output-pa-css-variables;
|
|
126
|
+
|
|
127
|
+
// Web component overrides (light mode)
|
|
128
|
+
--drp-dropdown-bg: #{$minimal-white};
|
|
129
|
+
--drp-border-color: #{$minimal-gray-400};
|
|
130
|
+
--drp-primary-bg: #{$minimal-gray-50};
|
|
131
|
+
--drp-primary-bg-hover: #{$minimal-gray-100};
|
|
132
|
+
--drp-text-primary: #{$minimal-gray-900};
|
|
133
|
+
--drp-text-secondary: #{$minimal-gray-700};
|
|
134
|
+
--drp-button-bg: transparent;
|
|
135
|
+
--drp-button-color: #{$minimal-gray-900};
|
|
136
|
+
--drp-button-accent-text-color: #{$minimal-white};
|
|
137
|
+
--drp-button-today-color: #{$minimal-gray-800};
|
|
138
|
+
--drp-button-clear-color: #{$minimal-gray-700};
|
|
139
|
+
--drp-button-cancel-color: #{$minimal-gray-700};
|
|
140
|
+
|
|
141
|
+
--ms-dropdown-bg: #{$minimal-white};
|
|
142
|
+
--ms-input-bg: #{$minimal-white};
|
|
143
|
+
--ms-primary-bg: #{$minimal-gray-50};
|
|
144
|
+
--ms-primary-bg-hover: #{$minimal-gray-100};
|
|
145
|
+
--ms-border-color: #{$minimal-gray-400};
|
|
146
|
+
--ms-text-color-1: #{$minimal-gray-900};
|
|
147
|
+
--ms-text-color-2: #{$minimal-gray-700};
|
|
148
|
+
--ms-text-color-3: #{$minimal-gray-600};
|
|
149
|
+
--ms-text-color-4: #{$minimal-gray-500};
|
|
150
|
+
--ms-hint-bg: #{$minimal-gray-100};
|
|
151
|
+
--ms-actions-bg: #{$minimal-gray-100};
|
|
152
|
+
--ms-selected-popover-bg: #{$minimal-white};
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
// ============================================================================
|
|
156
|
+
// CSS VARIABLES - DARK MODE
|
|
157
|
+
// ============================================================================
|
|
158
|
+
.pa-mode-dark {
|
|
159
|
+
// Minimal dark palette - grayscale focused
|
|
160
|
+
$dark-bg: #1a1a1a;
|
|
161
|
+
$dark-card: #242424;
|
|
162
|
+
$dark-surface: #2e2e2e;
|
|
163
|
+
$dark-border: #404040;
|
|
164
|
+
$dark-text: #e8e8e8;
|
|
165
|
+
$dark-text-secondary: #a0a0a0;
|
|
166
|
+
|
|
167
|
+
--page-loader-bg: rgba(26, 26, 26, 0.95);
|
|
168
|
+
--page-loader-spinner-border: #404040;
|
|
169
|
+
--page-loader-spinner-accent: #e8e8e8;
|
|
170
|
+
|
|
171
|
+
// Core colors - dark backgrounds
|
|
172
|
+
--pa-primary-bg: #{$dark-bg};
|
|
173
|
+
--pa-bg-secondary: #{$dark-bg};
|
|
174
|
+
--pa-content-bg: #141414;
|
|
175
|
+
|
|
176
|
+
// Text colors - light text on dark bg
|
|
177
|
+
--pa-text-primary: #{$dark-text};
|
|
178
|
+
--pa-text-secondary: #{$dark-text-secondary};
|
|
179
|
+
|
|
180
|
+
// Accent stays grayscale
|
|
181
|
+
--pa-accent: #{$dark-text};
|
|
182
|
+
--pa-accent-hover: rgba(232, 232, 232, 0.15);
|
|
183
|
+
--pa-accent-light: rgba(232, 232, 232, 0.08);
|
|
184
|
+
|
|
185
|
+
// Border
|
|
186
|
+
--pa-border-color: #{$dark-border};
|
|
187
|
+
|
|
188
|
+
// Header - dark grayscale
|
|
189
|
+
--pa-header-bg: #{$dark-card};
|
|
190
|
+
--pa-header-border-color: #{$dark-border};
|
|
191
|
+
--pa-header-text: #{$dark-text};
|
|
192
|
+
--pa-header-text-secondary: #{$dark-text-secondary};
|
|
193
|
+
--pa-header-profile-name-color: #{$dark-text};
|
|
194
|
+
|
|
195
|
+
// Sidebar - dark grayscale
|
|
196
|
+
--pa-sidebar-bg: #{$dark-card};
|
|
197
|
+
--pa-sidebar-text: #{$dark-text};
|
|
198
|
+
--pa-sidebar-text-secondary: #{$dark-text-secondary};
|
|
199
|
+
--pa-sidebar-submenu-bg: #{$dark-bg};
|
|
200
|
+
--pa-sidebar-submenu-hover-bg: rgba(255, 255, 255, 0.08);
|
|
201
|
+
--pa-sidebar-submenu-active-bg: #{$dark-surface};
|
|
202
|
+
|
|
203
|
+
// Footer - dark grayscale
|
|
204
|
+
--pa-footer-bg: #{$dark-card};
|
|
205
|
+
--pa-footer-border-color: #{$dark-border};
|
|
206
|
+
|
|
207
|
+
// Cards - dark backgrounds
|
|
208
|
+
--pa-card-bg: #{$dark-card};
|
|
209
|
+
--pa-card-header-bg: #{$dark-surface};
|
|
210
|
+
--pa-card-footer-bg: #{$dark-surface};
|
|
211
|
+
--pa-card-tabs-bg: #{$dark-border};
|
|
212
|
+
|
|
213
|
+
// Inputs - dark backgrounds
|
|
214
|
+
--pa-input-bg: #{$dark-surface};
|
|
215
|
+
--pa-input-border: #{$dark-border};
|
|
216
|
+
--pa-input-text: #{$dark-text};
|
|
217
|
+
--pa-input-focus-border-color: #{$dark-text};
|
|
218
|
+
|
|
219
|
+
// Input group
|
|
220
|
+
--pa-input-group-prepend-bg: #{$dark-border};
|
|
221
|
+
--pa-input-group-prepend-text: #{$dark-text-secondary};
|
|
222
|
+
--pa-input-group-append-bg: #{$dark-border};
|
|
223
|
+
--pa-input-group-append-text: #{$dark-text-secondary};
|
|
224
|
+
|
|
225
|
+
// Input group buttons
|
|
226
|
+
.pa-input-group__button {
|
|
227
|
+
background-color: $dark-border !important;
|
|
228
|
+
color: $dark-text !important;
|
|
229
|
+
border-color: $dark-border !important;
|
|
230
|
+
|
|
231
|
+
&:hover {
|
|
232
|
+
background-color: $dark-surface !important;
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
// Tables - dark backgrounds
|
|
237
|
+
--pa-table-bg: #{$dark-card};
|
|
238
|
+
--pa-table-header-bg: #{$dark-surface};
|
|
239
|
+
--pa-table-stripe: #{$dark-bg};
|
|
240
|
+
--pa-table-hover-bg: #{$dark-surface};
|
|
241
|
+
|
|
242
|
+
// Modals
|
|
243
|
+
--pa-modal-content-bg: #{$dark-card};
|
|
244
|
+
--pa-modal-overlay-bg: rgba(0, 0, 0, 0.7);
|
|
245
|
+
|
|
246
|
+
// Loader overlay
|
|
247
|
+
--pa-loader-overlay-bg: rgba(0, 0, 0, 0.7);
|
|
248
|
+
|
|
249
|
+
// Profile panel
|
|
250
|
+
--pa-profile-overlay-bg: rgba(0, 0, 0, 0.5);
|
|
251
|
+
|
|
252
|
+
// Tooltip/Popover
|
|
253
|
+
--pa-tooltip-bg: #{$dark-border};
|
|
254
|
+
--pa-tooltip-text: #{$dark-text};
|
|
255
|
+
--pa-popover-content-bg: #{$dark-card};
|
|
256
|
+
|
|
257
|
+
// Command palette
|
|
258
|
+
--pa-command-palette-backdrop-bg: rgba(0, 0, 0, 0.8);
|
|
259
|
+
--pa-command-palette-item-hover-bg: #{$dark-surface};
|
|
260
|
+
--pa-command-palette-item-active-bg: rgba(255, 255, 255, 0.1);
|
|
261
|
+
--pa-command-palette-highlight-bg: rgba(255, 255, 255, 0.15);
|
|
262
|
+
|
|
263
|
+
// Alerts - light text for dark mode visibility
|
|
264
|
+
--pa-alert-info-text: #ffffff;
|
|
265
|
+
--pa-alert-info-bg: rgba(23, 162, 184, 0.3);
|
|
266
|
+
--pa-alert-success-text: #ffffff;
|
|
267
|
+
--pa-alert-success-bg: rgba(40, 167, 69, 0.3);
|
|
268
|
+
--pa-alert-warning-text: #ffffff;
|
|
269
|
+
--pa-alert-warning-bg: rgba(255, 193, 7, 0.3);
|
|
270
|
+
--pa-alert-danger-text: #ffffff;
|
|
271
|
+
--pa-alert-danger-bg: rgba(220, 53, 69, 0.3);
|
|
272
|
+
|
|
273
|
+
// Code inside alerts - inherit alert text color
|
|
274
|
+
.pa-alert code {
|
|
275
|
+
color: inherit;
|
|
276
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
// Buttons - adjust for dark mode (grayscale)
|
|
280
|
+
--pa-btn-primary-bg: #{$dark-text};
|
|
281
|
+
--pa-btn-primary-bg-hover: #ffffff;
|
|
282
|
+
--pa-btn-primary-text: #{$dark-bg};
|
|
283
|
+
--pa-btn-secondary-bg: #{$dark-border};
|
|
284
|
+
--pa-btn-secondary-bg-hover: #{$dark-surface};
|
|
285
|
+
--pa-btn-secondary-text: #{$dark-text};
|
|
286
|
+
--pa-btn-light-bg: #{$dark-surface};
|
|
287
|
+
--pa-btn-light-bg-hover: #{$dark-border};
|
|
288
|
+
--pa-btn-light-text: #{$dark-text};
|
|
289
|
+
|
|
290
|
+
// Semantic colors - kept colored for visibility
|
|
291
|
+
--pa-success-bg: #28a745;
|
|
292
|
+
--pa-success-bg-light: rgba(40, 167, 69, 0.2);
|
|
293
|
+
--pa-warning-bg: #ffc107;
|
|
294
|
+
--pa-warning-bg-light: rgba(255, 193, 7, 0.2);
|
|
295
|
+
--pa-danger-bg: #dc3545;
|
|
296
|
+
--pa-danger-bg-light: rgba(220, 53, 69, 0.2);
|
|
297
|
+
--pa-info-bg: #17a2b8;
|
|
298
|
+
--pa-info-bg-light: rgba(23, 162, 184, 0.2);
|
|
299
|
+
|
|
300
|
+
// Base variables for web components (dark mode)
|
|
301
|
+
--base-primary-bg: #{$dark-bg};
|
|
302
|
+
--base-primary-bg-hover: #{$dark-surface};
|
|
303
|
+
--base-text-color-1: #{$dark-text};
|
|
304
|
+
--base-text-color-2: #{$dark-text-secondary};
|
|
305
|
+
--base-accent-color: #{$dark-text};
|
|
306
|
+
--base-accent-color-hover: #ffffff;
|
|
307
|
+
--base-accent-color-active: #ffffff;
|
|
308
|
+
--base-accent-color-light: rgba(232, 232, 232, 0.15);
|
|
309
|
+
--base-accent-color-light-hover: rgba(232, 232, 232, 0.2);
|
|
310
|
+
--base-text-color-3: #707070;
|
|
311
|
+
--base-text-color-4: #505050;
|
|
312
|
+
--base-border-color: #{$dark-border};
|
|
313
|
+
--base-border: 1px solid #{$dark-border};
|
|
314
|
+
--base-input-bg: #{$dark-surface};
|
|
315
|
+
--base-input-color: #{$dark-text};
|
|
316
|
+
--base-input-border: 1px solid #{$dark-border};
|
|
317
|
+
--base-input-border-hover: 1px solid #{$dark-text};
|
|
318
|
+
--base-input-border-focus: 1px solid #{$dark-text};
|
|
319
|
+
--base-input-placeholder-color: #606060;
|
|
320
|
+
--base-dropdown-bg: #{$dark-card};
|
|
321
|
+
--base-dropdown-border: 1px solid #{$dark-border};
|
|
322
|
+
--base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
|
|
323
|
+
--base-tooltip-bg: #{$dark-border};
|
|
324
|
+
--base-tooltip-text-color: #{$dark-text};
|
|
325
|
+
|
|
326
|
+
// Daterangepicker overrides (dark mode)
|
|
327
|
+
web-daterangepicker {
|
|
328
|
+
--drp-dropdown-bg: #{$dark-card};
|
|
329
|
+
--drp-border-color: #{$dark-border};
|
|
330
|
+
--drp-primary-bg: #{$dark-bg};
|
|
331
|
+
--drp-primary-bg-hover: #{$dark-surface};
|
|
332
|
+
--drp-text-primary: #{$dark-text};
|
|
333
|
+
--drp-text-secondary: #{$dark-text-secondary};
|
|
334
|
+
--drp-button-bg: transparent;
|
|
335
|
+
--drp-button-color: #{$dark-text};
|
|
336
|
+
--drp-button-accent-text-color: #{$dark-bg};
|
|
337
|
+
--drp-button-today-color: #{$dark-text};
|
|
338
|
+
--drp-button-clear-color: #{$dark-text-secondary};
|
|
339
|
+
--drp-button-cancel-color: #{$dark-text-secondary};
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
// Multiselect overrides (dark mode)
|
|
343
|
+
web-multiselect {
|
|
344
|
+
--ms-dropdown-bg: #{$dark-card};
|
|
345
|
+
--ms-input-bg: #{$dark-surface};
|
|
346
|
+
--ms-primary-bg: #{$dark-bg};
|
|
347
|
+
--ms-primary-bg-hover: #{$dark-surface};
|
|
348
|
+
--ms-border-color: #{$dark-border};
|
|
349
|
+
--ms-text-color-1: #{$dark-text};
|
|
350
|
+
--ms-text-color-2: #{$dark-text-secondary};
|
|
351
|
+
--ms-text-color-3: #707070;
|
|
352
|
+
--ms-text-color-4: #505050;
|
|
353
|
+
--ms-hint-bg: #{$dark-bg};
|
|
354
|
+
--ms-actions-bg: #{$dark-bg};
|
|
355
|
+
--ms-selected-popover-bg: #{$dark-card};
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
// ============================================================================
|
|
360
|
+
// DARK MODE COMPONENT ADJUSTMENTS
|
|
361
|
+
// ============================================================================
|
|
362
|
+
.pa-mode-dark {
|
|
363
|
+
// Card shadows darker
|
|
364
|
+
.pa-card {
|
|
365
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
// Primary button - inverted for minimal (light on dark)
|
|
369
|
+
.pa-btn--primary {
|
|
370
|
+
background-color: #e8e8e8 !important;
|
|
371
|
+
color: #1a1a1a !important;
|
|
372
|
+
|
|
373
|
+
&:hover {
|
|
374
|
+
background-color: #ffffff !important;
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
// Secondary button adjustments for dark mode
|
|
379
|
+
.pa-btn--secondary {
|
|
380
|
+
background-color: #404040 !important;
|
|
381
|
+
color: #e8e8e8 !important;
|
|
382
|
+
border-color: #505050 !important;
|
|
383
|
+
|
|
384
|
+
&:hover {
|
|
385
|
+
background-color: #505050 !important;
|
|
386
|
+
border-color: #606060 !important;
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
// Outline secondary button
|
|
391
|
+
.pa-btn--outline-secondary {
|
|
392
|
+
border-color: #606060 !important;
|
|
393
|
+
color: #a0a0a0 !important;
|
|
394
|
+
|
|
395
|
+
&:hover {
|
|
396
|
+
background-color: #404040 !important;
|
|
397
|
+
color: #e8e8e8 !important;
|
|
398
|
+
}
|
|
399
|
+
}
|
|
400
|
+
}
|