@comitor/ui 3.0.1 → 3.2.0

package/dist/tokens.d.ts

@@ -68,21 +68,27 @@ declare const accent: {
         readonly red: "#D64545";
         readonly green: "#2EA56A";
         readonly yellow: "#F2C94C";
+        /** Gốc của tone `severe`. Giữ 3:1 trên mọi nền trang (3,56:1 trắng · 3,32:1 `muted`) — vì nó
+         *  TÔ chấm của `StatusPill variant="dot"`; bậc sáng hơn (#F97316) chỉ 2,80:1. */
+        readonly orange: "#EA580C";
     };
     /** Bảng MẶC ĐỊNH (comitor-ds) không khai lại màu phụ ở dark — cùng hex với light. Bản sáng
-     *  dành cho nền tối nằm ở `highContrast.dark`. */
+     *  dành cho nền tối nằm ở `highContrast.dark`. Trừ `orange`: comitor-ds không có cam, và cùng
+     *  hex thì chữ cam trên tint /15 của chính nó ở dark chỉ 4,21:1 — nên bảng mặc định có bản
+     *  dark riêng. */
     readonly dark: {
         readonly navy: "#0F1E3D";
         readonly teal: "#1F8A8B";
         readonly red: "#D64545";
         readonly green: "#2EA56A";
         readonly yellow: "#F2C94C";
+        readonly orange: "#FB923C";
     };
 };
 /**
  * Bậc INK của màu phụ — mirror `--teal-ink` / `--green-ink` / `--red-ink` / `--yellow-ink` /
- * `--navy-ink`. Đây là màu phụ khi nó làm **CHỮ/ICON/VIỀN trên nền trang** (hoặc trên tint
- * /5–/20 của chính nó), tức vai trò NGƯỢC với `accent`.
+ * `--orange-ink` / `--navy-ink`. Đây là màu phụ khi nó làm **CHỮ/ICON/VIỀN trên nền trang**
+ * (hoặc trên tint /5–/20 của chính nó), tức vai trò NGƯỢC với `accent`.
  *
  * Hợp đồng đặt tên của cả gói: `--x` tô nền · `--x-foreground` là chữ NẰM TRÊN nền `--x` ·
  * `--x-ink` là chính màu đó ĐI LÊN nền trang.
@@ -103,6 +109,9 @@ declare const accentInk: {
         readonly green: "#216A48";
         /** = gold[500]: vàng không có bậc tối riêng, mượn thang gold cùng sắc. */
         readonly yellow: "#7A5800";
