रंग

Tanrei किसी कंपोनेंट से कभी रंग चुनने को नहीं कहता। कंपोनेंट एक रोल माँगते हैं, जैसे primary या surface-container, और सक्रिय थीम तय करती है कि उस रोल में कौन-सा रंग भरेगा। रोल Tanrei की शब्दावली से तय होते हैं, और उनके मान हर डिज़ाइन सिस्टम की लेयर से।

रोल

link

• इंटेंट: primary, secondary, और स्टेटस के चार इंटेंट error, success, warning और info। हर एक चार के सेट में आता है: रंग, उस पर रखे कॉन्टेंट के लिए उसका on- रंग, एक हल्का -container, और on-…-container।
• सरफ़ेस: surface, पाँच स्टेप की सीढ़ी surface-container-lowest … surface-container-highest, और साथ में surface-dim और surface-bright। किसी भी सरफ़ेस पर रखा कॉन्टेंट on-surface या उससे हल्का on-surface-variant इस्तेमाल करता है।
• आउटलाइन: outline और outline-variant (नीचे देखें)।
• इनवर्स रोल, उन एलिमेंट के लिए जो जान-बूझकर थीम को पलट देते हैं, जैसे स्नैकबार।
• फ़िक्स्ड रोल, जो लाइट और डार्क में एक ही टोन रखते हैं।
• यूटिलिटी: scrim, shadow, focus-ring और एलिवेशन में इस्तेमाल होने वाले रिंग और शैडो के रंग।

फ़िल को हमेशा उसके अपने on- रोल के साथ जोड़ें। कंट्रास्ट की जाँचें इसी जोड़ी की गारंटी देती हैं।

मोनोक्रोम प्राइमरी

link

डिफ़ॉल्ट थीम में primary लाइट मोड में लगभग काला और डार्क मोड में लगभग सफ़ेद है। इसलिए स्क्रीन की सबसे अहम क्रिया उस पर सबसे ज़्यादा कंट्रास्ट वाली चीज़ होती है, और वह प्रॉडक्ट के अपने रंगों से कभी होड़ नहीं करती। secondary सहायक क्रियाओं के लिए एक नरम न्यूट्रल है।

एक ऐक्सेंट, किफ़ायत से

link

