CSS: ai-gradient ​

.--background-ai-horizontal — AI-accenterade gradienthjälpare avsedda för anpassade ytor, inte för det delade InstUI-kontraktet.

Source: index.ts

Användning ​

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

Modifierare ​

ModifierareBeskrivning
.--background-aiMåla elementets bakgrund med den delade AI-gradienten.
.--background-ai-horizontalinstructure horisontell logotyp (mörk).
.--border-color-aiEn transparent kant inramad av den delade AI-gradienten.
.--border-color-ai-horizontalinstructure horisontell logotyp (mörk).

Tillgänglighet ​

Regler (axe-core)Omprofilering (ljus)Omprofilering (mörk)CanvasCanvas med hög kontrast
color-contrastWCAG 2.2 1.4.3Granskning behövsGranskning behövsGranskning behövsGranskning behövs

Element måste uppfylla minimikraven för färgkontrast

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
VillkorOmprofilering (ljus)Omprofilering (mörk)CanvasCanvas med hög kontrast
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6Granskning behövsGranskning behövsGranskning behövsGranskning behövs

Sidan ändras när prefers-contrast: more är aktivt, men ingen synlig text kunde mätas.

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Skärmläsare (simulerad)Omprofilering (ljus)Omprofilering (mörk)CanvasCanvas med hög kontrast
AnnouncementsPassPassPassPass

Dessa automatiserade resultat fastställer inte att sidan uppfyller WCAG; manuell granskning behövs fortfarande.

Förbrukade tokens ​

TokenTypVärde
--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)