/** * Ecombooster — Shared UI Components * * Reusable component styles for all modern admin views (hubs and standalone). * Prefix: ecb-* * * Components: * Layout: ecb-layout, ecb-sidebar, ecb-main, ecb-grid-2, ecb-grid-3 * KPI: ecb-kpis, ecb-kpi-card, ecb-kpi-value, ecb-kpi-label, ecb-kpi-trend * Sections: ecb-section, ecb-section-title * Tables: ecb-table, ecb-sortable (sortable headers) * Badges: ecb-badge (.draft/.approved/.published/.rejected/.info/.warning) * Scores: ecb-score (.excellent/.good/.average/.poor) * Tabs: ecb-tabs, ecb-tab, ecb-tab-panel * Buttons: ecb-btn, ecb-btn-primary, ecb-btn-secondary, ecb-btn-danger, ecb-btn-sm * Modals: ecb-modal-overlay, ecb-modal, ecb-modal-header/body/footer * Loading: ecb-loading, ecb-spinner * Charts: ecb-chart-container * Toast: ecb-toast * Search: ecb-search-dropdown, ecb-search-item * Forms: ecb-form-group, ecb-explanation */ /* ========================================================================== Design tokens — modern UI palette -------------------------------------------------------------------------- These mirror the tokens shipped by the Tailwind build (frontend/tailwind.config.js) so non-`.twp`-scoped views (hubs, classic admin) get the same brand colors that Tailwind utilities produce inside `.twp`. The Tailwind config references these via `var(--ecb-*, )` — defining them here makes the variable path active globally, not just inside the Tailwind bundle. ========================================================================== */ :root { --ecb-primary: #417690; --ecb-primary-dark: #2d5468; --ecb-text: #1f2937; --ecb-text-soft: #4b5563; --ecb-bg: #ffffff; --ecb-bg-soft: #f9fafb; --ecb-border: #e5e7eb; --ecb-success: #059669; --ecb-warning: #d97706; --ecb-danger: #dc2626; /* Theme tokens — light defaults. Switched in [data-theme="dark"] block below. The FOUC-prevention script in modern/base.html + common/hub_base.html sets data-theme on from localStorage before CSS loads, so dark renders on first paint without flashing the light palette. */ --theme-bg: #f8fafc; /* page background (slate-50) */ --theme-bg-elevated: #ffffff; /* card / panel background */ --theme-bg-subtle: #f1f5f9; /* hover background, secondary fill (slate-100) */ --theme-fg: #0f172a; /* primary text (slate-900) */ --theme-fg-muted: #475569; /* secondary text (slate-600) */ --theme-fg-subtle: #94a3b8; /* tertiary text, placeholders (slate-400) */ --theme-border: #e2e8f0; /* default border (slate-200) */ --theme-border-strong: #cbd5e1; /* focused border (slate-300) */ --theme-shadow-1: 0 1px 0 rgba(16, 24, 40, 0.03), 0 1px 2px rgba(16, 24, 40, 0.05); --theme-shadow-2: 0 4px 12px rgba(15, 23, 42, 0.08); --theme-primary: var(--ecb-primary, #417690); --theme-primary-soft: rgba(65, 118, 144, 0.10); /* primary tinted background */ --theme-success: #15803d; /* green-700 */ --theme-warning: #b45309; /* amber-700 */ --theme-danger: #b91c1c; /* red-700 */ } [data-theme="dark"] { --theme-bg: #0f172a; /* slate-900 */ --theme-bg-elevated: #1e293b; /* slate-800 */ --theme-bg-subtle: #334155; /* slate-700 */ --theme-fg: #f1f5f9; /* slate-100 */ --theme-fg-muted: #cbd5e1; /* slate-300 */ --theme-fg-subtle: #94a3b8; /* slate-400 */ --theme-border: #334155; /* slate-700 */ --theme-border-strong: #475569; /* slate-600 */ --theme-shadow-1: 0 1px 0 rgba(0, 0, 0, 0.30), 0 2px 4px rgba(0, 0, 0, 0.40); --theme-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45); --theme-primary: #6fa9c2; /* lighter ecb-primary for dark bg contrast */ --theme-primary-soft: rgba(111, 169, 194, 0.15); --theme-success: #4ade80; /* green-400 */ --theme-warning: #fbbf24; /* amber-400 */ --theme-danger: #f87171; /* red-400 */ } /* Body / shell paints the page background in the current theme. Modern shell templates and hub_base.html set body bg directly; those can stay as var(--theme-bg) once migrated. This rule is the default for any body that doesn't override. */ html[data-theme] body { background: var(--theme-bg); color: var(--theme-fg); } /* Brand logo swap — show the blue mark on light, the white mark on dark. */ .theme-logo-light { display: inline-block; } .theme-logo-dark { display: none; } [data-theme="dark"] .theme-logo-light { display: none; } [data-theme="dark"] .theme-logo-dark { display: inline-block; } /* Alpine.js compatibility — needs the [x-cloak] rule to hide elements until Alpine initialises, and a button reset inside .twp so Tailwind utility classes work on