/* ============================================================================ * tokens.css — Tầng token nền tảng cho toàn bộ giao diện WindMedia. * * VÌ SAO CÓ FILE NÀY * Trước đây codebase có 273 mã hex hardcode rải khắp template/JS và 39 namespace * biến CSS rời rạc (--aal-*, --as-*, --bops-*…), mỗi trang tự đặt một bộ riêng. * Đổi một màu thương hiệu = sửa tay hàng trăm chỗ. File này là NGUỒN SỰ THẬT * DUY NHẤT: mọi màu / khoảng cách / bo góc / đổ bóng mới đều lấy từ đây. * * HƯỚNG THIẾT KẾ: "Chrome trầm, dữ liệu nổi" * WindMedia là công cụ vận hành nội bộ — nhân viên ngồi trong bảng dữ liệu dày * suốt 8 tiếng/ngày. Nên phần khung (nav, header, nền, đường kẻ) cố tình giữ * trầm và ít tương phản; NGÂN SÁCH MÀU DÀNH HẾT CHO DỮ LIỆU. Nếu bạn định thêm * màu vào một thành phần khung, hãy cân nhắc lại — gần như luôn là sai chỗ. * * QUY ƯỚC ĐẶT TÊN: --wm-- * wm = WindMedia. Tiền tố này tránh đụng với AdminLTE / Bootstrap / Tailwind. * * LƯU Ý: file này phải được nạp TRƯỚC page_ui.css trong base.html. * ========================================================================= */ :root { /* ------------------------------------------------------------------ * 1. TYPOGRAPHY * Be Vietnam Pro: mặt chữ thiết kế riêng cho tiếng Việt — dấu được vẽ tay * theo từng nguyên âm thay vì ghép máy móc, nên ằ/ế/ộ/ữ không bị dính * vào thân chữ ở weight cao. Nạp đủ 400–800 tại base.html. * JetBrains Mono: CHỈ dùng cho số liệu (xem .ui-num trong page_ui.css). * Monospace bảo đảm mọi chữ số rộng bằng nhau → cột tiền căn thẳng * tuyệt đối, mắt quét dọc được. Không dùng cho văn bản thường. * ---------------------------------------------------------------- */ --wm-font-sans: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --wm-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace; /* Thang cỡ chữ — tỉ lệ ~1.2 (minor third), đủ bước cho UI dày mà không loãng. Cỡ nhỏ cố tình khít nhau vì phần lớn giao diện sống trong khoảng 12–16px. */ --wm-text-2xs: 10.5px; /* nhãn siêu nhỏ trong bảng */ --wm-text-xs: 12px; /* caption, meta, nhãn cột */ --wm-text-sm: 13.5px; /* mặc định cho control: nút, input, ô bảng */ --wm-text-base: 15px; /* văn bản thân */ --wm-text-lg: 17px; /* tiêu đề card */ --wm-text-xl: 20px; /* tiêu đề trang */ --wm-text-2xl: 26px; /* số KPI */ --wm-text-3xl: 34px; /* số KPI cỡ lớn */ --wm-leading-tight: 1.2; /* tiêu đề và số */ --wm-leading-normal: 1.5; /* văn bản */ /* ------------------------------------------------------------------ * 2. MÀU NỀN TẢNG — thang trung tính lạnh (slate) * Ám xanh nhẹ thay vì xám thuần: khi đặt cạnh màu xanh lá thương hiệu, * xám thuần bị đọc thành ngả hồng. Đây là thang app đã dùng sẵn nhiều * nhất (#f1f5f9 / #e2e8f0 / #94a3b8 / #64748b) — chỉ chuẩn hóa lại. * ---------------------------------------------------------------- */ --wm-slate-50: #f8fafc; --wm-slate-100: #f1f5f9; --wm-slate-200: #e2e8f0; --wm-slate-300: #cbd5e1; --wm-slate-400: #94a3b8; --wm-slate-500: #64748b; --wm-slate-600: #475569; --wm-slate-700: #334155; --wm-slate-800: #1e293b; --wm-slate-900: #0f172a; /* ------------------------------------------------------------------ * 3. SÁU MÀU CHỦ ĐẠO * Mỗi màu có 3 bậc: -soft (nền), bậc chính (viền/icon), -deep (chữ trên nền * soft — đã kiểm tương phản >= 4.5:1 nên luôn dùng cặp soft/deep cho chip). * ---------------------------------------------------------------- */ /* Thương hiệu — xanh ngọc. Giữ nguyên #10b981 vì đây là nhận diện WindMedia đã ăn sâu (426 lần dùng trong codebase). */ --wm-brand-soft: #ecfdf5; --wm-brand: #10b981; --wm-brand-deep: #047857; /* Thành công / hoàn tất */ --wm-success-soft: #dcfce7; --wm-success: #16a34a; --wm-success-deep: #15803d; /* Cảnh báo / sắp đến hạn */ --wm-warn-soft: #fef3c7; --wm-warn: #f59e0b; --wm-warn-deep: #b45309; /* Nguy hiểm / quá hạn / huỷ */ --wm-danger-soft: #ffe4e6; --wm-danger: #e11d48; --wm-danger-deep: #be123c; /* Thông tin / đang xử lý */ --wm-info-soft: #e0f2fe; --wm-info: #0284c7; --wm-info-deep: #0369a1; /* Nhấn phụ — tím, dùng cho nhóm tính năng media/nội dung */ --wm-accent-soft: #ede9fe; --wm-accent: #7c3aed; --wm-accent-deep: #5b21b6; /* ------------------------------------------------------------------ * 4. VAI TRÒ NGỮ NGHĨA — luôn ưu tiên dùng nhóm này thay vì gọi thẳng * thang màu ở trên. Nhờ vậy sau này đổi chủ đề chỉ cần sửa một chỗ. * ---------------------------------------------------------------- */ --wm-bg: #f6f8fa; /* nền trang */ --wm-surface: #ffffff; /* nền card / bảng */ --wm-surface-sunken: var(--wm-slate-50); /* nền vùng lõm: thead, toolbar */ --wm-surface-hover: var(--wm-slate-100); --wm-border: var(--wm-slate-200); /* đường kẻ mặc định */ --wm-border-strong: var(--wm-slate-300); /* viền input, phân tách rõ */ --wm-border-subtle: #eef2f6; /* kẻ giữa các hàng bảng */ --wm-text: var(--wm-slate-900); /* chữ chính */ --wm-text-secondary: var(--wm-slate-600); /* chữ phụ */ --wm-text-muted: var(--wm-slate-400); /* nhãn, placeholder, meta */ --wm-text-on-brand: #ffffff; --wm-focus-ring: 0 0 0 3px rgba(16, 185, 129, 0.28); /* ------------------------------------------------------------------ * 5. KHOẢNG CÁCH — thang 4px. Dùng token, đừng chế số lẻ: * số lẻ rải rác chính là thứ làm giao diện trông "gần đều mà không đều". * ---------------------------------------------------------------- */ --wm-space-1: 4px; --wm-space-2: 8px; --wm-space-3: 12px; --wm-space-4: 16px; --wm-space-5: 20px; --wm-space-6: 24px; --wm-space-8: 32px; --wm-space-10: 40px; /* ------------------------------------------------------------------ * 6. BO GÓC — thang chặt. Công cụ dữ liệu cần cạnh dứt khoát; bo góc lớn * làm các card cạnh nhau trông như bong bóng rời rạc, khó quét theo lưới. * ---------------------------------------------------------------- */ --wm-radius-sm: 6px; /* chip, badge */ --wm-radius: 8px; /* nút, input */ --wm-radius-lg: 10px; /* card */ --wm-radius-xl: 14px; /* modal */ --wm-radius-full: 999px; /* ------------------------------------------------------------------ * 7. ĐỔ BÓNG — rất tiết chế. Trong giao diện dày, bóng đậm tạo nhiễu thị * giác và làm chậm việc quét. Phân tách chủ yếu bằng ĐƯỜNG KẺ, bóng chỉ * dành cho thứ thực sự nổi lên trên (dropdown, modal). * ---------------------------------------------------------------- */ --wm-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --wm-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06); --wm-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --wm-shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12); /* ------------------------------------------------------------------ * 8. CHUYỂN ĐỘNG — nhanh và kín đáo. Người dùng lặp lại cùng một thao tác * hàng trăm lần/ngày; animation dài trở thành thuế phải trả mỗi lần. * ---------------------------------------------------------------- */ --wm-ease: cubic-bezier(0.4, 0, 0.2, 1); --wm-duration-fast: 120ms; --wm-duration: 180ms; /* ------------------------------------------------------------------ * 9. TẦNG XẾP CHỒNG — gom về một chỗ để hết cảnh z-index: 99999 đấu nhau. * ---------------------------------------------------------------- */ --wm-z-sticky: 100; /* thead dính, toolbar dính */ --wm-z-dropdown: 400; --wm-z-navbar: 500; --wm-z-modal: 900; --wm-z-toast: 1000; /* ------------------------------------------------------------------ * 10. RÃNH TRẠNG THÁI (status rail) — chữ ký thiết kế của hệ thống. * Vạch dọc ở mép trái mỗi hàng/thẻ, mã hóa trạng thái bằng MÀU TẠI MỘT VỊ * TRÍ CỐ ĐỊNH. Người dùng quét trạng thái bằng vị trí màu thay vì đọc chữ * — nhanh hơn hẳn trên bảng dày, và không tốn thêm pixel chiều ngang nào. * Xem .ui-rail trong page_ui.css. * ---------------------------------------------------------------- */ --wm-rail-width: 3px; } /* --------------------------------------------------------------------------- * BREAKPOINT CHUẨN — CSS không cho dùng var() trong @media, nên đây là hằng * số bằng tài liệu. Codebase hiện trộn lẫn 640/767/768/991/992/1024/1200/1400. * Code MỚI chỉ dùng đúng ba mốc dưới đây: * * @media (max-width: 640px) → điện thoại * @media (max-width: 992px) → tablet / sidebar thu gọn * @media (max-width: 1280px) → laptop nhỏ, bảng dày cần thu gọn cột * * Ba mốc này khớp với hai mốc đã phổ biến nhất sẵn trong repo (640: 51 lần, * 992: 36 lần), nên hầu hết code cũ đã đúng chuẩn mà không cần đụng tới. * ------------------------------------------------------------------------ */ /* ============================================================================ * BẢNG MÀU KẾ THỪA — đang thu hẹp dần. CODE MỚI ĐỪNG DÙNG MỤC NÀY. * * Mục 1–10 ở trên là design system: sáu màu ngữ nghĩa, một thang trung tính * lạnh. Nhưng app đã tích tụ thêm vài họ màu nữa qua nhiều đợt phát triển, * rõ nhất là CẢ MỘT thang xám thứ hai (thang "gray" ấm của Tailwind) chạy * song song với thang slate. Chúng khác giá trị thật (vd #e5e7eb ≠ #e2e8f0), * nên không thể ép về token ở trên mà không ĐỔI MÀU. * * Khai báo ở đây để đạt mục tiêu "đổi một màu, sửa một chỗ" ngay bây giờ, * đồng thời đánh dấu rõ đây là nợ kỹ thuật: mỗi lần đụng tới một trang, hãy * chuyển dần các biến này sang token ngữ nghĩa ở trên rồi xoá bớt dòng. * * Khi thêm giao diện MỚI: dùng --wm-slate-*, --wm-brand, --wm-danger… * ========================================================================= */ :root { /* Thang xám ấm (Tailwind gray) — thang trung tính thứ hai đang tồn tại. */ --wm-gray-50: #f9fafb; --wm-gray-100: #f3f4f6; --wm-gray-200: #e5e7eb; --wm-gray-300: #d1d5db; --wm-gray-400: #9ca3af; --wm-gray-500: #6b7280; --wm-gray-600: #4b5563; --wm-gray-700: #374151; --wm-gray-800: #1f2937; --wm-gray-900: #111827; /* Các bậc xanh ngọc dùng nhiều trong gradient thương hiệu cũ. */ --wm-brand-mid: #059669; /* điểm cuối của gradient thương hiệu */ --wm-brand-tint: #f0fdf4; --wm-brand-100: #d1fae5; --wm-brand-200: #a7f3d0; --wm-teal: #0ea5a5; --wm-teal-deep: #0f766e; /* Đỏ cảnh báo bậc khác với --wm-danger. */ --wm-red: #ef4444; --wm-red-deep: #dc2626; --wm-red-soft: #fee2e2; --wm-red-tint: #fef2f2; /* Xanh dương / chàm / tím — nhóm tính năng phụ. */ --wm-blue: #3b82f6; --wm-blue-soft: #dbeafe; --wm-sky: #0ea5e9; --wm-indigo: #6366f1; --wm-indigo-deep: #4f46e5; --wm-violet: #8b5cf6; --wm-amber-deep: #d97706; }