शेप

शेप टोकन कॉर्नर रेडियस तय करते हैं। स्केल स्टेप के जाने-पहचाने नाम रखता है — none, extra-small, small, medium, large, extra-large और full — और उन्हें जान-बूझकर छोटे मान देता है, क्योंकि Tanrei के लेआउट घने हैं और उसके बॉर्डर पतले। बारीक रेखाओं के पास बड़े रेडियस ढीले और अस्पष्ट लगते हैं; छोटे रेडियस मशीन से तराशे हुए लगते हैं।

none 0px

extra-small 3px

small 6px

medium 8px

large 12px

large-increased 14px

extra-large 16px

extra-large-increased 20px

extra-extra-large 24px

full full

टोकन	मान	टिप्पणियाँ
--tanrei-sys-shape-corner-none	0px
--tanrei-sys-shape-corner-extra-small	3px
--tanrei-sys-shape-corner-small	6px	Default for controls: buttons, inputs, menu items, tooltips.
--tanrei-sys-shape-corner-medium	8px
--tanrei-sys-shape-corner-large	12px
--tanrei-sys-shape-corner-large-increased	14px
--tanrei-sys-shape-corner-extra-large	16px
--tanrei-sys-shape-corner-extra-large-increased	20px
--tanrei-sys-shape-corner-extra-extra-large	24px
--tanrei-sys-shape-corner-full	9999px	Opt-in only: avatars, badges, segmented controls, pill variants.

इससे जनरेट किया गया: design/tokens/tanrei.light.tokens.json, tokens/sys/shape.tokens.json

शेप लागू करना

link

• कंट्रोल small (6px) इस्तेमाल करते हैं: बटन, टेक्स्ट फ़ील्ड, मेन्यू आइटम, टूलटिप।
• कंटेनर साइज़ के साथ ऊपर के स्टेप पर जाते हैं: कार्ड और मेन्यू के लिए medium, डायलॉग और शीट के लिए large और उससे ऊपर।
• full ऑप्ट-इन है। पिल और वृत्त उन चीज़ों के लिए सुरक्षित हैं जो स्वभाव से गोल हैं या जिन्हें अलग दिखना है: अवतार, बैज, सेगमेंटेड कंट्रोल।
• -increased स्टेप एक्सप्रेसिव लेयर के हैं। वे डिफ़ॉल्ट स्केल बदले बिना कोनों को बड़ा करते हैं।

एक के भीतर एक कोने

link

जब कोई गोल कोनों वाला एलिमेंट गोल कोनों वाले कंटेनर के भीतर हो, तो भीतर का रेडियस बाहर के रेडियस में से दोनों के बीच की पैडिंग घटाने पर मिले मान के बराबर होना चाहिए। एक ही रेडियस वाले दो संकेंद्री वक्र बेमेल लगते हैं; बीच का अंतर घटा देने से वे समानांतर हो जाते हैं। अगर नतीजा शून्य या उससे कम हो, तो none इस्तेमाल करें।

कॉर्नर स्मूदिंग

link

रेडियस बताता है कि कोना कितना बड़ा है। एक दूसरा टोकन, sys.shape.corner-smoothing, बताता है कि उसका वक्र सीधे किनारे में कैसे ढलता है: 0 से 1 तक की एक संख्या, उसी अर्थ में जो Figma अपने corner-smoothing स्लाइडर को देता है। 0 पर कोना चौथाई वृत्त है। 0.6 पर यह वह है जिसे Figma iOS का कोना कहता है — उस सतत कोने के क़रीब जो Apple हर गोल आयत पर बनाता है, पर वही वक्र नहीं (नीचे देखें)। 1 पर चाप लगभग पूरी तरह दो लंबी, धीरे-धीरे ढलती भुजाओं में खो जाता है। रेडियस नहीं बदलता; सिर्फ़ वक्र का स्वभाव बदलता है, और यह अंतर बड़े रेडियस और पिल पर सबसे आसानी से दिखता है।

