CSS: ai-gradient ​

.--background-ai-horizontal — Ayudantes de degradado con acento de IA destinados a superficies personalizadas, no al contrato compartido de InstUI.

Source: index.ts

Uso ​

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

Modificadores ​

ModificadorDescripción
.--background-aiPinta el fondo del elemento con el degradado de IA compartido.
.--background-ai-horizontallogotipo horizontal de instructure (oscuro).
.--border-color-aiUn borde transparente enmarcado por el degradado de IA compartido.
.--border-color-ai-horizontallogotipo horizontal de instructure (oscuro).

Accesibilidad ​

Reglas (axe-core)Cambio de marca (claro)Cambio de marca (oscuro)CanvasAlto contraste del lienzo
color-contrastWCAG 2.2 1.4.3Requiere revisiónRequiere revisiónRequiere revisiónRequiere revisión

Los elementos deben cumplir los umbrales mínimos de relación de contraste de color

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
CondicionesCambio de marca (claro)Cambio de marca (oscuro)CanvasAlto contraste del lienzo
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6Requiere revisiónRequiere revisiónRequiere revisiónRequiere revisión

La página cambia con prefers-contrast: more, pero no se pudo medir ningún texto visible.

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Lector de pantalla (simulado)Cambio de marca (claro)Cambio de marca (oscuro)CanvasAlto contraste del lienzo
AnnouncementsPassPassPassPass

Estos resultados automatizados no demuestran que la página cumpla con WCAG; aún se requiere una revisión manual.

Tokens consumidos ​

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