Skip to content

CSS: ai-gradient ​

.--background-ai-horizontal — Pomožna orodja za AI-aksentni gradient, namenjena prilagojenim površinam, ne pa skupnemu pogodbenemu vmesniku InstUI.

Source: index.ts

Uporaba ​

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

Spremenljivke (modifikatorji) ​

ModifikatorOpis
.--background-aiPobarvaj ozadje elementa z deljenim AI-gradientom.
.--background-ai-horizontalinstructure vodoravni logotip (temen).
.--border-color-aiProsojna obroba, obrobljena z deljenim AI-gradientom.
.--border-color-ai-horizontalinstructure vodoravni logotip (temen).

Dostopnost ​

Pravila (axe-core)Preoblikovanje (svetla)Preoblikovanje (temna)CanvasPlatno z visokim kontrastom
color-contrastWCAG 2.2 1.4.3Potreben je pregledPotreben je pregledPotreben je pregledPotreben je pregled

Elementi morajo izpolnjevati minimalne pragove razmerja barvnega kontrasta

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
PogojiPreoblikovanje (svetla)Preoblikovanje (temna)CanvasPlatno z visokim kontrastom
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6Potreben je pregledPotreben je pregledPotreben je pregledPotreben je pregled

Stran se spremeni pri nastavitvi prefers-contrast: more, vendar ni bilo mogoče izmeriti nobenega vidnega besedila.

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Bralnik zaslona (simuliran)Preoblikovanje (svetla)Preoblikovanje (temna)CanvasPlatno z visokim kontrastom
AnnouncementsPassPassPassPass

Ti avtomatizirani rezultati ne dokazujejo, da stran izpolnjuje WCAG; še vedno je potreben ročni pregled.

Porabljeni žetoni ​

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