تكرار السؤال: …
الإجابة المختصرة
رموز التصميم هي القرارات البصرية المجردة المخزنة كمتغيرات مستقلة عن المنصة (مثل JSON)، وتنقسم إلى 3 طبقات: الرموز العالمية (Global)، الرموز الدلالية (Semantic/Alias)، والرموز المخصصة للمكون (Component-specific).
الشرح
الرموز العالمية تعرف القيم الخام المجردة (مثل: color-blue-500 = #0066FF). الرموز الدلالية تصف الغرض الوظيفي للرمز وترتبط بالرمز العالمي (مثل: color-action-primary = color-blue-500). رموز المكون تخصص الاستخدام لعنصر محدد (مثل: button-primary-bg = color-action-primary). هذه المعمارية ثلاثية الطبقات هي ما يتيح دعم الوضع الليلي وتعدد العلامات التجارية (Multi-brand) بضغطة زر واحدة دون لمس كود المكونات.
أخطاء شائعة
- ربط المكونات مباشرة بالرموز العالمية الخام (مثل كتابة blue-500 للزر)، مما يجعل تفعيل الوضع الليلي مستحيلاً لاحقاً.
- تسمية الرموز الدلالية بأسماء ألوان بدلاً من وظيفتها (مثل تسمية الخلفية bg-white بدلاً من bg-surface).