From e4edaea9b823f82d03382d9c078e0ccb540d24fb Mon Sep 17 00:00:00 2001
From: hamed <15238-genius.ha@users.noreply.drupalcode.org>
Date: Mon, 27 Jul 2026 17:07:17 +0330
Subject: [PATCH] refactor: update color classes to use CSS variables for
 consistency

---
 assets/admin/components/ImageCropModal.tsx |  2 +-
 assets/admin/pages/PaymentDetailPage.tsx   |  2 +-
 assets/admin/test/theme-tokens.test.ts     | 30 ++++++++++++++++++++++
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/assets/admin/components/ImageCropModal.tsx b/assets/admin/components/ImageCropModal.tsx
index 68725277..4feffe11 100644
--- a/assets/admin/components/ImageCropModal.tsx
+++ b/assets/admin/components/ImageCropModal.tsx
@@ -57,7 +57,7 @@ export default function ImageCropModal({ src, fileName, onCancel, onConfirm }: I
             <span className="text-xs text-[var(--text-2)] shrink-0">بزرگ‌نمایی</span>
             <input type="range" min={1} max={3} step={0.01} value={zoom}
               onChange={e => setZoom(Number(e.target.value))}
-              className="w-full accent-indigo-600" />
+              className="w-full accent-[var(--primary)]" />
           </div>
           <div className="flex items-center justify-end gap-3">
             <button onClick={onCancel} disabled={processing}
diff --git a/assets/admin/pages/PaymentDetailPage.tsx b/assets/admin/pages/PaymentDetailPage.tsx
index 8fce7997..bc8ccc70 100644
--- a/assets/admin/pages/PaymentDetailPage.tsx
+++ b/assets/admin/pages/PaymentDetailPage.tsx
@@ -100,7 +100,7 @@ export default function PaymentDetailPage() {
                 label="نوبت مرتبط"
                 value={
                   <a href={`/admin/appointments/${payment.appointment_uuid}`}
-                    className="text-primary-600 hover:underline text-xs font-mono">
+                    className="text-[var(--primary)] hover:underline text-xs font-mono">
                     مشاهده نوبت
                   </a>
                 }
diff --git a/assets/admin/test/theme-tokens.test.ts b/assets/admin/test/theme-tokens.test.ts
index bd3234e7..aaf94167 100644
--- a/assets/admin/test/theme-tokens.test.ts
+++ b/assets/admin/test/theme-tokens.test.ts
@@ -16,6 +16,13 @@ const INTENTIONAL = [
   'lib/avatarColors.ts',                 // گرادیان تزئینی آواتار، در هر دو تم یکسان
 ];
 
+/** پالت پیش‌فرض Tailwind v4 — هر خانوادهٔ دیگری باید در `@theme` تعریف شده باشد. */
+const TAILWIND_FAMILIES = new Set([
+  'slate', 'gray', 'zinc', 'neutral', 'stone', 'red', 'orange', 'amber', 'yellow',
+  'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet',
+  'purple', 'fuchsia', 'pink', 'rose',
+]);
+
 const HEX = /#[0-9a-fA-F]{3,8}\b/;
 const PALETTE_UTIL =
   /(?:^|[\s"'`{])(?:dark:|hover:|focus:|active:|group-hover:|md:|lg:|sm:)*(?:bg|text|border|divide|ring|fill|stroke)-(?:white|black|gray|slate|zinc|neutral|stone|red|green|emerald|blue|sky|amber|yellow|orange|purple|indigo|violet|pink|rose|teal|cyan)(?:-\d{2,3})?\b/;
@@ -77,4 +84,27 @@ describe('theme tokens', () => {
       .filter((f) => PALETTE_UTIL.test(strip(readFileSync(join(ROOT, f), 'utf8'))));
     expect(offenders).toEqual([]);
   });
+
+  /**
+   * `text-primary-600` و امثالش هیچ رنگی تولید نمی‌کنند: نه در پالت پیش‌فرض Tailwind
+   * هستند و نه در `@theme` تعریف شده‌اند — یعنی کلاسِ مرده در هر دو تم.
+   */
+  it('کلاس رنگی با مقیاس تعریف‌نشده ندارد', () => {
+    const theme = readFileSync(join(ROOT, 'styles.css'), 'utf8');
+    const declared = new Set(
+      [...theme.matchAll(/--color-([a-z]+)-\d{2,3}\s*:/g)].map((m) => m[1]),
+    );
+    const utilities = new RegExp(
+      String.raw`\b(?:bg|text|border|ring|divide|from|to|via|outline|accent|caret|fill|stroke|placeholder|shadow)-([a-z]+)-\d{2,3}\b`,
+      'g',
+    );
+    const offenders: string[] = [];
+    for (const f of files) {
+      const src = strip(readFileSync(join(ROOT, f), 'utf8'));
+      for (const m of src.matchAll(utilities)) {
+        if (!TAILWIND_FAMILIES.has(m[1]) && !declared.has(m[1])) offenders.push(`${f}: ${m[0]}`);
+      }
+    }
+    expect(offenders).toEqual([]);
+  });
 });