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)รีแบรนด์ (สว่าง)รีแบรนด์ (มืด)CanvasCanvas คอนทราสต์สูง
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
เงื่อนไขรีแบรนด์ (สว่าง)รีแบรนด์ (มืด)CanvasCanvas คอนทราสต์สูง
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
โปรแกรมอ่านหน้าจอ (จำลอง)รีแบรนด์ (สว่าง)รีแบรนด์ (มืด)CanvasCanvas คอนทราสต์สูง
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)