Design Tokens

یک سیستم طراحی به ندرت به اندازه ای که پیاده سازی شده است، نوشته می شود. پالت واقعی، مقیاس فاصله و سطح شیب تایپ در شیوه نامه ها - پراکنده در ویژگی های سفارشی، لغو تم و مقادیر سخت کد شده - و بازسازی آنها با دست از DevTools به معنای کلیک کردن روی صدها قانون و کپی کردن مقادیر در یک زمان است.

این ابزار همه آنها را به یکباره می خواند. همه سبک‌های صفحه را بررسی می‌کند، از جمله مواردی که خود صفحه مجاز به بازرسی آن نیست، و همه ویژگی‌های سفارشی را جمع‌آوری می‌کند، به علاوه متغیرهایی که در زمان اجرا در سبک‌های درون خطی تنظیم شده‌اند. متغیرهای روی:root به tokens پایه تبدیل می شوند. همان نام‌هایی که تحت یک انتخاب‌کننده تم باز تعریف می‌شوند، مانند.dark ، [data-theme="dark"] یا prefers-color-scheme به حالت‌های جداگانه تبدیل می‌شوند. متغیرهای تعریف شده بر روی مؤلفه‌های جداگانه به‌عنوان scoped فهرست می‌شوند. هر مقدار از طریق زنجیره var() خود حل می شود، بنابراین رنگی را می بینید که در واقع رندر می شود، نه فقط یک مرجع به متغیر دیگری.

هر token بر اساس مقدار و نام خود طبقه بندی می شود - رنگ، خانواده فونت، اندازه قلم، وزن، ارتفاع خط، فاصله، شعاع، سایه، گرادیان، مدت زمان، کاهش یا شاخص z- و رنگ ها به هگز عادی می شوند، از جمله فرمت های فقط کانال Tailwind و shadcn استفاده می شود ( 222 47% 11% Bootstrap -rgb %). در کنار متغیرهای اعلام‌شده، ابزار نمونه‌هایی از عناصر را برای گزارش رنگ‌ها، پشته‌های فونت، اندازه‌ها، شعاع‌ها و سایه‌هایی که در واقع استفاده می‌شوند، با تعداد استفاده - دقیقاً همان چیزی است که شما در سایتی نیاز دارید که هرگز متغیرها را قبول نکرده است، ارائه می‌کند.

صادرات یک کلیک طول می کشد. Download tokens JSON قالب W3C Design Tokens ( $value و $type) را ذخیره می‌کند، که افزونه Tokens Studio آن را به Figma وارد می‌کند و Style Dictionary به کد برای هر پلتفرمی تبدیل می‌شود. حالت‌های تم و مقادیر مشاهده‌شده در گروه‌های خود نگهداری می‌شوند، بنابراین هیچ چیز با هم مخلوط نمی‌شود. Download CSS متغیرها را به عنوان یک شیوه نامه می نویسد و هر حالت زیر انتخابگر اصلی خود قرار دارد.