الدرس 1: Design Tokens — من القيم المضمّنة يدويًا إلى نظام توكنز
يمكن لكل شاشة أن تختار لونًا وقيمة تباعد وخطًا 'تبدو مناسبة' بمفردها — لكن بعد عشرات الشاشات تتراكم هذه الفروق الصغيرة: أزرق مختلف قليلًا هنا، وتباعد مختلف قليلًا هناك، حتى يصبح المنتج بأكمله غير متّسق. ثم تأتي اللحظة التي تحتاج فيها إلى تغيير لون العلامة التجارية، أو إضافة الوضع الداكن، فتكتشف أن ا
التوكن يشبه بطاقة وصفة للون في المختبر: تكتب مرة واحدة 'بنفسجي العلامة التجارية = هذا المزيج'، ثم يطلب كل من يحتاج اللون البطاقة بدلًا من تخمين المزيج من جديد.
- design token
- قرار تصميمي له اسم — لون أو تباعد أو نصف قطر — يُخزَّن في مكان واحد ويُشار إليه من كل مكان، بدلًا من قيمة مضمّنة يدويًا تُكرَّر يدويًا في كل موضع.
- Tailwind theme
- الكائن `theme` داخل `tailwind.config.ts` حيث تعرّف توكنز المشروع — ومنها يولّد Tailwind الـ utility classes.
- لون دلالي
- توكن يُسمّى بحسب دوره لا بحسب درجة لونه — `brand` أو `danger` بدلًا من `purple-500` — بحيث لا يستلزم تبديل درجة اللون إعادة تسمية أي شيء في الكود.
- قيمة اعتباطية
- صيغة في Tailwind مثل `bg-[#6c5ce7]` تتجاوز الـ theme وتحقن قيمة مضمّنة يدويًا مباشرةً داخل الـ class — الطريق السريع الذي يعيدك إلى المشكلة ذاتها التي تحلّها التوكنز.
