CSS: ai-gradient ​

.--background-ai-horizontal — Aides de dégradé d'accent IA destinées aux surfaces personnalisées, pas au contrat InstUI partagé.

Source: index.ts

Utilisation ​

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

Modificateurs ​

ModificateurDescription
.--background-aiPeindre l'arrière-plan de l'élément avec le dégradé IA partagé.
.--background-ai-horizontallogo horizontal instructure (sombre).
.--border-color-aiUne bordure transparente encadrée par le dégradé IA partagé.
.--border-color-ai-horizontallogo horizontal instructure (sombre).

Accessibilité ​

Règles (axe-core)Nouvelle identité (clair)Nouvelle identité (sombre)CanvasCanevas à contraste élevé
color-contrastWCAG 2.2 1.4.3Vérification nécessaireVérification nécessaireVérification nécessaireVérification nécessaire

Les éléments doivent respecter les seuils minimaux de contraste des couleurs

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
ConditionsNouvelle identité (clair)Nouvelle identité (sombre)CanvasCanevas à contraste élevé
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6Vérification nécessaireVérification nécessaireVérification nécessaireVérification nécessaire

La page change avec prefers-contrast: more, mais aucun texte visible n’a pu être mesuré.

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Lecteur d’écran (simulé)Nouvelle identité (clair)Nouvelle identité (sombre)CanvasCanevas à contraste élevé
AnnouncementsPassPassPassPass

Ces résultats automatisés ne permettent pas d’établir que la page est conforme aux WCAG ; une vérification manuelle reste nécessaire.

Jetons consommés ​

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