Design Tokens

একটি ডিজাইন সিস্টেম খুব কমই সম্পূর্ণরূপে লেখা হয় যতটা বাস্তবায়িত হয়। আসল প্যালেট, স্পেসিং স্কেল এবং টাইপ র‌্যাম্প স্টাইলশীটে থাকে — কাস্টম বৈশিষ্ট্য, থিম ওভাররাইড এবং হার্ড-কোডেড মান জুড়ে ছড়িয়ে রয়েছে — এবং DevTools থেকে সেগুলিকে হাতে পুনঃনির্মাণ করার অর্থ হল এক সময়ে কয়েকশো নিয়মের মাধ্যমে ক্লিক করা এবং মানগুলি কপি করা৷

এই টুল একযোগে তাদের সব পড়া. এটি পৃষ্ঠার প্রতিটি স্টাইলশীটে চলে, যার মধ্যে ক্রস-অরিজিনগুলি সহ পৃষ্ঠাটি নিজেই পরিদর্শন করার অনুমতি নেই, এবং প্রতিটি কাস্টম সম্পত্তি সংগ্রহ করে, এছাড়াও ইনলাইন শৈলীতে রানটাইমে সেট করা ভেরিয়েবলগুলি। ভেরিয়েবলের উপর:root বেস tokens হয়ে যায়; থিম নির্বাচকের অধীনে একই নাম পুনরায় সংজ্ঞায়িত করা হয়েছে যেমন.dark, [data-theme="dark"] বা prefers-color-scheme আলাদা মোডে পরিণত হয়; পৃথক উপাদানে সংজ্ঞায়িত ভেরিয়েবলগুলিকে স্কোপড হিসাবে তালিকাভুক্ত করা হয়েছে। প্রতিটি মান তার var() চেইনের মাধ্যমে সমাধান করা হয়, তাই আপনি সেই রঙটি দেখতে পান যা আসলে রেন্ডার করে, শুধুমাত্র অন্য ভেরিয়েবলের রেফারেন্স নয়।

প্রতিটি token তার মান এবং নাম থেকে শ্রেণীবদ্ধ করা হয় — রঙ, ফন্ট পরিবার, ফন্টের আকার, ওজন, লাইনের উচ্চতা, ব্যবধান, ব্যাসার্ধ, ছায়া, গ্রেডিয়েন্ট, সময়কাল, ইজিং বা z-সূচক — এবং রঙগুলিকে হেক্সে স্বাভাবিক করা হয়, যার মধ্যে শুধুমাত্র চ্যানেলের ফর্ম্যাটগুলি Tailwind এবং shadcn ব্যবহার করা হয় ( 222 -rgb 222 47% 11% Bootstrap ঘোষিত ভেরিয়েবলের পাশাপাশি, টুলের নমুনাগুলি রং, ফন্ট স্ট্যাক, মাপ, ব্যাসার্ধ এবং ছায়াগুলি রিপোর্ট করার জন্য উপাদানগুলিকে রেন্ডার করেছে, যা আসলে ব্যবহার করা হয়, ব্যবহারের সংখ্যা সহ - ঠিক আপনার এমন একটি সাইটে যা প্রয়োজন যা কখনই ভেরিয়েবল গ্রহণ করেনি।

এক্সপোর্ট এক ক্লিকে লাগে। Download tokens JSON W3C Design Tokens ফরম্যাট ( $value এবং $type) সংরক্ষণ করে, যা Tokens Studio প্লাগইন Figma এবং Style Dictionary আমদানি করে যেকোন প্ল্যাটফর্মের জন্য কোডে পরিণত করে; থিম মোড এবং পর্যবেক্ষণ করা মান তাদের নিজস্ব গ্রুপে রাখা হয়, তাই কিছুই মিশ্রিত হয় না। Download CSS ভেরিয়েবলগুলিকে একটি স্টাইলশীট হিসাবে ব্যাক আউট করে, প্রতিটি মোড তার মূল নির্বাচকের অধীনে থাকে।