منصوبے کے بارے میں

Chromatic ایک ایسا ٹول ہے جو ڈیزائن ٹوکنز کی وضاحت کرنے والی ایک سورس فائل سے پلیٹ فارم کے مطابق فائلیں تیار کر کے ڈیزائن سسٹمز کو مینیج کرتا ہے۔ README اسے ڈیزائن ٹوکنز استعمال کرتے ہوئے کراس پلیٹ فارم ڈیزائن سسٹمز کے لیے ایک بلڈ سسٹم کے طور پر بیان کرتا ہے۔ ٹوکن فائلوں میں قدرتی سنٹیکس میں بھرپور ایکسپریشنز ہو سکتے ہیں۔ مثالوں میں حسابی آپریشنز جیسے 18pt + 5px، یونٹس جیسے 12px، فنکشنز جیسے rgb()، mix()، اور saturate()، اور دیگر ٹوکنز کے حوالے شامل ہیں۔ primary-hue نامی ٹوکن کو 210deg پر سیٹ کیا جا سکتا ہے، primary کو hsl({primary-hue}, 100%, 40%) کے طور پر بیان کیا جا سکتا ہے، اور primary-dark ایک darken ٹرانسفارمیشن کے ساتھ primary کا حوالہ دے سکتا ہے۔ یہ ٹوکن تعریفات کو مختصر رکھنے کے ساتھ ساتھ ویلیوز کے درمیان تعلقات کو ظاہر کرنے کی اجازت دیتا ہے۔ Chromatic تھیمز کو سپورٹ کرتا ہے۔ ہر ٹوکن کا ایک تھیم ویرینٹ ہو سکتا ہے، جیسے کہ dark اور light، یا compact اور cozy لے آؤٹس۔ ضروری آؤٹ پٹ آرٹفیکٹس خود بخود تیار ہو جاتے ہیں۔ مثال کے طور پر، ایک cta-button-background ٹوکن ڈارک اور لائٹ تھیمز کے لیے الگ الگ ویلیوز بیان کر سکتا ہے۔ تھیم سپورٹ امپورٹس کے ذریعے بھی دکھائی گئی ہے: ایک ڈارک تھیم فائل کو بیس ٹوکن فائل میں امپورٹ کیا جا سکتا ہے تاکہ تیار شدہ آؤٹ پٹ میں ڈیفالٹ اور تھیمڈ دونوں ویلیوز شامل ہوں۔ اس ٹول کا مقصد zero-conf ہونا ہے۔ شروع کرنے کے لیے YAML یا JSON میں لکھی گئی ایک سادہ ٹوکن فائل کافی ہے۔ ضرورت پڑنے پر Chromatic کو کسٹمائز بھی کیا جا سکتا ہے: صارفین اپنی ضروریات کے مطابق آؤٹ پٹ فائلوں کے فارمیٹ کو لکھ یا تبدیل کر سکتے ہیں۔ یہ ایک API کے طور پر بھی دستیاب ہے جسے بلڈ سسٹم سے کال کیا جا سکتا ہے۔ Chromatic ملٹی پلیٹ فارم ہے۔ ایک ہی ٹوکن فائل سے، یہ ویب کے لیے Sass اور CSS میں، iOS کے لیے JSON اور plist فارمیٹس میں، اور Android کے لیے XML میں پلیٹ فارم کے مطابق آرٹفیکٹس تیار کر سکتا ہے۔ یہ HTML فائل کے طور پر اسٹائل گائیڈ بھی تیار کر سکتا ہے۔ README میں موجود گائیڈ میں npm install -g @arnog/chromatic کے ذریعے پیکج کو گلوبلی انسٹال کرنا، chromatic example ./test کے ساتھ ایک مثال ڈائریکٹری بنانا، اور chromatic ./test -o tokens.scss یا chromatic ./test -o tokens.html چلانا شامل ہے۔ صارفین اپنی ٹوکن فائل بھی لکھ سکتے ہیں۔ background اور body-color ویلیوز والی ایک tokens.yaml فائل کو chromatic tokens.yaml -o tokens.scss کے ذریعے تبدیل کیا جا سکتا ہے، جس سے ڈیفالٹ فلیگز کے ساتھ Sass ویری ایبلز تیار ہوتے ہیں۔ ایک ڈارک تھیم فائل theme: dark اور background اور body-color جیسے ٹوکنز سیٹ کر سکتی ہے، اور پھر اسے مین ٹوکن فائل میں امپورٹ کیا جا سکتا ہے۔ تیار شدہ CSS آؤٹ پٹ میں روٹ لیول کسٹم پراپرٹیز اور data-theme='dark' کسٹم پراپرٹیز کے ساتھ ایک ڈارک تھیم سلیکٹر شامل ہوتا ہے۔