@keenmate/pure-admin-core 1.0.0-rc01 → 1.0.0-rc03
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/README.md +71 -46
- package/dist/css/main.css +614 -123
- package/package.json +1 -1
- package/snippets/callouts.html +129 -0
- package/snippets/profile.html +217 -11
- package/src/scss/_base-css-variables.scss +77 -3
- package/src/scss/_core.scss +6 -0
- package/src/scss/core-components/_callouts.scss +139 -0
- package/src/scss/core-components/_cards.scss +2 -2
- package/src/scss/core-components/_profile.scss +125 -41
- package/src/scss/core-components/_scrollbars.scss +41 -0
- package/src/scss/core-components/_statistics.scss +3 -3
- package/src/scss/core-components/_tables.scss +0 -13
- package/src/scss/core-components/_tabs.scss +2 -2
- package/src/scss/core-components/_utilities.scss +53 -0
- package/src/scss/utilities.scss +63 -84
- package/src/scss/variables/_base.scss +185 -61
- package/src/scss/variables/_colors.scss +177 -108
- package/src/scss/variables/_components.scss +12 -6
- package/src/scss/variables/_index.scss +9 -3
- package/src/scss/variables/_layout.scss +2 -2
|
@@ -1,135 +1,186 @@
|
|
|
1
1
|
// ============================================================================
|
|
2
2
|
// COLOR VARIABLES
|
|
3
3
|
// Theme colors, button colors, contextual colors, component colors
|
|
4
|
+
// These variables DERIVE from base variables for unified theming
|
|
4
5
|
// ============================================================================
|
|
5
6
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
$
|
|
14
|
-
$
|
|
15
|
-
$
|
|
16
|
-
$
|
|
17
|
-
$
|
|
18
|
-
$
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
$
|
|
22
|
-
$
|
|
23
|
-
$
|
|
24
|
-
$
|
|
25
|
-
$
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
$
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
$
|
|
32
|
-
$
|
|
33
|
-
$
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
$
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
$
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
7
|
+
@use 'sass:color';
|
|
8
|
+
@use 'base' as *;
|
|
9
|
+
|
|
10
|
+
// =============================================================================
|
|
11
|
+
// LAYOUT COLORS (derived from base)
|
|
12
|
+
// =============================================================================
|
|
13
|
+
|
|
14
|
+
$primary-bg: $base-surface-2 !default;
|
|
15
|
+
$bg-secondary: $base-surface-2 !default;
|
|
16
|
+
$text-primary: $base-text-color-1 !default;
|
|
17
|
+
$text-secondary: $base-text-color-2 !default;
|
|
18
|
+
$border-color: $base-border-color !default;
|
|
19
|
+
$content-background-color: $base-surface-1 !default;
|
|
20
|
+
|
|
21
|
+
// Header colors
|
|
22
|
+
$header-bg: $base-surface-1 !default;
|
|
23
|
+
$header-border-color: $base-border-color !default;
|
|
24
|
+
$header-text: $base-text-color-1 !default;
|
|
25
|
+
$header-text-secondary: $base-text-color-2 !default;
|
|
26
|
+
$header-profile-name-color: $base-text-color-1 !default;
|
|
27
|
+
|
|
28
|
+
// Sidebar colors
|
|
29
|
+
$sidebar-bg: $base-surface-2 !default;
|
|
30
|
+
$sidebar-text: $base-text-color-1 !default;
|
|
31
|
+
$sidebar-text-secondary: $base-text-color-2 !default;
|
|
32
|
+
$sidebar-submenu-bg: $base-surface-3 !default;
|
|
33
|
+
$sidebar-submenu-hover-bg: color.adjust($base-surface-3, $lightness: -5%) !default;
|
|
34
|
+
$sidebar-submenu-active-bg: color.adjust($base-surface-3, $lightness: -10%) !default;
|
|
35
|
+
|
|
36
|
+
// Footer colors
|
|
37
|
+
$footer-bg: $base-surface-1 !default;
|
|
38
|
+
$footer-border-color: $base-border-color !default;
|
|
39
|
+
|
|
40
|
+
// Accent colors (derived from base)
|
|
41
|
+
$accent-color: $base-accent-color !default;
|
|
42
|
+
$accent-hover: $base-accent-color-light-hover !default;
|
|
43
|
+
$accent-light: $base-accent-color-light !default;
|
|
44
|
+
|
|
45
|
+
// =============================================================================
|
|
46
|
+
// CARD COLORS (derived from base surfaces)
|
|
47
|
+
// =============================================================================
|
|
48
|
+
|
|
49
|
+
$card-bg: $base-surface-1 !default;
|
|
50
|
+
$card-header-bg: $base-surface-2 !default;
|
|
51
|
+
$card-footer-bg: $base-surface-1 !default;
|
|
52
|
+
$card-tabs-bg: $base-surface-2 !default;
|
|
53
|
+
|
|
54
|
+
// =============================================================================
|
|
55
|
+
// INPUT COLORS (derived from base input vars)
|
|
56
|
+
// =============================================================================
|
|
57
|
+
|
|
58
|
+
$input-bg: $base-input-bg !default;
|
|
59
|
+
$input-border: #ced4da !default; // Extracted from base-input-border
|
|
60
|
+
$input-text: $base-input-color !default;
|
|
61
|
+
|
|
62
|
+
// =============================================================================
|
|
63
|
+
// TABLE COLORS (derived from base surfaces)
|
|
64
|
+
// =============================================================================
|
|
65
|
+
|
|
66
|
+
$table-stripe: $base-surface-2 !default;
|
|
67
|
+
$table-bg: $base-surface-1 !default;
|
|
68
|
+
$table-header-bg: $base-surface-2 !default;
|
|
69
|
+
$table-hover-bg: $base-surface-2 !default;
|
|
46
70
|
|
|
47
71
|
// Table row hover accent (border)
|
|
48
72
|
$table-hover-accent-width: 0 !default;
|
|
49
|
-
$table-hover-accent-color: $accent-color !default;
|
|
73
|
+
$table-hover-accent-color: $base-accent-color !default;
|
|
50
74
|
$table-hover-accent-position: left !default;
|
|
51
75
|
|
|
52
|
-
//
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
76
|
+
// =============================================================================
|
|
77
|
+
// BUTTON COLORS (derived from base contextual colors)
|
|
78
|
+
// =============================================================================
|
|
79
|
+
|
|
80
|
+
// Primary button (uses accent)
|
|
81
|
+
$btn-primary-bg: $base-accent-color !default;
|
|
82
|
+
$btn-primary-bg-hover: $base-accent-color-hover !default;
|
|
83
|
+
$btn-primary-text: $base-text-color-on-accent !default;
|
|
84
|
+
|
|
85
|
+
// Secondary button
|
|
56
86
|
$btn-secondary-bg: #6c757d !default;
|
|
57
87
|
$btn-secondary-bg-hover: #545b62 !default;
|
|
58
88
|
$btn-secondary-text: #ffffff !default;
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
$btn-success-
|
|
62
|
-
$btn-
|
|
63
|
-
$btn-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
$btn-
|
|
67
|
-
$btn-
|
|
68
|
-
$btn-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
$btn-
|
|
72
|
-
$btn-
|
|
73
|
-
$btn-
|
|
74
|
-
$btn-
|
|
89
|
+
|
|
90
|
+
// Success button (derived from base success)
|
|
91
|
+
$btn-success-bg: $base-success-color !default;
|
|
92
|
+
$btn-success-bg-hover: $base-success-color-hover !default;
|
|
93
|
+
$btn-success-text: $base-text-on-success !default;
|
|
94
|
+
|
|
95
|
+
// Danger button (derived from base danger)
|
|
96
|
+
$btn-danger-bg: $base-danger-color !default;
|
|
97
|
+
$btn-danger-bg-hover: $base-danger-color-hover !default;
|
|
98
|
+
$btn-danger-text: $base-text-on-danger !default;
|
|
99
|
+
|
|
100
|
+
// Warning button (derived from base warning)
|
|
101
|
+
$btn-warning-bg: $base-warning-color !default;
|
|
102
|
+
$btn-warning-bg-hover: $base-warning-color-hover !default;
|
|
103
|
+
$btn-warning-text: $base-text-on-warning !default;
|
|
104
|
+
$btn-warning-color: $base-text-on-warning !default;
|
|
105
|
+
|
|
106
|
+
// Info button (derived from base info)
|
|
107
|
+
$btn-info-bg: $base-info-color !default;
|
|
108
|
+
$btn-info-bg-hover: $base-info-color-hover !default;
|
|
109
|
+
$btn-info-text: $base-text-on-info !default;
|
|
110
|
+
|
|
111
|
+
// Light button
|
|
112
|
+
$btn-light-bg: $base-surface-2 !default;
|
|
113
|
+
$btn-light-bg-hover: $base-surface-3 !default;
|
|
114
|
+
$btn-light-text: $base-text-color-1 !default;
|
|
115
|
+
|
|
116
|
+
// Dark button
|
|
75
117
|
$btn-dark-bg: #343a40 !default;
|
|
76
118
|
$btn-dark-bg-hover: #1d2124 !default;
|
|
77
119
|
$btn-dark-text: #ffffff !default;
|
|
78
120
|
|
|
79
|
-
//
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
$success-
|
|
85
|
-
$success-
|
|
86
|
-
$success-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
$
|
|
90
|
-
$
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
$danger-
|
|
94
|
-
$danger-
|
|
95
|
-
$danger-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
$
|
|
99
|
-
$
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
$warning-
|
|
103
|
-
$warning-
|
|
104
|
-
$warning-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
$
|
|
108
|
-
$
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
$info-
|
|
112
|
-
$info-
|
|
113
|
-
$info-
|
|
114
|
-
|
|
115
|
-
|
|
121
|
+
// =============================================================================
|
|
122
|
+
// CONTEXTUAL COLORS (derived from base contextual)
|
|
123
|
+
// =============================================================================
|
|
124
|
+
|
|
125
|
+
// Success colors
|
|
126
|
+
$success-bg: $base-success-color !default;
|
|
127
|
+
$success-bg-hover: $base-success-color-hover !default;
|
|
128
|
+
$success-bg-light: $base-success-bg-light !default;
|
|
129
|
+
$success-bg-subtle: $base-success-bg-subtle !default;
|
|
130
|
+
$success-border: $base-success-border !default;
|
|
131
|
+
$success-text: $base-success-text !default;
|
|
132
|
+
$success-text-light: $base-success-text-light !default;
|
|
133
|
+
|
|
134
|
+
// Danger colors
|
|
135
|
+
$danger-bg: $base-danger-color !default;
|
|
136
|
+
$danger-bg-hover: $base-danger-color-hover !default;
|
|
137
|
+
$danger-bg-light: $base-danger-bg-light !default;
|
|
138
|
+
$danger-bg-subtle: $base-danger-bg-subtle !default;
|
|
139
|
+
$danger-border: $base-danger-border !default;
|
|
140
|
+
$danger-text: $base-danger-text !default;
|
|
141
|
+
$danger-text-light: $base-danger-text-light !default;
|
|
142
|
+
|
|
143
|
+
// Warning colors
|
|
144
|
+
$warning-bg: $base-warning-color !default;
|
|
145
|
+
$warning-bg-hover: $base-warning-color-hover !default;
|
|
146
|
+
$warning-bg-light: $base-warning-bg-light !default;
|
|
147
|
+
$warning-bg-subtle: $base-warning-bg-subtle !default;
|
|
148
|
+
$warning-border: $base-warning-border !default;
|
|
149
|
+
$warning-text: $base-warning-text !default;
|
|
150
|
+
$warning-text-light: $base-warning-text-light !default;
|
|
151
|
+
|
|
152
|
+
// Info colors
|
|
153
|
+
$info-bg: $base-info-color !default;
|
|
154
|
+
$info-bg-hover: $base-info-color-hover !default;
|
|
155
|
+
$info-bg-light: $base-info-bg-light !default;
|
|
156
|
+
$info-bg-subtle: $base-info-bg-subtle !default;
|
|
157
|
+
$info-border: $base-info-border !default;
|
|
158
|
+
$info-text: $base-info-text !default;
|
|
159
|
+
$info-text-light: $base-info-text-light !default;
|
|
160
|
+
|
|
161
|
+
// Secondary colors
|
|
116
162
|
$secondary-bg: $btn-secondary-bg !default;
|
|
117
163
|
$secondary-bg-hover: $btn-secondary-bg-hover !default;
|
|
118
164
|
$secondary-text: #383d41 !default;
|
|
119
|
-
$secondary-light-bg:
|
|
120
|
-
$secondary-light-text:
|
|
121
|
-
$secondary-lighter-bg:
|
|
165
|
+
$secondary-light-bg: $base-surface-3 !default;
|
|
166
|
+
$secondary-light-text: $base-text-color-1 !default;
|
|
167
|
+
$secondary-lighter-bg: $base-surface-3 !default;
|
|
122
168
|
|
|
123
|
-
//
|
|
124
|
-
|
|
125
|
-
|
|
169
|
+
// =============================================================================
|
|
170
|
+
// TOOLTIP & POPOVER COLORS (derived from base)
|
|
171
|
+
// =============================================================================
|
|
172
|
+
|
|
173
|
+
$tooltip-bg: $base-tooltip-bg !default;
|
|
174
|
+
$tooltip-text: $base-tooltip-text-color !default;
|
|
126
175
|
|
|
127
|
-
// Popover colors
|
|
128
176
|
$popover-text-light: #ffffff !default;
|
|
129
177
|
$popover-text-dark: #000000 !default;
|
|
130
|
-
$popover-content-bg:
|
|
178
|
+
$popover-content-bg: $base-surface-1 !default;
|
|
179
|
+
|
|
180
|
+
// =============================================================================
|
|
181
|
+
// CODE LANGUAGE COLORS (standalone - not themed)
|
|
182
|
+
// =============================================================================
|
|
131
183
|
|
|
132
|
-
// Code language colors
|
|
133
184
|
$code-language-json: #f59e0b !default;
|
|
134
185
|
$code-language-javascript: #f0db4f !default;
|
|
135
186
|
$code-language-html: #e34c26 !default;
|
|
@@ -143,6 +194,24 @@ $code-syntax-number: #ff6600 !default;
|
|
|
143
194
|
$code-syntax-function: #9933cc !default;
|
|
144
195
|
$code-syntax-property: #dd4a68 !default;
|
|
145
196
|
|
|
146
|
-
//
|
|
197
|
+
// =============================================================================
|
|
198
|
+
// COMPARISON TABLE COLORS
|
|
199
|
+
// =============================================================================
|
|
200
|
+
|
|
147
201
|
$comparison-accent-pink: #ec4899 !default;
|
|
148
202
|
$comparison-accent-orange: #f97316 !default;
|
|
203
|
+
|
|
204
|
+
// =============================================================================
|
|
205
|
+
// CUSTOM THEME COLOR SLOTS (1-9)
|
|
206
|
+
// Themes can override these to provide additional branded colors
|
|
207
|
+
// =============================================================================
|
|
208
|
+
|
|
209
|
+
$color-1: transparent !default;
|
|
210
|
+
$color-2: transparent !default;
|
|
211
|
+
$color-3: transparent !default;
|
|
212
|
+
$color-4: transparent !default;
|
|
213
|
+
$color-5: transparent !default;
|
|
214
|
+
$color-6: transparent !default;
|
|
215
|
+
$color-7: transparent !default;
|
|
216
|
+
$color-8: transparent !default;
|
|
217
|
+
$color-9: transparent !default;
|
|
@@ -143,12 +143,13 @@ $profile-panel-mobile-max-width: 40rem !default; // 400px (was 25rem)
|
|
|
143
143
|
// ============================================================================
|
|
144
144
|
// CARD SYSTEM
|
|
145
145
|
// ============================================================================
|
|
146
|
-
$card-body-padding: 1.6rem !default;
|
|
147
|
-
$card-
|
|
148
|
-
$card-header-padding-
|
|
149
|
-
$card-header-
|
|
150
|
-
$card-
|
|
151
|
-
$card-footer-padding-
|
|
146
|
+
$card-body-padding-v: 1.6rem !default; // 16px vertical
|
|
147
|
+
$card-body-padding-h: 1rem !default; // 10px horizontal
|
|
148
|
+
$card-header-padding-v: 0.8rem !default; // 8px vertical
|
|
149
|
+
$card-header-padding-h: 1rem !default; // 10px horizontal - matches body
|
|
150
|
+
$card-header-min-height: 4rem !default; // 40px - fits xs buttons (32px) with padding
|
|
151
|
+
$card-footer-padding-v: 1.2rem !default; // 12px vertical
|
|
152
|
+
$card-footer-padding-h: 1rem !default; // 10px horizontal - matches body
|
|
152
153
|
$card-grid-min-width: 280px !default;
|
|
153
154
|
$card-stat-padding-v: $spacing-lg !default;
|
|
154
155
|
$card-stat-padding-h: $spacing-base !default;
|
|
@@ -265,6 +266,11 @@ $alert-info-bg: $info-bg-subtle !default;
|
|
|
265
266
|
$alert-info-border: $info-border !default;
|
|
266
267
|
$alert-info-text: $info-bg !default;
|
|
267
268
|
|
|
269
|
+
// ============================================================================
|
|
270
|
+
// CALLOUT SYSTEM
|
|
271
|
+
// ============================================================================
|
|
272
|
+
$callout-border-width: 0.4rem !default; // 4px left border accent
|
|
273
|
+
|
|
268
274
|
// ============================================================================
|
|
269
275
|
// STATS SYSTEM
|
|
270
276
|
// ============================================================================
|
|
@@ -3,11 +3,17 @@
|
|
|
3
3
|
// Central import point for all variable modules
|
|
4
4
|
// ============================================================================
|
|
5
5
|
|
|
6
|
-
//
|
|
7
|
-
|
|
6
|
+
// IMPORTANT: Order matters for dependencies!
|
|
7
|
+
// 1. Base variables are the SOURCE OF TRUTH (standalone, no imports)
|
|
8
|
+
// 2. All other modules can import from base and derive their values
|
|
9
|
+
|
|
10
|
+
// Base variables FIRST - single source of truth for theming
|
|
11
|
+
@forward 'base';
|
|
12
|
+
|
|
13
|
+
// Derived framework variables (can use base values)
|
|
8
14
|
@forward 'typography';
|
|
9
15
|
@forward 'spacing';
|
|
10
16
|
@forward 'colors';
|
|
17
|
+
@forward 'layout';
|
|
11
18
|
@forward 'system';
|
|
12
19
|
@forward 'components';
|
|
13
|
-
@forward 'base';
|
|
@@ -43,8 +43,8 @@ $tablet-breakpoint-min: 769px !default;
|
|
|
43
43
|
$sidebar-width-tablet: 16rem !default; // 160px (was 10rem)
|
|
44
44
|
|
|
45
45
|
// Scrollbar
|
|
46
|
-
$scrollbar-width:
|
|
47
|
-
$scrollbar-border-radius:
|
|
46
|
+
$scrollbar-width: 6px !default;
|
|
47
|
+
$scrollbar-border-radius: 3px !default;
|
|
48
48
|
|
|
49
49
|
// Border radius
|
|
50
50
|
$border-radius-sm: 2px !default;
|