ब्रांड पैलेट
Apothem के मुख्य ब्रांड रंग और पंद्रह हार्नेस ब्रांड रंग, जो हार्नेस रंग पृष्ठ पर परिभाषित हैं। मुख्य रंगों के लिए सत्य का एकमात्र स्रोत assets/design-tokens.css पर कैनोनिकल डिज़ाइन टोकन हैं; साइट उन मानों को प्रतिबिंबित करती है।
मुख्य पैलेट
कैनोनिकल पैलेट — slate तटस्थ रैंप, emerald एक्सेंट रैंप, और सिमेंटिक रंग —
assets/design-tokens.css
(और उसके assets/design-tokens.json मिरर) पर मौजूद डिज़ाइन टोकन के स्वामित्व में है।
site/app/global.css
पर मौजूद साइट थीम सिमेंटिक टोकन मानों को उन CSS वेरिएबल में OKLCH के रूप में पुनः व्यक्त करती है जिन्हें
Fumadocs थीम उपयोग करती है: पृष्ठ पृष्ठभूमि, टेक्स्ट, प्राथमिक, बॉर्डर और फ़ोकस-रिंग वेरिएबल ठीक उन्हीं
टोकन चरणों पर हल होते हैं (lib/theme-tokens.test.mjs जाँच पृष्ठभूमि, फ़ोरग्राउंड, प्राथमिक और रिंग
वेरिएबल को उन्हीं पर बाँधे रखती है)। उसी फ़ाइल में घोषित apothem-*, polygon-* और field-* रैंप
टोकन रैंप के व्युत्पन्न सन्निकटन हैं, प्रतियाँ नहीं, और विनिर्देश का भाग नहीं हैं। नीचे का प्रत्येक मान
डिज़ाइन टोकन में slate या emerald रैंप का एक चरण है; slate-600 जैसा चरण-नाम उस रैंप के मान को
दर्शाता है।
| भूमिका | टोकन (CSS) | लाइट मोड | डार्क मोड | उपयोग |
|---|---|---|---|---|
| प्राथमिक | --apothem-text | slate-900 #0f172a | slate-50 #f8fafc | शीर्षक, नेविगेशन टेक्स्ट, प्राथमिक पठन सतहें। |
| एक्सेंट | --apothem-accent-text | emerald-700 #047857 | emerald-400 #34d399 | सक्रिय लिंक, फ़ोकस रिंग, चयनित नेविगेशन। |
| बॉडी टेक्स्ट | --apothem-text-muted | slate-600 #475066 | slate-300 #c2ccda | डिफ़ॉल्ट गद्य टेक्स्ट। |
| बॉडी पृष्ठभूमि | --apothem-surface | slate-50 #f8fafc | slate-900 #0f172a | डिफ़ॉल्ट पृष्ठभूमि। |
| नेविगेशन पृष्ठभूमि | --apothem-surface-sunken | slate-100 #eef2f7 | slate-950 #080c15 | हेडर और नेविगेशन पट्टियाँ। |
हार्नेस पैलेट
हार्नेस रंग हार्नेस रंग पर रहते हैं। Apothem मार्क कोई हार्नेस रंग नहीं रखता; उसका षट्भुज, केंद्र नोड और टर्मिनस नोड assets/DESIGN-SYSTEM.md के मार्क अनुभाग में वर्णित हैं। हार्नेस रंग उसी पृष्ठ पर परिभाषित हैं, डिज़ाइन टोकन में या site/app/global.css में नहीं, जो केवल मुख्य पैलेट रखते हैं।
दस्तावेज़ीकरण में उपयोग
पैलेट वैश्विक स्टाइलशीट site/app/global.css के माध्यम से जुड़ी है, जिसे रूट लेआउट
आयात करता है। लाइट और डार्क मोड के वेरिएंट थीम की .dark क्लास की स्थिति के साथ
बदलते हैं।
अपडेट
पैलेट केवल तब अपडेट होती है जब कोई मुख्य रंग (slate / emerald) बदलता है या कोई
हार्नेस अपस्ट्रीम में ब्रांड-रंग परिवर्तन की पुष्टि करता है। प्रति-हार्नेस परिवर्तन
हार्नेस रंग और assets/src/ के अंतर्गत हर प्रभावित SVG
मास्टर में परमाणविक रूप से प्रसारित होते हैं।