@comitor/ui 0.5.0 → 0.6.0

package/styles.css

@@ -450,6 +450,20 @@
   --sidebar-width-icon: 3.5rem; /* 56px, sidebar thu gọn */
   --header-height: 3.5rem; /* 56px */
 
+  /* ─ Thang MẬT ĐỘ — giá trị lúc THOẢI MÁI (mặc định) ─
+     Bốn token này là toàn bộ đường bật của "bố cục gọn"; khối 5d ghi đè chúng và không đụng gì
+     khác. Chỉ trục DỌC: gọn nghĩa là thấy nhiều dòng hơn, không phải chữ dính vào mép.
+
+     ⚠ PHẢI khai ở đây kể cả khi giá trị bằng đúng literal cũ. Cổng tương phản chỉ đọc bốn khối
+     (:root · .dark · hai khối tương phản cao); token nào vắng mặt ở :root thì với cổng nó là
+     chuỗi rỗng, `parseLength` trả null và `measureShape` mất khả năng phân loại hình — hỏng ÂM
+     THẦM chứ không đỏ. */
+  --row-py: 0.75rem; /* 12px — py-3 của ô bảng */
+  --menu-item-py: 0.375rem; /* 6px  — py-1.5 của mục menu */
+  --list-item-py: 0.75rem; /* 12px — py-3 của mục danh sách */
+  --nav-item-py: 0.375rem; /* 6px  — py-1.5 của mục thanh bên */
+  --table-head-h: 2.5rem; /* 40px — h-10 của hàng tiêu đề bảng */
+
   /* ─ Thang ĐỔ BÓNG (elevation) ─
      Giá trị THÔ nằm ở đây chứ không nằm trong @theme, vì bóng phải đổi theo light/dark:
      @theme thường "đóng băng" giá trị lúc build, chỉ biến CSS thật mới được khối .dark
@@ -469,7 +483,12 @@
   --elevation-card: 0 1px 2px rgba(14, 17, 22, 0.04), 0 8px 24px rgba(14, 17, 22, 0.06);
   --elevation-overlay: 0 8px 32px rgba(14, 17, 22, 0.16);
 
-  --radius: 0.375rem; /* 6px — chữ ký thị giác của Comitor */
+  /* 6px — chữ ký thị giác của Comitor, docs/spec-package.md §2 quy tắc 2 khoá cứng.
+     Viết bằng px chứ KHÔNG phải 0.375rem, và đó là điều kiện để trục CỠ CHỮ (khối 5c) đúng: cỡ
+     chữ phóng theo tỉ lệ nên mọi giá trị tính bằng rem đi theo — bo góc mà đi theo thì ở mức
+     `lg` nó thành 6,75px, tức chữ ký thị giác đổi theo tuỳ chọn của người dùng. Ở mức mặc định
+     hai cách cho ra cùng một con số nên đây không phải thay đổi hình thức. */
+  --radius: 6px;
 }
 
 /* ────────────────────────────────────────────────────────────────────────────
@@ -604,7 +623,7 @@
          phân cấp "cái này thao tác được" ⇄ "cái này chỉ là đường kẻ", và cả trang thành lưới ô.
        · Giữ nó dưới 3:1 cũng giữ đúng tiền đề của hợp đồng: --border là token KHÔNG chịu ngưỡng.
          Cổng tương phản dựa vào đúng tiền đề đó để bắt lỗi "vẽ hình control bằng token trang trí"
-         (4 ca trong `test:cong-a11y`) — nâng --border lên 3,83:1 là bốn ca đó hết bắt được. */
+         (4 ca trong `test:a11y-gate`) — nâng --border lên 3,83:1 là bốn ca đó hết bắt được. */
   --border: #a4a4a6;
   --sidebar-border: #a4a4a6;
   /* Ở bảng này viền ô nhập và viền checkbox/radio CÙNG một bậc — trỏ bằng var() để đổi --input
@@ -667,6 +686,68 @@
   --yellow: #facc15;
 }
 
+/* ────────────────────────────────────────────────────────────────────────────
+   5c. TRỤC THỨ TƯ — CỠ CHỮ  `<html data-font-size="sm|lg">`
+
+   Đây là PHÓNG THEO TỈ LỆ, không phải "chỉ đổi cỡ chữ" — và đó là chủ ý.
+
+   Icon trong gói lấy cỡ từ thang KHOẢNG CÁCH chứ không phải thang chữ: 128 chỗ `size-3/4/5`
+   cộng 21 chỗ tự-động-cỡ `[&_svg:not([class*='size-'])]:size-4`, tất cả compile ra
+   `calc(var(--spacing) * n)`. Chiều cao control cũng vậy (`h-9`, `h-10`). Nếu chỉ ghi đè
+   `--text-*` thì ở mức `lg`: chữ 16px nằm cạnh icon vẫn 16px trong mọi hàng menu, nhãn
+   checkbox to ra trong khi ô `size-4` đứng yên, và `Kbd` (hộp 20px chứa chữ 12px) vỡ trước
+   tiên. Đổi `font-size` ở gốc thì mọi thứ tính bằng rem đi theo cùng nhau, tỉ lệ icon⇄chữ giữ
+   nguyên, và không phải sửa ~149 chỗ icon.
+
+   ⚠ PHẢI LÀ PHẦN TRĂM, KHÔNG ĐƯỢC LÀ px. Người dùng có thể đã tăng cỡ chữ mặc định của trình
+   duyệt; khai `font-size: 16px` ở <html> là XOÁ lựa chọn đó — tự tay vi phạm WCAG 1.4.4 ngay
+   bên trong một tính năng trợ năng. Phần trăm là phần trăm CỦA CHÍNH cỡ đó nên vẫn tôn trọng.
+
+   ⚠ Mức `md` KHÔNG có khối nào. Provider gỡ hẳn thuộc tính thay vì ghi `data-font-size="md"`,
+   nên ở mức mặc định không có một dòng CSS nào can thiệp vào cỡ gốc của trình duyệt.
+
+   Vì sao KHÔNG cần khai `--text-*` trong @theme: đã biên dịch thử bằng đúng tailwindcss 4.3.3
+   của repo — `text-sm` sinh ra `font-size: var(--text-sm); line-height: var(--tw-leading,
+   var(--text-sm--line-height))` dù gói có khai token hay không, và mặc định nằm trong
+   `@layer theme`. Ta không đụng tới chúng; ta đổi cỡ GỐC mà chúng quy chiếu.
+   ──────────────────────────────────────────────────────────────────────────── */
+[data-font-size="sm"] {
+  font-size: 87.5%;
+}
+
+[data-font-size="lg"] {
+  font-size: 112.5%;
+}
+
+/* ────────────────────────────────────────────────────────────────────────────
+   5d. TRỤC THỨ BA — MẬT ĐỘ  `<html data-density="compact">`
+
+   Bố cục gọn KHÔNG ghi đè `--spacing` toàn cục. Đã cân nhắc và loại: một dòng là xong, nhưng
+   nó co CẢ chiều ngang lẫn icon — `size-4` tụt còn ~12,8px, padding trái/phải hụt theo, và cả
+   quãng trượt của tw-animate cũng ngắn lại. Gọn về mã, xấu về kết quả.
+
+   Thay vào đó là một nhóm token nhắm đúng những bề mặt người dùng thấy CHẬT: hàng bảng, mục
+   menu, mục danh sách, mục thanh bên. Chỉ trục DỌC — chiều ngang giữ nguyên, vì "gọn" nghĩa là
+   thấy nhiều dòng hơn chứ không phải chữ dính vào mép.
+
+   ⚠ Mỗi token PHẢI có giá trị mặc định ở `:root` (khối 4). Cổng tương phản chỉ đọc bốn khối
+   `:root` · `.dark` · `[data-contrast="high"]` · `.dark[data-contrast="high"]`; token nào chỉ
+   khai trong khối này thì với cổng nó là chuỗi rỗng — `parseLength` trả null, `measureShape`
+   mất `isBar`/`isBox`/`isTinyAxis`, và nền theo token BỀ MẶT thôi không còn chịu ngưỡng 3:1.
+   Hỏng ÂM THẦM, không đỏ. (Với token MÀU thì lỗi này nổ ra thành phát hiện, với token ĐỘ DÀI
+   thì không.)
+
+   Đây cũng là khoản mà docs/spec-package.md §2 quy tắc 1 đã đòi từ đầu ("mọi khoảng cách là CSS
+   variable"), nên nó là TRẢ NỢ chứ không phải thêm ý tưởng mới.
+   ──────────────────────────────────────────────────────────────────────────── */
+[data-density="compact"] {
+  --row-py: 0.375rem;
+  --menu-item-py: 0.25rem;
+  --list-item-py: 0.5rem;
+  --nav-item-py: 0.25rem;
+  --table-head-h: 2rem;
+}
+
 /* ────────────────────────────────────────────────────────────────────────────
    6. MAP BIẾN → NAMESPACE TAILWIND (sinh bg-*, text-*, border-*, rounded-*…)