Theme Studio
कुछ कंट्रोल घुमाएँ, असली कंपोनेंट को साथ बदलते देखें, और डिज़ाइन सिस्टम की एक मान्य लेयर एक्सपोर्ट करें जिसे आप हर प्लैटफ़ॉर्म के लिए बिल्ड कर सकते हैं।
डिज़ाइन सिस्टम डिफ़ॉल्ट रूप से ठीक लगना चाहिए, और जब आप एक चीज़ बदलें तो आपके साथ चलना चाहिए। Studio इसी विचार का छूकर देखा जा सकने वाला रूप है: एक आधार चुनें, कोई डायल घुमाएँ, कोई रंग चुनें, एक टोकन बदलें, अपना एक टोकन जोड़ें — और वह छोटी लेयर फ़ाइल एक्सपोर्ट करें जो ठीक वही बताती है जो आपने बदला, और कुछ नहीं।
इसमें कुछ भी मॉक-अप नहीं है। प्रीव्यू एक असली सिस्टम स्कोप है जिसमें असली कंपोनेंट हैं, और उस पर ठीक वही स्टाइलशीट लगती है जो tanrei build आपकी लेयर के लिए लिखेगा — आपके ब्राउज़र में उसी इंजन, उसी एमिटर और उन्हीं ऐक्सेसिबिलिटी जाँचों से गणना की गई। रिपॉज़िटरी के टेस्ट Studio की लेयर को CLI की पाइपलाइन से बिल्ड करते हैं और माँगते हैं कि पूरी शीट, छहों स्कीम में हर टोकन का मान और हर चेतावनी मेल खाए।
आपकी थीम इन्हीं कंपोनेंट से बनी पाँच स्क्रीन पर दिखती है — हर तरह के कंपोनेंट की झलक, एक डैशबोर्ड, एक सेटिंग फ़ॉर्म, एक सूची और उसका विवरण, और एक दस्तावेज़ पेज — लाइट में, डार्क में या दोनों साथ-साथ, और तीनों कंट्रास्ट स्तरों में से हर एक पर। आप कौन-सी स्क्रीन और कैसे देखते हैं, यह आपकी थीम का हिस्सा नहीं है: इसमें से कुछ भी फ़ाइल में सेव नहीं होता।
आप जो लेयर बना रहे हैं, वह इसी ब्राउज़र में रहती है, और पेज के पते में भी: Studio का लिंक उसे उसी लेयर के साथ खोलता है। लिंक खोलने से इस ब्राउज़र में सहेजी हुई लेयर नहीं बदलती: Studio के ऊपर एक बैनर बताता है कि लिंक के साथ कौन-सी लेयर आई है और वह किस सिस्टम पर आधारित है, और जब तक आप उसमें बदलाव न करें या उसे रखने का फ़ैसला न करें, आपकी लेयर बनी रहती है। आप अपनी लेयर पर लौट भी सकते हैं।
Studio का बार आपकी लेयर की शुरुआत से शुरू होता है: डिफ़ॉल्ट सिस्टम Tanrei, या थीम गैलरी का कोई उदाहरण — m3-like, cupertino और m3-expressive-like। हर उदाहरण दिखाता है कि एक लेयर किस हद तक नकल कर सकती है; यह उस सिस्टम का आधिकारिक डिज़ाइन नहीं है। Tanrei की रूट लेयर Core भी सूची में है, पर अभी चुनी नहीं जा सकती: उसमें अभी डिफ़ॉल्ट सिस्टम के मान हैं, और उनके तटस्थ होने पर यह खाली शुरुआत बनेगी। इसी मेन्यू से आप बन रही लेयर की जगह कोई लेयर फ़ाइल इंपोर्ट कर सकते हैं। जिस फ़ाइल को स्कीमा अस्वीकार करे, वह लोड नहीं होती और पैनल कारण बताता है; जिसे स्वीकार करे, वह लोड होती है और टोकन इंजन को उसमें जो मिले, वह पैनल में दिखता है। आपकी लेयर में बदलाव हों तो Studio उन्हें बदलने से पहले पूछता है, और पूर्ववत करें से वे वापस आ जाते हैं।
Studio के बार में एक्सपोर्ट एक साइड शीट खोलता है, जिसमें फ़ाइल है और यह भी कि उसका क्या करना है। उसकी पहली पंक्ति बताती है कि स्कीमा, टोकन इंजन और बिल्ड की जाँचें फ़ाइल को स्वीकार करती हैं या नहीं। थीम गैलरी के किसी उदाहरण से शुरू हुई लेयर डिफ़ॉल्ट रूप से उसी उदाहरण पर निर्भर रहती है: फ़ाइल छोटी रहती है और उदाहरण के बेहतर होने के साथ चलती है। आप हर मान लिख भी सकते हैं, ताकि उदाहरण बदलने पर फ़ाइल न बदले; उदाहरण में रहने वाला कंपोनेंट तब भी उसी से लिया जाता है। इसके बाद आती है फ़ाइल ख़ुद, कॉपी या डाउनलोड करने के लिए; tanrei build वेब के लिए जो स्टाइलशीट लिखता है, उसकी वे डिक्लेरेशन जो आधार सिस्टम से अलग हैं, साथ में पूरी स्टाइलशीट डाउनलोड करने का विकल्प; और आगे के क़दम, जिनमें हर कमांड वैसी ही है जैसी CLI लेता है, और लेयर शेयर करने का एक लिंक।
बाईं ओर की सूची में रूप-रंग के नौ हिस्से हैं — ब्रैंड का रंग, ग्रे, टाइपफ़ेस, साइज़, कोने, कॉर्नर स्मूदिंग, आइकन, दबाने पर फ़ीडबैक और फ़ोकस — हर एक के साथ उसकी अभी की वैल्यू और एक छोटा नमूना, और उनके नीचे वह सब जो लेयर में और होता है। किसी पंक्ति को दबाने पर उसके कंट्रोल दाईं ओर के पैनल में खुलते हैं। जो पंक्तियाँ पसंद हों उन्हें लॉक करें, फिर शफ़ल करें बाकी हर पंक्ति को कोई दूसरी वैल्यू देता है, जिसे एक बार पूर्ववत करके वापस किया जा सकता है। इंस्पेक्ट पैनल के ऊपर सारे टोकन और लेयर की फ़ाइल ख़ुद खोलता है। हर बदलाव को पूर्ववत किया और फिर से किया जा सकता है, Studio के बार के बटनों से या ⌘Z और ⇧⌘Z (Ctrl+Z और Ctrl+Shift+Z) से।
| आप करते हैं | लेयर को मिलता है |
|---|---|
| आधार सिस्टम चुनना | "extends" |
| कोई डायल घुमाना | dial.* पर "$value", एक reason के साथ |
| सीड या ह्यू + क्रोमा चुनना, पैलेट घोषित करना या हटाना | "palettes" में एक एंट्री — null इनहेरिट किए गए पैलेट को हटा देता है |
| पैलेट के किसी टोन को ठीक एक रंग पर तय करना | उस पैलेट का source.tones — { "40": "#e60012" }; नई पंक्ति जनरेट किए गए रंग से शुरू होती है |
| Brand, Plain या Mono की फ़ैमिली का क्रम तय करना, जेनेरिक फ़ॉलबैक चुनना, प्लैटफ़ॉर्म का फ़ॉन्ट सबसे पहले रखना | ref.typeface.* पर { "$value": ["IBM Plex Sans", "system-ui", "sans-serif"], "reason": "…" } |
| आइकन सेट चुनना — एक वेरिएबल फ़ैमिली, या चयन के हर स्टेट की अपनी फ़ैमिली — और उसका वेट और फ़िल | ref.typeface.icon या sys.icon.family.*, sys.icon.weight, sys.icon.fill.* पर $value के पिन |
| कॉर्नर स्मूदिंग का स्लाइडर खिसकाना | sys.shape.corner-smoothing पर { "$value": 0.6, "reason": "…" } — 0–1 की एक मात्रा, Figma वाले अर्थ में (शेप) |
| यह चुनना कि दबाने का जवाब कैसे दिया जाए, फ़ोकस कैसा दिखे | sys.behavior.* पर { "$value": 1, "reason": "…" } — आप एक नाम चुनते हैं (ripple, glow); फ़ाइल में उसकी जगह रखी जाती है |
| टोकन को स्केल करना | { "scale": n } — जो वह इनहेरिट करता है उसका एक अनुपात, जिसे अब भी उसका डायल चलाता है |
| टोकन को दूसरी जगह मोड़ना | { "$value": "{another.token}" } |
| टोकन को पिन करना | { "$value": …, "reason": "…" } — हर डायल से मुक्त; जब तक कारण न हो, लिखा नहीं जाता |
| कोई नियम बदलना | { "derive": … } — किसी डायल पर गुणांक, कलर रोल के लिए टोन की टेबल, स्टेट के लिए mix या alpha |
| पैटर्न नियम संपादित करना | "rules" — होवर, फ़ोकस, दबाया हुआ और अक्षम स्टेट कैसे दिखते हैं, हर कंपोनेंट के लिए एक साथ |
| Add… से जोड़ना: कोई साइज़ या वेरिएंट, किसी सीरीज़ में एक स्टेप, आपका अपना टोकन | "vocabulary" के अंतर्गत एक घोषणा, अनिवार्य rationale के साथ |
Typefaces, Icons, Shape और Behaviour पिन लिखते हैं, और पिन को कारण चाहिए: चारों में से हर एक इसे एक बार पूछता है, पहले से भरे हुए रूप में (“Brand typeface.”), और वह जो भी पिन लिखता है उसमें आपके ही शब्द होते हैं। इंस्पेक्ट के टोकन ट्री में प्रकार का चुनाव नाम से किया जाता है, संख्या के रूप में कभी टाइप नहीं किया जाता, और फ़ॉन्ट स्टैक वही क्रमबद्ध सूची है जो टाइपफ़ेस वाली पंक्ति में है। प्रीव्यू के बटन असली हैं, इसलिए ripple, dim, ढलते हुए कोने और फ़ोकस की चमक वही हैं जो <tanrei-button> इस ब्राउज़र में उन टोकन के साथ वास्तव में करता है। टाइप रैंप हर टाइपफ़ेस की एक हेडिंग, चलता टेक्स्ट, एक लेबल और कोड बनाता है — और हर वह टेक्स्ट स्टाइल भी जो आपकी लेयर जोड़ती है — और प्रीव्यू बार का Emphasized टॉगल इन्हें इनके रोल के वेट में फ़ैमिली का sys.typescale.emphasis.* स्टेप जोड़कर, सीधे शीट से, दोबारा बनाता है। जब किसी चुनाव से कुछ भी नहीं बनता — जैसे dim, जब दबाए हुए स्टेट की हर ओपैसिटी 1 हो, जैसा डिफ़ॉल्ट सिस्टम में है — तो बिल्ड की अपनी चेतावनी कंट्रोल के नीचे शब्दशः दिखाई जाती है, और वह जिस टोकन का नाम लेती है, वह उसके एडिटर का लिंक होता है।
जो कंट्रोल अपने आधार मान पर छोड़ा गया है, वह कुछ नहीं लिखता, इसलिए अनछुआ Studio { "id", "extends" } एक्सपोर्ट करता है और ठीक आधार सिस्टम के बराबर बिल्ड होता है। एक मान्य लेयर में जो कुछ भी हो सकता है, वह सब यहाँ संपादित किया जा सकता है — लेयर इंपोर्ट करने पर कुछ भी किनारे नहीं छूटता।
tanrei studio इसी Studio को लोकल रूप से सर्व करता है और उसे आपके प्रॉडक्ट की लेयर फ़ाइल से जोड़ता है: संपादन करते ही फ़ाइल में सेव हो जाते हैं, Build tanrei build चलाता है, और जब फ़ाइल नीचे से बदल जाती है — किसी एडिटर से, किसी git checkout से — तो Studio पूछता है कि रीलोड करें या जो खुला है उसे रखें। वह कभी चुपचाप ओवरराइट नहीं करता। सेव तभी लिखा जाता है जब स्कीमा, लेयर की शृंखला के नियम और टोकन इंजन, तीनों लेयर को स्वीकार कर लें — सर्वर ख़ुद इंजन से पूछता है और उसी के संदेश के साथ जवाब देता है — इसलिए डिस्क पर रखी फ़ाइल हमेशा ऐसी होती है जिसे tanrei build बिल्ड कर लेता है, उसे किसी भी प्रोग्राम ने भेजा हो। ऐप उन टाइपफ़ेस और आइकन फ़ॉन्ट को भी अपने ही पते से सर्व करता है जिनका नाम Tanrei के साथ आने वाले सिस्टम लेते हैं (Inter, Noto Sans JP, Roboto Mono, Roboto, Material Symbols Rounded और Outlined), ताकि प्रीसेट अपने ही टाइपफ़ेस में बने।
प्रॉडक्ट अपनी लेयर एक के ऊपर एक रख सकता है — acme-app.system.json, जो अपने बग़ल में रखी acme.system.json का विस्तार करती है। tanrei studio आपकी फ़ाइल के बग़ल की लेयर Studio को सिर्फ़ पढ़ने के लिए देता है, और Studio पूरी शृंखला को ब्राउज़र में ठीक वैसे ही रिज़ॉल्व करता है जैसे साथ आने वाले सिस्टमों के लिए करता है; जब कोई पैरेंट डिस्क पर बदलता है, तो सब कुछ दोबारा निकाला जाता है।
साइट पर Studio के पीछे कोई फ़ाइल नहीं है, इसलिए जो लेयर आपकी अपनी किसी लेयर का विस्तार करती है, वह यहाँ इंपोर्ट नहीं हो सकती — उसे tanrei studio से खोलें, जो उसके बग़ल की फ़ाइलों को जानता है। Studio कभी उस साइट के अलावा कहीं से फ़ॉन्ट नहीं मँगाता जो उसे सर्व करती है: जो फ़ैमिली न वह साइट देती है और न आपके ब्राउज़र के पास है, उसका नाम बताया जाता है, और प्रीव्यू ईमानदारी से फ़ॉलबैक दिखाता है। इसके “प्रीव्यू बराबर बिल्ड” वाले टेस्ट वेब शीट, टोकन बंडल और चेतावनियों की तुलना करते हैं; नेटिव आउटपुट उसी मॉडल से tanrei build जनरेट करता है।
कमांड लाइन टूल किसी कमांड में लेयर नहीं लेता: tanrei init अपनी एक लेयर शुरू करता है, और एक्सपोर्ट से डाउनलोड की गई फ़ाइल उसकी जगह ले लेती है।