Theme Studio
حرِّك بضعة عناصر تحكم، وشاهد مكوّنات حقيقية تتبعك، ثم صدِّر طبقة نظام تصميم صالحة تستطيع بناءها لكل منصة.
ينبغي أن يبدو نظام التصميم صحيحًا افتراضيًّا، وأن يتبعك حين تغيّر شيئًا واحدًا. و Studio هو هذه الفكرة وقد صارت ملموسة: اختر أساسًا، أدر قرص ضبط، اختر لونًا، غيِّر رمزًا (token) واحدًا، أضف رمزًا من عندك، ثم صدِّر ملف الطبقة الصغير الذي يذكر ما غيّرته بالضبط ولا شيء غيره.
لا شيء فيه نموذج شكلي. المعاينة نطاق نظام حقيقي بمكوّنات حقيقية، وتُطبَّق عليها ورقة الأنماط نفسها التي يكتبها tanrei build لطبقتك، محسوبةً في متصفحك بالمحرّك نفسه والمُصدِر نفسه وفحوص الإتاحة نفسها. وتبني اختبارات المستودع طبقات Studio بسلسلة أدوات سطر الأوامر، وتشترط أن تتطابق الورقة كلها وقيمة كل رمز في المخططات الستة وكل تحذير.
يظهر موضوعك على خمس شاشات مبنية من هذه المكوّنات: نظرة عامة تضم كل أنواع المكوّنات، ولوحة معلومات، ونموذج إعدادات، وقائمة مع تفاصيلها، وصفحة توثيق — في الوضع الفاتح أو الداكن أو كليهما جنبًا إلى جنب، وبكل مستوى من مستويات التباين الثلاثة. أمّا الشاشة التي تنظر إليها وطريقة عرضها فليستا جزءًا من موضوعك، فلا يُحفظ شيء من ذلك في الملف.
تبقى الطبقة التي تصنعها في هذا المتصفح وفي عنوان الصفحة: رابط Studio يفتحه على الطبقة نفسها. ولا يكتب فتح الرابط فوق الطبقة التي يحفظها المتصفح: يظهر فوق Studio شريط يقول أي طبقة جاءت مع الرابط وعلى أي نظام بُنيت، ويُبقي Studio طبقتك محفوظة إلى أن تعدّل طبقة الرابط أو تختار الاحتفاظ بها، ويمكنك أيضًا العودة إلى طبقتك.
يبدأ شريط Studio بنقطة بداية طبقتك: Tanrei، النظام الافتراضي، أو مثال من معرض السمات — m3-like وcupertino وm3-expressive-like — وكل مثال عرضٌ لما تستطيع الطبقة محاكاته، وليس التصميم الرسمي لذلك النظام. وتظهر Core، الطبقة الجذر في Tanrei، في القائمة لكن لا يمكن اختيارها بعد: ما زالت تحمل قيم النظام الافتراضي، وستصبح بداية فارغة حين تصبح هذه القيم محايدة. ومن القائمة نفسها تستورد ملف طبقة مكان الطبقة التي تصنعها. الملف الذي يرفضه المخطط لا يُحمَّل، وتقول اللوحة السبب؛ والملف الذي يقبله يُحمَّل، وتعرض اللوحة ما يجده محرّك الرموز فيه. وإن كانت في طبقتك تغييرات، يسأل Studio قبل استبدالها، ويعيدها تراجع.
يفتح زر تصدير في شريط Studio لوحة جانبية فيها الملف وما تفعله به. يقول سطرها الأول هل يقبل المخططُ ومحرّكُ الرموز وفحوصُ البناء الملف. والطبقة التي بدأت من مثال في معرض السمات تعتمد على ذلك المثال افتراضيًّا: يبقى الملف صغيرًا ويتبع المثال كلما تحسّن. ويمكنك أيضًا كتابة كل القيم، فلا يتغيّر الملف حين يتغيّر المثال؛ أما المكوّن الموجود في المثال فيبقى مأخوذًا منه. ثم يأتي الملف نفسه، لنسخه أو تنزيله؛ وتصريحات ورقة الأنماط التي يكتبها الأمر tanrei build للويب المختلفة عن تصريحات النظام الأساس، مع ورقة الأنماط كاملة للتنزيل؛ والخطوات التالية، وكل أمر فيها يقبله CLI كما هو، مع رابط لمشاركة الطبقة.
يسرد العمود الجانبي الأجزاء التسعة للمظهر — لون العلامة التجارية، والرمادي، والخط، والحجم، والزوايا، وتنعيم الزوايا، والأيقونات، واستجابة الضغط، ومظهر التركيز — ولكلٍّ منها قيمته الحالية وعيّنة صغيرة، ثم بقية ما تحمله الطبقة. وبالضغط على صفّ تظهر عناصر التحكم الخاصة به في اللوحة على الجانب الآخر. اقفل الصفوف التي تعجبك، فيعطي خلط عشوائي كل صف آخر قيمة جديدة، ويمكنك التراجع عن ذلك بخطوة واحدة. أمّا فحص فيفتح كل الرموز وملف الطبقة نفسه فوق اللوحة. ويمكن التراجع عن كل تغيير وإعادته، بأزرار شريط Studio أو باختصارَي ⌘Z و⇧⌘Z (Ctrl+Z وCtrl+Shift+Z).
| ما تفعله | ما تحصل عليه الطبقة |
|---|---|
| اختيار نظام أساس | "extends" |
| تحريك قرص | "$value" على dial.*، مع reason |
| اختيار لون بذرة أو صبغة + تشبّع، أو إعلان لوحة ألوان أو إسقاطها | مدخلة في "palettes"؛ والقيمة null تُسقط لوحة موروثة |
| تثبيت درجة لونية من لوحة على لون محدد | source.tones لتلك اللوحة، مثل { "40": "#e60012" }؛ والصف الجديد يبدأ باللون المولَّد |
| ترتيب عائلات Brand أو Plain أو Mono، واختيار البديل العام، ووضع خط المنصة أولًا | { "$value": ["IBM Plex Sans", "system-ui", "sans-serif"], "reason": "…" } على ref.typeface.* |
| اختيار مجموعة الأيقونات (عائلة متغيرة واحدة، أو عائلة لكل حالة تحديد) ووزنها وتعبئتها | تثبيتات $value على ref.typeface.icon أو sys.icon.family.*، و sys.icon.weight، و sys.icon.fill.* |
| تحريك شريط تنعيم الزوايا | { "$value": 0.6, "reason": "…" } على sys.shape.corner-smoothing، وهو مقدار من 0 إلى 1 بالمعنى الذي في Figma (الشكل) |
| اختيار طريقة الاستجابة للضغط ومظهر التركيز | { "$value": 1, "reason": "…" } على sys.behavior.*؛ تختار اسمًا (ripple أو glow) ويخزّن الملف موضعه |
| تغيير مقاس رمز بنسبة | { "scale": n }، وهي نسبة مما يرثه، ويبقى قرصه يحرّكه |
| إعادة توجيه رمز | { "$value": "{another.token}" } |
| تثبيت رمز | { "$value": …, "reason": "…" }، فيُعفى من كل الأقراص؛ ولا يُكتب إلا بعد أن يكون له سبب |
| استبدال قاعدة | { "derive": … }: معامل على قرص، أو جدول درجات لونية لدور لون، أو mix أو alpha لحالة |
| تعديل قواعد الأنماط | "rules": مظهر التحويم والتركيز والضغط والتعطيل، لكل المكوّنات دفعة واحدة |
| الزر «Add…»: إضافة حجم أو طراز، أو درجة في سلسلة، أو رمز خاص بك | إعلان تحت "vocabulary"، مع rationale إلزامي |
تكتب المجموعات Typefaces و Icons و Shape و Behaviour تثبيتات، والتثبيت يحتاج إلى سبب: تطلبه كل واحدة من الأربع مرة واحدة، معبَّأً سلفًا («Brand typeface.»)، ويحمل كل تثبيت تكتبه صياغتك. في شجرة الرموز ضمن فحص يُختار اختيار النوع باسمه ولا يُكتب رقمًا أبدًا، وسلسلة الخطوط هي القائمة المرتبة نفسها التي في صف الخط. الأزرار في المعاينة حقيقية، فالقيمتان ripple و dim والزوايا المنسابة وتوهّج التركيز هي ما يفعله <tanrei-button> فعلًا بتلك الرموز في هذا المتصفح. يرسم سلّم الخطوط عنوانًا بكل خط، ونصًّا متصلًا، وتسمية، وشيفرة، وكل نمط نص تضيفه طبقتك؛ ومفتاح Emphasized في شريط المعاينة يعيد رسمها بوزن دورها مضافًا إليه درجة sys.typescale.emphasis.* الخاصة بالفئة، مباشرة من ورقة الأنماط. وحين لا يرسم اختيارٌ شيئًا، مثل dim وكل عتامات الضغط تساوي 1 كما في النظام الافتراضي، يُعرض تحذير البناء نفسه تحت عنصر التحكم بنصّه، والرمز الذي يسمّيه رابط إلى محرِّره.
عنصر التحكم المتروك عند قيمة الأساس لا يكتب شيئًا، ولذلك يصدّر Studio الذي لم يُمسّ { "id", "extends" } ويُبنى إلى النظام الأساس تمامًا. وكل ما يمكن أن تحتويه طبقة صالحة قابل للتعديل هنا؛ فاستيراد طبقة لا يُبقي شيئًا جانبًا.
يقدّم الأمر tanrei studio أداة Studio هذه محليًّا ويوجّهها إلى ملف طبقة منتجك: تُحفظ التعديلات في الملف فور إجرائها، والزر Build يشغّل tanrei build، وحين يتغير الملف من تحته، بمحرّر أو بـ git checkout، يعرض Studio أن يعيد التحميل أو أن يُبقي ما هو مفتوح. ولا يكتب فوق شيء بصمت أبدًا. لا يُكتب الحفظ إلا حين يقبل الطبقةَ المخططُ وقواعد سلسلة الطبقات ومحرّك الرموز جميعًا (الخادم يسأل المحرّك نفسه ويجيب برسالته)، فيكون الملف على القرص دائمًا ملفًّا يبنيه tanrei build، أيًّا كان البرنامج الذي أرسله. ويقدّم التطبيق كذلك من عنوانه هو خطوط النص وخطوط الأيقونات التي تسمّيها الأنظمة المضمَّنة مع Tanrei (Inter و Noto Sans JP و Roboto Mono و Roboto و Material Symbols Rounded و Outlined)، فيُرسم كل إعداد جاهز بخطوطه.
يجوز للمنتج أن يرصّ طبقاته بعضها فوق بعض: acme-app.system.json يمتدّ من acme.system.json المجاور له. يسلّم tanrei studio الطبقات المجاورة لملفك إلى Studio للقراءة فقط، ويحلّ Studio السلسلة كلها في المتصفح تمامًا كما يفعل مع الأنظمة المضمَّنة؛ وحين تتغير طبقة أصل على القرص يُعاد حساب كل شيء.
في الموقع لا يوجد ملف خلف Studio، ولذلك لا يمكن أن تُستورد هنا طبقة تمتدّ من طبقة أخرى لك؛ افتحها بالأمر tanrei studio الذي يعرف الملفات المجاورة لها. لا يجلب Studio خطًّا من أي مكان سوى الموقع الذي يقدّمه: العائلة التي لا يوفّرها ذلك الموقع وليست في متصفحك تُذكر بالاسم، وتعرض المعاينة البديل بأمانة. واختبارات «المعاينة تساوي البناء» تقارن ورقة أنماط الويب وحزمة الرموز والتحذيرات؛ أما المخرجات الأصلية فيولّدها tanrei build من النموذج نفسه.
لا تأخذ أداة سطر الأوامر طبقةً في أمر: يبدأ tanrei init طبقة خاصة به، ويحلّ محلّها الملف الذي تنزّله من التصدير.