---
title: "اللون"
description: "أدوار الألوان، واللون الأساسي الأحادي، ولون التمييز الوحيد، وكيف يُولَّد كل مخطط لوني ويُفحص."
url: "https://tanrei.chnotchy.com/ar/foundations/color/"
last_updated: 2026-10-23T21:17:12.000Z
---

# اللون

> أدوار الألوان، واللون الأساسي الأحادي، ولون التمييز الوحيد، وكيف يُولَّد كل مخطط لوني ويُفحص.

لا يطلب 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 و outline-variant

دورا الحدّ متشابهان في المظهر ومتعاكسان في الوظيفة.

| الدور | الغرض | التباين |
| --- | --- | --- |
| `outline` | **حدّ وظيفي**: الشيء الوحيد الذي يبيّن موضع عنصر التحكم، كما في حقل نص فارغ أو خانة اختيار غير محددة أو زر من الطراز outlined. | 3:1 على الأقل مقابل كل دور سطح |
| `outline-variant` | **خط رفيع للزينة**: الفواصل، وحدود البطاقات، وحلقة الارتفاع. يجب ألا تُخفي إزالته أي معلومة. | لا متطلب عند التباين القياسي، حيث هو أسود أو أبيض منخفض الشفافية. 3:1 على الأقل عند التباين المتوسط و 4.5:1 عند العالي، مقابل كل دور سطح، وأضعف دائمًا من `outline` |

> [!WARNING]
> **تنبيه**
>
> إذا كان الحدّ هو الدليل الوحيد على وجود عنصر تحكم، فيجب أن يستخدم `outline`. الخط الرفيع بشفافية 8% لطيف المظهر، وغير مرئي لكثير من الناس.

## مستويات التباين

توجد كل سمة بثلاثة مستويات تباين. **القياسي** هو الافتراضي. و**المتوسط** و**العالي** يدفعان أدوار المحتوى نحو الطرفين ويقوّيان دورَي الحدّ كليهما. على الويب يُطبَّق التباين العالي تلقائيًّا عند `prefers-contrast: more`؛ أما المنصات الأصلية فتتبع إعداد نظامها. جرّبه هنا (المفتاح يؤثر في الصفحة كلها):

## كيف تُولَّد المخططات اللونية

لا تُختار الألوان باليد. يعلن ملف النظام (`tokens/systems/core.system.json`) لوحات الألوان (لونًا بذرة للون التمييز وللخطأ، وصبغة الألوان المحايدة وتشبّعها) ويذكر، في صورة بيانات، أي درجة لونية من أي لوحة يأخذها كل دور في الفاتح والداكن عند كل مستوى تباين. وعند البناء يقوم المولِّد بما يلي:

1. يحوّل كل لون مفتاحي إلى **لوحة درجات لونية** في الفضاء اللوني HCT باستخدام المكتبة `material-color-utilities` المرخّصة بـ Apache-2.0، وفي هذا الفضاء تقابل الدرجة اللونية (tone) التباينَ على نحو يمكن توقّعه؛
2. يحصر اللوحات المحايدة في حدود تشبّع (chroma) السمة، وهو صفر افتراضيًّا للحصول على رماديات خالصة؛
3. يسند درجة لونية إلى كل دور في الفاتح والداكن عند كل مستوى تباين؛
4. يكتب النتيجة ملفات DTCG تحت `tokens/generated/`.

تحمل خوارزمية المولِّد رقم إصدار (`specVersion`)، فيكون أي تغيير في المقابلة حدثًا مقصودًا يمكن مراجعته، لا انزياحًا صامتًا في كل لون.

## ثوابت يفرضها CI

في تركيبات السمة والتباين الست كلها، يفشل بناء الرموز إلا إذا:

- بلغ كل زوج `(role, on-role)` نسبة **4.5:1**، ونسبة **7:1** في المخططين عاليي التباين؛
- بلغ `outline` نسبة **3:1** مقابل كل دور سطح؛
- بلغ `focus-ring` نسبة **3:1** مقابل الأسطح التي يُرسم عليها.

لا يجوز تخفيف عتبة لكي ينجح البناء. تجد القائمة الكاملة للأدوار والقيم في [مرجع رموز الألوان](https://tanrei.chnotchy.com/ar/tokens/color/).