الأيقونات
مجموعة أيقونات واحدة لكل نظام تصميم، ووزن واحد، وقاعدة واحدة: محدَّدة الأطراف حين لا تكون محددة، ومعبَّأة حين تكون محددة.
الأيقونات الافتراضية في Tanrei هي Material Symbols بالنمط Rounded والوزن 300. وكما في خطوط النص، يُشار إلى الخط باسمه ولا يُضمَّن: المنتج هو الذي يحمّله.
طريقة رسم الأيقونة مجموعة صغيرة من الرموز (tokens). يأتي صندوق الأيقونة بثلاثة أحجام، sys.icon.small و medium و large (16 و 20 و 24px افتراضيًّا)، ويتبع الحجمُ البصري للخط (optical size) الصندوقَ.
ref.typeface.icon- The icon font. Material Symbols Rounded: a variable font whose weight and fill are set from sys.icon.
sys.icon.family- The icon font by selection. A variable icon font (Material Symbols) is one family and tells selected from unselected with its FILL axis; a static icon font tells them apart with two families (Material Icons Outlined / Material Icons). Both default to ref.typeface.icon.
sys.icon.weight- The stroke weight of every icon (the `wght` axis of the icon font).
sys.icon.fill- The fill of an icon by selection (the `FILL` axis of the icon font): 0 is outlined, 1 is filled.
مولَّد من tokens/ref/typeface.tokens.json, tokens/sys/measure.tokens.json
غير المحدد محدَّد الأطراف (outlined). والمحدد معبَّأ (filled). دائمًا. عنصر تنقل، علامة تبويب، زر تبديل، رقاقة، مفضّلة: تبقى الأيقونة الرسم نفسه، وتعبئتها وحدها تتغير مع الحالة. لا تُخلط الأيقونات المعبَّأة والمحدَّدة الأطراف للزينة أبدًا، ولا تُختار باليد أبدًا؛ فعلى الويب تتبع التعبئة حالة عنصر التحكم الذي تقع فيه الأيقونة.
التعبئة تتبع التحديد
import '@tanrei/web/icons.css';<button aria-pressed="true"><span class="tanrei-icon" aria-hidden="true">favorite</span> المفضّلة</button>يقرأ الصنف .tanrei-icon خصائص HTML aria-pressed و aria-selected و aria-checked و aria-current على أي عنصر سلف (وعلى عناصر التحكم في Tanrei، التي تنقلها إلى data-aria-*، يقرأ data-aria-pressed و data-aria-selected و data-aria-checked و data-aria-current)، أو data-selected على الأيقونة أو على سلف لها (والقيمة data-selected="false" تستثني أيقونة واحدة). أعطِ الأيقونة aria-hidden="true" حين يقول النص المجاور لها الشيء نفسه، وأعطِ عنصر التحكم اسمًا متاحًا للتقنيات المساعدة حين لا يقوله.
يمكن أيضًا تمرير الاسم في data-icon، مع ترك العنصر فارغًا:
<span class="tanrei-icon" data-icon="folder"></span>يُرسَم الرمز نفسه، لكن اسمه لم يعد جزءًا من نص الصفحة: فلا يظهر في textContent ولا في innerText، ولا فيما ينسخه المستخدم، ولا في الاسم المتاح للتقنيات المساعدة لعنصر التحكم الذي يحتويه. استخدم هذا الشكل حيثما كان الاسم سيُقرأ نصًّا، كصفّ في قائمة خيارات أو في قائمة، أو خلية في جدول، أو نص يقارنه اختبار. ويعمل الحجم والتحديد والانعكاس في التخطيط من اليمين إلى اليسار كما تعمل مع الاسم المكتوب نصًّا. أبقِ aria-hidden="true" حين يقول النص المجاور الشيء نفسه، فإصدارات Firefox السابقة للإصدار 128 ما زالت تُدخل الاسم في الاسم المتاح للتقنيات المساعدة.
على المنصات الأصلية تصل القيم نفسها مع نظام التصميم (system.icon)، ومعها دالة مساعدة صغيرة تحوّل حالة «محدد» والحجم إلى ما يحتاج إليه الخط. لا يوفّر Tanrei مكوّن أيقونة حتى الآن.
مجموعة الأيقونات تنتمي إلى نظام التصميم، ولذلك تستطيع الطبقة أن تغيّرها. ما تُحَلّ إليه الأنظمة المضمَّنة:
| نظام التصميم | family.unselected | family.selected | weight | fill.unselected | fill.selected |
|---|---|---|---|---|---|
tanrei | Material Symbols Rounded | Material Symbols Rounded | 300 | 0 | 1 |
cupertino | Material Symbols Rounded | Material Symbols Rounded | 300 | 0 | 1 |
m3-expressive-like | Material Symbols Outlined | Material Symbols Outlined | 400 | 0 | 1 |
m3-like | Material Symbols Outlined | Material Symbols Outlined | 400 | 0 | 1 |
مولَّد من tokens/systems/*.system.json, design/tokens/<system>/tanrei.light.tokens.json
يميّز خط الأيقونات الأيقونة المحددة من غير المحددة بإحدى طريقتين، والرموز تغطي الاثنتين. الأيقونة المحددة تأخذ دائمًا family.selected و fill.selected؛ وأيهما يغيّر فعلًا ما يُرسم أمر يتوقف على المجموعة.
خط الأيقونات المتغير، مثل Material Symbols، عائلة واحدة لها المحور FILL. يشير رمزا العائلة كلاهما إلى ref.typeface.icon افتراضيًّا، فإعادة توجيه ذلك الرمز الواحد تغيّر المجموعة، ويفرّق fill.unselected و fill.selected بين الحالتين. وهذا كل ما يكتبه النظام m3-like:
"tokens": {
"tanrei.ref.typeface.icon": { "$value": ["Material Symbols Outlined"], "reason": "Material Design 3 draws Material Symbols in the Outlined style." },
"tanrei.sys.icon.weight": { "$value": 400, "reason": "Material Symbols default weight in Material Design 3." }
}خط الأيقونات الثابت ليست له محاور. يأتي بالرسوم المحدَّدة الأطراف والمعبَّأة في عائلتين منفصلتين، فتسمّي الطبقة واحدة لكل حالة:
"tokens": {
"tanrei.sys.icon.family.unselected": { "$value": ["Material Icons Outlined"], "reason": "Acme uses the static Material Icons set: outlined when unselected." },
"tanrei.sys.icon.family.selected": { "$value": ["Material Icons"], "reason": "Acme uses the static Material Icons set: filled when selected." },
"tanrei.sys.icon.weight": { "$value": 400, "reason": "A static icon font has one weight; 400 is what Material Icons is drawn at." }
}يبقى رمزا التعبئة والوزن كما هما. الخط الثابت يتجاهل المحاور، فلا ضرر منهما، ولا يحتاج المكوّن إلى معرفة نوع المجموعة الفعّالة. هذه الطبقة هي نموذج الاختبار (fixture) الخاص بالمستودع نفسه (packages/tokens-build/test/fixtures/acme.system.json).
يقرر Tanrei كيف تُرسم الأيقونة، لا أي الأيقونات موجودة. تسمّي المجموعات رسومها بأسماء مختلفة، وقد تخلو مجموعة من رسم موجود في أخرى. المنتج الذي يغيّر مجموعة أيقوناته يراجع الأسماء التي يستخدمها. ومجموعة الرموز التي ليست خطًّا، مثل SF Symbols، لا يمكن أن يسمّيها رمز عائلة؛ وهذا مقيَّد في سجل فجوات المحاكاة (mimicry-gaps) بالمعرّف platform-symbol-sets.
لا يستطيع المكوّن <Text> في React Native ضبط محاور تباين الخط (font-variation axes)، فمع خط أيقونات متغير لا يصل FILL إلى الرسم أبدًا وتبدو الأيقونة واحدة في الحالتين. للحفاظ على القاعدة هناك، استخدم عائلتين ثابتتين كما سبق، أو ارسم الأيقونات بصيغة SVG.
تُنقل الآن الدوال المساعدة للأيقونات في الحزم الأصلية الأربع إلى نموذج «عائلة لكل حالة»؛ وإلى أن يصفه ملف README الخاص بحزمة ما، توقّع أن تقرأ تلك الحزمة عائلة واحدة.