CSS: ai-gradient ​

.--background-ai-horizontal — Hjelpar for AI-accent-gradientar meint for eigne flater, ikkje den delte InstUI-kontrakten.

Source: index.ts

Bruk ​

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

Modifikatorar ​

ModifikatorSkildring
.--background-aiMålar elementets bakgrunn med den delte AI-gradienten.
.--background-ai-horizontalinstructure horisontal logo (mørk).
.--border-color-aiEin gjennomsiktig kant innramma av den delte AI-gradienten.
.--border-color-ai-horizontalinstructure horisontal logo (mørk).

Tilgjenge ​

Reglar (axe-core)Ny profil (lys)Ny profil (mørk)CanvasCanvas med høg kontrast
color-contrastWCAG 2.2 1.4.3Treng gjennomgangTreng gjennomgangTreng gjennomgangTreng gjennomgang

Element må oppfylla minstekrava til kontrastforhold for fargar

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
VilkårNy profil (lys)Ny profil (mørk)CanvasCanvas med høg kontrast
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6Treng gjennomgangTreng gjennomgangTreng gjennomgangTreng gjennomgang

Sida endrar seg med prefers-contrast: more, men ingen synleg tekst kunne målast.

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Skjermlesar (simulert)Ny profil (lys)Ny profil (mørk)CanvasCanvas med høg kontrast
AnnouncementsPassPassPassPass

Desse automatiserte resultata stadfestar ikkje at sida oppfyller WCAG; manuell gjennomgang er framleis nødvendig.

Token brukt ​

TokenTypeVerdi
--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)