Josep Piguillem
c2b5291a74
Laravel-based OAuth/IAM service with Passport, Vue 3 frontend, and Docker Compose setup for local and production deployment. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
71 lines
2.8 KiB
SCSS
71 lines
2.8 KiB
SCSS
// Tokens de color como custom properties CSS (no variables SCSS): así el
|
|
// toggle de tema (clase .dark en <html>) los puede resolver en runtime sin
|
|
// recompilar nada — SCSS solo aporta el anidado/organización de las reglas.
|
|
:root {
|
|
--color-page-bg: #f9fafb; // gray-50
|
|
--color-surface: #ffffff;
|
|
--color-surface-muted: #f9fafb; // gray-50
|
|
--color-code-bg: #f3f4f6; // gray-100
|
|
--color-border: #e5e7eb; // gray-200
|
|
--color-border-strong: #d1d5db; // gray-300
|
|
|
|
--color-text-primary: #111827; // gray-900
|
|
--color-text-secondary: #6b7280; // gray-500
|
|
--color-text-muted: #9ca3af; // gray-400
|
|
--color-text-on-accent: #ffffff;
|
|
|
|
--color-accent: #4f46e5; // indigo-600
|
|
--color-accent-strong: #6366f1; // indigo-500
|
|
--color-accent-soft: #eef2ff; // indigo-50
|
|
--color-accent-soft-text: #4338ca; // indigo-700
|
|
--gradient-accent: linear-gradient(to right, #4f46e5, #7c3aed);
|
|
--gradient-glow: linear-gradient(to bottom right, rgb(129 140 248 / 30%), rgb(167 139 250 / 20%));
|
|
|
|
--color-success: #059669; // emerald-600
|
|
--color-success-dot: #10b981; // emerald-500
|
|
--color-danger: #dc2626; // red-600
|
|
|
|
--color-warning-border: #fcd34d; // amber-300
|
|
--color-warning-bg: #fffbeb; // amber-50
|
|
--color-warning-title: #92400e; // amber-800
|
|
--color-warning-text: #78350f; // amber-900
|
|
--color-warning-code-bg: #ffffff;
|
|
|
|
--shadow-card: 0 1px 2px 0 rgb(0 0 0 / 4%);
|
|
--shadow-elevated: 0 10px 25px -5px rgb(17 24 39 / 8%), 0 8px 10px -6px rgb(17 24 39 / 5%);
|
|
}
|
|
|
|
.dark {
|
|
--color-page-bg: #09090b; // zinc-950
|
|
--color-surface: #18181b; // zinc-900
|
|
--color-surface-muted: rgb(255 255 255 / 5%);
|
|
--color-code-bg: rgb(255 255 255 / 10%);
|
|
--color-border: rgb(255 255 255 / 10%);
|
|
--color-border-strong: rgb(255 255 255 / 15%);
|
|
|
|
--color-text-primary: #ffffff;
|
|
--color-text-secondary: #9ca3af; // gray-400
|
|
--color-text-muted: #6b7280; // gray-500
|
|
--color-text-on-accent: #ffffff;
|
|
|
|
--color-accent: #6366f1; // indigo-500
|
|
--color-accent-strong: #818cf8; // indigo-400
|
|
--color-accent-soft: rgb(99 102 241 / 15%);
|
|
--color-accent-soft-text: #a5b4fc; // indigo-300
|
|
--gradient-accent: linear-gradient(to right, #4f46e5, #7c3aed);
|
|
--gradient-glow: linear-gradient(to bottom right, rgb(99 102 241 / 20%), rgb(139 92 246 / 10%));
|
|
|
|
--color-success: #34d399; // emerald-400
|
|
--color-success-dot: #10b981;
|
|
--color-danger: #f87171; // red-400
|
|
|
|
--color-warning-border: rgb(245 158 11 / 30%);
|
|
--color-warning-bg: rgb(245 158 11 / 10%);
|
|
--color-warning-title: #fcd34d; // amber-300
|
|
--color-warning-text: #fde68a; // amber-200
|
|
--color-warning-code-bg: rgb(0 0 0 / 20%);
|
|
|
|
--shadow-card: none;
|
|
--shadow-elevated: 0 20px 25px -5px rgb(0 0 0 / 30%), 0 8px 10px -6px rgb(0 0 0 / 30%);
|
|
}
|