@comitor/ui 3.1.0 → 3.3.0

package/styles.css

@@ -75,8 +75,9 @@
    comitor-ds không có các cụm sau, nên không có bản duyệt nào để khớp và chúng giữ nguyên bảng
    màu đã đo của gói: toàn bộ tầng composite (StatusPill, StatCard, DataTable, Toast,
    FilterChips, LetterAvatar, EmptyState…), tầng shell (AppShell, Sidebar, AppLauncher…),
-   --app-accent-ink, và thang đổ bóng bản dark (--elevation-* trong .dark — comitor-ds không
-   khai bóng cho dark).
+   --app-accent-ink, thang đổ bóng bản dark (--elevation-* trong .dark — comitor-ds không
+   khai bóng cho dark), và cả thang CAM (--orange/--orange-ink, gốc của tone `severe`) — vì thế
+   nó là màu phụ DUY NHẤT mà chính bậc TÔ NỀN có bản dark riêng ngay trong bảng mặc định.
    ════════════════════════════════════════════════════════════════════════════ */
 
 /* ────────────────────────────────────────────────────────────────────────────
@@ -123,6 +124,13 @@
   --red: #d64545;
   --green: #2ea56a;
   --yellow: #f2c94c;
+  /* Cam — nấc GIỮA vàng (warning) và đỏ (destructive), gốc của tone `severe`. comitor-ds không có
+     cam, nên đây là màu ĐO của gói chứ không phải hex của bản duyệt (khối NGOÀI PHẠM VI ĐỐI CHIẾU).
+     #EA580C (orange-600 của thang Tailwind) giữ 3:1 trên MỌI nền trang của light — điều kiện bắt
+     buộc, vì chính mảng tô này vẽ chấm của `StatusPill variant="dot"` (`dotColor` ở
+     status-config.ts): --background 3,56 · --sidebar 3,41 · --muted 3,32 · --sidebar-accent
+     3,25:1 ✓. Sáng hơn một nấc của cùng thang (#F97316) chỉ còn 2,80 / 2,62:1 ✗. */
+  --orange: #ea580c;
 
   /* ─ HỢP ĐỒNG BA VAI TRÒ CỦA MỘT TONE MÀU — đọc tên là biết dùng ở đâu ─
 
@@ -145,17 +153,20 @@
          green  #2EA56A trên #E0F2E9 = 2,69:1 ✗   → --green-ink  #216A48 = 5,60:1 ✓
          red    #D64545 trên #F9E3E3 = 3,57:1 ✗   → --red-ink    #9A3537 = 5,83:1 ✓
          yellow #F2C94C trên #FDF7E4 = 1,48:1 ✗   → --yellow-ink #7A5800 = 6,08:1 ✓
+         orange #EA580C trên #FCE6DB = 2,96:1 ✗   → --orange-ink #AC440F = 4,87:1 ✓
 
      Bậc ink phải đạt trên CẢ nền trắng lẫn nền tint — hai phép đo, không phải một. Trên các nền
      trang của light (--background · --sidebar #FAFAF9 · --sidebar-accent #FBF5DC):
          teal 6,68 · 6,39 · 6,10   |   green  6,52 · 6,24 · 5,96
-         red  7,15 · 6,84 · 6,53   |   yellow 6,51 · 6,24 · 5,96        ✓ đều ≥ 4,5:1
+         red  7,15 · 6,84 · 6,53   |   yellow 6,51 · 6,24 · 5,96
+         orange 5,85 · 5,60 · 5,35                                      ✓ đều ≥ 4,5:1
 
      Hex ở đây là kết quả ĐÃ ĐÓNG BĂNG của color-mix(in srgb, --<màu>, --ink 30/40%) mà vòng
      trước tính tay trong từng component. Đóng băng thành token có chủ ý: (a) một chỗ duy nhất
      để đo lại khi đổi màu phụ, (b) component không phải nhắc lại chuỗi color-mix (dễ chép lệch
      % giữa Badge/LetterAvatar/Input), (c) `tokens.ts` mirror được ra hex thật.
-     ⚠ Đổi --teal/--green/--red/--yellow thì PHẢI tính lại bậc ink tương ứng — không tự theo.
+     ⚠ Đổi --teal/--green/--red/--yellow/--orange thì PHẢI tính lại bậc ink tương ứng — không tự
+     theo.
 
      ⚠ PHẠM VI ÁP DỤNG TỪ 0.3.0: hợp đồng này chỉ còn áp cho các cụm TONAL mà comitor-ds KHÔNG
      có (Badge success/warning, StatusPill, LetterAvatar, StatCard, Toast) — đó là chỗ chữ đứng
@@ -164,7 +175,8 @@
      sự thật và bậc ink đã được gỡ khỏi đường render — xem khối NGUỒN SỰ THẬT ở đầu file.
 
      Ở DARK, --x-ink trỏ về var(--x): comitor-ds dùng một hex cho cả hai theme, nên bên dark bậc
-     ink chính là màu phụ. */
+     ink chính là màu phụ. (Cam cũng trỏ về fill ở dark, nhưng fill ấy là bản dark RIÊNG — xem
+     khối .dark.) */
   --teal-ink: #1a6668;
   --green-ink: #216a48;
   --red-ink: #9a3537;
