رموز التصميم

رمز التصميم (token) قرار تصميمي له اسم. يخزّن Tanrei كل لون وحجم ونمط نص ونصف قطر وظل ومدة وعتامة في صورة رمز بصيغة Design Tokens Community Group (الإصدار 2025.10)، تحت المجلد tokens/ في المستودع. وهذا المجلد أحد مصدرَي الحقيقة في المشروع.

المستويات

link

تحت المستويات الثلاثة التالية مستوى رابع هو dial: الأرقام الثمانية التي تنبع منها كل قيمة مشتقة. انظر أنظمة التصميم والتخصيص لمعرفة أقراص الضبط والطبقات وكيف يخصّص منتجٌ ما Tanrei.

المستوى	البادئة	ما يحمله	مثال
المرجع	tanrei.ref.*	المادة الخام: لوحات الدرجات اللونية، وسلالم الشفافية، والخطوط وأوزانها.	tanrei.ref.palette.neutral.10
النظام	tanrei.sys.*	قرارات لها دور: الغرض الذي وُضع له لون أو حجم. السمات تغيّر هذا المستوى.	tanrei.sys.color.primary
المكوّن	tanrei.comp.*	روابط من أجزاء المكوّن إلى رموز النظام.	tanrei.comp.button.filled.container.color

لا يشير أي مستوى إلا إلى ما تحته: رموز المكوّن أسماء بديلة (aliases) لرموز النظام، ورموز النظام أسماء بديلة لرموز المرجع.

قاعدتان تحفظان للمستويات فائدتها، ويفرضهما كلتيهما الأمر pnpm validate:

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

السياقات

link

ليس للرمز قيمة واحدة؛ بل قيمة لكل سياق. يحلّ Tanrei اليوم محورين من السياقات:

• السمة: فاتحة أو داكنة.
• التباين: قياسي أو متوسط أو عالٍ.

ينتج عن ذلك ست تركيبات محلولة. يصفها ملف محلِّل (resolver) بصيغة DTCG (tokens/tanrei.resolver.json)، وتُكتب في design/tokens/ ملفاتٍ محلولة بالكامل، وهي ما يعرضه مرجع الرموز في هذا الموقع.

التسمية

link

اسم الرمز هو مساره. وتكتب كل منصة المسار نفسه بعرفها الخاص:

المنصة	ما يصير إليه tanrei.sys.color.primary
CSS	--tanrei-sys-color-primary
Swift و Kotlin و Dart و TypeScript	ثابت مولَّد تحت نطاق أسماء الرموز في الحزمة

نطاق الأسماء وبادئة CSS وبادئة الوسوم تأتي من ملف واحد هو tanrei.config.json. ولا يُسمح لأي شيء آخر في المستودع بأن يكتبها مباشرة.

من المصدر إلى المنصة

link

• foldertokens/مصدر الحقيقة، يُحرَّر باليد
  • folderref/
  • foldersys/
  • foldercomp/
  • folderthemes/مُدخَل مولِّد المخططات اللونية
  • foldergenerated/لوحات الألوان والمخططات التي يكتبها المولِّد
  • drafttanrei.resolver.json
• folderdesign/tokens/التركيبات الست المحلولة
• folderpackages/
  • draftweb/src/generated/tokens.css
  • draftswiftui/…/Generated/TanreiTokens.swift
  • foldercompose/…/tokens/
  • draftflutter/lib/src/generated/tokens.g.dart
  • draftreact-native/src/generated/tokens.ts

يعيد الأمر pnpm generate بناء كل ملف مشتق. ويعيد CI التوليد ويفشل عند أي اختلاف، فلا يمكن أن يُحرَّر ملف مولَّد باليد ثم يبقى تعديله.

ملاحظة

في CSS تُكتب رموز الألوان أزواجًا بالدالة light-dark(). ورقة أنماط واحدة تخدم السمتين، وتستطيع أي شجرة فرعية أن تبدّل سمتها بمجرد تغيير قيمة color-scheme لديها.