/** * Color Palettes for Organization Branding * * This file defines color palettes that can be applied at the organization level * to support white-label branding. Each palette overrides the primary brand colors * defined in custom.css. * * Usage: Add data-palette="" to the element. * For custom colors, use data-palette="custom" and inject colors via JS. * * Available palettes: * - blue (default): The standard Aegister blue theme * - purple: A purple/violet theme * - teal: A teal/cyan theme * - green: An emerald/green theme * - orange: A warm orange theme * - red: A rose/red theme * - indigo: A deep indigo theme * - pink: A fuchsia/pink theme * - slate: A neutral gray theme * - custom: For organization-specific colors (set via JavaScript) */ /* ================================================================= BLUE PALETTE (Default) The standard Aegister blue theme. ================================================================= */ body[data-palette="blue"], [data-palette="blue"] { /* Primary colors */ --primary: #2584be; --primary-hover: #1d9bf0; --primary-dark: #1f4e79; --tertiary: #1d9bf0; --bs-primary: #2584be; --bs-primary-rgb: 37, 132, 190; /* Success - teal/cyan */ --bs-success: #14b8a6; --bs-success-rgb: 20, 184, 166; --bs-success-hover: #0d9488; --status-success: #14b8a6; --status-success-bg: #ccfbf1; --status-success-text: #115e59; --app-good: #14b8a6; /* Warning - amber */ --bs-warning: #f59e0b; --bs-warning-rgb: 245, 158, 11; --bs-warning-hover: #d97706; --status-warning: #f59e0b; --status-warning-bg: #fef3c7; --status-warning-text: #92400e; --app-warn: #f59e0b; /* Danger - rose */ --bs-danger: #f43f5e; --bs-danger-rgb: 244, 63, 94; --bs-danger-hover: #e11d48; --status-danger: #f43f5e; --status-danger-bg: #ffe4e6; --status-danger-text: #9f1239; --app-bad: #f43f5e; /* Info - matches primary (blue) */ --bs-info: #3b82f6; --bs-info-rgb: 59, 130, 246; --bs-info-hover: #2563eb; --status-info: #3b82f6; --status-info-bg: #dbeafe; --status-info-text: #1e40af; --info-light: #3b82f6; /* Primary opacity variants */ --rgba-primary-03: rgba(37, 132, 190, 0.03); --rgba-primary-05: rgba(37, 132, 190, 0.05); --rgba-primary-08: rgba(37, 132, 190, 0.08); --rgba-primary-1: rgba(37, 132, 190, 0.1); --rgba-primary-12: rgba(37, 132, 190, 0.12); --rgba-primary-15: rgba(37, 132, 190, 0.15); --rgba-primary-2: rgba(37, 132, 190, 0.2); --rgba-primary-25: rgba(37, 132, 190, 0.25); --rgba-primary-3: rgba(37, 132, 190, 0.3); --rgba-primary-4: rgba(37, 132, 190, 0.4); --rgba-primary-5: rgba(37, 132, 190, 0.5); --rgba-primary-6: rgba(37, 132, 190, 0.6); --rgba-primary-7: rgba(37, 132, 190, 0.7); --rgba-primary-8: rgba(37, 132, 190, 0.8); --rgba-primary-9: rgba(37, 132, 190, 0.9); } /* ================================================================= PURPLE PALETTE A purple/violet theme. ================================================================= */ body[data-palette="purple"], [data-palette="purple"] { /* Primary colors */ --primary: #8b5cf6; --primary-hover: #a78bfa; --primary-dark: #5b21b6; --tertiary: #a78bfa; --bs-primary: #8b5cf6; --bs-primary-rgb: 139, 92, 246; /* Success - emerald */ --bs-success: #10b981; --bs-success-rgb: 16, 185, 129; --bs-success-hover: #059669; --status-success: #10b981; --status-success-bg: #d1fae5; --status-success-text: #065f46; --app-good: #10b981; /* Warning - amber */ --bs-warning: #f59e0b; --bs-warning-rgb: 245, 158, 11; --bs-warning-hover: #d97706; --status-warning: #f59e0b; --status-warning-bg: #fef3c7; --status-warning-text: #92400e; --app-warn: #f59e0b; /* Danger - rose */ --bs-danger: #f43f5e; --bs-danger-rgb: 244, 63, 94; --bs-danger-hover: #e11d48; --status-danger: #f43f5e; --status-danger-bg: #ffe4e6; --status-danger-text: #9f1239; --app-bad: #f43f5e; /* Info - matches primary (purple/violet) */ --bs-info: #a78bfa; --bs-info-rgb: 167, 139, 250; --bs-info-hover: #8b5cf6; --status-info: #a78bfa; --status-info-bg: #ede9fe; --status-info-text: #5b21b6; --info-light: #a78bfa; /* Primary opacity variants */ --rgba-primary-03: rgba(139, 92, 246, 0.03); --rgba-primary-05: rgba(139, 92, 246, 0.05); --rgba-primary-08: rgba(139, 92, 246, 0.08); --rgba-primary-1: rgba(139, 92, 246, 0.1); --rgba-primary-12: rgba(139, 92, 246, 0.12); --rgba-primary-15: rgba(139, 92, 246, 0.15); --rgba-primary-2: rgba(139, 92, 246, 0.2); --rgba-primary-25: rgba(139, 92, 246, 0.25); --rgba-primary-3: rgba(139, 92, 246, 0.3); --rgba-primary-4: rgba(139, 92, 246, 0.4); --rgba-primary-5: rgba(139, 92, 246, 0.5); --rgba-primary-6: rgba(139, 92, 246, 0.6); --rgba-primary-7: rgba(139, 92, 246, 0.7); --rgba-primary-8: rgba(139, 92, 246, 0.8); --rgba-primary-9: rgba(139, 92, 246, 0.9); } /* ================================================================= TEAL PALETTE A teal/cyan theme. ================================================================= */ body[data-palette="teal"], [data-palette="teal"] { /* Primary colors */ --primary: #14b8a6; --primary-hover: #2dd4bf; --primary-dark: #0f766e; --tertiary: #2dd4bf; --bs-primary: #14b8a6; --bs-primary-rgb: 20, 184, 166; /* Success - emerald */ --bs-success: #10b981; --bs-success-rgb: 16, 185, 129; --bs-success-hover: #059669; --status-success: #10b981; --status-success-bg: #d1fae5; --status-success-text: #065f46; --app-good: #10b981; /* Warning - amber */ --bs-warning: #f59e0b; --bs-warning-rgb: 245, 158, 11; --bs-warning-hover: #d97706; --status-warning: #f59e0b; --status-warning-bg: #fef3c7; --status-warning-text: #92400e; --app-warn: #f59e0b; /* Danger - rose */ --bs-danger: #f43f5e; --bs-danger-rgb: 244, 63, 94; --bs-danger-hover: #e11d48; --status-danger: #f43f5e; --status-danger-bg: #ffe4e6; --status-danger-text: #9f1239; --app-bad: #f43f5e; /* Info - matches primary (teal/cyan) */ --bs-info: #06b6d4; --bs-info-rgb: 6, 182, 212; --bs-info-hover: #0891b2; --status-info: #06b6d4; --status-info-bg: #cffafe; --status-info-text: #155e75; --info-light: #06b6d4; /* Primary opacity variants */ --rgba-primary-03: rgba(20, 184, 166, 0.03); --rgba-primary-05: rgba(20, 184, 166, 0.05); --rgba-primary-08: rgba(20, 184, 166, 0.08); --rgba-primary-1: rgba(20, 184, 166, 0.1); --rgba-primary-12: rgba(20, 184, 166, 0.12); --rgba-primary-15: rgba(20, 184, 166, 0.15); --rgba-primary-2: rgba(20, 184, 166, 0.2); --rgba-primary-25: rgba(20, 184, 166, 0.25); --rgba-primary-3: rgba(20, 184, 166, 0.3); --rgba-primary-4: rgba(20, 184, 166, 0.4); --rgba-primary-5: rgba(20, 184, 166, 0.5); --rgba-primary-6: rgba(20, 184, 166, 0.6); --rgba-primary-7: rgba(20, 184, 166, 0.7); --rgba-primary-8: rgba(20, 184, 166, 0.8); --rgba-primary-9: rgba(20, 184, 166, 0.9); } /* ================================================================= GREEN PALETTE An emerald/green theme. ================================================================= */ body[data-palette="green"], [data-palette="green"] { /* Primary colors */ --primary: #10b981; --primary-hover: #34d399; --primary-dark: #047857; --tertiary: #34d399; --bs-primary: #10b981; --bs-primary-rgb: 16, 185, 129; /* Success - same as primary for green theme */ --bs-success: #22c55e; --bs-success-rgb: 34, 197, 94; --bs-success-hover: #16a34a; --status-success: #22c55e; --status-success-bg: #dcfce7; --status-success-text: #166534; --app-good: #22c55e; /* Warning - amber */ --bs-warning: #f59e0b; --bs-warning-rgb: 245, 158, 11; --bs-warning-hover: #d97706; --status-warning: #f59e0b; --status-warning-bg: #fef3c7; --status-warning-text: #92400e; --app-warn: #f59e0b; /* Danger - rose */ --bs-danger: #f43f5e; --bs-danger-rgb: 244, 63, 94; --bs-danger-hover: #e11d48; --status-danger: #f43f5e; --status-danger-bg: #ffe4e6; --status-danger-text: #9f1239; --app-bad: #f43f5e; /* Info - matches primary (green/emerald) */ --bs-info: #34d399; --bs-info-rgb: 52, 211, 153; --bs-info-hover: #10b981; --status-info: #34d399; --status-info-bg: #d1fae5; --status-info-text: #065f46; --info-light: #34d399; /* Primary opacity variants */ --rgba-primary-03: rgba(16, 185, 129, 0.03); --rgba-primary-05: rgba(16, 185, 129, 0.05); --rgba-primary-08: rgba(16, 185, 129, 0.08); --rgba-primary-1: rgba(16, 185, 129, 0.1); --rgba-primary-12: rgba(16, 185, 129, 0.12); --rgba-primary-15: rgba(16, 185, 129, 0.15); --rgba-primary-2: rgba(16, 185, 129, 0.2); --rgba-primary-25: rgba(16, 185, 129, 0.25); --rgba-primary-3: rgba(16, 185, 129, 0.3); --rgba-primary-4: rgba(16, 185, 129, 0.4); --rgba-primary-5: rgba(16, 185, 129, 0.5); --rgba-primary-6: rgba(16, 185, 129, 0.6); --rgba-primary-7: rgba(16, 185, 129, 0.7); --rgba-primary-8: rgba(16, 185, 129, 0.8); --rgba-primary-9: rgba(16, 185, 129, 0.9); } /* ================================================================= ORANGE PALETTE A warm orange theme. ================================================================= */ body[data-palette="orange"], [data-palette="orange"] { /* Primary colors */ --primary: #f97316; --primary-hover: #fb923c; --primary-dark: #c2410c; --tertiary: #fb923c; --bs-primary: #f97316; --bs-primary-rgb: 249, 115, 22; /* Success - emerald */ --bs-success: #10b981; --bs-success-rgb: 16, 185, 129; --bs-success-hover: #059669; --status-success: #10b981; --status-success-bg: #d1fae5; --status-success-text: #065f46; --app-good: #10b981; /* Warning - amber (slightly different from primary) */ --bs-warning: #eab308; --bs-warning-rgb: 234, 179, 8; --bs-warning-hover: #ca8a04; --status-warning: #eab308; --status-warning-bg: #fef9c3; --status-warning-text: #854d0e; --app-warn: #eab308; /* Danger - rose */ --bs-danger: #f43f5e; --bs-danger-rgb: 244, 63, 94; --bs-danger-hover: #e11d48; --status-danger: #f43f5e; --status-danger-bg: #ffe4e6; --status-danger-text: #9f1239; --app-bad: #f43f5e; /* Info - matches primary (orange/amber) */ --bs-info: #fb923c; --bs-info-rgb: 251, 146, 60; --bs-info-hover: #f97316; --status-info: #fb923c; --status-info-bg: #ffedd5; --status-info-text: #9a3412; --info-light: #fb923c; /* Primary opacity variants */ --rgba-primary-03: rgba(249, 115, 22, 0.03); --rgba-primary-05: rgba(249, 115, 22, 0.05); --rgba-primary-08: rgba(249, 115, 22, 0.08); --rgba-primary-1: rgba(249, 115, 22, 0.1); --rgba-primary-12: rgba(249, 115, 22, 0.12); --rgba-primary-15: rgba(249, 115, 22, 0.15); --rgba-primary-2: rgba(249, 115, 22, 0.2); --rgba-primary-25: rgba(249, 115, 22, 0.25); --rgba-primary-3: rgba(249, 115, 22, 0.3); --rgba-primary-4: rgba(249, 115, 22, 0.4); --rgba-primary-5: rgba(249, 115, 22, 0.5); --rgba-primary-6: rgba(249, 115, 22, 0.6); --rgba-primary-7: rgba(249, 115, 22, 0.7); --rgba-primary-8: rgba(249, 115, 22, 0.8); --rgba-primary-9: rgba(249, 115, 22, 0.9); } /* ================================================================= RED PALETTE A rose/red theme. ================================================================= */ body[data-palette="red"], [data-palette="red"] { /* Primary colors */ --primary: #e11d48; --primary-hover: #f43f5e; --primary-dark: #9f1239; --tertiary: #f43f5e; --bs-primary: #e11d48; --bs-primary-rgb: 225, 29, 72; /* Success - emerald */ --bs-success: #10b981; --bs-success-rgb: 16, 185, 129; --bs-success-hover: #059669; --status-success: #10b981; --status-success-bg: #d1fae5; --status-success-text: #065f46; --app-good: #10b981; /* Warning - amber */ --bs-warning: #f59e0b; --bs-warning-rgb: 245, 158, 11; --bs-warning-hover: #d97706; --status-warning: #f59e0b; --status-warning-bg: #fef3c7; --status-warning-text: #92400e; --app-warn: #f59e0b; /* Danger - same as primary for red theme */ --bs-danger: #dc2626; --bs-danger-rgb: 220, 38, 38; --bs-danger-hover: #b91c1c; --status-danger: #dc2626; --status-danger-bg: #fee2e2; --status-danger-text: #991b1b; --app-bad: #dc2626; /* Info - matches primary (rose/pink) */ --bs-info: #fb7185; --bs-info-rgb: 251, 113, 133; --bs-info-hover: #f43f5e; --status-info: #fb7185; --status-info-bg: #ffe4e6; --status-info-text: #9f1239; --info-light: #fb7185; /* Primary opacity variants */ --rgba-primary-03: rgba(225, 29, 72, 0.03); --rgba-primary-05: rgba(225, 29, 72, 0.05); --rgba-primary-08: rgba(225, 29, 72, 0.08); --rgba-primary-1: rgba(225, 29, 72, 0.1); --rgba-primary-12: rgba(225, 29, 72, 0.12); --rgba-primary-15: rgba(225, 29, 72, 0.15); --rgba-primary-2: rgba(225, 29, 72, 0.2); --rgba-primary-25: rgba(225, 29, 72, 0.25); --rgba-primary-3: rgba(225, 29, 72, 0.3); --rgba-primary-4: rgba(225, 29, 72, 0.4); --rgba-primary-5: rgba(225, 29, 72, 0.5); --rgba-primary-6: rgba(225, 29, 72, 0.6); --rgba-primary-7: rgba(225, 29, 72, 0.7); --rgba-primary-8: rgba(225, 29, 72, 0.8); --rgba-primary-9: rgba(225, 29, 72, 0.9); } /* ================================================================= INDIGO PALETTE A deep indigo theme. ================================================================= */ body[data-palette="indigo"], [data-palette="indigo"] { /* Primary colors */ --primary: #6366f1; --primary-hover: #818cf8; --primary-dark: #4338ca; --tertiary: #818cf8; --bs-primary: #6366f1; --bs-primary-rgb: 99, 102, 241; /* Success - emerald */ --bs-success: #10b981; --bs-success-rgb: 16, 185, 129; --bs-success-hover: #059669; --status-success: #10b981; --status-success-bg: #d1fae5; --status-success-text: #065f46; --app-good: #10b981; /* Warning - amber */ --bs-warning: #f59e0b; --bs-warning-rgb: 245, 158, 11; --bs-warning-hover: #d97706; --status-warning: #f59e0b; --status-warning-bg: #fef3c7; --status-warning-text: #92400e; --app-warn: #f59e0b; /* Danger - rose */ --bs-danger: #f43f5e; --bs-danger-rgb: 244, 63, 94; --bs-danger-hover: #e11d48; --status-danger: #f43f5e; --status-danger-bg: #ffe4e6; --status-danger-text: #9f1239; --app-bad: #f43f5e; /* Info - matches primary (indigo) */ --bs-info: #818cf8; --bs-info-rgb: 129, 140, 248; --bs-info-hover: #6366f1; --status-info: #818cf8; --status-info-bg: #e0e7ff; --status-info-text: #3730a3; --info-light: #818cf8; /* Primary opacity variants */ --rgba-primary-03: rgba(99, 102, 241, 0.03); --rgba-primary-05: rgba(99, 102, 241, 0.05); --rgba-primary-08: rgba(99, 102, 241, 0.08); --rgba-primary-1: rgba(99, 102, 241, 0.1); --rgba-primary-12: rgba(99, 102, 241, 0.12); --rgba-primary-15: rgba(99, 102, 241, 0.15); --rgba-primary-2: rgba(99, 102, 241, 0.2); --rgba-primary-25: rgba(99, 102, 241, 0.25); --rgba-primary-3: rgba(99, 102, 241, 0.3); --rgba-primary-4: rgba(99, 102, 241, 0.4); --rgba-primary-5: rgba(99, 102, 241, 0.5); --rgba-primary-6: rgba(99, 102, 241, 0.6); --rgba-primary-7: rgba(99, 102, 241, 0.7); --rgba-primary-8: rgba(99, 102, 241, 0.8); --rgba-primary-9: rgba(99, 102, 241, 0.9); } /* ================================================================= PINK PALETTE A fuchsia/pink theme. ================================================================= */ body[data-palette="pink"], [data-palette="pink"] { /* Primary colors */ --primary: #d946ef; --primary-hover: #e879f9; --primary-dark: #a21caf; --tertiary: #e879f9; --bs-primary: #d946ef; --bs-primary-rgb: 217, 70, 239; /* Success - emerald */ --bs-success: #10b981; --bs-success-rgb: 16, 185, 129; --bs-success-hover: #059669; --status-success: #10b981; --status-success-bg: #d1fae5; --status-success-text: #065f46; --app-good: #10b981; /* Warning - amber */ --bs-warning: #f59e0b; --bs-warning-rgb: 245, 158, 11; --bs-warning-hover: #d97706; --status-warning: #f59e0b; --status-warning-bg: #fef3c7; --status-warning-text: #92400e; --app-warn: #f59e0b; /* Danger - rose */ --bs-danger: #f43f5e; --bs-danger-rgb: 244, 63, 94; --bs-danger-hover: #e11d48; --status-danger: #f43f5e; --status-danger-bg: #ffe4e6; --status-danger-text: #9f1239; --app-bad: #f43f5e; /* Info - matches primary (fuchsia/pink) */ --bs-info: #e879f9; --bs-info-rgb: 232, 121, 249; --bs-info-hover: #d946ef; --status-info: #e879f9; --status-info-bg: #fae8ff; --status-info-text: #86198f; --info-light: #e879f9; /* Primary opacity variants */ --rgba-primary-03: rgba(217, 70, 239, 0.03); --rgba-primary-05: rgba(217, 70, 239, 0.05); --rgba-primary-08: rgba(217, 70, 239, 0.08); --rgba-primary-1: rgba(217, 70, 239, 0.1); --rgba-primary-12: rgba(217, 70, 239, 0.12); --rgba-primary-15: rgba(217, 70, 239, 0.15); --rgba-primary-2: rgba(217, 70, 239, 0.2); --rgba-primary-25: rgba(217, 70, 239, 0.25); --rgba-primary-3: rgba(217, 70, 239, 0.3); --rgba-primary-4: rgba(217, 70, 239, 0.4); --rgba-primary-5: rgba(217, 70, 239, 0.5); --rgba-primary-6: rgba(217, 70, 239, 0.6); --rgba-primary-7: rgba(217, 70, 239, 0.7); --rgba-primary-8: rgba(217, 70, 239, 0.8); --rgba-primary-9: rgba(217, 70, 239, 0.9); } /* ================================================================= SLATE PALETTE A neutral gray theme for professional look. ================================================================= */ body[data-palette="slate"], [data-palette="slate"] { /* Primary colors */ --primary: #475569; --primary-hover: #64748b; --primary-dark: #1e293b; --tertiary: #64748b; --bs-primary: #475569; --bs-primary-rgb: 71, 85, 105; /* Success - emerald */ --bs-success: #10b981; --bs-success-rgb: 16, 185, 129; --bs-success-hover: #059669; --status-success: #10b981; --status-success-bg: #d1fae5; --status-success-text: #065f46; --app-good: #10b981; /* Warning - amber */ --bs-warning: #f59e0b; --bs-warning-rgb: 245, 158, 11; --bs-warning-hover: #d97706; --status-warning: #f59e0b; --status-warning-bg: #fef3c7; --status-warning-text: #92400e; --app-warn: #f59e0b; /* Danger - rose */ --bs-danger: #f43f5e; --bs-danger-rgb: 244, 63, 94; --bs-danger-hover: #e11d48; --status-danger: #f43f5e; --status-danger-bg: #ffe4e6; --status-danger-text: #9f1239; --app-bad: #f43f5e; /* Info - matches primary (slate/gray) */ --bs-info: #64748b; --bs-info-rgb: 100, 116, 139; --bs-info-hover: #475569; --status-info: #64748b; --status-info-bg: #f1f5f9; --status-info-text: #334155; --info-light: #64748b; /* Primary opacity variants */ --rgba-primary-03: rgba(71, 85, 105, 0.03); --rgba-primary-05: rgba(71, 85, 105, 0.05); --rgba-primary-08: rgba(71, 85, 105, 0.08); --rgba-primary-1: rgba(71, 85, 105, 0.1); --rgba-primary-12: rgba(71, 85, 105, 0.12); --rgba-primary-15: rgba(71, 85, 105, 0.15); --rgba-primary-2: rgba(71, 85, 105, 0.2); --rgba-primary-25: rgba(71, 85, 105, 0.25); --rgba-primary-3: rgba(71, 85, 105, 0.3); --rgba-primary-4: rgba(71, 85, 105, 0.4); --rgba-primary-5: rgba(71, 85, 105, 0.5); --rgba-primary-6: rgba(71, 85, 105, 0.6); --rgba-primary-7: rgba(71, 85, 105, 0.7); --rgba-primary-8: rgba(71, 85, 105, 0.8); --rgba-primary-9: rgba(71, 85, 105, 0.9); } /* ================================================================= CUSTOM PALETTE For organization-specific colors. Primary colors are injected via JavaScript by the theme-manager.js module. When using custom palette: 1. Set data-palette="custom" on 2. Use ThemeManager.applyCustomColors() to set primary/hover/dark Semantic colors (success, warning, danger) are FIXED - they have universal meaning and should not change per organization. Info color follows the custom primary. ================================================================= */ body[data-palette="custom"], [data-palette="custom"] { /* Primary colors - set via JavaScript */ /* --primary: set via JS */ /* --primary-hover: set via JS */ /* --primary-dark: set via JS */ /* --tertiary: set via JS (same as primary-hover) */ /* --bs-primary: set via JS */ /* --bs-primary-rgb: set via JS */ /* Success - fixed emerald (universal meaning: positive/good) */ --bs-success: #10b981; --bs-success-rgb: 16, 185, 129; --bs-success-hover: #059669; --status-success: #10b981; --status-success-bg: #d1fae5; --status-success-text: #065f46; --app-good: #10b981; /* Warning - fixed amber (universal meaning: caution) */ --bs-warning: #f59e0b; --bs-warning-rgb: 245, 158, 11; --bs-warning-hover: #d97706; --status-warning: #f59e0b; --status-warning-bg: #fef3c7; --status-warning-text: #92400e; --app-warn: #f59e0b; /* Danger - fixed rose (universal meaning: error/danger) */ --bs-danger: #f43f5e; --bs-danger-rgb: 244, 63, 94; --bs-danger-hover: #e11d48; --status-danger: #f43f5e; --status-danger-bg: #ffe4e6; --status-danger-text: #9f1239; --app-bad: #f43f5e; /* Info - will be set via JS to match primary */ /* --bs-info: set via JS */ /* --bs-info-rgb: set via JS */ /* --info-light: set via JS */ }