113 lines
5.7 KiB
Markdown
113 lines
5.7 KiB
Markdown
# نظام طراحی — رادار آینده دانشگاه اصفهان
|
||
|
||
مرجع طراحی دیداری سامانه. پیادهسازی در `src/index.css` و کامپوننتهای
|
||
`src/components/ui/` (shadcn/ui روی Tailwind v4) است.
|
||
|
||
---
|
||
|
||
## ۱. پایه
|
||
|
||
| مورد | مقدار |
|
||
| --------------- | -------------------------------------------------------- |
|
||
| فریمورک CSS | Tailwind CSS v4 (`@tailwindcss/vite`) |
|
||
| کتابخانه اجزا | shadcn/ui روی Radix |
|
||
| جهت | RTL (`dir="rtl"` روی `<html>`) |
|
||
| قلم | Vazirmatn (وزنهای ۴۰۰، ۵۰۰، ۶۰۰، ۷۰۰) |
|
||
| حالت نمایش | روشن و تیره، با کلاس `.dark` روی `<html>` |
|
||
|
||
---
|
||
|
||
## ۲. رنگ
|
||
|
||
همه رنگها متغیر CSS در فضای رنگی `oklch` هستند و در `:root` (روشن) و
|
||
`.dark` (تیره) تعریف میشوند. هیچ رنگ ثابتی نباید مستقیماً در کامپوننتها
|
||
نوشته شود.
|
||
|
||
### ۲.۱. نقشها
|
||
|
||
`--background` · `--foreground` · `--card` · `--popover` · `--muted` ·
|
||
`--accent` · `--primary` · `--secondary` · `--destructive` · `--border` ·
|
||
`--input` · `--ring` و مجموعه `--sidebar-*`.
|
||
|
||
### ۲.۲. رنگهای معنایی
|
||
|
||
رنگ فقط برای **معنا** به کار میرود، نه تزئین. چهار جریان رصد، هر کدام یک
|
||
رنگ ثابت دارند که در `src/utils/categories.ts` تعریف شده و در همهجا —
|
||
رادار، نشانها، جدولها و نمودارها — یکسان است:
|
||
|
||
| جریان | متغیر | سطح ملایم |
|
||
| ----------------- | --------------- | -------------------- |
|
||
| روندها | `--cat-trend` | `--cat-trend-soft` |
|
||
| فناوریها | `--cat-tech` | `--cat-tech-soft` |
|
||
| سیاستها | `--cat-policy` | `--cat-policy-soft` |
|
||
| سیگنالهای آینده | `--cat-signal` | `--cat-signal-soft` |
|
||
|
||
جهت تغییر (رشد یا کاهش) با `--positive` و `--negative` نشان داده میشود.
|
||
|
||
### ۲.۳. کنتراست
|
||
|
||
هر جفت رنگ متن/زمینه باید در **هر دو حالت** روشن و تیره حداقل نسبت
|
||
کنتراست ۴٫۵:۱ برای متن معمولی و ۳:۱ برای متن بزرگ یا ضخیم را داشته باشد.
|
||
مقادیر روشنایی رنگهای معنایی دقیقاً برای رسیدن به همین آستانه تنظیم
|
||
شدهاند؛ تغییر آنها بدون سنجش مجدد کنتراست مجاز نیست.
|
||
|
||
---
|
||
|
||
## ۳. تایپوگرافی
|
||
|
||
یک مقیاس، چهار وزن. **هیچ متنی ضخیمتر از ۷۰۰ نباشد** — وزنهای ۸۰۰ و ۹۰۰
|
||
حفرههای حروف فارسی را میبندند و بهجای ایجاد سلسلهمراتب، آن را از بین
|
||
میبرند.
|
||
|
||
| کاربرد | اندازه | وزن |
|
||
| ----------------- | ------------- | --- |
|
||
| عنوان صفحه | `1.375rem` | ۷۰۰ |
|
||
| عنوان کارت | `0.9375rem` | ۷۰۰ |
|
||
| متن بدنه | `0.8125rem` | ۴۰۰ |
|
||
| برچسب و فراداده | `0.75rem` | ۵۰۰ |
|
||
| ریزنویس | `0.6875rem` | ۶۰۰ |
|
||
|
||
- ارتفاع خط بدنه `1.75` است؛ فارسی به فضای بیشتری بین سطرها نیاز دارد.
|
||
- ارقام با کلاس `.tnum` نمایش داده میشوند تا در ستونها همتراز بمانند.
|
||
- اعداد همیشه فارسیاند (`toPersianDigits`).
|
||
|
||
---
|
||
|
||
## ۴. فاصله، گردی و ارتفاع
|
||
|
||
- گردی از `--radius` (`0.7rem`) مشتق میشود: `radius-sm` تا `radius-2xl`.
|
||
- سایه فقط برای جدا کردن لایههای شناور (کارت شناور، منو، دیالوگ). کارتهای
|
||
درون صفحه با خط مویین `border` از هم جدا میشوند، نه با سایه.
|
||
- فاصلهها از مقیاس Tailwind؛ فاصله استاندارد میان کارتها `gap-3` یا `gap-4`.
|
||
|
||
---
|
||
|
||
## ۵. حرکت
|
||
|
||
- انتقالها کوتاه (۱۵۰ تا ۲۰۰ میلیثانیه) و فقط روی ویژگیهای مشخص.
|
||
- **`transition-all` استفاده نشود**؛ چون رنگها متغیر CSS هستند، تغییر حالت
|
||
روشن/تیره باعث انیمیشن ناخواسته رنگ میشود.
|
||
- هنگام تعویض حالت نمایش، صفت `data-theme-switching` روی `<html>` قرار
|
||
میگیرد و همه انتقالها را موقتاً غیرفعال میکند.
|
||
- `prefers-reduced-motion` رعایت میشود.
|
||
|
||
---
|
||
|
||
## ۶. نگارش متن
|
||
|
||
- متن رابط کاربری **توصیفی** است، نه تبلیغاتی. برچسب کوتاه و دقیق.
|
||
- عنوانها بدون پسوند انگلیسی داخل پرانتز.
|
||
- هیچ عدد، تاریخ یا نتیجهگیریای در متن ثابت کدنویسی نمیشود؛ همه از داده
|
||
محاسبه میشوند.
|
||
- افق زمانی همیشه از `src/utils/horizon.ts` خوانده میشود
|
||
(۱۴۰۵ تا ۱۴۱۵)، نه بهصورت دستی.
|
||
|
||
---
|
||
|
||
## ۷. دسترسپذیری
|
||
|
||
- تمرکز صفحهکلید با حلقه `--ring` دیده میشود.
|
||
- هر کنترل بدون متن، `aria-label` دارد.
|
||
- ناوبری روی موبایل به کشوی کناری (Sheet) تبدیل میشود و با صفحهکلید
|
||
قابل استفاده است.
|