@@ -174,23 +186,34 @@
   --yellow-ink: var(--gold-500);
   /* Navy vốn đã đủ tối ở light nên ink = chính nó; .dark mới cần bậc sáng (xem khối .dark). */
   --navy-ink: var(--navy);
+  /* Cam: đóng băng color-mix(in srgb, --orange 72%, --ink 28%) — ÍT mực hơn 30/40% của các tone
+     trên, cố ý: tone `severe` sinh ra vì bậc ink của warning (#7A5800) đọc ra ô-liu xỉn, nên bậc
+     này phải còn đọc ra CAM. 72% là bậc SÁNG nhất còn giữ trần chung /20 của hợp đồng:
+     --background 5,85 · --muted 5,47 · orange/15 4,87 · orange/20 4,58:1 ✓ (trần tint /21).
+     Sáng hơn một nấc (75% = #B3460F) vẫn qua /15 (4,60:1) nhưng tụt ở /20 (4,33:1 ✗) — app viết
+     `bg-severe/20` theo khuôn của warning là hỏng. Bảng tương phản cao kéo tối thêm (khối 5b). */
+  --orange-ink: #ac440f;
 
   /* ─ Bậc FOREGROUND của màu phụ — chữ/icon nằm TRÊN nền --x ĐẶC ─
-     teal/green/yellow đều là sắc SÁNG-VỪA ở light và còn sáng hơn ở dark, nên chữ phải là MỰC
-     chứ không phải trắng; một giá trị chạy được cả hai theme (khối .dark không khai lại):
+     teal/green/yellow/orange đều là sắc SÁNG-VỪA ở light và còn sáng hơn ở dark, nên chữ phải là
+     MỰC chứ không phải trắng; một giá trị chạy được cả hai theme (khối .dark không khai lại):
          teal   mực 4,56:1 (light) · 10,16:1 (dark)   [trắng chỉ 4,14:1 ✗ — cặp CHẶT nhất gói]
          green  mực 6,04:1 (light) · 10,85:1 (dark)   [trắng chỉ 3,13:1 ✗]
          yellow mực 11,92:1 (light) · 12,35:1 (dark)  [trắng chỉ 1,59:1 ✗]
+         orange mực 5,31:1 (light) · 8,36:1 (dark)    [trắng chỉ 3,56 / 2,26:1 ✗]
          navy   TRẮNG 16,49:1 ở cả hai theme (.dark không override --navy)
 
      ⚠ CỐ Ý KHÔNG CÓ --red-foreground. Nền --red ĐẶC không mang được chữ ở light: #D64545 với
      chữ trắng = 4,38:1 ✗ và với chữ mực = 4,32:1 ✗ — không màu chữ nào của brand cứu được cặp
      đó. Nền đỏ đặc CÓ CHỮ phải đi qua --destructive (#C93B3B, ghim cả hai theme) cùng
      --destructive-foreground = 5,03:1 ✓. --red chỉ để tô TINT (badge/avatar) và làm màu chart.
-     ⚠ Đổi --teal/--green/--yellow/--navy thì phải đo lại bốn bậc này. */
+     Cam thì KHÔNG rơi vào ca đó dù cùng họ nóng: mực cứu được nền #EA580C (5,31:1), nên nó có
+     --orange-foreground như teal/green/yellow.
+     ⚠ Đổi --teal/--green/--yellow/--orange/--navy thì phải đo lại năm bậc này. */
   --teal-foreground: #0e1116;
   --green-foreground: #0e1116;
   --yellow-foreground: #0e1116;
+  --orange-foreground: #0e1116;
   --navy-foreground: #ffffff;
 
   /* ─ Semantic shadcn ─ */
@@ -354,20 +377,27 @@
 
   /* ─ Alias trạng thái (package bổ sung; comitor-ds chưa có) ─
      Trỏ vào màu phụ để đổi tông trạng thái mà không đụng brand.
-     Vì trỏ bằng var(), khối .dark bên dưới đổi --green/--yellow/--teal là
-     --success/--warning/--info tự sáng theo, không cần khai lại. */
+     Vì trỏ bằng var(), khối .dark bên dưới đổi --green/--yellow/--orange/--teal là
+     --success/--warning/--severe/--info tự sáng theo, không cần khai lại. */
   --success: var(--green);
   --warning: var(--yellow);
