رموز التصميم والقوالب

في المراحل الأولى لتطبيق React ، تبدو قرارات التصميم غير ضارة. يتم نسخ لون من ملف تصميم. تُضاف قيمة تباعد ثابتة إلى أحد المكونات. يُختار نصف قطر حدود خاص لهذه البطاقة. يعمل الوضع الفاتح، فننتقل إلى الخطوة التالية. مع تطور المنتج، تتراكم هذه القرارات الصغيرة. تُدخل فرق متعددة درجات مختلفة قليلاً من نفس اللون الرمادي. تظهر الأزرار على شاشات مختلفة بحالات تمرير غير متناسقة. تستجيب بعض المكونات بشكل صحيح للوضع الداكن؛ بينما ينسى البعض الآخر ضبط تباين النص. تتطلب حملة علامة تجارية جديدة نسخة بصرية، فيضيف المطورون...if (theme === "dark") المنطق داخل المكونات. بمرور الوقت، ينتشر منطق التنسيق عبر الشجرة، وتصبح الهوية البصرية هشة.

والآن، أضف بُعدًا جديدًا. يُقدّم قسم التصميم نمطًا عالي التباين لتسهيل الوصول. ويرغب قسم التسويق في استخدام سمات موسمية. بينما يُريد قسم المنتج إصدارات مُخصصة من العلامة التجارية لعملاء المؤسسات. فجأةً، لم يعد التصميم المرئي مجرد زينة، بل أصبح متطلبًا أساسيًا للنظام. وعند تغيير السمات، يجب تحديث التطبيق بأكمله بشكل متناسق دون تغييرات في التخطيط، أو رموز غير متناسقة، أو منطق مُكرر. تكمن المشكلة الأساسية في الانحراف المعماري. تعتمد المكونات بشكل مباشر على القيم الحرفية بدلًا من المعنى الدلالي. لا يوجد مصدر واحد موثوق لقرارات التصميم. تُطبّق السمات بشكل إلزامي أو غير متناسق. وعندما تتغير السمة، لا يكون التحديث ذريًا، بل مُشتتًا.

في React 19، حيث يكون العرض متزامنًا وقائمًا على الحدود، يُعدّ تغيير المظهر بمثابة إعادة عرض مرئية كاملة وفقًا لعقد تصميم جديد. إذا لم تكن الرموز مركزية ولم تُصمّم المظاهر كمدخلات عرض مُتحكّم بها، فقد يُؤدي التزامن إلى ظهور تناقضات مرئية: تحديثات جزئية، وقيم قديمة، وأسطح غير متطابقة. لذا، فإن المشكلة التي نتناولها في هذا الدرس أعمق من مجرد "كيفية تبديل الوضع الداكن". نحن نصمم بنية تصميم قائمة على الرموز حيث:

• تعتمد المكونات على الرموز الدلالية، وليس على القيم الخام

• تحدد السمات عمليات ربط رمز

• يصبح تبديل السمات حدًا تحكميًا للعرض

• تظل الهوية البصرية متسقة مع توسع النظام

• يوجد في الأعلى القالب النشط (Light ،Dark أوBrand (متغير). يوفر هذا الموضوع قيمًا ملموسة للرموز الدلالية، مثلcolor.surface رسم الخرائط إلى#ffffff في الوضع الخفيف أو#121212 في الوضع الداكن،color.primary ربطها بلون العلامة التجارية مثل#4f46e5 ، وspacing.medium رسم الخرائط إلى16px .

• في المنتصف توجد طبقة الرموز، التي تحدد الواجهة الدلالية المستقرة: أدوار مثلsurface ،primary ،muted text ،spacing.small ، وradius.medium .

• في الأسفل توجد شجرة المكونات، حيث طلب المكونات التنسيق حسب الدور بدلاً من القيم الخام: أCard الاستخداماتcolor.surface ، أButton الاستخداماتcolor.primary ، وتستخدم عناصر التخطيط الأساسيةspacing.medium عند تغيير السمة، تتغير الطبقة العليا فقط. تبقى واجهة رمز ثابتة، ولا تتغير المكونات، ويعيد React عرض الشجرة وفقًا لتعيين رمز الجديد في تحديث واحد يمكن التنبؤ به.

صمم الرموز كواجهة دلالية للتصميم.

تمثل رموز التصميم النية الدلالية، لا القيم الخام. رمز ليس#121212 . إنهاcolor.surface ليس كذلك16px . إنهاspacing.medium هذا التوجيه غير المباشر هو ما يسمح للنظام بالتوسع. فعندما تستخدم المكونات رموزًا دلالية، فإنها تصف ما تحتاجه، وليس كيفية تنفيذه.

• الطبقة المعمارية الأولى هي تعريف رمز . تُصنَّف الرموز حسب الفئة، مثل:color ،spacing ،typography ،radius ، وelevation وهي تُشفّر معنى التصميم. هذه الرموز مستقلة عن الموضوع. إنها تُحدد مفردات النظام.

• الطبقة الثانية هي ربط السمات. تُحدد السمة قيمًا محددة لتلك الرموز. تشترك السمة الفاتحة والسمة الداكنة في نفس بنية رمز ، لكنهما تُخصصان قيمًا مختلفة. قد يُلغي إصدار العلامة التجارية مجموعة فرعية فقط من الرموز.

• الطبقة الثالثة هي توزيع السمات عبر السياق. في React، تقع الاهتمامات المشتركة ضمن موفري السياق. يُعرِض موفر السمة خريطة رمز النشطة. تستهلك المكونات الرموز من خلال خطاف أو عبر متغيرات CSS مشتقة من السمة. ...