Dọn màu packages/ về token: 09.09.2026
Thư mục thứ chín, và là chỗ cuối cùng còn dọn được. 35 → 0.
Cả 35 chỗ nằm trong một file: packages/admin-shared/src/components/layout/DebugFooter.tsx, lớp phủ gỡ lỗi hiện ở đáy mọi trang admin. Ba lượt trước (www, admin, video) tôi đều cố ý để lại với lý do: bảng màu tối riêng, màu mã hoá theo HTTP method, rủi ro hiển thị thật, giá trị cho người dùng bằng không.
Lý do đó vẫn đúng về rủi ro, nhưng nó bỏ qua một điều: file này nằm trong packages/, tức là dùng chung cho cả sáu cụm admin. Một hòn đảo màu ở đó không phải một chỗ lẻ, nó là mẫu mà mọi component dùng chung sau này sẽ chép theo.
Hai lớp màu, hai cách xử lý
Đọc kỹ thì file có hai hệ màu chồng lên nhau, và gộp chúng làm một là cách chắc chắn làm hỏng:
Lớp 1: bề mặt tối
#1a1a2e (nền panel), #16213e (thanh trên/dưới), và bảy mức xám #eee → #444 cho chữ, cộng sáu rgba(255,255,255,X) cho viền và hover.
Đây là thang xám đảo ngược đã cắn ở play: trên nền tối, số càng nhỏ càng nổi lên. Quy về cặp surface-inverse / surface-inverse-foreground, các bậc trung gian diễn đạt bằng độ mờ, gom vào một hằng SURFACE để đọc được ý đồ:
const ON = (pct: number) => `color-mix(in srgb, var(--color-surface-inverse-foreground) ${pct}%, transparent)`
const SURFACE = { panel: INK, bar: …5%…, line: ON(10), text: ON(93), textMuted: ON(67), … }Lớp 2: màu MANG NGHĨA
Đây mới là phần dễ làm hỏng. Người ta quét bảng này bằng màu để tìm request hỏng hoặc chậm. Và có hai thang khác hẳn nhau bị trộn chung một mớ hex:
| Thang | Bản chất | Trước | Sau |
|---|---|---|---|
| HTTP method | phân loại, năm động từ, không cái nào "nặng" hơn cái nào | #53d769 #5ac8fa #ffcc00 #ff9500 #ff3b30 | emerald · cyan · amber · rose · destructive |
| Mức độ (status, thời gian) | thứ bậc, bốn bậc tăng dần | cùng mớ hex trên, dùng lẫn lộn | emerald → amber → score-poor → destructive |
Hệ thiết kế đã có đủ năm token phân biệt rõ cho thang phân loại, và --color-score-poor cho bậc thứ ba của thang thứ bậc, không phải thêm token nào. Tách hai thang ra hai hằng (METHOD_COLOR, LEVEL) làm ý đồ hiện lên trong mã, thay vì nằm trong đầu người viết.
Kiểm chứng
Admin nằm sau Cloudflare Access nên panel không mount được ở máy. Thay vì bỏ qua, dựng lại đúng markup và đúng các biểu thức màu ngay trên trang đang chạy (nơi theme.css đã nạp) rồi chụp:
- Nền panel
rgb(17, 17, 17), chữrgba(255,255,255,.93), thanh bar nhạt hơn nền một bậc. - Năm màu method phân biệt rõ trên nền tối: GET xanh lá · POST lơ · PUT hổ phách · PATCH hồng · DELETE đỏ.
- Bốn bậc mức độ đọc được: 200/201 xanh · 304 hổ phách · 700ms đỏ nhạt · 1500ms và 500 đỏ.
- Hàng lỗi có nền đỏ mờ 8%.
tsc --noEmit0 lỗi;npm run buildcủa admin xanh.- Chín gác ở gốc repo xanh.
Trạng thái: hết chỗ dọn được
12 chỗ tồn đọng toàn repo, từ 3.445 hai ngày trước, và cả 12 nằm trong thư mục docs/ cũ, thứ đã bị thay bằng docs.conan.school/. Số phận của nó là một mục backlog riêng, không phải việc của luật màu.
Chín thư mục app khoá ở 0: www · admin · com · play · mam · mentors · video · api · packages.