/* * TQPro Design Tokens * Generated by Claude Code from codebase analysis. * SOURCE OF TRUTH — do not hardcode values that exist here. * Last updated: 2026-04-02 * * Usage: This file is informational. The actual tokens are applied via * CSS custom properties in tqweb-adm/css/tqadmin.css. * Module-specific tokens (booking statuses, service-type colors) are in * their respective module CSS files. */ /* ========================================================= COLOR PALETTE ========================================================= */ :root { /* Brand */ --primary-color: #362c5d; /* TQPro purple */ --primary-dark: #2a2149; /* Darker purple (navbar, accents) */ --secondary-color: #FFC166; /* Amber/gold accent */ /* Semantic */ --success-color: #198754; /* Bootstrap 5 green */ --warning-color: #ffc107; /* Bootstrap 5 amber */ --alert-color: #dc3545; /* Bootstrap 5 red (danger) */ --info-color: #0dcaf0; /* Bootstrap 5 cyan */ /* Surface */ --light-bg: #f8f9fa; /* Page background */ /* --bg-sidebar: #2a2149; Defined inline in header_bootstrap.html */ /* --bg-topbar: #2a2149; Same as sidebar */ /* --bg-card: #ffffff; White, not tokenized */ /* Borders */ --border-color: #dee2e6; /* Bootstrap 5 default border */ } /* ========================================================= TYPOGRAPHY ========================================================= */ /* Font family: 'Inter', 'Noto Sans', sans-serif (loaded via Google Fonts in each page ) Base size: 0.95rem (tqadmin.css input/label sizing) Label weight: 600 Label color: #4a5568 Heading color: #2d3748 Note: No --tq-font-* variables are defined in the codebase. Typography is controlled by Bootstrap 5 defaults + tqadmin.css selectors. */ /* ========================================================= SPACING ========================================================= */ /* Card body padding: 1.25rem (content-card-body) KPI card padding: 0.75rem 1rem (compact, low-height) Breadcrumb padding: 0.5rem 1rem Filter bar padding: 0.75rem 1rem Section gap: 1rem (margin-bottom on breadcrumbs, filter bars) Content card gap: 20px (margin-bottom on content-card) Form section gap: 25px (margin-bottom on form-section) Note: Bootstrap 5's spacing utilities (p-*, m-*, gap-*) are used inline rather than CSS variables. */ /* ========================================================= SHADOWS & ELEVATION ========================================================= */ :root { --shadow-sm: 0 0.125rem 0.25rem rgba(0,0,0,0.075); /* Bootstrap standard */ --shadow-md: 0 0.5rem 1rem rgba(0,0,0,0.15); /* Bootstrap standard */ --shadow-lg: 0 8px 16px rgba(0,0,0,0.15); /* Modals, overlays */ } /* ========================================================= TRANSITIONS ========================================================= */ :root { --transition: all 0.2s ease; } /* ========================================================= LAYOUT ========================================================= */ /* Topbar height: 80px (fixed navbar, all pages use margin-top: 80px) Sidebar: None (topbar-only navigation via header_bootstrap.html) Content container: .container-fluid (full-width with browser padding) Content max-width: 1400px (set globally in tqadmin.css, auto-centered) */ /* ========================================================= Z-INDEX SCALE ========================================================= */ /* Bootstrap 5 defaults used: z-dropdown: 1000 z-sticky: 1020 z-fixed: 1030 (navbar) z-offcanvas: 1045 z-modal: 1055 z-popover: 1070 z-tooltip: 1080 z-toast: 1090 (TQ toast container) */ /* ========================================================= STATUS BADGE COLORS (Bootstrap bg-* classes — no custom CSS needed) ========================================================= */ /* All status badges use Bootstrap 5 bg-* utility classes: CONFIRMED / APPROVED / ACTIVE / AVAILABLE → bg-success PENDING / OPTION_HELD / RESERVED → bg-warning text-dark CANCELLED / REJECTED / EXPIRED / DECLINED → bg-danger DRAFT / ARCHIVED / INACTIVE → bg-secondary ENQUIRY / QUOTED / IN_PROGRESS / SOLD → bg-primary COMPLETED / DEPARTED → bg-dark AMENDED / INFO → bg-info text-dark Text casing: Title Case (via formatStatusLabel() in tqpro-components.js) */ /* ========================================================= BOOKING LIFECYCLE STATUS COLORS (domain-specific) Defined in tqweb-adm/css/booking.css ========================================================= */ /* --blm-enquiry: #0d6efd (blue) --blm-quoted: #6f42c1 (purple) --blm-option-held: #fd7e14 (orange) --blm-confirmed: #198754 (green) --blm-amended: #0dcaf0 (cyan) --blm-ticketed: #6610f2 (indigo) --blm-completed: #146c43 (dark green) --blm-cancelled: #dc3545 (red) --blm-expired: #6c757d (gray) */ /* ========================================================= SERVICE TYPE COLORS (domain-specific) Defined in tqweb-adm/css/tripmaker.css ========================================================= */ /* --tm-flight: #0d6efd (blue) --tm-hotel: #198754 (green) --tm-activity: #6f42c1 (purple) --tm-exclusion: #dc3545 (red) --tm-other-service: #fd7e14 (orange) */ /* ========================================================= COMPONENT CLASS REFERENCE ========================================================= */ /* Unified component classes (defined in tqadmin.css): .tq-breadcrumb Page breadcrumb navigation bar .tq-filter-bar Search/filter controls container .tq-kpi-card KPI stat card (border-left accent, compact) .tq-empty-state Empty state panel (icon + heading + message) .tq-main-content Main content area (margin-top: 80px) .content-card Section card (white bg, shadow, rounded) .content-card-header Card header (gradient bg, flex layout) .content-card-body Card body (1.25rem padding) .content-card-title Card heading (1.25rem, 600 weight) .data-table-wrapper Table container (shadow, rounded) .form-section Form field group container .form-section-title Form group heading with bottom border .action-btn Inline action button */