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-horizontalلوگوی افقی instructure (تیره).
.--border-color-aiیک حاشیهٔ شفاف که توسط گرادیان AI مشترک قاب‌گیری شده است.
.--border-color-ai-horizontalلوگوی افقی instructure (تیره).

دسترس‌پذیری ​

قوانین (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)