Global CSS Variables
Copy and paste the following CSS styles in your main CSS file according to your project theme. These variables are being referenced across multiple core components.
light.css
1@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
2
3@import "tailwindcss";
4@plugin '@tailwindcss/forms';
5
6@theme {
7 --font-sans: "DM Sans", sans-serif;
8
9 --color-primary-50: #eff3ff;
10 --color-primary-100: #dae2ff;
11 --color-primary-200: #becdff;
12 --color-primary-300: #91aeff;
13 --color-primary-400: #5e84fc;
14 --color-primary-500: #3758f9;
15 --color-primary-600: #2237ee;
16 --color-primary-700: #1a25db;
17 --color-primary-800: #1c20b1;
18 --color-primary-900: #1c228c;
19 --color-primary-950: #161755;
20
21 --color-primary-text: white;
22 --color-neutral-brand-color: #465fff;
23
24 /* Text Color */
25 --color-text-50: #374151;
26 --color-text-100: #6b7280;
27 --color-text-200: #9ca3af;
28 --color-text-300: #e5e7eb;
29
30 /* Context Color */
31 --color-error-500: #ef4444;
32 --color-success-500: #22c55e;
33 --color-warning-500: #eab308;
34 --color-info-500: #0ea5e9;
35
36 /* Title */
37 --color-title-50: #1f2937;
38
39 /* White */
40 --color-white-100: #ffffff;
41 --color-white-90: #ffffffcc;
42 --color-white-80: #ffffffcc;
43 --color-white-70: #ffffffb3;
44 --color-white-60: #ffffff99;
45
46 /* Border Color */
47 --border-color-base-50: #f3f4f6;
48 --border-color-base-100: #e5e7eb;
49 --border-color-base-200: #e5e7eb;
50 --border-color-base-300: #d1d5db;
51
52 --color-chart-line: #e5e7eb;
53
54 /* Foreground Colors */
55 --color-foreground-50: #030712;
56 --color-foreground-100: #111827;
57
58 /* Gray */
59 --color-foreground-soft-50: #111827;
60 --color-foreground-soft-100: #111827;
61 --color-foreground-soft-200: #1f2937;
62 --color-foreground-soft-300: #030712;
63 --color-foreground-soft-400: #1f2937;
64 --color-foreground-soft-500: #374151;
65
66 /* Background Colors */
67 --color-background-50: #ffffff;
68 --color-background-100: #ffffff;
69
70 /* Gray colors */
71 --color-background-soft-50: #f9fafb;
72 --color-background-soft-100: #f3f4f6;
73 --color-background-soft-200: #f3f4f6;
74 --color-background-soft-300: #f3f4f6;
75 --color-background-soft-400: #e5e7eb;
76 --color-background-soft-500: #d1d5db;
77
78 --color-background-success-600: #16a34a;
79
80 /* ======== Button Color =========*/
81
82 /* Primary */
83 --color-button-primary-background: #3758f9;
84 --color-button-primary-hover-background: #2237ee;
85 --color-button-primary-text: #ffffff;
86 --color-button-primary-focus-ring: rgba(55, 88, 249, 0.2);
87
88 /* Outline */
89 --color-button-outline-background: #ffffff;
90 --color-button-outline-hover-background: #f3f4f6;
91 --color-button-outline-border: #d1d5db;
92 --color-button-outline-focus-ring: rgba(152, 162, 179, 0.14);
93 --color-button-outline-text: #1f2937;
94 --color-button-outline-hover-text: #111827;
95 --color-button-outline-disabled-background: #ffffff;
96 --color-button-outline-disabled-text: #9ca3af;
97 --color-button-outline-disabled-border: #f3f4f6;
98
99 /* Disable */
100 --color-button-disabled-background: #f3f4f6;
101 --color-button-disabled-border: #f3f4f6;
102 --color-button-disabled-text: #9ca3af;
103
104 /* Error */
105 --color-button-error-background: #dc2626;
106 --color-button-error-hover-background: #b91c1c;
107 --color-button-error-border: #ef4444;
108 --color-button-error-text: #ffffff;
109 --color-button-error-focus-ring: rgba(220, 38, 38, 0.2);
110
111 /* Error Outline */
112 --color-button-error-outline-background: #fef2f2;
113 --color-button-error-outline-hover-background: #fecaca;
114 --color-button-error-outline-border: #ef4444;
115 --color-button-error-outline-focus-border: #dc2626;
116 --color-button-error-outline-focus-ring: rgba(220, 38, 38, 0.2);
117 --color-button-error-outline-text: #b91c1c;
118 --color-button-error-outline-hover-text: #b91c1c;
119
120 /* Success */
121 --color-button-success-background: #16a34a;
122 --color-button-success-hover-background: #15803d;
123 --color-button-success-border: #22c55e;
124 --color-button-success-text: #ffffff;
125 --color-button-success-focus-ring: rgba(22, 163, 74, 0.2);
126
127 /* Success Outline */
128 --color-button-success-outline-background: #f0fdf4;
129 --color-button-success-outline-hover-background: #bbf7d0;
130 --color-button-success-outline-border: #22c55e;
131 --color-button-success-outline-focus-border: #16a34a;
132 --color-button-success-outline-text: #15803d;
133 --color-button-success-outline-hover-text: #15803d;
134 --color-button-success-outline-focus-ring: rgba(22, 163, 74, 0.2);
135
136 /* Ghost */
137 --color-button-ghost-text: #9ca3af;
138 --color-button-ghost-hover-text: #6b7280;
139 --color-button-ghost-hover-background: #f3f4f6;
140
141 /* Button Group Primary */
142 --color-button-group-primary-background: #ffffff;
143 --color-button-group-primary-hover-background: #3758f9;
144 --color-button-group-primary-text: #3758f9;
145 --color-button-group-primary-hover-text: #ffffff;
146
147 /* Button Group Secondary */
148 --color-button-group-secondary-background: #ffffff;
149 --color-button-group-secondary-text: #374151;
150
151 /* ======== Badge Color =========*/
152
153 /* Badge Neutral */
154 --color-badge-neutral-background: #f3f4f6;
155 --color-badge-neutral-text: #374151;
156 --color-badge-neutral-icon-color: #6b7280;
157
158 /* Badge Primary */
159 --color-badge-primary-background: #eff3ff;
160 --color-badge-primary-text: #3758f9;
161 --color-badge-primary-icon-color: #3758f9;
162
163 /* Badge Error */
164 --color-badge-error-background: #fef2f2;
165 --color-badge-error-text: #b91c1c;
166 --color-badge-error-icon-color: #ef4444;
167
168 /* Badge Warning*/
169 --color-badge-warning-background: #fffbeb;
170 --color-badge-warning-text: #b45309;
171 --color-badge-warning-icon-color: #f59e0b;
172
173 /* Badge Success*/
174 --color-badge-success-background: #f0fdf4;
175 --color-badge-success-text: #15803d;
176 --color-badge-success-icon-color: #22c55e;
177
178 /* Badge Cyan */
179 --color-badge-cyan-background: #ecfeff;
180 --color-badge-cyan-text: #0e7490;
181 --color-badge-cyan-icon-color: #06b6d4;
182
183 /* Badge Sky */
184 --color-badge-sky-background: #f0f9ff;
185 --color-badge-sky-text: #0369a1;
186 --color-badge-sky-icon-color: #0ea5e9;
187
188 /* Badge Blue */
189 --color-badge-blue-background: #eff6ff;
190 --color-badge-blue-text: #1d4ed8;
191 --color-badge-blue-icon-color: #3b82f6;
192
193 /* Badge Violet */
194 --color-badge-violet-background: #f5f3ff;
195 --color-badge-violet-text: #6d28d9;
196 --color-badge-violet-icon-color: #8b5cf6;
197
198 /* Badge Purple */
199 --color-badge-purple-background: #faf5ff;
200 --color-badge-purple-text: #7e22ce;
201 --color-badge-purple-icon-color: #a855f7;
202
203 /* Badge Pink */
204 --color-badge-pink-background: #fdf2f8;
205 --color-badge-pink-text: #be185d;
206 --color-badge-pink-icon-color: #ec4899;
207
208 /* Badge Rose */
209 --color-badge-rose-background: #fff1f2;
210 --color-badge-rose-text: #be123c;
211 --color-badge-rose-icon-color: #f43f5e;
212
213 /* Badge Orange */
214 --color-badge-orange-background: #fff7ed;
215 --color-badge-orange-text: #c2410c;
216 --color-badge-orange-icon-color: #f97316;
217
218 /* ======== Chart =========*/
219
220 --color-chart-tick: var(--color-text-50);
221 --color-chart-legend: var(--color-text-50);
222 --color-chart-grid: var(--border-color-base-100);
223
224 /* ======== Sidebar =========*/
225
226 /* Nav Item */
227 --color-sidebar-nav-default-background: #ffffff;
228 --color-sidebar-nav-hover-background: #f9fafb;
229 --color-sidebar-nav-secondary-hover-background: #f3f4f6;
230 --color-sidebar-nav-hover-text: #374151;
231 --color-sidebar-nav-active-text: #3758f9;
232 --color-sidebar-nav-active-background: #eff3ff;
233 --color-sidebar-nav-focused-background: #eff3ff;
234 --color-sidebar-nav-default-text: #374151;
235 --color-sidebar-nav-icon: #6b7280;
236
237 /* Sidebar Badge */
238 --color-sidebar-badge-background: #3758f9;
239 --color-sidebar-badge-text: #ffffff;
240
241 /* Sidebar Footer */
242 --color-sidebar-footer-background: #f9fafb;
243 --color-sidebar-footer-title: #111827;
244 --color-sidebar-footer-subtitle: #6b7280;
245 --color-sidebar-footer-button-text: #ffffff;
246
247 /* ======== Card Color =========*/
248 --color-card-background-50: #ffffff;
249 --color-card-background-100: #ffffff;
250 --color-card-background-200: #f3f4f6;
251 --color-card-background-300: #f9fafb;
252
253 /* ======== Alert Success Color =========*/
254 --color-alert-success-background: #f0fdf4;
255 --color-alert-success-icon-background: #16a34a;
256 --color-alert-success-border: #bbf7d0;
257 --color-alert-success-close-icon: #16a34a;
258 --color-alert-success-title: #166534;
259 --color-alert-success-description: #15803d;
260 --color-alert-success-button-background: #16a34a;
261 --color-alert-success-button-hover-background: #15803d;
262 --color-alert-success-button-text: #15803d;
263
264 /* ======== Alert Danger Color =========*/
265 --color-alert-danger-background: #fef2f2;
266 --color-alert-danger-icon-background: #dc2626;
267 --color-alert-danger-border: #fecaca;
268 --color-alert-danger-close-icon: #b91c1c;
269 --color-alert-danger-title: #991b1b;
270 --color-alert-danger-description: #b91c1c;
271 --color-alert-danger-button-background: #dc2626;
272 --color-alert-danger-button-hover-background: #b91c1c;
273 --color-alert-danger-button-text: #b91c1c;
274
275 /* ======== Alert Info Color =========*/
276 --color-alert-info-background: #f0f9ff;
277 --color-alert-info-icon-background: #0ea5e9;
278 --color-alert-info-border: #bae6fd;
279 --color-alert-info-close-icon: #0284c7;
280 --color-alert-info-title: #075985;
281 --color-alert-info-description: #0369a1;
282 --color-alert-info-button-background: #0284c7;
283 --color-alert-info-button-hover-background: #0369a1;
284 --color-alert-info-button-text: #0369a1;
285
286 /* ======== Alert Warning Color =========*/
287 --color-alert-warning-background: #fefce8;
288 --color-alert-warning-icon-background: #eab308;
289 --color-alert-warning-border: #fef08a;
290 --color-alert-warning-close-icon: #ca8a04;
291 --color-alert-warning-title: #854d0e;
292 --color-alert-warning-description: #a16207;
293 --color-alert-warning-button-background: #ca8a04;
294 --color-alert-warning-button-hover-background: #a16207;
295 --color-alert-warning-button-text: #ca8a04;
296
297 /* ======== Alert Default Color =========*/
298 --color-alert-default-background: #f9fafb;
299 --color-alert-default-icon-background: #6b7280;
300 --color-alert-default-border: #e5e7eb;
301 --color-alert-default-close-icon: #4b5563;
302 --color-alert-default-title: #1f2937;
303 --color-alert-default-description: #374151;
304 --color-alert-default-button-background: #4b5563;
305 --color-alert-default-button-hover-background: #374151;
306 --color-alert-default-button-text: #374151;
307
308 /* ======== Input Color =========*/
309 --color-input-background: #ffffff;
310 --color-input-label-text: #374151;
311 --color-input-disabled-text: #d1d5db;
312 --color-input-placeholder-text: #9ca3af;
313 --color-input-primary-focus-border: #91aeff;
314 --color-input-error-focus-border: #ef4444;
315 --color-input-success-focus-border: #22c55e;
316 --color-input-error: #ef4444;
317 --color-input-success: #22c55e;
318
319 /* ======== Tab Color =========*/
320 --color-tab-background: #f3f4f6;
321 --color-tab-active-background: #ffffff;
322 --color-tab-secondary-active-background: #eff3ff;
323
324 /* ======== Checkbox Color =========*/
325 --color-checkbox-background: #ffffff;
326 --color-checkbox-checked-border: #3758f9;
327 --color-checkbox-checked-background: #3758f9;
328 --color-checkbox-checked-icon-color: #ffffff;
329
330 /* ======== Scrollbar Color =========*/
331 --color-scrollbar-background: #e5e7eb;
332
333 /* ======== Datepicker Color =========*/
334 --color-datepicker-background: #ffffff;
335 --color-datepicker-selected-background: #3758f9;
336 --color-datepicker-selected-hover-background: #f9fafb;
337
338 /* ======== Dropdowns Color =========*/
339 --color-dropdown-background: #ffffff;
340 --color-dropdown-hover-background: #f3f4f6;
341 --color-dropdown-secondary-background: #ffffff;
342 --color-dropdown-divider: #f3f4f6;
343
344 /* ======== Calendar Color =========*/
345 --color-calendar-primary-badge: #3758f9;
346 --color-calendar-primary-background: #eff3ff;
347 --color-calendar-success-badge: #22c55e;
348 --color-calendar-success-background: #f0fdf4;
349 --color-calendar-warning-badge: #f97316;
350 --color-calendar-warning-background: #fff7ed;
351 --color-calendar-danger-badge: #ef4444;
352 --color-calendar-danger-background: #fef2f2;
353 --color-calendar-info-badge: #0ea5e9;
354 --color-calendar-info-background: #f0f9ff;
355 --color-calendar-text: #374151;
356 --color-calendar-menu-text: #9ca3af;
357 --color-calendar-dropdown-background: #ffffff;
358
359 /* ======== Pricing Table Color =========*/
360 --color-pricing-active-switcher-background: #ffffff;
361 --color-pricing-active-card-background: #1f2937;
362 --color-pricing-button-background: #1f2937;
363 --color-pricing-icon-color: #3758f9;
364 --color-pricing-icon-background: #eff3ff;
365
366 /* ======== FAQ's Color =========*/
367 --color-faq-primary-active-background: #f9fafb;
368 --color-faq-secondary-active-background: #eff3ff;
369 --color-faq-secondary-active-border: #dae2ff;
370 --color-faq-secondary-active-title: #1f2937;
371 --color-faq-secondary-active-text: #374151;
372
373 /* ======== Chat List Color =========*/
374 --color-chat-list-background-primary: #374151;
375 --color-chat-list-background-primary-alt: #f3f4f6;
376 --color-chat-list-background-secondary: #3758f9;
377 --color-chat-list-background-secondary-alt: #dae2ff;
378
379 /* ======== Tooltip Color =========*/
380 --color-tooltip-text: #374151;
381 --color-tooltip-border: #e5e7eb;
382
383 /* ======== Popovers Color =========*/
384 --color-popover-title-background: #f3f4f6;
385 --color-popover-border: #e5e7eb;
386
387 /* ======== Skeleton Color =========*/
388 --color-skeleton-gradient-50: #e5e7eb;
389 --color-skeleton-gradient-100: #f9fafb;
390 --color-skeleton-gradient-200: #e5e7eb;
391
392 /* ======== 404 Page Color =========*/
393 --color-404-background: #ffffff66;
394 --color-404-foreground: #e5e7eb;
395
396 /* ======== Blogs Color =========*/
397 --color-blog-shape: #e5e7eb;
398
399 /* ======== Modal Color =========*/
400 --color-modal-button-success-background: #16a34a;
401 --color-modal-button-info-background: #0284c7;
402 --color-modal-button-warning-background: #ca8a04;
403 --color-modal-button-error-background: #dc2626;
404
405 /* ======== Section Title Color =========*/
406 --color-section-title-badge: #3758f9;
407 --color-section-title-badge-background: #3758f90d;
408
409 /* ======== Mobile Nav Menu Button Color =========*/
410 --color-mobile-nav-icon: #374151;
411 --color-mobile-nav-background: #ffffff;
412 --color-mobile-nav-hover-background: #f3f4f6;
413
414 /* ======== Footer Color =========*/
415 --color-footer-card-background: #f9fafb;
416 --color-footer-background: #ffffff;
417
418 /* ======== Bento Color =========*/
419 --color-bento-card-background: #f3f4f6;
420 --color-bento-gradient-shade-1: #ffffff00;
421 --color-bento-gradient-shade-2: #ffffff80;
422 --color-bento-gradient-shade-3: #ffffff;
423
424 /* ======== CTA Color =========*/
425 --color-cta-icon-background: #ffffff;
426 --color-cta-background: #ffffff;
427
428 /* ======== Hero Color =========*/
429 --color-hero-background: #f3f4f6;
430 --color-hero-card-background: #ffffff;
431 --color-hero-card-2-background: #f3f4f6;
432 --color-hero-gradient-shade-1: #ffffff99;
433 --color-hero-gradient-shade-2: #ffffff;
434
435 /* ======== Toggle Color =========*/
436 --color-toggle-default-background: #e5e7eb;
437 --color-toggle-disabled-foreground: #ffffff;
438 --color-toggle-disabled-background: #f3f4f6;
439 --color-toggle-active-background: #3758f9;
440
441 /* ======== Map Color =========*/
442 --color-map-fill: #d1d5db;
443
444 /* ======== AI Sidebar Gradient Color =========*/
445 --color-ai-sidebar-primary-gradient-shade-1: #ffffff;
446 --color-ai-sidebar-primary-gradient-shade-2: #ffffff00;
447 --color-ai-sidebar-secondary-gradient-shade-1: #f3f4f6;
448 --color-ai-sidebar-secondary-gradient-shade-2: #f3f4f600;
449
450 /* ======== AI Sidebar Menu Color =========*/
451 --color-ai-sidebar-hover-primary-shade-1: #f3f4f6;
452 --color-ai-sidebar-hover-primary-shade-2: #f3f4f600;
453 --color-ai-sidebar-hover-secondary-shade-1: #e5e7eb;
454 --color-ai-sidebar-hover-secondary-shade-2: #e5e7eb00;
455 --color-ai-sidebar-hover-primary-background: #f3f4f6;
456 --color-ai-sidebar-hover-secondary-background: #e5e7eb;
457 --color-ai-title-gradient-shade-1: #1f2937;
458 --color-ai-title-gradient-shade-2: #9ca3af;
459 --color-ai-hero-blend-1: #f3f4f6;
460 --color-ai-hero-blend-2: #f3f4f600;
461
462 /* Shadows */
463 --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
464 --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
465 --shadow-md:
466 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
467 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
468 --shadow-lg:
469 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
470 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
471 --shadow-xl: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
472 --shadow-2xl: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
473 --shadow-3xl: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
474 --drop-shadow-theme-3xl: 0 32px 64px rgba(16, 24, 40, 0.14);
475 --popover-shadow: 0px 5px 5px -2px rgba(16, 24, 40, 0.04);
476 --shadow-hero: 0px -14px 100px 0px rgba(0, 0, 0, 0.05);
477
478 --animate-pulse-custom: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
479}
480
481@layer base {
482 button:not(:disabled),
483 [role="button"]:not(:disabled) {
484 cursor: pointer;
485 }
486}
487
488@keyframes pulse {
489 0%,
490 100% {
491 opacity: 0.5;
492 }
493 50% {
494 opacity: 0.7;
495 }
496}dark.css
1@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
2
3@import "tailwindcss";
4@plugin '@tailwindcss/forms';
5
6@theme {
7 --font-sans: "DM Sans", sans-serif;
8
9 /* Primary */
10 --color-primary-50: #eff3ff;
11 --color-primary-100: #dae2ff;
12 --color-primary-200: #becdff;
13 --color-primary-300: #91aeff;
14 --color-primary-400: #5e84fc;
15 --color-primary-500: #3758f9;
16 --color-primary-600: #2237ee;
17 --color-primary-700: #1a25db;
18 --color-primary-800: #1c20b1;
19 --color-primary-900: #1c228c;
20 --color-primary-950: #161755;
21
22 --color-primary-text: white;
23 --color-neutral-brand-color: #7592ff;
24
25 /* Text Color */
26 --color-title-50: #ffffffcc;
27 --color-text-50: #9ca3af;
28 --color-text-100: #9ca3af;
29 --color-text-200: #6b7280;
30 --color-text-300: #e5e7eb;
31
32 /* White */
33 --color-white-100: #ffffff;
34 --color-white-90: #ffffffcc;
35 --color-white-80: #ffffffcc;
36 --color-white-70: #ffffffb3;
37 --color-white-60: #ffffff99;
38
39 /* Context Color */
40 --color-error-500: #ef4444;
41 --color-success-500: #22c55e;
42 --color-warning-500: #eab308;
43 --color-info-500: #0ea5e9;
44
45 /* Border Color */
46 --border-color-base-50: #1f2937;
47 --border-color-base-100: #111827;
48 --border-color-base-200: #374151;
49 --border-color-base-300: #1f2937;
50
51 --color-chart-line: #111827;
52
53 /* foreground Color */
54 --color-foreground-50: #ffffff;
55 --color-foreground-100: #ffffff;
56
57 --color-foreground-soft-50: #f9fafb;
58 --color-foreground-soft-100: #f3f4f6;
59 --color-foreground-soft-200: #f3f4f6;
60 --color-foreground-soft-300: #f3f4f6;
61 --color-foreground-soft-400: #e5e7eb;
62 --color-foreground-soft-500: #d1d5db;
63
64 /* Background Color */
65 --color-background-50: #030712;
66 --color-background-100: #111827;
67 --color-background-soft-50: #111827;
68 --color-background-soft-100: #111827;
69 --color-background-soft-200: #1f2937;
70 --color-background-soft-300: #030712;
71 --color-background-soft-400: #1f2937;
72 --color-background-soft-500: #374151;
73
74 --color-background-success-600: #16a34a;
75
76 /* ======== Button Color For Dark =========*/
77
78 /* Button Primary Color */
79 --color-button-primary-background: #3758f9;
80 --color-button-primary-hover-background: #2237ee;
81 --color-button-primary-text: #ffffff;
82 --color-button-primary-focus-ring: rgba(55, 88, 249, 0.2);
83
84 /* Outline Dark */
85 --color-button-outline-background: #111827;
86 --color-button-outline-hover-background: #111827;
87 --color-button-outline-border: #1f2937;
88 --color-button-outline-focus-ring: rgba(152, 162, 179, 0.14);
89 --color-button-outline-text: #e5e7eb;
90 --color-button-outline-hover-text: #f3f4f6;
91 --color-button-outline-disabled-background: #1f2937;
92 --color-button-outline-disabled-text: #4b5563;
93 --color-button-outline-disabled-border: #1f2937;
94
95 /* Disabled */
96 --color-button-disabled-background: #1f2937;
97 --color-button-disabled-border: #1f2937;
98 --color-button-disabled-text: #4b5563;
99
100 /* Error */
101 --color-button-error-background: #dc2626;
102 --color-button-error-hover-background: #b91c1c;
103 --color-button-error-border: #ef4444;
104 --color-button-error-text: #ffffff;
105 --color-button-error-focus-ring: rgba(220, 38, 38, 0.2);
106
107 /* Error Outline Dark */
108 --color-button-error-outline-background: #ef44440d;
109 --color-button-error-outline-border: #7f1d1d;
110 --color-button-error-outline-focus-border: #991b1b;
111 --color-button-error-outline-hover-background: #ef444426;
112 --color-button-error-outline-text: #ef4444;
113 --color-button-error-outline-hover-text: #f87171;
114 --color-button-error-outline-focus-ring: rgba(220, 38, 38, 0.2);
115
116 /* Success */
117 --color-button-success-background: #16a34a;
118 --color-button-success-border: #22c55e;
119 --color-button-success-hover-background: #15803d;
120 --color-button-success-text: #ffffff;
121 --color-button-success-focus-ring: rgba(22, 163, 74, 0.2);
122
123 /* Success Outline Dark */
124 --color-button-success-outline-background: #22c55e0d;
125 --color-button-success-outline-border: #14532d;
126 --color-button-success-outline-focus-border: #166534;
127 --color-button-success-outline-hover-background: #22c55e26;
128 --color-button-success-outline-text: #22c55e;
129 --color-button-success-outline-hover-text: #4ade80;
130 --color-button-success-outline-focus-ring: rgba(22, 163, 74, 0.2);
131
132 /* Ghost */
133 --color-button-ghost-text: #6b7280;
134 --color-button-ghost-hover-text: #d1d5db;
135 --color-button-ghost-hover-background: #111827;
136
137 /* Button Group Primary */
138 --color-button-group-primary-background: #ffffff00;
139 --color-button-group-primary-hover-background: #3758f9;
140 --color-button-group-primary-text: #3758f9;
141 --color-button-group-primary-hover-text: #ffffff;
142
143 /* Button Group Secondary */
144 --color-button-group-secondary-background: #ffffff03;
145 --color-button-group-secondary-text: #9ca3af;
146
147 /* ======== Badge Color For Dark =========*/
148
149 /* Badge Neutral */
150 --color-badge-neutral-background: #4b5563;
151 --color-badge-neutral-text: #e5e7eb;
152 --color-badge-neutral-icon-color: #e5e7eb;
153
154 /* Badge Primary */
155 --color-badge-primary-background: #3758f926;
156 --color-badge-primary-text: #5e84fc;
157 --color-badge-primary-icon-color: #5e84fc;
158
159 /* Badge Error */
160 --color-badge-error-background: #ef444426;
161 --color-badge-error-text: #ef4444;
162 --color-badge-error-icon-color: #f87171;
163
164 /* Badge Warning */
165 --color-badge-warning-background: #f59e0b26;
166 --color-badge-warning-text: #f59e0b;
167 --color-badge-warning-icon-color: #fbbf24;
168
169 /* Badge Success */
170 --color-badge-success-background: #22c55e26;
171 --color-badge-success-text: #22c55e;
172 --color-badge-success-icon-color: #4ade80;
173
174 /* Badge Cyan */
175 --color-badge-cyan-background: #06b6d426;
176 --color-badge-cyan-text: #06b6d4;
177 --color-badge-cyan-icon-color: #22d3ee;
178
179 /* Badge Sky */
180 --color-badge-sky-background: #0ea5e926;
181 --color-badge-sky-text: #0ea5e9;
182 --color-badge-sky-icon-color: #38bdf8;
183
184 /* Badge Blue */
185 --color-badge-blue-background: #3b82f626;
186 --color-badge-blue-text: #3b82f6;
187 --color-badge-blue-icon-color: #60a5fa;
188
189 /* Badge Violet */
190 --color-badge-violet-background: #8b5cf626;
191 --color-badge-violet-text: #8b5cf6;
192 --color-badge-violet-icon-color: #a78bfa;
193
194 /* Badge Purple */
195 --color-badge-purple-background: #a855f726;
196 --color-badge-purple-text: #a855f7;
197 --color-badge-purple-icon-color: #c084fc;
198
199 /* Badge Pink */
200 --color-badge-pink-background: #ec489926;
201 --color-badge-pink-text: #ec4899;
202 --color-badge-pink-icon-color: #f472b6;
203
204 /* Badge Rose */
205 --color-badge-rose-background: #f43f5e26;
206 --color-badge-rose-text: #f43f5e;
207 --color-badge-rose-icon-color: #fb7185;
208
209 /* Badge Orange */
210 --color-badge-orange-background: #f9731626;
211 --color-badge-orange-text: #f97316;
212 --color-badge-orange-icon-color: #fb923c;
213
214 /* ======== Chart =========*/
215
216 --color-chart-tick: var(--color-text-50);
217 --color-chart-legend: var(--color-text-50);
218 --color-chart-grid: var(--border-color-base-100);
219
220 /* ======== Sidebar For Dark =========*/
221
222 /* Nav Item */
223 --color-sidebar-nav-default-background: #030712;
224 --color-sidebar-nav-hover-background: #ffffff00;
225 --color-sidebar-nav-secondary-hover-background: #ffffff0d;
226 --color-sidebar-nav-hover-text: #d1d5db;
227 --color-sidebar-nav-active-text: #5e84fc;
228 --color-sidebar-nav-active-background: #3758f91f;
229 --color-sidebar-nav-focused-background: #3758f91f;
230 --color-sidebar-nav-default-text: #d1d5db;
231 --color-sidebar-nav-icon: #9ca3af;
232
233 /* Sidebar Badge */
234 --color-sidebar-badge-background: #3758f9;
235 --color-sidebar-badge-text: #ffffff;
236
237 /* Sidebar Footer */
238 --color-sidebar-footer-background: #ffffff08;
239 --color-sidebar-footer-title: #ffffff;
240 --color-sidebar-footer-subtitle: #9ca3af;
241 --color-sidebar-footer-button-text: #ffffff;
242
243 /* ======== Card Color For Dark =========*/
244 --color-card-background-50: #030712;
245 --color-card-background-100: #1e2634;
246 --color-card-background-200: #ffffff08;
247 --color-card-background-300: #111827;
248
249 /* ======== Alert Success Color For Dark =========*/
250 --color-alert-success-background: #22c55e0d;
251 --color-alert-success-icon-background: #16a34a;
252 --color-alert-success-border: #14532d;
253 --color-alert-success-close-icon: #16a34a;
254 --color-alert-success-title: #16a34a;
255 --color-alert-success-description: #16a34a;
256 --color-alert-success-button-background: #22c55e;
257 --color-alert-success-button-hover-background: #16a34a;
258 --color-alert-success-button-text: #22c55e;
259
260 /* ======== Alert Danger Color For Dark =========*/
261 --color-alert-danger-background: #ef44440d;
262 --color-alert-danger-icon-background: #dc2626;
263 --color-alert-danger-border: #7f1d1d;
264 --color-alert-danger-close-icon: #b91c1c;
265 --color-alert-danger-title: #ef4444;
266 --color-alert-danger-description: #ef4444;
267 --color-alert-danger-button-background: #ef4444;
268 --color-alert-danger-button-hover-background: #dc2626;
269 --color-alert-danger-button-text: #ef4444;
270
271 /* ======== Alert Info Color For Dark =========*/
272 --color-alert-info-background: #0ea5e90d;
273 --color-alert-info-icon-background: #0284c7;
274 --color-alert-info-border: #0c4a6e;
275 --color-alert-info-close-icon: #0284c7;
276 --color-alert-info-title: #0ea5e9;
277 --color-alert-info-description: #0ea5e9;
278 --color-alert-info-button-background: #0ea5e9;
279 --color-alert-info-button-hover-background: #0284c7;
280 --color-alert-info-button-text: #0ea5e9;
281
282 /* ======== Alert Warning Color For Dark =========*/
283 --color-alert-warning-background: #eab3080d;
284 --color-alert-warning-icon-background: #ca8a04;
285 --color-alert-warning-border: #713f12;
286 --color-alert-warning-close-icon: #ca8a04;
287 --color-alert-warning-title: #eab308;
288 --color-alert-warning-description: #eab308;
289 --color-alert-warning-button-background: #eab308;
290 --color-alert-warning-button-hover-background: #ca8a04;
291 --color-alert-warning-button-text: #eab308;
292
293 /* ======== Alert Default Color For Dark =========*/
294 --color-alert-default-background: #6b72801a;
295 --color-alert-default-icon-background: #6b7280;
296 --color-alert-default-border: #111827;
297 --color-alert-default-close-icon: #4b5563;
298 --color-alert-default-title: #d1d5db;
299 --color-alert-default-description: #9ca3af;
300 --color-alert-default-button-background: #6b7280;
301 --color-alert-default-button-hover-background: #4b5563;
302 --color-alert-default-button-text: #6b7280;
303
304 /* ======== Input Color For Dark =========*/
305 --color-input-background: #ffffff0d;
306 --color-input-label-text: #9ca3af;
307 --color-input-disabled-text: #ffffff26;
308 --color-input-placeholder-text: #6b7280;
309 --color-input-primary-focus-border: #91aeff;
310 --color-input-error-focus-border: #b91c1c;
311 --color-input-success-focus-border: #15803d;
312 --color-input-error: #dc2626;
313 --color-input-success: #16a34a;
314
315 /* ======== Tab Color For Dark =========*/
316 --color-tab-background: #111827;
317 --color-tab-active-background: #1f2937;
318 --color-tab-secondary-active-background: #7592ff33;
319
320 /* ======== Checkbox Color For Dark =========*/
321 --color-checkbox-background: #ffffff00;
322 --color-checkbox-checked-border: #3758f9;
323 --color-checkbox-checked-background: #3758f9;
324 --color-checkbox-checked-icon-color: #ffffff;
325
326 /* ======== Scrollbar Color For Dark =========*/
327 --color-scrollbar-background: #374151;
328
329 /* ======== Datepicker Color For Dark =========*/
330 --color-datepicker-background: #1f2937;
331 --color-datepicker-selected-background: #3758f9;
332 --color-datepicker-selected-hover-background: #ffffff0d;
333
334 /* ======== Dropdowns Color For Dark =========*/
335 --color-dropdown-background: #1f2937;
336 --color-dropdown-hover-background: #374151;
337 --color-dropdown-secondary-background: #1e2635;
338 --color-dropdown-divider: #353c49;
339
340 /* ======== Calendar Color For Dark =========*/
341 --color-calendar-primary-badge: #3758f9;
342 --color-calendar-primary-background: #dae2ff;
343 --color-calendar-success-badge: #22c55e;
344 --color-calendar-success-background: #dcfce7;
345 --color-calendar-warning-badge: #f97316;
346 --color-calendar-warning-background: #ffedd5;
347 --color-calendar-danger-badge: #ef4444;
348 --color-calendar-danger-background: #fee2e2;
349 --color-calendar-info-badge: #0ba5ec;
350 --color-calendar-info-background: #e0f2fe;
351 --color-calendar-text: #374151;
352 --color-calendar-menu-text: #6b7280;
353 --color-calendar-dropdown-background: #232b39;
354
355 /* ======== Pricing Table Color For Dark =========*/
356 --color-pricing-active-switcher-background: #ffffff1a;
357 --color-pricing-active-card-background: #ffffff1a;
358 --color-pricing-button-background: #ffffff1a;
359 --color-pricing-icon-color: #3758f9;
360 --color-pricing-icon-background: #465fff1a;
361
362 /* ======== FAQ's Color For Dark =========*/
363 --color-faq-primary-active-background: #ffffff08;
364 --color-faq-secondary-active-background: #dae2ff;
365 --color-faq-secondary-active-border: #becdff;
366 --color-faq-secondary-active-title: #1f2937;
367 --color-faq-secondary-active-text: #4b5563;
368
369 /* ======== Chat List Color For Dark =========*/
370 --color-chat-list-background-primary: #ffffff0d;
371 --color-chat-list-background-primary-alt: #ffffff0d;
372 --color-chat-list-background-secondary: #3758f9;
373 --color-chat-list-background-secondary-alt: #3758f933;
374
375 /* ======== Tooltip Color For Dark =========*/
376 --color-tooltip-text: #ffffff;
377 --color-tooltip-border: #374151;
378
379 /* ======== Popovers Color For Dark =========*/
380 --color-popover-title-background: #1f2937;
381 --color-popover-border: #374151;
382
383 /* ======== Skeleton Color For Dark =========*/
384 --color-skeleton-gradient-50: #ffffff26;
385 --color-skeleton-gradient-100: #ffffff0d;
386 --color-skeleton-gradient-200: #ffffff26;
387
388 /* ======== 404 Page Color For Dark =========*/
389 --color-404-background: #11182766;
390 --color-404-foreground: #ffffff26;
391
392 /* ======== Blogs Color For Dark =========*/
393 --color-blog-shape: #ffffff26;
394
395 /* ======== Modal Color For Dark =========*/
396 --color-modal-button-success-background: #22c55e;
397 --color-modal-button-info-background: #0ea5e9;
398 --color-modal-button-warning-background: #eab308;
399 --color-modal-button-error-background: #ef4444;
400
401 /* ======== Section Title Color For Dark =========*/
402 --color-section-title-badge: #3758f9;
403 --color-section-title-badge-background: #3758f926;
404
405 /* ======== Mobile Nav Menu Button Color For Dark =========*/
406 --color-mobile-nav-icon: #d1d5db;
407 --color-mobile-nav-background: #030712;
408 --color-mobile-nav-hover-background: #111827;
409
410 /* ======== Footer Color For Dark =========*/
411 --color-footer-card-background: #111827;
412 --color-footer-background: #030712;
413
414 /* ======== Bento Color For Dark =========*/
415 --color-bento-card-background: #1f2937;
416 --color-bento-gradient-shade-1: #11182700;
417 --color-bento-gradient-shade-2: #ffffff1a;
418 --color-bento-gradient-shade-3: #ffffff1a;
419
420 /* ======== CTA Color For Dark =========*/
421 --color-cta-icon-background: #1f2937;
422 --color-cta-background: #030712;
423
424 /* ======== Hero Color For Dark =========*/
425 --color-hero-background: #111827;
426 --color-hero-card-background: #1f2937;
427 --color-hero-card-2-background: #374151;
428 --color-hero-gradient-shade-1: #11182700;
429 --color-hero-gradient-shade-2: #111827;
430
431 /* ======== Toggle Color For Dark =========*/
432 --color-toggle-default-background: #4b5563;
433 --color-toggle-disabled-foreground: #ffffff66;
434 --color-toggle-disabled-background: #1f2937;
435 --color-toggle-active-background: #3758f9;
436
437 /* ======== Map Color For Dark =========*/
438 --color-map-fill: #6b7280;
439
440 /* ======== AI Sidebar Gradient Color For Dark =========*/
441 --color-ai-sidebar-primary-gradient-shade-1: #030712;
442 --color-ai-sidebar-primary-gradient-shade-2: #03071200;
443 --color-ai-sidebar-secondary-gradient-shade-1: #030712;
444 --color-ai-sidebar-secondary-gradient-shade-2: #03071200;
445
446 /* ======== AI Sidebar Hover/Title/Hero Color For Dark =========*/
447 --color-ai-sidebar-hover-primary-shade-1: #111827;
448 --color-ai-sidebar-hover-primary-shade-2: #11182700;
449 --color-ai-sidebar-hover-secondary-shade-1: #111827;
450 --color-ai-sidebar-hover-secondary-shade-2: #11182700;
451 --color-ai-sidebar-hover-primary-background: #111827;
452 --color-ai-sidebar-hover-secondary-background: #111827;
453 --color-ai-title-gradient-shade-1: #ffffff;
454 --color-ai-title-gradient-shade-2: #ffffff4d;
455 --color-ai-hero-blend-1: #111827;
456 --color-ai-hero-blend-2: #11182700;
457
458 /* Shadows */
459 --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
460 --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
461 --shadow-md:
462 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
463 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
464 --shadow-lg:
465 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
466 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
467 --shadow-xl: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
468 --shadow-2xl: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
469 --shadow-3xl: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
470 --drop-shadow-theme-3xl: 0 32px 64px rgba(16, 24, 40, 0.14);
471 --popover-shadow: 0px 5px 5px -2px rgba(16, 24, 40, 0.04);
472 --shadow-hero: 0px -14px 100px 0px rgba(0, 0, 0, 0.05);
473
474 --animate-pulse-custom: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
475}
476
477@layer base {
478 button:not(:disabled),
479 [role="button"]:not(:disabled) {
480 cursor: pointer;
481 }
482}
483
484@keyframes pulse {
485 0%,
486 100% {
487 opacity: 0.5;
488 }
489 50% {
490 opacity: 0.7;
491 }
492}