CSS: ai-gradient ​

.--background-ai-horizontal — Pomocniki gradientu akcentu AI przeznaczone dla niestandardowych powierzchni, nie dla wspólnego kontraktu InstUI.

Source: index.ts

Użycie ​

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

Modyfikatory ​

ModyfikatorOpis
.--background-aiPomaluj tło elementu wspólnym gradientem AI.
.--background-ai-horizontalinstructure poziome logo (ciemne).
.--border-color-aiPrzezroczysta obramowanie otoczone wspólnym gradientem AI.
.--border-color-ai-horizontalinstructure poziome logo (ciemne).

Dostępność ​

Zasady (axe-core)Nowa identyfikacja (jasny)Nowa identyfikacja (ciemny)CanvasWysoki kontrast płótna
color-contrastWCAG 2.2 1.4.3Wymaga weryfikacjiWymaga weryfikacjiWymaga weryfikacjiWymaga weryfikacji

Elementy muszą spełniać minimalne progi współczynnika kontrastu kolorów

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
WarunkiNowa identyfikacja (jasny)Nowa identyfikacja (ciemny)CanvasWysoki kontrast płótna
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6Wymaga weryfikacjiWymaga weryfikacjiWymaga weryfikacjiWymaga weryfikacji

Strona zmienia się przy ustawieniu prefers-contrast: more, ale nie udało się zmierzyć żadnego widocznego tekstu.

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Czytnik ekranu (symulowany)Nowa identyfikacja (jasny)Nowa identyfikacja (ciemny)CanvasWysoki kontrast płótna
AnnouncementsPassPassPassPass

Te zautomatyzowane wyniki nie potwierdzają zgodności strony z WCAG; nadal konieczna jest ręczna weryfikacja.

Zużyte tokeny ​

TokenTypWartość
--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)