CSS: ai-gradient ​

.--background-ai-horizontal — KI-Akzent-Verlaufs-Hilfen, vorgesehen für benutzerdefinierte Flächen, nicht für den gemeinsamen InstUI-Vertrag.

Source: index.ts

Verwendung ​

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

Modifikatoren ​

ModifikatorBeschreibung
.--background-aiDen Elementhintergrund mit dem gemeinsamen KI-Verlauf füllen.
.--background-ai-horizontalinstructure horizontales Logo (dunkel).
.--border-color-aiEin transparenter Rahmen, umgeben vom gemeinsamen KI-Verlauf.
.--border-color-ai-horizontalinstructure horizontales Logo (dunkel).

Barrierefreiheit ​

Regeln (axe-core)Neugestaltung (hell)Neugestaltung (dunkel)CanvasCanvas mit hohem Kontrast
color-contrastWCAG 2.2 1.4.3Überprüfung erforderlichÜberprüfung erforderlichÜberprüfung erforderlichÜberprüfung erforderlich

Elemente müssen die Mindestanforderungen an das Farbkontrastverhältnis erfüllen

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
BedingungenNeugestaltung (hell)Neugestaltung (dunkel)CanvasCanvas mit hohem Kontrast
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6Überprüfung erforderlichÜberprüfung erforderlichÜberprüfung erforderlichÜberprüfung erforderlich

Die Seite ändert sich bei prefers-contrast: more, aber es war kein sichtbarer Text messbar.

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Screenreader (simuliert)Neugestaltung (hell)Neugestaltung (dunkel)CanvasCanvas mit hohem Kontrast
AnnouncementsPassPassPassPass

Diese automatisierten Ergebnisse belegen nicht, dass die Seite WCAG erfüllt; eine manuelle Überprüfung ist weiterhin erforderlich.

Verbrauchte Tokens ​

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