@keenmate/pure-admin-core 1.0.0-rc01 → 1.0.0-rc02

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 (16) hide show
  1. package/README.md +59 -22
  2. package/dist/css/main.css +178 -88
  3. package/package.json +1 -1
  4. package/snippets/profile.html +169 -7
  5. package/src/scss/_base-css-variables.scss +63 -3
  6. package/src/scss/_core.scss +3 -0
  7. package/src/scss/core-components/_cards.scss +2 -2
  8. package/src/scss/core-components/_profile.scss +112 -40
  9. package/src/scss/core-components/_scrollbars.scss +41 -0
  10. package/src/scss/core-components/_statistics.scss +3 -3
  11. package/src/scss/core-components/_tabs.scss +2 -2
  12. package/src/scss/variables/_base.scss +185 -61
  13. package/src/scss/variables/_colors.scss +162 -108
  14. package/src/scss/variables/_components.scss +7 -6
  15. package/src/scss/variables/_index.scss +9 -3
  16. package/src/scss/variables/_layout.scss +2 -2
package/src/scss/variables/_base.scss CHANGED
@@ -1,81 +1,205 @@
1
1
  // ============================================================================
2
- // BASE CSS VARIABLES - Source of Truth for Web Components
2
+ // BASE VARIABLES - Single Source of Truth for Theming
3
3
  // ============================================================================
4
- // These $base-* SCSS variables are converted to --base-* CSS custom properties
5
- // by the output-base-css-variables mixin in themes. Web components like
6
- // web-daterangepicker and web-multiselect consume these via fallback chains.
4
+ // These $base-* SCSS variables are the PRIMARY source for all theme colors.
5
+ // Framework variables in _colors.scss, _typography.scss, etc. DERIVE from these.
6
+ // Web components consume these via --base-* CSS custom properties.
7
+ //
8
+ // To create a theme: Override these variables, everything else auto-derives.
7
9
  // ============================================================================
8
10
 
9
11
  @use 'sass:color';
10
- @use 'layout' as *;
11
- @use 'typography' as *;
12
- @use 'spacing' as *;
13
- @use 'colors' as *;
14
- @use 'system' as *;
15
- @use 'components' as *;
16
-
17
- // --- Colors ---
18
- $base-accent-color: $accent-color !default;
12
+
13
+ // =============================================================================
14
+ // ACCENT COLORS
15
+ // Primary brand/interactive color and its variants
16
+ // =============================================================================
17
+
18
+ $base-accent-color: #007bff !default;
19
19
  $base-accent-color-hover: color.adjust($base-accent-color, $lightness: 10%) !default;
20
20
  $base-accent-color-active: color.adjust($base-accent-color, $lightness: 20%) !default;
21
- $base-accent-color-light: $accent-light !default; // Light variant for badge backgrounds
22
- $base-accent-color-light-hover: rgba($base-accent-color, 0.12) !default; // Slightly more opaque on hover
23
- $base-primary-bg: $card-bg !default;
21
+ $base-accent-color-light: rgba($base-accent-color, 0.05) !default;
22
+ $base-accent-color-light-hover: rgba($base-accent-color, 0.12) !default;
23
+
24
+ // =============================================================================
25
+ // TEXT COLORS
26
+ // Hierarchical text colors for different emphasis levels
27
+ // =============================================================================
28
+
29
+ $base-text-color-1: #2c3e50 !default; // Primary text (strongest)
30
+ $base-text-color-2: #6c757d !default; // Secondary text (muted)
31
+ $base-text-color-3: #7a8a99 !default; // Tertiary text (lighter)
32
+ $base-text-color-4: #a3b1bf !default; // Quaternary text (lightest)
33
+ $base-text-color-on-accent: #ffffff !default; // Text on accent backgrounds
34
+
35
+ // =============================================================================
36
+ // SURFACE COLORS
37
+ // Background colors for different surface levels
38
+ // =============================================================================
39
+
40
+ $base-surface-1: #ffffff !default; // Primary surface (cards, modals)
41
+ $base-surface-2: #f8f9fa !default; // Secondary surface (subtle backgrounds)
42
+ $base-surface-3: #e9ecef !default; // Tertiary surface (dividers, borders)
43
+ $base-surface-inverse: #2c3e50 !default; // Inverse surface (tooltips, dark elements)
44
+ $base-overlay-bg: rgba(0, 0, 0, 0.5) !default; // Modal/overlay background
45
+ $base-shadow-color: rgba(0, 0, 0, 0.15) !default; // Shadow color for elevation
46
+
47
+ // Backward compatibility mappings
48
+ $base-primary-bg: $base-surface-1 !default;
24
49
  $base-primary-bg-hover: color.adjust($base-primary-bg, $lightness: -5%) !default;
