‏slideVars: متغیرهای CSS رو زنده تنظیم کن

کدپن کتابخونه‌ای به اسم @codepen/slidevars رو منتشر کرده که یه کار مشخص می‌کنه: متغیرهای CSS (همون custom propertyها مثل --box-size) رو پیدا می‌کنه و برای هرکدوم یه کنترل گرافیکی می‌سازه. برای مقدارهای عددی اسلایدر و برای رنگ‌ها انتخابگر رنگ. یعنی به جای اینکه هی عدد رو عوض کنی و صفحه رو رفرش کنی، همون‌جا می‌کشی و نتیجه رو می‌بینی.

ساده‌ترین حالتش هیچ تنظیماتی نمی‌خواد و خودش :root رو اسکن می‌کنه:

import { slideVars } from "@codepen/slidevars";

slideVars.init(); // That's it! Auto-detects all CSS variables

تشخیص خودکارش هم سرراسته: رنگ‌ها رو تو فرمت‌های hex و rgb و hsl و همین‌طور فضاهای رنگی جدیدتر مثل oklch() و lab() می‌شناسه، مقدارهای واحددار (px، rem، %، deg و…) رو اسلایدر می‌کنه با بازهٔ پیش‌فرض منطقی، و هرچی رو نفهمه رد می‌کنه. نکتهٔ خوبش اینه که مقدار فعلی رو فقط می‌خونه و تا وقتی کاربر یه کنترل رو تکون نده، چیزی رو روی صفحه بازنویسی نمی‌کنه.

بازه‌های پیش‌فرض بر اساس واحد تعیین می‌شن، مثلاً deg بین ۰ تا ۳۶۰، ms بین ۰ تا ۵۰۰۰، % بین ۰ تا ۱۰۰ و fr بین ۰ تا ۱۰. اگه مقدار فعلی بیرون این بازه باشه، بازه خودش بازتر می‌شه. برای فضاهای رنگی مدرن هم از وب‌کامپوننت استفاده می‌کنه که رنگ‌های HDR و gamut mapping رو پشتیبانی می‌کنه.

اگه تشخیص خودکار کافی نبود، می‌تونی دستی تنظیم کنی و حتی متغیرها رو گروه‌بندی کنی:

slideVars.init({
  "--width": { type: "slider", min: 10, max: 100, unit: "px", scope: "#animation" },
  "--bg": { type: "color", default: "red" },
});

پارامتر دوم init() هم چند گزینه داره: defaultOpen برای باز بودن پنل موقع لود، auto برای روشن و خاموش کردن تشخیص خودکار، scope برای اینکه متغیرها از یه المان خاص خونده شن، و filterVariables برای کنار گذاشتن متغیرهایی که با یه پیشوند خاص شروع می‌شن. کنترل‌ها هم برنامه‌ای با open()، close()، toggle() و destroy() مدیریت می‌شن. خود مخزن می‌گه فرقش با ابزارهای قدیمی‌تری مثل dat.gui و Knobs همین تشخیص خودکار و تمرکز کامل روی متغیرهای CSS هست.

نکات کلیدی:

• نصب با npm install @codepen/slidevars؛ لایسنس MIT و متعلق به CodePen
• فقط دو نوع کنترل داره: slider و color
• پنل به شکل یه وب‌کامپوننت با Shadow DOM به body تزریق می‌شه و دکمه‌ش بالا سمت راست ثابت می‌مونه
• بازه‌های پیش‌فرض بر اساس واحدن: deg از ۰ تا ۳۶۰، ms از ۰ تا ۵۰۰۰، s از ۰ تا ۱۰
• با Lit نوشته شده و بیلدش با Vite 7 و Rolldown انجام می‌شه؛ CSS جدا نداره و همه‌چی تو خروجی جاوااسکریپت باندل می‌شه