@suphark/ui 0.6.0 → 0.6.1

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.6.1] — 2026-09-20
+
+### Added
+
+- **`npx suphark-ui-audit`** (`bin` ของแพ็กเกจ, `scripts/audit.mjs`) — ตรวจโค้ดแอปปลายทางตามกติกา design system ในคำสั่งเดียว: error = `window-dialog` (window.confirm/alert/prompt), `radix-state` (`data-[state=…]` ที่ Base UI ไม่มี), `arbitrary-text` (`text-[Npx]`), `base-ui-props` (สคริปต์เดิม); warning = `raw-palette` (bg-red-500 …), `important` (utility ลงท้าย `!` — เฉพาะ `--important` สำหรับโค้ดแพ็กเกจ); `--strict` ให้ warning เป็น error; ยกเว้น `// ui-audit-ok: เหตุผล` / `/* ui-audit-ok-file: เหตุผล */`; ข้าม `components/ui/**`, tests, generated; README + `docs/agent-rules.md` มีวิธีใช้ — repo นี้รัน `pnpm audit:ui` ใน `verify` และ CI (0 error 0 warning)
+- `FormFieldRadioCards`: prop `aria-label` ส่งต่อไป RadioGroup เมื่อไม่แสดง `label` (ข้อสังเกตจาก Pi Auth หลังย้ายมาใช้ — ของเดิมมี aria-label)
+
+### Changed
+
+- ล้าง raw palette ในแพ็กเกจเป็น semantic token: labs badge ใน `AppNav` → `text-warning-muted-foreground`, `FloatingSaveButton` สำเร็จ → `bg-success`, `FormMessage` สำเร็จ → `text-success`, ดอกจัน/ข้อความ error ใน `FormField*` → `text-destructive`, ไอคอน `ThemeToggle` → `text-warning`/`text-primary`/`text-muted-foreground`, ตัวอย่างใน design-system; ที่ยังใช้ palette โดยตั้งใจและจดไว้ (`ui-audit-ok-file`): `Notice`/`StatusBadge` (โทน 50/900 คู่ dark — รอตัดสินใจ token ระดับ tone), `lib/status-colors.ts` (ชุดสีให้ผู้ใช้เลือก)
+
 ## [0.6.0] — 2026-09-20
 
 component สำเร็จรูปสำหรับฟอร์ม server action ที่ Pi Auth ประกอบเองอยู่ (DueBell/Mail/Files ใช้ได้เหมือนกัน) — ไม่เปลี่ยน API เดิม; **รวม 0.5.2 ที่ยังไม่ได้ publish**

package/README.md

