السلوك
اختياران للنوع، هما طريقة الاستجابة للضغط ومظهر تركيز لوحة المفاتيح، يضبطهما نظام التصميم كأي رمز آخر.
يكاد كل ما يفرّق بين نظام تصميم وآخر أن يكون مقدارًا: نصف قطر، أو درجة لونية، أو مدة. والمقادير قيم، والطبقة تغيّرها.
لكنّ فروقًا قليلة ليست مقادير. نظام يستجيب للضغط بتموّج وآخر يُعتم عنصر التحكم؛ نظام يرسم حلقة حادة حول العنصر الذي عليه التركيز وآخر يرسم توهّجًا ناعمًا. لا يوجد رقم على رمز (token) قائم يحوّل أحدهما إلى الآخر. يسمّي Tanrei هذه الفروق اختيارات النوع، ويحتفظ بها في رمزين تحت sys.behavior. يسمّي كل منهما قائمة قصيرة مغلقة من طرق السلوك، ويختار نظام التصميم واحدة منها.
| نظام التصميم | pressed-feedback | focus-style |
|---|---|---|
tanrei | overlay | ring |
cupertino | dim | ring |
m3-expressive-like | ripple | ring |
m3-like | ripple | ring |
مولَّد من tokens/systems/*.system.json, design/tokens/<system>/tanrei.light.tokens.json
تقرأ المكوّنات هذين الرمزين. ولا تنظر أبدًا إلى نظام التصميم الفعّال أيًّا كان.
tanrei.sys.behavior.pressed-feedback
How a press is answered. overlay: the pressed tokens apply to the whole container at once. ripple: the pressed state layer grows from the point of contact. dim: the pressed opacity applies to the whole control and no state layer is drawn. none: no visual answer to a press (focus and hover still apply).
مولَّد من tokens/sys/behavior.tokens.json
| القيمة | ما يرسمه المكوّن أثناء الضغط |
|---|---|
overlay |
تُطبَّق رموز حالة الضغط على الحاوية كلها دفعة واحدة. |
ripple |
تنمو طبقة حالة الضغط من نقطة التماس، أو من المركز حين يأتي الضغط من لوحة المفاتيح، وتُقصّ على شكل الحاوية. |
dim |
تُطبَّق عتامة الضغط الخاصة بالمكوّن على عنصر التحكم كله. ولا تُرسم طبقة حالة. |
none |
لا شيء. ويظل التحويم والتركيز ظاهرين. |
لا يحدد الاختيار إلا كيفية ظهور طبقة الضغط. أما لونها وعتامتها فما زالا يأتيان من رموز المكوّن الخاصة بكل حالة، وتعطيها الطبقة قيمها كما في السابق.
أيًّا كان الاختيار، تظهر حالة الضغط بلا تأخير وتبقى مرئية مدة sys.motion.duration.press-hold على الأقل (100ms افتراضيًّا، تبعًا لقرص الحركة). النقرة أو ضغطة المفتاح تنتهي في غضون إطار واحد؛ ولولا هذا الحد الأدنى لما أمكنت رؤية الاستجابة. وينص المكوّن Button على ذلك في المتطلبين BTN-8 و BTN-9.
طريقة انسياب الزاوية إلى الحافة المستقيمة تبدو اختيار نوع، دائرية أو متصلة، لكنها مقدار: corner smoothing في Figma، من 0 إلى 1، حيث 0.6 هي زاوية iOS. وموضعها مع أنصاف الأقطار التي تشكّلها، باسم sys.shape.corner-smoothing، وشرحها في صفحة الشكل.
tanrei.sys.behavior.focus-style
How keyboard focus is shown. ring: the two-tone focus ring at sys.focus offset and width. glow: the same colors as a soft halo (blurred by the ring width) instead of a hard line. Both must meet the focus contrast invariants.
مولَّد من tokens/sys/behavior.tokens.json
تُرسم القيمة glow بلونَي التركيز والإزاحة والعرض نفسها التي للحلقة، فتنطبق عليها ثوابت تباين التركيز بلا تغيير. هي تغيّر حافة المؤشر، لا وجوده.
المكوّن Button نفسه تحت كل نظام، مرسومًا ببناء الويب المثبَّت. اضغط كل زر، ثم انتقل إليه بالمفتاح Tab.
اضغط، ثم انتقل بالمفتاح Tab
tanrei overlay · ring
cupertino dim · ring
m3-expressive-like ripple · ring
m3-like ripple · ring
يُغيَّر الاختيار كأي قيمة: تحت tokens، مع reason.
{
"id": "acme",
"extends": "tanrei",
"tokens": {
"tanrei.sys.behavior.pressed-feedback": { "$value": 1, "reason": "Acme يستجيب للضغط بتموّج." },
"tanrei.sys.behavior.focus-style": { "$value": 1, "reason": "Acme يعرض تركيز لوحة المفاتيح توهّجًا." }
}
}القيمة $value رقم: موضع الاسم في قائمة الرمز، والعدّ يبدأ من 0. قائمة pressed-feedback هي overlay ثم ripple ثم dim ثم none، فالرقم 1 هو ripple. الصيغة التي تستخدمها ملفات رموز Tanrei (DTCG 2025.10) ليس فيها نوع نصي، ولهذا يحمل الملف فهرسًا. ويرفض البناء أي فهرس خارج القائمة.
يبقى الرقم في ملف الطبقة. أما CSS المولَّد فيحمل الاسم (--tanrei-sys-behavior-pressed-feedback: ripple)، وتتلقى SwiftUI و Compose و Flutter و React Native تعدادًا محدَّد النوع على نسخة النظام.
القوائم نفسها جزء من المفردات الأساس (core). تختار الطبقة من بين الأسماء؛ ولا تستطيع أن تضيف اسمًا. طريقة سلوك جديدة يجب أن ترسمها كل منصة، ولذلك تُقترح على الأساس كأي تغيير آخر في المفردات.
الاسم الأول في كل قائمة هو الافتراضي، وهو البديل الاحتياطي أيضًا. المنصة التي لا تستطيع رسم اختيار ترسم القيمة الأولى بدلًا منه وتذكر ذلك في ملف README الخاص بحزمتها.
ملاحظة
كتابة الفهرس باليد مربكة، ولذلك تعرض Theme Studio (مجموعة Behaviour) والأمر tanrei explain وخادم MCP الأسماء وتقبلها.