रंग
रंग
कोई घटक रंग का नाम नहीं रखता। रंग पैलेट में रहता है, जो हल्के चेहरे और गहरे चेहरे के लिए दिए गए बारह टोन के पैमानों के रूप में है; रंग योजना यह तय करती है कि पृष्ठ कौन सा चेहरा पढ़ता है; एक घटक एक भूमिका पढ़ता है — एक सतह, एक सीमा, एक पाठ — जो एक पैमाने पर एक स्थान है। त्वचा कभी भी रंग नहीं बताती। शीर्षक से योजना बदलें और नीचे हर स्वैच बिना किसी को फिर से परिभाषित किए हुए चले जाते हैं।
स्केल्स
एक पैलेट एक तटस्थ, एक एक्सेंट — ब्रांड — है और चार स्थितियाँ, प्रत्येक बारह टोन के स्केल का एक सेट, जिस तरह से Radix Themes और Material 3 एक रंग को व्यवस्थित करते हैं। एक स्केल पर एक स्थान हर स्केल पर और दोनों चेहरों पर समान होता है: नीचे दिए गए नंबर किसके लिए हैं। एक एप्लिकेशन अपने एक्सेंट को देकर अपना पैलेट लाता है; हर स्केल इसका पालन करता है।
--neutral-*
1
2
3
4
5
6
7
8
9
10
11
12
--accent-*
1
2
3
4
5
6
7
8
9
10
11
12
--info-*
1
2
3
4
5
6
7
8
9
10
11
12
--success-*
1
2
3
4
5
6
7
8
9
10
11
12
--warning-*
1
2
3
4
5
6
7
8
9
10
11
12
--error-*
1
2
3
4
5
6
7
8
9
10
11
12
- 1 एक कार्य क्षेत्र का आधार
- 2 पृष्ठ का आधार, क्षेत्रों के चारों ओर और बीच में
- 3 एक क्षेत्र का आधार; हल्का आधार जिस पर एक स्थिति बैठती है
- 4 एक उठाया नियंत्रण; एक होवर किया हुआ आधार
- 5 एक कार्ड, एक ब्लॉक — और इसकी अलग सीमा
- 6 एक सीमा
- 7 दो क्षेत्रों के बीच एक सीमा
- 8 एक मजबूत सीमा, एक ध्यान केंद्रित करने वाली अंगूठी
- 9 पूरा रंग, जो इसे चिह्नित करता है उसे भरता है
- 10 वही, होवर किया हुआ
- 11 स्याही के रूप में रंग, आधारों पर पढ़ने योग्य
- 12 मजबूत स्याही — तटस्थ के लिए, स्वयं पाठ
सतहें
भूमियाँ, क्षेत्र से बाहर — प्रत्येक एक तटस्थ स्केल पर एक स्थान। डैशबोर्ड का हल्का चेहरा उन्हें हल्केपन के अनुसार सफेद तक क्रमबद्ध करता है, गहरा चेहरा यह तय करता है कि प्रत्येक कितनी दूर जमीन से उठी हुई है।
--surface-zoneएक पृष्ठ के क्षेत्र पर खड़ा आधार--surface-pageपृष्ठ स्वयं, और जो क्षेत्रों के बीच दिखाई देता है--surface-shellमेनू, हेडर, फूटर--surface-1इनपुट और क्षेत्र--surface-2बटन, टूलबार--surface-3ब्लॉक, कार्ड, मोडल--surface-invertएक नियंत्रण जो पाठ के रंग को लेकर बाहर खड़ा हैपाठ
ध्यान के तीन स्तर — तटस्थ 12, 11 और 9: क्या पढ़ा जा रहा है, क्या इसे योग्य बनाता है, और क्या केवल तब पाया जाता है जब इसे खोजा जाता है।
--text-color-default — क्या पढ़ा जा रहा है
--text-color-muted — लेबल, मेटा, उपशीर्षक
--text-color-subtle — separator और खाली स्थितियाँ
सीमाएं
चार वजन, जो यह बताता है कि वे क्या अलग करते हैं — तटस्थ 5 से 8: एक क्षेत्र के भीतर दो चीजें, जो इसके पीछे है उससे एक क्षेत्र, एक पृष्ठ के दो क्षेत्र, और जिस पर ध्यान केंद्रित किया गया है उसका अंगूठी।
--border-color-discreet
--border-color-default
--border-color-region
--border-color-strong
श्रेणियाँ
तेरह रंग जो केवल "इसके बगल वाला नहीं" का मतलब रखते हैं: एक चार्ट की श्रृंखला, एक वितरण के खंड, एक कार्य प्रवाह के चरण। नामित, संख्या नहीं — एक ऐप `cat-mint` चुनता है क्योंकि यह पुदीने जैसा दिखता है — और प्रत्येक अन्य की तरह एक स्केल है, इसलिए एक श्रेणी उसी तरीके से पहनी जाती है जैसे एक स्थिति: इसका आधार 3 पर, उसका स्याही 11 पर, भरा हुआ 9 पर।
--cat-ruby-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-grapefruit-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-bittersweet-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-sunflower-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-straw-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-grass-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-mint-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-teal-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-aqua-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-blue-jeans-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-plum-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-lavender-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-pink-rose-*
1
2
3
4
5
6
7
8
9
10
11
12