+  /* `severe` — nấc GIỮA warning và destructive: ưu tiên cao, SLA sắp trễ, sắp chạm hạn mức. GitHub
+     Primer gọi đúng nấc này là "severe" (attention → severe → danger). Tách thành tone riêng chứ
+     không dồn vào hai tone kề: bậc ink của warning mượn gold-500 (#7A5800) nên ở cỡ CHẤM nó đọc
+     ra ô-liu xỉn chứ không ra "gấp"; còn đỏ đã là của destructive (xoá, lỗi, hỏng). */
+  --severe: var(--orange);
   --info: var(--teal);
-  /* Chữ/icon trên nền trạng thái ĐẶC. Cả ba sắc đều SÁNG ở light và còn sáng hơn ở dark → chữ là
+  /* Chữ/icon trên nền trạng thái ĐẶC. Cả bốn sắc đều SÁNG ở light và còn sáng hơn ở dark → chữ là
      MỰC ở CẢ hai theme, nên khối .dark không khai lại (trước đây success/info để #FFFFFF ở light
      rồi lật về mực ở dark — bản light hỏng thẳng ngưỡng AA):
          success mực 6,04:1 (light) · 10,85:1 (dark)    [trắng chỉ 3,13:1 / 1,74:1 ✗]
          info    mực 4,56:1 (light) · 10,16:1 (dark)    [trắng chỉ 4,14:1 / 1,86:1 ✗]
          warning mực 11,92:1 (light) · 12,35:1 (dark)   [trắng chỉ 1,59:1 / 1,53:1 ✗]
+         severe  mực 5,31:1 (light) · 8,36:1 (dark)     [trắng chỉ 3,56:1 / 2,26:1 ✗]
      ⚠ info ở light là cặp CHẶT nhất gói (4,56:1, dư 0,06). Đổi --teal thì phải đo lại ngay. */
   --success-foreground: #0e1116;
   --warning-foreground: #0e1116;
+  --severe-foreground: #0e1116;
   --info-foreground: #0e1116;
   /* Bậc ink của trạng thái — chữ/icon trạng thái trên nền trang hoặc trên tint của chính nó
      (Badge tonal, dòng lỗi, chip cảnh báo, icon Alert). Trỏ vào bậc ink của màu phụ đúng như
@@ -375,9 +405,12 @@
      Đo trên nền trang / trên tint 15% của chính nó — hai phép đo, phải đạt cả hai:
          success #216A48 6,52 / 5,60:1 (light) · #4ADE80 10,85 / 7,44:1 (dark)   ✓
          warning #7A5800 6,51 / 6,08:1 (light) · #FACC15 12,35 / 8,27:1 (dark)   ✓
+         severe  #AC440F 5,85 / 4,87:1 (light) · #FB923C  8,36 / 6,09:1 (dark)   ✓
+                 (bảng tương phản cao, light: #9D3F10 6,66 / 5,55:1)
          info    #1A6668 6,68 / 5,54:1 (light) · #2DD4BF 10,16 / 7,12:1 (dark)   ✓ */
   --success-ink: var(--green-ink);
   --warning-ink: var(--yellow-ink);
+  --severe-ink: var(--orange-ink);
   --info-ink: var(--teal-ink);
 
   /* ─ Bảng màu biểu đồ (đổi độc lập với brand) ─
@@ -560,6 +593,14 @@
   --green-ink: var(--green);
   --red-ink: var(--red);
   --yellow-ink: var(--yellow);
+  /* Cam là NGOẠI LỆ của câu "màu phụ không có bản dark" ở trên: comitor-ds không có cam nên không
+     có hex duyệt nào để giữ chung cho hai theme — và giữ chung thì hỏng thật: #EA580C làm chữ trên
+     tint /15 của chính nó hợp lên --card chỉ 4,21:1 ✗. Bản dark #FB923C (cùng họ "400" mà bảng
+     tương phản cao dùng cho teal/red/green/yellow): --background 8,36 · --card 7,85 · --muted 7,12
+     · orange/15 6,09 · orange/20 5,48:1 ✓ (trần tint /28); chấm tô bằng chính nó 8,36:1. Bậc ink
+     trỏ về fill, đúng lối của mọi màu phụ trong khối này. */
+  --orange: #fb923c;
+  --orange-ink: var(--orange);
   /* navy nguyên bản (#0F1E3D) chìm hẳn vào nền dark — 1,15:1 (bản trước ghi 1,17:1, sai). Bậc
      ink gánh vai trò đó (7,40:1 trên --background · 6,95:1 trên --card), và --chart-3 vì trỏ vào
      --navy-ink nên tự đúng, không cần khai lại ở đây nữa. */
