CSS: ai-gradient ​

.--background-ai-horizontal — 用於自訂表面（非共享 InstUI 合約）的 AI 強調漸層輔助工具。

Source: index.ts

使用方法 ​

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

修飾器 ​

修飾器說明
.--background-ai使用共享的 AI 漸層為元素背景上色。
.--background-ai-horizontalinstructure 橫向標誌（深色）。
.--border-color-ai由共享 AI 漸層框住的透明外框。
.--border-color-ai-horizontalinstructure 橫向標誌（深色）。

無障礙 ​

規則 (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)