/* * Design tokens -- VoluntX design system v2, dark-first and data-dense * (see the rewrite plan's Phase 10 / DESIGN.md at the repo root). Loaded * after bootstrap.min.css and before app.css: overrides Bootstrap 5.3's * own --bs-* custom properties rather than inventing a parallel class * system, so every existing view (all Bootstrap utility classes already) * re-themes automatically -- see app.css's file header for the full * rationale. Component-level classes (.vx-*) live in app.css; this file is * tokens only: color, radius, type scale, spacing fills. * * Hybrid theme: dark is the default (dashboard, roster, presence, admin * CRUD, directory). Views that want the light "reporting" mode set * data-bs-theme="light" on by passing ['theme' => 'light'] to * layouts.app -- see admin/reports/analytics.php and payroll.php. */ :root { /* Brand accents -- shared by both themes; DESIGN.md scopes these to semantic roles (verified/active, primary actions, technical metadata, destructive), not to light/dark. */ --vx-primary: #22c55e; --vx-primary-bright: #4be277; --vx-on-primary: #003915; --vx-secondary: #3b82f6; --vx-secondary-bright: #60a5fa; --vx-on-secondary: #001a42; --vx-tertiary: #06b6d4; --vx-on-tertiary: #003640; --vx-error: #ef4444; --vx-radius-sm: 0.25rem; /* inputs, buttons, chips -- 4px */ --vx-radius-md: 0.5rem; /* cards, modules -- 8px */ --vx-radius-pill: 999px; /* switches */ --vx-space-xs: 0.25rem; --vx-space-sm: 0.5rem; --vx-space-md: 1rem; --vx-space-lg: 1.5rem; --vx-space-xl: 3rem; --vx-sidebar-width: 240px; --vx-sidebar-width-collapsed: 64px; --vx-topbar-height: 64px; --vx-container-max: 1440px; } /* ---- Dark theme (operational default) --------------------------------- */ :root, [data-bs-theme="dark"] { color-scheme: dark; --vx-surface-dim: #131313; --vx-surface: #131313; --vx-surface-bright: #393939; --vx-surface-container-lowest: #0e0e0e; --vx-surface-container-low: #1b1b1b; --vx-surface-container: #1f1f1f; --vx-surface-container-high: #2a2a2a; --vx-surface-container-highest: #353535; --vx-on-surface: #e2e2e2; --vx-on-surface-variant: #a3ada2; --vx-outline: #869585; --vx-outline-variant: #3d4a3d; --bs-body-bg: var(--vx-surface); --bs-body-bg-rgb: 19, 19, 19; --bs-body-color: var(--vx-on-surface); --bs-emphasis-color: #ffffff; --bs-secondary-color: var(--vx-on-surface-variant); --bs-secondary-bg: var(--vx-surface-container); --bs-tertiary-bg: var(--vx-surface-container-low); --bs-border-color: var(--vx-outline-variant); --bs-border-color-translucent: var(--vx-outline-variant); --bs-link-color: var(--vx-primary-bright); --bs-link-hover-color: var(--vx-primary); --bs-card-bg: var(--vx-surface-container); --bs-card-border-color: var(--vx-outline-variant); --bs-card-cap-bg: var(--vx-surface-container-low); --bs-table-color: var(--vx-on-surface); --bs-table-bg: transparent; --bs-table-border-color: var(--vx-outline-variant); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-hover-bg: rgba(255, 255, 255, 0.05); --bs-primary: var(--vx-primary-bright); --bs-primary-rgb: 75, 226, 119; --bs-success: var(--vx-primary-bright); --bs-success-rgb: 75, 226, 119; --bs-secondary: var(--vx-secondary-bright); --bs-secondary-rgb: 96, 165, 250; --bs-info: var(--vx-tertiary); --bs-info-rgb: 6, 182, 212; --bs-danger: #ffb4ab; --bs-danger-rgb: 255, 180, 171; --bs-warning: #ffda6a; --bs-warning-rgb: 255, 218, 106; --bs-form-control-bg: var(--vx-surface-container-low); --bs-body-bg-inline: var(--vx-surface); } /* ---- Light theme (reports/analytics) ----------------------------------- */ [data-bs-theme="light"] { color-scheme: light; --vx-surface-dim: #e2e8f0; --vx-surface: #f8fafc; --vx-surface-bright: #ffffff; --vx-surface-container-lowest: #ffffff; --vx-surface-container-low: #ffffff; --vx-surface-container: #f1f5f9; --vx-surface-container-high: #e9eef3; --vx-surface-container-highest: #e2e8f0; --vx-on-surface: #0f172a; --vx-on-surface-variant: #475569; --vx-outline: #94a3b8; --vx-outline-variant: #e2e8f0; --bs-body-bg: var(--vx-surface); --bs-body-bg-rgb: 248, 250, 252; --bs-body-color: var(--vx-on-surface); --bs-emphasis-color: #000000; --bs-secondary-color: var(--vx-on-surface-variant); --bs-secondary-bg: var(--vx-surface-container); --bs-tertiary-bg: var(--vx-surface-container-high); --bs-border-color: var(--vx-outline-variant); --bs-border-color-translucent: var(--vx-outline-variant); --bs-link-color: #15803d; --bs-link-hover-color: #166534; --bs-card-bg: var(--vx-surface-container-low); --bs-card-border-color: var(--vx-outline-variant); --bs-card-cap-bg: var(--vx-surface-container); --bs-table-color: var(--vx-on-surface); --bs-table-bg: transparent; --bs-table-border-color: var(--vx-outline-variant); --bs-table-striped-bg: rgba(15, 23, 42, 0.03); --bs-table-hover-bg: rgba(15, 23, 42, 0.04); --bs-primary: var(--vx-primary); --bs-primary-rgb: 34, 197, 94; --bs-success: var(--vx-primary); --bs-success-rgb: 34, 197, 94; --bs-secondary: var(--vx-secondary); --bs-secondary-rgb: 59, 130, 246; --bs-info: var(--vx-tertiary); --bs-info-rgb: 6, 182, 212; --bs-danger: var(--vx-error); --bs-danger-rgb: 239, 68, 68; --bs-warning: #f59e0b; --bs-warning-rgb: 245, 158, 11; --bs-form-control-bg: #ffffff; } /* Both themes: shared radius + font family retargeting */ :root { --bs-border-radius: var(--vx-radius-sm); --bs-border-radius-sm: 0.125rem; --bs-border-radius-lg: var(--vx-radius-md); --bs-border-radius-xl: 0.75rem; --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --bs-font-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* * Component variable retarget. Bootstrap 5.3's *utility* classes * (.text-primary, .bg-primary, .border-primary) reference var(--bs-primary) * and so re-theme automatically from the overrides above -- but its * *component* classes (.btn-primary, .btn-outline-*, .form-check-input, * .form-control:focus...) ship with their own component-local custom * properties HARDCODED to Bootstrap's stock hex at compile time, e.g. * `.btn-primary{--bs-btn-bg:#0d6efd}`, never `var(--bs-primary)`. Without * this block, every button/checkbox/focus-ring in the app renders stock * Bootstrap blue regardless of the palette above -- caught via a live * screenshot showing a blue "Log in" button after the palette work looked * correct in isolation. Same technique Bootstrap itself uses (component- * scoped custom properties), just pointed at our tokens instead of its own. * * Solid-fill buttons on the brand accents need dark text, not Bootstrap's * default white -- --bs-primary/--bs-secondary are mid-luminance (relative * luminance ~0.41 / ~0.24), which fails WCAG AA (4.5:1) with white text in * EITHER theme; near-black text clears AA comfortably. This mirrors * DESIGN.md's own on-primary/on-secondary tokens. Danger keeps white text * deliberately -- the near-universal "white on red" destructive-action * convention, which still clears the 3:1 large-text/UI-component threshold * even though it's short of 4.5:1 for the button's own label text. */ .btn-primary, .btn-success { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); --bs-btn-color: var(--vx-on-primary); --bs-btn-hover-color: var(--vx-on-primary); --bs-btn-active-color: var(--vx-on-primary); --bs-btn-disabled-color: var(--vx-on-primary); } .btn-primary:hover, .btn-primary:active, .btn-success:hover, .btn-success:active { filter: brightness(0.92); } .btn-secondary { --bs-btn-bg: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-bg: var(--bs-secondary); --bs-btn-hover-border-color: var(--bs-secondary); --bs-btn-active-bg: var(--bs-secondary); --bs-btn-active-border-color: var(--bs-secondary); --bs-btn-disabled-bg: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); --bs-btn-color: var(--vx-on-secondary); --bs-btn-hover-color: var(--vx-on-secondary); --bs-btn-active-color: var(--vx-on-secondary); --bs-btn-disabled-color: var(--vx-on-secondary); } .btn-secondary:hover, .btn-secondary:active { filter: brightness(0.92); } .btn-danger { --bs-btn-bg: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-bg: var(--bs-danger); --bs-btn-hover-border-color: var(--bs-danger); --bs-btn-active-bg: var(--bs-danger); --bs-btn-active-border-color: var(--bs-danger); --bs-btn-disabled-bg: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger); } .btn-danger:hover, .btn-danger:active { filter: brightness(0.92); } .btn-outline-primary, .btn-outline-success { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-hover-color: var(--vx-on-primary); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-active-color: var(--vx-on-primary); --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); } .btn-outline-danger { --bs-btn-color: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-bg: var(--bs-danger); --bs-btn-hover-border-color: var(--bs-danger); --bs-btn-active-bg: var(--bs-danger); --bs-btn-active-border-color: var(--bs-danger); --bs-btn-disabled-color: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger); } .btn-outline-secondary { --bs-btn-color: var(--vx-on-surface-variant); --bs-btn-border-color: var(--vx-outline); --bs-btn-hover-bg: var(--vx-surface-container-high); --bs-btn-hover-border-color: var(--vx-outline); --bs-btn-hover-color: var(--vx-on-surface); --bs-btn-active-bg: var(--vx-surface-container-high); --bs-btn-active-border-color: var(--vx-outline); --bs-btn-active-color: var(--vx-on-surface); } /* Checkboxes, radios, switches -- .form-check-input:checked hardcodes Bootstrap blue the same way .btn-primary does. */ .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); } .form-check-input:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); } /* Text input / select focus ring -- .form-control:focus hardcodes the same Bootstrap blue border+shadow regardless of --bs-primary. */ .form-control:focus, .form-select:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); } /* Progress bar -- .progress-bar hardcodes Bootstrap blue via --bs-progress-bar-bg regardless of --bs-primary. First use: the Notification Centre's batch-send progress bar. */ .progress-bar { --bs-progress-bar-bg: var(--bs-primary); } /* Typography scale -- DESIGN.md's type tokens, applied as utility classes. Weight/line-height/tracking are the meaningful part; font-size uses clamp so `display` scales down under 768px per DESIGN.md's mobile note. */ .vx-display { font-family: "Hanken Grotesk", var(--bs-body-font-family); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem); line-height: 1.25; letter-spacing: -0.02em; } .vx-headline-md { font-family: "Hanken Grotesk", var(--bs-body-font-family); font-weight: 600; font-size: 1.5rem; line-height: 1.33; } .vx-headline-sm { font-family: "Hanken Grotesk", var(--bs-body-font-family); font-weight: 600; font-size: 1.25rem; line-height: 1.4; } .vx-label-caps { font-family: "JetBrains Mono", var(--bs-font-monospace); font-weight: 500; font-size: 0.6875rem; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; } .vx-data-mono { font-family: "JetBrains Mono", var(--bs-font-monospace); font-size: 0.8125rem; line-height: 1.4; } /* * CSP forbids style="width: ..%" (style-src 'self', no unsafe-inline) -- * these back the KPI trend bars / progress fills in stat_card.php. 5% * steps, generated rather than hand-written. */ .vx-fill-5 { width: 5%; } .vx-fill-10 { width: 10%; } .vx-fill-15 { width: 15%; } .vx-fill-20 { width: 20%; } .vx-fill-25 { width: 25%; } .vx-fill-30 { width: 30%; } .vx-fill-35 { width: 35%; } .vx-fill-40 { width: 40%; } .vx-fill-45 { width: 45%; } .vx-fill-50 { width: 50%; } .vx-fill-55 { width: 55%; } .vx-fill-60 { width: 60%; } .vx-fill-65 { width: 65%; } .vx-fill-70 { width: 70%; } .vx-fill-75 { width: 75%; } .vx-fill-80 { width: 80%; } .vx-fill-85 { width: 85%; } .vx-fill-90 { width: 90%; } .vx-fill-95 { width: 95%; } .vx-fill-100 { width: 100%; }