एलिवेशन

एलिवेशन बताता है कि कौन-सी सरफ़ेस किसके ऊपर है। Tanrei छह अर्थपूर्ण स्तर रखता है, 0 से 5 तक, और उन्हें संयम से बनाता है।

level0

level1

level2

level3

level4

level5

टोकन	लाइट	डार्क
--tanrei-sys-elevation-level0
--tanrei-sys-elevation-level1	0px 0px 0px 1px rgb(0 0 0 / 0.08)	0px 0px 0px 1px rgb(0 0 0 / 0.08)
--tanrei-sys-elevation-level2	0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 2px 0px rgb(0 0 0 / 0.04)	0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 2px 0px rgb(0 0 0 / 0.04)
--tanrei-sys-elevation-level3	0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 4px 8px -4px rgb(0 0 0 / 0.04) 0px 16px 24px -8px rgb(0 0 0 / 0.06)	0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 4px 8px -4px rgb(0 0 0 / 0.04) 0px 16px 24px -8px rgb(0 0 0 / 0.06)
--tanrei-sys-elevation-level4	0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 8px 16px -4px rgb(0 0 0 / 0.04) 0px 24px 32px -8px rgb(0 0 0 / 0.06)	0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 8px 16px -4px rgb(0 0 0 / 0.04) 0px 24px 32px -8px rgb(0 0 0 / 0.06)
--tanrei-sys-elevation-level5	0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 8px 24px -12px rgb(0 0 0 / 0.12) 0px 8px 32px -12px rgb(0 0 0 / 0.06) 0px 32px 72px -12px rgb(0 0 0 / 0.06)	0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 8px 24px -12px rgb(0 0 0 / 0.12) 0px 8px 32px -12px rgb(0 0 0 / 0.06) 0px 32px 72px -12px rgb(0 0 0 / 0.06)

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

पहले रिंग, फिर शैडो

link

शून्य से ऊपर का हर स्तर एक कंपोज़िट शैडो टोकन है, जिसमें दो तरह की लेयर होती हैं:

1. elevation-ring रोल में एक 1px की रिंग, जो किसी भी बैकग्राउंड पर किनारे को साफ़ परिभाषित करती है;
2. एक या दो बहुत नरम, कम ओपैसिटी वाले शैडो, जो स्तर के साथ बढ़ते हैं।

रिंग हमेशा पहली लेयर होती है। जो प्लैटफ़ॉर्म शैडो का स्प्रेड नहीं बना सकता, वह इसे एक पिक्सल के बॉर्डर के रूप में रेंडर करता है और बाक़ी को वैसा ही रखता है।

कोई टिंट नहीं

link

उठी हुई सरफ़ेस पर प्राइमरी रंग का टिंट नहीं चढ़ाया जाता। गहराई रिंग से, शैडो से, और ज़रूरत हो तो surface-container की सीढ़ी के एक स्टेप से जताई जाती है। इससे न्यूट्रल सरफ़ेस न्यूट्रल बनी रहती हैं।

डार्क थीम में

link

लगभग काले कैनवस पर शैडो मुश्किल से दिखते हैं, इसलिए डार्क थीम में ज़्यादातर काम रिंग करती है और उठी हुई सरफ़ेस एक हल्के कंटेनर रोल पर भी चली जाती हैं।

एलिवेशन लागू करना

link

स्तर	आम इस्तेमाल
0	पेज और वह सब जो उसके बराबर सतह पर है
1	सामान्य अवस्था में कार्ड, चुने हुए सेगमेंटेड विकल्प
2	एलिवेटेड बटन, होवर पर उठे हुए कार्ड
3	मेन्यू, पॉपओवर, स्नैकबार
4–5	डायलॉग, शीट और दूसरी मोडल सरफ़ेस

उतने ही कम स्तर इस्तेमाल करें जितने में स्क्रीन का काम चल जाए। अगर दो पड़ोसियों को अलग करना है और दोनों में से कोई तैरता नहीं है, तो उसकी जगह बारीक रेखा इस्तेमाल करें।