‏Infonomic UI Kit: کتابخانه کامپوننت بدون Tailwind

Infonomic UI Kit یه کیت رابط کاربری جدیده که بر پایه CSS Modules ساخته شده و هدفش اینه که با هر فریم‌ورک فرانت‌اندی — از React و Vue.js گرفته تا Svelte، Solid و Astro — کار کنه. نکته جالبش اینه که با Tailwind CSS هم سازگاره، ولی خودش از Tailwind استفاده نمی‌کنه.

تیم سازنده صراحتاً می‌گه که Tailwind رو دوست داره، ولی معتقده جاش توی کامپوننت‌لایبرری‌ها نیست. Tailwind به‌عنوان یه سیستم atomic CSS برای پروژه‌های کوچیک‌تر و PoC‌ها عالیه، ولی وقتی وارد یه UI kit می‌شه، باعث می‌شه استایل‌های کامپوننت‌ها به محیط مصرف‌کننده وابسته بشن و اوورراید کردنشون سخت بشه.

یکی از مهم‌ترین ویژگی‌های این کیت استفاده از CSS Cascade Layers با دستور @layer هست. این تکنیک باعث می‌شه هر CSS که خارج از لایه‌هاست، به‌صورت خودکار specificity بالاتری داشته باشه — یعنی اپلیکیشنی که از این کیت استفاده می‌کنه می‌تونه بدون نیاز به !important استایل‌ها رو اوورراید کنه. ترتیب لایه‌ها هم به‌دقت تنظیم شده:

@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;

معماری CSS این کیت به سه لایه اصلی تقسیم می‌شه. لایه base شامل توکن‌های اولیه‌ست — پالت رنگ، spacing، breakpoint و تایپوگرافی. لایه functional مهم‌ترین لایه‌ست و منبع حقیقت سمانتیک به حساب میاد؛ اینجاست که توکن‌های مبتنی بر intent تعریف می‌شن و حالت light/dark هم اینجا مدیریت می‌شه. لایه theme هم مربوط به تنظیمات سطح document مثل رنگ autofill مرورگر و ریست المان‌هاست.

سیستم نام‌گذاری توکن‌ها از یه الگوی مشخص پیروی می‌کنه: element-intent-emphasis-state. مثلاً توکنی مثل --text-on-primary-strong-disabled دقیقاً نشون می‌ده که متن روی یه پس‌زمینه primary با تاکید strong در حالت disabled چه رنگی داره. این سطح از دقت توی نام‌گذاری کمک می‌کنه کامپوننت‌ها همیشه از لایه سمانتیک بخونن، نه مستقیم از مقادیر اولیه.

این کیت از بهترین کامپوننت‌های headless موجود استفاده می‌کنه و اون‌ها رو «fold in» می‌کنه — یعنی می‌پیچونتشون توی یه interface مشخص. کامپوننت‌هایی مثل Base UI و React Aria و React Day Picker زیر این کیت هستن. مزیت این رویکرد اینه که مصرف‌کننده نهایی نگران جزئیات پیاده‌سازی یا مهاجرت از یه لایبرری به لایبرری دیگه نیست — «قرارداد» و سمانتیک استایل‌ها ثابت می‌مونه.

یه ویژگی جذاب دیگه کلاس .not-dark هست. این کلاس بهت اجازه می‌ده بعضی کامپوننت‌ها رو در یه تم light نگه داری حتی اگه کل اپلیکیشن dark mode باشه — و برعکس. این سطح از کنترل توی دیزاین سیستم‌های بزرگ خیلی کاربرده.

سیستم variant و intent هم کاملاً opinionated طراحی شده. Variant به شکل کلی کامپوننت اشاره داره — مثلاً دکمه‌های outlined، gradient یا filled. Intent هم معنای سمانتیک داره و شامل primary، secondary، noeffect، info، warning، success و danger می‌شه.

نکات کلیدی:

• بر پایه CSS Modules ساخته شده، نه Tailwind — ولی با Tailwind هم سازگاره
• با React، Vue، Svelte، Solid، Astro و حتی HTML/CSS ساده کار می‌کنه
• از CSS Cascade Layers برای اوورراید آسان استایل‌ها بدون !important استفاده می‌کنه
• معماری CSS سه‌لایه: base (توکن اولیه)، functional (توکن سمانتیک و light/dark)، theme (تنظیمات مرورگر)
• نام‌گذاری توکن‌ها بر اساس الگوی element-intent-emphasis-state
• کامپوننت‌ها روی Base UI، React Aria و React Day Picker ساخته شدن
• کلاس .not-dark برای کنترل دقیق light/dark روی کامپوننت‌های منفرد
• سیستم variant و intent کاملاً مجزا و opinionated طراحی شده