CSS: ai-gradient ​

.--background-ai-horizontal — Βοηθήματα διαβάθμισης με έμφαση AI προοριζόμενα για προσαρμοσμένες επιφάνειες, όχι για το κοινό συμβόλαιο InstUI.

Source: index.ts

Χρήση ​

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

Τροποποιητές ​

ΤροποποιητήςΠεριγραφή
.--background-aiΖωγράφισε το φόντο του στοιχείου με την κοινή διαβάθμιση AI.
.--background-ai-horizontalοριζόντιο λογότυπο instructure (σκούρο).
.--border-color-aiΔιαφανές περίγραμμα πλαισιωμένο από την κοινή διαβάθμιση AI.
.--border-color-ai-horizontalοριζόντιο λογότυπο instructure (σκούρο).

Προσβασιμότητα ​

Κανόνες (axe-core)Επανασχεδιασμός (ανοιχτό)Επανασχεδιασμός (σκούρο)CanvasCanvas υψηλής αντίθεσης
color-contrastWCAG 2.2 1.4.3Απαιτείται έλεγχοςΑπαιτείται έλεγχοςΑπαιτείται έλεγχοςΑπαιτείται έλεγχος

Τα στοιχεία πρέπει να πληρούν τα ελάχιστα όρια αναλογίας αντίθεσης χρωμάτων

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
ΣυνθήκεςΕπανασχεδιασμός (ανοιχτό)Επανασχεδιασμός (σκούρο)CanvasCanvas υψηλής αντίθεσης
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6Απαιτείται έλεγχοςΑπαιτείται έλεγχοςΑπαιτείται έλεγχοςΑπαιτείται έλεγχος

Η σελίδα αλλάζει όταν το prefers-contrast είναι more, αλλά δεν ήταν δυνατή η μέτρηση ορατού κειμένου.

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Αναγνώστης οθόνης (προσομοιωμένος)Επανασχεδιασμός (ανοιχτό)Επανασχεδιασμός (σκούρο)CanvasCanvas υψηλής αντίθεσης
AnnouncementsPassPassPassPass

Αυτά τα αυτοματοποιημένα αποτελέσματα δεν αποδεικνύουν ότι η σελίδα συμμορφώνεται με το WCAG· εξακολουθεί να απαιτείται μη αυτόματος έλεγχος.

Καταναλωμένα tokens ​

TokenΤύποςΤιμή
--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)