+        /** = color-mix(srgb, orange 72%, ink 28%) — bậc SÁNG nhất còn giữ trần tint /20: 5,85:1 trắng ·
+         *  4,87:1 trên orange/15 · 4,58:1 trên orange/20. Bảng tương phản cao tối hơn: `highContrast`. */
+        readonly orange: "#AC440F";
     };
     readonly dark: {
         /** navy nguyên bản chìm vào nền dark (1,15:1) → bậc sáng riêng; cũng là `--chart-3` ở dark. */
@@ -111,21 +120,22 @@ declare const accentInk: {
         readonly red: "#D64545";
         readonly green: "#2EA56A";
         readonly yellow: "#F2C94C";
+        readonly orange: "#FB923C";
     };
 };
 /**
  * Bậc FOREGROUND của màu phụ — mirror `--teal-foreground` / `--green-foreground` /
- * `--yellow-foreground` / `--navy-foreground`. Đây là chữ/icon nằm **TRÊN nền `accent.*` ĐẶC**,
- * tức vai trò thứ ba, khác hẳn `accentInk` (màu đó đi lên nền TRANG).
+ * `--yellow-foreground` / `--orange-foreground` / `--navy-foreground`. Đây là chữ/icon nằm
+ * **TRÊN nền `accent.*` ĐẶC**, tức vai trò thứ ba, khác hẳn `accentInk` (màu đó đi lên nền TRANG).
  *
- * Cả ba sắc teal/green/yellow đều sáng ở light và còn sáng hơn ở dark → chữ là MỰC ở cả hai
- * theme, một giá trị đủ dùng: teal 4,56:1 (light) / 10,16:1 (dark) · green 6,04 / 10,85 ·
- * yellow 11,92 / 12,35. Navy thì ngược lại — chữ TRẮNG, 16,49:1 ở cả hai theme.
+ * Cả bốn sắc teal/green/yellow/orange đều sáng ở light và còn sáng hơn ở dark → chữ là MỰC ở cả
+ * hai theme, một giá trị đủ dùng: teal 4,56:1 (light) / 10,16:1 (dark) · green 6,04 / 10,85 ·
+ * yellow 11,92 / 12,35 · orange 5,31 / 8,36. Navy thì ngược lại — chữ TRẮNG, 16,49:1 ở cả hai theme.
  *
  * ⚠ CỐ Ý KHÔNG có `red`: nền đỏ đặc không mang được chữ tốt ở light — trắng trên #D64545 được
  * 4,38:1 và mực 4,32:1, cả hai đều dưới AA. Nền đỏ đặc có chữ phải dùng `status.*.destructive`;
  * ở bảng tương phản cao token đó là #C93B3B và đạt 5,03:1. `accent.*.red` chỉ để tô TINT và làm
- * màu chart.
+ * màu chart. (Cam thì mực cứu được — 5,31:1 — nên `orange` có mặt.)
  */
 declare const accentForeground: {
     readonly light: {
@@ -133,12 +143,14 @@ declare const accentForeground: {
         readonly teal: "#0E1116";
         readonly green: "#0E1116";
         readonly yellow: "#0E1116";
+        readonly orange: "#0E1116";
     };
     readonly dark: {
         readonly navy: "#FFFFFF";
         readonly teal: "#0E1116";
         readonly green: "#0E1116";
         readonly yellow: "#0E1116";
+        readonly orange: "#0E1116";
     };
 };
 /** Semantic token của shadcn — mirror khối `:root` / `.dark` trong styles.css. */
@@ -295,12 +307,19 @@ declare const highContrast: {
         readonly primaryInk: "#7A5800";
         readonly linkInk: "#7A5800";
         readonly linkInkHover: "#5C4006";
+        /** = `--orange-ink` của khối này — bậc ink màu phụ DUY NHẤT mà bảng này đổi ở light:
+         *  color-mix(srgb, orange 65%, ink 35%), 6,66:1 trắng · 5,55:1 trên orange/15 (bảng mặc định
+         *  #AC440F: 5,85 / 4,87:1). */
+        readonly severeInk: "#9D3F10";
         readonly accent: {
             readonly navy: "#0F1E3D";
             readonly teal: "#1F8A8B";
             readonly red: "#D64545";
             readonly green: "#2EA56A";
             readonly yellow: "#F2C94C";
+            /** Gốc của tone `severe`. Giữ 3:1 trên mọi nền trang (3,56:1 trắng · 3,32:1 `muted`) — vì nó
+             *  TÔ chấm của `StatusPill variant="dot"`; bậc sáng hơn (#F97316) chỉ 2,80:1. */
+            readonly orange: "#EA580C";
         };
     };
     readonly dark: {
@@ -322,18 +341,24 @@ declare const highContrast: {
         readonly primaryInk: "#F5D060";
         readonly linkInk: "#F5D060";
         readonly linkInkHover: "#F8E89D";
-        /** Màu phụ bản SÁNG cho nền tối — bảng mặc định không có bản dark cho nhóm này. */
+        /** Bằng bảng mặc định (8,36:1 trên `background` · 6,09:1 trên orange/15) — khai cho đủ cặp
+         *  với `light`, vì CSS phải huỷ bậc tối của khối light ở đây. */
+        readonly severeInk: "#FB923C";
+        /** Màu phụ bản SÁNG cho nền tối — bảng mặc định không có bản dark cho nhóm này (trừ `orange`,
+         *  vốn đã sáng ở `accent.dark`). */
         readonly accent: {
             readonly navy: "#0F1E3D";
             readonly teal: "#2DD4BF";
             readonly red: "#F87171";
             readonly green: "#4ADE80";
             readonly yellow: "#FACC15";
+            readonly orange: "#FB923C";
         };
     };
 };
 /**
- * Alias trạng thái — success/warning/info trỏ vào màu phụ, destructive giữ nguyên 2 chế độ.
+ * Alias trạng thái — success/warning/severe/info trỏ vào màu phụ, destructive giữ nguyên 2 chế độ.
+ * `severe` (cam) là nấc giữa warning và destructive: ưu tiên cao, SLA sắp trễ.
  *
  * Ba lớp KHÁC nhau, đừng gộp:
  *   • `destructive` — màu NỀN (nút xoá): #D64545 ở bảng mặc định (chữ trắng 4,38:1, dưới AA và đã
@@ -347,6 +372,7 @@ declare const highContrast: {
  *     success mực 6,04:1 (light) · 10,85:1 (dark)   [trắng chỉ 3,13 / 1,74:1 ✗]
  *     info    mực 4,56:1 (light) · 10,16:1 (dark)   [trắng chỉ 4,14 / 1,86:1 ✗]
  *     warning mực 11,92:1 (light) · 12,35:1 (dark)  [trắng chỉ 1,59 / 1,53:1 ✗]
+ *     severe  mực 5,31:1 (light) · 8,36:1 (dark)    [trắng chỉ 3,56 / 2,26:1 ✗]
  * ⚠ `info` ở light là cặp chặt nhất gói (4,56:1, dư 0,06) — đổi `accent.light.teal` là phải đo lại.
  */
 declare const status: {
@@ -355,12 +381,15 @@ declare const status: {
         readonly successForeground: "#0E1116";
         readonly warning: "#F2C94C";
         readonly warningForeground: "#0E1116";
+        readonly severe: "#EA580C";
+        readonly severeForeground: "#0E1116";
         readonly info: "#1F8A8B";
         readonly infoForeground: "#0E1116";
         readonly destructive: "#D64545";
         readonly destructiveForeground: "#FFFFFF";
         readonly successInk: "#216A48";
         readonly warningInk: "#7A5800";
+        readonly severeInk: "#AC440F";
         readonly infoInk: "#1A6668";
         readonly destructiveInk: "#9A3537";
     };
@@ -369,12 +398,15 @@ declare const status: {
         readonly successForeground: "#0E1116";
         readonly warning: "#F2C94C";
         readonly warningForeground: "#0E1116";
+        readonly severe: "#FB923C";
+        readonly severeForeground: "#0E1116";
         readonly info: "#1F8A8B";
         readonly infoForeground: "#0E1116";
         readonly destructive: "#D64545";
         readonly destructiveForeground: "#FFFFFF";
         readonly successInk: "#2EA56A";
         readonly warningInk: "#F2C94C";
+        readonly severeInk: "#FB923C";
         readonly infoInk: "#1F8A8B";
         readonly destructiveInk: "#D64545";
     };

package/dist/tokens.js

@@ -29,16 +29,22 @@ const accent = {
     teal: "#1F8A8B",
     red: "#D64545",
     green: "#2EA56A",
-    yellow: "#F2C94C"
+    yellow: "#F2C94C",
+    /** Gốc của tone `severe`. Giữ 3:1 trên mọi nền trang (3,56:1 trắng · 3,32:1 `muted`) — vì nó
+     *  TÔ chấm của `StatusPill variant="dot"`; bậc sáng hơn (#F97316) chỉ 2,80:1. */
+    orange: "#EA580C"
   },
   /** Bảng MẶC ĐỊNH (comitor-ds) không khai lại màu phụ ở dark — cùng hex với light. Bản sáng
-   *  dành cho nền tối nằm ở `highContrast.dark`. */
+   *  dành cho nền tối nằm ở `highContrast.dark`. Trừ `orange`: comitor-ds không có cam, và cùng
+   *  hex thì chữ cam trên tint /15 của chính nó ở dark chỉ 4,21:1 — nên bảng mặc định có bản
+   *  dark riêng. */
   dark: {
     navy: "#0F1E3D",
     teal: "#1F8A8B",
     red: "#D64545",
     green: "#2EA56A",
-    yellow: "#F2C94C"
+    yellow: "#F2C94C",
+    orange: "#FB923C"
   }
 };
 const accentInk = {
@@ -48,7 +54,10 @@ const accentInk = {
     red: "#9A3537",
     green: "#216A48",
     /** = gold[500]: vàng không có bậc tối riêng, mượn thang gold cùng sắc. */
-    yellow: gold[500]
+    yellow: gold[500],
+    /** = color-mix(srgb, orange 72%, ink 28%) — bậc SÁNG nhất còn giữ trần tint /20: 5,85:1 trắng ·
+     *  4,87:1 trên orange/15 · 4,58:1 trên orange/20. Bảng tương phản cao tối hơn: `highContrast`. */
+    orange: "#AC440F"
   },
   dark: {
     /** navy nguyên bản chìm vào nền dark (1,15:1) → bậc sáng riêng; cũng là `--chart-3` ở dark. */
@@ -56,7 +65,8 @@ const accentInk = {
     teal: accent.dark.teal,
     red: accent.dark.red,
     green: accent.dark.green,
-    yellow: accent.dark.yellow
+    yellow: accent.dark.yellow,
+    orange: accent.dark.orange
   }
 };
 const accentForeground = {
@@ -64,13 +74,15 @@ const accentForeground = {
     navy: "#FFFFFF",
     teal: "#0E1116",
     green: "#0E1116",
-    yellow: "#0E1116"
+    yellow: "#0E1116",
+    orange: "#0E1116"
   },
   dark: {
     navy: "#FFFFFF",
     teal: "#0E1116",
     green: "#0E1116",
-    yellow: "#0E1116"
+    yellow: "#0E1116",
+    orange: "#0E1116"
   }
 };
 const semantic = {
@@ -212,6 +224,10 @@ const highContrast = {
     primaryInk: gold[500],
     linkInk: gold[500],
     linkInkHover: gold[600],
+    /** = `--orange-ink` của khối này — bậc ink màu phụ DUY NHẤT mà bảng này đổi ở light:
+     *  color-mix(srgb, orange 65%, ink 35%), 6,66:1 trắng · 5,55:1 trên orange/15 (bảng mặc định
+     *  #AC440F: 5,85 / 4,87:1). */
+    severeInk: "#9D3F10",
     accent: accent.light
   },
   dark: {
@@ -233,13 +249,18 @@ const highContrast = {
     primaryInk: "#F5D060",
     linkInk: gold[200],
     linkInkHover: gold[100],
-    /** Màu phụ bản SÁNG cho nền tối — bảng mặc định không có bản dark cho nhóm này. */
+    /** Bằng bảng mặc định (8,36:1 trên `background` · 6,09:1 trên orange/15) — khai cho đủ cặp
+     *  với `light`, vì CSS phải huỷ bậc tối của khối light ở đây. */
+    severeInk: accent.dark.orange,
+    /** Màu phụ bản SÁNG cho nền tối — bảng mặc định không có bản dark cho nhóm này (trừ `orange`,
+     *  vốn đã sáng ở `accent.dark`). */
     accent: {
       navy: "#0F1E3D",
       teal: "#2DD4BF",
       red: "#F87171",
       green: "#4ADE80",
-      yellow: "#FACC15"
+      yellow: "#FACC15",
+      orange: accent.dark.orange
     }
   }
 };
@@ -249,12 +270,15 @@ const status = {
     successForeground: "#0E1116",
     warning: accent.light.yellow,
     warningForeground: "#0E1116",
+    severe: accent.light.orange,
+    severeForeground: "#0E1116",
     info: accent.light.teal,
     infoForeground: "#0E1116",
     destructive: "#D64545",
     destructiveForeground: "#FFFFFF",
     successInk: accentInk.light.green,
     warningInk: accentInk.light.yellow,
+    severeInk: accentInk.light.orange,
     infoInk: accentInk.light.teal,
     destructiveInk: accentInk.light.red
   },
@@ -263,12 +287,15 @@ const status = {
     successForeground: "#0E1116",
     warning: accent.dark.yellow,
     warningForeground: "#0E1116",
+    severe: accent.dark.orange,
+    severeForeground: "#0E1116",
     info: accent.dark.teal,
     infoForeground: "#0E1116",
     destructive: "#D64545",
     destructiveForeground: "#FFFFFF",
     successInk: accentInk.dark.green,
     warningInk: accentInk.dark.yellow,
+    severeInk: accentInk.dark.orange,
     infoInk: accentInk.dark.teal,
     destructiveInk: accentInk.dark.red
   }

package/dist/tokens.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tokens.ts"],"sourcesContent":["/**\n * Design token dạng TS object — dành cho nơi KHÔNG có Tailwind: canvas, biểu đồ tuỳ biến,\n * email HTML, xuất PDF, (sau này) React Native.\n *\n * ⚠ Nguồn sự thật của giá trị là `styles.css` (CSS variable). File này chỉ MIRROR hằng số.\n * Sửa màu ở styles.css thì phải sửa kèm ở đây — và ngược lại.\n *\n * Trong môi trường có Tailwind, LUÔN dùng class token (`bg-primary`, `text-ash-500`),\n * đừng đọc hex từ đây rồi nhét vào style inline: làm vậy là mất dark mode.\n *\n * Hợp đồng ba vai trò của màu (giống hệt `styles.css`; bảng đầy đủ ở docs/hop-dong-mau.md),\n * đọc tên là biết dùng ở đâu:\n *   `x`            → tô NỀN (fill đặc hoặc tint /5–/20 — trần chung an toàn cho mọi tone)\n *   `xForeground`  → chữ/icon NẰM TRÊN nền `x` ĐẶC — đo với `x`, ngưỡng 4,5:1\n *   `xInk`         → chính màu đó khi ĐI LÊN nền trang hoặc lên tint của chính nó (chữ, icon\n *                    rời, viền, vạch active) — đo với nền đó\n *\n * Cố ý KHÔNG mirror (xem docs/quyet-dinh-tich-hop.md §21): `--elevation-*` (chuỗi box-shadow chỉ\n * có nghĩa trong CSS), `--app-accent*` (giá trị thuộc về APP, không phải gói), `--font-*`.\n */\n\nimport { AVATAR_TONES, type AvatarToneColors, type AvatarTonePalette, getAvatarToneIndex } from \"./lib/avatar-tone.js\";\n\n/** Thang GOLD 7 bậc — trục màu chính của brand Comitor. */\nexport const gold = {\n  50: \"#FBF5DC\",\n  100: \"#F8E89D\",\n  200: \"#F5D060\",\n  /** primary ở light mode */\n  300: \"#E8B824\",\n  400: \"#B88A00\",\n  500: \"#7A5800\",\n  600: \"#5C4006\"\n} as const;\n\n/** Trung tính brand (khác thang ash — đây là màu \"giấy/mực\" của brand book). */\nexport const brandNeutral = {\n  ink: \"#0E1116\",\n  inkSoft: \"#3A3F4A\",\n  paper: \"#FBF7EE\",\n  warm: \"#EDE8D8\"\n} as const;\n\n/**\n * Thang xám Comitor — namespace `ash`, KHÔNG phải `gray`.\n * Chỉ có 6 bậc; các bậc khuyết (200/400/600/800) cố ý không khai để không lẫn với\n * thang gray dựng sẵn của Tailwind (xem chú thích trong styles.css).\n */\nexport const ash = {\n  50: \"#F7F7F8\",\n  100: \"#EDEEF1\",\n  300: \"#C8CBD3\",\n  500: \"#7E8290\",\n  700: \"#3A3F4A\",\n  900: \"#16181D\"\n} as const;\n\n/**\n * Màu phụ — vai trò TÔ NỀN (fill đặc hoặc tint). Bản `dark` được nâng sáng vì trên nền #0E1116\n * bản `light` chìm nghỉm.\n *\n * ⚠ ĐỪNG dùng bảng này làm màu CHỮ ở light: nó được chọn để tô nền nên quá nhạt — dùng\n * `accentInk` ngay dưới. `accent.dark.navy` giữ nguyên #0F1E3D chỉ để mirror đúng `styles.css`\n * (khối `.dark` không override `--navy`); vai trò navy ở dark do `accentInk.dark.navy` gánh.\n */\nexport const accent = {\n  light: {\n    navy: \"#0F1E3D\",\n    teal: \"#1F8A8B\",\n    red: \"#D64545\",\n    green: \"#2EA56A\",\n    yellow: \"#F2C94C\"\n  },\n  /** Bảng MẶC ĐỊNH (comitor-ds) không khai lại màu phụ ở dark — cùng hex với light. Bản sáng\n   *  dành cho nền tối nằm ở `highContrast.dark`. */\n  dark: {\n    navy: \"#0F1E3D\",\n    teal: \"#1F8A8B\",\n    red: \"#D64545\",\n    green: \"#2EA56A\",\n    yellow: \"#F2C94C\"\n  }\n} as const;\n\n/**\n * Bậc INK của màu phụ — mirror `--teal-ink` / `--green-ink` / `--red-ink` / `--yellow-ink` /\n * `--navy-ink`. Đây là màu phụ khi nó làm **CHỮ/ICON/VIỀN trên nền trang** (hoặc trên tint\n * /5–/20 của chính nó), tức vai trò NGƯỢC với `accent`.\n *\n * Hợp đồng đặt tên của cả gói: `--x` tô nền · `--x-foreground` là chữ NẰM TRÊN nền `--x` ·\n * `--x-ink` là chính màu đó ĐI LÊN nền trang.\n *\n * Bản `light` là bậc tối đã đóng băng (kết quả của `color-mix(in srgb, --<màu>, --ink 30/40%)`\n * mà trước đây mỗi component tự tính lấy); bản `dark` chính là `accent.dark`. Đo trên tint 15%\n * của chính nó — nền thật mà chữ initials avatar và badge tonal đứng lên: teal 5,54 · green 5,60\n * · red 5,83:1 ở light (bản chưa có ink: 3,44 / 2,69 / 3,57:1 ✗).\n *\n * ⚠ Ở bảng MẶC ĐỊNH, `accent.dark` bằng hex của light nên bậc ink ở dark cũng vậy — đúng thứ\n * comitor-ds render. Bậc sáng cho nền tối nằm ở `highContrast.dark`.\n */\nexport const accentInk = {\n  light: {\n    navy: accent.light.navy,\n    teal: \"#1A6668\",\n    red: \"#9A3537\",\n    green: \"#216A48\",\n    /** = gold[500]: vàng không có bậc tối riêng, mượn thang gold cùng sắc. */\n    yellow: gold[500]\n  },\n  dark: {\n    /** navy nguyên bản chìm vào nền dark (1,15:1) → bậc sáng riêng; cũng là `--chart-3` ở dark. */\n    navy: \"#7EA2E8\",\n    teal: accent.dark.teal,\n    red: accent.dark.red,\n    green: accent.dark.green,\n    yellow: accent.dark.yellow\n  }\n} as const;\n\n/**\n * Bậc FOREGROUND của màu phụ — mirror `--teal-foreground` / `--green-foreground` /\n * `--yellow-foreground` / `--navy-foreground`. Đây là chữ/icon nằm **TRÊN nền `accent.*` ĐẶC**,\n * tức vai trò thứ ba, khác hẳn `accentInk` (màu đó đi lên nền TRANG).\n *\n * Cả ba sắc teal/green/yellow đều sáng ở light và còn sáng hơn ở dark → chữ là MỰC ở cả hai\n * theme, một giá trị đủ dùng: teal 4,56:1 (light) / 10,16:1 (dark) · green 6,04 / 10,85 ·\n * yellow 11,92 / 12,35. Navy thì ngược lại — chữ TRẮNG, 16,49:1 ở cả hai theme.\n *\n * ⚠ CỐ Ý KHÔNG có `red`: nền đỏ đặc không mang được chữ tốt ở light — trắng trên #D64545 được\n * 4,38:1 và mực 4,32:1, cả hai đều dưới AA. Nền đỏ đặc có chữ phải dùng `status.*.destructive`;\n * ở bảng tương phản cao token đó là #C93B3B và đạt 5,03:1. `accent.*.red` chỉ để tô TINT và làm\n * màu chart.\n */\nexport const accentForeground = {\n  light: {\n    navy: \"#FFFFFF\",\n    teal: \"#0E1116\",\n    green: \"#0E1116\",\n    yellow: \"#0E1116\"\n  },\n  dark: {\n    navy: \"#FFFFFF\",\n    teal: \"#0E1116\",\n    green: \"#0E1116\",\n    yellow: \"#0E1116\"\n  }\n} as const;\n\n/** Semantic token của shadcn — mirror khối `:root` / `.dark` trong styles.css. */\nexport const semantic = {\n  light: {\n    background: \"#FFFFFF\",\n    foreground: \"#0E1116\",\n    card: \"#FFFFFF\",\n    cardForeground: \"#0E1116\",\n    popover: \"#FFFFFF\",\n    popoverForeground: \"#0E1116\",\n    primary: \"#E8B824\",\n    primaryForeground: \"#0E1116\",\n    /** Bậc INK của brand. Ở bảng MẶC ĐỊNH nó BẰNG `primary`: comitor-ds tô gold cho cả những vai\n     *  trò mà 1.4.11 đòi 3:1 (rãnh Switch BẬT, gạch active của Tabs) — 1,86:1, đã biết và chấp\n     *  nhận. Bậc tối #7A5800 nằm ở `highContrast.light.primaryInk`. */\n    primaryInk: \"#E8B824\",\n    secondary: \"#EDE8D8\",\n    secondaryForeground: \"#0E1116\",\n    muted: \"#F7F7F8\",\n    /** Bậc chữ phụ — giá trị của comitor-ds, bằng đúng `ash[500]`. 3,83:1 trên nền trắng và\n     *  3,58:1 trên `muted`, tức dưới AA 4,5:1: đã biết và chấp nhận, bản đạt chuẩn nằm ở\n     *  `highContrast.light.mutedForeground`. */\n    mutedForeground: ash[500],\n    accent: \"#FBF5DC\",\n    accentForeground: \"#0E1116\",\n    /** Nền nút xoá. Chữ trắng trên nó được 4,38:1 — thiếu 0,12 so với AA, đã biết và chấp nhận. */\n    destructive: \"#D64545\",\n    destructiveForeground: \"#FFFFFF\",\n    /** Nền nút xoá lúc HOVER = `destructive` ở 90% trên nền trắng, đúng thứ `hover:bg-red/90`\n     *  của comitor-ds render. Ghim hex vì `/90` phụ thuộc nền phía sau. */\n    destructiveHover: \"#DA5A5A\",\n    /** Chữ báo lỗi trên nền trang. comitor-ds viết `text-destructive` cho vai trò này, tức cùng\n     *  hex với nền — 4,38:1 trên nền trắng. */\n    destructiveInk: \"#D64545\",\n    /** RANH GIỚI TRANG TRÍ (vạch chia, viền thẻ nghỉ) — 1,16:1, cố ý: 1.4.11 không đòi tương\n     *  phản cho thứ không mang thông tin. Ranh giới của CONTROL đi qua `controlEdge`. */\n    border: \"#EDEEF1\",\n    /** Viền ô nhập — comitor-ds cho nó cùng bậc với `border`. 1,16:1, đã biết và chấp nhận. */\n    input: \"#EDEEF1\",\n    ring: \"#E8B824\",\n    /** Ranh giới của control lúc NGHỈ — ở bảng mặc định bằng đúng `input`. */\n    controlEdge: \"#EDEEF1\",\n    /** Cùng vai trò nhưng ở HOVER/ACTIVE. comitor-ds dùng `hover:border-gray-300` = `ash[300]`. */\n    controlEdgeStrong: ash[300],\n    /** Nền control khi BẬT/ĐÃ CHỌN (rãnh Switch bật, ô Checkbox đã chọn, chấm Radio). comitor-ds\n     *  tô gold: 1,86:1 với nền trang và với núm — đã biết và chấp nhận. */\n    controlOn: \"#E8B824\",\n    /** Núm Switch / chấm Radio — TRẮNG ở cả hai theme, đúng `bg-white` của comitor-ds. */\n    controlKnob: \"#FFFFFF\",\n    /** DẤU CHECK của Checkbox và chữ trên ngày ĐANG CHỌN của Calendar — tách khỏi `controlKnob`\n     *  vì trên nền gold SÁNG thì dấu phải là MỰC (10,19:1), còn ở bảng tương phản cao nền là\n     *  gold-500 TỐI nên dấu lật thành màu nền trang. */\n    controlCheck: brandNeutral.ink,\n    /** Rãnh Switch khi TẮT — comitor-ds dùng `bg-gray-300` / `dark:bg-gray-700`. */\n    switchTrack: ash[300],\n    /** Rãnh Slider — comitor-ds dùng `bg-muted`, khác bậc với rãnh Switch. */\n    sliderTrack: \"#F7F7F8\",\n    /** Button variant `link`. comitor-ds dùng `gold[400]` — 3,15:1, dưới AA, đã biết và chấp nhận. */\n    linkInk: gold[400],\n    linkInkHover: gold[300],\n    sidebar: \"#FAFAF9\",\n    sidebarForeground: \"#0E1116\",\n    sidebarBorder: \"#EDEEF1\",\n    sidebarAccent: \"#FBF5DC\",\n    sidebarAccentForeground: \"#0E1116\"\n  },\n  dark: {\n    background: \"#0E1116\",\n    foreground: \"#F7F7F8\",\n    card: \"#16181D\",\n    cardForeground: \"#F7F7F8\",\n    popover: \"#16181D\",\n    popoverForeground: \"#F7F7F8\",\n    primary: \"#F5D060\",\n    primaryForeground: \"#0E1116\",\n    /** Ở dark `primary` vốn đã là bậc sáng (12,67:1 trên nền `background`) nên ink = chính nó. */\n    primaryInk: \"#F5D060\",\n    secondary: \"#1E2128\",\n    secondaryForeground: \"#F7F7F8\",\n    muted: \"#1E2128\",\n    /** comitor-ds không khai lại token này ở dark — cùng hex với light. 4,21:1 trên `muted`,\n     *  dưới AA: đã biết và chấp nhận. */\n    mutedForeground: ash[500],\n    accent: \"#1E2128\",\n    accentForeground: \"#F7F7F8\",\n    /** Ghim đúng giá trị của light — comitor-ds dùng chung một hex cho cả hai theme. */\n    destructive: \"#D64545\",\n    destructiveForeground: \"#FFFFFF\",\n    destructiveHover: \"#DA5A5A\",\n    /** 4,06:1 trên `card` — cùng hex với nền, đúng `text-destructive` của comitor-ds. */\n    destructiveInk: \"#D64545\",\n    /** TRANG TRÍ, 1,17:1 trên `background` và 1,10:1 trên `card` — cố ý, xem nhánh light. */\n    border: \"#1E2128\",\n    /** Viền ô nhập bản dark của comitor-ds — cùng bậc với `border`. */\n    input: \"#1E2128\",\n    ring: \"#F5D060\",\n    controlEdge: \"#1E2128\",\n    /** comitor-ds dùng `dark:hover:border-gray-500` = `ash[500]` (lật chiều so với light). */\n    controlEdgeStrong: ash[500],\n    /** comitor-ds tô `dark:data-[state=checked]:bg-gold-300`, nhưng token `primary` của chính nó\n     *  ở dark là #F5D060; gói theo token, nên control BẬT ở dark là bậc sáng. */\n    controlOn: \"#F5D060\",\n    /** TRẮNG ở cả hai theme, đúng `bg-white` của comitor-ds. */\n    controlKnob: \"#FFFFFF\",\n    /** comitor-ds vẽ dấu check bằng `text-ink` ở CẢ hai theme. */\n    controlCheck: brandNeutral.ink,\n    switchTrack: ash[700],\n    sliderTrack: \"#1E2128\",\n    linkInk: gold[400],\n    linkInkHover: gold[300],\n    sidebar: \"#16181D\",\n    sidebarForeground: \"#F7F7F8\",\n    sidebarBorder: \"#1E2128\",\n    sidebarAccent: \"#1E2128\",\n    sidebarAccentForeground: \"#F7F7F8\"\n  }\n} as const;\n\n/**\n * BẢNG MÀU THỨ HAI — TƯƠNG PHẢN CAO. Mirror khối `[data-contrast=\"high\"]` /\n * `.dark[data-contrast=\"high\"]` trong styles.css.\n *\n * Chỉ chứa những token KHÁC bảng mặc định, đúng như CSS: hợp lên trên để có bảng đầy đủ.\n *\n * ```ts\n * const mau = { ...semantic.light, ...highContrast.light };\n * ```\n *\n * Bảng mặc định là comitor-ds (bản duyệt, có những cặp dưới ngưỡng — đã liệt kê ở từng token).\n * Bảng này là bảng đã đo, do NGƯỜI DÙNG bật qua `<ContrastProvider>` + `<ContrastToggle>`.\n * `accent` là màu phụ bản sáng dành cho nền tối — bảng mặc định không có, xem `accent.dark`.\n */\nexport const highContrast = {\n  light: {\n    /** 5,23:1 trên `background` · 4,89:1 trên `muted` (bảng mặc định: 3,83 / 3,58) */\n    mutedForeground: \"#686C7A\",\n    /** Chữ trắng trên nền này được 5,03:1 (bảng mặc định #D64545 chỉ 4,38:1) */\n    destructive: \"#C93B3B\",\n    /** = color-mix(destructive, ink 15%) — ĐẬM thêm khi hover, ngược chiều bảng mặc định. */\n    destructiveHover: \"#AD3535\",\n    /** 7,15:1 trên nền trắng (bảng mặc định dùng chính #D64545, 4,38:1) */\n    destructiveInk: accentInk.light.red,\n    /** 3,83:1 trên nền trắng (bảng mặc định #EDEEF1 chỉ 1,16:1) */\n    input: \"#7E8290\",\n    controlEdge: \"#7E8290\",\n    controlEdgeStrong: ash[700],\n    /** Rãnh ⇄ nền 6,51:1 và rãnh ⇄ núm 6,51:1 (bảng mặc định: 1,86 / 1,86) */\n    controlOn: gold[500],\n    /** = `background`, nên luôn tương phản đúng chiều với cả rãnh BẬT lẫn rãnh TẮT. */\n    controlKnob: \"#FFFFFF\",\n    controlCheck: \"#FFFFFF\",\n    switchTrack: \"#7E8290\",\n    sliderTrack: \"#7E8290\",\n    primaryInk: gold[500],\n    linkInk: gold[500],\n    linkInkHover: gold[600],\n    accent: accent.light\n  },\n  dark: {\n    /** 5,70:1 trên `background` · 5,35:1 trên `card` · 4,86:1 trên `muted` */\n    mutedForeground: \"#888D9B\",\n    destructive: \"#C93B3B\",\n    destructiveHover: \"#AD3535\",\n    destructiveInk: \"#F87171\",\n    /** Ghim một giá trị cho cả hai theme — 4,94:1 trên `background` */\n    input: \"#7E8290\",\n    controlEdge: \"#7E8290\",\n    controlEdgeStrong: ash[300],\n    /** 12,67:1 với nền trang VÀ với `controlKnob` (#0E1116) */\n    controlOn: \"#F5D060\",\n    controlKnob: \"#0E1116\",\n    controlCheck: \"#0E1116\",\n    switchTrack: \"#7E8290\",\n    sliderTrack: \"#7E8290\",\n    primaryInk: \"#F5D060\",\n    linkInk: gold[200],\n    linkInkHover: gold[100],\n    /** Màu phụ bản SÁNG cho nền tối — bảng mặc định không có bản dark cho nhóm này. */\n    accent: {\n      navy: \"#0F1E3D\",\n      teal: \"#2DD4BF\",\n      red: \"#F87171\",\n      green: \"#4ADE80\",\n      yellow: \"#FACC15\"\n    }\n  }\n} as const;\n\n/**\n * Alias trạng thái — success/warning/info trỏ vào màu phụ, destructive giữ nguyên 2 chế độ.\n *\n * Ba lớp KHÁC nhau, đừng gộp:\n *   • `destructive` — màu NỀN (nút xoá): #D64545 ở bảng mặc định (chữ trắng 4,38:1, dưới AA và đã\n *     chấp nhận), #C93B3B ở bảng tương phản cao (5,03:1 ✓);\n *   • `destructiveForeground` (#FFFFFF) — chữ NẰM TRÊN nền đó;\n *   • `destructiveInk` — màu CHỮ đỏ trên nền trang (dòng lỗi). Bảng mặc định cho nó cùng hex với\n *     nền (đúng `text-destructive` của comitor-ds); bảng tương phản cao tách thành bậc tối riêng.\n *\n * `successForeground` / `warningForeground` / `infoForeground` là MỰC ở CẢ hai theme (không phải\n * trắng ở light rồi lật ở dark như bản 0.1.0): ba nền trạng thái đều là sắc sáng.\n *     success mực 6,04:1 (light) · 10,85:1 (dark)   [trắng chỉ 3,13 / 1,74:1 ✗]\n *     info    mực 4,56:1 (light) · 10,16:1 (dark)   [trắng chỉ 4,14 / 1,86:1 ✗]\n *     warning mực 11,92:1 (light) · 12,35:1 (dark)  [trắng chỉ 1,59 / 1,53:1 ✗]\n * ⚠ `info` ở light là cặp chặt nhất gói (4,56:1, dư 0,06) — đổi `accent.light.teal` là phải đo lại.\n */\nexport const status = {\n  light: {\n    success: accent.light.green,\n    successForeground: \"#0E1116\",\n    warning: accent.light.yellow,\n    warningForeground: \"#0E1116\",\n    info: accent.light.teal,\n    infoForeground: \"#0E1116\",\n    destructive: \"#D64545\",\n    destructiveForeground: \"#FFFFFF\",\n    successInk: accentInk.light.green,\n    warningInk: accentInk.light.yellow,\n    infoInk: accentInk.light.teal,\n    destructiveInk: accentInk.light.red\n  },\n  dark: {\n    success: accent.dark.green,\n    successForeground: \"#0E1116\",\n    warning: accent.dark.yellow,\n    warningForeground: \"#0E1116\",\n    info: accent.dark.teal,\n    infoForeground: \"#0E1116\",\n    destructive: \"#D64545\",\n    destructiveForeground: \"#FFFFFF\",\n    successInk: accentInk.dark.green,\n    warningInk: accentInk.dark.yellow,\n    infoInk: accentInk.dark.teal,\n    destructiveInk: accentInk.dark.red\n  }\n} as const;\n\n/** Bảng màu biểu đồ (chart-1…chart-5). Thứ tự = thứ tự series mặc định. */\nexport const chart = {\n  light: [gold[300], accent.light.teal, accent.light.navy, accent.light.green, accent.light.red],\n  dark: [gold[200], accent.dark.teal, accentInk.dark.navy, accent.dark.green, accent.dark.red]\n} as const;\n\n/**\n * Màu avatar chữ cái (hex đục) cho nơi KHÔNG có Tailwind: canvas, email HTML, PDF.\n *\n * ⚠ KHÔNG phải bảng màu thứ hai. Bảng tone DUY NHẤT của cả gói nằm ở `lib/avatar-tone.ts`, mỗi\n * tone mang cả chuỗi class (cho DOM) lẫn công thức hex tương ứng; ở đây chỉ nạp bảng màu vào công\n * thức đó. Web và email vì vậy dùng chung một thứ tự tone, một hàm băm, một cách chuẩn hoá tên —\n * không còn hai bảng để lệch nhau.\n */\nconst avatarTonePalette = {\n  light: {\n    gold,\n    ash,\n    brandNeutral,\n    accent: accent.light,\n    accentInk: accentInk.light,\n    card: semantic.light.card\n  },\n  dark: {\n    gold,\n    ash,\n    brandNeutral,\n    accent: accent.dark,\n    accentInk: accentInk.dark,\n    card: semantic.dark.card\n  }\n} satisfies Record<ThemeMode, AvatarTonePalette>;\n\n/**\n * Cặp nền/chữ (hex) của avatar cho một tên, theo theme.\n *\n * Tên hàm nói đúng thứ nó trả về: `...Colors` = hex (canvas/email/PDF), còn bản trả về chuỗi\n * class Tailwind cho DOM là `getAvatarToneClasses` ở `@comitor/ui`. Cùng một tên người luôn ra\n * cùng một tone ở cả hai đường vì chỉ số do MỘT hàm tính (`getAvatarToneIndex`).\n */\nexport function getAvatarToneColors(name: string, mode: ThemeMode = \"light\"): AvatarToneColors {\n  // `noUncheckedIndexedAccess` bật → phải có nhánh lùi, dù chỉ số luôn nằm trong [0, 8).\n  const tone = AVATAR_TONES[getAvatarToneIndex(name)] ?? AVATAR_TONES[0];\n  return tone[mode](avatarTonePalette[mode]);\n}\n\nexport type { AvatarToneColors };\nexport { getAvatarToneIndex };\n\n/** Số đo khung ứng dụng — mirror --sidebar-width / --sidebar-width-icon / --header-height. */\nexport const layout = {\n  /** px — --header-height 3.5rem */\n  headerHeight: 56,\n  /** px — --sidebar-width 16rem */\n  sidebarWidth: 256,\n  /** px — --sidebar-width-icon 3.5rem */\n  sidebarCollapsedWidth: 56,\n  /** px — --radius 0.375rem */\n  radius: 6,\n  breakpoints: { mobile: 768, tablet: 1024, desktop: 1280 },\n  /** px — kích thước tối thiểu của vùng chạm trên mobile (WCAG 2.5.5) */\n  minTapTarget: 44\n} as const;\n\n/** Font stack — app phải tự nạp Inter (subsets latin + vietnamese) và gán --font-inter. */\nexport const typography = {\n  fontSans: '\"Inter\", system-ui, sans-serif',\n  fontMono: '\"Geist Mono\", ui-monospace, monospace'\n} as const;\n\nexport type ThemeMode = \"light\" | \"dark\";\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/tokens.ts"],"sourcesContent":["/**\n * Design token dạng TS object — dành cho nơi KHÔNG có Tailwind: canvas, biểu đồ tuỳ biến,\n * email HTML, xuất PDF, (sau này) React Native.\n *\n * ⚠ Nguồn sự thật của giá trị là `styles.css` (CSS variable). File này chỉ MIRROR hằng số.\n * Sửa màu ở styles.css thì phải sửa kèm ở đây — và ngược lại.\n *\n * Trong môi trường có Tailwind, LUÔN dùng class token (`bg-primary`, `text-ash-500`),\n * đừng đọc hex từ đây rồi nhét vào style inline: làm vậy là mất dark mode.\n *\n * Hợp đồng ba vai trò của màu (giống hệt `styles.css`; bảng đầy đủ ở docs/hop-dong-mau.md),\n * đọc tên là biết dùng ở đâu:\n *   `x`            → tô NỀN (fill đặc hoặc tint /5–/20 — trần chung an toàn cho mọi tone)\n *   `xForeground`  → chữ/icon NẰM TRÊN nền `x` ĐẶC — đo với `x`, ngưỡng 4,5:1\n *   `xInk`         → chính màu đó khi ĐI LÊN nền trang hoặc lên tint của chính nó (chữ, icon\n *                    rời, viền, vạch active) — đo với nền đó\n *\n * Cố ý KHÔNG mirror (xem docs/quyet-dinh-tich-hop.md §21): `--elevation-*` (chuỗi box-shadow chỉ\n * có nghĩa trong CSS), `--app-accent*` (giá trị thuộc về APP, không phải gói), `--font-*`.\n */\n\nimport { AVATAR_TONES, type AvatarToneColors, type AvatarTonePalette, getAvatarToneIndex } from \"./lib/avatar-tone.js\";\n\n/** Thang GOLD 7 bậc — trục màu chính của brand Comitor. */\nexport const gold = {\n  50: \"#FBF5DC\",\n  100: \"#F8E89D\",\n  200: \"#F5D060\",\n  /** primary ở light mode */\n  300: \"#E8B824\",\n  400: \"#B88A00\",\n  500: \"#7A5800\",\n  600: \"#5C4006\"\n} as const;\n\n/** Trung tính brand (khác thang ash — đây là màu \"giấy/mực\" của brand book). */\nexport const brandNeutral = {\n  ink: \"#0E1116\",\n  inkSoft: \"#3A3F4A\",\n  paper: \"#FBF7EE\",\n  warm: \"#EDE8D8\"\n} as const;\n\n/**\n * Thang xám Comitor — namespace `ash`, KHÔNG phải `gray`.\n * Chỉ có 6 bậc; các bậc khuyết (200/400/600/800) cố ý không khai để không lẫn với\n * thang gray dựng sẵn của Tailwind (xem chú thích trong styles.css).\n */\nexport const ash = {\n  50: \"#F7F7F8\",\n  100: \"#EDEEF1\",\n  300: \"#C8CBD3\",\n  500: \"#7E8290\",\n  700: \"#3A3F4A\",\n  900: \"#16181D\"\n} as const;\n\n/**\n * Màu phụ — vai trò TÔ NỀN (fill đặc hoặc tint). Bản `dark` được nâng sáng vì trên nền #0E1116\n * bản `light` chìm nghỉm.\n *\n * ⚠ ĐỪNG dùng bảng này làm màu CHỮ ở light: nó được chọn để tô nền nên quá nhạt — dùng\n * `accentInk` ngay dưới. `accent.dark.navy` giữ nguyên #0F1E3D chỉ để mirror đúng `styles.css`\n * (khối `.dark` không override `--navy`); vai trò navy ở dark do `accentInk.dark.navy` gánh.\n */\nexport const accent = {\n  light: {\n    navy: \"#0F1E3D\",\n    teal: \"#1F8A8B\",\n    red: \"#D64545\",\n    green: \"#2EA56A\",\n    yellow: \"#F2C94C\",\n    /** Gốc của tone `severe`. Giữ 3:1 trên mọi nền trang (3,56:1 trắng · 3,32:1 `muted`) — vì nó\n     *  TÔ chấm của `StatusPill variant=\"dot\"`; bậc sáng hơn (#F97316) chỉ 2,80:1. */\n    orange: \"#EA580C\"\n  },\n  /** Bảng MẶC ĐỊNH (comitor-ds) không khai lại màu phụ ở dark — cùng hex với light. Bản sáng\n   *  dành cho nền tối nằm ở `highContrast.dark`. Trừ `orange`: comitor-ds không có cam, và cùng\n   *  hex thì chữ cam trên tint /15 của chính nó ở dark chỉ 4,21:1 — nên bảng mặc định có bản\n   *  dark riêng. */\n  dark: {\n    navy: \"#0F1E3D\",\n    teal: \"#1F8A8B\",\n    red: \"#D64545\",\n    green: \"#2EA56A\",\n    yellow: \"#F2C94C\",\n    orange: \"#FB923C\"\n  }\n} as const;\n\n/**\n * Bậc INK của màu phụ — mirror `--teal-ink` / `--green-ink` / `--red-ink` / `--yellow-ink` /\n * `--orange-ink` / `--navy-ink`. Đây là màu phụ khi nó làm **CHỮ/ICON/VIỀN trên nền trang**\n * (hoặc trên tint /5–/20 của chính nó), tức vai trò NGƯỢC với `accent`.\n *\n * Hợp đồng đặt tên của cả gói: `--x` tô nền · `--x-foreground` là chữ NẰM TRÊN nền `--x` ·\n * `--x-ink` là chính màu đó ĐI LÊN nền trang.\n *\n * Bản `light` là bậc tối đã đóng băng (kết quả của `color-mix(in srgb, --<màu>, --ink 30/40%)`\n * mà trước đây mỗi component tự tính lấy); bản `dark` chính là `accent.dark`. Đo trên tint 15%\n * của chính nó — nền thật mà chữ initials avatar và badge tonal đứng lên: teal 5,54 · green 5,60\n * · red 5,83:1 ở light (bản chưa có ink: 3,44 / 2,69 / 3,57:1 ✗).\n *\n * ⚠ Ở bảng MẶC ĐỊNH, `accent.dark` bằng hex của light nên bậc ink ở dark cũng vậy — đúng thứ\n * comitor-ds render. Bậc sáng cho nền tối nằm ở `highContrast.dark`.\n */\nexport const accentInk = {\n  light: {\n    navy: accent.light.navy,\n    teal: \"#1A6668\",\n    red: \"#9A3537\",\n    green: \"#216A48\",\n    /** = gold[500]: vàng không có bậc tối riêng, mượn thang gold cùng sắc. */\n    yellow: gold[500],\n    /** = color-mix(srgb, orange 72%, ink 28%) — bậc SÁNG nhất còn giữ trần tint /20: 5,85:1 trắng ·\n     *  4,87:1 trên orange/15 · 4,58:1 trên orange/20. Bảng tương phản cao tối hơn: `highContrast`. */\n    orange: \"#AC440F\"\n  },\n  dark: {\n    /** navy nguyên bản chìm vào nền dark (1,15:1) → bậc sáng riêng; cũng là `--chart-3` ở dark. */\n    navy: \"#7EA2E8\",\n    teal: accent.dark.teal,\n    red: accent.dark.red,\n    green: accent.dark.green,\n    yellow: accent.dark.yellow,\n    orange: accent.dark.orange\n  }\n} as const;\n\n/**\n * Bậc FOREGROUND của màu phụ — mirror `--teal-foreground` / `--green-foreground` /\n * `--yellow-foreground` / `--orange-foreground` / `--navy-foreground`. Đây là chữ/icon nằm\n * **TRÊN nền `accent.*` ĐẶC**, tức vai trò thứ ba, khác hẳn `accentInk` (màu đó đi lên nền TRANG).\n *\n * Cả bốn sắc teal/green/yellow/orange đều sáng ở light và còn sáng hơn ở dark → chữ là MỰC ở cả\n * hai theme, một giá trị đủ dùng: teal 4,56:1 (light) / 10,16:1 (dark) · green 6,04 / 10,85 ·\n * yellow 11,92 / 12,35 · orange 5,31 / 8,36. Navy thì ngược lại — chữ TRẮNG, 16,49:1 ở cả hai theme.\n *\n * ⚠ CỐ Ý KHÔNG có `red`: nền đỏ đặc không mang được chữ tốt ở light — trắng trên #D64545 được\n * 4,38:1 và mực 4,32:1, cả hai đều dưới AA. Nền đỏ đặc có chữ phải dùng `status.*.destructive`;\n * ở bảng tương phản cao token đó là #C93B3B và đạt 5,03:1. `accent.*.red` chỉ để tô TINT và làm\n * màu chart. (Cam thì mực cứu được — 5,31:1 — nên `orange` có mặt.)\n */\nexport const accentForeground = {\n  light: {\n    navy: \"#FFFFFF\",\n    teal: \"#0E1116\",\n    green: \"#0E1116\",\n    yellow: \"#0E1116\",\n    orange: \"#0E1116\"\n  },\n  dark: {\n    navy: \"#FFFFFF\",\n    teal: \"#0E1116\",\n    green: \"#0E1116\",\n    yellow: \"#0E1116\",\n    orange: \"#0E1116\"\n  }\n} as const;\n\n/** Semantic token của shadcn — mirror khối `:root` / `.dark` trong styles.css. */\nexport const semantic = {\n  light: {\n    background: \"#FFFFFF\",\n    foreground: \"#0E1116\",\n    card: \"#FFFFFF\",\n    cardForeground: \"#0E1116\",\n    popover: \"#FFFFFF\",\n    popoverForeground: \"#0E1116\",\n    primary: \"#E8B824\",\n    primaryForeground: \"#0E1116\",\n    /** Bậc INK của brand. Ở bảng MẶC ĐỊNH nó BẰNG `primary`: comitor-ds tô gold cho cả những vai\n     *  trò mà 1.4.11 đòi 3:1 (rãnh Switch BẬT, gạch active của Tabs) — 1,86:1, đã biết và chấp\n     *  nhận. Bậc tối #7A5800 nằm ở `highContrast.light.primaryInk`. */\n    primaryInk: \"#E8B824\",\n    secondary: \"#EDE8D8\",\n    secondaryForeground: \"#0E1116\",\n    muted: \"#F7F7F8\",\n    /** Bậc chữ phụ — giá trị của comitor-ds, bằng đúng `ash[500]`. 3,83:1 trên nền trắng và\n     *  3,58:1 trên `muted`, tức dưới AA 4,5:1: đã biết và chấp nhận, bản đạt chuẩn nằm ở\n     *  `highContrast.light.mutedForeground`. */\n    mutedForeground: ash[500],\n    accent: \"#FBF5DC\",\n    accentForeground: \"#0E1116\",\n    /** Nền nút xoá. Chữ trắng trên nó được 4,38:1 — thiếu 0,12 so với AA, đã biết và chấp nhận. */\n    destructive: \"#D64545\",\n    destructiveForeground: \"#FFFFFF\",\n    /** Nền nút xoá lúc HOVER = `destructive` ở 90% trên nền trắng, đúng thứ `hover:bg-red/90`\n     *  của comitor-ds render. Ghim hex vì `/90` phụ thuộc nền phía sau. */\n    destructiveHover: \"#DA5A5A\",\n    /** Chữ báo lỗi trên nền trang. comitor-ds viết `text-destructive` cho vai trò này, tức cùng\n     *  hex với nền — 4,38:1 trên nền trắng. */\n    destructiveInk: \"#D64545\",\n    /** RANH GIỚI TRANG TRÍ (vạch chia, viền thẻ nghỉ) — 1,16:1, cố ý: 1.4.11 không đòi tương\n     *  phản cho thứ không mang thông tin. Ranh giới của CONTROL đi qua `controlEdge`. */\n    border: \"#EDEEF1\",\n    /** Viền ô nhập — comitor-ds cho nó cùng bậc với `border`. 1,16:1, đã biết và chấp nhận. */\n    input: \"#EDEEF1\",\n    ring: \"#E8B824\",\n    /** Ranh giới của control lúc NGHỈ — ở bảng mặc định bằng đúng `input`. */\n    controlEdge: \"#EDEEF1\",\n    /** Cùng vai trò nhưng ở HOVER/ACTIVE. comitor-ds dùng `hover:border-gray-300` = `ash[300]`. */\n    controlEdgeStrong: ash[300],\n    /** Nền control khi BẬT/ĐÃ CHỌN (rãnh Switch bật, ô Checkbox đã chọn, chấm Radio). comitor-ds\n     *  tô gold: 1,86:1 với nền trang và với núm — đã biết và chấp nhận. */\n    controlOn: \"#E8B824\",\n    /** Núm Switch / chấm Radio — TRẮNG ở cả hai theme, đúng `bg-white` của comitor-ds. */\n    controlKnob: \"#FFFFFF\",\n    /** DẤU CHECK của Checkbox và chữ trên ngày ĐANG CHỌN của Calendar — tách khỏi `controlKnob`\n     *  vì trên nền gold SÁNG thì dấu phải là MỰC (10,19:1), còn ở bảng tương phản cao nền là\n     *  gold-500 TỐI nên dấu lật thành màu nền trang. */\n    controlCheck: brandNeutral.ink,\n    /** Rãnh Switch khi TẮT — comitor-ds dùng `bg-gray-300` / `dark:bg-gray-700`. */\n    switchTrack: ash[300],\n    /** Rãnh Slider — comitor-ds dùng `bg-muted`, khác bậc với rãnh Switch. */\n    sliderTrack: \"#F7F7F8\",\n    /** Button variant `link`. comitor-ds dùng `gold[400]` — 3,15:1, dưới AA, đã biết và chấp nhận. */\n    linkInk: gold[400],\n    linkInkHover: gold[300],\n    sidebar: \"#FAFAF9\",\n    sidebarForeground: \"#0E1116\",\n    sidebarBorder: \"#EDEEF1\",\n    sidebarAccent: \"#FBF5DC\",\n    sidebarAccentForeground: \"#0E1116\"\n  },\n  dark: {\n    background: \"#0E1116\",\n    foreground: \"#F7F7F8\",\n    card: \"#16181D\",\n    cardForeground: \"#F7F7F8\",\n    popover: \"#16181D\",\n    popoverForeground: \"#F7F7F8\",\n    primary: \"#F5D060\",\n    primaryForeground: \"#0E1116\",\n    /** Ở dark `primary` vốn đã là bậc sáng (12,67:1 trên nền `background`) nên ink = chính nó. */\n    primaryInk: \"#F5D060\",\n    secondary: \"#1E2128\",\n    secondaryForeground: \"#F7F7F8\",\n    muted: \"#1E2128\",\n    /** comitor-ds không khai lại token này ở dark — cùng hex với light. 4,21:1 trên `muted`,\n     *  dưới AA: đã biết và chấp nhận. */\n    mutedForeground: ash[500],\n    accent: \"#1E2128\",\n    accentForeground: \"#F7F7F8\",\n    /** Ghim đúng giá trị của light — comitor-ds dùng chung một hex cho cả hai theme. */\n    destructive: \"#D64545\",\n    destructiveForeground: \"#FFFFFF\",\n    destructiveHover: \"#DA5A5A\",\n    /** 4,06:1 trên `card` — cùng hex với nền, đúng `text-destructive` của comitor-ds. */\n    destructiveInk: \"#D64545\",\n    /** TRANG TRÍ, 1,17:1 trên `background` và 1,10:1 trên `card` — cố ý, xem nhánh light. */\n    border: \"#1E2128\",\n    /** Viền ô nhập bản dark của comitor-ds — cùng bậc với `border`. */\n    input: \"#1E2128\",\n    ring: \"#F5D060\",\n    controlEdge: \"#1E2128\",\n    /** comitor-ds dùng `dark:hover:border-gray-500` = `ash[500]` (lật chiều so với light). */\n    controlEdgeStrong: ash[500],\n    /** comitor-ds tô `dark:data-[state=checked]:bg-gold-300`, nhưng token `primary` của chính nó\n     *  ở dark là #F5D060; gói theo token, nên control BẬT ở dark là bậc sáng. */\n    controlOn: \"#F5D060\",\n    /** TRẮNG ở cả hai theme, đúng `bg-white` của comitor-ds. */\n    controlKnob: \"#FFFFFF\",\n    /** comitor-ds vẽ dấu check bằng `text-ink` ở CẢ hai theme. */\n    controlCheck: brandNeutral.ink,\n    switchTrack: ash[700],\n    sliderTrack: \"#1E2128\",\n    linkInk: gold[400],\n    linkInkHover: gold[300],\n    sidebar: \"#16181D\",\n    sidebarForeground: \"#F7F7F8\",\n    sidebarBorder: \"#1E2128\",\n    sidebarAccent: \"#1E2128\",\n    sidebarAccentForeground: \"#F7F7F8\"\n  }\n} as const;\n\n/**\n * BẢNG MÀU THỨ HAI — TƯƠNG PHẢN CAO. Mirror khối `[data-contrast=\"high\"]` /\n * `.dark[data-contrast=\"high\"]` trong styles.css.\n *\n * Chỉ chứa những token KHÁC bảng mặc định, đúng như CSS: hợp lên trên để có bảng đầy đủ.\n *\n * ```ts\n * const mau = { ...semantic.light, ...highContrast.light };\n * ```\n *\n * Bảng mặc định là comitor-ds (bản duyệt, có những cặp dưới ngưỡng — đã liệt kê ở từng token).\n * Bảng này là bảng đã đo, do NGƯỜI DÙNG bật qua `<ContrastProvider>` + `<ContrastToggle>`.\n * `accent` là màu phụ bản sáng dành cho nền tối — bảng mặc định không có, xem `accent.dark`.\n */\nexport const highContrast = {\n  light: {\n    /** 5,23:1 trên `background` · 4,89:1 trên `muted` (bảng mặc định: 3,83 / 3,58) */\n    mutedForeground: \"#686C7A\",\n    /** Chữ trắng trên nền này được 5,03:1 (bảng mặc định #D64545 chỉ 4,38:1) */\n    destructive: \"#C93B3B\",\n    /** = color-mix(destructive, ink 15%) — ĐẬM thêm khi hover, ngược chiều bảng mặc định. */\n    destructiveHover: \"#AD3535\",\n    /** 7,15:1 trên nền trắng (bảng mặc định dùng chính #D64545, 4,38:1) */\n    destructiveInk: accentInk.light.red,\n    /** 3,83:1 trên nền trắng (bảng mặc định #EDEEF1 chỉ 1,16:1) */\n    input: \"#7E8290\",\n    controlEdge: \"#7E8290\",\n    controlEdgeStrong: ash[700],\n    /** Rãnh ⇄ nền 6,51:1 và rãnh ⇄ núm 6,51:1 (bảng mặc định: 1,86 / 1,86) */\n    controlOn: gold[500],\n    /** = `background`, nên luôn tương phản đúng chiều với cả rãnh BẬT lẫn rãnh TẮT. */\n    controlKnob: \"#FFFFFF\",\n    controlCheck: \"#FFFFFF\",\n    switchTrack: \"#7E8290\",\n    sliderTrack: \"#7E8290\",\n    primaryInk: gold[500],\n    linkInk: gold[500],\n    linkInkHover: gold[600],\n    /** = `--orange-ink` của khối này — bậc ink màu phụ DUY NHẤT mà bảng này đổi ở light:\n     *  color-mix(srgb, orange 65%, ink 35%), 6,66:1 trắng · 5,55:1 trên orange/15 (bảng mặc định\n     *  #AC440F: 5,85 / 4,87:1). */\n    severeInk: \"#9D3F10\",\n    accent: accent.light\n  },\n  dark: {\n    /** 5,70:1 trên `background` · 5,35:1 trên `card` · 4,86:1 trên `muted` */\n    mutedForeground: \"#888D9B\",\n    destructive: \"#C93B3B\",\n    destructiveHover: \"#AD3535\",\n    destructiveInk: \"#F87171\",\n    /** Ghim một giá trị cho cả hai theme — 4,94:1 trên `background` */\n    input: \"#7E8290\",\n    controlEdge: \"#7E8290\",\n    controlEdgeStrong: ash[300],\n    /** 12,67:1 với nền trang VÀ với `controlKnob` (#0E1116) */\n    controlOn: \"#F5D060\",\n    controlKnob: \"#0E1116\",\n    controlCheck: \"#0E1116\",\n    switchTrack: \"#7E8290\",\n    sliderTrack: \"#7E8290\",\n    primaryInk: \"#F5D060\",\n    linkInk: gold[200],\n    linkInkHover: gold[100],\n    /** Bằng bảng mặc định (8,36:1 trên `background` · 6,09:1 trên orange/15) — khai cho đủ cặp\n     *  với `light`, vì CSS phải huỷ bậc tối của khối light ở đây. */\n    severeInk: accent.dark.orange,\n    /** Màu phụ bản SÁNG cho nền tối — bảng mặc định không có bản dark cho nhóm này (trừ `orange`,\n     *  vốn đã sáng ở `accent.dark`). */\n    accent: {\n      navy: \"#0F1E3D\",\n      teal: \"#2DD4BF\",\n      red: \"#F87171\",\n      green: \"#4ADE80\",\n      yellow: \"#FACC15\",\n      orange: accent.dark.orange\n    }\n  }\n} as const;\n\n/**\n * Alias trạng thái — success/warning/severe/info trỏ vào màu phụ, destructive giữ nguyên 2 chế độ.\n * `severe` (cam) là nấc giữa warning và destructive: ưu tiên cao, SLA sắp trễ.\n *\n * Ba lớp KHÁC nhau, đừng gộp:\n *   • `destructive` — màu NỀN (nút xoá): #D64545 ở bảng mặc định (chữ trắng 4,38:1, dưới AA và đã\n *     chấp nhận), #C93B3B ở bảng tương phản cao (5,03:1 ✓);\n *   • `destructiveForeground` (#FFFFFF) — chữ NẰM TRÊN nền đó;\n *   • `destructiveInk` — màu CHỮ đỏ trên nền trang (dòng lỗi). Bảng mặc định cho nó cùng hex với\n *     nền (đúng `text-destructive` của comitor-ds); bảng tương phản cao tách thành bậc tối riêng.\n *\n * `successForeground` / `warningForeground` / `infoForeground` là MỰC ở CẢ hai theme (không phải\n * trắng ở light rồi lật ở dark như bản 0.1.0): ba nền trạng thái đều là sắc sáng.\n *     success mực 6,04:1 (light) · 10,85:1 (dark)   [trắng chỉ 3,13 / 1,74:1 ✗]\n *     info    mực 4,56:1 (light) · 10,16:1 (dark)   [trắng chỉ 4,14 / 1,86:1 ✗]\n *     warning mực 11,92:1 (light) · 12,35:1 (dark)  [trắng chỉ 1,59 / 1,53:1 ✗]\n *     severe  mực 5,31:1 (light) · 8,36:1 (dark)    [trắng chỉ 3,56 / 2,26:1 ✗]\n * ⚠ `info` ở light là cặp chặt nhất gói (4,56:1, dư 0,06) — đổi `accent.light.teal` là phải đo lại.\n */\nexport const status = {\n  light: {\n    success: accent.light.green,\n    successForeground: \"#0E1116\",\n    warning: accent.light.yellow,\n    warningForeground: \"#0E1116\",\n    severe: accent.light.orange,\n    severeForeground: \"#0E1116\",\n    info: accent.light.teal,\n    infoForeground: \"#0E1116\",\n    destructive: \"#D64545\",\n    destructiveForeground: \"#FFFFFF\",\n    successInk: accentInk.light.green,\n    warningInk: accentInk.light.yellow,\n    severeInk: accentInk.light.orange,\n    infoInk: accentInk.light.teal,\n    destructiveInk: accentInk.light.red\n  },\n  dark: {\n    success: accent.dark.green,\n    successForeground: \"#0E1116\",\n    warning: accent.dark.yellow,\n    warningForeground: \"#0E1116\",\n    severe: accent.dark.orange,\n    severeForeground: \"#0E1116\",\n    info: accent.dark.teal,\n    infoForeground: \"#0E1116\",\n    destructive: \"#D64545\",\n    destructiveForeground: \"#FFFFFF\",\n    successInk: accentInk.dark.green,\n    warningInk: accentInk.dark.yellow,\n    severeInk: accentInk.dark.orange,\n    infoInk: accentInk.dark.teal,\n    destructiveInk: accentInk.dark.red\n  }\n} as const;\n\n/** Bảng màu biểu đồ (chart-1…chart-5). Thứ tự = thứ tự series mặc định. */\nexport const chart = {\n  light: [gold[300], accent.light.teal, accent.light.navy, accent.light.green, accent.light.red],\n  dark: [gold[200], accent.dark.teal, accentInk.dark.navy, accent.dark.green, accent.dark.red]\n} as const;\n\n/**\n * Màu avatar chữ cái (hex đục) cho nơi KHÔNG có Tailwind: canvas, email HTML, PDF.\n *\n * ⚠ KHÔNG phải bảng màu thứ hai. Bảng tone DUY NHẤT của cả gói nằm ở `lib/avatar-tone.ts`, mỗi\n * tone mang cả chuỗi class (cho DOM) lẫn công thức hex tương ứng; ở đây chỉ nạp bảng màu vào công\n * thức đó. Web và email vì vậy dùng chung một thứ tự tone, một hàm băm, một cách chuẩn hoá tên —\n * không còn hai bảng để lệch nhau.\n */\nconst avatarTonePalette = {\n  light: {\n    gold,\n    ash,\n    brandNeutral,\n    accent: accent.light,\n    accentInk: accentInk.light,\n    card: semantic.light.card\n  },\n  dark: {\n    gold,\n    ash,\n    brandNeutral,\n    accent: accent.dark,\n    accentInk: accentInk.dark,\n    card: semantic.dark.card\n  }\n} satisfies Record<ThemeMode, AvatarTonePalette>;\n\n/**\n * Cặp nền/chữ (hex) của avatar cho một tên, theo theme.\n *\n * Tên hàm nói đúng thứ nó trả về: `...Colors` = hex (canvas/email/PDF), còn bản trả về chuỗi\n * class Tailwind cho DOM là `getAvatarToneClasses` ở `@comitor/ui`. Cùng một tên người luôn ra\n * cùng một tone ở cả hai đường vì chỉ số do MỘT hàm tính (`getAvatarToneIndex`).\n */\nexport function getAvatarToneColors(name: string, mode: ThemeMode = \"light\"): AvatarToneColors {\n  // `noUncheckedIndexedAccess` bật → phải có nhánh lùi, dù chỉ số luôn nằm trong [0, 8).\n  const tone = AVATAR_TONES[getAvatarToneIndex(name)] ?? AVATAR_TONES[0];\n  return tone[mode](avatarTonePalette[mode]);\n}\n\nexport type { AvatarToneColors };\nexport { getAvatarToneIndex };\n\n/** Số đo khung ứng dụng — mirror --sidebar-width / --sidebar-width-icon / --header-height. */\nexport const layout = {\n  /** px — --header-height 3.5rem */\n  headerHeight: 56,\n  /** px — --sidebar-width 16rem */\n  sidebarWidth: 256,\n  /** px — --sidebar-width-icon 3.5rem */\n  sidebarCollapsedWidth: 56,\n  /** px — --radius 0.375rem */\n  radius: 6,\n  breakpoints: { mobile: 768, tablet: 1024, desktop: 1280 },\n  /** px — kích thước tối thiểu của vùng chạm trên mobile (WCAG 2.5.5) */\n  minTapTarget: 44\n} as const;\n\n/** Font stack — app phải tự nạp Inter (subsets latin + vietnamese) và gán --font-inter. */\nexport const typography = {\n  fontSans: '\"Inter\", system-ui, sans-serif',\n  fontMono: '\"Geist Mono\", ui-monospace, monospace'\n} as const;\n\nexport type ThemeMode = \"light\" | \"dark\";\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comitor/ui",
-  "version": "3.0.1",
+  "version": "3.2.0",
   "description": "Comitor design system — Shadcn/UI tùy biến theo brand Comitor + component dùng chung cho hệ sinh thái SaaS (Tasks, Chat, CRM, HR…)",
   "license": "MIT",
   "type": "module",