---
title: "السلوك"
description: "اختياران للنوع، هما طريقة الاستجابة للضغط ومظهر تركيز لوحة المفاتيح، يضبطهما نظام التصميم كأي رمز آخر."
url: "https://tanrei.chnotchy.com/ar/foundations/behaviour/"
last_updated: 2026-10-23T17:33:05.000Z
---

# السلوك

> اختياران للنوع، هما طريقة الاستجابة للضغط ومظهر تركيز لوحة المفاتيح، يضبطهما نظام التصميم كأي رمز آخر.

يكاد كل ما يفرّق بين نظام تصميم وآخر أن يكون **مقدارًا**: نصف قطر، أو درجة لونية، أو مدة. والمقادير قيم، و[الطبقة](https://tanrei.chnotchy.com/ar/foundations/design-systems/) تغيّرها.

لكنّ فروقًا قليلة ليست مقادير. نظام يستجيب للضغط بتموّج وآخر يُعتم عنصر التحكم؛ نظام يرسم حلقة حادة حول العنصر الذي عليه التركيز وآخر يرسم توهّجًا ناعمًا. لا يوجد رقم على رمز (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).

overlay ripple dim none

overlay — القيمة الافتراضية، وهي البديل في المنصة التي لا تستطيع رسم الخيار

مولَّد من `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`، وشرحها في صفحة [الشكل](https://tanrei.chnotchy.com/ar/foundations/shape/#%D8%AA%D9%86%D8%B9%D9%8A%D9%85-%D8%A7%D9%84%D8%B2%D9%88%D8%A7%D9%8A%D8%A7).

## نمط التركيز

`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.

ring glow

ring — القيمة الافتراضية، وهي البديل في المنصة التي لا تستطيع رسم الخيار

مولَّد من `tokens/sys/behavior.tokens.json`

تُرسم القيمة `glow` بلونَي التركيز والإزاحة والعرض نفسها التي للحلقة، فتنطبق عليها [ثوابت تباين التركيز](https://tanrei.chnotchy.com/ar/foundations/accessibility/) بلا تغيير. هي تغيّر حافة المؤشر، لا وجوده.

## الأنظمة المضمَّنة

المكوّن Button نفسه تحت كل نظام، مرسومًا ببناء الويب المثبَّت. اضغط كل زر، ثم انتقل إليه بالمفتاح `Tab`.

## ضبط اختيار في طبقة

يُغيَّر الاختيار كأي قيمة: تحت `tokens`، مع `reason`.

```json
{
  "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 الخاص بحزمتها.

> [!NOTE]
> **ملاحظة**
>
> كتابة الفهرس باليد مربكة، ولذلك تعرض Theme Studio (مجموعة Behaviour) والأمر `tanrei explain` وخادم MCP الأسماء وتقبلها.