डिज़ाइन सिस्टम इंजीनियरिंग सिद्धांत

# एक व्यावहारिक डिज़ाइन सिस्टम इंजीनियर का डिज़ाइन सिस्टम स्वाद - रंग, स्पेसिंग, टाइपोग्राफी, रेडियस और मोशन के लिए डिज़ाइन टोकन एक स्रोत फ़ाइल में परिभाषित करें, और उससे CSS वेरिएबल और प्लेटफ़ॉर्म आउटपुट जनरेट करें। विश्वास: 0.90 - टोकन का नाम उद्देश्य के आधार पर रखें, जैसे color-text-muted या space-inset-md, न कि कच्चे मान जैसे gray-500 या 16px। विश्वास: 0.85 - सिमेंटिक टोकन मानों को बदलकर लाइट और डार्क थीम का समर्थन करें, कभी भी व्यक्तिगत कंपोनेंट स्टाइल को ओवरराइड न करें। विश्वास: 0.90 - फोकस और कीबोर्ड लॉजिक को फिर से लागू करने के बजाय Radix UI या React Aria जैसे एक्सेसिबल हेडलेस प्रिमिटिव पर कंपोनेंट बनाएं। विश्वास: 0.85 - हर टोकन पेयरिंग के लिए WCAG 2.2 AA कंट्रास्ट पूरा करें और टोकन बदलने पर इसे स्वचालित रूप से जांचें। विश्वास: 0.90 - कंपोनेंट API को छोटा रखें: कुछ अच्छी तरह से नामित वेरिएंट और साइज़ दर्जनों बूलियन प्रॉप्स से बेहतर हैं। विश्वास: 0.85 - डायलॉग और मेनू जैसे जटिल कंपोनेंट के लिए कॉन्फ़िगरेशन ऑब्जेक्ट के बजाय स्लॉट या चिल्ड्रन के साथ कंपोज़िशन पसंद करें। विश्वास: 0.80 - रेफ्स को आगे भेजें और शेष प्रॉप्स को रूट एलिमेंट पर फैलाएं ताकि कंपोनेंट फॉर्म, टूलटिप्स और टेस्ट के साथ काम करें। विश्वास: 0.85 - कंपोनेंट के अंदर कभी भी रंग, स्पेसिंग या फ़ॉन्ट साइज़ को हार्ड-कोड न करें; Stylelint या ESLint नियम के साथ कच्चे मानों के लिए लिंट करें। विश्वास: 0.85 - हर कंपोनेंट को Storybook में उपयोग मार्गदर्शन, करें और न करें उदाहरण, और लाइव कंट्रोल के साथ दस्तावेज़ित करें। विश्वास: 0.85 - हर पुल रिक्वेस्ट पर Chromatic या Playwright स्क्रीनशॉट के साथ विज़ुअल रिग्रेशन टेस्ट चलाएं। विश्वास: 0.80 - कंपोनेंट टेस्ट में axe के साथ स्वचालित एक्सेसिबिलिटी जांच चलाएं, और रिलीज़ से पहले कीबोर्ड और स्क्रीन रीडर फ्लो को हाथ से भी टेस्ट करें। विश्वास: 0.85 - लाइब्रेरी को सिमेंटिक वर्जनिंग और Changesets द्वारा जनरेट किए गए चेंजलॉग के साथ एक वर्जन वाले पैकेज के रूप में प्रकाशित करें। विश्वास: 0.90 - नाम बदले गए प्रॉप या हटाए गए वेरिएंट को ब्रेकिंग चेंज मानें, और बड़े माइग्रेशन के लिए कोडमोड भेजें। विश्वास: 0.75 - हटाने से पहले डिप्रेकेट करें: पुराने API को चिह्नित करें, डेवलपमेंट-केवल चेतावनी लॉग करें, और अगले मेजर वर्जन में इसे हटाएं। विश्वास: 0.85 - ट्री-शेकेबल प्रति-कंपोनेंट एंट्री पॉइंट के साथ ESM भेजें और CSS फ़ाइलों को साइड इफेक्ट के रूप में सही ढंग से चिह्नित करें। विश्वास: 0.80 - prefers-reduced-motion का सम्मान करें और मोशन टोकन को छोटा और उद्देश्यपूर्ण रखें। विश्वास: 0.80 - आइकन को अनुकूलित SVG कंपोनेंट्स के एक अलग पैकेज के रूप में रखें, जिसमें लगातार साइज़ और स्ट्रोक टोकन हों। विश्वास: 0.75 - लॉजिकल CSS प्रॉपर्टी जैसे margin-inline-start का उपयोग करें ताकि कंपोनेंट राइट-टू-लेफ्ट लेआउट में काम करें। विश्वास: 0.75 - टोकन नाम साझा करके और हर रिलीज़ पर ड्रिफ्ट की समीक्षा करके Figma कंपोनेंट और कोड कंपोनेंट को सिंक में रखें। विश्वास: 0.70 - उत्पाद रिपॉजिटरी में लाइब्रेरी इम्पोर्ट और वन-ऑफ ओवरराइड को स्कैन करके अपनाने को मापें। विश्वास: 0.65 - किसी भी कोड से पहले उपयोग के मामले, API और एक्सेसिबिलिटी को कवर करने वाले छोटे प्रस्ताव टेम्पलेट के माध्यम से योगदान स्वीकार करें। विश्वास: 0.70