rails_error_dashboard 0.1.1 → 0.1.3
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.
- checksums.yaml +4 -4
- data/README.md +66 -21
- data/app/assets/stylesheets/rails_error_dashboard/_catppuccin_mocha.scss +107 -0
- data/app/assets/stylesheets/rails_error_dashboard/_components.scss +625 -0
- data/app/assets/stylesheets/rails_error_dashboard/_layout.scss +257 -0
- data/app/assets/stylesheets/rails_error_dashboard/_theme_variables.scss +203 -0
- data/app/assets/stylesheets/rails_error_dashboard/application.css +926 -15
- data/app/assets/stylesheets/rails_error_dashboard/application.css.map +7 -0
- data/app/assets/stylesheets/rails_error_dashboard/application.scss +61 -0
- data/app/controllers/rails_error_dashboard/errors_controller.rb +94 -1
- data/app/helpers/rails_error_dashboard/application_helper.rb +42 -4
- data/app/helpers/rails_error_dashboard/backtrace_helper.rb +91 -0
- data/app/helpers/rails_error_dashboard/overview_helper.rb +78 -0
- data/app/helpers/rails_error_dashboard/user_agent_helper.rb +118 -0
- data/app/models/rails_error_dashboard/error_comment.rb +27 -0
- data/app/models/rails_error_dashboard/error_log.rb +145 -0
- data/app/views/layouts/rails_error_dashboard.html.erb +796 -299
- data/app/views/layouts/rails_error_dashboard_old_backup.html.erb +383 -0
- data/app/views/rails_error_dashboard/errors/_error_row.html.erb +2 -0
- data/app/views/rails_error_dashboard/errors/_pattern_insights.html.erb +4 -4
- data/app/views/rails_error_dashboard/errors/_timeline.html.erb +167 -0
- data/app/views/rails_error_dashboard/errors/analytics.html.erb +138 -22
- data/app/views/rails_error_dashboard/errors/index.html.erb +83 -4
- data/app/views/rails_error_dashboard/errors/overview.html.erb +253 -0
- data/app/views/rails_error_dashboard/errors/platform_comparison.html.erb +29 -18
- data/app/views/rails_error_dashboard/errors/show.html.erb +353 -54
- data/config/routes.rb +7 -0
- data/db/migrate/20251226020000_add_workflow_fields_to_error_logs.rb +27 -0
- data/db/migrate/20251226020100_create_error_comments.rb +18 -0
- data/lib/generators/rails_error_dashboard/install/install_generator.rb +8 -2
- data/lib/generators/rails_error_dashboard/install/templates/initializer.rb +21 -0
- data/lib/rails_error_dashboard/commands/batch_delete_errors.rb +1 -1
- data/lib/rails_error_dashboard/commands/batch_resolve_errors.rb +2 -2
- data/lib/rails_error_dashboard/commands/log_error.rb +47 -9
- data/lib/rails_error_dashboard/commands/resolve_error.rb +1 -1
- data/lib/rails_error_dashboard/configuration.rb +8 -0
- data/lib/rails_error_dashboard/error_reporter.rb +4 -4
- data/lib/rails_error_dashboard/logger.rb +105 -0
- data/lib/rails_error_dashboard/middleware/error_catcher.rb +2 -2
- data/lib/rails_error_dashboard/plugin.rb +3 -3
- data/lib/rails_error_dashboard/plugin_registry.rb +2 -2
- data/lib/rails_error_dashboard/plugins/jira_integration_plugin.rb +1 -1
- data/lib/rails_error_dashboard/plugins/metrics_plugin.rb +1 -1
- data/lib/rails_error_dashboard/queries/dashboard_stats.rb +109 -1
- data/lib/rails_error_dashboard/queries/errors_list.rb +61 -6
- data/lib/rails_error_dashboard/services/backtrace_parser.rb +113 -0
- data/lib/rails_error_dashboard/version.rb +1 -1
- data/lib/rails_error_dashboard.rb +2 -0
- metadata +18 -2
- data/lib/tasks/rails_error_dashboard_tasks.rake +0 -4
|
@@ -0,0 +1,257 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Layout & Structural Styles
|
|
3
|
+
// =============================================================================
|
|
4
|
+
// Navbar, sidebar, cards, and page structure
|
|
5
|
+
// Extracted from inline <style> block in layout template
|
|
6
|
+
// =============================================================================
|
|
7
|
+
|
|
8
|
+
@import 'catppuccin_mocha';
|
|
9
|
+
@import 'theme_variables';
|
|
10
|
+
|
|
11
|
+
// =============================================================================
|
|
12
|
+
// NAVBAR
|
|
13
|
+
// =============================================================================
|
|
14
|
+
|
|
15
|
+
.navbar {
|
|
16
|
+
background: linear-gradient(135deg, var(--primary-color), #6D28D9);
|
|
17
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
18
|
+
color: white;
|
|
19
|
+
|
|
20
|
+
// Ensure all navbar text is white
|
|
21
|
+
.navbar-brand,
|
|
22
|
+
.text-white,
|
|
23
|
+
small {
|
|
24
|
+
color: white !important;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.theme-toggle {
|
|
29
|
+
cursor: pointer;
|
|
30
|
+
padding: 0.5rem 1rem;
|
|
31
|
+
border-radius: 0.5rem;
|
|
32
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
33
|
+
color: white;
|
|
34
|
+
border: none;
|
|
35
|
+
transition: background-color 0.2s;
|
|
36
|
+
|
|
37
|
+
&:hover {
|
|
38
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// =============================================================================
|
|
43
|
+
// SIDEBAR
|
|
44
|
+
// =============================================================================
|
|
45
|
+
|
|
46
|
+
.sidebar {
|
|
47
|
+
background: var(--sidebar-bg);
|
|
48
|
+
min-height: calc(100vh - 56px);
|
|
49
|
+
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
|
|
50
|
+
|
|
51
|
+
.nav-link {
|
|
52
|
+
color: var(--text-color);
|
|
53
|
+
padding: 0.75rem 1.5rem;
|
|
54
|
+
border-left: 3px solid transparent;
|
|
55
|
+
transition: all 0.2s;
|
|
56
|
+
|
|
57
|
+
&:hover {
|
|
58
|
+
background-color: var(--sidebar-hover);
|
|
59
|
+
color: var(--primary-color);
|
|
60
|
+
border-left-color: var(--primary-color);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&.active {
|
|
64
|
+
background-color: var(--nav-active-bg);
|
|
65
|
+
color: var(--primary-color);
|
|
66
|
+
border-left-color: var(--primary-color);
|
|
67
|
+
font-weight: 600;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// =============================================================================
|
|
73
|
+
// STAT CARDS (Dashboard Overview)
|
|
74
|
+
// =============================================================================
|
|
75
|
+
|
|
76
|
+
.stat-card {
|
|
77
|
+
border-radius: 0.75rem;
|
|
78
|
+
border: none;
|
|
79
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
80
|
+
transition: transform 0.2s, box-shadow 0.2s;
|
|
81
|
+
|
|
82
|
+
&:hover {
|
|
83
|
+
transform: translateY(-2px);
|
|
84
|
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&.updated {
|
|
88
|
+
animation: statPulse 0.5s ease-out;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.stat-value {
|
|
93
|
+
font-size: 2rem;
|
|
94
|
+
font-weight: 700;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.stat-label {
|
|
98
|
+
font-size: 0.875rem;
|
|
99
|
+
text-transform: uppercase;
|
|
100
|
+
letter-spacing: 0.05em;
|
|
101
|
+
|
|
102
|
+
// Light mode
|
|
103
|
+
color: #6B7280;
|
|
104
|
+
|
|
105
|
+
// Dark mode - brighter for better visibility
|
|
106
|
+
[data-theme="dark"] & {
|
|
107
|
+
color: var(--text-secondary);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
// =============================================================================
|
|
112
|
+
// ERROR STATUS
|
|
113
|
+
// =============================================================================
|
|
114
|
+
|
|
115
|
+
.error-status-resolved {
|
|
116
|
+
color: var(--success-color);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.error-status-unresolved {
|
|
120
|
+
color: var(--danger-color);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// =============================================================================
|
|
124
|
+
// CHART CONTAINER
|
|
125
|
+
// =============================================================================
|
|
126
|
+
|
|
127
|
+
.chart-container {
|
|
128
|
+
position: relative;
|
|
129
|
+
height: 300px;
|
|
130
|
+
margin: 1rem 0;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
// =============================================================================
|
|
134
|
+
// MOBILE OFFCANVAS MENU
|
|
135
|
+
// =============================================================================
|
|
136
|
+
|
|
137
|
+
[data-theme="dark"] {
|
|
138
|
+
.offcanvas {
|
|
139
|
+
background-color: var(--sidebar-bg);
|
|
140
|
+
color: var(--text-color);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.offcanvas-header {
|
|
144
|
+
border-color: var(--border-color);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.offcanvas-title {
|
|
148
|
+
color: var(--text-color);
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
// =============================================================================
|
|
153
|
+
// LOADING INDICATOR
|
|
154
|
+
// =============================================================================
|
|
155
|
+
|
|
156
|
+
#loading-indicator {
|
|
157
|
+
position: fixed;
|
|
158
|
+
top: 0;
|
|
159
|
+
left: 0;
|
|
160
|
+
right: 0;
|
|
161
|
+
height: 3px;
|
|
162
|
+
background: linear-gradient(90deg, #8B5CF6 0%, #6D28D9 100%);
|
|
163
|
+
transform: scaleX(0);
|
|
164
|
+
transform-origin: left;
|
|
165
|
+
transition: transform 0.3s ease;
|
|
166
|
+
z-index: 9999;
|
|
167
|
+
display: none;
|
|
168
|
+
|
|
169
|
+
&.active {
|
|
170
|
+
display: block;
|
|
171
|
+
animation: loadingProgress 2s ease-in-out forwards;
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
// Live indicator pulse
|
|
176
|
+
#live-indicator {
|
|
177
|
+
animation: pulse 2s ease-in-out infinite;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
// =============================================================================
|
|
181
|
+
// ANIMATIONS
|
|
182
|
+
// =============================================================================
|
|
183
|
+
|
|
184
|
+
// Loading progress animation
|
|
185
|
+
@keyframes loadingProgress {
|
|
186
|
+
0% {
|
|
187
|
+
transform: scaleX(0);
|
|
188
|
+
}
|
|
189
|
+
50% {
|
|
190
|
+
transform: scaleX(0.7);
|
|
191
|
+
}
|
|
192
|
+
100% {
|
|
193
|
+
transform: scaleX(1);
|
|
194
|
+
opacity: 0;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
// Stat card pulse animation
|
|
199
|
+
@keyframes statPulse {
|
|
200
|
+
0%, 100% {
|
|
201
|
+
transform: scale(1);
|
|
202
|
+
}
|
|
203
|
+
50% {
|
|
204
|
+
transform: scale(1.05);
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
// Live indicator pulse
|
|
209
|
+
@keyframes pulse {
|
|
210
|
+
0%, 100% {
|
|
211
|
+
opacity: 1;
|
|
212
|
+
}
|
|
213
|
+
50% {
|
|
214
|
+
opacity: 0.5;
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
// New error slide-in animation
|
|
219
|
+
@keyframes slideInFade {
|
|
220
|
+
0% {
|
|
221
|
+
transform: translateY(-20px);
|
|
222
|
+
opacity: 0;
|
|
223
|
+
background-color: #FEF3C7;
|
|
224
|
+
}
|
|
225
|
+
10% {
|
|
226
|
+
transform: translateY(0);
|
|
227
|
+
opacity: 1;
|
|
228
|
+
background-color: #FEF3C7;
|
|
229
|
+
}
|
|
230
|
+
100% {
|
|
231
|
+
background-color: transparent;
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
// Dark mode - adjust new error highlight color
|
|
236
|
+
[data-theme="dark"] {
|
|
237
|
+
@keyframes slideInFade {
|
|
238
|
+
0% {
|
|
239
|
+
transform: translateY(-20px);
|
|
240
|
+
opacity: 0;
|
|
241
|
+
background-color: #{ctp-opacity($ctp-yellow, 0.3)};
|
|
242
|
+
}
|
|
243
|
+
10% {
|
|
244
|
+
transform: translateY(0);
|
|
245
|
+
opacity: 1;
|
|
246
|
+
background-color: #{ctp-opacity($ctp-yellow, 0.3)};
|
|
247
|
+
}
|
|
248
|
+
100% {
|
|
249
|
+
background-color: transparent;
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
// Highlight new errors in table
|
|
255
|
+
#error_list tr:first-child.new-error {
|
|
256
|
+
animation: slideInFade 3s ease-out;
|
|
257
|
+
}
|
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Theme Variables - Semantic Color Mapping
|
|
3
|
+
// =============================================================================
|
|
4
|
+
// Maps Catppuccin Mocha colors to semantic UI purposes
|
|
5
|
+
// This file defines how Catppuccin colors are used throughout the dashboard
|
|
6
|
+
// =============================================================================
|
|
7
|
+
|
|
8
|
+
@import 'catppuccin_mocha';
|
|
9
|
+
|
|
10
|
+
// =============================================================================
|
|
11
|
+
// LIGHT THEME (Default)
|
|
12
|
+
// =============================================================================
|
|
13
|
+
// Using existing light theme colors for backward compatibility
|
|
14
|
+
// Future enhancement: Switch to Catppuccin Latte palette
|
|
15
|
+
|
|
16
|
+
:root {
|
|
17
|
+
// Semantic Colors
|
|
18
|
+
--primary-color: #8B5CF6; // Purple (Violet)
|
|
19
|
+
--success-color: #10B981; // Green (Emerald)
|
|
20
|
+
--danger-color: #EF4444; // Red
|
|
21
|
+
--warning-color: #F59E0B; // Amber
|
|
22
|
+
--info-color: #3B82F6; // Blue
|
|
23
|
+
--secondary-color: #6B7280; // Gray
|
|
24
|
+
|
|
25
|
+
// Backgrounds
|
|
26
|
+
--bg-color: #F3F4F6; // Off-white
|
|
27
|
+
--card-bg: #FFFFFF; // White
|
|
28
|
+
--sidebar-bg: #FFFFFF; // White
|
|
29
|
+
--sidebar-hover: #F9FAFB; // Very light gray
|
|
30
|
+
--nav-active-bg: #EDE9FE; // Light purple
|
|
31
|
+
--table-hover: #F9FAFB; // Light gray
|
|
32
|
+
--code-bg: #F9FAFB; // Light gray
|
|
33
|
+
|
|
34
|
+
// Text
|
|
35
|
+
--text-color: #1F2937; // Dark gray
|
|
36
|
+
--text-secondary: #4B5563; // Medium gray
|
|
37
|
+
--text-muted: #9CA3AF; // Light gray
|
|
38
|
+
--text-link: #3B82F6; // Blue
|
|
39
|
+
--text-link-hover: #2563EB; // Darker blue
|
|
40
|
+
|
|
41
|
+
// Borders
|
|
42
|
+
--border-color: #E5E7EB; // Light gray
|
|
43
|
+
--border-subtle: #F3F4F6; // Very light gray
|
|
44
|
+
|
|
45
|
+
// Platform Colors (light theme)
|
|
46
|
+
--platform-ios: #000000; // Black
|
|
47
|
+
--platform-android: #3DDC84; // Android green
|
|
48
|
+
--platform-web: #3B82F6; // Blue
|
|
49
|
+
--platform-api: #8B5CF6; // Purple
|
|
50
|
+
|
|
51
|
+
// Chart Colors (light theme - for JavaScript access)
|
|
52
|
+
--chart-line-1: #EF4444; // Red
|
|
53
|
+
--chart-line-2: #10B981; // Green
|
|
54
|
+
--chart-line-3: #F59E0B; // Yellow
|
|
55
|
+
--chart-line-4: #3B82F6; // Blue
|
|
56
|
+
--chart-line-5: #8B5CF6; // Purple
|
|
57
|
+
--chart-grid: rgba(0, 0, 0, 0.1);
|
|
58
|
+
--chart-text: #1F2937;
|
|
59
|
+
--chart-tooltip-bg: #FFFFFF;
|
|
60
|
+
|
|
61
|
+
// Bootstrap Variable Overrides (for light theme)
|
|
62
|
+
--bs-primary: #8B5CF6;
|
|
63
|
+
--bs-success: #10B981;
|
|
64
|
+
--bs-danger: #EF4444;
|
|
65
|
+
--bs-warning: #F59E0B;
|
|
66
|
+
--bs-info: #3B82F6;
|
|
67
|
+
--bs-secondary: #6B7280;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
// =============================================================================
|
|
71
|
+
// DARK THEME - Catppuccin Mocha
|
|
72
|
+
// =============================================================================
|
|
73
|
+
// Applied when [data-theme="dark"] attribute is set on <html>
|
|
74
|
+
|
|
75
|
+
[data-theme="dark"] {
|
|
76
|
+
// ---------------------------------------------------------------------------
|
|
77
|
+
// Semantic Colors - Mapped to Catppuccin Mocha
|
|
78
|
+
// ---------------------------------------------------------------------------
|
|
79
|
+
--primary-color: var(--ctp-mauve); // #cba6f7 - Brand, primary actions
|
|
80
|
+
--success-color: var(--ctp-green); // #a6e3a1 - Resolved, healthy
|
|
81
|
+
--danger-color: var(--ctp-red); // #f38ba8 - Critical errors
|
|
82
|
+
--warning-color: var(--ctp-peach); // #fab387 - High priority
|
|
83
|
+
--info-color: var(--ctp-blue); // #89b4fa - Medium priority
|
|
84
|
+
--secondary-color: var(--ctp-overlay1); // #7f849c - Low priority, muted
|
|
85
|
+
|
|
86
|
+
// ---------------------------------------------------------------------------
|
|
87
|
+
// Backgrounds
|
|
88
|
+
// ---------------------------------------------------------------------------
|
|
89
|
+
--bg-color: var(--ctp-base); // #1e1e2e - Main background
|
|
90
|
+
--card-bg: var(--ctp-surface0); // #313244 - Card backgrounds
|
|
91
|
+
--sidebar-bg: var(--ctp-mantle); // #181825 - Sidebar
|
|
92
|
+
--sidebar-hover: var(--ctp-surface0); // #313244 - Sidebar hover
|
|
93
|
+
--nav-active-bg: var(--ctp-surface1); // #45475a - Active nav item
|
|
94
|
+
--table-hover: var(--ctp-surface0); // #313244 - Table row hover
|
|
95
|
+
--code-bg: var(--ctp-mantle); // #181825 - Code blocks
|
|
96
|
+
|
|
97
|
+
// ---------------------------------------------------------------------------
|
|
98
|
+
// Text Colors
|
|
99
|
+
// ---------------------------------------------------------------------------
|
|
100
|
+
--text-color: var(--ctp-text); // #cdd6f4 - Primary text
|
|
101
|
+
--text-secondary: var(--ctp-subtext1); // #bac2de - Secondary text
|
|
102
|
+
--text-muted: var(--ctp-subtext0); // #a6adc8 - Muted text
|
|
103
|
+
--text-link: var(--ctp-sky); // #89dceb - Links
|
|
104
|
+
--text-link-hover: var(--ctp-sapphire); // #74c7ec - Link hover
|
|
105
|
+
|
|
106
|
+
// ---------------------------------------------------------------------------
|
|
107
|
+
// Borders
|
|
108
|
+
// ---------------------------------------------------------------------------
|
|
109
|
+
--border-color: var(--ctp-surface2); // #585b70 - Primary borders
|
|
110
|
+
--border-subtle: var(--ctp-surface1); // #45475a - Subtle borders
|
|
111
|
+
|
|
112
|
+
// ---------------------------------------------------------------------------
|
|
113
|
+
// Platform-Specific Colors
|
|
114
|
+
// ---------------------------------------------------------------------------
|
|
115
|
+
--platform-ios: var(--ctp-text); // #cdd6f4 - iOS (light on dark)
|
|
116
|
+
--platform-android: var(--ctp-green); // #a6e3a1 - Android green
|
|
117
|
+
--platform-web: var(--ctp-blue); // #89b4fa - Web
|
|
118
|
+
--platform-api: var(--ctp-sapphire); // #74c7ec - API
|
|
119
|
+
|
|
120
|
+
// ---------------------------------------------------------------------------
|
|
121
|
+
// Severity-Specific Colors
|
|
122
|
+
// ---------------------------------------------------------------------------
|
|
123
|
+
--severity-critical: var(--ctp-red); // #f38ba8 - Critical errors
|
|
124
|
+
--severity-high: var(--ctp-peach); // #fab387 - High priority
|
|
125
|
+
--severity-medium: var(--ctp-blue); // #89b4fa - Medium priority
|
|
126
|
+
--severity-low: var(--ctp-overlay1); // #7f849c - Low priority
|
|
127
|
+
|
|
128
|
+
// ---------------------------------------------------------------------------
|
|
129
|
+
// Chart Colors (for Chart.js - accessible via JavaScript)
|
|
130
|
+
// ---------------------------------------------------------------------------
|
|
131
|
+
--chart-line-1: var(--ctp-red); // #f38ba8
|
|
132
|
+
--chart-line-2: var(--ctp-green); // #a6e3a1
|
|
133
|
+
--chart-line-3: var(--ctp-yellow); // #f9e2af
|
|
134
|
+
--chart-line-4: var(--ctp-blue); // #89b4fa
|
|
135
|
+
--chart-line-5: var(--ctp-mauve); // #cba6f7
|
|
136
|
+
--chart-line-6: var(--ctp-teal); // #94e2d5
|
|
137
|
+
--chart-line-7: var(--ctp-pink); // #f5c2e7
|
|
138
|
+
--chart-line-8: var(--ctp-lavender); // #b4befe
|
|
139
|
+
|
|
140
|
+
--chart-grid: #{ctp-opacity($ctp-surface2, 0.3)}; // Subtle grid lines
|
|
141
|
+
--chart-text: var(--ctp-text); // Chart labels
|
|
142
|
+
--chart-tooltip-bg: var(--ctp-surface0); // Tooltip background
|
|
143
|
+
|
|
144
|
+
// ---------------------------------------------------------------------------
|
|
145
|
+
// Bootstrap Variable Overrides (for dark theme)
|
|
146
|
+
// ---------------------------------------------------------------------------
|
|
147
|
+
// Override Bootstrap's default color variables to use Catppuccin palette
|
|
148
|
+
--bs-primary: var(--ctp-mauve);
|
|
149
|
+
--bs-success: var(--ctp-green);
|
|
150
|
+
--bs-danger: var(--ctp-red);
|
|
151
|
+
--bs-warning: var(--ctp-peach);
|
|
152
|
+
--bs-info: var(--ctp-blue);
|
|
153
|
+
--bs-secondary: var(--ctp-overlay1);
|
|
154
|
+
--bs-light: var(--ctp-surface1);
|
|
155
|
+
--bs-dark: var(--ctp-mantle);
|
|
156
|
+
|
|
157
|
+
// Bootstrap component colors
|
|
158
|
+
--bs-body-bg: var(--ctp-base);
|
|
159
|
+
--bs-body-color: var(--ctp-text);
|
|
160
|
+
--bs-border-color: var(--ctp-surface2);
|
|
161
|
+
--bs-link-color: var(--ctp-sky);
|
|
162
|
+
--bs-link-hover-color: var(--ctp-sapphire);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
// =============================================================================
|
|
166
|
+
// Backward Compatibility
|
|
167
|
+
// =============================================================================
|
|
168
|
+
// Support for .dark-mode class (used by JavaScript toggle)
|
|
169
|
+
|
|
170
|
+
.dark-mode {
|
|
171
|
+
// Inherit all dark theme variables
|
|
172
|
+
@extend [data-theme="dark"];
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
// =============================================================================
|
|
176
|
+
// SCSS Utility Variables
|
|
177
|
+
// =============================================================================
|
|
178
|
+
// For use in SCSS calculations and mixins
|
|
179
|
+
|
|
180
|
+
// Spacing scale
|
|
181
|
+
$spacing-xs: 0.25rem; // 4px
|
|
182
|
+
$spacing-sm: 0.5rem; // 8px
|
|
183
|
+
$spacing-md: 1rem; // 16px
|
|
184
|
+
$spacing-lg: 1.5rem; // 24px
|
|
185
|
+
$spacing-xl: 2rem; // 32px
|
|
186
|
+
|
|
187
|
+
// Border radius
|
|
188
|
+
$radius-sm: 0.25rem; // 4px
|
|
189
|
+
$radius-md: 0.375rem; // 6px
|
|
190
|
+
$radius-lg: 0.5rem; // 8px
|
|
191
|
+
$radius-xl: 0.75rem; // 12px
|
|
192
|
+
|
|
193
|
+
// Transitions
|
|
194
|
+
$transition-fast: 150ms ease;
|
|
195
|
+
$transition-normal: 300ms ease;
|
|
196
|
+
$transition-slow: 500ms ease;
|
|
197
|
+
|
|
198
|
+
// Z-index scale
|
|
199
|
+
$z-dropdown: 1000;
|
|
200
|
+
$z-sticky: 1020;
|
|
201
|
+
$z-fixed: 1030;
|
|
202
|
+
$z-modal: 1050;
|
|
203
|
+
$z-tooltip: 1070;
|