---
title: "शेप"
description: "छोटे रेडियस वाला कॉर्नर स्केल, जिसमें कंट्रोल के लिए डिफ़ॉल्ट 6px है, और एक संख्या जो बताती है कि कोना कैसे मुड़ता है।"
url: "https://tanrei.chnotchy.com/hi/foundations/shape/"
last_updated: 2026-10-23T17:33:05.000Z
---

# शेप

> छोटे रेडियस वाला कॉर्नर स्केल, जिसमें कंट्रोल के लिए डिफ़ॉल्ट 6px है, और एक संख्या जो बताती है कि कोना कैसे मुड़ता है।

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

| टोकन | मान | टिप्पणियाँ |
| --- | --- | --- |
| `--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`

## शेप लागू करना

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

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

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

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

रेडियस बताता है कि कोना कितना बड़ा है। एक दूसरा टोकन, `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 पर रहता है। लेयर इसे किसी भी पिन किए गए मान की तरह सेट करती है:

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

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

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

| प्लैटफ़ॉर्म | 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, वहाँ एक स्लाइडर है — और इसलिए भी कि एक नाम के नीचे तीन अलग वक्र पैरिटी नहीं होते।