بعد ثمانية أشهر من استحواذ Northwind على Tidewater، انتقل موقعها التسويقي إلى Northwind UI. جاء فريق علامة Tidewater ومعه دليل علامة من 60 صفحة، وخط serif، ولوحة ألوان فيروزية، وأزرار على شكل حبّة دواء (pill). وجاء أيضًا بقائمة من 23 «متطلّبًا للعلامة» في المكوّنات. كانت مهمّتنا أن نقول نعم للعلامة ولا لمعظم القائمة، وأن نجعل الأمرين يبدوان معقولين.
\nرسم الحوار الأول حدًّا واضحًا. العلامة تغيّر الشخصية: لوحة الألوان، والخطوط، ونصف قطر الزوايا، وأسلوب الرسوم، ونبرة الكتابة. ولا تغيّر السلوك أو البنية: التعامل مع لوحة المفاتيح، وإدارة التركيز، وسُلّم المسافات، وشبكات التخطيط، والـ component APIs، وإمكانية الوصول. يمكن أن تكون أزرار Tidewater حبّات فيروزية بتسمية بخط serif. لكن لا يمكنها أن تغلق النوافذ عند النقر خارجها بينما لا تفعل نوافذ Northwind ذلك، لأن هذا قرار منتج لا قرار علامة.
\nمن المتطلّبات الثلاثة والعشرين، تبيّن أن 15 منها بصرية وتناسب الـ tokens. وستة كانت طلبات سلوك، فمرّت عبر مراجعة الـ API كاقتراحات عادية للعلامتين معًا (قُبل اثنان منها، للعلامتين). وأُسقط اثنان.
\nقدّم القسم 2 تدرّجًا للعلامة حتى يستطيع الوضع الداكن اختيار الدرجات. ولعلامة ثانية كاملة، يكبر ذلك التدرّج ليصبح طبقة خاصة بين الـ primitives والـ semantic tokens:
\nطبقة العلامة صغيرة عن قصد. في Northwind تضم 24 token: تدرّج ألوان من 50 إلى 900، وعائلة خط للعناوين وأخرى للمتن، ونصفا قطر، ولون لحلقة التركيز. الـ semantic tokens تشير إلى الـ brand tokens، والمكوّنات لا تعرف أبدًا أن هناك علامة أصلًا.
\n:root,\n[data-brand] {\n --nw-color-action-bg: var(--nw-brand-600);\n --nw-color-action-text: var(--nw-white);\n --nw-font-heading: var(--nw-brand-font-heading);\n --nw-radius-control: var(--nw-brand-radius-control);\n}\n\n[data-brand=\"tidewater\"] {\n --nw-brand-600: var(--nw-teal-600);\n --nw-brand-700: var(--nw-teal-700);\n --nw-brand-font-heading: Georgia, 'Times New Roman', serif;\n --nw-brand-radius-control: 999px;\n /* Tidewater's 600 fails contrast with white text: use the darker step. */\n --nw-color-action-bg: var(--nw-brand-700);\n}الـ selector المسمّى :root, [data-brand] مهمّ. تذكّر من درس الـ themes أن الـ custom property التي تحتوي var() تُحسب حيث عُرّفت. لو عُرّف --nw-color-action-bg على :root وحده، لحُسب مرة واحدة بتدرّج Northwind، ولورث قسم Tidewater في الصفحة نفسها أزرق Northwind. أما إعادة تعريف الروابط الدلالية على كل عنصر [data-brand] فتجعلها تُحسب داخل نطاق كل علامة. وهذا ما يسمح لصفحة المقارنة المشتركة في Northwind بعرض العلامتين جنبًا إلى جنب.
السطر الأخير في كتلة Tidewater هو المثير للاهتمام. لون الإجراء في Northwind هو الدرجة 600 من تدرّجها. أما 600 في Tidewater فأفتح، فيفشل نص الزر الأبيض فوقه:
\nfunction luminance(hex) {\n const [r, g, b] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255)\n .map((v) => (v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4));\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n}\nfunction contrast(a, b) {\n const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);\n return (hi + 0.05) / (lo + 0.05);\n}\n\nconst pairs = { 'northwind blue-600': '#1f5ae0', 'tidewater teal-600': '#0d9488', 'tidewater teal-700': '#0f766e' };\nfor (const [name, bg] of Object.entries(pairs)) {\n const ratio = contrast(bg, '#ffffff');\n console.log(`${name} + white text: ${ratio.toFixed(2)}:1 ${ratio >= 4.5 ? 'pass' : 'FAIL'}`);\n}لذا تربط Tidewater الدور الدلالي نفسه بدرجة مختلفة. ولهذا لا تكتفي طبقة العلامة بتبديل لوحات الألوان عشوائيًا: فالربط الدلالي لكل علامة مصمَّم ومفحوص. وفحص التباين في خط الإنتاج لدى Northwind يمرّ على كل زوج موثّق في كل علامة وكل theme، وقد التقط هذه المشكلة قبل أن يرى فريق العلامة زرًا واحدًا.
\n\nكل واجهة تحمّل ما تحتاجه. المواقع التسويقية تضع data-brand على <html> ولا تحمّل إلا ملف CSS الخاص بعلامتها، الذي يولّده خط الإنتاج من primitives + brand-tidewater + semantic. أما تطبيق الـ dispatch، الذي يعرض العلامتين في شاشات الإدارة، فيحمّل الكتلتين. وفي Figma تعيش البنية نفسها في المجموعات الممتدّة، فيرى مصمّمو Tidewater المتغيّرات الدلالية المشتركة بقيم علامتهم.
وكل علامة تضاعف أيضًا مصفوفة الاختبار. مع علامتين ونظامي ألوان ومستويي كثافة، يُعرض كل مكوّن أساسي في ثماني تركيبات في المجموعة البصرية من القسم 4. يبدو ذلك مكلفًا حتى تتذكّر البديل: مصمّم في Tidewater يكتشف في الإنتاج أن حلقة التركيز في الوضع الداكن غير مرئية على الفيروزي. الآلات مراجِعون رخيصون للتركيبات؛ والبشر لا ينظرون إلا إلى الفروقات.
\n\nفي التمرين تضيف Tidewater إلى صفحة تظهر فيها العلامتان جنبًا إلى جنب. وبعدها تقيس هل يُستخدم كل هذا فعلًا.
\n","toc":[{"id":"sec-1","text":"ما يحقّ للعلامة تغييره","level":2},{"id":"sec-2","text":"طبقة العلامة","level":2},{"id":"sec-3","text":"التباين لكل علامة","level":2},{"id":"sec-4","text":"تسليم العلامات","level":2}],"takeaways":["العلامة تغيّر الشخصية (تدرّج الألوان، والخطوط، والأشكال) عبر مجموعة صغيرة من brand tokens؛ أما السلوك والمسافات وإمكانية الوصول فتبقى مشتركة.","ضع طبقة للعلامة بين الـ primitives والـ semantic tokens، حتى تربط كل علامة الأسماء الدلالية نفسها بلوحة ألوانها الخاصة.","يجب فحص التباين لكل علامة على حدة، وقد تحتاج علامة درجة مختلفة من تدرّجها للدور الدلالي نفسه.","حين يمكن أن تظهر العلامات جنبًا إلى جنب، أعد تعريف الروابط الدلالية تحت الـ selector الخاص بالعلامة حتى تُحسب داخل نطاق كل علامة."],"further":[{"title":"Understanding SC 1.4.3 Contrast (Minimum) (W3C)","url":"https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html"},{"title":"Extend a variable collection (Figma)","url":"https://help.figma.com/hc/en-us/articles/36346281624471-Extend-a-variable-collection"},{"title":"Using CSS custom properties (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties"}],"quiz":[{"q":"يطلب فريق علامة Tidewater أن يُغلق الـ Dialog الخاص بها حين ينقر الناس خارجه، بينما لا يفعل ذلك Dialog الخاص بـ Northwind. كيف يجب أن يستجيب النظام؟
","options":[{"text":"إضافة prop باسمbrand إلى Dialog يبدّل السلوك.","why":"السلوك الخاص بكل علامة داخل المكوّنات يعني أن كل مكوّن يجب أن يعرف عن كل علامة، وهذا لا يصمد بعد علامتين."},{"text":"نسخ Dialog منفصل لـ Tidewater.","why":"نسختا Dialog ستتباعدان في الإصلاحات وإمكانية الوصول، وهذه هي التكلفة التي وُجد النظام لتجنّبها."},{"text":"معاملته كسؤال عن سلوك المنتج للعلامتين معًا يُحسم في مراجعة الـ API؛ فالعلامات تغيّر الشكل والصوت لا السلوك.","why":"صحيح. إن كان الإغلاق بالنقر خارجًا صحيحًا فهو صحيح للعلامتين؛ وإن لم يكن، فهو خاطئ للاثنتين."},{"text":"ترك Tidewater تخصّص JavaScript الخاص بالـ Dialog عبر theme token.","why":"الـ tokens تصف قيمًا بصرية؛ والسلوك المخبّأ في الـ tokens غير قابل للاختبار ومفاجئ."}],"answer":2},{"q":"نسبة التباين لنص أبيض على teal-600 الخاص بـ Tidewater هي 3.74:1. ماذا يجب أن يكون ربط Tidewater لـ --nw-color-action-bg؟
في صفحة المقارنة المشتركة بين العلامتين، تبقى أزرار قسم Tidewater بأزرق Northwind، رغم أن [data-brand="tidewater"] يحدّد --nw-brand-600 بشكل صحيح. ما الناقص؟
--nw-color-action-bg معرّف على :root وحده، فحُسبت قيمته بتدرّج Northwind عند الجذر.","why":"صحيح. إعادة تعريف الروابط الدلالية تحت [data-brand] تجعلها تُحسب داخل قسم كل علامة."},{"text":"سمات data-brand لا تعمل إلا على <html>.","why":"الـ attribute selectors تطابق أي عنصر؛ المشكلة في مكان حساب الـ semantic token."},{"text":"يحتاج الزر إلى class باسم .tidewater.","why":"الـ classes الواعية بالعلامة على المكوّنات هي بالضبط ما تتجنّبه طبقات الـ tokens."},{"text":"الـ custom properties لا يمكن تخصيصها مرتين في صفحة واحدة.","why":"يمكن إعادة تعريف الـ custom properties في أي مستوى؛ وكل عنصر يرى أقرب تعريف إليه."}],"answer":0}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"صفحة المقارنة المشتركة تعرض العلامتين جنبًا إلى جنب، كلٌّ منهما في قسم له data-brand خاص به. أضف علامة Tidewater دون لمس قواعد المكوّنات:
--nw-font-georgia)،999px)،--nw-teal-700، لأن teal-600 يفشل في التباين مع النص الأبيض،حاليًا الطبقة الدلالية معرّفة على :root وحده. فكّر أين تُحسب قيمها.
[data-brand="tidewater"] { … } تربط الـ brand tokens (--nw-brand-font-heading و--nw-brand-radius-control والتدرّج) بقيم Tidewater.","الـ brand tokens وحدها لن تصل إلى القسم: فالـ semantic tokens حُسبت على :root بقيم Northwind. غيّر الـ selector الخاص بالقاعدة الدلالية إلى :root, [data-brand].","داخل كتلة Tidewater، اربط أيضًا --nw-color-action-bg بـ var(--nw-brand-700)."],"explanation":"كتلة العلامة لا تبدّل إلا قيم طبقة العلامة، ومعها ربط دلالي واحد تحتاجه Tidewater فعلًا من أجل التباين. وإعادة تعريف الطبقة الدلالية تحت [data-brand] هي ما يجعل كل قسم يحسب --nw-color-action-bg و--nw-font-heading و--nw-radius-control من الـ brand tokens الخاصة به، بدل أن يرث قيمًا حُسبت مسبقًا عند الجذر. والمكوّنات لا تذكر أي علامة أبدًا، فالعلامة الثالثة مجرّد كتلة إضافية.