25
- $base-text-color-1: $text-primary !default;
26
- $base-text-color-2: $text-secondary !default;
27
- $base-text-color-3: color.mix($text-primary, $card-bg, 60%) !default;
28
- $base-text-color-4: color.mix($text-primary, $card-bg, 40%) !default;
29
- $base-text-color-on-accent: #ffffff !default;
30
- $base-border-color: $border-color !default;
31
- // Generic border (full shorthand)
50
+
51
+ // =============================================================================
52
+ // BORDER COLORS
53
+ // Border colors and shorthand
54
+ // =============================================================================
55
+
56
+ $base-border-color: #e1e5e9 !default;
32
57
  $base-border: 1px solid $base-border-color !default;
33
58
 
34
- // --- Input Fields ---
35
- $base-input-bg: $input-bg !default;
36
- $base-input-color: $input-text !default;
37
- $base-input-border: 1px solid $input-border !default;
38
- $base-input-border-hover: 1px solid color.adjust($input-border, $lightness: -10%) !default;
59
+ // =============================================================================
60
+ // INPUT FIELDS
61
+ // Input field styling and states
62
+ // =============================================================================
63
+
64
+ $base-input-bg: $base-surface-1 !default;
65
+ $base-input-color: #495057 !default;
66
+ $base-input-border: 1px solid #ced4da !default;
67
+ $base-input-border-hover: 1px solid #b8bfc6 !default;
39
68
  $base-input-border-focus: 1px solid $base-accent-color !default;
40
69
  $base-input-placeholder-color: $base-text-color-4 !default;
41
- $base-input-bg-disabled: rgba($input-bg, 0.5) !default;
70
+ $base-input-bg-disabled: rgba($base-input-bg, 0.5) !default;
42
71
 
43
- // --- Input Size Heights (unitless multipliers × 10px) ---
72
+ // Input size heights (unitless multipliers for x10px base)
44
73
  $base-input-size-xs-height: 3.1 !default; // 31px
45
74
  $base-input-size-sm-height: 3.3 !default; // 33px
46
75
  $base-input-size-md-height: 3.5 !default; // 35px
47
76
  $base-input-size-lg-height: 3.8 !default; // 38px
48
77
  $base-input-size-xl-height: 4.1 !default; // 41px
49
78
 