@@ -182,6 +182,26 @@ webview/automation บางตัวปิด `window.confirm` ทิ้ง (
 
 `createKanbanCollisionDetection({ columnItems, resolveColumnId })` (จาก `@suphark/ui/kanban`) ใช้เป็น `collisionDetection` ของ `DndContext` เมื่อมีหลายคอลัมน์ (SortableContext ต่อคอลัมน์) — ตัวอย่างบอร์ดเต็มที่ ui.suphark.com/components/kanban-board; wrapper ของการ์ด**ห้าม** `overflow-hidden` (dnd-kit ใส่ transform ที่ node ที่ `setNodeRef` ถ้าถูกครอบด้วย overflow-hidden การ์ดที่ขยับหลบจะถูก clip)
 
+### ตรวจกติกาในแอป — `npx suphark-ui-audit`
+
+แพ็กเกจมี `bin` ให้รันในแอปปลายทาง (ตรวจ `src` ค่าเริ่มต้น; ข้าม `components/ui/**`, tests, generated):
+
+```bash
+npx suphark-ui-audit            # หรือใส่ใน package.json: "audit:ui": "suphark-ui-audit src"
+npx suphark-ui-audit --strict   # warning นับเป็น error (ใช้ใน CI เมื่อล้างหมดแล้ว)
+```
+
+| กฎ | ระดับ | เจอ → ใช้แทน |
+| --- | --- | --- |
+| `window-dialog` | error | `window.confirm/alert/prompt(` → `ConfirmDialog` / `useConfirm()` / `useDialogs()` |
+| `radix-state` | error | `data-[state=open\|checked\|active…]` → `data-open` / `data-checked` / `data-active` / `data-popup-open` (Base UI ไม่มี data-state) |
+| `arbitrary-text` | error | `text-[Npx]` → `text-xs … text-3xl` |
+| `base-ui-props` | error | `default*` ที่ค่าเปลี่ยนได้ / `onSelect` บนเมนู (ดู `scripts/audit-base-ui-props.mjs`) |
+| `raw-palette` | warning | `bg-red-500`, `text-slate-600` … → `bg-destructive`, `text-muted-foreground`, `bg-success`, `bg-warning`, `text-primary` |
+| `important` | warning (เฉพาะ `--important`) | utility ลงท้าย `!` ในโค้ดแพ็กเกจ |
+
+ยกเว้นรายบรรทัด `// ui-audit-ok: <เหตุผล>` (บรรทัดเดียวกันหรือบรรทัดก่อน) — ยกเว้นทั้งไฟล์ `/* ui-audit-ok-file: <เหตุผล> */`
+
 ### สิทธิ์ (ActionButton/LinkButton `permission` prop)
 
 แพ็กเกจไม่รู้จักระบบสิทธิ์ของแอป — ครอบด้วย `UiPermissionProvider` แล้วส่งฟังก์ชัน `check(requirement, options)` ของแอปเข้ามา ถ้าไม่ครอบ = อนุญาตทุกอย่าง

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "private": false,
   "type": "module",
   "description": "Design system กลางของ Suphark apps: shadcn/ui (base-nova, Base UI, Tailwind v4) + shared components + token/ฟอนต์ Noto Sans Thai Looped — ส่งเป็น source ให้แอป Next transpile เอง",
@@ -22,6 +22,9 @@
   "sideEffects": [
     "*.css"
   ],
+  "bin": {
+    "suphark-ui-audit": "scripts/audit.mjs"
+  },
   "files": [
     "src",
     "!src/**/__tests__",
@@ -116,6 +119,7 @@
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
+    "audit": "node scripts/audit.mjs src --important",
     "test": "vitest run",
     "test:watch": "vitest",
     "lint:base-ui": "node scripts/audit-base-ui-props.mjs",

package/scripts/audit.mjs

@@ -0,0 +1,218 @@
+#!/usr/bin/env node
+/**
+ * suphark-ui-audit — ตรวจโค้ดแอปปลายทางตามกติกา design system (docs/agent-rules.md) ในคำสั่งเดียว
+ *
+ *   npx suphark-ui-audit                 # ตรวจ src (ค่าเริ่มต้น)
+ *   npx suphark-ui-audit src apps/web    # หลายโฟลเดอร์
+ *   npx suphark-ui-audit --strict        # warning นับเป็น error ด้วย (ใช้ใน CI เมื่อล้างหมดแล้ว)
+ *   npx suphark-ui-audit --no-palette    # ปิดกฎ raw palette ชั่วคราว
+ *   npx suphark-ui-audit --important     # เปิดกฎ utility ลงท้าย ! (ค่าเริ่มต้นตรวจเฉพาะโค้ดของแพ็กเกจเอง)
+ *
+ * กฎ (error = พังบน Base UI / ผิดกติกาชัดเจน, warning = ควรแก้แต่ไม่บล็อก):
+ *   window-dialog   error    window.confirm/alert/prompt → ConfirmDialog / useConfirm() / useDialogs()
+ *   radix-state     error    data-[state=open|checked|active|…] ไม่มีบน Base UI → data-open / data-checked / data-active / data-popup-open
+ *   arbitrary-text  error    text-[Npx] → ใช้ scale (text-xs … text-3xl)
+ *   important       warning  utility ที่ลงท้าย ! (size-3.5!) — เฉพาะโค้ดแพ็กเกจ (--important): Tailwind ของแอปที่ scan ผ่าน @source อาจไม่ generate
+ *   raw-palette     warning  bg-red-500 / text-slate-600 … → semantic token (bg-destructive, text-muted-foreground, bg-success …)
+ *   base-ui-props   error    default* ที่ค่าเปลี่ยนได้ / onSelect บน Base UI (สคริปต์ audit-base-ui-props)
+ *
+ * ยกเว้นเป็นบรรทัด: ใส่ `// ui-audit-ok: <เหตุผล>` ท้ายบรรทัดหรือบรรทัดก่อนหน้า
+ * ยกเว้นทั้งไฟล์: `/* ui-audit-ok-file: <เหตุผล> *\/` ที่หัวไฟล์
+ * ข้ามอัตโนมัติ: node_modules, .next, dist, build, generated, __tests__, *.test.*, components/ui/** (ไฟล์ shadcn)
+ */
+import { spawnSync } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const args = process.argv.slice(2);
+const flags = new Set(args.filter((a) => a.startsWith("--")));
+const roots = args.filter((a) => !a.startsWith("--"));
+if (roots.length === 0) roots.push("src");
+const STRICT = flags.has("--strict");
+const PALETTE = !flags.has("--no-palette");
+const SKIP_BASE_UI = flags.has("--no-base-ui");
+const IMPORTANT = flags.has("--important");
+
+const SKIP_DIRS = new Set([
+  "node_modules",
+  ".next",
+  "dist",
+  "build",
+  "generated",
+  "__tests__",
+  ".git",
+]);
+const LINE_MARKER = "ui-audit-ok:";
+const FILE_MARKER = "ui-audit-ok-file:";
+
+const PALETTE_COLORS =
+  "red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|slate|gray|zinc|neutral|stone";
+const RULES = [
+  {
+    id: "window-dialog",
+    level: "error",
+    regex: /\bwindow\.(confirm|alert|prompt)\s*\(/g,
+    message:
+      "ใช้ ConfirmDialog / useConfirm() / useDialogs() ของ @suphark/ui แทน window dialog (webview บางตัวปิดทิ้ง)",
+  },
+  {
+    id: "radix-state",
+    level: "error",
+    regex:
+      /data-\[state=(?:open|closed|checked|unchecked|active|inactive|on|off|visible|hidden|delayed-open|instant-open)\]/g,
+    message:
+      "Base UI ไม่ใส่ data-state — ใช้ data-open / data-closed / data-checked / data-active / data-popup-open",
+  },
+  {
+    id: "arbitrary-text",
+    level: "error",
+    regex: /\btext-\[\d+(?:px|rem|em)\]/g,
+    message: "ห้าม text-[Npx] — ใช้ typography scale (text-xs … text-3xl) ตาม docs/design-system.md",
+  },
+  {
+    id: "important",
+    level: "warning",
+    regex: /(?<=["'`\s])[a-z][\w:/[\]().%=,-]*!(?=["'`\s])/g,
+    message:
+      "utility ที่ลงท้าย ! — แอปที่ scan แพ็กเกจผ่าน @source อาจไม่ generate class นี้ ปรับ specificity แทน",
+  },
+  {
+    id: "raw-palette",
+    level: "warning",
+    regex: new RegExp(
+      `(?<![\\w-])(?:[a-z-]+:)*(?:bg|text|border|ring|fill|stroke|from|to|via|outline|decoration|divide|shadow|accent|caret|placeholder)-(?:${PALETTE_COLORS})-(?:50|100|200|300|400|500|600|700|800|900|950)(?:/\\d+)?(?![\\w-])`,
+      "g",
+    ),
+    message:
+      "raw palette → semantic token (bg-muted, text-muted-foreground, bg-destructive, bg-success, bg-warning, text-primary …)",
+  },
+];
+
+/** ปิดส่วนที่ไม่ใช่โค้ด (comment, <code>/<pre>, template ตัวอย่างในเอกสาร) ด้วยช่องว่างเพื่อคง offset */
+function mask(content) {
+  return content
+    .replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, " "))
+    .replace(/(^|[^:\\])\/\/.*$/gm, (m, p1) => p1 + " ".repeat(m.length - p1.length))
+    .replace(/<code[\s\S]*?<\/code>/g, (m) => m.replace(/[^\n]/g, " "))
+    .replace(/<pre[\s\S]*?<\/pre>/g, (m) => m.replace(/[^\n]/g, " "));
+}
+
+function walk(dir, out) {
+  let entries;
+  try {
+    entries = fs.readdirSync(dir, { withFileTypes: true });
+  } catch {
+    return out;
+  }
+  for (const e of entries) {
+    const full = path.join(dir, e.name);
+    if (e.isDirectory()) {
+      if (SKIP_DIRS.has(e.name)) continue;
+      walk(full, out);
+    } else if (/\.(tsx?|jsx?|mdx?)$/.test(e.name) && !/\.test\.[jt]sx?$/.test(e.name)) {
+      // ไฟล์ shadcn ของแอป (สำเนา CLI) ไม่ตรวจ — ควรใช้ของแพ็กเกจแทนอยู่แล้ว
+      if (/[\\/]components[\\/]ui[\\/]/.test(full)) continue;
+      out.push(full);
+    }
+  }
+  return out;
+}
+
+const files = roots.flatMap((r) => walk(path.resolve(process.cwd(), r), []));
+const findings = [];
+let skippedFiles = 0;
+
+for (const file of files) {
+  const raw = fs.readFileSync(file, "utf8");
+  if (raw.includes(FILE_MARKER)) {
+    skippedFiles++;
+    continue;
+  }
+  const lines = raw.split("\n");
+  const masked = mask(raw).split("\n");
+  for (const rule of RULES) {
+    if (rule.id === "raw-palette" && !PALETTE) continue;
+    if (rule.id === "important" && !IMPORTANT) continue;
+    for (let i = 0; i < masked.length; i++) {
+      const line = masked[i] ?? "";
+      rule.regex.lastIndex = 0;
+      let m = rule.regex.exec(line);
+      if (!m) continue;
+      const rawLine = lines[i] ?? "";
+      const prev = lines[i - 1] ?? "";
+      if (
+        rawLine.includes(LINE_MARKER) ||
+        (prev.trim().startsWith("//") && prev.includes(LINE_MARKER))
+      )
+        continue;
+      const hits = [];
+      while (m) {
+        hits.push(m[0]);
+        m = rule.regex.exec(line);
+      }
+      findings.push({
+        file: path.relative(process.cwd(), file),
+        line: i + 1,
+        rule: rule.id,
+        level: STRICT ? "error" : rule.level,
+        hits: [...new Set(hits)],
+        message: rule.message,
+      });
+    }
+  }
+}
+
+// base-ui props audit ของแพ็กเกจ (รันเป็นโปรเซสลูกเพื่อคง UI_DIR ชี้ที่ shadcn ของแพ็กเกจ)
+let baseUiExit = 0;
+let baseUiOutput = "";
+if (!SKIP_BASE_UI) {
+  const here = path.dirname(fileURLToPath(import.meta.url));
+  const uiDir = path.resolve(here, "..", "src", "components", "ui");
+  const r = spawnSync(process.execPath, [path.join(here, "audit-base-ui-props.mjs"), ...roots], {
+    encoding: "utf8",
+    env: { ...process.env, UI_DIR: uiDir },
+  });
+  baseUiExit = r.status ?? 1;
+  baseUiOutput = `${r.stdout ?? ""}${r.stderr ?? ""}`.trim();
+}
+
+// ---------- รายงาน ----------
+const byRule = new Map();
+for (const f of findings) byRule.set(f.rule, (byRule.get(f.rule) ?? 0) + 1);
+const errors = findings.filter((f) => f.level === "error");
+const warnings = findings.filter((f) => f.level === "warning");
+
+findings.sort((a, b) => (a.file === b.file ? a.line - b.line : a.file.localeCompare(b.file)));
+let lastFile = "";
+for (const f of findings) {
+  if (f.file !== lastFile) {
+    console.log(`\n${f.file}`);
+    lastFile = f.file;
+  }
+  const tag = f.level === "error" ? "✗" : "△";
+  console.log(`  ${tag} :${f.line}  ${f.rule}  ${f.hits.join(", ")}`);
+}
+if (baseUiOutput && baseUiExit !== 0) console.log(`\n${baseUiOutput}`);
+
+console.log(
+  `\nsuphark-ui-audit — ตรวจ ${files.length} ไฟล์ใน ${roots.join(", ")}${skippedFiles ? ` (ข้าม ${skippedFiles} ไฟล์ที่ทำเครื่องหมาย ${FILE_MARKER})` : ""}`,
+);
+for (const rule of RULES) {
+  const n = byRule.get(rule.id) ?? 0;
+  if (rule.id === "raw-palette" && !PALETTE) continue;
+  if (rule.id === "important" && !IMPORTANT) continue;
+  console.log(
+    `  ${n === 0 ? "✓" : rule.level === "error" || STRICT ? "✗" : "△"} ${rule.id.padEnd(15)} ${n}${n ? `  — ${rule.message}` : ""}`,
+  );
+}
+console.log(
+  `  ${baseUiExit === 0 ? "✓" : "✗"} base-ui-props    ${baseUiExit === 0 ? "ผ่าน" : "พบปัญหา (ดูข้างบน)"}`,
+);
+console.log(`\n${errors.length} error, ${warnings.length} warning${STRICT ? " (--strict)" : ""}`);
+if (errors.length || warnings.length) {
+  console.log(
+    `ยกเว้นรายบรรทัด: // ${LINE_MARKER} <เหตุผล>   ยกเว้นทั้งไฟล์: /* ${FILE_MARKER} <เหตุผล> */`,
+  );
+}
+process.exit(errors.length > 0 || baseUiExit !== 0 ? 1 : 0);

package/src/components/app-shell/app-brand.tsx

@@ -65,6 +65,7 @@ export function AppBrand({
       <SidebarMenuItem className={cn("flex items-center", className)}>
         <SidebarMenuButton
           size="lg"
+          // ui-audit-ok: class เดียวกับ size=lg ของ sidebar.tsx (shadcn) จึงถูก generate แน่นอน
           className="min-w-0 flex-1 group-data-[collapsible=icon]:p-0!"
           render={<Link href={href} onClick={closeMobile} />}
         >

package/src/components/app-shell/app-nav.tsx

@@ -49,12 +49,10 @@ function MenuTitle({ title, isLabs }: { title: string; isLabs?: boolean }) {
       <TooltipTrigger
         render={<span className="flex w-full items-center gap-1.5 overflow-hidden" />}
       >
-        <span
-          className={cn("truncate", isLabs && "font-medium text-amber-600 dark:text-amber-500")}
-        >
+        <span className={cn("truncate", isLabs && "font-medium text-warning-muted-foreground")}>
           {title}
         </span>
-        {isLabs && <FlaskConical className="h-3 w-3 shrink-0 text-amber-600 dark:text-amber-500" />}
+        {isLabs && <FlaskConical className="h-3 w-3 shrink-0 text-warning-muted-foreground" />}
       </TooltipTrigger>
       <TooltipContent side="right" align="center" className="max-w-xs break-words">
         {title}

package/src/components/design-system/sections/showcase-data-display.tsx

@@ -414,7 +414,7 @@ export function ShowcaseDataDisplay() {
 
               <Item variant="outline" className="p-3">
                 <ItemMedia variant="icon">
-                  <AlertTriangle className="size-4 text-amber-500" />
+                  <AlertTriangle className="size-4 text-warning" />
                 </ItemMedia>
                 <ItemContent>
                   <ItemTitle className="text-xs">หนังสือค้ำประกันผลงาน (Performance Bond)</ItemTitle>
@@ -444,7 +444,7 @@ export function ShowcaseDataDisplay() {
             <AttachmentGroup>
               <Attachment state="done" size="default">
                 <AttachmentMedia variant="icon">
-                  <FileSpreadsheet className="size-4 text-emerald-600" />
+                  <FileSpreadsheet className="size-4 text-success" />
                 </AttachmentMedia>
                 <AttachmentContent>
                   <AttachmentTitle>BOQ_Facade_Rev2.xlsx</AttachmentTitle>

package/src/components/design-system/sections/showcase-guidelines-recipes.tsx

@@ -296,7 +296,7 @@ export function ApprovePackageButton({ id }: { id: string }) {
                   <span className="font-bold">✕ หลีกเลี่ยง:</span>
                   <span className="line-through">{item.bad}</span>
                 </div>
-                <div className="flex items-start gap-2 text-emerald-600 font-medium">
+                <div className="flex items-start gap-2 text-success font-medium">
                   <span className="font-bold">✓ แนะนำ:</span>
                   <span>{item.good}</span>
                 </div>

package/src/components/design-system/sections/showcase-overlays-navigation.tsx

@@ -252,11 +252,11 @@ export function ShowcaseOverlaysNavigation() {
                     <div className="p-4 flex flex-col gap-2 text-xs">
                       <div className="flex justify-between border-b pb-2">
                         <span>ส่งมอบตรงเวลา (On-Time Delivery)</span>
-                        <span className="font-semibold text-emerald-600">96.5%</span>
+                        <span className="font-semibold text-success">96.5%</span>
                       </div>
                       <div className="flex justify-between border-b pb-2">
                         <span>มาตรฐานคุณภาพวัสดุ (Quality Pass Rate)</span>
-                        <span className="font-semibold text-emerald-600">98.2%</span>
+                        <span className="font-semibold text-success">98.2%</span>
                       </div>
                     </div>
                     <DrawerFooter>

package/src/components/design-system/sections/showcase-primitives.tsx

@@ -91,7 +91,7 @@ export function ShowcasePrimitives() {
       label: "Pending Vendor / รอผู้ขาย",
       variant: "outline",
       icon: AlertCircle,
-      className: "border-amber-500/40 text-amber-600 bg-amber-50/50 dark:bg-amber-950/20",
+      className: "border-warning/40 text-warning-muted-foreground bg-warning/10",
     },
   ];
 

package/src/components/shared/button/floating-save-button.tsx

@@ -68,7 +68,7 @@ export function FloatingSaveButton({
         className={cn(
           "h-14 gap-3 rounded-full border-4 border-background px-8 text-base shadow-2xl transition-all duration-300",
           showSuccess
-            ? "scale-105 bg-emerald-500 text-white shadow-[0_0_20px_rgba(16,185,129,0.4)] hover:bg-emerald-500"
+            ? "scale-105 bg-success text-success-foreground shadow-2xl shadow-success/40 hover:bg-success"
             : "bg-primary text-primary-foreground hover:bg-primary/90",
           buttonClassName,
         )}

package/src/components/shared/form/form-field-color-select.tsx

@@ -55,7 +55,7 @@ export function FormFieldColorSelect<T extends FieldValues>({
       render={({ field }) => (
         <FormItem>
           <FormLabel>
-            {label} {props.required && <span className="text-red-500">*</span>}
+            {label} {props.required && <span className="text-destructive">*</span>}
           </FormLabel>
           <Select onValueChange={field.onChange} value={field.value} {...props}>
             <FormControl>

package/src/components/shared/form/form-field-combobox.tsx

@@ -103,7 +103,7 @@ export function FormFieldCombobox<T extends FieldValues>({
       render={({ field }) => (
         <FormItem className={cn("flex flex-col gap-1.5", className)}>
           <FormLabel>
-            {label} {required && <span className="text-red-500">*</span>}
+            {label} {required && <span className="text-destructive">*</span>}
           </FormLabel>
           <FormControl>
             <Popover open={open} onOpenChange={setOpen}>

package/src/components/shared/form/form-field-date.tsx

@@ -36,7 +36,7 @@ export function FormFieldDate<T extends FieldValues>({
       render={({ field }) => (
         <FormItem className="flex flex-col">
           <FormLabel>
-            {label} {required && <span className="text-red-500">*</span>}
+            {label} {required && <span className="text-destructive">*</span>}
           </FormLabel>
           <FormControl>
             <DatePicker

package/src/components/shared/form/form-field-input.tsx

@@ -182,16 +182,16 @@ function UniqueCheckInput<T extends FieldValues>({
 
   return (
     <div>
-      <InputGroup className={cn(isDuplicate ? "border-red-500 ring-red-500" : "")}>
+      <InputGroup className={cn(isDuplicate ? "border-destructive ring-destructive" : "")}>
         <InputGroupInput
           {...field}
           {...props}
           value={value || ""}
-          className={cn(isDuplicate ? "text-red-600" : "")}
+          className={cn(isDuplicate ? "text-destructive" : "")}
         />
         {isDuplicate && (
           <InputGroupAddon>
-            <CircleAlert className="h-4 w-4 text-red-500" />
+            <CircleAlert className="h-4 w-4 text-destructive" />
           </InputGroupAddon>
         )}
         {enableCopy && (
@@ -200,12 +200,12 @@ function UniqueCheckInput<T extends FieldValues>({
             type="button"
             title="Copy to clipboard"
           >
-            {isCopied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+            {isCopied ? <Check className="h-4 w-4 text-success" /> : <Copy className="h-4 w-4" />}
           </InputGroupButton>
         )}
       </InputGroup>
       {isDuplicate && (
-        <p className="mt-1 font-medium text-[0.8rem] text-red-500">{uniqueErrorMessage}</p>
+        <p className="mt-1 font-medium text-[0.8rem] text-destructive">{uniqueErrorMessage}</p>
       )}
     </div>
   );
@@ -224,7 +224,7 @@ function CopyableInput(props: ComponentProps<typeof InputGroupInput>) {
         type="button"
         title="Copy to clipboard"
       >
-        {isCopied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+        {isCopied ? <Check className="h-4 w-4 text-success" /> : <Copy className="h-4 w-4" />}
       </InputGroupButton>
     </InputGroup>
   );

package/src/components/shared/form/form-field-radio-cards.tsx

@@ -33,6 +33,8 @@ interface FormFieldRadioCardsProps<T extends FieldValues = any> {
    * `row` = การ์ดแนวนอน: ปุ่มวิทยุจริงซ้าย, ไอคอน+ชื่อบรรทัดบน, คำอธิบายบรรทัดล่าง (แบบ Pi Auth เลือกประเภทแอป)
    */
   layout?: "grid" | "row";
+  /** ชื่อกลุ่มสำหรับ screen reader เมื่อไม่แสดง `label` (ส่งต่อไป RadioGroup) */
+  "aria-label"?: string;
 }
 
 export function FormFieldRadioCards<T extends FieldValues = any>({
@@ -47,6 +49,7 @@ export function FormFieldRadioCards<T extends FieldValues = any>({
   className,
   size = "md",
   layout = "grid",
+  "aria-label": ariaLabel,
 }: FormFieldRadioCardsProps<T>) {
   const baseId = useId();
 
@@ -59,6 +62,7 @@ export function FormFieldRadioCards<T extends FieldValues = any>({
       {label && <Label className="block font-semibold text-base">{label}</Label>}
       <RadioGroup
         name={groupName}
+        aria-label={label ? undefined : ariaLabel}
         onValueChange={(val) => {
           if (val !== null) onChange(String(val));
         }}

package/src/components/shared/form-message.tsx

@@ -21,11 +21,7 @@ export function FormMessage({
   return (
     <p
       role={state.ok ? "status" : "alert"}
-      className={cn(
-        "text-xs",
-        state.ok ? "text-emerald-700 dark:text-emerald-300" : "text-destructive",
-        className,
-      )}
+      className={cn("text-xs", state.ok ? "text-success" : "text-destructive", className)}
     >
       {state.ok ? (state.message ?? text.success) : state.error}
     </p>

package/src/components/shared/notice.tsx

@@ -1,3 +1,4 @@
+/* ui-audit-ok-file: โทน info/success/warning/danger ใช้ palette 50/900 คู่ dark โดยตั้งใจ — รอตัดสินใจ token ระดับ tone (todo) */
 import { Alert, AlertDescription, AlertTitle } from "@suphark/ui/components/ui/alert";
 import { cn } from "@suphark/ui/lib/utils";
 import type { ComponentProps, ReactNode } from "react";

package/src/components/shared/status-badge.tsx

@@ -1,3 +1,4 @@
+/* ui-audit-ok-file: โทน badge ใช้ palette 50/800 คู่ dark โดยตั้งใจ — รอตัดสินใจ token ระดับ tone (todo) */
 import { Badge } from "@suphark/ui/components/ui/badge";
 import { cn } from "@suphark/ui/lib/utils";
 import type { ComponentProps } from "react";

package/src/components/shared/theme/theme-toggle.tsx

@@ -56,21 +56,21 @@ export function ThemeToggle({ persistedTheme, onThemeChange }: ThemeToggleProps)
           onClick={() => handleThemeChange("light")}
           className="flex cursor-pointer items-center gap-2"
         >
-          <Sun className="h-4 w-4 text-amber-500" />
+          <Sun className="h-4 w-4 text-warning" />
           <span>Light</span>
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => handleThemeChange("dark")}
           className="flex cursor-pointer items-center gap-2"
         >
-          <Moon className="h-4 w-4 text-blue-500" />
+          <Moon className="h-4 w-4 text-primary" />
           <span>Dark</span>
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => handleThemeChange("system")}
           className="flex cursor-pointer items-center gap-2"
         >
-          <Laptop className="h-4 w-4 text-slate-500" />
+          <Laptop className="h-4 w-4 text-muted-foreground" />
           <span>System</span>
         </DropdownMenuItem>
       </DropdownMenuContent>

package/src/lib/status-colors.ts

@@ -1,3 +1,4 @@
+/* ui-audit-ok-file: ชุดสีให้ผู้ใช้เลือก (ColorName) เป็น palette โดยนิยาม — ข้อยกเว้นที่จดไว้ใน docs/design-system.md */
 export type ColorName = "gray" | "red" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
 
 export type ColorTheme = {