التخصيص

يُضبط لون الأيقونة والشارات والحجم والحركة عبر الخصائص وخصائص CSS المخصصة.

اللون

تُحسب كل ألوان الأيقونة من لون أساسي واحد. افتراضيا، اللون الأساسي هو currentColor، فيمكنك تغييره بضبط خاصية CSS color على الأيقونة أو على أي عنصر أب:

html

<span style="color: #14B8A6"><kubai-icon name="leaf"></kubai-icon></span>

تُحسب الألوان باستخدام color-mix() في CSS، فيؤدي انتقال (transition) على color إلى تلاشي كل التدرجات تدريجيا:

css

.kubai-icon { transition: color .3s ease; }

الشارات

الأيقونة ذات الشارة، مثل folder-plus أو user-check، تحمل شارة في إحدى زواياها. الشارة افتراضيا قرص داكن برمز أبيض. badgeColor يغيّر لون القرص. badgeColor="semantic" يختار لونا يناسب كل شارة: الأخضر للإضافة والإتمام، والأحمر للإزالة والإلغاء، والكهرماني للتحذيرات.

tsx

import { FolderPlus } from "kubai-icons-react";

<FolderPlus />                          {/* dark badge */}
<FolderPlus badgeColor="semantic" />    {/* green plus */}
<FolderPlus badgeColor="#7C3AED" />

خصائص CSS المخصصة

اضبط هذه الخصائص على أيقونة أو على أي عنصر أب لتجاوز درجات لونية بعينها. العلامات هي الخطوط والرموز المرسومة على الأيقونة.

الخاصية	عناصر التحكم
`--ki-c`	اللون الأساسي للتدرجات والعلامات الفاتحة. الافتراضي: `currentColor`.
`--ki-e`	اللون الأساسي للخطوط الخارجية والعلامات الداكنة. الافتراضي: `--ki-c`.
`--ki-w`	لون العلامات البيضاء افتراضيا.
`--ki-b`	لون قرص الشارة. الافتراضي: رمادي داكن محايد.
`--ki-l`	مدى تلاشي التعبئات الصلبة الكبيرة إلى الأبيض باتجاه الأعلى، من 0% إلى 100%.

variant="soft" يضبط كل هذه القيم باستثناء --ki-b.

ضبط النمط لصفحة كاملة

النمط يُورَّث مثل color. اضبطه على أي عنصر فتتبعه كل أيقونة بداخله ما لم يكن لها variant خاص. الإعداد الأقرب هو الأعلى أولوية دائما: خاصية الأيقونة نفسها، ثم أقرب عنصر، ثم color الافتراضي.

tsx

import { Folder, VARIANTS } from "kubai-icons-react";

<body style={VARIANTS.soft}>
  <Folder />                  {/* soft */}
  <Folder variant="color" />  {/* color */}
</body>

يعمل الكائن نفسه في Vue مع :style. وبدون إطار عمل، استدعِ setVariant:

import { setVariant } from "kubai-icons/runtime";

setVariant(document.documentElement, "soft");

الملفات الثابتة ألوانها مكتوبة داخلها، فاختر النمط عبر المجلد: svg/ أو svg-soft/.

الحجم

اضبط الحجم بالخاصية size. استخدم الأيقونات الأساسية بدل الأيقونات ذات الشارة عند 24px وأقل، إذ لا تتسع الشارة. تُوصَف اللوحة في لغة التصميم.

الحركة

تستغرق كل حركة 460ms على cubic-bezier(.22, 1, .36, 1) وتبدأ من الموضع الحالي للأيقونة، فيمكن عكسها في منتصفها. عند ضبط prefers-reduced-motion، تنتقل الأيقونات مباشرة إلى وضعية النهاية دون حركة.