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-horizontalinstructure 横向徽标（深色）。
.--border-color-ai由共享 AI 渐变框出的透明边框。
.--border-color-ai-horizontalinstructure 横向徽标（深色）。

无障碍 ​

规则 (axe-core)品牌重塑（浅色)品牌重塑（深色)Canvas画布高对比度
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
条件品牌重塑（浅色)品牌重塑（深色)Canvas画布高对比度
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
屏幕阅读器（模拟)品牌重塑（浅色)品牌重塑（深色)Canvas画布高对比度
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)