Dọn màu video.conan.school về token: 09.09.2026

Site thứ bảy về 0. 11 → 0. Nhưng lượt này chủ yếu là chuyện của cái gác, không phải của video: nó bới ra một báo động giả và một lỗ hổng, cả hai đều trong check-color-tokens.mjs.

video là kiểu vi phạm thứ tư: bản chép tay

Bốn kiểu đã gặp qua bảy lượt:

Site	Kiểu
admin	chưa nạp theme.css, bảng màu tự khai sai giá trị
play	đã nạp theme.css, token vẫn ở đó, không ai dùng
mentors	chưa nạp, bảng màu tự khai đúng giá trị dưới tên riêng
video	chưa nạp, chép tay giá trị, và có ghi chú thừa nhận

video là site duy nhất không có Tailwind. Điều đó không chỉ là "nợ kỹ thuật", nó khiến @import "theme.css" vô tác dụng: token ở đó nằm trong khối @theme, và CSS thuần bỏ qua at-rule lạ. video buộc phải tự giữ lớp token của mình.

Mã cũ trung thực về chuyện đó:

/* Brand aligned to @conan/design-system (--color-primary #d94f2b).
   video uses hand-rolled CSS (no Tailwind), so tokens are synced by value. */

Nhưng một bản chép tay không có người kiểm là một bản chép sẽ lệch, và lệch im lặng: trang vẫn hiển thị, màu vẫn trông hợp lý, chỉ là không còn là màu của hệ thiết kế nữa. Gác màu không bắt được, vì khai một token là việc hợp lệ.

Gác mới: check-token-sync.mjs

So từng cặp biến của video ↔ token trong theme.css, 8 cặp. Đổi --color-primary mà quên video là CI đỏ ngay. Đã tự kiểm ba chiều: đổi theme.css / đổi video / xoá một token, cả ba đều đỏ đúng chỗ.

Script còn tự kiểm chính phép đọc của nó (4 mẫu). Phép tự kiểm đó bắt được một lỗi thật ngay trong bản đầu: regex đọc biến CSS đòi dấu ; kết thúc, nhưng CSS cho phép bỏ dấu chấm phẩy ở khai báo cuối khối, một token khai kiểu đó sẽ nằm ngoài tầm kiểm mà gác vẫn báo xanh.

Phần còn lại của video quy đổi bình thường: thêm --on-dark, --emerald, --destructive; --border-color #e5e5e5 → #f2f2f2 (khớp --color-border); thang xám hai mức phái sinh từ --text-highlight bằng color-mix (ra #545454 / #888888, gần như trùng #555555/#888888 gốc) nên nó đi theo khi ink thương hiệu đổi.

Lỗi trong chính cái gác, phát hiện lần này

1. Báo động giả: khai token bị đếm là vi phạm

--bg-color: #ffffff;      /* chứa chuỗi con `color: #ffffff` */
--border-color: #f2f2f2;  /* chứa chuỗi con `border-color: #f2f2f2` */

Regex bắt hex-trong-khai-báo-CSS khớp nhầm tên custom property. Khai một token không phải là dùng màu tự chế, đó chính là việc của file token. Chuyện này chưa lộ ra vì theme.css được miễn, còn video là site đầu tiên khác phải tự giữ lớp token.

Sửa bằng (?<![-\w]) trước tên thuộc tính, và xếp các nhánh dài trước để background-color: khớp trọn vẹn thay vì khớp color: bên trong. Tự kiểm: một file thử ba dòng, hai vi phạm thật bị bắt, --my-color: #0000ff được bỏ qua.

2. Lỗ thứ năm: rgba() / hsl()

Lộ ra khi đọc CSS đã dựng của video: minifier đổi rgba() thành hex và bốn màu hiện ra, trong đó có #ff5a00, một sắc cam không phải màu thương hiệu (#d94f2b), dùng cho hiệu ứng nền .bg-glow và .blob.

Gác trước bắt bốn cửa (bậc số Tailwind, giá trị tuỳ ý trong className, hex trong khai báo CSS, hex trong style của JSX). Cửa thứ năm là viết cùng một màu bằng rgb.

Chỉ bắt màu có sắc (R, G, B không bằng nhau): rgba(0,0,0,.08) của box-shadow là quy ước CSS cho bóng đổ, không phải một lựa chọn màu, bắt nó chỉ tạo nhiễu.

Toàn repo có 21 chỗ như vậy. Đã quy đổi hết trong lượt này:

Màu	Ở đâu	Thành
rgba(255, 90, 0, …) ×3	video, cam không phải brand	color-mix(var(--primary) …)
rgba(59, 48, 48, .2) ×7	scrollbar, chép qua 5 cụm admin + com + www	color-mix(var(--color-foreground) 20%)
rgba(200, 70, 50, …) ×2	www FacebookBrowserBlocker, ChatPage	color-mix(var(--color-primary) …)
rgba(255, 170, 50, .15)	www FacebookBrowserBlocker	color-mix(var(--color-amber) 15%)
rgba(42, 32, 32, .1)	play	color-mix(var(--color-foreground) 10%)
rgb(15 23 42 / .04)	admin vỏ SPA, ám xanh	color-mix(var(--color-foreground) 4%)
rgba(217, 79, 43, .14)	docs custom.css	color-mix(var(--vp-c-brand-1) 14%)

Ba chỗ còn lại nằm trong packages/admin-shared/.../DebugFooter.tsx, lớp phủ gỡ lỗi đã cố ý để lại từ lượt www. Mốc của packages nâng 32 → 35 bằng --allow-raise: gác nhìn rõ hơn, mã không xấu đi. Đây đúng là trường hợp cờ đó sinh ra để phục vụ.

Kiểm chứng

• tsc -b 0 lỗi; năm bản dựng xanh: video, www, com, admin, docs (mọi site có CSS bị chạm).
• Xem bằng mắt trên bản dựng video: token phân giải đúng (--primary=#d94f2b, --border-color=#f2f2f2, --on-dark=#fff, --emerald, --destructive), nền trắng, vạch h2 màu ink, badge nền rgb(242,242,242). Thang xám phái sinh cho #545454, lệch #555555 gốc đúng 1/255.
• check-token-sync: 8/8 cặp khớp, 4/4 mẫu tự kiểm đúng, và đỏ đúng ở cả ba kịch bản lệch.
• Cả tám gác ở gốc repo xanh.

Trạng thái

57 chỗ tồn đọng toàn repo, từ 3.445 hai ngày trước. Bảy site khoá ở 0: www, admin, com, play, mam, mentors, video. Còn: packages 35 (DebugFooter, cố ý) · docs 12 (thư mục cũ) · api 10.