Dọn màu tokyo.conan.school về token: 08.09.2026

Site thứ ba về 0, sau www và admin. 386 → 0.

Lượt này ít lỗi hơn hai lượt trước, com vốn đã @import theme.css, không có bậc số bịa, chỉ hai lớp dark: lạc. Cái khó ở đây khác: phân biệt vi phạm với ngoại lệ thật.

Ba bảng màu KHÔNG phải vi phạm

Trong 61 mã hex tuỳ ý (bg-[#6f3f75]…), gần một nửa không phải màu Conan tô sai chỗ:

Inside6: thương hiệu thứ hai chạy chung ứng dụng

root.tsx, login.tsx, online-events.$slug.tsx có nhánh isInside6Portal phục vụ inside6.com với bộ nhận diện riêng: #6f3f75 (tím mận), #4d2952 (mận đậm), #211d24, #716a72, #fbfaf7, #e8e2e5. Quy chúng về primary là biến trang Inside6 thành trang Conan.

Nhưng rải mã hex khắp ba file cũng sai, đó đúng là thứ luật màu cấm. Đã khai một lần vào theme.css:

--color-inside6: #6f3f75;         --color-inside6-dark: #4d2952;
--color-inside6-ink: #211d24;     --color-inside6-muted: #716a72;
--color-inside6-surface: #fbfaf7; --color-inside6-border: #e8e2e5;

Zalo

#0068FF / #0055D4 trên nút "Nhắn Zalo" ở ccc.tsx. Cùng loại với vendor-facebook và vendor-zoom đã khai ở lượt www, thêm --color-vendor-zalo.

Màu chuỗi sự kiện do người vận hành đặt

events.$slug.tsx nhận seriesColor từ dữ liệu. Đây là màu người vận hành chọn cho từng chuỗi sự kiện, không phải màu hệ thiết kế, nó phải giữ nguyên.

Nhưng chỗ đó có một lỗi sẵn, lộ ra khi đọc kỹ để dọn:

borderColor: `${seriesColor || '#6366f1'}33`,   // nối "33" vào cuối để lấy 20% độ mờ
backgroundColor: `${seriesColor || '#6366f1'}11`,

Mẹo nối hai ký tự alpha chỉ đúng khi giá trị là hex 6 ký tự. Nếu người vận hành nhập rgb(...), một tên màu, hay hex 3 ký tự, kết quả là chuỗi CSS vô nghĩa, trình duyệt bỏ qua thuộc tính đó, viền và nền biến mất, và không có lỗi nào. Đã đổi sang color-mix, nhận mọi dạng màu hợp lệ, và giá trị dự phòng dùng token thay vì #6366f1 (một màu chàm không có trong hệ thiết kế):

const seriesTint = seriesColor || 'var(--color-primary)';
borderColor: `color-mix(in srgb, ${seriesTint} 20%, transparent)`,

Bẫy tự gây ra khi sửa

Chèn const seriesTint = … bằng cách tìm dòng neo const photos = Array.isArray(...), dòng đó xuất hiện hai lần trong file, ở hai component khác nhau. Phép thay thế "lần đầu tiên" đặt biến vào EventGroup trong khi chỗ dùng nằm ở EventDetailView. tsc bắt được ngay, nhưng bài học vẫn đáng ghi: neo theo một dòng nội dung thì phải kiểm nó có duy nhất không, nếu không, sửa đúng cú pháp mà sai component.

Còn lại là quy đổi thường

318 lớp bậc số theo bảng quy đổi đã dùng ở www và admin. Hai lớp dark: (dark:bg-zinc-800, dark:text-zinc-400) gỡ bỏ, com không có dark mode, cùng lỗi "nửa chế độ tối" đã gặp ở www. Bốn chỗ hex trong style: #d94f2b và #6b7280 ở main.tsx (màn hình lỗi định tuyến) về var(--color-primary) / var(--color-muted-foreground).

Kiểm chứng

• npm run build xanh · tsc --noEmit 0 lỗi.
• 266 lớp token dùng trong mã, 0 lớp không sinh CSS. Bảy cái báo thiếu ban đầu đều là artefact của phép kiểm: Tailwind nhóm có tên (group-hover/card:bg-muted/80) bị regex cắt ở dấu /, và một câu văn trong comment (text-foreground/90.). Phép kiểm nào cũng cần đọc lại vài kết quả cuối bằng mắt.
• Token phân giải thật trên trang đang chạy, gồm cả sáu token Inside6, vendor-zalo, và color-mix (color(srgb 0.85 0.31 0.17 / 0.2), tức badge chuỗi sự kiện hoạt động).
• Ảnh chụp trang chủ tokyo và /calendars: đúng màu thương hiệu.

Trạng thái

563 chỗ tồn đọng toàn repo, từ 3.445 đầu ngày. www, admin, com đều khoá ở 0. Còn: play 270 · mam 175 · mentors 53 · packages 32 (DebugFooter, cố ý) · docs 12 · video 11 · api 10.