رموز التصميم

كل لون وحجم وزاوية ومسافة ونمط نص وظل ومدة في Ritla UI مصدره رمز تصميم. لا يكتب أي مكوّن قيمة ثابتة، وهذا ما يتيح للثيم أن يغيّر الشكل دون أن يتغير سطر في التخطيط، وما يمنع ملف Figma والكود من الابتعاد أحدهما عن الآخر.

اسم واحد من Figma إلى الكود#

متغيرات Figma في الثيم هي المصدر. يحوّلها البناء إلى متغيرات CSS وأصناف Tailwind، واسم الصنف هو مسار المتغير في Figma دون مجموعته العليا، فيتحدث المصمم والمطور بالكلمة نفسها.

أصناف المسافات مسمّاة بالبكسل (p-16 تعني حشوة 16 بكسل)، ولا يوجد منها إلا الدرجات التي يعرّفها الثيم. ألوان Tailwind ومقاييسه الافتراضية محذوفة، فصنف مثل bg-red-500 أو text-sm لا ينتج شيئًا، بدل أن ينتج قيمة من خارج النظام.

الفاتح والداكن والعربية تبدّل المتغيرات لا الأصناف#

الوضع الفاتح والداكن، والإنجليزية والعربية، أوضاع للمتغيرات نفسها. تبديل أحدها يغيّر القيم التي تشير إليها المتغيرات، وتبقى الأصناف على المكوّن كما هي. لذلك لا يحمل أي مكوّن صنفًا مشروطًا بالوضع الداكن مثل dark:، ولذلك يأخذ النص العربي عائلة خطه وارتفاع أسطره الأكبر وتباعده الصفري دون صنف واحد خاص بالاتجاه.

منطقي من الأساس#

كل صنف يتأثر بالاتجاه صنف منطقي: ms-16 وme-16 للهوامش، وps-16 وpe-16 للحشوة، وstart-0 وend-0 للموضع، وborder-s وrounded-s-8 للحواف. لا يوجد صنف فيزيائي مثل ml-* أو pl-* تمتد إليه اليد. اقرأ السبب في مبادئ العربية والاتجاه.

من أين تأتي رموز التصميم#

متغيرات ثيم كنز موجودة في ملف Figma الخاص به. تتحول لقطة منها إلى ملف رموز تصميم بمعيار W3C، ويبني منه Style Dictionary متغيرات CSS وثيم Tailwind. تعرض صفحة ثيم كنز درجات الألوان والخطوط كما أنتجها البناء.