بنية رموز متعددة السمات والعلامات التجارية

تغيّر السمة نمط ألوان العلامة التجارية نفسها (نسختا الوضعين الفاتح والداكن للمنتج نفسه). أما العلامة التجارية فهي هوية بصرية مختلفة؛ إذ تُعرض مكوّنات نظام التصميم نفسه بألوان وطباعة ومسافات مختلفة لخدمة منتجات أو عملاء مختلفين. ويستخدم كلاهما بنية الرموز نفسها، لكن على مستويين مختلفين من التجريد.

الرموز الأولية هي اللوحة الكاملة للقيم الخام المتاحة للنظام. وتشمل كل درجة لونية (من color-blue-50 إلى color-blue-900)، وكل وحدة مسافة، وكل حجم خط. ولا تُستخدم الرموز الأولية مباشرةً في المكوّنات؛ بل تشير إليها الرموز الدلالية فقط. وتُعرَّف اللوحة مرة واحدة وتُشارك بين جميع السمات والعلامات التجارية.

تعبّر الرموز الدلالية عن الغرض: color-background-page وcolor-text-primary وcolor-action-primary. ويشير كل رمز دلالي إلى قيمة رمز أولي مناسبة للسمة الحالية. وتُبنى المكوّنات باستخدام الرموز الدلالية حصرًا. هذه هي الطبقة التي تُطبَّق فيها السمات.

في السمة الفاتحة: يشير color-background-page إلى color-white، ويشير color-text-primary إلى color-gray-900، ويشير color-action-primary إلى color-blue-500. وتُعرَّف هذه التعيينات في ملف رموز خاص بالسمة، يتجاوز الطبقة الدلالية في السياق الفاتح.

في السمة الداكنة: يشير color-background-page إلى color-gray-950، ويشير color-text-primary إلى color-gray-50، ويشير color-action-primary إلى color-blue-400 (وهو أفتح قليلًا لتحقيق تباين على الخلفيات الداكنة). ولا تتغير سوى التعيينات الدلالية؛ أما اللوحة الأولية وجميع المكوّنات فتبقى دون تغيير.

تستخدم العلامة التجارية A اللون الأزرق لونًا أساسيًا (color-action-primary: {color-blue-500}). بينما تستخدم العلامة التجارية B اللون الأخضر (color-action-primary: {color-green-500}). يقرأ مكوّن الزر var(--color-action-primary)؛ ولا يعرف مطلقًا أي علامة تجارية نشطة. وتغيّر تجاوزات العلامة التجارية تعيينات الرموز الدلالية فقط، ولا تغيّر شفرة المكوّنات أبدًا.

تجعل خصائص CSS المخصّصة تبديل السمة أثناء التشغيل أمرًا بسيطًا. خزّن السمة الحالية في سمة بيانات: document.documentElement.setAttribute('data-theme', 'dark'). وتجاوز قواعد CSS الرموز الدلالية ضمن [data-theme="dark"]. ويحلّ المتصفح جميع مراجع var() بالقيم الجديدة فورًا، من دون الحاجة إلى إعادة تصيير JavaScript.

بالنسبة إلى العلامات التجارية المختلفة التي تُقدَّم عبر عمليات نشر منفصلة، استخدم تطبيق السمة وقت البناء: أنشئ ملفات CSS منفصلة للرموز لكل علامة تجارية باستخدام Style Dictionary، وحمّل ملف CSS الخاص بالعلامة التجارية الصحيحة عند بدء تشغيل التطبيق. يناسب هذا الأسلوب الحالات التي تُحدد فيها العلامة التجارية وقت النشر (مثل النطاقات أو النطاقات الفرعية أو مثيلات white-label المختلفة)، وليس وقت تفاعل المستخدم.

يتطلب النظام متعدد العلامات التجارية والسمات مصفوفة ثنائية الأبعاد: العلامة التجارية A الفاتحة، والعلامة التجارية A الداكنة، والعلامة التجارية B الفاتحة، والعلامة التجارية B الداكنة. وتتولى خصائص CSS المخصّصة ذلك بأناقة باستخدام محددات متداخلة: يتجاوز [data-brand="a"][data-theme="dark"] الرموز الدلالية لهذا التوليف المحدد. أربعة توليفات تعني أربع كتل CSS، لا أربع قواعد شفرة.

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

تحدد الحوكمة من يمكنه إضافة الرموز أو تغييرها، وما عملية المراجعة المطلوبة لذلك. تتطلب الرموز الأولية موافقة فريق التصميم. أما الرموز الدلالية فتتطلب مراجعة من فريقي التصميم والهندسة معًا. ويمكن لمالك المكوّن إدارة رموز المكوّنات. ومن دون هذه الحوكمة، تظهر رموز مكررة وينهار ضمان «المصدر الوحيد للحقيقة».

لماذا ينبغي للمكوّنات أن تشير إلى الرموز الدلالية بدلًا من الرموز الأولية؟

تغيّر السمات أوضاع الألوان داخل العلامة التجارية، بينما تمثل العلامات التجارية هويات بصرية مختلفة. الرموز الأولية هي لوحة الألوان الخام، أما الرموز الدلالية فتعبّر عن المعنى وتتيح استخدام السمات. تستخدم المكوّنات الرموز الدلالية فقط. يغيّر الوضع الداكن وتجاوزات العلامة التجارية تعيينات الرموز الدلالية فقط، من دون تغيير المكوّنات. تستخدم السمات وقت التشغيل خصائص CSS مخصصة مع محددات [data-theme]؛ بينما تنشئ العلامة التجارية وقت البناء ملف CSS منفصلًا لكل علامة تجارية. تحافظ حوكمة الرموز وإصداراتها على اتساق النظام مع تطوره.