الأدلة
السمات والكثافة
النظام يتكيّف على محورين مستقلين: السمة (فاتح/داكن) والكثافة (الإيقاع المكاني). كلاهما يعمل بتبديل رمز، لا بإعادة كتابة المكوّنات.
السمة
الوضع الفاتح والداكن يُدار بسمة data-theme على عنصر html. الرموز الدلالية تُعاد تعريفها في كتلة الوضع الداكن، فتتكيّف كل المكوّنات تلقائيا دون تعديل. جرّب الزر في أعلى الموقع.
<html data-theme="dark"> /* or "light" */
:root { --color-bg-base-canvas: #ffffff; }
:root[data-theme="dark"] { --color-bg-base-canvas: #15161b; }الظلال واعية بالسمة
الكثافة
الكثافة تضبط الإيقاع المكاني على ثلاثة أوضاع: مضغوط، افتراضي، مريح. تعمل عبر عائلات المسافات الدلالية (inset / stack / gap / section) التي تتغيّر قيمها حسب الوضع، فيعيد الشريط تدفّق الصفحة كاملة دون لمس مكوّن. راجع صفحة المسافات.
محوران مستقلان
السمة والكثافة لا يتقاطعان: يمكن أن يكون النظام فاتحا-مضغوطا أو داكنا-مريحا أو أي تركيبة. لأن كليهما يعمل على طبقة الرموز، لا حاجة لأي شرط في المكوّن.
الاتجاه
الاتجاه محور ثالث يُدار بـ dir="rtl" على html. استخدم الخصائص المنطقية (inline-start / text-start / ms- / me-) لا الفيزيائية، فينعكس التخطيط تلقائيا بين العربية والإنجليزية. التفاصيل في أساس الاتجاه والتوطين.
افعل ولا تفعل
- اعتمد على الرموز الدلالية لتتكيّف مع السمة تلقائيا.
- اختبر كل شاشة في الوضعين وفي الاتجاهين.
- لا تكتب لونا للوضع الداكن يدويا داخل المكوّن.
- لا تستخدم خصائص فيزيائية (left/right) في تخطيط قد ينعكس.