/** * SpendWise — Custom color palette for Backpack/Tabler * * Sobreescribe las variables --tblr-* del tema base. * Copiar este archivo sobre: * vendor/backpack/theme-tabler/resources/assets/css/skins/backpack-color-palette.css * * O referenciar desde config/backpack/theme-tabler.php: * base_path('resources/css/spendwise-palette.css') */ @charset "UTF-8"; /* ========================================================================= LIGHT MODE ========================================================================= */ :root, [data-bs-theme=light], [data-menu-theme=light] { /* Grises base */ --tblr-gray: #4B5563; --tblr-gray-dark: #1E293B; --tblr-gray-100: #F3F4F6; --tblr-gray-200: #E5E7EB; --tblr-gray-300: #D1D5DB; --tblr-gray-400: #9CA3AF; --tblr-gray-500: #6B7280; --tblr-gray-600: #4B5563; --tblr-gray-700: #374151; --tblr-gray-800: #1F2937; --tblr-gray-900: #111827; /* Colores semánticos principales */ --tblr-primary: #1E3A8A; --tblr-secondary: #6B7280; --tblr-success: #10B981; --tblr-info: #0EA5E9; --tblr-warning: #F59E0B; --tblr-danger: #EF4444; --tblr-light: #F9FAFB; --tblr-dark: #1E293B; --tblr-muted: #6B7280; --tblr-tabler: #1E3A8A; /* RGB equivalentes (para rgba() en Tabler) */ --tblr-primary-rgb: 30, 58, 138; --tblr-secondary-rgb: 107, 114, 128; --tblr-success-rgb: 16, 185, 129; --tblr-info-rgb: 14, 165, 233; --tblr-warning-rgb: 245, 158, 11; --tblr-danger-rgb: 239, 68, 68; --tblr-light-rgb: 249, 250, 251; --tblr-dark-rgb: 30, 41, 59; --tblr-muted-rgb: 107, 114, 128; --tblr-tabler-rgb: 30, 58, 138; /* Text emphasis (versiones oscuras para texto sobre fondo claro) */ --tblr-primary-text-emphasis: #1e3a8a; --tblr-secondary-text-emphasis: #374151; --tblr-success-text-emphasis: #065f46; --tblr-info-text-emphasis: #0c4a6e; --tblr-warning-text-emphasis: #92400e; --tblr-danger-text-emphasis: #7f1d1d; --tblr-light-text-emphasis: #374151; --tblr-dark-text-emphasis: #374151; /* Background sutiles (versiones muy claras para badges, alerts) */ --tblr-primary-bg-subtle: #DBEAFE; --tblr-secondary-bg-subtle: #F3F4F6; --tblr-success-bg-subtle: #D1FAE5; --tblr-info-bg-subtle: #E0F2FE; --tblr-warning-bg-subtle: #FEF3C7; --tblr-danger-bg-subtle: #FEE2E2; --tblr-light-bg-subtle: #F9FAFB; --tblr-dark-bg-subtle: #9CA3AF; /* Border sutiles */ --tblr-primary-border-subtle: #BFDBFE; --tblr-secondary-border-subtle: #E5E7EB; --tblr-success-border-subtle: #A7F3D0; --tblr-info-border-subtle: #BAE6FD; --tblr-warning-border-subtle: #FDE68A; --tblr-danger-border-subtle: #FECACA; --tblr-light-border-subtle: #E5E7EB; --tblr-dark-border-subtle: #6B7280; /* Body */ --tblr-body-font-size: 0.875rem; --tblr-body-font-weight: 400; --tblr-body-line-height: 1.4285714286; --tblr-body-color: #1E293B; --tblr-body-color-rgb: 30, 41, 59; --tblr-body-bg: #F3F4F6; --tblr-body-bg-rgb: 243, 244, 246; /* Emphasis */ --tblr-emphasis-color: #000; --tblr-emphasis-color-rgb: 0, 0, 0; /* Secondary / tertiary colors */ --tblr-secondary-color: rgba(30, 41, 59, .75); --tblr-secondary-color-rgb: 30, 41, 59; --tblr-secondary-bg: #E5E7EB; --tblr-secondary-bg-rgb: 229, 231, 235; --tblr-tertiary-color: rgba(30, 41, 59, .5); --tblr-tertiary-color-rgb: 30, 41, 59; --tblr-tertiary-bg: #F3F4F6; --tblr-tertiary-bg-rgb: 243, 244, 246; /* Links */ --tblr-link-color: #1E3A8A; --tblr-link-color-rgb: 30, 58, 138; --tblr-link-hover-color: #1a3278; --tblr-link-hover-color-rgb: 26, 50, 120; /* Bordes */ --tblr-border-color: #DDDFE3; --tblr-border-color-translucent: rgba(107, 114, 128, .16); /* Sombras / focus */ --tblr-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, .075); --tblr-focus-ring-width: 0.25rem; --tblr-focus-ring-opacity: 0.25; --tblr-focus-ring-color: rgba(30, 58, 138, .25); /* Validación */ --tblr-form-valid-color: #10B981; --tblr-form-valid-border-color: #10B981; --tblr-form-invalid-color: #EF4444; --tblr-form-invalid-border-color:#EF4444; /* Misc */ --tblr-danger-text: var(--tblr-danger); --tblr-navbar-border-color: transparent; --bg-switch-checked-color: var(--tblr-primary); } /* ========================================================================= DARK MODE ========================================================================= */ [data-bs-theme=dark], [data-menu-theme=dark] { --tblr-body-color: #CBD5E1; --tblr-body-color-rgb: 203, 213, 225; --tblr-body-bg: #0F172A; --tblr-body-bg-rgb: 15, 23, 42; --tblr-emphasis-color: #fff; --tblr-emphasis-color-rgb: 255, 255, 255; --tblr-secondary-color: rgba(203, 213, 225, .75); --tblr-secondary-color-rgb: 203, 213, 225; --tblr-secondary-bg: #1E293B; --tblr-secondary-bg-rgb: 30, 41, 59; --tblr-tertiary-color: rgba(203, 213, 225, .5); --tblr-tertiary-color-rgb: 203, 213, 225; --tblr-tertiary-bg: #172032; --tblr-tertiary-bg-rgb: 23, 32, 50; /* Text emphasis dark */ --tblr-primary-text-emphasis: #93C5FD; --tblr-secondary-text-emphasis: #D1D5DB; --tblr-success-text-emphasis: #6EE7B7; --tblr-info-text-emphasis: #7DD3FC; --tblr-warning-text-emphasis: #FCD34D; --tblr-danger-text-emphasis: #FCA5A5; --tblr-light-text-emphasis: #F3F4F6; --tblr-dark-text-emphasis: #D1D5DB; /* BG sutiles dark */ --tblr-primary-bg-subtle: #0c1a3d; --tblr-secondary-bg-subtle: #1f2937; --tblr-success-bg-subtle: #022c22; --tblr-info-bg-subtle: #082f49; --tblr-warning-bg-subtle: #3b1f04; --tblr-danger-bg-subtle: #450a0a; --tblr-light-bg-subtle: #1E293B; --tblr-dark-bg-subtle: #0f172a; /* Border sutiles dark */ --tblr-primary-border-subtle: #1e3a8a; --tblr-secondary-border-subtle: #4B5563; --tblr-success-border-subtle: #065f46; --tblr-info-border-subtle: #0c4a6e; --tblr-warning-border-subtle: #92400e; --tblr-danger-border-subtle: #7f1d1d; --tblr-light-border-subtle: #1E293B; --tblr-dark-border-subtle: #0F172A; /* Links dark */ --tblr-link-color: #93C5FD; --tblr-link-hover-color: #BFDBFE; --tblr-link-color-rgb: 147, 197, 253; --tblr-link-hover-color-rgb: 191, 219, 254; --tblr-code-color: #93C5FD; /* Bordes dark */ --tblr-border-color: #1E293B; --tblr-border-color-translucent: var(--tblr-border-color); /* Validación dark */ --tblr-form-valid-color: #6EE7B7; --tblr-form-valid-border-color: #6EE7B7; --tblr-form-invalid-color: #FCA5A5; --tblr-form-invalid-border-color:#FCA5A5; /* Superficie dark (cards, navbar) */ --tblr-bg-surface: #1E293B; --tblr-navbar-bg: var(--tblr-bg-surface); --tblr-dark-mode-border-color: #263549; --tblr-bg-main-color: #0F172A; --tblr-bg-forms: var(--tblr-dark-mode-border-color); /* Misc */ --tblr-danger-text: var(--tblr-danger); --tblr-danger: #F87171; --tblr-danger-rgb: 248, 113, 113; --tblr-navbar-color: rgba(255, 255, 255, 0.7); --tblr-bg-surface-tertiary: #ffffff02; --tblr-navbar-border-color: transparent; }