CSS: ai-gradient ​

.--background-ai-horizontal — Auxiliares de gradiente com acento de IA destinados a superfícies personalizadas, não ao contrato compartilhado do InstUI.

Source: index.ts

Uso ​

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

Modificadores ​

ModificadorDescrição
.--background-aiPinte o fundo do elemento com o gradiente de IA compartilhado.
.--background-ai-horizontallogotipo horizontal do instructure (escuro).
.--border-color-aiUma borda transparente emoldurada pelo gradiente de IA compartilhado.
.--border-color-ai-horizontallogotipo horizontal do instructure (escuro).

Acessibilidade ​

Regras (axe-core)Nova identidade visual (claro)Nova identidade visual (escuro)CanvasCanvas de alto contraste
color-contrastWCAG 2.2 1.4.3Revisão necessáriaRevisão necessáriaRevisão necessáriaRevisão necessária

Os elementos devem atender aos limites mínimos da taxa de contraste de cores

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
CondiçõesNova identidade visual (claro)Nova identidade visual (escuro)CanvasCanvas de alto contraste
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6Revisão necessáriaRevisão necessáriaRevisão necessáriaRevisão necessária

A página muda com prefers-contrast: more, mas não foi possível medir nenhum texto visível.

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Leitor de tela (simulado)Nova identidade visual (claro)Nova identidade visual (escuro)CanvasCanvas de alto contraste
AnnouncementsPassPassPassPass

Esses resultados automatizados não comprovam que a página atende às WCAG; ainda é necessária uma revisão 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)