الدرس 3: اللون والتباين والوضع الداكن — سمة واحدة، وضعان
يطلب مدير المنتج الوضع الداكن، فتكتشف أن كل مكوّن يحتاج إلى `dark:bg-gray-900 dark:text-white` خاص به. يعلّمك هذا الدرس تعريف `semantic color tokens` باستخدام متغيّرات CSS — بحيث يصبح الوضع الداكن تبديل قيمة في مكان واحد، لا `dark:` مكرّرة على كل عنصر.
الرمز اللوني الدلالي أشبه بقول 'لون الجدار' بدلاً من 'هذا البيج بالتحديد'. انتقل إلى الوضع الليلي فيُعاد طلاء كل ما وُسم بـ 'لون الجدار' دفعة واحدة — دون لمس كل جدار على حدة.
- الرمز اللوني الدلالي
- رمز يُسمّى وفق دوره — `surface`، `on-surface`، `border` — لا وفق درجة اللون. يطلب المكوّن الدور، وتقرّر السمة أي درجة لون تناسب كل وضع.
- التنسيق بمتغيّرات CSS
- تعريف قيم الألوان كمتغيّرات CSS (`--surface`) داخل `:root`، وتجاوزها ضمن `.dark`. تشير المكوّنات إلى المتغيّر، فتبديل القيمة يغيّرها جميعاً دفعة واحدة.
- نسبة التباين
- مقياس لقابلية القراءة بين لون النص والخلفية. يتطلّب معيار WCAG AA نسبة لا تقل عن 4.5:1 للنص العادي — وعلى الرمز الدلالي أن يحقّقها في كلا الوضعين.
- استراتيجية الوضع الداكن
- اختيار كيفية تنفيذ الوضع الداكن: تكرار `dark:` على كل عنصر (غير قابل للصيانة) مقابل تبديل قيم الرموز في مكان واحد عبر فئة `.dark` (قابل للصيانة).
