دليل استايل الداشبورد

هذه الصفحة مرجع للتصميم. استخدمها أثناء الشغل لو نسيت class أو متغير أو شكل الأزرار والألوان. كل المكوّنات أدناه تعتمد على الثيم الحالي.

مرجع سريع

Classes للاستخدام في الـ HTML
Class الاستخدام
.btn .btn-primary زر أساسي (لون الثيم)
.btn .btn-secondary زر فرعي (outline)
.badge-accent شارة تمييز (نفس لون السايدبار النشط)
.dashboard-section قسم موحد (خلفية، ظل، حدود، padding) — استخدم <x-dashboard.section>
.alert-demo-pill--success حبة تنبيه نجاح
.alert-demo-pill--error حبة تنبيه خطأ
.alert-demo-pill--warning حبة تنبيه تحذير
.alert-demo-pill--info حبة تنبيه معلومات
متغيرات CSS (في التصميم)
المتغير الاستخدام
--color-primary أساسي (أزرار، روابط)
--color-secondary فرعي
--color-accent تمييز (سايدبار نشط + محتوى)
--page-bg خلفية الصفحة
--card-bg خلفية الكروت
--color-text لون النص
--color-success تنبيه نجاح
--color-error تنبيه خطأ
--color-warning تنبيه تحذير
--color-info تنبيه معلومات

شكل الأزرار حسب الثيم

ألوان التصميم

استخدم هذه الستة في الصفحات. غيّر الثيم من الحافة لرؤية القيم.

١ — أساسي --color-primary الأزرار الرئيسية، الروابط
٢ — فرعي --color-secondary الزر الفرعي، لمسات ثانوية
٣ — تمييز --color-accent السايدبار النشط + تمييز في المحتوى
٤ — خلفية الصفحة --page-bg خلفية منطقة المحتوى
٥ — خلفية الكروت --card-bg البطاقات، الصناديق
٦ — لون النص --color-text النص الأساسي

مثال استخدام التمييز في المحتوى: شارة تمييز

السايدبار والتوب بار يتغيّران أوتوماتيك مع الثيم.

ألوان التنبيهات

ثابتة في كل الثيمات. استخدمها للـ Alert و Toast والإشعارات.

نجاح --color-success Alert نجاح، تم بنجاح
خطأ --color-error Alert خطأ، تحذير خطر
تحذير --color-warning Alert تحذير، انتباه
معلومات --color-info Alert معلومات، إرشاد
نجاح خطأ تحذير معلومات