CSS: ai-gradient ​

.--background-ai-horizontal — Trợ giúp gradient điểm nhấn AI dành cho các bề mặt tuỳ chỉnh, không thuộc hợp đồng chung InstUI.

Source: index.ts

Sử dụng ​

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

Bộ sửa ​

Bộ sửaMô tả
.--background-aiSơn nền phần tử bằng gradient AI dùng chung.
.--background-ai-horizontalinstructure logo ngang (tối).
.--border-color-aiMột viền trong suốt được viền bởi gradient AI dùng chung.
.--border-color-ai-horizontalinstructure logo ngang (tối).

Khả năng truy cập ​

Quy tắc (axe-core)Đổi thương hiệu (sáng)Đổi thương hiệu (tối)CanvasCanvas tương phản cao
color-contrastWCAG 2.2 1.4.3Cần xem xétCần xem xétCần xem xétCần xem xét

Các phần tử phải đáp ứng ngưỡng tỷ lệ tương phản màu tối thiểu

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
Điều kiệnĐổi thương hiệu (sáng)Đổi thương hiệu (tối)CanvasCanvas tương phản cao
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6Cần xem xétCần xem xétCần xem xétCần xem xét

Trang thay đổi khi bật prefers-contrast: more, nhưng không đo được văn bản hiển thị nào.

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Trình đọc màn hình (mô phỏng)Đổi thương hiệu (sáng)Đổi thương hiệu (tối)CanvasCanvas tương phản cao
AnnouncementsPassPassPassPass

Các kết quả tự động này không chứng minh rằng trang đáp ứng WCAG; vẫn cần đánh giá thủ công.

Token tiêu thụ ​

TokenKiểuGiá trị
--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)