@comitor/ui 0.6.1 → 0.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6,40 +6,44 @@ const SIZE_MAP = {
|
|
|
6
6
|
icon: "w-9 h-9",
|
|
7
7
|
// 36px — vừa header cao 56px
|
|
8
8
|
gap: "gap-2.5",
|
|
9
|
+
// 10px · 0.278 × icon
|
|
9
10
|
wordmark: "text-sm",
|
|
10
|
-
// 14px
|
|
11
|
+
// 14px · 0.389 × icon
|
|
11
12
|
slogan: "text-[6px] tracking-[0.12em]",
|
|
12
|
-
//
|
|
13
|
+
// 6px — ngưỡng sàn đọc được, xem chú thích trên
|
|
13
14
|
ruleMargin: "my-0.5"
|
|
14
15
|
},
|
|
15
16
|
sm: {
|
|
16
17
|
icon: "w-12 h-12",
|
|
17
18
|
// 48px
|
|
18
|
-
gap: "gap-3",
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
gap: "gap-3.5",
|
|
20
|
+
// 14px · 0.292 × icon
|
|
21
|
+
wordmark: "text-xl",
|
|
22
|
+
// 20px · 0.417 × icon
|
|
23
|
+
slogan: "text-[7px] tracking-[0.10em]",
|
|
24
|
+
// 7px — slogan/wordmark = 0.897
|
|
23
25
|
ruleMargin: "my-1"
|
|
24
26
|
},
|
|
25
27
|
md: {
|
|
26
28
|
icon: "w-20 h-20",
|
|
27
29
|
// 80px
|
|
28
|
-
gap: "gap-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
gap: "gap-5.5",
|
|
31
|
+
// 22px · 0.275 × icon
|
|
32
|
+
wordmark: "text-3xl",
|
|
33
|
+
// 30px · 0.375 × icon
|
|
34
|
+
slogan: "text-[10px] tracking-[0.10em]",
|
|
35
|
+
// 10px — slogan/wordmark = 0.854
|
|
33
36
|
ruleMargin: "my-1.5"
|
|
34
37
|
},
|
|
35
38
|
lg: {
|
|
36
39
|
icon: "w-32 h-32",
|
|
37
40
|
// 128px
|
|
38
|
-
gap: "gap-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
41
|
+
gap: "gap-9",
|
|
42
|
+
// 36px · 0.281 × icon
|
|
43
|
+
wordmark: "text-5xl",
|
|
44
|
+
// 48px · 0.375 × icon
|
|
45
|
+
slogan: "text-[14px] tracking-[0.12em]",
|
|
46
|
+
// 14px — slogan/wordmark = 0.767
|
|
43
47
|
ruleMargin: "my-2"
|
|
44
48
|
}
|
|
45
49
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/shell/comitor-lockup.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { cn } from \"../lib/cn.js\";\nimport { ComitorLogo } from \"./comitor-logo.js\";\n\n/**\n * Lockup ngang chính thức của Comitor — icon bên trái, wordmark + gạch vàng + slogan bên phải.\n * Giữ đúng tỉ lệ hình học của brand book để mọi bề mặt sản phẩm dùng chung một bố cục.\n *\n * <ComitorLockup variant=\"auto\" size=\"xs\" slogan=\"Tasks\" />\n *\n * • `variant` — light (nền trắng/kem), dark (nền mực/ấm), auto (tự đổi theo theme).\n * • `size` — xs | sm | md | lg: đổi cỡ icon và cỡ chữ cùng lúc.\n * • `wordmark` / `slogan` — đổi chữ khi cần cặp ngôn ngữ khác\n * (vd \"COMITOR TASKS\", \"THIỆN MINH / CÙNG NHAU TIẾN XA\").\n *\n * Không có \"use client\": thuần trình bày, RSC render được.\n */\nexport type ComitorLockupVariant = \"light\" | \"dark\" | \"auto\";\nexport type ComitorLockupSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\nexport interface ComitorLockupProps {\n className?: string;\n variant?: ComitorLockupVariant;\n size?: ComitorLockupSize;\n wordmark?: string;\n slogan?: string;\n /** Class Tailwind GHI ĐÈ style slogan của preset cỡ chữ. Dùng khi cần căn bề rộng\n * slogan tuỳ biến cho khớp wordmark — vd header truyền cỡ nhỉnh hơn + tracking chặt\n * hơn để \"DESIGN SYSTEM\" rộng đúng bằng chữ \"COMITOR\". */\n sloganClassName?: string;\n style?: CSSProperties;\n}\n\n
|
|
1
|
+
{"version":3,"sources":["../../src/shell/comitor-lockup.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { cn } from \"../lib/cn.js\";\nimport { ComitorLogo } from \"./comitor-logo.js\";\n\n/**\n * Lockup ngang chính thức của Comitor — icon bên trái, wordmark + gạch vàng + slogan bên phải.\n * Giữ đúng tỉ lệ hình học của brand book để mọi bề mặt sản phẩm dùng chung một bố cục.\n *\n * <ComitorLockup variant=\"auto\" size=\"xs\" slogan=\"Tasks\" />\n *\n * • `variant` — light (nền trắng/kem), dark (nền mực/ấm), auto (tự đổi theo theme).\n * • `size` — xs | sm | md | lg: đổi cỡ icon và cỡ chữ cùng lúc.\n * • `wordmark` / `slogan` — đổi chữ khi cần cặp ngôn ngữ khác\n * (vd \"COMITOR TASKS\", \"THIỆN MINH / CÙNG NHAU TIẾN XA\").\n *\n * Không có \"use client\": thuần trình bày, RSC render được.\n */\nexport type ComitorLockupVariant = \"light\" | \"dark\" | \"auto\";\nexport type ComitorLockupSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\nexport interface ComitorLockupProps {\n className?: string;\n variant?: ComitorLockupVariant;\n size?: ComitorLockupSize;\n wordmark?: string;\n slogan?: string;\n /** Class Tailwind GHI ĐÈ style slogan của preset cỡ chữ. Dùng khi cần căn bề rộng\n * slogan tuỳ biến cho khớp wordmark — vd header truyền cỡ nhỉnh hơn + tracking chặt\n * hơn để \"DESIGN SYSTEM\" rộng đúng bằng chữ \"COMITOR\". */\n sloganClassName?: string;\n style?: CSSProperties;\n}\n\n/*\n * ─ RÀNG BUỘC HÌNH HỌC, ĐO ĐƯỢC CHỨ KHÔNG PHẢI ƯỚC LƯỢNG ─\n *\n * Bố cục là một cột: wordmark trên, vạch vàng giữa, slogan dưới. Cột đó là `flex-col`, nên\n * **bề rộng vạch vàng = bề rộng của phần tử RỘNG NHẤT**. Từ đó ra ràng buộc số 1:\n *\n * bề rộng GLYPH của slogan ≤ bề rộng GLYPH của wordmark\n *\n * Vi phạm nó thì slogan mới là thứ kéo dài vạch, còn wordmark hụt vào trong — nhìn ra ngay là\n * \"chữ COMITOR bị nhỏ\", dù cỡ chữ chẳng liên quan gì tới nguyên nhân. Brand book giữ đúng ràng\n * buộc này: `comitor-horizontal-light.svg` vẽ vạch từ x=450 đến x=803.2, bằng chính bề rộng\n * \"COMITOR\" 72px.\n *\n * Bảng CŨ vi phạm ở CẢ BỐN cỡ với slogan mặc định \"Together Further\" (đo bằng Inter, chính font\n * của hệ; tỉ lệ = bề rộng slogan / bề rộng wordmark):\n *\n * xs 73,4 / 65,1 = 1,127 ✗ sm 85,6 / 74,4 = 1,151 ✗\n * md 122,3 / 111,6 = 1,096 ✗ lg 175,7 / 167,4 = 1,050 ✗\n *\n * Lý do kín: wordmark có 7 ký tự còn slogan có 16, nên slogan cần cỡ chữ NHỎ HƠN NHIỀU mới cân\n * được bề rộng — brand book để 25,64/72 = 0,356, bảng cũ để 0,42–0,44. Lỗi chỉ lộ ra khi slogan\n * là chuỗi mặc định DÀI; mọi chỗ dùng `xs` trong hệ đều truyền slogan NGẮN theo tên app\n * (\"Tài khoản\" 39,7px · \"Design System\" 58,6px) nên đều lọt, và không ai thấy gì suốt nhiều bản.\n *\n * Ràng buộc số 2 — bảng phải là một thang TỈ LỆ. Bảng cũ không phải: wordmark/icon tụt dần\n * 0,389 → 0,333 → 0,300 → 0,281 (chênh 38% giữa hai đầu), tức đổi `size` là đổi luôn BỐ CỤC chứ\n * không chỉ đổi cỡ. Bảng mới giữ 0,375–0,417, và gap theo icon ở mức ~0,28 đúng như brand book\n * (80/280 = 0,286).\n *\n * Số của bảng MỚI (đo cùng cách):\n *\n * sm 83,4 / 93,0 = 0,897 ✓ md 119,1 / 139,5 = 0,854 ✓ lg 171,2 / 223,2 = 0,767 ✓\n *\n * ⚠ `xs` CỐ Ý GIỮ NGUYÊN, và vẫn là cỡ duy nhất không thoả ràng buộc 1 với slogan mặc định.\n * Chữa được thì phải hoặc kéo slogan xuống ~5px (dưới ngưỡng đọc được), hoặc đẩy wordmark lên\n * 16px trên một icon 36px (wordmark/icon = 0,44 — chữ lấn át dấu hiệu). Cả hai đều tệ hơn cái\n * đang có, mà `xs` là cỡ dành cho header/thanh bên nơi slogan LUÔN là tên app viết ngắn. Ghi ra\n * đây để lần sau không ai \"sửa\" nó rồi làm hỏng lockup ở header.\n */\nconst SIZE_MAP: Record<\n ComitorLockupSize,\n { icon: string; gap: string; wordmark: string; slogan: string; ruleMargin: string }\n> = {\n xs: {\n icon: \"w-9 h-9\", // 36px — vừa header cao 56px\n gap: \"gap-2.5\", // 10px · 0.278 × icon\n wordmark: \"text-sm\", // 14px · 0.389 × icon\n slogan: \"text-[6px] tracking-[0.12em]\", // 6px — ngưỡng sàn đọc được, xem chú thích trên\n ruleMargin: \"my-0.5\"\n },\n sm: {\n icon: \"w-12 h-12\", // 48px\n gap: \"gap-3.5\", // 14px · 0.292 × icon\n wordmark: \"text-xl\", // 20px · 0.417 × icon\n slogan: \"text-[7px] tracking-[0.10em]\", // 7px — slogan/wordmark = 0.897\n ruleMargin: \"my-1\"\n },\n md: {\n icon: \"w-20 h-20\", // 80px\n gap: \"gap-5.5\", // 22px · 0.275 × icon\n wordmark: \"text-3xl\", // 30px · 0.375 × icon\n slogan: \"text-[10px] tracking-[0.10em]\", // 10px — slogan/wordmark = 0.854\n ruleMargin: \"my-1.5\"\n },\n lg: {\n icon: \"w-32 h-32\", // 128px\n gap: \"gap-9\", // 36px · 0.281 × icon\n wordmark: \"text-5xl\", // 48px · 0.375 × icon\n slogan: \"text-[14px] tracking-[0.12em]\", // 14px — slogan/wordmark = 0.767\n ruleMargin: \"my-2\"\n }\n};\n\nexport function ComitorLockup({\n className,\n variant = \"light\",\n size = \"md\",\n wordmark = \"COMITOR\",\n slogan = \"Together Further\",\n sloganClassName,\n style\n}: ComitorLockupProps) {\n const s = SIZE_MAP[size];\n const dark = variant === \"dark\";\n const auto = variant === \"auto\";\n\n return (\n <div\n className={cn(\"flex items-center\", s.gap, className)}\n style={style}\n role=\"img\"\n aria-label={`${wordmark} — ${slogan}`}\n >\n {/* Ba biến thể đi thẳng xuống `ComitorLogo` — từ 0.6.1 chính nó biết `auto`, nên không còn\n bản sao của cặp `dark:hidden` / `hidden dark:block` ở đây. */}\n <ComitorLogo variant={variant} className={cn(\"shrink-0\", s.icon)} />\n <div className=\"flex flex-col\">\n <span\n className={cn(\n \"font-extrabold tracking-tight\",\n s.wordmark,\n // `leading-none` PHẢI đứng SAU `s.wordmark`, không được gộp vào chuỗi đầu.\n // `cn()` chạy qua tailwind-merge, mà ở đó một utility CỠ CHỮ (`text-base`, `text-2xl`…)\n // xung đột với nhóm `leading` và XOÁ mọi `leading-*` đứng TRƯỚC nó — Tailwind coi\n // `text-<size>` là cặp cỡ-chữ + chiều-cao-dòng. Viết `cn(\"… leading-none\", s.wordmark)`\n // thì `leading-none` bị cắt sạch, wordmark rơi về line-height mặc định (24px ở cỡ `sm`\n // thay vì 16px): khối chữ cao thêm 8px, vạch vàng và slogan tụt xuống, lockup không\n // còn khớp tỉ lệ brand book. Không có lỗi biên dịch nào — chỉ đo mới thấy.\n \"leading-none\",\n auto ? \"text-ink dark:text-white\" : dark ? \"text-white\" : \"text-ink\"\n )}\n >\n {wordmark}\n </span>\n <span\n className={cn(\n \"h-px opacity-55\",\n s.ruleMargin,\n auto ? \"bg-gold-400 dark:bg-gold-200\" : dark ? \"bg-gold-200\" : \"bg-gold-400\"\n )}\n aria-hidden=\"true\"\n />\n <span\n className={cn(\n \"font-semibold uppercase\",\n sloganClassName ?? s.slogan,\n auto ? \"text-gold-500 dark:text-gold-200\" : dark ? \"text-gold-200\" : \"text-gold-500\"\n )}\n >\n {slogan}\n </span>\n </div>\n </div>\n );\n}\n"],"mappings":"AAgIM,cACA,YADA;AA/HN,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAsE5B,MAAM,WAGF;AAAA,EACF,IAAI;AAAA,IACF,MAAM;AAAA;AAAA,IACN,KAAK;AAAA;AAAA,IACL,UAAU;AAAA;AAAA,IACV,QAAQ;AAAA;AAAA,IACR,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,MAAM;AAAA;AAAA,IACN,KAAK;AAAA;AAAA,IACL,UAAU;AAAA;AAAA,IACV,QAAQ;AAAA;AAAA,IACR,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,MAAM;AAAA;AAAA,IACN,KAAK;AAAA;AAAA,IACL,UAAU;AAAA;AAAA,IACV,QAAQ;AAAA;AAAA,IACR,YAAY;AAAA,EACd;AAAA,EACA,IAAI;AAAA,IACF,MAAM;AAAA;AAAA,IACN,KAAK;AAAA;AAAA,IACL,UAAU;AAAA;AAAA,IACV,QAAQ;AAAA;AAAA,IACR,YAAY;AAAA,EACd;AACF;AAEO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,WAAW;AAAA,EACX,SAAS;AAAA,EACT;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,IAAI,SAAS,IAAI;AACvB,QAAM,OAAO,YAAY;AACzB,QAAM,OAAO,YAAY;AAEzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,qBAAqB,EAAE,KAAK,SAAS;AAAA,MACnD;AAAA,MACA,MAAK;AAAA,MACL,cAAY,GAAG,QAAQ,WAAM,MAAM;AAAA,MAInC;AAAA,4BAAC,eAAY,SAAkB,WAAW,GAAG,YAAY,EAAE,IAAI,GAAG;AAAA,QAClE,qBAAC,SAAI,WAAU,iBACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAQF;AAAA,gBACA,OAAO,6BAA6B,OAAO,eAAe;AAAA,cAC5D;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,EAAE;AAAA,gBACF,OAAO,iCAAiC,OAAO,gBAAgB;AAAA,cACjE;AAAA,cACA,eAAY;AAAA;AAAA,UACd;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,mBAAmB,EAAE;AAAA,gBACrB,OAAO,qCAAqC,OAAO,kBAAkB;AAAA,cACvE;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
package/package.json
CHANGED