عن المشروع

Chromatic هي أداة لإدارة أنظمة التصميم من خلال إنشاء ملفات مخصصة لكل منصة من ملف مصدر يصف design tokens. يصفها ملف README بأنها نظام بناء لأنظمة التصميم متعددة المنصات باستخدام design tokens. يمكن أن تحتوي ملفات التوكنز على تعبيرات غنية بصيغة طبيعية. تشمل الأمثلة العمليات الحسابية مثل 18pt + 5px، والوحدات مثل 12px، والدوال مثل ()rgb و()mix و()saturate، والإشارات إلى توكنز أخرى. يمكن تعيين توكن باسم primary-hue على 210deg، وتعريف primary كـ hsl({primary-hue}, 100%, 40%)، ويمكن لـ primary-dark الإشارة إلى primary مع تحويل darken. يتيح ذلك بقاء تعريفات التوكنز مدمجة مع التعبير عن العلاقات بين القيم. يدعم Chromatic السمات (themes). يمكن أن يكون لكل توكن متغير سمة، مثل dark وlight، أو تخطيطات compact وcozy. يتم إنشاء المخرجات اللازمة تلقائيًا. على سبيل المثال، يمكن لتوكن cta-button-background تعريف قيم منفصلة لسمتي dark وlight. يظهر دعم السمات أيضًا من خلال الاستيرادات: يمكن استيراد ملف سمة dark في ملف توكنز أساسي بحيث تحتوي المخرجات الناتجة على القيم الافتراضية والقيم المخصصة للسمة. تهدف الأداة إلى أن تكون بدون إعدادات (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. يمكن للمستخدمين أيضًا كتابة ملف التوكنز الخاص بهم. يمكن تحويل ملف tokens.yaml يحتوي على قيم background وbody-color باستخدام chromatic tokens.yaml -o tokens.scss، مما ينتج متغيرات Sass مع أعلام افتراضية. يمكن لملف سمة dark تعيين theme: dark وتوكنز مثل background وbody-color، ثم استيراده في ملف التوكنز الرئيسي. تتضمن مخرجات CSS الناتجة خصائص مخصصة على مستوى root ومحدد سمة dark مع خصائص مخصصة لـ data-theme='dark'.