CSS: ai-gradient ​

.--background-ai-horizontal — مساعدات تدرج بلون مميز للذكاء الاصطناعي مخصصة للأسطح المخصصة، وليست جزءًا من عقد InstUI المشترك.

Source: index.ts

Usage ​

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

Modifiers ​

ModifierDescription
.--background-aiطلاء خلفية العنصر بتدرج AI المشترك.
.--background-ai-horizontalشعار instructure أفقي (داكن).
.--border-color-aiحد شفاف محاط بتدرج AI المشترك.
.--border-color-ai-horizontalشعار instructure أفقي (داكن).

Accessibility ​

القواعد (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؛ فما زالت المراجعة اليدوية مطلوبة.

Tokens consumed ​

TokenTypeValue
--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)