CSS: ai-gradient ​

.--background-ai-horizontal — AI-accent verloop-hulpmiddelen bedoeld voor aangepaste oppervlakken, niet voor het gedeelde InstUI-contract.

Source: index.ts

Gebruik ​

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

Modifiers ​

ModifierBeschrijving
.--background-aiVul de achtergrond van het element met het gedeelde AI-verloop.
.--background-ai-horizontalinstructure horizontaal logo (donker).
.--border-color-aiEen transparante rand omlijst door het gedeelde AI-verloop.
.--border-color-ai-horizontalinstructure horizontaal logo (donker).

Toegankelijkheid ​

Regels (axe-core)Huisstijlwijziging (licht)Huisstijlwijziging (donker)CanvasCanvas hoog contrast
color-contrastWCAG 2.2 1.4.3Beoordeling nodigBeoordeling nodigBeoordeling nodigBeoordeling nodig

Elementen moeten voldoen aan de minimale kleurcontrastverhoudingen

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
VoorwaardenHuisstijlwijziging (licht)Huisstijlwijziging (donker)CanvasCanvas hoog contrast
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6Beoordeling nodigBeoordeling nodigBeoordeling nodigBeoordeling nodig

De pagina verandert bij prefers-contrast: more, maar er kon geen zichtbare tekst worden gemeten.

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Schermlezer (gesimuleerd)Huisstijlwijziging (licht)Huisstijlwijziging (donker)CanvasCanvas hoog contrast
AnnouncementsPassPassPassPass

Deze geautomatiseerde resultaten tonen niet aan dat de pagina aan WCAG voldoet; handmatige beoordeling blijft nodig.

Gebruikte tokens ​

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