```
### utility روشن بدون جفت dark — `pages/AppointmentDetailPage.tsx`
```tsx
// خط ۱۴۱–۱۴۲
اطلاعات بیمار
```
### utility روشن بدون جفت dark — `pages/RepresentationDetailPage.tsx`
```tsx
// خط ۲۵۱
className="flex items-center gap-1.5 px-3 py-2 text-sm rounded-[10px] border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors"
// خط ۳۰۹
اطلاعات بانکی ثبت نشده
```
### CSS ثابت — `assets/admin/styles.css` خط ۹۵۸–۹۷۰
```css
.inv-table { width: 100%; border-collapse: collapse; }
.inv-table thead tr { background: #e1e1e1; } /* بدون override دارک */
.inv-table th {
color: #616161; font-size: 14px; font-weight: 400; /* بدون override دارک */
padding: 10px 18px; text-align: start; white-space: nowrap;
}
.inv-table td {
padding: 12px 18px; text-align: start; white-space: nowrap;
font-size: 16px; font-weight: 500; color: var(--text-2);
border-bottom: 1px solid #DBDBDB;
}
.dark .inv-table td { border-color: var(--border); }
.inv-table tbody tr:hover { background: #f4f5fd; }
.dark .inv-table tbody tr:hover { background: var(--surface-2); }
```
### الگوی درستِ موجود در پروژه (مرجع سبک) — `components/FreeVisitPrice.tsx`
```tsx
*
```
این همان الگویی است که باید همهجا اعمال شود: inline style میماند، فقط مقدار رنگ به توکن تبدیل میشود.
## وظایف
### ۱. تثبیت جدول نگاشت رنگ → توکن
قبل از هر تغییر، این جدول را مبنا بگیر. hexها از شمارش واقعی فایلهای `.tsx` استخراج شدهاند (ستون «تعداد» = تکرار در سورس):
| hex فعلی (لایت) | تعداد | hex فعلی (دارک، در `dark:`ها) | توکن مقصد |
|---|---|---|---|
| `#525252`, `#3b3b3b`, `#2f2f2f`, `#111827` | ۴۵+۱۳+۱۶+۱۱ | `#d7d8ed` (۷۶) | `var(--text)` |
| `#616161`, `#7e7e7e`, `#6b7280` | ۵۱+۱۹+۳۱ | `#a1a1a1` (۵۰) | `var(--text-2)` |
| `#9ca3af` | ۱۰ | — | `var(--text-3)` |
| `#5559ce` | ۷۵ | — | `var(--primary)` |
| `#f17732`, `#f0753b` | ۳۴+۴ | — | `var(--accent)` |
| `#ffffff` (سطح کارت) | ۴ | `#222433` (۲۵) | `var(--surface)` |
| `#fafafa`, `#f1f1f1` (پسزمینهٔ صفحه/فیلد) | ۶+۴ | — | `var(--bg)` / `var(--surface-2)` |
| `#efefef`, `#ededed`, `#e7e7e7` | ۱۸+۴+۴ | `#35343d` (۲۲), `#343645` (۱۱) | `var(--border)` |
| `#e0e0e0`, `#e1e1e1`, `#dbdbdb`, `#d7d7d7` | ۱۴+۸+… | `#404040` (۱۴) | `var(--border-2)` |
| `#ef4444`, `#d32f2f` | ۱۰+۹ | — | `var(--danger)` |
| `#2e7d32`, `#3c9a4f` | ۸+۷ | — | `var(--success)` |
| `#f59e0b` | ۵ | — | `var(--warning)` |
| پسزمینهٔ نرم بنفش `#f7f8ff`, `#f4f5fd`, `#e8ebff` | — | — | `var(--primary-soft)` / `var(--primary-soft2)` |
**نکته:** بعضی نگاشتها دقیقاً یکسان نیستند (`#525252` در برابر `--text: #3b3b3b`). این اختلاف عمدی پذیرفته میشود چون هدف یکدستسازی است؛ اما اگر جایی اختلاف بصری محسوس شد (مثلاً متن اصلی کارت که واضحاً تیرهتر/روشنتر میشود)، **همانجا را در گزارش پایانی لیست کن** بهجای اینکه توکن جدید بسازی.
**نحوه تست:** جدول تصمیم است، نه کد. بعد از تعریف، در `docs/admin-ui/ui-design-spec.md` ثبتش کن (وظیفهٔ ۷).
### ۲. پاکسازی `dark:`های مرده (دستهٔ A، اولویت اول)
در ۱۰ فایلی که در بخش «مشکل» لیست شد: هر جا `className` شامل `dark:` کنار `style={{ color|background|border|borderColor: '#…' }}` است:
1. کلاس `dark:` مرده را **حذف** کن
2. مقدار hex داخل `style` را طبق جدول وظیفهٔ ۱ به `var(--token)` تبدیل کن
```tsx
// قبل
// بعد
```
```tsx
// قبل
// بعد
```
ثابتهای ماژولسطح (`fieldLabel`, `primaryBtn`, `ghostBtn` در `PaymentStep.tsx`) هم همینطور:
```tsx
const fieldLabel: React.CSSProperties = { fontSize: 14, color: 'var(--text-2)', marginBottom: 8, display: 'block' };
const primaryBtn: React.CSSProperties = { background: 'var(--primary)', color: 'var(--on-primary)', ... };
const ghostBtn: React.CSSProperties = { background: 'transparent', color: 'var(--primary)', border: '1px solid var(--primary)', ... };
```
**نحوه تست:**
- `ddev exec npm run test` سبز بماند (تستهای موجود `PaymentStep`/`SessionPaymentAccordion`/… نباید بشکنند)
- تأیید صفر شدن الگو:
`grep -rn "dark:" --include='*.tsx' assets/admin | grep -E "style=\{\{[^}]*(color|background)" | grep -v '\.test\.' | wc -l` → باید `0` شود
- بصری: `/admin` → جلسه (session) → مراحل ایجاد/جزئیات/پرداخت، یکبار لایت و یکبار دارک
### ۳. تبدیل بقیهٔ inline styleهای رنگی به توکن (دستهٔ A، ادامه)
فایلبهفایل، به ترتیب حجم (MyPatientsPage → PatientDetailPage → SmsWalletPage → SubscriptionPage → ClinicServicesPage → PatientsListPage → MySecretariesPage → DoctorFormPage → DashboardPage → AdminSubscriptionPage → TurnsTimeline → …).
قواعد:
- رنگ ثابت داخل `style` → `var(--token)`
- کلاسهای arbitrary دوتایی مثل `className="text-[#525252] dark:text-[#D7D8ED]"` → `className="text-[var(--text)]"` (یک کلاس، هر دو مود)
- `bg-[#FAFAFA] dark:bg-[#222433]` → `bg-[var(--surface)]` یا `bg-[var(--bg)]` بسته به اینکه سطح کارت است یا پسزمینهٔ فیلد
- استثنا: hex داخل SVG که با prop رنگ میگیرد (مثل `
`) — در وظیفهٔ ۶
- **هر فایل یک commit/گام مستقل**؛ فایل بعدی را قبل از تأیید بصری فایل قبلی شروع نکن
**نحوه تست:** بعد از هر فایل: `ddev exec npm run test`، سپس بازکردن صفحهٔ متناظر در `/admin` در هر دو مود و مقایسه با اسکرینشات قبلِ تغییر (لایت باید بدون تغییر باشد).
### ۴. اضافه کردن پوشش دارک به دستهٔ B
در `pages/RepresentationDetailPage.tsx`، `pages/AppointmentDetailPage.tsx`، `pages/PaymentDetailPage.tsx`، `components/ImageCropModal.tsx`:
utilityهای پالت ثابت را با کلاس توکنی جایگزین کن — نه اینکه جفت `dark:` اضافه کنی (جفتسازی بدهی را دو برابر میکند و با brand hue هم هماهنگ نمیشود):
```tsx
// قبل
اطلاعات بیمار
// بعد
اطلاعات بیمار
```
```tsx
// قبل (RepresentationDetailPage خط ۲۵۱)
className="… border border-gray-300 text-gray-700 hover:bg-gray-50 …"
// بعد
className="… border border-[var(--border-2)] text-[var(--text)] hover:bg-[var(--surface-2)] …"
```
برای رنگهای وضعیتی (`text-red-600`, `border-red-300`, `bg-red-50`) → `text-[var(--danger)]`, `border-[var(--danger)]/30`, `bg-[var(--danger-bg)]`.
**نحوه تست:** `/admin/representations/{id}`، `/admin/appointments/{id}`، `/admin/payments/{id}` و مودال کراپ تصویر (آپلود آواتار پزشک) — هر کدام در دارک و لایت.
### ۵. پاکسازی `styles.css`
- `.inv-table thead tr` → `background: var(--surface-2)`
- `.inv-table th` → `color: var(--text-2)`
- `.inv-table td` → `border-bottom: 1px solid var(--border)` و حذف `.dark .inv-table td { border-color: … }` که دیگر لازم نیست
- `.inv-table tbody tr:hover` → `background: var(--surface-2)` و حذف override `.dark`
- `.inv-tabs` → `border-bottom: 1px solid var(--border)` و حذف `.dark .inv-tabs`
- `.inv-tab` → `color: var(--text-2)`؛ `.inv-tab.active` → `color: var(--primary); border-bottom: 3px solid var(--primary)`؛ حذف هر دو override `.dark`
- `.inv-badge.in-stock|low-stock|out-of-stock` → `background: var(--success-bg)|var(--warning-bg)|var(--danger-bg)` و `color: var(--success)|var(--warning)|var(--danger)`؛ حذف سه override `.dark`
`color: #fff` روی `.btn`/`.avatar` (خطوط ۲۶۳، ۴۱۱، ۵۹۸، ۶۷۱، ۷۷۵) → `var(--on-primary)` هر جا روی پسزمینهٔ برند است؛ `rgba(8,13,22,.5)` اسکریم مودال (خطوط ۶۹۶، ۷۹۸) عمداً در هر دو مود یکسان است و **دست نمیخورد** — در گزارش ذکرش کن.
**نحوه تست:** `/admin` → انبار (inventory): جدول، تبها و badgeهای موجودی در هر دو مود؛ `ddev exec npm run build` بدون خطا.
### ۶. آیکونهای SVG
آیکونهای inline با `stroke="#616161"` / `#3B3B3B` / `fill="#7E7E7E"` (مثلاً `pages/MySecretariesPage.tsx` خطوط ۲۶–۳۵ و فایلهای `components/icons/`) را به `stroke="currentColor"` تبدیل کن و رنگ را از کلاس والد بگیر (`text-[var(--text-2)]`).
استثنا: آیکونهای چندرنگ برند (`stroke="#F17732"` در `components/icons/FilesServiceIcons.tsx`، ۲۲ مورد) — اینها هویت رنگی دارند؛ به `var(--accent)` تبدیل کن، نه `currentColor`.
```tsx
// قبل
// بعد — رنگ از والد
```
**نحوه تست:** صفحهٔ «منشیهای من» و «سرویسها» در دارکمود — آیکونها باید دیده شوند نه اینکه در پسزمینه گم شوند.
### ۷. تست گارد + بهروزرسانی سند
**۷.۱ تست گارد** — `assets/admin/test/theme-tokens.test.ts` (Vitest، همان setup موجود در `assets/admin/test/`):
```ts
// اسکن سورس؛ فایلهای پاکشده در فاز جاری در allowlist نیستند و باید تمیز بمانند.
const CLEANED = [ /* مسیر فایلهایی که در وظایف ۲–۴ پاک شدند */ ];
it('فایلهای پاکشده hex ثابت رنگی ندارند', () => { /* regex #rrggbb داخل style/className، بهجز SVG برند */ });
it('الگوی مردهٔ dark: کنار inline style رنگی وجود ندارد', () => { /* کل assets/admin */ });
```
تست دوم باید روی **کل** `assets/admin` اجرا شود (نه فقط allowlist) چون بعد از وظیفهٔ ۲ باید صفر باشد و هرگز برنگردد.
**۷.۲ سند** — `docs/admin-ui/ui-design-spec.md`:
- بخش ۱۶ فعلی («Dark Mode (اختیاری — فاز دوم)» با `.dark { }` و پالت Tailwind) با پیادهسازی واقعی نمیخواند → بازنویسی شود: دارکمود پیادهشده است، از طریق `data-theme`/کلاس `dark` روی `` توسط `uiStore.applyTheme()`، و منبع رنگ **فقط** توکنهای `styles.css` است.
- جدول نگاشت وظیفهٔ ۱ + قاعدهٔ الزامی: «رنگ ثابت (hex یا utility پالت Tailwind) در `assets/admin` ممنوع؛ `var(--token)` یا `*-[var(--token)]`».
- بخش ۱ (Color Palette) که هنوز `--color-bg-sidebar: #0f172a` دارد با توکنهای واقعی همخوان شود.
**نحوه تست:** `ddev exec npm run test` — گارد جدید سبز؛ برای اطمینان از اینکه واقعاً گارد است، یکبار موقتاً `color: '#525252'` به یکی از فایلهای allowlist اضافه کن، ببین تست قرمز میشود، بعد برگردان.
### ۸. (فاز ۳ — فقط با تأیید صریح کاربر) مهاجرت سه فایل بزرگ
`pages/DoctorDetailPage.tsx` (۳۱۳ utility رنگی / ۱۴۲ `dark:`)، `components/schedule/ScheduleSection.tsx` (۲۶۰ / ۱۲۰)، `pages/UserDetailPage.tsx` (۱۹۸ / ۹۱).
اینها **در دارکمود کار میکنند** (جفت `slate/gray` + `dark:` دارند) ولی از design-system منحرفاند: با تغییر brand hue هماهنگ نمیشوند و رنگ خاکستریشان با `--surface`/`--text` مو نمیزند. مهاجرت ۷۷۱ نقطه ریسک رگرسیون بصری بالایی دارد و سود عملکردی فوری ندارد.
**توصیه:** این وظیفه را در همین پاس انجام نده. اگر کاربر تأیید کرد، فایلبهفایل و با اسکرینشات قبل/بعد در هر دو مود.
## نکات مهم
- **علت ریشهای، نه علامت:** الگوی `className="dark:…"` کنار `style={{color:…}}` نشان میدهد قبلاً تلاش شده دارکمود «وصله» شود بدون اینکه specificity در نظر گرفته شود. راهحل درست حذف رنگ ثابت است، نه اضافه کردن `!important` یا جفت `dark:` بیشتر. اگر جایی واقعاً به override نیاز شد، اول ببین آیا میشود کلاً از `style` به `className` رفت.
- **ترتیب اجرا اجباری است:** وظیفهٔ ۲ (خرابی قطعی، ۹۰ نقطه) قبل از وظیفهٔ ۳ (حجیم). اگر بودجه/زمان تمام شد، وظایف ۲، ۴، ۵ حداقل قابل تحویل مستقلاند.
- **لایتمود نباید تغییر کند.** توکنهای لایت همان hexهای رایجاند؛ هر تغییر بصری محسوس در لایت یعنی نگاشت اشتباه انتخاب شده — گزارش کن، خودسرانه توکن جدید نساز.
- **توکن جدید فقط با دلیل.** اگر جایی هیچ توکن مناسبی نبود، اول بررسی کن آیا واقعاً رنگ جدید لازم است یا نزدیکترین توکن کافی است (guidelines §۵ — abstraction بیمصرف ممنوع). توکن جدید اگر اضافه شد باید در **هر سه** بلوک `:root`، `[data-theme="dark"]` و در صورت لزوم `@supports` تعریف شود.
- **سازگاری مرورگر قدیمی:** بلوک `@supports (color: color-mix(in oklch, red, blue))` عمداً fallback sRGB دارد (iPhone 8 / WebKit قدیمی). هیچ توکنی نباید **فقط** داخل `@supports` تعریف شود.
- **`brandHue.fixed`:** هیوی «نارنجی» در `uiStore.ts` مقادیر `--primary*` را inline روی root میگذارد. یعنی هر جا `#5559CE` ثابت مانده باشد با انتخاب این هیو ناهماهنگ میشود — این یک تست بصری مستقل است، نه فقط دارک/لایت.
- **بدون تغییر backend/API.** این تسک صفر تغییر در `src/` و `docs/api/` دارد؛ تنها سند متأثر `docs/admin-ui/ui-design-spec.md` است.
- **دستورها داخل ddev اجرا میشوند:** `ddev exec npm run test`، `ddev exec npm run build`. برای مشاهدهٔ زنده `ddev exec npm run watch`.
- **حساب تست:** `09390039833 / 09390039833` روی `https://clinic-pro.ddev.site/admin`.