ऐक्सेंट कोर शब्दावली का हिस्सा नहीं है। यह एक पैलेट है जिसे डिफ़ॉल्ट Tanrei सिस्टम घोषित करता है (सीड #30a3f0), जिससे उसे वही चार रोल मिलते हैं जो किसी भी इंटेंट को: accent, on-accent, accent-container, on-accent-container। कोर रोल focus-ring इसी से रंग लेता है, और कोई नहीं: डिफ़ॉल्ट सिस्टम में link प्राइमरी का रंग लेता है, और लिंक अपने पास के टेक्स्ट से अपनी अंडरलाइन से पहचाना जाता है। प्रॉडक्ट अपने पैलेट इसी तरह घोषित करता है — ब्रैंड का ऐसा रंग जिसकी दोबारा गणना नहीं होनी चाहिए, या किसी क्विज़ का “सही” और “ग़लत” — और Material Design 3 की नक़ल करने वाला प्रीसेट tertiary को इसी तरह घोषित करता है, बजाय इसके कि Tanrei वह जगह सबके लिए ढोए। ऐक्सेंट को सजावट के लिए इस्तेमाल न करें; जब सब कुछ नीला हो, तो कुछ भी नीला नहीं रहता।

outline और outline-variant

link

आउटलाइन के दोनों रोल देखने में मिलते-जुलते हैं और काम उलटे करते हैं।

रोल	उद्देश्य	कंट्रास्ट
outline	एक कार्यात्मक सीमा: अकेली चीज़ जो बताती है कि कंट्रोल कहाँ है, जैसे ख़ाली टेक्स्ट फ़ील्ड, बिना चेक का चेकबॉक्स या आउटलाइन वाला बटन।	हर सरफ़ेस रोल के मुक़ाबले कम से कम 3:1
outline-variant	एक सजावटी बारीक रेखा: डिवाइडर, कार्ड के बॉर्डर, एलिवेशन की रिंग। इसे हटाने से कोई जानकारी छिपनी नहीं चाहिए।	स्टैंडर्ड कंट्रास्ट पर कोई आवश्यकता नहीं, जहाँ यह कम अल्फ़ा वाला काला या सफ़ेद है। हर सरफ़ेस रोल के मुक़ाबले मध्यम कंट्रास्ट पर कम से कम 3:1 और उच्च पर 4.5:1, और हमेशा outline से हल्की

सावधानी

अगर बॉर्डर ही इस बात का अकेला संकेत है कि कंट्रोल मौजूद है, तो उसे outline इस्तेमाल करना होगा। 8% अल्फ़ा की बारीक रेखा देखने में सुहावनी है, और बहुत-से लोगों को दिखती ही नहीं।

कंट्रास्ट के स्तर

link

हर थीम कंट्रास्ट के तीन स्तरों पर मौजूद है। स्टैंडर्ड डिफ़ॉल्ट है। मध्यम और उच्च कॉन्टेंट के रोल को छोरों की ओर ले जाते हैं और आउटलाइन के दोनों रोल को मज़बूत करते हैं। वेब पर prefers-contrast: more के लिए उच्च कंट्रास्ट अपने आप लागू होता है; नेटिव प्लैटफ़ॉर्म अपनी-अपनी सिस्टम सेटिंग के अनुसार चलते हैं। इसे यहाँ आज़माएँ (स्विच पूरे पेज पर लागू होता है):

कंट्रास्ट

FilledTonalOutlinedText

स्कीम कैसे जनरेट होती हैं

link

रंग हाथ से नहीं चुने जाते। एक सिस्टम फ़ाइल (tokens/systems/core.system.json) पैलेट घोषित करती है — ऐक्सेंट और error के लिए एक-एक सीड रंग, न्यूट्रल का ह्यू और क्रोमा — और डेटा के रूप में बताती है कि हर रोल लाइट और डार्क में, कंट्रास्ट के हर स्तर पर, किस पैलेट का कौन-सा टोन लेता है। बिल्ड के समय एक जनरेटर:

1. Apache-2.0 लाइसेंस वाली material-color-utilities लाइब्रेरी से हर मुख्य रंग को HCT कलर स्पेस में एक टोनल पैलेट में बदलता है, जहाँ टोन का कंट्रास्ट से अनुमान लगाने लायक़ संबंध है;
2. न्यूट्रल पैलेट को थीम के क्रोमा तक सीमित करता है, जो शुद्ध धूसर रंगों के लिए डिफ़ॉल्ट रूप से शून्य है;
3. लाइट और डार्क के लिए, कंट्रास्ट के हर स्तर पर, हर रोल को एक टोन देता है;
4. नतीजे को tokens/generated/ के अंतर्गत DTCG फ़ाइलों के रूप में लिखता है।

जनरेटर के एल्गोरिदम का एक वर्शन होता है (specVersion), इसलिए मैपिंग में बदलाव हर रंग में चुपचाप आया खिसकाव नहीं, बल्कि सोच-समझकर किया गया, रिव्यू हो सकने वाला क़दम होता है।

CI में लागू किए गए इनवेरिएंट

link

थीम और कंट्रास्ट के सभी छह संयोजनों के लिए टोकन बिल्ड तब तक विफल रहता है जब तक:

• हर (role, on-role) जोड़ी 4.5:1 तक, और दोनों उच्च-कंट्रास्ट स्कीमों में 7:1 तक, न पहुँचे;
• outline हर सरफ़ेस रोल के मुक़ाबले 3:1 तक न पहुँचे;
• focus-ring उन सरफ़ेस के मुक़ाबले 3:1 तक न पहुँचे जिन पर वह बनती है।

बिल्ड पास कराने के लिए थ्रेशोल्ड ढीला नहीं किया जा सकता। रोल और मानों की पूरी सूची कलर टोकन रेफ़रेंस में देखें।