Pinion UI؛ تغییر ظاهر کل اپ لاراولی با دو تا اتریبیوت
لاراول
پیاچپی
فرانتاندخلاصهٔ کامل‌تر
نویسنده می‌گه وقتی مشتری یه ظاهر جدید می‌خواد — رنگ تازه، فاصله‌های جمع‌وجورتر، حس شرکتی‌تر — جواب همیشگی اینه که کد رو عوض کنی؛ یا خودت تمپلیت‌ها رو بازنویسی می‌کنی یا کارو می‌سپری به یه ایجنت هوش مصنوعی و آخرش باید یه diff رو ریویو کنی که به همهٔ ویوهای پروژه دست زده. تو این مقاله اومده که Pinion UI روی یه موضع ساده بنا شده: یه ری‌استایل کامل باید کار اتریبیوت‌ها باشه، نه بازنویسی کد.
کل ماجرا دو تا اتریبیوت روی تگ html هست: data-theme رنگ رو کنترل می‌کنه و data-tune فرم رو، یعنی فاصله‌ها، گردی گوشه‌ها، مقیاس تایپوگرافی و سایه‌ها.
<html data-theme="finance" data-tune="corporate">این دو محور کاملاً مستقلن، پس هر تمی با هر تیونی کار می‌کنه؛ با ۳۹ تم و ۱۱ تیون و یه جفت لایت/دارک برای هر تم، همون مارکاپ ثابت می‌تونه ۸۵۸ ظاهر مختلف بگیره و با عوض‌کردن یه مقدار، کل اپ یکدست عوض میشه.
به گفتهٔ نویسنده، یکدست‌موندن همین جزئیاته که از یه ایجنت هوش مصنوعی سخت درمیاد؛ مدل‌ها منظور رو خوب می‌گیرن ولی سر جزئیات هر بار یه جای کمی متفاوت فرود میان. Pinion UI این بخش رو قطعی انجام می‌ده: هر تم یه پالت کامل و تنظیم‌شده‌ست و هر تیون یه سیستم منسجم از فرم و فاصله و تایپوگرافی. خود کتابخونه هم پلاگینی برای استک TALL هست و فقط از توکن‌های رنگ daisyUI و از Alpine.js برای واکنش‌پذیری سبک استفاده می‌کنه.
۵۶ کامپوننت Blade این کتابخونه کلاس‌های معمولی و خونای Tailwind تولید می‌کنن، پس چیزی که تو ریپو می‌مونه Blade و Tailwind عادیه. برای کار با ایجنت‌ها، نصب با سوییچ --ai یه فایل AGENTS.md تو پروژه می‌ذاره تا ایجنت خودش کامپوننت و تم مناسب رو انتخاب کنه، و ui:lint چک می‌کنه کلاسی بیرون از دایرهٔ واژگان کتابخونه استفاده نشده باشه. ui:eject هم همه‌چی رو به Tailwind خالص برمی‌گردونه، پس قفل‌شدگی در کار نیست.
اسم تم‌ها از حوزه‌ای میاد که براش طراحی شدن — مثل payments، legal، education، health، kids و estate — کنار تم‌های حال‌وهوایی مثل zen و vapor؛ در مجموع یه تم برند پیش‌فرض، ۱۱ تم مود، ۱۱ تم SaaS و ۱۶ تم صنعتی. هر تم یه جفت لایت/دارک داره که از prefers-color-scheme پیروی می‌کنه، پس دارک‌مود به‌جای اینکه یه پروژهٔ جدا باشه، همراه خود تم میاد. راه‌اندازی هم با نصب پکیج از Composer و یه دستور artisan تمومه.
نکات کلیدی:
- Pinion UI یه کتابخونهٔ کامپوننت Blade رایگان و MIT برای لاراوله
- data-theme رنگ و data-tune فرم (فاصله، گردی گوشه، تایپوگرافی، سایه) رو کنترل می‌کنه
- ۳۹ تم و ۱۱ تیون مستقل از هم، در مجموع ۸۵۸ ترکیب ظاهری
- ۵۶ کامپوننت روی استک TALL که خروجی‌شون Tailwind معمولیه
- ui:eject هر وقت بخوای به Tailwind خالص برمی‌گردونه، پس قفل‌شدگی نداره
