CSS: ai-gradient ​

.--background-ai-horizontal — Helper di gradienti con accento AI destinati a superfici personalizzate, non al contratto condiviso di InstUI.

Source: index.ts

Uso ​

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

Modificatori ​

ModificatoreDescrizione
.--background-aiColora lo sfondo dell'elemento con il gradiente AI condiviso.
.--background-ai-horizontallogo orizzontale instructure (scuro).
.--border-color-aiUn bordo trasparente incorniciato dal gradiente AI condiviso.
.--border-color-ai-horizontallogo orizzontale instructure (scuro).

Accessibilità ​

Regole (axe-core)Nuovo brand (chiaro)Nuovo brand (scuro)CanvasCanvas ad alto contrasto
color-contrastWCAG 2.2 1.4.3Revisione necessariaRevisione necessariaRevisione necessariaRevisione necessaria

Gli elementi devono rispettare le soglie minime del rapporto di contrasto cromatico

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
CondizioniNuovo brand (chiaro)Nuovo brand (scuro)CanvasCanvas ad alto contrasto
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6Revisione necessariaRevisione necessariaRevisione necessariaRevisione necessaria

La pagina cambia con prefers-contrast: more, ma non è stato possibile misurare alcun testo visibile.

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Lettore di schermo (simulato)Nuovo brand (chiaro)Nuovo brand (scuro)CanvasCanvas ad alto contrasto
AnnouncementsPassPassPassPass

Questi risultati automatizzati non dimostrano che la pagina sia conforme alle WCAG; è comunque necessaria una revisione manuale.

Token consumati ​

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