@comitor/ui 0.2.2 → 0.3.0

package/dist/tokens.d.ts

@@ -69,12 +69,14 @@ declare const accent: {
         readonly green: "#2EA56A";
         readonly yellow: "#F2C94C";
     };
+    /** 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`. */
     readonly dark: {
         readonly navy: "#0F1E3D";
-        readonly teal: "#2DD4BF";
-        readonly red: "#F87171";
-        readonly green: "#4ADE80";
-        readonly yellow: "#FACC15";
+        readonly teal: "#1F8A8B";
+        readonly red: "#D64545";
+        readonly green: "#2EA56A";
+        readonly yellow: "#F2C94C";
     };
 };
 /**
@@ -86,10 +88,12 @@ declare const accent: {
  * `--x-ink` là chính màu đó ĐI LÊN nền trang.
  *
  * 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%)`
- * mà trước đây mỗi component tự tính lấy); bản `dark` chính là `accent.dark` vì bên đó màu phụ
- * đã đủ sáng để làm chữ. Đo trên tint 15% 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 · red 5,83:1 ở light (bản chưa có ink: 3,44 /
- * 2,69 / 3,57:1 ✗); 7,12 / 7,44 / 5,18:1 ở dark.
+ * 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%
+ * 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
+ * · red 5,83:1 ở light (bản chưa có ink: 3,44 / 2,69 / 3,57:1 ✗).
+ *
+ * ⚠ Ở 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ứ
+ * comitor-ds render. Bậc sáng cho nền tối nằm ở `highContrast.dark`.
  */
 declare const accentInk: {
     readonly light: {
@@ -103,10 +107,10 @@ declare const accentInk: {
     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. */
         readonly navy: "#7EA2E8";
-        readonly teal: "#2DD4BF";
-        readonly red: "#F87171";
-        readonly green: "#4ADE80";
-        readonly yellow: "#FACC15";
+        readonly teal: "#1F8A8B";
+        readonly red: "#D64545";
+        readonly green: "#2EA56A";
+        readonly yellow: "#F2C94C";
     };
 };
 /**
@@ -118,9 +122,10 @@ declare const accentInk: {
  * 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Ố Ý KHÔNG có `red`: nền `accent.light.red` #D64545 đặc không mang được chữ ở light — trắng
- * 4,38:1 ✗ và mực 4,32:1 ✗. Nền đỏ đặc có chữ phải dùng `status.*.destructive` (#C93B3B) cùng
- * `destructiveForeground` = 5,03:1 ✓. `accent.*.red` chỉ để tô TINT và làm màu chart.
+ * ⚠ 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.
  */
 declare const accentForeground: {
     readonly light: {
@@ -147,43 +152,54 @@ declare const semantic: {
         readonly popoverForeground: "#0E1116";
         readonly primary: "#E8B824";
         readonly primaryForeground: "#0E1116";
-        /** Bậc INK của brand — gold khi phải ĐI LÊN nền trang (rãnh Switch khi BẬT, ô Checkbox đã
-         *  chọn). `primary` #E8B824 chỉ 1,86:1 với nền trắng ✗; bậc này = `gold[500]` = 6,51:1 ✓. */
-        readonly primaryInk: "#7A5800";
+        /** Bậc INK của brand. Ở bảng MẶC ĐỊNH nó BẰNG `primary`: comitor-ds tô gold cho cả những vai
+         *  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
+         *  nhận. Bậc tối #7A5800 nằm ở `highContrast.light.primaryInk`. */
+        readonly primaryInk: "#E8B824";
         readonly secondary: "#EDE8D8";
         readonly secondaryForeground: "#0E1116";
         readonly muted: "#F7F7F8";
-        /** Bậc chữ phụ — là CHỮ nên ngưỡng AA 4,5:1: 5,23:1 trên nền trắng, 4,89:1 trên `muted`.
-         *  KHÔNG còn bằng `ash[500]` (#7E8290 chỉ 3,83:1 ✗) — bậc bảng màu và token semantic tách nhau. */
-        readonly mutedForeground: "#686C7A";
+        /** 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à
+         *  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 ở
+         *  `highContrast.light.mutedForeground`. */
+        readonly mutedForeground: "#7E8290";
         readonly accent: "#FBF5DC";
         readonly accentForeground: "#0E1116";
-        readonly destructive: "#C93B3B";
+        /** 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. */
+        readonly destructive: "#D64545";
         readonly destructiveForeground: "#FFFFFF";
-        /** Chữ báo lỗi trên nền trang — KHÁC `destructive` (nền) và `destructiveForeground` (chữ
-         *  trắng trên nền đó). 7,15:1 trên nền trắng. */
-        readonly destructiveInk: "#9A3537";
+        /** Nền nút xoá lúc HOVER = `destructive` ở 90% trên nền trắng, đúng thứ `hover:bg-red/90`
+         *  của comitor-ds render. Ghim hex vì `/90` phụ thuộc nền phía sau. */
+        readonly destructiveHover: "#DA5A5A";
+        /** 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
+         *  hex với nền — 4,38:1 trên nền trắng. */
+        readonly destructiveInk: "#D64545";
         /** RANH GIỚI TRANG TRÍ (vạch chia, viền thẻ nghỉ) — 1,16:1, cố ý: 1.4.11 không đòi tương
          *  phản cho thứ không mang thông tin. Ranh giới của CONTROL đi qua `controlEdge`. */
         readonly border: "#EDEEF1";
-        /** = `controlEdge`: viền ô nhập là ranh giới nhận dạng control (1.4.11) → 3,83:1 ✓. */
-        readonly input: "#7E8290";
+        /** 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. */
+        readonly input: "#EDEEF1";
         readonly ring: "#E8B824";
-        /** Ranh giới của control lúc NGHỈ (viền Input, ô Checkbox chưa chọn, rãnh Switch khi TẮT) —
-         *  WCAG 1.4.11, ràng buộc HAI PHÍA. Một giá trị cho cả hai theme: 3,83:1 với nền trắng và
-         *  3,83:1 với `controlKnob` (trắng ở light); 4,94:1 với nền dark và với knob #0E1116. */
-        readonly controlEdge: "#7E8290";
-        /** Cùng vai trò nhưng ở HOVER/ACTIVE — phải ĐẬM hơn lúc nghỉ. = `ash[700]`, 10,55:1 trên nền
-         *  trắng · 9,86:1 trên `muted`. */
-        readonly controlEdgeStrong: "#3A3F4A";
-        /** Nền control khi BẬT/ĐÃ CHỌN (rãnh Switch bật, ô Checkbox đã chọn, chấm Radio) = `primaryInk`.
-         *  Ràng buộc hai phía: 6,51:1 với nền trang VÀ 6,51:1 với `controlKnob` ở light. `primary`
-         *  #E8B824 chỉ 1,86:1 cả hai phía ✗. */
-        readonly controlOn: "#7A5800";
-        /** Núm Switch / dấu check / chấm Radio — mang màu NỀN TRANG nên luôn tương phản đúng chiều
-         *  với cả rãnh BẬT (6,51:1) lẫn rãnh TẮT (3,83:1). KHÔNG dùng `primaryForeground` (mực): mực
-         *  trên `controlOn` #7A5800 chỉ 1,86:1 ✗. */
+        /** Ranh giới của control lúc NGHỈ — ở bảng mặc định bằng đúng `input`. */
+        readonly controlEdge: "#EDEEF1";
+        /** Cùng vai trò nhưng ở HOVER/ACTIVE. comitor-ds dùng `hover:border-gray-300` = `ash[300]`. */
+        readonly controlEdgeStrong: "#C8CBD3";
+        /** Nền control khi BẬT/ĐÃ CHỌN (rãnh Switch bật, ô Checkbox đã chọn, chấm Radio). comitor-ds
+         *  tô gold: 1,86:1 với nền trang và với núm — đã biết và chấp nhận. */
+        readonly controlOn: "#E8B824";
+        /** Núm Switch / chấm Radio — TRẮNG ở cả hai theme, đúng `bg-white` của comitor-ds. */
         readonly controlKnob: "#FFFFFF";
+        /** DẤU CHECK của Checkbox và chữ trên ngày ĐANG CHỌN của Calendar — tách khỏi `controlKnob`
+         *  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à
+         *  gold-500 TỐI nên dấu lật thành màu nền trang. */
+        readonly controlCheck: "#0E1116";
+        /** Rãnh Switch khi TẮT — comitor-ds dùng `bg-gray-300` / `dark:bg-gray-700`. */
+        readonly switchTrack: "#C8CBD3";
+        /** Rãnh Slider — comitor-ds dùng `bg-muted`, khác bậc với rãnh Switch. */
+        readonly sliderTrack: "#F7F7F8";
+        /** Button variant `link`. comitor-ds dùng `gold[400]` — 3,15:1, dưới AA, đã biết và chấp nhận. */
+        readonly linkInk: "#B88A00";
+        readonly linkInkHover: "#E8B824";
         readonly sidebar: "#FAFAF9";
         readonly sidebarForeground: "#0E1116";
         readonly sidebarBorder: "#EDEEF1";
@@ -204,28 +220,36 @@ declare const semantic: {
         readonly secondary: "#1E2128";
         readonly secondaryForeground: "#F7F7F8";
         readonly muted: "#1E2128";
-        /** Sáng hơn bản light: chữ phụ ở dark hay nằm trên `card`/`muted`. 5,35:1 trên `card`,
-         *  4,86:1 trên `muted` (giá trị cũ #7E8290 chỉ 4,21:1 trên `muted` ✗). */
-        readonly mutedForeground: "#888D9B";
+        /** comitor-ds không khai lại token này ở dark — cùng hex với light. 4,21:1 trên `muted`,
+         *  dưới AA: đã biết và chấp nhận. */
+        readonly mutedForeground: "#7E8290";
         readonly accent: "#1E2128";
         readonly accentForeground: "#F7F7F8";
-        readonly destructive: "#C93B3B";
+        /** Ghim đúng giá trị của light — comitor-ds dùng chung một hex cho cả hai theme. */
+        readonly destructive: "#D64545";
         readonly destructiveForeground: "#FFFFFF";
-        /** 6,42:1 trên `card` — `destructive` dùng làm chữ ở dark chỉ được 3,53:1 ✗. */
-        readonly destructiveInk: "#F87171";
+        readonly destructiveHover: "#DA5A5A";
+        /** 4,06:1 trên `card` — cùng hex với nền, đúng `text-destructive` của comitor-ds. */
+        readonly destructiveInk: "#D64545";
         /** TRANG TRÍ, 1,17:1 trên `background` và 1,10:1 trên `card` — cố ý, xem nhánh light. */
         readonly border: "#1E2128";
-        /** = `controlEdge`, ghim một giá trị cho cả hai theme — 4,94:1 trên `background` ✓. */
-        readonly input: "#7E8290";
+        /** Viền ô nhập bản dark của comitor-ds — cùng bậc với `border`. */
+        readonly input: "#1E2128";
         readonly ring: "#F5D060";
-        /** Ghim đúng giá trị của light — xem chú thích ở nhánh light. */
-        readonly controlEdge: "#7E8290";
-        /** = `ash[300]` (lật chiều so với light): 11,65:1 trên `background` · 10,94:1 trên `card`. */
-        readonly controlEdgeStrong: "#C8CBD3";
-        /** = `primaryInk` của dark; 12,67:1 với nền trang VÀ với `controlKnob` (#0E1116). */
+        readonly controlEdge: "#1E2128";
+        /** comitor-ds dùng `dark:hover:border-gray-500` = `ash[500]` (lật chiều so với light). */
+        readonly controlEdgeStrong: "#7E8290";
+        /** comitor-ds tô `dark:data-[state=checked]:bg-gold-300`, nhưng token `primary` của chính nó
+         *  ở dark là #F5D060; gói theo token, nên control BẬT ở dark là bậc sáng. */
         readonly controlOn: "#F5D060";
-        /** = `background` của dark. Núm trắng cứng sẽ chỉ được 1,49:1 với rãnh BẬT ✗. */
-        readonly controlKnob: "#0E1116";
+        /** TRẮNG ở cả hai theme, đúng `bg-white` của comitor-ds. */
+        readonly controlKnob: "#FFFFFF";
+        /** comitor-ds vẽ dấu check bằng `text-ink` ở CẢ hai theme. */
+        readonly controlCheck: "#0E1116";
+        readonly switchTrack: "#3A3F4A";
+        readonly sliderTrack: "#1E2128";
+        readonly linkInk: "#B88A00";
+        readonly linkInkHover: "#E8B824";
         readonly sidebar: "#16181D";
         readonly sidebarForeground: "#F7F7F8";
         readonly sidebarBorder: "#1E2128";
@@ -233,14 +257,90 @@ declare const semantic: {
         readonly sidebarAccentForeground: "#F7F7F8";
     };
 };
+/**
+ * BẢNG MÀU THỨ HAI — TƯƠNG PHẢN CAO. Mirror khối `[data-contrast="high"]` /
+ * `.dark[data-contrast="high"]` trong styles.css.
+ *
+ * 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 đủ.
+ *
+ * ```ts
+ * const mau = { ...semantic.light, ...highContrast.light };
+ * ```
+ *
+ * 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).
+ * Bảng này là bảng đã đo, do NGƯỜI DÙNG bật qua `<ContrastProvider>` + `<ContrastToggle>`.
+ * `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`.
+ */
+declare const highContrast: {
+    readonly light: {
+        /** 5,23:1 trên `background` · 4,89:1 trên `muted` (bảng mặc định: 3,83 / 3,58) */
+        readonly mutedForeground: "#686C7A";
+        /** Chữ trắng trên nền này được 5,03:1 (bảng mặc định #D64545 chỉ 4,38:1) */
+        readonly destructive: "#C93B3B";
+        /** = color-mix(destructive, ink 15%) — ĐẬM thêm khi hover, ngược chiều bảng mặc định. */
+        readonly destructiveHover: "#AD3535";
+        /** 7,15:1 trên nền trắng (bảng mặc định dùng chính #D64545, 4,38:1) */
+        readonly destructiveInk: "#9A3537";
+        /** 3,83:1 trên nền trắng (bảng mặc định #EDEEF1 chỉ 1,16:1) */
+        readonly input: "#7E8290";
+        readonly controlEdge: "#7E8290";
+        readonly controlEdgeStrong: "#3A3F4A";
+        /** Rãnh ⇄ nền 6,51:1 và rãnh ⇄ núm 6,51:1 (bảng mặc định: 1,86 / 1,86) */
+        readonly controlOn: "#7A5800";
+        /** = `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. */
+        readonly controlKnob: "#FFFFFF";
+        readonly controlCheck: "#FFFFFF";
+        readonly switchTrack: "#7E8290";
+        readonly sliderTrack: "#7E8290";
+        readonly primaryInk: "#7A5800";
+        readonly linkInk: "#7A5800";
+        readonly linkInkHover: "#5C4006";
+        readonly accent: {
+            readonly navy: "#0F1E3D";
+            readonly teal: "#1F8A8B";
+            readonly red: "#D64545";
+            readonly green: "#2EA56A";
+            readonly yellow: "#F2C94C";
+        };
+    };
+    readonly dark: {
+        /** 5,70:1 trên `background` · 5,35:1 trên `card` · 4,86:1 trên `muted` */
+        readonly mutedForeground: "#888D9B";
+        readonly destructive: "#C93B3B";
+        readonly destructiveHover: "#AD3535";
+        readonly destructiveInk: "#F87171";
+        /** Ghim một giá trị cho cả hai theme — 4,94:1 trên `background` */
+        readonly input: "#7E8290";
+        readonly controlEdge: "#7E8290";
+        readonly controlEdgeStrong: "#C8CBD3";
+        /** 12,67:1 với nền trang VÀ với `controlKnob` (#0E1116) */
+        readonly controlOn: "#F5D060";
+        readonly controlKnob: "#0E1116";
+        readonly controlCheck: "#0E1116";
+        readonly switchTrack: "#7E8290";
+        readonly sliderTrack: "#7E8290";
+        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. */
+        readonly accent: {
+            readonly navy: "#0F1E3D";
+            readonly teal: "#2DD4BF";
+            readonly red: "#F87171";
+            readonly green: "#4ADE80";
+            readonly yellow: "#FACC15";
+        };
+    };
+};
 /**
  * Alias trạng thái — success/warning/info trỏ vào màu phụ, destructive giữ nguyên 2 chế độ.
  *
  * Ba lớp KHÁC nhau, đừng gộp:
- *   • `destructive` (#C93B3B) — màu NỀN (nút xoá), đủ đậm cho chữ trắng ở cả hai theme (5,03:1);
+ *   • `destructive` — màu NỀN (nút xoá): #D64545 ở bảng mặc định (chữ trắng 4,38:1, dưới AA và đã
+ *     chấp nhận), #C93B3B ở bảng tương phản cao (5,03:1 ✓);
  *   • `destructiveForeground` (#FFFFFF) — chữ NẰM TRÊN nền đó;
- *   • `destructiveInk` — màu CHỮ đỏ trên nền trang (dòng lỗi). Dùng nhầm `destructive` cho vai
- *     trò này thì ở dark chỉ được 3,53:1, dùng `accent.light.red` thì ở light chỉ 4,38:1.
+ *   • `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 (đúng `text-destructive` của comitor-ds); bảng tương phản cao tách thành bậc tối riêng.
  *
  * `successForeground` / `warningForeground` / `infoForeground` là MỰC ở CẢ hai theme (không phải
  * 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.
@@ -257,7 +357,7 @@ declare const status: {
         readonly warningForeground: "#0E1116";
         readonly info: "#1F8A8B";
         readonly infoForeground: "#0E1116";
-        readonly destructive: "#C93B3B";
+        readonly destructive: "#D64545";
         readonly destructiveForeground: "#FFFFFF";
         readonly successInk: "#216A48";
         readonly warningInk: "#7A5800";
@@ -265,24 +365,24 @@ declare const status: {
         readonly destructiveInk: "#9A3537";
     };
     readonly dark: {
-        readonly success: "#4ADE80";
+        readonly success: "#2EA56A";
         readonly successForeground: "#0E1116";
-        readonly warning: "#FACC15";
+        readonly warning: "#F2C94C";
         readonly warningForeground: "#0E1116";
-        readonly info: "#2DD4BF";
+        readonly info: "#1F8A8B";
         readonly infoForeground: "#0E1116";
-        readonly destructive: "#C93B3B";
+        readonly destructive: "#D64545";
         readonly destructiveForeground: "#FFFFFF";
-        readonly successInk: "#4ADE80";
-        readonly warningInk: "#FACC15";
-        readonly infoInk: "#2DD4BF";
-        readonly destructiveInk: "#F87171";
+        readonly successInk: "#2EA56A";
+        readonly warningInk: "#F2C94C";
+        readonly infoInk: "#1F8A8B";
+        readonly destructiveInk: "#D64545";
     };
 };
 /** Bảng màu biểu đồ (chart-1…chart-5). Thứ tự = thứ tự series mặc định. */
 declare const chart: {
     readonly light: readonly ["#E8B824", "#1F8A8B", "#0F1E3D", "#2EA56A", "#D64545"];
-    readonly dark: readonly ["#F5D060", "#2DD4BF", "#7EA2E8", "#4ADE80", "#F87171"];
+    readonly dark: readonly ["#F5D060", "#1F8A8B", "#7EA2E8", "#2EA56A", "#D64545"];
 };
 /**
  * Cặp nền/chữ (hex) của avatar cho một tên, theo theme.
@@ -318,4 +418,4 @@ declare const typography: {
 };
 type ThemeMode = "light" | "dark";
 
-export { AvatarToneColors, type ThemeMode, accent, accentForeground, accentInk, ash, brandNeutral, chart, getAvatarToneColors, gold, layout, semantic, status, typography };
+export { AvatarToneColors, type ThemeMode, accent, accentForeground, accentInk, ash, brandNeutral, chart, getAvatarToneColors, gold, highContrast, layout, semantic, status, typography };

package/dist/tokens.js

@@ -31,12 +31,14 @@ const accent = {
     green: "#2EA56A",
     yellow: "#F2C94C"
   },
+  /** 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`. */
   dark: {
     navy: "#0F1E3D",
-    teal: "#2DD4BF",
-    red: "#F87171",
-    green: "#4ADE80",
-    yellow: "#FACC15"
+    teal: "#1F8A8B",
+    red: "#D64545",
+    green: "#2EA56A",
+    yellow: "#F2C94C"
   }
 };
 const accentInk = {
@@ -81,43 +83,54 @@ const semantic = {
     popoverForeground: "#0E1116",
     primary: "#E8B824",
     primaryForeground: "#0E1116",
-    /** Bậc INK của brand — gold khi phải ĐI LÊN nền trang (rãnh Switch khi BẬT, ô Checkbox đã
-     *  chọn). `primary` #E8B824 chỉ 1,86:1 với nền trắng ✗; bậc này = `gold[500]` = 6,51:1 ✓. */
-    primaryInk: gold[500],
+    /** Bậc INK của brand. Ở bảng MẶC ĐỊNH nó BẰNG `primary`: comitor-ds tô gold cho cả những vai
+     *  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
+     *  nhận. Bậc tối #7A5800 nằm ở `highContrast.light.primaryInk`. */
+    primaryInk: "#E8B824",
     secondary: "#EDE8D8",
     secondaryForeground: "#0E1116",
     muted: "#F7F7F8",
-    /** Bậc chữ phụ — là CHỮ nên ngưỡng AA 4,5:1: 5,23:1 trên nền trắng, 4,89:1 trên `muted`.
-     *  KHÔNG còn bằng `ash[500]` (#7E8290 chỉ 3,83:1 ✗) — bậc bảng màu và token semantic tách nhau. */
-    mutedForeground: "#686C7A",
+    /** 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à
+     *  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 ở
+     *  `highContrast.light.mutedForeground`. */
+    mutedForeground: ash[500],
     accent: "#FBF5DC",
     accentForeground: "#0E1116",
-    destructive: "#C93B3B",
+    /** 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. */
+    destructive: "#D64545",
     destructiveForeground: "#FFFFFF",
-    /** Chữ báo lỗi trên nền trang — KHÁC `destructive` (nền) và `destructiveForeground` (chữ
-     *  trắng trên nền đó). 7,15:1 trên nền trắng. */
-    destructiveInk: accentInk.light.red,
+    /** Nền nút xoá lúc HOVER = `destructive` ở 90% trên nền trắng, đúng thứ `hover:bg-red/90`
+     *  của comitor-ds render. Ghim hex vì `/90` phụ thuộc nền phía sau. */
+    destructiveHover: "#DA5A5A",
+    /** 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
+     *  hex với nền — 4,38:1 trên nền trắng. */
+    destructiveInk: "#D64545",
     /** RANH GIỚI TRANG TRÍ (vạch chia, viền thẻ nghỉ) — 1,16:1, cố ý: 1.4.11 không đòi tương
      *  phản cho thứ không mang thông tin. Ranh giới của CONTROL đi qua `controlEdge`. */
     border: "#EDEEF1",
-    /** = `controlEdge`: viền ô nhập là ranh giới nhận dạng control (1.4.11) → 3,83:1 ✓. */
-    input: "#7E8290",
+    /** 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. */
+    input: "#EDEEF1",
     ring: "#E8B824",
-    /** Ranh giới của control lúc NGHỈ (viền Input, ô Checkbox chưa chọn, rãnh Switch khi TẮT) —
-     *  WCAG 1.4.11, ràng buộc HAI PHÍA. Một giá trị cho cả hai theme: 3,83:1 với nền trắng và
-     *  3,83:1 với `controlKnob` (trắng ở light); 4,94:1 với nền dark và với knob #0E1116. */
-    controlEdge: "#7E8290",
-    /** Cùng vai trò nhưng ở HOVER/ACTIVE — phải ĐẬM hơn lúc nghỉ. = `ash[700]`, 10,55:1 trên nền
-     *  trắng · 9,86:1 trên `muted`. */
-    controlEdgeStrong: ash[700],
-    /** Nền control khi BẬT/ĐÃ CHỌN (rãnh Switch bật, ô Checkbox đã chọn, chấm Radio) = `primaryInk`.
-     *  Ràng buộc hai phía: 6,51:1 với nền trang VÀ 6,51:1 với `controlKnob` ở light. `primary`
-     *  #E8B824 chỉ 1,86:1 cả hai phía ✗. */
-    controlOn: gold[500],
-    /** Núm Switch / dấu check / chấm Radio — mang màu NỀN TRANG nên luôn tương phản đúng chiều
-     *  với cả rãnh BẬT (6,51:1) lẫn rãnh TẮT (3,83:1). KHÔNG dùng `primaryForeground` (mực): mực
-     *  trên `controlOn` #7A5800 chỉ 1,86:1 ✗. */
+    /** Ranh giới của control lúc NGHỈ — ở bảng mặc định bằng đúng `input`. */
+    controlEdge: "#EDEEF1",
+    /** Cùng vai trò nhưng ở HOVER/ACTIVE. comitor-ds dùng `hover:border-gray-300` = `ash[300]`. */
+    controlEdgeStrong: ash[300],
+    /** Nền control khi BẬT/ĐÃ CHỌN (rãnh Switch bật, ô Checkbox đã chọn, chấm Radio). comitor-ds
+     *  tô gold: 1,86:1 với nền trang và với núm — đã biết và chấp nhận. */
+    controlOn: "#E8B824",
+    /** Núm Switch / chấm Radio — TRẮNG ở cả hai theme, đúng `bg-white` của comitor-ds. */
     controlKnob: "#FFFFFF",
+    /** DẤU CHECK của Checkbox và chữ trên ngày ĐANG CHỌN của Calendar — tách khỏi `controlKnob`
+     *  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à
+     *  gold-500 TỐI nên dấu lật thành màu nền trang. */
+    controlCheck: brandNeutral.ink,
+    /** Rãnh Switch khi TẮT — comitor-ds dùng `bg-gray-300` / `dark:bg-gray-700`. */
+    switchTrack: ash[300],
+    /** Rãnh Slider — comitor-ds dùng `bg-muted`, khác bậc với rãnh Switch. */
+    sliderTrack: "#F7F7F8",
+    /** Button variant `link`. comitor-ds dùng `gold[400]` — 3,15:1, dưới AA, đã biết và chấp nhận. */
+    linkInk: gold[400],
+    linkInkHover: gold[300],
     sidebar: "#FAFAF9",
     sidebarForeground: "#0E1116",
     sidebarBorder: "#EDEEF1",
@@ -138,28 +151,36 @@ const semantic = {
     secondary: "#1E2128",
     secondaryForeground: "#F7F7F8",
     muted: "#1E2128",
-    /** Sáng hơn bản light: chữ phụ ở dark hay nằm trên `card`/`muted`. 5,35:1 trên `card`,
-     *  4,86:1 trên `muted` (giá trị cũ #7E8290 chỉ 4,21:1 trên `muted` ✗). */
-    mutedForeground: "#888D9B",
+    /** comitor-ds không khai lại token này ở dark — cùng hex với light. 4,21:1 trên `muted`,
+     *  dưới AA: đã biết và chấp nhận. */
+    mutedForeground: ash[500],
     accent: "#1E2128",
     accentForeground: "#F7F7F8",
-    destructive: "#C93B3B",
+    /** Ghim đúng giá trị của light — comitor-ds dùng chung một hex cho cả hai theme. */
+    destructive: "#D64545",
     destructiveForeground: "#FFFFFF",
-    /** 6,42:1 trên `card` — `destructive` dùng làm chữ ở dark chỉ được 3,53:1 ✗. */
-    destructiveInk: accentInk.dark.red,
+    destructiveHover: "#DA5A5A",
+    /** 4,06:1 trên `card` — cùng hex với nền, đúng `text-destructive` của comitor-ds. */
+    destructiveInk: "#D64545",
     /** TRANG TRÍ, 1,17:1 trên `background` và 1,10:1 trên `card` — cố ý, xem nhánh light. */
     border: "#1E2128",
-    /** = `controlEdge`, ghim một giá trị cho cả hai theme — 4,94:1 trên `background` ✓. */
-    input: "#7E8290",
+    /** Viền ô nhập bản dark của comitor-ds — cùng bậc với `border`. */
+    input: "#1E2128",
     ring: "#F5D060",
-    /** Ghim đúng giá trị của light — xem chú thích ở nhánh light. */
-    controlEdge: "#7E8290",
-    /** = `ash[300]` (lật chiều so với light): 11,65:1 trên `background` · 10,94:1 trên `card`. */
-    controlEdgeStrong: ash[300],
-    /** = `primaryInk` của dark; 12,67:1 với nền trang VÀ với `controlKnob` (#0E1116). */
+    controlEdge: "#1E2128",
+    /** comitor-ds dùng `dark:hover:border-gray-500` = `ash[500]` (lật chiều so với light). */
+    controlEdgeStrong: ash[500],
+    /** comitor-ds tô `dark:data-[state=checked]:bg-gold-300`, nhưng token `primary` của chính nó
+     *  ở dark là #F5D060; gói theo token, nên control BẬT ở dark là bậc sáng. */
     controlOn: "#F5D060",
-    /** = `background` của dark. Núm trắng cứng sẽ chỉ được 1,49:1 với rãnh BẬT ✗. */
-    controlKnob: "#0E1116",
+    /** TRẮNG ở cả hai theme, đúng `bg-white` của comitor-ds. */
+    controlKnob: "#FFFFFF",
+    /** comitor-ds vẽ dấu check bằng `text-ink` ở CẢ hai theme. */
+    controlCheck: brandNeutral.ink,
+    switchTrack: ash[700],
+    sliderTrack: "#1E2128",
+    linkInk: gold[400],
+    linkInkHover: gold[300],
     sidebar: "#16181D",
     sidebarForeground: "#F7F7F8",
     sidebarBorder: "#1E2128",
@@ -167,6 +188,61 @@ const semantic = {
     sidebarAccentForeground: "#F7F7F8"
   }
 };
+const highContrast = {
+  light: {
+    /** 5,23:1 trên `background` · 4,89:1 trên `muted` (bảng mặc định: 3,83 / 3,58) */
+    mutedForeground: "#686C7A",
+    /** Chữ trắng trên nền này được 5,03:1 (bảng mặc định #D64545 chỉ 4,38:1) */
+    destructive: "#C93B3B",
+    /** = color-mix(destructive, ink 15%) — ĐẬM thêm khi hover, ngược chiều bảng mặc định. */
+    destructiveHover: "#AD3535",
+    /** 7,15:1 trên nền trắng (bảng mặc định dùng chính #D64545, 4,38:1) */
+    destructiveInk: accentInk.light.red,
+    /** 3,83:1 trên nền trắng (bảng mặc định #EDEEF1 chỉ 1,16:1) */
+    input: "#7E8290",
+    controlEdge: "#7E8290",
+    controlEdgeStrong: ash[700],
+    /** Rãnh ⇄ nền 6,51:1 và rãnh ⇄ núm 6,51:1 (bảng mặc định: 1,86 / 1,86) */
+    controlOn: gold[500],
+    /** = `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. */
+    controlKnob: "#FFFFFF",
+    controlCheck: "#FFFFFF",
+    switchTrack: "#7E8290",
+    sliderTrack: "#7E8290",
+    primaryInk: gold[500],
+    linkInk: gold[500],
+    linkInkHover: gold[600],
+    accent: accent.light
+  },
+  dark: {
+    /** 5,70:1 trên `background` · 5,35:1 trên `card` · 4,86:1 trên `muted` */
+    mutedForeground: "#888D9B",
+    destructive: "#C93B3B",
+    destructiveHover: "#AD3535",
+    destructiveInk: "#F87171",
+    /** Ghim một giá trị cho cả hai theme — 4,94:1 trên `background` */
+    input: "#7E8290",
+    controlEdge: "#7E8290",
+    controlEdgeStrong: ash[300],
+    /** 12,67:1 với nền trang VÀ với `controlKnob` (#0E1116) */
+    controlOn: "#F5D060",
+    controlKnob: "#0E1116",
+    controlCheck: "#0E1116",
+    switchTrack: "#7E8290",
+    sliderTrack: "#7E8290",
+    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. */
+    accent: {
+      navy: "#0F1E3D",
+      teal: "#2DD4BF",
+      red: "#F87171",
+      green: "#4ADE80",
+      yellow: "#FACC15"
+    }
+  }
+};
 const status = {
   light: {
     success: accent.light.green,
@@ -175,7 +251,7 @@ const status = {
     warningForeground: "#0E1116",
     info: accent.light.teal,
     infoForeground: "#0E1116",
-    destructive: "#C93B3B",
+    destructive: "#D64545",
     destructiveForeground: "#FFFFFF",
     successInk: accentInk.light.green,
     warningInk: accentInk.light.yellow,
@@ -189,7 +265,7 @@ const status = {
     warningForeground: "#0E1116",
     info: accent.dark.teal,
     infoForeground: "#0E1116",
-    destructive: "#C93B3B",
+    destructive: "#D64545",
     destructiveForeground: "#FFFFFF",
     successInk: accentInk.dark.green,
     warningInk: accentInk.dark.yellow,
@@ -250,6 +326,7 @@ export {
   getAvatarToneColors,
   getAvatarToneIndex,
   gold,
+  highContrast,
   layout,
   semantic,
   status,