8b0814230c
Introduce a comprehensive design system across WordPress and Laravel to ensure visual consistency. Implement new financial reporting capabilities and Excel export functionality within the Filament admin panel. - Add `DESIGN_SYSTEM.md` to define brand colors, typography, and spacing - Implement `FinancialReport` page in Filament for transaction and shipment summaries - Add Excel export support for `ShipmentResource` and `WalletTransactionResource` using Laravel Excel - Refactor WordPress plugin and Filament CSS to utilize the new design system variables - Update project status to reflect new reporting and design milestones
180 lines
4.8 KiB
Markdown
180 lines
4.8 KiB
Markdown
# IFNEX Design System
|
|
|
|
## 🎨 رنگهای برند
|
|
|
|
### رنگهای اصلی
|
|
| نام | HEX | استفاده |
|
|
|-----|-----|---------|
|
|
| Primary Amber | `#f59e0b` | دکمههای اصلی، لینکها، آیکونهای فعال |
|
|
| Primary Dark | `#d97706` | هاور دکمهها |
|
|
| Primary Light | `#fbbf24` | زمینههای روشن، هایلایت |
|
|
| Success Green | `#059669` | عملیات موفق، موجودی مثبت |
|
|
| Danger Red | `#dc2626` | خطاها، موجودی منفی |
|
|
| Warning Yellow | `#f59e0b` | هشدارها، در حال پردازش |
|
|
| Info Blue | `#2563eb` | اطلاعات، لینکها |
|
|
|
|
### رنگهای خنثی
|
|
| نام | HEX | استفاده |
|
|
|-----|-----|---------|
|
|
| Gray 900 | `#111827` | متنهای اصلی |
|
|
| Gray 700 | `#374151` | متنهای ثانویه |
|
|
| Gray 500 | `#6b7280` | توضیحات، placeholder |
|
|
| Gray 300 | `#d1d5db` | حاشیهها |
|
|
| Gray 100 | `#f3f4f6` | پسزمینههای روشن |
|
|
| White | `#ffffff` | پسزمینه کارتها |
|
|
|
|
### رنگهای Sidebar
|
|
| نام | HEX | استفاده |
|
|
|-----|-----|---------|
|
|
| Sidebar Dark | `#1a1a2e` | پسزمینه اصلی سایدبار |
|
|
| Sidebar Blue | `#16213e` | گرادینت سایدبار |
|
|
| Sidebar Active | `rgba(245, 158, 11, 0.15)` | آیتم فعال |
|
|
|
|
## 📐 فاصلهگذاری (Spacing)
|
|
|
|
| نام | مقدار | استفاده |
|
|
|-----|-------|---------|
|
|
| xs | 0.25rem (4px) | فاصلههای خیلی کوچک |
|
|
| sm | 0.5rem (8px) | فاصلههای کوچک |
|
|
| md | 1rem (16px) | فاصلههای استاندارد |
|
|
| lg | 1.5rem (24px) | فاصلههای بزرگ |
|
|
| xl | 2rem (32px) | فاصلههای خیلی بزرگ |
|
|
| 2xl | 3rem (48px) | فاصلههای بخشها |
|
|
|
|
## 🔤 تایپوگرافی
|
|
|
|
### فونت اصلی
|
|
- **فامیلی:** Vazirmatn, IranYekan, ui-sans-serif, system-ui, sans-serif
|
|
- **سایز پایه:** 14px
|
|
- **خط:** 1.6
|
|
|
|
### سایزهای فونت
|
|
| نام | اندازه | وزن | استفاده |
|
|
|-----|--------|-----|---------|
|
|
| xs | 0.75rem (12px) | 400 | توضیحات، watermark |
|
|
| sm | 0.875rem (14px) | 400 | متنهای استاندارد |
|
|
| base | 1rem (16px) | 400 | متنهای اصلی |
|
|
| lg | 1.125rem (18px) | 500 | زیرعنوانها |
|
|
| xl | 1.25rem (20px) | 600 | عنوانهای صفحه |
|
|
| 2xl | 1.5rem (24px) | 700 | عنوانهای اصلی |
|
|
| 3xl | 1.875rem (30px) | 700 | Hero text |
|
|
|
|
## 📦 کارتها و کادرها
|
|
|
|
### استایل کارت
|
|
- **Border Radius:** 0.75rem (12px)
|
|
- **Border:** 1px solid #e5e7eb
|
|
- **Shadow:** 0 1px 3px rgba(0, 0, 0, 0.05)
|
|
- **Padding:** 1.25rem
|
|
- **Background:** #ffffff
|
|
|
|
### استایل کارت statistic
|
|
- **Border Radius:** 0.75rem (12px)
|
|
- **Padding:** 1.25rem
|
|
- **Title:** 0.875rem, weight 500, color #6b7280
|
|
- **Value:** 1.5rem, weight 700, color #111827
|
|
|
|
## 🔘 دکمهها
|
|
|
|
### Primary Button
|
|
- **Background:** #f59e0b
|
|
- **Border:** #f59e0b
|
|
- **Color:** #ffffff
|
|
- **Border Radius:** 0.5rem (8px)
|
|
- **Padding:** 0.625rem 1.25rem
|
|
- **Font Size:** 0.875rem
|
|
- **Hover:** #d97706, translateY(-1px), shadow
|
|
|
|
### Secondary Button
|
|
- **Background:** #ffffff
|
|
- **Border:** #d1d5db
|
|
- **Color:** #374151
|
|
- **Hover:** #f9fafb
|
|
|
|
## 📊 جداول
|
|
|
|
### Header
|
|
- **Background:** #f9fafb
|
|
- **Font Size:** 0.875rem
|
|
- **Font Weight:** 600
|
|
- **Text Transform:** uppercase
|
|
- **Letter Spacing:** 0.025em
|
|
- **Color:** #374151
|
|
- **Padding:** 0.75rem 1rem
|
|
|
|
### Cell
|
|
- **Padding:** 0.75rem 1rem
|
|
- **Font Size:** 0.875rem
|
|
- **Color:** #374151
|
|
- **Border Bottom:** 1px solid #f3f4f6
|
|
|
|
### Hover
|
|
- **Background:** #fffbeb
|
|
|
|
## 📱 رسپانسیو
|
|
|
|
### Breakpoints
|
|
- **Mobile:** < 768px
|
|
- **Tablet:** 768px - 1024px
|
|
- **Desktop:** > 1024px
|
|
|
|
### Mobile Adjustments
|
|
- **Font Size:** 13px
|
|
- **Padding:** 0.75rem
|
|
- **Grid:** 1 column
|
|
- **Cards:** Full width
|
|
|
|
### Tablet Adjustments
|
|
- **Grid:** 2 columns
|
|
- **Padding:** 1rem
|
|
|
|
## 🎯 چیدوبندی (Layout)
|
|
|
|
### Container
|
|
- **Max Width:** 1400px
|
|
- **Padding:** 1.5rem
|
|
- **Margin:** 0 auto
|
|
|
|
### Grid System
|
|
- **Gap:** 1rem
|
|
- **Columns:** auto-fit, minmax(240px, 1fr)
|
|
|
|
## 🌙 حالت تاریک (Dark Mode)
|
|
|
|
### در حال توسعه...
|
|
- پسزمینه: #0f172a
|
|
- متن: #f1f5f9
|
|
- کارت: #1e293b
|
|
- حاشیه: #334155
|
|
|
|
---
|
|
|
|
## 📋 پیادهسازی در Filament
|
|
|
|
```php
|
|
// AdminPanelProvider.php
|
|
->colors([
|
|
'primary' => Color::Amber, // #f59e0b
|
|
])
|
|
->sidebarWidth('18rem')
|
|
->maxContentWidth('xl')
|
|
```
|
|
|
|
## 📋 پیادهسازی در WordPress
|
|
|
|
```css
|
|
/* استفاده از متغیرهای CSS */
|
|
:root {
|
|
--ifnex-primary: #f59e0b;
|
|
--ifnex-primary-dark: #d97706;
|
|
--ifnex-success: #059669;
|
|
--ifnex-danger: #dc2626;
|
|
--ifnex-gray-900: #111827;
|
|
--ifnex-gray-700: #374151;
|
|
--ifnex-gray-500: #6b7280;
|
|
--ifnex-gray-300: #d1d5db;
|
|
--ifnex-gray-100: #f3f4f6;
|
|
--ifnex-white: #ffffff;
|
|
}
|
|
```
|