CSS: ai-gradient ​

.--background-ai-horizontal — AI-aksentin gradienttia hyödyntävät apuvälineet tarkoitettu mukautetuille pinnoille, ei jaetulle InstUI-sopimukselle.

Source: index.ts

Käyttö ​

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

Muokkaajat ​

MuokkaajaKuvaus
.--background-aiTäytä elementin tausta jaetulla AI-gradientilla.
.--background-ai-horizontalinstructure vaakasuuntainen logo (tumma).
.--border-color-aiLäpinäkyvä reunus, jota kehystää jaettu AI-gradientti.
.--border-color-ai-horizontalinstructure vaakasuuntainen logo (tumma).

Saavutettavuus ​

Säännöt (axe-core)Uudelleenbrändäys (vaalea)Uudelleenbrändäys (tumma)CanvasCanvasin suuri kontrasti
color-contrastWCAG 2.2 1.4.3TarkistettavaTarkistettavaTarkistettavaTarkistettava

Elementtien on täytettävä vähimmäisvaatimukset värikontrastisuhteelle

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
EhdotUudelleenbrändäys (vaalea)Uudelleenbrändäys (tumma)CanvasCanvasin suuri kontrasti
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6TarkistettavaTarkistettavaTarkistettavaTarkistettava

Sivu muuttuu prefers-contrast: more -asetuksen vaikutuksesta, mutta näkyvää tekstiä ei voitu mitata.

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Näytönlukuohjelma (simuloitu)Uudelleenbrändäys (vaalea)Uudelleenbrändäys (tumma)CanvasCanvasin suuri kontrasti
AnnouncementsPassPassPassPass

Nämä automaattiset tulokset eivät osoita, että sivu täyttää WCAG-vaatimukset; manuaalinen tarkistus on edelleen tarpeen.

Käytetyt tokenit ​

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