CSS: ai-gradient ​

.--background-ai-horizontal — Допоміжні градієнти з акцентом ШІ, призначені для користувацьких поверхонь, а не для спільного контракту InstUI.

Source: index.ts

Використання ​

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

Модифікатори ​

МодифікаторОпис
.--background-aiЗабарвити фон елемента спільним градієнтом ШІ.
.--background-ai-horizontalinstructure горизонтальний логотип (темний).
.--border-color-aiПрозора рамка, обрамлена спільним градієнтом ШІ.
.--border-color-ai-horizontalinstructure горизонтальний логотип (темний).

Доступність ​

Правила (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)