CSS: ai-gradient ​

.--background-ai-horizontal — कस्टम सतहों के लिए बनाए गए AI-एक्सेंट ग्रेडिएंट हेल्पर्स, जो साझा InstUI अनुबंध के लिए नहीं हैं।

Source: index.ts

उपयोग ​

css
@import "@pantoken/plugin-custom-components/custom-components.css";

मॉडिफायर ​

मॉडिफायरविवरण
.--background-aiसाझा AI ग्रेडिएंट के साथ तत्व की पृष्ठभूमि रंगें।
.--background-ai-horizontalinstructure क्षैतिज लोगो (गहरा)।
.--border-color-aiसाझा AI ग्रेडिएंट से घिरा एक पारदर्शी बॉर्डर।
.--border-color-ai-horizontalinstructure क्षैतिज लोगो (गहरा)।

एक्सेसिबिलिटी ​

नियम (axe-core)रीब्रांड (हल्का)रीब्रांड (गहरा)Canvasकैनवस उच्च कंट्रास्ट
color-contrastWCAG 2.2 1.4.3समीक्षा आवश्यकसमीक्षा आवश्यकसमीक्षा आवश्यकसमीक्षा आवश्यक

तत्वों को न्यूनतम रंग कंट्रास्ट अनुपात की सीमाएँ पूरी करनी चाहिए

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
स्थितियाँरीब्रांड (हल्का)रीब्रांड (गहरा)Canvasकैनवस उच्च कंट्रास्ट
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6समीक्षा आवश्यकसमीक्षा आवश्यकसमीक्षा आवश्यकसमीक्षा आवश्यक

prefers-contrast: more के अंतर्गत पेज बदलता है, लेकिन कोई दृश्यमान टेक्स्ट मापा नहीं जा सका।

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
स्क्रीन रीडर (अनुकरण किया गया)रीब्रांड (हल्का)रीब्रांड (गहरा)Canvasकैनवस उच्च कंट्रास्ट
AnnouncementsPassPassPassPass

ये स्वचालित परिणाम यह साबित नहीं करते कि पेज WCAG के अनुरूप है; मैन्युअल समीक्षा अभी भी आवश्यक है।

उपयोग किये गए टोकन ​

Tokenप्रकारमान
--instui-border-width-sm<length>0.0625rem
--instui-color-background-base<color>LightDarklight-dark(#ffffff, #10141A)
--instui-color-stroke-ai-bottom-gradient<color>LightDarklight-dark(#00828E, #04A4B7)
--instui-color-stroke-ai-top-gradient<color>LightDarklight-dark(#9E58BD, #B680CC)