79
+ // =============================================================================
80
+ // DROPDOWN / POPOVER
81
+ // Floating element styling
82
+ // =============================================================================
83
+
84
+ $base-dropdown-bg: $base-surface-1 !default;
85
+ $base-dropdown-border: 1px solid $base-border-color !default;
86
+ $base-dropdown-box-shadow: 0 8px 16px $base-shadow-color !default;
87
+
88
+ // =============================================================================
89
+ // TOOLTIP
90
+ // Tooltip styling
91
+ // =============================================================================
92
+
93
+ $base-tooltip-bg: $base-surface-inverse !default;
94
+ $base-tooltip-text-color: #ffffff !default;
95
+
96
+ // =============================================================================
97
+ // CONTEXTUAL COLORS - SUCCESS
98
+ // Success/positive semantic colors
99
+ // =============================================================================
100
+
101
+ $base-success-color: #28a745 !default;
102
+ $base-success-color-hover: color.adjust($base-success-color, $lightness: -10%) !default;
103
+ $base-success-bg-light: rgba($base-success-color, 0.1) !default;
104
+ $base-success-bg-subtle: rgba($base-success-color, 0.08) !default;
105
+ $base-success-border: rgba($base-success-color, 0.2) !default;
106
+ $base-success-text: #155724 !default;
107
+ $base-success-text-light: #d4edda !default;
108
+ $base-text-on-success: #ffffff !default;
109
+
110
+ // =============================================================================
111
+ // CONTEXTUAL COLORS - DANGER
112
+ // Danger/error semantic colors
113
+ // =============================================================================
114
+
115
+ $base-danger-color: #dc3545 !default;
116
+ $base-danger-color-hover: color.adjust($base-danger-color, $lightness: -10%) !default;
117
+ $base-danger-bg-light: rgba($base-danger-color, 0.1) !default;
118
+ $base-danger-bg-subtle: rgba($base-danger-color, 0.08) !default;
119
+ $base-danger-border: rgba($base-danger-color, 0.2) !default;
120
+ $base-danger-text: #721c24 !default;
121
+ $base-danger-text-light: #f8d7da !default;
122
+ $base-text-on-danger: #ffffff !default;
123
+
124
+ // =============================================================================
125
+ // CONTEXTUAL COLORS - WARNING
126
+ // Warning semantic colors
127
+ // =============================================================================
128
+
129
+ $base-warning-color: #ffc107 !default;
130
+ $base-warning-color-hover: color.adjust($base-warning-color, $lightness: -10%) !default;
131
+ $base-warning-bg-light: rgba($base-warning-color, 0.1) !default;
132
+ $base-warning-bg-subtle: rgba($base-warning-color, 0.08) !default;
133
+ $base-warning-border: rgba($base-warning-color, 0.2) !default;
134
+ $base-warning-text: #856404 !default;
135
+ $base-warning-text-light: #fff3cd !default;
136
+ $base-text-on-warning: #212529 !default; // Dark text for yellow backgrounds
137
+
138
+ // =============================================================================
139
+ // CONTEXTUAL COLORS - INFO
140
+ // Info semantic colors
141
+ // =============================================================================
142
+
143
+ $base-info-color: #17a2b8 !default;
144
+ $base-info-color-hover: color.adjust($base-info-color, $lightness: -10%) !default;
145
+ $base-info-bg-light: rgba($base-info-color, 0.1) !default;
146
+ $base-info-bg-subtle: rgba($base-info-color, 0.08) !default;
147
+ $base-info-border: rgba($base-info-color, 0.2) !default;
148
+ $base-info-text: #0c5460 !default;
149
+ $base-info-text-light: #d1ecf1 !default;
150
+ $base-text-on-info: #ffffff !default;
151
+
152
+ // =============================================================================
153
+ // INTERACTIVE STATES
154
+ // Generic interaction feedback colors
155
+ // =============================================================================
156
+
157
+ $base-hover-overlay: rgba(0, 0, 0, 0.04) !default;
158
+ $base-active-overlay: rgba(0, 0, 0, 0.08) !default;
159
+ $base-focus-ring-color: $base-accent-color !default;
160
+ $base-focus-ring-width: 3px !default;
161
+
162
+ // =============================================================================
163
+ // TYPOGRAPHY
164
+ // Font families, sizes, weights, and line heights
165
+ // =============================================================================
166
+
167
+ $base-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !default;
168
+ $base-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
169
+
170
+ // Font sizes (unitless multipliers for x10px base)
171
+ $base-font-size-2xs: 1.0 !default; // 10px
172
+ $base-font-size-xs: 1.2 !default; // 12px
173
+ $base-font-size-sm: 1.4 !default; // 14px
174
+ $base-font-size-base: 1.6 !default; // 16px
175
+ $base-font-size-lg: 1.8 !default; // 18px
176
+ $base-font-size-xl: 2.0 !default; // 20px
177
+ $base-font-size-2xl: 2.4 !default; // 24px
178
+
179
+ // Font weights
180
+ $base-font-weight-normal: 400 !default;
181
+ $base-font-weight-medium: 500 !default;
182
+ $base-font-weight-semibold: 600 !default;
183
+ $base-font-weight-bold: 700 !default;
184
+
185
+ // Line heights
186
+ $base-line-height-tight: 1.25 !default;
187
+ $base-line-height-normal: 1.5 !default;
188
+ $base-line-height-relaxed: 1.75 !default;
189
+
190
+ // =============================================================================
191
+ // BORDER RADIUS
192
+ // Border radius sizes (unitless multipliers for x10px base)
193
+ // =============================================================================
194
+
195
+ $base-border-radius-sm: 0.4 !default; // 4px
196
+ $base-border-radius-md: 0.6 !default; // 6px
197
+ $base-border-radius-lg: 0.8 !default; // 8px
198
+
199
+ // =============================================================================
200
+ // COMPONENT-SPECIFIC DERIVED VALUES
201
+ // Variables that components need, derived from base
202
+ // =============================================================================
203
+
50
204
  // Command palette input height (must be after $base-input-size-* variables)
