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 |
پسزمینه کارتها |
| نام |
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
📊 جداول
- 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
📱 رسپانسیو
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
// AdminPanelProvider.php
->colors([
'primary' => Color::Amber, // #f59e0b
])
->sidebarWidth('18rem')
->maxContentWidth('xl')
📋 پیادهسازی در WordPress
/* استفاده از متغیرهای 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;
}
8b0814230c