CSS: ai-gradient ​

.--background-ai-horizontal — Ajuts de degradat amb accent d'IA pensats per a superfícies personalitzades, no per al contracte compartit d'InstUI.

Source: index.ts

Ús ​

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

Modificadors ​

ModificadorDescripció
.--background-aiPinta el fons de l'element amb el degradat d'IA compartit.
.--background-ai-horizontalinstructure logotip horitzontal (fosc).
.--border-color-aiUna vora transparent enmarcada pel degradat d'IA compartit.
.--border-color-ai-horizontalinstructure logotip horitzontal (fosc).

Accessibilitat ​

Regles (axe-core)Rebrand (clar)Rebrand (fosc)CanvasCanvas d'alt contrast
color-contrastWCAG 2.2 1.4.3Cal revisarCal revisarCal revisarCal revisar

Els elements han de complir els llindars mínims de relació de contrast de color

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
CondicionsRebrand (clar)Rebrand (fosc)CanvasCanvas d'alt contrast
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6Cal revisarCal revisarCal revisarCal revisar

La pàgina canvia amb prefers-contrast: more, però no s'ha pogut mesurar cap text visible.

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Lector de pantalla (simulat)Rebrand (clar)Rebrand (fosc)CanvasCanvas d'alt contrast
AnnouncementsPassPassPassPass

Aquests resultats automatitzats no demostren que la pàgina compleixi les WCAG; encara cal una revisió manual.

Tokens consumits ​

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