51
- $command-palette-input-height: #{$base-input-size-lg-height}rem !default; // 38px (lg size)
52
-
53
- // --- Dropdown/Popover ---
54
- $base-dropdown-bg: $card-bg !default;
55
- $base-dropdown-border: 1px solid $border-color !default;
56
- $base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !default;
57
-
58
- // --- Tooltip ---
59
- $base-tooltip-bg: $tooltip-bg !default;
60
- $base-tooltip-text-color: $tooltip-text !default;
61
-
62
- // --- Typography (unitless multipliers for × 10px base) ---
63
- $base-font-family: $body-font-family !default;
64
- $base-font-size-2xs: 1.0 !default; // × 10px = 10px
65
- $base-font-size-xs: 1.2 !default; // × 10px = 12px
66
- $base-font-size-sm: 1.4 !default; // × 10px = 14px
67
- $base-font-size-base: 1.6 !default; // × 10px = 16px
68
- $base-font-size-lg: 1.8 !default; // × 10px = 18px
69
- $base-font-size-xl: 2.0 !default; // × 10px = 20px
70
- $base-font-size-2xl: 2.4 !default; // × 10px = 24px
71
- $base-font-weight-normal: $font-weight-normal !default;
72
- $base-font-weight-medium: $font-weight-medium !default;
73
- $base-font-weight-semibold: $font-weight-semibold !default;
74
- $base-line-height-tight: $line-height-tight !default;
75
- $base-line-height-normal: $line-height-base !default;
76
- $base-line-height-relaxed: $line-height-relaxed !default;
77
-
78
- // --- Border Radius (unitless multipliers for × 10px base) ---
79
- $base-border-radius-sm: 0.4 !default; // × 10px = 4px
80
- $base-border-radius-md: 0.6 !default; // × 10px = 6px
81
- $base-border-radius-lg: 0.8 !default; // × 10px = 8px
205
+ $command-palette-input-height: #{$base-input-size-lg-height}rem !default;
package/src/scss/variables/_colors.scss CHANGED
@@ -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
- // Default theme colors (will be overridden by themes)
7
- $primary-bg: #f8f9fa !default;
8
- $bg-secondary: #f8f9fa !default;
9
- $text-primary: #2c3e50 !default;
10
- $text-secondary: #6c757d !default;
11
- $border-color: #e1e5e9 !default;
12
- $header-bg: #ffffff !default;
13
- $header-border-color: #e1e5e9 !default;
14
- $header-text: $text-primary !default;
15
- $header-text-secondary: $text-secondary !default;
16
- $header-profile-name-color: $text-primary !default;
17
- $sidebar-bg: #f1f3f4 !default;
18
- $sidebar-text: $text-primary !default;
19
- $sidebar-text-secondary: $text-secondary !default;
20
- $sidebar-submenu-bg: #e8e8e8 !default;
21
- $sidebar-submenu-hover-bg: #d0d0d0 !default;
22
- $sidebar-submenu-active-bg: #c0c0c0 !default;
23
- $footer-bg: #ffffff !default;
24
- $footer-border-color: #e1e5e9 !default;
25
- $accent-color: #007bff !default;
26
- $accent-hover: rgba(0, 123, 255, 0.1) !default;
27
- $accent-light: rgba(0, 123, 255, 0.05) !default;
28
- $content-background-color: #ffffff !default;
29
-
30
- // Card colors
31
- $card-bg: #ffffff !default;
32
- $card-header-bg: #f8f9fa !default;
33
- $card-footer-bg: #ffffff !default;
34
- $card-tabs-bg: #f8f9fa !default;
35
-
36
- // Input colors
37
- $input-bg: #ffffff !default;
38
- $input-border: #ced4da !default;
39
- $input-text: #495057 !default;
40
-
41
- // Table colors
42
- $table-stripe: #f2f2f2 !default;
43
- $table-bg: #ffffff !default;
44
- $table-header-bg: #f8f9fa !default;
45
- $table-hover-bg: #f8f9fa !default;
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
- // Button colors
53
- $btn-primary-bg: #007bff !default;
54
- $btn-primary-bg-hover: #0056b3 !default;
55
- $btn-primary-text: #ffffff !default;
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
- $btn-success-bg: #28a745 !default;
60
- $btn-success-bg-hover: #1e7e34 !default;
61
- $btn-success-text: #ffffff !default;
62
- $btn-danger-bg: #dc3545 !default;
63
- $btn-danger-bg-hover: #c82333 !default;
64
- $btn-danger-text: #ffffff !default;
65
- $btn-warning-bg: #ffc107 !default;
66
- $btn-warning-bg-hover: #e0a800 !default;
67
- $btn-warning-text: #212529 !default;
68
- $btn-warning-color: #212529 !default;
69
- $btn-info-bg: #17a2b8 !default;
70
- $btn-info-bg-hover: #117a8b !default;
71
- $btn-info-text: #ffffff !default;
72
- $btn-light-bg: #f8f9fa !default;
73
- $btn-light-bg-hover: #e2e6ea !default;
74
- $btn-light-text: #495057 !default;
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
- // Contextual color system - Success (green)
80
- $success-bg: $btn-success-bg !default;
81
- $success-bg-hover: $btn-success-bg-hover !default;
82
- $success-bg-light: rgba(40, 167, 69, 0.1) !default;
83
- $success-bg-subtle: rgba(40, 167, 69, 0.08) !default;
84
- $success-border: rgba(40, 167, 69, 0.2) !default;
85
- $success-text: #155724 !default;
86
- $success-text-light: #d4edda !default;
87
-
88
- // Contextual color system - Danger (red)
89
- $danger-bg: $btn-danger-bg !default;
90
- $danger-bg-hover: $btn-danger-bg-hover !default;
91
- $danger-bg-light: rgba(220, 53, 69, 0.1) !default;
92
- $danger-bg-subtle: rgba(220, 53, 69, 0.08) !default;
93
- $danger-border: rgba(220, 53, 69, 0.2) !default;
94
- $danger-text: #721c24 !default;
95
- $danger-text-light: #f8d7da !default;
96
-
97
- // Contextual color system - Warning (yellow)
98
- $warning-bg: $btn-warning-bg !default;
99
- $warning-bg-hover: $btn-warning-bg-hover !default;
100
- $warning-bg-light: rgba(255, 193, 7, 0.1) !default;
101
- $warning-bg-subtle: rgba(255, 193, 7, 0.08) !default;
102
- $warning-border: rgba(255, 193, 7, 0.2) !default;
103
- $warning-text: #856404 !default;
104
- $warning-text-light: #fff3cd !default;
105
-
106
- // Contextual color system - Info (cyan)
107
- $info-bg: $btn-info-bg !default;
108
- $info-bg-hover: $btn-info-bg-hover !default;
109
- $info-bg-light: rgba(23, 162, 184, 0.1) !default;
110
- $info-bg-subtle: rgba(23, 162, 184, 0.08) !default;
111
- $info-border: rgba(23, 162, 184, 0.2) !default;
112
- $info-text: #0c5460 !default;
113
- $info-text-light: #d1ecf1 !default;
114
-
115
- // Contextual color system - Secondary (gray)
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: #e9ecef !default;
120
- $secondary-light-text: #495057 !default;
121
- $secondary-lighter-bg: #dee2e6 !default;
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
- // Tooltip colors
124
- $tooltip-bg: #2c3e50 !default;
125
- $tooltip-text: #ffffff !default;
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: #ffffff !default;
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,9 @@ $code-syntax-number: #ff6600 !default;
143
194
  $code-syntax-function: #9933cc !default;
