CSS: ai-gradient ​

.--background-ai-horizontal — Pembantu gradien aksen-AI yang dimaksudkan untuk permukaan kustom, bukan kontrak InstUI yang dibagikan.

Source: index.ts

Penggunaan ​

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

Modifikator ​

ModifikatorDeskripsi
.--background-aiCat latar elemen dengan gradien AI bersama.
.--background-ai-horizontallogo horizontal Instructure (gelap).
.--border-color-aiGaris batas transparan yang dibingkai oleh gradien AI bersama.
.--border-color-ai-horizontallogo horizontal Instructure (gelap).

Aksesibilitas ​

Aturan (axe-core)Rebranding (terang)Rebranding (gelap)CanvasKontras Tinggi Kanvas
color-contrastWCAG 2.2 1.4.3Perlu ditinjauPerlu ditinjauPerlu ditinjauPerlu ditinjau

Elemen harus memenuhi ambang batas rasio kontras warna minimum

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
KondisiRebranding (terang)Rebranding (gelap)CanvasKontras Tinggi Kanvas
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6Perlu ditinjauPerlu ditinjauPerlu ditinjauPerlu ditinjau

Halaman berubah saat prefers-contrast: more, tetapi tidak ada teks terlihat yang dapat diukur.

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Pembaca layar (simulasi)Rebranding (terang)Rebranding (gelap)CanvasKontras Tinggi Kanvas
AnnouncementsPassPassPassPass

Hasil otomatis ini tidak membuktikan bahwa halaman memenuhi WCAG; peninjauan manual tetap diperlukan.

Token yang digunakan ​

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