/* ============================================================================ FORELY — LỚP CẦU NỐI TOKEN SANG NHẬN DIỆN v3 Tệp: assets/forely-cau-noi-v3.css ---------------------------------------------------------------------------- ĐÂY LÀ LỚP TẠM. Nó tồn tại để chuyển bảng màu, KHÔNG phải để ở lại lâu dài. VÌ SAO CÓ TỆP NÀY Trang ứng dụng (/) là 67 KB markup với 151 thuộc tính id, và sáu mảnh assets/app/part-01.js … part-06.js (~300 KB) bám vào từng id đó bằng getElementById. Viết lại markup để dùng thẳng token v3 là thay đổi rủi ro nhất trong cả dự án: một id gõ sai là một màn hình trắng, và không có bài kiểm tự động nào bắt được. Nhưng đo thật thì ứng dụng chủ yếu chạy bằng token, không phải bằng mã màu ghi cứng: index.html 25 mã màu thương hiệu ghi cứng · 103 var(--…) assets/forely-ui.2ab69426.css 614 var(--…) assets/forely-cong-dong.4312c2a8.css 296 var(--…) Nghĩa là đổi GIÁ TRỊ của các token --f-* thì phần lớn ứng dụng đổi màu theo, mà không phải chạm vào markup, không chạm id, không chạm JavaScript. Tệp này làm đúng một việc: khai lại các token --f-* của forely-tokens.af313bb8.css để chúng TRỎ VỀ token v3 trong forely-brand.ed8e8ebd.css. Không thêm selector, không thêm !important, không đụng bố cục. ĐÍCH CUỐI CÙNG — ĐỌC TRƯỚC KHI QUEN VỚI TỆP NÀY Đích là XOÁ HẲN forely-tokens.af313bb8.css và xoá luôn tệp này, để trang đọc trực tiếp token v3 (--btn, --accent, --section, --link, --text…). Mỗi lần một màn hình được viết lại theo token v3, hãy xoá dòng cầu nối tương ứng ở đây. Khi tệp này rỗng thì việc chuyển đổi đã xong. Giữ nó lúc này chỉ vì một lý do: để không phải sửa 151 id và ~300 KB JavaScript trong cùng một lần. THỨ TỰ NẠP — BẮT BUỘC 1. assets/forely-tokens.af313bb8.css (hệ cũ, khai giá trị thô) 2. assets/forely-brand.ed8e8ebd.css (hệ v3, khai --btn/--accent/--section…) 3. assets/forely-cau-noi-v3.css (tệp này — phải đứng SAU cả hai) Đặt sai thứ tự thì forely-tokens.af313bb8.css ghi đè ngược lại và cầu nối vô hiệu. Ngoài ra phải có để forely-config.7c8e5575.js KHÔNG nạp forely-v2.118ecc33.css (312 lần !important, 71 rule ghi thẳng mã màu — nó sơn đè lên cầu nối) và KHÔNG bơm bộ lọc đảo màu của chế độ tối đời cũ. MỘT CÁI BẪY ĐÃ XỬ LÝ — --f-accent-ink Ở hệ cũ, --f-accent-ink (#0F1A00) là MỰC TỐI đặt trên nền chanh SÁNG (#C4F531). Ở v3, --accent (#00875A) là màu TỐI, nên mực đặt trên nó phải TRẮNG. Vì vậy --f-accent-ink trỏ về var(--on-btn) (#FFFFFF), không phải về một tông xanh đậm nào. Đảo lại là chữ đen trên nền xanh đậm: 1,4:1. CHẾ ĐỘ TỐI — VÌ SAO CÓ KHỐI THỨ HAI Ở CUỐI TỆP forely-tokens.af313bb8.css có khối [data-theme="dark"] riêng, nhưng nó nằm TRƯỚC hai khối :root cuối tệp và có cùng độ đặc hiệu (0,1,0), nên hai khối :root đó ghi đè nó — khối tối của hệ cũ trên thực tế đã chết. Hệ quả: khi forely-theme-v3.f4b79a0d.js đặt html[data-theme="dark"], các token màu THƯƠNG HIỆU tự đổi đúng (vì chúng trỏ về token v3, mà v3 tự đổi theo chế độ), nhưng các token NỀN / CHỮ / VIỀN trung tính của hệ cũ vẫn đứng nguyên giá trị sáng: thẻ trắng, chữ #0F172A, trên nền trang tối. Không đọc được. Khối html[data-theme="dark"] ở cuối tệp này sửa đúng chỗ đó — nó KHÔNG đổi bảng màu, chỉ nối tiếp các token trung tính sang bậc tối tương ứng của v3. ============================================================================ */ /* ============================================================================ 1. MÀU THƯƠNG HIỆU — ÁNH XẠ CHÍNH Cột phải là token v3 trong forely-brand.ed8e8ebd.css. Giá trị trong ngoặc là màu CŨ, để đọc diff dễ hơn; không phải giá trị đang chạy. ============================================================================ */ :root{ /* --- Chủ đạo: nút chính, link, tab đang chọn --------------------------- */ --f-primary: var(--btn); /* cũ #0F172A → #134E39 xanh lá sâu */ --f-primary-hover: var(--btn-hover); /* cũ #1E293B → #00875A */ --f-primary-soft: var(--accent-tint); /* cũ #F1F5F9 → #E6F4EA */ --f-primary-border: var(--note); /* cũ #DDE3EC → #C6F6D5 */ /* --- Nền tối cấp 1 & 2: hero, footer, drawer, toast, codebox ----------- */ --f-secondary: var(--section); /* cũ #0F172A → #0F3A36 */ --f-secondary-deep: var(--section); /* cũ #0F172A → #0F3A36 */ --f-bg-inverse: var(--section); /* cũ #0F172A → #0F3A36 */ /* --- Liên kết & vòng tiêu điểm ----------------------------------------- */ /* v3 tách bạch: XANH DƯƠNG là màu DỮ LIỆU (link, tab, thang biểu đồ), XANH LÁ là màu THƯƠNG HIỆU. Đừng gộp hai cái này lại. */ --f-text-link: var(--link); /* cũ #0F172A → #1D4ED8 */ --f-border-focus: var(--link); /* cũ #0F172A → #1D4ED8 */ /* --- Màu nhấn: CTA quan trọng nhất -------------------------------------- */ --f-accent: var(--accent); /* cũ #C4F531 chanh → #00875A */ --f-accent-hover: var(--accent-hover); /* cũ #D2FA55 → #C6F6D5 */ --f-accent-line: var(--accent-line); /* cũ #A9E01A → #00875A */ --f-accent-soft: var(--accent-tint); /* cũ #F4FBDD → #E6F4EA */ --f-accent-border: var(--note); /* cũ #E2F3A4 → #C6F6D5 */ --f-accent-text: var(--accent-ink); /* cũ #4E6B0E → #134E39 */ --f-accent-ink: var(--on-btn); /* cũ #0F1A00 → #FFFFFF — xem BẪY */ /* --f-hilite là VỆT BÚT DẠ, không phải nền khối: forely-ui.2ab69426.css dùng nó trong linear-gradient(transparent 58%, … 58%) nên chỉ 42% dưới của chữ nằm trên nó. Ở chế độ sáng --hilite (#C6F6D5) đúng. Ở chế độ TỐI thì --hilite vẫn là #C6F6D5, mà chữ lúc đó là #F1F5F9 → phần chữ chồng lên vệt còn 1,09:1, tức là chân chữ biến mất. --hilite-tint có bậc tối riêng rgba(0,135,90,.30) — một vệt xanh trong suốt trên nền đậm — nên dùng nó. Đã đo cả hai chế độ. */ --f-hilite: var(--hilite-tint); /* cũ #E9FBB2 → sáng #C6F6D5 / tối rgba(0,135,90,.30) */ /* --- Bí danh cũ còn sống trong markup và trong app/part-*.js ------------- */ --f-brand: var(--deep); /* cũ #0F172A → #134E39 */ --f-navy: var(--deep); --indigo: var(--deep); /* 39 lần dùng trong các mảnh JS */ --f-brand-2: var(--section); /* cũ #1E293B → #0F3A36 */ /* ĐỌC KỸ TRƯỚC KHI BỎ COMMENT DÒNG DƯỚI — VA TÊN THẬT SỰ --navy KHÔNG chỉ là bí danh cũ: forely-brand.ed8e8ebd.css cũng khai --navy, nhưng ở v3 nó là XANH DƯƠNG DỮ LIỆU (#1D4ED8), không phải màu thương hiệu. Tệp này nạp sau nên nếu khai --navy ở :root thì nó CƯỚP token của v3 ở chế độ sáng, trong khi ở chế độ tối khối html[data-theme="dark"] của brand.css (độ đặc hiệu 0,1,1) lại thắng — cùng một biến ra hai nghĩa tuỳ chế độ. Đã đếm: --navy có ĐÚNG 0 lần var(--navy) trong toàn bộ index.html, forely-ui.2ab69426.css, forely-cong-dong.4312c2a8.css và 6 mảnh app/part-*.js. Không ai đọc nó. Nên để tắt là lựa chọn an toàn hơn hẳn việc giữ một quả mìn tên trùng. --navy: var(--deep); */ /* --- Token VAI TRÒ mới: chữ đặt TRÊN một bề mặt cụ thể ------------------- Đo trên bản dựng thật rồi mới thêm, không thêm theo cảm giác. Mỗi token ở đây có một điểm dùng duy nhất trong forely-ui.2ab69426.css, viết dưới dạng var(--token-mới, var(--token-cũ)) — trang nào không nạp tệp cầu nối này (mọi trang hệ cũ) rơi về đúng giá trị đang chạy, nên không thể đổi gì ở đó. --f-accent-onsection Bảy chỗ trong forely-ui.2ab69426.css viết color:var(--f-accent) và CẢ BẢY đều nằm trên nền --f-secondary (#0F3A36 xanh mòng két đậm): .hero b · .dhead .fp · .codebox · .rw-hero-sub b · .rw-hero-bal span · .rw-hero-goal b · .rw-urbox b. #00875A trên #0F3A36 chỉ được 2,75:1 — và vì --section KHÔNG đổi theo chế độ nên đây là lỗi ở CẢ hai chế độ, không riêng nền tối. Nó lọt lưới ở lần đo đầu vì phép đo đọc backgroundColor mà bỏ qua linear-gradient. --section-ink-2 (#C6F6D5) trên #0F3A36 được 10,45:1. Đây chính là lý do --f-accent không được dùng làm màu chữ: nó là màu NỀN. --f-stat-ink .big — con số lớn trong thẻ thống kê. Đang dùng --f-secondary (#0F3A36) làm màu chữ: trên thẻ trắng thì đọc được, trên thẻ tối #1E293B còn 1,17:1. --text-strong có bậc riêng cho từng chế độ. --f-on-accent .hb1 span — dòng phụ bên trong nút CTA chính. Nút có nền --f-accent (#00875A) còn dòng phụ dùng --f-secondary (#0F3A36): xanh đậm trên xanh đậm. Dòng chính của nút đã dùng --f-accent-ink (trắng) đúng rồi; dòng phụ chỉ là chỗ bị bỏ quên. --f-logo-ink .logo svg — vòng đặc của dấu hiệu trên thanh đầu trang. Nó phải theo mực logo (#111111 sáng / #FFFFFF tối), không theo màu nền khối. --f-header-bg Thanh đầu trang đang ghi cứng rgba(255,255,255,.88) — trắng, không phải token. Ở chế độ tối thanh này vẫn gần như trắng trong khi chữ và logo đã chuyển sang mực sáng: chữ FORELY còn 1,17:1, các tab còn 1,16:1. Đây là một dòng duy nhất, và nó kéo theo 8 lỗi. ------------------------------------------------------------------------ */ --f-accent-onsection: var(--section-ink-2); /* #C6F6D5 — chữ nhấn trên nền --section */ --f-stat-ink: var(--text-strong); --f-on-accent: var(--on-btn); --f-logo-ink: var(--logo-ink); /* --f-glass-rgb — BA SỐ, không phải một mã màu. Năm thanh dính (header, header.fx-scrolled, nav, .bnav, .f-topbar) đều ghi cứng rgba(255,255,255,.9x): trắng, có độ trong, để lớp backdrop-filter blur ăn được nền bên dưới. Không thể thay bằng một token màu vì mỗi thanh dùng một độ trong khác nhau. Nên token này giữ BA SỐ RGB, còn alpha ở lại tại chỗ dùng: rgba(var(--f-glass-rgb,255,255,255),.94). Ở chế độ tối thanh đầu trang trước đó vẫn gần như trắng trong khi chữ và logo đã sang mực sáng — chữ FORELY còn 1,17:1, các tab 1,16:1, thanh điều hướng dưới cùng trên điện thoại 2,27:1. Một token, năm chỗ, mười bốn lỗi. */ --f-glass-rgb: 255,255,255; /* sáng: giữ đúng giá trị đang chạy */ /* --f-text-tertiary ở chế độ sáng là #7A879C — 3,64:1 trên thẻ trắng, dưới ngưỡng 4,5. Nó là màu của .fsub, tức dòng mô tả dưới mỗi mục gấp mở. Đưa về --text-faint (#64748B) cho 4,76:1. Bậc tối đã nối ở khối 3 bên dưới. */ --f-text-tertiary: var(--text-faint); /* --- HỌ TOKEN THỨ BA: --fxc-* --------------------------------------------- forely-ui.2ab69426.css khai một bộ token RIÊNG ở gần cuối tệp (khối "HƯỚNG C — Header gọn 1 hàng + Ticker"), nạp sau nên đè mọi rule phía trên: --fxc-ink:#0A0A0B --fxc-signal:#C4F531 --fxc-signal-2:#B4E81C --fxc-up:#00C271 --fxc-down:#FF5C4D Hai màu chanh ở đó là bảng màu đã bỏ, và chúng KHÔNG đi qua --f-* nên lớp cầu nối ở trên không chạm tới được. Vòng nét đứt của dấu hiệu trên thanh đầu trang chính là --fxc-signal-2: đo trên bản dựng thì nó vẫn ra rgb(180,232,28) sau khi mọi thứ khác đã xanh. .logo .lring có HAI rule — dòng 200 dùng --f-accent-line, dòng 1179 dùng --fxc-signal-2 và thắng. Nối --fxc-signal-2 về đúng nguồn đó thì hai rule nói cùng một điều, ai sửa dòng nào cũng không lệch. --fxc-ink là nền của CẢ HAI: tab đang chọn và thanh ticker. --deep (#134E39) hợp cả hai vai, chữ trắng trên nó được 9,65:1 ở cả hai chế độ. --fxc-up / --fxc-down là chữ trên nền đó, mà --deep KHÔNG đổi theo chế độ, nên chúng cũng không được đổi: bậc sáng #059669 và #DC2626 chỉ cho 2,56:1 và 2,00:1 trên #134E39. Ghi thẳng bậc sáng-trên-nền-đậm (6,33:1 và 5,08:1). ------------------------------------------------------------------------ */ --fxc-ink: var(--deep); /* #134E39 — nền tab đang chọn + ticker */ --fxc-signal: var(--section-ink-2); /* #C6F6D5 — chữ nhấn trên nền đó, 8,06:1 */ --fxc-signal-2: var(--accent); /* #00875A — vòng nét đứt của dấu hiệu */ --fxc-up: #6EE7B7; /* 6,33:1 trên #134E39 */ --fxc-down: #FCA5A5; /* 5,08:1 trên #134E39 */ /* --- Bí danh thang chanh cũ (forely-ui.2ab69426.css v1/v2) ----------------------- */ --f-lime: var(--accent); /* cũ #C4F531 → #00875A */ --f-lime-600: var(--accent); /* cũ #A9E01A → #00875A */ --f-lime-700: var(--accent-ink); /* cũ #4E6B0E → #134E39 */ --f-lime-800: var(--accent-ink); /* cũ #4E6B0E → #134E39 */ --f-lime-50: var(--accent-tint); /* cũ #F4FBDD → #E6F4EA */ --f-lime-200: var(--note); /* cũ #E2F3A4 → #C6F6D5 */ } /* ============================================================================ 2. KHÔNG NẰM TRONG TỆP NÀY — CÓ CHỦ Ý, ĐỪNG "SỬA NỐT" ---------------------------------------------------------------------------- a) Chữ và nền trung tính ở chế độ SÁNG --f-text-primary --f-text-secondary --f-text-tertiary --f-bg-canvas --f-bg-surface --f-bg-subtle --f-bg-hover --f-bg-selected --f-border --f-border-strong --f-text-inverse v3 giữ nguyên hệ mực xám lạnh này ở chế độ sáng (#0F172A / #F8FAFC / #FFFFFF trùng khớp), nên nối thêm chỉ tạo một tầng gián tiếp vô ích. Ở chế độ TỐI thì khác — xem khối 3. b) Màu trạng thái --f-success --f-warn --f-danger và các biến -text/-bg/-border của chúng, cùng --f-yes/--f-no (thị trường dự đoán). Đây là ngữ nghĩa hệ thống, đổi theo thương hiệu là làm hỏng nghĩa. LƯU Ý KHI ĐỌC MÀN HÌNH: --f-success (#059669) giờ nằm rất gần --accent (#00875A). Đó là chuyện đã biết và đã ghi trong forely-brand.ed8e8ebd.css; cách xử lý là chữ trạng thái luôn dùng --ok-ink trên nền --ok-bg, không đặt màu thành công trần cạnh màu thương hiệu. c) Bốn token thương hiệu KHÔNG có trong bảng ánh xạ được giao — cố tình để nguyên, chờ quyết định, không đoán: --indigo-l (#F1F5F9) — nền nhạt của indigo, 2 lần dùng ở part-03.js --f-ring-primary (rgba(15,23,42,.12)) — vòng chọn navy, 3 lần ở ui.css --f-ring-accent (rgba(169,224,26,.30)) — vòng chọn chanh, 0 lần dùng --f-elev-1..4 bóng đổ rgba(15,23,42,…) — v3 tắt bóng có chủ ý Chúng vẫn giữ màu cũ. Xem báo cáo kèm theo. ============================================================================ */ /* ============================================================================ 3. CHẾ ĐỘ TỐI — NỐI TIẾP CÁC TOKEN TRUNG TÍNH ---------------------------------------------------------------------------- Token THƯƠNG HIỆU ở khối 1 không cần khai lại: chúng trỏ về token v3, mà v3 tự đổi bậc dưới html[data-theme="dark"]. Khối này chỉ chữa đúng một lỗi: forely-tokens.af313bb8.css khoá các token nền/chữ/viền ở giá trị SÁNG trong mọi chế độ (khối [data-theme="dark"] của nó bị hai khối :root phía sau ghi đè). Không có khối này thì bật nền tối sẽ ra thẻ trắng, chữ #0F172A, trên nền trang tối. Độ đặc hiệu html[data-theme="dark"] là (0,1,1) — cao hơn :root (0,1,0) — nên nó thắng mọi khối :root của forely-tokens.af313bb8.css bất kể thứ tự nạp. ============================================================================ */ /* KHÔNG khai lại --bg, --text, --border ở đây. forely-brand.ed8e8ebd.css đã khai đúng ba biến đó trong khối html[data-theme="dark"] của nó, và khối đó có độ đặc hiệu (0,1,1) nên đã thắng :root của forely-tokens.af313bb8.css rồi. Viết "--bg: var(--bg)" là TỰ THAM CHIẾU: CSS coi đó là vòng lặp, biến trở thành giá trị không hợp lệ, body{background:var(--bg)} rỗng, và nền trang rơi về màu mặc định của trình duyệt (#151515) thay vì #0F172A. Đã đo và đã sửa. */ html[data-theme="dark"]{ /* Nền */ --f-bg-canvas: var(--bg); /* #0F172A */ --f-bg-surface: var(--surface); /* #1E293B */ --f-bg-subtle: var(--surface-2); /* #0F172A */ --f-bg-hover: var(--ghost-hover); --f-bg-selected: var(--sel-tint); --f-bg: var(--bg); --card: var(--surface); /* Chữ */ --f-text-primary: var(--text); /* #F1F5F9 */ --f-text-secondary: var(--text-body); /* #CBD5E1 */ --f-text-tertiary: var(--text-soft); /* #94A3B8 */ /* --f-text-inverse KHÔNG khai lại: nó là "chữ đặt trên nền tối" và bằng #FFFFFF ở cả hai chế độ. Nối nó sang var(--text) (#F1F5F9) chỉ làm tụt tương phản của nút chính trên nền --btn từ 4,55:1 xuống 4,16:1 — trượt AA. Đã đo. Để nguyên là đúng. */ --f-muted: var(--text-muted); --muted: var(--text-muted); /* Viền */ --f-border: var(--border); --f-border-strong: var(--border-strong); /* Mực phụ trên nền tối — hệ cũ dùng hai bậc riêng cho footer/thẻ navy */ --f-text-on-dark: var(--text-body); --f-text-on-dark-2: var(--text-soft); /* Các thanh dính. #1E293B (--surface) pha trên nền trang --bg cho ra ~#1C2637, chữ #F1F5F9 trên đó được 13,4:1. Giữ độ trong để backdrop-filter blur vẫn còn tác dụng — bỏ alpha là các thanh thành khối đặc, mất hẳn lớp kính. */ --f-glass-rgb: 30,41,59; /* Màu nguy hiểm. #DC2626 trên thẻ tối #1E293B chỉ được 3,03:1; đây là màu của nút "Yêu cầu xoá tài khoản" và "Đăng xuất" — hai việc không thể để người dùng bấm nhầm vì không đọc rõ. Bậc tối của v3 (#FCA5A5) được 7,71:1. */ --f-danger: var(--danger); --f-danger-text: var(--danger-text); --f-danger-bg: var(--danger-tint); --f-danger-border: var(--danger-line); /* Vòng nét đứt của dấu hiệu ở chế độ tối: đúng như forely-mark-light.svg — #00875A trên thanh đầu trang tối chỉ còn 2,4:1, gần như mất. */ --fxc-signal-2: var(--section-ink-2); /* Cùng lý lẽ cho hai bộ trạng thái còn lại, để chúng không lệch nhau. */ --f-success: var(--ok); --f-success-text: var(--ok-ink); --f-success-bg: var(--ok-bg); --f-success-border: var(--ok-line); }