144
195
  $code-syntax-property: #dd4a68 !default;
145
196
 
146
- // Comparison table
197
+ // =============================================================================
198
+ // COMPARISON TABLE COLORS
199
+ // =============================================================================
200
+
147
201
  $comparison-accent-pink: #ec4899 !default;
148
202
  $comparison-accent-orange: #f97316 !default;
package/src/scss/variables/_components.scss CHANGED
@@ -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; // 16px (was 1rem)
147
- $card-header-padding-v: 0.8rem !default; // 8px (was 0.5rem)
148
- $card-header-padding-h: 1.6rem !default; // 16px (was 1rem)
149
- $card-header-min-height: 5rem !default; // 50px - consistent height with/without buttons
150
- $card-footer-padding-v: 1.2rem !default; // 12px (was 0.75rem)
151
- $card-footer-padding-h: 1.6rem !default; // 16px (was 1rem)
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;
package/src/scss/variables/_index.scss CHANGED
@@ -3,11 +3,17 @@
3
3
  // Central import point for all variable modules
4
4
  // ============================================================================
5
5
 
6
- // Core variable modules (order matters for dependencies)
7
- @forward 'layout';
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';
package/src/scss/variables/_layout.scss CHANGED
@@ -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: 10px !default;
47
- $scrollbar-border-radius: 5px !default;
46
+ $scrollbar-width: 6px !default;
47
+ $scrollbar-border-radius: 3px !default;
48
48
 
49
49
  // Border radius
50
50
  $border-radius-sm: 2px !default;