الشكل

تحدد رموز الشكل (tokens) أنصاف أقطار الزوايا. يحتفظ السلّم بأسماء الدرجات المألوفة، none و extra-small و small و medium و large و extra-large و full، ويسند إليها عمدًا قيمًا صغيرة، لأن تخطيطات Tanrei كثيفة وحدوده رفيعة. أنصاف الأقطار الكبيرة بجوار الخطوط الرفيعة تبدو رخوة وغير دقيقة؛ والصغيرة تبدو كأنها مشغولة بآلة.

none 0px

extra-small 3px

small 6px

medium 8px

large 12px

large-increased 14px

extra-large 16px

extra-large-increased 20px

extra-extra-large 24px

full full

الرمز	القيمة	ملاحظات
--tanrei-sys-shape-corner-none	0px
--tanrei-sys-shape-corner-extra-small	3px
--tanrei-sys-shape-corner-small	6px	Default for controls: buttons, inputs, menu items, tooltips.
--tanrei-sys-shape-corner-medium	8px
--tanrei-sys-shape-corner-large	12px
--tanrei-sys-shape-corner-large-increased	14px
--tanrei-sys-shape-corner-extra-large	16px
--tanrei-sys-shape-corner-extra-large-increased	20px
--tanrei-sys-shape-corner-extra-extra-large	24px
--tanrei-sys-shape-corner-full	9999px	Opt-in only: avatars, badges, segmented controls, pill variants.

مولَّد من design/tokens/tanrei.light.tokens.json, tokens/sys/shape.tokens.json

تطبيق الشكل

link

• عناصر التحكم تستخدم small (6px): الأزرار، وحقول النص، وعناصر قوائم الخيارات، والتلميحات.
• الحاويات تصعد درجةً مع الحجم: medium للبطاقات وقوائم الخيارات، و large فما فوق لمربعات الحوار واللوحات.
• الدرجة full اختيارية التفعيل. الأشكال الكبسولية والدوائر محجوزة لما هو مستدير بطبعه أو يحتاج إلى أن يتميّز: الصور الرمزية، والشارات، وعناصر التحكم المقسَّمة.
• الدرجات -increased تنتمي إلى الطبقة التعبيرية. تكبّر الزوايا دون تغيير السلّم الافتراضي.

الزوايا المتداخلة

link

حين يقع عنصر مستدير الزوايا داخل حاوية مستديرة الزوايا، ينبغي أن يساوي نصف القطر الداخلي نصفَ القطر الخارجي مطروحًا منه الحشو الذي بينهما. منحنيان متحدا المركز بنصف القطر نفسه يبدوان غير متوافقين؛ وطرح الفجوة يجعلهما متوازيين. إذا كانت النتيجة صفرًا أو أقل فاستخدم none.

تنعيم الزوايا

link

نصف القطر يحدد كِبَر الزاوية. ورمز ثانٍ، sys.shape.corner-smoothing، يحدد كيف ينساب منحناها إلى الحافة المستقيمة: رقم من 0 إلى 1 بالمعنى الذي يعطيه Figma لشريط تمرير corner smoothing. عند 0 تكون الزاوية ربع دائرة. وعند 0.6 تكون ما يسميه Figma زاوية iOS، وهي قريبة من الزاوية المتصلة التي ترسمها Apple على كل مستطيل مستدير الزوايا، لكنها ليست المنحنى نفسه (انظر أدناه). وعند 1 يكاد القوس يختفي في ساقين طويلتين منسابتين. نصف القطر لا يتغير؛ الذي يتغير هو طبيعة المنحنى وحدها، والفرق أوضح ما يكون في أنصاف الأقطار الكبيرة والأشكال الكبسولية.

نظام التصميم	corner-smoothing
tanrei	0
cupertino	0.6
m3-expressive-like	0
m3-like	0

مولَّد من tokens/systems/*.system.json, design/tokens/<system>/tanrei.light.tokens.json

هو رقم واحد للنظام كله، فهوية العلامة في طريقة انسياب الزاوية بقدر ما هي في حجمها، ولا يغيّره أي قرص ضبط. يضبطه النظام cupertino على 0.6؛ ويبقى النظام الافتراضي عند 0. وتضبطه الطبقة كأي قيمة مثبَّتة:

"tokens": {
  "tanrei.sys.shape.corner-smoothing": { "$value": 0.6, "reason": "تطبيقاتنا الأصلية ترسم زوايا متصلة." }
}

في Theme Studio هو شريط التمرير تحت Groups → Shape. وفي Figma يُطبَّق الرقم نفسه على corner smoothing في كل عقدة، فيعرض الملف ما يرسمه الإعداد الجاهز.

ما ترسمه كل منصة

link

المنصة	عند 0	فوق 0
Jetpack Compose و Flutter	ربع دائرة	الإنشاء الهندسي الذي يستخدمه Figma لتنعيم الزوايا، وهو معنى المقدار: ثلاثة منحنيات Bézier تكعيبية لكل زاوية، يتقلّص قوسها وتطول ساقاها المنسابتان مع المقدار. ما يراه المصمم في ملف Figma هو ما ترسمه هاتان المنصتان. أما الزاوية المتصلة لدى Apple فمنحنى مختلف: عند 0.6 يفصل بين الاثنين 5.1 px² في صندوق عرضه 180 وارتفاعه 80 بنصف قطر 20، أي 0.035% من المساحة؛ فرق لا يُرى، لكنه ثلاثة أضعاف اختلاف محرّكات التنقيط فيما بينها، ولا يجعلهما أي مقدار يتطابقان. الاختبارات تثبّت الإنشاء الهندسي، لا منحنى Apple.
Web	ربع دائرة	أقرب قطع ناقص فائق (superellipse) يمكن أن يأخذه الصندوق: corner-shape: superellipse(2 + s) مع ضرب نصف القطر في (1 + 0.4 s)، ويبعد 9.5 px² عن إنشاء Figma و 5.7 عن إنشاء Apple في الصندوق نفسه عند 0.6. المتصفحات التي لا تدعم corner-shape ترسم زوايا دائرية.
SwiftUI	.circular	.continuous: منحنى نظام التشغيل نفسه لأي مقدار فوق 0. يُقرَّب المقدار إلى مقدار نظام التشغيل، وملف README الخاص بالحزمة يذكر ذلك؛ عند 0.6 يبعد نحو 5 px² المذكورة أعلاه عن إنشاء Figma، وهذا ضمن ما يتسامح فيه التكافؤ.
React Native	borderCurve: "circular"	على iOS القيمة borderCurve: "continuous"، وهي كذلك منحنى نظام التشغيل لأي مقدار فوق 0. وليس في Android منحنى كهذا فتبقى الزاوية دائرية.

كل موضع يدوّر فيه المكوّن زواياه يقرأ هذا المقدار: الحاوية، وحلقة التركيز، وحلقة الارتفاع، وقصّ التموّج. وينص المكوّن Button على ذلك في المتطلب BTN-10.

تنعيم الزوايا رقم وليس اختيار نوع مثل circular أو continuous، لأن المكان الوحيد الذي يضبط فيه المصممون هذا كل يوم، وهو Figma، فيه شريط تمرير، ولأن ثلاثة منحنيات مختلفة تحت اسم واحد لن تكون تكافؤًا.