CSS: ai-gradient ​

.--background-ai-horizontal — עזרים לגרדיאנט דגש-בינה המיועדים למשטחים מותאמים, לא לחוזה המשותף של 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)מיתוג מחדש (בהיר)מיתוג מחדש (כהה)Canvasקנבס בניגודיות גבוהה
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
תנאיםמיתוג מחדש (בהיר)מיתוג מחדש (כהה)Canvasקנבס בניגודיות גבוהה
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
קורא מסך (מדומה)מיתוג מחדש (בהיר)מיתוג מחדש (כהה)Canvasקנבס בניגודיות גבוהה
AnnouncementsPassPassPassPass

תוצאות אוטומטיות אלה אינן מוכיחות שהדף עומד בדרישות WCAG; עדיין נדרשת בדיקה ידנית.

אסימוני צריכה ​

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)