डिज़ाइन टोकन
कुछ डायल से निकले चार स्तर, जो हर कॉन्टेक्स्ट के लिए रिज़ॉल्व होते हैं, DTCG फ़ॉर्मैट में एक बार लिखे जाते हैं और हर प्लैटफ़ॉर्म के लिए जनरेट होते हैं।
डिज़ाइन टोकन नाम दिया हुआ एक डिज़ाइन निर्णय है। Tanrei हर रंग, साइज़, टाइप स्टाइल, रेडियस, शैडो, अवधि और ओपैसिटी को Design Tokens Community Group फ़ॉर्मैट (वर्शन 2025.10) में टोकन के रूप में, रिपॉज़िटरी के tokens/ के अंतर्गत रखता है। यह डायरेक्टरी प्रोजेक्ट के दो सोर्स ऑफ़ ट्रुथ (प्रामाणिक स्रोतों) में से एक है।
नीचे के तीन स्तरों के नीचे एक चौथा स्तर है, dial: वे आठ संख्याएँ जिनसे हर व्युत्पन्न मान निकलता है। डायल, लेयर और कोई प्रॉडक्ट Tanrei को कैसे कस्टमाइज़ करता है, इसके लिए डिज़ाइन सिस्टम और कस्टमाइज़ेशन देखें।
| स्तर | प्रीफ़िक्स | इसमें क्या है | उदाहरण |
|---|---|---|---|
| रेफ़रेंस | tanrei.ref.* |
कच्चा माल: टोनल पैलेट, अल्फ़ा रैंप, टाइपफ़ेस और वेट। | tanrei.ref.palette.neutral.10 |
| सिस्टम | tanrei.sys.* |
रोल वाले निर्णय: कोई रंग या साइज़ किस काम के लिए है। थीम इसी स्तर को बदलती हैं। | tanrei.sys.color.primary |
| कंपोनेंट | tanrei.comp.* |
कंपोनेंट के भागों को सिस्टम टोकन से जोड़ने वाली बाइंडिंग। | tanrei.comp.button.filled.container.color |
हर स्तर सिर्फ़ नीचे की ओर इशारा कर सकता है: कंपोनेंट टोकन सिस्टम टोकन के एलियास होते हैं, और सिस्टम टोकन रेफ़रेंस टोकन के।
दो नियम इन स्तरों को काम का बनाए रखते हैं, और दोनों को pnpm validate लागू करवाता है:
- कंपोनेंट टोकन में कोई लिटरल नहीं होता — न रंग का, न टाइप, शेप, मोशन या ओपैसिटी का। कंपोनेंट टोकन हमेशा एलियास होता है, इसलिए थीम सिर्फ़ सिस्टम स्तर बदलकर हर कंपोनेंट का रूप बदल सकती है।
- कंपोनेंट में कोई हार्डकोड किया हुआ डिज़ाइन मान नहीं होता। अगर कोई मान नहीं है, तो हल एक नया टोकन है, कोई मैजिक नंबर नहीं।
टोकन का एक ही मान नहीं होता; हर कॉन्टेक्स्ट के लिए उसका एक मान होता है। Tanrei आज कॉन्टेक्स्ट के दो अक्ष रिज़ॉल्व करता है:
- थीम: लाइट या डार्क।
- कंट्रास्ट: स्टैंडर्ड, मध्यम या उच्च।
इससे रिज़ॉल्व किए गए छह संयोजन बनते हैं। इनका वर्णन एक DTCG रिज़ॉल्वर फ़ाइल (tokens/tanrei.resolver.json) करती है, और ये पूरी तरह रिज़ॉल्व की गई फ़ाइलों के रूप में design/tokens/ में लिखे जाते हैं; इस साइट का टोकन रेफ़रेंस इन्हीं को रेंडर करता है।
टोकन का नाम उसका पाथ है। प्लैटफ़ॉर्म उसी पाथ को अपनी-अपनी परिपाटी में लिखते हैं:
| प्लैटफ़ॉर्म | tanrei.sys.color.primary क्या बनता है |
|---|---|
| CSS | --tanrei-sys-color-primary |
| Swift, Kotlin, Dart, TypeScript | पैकेज के टोकन नेमस्पेस के अंतर्गत एक जनरेट किया गया कॉन्स्टेंट |
नेमस्पेस, CSS प्रीफ़िक्स और टैग प्रीफ़िक्स एक ही फ़ाइल, tanrei.config.json, से आते हैं। रिपॉज़िटरी में और कहीं इन्हें हार्डकोड करने की अनुमति नहीं है।
tokens/
सोर्स ऑफ़ ट्रुथ, हाथ से संपादितref/sys/comp/themes/
कलर स्कीम जनरेटर का इनपुटgenerated/
जनरेटर के लिखे पैलेट और स्कीमtanrei.resolver.json
design/tokens/
रिज़ॉल्व किए गए छह संयोजनpackages/web/src/generated/tokens.cssswiftui/…/Generated/TanreiTokens.swiftcompose/…/tokens/flutter/lib/src/generated/tokens.g.dartreact-native/src/generated/tokens.ts
pnpm generate हर व्युत्पन्न फ़ाइल को दोबारा बनाता है। CI दोबारा जनरेट करता है और कोई भी अंतर मिलने पर विफल हो जाता है, इसलिए जनरेट की गई फ़ाइल में हाथ से किया गया बदलाव कभी टिक नहीं सकता।
टिप्पणी
CSS में कलर टोकन light-dark() जोड़ियों के रूप में निकलते हैं। एक ही स्टाइलशीट दोनों थीम के लिए काम करती है, और कोई सबट्री सिर्फ़ अपनी color-scheme बदलकर थीम बदल सकती है।