@@ -569,8 +610,8 @@
   --app-accent-ink: var(--primary);
 
   /* KHÔNG khai lại --*-foreground của trạng thái và của màu phụ: chúng là MỰC (#0E1116) ở cả hai
-     theme vì cả hai bản màu đều sáng — xem bảng số ở :root. --navy-foreground cũng vậy (trắng),
-     vì khối này không override --navy. */
+     theme vì cả hai bản màu đều sáng — xem bảng số ở :root (kể cả cam: mực trên #FB923C 8,36:1).
+     --navy-foreground cũng vậy (trắng), vì khối này không override --navy. */
 
   /* Đổ bóng bản dark — bóng "mực" 4–16% trên nền #0E1116 gần như vô hình, lớp overlay
      mất sạch tín hiệu độ cao (dialog/popover trông như dán phẳng vào nền). Trên nền tối,
@@ -659,6 +700,15 @@
   --primary-ink: var(--gold-500);
   --link-ink: var(--gold-500);
   --link-ink-hover: var(--gold-600);
+  /* Cam: bảng mặc định lấy bậc ink SÁNG nhất còn giữ trần /20 (#AC440F — orange/15 4,87:1, dư ít).
+     Bảng này kéo nó về đúng SÀN mà các bậc ink light khác đang đứng (≥6,5:1 trên nền trắng · ≥5,5:1
+     trên tint /15 của chính nó): color-mix(in srgb, --orange 65%, --ink 35%) = #9D3F10 —
+     --background 6,66 · --muted 6,22 · orange/15 5,55 · orange/20 5,22:1 ✓, trần tint /31 (bằng
+     teal). Fill #EA580C GIỮ NGUYÊN: chấm 3,56:1 (--muted 3,32) đã ngang --control-on của chính
+     bảng này (3,28 · 3,06).
+     ⚠ .dark[data-contrast="high"] PHẢI khai lại --orange-ink — khối này đứng sau .dark, cùng độ
+     đặc tả, nên bậc tối này thắng bậc sáng của .dark và chữ cam chìm vào nền tối. */
+  --orange-ink: #9d3f10;
 }
 
 .dark[data-contrast="high"] {
@@ -684,6 +734,10 @@
   --red: #f87171;
   --green: #4ade80;
   --yellow: #facc15;
+  /* Cam không khai lại ở đây: .dark đã cho nó bản "400" (#FB923C — orange/15 6,09 · --muted 7,12:1).
+     Chỉ phải HUỶ bậc ink tối mà [data-contrast="high"] đặt cho light — cùng lý do --primary-ink
+     được trỏ lại về --primary ở trên. */
+  --orange-ink: var(--orange);
 }
 
 /* ────────────────────────────────────────────────────────────────────────────
@@ -844,27 +898,33 @@
   --color-red: var(--red);
   --color-green: var(--green);
   --color-yellow: var(--yellow);
+  --color-orange: var(--orange);
   --color-navy-ink: var(--navy-ink);
   --color-teal-ink: var(--teal-ink);
   --color-red-ink: var(--red-ink);
   --color-green-ink: var(--green-ink);
   --color-yellow-ink: var(--yellow-ink);
+  --color-orange-ink: var(--orange-ink);
   /* Chữ trên nền màu phụ ĐẶC. Không có `red-foreground`: nền --red đặc không mang được chữ ở
      light (4,38 / 4,32:1) → dùng `bg-destructive text-destructive-foreground`. */
   --color-navy-foreground: var(--navy-foreground);
   --color-teal-foreground: var(--teal-foreground);
   --color-green-foreground: var(--green-foreground);
   --color-yellow-foreground: var(--yellow-foreground);
+  --color-orange-foreground: var(--orange-foreground);
 
   /* Trạng thái */
   --color-success: var(--success);
   --color-success-foreground: var(--success-foreground);
   --color-warning: var(--warning);
   --color-warning-foreground: var(--warning-foreground);
+  --color-severe: var(--severe);
+  --color-severe-foreground: var(--severe-foreground);
   --color-info: var(--info);
   --color-info-foreground: var(--info-foreground);
   --color-success-ink: var(--success-ink);
   --color-warning-ink: var(--warning-ink);
+  --color-severe-ink: var(--severe-ink);
   --color-info-ink: var(--info-ink);
 
   /* Biểu đồ */