/* ═══════════════════════════════════════════════════════════════════════════════════════ GENUP — BỘ MÀU GỐC. MỘT NGUỒN DUY NHẤT. ═══════════════════════════════════════════════════════════════════════════════════════ Chủ dự án 06/09/2026: *"GENUP CANONICAL UI PALETTE: BLACK · WHITE · RED · BLUE. KHÔNG dùng GREEN làm màu trạng thái success/good/healthy trong UI GENUP."* *"Điểm quan trọng nhất là đừng chỉ 'xoá xanh lá'. Phải biến màu thành design system có token + CI gate, để vài tuần sau không quay lại đúng lỗi này nữa."* ── VÌ SAO TỆP NÀY TỒN TẠI ────────────────────────────────────────────────────────────── Ngày 06/09 phải sửa xanh lá ở **27 tệp**, ba lượt quét mới hết: lượt một tìm theo mã hex ra 59 chỗ, lượt hai tìm `rgb()` theo quan hệ ba kênh ra **45 chỗ nữa**, lượt ba đo màu ĐÃ TÍNH trong Chrome thật ra **9 giá trị nữa**. Ba lượt cho cùng một câu hỏi, vì mỗi trang tự khai màu của nó. Gốc của chuyện ấy không phải "có người chọn nhầm màu". Gốc là **không có chỗ nào để chọn đúng**: mỗi trang khai `--green` / `--xanh` riêng, nên "màu của trạng thái tốt" là một ý kiến lặp lại hai mươi bảy lần chứ không phải một quyết định ghi ở một chỗ. Nên tệp này giữ HAI TẦNG, và thứ tự giữa chúng mới là phần quan trọng: ① MÀU NHẬN DIỆN đen · trắng · đỏ · xanh dương — bốn màu, không hơn ② MÀU NGỮ NGHĨA success · info · warning · error · degraded · disabled → TRỎ VÀO tầng ①, không tự khai mã màu mới Trang chỉ được dùng tầng ②. Muốn nói "cái này đang tốt" thì viết `var(--status-success)`, không viết một mã màu. Đổi ý về màu của "tốt" thì sửa ĐÚNG MỘT DÒNG ở đây. 🔴 `--status-success` TRỎ VÀO XANH DƯƠNG, KHÔNG PHẢI XANH LÁ. Đây là điểm cả bộ này sinh ra để giữ. Xanh lá = "tốt" là phản xạ mặc định của mọi thư viện giao diện, nên nó sẽ quay lại nếu không có một chỗ nói thẳng rằng ở GENUP thì không. ── MÀU CỦA HÃNG KHÁC ─────────────────────────────────────────────────────────────────── Logo Google, Drive, Sheets, WhatsApp có xanh lá trong bộ nhận diện của HỌ. Đổi màu logo của người ta là làm sai logo, không phải làm đúng bảng màu của mình. Những màu ấy nằm ở nhóm `--google-*` / `--whatsapp-*` — **tên nói rõ nó là của ai**. ⚠️ KHÔNG BAO GIỜ dùng `--google-green` làm nền nút, chấm trạng thái, huy hiệu hay điểm nhấn của GENUP. Nó chỉ được nằm trong nét vẽ của chính logo ấy. `doKhongCoXanhLa.js` canh đúng ranh giới này: cùng một mã màu, nằm trong `` của logo thì tha, nằm ở nền một cái nút thì đỏ. ═══════════════════════════════════════════════════════════════════════════════════════ */ :root { /* ── ① BỐN MÀU NHẬN DIỆN ────────────────────────────────────────────────────────────── */ --genup-black: #08090C; --genup-black-2: #0F1216; /* thẻ trên nền đen */ --genup-black-3: #151920; /* ô nhỏ trong thẻ */ --genup-white: #FFFFFF; --genup-white-2: #F2F6FA; /* chữ chính trên nền tối — trắng ngà cho đỡ chói */ --genup-white-3: #CFD8E1; /* chữ phụ */ --genup-red: #DB1920; --genup-red-2: #F0333A; /* đỏ sáng — điểm nhấn trên nền tối */ --genup-red-d: #B0141A; /* đỏ đậm — trạng thái rê chuột */ /* 🔴 ĐỎ DÀNH CHO CHỮ TRÊN NỀN TỐI. Đo 06/09/2026 trên năm mức nền tối của bảng màu: #DB1920 3,96 · 3,73 · 3,50 · 3,22 · 3,45 → trượt 4,5 ở MỌI nền #F0333A 4,97 · 4,68 · 4,40 · 4,04 · 4,34 → vẫn trượt ở ba nền #FF5C63 6,60 · 6,23 · 5,84 · 5,37 · 5,76 → đạt khắp nơi Đỏ thương hiệu #DB1920 vẫn đúng cho NỀN nút (chữ trắng trên nó được 5,03). Nó chỉ không đủ tương phản khi làm CHỮ. Hai vai, hai token — đừng sửa một cái cho cả hai. */ --genup-red-chu: #FF5C63; /* đỏ — dùng khi đỏ là CHỮ, không phải nền */ /* 🔴 VIỀN CẤU KIỆN PHẢI NHÌN THẤY ĐƯỢC — WCAG 1.4.11 đòi 3:1. Viền "mờ nhẹ" quen dùng (#2a3244 trên nền đen) chỉ đạt 1,55, và #e5e8ed trên nền trắng chỉ đạt 1,44 — tức một cái nút mà không ai thấy đâu là mép. Hai số dưới đã đo trên cả hai mức nền tối (#08090C và #151920) và trên nền trắng. */ --genup-vien-ro: #69717f; /* viền cấu kiện trên nền TỐI — 4,05 và 3,58 */ --genup-vien-ro-sang: #7C8894; /* viền cấu kiện trên nền SÁNG — 3,62 */ --genup-blue: #1F5FBF; --genup-blue-2: #4DA6FF; /* xanh sáng — điểm nhấn trên nền tối */ --genup-blue-3: #8EC5FF; /* xanh nhạt — chữ phụ trên nền tối */ --genup-blue-d: #1A56C4; /* xanh đậm — trạng thái rê chuột */ /* Xám trung tính pha một chút xanh dương của bộ nhận diện — xám thuần đọc ra là "chưa ai chọn", còn xám lệch nhẹ về màu nhấn thì đọc ra là "đã chọn". */ --genup-mut: #93A0AC; --genup-line: rgba(255, 255, 255, .085); --genup-line-2: rgba(255, 255, 255, .16); /* ── ② MÀU NGỮ NGHĨA — TRỎ VÀO TẦNG ①, KHÔNG KHAI MÃ MỚI ────────────────────────────── */ /* 🔴 TỐT = XANH DƯƠNG. Xem khối ghi chú đầu tệp. */ --status-success: var(--genup-blue); --status-success-2: var(--genup-blue-2); --status-success-nen: rgba(31, 95, 191, .14); --status-success-vien: rgba(31, 95, 191, .42); --status-info: var(--genup-blue); --status-info-2: var(--genup-blue-2); --status-info-nen: rgba(31, 95, 191, .12); --status-info-vien: rgba(31, 95, 191, .36); --status-error: var(--genup-red); --status-error-2: var(--genup-red-2); --status-error-nen: rgba(219, 25, 32, .14); --status-error-vien: rgba(219, 25, 32, .42); /* CẢNH BÁO và GIẢM CHẤT LƯỢNG dùng ĐỎ NHẠT, không dùng cam/vàng mới và tuyệt đối không kéo lại xanh lá. Chúng là "đang có chuyện" ở mức nhẹ hơn lỗi, nên đứng cùng phía với đỏ là đúng nghĩa — và giữ bảng màu ở bốn màu. */ --status-warning: var(--genup-red-2); --status-warning-nen: rgba(240, 51, 58, .10); --status-warning-vien: rgba(240, 51, 58, .30); --status-degraded: var(--genup-red-2); --status-degraded-nen: rgba(240, 51, 58, .08); --status-degraded-vien: rgba(240, 51, 58, .26); /* ── ②b CHỮ NẰM TRÊN CHÍNH NỀN NHẠT CỦA NÓ ────────────────────────────────────────── 06/09/2026. Hộp thông báo thường viết như thế này: .xong { background: var(--status-success-nen); color: var(--status-success) } Nền là màu ấy pha loãng 8–14% trên nền trang tối, nên nó vẫn RẤT TỐI. Còn chữ là màu gốc bậc ①, vốn chọn để đứng trên nền đen — không phải để đứng trên chính nó. Kết quả đo được: chữ `.xong` 3,56 và chữ `.loi` 4,34, cả hai dưới ngưỡng 4,5 của WCAG. Hai hộp ấy là hộp BÁO LỖI và hộp BÁO XONG — đúng hai chỗ khách buộc phải đọc được. 🔴 KHÔNG sửa bằng cách đổi `--status-error` cho sáng lên. Ngày 06/09 đã một lần đổi `--coral` vì lý do y hệt và làm hỏng 11 chỗ chữ trắng trên nút — một biến mang hai vai thì sửa vai này là hỏng vai kia. Nên đây là một tầng RIÊNG, chỉ dùng khi chữ nằm trên nền `-nen` tương ứng. Số đo trên nền thật: #FF5C63/#2a1414 = 5,76 · #4DA6FF/#101c2e = 6,69. */ --status-success-chu: var(--genup-blue-2); --status-info-chu: var(--genup-blue-2); --status-error-chu: var(--genup-red-chu); --status-warning-chu: var(--genup-red-chu); --status-degraded-chu: var(--genup-red-chu); /* CHƯA BIẾT và ĐANG TẮT là trung tính. Một trạng thái chưa đo được mà tô màu có nghĩa thì nó đang nói dối về thứ nó chưa biết. */ --status-unknown: var(--genup-mut); --status-unknown-nen: rgba(147, 160, 172, .12); --status-unknown-vien: rgba(147, 160, 172, .28); --status-disabled: var(--genup-mut); --status-disabled-nen: rgba(147, 160, 172, .08); --status-disabled-vien: rgba(147, 160, 172, .20); /* ── ③ MÀU CỦA HÃNG KHÁC — CHỈ DÙNG TRONG LOGO CỦA CHÍNH HỌ ─────────────────────────── */ --google-green: #0F9D58; /* Google Sheets — thân biểu tượng */ --google-green-d: #0B8043; /* Google Sheets — nếp gấp góc */ --google-green-2: #34A853; /* Google — cung xanh của chữ G */ --google-green-3: #4CAF50; /* Google Drive — nhánh xanh của tam giác */ --whatsapp-green: #25D366; } /* Nền sáng: chỉ đổi GIÁ TRỊ của tầng ①, tầng ② tự đúng theo. Đây chính là chỗ hai tầng trả công: một bộ nền sáng không phải khai lại "tốt là màu gì". */ :root[data-theme="light"] { --genup-black: #FFFFFF; --genup-black-2: #F7F9FC; --genup-black-3: #EEF2F7; --genup-white-2: #101418; --genup-white-3: #3B4652; --genup-mut: #5F6B77; --genup-line: rgba(0, 0, 0, .09); --genup-line-2: rgba(0, 0, 0, .16); --genup-blue-2: #1F5FBF; /* nền sáng thì xanh sáng mất tương phản — hạ xuống */ --genup-blue-3: #1A56C4; --genup-red-2: #C4141B; } /* ═══════════════════════════════════════════════════════════════════════════════════════ VÒNG LẤY TIÊU ĐIỂM — MỘT LUẬT CHO CẢ ỨNG DỤNG ═══════════════════════════════════════════════════════════════════════════════════════ Đo 06/09/2026 trên Chrome thật, ép `:focus-visible` lên từng thành phần tương tác của cả 31 trang: **140 lượt** không đạt ngưỡng 3:1 của WCAG 1.4.11. Nghĩa là người dùng bàn phím đi Tab qua ứng dụng mà **không thấy mình đang đứng ở đâu**. Không trang nào khai vòng tiêu điểm riêng, nên mỗi trang rơi về vòng mặc định của trình duyệt — vốn là một đường mảnh màu tối, gần như tàng hình trên nền tối của GENUP. Chủ dự án: *"Không sửa từng trang nếu có thể sửa semantic token chung."* Nên một luật ở đây, và cả ứng dụng có vòng tiêu điểm thấy được. Dùng `--genup-blue-2`: trên nền tối `#4DA6FF` cho tỉ lệ 7,6; ở bộ nền sáng biến này đã được đổi thành `#1F5FBF`, cho 6,2 trên nền trắng. Một biến, hai nền, cả hai đều qua ngưỡng. `:focus-visible` chứ không phải `:focus` — bấm chuột vào một cái nút không nên vẽ vòng, chỉ đi bằng bàn phím mới cần. Trình duyệt tự phân biệt. `outline` chứ không phải `border`: `outline` không chiếm chỗ, nên bật lên không đẩy lệch bố cục — đây đúng là lý do thuộc tính ấy tồn tại. */ :focus-visible { outline: 2px solid var(--genup-blue-2, #4DA6FF); outline-offset: 2px; border-radius: inherit; } /* Bỏ vòng mặc định KHI VÀ CHỈ KHI đã có vòng của mình thay thế — bỏ trắng trơn là lấy đi thứ duy nhất người dùng bàn phím có. */ :focus:not(:focus-visible) { outline: none; }