اللون
أدوار الألوان، واللون الأساسي الأحادي، ولون التمييز الوحيد، وكيف يُولَّد كل مخطط لوني ويُفحص.
لا يطلب Tanrei من أي مكوّن أن يختار لونًا. تطلب المكوّنات دورًا، مثل primary أو surface-container، والسمة الفعّالة هي التي تقرر أي لون يملأ ذلك الدور. الأدوار تعرّفها مفردات Tanrei، وقيمها تحدّدها طبقة كل نظام تصميم.
- الأغراض:
primaryوsecondary، وأغراض الحالة الأربعةerrorوsuccessوwarningوinfo. يأتي كل منها في مجموعة من أربعة: اللون نفسه، ولونon-المقابل له للمحتوى الموضوع فوقه، و-containerالأهدأ، وon-…-container. - الأسطح:
surface، وسلّم الدرجات الخمس منsurface-container-lowestإلىsurface-container-highest، ومعهاsurface-dimوsurface-bright. المحتوى على أي سطح يستخدمon-surfaceأوon-surface-variantالأهدأ. - الحدود:
outlineوoutline-variant(انظر أدناه). - الأدوار المعكوسة للعناصر التي تقلب السمة عمدًا، مثل شريط الإشعار (Snackbar).
- الأدوار الثابتة التي تحتفظ بالدرجة اللونية نفسها في الفاتح والداكن.
- الأدوار المساعدة:
scrimوshadowوfocus-ringولونا الحلقة والظل المستخدمان في الارتفاع.
اقرن كل تعبئة دائمًا بدور on- الخاص بها. فهذا الاقتران هو ما تضمنه فحوص التباين.
في السمة الافتراضية يكون primary قريبًا من الأسود في الوضع الفاتح وقريبًا من الأبيض في الوضع الداكن. فأهم إجراء على الشاشة هو إذن أعلى ما عليها تباينًا، ولا ينافس ألوان المنتج نفسه أبدًا. أما secondary فلون محايد أنعم للإجراءات المساندة.
لون التمييز (accent) ليس جزءًا من المفردات الأساس (core). هو لوحة ألوان يعلنها نظام Tanrei الافتراضي (اللون البذرة #30a3f0)، فتنال الأدوار الأربعة نفسها التي ينالها أي غرض: accent و on-accent و accent-container و on-accent-container. يستمدّ الدور الأساس focus-ring لونه منها، ولا يستمدّ منها شيء آخر: في النظام الافتراضي يأخذ link لون primary، ويُميَّز الرابط من النص المجاور له بالخط الذي تحته. ويعلن المنتج لوحاته الخاصة بالطريقة نفسها، كلون علامة تجارية يجب ألا يُعاد حسابه، أو لونَي «صحيح» و«خاطئ» في اختبار؛ والإعداد الجاهز الذي يحاكي Material Design 3 يعلن tertiary بهذه الطريقة، بدل أن يحمل Tanrei تلك الخانة عن الجميع. لا تستخدم لون التمييز للزينة؛ فحين يكون كل شيء أزرق لا يبقى شيء مميَّزًا.
دورا الحدّ متشابهان في المظهر ومتعاكسان في الوظيفة.
| الدور | الغرض | التباين |
|---|---|---|
outline |
حدّ وظيفي: الشيء الوحيد الذي يبيّن موضع عنصر التحكم، كما في حقل نص فارغ أو خانة اختيار غير محددة أو زر من الطراز outlined. | 3:1 على الأقل مقابل كل دور سطح |
outline-variant |
خط رفيع للزينة: الفواصل، وحدود البطاقات، وحلقة الارتفاع. يجب ألا تُخفي إزالته أي معلومة. | لا متطلب عند التباين القياسي، حيث هو أسود أو أبيض منخفض الشفافية. 3:1 على الأقل عند التباين المتوسط و 4.5:1 عند العالي، مقابل كل دور سطح، وأضعف دائمًا من outline |
تنبيه
إذا كان الحدّ هو الدليل الوحيد على وجود عنصر تحكم، فيجب أن يستخدم outline. الخط الرفيع بشفافية 8% لطيف المظهر، وغير مرئي لكثير من الناس.
توجد كل سمة بثلاثة مستويات تباين. القياسي هو الافتراضي. والمتوسط والعالي يدفعان أدوار المحتوى نحو الطرفين ويقوّيان دورَي الحدّ كليهما. على الويب يُطبَّق التباين العالي تلقائيًّا عند prefers-contrast: more؛ أما المنصات الأصلية فتتبع إعداد نظامها. جرّبه هنا (المفتاح يؤثر في الصفحة كلها):
التباين
لا تُختار الألوان باليد. يعلن ملف النظام (tokens/systems/core.system.json) لوحات الألوان (لونًا بذرة للون التمييز وللخطأ، وصبغة الألوان المحايدة وتشبّعها) ويذكر، في صورة بيانات، أي درجة لونية من أي لوحة يأخذها كل دور في الفاتح والداكن عند كل مستوى تباين. وعند البناء يقوم المولِّد بما يلي:
- يحوّل كل لون مفتاحي إلى لوحة درجات لونية في الفضاء اللوني HCT باستخدام المكتبة
material-color-utilitiesالمرخّصة بـ Apache-2.0، وفي هذا الفضاء تقابل الدرجة اللونية (tone) التباينَ على نحو يمكن توقّعه؛ - يحصر اللوحات المحايدة في حدود تشبّع (chroma) السمة، وهو صفر افتراضيًّا للحصول على رماديات خالصة؛
- يسند درجة لونية إلى كل دور في الفاتح والداكن عند كل مستوى تباين؛
- يكتب النتيجة ملفات DTCG تحت
tokens/generated/.
تحمل خوارزمية المولِّد رقم إصدار (specVersion)، فيكون أي تغيير في المقابلة حدثًا مقصودًا يمكن مراجعته، لا انزياحًا صامتًا في كل لون.
في تركيبات السمة والتباين الست كلها، يفشل بناء الرموز إلا إذا:
- بلغ كل زوج
(role, on-role)نسبة 4.5:1، ونسبة 7:1 في المخططين عاليي التباين؛ - بلغ
outlineنسبة 3:1 مقابل كل دور سطح؛ - بلغ
focus-ringنسبة 3:1 مقابل الأسطح التي يُرسم عليها.
لا يجوز تخفيف عتبة لكي ينجح البناء. تجد القائمة الكاملة للأدوار والقيم في مرجع رموز الألوان.