CSS: ai-gradient ​

.--background-ai-horizontal — Özel yüzeyler için tasarlanmış AI-vurgulu gradyan yardımcıları; paylaşılan InstUI sözleşmesine ait değildir.

Source: index.ts

Kullanım ​

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

Değiştiriciler ​

DeğiştiriciAçıklama
.--background-aiÖğe arka planını paylaşılan AI gradyanı ile boyayın.
.--background-ai-horizontalinstructure yatay logo (koyu).
.--border-color-aiPaylaşılan AI gradyanı ile çerçevelenmiş şeffaf bir kenarlık.
.--border-color-ai-horizontalinstructure yatay logo (koyu).

Erişilebilirlik ​

Kurallar (axe-core)Yeniden markalama (açık)Yeniden markalama (koyu)CanvasCanvas Yüksek Kontrast
color-contrastWCAG 2.2 1.4.3İnceleme gerekliİnceleme gerekliİnceleme gerekliİnceleme gerekli

Öğeler, minimum renk kontrastı oranı eşiklerini karşılamalıdır

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
KoşullarYeniden markalama (açık)Yeniden markalama (koyu)CanvasCanvas Yüksek Kontrast
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6İnceleme gerekliİnceleme gerekliİnceleme gerekliİnceleme gerekli

prefers-contrast: more altında sayfa değişiyor, ancak görünür hiçbir metin ölçülemedi.

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Ekran okuyucu (simüle edilmiş)Yeniden markalama (açık)Yeniden markalama (koyu)CanvasCanvas Yüksek Kontrast
AnnouncementsPassPassPassPass

Bu otomatik sonuçlar, sayfanın WCAG gerekliliklerini karşıladığını kanıtlamaz; yine de manuel inceleme gerekir.

Tüketilen tokenler ​

TokenTürDeğer
--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)