CSS: ai-gradient ​

.--background-ai-horizontal — AI-accent gradiens segédeszközök egyedi felületekhez, nem a megosztott InstUI szerződéshez.

Source: index.ts

Használat ​

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

Módosítók ​

MódosítóLeírás
.--background-aiFesd az elem hátterét a megosztott AI-gradienssel.
.--background-ai-horizontalinstructure vízszintes logó (sötét).
.--border-color-aiÁtlátszó keret, amelyet a megosztott AI-gradiens keretez.
.--border-color-ai-horizontalinstructure vízszintes logó (sötét).

Hozzáférhetőség ​

Szabályok (axe-core)Újramárkázás (világos)Újramárkázás (sötét)CanvasCanvas nagy kontraszt
color-contrastWCAG 2.2 1.4.3Felülvizsgálat szükségesFelülvizsgálat szükségesFelülvizsgálat szükségesFelülvizsgálat szükséges

Az elemeknek meg kell felelniük a minimális színkontraszt-arányra vonatkozó küszöbértékeknek

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
FeltételekÚjramárkázás (világos)Újramárkázás (sötét)CanvasCanvas nagy kontraszt
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6Felülvizsgálat szükségesFelülvizsgálat szükségesFelülvizsgálat szükségesFelülvizsgálat szükséges

A oldal megváltozik a prefers-contrast: more beállítás hatására, de egyetlen látható szöveg sem volt mérhető.

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Képernyőolvasó (szimulált)Újramárkázás (világos)Újramárkázás (sötét)CanvasCanvas nagy kontraszt
AnnouncementsPassPassPassPass

Ezek az automatizált eredmények nem bizonyítják, hogy az oldal megfelel a WCAG követelményeinek; továbbra is szükség van kézi felülvizsgálatra.

Fogyasztott tokenek ​

TokenTípusÉrték
--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)