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)