Một design system cho mọi sản phẩm chúng tôi làm.

Màu là một hợp đồng

Mỗi sắc màu có ba token, và hậu tố cho biết mỗi token được dùng ở đâu. Component không bao giờ gọi thẳng một màu thô, nên theme sáng, theme tối và bảng tương phản cao đều đi ra từ cùng một bộ class.

--x

Tô nền, bằng fill đặc hoặc tint.

--x-foreground

Chữ và icon nằm trên fill đặc đó.

Paid

--x-ink

Cùng màu đó trên nền trang: chữ, icon đứng riêng, viền.

Paid

Đo chứ không nhìn bằng mắt: trên nền trắng, text-success đạt 3,13:1, dưới mức AA; text-success-ink đạt 6,52:1. Vài chỗ hụt đã biết của bảng tương phản mặc định được liệt kê ở trang Màu sắc, còn với bảng tương phản cao, hụt một chỗ là build hỏng.

Năm trục hiển thị, mỗi người dùng tự chỉnh

Sáng hay tối, độ tương phản, mật độ hàng, cỡ chữ và màu thương hiệu — độc lập với nhau, mỗi trục một thuộc tính trên <html>, nhớ theo từng thiết bị. Thử xem: chúng áp dụng cho toàn bộ site này.

Không bản nào phát hành mà chưa qua cổng

Mọi điều khiển đều dùng được bằng bàn phím, mọi tên mà trình đọc màn hình đọc lên đều dịch được, và chỗ nào một component biết mình còn thiếu thì trang của nó nói rõ. Trước khi một phiên bản lên npm, phải qua 15 bước:

1. typecheckTypeScript strict trên toàn bộ mã nguồn.
2. test:i18nKhông có chữ tiếng Việt nào nằm ngoài bảng tiếng Việt.
3. buildMỗi file nguồn thành một ES module, nên file nào cũng giữ directive của riêng nó.
4. verify:directivesMọi “use client” còn nguyên sau build; không hằng thường nào nằm trong file client.
5. smoke:entriesCả chín entry đều nạp được trong Node thuần, qua exports map — và cũng resolve được theo điều kiện require của nó, đường mà webpack đi cho next/dynamic.
6. check:exportspublint và Are the Types Wrong soát hình dạng gói khi phát hành.
7. test:nav-activeThanh bên sáng đúng hàng, kể cả khi URL có query.
8. test:grid-contractKhông class bố cục nào lặng lẽ làm vỡ lưới chứa nó.
9. test:grid-renderDataGrid được render thật bằng react-dom/server.
10. test:editor-markdownTài liệu → Markdown → tài liệu quay về nguyên vẹn, và HTML các editor ghi ra giữ giá trị được lưu, không phải giá trị vẽ ra.
11. test:gantt-treePhép tính ngày, luật phụ thuộc và đường mũi tên của Gantt; hợp đồng di chuyển, cộng dồn và đánh số của TreeView; và cả hai được render trên server bằng hai ngôn ngữ.
12. test:dom-renderMount và render lại bằng react-dom/client trên happy-dom — thứ đúng ở lần render đầu mà sai sau khi một prop đổi, như avatar mất ảnh.
13. test:a11y-gateCổng tương phản vẫn bắt được mọi trường hợp từng lọt qua nó.
14. lint:a11yĐo tương phản trên CSS đã biên dịch, ở cả hai bảng tương phản và cả hai theme.
15. lint:palettes

Làm cho Server Component

// app/products/[id]/page.tsx — a Server Component
import { Rating } from '@comitor/ui'

// ✓ strings, numbers and booleans cross to a client component
<Rating value={4.5} step={0.5} readOnly aria-label="Rated 4.5 out of 5" />

// ✗ a function does not — the page fails to render with
//   "Functions cannot be passed directly to Client Components…"
<Rating value={4.5} readOnly itemLabel={(value) => `${value} étoiles`} />