الترحيل
كل اسم تغيّر حين صار Ritla UI يعمل بجانب قيم Tailwind الافتراضية: متغيرات CSS والمزوّد RitlaProvider وأصناف المسافات والظلال والبادئات الشرطية للوضع الداكن والاتجاه.
صار Ritla UI يُثبَّت بجانب قيم Tailwind الافتراضية بدل أن يستبدلها، فأصبح يعمل في التطبيقات القائمة أيضًا. وفي التغيير نفسه تغيّرت أسماء المعرّفات في الكود المثبَّت التي كانت تبدأ بـ kanz. وتذكر هذه الصفحة كل اسم تغيّر.
تغيّرت هذه الأسماء قبل الإصدار العام الأول لـ Ritla UI في 28 أكتوبر 2026. التثبيت السابق لهذا التاريخ يتبع الجداول أدناه. أما التثبيت الجديد فلا يتطلب منك شيئًا، ويأتي بالأسماء الجديدة من البداية (التثبيت).
الجداول لمن لديه كود كُتب قبل التغيير، كنسخة من معاينة سابقة. ومواقعنا وأمثلتنا نحن نُقلت إلى الأسماء الجديدة بهذه الجداول نفسها.
ما الذي تغيّر، باختصار#
كان الثيم يحذف ألوان Tailwind ومقاييسه، ويضيف أنماطًا أساسية عامة (عائلة الخط، وإلغاء تباعد الحروف في العربية، وحلقة التركيز، ومدة حركة افتراضية)، ويعيد تعريف dark: وrtl: وltr:. أما الآن فلا يحذف شيئًا، ولا يضيف أنماطًا أساسية، ويترك تلك البادئات الشرطية لـ Tailwind. وحيث تعارضت أسماؤه مع أسماء Tailwind، أخذت أسماؤه مجموعة خاصة بها (space- وelevation- وcontainer-)، وأخذت بادئاته الشرطية أسماء جديدة (theme-dark: وdir-rtl: وdir-ltr:). والسلوك القديم ما زال متاحًا، اختياريًا، في الوضع الصارم.
متغيرات CSS#
يبقى اسم كل متغيّر كما هو بعد البادئة:
| قبل | بعد |
|---|---|
--kanz-* | --ritla-* |
var(--kanz-radius-8) | var(--ritla-radius-8) |
--kanz-font-geist، --kanz-font-ibm-plex-sans-arabic (متغيرات الخطوط التي يشير إليها next/font) | --ritla-font-geist، --ritla-font-ibm-plex-sans-arabic |
الإطارات المفتاحية kanz-skeleton-pulse، kanz-skeleton-wave | ritla-skeleton-pulse، ritla-skeleton-wave |
المكوّنات والخطافات#
| قبل | بعد |
|---|---|
KanzProvider | RitlaProvider |
useKanz | useRitla |
أي اسم مُصدَّر آخر يبدأ بـ Kanz، مثل KanzProviderProps أو KanzIconProps | الاسم نفسه يبدأ بـ Ritla |
أسماء الأصناف kanz-* والسمات data-kanz-* | ritla-* وdata-ritla-* |
لا أسماء بديلة: الأسماء القديمة حُذفت، ولم تُبقَ للتوافق.
وتبقى ثلاثة أسماء كما هي، لأنها ترسم شعار بنك المثال: KanzLogo وKanzLogomark وkanzLogoArt.
المسافات#
كل صنف يقرأ مقياس المسافات يأخذ space- قبل الخطوة. الرقم لا يتغيّر، وما زال المقاس بالبكسل:
| قبل | بعد |
|---|---|
p-16، px-12، ps-8 | p-space-16، px-space-12، ps-space-8 |
gap-8، space-y-4 | gap-space-8، space-y-space-4 |
m-24، -mt-4، me-2 | m-space-24، -mt-space-4، me-space-2 |
size-24، w-40، min-h-48، max-w-320 | size-space-24، w-space-40، min-h-space-48، max-w-space-320 |
top-4، inset-8، translate-x-4، scroll-m-8 | top-space-4، inset-space-8، translate-x-space-4، scroll-m-space-8 |
الصفر وpx والكسور مثل w-1/2 وfull وauto وscreen والقيم الاعتباطية ليست خطوات، وتبقى كما هي.
الصنف الذي يفوتك لا يفشل، بل يتغيّر مقاسه. p-16 تقرأ الآن مقياس Tailwind نفسه، وقيمتها فيه 4rem لا 16 بكسل. ابحث عن كل صنف مسافات برقم مجرّد قبل أن تنشر.
أسماء يستخدمها Tailwind أيضًا#
| قبل | بعد |
|---|---|
shadow-xs، shadow-sm، shadow-md، shadow-lg، shadow-xl | shadow-elevation-xs، shadow-elevation-sm، shadow-elevation-md، shadow-elevation-lg، shadow-elevation-xl |
shadow-xs-raised | shadow-elevation-xs-raised |
backdrop-blur-sm و-md و-lg و-xl، وblur-* بالخطوات نفسها | backdrop-blur-elevation-sm و-md و-lg و-xl، وblur-elevation-* |
من max-w-xs إلى max-w-xl، وw- وmin-w- بالمقاسات نفسها | من max-w-container-xs إلى max-w-container-xl، وw-container-* وmin-w-container-* |
بادئات استعلام الحاوية من @xs: إلى @xl: | من @container-xs: إلى @container-xl: |
font-body، font-display، font-numeric | font-family-body، font-family-display، font-family-numeric |
max-w-container-sm ليست max-w-component-sm: الأولى عرض حاوية والثانية عرض مكوّن، وقيمتاهما مختلفتان.
وأخذت أصناف عائلة الخط المقطع family-، لأن التطبيقات كثيرًا ما تعرّف --font-body أو --font-display في كتلة @theme الخاصة بها، ولو بقي الاسم نفسه لحلّ خطها محل عائلة خط Ritla UI. أما الألوان وأنماط النص وارتفاعات الأسطر وتباعد الحروف وأنصاف الأقطار والطبقات فلم تحتج إلى أسماء جديدة: لا يعرّف Tailwind أيًّا من أسماء الثيم فيها.
البادئات الشرطية#
| قبل | بعد |
|---|---|
dark: | theme-dark: |
rtl: | dir-rtl: |
ltr: | dir-ltr: |
تحتفظ البادئات الجديدة بالمعنى القديم. تتبع theme-dark: طريقة التبديل إلى الداكن التي اخترتها في npx ritla init (الوضع الداكن). وتطابق dir-rtl: وdir-ltr: أقرب سمة dir، فتبقى الجزيرة الإنجليزية داخل صفحة عربية من اليسار إلى اليمين، أما rtl: في Tailwind فتطابق أي عنصر أب.
الأنماط الأساسية#
لم يعد الثيم يضبط أي شيء على مستوى الصفحة كلها. ثلاثة أشياء كان يضبطها تأتي الآن من الوضع الصارم أو من صنف:
| قبل، على الصفحة كلها | الآن |
|---|---|
| عائلة الخط على كل عنصر، وإلغاء تباعد الحروف في العربية | font-family-body على العنصر، ويتبع أقرب سمة lang |
| حلقة التركيز من الثيم على كل عنصر يتلقى التركيز | focus-visible:focus-ring |
transition مجرّد بمدة الثيم ومنحناه | transition duration-fast ease-standard؛ أما transition المجرّد فيعود إلى قيمة Tailwind: 150ms بمنحنى ease |
وللخط، على الجذر:
<body class="font-family-body">أو أضف الوضع الصارم، فيُبقي الثلاثة على مستوى الصفحة.
ويمكن الآن أن تأتي الخطوط من تطبيقك: اضبط --ritla-font-sans والمتغيرين المماثلين له، أو شغّل npx ritla init --font app (الخطوط).
وكان الوضع الصارم يلغي تباعد الحروف في النص العربي في كل مكان. ومن دونه يصل تباعد الحروف الذي يضبطه تطبيقك على الجذر إلى النص العربي داخل المكوّنات أيضًا. أبقِه صفرًا للعربية في أنماطك، أو فعّل الوضع الصارم.
انقل مشروعك#
- خذ الثيم الجديد والمكوّنات بأسمائها الجديدة:
npx ritla update. الملفات التي لم تعدّلها تأخذ الأسماء الجديدة. وينتقل الثيم منlib/kanz/إلىlib/ritla/: تُحذف النسخ القديمة التي لم تعدّلها مع أسطر@importالخاصة بها، أما النسخ التي عدّلتها فتبقى، ويذكرها الأمر في مخرجاته، ولا تُستورد بعد ذلك. - غيّر الباقي يدويًا بالجداول أعلاه. ابحث في كودك عن
--kanz-وKanzوkanz-وdark:وrtl:وltr:وshadow-وblur-وmax-w-وعنtransitionالمجرّد، وعن كل صنف مسافات برقم مجرّد. - راجع صفحاتك في الاتجاهين وفي الوضعين. الصنف الذي يفوتك يظهر تغيّرًا في المقاس، لا رسالة خطأ.