CSS: ai-gradient ​

.--background-ai-horizontal — AI-accent-gradienthjælpere beregnet til brugerdefinerede flader, ikke den delte InstUI-kontrakt.

Source: index.ts

Brug ​

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

Modifikatorer ​

ModifikatorBeskrivelse
.--background-aiMal elementets baggrund med den delte AI-gradient.
.--background-ai-horizontalinstructure vandret logo (mørk).
.--border-color-aiEn gennemsigtig kant indrammet af den delte AI-gradient.
.--border-color-ai-horizontalinstructure vandret logo (mørk).

Tilgængelighed ​

Regler (axe-core)Nyt brand (lys)Nyt brand (mørk)CanvasCanvas høj kontrast
color-contrastWCAG 2.2 1.4.3Gennemgang nødvendigGennemgang nødvendigGennemgang nødvendigGennemgang nødvendig

Elementer skal opfylde minimumskravene til farvekontrastforhold

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
BetingelserNyt brand (lys)Nyt brand (mørk)CanvasCanvas høj kontrast
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6Gennemgang nødvendigGennemgang nødvendigGennemgang nødvendigGennemgang nødvendig

Siden ændres under prefers-contrast: more, men ingen synlig tekst kunne måles.

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Skærmlæser (simuleret)Nyt brand (lys)Nyt brand (mørk)CanvasCanvas høj kontrast
AnnouncementsPassPassPassPass

Disse automatiserede resultater dokumenterer ikke, at siden overholder WCAG; manuel gennemgang er stadig nødvendig.

Forbrugte tokens ​

TokenTypeVærdi
--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)