/* ============================================================================ tokens.css — DESIGN TOKENS dùng chung toàn hệ thống ClinicSolution ---------------------------------------------------------------------------- MỤC ĐÍCH: 1 nguồn giá trị giao diện (màu, font, size, radius, spacing) để mọi màn tham chiếu bằng var(--...) thay vì hardcode mỗi màn 1 kiểu. AN TOÀN: file này CHỈ định nghĩa biến trong :root — KHÔNG áp lên element nào. CSS variable không được var() gọi thì vô hại → thêm file này KHÔNG đổi hình bất kỳ màn cũ nào. Màn cũ giữ nguyên tới khi migrate dần từng màn. KHÔNG đụng --main-color / --accent-color (biến cũ đang dùng ở 27+ file) — giữ nguyên để màn cũ chạy tiếp. Token ở đây là TÊN MỚI (--brand, --fs-*, --h-*...). Tài liệu chuẩn + hướng dẫn migrate: docs/design.md ============================================================================ */ :root { /* ---- MÀU BRAND (teal-lá y tế — gom 4 sắc header xanh về 1) ---- */ --brand: #1d6f5c; /* header/workspace chủ đạo (đang dùng nhiều nhất) */ --brand-dark: #13503f; /* nhấn đậm, gradient dưới */ --brand-2: #22a06b; /* accent sáng (viền chọn, icon) */ --brand-soft: #ecfdf3; /* nền nhạt brand (head bảng, panel) */ --brand-sel: #8fdcb8; /* nền dòng đang chọn — đủ tách khỏi hover/zebra, chữ đen đạt tương phản tốt */ --row-sel: var(--brand-sel); /* dùng chung nguồn màu chọn cho mọi lưới */ --row-hover: #e1f4e8; /* hover nhẹ hơn rõ ràng so với dòng đang chọn */ /* ---- MÀU NÚT HÀNH ĐỘNG (vai trò nhất quán; gom biến thể lặp) ---- */ --btn-primary: #2563eb; --btn-primary-hover: #1d4ed8; /* xanh dương */ --btn-ok: #16a34a; --btn-ok-hover: #15803d; /* xanh lá success */ --btn-warn: #d97706; --btn-warn-hover: #b45309; /* cam cảnh báo */ --btn-danger: #dc2626; --btn-danger-hover: #b91c1c; /* đỏ nguy hiểm */ --btn-on: #ffffff; /* CHỮ trên nút màu (luôn trắng) */ /* ================================================================ DESIGN SYSTEM — MÀU NÚT THEO VAI TRÒ (10 vai trò, mỗi vai trò 1 màu) Chuẩn hóa 2026-07-30. Dùng qua class .btn-* trong button.css. ================================================================ */ /* Thêm (xanh lá) */ --act-add: #079455; --act-add-hover: #067a46; /* Sửa / Hủy chuyển (cam) */ --act-edit: #d97706; --act-edit-hover: #b45309; /* Xóa (đỏ) */ --act-delete: #dc2626; --act-delete-hover: #b91c1c; /* Lưu (xanh dương) */ --act-save: #175cd3; --act-save-hover: #1447a8; /* In (tím) — TÁCH khỏi Thêm */ --act-print: #6941c6; --act-print-hover: #53389e; /* Hủy / Đóng (xám) — TÁCH khỏi Mặc định */ --act-cancel: #475467; --act-cancel-hover: #344054; /* Mặc định (teal đậm) */ --act-default: #13503f; --act-default-hover: #0e3f31; /* Tìm / Làm mới (teal sáng) */ --act-search: #1d6f5c; --act-search-hover: #13503f; /* Gọi bệnh nhân (cyan) — TÁCH khỏi Thêm */ --act-call: #0891b2; --act-call-hover: #0e7490; /* OK / Xác nhận (xanh lá nhạt) */ --act-ok: #16a34a; --act-ok-hover: #15803d; /* Chữ trên nút (luôn trắng) */ --act-on: #ffffff; /* ================================================================ ICON CHUẨN THEO VAI TRÒ (FontAwesome 6 solid) Dùng để tham chiếu, class icon trong HTML vẫn ghi trực tiếp. ================================================================ */ --ico-add: 'fa-plus'; /* Thêm */ --ico-edit: 'fa-pen'; /* Sửa */ --ico-delete: 'fa-trash'; /* Xóa (button) */ --ico-delete-x: 'fa-xmark'; /* Xóa inline */ --ico-save: 'fa-floppy-disk'; /* Lưu */ --ico-print: 'fa-print'; /* In */ --ico-cancel: 'fa-xmark'; /* Hủy / Đóng */ --ico-search: 'fa-rotate'; /* Làm mới / Refresh */ --ico-find: 'fa-magnifying-glass'; /* Tìm kiếm */ --ico-call: 'fa-bullhorn'; /* Gọi bệnh nhân */ --ico-ok: 'fa-check'; /* OK / Duyệt */ --ico-config: 'fa-gear'; /* Cấu hình */ --ico-filter: 'fa-sliders'; /* Lọc nâng cao */ --ico-excel: 'fa-file-excel'; /* Xuất Excel */ --ico-import: 'fa-file-import'; /* Nhập */ --ico-export: 'fa-file-export'; /* Xuất chung */ --ico-history: 'fa-clock-rotate-left'; /* Lịch sử */ --ico-undo: 'fa-rotate-left'; /* Hủy duyệt / Hoàn tác */ --ico-ban: 'fa-ban'; /* Cấm / Hủy gửi */ /* ---- FOOTER BAR nút (dải hành động vùng nội dung phải) ---- */ --ft-bar-h: 34px; /* chiều cao dải footer */ --ft-btn-h: 30px; /* chiều cao nút trong footer */ --ft-gap: 2px; /* nút cách lề DƯỚI 2px */ /* Nền + viền dải footer. Trước đây 2 giá trị này bị hardcode rải rác (#eef1f5 / #d8e3de ở lamviec.css, kedonthuoc.css, từng màn Dược...) nên đổi nhịp footer phải sửa nhiều file. Thêm token ở đây KHÔNG đổi hình màn cũ (biến không được var() gọi thì vô hại). */ --ft-bar-bg: var(--surface-3); /* nền dải footer */ --ft-bar-line: #d8e3de; /* viền TRÊN dải footer */ /* ---- CHỮ (slate scale) ---- */ --text: #0f172a; /* chữ chính */ --muted: #475569; /* chữ phụ / label */ --muted-2: #94a3b8; /* chữ mờ / placeholder / icon nhạt */ /* ---- VIỀN & NỀN (gom 5 xám viền + 3 nền surface trùng nhau) ---- */ --line: #e5e7eb; /* đường kẻ / viền nhạt (thay #cbd5e1/#e3e7ec/#d0d5dd/#d1d5db) */ --line-2: #cbd5d0; /* viền đậm hơn (input, khung) */ --surface: #ffffff; /* nền thẻ/card */ --surface-2: #f6fefa; /* nền phụ nhạt (sidebar, panel) — ngả brand */ --surface-3: #eef1f5; /* nền xám cực nhạt (nền workspace) */ /* ---- NỀN MỞ RỘNG (gom 7 màu nền trắng/nhạt trùng nhau) ---- */ --surface-hover: #f1f5f9; /* hover menu, dropdown (thay #f8fafc/#f8f9fa/#eef2f7) */ --row-zebra: rgba(186,191,191,.2); /* nền hàng chẵn (zebra stripe) */ /* ---- CHỮ MỞ RỘNG ---- */ --text-strong: #101828; /* chữ đậm nhấn (thay #111827/#334155/#344054) */ --text-meta: #5b7168; /* chữ meta xanh xám (thay #52665f) */ /* ---- VIỀN MỞ RỘNG ---- */ --line-brand: #cfe3db; /* viền xanh brand nhạt (kb-ident, panel brand) */ /* ---- TRẠNG THÁI (nền/chữ badge) ---- */ --hi: #dc2626; /* giá trị cao / bất thường (đỏ) */ --lo: #1d4ed8; /* giá trị thấp (xanh dương) */ /* ================================================================ CHIP / BADGE — màu theo ngữ cảnh (giới tính, tuổi, phòng, trạng thái) Mỗi loại có 3 token: -bg (nền), -text (chữ), -border (viền) ================================================================ */ /* Chip mặc định */ --chip-default-bg: #eef3f1; --chip-default-text: #5b7168; --chip-default-border: #e3e7ec; /* Chip giới tính Nam (xanh dương nhạt) */ --chip-male-bg: #e6f0fb; --chip-male-text: #1456a0; --chip-male-border: #cfe0f5; /* Chip giới tính Nữ (hồng nhạt) */ --chip-female-bg: #fbe9f3; --chip-female-text: #a1266f; --chip-female-border: #f3cfe4; /* Chip tuổi (tím nhạt) */ --chip-age-bg: #eef2ff; --chip-age-text: #3730a3; --chip-age-border: #c7d2fe; /* Chip điện thoại (xanh lá nhạt) */ --chip-phone-bg: #ecfdf3; --chip-phone-text: #166534; --chip-phone-border: #bbf7d0; /* Chip phòng (cam nhạt) */ --chip-room-bg: #fff7ed; --chip-room-text: #9a3412; --chip-room-border: #fed7aa; /* Badge dị ứng / nguy hiểm (đỏ nhạt) */ --badge-danger-bg: #fef3f2; --badge-danger-text: #b42318; --badge-danger-border: #fecdc9; /* Badge thành công (xanh lá nhạt) */ --badge-success-bg: #ecfdf3; --badge-success-text: #166534; --badge-success-border: #bbf7d0; /* Badge cảnh báo (vàng nhạt) */ --badge-warn-bg: #fffbeb; --badge-warn-text: #92400e; --badge-warn-border: #fde68a; /* Badge thông tin (xanh dương nhạt) */ --badge-info-bg: #eff6ff; --badge-info-text: #1e40af; --badge-info-border: #bfdbfe; /* ================================================================ TRẠNG THÁI WORKLIST — 6 loại màu badge/chip (wait/progress/done/end/warn/danger) Dùng trong component 06-worklist.js, dropdown lọc trạng thái, và chip trạng thái. ================================================================ */ /* Chờ (cam — đang chờ hành động) */ --st-wait-bg: #fff7ed; --st-wait-text: #c2410c; /* Đang xử lý (xanh dương — đang tiến hành) */ --st-progress-bg: #eff6ff; --st-progress-text: #1d4ed8; /* Hoàn tất (xanh lá — đã xong bước chính) */ --st-done-bg: #ecfdf3; --st-done-text: #166534; /* Kết thúc (xám — đã đóng, không còn xử lý) */ --st-end-bg: #f3f4f6; --st-end-text: #4b5563; /* Cảnh báo (vàng cam — cần chú ý) */ --st-warn-bg: #fffbeb; --st-warn-text: #92400e; /* Nguy hiểm (đỏ — lỗi, hủy, cần can thiệp) */ --st-danger-bg: #fef2f2; --st-danger-text: #b91c1c; /* ---- DATE PICKER ---- */ --date-today-border: #9aa4ad; /* viền ngày hôm nay */ --date-selected: #5b9deb; /* nền ngày được chọn */ /* ---- MENU ACCENT ---- */ --menu-active: #FFC107; /* màu vàng active menu */ /* ---- FONT ---- */ --font-ui: 'Segoe UI', Roboto, Arial, sans-serif; /* chữ giao diện (gom 7 stack) */ --font-mono: ui-monospace, Consolas, 'Courier New', monospace; /* mã/số (gom 4 mono) */ /* ---- FONT-SIZE scale (7 bậc — bỏ toàn bộ nửa bậc 10.5/11.5/12.5/13.5/14.5) ---- */ --fs-xs: 11px; /* label nhỏ, badge, chú thích (thay 10.5/11/11.5) */ --fs-sm: 12px; /* text phụ, nút nhỏ, ô lưới (thay 12/12.5) */ --fs-base: 13px; /* BODY chuẩn — mặc định form/bảng (thay 13/13.5/14.5) */ --fs-md: 14px; /* text nhấn, nút thường */ --fs-lg: 16px; /* tiêu đề phụ / ws-title (thay 15/15.5/16/17) */ --fs-xl: 20px; /* heading (thay 18/19/20/21) */ --fs-2xl: 24px; /* heading lớn (thay 22-26) */ /* ---- FONT-WEIGHT (bỏ rác 550/650/680/750) ---- */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---- KÍCH THƯỚC control (gom 7 chiều cao input về 1) ---- */ --h-input: 32px; /* chiều cao input/select/nút chuẩn (thay 28/30/33/35/38/40) */ --h-input-sm: 28px; /* biến thể nhỏ (toolbar, nút phụ) */ --h-input-compact: 30px; /* nhịp gọn cho workspace HIS nhiều dữ liệu */ /* Độ rộng ô ngày trong FORM nghiệp vụ. Không dùng cho cặp Từ/Đến của bộ lọc. */ --w-date: 130px; /* dd/MM/yyyy */ --w-date-birth: 140px; /* dd/MM/yyyy hoặc mm/yyyy hoặc yyyy */ --w-datetime: 158px; /* dd/MM/yyyy HH:mm */ --fs-compact: 12px; /* chữ control gọn, vẫn giữ nhãn/tiêu đề riêng */ --h-bar: 46px; /* thanh header workspace */ /* ---- BO GÓC — WIN8 "Lai vừa phải": gần vuông (radius 2px) ---- */ /* Trước Win8: 6/8/12. Nay ép về 2px cho phong cách Metro cứng cáp mà không gắt. Avatar/icon tròn giữ border-radius:50% riêng (không qua token này). */ --radius-sm: 2px; /* input, nút, ô nhỏ */ --radius: 2px; /* thẻ/card, panel */ --radius-lg: 2px; /* modal, khối lớn */ /* ---- KHOẢNG CÁCH (spacing scale 4px) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; /* ---- ĐỔ BÓNG — WIN8: làm phẳng, bóng rất nhẹ (giữ shadow-lg cho modal) ---- */ --shadow-sm: 0 1px 1px rgba(15,23,42,.05); --shadow-md: 0 2px 6px rgba(15,23,42,.07); --shadow-lg: 0 12px 40px rgba(0,0,0,.24); /* ================================================================ VẠCH DÒNG ĐANG CHỌN — nguồn DUY NHẤT cho CẢ 4 lưới ---------------------------------------------------------------- Nền dòng chọn đã thống nhất sẵn qua --row-sel (khai ở trên). Còn VẠCH/INSET trái thì trước đây mỗi lưới lấy 1 nguồn khác nhau: wdGrid -> var(--brand) #1d6f5c dataTable -> var(--main-color) #055952 (master.css, hệ CŨ) worklist -> var(--main-color) #055952 newGrid -> var(--main-color) #055952 => 2 sắc teal cho cùng 1 ý nghĩa. Nay cả 4 trỏ vào token này. Đổi màu vạch chọn toàn hệ = sửa ĐÚNG 1 dòng dưới đây. ================================================================ */ --row-sel-bar: var(--brand); /* vạch/inset trái dòng đang chọn */ /* ================================================================ QUẦNG FOCUS — dẫn xuất từ --brand ---------------------------------------------------------------- Trước đây focus của TOÀN hệ lấy --tranfer-color (#05595285) khai ở master.css: teal CŨ pha alpha 52% -> viền nhòe, tương phản yếu, và nằm ngoài tokens.css nên đổi brand không kéo theo focus. Nay: viền ĐẶC 1px + ring 3px không nhòe, cùng họ màu --brand. ================================================================ */ --focus-bd: var(--brand); /* viền ô đang focus */ --focus-ring: 0 0 0 3px rgba(29,111,92,.24); /* quầng ngoài (rgba của #1d6f5c) */ /* ---- CHIP SỐ THỨ TỰ hàng đợi (worklistTable) ---- */ /* Trước đây worklist gọi var(--stt-bg)/var(--stt-bd) nhưng KHÔNG nơi nào khai -> rơi fallback #2fae5f/#1f8f49 (xanh lá lạc khỏi họ brand). Nay về họ brand để hàng đợi cùng một hệ màu với lưới/badge/nút. */ --stt-bg: var(--brand-2); /* #22a06b */ --stt-bd: var(--brand); /* #1d6f5c */ }