/* ============================================================ Washeej Unified Design Tokens Single Source of Truth for ALL interfaces Date: 2026-02-21 This file replaces: - theme_tokens.blade.php variables (--wj-*) - contrast-fix.css variables (--contrast-*) - Hardcoded colors scattered across views Usage: hsl(var(--wj-text)) or hsl(var(--wj-bg)) All values are HSL triplets WITHOUT the hsl() wrapper. ============================================================ */ /* ======================================== Light Mode (Default) ======================================== */ :root { /* ---- Backgrounds ---- */ --wj-bg: 0 0% 100%; --wj-surface: 0 0% 100%; --wj-surface-2: 210 20% 98%; --wj-surface-3: 210 17% 95%; /* ---- Text ---- */ --wj-text: 220 9% 20%; --wj-text-secondary: 220 9% 46%; --wj-text-muted: 220 9% 60%; --wj-text-inverse: 0 0% 100%; /* ---- Borders ---- */ --wj-border: 220 13% 91%; --wj-border-strong: 220 13% 80%; /* ---- Accent (uses base color from color.php) ---- */ --wj-accent: var(--base-h, 212) var(--base-s, 82%) var(--base-l, 61%); --wj-accent-hover: var(--base-h, 212) var(--base-s, 82%) calc(var(--base-l, 61%) - 5%); --wj-accent-contrast: 0 0% 100%; /* ---- Semantic States ---- */ --wj-success-bg: 142 76% 94%; --wj-success-text: 142 76% 30%; --wj-warning-bg: 38 92% 94%; --wj-warning-text: 38 92% 30%; --wj-danger-bg: 0 84% 95%; --wj-danger-text: 0 84% 40%; --wj-info-bg: 210 92% 94%; --wj-info-text: 210 92% 30%; /* ---- Shadows ---- */ --wj-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --wj-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); --wj-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --wj-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* ---- Focus ---- */ --wj-focus-ring: 0 0 0 3px hsl(var(--wj-accent) / 0.25); /* ---- Sidebar ---- */ --wj-sidebar-bg: 220 20% 14%; --wj-sidebar-text: 210 20% 80%; --wj-sidebar-text-active: 0 0% 100%; --wj-sidebar-hover: 220 20% 18%; --wj-sidebar-active: 220 20% 22%; --wj-sidebar-border: 220 20% 20%; /* ---- Inputs ---- */ --wj-input-bg: 0 0% 100%; --wj-input-border: 220 13% 91%; --wj-input-border-focus: var(--base-h, 212) var(--base-s, 82%) var(--base-l, 61%); --wj-input-text: 220 9% 20%; --wj-input-placeholder: 220 9% 60%; /* ---- Tables ---- */ --wj-table-header-bg: 210 20% 97%; --wj-table-header-text: 220 9% 30%; --wj-table-row-hover: 210 20% 98%; --wj-table-border: 220 13% 91%; /* ---- Dashboard Header ---- */ --wj-header-bg: 220 20% 14%; --wj-header-text: 0 0% 100%; } /* ======================================== Dark Mode Activated by: [data-theme="dark"] on ======================================== */ [data-theme="dark"], :root[data-theme="dark"] { /* ---- Backgrounds ---- */ --wj-bg: 224 71% 4%; --wj-surface: 222 47% 8%; --wj-surface-2: 223 47% 11%; --wj-surface-3: 223 47% 14%; /* ---- Text ---- */ --wj-text: 210 40% 98%; --wj-text-secondary: 215 20% 75%; --wj-text-muted: 215 20% 55%; --wj-text-inverse: 220 9% 10%; /* ---- Borders ---- */ --wj-border: 217 33% 17%; --wj-border-strong: 217 33% 25%; /* ---- Accent (brighter in dark mode) ---- */ --wj-accent: var(--base-h, 212) calc(var(--base-s, 82%) * 0.9) calc(var(--base-l, 61%) + 10%); --wj-accent-hover: var(--base-h, 212) calc(var(--base-s, 82%) * 0.9) calc(var(--base-l, 61%) + 15%); --wj-accent-contrast: 0 0% 100%; /* ---- Semantic States (Dark) ---- */ --wj-success-bg: 142 40% 12%; --wj-success-text: 142 70% 65%; --wj-warning-bg: 38 50% 12%; --wj-warning-text: 38 80% 65%; --wj-danger-bg: 0 50% 12%; --wj-danger-text: 0 70% 65%; --wj-info-bg: 210 50% 12%; --wj-info-text: 210 70% 65%; /* ---- Shadows (stronger in dark) ---- */ --wj-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --wj-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --wj-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); --wj-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2); /* ---- Focus ---- */ --wj-focus-ring: 0 0 0 3px hsl(var(--wj-accent) / 0.3); /* ---- Sidebar ---- */ --wj-sidebar-bg: 222 47% 6%; --wj-sidebar-text: 215 20% 70%; --wj-sidebar-text-active: 0 0% 100%; --wj-sidebar-hover: 222 47% 10%; --wj-sidebar-active: 222 47% 13%; --wj-sidebar-border: 222 47% 14%; /* ---- Inputs ---- */ --wj-input-bg: 222 47% 10%; --wj-input-border: 217 33% 20%; --wj-input-border-focus: var(--base-h, 212) calc(var(--base-s, 82%) * 0.9) calc(var(--base-l, 61%) + 10%); --wj-input-text: 210 40% 98%; --wj-input-placeholder: 215 20% 50%; /* ---- Tables ---- */ --wj-table-header-bg: 222 47% 10%; --wj-table-header-text: 210 40% 90%; --wj-table-row-hover: 222 47% 12%; --wj-table-border: 217 33% 17%; /* ---- Dashboard Header ---- */ --wj-header-bg: 222 47% 6%; --wj-header-text: 0 0% 100%; } /* ======================================== Global Utility Applications These apply design tokens to base elements ======================================== */ /* Body */ body { background-color: hsl(var(--wj-bg)); color: hsl(var(--wj-text)); } /* Forms */ .form-control, .form-select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], textarea, select { background-color: hsl(var(--wj-input-bg)) !important; border-color: hsl(var(--wj-input-border)) !important; color: hsl(var(--wj-input-text)) !important; } .form-control::placeholder, input::placeholder, textarea::placeholder { color: hsl(var(--wj-input-placeholder)) !important; } .form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus { border-color: hsl(var(--wj-input-border-focus)) !important; box-shadow: var(--wj-focus-ring) !important; } /* Cards */ .card { background-color: hsl(var(--wj-surface)); border-color: hsl(var(--wj-border)); } .card-header { background-color: hsl(var(--wj-surface-2)); border-bottom-color: hsl(var(--wj-border)); } .card-footer { background-color: hsl(var(--wj-surface-2)); border-top-color: hsl(var(--wj-border)); } /* Tables */ .table { --bs-table-bg: hsl(var(--wj-surface)); --bs-table-color: hsl(var(--wj-text)); color: hsl(var(--wj-text)); } .table thead th { background-color: hsl(var(--wj-table-header-bg)); color: hsl(var(--wj-table-header-text)); border-bottom-color: hsl(var(--wj-table-border)); } .table td, .table th { border-color: hsl(var(--wj-table-border)); } .table tbody tr:hover { background-color: hsl(var(--wj-table-row-hover)); } /* Modals */ .modal-content { background-color: hsl(var(--wj-surface)); border-color: hsl(var(--wj-border)); } .modal-header { background-color: hsl(var(--wj-surface-2)); border-bottom-color: hsl(var(--wj-border)); } .modal-header .modal-title { color: hsl(var(--wj-text)); } .modal-body { background-color: hsl(var(--wj-surface)); color: hsl(var(--wj-text)); } .modal-footer { background-color: hsl(var(--wj-surface-2)); border-top-color: hsl(var(--wj-border)); } /* Dropdowns */ .dropdown-menu { background-color: hsl(var(--wj-surface-2)); border-color: hsl(var(--wj-border)); box-shadow: var(--wj-shadow-lg); } .dropdown-item { color: hsl(var(--wj-text)); } .dropdown-item:hover, .dropdown-item:focus { background-color: hsl(var(--wj-surface-3)); color: hsl(var(--wj-text)); } /* Text Colors */ .text-muted { color: hsl(var(--wj-text-muted)) !important; } /* Headings */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: hsl(var(--wj-text)); } /* Badges */ .badge--success, .badge-success { background-color: hsl(var(--wj-success-bg)); color: hsl(var(--wj-success-text)); } .badge--warning, .badge-warning { background-color: hsl(var(--wj-warning-bg)); color: hsl(var(--wj-warning-text)); } .badge--danger, .badge-danger { background-color: hsl(var(--wj-danger-bg)); color: hsl(var(--wj-danger-text)); } .badge--info, .badge-info { background-color: hsl(var(--wj-info-bg)); color: hsl(var(--wj-info-text)); } /* Dashboard areas */ .dashboard-body, .dashboard-main, .main-wrapper, .dashboard__area-inner { background-color: hsl(var(--wj-bg)); } /* Buttons (outline) */ .btn-outline--base { border-color: hsl(var(--wj-accent)); color: hsl(var(--wj-accent)); } .btn-outline--base:hover { background-color: hsl(var(--wj-accent)); color: hsl(var(--wj-accent-contrast)); } /* Alerts */ .alert--success, .alert-success { background-color: hsl(var(--wj-success-bg)); color: hsl(var(--wj-success-text)); border-color: hsl(var(--wj-success-text) / 0.2); } .alert--warning, .alert-warning { background-color: hsl(var(--wj-warning-bg)); color: hsl(var(--wj-warning-text)); border-color: hsl(var(--wj-warning-text) / 0.2); } .alert--danger, .alert-danger { background-color: hsl(var(--wj-danger-bg)); color: hsl(var(--wj-danger-text)); border-color: hsl(var(--wj-danger-text) / 0.2); } .alert--info, .alert-info { background-color: hsl(var(--wj-info-bg)); color: hsl(var(--wj-info-text)); border-color: hsl(var(--wj-info-text) / 0.2); } /* Select2 */ [data-theme="dark"] .select2-container--default .select2-selection--single { background-color: hsl(var(--wj-input-bg)); border-color: hsl(var(--wj-input-border)); } [data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: hsl(var(--wj-input-text)); } [data-theme="dark"] .select2-dropdown { background-color: hsl(var(--wj-surface-2)); border-color: hsl(var(--wj-border)); } [data-theme="dark"] .select2-search .select2-search__field { background-color: hsl(var(--wj-input-bg)); color: hsl(var(--wj-input-text)); border-color: hsl(var(--wj-input-border)); } /* Pagination */ [data-theme="dark"] .page-link { background-color: hsl(var(--wj-surface)); border-color: hsl(var(--wj-border)); color: hsl(var(--wj-text)); } [data-theme="dark"] .page-item.active .page-link { background-color: hsl(var(--wj-accent)); border-color: hsl(var(--wj-accent)); } /* Nav tabs */ [data-theme="dark"] .nav-tabs .nav-link { color: hsl(var(--wj-text-secondary)); } [data-theme="dark"] .nav-tabs .nav-link.active { background-color: hsl(var(--wj-surface)); border-color: hsl(var(--wj-border)); color: hsl(var(--wj-text)); } /* Breadcrumb */ [data-theme="dark"] .breadcrumb-item a { color: hsl(var(--wj-text-secondary)); } [data-theme="dark"] .breadcrumb-item.active { color: hsl(var(--wj-text-muted)); } /* List Groups */ [data-theme="dark"] .list-group-item { background-color: hsl(var(--wj-surface)); border-color: hsl(var(--wj-border)); color: hsl(var(--wj-text)); } /* Tooltips */ [data-theme="dark"] .tooltip-inner { background-color: hsl(var(--wj-surface-3)); color: hsl(var(--wj-text)); } /* Offcanvas */ [data-theme="dark"] .offcanvas { background-color: hsl(var(--wj-surface)); color: hsl(var(--wj-text)); } /* ======================================== Responsive Tables (auto-wrap) Makes ALL dashboard tables horizontally scrollable on small screens without modifying individual blade files. ======================================== */ .dashboard-body .table-area, .dashboard-container .table-area, .card-body .table-area, .dashboard-body .card-body, .dashboard__right .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 767px) { .dashboard-body table, .dashboard-container table, .dashboard__right table { min-width: 600px; } .dashboard-body .card-body, .dashboard-container .card-body, .dashboard__right .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 575px) { .dashboard-body table, .dashboard-container table, .dashboard__right table { min-width: 500px; font-size: 0.875rem; } .dashboard-body table th, .dashboard-body table td, .dashboard-container table th, .dashboard-container table td { padding: 8px 10px; white-space: nowrap; } }