डिज़ाइन सिस्टम	corner-smoothing
tanrei	0
cupertino	0.6
m3-expressive-like	0
m3-like	0

इससे जनरेट किया गया: tokens/systems/*.system.json, design/tokens/<system>/tanrei.light.tokens.json

यह पूरे सिस्टम के लिए एक संख्या है — ब्रैंड जितना इसमें है कि कोना कितना बड़ा है, उतना ही इसमें कि वह कैसे ढलता है — और कोई डायल इसे स्केल नहीं करता। cupertino इसे 0.6 पर रखता है; डिफ़ॉल्ट सिस्टम 0 पर रहता है। लेयर इसे किसी भी पिन किए गए मान की तरह सेट करती है:

"tokens": {
  "tanrei.sys.shape.corner-smoothing": { "$value": 0.6, "reason": "हमारे नेटिव ऐप सतत कोने बनाते हैं।" }
}

Theme Studio में यह Groups → Shape के अंतर्गत स्लाइडर है। Figma में यही संख्या हर नोड की corner smoothing पर लागू होती है, इसलिए फ़ाइल वही दिखाती है जो प्रीसेट बनाता है।

हर प्लैटफ़ॉर्म क्या बनाता है

link

प्लैटफ़ॉर्म	0 पर	0 से ऊपर
Jetpack Compose, Flutter	चौथाई वृत्त	Figma की corner-smoothing रचना, जो इस मात्रा का अर्थ ही है: हर कोने पर तीन क्यूबिक बेज़ियर, जिनका चाप मात्रा के साथ सिकुड़ता है और ढलती भुजाएँ बढ़ती हैं। डिज़ाइनर Figma फ़ाइल में जो देखता है, ये दोनों वही बनाते हैं। Apple का सतत कोना एक अलग वक्र है: 0.6 पर, रेडियस 20 वाले 180×80 के बॉक्स पर दोनों में 5.1 px² का अंतर है — क्षेत्रफल का 0.035%, जो दिखता नहीं, पर रास्टराइज़र की अपनी आपसी असहमति का तीन गुना है, और कोई भी मात्रा दोनों को एक नहीं कर देती। टेस्ट इस रचना को पिन करते हैं, Apple को नहीं।
Web	चौथाई वृत्त	वह निकटतम सुपरएलिप्स जो किसी बॉक्स को मिल सकता है: corner-shape: superellipse(2 + s), जिसमें रेडियस (1 + 0.4 s) से स्केल होता है — 0.6 पर उसी बॉक्स पर Figma की रचना से 9.5 px² और Apple की रचना से 5.7 दूर। जिन ब्राउज़र में corner-shape नहीं है, वे गोलाकार कोने बनाते हैं।
SwiftUI	.circular	.continuous: 0 से ऊपर किसी भी मात्रा के लिए OS का अपना वक्र। मात्रा को OS की मात्रा पर राउंड किया जाता है, और पैकेज का README यह बताता है; 0.6 पर यह Figma की रचना से ऊपर बताए लगभग 5 px² की दूरी पर है, जो पैरिटी की सहन-सीमा के भीतर है।
React Native	borderCurve: "circular"	iOS पर borderCurve: "continuous", यहाँ भी 0 से ऊपर किसी भी मात्रा के लिए OS का वक्र। Android में ऐसा कोई वक्र नहीं है और वह गोलाकार ही रहता है।

कंपोनेंट जहाँ भी ख़ुद को गोल करता है, वहाँ यह मात्रा पढ़ी जाती है: कंटेनर, फ़ोकस रिंग, एलिवेशन की रिंग, रिपल का क्लिप। Button इसे आवश्यकता BTN-10 के रूप में कहता है।

कॉर्नर स्मूदिंग एक संख्या है, circular या continuous जैसा प्रकार का चुनाव नहीं, क्योंकि जिस एक जगह डिज़ाइनर इसे रोज़ सेट करते हैं, यानी Figma, वहाँ एक स्लाइडर है — और इसलिए भी कि एक नाम के नीचे तीन अलग वक्र पैरिटी नहीं होते।