CSS: ai-gradient ​

.--background-ai-horizontal — AI-accent gradient helpers intended for custom surfaces, not the shared InstUI contract.

Source: index.ts

Usage ​

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

Modifiers ​

ModifierDescription
.--background-aiPaint the element background with the shared AI gradient.
.--background-ai-horizontalinstructure horizontal logo (dark).
.--border-color-aiA transparent border framed by the shared AI gradient.
.--border-color-ai-horizontalinstructure horizontal logo (dark).

Accessibility ​

Rules (axe-core)Rebrand (light)Rebrand (dark)CanvasCanvas High Contrast
color-contrastWCAG 2.2 1.4.3Review neededReview neededReview neededReview needed

Elements must meet minimum colour contrast ratio thresholds

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
ConditionsRebrand (light)Rebrand (dark)CanvasCanvas High Contrast
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6Review neededReview neededReview neededReview needed

The page changes under prefers-contrast: more, but no visible text was measurable.

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Screen reader (simulated)Rebrand (light)Rebrand (dark)CanvasCanvas High Contrast
AnnouncementsPassPassPassPass

These automated results do not establish that the page meets WCAG; manual review is still needed.

Tokens consumed ​

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