# Design System Root Fix — 2026-05-30 ## Root Cause of Design Inconsistency The system had two completely separate color systems that did not reference each other: 1. **Dashboard (chat-workspace.css)**: Used `--wa: #25D366`, `--wa-dark: #128C7E`, `--wa-soft: rgba(37,211,102,.14)` — hardcoded WhatsApp green, completely independent from the Filament theme. 2. **Filament pages (crm-theme.css)**: Used `--crm-accent: #22c55e` (dark mode) / `#16a34a` (light mode) — also hardcoded. These two systems were never linked. Changing a color in one had zero effect on the other. There was also no user-facing color picker — only a dark/light mode toggle. ## Old Conflicting Files | File | Issue | |------|-------| | `public/css/chat-workspace.css` | Hardcoded `--wa`, `--wa-dark`, `--wa-soft` values | | `public/css/crm-theme.css` | Hardcoded `--crm-accent`, `--crm-accent-hover`, `--crm-accent-soft` in both dark/light blocks | | `public/js/crm-theme.js` | No primary color management — only dark/light toggle | | `app/Providers/Filament/AdminPanelProvider.php` | Inline head script only set dark/light class, did not apply primary color | ## New Design System Strategy ### Single Primary Color Variable `:root { --crm-primary: #16a34a; }` is the single source of truth for the brand/accent color. - `--crm-primary` is set in `:root` as the CSS default - Both `html.crm-theme-dark` and `html.crm-theme-light` alias their `--crm-accent` to `var(--crm-primary)` - `chat-workspace.css` aliases `--wa` to `var(--crm-primary)`, `--wa-dark` to `var(--crm-primary-hover)`, `--wa-soft` to `var(--crm-primary-soft)` - When `crm-theme.js` calls `applyPrimaryToDOM(color)`, it sets `--crm-primary`, `--crm-primary-hover`, `--crm-primary-soft` (plus `--crm-accent` aliases) on `document.documentElement.style` — which cascades to ALL uses throughout the system ### CSS Variable Chain ``` localStorage['crm-primary-color'] → crm-theme.js applyPrimaryToDOM() → document.documentElement.style.setProperty('--crm-primary', color) → html.crm-theme-dark { --crm-accent: var(--crm-primary) } ← Filament pages → :root { --wa: var(--crm-primary) } ← Dashboard ``` ## Theme Persistence Method - `localStorage.setItem('crm-primary-color', color)` — persists across refresh and navigation - Inline `