CSS: ai-gradient ​

.--background-ai-horizontal — AI-áherslu litaðstoð ætlað fyrir sérsniðin yfirborð, ekki sameiginlega InstUI-samninginn.

Source: index.ts

Notkun ​

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

Breytingar ​

BreytiLýsing
.--background-aiMálaðu bakgrunn frumefnisins með sameiginlegu AI-litablöndunni.
.--background-ai-horizontalinstructure lárétt lógó (dökk).
.--border-color-aiGegnsætt ramma sem umlukinn er af sameiginlegu AI-litablöndunni.
.--border-color-ai-horizontalinstructure lárétt lógó (dökk).

Aðgengi ​

Reglur (axe-core)Endurmerking (ljóst)Endurmerking (dökkt)CanvasCanvas með miklum birtuskilum
color-contrastWCAG 2.2 1.4.3Þarfnast yfirferðarÞarfnast yfirferðarÞarfnast yfirferðarÞarfnast yfirferðar

Þættir verða að uppfylla lágmarksviðmið fyrir litaskil

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
SkilyrðiEndurmerking (ljóst)Endurmerking (dökkt)CanvasCanvas með miklum birtuskilum
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6Þarfnast yfirferðarÞarfnast yfirferðarÞarfnast yfirferðarÞarfnast yfirferðar

Síðan breytist þegar prefers-contrast: more er virkt, en enginn sýnilegur texti var mælanlegur.

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Skjálesari (hermdur)Endurmerking (ljóst)Endurmerking (dökkt)CanvasCanvas með miklum birtuskilum
AnnouncementsPassPassPassPass

Þessar sjálfvirku niðurstöður sýna ekki fram á að síðan uppfylli WCAG; enn þarf handvirka yfirferð.

Notuð tákn ​

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