CSS: ai-gradient ​

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

Source: index.ts

Penggunaan ​

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

Pemodifikasi ​

PemodifikasiPenerangan
.--background-aiWarnakan latar elemen dengan gradien AI yang dikongsi.
.--background-ai-horizontallogo instructure mendatar (gelap).
.--border-color-aiSempadan lutsinar berbingkai dengan gradien AI yang dikongsi.
.--border-color-ai-horizontallogo instructure mendatar (gelap).

Aksesibiliti ​

Peraturan (axe-core)Penjenamaan semula (cerah)Penjenamaan semula (gelap)CanvasKanvas Kontras Tinggi
color-contrastWCAG 2.2 1.4.3Semakan diperlukanSemakan diperlukanSemakan diperlukanSemakan diperlukan

Elemen mesti memenuhi ambang minimum nisbah kontras warna

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
SyaratPenjenamaan semula (cerah)Penjenamaan semula (gelap)CanvasKanvas Kontras Tinggi
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6Semakan diperlukanSemakan diperlukanSemakan diperlukanSemakan diperlukan

Halaman berubah apabila prefers-contrast: more ditetapkan, tetapi tiada teks yang kelihatan dapat diukur.

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Pembaca skrin (simulasi)Penjenamaan semula (cerah)Penjenamaan semula (gelap)CanvasKanvas Kontras Tinggi
AnnouncementsPassPassPassPass

Keputusan automatik ini tidak membuktikan bahawa halaman memenuhi WCAG; semakan manual masih diperlukan.

Token digunakan ​

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