tanrei.sys.color के अंतर्गत सिस्टम के सभी कलर रोल, लाइट और डार्क के लिए रिज़ॉल्व किए हुए। स्वॉच रिज़ॉल्व किए गए असली मान दिखाते हैं, इसलिए आप जिस भी थीम में पढ़ रहे हों, दोनों थीम दिखती हैं; आधे पारदर्शी रोल उस कैनवस के ऊपर बनाए गए हैं जिसके लिए वे बने हैं। रोल का क्या अर्थ है और उन्हें कैसे इस्तेमाल करें, इसके लिए रंग पढ़ें।
प्राइमरी
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
on-primary | #ffffff | #111111 | --tanrei-sys-color-on-primary |
on-primary-container | #1b1b1b | #ebebeb | --tanrei-sys-color-on-primary-container |
primary | #1b1b1b | #ebebeb | --tanrei-sys-color-primary |
primary-container | #eeeeee | #262626 | --tanrei-sys-color-primary-container |
सेकंडरी
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
on-secondary | #ffffff | #1b1b1b | --tanrei-sys-color-on-secondary |
on-secondary-container | #262626 | #e2e2e2 | --tanrei-sys-color-on-secondary-container |
secondary | #525252 | #b9b9b9 | --tanrei-sys-color-secondary |
secondary-container | #eeeeee | #242424 | --tanrei-sys-color-secondary-container |
स्टेटस: error, success, warning, info
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
error | #cd262f | #ff928c | --tanrei-sys-color-error |
error-container | #ffedeb | #361d1b | --tanrei-sys-color-error-container |
info | #3066cb | #8eafff | --tanrei-sys-color-info |
info-container | #edf0ff | #1c2334 | --tanrei-sys-color-info-container |
on-error | #ffffff | #410004 | --tanrei-sys-color-on-error |
on-error-container | #3a211f | #ffe1df | --tanrei-sys-color-on-error-container |
on-info | #ffffff | #001944 | --tanrei-sys-color-on-info |
on-info-container | #212839 | #e1e8ff | --tanrei-sys-color-on-info-container |
on-success | #ffffff | #002108 | --tanrei-sys-color-on-success |
on-success-container | #1b2c1c | #daeed6 | --tanrei-sys-color-on-success-container |
on-warning | #ffffff | #2c1600 | --tanrei-sys-color-on-warning |
on-warning-container | #362410 | #ffe3cb | --tanrei-sys-color-on-warning-container |
success | #077b32 | #62c572 | --tanrei-sys-color-success |
success-container | #e2f6df | #172718 | --tanrei-sys-color-success-container |
warning | #9b5c00 | #f39e3a | --tanrei-sys-color-warning |
warning-container | #ffeee0 | #32200c | --tanrei-sys-color-warning-container |
सरफ़ेस
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
on-surface | #1b1b1b | #ebebeb | --tanrei-sys-color-on-surface |
on-surface-variant | #4b4b4b | #a0a0a0 | --tanrei-sys-color-on-surface-variant |
surface | #ffffff | #0b0b0b | --tanrei-sys-color-surface |
surface-bright | #ffffff | #1f1f1f | --tanrei-sys-color-surface-bright |
surface-container | #f6f6f6 | #151515 | --tanrei-sys-color-surface-container |
surface-container-high | #f3f3f3 | #1b1b1b | --tanrei-sys-color-surface-container-high |
surface-container-highest | #eeeeee | #222222 | --tanrei-sys-color-surface-container-highest |
surface-container-low | #f9f9f9 | #111111 | --tanrei-sys-color-surface-container-low |
surface-container-lowest | #ffffff | #040404 | --tanrei-sys-color-surface-container-lowest |
surface-dim | #f1f1f1 | #000000 | --tanrei-sys-color-surface-dim |
surface-variant | #eeeeee | #222222 | --tanrei-sys-color-surface-variant |
आउटलाइन
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
outline | #848484 | #7c7c7c | --tanrei-sys-color-outline |
outline-variant | #000000 · 8% | #ffffff · 14% | --tanrei-sys-color-outline-variant |
इनवर्स
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
inverse-link | #e2e2e2 | #1b1b1b | --tanrei-sys-color-inverse-link |
inverse-on-surface | #f1f1f1 | #1f1f1f | --tanrei-sys-color-inverse-on-surface |
inverse-primary | #e2e2e2 | #1b1b1b | --tanrei-sys-color-inverse-primary |
inverse-surface | #1f1f1f | #ebebeb | --tanrei-sys-color-inverse-surface |
यूटिलिटी
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
elevation-ring | #000000 · 8% | #ffffff · 14% | --tanrei-sys-color-elevation-ring |
elevation-shadow-1 | #000000 · 4% | #000000 · 10% | --tanrei-sys-color-elevation-shadow-1 |
elevation-shadow-2 | #000000 · 6% | #000000 · 16% | --tanrei-sys-color-elevation-shadow-2 |
elevation-shadow-3 | #000000 · 12% | #000000 · 30% | --tanrei-sys-color-elevation-shadow-3 |
focus-ring | #0070ac | #5db8ff | --tanrei-sys-color-focus-ring |
focus-ring-inner | #000000 · 0% | #000000 · 0% | --tanrei-sys-color-focus-ring-inner |
link | #1b1b1b | #ebebeb | --tanrei-sys-color-link |
scrim | #000000 · 40% | #000000 · 40% | --tanrei-sys-color-scrim |
shadow | #000000 | #000000 | --tanrei-sys-color-shadow |
ऐक्सेंट — Tanrei सिस्टम द्वारा घोषित पैलेट, कोर शब्दावली नहीं
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
accent | #0070ac | #5db8ff | --tanrei-sys-color-accent |
accent-container | #ddedff | #003859 | --tanrei-sys-color-accent-container |
on-accent | #ffffff | #001d32 | --tanrei-sys-color-on-accent |
on-accent-container | #003352 | #c2e0ff | --tanrei-sys-color-on-accent-container |
इससे जनरेट किया गया: design/tokens/tanrei.light.tokens.json, design/tokens/tanrei.dark.tokens.json
प्राइमरी
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
on-primary | #ffffff | #111111 | --tanrei-sys-color-on-primary |
on-primary-container | #131313 | #f3f3f3 | --tanrei-sys-color-on-primary-container |
primary | #131313 | #f3f3f3 | --tanrei-sys-color-primary |
primary-container | #e8e8e8 | #2a2a2a | --tanrei-sys-color-primary-container |
सेकंडरी
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
on-secondary | #ffffff | #1b1b1b | --tanrei-sys-color-on-secondary |
on-secondary-container | #1b1b1b | #f1f1f1 | --tanrei-sys-color-on-secondary-container |
secondary | #424242 | #cccccc | --tanrei-sys-color-secondary |
secondary-container | #e8e8e8 | #282828 | --tanrei-sys-color-secondary-container |
स्टेटस: error, success, warning, info
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
error | #b40e20 | #ffb3ae | --tanrei-sys-color-error |
error-container | #ffedeb | #361d1b | --tanrei-sys-color-error-container |
info | #1655b9 | #b0c6ff | --tanrei-sys-color-info |
info-container | #edf0ff | #1c2334 | --tanrei-sys-color-info-container |
on-error | #ffffff | #410004 | --tanrei-sys-color-on-error |
on-error-container | #311917 | #ffe9e7 | --tanrei-sys-color-on-error-container |
on-info | #ffffff | #001944 | --tanrei-sys-color-on-info |
on-info-container | #181f30 | #e9edff | --tanrei-sys-color-on-info-container |
on-success | #ffffff | #002108 | --tanrei-sys-color-on-success |
on-success-container | #132315 | #dff3dc | --tanrei-sys-color-on-success-container |
on-warning | #ffffff | #2c1600 | --tanrei-sys-color-on-warning |
on-warning-container | #2d1c08 | #ffead9 | --tanrei-sys-color-on-warning-container |
success | #006828 | #78dc86 | --tanrei-sys-color-success |
success-container | #e2f6df | #172718 | --tanrei-sys-color-success-container |
warning | #834d00 | #ffb86d | --tanrei-sys-color-warning |
warning-container | #ffeee0 | #32200c | --tanrei-sys-color-warning-container |
सरफ़ेस
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
on-surface | #131313 | #f3f3f3 | --tanrei-sys-color-on-surface |
on-surface-variant | #3b3b3b | #b9b9b9 | --tanrei-sys-color-on-surface-variant |
surface | #ffffff | #0b0b0b | --tanrei-sys-color-surface |
surface-bright | #ffffff | #1f1f1f | --tanrei-sys-color-surface-bright |
surface-container | #f6f6f6 | #151515 | --tanrei-sys-color-surface-container |
surface-container-high | #f3f3f3 | #1b1b1b | --tanrei-sys-color-surface-container-high |
surface-container-highest | #eeeeee | #222222 | --tanrei-sys-color-surface-container-highest |
surface-container-low | #f9f9f9 | #111111 | --tanrei-sys-color-surface-container-low |
surface-container-lowest | #ffffff | #040404 | --tanrei-sys-color-surface-container-lowest |
surface-dim | #f1f1f1 | #000000 | --tanrei-sys-color-surface-dim |
surface-variant | #eeeeee | #222222 | --tanrei-sys-color-surface-variant |
आउटलाइन
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
outline | #6d6d6d | #9b9b9b | --tanrei-sys-color-outline |
outline-variant | #000000 · 44% | #ffffff · 36% | --tanrei-sys-color-outline-variant |
इनवर्स
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
inverse-link | #e2e2e2 | #1b1b1b | --tanrei-sys-color-inverse-link |
inverse-on-surface | #f1f1f1 | #1f1f1f | --tanrei-sys-color-inverse-on-surface |
inverse-primary | #e2e2e2 | #1b1b1b | --tanrei-sys-color-inverse-primary |
inverse-surface | #1f1f1f | #ebebeb | --tanrei-sys-color-inverse-surface |
यूटिलिटी
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
elevation-ring | #000000 · 14% | #ffffff · 22% | --tanrei-sys-color-elevation-ring |
elevation-shadow-1 | #000000 · 4% | #000000 · 10% | --tanrei-sys-color-elevation-shadow-1 |
elevation-shadow-2 | #000000 · 6% | #000000 · 16% | --tanrei-sys-color-elevation-shadow-2 |
elevation-shadow-3 | #000000 · 12% | #000000 · 30% | --tanrei-sys-color-elevation-shadow-3 |
focus-ring | #005e91 | #94ccff | --tanrei-sys-color-focus-ring |
focus-ring-inner | #000000 · 0% | #000000 · 0% | --tanrei-sys-color-focus-ring-inner |
link | #131313 | #f3f3f3 | --tanrei-sys-color-link |
scrim | #000000 · 40% | #000000 · 40% | --tanrei-sys-color-scrim |
shadow | #000000 | #000000 | --tanrei-sys-color-shadow |
ऐक्सेंट — Tanrei सिस्टम द्वारा घोषित पैलेट, कोर शब्दावली नहीं
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
accent | #005e91 | #94ccff | --tanrei-sys-color-accent |
accent-container | #d2e8ff | #003859 | --tanrei-sys-color-accent-container |
on-accent | #ffffff | #001d32 | --tanrei-sys-color-on-accent |
on-accent-container | #002842 | #d8eaff | --tanrei-sys-color-on-accent-container |
इससे जनरेट किया गया: design/tokens/tanrei.light-medium.tokens.json, design/tokens/tanrei.dark-medium.tokens.json
प्राइमरी
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
on-primary | #ffffff | #111111 | --tanrei-sys-color-on-primary |
on-primary-container | #000000 | #ffffff | --tanrei-sys-color-on-primary-container |
primary | #000000 | #ffffff | --tanrei-sys-color-primary |
primary-container | #e2e2e2 | #2e2e2e | --tanrei-sys-color-primary-container |
सेकंडरी
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
on-secondary | #ffffff | #1b1b1b | --tanrei-sys-color-on-secondary |
on-secondary-container | #000000 | #ffffff | --tanrei-sys-color-on-secondary-container |
secondary | #303030 | #e2e2e2 | --tanrei-sys-color-secondary |
secondary-container | #e2e2e2 | #2c2c2c | --tanrei-sys-color-secondary-container |
स्टेटस: error, success, warning, info
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
error | #930015 | #ffcfcb | --tanrei-sys-color-error |
error-container | #ffedeb | #361d1b | --tanrei-sys-color-error-container |
info | #00429b | #cdd9ff | --tanrei-sys-color-info |
info-container | #edf0ff | #1c2334 | --tanrei-sys-color-info-container |
on-error | #ffffff | #410004 | --tanrei-sys-color-on-error |
on-error-container | #281110 | #fff0ef | --tanrei-sys-color-on-error-container |
on-info | #ffffff | #001944 | --tanrei-sys-color-on-info |
on-info-container | #101728 | #f1f3ff | --tanrei-sys-color-on-info-container |
on-success | #ffffff | #002108 | --tanrei-sys-color-on-success |
on-success-container | #0b1b0d | #e5f9e1 | --tanrei-sys-color-on-success-container |
on-warning | #ffffff | #2c1600 | --tanrei-sys-color-on-warning |
on-warning-container | #241403 | #fff1e7 | --tanrei-sys-color-on-warning-container |
success | #00531e | #8bf097 | --tanrei-sys-color-success |
success-container | #e2f6df | #172718 | --tanrei-sys-color-success-container |
warning | #683c00 | #ffd2a6 | --tanrei-sys-color-warning |
warning-container | #ffeee0 | #32200c | --tanrei-sys-color-warning-container |
सरफ़ेस
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
on-surface | #000000 | #ffffff | --tanrei-sys-color-on-surface |
on-surface-variant | #262626 | #d4d4d4 | --tanrei-sys-color-on-surface-variant |
surface | #ffffff | #0b0b0b | --tanrei-sys-color-surface |
surface-bright | #ffffff | #1f1f1f | --tanrei-sys-color-surface-bright |
surface-container | #f6f6f6 | #151515 | --tanrei-sys-color-surface-container |
surface-container-high | #f3f3f3 | #1b1b1b | --tanrei-sys-color-surface-container-high |
surface-container-highest | #eeeeee | #222222 | --tanrei-sys-color-surface-container-highest |
surface-container-low | #f9f9f9 | #111111 | --tanrei-sys-color-surface-container-low |
surface-container-lowest | #ffffff | #040404 | --tanrei-sys-color-surface-container-lowest |
surface-dim | #f1f1f1 | #000000 | --tanrei-sys-color-surface-dim |
surface-variant | #eeeeee | #222222 | --tanrei-sys-color-surface-variant |
आउटलाइन
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
outline | #4b4b4b | #c6c6c6 | --tanrei-sys-color-outline |
outline-variant | #000000 · 56% | #ffffff · 48% | --tanrei-sys-color-outline-variant |
इनवर्स
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
inverse-link | #e2e2e2 | #1b1b1b | --tanrei-sys-color-inverse-link |
inverse-on-surface | #f1f1f1 | #1f1f1f | --tanrei-sys-color-inverse-on-surface |
inverse-primary | #e2e2e2 | #1b1b1b | --tanrei-sys-color-inverse-primary |
inverse-surface | #1f1f1f | #ebebeb | --tanrei-sys-color-inverse-surface |
यूटिलिटी
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
elevation-ring | #000000 · 30% | #ffffff · 40% | --tanrei-sys-color-elevation-ring |
elevation-shadow-1 | #000000 · 4% | #000000 · 10% | --tanrei-sys-color-elevation-shadow-1 |
elevation-shadow-2 | #000000 · 6% | #000000 · 16% | --tanrei-sys-color-elevation-shadow-2 |
elevation-shadow-3 | #000000 · 12% | #000000 · 30% | --tanrei-sys-color-elevation-shadow-3 |
focus-ring | #004a74 | #bddeff | --tanrei-sys-color-focus-ring |
focus-ring-inner | #000000 · 0% | #000000 · 0% | --tanrei-sys-color-focus-ring-inner |
link | #000000 | #ffffff | --tanrei-sys-color-link |
scrim | #000000 · 40% | #000000 · 40% | --tanrei-sys-color-scrim |
shadow | #000000 | #000000 | --tanrei-sys-color-shadow |
ऐक्सेंट — Tanrei सिस्टम द्वारा घोषित पैलेट, कोर शब्दावली नहीं
| रोल | लाइट | डार्क | CSS कस्टम प्रॉपर्टी |
|---|
accent | #004a74 | #bddeff | --tanrei-sys-color-accent |
accent-container | #c8e3ff | #003859 | --tanrei-sys-color-accent-container |
on-accent | #ffffff | #001d32 | --tanrei-sys-color-on-accent |
on-accent-container | #001d32 | #edf4ff | --tanrei-sys-color-on-accent-container |
इससे जनरेट किया गया: design/tokens/tanrei.light-high.tokens.json, design/tokens/tanrei.dark-high.tokens.json