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)Ребрендинг (светлая)Ребрендинг (тёмная)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)